/* ═══════════════════════════════════════════════════════════════════════════
   GRAYMAT — the light system (concept/free-light)

   One stylesheet for every page. Built after wio.io/business, which the founder
   named as the reference: a white page, one idea per section, an uppercase title,
   one sentence, one button, then cards that mix a real photograph, a real
   product screen and a plain line of text.

   Rules
   · White and a soft warm grey are the grounds. Ink is near-black. Signal Lime
     is the one accent, used as a FILL (buttons, the money highlight) — never as
     text on white. Lime as text uses --lime-ink, which passes contrast.
   · One dark band per page at most. It is the hard stop, not the theme.
   · Few words. A section is a title, a sentence and a button.
   · Nothing is hidden at rest. No scroll-triggered reveals: the page is complete
     with JavaScript off, and a thumbnail or a shared link sees everything.
   · Live and coming are visibly separated: a feed-backed chip says live,
     shadow or not available; anything not built carries an amber chip.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;
  --bg:#FFFFFF;
  --soft:#F4F4F1;
  --soft-2:#EBEBE5;
  --ink:#101110;
  --ink-2:#2B2D2A;
  --muted:#60635C;
  --line:#E2E2DB;
  --lime:#C8F04B;
  --lime-soft:#EEF9CF;
  --lime-ink:#4A6300;
  --amber:#8A5A00;
  --amber-soft:#FFF1D6;
  --red:#B4432F;
  --dark:#101110;
  --sans:'Space Grotesk','Space Grotesk Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif','Instrument Serif Fallback',Georgia,serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,monospace;
  --maxw:1240px;
  --r-lg:22px;
  --r-md:14px;
  --nav-h:68px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1;text-wrap:balance}
b,strong{font-weight:600}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(18px,4vw,44px)}
.em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.lime-ink{color:var(--lime-ink)}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
::selection{background:var(--lime);color:var(--ink)}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;
  border-radius:100px;background:var(--lime);color:var(--ink);font:600 14.5px/1 var(--sans);letter-spacing:.005em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(16,17,16,.14)}
.btn.dark{background:var(--ink);color:#fff}
.btn.ghost{background:transparent;border-color:rgba(16,17,16,.32);font-weight:500}
.btn.ghost:hover{border-color:var(--ink)}
.btn.white{background:#fff;color:var(--ink)}
.btn.sm{min-height:38px;padding:0 16px;font-size:13.5px}
.btn .arr{transition:transform .16s ease}
.btn:hover .arr{transform:translateX(2px)}
.link{font-weight:500;text-decoration:none;border-bottom:1px solid rgba(16,17,16,.3);padding-bottom:1px}
.link:hover{border-color:var(--ink)}
.ctas{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ── chips (state) ─────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:6px 9px;border-radius:100px;background:var(--soft);color:var(--muted);white-space:nowrap}
.chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.chip.live{background:var(--lime-soft);color:var(--lime-ink)}
.chip.shadow,.chip.soon{background:var(--amber-soft);color:var(--amber)}
.chip.na{background:var(--soft);color:var(--muted)}
.chip.free{background:var(--ink);color:#fff}
.chip.free::before{background:var(--lime);opacity:1}
.chip.plain::before{display:none}
.chips{display:flex;gap:6px;flex-wrap:wrap}

/* ── nav ───────────────────────────────────────────────────────────────── */
/* The frosted background lives on a pseudo-element, NOT on .nav itself: a
   backdrop-filter on .nav would make the header the containing block for the
   fixed mobile menu panel inside it, squeezing the panel to the header's
   69px height (the bug fixed 1 Oct 2026). */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;border-bottom:1px solid var(--line);isolation:isolate}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.nav-in{display:flex;align-items:center;gap:clamp(12px,2.4vw,30px);height:var(--nav-h)}
.mark{display:inline-flex;align-items:baseline;font:400 22px/1 var(--serif);letter-spacing:.14em;text-decoration:none;color:var(--ink);white-space:nowrap}
.mark em{font-style:normal;color:var(--lime-ink);letter-spacing:0}
.nav-links{display:flex;align-items:center;gap:clamp(10px,1.8vw,24px);margin-left:auto;font-size:14.5px}
.nav-links > a,.nav-links summary{color:var(--ink-2);text-decoration:none;padding:8px 0;cursor:pointer}
.nav-links > a:hover,.nav-links summary:hover{color:var(--ink)}
.nav-links > a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-login{font-size:14px;text-decoration:none;color:var(--ink-2);padding:8px 4px}
.free-pill{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  background:var(--lime-soft);color:var(--lime-ink);padding:7px 10px;border-radius:100px;text-decoration:none}

/* the product dropdown */
.drop{position:relative}
.drop summary{list-style:none;display:inline-flex;align-items:center;gap:6px}
.drop summary::-webkit-details-marker{display:none}
.drop summary::after{content:'';width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.7}
.drop-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:min(640px,92vw);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 24px 60px rgba(16,17,16,.14);
  padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.drop-panel a{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:11px 12px;border-radius:10px;text-decoration:none}
.drop-panel a:hover{background:var(--soft)}
.drop-panel b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.drop-panel span{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:2px}
.drop-panel .all{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-top:4px;padding:12px;
  background:var(--soft);border-radius:10px}
.drop-panel .all b{display:inline}
.ico{width:34px;height:34px;border-radius:10px;background:var(--soft);display:grid;place-items:center;color:var(--ink)}
.ico svg{width:19px;height:19px}

/* mobile menu */
.menu-btn{display:none}
@media(max-width:980px){
  .nav-links,.nav-login{display:none}
  .menu-btn{display:block;margin-left:auto}
  .menu-btn summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line)}
  .menu-btn summary::-webkit-details-marker{display:none}
  .menu-btn summary span{display:block;width:18px;height:2px;background:var(--ink);box-shadow:0 6px 0 var(--ink),0 -6px 0 var(--ink)}
  .menu-panel{position:fixed;left:0;right:0;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));bottom:0;background:#fff;overflow:auto;
    padding:18px clamp(18px,4vw,44px) calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
  .menu-panel a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);
    text-decoration:none;font-size:17px;font-weight:500}
  .menu-panel .grp{font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:22px 0 4px}
  .menu-panel .btn{width:100%;margin-top:22px;border-bottom:0;justify-content:center}
  .nav-right .btn{display:none}
}
@media(min-width:981px){.menu-btn{display:none!important}}

/* ── page sections ─────────────────────────────────────────────────────── */
.sec{padding-block:clamp(52px,8vh,104px)}
.sec.tight{padding-block:clamp(36px,6vh,72px)}
.soft{background:var(--soft)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(14px,3vw,48px);align-items:end;margin-bottom:clamp(26px,4.4vh,48px)}
.sec-head h2,.h2{font-size:clamp(28px,4vw,52px);text-transform:uppercase;letter-spacing:-.03em;max-width:18ch}
.sec-head .r{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.sec-head p,.lede{color:var(--muted);font-size:clamp(15px,1.25vw,17px);line-height:1.55;max-width:44ch}
.sec-head.center{grid-template-columns:1fr;justify-items:center;text-align:center}
.sec-head.center h2{max-width:22ch}
.sec-head.center .r{align-items:center}
@media(max-width:820px){.sec-head{grid-template-columns:1fr}}

/* ── home hero ─────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(34px,6vh,72px) clamp(36px,6vh,72px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero h1{font-size:clamp(44px,7.4vw,104px);text-transform:uppercase;letter-spacing:-.045em;line-height:.93}
.hero h1 .lo{display:block;text-align:right;margin-top:clamp(10px,2.4vh,28px);text-transform:none}
.hero h1 .lo .em{color:var(--lime-ink)}
.hero .lede{margin-top:clamp(20px,3vh,32px);max-width:42ch;font-size:clamp(16px,1.35vw,19px)}
.hero .lede b{color:var(--ink);font-weight:600}
.hero .ctas{margin-top:24px}
.hero-photo{position:relative}
.arch{border-radius:260px 260px var(--r-lg) var(--r-lg);overflow:hidden;background:linear-gradient(180deg,#EEF9CF 0%,#E3EAD3 100%);aspect-ratio:1/1.04}
.arch img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;mix-blend-mode:multiply}
.hero-note{margin-top:22px;display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted)}
.hero-note b{color:var(--ink);font-weight:600}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero h1 .lo{text-align:left;margin-top:6px}
  .arch{border-radius:200px 200px var(--r-lg) var(--r-lg)}
}

/* floating cards over a photo (Wio's balance cards) */
.float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 22px 50px rgba(16,17,16,.18);padding:16px 18px}
.float .k{font:600 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.float .v{font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:-.04em;line-height:1;margin-top:6px;font-variant-numeric:tabular-nums}
.float .f{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.45}
.float.bill{left:-7%;bottom:7%;width:min(300px,82%)}
.float.tag{right:-4%;top:9%;padding:12px 14px}
.bill-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:7px 0;border-bottom:1px dotted var(--line)}
.bill-row span{color:var(--muted)}
.bill-row b{font-variant-numeric:tabular-nums}
.bill-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:10px;border-top:2px solid var(--ink)}
.bill-total span{font-weight:600}
.bill-total b{font-size:26px;letter-spacing:-.04em;background:var(--lime);padding:2px 10px;border-radius:8px}
@media(max-width:900px){
  .float{position:static;box-shadow:0 14px 34px rgba(16,17,16,.14)}
  .float.bill{width:auto;margin:-48px 14px 0;position:relative}
  .float.tag{display:none}
}

/* ── sub-page hero ─────────────────────────────────────────────────────── */
.phero{padding-block:clamp(38px,7vh,88px) clamp(30px,5vh,60px)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center}
.phero .kick{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px}
.phero h1{font-size:clamp(38px,6vw,80px);text-transform:uppercase;letter-spacing:-.04em;line-height:.95;max-width:13ch}
.phero h1 .em{text-transform:none;color:var(--lime-ink)}
.phero .lede{margin-top:clamp(18px,3vh,28px);max-width:40ch;font-size:clamp(16px,1.3vw,18.5px)}
.phero .ctas{margin-top:24px}
.phero-media{position:relative}
.phero-media img{width:100%;aspect-ratio:16/10.5;object-fit:cover;border-radius:var(--r-lg);background:var(--soft)}
.phero.solo .phero-grid{grid-template-columns:1fr}
.phero.solo h1{max-width:16ch}
@media(max-width:900px){.phero-grid{grid-template-columns:1fr}}

/* ── capability rail ───────────────────────────────────────────────────── */
.rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.rail.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;
  text-decoration:none;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;min-width:0}
a.tile:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(16,17,16,.08);border-color:#d3d3cb}
.tile .ico{width:44px;height:44px;border-radius:12px;background:var(--soft)}
.tile .ico svg{width:22px;height:22px}
.soft .tile .ico{background:var(--soft)}
.tile h3{font-size:19px;letter-spacing:-.02em;line-height:1.15}
.tile p{font-size:14px;color:var(--muted);line-height:1.5}
.tile .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:6px}
.tile .go{font-size:13px;font-weight:600;color:var(--ink)}
@media(max-width:1060px){.rail{grid-template-columns:repeat(2,minmax(0,1fr))}.rail.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.rail,.rail.three{grid-template-columns:1fr}}

/* ── module cards (inside an area page) ────────────────────────────────── */
.mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mod{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px 20px 18px;display:flex;flex-direction:column;gap:9px;min-width:0}
.soft .mod{border-color:transparent}
.mod h3{font-size:17.5px;letter-spacing:-.02em;line-height:1.2}
.mod p{font-size:14px;color:var(--muted);line-height:1.5}
.mod .chips{margin-top:auto;padding-top:6px}
@media(max-width:960px){.mods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.mods{grid-template-columns:1fr}}

/* ── bento ─────────────────────────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line);min-width:0}
.soft .card{border-color:transparent}
.card.photo{background:var(--dark);border:0;min-height:300px}
.card.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card.photo .cap{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;color:#fff;
  background:linear-gradient(to top,rgba(16,17,16,.84),rgba(16,17,16,0))}
.card.photo .cap b{display:block;font-size:16px;letter-spacing:-.01em}
.card.photo .cap span{display:block;font-size:13px;opacity:.86;margin-top:3px}
.card.text{padding:24px;display:flex;flex-direction:column;gap:10px}
.card.text h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.03em;line-height:1.1}
.card.text p{font-size:14.5px;color:var(--muted)}
.card.text .big{font-size:clamp(36px,4.4vw,60px);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.card.lime{background:var(--lime);border-color:var(--lime)}
.card.lime p{color:var(--ink-2)}
.card.inkc{background:var(--dark);border-color:var(--dark);color:#fff}
.card.inkc p{color:#B6B9B0}
.card.shot{padding:14px;background:var(--soft-2);border:0}
.card.shot img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:#fff}
.card.shot .cap2{padding:12px 4px 2px;font-size:13px;color:var(--muted)}
.card.shot .cap2 b{color:var(--ink)}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}
.r2{grid-row:span 2}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.s2,.s3,.s4{grid-column:span 2}.s1{grid-column:span 1}.r2{grid-row:auto}.card.photo{min-height:260px}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.s1,.s2,.s3,.s4,.s6{grid-column:auto}}

/* ── steps (a real sequence) ───────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,28px);counter-reset:s}
.step{counter-increment:s;border-top:2px solid var(--ink);padding-top:18px}
.step::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--lime);
  font:700 14px/1 var(--sans);margin-bottom:14px}
.step h3{font-size:clamp(18px,1.8vw,22px);letter-spacing:-.02em;line-height:1.2}
.step p{margin-top:8px;font-size:14.5px;color:var(--muted);max-width:32ch}
@media(max-width:780px){.steps{grid-template-columns:1fr}}

/* the three layers of one order (recorded → verified → settled) */
.layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,28px)}
.layer{border-top:2px solid var(--ink);padding-top:16px}
.layer time{display:block;font:500 12px/1.4 var(--mono);color:var(--muted)}
.layer h3{font-size:clamp(19px,2vw,24px);margin-top:8px}
.layer .amt{display:inline-block;margin-top:12px;font-size:clamp(21px,2.4vw,28px);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.layer.gate .amt{background:var(--lime);padding:3px 10px;border-radius:7px}
.layer.ver .amt{box-shadow:inset 0 0 0 2px var(--lime-ink);padding:3px 10px;border-radius:7px}
.layer p{margin-top:10px;font-size:14px;color:var(--muted);max-width:30ch}
@media(max-width:780px){.layers{grid-template-columns:1fr}}

/* ── stats ─────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.6vw,32px)}
.stat{border-top:1px solid var(--line);padding-top:16px;min-width:0}
.stat b{display:block;font-size:clamp(26px,3vw,40px);font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.45}
.stat.hl b{display:inline-block;background:var(--lime);padding:2px 10px;border-radius:8px}
.stamp{margin-top:16px;font:500 11px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* a bar measured against a whole */
.meter{height:12px;border-radius:99px;background:var(--soft-2);overflow:hidden;position:relative}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--lime);border-radius:99px}
.meter i.hatch{background:repeating-linear-gradient(135deg,rgba(16,17,16,.55) 0 4px,rgba(16,17,16,.2) 4px 8px)}

/* ── big statement band (the one dark moment) ──────────────────────────── */
.band{background:var(--dark);color:#fff}
.band .sec-head p,.band .lede{color:#B6B9B0}
.band h2 .em{color:var(--lime)}
.band .stat{border-color:rgba(255,255,255,.2)}
.band .stat span{color:#B6B9B0}
.band .stat.hl b{color:var(--ink)}
.band .stamp{color:#9DA096}
.band .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}

/* the lime CTA band */
.cta-band{background:var(--lime);border-radius:var(--r-lg);padding:clamp(30px,5vw,64px);display:grid;
  grid-template-columns:minmax(0,1.3fr) auto;gap:22px;align-items:center}
.cta-band h2{font-size:clamp(28px,4vw,54px);text-transform:uppercase;letter-spacing:-.035em;max-width:16ch}
.cta-band p{margin-top:12px;font-size:16px;color:var(--ink-2);max-width:44ch}
@media(max-width:760px){.cta-band{grid-template-columns:1fr}}

/* ── founder note ──────────────────────────────────────────────────────── */
.fnote{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(22px,4vw,64px);align-items:center}
.portrait-soft{border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,var(--soft) 0%,var(--soft-2) 100%)}
.portrait-soft{max-width:440px}
.portrait-soft img{width:100%;aspect-ratio:1/1.12;object-fit:cover;object-position:50% 8%;mix-blend-mode:multiply}
.fnote blockquote{margin:0;font-size:clamp(24px,3vw,40px);line-height:1.15;letter-spacing:-.03em;font-weight:500;text-wrap:balance}
.fnote blockquote .em{color:var(--lime-ink)}
.fnote .by{margin-top:22px;display:flex;align-items:center;gap:14px;font-size:14px;color:var(--muted)}
.fnote .by b{color:var(--ink);display:block;font-size:15px}
.fnote .ctas{margin-top:26px}
@media(max-width:860px){.fnote{grid-template-columns:1fr}.portrait-soft img{aspect-ratio:1/1;max-height:460px}}

/* ── the price comparison ──────────────────────────────────────────────── */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vs{border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:12px}
.vs.them{background:#fff;border:1px solid var(--line)}
.vs.us{background:var(--dark);color:#fff}
.vs .who{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vs.us .who{color:#B6B9B0}
.vs .price{font-size:clamp(40px,5.6vw,76px);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.vs.them .price{color:var(--muted);text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--red)}
.vs.us .price{color:var(--lime)}
.vs ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;font-size:14.5px}
.vs li{display:flex;gap:10px;align-items:baseline}
.vs li::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--line);transform:translateY(-1px)}
.vs.us li::before{background:var(--lime)}
.vs.them li{color:var(--muted)}
.vs .fine{margin-top:auto;font-size:12.5px;color:var(--muted)}
.vs.us .fine{color:#9DA096}
@media(max-width:760px){.versus{grid-template-columns:1fr}}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;
  padding:20px 0;font-size:clamp(17px,1.6vw,20px);font-weight:500;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:none;width:32px;height:32px;border-radius:50%;background:var(--soft);display:grid;place-items:center;
  font:400 20px/1 var(--sans)}
.faq details[open] summary::after{content:'−';background:var(--lime)}
.faq .a{padding:0 0 22px;max-width:70ch;color:var(--muted);font-size:15.5px;line-height:1.6}
.faq .a b{color:var(--ink)}

/* ── market cards ──────────────────────────────────────────────────────── */
.mkts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mkt{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:8px;min-width:0;text-decoration:none;color:var(--ink)}
.soft .mkt{border-color:transparent}
a.mkt:hover{box-shadow:0 14px 32px rgba(16,17,16,.08)}
.mkt .cur{font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--muted)}
.mkt h3{font-size:clamp(21px,2.1vw,27px)}
.mkt p{font-size:13.5px;color:var(--muted)}
.mkt .fig{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:19px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.mkt .fig small{display:block;margin-top:3px;font-size:11.5px;font-weight:400;color:var(--muted);letter-spacing:0}
.mkt .out{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
@media(max-width:960px){.mkts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.mkts{grid-template-columns:1fr}}

/* ── product UI mocks (built from real records; illustrative ones say so) ─ */
.ui{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 20px 50px rgba(16,17,16,.08);overflow:hidden}
.ui-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--soft);border-bottom:1px solid var(--line);
  font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ui-bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.ui-bar i:first-child{background:var(--lime)}
.ui-bar span{margin-left:6px}
.ui-body{padding:16px 18px}
.ui-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.ui-row:last-child{border-bottom:0}
.ui-row span{color:var(--muted)}
.ui-row b{font-variant-numeric:tabular-nums}
.ui-row.hl b{background:var(--lime);padding:1px 8px;border-radius:6px}
.ui-row.strike b{text-decoration:line-through;text-decoration-color:var(--red);color:var(--muted)}
.ui .note-s{padding:10px 18px 14px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line)}

/* ── team ──────────────────────────────────────────────────────────────── */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.person{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.soft .person{border-color:transparent}
.person .ph{background:linear-gradient(180deg,var(--soft) 0%,var(--soft-2) 100%)}
.person img{width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:50% 8%;mix-blend-mode:multiply}
.person .t{padding:16px 18px 20px}
.person b{display:block;font-size:17px;letter-spacing:-.015em}
.person span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
@media(max-width:860px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.people{grid-template-columns:1fr}}

/* ── forms ─────────────────────────────────────────────────────────────── */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,34px);display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label,.legend{font-size:13px;font-weight:600}
.field input,.field select{width:100%;min-height:48px;border:1px solid #CFCFC7;border-radius:12px;padding:0 14px;font:400 16px/1 var(--sans);
  color:var(--ink);background:#fff}
.field input:focus,.field select:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.field .hint{font-size:12.5px;color:var(--muted)}
.choice{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.choice label{position:relative;display:flex;flex-direction:column;gap:4px;border:1px solid #CFCFC7;border-radius:12px;padding:12px 14px;cursor:pointer;font-size:14px;font-weight:600}
.choice label small{font:500 10.5px/1 var(--mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--lime-soft)}
.choice label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-msg{font-size:14px;padding:12px 14px;border-radius:12px;display:none}
.form-msg.show{display:block}
.form-msg.ok{background:var(--lime-soft);color:var(--lime-ink)}
.form-msg.err{background:#FBE7E3;color:var(--red)}
.form .fine{font-size:12.5px;color:var(--muted)}
@media(max-width:640px){.choice{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}}

/* ── prose (legal, notes) ──────────────────────────────────────────────── */
.prose{max-width:74ch;font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.prose h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.025em;line-height:1.15;margin:44px 0 14px;color:var(--ink);text-transform:none}
.prose h3{font-size:18.5px;letter-spacing:-.015em;line-height:1.3;margin:30px 0 10px;color:var(--ink)}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose a{color:var(--ink);text-underline-offset:3px}
.prose b,.prose strong{color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin:10px 0 20px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-weight:600;background:var(--soft)}
.prose .n{font-family:var(--mono);font-size:.8em;color:var(--muted);margin-right:8px}
.prose-wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.toc{position:sticky;top:calc(var(--nav-h) + 24px);font-size:13.5px;display:grid;gap:8px}
.toc b{font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.toc a{text-decoration:none;color:var(--muted)}
.toc a:hover{color:var(--ink)}
.table-scroll{overflow-x:auto}
@media(max-width:900px){.prose-wrap{grid-template-columns:1fr}.toc{position:static}}

/* ── status table ──────────────────────────────────────────────────────── */
.stable{width:100%;border-collapse:collapse;font-size:14.5px}
.stable th,.stable td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.stable th{font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stable td:first-child b{display:block}
.stable td:first-child span{font-size:12.5px;color:var(--muted)}

/* ── footer ────────────────────────────────────────────────────────────── */
.foot{background:var(--soft);margin-top:0;padding-block:clamp(44px,7vh,80px) 28px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.foot-brand p{margin-top:14px;font-size:14px;color:var(--muted);max-width:30ch}
.foot-brand .free-pill{margin-top:16px}
.foot h4{font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px}
.foot a{text-decoration:none;color:var(--ink-2)}
.foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot-bot{margin-top:clamp(30px,5vh,56px);padding-top:20px;border-top:1px solid var(--line);display:flex;gap:10px 24px;flex-wrap:wrap;
  justify-content:space-between;font-size:12.5px;color:var(--muted)}
.foot-word{margin-top:clamp(26px,4vh,44px);font-weight:700;letter-spacing:-.06em;line-height:.8;font-size:clamp(64px,17vw,250px);
  color:var(--soft-2);user-select:none}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ── utilities ─────────────────────────────────────────────────────────── */
.mt-s{margin-top:16px}.mt-m{margin-top:clamp(24px,4vh,40px)}.mt-l{margin-top:clamp(36px,6vh,64px)}
.center{text-align:center}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,60px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.fence{border:1.5px dashed #D9B66A;background:#FFFBF2;border-radius:var(--r-lg);padding:clamp(20px,3vw,32px)}
.fence .chip{margin-bottom:12px}
.next-areas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.next-areas a{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);
  text-decoration:none;font-weight:600;font-size:14.5px}
.next-areas a:hover{border-color:var(--ink)}
.next-areas a[aria-current="page"]{background:var(--lime-soft);border-color:var(--lime-soft)}
@media(max-width:860px){.next-areas{grid-template-columns:1fr 1fr}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{.nav,.foot,.cta-band{display:none}}

/* ── field notes ───────────────────────────────────────────────────────── */
.notes-body .note{padding:6px 0 44px;border-bottom:1px solid var(--line);margin-bottom:40px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.notes-body .note:last-child{border-bottom:0}
.note-kicker{font:600 11px/1 var(--mono);letter-spacing:.12em;color:var(--muted);margin-bottom:14px}
.note-title{font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;line-height:1.08;max-width:22ch;font-weight:500}
.note-title .accent,.prose .accent{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--lime-ink)}
.byline{margin-top:12px;font-size:13.5px;color:var(--muted)}
.notes-body .prose{margin-top:22px}
.pull{margin:24px 0;padding:18px 22px;border-left:4px solid var(--lime);background:var(--soft);border-radius:0 12px 12px 0;
  font-size:clamp(19px,2vw,24px);line-height:1.35;letter-spacing:-.015em;color:var(--ink);font-weight:500}
.num{font-family:var(--mono);font-size:.92em;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.legal-body h3,.notes-body h3{scroll-margin-top:calc(var(--nav-h) + 20px)}

/* ── narrow-screen guards (found by QA at 320px) ───────────────────────── */
.stat b{overflow-wrap:anywhere}
.mkts.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mkts.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.mkts.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.mkts.c2,.mkts.c3{grid-template-columns:1fr}}
@media(max-width:480px){.next-areas{grid-template-columns:1fr}}
@media(max-width:420px){.stats{grid-template-columns:1fr}}

/* ═══ v2 — product demonstrations ════════════════════════════════════════ */

/* hero v2: text left, the product right and wide */
.hero2{padding-block:clamp(28px,5vh,60px) clamp(34px,6vh,72px)}
.hero2-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(24px,4vw,56px);align-items:center}
.hero2 h1{font-size:clamp(36px,5vw,68px);letter-spacing:-.04em;line-height:1;max-width:14ch}
.hero2 .sub{display:block;margin-top:12px;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;
  font-size:clamp(26px,3.3vw,44px);line-height:1.08;color:var(--lime-ink)}
.hero2 .lede{margin-top:clamp(16px,2.4vh,24px);max-width:46ch;font-size:clamp(15.5px,1.25vw,17.5px)}
.hero2 .ctas{margin-top:22px}
.price-line{margin-top:16px;font-size:13.5px;color:var(--muted);max-width:54ch;line-height:1.5}
.price-line b{color:var(--ink);font-weight:600}
@media(max-width:980px){.hero2-grid{grid-template-columns:1fr}}

/* the order walkthrough */
.demo{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 30px 70px rgba(16,17,16,.10);overflow:hidden;min-width:0}
.demo-head{display:flex;justify-content:space-between;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--soft)}
.demo-title{font:600 12.5px/1.3 var(--mono);letter-spacing:.02em}
.demo-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--line)}
.demo-tabs button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:12px 12px 13px;border-right:1px solid var(--line);
  font:500 12.5px/1.25 var(--sans);color:var(--muted);position:relative;min-height:44px;box-sizing:border-box}
.demo-tabs button:last-child{border-right:0}
.demo-tabs button b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--soft-2);font:700 11px/1 var(--sans);color:var(--ink)}
.demo-tabs button[aria-selected="true"]{color:var(--ink);background:#fff}
.demo-tabs button[aria-selected="true"] b{background:var(--lime)}
.demo-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
.demo-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.demo:not(.js) .demo-tabs{display:none}
.demo-panel{padding:18px 18px 6px}
.demo.js .demo-panel[data-hidden]{display:none}
.demo:not(.js) .demo-panel{border-bottom:1px solid var(--line)}
.demo:not(.js) [data-next]{display:none}
.dp-when{font:600 12px/1.2 var(--mono);color:var(--muted);letter-spacing:.04em}
.dp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:12px}
.dp-card{border:1px solid var(--line);border-radius:12px;padding:4px 14px}
.dr{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.dr:last-child{border-bottom:0}
.dr span{color:var(--muted)}
.dr b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.dr.lime b{background:var(--lime);padding:1px 8px;border-radius:6px}
.dr.ring b{box-shadow:inset 0 0 0 2px var(--lime-ink);padding:1px 8px;border-radius:6px}
.dr.amber b{background:var(--amber-soft);color:var(--amber);padding:1px 8px;border-radius:6px}
.dp-copy p{font-size:14px;line-height:1.5;color:var(--ink-2);margin:0 0 12px}
.dp-copy .who{display:inline-block;min-width:66px;margin-right:8px;font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--soft);padding:5px 7px;border-radius:6px;text-align:center}
.dp-copy .who.gm{background:var(--lime-soft);color:var(--lime-ink)}
.demo-foot{display:flex;justify-content:space-between;align-items:center;gap:10px 12px;flex-wrap:wrap;padding:10px 18px 16px;font-size:12px;color:var(--muted)}
@media(max-width:620px){
  .demo-tabs button{padding:10px 4px;align-items:center;text-align:center;font-size:11px}
  .demo-tabs button span{display:none}
  .dp-grid{grid-template-columns:1fr}
  .demo-panel{padding:16px 14px 4px}
  .demo-head,.demo-foot{padding-inline:14px}
}
.dp-step-name{display:none;font-weight:600;font-size:15px;margin-top:4px}
@media(max-width:620px){.dp-step-name{display:block}}

/* a real screen with numbered notes */
.scr{margin:0;display:grid;gap:12px;min-width:0}
.scr-frame{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 14px 34px rgba(16,17,16,.06)}
.scr-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--soft);
  font:500 10.5px/1 var(--mono);color:var(--muted)}
.scr-bar i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.scr-bar span{margin-left:6px}
.scr-frame img{display:block;width:100%;height:auto}
.scr-label{margin:0 0 8px}
.notes{margin:0;padding:0;list-style:none;counter-reset:n;display:grid;gap:8px}
.notes li{counter-increment:n;display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.notes li::before{content:counter(n);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font:700 11px/1 var(--sans)}
.prov{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:10px}

/* the workflow: one row per stage */
.flow{display:grid;gap:clamp(26px,4vh,44px)}
.stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(18px,3.5vw,52px);align-items:center;
  padding-top:clamp(22px,3.4vh,34px);border-top:1px solid var(--line)}
.stage:first-child{border-top:0;padding-top:0}
.stage-n{display:inline-flex;align-items:center;gap:10px;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stage-n b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lime);color:var(--ink);font:700 13px/1 var(--sans);letter-spacing:0}
.stage h3{font-size:clamp(21px,2.3vw,28px);letter-spacing:-.025em;margin-top:12px;line-height:1.12}
.stage > div > p{margin-top:10px;font-size:15px;color:var(--muted);max-width:44ch;line-height:1.55}
.stage .photo{border-radius:var(--r-lg);overflow:hidden;background:var(--soft);margin:0}
.stage .photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.stage .photo figcaption{padding:10px 14px;font-size:12.5px;color:var(--muted)}
.stage-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:860px){.stage{grid-template-columns:1fr}}
@media(max-width:560px){.stage-pair{grid-template-columns:1fr}}

/* tracker */
.tracker{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px 18px 22px}
.tracker-label{font:600 11px/1.3 var(--mono);letter-spacing:.06em;color:var(--muted);margin:0 0 14px}
.tracker ol{list-style:none;margin:0 0 0 6px;padding:0 0 0 20px;border-left:2px solid var(--line);display:grid;gap:14px}
.tracker li{position:relative;display:grid;gap:2px}
.tracker li::before{content:"";position:absolute;left:-28px;top:2px;width:10px;height:10px;border-radius:50%;background:#fff;border:2.5px solid var(--ink)}
.tracker li.ok::before{background:var(--lime);border-color:var(--lime-ink)}
.tracker li.ver::before{background:var(--lime-soft);border-color:var(--lime-ink)}
.tracker li.warn::before{border-color:var(--amber);background:var(--amber-soft)}
.tracker time{font:500 11.5px/1.3 var(--mono);color:var(--muted)}
.tracker b{font-size:14.5px;font-weight:600}
.tracker span{font-size:13px;color:var(--muted);line-height:1.45}

/* slip */
.slip{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px}
.slip-h{font:600 12px/1.3 var(--mono);letter-spacing:.04em;padding-bottom:10px;border-bottom:1px dashed var(--line);margin:0 0 6px}
.slip-r{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font:400 13px/1.35 var(--mono)}
.slip-r span{color:var(--muted)}
.slip-r b{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.slip-r.tot{border-top:2px solid var(--ink);margin-top:6px;padding-top:10px}
.slip-r.tot b{background:var(--lime);padding:1px 8px;border-radius:6px}
.slip-r.ring b{box-shadow:inset 0 0 0 2px var(--lime-ink);padding:1px 8px;border-radius:6px}
.slip-r.amber b{background:var(--amber-soft);color:var(--amber);padding:1px 8px;border-radius:6px}
.slip-n{margin:10px 0 0;font:400 12.5px/1.5 var(--sans);color:var(--muted)}

/* bars */
.bars{display:grid;gap:12px}
.bar-r{display:grid;grid-template-columns:minmax(90px,.9fr) minmax(0,2fr) auto;gap:14px;align-items:center;font-size:14px}
.bk{color:var(--ink-2)}
.bt{height:14px;border-radius:99px;background:var(--soft-2);overflow:hidden;position:relative}
.bt i{position:absolute;inset:0 auto 0 0;background:var(--ink);border-radius:99px}
.bar-r.hl .bt i{background:var(--lime)}
.bv{font-variant-numeric:tabular-nums;font-weight:600;min-width:56px;text-align:right}
@media(max-width:480px){.bar-r{grid-template-columns:1fr auto;gap:6px 12px}.bt{grid-column:1/-1;grid-row:2}}

/* chat */
.chat{background:#EFEAE2;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.chat-h{background:#fff;padding:12px 16px;border-bottom:1px solid var(--line);font:600 13px/1.3 var(--sans)}
.chat-b{padding:16px;display:grid;gap:10px}
.msg{max-width:86%;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.45;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.msg p{margin:0}
.msg.out{justify-self:start;border-top-left-radius:4px}
.msg.in{justify-self:end;background:#DCF8C6;border-top-right-radius:4px}
.msg.note{justify-self:center;background:transparent;box-shadow:none;font:500 11.5px/1.4 var(--mono);color:var(--muted);text-align:center;max-width:100%}
.msg-btns{display:grid;gap:0;margin:8px -12px -10px}
.msg-btns span{display:block;text-align:center;padding:9px 8px;border-top:1px solid var(--line);color:#027EB5;font-weight:600;font-size:13.5px}
.chat-f{margin:0;padding:10px 16px 14px;font-size:12px;color:var(--muted);background:#fff;border-top:1px solid var(--line)}

/* glossary */
.gloss{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:18px}
.gloss div{border-top:2px solid var(--ink);padding-top:12px}
.gloss dt{font-weight:600;font-size:16px;letter-spacing:-.01em}
.gloss dd{margin:6px 0 0;font-size:14px;color:var(--muted);line-height:1.55}

/* compact module list */
.modlist{border-top:1px solid var(--line)}
.ml{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.ml h3{font-size:16.5px;letter-spacing:-.015em;line-height:1.25}
.ml p{font-size:14px;color:var(--muted);margin-top:3px;max-width:64ch;line-height:1.5}
.ml .chips{justify-content:flex-end}
@media(max-width:620px){.ml{grid-template-columns:1fr}.ml .chips{justify-content:flex-start}}

/* area index — a list, not a card grid */
.aindex{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,4vw,56px);border-top:1px solid var(--line)}
.aindex a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink)}
.aindex a:hover h3{text-decoration:underline;text-underline-offset:4px}
.aindex .ico{display:grid;place-items:center;width:44px;height:44px;background:var(--soft);border-radius:12px}
.aindex h3{font-size:17px;letter-spacing:-.015em}
.aindex p{font-size:13.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.aindex .go{font-size:18px;color:var(--muted)}
@media(max-width:760px){.aindex{grid-template-columns:1fr}}

/* the proof statement */
.proof-s{font-size:clamp(23px,3vw,40px);line-height:1.2;letter-spacing:-.03em;font-weight:500;max-width:32ch;text-wrap:balance}
.proof-s .n > span{background:var(--lime);padding:0 8px;border-radius:8px;white-space:nowrap;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.proof-s .v > span{box-shadow:inset 0 -4px 0 var(--lime);white-space:nowrap}
.proof-meta{margin-top:14px;font-size:13px;color:var(--muted)}
.defs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,28px)}
.def{border-top:2px solid var(--ink);padding-top:14px}
.def .tag{display:inline-block;font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:99px;background:var(--soft)}
.def.a .tag{background:var(--lime)}
.def.v .tag{box-shadow:inset 0 0 0 2px var(--lime-ink);background:#fff}
.def p{margin-top:10px;font-size:14.5px;color:var(--muted);line-height:1.55}
.notclaim{margin-top:18px;font-size:13.5px;color:var(--muted);padding:12px 14px;border-radius:12px;background:var(--soft);line-height:1.55}
.soft .notclaim{background:#fff}
.notclaim b{color:var(--ink)}
@media(max-width:820px){.defs{grid-template-columns:1fr}}

/* requirements */
.reqs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px}
.req{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;background:#fff;display:flex;flex-direction:column;gap:8px}
.soft .req{border-color:transparent}
.req h3{font-size:16.5px;letter-spacing:-.015em}
.req p{font-size:13.5px;color:var(--muted);line-height:1.5}
.req .chip{align-self:flex-start}

/* numbered account steps */
.acct{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,28px);counter-reset:a}
.acct > div{counter-increment:a;border-top:2px solid var(--ink);padding-top:14px}
.acct > div::before{content:counter(a);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lime);font:700 14px/1 var(--sans);margin-bottom:12px}
.acct h3{font-size:19px;letter-spacing:-.02em}
.acct p{margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.55}
@media(max-width:820px){.acct{grid-template-columns:1fr}}

/* split with text on one side and a demo on the other */
.show{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,4vw,60px);align-items:center}
.show.flip > :first-child{order:2}
.show h2{font-size:clamp(26px,3.3vw,42px);letter-spacing:-.03em;line-height:1.06}
.show p.lede{margin-top:14px}
.show .ctas{margin-top:20px}
@media(max-width:900px){.show,.show.flip{grid-template-columns:1fr}.show.flip > :first-child{order:0}}

/* founder section v2 */
.founder2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(22px,4vw,64px);align-items:center}
.founder2 .portrait-soft{max-width:400px}
.founder2 blockquote{margin:0;font-family:var(--serif);font-size:clamp(26px,3.2vw,42px);line-height:1.12;letter-spacing:-.01em}
.founder2 .by{margin-top:14px;font-size:14px;color:var(--muted)}
.founder2 .by b{color:var(--ink)}
.founder2 p.lede{margin-top:18px}
@media(max-width:860px){.founder2{grid-template-columns:1fr}.founder2 .portrait-soft{max-width:300px}}

/* free table: what we charge vs what others charge */
.charges{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.charges > div{border-radius:var(--r-lg);padding:22px}
.charges .ours{background:var(--lime-soft)}
.charges .theirs{background:var(--soft)}
.charges h3{font-size:18px;letter-spacing:-.02em}
.charges ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.charges li{display:flex;justify-content:space-between;gap:12px;font-size:15px;padding-bottom:10px;border-bottom:1px solid rgba(16,17,16,.08)}
.charges li:last-child{border-bottom:0;padding-bottom:0}
.charges li b{font-weight:600;text-align:right}
.charges .note{margin-top:12px;font-size:13px;color:var(--muted);line-height:1.5}
@media(max-width:700px){.charges{grid-template-columns:1fr}}

/* market availability */
.avail{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:14px}

/* nav v2: account creation stays visible on phones */
.nav-links summary[aria-current="page"]{color:var(--ink);font-weight:600}
.nav-right .btn .s{display:none}
@media(max-width:980px){
  .nav-right{margin-left:auto}
  .nav-right .btn{display:inline-flex}
  .menu-btn{margin-left:0}
}
@media(max-width:520px){.nav-right .btn .l{display:none}.nav-right .btn .s{display:inline}}

.eyebrow{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.stable.int td:nth-child(2){color:var(--ink-2);min-width:220px}

/* a closed menu must not lay out (its links overflowed narrow screens) */
.menu-btn:not([open]) .menu-panel{display:none}

/* hero v2 layout: text and price beside the product on desktop;
   on phones the product comes straight after the buttons */
.hero2-grid{grid-template-areas:"t d" "p d";grid-template-rows:auto auto;row-gap:0}
.hero2-grid > .h2-text{grid-area:t;align-self:end}
.hero2-grid > .demo{grid-area:d;align-self:center}
.hero2-grid > .h2-price{grid-area:p;align-self:start}
.hero2 h1{font-size:clamp(34px,4.3vw,60px)}
@media(max-width:980px){.hero2-grid{grid-template-areas:"t" "d" "p";row-gap:24px}.hero2-grid > .h2-price .price-line{margin-top:0}}
.avail .chip{white-space:normal;height:auto;line-height:1.35;padding-block:6px;text-align:left}
@media(max-width:900px){.show,.show.flip{grid-template-columns:minmax(0,1fr)}}
@media(max-width:980px){.hero2-grid{grid-template-columns:minmax(0,1fr)}}
.stage-stack{display:grid;gap:16px}
.stage-stack .chat{max-width:440px}


/* menu v3: a full-height scrollable panel, a close (X) state, deliberate scroll lock */
@media(max-width:980px){
  .menu-panel{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:1}
  .menu-btn[open] summary span{background:transparent;box-shadow:none;position:relative}
  .menu-btn[open] summary span::before,.menu-btn[open] summary span::after{content:"";position:absolute;left:0;top:0;width:18px;height:2px;background:var(--ink)}
  .menu-btn[open] summary span::before{transform:rotate(45deg)}
  .menu-btn[open] summary span::after{transform:rotate(-45deg)}
  .menu-btn summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
}
html.menu-open,html.menu-open body{overflow:hidden}
.drop summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}


/* demo v3: every panel shares one grid cell, so the box keeps the height of
   the tallest stage and the page never jumps between steps */
.demo.js .demo-panels{display:grid}
.demo.js .demo-panel{grid-area:1/1}
.demo.js .demo-panel[data-hidden]{display:block;visibility:hidden}
.demo-panel:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:8px}
.demo-foot [data-next]:focus-visible,.demo-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}

/* a status reading the live check could not confirm */
.chips.stale .chip{opacity:.6;filter:grayscale(.6)}


/* ═══ v3 — spacing, headlines, teaser, setup list, phone tables ══════════ */
h1,h2,.proof-s{text-wrap:balance}
.sec{padding-block:clamp(44px,6.5vh,88px)}
.sec.tight{padding-block:clamp(34px,5vh,64px)}
.sec-head{margin-bottom:clamp(20px,3.4vh,36px)}
.sec-head h2,.h2{font-size:clamp(26px,3.6vw,48px)}
h2.h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;margin-bottom:18px}
@media(max-width:620px){
  .sec{padding-block:40px}.sec.tight{padding-block:32px}
  .phero{padding-block:28px 32px}
  .sec-head{grid-template-columns:1fr;gap:10px}
}

/* the proof, short form */
.proof-meter{margin-top:20px;max-width:640px}
.proof-note{margin-top:10px;font-size:14px;color:var(--muted);max-width:70ch;line-height:1.5}
.proof-note .link,.link{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* the walkthrough teaser */
.teaser{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.teaser li{display:flex;align-items:center;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line);font-size:16px;font-weight:500}
.teaser b{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--lime);font:700 13px/1 var(--sans)}

/* which connection a walkthrough step needs */
.needs{margin-top:12px!important;font:600 11px/1.4 var(--mono)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--lime-ink)!important}

/* what you need, in plain words */
.needs-list{border-top:1px solid var(--line)}
.nl{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px 28px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.nl > div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nl h3{font-size:17px;letter-spacing:-.015em}
.nl p{font-size:14.5px;color:var(--muted);line-height:1.55}
.nl p b{color:var(--ink);font-weight:600}
@media(max-width:700px){.nl{grid-template-columns:1fr}}

/* phone tables: rows become cards */
.rt-wrap{overflow-x:auto}
.stable.rt td:first-child b{font-size:15px}
@media(max-width:640px){
  .stable.rt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .stable.rt,.stable.rt tbody,.stable.rt tr,.stable.rt td{display:block;width:100%}
  .stable.rt tr{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px;background:#fff}
  .stable.rt td{border:0;padding:5px 0;display:grid;grid-template-columns:minmax(84px,34%) minmax(0,1fr);gap:10px;align-items:start}
  .stable.rt td::before{content:attr(data-label);font:600 10px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .stable.rt td:first-child{display:block;font-size:16px;padding-bottom:6px}
  .stable.rt td:first-child::before{display:none}
  .stable.rt td .chips{justify-content:flex-start}
}
.stable.rt td:first-child span{display:block;font-size:12.5px;color:var(--muted);font-weight:400}
.stable.rt.on-white{background:#fff;border-radius:16px}
@media(max-width:640px){.stable.rt.on-white{background:transparent}}

/* tap targets ≥ 24px (WCAG 2.5.8): the wordmark and the legal contents links */
.mark{min-height:44px;align-items:center}
.toc a{display:inline-flex;align-items:center;min-height:28px}
/* an anchor target never lands under the sticky header */
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
.founder2 .portrait-soft{max-width:320px}
@media(max-width:860px){.founder2 .portrait-soft{max-width:240px}}
.portrait-soft img{height:auto}


/* ═══ v4 — identity: three voices, real imagery, one story per section ═════
   Sans  = the product talking (headlines, interface words).
   Serif = people talking (the founder, the promise, "free").
   Mono  = the record talking (provenance, dates, scopes) — always with a mark:
           lime square = real screen, ink outline = real record, amber = sample.
   Headlines are sentence case everywhere; capitals belong to the mono voice. */
.sec-head h2,.h2,.phero h1,.cta-band h2,.hero h1{text-transform:none}
.sec-head h2,.h2{font-size:clamp(28px,3.4vw,46px);letter-spacing:-.035em;line-height:1.04;max-width:20ch}
.phero h1{font-size:clamp(36px,4.8vw,66px);letter-spacing:-.04em;line-height:1.02;max-width:15ch}
.phero h1 .em,.sec-head h2 .em,h2 .em{color:var(--lime-ink)}
.cta-band h2{font-size:clamp(28px,3.6vw,48px);line-height:1.04}

.rec{display:flex;align-items:center;gap:9px;margin:0;font:500 10.5px/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rec i{flex:none;width:9px;height:9px;border-radius:2px;border:1.5px solid var(--ink)}
.rec i.real{background:var(--lime);border-color:var(--lime-ink)}
.rec i.sample{background:var(--amber-soft);border-color:var(--amber)}
.rec.on-dark{color:#B6B9B0}
.rec.on-dark i{border-color:#fff}

/* a real screen crop, never stretched past its own pixels */
.shot{margin:0;max-width:min(var(--w),100%);display:grid;gap:10px;min-width:0}
.shot-frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(16,17,16,.07)}
.shot-frame img{display:block;width:100%;height:auto}

/* ── home hero ─────────────────────────────────────────────────────────── */
.hero4{padding-block:clamp(30px,6vh,72px) clamp(44px,7vh,88px)}
.hero4-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(28px,5vw,72px);align-items:center}
.h4-text .rec{margin-bottom:20px}
.hero4 h1{font-size:clamp(38px,4.7vw,68px);letter-spacing:-.045em;line-height:1.01;max-width:15ch}
.hero4 h1 .em{display:block;margin-top:.12em;color:var(--lime-ink);letter-spacing:-.02em}
.hero4 .lede{margin-top:clamp(16px,2.6vh,24px);max-width:44ch;font-size:clamp(16px,1.3vw,18px);color:var(--ink-2)}
.hero4 .ctas{margin-top:24px}
.hero4 .price-line{margin-top:14px}
.h4-trust{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);max-width:52ch}
.h4-trust img{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 12%;background:var(--soft)}
.h4-trust p{font-size:13.5px;line-height:1.5;color:var(--muted)}
.h4-trust p b{color:var(--ink)}
.h4-media{position:relative;padding:0 0 44px 0}
.h4-photo{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--soft)}
.h4-photo img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:62% 50%}
.h4-card{position:absolute;background:#fff;border-radius:16px;box-shadow:0 26px 60px rgba(16,17,16,.2)}
.h4-card.c1{left:-7%;bottom:0;width:min(462px,82%);padding:12px 12px 10px}
.h4-card.c1 .shot-frame{box-shadow:none}
.h4-card.c2{top:7%;right:-4%;padding:14px 16px;display:grid;gap:6px}
.h4-card .k{font:600 10.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.h4-card .v{font-size:17px;font-weight:600;letter-spacing:-.02em}
@media(max-width:980px){
  .hero4-grid{grid-template-columns:minmax(0,1fr)}
  .h4-media{padding:0}
  .h4-card.c1{position:relative;left:auto;bottom:auto;margin:-56px auto 0;width:min(462px,92%)}
  .h4-card.c2{display:none}
}

/* ── outcomes: problem → action → outcome, beside a real visual ──────────── */
.outcomes{display:grid;gap:clamp(56px,9vh,112px)}
.oc{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(24px,5vw,72px);align-items:center}
.oc.flip > .oc-text{order:2}
.oc-n{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lime-ink)}
.oc h3{margin-top:12px;font-size:clamp(26px,2.7vw,38px);letter-spacing:-.035em;line-height:1.06;max-width:17ch}
.pao{margin:20px 0 18px;display:grid}
.pao > div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.pao > div:last-child{border-bottom:1px solid var(--line)}
.pao dt{font:600 10.5px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pao dd{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.pao dd b{color:var(--ink);font-variant-numeric:tabular-nums}
.oc-show{background:var(--soft);border-radius:var(--r-lg);padding:clamp(16px,3vw,36px);min-width:0;display:grid;gap:18px;justify-items:start}
.oc-show.pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.oc-show.pair > *{width:100%}
.vsbar{background:#fff;border-radius:16px;padding:22px;width:100%;display:grid;gap:16px}
.vsbar-h{font:600 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
@media(max-width:900px){
  .oc,.oc.flip{grid-template-columns:minmax(0,1fr)}
  .oc.flip > .oc-text{order:0}
}
@media(max-width:620px){
  .pao > div{grid-template-columns:1fr;gap:4px}
  .oc-show.pair{grid-template-columns:1fr}
  .oc-show{padding:14px;border-radius:18px}
}
.also{margin-top:clamp(44px,7vh,72px);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.also span{font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.also a{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border:1px solid var(--line);border-radius:99px;font-size:14px;text-decoration:none;color:var(--ink-2)}
.also a:hover{border-color:var(--ink);color:var(--ink)}
.also a.all{background:var(--ink);border-color:var(--ink);color:#fff;gap:6px}

/* ── one real order ────────────────────────────────────────────────────── */
.order-sec{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(24px,4vw,56px);align-items:center}
.order-intro h2{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.035em;line-height:1.04}
.order-intro .lede{margin-top:14px}
.order-intro .btn{margin-top:22px}
@media(max-width:980px){.order-sec{grid-template-columns:minmax(0,1fr)}}

/* ── the count, the one dark band ──────────────────────────────────────── */
.proof-band .rec{margin-bottom:22px}
.proof-band .proof-s{color:#fff;font-size:clamp(26px,3.4vw,48px);max-width:30ch}
.proof-band .proof-s .n > span{color:var(--ink)}
.proof-band .proof-meter{background:rgba(255,255,255,.14)}
.proof-band .proof-meta,.proof-band .proof-note{color:#B6B9B0}
.proof-band .link{color:#fff}

/* ── the founder and the floor ─────────────────────────────────────────── */
.fs4{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,5vw,80px);align-items:center}
.fs4-portrait{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--soft);max-width:460px}
.fs4-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.fs4 blockquote{margin:0;font-family:var(--serif);font-size:clamp(28px,3.4vw,48px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.fs4 blockquote .em{color:var(--lime-ink)}
.fs4 .by{margin-top:14px;font-size:14px;color:var(--muted)}
.fs4 .by b{color:var(--ink)}
.fs4 .lede{margin-top:18px;max-width:50ch;color:var(--ink-2)}
.fs4-floor{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.fs4-floor figure{margin:0;border-radius:14px;overflow:hidden;background:var(--soft)}
.fs4-floor img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fs4 .rec{margin-top:12px}
.fs4 .ctas{margin-top:22px}
@media(max-width:900px){.fs4{grid-template-columns:minmax(0,1fr)}.fs4-portrait{max-width:340px}}

/* ── free ──────────────────────────────────────────────────────────────── */
.free4{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:center}
.free4 h2{font-size:clamp(28px,3.4vw,46px);letter-spacing:-.035em;line-height:1.04;max-width:14ch}
.free4 .lede{margin-top:14px}
.soft .charges .theirs{background:#fff}
@media(max-width:900px){.free4{grid-template-columns:minmax(0,1fr)}}

/* ── start: the page's last word, lime ─────────────────────────────────── */
.start4{background:var(--lime);border-radius:26px;padding:clamp(26px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.start4 h2{font-size:clamp(30px,3.8vw,52px);letter-spacing:-.04em;line-height:1.02;max-width:13ch}
.start4-head p{margin-top:14px;font-size:16px;color:var(--ink-2);max-width:42ch}
.start4 .ctas{margin-top:24px}
.start4 .btn.ghost{border-color:rgba(16,17,16,.45)}
.start4-steps{list-style:none;margin:0;padding:0;counter-reset:st}
.start4-steps li{counter-increment:st;display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:14px;padding:16px 0;border-top:1px solid rgba(16,17,16,.18)}
.start4-steps li:last-child{border-bottom:1px solid rgba(16,17,16,.18)}
.start4-steps li::before{content:counter(st);grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--lime);font:700 14px/1 var(--sans)}
.start4-steps b{font-size:17px;letter-spacing:-.015em}
.start4-steps span{font-size:14.5px;color:var(--ink-2);line-height:1.5;margin-top:3px}
.start4 .link{color:var(--ink)}
@media(max-width:860px){.start4{grid-template-columns:minmax(0,1fr)}}

/* v4 fixes: an aspect-ratio box must not keep the height attribute; stacked record panels */
.h4-photo img,.fs4-portrait img,.fs4-floor img{height:auto}
.oc-show.pair{grid-template-columns:minmax(0,1fr)}

.oc-show.pair .tracker,.oc-show.pair .slip{max-width:440px}
.outcomes{gap:clamp(48px,7vh,88px)}

/* hero order: on phones the floor and the screen come straight after the buttons */
.hero4-grid{grid-template-areas:"t m" "f m";row-gap:0}
.h4-text{grid-area:t;align-self:end}.h4-media{grid-area:m}.h4-foot{grid-area:f;align-self:start}
@media(max-width:980px){.hero4-grid{grid-template-areas:"t" "m" "f";row-gap:28px}.hero4 .price-line{margin-top:0}}
@media(max-width:620px){.hero4 h1{font-size:clamp(34px,10vw,44px)}.hero4 .ctas .btn{flex:1 1 auto}}

@media(max-width:620px){.shot[style*="--w-sm"]{max-width:min(var(--w-sm),100%)}}
.oc-show .chat{width:100%;max-width:440px}


/* ── v4 nav and footer ─────────────────────────────────────────────────── */
.drop-panel .lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;
  padding:14px 14px;margin-bottom:6px;border-radius:10px;background:var(--lime-soft)}
.drop-panel .lead b{grid-column:1}
.drop-panel .lead span:not(.go){grid-column:1;color:var(--ink-2)}
.drop-panel .lead .go{grid-column:2;grid-row:1/span 2;font-size:18px;color:var(--ink)}
.drop-panel .lead:hover{background:var(--lime)}
.foot-top{grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr))}
.foot h4.mt{margin-top:26px}
.foot-bot span:last-child{max-width:60ch}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media(max-width:420px){.foot ul{font-size:14.5px;gap:4px}.foot ul a{display:inline-flex;min-height:32px;align-items:center}}

/* founder on phones: a portrait, not a poster */
@media(max-width:900px){.fs4-portrait{max-width:260px}.fs4-portrait img{aspect-ratio:1/1;object-position:50% 18%}}


/* ── v4 area pages ─────────────────────────────────────────────────────── */
.phero .kick{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.kick-t{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.area-hero .phero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.area-hero h1 .em{display:block;margin-top:.08em;letter-spacing:-.02em}
.area-hero .price-line{margin-top:14px}
.area-visual{min-width:0;display:grid;justify-items:center}
.area-visual > *{width:100%}
.area-visual > .shot{width:auto}
.pao-sec{padding-block:clamp(10px,2vh,24px) clamp(34px,5vh,56px)}
.pao3{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3vw,40px)}
.pao3 > div{border-top:2px solid var(--ink);padding-top:14px}
.pao3 > div:last-child{border-top-color:var(--lime-ink)}
.pao3 dt{font:600 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pao3 > div:last-child dt{color:var(--lime-ink)}
.pao3 dd{margin:8px 0 0;font-size:clamp(15px,1.2vw,17px);line-height:1.5;color:var(--ink-2)}
@media(max-width:820px){.pao3{grid-template-columns:minmax(0,1fr);gap:18px}}
.show h2,.job-wide h2{font-size:clamp(26px,3vw,40px)}
.job-wide{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(22px,4vw,64px);align-items:center}
.job-wide .lede{margin-top:14px}
.job-show{background:#fff;border-radius:var(--r-lg);padding:clamp(18px,3vw,32px);min-width:0}
.job-show .slip,.job-show .tracker{border:0;padding:0}
@media(max-width:900px){.job-wide{grid-template-columns:minmax(0,1fr)}}
.inside{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:start}
.inside h2.h3{margin-bottom:14px}
.limits{background:var(--amber-soft);border-radius:var(--r-md);padding:20px 22px;position:sticky;top:calc(var(--nav-h) + 20px)}
.soft .limits{background:#fff;box-shadow:inset 0 0 0 1.5px #E8C98A}
.limits h3{font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.limits ul{margin:12px 0 14px;padding-left:18px;display:grid;gap:8px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
@media(max-width:900px){.inside{grid-template-columns:minmax(0,1fr)}.limits{position:static}}
.also a[aria-current="page"]{background:var(--lime-soft);border-color:var(--lime-soft);color:var(--ink);font-weight:600}

#inside + .sec.tight{padding-top:0}
.area-visual > .oc-show{width:100%}

/* story */
.story-portrait{margin:0;display:grid;gap:10px;justify-self:center;max-width:420px;width:100%}
.story-portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:var(--r-lg)}
.story-quote{max-width:900px;text-align:center}
.story-quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(30px,4vw,56px);line-height:1.08;text-wrap:balance}
.story-quote blockquote .em{color:var(--lime-ink)}
.story-quote .by{margin-top:16px;font-size:14px;color:var(--muted)}
.story-quote .by b{color:var(--ink)}
/* a stat never breaks inside a number */
.stat b{overflow-wrap:normal;font-size:clamp(24px,2.6vw,38px)}
@media(max-width:900px){.story-portrait{max-width:300px}}
.story-portrait.wide{max-width:none}
.story-portrait.wide img{aspect-ratio:16/10;object-position:50% 50%}

/* a live figure inside a stat number keeps the number’s size (was shrunk by .stat span) */
.stat b span{display:inline;font-size:inherit;color:inherit;margin:0;line-height:inherit}
.ui-row b span,.slip-r b span,.dr b span,.bill-row b span,.charges li b span{color:inherit;font-size:inherit;font-weight:inherit}

/* /start: one list of connections */
.conn{border-top:1px solid var(--line)}
.conn-r{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1.2fr);gap:10px 28px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.conn-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.conn-h h3{font-size:19px;letter-spacing:-.02em}
.conn-k{font:600 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.conn-r p:not(.conn-k){font-size:14.5px;line-height:1.55;color:var(--ink-2)}
@media(max-width:820px){.conn-r{grid-template-columns:minmax(0,1fr)}}
.phero .charges{grid-template-columns:minmax(0,1fr)}
@media(max-width:980px){.h4-photo img{aspect-ratio:16/10}}

/* standalone text links are tap targets too */
.oc-text > .link,.limits .link,.proof-note .link,.h4-trust .link{display:inline-flex;align-items:center;min-height:32px}
/* a receipt row wraps instead of pushing the page sideways */
.slip-r{flex-wrap:wrap;row-gap:2px}
.slip-r span{flex:1 1 55%;min-width:0}
.slip-r b{margin-left:auto;max-width:100%;overflow-wrap:anywhere}
.slip-h{overflow-wrap:anywhere}
.phero-media img{height:auto}

/* phones: drop visuals that repeat a nearby one (the walkthrough shows the parcel journey; one floor photo is enough) */
@media(max-width:620px){.oc-show.pair .tracker{display:none}.fs4-floor{grid-template-columns:1fr}.fs4-floor figure + figure{display:none}.outcomes{gap:56px}.oc h3{max-width:none}}


/* ═══ v7 — shorter homepage, the desk as a workflow ═══════════════════════ */

/* hero: one record card (the screen snippets now live in the desk section) */
.h4-card.c1{left:-6%;bottom:6px;width:auto;max-width:82%;padding:14px 18px;display:grid;gap:6px}
@media(max-width:980px){.h4-card.c1{margin:-34px 16px 0;max-width:none}}

/* the three jobs: scannable cards, detail on each area page */
.jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.job{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;text-decoration:none;color:var(--ink);
  transition:border-color .16s ease,box-shadow .16s ease}
.job:hover{border-color:var(--ink);box-shadow:0 14px 34px rgba(16,17,16,.07)}
.job h3{font-size:clamp(20px,1.8vw,24px);letter-spacing:-.025em;line-height:1.12}
.job-r{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.job-r b{color:var(--ink);font-variant-numeric:tabular-nums}
.job .go{margin-top:auto;padding-top:6px;font-size:14px;font-weight:600}
@media(max-width:900px){.jobs{grid-template-columns:minmax(0,1fr)}.job{padding:18px}}
.jobs + .also{margin-top:28px}

/* the order desk */
.desk{display:grid;gap:clamp(18px,3vw,32px)}
.desk-shot{margin:0;display:grid;gap:10px}
.desk-frame{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 24px 60px rgba(16,17,16,.10)}
.desk-frame img{display:block;width:100%;height:auto}
.desk-pin{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:var(--lime);font:700 13px/1 var(--sans);box-shadow:0 0 0 4px rgba(200,240,75,.55)}
.desk-notes{list-style:none;margin:0;padding:0;counter-reset:dn;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.desk-notes li{counter-increment:dn;display:grid;gap:10px;align-content:start;border-top:2px solid var(--ink);padding-top:12px}
.desk-notes h3{display:flex;gap:10px;align-items:baseline;font-size:16.5px;letter-spacing:-.015em;line-height:1.25}
.desk-notes h3::before{content:counter(dn);flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--lime);font:700 11px/1 var(--sans);transform:translateY(-1px)}
.desk-notes p{font-size:14px;line-height:1.5;color:var(--ink-2)}
.desk-zoom{display:none}
@media(max-width:900px){
  .desk-notes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* phones: the whole desk stays as a map; each note carries its own readable part */
@media(max-width:620px){
  .desk-pin{width:20px;height:20px;font-size:10px;box-shadow:0 0 0 3px rgba(200,240,75,.55)}
  .desk-notes{grid-template-columns:minmax(0,1fr);gap:18px}
  .desk-zoom{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;max-width:100%}
  .desk-zoom img{display:block;width:100%;height:auto}
}

/* start + free, one band */
.start4{align-items:start}
.free5{background:rgba(255,255,255,.72);border-radius:18px;padding:20px 22px}
.free5-h{font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.free5-l{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.free5-l li{display:grid;gap:4px;padding:12px;border-radius:12px;background:#fff}
.free5-l span{font-size:13px;color:var(--muted)}
.free5-l b{font-size:20px;letter-spacing:-.02em}
.free5-n{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.free5-n .link{display:inline-flex;min-height:28px;align-items:center}

/* founder: the studio portrait on a soft ground, face with room around it */
.fs4-portrait{background:linear-gradient(180deg,var(--soft) 0%,var(--soft-2) 100%)}
.fs4-portrait img{aspect-ratio:4/5;object-position:50% 30%;mix-blend-mode:multiply}
@media(max-width:900px){.fs4-portrait{max-width:220px}.fs4-portrait img{aspect-ratio:1/1;object-position:50% 22%}}
.story-portrait{background:none}
.story-portrait img{background:linear-gradient(180deg,var(--soft) 0%,var(--soft-2) 100%);mix-blend-mode:multiply;object-position:50% 30%}
.story-portrait.wide img{mix-blend-mode:normal;background:none}

/* footer, phones: same links, less height */
@media(max-width:620px){
  .foot{padding-block:36px 20px}
  .foot-top{gap:22px 18px}
  .foot h4{margin-bottom:8px}
  .foot ul{gap:0}
  .foot h4.mt{margin-top:18px}
  .foot-bot{margin-top:24px}
}

@media(max-width:620px){
  #what .also{display:none}
  .fs4{gap:18px}.fs4-portrait{max-width:150px;border-radius:18px}
  .fs4 blockquote{font-size:28px}
  .fs4-floor{margin-top:18px}
}

/* phone footer: every link kept, flowing inline under its heading */
@media(max-width:620px){
  .foot-top{grid-template-columns:minmax(0,1fr);gap:18px}
  .foot ul{display:flex;flex-wrap:wrap;gap:0 16px}
  .foot ul a{display:inline-flex;align-items:center;min-height:34px}
  .foot-brand p{margin-top:10px}
}
@media(max-width:900px){.fs4-portrait{overflow:hidden}.fs4-portrait img{transform:scale(1.55);transform-origin:50% 20%}}


/* ── How it works: the order's whole record beside the intro ────────────── */
.how-hero{align-items:center}
.casefile{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:0 24px 60px rgba(16,17,16,.08)}
.casefile-h{font:600 12px/1.3 var(--mono);letter-spacing:.04em;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.casefile ol{list-style:none;margin:14px 0 14px 6px;padding:0 0 0 20px;border-left:2px solid var(--line);display:grid;gap:12px}
.casefile li{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:12px}
.casefile li::before{content:"";position:absolute;left:-27px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--lime);border:2.5px solid var(--lime-ink)}
.casefile li.end::before{background:var(--ink);border-color:var(--ink)}
.casefile time{grid-row:span 2;font:500 11.5px/1.5 var(--mono);color:var(--muted)}
.casefile b{font-size:14.5px}
.casefile span{font-size:13px;color:var(--muted)}
@media(max-width:480px){.casefile{padding:18px}.casefile li{grid-template-columns:minmax(0,1fr)}.casefile time{grid-row:auto}}

/* ── Proof: attributed, verified, settled — on one order, in the hero ───── */
.layers2{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;display:grid;gap:14px;box-shadow:0 24px 60px rgba(16,17,16,.08)}
.layers2-h{font:600 12px/1.3 var(--mono);letter-spacing:.04em;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.l2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--line)}
.l2 .tag{font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:99px;background:var(--soft)}
.l2.a .tag{background:var(--lime)}
.l2.v .tag{box-shadow:inset 0 0 0 2px var(--lime-ink);background:#fff}
.l2 time{font:500 11.5px/1 var(--mono);color:var(--muted);justify-self:end}
.l2 p{grid-column:1/-1;margin-top:6px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.l2 b{grid-column:1/-1;font-size:14.5px;font-variant-numeric:tabular-nums}
.l2.a b{color:var(--lime-ink)}
.l2.s b{color:var(--muted);font-weight:500}


/* ═══ v7 deep pages ═══════════════════════════════════════════════════════ */
/* Ad Pilot: the week, a verdict card's parts, the six verdicts */
.week{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:0 24px 60px rgba(16,17,16,.08)}
.week-h,.route-h,.cando-h{font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.week ol,.route ol{list-style:none;margin:14px 0 0 6px;padding:0 0 0 20px;border-left:2px solid var(--line);display:grid;gap:14px}
.week li,.route li{position:relative;display:grid;gap:2px}
.week li::before,.route li::before{content:"";position:absolute;left:-27px;top:3px;width:10px;height:10px;border-radius:50%;background:#fff;border:2.5px solid var(--ink)}
.week li.you::before,.route li.end::before{background:var(--lime);border-color:var(--lime-ink)}
.week b,.route b{font-size:15px}
.week span,.route span{font-size:13.5px;color:var(--muted);line-height:1.45}
.vcard{background:#fff;border-radius:var(--r-lg);padding:22px 24px;display:grid;gap:14px;box-shadow:0 18px 44px rgba(16,17,16,.07)}
.vcard-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vcard-ad{font:500 12.5px/1.3 var(--mono);color:var(--muted)}
.vcard dl{margin:0;display:grid}
.vcard dl > div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.vcard dt{font:600 10.5px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.vcard dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.vcard-btns{display:flex;gap:8px;flex-wrap:wrap}
.vcard-btns span{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:99px;border:1px solid var(--line);font-size:13.5px;font-weight:600}
.vcard-btns span:first-child{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:520px){.vcard dl > div{grid-template-columns:minmax(0,1fr);gap:2px}}
.vlist{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,3vw,40px);border-top:1px solid var(--line)}
.vlist > div{padding:16px 0;border-bottom:1px solid var(--line)}
.vlist dt{font-size:18px;font-weight:600;letter-spacing:-.015em}
.vlist dd{margin:4px 0 0;font-size:14.5px;color:var(--muted);line-height:1.5}
@media(max-width:860px){.vlist{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:520px){.vlist{grid-template-columns:minmax(0,1fr)}}

/* Agents: three routes, then the roster */
.routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.route{background:#fff;border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:6px}
.route .route-h{color:var(--ink)}
.route.shadow{background:transparent;border:1.5px dashed #D9B66A}
.route.shadow .route-h{color:var(--amber)}
.route.shadow li.end::before{background:var(--amber-soft);border-color:var(--amber)}
.route-who{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font:600 12px/1.4 var(--mono);letter-spacing:.04em}
@media(max-width:900px){.routes{grid-template-columns:minmax(0,1fr)}}
.roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,3vw,40px);border-top:1px solid var(--line)}
.ag{display:flex;flex-direction:column;gap:8px;padding:18px 0;border-bottom:1px solid var(--line)}
.ag-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ag h3{font-size:19px;letter-spacing:-.02em}
.ag-role{font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ag p{font-size:14px;color:var(--ink-2);line-height:1.5}
.ag .ag-route{font:600 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--lime-ink)}
@media(max-width:900px){.roster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:560px){.roster{grid-template-columns:minmax(0,1fr)}}

/* MCP */
.bubble{font-size:14px;padding:10px 12px;max-width:88%}
.bubble.q{background:var(--soft);border-radius:12px 12px 12px 4px}
.bubble.a{background:var(--lime-soft);border-radius:12px 12px 4px 12px;margin:10px 0 0 auto}
.start4-steps.plain li{border-color:var(--line)}
.start4-steps.plain{margin-top:18px}
.cando{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.cando > div{background:#fff;border-radius:var(--r-md);padding:20px}
.cando .cannot{box-shadow:inset 0 0 0 1.5px #E8C98A}
.cando .cannot .cando-h{color:var(--amber)}
.cando .can .cando-h{color:var(--lime-ink)}
.cando ul{margin:10px 0 0;padding-left:18px;display:grid;gap:8px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
@media(max-width:620px){.cando{grid-template-columns:minmax(0,1fr)}}


/* Trust: checks, rules beside the limits, documents with their purpose */
.checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.checks a{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:var(--r-lg);background:#fff;text-decoration:none;color:var(--ink);border:1px solid transparent}
.checks a:hover{border-color:var(--ink)}
.checks .q{font-size:19px;font-weight:600;letter-spacing:-.02em}
.checks .a{font-size:14px;line-height:1.5;color:var(--ink-2)}
.checks .go{margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:600}
@media(max-width:1000px){.checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.checks{grid-template-columns:minmax(0,1fr)}}
.promise{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:start}
.promise h2.h3{margin-bottom:14px}
.plist{margin:0;border-top:1px solid var(--line)}
.plist > div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:6px 20px;padding:14px 0;border-bottom:1px solid var(--line)}
.plist dt{font-weight:600;font-size:15.5px}
.plist dd{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.limits li b{color:var(--ink)}
@media(max-width:900px){.promise{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.plist > div{grid-template-columns:minmax(0,1fr)}}
.docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.docs a{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;color:var(--ink)}
.docs a:hover{border-color:var(--ink)}
.docs b{font-size:16px}
.docs span{font-size:13.5px;color:var(--muted);line-height:1.45}
@media(max-width:860px){.docs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:520px){.docs{grid-template-columns:minmax(0,1fr)}}

/* Status: the key first */
.key{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:18px}
.key p{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}

/* Team */
.show .fs4-floor{margin-top:0}

/* an image never keeps its HTML height attribute when CSS shapes it (class rules that fill a box still win) */
img{height:auto}
.people{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.person .t{padding:12px 12px 14px}.person b{font-size:15px}.person span{font-size:12.5px}
@media(max-width:1100px){.people{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.fs4-portrait img{transform:scale(1.3);transform-origin:50% 12%}}


/* ═══ v9 — the product preview (illustrative, sample data) ════════════════
   Desktop: queues | orders | the open order. The open order is the focal
   point: the one white, raised card. Colour only marks meaning:
   lime = confirmed / ready, amber = waiting or needs a person. */
.pv-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,3vw,48px);align-items:end;margin-bottom:clamp(22px,3.4vh,34px)}
.pv-head h2{font-size:clamp(28px,3.4vw,46px);letter-spacing:-.035em;line-height:1.04;max-width:16ch}
.pv-head p{color:var(--muted);font-size:clamp(15px,1.25vw,17px);line-height:1.55;max-width:46ch}
@media(max-width:820px){.pv-head{grid-template-columns:minmax(0,1fr);gap:10px}}

.pv{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(16,17,16,.10)}
.pv-bar{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line)}
.pv-app{font-size:15px;font-weight:600;letter-spacing:-.01em}
.pv-label{display:inline-flex;align-items:center;gap:8px;font:600 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--amber);
  background:var(--amber-soft);padding:6px 10px;border-radius:99px}
.pv-label i{width:8px;height:8px;border-radius:2px;border:1.5px solid var(--amber)}
.pv-body{display:grid;grid-template-columns:210px minmax(0,320px) minmax(0,1fr);min-height:540px}
.pv button{font:inherit;color:inherit;cursor:pointer}
.pv button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* queues */
.pv-queues{background:var(--soft);padding:14px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line)}
.pv-q{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:center;text-align:left;padding:11px 12px;border:0;border-radius:12px;background:transparent}
.pv-q:hover{background:rgba(255,255,255,.6)}
.pv-qn{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.pv-qc{font:700 11.5px/1 var(--mono);min-width:24px;text-align:center;padding:5px 7px;border-radius:99px;background:#fff;color:var(--ink-2)}
.pv-qh{grid-column:1/-1;font-size:12px;line-height:1.35;color:var(--muted)}
.pv-q[aria-pressed="true"]{background:#fff;box-shadow:0 0 0 1.5px var(--ink)}
.pv-q[aria-pressed="true"] .pv-qc{background:var(--ink);color:var(--lime)}

/* orders */
.pv-list-wrap{padding:14px;border-right:1px solid var(--line);min-width:0}
.pv-list-h{font:600 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:2px 2px 12px}
.pv-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pv-order{display:grid;gap:7px;width:100%;text-align:left;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;position:relative}
.pv-order:hover{border-color:#C9C9C1}
.pv-o1{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pv-o1 b{font-size:15px;letter-spacing:-.01em}
.pv-o2{display:flex;align-items:baseline;gap:12px;font-size:13.5px;color:var(--muted)}
.pv-o2 b{margin-left:auto;color:var(--ink);font-size:14.5px;font-variant-numeric:tabular-nums}
.pv-st{font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:99px;white-space:nowrap}
.pv-st.ok{background:var(--lime-soft);color:var(--lime-ink)}
.pv-st.wait{background:var(--amber-soft);color:var(--amber)}
.pv-st.flag{background:#FBE7E3;color:var(--red)}
.pv-order[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 4px 0 0 var(--lime),0 0 0 1px var(--ink)}

/* the open order: the focal card */
.pv-details{background:var(--soft);padding:18px;min-width:0}
.pv-detail{background:#fff;border-radius:18px;padding:22px 24px;box-shadow:0 20px 50px rgba(16,17,16,.10),0 0 0 1px var(--line)}
.pv-dh{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.pv-num{font:600 11px/1.3 var(--mono);letter-spacing:.06em;color:var(--muted)}
.pv-dh h3{margin-top:6px;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.025em;line-height:1.15}
.pv-items{margin-top:4px;font-size:13.5px;color:var(--muted)}
.pv-amt{text-align:right;flex:none}
.pv-amt b{display:block;font-size:24px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pv-amt span{font-size:12px;color:var(--muted)}
.pv-blk{margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid var(--line)}
.pv-k{font:600 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pv-t{display:flex;align-items:center;gap:9px;margin-top:7px;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.pv-t i{flex:none;width:10px;height:10px;border-radius:50%}
.pv-l{margin-top:5px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.pv-blk.ok .pv-t i{background:var(--lime);box-shadow:0 0 0 2px var(--lime-ink)}
.pv-blk.wait .pv-t i{background:#fff;box-shadow:0 0 0 2px var(--amber)}
.pv-blk.flag{background:#FFF8E8;border-color:#EED9A6}
.pv-blk.flag .pv-t i{background:var(--amber)}
.pv-hist{margin-top:14px;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13.5px;color:var(--ink-2)}
.pv-hist span{font:600 10.5px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pv-next{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.pv-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pv-act{min-height:44px;padding:0 18px;border-radius:99px;border:1px solid rgba(16,17,16,.3);background:#fff;font-size:14px!important;font-weight:600!important}
.pv-act.primary{background:var(--ink);border-color:var(--ink);color:#fff!important}
.pv-act:hover{border-color:var(--ink)}
.pv-said{margin-top:10px;font-size:13px;line-height:1.45;color:var(--lime-ink);min-height:1px}
.pv-said:empty{margin-top:0}

/* under the preview: the step it leads to */
.pv-cta{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;margin-top:24px}
.pv-cta p{font-size:14.5px;color:var(--muted);max-width:44ch}

/* tablets: queues across the top, orders and the open order side by side */
@media(max-width:1100px){
  .pv-body{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
  .pv-queues{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line)}
  .pv-q{flex:1 1 160px}
  .pv-qh{display:none}
}
/* phones: a 2×2 queue selector, order cards, and the open order right under
   the selected card (the script moves it there) */
@media(max-width:760px){
  .pv{border-radius:20px}
  .pv-bar{padding:12px 14px}
  .pv-body{grid-template-columns:minmax(0,1fr);min-height:0}
  .pv-queues{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:10px}
  .pv-q{padding:10px 11px;min-height:48px}
  .pv-qn{font-size:14px}
  .pv-list-wrap{border-right:0;padding:12px 10px}
  .pv.js .pv-details{display:none}
  .pv-list li .pv-detail{margin-top:8px;padding:18px 16px;border-radius:16px;box-shadow:0 0 0 1.5px var(--ink),0 14px 34px rgba(16,17,16,.10)}
  .pv-dh{flex-direction:column;gap:8px}
  .pv-amt{text-align:left}
  .pv-amt b{font-size:22px}
  .pv-btns .pv-act{flex:1 1 100%}
}


/* ═══ v10 — free tools (no account; calculated in the browser) ═════════════ */
.tool-sec{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(22px,4vw,64px);align-items:center}
.tool-intro h2{font-size:clamp(26px,3vw,42px);letter-spacing:-.035em;line-height:1.05;max-width:16ch}
.tool-intro .oc-n{margin-bottom:12px}
.tool-intro .lede{margin-top:14px}
.tool-intro .link{display:inline-flex;align-items:center;min-height:36px;margin-top:14px;font-size:14.5px}
@media(max-width:900px){.tool-sec{grid-template-columns:minmax(0,1fr)}}

.tool{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(18px,2.6vw,28px);display:grid;gap:18px;box-shadow:0 24px 60px rgba(16,17,16,.08);min-width:0}
.tool-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tool-in.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tool label{display:grid;gap:7px;font-size:13px;font-weight:600;color:var(--ink-2);align-content:start}
.tool input,.tool select{width:100%;min-height:48px;border:1px solid #CFCFC7;border-radius:12px;padding:0 14px;font:500 17px/1 var(--sans);color:var(--ink);background:#fff;font-variant-numeric:tabular-nums}
.tool select{font-size:15.5px}
.tool input:focus,.tool select:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.fld{position:relative;display:block}
.fld i{position:absolute;top:50%;transform:translateY(-50%);font-style:normal;font-size:15px;color:var(--muted);pointer-events:none}
.fld i:first-child{left:14px}
.fld i:last-child{right:14px}
.fld i:first-child + input{padding-left:36px}
.fld input:first-child{padding-right:34px}
.tool-out{display:grid;gap:12px}
.cac-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.cac-pair > div{border-radius:16px;padding:16px 18px;background:var(--soft)}
.cac-pair > div.hl{background:var(--lime)}
.cac-pair .k{font:600 10.5px/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.cac-pair .v{margin-top:8px;font-size:clamp(28px,3vw,40px);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.tool-say{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.rr-verdict{font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.15;padding-left:14px;border-left:4px solid var(--line)}
.rr-verdict[data-tone="better"]{border-color:var(--lime-ink)}
.rr-verdict[data-tone="same"]{border-color:var(--ink)}
.rr-verdict[data-tone="worse"]{border-color:var(--amber)}
.tool .notclaim{margin-top:0}
@media(max-width:620px){
  .tool-in,.tool-in.two{grid-template-columns:minmax(0,1fr)}
  .cac-pair{grid-template-columns:minmax(0,1fr)}
  .tool{border-radius:18px}
}

/* tools page */
.tools-hero{align-items:center}
.tools-index{display:grid;gap:10px}
.tools-index a{display:grid;gap:3px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;text-decoration:none;color:var(--ink);background:#fff}
.tools-index a:hover{border-color:var(--ink)}
.tools-index b{font-size:16.5px;letter-spacing:-.015em}
.tools-index span{font-size:13.5px;color:var(--muted)}
.cities{display:grid;gap:8px;max-width:860px}
.city{display:grid;grid-template-columns:150px minmax(0,1fr) 60px;gap:14px;align-items:center;font-size:14.5px}
.city .bt{height:12px;border-radius:99px;background:#fff;overflow:hidden;position:relative}
.city .bt i{position:absolute;inset:0 auto 0 0;background:var(--ink);border-radius:99px}
.city b{text-align:right;font-variant-numeric:tabular-nums}
.city.nat{padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid var(--line);font-weight:600}
.city.nat .bt i{background:var(--lime)}
.cities-scale{margin-top:4px;font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cities + .notclaim{margin-top:20px}
#cities .rec{margin-top:14px}
@media(max-width:520px){.city{grid-template-columns:104px minmax(0,1fr) 52px;gap:10px;font-size:13.5px}}
.assist{background:var(--soft);border-radius:var(--r-lg);padding:22px 24px;display:grid;gap:10px;min-width:0}
.assist .k{font:600 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.assist .url code{display:block;padding:12px 14px;background:#fff;border-radius:12px;font:600 14px/1.4 var(--mono);overflow-wrap:anywhere}
.assist ol{margin:4px 0 0;padding-left:20px;display:grid;gap:6px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.assist .note{font-size:13px;line-height:1.5;color:var(--muted)}
.assist .note code{font-family:var(--mono);font-size:12px;overflow-wrap:anywhere}

/* ═══════════════════════════════════════════════════════════════════════════
   v11 — THE MOVEMENT HOMEPAGE (design/BRIEF-V11-MOVEMENT-SITE.md, 14 Oct 2026)
   One promise, one button, the founder beside the promise, proof from our own
   brand, then why it is free, everything included, the coalition, free tools
   and the same button again. Same tokens: white and warm grey, near-black ink,
   lime only as a fill (on dark it may be text). mv- = movement, fv- = founder
   video.
   ═══════════════════════════════════════════════════════════════════════════ */
.btn.big{min-height:54px;padding:0 30px;font-size:16px}
.mv-eyebrow{font:600 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mv-quiet{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);font-weight:500;font-size:15px;text-decoration:underline;text-decoration-color:rgba(16,17,16,.35);text-underline-offset:4px}
.mv-quiet:hover{color:var(--ink);text-decoration-color:var(--ink)}
.mv-stamp{display:block;margin-top:6px;font:500 10.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mv-sechead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(12px,3vw,48px);align-items:end;margin-bottom:clamp(22px,3.6vh,40px)}
.mv-sechead h2{font-size:clamp(30px,4.2vw,56px);letter-spacing:-.04em;line-height:1}
.mv-sechead p{color:var(--muted);font-size:clamp(15px,1.2vw,17px);line-height:1.55;max-width:46ch}
@media(max-width:820px){.mv-sechead{grid-template-columns:minmax(0,1fr)}}

/* hero */
.mv-hero{padding-block:clamp(24px,4.5vh,60px) clamp(40px,6vh,84px)}
.mv-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);grid-template-areas:"head video" "act video";column-gap:clamp(28px,4.2vw,68px);row-gap:20px;align-items:start}
.mv-head{grid-area:head;align-self:end;min-width:0}
.mv-act{grid-area:act;min-width:0}
.mv-kicker{display:inline-flex;align-items:center;gap:9px;font:600 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);background:var(--soft);padding:8px 13px;border-radius:100px}
.mv-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px var(--lime-soft);flex:none}
.mv-hero h1{margin-top:18px;font-size:clamp(40px,6.1vw,86px);line-height:.95;letter-spacing:-.048em;max-width:12ch}
.mv-hero h1 .em{white-space:nowrap;background:linear-gradient(transparent 58%,var(--lime) 58%,var(--lime) 90%,transparent 90%);padding-inline:.06em}
.mv-sub{font-size:clamp(16px,1.35vw,19px);color:var(--ink-2);max-width:40ch;line-height:1.5}
.mv-cta{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;margin-top:22px}
.mv-ticks{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--ink-2)}
.mv-ticks li{display:inline-flex;align-items:center;gap:7px}
.mv-ticks li::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23101110%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 12.5 4 4L18 8%22/%3E%3C/svg%3E") center/11px no-repeat}
.mv-proofline{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-2);max-width:48ch;line-height:1.5}
.mv-proofline b{font-weight:600;color:var(--ink)}
.mv-price{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--muted);max-width:56ch}

/* founder video — the 16:9 box is sized before anything loads, and the poster,
   a <video> or an <iframe> all fill it, so nothing jumps when the video arrives */
.fv{grid-area:video;align-self:center;margin:0;min-width:0}
.fv-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#0D0F0D;box-shadow:0 34px 70px -34px rgba(16,17,16,.5)}
.fv-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block}
.fv-placeholder .fv-media{object-position:30% 16%}
.fv-placeholder .fv-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,13,0) 40%,rgba(13,15,13,.62))}
.fv-play{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;background:var(--lime);display:grid;place-items:center;z-index:1;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.fv-play svg{width:30px;height:30px;fill:var(--ink);margin-left:4px}
.fv-soon{position:absolute;left:14px;bottom:14px;z-index:1;font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.94);padding:8px 11px;border-radius:100px}
.fv-cap{margin-top:12px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.fv-cap b{color:var(--ink);font-weight:600}
@media(max-width:900px){
  .mv-hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "video" "act";row-gap:18px}
  .mv-hero h1{font-size:clamp(38px,10.4vw,60px);max-width:none}
  .fv-play{width:62px;height:62px;margin:-31px 0 0 -31px}
  .fv-play svg{width:24px;height:24px}
}
@media(max-width:360px){.mv-hero h1 .em{white-space:normal}}

/* proof */
.mv-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mv-tile{background:var(--soft);border-radius:var(--r-md);padding:18px 18px 20px;min-width:0}
.mv-tile b{display:block;font-size:clamp(23px,2.5vw,36px);font-weight:600;letter-spacing:-.04em;line-height:1.08;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mv-tile > span{display:block;margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.4}
.mv-tile.free{background:var(--lime)}
.mv-tile.free > span{color:var(--ink-2)}
@media(max-width:960px){.mv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mv-crore{margin-top:22px;font-size:clamp(16px,1.5vw,20px);line-height:1.45;max-width:54ch}
.mv-mkts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.mv-mkt{border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;min-width:0}
.mv-mkt .k{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mv-mkt .v{margin-top:10px;font-size:15px;line-height:1.45}
.mv-mkt .stamp{margin-top:10px}
@media(max-width:640px){.mv-mkts{grid-template-columns:minmax(0,1fr)}}
.mv-note{margin-top:16px;font-size:13px;line-height:1.55;color:var(--muted);max-width:72ch}

/* why it is free — a signed note */
.mv-why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,76px);align-items:center}
.mv-three{list-style:none;counter-reset:n;margin:18px 0 0;padding:0;display:grid;gap:12px}
.mv-three li{counter-increment:n;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;font-size:clamp(18px,1.75vw,24px);letter-spacing:-.02em;line-height:1.3}
.mv-three li::before{content:counter(n,decimal-leading-zero);font:600 12px/2.1 var(--mono);color:var(--lime-ink)}
.mv-quote{margin:28px 0 0;padding:2px 0 2px 18px;border-left:3px solid var(--lime)}
.mv-quote p{font-family:var(--serif);font-style:italic;font-size:clamp(25px,2.7vw,38px);line-height:1.14;letter-spacing:-.01em}
.mv-quote .em{background:var(--lime-soft)}
.mv-sign{margin-top:16px;display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--muted)}
.mv-sign .sig{font-family:var(--serif);font-style:italic;font-size:28px;line-height:1;color:var(--ink)}
.mv-floor{margin:0;min-width:0}
.mv-floor img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-lg)}
.mv-floor figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
@media(max-width:900px){.mv-why-grid{grid-template-columns:minmax(0,1fr)}}

/* everything included */
.mv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mv-area{display:flex;flex-direction:column;gap:8px;min-height:158px;padding:18px;background:#fff;border-radius:var(--r-md);text-decoration:none;color:var(--ink);border:1px solid transparent;min-width:0;transition:border-color .16s ease,transform .16s ease}
.mv-area:hover{border-color:var(--ink);transform:translateY(-2px)}
.mv-area .ico{background:var(--lime-soft);color:var(--lime-ink)}
.mv-area b{font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.mv-area > span:not(.ico){font-size:13.5px;line-height:1.4;color:var(--muted)}
.mv-area .chip{margin-top:auto;align-self:flex-start;font-style:normal}
.mv-area.later{background:#FFFBF2;border:1.5px dashed #D9B66A}
.mv-area.later .ico{background:var(--amber-soft);color:var(--amber)}
@media(max-width:960px){.mv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.mv-area{min-height:0;padding:14px}.mv-area .chip{margin-top:6px}.mv-area > span:not(.ico){display:none}}  /* phones: icon, name and chip — the area page has the rest */
.mv-more{margin-top:20px;font-size:15px}

/* the coalition */
.mv-net{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:12px}
.mv-netfig{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:10px;min-width:0}
.mv-netfig > b{font-size:clamp(46px,6vw,82px);font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--lime);font-variant-numeric:tabular-nums}
.mv-netfig > span{font-size:15.5px;line-height:1.45;color:#D6D9CF;max-width:32ch}
.mv-netfig .stamp{margin-top:2px;color:#A9ADA2}
.mv-netfig .link{color:#fff;border-color:rgba(255,255,255,.45);align-self:flex-start;margin-top:auto;padding-top:10px}
.mv-trend{background:var(--soft);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);min-width:0}
.mv-trend > .k{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mv-bars{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.mv-bars li{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.35fr) auto;gap:12px;align-items:center;font-size:14px}
.mv-bars .b{height:10px;border-radius:10px;background:#fff;overflow:hidden}
.mv-bars .b i{display:block;height:100%;background:#B9BCB2;border-radius:10px}
.mv-bars li.hl .b i{background:var(--lime)}
.mv-bars li.hl .k{font-weight:600;color:var(--ink)}
.mv-bars .k{color:var(--ink-2);min-width:0}
.mv-bars b{font-variant-numeric:tabular-nums;font-weight:600}
@media(max-width:860px){.mv-net{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.mv-bars li{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}.mv-bars .b{grid-column:1/-1;grid-row:2}}
.mv-fence{margin-top:12px;display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;padding:16px 18px}
.mv-fence .chip{margin:0}
.mv-fence p{font-size:14px;line-height:1.5;color:var(--ink-2);max-width:64ch}
.mv-seats-wrap{margin-top:clamp(28px,4vh,44px)}
.mv-seats{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.seat{border-radius:var(--r-md);min-height:112px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:14px;min-width:0}
.seat b{font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.seat > span,.seat a > span{font-size:12.5px;line-height:1.35;color:var(--muted)}
.seat.taken{background:var(--lime)}
.seat.taken > span{color:var(--ink-2)}
.seat.open{border:1.5px dashed #CFCFC6}
.seat.open b{color:var(--muted);font-weight:500}
.seat.yours{padding:0}
.seat.yours a{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;height:100%;min-height:112px;padding:14px;border-radius:var(--r-md);background:var(--ink);color:#fff;text-decoration:none}
.seat.yours a span{color:var(--lime)}
.seat.yours a:hover{box-shadow:0 10px 24px rgba(16,17,16,.2)}
@media(max-width:960px){.mv-seats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.mv-seats{grid-template-columns:repeat(2,minmax(0,1fr))}.seat,.seat.yours a{min-height:86px}}
.mv-rule{margin-top:22px;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:72ch}

/* free tools */
.mv-toolcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mv-toolcard{display:flex;flex-direction:column;gap:8px;padding:20px;min-height:150px;background:#fff;border-radius:var(--r-md);text-decoration:none;color:var(--ink);border:1px solid transparent;min-width:0;transition:border-color .16s ease}
.mv-toolcard:hover{border-color:var(--ink)}
.mv-toolcard b{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.mv-toolcard > span{font-size:14px;line-height:1.45;color:var(--muted)}
.mv-toolcard em{margin-top:auto;font-style:normal;font-weight:600;font-size:14px}
@media(max-width:860px){.mv-toolcards{grid-template-columns:minmax(0,1fr)}.mv-toolcard{min-height:0}}

/* closing */
.mv-joinbox{background:var(--ink);color:#fff;border-radius:calc(var(--r-lg) + 6px);padding:clamp(28px,5vw,64px);display:grid;gap:20px;justify-items:start}
.mv-joinbox h2{font-size:clamp(32px,5vw,66px);letter-spacing:-.045em;line-height:.98;max-width:15ch}
.mv-joinbox h2 .em{color:var(--lime)}
.mv-joinbox .mv-cta{margin-top:0}
.mv-joinbox .mv-price{margin-top:0;color:#B6B9B0}
.mv-quiet.on-dark{color:#fff;text-decoration-color:rgba(255,255,255,.45)}
@media(prefers-reduced-motion:reduce){.mv-area,.mv-toolcard{transition:none}.mv-area:hover{transform:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   v11 — THE REST OF THE SITE. The homepage's voice on every inner page: the
   kicker pill, the lime-highlighted headline, one "Launch free" row, and the
   same dark closing box (layout.mjs ctaBand). Old .phero pages pick up the
   highlight and the pill from the two rules marked "every page".
   ═══════════════════════════════════════════════════════════════════════════ */
/* chips that may need two lines on a phone (never run past the card edge) */
.mv-area .chip,.mv-pcard .chip,.mv-paste-box .chip{max-width:100%;white-space:normal;line-height:1.35;text-align:left}
.mv-area .chip::before,.mv-pcard .chip::before,.mv-paste-box .chip::before{flex:none}

/* focus on the dark boxes: an ink ring would vanish on ink */
.mv-joinbox :focus-visible,.mv-netfig :focus-visible,.seat.yours a:focus-visible{outline-color:var(--lime)}

/* sub-page hero */
.mv-phero{padding-block:clamp(26px,5vh,64px) clamp(34px,5.5vh,72px)}
.mv-phero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4.2vw,68px);align-items:center}
.mv-phero-grid.solo{grid-template-columns:minmax(0,1fr)}
.mv-phero-t{min-width:0}
.mv-phero h1{margin-top:18px;font-size:clamp(36px,5vw,70px);line-height:.98;letter-spacing:-.045em;max-width:13ch}
.mv-phero-grid.solo h1{max-width:18ch}
.mv-phero .mv-sub{margin-top:16px}
.mv-phero .mv-price{margin-top:12px}
@media(max-width:900px){.mv-phero-grid{grid-template-columns:minmax(0,1fr)}.mv-phero h1{max-width:none;font-size:clamp(34px,9.6vw,56px)}}
/* every page: the headline accent is the lime highlight, as on the homepage */
.mv-phero h1 .em,.phero h1 .em{color:var(--ink);background:linear-gradient(transparent 58%,var(--lime) 58%,var(--lime) 90%,transparent 90%);padding-inline:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.area-hero h1 .em{display:inline;margin-top:0}
/* every page: the kicker is a pill, as on the homepage */
.phero .kick{background:var(--soft);padding:6px 13px 6px 6px;border-radius:100px}
.phero .kick .ico{width:26px;height:26px;border-radius:50%;background:#fff}
.phero .kick .ico svg{width:15px;height:15px}
.phero .kick:not(:has(.ico)){padding-left:13px}

/* /free — the free plan, today */
.mv-plan{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);gap:12px}
.mv-pcard{background:var(--soft);border-radius:var(--r-md);padding:18px 18px 20px;min-width:0;display:flex;flex-direction:column;gap:8px}
.mv-pcard > b{font-size:clamp(26px,2.8vw,40px);font-weight:600;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.mv-pcard > span{font-size:14px;color:var(--ink-2);line-height:1.45}
.mv-pcard.free{background:var(--lime)}
.mv-pcard.later{background:#FFFBF2;border:1.5px dashed #D9B66A}
.mv-pcard.later .t{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.mv-pcard .chip{align-self:flex-start;font-style:normal}
@media(max-width:960px){.mv-plan{grid-template-columns:repeat(2,minmax(0,1fr))}.mv-pcard.free,.mv-pcard.later{grid-column:1/-1}}

/* /proof */
.mv-tiles.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.mv-tiles.c3{grid-template-columns:minmax(0,1fr)}}
.mv-tile.line{background:#fff;border:1px solid var(--line)}
.mv-tile .k{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
a.mv-mkt{text-decoration:none;color:var(--ink);background:#fff;transition:border-color .16s ease}
a.mv-mkt:hover{border-color:var(--ink)}
.mv-never-grid{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(14px,4vw,56px);align-items:start}
.mv-h3{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.035em;line-height:1.05}
.mv-never-grid .mv-note{margin-top:8px}
.mv-nevers{list-style:none;margin:0;padding:0}
.mv-nevers li{position:relative;padding:12px 0 12px 28px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45}
.mv-nevers li:first-child{padding-top:4px}
.mv-nevers li::before{content:"";position:absolute;left:4px;top:calc(12px + .72em);width:12px;height:2px;border-radius:2px;background:var(--ink)}
.mv-nevers li:first-child::before{top:calc(4px + .72em)}
@media(max-width:820px){.mv-never-grid{grid-template-columns:minmax(0,1fr)}}

/* /start — the one line for an AI assistant */
.mv-paste{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(18px,4vw,56px);align-items:center;background:var(--soft);border-radius:var(--r-lg);padding:clamp(20px,3.4vw,40px)}
.mv-paste-t{min-width:0}
.mv-paste-t h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.04em;line-height:1.02}
.mv-paste-t p{margin-top:12px;color:var(--ink-2);font-size:15.5px;line-height:1.55;max-width:44ch}
.mv-paste-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px;min-width:0}
.mv-paste-box .k{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mv-paste-row{display:flex;gap:10px;align-items:stretch;margin-top:10px}
.mv-paste-row code{flex:1;min-width:0;font:500 14px/1.55 var(--mono);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px 14px;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all;color:var(--ink)}
.mv-paste-row .btn{flex:none;min-width:96px}
.mv-paste-row .btn[hidden]{display:none}  /* .btn's display would otherwise beat [hidden]: no dead button without JS */
.mv-paste-box .copied{min-height:1.4em;margin-top:6px;font-size:13px;color:var(--lime-ink)}
.mv-paste-box .chips{display:flex;flex-wrap:wrap;gap:8px}
.mv-never{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.mv-never b{color:var(--ink);font-weight:600}
@media(max-width:860px){.mv-paste{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.mv-paste-row{flex-direction:column}.mv-paste-row .btn{min-height:46px}}
@media(prefers-reduced-motion:reduce){a.mv-mkt{transition:none}}

/* ── v12: merged from master (25 Oct 2026) ─────────────────────────────────
   The company's legal identity line, full width under the footer row, so Meta,
   banks and app stores can match the site to the company record. */
.foot-bot span.foot-legal{flex-basis:100%;max-width:none;letter-spacing:.02em;line-height:1.6}
.foot-bot .foot-legal a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Is it up? — the outside monitor on /status */
.chip.down{background:#FBE7E3;color:var(--red)}
.uptime{display:grid;gap:10px}
.up-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 20px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.up-row>div{min-width:0;flex:1;display:grid;gap:6px}
.up-row b{font-size:16px}
.up-row span{font-size:14px;color:var(--muted)}
.up-fig{font:500 12.5px/1.5 var(--mono)}
.up-fig b{font:700 15px/1 var(--sans);color:var(--lime-ink)}
.up-wait{color:var(--amber)!important;font-weight:600}
.up-bars{display:flex;gap:2px;height:22px;max-width:620px;margin-top:4px}
.up-bars i{flex:1;min-width:0;border-radius:2px;background:var(--soft-2)}
.up-bars i.ok{background:var(--lime)}
.up-bars i.warn{background:#E9B44C}
.up-bars i.bad{background:var(--red)}
.up-cap{display:flex;justify-content:space-between;max-width:620px;font:600 9.5px/1 var(--mono)!important;letter-spacing:.12em;text-transform:uppercase}
.up-row .chip{flex:none}

/* The plan with nothing held back: three cards fill the row (no "later" card). */
.mv-plan:not(:has(.later)){grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}

/* ═══ v12 — six countries, the waitlist (1 Nov 2026) ═══════════════════════ */
/* Six countries, one system: one card per market, its own bottle. */
.mk-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(12px,3vw,48px);align-items:end;margin-bottom:clamp(22px,3.6vh,40px)}
.mk-head h2{font-size:clamp(30px,4.2vw,56px);letter-spacing:-.04em;line-height:1}
.mk-head p{color:var(--muted);font-size:clamp(15px,1.2vw,17px);line-height:1.55;max-width:46ch}
.mk-logo{width:clamp(120px,14vw,170px);height:auto;display:block;margin:0 0 14px -6px}
.mk-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mk-card{position:relative;overflow:hidden;background:var(--soft);border-radius:var(--r-lg);padding:20px 20px 22px;min-height:230px;display:flex;flex-direction:column;gap:8px}
.mk-card h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;max-width:12ch}
.mk-card .mk-how{color:var(--muted);font-size:14px;line-height:1.5;max-width:24ch;position:relative;z-index:1}
.mk-top{display:flex;align-items:center;gap:8px}
.mk-code{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 7px;border-radius:7px;background:var(--ink);color:#fff;font:700 11px/1 var(--mono);letter-spacing:.08em}
.mk-fig{margin-top:auto;display:grid;gap:2px;position:relative;z-index:1}
.mk-n{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.04em;line-height:1;font-weight:600}
.mk-n.soon{color:var(--muted);font-weight:500}
.mk-l{font-size:13px;color:var(--muted)}
.mk-bottle{position:absolute;right:14px;bottom:-26px;width:auto;height:150px;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(16,17,16,.18));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.mk-card:hover .mk-bottle{transform:translateY(-8px) rotate(-3deg)}
.mk-card.soon{background:#fff;border:1px dashed var(--line)}
.mk-sec .stamp{margin-top:18px}
@media(max-width:980px){.mk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mk-head{grid-template-columns:1fr}}
@media(max-width:560px){.mk-grid{grid-template-columns:1fr}.mk-card{min-height:190px}.mk-bottle{height:130px}}
@media(prefers-reduced-motion:reduce){.mk-bottle{transition:none}.mk-card:hover .mk-bottle{transform:none}}

/* /markets — a shelf of bottles in the hero, then one row per country. */
.mk-shelf{display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,1vw,14px);min-height:220px;padding:28px 18px 0;background:linear-gradient(180deg,var(--soft) 0,var(--soft) 78%,var(--soft-2) 78%);border-radius:var(--r-lg);overflow:hidden}
.mk-shelf img{height:clamp(110px,15vw,190px);width:auto;filter:drop-shadow(0 12px 14px rgba(16,17,16,.16))}
.mk-shelf img:nth-child(even){height:clamp(96px,13vw,165px)}
.mk-list{display:grid;gap:12px}
.mk-row{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,.8fr);gap:clamp(16px,3vw,40px);align-items:start;padding:clamp(20px,3vw,32px);padding-right:clamp(20px,12vw,170px);background:var(--soft);border-radius:var(--r-lg)}
.mk-row.soon{background:#fff;border:1px dashed var(--line)}
.mk-row-id{display:grid;gap:8px;justify-items:start}
.mk-row-id h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.035em}
.mk-cur{font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mk-row-how .mk-how{font-size:16px;line-height:1.5;margin-bottom:12px;max-width:40ch}
.mk-row-how ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mk-row-how li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.mk-row-how li .ico{flex:none;width:18px;height:18px;color:var(--lime-ink);margin-top:1px}
.mk-row-fig{display:grid;gap:2px;align-content:start}
.mk-row-fig .stamp{margin-top:10px}
.mk-row-bottle{position:absolute;right:clamp(10px,2.5vw,34px);bottom:-18px;height:clamp(120px,14vw,200px);width:auto;filter:drop-shadow(0 14px 18px rgba(16,17,16,.18))}
@media(max-width:900px){.mk-row{grid-template-columns:1fr;padding-right:clamp(20px,3vw,32px);padding-bottom:110px}.mk-row-bottle{height:120px}}

/* The waitlist — the dark box, the 100, the form. */
.wl-box{background:var(--ink);color:#fff;border-radius:calc(var(--r-lg) + 6px);padding:clamp(26px,5vw,60px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
.wl-intro h2{font-size:clamp(32px,4.6vw,60px);letter-spacing:-.045em;line-height:.98;margin:18px 0 14px}
.wl-intro h2 .em{color:var(--lime)}
.wl-intro p{color:#C9CCC3;font-size:15.5px;line-height:1.6;max-width:42ch}
.wl-badge{display:inline-flex;align-items:center;gap:12px}
.wl-badge b{font-size:clamp(46px,6vw,72px);line-height:.9;letter-spacing:-.05em;color:var(--lime);font-weight:600}
.wl-badge span{font:600 11px/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#C9CCC3}
.wl{display:grid;gap:16px}
.wl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wl-f{display:grid;gap:6px;min-width:0}
.wl-f.wide{grid-column:1/-1}
.wl-f>span{font-size:13px;color:#C9CCC3}
.wl-f i{font-style:normal;color:#8E9288}
.wl input,.wl select{width:100%;min-height:50px;border-radius:12px;border:1px solid #3A3D38;background:#1B1D1B;color:#fff;font:inherit;font-size:16px;padding:0 14px}
.wl select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#C9CCC3 50%),linear-gradient(135deg,#C9CCC3 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.wl input::placeholder{color:#7C8078}
.wl input:focus,.wl select:focus{outline:2px solid var(--lime);outline-offset:1px;border-color:transparent}
.wl-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.wl-act .btn{background:var(--lime);color:var(--ink)}
.wl-act .btn:disabled{opacity:.7;cursor:default}
.wl-fine{font-size:12.5px;color:#9A9E95;max-width:34ch;line-height:1.45}
.wl-msg{display:none;font-size:14.5px;line-height:1.5;padding:12px 14px;border-radius:12px}
.wl-msg.show{display:block}
.wl-msg.ok{background:rgba(200,240,75,.14);color:var(--lime)}
.wl-msg.err{background:rgba(180,67,47,.22);color:#FFB4A6}
.wl-box :focus-visible{outline-color:var(--lime)}
@media(max-width:900px){.wl-box{grid-template-columns:1fr}}
@media(max-width:520px){.wl-grid{grid-template-columns:1fr}}

/* /waitlist hero: three steps beside the headline. */
.wl-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:wl}
.wl-steps li{counter-increment:wl;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;padding:16px 18px;background:var(--soft);border-radius:var(--r-md)}
.wl-steps li::before{content:counter(wl);grid-row:1/span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--lime);font-weight:700;font-size:14px}
.wl-steps b{font-size:17px}
.wl-steps span{color:var(--muted);font-size:14px;line-height:1.45}
.mv-price-foot{margin-top:-34px;margin-bottom:40px;font-size:12.5px;color:var(--muted);text-align:center}
/* v12 fixes after the first look */
.mk-shelf{min-height:0;padding:24px 16px 0;gap:clamp(6px,1.4vw,18px)}
.mk-shelf img,.mk-shelf img:nth-child(even){height:clamp(84px,11.5vw,168px)}
.mk-shelf img:nth-child(even){height:clamp(74px,10vw,146px)}
.wl-intro h2:first-child{margin-top:0}
@media(max-width:900px){
  .mk-row{padding-bottom:clamp(20px,3vw,32px);padding-right:clamp(96px,26vw,130px)}
  .mk-row-bottle{top:20px;bottom:auto;height:96px}
}
@media(max-width:560px){
  .mk-row{padding-right:20px}
  .mk-row-id{padding-right:64px}
  .mk-row-bottle{right:14px;height:84px}
  .mk-card{min-height:0;padding:16px 16px 18px;gap:6px}
  .mk-card .mk-how{max-width:none;padding-right:72px}
  .mk-fig{margin-top:6px}
  .mk-bottle{height:104px;bottom:-18px}
}

/* ═══ v13 — the one-page frame on every page (2 Nov 2026) ═══════════════════ */
.nav-min .nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-min .mark-img img{height:32px;width:auto;display:block}
.btn.btn-ink{background:#1A8139;color:#fff;border-color:#1A8139}
.btn.btn-ink:hover{background:#167333;border-color:#167333}
.foot-min{background:#fff;border-top:1px solid #E6E6E6;padding-block:28px 44px}
.foot-min-in{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;font-size:13px;color:#666}
.foot-min .co{display:grid;gap:5px;line-height:1.5}
.foot-min .co b{color:#0A0A0A;font-size:14px}
.foot-min a{color:#333}
.foot-min .lg{display:flex;flex-wrap:wrap;gap:6px 16px;align-content:start;max-width:52ch}
.foot-min .lg a,.foot-min .co a{display:inline-flex;align-items:center;min-height:28px}
@media(max-width:520px){.nav-min .mark-img img{height:26px}}
/* the consent bar's allow button follows the black-and-white frame */
#gm-consent button[data-choice="allow"]{background:#0A0A0A!important;border-color:#0A0A0A!important;color:#fff!important}