/* ═══════════════════════════════════════════════════════════════════
   ATLAS v8 — dark studio
   One accent: white. The four product tints come from the covers
   themselves, so the interface never competes with them.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:SG;src:url('fonts/SpaceGrotesk.woff2') format('woff2');
  font-weight:300 700;font-display:swap}
@font-face{font-family:IN;src:url('fonts/Inter.woff2') format('woff2');
  font-weight:100 900;font-display:swap}
@font-face{font-family:JB;src:url('fonts/JetBrainsMono.woff2') format('woff2');
  font-weight:400 600;font-display:swap}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
img,svg{max-width:100%;height:auto;display:block}

:root{
  --gut:#020305;      /* outer gutter, behind the rounded page */
  --page:#070A11;     /* page surface */
  --card:#0D1119;
  --card-h:#131822;
  --line:rgba(196,210,255,.10);
  --line-s:rgba(196,210,255,.19);
  --w:#fff;
  --mut:rgba(232,238,255,.66);
  --dim:rgba(226,234,255,.50);
  /* ONE ACCENT (2026-09-08). Four product colourways meant the mark, the
     chips and the covers changed identity per page — which is what made the
     set feel incoherent. There is now a single accent, champagne, used for the
     mark and every accent on every surface. Products are told apart by name
     and volume, not by colour. The four token names are kept so nothing
     downstream breaks, but they all resolve to the same value: if you find
     yourself giving one of them a different colour, that is the bug. */
  --champagne:#C9A96A;
  --violet:#C9A96A; --amber:#C9A96A; --blue:#C9A96A; --green:#C9A96A;
  --ease:cubic-bezier(.19,1,.22,1);
  --spring:cubic-bezier(.34,1.28,.44,1);
  --r-lg:26px; --r-md:18px; --r-sm:11px;
  --pad:clamp(20px,4vw,64px);
  --maxw:1320px;
}

html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{background:var(--gut);color:var(--w);font-family:IN,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden}

/* ── Lenis ── */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ═══ THE BACKGROUND SYSTEM — one light, owner-chosen (F+G) ═══════════
   A single soft glow cresting behind the hero. It SINKS AND DIMS as you
   scroll (driven by the same damped physics as the hero and progress bar,
   via --glow-y/--glow-o) and wears each page's own tint through --glowc
   (body[data-tint]). Replaces the three always-drifting colour fields:
   scroll-driven means zero animation while the page is still. Grain stays
   on its own fixed layer — painting grain on a scroller forces full
   repaints and destroys mobile scroll performance. */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none}

/* THE LIGHT, v3. What made v2 look unfinished was banding: low-alpha
   gradients on near-black break into visible stepped rings, and moving the
   shaped ellipse dragged that banded edge around. So: FULL-BLEED wash (no
   shape, no edge to see), a ~gaussian ladder of stops instead of four coarse
   ones, grain layered on top as dither (the grainient trick — grain exists
   to break banding), and the scroll animates only INTENSITY, never
   position. Sits above the plate; iOS-safe (no filter). */
.glow{position:fixed;inset:0;z-index:2;pointer-events:none;
  --glowc:150,166,206;   /* the glow is light, not identity — neutral cool everywhere */
  opacity:var(--glow-o,1);
  /* v5, owner-picked: the light's centre sits ABOVE the viewport, so the
     hero copy and CTA rest on near-black while the tint arrives as an edge
     dawn. Same gaussian ladder, same grain dither above. */
  background:
    radial-gradient(150% 100% at 50% -42%,
      rgba(var(--glowc),.23) 0%, rgba(var(--glowc),.18) 13%,
      rgba(var(--glowc),.12) 25%, rgba(var(--glowc),.085) 36%,
      rgba(var(--glowc),.055) 46%, rgba(var(--glowc),.032) 56%,
      rgba(var(--glowc),.016) 66%, rgba(var(--glowc),.006) 77%,
      transparent 88%);
  will-change:opacity;
  transition:opacity .25s linear}
/* The blueprint grid, revealed ONLY where the light falls — masked by the
   same falloff as the glow, so it rides the parent's opacity and fades with
   the dawn on scroll. It says "Blueprint" without ever being wallpaper:
   where there is no light, there is no grid. */
.glow::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(var(--glowc),.17) 1px,transparent 1px),
    linear-gradient(180deg,rgba(var(--glowc),.17) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(150% 100% at 50% -42%,
    #000 0%, rgba(0,0,0,.55) 28%, rgba(0,0,0,.22) 44%, transparent 62%);
  mask-image:radial-gradient(150% 100% at 50% -42%,
    #000 0%, rgba(0,0,0,.55) 28%, rgba(0,0,0,.22) 44%, transparent 62%)}




/* grain above the light: dithers every gradient on the site */
.grain{position:fixed;inset:-50%;z-index:3;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Depth: a soft vignette on the gutter so the plate reads as lit, not flat.
   Sits under the plate (z-index 0) so it never touches content. */
.vig{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 78% at 50% 34%,transparent 42%,rgba(0,0,0,.34) 80%,rgba(0,0,0,.58) 100%)}



/* rounded page plate floating on the gutter */
.plate{position:relative;z-index:1;margin:10px;border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--page) 91%, transparent);
  overflow:clip;isolation:isolate}

/* ── type ── */
h1,h2,h3{font-family:SG;font-weight:600;letter-spacing:-.038em;line-height:1.02}
h1{font-size:clamp(38px,5.4vw,62px)}
h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.032em}
h3{font-size:clamp(18px,1.6vw,21px);letter-spacing:-.025em;line-height:1.2}
p{font-size:clamp(15px,1.15vw,16.5px);line-height:1.62;color:var(--mut)}
.lead{max-width:40ch}
.mono{font-family:JB;font-size:11px;letter-spacing:.14em;color:var(--dim);
  text-transform:uppercase}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--w);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{position:relative;padding-block:clamp(64px,8vw,110px)}

/* gradient hairline — a rule that fades at both ends reads as light,
   a flat 1px line reads as a border. Used between every section. */
.hr{height:1px;border:0;background:linear-gradient(90deg,
  transparent,rgba(255,255,255,.14) 18%,rgba(255,255,255,.14) 82%,transparent)}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 15px/1 IN;padding:16px 24px;border-radius:99px;cursor:pointer;
  border:1px solid transparent;transition:transform .3s var(--spring),
  background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
  white-space:nowrap}
.btn:active{transform:scale(.975)}
.btn-w{background:linear-gradient(180deg,#fff,#E8E9EC);color:#0B0C0F;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 30px -12px rgba(255,255,255,.28)}
.btn-w:hover{transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 16px 40px -12px rgba(255,255,255,.42)}
.btn-g{border-color:var(--line-s);color:var(--w);background:rgba(255,255,255,.02)}
.btn-g:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3);
  transform:translateY(-2px)}
.btn-sm{font-size:13.5px;padding:11px 17px}

/* ── badge ── */
.badge{display:inline-flex;align-items:center;gap:8px;font-family:JB;font-size:11px;
  letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.badge .pip{width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(47,163,122,.22)}

/* ═══ NAV ═══ */
.nav{position:sticky;top:0;z-index:60;
  /* Align to the same 1320px column as .wrap instead of the window edge. */
  padding:14px max(var(--pad), calc((100% - var(--maxw))/2 + var(--pad)));
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:linear-gradient(180deg,rgba(14,16,20,.92),rgba(14,16,20,0));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:10px;font:600 16.5px/1 SG;
  letter-spacing:-.022em;color:var(--w)}
.brand svg{width:26px;height:26px;flex:none}
.nlinks{display:flex;gap:26px;font:500 13.5px/1 IN;color:var(--mut)}
.nlinks a{position:relative;padding:6px 0;transition:color .25s}
.nlinks a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--w);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.nlinks a:hover{color:var(--w)}
.nlinks a:hover::after{transform:scaleX(1)}
.nright{display:flex;gap:9px;align-items:center}
@media (max-width:940px){.nlinks{display:none}}

/* ═══ HERO ═══ */
.hero{padding-top:clamp(30px,5vw,56px);padding-bottom:0;min-height:min(88vh,860px)}
.hero h1,.seq-copy h1{margin-top:22px}
.hero h1 .fade,.seq-copy h1 .fade{color:var(--dim)}
.hero .sub,.seq-copy .sub{font:600 clamp(17px,1.6vw,20px)/1.34 IN;color:var(--w);margin-top:18px}
.hero .lead,.seq-copy .lead{margin-top:13px}
.hero .cta,.seq-copy .cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(3,max-content);
  gap:clamp(22px,3.4vw,44px);margin-top:38px;padding-top:22px;
  border-top:1px solid var(--line)}
.stat{width:max-content;white-space:nowrap}
.stat b{display:block;font:600 21px/1 SG;letter-spacing:-.02em;color:var(--w)}
.stat span{display:block;margin-top:7px;font-family:JB;font-size:11px;
  letter-spacing:.14em;color:var(--dim);text-transform:uppercase}

/* ── the stack ── */
.stack{position:relative;height:clamp(340px,40vw,470px)}
.stack-glow{position:absolute;left:50%;top:46%;width:min(96%,660px);aspect-ratio:1/.8;max-width:100%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse,rgba(var(--glowc),.22),transparent 66%);
  filter:blur(30px)}
.bk{position:absolute;left:0;top:0;display:block;width:clamp(168px,19vw,300px);
  border-radius:4px;overflow:hidden;
  /* No 1px white outline — that was the "white border" on the hero covers, the
     same defect removed from .bk3. A near-black cover on a near-black page gets
     its edge from elevation, never from an outline. Radius dropped 12->4: the
     artwork is a flat cover now, not a rounded card. */
  box-shadow:0 2px 6px rgba(0,0,0,.7),0 16px 38px rgba(0,0,0,.6),0 40px 70px -24px rgba(0,0,0,.9);
  will-change:transform}
.bk img{width:100%;display:block}

/* ═══ SECTION HEAD ═══ */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:clamp(24px,3vw,38px);flex-wrap:wrap}
.shead .mono{margin-bottom:12px;display:block}
.slink{font:500 13.5px/1 IN;color:var(--mut);display:inline-flex;gap:7px;
  align-items:center;transition:color .25s,gap .3s var(--ease)}
.slink:hover{color:var(--w);gap:11px}

/* ═══ PRODUCT CARDS ═══ */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px)}
@media (max-width:1080px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:minmax(0,1fr);max-width:400px;
  margin-inline:auto}}
.card{position:relative;display:flex;flex-direction:column;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 13px 17px;overflow:hidden;
  transition:transform .45s var(--spring),background .35s var(--ease),
             border-color .35s var(--ease)}
/* gradient edge-light on hover — a border that catches light rather than
   a flat colour change */
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:linear-gradient(150deg,var(--tint,rgba(255,255,255,.5)),transparent 46%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.card:hover{transform:translateY(-5px);background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.15)}
.card:hover::before{opacity:1}
.card-img{position:relative;border-radius:var(--r-sm);overflow:hidden}
.card-img img{width:100%;display:block;transition:transform .7s var(--ease)}
.card:hover .card-img img{transform:scale(1.035)}
.crule{width:26px;height:2px;border-radius:2px;margin-top:14px;background:var(--tint)}
.card h3{margin-top:11px}
.card .cdesc{font-size:12.8px;line-height:1.48;color:var(--dim);margin-top:7px;flex:1}
.cfoot{display:flex;align-items:center;justify-content:space-between;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.price{font:600 17px/1 SG;letter-spacing:-.02em;color:var(--w)}
.cgo{font:500 12.5px/1 IN;color:var(--mut);display:inline-flex;gap:6px;
  align-items:center;transition:color .25s,gap .3s var(--ease)}
.card:hover .cgo{color:var(--w);gap:10px}

/* ═══ THE SET ═══ */
.set{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);padding:clamp(28px,4vw,52px);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.014))}
.set::after{content:"";position:absolute;left:50%;top:-40%;width:80%;aspect-ratio:2/1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse,rgba(var(--glowc),.2),transparent 66%);filter:blur(28px)}
.eq{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap;
  margin-top:26px;position:relative}
.eq-t{min-width:0}
.eq-t .n{font:500 12.5px/1.3 IN;color:var(--dim)}
.eq-t .v{font:600 clamp(24px,2.6vw,31px)/1 SG;letter-spacing:-.025em;
  color:var(--w);margin-top:7px}
.eq-op{font:400 clamp(20px,2vw,26px)/1 SG;color:var(--dim)}
.eq-sum{position:relative}
.eq-sum .v{color:#E4736A;position:relative;display:inline-block}
.eq-sum .v::after{content:"";position:absolute;left:-5px;right:-5px;top:50%;height:2px;
  margin-top:-1px;background:#E4736A;transform:scaleX(0);transform-origin:left}
.eq-sum.on .v::after{transform:scaleX(1);transition:transform .55s var(--ease) .15s}
.punch{font:600 clamp(22px,2.6vw,31px)/1.2 SG;letter-spacing:-.025em;
  color:var(--w);margin-top:34px;position:relative}
.punch b{background:linear-gradient(92deg,#fff,var(--champagne));-webkit-background-clip:text;
  background-clip:text;color:transparent;font-weight:600}

/* ═══ NOT A COURSE ═══ */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,74px)}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.kno li{color:var(--dim)}
.kno li span{position:relative;display:inline-block}
.kno li span::after{content:"";position:absolute;left:-3px;top:52%;height:1.5px;
  background:#E4736A;width:0;transition:width .45s var(--ease)}
.kno.on li span::after{width:calc(100% + 6px)}
.kno.on li:nth-child(2) span::after{transition-delay:.12s}
.kno.on li:nth-child(3) span::after{transition-delay:.24s}
.kno.on li:nth-child(4) span::after{transition-delay:.36s}
.kno.on li:nth-child(5) span::after{transition-delay:.48s}

/* ═══ SPREADS ═══ */
.spreads{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:clamp(10px,1.4vw,20px);align-items:start}
@media (max-width:820px){.spreads{grid-auto-flow:row;
  grid-template-columns:repeat(2,1fr);max-width:520px;margin-inline:auto}}
.spread{margin:0}
.spread img{width:100%;display:block;border-radius:10px;
  border:1px solid var(--line);box-shadow:0 24px 46px -24px rgba(0,0,0,.9);
  transition:transform .55s var(--ease)}
.spread:hover img{transform:translateY(-6px)}
.spread figcaption{margin-top:11px;font-family:JB;font-size:11px;letter-spacing:.13em;
  color:var(--dim);text-transform:uppercase}

/* ═══ FAQ ═══ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;
  justify-content:space-between;gap:20px;align-items:center;
  font:600 16.5px/1.35 IN;color:var(--w);transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 22px/1 SG;color:var(--dim);flex:none;
  transition:transform .35s var(--ease),color .25s}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--w)}
.faq summary:hover{color:var(--w)}
.faq .ans{padding-bottom:22px;max-width:68ch}

/* ═══ FOOTER ═══ */
.foot{padding:clamp(40px,5vw,64px) 0 clamp(28px,3vw,40px)}
.foot-grid{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap}
.foot-links{display:flex;gap:26px;font-size:13.5px;color:var(--mut);flex-wrap:wrap}
.foot-links a:hover{color:var(--w)}
.legal{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  font-family:JB;font-size:11px;letter-spacing:.08em;color:var(--dim);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ═══ REVEAL — used sparingly. Grainient, the reference for this build,
   has NO entrance animation at all; its polish is the smooth scroll.
   So this is a short fade only, never a bounce. ═══ */
.js [data-rv]{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-rv].in{opacity:1;transform:none}
.js [data-rv].rv-now{transition:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important}
  .bg::before{animation:none}
  [data-rv]{opacity:1!important;transform:none!important}
}

/* ═══ THE UNFOLD SEQUENCE ═══════════════════════════════════════════
   A tall section whose inner panel is sticky; scroll distance through
   the tall section is the timeline. The stack opens into the grid. */
.seq{height:260vh;padding:0}
.pin{position:sticky;top:0;height:100vh;min-height:600px;overflow:hidden;
  display:flex;align-items:center}
.seq-copy{position:relative;z-index:6;width:min(46%,560px);
  /* Same column as the nav and every section below it. */
  padding-inline:max(var(--pad), calc((100% - var(--maxw))/2 + var(--pad))) var(--pad);
  will-change:transform,opacity}
@media (max-width:860px){
  /* The phone keeps the pinned scrub — same motion as desktop, resolved into
     a 2x2 by place(). svh not vh: dvh re-measures as the browser chrome hides
     and the whole sequence jitters mid-scroll. */
  /* (2026-09-10) 235svh left ~800px of scroll on a FINISHED fan — a dead stretch between the
     covers and the pricing. 175svh: the scrub completes in three-quarters of a screen and releases. */
  .seq{height:170svh}
  .pin{height:100svh;min-height:520px}
  /* Copy centred + stage inset:0 meant the headline sat ON TOP of the stacked
     covers for the first third of the sequence. Copy holds the top of the
     panel, the stack sits low, and the fan rises into the middle as the copy
     goes — so the two never occupy the same band at the same time. */
  .seq-copy{width:100%;padding-inline:var(--pad);position:absolute;left:0;right:0;
    top:clamp(76px,11vh,104px);transform:none;text-align:center}
  .stage{position:absolute;inset:0}
}
.stage{position:absolute;inset:0;z-index:4;pointer-events:none}
.stage .bk{pointer-events:auto}
.seq-meta{position:absolute;left:0;right:0;top:66%;z-index:7;
  /* phones: right under the fan — see place() for the 46% fan centre */
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding-inline:max(var(--pad), calc((100% - var(--maxw))/2 + var(--pad)));opacity:0;will-change:transform,opacity}

/* phones: the rail sits right under the finished fan (fan centre 46%, see place()).
   This rule must come AFTER the unconditional .seq-meta above or it loses. */
.sm{text-align:center;padding-inline:8px}
.sm .t{display:block;font:600 14px/1.25 IN;color:var(--w)}
.sm .p{display:block;font:600 15px/1 SG;letter-spacing:-.02em;color:var(--w);margin-top:9px}
.sm .g{display:block;margin-top:8px;font-family:JB;font-size:11px;letter-spacing:.13em;
  color:var(--dim);text-transform:uppercase;transition:color .25s}
.sm a:hover .g{color:var(--w)}
.sm .rule{display:block;width:22px;height:2px;border-radius:2px;margin:0 auto 10px;background:var(--tint)}
.seq-hint{opacity:0;transition:opacity .4s var(--ease);position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:7;
  font-family:JB;font-size:11px;letter-spacing:.16em;color:var(--dim);
  text-transform:uppercase}

/* ═══ GRADIENT TEXT ══════════════════════════════════════════════════
   The one flourish, reused deliberately: white → periwinkle. Applied to
   the word that carries the sentence, never to a whole heading. */
/* the accent gradient belongs to the one accent, not the old UI periwinkle */
.grad{background:linear-gradient(94deg,#fff 6%,#E0C88F 58%,#C9A96A 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}

/* ═══ HERO — the copy owns the space; it fades out on scroll anyway ═══
   The column was capped at 660px, so on a wide screen the headline ended
   around x=610 while the stacked covers sat at 0.735W — leaving 304px of dead
   space at 1440 and 486px at 1680, with everything crushed into the outer
   thirds. The cap now scales with the viewport and the stack is centred in
   whatever space the copy leaves (see place() in v8.js), so the composition
   fills the plate at any width. */
.seq-copy{width:min(58%,clamp(660px,50vw,900px))}
.seq-copy h1{font-size:clamp(40px,6.2vw,86px);margin-top:24px}
.seq-copy .sub{font-size:clamp(18px,1.9vw,23px);margin-top:20px}
.seq-copy .lead{font-size:clamp(15.5px,1.3vw,18.5px);max-width:50ch;margin-top:15px}
@media (max-width:860px){.seq-copy{width:100%}}

/* limited-time chip */
.lt{display:inline-flex;align-items:center;gap:8px;font-family:JB;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--champagne);
  border:1px solid rgba(226,232,240,.34);background:rgba(var(--glowc),.09);
  padding:6px 11px;border-radius:99px;white-space:nowrap}

/* ═══ MENU SHEET ═══ */
.mbtn{display:none;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  cursor:pointer;flex:none}
.mbtn i{display:block;width:15px;height:1.5px;background:var(--w);border-radius:2px;
  position:relative}
.mbtn i::before,.mbtn i::after{content:"";position:absolute;left:0;width:15px;height:1.5px;
  background:var(--w);border-radius:2px}
.mbtn i::before{top:-5px}.mbtn i::after{top:5px}
@media (max-width:940px){.mbtn{display:flex}}
#sheet[hidden]{display:none}
.sh-back{position:fixed;inset:0;z-index:98;background:rgba(6,7,9,.72);
  backdrop-filter:blur(6px);opacity:0;transition:opacity .4s var(--ease)}
.sh-panel{position:fixed;top:10px;right:10px;bottom:10px;width:min(400px,calc(100vw - 20px));
  z-index:99;background:#101318;border:1px solid var(--line);border-radius:22px;
  padding:20px;overflow-y:auto;transform:translateX(18px);opacity:0;
  transition:transform .5s var(--ease),opacity .4s var(--ease)}
#sheet.on .sh-back{opacity:1}
#sheet.on .sh-panel{transform:none;opacity:1}
.sh-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.sh-x{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);
  background:none;color:var(--w);cursor:pointer;font:300 20px/1 SG}
.sh-g{display:flex;gap:13px;align-items:center;padding:11px;border-radius:14px;
  border:1px solid var(--line);margin-bottom:9px;transition:background .3s,transform .35s var(--spring)}
.sh-g:hover{background:rgba(255,255,255,.05);transform:translateX(4px)}
.sh-g img{width:48px;border-radius:5px;flex:none}
.sh-g b{display:block;font:600 13.5px/1.25 IN}
.sh-g i{display:block;font-family:JB;font-size:11px;letter-spacing:.11em;color:var(--dim);
  margin-top:6px;font-style:normal;text-transform:uppercase}
.sh-g em{margin-left:auto;font:600 15px/1 SG;font-style:normal;letter-spacing:-.02em}
.sh-r{display:flex;justify-content:space-between;align-items:center;padding:13px 11px;
  border-top:1px solid var(--line);font-size:14px;color:var(--mut)}
.sh-r:hover{color:var(--w)}
.sh-r span{font-family:JB;font-size:11px;letter-spacing:.11em;color:var(--dim);
  text-transform:uppercase}

/* ═══ PDP ═══ */
.crumb{display:flex;gap:9px;align-items:center;font-family:JB;font-size:11px;
  letter-spacing:.13em;color:var(--dim);text-transform:uppercase;margin-bottom:22px}
.crumb a:hover{color:var(--w)}
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:900px){.pdp{grid-template-columns:1fr}}
.pdp h1{font-size:clamp(34px,4.4vw,54px)}
.pdp-cover{position:relative}
.pdp-cover img{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.13);
  box-shadow:0 8px 22px rgba(0,0,0,.6),0 46px 84px -26px rgba(0,0,0,.96);
  transition:transform .8s var(--ease)}
/* 130% of the cover pushed past the viewport at tablet widths, where the
   cover column is at its widest relative to the page. Cap it, and let the
   parent clip whatever the blur throws beyond. */
.pdp-cover{overflow:visible;isolation:isolate}
.pdp-glow{position:absolute;left:50%;top:48%;width:min(130%,340px);aspect-ratio:1/.86;
  transform:translate(-50%,-50%);pointer-events:none;filter:blur(34px);z-index:-1;
  background:radial-gradient(ellipse,var(--tint),transparent 66%);opacity:.34}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{font-family:JB;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mut);border:1px solid var(--line);background:rgba(255,255,255,.03);
  padding:8px 12px;border-radius:99px}
.buy{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-top:32px}
.buyprice{font:600 clamp(30px,3.4vw,40px)/1 SG;letter-spacing:-.03em}
.toc{columns:2;column-gap:clamp(24px,4vw,56px);list-style:none}
@media (max-width:700px){.toc{columns:1}}
.toc li{break-inside:avoid;display:flex;gap:13px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;color:var(--mut)}
.toc li b{font-family:JB;font-size:11px;color:var(--dim);flex:none;padding-top:3px;
  font-weight:500}
.who{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px)}
@media (max-width:760px){.who{grid-template-columns:1fr}}
.who ul{list-style:none}
.who li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);
  font-size:15.5px;color:var(--mut)}
.who .y{color:var(--green);flex:none}
.who .n{color:#E4736A;flex:none}

/* sticky buy bar */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px;
  transform:translateY(120%);transition:transform .5s var(--ease);pointer-events:none}
.sticky.on{transform:none;pointer-events:auto}
.sticky-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:16px;
  justify-content:space-between;padding:12px 14px 12px 18px;border-radius:16px;
  background:rgba(18,20,26,.9);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.sticky b{font:600 14.5px/1.2 IN}
.sticky i{display:block;font-family:JB;font-size:11px;letter-spacing:.11em;color:var(--dim);
  margin-top:5px;font-style:normal;text-transform:uppercase}

/* ═══ CHECKOUT ═══ */
.co{max-width:560px;margin:0 auto}
.co-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(20px,3vw,30px)}
.co-line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.field{margin-top:15px}
.field label{display:block;font-family:JB;font-size:11px;letter-spacing:.13em;
  color:var(--dim);text-transform:uppercase;margin-bottom:8px}
.field input{width:100%;font:400 16px/1 IN;color:var(--w);padding:14px 15px;
  border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  transition:border-color .25s,background .25s}
.field input::placeholder{color:rgba(255,255,255,.48)}
.field input:focus{outline:none;border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.06)}
.field input[aria-invalid="true"]{border-color:#E4736A}
.err{color:#E4736A;font-size:13px;margin-top:8px}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:14px;
  border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.consent.shake{animation:shake .45s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--champagne)}
.consent label{font-size:13.5px;line-height:1.55;color:var(--mut)}
.upsell{margin-top:16px;padding:16px;border-radius:14px;
  border:1px solid rgba(226,232,240,.28);background:rgba(var(--glowc),.07)}
.upsell b{display:block;font:600 15px/1.3 IN;color:var(--w)}
.upsell p{font-size:13.5px;margin-top:7px}
.linkbtn{background:none;border:0;color:var(--champagne);font:600 13.5px/1 IN;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:0}

/* prose for legal pages */
.prose{max-width:70ch}
.prose h2{font-size:clamp(20px,2vw,25px);margin:38px 0 12px}
.prose p,.prose li{font-size:15.5px;line-height:1.72;color:var(--mut)}
.prose p{margin-bottom:13px}
.prose ul{margin:0 0 14px 20px}
.prose li{margin-bottom:7px}
.prose b{color:var(--w)}
.prose a{color:var(--champagne);text-decoration:underline;text-underline-offset:3px}

/* ═══ SIGNATURE SCENES ═══ */
.scene-box{position:relative;padding:clamp(8px,1.4vw,16px) 0;overflow:visible}
.scene-box::after{content:"";position:absolute;left:50%;top:6%;width:64%;aspect-ratio:2.4/1;
  transform:translateX(-50%);pointer-events:none;filter:blur(46px);opacity:.26;z-index:-1;
  background:radial-gradient(ellipse,var(--tint),transparent 70%)}
.scene{position:relative;display:block;width:100%;height:clamp(250px,22vw,300px)}

/* ═══ CHAPTER MAP — rows cascade, rule draws down ═══ */
.map{position:relative;padding-left:26px}
.map::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,var(--tint),rgba(255,255,255,.06));
  transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ease)}
.map.in::before{transform:scaleY(1)}
.map ol{list-style:none;columns:2;column-gap:clamp(24px,4vw,54px)}
@media (max-width:720px){.map ol{columns:1}}
.map li{break-inside:avoid;display:flex;gap:13px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;color:var(--mut);
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.map.in li{opacity:1;transform:none}
/* the chapter number is the one accent touch in the contents list — it is
   what stops 34 rows reading as a spreadsheet */
.map li b{font-family:JB;font-size:11px;color:var(--champagne);flex:none;padding-top:3px;
  font-weight:500;font-variant-numeric:tabular-nums;opacity:.85}
.map li::marker{content:""}

/* ═══ THREE-UP (homepage: guides you finish) ═══ */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
@media (max-width:860px){.trio{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}
.tcard{position:relative;padding:26px 0 0;border-top:1px solid var(--line)}
.tcard::before{content:"";position:absolute;left:0;top:-1px;width:0;height:1px;
  background:linear-gradient(90deg,#fff,var(--champagne));transition:width 1s var(--ease)}
.tcard.in::before{width:64px}
.tcard h3{margin-top:16px}
.tcard p{font-size:14.5px;margin-top:10px}
.who-one{list-style:none;columns:2;column-gap:clamp(24px,4vw,56px);max-width:900px}
@media (max-width:700px){.who-one{columns:1}}
.who-one li{break-inside:avoid;display:flex;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:15.5px;color:var(--mut)}
.who-one .y{color:var(--champagne);flex:none}

/* ═══ ICONS — Tabler outline (MIT), vendored into one inline sprite ═══ */
.ic{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-sm{width:16px;height:16px}
.tcard .ic{width:22px;height:22px;color:var(--champagne)}
.who-one li .ic{color:var(--champagne);margin-top:1px}
.faq summary .ic{color:var(--dim);transition:color .25s,transform .35s var(--ease)}
.trust{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,34px);margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line)}
.trust span{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--mut)}
.trust .ic{color:var(--champagne)}

/* ═══════════════════════════════════════════════════════════════════
   TYPE SCALE — one ratio (1.26), every step named, every element on it.
   Before this the site used 54/40/26/21/16.5/14.5/14/13/10/9.5, which is
   a pile rather than a scale, and several elements had no line-height at
   all so they inherited `normal` and set too tight.
   Micro labels raised to 11px: 9.5px uppercase mono at .14em tracking is
   below comfortable reading size, especially on a dark background.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --f1:11px;    --f2:13px;   --f3:14.5px; --f4:16px;  --f5:19px;
  --f6:23px;    --f7:30px;   --f8:40px;   --f9:54px;  --f10:74px;
  --lh-tight:1.05; --lh-head:1.22; --lh-body:1.62; --lh-small:1.5;
}
h1{font-size:clamp(34px,4.6vw,var(--f9));line-height:var(--lh-tight);letter-spacing:-.042em}
h2{font-size:clamp(26px,3.1vw,var(--f8));line-height:var(--lh-tight);letter-spacing:-.034em}
h3{font-size:clamp(17px,1.5vw,var(--f6));line-height:var(--lh-head);letter-spacing:-.022em}
p{font-size:var(--f4);line-height:var(--lh-body)}
li{line-height:var(--lh-small)}
.lead{font-size:clamp(15px,1.2vw,17px);line-height:var(--lh-body)}
.mono,.chip,.scene-cap,.tnum,.crumb,.legal,.fi .lab,.stat span,.sm .g,
.sh-g i,.sh-r span,.field label,.tagp,.badge,.lt{font-size:var(--f1);line-height:1.4}
.badge,.lt{font-size:var(--f1)}
.chip{padding:9px 13px}

/* display sizes need clear separation from each other, not 54 vs 40 */
.seq-copy h1{font-size:clamp(38px,5.6vw,var(--f10))}
.pdp h1{font-size:clamp(32px,4.2vw,50px)}
.pdp .sub{font-size:clamp(17px,1.7vw,var(--f5));line-height:var(--lh-head)}
/* the price is a number, not a heading — it shouldn't rival h2 */
.buyprice{font-size:clamp(26px,2.7vw,34px);line-height:1}
.price{font-size:var(--f5);line-height:1}
.stat b{font-size:var(--f5);line-height:1}

/* lists and small copy all get an explicit line-height */
.toc li,.map li,.who-one li{font-size:var(--f3);line-height:var(--lh-small)}
.card .cdesc{font-size:var(--f2);line-height:var(--lh-small)}
.tcard p{font-size:var(--f3);line-height:var(--lh-body)}
.trust span{font-size:var(--f2);line-height:1.4}
.faq summary{font-size:var(--f4);line-height:var(--lh-head)}
.faq .ans{font-size:var(--f3);line-height:var(--lh-body)}
.foot-links{font-size:var(--f2)}
.nlinks{font-size:var(--f2)}
.slink{font-size:var(--f2)}

/* ═══ CHECKOUT — these two classes come from v7's checkout.js and never
   got v8 rules, so they rendered as plain body copy inside the upsell ═══ */
.co-upgrade{display:flex;gap:16px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-top:16px;padding:16px;border-radius:14px;
  border:1px solid rgba(226,232,240,.26);background:rgba(var(--glowc),.07)}
.co-up-h{font-size:var(--f3)!important;line-height:var(--lh-head);font-weight:600;color:var(--w)}
.co-up-p{font-size:var(--f2)!important;line-height:var(--lh-small);color:var(--mut);margin-top:6px}
.co-up-p b{color:var(--w);font-weight:600}
.co-alt{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:12px;
  font-size:var(--f2);color:var(--mut)}
.co-downline{margin-top:12px;font-size:var(--f2);color:var(--dim)}
.mono-cap{font-family:JB;font-size:var(--f1);letter-spacing:.11em;color:var(--dim);
  text-transform:uppercase}
#co-name{font-size:var(--f4);line-height:var(--lh-head);font-weight:600}
#co-desc{font-size:var(--f2);line-height:var(--lh-small)}
/* the consent wording is a legal statement — it must be readable body
   text, not a micro label */
.consent label{font-size:var(--f3);line-height:var(--lh-body)}
.field label{letter-spacing:.12em}
.field input{font-size:var(--f4)}
@media (max-width:520px){.field input{font-size:16px}} /* iOS zooms below 16 */

/* ═══════════════════════════════════════════════════════════════════
   PDP PROPORTIONS
   The cover was 524px wide against a 609px text column, so the artwork's
   own headline rendered at roughly the page h1's size and the two fought.
   Capped and given the smaller half of the grid; the page's typography
   leads, the cover supports.
   ═══════════════════════════════════════════════════════════════════ */
.pdp{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(32px,5vw,80px);align-items:center}
.pdp-cover{max-width:390px;margin-inline:auto;width:100%}
@media (max-width:900px){.pdp-cover{max-width:300px}}

/* one calm rhythm instead of five different gaps */
.pdp h1{margin:0}
.pdp .sub{margin-top:16px}
.pdp .lead{margin-top:12px;max-width:46ch}
.buy{margin-top:26px;gap:14px}
.pdp .trust{margin-top:26px;padding-top:20px}
.pdp .lead + .trust,.buy + .lead{margin-top:18px}

/* the price is a fact, not a headline */
.buyprice{font-size:clamp(24px,2.3vw,30px);font-weight:600;letter-spacing:-.025em}

/* section rhythm: one value, used everywhere */
section{padding-block:clamp(56px,7vw,96px)}
.shead{margin-bottom:clamp(22px,2.6vw,34px)}
.shead h2{margin-top:10px}

/* the same calm applied to the bundle offer block */
.set{padding:clamp(26px,3.4vw,46px)}
.set h1,.set h2{margin-top:14px}
.set .lead{margin-top:14px}
.eq{margin-top:24px}
.punch{margin-top:28px}

/* ═══════════════════════════════════════════════════════════════════
   THE COVER — flat, square-on, no object dressing.
   Was a four-face 3D book with a cream page block, a spine and a lit top
   edge, turned -8deg to -19deg. That dressing added a white paper edge and
   a tilt that fought artwork designed to be read square-on, and the 1px
   inset white hairline on the face read as a border. All removed: the
   cover is now presented as the artwork itself, lifted only by a shadow.
   The .bk3 class name and the four spans stay so the markup, the hero
   scrub and the reduced-motion path keep working untouched.
   ═══════════════════════════════════════════════════════════════════ */
.bk3{display:block;position:relative;width:100%;aspect-ratio:3/4}
.bk3-in{position:absolute;inset:0;transform:none;transition:transform .5s var(--ease)}
.bk3 span[class^="bk3-"]{position:absolute}
.bk3-f{inset:0;border-radius:3px;overflow:hidden;transform:none;
  /* A near-black cover on a near-black page has no edge of its own. The old
     build faked one with a 1px white inset, which read as a printed border.
     Elevation does the same job honestly: a tight contact shadow plus a soft
     ambient one, so the cover sits ON the page instead of in it. */
  box-shadow:0 2px 6px rgba(0,0,0,.7), 0 14px 34px rgba(0,0,0,.55),
             0 0 0 1px rgba(255,255,255,.045)}
.bk3-f img{width:100%;height:100%;object-fit:cover;display:block}
/* the page block, spine and top edge are gone */
.bk3-s,.bk3-p,.bk3-t{display:none}
.bk3-sh{position:absolute;left:50%;bottom:-16px;width:94%;height:26px;z-index:-1;
  transform:translateX(-50%);filter:blur(16px);
  background:radial-gradient(ellipse,rgba(0,0,0,.78),transparent 72%)}
.pdp .bk3,.card .bk3,.bd .bk3,.stage .bk3{--d:0;--ry:0deg}
.card:hover .bk3-in,.pdp-cover:hover .bk3-in{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.bk3-in{transition:none}
  .card:hover .bk3-in,.pdp-cover:hover .bk3-in{transform:none}}

/* ═══ TOUCH TARGETS — measured, not guessed ═════════════════════════════
   Audit at 390px found 14 targets per page under the 40px minimum: footer
   links were 16px tall, .slink 13px, small buttons 38px. Text links get
   vertical padding rather than a bigger font so the visual size is
   unchanged and only the hit area grows.  */
.foot-links a{display:inline-flex;align-items:center;min-height:40px;padding-block:8px}
.slink{min-height:40px;padding-block:10px}
.btn-sm{padding:13px 17px}
.brand{min-height:40px;padding-block:5px}
.crumb{gap:10px}
.crumb a{display:inline-flex;align-items:center;min-height:40px}
.nlinks a{min-height:40px;display:inline-flex;align-items:center}
.sm a{display:block;padding-block:6px}
.faq summary{min-height:52px}
.linkbtn{min-height:40px}
.seq-hint{font-size:11px}

/* ═══ MOBILE ══════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .pdp{gap:30px}
  .pdp-cover{max-width:230px}
  .pdp .buy{gap:12px}
  .pdp .buy .btn{flex:1 1 auto;justify-content:center}
  .buyprice{width:100%}
  .trust{gap:14px 20px}
  .trust span{font-size:12.5px}
  .sticky-in{padding:10px 10px 10px 15px;gap:10px}
  .sticky b{font-size:13px}
  .sticky i{display:none}
  .set{padding:22px 18px}
  .eq{gap:14px}
  .eq-op{display:none}          /* + and = read as noise once the terms stack */
  .eq-t{flex:1 1 44%}
  .foot-grid{gap:24px}
  .legal{flex-direction:column;gap:8px}
}
@media (max-width:560px){
  .cards{gap:16px}
  .trio{gap:26px}
  .co-upgrade{flex-direction:column;align-items:stretch}
  .co-upgrade .btn{width:100%}
}

/* Links sitting inside a sentence are exempt from the 40px target rule
   (WCAG 2.5.8 "inline" exception) — padding them would break the text
   block they live in. Everything that is a standalone control is padded. */

/* ═══ MOBILE NAV ══════════════════════════════════════════════════════
   Both nav buttons plus the burger do not fit 390px. The overflow was
   invisible to a scrollWidth check because .plate uses overflow:clip,
   so it clipped rather than scrolled — measure element right edges, not
   document width. */
@media (max-width:940px){
  .nav{padding:12px 16px;gap:12px}
  .nright{gap:8px}
  .nright .btn-g{display:none}          /* sample lives in the sheet + hero */
  .brand{font-size:15px}
  .brand svg{width:23px;height:23px}
}
@media (max-width:520px){
  .nright .btn-w{display:none}          /* burger carries everything */
  .nav{padding:10px 14px}
}
@media (max-width:860px){
  /* long titles need to breathe at 390px */
  .pdp h1{font-size:clamp(30px,8vw,40px)}
  .pdp .sub{font-size:17px}
  .pdp .lead{font-size:15px;max-width:none}
  .pdp-cover{max-width:210px;margin-inline:auto}
  .pdp{gap:26px}
  .seq-copy h1{font-size:clamp(34px,9vw,46px)}
  .seq-copy .lead{max-width:none}
  h2{font-size:clamp(24px,6.4vw,32px)}
  .wrap{padding-inline:18px}
  section{padding-block:clamp(44px,9vw,64px)}
}

/* Trading's education framing belongs on its own page, not only the footer */
.edu b{color:var(--w)}

/* ═══ FOOTER: payment marks, currency note, email capture ═══════════════ */
.pay{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.pay svg{width:30px;height:20px;fill:rgba(255,255,255,.46);
  transition:fill .3s var(--ease)}
.pay:hover svg{fill:rgba(255,255,255,.66)}
.paynote{font-size:var(--f2);line-height:1.55;color:var(--dim);margin-top:12px;max-width:46ch}

.fsub{margin-top:22px;max-width:360px}
.fsub-row{display:flex;gap:8px;margin-top:10px}
.fsub input{font-size:16px;flex:1;min-width:0;font:400 15px/1 IN;color:var(--w);padding:13px 14px;
  border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  transition:border-color .25s,background .25s}
.fsub input::placeholder{color:rgba(255,255,255,.3)}
.fsub input:focus{outline:none;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.06)}
.fsub button{flex:none;font:600 14px/1 IN;padding:13px 18px;border-radius:10px;cursor:pointer;
  border:0;background:linear-gradient(180deg,#fff,#E8E9EC);color:#0B0C0F;min-height:44px;
  transition:transform .25s var(--spring)}
.fsub button:hover{transform:translateY(-2px)}
.fsub-msg{margin-top:10px;font-size:var(--f2);color:var(--mut)}
.fsub-msg.bad{color:#E4736A}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ═══ WHICH GUIDE — decision router ═══ */
.router{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
@media (max-width:860px){.router{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}
.rt{display:block;padding:24px 0 0;border-top:1px solid var(--line);position:relative;
  transition:border-color .35s var(--ease)}
.rt::before{content:"";position:absolute;left:0;top:-1px;width:0;height:1px;
  background:linear-gradient(90deg,var(--tint),transparent);transition:width .6s var(--ease)}
.rt:hover::before{width:100%}
.rt .q{font-size:var(--f3);color:var(--dim);line-height:1.5}
.rt h3{margin-top:12px}
.rt .a{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:500 13px/1 IN;
  color:var(--mut);min-height:40px;transition:color .25s,gap .3s var(--ease)}
.rt:hover .a{color:var(--w);gap:12px}

/* ═══ FREE SAMPLE ROW (homepage, under the spreads) ═════════════════════ */
.samplerow{margin-top:46px;padding-top:30px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.samplerow .mono{flex:1 1 260px;color:var(--dim)}
.samplenote{font:500 11px/1.4 JB;letter-spacing:.06em;color:var(--dim)}
@media(max-width:600px){.samplerow{gap:12px}.samplerow .mono{flex-basis:100%}}

/* Router columns must align across the row. The question wraps to one or two
   lines depending on the sentence, which left the headings on three different
   baselines — reserve two lines and pin the link to the bottom. */
.router{align-items:stretch}
.router .rt{display:flex;flex-direction:column;height:100%}
.router .rt .q{min-height:calc(2 * 1.5em)}
.router .rt .a{margin-top:auto;padding-top:14px}

/* ═══ FEE CALCULATOR (digital PDP) ═════════════════════════════════════ */
.fc{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);
  background:rgba(255,255,255,.018)}
.fc-controls{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,34px);
  padding-bottom:26px;border-bottom:1px solid var(--line)}
.fc-ctl{display:block}
.fc-ctl>span{display:block;font:500 12px/1 JB;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin-bottom:14px}
.fc-ctl>span b{color:#fff;font:600 15px/1 IN;letter-spacing:0;text-transform:none;margin-left:8px}
.fc-ctl input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:26px;
  background:transparent;cursor:pointer}
.fc-ctl input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:rgba(255,255,255,.16)}
.fc-ctl input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.16)}
.fc-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;background:#fff;margin-top:-7.5px;
  box-shadow:0 0 0 4px rgba(255,255,255,.10)}
.fc-ctl input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;
  background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.10)}
.fc-ctl input[type=range]:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:4px}

.fc-rows{margin-top:24px;display:flex;flex-direction:column}
.fc-row{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(60px,2fr) auto;
  gap:clamp(12px,2vw,22px);align-items:center;padding:13px 0;border-bottom:1px solid var(--line-s)}
.fc-row:last-child{border-bottom:0}
.fc-name b{display:block;font:600 14.5px/1.3 IN;color:#fff}
.fc-name span{display:block;font:500 10.5px/1.35 JB;letter-spacing:.04em;color:var(--dim);margin-top:4px}
.fc-bar{height:7px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.fc-bar span{display:block;height:100%;border-radius:4px;background:rgba(255,255,255,.30);
  transition:width .45s var(--ease)}
.fc-row.is-best .fc-bar span{background:var(--tint)}
.fc-val{text-align:right;white-space:nowrap}
.fc-val b{display:block;font:600 16px/1.2 IN;color:#fff;font-variant-numeric:tabular-nums}
.fc-val span{display:block;font:500 10.5px/1.3 JB;color:var(--dim);margin-top:4px;
  font-variant-numeric:tabular-nums}
.fc-sum{margin-top:24px;font:400 15px/1.6 IN;color:var(--mut);max-width:64ch}
.fc-sum b{color:#fff;font-weight:600}
.fc-note{margin-top:16px;font:500 11px/1.6 JB;letter-spacing:.03em;color:var(--dim);max-width:74ch}
@media(max-width:720px){
  .fc-controls{grid-template-columns:1fr;gap:22px}
  .fc-row{grid-template-columns:1fr auto;gap:10px}
  .fc-bar{grid-column:1/-1;order:3}
}

/* Trading only. Owner's wording: two words, nothing after, at the foot of the
   page rather than next to the buy button. The full disclosure lives in terms. */
.edu{margin:56px 0 8px;padding-top:26px;border-top:1px solid var(--line);
  font:500 11px/1 JB;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  text-align:center}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE  ·  most traffic arrives here, so this is the real design.
   The desktop hero is a scroll-scrubbed unfold. That mechanism cannot work
   on a phone (no sticky range, no room for four covers in a row), so mobile
   gets its own composition rather than a squeezed copy of the desktop one.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:860px){

  /* ── hero: one screen of copy, then the shelf ───────────────────────── */
  .seq-copy .badge{font-size:11px}
  .seq-copy h1{font-size:clamp(34px,10.2vw,46px);line-height:1.02;margin-top:18px;
    letter-spacing:-.028em}
  .seq-copy .sub{font-size:clamp(16.5px,4.4vw,19px);margin-top:14px}
  /* the lead repeats what the sub and the cards already say; on a phone that
     is a whole extra screen before anything is clickable */
  .seq-copy .lead{display:none}
  .cta{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:24px}
  .cta .btn{width:100%;justify-content:center}
  .cta .lt{align-self:center;margin-top:2px}
  /* On a phone this sat between the CTA and the covers, pushing the products
     below the fold to show a page count. The catalogue states all of it. */
  .stats{display:none}


  /* ── global rhythm: desktop section padding is ~2 phone screens of air ── */
  section{padding-block:clamp(38px,9vw,58px)}
  .shead{margin-bottom:26px}
  .shead h2{font-size:clamp(26px,7.4vw,34px);line-height:1.1;letter-spacing:-.022em}
  .hr{margin-block:4px}
  h1,h2,h3{text-wrap:balance}

  /* ── product cards go horizontal ────────────────────────────────────
     Stacked, each card ran a full-width cover with the name, price and CTA
     a screen below it — four cards filled five and a half phone screens and
     you could never see a product and its price at the same time. Cover left,
     everything else right: one card per thumb-length, all of it at once. */
  /* the Set page sets its own 3-up grid inline; at 390px that left each card
     ~100px wide, which the horizontal layout cannot fit into */
  .cards{grid-template-columns:minmax(0,1fr)!important;gap:12px;max-width:none}
  .card{display:grid;grid-template-columns:62px 1fr;grid-template-rows:auto auto;
    column-gap:14px;row-gap:0;align-items:start;padding:13px}
  .card-img{grid-row:1/3;align-self:start}
  .crule{display:none}
  .card h3{grid-column:2;margin-top:0;font-size:16px;line-height:1.25}
  .card .cdesc{grid-column:2;font-size:13px;line-height:1.5;margin-top:6px;flex:none;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cfoot{grid-column:2;margin-top:10px;padding-top:10px}
  .price{font-size:18px}
  .cgo{font-size:13px}

  /* ── taps: 44px minimum, per the platform guidelines ────────────────── */
  .btn{min-height:48px}
  .foot-links a,.sh-r,.slink{min-height:44px;display:flex;align-items:center}
}

/* Phones narrower than an iPhone 12 still have to fit the shelf. */


/* ═══ BACK BUTTON ══════════════════════════════════════════════════════
   Every subpage now has one. The breadcrumb alone is a text trail — fine on
   a desktop, but on a phone people look for a control, and thanks/terms/
   privacy offered no route back at all. The sprite has no left arrow, so the
   existing one is turned around rather than a second glyph being added. */
.crumbrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.crumbrow .crumb{margin-bottom:0}
.back{display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px 9px 12px;border-radius:99px;border:1px solid var(--line);
  font:500 13px/1 IN;color:var(--mut);white-space:nowrap;
  transition:color .25s,border-color .3s var(--ease),background .3s var(--ease),
             transform .3s var(--ease)}
.back .ic{transform:rotate(180deg);transition:transform .3s var(--ease)}
.back:hover{color:var(--w);border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.04)}
.back:hover .ic{transform:rotate(180deg) translateX(3px)}
.back:active{transform:scale(.97)}
.back:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:860px){
  .back{min-height:44px;padding-block:0}
  /* on a phone the trail is noise next to a real control */
  .crumbrow .crumb{display:none}
}

/* ═══ MOBILE · PRODUCT PAGE ════════════════════════════════════════════
   .pdp's grid was re-declared unconditionally later in this file than the
   max-width:900px collapse, so on a phone the page kept two columns: the
   headline broke over four lines in a ~330px gutter while the cover floated
   beside it. Cover first, then everything else in one column. */
@media (max-width:860px){
  .pdp{grid-template-columns:1fr;gap:22px}
  .pdp-cover{order:-1;max-width:150px;margin-inline:auto}
  .pdp h1{font-size:clamp(29px,8.4vw,38px);line-height:1.06;letter-spacing:-.026em}
  .pdp .sub{font-size:17px!important;margin-top:12px!important}
  .pdp .lead{font-size:15px;line-height:1.6;margin-top:11px}
  .buy{flex-wrap:wrap;gap:10px;margin-top:20px}
  .buy .btn{width:100%;justify-content:center}
  .buy .buyprice{font-size:30px}
  .trust{gap:10px 16px;font-size:12px;margin-top:18px}
  /* the tilt is a pointer affordance; on touch it just adds jitter */
  .pdp-cover .bk3-in{transform:none!important}
}

/* ═══ MOBILE · THE UNFOLD ══════════════════════════════════════════════
   Same sequence as desktop. The only difference is where it resolves to:
   four covers cannot be read side by side at 390px, so place() spreads them
   into a 2x2 instead of a 1x4. Cover width is fixed here because place()
   measures offsetWidth to do the maths. */
@media (max-width:860px){
  /* Cover width sets the overlap: the fan step is (viewport - cover) / 3, so a
     wide cover buries the three behind it. 33vw leaves each card ~60% of
     itself showing, which is enough to tell them apart. */
  .seq .bk{width:min(38vw,156px);border-radius:6px}   /* phone: 2x2, see place() */
  .stage .bk3{--ry:-9deg;--d:11px}
  .seq-copy h1{font-size:clamp(32px,9.4vw,44px)}
  .seq-copy .badge{margin-inline:auto}
  .seq-copy .cta{align-items:center}
  .seq-copy .cta .btn{width:min(100%,320px)}
  .seq-hint{bottom:20px}
  /* Under a 2x2 the four labels have no column to sit in, so they become a
     swipeable rail pinned to the foot of the panel. It arrives on the same
     timeline as the desktop version and carries the prices, which the covers
     alone cannot. */
  .seq-meta{position:absolute;top:auto;bottom:22px;left:0;right:0;
    display:flex;grid-template-columns:none;gap:9px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-inline:var(--pad);padding-bottom:2px}
  .seq-meta::-webkit-scrollbar{display:none}
  .sm{flex:0 0 auto;min-width:138px;scroll-snap-align:start;text-align:left;
    padding:11px 14px;border:1px solid var(--line);border-radius:12px;
    background:rgba(255,255,255,.028)}
  .sm .rule{margin:0 0 9px}
  .sm .t{font-size:13px}
  .sm .p{font-size:14px;margin-top:6px}
  .sm .g{font-size:11px;margin-top:7px}
  .stack-glow{top:50%;width:74%}
}

/* ═══ MOBILE · SPREADS AS A SWIPE RAIL ═════════════════════════════════
   Two-up at 390px shrank each page image to ~170px, where typeset body copy
   is a grey texture rather than a legible page — and the point of this
   section is to prove the pages are real. One-and-a-bit at full width,
   swipeable, with snap. The peeking next card is the affordance. */
@media (max-width:820px){
  .spreads{display:flex;grid-template-columns:none;max-width:none;margin-inline:0;
    gap:12px;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y;
    scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    /* bleed to the screen edges so the rail reads as scrollable, not clipped */
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  .spreads::-webkit-scrollbar{display:none}
  .spread{flex:0 0 min(74vw,300px);scroll-snap-align:center;margin:0}
  .spread:hover img{transform:none}
}

/* ═══ THE PICKER ═══════════════════════════════════════════════════════ */
.pick{border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,3vw,32px);background:rgba(255,255,255,.018)}
.pick-q h2{font-size:clamp(24px,3vw,34px);margin-top:10px;letter-spacing:-.022em}
.pick-opts{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.pick-o{font:500 13.5px/1 IN;color:var(--mut);cursor:pointer;
  padding:12px 16px;border-radius:99px;border:1px solid var(--line);
  background:transparent;min-height:44px;
  transition:color .25s,border-color .3s var(--ease),background .3s var(--ease),
             transform .25s var(--ease)}
.pick-o:hover{color:var(--w);border-color:rgba(255,255,255,.24)}
.pick-o:active{transform:scale(.97)}
.pick-o:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pick-o[aria-pressed="true"]{color:var(--gut);background:#fff;border-color:#fff}

.pick-a{display:flex;align-items:center;gap:16px;margin-top:22px;padding-top:22px;
  border-top:1px solid var(--line);opacity:0;transform:translateY(6px);
  transition:opacity .34s var(--ease),transform .34s var(--ease)}
.pick-a.in{opacity:1;transform:none}
.pick-a img{width:60px;flex:none;border-radius:5px;border:1px solid rgba(255,255,255,.12)}
.pick-t{display:block;min-width:0}
.pick-t b{display:block;font:600 17px/1.25 IN;color:#fff}
.pick-t i{display:block;font-style:normal;font-size:14px;line-height:1.5;
  color:var(--dim);margin-top:6px}
.pick-t em{display:inline-flex;align-items:center;gap:7px;font-style:normal;
  font:500 13px/1 IN;color:var(--mut);margin-top:10px;transition:gap .3s var(--ease),color .25s}
.pick-a:hover .pick-t em{color:#fff;gap:11px}
@media (max-width:560px){
  /* as flex-wrap chips these landed one per line — four rows for a question
     that should cost one glance. Two columns, two rows. */
  .pick-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .pick-o{font-size:12.5px;padding:11px 10px;border-radius:12px;text-align:center;
    display:flex;align-items:center;justify-content:center}
  .pick-q h2{font-size:clamp(22px,6.4vw,28px)}
  .pick-a{gap:13px;margin-top:18px;padding-top:18px}
  .pick-a img{width:52px}
  .pick-t b{font-size:15.5px}
  .pick-t i{font-size:13px;margin-top:5px}
  .pick-t em{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.pick-a{transition:none}}

/* ═══ MOBILE · THE SET ═════════════════════════════════════════════════
   679px tall on a phone: a full screen of box for one number. The equation
   was three price tiles plus operators laid out for a wide row. */
@media (max-width:640px){
  .set{padding:22px 18px 24px;border-radius:var(--r-md)}
  .set h1,.set h2{font-size:clamp(25px,7.2vw,32px);line-height:1.08}
  .eq{display:grid;grid-template-columns:1fr auto;gap:0 12px;align-items:center}
  .eq-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    grid-column:1/-1;padding:9px 0;border-bottom:1px solid var(--line-s);text-align:left}
  .eq-t .n{font-size:13px;line-height:1.3}
  .eq-t .v{font-size:15px}
  /* the +/= operators are a row-layout device; stacked they are just noise */
  .eq-op{display:none}
  .eq-sum{border-bottom:0;padding-top:13px}
  .eq-sum .n{color:var(--w)}
  .punch{font-size:19px;line-height:1.35;margin-top:16px}
  .set .lead{font-size:14px;line-height:1.55;margin-top:11px}
  .eq{margin-top:18px}
  .set .buy{margin-top:20px}
  .set .buy .btn{width:100%;justify-content:center}
}

/* ═══ WHAT THIS IS — three points, three living icons ═══════════════════
   Was an icon, a number, a heading, a four-line paragraph and a rule per
   card. Five elements to make one point. Now: an icon that keeps moving, a
   heading, one sentence.
   The motion is continuous and slow on purpose — it should register at the
   edge of vision and never ask to be watched. All of it is transform or
   stroke-dashoffset, so it stays on the compositor. */
.tico{display:block;width:40px;height:40px;color:var(--w);opacity:.92}
.tico svg{width:100%;height:100%;overflow:visible}
.tcard{padding:24px 0 0}
.tcard h3{margin-top:18px;font-size:18px;letter-spacing:-.012em}
.tcard p{font-size:14.5px;line-height:1.6;margin-top:9px;max-width:34ch}

/* 01 · lines of text writing themselves, over and over */
.dl{stroke-dasharray:14;stroke-dashoffset:14;animation:draw 5.4s var(--ease) infinite}
.dl1{animation-delay:0s}
.dl2{animation-delay:.35s}
.dl3{animation-delay:.7s;stroke-dasharray:9;stroke-dashoffset:9}
@keyframes draw{
  0%{stroke-dashoffset:var(--o,14)}
  22%,62%{stroke-dashoffset:0}
  84%,100%{stroke-dashoffset:var(--o,14)}
}
.dl3{--o:9}

/* 02 · the climb, rising in sequence */
.st{transform-origin:50% 100%;animation:rise 4.6s var(--ease) infinite}
.st1{animation-delay:0s}
.st2{animation-delay:.22s}
.st3{animation-delay:.44s}
@keyframes rise{
  0%,8%{transform:scaleY(.12)}
  34%,70%{transform:scaleY(1)}
  92%,100%{transform:scaleY(.12)}
}

/* 03 · the update, turning slowly and forever */
.spin{transform-origin:20px 20px;animation:turn 9s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .dl{stroke-dashoffset:0;animation:none}
  .st{transform:none;animation:none}
  .spin{animation:none}
}

/* ═══ SMOOTHNESS PASS ══════════════════════════════════════════════════
   One easing curve for the whole site, longer and softer than before. Short
   transitions with a fast tail read as "snappy" on a desktop and as "cheap"
   on a phone, where every touch is a physical gesture the motion should
   follow rather than beat. */
:root{
  color-scheme:dark;
  --ease:cubic-bezier(.22,1,.28,1);          /* softer landing than expo */
  --ease-io:cubic-bezier(.62,.05,.24,1);     /* symmetric, for two-way state */
  --spring:cubic-bezier(.28,1.22,.4,1);
}

/* the sheet: slides from the edge it belongs to, and leaves the same way */
.sh-back{transition:opacity .55s var(--ease)}
.sh-panel{transform:translateX(30px) scale(.985);
  transition:transform .62s var(--ease),opacity .42s var(--ease)}
#sheet.on .sh-panel{transform:none}
/* rows arrive in sequence rather than all at once */
.sh-panel>*{opacity:0;transform:translateY(9px);
  transition:opacity .42s var(--ease),transform .5s var(--ease)}
#sheet.on .sh-panel>*{opacity:1;transform:none}
#sheet.on .sh-panel>*:nth-child(2){transition-delay:.05s}
#sheet.on .sh-panel>*:nth-child(3){transition-delay:.08s}
#sheet.on .sh-panel>*:nth-child(4){transition-delay:.11s}
#sheet.on .sh-panel>*:nth-child(5){transition-delay:.14s}
#sheet.on .sh-panel>*:nth-child(6){transition-delay:.17s}
#sheet.on .sh-panel>*:nth-child(n+7){transition-delay:.2s}

/* reveals: further travel, longer settle — the old 
   .5s felt like a flicker at the top of a long page */


/* every interactive surface gets the same press feedback */
.btn,.card,.sh-g,.pick-o,.back,.slink,.samplelinks a,.fc-row{will-change:auto}
.btn{transition:transform .4s var(--spring),background .4s var(--ease),
  border-color .4s var(--ease),box-shadow .4s var(--ease)}
.btn:active,.card:active,.sh-g:active{transform:scale(.985)}
.card{transition:transform .55s var(--spring),background .45s var(--ease),
  border-color .45s var(--ease)}

/* details/summary in the FAQ opened instantly; give the marker some life */
.faq summary{transition:color .3s var(--ease)}
.faq details[open] summary{color:#fff}

@media (prefers-reduced-motion:reduce){
  .sh-panel,.sh-back,.sh-panel>*{transition:none!important}
  
}

/* ═══ RATE FLOOR + POSITION SIZE ═══════════════════════════════════════
   Both reuse the fee calculator's shell (.fc); only the rows differ. */
.fc-3{grid-template-columns:repeat(3,1fr)}
.fc-ctl select{width:100%;appearance:none;-webkit-appearance:none;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:11px;
  color:#fff;font:500 14.5px/1 IN;padding:13px 38px 13px 14px;min-height:48px;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.55) 50%),
    linear-gradient(135deg,rgba(255,255,255,.55) 50%,transparent 50%);
  background-position:calc(100% - 19px) 51%,calc(100% - 13px) 51%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.fc-ctl select:hover{border-color:rgba(255,255,255,.24)}
.fc-ctl select:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fc-ctl select option{background:#14171d;color:#fff}

.rc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:start;
  padding:15px 0;border-bottom:1px solid var(--line-s)}
.rc-row:last-child{border-bottom:0}
.rc-name b{display:block;font:600 15px/1.3 IN;color:#fff}
.rc-name span{display:block;font-size:13px;line-height:1.5;color:var(--dim);margin-top:5px;
  max-width:52ch}
.rc-row.is-best .rc-name b{color:var(--tint,#fff)}
.rc-val{text-align:right;white-space:nowrap}
.rc-val b{display:block;font:600 19px/1.15 SG;letter-spacing:-.02em;color:#fff;
  font-variant-numeric:tabular-nums}
.rc-val span{display:block;font:500 11px/1.3 JB;color:var(--dim);margin-top:5px}

.ps-out{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.ps-fig{padding:18px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.02)}
.ps-fig b{display:block;font:600 clamp(26px,3.4vw,36px)/1 SG;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums}
.ps-fig span{display:block;font:500 11px/1.4 JB;letter-spacing:.05em;color:var(--dim);
  margin-top:10px;text-transform:uppercase}
.ps-loss{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.ps-l{padding:14px 15px;border:1px solid var(--line);border-radius:12px}
.ps-l b{display:block;font:600 17px/1 SG;letter-spacing:-.02em;color:var(--tint,#fff);
  font-variant-numeric:tabular-nums}
.ps-l span{display:block;font:500 10.5px/1.35 JB;color:var(--dim);margin-top:7px}
@media (max-width:720px){
  .fc-3{grid-template-columns:1fr}
  .ps-out{grid-template-columns:1fr}
  .ps-loss{grid-template-columns:1fr}
  .ps-l{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .ps-l span{margin-top:0;text-align:right}
  .rc-row{grid-template-columns:1fr auto;gap:12px}
  .rc-name span{font-size:12.5px}
}

/* ═══ ACCESSIBILITY ════════════════════════════════════════════════════ */
.skip{position:absolute;left:12px;top:-60px;z-index:200;
  padding:12px 18px;border-radius:99px;background:#fff;color:var(--gut);
  font:600 14px/1 IN;transition:top .3s var(--ease)}
.skip:focus{top:12px}
main{display:block}

/* Micro-labels were set as low as 8.5px. Letterspaced uppercase mono needs
   less size than body copy to read, but not that much less — 11px is the
   floor now, everywhere, and the tracking carries the rest. */
.mono,.crumb,.tnum,.fc-note,.scene-cap,.spread figcaption,.sm .g,.samplenote,
.paynote,.legal,.specline,.lt,.badge,.sh-g i,.tagp,.fc-ctl>span,.rc-val span,
.ps-fig span,.ps-l span,.fc-val span,.fc-name span,.samplelinks span,.pick-o{
  font-size:11px}
.badge,.lt{font-size:11px;letter-spacing:.1em}
.crumb{font-size:11px}
.legal{font-size:11.5px}
.pick-o{font-size:13.5px}          /* a control, not a label */
@media (max-width:560px){.pick-o{font-size:12.5px}}

/* ═══ RAILS — momentum, snap, and a fade at the edges ═══════════════════
   A hard-cut rail edge reads as broken layout; a fade reads as "there is
   more". scroll-behavior:smooth so any programmatic scroll matches the rest
   of the site's pacing. */
.spreads,.seq-meta,.samplelinks{scroll-behavior:smooth}
@media (max-width:820px){
  .spreads{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
  .spread img{transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
  .spread:active img{transform:scale(.985)}
}
@media (prefers-reduced-motion:reduce){
  .spreads,.seq-meta,.samplelinks{scroll-behavior:auto}
}

/* ═══ VAULT DEMO ═══════════════════════════════════════════════════════ */
.vd-tabs{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:20px;
  border-bottom:1px solid var(--line)}
.vd-t{font:500 13px/1 IN;color:var(--mut);cursor:pointer;padding:12px 16px;
  border-radius:99px;border:1px solid var(--line);background:transparent;min-height:44px;
  transition:color .3s var(--ease),border-color .35s var(--ease),background .35s var(--ease),
             transform .25s var(--ease)}
.vd-t:hover{color:var(--w);border-color:rgba(255,255,255,.24)}
.vd-t:active{transform:scale(.97)}
.vd-t:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vd-t[aria-pressed="true"]{color:var(--gut);background:#fff;border-color:#fff}
.vd-body{margin-top:20px;padding:20px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.022);overflow-x:auto;
  font:400 13px/1.72 JB;color:var(--mut);white-space:pre-wrap;word-break:break-word;
  opacity:0;transform:translateY(5px);
  transition:opacity .34s var(--ease),transform .34s var(--ease)}
.vd-body.in{opacity:1;transform:none}
.vd-body:focus-visible{outline:2px solid #fff;outline-offset:2px}
.is-b .vd-body{border-color:color-mix(in srgb,var(--tint) 34%,transparent);
  background:color-mix(in srgb,var(--tint) 7%,transparent);color:#E6E9F2}
@media (max-width:560px){.vd-body{font-size:12px;padding:16px;line-height:1.7}}
@media (prefers-reduced-motion:reduce){.vd-body{transition:none}}

/* ═══ PAGE ENTRANCE + CROSS-PAGE TRANSITIONS ═══════════════════════════
   No spinner: the site paints in well under a second, so a loading screen
   would only add the delay it pretends to cover. Instead the page itself
   arrives — a soft rise on first paint, and same-origin navigations
   cross-fade where the browser supports MPA view transitions. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .18s var(--ease-io) both}
::view-transition-new(root){animation:vt-in .32s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}


/* Animate main's CHILDREN, never main itself: a transformed ancestor
   becomes the containing block for position:fixed, which glued the sticky
   buy bar to the bottom of the CONTENT (down by the FAQ) for the first
   second, then snapped it to the viewport — the "weird animation". */

.plate>main>.sticky,.plate>main>#sticky{animation:none}

/* (2026-09-09) page-in REMOVED. Three entrances were stacking — cross-document view
   transition, page-in on nav/main/footer, and the data-rv reveals — and on a prerendered
   page (no view transition) page-in ran AFTER the page was visible: 'loads, then jumps in'. */

/* FAQ answers used to snap open. interpolate-size lets height:auto animate
   in Chromium; elsewhere the fade still carries the transition. */
.faq details::details-content{
  opacity:0;transform:translateY(-4px);block-size:0;overflow:hidden;
  transition:opacity .4s var(--ease),transform .4s var(--ease),
    block-size .45s var(--ease),content-visibility .45s allow-discrete}
.faq details[open]::details-content{opacity:1;transform:none;block-size:auto}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
}
.faq summary::marker{content:""}
.faq summary{position:relative;padding-right:34px}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.6px solid var(--dim);border-bottom:1.6px solid var(--dim);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--ease),border-color .3s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:#fff}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .plate>main>*,.plate>.nav,.plate>footer{animation:none}
  .faq details::details-content{transition:none}
}

/* ═══ REVEALS v2 — replayable, softer ═══════════════════════════════════
   Reveals now reset when they leave below the viewport, so the curve runs
   both ways. Slightly shorter travel + a touch quicker than before: on
   replay, a long entrance reads as the page being slow rather than smooth. */
.js [data-rv]:not(.in){opacity:0;transform:translateY(14px)}
[data-rv]{transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ═══ MOBILE PERF ═══════════════════════════════════════════════════════ */
@media (max-width:860px){
  /* a 660px blurred radial repainting under the scrub was the jank */
  .stack-glow{display:none}
  .bk3-sh{display:none}
}

/* ═══ WHAT THIS IS — horizontal on mobile ═══════════════════════════════ */
@media (max-width:860px){
  .trio{gap:0;max-width:none}
  .tcard{display:grid;grid-template-columns:34px 1fr;column-gap:14px;
    align-items:start;padding:15px 0;border-top:1px solid var(--line-s)}
  .tcard:first-child{border-top:0;padding-top:4px}
  .tico{width:30px;height:30px;margin-top:2px}
  .tcard h3{margin-top:0;font-size:15.5px}
  .tcard p{grid-column:2;font-size:13px;line-height:1.5;margin-top:4px;max-width:none}
  .tcard::before{display:none}
}

/* ═══ FOLD — one collapsible language for the whole site ════════════════
   Chapter lists, tools and who-for sections fold closed. The page shows
   its shape first; depth is a tap away. Same open animation as the FAQ. */
.fold{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.018);
  margin-top:12px}
.fold>summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
  padding:16px 18px;font:600 15px/1.3 IN;color:var(--w);min-height:52px;
  transition:color .25s}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary .mono{margin:0;flex:1;text-align:right;color:var(--dim);font-size:11px}
.fold>summary::after{content:"";width:9px;height:9px;flex:none;
  border-right:1.6px solid var(--dim);border-bottom:1.6px solid var(--dim);
  transform:rotate(45deg) translateY(-2px);transition:transform .4s var(--ease)}
.fold[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.fold>.fold-body{padding:2px 18px 20px}
.fold::details-content{opacity:0;transform:translateY(-4px);block-size:0;overflow:hidden;
  transition:opacity .4s var(--ease),transform .4s var(--ease),
    block-size .45s var(--ease),content-visibility .45s allow-discrete}
.fold[open]::details-content{opacity:1;transform:none;block-size:auto}
@supports (interpolate-size:allow-keywords){.folds{interpolate-size:allow-keywords}}
.fold .fc{border:0;padding:0;background:transparent}
.fold .map{border:0;padding:0;background:transparent}
@media (prefers-reduced-motion:reduce){.fold::details-content{transition:none}}

/* position-size: one confident stat instead of three loss tiles */
.ps-room{margin-top:14px}
.ps-room .ps-l{display:flex;align-items:baseline;gap:14px;padding:16px 18px;
  border:1px solid color-mix(in srgb,var(--tint,#fff) 30%,transparent);
  border-radius:13px;background:color-mix(in srgb,var(--tint,#fff) 6%,transparent)}
.ps-room .ps-l b{font:600 22px/1 SG;letter-spacing:-.02em;color:var(--tint,#fff);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.ps-room .ps-l span{font:400 13px/1.55 IN;color:var(--mut);margin:0;text-align:left;
  text-transform:none;letter-spacing:0}
@media (max-width:560px){.ps-room .ps-l{flex-direction:column;gap:8px}}

/* ═══ CHAPTER TEASER ════════════════════════════════════════════════════
   The list is the sales pitch for a book without reviews, so it is visible
   by default: about six rows, faded at the edge, one button for the rest.
   A fold made the strongest proof on the page cost a tap; this costs none. */
/* ═══ CONTENTS — the page's strongest asset, so it is never folded away ═══
   Research on comparable sellers (Refactoring UI, Learn UI Design) found the
   premium convention is contents-forward: publish the full curriculum with page
   numbers rather than hide it. The old build clamped this to 322px behind a
   "See all 34 chapters" button, which buried the one thing a course cannot show
   before purchase. The button and the mask are gone. */
.chapwrap{position:relative}
.chapwrap .chap{max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
.chap li{align-items:baseline}
.chap li .ct{flex:1;min-width:0}
.chap li .cp{font-family:JB;font-size:10.5px;font-weight:500;letter-spacing:.06em;
  color:var(--dim);flex:none;padding-left:14px;font-variant-numeric:tabular-nums}
.chap-more:focus-visible{outline:2px solid #fff;outline-offset:3px}
.chapwrap.open .chap-more .ic{transform:rotate(-90deg)}
/* the teaser is not a reveal target, so its rows must not wait for .in */
.chap li{opacity:1;transform:none}
.chap.in::before,.chap::before{transform:scaleY(1)}
/* defense: any map inside a fold renders without the reveal gate too */
.fold .map li{opacity:1;transform:none}
.fold .map::before{transform:scaleY(1)}
/* Reveal safety (2026-09-09): IntersectionObserver never sees items that live inside a
   horizontal rail (off to the right) or inside a closed <details>. They stayed at opacity 0
   forever — the fee calculator was invisible after opening its fold. Both cases now reveal
   by CSS the moment their container is open / in view. */
.js .rail [data-rv],.js .spreads [data-rv],.js [style*="overflow-x"] [data-rv]{opacity:1;transform:none}
.js details[open] [data-rv]{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
/* pages that carry the fixed buy bar need room under the footer so nothing hides behind it */
@media (max-width:900px){body:has(.sticky) .foot{padding-bottom:calc(clamp(28px,3vw,40px) + 96px)}}
/* (2026-09-09) the 348px mobile cap from the folded era is GONE: with overflow visible it spilled the
   list straight over the next section. The list is always open and always full height. */

/* PDP page pair: two pages side by side on desktop, homepage-style rail on
   mobile (the .spreads rail rules already handle <=820px). */
.spreads-2{max-width:640px;margin-inline:auto}
@media (min-width:821px){.spreads-2{grid-auto-columns:minmax(0,1fr)}}

/* the scene as a slim banner inside the "real pages" section — the signature
   animation without the cost of its own section */
.scene-slim{margin-top:26px}
.scene-slim .scene{max-height:280px}
@media (max-width:820px){.scene-slim .scene{max-height:220px}}

/* sampler CTA at the moment of peak curiosity — right under the real pages */
.pagecta{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-top:22px;padding:18px 20px;border:1px solid var(--line);
  border-radius:14px;background:rgba(255,255,255,.018)}
.pagecta p{font:400 14px/1.55 IN;color:var(--mut);max-width:52ch;margin:0}
@media (max-width:640px){.pagecta{flex-direction:column;align-items:stretch;text-align:center}
  .pagecta .btn{justify-content:center}}

/* ═══ PDP HERO v2 — four moves, no paragraphs ═══════════════════════════ */
.metaline{font:500 11px/1.7 JB;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin-top:16px}
.trustline{font:400 13px/1.6 IN;color:var(--dim);margin-top:18px}
.setline{display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  font:500 13px/1.4 IN;color:var(--mut);min-height:32px;
  transition:color .25s,gap .3s var(--ease)}
.setline:hover{color:#fff;gap:10px}
@media (max-width:860px){
  .trustline{font-size:12.5px;margin-top:14px}
  .metaline{margin-top:13px}
}

/* ═══ TIPS (thanks page) ════════════════════════════════════════════════ */
.tips{margin-top:4px}
.tip-row{display:flex;gap:10px;justify-content:center;margin-top:22px}
.tipbtn{font:600 16px/1 SG;letter-spacing:-.01em;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;
  padding:0;width:84px;min-height:52px;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--spring)}
.tipbtn:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.07);
  transform:translateY(-2px)}
.tipbtn:active{transform:scale(.96)}
.tipbtn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.tipbtn[disabled]{opacity:.55;cursor:wait}

/* custom tip: revealed by "Other" */
.tip-custom{display:flex;align-items:center;gap:10px;justify-content:center;
  margin-top:14px}
.tip-custom .tip-cur{font:600 18px/1 SG;color:var(--dim)}
.tip-custom input{width:96px;font:600 16px/1 SG;color:#fff;text-align:center;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;
  padding:14px 10px;-moz-appearance:textfield;appearance:textfield}
.tip-custom input::-webkit-outer-spin-button,.tip-custom input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.tip-custom input:focus{outline:none;border-color:rgba(255,255,255,.34)}
.tip-custom input[aria-invalid="true"]{border-color:#E4736A}
@media (max-width:560px){.tip-row{flex-wrap:wrap}.tipbtn{width:74px}}

/* ═══ THE VEIL — homepage loading screen ════════════════════════════════
   Owner's call (overriding my earlier no-spinner advice): a branded moment
   on open and on return. Kept honest by being FAST — minimum 550ms so the
   draw completes, hidden the moment the page is ready, hard cap in JS. It
   also covers the hero's first JS layout, which used to flash the covers
   unpositioned at the left edge. */
#veil{position:fixed;inset:0;z-index:300;background:var(--gut);
  view-transition-name:veil;
  display:flex;align-items:center;justify-content:center;
  /* visibility snaps ON instantly; only .done delays it — a two-way delay
     made the back-navigation replay invisible for its first half-second */
  transition:opacity .5s var(--ease)}
#veil.done{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease),visibility 0s .5s}
.veil-mark{width:64px;height:60px;overflow:visible;
  animation:vm-in .45s var(--spring) both}
.vm-stroke{stroke-dasharray:52;stroke-dashoffset:52;
  animation:vm-draw .55s var(--ease) .14s forwards}
.vm-tip{opacity:0;transform-origin:50px 25px;transform:scale(.6);
  animation:vm-tip .3s var(--spring) .58s forwards}
@keyframes vm-in{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes vm-draw{to{stroke-dashoffset:0}}
@keyframes vm-tip{to{opacity:1;transform:scale(1)}}
/* Back-navigation replay, slightly quicker. The keyframes are ALIASES on
   purpose: a finished CSS animation only restarts when its NAME changes —
   retiming the same name does nothing, which is why the replay drew nothing. */
@keyframes vm-in2{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes vm-draw2{to{stroke-dashoffset:0}}
@keyframes vm-tip2{to{opacity:1;transform:scale(1)}}
#veil.replay .veil-mark{animation:vm-in2 .4s var(--spring) both}
#veil.replay .vm-stroke{animation:vm-draw2 .5s var(--ease) .12s both}
#veil.replay .vm-tip{animation:vm-tip2 .3s var(--spring) .55s both}
/* exit: the mark lifts and dissolves as the veil fades — never a hard cut.
   animation:none is load-bearing — vm-in's fill:both pins opacity/transform,
   and a running fill beats any declaration, so without it no exit ever showed. */
#veil.done .veil-mark{animation:none;opacity:0;transform:scale(1.14);
  transition:opacity .4s var(--ease),transform .55s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .veil-mark,.vm-stroke,.vm-tip{animation:none;stroke-dashoffset:0;opacity:1;transform:none}
}

/* hero covers stay invisible until JS has placed them — the flash fix even
   without the veil (subpages, no-veil paths) */
.js .stage:not(.ready){opacity:0}
.stage{transition:opacity .5s var(--ease)}

/* ═══ REDUCED MOTION · THE HERO ═════════════════════════════════════════
   The scrub used to run place(1) for these users, which hid the copy and
   CTAs. Static layout instead: copy, then the price rail; the cover stage
   is decorative and the catalogue below shows all four covers anyway. */
@media (prefers-reduced-motion:reduce){
  .seq{height:auto}
  .pin{position:static;height:auto;min-height:0;display:block;
    padding-block:clamp(36px,7vw,64px)}
  .stage,.seq-hint{display:none}
  .seq-copy{position:static;opacity:1!important;transform:none!important;top:auto}
  .seq-meta{position:static;opacity:1!important;transform:none!important;
    margin-top:34px}
}

/* sticky buy bar clears the iPhone home indicator */
.sticky-in{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}

/* rails are keyboard-scrollable (they get tabindex from the builder) */
.spreads:focus-visible,.seq-meta:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* the menu sheet must not scroll-chain into the page behind it on iOS */
.sh-panel,.sh-back{overscroll-behavior:contain}

/* 861-900px: the .pdp redeclaration below used to beat the 900px collapse,
   leaving an unintended two-column squeeze in that band */
@media (max-width:900px){
  .pdp{grid-template-columns:1fr!important;gap:24px}
  .pdp-cover{order:-1;max-width:180px;margin-inline:auto}
}

/* ═══ THE REST OF THE SHELF (thanks) ════════════════════════════════════ */
.alsoby{margin-top:4px;padding-bottom:6px}
.alsoby-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.alsoby-g{flex:0 1 150px;text-align:center;padding:14px 12px;border:1px solid var(--line);
  border-radius:14px;background:rgba(255,255,255,.02);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--spring)}
.alsoby-g:hover{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.05);
  transform:translateY(-3px)}
.alsoby-g img{width:74px;border-radius:5px;border:1px solid rgba(255,255,255,.12)}
.alsoby-g b{display:block;font:600 13px/1.3 IN;color:#fff;margin-top:11px}
.alsoby-g i{display:block;font:500 12px/1 JB;color:var(--dim);margin-top:6px;font-style:normal}



/* 404 picker spacing */
.pick .pick-q .mono{display:block}

/* ═══ TOUCH-TARGET FLOOR — the measured stragglers ══════════════════════ */
@media (max-width:860px){
  .skip:focus{min-height:44px}
  .brand{min-height:44px;display:inline-flex;align-items:center}
  .mbtn{width:46px;height:44px}
  .setline{min-height:44px;align-items:center}
  /* range sliders keep their 3px track — the input element itself grows */
  .fc-ctl input[type=range]{height:44px}
  #consent-wrap input[type=checkbox],.co-card input[type=checkbox]{
    width:22px;height:22px;padding:11px;box-sizing:content-box}
}

/* ═══ READER QUOTES — dormant until TESTIMONIALS has real entries ════════ */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.quote{margin:0;padding:22px 22px 20px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.018)}
.quote blockquote{margin:0;font:400 15px/1.65 IN;color:var(--mut)}
.quote figcaption{margin-top:14px;font:600 13.5px/1.3 IN;color:#fff}
.quote figcaption span{display:block;font:500 11px/1.4 JB;color:var(--dim);margin-top:4px;
  text-transform:uppercase;letter-spacing:.08em}

/* ═══ SCROLL PROGRESS ═══════════════════════════════════════════════════ */
.progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:140;
  pointer-events:none;transform-origin:0 50%;transform:scaleX(0);opacity:0;
  background:linear-gradient(90deg,#fff 0%,#E4D3AC 55%,var(--champagne) 100%);
  box-shadow:0 0 10px rgba(201,169,106,.45);
  transition:opacity .4s var(--ease)}
@media (prefers-reduced-motion:reduce){.progress{box-shadow:none}}

/* ═══ NO DOUBLE ENTRANCE ════════════════════════════════════════════════
   During an MPA view transition the browser already cross-fades the pages;
   letting page-in ALSO run made content animate twice — the flicker on
   page-to-page navigation. Chrome 125+ exposes the state as a pseudo-class;
   elsewhere the selector simply never matches and page-in runs as normal. */
html:active-view-transition .plate>.nav,
html:active-view-transition .plate>main>*,
html:active-view-transition .plate>footer{animation:none}

/* ═══ CHECKOUT CARD — one wave, regardless of network timing ════════════
   The summary is populated by a separately-fetched script; on slow
   connections the browser can paint the empty card first and snap the
   values in later. Soft-hidden from the FIRST BYTE (no .js dependency —
   mid-parse paints happen before any script runs), revealed once by
   checkout8.js when every value is in. noscript unhides it inline. */
.co-card{opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.co-card.ready{opacity:1;transform:none}

/* ═══ PDP v4 — the approved pdp_mock (2026-09-08) ════════════════════════
   Hero order is eyebrow → title → lead → buy → numbers. The numbers sit
   BELOW the buttons on purpose: they are reassurance for someone already
   reaching for the button, not the pitch itself. */
.eyebrow{font-family:JB;font-size:11px;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.pdp h1{font-size:clamp(34px,4.3vw,60px);line-height:1.04;letter-spacing:-.026em;color:#fff}
.pdplead{font:400 clamp(14.5px,1.35vw,16.5px)/1.62 IN;color:rgba(226,234,255,.72);
  margin-top:18px;max-width:46ch}
.pdp .buy{margin-top:26px}

.statrow{display:flex;flex-wrap:wrap;gap:34px 40px;margin-top:34px;
  padding-top:26px;border-top:1px solid var(--line)}
.stat b{display:block;font:700 clamp(21px,2.1vw,27px)/1 SG;color:#fff;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat i{display:block;font:500 10.5px/1.3 JB;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim);font-style:normal;margin-top:9px}

/* Six real pages, three up. A page image is portrait and text-dense, so it
   needs a light ground to read as PAPER — the rest of the site is near-black
   and an unbacked scan would float. */
.pggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px);
  margin-top:30px}
.pggrid .pg{margin:0}
.pggrid .pg img{width:100%;height:auto;display:block;border-radius:3px;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px -12px rgba(0,0,0,.75)}
.pggrid figcaption{margin-top:11px;font:500 10.5px/1.3 JB;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
@media (max-width:900px){
  .pggrid{grid-template-columns:repeat(2,1fr)}
  .statrow{gap:24px 30px}
}
@media (max-width:520px){
  .pggrid{grid-template-columns:repeat(2,1fr);gap:12px}
  .pggrid figcaption{font-size:9.5px;letter-spacing:.1em}
}

/* (2026-09-09) below-the-fold sections skip layout/paint until near the viewport —
   long product pages render their first screen sooner and scroll with less work. */