*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);
     font-size:var(--t-base);font-weight:300;line-height:1.65;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}

.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:var(--s3)}
.wrap-narrow{max-width:620px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;background:var(--accent);color:#0a0612;padding:var(--s2);z-index:200}
.skip:focus{left:var(--s2);top:var(--s2)}
/* Any link not otherwise styled keeps the colour of the text around it and is
   marked by an underline rather than by turning blue. */
a{color:inherit;text-decoration:underline;text-underline-offset:.2em;
  text-decoration-thickness:1px;text-decoration-color:var(--line-strong);
  transition:text-decoration-color .2s}
a:hover{text-decoration-color:var(--ink-mid)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.mock-flag{position:fixed;bottom:0;left:0;right:0;z-index:300;background:#3a1d5c;color:#e9dcff;
  text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px}
.mock-flag a{color:#fff}

/* ─── NAV ──────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);height:56px;padding-inline:var(--s3);max-width:1080px;margin-inline:auto;
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.stuck{background:rgba(8,5,15,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom-color:var(--line);margin-inline:0;max-width:none;
  padding-inline:max(var(--s3),calc(50vw - 540px + var(--s3)))}
.nav-brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink-hi)}
.nav-mark{mix-blend-mode:screen;opacity:.9}
.nav-brand span{font-family:var(--serif);font-weight:500;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:var(--s3)}
.nav-links a{font-size:var(--t-sm);color:var(--ink-mid);text-decoration:none;transition:color .2s;white-space:nowrap}
.nav-links a:hover{color:var(--ink-hi)}
.nav-links a[href^="/store"]{color:var(--ink-hi);border:1px solid var(--line-strong);
  padding:.34rem .8rem;border-radius:100px}
.nav-links a[href^="/store"]:hover{background:var(--accent-quiet);border-color:var(--accent)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--ink-mid)}

/* ─── THE OPENING — a sentence, not a billboard ──────────────────────────
   Set at reading size, not display size. It states a fact and stops. */
.opening{padding:var(--s7) 0 var(--s6)}
.statement{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.05rem);line-height:1.38;letter-spacing:.005em;
  color:var(--ink-hi);max-width:34ch}
.statement-rest{display:block;color:var(--ink-mid);margin-top:.55rem}

/* ─── THE SPECIMEN ───────────────────────────────────────────────────────
   A bounded stage with its OWN still ground — the ambient layer is paused
   while this is on screen so they never share GPU fill rate. */
.specimen{padding:var(--s3) 0 var(--s6)}
.specimen-stage{position:relative;padding:var(--s6) var(--s3);
  background:radial-gradient(ellipse 70% 60% at 50% 45%,#0c0818 0%,#07040f 70%,var(--ground) 100%);
  border-block:1px solid var(--line)}
.specimen-frame{position:relative;width:min(330px,76vw);aspect-ratio:9/15.4;margin-inline:auto;
  border-radius:26px;overflow:hidden;border:1px solid var(--line-strong);
  box-shadow:0 30px 80px rgba(2,1,8,.72), 0 0 1px rgba(255,255,255,.06) inset;
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
.specimen-frame:hover{transform:translateY(-6px);box-shadow:0 40px 100px rgba(2,1,8,.8),0 0 70px rgba(153,89,217,.16)}
.specimen-frame iframe{position:absolute;top:0;left:0;width:390px;height:844px;border:0;
  transform-origin:top left;transform:scale(.846);pointer-events:none}
.specimen-hit{position:absolute;inset:0;display:block;text-decoration:none}
/* A functional caption, not marketing copy. PlayCanvas's "DRAG TO ROTATE". */
.specimen-caption{margin-top:var(--s4);text-align:center;font-size:var(--t-sm);color:var(--ink-mid)}
.cap-live{display:inline-flex;align-items:center;gap:.4rem;margin-right:.6rem;
  font-size:10px;letter-spacing:.18em;color:var(--green-glow)}
.cap-live::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green-glow);
  box-shadow:0 0 8px var(--green-glow)}

/* ─── SPEC — warmth and rigour in the SAME frame (Playdate's move) ─────── */
.spec{padding:var(--s6) 0}
.spec-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s6);align-items:start}
.spec-line{font-family:var(--serif);font-style:italic;font-size:var(--t-lg);color:var(--moon-gold)}
.spec-body{margin-top:var(--s3);color:var(--ink);max-width:46ch}
.spec-not{margin-top:var(--s3);font-size:var(--t-sm);font-weight:500;color:var(--ink-mid);
  padding-left:var(--s2);border-left:2px solid var(--accent)}
.spec-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4);
  padding-top:.4rem;border-top:1px solid var(--line)}
.spec-facts dt{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-low)}
.spec-facts dd{font-family:var(--serif);font-size:1.7rem;line-height:1.1;color:var(--ink-hi);margin-top:.1rem}
.spec-facts dd.inf{color:var(--moon-gold)}
.spec-facts dd.sm{font-size:.92rem;font-family:var(--sans);color:var(--ink);line-height:1.5}
.spec-facts dd.sm span{color:var(--ink-low)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.btn{display:inline-block;font-size:var(--t-sm);font-weight:500;letter-spacing:.03em;
  text-decoration:none;cursor:pointer;padding:.78rem 1.55rem;border-radius:100px;
  border:1px solid transparent;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.btn-primary{background:var(--accent);color:#120a1e;border-color:var(--accent)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(176,124,232,.32)}
.btn-ghost{color:var(--ink-hi);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent);background:var(--accent-quiet)}

/* ─── THE LEDGER — replaces the three-card grid ───────────────────────────
   The single most template-coded element on the modern web was a 3-card row.
   A ledger carries a WHEN column, so it cannot silently go stale the way
   "Coming this month" did. */
.status{padding:var(--s6) 0;border-top:1px solid var(--line)}
.sec-h{font-family:var(--serif);font-weight:400;font-size:var(--t-xl);color:var(--ink-hi)}
.ledger{list-style:none;margin-top:var(--s4)}
.led{display:grid;grid-template-columns:8.5rem 1fr auto;gap:var(--s3);align-items:baseline;
  padding:var(--s3) 0;border-top:1px solid var(--line)}
.led:last-child{border-bottom:1px solid var(--line)}
.led-when{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-low)}
.led-now .led-when{color:var(--green-glow)}
.led-what{color:var(--ink-mid);font-size:var(--t-sm)}
.led-what strong{color:var(--ink-hi);font-weight:500}
.led-do{font-size:var(--t-sm);font-weight:500;color:var(--accent);text-decoration:none;white-space:nowrap}
.led-do:hover{color:var(--ink-hi)}
.led-quiet .led-what{color:var(--ink-low)}

/* ─── LIST ─────────────────────────────────────────────────────────────── */
.list{padding:var(--s6) 0;border-top:1px solid var(--line);text-align:center}
.list-sub{margin:var(--s2) auto 0;color:var(--ink-mid);max-width:46ch}
.signup{margin-top:var(--s4)}
.signup-row{display:flex;gap:.5rem;max-width:440px;margin-inline:auto;
  background:var(--ground-raised);border:1px solid var(--line-strong);
  border-radius:100px;padding:.3rem .3rem .3rem 1.15rem}
.signup-row:focus-within{border-color:var(--accent)}
.signup-row input{flex:1;min-width:0;background:none;border:0;color:var(--ink-hi);
  font-family:var(--sans);font-size:var(--t-base);outline:none}
.signup-row input::placeholder{color:var(--ink-low)}
.signup-note{margin-top:var(--s2);font-size:var(--t-xs);color:var(--ink-low)}

/* ─── THE INDEX — a working document, not a pitch ─────────────────────── */
.index{padding:var(--s6) 0;border-top:1px solid var(--line)}
.idx{list-style:none;margin-top:var(--s3)}
.idx a{display:grid;grid-template-columns:3rem 14rem 1fr;gap:var(--s3);align-items:baseline;
  padding:var(--s3) 0;border-top:1px solid var(--line);text-decoration:none;transition:background .2s}
.idx li:last-child a{border-bottom:1px solid var(--line)}
.idx a:hover{background:rgba(176,124,232,.045)}
.idx-n{font-size:var(--t-xs);color:var(--ink-low);letter-spacing:.1em}
.idx-t{font-family:var(--serif);font-size:var(--t-md);color:var(--ink-hi)}
.idx-d{font-size:var(--t-sm);color:var(--ink-low)}

/* ─── FOOTER ─────────────────────────────────────────────────────────────
   🔴 NOT position:fixed. iOS 26 Safari hard-clips fixed content that extends
   below the floating bottom nav controls (Apple Dev Forums #800798, open
   since Sept 2025). A normal-flow footer is immune. */
.foot{margin-top:var(--s6);padding:var(--s5) 0 calc(var(--s5) + 34px);
  border-top:1px solid var(--line);background:var(--ground-sunk)}
.foot-co{font-family:var(--serif);font-size:var(--t-sm);letter-spacing:.18em;color:var(--ink-mid)}
.foot-note{margin-top:var(--s3);font-size:var(--t-xs);line-height:1.75;color:var(--ink-low);max-width:64ch}
.foot-note strong{color:var(--ink-mid);font-weight:600}
.foot-legal{margin-top:var(--s2);font-size:var(--t-xs);color:var(--ink-low)}
.foot-legal a{color:var(--ink-mid);text-decoration:underline;
  text-decoration-color:var(--line-strong);text-underline-offset:.2em}
.foot-legal a:hover{color:var(--ink-hi);text-decoration-color:var(--ink-mid)}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════
   🔴 v1's two-column died at 880px, but iPad portrait is 820 and Android
   tablets are 800 — so the whole 768–880 band got the PHONE layout at tablet
   width: one narrow column adrift in 800px. Found by rendering, not reasoning.
   v2 gives that band its own treatment. */

/* TABLET PORTRAIT — 700–1000px. Its own layout, not a squeezed desktop
   and not a stretched phone. */
@media (max-width:1000px){
  .spec-grid{grid-template-columns:1fr;gap:var(--s4)}
  .spec-facts{grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding-top:var(--s3)}
  .spec-body{max-width:58ch}
  .statement{max-width:26ch;font-size:clamp(1.5rem,4vw,1.95rem)}
  /* the specimen grows into the space instead of floating in it */
  .specimen-frame{width:min(360px,54vw)}
  .idx a{grid-template-columns:2.5rem 12rem 1fr}
}
/* Narrow tablet / large phone */
@media (max-width:760px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:56px;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:0;background:rgba(10,6,20,.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border-block:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s}
  .nav.open .nav-links{max-height:320px}
  .nav-links a{width:100%;padding:.9rem var(--s3);font-size:var(--t-base)}
  .nav-links a[href^="/store"]{border:0;border-radius:0;color:var(--accent)}
  .opening{padding:var(--s6) 0 var(--s5)}
  .specimen-frame{width:min(310px,74vw)}
  .spec-facts{grid-template-columns:1fr 1fr}
  /* the ledger stacks: when above what, action below */
  .led{grid-template-columns:1fr;gap:.4rem}
  .led-do{justify-self:start}
  .idx a{grid-template-columns:2rem 1fr;row-gap:.2rem}
  .idx-d{grid-column:2}
}
/* Landscape phone — short and wide */
@media (max-height:520px) and (orientation:landscape){
  .opening{padding:var(--s4) 0 var(--s3)}
  .specimen{padding:var(--s2) 0 var(--s4)}
  .specimen-stage{padding:var(--s4) var(--s3)}
  .specimen-frame{width:min(220px,30vw)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001s!important;animation-duration:.001s!important}
}

/* The work label — what makes the structure scale. In 2031 this reads
   "Selected work" above five artefacts and nothing else changes. */
.work-label{margin-top:var(--s5);font-size:var(--t-xs);letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-low)}

/* Engineering scale as fact, not adjective. Sits with the content facts so
   the two kinds of credibility occupy the same frame. */
.build-note{grid-column:1/-1;margin-top:var(--s5);padding-top:var(--s3);
  border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--ink-mid)}
.build-note strong{color:var(--ink-hi);font-weight:500;font-variant-numeric:tabular-nums}

/* ─── THE PORTFOLIO ROW — the 2031 test. The specimen stage holding many
   objects instead of one. A grid declaration, not a new component. */
.portfolio{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3);align-items:start}
.pf{text-decoration:none;display:block}
.pf-frame{position:relative;display:block;width:100%;aspect-ratio:9/15.4;overflow:hidden;
  border-radius:16px;border:1px solid var(--line-strong);background:var(--ground-sunk);
  box-shadow:0 16px 44px rgba(2,1,8,.6);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.pf:hover .pf-frame{transform:translateY(-5px)}
.pf-frame iframe{position:absolute;top:0;left:0;width:390px;height:844px;border:0;
  transform-origin:top left;pointer-events:none;transform:scale(.58)}
.pf-ghost{display:grid;place-items:center;
  background:linear-gradient(160deg,#100b1e,#0a0616)}
.pf-ghost span{font-family:var(--serif);font-size:var(--t-sm);letter-spacing:.22em;color:var(--ink-low)}
.pf-n{display:block;margin-top:var(--s2);font-family:var(--serif);font-size:var(--t-md);color:var(--ink-hi)}
.pf-d{display:block;font-size:var(--t-xs);color:var(--ink-low);margin-top:.15rem}
@media (max-width:1000px){.portfolio{grid-template-columns:repeat(3,1fr)}.pf-frame iframe{transform:scale(.66)}}
@media (max-width:760px){.portfolio{grid-template-columns:repeat(2,1fr)}.pf-frame iframe{transform:scale(.70)}}

/* ═══ SHARED COMPONENTS — used across the v2 pages ═══════════════════════ */
.lede{margin-top:var(--s3);font-size:var(--t-md);color:var(--ink-mid);max-width:56ch;line-height:1.6}
.lede strong{color:var(--ink-hi);font-weight:400}
.cols{padding:var(--s6) 0;border-top:1px solid var(--line)}
.col2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);margin-top:var(--s3)}
.body{margin-top:var(--s3);color:var(--ink);max-width:56ch}
.body:first-child{margin-top:0}
.body.wide,.wide{max-width:72ch}
.body strong{color:var(--ink-hi);font-weight:500}
.body a,.lede a,.fineprint a,.warn a,.hint a,.status-note a{
  color:var(--ink-mid);text-decoration:underline;
  text-decoration-color:var(--line-strong);text-underline-offset:.2em}
.body a:hover,.lede a:hover,.fineprint a:hover,.warn a:hover,.hint a:hover,
.status-note a:hover{color:var(--ink-hi);text-decoration-color:var(--ink-mid)}
.narrow{max-width:620px;margin-inline:auto}
.center{text-align:center}
.center-h{max-width:none}
.idx-link{color:var(--accent);text-decoration:none;font-size:var(--t-sm);font-weight:500}
.fineprint{margin-top:var(--s4);font-size:var(--t-xs);color:var(--ink-low);line-height:1.8;max-width:70ch}
.hint{margin-top:.5rem;font-size:var(--t-xs);color:var(--ink-low)}
.hint.center{text-align:center;margin-top:var(--s3)}
.hint strong{color:var(--ink-mid)}
.muted{color:var(--ink-low)}

/* step rail */
.steps{display:flex;gap:0;margin-top:var(--s4);flex-wrap:wrap}
.step{display:flex;align-items:center;gap:.5rem;font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-low);padding:0 var(--s2)}
.step:first-child{padding-left:0}
.step+.step{border-left:1px solid var(--line)}
.step::before{content:'';width:18px;height:18px;border-radius:50%;border:1px solid var(--line-strong);
  display:grid;place-items:center;font-size:10px}
.step.done::before{content:'✓';background:var(--green-glow);border-color:var(--green-glow);color:#04120a}
.step.now{color:var(--ink-hi)}
.step.now::before{border-color:var(--accent);background:var(--accent-quiet)}

/* plans */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);max-width:760px}
.plan{position:relative;background:var(--ground-raised);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--s4) var(--s3) var(--s3);display:flex;flex-direction:column}
.plan-best{border-color:var(--accent);background:linear-gradient(180deg,rgba(176,124,232,.08),var(--ground-raised))}
.plan-flag{position:absolute;top:-11px;left:var(--s3);background:var(--accent);color:#150b22;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:.26rem .68rem;border-radius:100px}
.plan-name{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-low)}
.plan-price{font-family:var(--serif);font-size:2.9rem;color:var(--ink-hi);line-height:1;margin-top:var(--s2)}
.plan-price small{font-family:var(--sans);font-size:var(--t-sm);font-weight:300;color:var(--ink-mid)}
.plan-sub{margin-top:.55rem;font-size:var(--t-sm);color:var(--ink-mid);min-height:2.5em}
.plan-save{display:inline-block;margin-top:.4rem;font-size:var(--t-xs);color:var(--green-glow);
  background:rgba(77,217,89,.1);border:1px solid rgba(77,217,89,.28);padding:.2rem .6rem;border-radius:100px}
.plan .btn{margin-top:var(--s3);text-align:center}
.plan-list{list-style:none;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.55rem}
.plan-list li{font-size:var(--t-sm);color:var(--ink-mid);padding-left:1.3rem;position:relative}
.plan-list li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--accent);opacity:.6}

/* checkout */
.checkout{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start;max-width:900px}
.co-summary{background:var(--ground-raised);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3)}
.co-row{display:flex;justify-content:space-between;gap:var(--s2);font-size:var(--t-sm);
  padding:.6rem 0;border-bottom:1px solid var(--line)}
.co-row:last-of-type{border-bottom:0}
.co-row.total{font-size:var(--t-md);color:var(--ink-hi);font-weight:500;
  border-top:1px solid var(--line-strong);margin-top:var(--s2);padding-top:var(--s2)}
.field{margin-bottom:var(--s2)}
.field label{display:block;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-low);margin-bottom:.4rem}
.field input,.field textarea{width:100%;background:var(--ground-raised);border:1px solid var(--line-strong);
  border-radius:10px;padding:.75rem .95rem;color:var(--ink-hi);font-family:var(--sans);
  font-size:var(--t-base);outline:none;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.wide-btn{width:100%;text-align:center}

/* download */
.done-mark{width:62px;height:62px;border-radius:50%;margin:var(--s4) 0 var(--s3);
  display:grid;place-items:center;font-size:28px;color:#04120a;background:var(--green-glow);
  box-shadow:0 0 44px rgba(77,217,89,.3)}
.dl-card{background:var(--ground-raised);border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);padding:var(--s4)}
.dl-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.dl-name{font-family:var(--serif);font-size:1.3rem;color:var(--ink-hi)}
.dl-steps{list-style:none;counter-reset:s;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.dl-steps li{counter-increment:s;position:relative;padding-left:2.5rem;margin-bottom:var(--s3);
  font-size:var(--t-sm);color:var(--ink-mid)}
.dl-steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:25px;height:25px;
  border-radius:50%;background:var(--accent-quiet);border:1px solid var(--line-strong);
  color:var(--ink-hi);display:grid;place-items:center;font-size:12px;font-weight:600}
.dl-steps strong{color:var(--ink-hi);font-weight:500;display:block;margin-bottom:.2rem}
.quote-box{display:block;margin-top:.6rem;background:var(--ground-sunk);border:1px solid var(--line);
  border-left:2px solid var(--moon-gold);border-radius:8px;padding:.65rem .85rem;
  font-size:var(--t-xs);color:var(--ink-mid);font-style:italic}

/* notices */
.warn{background:rgba(255,233,168,.06);border:1px solid rgba(255,233,168,.28);
  border-radius:var(--radius);padding:var(--s3);margin-top:var(--s4);font-size:var(--t-sm);color:var(--ink-mid)}
.warn strong{color:var(--moon-gold);display:block;margin-bottom:.4rem}
.warn em{color:var(--ink-mid)}
.pending{background:rgba(176,124,232,.05);border:1px dashed var(--line-strong);
  border-radius:var(--radius);padding:var(--s3);margin-top:var(--s4)}
.pending-label{display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.6rem}
.pending p{font-size:var(--t-sm);color:var(--ink-mid);margin-bottom:.5rem}
.owed{font-size:var(--t-xs);color:var(--ink-low)}

/* geo */
.geo-note{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:var(--s4);
  padding:.65rem 1rem;background:var(--ground-raised);border:1px solid var(--line);
  border-radius:100px;font-size:var(--t-sm);color:var(--ink-mid);width:fit-content;max-width:100%}
.geo-flag{font-size:10px;font-weight:600;letter-spacing:.1em;background:var(--accent-quiet);
  border:1px solid var(--line-strong);color:var(--ink-hi);padding:.15rem .5rem;border-radius:100px}
.geo-note a{color:var(--accent);text-decoration:none}
.geo-code{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-low)}
.geo-card{margin-top:var(--s5);padding:var(--s4);background:var(--ground-raised);
  border:1px solid var(--line-strong);border-radius:var(--radius-lg)}
.geo-card-h{font-family:var(--serif);font-size:var(--t-lg);color:var(--ink-hi)}

.spec-facts.wide{grid-template-columns:repeat(3,1fr)}
.spec-facts dd span{display:inline;font-family:var(--sans);font-size:var(--t-xs);
  color:var(--ink-low);margin-left:.35rem;letter-spacing:.02em}

@media (max-width:1000px){
  .col2{grid-template-columns:1fr;gap:var(--s4)}
  .checkout{grid-template-columns:1fr;gap:var(--s4)}
  .spec-facts.wide{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .plans{grid-template-columns:1fr}
  .spec-facts.wide{grid-template-columns:1fr 1fr}
  .steps{gap:0}.step{padding:0 .55rem;font-size:10px}
}

/* ─── GALLERY ─────────────────────────────────────────────────────────── */
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s3);margin-top:var(--s3)}
.gcard{display:block;background:var(--ground-raised);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.gcard:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 14px 40px rgba(4,2,12,.5)}
.gshot{position:relative;display:block;height:200px;overflow:hidden;background:var(--ground-sunk);
  border-bottom:1px solid var(--line)}
.gshot iframe{position:absolute;top:0;left:0;width:1280px;height:960px;border:0;
  transform-origin:top left;transform:scale(.219);pointer-events:none}
.gb{display:block;padding:var(--s3)}
.gpill{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:.18rem .5rem;border-radius:100px;margin-bottom:.55rem}
.p-new{background:rgba(176,124,232,.16);color:var(--accent);border:1px solid rgba(176,124,232,.34)}
.p-keep{background:rgba(77,217,89,.12);color:var(--green-glow);border:1px solid rgba(77,217,89,.3)}
.p-ask{background:rgba(255,233,168,.1);color:var(--moon-gold);border:1px solid rgba(255,233,168,.3)}
.gn{display:block;font-size:var(--t-base);color:var(--ink-hi);font-weight:500}
.gp{display:block;font-size:var(--t-xs);color:var(--ink-low);margin-top:.2rem;font-family:ui-monospace,monospace}
.gd{display:block;font-size:var(--t-sm);color:var(--ink-mid);margin-top:.55rem}

/* select, to match the text inputs */
.field select{width:100%;background:var(--ground-raised);border:1px solid var(--line-strong);
  border-radius:10px;padding:.75rem .95rem;color:var(--ink-hi);font-family:var(--sans);
  font-size:var(--t-base);outline:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-low) 50%),linear-gradient(135deg,var(--ink-low) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(1.2em),calc(100% - 13px) calc(1.2em);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select:focus{border-color:var(--accent)}
.field select option{background:#120d1f;color:var(--ink-hi)}

.statement em{font-style:italic;color:var(--moon-gold);font-weight:300}
/* the work label when it heads the specimen stage rather than the opening */
.work-label.above-stage{margin-top:0;margin-bottom:var(--s3)}
.specimen{padding-top:var(--s5)}

/* ─── THE SPHERE INDEX ────────────────────────────────────────────────────
   The range is the product. 46 spheres across everyday, contemplative and
   cultural life — set as three dense typographic columns, not cards. Seeing
   "Parenting" beside "Past Lives" does more work than any sentence could. */
.spheres{padding:var(--s6) 0;border-top:1px solid var(--line)}
.sec-sub{margin-top:.5rem;font-size:var(--t-sm);color:var(--ink-mid)}
.sph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s4)}
.sph-h{font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-low);
  padding-bottom:.6rem;border-bottom:1px solid var(--line);margin-bottom:var(--s2)}
.sph-l{font-family:var(--serif);font-size:1.06rem;line-height:1.72;color:var(--ink)}
.sph-col:nth-child(2) .sph-h{color:var(--moon-gold)}
.sph-col:nth-child(2) .sph-l{color:var(--ink-hi)}
@media (max-width:1000px){.sph-grid{grid-template-columns:1fr 1fr;gap:var(--s4)}}
@media (max-width:760px){.sph-grid{grid-template-columns:1fr;gap:var(--s4)}}
/* The turn at the end. Three rejections earn one claim — and the claim is the
   point of the line. Without it the product is defined only by negation. */
.spec-turn{display:inline-block;margin-top:.35rem;font-family:var(--serif);
  font-size:1.35rem;font-style:italic;color:var(--moon-gold);letter-spacing:.01em}

/* 🔴 CHECKOUT ORDER ON NARROW SCREENS.
   Source order is form-then-summary, which is right on desktop (summary in the
   right column, visible alongside). When the grid collapses to one column the
   summary falls BELOW the pay button — so on a phone a person reaches
   "Start trial" before ever seeing the amount. Reorder so the summary comes
   first when stacked. Found by rendering, not by reading the markup. */
@media (max-width:1000px){
  .checkout{display:flex;flex-direction:column}
  .checkout > aside.co-summary{order:-1}
}

/* The US-only caveat sits under the ledger as italic subtext, not as a row in
   it — it is a qualification of the whole list, not a fourth platform. */
.status-note{margin-top:var(--s3);font-style:italic;font-size:var(--t-xs);
  line-height:1.75;color:var(--ink-low);max-width:74ch}
.status-note a{font-style:normal;margin-left:.35rem;font-weight:500}