/* Gnappo — the marketing site.
 *
 * ─── TWO PALETTES ON ONE PAGE, ON PURPOSE ────────────────────────────────────────────────────────
 * The product is two products sharing one subscription: a world a child chooses, and a calm account of
 * it for the grown-up. The page is built the same way. The kid half is cream, coral and round; the
 * parent half is white, grey and square. Scrolling between them is the pitch.
 *
 * ─── NOT ONE EXTERNAL REQUEST ────────────────────────────────────────────────────────────────────
 * No web font, no analytics, no tag manager, no embed. That is not a performance preference — the
 * product promises no third-party tracking of children, and a marketing site that loaded a font from
 * Google while saying so would be making the promise and breaking it on the same page. It is also why
 * privacy.html can say this site sets no cookies and mean it exactly.
 *
 * ─── MOTION IS A PRODUCT VALUE HERE ──────────────────────────────────────────────────────────────
 * Gnappo ships a "calm" mood that zeroes every animation, because for the children this is built for a
 * busy screen is not a preference problem — it is whether the product works at all. So every animation
 * below is gated on prefers-reduced-motion, and the gate is one rule at the bottom rather than a
 * per-animation opt-out somebody will forget.
 */

:root {
  --ink: #16181a;
  --ink-soft: #4a5056;
  --ink-faint: #7b8189;
  --paper: #ffffff;

  /* The grown-up half. Straight from the app's own tokens (frontend/src/index.css). */
  --calm-bg: #f7f7f5;
  --calm-line: #e2e3df;
  --calm-accent: #2f6f52;
  --calm-accent-soft: #e4efe9;

  /* The child's half. Taken off the character: the glasses are the green, the ears are the coral. */
  --kid-bg: #fff8ec;
  --kid-green: #22c58b;
  --kid-green-deep: #12996a;
  --kid-coral: #f4907c;
  --kid-sky: #7cc7f4;
  --kid-sun: #ffd166;
  --kid-plum: #9b7ede;

  --radius: 14px;
  --radius-lg: 26px;
  --shadow: 0 1px 2px rgba(16, 24, 20, .05), 0 8px 24px rgba(16, 24, 20, .06);
  --shadow-lift: 0 2px 4px rgba(16, 24, 20, .06), 0 18px 40px rgba(16, 24, 20, .1);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maxw: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--calm-accent); }

/* Keyboard users first: the nav is a row of jump links, so landing on one is the common case. */
:focus-visible {
  outline: 3px solid var(--kid-green-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 12px 18px; z-index: 100; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

/* ─── navigation ─────────────────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--calm-line);
}
.nav-in {
  max-width: var(--maxw); margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 20px;
}
.nav-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.nav-logo img { width: 34px; height: 34px; border-radius: 9px; }
.nav-logo b { font-size: 19px; letter-spacing: -.02em; }
/* ⚠️ NO `flex-wrap` HERE ANY MORE, AND THAT IS THE FIX RATHER THAN AN ECONOMY. A wrapping flex row
   sitting to the right of the logo does not push the logo aside when it folds — it grows downwards
   and the second line runs straight across the word "Gnappo". On a phone the nav rendered as three
   ragged lines with the brand struck through the middle of them. The narrow layout is decided
   explicitly at the bottom of this file instead of being left to wrapping. */
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav-links a {
  text-decoration: none; color: var(--ink-soft); font-size: 15px; font-weight: 500;
  padding: 8px 12px; border-radius: 999px; white-space: nowrap;
}
.nav-links a:hover { background: var(--calm-bg); color: var(--ink); }
/* The call to action is a SIBLING of `.nav-links`, not a member of it, so that the narrow layout can
   keep it on the first row beside the logo while the links move to their own. That also retires the
   specificity fight this file used to carry: `.nav-links a` (0,1,1) beat `.btn` (0,1,0) whatever the
   order, and the most important control on the page rendered as grey text on a dark green pill.
   Outside `.nav-links` there is no `a` selector to lose to, so `.btn` simply applies. */
.nav-cta { flex: 0 0 auto; }

.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
  background: var(--calm-accent); color: #fff;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { background: #245740; transform: translateY(-1px); }
.btn-kid { background: var(--kid-green-deep); }
.btn-kid:hover { background: #0d7b55; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--calm-line); }
.btn-ghost:hover { background: var(--calm-bg); color: var(--ink); }
.btn-lg { font-size: 17px; padding: 15px 30px; }

/* ─── hero ───────────────────────────────────────────────────────────────────────────────────── */

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--kid-bg) 0%, #fffdf8 70%, var(--paper) 100%);
  padding: 60px 0 84px;
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
  position: relative; z-index: 2;
}
.hero h1 {
  font-size: clamp(34px, 5.4vw, 56px); line-height: 1.05; letter-spacing: -.03em;
  margin: 0 0 18px;
}
.hero h1 .hl { color: var(--kid-green-deep); }
.hero p.lede { font-size: clamp(17px, 2.2vw, 21px); color: var(--ink-soft); margin: 0 0 26px; max-width: 30em; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--ink-faint); }

.hero-art { position: relative; }
.hero-scene { width: min(420px, 92%); height: auto; margin: 0 auto; display: block; }

/* ─── section furniture ──────────────────────────────────────────────────────────────────────── */

section { padding: 84px 0; }
.sec-kids { background: var(--kid-bg); }
.sec-parents { background: var(--paper); }
.sec-trust { background: var(--calm-bg); border-top: 1px solid var(--calm-line); border-bottom: 1px solid var(--calm-line); }
/* Its own ground, between the child's cream and the grown-up's white: this section belongs to neither
   half of the product, it is the argument for why the two are worth having at all. */
.sec-nd { background: linear-gradient(180deg, #faf7ff 0%, #f6fbff 100%); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.eyebrow-kid { background: rgba(34, 197, 139, .16); color: var(--kid-green-deep); }
.eyebrow-parent { background: var(--calm-accent-soft); color: var(--calm-accent); }
.eyebrow-nd { background: rgba(155, 126, 222, .16); color: #6a4bb0; }

h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 16px; }
h3 { font-size: 19px; margin: 0 0 8px; letter-spacing: -.01em; }
.sec-lede { font-size: 19px; color: var(--ink-soft); max-width: 34em; margin: 0 0 44px; }

/* The child's half is rounder and warmer than the grown-up's — see the header note. */
.sec-kids h2 { font-size: clamp(30px, 4.4vw, 44px); }
.sec-kids .card { border-radius: var(--radius-lg); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--paper); border: 1px solid var(--calm-line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow);
}
.sec-kids .card { border-color: rgba(18, 153, 106, .16); }
.card p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.card .ico { width: 46px; height: 46px; margin-bottom: 14px; }

/* ─── the split panel: two products, one subscription ────────────────────────────────────────── */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); }
.split > div { padding: 34px 32px; }
.split-kid { background: linear-gradient(160deg, #eafff6, #fff8ec); }
.split-parent { background: #fff; border-left: 1px solid var(--calm-line); }
.split h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.split ul { margin: 14px 0 0; padding: 0 0 0 20px; color: var(--ink-soft); font-size: 15.5px; }
.split li { margin-bottom: 9px; }

/* ─── the neurodivergent flow ────────────────────────────────────────────────────────────────── */

/* Three steps and two arrows on one row. The arrows are the point of the layout — this section is
   describing a PIPELINE (what you wrote → what we derive → what the child reads), and a plain card
   grid would lose the ordering that makes the claim credible. */
.nd-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 22px; align-items: center; }
.nd-step {
  background: var(--paper); border: 1px solid rgba(155, 126, 222, .22);
  border-radius: var(--radius); padding: 22px 20px; box-shadow: var(--shadow); height: 100%;
}
.nd-step h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: #6a4bb0; }
.nd-step p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.nd-arrow { width: 46px; flex: none; }

.sec-nd .card { border-color: rgba(155, 126, 222, .18); }

/* ─── trust list ─────────────────────────────────────────────────────────────────────────────── */

.trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 34px; margin: 0; padding: 0; list-style: none; }
.trust li { display: flex; gap: 13px; align-items: flex-start; font-size: 16px; }
.trust svg { flex: none; margin-top: 3px; }
.trust b { display: block; }
.trust span { color: var(--ink-soft); font-size: 15px; }

/* ─── FAQ ────────────────────────────────────────────────────────────────────────────────────── */

/* <details>, so it works with no JavaScript on a site that ships none. ⚠️ The answer text is in the
   DOM whether or not the disclosure is open, which is what keeps it indexable and quotable — a FAQ
   built by injecting answers on click is a FAQ a crawler and an LLM never read. */
#faq .faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq {
  background: var(--paper); border: 1px solid var(--calm-line);
  border-radius: var(--radius); padding: 4px 20px;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 0; font-weight: 600; font-size: 16.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-weight: 400; font-size: 22px; color: var(--calm-accent); flex: none; line-height: 1;
}
.faq[open] summary::after { content: "\2013"; }
.faq[open] summary { color: var(--calm-accent); }
.faq p { margin: 0 0 18px; color: var(--ink-soft); font-size: 16px; max-width: 62ch; }

/* ─── the closing call ───────────────────────────────────────────────────────────────────────── */

.cta {
  background: var(--ink); color: #fff; border-radius: var(--radius-lg);
  padding: 52px 44px; text-align: center; position: relative; overflow: hidden;
}
.cta h2 { color: #fff; margin-bottom: 12px; }
.cta p { color: #b9bec4; max-width: 30em; margin: 0 auto 26px; }
.cta .btn { background: var(--kid-green); color: #06301f; }
.cta .btn:hover { background: #3fd9a2; }

/* ─── footer ─────────────────────────────────────────────────────────────────────────────────── */

footer { background: var(--paper); padding: 52px 0 60px; border-top: 1px solid var(--calm-line); }
.foot { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; }
.foot img { width: 38px; height: 38px; border-radius: 10px; }
.foot-links { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { color: var(--ink-soft); text-decoration: none; font-size: 15px; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.foot-note { margin-top: 26px; color: var(--ink-faint); font-size: 13.5px; max-width: 60em; }

/* ─── legal pages ────────────────────────────────────────────────────────────────────────────── */

.legal { padding: 56px 0 90px; }
.legal h1 { font-size: clamp(30px, 4.6vw, 42px); letter-spacing: -.03em; margin: 0 0 10px; }
.legal .updated { color: var(--ink-faint); font-size: 15px; margin: 0 0 34px; }
.legal h2 { font-size: 24px; margin: 46px 0 12px; scroll-margin-top: 80px; }
.legal h3 { font-size: 18px; margin: 28px 0 8px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 16.5px; }
.legal li { margin-bottom: 8px; }
.legal table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15.5px; }
.legal th, .legal td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--calm-line); vertical-align: top; }
.legal th { color: var(--ink); font-weight: 600; background: var(--calm-bg); }
.legal td { color: var(--ink-soft); }

/* What a child is told, in words a child can read. The design codes ask for exactly this, and it is
   the only part of a privacy policy the person it is about might actually open. */
.kidbox {
  background: var(--kid-bg); border: 2px dashed rgba(18, 153, 106, .35);
  border-radius: var(--radius-lg); padding: 26px 28px; margin: 26px 0 40px;
  display: flex; gap: 20px; align-items: flex-start;
}
.kidbox img { width: 74px; flex: none; }
.kidbox h2 { margin: 0 0 10px; font-size: 21px; }
.kidbox p, .kidbox li { color: #2a3f35; font-size: 16.5px; }
.kidbox ul { margin: 10px 0 0; padding-left: 20px; }

.callout {
  background: var(--calm-accent-soft); border-left: 4px solid var(--calm-accent);
  padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0; margin: 22px 0;
}
.callout p { margin: 0; color: #1f4635; }

/* ⚠️ A value the operator must replace before this is a legal document rather than a draft. Styled to
   be impossible to publish by accident — see the note at the top of privacy.html. */
.todo {
  background: #fff3cd; border-bottom: 2px dotted #b8860b; color: #6b4e00;
  padding: 0 4px; font-weight: 600; border-radius: 3px;
}

.toc { background: var(--calm-bg); border: 1px solid var(--calm-line); border-radius: var(--radius); padding: 20px 24px; margin: 0 0 34px; }
.toc p { margin: 0 0 10px; font-weight: 600; color: var(--ink); font-size: 15px; }
.toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 30px; }
.toc li { margin-bottom: 5px; font-size: 15px; }
.toc a { color: var(--ink-soft); text-decoration: none; }
.toc a:hover { color: var(--calm-accent); text-decoration: underline; }

/* ─── what used to be inline ─────────────────────────────────────────────────────────────────────
 *
 * ⚠️ THESE WERE style="" ATTRIBUTES AND EVERY ONE OF THEM WAS SILENTLY DEAD. `style-src 'self'` in
 * _headers blocks the style ATTRIBUTE as well as <style> elements — that is exactly what the
 * directive says it does — so the browser dropped all 44 of them with no visible error. The symptom
 * was two things at once: boxes with no space between them (the margins never applied), and every
 * staggered animation firing in lockstep (the delays never applied either).
 *
 * The fix is not 'unsafe-inline'. A site that ships no JavaScript and loads nothing third-party has
 * no business relaxing its own policy to accommodate markup that could just as well be a class.
 */

.mt-32 { margin-top: 34px; }
.mt-44 { margin-top: 48px; }
.mt-56 { margin-top: 64px; }
.center { text-align: center; }
.foot-tag { color: var(--ink-faint); font-size: 14.5px; }

/* the worlds strip */
.worlds-title { font-size: 22px; margin-bottom: 6px; }
.worlds-lede { color: var(--ink-soft); margin: 0 0 22px; max-width: 34em; }
.worlds-svg { width: 100%; max-width: 500px; }
.worlds-note { color: var(--ink-faint); font-size: 14.5px; margin-top: 14px; }

/* the closing panel's drifting backdrop */
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .13; }
/* an icon whose pulse ring animates outside its own viewBox */
.ico-bleed { overflow: visible; }

/* the 404 */
.nf-mascot { margin: 0 auto 22px; }
.nf-title { font-size: clamp(28px, 4.4vw, 40px); letter-spacing: -.03em; margin: 0 0 12px; }
.nf-lede { color: var(--ink-soft); max-width: 34em; margin: 0 auto 26px; }
.nf-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }


/* ─── animation ──────────────────────────────────────────────────────────────────────────────── */

@keyframes drift { 
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(14px, -120px) rotate(180deg); }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }
@keyframes pulsering { 0% { r: 26; opacity: .55; } 100% { r: 46; opacity: 0; } }
@keyframes popin { 0% { opacity: 0; transform: translateY(8px) scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes sweep { 0% { stroke-dashoffset: 240; } 100% { stroke-dashoffset: 0; } }
@keyframes spinslow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.bob { animation: bob 5s ease-in-out infinite; }
.seed { animation: drift 11s linear infinite; transform-origin: center; }
.ring { animation: pulsering 2.6s ease-out infinite; }
.pop { animation: popin .5s both; }
.sweep { stroke-dasharray: 240; animation: sweep 2.6s ease-out forwards; }
.spin { animation: spinslow 34s linear infinite; transform-origin: center; }
.twinkle { animation: twinkle 3s ease-in-out infinite; }
.lid { animation: blink 6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* ⚠️ AFTER the shorthands above, and that is the whole reason this block lives here. `animation:`
   is a shorthand: it resets animation-delay to 0s. Declared before `.seed`, every one of these
   was overwritten at equal specificity and the stagger silently collapsed — which only became
   visible once the inline styles that used to win were removed. */
/* Stagger. dN steps a sequence forward; sN starts an ambient loop partway through so a row of
   identical drifting things does not move as one object. */
.d0 { animation-delay: 0s; }
.dp1 { animation-delay: .1s; }
.dp35 { animation-delay: .35s; }
.dp4 { animation-delay: .4s; }
.dp5 { animation-delay: .5s; }
.dp6 { animation-delay: .6s; }
.dp9 { animation-delay: .9s; }
.d1 { animation-delay: 1s; }
.d1p2 { animation-delay: 1.2s; }
.d1p4 { animation-delay: 1.4s; }
.d1p5 { animation-delay: 1.5s; }
.d2 { animation-delay: 2s; }
.d2p5 { animation-delay: 2.5s; }
.d3 { animation-delay: 3s; }
.s2 { animation-delay: -2s; }
.s2p4 { animation-delay: -2.4s; }
.s3p7 { animation-delay: -3.7s; }
.s4 { animation-delay: -4s; }
.s5p1 { animation-delay: -5.1s; }
.s7 { animation-delay: -7s; }
.s7p6 { animation-delay: -7.6s; }
.s9p2 { animation-delay: -9.2s; }

/* ⚠️ ONE GATE FOR EVERY ANIMATION ON THE SITE. See the header note: this is the same promise the
   product's calm mood makes, and a per-animation opt-out is one somebody eventually forgets. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ─── homework ───────────────────────────────────────────────────────────────────────────────── */

/* The grown-up palette, because the argument in this section is one a parent is being asked to
   believe: it sits between the child's cream half and the white parent half and belongs to the
   second. */
.sec-homework { background: var(--calm-bg); border-top: 1px solid var(--calm-line); }

/* The chat beside the two things it is demonstrating — stacked once there is no room for both. */
.hw-demo { display: grid; grid-template-columns: 380px 1fr; gap: 44px; align-items: center; }
.hw-figure { margin: 0; }
.hw-notes { display: flex; flex-direction: column; gap: 26px; }
.hw-note {
  margin: 0; padding-left: 18px; border-left: 3px solid var(--calm-accent);
  color: var(--ink-soft); font-size: 16px;
}
.hw-note b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 5px; }
/* ⚠️ AN INLINE SVG AND NOT A SCREENSHOT, for the reason the rest of this page has none: a PNG of a
   chat goes stale the day the copy changes, weighs more than everything else here put together, and
   says nothing to anybody who cannot see it. This one has its words in <text>, so it is selectable,
   searchable and translatable, and it costs no request — which this site cannot make anyway. */
/* ⚠️ CAPPED, NOT STRETCHED. The viewBox is 380 wide and an SVG scales its text with the box, so a
   chat allowed to fill a 1080-pixel column would render 15px type at 43px — a mock-up shouting at the
   paragraph beside it. At its natural width it is exactly the size a chat on a phone is, which is
   also what it is a picture of. */
.hw-chat { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.hw-chat text { font-family: var(--font); }
/* ⚠️ `fill-box`, or `popin` swells each bubble from the corner of the whole drawing instead of from
   its own middle — an SVG group's transform origin is the origin of the SVG, not of the group. */
.hw-bubble { transform-box: fill-box; transform-origin: center; }
.hw-figure figcaption {
  margin-top: 16px; text-align: center; color: var(--ink-faint); font-size: 14.5px;
}

/* The ladder, weakest help first — the order on the page is the order in the product. */
.hw-rungs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
/* A column, so the "who it is for" line can be pushed to the bottom: the four rungs carry very
   different amounts of prose and a badge that floats wherever its paragraph happened to end reads as
   four unrelated cards rather than one ladder. */
.hw-rung {
  background: var(--paper); border: 1px solid var(--calm-line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.hw-rung b { display: block; font-size: 16.5px; letter-spacing: -.01em; margin-bottom: 8px; }
.hw-rung p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.hw-rung em {
  display: block; margin-top: auto; padding-top: 16px; font-style: normal; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--calm-accent);
}

/* ─── responsive ─────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .hero-scene { width: min(300px, 74%); }
  .cards, .cards-2 { grid-template-columns: 1fr 1fr; }
  .hw-rungs { grid-template-columns: 1fr 1fr; }
  .hw-demo { grid-template-columns: 1fr; gap: 30px; }
  .split { grid-template-columns: 1fr; }
  .nd-flow { grid-template-columns: 1fr; }
  .nd-arrow { width: 26px; margin: 0 auto; transform: rotate(90deg); }
  .split-parent { border-left: 0; border-top: 1px solid var(--calm-line); }
  .toc ol { columns: 1; }
}
/* ─── the header, once one row stops fitting ──────────────────────────────────────────────────────
   Two rows: the brand and the call to action on the first, the links on their own beneath. The links
   sit in a strip that scrolls sideways if the words need more room than the phone has.

   ⚠️ NO HAMBURGER, AND NOT FOR WANT OF TRYING. This site ships NO JavaScript of any kind — the CSP in
   `website/_headers` enforces it — and every pure-CSS disclosure (`<details>`, the checkbox hack) has
   the same defect here: the links are in-page anchors, so tapping one scrolls the page and leaves the
   panel open across the section it just arrived at, with nothing able to close it. A strip has
   nothing to get stuck open. Four links are not worth a mechanism.

   800px and not 640: a single row needs about 770px for the logo, four links and the button, so the
   overlap started well above the phone breakpoint — on an iPad in portrait, which is exactly the
   device a parent reads this on. */
@media (max-width: 800px) {
  .nav-in { flex-wrap: wrap; gap: 10px 12px; padding: 9px 16px; }
  .nav-logo { margin-right: auto; }
  .nav-links {
    /* `order` moves it below both, whatever the source order says. */
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    gap: 2px;
    overflow-x: auto;
    /* The bar is hidden because a scrollbar under four links is louder than the links. The strip is
       still reachable by touch, by trackpad and by keyboard focus, which moves it on its own. */
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .btn.nav-cta { padding: 9px 16px; font-size: 14px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 60px 0; }
  .cards, .cards-2, .trust, .hw-rungs { grid-template-columns: 1fr; }
  .nav-links a { padding: 8px 9px; font-size: 14px; }
  .nav-logo b { font-size: 17px; }
  .cta { padding: 40px 24px; }
  .kidbox { flex-direction: column; }
  .legal table { font-size: 14.5px; }
  .legal th, .legal td { padding: 9px 10px; }
}
/* The narrowest phones still in use. The link strip scrolls when it has to, but a strip that scrolls
   by twelve pixels just looks like a word cut in half — "Safet" — so it is shrunk enough to fit whole
   at 360 and above, which is every handset anybody is actually holding. */
@media (max-width: 400px) {
  .nav-in { padding: 9px 12px; }
  .nav-links a { padding: 7px 7px; font-size: 13.5px; }
}