/* =================================================================
   THE BILL YOU NEVER GOT — tokens
   Light pastel aurora, white paper cards. Comic lines in a bold
   grotesque; the emotional half of every line turns to a soft serif.
   Red ink is reserved for stamps and corrections.
   ================================================================= */
:root{
  color-scheme: light;
  --cream:  #fbf4ee;
  --paper:  #ffffff;
  --ink:    #241d35;
  --ink-2:  rgba(36,29,53,.68);
  --ink-3:  rgba(36,29,53,.42);
  --line:   rgba(36,29,53,.1);
  --peach:  #ffcfb3;
  --lilac:  #d9cbff;
  --mint:   #c4f0de;
  --sky:    #c9e3ff;
  --rose:   #e5484d;
  --shadow: 0 1px 2px rgba(36,29,53,.06), 0 18px 50px -18px rgba(36,29,53,.22);

  --f-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --f-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --f-hand:    "Caveat", "Comic Sans MS", cursive;

  --gl: max(clamp(20px, 6vw, 112px), env(safe-area-inset-left, 0px));
  --gr: max(clamp(20px, 6vw, 112px), env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
.word{ display:inline-block; white-space:nowrap; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--f-body);
  font-size:17px; line-height:1.6; overflow-x:hidden; overflow-x:clip; -webkit-font-smoothing:antialiased; }
h1,h2,h3,p{ margin:0; }
h1,h2,h3{ font-family:var(--f-display); text-wrap:balance; line-height:1.02; }
a{ color:inherit; }
.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.hand{ font-family:var(--f-hand); }
.serif-i{ font-family:var(--f-serif); font-style:italic; font-weight:400; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
::selection{ background:var(--lilac); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:6px; }

/* ---------- aurora ---------- */
.aurora{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.85; will-change:transform; }
.b1{ width:55vmax; height:55vmax; background:var(--peach); left:-15vmax; top:-18vmax; animation:drift1 22s ease-in-out infinite alternate; }
.b2{ width:48vmax; height:48vmax; background:var(--lilac); right:-14vmax; top:10vh; animation:drift2 26s ease-in-out infinite alternate; }
.b3{ width:42vmax; height:42vmax; background:var(--mint); left:10vw; bottom:-20vmax; animation:drift3 24s ease-in-out infinite alternate; }
.b4{ width:34vmax; height:34vmax; background:var(--sky); right:12vw; bottom:-10vmax; animation:drift1 30s ease-in-out infinite alternate-reverse; }
@keyframes drift1{ to{ transform:translate(12vw, 10vh) scale(1.12); } }
@keyframes drift2{ to{ transform:translate(-14vw, 14vh) scale(.92); } }
@keyframes drift3{ to{ transform:translate(16vw, -12vh) scale(1.08); } }

.progress{ position:fixed; left:0; right:0; top:0; height:3px; z-index:60; }
.progress span{ display:block; height:100%; width:100%; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg, #ff9c7a, #a98bff, #6fd3b0); }

/* ---------- top bar ---------- */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; gap:16px;
  padding:max(14px, env(safe-area-inset-top,0px)) var(--gr) 14px var(--gl); pointer-events:none; }
.topbar > *{ pointer-events:auto; }
.topbar__mark{ font-family:var(--f-display); font-weight:800; font-size:1.05rem; letter-spacing:-.02em; }
.topbar__mark .dot{ color:var(--rose); }
.topbar__balance{ margin-left:auto; font-size:.68rem; letter-spacing:.12em; color:var(--ink-3); }
.topbar__balance b{ color:var(--ink); font-weight:600; }
.sound{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.7); border:1px solid var(--line);
  border-radius:999px; padding:8px 14px; font:500 .8rem var(--f-body); color:var(--ink); cursor:pointer;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:var(--shadow); }
.sound__bars{ display:flex; align-items:flex-end; gap:2px; height:12px; }
.sound__bars i{ width:2px; height:3px; background:var(--ink); border-radius:2px; transition:height .2s; }
.sound[aria-pressed="true"] .sound__bars i{ animation:eq .9s ease-in-out infinite; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2){ animation-delay:.15s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3){ animation-delay:.3s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(4){ animation-delay:.45s; }
@keyframes eq{ 0%,100%{ height:3px; } 50%{ height:12px; } }
@media (max-width:560px){ .topbar__balance{ display:none; } .sound{ margin-left:auto; } }

main{ position:relative; z-index:2; }
section{ position:relative; padding-left:var(--gl); padding-right:var(--gr); }

.chapter{ display:inline-flex; align-items:center; gap:10px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin-bottom:28px; }
.chapter span{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--paper); box-shadow:var(--shadow); color:var(--ink); font-weight:600; letter-spacing:0; }
.kicker{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }

/* ---------- hero ---------- */
.hero{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:120px 60px; }
.hero__title{ font-size:clamp(2.9rem, 12vw, 11.5rem); font-weight:800; letter-spacing:-.045em; line-height:.88; margin-top:22px; }
.hero__title .ch-l{ display:inline-block; will-change:transform, font-variation-settings; }
.hero__sub{ margin-top:28px; max-width:34ch; font-family:var(--f-serif); font-style:italic; font-size:clamp(1.3rem, 2.4vw, 1.9rem); line-height:1.3; color:var(--ink-2); }
.hero__cue{ margin-top:54px; display:flex; align-items:center; gap:14px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.cue-line{ width:70px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.cue-line i{ position:absolute; inset:0; background:var(--ink); animation:cue 2s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:translateX(-100%); } 60%,100%{ transform:translateX(100%); } }

/* ---------- hook ---------- */
.hook{ min-height:100vh; display:flex; align-items:center; }
.hook__inner{ max-width:900px; }
.hook__q{ font-family:var(--f-display); font-weight:600; font-size:clamp(2rem, 5.4vw, 4.4rem); letter-spacing:-.03em; line-height:1.05; min-height:2.2em; }
.hook__q .caret{ display:inline-block; width:.06em; height:.9em; background:var(--ink); margin-left:.05em; vertical-align:-.08em; animation:blink .8s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.hook__a{ margin-top:36px; font-family:var(--f-serif); font-style:italic; font-size:clamp(1.6rem, 4vw, 3rem); color:var(--ink-2); }
.hook__stamp{ display:inline-block; margin-top:18px; font-family:var(--f-display); font-weight:800; font-size:clamp(3.6rem, 12vw, 9rem); letter-spacing:-.05em; color:var(--rose); transform-origin:50% 100%; }

/* ---------- mum receipt ---------- */
.mom__pin{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:max(90px, 11vh); }
.printer{ width:min(92vw, 420px); position:relative; z-index:3; }
.printer__body{ height:54px; border-radius:16px 16px 10px 10px; background:linear-gradient(180deg,#fff,#efe9f6); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; position:relative; }
.printer__led{ position:absolute; left:18px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:#6fd3b0; box-shadow:0 0 8px #6fd3b0; }
.printer__slot{ width:82%; height:8px; border-radius:6px; background:var(--ink); opacity:.85; }
.receipt-wrap{ width:min(86vw, 384px); overflow:hidden; margin-top:-14px; padding:0 6px 26px; position:relative; z-index:2; }
.receipt{ background:var(--paper); padding:30px 22px 26px; font-family:var(--f-mono); font-size:12.5px; line-height:1.45; color:var(--ink);
  box-shadow:0 18px 40px -20px rgba(36,29,53,.35);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/16px 10px repeat-x;
          mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/16px 10px repeat-x; }
.r-head{ text-align:center; display:flex; flex-direction:column; gap:2px; }
.r-head strong{ font-size:15px; letter-spacing:.14em; }
.r-head span{ font-size:10.5px; color:var(--ink-2); }
.r-rule{ border-top:1.5px dashed var(--ink-3); margin:14px 0; }
.r-line{ display:flex; justify-content:space-between; gap:14px; padding:4px 0; }
.r-line span{ min-width:0; }
.r-line em{ display:block; font-style:normal; color:var(--ink-3); font-size:11px; }
.r-line b{ font-weight:500; white-space:nowrap; }
.r-sub{ color:var(--ink-2); }
.r-total{ font-size:15px; font-weight:600; padding-top:8px; }
.r-total b{ font-weight:700; }
.r-foot{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font-size:10.5px; color:var(--ink-2); }
.r-barcode{ width:80%; height:34px; background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px); }

/* ---------- beats (big lines) ---------- */
.beat{ min-height:80vh; display:flex; flex-direction:column; justify-content:center; padding-block:100px; position:relative; }
.mask-lines{ font-weight:700; font-size:clamp(2.2rem, 6.6vw, 5.8rem); letter-spacing:-.035em; line-height:1; max-width:15ch; }
.ml{ display:block; overflow:hidden; padding-bottom:.08em; }
.ml > span{ display:inline-block; }
.ml--serif{ font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--ink-2); }
.beat__note{ margin-top:34px; max-width:46ch; font-size:clamp(1.05rem, 1.8vw, 1.3rem); color:var(--ink-2); }
.stamp{ position:absolute; right:max(6vw, 20px); bottom:12vh; transform:rotate(-12deg); border:5px solid var(--rose); color:var(--rose); border-radius:14px;
  padding:10px 22px 8px; font-family:var(--f-display); font-weight:800; font-size:clamp(1.6rem, 4vw, 3rem); letter-spacing:.02em; line-height:1; text-align:center;
  mix-blend-mode:multiply; opacity:.92; background:rgba(229,72,77,.04); }
.stamp small{ display:block; font-family:var(--f-serif); font-style:italic; font-weight:400; font-size:.5em; letter-spacing:0; margin-top:4px; }
@media (max-width:700px){ .stamp{ position:relative; right:auto; bottom:auto; align-self:flex-end; margin-top:40px; } }

/* ---------- dad ---------- */
.dad{ padding-block:120px 40px; }
.terminal{ max-width:560px; border-radius:18px; overflow:hidden; background:#1f1a2e; color:#e9e4ff; box-shadow:var(--shadow); }
.terminal__bar{ display:flex; align-items:center; gap:7px; padding:12px 14px; background:#2a2440; }
.terminal__bar i{ width:11px; height:11px; border-radius:50%; background:#ff8f7a; }
.terminal__bar i:nth-child(2){ background:#ffd479; } .terminal__bar i:nth-child(3){ background:#8fe3be; }
.terminal__bar span{ margin-left:10px; font-size:.75rem; color:#a79fc8; }
.terminal__body{ padding:20px 20px 24px; font-size:.95rem; display:flex; flex-direction:column; gap:6px; min-height:170px; }
.t-err{ color:#ff8f8f; position:relative; }
.t-ok{ color:#8fe3be; }
.glitch.is-glitching::before, .glitch.is-glitching::after{ content:attr(data-text); position:absolute; left:0; top:0; width:100%; overflow:hidden; }
.glitch.is-glitching::before{ color:#7af0ff; transform:translate(-3px,0); clip-path:inset(0 0 55% 0); animation:gl1 .35s steps(2) infinite; }
.glitch.is-glitching::after{ color:#ff6ad5; transform:translate(3px,0); clip-path:inset(50% 0 0 0); animation:gl2 .3s steps(2) infinite; }
@keyframes gl1{ 0%{ clip-path:inset(0 0 70% 0);} 50%{ clip-path:inset(30% 0 30% 0);} 100%{ clip-path:inset(60% 0 5% 0);} }
@keyframes gl2{ 0%{ clip-path:inset(60% 0 0 0);} 50%{ clip-path:inset(10% 0 60% 0);} 100%{ clip-path:inset(40% 0 20% 0);} }
.dad__intro{ margin-top:56px; font-family:var(--f-serif); font-style:italic; font-size:clamp(1.5rem, 3.4vw, 2.5rem); color:var(--ink-2); }
.chips{ display:flex; flex-wrap:wrap; gap:14px; margin-top:22px; }
.chip{ background:var(--paper); box-shadow:var(--shadow); border-radius:999px; padding:14px 24px; font-family:var(--f-display); font-weight:700; font-size:clamp(1.2rem, 2.8vw, 2rem); letter-spacing:-.02em; }
.chip:nth-child(1){ background:#fff4ee; } .chip:nth-child(2){ background:#f4efff; } .chip:nth-child(3){ background:#ecfaf3; }
.road{ margin-top:60px; margin-left:calc(-1 * var(--gl)); margin-right:calc(-1 * var(--gr)); height:min(22vw, 220px); }
.road svg{ width:100%; height:100%; overflow:visible; }
.road path{ stroke:var(--ink-3); stroke-width:1.2; stroke-dasharray:6 10; }
.road__text{ font-family:var(--f-mono); font-size:22px; letter-spacing:.06em; fill:var(--ink); }

/* ---------- friends ---------- */
.friends{ padding-block:120px 40px; display:flex; flex-direction:column; align-items:center; }
.friends .chapter{ align-self:flex-start; }
.phone{ width:min(92vw, 380px); background:var(--paper); border-radius:34px; padding:14px; box-shadow:var(--shadow); }
.phone__top{ display:flex; align-items:center; gap:12px; padding:8px 8px 14px; border-bottom:1px solid var(--line); }
.phone__top b{ display:block; font-size:.95rem; } .phone__top small{ color:var(--ink-3); font-size:.75rem; }
.avatar{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--mint); font-weight:700; }
.phone__chat{ display:flex; flex-direction:column; gap:10px; padding:18px 6px 10px; min-height:360px; background:linear-gradient(180deg, #fbf8ff, #fff); border-radius:0 0 22px 22px; }
.msg{ max-width:78%; padding:10px 14px 6px; border-radius:18px; font-size:.95rem; line-height:1.35; transform-origin:left bottom; }
.msg time{ display:block; text-align:right; font-family:var(--f-mono); font-size:.62rem; color:var(--ink-3); margin-top:2px; }
.msg.them{ align-self:flex-start; background:#f1edf9; border-bottom-left-radius:6px; }
.msg.me{ align-self:flex-end; background:#dff6ea; border-bottom-right-radius:6px; transform-origin:right bottom; }
.sys{ align-self:center; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; padding:6px 0; }

/* ---------- teachers ---------- */
.teach{ padding-block:120px 40px; }
.notebook{ position:relative; max-width:560px; min-height:300px; background:var(--paper); border-radius:6px 18px 18px 6px; padding:34px 30px 34px 76px; box-shadow:var(--shadow);
  background-image:linear-gradient(90deg, transparent 58px, rgba(229,72,77,.35) 58px 60px, transparent 60px), repeating-linear-gradient(180deg, transparent 0 35px, rgba(110,150,220,.22) 35px 36px);
  background-color:var(--paper); }
.nb-q{ font-family:var(--f-body); font-weight:600; font-size:1.1rem; }
.nb-a{ font-size:3.6rem; line-height:1; margin-top:14px; margin-left:46px; color:#36407a; }
.nb-ink{ position:absolute; left:0; top:0; width:400px; height:260px; pointer-events:none; }
.notebook{ overflow:hidden; }
.ink{ fill:none; stroke:var(--rose); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.nb-fix{ font-size:2rem; color:var(--rose); margin-top:6px; margin-left:20px; }
.nb-margin{ position:absolute; right:26px; top:22px; font-size:2.2rem; color:var(--rose); transform:rotate(8deg); }
@media (max-width:560px){ .nb-margin{ top:auto; bottom:18px; right:22px; } .notebook{ padding-bottom:70px; } }
.weight-wave{ margin-top:46px; font-family:var(--f-display); font-size:clamp(2rem, 6vw, 5rem); letter-spacing:-.03em; line-height:1; color:var(--rose); font-weight:400; }
.weight-wave .wv{ display:inline-block; }

/* ---------- math ---------- */
.math{ padding-block:140px 80px; }
.track{ font-size:clamp(.8rem, 1.6vw, 1rem); text-transform:uppercase; color:var(--ink-2); letter-spacing:.1em; }
.math__lead{ margin-top:26px; max-width:24ch; font-family:var(--f-serif); font-style:italic; font-weight:400; font-size:clamp(1.9rem, 4.4vw, 3.6rem); line-height:1.12; letter-spacing:-.01em; }
.calc{ margin-top:60px; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:22px; max-width:1060px; }
.calc__controls, .calc__result{ background:rgba(255,255,255,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:24px; padding:28px; box-shadow:var(--shadow); min-width:0; }
.field + .field{ margin-top:28px; }
.field label{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-weight:500; }
.field output{ font-size:1.6rem; font-weight:600; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; margin-top:14px; cursor:pointer;
  background:linear-gradient(90deg, #ff9c7a, #a98bff); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--paper); border:2px solid var(--ink); box-shadow:var(--shadow); }
input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--paper); border:2px solid var(--ink); }
.calc__fine{ margin-top:28px; font-size:.7rem; color:var(--ink-3); line-height:1.5; }
.calc__label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.calc__num{ font-size:clamp(4rem, 10vw, 7.6rem); font-weight:600; letter-spacing:-.05em; line-height:1; margin-top:6px; color:var(--ink); }
#dots{ display:block; width:100%; height:180px; margin-top:18px; }
.math__after{ margin-top:56px; max-width:30ch; font-family:var(--f-display); font-weight:600; font-size:clamp(1.5rem, 3vw, 2.3rem); letter-spacing:-.02em; line-height:1.15; }
@media (max-width:820px){ .calc{ grid-template-columns:1fr; } }

/* ---------- apply ---------- */
.apply{ padding-block:120px 60px; }
.apply__title{ font-size:clamp(2.6rem, 7.4vw, 6.4rem); font-weight:800; letter-spacing:-.04em; line-height:.95; }
.apply__title .serif-i{ color:var(--rose); }
.apply__sub{ margin-top:22px; max-width:44ch; color:var(--ink-2); font-size:1.1rem; }
.tasks{ margin-top:50px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.task{ background:var(--paper); border-radius:24px; padding:24px; box-shadow:var(--shadow); display:flex; gap:16px; min-width:0; transition:transform .5s var(--ease), background .4s; }
.task.is-done{ background:#f2fbf6; }
.task__check{ flex-shrink:0; position:relative; width:30px; height:30px; cursor:pointer; }
.task__check input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.task__check span{ position:absolute; inset:0; border-radius:10px; border:2px solid var(--ink); background:var(--paper); transition:background .3s; }
.task__check span::after{ content:""; position:absolute; left:9px; top:4px; width:7px; height:13px; border:solid var(--paper); border-width:0 3px 3px 0; transform:rotate(45deg) scale(0); transition:transform .3s var(--ease); }
.task__check input:checked + span{ background:var(--ink); }
.task__check input:checked + span::after{ transform:rotate(45deg) scale(1); }
.task__check input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:3px; }
.task__body{ min-width:0; display:flex; flex-direction:column; gap:10px; }
.task h3{ font-size:1.3rem; font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.task.is-done h3{ text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:var(--rose); }
.task p{ color:var(--ink-2); font-size:.95rem; line-height:1.5; }
.msgbox{ margin-top:auto; background:#f6f2fb; border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:10px; }
.msgbox__text{ color:var(--ink) !important; font-size:.92rem !important; }
.copy{ align-self:flex-start; border:0; background:var(--ink); color:var(--paper); border-radius:999px; padding:8px 16px; font:500 .8rem var(--f-body); cursor:pointer; transition:background .3s; }
.copy.is-copied{ background:#2f9e6f; }
.tasks__count{ margin-top:26px; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
@media (max-width:960px){ .tasks{ grid-template-columns:1fr; max-width:620px; } }

/* ---------- finale ---------- */
.finale{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-block:80px; }
#particles{ width:100%; max-width:1100px; height:min(42vw, 360px); display:block; }
.finale__cta{ display:flex; flex-direction:column; align-items:center; gap:26px; text-align:center; margin-top:10px; }
.finale__line{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.6rem, 4vw, 3rem); letter-spacing:-.03em; }
.btn{ display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--paper); text-decoration:none; border-radius:999px;
  padding:18px 32px; font:600 1rem var(--f-body); box-shadow:0 14px 34px -14px rgba(36,29,53,.6); transition:transform .4s var(--ease), background .3s; }
.btn:hover{ background:#3a2f57; transform:translateY(-3px); }

.footer{ position:relative; z-index:2; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:28px var(--gr) max(28px, env(safe-area-inset-bottom,0px)) var(--gl); font-size:.72rem; letter-spacing:.08em; color:var(--ink-3); border-top:1px solid var(--line); }

/* ---------- shake helper ---------- */
.is-shaking{ animation:shake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake{ 10%,90%{ transform:translate(-2px,1px);} 20%,80%{ transform:translate(4px,-2px);} 30%,50%,70%{ transform:translate(-7px,3px);} 40%,60%{ transform:translate(7px,-3px);} }

@media (prefers-reduced-motion: reduce){
  .blob, .cue-line i, .hook__q .caret{ animation:none; }
  .is-shaking{ animation:none; }
}

/* ---------- age gate ---------- */
.age-gate{ margin-top:44px; max-width:520px; }
.age-gate__label{ display:block; font-family:var(--f-serif); font-style:italic; font-size:clamp(1.25rem, 2.2vw, 1.6rem); color:var(--ink); margin-bottom:14px; }
.age-gate__row{ display:flex; gap:10px; padding:8px; background:rgba(255,255,255,.8); border-radius:999px; box-shadow:var(--shadow); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.age-gate__row input{ flex:1; min-width:0; border:0; background:transparent; font:600 1.4rem var(--f-mono); color:var(--ink); padding:0 18px; outline:none; -moz-appearance:textfield; }
.age-gate__row input::-webkit-outer-spin-button, .age-gate__row input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.age-gate__row input::placeholder{ color:var(--ink-3); font-weight:400; font-size:1.05rem; }
.age-gate .btn{ padding:14px 24px; border:0; cursor:pointer; }
.age-gate__msg{ margin-top:12px; min-height:1.3em; font-size:.75rem; color:var(--rose); letter-spacing:.04em; }
body.is-locked{ overflow:hidden; }
@media (max-width:420px){ .age-gate__row{ flex-direction:column; border-radius:22px; } .age-gate__row input{ padding:12px 14px; } }

/* ---------- receipt: the line that matters ---------- */
.r-why{ color:var(--rose); font-weight:600; font-size:13.5px; }

/* ---------- dad leaderboard ---------- */
.board-sec{ padding-block:40px 20px; }
.board{ max-width:520px; background:var(--paper); border-radius:24px; padding:22px; box-shadow:var(--shadow); }
.board__head{ display:flex; justify-content:space-between; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding:0 6px 14px; border-bottom:1px solid var(--line); }
.board__list{ position:relative; height:152px; margin-top:12px; }
.board__row{ position:absolute; left:0; right:0; height:64px; display:flex; align-items:center; gap:16px; padding:0 16px; border-radius:16px; background:#f7f3fd; }
.board__row[data-who="dad"]{ top:0; }
.board__row[data-who="you"]{ top:76px; background:#fff1e9; }
.board__rank{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--paper); font-weight:600; box-shadow:var(--shadow); }
.board__name{ font-family:var(--f-display); font-weight:700; font-size:1.5rem; letter-spacing:-.02em; }
.board__tag{ margin-left:auto; font-size:.85rem; color:var(--ink-2); text-align:right; }
.board__note{ margin-top:16px; padding:0 6px; font-family:var(--f-serif); font-style:italic; font-size:1.25rem; color:var(--ink-2); }

/* ---------- visit date ---------- */
.visit-label{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.visit-date{ font:500 1rem var(--f-body); color:var(--ink); padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--paper); width:100%; }
.cal-link{ text-decoration:none; display:inline-block; }

/* ---------- salary & status race (replaces leaderboard) ---------- */
.race{ margin:0; max-width:620px; background:var(--paper); border-radius:24px; padding:24px 24px 22px; box-shadow:var(--shadow); }
.race__head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.race__title{ font-family:var(--f-display); font-weight:700; font-size:1.35rem; letter-spacing:-.02em; }
.race__sub{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.race__plot{ position:relative; height:156px; margin-top:16px; }
.race__grid{ position:absolute; left:96px; right:0; top:0; bottom:0; display:flex; justify-content:space-between; pointer-events:none; }
.race__grid i{ width:1px; background:var(--line); }
.race__row{ position:absolute; left:0; right:0; height:62px; display:grid; grid-template-columns:84px minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px; align-items:center; }
.race__row[data-who="dad"]{ top:0; }
.race__row[data-who="you"]{ top:80px; }
.race__label{ grid-row:1 / 3; display:flex; flex-direction:column; line-height:1.15; }
.race__label b{ font-family:var(--f-display); font-size:1.25rem; letter-spacing:-.02em; }
.race__label span{ font-size:.75rem; color:var(--ink-3); }
.race__track{ height:22px; position:relative; }
.race__bar{ position:absolute; left:0; top:0; bottom:0; border-radius:0 4px 4px 0; }
.race__bar--dad{ background:#8b6cff; }
.race__bar--you{ background:#f2774f; }
.race__tag{ font-size:.82rem; color:var(--ink-2); margin-top:6px; }
.race__note{ margin-top:14px; font-family:var(--f-serif); font-style:italic; font-size:1.3rem; color:var(--ink-2); }
.race__clap{ display:inline-block; font-style:normal; }

/* ---------- math turn ---------- */
.math__after{ display:flex; flex-direction:column; gap:22px; }
.math__after p:first-child{ max-width:34ch; }
.math__turn{ font-size:clamp(2rem, 5vw, 3.6rem); color:var(--rose); line-height:1.05; }

/* ---------- wide task with plan ---------- */
.task--wide{ grid-column:1 / -1; }
.visit{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.6fr); gap:12px; }
.ideas{ display:flex; flex-wrap:wrap; gap:8px; }
.idea{ border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:999px; padding:7px 12px; font:500 .8rem var(--f-body); cursor:pointer; transition:background .25s, border-color .25s, transform .25s var(--ease); }
.idea:hover{ border-color:var(--ink); transform:translateY(-1px); }
.idea.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.task--wide .cal-link{ margin-top:4px; }
@media (max-width:760px){ .visit{ grid-template-columns:1fr; } }
.visit .msgbox{ margin-top:0; align-self:start; }

/* ---------- bigger chapter labels ---------- */
.chapter{ gap:14px; font-family:var(--f-display); font-size:clamp(1.5rem, 3.2vw, 2.2rem); font-weight:700; letter-spacing:-.02em; text-transform:none; color:var(--ink); margin-bottom:34px; }
.chapter span{ width:clamp(46px, 5vw, 58px); height:clamp(46px, 5vw, 58px); font-family:var(--f-mono); font-size:clamp(.95rem, 1.6vw, 1.15rem); }
.track{ font-size:clamp(.95rem, 2vw, 1.3rem); color:var(--ink); }

.age-gate__hint{ margin-top:12px; font-size:.72rem; letter-spacing:.04em; color:var(--ink-2); }