:root {
    --night:#0E1320; --night2:#161D30; --line:#2C3756; --text:#E9EDF8; --dim:#9AA6C2;
    --tape:#FFC933; --ok:#3FD48F; --teal:#5EEAD4; --violet:#8C7BFF; --coral:#FF6B6B; --paper:#F1EFE6; --ink:#1b2236;
    --display: "Bungee", "Impact", "Arial Black", system-ui, sans-serif;
    --body: "Lexend", system-ui, "Segoe UI", sans-serif;
    --type: "Special Elite", "Courier New", monospace;
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--night); color:var(--text); font:17px/1.5 var(--body); overflow-x:hidden; }
  a { color:inherit; }
  .skip { position:absolute; left:-999px; top:8px; background:var(--tape); color:#111; padding:8px 14px; border-radius:6px; z-index:100; }
  .skip:focus { left:8px; }

  header { position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; gap:20px; padding:14px 24px; background:linear-gradient(var(--night), transparent); }
  .logo { font:400 20px var(--display); letter-spacing:.5px; margin-right:auto; text-decoration:none; }
  .logo span { color:var(--tape); }
  nav a { color:var(--dim); text-decoration:none; font-size:15px; margin-right:16px; }
  nav a:hover, nav a:focus-visible { color:var(--text); }
  .btn { display:inline-block; font:700 16px var(--body); color:#14110a; background:var(--tape); padding:13px 22px; border-radius:12px; text-decoration:none; box-shadow:0 5px 0 #b88c14; transition:transform .15s, box-shadow .15s; }
  .btn:hover, .btn:focus-visible { transform:translateY(2px); box-shadow:0 3px 0 #b88c14; }
  .btn.ghost { background:transparent; color:var(--text); box-shadow:inset 0 0 0 2px var(--line); }
  .btn.ghost:hover { box-shadow:inset 0 0 0 2px var(--tape); }
  :focus-visible { outline:3px solid var(--teal); outline-offset:3px; }

  /* HERO */
  .hero { position:relative; min-height:100svh; display:grid; align-items:center; padding:110px 24px 90px; isolation:isolate; overflow:hidden; }
  .hero::before { content:""; position:absolute; inset:0; z-index:-2;
    background: radial-gradient(60% 50% at 70% 35%, #27326066, transparent 70%), radial-gradient(40% 40% at 15% 80%, #8c7bff22, transparent 70%), var(--night); }
  .grid-bg { position:absolute; inset:0; z-index:-1; opacity:.35;
    background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:56px 56px; mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent 80%); }
  .hero-inner { max-width:1180px; width:100%; margin:0 auto; position:relative; }
  .eyebrow { font:400 15px var(--type); color:var(--tape); letter-spacing:.14em; text-transform:uppercase; margin:0 0 18px; }
  h1 { font:400 clamp(34px, 5.4vw, 74px)/1 var(--display); margin:0 0 22px; max-width:11.5em; text-transform:uppercase; }
  h1 .w { display:inline-block; white-space:nowrap; }
  h1 .l { display:inline-block; opacity:0; transform:translateY(60px) rotate(8deg); animation:letter .7s cubic-bezier(.2,1.3,.4,1) forwards; animation-delay:calc(var(--i) * 28ms + 150ms); }
  h1 em { font-style:normal; color:var(--tape); }
  @keyframes letter { to { opacity:1; transform:none; } }
  .lede { max-width:30em; color:var(--dim); font-size:clamp(17px,1.6vw,20px); margin:0 0 30px; }
  .cta { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
  .fine { color:var(--dim); font-size:14px; margin:18px 0 0; }

  /* Floating evidence cards */
  .floaters { position:absolute; inset:0; pointer-events:none; }
  .fl { position:absolute; transform:translate3d(var(--tx,0px), var(--ty,0px), 0); will-change:transform; }
  .fl > .card { animation:bob var(--dur,7s) ease-in-out infinite alternate; animation-delay:var(--del,0s); }
  @keyframes bob { from { transform:translateY(-9px) rotate(var(--r,0deg)); } to { transform:translateY(11px) rotate(calc(var(--r,0deg) + 1.6deg)); } }
  .card { background:var(--paper); color:var(--ink); border-radius:10px; padding:14px 16px; box-shadow:0 22px 40px #0008, 0 2px 0 #fff8 inset; font-size:13px; position:relative; transform:rotate(var(--r,0deg)); }
  .card::before { content:""; position:absolute; top:-11px; left:50%; width:62px; height:20px; transform:translateX(-50%) rotate(-3deg); background:repeating-linear-gradient(-45deg, var(--tape) 0 8px, #1b1b1b 8px 16px); opacity:.92; border-radius:2px; }
  .card h3, .card .h3 { font:400 13px var(--type); text-transform:uppercase; letter-spacing:.08em; margin:6px 0 8px; color:#5b6480; }
  .samp { font:400 11px var(--type); color:#6b5200; background:#ffe9a8; padding:1px 6px; border-radius:4px; float:right; }
  .c-ready { width:210px; right:5%; top:18%; --r:3deg; --dur:6.5s; }
  .c-why { width:230px; right:27%; top:calc(100svh - 290px); --r:-4deg; --dur:8s; --del:-2s; }
  .c-zoom { width:210px; right:6%; top:calc(100svh - 330px); }
  .zoomhero svg { width:100%; display:block; overflow:visible; filter:drop-shadow(0 18px 24px #0009); }
  .c-suspect { width:150px; right:2%; bottom:24%; --r:5deg; --dur:7.5s; --del:-4s; }
  .c-polaroid { width:150px; right:30%; top:15%; --r:-6deg; --dur:9s; --del:-1s; }
  .arc { display:block; margin:0 auto; }
  .big { font:400 26px var(--display); text-align:center; margin:-34px 0 4px; }
  .bar { height:9px; border-radius:5px; background:#d9d6c8; margin:6px 0; overflow:hidden; }
  .bar i { display:block; height:100%; border-radius:5px; width:var(--w); background:var(--c); transform-origin:left; animation:grow 1.4s .9s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes grow { from { transform:scaleX(0); } }
  .poly { background:#fff; padding:10px 10px 6px; transform:rotate(var(--r)); }
  .poly .ph { height:90px; border-radius:3px; background:linear-gradient(135deg,#2b3558,#0e1320); display:grid; place-items:center; }
  .poly p { font:400 12px var(--type); margin:6px 0 0; text-align:center; }

  /* Magnifier lens */
  .lens { position:fixed; left:0; top:0; width:150px; height:150px; margin:-75px 0 0 -75px; border-radius:50%; pointer-events:none; z-index:60;
    border:5px solid var(--tape); box-shadow:0 0 0 2px #000a, 0 12px 30px #0009, inset 0 0 40px #5eead433; background:radial-gradient(circle at 30% 30%, #ffffff30, #5eead414 60%); opacity:0; transition:opacity .25s; mix-blend-mode:normal; }
  .lens::after { content:""; position:absolute; width:12px; height:70px; background:var(--tape); border-radius:7px; right:-24px; bottom:-52px; transform:rotate(-45deg); box-shadow:0 0 0 2px #000a; }
  .lens.on { opacity:1; }
  .clues { display:flex; gap:12px; flex-wrap:wrap; margin:34px 0 0; max-width:34em; }
  .clue { font:400 14px var(--type); padding:8px 12px; border:2px dashed var(--line); border-radius:8px; color:var(--text); filter:blur(var(--b,5px)); transition:filter .12s; user-select:text; }
  .clue-label { font:400 12px var(--type); color:var(--dim); letter-spacing:.1em; text-transform:uppercase; margin:30px 0 -22px; }
  @media (hover:none), (pointer:coarse) { .clue { --b:0px; } .lens { display:none; } .clue-label { display:none; } .clues { margin-top:26px; } }

  /* Tape divider */
  .tape { height:34px; background:repeating-linear-gradient(-45deg, var(--tape) 0 22px, #14110a 22px 44px); transform:rotate(-1.2deg) scale(1.04); margin:-18px 0; position:relative; z-index:5; box-shadow:0 8px 20px #0008; background-position:var(--tx,0) 0; }

  /* Zoom story */
  .story { position:relative; max-width:1180px; margin:0 auto; padding:80px 24px; display:grid; grid-template-columns:minmax(220px,360px) 1fr; gap:60px; }
  .zoomwrap { position:sticky; top:18vh; align-self:start; height:min(60vh,420px); display:grid; place-items:center; }
  .zoomwrap svg { width:100%; max-width:280px; overflow:visible; }
  .stage { min-height:46vh; display:grid; align-content:center; }
  .stage h2 { font:400 clamp(28px,4vw,52px)/1.05 var(--display); text-transform:uppercase; margin:0 0 14px; }
  .stage p { color:var(--dim); max-width:28em; margin:0; }
  .stage .k { font:400 14px var(--type); color:var(--tape); letter-spacing:.14em; margin-bottom:10px; }
  .stage { opacity:.35; transform:translateX(14px); transition:opacity .5s, transform .5s; }
  .stage.in { opacity:1; transform:none; }
  .final { text-align:center; padding:80px 24px 120px; overflow:hidden; }
  .final h2 { font:400 clamp(30px,5vw,60px)/1 var(--display); text-transform:uppercase; margin:0 0 20px; }

  /* Zoom (real mascot, drawn by script) */
  #zoom { width:100%; max-width:280px; }
  #zoom svg { width:100%; display:block; overflow:visible; touch-action:manipulation; }

  /* Scroll progress tape + torch glow */
  .progress { position:fixed; left:0; top:0; height:6px; width:100%; z-index:70; transform-origin:left; transform:scaleX(var(--p,0)); background:repeating-linear-gradient(-45deg, var(--tape) 0 10px, #14110a 10px 20px); }
  .torch { position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(260px 260px at var(--lx,60%) var(--ly,40%), #ffc93322, transparent 70%); }

  /* Reveal on scroll */
  .rv { opacity:0; transform:translateY(34px); transition:opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0s); }
  .rv.in { opacity:1; transform:none; }

  /* Suspect board */
  .board-sec { max-width:1180px; margin:0 auto; padding:110px 24px 90px; }
  .sec-k { font:400 14px var(--type); color:var(--tape); letter-spacing:.14em; text-transform:uppercase; margin:0 0 10px; }
  .sec-h { font:400 clamp(30px,4.6vw,60px)/1 var(--display); text-transform:uppercase; margin:0 0 14px; max-width:12em; }
  .sec-p { color:var(--dim); max-width:32em; margin:0 0 36px; }
  .board { position:relative; height:440px; border-radius:18px; background:radial-gradient(circle at 20% 20%, #1d2742, #121a2e); border:2px solid var(--line); overflow:hidden; box-shadow:inset 0 0 60px #0007; }
  .board svg.string { position:absolute; inset:0; width:100%; height:100%; }
  .string path { fill:none; stroke:var(--coral); stroke-width:3; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 2.4s cubic-bezier(.6,0,.2,1) .5s; filter:drop-shadow(0 3px 2px #0008); }
  .board.in .string path { stroke-dashoffset:0; }
  .sus { position:absolute; width:min(15%, 150px); min-width:96px; left:calc(var(--x) - 7.5%); top:var(--y); transform:rotate(var(--r)) scale(.4) translateY(-30px); opacity:0; transition:opacity .5s, transform .7s cubic-bezier(.3,1.5,.5,1); transition-delay:var(--d); }
  .board.in .sus { opacity:1; transform:rotate(var(--r)); }
  .sus .card { padding:8px 8px 6px; }
  .sus .card::before { display:none; }
  .sus .ph { background:linear-gradient(135deg,#2b3558,#0e1320); border-radius:3px; display:grid; place-items:center; aspect-ratio:1; }
  .sus svg { width:70%; }
  .sus p { font:400 12px var(--type); text-align:center; margin:6px 0 0; }
  .pin { position:absolute; width:16px; height:16px; border-radius:50%; background:var(--coral); left:50%; top:-8px; transform:translateX(-50%); box-shadow:0 3px 3px #0008, inset -2px -2px 3px #0005; z-index:2; }

  /* Proof panels (paper) */
  .proof { background:var(--paper); color:var(--ink); padding:110px 24px 100px; position:relative; }
  .proof-in { max-width:1180px; margin:0 auto; }
  .proof .sec-p { color:#4d5672; }
  .proof .sec-k { color:#7a5a00; }
  .panels { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .panel { background:#fff; border-radius:16px; padding:22px; box-shadow:0 14px 30px #1b223614, 0 2px 0 #fff inset; border:2px solid #e3dfd0; }
  .panel h3 { font:400 13px var(--type); text-transform:uppercase; letter-spacing:.1em; color:#5b6480; margin:0 0 14px; display:flex; justify-content:space-between; gap:10px; }
  .panel .samp { float:none; }
  .arc2 path.fill { stroke-dasharray:220; stroke-dashoffset:220; transition:stroke-dashoffset 1.8s cubic-bezier(.3,.7,.2,1) .3s; }
  .panel.in .arc2 path.fill { stroke-dashoffset:150; }
  .dots { position:relative; height:190px; border-left:2px solid #c9c4ae; border-bottom:2px solid #c9c4ae; margin:4px 0 6px 6px; background:linear-gradient(#0000 49.5%, #c9c4ae55 49.5% 50.5%, #0000 50.5%), linear-gradient(90deg, #0000 49.5%, #c9c4ae55 49.5% 50.5%, #0000 50.5%); }
  .dots i { position:absolute; width:14px; height:14px; border-radius:50%; background:var(--c); left:var(--x); top:var(--y); transform:scale(0); transition:transform .5s cubic-bezier(.3,1.8,.5,1); transition-delay:var(--d); }
  .panel.in .dots i { transform:scale(1); }
  .axis { font:400 11px var(--type); color:#6b7390; display:flex; justify-content:space-between; }
  .bars div.r { display:grid; grid-template-columns:104px 1fr 34px; align-items:center; gap:10px; font-size:13px; margin:10px 0; }
  .bars .t { height:12px; border-radius:6px; background:#e7e3d3; overflow:hidden; }
  .bars .t i { display:block; height:100%; width:var(--w); background:var(--c); border-radius:6px; transform:scaleX(0); transform-origin:left; transition:transform 1.3s cubic-bezier(.2,.8,.2,1) .4s; }
  .panel.in .bars .t i { transform:none; }
  .takeaway { margin:12px 0 0; font-size:14px; color:#3b4562; }
  .honest { margin:34px 0 0; font:400 15px var(--type); color:#4d5672; max-width:46em; }

  /* Seasons strip */
  .seasons { padding:110px 0 90px; }
  .seasons .head { max-width:1180px; margin:0 auto; padding:0 24px; }
  .strip { display:flex; gap:22px; overflow-x:auto; padding:30px max(24px, calc((100vw - 1180px) / 2 + 24px)) 40px; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--line) transparent; cursor:grab; }
  .strip.drag { cursor:grabbing; scroll-snap-type:none; }
  .case { flex:0 0 min(300px, 78vw); scroll-snap-align:start; background:var(--paper); color:var(--ink); border-radius:6px 22px 6px 6px; padding:22px 20px 20px; position:relative; box-shadow:0 20px 34px #0009; transition:transform .35s cubic-bezier(.3,1.4,.5,1); transform:rotate(var(--r,0deg)); user-select:none; min-height:260px; }
  .case::before { content:""; position:absolute; top:-18px; left:0; width:96px; height:20px; background:var(--paper); border-radius:8px 8px 0 0; }
  .case:hover { transform:rotate(0) translateY(-10px); }
  .case .no { font:400 13px var(--type); color:#7a5a00; letter-spacing:.14em; }
  .case h3 { font:400 24px/1.05 var(--display); text-transform:uppercase; margin:10px 0 14px; }
  .case .rooms { font-size:14px; color:#4d5672; }
  .case .mini { display:flex; gap:4px; flex-wrap:wrap; margin-top:14px; }
  .case .mini i { width:14px; height:14px; border-radius:3px; background:#d9d6c8; }
  .case .free { position:absolute; top:14px; right:-6px; background:var(--ok); color:#06301d; font:700 12px var(--body); padding:3px 12px; border-radius:4px; transform:rotate(4deg); }
  .hint { color:var(--dim); font:400 13px var(--type); padding:0 24px; max-width:1180px; margin:0 auto; }

  /* Finale form + stamp */
  .invite { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative; max-width:560px; margin:0 auto; }
  .invite input { flex:1 1 240px; font:inherit; padding:13px 16px; border-radius:12px; border:2px solid var(--line); background:var(--night2); color:var(--text); }
  .invite input::placeholder { color:var(--dim); }
  .stamp { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-9deg) scale(3); opacity:0; pointer-events:none; border:5px solid var(--coral); color:var(--coral); font:400 30px var(--display); padding:8px 20px; border-radius:10px; text-transform:uppercase; background:#0E1320ee; white-space:nowrap; }
  .stamp { display:none; }
  .stamp.go { display:block; animation:stamp .55s cubic-bezier(.3,1.6,.5,1) forwards; }
  @keyframes stamp { 60% { opacity:1; transform:translate(-50%,-50%) rotate(-9deg) scale(.92); } to { opacity:1; transform:translate(-50%,-50%) rotate(-9deg) scale(1); } }

  @media (max-width:1000px) { .panels { grid-template-columns:1fr; } .board { height:520px; } .sus { width:30%; } }

  footer { text-align:center; color:var(--dim); font-size:13px; padding:0 24px 40px; }

  /* Keep the text column clear of the floating cards on wide screens */
  @media (min-width:1001px) { h1 { max-width:9.2em; } .lede { max-width:25em; } .c-polaroid { top:12%; right:31%; } }

  /* Tablet and phone */
  @media (max-width:1000px) {
    nav { display:none; }
    .floaters { position:relative; inset:auto; display:grid; grid-template-columns:1fr 1fr; gap:26px 18px; margin:46px auto 0; max-width:480px; pointer-events:auto; }
    .fl { position:relative; inset:auto !important; width:auto !important; transform:none !important; }
    .c-polaroid { display:none; }
    .c-zoom { grid-column:1 / -1; justify-self:center; width:150px !important; order:-1; }
    .hero { align-items:start; padding-top:100px; }
    .story { grid-template-columns:1fr; gap:10px; padding-top:70px; }
    .zoomwrap { position:sticky; top:62px; height:150px; z-index:10; background:linear-gradient(var(--night) 70%, transparent); }
    .zoomwrap svg { max-width:150px; }
    .stage { min-height:40vh; }
  }
  /* Reduced motion: static, readable, no parallax, no lens */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    h1 .l { animation:none; opacity:1; transform:none; }
    .fl > .card, #zoom .body-bob { animation:none; }
    .bar i { animation:none; }
    .clue { --b:0px !important; filter:none; }
    .lens, .clue-label { display:none; }
    .stage { opacity:1; transform:none; transition:none; }
    #zoom, #zoom * { transition:none !important; }
    .rv, .sus { opacity:1 !important; transform:none !important; transition:none !important; }
    .sus { transform:rotate(var(--r)) !important; }
    .string path { stroke-dashoffset:0 !important; transition:none !important; }
    .arc2 path.fill { stroke-dashoffset:150 !important; transition:none !important; }
    .dots i { transform:none !important; transition:none !important; }
    .bars .t i { transform:none !important; transition:none !important; }
    .progress, .torch { display:none; }
    .stamp.go { animation:none; opacity:1; transform:translate(-50%,-50%) rotate(-9deg); }
  }


/* ========== Site-wide components (added for the full site) ========== */

/* Without JavaScript everything is visible and static */
.no-js .rv, .no-js .stage, .no-js .sus { opacity:1; transform:none; }
.no-js .sus { transform:rotate(var(--r)); }
.no-js .string path { stroke-dashoffset:0; }
.no-js .arc2 path.fill { stroke-dashoffset:150; }
.no-js .dots i { transform:none; }
.no-js .bars .t i { transform:none; }
.no-js .clue { --b:0px; filter:none; }
.no-js .clue-label { display:none; }

/* Header and navigation */
header .logo { display:flex; align-items:center; gap:8px; }
header { backdrop-filter:blur(6px); }
nav a[aria-current="page"] { color:var(--text); box-shadow:0 2px 0 var(--tape); }
.menu-btn { display:none; background:transparent; color:var(--text); border:2px solid var(--line); border-radius:10px; padding:8px 12px; font:600 14px var(--body); cursor:pointer; }
.menu-btn:hover { border-color:var(--tape); }
@media (max-width:1000px) {
  nav { display:none; }
  .menu-btn { display:inline-block; }
  nav.open { display:flex; flex-direction:column; gap:4px; position:absolute; left:0; right:0; top:100%; background:var(--night); border-bottom:2px solid var(--line); padding:12px 24px 18px; }
  nav.open a { margin:0; padding:10px 0; font-size:17px; }
  header .btn { padding:10px 14px; font-size:14px; }
}
@media (max-width:420px) { header .logo { font-size:16px; } header .btn { display:none; } }

/* Inner page opening */
.page-hero { position:relative; padding:130px 24px 60px; isolation:isolate; overflow:hidden; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(50% 60% at 80% 30%, #27326066, transparent 70%), var(--night); }
.page-hero .in { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; }
.page-hero h1 { font:400 clamp(34px,5.6vw,72px)/1 var(--display); text-transform:uppercase; margin:0 0 16px; max-width:12em; }
.page-hero h1 em { font-style:normal; color:var(--tape); }
.page-hero .lede { margin:0 0 24px; }
.page-hero .zhero { width:200px; }
.page-hero .zhero svg { width:100%; display:block; filter:drop-shadow(0 16px 20px #0009); }
@media (max-width:700px) { .page-hero { padding-top:110px; } .page-hero .in { grid-template-columns:1fr; } .page-hero .zhero { width:130px; } }

/* Content blocks */
.wrap { max-width:1180px; margin:0 auto; padding:70px 24px; }
.wrap.narrow { max-width:820px; }
.wrap h2 { font:400 clamp(26px,3.6vw,44px)/1.05 var(--display); text-transform:uppercase; margin:0 0 14px; }
.wrap h3 { font:700 20px var(--body); margin:28px 0 8px; }
.wrap p, .wrap li { color:var(--dim); }
.wrap p strong, .wrap li strong { color:var(--text); }
.wrap ul { padding-left:22px; }
.wrap li { margin:6px 0; }
.wrap a:not(.btn) { color:var(--tape); text-underline-offset:3px; }
.tint { background:var(--night2); border-block:2px solid var(--line); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:26px 0 0; }
.cards.two { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.tile { background:var(--night2); border:2px solid var(--line); border-radius:16px; padding:22px; }
.tint .tile { background:var(--night); }
.tile h3 { margin:0 0 8px; }
.tile p { margin:0; }
.tile .k { font:400 13px var(--type); color:var(--tape); letter-spacing:.14em; margin:0 0 8px; }
.steps { counter-reset:s; display:grid; gap:18px; margin:30px 0 0; padding:0; list-style:none; }
.steps li { counter-increment:s; display:grid; grid-template-columns:56px 1fr; gap:18px; align-items:start; background:var(--night2); border:2px solid var(--line); border-radius:16px; padding:22px; margin:0; }
.steps li::before { content:counter(s); width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--tape); color:#14110a; font:400 26px var(--display); }
.steps h3 { margin:0 0 6px; }
.steps p { margin:0; }
.notice { border:2px dashed var(--tape); border-radius:14px; padding:16px 18px; color:var(--text); background:#ffc9330f; margin:24px 0; }
.notice p { margin:0; color:var(--text); }
.strip-trust { display:flex; gap:12px; flex-wrap:wrap; padding:18px 24px; max-width:1180px; margin:0 auto; }
.strip-trust div { border:2px solid var(--line); border-radius:20px; padding:5px 14px; font-size:14px; color:var(--text); background:var(--night2); }
.paper { background:var(--paper); color:var(--ink); }
.paper .wrap p, .paper .wrap li { color:#3b4562; }
.paper .wrap h2, .paper .wrap h3 { color:var(--ink); }
.paper .wrap a:not(.btn) { color:#7a5a00; }
.paper .tile { background:#fff; border-color:#e3dfd0; }
.paper .tile h3 { color:var(--ink); }
.paper .tile p { color:#3b4562; }
.sample-q { background:#fff; color:var(--ink); border-radius:12px; padding:20px; max-width:520px; box-shadow:0 14px 30px #1b223614; border:2px solid #e3dfd0; }
.sample-q p { color:var(--ink) !important; margin:0 0 10px; }
.sample-q ol { list-style:upper-alpha; padding-left:26px; margin:0; }
.sample-q li { color:var(--ink) !important; margin:4px 0; }
.sample-q .ans { margin-top:12px; font-size:14px; color:#3b4562 !important; border-top:1px dashed #c9c4ae; padding-top:10px; }

/* CTA band above the footer */
.cta-band { text-align:center; padding:70px 24px; background:linear-gradient(180deg, transparent, #ffc9330d); border-top:2px solid var(--line); }
.cta-band h2 { font:400 clamp(28px,4.4vw,52px)/1 var(--display); text-transform:uppercase; margin:0 0 14px; }
.cta-band p { color:var(--dim); margin:0 0 22px; }

/* FAQ */
.faq details { background:var(--night2); border:2px solid var(--line); border-radius:14px; padding:4px 20px; margin:12px 0; }
.faq summary { cursor:pointer; padding:14px 0; font:600 18px var(--body); color:var(--text); list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font:400 24px var(--display); color:var(--tape); }
.faq details[open] summary::after { content:"–"; }
.faq details p, .faq details ul { margin:0 0 16px; }
.faq h3 { font:400 14px var(--type); color:var(--tape); letter-spacing:.14em; text-transform:uppercase; margin:34px 0 4px; }

/* Join form */
.join-form { display:grid; gap:16px; max-width:560px; position:relative; }
.join-form label { font-weight:600; color:var(--text); display:block; margin-bottom:6px; }
.join-form .opt { color:var(--dim); font-weight:400; }
.join-form input[type=email], .join-form select, .join-form input[type=text] { width:100%; font:inherit; padding:13px 16px; border-radius:12px; border:2px solid var(--line); background:var(--night2); color:var(--text); }
.join-form .check { display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start; font-weight:400; color:var(--dim); }
.join-form .check input { width:22px; height:22px; margin-top:2px; accent-color:var(--tape); }
.join-form .hp { position:absolute; left:-9999px; }

/* Footer */
.site-foot { border-top:2px solid var(--line); background:var(--night2); padding:50px 24px 36px; }
.site-foot .in { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
.site-foot h4 { font:400 13px var(--type); color:var(--tape); letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px; }
.site-foot ul { list-style:none; margin:0; padding:0; }
.site-foot li { margin:8px 0; }
.site-foot a { color:var(--dim); text-decoration:none; }
.site-foot a:hover, .site-foot a:focus-visible { color:var(--text); text-decoration:underline; }
.site-foot p { color:var(--dim); font-size:14px; margin:8px 0 0; max-width:30em; }
.site-foot .small { max-width:1180px; margin:30px auto 0; padding-top:20px; border-top:1px solid var(--line); color:var(--dim); font-size:13px; }
@media (max-width:800px) { .site-foot .in { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .site-foot .in { grid-template-columns:1fr; } }

main:focus { outline:none; }

/* Keyboard users cannot move the magnifier, so show the clue text plainly */
.kbd .clue { filter:none !important; --b:0px; }
.kbd .clue-label, .kbd .lens { display:none; }

/* Footer headings are not part of the page outline */
.foot-h { font:400 13px var(--type); color:var(--tape); letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px; }

/* FAQ group headings sit directly under the page title */
.wrap.faq h2 { font:400 14px var(--type); color:var(--tape); letter-spacing:.14em; text-transform:uppercase; margin:34px 0 4px; }

/* Sign-in link to the app, last in the navigation */
nav a.signin { color: var(--tape); font-weight: 600; }
nav a.signin::after { content: " \2192"; }

/* Phone-framed real screens */
.phones { display:flex; gap:28px; flex-wrap:wrap; justify-content:center; margin:30px 0 0; }
.phone { width:min(260px, 78vw); margin:0; }
.phone .screen { border-radius:30px; border:3px solid var(--line); background:#05070d; padding:7px; box-shadow:0 22px 40px #000a; overflow:hidden; }
.phone img { display:block; width:100%; height:auto; border-radius:22px; }
.phone.crop .screen { aspect-ratio:422 / 430; }
.phone.crop img { height:auto; }
.phone figcaption { font-size:14px; color:var(--dim); text-align:center; margin:12px 4px 0; }

/* Form feedback */
[data-msg][data-state="ok"] { color: var(--ok) !important; }
[data-msg][data-state="err"] { color: #ff9a9a !important; }
.join-form .btn[disabled] { opacity: .6; cursor: progress; }

/* ========== Landing page: facts, curriculum, what the child gets, try a question ========== */
[hidden] { display:none !important; }

.facts { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:1180px; margin:0 auto; padding:30px 24px 6px; }
.fact { background:var(--night2); border:2px solid var(--line); border-radius:16px; padding:16px 18px; }
.fact b { display:block; font:400 clamp(30px,4vw,48px)/1 var(--display); color:var(--tape); margin-bottom:4px; }
.fact span { color:var(--dim); font-size:14px; }
@media (max-width:760px) { .facts { grid-template-columns:1fr 1fr; } }

/* Tabs (curriculum and sample questions). Without JavaScript the tab row is hidden and every panel is shown. */
.tabs { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 22px; }
.no-js .tabs { display:none; }
.tab { font:700 15px var(--body); color:var(--text); background:var(--night2); border:2px solid var(--line); border-radius:999px; padding:9px 16px; cursor:pointer; transition:transform .15s, border-color .15s, background .15s; }
.tab:hover { border-color:var(--tape); transform:translateY(-2px); }
.tab[aria-selected="true"] { background:var(--tape); color:#14110a; border-color:var(--tape); }
.tab small { font:400 12px var(--type); opacity:.7; margin-left:7px; }

.curric { max-width:1180px; margin:0 auto; padding:100px 24px 70px; }
.tpanel { --ac:var(--tape); background:var(--night2); border:2px solid var(--line); border-top:5px solid var(--ac); border-radius:18px; padding:26px; display:grid; grid-template-columns:minmax(220px,.8fr) 1.6fr; gap:30px; margin:0 0 16px; }
.tpanel h3 { font:400 clamp(24px,3vw,36px)/1.05 var(--display); text-transform:uppercase; margin:0 0 10px; }
.tpanel p { color:var(--dim); margin:0 0 10px; }
.tpanel .count { font:400 14px var(--type); color:var(--ac); letter-spacing:.14em; margin:0 0 6px; }
.glabel { font:400 12px var(--type); color:var(--dim) !important; letter-spacing:.12em; text-transform:uppercase; margin:16px 0 8px !important; }
.tpanel > div:last-child > .glabel:first-child { margin-top:0 !important; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { font-size:13.5px; padding:5px 11px; border-radius:999px; border:1.5px solid var(--line); border-color:color-mix(in srgb, var(--ac) 45%, var(--line)); background:var(--night); color:var(--text); }
@media (max-width:800px) { .tpanel { grid-template-columns:1fr; gap:16px; } }

.kit { max-width:1180px; margin:0 auto; padding:100px 24px 80px; }
.kit-grid { display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:44px; align-items:start; }
.kit-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.kit .tile { transition:transform .3s cubic-bezier(.3,1.4,.5,1), border-color .2s, opacity .8s; }
.kit .tile:hover { transform:translateY(-6px) rotate(-.6deg); border-color:var(--tape); }
.kit .tile h3 { font:700 19px var(--body); margin:0 0 8px; }
.kit .tile p { color:var(--dim); font-size:15px; }
.ico { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:#ffc9331f; color:var(--tape); margin-bottom:14px; }
.kit-phones .phones { flex-wrap:nowrap; gap:16px; margin:0; justify-content:flex-start; }
.kit-phones .phone { width:200px; flex:0 0 auto; }
.kit-phones .phone:nth-child(2) { margin-top:56px; }
@media (max-width:1000px) { .kit-grid { grid-template-columns:1fr; } .kit-phones .phones { justify-content:center; } }
@media (max-width:560px) { .kit-cards { grid-template-columns:1fr; } .kit-phones .phone { width:min(165px, 42vw); } }

/* Try a question */
.try { background:var(--night2); border-block:2px solid var(--line); padding:100px 24px; }
.try-in { max-width:1180px; margin:0 auto; }
.qwrap { max-width:1000px; }
.qwrap { display:grid; grid-template-columns:170px 1fr; gap:30px; align-items:center; }
.qzoom { width:170px; }
.qzoom svg { width:100%; display:block; overflow:visible; filter:drop-shadow(0 14px 18px #0009); }
.qcard { background:#fff; color:var(--ink); border-radius:16px; padding:26px 22px 22px; border:2px solid #e3dfd0; box-shadow:0 18px 36px #0007; position:relative; }
.qcard::before { content:""; position:absolute; top:-11px; left:50%; width:70px; height:20px; transform:translateX(-50%) rotate(-3deg); background:repeating-linear-gradient(-45deg, var(--tape) 0 8px, #1b1b1b 8px 16px); opacity:.92; border-radius:2px; }
.no-js .qcard { margin:0 0 20px; }
.qmeta { font:400 13px var(--type); color:#7a5a00; letter-spacing:.12em; text-transform:uppercase; margin:0 0 8px; }
.qtext { font:700 20px/1.35 var(--body); color:var(--ink); margin:0 0 16px; }
.series { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 18px; }
.series svg { width:64px; height:64px; }
.opts { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.opt { font:600 17px var(--body); color:var(--ink); background:#f6f4ea; border:2px solid #d9d6c8; border-radius:12px; padding:12px 14px; cursor:pointer; text-align:left; display:flex; gap:12px; align-items:center; transition:transform .15s, border-color .15s, background .15s; }
.opt:hover:not(:disabled) { border-color:#b88c14; transform:translateY(-2px); }
.opt:focus-visible { outline:3px solid #b88c14; outline-offset:2px; }
.opt .l { font:400 14px var(--type); color:#7a5a00; }
.opt svg { width:52px; height:52px; display:block; }
.opt.tried { opacity:.5; border-style:dashed; cursor:default; }
.opt.right { background:#d7f6e6; border-color:#2fa56f; opacity:1; }
.opts:has(.right) .opt:not(.right) { opacity:.5; }
.fb { font:700 16px var(--body); color:#1b7a50; margin:14px 0 0; min-height:1.4em; }
.qcard:not(.done) .fb { color:#7a5a00; }
.explain { display:none; margin:10px 0 0; padding-top:12px; border-top:1px dashed #c9c4ae; font-size:15px; color:#3b4562; }
.explain strong { color:var(--ink); }
.done .explain, .no-js .explain { display:block; }
.try-note { color:var(--dim); font:400 13px var(--type); margin:20px 0 0; }
@media (max-width:700px) { .qwrap { grid-template-columns:1fr; gap:22px; } .qzoom { width:110px; margin:0 auto; } .qtext { font-size:18px; } }
@media (prefers-reduced-motion: reduce) { .tab, .opt, .kit .tile { transition:none; } .tab:hover, .opt:hover, .kit .tile:hover { transform:none; } }

/* Parent portal tiles continue straight on from the paper "proof" section */
.ptiles { padding:0 24px 100px; }
.ptiles .wrap { padding:0; }
.paper .sec-k { color:#7a5a00; }
.ptiles .tile { transition:opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1); }

/* "Pause animations" switch: same effect as the reduced-motion setting, chosen on the page */
html.calm { scroll-behavior:auto; }
.calm h1 .l { animation:none; opacity:1; transform:none; }
.calm .fl > .card, .calm #zoom .body-bob { animation:none; }
.calm .bar i { animation:none; }
.calm .clue { --b:0px !important; filter:none; }
.calm .lens, .calm .clue-label { display:none; }
.calm .stage { opacity:1; transform:none; transition:none; }
.calm #zoom, .calm #zoom * { transition:none !important; }
.calm .rv, .calm .sus { opacity:1 !important; transform:none !important; transition:none !important; }
.calm .sus { transform:rotate(var(--r)) !important; }
.calm .string path { stroke-dashoffset:0 !important; transition:none !important; }
.calm .arc2 path.fill { stroke-dashoffset:150 !important; transition:none !important; }
.calm .dots i { transform:none !important; transition:none !important; }
.calm .bars .t i { transform:none !important; transition:none !important; }
.calm .progress, .calm .torch { display:none; }
.calm .stamp.go { animation:none; opacity:1; transform:translate(-50%,-50%) rotate(-9deg); }
.calm .tab, .calm .opt, .calm .kit .tile, .calm .ptiles .tile { transition:none; }
.calm .tab:hover, .calm .opt:hover, .calm .kit .tile:hover { transform:none; }
.calm .fl > .card { animation:none; }
.motion-btn { font:600 13px var(--body); color:var(--dim); background:transparent; border:2px solid var(--line); border-radius:999px; padding:6px 14px; cursor:pointer; margin-top:14px; }
.motion-btn:hover, .motion-btn:focus-visible { color:var(--text); border-color:var(--tape); }

/* Child-side hero card */
.kid .dashes { display:flex; gap:4px; justify-content:center; margin-top:8px; }
.kid .dashes i { width:14px; height:5px; border-radius:3px; background:#d9d6c8; }
.kid .dashes i.on { background:#3FD48F; }
.kid .plus { position:absolute; right:-8px; top:-4px; background:#3FD48F; color:#06301d; font:700 12px var(--body); padding:3px 9px; border-radius:20px; transform:rotate(6deg); box-shadow:0 4px 8px #0006; }

/* Parent portal viewer */
.pview { max-width:1180px; margin:0 auto; padding:100px 24px 90px; }
.pv-panel { display:grid; grid-template-columns:1fr auto; gap:44px; align-items:center; background:var(--night2); border:2px solid var(--line); border-radius:18px; padding:30px; }
.pv-panel h3 { font:400 clamp(24px,3vw,34px)/1.05 var(--display); text-transform:uppercase; margin:0 0 12px; }
.pv-panel p { color:var(--dim); margin:0 0 12px; max-width:30em; }
.pv-panel .phones { margin:0; }
.pv-panel .phone { width:240px; }
.pv-panel .screen { max-height:520px; }
.pv-panel .phone img { object-fit:cover; object-position:top; }
@media (max-width:800px) { .pv-panel { grid-template-columns:1fr; padding:22px; } .pv-panel .phones { justify-content:center; } }
.ptiles { padding-top:0; }

/* Who made it */
.maker { padding:30px 24px 10px; }
.maker-in { max-width:820px; margin:0 auto; background:var(--night2); border:2px dashed var(--tape); border-radius:18px; padding:30px 28px; text-align:center; }
.maker-in h2 { font:400 clamp(24px,3.4vw,40px)/1.05 var(--display); text-transform:uppercase; margin:0 0 14px; }
.maker-in p:not(.sec-k) { color:var(--dim); margin:0 auto; max-width:36em; }