/* ═══ ORBIT — light-base tokens; dark redefines tokens only ═══════════════ */
:root{
  --ground:#FBF6F3; --ground-2:#F4EAE4; --card:#FFFFFF; --card-2:#FDF8F6;
  --ink:#211719; --ink-2:#5E5052; --ink-3:#8C7D7F;
  --line:rgba(33,23,25,.11); --line-2:rgba(33,23,25,.06);
  --coral:#F8543F; --coral-ink:#C33A22; --coral-wash:rgba(248,84,63,.09);
  --teal:#12796A; --teal-wash:rgba(18,121,106,.09);
  --violet:#5B4CC4; --violet-wash:rgba(91,76,196,.09);
  --shadow:0 1px 2px rgba(33,23,25,.05), 0 12px 34px -14px rgba(33,23,25,.18);
  --shadow-lg:0 2px 4px rgba(33,23,25,.05), 0 34px 70px -26px rgba(33,23,25,.32);
  --radius:18px;
  --pad:clamp(20px,5vw,40px);
  --display:"Bricolage Grotesque","Avenir Next",-apple-system,BlinkMacSystemFont,sans-serif;
  --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#141011; --ground-2:#1C1617; --card:#1B1516; --card-2:#211A1B;
    --ink:#F8F1EE; --ink-2:#BDABAC; --ink-3:#8B7C7D;
    --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.06);
    --coral:#FF6B55; --coral-ink:#FF8F7C; --coral-wash:rgba(255,107,85,.13);
    --teal:#43CFB1; --teal-wash:rgba(67,207,177,.12);
    --violet:#9C8FF0; --violet-wash:rgba(156,143,240,.12);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px -14px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 34px 70px -26px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --ground:#141011; --ground-2:#1C1617; --card:#1B1516; --card-2:#211A1B;
  --ink:#F8F1EE; --ink-2:#BDABAC; --ink-3:#8B7C7D;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.06);
  --coral:#FF6B55; --coral-ink:#FF8F7C; --coral-wash:rgba(255,107,85,.13);
  --teal:#43CFB1; --teal-wash:rgba(67,207,177,.12);
  --violet:#9C8FF0; --violet-wash:rgba(156,143,240,.12);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px -14px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 34px 70px -26px rgba(0,0,0,.75);
}
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--body);
  font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); font-weight:800; letter-spacing:-.026em; line-height:1.06; text-wrap:balance; margin:0}
h1{font-size:clamp(38px,5.4vw,66px)}
h2{font-size:clamp(28px,3.5vw,42px)}
h3{font-size:clamp(19px,1.7vw,22px); letter-spacing:-.018em; line-height:1.22}
h4{font-size:17px; letter-spacing:-.012em; line-height:1.3}
p{margin:0}
:focus-visible{outline:2.5px solid var(--coral); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

.wrap{max-width:1160px; margin:0 auto; padding-inline:var(--pad)}
.sec{padding-block:clamp(56px,8vw,104px)}
.sec.tint{background:var(--ground-2)}
.sec.hair{border-top:1px solid var(--line-2)}
.stack{display:flex; flex-direction:column}
.g40{gap:40px} .g56{gap:clamp(40px,6vw,68px)}

.eyebrow{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px;
  font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--coral-ink)}
.eyebrow::before{content:""; width:11px; height:11px; border-radius:50%; border:1.6px solid var(--coral); flex:none}
.eyebrow.teal{color:var(--teal)} .eyebrow.teal::before{border-color:var(--teal)}
.eyebrow.violet{color:var(--violet)} .eyebrow.violet::before{border-color:var(--violet)}
.lede{font-size:clamp(16.5px,1.5vw,19px); color:var(--ink-2); max-width:62ch; line-height:1.6}
.sec-head{display:flex; flex-direction:column; gap:16px; margin-bottom:clamp(32px,4vw,48px)}
.sec-head h2{max-width:22ch}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--body);
  font-weight:600; font-size:16px; text-decoration:none; padding:14px 24px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease}
.btn-primary{background:var(--coral); color:#fff; box-shadow:0 10px 26px -10px rgba(248,84,63,.7)}
.btn-primary:hover{transform:translateY(-1.5px); box-shadow:0 16px 34px -12px rgba(248,84,63,.8)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{background:var(--card); border-color:var(--ink-3)}
.btn-sm{padding:10px 18px; font-size:14.5px}
.btn-lg{padding:17px 30px; font-size:17px}

/* nav */
.nav{position:sticky; top:0; z-index:60; background:var(--ground);
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line-2)}
.nav-in{display:flex; align-items:center; gap:18px; height:66px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.brand svg{width:30px; height:30px}
.brand b{font-family:var(--display); font-size:20px; font-weight:800; letter-spacing:-.03em}
.nav-links{display:flex; gap:2px; margin-left:6px}
.nav-links a{font-size:14.8px; font-weight:500; text-decoration:none; color:var(--ink-2);
  padding:8px 12px; border-radius:9px; transition:color .15s, background .15s; white-space:nowrap}
.nav-links a:hover{color:var(--ink); background:var(--card)}
.nav-links a.on{color:var(--ink); background:var(--coral-wash)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:12px}
.plat-chip{display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line);
  border-radius:999px; padding:4px 5px; white-space:nowrap}
.plat-chip .on{display:grid; place-items:center; width:26px; height:24px; border-radius:999px;
  background:var(--ink); color:var(--ground)}
.plat-chip .soon{display:inline-flex; align-items:center; gap:5px; padding:0 9px 0 7px;
  font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3)}
.burger{display:none; background:none; border:1px solid var(--line); border-radius:10px;
  width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer; color:var(--ink)}
@media (max-width:1180px){
  .nav-links{display:none; position:absolute; top:66px; left:0; right:0; background:var(--ground);
    border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding:8px var(--pad) 18px; margin:0}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 6px; border-radius:0; border-bottom:1px solid var(--line-2); font-size:16.5px}
  .burger{display:inline-flex} .plat-chip{display:none}
}
@media (max-width:520px){ .nav-right .btn{display:none} }

/* hero */
.hero{position:relative; padding-block:clamp(44px,6.5vw,84px) clamp(52px,7vw,96px); overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(30px,4.5vw,64px); align-items:center}
.hero h1{margin-top:18px}
.hero h1 em{font-style:normal; color:var(--coral)}
.hero .lede{margin-top:20px; font-size:clamp(17px,1.6vw,19.5px); max-width:46ch}
.ticks{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:11px}
.ticks li{display:flex; gap:11px; align-items:flex-start; font-size:15.5px; color:var(--ink-2); line-height:1.5}
.ticks li > svg{flex:none; margin-top:3px; color:var(--teal)}
.ticks li > span{flex:1; min-width:0}
.ticks li strong{color:var(--ink); font-weight:600}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; align-items:center}
.hero-note{font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:16px; letter-spacing:.02em}

.stage{position:relative; aspect-ratio:1/1.06; display:grid; place-items:center}
.rings{position:absolute; inset:0; pointer-events:none}
.ring{position:absolute; inset:0; margin:auto; border-radius:50%; border:1px solid var(--line)}
.ring.r1{width:46%; height:46%} .ring.r2{width:62%; height:62%}
.ring.r3{width:78%; height:78%; border-color:var(--coral-wash); border-style:dashed}
.orbiter{position:absolute; inset:0; margin:auto; width:78%; height:78%; border-radius:50%; animation:spin 46s linear infinite}
.orbiter{animation-delay:-4s}
.orbiter.b{animation-delay:-11s; width:62%; height:62%; animation-duration:32s; animation-direction:reverse}
.orbiter.c{width:46%; height:46%; animation-duration:24s; animation-delay:-16s}
@keyframes spin{to{transform:rotate(360deg)}}
.pip{position:absolute; top:-19px; left:50%; transform:translateX(-50%)}
.pip-in{display:inline-flex; align-items:center; gap:7px; padding:4px 12px 4px 4px; border-radius:999px;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
  font-size:12.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; color:var(--ink);
  animation:spin 46s linear infinite reverse}
.orbiter   .pip-in{animation-delay:-4s}
.orbiter.b .pip-in{animation-duration:32s; animation-direction:normal; animation-delay:-11s}
.orbiter.c .pip-in{animation-duration:24s; animation-direction:reverse; animation-delay:-16s}
.pip-in i{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none; color:#fff}
.pip.a i{background:var(--coral)} .pip.b i{background:var(--teal)} .pip.c i{background:var(--violet)}
@media (max-width:520px){ .pip-in{font-size:12px; padding:4px 11px 4px 4px} .pip-in i{width:22px; height:22px} }
.phone{position:relative; z-index:3; width:min(41%,186px); border-radius:26px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-lg); background:var(--card)}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:36px}
  .stage{aspect-ratio:1/.92; max-width:440px; margin:0 auto} }

/* grids + cards */
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  display:flex; flex-direction:column; gap:9px; transition:border-color .18s, transform .18s}
.card:hover{border-color:var(--ink-3); transform:translateY(-2px)}
.card p{font-size:14.8px; color:var(--ink-2); line-height:1.55}
.icon{width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--coral-wash); color:var(--coral-ink); margin-bottom:5px}
.icon.teal{background:var(--teal-wash); color:var(--teal)}
.icon.violet{background:var(--violet-wash); color:var(--violet)}

/* splits */
.split{display:grid; gap:clamp(28px,4.5vw,58px); align-items:center}
.split.a{grid-template-columns:1fr 1fr}
.split.b{grid-template-columns:.9fr 1.1fr; align-items:start}
.split.c{grid-template-columns:.72fr 1.28fr; align-items:start}
@media (max-width:900px){ .split.a,.split.b,.split.c{grid-template-columns:1fr; gap:30px}
  .split.c .sec-head{position:static !important} }
.shot{border-radius:24px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-lg);
  background:var(--card); max-width:300px; width:100%; justify-self:center}

/* pill list for capability groups */

/* feature group table-ish list */
.flist{display:grid; grid-template-columns:repeat(2,1fr); gap:0 34px}
@media (max-width:760px){.flist{grid-template-columns:1fr}}
.frow{display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-2); align-items:flex-start}
.frow > svg{flex:none; margin-top:4px; color:var(--coral)}
.frow div{min-width:0}
.frow > div > b{display:block; font-size:15.2px; font-weight:600; letter-spacing:-.005em}
.frow > div > span{display:block; font-size:14px; color:var(--ink-2); line-height:1.5; margin-top:2px}


/* pricing */
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:stretch}
@media (max-width:1000px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.plans{grid-template-columns:1fr}}
.plan{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px;
  display:flex; flex-direction:column; gap:14px; position:relative}
.plan.pop{border-color:var(--coral); box-shadow:var(--shadow)}
.plan .flag{position:absolute; top:-11px; left:22px; font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; background:var(--coral); color:#fff; padding:4px 10px; border-radius:999px}
.plan .nm{font-family:var(--display); font-size:19px; font-weight:800; letter-spacing:-.02em}
.plan .pr{font-family:var(--mono); font-size:33px; font-weight:600; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1}
.plan .pr small{font-size:13px; font-weight:400; color:var(--ink-3); letter-spacing:0}
.plan .one{font-size:14px; color:var(--ink-2); min-height:42px}
.plan ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.plan li{display:flex; gap:9px; font-size:14.2px; color:var(--ink-2); line-height:1.45}
.plan li > svg{flex:none; margin-top:3px; color:var(--teal)}
.plan li > span{flex:1; min-width:0}
.plan .btn{margin-top:auto; width:100%}
.ctry-row{display:flex; justify-content:flex-end; margin-bottom:14px}
@media (max-width:700px){ .ctry-row{justify-content:flex-start} }
.ctry{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink-3); max-width:100%}
.ctry .lbl{color:var(--ink-3); white-space:nowrap}
/* The country name IS the control: a real <select> sits transparently over it,
   so one tap opens the native picker instead of revealing a second widget. */
.ctry-pick{position:relative; display:inline-flex; align-items:center; gap:5px;
  font-weight:600; color:var(--ink-2); cursor:pointer; transition:color .15s; white-space:nowrap}
.ctry-pick b{text-decoration:underline; text-decoration-style:dashed; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:var(--ink-3); transition:text-decoration-color .15s}
.ctry-pick:hover, .ctry-pick:focus-within{color:var(--coral-ink)}
.ctry-pick:hover b, .ctry-pick:focus-within b{text-decoration-color:var(--coral)}
.ctry-pick svg{opacity:.7; flex:none}
.ctry-pick select{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
  border:0; margin:0; padding:0; font-size:16px; -webkit-appearance:none; appearance:none}
.live-pill{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--teal); background:var(--teal-wash);
  border-radius:999px; padding:5px 11px; width:fit-content}
.live-pill i{width:6px; height:6px; border-radius:50%; background:var(--teal); animation:blip 2s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.35}}

.tbl-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card)}
table{border-collapse:collapse; width:100%; min-width:660px; font-size:14.5px}
th,td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line-2)}
thead th{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; background:var(--card-2)}
tbody th{font-weight:500; color:var(--ink)}
td{color:var(--ink-2); font-variant-numeric:tabular-nums}
tbody tr:last-child th, tbody tr:last-child td{border-bottom:none}
.yes{color:var(--teal); font-weight:600} .no{color:var(--ink-3)}

/* quotes */
.av{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-family:var(--mono); font-size:12.5px; font-weight:600; color:#fff}
.notice{display:flex; gap:12px; align-items:flex-start; border:1px dashed var(--coral);
  background:var(--coral-wash); border-radius:12px; padding:14px 16px; font-size:14px; color:var(--ink-2)}
.notice b{color:var(--ink)}

details{border-bottom:1px solid var(--line); padding:16px 0}
details summary{cursor:pointer; list-style:none; font-family:var(--display); font-size:17.5px; font-weight:700;
  letter-spacing:-.015em; display:flex; justify-content:space-between; gap:16px; align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; font-family:var(--mono); font-size:19px; color:var(--coral); flex:none}
details[open] summary::after{content:"–"}
details .ans{padding-top:11px; font-size:15.2px; color:var(--ink-2); max-width:74ch}
details .ans p + p{margin-top:10px}

/* blog */
.post-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; transition:transform .18s, border-color .18s}
.post-card:hover{transform:translateY(-3px); border-color:var(--ink-3)}
.post-art{height:132px}
.post-body{padding:20px; display:flex; flex-direction:column; gap:9px; flex:1}
.post-body h4{font-size:17.5px; line-height:1.25}
.post-body .meta{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.post-body p{font-size:14.4px; color:var(--ink-2)}
.article{max-width:70ch; margin:0 auto}
.article h2{font-size:clamp(30px,4vw,44px); margin-bottom:16px}
.article h3{margin:34px 0 10px; font-size:21px}
.article p{margin-bottom:17px; font-size:17px; line-height:1.72; color:var(--ink-2)}
.article p strong{color:var(--ink); font-weight:600}
.article ul{margin:0 0 17px; padding-left:22px; color:var(--ink-2); font-size:17px; line-height:1.7}
.article li{margin-bottom:8px}
.article blockquote{margin:26px 0; padding:2px 0 2px 22px; border-left:3px solid var(--coral);
  font-family:var(--display); font-size:21px; font-weight:500; letter-spacing:-.018em; line-height:1.36; color:var(--ink)}
.byline{display:flex; align-items:center; gap:12px; padding:16px 0 26px; margin-bottom:26px; border-bottom:1px solid var(--line)}

/* footer — three full-width bands so every edge lines up */
.foot{background:var(--ground-2); border-top:1px solid var(--line); padding-block:clamp(44px,6vw,64px) 26px}
.foot-top{display:flex; align-items:flex-end; justify-content:space-between; gap:26px;
  padding-bottom:30px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.foot-top p{font-size:14.5px; color:var(--ink-2); max-width:38ch; margin-top:10px}
.foot-cols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px;
  padding-block:32px; border-bottom:1px solid var(--line)}
@media (max-width:720px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px}}
.foot h5{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 13px}
.foot ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px}
.foot a{font-size:14.5px; color:var(--ink-2); text-decoration:none}
.foot a:hover{color:var(--coral-ink)}
.foot-base{padding-top:22px; display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center;
  justify-content:space-between; font-size:13px; color:var(--ink-3)}
.disclaimer{font-size:13px; color:var(--ink-3); line-height:1.55}
.page{display:none} .page.on{display:block}
.crumb{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); text-decoration:none}


.phone video, .shot video, .shot img{width:100%; display:block}
.chain{display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card)}
.chain .row{display:flex; gap:14px; padding:16px 18px; border-bottom:1px solid var(--line-2); align-items:flex-start}
.chain .row:last-child{border-bottom:none}
.chain .n{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--coral);
  border:1px solid var(--coral); border-radius:999px; width:26px; height:26px; display:grid; place-items:center; flex:none; margin-top:2px}
.chain .row > div > b{display:block; font-size:15.4px; font-weight:600}
.chain .row > div > span{display:block; font-size:14.2px; color:var(--ink-2); line-height:1.5; margin-top:3px}

.statbar{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width:760px){.statbar{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.stat .k{font-family:var(--mono); font-size:29px; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.stat .l{font-size:13.5px; color:var(--ink-2); margin-top:4px; line-height:1.4}


/* ── v3 corrections from the seven-role audit ─────────────────────────── */
.phone video, .shot video, .shot img{width:100%; display:block}

/* Q28 — numbered markers must centre their glyph. Inherited line-height
   pushed the digit off-centre inside the 26px ring. */
.chain .row > svg{flex:none; margin-top:4px; color:var(--teal)}

/* Q26 — no orphan rows. Every card grid on the page divides evenly. */
.chain{display:flex; flex-direction:column; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; background:var(--card)}
.chain .row{display:flex; gap:14px; padding:16px 18px; border-bottom:1px solid var(--line-2); align-items:flex-start}
.chain .row:last-child{border-bottom:none}

.chain .row > div > b{display:block; font-size:15.4px; font-weight:600}
.chain .row > div > span{display:block; font-size:14.2px; color:var(--ink-2); line-height:1.5; margin-top:3px}


.statbar{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width:860px){.statbar{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.stat .k{font-family:var(--mono); font-size:28px; font-weight:600; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1.1}
.stat .l{font-size:13.5px; color:var(--ink-2); margin-top:6px; line-height:1.45}

/* Q18 — the hero's two actions stay on one line wherever there is room. */
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; align-items:center}
@media (min-width:901px){ .hero-cta .btn{flex:0 0 auto} }

/* Q27 — one vertical scale. Section heads never carry ad-hoc margins. */
.sec-head{margin-bottom:clamp(30px,3.6vw,44px)}

/* Q23 — a video that cannot autoplay still shows its screen (poster). */
video{background:var(--card-2)}

/* A quiet source line under a claim that needs one (Q2, Q71). */
.src{font-size:12.5px; color:var(--ink-3); line-height:1.5; max-width:70ch}
.src a{color:var(--ink-3)}

/* MISSING RULE — .band / .mark were used in markup but never defined, so the
   iOS statement rendered as unstyled text with a bare glyph. */
.band{border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  padding:clamp(18px,2.4vw,24px); display:grid; gap:16px; align-items:start}
.band .mark{width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:var(--ink); color:var(--ground); flex:none}
.band h4{margin-bottom:6px}
.band p{font-size:14.6px; color:var(--ink-2); line-height:1.55}

/* Mobile — the hero rings extended 15px past the viewport and the orbit stage
   climbed over the "free to download" line. Clip the stage and give it air. */
.stage{overflow:hidden}
@media (max-width:900px){
  .stage{margin-top:22px; aspect-ratio:1/1; max-width:400px}
  .ring.r3, .orbiter{width:74%; height:74%}
  .ring.r2, .orbiter.b{width:58%; height:58%}
  .ring.r1, .orbiter.c{width:42%; height:42%}
  .phone{width:min(38%,148px)}
}

/* Touch targets — footer links were 18px tall on an iPhone. */
.foot ul{gap:0}
.foot ul a{display:block; padding:11px 0; line-height:1.25}
@media (min-width:721px){ .foot ul a{padding:9px 0} }

/* ── Showcase: THE consistent pattern for "a screen plus what it does". Every
   such pair on the site uses this, so no section invents its own treatment. ── */
.showcase{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px,2.6vw,30px); display:flex; flex-direction:column; gap:20px; align-items:center;
  text-align:center; height:100%}
.showcase .shot{max-width:250px}
.showcase h3{max-width:24ch}
.showcase p{color:var(--ink-2); font-size:15.4px; line-height:1.58; max-width:46ch}
.showcase .ticks{text-align:left; align-self:stretch}
.showcase.row{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,3.4vw,44px); align-items:center; text-align:left}
.showcase.row .shot{justify-self:center}
.showcase.row h3{max-width:none}
.showcase.row p{max-width:62ch}
.showcase.row .body{display:flex; flex-direction:column; gap:14px; min-width:0}
.col{display:flex; flex-direction:column; gap:16px; min-width:0}
.col > .shot{align-self:center; max-width:260px}
.showcase.row.flip .shot{order:2}
@media (max-width:860px){
  .showcase.row{grid-template-columns:1fr; text-align:left}
  .showcase.row.flip .shot{order:0}
}

/* System cards — the four pillars, with their concrete capabilities as chips. */
.sys{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width:1000px){.sys{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.sys{grid-template-columns:1fr}}
.syscard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; text-decoration:none;
  transition:transform .18s, border-color .18s}
.syscard:hover{transform:translateY(-3px); border-color:var(--ink-3)}
.syscard .top{padding:20px 20px 16px; display:flex; align-items:center; gap:13px;
  background:linear-gradient(160deg, var(--w1), transparent 78%); border-bottom:1px solid var(--line-2)}
.syscard .top .icon{margin:0; width:42px; height:42px; border-radius:12px}
.syscard .top h3{font-size:19px}
.syscard .body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:13px; flex:1}
.syscard .body p{font-size:14.6px; color:var(--ink-2); line-height:1.55}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto}
.chip{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-2); background:var(--ground-2);
  border:1px solid var(--line-2); border-radius:6px; padding:5px 8px}
.syscard .more{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--coral-ink); margin-top:4px}

/* Impact strip — three hard facts under a marquee claim. */
.impact{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:clamp(24px,3vw,32px)}
@media (max-width:760px){.impact{grid-template-columns:1fr}}
.imp{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  display:flex; gap:12px; align-items:flex-start}
.imp > svg{flex:none; margin-top:2px; color:var(--coral)}
.imp > div > b{display:block; font-size:14.8px; font-weight:600}
.imp > div > span{display:block; font-size:13.6px; color:var(--ink-2); line-height:1.45; margin-top:2px}

/* Tab carousel — Home / Health / Driving, inside one phone. */
.carousel{display:flex; flex-direction:column; gap:16px; align-items:center}
.carousel .frame{position:relative; width:100%; max-width:262px; aspect-ratio:505/1094;
  border-radius:26px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-lg); background:var(--card)}
.carousel .frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s ease}
.carousel .frame img.on{opacity:1}
.tabs{display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--ground-2);
  border:1px solid var(--line)}
.tabs button{font-family:var(--body); font-size:13.5px; font-weight:600; color:var(--ink-2);
  background:none; border:none; border-radius:999px; padding:8px 16px; cursor:pointer; transition:.18s}
.tabs button[aria-selected="true"]{background:var(--coral); color:#fff}

/* Section head, centred variant. */
.sec-head.center{align-items:center; text-align:center}
.sec-head.center h2, .sec-head.center .lede{margin-inline:auto}

/* Referral reward diagram — an illustration, not a screenshot. */
.reward{display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px,3vw,30px)}
@media (max-width:760px){.reward{grid-template-columns:1fr; gap:14px} .reward .arrow{transform:rotate(90deg)}}
.reward .side{display:flex; flex-direction:column; gap:9px; align-items:center; text-align:center}
.reward .badge{width:56px; height:56px; border-radius:16px; display:grid; place-items:center}
.reward .big{font-family:var(--mono); font-size:26px; font-weight:600; letter-spacing:-.03em; line-height:1.1}
.reward .who{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.reward p{font-size:14px; color:var(--ink-2); line-height:1.5; max-width:30ch}
.reward .arrow{color:var(--ink-3)}

/* Screenshot gallery — consistent size, and every screen carries its name so
   the copy and the picture can never drift apart. */
.gal{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,250px)); gap:16px;
  justify-content:center; margin-bottom:clamp(26px,3.4vw,36px); align-items:start}
.gal figure{margin:0; display:flex; flex-direction:column; gap:11px}
.gal .shot{max-width:none; width:100%}
.gal figcaption{font-size:13px; color:var(--ink-2); line-height:1.45}
.gal figcaption b{display:block; font-size:13.6px; font-weight:600; color:var(--ink); letter-spacing:-.005em}
.gal.two{grid-template-columns:repeat(auto-fit,minmax(190px,250px))}
@media (max-width:760px){ .gal, .gal.two{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:359px){ .gal, .gal.two{grid-template-columns:minmax(0,250px); justify-content:center} }

/* Compact two-column feature row used on the home page instead of a deep dive. */
.col > .shot{align-self:center; max-width:260px}
.split.a > .col > .shot{max-width:280px}