/* Kpali marketing — tokens from /root/waka/theme.ts (copied, not imported).
   One spacing scale, one type scale, one button shape. Nothing sets a raw pixel
   margin: if a value is not on the scale it is wrong. */
:root{
  --ground:#EDEDEF;--surface:#FFFFFF;--well:#F1F1F4;--line:rgba(16,24,40,.10);
  --ink:#0A0B0D;--ink-2:#5A6270;--ink-3:#8A9099;--accent:#CE39E4;--on-accent:#0A0B0D;
  --danger:#E11D48;--ok:#12805C;
  --r:12px;--r-sm:8px;--pill:999px;
  --shell:1080px;
  /* spacing scale — 4pt grid, used everywhere */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  /* type scale — small, tight, heavy */
  --t-eyebrow:.66rem;--t-note:.76rem;--t-small:.82rem;--t-body:.88rem;--t-lede:.98rem;
  --t-h3:.98rem;--t-h2:clamp(1.15rem,2.4vw,1.55rem);--t-h1:clamp(1.45rem,4vw,2.45rem);
  --lh-tight:1.12;--lh-body:1.55;
}
@media(prefers-color-scheme:dark){
  :root{--ground:#0A0B0D;--surface:#16171B;--well:#1E2025;--line:rgba(255,255,255,.10);
    --ink:#F4F6F8;--ink-2:#A2A9B4;--ink-3:#7E858E;--accent:#E879F9;}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--ground);color:var(--ink);font-size:var(--t-body);line-height:var(--lh-body);
  font-weight:500;letter-spacing:-.005em}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.022em;line-height:var(--lh-tight);margin:0}
p{margin:0}
.skip{position:absolute;left:-999px}
.shell{width:min(var(--shell),calc(100% - var(--s5)));margin:0 auto}

/* ── header: a logo, and one control ──────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--ground) 90%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) 0;min-height:52px}
.brand{display:flex;align-items:center;gap:var(--s2);font-weight:800;text-decoration:none;
  font-size:1rem;letter-spacing:-.03em}
.brand img{width:24px;height:24px;border-radius:7px}
.brand-dot{width:5px;height:5px;background:var(--accent);border-radius:50%;display:inline-block}

/* ── the type scale ───────────────────────────────────────────────────── */
.eyebrow{font-size:var(--t-eyebrow);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:800;margin:0 0 var(--s2)}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
.lede{font-size:var(--t-lede);color:var(--ink-2);max-width:54ch;font-weight:500;margin-top:var(--s2)}
.note{font-size:var(--t-note);color:var(--ink-3);max-width:64ch;margin-top:var(--s3)}
.muted{color:var(--ink-3);font-size:var(--t-note)}

/* ── sections: one rhythm, no orphan gaps ─────────────────────────────── */
.hero{padding:var(--s6) 0 var(--s5);position:relative}
.section{padding:var(--s6) 0}
.section > h2{margin-bottom:var(--s2)}
.section > .lede{margin-bottom:var(--s4)}
@media(max-width:720px){
  .hero{padding:var(--s5) 0 var(--s4)}
  .section{padding:var(--s5) 0}
}

/* ── buttons: small rectangles, never balloons ────────────────────────── */
.cta-row{display:flex;gap:6px;flex-wrap:wrap;margin:var(--s4) 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;padding:0 var(--s3);border-radius:var(--r-sm);text-decoration:none;
  font-weight:700;font-size:var(--t-small);border:1px solid var(--line);white-space:nowrap;
  transition:transform .15s ease,background .15s ease,border-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
.btn-ghost{background:var(--surface);color:var(--ink)}

/* ── stats ────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:var(--s4) 0 0;padding:0}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
.stats div{background:var(--surface);border-radius:var(--r);padding:var(--s2) var(--s3);
  border:1px solid var(--line)}
.stats dt{font-size:var(--t-eyebrow);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:800}
.stats dd{margin:var(--s1) 0 0;font-size:1.25rem;font-weight:800;letter-spacing:-.03em}

/* ── cards ────────────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:var(--s2)}
.grid > *{min-width:0}
@media(max-width:520px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}}
.card{background:var(--surface);border-radius:var(--r);padding:var(--s3);border:1px solid var(--line)}
.card h3{margin:var(--s1) 0 2px}
.card p{color:var(--ink-2);font-size:var(--t-note);line-height:1.45}
.badge{display:inline-block;background:var(--well);border-radius:var(--r-sm);padding:2px var(--s2);
  font-size:var(--t-eyebrow);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.badge-accent{background:color-mix(in srgb,var(--accent) 16%,var(--well));color:var(--ink)}
.tile{width:26px;height:26px;border-radius:8px;background:var(--well);display:grid;place-items:center}

/* ── disclosure: the only place a long list is allowed to live ────────── */
.drops{display:grid;gap:var(--s2)}
.persona,.dd{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.persona summary,.dd > summary{cursor:pointer;padding:var(--s2) var(--s3);font-weight:700;
  font-size:var(--t-small);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.persona summary::-webkit-details-marker,.dd > summary::-webkit-details-marker{display:none}
.persona summary::after,.dd > summary::after{content:"";width:7px;height:7px;flex:none;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.persona[open] summary::after,.dd[open] > summary::after{transform:rotate(-135deg) translateY(2px)}
.persona[open] summary,.dd[open] > summary{border-bottom:1px solid var(--line)}
.persona .body,.dd .body{padding:var(--s2) var(--s3);color:var(--ink-2);font-size:var(--t-small)}

/* ── breadcrumbs: the trail, not decoration ───────────────────────────── */
.breadcrumbs{font-size:var(--t-note);color:var(--ink-3);margin:var(--s4) 0 var(--s3);
  display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center}
.breadcrumbs a{color:var(--ink-3);text-decoration:none}
.breadcrumbs a:hover{color:var(--ink)}

/* ── steps ────────────────────────────────────────────────────────────── */
.howto{counter-reset:step;padding:0;margin:var(--s4) 0}
.howto li{list-style:none;position:relative;padding-left:var(--s5);margin:0 0 var(--s2);
  font-size:var(--t-small);color:var(--ink-2)}
.howto li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;
  width:22px;height:22px;border-radius:6px;background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font-weight:800;font-size:.68rem}

/* ── the phone ────────────────────────────────────────────────────────── */
.phone-wrap{display:grid;grid-template-columns:264px 1fr;gap:var(--s5);align-items:start}
@media(max-width:840px){.phone-wrap{grid-template-columns:1fr;gap:var(--s5)}}
.shot{position:relative;width:248px;max-width:100%;margin-inline:auto}
.phone{background:#0A0B0D;border-radius:26px;padding:7px;box-shadow:0 18px 44px rgba(0,0,0,.22)}
.phone-screen{background:#EDEDEF;border-radius:20px;overflow:hidden;position:relative;color:#0A0B0D}
.shot figcaption{margin-top:var(--s3)}

/* ── prose ────────────────────────────────────────────────────────────── */
.prose{max-width:68ch}
.prose p{color:var(--ink-2);margin:0 0 var(--s3);font-size:var(--t-small)}
.prose h2,.prose h3{margin-top:var(--s5)}
.sec-nav{display:flex;flex-wrap:wrap;gap:4px;margin:var(--s3) 0 var(--s4)}
.sec-nav a{font-size:var(--t-note);font-weight:700;padding:5px var(--s3);background:var(--well);
  border-radius:var(--r-sm);text-decoration:none;color:var(--ink-2)}
.sec-nav a:hover{color:var(--ink)}
.flag{border-radius:2px;display:inline-block;vertical-align:middle;margin-right:var(--s1)}
.need-update{display:inline-block;margin-left:var(--s1);background:#F59E0B;color:#111;
  font-size:.6rem;font-weight:800;padding:1px 5px;border-radius:var(--r-sm);vertical-align:middle}
.warn-admin{display:none}

/* ── the one form: store credit by bank transfer ───────────────────────
 Native controls only — no script, no widget, no third-party asset. The
 fields sit on the same tokens as everything else: a control is a small
 rectangle on --surface with a --line border, and it lights --accent on
 focus. The browser does the validation the `required` attributes ask for. */
.credit-form{max-width:520px;margin:var(--s5) 0 0;display:grid;gap:var(--s4)}
.credit-form .eyebrow{margin:0;font-size:var(--t-eyebrow);color:var(--ink-3)}
.field{display:grid;gap:var(--s1)}
.field label,.field-check{font-weight:700;font-size:var(--t-small)}
.credit-form .field-help{color:var(--ink-3);font-size:var(--t-note);max-width:56ch;line-height:1.45}
.credit-form input:not([type=checkbox]){width:100%;height:36px;padding:0 var(--s3);
 border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ground);color:var(--ink);
 font:inherit;font-size:var(--t-body);font-weight:600;letter-spacing:-.005em}
.credit-form input:not([type=checkbox])::placeholder{color:var(--ink-3);font-weight:500}
.credit-form input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.field-money{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:var(--r-sm);
 background:var(--ground);overflow:hidden}
.field-money .field-unit{padding:0 0 0 var(--s3);color:var(--ink-3);font-weight:800;font-size:var(--t-body)}
.field-money input:not([type=checkbox]){border:0;border-radius:0;background:transparent}
.field-check{display:flex;gap:var(--s2);align-items:flex-start;color:var(--ink-2);line-height:1.45;cursor:pointer}
.field-check input{width:16px;height:16px;flex:none;margin:2px 0 0;accent-color:var(--accent)}
.credit-form .cta-row{margin-top:0}
button.btn{font:inherit;font-size:var(--t-small);font-weight:700;cursor:pointer}

/* Rate tables — social boosting. Wide by nature: a service name, an order range,
   a price and a top-up rule. The wrapper scrolls on its own rather than letting
   the page scroll sideways, which is the failure mode on a phone. */
.tablewrap { overflow-x: auto; margin: 0 0 28px; -webkit-overflow-scrolling: touch; }
table.rates { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
table.rates th, table.rates td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line, #e6e8ef); }
table.rates thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #6b7280); }
table.rates td.num, table.rates th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.rates tbody tr:last-child td { border-bottom: 0; }

/* ── Kpali brand layer: motion, globe, icons, waves ─────────────────────────
   Appended to styles.css at build time. All CSS/SVG — no libraries, no blocking
   scripts, so none of this costs anything against the speed budget.
   Every animation is switched off under prefers-reduced-motion.            */

/* ── hero layout ──────────────────────────────────────────────────────── */
.hero-earth{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
@media(max-width:900px){.hero-earth{grid-template-columns:1fr}}
.band{background:var(--surface);border-radius:var(--r);padding:26px 22px;margin-top:-1px}

/* ── the turning earth ────────────────────────────────────────────────── */
.earth-stage{
  position:relative;display:grid;place-items:center;
  width:min(360px,80vw);aspect-ratio:1;margin-inline:auto;
}
.earth{width:100%;height:100%;overflow:visible}
.earth-land{fill:var(--accent);opacity:.9}
.earth-sea{fill:color-mix(in srgb,var(--accent) 12%,var(--surface));stroke:var(--line)}
.earth-grid{fill:none;stroke:var(--line);stroke-width:1}
/* the land slides behind the clip disc: a globe turns, it does not swirl */
.earth-drift{animation:earth-drift 60s linear infinite}
@keyframes earth-drift{to{transform:translateX(-448px)}}

.orbit{fill:none;stroke:var(--line);stroke-width:1.25;stroke-dasharray:3 7}
.orbit-dot{fill:var(--accent)}
.orbit-run{transform-box:view-box;transform-origin:50% 50%}
.orbit-a{animation:orb 14s linear infinite}
.orbit-b{animation:orb 22s linear infinite reverse}
.orbit-c{animation:orb 30s linear infinite}
@keyframes orb{to{transform:rotate(360deg)}}

.earth-legend{display:grid;gap:6px;margin:var(--s3) 0 0;padding:0}
.earth-legend li{list-style:none;display:flex;gap:var(--s2);align-items:flex-start;color:var(--ink-2);font-size:var(--t-small);line-height:1.45}
.earth-legend .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;margin-top:7px}

/* ── product icons ────────────────────────────────────────────────────── */
.tile-lg{width:34px;height:34px;border-radius:10px;background:var(--well);display:inline-grid;place-items:center;
  vertical-align:middle;margin-right:12px}
.tile-lg .ico{width:18px;height:18px;stroke:var(--accent)}
.card .tile{margin-bottom:10px}
a.card,a.card:hover{text-decoration:none}
a.card h3{text-decoration:none}
.ico{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tile .ico{stroke:var(--accent)}
.card .tile{transition:transform .25s ease,background .25s ease}
.card:hover .tile{transform:translateY(-1px);background:color-mix(in srgb,var(--accent) 16%,var(--well))}

/* ── social glyphs ────────────────────────────────────────────────────── */
.socials{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin:var(--s4) 0 0}
.socials a{width:30px;height:30px;border-radius:50%;background:var(--well);display:grid;place-items:center;color:var(--ink-2);transition:color .2s ease,background .2s ease,transform .2s ease}
.socials a:hover{color:var(--on-accent);background:var(--accent);transform:translateY(-2px)}
.socials svg{width:15px;height:15px;fill:currentColor}

/* ── waves ────────────────────────────────────────────────────────────── */
.wave{display:block;width:100%;height:44px;color:var(--surface)}
.wave path{fill:currentColor}
.wave-well{color:var(--well)}
.wave-flip{transform:scaleY(-1)}

/* ── country silhouette panel ─────────────────────────────────────────── */
.geo{display:grid;grid-template-columns:112px 1fr;gap:var(--s4);align-items:center;
     background:var(--surface);border-radius:var(--r);padding:var(--s3);border:1px solid var(--line)}
@media(max-width:640px){.geo{grid-template-columns:1fr}}
.geo-shape{width:100%;max-width:132px;height:auto;max-height:140px;margin-inline:auto;display:block;
  filter:drop-shadow(0 6px 18px color-mix(in srgb,var(--accent) 26%,transparent))}
.geo-lit{fill:var(--accent);stroke:color-mix(in srgb,var(--ink) 30%,transparent);stroke-width:2;
  animation:geo-lit 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes geo-lit{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.geo-shape{transform-box:view-box;transform-origin:50% 50%}
.geo-facts{display:grid;gap:6px;margin:0;padding:0}
.geo-facts div{display:flex;justify-content:space-between;gap:var(--s3);border-bottom:1px solid var(--line);padding:var(--s2) 0;font-size:var(--t-small)}
.geo-facts dt{color:var(--ink-3);margin:0}
.geo-facts dd{margin:0;font-weight:800}
.geo-flag{width:34px;height:26px;border-radius:5px;box-shadow:0 0 0 1px var(--line)}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tag{font-size:var(--t-note);font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--well));
     border-radius:var(--pill);padding:4px 10px;letter-spacing:.01em}

/* ── three-step strip ─────────────────────────────────────────────────── */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);counter-reset:s3;margin:var(--s4) 0}
@media(max-width:700px){.steps3{grid-template-columns:1fr}}
.steps3 .s{background:var(--surface);border-radius:var(--r);padding:var(--s3);border:1px solid var(--line);position:relative;overflow:hidden}
.steps3 .s::before{counter-increment:s3;content:counter(s3);position:absolute;right:10px;top:2px;
  font-size:2rem;font-weight:800;color:color-mix(in srgb,var(--accent) 18%,transparent);line-height:1}
.steps3 h3{margin:0 0 var(--s1)}
.steps3 p{margin:0;color:var(--ink-2);font-size:var(--t-small);line-height:1.5}

/* ── scroll motion (scroll-driven CSS; no JS, no layout thrash) ───────── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rise{animation:rise-in linear both;animation-timeline:view();animation-range:entry 0% entry 38%}
    @keyframes rise-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}}

    .pop-list > *{animation:pop-in linear both;animation-timeline:view();animation-range:entry 0% entry 32%}
    @keyframes pop-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

    .slide-side{animation:slide-side linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes slide-side{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

    .spike,.spike-row > *{animation:spike linear both;animation-timeline:view();animation-range:entry 0% entry 60%;transform-origin:50% 100%}
    @keyframes spike{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  }
}
@media (prefers-reduced-motion: reduce){
  .earth-drift,.orbit-a,.orbit-b,.orbit-c,.geo-lit{animation:none !important}
}

/* ── real device screens ─────────────────────────────────────────────── */
.shot .real{width:100%;height:auto;display:block;border-radius:22px}
.phone-screen:has(.real){padding:0;background:transparent}
.shot picture{display:block}
/* in dark mode a near-black bezel disappears into the page */
@media(prefers-color-scheme:dark){
  .phone{background:#2B2D33;box-shadow:0 18px 44px rgba(0,0,0,.5)}
}

/* ── funding status pills ─────────────────────────────────────────────── */
.pill{display:inline-block;border-radius:var(--r-sm);padding:2px var(--s2);font-size:.64rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.pill-live{background:color-mix(in srgb,var(--ok) 18%,var(--well));color:var(--ok)}
.pill-soon{background:color-mix(in srgb,#F59E0B 22%,var(--well));color:#8A5B00}
.pill-off{background:var(--well);color:var(--ink-3)}
@media(prefers-color-scheme:dark){
  .pill-live{color:#34D399}
  .pill-soon{color:#F5B942}
}

/* ── live availability ────────────────────────────────────────────────── */
.band-high{background:color-mix(in srgb,var(--ok) 18%,var(--well));color:var(--ok)}
.band-mixed{background:color-mix(in srgb,#F59E0B 22%,var(--well));color:#8A5B00}
.band-low{background:var(--well);color:var(--ink-3)}
@media(prefers-color-scheme:dark){.band-high{color:#34D399}.band-mixed{color:#F5B942}}
a.avail{text-decoration:none}
a.avail h3{margin:6px 0 4px;font-size:1rem}

/* ── the drawer: one control in the header, every word behind it ───────── */
.nav-btn{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);display:grid;place-content:center;gap:4px;cursor:pointer;flex:none}
.nav-btn i{display:block;width:15px;height:2px;background:var(--ink);border-radius:2px}
.nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;
  transition:opacity .25s ease;z-index:70}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(320px,86vw);z-index:80;
  background:var(--ground);border-left:1px solid var(--line);padding:var(--s4);
  display:grid;align-content:start;gap:var(--s2);overflow-y:auto;
  transform:translateX(101%);transition:transform .28s cubic-bezier(.22,1,.36,1);
  box-shadow:-18px 0 44px rgba(0,0,0,.18)}
.nav-t:checked ~ .nav-scrim{opacity:1;pointer-events:auto}
.nav-t:checked ~ .drawer{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:var(--s3);margin-bottom:var(--s2);border-bottom:1px solid var(--line)}
.nav-close{font-size:var(--t-note);font-weight:700;color:var(--ink-3);cursor:pointer;
  padding:var(--s1) var(--s2);border-radius:var(--r-sm);border:1px solid var(--line)}
.menu-links{display:grid;gap:2px}
.menu-links a{text-decoration:none;color:var(--ink-2);font-size:var(--t-small);font-weight:600;
  padding:7px var(--s2);border-radius:var(--r-sm)}
.menu-links a:hover{color:var(--ink);background:var(--well)}
.menu-all{color:var(--accent) !important;font-weight:800 !important}
.menu-flat{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line)}
.menu-cta{margin-top:var(--s3);width:100%}
@media(prefers-reduced-motion:reduce){.drawer{transition:none}}

/* ── footer: four measured columns, one brand block, one legal line ───── */
footer{border-top:1px solid var(--line);margin-top:var(--s6);padding:var(--s6) 0 var(--s5);
  background:var(--surface)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s5)}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;gap:var(--s5)}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;gap:var(--s3)}}
.f-brand p{font-size:var(--t-note);color:var(--ink-3);margin-top:var(--s2);max-width:34ch}
.f-col > summary{list-style:none;cursor:pointer;font-size:var(--t-eyebrow);letter-spacing:.13em;
  text-transform:uppercase;font-weight:800;color:var(--ink-3);padding:var(--s2) 0;
  display:flex;justify-content:space-between;align-items:center}
.f-col > summary::-webkit-details-marker{display:none}
.f-col > summary::after{content:"";width:6px;height:6px;border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .2s ease}
.f-col[open] > summary::after{transform:rotate(-135deg)}
@media(min-width:521px){.f-col > summary::after{display:none}.f-col > summary{cursor:default}}
.f-col .body{display:grid;gap:2px;padding:var(--s1) 0 0}
.f-col a{text-decoration:none;color:var(--ink-2);font-size:var(--t-small);font-weight:600;
  padding:4px 0;border-radius:var(--r-sm)}
.f-col a:hover{color:var(--ink)}
.f-legal{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center;
  font-size:var(--t-note);color:var(--ink-3)}
.f-legal a{color:var(--ink-3);text-decoration:none}
.f-legal a:hover{color:var(--ink)}

/* ── partners ─────────────────────────────────────────────────────────── */
.partners{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));gap:6px}
.partners > *{min-width:0}
@media(max-width:520px){.partners{grid-template-columns:repeat(2,minmax(0,1fr))}}
.partner{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s2) var(--s3);display:grid;gap:1px}
.partner b{font-size:var(--t-small);font-weight:800;letter-spacing:-.02em}
.partner span{font-size:var(--t-note);color:var(--ink-3);line-height:1.4}

/* ── motion: a soft landing, not a slam ───────────────────────────────── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rise,.pop-list > *,.slide-side{animation-timing-function:cubic-bezier(.33,0,.2,1)}
  }
}

/* ── measured cards: same shape, same number of lines ─────────────────── */
.card .badge{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.grid .card{display:flex;flex-direction:column}
.earth-stage{margin-block:var(--s2)}
.hero-earth{gap:var(--s5)}
@media(max-width:900px){.hero-earth{gap:var(--s4)}}
.cta-row .btn{flex:0 1 auto}

/* a long fact value gets its own line instead of fighting the label */
.geo-facts div{flex-wrap:wrap}
.geo-facts dd{margin-left:auto;text-align:right;max-width:22ch}
@media(max-width:520px){
  .geo{grid-template-columns:1fr;gap:var(--s3)}
  .geo-shape{max-width:104px;max-height:110px}
}

/* ── the hero: the globe lands first, then the words arrive ───────────── */
.hero-earth{display:grid;grid-template-columns:1fr;gap:var(--s4);align-items:center}
.hero-earth .earth-stage{order:-1;width:min(340px,74vw)}
.hero-earth .earth-legend{display:none}
@media(min-width:900px){
  .hero-earth{grid-template-columns:1.02fr .98fr;gap:var(--s7)}
  .hero-earth .hero-copy{order:1}
  .hero-earth .earth-stage{order:2;width:min(400px,42vw)}
  .hero-earth .earth-legend{display:grid}
}

/* the numbers are chips, not four grey slabs */
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:var(--s4) 0 0;padding:0}
.chips li{display:inline-flex;align-items:baseline;gap:4px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--pill);padding:3px var(--s2);
  font-size:var(--t-note);color:var(--ink-3);font-weight:600;white-space:nowrap}
.chips b{font-size:var(--t-small);font-weight:800;color:var(--ink);letter-spacing:-.02em}

@media (prefers-reduced-motion: no-preference){
  /* the globe draws itself in, then each line of the hero follows it */
  .hero-earth .earth{animation:globe-in .6s cubic-bezier(.33,0,.2,1) both}
  @keyframes globe-in{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
  .hero-copy > *{animation:hero-line .42s cubic-bezier(.33,0,.2,1) both}
  .hero-copy > :nth-child(1){animation-delay:.16s}
  .hero-copy > :nth-child(2){animation-delay:.24s}
  .hero-copy > :nth-child(3){animation-delay:.32s}
  .hero-copy > :nth-child(4){animation-delay:.40s}
  .hero-copy > :nth-child(5){animation-delay:.48s}
  @keyframes hero-line{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* shallow depth: it eases back as you scroll away and returns when you come up */
    .earth-stage{animation:globe-depth linear both;animation-timeline:view();
      animation-range:exit -20% exit 100%}
    @keyframes globe-depth{to{transform:scale(.96) translateY(-6px);opacity:.82}}
  }
}
@media(max-width:900px){.hero{padding-top:var(--s4)}}

/* ── quieter sections: supporting material sits a size down ───────────── */
.section-sm h2{font-size:clamp(1rem,1.9vw,1.2rem)}
.section-sm .lede{font-size:var(--t-small);max-width:52ch}
.section-sm .card p,.section-sm p{font-size:var(--t-note);line-height:1.5}
.section-sm .eyebrow{font-size:.6rem}
.steps3 .s p,.partner span,.geo-facts,.earth-legend li{font-size:var(--t-note)}
.band{padding:var(--s5) var(--s4)}
@media(max-width:640px){.band{padding:var(--s4) var(--s3);border-radius:var(--r)}}
.section + .wave{margin-top:calc(var(--s6) * -1)}
.wave + .section{padding-top:var(--s5)}
.prose p + p{margin-top:0}
.shot figcaption{font-size:var(--t-note);line-height:1.45;max-width:34ch;margin-inline:auto;text-align:center}

/* nothing may push the page sideways */
html,body{overflow-x:hidden}
.card,.partner,.steps3 .s{min-width:0}
.card .badge{display:block;width:fit-content;max-width:100%}

/* ── action buttons carry the platform mark ───────────────────────────── */
.btn svg{width:14px;height:14px;fill:currentColor;flex:none}
.tile-lg svg{width:20px;height:20px;fill:currentColor}
h1 .tile-lg{margin-right:var(--s2)}

/* ── who we actually reach there ──────────────────────────────────────── */
.ops{margin:var(--s4) 0}
.op-chips{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;margin:var(--s2) 0 0;padding:0}
.op-chips li{display:inline-flex;align-items:center;gap:5px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--pill);padding:3px var(--s2);
  font-size:var(--t-note);font-weight:700;color:var(--ink-2);white-space:nowrap}
.op-chips .ico{width:13px;height:13px;stroke:var(--accent)}
/* the first block of a page reads a size up; the later sections settle down */
#access p{font-size:var(--t-body)}
#access p + p,.prose p + p{margin-top:0}
#doit{margin:var(--s5) 0 0}

/* ── a quote that earns the click ─────────────────────────────────────── */
.quote{margin:var(--s4) 0;padding:var(--s4);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);border-left:3px solid var(--accent)}
.quote-lede{font-size:var(--t-lede);font-weight:600;color:var(--ink);max-width:60ch}
.quote-more{border:0;background:transparent;margin:var(--s3) 0 0}
.quote-more > summary{padding:0;color:var(--accent);font-size:var(--t-small);font-weight:800}
.quote-more > summary::after{border-color:var(--accent)}
.quote-more[open] > summary{border:0;margin-bottom:var(--s3)}
.quote-more .body{padding:0;display:grid;gap:var(--s3);font-size:var(--t-small);color:var(--ink-2)}
.quote .muted{margin-top:var(--s4)}
.earn-card{gap:var(--s2)}
.earn-card .earn-p{-webkit-line-clamp:none;font-size:var(--t-small)}
.earn-card .cta-row{margin-top:var(--s3)}
.earn-grid{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
@media(max-width:640px){.earn-grid{grid-template-columns:1fr}}
.earn-card .btn{width:100%;font-size:var(--t-note)}
.card .badge{font-size:.58rem}

/* ══ SPACIOUS LAYOUT LANGUAGE ═══════════════════════════════════════════
   Generous vertical air, tight boxes inside it. Sections breathe; the cards
   they contain stay compact. */
.section{padding:var(--s8) 0}
.hero{padding:var(--s8) 0 var(--s7)}
@media(max-width:720px){
  .section{padding:var(--s7) 0}
  .hero{padding:var(--s5) 0 var(--s6)}
}

/* ── centred hero ─────────────────────────────────────────────────────── */
.hero-mid{text-align:center;display:grid;justify-items:center;gap:var(--s4)}
.hero-mid h1{max-width:18ch;font-size:clamp(1.9rem,5.2vw,3.4rem);line-height:1.04;letter-spacing:-.035em}
.hero-mid .lede{max-width:58ch;margin:0;text-align:center;font-size:var(--t-lede)}
.hero-mid .cta-row{justify-content:center;margin:var(--s2) 0 0}
.hero-mid .btn{height:38px;padding:0 var(--s4)}
.tone{color:var(--accent)}
.tone-2{color:color-mix(in srgb,var(--ink) 45%,var(--accent))}

/* the little pill above a heading */
.pill-label{display:inline-flex;align-items:center;gap:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--pill);padding:4px var(--s3);
  font-size:var(--t-eyebrow);letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-3)}
.pill-label::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* the row of quiet promises under the buttons */
.ticks{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s5);
  list-style:none;margin:var(--s4) 0 0;padding:0}
.ticks li{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-note);color:var(--ink-3);font-weight:600}
.ticks li::before{content:"";width:12px;height:7px;border-left:2px solid var(--ok);
  border-bottom:2px solid var(--ok);transform:rotate(-45deg);flex:none;margin-top:-3px}

/* ── the showcase panel ───────────────────────────────────────────────── */
.showcase{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:var(--s6);margin-top:var(--s7);overflow:hidden}
@media(max-width:720px){.showcase{padding:var(--s4);border-radius:16px;margin-top:var(--s5)}}
.showcase-body{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center}
@media(max-width:820px){.showcase-body{grid-template-columns:1fr;gap:var(--s5)}}
.live-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.live-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);
  border:1px solid var(--line);border-radius:10px;background:var(--ground)}
.live-row .tile{width:24px;height:24px;border-radius:7px;background:var(--surface)}
.live-row .ico{width:13px;height:13px}
.live-row b{font-size:var(--t-note);font-weight:800;letter-spacing:-.01em}
/* the icon tile is a <span> as well, so an unscoped `.live-row span` rule was
   giving BOTH of them margin-left:auto — the free space split between the two
   and every icon landed at a different x. Only the badge gets the auto margin. */
.live-row > span:last-child{font-size:var(--t-eyebrow);color:var(--ink-3);font-weight:700;
  margin-left:auto;text-align:right;letter-spacing:.06em;text-transform:uppercase;
  padding-left:var(--s3)}
.live-row .tile{margin-left:0;flex:none}
.showcase-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);
  margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}
@media(max-width:620px){.showcase-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}}
.showcase-stats div b{display:block;font-size:1.35rem;font-weight:800;letter-spacing:-.03em}
.showcase-stats div span{font-size:var(--t-eyebrow);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}

/* ── marquee of real operator names ───────────────────────────────────── */
.marquee{overflow:hidden;position:relative;padding:var(--s3) 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:var(--s6);width:max-content;animation:slide-marquee 46s linear infinite}
.marquee-track span{font-size:var(--t-small);font-weight:800;color:var(--ink-3);
  letter-spacing:-.01em;white-space:nowrap}
@keyframes slide-marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ── before / after ───────────────────────────────────────────────────── */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(max-width:720px){.compare{grid-template-columns:1fr}}
.compare > div{border:1px solid var(--line);border-radius:14px;padding:var(--s4);background:var(--surface)}
.compare .with{background:color-mix(in srgb,var(--accent) 5%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 25%,var(--line))}
.compare h3{margin:var(--s3) 0 var(--s3);font-size:1.05rem}
.compare ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.compare li{font-size:var(--t-note);color:var(--ink-2);display:flex;gap:var(--s2);line-height:1.45}
.compare li::before{content:"–";color:var(--ink-3);font-weight:800;flex:none}
.compare .with li::before{content:"✓";color:var(--ok)}

/* ── numbered rows beside a screen ────────────────────────────────────── */
.numrows{display:grid;gap:var(--s2)}
.numrow{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;
  border:1px solid var(--line);border-radius:12px;padding:var(--s3);background:var(--surface)}
.numrow i{font-style:normal;font-size:var(--t-eyebrow);font-weight:800;color:var(--accent);
  letter-spacing:.08em;padding-top:2px}
.numrow b{display:block;font-size:var(--t-small);font-weight:800;margin-bottom:2px}
.numrow p{font-size:var(--t-note);color:var(--ink-2);line-height:1.45;margin:0}
.live-row b{margin-right:0;min-width:0}
.showcase .earth-stage{width:min(300px,74vw)}
.showcase .earth-legend{margin-top:var(--s4)}
.trust-box,.gbp-box{margin:var(--s4) 0;display:grid;gap:var(--s2)}