/* ═══════════════ SYSTEM ═══════════════
   One idea carries the identity: THE BASELINE.
   A rule the business was already on; everything above it is the work.
   It appears as the hero's floor, the axis under every figure, the section
   divider, the shaded band that is never ours, and the mark itself.        */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
:root{
  --field:#1a21ff;   --field-ink:#eef0ff;
  --dark:#0b0e16;       --deep:#04060c;   --indigo:#0f1338;
  --bone:#ece8e0;    --bone-ink:#14161c;
  --ink:#f4f6fa;     --ink-2:rgba(244,246,250,.66);  --ink-3:rgba(244,246,250,.44);
  --hot:#8f96ff;
  --line:rgba(244,246,250,.18);
  --line-strong:rgba(244,246,250,.34);
  --glass:rgba(255,255,255,.06);
  --glass-edge:rgba(255,255,255,.14);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,1,.36,1);
  --micro:cubic-bezier(.4,0,.2,1);
  --gut:clamp(22px,4vw,40px);
}
body{background:var(--dark);color:var(--ink);font-family:"Inter Tight",system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{max-width:1140px;margin:0 auto;padding:0 var(--gut);width:100%}
.tnum{font-variant-numeric:tabular-nums slashed-zero}
section{padding:clamp(80px,9vw,112px) 0;position:relative;isolation:isolate}
.bloom{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.bloom::before,.bloom::after{content:"";position:absolute;border-radius:50%;filter:blur(90px)}
.bloom::before{width:min(58vw,680px);aspect-ratio:1;left:-12%;top:-18%;
  background:radial-gradient(circle, rgba(26,33,255,.55), rgba(26,33,255,0) 68%)}
.bloom::after{width:min(46vw,520px);aspect-ratio:1;right:-8%;bottom:-22%;
  background:radial-gradient(circle, rgba(143,150,255,.30), rgba(143,150,255,0) 68%)}
/* a second, different light — violet, low and to one side */
.bloom.violet::before{left:auto;right:-16%;top:auto;bottom:-30%;width:min(62vw,720px);
  background:radial-gradient(circle, rgba(96,52,220,.50), rgba(96,52,220,0) 70%)}
.bloom.violet::after{left:-10%;top:-16%;right:auto;bottom:auto;width:min(38vw,420px);
  background:radial-gradient(circle, rgba(26,33,255,.28), rgba(26,33,255,0) 70%)}
a{color:inherit}
:focus-visible{outline:2px solid var(--hot);outline-offset:3px}

/* ── type scale ── */
h1{font-size:clamp(42px,8.6vw,72px);font-weight:800;line-height:1;letter-spacing:-.025em;margin:0;
  max-width:15ch;text-wrap:balance;color:#fff}
h2{font-size:clamp(32px,5.8vw,60px);font-weight:800;line-height:1.06;letter-spacing:-.025em;margin:0;
  max-width:19ch;text-wrap:balance}
h3{font-size:19px;font-weight:700;letter-spacing:-.015em;margin:0}
/* their mid-tier head: 36px at 1.15, weight 700 — used for in-page sub-heads */
.h-mid{font-size:clamp(26px,4.2vw,36px);font-weight:700;line-height:1.15;letter-spacing:-.022em;margin:0}
p{margin:0}
.lede{font-size:clamp(16.5px,1.7vw,19.5px);font-weight:500;line-height:1.46;max-width:54ch;color:var(--ink-2)}
.lede + .lede{margin-top:18px}
.eyebrow{font-family:"Geist Mono",monospace;font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--hot);display:flex;align-items:center;gap:12px;margin-bottom:26px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:180px}

/* ── the mark: a wordmark sitting on its baseline ── */
.mark{font-family:"Newsreader",serif;font-weight:500;font-size:19px;letter-spacing:.01em;color:#fff;
  white-space:nowrap;padding-bottom:3px;border-bottom:1.5px solid currentColor}

/* ── glass navigator ── */
.nav-pill{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:70;
  display:flex;align-items:center;gap:24px;padding:10px 10px 10px 22px;border-radius:9999px;
  background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.22);
  backdrop-filter:blur(60px) saturate(1.8);-webkit-backdrop-filter:blur(60px) saturate(1.8);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3), 0 10px 34px rgba(0,0,0,.34)}
.nav-pill .mark{font-size:16.5px;border-bottom-width:1px}

/* the indicator slides between items and settles with a little overshoot —
   Tiny's bar does this, and it is most of why theirs feels alive */
.nav-ind{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:9999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
  transform:translateX(0);opacity:0;pointer-events:none;
  transition:transform .52s var(--spring),width .52s var(--spring),opacity .3s var(--micro)}
.nav-ind.on{opacity:1}
.nav-pill.on-light .nav-ind{background:rgba(20,22,28,.10);border-color:rgba(20,22,28,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.nav-pill a.lnk{position:relative;z-index:1;padding:7px 13px;border-radius:9999px}
.nav-pill a.lnk[aria-current="page"]{color:#fff}
.nav-pill.on-light a.lnk[aria-current="page"]{color:var(--bone-ink)}
@media (prefers-reduced-motion:reduce){.nav-ind{transition:opacity .2s}}
.nav-pill a.lnk{font-size:12px;font-weight:600;color:rgba(255,255,255,.7);text-decoration:none;
  transition:color .15s var(--micro);white-space:nowrap}
.nav-pill a.lnk:hover{color:#fff}
.pill-cta{background:#fff;color:#0b0e16;padding:10px 17px;border-radius:9999px;font-size:12px;font-weight:700;
  text-decoration:none;white-space:nowrap;transition:transform .25s var(--spring),box-shadow .25s}
.pill-cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.32)}
.nav-mobile{display:none}
@media (max-width:900px){
  .nav-pill{display:none}
  .nav-mobile{display:block}
  .glass-btn{position:fixed;top:18px;z-index:70;height:44px;display:flex;align-items:center;justify-content:center;
    border-radius:9999px;background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.22);
    backdrop-filter:blur(40px) saturate(1.6);-webkit-backdrop-filter:blur(40px) saturate(1.6);
    color:#fff;text-decoration:none;padding:0 17px}
  .glass-btn.left{left:16px;height:46px;padding:0 20px;font-family:"Newsreader",serif;font-size:16px}
  .glass-btn.left .mark-hv{border-bottom:0;padding:0;line-height:1;display:block;font-size:19px}
  .glass-btn.right{right:16px;padding:0 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
}

/* section 07 runs two-up on desktop: the argument left, the artefact right */
.start-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(30px,4.5vw,60px);align-items:start}
@media (max-width:940px){.start-split{grid-template-columns:1fr}}
.start-split .plan{margin-top:0;max-width:none}
.start-split .lede{max-width:46ch}

/* the navigator inverts over light sections — glass has to know its ground */
.nav-pill,.glass-btn{transition:background .35s var(--micro),border-color .35s var(--micro),
  color .35s var(--micro),box-shadow .35s var(--micro)}
.nav-pill.on-light,.glass-btn.on-light{
  background:rgba(20,22,28,.10);border-color:rgba(20,22,28,.20);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5), 0 10px 30px rgba(20,22,28,.14)}
.nav-pill.on-light .mark,.glass-btn.on-light{color:var(--bone-ink)}
.nav-pill.on-light a.lnk{color:rgba(20,22,28,.66)}
.nav-pill.on-light a.lnk:hover{color:var(--bone-ink)}
.nav-pill.on-light .pill-cta{background:var(--bone-ink);color:var(--bone)}

/* ── buttons ── */
.cta{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#0b0e16;text-decoration:none;
  border:0;appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:17px 28px;border-radius:9999px;
  transition:transform .25s var(--spring),box-shadow .25s}
.cta:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.34)}
.cta svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.cta.on-field{background:var(--dark);color:#fff}

/* ═══════════════ HERO ═══════════════
   The identity is structural here, not decorative: the baseline runs across the
   hero itself, the headline sits above it, the band beneath it is the revenue
   that was never ours, and the curve climbs off it. It is the business model,
   drawn — and it is in the first screen, not below it. */
.hero{background:var(--field);color:var(--field-ink);position:relative;overflow:hidden;
  padding-top:clamp(92px,10.5vw,124px);
  padding-bottom:clamp(112px,13.5vw,158px)}
.hero .lede{color:rgba(238,240,255,.9);max-width:44ch;margin-top:22px}
.hero-body{position:relative;z-index:2}

.hero-baseline{position:absolute;left:0;right:0;bottom:0;
  height:clamp(100px,12.5vw,150px);z-index:1;pointer-events:none}
.hero-baseline .band{position:absolute;left:0;right:0;bottom:0;height:54%;
  background:rgba(255,255,255,.085);opacity:0;transition:opacity .7s var(--ease) .85s}
.hero-baseline .rule{position:absolute;left:0;right:0;bottom:54%;height:1.5px;
  background:rgba(255,255,255,.62);transform:scaleX(0);transform-origin:left center;
  transition:transform 1.15s var(--ease) .3s}
.hero-baseline .climb{position:absolute;right:0;bottom:54%;
  width:min(62%,600px);height:clamp(64px,9vw,118px)}
/* the filled area IS the thing we're paid on — the model, shaded */
.hero-baseline .climb .growth{fill:rgba(255,255,255,.13);opacity:0;
  transition:opacity .9s var(--ease) .75s}
.hero-baseline.lit .climb .growth{opacity:1}
.hero-baseline .climb .cap{fill:#fff;opacity:0;transition:opacity .5s var(--ease) 1.5s}
.hero-baseline.lit .climb .cap{opacity:1}
/* ticks along the line, so it reads as an axis rather than a divider */
.hero-baseline .ticks{position:absolute;left:0;right:0;bottom:54%;height:9px;
  display:flex;justify-content:space-between;opacity:0;
  transition:opacity .6s var(--ease) 1.2s}
.hero-baseline.lit .ticks{opacity:1}
.hero-baseline .ticks i{display:block;width:1px;height:100%;background:rgba(255,255,255,.4)}
.hero-baseline.lit .band{opacity:1}
.hero-baseline.lit .rule{transform:scaleX(1)}

.baseline-labels{position:absolute;left:0;right:0;bottom:0;height:100%}
.baseline-labels .tag,.baseline-labels .tag2{font-family:"Geist Mono",monospace;
  font-size:clamp(9.5px,1.1vw,10.5px);letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transition:opacity .7s var(--ease) 1.05s}
.baseline-labels .tag{color:rgba(255,255,255,.88);position:absolute;
  bottom:calc(54% + 11px);left:var(--gut);right:var(--gut)}
.baseline-labels .tag2{color:rgba(255,255,255,.5);position:absolute;bottom:16px;
  left:var(--gut);right:var(--gut)}
.hero-baseline.lit .tag,.hero-baseline.lit .tag2{opacity:1}
@media (max-width:640px){
  .baseline-labels .tag{max-width:none;line-height:1.4;font-size:9px;letter-spacing:.12em}
  .baseline-labels .tag2{font-size:9px;letter-spacing:.12em}
  /* the curve gets the band; the label sits in clear air above it */
  .hero-baseline .climb{width:58%;height:44px;opacity:.92}
  .baseline-labels .tag{bottom:calc(54% + 52px)}
  .baseline-labels{z-index:2}
  .hero-baseline .climb{z-index:1}
}
@media (prefers-reduced-motion:reduce){
  .hero-baseline .band,.hero-baseline .rule,.baseline-labels .tag,.baseline-labels .tag2{
    opacity:1;transform:none;transition:none}
}

/* ═══════════════ THE RECORD ═══════════════ */
.record{background:var(--deep)}
.indigo{background:var(--indigo)}
.flat{background:var(--deep)}

/* light sections: a hard cut out of the dark run */
.light{background:var(--bone);color:var(--bone-ink)}
.light .lede{color:rgba(20,22,28,.72)}
.light h1,.light h2,.light h3{color:var(--bone-ink)}
.light .eyebrow{color:#3a3fd6}
.light .eyebrow::after{background:rgba(20,22,28,.22)}
.light .checks li{color:rgba(20,22,28,.74)}
.light .checks li svg{stroke:#3a3fd6}
.light .checks li b{color:var(--bone-ink)}
/* on paper, the ledger is a printed panel — glass is reserved for the dark */
.light .ledger{background:rgba(255,255,255,.62);border:1px solid rgba(20,22,28,.16);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 18px 40px rgba(20,22,28,.09)}
.light .ledger .r{border-bottom-color:rgba(20,22,28,.13)}
.light .ledger .r span:first-child{color:rgba(20,22,28,.5)}
.light .ledger .r.base span:last-child{color:rgba(20,22,28,.45)}
.light .ledger .r.ours span:last-child{color:#3a3fd6}
.cards{display:grid;gap:18px;margin-top:44px}
.card{border-radius:22px;padding:clamp(22px,3.2vw,32px);border:1.5px solid var(--glass-edge);
  background:linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.035) 46%, rgba(255,255,255,.06));
  backdrop-filter:blur(50px) saturate(1.9);-webkit-backdrop-filter:blur(50px) saturate(1.9);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.42);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:22px clamp(24px,4vw,44px);align-items:center;
  transition:transform .25s var(--spring),border-color .2s var(--micro),background .2s var(--micro)}
.card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.34);
  backdrop-filter:blur(50px) saturate(2.2);-webkit-backdrop-filter:blur(50px) saturate(2.2);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.34), 0 30px 70px rgba(0,0,0,.5)}
@media (max-width:800px){.card{grid-template-columns:1fr}}
.card .meta{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-top:9px}
/* figures sit ON the baseline: before at the line, now above it */
.figline{margin-top:20px;display:flex;align-items:flex-end;gap:14px}
.figline .from{font-size:19px;font-weight:600;color:var(--ink-3);padding-bottom:3px}
.figline .arrow{color:var(--hot);font-size:17px;padding-bottom:5px}
.figline .to{font-size:clamp(28px,4.4vw,42px);font-weight:800;letter-spacing:-.035em;line-height:1}
.spark{width:100%;height:auto;display:block}

/* ═══════════════ PAID ═══════════════ */
.paid{background:var(--warm)}
.ledger{margin-top:38px;max-width:640px;border-radius:22px;padding:clamp(20px,3vw,30px) clamp(22px,3.2vw,32px);
  border:1.5px solid var(--glass-edge);
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 50%, rgba(255,255,255,.055));
  backdrop-filter:blur(50px) saturate(1.9);-webkit-backdrop-filter:blur(50px) saturate(1.9);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.24), 0 24px 60px rgba(0,0,0,.4)}
.ledger .r{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:17px 2px;
  border-bottom:1px solid var(--line)}
.ledger .r span:first-child{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.ledger .r span:last-child{font-size:19px;font-weight:700;letter-spacing:-.02em}
.ledger .r.base span:last-child{color:var(--ink-3)}
.ledger .r.ours span:last-child{color:var(--hot)}
.ledger .r.keep{border-bottom:0;padding-top:22px}
.ledger .r.keep span:last-child{font-size:clamp(24px,3.4vw,32px);font-weight:800}

/* ═══════════════ THE SIX ═══════════════ */
.six{display:grid;grid-template-columns:repeat(3,1fr);gap:34px clamp(24px,3.4vw,44px);margin-top:48px}
@media (max-width:860px){.six{grid-template-columns:1fr 1fr;gap:28px 24px}}
@media (max-width:540px){.six{grid-template-columns:1fr}}
.six > div{padding-top:20px;border-top:1px solid rgba(244,246,250,.22);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.six svg{width:21px;height:21px;stroke:var(--hot);stroke-width:1.8;fill:none;margin-top:2px;flex:none}
.six p{margin-top:7px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}

.scaleplot svg{width:100%;height:auto;display:block;overflow:visible}
.scaleplot .bar{transform:scaleY(0);transform-origin:center bottom;
  transition:transform .9s var(--ease)}
.in .scaleplot .bar{transform:scaleY(1)}
.in .scaleplot .bar.tall{transition-delay:.14s}
.plotnote{margin-top:14px;font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.6}
.divergence .illus{color:rgba(244,246,250,.34)}
@media (prefers-reduced-motion:reduce){.scaleplot .bar{transform:none;transition:none}}

/* ── the divergence: the section's own argument, drawn ── */
.divergence{margin:clamp(40px,6vw,64px) 0 0;padding:0}
.divergence svg{width:100%;height:auto;display:block}
.divergence figcaption{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px;
  font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.divergence figcaption span{display:flex;align-items:center;gap:9px}
.key{width:16px;height:2.5px;border-radius:2px;display:block}
.key.hot{background:#8f96ff}
.key.flatline{background:rgba(244,246,250,.82)}

/* on the blue field, the eyebrow and body invert to the field's ink */
.close .eyebrow{color:rgba(255,255,255,.82)}
.close .eyebrow::after{background:rgba(255,255,255,.32)}
.close .plan{border-color:rgba(255,255,255,.28)}
.close .plan-list li{border-bottom-color:rgba(255,255,255,.22);color:rgba(238,240,255,.86)}
.close .plan-list .n{color:#fff}
.close .plan-kicker{color:rgba(255,255,255,.7)}

/* ── the plan: the thing the diagnosis hands over ── */
.plan{margin-top:clamp(38px,5vw,54px);max-width:720px;border-radius:22px;
  padding:clamp(24px,3.2vw,34px);border:1.5px solid var(--glass-edge);
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 50%, rgba(255,255,255,.055));
  backdrop-filter:blur(50px) saturate(1.9);-webkit-backdrop-filter:blur(50px) saturate(1.9);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.24), 0 24px 60px rgba(0,0,0,.4)}
.plan-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.plan-kicker{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.plan-price{font-size:clamp(26px,3.6vw,34px);font-weight:800;letter-spacing:-.03em}
.plan-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.plan-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  padding:17px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.plan-list li:last-child{border-bottom:0;padding-bottom:0}
.plan-list .n{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.1em;color:var(--hot);padding-top:3px}

/* ═══════════════ TWO-UP ═══════════════ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.checks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:15px}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:13px;color:var(--ink-2);font-size:16px;line-height:1.45}
.checks li svg{width:17px;height:17px;stroke:var(--hot);stroke-width:2;fill:none;margin-top:4px}
.checks li b{color:var(--ink);font-weight:700}

/* ═══════════════ Q&A ═══════════════ */
.qa{margin-top:44px;border-top:1px solid var(--line-strong)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:clamp(17px,2vw,21px);font-weight:700;letter-spacing:-.02em;transition:color .15s var(--micro)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--hot)}
.qa details[open] summary{color:var(--hot)}
.qa summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;margin-top:-7px;
  border-right:2px solid var(--hot);border-bottom:2px solid var(--hot);transform:rotate(45deg);
  transition:transform .25s var(--ease)}
.qa details[open] summary::after{transform:rotate(-135deg)}
.qa .ans{padding:0 0 24px;max-width:62ch;color:var(--ink-2);font-size:16.5px;line-height:1.55}

/* ═══════════════ CLOSE + FOOTER ═══════════════ */
.close{background:var(--field);color:var(--field-ink)}
.close .lede{color:rgba(238,240,255,.86)}
footer{background:var(--deep);padding:clamp(48px,6vw,72px) 0;border-top:1px solid var(--line)}
.foot{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start}
.foot .legal{font-family:"Geist Mono",monospace;font-size:11px;line-height:1.9;color:var(--ink-3);letter-spacing:.03em}
.foot .links{display:grid;gap:9px;font-size:13.5px;font-weight:600}
.foot .links a{text-decoration:none;color:var(--ink-2);transition:color .15s var(--micro)}
.foot .links a:hover{color:#fff}

/* ═══════════════ MOTION ═══════════════ */
/* headline arrives a line at a time, out of a mask — the signature entrance */
.line-mask{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.line-mask > span{display:block;transform:translateY(104%);
  transition:transform .82s var(--ease)}
.lines-in .line-mask > span{transform:none}
.lines-in .line-mask:nth-child(1) > span{transition-delay:.02s}
.lines-in .line-mask:nth-child(2) > span{transition-delay:.10s}
.lines-in .line-mask:nth-child(3) > span{transition-delay:.18s}
.lines-in .line-mask:nth-child(4) > span{transition-delay:.26s}
.lines-in .line-mask:nth-child(5) > span{transition-delay:.34s}

/* the baseline draws itself across, then the band settles under it */
.hero-floor .rule{transform:scaleX(0);transform-origin:left center;
  transition:transform 1.1s var(--ease) .35s}
.hero-floor.lit .rule{transform:scaleX(1)}
.hero-floor .band,.hero-floor .tag,.hero-floor .tag2{opacity:0;transition:opacity .7s var(--ease) .9s}
.hero-floor.lit .band,.hero-floor.lit .tag,.hero-floor.lit .tag2{opacity:1}

/* the eyebrow rule grows into place */
.eyebrow::after{transform:scaleX(0);transform-origin:left center;
  transition:transform .9s var(--ease) .1s}
.eyebrow.in::after,.rv.in.eyebrow::after{transform:scaleX(1)}

/* ambient: the blooms drift against the scroll, barely */
.bloom{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .line-mask > span{transform:none;transition:none}
  .hero-floor .rule{transform:scaleX(1);transition:none}
  .hero-floor .band,.hero-floor .tag,.hero-floor .tag2{opacity:1;transition:none}
  .eyebrow::after{transform:scaleX(1);transition:none}
  .bloom{transform:none!important}
}
.rv{clip-path:inset(0 0 101% 0);transform:translateY(15px)}
.rv.in{clip-path:inset(0 0 -14% 0);transform:none;
  transition:clip-path .82s var(--ease),transform .82s var(--ease)}
.rv.done{clip-path:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}
.draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s var(--ease) .2s}
.in .draw,.draw.in{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .rv,.rv.in{clip-path:none;transform:none;transition:none}
  .draw{stroke-dashoffset:0;transition:none}
}


/* ═══════════════ THE MARK, SHORT ═══════════════ */
.mark-hv{font-family:"Newsreader",serif;font-weight:600;font-size:21px;letter-spacing:.02em;color:#fff;
  padding-bottom:3px;border-bottom:1.5px solid currentColor;line-height:1;
  text-decoration:none;display:inline-block;transition:opacity .2s var(--micro)}
a.mark-hv:hover{opacity:.72}
.nav-pill.on-light .mark-hv{color:var(--bone-ink)}

/* ═══════════════ PAGE HEADERS ═══════════════ */
.page-head{background:var(--field);color:var(--field-ink);padding-top:clamp(122px,16vw,172px)}
.page-head h1{max-width:17ch}
.page-head .lede{color:rgba(238,240,255,.88);margin-top:26px;max-width:56ch}

/* ═══════════════ KEY FACTS (definition list) ═══════════════ */
.facts{margin-top:38px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(26px,4vw,56px);border-top:1px solid var(--line)}
@media (max-width:760px){.facts{grid-template-columns:1fr}}
.facts div{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:16px;
  padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
@media (max-width:520px){.facts div{grid-template-columns:1fr;gap:4px}}
.facts dt{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0}
.facts dd{margin:0;font-size:15.5px;font-weight:500;line-height:1.45}
.light .facts{border-color:rgba(20,22,28,.18)}
.light .facts div{border-color:rgba(20,22,28,.13)}
.light .facts dt{color:rgba(20,22,28,.5)}

/* ═══════════════ THE BUILD SEQUENCE ═══════════════ */
.seq{margin-top:40px;counter-reset:step}
.seq > li{list-style:none;display:grid;grid-template-columns:minmax(0,82px) minmax(0,1fr);
  gap:clamp(16px,3vw,34px);padding:26px 0;border-top:1px solid var(--line)}
@media (max-width:640px){.seq > li{grid-template-columns:1fr;gap:10px}}
.seq .when{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hot);padding-top:5px}
.seq h4{margin:0 0 9px;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.018em}
.seq p{font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:60ch}
.light .seq > li{border-color:rgba(20,22,28,.14)}
.light .seq p{color:rgba(20,22,28,.72)}
.light .seq .when{color:#3a3fd6}

/* ═══════════════ CALLOUT — what didn't work ═══════════════ */
.callout{margin-top:40px;border-left:2px solid var(--hot);padding:4px 0 4px clamp(20px,3vw,30px);
  max-width:68ch}
.callout .tag{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hot);display:block;margin-bottom:14px}
.callout p{font-size:16.5px;line-height:1.58;color:var(--ink-2)}
.callout p + p{margin-top:14px}
.light .callout{border-left-color:#3a3fd6}
.light .callout p{color:rgba(20,22,28,.74)}

/* ═══════════════ PULL QUOTE + VIDEO SLOT ═══════════════ */
.quote{margin-top:44px;max-width:26ch;font-weight:700;
  font-size:clamp(23px,3.4vw,34px);line-height:1.18;letter-spacing:-.028em;color:#fff}
.quote em{font-style:italic;color:var(--hot)}
.quote cite{display:block;font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);font-style:normal;margin-top:18px}
.videoslot{margin-top:26px;max-width:640px;aspect-ratio:16/9;border-radius:18px;
  border:1.5px solid var(--glass-edge);
  background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 55%);
  backdrop-filter:blur(40px) saturate(1.7);-webkit-backdrop-filter:blur(40px) saturate(1.7);
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;padding:20px}

/* ═══════════════ STICKY CONTENTS RAIL ═══════════════ */
.method{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:940px){.method{grid-template-columns:1fr}.toc{display:none}}
.toc{position:sticky;top:104px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid var(--line)}
.toc a{display:block;padding:9px 0 9px 16px;margin-left:-1px;border-left:1px solid transparent;
  font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);text-decoration:none;transition:color .2s var(--micro),border-color .2s var(--micro)}
.toc a:hover{color:var(--ink)}
.toc a.here{color:var(--hot);border-left-color:var(--hot)}
.step{padding:34px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0;padding-top:0}
.step h3{font-size:clamp(24px,3.4vw,36px);font-weight:700;line-height:1.15;letter-spacing:-.022em;margin-bottom:14px}
.step .num{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hot);display:block;margin-bottom:12px}
.step p{font-size:16px;line-height:1.56;color:var(--ink-2);max-width:60ch}
.step p + p{margin-top:14px}

/* ═══════════════ FORM ═══════════════ */
.form{margin-top:38px;max-width:560px;display:grid;gap:22px}
.field label{display:block;font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.66);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.22);border-radius:14px;color:#fff;
  font-family:"Inter Tight",sans-serif;font-size:16px;font-weight:500;padding:14px 16px;
  backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);
  transition:border-color .2s var(--micro),background .2s var(--micro)}
.field textarea{min-height:104px;resize:vertical;line-height:1.5}
.field select option{background:#0b0e16;color:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:rgba(255,255,255,.62);background:rgba(255,255,255,.13)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.45)}
.form-note{font-size:13.5px;color:rgba(238,240,255,.7);max-width:44ch}
.confirm{border:1.5px solid rgba(255,255,255,.3);border-radius:20px;padding:clamp(22px,3vw,30px);
  max-width:560px;background:rgba(255,255,255,.09);
  backdrop-filter:blur(40px) saturate(1.7);-webkit-backdrop-filter:blur(40px) saturate(1.7)}


/* ═══════════════ PAGE HEAD VARIANTS ═══════════════
   Every page opens differently — same system, four different first screens. */
.page-head.on-dark{background:var(--deep);color:var(--ink)}
.page-head.on-dark h1{color:#fff}
.page-head.on-bone{background:var(--bone);color:var(--bone-ink)}
.page-head.on-bone h1{color:var(--bone-ink)}
.page-head.on-bone .lede{color:rgba(20,22,28,.72)}
.page-head.on-bone .eyebrow{color:#3a3fd6}
.page-head.on-bone .eyebrow::after{background:rgba(20,22,28,.22)}
.page-head.tight{padding-bottom:clamp(70px,9vw,104px)}
.page-head .eyebrow{color:rgba(255,255,255,.8)}
.page-head .eyebrow::after{background:rgba(255,255,255,.3)}

/* the record's opening: the whole list, stated before a word of argument */
.headledger{margin-top:clamp(38px,5vw,56px);border-top:1px solid var(--line-strong)}
.headledger > div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.hl-who{font-size:16px;font-weight:600;color:var(--ink-2)}
.hl-fig{font-size:clamp(19px,2.6vw,26px);font-weight:800;letter-spacing:-.03em;color:#fff}


/* ═══════════════ THE CALCULATOR ═══════════════
   Tiny publishes a take-home calculator on its comparison pages. Ours answers
   the only arithmetic that matters here: what a share of growth actually costs. */
.calc{margin-top:8px;border-radius:22px;padding:clamp(24px,3.2vw,34px);
  background:rgba(255,255,255,.66);border:1px solid rgba(20,22,28,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 18px 44px rgba(20,22,28,.10)}
.calc-row{display:grid;gap:22px;grid-template-columns:1fr 1fr}
@media (max-width:620px){.calc-row{grid-template-columns:1fr}}
.calc label{display:block;font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(20,22,28,.55);margin-bottom:10px}
.calc .money{display:flex;align-items:baseline;gap:6px;border-bottom:1.5px solid rgba(20,22,28,.25);
  padding-bottom:8px;transition:border-color .2s var(--micro)}
.calc .money:focus-within{border-color:#3a3fd6}
.calc .money span{font-size:20px;font-weight:700;color:rgba(20,22,28,.45)}
.calc input[type="number"]{border:0;background:transparent;outline:none;width:100%;
  font-family:"Inter Tight",sans-serif;font-size:clamp(22px,3vw,28px);font-weight:800;
  letter-spacing:-.025em;color:var(--bone-ink);-moz-appearance:textfield}
.calc input::-webkit-outer-spin-button,.calc input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-out{margin-top:30px;border-top:1px solid rgba(20,22,28,.16)}
.calc-out .r{display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:15px 2px;border-bottom:1px solid rgba(20,22,28,.12)}
.calc-out .r span:first-child{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(20,22,28,.55)}
.calc-out .r span:last-child{font-size:19px;font-weight:700;letter-spacing:-.02em}
.calc-out .r.ours span:last-child{color:#3a3fd6}
.calc-out .r.keep{border-bottom:0;padding-top:20px}
.calc-out .r.keep span:last-child{font-size:clamp(25px,3.4vw,33px);font-weight:800}
.calc-note{margin-top:16px;font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(20,22,28,.45);line-height:1.7}


/* ═══════════════ MOTION VOCABULARY ═══════════════
   One behaviour per kind of thing, so the page doesn't perform the same trick
   forty times. Four in total, plus the headline's line-mask — the whole budget. */

/* 1 · prose and headings keep the mask rise (.rv, defined above) */

/* 2 · panels and cards wipe open from the left, like something being placed */
.rv-wipe{clip-path:inset(0 100% 0 0);transform:translateY(8px)}
.rv-wipe.in{clip-path:inset(0 -2% 0 0);transform:none;
  transition:clip-path .95s var(--ease),transform .7s var(--ease)}
.rv-wipe.done{clip-path:none}

/* 3 · rows arrive one after another, from the left edge of their own line */
.rv-rows > *{opacity:0;transform:translateX(-14px);
  transition:opacity .55s var(--micro),transform .65s var(--ease)}
.rv-rows.in > *{opacity:1;transform:none}
.rv-rows.in > *:nth-child(1){transition-delay:.02s}
.rv-rows.in > *:nth-child(2){transition-delay:.09s}
.rv-rows.in > *:nth-child(3){transition-delay:.16s}
.rv-rows.in > *:nth-child(4){transition-delay:.23s}
.rv-rows.in > *:nth-child(5){transition-delay:.30s}
.rv-rows.in > *:nth-child(6){transition-delay:.37s}
.rv-rows.in > *:nth-child(n+7){transition-delay:.44s}

/* 4 · glass objects settle in, with the spring the buttons use */
.rv-pop{opacity:0;transform:scale(.965) translateY(10px)}
.rv-pop.in{opacity:1;transform:none;
  transition:opacity .5s var(--micro),transform .7s var(--spring)}

@media (prefers-reduced-motion:reduce){
  .rv-wipe,.rv-wipe.in{clip-path:none;transform:none;transition:none}
  .rv-rows > *,.rv-rows.in > *{opacity:1;transform:none;transition:none}
  .rv-pop,.rv-pop.in{opacity:1;transform:none;transition:none}
}


/* ═══════════════ PORTRAIT ═══════════════
   The photograph is already black and white and lit against a near-black ground,
   so it needs no treatment — it needs a section dark enough to dissolve into.
   No border, no card: the frame would draw a rectangle around something that is
   supposed to float. A soft mask at the foot carries it into the page. */
.portrait-holder{position:relative;border-radius:18px;overflow:hidden;
  aspect-ratio:3/4;max-width:340px;
  -webkit-mask-image:linear-gradient(to bottom, #000 72%, rgba(0,0,0,.55) 92%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 72%, rgba(0,0,0,.55) 92%, transparent 100%)}
.portrait{display:block;width:100%;height:100%;object-fit:cover;object-position:center 56%;
  filter:contrast(1.04)}
.portrait-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 4px;
  font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
/* on the bone sections the same image needs a ground to sit on, not to melt into */
.light .portrait-holder{-webkit-mask-image:none;mask-image:none;
  border:1px solid rgba(20,22,28,.14)}
.light .portrait-cap{color:rgba(255,255,255,.9);
  background:linear-gradient(to top, rgba(4,6,12,.7), transparent);padding:16px 16px}

.founder{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:clamp(26px,4vw,52px);align-items:center;margin-top:8px}
@media (max-width:820px){.founder{grid-template-columns:1fr}}
.founder .diag{font-weight:700;
  font-size:clamp(22px,3.1vw,31px);line-height:1.2;letter-spacing:-.028em;color:#fff;max-width:27ch}
.founder .diag em{font-style:italic;color:var(--hot)}
.light .founder .diag{color:var(--bone-ink)}
.light .founder .diag em{color:#3a3fd6}
.light .portrait-holder{border-color:rgba(20,22,28,.16);background:rgba(20,22,28,.04)}
.light .portrait-cap{color:rgba(255,255,255,.9)}

/* the operator résumé: things that happened to a business, not adjectives */
.resume{margin-top:38px;border-top:1px solid var(--line)}
.resume > div{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:18px;
  padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
@media (max-width:600px){.resume > div{grid-template-columns:1fr;gap:5px}}
.resume .yr{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--hot)}
.resume p{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:58ch}
.light .resume{border-color:rgba(20,22,28,.18)}
.light .resume > div{border-color:rgba(20,22,28,.13)}
.light .resume p{color:rgba(20,22,28,.74)}
.light .resume .yr{color:#3a3fd6}

.inline-link{color:var(--hot);text-decoration:none;border-bottom:1px solid rgba(143,150,255,.4)}
.inline-link:hover{border-bottom-color:var(--hot)}

/* honeypot: a field only a bot will fill in */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form-error{margin-top:16px;font-size:14px;color:#ffd2d2;max-width:42ch}
.cta[aria-busy="true"]{opacity:.7;pointer-events:none}


/* ═══════════════ TOUCH ═══════════════
   Anything tappable needs a 44px target on a phone, even when the text is small. */
@media (max-width:860px){
  .foot-links{gap:2px}
  .foot-links a{display:block;padding:12px 0;min-height:44px;line-height:20px}
  .arrow-link{display:inline-block;padding:11px 0;min-height:44px;line-height:22px}
  .calc input[type="number"]{font-size:22px;padding:10px 0;min-height:44px}
  .calc .money{padding-bottom:12px;min-height:46px;align-items:flex-end}
  .field input,.field select,.field textarea{min-height:50px;font-size:16px}
  .qa summary{padding-top:20px;padding-bottom:20px}
  .toc a{padding-top:12px;padding-bottom:12px}
  .nav-mobile .glass-btn{min-height:46px}
  .inline-link{padding:2px 0}
}
/* iOS zooms the page in on any input under 16px — keep them at 16 or above */
input,select,textarea{font-size:16px}


/* ═══════════════ MOBILE MENU ═══════════════
   Built to the same spec as Tiny's, read off their live page: a 44px glass
   circle at top-right, and a full-screen panel at 95% near-black with a 24px
   backdrop blur, padded 96/24/32, primary links at 24px/700. */
.menu-btn{position:fixed;top:18px;right:16px;left:auto;width:46px;height:46px;padding:0;
  align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);border-radius:9999px;color:#fff;cursor:pointer;
  backdrop-filter:blur(40px) saturate(1.6);-webkit-backdrop-filter:blur(40px) saturate(1.6);
  z-index:71;display:none}
@media (max-width:900px){.menu-btn{display:flex}}
.bars{position:relative;display:block;width:17px;height:11px}
.bars i{position:absolute;left:0;right:0;height:1.8px;background:currentColor;border-radius:2px;
  transition:transform .32s var(--ease),opacity .2s var(--micro)}
.bars i:first-child{top:0}
.bars i:last-child{bottom:0}
.menu-open .bars i:first-child{transform:translateY(4.6px) rotate(45deg)}
.menu-open .bars i:last-child{transform:translateY(-4.6px) rotate(-45deg)}

.menu-panel{position:fixed;inset:0;z-index:60;overflow-y:auto;overscroll-behavior:contain;
  background:rgba(4,6,12,.95);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  padding:96px 24px 32px;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(-10px);
  transition:opacity .3s var(--micro),transform .38s var(--ease)}
.menu-panel.on{opacity:1;transform:none}
.menu-links{display:flex;flex-direction:column;border-top:1px solid rgba(244,246,250,.14)}
.menu-links a{font-size:24px;font-weight:700;letter-spacing:-.025em;color:#fff;text-decoration:none;
  padding:18px 2px;min-height:44px;border-bottom:1px solid rgba(244,246,250,.14);
  display:flex;align-items:center;justify-content:space-between}
.menu-links a::after{content:"";width:8px;height:8px;border-right:1.8px solid var(--hot);
  border-bottom:1.8px solid var(--hot);transform:rotate(-45deg);opacity:.8}
.menu-links a[aria-current="page"]{color:var(--hot)}
.menu-cta{margin-top:28px;display:flex;align-items:center;justify-content:center;
  background:var(--field);color:#fff;text-decoration:none;border-radius:9999px;
  min-height:54px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.menu-foot{margin-top:auto;padding-top:36px;font-family:"Geist Mono",monospace;font-size:10px;
  line-height:1.9;letter-spacing:.08em;color:var(--ink-3)}
body.menu-open{overflow:hidden}
@media (min-width:901px){.menu-panel{display:none!important}}
@media (prefers-reduced-motion:reduce){
  .menu-panel{transition:none}
  .bars i{transition:none}
}


/* ═══════════════ PHONE ═══════════════
   Tiny's mobile proportions, measured off their live page: the hero owns the
   whole first screen, sections run 80px vertical on a 24px gutter, and the type
   steps up rather than shrinking down. */
@media (max-width:640px){
  :root{--gut:24px}

  /* the first screen is entirely the blue field, with the baseline as its floor */
  .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
    padding-top:132px;padding-bottom:0}
  .hero-body{padding-bottom:34px}
  .hero h1{font-size:42px;line-height:42px;letter-spacing:-.02em;max-width:none}
  .hero .lede{font-size:17px;line-height:1.45;margin-top:20px;max-width:none}
  .hero .cta{margin-top:28px;width:100%;justify-content:center;min-height:56px}
  /* in flow it would sit first, because it comes first in the markup — the
     baseline belongs under the headline, so order it explicitly */
  .hero-baseline{position:relative;height:156px;flex:none;order:2}
  .hero-body{order:1}

  /* page heads on the other four pages get the same treatment, minus full height */
  .page-head{padding-top:124px;padding-bottom:56px}
  .page-head h1{font-size:38px;line-height:40px;max-width:none}

  section{padding:80px 0}
  h2{font-size:34px;line-height:36px;letter-spacing:-.022em;max-width:none}
  .lede{font-size:17px;line-height:1.5;max-width:none}
  .eyebrow{margin-bottom:22px}

  /* objects want room to breathe rather than hugging the edges */
  .card{padding:24px;border-radius:20px}
  .cards{gap:14px}
  .figline{margin-top:16px}
  .card .fig,.figline .to{font-size:30px}
  .plan,.calc,.ledger{padding:24px;border-radius:20px}
  .six{gap:26px}
  .six > div{padding-top:18px}
  .resume > div{padding:20px 0}
  .quote{font-size:26px;line-height:1.2}
  .cta{width:100%;justify-content:center;min-height:56px}
  .foot{gap:34px}
}


/* ═══════════════ PHONE MOTION ═══════════════
   clip-path transitions are expensive on iOS, and stacked against the glass
   blurs they get dropped or stutter. On a phone the same reveals run on opacity
   and transform instead, which are GPU-composited and stay smooth. */
@media (max-width:900px){
  .rv{clip-path:none;opacity:0;transform:translateY(18px)}
  .rv.in{clip-path:none;opacity:1;transform:none;
    transition:opacity .5s var(--micro),transform .66s var(--ease)}
  .rv-wipe{clip-path:none;opacity:0;transform:translateY(18px)}
  .rv-wipe.in{clip-path:none;opacity:1;transform:none;
    transition:opacity .5s var(--micro),transform .66s var(--ease)}
  .rv-pop{opacity:0;transform:translateY(16px) scale(.985)}
  .rv-pop.in{opacity:1;transform:none;
    transition:opacity .45s var(--micro),transform .6s var(--spring)}
  .rv-rows > *{transform:translateY(12px)}
  .rv-rows.in > *{transform:none}
}