/* Jarapass website.
   Structure modelled on piggyvest.com; page-set and editorial detail pages on the travel
   booking set in Design inspiration/. Rules in ~/.claude/skills/startup-website-layout.
   Tokens are the product's own — imported, never redefined. */

@import url('tokens.css');

/* ── SITE GROUND SYSTEM ────────────────────────────────────────────────────
   Samuel, 2 Oct: the ivory/cream ground reads calm; Jarapass is a tech brand.
   So the site overrides the PRODUCT's warm paper with three grounds only:
     white          the default
     line           white with a faint technical grid
     ink            brand black
   The app keeps paper — these overrides are scoped to the site, and no token
   in ../tokens.css is edited (it is verified by Architecture/verify_tokens.py). */
:root{
  --surface-page:#FFFFFF;
  --surface-card:#FFFFFF;
  --surface-sunken:#F5F7F5;      /* neutral, not warm */
  --border-subtle:#E4E8E4;
  --text-secondary:#5C6359;
  --ink-bg:#0B0E09;
  --grid-line:rgba(11,14,9,.055);
  --grid-line-on-ink:rgba(250,248,243,.07);
}

@font-face{font-family:CD;src:url('assets/cd/ClashDisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:CD;src:url('assets/cd/ClashDisplay-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:SA;src:url('assets/sa/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:SA;src:url('assets/sa/Satoshi-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:SA;src:url('assets/sa/Satoshi-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

*{margin:0;padding:0;box-sizing:border-box}
/* [hidden] is display:none from the UA sheet, so ANY author display rule beats it.
   That left the waitlist progress bar and nav on screen after completion. */
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
svg{width:20px;height:20px;flex:0 0 auto}
html{scroll-behavior:smooth;scroll-padding-top:90px}
/* overflow-x:hidden makes a scroll container and silently kills position:sticky */
html,body{overflow-x:clip}
body{font-family:SA,system-ui,sans-serif;background:var(--surface-page);color:var(--text-primary);
  font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%;display:block}
a{color:var(--accent-text)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink-900);color:#FAF8F3;
  padding:12px 18px;border-radius:0 0 12px 0}
.skip:focus{left:0}

.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:760px}
section{padding:clamp(48px,7vw,96px) 0}
section.tight{padding:clamp(26px,3.4vw,44px) 0 clamp(48px,7vw,96px)}
/* the line ground — a technical grid, not a tint */
section.alt{background:var(--surface-sunken);position:relative}
section.alt::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 40%,transparent 100%)}
section.alt>*{position:relative;z-index:1}

/* JARA LIME as a GROUND. The brand rule is that lime is a surface and never text,
   so a lime band carries ink type; the pairing is the approved 14.77:1 control in
   Architecture/verify_tokens.py. One lime band per page, never two — it is the
   loudest thing in the system. */
section.lime{background:var(--lime-500);color:var(--ink-900);position:relative;overflow:hidden}
section.lime::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(11,14,9,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,14,9,.075) 1px,transparent 1px);
  background-size:58px 58px}
section.lime>*{position:relative;z-index:1}
section.lime h1,section.lime h2,section.lime h3{color:var(--ink-900)}
section.lime .lede,section.lime p,section.lime .dim{color:rgba(11,14,9,.72)}
section.lime .eyebrow{color:rgba(11,14,9,.6)}
section.lime .st,section.lime .wcard,section.lime .sw,section.lime .sidecard,
section.lime .tablewrap,section.lime .calc{background:#FFFFFF;border-color:rgba(11,14,9,.14)}
section.lime .tbl th{background:#F5F7F5;color:var(--text-secondary)}
section.lime .tbl td,section.lime .tbl th{border-color:rgba(11,14,9,.1)}
section.lime .tbl tfoot td{background:#F5F7F5}
section.lime .st .num{background:var(--ink-900);color:var(--lime-500)}
section.lime .statband{background:#FFFFFF}
section.lime .btn{background:var(--ink-900);color:#FAF8F3}
section.lime .btn.ghost{background:transparent;color:var(--ink-900);
  box-shadow:inset 0 0 0 1.5px rgba(11,14,9,.3)}
section.lime .ticks li{color:rgba(11,14,9,.76)}
/* a card that carries its own dark ground must keep its own light type */
section.lime .quotecard,section.lime .quotecard p,section.lime .quotecard .big,
section.lime .quotecard h2,section.lime .quotecard h3{color:#FAF8F3}
section.lime .quotecard .dim,section.lime .quotecard .eyebrow{color:rgba(250,248,243,.62)}
section.lime .ticks li::before{background:var(--ink-900)}
section.lime .ticks li::after{border-color:var(--lime-500)}
section.lime .stmark,section.lime .statband .sm-mark{color:var(--ink-900)}
/* same on a lime band: Lime Deep, not ink, so the mark stays two-tone */
section.lime svg [fill="var(--lime-500)"]{fill:#FFFFFF}
section.lime svg [stroke="var(--lime-500)"]{stroke:#FFFFFF;fill:none}
section.lime details{border-color:rgba(11,14,9,.18)}
section.lime summary::after{border-color:rgba(11,14,9,.55)}
section.lime .note-panel{background:#FFFFFF;border-color:rgba(11,14,9,.14)}

/* brand black, with the same grid in lime-tinted white */
section.ink{background:var(--ink-bg);color:#FAF8F3;position:relative;overflow:hidden}
section.ink::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line-on-ink) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line-on-ink) 1px,transparent 1px);
  background-size:58px 58px}
section.ink>*{position:relative;z-index:1}
section.ink h2,section.ink h3{color:#FAF8F3}
section.ink .lede,section.ink p,section.ink .dim{color:rgba(250,248,243,.68)}
section.ink .eyebrow{color:rgba(250,248,243,.56)}
section.ink .st,section.ink .wcard,section.ink .sw{background:rgba(250,248,243,.05);
  border-color:rgba(250,248,243,.14)}
section.ink .statband{background:rgba(250,248,243,.05)}
section.ink .btn.ghost{color:#FAF8F3;box-shadow:inset 0 0 0 1.5px rgba(250,248,243,.3)}
section.ink .tbl th{background:rgba(250,248,243,.05);color:rgba(250,248,243,.6)}
section.ink .tbl th,section.ink .tbl td{border-color:rgba(250,248,243,.12)}
section.ink .tbl a{color:#FAF8F3}
section.ink .tablewrap{background:transparent;border-color:rgba(250,248,243,.14)}
section.ink .tbl tbody tr:hover{background:rgba(250,248,243,.04)}
section.ink .tbl tfoot td{background:rgba(250,248,243,.05)}
section.ink .note-panel{background:rgba(250,248,243,.05);border-color:rgba(250,248,243,.14)}
section.ink .note-panel p{color:rgba(250,248,243,.68)}
section.ink .ticks li{color:rgba(250,248,243,.68)}
section.ink details{border-color:rgba(250,248,243,.14)}
section.ink details p{color:rgba(250,248,243,.68)}
section.ink summary::after{border-color:rgba(250,248,243,.5)}
section.ink .catcard{background:rgba(250,248,243,.04);border-color:rgba(250,248,243,.14)}
section.ink .catcard .bd p,section.ink .catcard .areas{color:rgba(250,248,243,.6)}
section.ink .catcard .areas{border-color:rgba(250,248,243,.12)}
section.ink .catcard .more{color:#FAF8F3}
section.ink .catcard .rng{color:var(--lime-500)}

/* ── type ─────────────────────────────────────────────────────────────── */
h1{font-family:CD;font-weight:600;font-size:clamp(38px,7.2vw,68px);line-height:1.02;letter-spacing:-.035em}
h2{font-family:CD;font-weight:600;font-size:clamp(26px,4.2vw,42px);line-height:1.07;letter-spacing:-.028em}
h3{font-family:CD;font-weight:600;font-size:19px;letter-spacing:-.015em;line-height:1.25}
h4{font-family:CD;font-weight:600;font-size:14px;letter-spacing:-.01em}
.eyebrow{font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary)}
p.lede{font-size:clamp(16px,1.9vw,19px);color:var(--text-secondary);max-width:58ch}
.dim{color:var(--text-secondary)}
.head{max-width:62ch}
.head .lede{margin-top:14px}

/* a brand mark set inline in a headline, at the cap height of the type around it */
.inlinemark{display:inline-grid;place-items:center;vertical-align:-.16em;
  width:.92em;height:.92em;margin:0 .1em}
.inlinemark svg{width:100%;height:100%}
.inlinemark.sm{width:.8em;height:.8em}
section.ink .inlinemark{color:#FAF8F3}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;
  padding:0 26px;border-radius:999px;border:0;cursor:pointer;font-weight:700;font-size:16px;
  text-decoration:none;background:var(--accent-surface);color:var(--accent-on-surface);
  transition:transform .16s ease,box-shadow .16s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(11,14,9,.14)}
.btn.sm{min-height:42px;font-size:14.5px;padding:0 18px}
.btn.full{width:100%}
.btn.ink{background:var(--ink-900);color:#FAF8F3}
.btn.lime{background:var(--lime-500);color:var(--ink-900)}.bizcopy .btn{align-self:flex-start}
.btn.onink{background:transparent;color:#FAF8F3;box-shadow:inset 0 0 0 1.5px rgba(250,248,243,.34)}
.btn.ghost{background:transparent;color:var(--text-primary);
  box-shadow:inset 0 0 0 1.5px var(--border-subtle)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:6px 13px;font-size:12.5px;
  font-weight:700;color:var(--ink-900);white-space:nowrap}
.pill.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--border-subtle);
  color:var(--text-secondary)}
.pillrow{display:flex;gap:8px;flex-wrap:wrap}

/* ── nav ──────────────────────────────────────────────────────────────── */
nav.top{position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--surface-page) 90%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--border-subtle)}
nav.top .in{display:flex;align-items:center;gap:18px;height:72px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--text-primary);
  flex:0 0 auto}
/* the approved transparent lockup, not a flattened square */
.brand img{height:34px;width:auto}
footer .brand img{height:30px}
.brand span{position:absolute;left:-9999px}
nav.top .links{display:none;align-items:center;gap:4px;flex:1}
@media(min-width:1000px){nav.top .links{display:flex}}
.navitem{position:relative}
.navitem>a{display:flex;align-items:center;gap:5px;padding:9px 13px;border-radius:999px;
  color:var(--text-secondary);text-decoration:none;font-weight:700;font-size:14.5px}
.navitem>a svg{width:13px;height:13px}
.navitem>a:hover,.navitem>a[aria-current]{color:var(--text-primary);background:var(--surface-sunken)}
.navitem .sub{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;padding:8px;
  background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:18px;
  box-shadow:0 18px 44px rgba(11,14,9,.14);display:grid;gap:1px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s ease}
.navitem.has-sub:hover .sub,.navitem.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.navitem .sub a{padding:9px 12px;border-radius:11px;text-decoration:none;font-size:14px;
  font-weight:600;color:var(--text-primary)}
.navitem .sub a:hover{background:var(--surface-sunken)}
.navcta{display:flex;align-items:center;gap:10px;margin-left:auto}
.burger{display:grid;gap:5px;width:42px;height:42px;place-content:center;border:0;cursor:pointer;
  border-radius:999px;background:var(--surface-sunken)}
.burger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--text-primary);
  transition:.2s ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media(min-width:1000px){.burger{display:none}}
@media(max-width:700px){.hide-sm{display:none!important}}
.mobnav{display:none;border-top:1px solid var(--border-subtle);
  background:var(--surface-page);max-height:70vh;overflow:auto}
.mobnav.open{display:block}
.mobnav .wrap{display:grid;padding-block:10px 18px}
.mobnav a{padding:11px 2px;text-decoration:none;font-weight:700;font-size:16px;
  color:var(--text-primary);border-bottom:1px solid var(--border-subtle)}
.mobnav a.ind{padding-left:16px;font-weight:500;font-size:14.5px;color:var(--text-secondary)}
@media(min-width:1000px){.mobnav{display:none!important}}

/* ── the page header is a LIME field ──────────────────────────────────────
   Samuel, 2 Oct. It matches the member app, whose home header is the same lime,
   so the site and the product read as one thing. Lime is a surface and never
   text, so everything on it is ink — the approved 14.77:1 pairing.
   CATEGORY pages are the exception: their header carries the category's own
   colour, which is a meaning in the system, not decoration. */
.hero,.pagehead{background:var(--lime-500);color:var(--ink-900);position:relative;
  overflow:hidden;border-radius:0 0 clamp(26px,4vw,48px) clamp(26px,4vw,48px)}
.hero::before,.pagehead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(11,14,9,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,14,9,.07) 1px,transparent 1px);
  background-size:58px 58px}
.hero>*,.pagehead>*{position:relative;z-index:1}
.hero h1,.pagehead h1,.hero h2,.pagehead h2{color:var(--ink-900)}
.hero .lede,.pagehead .lede,.hero p,.pagehead p,.hero .dim,.pagehead .dim{color:rgba(11,14,9,.74)}
.hero .eyebrow,.pagehead .eyebrow{color:rgba(11,14,9,.62)}
.hero .micro,.pagehead .micro{color:rgba(11,14,9,.62)}
.hero .btn,.pagehead .btn{background:var(--ink-900);color:#FAF8F3}
.hero .btn.ghost,.pagehead .btn.ghost{background:transparent;color:var(--ink-900);
  box-shadow:inset 0 0 0 1.5px rgba(11,14,9,.32)}
.pagehead .crumb,.pagehead .crumb a{color:rgba(11,14,9,.62)}
.pagehead .crumb a:hover{color:var(--ink-900)}
.pagehead .statband{background:#FFFFFF}
.pagehead .statband .sm-mark{color:var(--ink-900)}
.hero .inlinemark,.pagehead .inlinemark{color:var(--ink-900)}
/* On lime, the marks' lime accent is invisible — but flattening it to ink destroys
   the two-tone, and oneMore then reads as a hamburger icon rather than "three plus
   the extra one". Lime Deep keeps the mark two-tone against the lime ground. */
/* NOT scoped to .mk: mark(k, '') emits class="" so a .mk selector never matches.
   Match the presentation attribute on any svg inside the lime ground instead. */
.hero svg [fill="var(--lime-500)"],.pagehead svg [fill="var(--lime-500)"]{fill:#FFFFFF}
.hero svg [stroke="var(--lime-500)"],.pagehead svg [stroke="var(--lime-500)"]{stroke:#FFFFFF}
/* category headers keep their own colour — it is a meaning, not a style */
.pagehead.cathead{background:var(--c)}
.pagehead.cathead::before{display:none}
/* the chip rail under the city belongs to the white page, not the lime header */
.hero.herotail{background:var(--surface-page);border-radius:0}
.hero.herotail::before{display:none}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{padding:clamp(34px,5vw,64px) 0 clamp(30px,4vw,52px)}
.hero .htop{display:grid;gap:24px;align-items:end}
@media(min-width:960px){.hero .htop{grid-template-columns:1.12fr .88fr;gap:48px}}
.hero .hside p{font-size:clamp(15.5px,1.7vw,17.5px);color:var(--text-secondary);max-width:46ch}
.hero .hside .row{margin-top:22px}
.micro{font-size:13px;color:var(--text-secondary);margin-top:14px}

/* the full-bleed rounded photo with proof cards floating on its edges */
.heroshot{position:relative;margin-top:clamp(30px,4.4vw,52px);border-radius:30px;
  background:var(--surface-sunken)}
.heroshot>img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:30px}
.fcard{position:absolute;display:flex;align-items:center;gap:11px;padding:11px 14px;
  border-radius:16px;background:var(--surface-card);box-shadow:0 14px 40px rgba(11,14,9,.18);
  max-width:min(88vw,300px)}
.fcard .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-900);flex:0 0 36px}
.fcard .ic svg{width:18px;height:18px}
.fcard .tx{display:grid;min-width:0;flex:1}
.fcard .tx b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard .tx span{font-size:11.5px;color:var(--text-secondary)}
.fcard .amt{font-family:CD;font-weight:600;font-size:15px;color:var(--accent-text);
  white-space:nowrap}
.fcard.f1{left:-8px;bottom:14%}
.fcard.f2{right:-8px;top:12%}
.fcard.f3{right:6%;bottom:-22px}
@media(max-width:820px){
  .heroshot>img{aspect-ratio:4/3}
  .fcard{position:static;max-width:none;margin-top:10px;box-shadow:0 6px 18px rgba(11,14,9,.10)}
  .fcard.f1{margin-top:14px}
}

.herochips{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}
.pchip{display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 11px;border-radius:999px;
  background:var(--surface-card);border:1px solid var(--border-subtle);text-decoration:none;
  color:var(--text-primary);font-weight:600;font-size:14px}
.pchip:hover{border-color:var(--c)}
.pchip i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.pchip b{font-family:CD;font-weight:600;color:var(--text-secondary)}

/* ── marquee ──────────────────────────────────────────────────────────── */
.marquee{overflow:hidden;border-block:1px solid var(--border-subtle);padding:16px 0;
  background:var(--surface-card)}
.marquee .track{display:flex;align-items:center;gap:26px;width:max-content;
  animation:slide 48s linear infinite}
.marquee span{font-family:CD;font-weight:600;font-size:clamp(20px,2.6vw,30px);
  letter-spacing:-.02em;white-space:nowrap;color:var(--text-primary)}
.marquee i{width:7px;height:7px;border-radius:50%;background:var(--lime-500);flex:0 0 7px}
@keyframes slide{to{transform:translateX(-33.33%)}}
@media(prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* ── section transitions: the piggyvest curve ─────────────────────────── */
.curve-out{background:var(--surface-page);
  border-radius:0 0 clamp(28px,5vw,72px) clamp(28px,5vw,72px);position:relative;z-index:1}
/* a section that curves INTO the black one below it */
.curve-into-ink{border-radius:0 0 clamp(28px,5vw,72px) clamp(28px,5vw,72px);position:relative;z-index:1}

/* ── stat band ────────────────────────────────────────────────────────── */
.statband{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 18px;margin-top:38px;
  padding:28px;border-radius:24px;background:var(--surface-sunken)}
.curve-out .statband,.pagehead .statband{background:var(--surface-page)}
@media(min-width:800px){.statband{grid-template-columns:repeat(4,1fr)}}
.statband .n{font-family:CD;font-weight:600;font-size:clamp(24px,3.2vw,34px);letter-spacing:-.03em}
.statband .l{font-size:13px;color:var(--text-secondary);margin-top:4px}
.statband .sm-mark{display:block;width:34px;height:34px;margin-bottom:12px;color:var(--text-primary)}
.statband .sm-mark svg{width:34px;height:34px}

/* ── category cards ───────────────────────────────────────────────────── */
.catgrid{display:grid;gap:16px;margin-top:34px;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.catcard{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:22px;
  overflow:hidden;text-decoration:none;color:inherit;display:block;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.catcard:hover{transform:translateY(-3px);border-color:var(--c);
  box-shadow:0 16px 40px rgba(11,14,9,.10)}
.catcard .ph{position:relative;aspect-ratio:16/10;background:var(--surface-sunken)}
.catcard .ph img{width:100%;height:100%;object-fit:cover}
.catcard .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,14,9,.04) 42%,rgba(11,14,9,.58))}
.catcard .tag{position:absolute;left:12px;top:12px;z-index:1;background:var(--c);
  color:var(--ink-900);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700}
.catcard .cnt{position:absolute;left:13px;bottom:11px;z-index:1;color:#FAF8F3;font-family:CD;
  font-weight:600;font-size:21px;letter-spacing:-.02em}
.catcard .bd{padding:15px 17px 17px}
.catcard .rng{font-family:CD;font-weight:600;font-size:19px;color:var(--lime-deep);
  letter-spacing:-.015em}
.catcard .rng span{font-family:SA;font-weight:500;font-size:13px;color:var(--text-secondary)}
.catcard .bd p{font-size:14px;color:var(--text-secondary);margin-top:9px}
.catcard .areas{font-size:12.5px;color:var(--text-secondary);margin-top:11px;
  padding-top:11px;border-top:1px solid var(--border-subtle)}
.catcard .more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13.5px;
  font-weight:700;color:var(--text-primary)}
.catcard .more svg{width:15px;height:15px;transition:transform .18s ease}
.catcard:hover .more svg{transform:translateX(3px)}

/* ── the disclosure panel ─────────────────────────────────────────────── */
.note-panel{margin-top:30px;padding:clamp(22px,3vw,32px);border-radius:24px;
  background:var(--surface-card);border:1px solid var(--border-subtle);max-width:74ch}
.note-panel p{color:var(--text-secondary);margin-top:11px;font-size:15.5px}
.note-panel .btn{margin-top:20px}

/* ── page head ────────────────────────────────────────────────────────── */
.pagehead{padding:clamp(28px,4vw,52px) 0 clamp(26px,3.4vw,44px)}
.pagehead.slim{padding-bottom:6px}
.pagehead h1{margin-top:14px}
.pagehead .lede{margin-top:16px}
.crumb{font-size:13px;color:var(--text-secondary);font-weight:600}
.crumb a{color:var(--text-secondary);text-decoration:none}
.crumb a:hover{color:var(--text-primary)}

.cathead{background:var(--c);color:var(--ink-900);
  border-radius:0 0 clamp(24px,4vw,44px) clamp(24px,4vw,44px)}
.cathead h1,.cathead .lede,.cathead .crumb,.cathead .crumb a{color:var(--ink-900)}
.cathead .lede{opacity:.82}
.cathead .btn.ghost{color:var(--ink-900);box-shadow:inset 0 0 0 1.5px rgba(11,14,9,.3)}
.cattop{display:grid;gap:28px;margin-top:14px}
@media(min-width:900px){.cattop{grid-template-columns:1.15fr .85fr;align-items:end;gap:44px}}
.catfacts{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(11,14,9,.16);
  border-radius:18px;overflow:hidden}
.catfacts>div{background:var(--c);padding:15px 16px;display:grid;gap:3px}
.catfacts .l{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  opacity:.66}
.catfacts .v{font-family:CD;font-weight:600;font-size:clamp(18px,2.2vw,23px);letter-spacing:-.02em}

/* ── split / photo / side ─────────────────────────────────────────────── */
.split{display:grid;gap:34px}
@media(min-width:900px){.split{grid-template-columns:1.25fr .75fr;gap:52px;align-items:start}}
.photocard{border-radius:24px;overflow:hidden;background:var(--surface-sunken)}
.photocard img{width:100%;aspect-ratio:4/3;object-fit:cover}
.photocard.wide img{aspect-ratio:16/7}
@media(max-width:700px){.photocard.wide img{aspect-ratio:4/3}}
.sidecard{position:sticky;top:96px;padding:24px;border-radius:24px;background:var(--surface-card);
  border:1px solid var(--border-subtle)}
.sidecard hr{border:0;border-top:1px solid var(--border-subtle);margin:20px 0}
.sidecard p{font-size:14.5px;color:var(--text-secondary);margin-top:8px}
.sidecard .btn{margin-top:14px}
.bigfig{font-family:CD;font-weight:600;font-size:clamp(26px,3.4vw,34px);letter-spacing:-.03em;
  margin-top:6px}
.quotecard{padding:28px;border-radius:24px;background:var(--ink-900);color:#FAF8F3}
.quotecard .big{font-family:CD;font-weight:600;font-size:clamp(19px,2.3vw,24px);line-height:1.28;
  letter-spacing:-.02em;margin-top:12px}
.quotecard .dim{color:rgba(250,248,243,.62)}
.quotecard .eyebrow{color:rgba(250,248,243,.62)}

.ticks{list-style:none;display:grid;gap:11px}
.ticks li{position:relative;padding-left:30px;color:var(--text-secondary);font-size:15.5px}
.ticks li::before{content:"";position:absolute;left:0;top:.3em;width:18px;height:18px;
  border-radius:50%;background:var(--lime-500)}
.ticks li::after{content:"";position:absolute;left:5px;top:.55em;width:8px;height:4px;
  border-left:2px solid var(--ink-900);border-bottom:2px solid var(--ink-900);
  transform:rotate(-45deg)}
.ticks.big li{font-size:17px;color:var(--text-primary)}

/* ── steps / why / swap ───────────────────────────────────────────────── */
.steps{display:grid;gap:16px;margin-top:34px}
@media(min-width:840px){.steps{grid-template-columns:repeat(3,1fr)}}
.st{padding:24px;border-radius:22px;background:var(--surface-card);
  border:1px solid var(--border-subtle)}
.alt .st{background:var(--surface-page)}
.st{position:relative}
.st .num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--lime-500);color:var(--ink-900);font-family:CD;font-weight:600;font-size:16px}
.stmark{position:absolute;right:22px;top:22px;width:34px;height:34px;opacity:.9;
  color:var(--text-primary)}
.stmark svg{width:34px;height:34px}
.st h3{margin-top:14px}
.st p{font-size:14.5px;color:var(--text-secondary);margin-top:8px}
.steps.big .st{padding:28px}
.steps.big h3{font-size:22px}
.steps.big p{font-size:15.5px}

.why{display:grid;gap:14px;margin-top:32px}
@media(min-width:820px){.why{grid-template-columns:1fr 1fr}}
.wcard{padding:24px;border-radius:22px;background:var(--surface-card);
  border:1px solid var(--border-subtle)}
.alt .wcard{background:var(--surface-page)}

.swap{display:grid;gap:14px;margin-top:32px;align-items:center}
@media(min-width:840px){.swap{grid-template-columns:1fr 56px 1fr}}
.sw{padding:26px;border-radius:22px;background:var(--surface-page);
  border:1px solid var(--border-subtle)}
.sw .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--lilac-500);color:var(--ink-900);font-family:CD;font-weight:600}
.sw h3{margin-top:12px}
.sw p{margin-top:8px;font-size:14.5px}
.sw.arrow{background:none;border:0;padding:0;display:grid;place-items:center;
  color:var(--text-secondary)}
.sw.arrow .swapmark{width:52px;height:52px;color:var(--text-primary)}
section.ink .sw.arrow{background:none;border:0}
section.ink .sw.arrow .swapmark{color:#FFFFFF}
section.lime .sw.arrow{background:none;border:0}
@media(max-width:839px){.sw.arrow svg{transform:rotate(90deg)}}

/* ── table ────────────────────────────────────────────────────────────── */
.tablewrap{margin-top:28px;border-radius:22px;overflow:hidden;border:1px solid var(--border-subtle);
  background:var(--surface-page)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border-subtle)}
.tbl th{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);
  font-weight:700;background:var(--surface-card)}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tbody tr:hover{background:var(--surface-card)}
.tbl a{font-weight:700;text-decoration:none;color:var(--text-primary)}
.tbl a:hover{color:var(--accent-text)}
.tbl .sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:9px;
  padding:0;border:0;vertical-align:baseline}
.tbl tfoot td{background:var(--surface-card);border-bottom:0}

/* ── faq ──────────────────────────────────────────────────────────────── */
.faqgroup{margin-bottom:38px}
.faq{margin-top:14px;border-top:1px solid var(--border-subtle)}
details{border-bottom:1px solid var(--border-subtle)}
summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;font-weight:700;font-size:16.5px;
  position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{padding:0 0 18px;color:var(--text-secondary);font-size:15.5px;max-width:68ch}

/* ── prose ────────────────────────────────────────────────────────────── */
.prose h2{font-size:clamp(22px,3vw,30px);margin-top:36px}
.prose h2:first-child{margin-top:0}
.prose p{margin-top:13px;color:var(--text-secondary);font-size:16px;max-width:70ch}
.prose .ticks{margin-top:16px}

/* ── calculator ───────────────────────────────────────────────────────── */
.calc{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:26px;
  padding:clamp(20px,3vw,30px);box-shadow:0 2px 6px rgba(11,14,9,.04),0 22px 54px rgba(11,14,9,.07)}
.calc .row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--border-subtle)}
.calc .lb{font-weight:700;font-size:15px}
.calc .sb{font-size:12.5px;color:var(--text-secondary);margin-top:2px}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:38px;height:38px;border-radius:50%;border:1px solid var(--border-subtle);
  background:var(--surface-page);cursor:pointer;font-size:17px;font-weight:700}
.stepper button:hover{border-color:var(--text-primary)}
.stepper b{min-width:34px;text-align:center;font-family:CD;font-weight:600;font-size:19px}
.seg{display:flex;gap:3px;background:var(--surface-sunken);border-radius:999px;padding:3px}
.seg button{border:0;background:none;cursor:pointer;border-radius:999px;padding:8px 18px;
  font-weight:700;font-size:14px;color:var(--text-secondary)}
.seg button.on{background:var(--surface-card);color:var(--text-primary);
  box-shadow:0 1px 3px rgba(11,14,9,.12)}
.calc .result{margin-top:22px;padding:24px;border-radius:20px;background:var(--ink-900);
  color:#FAF8F3}
.calc .result .big{font-family:CD;font-weight:600;font-size:clamp(34px,5.4vw,52px);
  letter-spacing:-.04em;color:var(--lime-500);margin-top:6px;line-height:1}
.calc .result .sub{font-size:14px;color:rgba(250,248,243,.7);margin-top:8px}

/* ── waitlist ─────────────────────────────────────────────────────────── */
.wlgrid{display:grid;gap:34px}
@media(min-width:960px){.wlgrid{grid-template-columns:1fr .88fr;gap:56px;align-items:start}}
.wlcard{position:sticky;top:96px;padding:clamp(22px,3vw,30px);border-radius:26px;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  box-shadow:0 22px 54px rgba(11,14,9,.08)}
.wlcard form{display:grid;gap:14px;margin-top:20px}
.wlcard label{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--text-secondary)}
.wlcard input,.wlcard select{height:50px;padding:0 15px;border-radius:14px;
  border:1px solid var(--border-subtle);background:var(--surface-page);font-size:15.5px;
  font-weight:500;color:var(--text-primary)}
.wlcard input:focus,.wlcard select:focus{outline:2px solid var(--lime-500);outline-offset:1px;
  border-color:transparent}
.wlcard .consent{grid-template-columns:auto 1fr;align-items:start;gap:11px;font-weight:500;
  font-size:13px;line-height:1.45}
.wlcard .consent input{width:20px;height:20px;margin-top:1px}
.wlcard .done h3{font-size:24px}
.wlcard .done p{margin-top:10px;color:var(--text-secondary);font-size:15px}

/* ── closing CTA ──────────────────────────────────────────────────────── */
.endcta{position:relative;overflow:hidden;background:var(--ink-900);color:#FAF8F3;
  padding:clamp(58px,8vw,104px) 0;text-align:center}
.endcta .in{position:relative;z-index:1;display:grid;justify-items:center;gap:0}
.endcta h2{color:#FAF8F3;margin-top:20px}
.endcta p{color:rgba(250,248,243,.7);margin-top:16px;max-width:52ch;font-size:16px}
.endcta .row{justify-content:center;margin-top:28px}
.endcta .appicon{width:72px;height:72px;border-radius:20px;background:var(--lime-500);
  display:grid;place-items:center;color:var(--ink-900)}
.endcta .appicon svg{width:42px;height:42px}
/* giant flat shapes bleeding off the edges — no gradients, no shadows */
.endcta .blob{position:absolute;z-index:0;pointer-events:none;opacity:.92}
.endcta .b1{left:-90px;bottom:-70px;width:280px;height:280px;background:var(--lime-500);
  border-radius:50% 50% 50% 4px}
.endcta .b2{right:-70px;top:-80px;width:250px;height:250px;background:var(--lilac-500);
  border-radius:50% 4px 50% 50%}
.endcta .b3{right:9%;bottom:-120px;width:200px;height:200px;background:var(--sun-500);
  border-radius:50%}
@media(max-width:820px){.endcta .blob{opacity:.5;transform:scale(.6)}}
.stores{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.store{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;
  border:1.5px solid rgba(250,248,243,.24);font-size:13.5px;font-weight:700;
  color:rgba(250,248,243,.82)}
.store svg{width:17px;height:17px}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{background:#070906;color:rgba(250,248,243,.66);padding:clamp(44px,5vw,64px) 0 26px}
footer .brand{color:#FAF8F3}
.fgrid{display:grid;gap:30px}
@media(min-width:840px){.fgrid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px}}
.fbrand p{margin-top:14px;font-size:14px;max-width:34ch}
.fbrand .tiny{font-size:12px;color:rgba(250,248,243,.44);margin-top:12px}
footer h4{color:#FAF8F3;margin-bottom:12px}
footer a{display:block;color:rgba(250,248,243,.66);text-decoration:none;font-size:14px;
  padding:5px 0}
footer a:hover{color:#FAF8F3}
.fbot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:38px;
  padding-top:20px;border-top:1px solid rgba(250,248,243,.12);font-size:12.5px;
  color:rgba(250,248,243,.44)}

/* ── sticky device scrollytelling ─────────────────────────────────────── */
.sticky .grid{display:grid;gap:30px;margin-top:34px}
@media(min-width:960px){.sticky .grid{grid-template-columns:1fr .82fr;gap:60px;align-items:start}}
/* The stage only pins once the section top reaches the viewport top, and releases
   when the section ends. Without this padding the FIRST and LAST blocks are centred
   outside that window, so the phone was half off-screen at both ends. */
.blocks{display:grid;gap:clamp(26px,5vw,60px);padding-top:44vh;padding-bottom:50vh}
@media(max-width:959px){.blocks{padding-top:0;padding-bottom:0}}
.blk{opacity:.34;transition:opacity .35s ease}
.blk.active{opacity:1}
@media(max-width:959px){.blk{opacity:1}}
.blk .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--border-subtle);font-family:CD;font-weight:600;font-size:14px;
  color:var(--text-secondary)}
.blk.active .n{background:var(--lime-500);border-color:var(--lime-500);color:var(--ink-900)}
.blk h3{margin-top:14px;font-size:clamp(20px,2.6vw,26px)}
.blk p{margin-top:10px;color:var(--text-secondary);font-size:15.5px;max-width:46ch}
.blk .mob{display:block;margin-top:18px;border-radius:22px;overflow:hidden;max-width:300px;
  border:1px solid var(--border-subtle)}
@media(min-width:960px){.blk .mob{display:none}}
/* The whole phone must be on screen while it is pinned. Driving the size from
   WIDTH (330px) made it 714px tall, which is taller than most laptop viewports, so
   the bottom was cut off. Drive it from HEIGHT instead and let the aspect ratio set
   the width, then centre it in a full-height sticky stage. */
.stage{display:none}
@media(min-width:960px){
  .stage{display:grid;place-items:center;position:sticky;top:0;height:100vh}
}
/* The bezel is a RING drawn outside the box, not a border. With box-sizing:border-box
   an 8px border shrinks the content box to 314x698 (0.4498) while the screenshots are
   390x844 (0.4621), so object-fit:cover would crop ~3% off each side. Drawn outside,
   the element IS the screen and the image lands pixel-exact. */
.phone{position:relative;aspect-ratio:390/844;height:min(70vh,700px);width:auto;
  max-width:100%;margin-inline:auto;
  border-radius:38px;overflow:hidden;background:var(--surface-sunken);
  box-shadow:0 0 0 8px var(--ink-900),0 30px 70px rgba(11,14,9,.22)}
@media(max-width:959px){.phone{height:auto;width:100%;max-width:330px}}
.phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;
  opacity:0;transition:opacity .4s ease}
.phone img.on{opacity:1}

/* ── reveal ───────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,0,0,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .btn:hover,.catcard:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE ANIMATED CITY HERO
   A sticky stage scrubbed by scroll (city.js). The frame keeps the rounded
   shape the photo used to occupy; the scene inside it is the hero now.
   ══════════════════════════════════════════════════════════════════════════ */
.cityscroll{height:460vh;position:relative}
.cityscroll.static{height:auto}
/* Two separate traps here, both of which collapse the stage to zero:
   1. an AUTO grid column sizes to its content, and a width:100% child inside it
      resolves against a width that depends on the child -> minmax(0,1fr) fixes it;
   2. .wrap carries margin:0 auto, and a grid item with AUTO MARGINS does not
      stretch - it shrink-wraps and centres, so its content box was 0 wide. */
.citystick{position:sticky;top:0;height:100vh;display:grid;align-content:center;
  grid-template-columns:minmax(0,1fr);gap:14px;padding:clamp(12px,2vw,24px) 0}
.citystick>.wrap{width:100%}
.cityscroll.static .citystick{position:static;height:auto}

.cityframe{position:relative;border-radius:30px;overflow:hidden;background:var(--ink-bg);
  aspect-ratio:16/9;max-height:min(70vh,660px);margin-inline:auto;width:100%;
  box-shadow:0 30px 80px rgba(11,14,9,.22)}
/* the technical grid, so the plate reads as a map not a picture */
.cityframe::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(rgba(250,248,243,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(250,248,243,.055) 1px,transparent 1px);
  background-size:46px 46px}
/* a lime wash from the lower left, so the plate is lit rather than flat */
.cityframe::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 18% 108%,rgba(200,240,47,.16),transparent 62%)}

.cityart{position:absolute;inset:0;width:100%;height:100%;z-index:1;
  opacity:calc(.25 + .75 * var(--settle,0));
  transform:translateY(calc((1 - var(--settle,0)) * 26px))
            scale(calc(.965 + .035 * var(--settle,0)));
  transform-origin:50% 56%}

/* ── the plate ─────────────────────────────────────────────────────────── */
.cityart .ground{fill:#0E1109}
.cityart .road{stroke:rgba(250,248,243,.17);stroke-width:1.5;stroke-dasharray:7 7}
.cityart .routeline{stroke:var(--lime-500);stroke-width:3.4;stroke-linecap:round;
  stroke-linejoin:round;opacity:.95}

/* a drawn city, not a dark mass: lifted faces plus a lit top edge */
.cityart .bl .f-t{fill:#5A6650}
.cityart .bl .f-l{fill:#2A3122}
.cityart .bl .f-r{fill:#3C4532}
.cityart .bl .f-e{fill:none;stroke:rgba(250,248,243,.26);stroke-width:1.2;
  stroke-linejoin:round;stroke-linecap:round}
/* a visited block takes its category colour */
.cityart .bl.stop .f-t{fill:#6E7A62}
.cityart .bl.stop.on .f-t{fill:var(--sc)}
.cityart .bl.stop.on .f-r{fill:color-mix(in srgb,var(--sc) 55%,#0B0E09)}
.cityart .bl.stop.on .f-l{fill:color-mix(in srgb,var(--sc) 34%,#0B0E09)}
.cityart .bl.stop .f-t,.cityart .bl.stop .f-l,.cityart .bl.stop .f-r{
  transition:fill .34s ease}

/* ── pins ──────────────────────────────────────────────────────────────── */
.cityart .pin .stalk{stroke:rgba(250,248,243,.32);stroke-width:1.6}
.cityart .pin .halo{fill:var(--pc);opacity:0;transform-box:fill-box;transform-origin:center}
.cityart .pin .dot{fill:#0B0E09;stroke:rgba(250,248,243,.28);stroke-width:1.6}
.cityart .pin .pnum{fill:rgba(250,248,243,.5);font-family:CD,sans-serif;font-weight:600;
  font-size:13px}
.cityart .pin.on .dot{fill:var(--pc);stroke:var(--pc)}
.cityart .pin.on .pnum{fill:#0B0E09}
.cityart .pin.on .halo{opacity:.26;animation:pinpop .5s ease}
.cityart .pin .dot,.cityart .pin .pnum,.cityart .pin .halo{transition:fill .3s ease,opacity .3s ease}
@keyframes pinpop{0%{transform:scale(.4);opacity:.5}100%{transform:scale(1);opacity:.26}}

/* ── the rider ─────────────────────────────────────────────────────────── */
.cityart .rider .r-halo{fill:var(--lime-500);opacity:.22}
.cityart .rider .r-dot{fill:var(--lime-500);stroke:#0B0E09;stroke-width:2}

/* ── the HUD ───────────────────────────────────────────────────────────── */
.cityhud{position:absolute;left:0;top:0;z-index:3;padding:clamp(16px,2.4vw,26px);
  color:#FAF8F3;pointer-events:none}
.hudtop{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.hudlbl{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(250,248,243,.56)}
.hudfig{font-family:CD;font-weight:600;font-size:clamp(30px,5vw,56px);letter-spacing:-.04em;
  color:var(--lime-500);line-height:1;font-variant-numeric:tabular-nums}
.hudnote{font-size:clamp(12.5px,1.4vw,15px);color:rgba(250,248,243,.62);margin-top:8px;
  min-height:1.4em}

/* ── receipts ──────────────────────────────────────────────────────────── */
.rcpts{position:absolute;right:clamp(14px,2.4vw,26px);bottom:clamp(44px,6vw,64px);z-index:3;
  display:grid;justify-items:end;gap:8px;pointer-events:none}
.rcpt{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:15px;
  background:rgba(250,248,243,.96);color:#0B0E09;max-width:min(78vw,330px);
  box-shadow:0 14px 36px rgba(11,14,9,.34);
  opacity:0;transform:translateY(16px) scale(.96);transition:opacity .3s ease,transform .3s ease}
.rcpt.on{opacity:1;transform:translateY(0) scale(1)}
/* a filed receipt stays as a thin lime tick in the stack rather than vanishing */
.rcpt.filed{opacity:0;transform:translateY(-10px) scale(.94);height:0;padding:0;margin:0;
  overflow:hidden}
.rcpt .rk{width:30px;height:30px;border-radius:9px;background:var(--rc);flex:0 0 30px}
.rcpt .rt{display:grid;min-width:0}
.rcpt .rt b{font-size:13.5px}
.rcpt .rt span{font-size:11.5px;color:#5C6359}
.rcpt .ra{font-family:CD;font-weight:600;font-size:16px;color:var(--lime-deep);
  white-space:nowrap;margin-left:auto}

/* ── the closing card ──────────────────────────────────────────────────── */
.cityend{position:absolute;inset:0;z-index:4;display:grid;place-content:center;
  text-align:center;gap:10px;padding:24px;
  background:radial-gradient(70% 70% at 50% 50%,rgba(11,14,9,.9),rgba(11,14,9,.72));
  opacity:0;pointer-events:none;transition:opacity .4s ease}
.cityend.on{opacity:1}
.ce-fig{font-family:CD;font-weight:600;font-size:clamp(42px,8vw,86px);letter-spacing:-.045em;
  color:var(--lime-500);line-height:1}
.ce-sub{color:rgba(250,248,243,.78);font-size:clamp(14px,1.8vw,18px);max-width:30ch;
  margin-inline:auto}
.ce-sub b{color:#FAF8F3}

/* ── progress + hint ───────────────────────────────────────────────────── */
.citydots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;
  display:flex;gap:7px}
.citydots i{width:7px;height:7px;border-radius:50%;background:rgba(250,248,243,.26);
  transition:background .3s ease,width .3s ease}
.citydots i.on{background:var(--lime-500);width:20px;border-radius:99px}
.cityhint{justify-self:center;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-secondary);transition:opacity .3s ease}
.cityhint.gone{opacity:0}

@media(max-width:820px){
  .cityscroll{height:380vh}
  .cityframe{aspect-ratio:4/5;max-height:72vh}
  .rcpts{right:10px;left:10px;justify-items:stretch;bottom:38px}
  .rcpt{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .cityscroll{height:auto}
  .citystick{position:static;height:auto}
  .cityart{opacity:1;transform:none}
  .cityart .pin.on .halo{animation:none}
  .rcpt{transition:none}
}

/* the chip rail that follows the city stage */
.hero.herotail{padding:clamp(20px,3vw,34px) 0 clamp(30px,4vw,52px)}
.hero.herotail .herochips{margin-top:0}

/* an ink section running straight into the ink CTA merges into one slab */
section.ink + .endcta{border-top:1px solid rgba(250,248,243,.13)}

/* ══════════════════════════════════════════════════════════════════════════
   WAITLIST — a step-by-step flow, not a form.
   The progress bar, Your 12 slots and the "in reach" figure are the reward for
   answering; they move on every answer.
   ══════════════════════════════════════════════════════════════════════════ */
.wz{border:1px solid var(--border-subtle);border-radius:26px;background:var(--surface-card);
  padding:clamp(20px,3vw,32px);box-shadow:0 22px 54px rgba(11,14,9,.07)}

.wzhead{display:grid;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--border-subtle)}
.wzbarwrap{display:flex;align-items:center;gap:14px}
.wzbar{flex:1;height:8px;border-radius:99px;background:var(--surface-sunken);overflow:hidden}
.wzbar span{display:block;height:100%;width:0;border-radius:99px;background:var(--lime-500);
  transition:width .4s cubic-bezier(.2,0,0,1)}
.wzsteps{font-size:12.5px;font-weight:700;color:var(--text-secondary);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.wzprize{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap}
.wzprize .l{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary)}
.wzprize .v{font-family:CD;font-weight:600;font-size:20px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.wzprize .v.lime{color:var(--lime-deep)}
.wzprize .v b{font-weight:600}

.wzstage{position:relative;padding-top:24px;min-height:300px}
.wzstep{display:none}
.wzstep.on{display:block;animation:wzin .34s cubic-bezier(.2,0,0,1)}
@keyframes wzin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.wzstep h2{margin-top:10px;font-size:clamp(23px,3.4vw,32px)}
.wzstep>.dim{margin-top:10px;font-size:15px;max-width:52ch}

.opts{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.opt{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;
  border:1.5px solid var(--border-subtle);background:var(--surface-page);cursor:pointer;
  font-weight:700;font-size:15px;transition:border-color .16s ease,background .16s ease,
  transform .16s ease}
.opt:hover{border-color:var(--text-primary);transform:translateY(-1px)}
.opt.on{border-color:var(--ink-900);background:var(--ink-900);color:#FAF8F3}
.opt.cat i{width:11px;height:11px;border-radius:50%;background:var(--c);flex:0 0 11px}
.opt.cat.on{background:var(--c);border-color:var(--c);color:var(--ink-900)}
.opt.cat.on i{background:var(--ink-900)}

.fields{display:grid;gap:14px;margin-top:22px}
.fields label{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--text-secondary)}
.fields input{height:52px;padding:0 15px;border-radius:14px;border:1.5px solid var(--border-subtle);
  background:var(--surface-page);font-size:16px;font-weight:500;color:var(--text-primary)}
.fields input:focus{outline:2px solid var(--lime-500);outline-offset:1px;border-color:transparent}

.wzsummary{display:grid;gap:1px;margin-top:20px;border-radius:16px;overflow:hidden;
  background:var(--border-subtle)}
.wzsummary .sr{display:flex;justify-content:space-between;gap:16px;padding:13px 16px;
  background:var(--surface-page);font-size:14.5px}
.wzsummary .sr span{color:var(--text-secondary)}
.wzsummary .sr b{text-align:right;min-width:0}
.consent{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:11px;margin-top:18px;
  font-size:13.5px;line-height:1.45;color:var(--text-secondary)}
.consent input{width:20px;height:20px;margin-top:1px}

.wznav{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--border-subtle)}
.wznav #wzNext{margin-left:auto}
.wznav .btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn-skip{border:0;background:none;cursor:pointer;font-size:14px;font-weight:700;
  color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px}

/* ── the payoff ────────────────────────────────────────────────────────── */
.wzdone{text-align:center;padding:10px 0 4px;position:relative}
.wzdone h2{margin-top:8px}
.wzbigfig{font-family:CD;font-weight:600;font-size:clamp(42px,8vw,72px);letter-spacing:-.045em;
  color:var(--lime-deep);line-height:1;margin-top:18px;font-variant-numeric:tabular-nums}
.wzdone>.dim{max-width:46ch;margin:12px auto 0;font-size:15px}
.wzslots{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.wzslots i{width:26px;height:26px;border-radius:9px;background:var(--surface-sunken);
  border:1.5px dashed var(--border-subtle)}
.wzslots i.on{background:var(--c);border:0;animation:slotpop .4s backwards}
.wzslots i.on:nth-child(n){animation-delay:calc(var(--d,0) * 1ms)}
@keyframes slotpop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.wzdone .row{justify-content:center}

@media(prefers-reduced-motion:reduce){
  .wzstep.on{animation:none}
  .wzslots i.on{animation:none}
  .wzbar span{transition:none}
}

/* ── qualification flows (partner / work / invest) ────────────────────────
   Same wizard chrome as the waitlist; the payback is a fit meter instead of
   Your 12, because these audiences are deciding whether we are worth their
   time rather than buying something. */
.wzprize .meter{display:block;width:120px;height:8px;border-radius:99px;
  background:var(--surface-sunken);overflow:hidden}
.wzprize .meter i{display:block;height:100%;width:0;border-radius:99px;
  background:var(--lime-500);transition:width .45s cubic-bezier(.2,0,0,1)}
.wzprize .v{font-family:SA;font-weight:700;font-size:14px;letter-spacing:0}

.wzstep textarea{padding:13px 15px;border-radius:14px;border:1.5px solid var(--border-subtle);
  background:var(--surface-page);font-size:15.5px;font-weight:500;color:var(--text-primary);
  resize:vertical;min-height:110px}
.wzstep textarea:focus{outline:2px solid var(--lime-500);outline-offset:1px;
  border-color:transparent}

/* the CV field: a real input, hidden behind something worth clicking */
.filelab .drop{display:grid;gap:4px;padding:20px;border-radius:16px;cursor:pointer;
  border:1.5px dashed var(--border-subtle);background:var(--surface-page);text-align:center}
.filelab .drop:hover{border-color:var(--text-primary)}
.filelab .drop b{font-size:15px;color:var(--text-primary)}
.filelab .drop span{font-size:12.5px;color:var(--text-secondary);font-weight:500}

.wztier{margin:18px auto 0;max-width:46ch;padding:20px;border-radius:20px;
  background:var(--surface-sunken);display:grid;gap:7px;text-align:center}
.wztier b{font-family:CD;font-weight:600;font-size:22px;letter-spacing:-.02em}
.wztier span{font-size:15px;color:var(--text-secondary)}
.legalnote{max-width:68ch;margin:20px auto 0;font-size:12.5px;line-height:1.55;
  text-align:center}

/* The lime-ground override (accent -> white) must stop at a WHITE CARD sitting on
   that ground, or the mark's accent becomes white-on-white and the mark reads as a
   solid dark blob. Inside a white surface the accent is lime again. */
section.lime .st svg [fill="var(--lime-500)"],
section.lime .wcard svg [fill="var(--lime-500)"],
section.lime .sidecard svg [fill="var(--lime-500)"],
section.lime .statband svg [fill="var(--lime-500)"],
section.lime .note-panel svg [fill="var(--lime-500)"],
.pagehead .statband svg [fill="var(--lime-500)"]{fill:var(--lime-500)}
section.lime .st svg [stroke="var(--lime-500)"],
section.lime .wcard svg [stroke="var(--lime-500)"],
section.lime .sidecard svg [stroke="var(--lime-500)"],
section.lime .statband svg [stroke="var(--lime-500)"],
.pagehead .statband svg [stroke="var(--lime-500)"]{stroke:var(--lime-500)}

/* ── address search (partner flow) ───────────────────────────────────────── */
.addr{display:grid;gap:18px}
.addrsearch{display:grid;gap:6px;font-size:13px;font-weight:700;
  color:var(--text-secondary)}
/* the dropdown anchors to the input, not the whole label — anchored to the label it
   covered the source note and the next field's caption */
.searchfield{position:relative;display:block}
.searchwrap{display:flex;align-items:center;gap:10px;height:54px;padding:0 16px;
  border-radius:14px;border:1.5px solid var(--border-subtle);background:var(--surface-page)}
.searchwrap:focus-within{outline:2px solid var(--lime-500);outline-offset:1px;
  border-color:transparent}
.searchwrap svg{width:18px;height:18px;color:var(--text-secondary);flex:0 0 18px}
.searchwrap input{flex:1;border:0;background:none;font-size:16px;font-weight:500;
  color:var(--text-primary);outline:none}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;margin:0;
  padding:6px;list-style:none;background:var(--surface-card);border-radius:16px;
  border:1px solid var(--border-subtle);box-shadow:0 18px 44px rgba(11,14,9,.16);
  max-height:290px;overflow:auto}
.suggest li{display:grid;gap:2px;padding:11px 13px;border-radius:11px;cursor:pointer}
.suggest li:hover,.suggest li:focus{background:var(--surface-sunken)}
.suggest li b{font-size:15px;font-weight:700;color:var(--text-primary)}
.suggest li span{font-size:12.5px;color:var(--text-secondary);font-weight:500}
.lbline{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap}
.srcnote{font-size:11.5px;font-weight:600;color:var(--text-secondary);text-transform:none;
  letter-spacing:0}
.srcnote.warn{color:var(--sun-500)}

/* a follow-up field opened by a "something else" choice */
.reveal{margin-top:16px;animation:wzin .26s cubic-bezier(.2,0,0,1)}
.reveal label{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--text-secondary)}
.reveal input{height:52px;padding:0 15px;border-radius:14px;
  border:1.5px solid var(--border-subtle);background:var(--surface-page);font-size:16px;
  font-weight:500;color:var(--text-primary)}
.reveal input:focus{outline:2px solid var(--lime-500);outline-offset:1px;border-color:transparent}
@media(prefers-reduced-motion:reduce){.reveal{animation:none}}
.acctcta{text-align:center;margin:18px auto 0;max-width:640px;font-size:14px;color:var(--ink-500,#6B6F63)}

/* ── 21 Oct 2026: home below the city, in the 16 Oct pitch-deck look (Samuel's 17 Oct brief) ──────────
   Full-bleed photography, colour bands (lime, lilac, sun, ink), phones in perspective scrolling sideways,
   left/right splits, and one 3D moment: the pass turning with scroll. Solid fills, no blurred shadows. */
.hl{background:var(--ink-900);color:var(--lime-500);padding:0 .18em;border-radius:.18em}
.bleedsec{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;padding:0;overflow:hidden;color:#FAF8F3}
.bleedimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bleedsec .wrap{position:relative;width:100%;padding-bottom:clamp(28px,5vw,64px)}
.veilcard{max-width:560px;background:var(--ink-900);border-radius:32px;padding:clamp(24px,3.4vw,40px)}
.veilcard .eyebrow{color:var(--lime-500)}.veilcard h2{color:#FAF8F3;margin-top:12px}.veilcard p{color:rgba(250,248,243,.78);margin-top:14px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.plan{background:#FFFFFF;border-radius:28px;padding:26px;border:1px solid rgba(11,14,9,.12)}
.plan span{display:block;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(11,14,9,.6)}
.plan b{display:block;font-family:CD;font-weight:600;font-size:clamp(36px,4.6vw,56px);letter-spacing:-.03em;margin-top:10px;color:var(--ink-900)}
.plan i{font-style:normal;color:rgba(11,14,9,.65)}.plan.on{background:var(--ink-900);border-color:var(--ink-900)}
.plan.on span,.plan.on i{color:rgba(250,248,243,.7)}.plan.on b{color:var(--lime-500)}
section.lime .statband{margin-top:clamp(28px,4vw,48px)}

section.railsec{padding:0;overflow:clip}
.railpin{padding:clamp(48px,7vw,96px) 0;overflow:hidden}
.railhead{margin-bottom:18px}
.railtrack{display:flex;gap:clamp(22px,3vw,44px);padding:20px max(20px,calc((100vw - 1180px)/2 + 20px)) 30px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;perspective:1400px}
.railtrack::-webkit-scrollbar{display:none}
.rphone{flex:0 0 auto;width:min(230px,64vw);scroll-snap-align:center;margin:0}
.phonef{border-radius:40px;overflow:hidden;border:9px solid #1C2118;background:#1C2118}
.phonef img{width:100%;display:block;border-radius:31px}
.rphone .phonef{transform:rotateY(-14deg) rotateX(4deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.rphone:nth-child(even) .phonef{transform:rotateY(14deg) rotateX(4deg)}
.rphone:hover .phonef{transform:none}
.rphone figcaption{margin-top:18px}.rphone figcaption b{display:block;font-family:CD;font-weight:600;font-size:20px;color:#FAF8F3}
.rphone figcaption span{font-size:14.5px;color:rgba(250,248,243,.66)}
@media (min-width:900px){
  .railsec.pinned{height:var(--railh,280vh)}
  .railsec.pinned .railpin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:96px 0 16px}
  .railsec.pinned .rphone{width:min(220px,calc((100vh - 330px) * .47))}
  .railsec.pinned .railtrack{overflow:visible;scroll-snap-type:none;will-change:transform}
}

.passsec{background:var(--surface-sunken)}
.stage3d{perspective:1300px;display:grid;place-items:center;min-height:420px}
.card3d{width:min(420px,82vw);aspect-ratio:1.6;position:relative;transform-style:preserve-3d;transform:rotateY(-18deg) rotateX(8deg)}
.face{position:absolute;inset:0;border-radius:30px;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.face.front{background:var(--lime-500);color:var(--ink-900)}
.face.front img{height:40px;width:auto;align-self:flex-start}
.face.front span{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.face.front b{font-family:CD;font-weight:600;font-size:30px;letter-spacing:-.02em}
.face.front .dot{position:absolute;right:26px;top:26px;width:34px;height:34px;border-radius:50%;background:var(--ink-900)}
.face.back{background:var(--ink-900);color:#FAF8F3;transform:rotateY(180deg);align-items:center;justify-content:center;gap:10px;text-align:center}
.face.back .qr{width:44%;aspect-ratio:1;border-radius:14px;background:
  repeating-conic-gradient(#FAF8F3 0 25%,var(--ink-900) 0 50%) 0 0/22% 22%;border:10px solid #FAF8F3}
.face.back b{font-family:CD;font-weight:600;font-size:22px;letter-spacing:.06em}.face.back span{font-size:13px;opacity:.7}
@media (prefers-reduced-motion:reduce){.card3d{transform:rotateY(-10deg)!important}.rphone .phonef{transform:none}}

.lilacsec{background:#B8A6FF;color:var(--ink-900)}
.lilacsec .eyebrow{color:rgba(11,14,9,.62)}.lilacsec .lede{color:rgba(11,14,9,.76)}
.lilacsec .btn{background:var(--ink-900);color:#FAF8F3}
.swapph{display:grid;place-items:center}.swapph .phonef{width:min(250px,60vw);border-color:var(--ink-900)}.swapph .phonef img{max-height:470px;object-fit:cover;object-position:top}
.phonef.tilt{transform:rotate(5deg)}

.bizsec{padding:0;background:var(--ink-bg);color:#FAF8F3}
.bizgrid{display:grid;grid-template-columns:1fr 1fr;min-height:640px}
.bizimg img{width:100%;height:100%;object-fit:cover}
.bizcopy{padding:clamp(40px,6vw,80px);display:flex;flex-direction:column;justify-content:center}
.bizcopy .eyebrow{color:var(--lime-500)}
.bizcopy .zero{font-family:CD;font-weight:600;font-size:clamp(110px,14vw,190px);line-height:.85;color:var(--lime-500);letter-spacing:-.05em;margin-top:10px}
.bizcopy h2{color:#FAF8F3;margin-top:8px}.bizcopy .ticks li{color:rgba(250,248,243,.8)}
.btn.lime{background:var(--lime-500);color:var(--ink-900)}.bizcopy .btn{align-self:flex-start}
@media (max-width:820px){.bizgrid{grid-template-columns:1fr}.bizimg{height:300px}}

.sunsec{background:#FF7A2F;color:var(--ink-900)}
.sunsec .eyebrow{color:rgba(11,14,9,.62)}.sunsec .lede{color:rgba(11,14,9,.8)}.sunsec .btn{background:var(--ink-900);color:#FAF8F3}
.gtiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gtiles div{background:var(--ink-900);color:var(--lime-500);border-radius:24px;padding:28px 22px;font-family:CD;font-weight:600;font-size:clamp(20px,2.2vw,28px);min-height:130px;display:flex;align-items:flex-end}

/* about: mission, vision, team */
.mvband{padding-bottom:0}
.mvgrid{display:grid;grid-template-columns:1fr 1.25fr;gap:16px}
.mvcard{border-radius:32px;padding:clamp(24px,3.4vw,40px);color:var(--ink-900)}
.mvcard.sun{background:#FF7A2F}.mvcard.lilac{background:#B8A6FF}
.mvcard .eyebrow{color:rgba(11,14,9,.62)}.mvcard h2{margin-top:10px;color:var(--ink-900)}.mvcard p{margin-top:14px;color:rgba(11,14,9,.8)}
.gchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.gchips span{background:var(--ink-900);color:var(--lime-500);border-radius:999px;padding:9px 16px;font-weight:700;font-size:14px}
.teamgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.tmc{background:#FFFFFF;border:1px solid var(--border-subtle);border-radius:24px;padding:20px;display:grid;grid-template-columns:52px 1fr;column-gap:14px;align-items:center}
.tmc i{grid-row:span 3;width:52px;height:52px;border-radius:16px;background:var(--lime-500);display:grid;place-items:center;font-style:normal;font-family:CD;font-weight:600;color:var(--ink-900)}
.tmc b{font-size:16px}.tmc em{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#3E5A00}.tmc span{font-size:13.5px;color:var(--text-secondary)}
.tmc:first-child{background:var(--ink-900);border-color:var(--ink-900);color:#FAF8F3}.tmc:first-child em{color:var(--lime-500)}.tmc:first-child span{color:rgba(250,248,243,.7)}
@media (max-width:820px){.mvgrid,.teamgrid{grid-template-columns:1fr}.plans{grid-template-columns:1fr 1fr}}
.passsec .split,.lilacsec .split,.sunsec .split,section.lime .split{align-items:center}
.split>*{min-width:0}
@media (max-width:600px){.plans{grid-template-columns:1fr 1fr;gap:10px}.plan{padding:18px}.plan b{font-size:clamp(26px,8vw,40px)}
  .navcta .btn.sm{white-space:nowrap;padding-inline:14px}}

/* ── 21 Oct: the interactive phone (replaces the sideways rail) ── */
.appdemo .demogrid{display:grid;grid-template-columns:1fr auto;gap:clamp(30px,6vw,90px);align-items:center}
.democopy h2{color:#FAF8F3}
.demotabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;max-width:560px}
.dtab{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;border:1px solid rgba(250,248,243,.18);background:transparent;color:rgba(250,248,243,.78);font-weight:500;font-size:16px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.dtab i{width:10px;height:10px;border-radius:50%;opacity:.55}
.dtab:hover{border-color:rgba(250,248,243,.4);color:#FAF8F3}
.dtab.on{background:rgba(200,240,47,.12);border-color:var(--lime-500);color:var(--lime-500)}.dtab.on i{opacity:1}
.dtab:focus-visible,.dnav:focus-visible{outline:2px solid var(--lime-500);outline-offset:3px}
.demodesc{margin-top:26px;font-size:19px;line-height:1.55;color:rgba(250,248,243,.75)!important;max-width:460px;min-height:3.2em}
.dphone{width:min(320px,82vw,calc((100vh - 150px) * .44));border-radius:52px;background:#1C2118;border:3px solid #2C3326;padding:12px;position:relative}
.dbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 4px 12px}
.dnav{width:40px;height:40px;border-radius:50%;border:0;background:rgba(250,248,243,.1);color:#FAF8F3;display:grid;place-items:center;cursor:pointer}
.dnav:hover{background:rgba(250,248,243,.2)}
.dpill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:rgba(250,248,243,.1);color:#FAF8F3;font-size:14.5px}
.dpill i{width:10px;height:10px;border-radius:50%}
.dscreen{position:relative;aspect-ratio:560/1212;border-radius:38px;overflow:hidden;background:#0B0E09;cursor:pointer;touch-action:pan-y}
.dscreen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateX(18px) scale(.985);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.dscreen img.on{opacity:1;transform:none}
.ddots{display:flex;justify-content:center;gap:6px;padding:12px 0 2px}
.ddots span{width:6px;height:6px;border-radius:99px;background:rgba(250,248,243,.25);transition:width .25s,background .25s}
.ddots span.on{width:20px;background:var(--lime-500)}
@media (max-width:860px){.appdemo .demogrid{grid-template-columns:1fr}.demophone{display:flex;justify-content:center}.demotabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-20px;padding-right:20px}.demotabs::-webkit-scrollbar{display:none}.dtab{flex:0 0 auto}}
@media (prefers-reduced-motion:reduce){.dscreen img{transition:none;transform:none}}