/* ============================================================
   AFREXMARKET - style.css - v1.3.0
   The corridor's market. South Africa <-> Mozambique.
   Palette, type and devices are the Afrexpay Brand Identity
   System Ed. 2. Navy leads; teal and green carry the motion.
   Green is the only brand colour that doubles as a state.
   ============================================================ */

/* ---- Brand faces -------------------------------------------------
   Inter (product and body) and IBM Plex Mono (reference and corridor
   codes) are self-hosted here under the SIL Open Font Licence 1.1 -
   see assets/fonts/OFL.txt.

   Archivo 800/900 is the locked DISPLAY face and is not yet in the
   build. Its @font-face is written and waiting: drop Archivo-800.woff2
   and Archivo-900.woff2 into assets/fonts/ and uncomment the two rules
   below, and every heading picks it up with no other change. Until
   then Inter carries the display weights, which keeps the structural
   display / quiet UI relationship the brand system calls for.
@font-face{font-family:'Archivo';font-weight:800;font-style:normal;font-display:swap;src:url('../fonts/Archivo-800.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:900;font-style:normal;font-display:swap;src:url('../fonts/Archivo-900.woff2') format('woff2')}
*/
@font-face{font-family:'Inter';font-weight:100 900;font-style:normal;font-display:swap;
  src:url('../fonts/Inter-Variable.woff2') format('woff2-variations'),
      url('../fonts/Inter-Variable.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:700;font-style:normal;font-display:swap;
  src:url('../fonts/IBMPlexMono-700.woff2') format('woff2')}

:root{
  /* --- official palette --- */
  --ink:#00213E; --navy:#012F57; --navy2:#024370; --blue:#035E93;
  --teal:#05A1A7; --cyan:#01CDC3; --tgreen:#04CBBA; --green:#1BC86B;
  --powder:#ACD1D9; --white:#FEFEFE;
  /* --- functional (product UI only) --- */
  --positive:#1BC86B; --caution:#C98A1E; --critical:#C0392B;
  /* --- derived working tones --- */
  --paper:#FBFDFE; --mist:#EDF4F7; --surface:#FFFFFF; --hair:#D3E1E8;
  --slate:#3F5F73;            /* muted body text on light - AA on paper */
  --teal-ink:#046A6F;         /* small teal-family text on light - AA */
  --green-ink:#0A7A42;        /* small green text on light - AA */
  --cyan-lift:#5CE3DA;        /* small accent text on navy - AA */
  --navy-70:rgba(1,47,87,.70);
  --wash-cyan:#E2F6F7; --wash-green:#E4F8ED; --wash-navy:#E7EEF4;

  --display:'Archivo','Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;

  --r:6px; --r-lg:12px; --bar:66px; --tabs:64px; --pad:24px; --wrap:1180px;
  --shadow:0 1px 2px rgba(0,33,62,.06),0 8px 28px rgba(0,33,62,.07);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}
body{
  font-family:var(--body); color:var(--ink); background:var(--paper);
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
img,svg{max-width:100%; display:block}
/* A display rule on a class outranks the UA [hidden] rule, so state it once,
   here, rather than chasing it component by component. */
[hidden]{display:none !important}
/* A bare inline icon carries a viewBox but no intrinsic size, so it has to be
   given one here - unsized, it inflates and breaks the line it sits on. */
.ic{width:24px; height:24px; flex:none}
a{color:var(--blue)}
a:hover{color:var(--navy)}
h1,h2,h3,h4{font-family:var(--display); font-weight:800; margin:0; line-height:1.04; letter-spacing:-.022em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--pad)}
.mono{font-family:var(--mono); font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.web-only{}
html.standalone .web-only{display:none !important}

/* ---- corridor device -------------------------------------- */
.corridor-rule{height:5px; border:0; margin:0;
  background:linear-gradient(90deg,var(--navy) 0%,var(--teal) 55%,var(--green) 100%)}
.node{display:inline-block; width:.52em; height:.52em; border-radius:50%;
  background:var(--green); vertical-align:.06em}
.node--start{background:var(--cyan)}

/* ---- skip + focus ----------------------------------------- */
.skip{position:absolute; left:-9999px; top:0; background:var(--green); color:var(--ink);
  padding:12px 18px; z-index:300; font-weight:700}
.skip:focus{left:8px; top:8px}
:focus-visible{outline:3px solid var(--cyan); outline-offset:2px}

/* ==== HEADER =============================================== */
.bar{position:sticky; top:0; z-index:80; background:var(--navy);
  padding-top:env(safe-area-inset-top)}
.bar__in{display:flex; align-items:center; gap:14px; height:var(--bar);
  max-width:var(--wrap); margin:0 auto; padding:0 var(--pad)}
.lockup{display:flex; align-items:center; gap:11px; text-decoration:none; flex:none}
.lockup__mark{width:36px; height:36px; flex:none}
.wordmark{font-family:var(--display); font-weight:800; font-size:25px; line-height:1;
  letter-spacing:-.03em; color:var(--white); white-space:nowrap}
.wordmark b{font-weight:800; color:var(--cyan)}
.nav{display:flex; align-items:center; gap:1px; margin-left:auto; min-width:0}
.nav a{font-family:var(--body); font-weight:600; font-size:14.5px; letter-spacing:.005em;
  color:rgba(254,254,254,.84); text-decoration:none; padding:9px 10px; border-radius:var(--r);
  line-height:1; white-space:nowrap}
.nav a:hover{color:#fff; background:var(--navy2)}
.nav a[aria-current="page"]{color:#fff; box-shadow:inset 0 -3px 0 var(--green)}
.nav__cta{background:var(--green) !important; color:var(--ink) !important; font-weight:700 !important}
.nav__cta:hover{background:var(--tgreen) !important; color:var(--ink) !important}
.lang{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:14px;
  color:rgba(254,254,254,.84); text-decoration:none; padding:9px 11px; border-radius:var(--r);
  border:1.5px solid rgba(172,209,217,.42); margin-left:6px}
.lang:hover{color:#fff; background:var(--navy2); border-color:var(--powder)}
.lang svg{width:17px; height:17px}
@media (max-width:1160px){ .nav a:not(.nav__cta){display:none} }
@media (max-width:660px){ .nav__cta{display:none} }
@media (max-width:520px){ .wordmark{font-size:21px} .lang span{display:none} }
@media (max-width:380px){ .bar__in{gap:8px; padding:0 14px} .wordmark{font-size:19px}
  .lockup__mark{width:27px; height:27px} }

/* ==== BOTTOM TABS (installed app + small screens) ========== */
.tabs{position:fixed; left:0; right:0; bottom:0; z-index:80; display:none;
  grid-template-columns:repeat(5,1fr); background:var(--navy);
  border-top:3px solid var(--teal); padding-bottom:env(safe-area-inset-bottom);
  height:calc(var(--tabs) + env(safe-area-inset-bottom))}
.tabs a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  text-decoration:none; color:rgba(254,254,254,.86); font-size:11px; font-weight:600;
  letter-spacing:.01em; position:relative}
.tabs a svg{width:21px; height:21px}
.tabs a[aria-current="page"]{color:#fff}
.tabs a[aria-current="page"]::before{content:""; position:absolute; top:0; left:24%; right:24%;
  height:3px; background:var(--green)}
@media (max-width:860px){ .tabs{display:grid} body{padding-bottom:var(--tabs)} }
html.standalone .tabs{display:grid}
html.standalone body{padding-bottom:var(--tabs)}
html.standalone .bar{display:none}

/* ==== BUTTONS - real hierarchy ============================= */
.btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; cursor:pointer;
  font-family:var(--body); font-weight:700; font-size:15.5px; line-height:1;
  padding:15px 24px; border-radius:var(--r); border:2px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.btn svg{width:19px; height:19px; flex:none}
.btn--primary{background:var(--green); color:var(--ink); border-color:var(--green)}
.btn--primary:hover{background:var(--tgreen); border-color:var(--tgreen); color:var(--ink)}
.btn--secondary{background:var(--navy); color:var(--white); border-color:var(--navy)}
.btn--secondary:hover{background:var(--navy2); border-color:var(--navy2); color:#fff}
.btn--ghost{background:transparent; color:var(--navy); border-color:var(--hair);
  font-weight:600}
.btn--ghost:hover{border-color:var(--navy); background:var(--wash-navy); color:var(--navy)}
.on-deep .btn--secondary{background:var(--white); color:var(--navy); border-color:var(--white)}
.on-deep .btn--secondary:hover{background:var(--powder); border-color:var(--powder); color:var(--ink)}
.on-deep .btn--ghost{color:var(--white); border-color:rgba(172,209,217,.5)}
.on-deep .btn--ghost:hover{background:rgba(172,209,217,.14); border-color:var(--powder); color:#fff}
.btns{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* ==== HERO ================================================= */
.hero{background:var(--navy); color:var(--white); position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--teal) 55%,var(--green) 100%)}
.hero__in{display:grid; grid-template-columns:1fr 1.12fr; gap:30px; align-items:center;
  max-width:var(--wrap); margin:0 auto; padding:56px var(--pad) 60px}
.hero__ey{font-family:var(--body); font-weight:700; font-size:13px; text-transform:uppercase;
  letter-spacing:.15em; color:var(--cyan-lift); display:flex; align-items:center; gap:10px;
  margin-bottom:18px}
.hero h1{font-size:clamp(40px,6vw,68px); font-weight:900; letter-spacing:-.032em}
.hero h1 em{font-style:normal; color:var(--cyan)}
.hero__lede{font-size:19.5px; line-height:1.55; color:rgba(254,254,254,.85);
  max-width:44ch; margin:22px 0 28px}
.hero__art{align-self:center; min-width:0}
/* the drawing carries the right-hand side of the hero: it fills the column and
   is allowed to bleed past it rather than sitting in a boxed vignette */
.hero__art svg{width:calc(100% + 46px); max-width:none; height:auto; margin-right:-46px}
.hero--band .hero__in{padding:40px var(--pad) 44px; grid-template-columns:1fr 1.06fr}
.hero--band h1{font-size:clamp(34px,4.6vw,52px)}
@media (max-width:900px){
  .hero__in,.hero--band .hero__in{grid-template-columns:1fr; gap:22px; padding:38px var(--pad) 42px}
  .hero__art{order:-1}
  .hero__art svg{width:calc(100% + 48px); margin:0 -24px}
  .hero__lede{font-size:18px; max-width:none}
}

/* install button lives in the hero */
.install-btn[hidden]{display:none !important}

/* ==== SECTION SHELL ======================================== */
.sec{padding:66px 0}
.sec--tight{padding:46px 0}
.sec--mist{background:var(--mist)}
.sec--deep{background:var(--ink); color:var(--white)}
.sec--deep h2,.sec--deep h3{color:var(--white)}
.sec__ey{font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.15em;
  color:var(--teal-ink); display:flex; align-items:center; gap:9px; margin-bottom:14px}
.sec--deep .sec__ey{color:var(--cyan-lift)}
.sec h2{font-size:clamp(28px,3.5vw,42px); max-width:24ch}
.sec__intro{font-size:18.5px; color:var(--slate); max-width:66ch; margin-top:18px}
.sec--deep .sec__intro{color:rgba(254,254,254,.8)}
.lead{font-size:20px; line-height:1.6; color:var(--ink); max-width:70ch}
.sec__head{margin-bottom:36px}

/* ==== COLUMNS ============================================== */
.cols{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:26px 24px 24px; box-shadow:var(--shadow); display:flex; flex-direction:column}
.sec--deep .card{background:var(--navy); border-color:var(--navy2); box-shadow:none}
.card__ic{width:44px; height:44px; border-radius:10px; background:var(--wash-cyan);
  color:var(--teal-ink); display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.card__ic svg{width:24px; height:24px}
.sec--deep .card__ic{background:var(--navy2); color:var(--cyan)}
.card h3{font-size:21px; margin-bottom:10px; letter-spacing:-.018em}
.card p{font-size:16px; color:var(--slate)}
.sec--deep .card p{color:rgba(254,254,254,.78)}
.card__link{margin-top:16px; font-weight:700; font-size:15px; text-decoration:none;
  color:var(--blue); display:inline-flex; align-items:center; gap:7px}
.card__link svg{width:17px; height:17px}
.card__link:hover{color:var(--navy)}
.sec--deep .card__link{color:var(--cyan)}

/* ==== STEPS ================================================ */
.steps{counter-reset:st; display:grid; gap:0; border-top:1px solid var(--hair)}
.step{counter-increment:st; display:grid; grid-template-columns:76px 1fr; gap:20px;
  padding:24px 0; border-bottom:1px solid var(--hair); align-items:start}
.step__n{font-family:var(--mono); font-weight:500; font-size:15px; color:var(--teal-ink);
  padding-top:4px; letter-spacing:.02em}
.step__n::before{content:"0" counter(st)}
.step h3{font-size:20px; margin-bottom:7px}
.step p{font-size:16.5px; color:var(--slate); margin:0}
.sec--deep .steps,.sec--deep .step{border-color:var(--navy2)}
.sec--deep .step p{color:rgba(254,254,254,.78)}
.sec--deep .step__n{color:var(--cyan-lift)}
@media (max-width:620px){ .step{grid-template-columns:1fr; gap:6px} .step__n{padding-top:0} }

/* ==== SPLIT (art in its own column) ======================== */
.split{display:grid; grid-template-columns:1.02fr .98fr; gap:48px; align-items:center}
.split--flip .split__art{order:-1}
.split__art svg{width:100%; height:auto; border-radius:var(--r-lg); box-shadow:var(--shadow)}
.split__b h2{margin-bottom:20px}
.split__b p{font-size:17.5px; color:var(--slate)}
.split__b .btns{margin-top:26px}
@media (max-width:900px){
  .split{grid-template-columns:1fr; gap:26px}
  .split--flip .split__art{order:0}
}

/* ==== STATS ================================================ */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2px;
  background:var(--hair); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden}
.stat{background:var(--surface); padding:28px 24px}
.stat b{display:block; font-family:var(--display); font-weight:900; font-size:46px;
  line-height:1; color:var(--navy); font-variant-numeric:tabular-nums; letter-spacing:-.04em}
.stat span{display:block; margin-top:10px; font-size:15px; color:var(--slate)}

/* ==== CATEGORY GRID ======================================== */
.cats{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:16px}
.cat{background:var(--surface); border:1px solid var(--hair); border-left:5px solid var(--teal);
  border-radius:var(--r); padding:20px 20px 18px; text-decoration:none; color:inherit; display:block}
.cat:nth-child(3n+2){border-left-color:var(--cyan)}
.cat:nth-child(3n+3){border-left-color:var(--green)}
.cat:hover{border-color:var(--navy); border-left-color:var(--navy); background:var(--wash-navy)}
.cat h3{font-size:18.5px; margin-bottom:7px; letter-spacing:-.015em}
.cat p{font-size:14.5px; color:var(--slate); margin:0}
.cat__k{font-family:var(--mono); font-size:11.5px; color:var(--teal-ink);
  letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:9px}

/* ==== STATUS LANES ========================================= */
.lanes{display:grid; gap:18px}
.lane{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:22px 24px}
.sec--deep .lane{background:var(--navy); border-color:var(--navy2)}
.lane__h{display:flex; align-items:center; gap:11px; margin-bottom:16px}
.lane__h svg{width:22px; height:22px; color:var(--teal-ink)}
.sec--deep .lane__h svg{color:var(--cyan)}
.lane__h h3{font-size:19px}
.lane__states{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.lane__states li{font-family:var(--mono); font-size:12.5px; letter-spacing:.01em;
  background:var(--mist); color:var(--navy); border-radius:20px; padding:6px 12px}
.sec--deep .lane__states li{background:var(--navy2); color:var(--white)}
.lane--fin .lane__states li{background:var(--wash-green); color:var(--green-ink)}
.lane--log .lane__states li{background:var(--wash-cyan); color:var(--teal-ink)}
.sec--deep .lane--fin .lane__states li,.sec--deep .lane--log .lane__states li{
  background:var(--navy2); color:var(--white)}

/* ==== TABLE ================================================ */
.tbl{width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden}
.tbl th,.tbl td{text-align:left; padding:15px 20px; border-bottom:1px solid var(--hair);
  font-size:16px; vertical-align:top}
.tbl th{background:var(--navy); color:var(--white); font-family:var(--body); font-weight:700;
  font-size:14px; letter-spacing:.02em}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:600; color:var(--navy)}
.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ==== FAQ ================================================== */
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative;
  font-family:var(--display); font-weight:800; font-size:19.5px; letter-spacing:-.018em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:6px; top:30px; width:11px; height:11px;
  border-right:2.5px solid var(--teal-ink); border-bottom:2.5px solid var(--teal-ink);
  transform:rotate(45deg); transition:transform .16s ease}
.faq details[open] summary::after{transform:rotate(-135deg); top:34px}
.faq .faq__a{padding:0 0 22px; font-size:16.5px; color:var(--slate); max-width:76ch}

/* ==== CLAUSES (privacy / terms) ============================ */
.clause{border-top:1px solid var(--hair); padding:28px 0; display:grid;
  grid-template-columns:70px 1fr; gap:18px}
.clause__n{font-family:var(--mono); font-size:15px; color:var(--teal-ink); padding-top:5px}
.clause h2{font-size:24px; margin-bottom:12px; max-width:none}
.clause p{font-size:16.5px; color:var(--slate)}
.fills{display:inline-block; font-family:var(--mono); font-size:13.5px; background:var(--wash-cyan);
  color:var(--teal-ink); border:1px dashed var(--teal); border-radius:4px; padding:3px 9px}
@media (max-width:620px){ .clause{grid-template-columns:1fr; gap:4px} .clause__n{padding-top:0} }

/* ==== NOTE ================================================= */
.note{background:var(--wash-navy); border-left:5px solid var(--blue); border-radius:var(--r);
  padding:22px 24px; font-size:16px; color:var(--navy); max-width:88ch}
.note b{font-weight:700}

/* ==== CTA BAND ============================================= */
.ctaband{background:var(--ink); color:var(--white); padding:56px 0; position:relative}
.ctaband::before{content:""; position:absolute; left:0; right:0; top:0; height:5px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--teal) 55%,var(--green) 100%)}
.ctaband h2{font-size:clamp(26px,3.4vw,38px); max-width:22ch}
.ctaband p{font-size:18px; color:rgba(254,254,254,.82); max-width:60ch; margin:16px 0 26px}

/* ==== FORMS ================================================ */
.formwrap{display:grid; grid-template-columns:1.25fr .75fr; gap:44px; align-items:start}
@media (max-width:940px){ .formwrap{grid-template-columns:1fr} }
.form{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:30px 28px; box-shadow:var(--shadow)}
.fset{border:0; margin:0 0 26px; padding:0}
.fset:last-of-type{margin-bottom:18px}
.fset legend{font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.018em;
  padding:0 0 14px; display:flex; align-items:center; gap:9px; line-height:1.15}
.fset__note{font-size:14.5px; color:var(--slate); margin:0 0 18px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid3{display:grid; grid-template-columns:1.4fr .8fr .8fr; gap:16px}
@media (max-width:640px){ .grid2,.grid3{grid-template-columns:1fr} }
.f{display:block; margin-bottom:16px}
.f > span{display:block; font-weight:600; font-size:14.5px; margin-bottom:7px; color:var(--navy)}
.f .opt{font-weight:400; color:var(--slate)}
.f input,.f select,.f textarea{width:100%; font-family:var(--body); font-size:16px;
  color:var(--ink); background:var(--paper); border:1.5px solid var(--hair); border-radius:var(--r);
  padding:13px 14px; line-height:1.4}
.f textarea{min-height:110px; resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--teal); background:var(--white)}
.f input:invalid:not(:placeholder-shown){border-color:var(--caution)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form__actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  border-top:1px solid var(--hair); padding-top:22px}
.form__req{font-size:14px; color:var(--slate)}
.form__req--gate{margin-top:16px}
.form__req--track{margin-top:12px}
.btns--thanks{margin-top:26px}
.msg{border-radius:var(--r); padding:13px 16px; font-size:15.5px; margin-bottom:16px}
.msg--err{background:#FBEAE8; color:#8E2A1F; border-left:4px solid var(--critical)}
.msg--ok{background:var(--wash-green); color:var(--green-ink); border-left:4px solid var(--green)}
.msg[hidden]{display:none}
.aside{position:sticky; top:calc(var(--bar) + 18px)}
.aside .card{margin-bottom:16px}

/* ---- the gate ---- */
.gate{background:var(--surface); border:2px solid var(--teal); border-radius:var(--r-lg);
  padding:30px 28px; box-shadow:var(--shadow)}
.gate[hidden]{display:none}
.gate h2{font-size:26px; margin-bottom:12px}
.gate p{font-size:16.5px; color:var(--slate)}
.gate__to{font-family:var(--mono); font-weight:500; color:var(--navy)}
.gate__code{font-family:var(--mono); font-size:26px !important; letter-spacing:.32em;
  text-align:center; max-width:280px}
.gate__row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:20px}
.linkbtn{background:none; border:0; color:var(--blue); font-family:var(--body); font-weight:600;
  font-size:15px; cursor:pointer; padding:8px 4px; text-decoration:underline}
.linkbtn:hover{color:var(--navy)}

/* ==== TRACK ================================================ */
.track{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:30px 28px; box-shadow:var(--shadow); max-width:760px}
.track__row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.track__row .f{flex:1 1 260px; margin-bottom:0}
.track__out{margin-top:26px}
.track__out[hidden]{display:none}
.trk{border:1px solid var(--hair); border-radius:var(--r); padding:20px; margin-bottom:14px}
.trk__h{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.trk__h svg{width:21px; height:21px; color:var(--teal-ink)}
.trk__h h3{font-size:18px}
.trk__state{font-family:var(--mono); font-size:13px; background:var(--mist); color:var(--navy);
  border-radius:20px; padding:5px 12px; margin-left:auto}
.trk__state[data-on="1"]{background:var(--wash-green); color:var(--green-ink)}
.dots{display:flex; align-items:center; gap:0; flex-wrap:wrap}
.dots i{width:13px; height:13px; border-radius:50%; background:var(--hair); flex:none;
  display:inline-block}
.dots i[data-done="1"]{background:var(--green)}
.dots u{flex:1 1 14px; height:3px; background:var(--hair); min-width:12px}

/* ==== CONTACT CARDS ======================================== */
.ccards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px}
.ccard{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:26px 24px; box-shadow:var(--shadow)}
.ccard h3{font-size:19px; margin-bottom:8px}
.ccard p{font-size:15.5px; color:var(--slate)}
.ccard a{font-weight:600; word-break:break-word}
.ccard .card__ic{margin-bottom:16px}

/* ==== FOOTER =============================================== */
.foot{background:var(--navy); color:var(--white); padding-top:0}
.foot__rule{height:5px; background:linear-gradient(90deg,var(--navy) 0%,var(--teal) 55%,var(--green) 100%)}
.foot__in{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px;
  max-width:var(--wrap); margin:0 auto; padding:52px var(--pad) 34px}
.foot h4{font-size:13px; text-transform:uppercase; letter-spacing:.14em; font-family:var(--body);
  font-weight:700; color:var(--cyan-lift); margin-bottom:16px}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:11px}
.foot a{color:rgba(254,254,254,.85); text-decoration:none; font-size:15.5px}
.foot a:hover{color:#fff; text-decoration:underline}
.foot__blurb{font-size:15.5px; color:rgba(254,254,254,.78); max-width:44ch; margin:16px 0 20px}
.foot__lock{display:flex; align-items:center; gap:11px; margin-bottom:6px}
.foot__lock svg{width:38px; height:38px}
.foot__corridor{font-family:var(--mono); font-size:12.5px; color:var(--powder);
  letter-spacing:.03em; margin-top:6px}
.foot .install-btn{margin-top:22px}
.foot .install-btn[hidden]{display:none !important}
.foot__base{border-top:1px solid var(--navy2); padding:22px var(--pad); font-size:14px;
  color:rgba(254,254,254,.7); max-width:var(--wrap); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between}
.foot__base p{margin:0; max-width:70ch}
@media (max-width:860px){ .foot__in{grid-template-columns:1fr; gap:28px; padding-top:38px} }

/* ==== iOS INSTALL SHEET ==================================== */
.iosheet{position:fixed; inset:0; z-index:300; background:rgba(0,33,62,.62);
  display:flex; align-items:flex-end; justify-content:center; padding:16px}
.iosheet__card{background:var(--surface); border-radius:var(--r-lg); padding:26px 24px 30px;
  max-width:440px; width:100%; position:relative; box-shadow:0 -8px 40px rgba(0,33,62,.3)}
.iosheet__x{position:absolute; right:12px; top:10px; background:none; border:0; font-size:26px;
  line-height:1; color:var(--slate); cursor:pointer; padding:6px 10px}
.iosheet__ey{font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--teal-ink); display:flex; align-items:center; gap:9px; margin:0 0 8px}
.iosheet h3{font-size:23px; margin-bottom:18px}
.iosteps{list-style:none; margin:0; padding:0; counter-reset:io}
.iosteps li{counter-increment:io; display:flex; gap:14px; align-items:flex-start;
  padding:12px 0; border-top:1px solid var(--hair); font-size:16px; color:var(--slate)}
.iostep__ic{width:34px; height:34px; border-radius:8px; background:var(--wash-cyan);
  color:var(--teal-ink); display:flex; align-items:center; justify-content:center; flex:none}
.iostep__ic svg{width:19px; height:19px}
.iosheet b{color:var(--ink)}

/* ==== utility ============================================== */
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.crumbs{font-size:14px; color:var(--slate); padding:16px 0 0}
.crumbs a{color:var(--blue); text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ---- the trade floor ---------------------------------------------
   Two anonymous boards. The card is a record, not an advertisement:
   goods, quantity, direction, timing - and no company anywhere on it.
   Listing rows keep the full width; no vector art competes with them. */
.sec--floor{padding-top:52px}
.floor__tabs{display:flex; gap:10px; flex-wrap:wrap; border-bottom:1.5px solid var(--hair);
  padding-bottom:0; margin-bottom:22px}
.ftab{display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:700;
  font-size:15.5px; color:var(--slate); background:none; border:0; border-bottom:3px solid transparent;
  padding:12px 4px 13px; margin-bottom:-1.5px; cursor:pointer; letter-spacing:-.01em}
.ftab svg{width:19px; height:19px}
.ftab:hover{color:var(--navy)}
.ftab.is-on{color:var(--navy); border-bottom-color:var(--green)}
.ftab:focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:4px}

.floor__filters{display:grid; grid-template-columns:1.1fr 1.1fr 1.3fr auto; gap:16px;
  align-items:end; background:var(--mist); border:1px solid var(--hair);
  border-radius:var(--r-lg); padding:20px 20px 6px}
.floor__filters .f{margin-bottom:14px}
.floor__filters .btn{margin-bottom:14px; white-space:nowrap}
@media (max-width:900px){ .floor__filters{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .floor__filters{grid-template-columns:1fr} }

.floor__count{margin:20px 0 18px; font-size:15px; color:var(--slate)}
.floor__count .mono{color:var(--navy); font-weight:700}
.floor__count a{font-weight:700; text-decoration:none}
.floor__count a:hover{text-decoration:underline}
.floor__empty{display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
  background:var(--wash-navy); border:1px dashed var(--hair); border-radius:var(--r-lg);
  padding:30px 26px; color:var(--slate); font-size:16.5px; max-width:74ch}
.floor__empty p{margin:0}
.emptyart{width:190px; height:auto; flex:none}
@media (max-width:560px){ .floor__empty{grid-template-columns:1fr; gap:18px} }
.floor__anon{display:flex; gap:10px; align-items:flex-start; margin-top:26px; font-size:14.5px;
  color:var(--slate); max-width:82ch}
.floor__anon svg{flex:none; color:var(--teal-ink); margin-top:2px}

.board{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px}
.post{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:22px 22px 18px; display:flex; flex-direction:column;
  border-left:4px solid var(--teal)}
[data-grid=supply] .post{border-left-color:var(--green)}
.post__top{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-bottom:12px}
.post__cat{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--teal-ink)}
[data-grid=supply] .post__cat{color:var(--green-ink)}
.post__dir{font-size:12.5px; color:var(--slate); white-space:nowrap}
.post h3{font-size:19px; line-height:1.22; margin-bottom:14px; letter-spacing:-.017em}
.post__meta{margin:0 0 18px; display:grid; gap:7px}
.post__meta div{display:grid; grid-template-columns:110px 1fr; gap:12px; align-items:baseline}
.post__meta dt{font-size:13px; color:var(--slate); margin:0}
.post__meta dd{margin:0; font-size:15px; font-weight:600; color:var(--ink)}
.post__foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--hair);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.post__state{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
  color:var(--slate)}
.post__state svg{color:var(--caution)}
.post.is-conf .post__state{color:var(--green-ink)}
.post.is-conf .post__state svg{color:var(--green-ink)}
.post__add{padding:9px 15px; font-size:14px; gap:7px}
.post__add.is-on{background:var(--wash-green); color:var(--green-ink); border-color:var(--green)}
.post__add[disabled]{opacity:.42; cursor:not-allowed}
.ic--sm{width:17px; height:17px}

/* ---- the shortlist ---------------------------------------------- */
.sl{max-width:880px}
.sl__head{display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin-bottom:18px}
.sl__head h2{font-size:clamp(26px,3vw,34px)}
.sl__head p{margin:0; font-size:15px; color:var(--slate)}
.sl__head .mono{font-weight:700; color:var(--navy); font-size:17px}
.sl__lock{display:flex; gap:11px; align-items:flex-start; background:var(--wash-cyan);
  border:1px solid var(--hair); border-radius:var(--r-lg); padding:16px 18px; margin-bottom:20px;
  font-size:15px; color:var(--navy)}
.sl__lock svg{flex:none; color:var(--teal-ink); margin-top:2px}
.slrow{display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  border:1px solid var(--hair); border-left:4px solid var(--teal); border-radius:var(--r-lg);
  background:var(--surface); padding:16px 18px; margin-bottom:12px}
.slrow__t{margin:0 0 4px; font-weight:700; font-size:16.5px; letter-spacing:-.012em}
.slrow__s{margin:0; font-size:14px; color:var(--slate)}
.sl__acts{display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 6px}
.sl__form{margin-top:34px; padding-top:30px; border-top:1px solid var(--hair)}
.sl__form textarea[readonly]{background:var(--mist); color:var(--slate);
  font-family:var(--mono); font-size:13.5px; line-height:1.6}


/* ---- post lifecycle, consent and payment events ------------------ */
.post__sample{display:inline-flex; align-self:flex-start; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.11em; color:#8A5F13; background:#FBF1DD;
  border:1px solid #EBD6A6; border-radius:20px; padding:4px 11px; margin:0 0 14px}
.post__sample::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--caution)}
.floor__anon + .floor__anon{margin-top:10px}

.f--check{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  background:var(--mist); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:16px 18px; margin-top:22px}
.f--check input{width:20px; height:20px; margin-top:2px; accent-color:var(--teal-ink)}
.f--check > span{font-size:14.5px; color:var(--navy); font-weight:400; line-height:1.55; margin:0}
.f--check a{font-weight:700}

.foot__by{color:var(--cyan); font-weight:700; text-decoration:none;
  border-bottom:1px solid rgba(1,205,195,.4); padding-bottom:1px}
.foot__by:hover{color:var(--white); border-bottom-color:var(--white)}
.track__mode{margin:0 0 22px; font-size:14.5px; font-weight:700; color:var(--teal-ink)}
.track__pay{margin-top:34px; padding-top:28px; border-top:1px solid var(--hair)}
.track__pay h3{font-size:20px; margin-bottom:8px}
.track__paynote{font-size:14.5px; color:var(--slate); max-width:74ch; margin-bottom:18px}


/* ---- COSA NOSTRA - the three public states ----------------------
   Gate one raises Genuine post. Gate two raises Verified by AfrexMarket.
   Neither, or gates not yet deployed, reads Post not confirmed. Nothing a
   poster said about themselves ever carries trust styling. */
.post__marks{margin:0 0 16px}
.mark{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
  border-radius:20px; padding:5px 12px; border:1px solid transparent}
.mark--none{color:#8A5F13; background:#FBF1DD; border-color:#EBD6A6}
.mark--genuine{color:var(--teal-ink); background:var(--wash-cyan); border-color:#B9E4E6}
.mark--verified{color:var(--green-ink); background:var(--wash-green); border-color:#A8E5C4}
.post__declared{font-size:12.5px; color:var(--slate); font-weight:400; max-width:26ch;
  line-height:1.4}
.post__meta dd{font-weight:600}   /* declared values: plain, never a trust treatment */