/* CHITO AFRICA - Cabanga Platforms
   Identity: fibre-optic. Cobalt ground, signal cyan accent, white surface.
   Deliberately distinct from Musika (green/gold), Mwambo (ink/vermilion),
   Ndarama (ore/gold) and Chinyama (veld). Where those are earth and trade,
   Chito is signal and connection. This build is LIGHT, not dark.

   House standard: self-hosted Barlow and Barlow Condensed, 4px radius. */

@font-face{font-family:'Barlow';src:url('../fonts/Barlow-400.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/Barlow-500.woff') format('woff');font-weight:500;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/Barlow-600.woff') format('woff');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/BarlowCondensed-600.woff') format('woff');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/BarlowCondensed-700.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/BarlowCondensed-800.woff') format('woff');font-weight:800;font-display:swap}

:root{
  /* BeanBreaker system applied to Chito. Chito Africa is a BeanBreaker product.
     Espresso Black anchors; Roast Brown gives depth; Latte Cream / Paper warm the
     negative space; Coffee Cherry Red is the single decisive accent, used sparingly.
     Legacy token names are kept and remapped so every var() reference re-skins at once:
     --cobalt* = roast brown (brand/depth)  |  --cyan* = cherry (the one accent)
     --white/--vapour = paper grounds. */
  --cobalt:#4B2E18;    /* roast brown - brand / dark grounds */
  --cobalt-2:#2A1810;  /* deep roast */
  --cobalt-3:#5E3A20;  /* roast lift / hover */
  --cyan:#B0322A;      /* coffee cherry red - the single accent, CTA */
  --cyan-dk:#8A241D;   /* cherry deep - small accent label on paper (AA) */
  --cyan-lt:#D08A5A;   /* warm caramel lift - accent tint on dark grounds */
  --white:#F7F3EA;     /* raised paper band */
  --vapour:#F3ECDD;    /* body base paper */
  --card:#FBF7EA;      /* card paper - crisp warm */
  --ink:#0C0C0C;       /* espresso black */
  --slate:#5B4A34;     /* muted roast text */
  --line:#E4D8C2;      /* warm hairline */
  --line-dk:#6B4A2E;   /* roast line on dark grounds */
  --ok:#4B2E18;
  --warn:#9A5A28;
  /* semantic aliases for art/layout rules */
  --oat:#F3ECDD; --oat-lift:#F7F3EA; --oat-line:#E4D8C2;
  --navy:#4B2E18; --navy-2:#2A1810; --navy-3:#5E3A20;
  --brass:#C9A87C; --brass-lift:#E2CBA5; --brass-deep:#9A6B3F;
  --latte:#E8DCC5; --cherry:#B0322A; --espresso:#0C0C0C;
  --paper-on-dark:#E8DCC5;
  --r:2px;
  --shell:1180px;
  --sans:'Source Sans 3','Barlow','Segoe UI',Roboto,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --cond:'Montserrat','Barlow Condensed','Barlow','Arial Narrow','Segoe UI',Roboto,system-ui,sans-serif;
  --mono:'Source Sans 3','Barlow','Segoe UI',Roboto,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--vapour);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  padding-bottom:64px;-webkit-font-smoothing:antialiased;
}
@media(min-width:721px){body{padding-bottom:0}}
img,svg{max-width:100%}
a{color:var(--cobalt);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--cond);font-weight:700;line-height:1.1;letter-spacing:.01em;margin:0 0 .5em}
h1{font-size:2.1rem;text-transform:uppercase}
h2{font-size:1.5rem;text-transform:uppercase}
h3{font-size:1.15rem}
@media(min-width:721px){h1{font-size:2.9rem}h2{font-size:1.9rem}h3{font-size:1.25rem}}
p{margin:0 0 1em}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.wrap{width:100%;max-width:var(--shell);margin:0 auto;padding:0 16px}
@media(min-width:721px){.wrap{padding:0 24px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;font-weight:500}

/* ---------- preview strip ---------- */
.preview{background:var(--warn);color:#fff;font-family:var(--cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;text-align:center;padding:6px 12px}
.preview a{color:#fff;text-decoration:underline}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;background:var(--cobalt);color:#fff;
  border-bottom:1px solid var(--line-dk)}
.topbar .wrap{display:flex;align-items:center;gap:10px;min-height:56px;padding-top:6px;padding-bottom:6px}
@media(min-width:560px){.brand b{font-size:1.42rem}.brand i{white-space:nowrap;font-size:.62rem;letter-spacing:.2em}}
@media(min-width:721px){.topbar .wrap{min-height:64px;padding-top:0;padding-bottom:0}}
.brand{display:flex;align-items:center;gap:10px;color:#fff;min-width:0;flex:0 1 auto}
.brand:hover{text-decoration:none}
.brand svg{width:32px;height:32px;display:block;flex:none}
.brand svg.logo{width:auto;height:30px}
.brand b{font-family:var(--cond);font-weight:800;font-size:1.2rem;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.brand b .af{font-weight:600}
.brand i{display:block;font-style:normal;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-lt);font-weight:600;font-family:var(--cond)}
.topbar .spacer{flex:1}
.topbar .hcta{display:flex;align-items:center;gap:8px;flex:none}
.topbar .hcta a{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  font-size:.76rem;padding:8px 13px;border-radius:var(--r);white-space:nowrap;line-height:1}
.topbar .hcta .cta{background:var(--cyan);color:#fff;border:1px solid var(--cyan)}
.topbar .hcta .cta:hover{background:var(--cyan-lt);border-color:var(--cyan-lt);color:#fff;text-decoration:none}
.topbar .hcta .ghost{color:#F3ECDD;border:1px solid rgba(232,220,197,.42);background:transparent}
.topbar .hcta .ghost:hover{border-color:#E8DCC5;background:rgba(232,220,197,.10);color:#fff;text-decoration:none}
@media(max-width:520px){.topbar .hcta a{font-size:.7rem;padding:7px 10px;letter-spacing:.05em}}

/* ---------- section nav (721px and up) ---------- */
.snav{display:none;background:var(--cobalt-2);border-bottom:1px solid var(--line-dk);position:sticky;top:64px;z-index:35}
@media(min-width:721px){.snav{display:block}}
.snav .wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px 4px;min-height:46px;padding-top:5px;padding-bottom:5px}
/* the native horizontal scrollbar must never render anywhere on the site */
*{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{width:0;height:0;display:none}
.snav a{font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;font-size:.84rem;font-weight:600;
  color:#CFC4A6;padding:6px 9px;border-radius:var(--r);white-space:nowrap}
.snav a:hover{background:var(--cobalt-3);color:#fff;text-decoration:none}
.snav a.on{color:#F7F3EA;background:rgba(232,220,197,.10);box-shadow:inset 0 -2px 0 var(--cyan)}

/* ---------- bottom tabs (mobile) ---------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--cobalt);
  border-top:1px solid var(--line-dk);display:flex;padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:721px){.tabs{display:none}}
.tabs a{flex:1;padding:8px 2px 9px;text-align:center;color:#C9BE9E;font-family:var(--cond);
  text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;font-weight:600}
.tabs a:hover{text-decoration:none}
.tabs a.on{color:var(--cyan-lt)}
.tabs svg{width:22px;height:22px;display:block;margin:0 auto 2px}

/* ---------- hero ---------- */
.hero{background:var(--cobalt);color:#fff;padding:34px 0 38px;
  background-image:radial-gradient(circle at 86% 6%,rgba(201,168,124,.30),transparent 58%)}
.hero h1{color:#fff;max-width:17ch}
.hero .lede{font-size:1.06rem;color:var(--paper-on-dark);max-width:56ch}
.hero a{color:var(--cyan-lt)}
@media(min-width:721px){.hero{padding:56px 0 60px}.hero .lede{font-size:1.16rem}}
.kicker{font-family:var(--cond);text-transform:uppercase;letter-spacing:.2em;font-size:.8rem;
  font-weight:600;color:var(--cyan);margin:0 0 10px}
.hero .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ---------- buttons ---------- */
/* One button system everywhere. Primary is cherry; secondary is outlined;
   never two cherries competing. Mono-uppercase, near-square corners, generous
   padding - the BeanBreaker call-to-action standard. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.94rem;
  padding:13px 26px;border-radius:var(--r);border:2px solid transparent;cursor:pointer;
  background:var(--cherry);color:#F7F3EA;text-align:center}
.btn:hover{background:var(--cyan-dk);text-decoration:none;color:#F7F3EA}
.btn.alt{background:transparent;color:#F3ECDD;border-color:rgba(243,236,221,.55)}
.btn.alt:hover{background:rgba(243,236,221,.12);color:#fff;border-color:#F3ECDD}
.btn.dark{background:var(--cobalt);color:#F7F3EA;border-color:transparent}
.btn.dark:hover{background:var(--cobalt-3);color:#F7F3EA}
.btn.alt.dark{background:transparent;color:var(--cobalt);border-color:var(--cobalt)}
.btn.alt.dark:hover{background:var(--cobalt);color:#F7F3EA}
.btn.wide{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- accordions (native details) ---------- */
.acc{border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin:0 0 10px;overflow:hidden}
.acc>summary{list-style:none;cursor:pointer;padding:14px 16px;font-family:var(--cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:1rem;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:"+";font-family:var(--cond);font-size:1.35rem;line-height:1;color:var(--cherry);font-weight:700}
.acc[open]>summary::after{content:"\2013"}
.acc[open]>summary{border-bottom:1px solid var(--line)}
.acc-body{padding:14px 16px}
.acc-body p{margin:0 0 8px}.acc-body p:last-child{margin:0}
.acc-body ul{margin:0}
.band-dark .acc{background:rgba(247,243,234,.06);border-color:var(--line-dk)}
.band-dark .acc>summary{color:#fff}
.band-dark .acc[open]>summary{border-color:var(--line-dk)}
.band-dark .acc-body{color:var(--paper-on-dark)}

/* ---------- step strip (icon + number, descriptive) ---------- */
.steps{display:grid;gap:14px;margin-top:18px}
@media(min-width:640px){.steps.s2{grid-template-columns:repeat(2,1fr)}.steps.s3{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px 16px}
.step .si{display:block;width:32px;height:32px;margin:0 0 12px}
.step .sn{position:absolute;top:14px;right:16px;font-family:var(--cond);font-weight:800;font-size:1.5rem;line-height:1;color:var(--brass)}
.step h3{font-size:1.05rem;margin:0 0 6px}
.step p{margin:0;font-size:.94rem;color:var(--slate)}
.band .step,.band-dark .step{background:var(--card)}
.band-dark .step{background:rgba(247,243,234,.06);border-color:var(--line-dk)}
.band-dark .step h3{color:#fff}.band-dark .step p{color:var(--paper-on-dark)}
.band-dark .step .sn{color:var(--brass-lift)}

/* ---------- home gate captions (align under the three-gate scene) ---------- */
.gatecaps{display:grid;gap:14px;margin-top:16px}
@media(min-width:700px){.gatecaps{grid-template-columns:repeat(3,1fr)}}
.gatecap h3{font-size:1.05rem;margin:0 0 4px}
.gatecap .gt{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:700;color:var(--cherry);display:block;margin:0 0 2px}
.gatecap p{margin:0;font-size:.92rem;color:var(--slate)}

/* ---------- stance row (a professional figure beside a statement) ---------- */
.figill{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px}
.figill img{display:block;width:100%;height:auto;aspect-ratio:600/720;object-fit:contain}
.stancerow{display:grid;gap:20px;align-items:center;margin:0 0 16px}
@media(min-width:760px){.stancerow{grid-template-columns:210px 1fr}.stancerow .figill{max-width:210px}}

/* ---------- sections ---------- */
section{padding:30px 0}
@media(min-width:721px){section{padding:44px 0}}
.band{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-dark{background:var(--cobalt);color:#fff;border:0}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark p{color:var(--paper-on-dark)}
.band-dark a{color:var(--cyan-lt)}
.lead{font-size:1.05rem;max-width:72ch}
/* one consistent reading measure for section prose - lead and body never mismatch width */
section>.wrap>p{max-width:72ch}
/* consistent prose measure - every paragraph in a block reads to the same width */
.narrate{max-width:72ch}
.narrate p{max-width:none}
.narrate .lead{max-width:none}
/* text beside its own art column, generous - art never stacked under the words on wide screens */
.introsplit{display:grid;gap:22px;align-items:center}
.introsplit .ill{margin:0}
.introsplit .ill img{width:100%;height:auto}
@media(min-width:860px){.introsplit{grid-template-columns:1.12fr .88fr;gap:36px}}
.muted{color:var(--slate)}
.small{font-size:.88rem}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
@media(min-width:640px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}}

.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.box h3{margin-bottom:.35em}
.box p:last-child{margin-bottom:0}
.band .box{background:var(--vapour)}
.band-dark .box{background:var(--cobalt-2);border-color:var(--line-dk)}
.band-dark .box p{color:var(--paper-on-dark)}

.rule{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.rule:last-child{border-bottom:0}
.rule .n{font-family:var(--cond);font-weight:800;font-size:1.35rem;color:var(--cyan-dk);
  line-height:1;min-width:28px}
.band-dark .rule{border-color:var(--line-dk)}
.band-dark .rule .n{color:var(--cyan)}
.rule p{margin:0}
.rule h3{margin:0 0 .2em}

.note{border-left:3px solid var(--brass-deep);background:var(--white);color:var(--ink);padding:12px 14px;border-radius:0 var(--r) var(--r) 0}
.note p{color:var(--ink)}
.note p:last-child{margin-bottom:0}

ul.tick{list-style:none;padding:0;margin:0 0 1em}
ul.tick li{position:relative;padding:6px 0 6px 24px;border-bottom:1px solid var(--line)}
ul.tick li:last-child{border-bottom:0}
ul.tick li::before{content:"";position:absolute;left:2px;top:14px;width:9px;height:9px;
  background:var(--cyan);border-radius:1px}
.band-dark ul.tick li{border-color:var(--line-dk)}

/* ---------- the Uptime Badge - the signature device ---------- */
.mark{width:52px;height:52px;flex:0 0 52px;display:block}
.mark-lg{width:88px;height:88px;flex-basis:88px}

/* ---------- cards ---------- */
.cards{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;
  display:flex;flex-direction:column;gap:10px}
.card .top{display:flex;gap:12px;align-items:flex-start}
.card .hd{flex:1;min-width:0}
.card .place{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:1.18rem;line-height:1.1;margin:0}
.card .place a{color:var(--ink)}
.card .sub{font-size:.84rem;color:var(--slate);margin:2px 0 0}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:.9rem}
.card dt{color:var(--slate);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;
  font-family:var(--cond);font-weight:600;align-self:center}
.card dd{margin:0;font-weight:600}
.card .foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;
  padding-top:10px;border-top:1px solid var(--line)}
.ref{font-family:var(--mono);font-weight:500;letter-spacing:.06em;color:var(--slate);font-size:.82rem}

.tag{display:inline-block;font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:.74rem;padding:3px 8px;border-radius:var(--r);
  background:var(--vapour);color:var(--cobalt);border:1px solid var(--line)}
.tag.cyan{background:var(--cyan);border-color:var(--cyan-dk);color:#F7F3EA}
.tag.green{background:#EFE6D3;border-color:#C9A87C;color:#4B2E18}
.tag.warn{background:#F5E2D5;border-color:#E0C2AA;color:#7C4020}
.tag.dark{background:var(--cobalt);border-color:var(--cobalt);color:#fff}

.demand{border-left:3px solid var(--cyan)}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(min-width:721px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--card);padding:14px}
.band-dark .stats,.hero .stats{background:var(--line-dk);border-color:var(--line-dk)}
.band-dark .stat,.hero .stat{background:var(--cobalt-2)}
.stat b{display:block;font-family:var(--cond);font-weight:800;font-size:1.9rem;line-height:1;color:var(--cyan-dk)}
.band-dark .stat b,.hero .stat b{color:var(--cyan)}
.stat span{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--slate);margin-top:4px;font-family:var(--cond);font-weight:600}
.band-dark .stat span,.hero .stat span{color:#C9BE9E}

/* ---------- filters ---------- */
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:16px}
.filters .row{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media(min-width:721px){.filters .row{grid-template-columns:repeat(4,1fr)}}
.filters .row + .row{margin-top:10px}
.count{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:.85rem;color:var(--slate);margin:0 0 10px}

/* ---------- forms ---------- */
label{display:block;font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:.82rem;color:var(--slate);margin:0 0 4px}
input,select,textarea{width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px 11px;
  appearance:none;-webkit-appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),linear-gradient(135deg,var(--slate) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;padding-right:34px}
input[type=file]{padding:8px;background:var(--vapour)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:var(--cyan)}
.field{margin:0;display:flex;flex-direction:column}
.field input,.field select,.field textarea{margin-top:auto}
.fields{display:grid;gap:16px;grid-template-columns:1fr;align-items:stretch}
@media(min-width:640px){.fields{grid-template-columns:1fr 1fr;gap:18px 18px}}
.fields .full{grid-column:1/-1}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:0 0 18px;background:var(--card)}
legend{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:.9rem;padding:0 6px;color:var(--cobalt)}
.hint{font-size:.83rem;color:var(--slate);margin:-8px 0 14px}
.formwrap{max-width:780px}
.err{color:#8C2F1B;font-size:.86rem;margin:6px 0 0;font-weight:600}
.check-row{display:flex;gap:9px;align-items:flex-start;margin:0 0 10px}
.check-row input{width:auto;flex:none;margin-top:4px}
.check-row label{text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:.92rem;
  color:var(--ink);font-weight:400;margin:0}

/* A form dropped onto the dark band inherits slate labels, which are invisible
   on cobalt. State the dark-band case explicitly rather than banning dark forms. */
.band-dark label{color:#C9BE9E}
.band-dark .check-row label{color:var(--paper-on-dark)}
.band-dark .hint{color:#C9BE9E}
.band-dark .hint a,.band-dark .box a{color:var(--cyan-lt)}
.band-dark legend{color:#fff}

/* selection summary inside the introduction request (sits on the dark band) */
.selbox{margin:0 0 14px}
.selempty{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:14px 15px}
.selempty p{margin:0 0 8px}
.selempty p:last-child{margin:0}
.selhd{display:flex;align-items:center;gap:9px;margin:0 0 8px;font-size:1rem;color:#fff}
.seln{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--cyan);color:var(--cobalt-2);font-family:var(--cond);font-weight:700;font-size:.82rem}
.selist{list-style:none;margin:0 0 8px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:var(--r);overflow:hidden}
.selist li{display:flex;align-items:center;gap:10px;padding:9px 12px;background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.10)}
.selist li:first-child{border-top:0}
.selrole{flex:1;font-family:var(--cond);font-weight:600;letter-spacing:.02em;font-size:1.02rem;color:#fff}
.selist .ref{font-size:.76rem;color:var(--cyan-lt);letter-spacing:.06em}
.selx{width:26px;height:26px;flex:none;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;font-size:1.1rem;line-height:1;cursor:pointer}
.selx:hover{background:var(--cyan-dk);border-color:transparent;color:#fff}
.sel-err{margin:10px 0 0}

/* answer-first TL;DR callout - reusable across money pages (light sections) */
.tldr{background:var(--vapour);border-left:3px solid var(--cyan);border-radius:0 var(--r) var(--r) 0;padding:14px 16px;margin:0 0 22px;max-width:820px}
.tldr b{display:block;margin:0 0 4px;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--cyan-dk)}
.tldr p{margin:0;font-size:1.02rem}
.band-dark fieldset{background:var(--cobalt-2);border-color:var(--line-dk)}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th,.tbl td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--slate)}
.scroll{overflow-x:auto}

/* ---------- the standard, published ---------- */
.std{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:0;margin:0 0 14px;overflow:hidden}
.std .sh{display:flex;gap:12px;align-items:center;background:var(--vapour);
  border-bottom:1px solid var(--line);padding:11px 14px}
.std .sh b{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:1.02rem;color:var(--cobalt)}
.std .sb{padding:13px 14px}
.std .sb p:last-child{margin-bottom:0}
.std .proof{font-size:.86rem;color:var(--slate);border-top:1px dashed var(--line);
  margin:10px 0 0;padding-top:9px}
.std .proof b{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:.76rem;color:var(--cyan-dk);display:block;margin-bottom:2px}
.stepn{font-family:var(--cond);font-weight:800;font-size:1.2rem;color:var(--cyan-dk);
  min-width:26px;line-height:1}

/* ---------- footer ---------- */
footer{background:var(--cobalt);color:#C9BE9E;padding:30px 0 34px;margin-top:10px;font-size:.92rem}
footer h4{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;
  color:var(--cyan);margin:0 0 8px}
footer a{color:var(--paper-on-dark);display:block;padding:3px 0}
footer a:hover{color:#fff}
.fgrid{display:grid;gap:20px;grid-template-columns:1fr 1fr}
@media(min-width:721px){.fgrid{grid-template-columns:2fr 1fr 1fr 1fr}}
.legal{border-top:1px solid var(--line-dk);margin-top:22px;padding-top:16px;font-size:.85rem;color:#A99B78}
.legal p{margin:0 0 6px}
.legal a{display:inline}

/* ---------- misc ---------- */
.cards .empty{grid-column:1/-1}
.empty{background:var(--card);border:1px dashed var(--line);border-radius:var(--r);
  padding:24px;text-align:center;color:var(--slate)}
.crumbs{font-size:.82rem;color:var(--slate);padding:12px 0 0;font-family:var(--cond);
  text-transform:uppercase;letter-spacing:.08em}
.crumbs a{color:var(--slate)}
.refbox{background:var(--cobalt);color:#fff;border-radius:var(--r);padding:18px;text-align:center}
.refbox b{display:block;font-family:var(--mono);font-size:1.7rem;letter-spacing:.1em;color:var(--cyan);line-height:1.2}
.refbox span{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:#C9BE9E;font-family:var(--cond)}
.split{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.split>*{flex:1 1 260px}
.pill-row{display:flex;flex-wrap:wrap;gap:6px}

/* the detail sheet */
.sheet{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.sheet .hdr{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.sheet .hdr h1{margin:0 0 4px;font-size:1.7rem}
@media(min-width:721px){.sheet .hdr h1{font-size:2.2rem}}
.sheet dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:16px 0 0;font-size:.95rem}
.sheet dt{color:var(--slate);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;
  font-family:var(--cond);font-weight:600;padding-top:2px}
.sheet dd{margin:0;font-weight:600}
.locked{background:var(--vapour);border:1px dashed var(--line);border-radius:var(--r);
  padding:16px;margin:16px 0 0}
.locked h3{margin:0 0 .35em;color:var(--cobalt)}
.locked ul{margin:0 0 12px;padding-left:20px}
.locked li{padding:2px 0}

/* the fee table */
.fee{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;grid-template-columns:1fr}
@media(min-width:640px){.fee{grid-template-columns:repeat(3,1fr)}}
.fee>div{background:var(--card);padding:16px}
.fee b{display:block;font-family:var(--cond);font-weight:800;font-size:2rem;line-height:1;
  color:var(--cobalt)}
.fee span{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--slate);margin-top:5px;font-family:var(--cond);font-weight:600}
.fee p{margin:9px 0 0;font-size:.88rem;color:var(--slate)}

/* ---------- Cosa Nostra Protocol - the code gate ---------- */
.codegate{margin-top:18px;border-color:var(--cyan);border-width:2px}
.codegate h3{margin:2px 0 8px}
.codegate #otp{font-family:var(--mono);font-size:1.4rem;letter-spacing:.28em;text-align:center;max-width:11ch}
.codegate .submitrow{margin-top:14px}
.codegate .hint a{color:var(--cyan-dk);text-decoration:underline}
.submitrow{margin-top:18px}
.submitrow .hint{margin-top:10px;text-align:center}
.grid + .small{margin-top:14px}

/* ==========================================================================
   ILLUSTRATION SET - the fibre-optic drawings
   Line-drawn desks, signal arcs and hardware. The drawings carry no
   information the copy does not, so they are the first thing dropped when
   the screen is small or the app is running as an installed tool.
   ========================================================================== */
.ill{margin:0;line-height:0}
.ill img{width:100%;height:auto;display:block;aspect-ratio:1000/680}
img[src$="ill-gates.svg"]{aspect-ratio:1000/430}
.heroill{margin-top:20px;display:flex;align-items:flex-end;justify-content:center}
.heroill img{max-width:560px;margin:0 auto}
.cardill{max-width:none;width:100%;margin:0 0 8px;opacity:1}
.sideill{max-width:520px;margin:0 0 14px}
.inviteill{max-width:440px;margin:0 auto}
.invite-strip{background:var(--cobalt);color:#fff;padding:34px 0}
.invite-strip h2{color:#fff}
.invite-strip .invite-inner{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;justify-content:space-between}
.invite-strip .btns{display:flex;flex-wrap:wrap;gap:10px}

@media(min-width:960px){
  .herosplit .herogrid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:40px;align-items:center}
  .herosplit .heroill{margin-top:0;max-height:none;overflow:visible;display:block}
  .herosplit .heroill img{max-width:100%}
  .herosplit .herotext{max-width:none}
  .heroill-side .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    column-gap:40px;align-items:center;padding-right:0}
  .heroill-side .wrap>:not(.sideill){grid-column:1;min-width:0}
  .heroill-side .sideill{grid-column:2;grid-row:1/span 30;align-self:center;
    position:static;right:auto;top:auto;transform:none;max-width:100%;width:100%;margin:0;opacity:1}
  .heroill-side .sideill img{width:100%;height:auto;max-width:100%}
  .boxill{display:flex;flex-direction:column}
  .cardill{max-width:none;margin-bottom:12px}
  .g3{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1280px){
  .herosplit .herogrid{gap:56px}
  .heroill-side .wrap{column-gap:56px}
}

/* ==========================================================================
   INSTALLED APP - display-mode: standalone
   On a home screen this stops being a brochure and becomes a tool.
   ========================================================================== */
@media all and (display-mode:standalone){
  .heroill,.cardill,.sideill,.inviteill{display:none}
  .heroill-side .wrap{padding-right:0}
  .hero{padding:20px 0 22px}
  .hero h1{font-size:1.7rem;line-height:1.15}
  .hero .lede{font-size:1rem}
  .topbar .tline{display:none}
  section{padding:22px 0}
  .topbar .wrap{padding-top:env(safe-area-inset-top)}
  .tabs{padding-bottom:env(safe-area-inset-bottom)}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .topbar,.tabs{-webkit-user-select:none;user-select:none}
}
@media all and (display-mode:standalone) and (min-width:960px){
  .hero h1{font-size:2.3rem}
  section{padding:30px 0}
}

/* ---------- motion ---------- */
.ill img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.boxill:hover .cardill img{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .ill img{transition:none}
}

/* ---------- micro-detail ---------- */
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:2px}
::selection{background:var(--cyan-lt);color:var(--ink)}

/* the twelve magazine editions */
.edgrid{display:grid;gap:8px;grid-template-columns:1fr 1fr;margin:18px 0 14px}
.ed{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--cyan);
    border-radius:var(--r);padding:9px 11px}
.ed b{display:block;font-family:var(--cond);font-size:1.05rem;letter-spacing:.01em;line-height:1.15}
@media(min-width:640px){.edgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.edgrid{grid-template-columns:repeat(4,1fr)}}

.num{font-family:var(--cond);font-size:1.55rem;letter-spacing:.01em;margin:.15em 0 .5em}
.num a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--cyan)}
.num a:hover{color:var(--cyan-dk)}

@media print{
  .topbar,.snav,.tabs,.preview,.filters,.btn{display:none !important}
  body{background:#fff;padding:0}
  footer{background:#fff;color:#000}
}

/* On a narrow screen the infrastructure table has two long columns and no room
   for either. Stack it rather than squeezing it. */
@media(max-width:560px){
  .sheet .tbl tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
  .sheet .tbl tr:last-child{border-bottom:0}
  .sheet .tbl th,.sheet .tbl td{display:block;width:auto !important;border-bottom:0;padding:2px 0}
  .sheet dl{grid-template-columns:1fr;gap:2px 0}
  .sheet dt{padding-top:8px}
}

/* ============================================================
   v1.4 - the candidate's own code, the live cart, the floating
   WhatsApp desk, self-lookup and the single Index announcement.
   ============================================================ */

/* The candidate's listing code. Deliberately quiet - it is not a label an
   employer needs, it is the handle a candidate uses to find themselves. */
.selfcode{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:#9A9384;
  margin:5px 0 0;line-height:1;text-transform:uppercase}
.sheet .selfcode{margin-top:8px;font-size:.7rem}

/* The live selection cart. Bottom right, above the mobile tab bar, and
   lifted clear when the WhatsApp desk button shares the corner. */
.selcart{position:fixed;right:14px;bottom:66px;z-index:44;display:flex;align-items:center;gap:10px;
  background:var(--cobalt);color:#fff;border:1px solid var(--cyan);border-radius:40px;
  padding:9px 14px 9px 12px;box-shadow:0 8px 26px rgba(42,24,16,.30);text-decoration:none;
  font-family:var(--cond);letter-spacing:.02em;max-width:calc(100vw - 28px)}
.selcart:hover{background:var(--cobalt-3);text-decoration:none;color:#fff}
.selcart svg{width:22px;height:22px;flex:none;fill:currentColor}
.selcart-txt{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.selcart-txt i{font-style:normal;font-size:.6rem;text-transform:uppercase;letter-spacing:.16em;color:var(--cyan-lt)}
.selcart-txt b{font-size:1rem;font-weight:700;white-space:nowrap}
.selcart-n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  padding:0 7px;border-radius:12px;background:var(--cyan);color:var(--cobalt-2);
  font-weight:800;font-size:.86rem;flex:none}
.selcart[hidden]{display:none}
.selcart.bump{animation:cartbump .34s cubic-bezier(.22,.61,.36,1)}
@keyframes cartbump{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
@media(min-width:721px){.selcart{bottom:18px;right:18px}}
body.has-wafloat .selcart{bottom:130px}
@media(min-width:721px){body.has-wafloat .selcart{bottom:88px}}

/* The employer-page WhatsApp desk button. */
.wafloat{position:fixed;right:14px;bottom:66px;z-index:44;display:flex;align-items:center;gap:10px;
  background:var(--cobalt);color:#fff;border-radius:40px;padding:9px 15px 9px 12px;
  box-shadow:0 8px 26px rgba(42,24,16,.30);text-decoration:none;font-family:var(--cond);
  max-width:calc(100vw - 28px)}
.wafloat:hover{background:var(--cobalt-3);color:#fff;text-decoration:none}
.wafloat svg{width:24px;height:24px;flex:none;fill:currentColor}
.wafloat span{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.wafloat i{font-style:normal;font-size:.6rem;text-transform:uppercase;letter-spacing:.16em;color:#CFF2DD}
.wafloat b{font-size:.98rem;font-weight:700;white-space:nowrap}
@media(min-width:721px){.wafloat{bottom:18px;right:18px}}

/* Candidate self-lookup strip - visually distinct from the employer filters
   so the two are never confused. */
.minebox{background:var(--cobalt);color:#fff;border-radius:var(--r);padding:18px 18px 20px;
  border-left:4px solid var(--cyan)}
.minebox h2,.minebox h3{color:#fff;margin:2px 0 6px}
.minebox p{color:var(--paper-on-dark)}
.mineform{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:flex-end}
.mineform .field{flex:1 1 240px;margin:0}
.mineform label{display:block;font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:.74rem;color:var(--cyan-lt);margin-bottom:5px}
.mineform input{width:100%;padding:11px 12px;border-radius:var(--r);border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);color:#fff;font-family:var(--mono);letter-spacing:.12em;font-size:.98rem}
.mineform input::placeholder{color:#A99B78;letter-spacing:.12em}
.mineform input:focus{outline:2px solid var(--cyan);outline-offset:1px}
#mycode-out{margin-top:16px}
.mineyes,.mineno{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 15px;margin-bottom:12px}
.mineyes{border-left:4px solid var(--ok)}
.mineno{border-left:4px solid var(--warn)}
.mineyes p,.mineno p{color:var(--ink)}
.mineyes p:last-child,.mineno p:last-child{margin-bottom:0}

/* The Index - one announcement. */
.firstissue{background:var(--cobalt);color:#fff;border-radius:var(--r);padding:32px 24px;
  text-align:center;border:1px solid var(--line-dk)}
.firstissue h2{color:#fff;margin:4px 0 18px;font-size:2.1rem}
.firstissue .kicker{color:var(--cyan-lt)}
.firstissue .due{display:inline-flex;flex-direction:column;gap:4px;margin:0;
  border-top:1px solid rgba(255,255,255,.22);padding-top:14px}
.firstissue .due span{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;
  font-size:.74rem;color:#C9BE9E}
.firstissue .due b{font-family:var(--cond);font-size:2.1rem;font-weight:800;color:var(--cyan-lt);line-height:1}
@media(min-width:721px){.firstissue{padding:44px 30px}.firstissue h2{font-size:2.6rem}}

/* CHITO VERIFIED - the single status employers learn to ask for. */
.cverified{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--cyan);
  border-radius:var(--r);padding:18px}
.cvhd{display:flex;align-items:center;gap:10px;margin:0 0 4px}
.cvhd b{font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  font-size:1.12rem;color:var(--cobalt)}
.cvhd svg{width:26px;height:26px;flex:none;fill:var(--cyan)}
.cvlist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cvlist li{background:var(--vapour);padding:10px 12px;display:flex;gap:10px;align-items:baseline;
  flex-wrap:wrap;font-size:.92rem}
.cvlist li b{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;
  font-size:.8rem;color:var(--slate);flex:1 1 150px}
.cvlist li span{font-weight:600;color:var(--ink)}
.cvlist li em{font-style:normal;color:var(--cyan-dk);font-weight:700}

/* The three gates. */
.gates{display:grid;gap:12px;margin-top:18px}
@media(min-width:820px){.gates{grid-template-columns:repeat(3,1fr)}}
.gate{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;
  border-top:3px solid var(--cobalt);position:relative}
.gate .gn{font-family:var(--cond);font-weight:800;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan-dk);display:block;margin-bottom:4px}
.gate h3{margin:0 0 .35em}
.gate p:last-child{margin-bottom:0}
.band-dark .gate{background:var(--cobalt-2);border-color:var(--line-dk);border-top-color:var(--cyan)}
.band-dark .gate h3{color:#fff}
.band-dark .gate p{color:var(--paper-on-dark)}

/* The fee / cost schedule table. */
.schedule{width:100%;border-collapse:collapse;margin-top:14px;font-size:.95rem}
.schedule th,.schedule td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
.schedule thead th{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:.78rem;color:var(--slate)}
.schedule td.amt{font-family:var(--cond);font-weight:700;text-align:right;white-space:nowrap;
  color:var(--cobalt);font-size:1.02rem}
.schedule tr.paid td.amt{color:var(--cyan-dk)}
.schedule tr.paid{background:var(--vapour)}

/* Download strip for the Employer Playbook. */
.dlstrip{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:var(--vapour);
  border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:var(--r);padding:18px}
.dlstrip .dltext{flex:1 1 320px}
.dlstrip h3{margin:0 0 .3em}
.dlstrip p{margin:0}

/* ---- install-as-app affordance in the hero ---- */
.heroinstall{margin:16px 0 0}
.btn.ghost{background:transparent;border:1px solid rgba(243,236,221,.55);color:#F3ECDD}
.btn.ghost:hover{background:rgba(243,236,221,.12);border-color:#F3ECDD;color:#fff}
/* ---- session-side lock: one side per visit ---- */
.sidelock-note{margin:0 0 16px;padding:10px 14px;border-left:3px solid var(--cyan);
  background:var(--shell);color:var(--ink);font-size:.92rem;line-height:1.4;border-radius:4px}
body.side-seeker [data-save]{opacity:.45;pointer-events:none}
body.side-employer [data-pick]{opacity:.45;pointer-events:none}
/* ---- quiet notice (at-limit, wrong-side, install hint) ---- */
.sidenotice{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(8px);
  max-width:min(92vw,420px);background:var(--ink);color:var(--white);padding:11px 16px;
  border-radius:8px;font-size:.92rem;line-height:1.35;text-align:center;z-index:120;
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
  box-shadow:0 8px 30px rgba(0,0,0,.25)}
.sidenotice.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion: reduce){.sidenotice{transition:none}}
.pager{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.pager-info{font-size:.82rem;color:var(--slate)}
.pager-ctrls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pager-page{font-size:.82rem;color:var(--slate);margin-left:auto}
.pager .btn{font-size:.74rem;padding:8px 16px}