/* Fold landing v4 — centered, in normal flow, real screens in phones. Tokens only. Motion gated on html.has-motion. */

/* ---------- primitives ---------- */
.h2{font-family:var(--display);font-weight:500;font-size:clamp(32px,4.8vw,56px);line-height:1.04;letter-spacing:-.008em;color:var(--cream);margin:0 0 16px;text-wrap:balance}
.lede{color:var(--cream2);font-size:clamp(17px,1.35vw,19px);line-height:1.6;max-width:62ch}
.fine{color:var(--muted);font-size:14px;line-height:1.55}
.sec-head{text-align:center;max-width:840px;margin:0 auto clamp(32px,4.5vw,60px)}
.sec-head .lede{margin:0 auto}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 11px;border-radius:999px;border:1px solid var(--hair-strong);background:rgba(var(--cream-rgb),.04);color:var(--cream2);font-size:13.5px;font-weight:600;text-decoration:none}
.pill-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.22)}
html.has-motion [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0s)}
html.has-motion [data-reveal].is-in{opacity:1;transform:none}
html.has-motion [data-split][data-split-scroll] .swi.swi{transform:none;opacity:calc(.22 + .78*var(--e))}
html.has-motion [data-split][data-split-scroll] .sw{overflow:visible}

/* ---------- iPhone 16 Pro frame — pure CSS, photoreal (design panel winner, band pulled toward graphite) ----------
   1em = 1% of the body width (font-size = --w/100): every dimension scales with --w. Layers, outside → in:
   .ip (body: shadows + specular rim) › .ip-band (titanium) › .ip-glass (front glass + seam) › .ip-screen (clip) › .ip-island. Buttons protrude behind the body. */
.ip{--w:340px;--band:1.05em;--bezel:1.75em;--rim:max(1px,.28em);--r:12.5em;position:relative;width:var(--w);font-size:calc(var(--w)/100);aspect-ratio:71.5/149.6;border-radius:var(--r);
  background:linear-gradient(155deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.5) 12%,rgba(255,255,255,.12) 38%,rgba(255,255,255,.04) 55%,rgba(255,255,255,.26) 82%,rgba(255,255,255,.62) 100%),#4e4b47;
  box-shadow:0 .3em .6em rgba(0,0,0,.55),0 2.5em 3.5em -1.2em rgba(0,0,0,.75),0 18em 36em -12em rgba(0,0,0,.95),0 9em 28em -6em rgba(var(--gold-rgb),.14);isolation:isolate}
.ip-band{position:absolute;top:var(--rim);left:var(--rim);right:var(--rim);bottom:var(--rim);border-radius:calc(var(--r) - var(--rim));
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 20%,rgba(0,0,0,0) 62%,rgba(0,0,0,.22) 90%,rgba(var(--gold-rgb),.14) 100%),
  conic-gradient(from 0deg at 50% 50%,#a19d97 0deg,#c9c5be 22deg,#7f7b75 34deg,#57534e 70deg,#4a4743 90deg,#524e49 120deg,#75716b 150deg,#a29e97 158deg,#726e68 175deg,#68645f 185deg,#8d8983 203deg,#615d58 220deg,#585450 250deg,#67635e 270deg,#8a867f 300deg,#bdb9b2 326deg,#dcd8d1 338deg,#b6b2ab 350deg,#a19d97 360deg),#67635e}
.ip-band::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 .15em,rgba(0,0,0,.05) .15em .3em);mix-blend-mode:overlay;opacity:.6}
.ip-glass{position:absolute;top:calc(var(--rim) + var(--band));left:calc(var(--rim) + var(--band));right:calc(var(--rim) + var(--band));bottom:calc(var(--rim) + var(--band));border-radius:calc(var(--r) - var(--rim) - var(--band));background:#020202;
  box-shadow:0 0 0 max(1px,.22em) rgba(0,0,0,.55),inset 0 0 0 max(1px,.2em) rgba(255,255,255,.07)}
.ip-screen{position:absolute;top:var(--bezel);left:var(--bezel);right:var(--bezel);bottom:var(--bezel);overflow:hidden;background:#000;border-radius:10.3em;transform:translateZ(0)}
.ip-screen img,.ip-screen video{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.ip-island{position:absolute;left:50%;top:1.45%;width:31.7%;aspect-ratio:224/66;transform:translateX(-50%);border-radius:999em;background:#000;box-shadow:inset 0 0 0 .18em rgba(255,255,255,.022)}
.ip-btn{position:absolute;width:1.3em;z-index:-1;display:block;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(255,255,255,.18) 6%,rgba(255,255,255,0) 22%,rgba(0,0,0,0) 74%,rgba(0,0,0,.42) 100%),linear-gradient(90deg,#2e2b27 0%,#46423d 40%,#75716a 56%,#a7a29a 66%,#87827a 76%,#524e48 90%,#2f2c28 100%);
  box-shadow:0 .3em .4em -.1em rgba(0,0,0,.6),inset 0 .08em 0 rgba(255,255,255,.22),inset 0 -.08em 0 rgba(0,0,0,.4)}
.ip-btn.l{left:-.78em;border-radius:.6em .2em .2em .6em}
.ip-btn.r{right:-.78em;border-radius:.2em .6em .6em .2em;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(255,255,255,.14) 6%,rgba(255,255,255,0) 22%,rgba(0,0,0,0) 74%,rgba(0,0,0,.45) 100%),linear-gradient(270deg,#2c2925 0%,#403c37 40%,#67635c 56%,#928d85 66%,#736e67 76%,#48443e 90%,#2a2723 100%)}
.ip-btn.action{top:37.5em;height:8.6em}.ip-btn.volup{top:53em;height:18.5em}.ip-btn.voldn{top:75em;height:18.5em}.ip-btn.side{top:60em;height:30em}.ip-btn.cam{top:110em;height:17em;width:1.15em;right:-.6em;border-radius:.15em .45em .45em .15em}
.ip-ant{position:absolute;background:rgba(255,255,255,.26);z-index:1;box-shadow:0 0 0 .1em rgba(0,0,0,.08)}
.ip-ant.t{top:var(--rim);height:var(--band);width:.55em}.ip-ant.b{bottom:var(--rim);height:var(--band);width:.55em}.ip-ant.s{height:.55em;width:var(--band)}
.ip-ant.t.l,.ip-ant.b.l{left:16em}.ip-ant.t.r,.ip-ant.b.r{right:16em}.ip-ant.s.l{left:var(--rim);top:100em}.ip-ant.s.r{right:var(--rim);top:135em}
@supports (corner-shape: squircle){.ip{--r:14em}.ip,.ip-band,.ip-glass,.ip-screen{corner-shape:superellipse(1.45)}.ip-screen{border-radius:11.6em}}
/* widths per context: the frame reads --w, the wrapper has the same width */
.ph .ip{--w:100%}
.ph--c .ip{--w:min(340px,42vw)}.ph--l .ip,.ph--r .ip{--w:min(256px,27vw)}
@media (max-width:719px){.ph .ip,.ph--c .ip{--w:min(300px,78vw)}}
@media (min-width:720px) and (max-height:820px){.ph--c .ip{--w:min(300px,36vw)}.ph--l .ip,.ph--r .ip{--w:min(224px,24vw)}}
.fr-phone .ip{--w:min(320px,74vw)}
@media (min-width:900px){.fr-phone .ip{--w:min(340px,30vw)}}
.kcard{container-type:inline-size}.kcard .ip{--w:220px}
@supports (width:1cqw){.kcard .ip{--w:100cqw}}

/* ---------- HERO (centered) ---------- */
.hero{position:relative;padding:0;overflow:hidden;text-align:center;isolation:isolate}
.hero-glow{position:absolute;left:50%;top:34%;width:min(1200px,150vw);height:min(1000px,120vw);transform:translate(-50%,-30%);border-radius:50%;background:radial-gradient(closest-side,rgba(var(--gold-rgb),.20),rgba(var(--gold-rgb),.07) 42%,transparent 72%);pointer-events:none;z-index:0}
.hero-in{position:relative;z-index:2;min-height:calc(100svh - var(--peek));display:grid;align-content:center;justify-items:center;max-width:960px;padding-top:76px;padding-bottom:8px}
.hero-title{font-family:var(--display);font-weight:600;font-size:clamp(46px,7.6vw,108px);line-height:.96;letter-spacing:-.012em;color:var(--cream);margin:22px 0 22px}
.hero-title em{font-style:normal;color:var(--gold)}
.hero-sub{margin:0 auto;max-width:60ch;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--cream2)}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.hero-note{margin:18px auto 0;max-width:60ch;color:var(--muted);font-size:14px;line-height:1.55}
.hero-note a{color:var(--cream2)}
.hero-note .nb{white-space:nowrap}
.hero-note,.hero-sub{text-wrap:balance}
.hero-sub em{font-style:normal;color:var(--cream)}
@media (max-width:520px){
  .sm-hide{display:none}
  .hero-title{font-size:clamp(42px,11.5vw,60px)}
  .hero-sub{font-size:17px}
  .hero-cta{gap:8px;margin-top:22px}
  /* the second action becomes a quiet link: one obvious button on a phone */
  .hero-cta .hero-link2{min-height:44px;padding:0 6px;border:0;background:none;color:var(--cream2);text-decoration:underline;text-underline-offset:4px;font-size:15px;box-shadow:none}
  .hero-note{font-size:13px;margin-top:12px}
}
.hero-stage{position:relative;z-index:1;margin:0 auto;display:flex;justify-content:center;align-items:flex-start;gap:clamp(10px,2.4vw,36px);padding:0 22px clamp(48px,6vw,80px);max-width:1240px;pointer-events:none}
/* --peek = the slice of the phones that sits ABOVE the fold at scrollY 0: the copy block is sized to
   one screen minus this, so the product is visible before any scroll — and the eye knows to keep going.
   The arrival then lifts the stack into place. */
.hero{--peek:132px}
@media (max-height:780px) and (min-width:720px){.hero{--peek:104px}}
@media (max-width:719px){.hero{--peek:120px}}
.ph{margin:0;flex:0 0 auto;width:min(340px,42vw);position:relative;z-index:1}
.ph--l,.ph--r{width:min(256px,27vw);margin-top:64px;z-index:0}
.ph--l .ip{transform:rotate(-7deg)}.ph--r .ip{transform:rotate(7deg)}
@media (max-width:719px){.ph--l,.ph--r{display:none}.ph{width:min(300px,78vw)}}
/* short desktop windows (MacBook 13", 1366×768…): keep the phones in the first screen */
@media (min-width:720px) and (max-height:820px){.hero{padding-top:40px}.hero-title{font-size:clamp(44px,6.4vw,84px);margin:16px 0 16px}.hero-sub{font-size:17.5px}.hero-cta{margin-top:22px}.hero-note{margin-top:12px}.hero-stage{margin-top:34px}.ph{width:min(300px,36vw)}.ph--l,.ph--r{width:min(224px,24vw);margin-top:52px}}
/* ARRIVAL — driven by the hero's exit progress (--p: 0 at load → 1 after one viewport of scroll).
   At load the three phones sit low, spread and tilted; scrolling pulls them up into the composition.
   Each phone eases on its own window of --p (centre first, then the sides), so they land one after another. */
html.has-motion .ph{--a:clamp(0,calc((var(--p,0) - var(--a0,0))/var(--aw,.42)),1);--ae:calc(1 - (1 - var(--a))*(1 - var(--a))*(1 - var(--a)));will-change:transform,opacity}
html.has-motion .ph--c{--a0:0;--aw:.38;opacity:calc(.45 + var(--ae)*.55);translate:0 calc((1 - var(--ae))*120px);scale:calc(.92 + var(--ae)*.08)}
html.has-motion .ph--l{--a0:.06;--aw:.44;opacity:var(--ae);translate:calc((1 - var(--ae))*-120px) calc((1 - var(--ae))*200px);rotate:calc((1 - var(--ae))*-12deg)}
html.has-motion .ph--r{--a0:.06;--aw:.44;opacity:var(--ae);translate:calc((1 - var(--ae))*120px) calc((1 - var(--ae))*200px);rotate:calc((1 - var(--ae))*12deg)}
/* the glow behind them wakes up with them */
html.has-motion .hero-glow{opacity:calc(.35 + clamp(0,calc(var(--p,0)/.4),1)*.65)}
/* first paint: a short fade-in so the low, spread phones don't pop */
html.has-motion .hero-stage{animation:stage-in .9s ease .25s both}
@keyframes stage-in{from{opacity:0}to{opacity:1}}
/* on phones the side devices are hidden; the centre one rises the same way */
@media (max-width:719px){html.has-motion .ph--c{translate:0 calc((1 - var(--ae))*90px)}}
/* keyboard/anchor jumps land in the final state */
html.no-motion .ph{opacity:1}

/* ---------- STRIP ---------- */
.strip{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:rgba(var(--cream-rgb),.02);position:relative;z-index:2}
.strip-in{list-style:none;margin:0 auto;padding:14px 22px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px clamp(18px,3vw,40px)}
.strip li{display:inline-flex;align-items:center;gap:10px;color:var(--cream2);font-size:14.5px;font-weight:600;min-height:44px;white-space:nowrap}
.strip svg{width:20px;height:20px;color:var(--gold);flex:none}

/* ---------- FEATURE ROWS ---------- */
.fr{padding:clamp(64px,8vw,112px) 0;position:relative}
.fr-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center;justify-items:center;text-align:center}
.fr-copy{max-width:580px}
.fr-copy .lede{margin:0 auto}
.bul{list-style:none;margin:26px auto 0;padding:0;display:grid;gap:14px;text-align:left;max-width:520px}
.bul li{position:relative;padding-left:26px;color:var(--cream2);font-size:16px;line-height:1.55}
.bul li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.2)}
.bul b{color:var(--cream)}
.fr-phone{margin:0;width:min(320px,74vw)}
@media (min-width:900px){
  .fr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);text-align:left;justify-items:stretch}
  .fr-copy{justify-self:start}.fr-copy .lede,.bul{margin-left:0}
  .fr--flip .fr-copy{order:2;justify-self:end}.fr--flip .fr-phone{order:1}
  .fr-phone{width:min(340px,30vw);justify-self:end}
  .fr--flip .fr-phone{justify-self:start}
}
html.has-motion .fr-phone[data-reveal]{transform:none;translate:0 44px;opacity:0;transition:opacity .8s ease,translate 1s cubic-bezier(.22,1,.36,1)}
html.has-motion .fr-phone[data-reveal].is-in{translate:0 0;opacity:1}

/* ---------- CALCULATOR: dark controls + cream receipt ---------- */
.calc{padding:clamp(72px,9vw,120px) 0;position:relative;z-index:1}
.calc-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:start;max-width:1080px;margin:0 auto}
@media (min-width:900px){.calc-panel{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px}}
.calc-controls{display:grid;gap:26px;align-content:start;background:rgba(var(--cream-rgb),.04);border:1px solid var(--hair-strong);border-radius:28px;padding:clamp(20px,3vw,32px);position:relative;overflow:hidden}
.calc-controls::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(180deg,rgba(var(--cream-rgb),.05),transparent 35%)}
@media (min-width:900px){.calc-controls{position:sticky;top:96px}}
.ctl{display:grid;gap:10px;position:relative}
.ctl-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ctl label,.ctl-legend{font-size:16px;font-weight:600;color:var(--cream)}
.ctl-val{font-family:var(--display);font-weight:600;font-size:32px;line-height:1;color:var(--cream);display:inline-flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.ctl-val small{font-family:var(--body);font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.02em;white-space:nowrap}
.ctl-hint{margin:0;color:var(--muted);font-size:14px;min-height:1.4em}
.calc-note{margin:4px 0 0;color:var(--muted)}
.range{--fill:50%;appearance:none;-webkit-appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer;touch-action:pan-y}
.range:focus{outline:none}
.range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--gold) 0 var(--fill),rgba(var(--cream-rgb),.14) var(--fill) 100%)}
.range::-moz-range-track{height:4px;border-radius:2px;background:rgba(var(--cream-rgb),.14)}
.range::-moz-range-progress{height:4px;border-radius:2px;background:var(--gold)}
.range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:28px;height:28px;border-radius:50%;margin-top:-12px;background:var(--gold-hi);border:3px solid var(--bg1);box-shadow:0 0 0 1px rgba(var(--gold-rgb),.6),0 6px 22px rgba(var(--gold-rgb),.35);transition:transform .15s}
.range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--gold-hi);border:3px solid var(--bg1);box-shadow:0 0 0 1px rgba(var(--gold-rgb),.6),0 6px 22px rgba(var(--gold-rgb),.35)}
.range:active::-webkit-slider-thumb{transform:scale(1.12)}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--bg0),0 0 0 5px var(--gold)}
.range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--bg0),0 0 0 5px var(--gold)}
.chips{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chips .ctl-legend{width:100%;margin-bottom:2px;padding:0}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--hair-strong);color:var(--cream2);font-size:14px;font-weight:600;cursor:pointer;transition:color .18s,background .18s,border-color .18s}
.chip:hover span{color:var(--cream);border-color:rgba(var(--cream-rgb),.28)}
.chip input:checked+span{color:var(--gold-ink);background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));border-color:transparent}
.chip input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}
.receipt-slot{position:relative;padding-top:20px;overflow:hidden;min-width:0}
.receipt-slot::before{content:"";position:absolute;left:6%;right:6%;top:0;height:20px;border-radius:10px;background:var(--bg0);border:1px solid var(--hair-strong);box-shadow:inset 0 4px 10px rgba(0,0,0,.9);z-index:2}
.receipt{position:relative;margin:0 3% 18px;background:var(--rc-paper);color:var(--rc-ink);border-radius:4px 4px 0 0;padding:clamp(20px,3vw,30px) clamp(18px,3vw,30px) 22px;box-shadow:0 30px 80px rgba(0,0,0,.6);z-index:1;min-width:0}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;background:linear-gradient(135deg,var(--rc-paper) 50%,transparent 50%) 0 0/14px 14px repeat-x,linear-gradient(225deg,var(--rc-paper) 50%,transparent 50%) 0 0/14px 14px repeat-x}
.rc-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px dashed rgba(var(--ink-rgb),.28);padding-bottom:12px;margin-bottom:18px;flex-wrap:wrap}
.rc-brand{font-family:var(--wordmark);font-size:24px;line-height:1;color:var(--rc-ink)}
.rc-brand b{color:var(--gold-lo);font-weight:400}
.rc-tag{font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--rc-ink2)}
.rc-big{text-align:center;padding:4px 0 18px}
.rc-label{display:block;font-family:var(--display);font-weight:500;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--rc-ink2)}
.rc-total{display:block;font-family:var(--display);font-weight:600;font-size:clamp(54px,9vw,84px);line-height:.95;letter-spacing:-.01em;color:var(--rc-ink);font-variant-numeric:tabular-nums;margin:8px 0 6px}
.rc-sub{display:block;color:var(--rc-ink2);font-size:15px}
.rc-rows{margin:0;display:grid;gap:8px;font-size:15px}
.rc-rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-width:0}
.rc-rows dt{color:var(--rc-ink2);flex:1;position:relative;overflow:hidden;white-space:nowrap}
.rc-rows dt::after{content:" · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·";position:absolute;color:rgba(var(--ink-rgb),.35);padding-left:6px;letter-spacing:1px}
.rc-rows dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;color:var(--rc-ink);white-space:nowrap}
.rc-rule{height:0;border-top:1px dashed rgba(var(--ink-rgb),.28);margin:4px 0}
.rc-pro dd{color:var(--gold-ink)}
.calc-chart{margin:20px 0 0;position:relative}
.chart-box{position:relative;width:100%;height:220px}
@media (max-width:600px){.chart-box{height:190px}}
.chart-box svg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;display:block}
.chart-box .grid{stroke:rgba(var(--ink-rgb),.1);stroke-width:1}
.chart-box .tick{fill:var(--rc-ink2);font-family:var(--body);font-size:11.5px}
.chart-box .area{fill:rgba(var(--gold-rgb),.28)}
.chart-box .line{fill:none;stroke:var(--rc-ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart-box .dot{fill:var(--rc-ink);stroke:var(--rc-paper);stroke-width:2}
.chart-box .hover{fill:var(--gold-lo);stroke:var(--rc-paper);stroke-width:2}
.chart-box .cross{stroke:rgba(var(--ink-rgb),.35);stroke-width:1}
.chart-box .endlab{fill:var(--rc-ink);font-family:var(--body);font-weight:700;font-size:13px}
.chart-tip{position:absolute;left:var(--x,0);top:var(--y,0);transform:translate(-50%,calc(-100% - 14px));background:var(--rc-ink);color:var(--cream);border-radius:12px;padding:8px 12px;pointer-events:none;display:grid;gap:2px;white-space:nowrap;box-shadow:0 12px 30px rgba(0,0,0,.25);z-index:3}
.chart-tip b{font-family:var(--display);font-weight:600;font-size:18px;color:var(--cream);line-height:1}
.chart-tip span{font-size:12px;color:rgba(var(--cream-rgb),.7)}
.calc-chart figcaption{margin-top:6px;color:var(--rc-ink2);font-size:13px}
.calc-table{margin-top:10px}
.calc-table summary{cursor:pointer;color:var(--rc-ink2);font-size:13.5px;list-style:none;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-decoration-color:rgba(var(--ink-rgb),.3);text-underline-offset:3px}
.calc-table summary::-webkit-details-marker{display:none}
.calc-table table{width:100%;border-collapse:collapse;font-size:14px}
.calc-table th,.calc-table td{text-align:left;padding:7px 8px;border-bottom:1px solid rgba(var(--ink-rgb),.15)}
.calc-table th{color:var(--rc-ink2);font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.calc-table td:last-child,.calc-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.rc-foot{margin:20px 0 0;text-align:center;font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--rc-ink2)}
.rc-thanks{margin:6px 0 0;text-align:center;font-family:var(--quote);font-style:italic;font-weight:500;font-size:19px;color:var(--rc-ink);font-optical-sizing:auto}
.rc-share{margin:16px auto 0;display:flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(var(--ink-rgb),.3);background:transparent;color:var(--rc-ink);font-weight:700;font-size:14px;cursor:pointer;font-family:var(--body)}
.rc-share:hover{background:rgba(var(--ink-rgb),.06)}
.rc-share.done{color:var(--gold-ink);border-color:var(--gold-lo)}
html.has-motion .receipt-slot .receipt{transform:translateY(-22%);opacity:0;transition:transform 1.2s cubic-bezier(.22,1,.36,1),opacity .5s ease}
html.has-motion .calc-panel.in .receipt{transform:none;opacity:1}

/* ---------- INSIDE THE APP ---------- */
.kit{padding:clamp(72px,9vw,120px) 0;position:relative;z-index:1}
.kit-rail{list-style:none;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.5vw,30px);max-width:1080px}
.kcard{display:grid;gap:16px;align-content:start;min-width:0;justify-items:center}
.kcard .ip-screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(11,9,8,.92))}
.kcap{text-align:center;display:grid;gap:6px;padding:0 4px;max-width:260px}
.kcap h3{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.1;color:var(--cream);margin:0}
.kcap p{margin:0;color:var(--cream2);font-size:14.5px;line-height:1.5}
@media (max-width:899px){
  .kit-rail-wrap{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .kit-rail-wrap::-webkit-scrollbar{display:none}
  .kit-rail{display:flex;gap:16px;scroll-padding:22px;max-width:none}
  .kcard{flex:0 0 auto;width:min(240px,64vw);scroll-snap-align:center}
}

/* ---------- THE SENTENCE ---------- */
.sentence{padding:clamp(80px,11vw,150px) 0;position:relative;z-index:1}
.sentence-in{max-width:900px;margin:0 auto;text-align:center}
.karaoke{margin:0;font-family:var(--quote);font-style:italic;font-weight:500;font-size:clamp(28px,4.4vw,54px);line-height:1.22;color:var(--cream);font-optical-sizing:auto}
.sentence-src{margin:22px 0 0;color:var(--muted);font-size:14px}

/* ---------- PRICING ---------- */
.price{padding:clamp(72px,9vw,120px) 0;position:relative;z-index:1}
.plans{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);max-width:960px;margin:0 auto}
@media (min-width:720px){.plans{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:stretch}}
.plan{background:rgba(var(--cream-rgb),.04);border:1px solid var(--hair-strong);border-radius:24px;padding:clamp(22px,3vw,32px);display:grid;gap:10px;align-content:start;position:relative;overflow:hidden}
.plan::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(180deg,rgba(var(--cream-rgb),.05),transparent 40%)}
.plan--hi{border-color:rgba(var(--gold-rgb),.45);box-shadow:0 30px 90px rgba(var(--gold-rgb),.10)}
.plan-k{margin:0;font-family:var(--display);font-weight:500;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream2);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.plan--hi .plan-k{color:var(--gold)}
.plan-v{margin:6px 0 0;font-family:var(--display);font-weight:600;font-size:clamp(46px,7vw,64px);line-height:.95;color:var(--cream);display:flex;align-items:baseline;gap:6px}
.plan-v .cur{font-size:.5em;font-weight:500;color:var(--muted)}
.plan-v small{font-family:var(--body);font-size:14px;font-weight:500;color:var(--muted);margin-left:4px}
.plan-s,.plan-live{margin:0;color:var(--cream2);font-size:15px}
.plan-live b{color:var(--gold)}
.plan .btn{margin-top:12px;justify-self:start}
.price-foot{max-width:760px;margin:22px auto 0;text-align:center}
.price-foot a{color:var(--cream2)}

/* ---------- THE LAST FOLD ---------- */
.close{padding:clamp(80px,11vw,150px) 0 clamp(40px,6vw,80px);position:relative;z-index:1;text-align:center}
.close-in{display:grid;justify-items:center;gap:22px}
.close-mark{overflow:hidden;border-bottom:1px solid var(--gold);padding:0 .06em;max-width:100%}
.close-word{display:block;font-family:var(--wordmark);font-size:clamp(120px,27vw,400px);line-height:.86;color:var(--cream);transform:translateY(calc((1 - var(--e,1))*100%))}
.close-word b{color:var(--gold);font-weight:400}
html.has-motion .close .close-word{--e:clamp(0,calc((var(--p,0) - .08)/.34),1);--ee:calc(.45*var(--e) + .55*(1 - (1 - var(--e))*(1 - var(--e))));transform:translateY(calc((1 - var(--ee))*100%))}
.close-acts{justify-content:center}
.acts{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- STICKY CTA (phones) ---------- */
@media (max-width:899px){body{padding-bottom:96px}}
.sticky-cta{position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;display:none;min-height:56px;align-items:center;justify-content:center;border-radius:999px;font-weight:800;font-size:16px;color:var(--gold-ink);background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));box-shadow:0 12px 34px rgba(var(--gold-rgb),.3);text-decoration:none;transform:translateY(130%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
@media (max-width:899px){.sticky-cta{display:flex}}
.sticky-cta::before{content:"";position:absolute;left:-16px;right:-16px;bottom:calc(-12px - env(safe-area-inset-bottom));top:-26px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent,var(--bg0) 62%)}
.sticky-cta.show{transform:none}
html.no-motion .sticky-cta{transition:none}

/* product anchors in the header (homepage only) */
.nav-anchor{display:none}
@media (min-width:900px){.nav-anchor{display:inline-flex}}