/* Raven v8 (Tom's notes on v7, 2026-10-05): lock it.
   · Hero: the left layout. The word arrives when Raven lands and bounces, then the line, then the bar and the button; an
     ASCII arrow under the hero says "scroll". On phones the word is huge, a wow moment.
   · No "v" next to the menu names. The drop-down panels stay: Tom wants them across the app.
   · "Learn more" links are buttons: an outline pill with the same ASCII arrow, quieter than the big button.
   · How it works: the step Raven stands on grows a little and gets an ink ring. On phones: small cards with the words to
     their right, and Raven rides a dotted arc between the cards as you scroll.
   · The system fits one screen: the promise and its bill on the left, then two labelled groups (Raven at work, What comes
     back) of small cards. Sections end with footnotes on the left, then the button, centred.
   · Plans are the big break: an ink bento. On phones the three packs sit side by side.
   · The last screen takes tidy.work's ending: a giant wordmark rising to sit on the bottom edge.
   Colours keep their meaning: blue = Raven at work, lime = your list and "yes", pink = proof, sky = what comes back.
   Shared by the detail pages in v8/ (with v8/page.css). */

:root {
  --ease-drop: cubic-bezier(.76, 0, .24, 1);
  --ease-out-slow: cubic-bezier(.16, 1, .3, 1);
  --page: #f4efe8; --ink: #121212; --white: #ffffff; --muted: rgba(18, 18, 18, .6); --ink-2: rgba(18, 18, 18, .74);
  --blue: #0f66fe; --pink: #fdabc2; --lime: #cbfb56; --sky: #a5e8fd;
  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1200px;
  --gut: clamp(16px, 3.4vw, 56px);
  --gap: clamp(14px, 1.7vw, 24px);
  --r: clamp(18px, 1.8vw, 26px);
  --pad: clamp(22px, 2.4vw, 38px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* no-contextual: JetBrains Mono would join "-->" and ">>>" into ligature arrows; the ASCII art wants its characters */
html { background: var(--page); scrollbar-width: none; font-variant-ligatures: no-contextual; }
html::-webkit-scrollbar { display: none; }
html, body { overflow-x: clip; }
body { position: relative; font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }
body.loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; }
ol, ul { list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin: 0 auto; }

/* ── Loading ─────────────────────────────────────────────────────────────────── */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--page); display: grid; place-items: center; transition: opacity .7s var(--ease-out-slow), visibility 0s linear .7s; }
.loader.done { opacity: 0; visibility: hidden; }
.ld-in { display: grid; justify-items: start; }
.ld-bird { height: 64px; width: auto; margin-left: calc(var(--p, 0) * 1.25px); transition: margin-left .3s var(--ease-out-slow); }
.ld-bar { font-family: var(--mono); font-size: 17px; margin-top: 4px; white-space: pre; }

/* ── Ravens in page coordinates ──────────────────────────────────────────────── */
.bird { position: absolute; z-index: 48; left: 0; top: 0; pointer-events: none; will-change: transform; opacity: 0; transition: opacity .5s; }
.bird.on { opacity: 1; }
.bird img { height: clamp(96px, 9.6vw, 138px); width: auto; }
.bird.flying img { height: auto; width: clamp(130px, 12vw, 190px); }
.scout img { height: clamp(90px, 8.6vw, 124px); } .scout.flying img { width: clamp(110px, 10vw, 160px); }
.trail-layer { position: absolute; z-index: -1;   /* behind the page: dashes only show on the background */ left: 0; top: 0; width: 100%; pointer-events: none; overflow: visible; }
.trail-layer text { font-family: var(--mono); font-size: 20px; }

/* ── Side: a straight dashed line, Raven gliding down it ─────────────────────── */
.side { position: fixed; z-index: 58; right: 14px; top: 96px; bottom: 22px; width: 30px; cursor: pointer; opacity: 0; transition: opacity .8s var(--ease-out-slow); }
body.ready .side { opacity: 1; }
.side-all, .side-done { position: absolute; left: 50%; top: 0; width: 2px; margin-left: -1px; background-image: linear-gradient(to bottom, currentColor 0 5px, transparent 5px 11px); background-size: 2px 11px; }
.side-all { bottom: 0; color: rgba(18, 18, 18, .14); }
.side-done { height: var(--p, 0%); color: rgba(18, 18, 18, .6); }
.side-bird { position: absolute; left: 50%; top: var(--p, 0%); width: 40px; height: auto; translate: -50% -50%; rotate: 24deg; pointer-events: none; }

/* ── The top: one glass pill, Stripe's pattern inside it ─────────────────────────
   raven · Product v · Why Raven v · Pricing ········ Sign in · [First 100 forms FREE -->]
   A menu drops as one glass panel under the pill and the page veils behind it, as on stripe.com. */
.pill { position: fixed; z-index: 60; top: 14px; left: 50%; translate: -50% 0; width: min(1040px, calc(100% - 32px)); height: 60px; display: flex; align-items: center; padding: 0 8px 0 24px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .48)); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 34px -20px rgba(18, 18, 18, .4); opacity: 0; transition: opacity .9s var(--ease-out-slow); }
body.ready .pill { opacity: 1; }
.mark { font-weight: 700; font-size: 28px; letter-spacing: -0.06em; line-height: 1; }
.links { display: flex; align-items: center; gap: 2px; margin-left: 26px; }
.nl, .signin { height: 42px; padding: 0 15px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; transition: background .25s; }
.nl:hover, .nl[aria-expanded="true"], .signin:hover { background: rgba(255, 255, 255, .8); }
.acts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.menu-btn { display: none; margin-left: auto; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: var(--page); font-weight: 600; font-size: 15px; align-items: center; }
.menu-btn .close-l { display: none; }

/* The drop-down panels: one glass sheet under the pill. Items: a colour tile (its meaning) + name + one line. */
.np { position: fixed; z-index: 61; top: 84px; left: 50%; width: min(var(--npw, 780px), calc(100% - 32px)); display: grid; grid-template-columns: var(--npc, 1fr 1fr 240px); gap: 4px; padding: 10px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .84)); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); border: 1px solid #fff;
  box-shadow: inset 0 1px 0 #fff, 0 44px 90px -40px rgba(18, 18, 18, .5);
  opacity: 0; visibility: hidden; pointer-events: none; translate: -50% -8px; scale: .985; transform-origin: 50% 0;
  transition: opacity .26s var(--ease-out-slow), translate .45s var(--ease-out-slow), scale .45s var(--ease-out-slow), visibility 0s linear .26s; }
.np.open { opacity: 1; visibility: visible; pointer-events: auto; translate: -50% 0; scale: 1; transition-delay: 0s; }
.np::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }   /* a bridge from the pill, so the hover holds */
.ni { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 14px; border-radius: 18px; transition: background .2s; }
.ni:hover, .ni:focus-visible { background: rgba(244, 239, 232, .9); }
.ni b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; }
.ni small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--muted); }
.nt { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-style: normal; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: -0.02em; white-space: pre; background: var(--bg); color: var(--fg, var(--ink)); }
.nt.lime { --bg: var(--lime); } .nt.blue { --bg: var(--blue); --fg: #fff; } .nt.pink { --bg: var(--pink); } .nt.sky { --bg: var(--sky); } .nt.ink { --bg: var(--ink); --fg: var(--page); }
.np-side { grid-column: -2; grid-row: 1 / span var(--nps, 2); position: relative; overflow: hidden; display: grid; align-content: space-between; gap: 18px; min-height: 196px; padding: 18px 18px 16px; border-radius: 18px; background: var(--bg); color: var(--fg, var(--ink)); transition: translate .3s var(--ease-out-slow); }
.np-side:hover { translate: 0 -2px; }
.np-side.blue { --bg: var(--blue); --fg: #fff; } .np-side.lime { --bg: var(--lime); }
.np-side small { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .78; }
.np-side b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; max-width: 11ch; }
.np-side b.huge { font-size: 58px; letter-spacing: -0.06em; line-height: .9; }
.np-side span { font-size: 14px; line-height: 1.35; max-width: 18ch; }
.np-side em { font-style: normal; font-family: var(--mono); font-size: 13px; font-weight: 500; }
.np-side img { position: absolute; right: 12px; top: 12px; height: 66px; width: auto; }
.np-side img + * { display: none; }
.np-side:has(img) b { max-width: 8.5ch; }
.nav-veil { position: fixed; inset: 0; z-index: 57; background: rgba(244, 239, 232, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
body.np-open .nav-veil { opacity: 1; visibility: visible; transition-delay: 0s; }

/* Phones and narrow windows: one Menu. The sky sheet drops (v6's drop) and lists every page; the button is pinned. */
.menu { position: fixed; inset: 0; z-index: 59; background: var(--sky); color: var(--ink); transform: translateY(-100%); transition: transform .9s var(--ease-drop); display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 92px var(--gut) 18px; visibility: hidden; }
.menu.open { transform: none; visibility: visible; }
.menu:not(.open) { transition: transform .9s var(--ease-drop), visibility 0s linear .9s; }
.mn-in { width: min(560px, 100%); margin: 0 auto; overflow: auto; overscroll-behavior: contain; padding-bottom: 8px; scrollbar-width: none; }
.mn-in::-webkit-scrollbar { display: none; }
.mn-h { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(18, 18, 18, .62); margin: 36px 0 4px; padding-bottom: 10px; border-bottom: 1.5px solid rgba(18, 18, 18, .85); }
.mn-h:first-child { margin-top: 12px; }
.mn-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px dashed rgba(18, 18, 18, .28); }
.mn-row .nt { width: 40px; height: 40px; border-radius: 11px; font-size: 12px; }
.menu .nt.sky { --bg: var(--ink); --fg: var(--sky); }
.mn-row b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.mn-row small { display: block; margin-top: 1px; font-size: 14px; color: rgba(18, 18, 18, .64); }
.mn-row em { font-style: normal; font-family: var(--mono); font-size: 14px; }
.mn-row.plain { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 0; }
.mn-row.plain b { font-size: 24px; }
.mn-cta { width: min(560px, 100%); margin: 14px auto 0; }
.mn-cta .cta { width: 100%; justify-content: center; }
body.menu-open { overflow: hidden; }
body.menu-open .pill { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .menu-btn .open-l { display: none; }
body.menu-open .menu-btn .close-l { display: inline-block; animation: pop .45s var(--ease-out-slow) .6s both; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ── The button: "First 100 forms FREE", everywhere ──────────────────────────── */
.cta { display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 12px 0 24px; border-radius: 14px; background: var(--ink); color: var(--page); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap;
  box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .6); transition: transform .25s var(--ease-out-slow), box-shadow .25s var(--ease-out-slow); }
.cta b { color: var(--lime); font-weight: 700; letter-spacing: .01em; }
.cta i { white-space: nowrap; font-style: normal; font-family: var(--mono); font-weight: 500; font-size: .92em; width: 6.4ch; letter-spacing: -0.02em; text-align: left; color: var(--lime); }
.cta:hover { transform: translateY(-2px); box-shadow: 0 20px 32px -16px rgba(0, 0, 0, .7); }
.cta.sm { height: 44px; padding: 0 8px 0 18px; border-radius: 999px; font-size: 15px; gap: 8px; box-shadow: none; }
.sec-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: clamp(26px, 4vh, 40px); }

/* "Learn more about …": the small way into the detail pages (and a pack card's "Buy", which lights up with the whole card) */
.more, .pack .buy { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 10px 8px 16px; border-radius: 999px; border: 1.5px solid currentColor; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; text-align: left; vertical-align: middle;
  transition: background .25s, transform .25s var(--ease-out-slow); }
.more i, .pack .buy i { flex: none; white-space: nowrap; font-style: normal; font-family: var(--mono); font-weight: 500; font-size: 13px; width: 4.6ch; text-align: left; letter-spacing: -0.02em; }
.more:hover, a.pack:hover .buy, a.pack:focus-visible .buy { background: color-mix(in srgb, currentColor 10%, transparent); transform: translateY(-1px); }
/* A section's end: footnotes on the left, then the button, centred (Tom) */
.sec-end { display: grid; gap: clamp(26px, 4vh, 40px); margin-top: clamp(8px, 1.6vh, 18px); }
.sec-end .fns { margin-top: 0; }
.sec-end .sec-cta { justify-content: center; margin-top: 0; }
#how .sec-end { width: calc(100% - 2 * var(--gut)); max-width: 1680px; margin-inline: auto; }   /* the footnote lines up with the cards' left edge */

/* Footnotes: an asterisk on the claim, the note at the foot of the section */
.ast { font-family: var(--mono); font-size: min(.5em, 20px); font-weight: 500; vertical-align: super; line-height: 0; margin-left: .05em; letter-spacing: -0.04em; font-style: normal; }
.fns { display: grid; gap: 5px; margin-top: clamp(18px, 2.6vh, 28px); }
.fn { font-family: var(--mono); font-size: 12px; line-height: 1.55; color: rgba(18, 18, 18, .58); max-width: 96ch; text-wrap: pretty; }
.on-blue .fn, .fn.on-blue { color: rgba(255, 255, 255, .74); }
.fn-a { text-decoration: underline; text-underline-offset: 3px; color: inherit; }
.fn-a:hover { color: var(--ink); }
.start .fn-a:hover { color: #fff; }

/* ── Shared pieces ───────────────────────────────────────────────────────────── */
.tag { display: inline-block; background: var(--white); color: var(--ink); font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: .005em; font-size: clamp(20px, 1.8vw, 26px); line-height: 1; padding: .3em .42em .25em; }
.tag.ink { background: var(--ink); color: var(--page); }
.title { margin-top: clamp(16px, 1.8vw, 26px); font-size: clamp(44px, 5.2vw, 88px); line-height: .95; letter-spacing: -0.055em; font-weight: 700; text-wrap: balance; }
.sub { margin-top: 14px; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.4; color: var(--muted); max-width: 40ch; text-wrap: pretty; }
.card { position: relative; border-radius: var(--r); background: var(--bg); color: var(--fg, var(--ink)); }
.card.lime, .st-card.lime, .bc.lime { --bg: var(--lime); } .card.pink, .st-card.pink, .bc.pink { --bg: var(--pink); } .card.sky, .st-card.sky, .bc.sky { --bg: var(--sky); }
.card.blue, .st-card.blue, .bc.blue { --bg: var(--blue); --fg: var(--white); }
.glass { background: linear-gradient(160deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .32)); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); border: 1px solid rgba(255, 255, 255, .78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 36px 70px -36px rgba(0, 0, 0, .45); border-radius: 22px; color: var(--ink); }
.win-top { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: rgba(18, 18, 18, .5); margin-bottom: 12px; white-space: nowrap; overflow: hidden; }
.win-top i { flex: none; width: 11px; height: 11px; border-radius: 50%; } .win-top .r { background: #ff5f57; } .win-top .y { background: #febc2e; } .win-top .g { background: #28c840; }
.win-top span { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; }
.fld { display: block; border-radius: 12px; background: rgba(255, 255, 255, .62); padding: 9px 12px; margin-bottom: 8px; }
.fld u { display: block; text-decoration: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(18, 18, 18, .45); }
.fld .v { display: block; min-height: 22px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.fld.msg .v { min-height: 42px; white-space: normal; line-height: 1.35; }
.send { margin-top: 8px; border-radius: 12px; height: 46px; display: grid; place-items: center; font-weight: 600; font-size: 15px; background: rgba(255, 255, 255, .5); color: rgba(18, 18, 18, .5); transition: background .4s, color .4s; }
.send .s-done { display: none; }
[data-phase="send"] .send { background: var(--ink); color: var(--page); }
[data-phase="sent"] .send { background: var(--lime); color: var(--ink); }
[data-phase="sent"] .send .s-idle { display: none; } [data-phase="sent"] .send .s-done { display: inline; }
.cur { display: inline-block; width: .6em; height: 1.1em; background: currentColor; vertical-align: -0.2em; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.rv { opacity: 0; translate: 0 30px; transition: opacity 1s var(--ease-out-slow), translate 1s var(--ease-out-slow); transition-delay: var(--d, 0s); }
.rv.in, html.noreveal .rv { opacity: 1; translate: 0 0; }
html.noreveal .rv { transition: none; }
.perch-at { position: absolute; top: 0; left: 76%; width: 1px; height: 1px; pointer-events: none; }
@keyframes land { 0% { transform: scale(1.04, .8); } 38% { transform: scale(.96, 1.07); } 68% { transform: scale(1.01, .98); } 100% { transform: none; } }
@keyframes hop { 0% { transform: none; } 32% { transform: translateY(-11px) scale(.98, 1.03); } 62% { transform: scale(1.05, .93); } 100% { transform: none; } }
@keyframes give { 0% { transform: none; } 22% { transform: translateY(9px) scale(1.012, .985); } 50% { transform: translateY(-4px); } 74% { transform: translateY(1.5px); } 100% { transform: none; } }
.land { transform-origin: 50% 100%; animation: land .62s var(--ease-out-slow); }
.hop { transform-origin: 50% 100%; animation: hop .52s var(--ease-out-slow); }
.give { animation: give .7s var(--ease-out-slow); }

/* ── 00 · Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 84px var(--gut) 32px; }
.hero-in { width: min(var(--wrap), 100%); display: grid; justify-items: center; align-content: center; row-gap: clamp(14px, 2.2vh, 26px); grid-template-areas: "word" "stage" "cta"; }
.copy { display: contents; }
.word { grid-area: word; font-weight: 700; font-size: clamp(64px, min(9vw, 12vh), 140px); line-height: .82; letter-spacing: -0.065em; }
.stage { grid-area: stage; position: relative; width: clamp(290px, 29vw, 420px); margin-top: clamp(110px, 17vh, 170px); }
.form-zone { position: relative; }
.cta-row { grid-area: cta; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.line, .bullets { display: none; }
.tile { position: absolute; z-index: 0; border-radius: 18px; background: var(--bg); padding: 16px 18px; box-shadow: 0 30px 60px -36px rgba(18, 18, 18, .45); }
.tile pre { font-family: var(--mono); color: var(--ascii, var(--ink)); white-space: pre; font-size: clamp(15px, 1.4vw, 21px); line-height: 1.15; }
.t-blue { --bg: var(--blue); --ascii: #fff; width: 64%; height: 44%; left: -32%; top: 4%; rotate: -6deg; }
.t-pink { --bg: var(--pink); width: 46%; height: 52%; right: -28%; top: 32%; rotate: 7deg; display: flex; justify-content: flex-end; }
.t-lime { --bg: var(--lime); width: 46%; height: 30%; left: -20%; bottom: 6%; rotate: 4deg; display: flex; align-items: flex-end; }
/* The hero form fills itself, site after site. Nothing to click. */
.hform { position: relative; z-index: 2; padding: 18px 20px 20px; }
.hform .win-title { font-size: clamp(22px, 1.9vw, 28px); font-weight: 700; letter-spacing: -0.035em; margin-bottom: 12px; }
.hform .fld { min-height: 46px; } .hform .fld.msg { min-height: 72px; }
.hform[data-phase="idle"] .send, .hform[data-phase="fill"] .send { background: var(--ink); color: var(--page); }
.hform .win-top span { transition: opacity .3s; }
.hform .win-top span.swap { opacity: 0; }
/* "Scroll": an ASCII arrow that draws itself downward, like the button's arrow */
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: clamp(12px, 2.6vh, 28px); translate: -50% 0; padding: 8px 14px; opacity: 0; transition: opacity .8s var(--ease-out-slow); }
.hero.called .scroll-cue { opacity: 1; }
.scroll-cue i { display: block; font-style: normal; font-family: var(--mono); font-weight: 500; font-size: 16px; line-height: .72; white-space: pre; text-align: center; min-height: 3.6em; }
.spill { position: relative; z-index: 2; width: 170%; margin: clamp(40px, 5.6vh, 56px) 0 0 -35%; text-align: center; font-size: clamp(22px, 2.2vw, 34px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance;
  clip-path: inset(0 0 100% 0); translate: 0 -26px; opacity: 0; transition: clip-path .9s var(--ease-out-slow), translate .9s var(--ease-out-slow), opacity .4s; }
.hero.spilled .spill { clip-path: inset(0 0 -10% 0); translate: 0 0; opacity: 1; }
.stage { opacity: 0; scale: .96; transition: opacity .9s var(--ease-out-slow), scale .9s var(--ease-out-slow); }
.hero.set .stage { opacity: 1; scale: 1; }
.word, .line, .bullets li, .cta-row { opacity: 0; translate: 0 16px; transition: opacity .8s var(--ease-out-slow), translate .8s var(--ease-out-slow); }
.hero.worded .word { opacity: 1; translate: 0 0; }
.hero.spilled .line { opacity: 1; translate: 0 0; }
.hero.told .bullets li { opacity: 1; translate: 0 0; }
.hero.told .bullets li:nth-child(2) { transition-delay: .12s; } .hero.told .bullets li:nth-child(3) { transition-delay: .24s; }
.hero.called .cta-row { opacity: 1; translate: 0 0; }
body[data-hero="left"] .hero-in { grid-template-columns: 1fr 1fr; grid-template-areas: "stage word" "stage line" "stage bullets" "stage cta"; justify-items: start; column-gap: clamp(40px, 7vw, 120px); align-items: center; }
body[data-hero="left"] .stage { justify-self: center; align-self: center; margin-top: clamp(60px, 9vh, 100px); }
body[data-hero="left"] .spill { display: none; }
body[data-hero="left"] .line { display: block; grid-area: line; font-size: clamp(28px, 2.8vw, 44px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; max-width: 15ch; text-wrap: balance; }
body[data-hero="left"] .bullets { display: grid; gap: 12px; grid-area: bullets; }
body[data-hero="left"] .bullets li { display: flex; gap: 12px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.35; color: rgba(18, 18, 18, .78); }
body[data-hero="left"] .bullets i { font-style: normal; font-family: var(--mono); color: var(--ink); }
body[data-hero="left"] .cta-row { justify-content: flex-start; margin-top: 8px; }
body[data-hero="left"] .word { font-size: clamp(72px, min(8vw, 15vh), 140px); }

/* ── 01 · How it works ───────────────────────────────────────────────────────── */
.screen { position: relative; min-height: 100svh; display: grid; align-content: center; row-gap: clamp(28px, 4vh, 52px); padding: clamp(96px, 12vh, 140px) 0 clamp(56px, 8vh, 96px); }
.head .title { max-width: 18ch; }
#how .head .title { max-width: 21ch; }
#how { row-gap: clamp(52px, 8vh, 92px); padding-bottom: clamp(70px, 10vh, 110px); }   /* room above the trio, so no bird crosses the footnote */
/* Four steps on a subgrid, so titles, cards, descriptions and links line up across the row */
.flow { position: relative; width: calc(100% - 2 * var(--gut)); max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: clamp(14px, 1.6vw, 24px); }
.st { grid-row: span 4; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; min-width: 0; }   /* a long value never widens its step */
.st-title { align-self: end; margin-bottom: 16px; font-size: clamp(21px, 1.75vw, 28px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; text-wrap: balance; max-width: 16ch; }
.st-card { position: relative; isolation: isolate; min-height: clamp(420px, 52vh, 540px); border-radius: var(--r); background: transparent; color: var(--fg, var(--ink)); padding: calc(var(--pad) + clamp(52px, 4.6vw, 74px)) var(--pad) var(--pad);
  display: flex; flex-direction: column; justify-content: flex-end; }
/* The colour is a layer behind the card, so the step Raven stands on can grow a little without moving what he stands on */
.st-card::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: var(--r); background: var(--bg); transition: inset .55s var(--ease-out-slow), border-radius .55s var(--ease-out-slow), box-shadow .55s var(--ease-out-slow); }
.st.on .st-card::before { inset: -9px; border-radius: calc(var(--r) + 9px); box-shadow: 0 34px 60px -30px rgba(18, 18, 18, .5); }
.st-card > .glass { width: 100%; }
/* The number: big, mono, top left. Where Raven stands, it turns into an ink chip (nothing moves under his feet). */
.st-n { position: absolute; left: var(--pad); top: calc(var(--pad) - 4px); isolation: isolate; font-family: var(--mono); font-weight: 500; font-size: clamp(44px, 3.8vw, 64px); line-height: 1; letter-spacing: -0.05em; transition: color .45s var(--ease-out-slow); }
.st-n::before { content: ""; position: absolute; z-index: -1; inset: -8px -14px -9px; border-radius: 16px; background: var(--ink); opacity: 0; scale: .7; transition: opacity .45s var(--ease-out-slow), scale .5s var(--ease-out-slow); }
.st.on .st-n { color: var(--bg); }
.st.on .st-n::before { opacity: 1; scale: 1; }
.st-desc { margin-top: 18px; font-size: clamp(15.5px, 1.1vw, 17px); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; max-width: 36ch; }
.st .more { margin-top: 12px; align-self: start; justify-self: start; }
/* 01 · the list */
.g-list { padding: 16px; font-family: var(--mono); font-size: clamp(12px, .92vw, 14px); line-height: 1.5; }
.modes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.modes span { padding: 4px 8px; border-radius: 999px; font-size: 10.5px; background: rgba(255, 255, 255, .35); color: rgba(18, 18, 18, .55); transition: background .4s, color .4s; white-space: nowrap; }
.g-list[data-mode="0"] .modes span:nth-child(1), .g-list[data-mode="1"] .modes span:nth-child(2), .g-list[data-mode="2"] .modes span:nth-child(3) { background: var(--ink); color: var(--lime); }
.cmd { margin-bottom: 8px; min-height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-list li { padding: 4px 8px; border-radius: 8px; color: rgba(18, 18, 18, .72); transition: background .4s, color .4s, opacity .35s, translate .35s var(--ease-out-slow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-list li.pick { background: rgba(255, 255, 255, .9); color: var(--ink); }
.g-list li.dim { color: rgba(18, 18, 18, .42); }
.g-list.playing li:not(.in) { opacity: 0; translate: 0 5px; }
/* 02 · the form */
.g-form { padding: 16px; }
/* 03 · proof: what the dashboard keeps for every site */
.g-proof { padding: 14px; }
.pf-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--mono); font-size: 12px; }
.pf-site { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-ok { flex: none; padding: 5px 9px; border-radius: 999px; background: var(--lime); font-size: 10.5px; transition: opacity .4s, scale .4s var(--ease-out-slow); }
.g-proof.playing .pf-ok:not(.in) { opacity: 0; scale: .8; }
.pf-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf-steps figure { transition: opacity .45s, translate .45s var(--ease-out-slow); }
.g-proof.playing figure:not(.in) { opacity: .18; translate: 0 6px; }
.pf-steps figcaption { margin-top: 6px; font-family: var(--mono); font-size: 10px; color: rgba(18, 18, 18, .65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg { position: relative; aspect-ratio: 3 / 4; border-radius: 8px; background: #fff; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .4); padding: 7px; display: grid; align-content: start; gap: 5px; overflow: hidden; }
.pg i { display: block; height: 6px; border-radius: 3px; background: rgba(18, 18, 18, .12); }
.pg-site .nav { height: 5px; width: 70%; } .pg-site .hero-b { height: 22px; background: rgba(15, 102, 254, .18); }
.pg-site .link { width: 62%; height: auto; padding: 2px 4px; font-style: normal; font-family: var(--mono); font-size: 7.5px; color: var(--ink); background: var(--lime); }
.pg-form i { height: 8px; background: rgba(18, 18, 18, .1); } .pg-form .tall { height: 16px; } .pg-form .btn-b { height: 8px; width: 50%; background: var(--ink); }
.pg-done { place-content: center; justify-items: center; text-align: center; } .pg-done b { font-size: 10.5px; } .pg-done i { width: 70%; } .pg-done .short { width: 46%; }
.pf-data { margin-top: 10px; font-family: var(--mono); font-size: 11px; line-height: 1.3; }
.pf-data div { display: grid; grid-template-columns: 9.4ch minmax(0, 1fr); gap: 8px; padding: 5px 2px; border-top: 1px dashed rgba(18, 18, 18, .2); transition: opacity .4s; }
.pf-data dt { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(18, 18, 18, .55); padding-top: 1px; white-space: nowrap; }
.pf-data dd { text-wrap: pretty; }
.g-proof.playing .pf-data div:not(.in) { opacity: 0; }
/* 04 · a real business replies (it types in under Raven's feet), you respond, the meeting: centred, dropping down */
.st-card.sky { justify-content: center; align-items: center; }
.g-reply { width: 100%; padding: 16px 18px; transition: opacity .5s var(--ease-out-slow), translate .6s var(--ease-out-slow); }
.pill-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: rgba(18, 18, 18, .62); }
.pill-tag i { width: 8px; height: 8px; border-radius: 50%; background: #1fa45b; }
.r-text { margin-top: 8px; font-size: clamp(17px, 1.35vw, 21px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; }
.r-from { display: block; margin-top: 8px; font-size: 13px; color: rgba(18, 18, 18, .58); }
.r-chain { display: grid; justify-items: center; }
.r-chain > * { transition: opacity .45s var(--ease-out-slow), translate .55s var(--ease-out-slow); }
.r-down { position: relative; width: 2px; height: 24px; margin: 6px 0 14px; background-image: linear-gradient(to bottom, rgba(18, 18, 18, .55) 0 4px, transparent 4px 8px); background-size: 2px 8px; }
.r-down::after { content: "v"; position: absolute; left: 50%; bottom: -13px; translate: -50% 0; font-family: var(--mono); font-size: 13px; line-height: 1; }
.r-you, .r-meet { padding: 9px 16px 10px; border-radius: 14px; text-align: center; max-width: 100%; }
.r-you { background: rgba(255, 255, 255, .66); }
.r-meet { background: var(--ink); color: var(--page); }
.r-you small, .r-meet small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(18, 18, 18, .55); }
.r-meet small { color: var(--lime); }
.r-you span, .r-meet span { display: block; margin-top: 2px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.st-card.sky.playing .r-chain > :not(.in) { opacity: 0; translate: 0 -10px; }

.m-path { display: none; position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.m-path path { fill: none; stroke: rgba(18, 18, 18, .4); stroke-width: 1.6; stroke-dasharray: 4 7; stroke-linecap: round; }
.bird.mini img, .bird.mini.flying img { height: auto; width: 36px; }

/* ── Break: a trio gliding down (one of them is the scout) ───────────────────── */
.break { position: relative; height: clamp(170px, 24vh, 250px); max-width: 1500px; margin: 0 auto; pointer-events: none; }
.break svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.break img { position: absolute; left: 0; top: 0; height: auto; will-change: transform; }
.break path { fill: none; stroke: rgba(18, 18, 18, .34); stroke-width: 1.6; stroke-dasharray: 5 8; stroke-linecap: round; }

/* ── 02 · The system: the rest of the product, one card each ─────────────────── */
#system .head .title { max-width: 16ch; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.bc { position: relative; border-radius: var(--r); background: var(--bg); color: var(--fg, var(--ink)); padding: var(--pad); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bc > .glass, .bc > .log { margin-bottom: 10px; }
.bc h3 { font-size: clamp(21px, 1.7vw, 27px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
.bc p { font-size: 16px; line-height: 1.45; max-width: 44ch; opacity: .82; text-wrap: pretty; }
.bc .more { margin-top: auto; padding-top: 6px; align-self: flex-start; }
#system { padding-top: clamp(80px, 10vh, 118px); padding-bottom: clamp(36px, 5vh, 64px); row-gap: clamp(26px, 3.6vh, 40px); }
.sys { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(20px, 2.6vw, 40px); row-gap: clamp(22px, 3.2vh, 36px); align-items: stretch; }
.sys-lead { align-self: start; }
.sys-lead { grid-column: 1 / -1; }
.sys-lead .title { font-size: clamp(40px, 4.6vw, 76px); max-width: 22ch; }
.b-ledger { padding: clamp(16px, 1.6vw, 24px); gap: 12px; }
.b-ledger > .glass { margin-bottom: 2px; }
.b-ledger .more { align-self: flex-start; }
.sys-panel { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(18px, 2.4vw, 36px); align-content: start; padding: clamp(18px, 2vw, 28px) clamp(18px, 2.2vw, 30px) clamp(8px, 1vw, 14px); border-radius: var(--r); background: var(--sky); }
.sys-panel .perch-at { left: 86%; }
.sys-group { display: grid; align-content: start; min-width: 0; }
.sys-label { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(18, 18, 18, .62); padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1.5px solid rgba(18, 18, 18, .85); }
.sys-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 13px 4px 13px 0; border-bottom: 1px dashed rgba(18, 18, 18, .3); transition: background .2s, padding .35s var(--ease-out-slow); }
.sys-row:last-child { border-bottom: 0; }
.sys-row:hover { padding-left: 8px; background: rgba(255, 255, 255, .32); }
.sys-row .nt { width: 40px; height: 40px; border-radius: 11px; font-size: 12px; }
.sys-panel .nt.ink { --fg: var(--sky); }
.sys-row b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.sys-row small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.3; color: rgba(18, 18, 18, .66); }
.sys-row em { font-style: normal; font-family: var(--mono); font-weight: 500; font-size: 13px; width: 4.6ch; text-align: left; white-space: nowrap; }

/* mini screens inside the cards: mono rows on glass */
.mini { padding: 14px 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.35; }
.mini-h { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(18, 18, 18, .55); }
.mini-h span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 7px 0; border-top: 1px dashed rgba(18, 18, 18, .2); transition: opacity .45s, translate .45s var(--ease-out-slow); }
.mini-r > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-r em { font-style: normal; color: rgba(18, 18, 18, .6); white-space: nowrap; }
.mini-r b { font-weight: 500; white-space: nowrap; min-width: 6.5ch; text-align: right; }
.mini-r.ok em { color: var(--ink); } .mini-r.ok b { background: var(--ink); color: var(--lime); padding: 1px 6px; border-radius: 6px; }
.mini-r.off { color: rgba(18, 18, 18, .5); } .mini-r.off > :first-child { text-decoration: line-through; text-decoration-color: rgba(18, 18, 18, .4); }
.mini-r.quiet { color: rgba(18, 18, 18, .5); }
.mini-t { display: flex; justify-content: space-between; padding-top: 9px; border-top: 1.5px solid var(--ink); font-weight: 500; }
.mini.playing .mini-r:not(.in) { opacity: 0; translate: 0 5px; }
.log { position: relative; z-index: 1; font-family: var(--mono); color: #fff; white-space: pre-wrap; font-size: clamp(13px, 1.05vw, 15.5px); line-height: 1.95; min-height: 14em; }
.log .ok { color: var(--lime); } .log .dim { color: rgba(255, 255, 255, .6); }
/* one form for your details */
.mini.prof .mini-r { grid-template-columns: 10ch minmax(0, 1fr); }
.mini.prof .mini-r em { color: rgba(18, 18, 18, .55); }
.fan { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(18, 18, 18, .86); color: #fff; font-size: 12px; }
.fan b { font-weight: 500; color: var(--lime); }
.ask { display: flex; gap: 10px; align-items: baseline; margin-top: 6px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .7); font-size: 12px; }
.ask i { font-style: normal; font-weight: 700; }
/* A/B: two lines, side by side */
.ab-row { display: grid; grid-template-columns: 2ch minmax(0, 1fr) minmax(90px, 32%) 5ch; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px dashed rgba(18, 18, 18, .2); }
.ab-row q { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -0.015em; quotes: "“" "”"; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-row s { display: block; height: 10px; border-radius: 5px; background: rgba(18, 18, 18, .1); text-decoration: none; overflow: hidden; }
.ab-row s i { display: block; height: 100%; width: var(--v); border-radius: 5px; background: var(--ink); transition: width 1.1s var(--ease-out-slow); }
.mini.playing .ab-row s i { width: 0; }
.ab-row b { font-weight: 500; text-align: right; }
.ab-row.win b { background: var(--ink); color: var(--lime); padding: 1px 6px; border-radius: 6px; }

/* ── 03 · Case study ─────────────────────────────────────────────────────────── */
#case .wrap { position: relative; }
.case { margin-top: clamp(34px, 5vh, 56px); padding: clamp(26px, 3vw, 46px); }   /* room for the sticker that sticks up off the card */
#case .head .title { max-width: 14ch; }
.case .perch-at { left: 60%; }
.case-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.meta { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; }
.case-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 72px); margin-top: clamp(20px, 3vh, 32px); align-items: center; }
/* $3k --> $100k+, each with its word underneath */
.money { display: grid; grid-template-columns: auto auto auto; justify-content: start; align-items: baseline; column-gap: clamp(12px, 1.4vw, 22px); row-gap: 6px; }
.money b { font-size: clamp(44px, 4.8vw, 72px); font-weight: 700; letter-spacing: -0.06em; line-height: .9; white-space: nowrap; }
.money .arrow { font-style: normal; font-family: var(--mono); font-weight: 500; font-size: clamp(22px, 2.3vw, 38px); align-self: center; letter-spacing: -0.06em; white-space: nowrap; translate: 0 -.1em; }
.money small { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.25; }
.big { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 14px; margin-top: clamp(14px, 2.4vh, 24px); }
.big b { font-size: clamp(44px, 4.8vw, 72px); font-weight: 700; letter-spacing: -0.06em; line-height: .9; }
.big span { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25; max-width: 21ch; }
.case-lead .more { margin-top: clamp(18px, 3vh, 30px); }
/* The funnel: centred bands, each narrower, straight sides (Tom: vertical lines, not angled) */
.funnel { display: grid; gap: 6px; justify-items: center; }
.fz { position: relative; width: max(var(--w), 17em); max-width: 100%; min-height: clamp(58px, 6.6vh, 72px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 12px; padding: 0 clamp(18px, 2.2vw, 32px);
  background: var(--ink); color: var(--page); border-radius: 10px; transform-origin: 50% 50%; transition: transform 1s var(--ease-out-slow), opacity .8s; }
.funnel:not(.in) .fz { transform: scaleX(.6); opacity: 0; }
.funnel.in .fz:nth-child(2) { transition-delay: .12s; } .funnel.in .fz:nth-child(3) { transition-delay: .24s; } .funnel.in .fz:nth-child(4) { transition-delay: .36s; }
html.noreveal .funnel .fz { transform: none; opacity: 1; }
.fz b { font-size: clamp(26px, 2.6vw, 42px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.fz span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; color: rgba(244, 239, 232, .75); }
.fz em { font-style: normal; font-family: var(--mono); font-size: 13px; color: rgba(244, 239, 232, .62); }
.fz.hot b { color: var(--lime); }
/* 15×: a plain sticker on the corner (no inset rules) */
.stamp15 { position: absolute; z-index: 3; right: clamp(-28px, -1.6vw, -10px); top: -40px; rotate: 7deg; width: clamp(196px, 16vw, 236px); padding: 16px 20px 18px; border-radius: 16px; background: var(--lime); color: var(--ink);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .5); display: grid; gap: 4px; }
.stamp15 b { font-size: clamp(52px, 4.8vw, 74px); font-weight: 700; letter-spacing: -0.06em; line-height: .9; }
.stamp15 span { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }

/* ── 04 · Plans ──────────────────────────────────────────────────────────────── */
#plans .head .title { max-width: none; }
#plans .sub { max-width: 46ch; color: var(--ink); }
.deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: clamp(26px, 4vh, 44px); padding: 0 8px; }
.pack { position: relative; padding: var(--pad); display: grid; gap: 8px; align-content: start; transform-origin: 50% 100%; transition: transform .6s var(--ease-out-slow); }
.p1 { transform: rotate(-2.6deg) translateX(10px); z-index: 1; }
.p2 { transform: translateY(-8px); z-index: 3; }
.p3 { transform: rotate(2.6deg) translateX(-10px); z-index: 2; box-shadow: 0 40px 80px -40px rgba(15, 102, 254, .7); }
.deck:hover .p1 { transform: rotate(-3.4deg); } .deck:hover .p3 { transform: rotate(3.4deg); }
.sky-band { position: relative; height: clamp(130px, 13vw, 190px); margin: 0 calc(var(--pad) * -1) 6px; overflow: hidden; }
.mb { position: absolute; left: var(--x); top: var(--y); width: var(--w); translate: -50% -50%; animation: bob 4.2s ease-in-out infinite; }
.mb:nth-child(2n) { animation-duration: 5s; animation-delay: -1.2s; } .mb:nth-child(3n) { animation-duration: 4.6s; animation-delay: -2s; }
.mb img { width: 100%; height: auto; }
@keyframes bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, -6px); } }
.env { position: absolute; width: 30%; aspect-ratio: 3 / 2; border-radius: 3px; background: linear-gradient(160deg, rgba(255, 255, 255, .97), rgba(232, 238, 248, .9)); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .9); }
.env::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent 49%, rgba(18, 18, 18, .14) 50%, transparent 52%), linear-gradient(to bottom left, transparent 49%, rgba(18, 18, 18, .14) 50%, transparent 52%); background-size: 100% 60%; background-repeat: no-repeat; }
.env::after { content: ""; position: absolute; left: 50%; top: 52%; width: 24%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #3f8bf5; }
.glide .env.mouth { left: 90%; top: 58%; translate: -18% -30%; rotate: 14deg; }
.glide2 .env.mouth { left: 90%; top: 50%; translate: -18% -30%; rotate: 12deg; }
.legs .env.feet { left: 31%; top: 90%; translate: -50% -22%; rotate: -6deg; }
.pack .tag { justify-self: start; }
.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price b { font-size: clamp(46px, 4.6vw, 76px); font-weight: 700; letter-spacing: -0.05em; line-height: .95; }
.price span { font-family: var(--mono); font-size: 12.5px; opacity: .7; }
.per { font-size: clamp(17px, 1.35vw, 20px); } .per b { font-weight: 700; }
.expect { margin-top: 4px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); font-size: 15px; }
.expect b { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.04em; margin-right: 6px; }
.p3 .price span, .p3 .per, .p3 .expect { color: rgba(255, 255, 255, .92); }
/* A pack is one link into the app (plans/10-checkout.md): the whole card buys it; "Buy" and its arrow say so. */
.pack .buy { justify-self: start; margin-top: 10px; }
a.pack:focus-visible { outline-color: var(--ink); }   /* the blue card's white would vanish on the page */
/* Best value / Save 40%: a plain lime stamp, two lines */
.best { position: absolute; z-index: 4; right: -14px; top: -22px; rotate: 9deg; display: grid; justify-items: center; padding: 10px 16px 12px; border-radius: 14px; background: var(--lime); color: var(--ink); line-height: 1; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .55); }
.best small { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.best b { margin-top: 5px; font-size: 24px; font-weight: 700; letter-spacing: -0.035em; }
#plans .fns { margin-top: clamp(26px, 4vh, 40px); }

/* ── 05 · Start: full bleed, the footer inside (the detail pages end the same way) ── */
.start { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto auto; text-align: center; background: var(--blue); color: #fff; padding: 110px var(--gut) 0; overflow: hidden; }
.start-in { align-self: center; justify-self: center; position: relative; z-index: 2; width: min(var(--wrap), 100%); display: grid; justify-items: center; }
.start .status { position: absolute; right: calc(var(--gut) + 40px); top: 104px; font-family: var(--mono); font-size: 13px; text-transform: uppercase; white-space: pre; text-align: left; }
.start-h { font-size: clamp(60px, 9vw, 160px); font-weight: 700; letter-spacing: -0.06em; line-height: .9; }
.start-sub { margin-top: 16px; font-size: clamp(19px, 1.5vw, 23px); color: rgba(255, 255, 255, .86); }
.start .fns { justify-items: center; text-align: center; }
.start-in > .fns { margin-top: clamp(84px, 11vh, 112px); }   /* below the plus signs, never on them */
.signup-zone { position: relative; width: min(100%, 600px); margin: clamp(120px, 15vh, 160px) auto 0; }
/* behind the form: Tom's plus signs, fading out from the middle (not dots) */
.plus-field { position: absolute; z-index: 0; left: 50%; top: 50%; translate: -50% -50%; font-family: var(--mono); font-size: 15px; line-height: 1.6; letter-spacing: .5em; color: rgba(255, 255, 255, .55); white-space: pre; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); }
.signup { position: relative; z-index: 2; display: flex; gap: 8px; padding: 9px; border-radius: 20px; text-align: left; }
.perch-fixed { position: absolute; z-index: 3; left: 82%; bottom: calc(100% - 10px); translate: -50% 0; }
.perch-fixed img { height: clamp(96px, 9vw, 128px); width: auto; }
.signup label { flex: 1; display: flex; min-width: 0; }
.signup input { flex: 1; min-width: 0; height: 58px; padding: 0 18px; border: 0; border-radius: 13px; background: rgba(255, 255, 255, .62); font: inherit; font-size: 18px; color: var(--ink); }
.signup input::placeholder { color: rgba(18, 18, 18, .42); }
.signup input:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.signup .cta { flex: none; }
.signup.solo { width: min(100%, 460px); margin: 0 auto; padding: 10px; }
.signup.solo .cta { flex: none; width: 100%; justify-content: center; height: 66px; font-size: 19px; }
.start .fn { color: rgba(255, 255, 255, .74); }
/* The footer: Stripe's columns, small, in mono */
.foot { width: min(var(--wrap), 100%); justify-self: center; margin-top: 64px; padding: 34px 0 30px; border-top: 1px solid rgba(255, 255, 255, .24); text-align: left; font-family: var(--mono); font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.foot-cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px; }
.foot-cols p { margin-bottom: 10px; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: rgba(255, 255, 255, .6); }
.foot-cols a { display: block; padding: 3px 0; color: #fff; }
.foot-cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-brand b { display: block; font-family: var(--sans); font-size: 30px; font-weight: 700; letter-spacing: -0.06em; color: #fff; line-height: 1; }
.foot-brand span { display: block; margin-top: 10px; max-width: 28ch; line-height: 1.5; }
.giant-stage { position: relative; z-index: 1; justify-self: stretch; margin: clamp(10px, 2vh, 24px) calc(-1 * var(--gut)) 0; overflow: hidden; pointer-events: none; }
.giant { display: block; font-weight: 700; font-size: clamp(140px, 36vw, 640px); line-height: .74; letter-spacing: -0.06em; text-align: center; color: #fff; transform: translateY(100%); transition: transform 1.4s var(--ease-out-slow); }
.giant-stage.in .giant, html.noreveal .giant, html.still .giant { transform: none; }
.foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 34px; color: rgba(255, 255, 255, .62); }

.switch { position: fixed; z-index: 70; left: 18px; bottom: 18px; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(18, 18, 18, .88); color: #fff; font-size: 13px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.switch.away { opacity: 0; pointer-events: none; }
.switch { transition: opacity .4s; }
.switch button { padding: 8px 14px; border-radius: 999px; color: rgba(255, 255, 255, .7); }
.switch button.on { background: #fff; color: var(--ink); }
.switch kbd { font-family: var(--mono); font-size: 11px; margin-right: 6px; opacity: .6; }

/* ── Narrow windows: the links fold into Menu ────────────────────────────────── */
@media (max-width: 980px) {
  .links, .acts, .np, .nav-veil, .side { display: none; }   /* the side line would sit on the content's edge here */
  html { scrollbar-width: auto; } html::-webkit-scrollbar { display: initial; }
  .menu-btn { display: inline-flex; }
  .pill { width: min(520px, calc(100% - 32px)); padding-right: 7px; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); row-gap: 40px; }
  .sys { grid-template-columns: minmax(0, 1fr); }
  .sys-lead .title { max-width: 16ch; }
}

/* ── Phone ──────────────────────────────────────────────────────────────────── */
@media (max-width: 734px) {
  :root { --pad: 22px; }
  .pill { top: 10px; height: 52px; padding-left: 20px; } .mark { font-size: 24px; } .menu-btn { height: 40px; padding: 0 18px; font-size: 14px; }
  .menu { padding-top: 76px; }
  .side { display: none; }
  html { scrollbar-width: auto; } html::-webkit-scrollbar { display: initial; }
  .bird img { height: 84px; } .bird.flying img { width: 120px; }
  .stage { width: min(78vw, 330px); }
  .t-blue { left: -18%; } .t-pink { right: -16%; } .t-lime { left: -12%; }
  /* phones: one column, the word first and huge, then the form, the line and the button */
  .hero-in, body[data-hero="left"] .hero-in { grid-template-columns: 1fr; grid-template-areas: "word" "stage" "cta"; justify-items: center; row-gap: 16px; }
  body[data-hero="left"] .stage { justify-self: center; align-self: auto; margin-top: clamp(96px, 14vh, 130px); }
  body[data-hero="left"] .spill { display: block; }
  body[data-hero="left"] .line, body[data-hero="left"] .bullets { display: none; }
  body[data-hero="left"] .cta-row { justify-content: center; }
  .word, body[data-hero="left"] .word { font-size: clamp(104px, 33vw, 170px); line-height: .8; }
  .spill { width: 100%; margin-left: 0; font-size: 22px; }
  .scroll-cue { position: relative; left: auto; bottom: auto; translate: none; justify-self: center; grid-column: 1; margin-top: 6px; }
  .cta { height: 54px; padding-left: 20px; font-size: 16px; }
  .screen { min-height: 0; padding: 90px 0 40px; }
  /* How it works on phones: a small card, its words to the right; Raven rides a dotted arc between the cards */
  .flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 34px; }
  .st { grid-row: auto; grid-template-rows: auto auto 1fr; grid-template-columns: 44% minmax(0, 1fr); grid-template-areas: "card title" "card desc" "card more"; column-gap: 50px; align-items: start; }   /* the gap is Raven's lane */
  .st-card { grid-area: card; min-height: 214px; padding: 48px 10px 10px; }
  .st-card > .glass, .st-card > .r-chain { zoom: .5; }
  .st-n { left: 12px; top: 10px; font-size: 28px; }
  .st-n::before { inset: -5px -9px -6px; border-radius: 10px; }
  .st.on .st-card::before { inset: -5px; border-radius: calc(var(--r) + 5px); }
  .st-title { grid-area: title; max-width: none; align-self: start; margin: 2px 0 8px; font-size: 18px; line-height: 1.12; }
  .st-desc { grid-area: desc; margin-top: 0; font-size: 14px; line-height: 1.42; }
  .st .more-x { display: none; }   /* on phones the step buttons just say "Learn more" (the label keeps the topic) */
  .st .more { grid-area: more; margin-top: 12px; min-height: 34px; padding: 6px 8px 6px 12px; font-size: 13px; }
  /* the system on phones: the bill, then the panel, its groups one above the other */
  .sys-panel { grid-template-columns: minmax(0, 1fr); row-gap: 18px; padding: 16px 16px 6px; }
  .sys-row { padding: 10px 0; column-gap: 12px; grid-template-columns: 36px minmax(0, 1fr) auto; }
  .sys-row .nt { width: 36px; height: 36px; } .sys-row b { font-size: 16px; } .sys-row small { font-size: 13px; }
  .b-ledger .mini { padding: 10px 12px; font-size: 11.5px; } .b-ledger .mini-r { padding: 5px 0; }
  .bento > .bc { grid-column: span 12; }
  .log { font-size: 12px; min-height: 0; }
  .ab-row { grid-template-columns: 2ch minmax(0, 1fr) 5ch; } .ab-row s { grid-column: 2 / span 2; grid-row: 2; }
  .case-body { grid-template-columns: minmax(0, 1fr); }
  .case { margin-top: 44px; padding: 20px 18px 22px; }
  .stamp15 { right: 10px; top: -44px; width: 146px; padding: 10px 12px 12px; rotate: 6deg; }
  .stamp15 b { font-size: 40px; } .stamp15 span { font-size: 13px; }
  .case-top { min-height: 34px; padding-right: 150px; }   /* clear of the sticker: the words wrap before it, the dollars start below it */
  .case-body { margin-top: 16px; gap: 22px; }
  .big { margin-top: 10px; }
  .fz { min-height: 46px; padding: 0 14px; } .fz b { font-size: 22px; } .fz span { font-size: 10.5px; }
  /* plans on phones: the three packs side by side */
  .deck { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0; }
  .p1, .p2, .p3 { transform: none; }
  .pack { padding: 12px 9px 14px; gap: 6px; border-radius: 16px; }
  .sky-band { height: 58px; margin: 0 -9px 2px; }
  .pack .tag { font-size: 13px; }
  .price { display: grid; gap: 2px; } .price b { font-size: 25px; } .price span { font-size: 10px; }
  .per { font-size: 12px; } .expect { margin-top: 2px; padding-top: 8px; font-size: 11px; } .expect b { display: block; font-size: 17px; margin: 0 0 2px; }
  .pack .buy { margin-top: 4px; min-height: 30px; padding: 4px 6px 4px 10px; gap: 4px; font-size: 12.5px; border-width: 1.25px; } .pack .buy i { font-size: 11px; }
  .best { right: -4px; top: -18px; padding: 6px 8px 7px; border-radius: 10px; rotate: 6deg; } .best small { font-size: 7.5px; } .best b { font-size: 13px; margin-top: 2px; }
  .best + .tag { margin-top: 22px; }   /* a card with no birds above its name (the Pricing page): room for the stamp */
  .giant { font-size: clamp(120px, 37.5vw, 300px); }
  .break { height: 150px; }
  .start-h { font-size: clamp(54px, 15vw, 80px); }
  .start .status { display: none; }
  .foot-cols { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; }
  .switch { display: none; }
}
@media (max-width: 480px) { .signup { flex-direction: column; } .signup .cta { justify-content: center; } .money { column-gap: 10px; } .money b, .big b { font-size: clamp(42px, 12.2vw, 56px); } }

html.still *, html.still *::before, html.still *::after { transition: none !important; animation: none !important; }
html.still .funnel .fz { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
}