/* Word Critters home page. Loaded after style.css, which supplies the light and dark colour tokens
   and the Fredoka faces. Bright pixel park by day, Night Bus navy after dark. Chunky outlined
   cards with a hard shadow (like the app's buttons), stepped motion, phone-first. */
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }

:root {
  --display: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pixel: "Silkscreen", ui-monospace, "Courier New", monospace;
  --sky: #33A6FF;
  --band: #E6F3FF;
  --cream: #FFF5DF;
  --edge: #1B2A4A;
  --lamp: #F2A63B;
  --lamp-ink: #3F2400;
  --on-night: #F1F4FB;
  --on-night-muted: #C4D0EC;
  --gutter: clamp(16px, 5vw, 40px);
}
@media (prefers-color-scheme: dark) {
  :root { --band: #121B2D; --cream: #1A1913; --edge: #3B4A70; }
}

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.8rem, 4.8vw, 2.7rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
.pixel { image-rendering: pixelated; }
.wrap-lg { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 58ch; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: 10px; z-index: 50; }
.skip:focus { top: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 8px; }

/* HUD-style label used above section headings */
.chip { display: inline-block; justify-self: start; font-family: var(--pixel); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1; padding: 8px 12px 7px; background: var(--lamp); color: var(--lamp-ink); border: 2px solid var(--edge); border-radius: 8px; box-shadow: 0 3px 0 var(--edge); }
.center .chip { justify-self: center; }
.chip.on-night { border-color: #0A1122; box-shadow: 0 3px 0 #0A1122; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 12px 28px; border-radius: 999px; background: var(--lamp); color: var(--lamp-ink); border: 3px solid #1B2A4A; font-family: var(--display); font-weight: 600; font-size: 1.15rem; text-decoration: none; box-shadow: 0 5px 0 #1B2A4A; transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 #1B2A4A; }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 #1B2A4A; }
.btn small { display: block; font-family: var(--body); font-weight: 400; font-size: .74rem; line-height: 1; opacity: .85; }
.btn.compact { min-height: 42px; padding: 6px 20px; font-size: 1rem; border-width: 2px; box-shadow: 0 3px 0 #1B2A4A; }
.cta-note { font-weight: 700; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 3px solid var(--edge); }
.top .wrap-lg { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.top .brand { margin-right: auto; }
.top .brand img.logo { width: 44px; height: 44px; image-rendering: auto; }
.top .brand-name { font-size: 16px; }
.top nav { display: none; gap: 26px; }
.top nav a { color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 500; font-size: 1.02rem; }
.top nav a:hover { color: var(--navy); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--lamp); }
@media (min-width: 860px) { .top nav { display: flex; } }

/* Hero: the park runs edge to edge behind the words */
.hero-home { position: relative; isolation: isolate; overflow: hidden; min-height: 900px; background: var(--sky) url("/img/hero-tall.webp?v=2") center bottom / cover no-repeat; color: #1B2A4A; }
.hero-home .wrap-lg { position: relative; z-index: 2; padding-block: 44px 0; }
.hero-copy { display: grid; gap: 20px; justify-items: start; max-width: 560px; }
.hero-home h1 { font-size: clamp(2.9rem, 12vw, 5.2rem); font-weight: 700; line-height: .98; letter-spacing: -.015em; color: #1B2A4A; text-shadow: 0 3px 0 rgba(255,255,255,.55); }
.hero-home h1 span { display: block; color: #fff; text-shadow: 0 4px 0 #1B2A4A, 3px 4px 0 #1B2A4A, -3px 4px 0 #1B2A4A, 0 -3px 0 #1B2A4A, 3px 0 0 #1B2A4A, -3px 0 0 #1B2A4A; }
.hero-home .sub { font-family: var(--display); font-weight: 500; font-size: clamp(1.1rem, 3vw, 1.4rem); line-height: 1.35; max-width: 34ch; background: rgba(255,255,255,.9); border: 3px solid #1B2A4A; border-radius: 20px; box-shadow: 0 5px 0 #1B2A4A; padding: 14px 18px; }
.hero-actions { display: grid; gap: 12px; justify-items: start; }
.hero-home .cta-note { color: #1B2A4A; background: rgba(255,255,255,.9); border: 2px solid #1B2A4A; border-radius: 999px; padding: 3px 14px; font-size: .95rem; }
@media (min-width: 700px) {
  .hero-home { min-height: 740px; background-image: url("/img/hero-wide.webp?v=2"); background-position: 82% bottom; }
  .hero-home .wrap-lg { padding-top: 56px; }
}
@media (min-width: 900px) {
  .hero-home { min-height: clamp(660px, 48vw, 820px); background-position: right bottom; }
  .hero-home .wrap-lg { padding-top: 72px; }
}
.cloud { position: absolute; z-index: 1; left: 0; height: auto; image-rendering: pixelated; opacity: .95; animation: drift linear infinite; pointer-events: none; }
.cloud.c1 { top: 9%; width: 216px; animation-duration: 110s; animation-delay: -30s; }
.cloud.c2 { top: 24%; width: 144px; animation-duration: 150s; animation-delay: -95s; }
.cloud.c3 { top: 4%; width: 180px; animation-duration: 130s; animation-delay: -70s; }
@keyframes drift { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 60px)); } }

/* Info strip */
.strip { position: relative; background: var(--surface); }
.strip::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 32px; background: url("/img/grass.png") repeat-x 0 0 / 128px 32px; image-rendering: pixelated; }
.strip ul { list-style: none; margin: 0 auto; padding: 34px var(--gutter) 22px; max-width: 1000px; display: grid; grid-template-columns: repeat(4, 1fr); }
.strip li { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 8px; font-family: var(--display); font-weight: 500; font-size: 1.12rem; line-height: 1.2; }
.strip li + li { border-left: 2px solid var(--border); }
.strip svg { width: 30px; height: 30px; flex: 0 0 auto; }
@media (max-width: 640px) { .strip li { flex-direction: column; gap: 6px; text-align: center; font-size: .9rem; padding-inline: 2px; } .strip svg { width: 28px; height: 28px; } }

/* Sections */
section.block { padding-block: clamp(56px, 9vw, 104px); }
section.band { background: var(--band); }
section.cream { background: var(--cream); }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 5vw, 52px); }
.section-head.center { justify-items: center; text-align: center; }

/* How it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.step { position: relative; background: var(--surface); border: 3px solid var(--edge); border-radius: 28px; box-shadow: 0 7px 0 var(--edge); overflow: hidden; display: grid; grid-template-rows: 320px auto; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.step:nth-child(odd) { transform: rotate(-1.5deg); } .step:nth-child(even) { transform: rotate(1.5deg); }
.step:hover { transform: rotate(0) translateY(-6px); }
.step .visual { position: relative; display: grid; place-items: center; background: linear-gradient(180deg, #5DB8FF 0%, #33A6FF 100%); border-bottom: 3px solid var(--edge); overflow: hidden; }
.step .visual .ui { border-radius: 16px; background: #fff; }
.step .body { padding: 22px 24px 26px; display: grid; gap: 8px; align-content: start; }
.step .body p { color: var(--muted); }
.step .num { position: absolute; top: 14px; left: 14px; z-index: 2; width: 46px; height: 46px; border-radius: 12px; background: var(--lamp); color: var(--lamp-ink); border: 3px solid var(--edge); box-shadow: 0 3px 0 var(--edge); font-family: var(--pixel); font-size: 1.3rem; display: grid; place-items: center; }
/* Every step shows a whole phone screen, the same height in all three cards and flush with the panel
   floor, so their tops line up. The dark shadow lifts them off the blue. */
.step .visual { align-items: end; }
.step .visual .ui { height: 256px; width: auto; max-width: 90%; border-radius: 18px 18px 0 0; box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 10px 34px rgba(6,18,58,.75), 0 3px 12px rgba(6,18,58,.55); }
@keyframes bob { 50% { transform: translateY(-6px); } }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* Explainer video (section is commented out in index.html until the file exists) */
.video-frame { border-radius: 24px; overflow: hidden; background: #1B2A4A; border: 3px solid var(--edge); box-shadow: 0 7px 0 var(--edge); aspect-ratio: 16 / 9; }
.video-frame video { width: 100%; height: 100%; display: block; }

/* Devices */
.phone { width: min(280px, 72vw); border: 6px solid #0A1122; border-radius: 9% / 4.1%; overflow: hidden; background: #0A1122; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.phone img { display: block; width: 100%; height: auto; }
.tablet { border: 8px solid #0A1122; border-radius: 2.6% / 3.5%; overflow: hidden; background: #0A1122; box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.tablet img { display: block; width: 100%; height: auto; }
/* Tablet screens rest with a slight tilt (alternating with the layout) and straighten on hover */
.tablet { transform: rotate(-1.5deg); transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.feature.flip .tablet, .grownups .tablet { transform: rotate(1.5deg); }
.tablet:hover, .feature.flip .tablet:hover, .grownups .tablet:hover { transform: rotate(0) translateY(-6px); }
.feature { display: grid; gap: 36px; align-items: center; }
.feature + .feature { margin-top: clamp(64px, 10vw, 112px); }
.feature .copy { display: grid; gap: 16px; justify-items: start; }
.feature .copy h2, .feature .copy h3 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); }
.feature .copy p { color: var(--muted); font-size: 1.2rem; max-width: 40ch; }
.duo { position: relative; padding-bottom: 30px; }
.duo .phone.overlap { position: absolute; width: 21%; min-width: 92px; left: -3%; bottom: 0; border-width: 4px; border-radius: 9% / 4.1%; }
.pair { display: flex; justify-content: center; align-items: flex-start; gap: 0; }
.pair .phone { width: min(230px, 42vw); }
.pair .phone + .phone { margin: 44px 0 0 -18px; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 5fr 7fr; gap: 64px; }
  .feature.flip { grid-template-columns: 7fr 5fr; }
  .feature.flip .copy { order: 2; }
  .feature.pairs { grid-template-columns: 6fr 6fr; }
}

/* Boss battles */
.boss { position: relative; overflow: hidden; color: var(--on-night); background: radial-gradient(70% 60% at 30% 50%, rgba(36,71,143,.65), rgba(36,71,143,0) 70%), linear-gradient(180deg, #16223E, #0E1730); padding-block: clamp(64px, 10vw, 120px); }
.boss::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(#fff 1.5px, transparent 2px), radial-gradient(#fff 1px, transparent 1.5px); background-size: 160px 160px, 90px 90px; background-position: 20px 30px, 70px 70px; mask-image: linear-gradient(180deg, #000, transparent 60%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%); }
.boss .wrap-lg { position: relative; }
.boss h2 { color: #fff; }
.boss .copy p { color: var(--on-night-muted); }
.boss .tablet { box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 3px rgba(255,255,255,.08); }
.stages { display: flex; gap: 8px; margin-top: 4px; }
.stages i { width: 34px; height: 34px; border-radius: 10px; border: 3px solid #0A1122; background: #24365E; box-shadow: 0 3px 0 #0A1122; }
.stages i.done { background: var(--lamp); }
.stages i.next { background: #fff; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { background: #C7D5F5; } }
.boss-sprite { position: absolute; right: -10px; top: -46px; width: 108px; height: 108px; image-rendering: pixelated; animation: bob 1.6s steps(2) infinite; z-index: 3; }
.boss .shot { position: relative; }

/* For grown-ups */
.grownups { display: grid; gap: 40px; align-items: center; }
.grownups .shots { position: relative; padding-bottom: 8px; }
.grownups .phone.overlap { position: absolute; width: 27%; min-width: 96px; right: -2%; bottom: -28px; border-width: 4px; border-radius: 9% / 4.1%; left: auto; }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.ticks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.ticks li::before { content: ""; width: 20px; height: 20px; margin-top: 4px; background: var(--lamp); clip-path: polygon(0 55%, 15% 40%, 38% 62%, 82% 12%, 100% 28%, 38% 100%); }
.ticks b { font-weight: 700; }
.small-print { margin-top: 22px; color: var(--muted); font-size: .88rem; max-width: 60ch; }
@media (min-width: 900px) { .grownups { grid-template-columns: 1.1fr 1fr; gap: 72px; } }

/* Critters */
.critter-row { list-style: none; margin: 0; padding: 8px 8px 20px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; }
.critter-row li { flex: 0 0 auto; scroll-snap-align: start; width: 138px; text-align: center; background: var(--surface); border: 3px solid var(--edge); border-radius: 22px; box-shadow: 0 6px 0 var(--edge); padding: 14px 10px 12px; display: grid; gap: 6px; justify-items: center; transition: transform .15s ease; }
.critter-row li:nth-child(odd) { transform: rotate(-1.5deg); } .critter-row li:nth-child(even) { transform: rotate(1.5deg); }
.critter-row li:hover { transform: rotate(0) translateY(-6px); }
.critter-row li:hover img { animation: hop .5s steps(4); }
.critter-row img { width: 96px; height: 96px; }
.critter-row span { font-family: var(--display); font-weight: 500; font-size: 1rem; line-height: 1.2; }
@keyframes hop { 40% { transform: translateY(-14px); } }
@media (min-width: 900px) { .critter-row { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 780px; margin-inline: auto; overflow: visible; gap: 22px; } .critter-row li { width: auto; } .critter-row img { width: 112px; height: 112px; } }

/* Founder */
.founder { display: grid; gap: 22px; justify-items: center; max-width: 780px; margin: 0 auto; }
.founder .fox { width: 120px; height: 120px; image-rendering: pixelated; animation: bob 1.6s steps(2) infinite; }
.bubble { position: relative; margin: 0; background: var(--surface); border: 3px solid var(--edge); border-radius: 28px; box-shadow: 0 7px 0 var(--edge); padding: 26px 28px; font-family: var(--display); font-weight: 500; font-size: clamp(1.2rem, 3.2vw, 1.6rem); line-height: 1.4; text-wrap: pretty; }
.bubble::before { content: ""; position: absolute; top: -17px; left: 50%; margin-left: -14px; width: 24px; height: 24px; background: var(--surface); border-left: 3px solid var(--edge); border-top: 3px solid var(--edge); transform: rotate(45deg); }
.founder cite { font-style: normal; color: var(--muted); font-weight: 700; }
@media (min-width: 760px) {
  .founder { grid-template-columns: 140px 1fr; justify-items: start; align-items: center; gap: 30px; max-width: 900px; }
  .founder .fox { width: 140px; height: 140px; }
  .founder .who { display: grid; gap: 14px; }
  .bubble::before { top: 50%; left: -17px; margin: -14px 0 0; transform: rotate(-45deg); }
}

/* Private */
.night-band { background: linear-gradient(180deg, #1B2A4A, #16223E); color: var(--on-night); }
.night-band .lead { color: var(--on-night-muted); }
.promises { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 14px; }
.promises li { background: rgba(255,255,255,.07); border: 3px solid rgba(255,255,255,.16); border-radius: 22px; padding: 20px 22px; display: grid; gap: 4px; }
.promises b { font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: #fff; }
.promises span { color: var(--on-night-muted); }
.night-band a:not(.btn) { color: #DDE7FF; }
@media (min-width: 720px) { .promises { grid-template-columns: repeat(3, 1fr); } }

/* Quotes (hidden until real) */
.quotes { display: grid; gap: 16px; }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quotes blockquote { margin: 0; background: var(--surface); border: 3px solid var(--edge); border-radius: 22px; box-shadow: 0 6px 0 var(--edge); padding: 22px; display: grid; gap: 12px; }
.quotes cite { font-style: normal; color: var(--muted); font-size: .95rem; }

/* FAQ */
.faq { max-width: 780px; margin: 0 auto; display: grid; gap: 14px; }
.faq details { background: var(--surface); border: 3px solid var(--edge); border-radius: 20px; box-shadow: 0 5px 0 var(--edge); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 64px 18px 22px; font-family: var(--display); font-weight: 600; font-size: 1.12rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 10px; background: var(--lamp); color: var(--lamp-ink); border: 2px solid var(--edge); font-size: 1.5rem; line-height: 27px; text-align: center; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 22px 20px; color: var(--muted); }

/* Final CTA + footer */
.final { position: relative; overflow: hidden; text-align: center; }
.final::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(#fff 1.5px, transparent 2px); background-size: 120px 120px; background-position: 30px 20px; mask-image: linear-gradient(180deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); }
.final .wrap-lg { position: relative; display: grid; gap: 22px; justify-items: center; padding-block: clamp(56px, 9vw, 96px); }
.final img.pixel { width: 104px; height: 104px; animation: bob 1.6s steps(2) infinite; }
.final h2 { color: #fff; max-width: 18ch; }
.site-foot { margin-top: 0; background: #111A31; color: var(--on-night-muted); font-size: .95rem; }
.site-foot .wrap-lg { display: grid; gap: 14px; padding-block: 32px; }
.site-foot a { color: #DDE7FF; }
.site-foot .links { display: flex; flex-wrap: wrap; gap: 8px 20px; }