/* Bombo-Lumene guide: same design as the Lola ya Bonobo guide and the other Karibu Congo destination pages
(Inter, teal-600, rounded cards). Self-contained: if your other guides load a shared stylesheet, you can
keep this file for the page-specific parts and add that stylesheet link in index.html as well. */
:root{--teal-300:#5eead4;--teal-400:#2dd4bf;--teal-50:#f0fdfa;--teal-600:#0d9488;--teal-700:#0f766e;
--z50:#fafafa;--z100:#f4f4f5;--z400:#a1a1aa;--z500:#71717a;--z600:#52525b;--z900:#18181b;
--bg:#fff;--fg:#000;--head:#18181b;--body:#52525b;--line:rgba(0,0,0,.05);--card:#fff;--mute:#a1a1aa;--soft:#f0fdfa}
@media (prefers-color-scheme:dark){:root{--bg:#000;--fg:#fff;--head:#fafafa;--body:#a1a1aa;--line:rgba(255,255,255,.1);--card:#18181b;--mute:#71717a;--soft:#0b1f1c}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--fg);min-height:100vh;display:flex;flex-direction:column;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
main{flex:1}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem}

/* header */
header.top{border-bottom:1px solid var(--line);background:var(--bg)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4rem}
.logo{font-weight:800;font-size:1.25rem;letter-spacing:-.025em;color:var(--head)}
.logo span{color:var(--teal-600)}
nav.main{display:flex;gap:1.25rem;font-size:.875rem;font-weight:500;color:var(--body);overflow-x:auto;white-space:nowrap}
nav.main a:hover{color:var(--teal-700)}

/* hero */
.hero-box{position:relative;height:22rem;overflow:hidden;background:var(--z900)}
@media (min-width:640px){.hero-box{height:30rem}}
.hero-box img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.05) 65%)}
.hero .txt{position:absolute;left:0;right:0;bottom:0;padding-bottom:2rem;color:#fff}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-300)}
.hero h1{margin-top:.5rem;font-size:2rem;line-height:1.1;font-weight:800;letter-spacing:-.03em}
@media (min-width:640px){.hero h1{font-size:3rem}}
.sub{margin-top:.75rem;max-width:40rem;font-size:1rem;color:rgba(255,255,255,.9)}

/* sections */
section.pad{padding-top:3rem;padding-bottom:0}
section.pad:last-of-type{padding-bottom:4rem}
.crumb{font-size:.8125rem;color:var(--mute)}
.crumb a:hover{color:var(--teal-700)}
.facts,.stats{margin-top:1.25rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media (min-width:640px){.facts{grid-template-columns:repeat(4,1fr)}.stats{grid-template-columns:repeat(3,1fr)}}
.facts>div,.stats>div{border-radius:1rem;background:var(--card);border:1px solid var(--line);padding:1rem}
.lbl{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.val{margin-top:.25rem;font-weight:600;color:var(--head)}
.cta{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-flex;align-items:center;border-radius:.75rem;padding:.7rem 1.25rem;font-size:.9375rem;font-weight:600;transition:background .15s}
.btn.p{background:var(--teal-600);color:#fff}.btn.p:hover{background:var(--teal-700)}
.btn.o{border:1px solid rgba(0,0,0,.12);color:var(--head)}.btn.o:hover{background:var(--z50)}
@media (prefers-color-scheme:dark){.btn.o{border-color:rgba(255,255,255,.2)}.btn.o:hover{background:var(--card)}}
.btn.inl{margin-top:1.25rem}

/* text */
h2.h{font-size:1.5rem;line-height:1.3;font-weight:700;letter-spacing:-.025em;color:var(--head)}
@media (min-width:640px){h2.h{font-size:1.875rem}}
h3.solo{font-size:1.0625rem;font-weight:700;color:var(--head)}
.kick{margin-top:.5rem;font-weight:600;color:var(--head)}
.lead{margin-top:.5rem;max-width:42rem;color:var(--body)}
.intro{max-width:48rem;color:var(--body)}.intro p+p{margin-top:1rem}
.prose{margin-top:1rem;max-width:48rem;color:var(--body)}.prose p+p{margin-top:1rem}
.prose a,.src a,.faq a,.note a,.callout a{color:var(--teal-700);text-decoration:underline;text-underline-offset:2px}
@media (prefers-color-scheme:dark){.prose a,.src a,.faq a,.note a,.callout a{color:var(--teal-400)}}
.note{margin-top:1rem;font-size:.8125rem;color:var(--mute)}

/* photo strip + cards */
.strip{margin-top:2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (min-width:640px){.strip{grid-template-columns:repeat(4,1fr)}}
.strip div{position:relative;height:10rem;overflow:hidden;border-radius:1rem}
.strip img,.card .im img{width:100%;height:100%;object-fit:cover}
.grid{margin-top:1.5rem;display:grid;gap:1.5rem}
@media (min-width:640px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}}
.card{overflow:hidden;border-radius:1rem;background:var(--card);border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card .im{height:13rem;overflow:hidden;background:var(--z100)}
.card .bd{padding:1.25rem}
.card p{margin-top:.5rem;font-size:.9375rem;color:var(--body)}
figure.ph{margin-top:1.5rem;overflow:hidden;border-radius:1rem;border:1px solid var(--line);background:var(--card)}
figure.ph img{width:100%;height:auto}
figure.ph figcaption{padding:.75rem 1rem;font-size:.8125rem;color:var(--mute)}
.split{margin-top:1.5rem;display:grid;gap:1.5rem;align-items:start}
.split figure.ph{margin-top:0}
@media (min-width:768px){.split{grid-template-columns:1fr 1fr}}

/* process steps */
.steps{margin-top:1.5rem;display:grid;gap:1rem;counter-reset:s}
.steps li{list-style:none;position:relative;border-radius:1rem;background:var(--card);border:1px solid var(--line);padding:1.25rem 1.25rem 1.25rem 4rem;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:1.25rem;top:1.25rem;width:2rem;height:2rem;border-radius:999px;background:var(--teal-600);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.steps p{margin-top:.25rem;font-size:.9375rem;color:var(--body)}

/* comparison + tables */
.tbl{margin-top:1.5rem;overflow-x:auto;border-radius:1rem;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:.9375rem;background:var(--card)}
th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);background:var(--z50)}
@media (prefers-color-scheme:dark){th{background:#0f0f10}}
td:first-child{font-weight:600;color:var(--head);white-space:nowrap}
td{color:var(--body)}
tr:last-child td{border-bottom:0}

/* callout + faq */
.callout{margin-top:1.5rem;border-radius:1rem;background:var(--soft);border:1px solid var(--line);padding:1.25rem 1.5rem;color:var(--body)}
.callout strong{color:var(--head)}
.faq{margin-top:1.5rem;display:grid;gap:.75rem}
.faq details{border-radius:1rem;background:var(--card);border:1px solid var(--line);padding:1rem 1.25rem}
.faq summary{cursor:pointer;font-weight:600;color:var(--head);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--teal-600);font-weight:700}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:.75rem;color:var(--body)}
.src{margin-top:1rem;font-size:.875rem;color:var(--body);padding-left:1.25rem}
.src li{margin-top:.35rem}

/* newsletter + footer */
.news{border-radius:1.5rem;background:var(--teal-600);color:#fff;padding:2rem;text-align:center}
.news h2{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.news p{margin-top:.5rem;color:rgba(255,255,255,.9)}
.news form{margin:1.25rem auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:28rem}
.news input{flex:1;min-width:12rem;border-radius:.75rem;padding:.7rem 1rem;color:#000;background:#fff}
.news button{border-radius:.75rem;padding:.7rem 1.25rem;font-weight:600;background:var(--z900);color:#fff;cursor:pointer}
footer{border-top:1px solid var(--line);background:var(--z50);padding:2.5rem 0;margin-top:0}
@media (prefers-color-scheme:dark){footer{background:#0a0a0b}}
footer .cols{display:grid;gap:2rem}
@media (min-width:640px){footer .cols{grid-template-columns:2fr 1fr 1fr}}
footer h3{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
footer nav{margin-top:.75rem;display:grid;gap:.4rem;font-size:.9375rem;color:var(--body)}
footer nav a:hover{color:var(--teal-700)}
footer .about{margin-top:.75rem;max-width:22rem;font-size:.9375rem;color:var(--body)}
footer .copy{margin-top:2rem;font-size:.8125rem;color:var(--mute)}