:root{
  --ground:#e4e0d4; --paper:#faf8f1; --card:#fffdf7; --tint:#f4f1e7;
  --ink:#0d1b2a; --ink-soft:#55606d; --ink-faint:#8d9099;
  --line:#e7e1d1; --night:#07182d; --night-2:#102b49; --cream:#fdf7ea;
  --glow:#ff8f1f; --glow-soft:#ffb763; --glow-wash:rgba(255,143,31,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;font-weight:300;font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
.shell{max-width:1420px;margin:0 auto;padding:16px}
.sheet{background:var(--paper);border-radius:34px}
.wrap{max-width:1200px;margin:0 auto;padding:0 44px}
/* font-family is named here on purpose: app/globals.css paints h1-h6 in the
   interior face with an element rule, and an element rule beats what a heading
   would inherit from body. GATE: __tests__/v16-heading-font.test.ts */
h1,h2,h3{margin:0;font-family:"Inter",system-ui,sans-serif;font-weight:400;letter-spacing:-.036em;line-height:.96;text-wrap:balance}
h1{font-size:clamp(38px,5vw,66px);font-weight:390}
h2{font-size:clamp(34px,4.4vw,58px)}
h3{font-size:clamp(23px,2.6vw,34px);letter-spacing:-.03em}
p{margin:0}
a{color:inherit}
.kick{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--glow)}

/* buttons with real depth, like the template */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;
  border-radius:999px;border:1px solid transparent;background:var(--card);color:var(--ink);
  font-family:"Inter",sans-serif;font-weight:400;font-size:15.5px;cursor:pointer;text-decoration:none;
  box-shadow:0 1px 2px rgba(13,27,42,.12),0 8px 20px rgba(13,27,42,.14);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(13,27,42,.12),0 14px 30px rgba(13,27,42,.18)}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(13,27,42,.14),0 4px 10px rgba(13,27,42,.14)}
.btn-ink{background:var(--ink);color:var(--cream);
  box-shadow:0 2px 4px rgba(13,27,42,.28),0 12px 26px rgba(13,27,42,.26)}
.btn-ink:hover{background:#14293e;box-shadow:0 3px 6px rgba(13,27,42,.28),0 18px 36px rgba(13,27,42,.3)}
.btn-glow{background:var(--glow);color:#26140a;
  box-shadow:0 2px 4px rgba(160,70,0,.3),0 12px 28px rgba(255,143,31,.42)}
.btn-glow:hover{background:#ffa03c;box-shadow:0 3px 6px rgba(160,70,0,.3),0 18px 38px rgba(255,143,31,.5)}
.acts{display:flex;flex-wrap:wrap;gap:11px;margin-top:34px}

/* motion */
.rv{opacity:0;transform:translateY(48px) scale(.985);
  transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}
.pl-glide{opacity:0;transform:translate(120px,48px) scale(1.03);
  transition:opacity 1.9s cubic-bezier(.16,1,.3,1),transform 1.9s cubic-bezier(.16,1,.3,1)}
.pl-glide.in{opacity:1;transform:translate(var(--dx,0px),var(--dy,0px))}
.pl-push{opacity:0;transform:scale(1.22) translateY(34px);
  transition:opacity 1.6s cubic-bezier(.16,1,.3,1),transform 2.1s cubic-bezier(.16,1,.3,1)}
.pl-push.in{opacity:1;transform:none}
.end .art.pl-tail{opacity:0;transform:translateX(80px) rotate(2.5deg);
  transition:opacity 1.8s ease,transform 2.2s cubic-bezier(.16,1,.3,1)}
.end .art.pl-tail.in{opacity:.16;transform:none}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -9px}}
.floaty.in{animation:floaty 7s ease-in-out 2.2s infinite}
.rv,.pl-glide,.pl-push,.pl-tail{will-change:transform,opacity}

nav{position:sticky;top:10px;z-index:80;display:flex;align-items:center;gap:20px;
  margin:0 0 14px;padding:10px 14px 10px 26px;background:rgba(255,253,247,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:999px;
  box-shadow:0 1px 0 rgba(13,27,42,.06),0 12px 30px rgba(13,27,42,.09)}
nav .mark{display:flex;align-items:center}
/* Founder-picked wordmark size 2026-09-01: D (38px) on desktop, stepped to
   30px on phones so the pill bar keeps its proportions. */
nav .mark img{height:38px;width:auto;display:block;object-fit:contain;object-position:left center}
@media(max-width:640px){nav .mark img{height:30px}}
nav .links{display:none;gap:28px;margin-left:auto;font-size:14.5px;color:var(--ink-soft)}
nav .login{margin-left:auto;font-size:14.5px;font-weight:600;color:var(--night);text-decoration:none;white-space:nowrap;
  min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;border-radius:999px;
  background:rgba(13,27,42,.11);border:1px solid rgba(13,27,42,.24);
  transition:transform .18s ease,box-shadow .18s ease}
nav .login:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(13,27,42,.12),0 10px 22px rgba(13,27,42,.14)}
nav .links a{text-decoration:none}
/* nav's flex gap is 20px, so -16px lands the pair exactly 4px apart */
nav .btn{min-height:40px;padding:0 20px;font-size:14.5px;margin-left:-16px;white-space:nowrap;box-shadow:0 1px 2px rgba(13,27,42,.14),0 5px 12px rgba(13,27,42,.12)}
@media(min-width:900px){nav .links{display:flex}nav .login{margin-left:28px}nav .btn{margin-left:-16px}}

/* 1 hero */
.hero{position:relative;padding:44px 0 0;overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.hero .art{position:absolute;right:2%;top:18%;width:48%;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 14%,#000 34%);
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 14%,#000 34%)}
.hero .art img{width:100%;height:auto;display:block}
/* The hero's two lines swapped tags so the page's H1 could carry its search
   phrase (lib/seo/page-registry.ts) without touching the founder-approved Dia
   headline. Neither line changed size, weight, colour, spacing or place: the
   headline restates here what it used to inherit from the h1 rule above, and
   the line under it restates what it used to get as a plain p. */
.hero .hero-line{margin:0;margin-top:20px;max-width:14ch;
  font-family:"Inter",system-ui,sans-serif;font-size:clamp(38px,5vw,66px);font-weight:390;
  letter-spacing:-.036em;line-height:.96;text-wrap:balance}
.hero .sub{margin-top:24px;font-size:19px;color:var(--ink-soft);max-width:31ch}
.hero h1.sub{font-family:"Inter",system-ui,sans-serif;font-weight:300;
  letter-spacing:normal;line-height:1.5;text-wrap:wrap}
/* Dia headline (beui chromatic-text-reveal, vanilla port; brand ambers) */
@property --dia-sweep{syntax:'<percentage>';inherits:false;initial-value:-14%}
.dia{position:relative;display:inline-grid;white-space:nowrap;font-weight:650;margin-top:.16em}
.dia-size{visibility:hidden;grid-area:1/1;padding-bottom:.14em}
.dia-word{grid-area:1/1;position:absolute;left:0;top:0;
  background-clip:text;-webkit-background-clip:text;color:transparent;
  background-size:100% 100%;background-repeat:no-repeat;padding-bottom:.14em;margin-bottom:-.14em;
  --dia-sweep:-14%;
  background-image:linear-gradient(90deg,
    var(--ink) 0%, var(--ink) calc(var(--dia-sweep) - 14%),
    #ffd9a8 calc(var(--dia-sweep) - 14%), #ffb763 calc(var(--dia-sweep) - 7%),
    #ff8f1f calc(var(--dia-sweep) + 0%), #e2660c calc(var(--dia-sweep) + 7%),
    #b8480a calc(var(--dia-sweep) + 14%),
    transparent calc(var(--dia-sweep) + 14%), transparent 100%)}
.dia-word.sweep{transition:--dia-sweep 1.56s cubic-bezier(.45,0,.55,1),
  opacity .28s ease-out, filter .36s ease-out, transform .36s ease-out;
  --dia-sweep:114%;opacity:1;filter:blur(0);transform:translateY(0)}
.dia-word.enter{opacity:.56;filter:blur(6px);transform:translateY(5px)}
.sr-dia{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media (prefers-reduced-motion: reduce){.dia-word{--dia-sweep:114%}.dia-word.sweep{transition:none}}
/* T2 trust ledge (founder pick 2026-09-02): hairline rule under the CTAs,
   numbers over plain-English labels, no instrument styling */
.figs{position:relative;display:flex;gap:44px;margin-top:26px;z-index:2;
  border-top:1px solid var(--line);padding:22px 0 70px;width:min(440px,100%)}
.figs div{display:flex;flex-direction:column;gap:4px}
.figs b{font-weight:450;font-size:30px;letter-spacing:-.03em;line-height:1.15;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.figs span{font-weight:300;font-size:15px;color:var(--ink-soft)}
.figs b span{font-family:inherit;font-weight:inherit;font-size:inherit;color:inherit}
/* slot-roll digit ticker (beui number-ticker, vanilla port; motion.js) */
.tick-d{display:inline-block;position:relative;overflow:hidden;height:1.1em;width:1ch;vertical-align:bottom}
.tick-col{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;
  transition:transform .95s cubic-bezier(.16,1,.3,1);will-change:transform}
.tick-col span{height:1.1em;display:flex;align-items:center;justify-content:center;line-height:1}
.live b span{font-family:inherit;font-size:inherit;letter-spacing:inherit;color:inherit;text-transform:none}
@media (prefers-reduced-motion: reduce){.tick-col{transition:none}}
@media(max-width:900px){.hero .art{position:relative;right:auto;top:auto;width:94%;margin:32px auto -12px}}

/* 2 navy band - full bleed inside the sheet, not a card */
.band{background:var(--night);color:var(--cream);padding:88px 0}
.band .grid{display:grid;gap:44px;align-items:center}
@media(min-width:960px){.band .grid{grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:64px}}
.band h2{color:var(--cream)}
.band .note{margin-top:18px;font-size:17px;color:#9db6cc;max-width:32ch}
.band svg{width:100%;height:auto;display:block}

/* draw-on */
.draw{stroke-dasharray:var(--L);stroke-dashoffset:var(--L);
  transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1)}
.in .draw{stroke-dashoffset:0}
.in .draw.dly{transition-delay:.55s}
.pop{opacity:0;transition:opacity .55s ease}
.in .pop{opacity:1}
.in .pop.q1{transition-delay:.45s}.in .pop.q2{transition-delay:.85s}
.in .pop.q3{transition-delay:1.25s}.in .pop.q4{transition-delay:1.6s}
.ring{stroke-dasharray:151;stroke-dashoffset:151;transition:stroke-dashoffset 1.4s ease .8s}
.in .ring{stroke-dashoffset:57}

/* 3 try one - one stacked card, question above, working below */
.trysec{padding:88px 0}
.tryhead{text-align:center;max-width:52ch;margin:0 auto}
.trycard{max-width:760px;margin:44px auto 0;background:var(--card);border-radius:26px;overflow:hidden;
  box-shadow:0 2px 4px rgba(13,27,42,.06),0 28px 70px rgba(13,27,42,.1)}
.q-top{padding:38px 40px}
/* subject chip + topic, the dashboard hero's k2 pattern on a light card
   (founder, 2026-09-02: no more mono-caps "text · text" labels) */
.qmeta{display:flex;align-items:center;gap:10px;margin:0}
.qmeta .chip{font-size:11px;font-weight:600;letter-spacing:.02em;padding:4px 11px;border-radius:999px;
  background:rgba(255,143,31,.16);color:#8f4a00}
.qmeta span:last-child{font-size:13px;font-weight:500;color:var(--ink-soft)}
.qtext{margin-top:14px;font-size:clamp(19px,2vw,23px);font-weight:300;letter-spacing:-.018em;line-height:1.3}
.tabs{display:flex;gap:8px;margin-top:18px}
.tab{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);color:var(--ink-faint)}
.tab.on{background:var(--glow);color:#26140a;border-color:var(--glow)}
.opts{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.opt{display:flex;align-items:center;gap:13px;padding:14px 17px;border-radius:12px;
  border:1px solid var(--line);background:var(--paper);cursor:pointer;text-align:left;
  font-family:inherit;font-weight:300;font-size:16.5px;color:var(--ink);
  transition:border-color .18s ease,background .18s ease}
.opt:hover{border-color:var(--glow-soft)}
.opt .k{font-family:"DM Mono",monospace;font-size:11.5px;width:24px;height:24px;flex:none;
  display:grid;place-items:center;border-radius:7px;background:var(--tint);color:var(--ink-soft)}
.opt.correct{border-color:var(--glow);background:var(--glow-wash)}
.opt.correct .k{background:var(--glow);color:#26140a}
.opt.wrong{opacity:.42}
.q-bottom{background:var(--night);padding:26px 40px 30px;color:var(--cream)}
.q-bottom .lbl{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--glow)}
.work{margin-top:10px;min-height:96px;font-family:"DM Mono",monospace;font-size:15px;color:#9db6cc}
.work .l{opacity:0;transition:opacity .45s ease;padding:5px 0}
.work .l.on{opacity:1}
.work .l em{font-style:normal;color:var(--glow)}

/* 4 prepare switcher */
.prep{padding:0 0 88px}
.prephead{margin-bottom:30px}
.bento{display:grid;gap:16px}
@media(min-width:940px){.bento{grid-template-columns:6fr 5fr}}
.switch{position:relative;min-height:430px;background:var(--night);border-radius:26px;overflow:hidden;
  box-shadow:0 2px 4px rgba(13,27,42,.06),0 24px 60px rgba(13,27,42,.09)}
.switch .pane{position:absolute;inset:0;opacity:0;transform:scale(.985);
  transition:opacity .45s ease,transform .55s ease;display:flex;flex-direction:column;
  justify-content:center;padding:34px;pointer-events:none}
.switch .pane.on{opacity:1;transform:none}
.switch .lbl{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--glow);margin-bottom:18px}
.switch svg{width:100%;height:auto;display:block}
.picker{background:var(--card);border-radius:26px;padding:34px 30px;display:flex;flex-direction:column;
  justify-content:center;box-shadow:0 2px 4px rgba(13,27,42,.06),0 24px 60px rgba(13,27,42,.09)}
.picker .row{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:center;
  padding:14px 12px;border-radius:14px;border:1px solid transparent;cursor:pointer;
  text-align:left;font-family:inherit;background:none;color:var(--ink);width:100%;
  transition:background .2s ease,border-color .2s ease,padding-left .2s ease}
.picker .row:hover{background:var(--tint)}
.picker .row.on{background:var(--glow-wash);border-color:rgba(255,143,31,.42);padding-left:18px}
.picker .n{font-family:"DM Mono",monospace;font-size:11px;color:var(--ink-faint)}
.picker .row.on .n{color:var(--glow)}
.picker b{font-weight:300;font-size:clamp(19px,2vw,25px);letter-spacing:-.028em}
.picker .free{font-family:"DM Mono",monospace;font-size:12.5px;color:var(--ink-faint);margin-top:16px;padding-left:12px}
.picker .free em{font-style:normal;color:var(--glow)}

/* start group: big card + two below, like the template's apply-in-minutes */
.startsec{padding:0 0 88px}
.bigcard{position:relative;overflow:hidden;background:var(--night);color:var(--cream);border-radius:26px;
  padding:46px;min-height:410px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 2px 4px rgba(13,27,42,.06),0 24px 60px rgba(13,27,42,.09)}
.bigcard h2{color:var(--cream)}
.bigcard .cnt{color:#9db6cc}
.bigcard .art{position:absolute;inset:0;z-index:0;pointer-events:none}
.bigcard .art img{width:100%;height:100%;object-fit:cover;object-position:70% 42%;display:block}
.bigcard .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(7,24,45,.92) 26%,rgba(7,24,45,.4) 56%,rgba(7,24,45,0) 76%)}
.bigcard .top,.bigcard .btm{position:relative;z-index:2}
.bigcard .note{margin-top:16px;font-size:16.5px;color:var(--ink-soft);max-width:28ch}
.duo{display:grid;gap:16px;margin-top:16px}
@media(min-width:880px){.duo{grid-template-columns:1fr 1fr}}
.duo .cardl{background:var(--night);color:var(--cream);border-radius:26px;padding:46px;
  display:flex;flex-direction:column;gap:18px;justify-content:flex-start;
  box-shadow:0 2px 4px rgba(13,27,42,.06),0 24px 60px rgba(13,27,42,.09)}
.duo .cardl h3{color:var(--cream)}
.duo .cardr{background:var(--card);border-radius:26px;padding:46px;
  display:flex;flex-direction:column;gap:14px;justify-content:flex-start;
  box-shadow:0 2px 4px rgba(13,27,42,.06),0 24px 60px rgba(13,27,42,.09)}
.bub{max-width:82%;padding:12px 16px;border-radius:16px;font-size:15px;line-height:1.4}
.bub.me{align-self:flex-end;background:var(--glow);color:#26140a;border-bottom-right-radius:5px}
.bub.them{align-self:flex-start;background:var(--tint);color:var(--ink);border-bottom-left-radius:5px}
.duo .cardr h3{margin-top:0}
.alsoin{font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.04em;color:var(--ink-faint);line-height:1.7;margin-top:6px}

/* subject-card furniture */
/* subject counts as the trust-ledge micro pattern: weighted number, plain
   label, amber point between the two facts (no mono-caps "text · text") */
.cnt{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:300;color:var(--ink-soft);margin-top:14px;white-space:nowrap;max-width:none}
.cnt b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.cnt i{width:5px;height:5px;border-radius:50%;background:var(--glow);flex:none}
.bigcard .cnt b,.cardl .cnt b{color:var(--cream)}
.duo .cardl .acts2,.duo .cardr .acts2{margin-top:auto;padding-top:18px}
.acts2{display:flex;flex-wrap:wrap;gap:10px}
.btn.sm{min-height:40px;padding:0 20px;font-size:14.5px}
.btn.ghostd{background:transparent;border:1px solid rgba(253,247,234,.3);color:var(--cream);box-shadow:none}
.btn.ghostd:hover{background:rgba(253,247,234,.08)}
.duo .cardl,.duo .cardr{gap:12px}
.subchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.schip{padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;
  color:var(--ink-soft);background:var(--card)}

/* question tabs */
.tab{background:transparent;cursor:pointer}
.qpane{display:none}
.qpane.on{display:block}
.qhandg{transform-origin:140px 98px;transform:rotate(15deg);
  transition:transform 1.9s cubic-bezier(.4,0,.2,1) .3s}
.qpane.go .qhandg{transform:rotate(-90deg)}
.pd{opacity:0;transition:opacity .5s ease 2s}
.qpane.go .pd{opacity:1}
.plan{position:relative}
.badge{position:absolute;top:-12px;left:28px;background:var(--glow);color:#26140a;
  font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(255,143,31,.4)}

/* greyscale subject imagery, colour on hover */
.bigcard .art img{filter:grayscale(1);opacity:.8;transition:filter .55s ease,opacity .55s ease}
.bigcard:hover .art img{filter:grayscale(0);opacity:1}
.duo .cardl,.duo .cardr{position:relative;overflow:hidden}
.duo .cardl > *:not(.subimg):not(.cardscrim),.duo .cardr > *:not(.subimg){position:relative;z-index:2}
.subimg{position:absolute;z-index:1;pointer-events:none}
.subimg img{width:100%;height:auto;display:block;filter:grayscale(1);opacity:.3;
  transition:filter .55s ease,opacity .55s ease,transform .7s ease}
.si-l{inset:0;width:auto}
.si-l img{width:100%;height:100%;object-fit:cover;object-position:62% 32%}
.cardscrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(112deg,rgba(7,24,45,.92) 30%,rgba(7,24,45,.35) 62%,rgba(7,24,45,.05) 82%)}
.si-r{right:-2%;bottom:-8%;width:38%}
.si-r img{opacity:.38}
.duo .cardl:hover .subimg img,.duo .cardr:hover .subimg img{filter:grayscale(0);opacity:1;transform:scale(1.03)}
.si-l img{opacity:.78}
@media (hover:none){
  .bigcard .art img{filter:none;opacity:.8}
  .subimg img{filter:none;opacity:.55}}

/* translucent set dressing */
.trysec{position:relative;overflow:hidden}
.trysec .wrap{position:relative;z-index:2}
.tryart{position:absolute;left:-10%;top:52%;transform:translateY(-40%);width:44%;
  opacity:.13;pointer-events:none;z-index:1;
  -webkit-mask-image:linear-gradient(to right,#000 62%,transparent 96%);
  mask-image:linear-gradient(to right,#000 62%,transparent 96%)}
.tryart img{width:100%;height:auto;display:block}
.pricewrap{position:relative;overflow:hidden}
.priceart{position:absolute;right:-4%;top:-2%;width:64%;opacity:.12;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 78%,transparent 100%)}
.priceart img{width:100%;height:auto;display:block}
.pricing{position:relative;z-index:1}

/* live stats strip */
.livestrip{padding:64px 28px 0;max-width:1200px;margin:0 auto}
.livestrip .wrap{padding:0}
.live{display:grid;grid-template-columns:repeat(3,1fr);background:var(--card);border-radius:26px;
  box-shadow:0 2px 4px rgba(13,27,42,.05),0 24px 60px rgba(13,27,42,.07);overflow:hidden}
.live > div{padding:28px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.live > div + div{border-left:1px solid var(--line)}
/* live counters in the trust-ledge register: weighted Inter number, plain
   lowercase label, the live dot in the brand green (no mono caps) */
.live b{font-family:"Inter",sans-serif;font-weight:450;font-size:clamp(30px,3vw,40px);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.live .lab{display:flex;align-items:center;gap:8px;font-family:"Inter",sans-serif;
  font-size:15px;font-weight:300;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.live i{width:7px;height:7px;border-radius:50%;background:#2f7d51;flex:none;
  animation:lpulse 2.4s infinite}
@keyframes lpulse{0%{box-shadow:0 0 0 0 rgba(47,125,81,.4)}70%{box-shadow:0 0 0 8px rgba(47,125,81,0)}100%{box-shadow:0 0 0 0 rgba(47,125,81,0)}}
@media(max-width:760px){.live{grid-template-columns:1fr}
  .live > div{padding:20px 24px}
  .live > div + div{border-left:0;border-top:1px solid var(--line)}}

/* band lesson */
.lesson{border-radius:18px;overflow:hidden;background:#07182d;box-shadow:0 24px 60px rgba(4,12,24,.5)}
.lesson canvas{width:100%;height:auto;display:block}

/* worked-solution player */
.ws-stage{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ws-stage svg{width:100%;height:auto;display:block}
.ws-narr{margin:10px 2px 0;min-height:44px;font-size:14.5px;line-height:1.45;color:#c4d5e4;
  transition:opacity .15s ease}
.ws-ctl{display:flex;align-items:center;gap:12px;margin-top:10px}
.ws-ctl button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(253,247,234,.3);
  background:transparent;color:var(--cream);display:grid;place-items:center;cursor:pointer;flex:none;
  transition:border-color .18s ease,background .18s ease}
.ws-ctl button:hover{border-color:var(--glow);background:rgba(255,143,31,.1)}
.ws-ctl input[type="range"]{flex:1;accent-color:var(--glow);height:22px;cursor:pointer}
.ws-ctl #wsTime{font-family:"DM Mono",monospace;font-size:11.5px;color:#9db6cc;min-width:44px;text-align:right}
@media(max-width:560px){.ws-stage{grid-template-columns:1fr}}

/* phone pass */
@media(max-width:760px){
  .wrap{padding:0 22px}
  nav{margin:0 0 12px;padding:8px 10px 8px 18px;gap:8px}
  nav .btn{margin-left:-4px}
  /* Two pills beside a 30px wordmark on a 390px phone: keep each on one line. */
  nav .login,nav .btn{white-space:nowrap;padding:0 10px;font-size:13.5px}
  .hero{padding:42px 0 0}
  .figs{gap:32px;margin-top:22px;padding:18px 0 44px}
  .figs b{font-size:26px}
  .band{padding:60px 0}
  .trysec{padding:60px 0}
  .q-top{padding:26px 22px}
  .q-bottom{padding:20px 22px 24px}
  .prep{padding:0 0 60px}
  .switch{min-height:330px}
  .switch .pane{padding:20px}
  .picker{padding:24px 20px}
  .startsec{padding:0 0 60px}
  .bigcard{padding:28px 24px;min-height:360px}
  .bigcard .scrim{background:linear-gradient(to top,rgba(7,24,45,.94) 34%,rgba(7,24,45,.3) 70%,rgba(7,24,45,.1))}
  .duo .cardl,.duo .cardr{padding:28px 24px}
  .duo .cardl{min-height:300px}
  .pricing{padding:52px 18px 8px}
  .end{min-height:280px}
}

/* 5 pricing - detached, on the ground outside the sheet */
.pricing{padding:40px 28px 8px;max-width:1200px;margin:0 auto}
.pricehead{text-align:center;max-width:44ch;margin:0 auto 40px}
/* /plans writes this heading as the document's H1 (it IS the page a visitor
   landed on); the landing's own pricing section keeps its h2. Both draw at the
   size and weight the h2 always had. */
.pricehead h1{font-size:clamp(34px,4.4vw,58px);font-weight:400}
.pricehead .note{margin-top:14px;color:var(--ink-soft);font-size:16.5px}
.plans{display:grid;gap:16px}
@media(min-width:880px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{padding:38px 32px;display:flex;flex-direction:column;background:var(--card);border-radius:26px;
  box-shadow:0 2px 4px rgba(13,27,42,.06),0 24px 60px rgba(13,27,42,.1)}
.plan .t{font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint)}
.plan .a{font-weight:400;font-size:50px;letter-spacing:-.034em;margin:18px 0 2px;
  font-variant-numeric:tabular-nums;line-height:1}
.plan .w{font-family:"DM Mono",monospace;font-size:13px;color:var(--ink-faint);text-decoration:line-through}
.plan ul{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:10px;flex:1}
.plan li{font-size:15.5px;color:var(--ink-soft);padding-left:18px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:2px;background:var(--glow)}
.plan .btn{margin-top:28px}
.plan .note{margin-top:12px;font-family:"DM Mono",monospace;font-size:10.5px;color:var(--ink-faint)}
.plan.hi{background:var(--night);color:var(--cream)}
.plan.hi .t,.plan.hi .w,.plan.hi .note{color:#6f8ba5}
.plan.hi li{color:#c4d5e4}

/* 6 closing card back on the ground */
.endshell{max-width:1420px;margin:16px auto 0;padding:0 16px}
.end{position:relative;min-height:380px;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;background:var(--paper);border-radius:34px}
.end .art{position:absolute;right:-10%;bottom:-30%;width:56%;z-index:1;opacity:.16;pointer-events:none}
.end .art img{width:100%;height:auto;display:block}
.end .inner{position:relative;z-index:2;padding:56px 24px}
footer{max-width:1420px;margin:0 auto;padding:26px 44px 34px;font-size:14.5px;color:var(--ink-faint);
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
footer a{text-decoration:none}
footer .sp{margin-left:auto}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*{transition:none!important}
  .rv,.pl-glide,.pl-push{opacity:1!important;transform:none!important}
  .end .art.pl-tail{opacity:.16!important;transform:none!important}
  .floaty.in{animation:none!important}
  .live i{animation:none!important}
  .draw{stroke-dashoffset:0!important}.pop{opacity:1!important}
  .ring{stroke-dashoffset:57!important}.work .l{opacity:1}}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}

/* addendum: the small subject chips became real links to /subjects/<slug>, so they
   need the anchor reset the mockup's inert spans never required. The resting
   look is unchanged. */
a.schip{text-decoration:none;display:inline-block;
  transition:border-color .18s ease,color .18s ease}
a.schip:hover{border-color:var(--glow-soft);color:var(--ink)}