/* ══ VELOCITY FOR WINNERS — theme ═════════════════════════════════════
   Ported from the Friendly Counseling build, which is itself the Wycoff
   reference (its CSS still carries "Wycoff's thin-rule button"). What
   comes across: Archivo/Overpass, pill buttons with a solid bottom edge,
   thin-rule uppercase secondaries, a sticky blurred nav, small radii
   against big pills. What stays CJ's: the gold, sampled from his mark. */
:root{
  --ink:#14120B;
  --surface:#F5F2EA;          /* the counseling warm cream, not my old off-white */
  --card:#FDFCF9;
  --accent:#E0B038;           /* CJ's logo gold, hsl(40 73% 55%) */
  --muted:#66604F;
  --line:rgba(20,18,11,.13);

  /* Derived from --accent, same hue (40), pulled pale: the ground for the
     free-tools zone so the two calculators read as one group rather than two
     unrelated sections. Muted body text measures 5.0:1 on it. */
  --tint:#F7EBD4;

  --accent-hi:#F0C858;
  --accent-dk:#A87018;
  --accent-text:#7A5209;
  --ink-soft:#241F12;

  --disp:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'Overpass',system-ui,-apple-system,sans-serif;

  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s24:24px; --s32:32px;
  --s48:48px; --s64:64px; --s96:96px; --s128:128px; --s160:160px; --s192:192px;

  --r-sm:6px; --r-md:12px; --r-pill:999px;

  --shadow:0 1px 2px rgba(20,18,11,.04),0 4px 10px -2px rgba(20,18,11,.05),
           0 16px 32px -12px rgba(20,18,11,.07);
  --shadow-lg:0 1px 2px rgba(20,18,11,.04),0 8px 18px -4px rgba(20,18,11,.06),
              0 30px 60px -24px rgba(20,18,11,.08);
}
*{box-sizing:border-box}
/* a display rule outranks the attribute, so state it once and be done */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1400px;margin:0 auto;padding:0 var(--s32)}
.wrap-n{max-width:1180px;margin:0 auto;padding:0 var(--s32)}
@media(max-width:820px){.wrap,.wrap-n{padding:0 var(--s24)}}

/* ── type ─────────────────────────────────────────────────────────── */
.display{font-family:var(--disp);font-weight:800;
  font-size:clamp(34px,5.6vw,68px);line-height:1.02;letter-spacing:-.028em;
  margin:0;text-wrap:balance}
h2{font-family:var(--disp);font-weight:800;
  font-size:clamp(28px,3.6vw,44px);line-height:1.06;letter-spacing:-.022em;
  margin:0;text-wrap:balance}
h3{font-family:var(--disp);font-weight:700;font-size:20px;line-height:1.28;
  letter-spacing:-.01em;margin:0}
.lead{font-size:19px;line-height:1.6;color:var(--muted);max-width:38ch;margin:0}
.eyebrow{display:inline-block;font-family:var(--body);font-weight:700;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-text)}
.micro{font-family:var(--body);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
p{max-width:64ch}

/* ── nav: sticky, blurred, translucent ────────────────────────────── */
.nav{position:sticky;top:0;z-index:200;background:rgba(245,242,234,.93);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:var(--s24);
  max-width:1400px;margin:0 auto;padding:var(--s16) var(--s32)}
.nav img{height:26px;width:auto}
.nav .sp{flex:1}
.navlink{font-family:var(--body);font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;transition:color .13s ease-out}
.navlink:hover{color:var(--ink)}
@media(max-width:900px){.nav{display:none}}

/* ── buttons: the Wycoff pill, chunky, with a solid bottom edge ───── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s12);
  font-family:var(--body);font-weight:700;font-size:17px;letter-spacing:.01em;
  padding:var(--s16) var(--s32);border:0;border-radius:var(--r-pill);
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 1px 2px rgba(20,18,11,.06),
             0 6px 0 var(--accent-dk),0 14px 24px -10px rgba(20,18,11,.28);
  transition:transform .13s ease-out,box-shadow .13s ease-out,filter .13s ease-out}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 1px 2px rgba(20,18,11,.06),
             0 8px 0 var(--accent-dk),0 18px 30px -10px rgba(20,18,11,.30)}
.btn:active{transform:translateY(4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 2px 0 var(--accent-dk),
             0 6px 12px -6px rgba(20,18,11,.28)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn svg{transition:transform .13s ease-out;flex:none}
.btn:hover svg{transform:translateX(3px)}
.btn-lg{font-size:19px;padding:var(--s24) var(--s48)}
.btn .stack{display:flex;flex-direction:column;align-items:center;gap:2px}
.btn .stack small{font-weight:600;font-size:12.5px;opacity:.72;letter-spacing:.02em}
/* the streak, kept from the racing motif */
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none}
.btn:hover::after{animation:streak .62s ease-out}
@keyframes streak{0%{left:-60%;opacity:0}18%{opacity:1}100%{left:115%;opacity:0}}

/* Wycoff's thin-rule button, for secondary actions */
.btn-line{display:inline-flex;align-items:center;gap:var(--s12);
  font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;padding:var(--s16) var(--s32);
  border:2px solid var(--ink);color:var(--ink);text-decoration:none;
  background:transparent;border-radius:var(--r-pill);
  transition:background .13s ease-out,color .13s ease-out}
.btn-line:hover{background:var(--ink);color:var(--surface)}
.btn-line.on-dark{border-color:rgba(245,242,234,.7);color:var(--surface)}
.btn-line.on-dark:hover{background:var(--surface);color:var(--ink)}
.navbtn{font-family:var(--body);font-weight:700;font-size:14px;color:var(--ink);
  text-decoration:none;padding:10px 22px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 var(--accent-dk);
  transition:transform .13s ease-out}
.navbtn:hover{transform:translateY(-1px)}
.navbtn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 var(--accent-dk)}

.cta-wrap{position:relative;display:inline-block;padding:var(--s16) var(--s24) var(--s24)}
.tap-finger{position:absolute;bottom:2px;right:-10px;font-size:40px;z-index:3;
  animation:tapMe 1.3s ease-in-out infinite;pointer-events:none}
@keyframes tapMe{0%,100%{transform:translateY(8px) rotate(-12deg)}
                 50%{transform:translateY(-14px) rotate(-12deg)}}
.cta-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  overflow:visible;z-index:1}
.cta-ring ellipse{fill:none;stroke:var(--accent-dk);stroke-width:2.5;
  stroke-linecap:round;opacity:.9}

/* ── hero ─────────────────────────────────────────────────────────
   Mapped off the Friendly Counseling build at owner's direction. Three
   things come across from there, and they are the whole difference:

   1. The copy sits ON the picture — cream type over the frame, bottom
      anchored — instead of being parked in a cleared zone beside it.
   2. The scrim is a VERTICAL wash, heaviest under the copy and thinning
      upward, so the photograph still breathes through and around the
      words rather than being blanked out behind them.
   3. The plate dissolves into the section below instead of hard-cutting.
      The wash reaches solid ink at the bottom edge and the band under the
      hero is that same ink, so there is no seam to see.

   The ratio still rides a ::before spacer, not the box: aspect-ratio makes
   a grid item's height definite, which cancels `stretch`, and the plate
   would stop growing with the copy and leave a strip of page showing
   under it. As a spacer the 16:9 is a floor the box can stretch past —
   so the frame stays whole whenever the copy fits inside it. */
.hero{position:relative;isolation:isolate;display:grid;background:var(--ink)}
.hero-bg{grid-area:1/1;position:relative;overflow:hidden}
.hero-bg::before{content:"";display:block;width:100%;aspect-ratio:16/9}
.hero-bg video{position:absolute;inset:0;width:100%;height:100%!important;
  object-fit:cover;object-position:62% 44%}
/* Two washes, because one cannot do both jobs. The vertical carries the
   Friendly Counseling dissolve — solid ink at the bottom edge so the plate
   melts into the band below with no seam. The horizontal puts real ground
   under the copy and then clears off, so the family on the right stays
   bright instead of the whole frame being dimmed to make text legible.
   Measured: with the vertical alone the headline read 2.29:1 over the
   sunset sky, which fails. */
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,
      var(--ink) 0%,rgba(20,18,11,.86) 12%,rgba(20,18,11,.42) 32%,
      rgba(20,18,11,.20) 62%,rgba(20,18,11,.40) 100%),
    linear-gradient(100deg,
      rgba(20,18,11,.90) 0%,rgba(20,18,11,.87) 28%,rgba(20,18,11,.72) 44%,
      rgba(20,18,11,.34) 58%,rgba(20,18,11,.08) 72%,rgba(20,18,11,0) 84%)}
.hero .wrap{grid-area:1/1;position:relative;z-index:2;width:100%;
  display:flex;align-items:flex-end;padding:var(--s96) var(--s32) var(--s64)}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s24);
  max-width:760px}

/* everything in the hero now reads off a dark ground */
.hero .display{color:var(--surface)}
.hero .lead{color:rgba(245,242,234,.88);max-width:52ch}
.hero .eyebrow{color:var(--accent-hi);text-shadow:0 1px 12px rgba(20,18,11,.75)}
.hero .cta-ring ellipse{stroke:var(--accent)}
.trustrow{display:flex;align-items:center;gap:var(--s24);flex-wrap:wrap;
  padding-top:var(--s16);border-top:1px solid rgba(245,242,234,.22);
  width:100%;max-width:560px}
.tmark{display:flex;align-items:center;gap:var(--s8);font-size:13px;
  color:rgba(245,242,234,.78)}
.tmark svg{flex:none;color:var(--accent)}
.tmark b{color:var(--surface);font-weight:700;font-variant-numeric:tabular-nums}
.risk{font-size:13.5px;color:rgba(245,242,234,.62);margin:0;max-width:52ch;
  line-height:1.6}

@media(max-width:900px){
  /* The phone keeps the whole 16:9 frame — nothing cropped — and the copy
     drops beneath it onto ink. Because the wash bottoms out at solid ink,
     the picture melts into that copy block rather than ending on a line:
     the same fade as the desktop, achieved in the one place a 219px-tall
     frame could never carry a headline, a button and a trust row. */
  .hero{display:block}
  /* a 219px frame cannot afford the desktop wash — hold the top half clear
     and spend the whole fade on the bottom third, into the copy block */
  .hero-scrim{background:linear-gradient(to top,
    var(--ink) 0%,rgba(20,18,11,.74) 13%,rgba(20,18,11,.32) 30%,
    rgba(20,18,11,0) 54%,rgba(20,18,11,.20) 100%)}
  .hero .wrap{padding:var(--s32) var(--s24) var(--s48)}
  .hero-copy{max-width:none}
  .hero .lead,.risk{max-width:none}
}

/* ── proof card ───────────────────────────────────────────────────── */
.proof{background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);overflow:hidden;
  max-width:420px;width:100%}
.proof-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s16);
  padding:var(--s12) var(--s24);background:var(--ink)}
.proof-top .t{font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--surface)}
.proof-top .d{font-size:12.5px;color:var(--accent);font-weight:600}
.proof table{width:100%;border-collapse:collapse;font-size:14px}
.proof td{padding:var(--s12) var(--s24);border-bottom:1px solid var(--line)}
.proof td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.proof tr:last-child td{border-bottom:0}
.proof .done td{color:var(--muted);text-decoration:line-through;
  text-decoration-color:var(--accent-dk);text-decoration-thickness:2px}
.proof-foot{padding:var(--s16) var(--s24);background:var(--surface);display:flex;
  align-items:center;justify-content:space-between;gap:var(--s16)}
.proof-foot .k{font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.proof-foot .v{font-family:var(--disp);font-weight:800;font-size:19px;
  background:var(--accent);padding:4px 12px;border-radius:var(--r-pill)}
.proof-cap{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0;
  padding:var(--s12) var(--s24) var(--s16);text-align:center;
  background:var(--surface);border-top:1px solid var(--line)}

/* ── the schedule calculator ──────────────────────────────────────
   The #why section used to be a paragraph asserting a number. It now
   hands the reader the sliders and lets the schedule assert it. Same
   amortization every lender runs; the sheet is what beats it. */
.why-note{display:flex;align-items:flex-start;gap:var(--s12);margin-top:var(--s8);
  padding:var(--s16);max-width:46ch;border-left:3px solid var(--ink);
  background:var(--card);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:14px;line-height:1.6;color:var(--muted)}
.why-note svg{flex:none;margin-top:3px;color:var(--accent-dk)}

.calc{background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);overflow:hidden;
  max-width:460px;width:100%}
.calc-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s16);
  padding:var(--s12) var(--s24);background:var(--ink)}
.calc-top .t{font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--surface)}
.calc-top .d{font-size:12.5px;color:var(--accent);font-weight:600}
.calc-body{padding:var(--s24) var(--s24) var(--s8)}
.fld{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s16);
  margin-bottom:var(--s8)}
.fld label{font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.fld output{font-family:var(--disp);font-weight:800;font-size:19px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}

/* the slider: same pill-with-a-bottom-edge language as the buttons */
/* 44px tall so the whole strip is the tap target, not just the 26px thumb */
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;
  height:44px;background:transparent;margin:0 0 var(--s8);cursor:pointer;display:block}
.calc input[type=range]:focus-visible{outline:3px solid var(--ink);outline-offset:6px;
  border-radius:var(--r-pill)}
.calc input[type=range]::-webkit-slider-runnable-track{height:8px;
  border-radius:var(--r-pill);background:rgba(20,18,11,.10)}
.calc input[type=range]::-moz-range-track{height:8px;
  border-radius:var(--r-pill);background:rgba(20,18,11,.10)}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;margin-top:-9px;border:0;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 3px 0 var(--accent-dk),
             0 6px 12px -6px rgba(20,18,11,.30);
  transition:transform .13s ease-out}
.calc input[type=range]::-moz-range-thumb{width:26px;height:26px;border:0;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 3px 0 var(--accent-dk),
             0 6px 12px -6px rgba(20,18,11,.30)}
.calc input[type=range]:active::-webkit-slider-thumb{transform:translateY(2px)}

.calc-out{padding:var(--s16) var(--s24) var(--s24);background:var(--surface);
  border-top:1px solid var(--line)}
.crow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s16);
  padding:var(--s8) 0;border-bottom:1px solid var(--line)}
.crow .k{font-size:14px;color:var(--muted)}
.crow .v{font-family:var(--disp);font-weight:700;font-size:17px;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.crow.key{border-bottom:0;padding-bottom:var(--s16)}
.crow.key .k{font-weight:700;color:var(--ink);font-size:15px}
.crow.key .v{font-weight:800;font-size:28px;letter-spacing:-.02em;
  background:var(--accent);padding:2px 12px;border-radius:var(--r-pill)}

.split{display:flex;height:12px;border-radius:var(--r-pill);overflow:hidden;
  background:rgba(20,18,11,.10)}
.split span{display:block;height:100%;transition:width .18s ease-out}
.split .p{background:var(--ink-soft)}
.split .i{background:linear-gradient(180deg,var(--accent-hi),var(--accent-dk))}
.split-key{display:flex;gap:var(--s24);margin-top:var(--s12);font-size:12.5px;
  color:var(--muted)}
.split-key span{display:flex;align-items:center;gap:var(--s8)}
.split-key b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.sw{width:10px;height:10px;border-radius:3px;flex:none}
.sw.p{background:var(--ink-soft)}
.sw.i{background:var(--accent)}
.calc-line{font-size:14px;line-height:1.6;color:var(--muted);
  margin:var(--s16) 0 0;max-width:none}
.calc-line b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.calc-cap{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0;
  padding:var(--s12) var(--s24) var(--s16);text-align:center;background:var(--card);
  border-top:1px solid var(--line);max-width:none}
@media(max-width:1000px){
  .calc{max-width:none}
}
@media(max-width:900px){
  /* the headline figure can run to seven digits at the top of the range,
     and at 390px that pushes its own label onto a second line */
  .crow.key .v{font-size:24px;padding:2px 10px}
}

/* ── which one first ─────────────────────────────────────────────
   Owner's ask: a widget that takes the type of debt and says which to
   attack first. It ranks by rate — the order that costs the least interest,
   which is arithmetic rather than an opinion — and prices each balance per
   month so the ranking explains itself. Deliberately stops at the ranking:
   the dated schedule and the velocity cycle are what the $7 sheet is for. */
.order{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:var(--s32);align-items:start}
.ord-in{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow);padding:var(--s24)}
.ord-head,.ord-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.15fr) minmax(0,.85fr) 44px;
  gap:var(--s12);align-items:center}
.ord-head{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding-bottom:var(--s12);border-bottom:1px solid var(--line)}
.ord-row{padding:var(--s12) 0;border-bottom:1px solid var(--line)}
.ord-row:last-child{border-bottom:0}
.order select,.order input{width:100%;font-family:var(--body);font-size:15px;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px var(--s12);min-width:0}
.order select{cursor:pointer}
.order input{font-variant-numeric:tabular-nums;text-align:right}
.order select:focus-visible,.order input:focus-visible{outline:2px solid var(--accent-dk);
  outline-offset:1px}
.mny,.pct{position:relative;display:block}
.mny i,.pct i{position:absolute;top:50%;transform:translateY(-50%);font-style:normal;
  font-size:14px;color:var(--muted);pointer-events:none}
.mny i{left:var(--s12)}
.pct i{right:var(--s12)}
.mny input{padding-left:24px}
.pct input{padding-right:24px}
.o-del{width:44px;height:44px;border:0;border-radius:var(--r-pill);cursor:pointer;
  background:transparent;color:var(--muted);font-size:22px;line-height:1;
  transition:background .13s ease-out,color .13s ease-out}
.o-del:hover{background:rgba(20,18,11,.07);color:var(--ink)}
.o-del:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn-line.sm{font-size:12.5px;padding:var(--s12) var(--s24);margin-top:var(--s16);
  border-width:2px}

.ord-out{background:var(--card);border:1px solid var(--accent);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);overflow:hidden}
.oo-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s16);
  padding:var(--s12) var(--s24);background:var(--ink)}
.oo-top .t{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--surface)}
.oo-top .d{font-size:12.5px;color:var(--accent);font-weight:600}
#ord-list{list-style:none;margin:0;padding:0}
#ord-list li{display:flex;align-items:center;gap:var(--s16);
  padding:var(--s12) var(--s24);border-bottom:1px solid var(--line)}
#ord-list .pos{flex:none;width:30px;height:30px;border-radius:var(--r-pill);
  display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:14px;
  background:rgba(20,18,11,.07);color:var(--muted)}
#ord-list li:first-child .pos{color:var(--ink);
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 0 var(--accent-dk)}
.ob{flex:1;min-width:0;display:flex;flex-direction:column}
.ob b{font-weight:700;font-size:15px}
.ob .meta{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
#ord-list .cost{flex:none;font-family:var(--disp);font-weight:700;font-size:16px;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
#ord-list .cost small{font-family:var(--body);font-weight:600;font-size:11.5px;
  color:var(--muted);letter-spacing:0}
.oo-foot{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s16);
  padding:var(--s16) var(--s24);background:var(--surface);
  border-top:1px solid var(--line)}
.oo-foot .k{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);max-width:16ch;line-height:1.4}
.oo-foot .v{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;background:var(--accent);padding:2px 12px;
  border-radius:var(--r-pill)}
.oo-why{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0;max-width:none;
  padding:var(--s16) var(--s24);background:var(--surface);border-top:1px solid var(--line)}
.oo-why b{color:var(--ink);font-weight:700}
.ord-cap{font-size:12.5px;line-height:1.6;color:var(--muted);margin:var(--s24) 0 0;
  max-width:80ch}
/* the divider between the two tools is the group's internal seam, not a
   section break — it wants to read lighter than the rules elsewhere */
.toolkit #order{padding-top:var(--s96)}
.toolkit #order .rule{margin-bottom:var(--s48)}
@media(max-width:1000px){
  .order{grid-template-columns:1fr}
}
@media(max-width:560px){
  .ord-head{display:none}
  .ord-row{grid-template-columns:1fr 1fr 44px;gap:var(--s8) var(--s12)}
  .ord-row .o-type{grid-column:1/3}
  .ord-row .o-del{grid-row:1;grid-column:3}
  .oo-foot{flex-direction:column;align-items:flex-start;gap:var(--s8)}
  .oo-foot .k{max-width:none}
}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s24);cursor:pointer;list-style:none;padding:var(--s24) 0;
  font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.35;
  letter-spacing:-.01em;transition:color .13s ease-out}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-text)}
.faq summary:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.chev{flex:none;width:12px;height:12px;border-right:2.5px solid var(--accent-dk);
  border-bottom:2.5px solid var(--accent-dk);border-radius:2px;
  transform:translateY(-3px) rotate(45deg);transition:transform .13s ease-out}
.faq details[open] .chev{transform:translateY(2px) rotate(225deg)}
.faq .ans{padding:0 0 var(--s24);max-width:68ch}
.faq .ans p{color:var(--muted);margin:0 0 var(--s12)}
.faq .ans p:last-child{margin-bottom:0}
.faq .ans b{color:var(--ink);font-weight:700}
.faq .ans a{color:var(--accent-text);font-weight:600}
.faq-more{margin:var(--s32) 0 0;font-size:14px;color:var(--muted);max-width:60ch}
.faq-more a{color:var(--accent-text);font-weight:700}
@media(max-width:900px){
  .faq summary{font-size:17px;gap:var(--s16);padding:var(--s16) 0}
}

/* ── the free-tools zone ─────────────────────────────────────────
   Owner: give the calculators their own background so people can see they
   are a group that goes together. They used to be split across an ink
   section and a cream one, which read as two unrelated blocks.

   The zone opens with a slim ink bar rather than starting straight on the
   tint — that keeps the hero's fade landing on ink, so the Friendly
   Counseling melt survives, and it gives the group a header that names it. */
.toolkit{background:var(--tint);padding-bottom:var(--s96)}
.tk-bar{background:var(--ink);color:var(--surface)}
.tk-bar .wrap-n{display:flex;align-items:baseline;gap:var(--s16) var(--s24);
  flex-wrap:wrap;padding-top:var(--s16);padding-bottom:var(--s16)}
.tk-h{font-family:var(--body);font-weight:700;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.tk-n{font-size:13.5px;color:rgba(245,242,234,.7)}

.numbers{padding-top:0}
.numbers .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:var(--s96);align-items:start;padding:var(--s96) var(--s32)}
/* the card grew tall once it carried its own instructions, and centring the
   copy against it left a hole above the headline — the copy rides along instead */
.numbers-copy{display:flex;flex-direction:column;gap:var(--s24);
  position:sticky;top:var(--s96)}
@media(max-width:1000px){.numbers-copy{position:static}}
.numbers .lead{max-width:52ch}
@media(max-width:1000px){
  .numbers .wrap{grid-template-columns:1fr;gap:var(--s32);padding:var(--s64) var(--s24)}
}

/* ── sections ─────────────────────────────────────────────────────── */
section{padding-top:var(--s128)}
@media(max-width:900px){section{padding-top:var(--s64)}}
.sec-head{display:flex;flex-direction:column;gap:var(--s16);
  margin-bottom:var(--s48);max-width:58ch}
.rule{display:flex;align-items:center;gap:var(--s16);margin:0 0 var(--s48)}
.rule .ln{flex:1;height:1px;background:var(--line)}
.rule svg{flex:none;color:var(--accent-dk);opacity:.75}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s24)}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s32);box-shadow:var(--shadow)}
.step .n{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:var(--ink);
  font-family:var(--disp);font-weight:800;font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 var(--accent-dk)}
.step h3{margin:var(--s24) 0 var(--s8)}
.step p{color:var(--muted);margin:0}
@media(max-width:900px){.steps{grid-template-columns:1fr}}

/* ── the clips, alive ─────────────────────────────────────────────── */
.clips{margin-top:var(--s128);background:var(--ink);color:var(--surface);
  position:relative;overflow:hidden}
.clips{padding-bottom:var(--s96)}
.clips .wrap{padding:var(--s96) var(--s32) 0;display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s64);align-items:start}
.clips-copy{display:flex;flex-direction:column;gap:var(--s24);align-items:flex-start;
  position:sticky;top:var(--s96)}
.clips .lead{max-width:44ch}

/* Owner's note: the muted clips had no audio, so they might as well be the
   real thing. These are facades — a local thumbnail and a play control — and
   the YouTube player is only fetched when someone actually presses play, so
   the page makes no call to Google just to sit there. */
.ytgrid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s32) var(--s24)}
.ytc{display:block;position:relative;width:100%;padding:0;border:0;cursor:pointer;
  background:#000;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9;
  box-shadow:0 2px 6px rgba(0,0,0,.3),0 24px 48px -20px rgba(0,0,0,.5);
  transition:transform .13s ease-out}
.ytc img{width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .13s ease-out,transform .3s ease-out}
.ytc:hover{transform:translateY(-3px)}
.ytc:hover img{opacity:.82;transform:scale(1.03)}
.ytc:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ytc .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 0 var(--accent-dk),
             0 10px 20px -8px rgba(0,0,0,.5);
  transition:transform .13s ease-out}
.ytc .play svg{margin-left:3px}
.ytc:hover .play{transform:translate(-50%,-50%) scale(1.07)}
.ytc:active .play{transform:translate(-50%,-50%) translateY(3px) scale(1)}
.ytc iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytt{font-size:14.5px;line-height:1.45;color:rgba(245,242,234,.8);
  margin:var(--s12) 0 0;max-width:none}
@media(max-width:1100px){
  .clips .wrap{grid-template-columns:1fr;gap:var(--s32)}
  .clips-copy{position:static}
}
@media(max-width:620px){.ytgrid{grid-template-columns:1fr}}
.clips h2{color:var(--surface)}
.clips .lead{color:rgba(245,242,234,.74)}
@media(max-width:900px){
  .clips{margin-top:var(--s64);padding-bottom:var(--s64)}
  .clips .wrap{padding:var(--s64) var(--s24) 0;gap:var(--s32)}
}

/* ── who it's for ────────────────────────────────────────────────
   The heading used to sit on cream above three ink plates, so the four
   pieces read as unrelated blocks — owner's note: "you can't tell they're
   all connected." The whole section is ink now and runs straight on from
   the clips above it, so the header and the three plates are one thing. */
#who{background:var(--ink);color:var(--surface)}
#who h2{color:var(--surface)}
#who .lead{color:rgba(245,242,234,.76)}
#who .eyebrow{color:var(--accent)}
#who .rule .ln{background:rgba(245,242,234,.18)}
#who .rule svg{color:var(--accent);opacity:.9}

/* ── the film bands ───────────────────────────────────────────────
   These were three cards cropping each photo to a 230px letterbox strip.
   Owner's note: don't cut the picture in half. So the frame runs the full
   width of the page at its own 16:9 and is never cropped, the copy sits
   over the quiet left third the stills were generated to reserve, and each
   plate is a Kling clip that plays its beat once when you arrive. */
/* An ink gap under each plate so the bottom fade has somewhere to land.
   Butted edge to edge the dissolve had nowhere to go and the seam read as a
   line; with the gap each frame emerges from ink and returns to it. */
.filmband{position:relative;width:100%;background:var(--ink);color:var(--surface);
  padding-bottom:var(--s48)}
.filmband:first-of-type{margin-top:var(--s64)}
.film{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.film video{width:100%;height:100%;object-fit:cover;display:block}
/* Two washes stacked: the vertical one carries the Friendly Counseling
   dissolve — solid ink top and bottom so consecutive plates melt into one
   another instead of butting against a seam — and the horizontal one holds
   the contrast under the copy, which sits on the quiet left third these
   stills were generated to reserve. */
.film-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,
      var(--ink) 0%,rgba(20,18,11,.62) 5%,rgba(20,18,11,.18) 13%,rgba(20,18,11,0) 22%,
      rgba(20,18,11,0) 78%,rgba(20,18,11,.18) 87%,rgba(20,18,11,.62) 95%,var(--ink) 100%),
    linear-gradient(90deg,rgba(20,18,11,.95) 0%,rgba(20,18,11,.93) 22%,
      rgba(20,18,11,.86) 34%,rgba(20,18,11,.60) 46%,rgba(20,18,11,.20) 62%,
      rgba(20,18,11,0) 76%)}
.film-copy{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none}
.fc{max-width:1180px;width:100%;margin:0 auto;padding:0 var(--s32);pointer-events:auto}
.fnum{display:block;font-family:var(--body);font-weight:700;font-size:12.5px;
  letter-spacing:.14em;color:var(--accent);margin-bottom:var(--s16)}
.filmband h3{font-family:var(--disp);font-weight:800;
  font-size:clamp(26px,3.2vw,40px);line-height:1.06;letter-spacing:-.022em;
  color:var(--surface);max-width:13ch;text-wrap:balance}
.filmband p{color:rgba(245,242,234,.86);margin:var(--s16) 0 0;max-width:34ch;font-size:17px}
@media(max-width:900px){
  /* copy drops below the plate so nothing sits on a busy frame at phone size */
  .filmband:first-of-type{margin-top:var(--s48)}
  .film-scrim{background:linear-gradient(to bottom,
    var(--ink) 0%,rgba(20,18,11,.5) 9%,rgba(20,18,11,0) 26%,
    rgba(20,18,11,.45) 78%,var(--ink) 100%)}
  .film-copy{position:static;display:block}
  .fc{padding:var(--s32) var(--s24) var(--s48)}
  .filmband h3,.filmband p{max-width:none}
}

/* ── offers ───────────────────────────────────────────────────────── */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:var(--s24);align-items:stretch}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s48);box-shadow:var(--shadow);display:flex;flex-direction:column}
.card.hi{box-shadow:var(--shadow-lg);border-color:var(--accent)}
.price{font-family:var(--disp);font-weight:800;font-size:48px;letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums}
.price small{font-family:var(--body);font-size:16px;font-weight:600;color:var(--muted);
  letter-spacing:0}
.card h3{margin:var(--s12) 0 var(--s4)}
.card ul{list-style:none;padding:0;margin:var(--s24) 0 var(--s32);display:grid;gap:var(--s12)}
.card li{padding-left:var(--s32);position:relative;color:var(--muted);line-height:1.55}
.card li svg{position:absolute;left:0;top:7px;color:var(--accent-dk)}
.card .btn,.card .btn-line{width:100%;margin-top:auto}
@media(max-width:900px){.offer{grid-template-columns:1fr}.card{padding:var(--s32)}}

/* ── about ────────────────────────────────────────────────────────── */
.about{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:var(--s64);align-items:center}
.about-photo{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-lg)}
.about p{color:var(--muted);margin:0 0 var(--s16)}
.about p b{color:var(--ink);font-weight:700}
@media(max-width:900px){.about{grid-template-columns:1fr;gap:var(--s32)}}

/* ── book a time ─────────────────────────────────────────────────
   Owner asked for a calendar people can book a meeting on. There is no
   Cal.com account yet, so this captures a requested day and window and
   routes it down the same notified path as the other visitor forms, and
   it says plainly that a person confirms it. When CJ's real calendar URL
   arrives, swap the card body for the embed and keep everything else. */
.book{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:var(--s64);align-items:center}
.book-copy{display:flex;flex-direction:column;gap:var(--s16);align-items:flex-start}
.bklist{list-style:none;padding:0;margin:var(--s8) 0 0;display:grid;gap:var(--s12)}
.bklist li{padding-left:var(--s32);position:relative;color:var(--muted);line-height:1.55;
  font-size:16px}
.bklist svg{position:absolute;left:0;top:5px;color:var(--accent-dk)}

.bookcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);overflow:hidden}
.bk-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s16);
  padding:var(--s12) var(--s24);background:var(--ink)}
.bk-top .t{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--surface)}
.bk-top .d{font-size:12.5px;color:var(--accent);font-weight:600}
.bk-body{padding:var(--s24)}
.bk-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s8)}
.bk-days button{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  padding:var(--s12) var(--s8);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font-family:var(--body);
  transition:border-color .13s ease-out,transform .13s ease-out,background .13s ease-out}
.bk-days button .dw{font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.bk-days button .dd{font-family:var(--disp);font-weight:800;font-size:19px;
  font-variant-numeric:tabular-nums;line-height:1.1}
.bk-days button .dm{font-size:11px;color:var(--muted)}
.bk-days button:hover{border-color:var(--accent);transform:translateY(-2px)}
.bk-days button[aria-pressed="true"]{background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  border-color:var(--accent-dk);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 var(--accent-dk)}
.bk-days button[aria-pressed="true"] .dw,.bk-days button[aria-pressed="true"] .dm{color:var(--ink)}
.bk-days button:focus-visible,.bk-times button:focus-visible{outline:3px solid var(--ink);
  outline-offset:2px}

.bk-times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8);
  margin-top:var(--s16)}
.bk-times button{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  padding:var(--s12) var(--s8);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font-family:var(--body);font-weight:700;
  font-size:14px;transition:border-color .13s ease-out,transform .13s ease-out}
.bk-times button small{font-weight:600;font-size:11.5px;color:var(--muted)}
.bk-times button:hover{border-color:var(--accent);transform:translateY(-2px)}
.bk-times button[aria-pressed="true"]{background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  border-color:var(--accent-dk);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 var(--accent-dk)}
.bk-times button[aria-pressed="true"] small{color:var(--ink)}

#bk-form{margin-top:var(--s24)}
.bk-chosen{font-size:14px;color:var(--ink);margin:0 0 var(--s16);padding:var(--s12);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm)}
.bk-chosen b{font-weight:700}
#bk-form label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 var(--s8)}
#bk-form label .opt{font-weight:600;letter-spacing:.04em;text-transform:none;opacity:.75}
#bk-form input,#bk-form textarea{width:100%;padding:var(--s12);background:var(--surface);
  color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--body);font-size:16px;margin-bottom:var(--s16)}
#bk-form textarea{resize:vertical}
#bk-form .btn{width:100%}
.bk-back{display:block;width:100%;margin-top:var(--s12);background:none;border:0;
  cursor:pointer;font-family:var(--body);font-size:13px;color:var(--muted);
  padding:var(--s8)}
.bk-back:hover{color:var(--ink)}
.bk-ok{text-align:center;padding:var(--s32) var(--s16)}
.bk-ok b{display:block;font-family:var(--disp);font-size:22px;margin-bottom:var(--s8)}
.bk-ok span{color:var(--muted);font-size:15px}
.bk-fallback{margin:0}
.bk-cap{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0;
  padding:var(--s12) var(--s24) var(--s16);background:var(--surface);
  border-top:1px solid var(--line);max-width:none}
.bk-cap b{color:var(--ink);font-weight:700}
@media(max-width:1000px){.book{grid-template-columns:1fr;gap:var(--s32)}}
@media(max-width:560px){
  .bk-days{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bk-times{grid-template-columns:1fr}
  .bk-times button{flex-direction:row;gap:var(--s8);justify-content:center}
}

/* ── closer ───────────────────────────────────────────────────────── */
.closer{margin-top:var(--s128);background:var(--ink);color:var(--surface);
  border-radius:var(--r-md);overflow:hidden}
.closer .in{padding:var(--s96) var(--s32);text-align:center;display:flex;
  flex-direction:column;align-items:center;gap:var(--s24)}
.closer h2{color:var(--surface)}
.closer .lead{color:rgba(245,242,234,.74);max-width:46ch;text-align:center}
.closer .risk{color:rgba(245,242,234,.6);text-align:center}
@media(max-width:900px){.closer{margin-top:var(--s64)}.closer .in{padding:var(--s64) var(--s24)}}

footer{margin-top:var(--s96);border-top:1px solid var(--line);
  padding:var(--s48) 0 var(--s96);color:var(--muted);font-size:14px}
footer .fmark{height:20px;width:auto;opacity:.5;margin-bottom:var(--s24)}
.flinks{display:flex;gap:var(--s32);flex-wrap:wrap;margin-bottom:var(--s32)}
.flinks a{font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;transition:color .13s ease-out}
.flinks a:hover{color:var(--accent-text)}
footer p{max-width:78ch;margin:0 0 var(--s12);line-height:1.75;font-size:14px}

.js .rv{opacity:0;transform:translateY(16px);
  transition:opacity .35s ease-out,transform .35s ease-out}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .tap-finger,.bill{animation:none!important}
  .btn::after{display:none}
  #rain{display:none}
}

/* ── money rain ───────────────────────────────────────────────────── */
#rain{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.bill{position:absolute;top:-64px;width:46px;height:23px;border-radius:2px;
  will-change:transform,opacity}
@keyframes fall{0%{transform:translateY(-10vh) rotate(0) scale(1);opacity:0}
  8%{opacity:1}100%{transform:translateY(112vh) rotate(560deg) scale(.9);opacity:0}}

/* ── timed nudge ──────────────────────────────────────────────────── */
#nudge{position:fixed;left:0;right:0;bottom:0;z-index:70;transform:translateY(110%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);background:var(--ink);
  color:var(--surface);box-shadow:0 -12px 32px -12px rgba(0,0,0,.35)}
#nudge.up{transform:translateY(0)}
body:has(#nudge.up) #tabs{opacity:0;pointer-events:none;transition:opacity .2s}
#nudge .in{max-width:1400px;margin:0 auto;padding:var(--s16) var(--s32);
  display:flex;align-items:center;gap:var(--s24)}
#nudge .tx{flex:1;min-width:0}
#nudge .hd{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.3}
#nudge .sb{font-size:13px;color:rgba(245,242,234,.66);margin-top:4px}
#nudge .x{flex:none;background:none;border:0;cursor:pointer;padding:var(--s8);
  color:rgba(245,242,234,.5);font-size:26px;line-height:1}
#nudge .x:hover{color:var(--surface)}
@media(max-width:900px){
  #nudge .in{flex-wrap:wrap;gap:var(--s12);padding:var(--s16)}
  #nudge .btn{width:100%;order:3}
}

/* ── the purchase modal ──────────────────────────────────────────
   Owner's note: the paid buttons should not fire someone straight out of
   the page. Each one opens a card that says what the thing is, what is in
   it, and what happens on the next screen — then hands over. The anchors
   keep their real href, so with scripting off every button still goes
   straight to checkout: this is an enhancement, never a gate in front of
   someone's money. */
#buy{position:fixed;inset:0;z-index:310;display:flex;align-items:center;
  justify-content:center;padding:var(--s24);background:rgba(20,18,11,.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#buy .buy-pane{position:relative;background:var(--card);color:var(--ink);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  max-width:520px;width:100%;max-height:92vh;overflow:auto;
  padding:var(--s48) var(--s48) var(--s32);
  animation:buyIn .22s cubic-bezier(.4,0,.2,1)}
@keyframes buyIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.buy-x{position:absolute;top:var(--s16);right:var(--s16);background:none;border:0;
  cursor:pointer;font-size:26px;line-height:1;color:var(--muted);padding:var(--s8)}
.buy-x:hover{color:var(--ink)}
.buy-price{display:flex;align-items:baseline;gap:var(--s8);margin:var(--s12) 0 var(--s4)}
.buy-price b{font-family:var(--disp);font-weight:800;font-size:52px;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.buy-price small{font-family:var(--body);font-size:15px;font-weight:600;color:var(--muted)}
#buy h3{font-size:24px;margin:0}
.buy-sub{font-size:16px;color:var(--muted);margin:var(--s8) 0 0}
.buy-list{list-style:none;padding:0;margin:var(--s24) 0;display:grid;gap:var(--s12)}
.buy-list li{padding-left:var(--s32);position:relative;color:var(--muted);
  line-height:1.55;font-size:15.5px}
.buy-list li svg{position:absolute;left:0;top:5px;color:var(--accent-dk)}
.buy-next{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s16);
  margin-bottom:var(--s24);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm)}
.bn-h{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.bn-b{font-size:14.5px;line-height:1.55}
#buy .btn{width:100%}
.buy-back{display:block;width:100%;margin-top:var(--s12);background:none;border:0;
  cursor:pointer;font-family:var(--body);font-size:13.5px;color:var(--muted);
  padding:var(--s12)}
.buy-back:hover{color:var(--ink);text-decoration:underline}
.buy-fine{font-size:12.5px;line-height:1.6;color:var(--muted);margin:var(--s16) 0 0;
  max-width:none}
.buy-fine a{color:var(--accent-text);font-weight:600}
@media(max-width:560px){
  #buy{padding:0;align-items:flex-end}
  #buy .buy-pane{max-height:94vh;border-radius:var(--r-md) var(--r-md) 0 0;
    padding:var(--s32) var(--s24) var(--s24);
    animation:buyUp .26s cubic-bezier(.4,0,.2,1)}
  .buy-price b{font-size:42px}
}
@keyframes buyUp{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){
  #buy .buy-pane{animation:none}
}

/* ── how to use these things ─────────────────────────────────────
   Owner: "we're dealing with people who need explanation, hand holding."
   Every tool on the page says what it is and how to drive it, right where
   the controls are, and carries a plain-language glossary of its own
   output underneath. */
.howto{padding:var(--s16) var(--s24);background:var(--surface);
  border-bottom:1px solid var(--line)}
.howto .h{display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:var(--s8)}
.howto p{font-size:14px;line-height:1.6;color:var(--muted);margin:0;max-width:none}
.howto ol{margin:var(--s12) 0 0;padding:0;list-style:none;display:grid;gap:var(--s8);
  counter-reset:ht}
.howto li{counter-increment:ht;position:relative;padding-left:var(--s32);
  font-size:14px;line-height:1.5;color:var(--muted)}
.howto li::before{content:counter(ht);position:absolute;left:0;top:1px;
  width:20px;height:20px;border-radius:var(--r-pill);display:grid;place-items:center;
  font-family:var(--disp);font-weight:800;font-size:11px;
  background:var(--accent);color:var(--ink)}
.howto li b{color:var(--ink);font-weight:700}

/* the inset variant sits inside a card that already has its own padding */
.howto.inset{border:1px solid var(--line);border-radius:var(--r-sm);
  margin-bottom:var(--s16);background:var(--surface)}
.gloss.standalone{border:1px solid var(--line);border-radius:var(--r-sm);
  margin-top:var(--s24)}
.yt-hint{display:flex;align-items:flex-start;gap:var(--s8);
  font-size:13.5px;line-height:1.55;color:rgba(245,242,234,.7);
  margin:0 0 var(--s16);max-width:64ch}
.yt-hint svg{flex:none;margin-top:2px;color:var(--accent)}

.gloss{border-top:1px solid var(--line);background:var(--surface)}
.gloss summary{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s16);cursor:pointer;list-style:none;padding:var(--s16) var(--s24);
  font-size:13.5px;font-weight:700;color:var(--accent-text)}
.gloss summary::-webkit-details-marker{display:none}
.gloss summary:hover{color:var(--ink)}
.gloss summary:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.gloss .chev{border-color:var(--accent-dk)}
.gloss dl{margin:0;padding:0 var(--s24) var(--s16);max-width:76ch}
.gloss dt{font-size:13.5px;font-weight:700;color:var(--ink);margin-top:var(--s12)}
.gloss dt:first-child{margin-top:0}
.gloss dd{margin:2px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted)}

/* ── visitor tabs + sheet ─────────────────────────────────────────── */
#tabs{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:65;
  display:flex;flex-direction:column;gap:4px}
#tabs button{writing-mode:vertical-rl;transform:rotate(180deg);cursor:pointer;border:0;
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s16) var(--s8);
  font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;background:var(--ink);color:var(--surface);
  box-shadow:var(--shadow);transition:background .13s ease-out,padding .13s ease-out}
#tabs button:hover{background:var(--accent-dk);padding-right:var(--s12)}
#tabs button.add{background:var(--accent);color:var(--ink)}
#tabs button.add:hover{background:var(--accent-hi)}
@media(max-width:900px){
  #tabs{top:auto;bottom:12px;left:auto;right:12px;transform:none;
    flex-direction:row;gap:6px;opacity:.92}
  #tabs button{writing-mode:horizontal-tb;transform:none;padding:9px 13px;
    font-size:10.5px;border-radius:var(--r-pill)}
  #tabs button:hover{padding-right:13px}
}
#sheet{position:fixed;inset:0;z-index:300;display:none;background:rgba(20,18,11,.6);
  padding:var(--s24);align-items:center;justify-content:center}
#sheet.on{display:flex}
#sheet .pane{background:var(--card);border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  max-width:540px;width:100%;padding:var(--s48);max-height:90vh;overflow:auto}
#sheet h3{margin-bottom:var(--s8);font-size:24px}
#sheet p{font-size:16px;color:var(--muted);margin:0 0 var(--s24)}
#sheet label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 var(--s8)}
#sheet select,#sheet textarea,#sheet input{width:100%;box-sizing:border-box;
  padding:var(--s12);background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--body);font-size:16px;margin-bottom:var(--s16)}
#sheet textarea{resize:vertical;min-height:100px}
#sheet .btn{width:100%}
#sheet .note{font-size:12.5px;color:var(--muted);text-align:center;margin:var(--s16) 0 0}
#sheet .close{background:none;border:0;cursor:pointer;float:right;font-size:26px;
  line-height:1;color:var(--muted);padding:0}
#sheet .ok{display:none;text-align:center;padding:var(--s32) 0}
#sheet .ok b{display:block;font-family:var(--disp);font-size:22px;margin-bottom:var(--s8)}
@media(max-width:900px){#sheet .pane{padding:var(--s32)}}

/* ── phone: the CTA is the page, so give it the full column ───────── */
@media(max-width:900px){
  .cta-wrap{display:block;width:100%;padding:var(--s16) 0 var(--s24)}
  .btn{width:100%}
  .btn-lg{font-size:17px;padding:var(--s16) var(--s24)}
  .btn .stack{gap:3px}
  .btn .stack span{white-space:nowrap}
  .btn-line{width:100%;justify-content:center}
  .tap-finger{right:6px;bottom:6px;font-size:34px}
  /* the tabs are fixed, so hold them back until the hero CTA is passed */
  #tabs{opacity:0;pointer-events:none;transition:opacity .25s ease-out}
  body.scrolled #tabs{opacity:.92;pointer-events:auto}
}

/* Overpass sets the middot hard against the right edge of its advance, so
   the separator gets a real box with its own asymmetric padding. */
.sep{display:inline-block;padding:0 .5em 0 .18em;opacity:.65}