/* ═══════════════════════════════════════════════════════════════════════
   KidBuilder — the site
   Same paper, same ink, same toy-workshop language as the app itself:
   thick ink outlines, hard offset shadows (never blurred), candy primaries
   on warm paper. A parent who lands here and then opens the app should not
   feel they changed products.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --paper:   #FFF1D6;
  --paper-2: #FFE3B0;
  --ink:     #241708;
  --night:   #17110A;
  --tomato:  #FF4F3B;
  --sunny:   #FFC72C;
  --grass:   #3FD07A;
  --sky:     #35A7FF;
  --grape:   #A162FF;
  --bubble:  #FF6FB5;

  --edge: 4px;
  --pop: 6px;
  --r: 22px;
  --spring: cubic-bezier(.34, 1.7, .5, 1);
  --wide: 1080px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: 'Baloo 2', ui-rounded, 'Trebuchet MS', sans-serif;
  font-weight: 600;
  color: var(--ink);
  background:
    radial-gradient(130% 60% at 50% 0%, var(--paper) 0%, var(--paper-2) 70%),
    var(--paper-2);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Paper grain over everything — keeps the flat candy colour off plastic. */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .2; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.wrap { width: min(100% - 40px, var(--wide)); margin-inline: auto; }

/* ───────────────────────────── type ───────────────────────────── */
.display {
  font-family: 'Bagel Fat One', cursive;
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: .98;
  color: var(--sunny);
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 7px 0 var(--ink);
}
h2.display { font-size: clamp(30px, 5.6vw, 54px); margin: 0 0 14px; }
h3 { font-family: 'Bagel Fat One', cursive; font-weight: 400; margin: 0 0 8px; line-height: 1.05; }
p { line-height: 1.45; }

.lede { font-size: clamp(17px, 2.2vw, 22px); line-height: 1.45; opacity: .85; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 14px; border: 3px solid var(--ink); border-radius: 999px;
  background: var(--paper); box-shadow: 0 4px 0 var(--ink);
}

section { padding: clamp(48px, 8vw, 96px) 0; }

/* ───────────────────────────── buttons ───────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  font: inherit; font-weight: 800; font-size: clamp(17px, 2vw, 22px);
  color: var(--ink); text-decoration: none;
  background: var(--sunny);
  border: var(--edge) solid var(--ink); border-radius: var(--r);
  box-shadow: 0 var(--pop) 0 var(--ink);
  cursor: pointer;
  transition: transform .12s var(--spring), box-shadow .12s ease;
}
.btn:active { transform: translateY(var(--pop)); box-shadow: 0 0 0 var(--ink); }
.btn--go   { background: var(--grass); }
.btn--make { background: var(--tomato); color: #fff; }
.btn--ghost { background: var(--paper); }
.btn--sm { padding: 11px 18px; font-size: 16px; box-shadow: 0 4px 0 var(--ink); }
.btn--sm:active { transform: translateY(4px); }

/* ───────────────────────────── icons ─────────────────────────────
   Drawn by Quiver (tools/make-site-icons.mjs), never emoji: an emoji is
   whatever Apple, Google or Microsoft decided it looks like, which puts
   three foreign art styles on a page that has its own. */
.ico {
  flex: 0 0 auto; display: inline-block; vertical-align: -.18em;
  width: 1.15em; height: 1.15em; object-fit: contain;
}
.ico--btn { width: 1.35em; height: 1.35em; }
.ico--h { width: 1.1em; height: 1.1em; vertical-align: -.16em; }

/* List bullets. The good lists get the drawn spark; the "screen time that gets
   spent" list gets a flat dead dot, because it should not look like a feature. */
.bul {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: .18em;
  background: url("./img/icons/spark.svg") center/contain no-repeat;
}
.bul--no {
  width: 9px; height: 9px; margin-top: .5em; margin-left: 4px;
  background: currentColor; border-radius: 50%; opacity: .45;
}

/* ─────────────────────── the speaker buttons ───────────────────────
   The whole pitch is that a child who cannot read can use this, so the
   site itself has to be listenable. Every section carries its own one. */
.say {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 11px;
  font: inherit; font-weight: 800; font-size: 14px; color: var(--ink);
  background: var(--sky);
  border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  transition: transform .12s var(--spring), box-shadow .12s;
}
.say:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.say__ico { flex: 0 0 auto; width: 20px; height: 20px; object-fit: contain; }
.say.is-playing { background: var(--grass); }
.say.is-playing .say__ico { animation: wiggle .6s ease-in-out infinite; }
@keyframes wiggle { 50% { transform: scale(1.22) rotate(-8deg); } }

.say--big { font-size: clamp(17px, 2vw, 21px); padding: 15px 26px 15px 20px; box-shadow: 0 var(--pop) 0 var(--ink); }
.say--big .say__ico { width: 26px; height: 26px; }

/* ───────────────────────────── top bar ───────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 227, 176, .93);
  backdrop-filter: blur(6px);
  border-bottom: var(--edge) solid var(--ink);
}
.top__in { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.logo {
  font-family: 'Bagel Fat One', cursive; font-weight: 400;
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1; margin: 0;
  color: var(--sunny); -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink);
  transform: rotate(-2.5deg);
}
.logo span { color: var(--tomato); display: inline-block; transform: rotate(4deg); }
.top__spacer { flex: 1; }

/* ───────────────────────────── hero ───────────────────────────── */
.hero { padding-top: clamp(34px, 5vw, 64px); padding-bottom: clamp(30px, 4vw, 56px); }
.hero__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero h1 {
  font-family: 'Bagel Fat One', cursive; font-weight: 400;
  font-size: clamp(32px, 5.2vw, 54px); line-height: 1.02; margin: 0 0 18px;
  letter-spacing: -.02em;
  color: var(--sunny); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  text-shadow: 0 8px 0 var(--ink);
}
.hero h1 em { font-style: normal; color: var(--tomato); }
.hero__sub { font-size: clamp(17px, 2.1vw, 23px); line-height: 1.4; margin: 0 0 24px; max-width: 30ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__note { margin: 16px 0 0; font-size: 14.5px; opacity: .6; }

/* The device shot. A hard ink frame, tilted, like a sticker stuck on. */
.shot {
  display: block; width: 100%; height: auto;
  border: var(--edge) solid var(--ink); border-radius: var(--r);
  box-shadow: 0 var(--pop) 0 var(--ink);
  background: var(--night);
}
.shot--tilt-l { transform: rotate(-2.4deg); }
.shot--tilt-r { transform: rotate(2deg); }

.hero__art { position: relative; }
/* A speech bubble on the hero shot — this is the actual input, verbatim. */
.bubble {
  position: absolute; left: -6%; bottom: 7%;
  max-width: 250px; padding: 14px 18px;
  background: #fff; border: var(--edge) solid var(--ink); border-radius: 20px;
  box-shadow: 0 var(--pop) 0 var(--ink);
  font-size: clamp(15px, 1.7vw, 18px); font-weight: 800; line-height: 1.25;
  transform: rotate(-3deg);
  animation: float 4.5s ease-in-out infinite;
}
.bubble::after {
  content: ''; position: absolute; right: 26px; bottom: -17px;
  width: 22px; height: 17px; background: #fff;
  border-right: var(--edge) solid var(--ink); border-bottom: var(--edge) solid var(--ink);
  border-bottom-right-radius: 6px;
  transform: skewX(-22deg);
}
@keyframes float { 50% { transform: rotate(-3deg) translateY(-9px); } }

@media (max-width: 860px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__art { max-width: 400px; margin-inline: auto; }
  .bubble { left: -2%; max-width: 210px; }
}

/* ───────────────────── the consuming / building strip ───────────────────── */
.versus { background: var(--night); color: var(--paper); border-block: var(--edge) solid var(--ink); }
.versus .display { color: var(--sunny); -webkit-text-stroke-color: var(--night); text-shadow: 0 7px 0 rgba(0,0,0,.45); }
.versus__head { text-align: center; margin-bottom: clamp(26px, 4vw, 44px); }
.versus__head .lede { opacity: .78; max-width: 46ch; margin-inline: auto; }
.versus__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 34px); align-items: stretch; }
@media (max-width: 760px) { .versus__grid { grid-template-columns: 1fr; } }

.vcard {
  padding: clamp(22px, 3vw, 32px);
  border: var(--edge) solid var(--ink); border-radius: var(--r);
  box-shadow: 0 var(--pop) 0 var(--ink);
}
.vcard--bad { background: #5A5148; color: #EFE6DA; }
.vcard--good { background: var(--grass); color: var(--ink); }
.vcard h3 { display: flex; align-items: center; gap: 10px; font-size: clamp(21px, 2.6vw, 28px); }
.vcard ul { list-style: none; margin: 14px 0 0; padding: 0; }
/* Grid, not flex: with flex the inline <em> inside an item becomes its own
   flex child and drifts to the far edge on its own line. */
.vcard li { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; padding: 8px 0; font-size: clamp(15px, 1.8vw, 18px); line-height: 1.3; }

.vcard--bad li { opacity: .85; }

/* ─────────────────────────── the three steps ─────────────────────────── */
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 30px); }
@media (max-width: 900px) { .steps__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.step {
  position: relative;
  background: var(--paper);
  border: var(--edge) solid var(--ink); border-radius: var(--r);
  box-shadow: 0 var(--pop) 0 var(--ink);
  padding: 18px 18px 22px;
  display: flex; flex-direction: column;
}
.step:nth-child(odd)  { transform: rotate(-.9deg); }
.step:nth-child(even) { transform: rotate(.8deg); }
.step__n {
  position: absolute; top: -20px; left: 18px;
  width: 46px; height: 46px; display: grid; place-items: center;
  font-family: 'Bagel Fat One', cursive; font-size: 24px; color: #fff;
  background: var(--tomato); border: var(--edge) solid var(--ink); border-radius: 50%;
  box-shadow: 0 4px 0 var(--ink);
}
/* Direct child only — the screenshot. An unscoped `.step img` also catches the
   little icon inside the tag pill and stretches it to a 4/5 block. */
.step > img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center;
  display: block; border: 3px solid var(--ink); border-radius: 14px;
  margin: 14px 0; background: var(--night);
}
.step h3 { font-size: clamp(19px, 2.2vw, 24px); margin-top: 10px; }
.step p { margin: 0 0 14px; font-size: 16px; line-height: 1.35; opacity: .85; }
/* margin-top:auto pins it to the bottom, so the three tags line up across the
   row despite the paragraphs above them being different lengths. */
.step__tag {
  align-self: flex-start; margin: auto 0 0; padding: 5px 12px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 800;
  border: 3px solid var(--ink); border-radius: 999px; background: var(--sunny);
}

/* ─────────────────────────── two-up feature rows ─────────────────────────── */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 62px); align-items: center; }
.row + .row { margin-top: clamp(48px, 7vw, 90px); }
.row--flip .row__art { order: -1; }
@media (max-width: 860px) {
  .row { grid-template-columns: 1fr; }
  .row--flip .row__art { order: 0; }
  .row__art { max-width: 420px; margin-inline: auto; }
}
.row h2 { margin-bottom: 12px; }
.row .lede { margin-bottom: 18px; }

/* The drawn cast, mounted like two stickers. These are transparent sprites, not
   screenshots, so each gets its own paper card to sit on rather than the dark
   device frame .shot provides. */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 20px); align-items: start; }
.gallery figure { margin: 0; }
.gallery figure:last-child { margin-top: 30px; }
.gallery img {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  object-fit: contain; padding: clamp(14px, 2.5vw, 26px);
  background: var(--paper); border: var(--edge) solid var(--ink);
  border-radius: var(--r); box-shadow: 0 var(--pop) 0 var(--ink);
}
.gallery figure:first-child img { transform: rotate(-2.4deg); }
.gallery figure:last-child img  { transform: rotate(2deg); }
.gallery figcaption {
  margin-top: 14px; font-size: 14px; font-weight: 800; line-height: 1.2;
  text-align: center; opacity: .65; font-style: italic;
}
@media (max-width: 500px) { .gallery figure:last-child { margin-top: 16px; } }

/* ─────────────────────────── starter templates ─────────────────────────── */
/* Two rows of three. Six across is what the app does on a phone, but here the
   grid only gets half the page, and six columns squeezes every label to three
   lines. */
.starters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 460px) { .starters { grid-template-columns: repeat(2, 1fr); } }
.starter {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px 12px;
  background: var(--paper); border: var(--edge) solid var(--ink);
  border-radius: 18px; box-shadow: 0 5px 0 var(--ink);
  border-bottom: 8px solid var(--tone, var(--sunny));
  transition: transform .14s var(--spring);
}
.starter:hover { transform: translateY(-4px) rotate(-1.5deg); }
.starter img { width: clamp(40px, 5vw, 56px); height: clamp(40px, 5vw, 56px); object-fit: contain; display: block; }
.starter span { font-size: 13px; font-weight: 800; text-align: center; line-height: 1.1; opacity: .85; }

/* ─────────────────────────── safety ─────────────────────────── */
.safe { background: var(--sky); border-block: var(--edge) solid var(--ink); }
.safe .display { color: #fff; text-shadow: 0 7px 0 var(--ink); }
.safe__head { text-align: center; margin-bottom: clamp(26px, 4vw, 40px); }
.safe__head .lede { max-width: 44ch; margin-inline: auto; opacity: .92; }
/* Fixed three, not auto-fit: six items across four columns leaves a two-card
   orphan row with a hole in it. */
.safe__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .safe__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .safe__grid { grid-template-columns: 1fr; } }
.safe__item {
  background: var(--paper); border: var(--edge) solid var(--ink);
  border-radius: 18px; box-shadow: 0 5px 0 var(--ink);
  padding: 18px 18px 20px;
}
.safe__item b { display: block; font-family: 'Bagel Fat One', cursive; font-weight: 400; font-size: 19px; margin: 8px 0 6px; }
.safe__item p { margin: 0; font-size: 15.5px; line-height: 1.35; opacity: .8; }
.safe__ico { display: block; width: 36px; height: 36px; object-fit: contain; }

/* ─────────────────────── the non-reader callout ─────────────────────── */
.reader { text-align: center; }
.reader__card {
  position: relative;
  max-width: 780px; margin-inline: auto;
  padding: clamp(28px, 4vw, 48px);
  background: var(--grape); color: #fff;
  border: var(--edge) solid var(--ink); border-radius: 30px;
  box-shadow: 0 10px 0 var(--ink);
}
.reader__card .display { color: #fff; text-shadow: 0 7px 0 var(--ink); }
.reader__card p { font-size: clamp(16px, 2vw, 20px); opacity: .95; max-width: 48ch; margin-inline: auto; }
.reader__try { margin-top: 22px; }
.reader__ears { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.reader__ear {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 800; font-size: 15px; color: var(--ink);
  padding: 10px 16px; background: var(--paper);
  border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink);
  cursor: pointer; transition: transform .12s var(--spring), box-shadow .12s;
}
.reader__ear:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.reader__ear.is-playing { background: var(--sunny); }

/* ─────────────────────────── pricing ─────────────────────────── */
.price { text-align: center; }
.price__card {
  max-width: 460px; margin: 0 auto;
  padding: clamp(26px, 4vw, 40px) clamp(22px, 3vw, 36px) clamp(28px, 4vw, 38px);
  background: var(--paper); border: 6px solid var(--ink); border-radius: 30px;
  box-shadow: 0 12px 0 var(--ink);
  transform: rotate(-1deg);
}
.price__tag {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: 'Bagel Fat One', cursive; font-weight: 400;
  font-size: clamp(56px, 9vw, 86px); line-height: 1;
  color: var(--tomato); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  text-shadow: 0 7px 0 var(--ink);
}
.price__per { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px; color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; }
.price__list { list-style: none; margin: 22px 0 26px; padding: 0; text-align: left; }
.price__list li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 16.5px; line-height: 1.3; }

.price__fine { margin: 16px 0 0; font-size: 14px; opacity: .6; }

/* ─────────────────────────── faq ─────────────────────────── */
.faq { max-width: 760px; margin-inline: auto; }
.faq details {
  background: var(--paper); border: var(--edge) solid var(--ink);
  border-radius: 18px; box-shadow: 0 5px 0 var(--ink);
  padding: 4px 18px; margin-bottom: 12px;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 14px 0;
  font-weight: 800; font-size: clamp(16px, 2vw, 19px);
  display: flex; align-items: center; gap: 10px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; margin-left: auto; font-family: 'Bagel Fat One', cursive; font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0 0 16px; font-size: 16px; line-height: 1.45; opacity: .82; }

/* ─────────────────────────── closer + footer ─────────────────────────── */
.closer { text-align: center; }
.closer .display { font-size: clamp(30px, 6vw, 60px); }
.closer .lede { max-width: 40ch; margin: 0 auto 26px; }

.foot {
  background: var(--night); color: var(--paper);
  border-top: var(--edge) solid var(--ink);
  padding: 30px 0; text-align: center;
}
.foot p { margin: 6px 0; font-size: 14px; opacity: .6; }
.foot a { color: var(--sunny); }