/* ═══════════════════════════════════════════════════════════════
   bgft — THE READING PAGES, street language · VINYL FINISH (session 81, 2026-09-03)
   how-it-works.html + pricing.html share this file.
   Session seven, 2026-08-21. Replaces the Paper OS pages.css.
   The finish pass DEV-HANDOFF-VINYL.md §9 asked for: ONE bone material,
   soft molded shadows where the 2px borders and hard offset shadows
   were, ink pill keys, wells where content sits in. The square poster
   cards keep their geometry, in the new finish. Then the owner rounded
   them (2026-09-03): plane 20, tile 16, the app's own radii; the site is
   round now too.

   THE LANDING STAYS SELF CONTAINED. It is a different kind of page
   and must never be dragged along by an edit to a reading page.

   WHAT THIS FILE INHERITS FROM THE LOCKED LANDING, deliberately:
   · the ticker, the nav, the wordmark at size, the red key
   · SQUARE CARDS. The app is round (tokens: 20 / 16 / 999) and the
     site is not. The landing's cards have no radius at all, and its
     round things are the disc, the faces and the pips. That is the
     site's volume: poster, not interface. "Never square the round
     things" means do not take a pill and square it. These cards were
     never round.
   · the grain, the day and night toggle, ?night=1

   WHAT IT DOES DIFFERENTLY, and why:
   · IT SCROLLS AND IT KEEPS THE NORMAL CURSOR. The landing has four
     seconds and hides the cursor. Hiding the cursor on a page
     somebody came to read is a cost with no return.
   · THE TICKER SCROLLS AWAY, THE NAV STICKS. 118px of permanent
     chrome is too much on a page you read. The ticker is an opening
     flourish; the nav is the chrome that has to stay reachable.
   · NO ROAMING COMPANION. He appears once, at the closing, peeking
     up from his red disc. He is the payoff for scrolling, never a
     decoration sitting on the text.

   THE FIVE LAWS, as they land here:
   01 round is the language, hard is the finish
   02 only the floating layer is outlined and shadowed
   03 bold in shape and type, restrained in colour area
   04 no studio is red, RED MEANS YOU
   05 the floating layer never overlaps content
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* VINYL: one material. --paper is kept as a NAME so nothing breaks, but it IS the bone. */
  --bone:#eceae3; --paper:#eceae3; --ink:#0d0d0f;
  --red:#ff4d3d;
  --line:#0d0d0f;
  --hair:rgba(13,13,15,.12);
  --wash:rgba(13,13,15,.05);
  --soft:rgba(13,13,15,.56);
  --tickfg:#f0ede4;
  /* the vinyl finish */
  --mold:7px 7px 14px rgba(13,13,15,.11), -7px -7px 14px rgba(255,255,255,.85);
  --mold-float:7px 7px 14px rgba(13,13,15,.17), -6px -6px 12px rgba(255,255,255,.7);
  --well:inset 3px 3px 7px rgba(13,13,15,.10), inset -3px -3px 7px rgba(255,255,255,.8);
  --well-shallow:inset 2px 2px 4px rgba(13,13,15,.12);
  --track:rgba(13,13,15,.09);
  --keysh:4px 4px 9px rgba(13,13,15,.2);

  /* the studio inks, full saturation, small surface area */
  --jade:#00b98a;
  --violet:#8b3dff;
  --cobalt:#2b52ff;
  --hotpink:#ff5fa2;
  --acid:#ffd400;

  --disp:'Archivo',system-ui,sans-serif;
  --body:'Archivo',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --numtrack:-.042em; --numwdth:108;

  --acc:var(--jade);          /* per-step, set inline on the section */
  --onacc:#0d0d0f;            /* what sits legibly ON that ink */
}

/* the site's night is darker than the app's on purpose: a poster is
   never scrolled at 6am. */
body.night{
  --bone:#17171c; --paper:#17171c; --ink:#f0ede4;
  --line:#f0ede4; --hair:rgba(240,237,228,.14);
  --wash:rgba(240,237,228,.07);
  --soft:rgba(240,237,228,.58);
  --tickfg:#0d0d0f;
  --mold:7px 7px 14px rgba(0,0,0,.55), -6px -6px 12px rgba(255,255,255,.04);
  --mold-float:8px 8px 16px rgba(0,0,0,.6), -6px -6px 12px rgba(255,255,255,.05);
  --well:inset 3px 3px 7px rgba(0,0,0,.55), inset -3px -3px 7px rgba(255,255,255,.04);
  --well-shallow:inset 2px 2px 4px rgba(0,0,0,.6);
  --track:rgba(255,255,255,.07);
  --keysh:4px 4px 9px rgba(0,0,0,.5);
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--bone);color:var(--ink);
  font-family:var(--body);font-weight:500;
  -webkit-font-smoothing:antialiased;
  transition:background .45s ease,color .45s ease;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none;padding:0}
button{font:inherit;color:inherit}

.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.3;
  background-image:radial-gradient(rgba(13,13,15,.10) .8px,transparent 1.1px);background-size:5px 5px}
body.night .grain{background-image:radial-gradient(rgba(240,237,228,.09) .8px,transparent 1.1px)}

.wrap{width:min(1180px,92vw);margin:0 auto}

/* ── the ticker: vibe only, zero claims ───────────────────────
   Same law as the landing. Nothing in here may make a product
   claim, which is why it needs no copy approval. */
.ticker{position:relative;z-index:5;overflow:hidden;
  background:var(--ink);color:var(--tickfg)}
.ticker .run{display:inline-flex;white-space:nowrap;font-family:var(--disp);font-weight:900;
  font-size:11px;letter-spacing:.10em;text-transform:uppercase;padding:8px 0;animation:run 88s linear infinite}
.ticker .run span{padding:0 16px}
.ticker .run b{color:var(--red);padding:0 2px}
@keyframes run{to{transform:translateX(-50%)}}

/* ── the nav, sticky ──────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:18px;
  padding:11px clamp(16px,3.4vw,48px);
  border-bottom:1px solid var(--hair);background:var(--bone)}
.wm{height:clamp(40px,3.5vw,56px);width:auto;flex:none}
body.night .wm{filter:invert(1)}
.nav .lk{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;opacity:.6;padding-bottom:2px;transition:opacity .14s}
.nav .lk:first-of-type{margin-left:20px}
.nav .lk:hover{opacity:1}
.nav .lk.on{opacity:1;box-shadow:0 2px 0 var(--ink)}

/* THE KEY. Red, and on these pages red has exactly one job. */
.key{font-family:var(--disp);font-weight:900;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;background:var(--red);color:#fff;border:0;border-radius:999px;
  box-shadow:var(--keysh);padding:12px 22px;white-space:nowrap;transition:transform .12s,box-shadow .12s;margin-left:auto}
.key:hover{transform:translateY(-1px);box-shadow:5px 6px 12px rgba(13,13,15,.24)}
body.night .key{color:#0d0d0f}

/* ── type ─────────────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;opacity:.6;margin-bottom:18px}
.eyebrow b{width:9px;height:9px;border-radius:999px;background:var(--acc);display:block;flex:none}

/* 5.5vw, not 6.4: at the larger size the h1's own line breaks fought
   the authored <br> and stranded a one-word line. */
h1{font-family:var(--disp);font-weight:900;
  font-size:clamp(36px,5.5vw,80px);line-height:.96;
  letter-spacing:var(--numtrack);font-variation-settings:'wdth' var(--numwdth);
  text-transform:lowercase}
h2{font-family:var(--disp);font-weight:900;
  font-size:clamp(27px,3.1vw,44px);line-height:1.04;
  letter-spacing:-.034em;font-variation-settings:'wdth' 104;
  text-transform:lowercase}
h3{font-family:var(--disp);font-weight:900;font-size:20px;letter-spacing:-.02em;
  font-variation-settings:'wdth' 104;text-transform:lowercase}
.sp{color:var(--acc)}

.sub{margin-top:20px;max-width:60ch;font-size:clamp(15px,1.25vw,18px);
  line-height:1.6;opacity:.72}
.lede{margin-top:16px;max-width:66ch;font-size:clamp(14.5px,1.15vw,17px);line-height:1.62;opacity:.72}

.cue{margin-top:36px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;opacity:.45}
.cue span{font-size:14px;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

.intro{padding:clamp(46px,9vh,104px) 0 clamp(30px,5vh,54px)}

/* ── the steps ────────────────────────────────────────────── */
.step{padding:clamp(38px,6.5vh,78px) 0}
.step + .step{border-top:1px solid var(--hair)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,68px);align-items:start}
.step.flip .grid > *:first-child{order:2}

/* THE NUMERAL IS WHERE THE ACCENT SPENDS ITSELF.
   Big, saturated, and type rather than surface: law 03 exactly. */
.num{font-family:var(--disp);font-weight:900;font-size:clamp(54px,6.4vw,92px);
  line-height:.8;letter-spacing:-.05em;font-variation-settings:'wdth' 112;
  color:var(--acc);margin-bottom:16px}

.step h2{margin-bottom:18px;max-width:20ch}
.step p{font-size:clamp(14.5px,1.12vw,16.5px);line-height:1.62;opacity:.72;max-width:52ch}
.step p + p{margin-top:14px}
.step p b{font-weight:800;opacity:1}

.bigline{margin-top:24px;font-family:var(--disp);font-weight:900;
  font-size:clamp(20px,1.9vw,27px);line-height:1.2;letter-spacing:-.028em;
  font-variation-settings:'wdth' 104;text-transform:lowercase;max-width:19ch}

/* ── THE ART CARD ─────────────────────────────────────────────
   This is the floating layer, so it is the ONLY thing here that is
   outlined and shadowed. Everything inside it is a wash on the
   plane with neither. */
.art{background:var(--paper);border:0;border-radius:20px;overflow:hidden;box-shadow:var(--mold)}
.ah{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--hair)}
.ah .k,.k{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;opacity:.55}
.ah .st{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:var(--acc);color:var(--onacc);padding:4px 9px;
  border-radius:999px;white-space:nowrap;opacity:1}
.ab{padding:17px 16px 16px}

.at{font-family:var(--disp);font-weight:900;font-size:26px;letter-spacing:-.03em;
  font-variation-settings:'wdth' 104;text-transform:lowercase;line-height:1.15}
.as{font-size:13px;opacity:.6;margin-top:5px;line-height:1.5}

/* the week strip. round pips, because a pip is a round thing. */
.week{display:flex;gap:6px;margin-top:16px}
.week i{flex:1;height:30px;border-radius:999px;background:var(--bone);box-shadow:var(--well-shallow);
  display:grid;place-items:center;font-family:var(--mono);font-size:9.5px;font-weight:700;
  opacity:.5;font-style:normal}
.week i.on{background:var(--acc);color:var(--onacc);opacity:1;box-shadow:none}
.week i.hard{background:var(--ink);color:var(--bone);opacity:1;box-shadow:none}

.rows{margin-top:15px}
.rows div{display:flex;gap:12px;align-items:baseline;padding:9px 0;font-size:13px;line-height:1.45;
  border-top:1px solid var(--hair)}
.rows div:first-child{border-top:0}
.rows span{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;opacity:.5;flex:none;width:34px}

.af{margin-top:16px;padding-top:13px;border-top:1px solid var(--hair);
  font-size:12.5px;line-height:1.5;opacity:.6}

/* 02: the memory list and the arc */
.mem div{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:13px;line-height:1.45;
  border-top:1px solid var(--hair)}
.mem div:first-child{border-top:0}
.mem i{width:9px;height:9px;border-radius:999px;background:var(--acc);flex:none;margin-top:5px;display:block}

.arc{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:18px}
.arc div{background:var(--bone);box-shadow:var(--well);padding:12px 11px;border-radius:14px}
.arc div.now{background:var(--acc);color:var(--onacc);box-shadow:none}
.arc b{display:block;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;opacity:.6;margin-bottom:6px}
.arc div.now b{opacity:.75}
.arc p{font-size:11.5px;line-height:1.42;opacity:.75}
.arc div.now p{opacity:.95}

/* 03: the drafted document */
.doc{background:var(--bone);box-shadow:var(--well);border-radius:14px;padding:15px 16px;font-size:13.5px;line-height:1.62}
/* both values already invert, so there is no night override to write */
.doc em{font-style:normal;font-weight:800;box-shadow:inset 0 -8px 0 var(--acc);
  color:var(--ink);padding:0 1px}
.needs{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.need{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:var(--bone);box-shadow:var(--well-shallow);padding:6px 11px;border-radius:999px;opacity:.7}
.need.you{background:var(--acc);color:var(--onacc);opacity:1;box-shadow:none}

.log{margin-top:9px}
.log div{display:flex;gap:12px;align-items:baseline;padding:8px 0;font-size:12.5px;line-height:1.45;
  border-top:1px solid var(--hair)}
.log div:first-child{border-top:0}
.log span{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;opacity:.5;flex:none;width:52px}

/* 04: the three channels */
.chan3{display:grid;grid-template-columns:1fr 1fr 1fr}
.chan3 > div{padding:18px 15px 20px;border-right:1px solid var(--hair)}
.chan3 > div:last-child{border-right:0}
.chan3 i{width:22px;height:22px;border-radius:999px;background:var(--acc);display:block;margin-bottom:12px}
.chan3 b{display:block;font-family:var(--disp);font-weight:900;font-size:17px;letter-spacing:-.02em;
  text-transform:lowercase;margin-bottom:7px}
.chan3 p{font-size:12px;line-height:1.45;opacity:.65}

/* 05: permissions, and the switch */
.ctrlrow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 13px;background:var(--bone);box-shadow:var(--well);border-radius:14px;font-size:13.5px;font-weight:600}
.ctrlrow + .ctrlrow{margin-top:7px}
.sw{width:44px;height:25px;border-radius:999px;background:var(--acc);position:relative;flex:none;display:block}
.sw::after{content:'';position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:999px;
  background:var(--paper);box-shadow:2px 2px 5px rgba(13,13,15,.2)}
.sw.off{background:rgba(13,13,15,.18)}
body.night .sw.off{background:rgba(240,237,228,.2)}
.sw.off::after{right:auto;left:3px}

/* THE KILL SWITCH IS WEIGHT, NOT HUE.
   The old page made this the one permitted second red. Red now means
   you and only you, so the emergency signal comes from being the
   heaviest, hardest block on the page instead. */
.kill{margin-top:16px;display:flex;align-items:center;gap:11px;border-radius:14px;
  background:var(--ink);color:var(--bone);padding:14px 15px;
  font-family:var(--disp);font-weight:900;font-size:13px;letter-spacing:.01em;
  text-transform:lowercase}
.kill i{width:13px;height:13px;background:var(--bone);flex:none;display:block;font-style:normal}

/* ── the capability strip ─────────────────────────────────── */
.capstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin-top:clamp(28px,4.4vh,48px)}
.cap{background:var(--paper);box-shadow:var(--mold);border-radius:16px;overflow:hidden;padding:15px 14px 16px;border-top:5px solid var(--acc)}
.cap b{display:block;font-family:var(--disp);font-weight:900;font-size:15.5px;letter-spacing:-.02em;
  text-transform:lowercase;margin:7px 0 6px;line-height:1.2}
.cap p{font-size:11.5px;line-height:1.45;opacity:.65}

/* ── pricing: the plans ───────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.plan{position:relative;background:var(--paper);border:0;border-radius:20px;
  box-shadow:var(--mold);padding:24px 22px 22px;display:flex;flex-direction:column}
.plan.pick{background:var(--ink);color:var(--bone);box-shadow:var(--mold-float)}
.plan.pick .k{opacity:.6}
.badge{position:absolute;top:-13px;left:22px;font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;background:var(--acc);color:var(--onacc);
  border:0;box-shadow:3px 3px 7px rgba(13,13,15,.18);padding:6px 12px;border-radius:999px}
.price{font-family:var(--disp);font-weight:900;font-size:clamp(46px,4.6vw,66px);line-height:.92;
  letter-spacing:-.05em;font-variation-settings:'wdth' 110;margin:12px 0 4px}
.price.word{font-size:clamp(28px,2.7vw,38px);letter-spacing:-.035em}
.per{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;opacity:.5;margin-bottom:20px}
.plan ul{display:flex;flex-direction:column;gap:11px;flex:1}
.plan li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.45}
.plan li i{width:9px;height:9px;border-radius:999px;background:var(--acc);flex:none;margin-top:5px;display:block}
.plan li.off i{background:transparent;box-shadow:inset 0 0 0 2px currentColor;opacity:.4}
.soon{margin-top:22px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;opacity:.45;border-top:1px solid var(--hair);padding-top:14px}
/* currentColor, not a literal. The picked plan is painted on an
   INVERTING plane: its background is --ink and its text is --bone, so
   in night it flips to a bone card. A hardcoded bone divider vanished
   on it completely. Anything drawn on an inverting plane has to be
   drawn in a value that inverts with it. */
.plan.pick .soon{border-color:currentColor}

.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:clamp(18px,2.6vh,30px)}
.note{background:var(--paper);box-shadow:var(--mold);border-radius:16px;overflow:hidden;padding:15px 15px 17px;border-top:5px solid var(--acc)}
.note b{display:block;font-family:var(--disp);font-weight:900;font-size:15px;letter-spacing:-.02em;
  text-transform:lowercase;margin:7px 0 6px;line-height:1.25}
.note p{font-size:12px;line-height:1.5;opacity:.65}

/* ── pricing: what counts as a job ────────────────────────── */
.sec{padding:clamp(38px,6.5vh,78px) 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px);margin-top:clamp(24px,3.4vh,38px)}
.jc{background:var(--paper);border:0;border-radius:20px;box-shadow:var(--mold);
  padding:22px 21px}
.jc h3{margin:8px 0 16px}
.jc ul{display:flex;flex-direction:column;gap:11px}
.jc li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.48}
.jc li i{width:9px;height:9px;border-radius:999px;background:var(--acc);flex:none;margin-top:5px;display:block}
.jc.no li i{background:transparent;box-shadow:inset 0 0 0 2px currentColor;opacity:.32}
.jc.no{box-shadow:var(--well)}
.after{margin-top:20px;font-size:13px;line-height:1.55;opacity:.6;max-width:62ch}

/* ── pricing: the questions ───────────────────────────────── */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:clamp(24px,3.4vh,38px)}
.q{background:var(--paper);box-shadow:var(--mold);border-radius:16px;overflow:hidden;padding:17px 17px 18px;border-left:5px solid var(--acc)}
.q b{display:block;font-family:var(--disp);font-weight:900;font-size:15px;letter-spacing:-.02em;
  line-height:1.28;margin-bottom:8px}
.q p{font-size:12.5px;line-height:1.55;opacity:.68}

.disc{text-align:center;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;opacity:.35;padding:0 0 clamp(30px,5vh,54px)}

/* ── THE CLOSING, and the one place he appears ────────────────
   He is cropped by the section, on his disc, exactly as on the
   landing. In flow rather than fixed, so he can never overlap
   anything somebody is reading. Law 05. */
/* --acc goes on the SECTION, not on the eyebrow. Setting it on the
   eyebrow alone left the number's coloured half inheriting jade from
   :root, which is the studio ink standing in for the one colour that
   is not a studio ink. Red means you, and the closing is the place
   you are being asked to show up. */
.end{--acc:var(--red);--onacc:#ffffff;
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(52px,9vh,104px) 0 0;border-top:1px solid var(--hair);margin-top:clamp(20px,4vh,44px)}
.end h2{font-size:clamp(34px,5.4vw,74px);line-height:.98;letter-spacing:-.04em;
  font-variation-settings:'wdth' 108}
.endsub{margin-top:18px;font-size:clamp(14.5px,1.2vw,17px);opacity:.66}

/* the number as the closing hero, the landing's own ending reused.
   HEY·BGFT and 439·2438 are both eight characters, so the hover swap
   costs no reflow here either. */
.endnum{display:block;margin-top:8px;font-family:var(--disp);font-weight:900;
  font-size:clamp(28px,5.8vw,82px);line-height:.9;letter-spacing:var(--numtrack);
  font-variation-settings:'wdth' var(--numwdth);white-space:nowrap}
.endnum .sp{transition:opacity .16s ease}
.endnum:hover .sp{opacity:.9}
.mnote{margin-top:18px;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;opacity:.45;line-height:1.7}
.ctas{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:16px;
  position:relative;z-index:3}
.keybig{font-family:var(--disp);font-weight:900;font-size:clamp(14px,1.35vw,17px);letter-spacing:.03em;
  text-transform:uppercase;background:var(--red);color:#fff;border:0;border-radius:999px;
  box-shadow:var(--keysh);padding:18px 32px;transition:transform .12s,box-shadow .12s}
.keybig:hover{transform:translateY(-1px);box-shadow:6px 7px 14px rgba(13,13,15,.26)}
body.night .keybig{color:#0d0d0f}
.numkey{font-family:var(--disp);font-weight:900;font-size:clamp(17px,2vw,26px);
  letter-spacing:var(--numtrack);font-variation-settings:'wdth' var(--numwdth);opacity:.5;
  transition:opacity .14s}
.numkey:hover{opacity:1}

/* THE DISC AND THE FIGURE.
   `--crop` is the window he is seen through, and everything else is
   derived from it, so the crop can never drift out of proportion:
   he is 1.75 times the window, top aligned, which shows the same
   ~57% of him the landing shows. The disc starts a little lower so
   his head clears its top edge, exactly as it does on the landing.

   overflow:hidden ON THE WINDOW is what makes this safe. An earlier
   pass positioned the disc from the section's bottom instead, and a
   760px circle in a 189px window reached 382px back UP the page and
   painted straight over the number and the key. Law 05: the
   floating layer never overlaps content. Clip it, do not trust the
   arithmetic. */
.endhim{--crop:clamp(160px,22vh,250px);
  position:relative;height:var(--crop);overflow:hidden;
  margin-top:clamp(26px,4vh,44px)}
.enddisc{position:absolute;left:50%;top:calc(var(--crop) * .22);
  width:min(92vw,720px);aspect-ratio:1;border-radius:999px;background:var(--red);
  transform:translateX(-50%);z-index:1}
.endfig{position:absolute;left:50%;top:0;
  height:calc(var(--crop) * 1.75);width:auto;max-width:none;
  transform:translateX(-50%);z-index:2}

/* ── the foot ─────────────────────────────────────────────── */
/* the right padding clears the day and night toggle, which is fixed
   at right:14px and 44px wide. Without it the toggle lands on top of
   the phone number, which is the one link in the footer that matters. */
.foot{position:relative;z-index:4;display:flex;align-items:center;flex-wrap:wrap;gap:18px;
  padding:20px 76px 20px clamp(16px,3.4vw,48px);
  background:var(--ink)}
/* THE FOOTER IS DARK IN BOTH MODES, so its wordmark is knocked out in
   both. It needs saying explicitly, because the nav's night rule
   (body.night .wm) also reaches this wordmark, and an earlier pass
   cancelled it here and put a black mark on a near-black footer. */
.foot .wm{height:38px;filter:invert(1)}
body.night .foot{background:var(--paper)}
body.night .foot .wm{filter:invert(1)}
.foot .fl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tickfg);opacity:.55;transition:opacity .14s}
body.night .foot .fl{color:var(--ink)}
.foot .fl:hover{opacity:1}
.foot .fl:first-of-type{margin-left:14px}
.foot .fl:last-child{margin-left:auto;opacity:.85}

/* ── the toggle ───────────────────────────────────────────── */
.daynight{position:fixed;right:14px;bottom:14px;z-index:80;
  width:44px;height:44px;border-radius:999px;background:var(--paper);
  border:0;box-shadow:var(--mold-float);
  display:grid;place-items:center;font-size:16px;cursor:pointer;line-height:1}

/* ── reveal ───────────────────────────────────────────────── */
.rev{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1)}
.rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .ticker .run{animation:none}
  .cue span{animation:none}
  html{scroll-behavior:auto}
}

/* ── narrower ─────────────────────────────────────────────── */
@media(max-width:1020px){
  .capstrip{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:1fr;gap:26px}
  .badge{top:-13px}
  .notes{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
}
@media(max-width:820px){
  .nav{gap:12px;padding:10px 16px}
  .nav .lk{display:none}
  .wm{height:clamp(38px,11vw,50px)}
  .key{font-size:11px;padding:10px 15px}

  .grid{grid-template-columns:1fr;gap:26px}
  .step.flip .grid > *:first-child{order:0}
  .step h2{max-width:none}
  .step p{max-width:none}
  .two{grid-template-columns:1fr}
  .chan3{grid-template-columns:1fr}
  .chan3 > div{border-right:0;border-bottom:2px solid var(--hair)}
  .chan3 > div:last-child{border-bottom:0}
  .arc{grid-template-columns:1fr}
  .foot .fl:last-child{margin-left:0}
}
@media(max-width:520px){
  .capstrip{grid-template-columns:1fr}
  .art{box-shadow:var(--mold)}
  .plan,.jc{box-shadow:var(--mold)}
  .endhim{height:clamp(120px,17vh,170px)}
}