:root {
  --ink: #111111;
  --paper: #f7f5ee;
  --paper-2: #fffef9;
  --red: #e64b3c;
  --blue: #3b78c8;
  --yellow: #dceb35;
  --green: #49a56a;
  --muted: #686860;
  --line: rgba(17, 17, 17, 0.16);
  --radius-lg: 32px;
  --radius-md: 22px;
  --shadow: 0 24px 70px rgba(17,17,17,.11);
  --display: "Segoe Print", "Bradley Hand", "Comic Sans MS", ui-rounded, cursive;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 0%, rgba(59,120,200,.07), transparent 26rem),
    radial-gradient(circle at 88% 18%, rgba(220,235,53,.12), transparent 24rem),
    var(--paper);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  opacity: .18;
  pointer-events: none;
  z-index: 100;
  background-image:
    radial-gradient(rgba(17,17,17,.18) .45px, transparent .45px);
  background-size: 6px 6px;
  mix-blend-mode: multiply;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, summary { font: inherit; }
button { color: inherit; }

.section-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.reveal-section { opacity: 0; transform: translateY(24px); }

.scroll-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 4px; z-index: 999;
  background: transparent;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, var(--red), var(--blue), var(--yellow));
}

.site-header {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 60; width: min(1180px, calc(100% - 28px));
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px;
  padding: 12px 14px 12px 16px;
  background: rgba(255,254,249,.82);
  border: 1px solid rgba(17,17,17,.1);
  backdrop-filter: blur(16px);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(17,17,17,.06);
}
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.02em; }
.brand b { color: var(--blue); }
.brand-ball { width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink); position: relative; display: inline-block; }
.brand-ball::before, .brand-ball::after { content:""; position:absolute; width: 12px; height: 6px; border: 1.5px solid #fff; border-color: #fff transparent transparent transparent; border-radius: 50%; left: 3px; }
.brand-ball::before { top: 2px; transform: rotate(28deg); }
.brand-ball::after { bottom: 2px; transform: rotate(208deg); }
.header-right { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.desktop-nav { display: flex; gap: 24px; font-size: 14px; color: #34342f; }
.desktop-nav a { position: relative; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition: transform .25s ease; }
.desktop-nav a:hover::after { transform:scaleX(1); }
.mini-cta { justify-self:end; background:var(--yellow); color:var(--ink); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--blue); padding:9px 15px; border-radius:999px; font-size:13px; font-weight:900; transition:transform .2s ease, box-shadow .2s ease; }
.mini-cta:hover { transform:translateY(-1px); box-shadow:5px 5px 0 var(--blue); }
.nav-toggle {
  display:none; width:46px; height:46px; padding:0; border:2px solid var(--ink); border-radius:50%;
  background:#fffef9; align-items:center; justify-content:center; flex-direction:column; gap:4px; cursor:pointer;
  box-shadow: 4px 4px 0 rgba(17,17,17,.08);
}
.nav-toggle span { width:18px; height:2px; border-radius:999px; background:var(--ink); transition: transform .25s ease, opacity .2s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-overlay {
  position: fixed; inset: 0; z-index: 54; background: rgba(17,17,17,.28); backdrop-filter: blur(4px);
}
.mobile-menu {
  position: fixed; top: 82px; left: 50%; transform: translateX(-50%) translateY(-12px);
  z-index: 55; width: min(1180px, calc(100% - 28px));
  padding: 18px; border: 2px solid var(--ink); border-radius: 24px;
  background: rgba(255,254,249,.96); box-shadow: 0 18px 42px rgba(17,17,17,.14);
  opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mobile-nav { display:grid; gap:6px; }
.mobile-nav a {
  font-weight:700; padding: 14px 12px; border-radius: 14px; border:1px solid rgba(17,17,17,.08);
  background: rgba(255,255,255,.9);
}
.mobile-menu-cta { width:100%; margin-top:14px; }
body.menu-open { overflow: hidden; }

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 44px;
  padding-top: 120px;
  padding-bottom: 88px;
  position: relative;
}
.hero::before {
  content:"";
  position:absolute;
  width:380px;
  height:380px;
  left:-210px;
  top:22%;
  border:2px dashed rgba(59,120,200,.15);
  border-radius:50%;
  pointer-events:none;
}
.hero-copy { position: relative; z-index: 5; }
.eyebrow, .section-kicker { font-size: 12px; letter-spacing: .16em; font-weight: 800; }
.hero-eyebrow {
  display: inline-flex; align-items:center; gap:8px;
  padding: 8px 9px 8px 12px;
  border: 1px solid rgba(17,17,17,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  box-shadow: 0 8px 24px rgba(17,17,17,.04);
}
.eyebrow-dot { width: 7px; height: 7px; border-radius:50%; background: var(--red); box-shadow: 0 0 0 5px rgba(230,75,60,.12); }
.eyebrow-version { color:#fff; background:var(--ink); border-radius:999px; padding:4px 7px; letter-spacing:.08em; font-size:9px; }
.hero-title {
  margin: 24px 0 18px;
  font-family: var(--display);
  font-size: clamp(56px, 6.5vw, 98px);
  line-height: .94;
  letter-spacing: -.062em;
  font-weight: 700;
  text-wrap: balance;
}
.scribble-word { position: relative; white-space: nowrap; }
.scribble-word::after { content:""; position:absolute; left: 2%; right:-2%; bottom: 5px; height: 8px; border-top: 5px solid var(--red); border-radius: 50%; transform: rotate(-2deg); }
.accent-word { color: var(--blue); position: relative; }
.accent-word::after { content:"✦"; color: var(--yellow); text-shadow: 1px 1px 0 var(--ink); position:absolute; font-size:.34em; top:-.3em; right:-.36em; transform:rotate(14deg); }
.hero-lead { max-width: 650px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: #4c4c45; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top: 30px; }
.button { display: inline-flex; align-items:center; justify-content:center; gap:12px; min-height: 52px; padding: 0 22px; border-radius: 999px; font-weight: 800; border: 2px solid var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color:#fff; background:var(--ink); box-shadow: 5px 5px 0 var(--blue); }
.button-primary:hover { box-shadow: 7px 7px 0 var(--blue); }
.button-ghost { background: rgba(255,255,255,.72); }
.button-yellow { background:var(--yellow); color:var(--ink); box-shadow: 5px 5px 0 rgba(255,255,255,.22); }
.button-conversion {
  background:var(--yellow); color:var(--ink); border-color:var(--ink);
  box-shadow:5px 5px 0 var(--blue); position:relative; overflow:hidden; isolation:isolate;
}
.button-conversion::before {
  content:""; position:absolute; inset:0; z-index:-1; background:#f4ff62;
  transform:translateX(-103%) skewX(-16deg); transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.button-conversion:hover { box-shadow:7px 7px 0 var(--blue); }
.button-conversion:hover::before { transform:translateX(0) skewX(0); }
.hero-secondary-cta { border-style:dashed; }
.play-dot { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--yellow); color:var(--ink); font-size:12px; }
.hero-cta-microcopy { margin-top:15px; display:flex; flex-wrap:wrap; align-items:center; gap:7px; color:#616159; font-size:11px; font-weight:700; }
.hero-cta-microcopy > span:first-child { color:var(--green); font-size:15px; }
.hero-cta-microcopy i { font-style:normal; opacity:.42; }
.hero-proof { margin-top: 34px; display:flex; flex-wrap:wrap; gap:9px; font-size: 12px; }
.hero-proof span { padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.64); border:1px dashed rgba(17,17,17,.22); }
.hero-proof b { margin-right:4px; }
.hero-note { margin-top:20px; max-width:520px; display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:16px; color:#55554e; transform:rotate(-1deg); }
.hero-note-arrow { color:var(--red); font-size:28px; line-height:1; }

.hero-visual {
  min-height: 680px;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}
.hero-visual::before {
  content:"";
  position:absolute;
  width:78%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(220,235,53,.32), rgba(59,120,200,.08) 45%, transparent 68%);
  filter:blur(5px);
  z-index:-2;
}
.hero-visual-frame {
  position:absolute;
  inset:6% 1% 4% 3%;
  border:1.5px solid rgba(17,17,17,.14);
  border-radius:42px 42px 110px 42px;
  background:linear-gradient(145deg, rgba(255,255,255,.56), rgba(255,255,255,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 30px 80px rgba(17,17,17,.05);
  transform:rotate(1.2deg);
  z-index:-1;
}
.hero-visual-frame::before, .hero-visual-frame::after {
  content:""; position:absolute; width:18px; height:18px; border-radius:50%; border:2px solid var(--ink); background:var(--paper-2);
}
.hero-visual-frame::before { left:18px; top:18px; box-shadow:30px 0 0 -2px var(--yellow), 60px 0 0 -2px var(--red); }
.hero-visual-frame::after { right:22px; bottom:22px; background:var(--blue); }
#hero-canvas { position:absolute; inset:-1% -13% -2% -8%; width:122%; height:104%; z-index:0; }
.hero-product-card {
  position:absolute; z-index:4; right:2%; bottom:4%; width:220px; padding:10px;
  display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:center;
  background:rgba(255,254,249,.92); border:2px solid var(--ink); border-radius:20px; box-shadow:7px 8px 0 rgba(17,17,17,.12);
  transform:rotate(2.6deg);
}
.hero-product-card img { width:64px; height:80px; border-radius:10px; object-fit:cover; border:1px solid rgba(17,17,17,.18); }
.hero-product-card span { display:block; font-size:9px; letter-spacing:.14em; font-weight:900; color:var(--red); }
.hero-product-card strong { display:block; margin-top:4px; font-family:var(--display); font-size:18px; line-height:1.05; }
.hero-card { position:absolute; z-index:3; min-width: 150px; padding:14px 16px; border:2px solid var(--ink); border-radius:18px; background:rgba(255,254,249,.94); box-shadow: 5px 6px 0 rgba(17,17,17,.13); transform: rotate(-3deg); backdrop-filter:blur(8px); }
.hero-card span { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; border:2px solid var(--blue); color:var(--blue); font-weight:900; margin-right:8px; }
.hero-card strong { font-family:var(--display); font-size:20px; }
.hero-card small { display:block; margin:6px 0 0 39px; color:var(--muted); }
.hero-card-a { left:-1%; top:16%; }
.hero-card-b { right:-1%; top:31%; transform:rotate(3deg); }
.hero-card-c { left:8%; bottom:8%; transform:rotate(2deg); }
.hero-orbit { position:absolute; z-index:2; padding:6px 9px; border-radius:999px; font-size:9px; letter-spacing:.14em; font-weight:900; background:var(--ink); color:#fff; box-shadow:3px 3px 0 rgba(17,17,17,.1); }
.orbit-a { top:9%; right:17%; transform:rotate(5deg); }
.orbit-b { top:53%; left:4%; background:var(--red); transform:rotate(-7deg); }
.orbit-c { bottom:15%; right:18%; background:var(--blue); transform:rotate(4deg); }
.hero-scribble { position:absolute; width: 180px; right:4%; bottom:10%; z-index:2; overflow:visible; }
.hero-scribble path { fill:none; stroke:var(--red); stroke-width:4; stroke-linecap:round; stroke-dasharray: 600; stroke-dashoffset:600; }
.hero-scroll-cue { position:absolute; left:0; bottom:24px; display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:.2em; font-weight:900; color:#66665f; }
.hero-scroll-cue i { width:30px; height:30px; display:grid; place-items:center; border:1px solid rgba(17,17,17,.18); border-radius:50%; font-style:normal; background:rgba(255,255,255,.5); }

.marquee-wrap { overflow:hidden; border-block: 2px solid var(--ink); background: var(--yellow); transform: rotate(-.7deg) scale(1.01); }
.marquee-track { display:flex; align-items:center; gap: 24px; width:max-content; padding: 15px 0; font-size:14px; font-weight:900; letter-spacing:.12em; animation: marquee 24s linear infinite; }
.marquee-track i { font-style:normal; color:var(--red); }
@keyframes marquee { to { transform: translateX(-50%); } }

.problem { padding: 150px 0 120px; }
.section-kicker { color:var(--red); margin-bottom: 18px; }
.section-kicker.light { color:var(--yellow); }
.problem-grid { display:grid; grid-template-columns: 1.25fr .75fr; gap: 80px; align-items:end; }
.problem h2, .method h2, .showcase h2, .curriculum h2, .story-section h2, .audience h2, .faq h2 { font-family:var(--display); letter-spacing:-.04em; font-size:clamp(38px, 4.5vw, 64px); line-height:1.05; margin:0; }
.problem-copy { font-size:18px; line-height:1.7; color:#4b4b45; }
.marker-note { position:relative; display:inline-block; color:var(--ink); font-weight:800; }
.marker-note::before { content:""; position:absolute; z-index:-1; inset:55% -3% 4% -3%; background:rgba(220,235,53,.65); transform:rotate(-1deg); }
.chaos-cards { display:grid; grid-template-columns:repeat(3,1fr); gap: 18px; margin-top:70px; }
.chaos-card { min-height:220px; padding:28px; border:2px solid var(--ink); border-radius:24px; background:var(--paper-2); box-shadow:7px 8px 0 rgba(17,17,17,.08); }
.chaos-card strong { display:block; font-family:var(--display); font-size:28px; margin:18px 0 10px; }
.chaos-card p { color:#5a5a53; line-height:1.55; margin:0; }
.red-x { font-family:var(--display); color:var(--red); font-size:48px; line-height:1; }
.rotate-left { transform:rotate(-1.8deg); }
.rotate-right { transform:rotate(1.5deg); }
.rotate-left-small { transform:rotate(-.7deg); }

.method { padding: 80px 0 150px; }
.method-head { display:grid; grid-template-columns: 1fr .55fr; gap:60px; align-items:end; }
.method-head p, .curriculum-head > p { font-size:18px; line-height:1.65; color:#55554f; margin:0; }
.method-steps { margin-top:70px; display:grid; grid-template-columns:repeat(4,1fr); border:2px solid var(--ink); border-radius:28px; overflow:hidden; background:rgba(255,255,255,.55); }
.method-step { padding:32px 24px 34px; min-height:280px; position:relative; border-right:2px solid var(--ink); }
.method-step:last-child { border-right:0; }
.method-step:nth-child(2) { background:rgba(59,120,200,.08); }
.method-step:nth-child(3) { background:rgba(220,235,53,.18); }
.method-step:nth-child(4) { background:rgba(230,75,60,.07); }
.step-num { position:absolute; top:18px; right:18px; font-size:12px; font-weight:900; color:#777; }
.step-icon { width:78px; height:78px; border:2px solid var(--ink); border-radius:22px; display:grid; place-items:center; font-family:var(--display); font-size:44px; background:#fff; transform:rotate(-3deg); }
.method-step:nth-child(even) .step-icon { transform:rotate(3deg); }
.method-step h3 { font-family:var(--display); font-size:30px; margin:24px 0 8px; }
.method-step p { color:#5d5d56; line-height:1.55; margin:0; }

.showcase {
  background:#0f1113;
  color:#fff;
  padding: 150px 0 145px;
  position:relative;
  overflow:hidden;
  min-height:900px;
}
.showcase::before {
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(15,17,19,.98) 0%, rgba(15,17,19,.93) 37%, rgba(15,17,19,.58) 68%, rgba(15,17,19,.78) 100%),
    radial-gradient(circle at 72% 42%, rgba(59,120,200,.28), transparent 24rem),
    radial-gradient(circle at 18% 80%, rgba(220,235,53,.08), transparent 18rem);
  pointer-events:none;
}
.showcase::after {
  content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; z-index:2;
  background:linear-gradient(transparent, rgba(255,255,255,.14), transparent);
  opacity:.6;
}
.showcase-bg-media { position:absolute; inset:-8% -5% -10% 46%; z-index:0; overflow:hidden; opacity:.76; }
.showcase-bg-media img { width:100%; height:100%; object-fit:cover; object-position:center 22%; filter:saturate(.88) contrast(1.05); transform:scale(1.08); }
.showcase-grid-lines {
  position:absolute; inset:0; z-index:2; opacity:.12; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(90deg, transparent 0 25%, #000 55% 100%);
}
.showcase-inner { position:relative; z-index:3; display:grid; grid-template-columns:.82fr 1.18fr; gap:80px; align-items:center; }
.showcase-copy { position:relative; z-index:4; max-width:560px; }
.showcase-copy h2 { max-width:540px; }
.showcase-lead { color:#c7c7bd; line-height:1.75; font-size:18px; max-width:540px; }
.showcase-tabs { display:flex; gap:8px; flex-wrap:wrap; margin: 30px 0 20px; }
.preview-tab {
  border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.03); color:#fff;
  border-radius:999px; padding:10px 14px; cursor:pointer; transition:all .25s ease;
}
.preview-tab:hover { border-color:rgba(255,255,255,.55); transform:translateY(-1px); }
.preview-tab.active { color:var(--ink); background:var(--yellow); border-color:var(--yellow); box-shadow:0 0 0 4px rgba(220,235,53,.08); }
.showcase-focus-copy {
  margin:0 0 30px; padding:14px 16px 15px; max-width:450px;
  border-left:3px solid var(--blue); background:rgba(255,255,255,.045); border-radius:0 14px 14px 0;
}
.showcase-focus-copy > span { font-size:9px; letter-spacing:.16em; font-weight:900; color:var(--yellow); }
.showcase-focus-copy strong { display:block; margin-top:6px; font-family:var(--display); font-size:24px; }
.showcase-focus-copy p { margin:4px 0 0; font-size:14px; line-height:1.5; color:#aeb3b7; }
.tick-list { padding:0; margin:30px 0 0; list-style:none; display:grid; gap:12px; }
.tick-list li { color:#e7e7df; }
.tick-list li::before { content:"✓"; display:inline-grid; place-items:center; width:22px; height:22px; margin-right:10px; border-radius:50%; background:var(--blue); color:#fff; font-size:13px; font-weight:900; }

.book-stage { min-height:720px; display:grid; place-items:center; position:relative; perspective:1500px; transform-style:preserve-3d; }
.book-stage::before { content:""; position:absolute; width:66%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(59,120,200,.34), rgba(220,235,53,.09) 40%, transparent 67%); filter:blur(14px); }
.book-aura { position:absolute; width:72%; height:72%; border:1px solid rgba(255,255,255,.18); border-radius:50%; transform:rotate(-18deg); }
.book-aura::before, .book-aura::after { content:""; position:absolute; inset:9%; border:1px dashed rgba(220,235,53,.18); border-radius:50%; }
.book-aura::after { inset:20%; border-color:rgba(59,120,200,.22); transform:rotate(18deg); }
.book-shadow { position:absolute; width:58%; height:10%; bottom:7%; filter:blur(24px); background:rgba(0,0,0,.72); border-radius:50%; transform:rotate(-7deg); }
.book-stack { position:absolute; width:min(480px, 72vw); aspect-ratio:4/5; border-radius:18px 24px 24px 18px; overflow:hidden; border:1px solid rgba(255,255,255,.18); box-shadow:0 26px 70px rgba(0,0,0,.28); }
.book-stack img { width:100%; height:100%; object-fit:cover; }
.book-stack-back { transform:translate(-48px, 12px) rotate(-10deg) scale(.91); opacity:.24; filter:saturate(.7); }
.book-stack-mid { transform:translate(45px, 5px) rotate(7deg) scale(.94); opacity:.38; filter:saturate(.8); }
.book-mockup { width:min(520px, 78vw); aspect-ratio: 4/5; position:relative; transform:rotateY(-10deg) rotateX(3deg) rotateZ(2deg); transform-style:preserve-3d; transition: transform .55s cubic-bezier(.2,.8,.2,1); z-index:3; }
.book-page { position:absolute; inset:0; overflow:hidden; border-radius:18px 24px 24px 18px; box-shadow:0 42px 110px rgba(0,0,0,.58); border:1px solid rgba(255,255,255,.24); background:#fff; }
.book-page img { width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .72s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
.book-spine { position:absolute; z-index:4; top:2%; bottom:2%; width:18px; left:-14px; border-radius:10px 0 0 10px; background:linear-gradient(90deg,#060606,#4a4a45); transform:translateZ(-4px); }
.page-glare { position:absolute; inset:0; background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.24) 40%,transparent 62%); transform:translateX(-90%); mix-blend-mode:screen; }
.book-metric { position:absolute; z-index:6; min-width:116px; padding:11px 13px; border:1px solid rgba(255,255,255,.22); border-radius:16px; background:rgba(15,17,19,.74); backdrop-filter:blur(12px); box-shadow:0 14px 28px rgba(0,0,0,.22); }
.book-metric b { display:block; font-family:var(--display); color:var(--yellow); font-size:30px; line-height:1; }
.book-metric span { display:block; margin-top:4px; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:#d7d8d5; }
.metric-top { right:1%; top:17%; transform:rotate(3deg); }
.metric-bottom { left:1%; bottom:16%; transform:rotate(-4deg); }
.floating-note { position:absolute; z-index:6; padding:12px 15px; border:2px solid #fff; border-radius:14px; font-family:var(--display); font-size:16px; color:var(--ink); box-shadow:0 12px 30px rgba(0,0,0,.2); }
.note-blue { left:2%; top:26%; background:#a9c8ef; transform:rotate(-5deg); }
.note-red { right:-1%; bottom:20%; background:#f38b80; transform:rotate(4deg); }
.book-stage-caption { position:absolute; bottom:1%; right:11%; z-index:5; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); }

.conversion-nudge {
  margin-top:70px; padding:24px 26px; border:2px solid var(--ink); border-radius:24px;
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  background:rgba(255,254,249,.88); box-shadow:6px 7px 0 rgba(17,17,17,.1);
}
.conversion-nudge > div { max-width:710px; }
.conversion-kicker { display:block; font-size:9px; letter-spacing:.16em; font-weight:900; color:var(--red); margin-bottom:7px; }
.conversion-nudge strong { display:block; font-family:var(--display); font-size:clamp(23px,2.4vw,34px); line-height:1.08; }
.conversion-nudge small { display:block; margin-top:7px; color:#5d5d56; line-height:1.5; }
.conversion-nudge .button { flex:0 0 auto; white-space:nowrap; }
.conversion-nudge-blue { background:#dceafb; }
.conversion-nudge-yellow { background:#f1f6a9; }
.conversion-nudge-light { background:#fffef9; }
.audience-nudge { grid-column:1 / -1; margin-top:26px; }
.showcase-cta { margin-top:28px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.showcase-cta small { color:#9da1a4; }
.numbers { padding: 90px 0 120px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.numbers article { padding:28px 20px; border-top:2px solid var(--ink); }
.numbers strong { display:block; font-family:var(--display); font-size:58px; color:var(--blue); letter-spacing:-.05em; }
.numbers span { font-size:14px; color:#5e5e57; }

.curriculum { padding:60px 0 140px; }
.curriculum-head { display:grid; grid-template-columns:1fr .42fr; gap:70px; align-items:end; margin-bottom:55px; }
.curriculum-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.curriculum-card { min-height:270px; position:relative; padding:22px; border:2px solid var(--ink); border-radius:24px; background:rgba(255,255,255,.7); overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; }
.curriculum-card:hover { transform:translateY(-5px) rotate(-.4deg); box-shadow:6px 7px 0 rgba(17,17,17,.12); }
.curriculum-card > span { display:grid; place-items:center; width:35px; height:35px; border:2px solid var(--ink); border-radius:50%; font-size:12px; font-weight:900; }
.curriculum-card h3 { font-family:var(--display); font-size:29px; margin:26px 0 8px; }
.curriculum-card p { color:#51514b; line-height:1.55; margin:0; max-width:90%; }
.card-blue { background:#dceafb; }
.card-yellow { background:#f1f6a9; }
.card-red { background:#f9d8d4; }
.doodle-lines { position:absolute; width:80px; height:50px; right:8px; bottom:8px; border-top:4px solid var(--blue); border-radius:50%; transform:rotate(-12deg); }
.mini-grip { position:absolute; right:22px; bottom:20px; width:22px; height:90px; border:4px solid var(--ink); border-radius:12px; transform:rotate(28deg); background:repeating-linear-gradient(0deg,var(--blue) 0 6px,#fff 6px 9px); }
.footprints { position:absolute; right:16px; bottom:12px; font-size:56px; color:var(--blue); transform:rotate(-20deg); }
.swing-arc { position:absolute; right:-15px; bottom:-6px; width:115px; height:115px; border:4px solid transparent; border-top-color:var(--red); border-radius:50%; transform:rotate(25deg); }
.doodle-star { position:absolute; right:20px; bottom:12px; color:var(--red); font-size:52px; transform:rotate(13deg); }
.serve-ball { position:absolute; right:25px; bottom:22px; width:46px; height:46px; border-radius:50%; background:var(--yellow); border:3px solid var(--ink); box-shadow:0 -52px 0 -17px rgba(220,235,53,.6), 0 -90px 0 -21px rgba(220,235,53,.3); }
.mini-net { position:absolute; right:13px; bottom:17px; width:100px; height:48px; border:3px solid var(--ink); background:repeating-linear-gradient(90deg,transparent 0 12px,var(--ink) 12px 14px), repeating-linear-gradient(0deg,transparent 0 10px,var(--ink) 10px 12px); opacity:.8; }
.court-arrows { position:absolute; right:20px; bottom:16px; font-size:42px; color:var(--blue); }

.story-section { padding: 100px 0 140px; background:#dceafb; border-block:2px solid var(--ink); }
.story-wrap { display:grid; grid-template-columns:.72fr 1.28fr; gap:80px; align-items:start; }
.story-sticky { position:sticky; top:130px; }
.story-sticky p { color:#4c4c46; line-height:1.7; max-width:500px; }
.story-progress { width:100%; height:8px; background:rgba(17,17,17,.12); border:1px solid rgba(17,17,17,.22); border-radius:999px; overflow:hidden; margin-top:30px; }
.story-progress span { display:block; width:100%; height:100%; background:var(--red); transform-origin:left; transform:scaleX(0); }
.story-cards { display:grid; gap:26px; }
.story-cards article { min-height:320px; display:flex; flex-direction:column; justify-content:end; padding:34px; border:2px solid var(--ink); border-radius:28px; background:var(--paper-2); box-shadow:8px 9px 0 rgba(17,17,17,.12); }
.story-cards article:nth-child(even) { transform:rotate(1deg); }
.story-cards article:nth-child(odd) { transform:rotate(-.7deg); }
.story-cards span { font-size:12px; font-weight:900; letter-spacing:.13em; color:var(--red); }
.story-cards h3 { font-family:var(--display); font-size:42px; margin:15px 0 8px; }
.story-cards p { max-width:580px; line-height:1.65; color:#55554e; margin:0; }

.audience { padding:140px 0; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.audience-card { min-height:520px; border:2px solid var(--ink); border-radius:30px; padding:36px; display:flex; flex-direction:column; }
.audience-card.good { background:#eff5ba; transform:rotate(-.5deg); }
.audience-card.not { background:#f1eee5; transform:rotate(.5deg); }
.pill { align-self:flex-start; border:1.5px solid var(--ink); border-radius:999px; padding:8px 12px; font-size:11px; font-weight:900; letter-spacing:.08em; }
.audience-card h2 { font-size:44px; margin-top:34px; }
.audience-card ul { margin:auto 0 0; padding:0; list-style:none; display:grid; gap:15px; }
.audience-card li { border-top:1px solid rgba(17,17,17,.2); padding-top:14px; }
.audience-card.good li::before { content:"✓"; color:var(--green); font-weight:900; margin-right:10px; }
.audience-card.not li::before { content:"—"; color:var(--red); font-weight:900; margin-right:10px; }

.offer { padding: 20px 0 150px; }
.offer-card { position:relative; overflow:hidden; background:var(--blue); color:#fff; border:3px solid var(--ink); border-radius:36px; box-shadow:10px 12px 0 var(--ink); padding:48px; }
.offer-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.22),transparent 18rem), linear-gradient(135deg,transparent 55%,rgba(17,17,17,.08)); }
.offer-top, .offer-grid { position:relative; z-index:2; }
.offer-top { display:flex; align-items:flex-start; justify-content:space-between; gap:40px; }
.offer-top h2 { font-family:var(--display); font-size:clamp(46px,6vw,76px); line-height:.96; letter-spacing:-.05em; margin:12px 0 0; }
.offer-top h2 span { color:var(--yellow); font-size:.6em; }
.offer-ball { width:120px; aspect-ratio:1; border-radius:50%; background:var(--yellow); border:4px solid var(--ink); position:relative; transform:rotate(8deg); box-shadow:8px 8px 0 rgba(17,17,17,.18); }
.offer-ball::before, .offer-ball::after { content:""; position:absolute; width:72%; height:38%; border:4px solid #fff; border-color:#fff transparent transparent transparent; border-radius:50%; left:14%; }
.offer-ball::before { top:6%; transform:rotate(25deg); }
.offer-ball::after { bottom:5%; transform:rotate(205deg); }
.offer-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:60px; margin-top:55px; align-items:end; }
.offer-includes h3 { font-family:var(--display); font-size:30px; margin:0 0 18px; }
.offer-includes ul { list-style:none; padding:0; margin:0; display:grid; gap:13px; color:#e9eef8; }
.offer-includes b { color:var(--yellow); margin-right:8px; }
.offer-buy { padding:28px; border:2px solid rgba(255,255,255,.36); border-radius:24px; background:rgba(17,17,17,.12); backdrop-filter:blur(8px); }
.offer-label { font-size:11px; letter-spacing:.13em; font-weight:900; color:var(--yellow); }
.price-slot { min-height:72px; font-family:var(--display); font-size:30px; line-height:1.1; margin:18px 0 20px; }
.offer-buy .button { width:100%; }
.offer-buy small { display:block; margin-top:13px; color:#d8e0ee; text-align:center; }
.offer-underline { position:absolute; z-index:1; bottom:16px; left:3%; width:94%; height:36px; }
.offer-underline path { fill:none; stroke:var(--yellow); stroke-width:5; stroke-linecap:round; stroke-dasharray:800; stroke-dashoffset:800; }

.faq { padding:50px 0 140px; display:grid; grid-template-columns:.65fr 1.35fr; gap:90px; }
.faq-head { position:sticky; top:130px; align-self:start; }
.faq-head h2 { font-size:48px; }
.faq-list { border-top:2px solid var(--ink); }
details { border-bottom:2px solid var(--ink); }
summary { list-style:none; cursor:pointer; padding:25px 45px 25px 0; font-family:var(--display); font-size:25px; position:relative; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:4px; top:18px; width:32px; height:32px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:50%; font-family:var(--sans); font-size:22px; }
details[open] summary::after { content:"−"; background:var(--yellow); }
details p { color:#595951; line-height:1.65; padding:0 50px 26px 0; max-width:750px; }

.final-cta { background:var(--ink); color:#fff; overflow:hidden; }
.final-cta-inner { min-height:720px; position:relative; display:grid; grid-template-columns:1fr .7fr; gap:80px; align-items:center; padding-block:100px; }
.final-cta h2 { font-family:var(--display); font-size:clamp(62px,9vw,126px); line-height:.8; letter-spacing:-.06em; margin:24px 0 0; position:relative; z-index:2; }
.final-cta h2 em { color:var(--yellow); font-style:normal; }
.final-cta-copy { position:relative; z-index:2; align-self:end; padding-bottom:40px; }
.final-cta-copy p { font-size:20px; line-height:1.6; color:#c8c8bd; max-width:420px; }
.final-court { position:absolute; right:-8%; bottom:-14%; width:52%; aspect-ratio:1.7/1; border:3px solid rgba(59,120,200,.45); transform:rotate(-12deg) skewX(-8deg); }
.final-court::before { content:""; position:absolute; left:50%; top:0; bottom:0; border-left:3px solid rgba(59,120,200,.45); }
.final-court::after { content:""; position:absolute; top:50%; left:0; right:0; border-top:3px solid rgba(59,120,200,.45); }
.final-court span:nth-child(1), .final-court span:nth-child(2) { position:absolute; top:25%; bottom:25%; width:0; border-left:2px solid rgba(59,120,200,.35); }
.final-court span:nth-child(1) { left:25%; }
.final-court span:nth-child(2) { right:25%; }

.footer { min-height:140px; display:grid; grid-template-columns:1fr 1fr auto; gap:30px; align-items:center; font-size:13px; color:#595951; }
.footer p { text-align:center; }

.toast { position:fixed; z-index:200; left:50%; bottom:24px; transform:translate(-50%,120%); opacity:0; padding:14px 18px; border-radius:14px; background:var(--ink); color:#fff; box-shadow:var(--shadow); font-size:14px; }
.toast code { color:var(--yellow); }
.toast.show { animation: toastIn 3.2s both; }
@keyframes toastIn { 10%, 86% { transform:translate(-50%,0); opacity:1; } 100% { transform:translate(-50%,120%); opacity:0; } }

@media (max-width: 980px) {
  .site-header { grid-template-columns:1fr auto; }
  .desktop-nav, .mini-cta { display:none; }
  .nav-toggle { display:flex; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:135px; padding-bottom:90px; }
  .hero-scroll-cue { display:none; }
  .hero-visual { min-height:610px; margin-top:20px; }
  .hero-product-card { right:4%; bottom:3%; }
  .problem-grid, .method-head, .showcase-inner, .curriculum-head, .story-wrap, .faq { grid-template-columns:1fr; gap:40px; }
  .problem-grid { align-items:start; }
  .chaos-cards { grid-template-columns:1fr; }
  .method-steps { grid-template-columns:1fr 1fr; }
  .method-step:nth-child(2) { border-right:0; }
  .method-step:nth-child(-n+2) { border-bottom:2px solid var(--ink); }
  .showcase-inner { text-align:left; }
  .showcase { min-height:auto; }
  .showcase::after { display:none; }
  .showcase-bg-media { inset:38% -16% -10% 18%; opacity:.32; }
  .showcase-grid-lines { opacity:.08; }
  .book-stage { min-height:680px; }
  .numbers, .curriculum-grid { grid-template-columns:1fr 1fr; }
  .story-sticky, .faq-head { position:relative; top:auto; }
  .audience { grid-template-columns:1fr; }
  .offer-grid { grid-template-columns:1fr; }
  .final-cta-inner { grid-template-columns:1fr; min-height:820px; }
  .final-cta-copy { align-self:start; }
}

@media (max-width: 640px) {
  .section-shell { width:min(100% - 24px, 1180px); }
  .site-header { top:8px; width:calc(100% - 16px); padding:10px 10px 10px 13px; }
  .brand { font-size:15px; }
  .nav-toggle { width:44px; height:44px; }
  .mobile-menu { top:70px; width:calc(100% - 16px); padding:14px; }
  .hero { padding-top:110px; gap:0; }
  .hero-title { font-size: clamp(50px, 15vw, 69px); }
  .hero-note { font-size:14px; }
  .hero-lead { font-size:16px; }
  .hero-actions .button { width:100%; }
  .hero-proof { gap:7px; }
  .hero-proof span { width:100%; }
  .hero-visual { min-height:500px; margin-top:10px; }
  #hero-canvas { inset:0 -28%; width:156%; height:100%; }
  .hero-card { min-width:128px; padding:10px 11px; }
  .hero-card strong { font-size:16px; }
  .hero-card small { font-size:11px; }
  .hero-card-a { left:0; top:17%; }
  .hero-card-b { right:0; top:38%; }
  .hero-card-c { left:2%; bottom:10%; }
  .hero-product-card { width:178px; grid-template-columns:48px 1fr; right:0; bottom:2%; padding:8px; }
  .hero-product-card img { width:48px; height:60px; }
  .hero-product-card strong { font-size:15px; }
  .hero-orbit { display:none; }
  .hero-visual-frame { inset:7% 0 4%; border-radius:30px 30px 70px 30px; }
  .problem, .method, .curriculum, .audience { padding-block:90px; }
  .problem h2, .method h2, .showcase h2, .curriculum h2, .story-section h2, .audience h2, .faq h2 { font-size:38px; }
  .method-steps, .numbers, .curriculum-grid { grid-template-columns:1fr; }
  .method-step { border-right:0; border-bottom:2px solid var(--ink); min-height:230px; }
  .method-step:last-child { border-bottom:0; }
  .method-step:nth-child(2) { border-bottom:2px solid var(--ink); }
  .showcase { padding-block:100px 90px; }
  .showcase-bg-media { inset:46% -28% -4% 4%; opacity:.28; }
  .showcase-copy { max-width:none; }
  .book-stage { min-height:560px; margin-top:10px; }
  .floating-note { font-size:12px; }
  .note-blue { left:-2%; }
  .note-red { right:-2%; }
  .numbers { padding-block:70px; }
  .story-section { padding-block:85px; }
  .story-cards article { min-height:280px; padding:26px; }
  .story-cards h3 { font-size:34px; }
  .audience-card { min-height:470px; padding:26px; }
  .audience-card h2 { font-size:36px; }
  .offer { padding-bottom:90px; }
  .offer-card { padding:28px 20px; border-radius:28px; box-shadow:7px 8px 0 var(--ink); }
  .offer-top h2 { font-size:45px; }
  .offer-ball { width:76px; flex:0 0 auto; }
  .faq { padding-bottom:90px; }
  summary { font-size:20px; }
  .final-cta-inner { min-height:700px; padding-block:80px; }
  .final-cta h2 { font-size:65px; }
  .final-court { width:80%; opacity:.75; }
  .footer { grid-template-columns:1fr; text-align:center; padding-block:35px; }
  .footer .brand { justify-content:center; }
  .footer p { order:3; }

  .showcase { padding-block:100px 90px; }
  .showcase-bg-media { inset:46% -28% -4% 4%; opacity:.28; }
  .showcase-copy { max-width:none; }
  .book-stage { min-height:560px; margin-top:10px; }
  .book-mockup { width:min(350px, 84vw); }
  .book-stack { width:min(325px, 78vw); }
  .book-stack-back { transform:translate(-24px, 9px) rotate(-8deg) scale(.92); }
  .book-stack-mid { transform:translate(25px, 6px) rotate(6deg) scale(.95); }
  .book-metric { min-width:92px; padding:8px 9px; }
  .book-metric b { font-size:24px; }
  .metric-top { right:0; top:15%; }
  .metric-bottom { left:0; bottom:17%; }
  .floating-note { font-size:14px; padding:10px 12px; }
  .note-blue { left:2%; top:16%; }
  .note-red { right:1%; bottom:10%; }

  /* V3: mobile-first centering and overflow safety */
  .section-shell { width:min(100% - 28px, 1180px); margin-inline:auto; }
  .hero { width:100%; max-width:100%; text-align:center; padding-inline:14px; margin-inline:auto; }
  .hero-copy { width:100%; max-width:560px; margin-inline:auto; }
  .hero-eyebrow { margin-inline:auto; }
  .hero-actions { justify-content:center; }
  .hero-actions .button { max-width:360px; margin-inline:auto; }
  .hero-cta-microcopy { justify-content:center; max-width:350px; margin-inline:auto; margin-top:16px; }
  .hero-proof { justify-content:center; max-width:360px; margin-inline:auto; margin-top:24px; }
  .hero-proof span { width:auto; flex:1 1 155px; text-align:center; }
  .hero-note { justify-content:center; margin-inline:auto; text-align:center; }
  .hero-visual { width:100%; max-width:390px; min-height:520px; margin:18px auto 0; overflow:hidden; }
  .hero-visual::before { width:92%; }
  #hero-canvas { inset:0; width:100%; height:100%; }
  .hero-visual-frame { inset:6% 2% 4%; }
  .hero-card-a { left:4%; }
  .hero-card-b { right:4%; }
  .hero-card-c { left:4%; bottom:12%; }
  .hero-product-card { left:0; right:0; margin-inline:auto; bottom:2%; }

  .showcase-inner { width:min(100% - 28px, 1180px); margin-inline:auto; text-align:center; }
  .showcase-copy { width:100%; max-width:560px; margin-inline:auto; }
  .showcase-copy h2, .showcase-lead { margin-inline:auto; }
  .showcase-tabs { justify-content:center; }
  .showcase-focus-copy { margin-inline:auto; text-align:left; }
  .tick-list { width:min(100%, 350px); margin-inline:auto; text-align:left; }
  .showcase-cta { justify-content:center; flex-direction:column; }
  .showcase-cta .button { width:min(100%, 350px); }
  .book-stage { width:100%; max-width:390px; min-height:550px; margin-inline:auto; overflow:hidden; }
  .book-mockup { width:min(320px, 80vw); margin-inline:auto; }
  .book-stack { width:min(300px, 74vw); }
  .book-stack-back { transform:translate(-12px, 8px) rotate(-6deg) scale(.94); }
  .book-stack-mid { transform:translate(12px, 6px) rotate(5deg) scale(.96); }
  .metric-top { right:3%; }
  .metric-bottom { left:3%; }
  .note-blue { left:3%; top:18%; }
  .note-red { right:3%; bottom:9%; }
  .book-stage-caption { right:0; left:0; text-align:center; }

  .conversion-nudge { margin-top:50px; padding:22px 18px; flex-direction:column; text-align:center; gap:20px; }
  .conversion-nudge .button { width:min(100%, 340px); white-space:normal; }
  .conversion-nudge small { max-width:330px; margin-inline:auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal-section { opacity:1 !important; transform:none !important; }
  .marquee-track { animation:none; }
}


@media (max-width: 380px) {
  .hero-title { font-size:clamp(43px, 14.2vw, 56px); }
  .hero-visual { max-width:350px; min-height:500px; }
  .hero-card { min-width:112px; padding:9px; }
  .hero-card small { margin-left:0; }
  .hero-product-card { width:164px; }
  .book-stage { max-width:350px; }
  .book-mockup { width:min(292px, 79vw); }
  .book-stack { width:min(274px, 73vw); }
}