@font-face {
  font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
}
/* Sure. website v2. Brand direction G "Pressed" (brand book, round 3).
   Core never changes between themes: Hanken Grotesk, realistic keycaps, sky blue + tangerine,
   tabular figures. A theme only turns dials: ground, weight, tilt, stickers, glitch. */

:root {
  color-scheme: light;
  --font: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --tangerine: #FF8A3D;
  --pad: clamp(16px, 4vw, 40px);
}

/* Parents theme (default) */
:root, [data-audience="parents"] {
  --ground: #EDF2F9; --surface: #FFFFFF; --ink: #12203A; --muted: #4F5E78;
  --accent: #2F6FE0; --eyebrow: #2459C9; --dot: #FF7A2E; --stat: #2F6FE0;
  --key-top: #FFFFFF; --key-bottom: #E7ECF4; --wall: #CCD6E4; --legend: #1F2C44;
  --hot-top: #FFA15E; --hot-bottom: #FF8A3D; --hot-wall: #D9621A; --hot-legend: #12203A;
  --tilt: -1.5deg; --hl-bg: #FFD9BF; --hl-ink: #12203A;
  --w-head: 700; --w-body: 400; --w-key: 600; --track: -0.025em;
  --glitch: none; --soft: rgba(20, 35, 60, .18);
  --section: clamp(72px, 11vw, 140px); --tk: .6deg;
}

/* Teens theme: same hues and type, louder */
[data-audience="teens"] {
  --ground: #78AEF7; --surface: #FFFFFF; --ink: #0E1B33; --muted: #1F3358;
  --accent: #2F6FE0; --eyebrow: #0E1B33; --dot: #FF8A3D; --stat: #0E1B33;
  --key-top: #FFFFFF; --key-bottom: #E6F0FF; --wall: #4F86D6; --legend: #0E1B33;
  --hot-top: #FFA15E; --hot-bottom: #FF8A3D; --hot-wall: #C9541A; --hot-legend: #0E1B33;
  --tilt: -4deg; --hl-bg: #FF8A3D; --hl-ink: #0E1B33;
  --w-head: 900; --w-body: 450; --w-key: 700; --track: -0.035em;
  --glitch: -.025em 0 rgba(255, 138, 61, .6), .025em 0 rgba(255, 255, 255, .55);
  --soft: rgba(14, 27, 51, .28);
  --section: clamp(56px, 9vw, 110px); --tk: 1.6deg;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-weight: var(--w-body); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { font-weight: var(--w-head); letter-spacing: var(--track); line-height: 1.06; text-wrap: balance; }
[data-audience="teens"] h1, [data-audience="teens"] h2 { text-shadow: var(--glitch); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
[data-audience="teens"] :focus-visible { outline-color: var(--ink); }
.wrap { width: min(100%, 1000px); margin-inline: auto; padding-inline: var(--pad); }
.narrow { max-width: 62ch; }
.dot { color: var(--dot); }
/* tangerine and the teen sky blue have near-equal luminance: outline the full stop so it reads */
[data-audience="teens"] .dot { paint-order: stroke fill; -webkit-text-stroke: .08em var(--ink); }
.hl {
  background: var(--hl-bg); color: var(--hl-ink); padding: 0 .14em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---- Keycaps: the core motif ---- */
.key {
  display: inline-block; vertical-align: middle; line-height: 1.1; white-space: nowrap;
  background: var(--wall); padding: .1em .12em .3em; border-radius: .5em; border: 0;
  box-shadow: 0 .28em .55em var(--soft), inset 0 .05em 0 rgba(255, 255, 255, .45);
  rotate: var(--tilt); transition: translate .08s, padding .08s;
  font: inherit; font-size: 1rem; text-decoration: none; cursor: pointer; color: inherit;
}
.key > .cap {
  display: block; color: var(--legend); font-weight: var(--w-key);
  background: linear-gradient(180deg, var(--key-top), var(--key-bottom));
  border-radius: .4em; padding: .55em .85em .65em;
  box-shadow: inset 0 -.06em .12em rgba(0, 0, 0, .08);
}
.key.hot { background: var(--hot-wall); }
.key.hot > .cap { color: var(--hot-legend); background: linear-gradient(180deg, var(--hot-top), var(--hot-bottom)); }
.key.big { font-size: 1.3rem; }
.key.small { font-size: .9rem; }
@media (hover: hover) { a.key:hover, button.key:hover { translate: 0 -.08em; } }
.key:active, a.key:active, button.key:active { translate: 0 .12em; padding-bottom: .18em; }
.keys > .key:nth-child(even), .card .key:nth-child(even) { rotate: calc(var(--tilt) * -.7); }

/* ---- Labels: plain for parents, stickers for teens ---- */
.eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--eyebrow); margin-bottom: 18px;
}
[data-audience="teens"] .eyebrow {
  background: var(--tangerine); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); padding: .3em .7em; rotate: -3deg;
}

/* ---- Header ---- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding-top: env(safe-area-inset-top, 0px);
}
.top .wrap { display: flex; align-items: center; gap: 14px 22px; padding-block: 12px; }
.mark { font-weight: 800; font-size: 1.7rem; letter-spacing: -.04em; text-decoration: none; line-height: 1; }
.switch { margin-left: auto; font-size: .95rem; color: var(--muted); text-underline-offset: 3px; }
.top .key { font-size: .95rem; }
@media (max-width: 480px) { .switch { font-size: .85rem; } .top .key { font-size: .85rem; } }

/* ---- Sections and scroll reveal ---- */
section { padding-block: var(--section); }

/* ---- Flow: scroll-linked, set by site.js as --o / --ty / --s. No JS, no effect. ---- */
.js [data-flow] { opacity: var(--o, 1); transform: translate3d(0, var(--ty, 0px), 0) scale(var(--s, 1)); transform-origin: 50% 60%; }
main, footer { position: relative; z-index: 1; }
.top { transition: box-shadow .4s ease; }
.top.scrolled { box-shadow: 0 8px 24px -12px var(--soft); }

/* ---- Floating keycaps ---- */
.field-layer, .fly-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.field-layer { z-index: 0; }
.fly-layer { z-index: 30; }
.fk { position: absolute; left: 0; top: 0; rotate: 0deg; will-change: transform; transition: padding .09s, margin .09s; }
.fk.far { filter: blur(1.3px); }
.fk.pressed { padding-bottom: .16em; margin-top: .14em; }

/* ---- "S U R E ." typed in on arrival ---- */
.typekeys { display: flex; gap: .32em; font-size: clamp(24px, 4.6vw, 44px); margin-bottom: clamp(22px, 4vw, 40px); }
.tk { display: inline-block; will-change: transform; }
.tk .key { font-size: 1em; rotate: calc(var(--r) * var(--tk)); animation: typein .6s cubic-bezier(.3, .7, .3, 1.25) backwards; animation-delay: calc(var(--i) * 120ms + 250ms); }
.tk .key.pressed { padding-bottom: .16em; translate: 0 .14em; }
.tk .cap { min-width: 1.5em; text-align: center; font-weight: 800; }
@keyframes typein {
  0% { opacity: 0; translate: 0 -.9em; }
  55% { opacity: 1; translate: 0 .12em; padding-bottom: .16em; }
  100% { translate: 0 0; }
}
.hint-keys { display: none; font-weight: 700; color: var(--muted); }
.js .hint-keys { display: block; }
.h-touch { display: none; }
@media (hover: none) { .h-hover { display: none; } .h-touch { display: inline; } }

/* ---- Page to page: cross-document view transitions (progressive, ignored where unsupported) ---- */
@view-transition { navigation: auto; }
.top { view-transition-name: topbar; }
::view-transition-old(root) { animation: vt-out .35s ease both; }
::view-transition-new(root) { animation: vt-in .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(28px); } }

/* ---- 1. Problem ---- */
.problem { padding-top: clamp(48px, 8vw, 96px); padding-bottom: 0; }
.lead { font-size: clamp(1.15rem, 2.6vw, 1.5rem); color: var(--muted); max-width: 30ch; margin-bottom: 22px; }
.problem h1 { font-size: clamp(2.3rem, 7.2vw, 4.6rem); max-width: 18ch; }
.stats { margin-top: clamp(24px, 6vw, 72px); }
.stat { min-height: 62vh; display: grid; align-content: center; gap: 14px; padding-block: 48px; }
.stat .num {
  font-size: clamp(3.4rem, 15vw, 8rem); font-weight: var(--w-head); letter-spacing: -.045em; line-height: .92;
  color: var(--stat); font-variant-numeric: tabular-nums; text-wrap: balance;
}
.stat .num.long { font-size: clamp(2.6rem, 10vw, 5.6rem); }
[data-audience="teens"] .stat .num { text-shadow: var(--glitch); }
.stat .line { font-size: clamp(1.15rem, 2.4vw, 1.5rem); max-width: 34ch; line-height: 1.4; }
.stat .src { font-size: .8rem; color: var(--muted); max-width: 70ch; line-height: 1.5; }
/* v2 (parents): the headline leads, the problem follows, every stat carries its answer */
.problem .sub { font-size: clamp(1.15rem, 2.6vw, 1.45rem); color: var(--muted); max-width: 40ch; margin-top: 22px; }
.hero-cta { margin-top: 30px; }
.problem-text { margin-top: clamp(64px, 11vw, 128px); }
.statement {
  font-size: clamp(1.7rem, 4.8vw, 2.9rem); font-weight: var(--w-head); letter-spacing: var(--track);
  line-height: 1.12; max-width: 22ch; text-wrap: balance;
}
.stat .answer {
  font-size: clamp(1.02rem, 2vw, 1.18rem); line-height: 1.45; max-width: 46ch; margin-top: 4px;
  background: var(--surface); border-left: 5px solid var(--tangerine); border-radius: .8em;
  padding: .8em 1.05em; box-shadow: 0 .6em 1.6em var(--soft);
}
.stat .answer strong { font-weight: 800; }

/* ---- 2. Session ---- */
.session { padding-top: clamp(40px, 6vw, 72px); }
.handover { font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--muted); margin-bottom: 14px; }
.session h2, .me h2, .book h2 { font-size: clamp(2.3rem, 8vw, 4.2rem); }
.oneliner { font-size: 1.25rem; margin: 26px 0 18px; max-width: 46ch; }
.gets { list-style: none; padding: 0; display: grid; gap: 16px; max-width: 60ch; }
.gets li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; }
.gets li::before {
  content: "\2713"; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px;
  background: linear-gradient(180deg, var(--hot-top), var(--hot-bottom)); color: var(--hot-legend);
  border-radius: 7px; font-weight: 800; font-size: .9rem; box-shadow: 0 2px 0 var(--hot-wall);
}
.gets strong { font-weight: 800; }
.formats-h { margin: 56px 0 18px; }
.formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: stretch; }
.card {
  background: var(--surface); border-radius: 1.1em; padding: 24px; display: grid; gap: 12px; align-content: start;
  box-shadow: 0 1em 2.2em var(--soft);
}
.card { transition: translate .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
@media (hover: hover) { .card:hover { translate: 0 -6px; box-shadow: 0 1.5em 3em var(--soft); } }
.card.featured { outline: 3px solid var(--tangerine); outline-offset: -3px; }
.card .tag { font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--eyebrow); }
.card h3 { font-size: 1.35rem; }
.card .meta { font-size: .88rem; color: var(--muted); }
.card .key { justify-self: start; margin-top: 6px; }
.other-link { margin-top: 22px; font-size: .98rem; }
.other-link a { text-underline-offset: 3px; font-weight: 600; }
/* v2 (parents): the offer at a glance, what you learn, what you leave with */
.facts { display: flex; flex-wrap: wrap; gap: 14px 16px; margin: 4px 0 18px; }
.facts .key { font-size: 1.02rem; cursor: default; }
.facts-line { max-width: 56ch; color: var(--muted); }
.session h3.eyebrow { display: block; width: fit-content; margin: 48px 0 18px; }
.more { margin-top: 16px; padding-left: 42px; font-weight: 700; }
.after-cta { margin-top: 34px; }

/* ---- 3. Why me ---- */
.me { display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px, 5vw, 56px); align-items: start; margin-top: 10px; }
.photo {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.1em;
  background: var(--surface); box-shadow: 0 1em 2.2em var(--soft); rotate: var(--tilt);
}
.me h2 { font-size: clamp(2rem, 6vw, 3.2rem); margin-bottom: 10px; }
.me .quote { font-size: 1.2rem; color: var(--muted); margin-bottom: 20px; }
.me ul { padding-left: 1.2em; display: grid; gap: 12px; }
@media (max-width: 600px) { .me { grid-template-columns: 1fr; } .photo { width: 160px; } }

/* ---- 3b. Why it's free (v2, parents) ---- */
.free { padding-top: 0; }
.free h2 { font-size: clamp(2rem, 6vw, 3.2rem); margin-bottom: 14px; }
.free p { font-size: clamp(1.15rem, 2.4vw, 1.4rem); max-width: 46ch; line-height: 1.5; }

/* ---- 4. Book ---- */
.formbox {
  background: var(--surface); border-radius: 1.4em; padding: clamp(22px, 4vw, 40px);
  box-shadow: 0 1.2em 2.6em var(--soft); display: grid; gap: 22px; margin-top: 14px;
}
.formbox h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 20px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .88rem; font-weight: 700; }
.field label span { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: color-mix(in srgb, var(--ground) 35%, #fff); width: 100%;
  border: 2px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: .6em; padding: .65em .8em;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.field textarea { min-height: 110px; resize: vertical; }
.tally { display: block; border: 0; width: 100%; margin-top: 8px; }
.send-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.status { font-weight: 600; }
.reassure { font-size: .92rem; color: var(--muted); margin-top: -8px; }

/* ---- Footer ---- */
footer { padding-block: 56px 72px; display: grid; gap: 16px; font-size: .95rem; }
.cookie { font-size: 1.15rem; font-weight: 700; max-width: 42ch; }
.sources-h { font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.sources { color: var(--muted); font-size: .8rem; padding-left: 1.2em; display: grid; gap: 6px; max-width: 80ch; }

/* ---- Gate (root page) ---- */
.gate-page { position: relative; z-index: 1; min-height: 100svh; display: grid; place-items: center; padding: var(--pad); }
.dialog {
  background: var(--surface); border-radius: 1.4em; padding: clamp(28px, 6vw, 48px); width: min(480px, 100%);
  box-shadow: 0 1.2em 2.6em var(--soft); text-align: center; display: grid; gap: 26px;
}
.dialog .site { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.dialog h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); }
.dialog .keys { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.dialog .reply { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; min-height: 1.6em; }
.dialog .fine { font-size: .82rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-flow] { opacity: 1; transform: none; }
  .key, .card, .top { transition: none; }
  .tk .key { animation: none; }
  .hint-keys { display: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}