/* Leave marketing site — tokens */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/space-grotesk-var.woff2') format('woff2'); }
/* Metric-matched fallbacks so the swap from system fonts to the web fonts doesn't shift layout. */
@font-face { font-family: 'Space Grotesk Fallback'; src: local('Arial Bold'), local('Arial'), local('Helvetica'); size-adjust: 117%; ascent-override: 84%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: 'JetBrains Mono Fallback'; src: local('Menlo'), local('Courier New'); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/jetbrains-mono-var.woff2') format('woff2'); }
:root {
  --ink: #111111;
  --ink2: #1c1c1c;
  --paper: #f4f3ef;
  --card: #ffffff;
  --volt: #c8ff1f;
  --muted: #666;
  --body: #444;
  --sans: 'Space Grotesk', 'Space Grotesk Fallback', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(56px, 8vw, 110px);
}

* { box-sizing: border-box; }
/* Anchors and keyboard focus land below the sticky nav (76px tall on desktop, 72-90px on
   the other pages). The homepage nav (the one with .nav__cta) wraps taller at some widths:
   measured 90px at 760-999, 130-210px at 641-759, 108px at 355-640, 160px under 355. */
html { scroll-behavior: smooth; --sp: 96px; scroll-padding-top: var(--sp); }
@media (max-width: 999px) { html:has(.nav__cta) { --sp: 110px; } }
@media (max-width: 759px) { html:has(.nav__cta) { --sp: 230px; } }
@media (max-width: 640px) { html:has(.nav__cta) { --sp: 128px; } }
@media (max-width: 354px) { html:has(.nav__cta) { --sp: 180px; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: #5a5a5a; }
::selection { background: var(--volt); color: var(--ink); }
p { margin: 0; }

/* Keyboard focus: an ink ring inside a volt halo, so it reads on paper, white, and ink backgrounds alike. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--volt); border-radius: 4px; }
.skip { position: absolute; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--paper); border-radius: 999px; font: 500 14px var(--sans); transform: translateY(-200%); }
.skip:focus { transform: none; color: var(--paper); }
main:focus { outline: none; }
/* Visually hidden, still read by screen readers */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@keyframes wv { 0%, 100% { transform: scaleY(.15); } 50% { transform: scaleY(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.page { min-height: 100vh; background: var(--paper); overflow-x: clip; }
.wrap { max-width: 1100px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap--narrow { max-width: 1000px; }
/* Inner wrappers sit inside a padded section, so the padding lives outside the 1100px content width */
.section > .wrap { max-width: calc(1100px + 2 * var(--gutter)); }
.section > .wrap--narrow { max-width: calc(1000px + 2 * var(--gutter)); }

/* Wave mark (bars injected by app.js) */
.wave { display: inline-flex; align-items: center; flex: none; }
/* A few cycles (under 5s at the slowest 1.24s bar), then each bar rests at a different height.
   The fractional counts stop each bar partway up the rise, so the mark settles into a waveform
   instead of flat dots. Durations and delays are set inline by the page scripts. */
.wave > i { display: block; animation: wv ease-in-out 3.241 forwards; }
.wave > i:nth-child(7n+2) { animation-iteration-count: 3.354; }
.wave > i:nth-child(7n+3) { animation-iteration-count: 3.5; }
.wave > i:nth-child(7n+4) { animation-iteration-count: 3.293; }
.wave > i:nth-child(7n+5) { animation-iteration-count: 3.381; }
.wave > i:nth-child(7n+6) { animation-iteration-count: 3.259; }
.wave > i:nth-child(7n) { animation-iteration-count: 3.188; }
/* The three-bar logo rests in the wordmark's own shape (62% / 100% / 78%). */
.logo .wave > i:nth-child(1) { animation-iteration-count: 3.265; }
.logo .wave > i:nth-child(2) { animation-iteration-count: 3.5; }
.logo .wave > i:nth-child(3) { animation-iteration-count: 3.324; }

/* Type helpers */
.eyebrow { font: 400 11px var(--mono); letter-spacing: .14em; color: var(--muted); margin-bottom: 14px; }
.eyebrow--lime { color: var(--volt); }
.mono-label { font: 400 10px var(--mono); letter-spacing: .12em; color: var(--muted); }
.mono-label--ink { color: var(--ink); margin-bottom: 6px; }
.h2 { margin: 0; font: 700 clamp(40px, 5.5vw, 76px)/1 var(--sans); letter-spacing: -.05em; text-wrap: balance; }
.h2--mb { margin-bottom: clamp(28px, 4vw, 48px); }
.h2--narrow { max-width: 800px; margin-bottom: 10px; }
.h2--soft { font: 500 clamp(28px, 3.4vw, 42px)/1.15 var(--sans); letter-spacing: -.03em; }
.h2--huge { font: 700 clamp(44px, 8vw, 120px)/1.08 var(--sans); letter-spacing: -.06em; }
/* Volt highlight on a headline phrase; clone keeps the fill on every wrapped line.
   The heading isolates its stacking context and the mark sits at z-index -1, so the fill
   paints beneath descenders from the line above (the g in "agent", the y in "Say"). */
.hero__title, .h2--huge { position: relative; isolation: isolate; }
.hero__title mark, .h2--huge mark { position: relative; z-index: -1; background: var(--volt); color: inherit; padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.logo { display: inline-flex; align-items: center; gap: 6px; font: 700 24px/1 var(--sans); letter-spacing: -.04em; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo--tiny { font-size: 16px; gap: 5px; }
.logo--phone { font-size: 18px; gap: 5px; }
.logo--footer { font-size: 20px; gap: 5px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.btn--sm { font-size: 14px; padding: 12px 18px; min-height: 44px; }
.btn--md { font-size: 15px; padding: 14px 22px; min-height: 48px; margin-top: 24px; }
.btn--lg { font-size: 17px; padding: 16px 26px; min-height: 52px; }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: var(--volt); color: var(--ink); }
.btn--outline { border: 1.5px solid var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--lime { background: var(--volt); color: var(--ink); }
.btn--lime:hover { background: var(--paper); color: var(--ink); }
.btn--outline-light { border: 1.5px solid var(--paper); color: var(--paper); }
.btn--outline-light:hover { background: var(--paper); color: var(--ink); }
/* Buttons that are <button>s look like the link buttons */
:where(button.btn) { margin: 0; border: 0; background: transparent; font-family: inherit; cursor: pointer; }
@media (max-width: 360px) { .btn { white-space: normal; text-align: center; } }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.btn-row--left { justify-content: flex-start; gap: 10px; margin-top: 26px; }


/* Store badges (official artwork; the Google PNG carries its own padding, so it is set taller to match) */
.badges { align-items: center; }
.badge { display: inline-flex; align-items: center; }
.badge img { display: block; height: 48px; width: auto; }
.badge img[src$="google-play.png"] { height: 70px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--gutter); background: rgba(244,243,239,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav__links { display: flex; gap: 22px; font-size: 14px; font-weight: 500; flex-wrap: wrap; justify-content: center; }
.nav__cta { display: flex; gap: 10px; align-items: center; }
/* Phones: text links go; the three buttons take a row of their own under the logo and
   stretch to fill it, wrapping only on the narrowest screens. */
@media (max-width: 640px) {
  .nav__links { display: none; }
  .nav { flex-wrap: wrap; row-gap: 12px; padding-bottom: 12px; }
  .nav__cta { flex: 1 1 100%; gap: 8px; flex-wrap: wrap; }
  .nav__cta .btn--sm { flex: 1 1 auto; justify-content: center; padding: 12px 12px; font-size: 13px; }
}
.nav__cta { min-width: 0; flex-shrink: 0; }

/* Hero */
.hero { padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(40px, 6vw, 72px); max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(24px, 4vw, 40px); }
.hero .eyebrow { margin-bottom: 0; }
.hero__wave { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 160px; } /* matches the 160px wave so the bars rendering by JS never shifts the headline */
.hero__wave .wave { height: 160px; }
.hero__title { margin: 0; font: 700 clamp(46px, 8vw, 112px)/1.08 var(--sans); letter-spacing: -.05em; text-wrap: balance; max-width: 16ch; }
.hero__lede { max-width: 560px; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; color: var(--body); text-wrap: pretty; }

/* Chat mock */
.chat { width: 100%; max-width: 660px; background: var(--card); border: 1px solid rgba(0,0,0,.1); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.08); text-align: left; margin-top: 8px; }
.chat__bar { display: flex; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid rgba(0,0,0,.08); font: 400 11px var(--mono); letter-spacing: .1em; color: #666; }
.chat__status { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.chat__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--volt); border: 1px solid var(--ink); display: inline-block; }
.chat__body { padding: 18px; display: grid; gap: 12px; min-height: 520px; align-content: start; }
/* Every message holds its space from the start (invisible until its step), so the chat is full height
   before it plays and the page below never jumps. visibility also hides pending steps from screen readers. */
.chat__body [data-step] { visibility: hidden; opacity: 0; }
.chat__body [data-step].on { visibility: visible; opacity: 1; animation: rise .4s ease both; }
.chat__body .msg--stack { display: grid; }
.chat__input { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid rgba(0,0,0,.08); }
.chat__field { flex: 1; background: var(--paper); border-radius: 999px; padding: 12px 16px; font-size: 14px; color: #666; }
.chat__mic { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; }

.msg { max-width: 92%; border-radius: 18px 18px 18px 4px; padding: 12px 16px; font-size: 15px; line-height: 1.45; }
.msg--bot { background: var(--paper); }
.msg--me { justify-self: end; max-width: 88%; background: var(--ink); color: var(--paper); border-radius: 18px 18px 4px 18px; }
.msg--big { max-width: 85%; font-weight: 700; font-size: 20px; letter-spacing: -.03em; }
.msg--lime { background: var(--volt); color: var(--ink); padding: 14px 16px; }
.msg--stack { gap: 10px; }
.msg--stack .btn { justify-self: start; }
.msg__voice { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 400 10px var(--mono); letter-spacing: .1em; color: var(--volt); }
.msg__tag { font: 400 10px var(--mono); letter-spacing: .14em; margin-bottom: 6px; }
.msg__head { font-weight: 700; font-size: 20px; line-height: 1.12; letter-spacing: -.03em; }
.msg--lime p { margin: 8px 0 0; font-size: 14px; line-height: 1.45; }

.record { border: 1.5px solid var(--ink); border-radius: 14px; padding: 14px 16px; }
.record__head { display: flex; justify-content: space-between; font: 400 10px var(--mono); letter-spacing: .14em; color: var(--muted); margin-bottom: 10px; }
.record__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 14px; }
.record__grid > div { animation: rise-solid .35s ease both; }
@keyframes rise-solid { from { transform: translateY(6px); } to { transform: none; } }
.record__k { font: 400 10px var(--mono); letter-spacing: .1em; color: #666; }
.record__v { font-size: 15px; font-weight: 500; }
.tag-updated { font: 400 9px var(--mono); letter-spacing: .1em; background: var(--volt); color: var(--ink); padding: 2px 5px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }

.replay { justify-self: start; background: transparent; border: 1px solid rgba(0,0,0,.25); color: #555; font: 400 11px var(--mono); letter-spacing: .1em; padding: 10px 14px; border-radius: 999px; cursor: pointer; min-height: 44px; }
.replay:hover { border-color: var(--ink); color: var(--ink); }

/* Sections */
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--dark { background: var(--ink); color: var(--paper); }
.section--white { background: var(--card); }
.section--flush .wrap { padding-bottom: 0; }
.section__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(20px, 3vw, 40px); align-items: end; margin-bottom: clamp(24px, 4vw, 40px); }
.section__lede { font-size: 17px; line-height: 1.55; color: var(--body); max-width: 480px; text-wrap: pretty; }
.section__head + .calc, #math .section__head { margin-bottom: clamp(28px, 4vw, 48px); }
.section__lede--dark { color: rgba(244,243,239,.8); }
.section__lede--mb { margin-bottom: clamp(24px, 4vw, 40px); max-width: 560px; }
.h2 + .section__lede { margin-top: 18px; }

/* Calculator */
.calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(24px, 4vw, 56px); align-items: start; }
.calc__controls { display: grid; gap: 22px; }
.calc__row { display: grid; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid rgba(244,243,239,.15); }
.calc__row--last { border-bottom: 0; padding-bottom: 0; }
.calc__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc__label > span:first-child { font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.calc__val { font: 600 14px var(--mono); color: var(--volt); }
.calc__meta { font: 400 12px var(--mono); color: rgba(244,243,239,.6); text-align: right; }
.calc__scale { display: flex; justify-content: space-between; font: 400 10px var(--mono); color: rgba(244,243,239,.7); }
.calc__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; }
.calc__pair label { display: grid; gap: 4px; font: 400 10px var(--mono); letter-spacing: .1em; color: rgba(244,243,239,.5); }
.range { width: 100%; height: 36px; cursor: pointer; accent-color: var(--paper); margin: 0; }
.range--lime { height: 44px; accent-color: var(--volt); }
.leagues { display: flex; gap: 8px; flex-wrap: wrap; }
.league { background: transparent; color: var(--paper); border: 1px solid rgba(244,243,239,.3); border-radius: 999px; padding: 9px 14px; font: 500 13px var(--sans); cursor: pointer; min-height: 40px; }
.league.on { background: var(--paper); color: var(--ink); }

.calc__result { position: static; }
@media (min-height: 980px) { .calc__result { position: sticky; top: 90px; } }
.card-math { background: var(--paper); color: var(--ink); border-radius: 28px; padding: clamp(22px, 5%, 34px); display: grid; gap: 22px; }
.card-math__head { display: flex; justify-content: space-between; align-items: center; font: 400 11px var(--mono); letter-spacing: .12em; color: var(--muted); }
.card-math__intro { font-size: 15px; font-weight: 500; color: #555; line-height: 1.3; }
.card-math__big { font: 700 clamp(56px, 10vw, 104px)/1.05 var(--sans); letter-spacing: -.06em; margin-top: 6px; }
.card-math__sub { font-size: 14px; color: #555; margin-top: 2px; }
.pill-lime { background: var(--volt); padding: 1px 8px; border-radius: 999px; font-weight: 700; color: var(--ink); }
.bars { display: grid; gap: 9px; }
.bar { display: grid; gap: 4px; }
.bar__row { display: flex; justify-content: space-between; font-size: 13px; }
.bar__row span:first-child { font-weight: 500; }
.bar__row span:last-child { font: 400 12px var(--mono); color: #555; }
.bar__track { height: 10px; background: rgba(0,0,0,.08); border-radius: 999px; overflow: hidden; }
.bar__fill { height: 100%; background: var(--ink); border-radius: 999px; transition: width .25s ease; }
.card-math__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.card-math__say { font-weight: 700; font-size: 16px; letter-spacing: -.03em; }
.card-math__legal { font: 400 9px var(--mono); letter-spacing: .06em; text-align: right; line-height: 1.4; color: #666; }
.share-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font: 400 11px var(--mono); letter-spacing: .1em; color: rgba(244,243,239,.5); }
.share-btn { background: transparent; color: var(--paper); border: 1px solid rgba(244,243,239,.3); border-radius: 999px; padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; font: inherit; letter-spacing: inherit; cursor: pointer; }
.share-btn:hover { border-color: var(--volt); color: var(--volt); }

/* How it works */
.beats { display: grid; border-top: 1.5px solid var(--ink); margin: 0; padding: 0; list-style: none; }
ul.grid { margin: 0; padding: 0; list-style: none; }
/* Card titles are h3s; keep them looking like the old divs */
.beat__t, .thread__h, .lesson__q, .stage__t { margin: 0; }
.beat { display: grid; grid-template-columns: minmax(60px, 90px) minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(12px, 3vw, 40px); padding: clamp(20px, 3vw, 34px) 0; border-bottom: 1.5px solid var(--ink); align-items: start; }
.beat__n { font: 700 clamp(28px, 4vw, 48px)/1 var(--sans); letter-spacing: -.05em; }
.beat__t { font-weight: 700; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.05; letter-spacing: -.04em; }
.beat__m { font: 400 11px var(--mono); letter-spacing: .1em; color: var(--muted); margin-top: 8px; }
.beat__d { font-size: 16px; line-height: 1.55; color: var(--body); text-wrap: pretty; }
@media (max-width: 640px) { .beat { grid-template-columns: minmax(48px, 60px) minmax(0, 1fr); } .beat__d { grid-column: 2; } }

/* App + phone */
.app { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(28px, 5vw, 72px); align-items: center; }
.phone { justify-self: center; width: 100%; max-width: 340px; background: var(--ink); border-radius: 40px; padding: 12px; box-shadow: 0 30px 70px rgba(0,0,0,.18); }
.phone__screen { background: var(--paper); border-radius: 30px; padding: 22px 18px; display: grid; gap: 14px; min-height: 640px; align-content: start; }
.phone__top { display: flex; justify-content: space-between; align-items: center; }
.phone__mic { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; }
.phone__h { font-weight: 700; font-size: 26px; letter-spacing: -.04em; line-height: 1; }
.phone__sub { font-size: 13px; color: #555; margin-top: 4px; }
.phone__off { font-size: 12px; color: #666; margin-top: 4px; }
.phone__thread { background: var(--volt); border-radius: 16px; padding: 14px; }
.phone__thread-h { font-weight: 700; font-size: 17px; line-height: 1.15; letter-spacing: -.03em; }
.phone__cards { display: grid; gap: 14px; }
.pcard { background: var(--card); border: 1px solid rgba(0,0,0,.1); border-radius: 16px; padding: 14px; display: grid; gap: 8px; }
.pcard__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pcard__brand { font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.pcard__type { font: 400 9px var(--mono); letter-spacing: .1em; color: var(--muted); }
.pcard__chips { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.pcard__chips span { background: var(--paper); border-radius: 999px; padding: 4px 9px; }
.pcard__next { font-size: 12px; color: #555; }
.phone__upload { border: 1.5px dashed rgba(0,0,0,.25); border-radius: 16px; padding: 14px; text-align: center; font-size: 13px; color: var(--muted); }

/* Grids */
.grid { display: grid; gap: 14px; }
.grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--280 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--240 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }

/* Pricing */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; align-items: stretch; }
.plan { background: var(--ink); color: var(--paper); border-radius: 24px; padding: clamp(24px, 4vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.plan__head { display: flex; justify-content: space-between; align-items: center; font: 400 11px var(--mono); letter-spacing: .14em; color: rgba(244,243,239,.6); }
.plan__badge { background: var(--volt); color: var(--ink); padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.plan__price { display: flex; align-items: baseline; gap: 8px; }
.plan__amount { font: 700 clamp(64px, 9vw, 104px)/1 var(--sans); letter-spacing: -.06em; }
.plan__per { font-size: 18px; color: rgba(244,243,239,.7); }
.plan__items { display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.plan__item { display: flex; gap: 10px; align-items: flex-start; }
.plan__check { width: 18px; height: 18px; border-radius: 50%; background: var(--volt); flex: none; margin-top: 2px; display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 11px; font-weight: 700; }
.plan .btn { justify-content: center; margin-top: auto; }
.plan__fine { font: 400 10px var(--mono); letter-spacing: .08em; color: rgba(244,243,239,.5); text-align: center; line-height: 1.5; }
.plan__fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.plan__fine a:hover { color: var(--volt); }
.plan__fine + .plan__fine { margin-top: -6px; }
.pricing__side { display: grid; gap: 14px; align-content: start; }
.pbox { background: var(--card); border-radius: 24px; padding: clamp(22px, 3vw, 28px); display: grid; gap: 14px; }
.pbox--tight { gap: 8px; }
.pbox__label { font: 400 11px var(--mono); letter-spacing: .14em; color: var(--muted); }
.step { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.step__n { font: 700 22px/1 var(--sans); letter-spacing: -.04em; color: var(--ink); }
.step__t { font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.step__d { font-size: 14px; line-height: 1.5; color: #555; text-wrap: pretty; }
.vs { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; }
.vs--line { border-bottom: 1px solid rgba(0,0,0,.08); }
.vs__k { font-size: 14px; color: #555; }
.vs__v { font-weight: 700; font-size: 22px; letter-spacing: -.03em; }
.vs__v--volt { background: var(--volt); padding: 0 8px; border-radius: 999px; }
.pbox__note { font-size: 12px; color: #666; line-height: 1.5; }

/* The Web */
.thread { background: var(--card); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 12px; min-height: 250px; transition: background .15s, color .15s; }
.thread:hover { background: var(--ink); color: var(--paper); }
.thread__meta { display: flex; justify-content: space-between; align-items: center; font: 400 10px var(--mono); letter-spacing: .12em; opacity: .6; }
.thread__h { font-weight: 700; font-size: 24px; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.thread__p { font-size: 14px; line-height: 1.5; opacity: .8; text-wrap: pretty; }
.thread__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }

/* Lessons */
.lesson { border: 1.5px solid var(--ink); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; transition: background .15s; }
.lesson:hover { background: var(--volt); }
.lesson__meta { display: flex; justify-content: space-between; font: 400 10px var(--mono); letter-spacing: .12em; color: var(--muted); }
.lesson__q { font-weight: 700; font-size: 22px; line-height: 1.1; letter-spacing: -.04em; }
.lesson__a { font-size: 14px; line-height: 1.5; color: #333; text-wrap: pretty; }

/* Career stages (horizontal scroll) */
/* The scroller is focusable so the keyboard can scroll it; a thin paper scrollbar shows it moves. */
.stages { --pad: max(var(--gutter), calc((100% - 1100px) / 2 + 16px)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); padding: 0 0 12px; scrollbar-width: thin; scrollbar-color: rgba(244,243,239,.45) transparent; }
.stages::-webkit-scrollbar { height: 6px; }
.stages::-webkit-scrollbar-track { background: transparent; }
.stages::-webkit-scrollbar-thumb { background: rgba(244,243,239,.45); border-radius: 999px; }
.stages:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; box-shadow: none; border-radius: 12px; }
.stages__list { display: flex; gap: 12px; width: max-content; margin: 0; padding: 0 var(--pad); list-style: none; }
.stage { flex: 0 0 auto; width: min(80vw, 290px); scroll-snap-align: start; background: var(--ink2); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 10px; min-height: 260px; }
.stage__age { font: 400 11px var(--mono); letter-spacing: .12em; color: var(--volt); }
.stage__t { font-weight: 700; font-size: 26px; line-height: 1.05; letter-spacing: -.04em; }
.stage__d { font-size: 14px; line-height: 1.5; color: rgba(244,243,239,.8); text-wrap: pretty; }
.stage__off { font-size: 13px; line-height: 1.5; color: rgba(244,243,239,.6); font-style: italic; text-wrap: pretty; }
.stage__leave { margin-top: auto; font-size: 13px; font-weight: 500; color: var(--volt); }

/* Families */
.families { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(28px, 4vw, 56px); }
.families .section__lede { max-width: none; line-height: 1.6; }
.family { display: grid; gap: 10px; align-content: start; }
.family__item { background: var(--card); border-radius: 16px; padding: 18px 20px; }
.family__t { font-weight: 700; font-size: 16px; margin: 0 0 4px; }
.family__d { font-size: 14px; line-height: 1.5; color: var(--body); text-wrap: pretty; }

.callout { margin-top: 22px; padding: 18px 20px; background: var(--ink); color: var(--paper); border-radius: 16px; display: grid; gap: 8px; }
.callout__label { font: 400 10px var(--mono); letter-spacing: .14em; color: var(--volt); }
.callout p { font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.btn--after-callout { margin-top: 18px; }

/* Proof */
.quote { background: var(--paper); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-height: 260px; }
.quote__photo { aspect-ratio: 4 / 3; border-radius: 12px; background: repeating-linear-gradient(135deg, #e6e4de 0 10px, #ecebe6 10px 20px); display: flex; align-items: flex-end; padding: 10px; font: 400 10px var(--mono); color: #555; letter-spacing: .06em; }
.quote__text { font-size: 17px; line-height: 1.45; text-wrap: pretty; }
.quote__foot { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.quote__name { font-weight: 700; }
.quote__meta { font: 400 11px var(--mono); color: #666; }
.proof__foot { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; font: 400 11px var(--mono); letter-spacing: .1em; color: #666; }
.proof__handle { margin-left: auto; }

/* CTA */
.cta { padding: clamp(72px, 10vw, 150px) var(--gutter); text-align: center; }
.cta__inner { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vw, 32px); }
.cta__wave { display: flex; align-items: center; justify-content: center; min-height: clamp(70px, 12vw, 140px); }
.cta__title { margin: 0; font: 700 clamp(58px, 12vw, 170px)/0.92 var(--sans); letter-spacing: -.06em; }
.cta__lede { font-size: 18px; line-height: 1.55; max-width: 460px; color: rgba(244,243,239,.8); text-wrap: pretty; }
.cta__note { font: 400 10px var(--mono); letter-spacing: .08em; color: #9a9a9a; }
.cta__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* were ink on ink */
.cta__note a:hover { color: var(--volt); }

/* Footer */
.footer { padding: 28px var(--gutter); display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); }
.footer__links { display: flex; gap: 20px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.footer__legal { font: 400 10px var(--mono); letter-spacing: .08em; max-width: 520px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wave > i { animation: none; transform: scaleY(.6); }
  .chat__body [data-step].on, .record__grid > div { animation: none; }
}

@media (max-width: 480px) {
  .hero__wave .wave > i:nth-child(n+18) { display: none; } /* 17 bars fit inside the 16px gutters */
}

/* ===== Press kit page ===== */
.press-section { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); }
.h2--press { font: 700 clamp(34px, 4.5vw, 60px)/1 var(--sans); letter-spacing: -.05em; }
.press-hero { padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(32px, 5vw, 56px); max-width: 1100px; margin: 0 auto; display: grid; gap: 22px; }
.press-hero .eyebrow { margin-bottom: 0; }
.press-hero__title { margin: 0; font: 700 clamp(44px, 8vw, 104px)/0.98 var(--sans); letter-spacing: -.05em; text-wrap: balance; max-width: 18ch; }
.press-hero__lede { max-width: 640px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--body); text-wrap: pretty; }

.story { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 4vw, 56px); }
.story__body { display: grid; gap: 16px; font-size: 16px; line-height: 1.6; color: rgba(244,243,239,.85); text-wrap: pretty; }

.grid--220 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.grid--260 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.fact { background: var(--card); border-radius: 20px; padding: 20px; display: grid; gap: 6px; min-height: 150px; align-content: start; }
.fact__v { font: 700 clamp(28px, 3vw, 40px)/1 var(--sans); letter-spacing: -.05em; text-wrap: balance; }
.fact__d { font-size: 14px; line-height: 1.45; color: var(--body); text-wrap: pretty; }

h2.eyebrow { margin: 0 0 14px; }
.boiler { margin-top: 28px; background: var(--card); border-radius: 20px; padding: 22px; display: grid; gap: 12px; }
.boiler__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.boiler__head .btn { border: 0; cursor: pointer; font-family: inherit; }
.boiler__text { font-size: 16px; line-height: 1.6; color: #333; text-wrap: pretty; }
.boiler__rules { border-top: 1px solid rgba(0,0,0,.08); padding-top: 12px; display: grid; gap: 6px; font-size: 14px; color: var(--body); }
.boiler__rules strong { color: var(--ink); }

.assets { display: grid; gap: clamp(24px, 4vw, 40px); }
.logo-tile { display: grid; gap: 8px; }
.logo-tile__art { aspect-ratio: 4 / 3; border: 1px solid rgba(0,0,0,.08); border-radius: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 clamp(36px, 4vw, 52px)/1 var(--sans); letter-spacing: -.05em; }
.logo-tile__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.logo-tile__dl { display: inline-flex; gap: 12px; }
.dl { font: 400 11px var(--mono); letter-spacing: .1em; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.abox { background: var(--paper); border-radius: 20px; padding: 20px; display: grid; gap: 10px; align-content: start; }
.abox__note { font-size: 14px; color: var(--body); line-height: 1.5; }
.swatch-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; border-top: 1px solid rgba(0,0,0,.07); padding-top: 10px; margin-top: 10px; }
.swatch-row__chip { width: 44px; height: 36px; border-radius: 10px; border: 1px solid rgba(0,0,0,.1); }
.swatch-row__name { font-weight: 600; font-size: 15px; }
.swatch-row__hex { font: 400 12px var(--mono); color: var(--body); }
.type__sans { font: 700 44px/1 var(--sans); letter-spacing: -.05em; }
.type__mono { font: 400 20px var(--mono); letter-spacing: .06em; border-top: 1px solid rgba(0,0,0,.07); padding-top: 10px; }
.media-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid rgba(0,0,0,.07); min-height: 48px; color: var(--ink); }
.media-row__text { display: grid; gap: 1px; }
.media-row__t { font-weight: 600; font-size: 15px; }
.media-row__d { font-size: 13px; color: var(--body); }
.screen { display: grid; gap: 8px; }
.screen__ph { aspect-ratio: 9 / 16; max-height: 420px; border-radius: 24px; background: repeating-linear-gradient(135deg, #e6e4de 0 10px, #ecebe6 10px 20px); border: 1px solid rgba(0,0,0,.08); display: flex; align-items: flex-end; padding: 14px; font: 400 11px var(--mono); color: #555; letter-spacing: .06em; line-height: 1.5; }
.screen__t { font-size: 14px; font-weight: 600; }

.quotes { display: grid; gap: clamp(24px, 4vw, 40px); }
.pquote { background: var(--card); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-height: 220px; }
.pquote__text { font: 500 20px/1.35 var(--sans); letter-spacing: -.02em; text-wrap: pretty; }
.pquote__foot { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.pquote__who { font-weight: 700; }
.pquote__role { font: 400 11px var(--mono); color: var(--muted); }
.leader { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; background: var(--card); border-radius: 20px; padding: 16px; }
.leader__photo { width: 88px; height: 88px; border-radius: 20px; background: repeating-linear-gradient(135deg, #e6e4de 0 8px, #ecebe6 8px 16px); display: flex; align-items: center; justify-content: center; font: 400 9px var(--mono); color: var(--muted); text-align: center; }
.leader__body { display: grid; gap: 3px; }
.leader__name { font-weight: 700; font-size: 16px; }
.leader__role { font-size: 13px; color: var(--body); }
.leader .dl { min-height: 32px; }
.theline { background: var(--volt); color: var(--ink); border-radius: 20px; padding: 22px; display: grid; gap: 8px; }
.theline .mono-label { margin-bottom: 0; }
.theline__text { font: 700 clamp(28px, 4vw, 48px)/1 var(--sans); letter-spacing: -.05em; }

.contact { padding: clamp(56px, 8vw, 110px) 0; }
.contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 4vw, 56px); align-items: end; }
.contact__wave { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.contact__title { margin: 0; font: 700 clamp(40px, 7vw, 96px)/0.95 var(--sans); letter-spacing: -.06em; }
.contact__body { display: grid; gap: 14px; font-size: 16px; line-height: 1.55; }
.contact__block { display: grid; gap: 4px; }
.contact__block--line { border-top: 1px solid rgba(244,243,239,.15); padding-top: 14px; }
.mono-label--volt { color: var(--volt); }
.contact__mail { color: var(--paper); font-weight: 600; font-size: 22px; letter-spacing: -.02em; }
.contact__mail:hover { color: var(--volt); }
.contact__note { color: rgba(244,243,239,.7); }
.contact__social { display: flex; gap: 16px; flex-wrap: wrap; font-weight: 500; }
.contact__social a { color: var(--paper); }
.contact__social a:hover { color: var(--volt); }
.contact__legal { font: 400 10px var(--mono); letter-spacing: .08em; color: rgba(244,243,239,.5); line-height: 1.6; border-top: 1px solid rgba(244,243,239,.15); padding-top: 14px; }

/* ===== Legal pages (privacy, terms) ===== */
.legal-hero { padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(28px, 4vw, 48px); max-width: 1100px; margin: 0 auto; display: grid; gap: 18px; }
.legal-hero .eyebrow { margin-bottom: 0; }
.legal-hero__title { margin: 0; font: 700 clamp(40px, 7vw, 88px)/0.98 var(--sans); letter-spacing: -.05em; text-wrap: balance; max-width: 14ch; }
.legal-hero__lede { max-width: 640px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--body); text-wrap: pretty; }
.legal-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font: 400 11px var(--mono); letter-spacing: .12em; color: var(--muted); }
.legal { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 8vw, 110px); display: grid; grid-template-columns: 220px minmax(0, 720px); gap: clamp(28px, 5vw, 72px); align-items: start; }
.legal__toc { position: sticky; top: 92px; display: grid; gap: 8px; font-size: 14px; line-height: 1.35; }
.legal__toc .mono-label { margin-bottom: 4px; }
.legal__toc a { color: var(--body); }
.legal__toc a:hover { color: var(--ink); }
.legal__body { display: grid; gap: clamp(28px, 4vw, 40px); font-size: 16px; line-height: 1.6; color: #333; text-wrap: pretty; }
.legal__body h2 { margin: 0 0 12px; font: 700 clamp(22px, 2.6vw, 30px)/1.15 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.legal__body h3 { margin: 18px 0 6px; font: 700 17px/1.3 var(--sans); color: var(--ink); }
.legal__body p + p, .legal__body ul + p, .legal__body .defs + p { margin-top: 10px; }
.legal__body ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.legal__body a { text-decoration: underline; text-underline-offset: 3px; }
.legal__body strong { color: var(--ink); }
.summary { background: var(--card); border-radius: 20px; padding: 22px; display: grid; gap: 10px; }
.summary ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 15px; }
.summary .mono-label { margin-bottom: 2px; }
.callout-volt { background: var(--volt); color: var(--ink); border-radius: 14px; padding: 14px 16px; font-size: 15px; line-height: 1.5; }
.defs { display: grid; gap: 10px; margin-top: 10px; }
.defs > div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; border-top: 1px solid rgba(0,0,0,.08); padding-top: 10px; font-size: 15px; }
.defs b { color: var(--ink); }
@media (max-width: 820px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal__toc { position: static; }
  .defs > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Waitlist ---------- */
/* Jumping to #waitlist shows the form above the fold: the same total offset as before,
   less the page-wide scroll-padding (--sp) that now clears the sticky nav. */
.plan__waitlist { margin-top: auto; scroll-margin-top: max(0px, calc(clamp(96px, calc(100svh - 300px), 520px) - var(--sp))); }
.waitlist { width: 100%; display: grid; gap: 10px; text-align: left; }
.waitlist__label { font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(244,243,239,.6); }
.waitlist__row { display: flex; gap: 10px; flex-wrap: wrap; }
.waitlist__input { flex: 1 1 220px; min-width: 0; min-height: 52px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(244,243,239,.5); background: transparent; color: var(--paper); font: 400 17px var(--sans); }
.waitlist__input::placeholder { color: rgba(244,243,239,.6); }
.waitlist__input:focus { border-color: var(--volt); }
.waitlist__btn { flex: 0 0 auto; justify-content: center; cursor: pointer; border: 0; font-family: var(--sans); }
.waitlist__btn:disabled { opacity: .6; cursor: progress; }
.waitlist__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.waitlist__msg { min-height: 1.4em; font-size: 14px; line-height: 1.4; color: rgba(244,243,239,.75); }
.waitlist[data-state="ok"] .waitlist__msg { color: var(--volt); }
.waitlist[data-state="error"] .waitlist__msg { color: #ff8a7a; }
.waitlist--done .waitlist__row, .waitlist--done .waitlist__ts { display: none; }
.waitlist__ts:empty { display: none; }
.cta .waitlist { max-width: 560px; }
.soon-note { margin-top: 14px; font: 400 11px var(--mono); letter-spacing: .12em; color: var(--muted); }
.soon-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 480px) { .waitlist__btn { flex-basis: 100%; } }

/* ---------- Manifesto (/manifesto) ---------- */
.mf-hero { padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(28px, 4vw, 48px); max-width: 1100px; margin: 0 auto; display: grid; gap: 20px; }
.mf-hero .eyebrow { margin-bottom: 0; }
.mf-hero__title { margin: 0; font: 700 clamp(52px, 10vw, 150px)/0.92 var(--sans); letter-spacing: -.06em; text-wrap: balance; max-width: 9ch; }
.mf-hero__lede { max-width: 620px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; color: var(--body); text-wrap: pretty; }
.mf { max-width: 1100px; margin: 0 auto; padding: clamp(16px, 3vw, 32px) var(--gutter) clamp(56px, 8vw, 110px); display: grid; grid-template-columns: 220px minmax(0, 680px); gap: clamp(28px, 5vw, 72px); align-items: start; }
.mf__side { position: sticky; top: 92px; display: grid; gap: 12px; }
.mf__stat { background: var(--card); border-radius: 20px; padding: 18px; display: grid; gap: 8px; }
.mf__stat--volt { background: var(--volt); }
.mf__stat-n { font: 700 clamp(40px, 4.5vw, 56px)/1 var(--sans); letter-spacing: -.05em; }
.mf__stat-n span { font-size: .5em; letter-spacing: -.02em; margin-left: 2px; }
.mf__stat-l { font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.mf__stat--volt .mf__stat-l { color: var(--ink); }
.mf__body { display: grid; gap: 18px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: #222; text-wrap: pretty; }
.mf__body h2 { margin: 24px 0 0; font: 700 clamp(30px, 3.6vw, 48px)/1.02 var(--sans); letter-spacing: -.045em; color: var(--ink); }
.mf__pull { font: 700 clamp(26px, 3.2vw, 42px)/1.08 var(--sans); letter-spacing: -.04em; color: var(--ink); padding: 8px 0 8px 22px; border-left: 6px solid var(--volt); margin: 8px 0; }
.mf__steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.mf__steps li { display: flex; gap: 16px; align-items: flex-start; background: var(--card); border-radius: 18px; padding: 18px 20px; }
.mf__steps strong { color: var(--ink); }
.mf__steps a { text-decoration: underline; text-underline-offset: 3px; }
.mf__step-n { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; background: var(--ink); color: var(--volt); font: 700 15px/34px var(--sans); text-align: center; }
.mf__sign { font: 700 clamp(30px, 4vw, 56px)/1 var(--sans); letter-spacing: -.05em; margin-top: 8px; }
.mf__sources { display: grid; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,.1); font-size: 13px; line-height: 1.45; color: var(--muted); }
.mf__sources a { color: var(--body); text-decoration: underline; text-underline-offset: 3px; }
.mf__sources a:hover { color: var(--ink); }
@media (max-width: 900px) {
  .mf { grid-template-columns: 1fr; }
  .mf__side { position: static; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ===== Manifesto share bar ===== */
.share { display: grid; gap: 14px; margin-top: 8px; padding: 22px; background: var(--card); border-radius: 22px; }
.share__grid, .share__dl { display: flex; flex-wrap: wrap; gap: 8px; }
.share__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 500 14px var(--sans); cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
.share__btn:hover { background: var(--volt); }
.share__btn--dark { background: var(--ink); color: var(--paper); }
.share__btn--dark:hover { background: var(--volt); color: var(--ink); }
.share__dim { font: 400 11px var(--mono); letter-spacing: .08em; color: var(--muted); }
.share__btn--dark .share__dim { color: rgba(244,243,239,.7); }
.share__cards { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.08); }
.share__note { font-size: 14px; line-height: 1.5; color: var(--body); }
.share__msg { font: 400 11px var(--mono); letter-spacing: .08em; color: var(--muted); min-height: 1em; }
.share__manual { width: 100%; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font: 400 16px/1.45 var(--sans); resize: vertical; -webkit-user-select: text; user-select: text; }
.share__manual[hidden] { display: none; }

/* Security page: status labels and the who-can-see table */
.st { display: inline-block; vertical-align: 2px; font: 700 10px/1 var(--mono); letter-spacing: .1em; padding: 4px 7px; border-radius: 999px; white-space: nowrap; }
.st--live { background: var(--volt); color: var(--ink); }
.st--test { border: 1.5px solid var(--ink); color: var(--ink); padding: 2.5px 5.5px; }
.st--pre { background: var(--ink); color: var(--paper); }
.st--later { background: rgba(0,0,0,.08); color: #555; }
.legal__body h2 .st { vertical-align: 6px; margin-left: 6px; }
.st-legend { display: grid; gap: 8px; font-size: 15px; }
.st-legend > div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; }
.st-legend .st { justify-self: start; }
.legal__body { grid-template-columns: minmax(0, 1fr); }
.who-wrap { overflow-x: auto; margin-top: 10px; }
.who caption { text-align: left; }
.who { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.who th, .who td { text-align: left; padding: 9px 10px; border-top: 1px solid rgba(0,0,0,.08); vertical-align: top; }
.who thead th { font: 400 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-top: 0; }
.who tbody th { color: var(--ink); font-weight: 700; }
.who .y { color: var(--ink); }
.who .n { color: #666; }
.who .m { color: var(--ink); font-style: italic; }
@media (max-width: 560px) { .st-legend > div { grid-template-columns: 1fr; gap: 2px; } }

/* Career math: share panel under the card (dark section) */
.mshare { display: grid; gap: 12px; margin-top: 12px; padding: 18px; border: 1px solid rgba(244,243,239,.16); border-radius: 22px; }
.mshare__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 11px var(--mono); letter-spacing: .1em; color: rgba(244,243,239,.6); }
.mshare__caption { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(244,243,239,.06); font-size: 14px; line-height: 1.5; color: var(--paper); }
.mshare__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.mshare__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(244,243,239,.3); background: transparent; color: var(--paper); font: 500 14px var(--sans); cursor: pointer; }
.mshare__btn:hover { border-color: var(--volt); color: var(--volt); }
.mshare__btn--lime { background: var(--volt); border-color: var(--volt); color: var(--ink); }
.mshare__btn--lime:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.mshare__note { font-size: 13px; line-height: 1.45; color: rgba(244,243,239,.6); }
.mshare__msg { font: 400 11px var(--mono); letter-spacing: .08em; color: var(--volt); min-height: 1em; }
.mshare .share__manual { margin-top: 0; }
.mshare [hidden] { display: none; }


.mshare__preview { margin: 0; display: grid; gap: 8px; }
.mshare__preview[hidden] { display: none; }
.mshare__preview img { width: min(100%, 320px); height: auto; aspect-ratio: 9 / 16; border-radius: 14px; display: block; background: rgba(244,243,239,.06); -webkit-touch-callout: default; }
.mshare__preview figcaption { font-size: 13px; line-height: 1.45; color: rgba(244,243,239,.75); }

.share__btn--volt { background: var(--volt); border-color: var(--volt); color: var(--ink); }
.share__btn--volt:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* Manifesto: both cards always shown, so anyone can press and hold (right-click) to save */
.share__cardset { display: grid; grid-template-columns: 9fr 16fr; gap: 12px; align-items: start; max-width: 520px; }
.share__card { margin: 0; display: grid; gap: 6px; }
.share__card img { width: 100%; height: auto; border-radius: 12px; display: block; -webkit-touch-callout: default; }
.share__card figcaption { font: 400 11px var(--mono); letter-spacing: .1em; color: var(--muted); }
.share__save { font-size: 13px; line-height: 1.45; color: var(--body); }