/* The landing page (landing.html). Same look as the kid's phone: the Diner Mint fridge door, round magnets,
   and Fredoka. The one bold idea is the staircase: the gadgets parents grew up with, standing on the steps.
   Shelby the snail is the logo, and turns up in the hero, at the foot of the cliff, asleep at bedtime, and at the end.
   Old gadgets are pixel art (art/gadgets.py), coarser the older they are; the smartphone is smooth, like the phone's own screens. */
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Patrick Hand"; src: url("fonts/patrick-hand.woff2") format("woff2"); font-display: swap; }

:root {
  --ink: #163838;
  --door: #d3ebdd;
  --door-lo: #b7dac6;
  --door-fill: linear-gradient(90deg, var(--door-lo), var(--door) 32%, var(--door) 68%, var(--door-lo));
  --paper: #f4faf6;
  --cherry: #e23a52;
  --gold: #ffb224;
  --navy: #213f8c;
  --bubblegum: #ee79a3;
  --go: #16774a;
  --red: #d3324a; /* buttons and the cliff: dark enough for white words */
  --soft: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 18px 28px -18px rgba(0, 0, 0, 0.55);
  --dash: 2px dashed rgba(22, 56, 56, 0.2);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; color: var(--ink); font: 400 1.125rem/1.6 "Fredoka", "Trebuchet MS", system-ui, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.12; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The logo: Shelby the snail (art/scenes.py), then the name in small letters (from config.js) */
.mark { display: inline-flex; align-items: flex-end; gap: 10px; font-size: 1.9rem; font-weight: 700; line-height: 1; letter-spacing: -0.01em;
  text-decoration: none; text-transform: lowercase; }
.mark img { width: auto; height: 1.55em; }
.mark span { padding-bottom: 0.14em; }
.mark.small { font-size: 1.4rem; }
/* A number on a round magnet: the stages */
.when b { display: grid; place-items: center; flex: none; width: 40px; aspect-ratio: 1; border-radius: 50%; color: #fff; font-size: 1.1rem; font-weight: 700;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55) 0 8%, transparent 10%), var(--c);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--c), #000 30%), 0 4px 5px rgba(0, 0, 0, 0.2); }

/* Buttons: magnets you press */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--red); color: #fff;
  box-shadow: 0 4px 0 #9e2236, 0 12px 18px -10px rgba(0, 0, 0, 0.45); font-family: inherit; font-size: 1.125rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: translate 0.08s, box-shadow 0.08s; }
.btn:active { translate: 0 3px; box-shadow: 0 1px 0 #9e2236, 0 4px 8px -4px rgba(0, 0, 0, 0.45); }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn.small { min-height: 42px; padding: 0 18px; font-size: 1rem; }

/* Top bar: the freezer door, with a gap before the door below */
.top { position: sticky; top: 0; z-index: 10; background: var(--door-fill); border-bottom: 5px solid rgba(22, 56, 56, 0.1); }
.top-row { display: flex; align-items: center; gap: 22px; min-height: 76px; }
.top-nav { display: flex; gap: 22px; margin-left: auto; font-weight: 500; }
.top-nav a, .signin { text-decoration: none; }
.top-nav a:hover, .signin:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.signin { padding-left: 22px; border-left: 2px solid rgba(22, 56, 56, 0.2); font-size: 1rem; }

/* Hero, and the sign-up again at the end: the fridge door */
.hero { position: relative; padding: 56px 0 0; overflow: hidden; background: var(--door-fill); border-bottom: 5px solid rgba(22, 56, 56, 0.1); }
.hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 40px; padding-bottom: 48px; }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.2rem); letter-spacing: -0.015em; line-height: 1.04; }
.hero h1 span { display: block; } /* the last two words on their own line */
.lede { margin-top: 22px; max-width: 24em; font-size: 1.4rem; line-height: 1.45; }
.hero-phone { width: 100%; height: auto; }
.end { padding: 72px 0 80px; border-bottom: 0; }
.end h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
.end-grid { display: grid; grid-template-columns: 1fr minmax(0, 340px); align-items: end; gap: 40px; }

/* The sign-up: a "Join the pilot" button in the hero and at the end (and the top bar's) opens the form in a dialog.
   .join is both those buttons with their notes and the form itself, so an answer shows in all three. */
.join { display: flex; flex-wrap: wrap; gap: 12px; max-width: 34em; margin-top: 28px; }
.join-box { width: min(30em, 100% - 32px); padding: 0; border: 0; border-radius: 28px; background: var(--paper); color: var(--ink); box-shadow: var(--soft); }
.join-box::backdrop { background: rgba(22, 56, 56, 0.5); }
html:has(.join-box[open]) { overflow: hidden; } /* the page stays put behind it */
.join-inner { position: relative; padding: 36px 28px 28px; }
.join-inner h2 { padding-right: 44px; font-size: 2rem; }
.join-inner > p { margin-top: 8px; }
.join-inner .join { margin-top: 22px; }
.join-inner input { min-width: 0; } /* two to a row (names, then email and kids) where they fit */
.join-inner .btn { flex: 1 1 100%; }
.join-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: inherit; font-family: inherit; font-size: 2rem; line-height: 1; cursor: pointer; }
.join-close:hover { background: rgba(22, 56, 56, 0.08); }
.join input, .join select { flex: 1 1 12em; min-height: 54px; padding: 0 22px; border: 2px solid rgba(22, 56, 56, 0.35); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; }
.join select { appearance: none; padding-right: 48px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23163838' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 22px center / 12px; }
.join select:invalid { color: #6b7f7f; } /* the "How many kids?" prompt reads like the other boxes' hints */
.join input:focus-visible, .join select:focus-visible { outline-offset: 2px; border-color: var(--ink); }
.join-note { flex-basis: 100%; font-size: 1rem; }
.join.done input, .join.done select, .join.done button { display: none; }
.join.done .join-note { padding: 14px 20px; border-radius: 16px; background: #fff; font-size: 1.125rem; font-weight: 600; }
.join.done .join-note::before { content: "✓ "; color: var(--go); }

/* Magnets and a handle on the door */
.pin { position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.75) 0 14%, transparent 16%), var(--c); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); }
.pin.p1 { --c: var(--cherry); top: 22px; left: 3%; width: 30px; height: 30px; }
.pin.p2 { --c: var(--navy); top: 38px; right: 9%; width: 22px; height: 22px; }
.pin.p3 { --c: var(--gold); bottom: 28px; left: 58%; width: 20px; height: 20px; }
.handle { position: absolute; top: 60px; right: 18px; width: 12px; height: 38%; border-radius: 6px;
  background: linear-gradient(90deg, #969da5, #eef0f2 45%, #8a9198); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.25); }

/* Sections */
.band { padding: 88px 0; }
.band.soft { background: var(--paper); border-block: 1px solid rgba(22, 56, 56, 0.08); }
.band h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.intro { margin-top: 14px; max-width: 26em; font-size: 1.4rem; line-height: 1.45; }

/* Why steps: two staircases on the same ages, 4 to 21. Each step runs from its age to the next one's,
   one rung higher, with its gadget standing on top. The kid's is flat, then a cliff at 11. */
.big { margin-top: 18px; max-width: 24em; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 500; line-height: 1.3; }
.track-head { margin-top: 52px; font-size: 1.25rem; }
.climb { position: relative; height: 350px; margin: 0; padding: 0; list-style: none; border-bottom: 4px solid var(--ink); }
.climb li { position: absolute; bottom: 0; left: calc((var(--from) - 4) / 17 * 100%); width: calc((var(--to) - var(--from)) / 17 * 100%);
  height: calc(30px + var(--n) * 42px); padding: 10px 12px; border-radius: 10px 10px 0 0; background: var(--door);
  box-shadow: inset 0 var(--top, 4px) 0 var(--c, rgba(255, 255, 255, 0.6)); }
.climb li + li { border-left: 3px solid #fff; }
/* Their staircase with the phone (in The steps): each step's top edge is its stage's color, and Shelby is on the first */
.shell li:nth-child(1) { --c: var(--cherry); --top: 6px; }
.shell li:nth-child(2) { --c: var(--gold); --top: 6px; }
.shell li:nth-child(3) { --c: var(--navy); --top: 6px; }
.shell li:nth-child(4) { --c: var(--bubblegum); --top: 6px; }
.shell a { text-underline-offset: 3px; }
.climb img { position: absolute; bottom: 100%; left: 8px; width: auto; max-width: calc(100% - 12px); height: auto; max-height: 96px; }
.climb.shell li:first-child img { left: auto; right: 4px; max-width: none; max-height: 72px; } /* Shelby, nose to the next step */
.climb b { display: block; font-size: 1.7rem; line-height: 1; }
.climb span { display: block; margin-top: 4px; font-size: 0.875rem; line-height: 1.25; }
.cliff li { background: var(--red); color: #fff; box-shadow: none; }
.cliff b { font-size: 2.4rem; }
.cliff span { max-width: 26em; font-size: 1.05rem; font-weight: 500; }
/* Everything that arrives with it, piled up on the cliff */
.cliff .pile { display: flex; flex-wrap: wrap; gap: 8px; max-width: 34em; margin-top: 14px; }
.pile i { padding: 4px 13px; border-radius: 999px; background: #fff; color: var(--red); font-size: 0.95rem; font-style: normal; font-weight: 600; rotate: -2deg; }
.pile i:nth-child(even) { rotate: 2.5deg; }
.pile i:nth-child(3n) { rotate: -4deg; translate: 0 3px; }
.cliff .floor { border: 0; background: none; color: var(--ink); }
.cliff .floor span { position: absolute; bottom: 10px; font-size: 1rem; font-weight: 400; opacity: 0.7; }
.cliff .floor img { bottom: 0; left: auto; right: 8px; max-height: 84px; } /* Shelby, stuck at the foot of the cliff */
.outro { margin-top: 64px; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.12; text-wrap: balance; }
/* Narrower than this the words stop fitting inside your steps, so the staircases stay staircases, only smaller:
   each of your steps keeps its gadget and its age (counted out of --from) and the words go in a list underneath. */
@media (max-width: 1080px) {
  .climb { height: 290px; }
  .climb li { --x: calc((var(--from) - 4) / 17 * 100%); --w: calc((var(--to) - var(--from)) / 17 * 100%); --h: calc(30px + var(--n) * 40px);
    height: var(--h); padding: 8px 10px; }
  .climb img { max-height: 52px; }
  .climb:not(.cliff) { height: auto; padding-top: 290px; border: 0; }
  .climb:not(.cliff)::before { content: ""; position: absolute; top: 286px; left: 0; right: 0; border-top: 4px solid var(--ink); }
  .climb:not(.cliff) li { position: static; display: flex; align-items: baseline; gap: 10px; width: auto; height: auto; margin-top: 10px; padding: 0;
    border: 0; background: none; box-shadow: none; }
  .climb:not(.cliff) li::before { content: counter(age); counter-reset: age var(--from); position: absolute; top: calc(286px - var(--h)); left: var(--x);
    box-sizing: border-box; width: var(--w); height: var(--h); padding: 7px 0 0 7px; border-radius: 10px 10px 0 0; background: var(--door);
    box-shadow: inset 0 var(--top, 4px) 0 var(--c, rgba(255, 255, 255, 0.6)); font-size: 1.1rem; font-weight: 700; line-height: 1; }
  .climb:not(.cliff) li + li::before { border-left: 3px solid #fff; }
  .climb:not(.cliff) img { top: calc(286px - var(--h)); bottom: auto; left: calc(var(--x) + var(--w) / 2); max-width: calc(var(--w) - 8px); translate: -50% -100%; }
  .climb:not(.cliff) b { flex: 0 0 1.5em; font-size: 1.3rem; }
  .climb:not(.cliff) span { margin-top: 0; font-size: 1rem; }
  .climb.shell li:first-child img { left: calc(var(--x) + var(--w)); right: auto; max-height: 34px; translate: -100% -100%; } /* wider than its step here, so it hangs off the back */
  .climb.cliff { margin-top: 16px; }
  .cliff b { font-size: 1.7rem; }
  .cliff span { font-size: 0.875rem; }
  .cliff .pile { gap: 5px; margin-top: 8px; }
  .cliff .floor span { bottom: 92px; } /* above Shelby, who fills the floor here */
  .pile i { padding: 2px 9px; font-size: 0.8rem; }
}

/* The steps: each stage, a real screen in the 7-inch display's black glass, then what it is */
#stages { margin-top: 20px; }
.stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 28px 56px; padding: 56px 0; border-bottom: var(--dash); }
.stage:nth-child(even) .unit { order: 2; }
.stage:nth-child(1) { --c: var(--cherry); }
.stage:nth-child(2) { --c: var(--gold); }
.stage:nth-child(3) { --c: var(--navy); }
.stage:nth-child(4) { --c: var(--bubblegum); }
/* Each stage's picture: a drawing of what changes at that stage (art/scenes.py) */
.unit { margin: 0; }
.unit img { display: block; width: 100%; height: auto; border-radius: 18px; }
.when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 500; }
.when em { padding: 3px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 2px rgba(22, 56, 56, 0.15); font-size: 0.875rem; font-style: normal; font-weight: 600; }
.when em.now { background: var(--go); color: #fff; box-shadow: none; }
.stage h3 { margin-top: 16px; font-size: clamp(2rem, 3.8vw, 2.9rem); line-height: 1.05; }
.line { margin-top: 14px; max-width: 26em; font-size: 1.25rem; line-height: 1.45; }
/* What's on the phone as little tags, and what's left out on purpose as the same tags, crossed out */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.tags li { padding: 4px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 2px var(--c); font-size: 1rem; font-weight: 500; line-height: 1.5; }
.left-out { margin-top: 18px; font-size: 0.9375rem; font-weight: 600; }
.tags.off { margin-top: 8px; }
.tags.off li { background: none; box-shadow: none; outline: 2px dashed rgba(22, 56, 56, 0.3); outline-offset: -2px; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--red); }
.learn { margin-top: 22px; font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
.had { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 1rem; font-style: italic; }
.had img { flex: none; width: 56px; height: 46px; object-fit: contain; object-position: left bottom; }

/* The top step: a phone of their own */
.top-step { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 28px; margin-top: 56px; padding: 32px 36px; border-radius: 24px; background: var(--door); }
.top-step h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.top-step p { margin-top: 10px; max-width: 26em; font-size: 1.25rem; }
.top-step img { justify-self: center; height: 170px; width: auto; }

/* Bedtime: the hero's nightstand again, with the lights out (the band is the picture's own dark, NIGHT in art/scenes.py) */
.band.night { background: #16254a; color: #fff; }
.night-grid, .say-grid { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 40px; }

/* You decide: the faces you've said OK to, then the promises */
.say-grid { grid-template-columns: 1fr minmax(0, 460px); }
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; margin: 56px 0 0; padding: 0; list-style: none; }
.trust li { position: relative; padding-left: 52px; }
.trust li::before { content: "✓"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.5) 0 8%, transparent 10%), var(--go); color: #fff; font-weight: 700;
  box-shadow: 0 3px 0 #0e5233, 0 5px 6px rgba(0, 0, 0, 0.2); }
.trust li.warn::before { content: "!"; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.5) 0 8%, transparent 10%), var(--gold); color: var(--ink); box-shadow: 0 3px 0 #b97a0e, 0 5px 6px rgba(0, 0, 0, 0.2); }
.trust h3 { font-size: 1.25rem; }
.trust p { margin-top: 4px; }

/* The founder's note: a page stuck to the fridge door with a magnet, in handwriting */
.band.door { background: var(--door-fill); border-block: 5px solid rgba(22, 56, 56, 0.1); }
.note { position: relative; max-width: 660px; margin: 0 auto; padding: 48px 52px 36px; background: #fffdf6; box-shadow: var(--soft); rotate: -1.2deg; }
.note::before { content: ""; position: absolute; top: -15px; left: 50%; width: 34px; height: 34px; border-radius: 50%; translate: -50% 0;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.75) 0 14%, transparent 16%), var(--cherry); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); }
.note h2 { font-size: 1.6rem; }
.note blockquote { margin: 18px 0 0; font: 1.5rem/1.4 "Patrick Hand", "Fredoka", sans-serif; }
.note blockquote p + p { margin-top: 14px; }
.note figcaption { margin-top: 22px; font: 1.5rem/1.2 "Patrick Hand", "Fredoka", sans-serif; text-align: right; }
.note figcaption::before { content: "– "; }

/* Questions: each one opens in place */
.faq { max-width: 46em; margin-top: 32px; }
.faq details { border-bottom: var(--dash); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 1.2rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 20px; max-width: 40em; }

/* Footer */
.foot { padding: 36px 0 44px; background: var(--ink); color: #fff; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.foot-row a { margin-left: auto; font-weight: 600; }

/* Tablets and phones */
@media (max-width: 980px) {
  .top-nav { display: none; }
  .signin { margin-left: auto; padding-left: 0; border: 0; }
  .stage { grid-template-columns: minmax(0, 1fr); padding: 44px 0; }
  .stage:nth-child(even) .unit { order: 0; }
  .unit { max-width: min(620px, 100%); }
  .trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .top-row { gap: 14px; }
  .signin { display: none; }
  .top .btn.small { margin-left: auto; }
  .mark { font-size: 1.45rem; gap: 7px; }
  .end-grid img { max-width: 200px; }
  .hero { padding-top: 36px; }
  .hero-grid, .night-grid, .say-grid, .end-grid { grid-template-columns: 1fr; gap: 28px; }
  .lede, .intro { font-size: 1.25rem; }
  .handle { right: 8px; width: 9px; }
  .pin.p1, .pin.p2 { display: none; } /* they would sit on the headline */
  .band { padding: 60px 0; }
  .join .btn { flex: 1 1 100%; }
  .top-step { grid-template-columns: 1fr; padding: 24px; }
  .note { padding: 40px 24px 28px; rotate: -0.6deg; }
  .note blockquote, .note figcaption { font-size: 1.3rem; }
  .top-step img { justify-self: start; height: 120px; }
  .trust { grid-template-columns: 1fr; }
  .foot-row a { margin-left: 0; }
}