@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/fredoka-latin-600-normal.b62f2898.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/fredoka-latin-ext-600-normal.d7d22ddf.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/fredoka-latin-700-normal.ee61b48a.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/fredoka-latin-ext-700-normal.e5272989.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/nunito-latin-600-normal.45f437de.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/nunito-latin-ext-600-normal.a7ba5f4f.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/nunito-latin-800-normal.2363d3ed.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/nunito-latin-ext-800-normal.39f54b55.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 600; font-display: swap; src: url(/fonts/nunito-latin-600-italic.7901a2c0.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 600; font-display: swap; src: url(/fonts/nunito-latin-ext-600-italic.cf7c951f.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Generated from packages/shared/src/brand.ts and mascots.ts by apps/web/src/lib/tokens.ts. */
:root {
  color-scheme: light;
  --paper: #FFFBF2;
  --raised: #FFFFFF;
  --ink: #22243A;
  --soft: #6B6F86;
  --line: #EDE6D6;
  --line-2: #B8B3C6;
  --accent: #FF7A3D;
  --accent-ink: #C2410C;
  --on-accent: #22243A;
  --ok: #1B8F75;
  --warn: #9A6B00;
  --bad: #D7263D;
  --ok-bg: #DDF7EF;
  --warn-bg: #FFF3C4;
  --bad-bg: #FFE4DA;
  --photo: #EFE7D5;
  --water: #DCEBFF;
  --block: #FFF3E0;
  --shadow: rgba(34,36,58,0.08);
  --tint-mint: #DDF7EF;
  --tint-sky: #E3F0FF;
  --tint-lemon: #FFF3C4;
  --tint-blush: #FFE4DA;
  --tint-lilac: #EEE6FF;
  --mint-ink: #1B8F75;
  --sky-ink: #2B6CB0;
  --lemon-ink: #9A6B00;
  --berry: #E84A8A;
  --on-accent-words: #22243A;
  --note: #ffeee0;
  --team-fox-ink: #B3261E;
  --team-fox-fill16: #fddfd5;
  --team-tiger-ink: #9A6B00;
  --team-tiger-fill16: #fff6d5;
  --team-owl-ink: #2B6CB0;
  --team-owl-fill16: #e0e9f4;
  --team-frog-ink: #1B8F75;
  --team-frog-fill16: #def2e6;
  --team-squirrel-ink: #B45309;
  --team-squirrel-fill16: #ffecd6;
  --team-octopus-ink: #6D3FD6;
  --team-octopus-fill16: #ece2f3;
  --team-koala-ink: #4E5A6B;
  --team-koala-fill16: #efeee9;
  --team-bear-ink: #6B4423;
  --team-bear-fill16: #ece1d2;
  --team-penguin-ink: #2F3B52;
  --team-penguin-fill16: #dedcd8;
  --team-flamingo-ink: #C2185B;
  --team-flamingo-fill16: #ffe7e8;
  --team-whale-ink: #0B5F68;
  --team-whale-fill16: #d8e7e1;
  --team-dolphin-ink: #0E6E8C;
  --team-dolphin-fill16: #e5f4f0;
  --team-parrot-ink: #3F7D0B;
  --team-parrot-fill16: #eaf5d4;
  --team-rabbit-ink: #8A4FBF;
  --team-rabbit-fill16: #f9f0f4;
  --team-turtle-ink: #14593F;
  --team-turtle-fill16: #dbe7da;
  --team-hedgehog-ink: #8A5A2B;
  --team-hedgehog-fill16: #f9eedd;
  --team-cat-ink: #8E1F66;
  --team-cat-fill16: #f5dce2;
  --team-dog-ink: #8A6508;
  --team-dog-fill16: #f9edd0;
  --team-monkey-ink: #8E3A1E;
  --team-monkey-fill16: #f6e2d5;
  --shadow-card: 0 6px 14px rgb(34 36 58 / 0.07);
  --shadow-phone: 0 24px 48px rgb(34 36 58 / 0.18);
  --shadow-pop: 0 12px 24px rgb(34 36 58 / 0.1);
  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-m: 0.75rem;
  --space-l: 1rem;
  --space-xl: 1.25rem;
  --space-xxl: 1.5rem;
  --space-h: 2rem;
  --space-hh: 2.5rem;
  --space-hhh: 3rem;
  --radius-square: 4px;
  --radius-tag: 10px;
  --radius-photo: 16px;
  --radius-input: 16px;
  --radius-card: 24px;
  --radius-pill: 999px;
  --target-min: 3rem;
  --target-button: 3.25rem;
  --target-child: 3.75rem;
  --target-shutter: 5.5rem;
  --bunting-1: #FF7A3D;
  --bunting-2: #FFD93D;
  --bunting-3: #3D8BFF;
  --bunting-4: #2EC4A6;
  --bunting-5: #E84A8A;
  --bunting-6: #8A5CF6;
  --team-fox-tint: #F04A3E;
  --team-fox-on: #FFFFFF;
  --team-tiger-tint: #FFD93D;
  --team-tiger-on: #22243A;
  --team-owl-tint: #3D8BFF;
  --team-owl-on: #FFFFFF;
  --team-frog-tint: #2EC4A6;
  --team-frog-on: #22243A;
  --team-squirrel-tint: #FF9F43;
  --team-squirrel-on: #22243A;
  --team-octopus-tint: #8A5CF6;
  --team-octopus-on: #FFFFFF;
  --team-koala-tint: #9AA7B8;
  --team-koala-on: #22243A;
  --team-bear-tint: #8B5A2B;
  --team-bear-on: #FFFFFF;
  --team-penguin-tint: #2F3B52;
  --team-penguin-on: #FFFFFF;
  --team-flamingo-tint: #FF7FB2;
  --team-flamingo-on: #22243A;
  --team-whale-tint: #0E7C86;
  --team-whale-on: #FFFFFF;
  --team-dolphin-tint: #5BD1E8;
  --team-dolphin-on: #22243A;
  --team-parrot-tint: #7BD335;
  --team-parrot-on: #22243A;
  --team-rabbit-tint: #D9B8FF;
  --team-rabbit-on: #22243A;
  --team-turtle-tint: #1E7F5C;
  --team-turtle-on: #FFFFFF;
  --team-hedgehog-tint: #D7A86E;
  --team-hedgehog-on: #22243A;
  --team-cat-tint: #BE3A8C;
  --team-cat-on: #FFFFFF;
  --team-dog-tint: #D9A520;
  --team-dog-on: #22243A;
  --team-monkey-tint: #C65D3B;
  --team-monkey-on: #FFFFFF;
  --font-display: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-text: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.t-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.0167em; }
.t-score { font-family: var(--font-display); font-weight: 700; font-size: 3.5rem; line-height: 1.0714; letter-spacing: -0.0268em; }
.t-code { font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; line-height: 1.1; letter-spacing: 0.15em; }
.t-h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.0167em; }
.t-h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.2727; }
.t-navTitle { font-family: var(--font-display); font-weight: 600; font-size: 1.3125rem; line-height: 1.2381; }
.t-taskNumber { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.1818; }
.t-prompt { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2917; }
.t-choice { font-family: var(--font-text); font-weight: 600; font-size: 1.1875rem; line-height: 1.3684; }
.t-body { font-family: var(--font-text); font-weight: 600; font-size: 1.0625rem; line-height: 1.4118; }
.t-button { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.3333; }
.t-small { font-family: var(--font-text); font-weight: 600; font-size: 0.9375rem; line-height: 1.3333; }
.t-smallBold { font-family: var(--font-text); font-weight: 800; font-size: 0.9375rem; line-height: 1.3333; }
.t-cap { font-family: var(--font-text); font-weight: 600; font-size: 0.8125rem; line-height: 1.3846; }
.t-capBold { font-family: var(--font-text); font-weight: 800; font-size: 0.8125rem; line-height: 1.3846; }
.t-spec { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.3333; }
.t-stamp { font-family: var(--font-text); font-weight: 800; font-size: 0.75rem; line-height: 1.0833; letter-spacing: 0.08em; text-transform: uppercase; }
.t-tab { font-family: var(--font-text); font-weight: 800; font-size: 0.75rem; line-height: 1.3333; }
.team-fox { --tint: var(--team-fox-tint); --on: var(--team-fox-on); --tink: var(--team-fox-ink); --fill16: var(--team-fox-fill16); }
.team-tiger { --tint: var(--team-tiger-tint); --on: var(--team-tiger-on); --tink: var(--team-tiger-ink); --fill16: var(--team-tiger-fill16); }
.team-owl { --tint: var(--team-owl-tint); --on: var(--team-owl-on); --tink: var(--team-owl-ink); --fill16: var(--team-owl-fill16); }
.team-frog { --tint: var(--team-frog-tint); --on: var(--team-frog-on); --tink: var(--team-frog-ink); --fill16: var(--team-frog-fill16); }
.team-squirrel { --tint: var(--team-squirrel-tint); --on: var(--team-squirrel-on); --tink: var(--team-squirrel-ink); --fill16: var(--team-squirrel-fill16); }
.team-octopus { --tint: var(--team-octopus-tint); --on: var(--team-octopus-on); --tink: var(--team-octopus-ink); --fill16: var(--team-octopus-fill16); }
.team-koala { --tint: var(--team-koala-tint); --on: var(--team-koala-on); --tink: var(--team-koala-ink); --fill16: var(--team-koala-fill16); }
.team-bear { --tint: var(--team-bear-tint); --on: var(--team-bear-on); --tink: var(--team-bear-ink); --fill16: var(--team-bear-fill16); }
.team-penguin { --tint: var(--team-penguin-tint); --on: var(--team-penguin-on); --tink: var(--team-penguin-ink); --fill16: var(--team-penguin-fill16); }
.team-flamingo { --tint: var(--team-flamingo-tint); --on: var(--team-flamingo-on); --tink: var(--team-flamingo-ink); --fill16: var(--team-flamingo-fill16); }
.team-whale { --tint: var(--team-whale-tint); --on: var(--team-whale-on); --tink: var(--team-whale-ink); --fill16: var(--team-whale-fill16); }
.team-dolphin { --tint: var(--team-dolphin-tint); --on: var(--team-dolphin-on); --tink: var(--team-dolphin-ink); --fill16: var(--team-dolphin-fill16); }
.team-parrot { --tint: var(--team-parrot-tint); --on: var(--team-parrot-on); --tink: var(--team-parrot-ink); --fill16: var(--team-parrot-fill16); }
.team-rabbit { --tint: var(--team-rabbit-tint); --on: var(--team-rabbit-on); --tink: var(--team-rabbit-ink); --fill16: var(--team-rabbit-fill16); }
.team-turtle { --tint: var(--team-turtle-tint); --on: var(--team-turtle-on); --tink: var(--team-turtle-ink); --fill16: var(--team-turtle-fill16); }
.team-hedgehog { --tint: var(--team-hedgehog-tint); --on: var(--team-hedgehog-on); --tink: var(--team-hedgehog-ink); --fill16: var(--team-hedgehog-fill16); }
.team-cat { --tint: var(--team-cat-tint); --on: var(--team-cat-on); --tink: var(--team-cat-ink); --fill16: var(--team-cat-fill16); }
.team-dog { --tint: var(--team-dog-tint); --on: var(--team-dog-on); --tink: var(--team-dog-ink); --fill16: var(--team-dog-fill16); }
.team-monkey { --tint: var(--team-monkey-tint); --on: var(--team-monkey-on); --tink: var(--team-monkey-ink); --fill16: var(--team-monkey-fill16); }
/*
 * farandole.app. Colours, type, spacing and radii come from the generated tokens (brand.ts);
 * this file only arranges them. Rules: docs/17-brand.md. Paper ground, ink words, tinted fills
 * instead of outlines, one tangerine action per view, one bunting per screen.
 * The site is light only (docs/17 section 12, owner decision 2026-10-13): one palette, card
 * shadows always on. The app keeps its system dark mode.
 * Breakpoints (min-width): 360, 560, 760, 960, 1200. Mobile first.
 * The only colour literals are the app's own inside the phone pictures (toggle knob, QR box, the
 * Bonus gold of photo.tsx).
 * Motion moves transform and opacity only; colour changes (a tint, a ring) are the exception, and
 * the questions opening to their height (docs/17 section 10).
 */

:root {
  /* One gap between sections: 48 px on phones, 96 from 960. */
  --gap: 48px;
  --ease-out: cubic-bezier(.33, 1, .68, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-sine: cubic-bezier(.37, 0, .63, 1);
  --ease-grow: cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 960px) { :root { --gap: 96px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.41;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
svg { flex-shrink: 0; }
button { font: inherit; color: inherit; }
a { color: var(--accent-ink); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.14em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
/* On tangerine the ring takes the words' colour there (onAccent, ink: 5.87:1). */
.beta-band :focus-visible { outline-color: var(--on-accent-words); }
.btn:focus-visible, .chip:focus-visible { border-radius: var(--radius-pill); }
/* `until-found` keeps a closed stepper panel findable with the browser's search. */
[hidden]:not([hidden="until-found"]) { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
code { font-family: var(--font-text); font-weight: 800; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 10; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: var(--radius-pill); font-family: var(--font-display); text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 20px; }
.measure { max-width: 68ch; }
.soft { color: var(--soft); }
.small { font-size: 0.9375rem; line-height: 1.33; }
.cap { font-size: 0.8125rem; line-height: 1.38; }
.stack { display: flex; flex-direction: column; gap: var(--space-l); }
.stack-s { display: flex; flex-direction: column; gap: var(--space-s); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); }
.ico { display: inline-block; vertical-align: -0.2em; }

/* Section rhythm: one --gap between sections, never two. A tinted band keeps its own padding. */
.section { padding-block: var(--gap); }
.hero + .section, .section + .section { padding-top: 0; }
.band { padding-block: var(--gap); }
.section + .section.band, .band + .section { padding-top: var(--gap); }
.section-head { display: flex; flex-direction: column; gap: var(--space-m); margin-bottom: var(--space-xxl); max-width: 46rem; }
.h-section { font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.0167em; }
.eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.33; color: var(--soft); }
.lead { font-size: 1.125rem; line-height: 1.5; }
@media (min-width: 960px) {
  .section-head { margin-bottom: var(--space-hh); }
  .h-section { font-size: 2.25rem; }
  .lead { font-size: 1.25rem; }
}

/* ===== Header ===== */
.site-header { padding-block: 14px; position: relative; z-index: 6; }
.site-header .bar { position: relative; display: flex; align-items: center; gap: var(--space-m); min-height: 52px; }
.lockup { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target-min); color: var(--ink); text-decoration: none; border-radius: var(--radius-tag); flex-shrink: 0; }
/* Below 360 px the lockup is at the brand minimum: mark 38, wordmark 24 (docs/17 section 2). */
.lockup svg { width: 38px; height: 38px; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.0167em; color: var(--ink); }
.nav, .site-header .head-beta { display: none; }
.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; gap: 4px; }
.nav a { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 14px; border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.nav a:hover { background: var(--block); }
.nav a[aria-current="page"], .menu-panel a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.3em; }
.header-link { margin-left: auto; font-family: var(--font-display); font-weight: 600; min-height: var(--target-min); display: inline-flex; align-items: center; }
/* Menu: a <details>, so it opens without the script. */
.menu { margin-left: auto; }
.menu-btn { list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: var(--target-min); padding: 0 12px 0 18px; border-radius: var(--radius-pill); background: var(--block); font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; cursor: pointer; user-select: none; }
.menu-btn::-webkit-details-marker { display: none; }
.menu-btn .ico { transform: rotate(90deg); transition: transform 0.18s var(--ease-out); }
.menu[open] .menu-btn .ico { transform: rotate(-90deg); }
.menu-btn:focus-visible { border-radius: var(--radius-pill); }
.menu-panel { position: absolute; left: 20px; right: 20px; top: calc(100% + 8px); background: var(--raised); border-radius: var(--radius-card); box-shadow: var(--shadow-card), var(--shadow-pop); padding: 8px 16px 16px; display: flex; flex-direction: column; gap: var(--space-m); animation: drop-in 0.18s var(--ease-out); }
.menu-panel ul { list-style: none; }
.menu-panel li + li { border-top: 1px solid var(--line); }
.menu-panel a:not(.btn) { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 4px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; border-radius: 12px; }
.menu-panel a:not(.btn) .ico { color: var(--soft); }
.menu-panel .btn { width: 100%; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-8px); } }
@media (min-width: 360px) {
  .lockup svg { width: 40px; height: 40px; }
  .wordmark { font-size: 1.5625rem; }
}
@media (min-width: 560px) {
  .site-header .head-beta { display: inline-flex; margin-left: auto; }
  .menu { margin-left: 0; }
}
@media (min-width: 760px) {
  .lockup { gap: 10px; }
  .lockup svg { width: 48px; height: 48px; }
  .wordmark { font-size: 1.875rem; }
}
@media (min-width: 960px) {
  .nav { display: block; }
  .site-header .head-beta { margin-left: 0; }
  .menu { display: none; }
}

/* ===== Footer: one column of full-width rows below 560 (as in the Menu), one row of five from 560. ===== */
.site-footer { padding-block: var(--space-hhh); background: var(--block); }
.foot { display: grid; gap: var(--space-xxl); }
.foot-brand { display: flex; flex-direction: column; gap: var(--space-s); align-items: flex-start; }
.foot-nav ul { list-style: none; display: flex; flex-direction: column; }
.foot-nav li + li { border-top: 1px solid var(--line-2); }
.foot-nav a { display: flex; min-height: var(--target-min); align-items: center; }
.footer-note { font-size: 0.875rem; line-height: 1.43; max-width: 44rem; }
@media (min-width: 560px) {
  .foot-nav ul { flex-direction: row; gap: 0 16px; }
  .foot-nav li + li { border-top: 0; }
}
@media (min-width: 760px) {
  .foot-nav ul { gap: 0 24px; }
}
@media (min-width: 960px) {
  .site-footer { padding-block: 64px; }
  .foot { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 48px; }
  .foot-nav ul { justify-content: flex-end; }
  .footer-note { grid-column: 1 / -1; }
}

/* ===== Buttons: filled pills, Fredoka, one tangerine per view. ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--target-button); padding: 12px 24px; border: 0; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.33;
  text-decoration: none; text-align: center; cursor: pointer; color: var(--ink); background: transparent;
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}
.btn:hover { opacity: 0.95; text-decoration: none; }
.btn:active { transform: scale(0.97); opacity: 0.9; }
.btn-primary { background: var(--accent); color: var(--on-accent-words); box-shadow: 0 8px 12px color-mix(in srgb, var(--accent) 32%, transparent); }
.btn-mint { background: var(--tint-mint); color: var(--ink); }
/* The white button on the tangerine band, as on the app's Start card. */
.btn-white, .btn-raised { background: var(--raised); color: var(--ink); }
.btn-sm { min-height: var(--target-min); padding: 8px 18px; font-size: 1rem; }
.btn .ico { width: 22px; height: 22px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; }
.actions-stack > .btn { width: 100%; }
@media (min-width: 560px) { .actions-stack > .btn { width: auto; } }
.copy-btn { font-family: var(--font-display); }
.copy-tick { display: none; }
.copy-btn.done .copy-tick { display: inline-flex; color: var(--ok); }

/* ===== Chips, cards, tints ===== */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--block); color: var(--ink); font-family: var(--font-text); font-weight: 800; font-size: 0.875rem; line-height: 1.29; }
.chip-mint { background: var(--tint-mint); }
.chip .ico { width: 18px; height: 18px; }
.card { background: var(--raised); border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow-card); }
.card-roomy { padding: 28px 24px; }
.card-block { background: var(--block); border-radius: var(--radius-card); padding: 20px; }
.card-dashed { border: 1.5px dashed var(--line-2); border-radius: var(--radius-card); padding: 20px; }
.tint-mint { background: var(--tint-mint); }
.tint-sky { background: var(--tint-sky); }
.tint-lemon { background: var(--tint-lemon); }
.tint-blush { background: var(--tint-blush); }
.tint-lilac { background: var(--tint-lilac); }
.tone-lemon { --tone: var(--tint-lemon); }
.tone-sky { --tone: var(--tint-sky); }
.tone-blush { --tone: var(--tint-blush); }
.tone-mint { --tone: var(--tint-mint); }
/* On a tint, `soft` falls under 4.5:1 and accentInk under it on sky (4.48) and blush (4.28): there
   hints, eyebrows, icons and links are ink, links underlined (docs/17 section 4). */
:is(.tint-mint, .tint-sky, .tint-lemon, .tint-blush, .tint-lilac) :is(.soft, .eyebrow) { color: var(--ink); }
:is(.tint-mint, .tint-sky, .tint-lemon, .tint-blush, .tint-lilac) a:not(.btn) { color: var(--ink); }
.h-card { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.27; }
.icon-disc { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--raised); flex-shrink: 0; }
.callout { display: flex; gap: 10px; align-items: flex-start; background: var(--raised); border-radius: var(--radius-card); padding: 12px 16px; box-shadow: var(--shadow-card); }
.callout .ico { margin-top: 2px; }
.notice { border-radius: var(--radius-card); padding: 14px 18px; background: var(--note); display: flex; gap: 10px; align-items: flex-start; }
.points { list-style: none; display: flex; flex-direction: column; gap: var(--space-l); }
.points li { display: flex; gap: 14px; align-items: flex-start; }
.points .ico { color: var(--accent-ink); width: 26px; height: 26px; margin-top: 1px; }
:is(.tint-mint, .tint-sky, .tint-lemon, .tint-blush) .points .ico { color: var(--ink); }
.split { display: grid; gap: var(--space-hh); align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-hhh); } }
.figure { display: flex; flex-direction: column; gap: var(--space-m); align-items: center; }
.figure figcaption { text-align: center; max-width: 30rem; }
.teaser { border-radius: var(--radius-card); padding: 28px 20px; }
@media (min-width: 960px) { .teaser { padding: 48px; } }

/* ===== Bunting and the farandole garland ===== */
.bunting { width: 100%; max-width: 350px; margin-inline: auto; color: var(--ink); }
.bunting svg { display: block; width: 100%; height: 52px; }
/* The garland keeps the bunting's own proportions (350 × 52), so nothing is squashed. */
.garland { position: relative; width: min(300px, 100%); aspect-ratio: 350 / 52; margin-inline: auto; color: var(--ink); }
.g-swing { position: absolute; inset: 0; transform-origin: 50% 0; }
.g-swing > svg { display: block; width: 100%; height: 100%; }
.g-face { position: absolute; width: 10%; translate: -50% -50%; }
.g-face .bob { display: block; }
.g-face svg { display: block; width: 100%; height: auto; }
/* M2: once, 1° each way, 4.8 s in all, then it rests (WCAG 2.2.2). */
.garland.sways.go .g-swing { animation: g-sway 4.8s var(--ease-sine) 1; }
@keyframes g-sway { 0% { transform: rotate(0deg); } 25% { transform: rotate(1deg); } 75% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } }
#beta .bunting { margin-bottom: 2px; }

/* ===== The day line: four moments as beads on the farandole line ===== */
/* The bead's box is always the selected size; at rest its disc is scaled to --bs (36 of 44 px). */
.dayline { --dl-h: 44px; --bs: 0.818; margin-bottom: var(--space-xxl); }
.dl-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dl-list > li { position: relative; display: flex; justify-content: center; min-width: 0; }
.dl-seg { position: absolute; top: 0; left: 50%; width: 100%; height: var(--dl-h); overflow: visible; pointer-events: none; }
.dl-seg path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.dl-item { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; padding-bottom: 4px; color: var(--soft); text-decoration: none; border-radius: 16px; cursor: pointer; }
.dl-bead { position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; width: var(--dl-h); height: var(--dl-h); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1; }
.dl-bead::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--tone); box-shadow: inset 0 0 0 calc(2px / var(--bs)) var(--ink); transform: scale(var(--bs)); transition: transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
/* The app's `tab` style below 960: Nunito 800 12/16, two lines at most. */
.dl-label { font-family: var(--font-text); font-weight: 800; font-size: 0.75rem; line-height: 1.33; text-align: center; padding-inline: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Selected (tabs) or in view (/how-it-works): the app's "next" ring, with a halo in the moment's tint. */
.dl-item:is([aria-selected="true"], [aria-current="true"]) { color: var(--ink); }
.dl-item:is([aria-selected="true"], [aria-current="true"]) .dl-bead::before { --bs: 1; background: var(--paper); box-shadow: inset 0 0 0 3px var(--ink), 0 0 0 6px var(--tone); }
.dl-item:hover .dl-bead::before { box-shadow: inset 0 0 0 calc(3px / var(--bs)) var(--ink); }
.dl-item:is([aria-selected="true"], [aria-current="true"]):hover .dl-bead::before { box-shadow: inset 0 0 0 3px var(--ink), 0 0 0 6px var(--tone); }
@media (min-width: 360px) { .dayline { --dl-h: 48px; --bs: 0.833; } }
@media (min-width: 960px) {
  .dayline { margin-bottom: var(--space-hh); }
  .dl-list > li { justify-content: flex-start; }
  /* Beside its label the bead is centred in a 48 px row (the target), so the line moves with it. */
  .dl-seg { left: calc(var(--dl-h) / 2); top: calc((48px - var(--dl-h)) / 2); }
  .dl-item { flex-direction: row; gap: 0; padding-bottom: 0; min-height: 48px; }
  /* Beside the bead the label sits on a paper tag, so the line runs from the label to the next bead. */
  .dl-label { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.33; text-align: left; display: block; white-space: nowrap; text-overflow: ellipsis; padding: 2px 12px 2px 4px; background: var(--paper); }
}

/* ===== Hero ===== */
.hero { padding-top: var(--space-l); padding-bottom: var(--space-hhh); }
.hero-grid { display: grid; gap: var(--space-h); }
.hero-copy { display: flex; flex-direction: column; gap: var(--space-l); align-items: flex-start; }
.hero h1 { font-weight: 700; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; }
.hero .actions { width: 100%; }
@media (min-width: 960px) {
  .hero { padding-top: var(--space-hh); padding-bottom: 64px; }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-hhh); align-items: center; }
  .hero .actions { width: auto; }
}

/* Home hero: the copy, then the phone on a sky stage (sky is "On the day": the phone shows the day). */
.hero-stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-m); margin-inline: -20px; padding: 24px 12px 32px; }
.demo-wrap { --z: 0.66; position: relative; }
.demo-wrap .phone { --z: inherit; }
/* Reserved for the hint, so nothing moves when the script fills it; gone without scripting. Above
   the phone at every width, so the hint and Start again stay with the demo. */
.demo-bar { min-height: var(--target-min); display: flex; align-items: center; justify-content: center; }
@media (scripting: none) { .demo-bar { display: none !important; } }
.demo-hint { color: var(--ink); text-align: center; }
.map-sticker { display: none; }
@media (min-width: 360px) { .demo-wrap { --z: 0.76; } }
@media (min-width: 560px) {
  .home-hero .hero-copy { max-width: 36rem; }
  .hero-stage { margin-inline: 0; border-radius: 28px; padding: 24px 24px 32px; }
  .demo-wrap { --z: 0.8; }
  /* The Map tab as a sticker on the phone's left bezel, its top level with the bead trail. */
  .map-sticker { display: block; position: absolute; z-index: 2; left: -84px; top: calc(9px + 112px * var(--z)); width: 96px; height: 76px; padding: 6px; background: var(--paper); border-radius: 16px; box-shadow: var(--shadow-card), var(--shadow-pop); rotate: -4deg; }
}
@media (min-width: 960px) {
  .home-hero .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; }
  .home-hero .hero-copy { max-width: none; }
  .demo-wrap { --z: 0.68; }
  .map-sticker { width: 112px; height: 88px; left: -100px; }
}
.ms-map { position: relative; height: 100%; border-radius: 10px; overflow: hidden; color: var(--ink); }
.ms-map > div, .ms-map > div > svg { height: 100% !important; }
.sf-fanion { position: absolute; }
.sf-fanion .pop { display: block; }

/* ===== Home: How a day goes (a stepper with the script; four panels one after the other without it) ===== */
.moments { display: block; }
.moment { margin: 0; padding: 0; border: 0; }
.moment-in { display: grid; gap: var(--space-xl); padding-bottom: var(--space-hh); }
.moments.ready .moment-in { padding-bottom: 0; }
.moment-copy { display: flex; flex-direction: column; gap: var(--space-m); max-width: 36rem; }
.moment-copy h3 { font-weight: 700; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; }
.moment-copy h3:focus { outline: none; }
.moment-copy h3:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.moment-stage { position: relative; border-radius: var(--radius-card); padding: 24px 12px 32px; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.moment-pics { display: flex; flex-direction: column; align-items: center; }
.moment-pics .frag { position: relative; z-index: 1; margin-top: -32px; translate: 16px 0; }
.moment-next { width: 100%; min-height: 52px; }
@media (min-width: 760px) {
  .moment-pics { flex-direction: row; align-items: flex-start; gap: var(--space-xl); }
  .moment-pics .frag { margin-top: 0; translate: none; }
}
@media (min-width: 960px) {
  /* The copy starts level with the stage's padding, just under the day line, on every tab. */
  .moment-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; grid-template-areas: "copy stage" "next stage" ". stage"; column-gap: var(--space-hhh); row-gap: 0; }
  .moment-copy { grid-area: copy; padding-top: 40px; }
  .moment-copy h3 { font-size: 1.875rem; line-height: 1.2; }
  .moment-copy > p:first-of-type { font-size: 1.25rem; line-height: 1.5; }
  .moment-stage { grid-area: stage; min-height: 620px; padding: 40px; justify-content: center; }
  .moment-next { grid-area: next; width: auto; justify-self: start; margin-top: var(--space-xxl); }
  .moment-pics { gap: 0; }
  .moment-pics .frag { margin-top: 120px; margin-left: -87px; }
}
@media (min-width: 1200px) { .moment-pics .frag { margin-left: -51px; } }

/* The reveal you can play: the app's reveal screen at web scale on a raised card. */
.rp { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-l); }
.rp-card { width: 100%; max-width: 34rem; background: var(--raised); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 14px; overflow: hidden; }
.rp-view { display: flex; flex-direction: column; gap: 12px; }
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rp-title { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 26px; }
.rp-eyebrow { text-transform: uppercase; letter-spacing: 0.5px; }
.rp .rp-prompt { font-size: 22px; line-height: 28px; }
.rp-teams { display: flex; flex-direction: column; gap: 18px; }
.rp-team { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rp .rp-photo { aspect-ratio: 4 / 3; }
.rp-review { display: flex; justify-content: space-between; padding: 0 2px; }
.rp-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; padding: 0; border: 0; background: none; color: var(--ink); font-family: var(--font-text); font-weight: 800; font-size: 12px; line-height: 16px; cursor: pointer; border-radius: 12px; }
.rp-btn .circle { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; transition: transform 0.1s ease-out; }
.rp-btn:active .circle { transform: scale(0.97); }
/* The app's pressed fills (photo.tsx ReviewControls): ok, warnBg, and the Bonus gold literals. */
.rp-btn[aria-pressed="true"][data-v="approved"] .circle { background: var(--ok); border-color: var(--ok); color: #FFFFFF; }
.rp-btn[aria-pressed="true"][data-v="retry"] .circle { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.rp-btn[aria-pressed="true"][data-v="bonus"] .circle { background: #F0CB63; border-color: #7A5A0E; color: #7A5A0E; }
.rp-btn[aria-pressed="true"][data-v="bonus"] .circle svg * { fill: currentColor; }
.rp-sofar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; padding-top: 4px; }
.rp-tot { display: inline-flex; align-items: center; gap: 6px; }
.rp-see { width: 100%; border: 0; cursor: pointer; }
.rp-see:focus-visible { border-radius: var(--radius-pill); }
.rp-pod .rp-podium { position: relative; }
/* Clipped at the floor only, so the pedestals rise from behind it (M13) and the burst is free above. */
.rp-pod .m-podium:not(.floor) { padding: 36px 4px 0; clip-path: inset(-100vh -100vw 0 -100vw); }
.rp-pod .m-podium.floor { margin: 0 4px; }
.rp-col { position: relative; }
.rp-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 22px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-place="1"] .rp-name { font-size: 19px; }
.ped.p1 { height: 200px; background: var(--tint); }
.ped.p2 { height: 140px; background: var(--fill16); }
.ped .score { font-family: var(--font-display); font-weight: 700; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.ped.p1 .score { font-size: 48px; line-height: 52px; color: var(--on); }
.ped.p2 .score { font-size: 36px; line-height: 40px; color: var(--tink); }
/* Ink, not the team colour at 85 %: a live result can put either team on either pedestal (ink is
   4.59:1 on the owl's tint, 11.04:1 on the tiger's, 12.40:1 and up on the 16 % fills). */
.rp-bonus { color: var(--ink); }
.rp-again { min-width: 10rem; }
/* M14: one confetti burst over the winner, pieces in the bunting colours. */
.burst { position: absolute; left: 50%; top: 40px; width: 0; height: 0; pointer-events: none; z-index: 3; }
.burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; animation: burst 1.1s var(--ease-out) forwards; }
.burst i.sq { border-radius: 2px; }
.burst i.st { width: 12px; height: 12px; left: -6px; top: -6px; border-radius: 0; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.burst .c1 { background: var(--bunting-1); } .burst .c2 { background: var(--bunting-2); } .burst .c3 { background: var(--bunting-3); }
.burst .c4 { background: var(--bunting-4); } .burst .c5 { background: var(--bunting-5); } .burst .c6 { background: var(--bunting-6); }
@keyframes burst { from { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(0.6); opacity: 0; } }
@media (max-width: 559.98px) {
  .moment-stage[data-reveal].played { padding: 16px 8px; }
}
@media (min-width: 560px) {
  .rp-card { padding: 24px; }
  .rp .rp-prompt { font-size: 24px; line-height: 31px; }
  .rp-teams { flex-direction: row; gap: 12px; }
  .rp-team { flex: 1 1 0; }
  .rp .rp-photo { aspect-ratio: 3 / 4; }
}
@media (min-width: 960px) {
  .moment-stage[data-reveal].played { padding: 40px; }
  .rp-team { max-width: 240px; }
  .rp-teams { justify-content: center; }
}

/* ===== Questions ===== */
.faq { display: flex; flex-direction: column; gap: var(--space-m); max-width: 50rem; }
.faq details { background: var(--raised); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--target-child); padding: 14px 20px; font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.3; border-radius: var(--radius-card); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { transition: transform 0.2s var(--ease-out); color: var(--soft); }
.faq details[open] summary .ico { transform: rotate(90deg); }
.faq details > div { padding: 0 20px 18px; }
/* M19: the answer opens to its height where the browser can animate to auto; instant elsewhere and
   under reduced motion (the reset at the end does not reach ::details-content). */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 0.24s var(--ease-out), content-visibility 0.24s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
  }
}

/* ===== Beta band: mirrors the app's Start card (radius 28, docs/17 section 6). ===== */
.beta-band { position: relative; background: var(--accent); color: var(--on-accent-words); border-radius: 28px; padding: 32px 20px; box-shadow: 0 10px 18px color-mix(in srgb, var(--accent) 28%, transparent); }
.beta-band .inner { display: flex; flex-direction: column; gap: var(--space-l); max-width: 40rem; margin-inline: auto; text-align: center; align-items: center; }
.beta-band h2 { font-weight: 700; font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); line-height: 1.12; letter-spacing: -0.0167em; }
.beta-band .actions { justify-content: center; width: 100%; }
.beta-band .actions .btn { width: 100%; }
@media (min-width: 560px) { .beta-band .actions .btn { width: auto; } }
@media (min-width: 960px) { .beta-band { padding: 48px; } }

/* ===== How it works ===== */
.hiw-hero { padding-top: var(--space-l); padding-bottom: var(--space-xxl); }
.hiw-hero .hero-copy { max-width: 46rem; }
@media (min-width: 760px) {
  .hiw-hero .hero-copy { align-items: center; text-align: center; margin-inline: auto; }
  .hiw-hero .lead { max-width: 40rem; }
}
.dl-sentinel { display: block; height: 1px; }
.dl-bar { background: var(--paper); }
.dl-bar .dayline { margin-bottom: 0; }
.dl-bar + .moment { padding-top: var(--space-h); }
.hiw-moment { padding-bottom: var(--gap); }
/* One gap, not two, between the last moment and the next section. */
.hiw-moments + .section { padding-top: 0; }
@media (min-width: 960px) {
  .dl-bar { position: sticky; top: 0; z-index: 3; height: 64px; display: flex; align-items: center; transition: box-shadow 0.2s var(--ease-out); }
  .dl-bar.stuck { box-shadow: var(--shadow-card); }
  .dl-bar .dayline { --dl-h: 40px; --bs: 0.8; }
  html:has(.hiw-moments) { scroll-padding-top: 88px; }
}
.moment-head { display: flex; gap: 16px; align-items: flex-start; border-radius: var(--radius-card); padding: 24px; }
.mh-bead { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; }
.h-moment { font-weight: 700; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; }
.hiw-eyebrow { display: block; font-weight: 600; font-size: 1.125rem; line-height: 1.33; color: var(--ink); margin-bottom: 4px; letter-spacing: 0; }
/* Steps on a static trail: every bead the app's "upcoming" look; the step whose picture is on the stage wears the "next" ring. */
.hiw-steps { list-style: none; position: relative; display: flex; flex-direction: column; gap: var(--space-h); margin-top: var(--space-h); }
.hiw-steps::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--ink); }
.hiw-step { position: relative; padding-left: 40px; display: flex; flex-direction: column; gap: var(--space-m); }
.hiw-step h3 { font-weight: 700; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; }
/* The bead is 30 px, scaled to 18 at rest (ring 2 px once scaled); the current one at full size with its dot. */
.step-bead { position: absolute; left: -2.5px; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 3.34px var(--ink); transform: scale(0.6); transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
.step-bead::after { content: ""; position: absolute; left: 9px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform 0.2s var(--ease-out); }
.hiw-step.cur .step-bead { transform: none; box-shadow: inset 0 0 0 3px var(--ink); }
.hiw-step.cur .step-bead::after { transform: none; }
.hiw-inline { border-radius: var(--radius-card); padding: 24px 12px; display: flex; justify-content: center; margin-top: var(--space-s); }
.hiw-card { padding: 28px 24px; }
@media (min-width: 960px) {
  .moment-head { padding: 32px 40px; }
  .h-moment { font-size: 1.875rem; line-height: 1.2; }
  .hiw-steps::before { left: 19px; }
  .hiw-step { padding-left: 56px; }
  .step-bead { left: 5.5px; }
  .moment-grid.has-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  /* The pictures move to the stage; the inline copies stay for screen readers, in reading order. */
  .hiw-inline { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; margin: 0; }
  .hiw-card { padding: 48px; }
}
.hiw-stage { display: none; }
@media (min-width: 960px) {
  .hiw-stage { display: block; border-radius: var(--radius-card); padding: 24px; }
  .stage-cell { display: flex; flex-direction: column; align-items: center; gap: var(--space-xxl); }
  /* Live (the script runs): one picture at a time, the stage sticky under the day line. */
  .hiw-stage.live { position: sticky; top: 88px; max-height: min(calc(100vh - 112px), 720px); overflow: hidden; }
  .hiw-stage.live .stage-cell { display: grid; justify-items: center; align-items: start; }
  .hiw-stage.live .stage-shot { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
  .hiw-stage.live .stage-shot.on { opacity: 1; visibility: visible; }
}
.points-3 { display: grid; gap: var(--space-l); }
@media (min-width: 960px) {
  .points-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-h); }
  .points-3 li { flex-direction: column; gap: 10px; }
}

/* ===== Organisers ===== */
.minute { display: grid; gap: var(--space-l); }
@media (min-width: 760px) { .minute { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.minute .tile { border-radius: var(--radius-card); padding: 24px 20px; display: flex; flex-direction: column; gap: var(--space-m); align-items: flex-start; }
.minute .ico, .counts .ico { width: 26px; height: 26px; }
.two-phones { display: flex; flex-wrap: wrap; gap: var(--space-xl); justify-content: center; align-items: flex-start; }
/* Hero: below 760 the poster card with the Published screen's code laid over its corner; from 760 the two phones. */
/* The code card overlaps the bezel and the status bar, never the nav row under them. */
.org-compose { position: relative; padding-top: 76px; padding-left: 8px; }
.org-compose .frag { position: absolute; left: 0; top: 0; z-index: 1; rotate: -3deg; }
.hero-phones { display: none; }
@media (min-width: 760px) {
  .org-compose { display: none; }
  .hero-phones { display: flex; flex-wrap: nowrap; gap: 16px; }
  .hero-phones .phone + .phone { margin-top: 48px; }
}
@media (min-width: 960px) and (max-width: 1199.98px) { .hero-grid-wide { grid-template-columns: minmax(0, 1fr); } }
.families { position: relative; }
.families ol { list-style: none; display: grid; gap: var(--space-l); }
.families li { display: flex; flex-direction: column; gap: var(--space-m); }
.families .bead { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; position: relative; z-index: 1; }
.families .step-text { display: flex; flex-direction: column; gap: 6px; }
.families h3 { font-weight: 600; font-size: 1.375rem; line-height: 1.27; }
.snip { border-radius: var(--radius-card); background: var(--block); padding: 14px; display: flex; justify-content: center; align-items: center; min-height: 170px; overflow: hidden; }
.families-track { position: relative; }
.families-trail { display: none; }
.families .scroller { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; padding-bottom: 8px; }
.families ol { grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); }
.families li { scroll-snap-align: start; }
@media (min-width: 1200px) {
  .families .scroller { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .families ol { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto auto; }
  .families li { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: var(--space-m); }
  .families-trail { display: block; position: absolute; left: 20px; right: calc((100% - 64px) / 5 - 20px); top: 19px; height: 3px; background: var(--ink); border-radius: 2px; }
  .families-hint { display: none; }
}
.office { list-style: none; display: grid; gap: var(--space-l); }
.office li { display: flex; flex-direction: column; gap: 6px; }
.office h3 { font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
@media (min-width: 960px) { .office-phone { position: sticky; top: 24px; } }
.counts { display: grid; gap: var(--space-l); }
@media (min-width: 760px) { .counts { grid-template-columns: 1fr 1fr; } }
.counts .tile { border-radius: var(--radius-card); padding: 24px 20px; display: flex; flex-direction: column; gap: 10px; }
.counts-row { margin-top: var(--space-xl); justify-content: space-between; align-items: center; gap: var(--space-xxl); }
.pilot { list-style: none; display: flex; flex-direction: column; gap: var(--space-l); position: relative; }
.pilot::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 3px; background: var(--ink); border-radius: 2px; }
.pilot li { position: relative; padding-left: 44px; }
.pilot li::before { content: ""; position: absolute; left: 5.5px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.pilot-title { font-size: 1.1875rem; }
.not-ready { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.not-ready li { display: flex; gap: 10px; align-items: flex-start; }
.not-ready li::before { content: ""; width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; border: 2px solid var(--soft); flex-shrink: 0; }
@media (min-width: 960px) { .not-ready { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 10px 40px; } }
.talk { align-items: flex-start; }

/* ===== Join and poster links ===== */
.link-page { max-width: 36rem; margin-inline: auto; padding-bottom: var(--gap); display: flex; flex-direction: column; gap: var(--space-l); }
.link-page h1 { font-weight: 700; font-size: 2rem; line-height: 1.15; letter-spacing: -0.0167em; }
.code-card { border-radius: var(--radius-card); padding: 20px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
/* The row is as wide as the card and the tiles shrink to fit it, so a 12-character code fits at 320 px. */
.code-tiles { display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap; margin: 0; align-self: stretch; }
.code-tiles span { flex: 0 1 3.25rem; min-width: 0; display: inline-flex; align-items: center; justify-content: center; height: clamp(3rem, 14vw, 4rem); border-radius: var(--radius-tag); background: var(--raised); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 8vw, 2.5rem); line-height: 1; color: var(--ink); }
.code-tiles.long { gap: 3px; }
.code-tiles.long span { flex-basis: 2.5rem; height: clamp(2.4rem, 11vw, 3.4rem); font-size: clamp(1rem, 5.4vw, 2rem); }
/* M17: the tiles arrive one after the other, visible from the first frame. */
.code-tiles span { animation: tile-in 0.36s var(--ease-pop) backwards; }
.code-tiles span:nth-child(1) { animation-delay: 150ms; } .code-tiles span:nth-child(2) { animation-delay: 200ms; } .code-tiles span:nth-child(3) { animation-delay: 250ms; }
.code-tiles span:nth-child(4) { animation-delay: 300ms; } .code-tiles span:nth-child(5) { animation-delay: 350ms; } .code-tiles span:nth-child(6) { animation-delay: 400ms; }
.code-tiles span:nth-child(7) { animation-delay: 450ms; } .code-tiles span:nth-child(8) { animation-delay: 500ms; } .code-tiles span:nth-child(9) { animation-delay: 550ms; }
.code-tiles span:nth-child(10) { animation-delay: 600ms; } .code-tiles span:nth-child(11) { animation-delay: 650ms; } .code-tiles span:nth-child(12) { animation-delay: 700ms; }
@keyframes tile-in { from { transform: translateY(8px) scale(0.85); } }
.desktop-qr { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 960px) {
  .desktop-qr { display: flex; gap: 24px; align-items: center; }
  .desktop-qr .qr { width: 168px; height: 168px; border-radius: var(--radius-photo); flex-shrink: 0; }
}
.link-foot { display: flex; flex-direction: column; gap: 10px; }
.yours-h { gap: 10px; }
.link-rows { list-style: none; display: flex; flex-direction: column; }
.link-rows li + li { border-top: 1px solid var(--line); }
.link-rows a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--target-min); }
.link-rows .ico { color: var(--soft); }

/* ===== Contact ===== */
.contact-page { max-width: 40rem; padding-bottom: var(--gap); display: grid; gap: var(--space-xxl); }
.contact-intro { display: flex; flex-direction: column; gap: var(--space-l); }
.contact-intro > .bunting { margin-inline: 0; }
.contact-page h1, .sent-page h1 { font-weight: 700; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1.12; letter-spacing: -0.0167em; }
.contact-main { display: flex; flex-direction: column; gap: var(--space-l); min-width: 0; }
.contact-form { display: flex; flex-direction: column; gap: var(--space-xxl); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
fieldset.field { border: 0; margin: 0; padding: 0; position: relative; }
.label { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.3; padding: 0; }
.label .soft { font-family: var(--font-text); font-weight: 600; font-size: 0.9375rem; }
.hint { font-size: 0.9375rem; line-height: 1.33; color: var(--soft); }
/* The border is `soft` (4.95:1 on raised, 4.79:1 on paper), so a field shows as a field on the
   white form card too (WCAG 1.4.11; the app's idle `line` border is docs/17 section 13.3). */
.input { width: 100%; min-height: var(--target-button); padding: 12px 16px; border: 2px solid var(--soft); border-radius: var(--radius-input); background: var(--raised); color: var(--ink); font: inherit; font-weight: 600; }
textarea.input { min-height: 11rem; resize: vertical; line-height: 1.41; }
.input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: var(--radius-input); }
.input[aria-invalid="true"] { border-color: var(--bad); }
.field-error { color: var(--bad); font-weight: 800; font-size: 0.9375rem; line-height: 1.33; }
/* Topics: real radio buttons drawn as the app's option tiles: one column on phones, 2 + 2 + 1 from 560. */
.topic-tiles { display: grid; gap: var(--space-s); margin-top: 4px; }
.pill-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tile-opt { display: flex; align-items: center; gap: 12px; height: 100%; min-height: 56px; padding: 8px 18px; border-radius: var(--radius-card); background: var(--block); font-weight: 800; font-size: 1rem; line-height: 1.25; cursor: pointer; user-select: none; transition: opacity 0.1s ease-out; }
.tile-opt:hover { opacity: 0.95; }
.tile-opt .ico { width: 24px; height: 24px; }
.t-chk { display: none; color: var(--ok); }
.pill-input:checked + .tile-opt { background: var(--ok-bg); }
.pill-input:checked + .tile-opt .t-ico { display: none; }
.pill-input:checked + .tile-opt .t-chk { display: inline-flex; }
.pill-input:focus-visible + .tile-opt { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (min-width: 560px) {
  .topic-tiles { grid-template-columns: 1fr 1fr; }
  .topic-other { grid-column: 1 / -1; }
}
/* A topic's hint shows once that topic is picked; browsers without :has() show them all. */
.topic-hint { display: none; margin-top: 6px; padding: 10px 14px; border-radius: var(--radius-photo); background: var(--note); color: var(--ink); gap: 10px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.33; }
.topic-hint .ico { margin-top: 0; }
.topics:has(#topic-beta:checked) .hint-beta, .topics:has(#topic-problem:checked) .hint-problem, .topics:has(#topic-partnership:checked) .hint-partnership { display: flex; animation: rise-in 0.22s var(--ease-out); }
@supports not selector(:has(*)) { .topic-hint { display: flex; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }
/* The field robots fill in and people never see. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Turnstile's widget is at least 300 px wide: on the narrowest phones it borrows a little of the side margin. */
.ts-slot { min-height: 65px; margin-inline: min(0px, calc((100% - 300px) / 2)); }
.form-alert { border-radius: var(--radius-card); padding: 16px 20px; background: var(--bad-bg); display: flex; flex-direction: column; gap: 6px; }
.form-alert ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.form-alert a { color: var(--ink); }
.form-alert:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: var(--radius-card); }
.contact-off { align-items: flex-start; }
@media (min-width: 960px) {
  .contact-page { max-width: 72rem; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .contact-intro { position: sticky; top: 32px; }
  .contact-form, .contact-off { background: var(--raised); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 32px; }
}
.sent-page { max-width: 36rem; padding-block: var(--space-h) var(--gap); display: flex; flex-direction: column; align-items: center; gap: var(--space-l); text-align: center; }
.sent-page .garland { margin-bottom: var(--space-s); }
.sent-page .actions { justify-content: center; width: 100%; }

/* ===== 404 ===== */
.lost { display: grid; gap: var(--space-hh); align-items: center; padding-block: var(--space-hh) var(--gap); }
.lost-copy { align-items: flex-start; }
.lost-h { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.25rem); line-height: 1.1; }
@media (min-width: 960px) { .lost { grid-template-columns: 1fr 1fr; } }
.map-tile { width: 100%; max-width: 350px; margin-inline: auto; color: var(--ink); }
.map-plate { position: relative; padding: 10px; background: var(--raised); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.map-tile .pin { position: absolute; left: 54%; top: 34%; }
.map-tile .drop { display: block; animation: drop 0.56s var(--ease-pop) 0.3s backwards; }
@keyframes drop { from { transform: translateY(-40px); } }

/* ===== Privacy and terms ===== */
.policy-head { display: flex; flex-direction: column; gap: var(--space-l); }
.policy-head h1 { font-weight: 700; font-size: clamp(2.25rem, 1.5rem + 3vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; }
.policy-head .notice { background: var(--raised); }
.policy-grid { display: flex; flex-direction: column; gap: var(--space-xxl); padding-block: var(--space-xxl) var(--gap); }
.policy { display: flex; flex-direction: column; gap: var(--space-l); }
.policy h2 { font-weight: 600; font-size: 1.5rem; line-height: 1.3; margin-top: var(--space-xl); }
.policy ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.policy li::marker { color: var(--soft); }
.toc ul { list-style: none; }
.toc a { display: flex; align-items: center; gap: 10px; min-height: var(--target-min); padding: 6px 8px; color: var(--ink); text-decoration: none; border-radius: 12px; line-height: 1.3; }
.toc a:hover { background: var(--block); }
.toc-bead { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; }
.toc a[aria-current="true"] { font-weight: 800; }
.toc a[aria-current="true"] .toc-bead { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.toc-narrow { max-width: 68ch; background: var(--block); border-radius: var(--radius-card); }
.toc-narrow summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 20px; font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; cursor: pointer; border-radius: var(--radius-card); }
.toc-narrow summary::-webkit-details-marker { display: none; }
.toc-narrow summary .ico { color: var(--soft); transform: rotate(90deg); transition: transform 0.2s var(--ease-out); }
.toc-narrow[open] summary .ico { transform: rotate(-90deg); }
.toc-narrow nav { padding: 0 12px 12px; }
.toc-wide { display: none; }
.toc-title { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; padding: 0 8px 8px; }
@media (min-width: 1200px) {
  .policy-grid { display: grid; grid-template-columns: 16rem minmax(0, 68ch); gap: 64px; align-items: start; padding-top: var(--space-hh); }
  .toc-narrow { display: none; }
  .toc-wide { display: block; position: sticky; top: 24px; }
  .policy > h2:first-of-type { margin-top: 0; }
}

/* ===== Phone pictures: the app's screens at app scale, zoomed to fit. ===== */
.phone { --z: 0.66; --h: 844px; width: calc(390px * var(--z) + 18px); padding: 9px; border-radius: calc(54px * var(--z) + 9px); background: var(--ink); box-shadow: var(--shadow-phone); flex-shrink: 0; }
.phone.crop { --h: 600px; }
.phone.h667 { --h: 667px; }
.phone.h760 { --h: 760px; }
/* The largest iPhone, for screens that need the room. */
.phone.tall { --h: 932px; }
.phone .screen { position: relative; width: calc(390px * var(--z)); height: calc(var(--h) * var(--z)); border-radius: calc(54px * var(--z)); overflow: hidden; background: var(--paper); }
.phone .inner { width: 390px; height: var(--h); zoom: var(--z); position: relative; display: flex; flex-direction: column; }
.phone.crop .screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(to bottom, transparent, var(--paper)); pointer-events: none; }
.frag { --z: 0.66; width: calc(350px * var(--z)); flex-shrink: 0; }
.frag .inner { width: 350px; zoom: var(--z); }
/* A fragment on a tinted ground sits on the app's own ground, a paper plate, as on the phone. */
:is(.moment-pics, .figure, .hiw-inline, .stage-shot, .org-compose) .frag { width: calc(374px * var(--z)); }
:is(.moment-pics, .figure, .hiw-inline, .stage-shot, .org-compose) .frag .inner { width: 374px; padding: 12px; background: var(--paper); border-radius: var(--radius-card); }
.org-compose .frag .inner { box-shadow: var(--shadow-card); }
@media (min-width: 360px) { .phone, .frag { --z: 0.76; } }
@media (min-width: 560px) { .phone, .frag { --z: 0.85; } }
/* Per place. */
.moment-pics .phone, .moment-pics .frag { --z: 0.6; --h: 600px; }
.moment-pics .phone .screen::after, .teaser-figure .phone .screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(to bottom, transparent, var(--paper)); pointer-events: none; }
.hiw-inline .phone, .hiw-inline .frag, .teaser-figure .phone, .figure .frag, .two-phones .phone { --z: 0.6; }
.org-compose .phone { --z: 0.66; }
.org-compose .frag { --z: 0.62; }
.snip .frag { --z: 0.56; }
.teaser-figure .phone { --h: 600px; }
@media (min-width: 360px) {
  .moment-pics .phone, .moment-pics .frag, .hiw-inline .phone, .hiw-inline .frag, .teaser-figure .phone { --z: 0.66; }
  .figure .frag { --z: 0.72; }
  .two-phones .phone, .org-compose .phone { --z: 0.76; }
  .snip .frag { --z: 0.62; }
}
@media (min-width: 560px) { .hiw-inline .phone, .hiw-inline .frag { --z: 0.72; } }
@media (min-width: 760px) {
  .moment-pics .phone, .moment-pics .frag { --z: 0.72; }
  .hero-phones .phone { --z: 0.58; }
  .two-phones .phone { --z: 0.72; }
  .hero-phones .phone { --z: 0.58; }
}
@media (min-width: 960px) {
  .moment-pics .phone { --z: 0.7; }
  .moment-pics .frag { --z: 0.6; }
  .teaser-figure .phone { --z: 0.7; --h: 760px; }
  .teaser-figure .phone .screen::after { content: none; }
  .hiw-stage .phone, .hiw-stage .frag { --z: 0.78; }
}
@media (min-width: 960px) and (max-height: 899.98px) { .hiw-stage .phone, .hiw-stage .frag { --z: 0.66; } }
@media (min-width: 960px) and (max-height: 760px) { .hiw-stage .phone, .hiw-stage .frag { --z: 0.56; } }
@media (min-width: 1200px) {
  .moment-pics .phone { --z: 0.78; }
  .moment-pics .frag { --z: 0.72; }
  .snip .frag { --z: 0.5; }
}
/* A real screenshot in the phone frame: the frame takes its proportions (--h, set per picture). */
.phone.shot .screen img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Inside the pictures: React Native layout, in points. */
.m { font-family: var(--font-text); font-weight: 600; font-size: 17px; line-height: 24px; color: var(--ink); text-align: left; }
.m * { box-sizing: border-box; }
.m button { margin: 0; text-align: inherit; }
.m-status { height: 50px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 6px 32px 0 40px; font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.m-status .sys { display: flex; gap: 6px; align-items: center; }
.m-teamband { background: var(--tint); color: var(--on); }
.m-nav { height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 4px; padding: 0 8px; }
.m-nav.plain { padding: 0 20px; }
.m-nav .title { flex: 1; min-width: 0; padding: 0 4px; font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-nav .iconbtn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.m-nav .right { margin-right: 8px; }
.m-body { flex: 1; min-height: 0; padding: 4px 20px 16px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.m-body > *, .m-col > *, .m-foot, .m-band { flex-shrink: 0; }
.m-foot { padding: 10px 20px 34px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.m-tabbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; padding: 6px 8px 30px; border-top: 1px solid var(--line); background: var(--raised); }
.m-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; justify-content: center; color: var(--soft); font-family: var(--font-text); font-weight: 800; font-size: 12px; line-height: 16px; }
.m-tab.on { color: var(--tink); }
.m-h1 { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 36px; letter-spacing: -0.5px; }
.m-h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 28px; }
.m-prompt { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 31px; }
.m-spec { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 24px; }
.m-small { font-size: 15px; line-height: 20px; }
.m-smallb { font-size: 15px; line-height: 20px; font-weight: 800; }
.m-cap { font-size: 13px; line-height: 18px; }
.m-capb { font-size: 13px; line-height: 18px; font-weight: 800; }
.m-code { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 44px; letter-spacing: 6px; }
.m-soft { color: var(--soft); }
.m-ok { color: var(--ok); }
.m-warn { color: var(--warn); }
.m-row { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.m-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex-shrink: 1; }
.m-grow { flex: 1; min-width: 0; }
.m-card { background: var(--raised); border-radius: 24px; padding: 16px; box-shadow: var(--shadow-card); }
.m-card.strong { background: var(--block); box-shadow: none; }
.m-btn { min-height: 52px; padding: 12px 20px; border: 0; border-radius: 999px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 24px; text-align: center; }
.m-btn.lg { min-height: 60px; font-size: 21px; }
.m-btn.sm { min-height: 44px; padding: 8px 16px; font-size: 16px; line-height: 20px; }
.m-btn.auto { align-self: flex-start; }
.m-btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 12px color-mix(in srgb, var(--accent) 32%, transparent); }
.m-btn.team { background: var(--tint); color: var(--on); box-shadow: 0 8px 12px color-mix(in srgb, var(--tint) 32%, transparent); }
.m-btn.secondary { background: var(--tint-mint); color: var(--mint-ink); }
.m-btn.ghost { color: var(--accent-ink); }
.m-btn.danger { background: var(--bad-bg); color: var(--bad); }
.m-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--block); background: var(--block); color: var(--ink); font-family: var(--font-text); font-weight: 800; font-size: 14px; line-height: 18px; white-space: nowrap; }
.m-chip.small { min-height: 28px; font-size: 13px; }
.m-chip.wait { background: var(--warn-bg); border-color: var(--warn-bg); color: var(--warn); }
.m-chip.ok { background: var(--ok-bg); border-color: var(--ok-bg); color: var(--ok); }
.m-chip.send { background: var(--tint-sky); border-color: var(--tint-sky); color: var(--sky-ink); }
.m-chip.ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m-taskrow { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; background: var(--raised); border: 1px solid var(--line); border-radius: 24px; min-height: 68px; }
.m-taskrow .n { width: 28px; flex-shrink: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 26px; color: var(--tink, var(--soft)); }
.m-taskrow > .m-chip { align-self: center; }
.m-taskrow .p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-next { position: relative; overflow: hidden; padding: 20px 18px; border-radius: 24px; background: var(--fill16); display: flex; flex-direction: column; gap: 16px; }
.m-next .mark { position: absolute; right: -18px; top: -14px; opacity: 0.22; }
.m-next .spec { color: var(--tink); }
.m-pill { background: var(--ink); color: var(--paper); border-radius: 999px; min-height: 40px; padding: 0 14px; display: flex; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 26px; }
.m-avatar { width: 52px; height: 52px; border-radius: 26px; background: var(--paper); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.m-band { padding: 4px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.m-band .trail svg { display: block; width: 100%; height: auto; }
.m-photo { position: relative; border-radius: 16px; border: 4px solid var(--tint); background: var(--photo); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; aspect-ratio: 3 / 4; }
.m-photo > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-photo .tag { position: relative; align-self: flex-start; background: var(--raised); border-radius: 10px; padding: 2px 6px; font-weight: 800; font-size: 13px; line-height: 18px; }
.m-photo .hint { position: absolute; left: 8px; top: 8px; }
.m-toggle { width: 52px; height: 32px; border-radius: 999px; background: var(--line-2); position: relative; flex-shrink: 0; transition: background-color 0.15s ease-out; }
/* White knob and white QR box: the app's own literals (ui.tsx Toggle, lobby.tsx). */
.m-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 13px; background: #FFFFFF; transition: transform 0.15s ease-out; }
.m-toggle.on, [aria-checked="true"] > .m-toggle { background: var(--accent); }
.m-toggle.on::after, [aria-checked="true"] > .m-toggle::after { transform: translateX(20px); }
.m-field { display: flex; flex-direction: column; gap: 6px; }
.m-input { border: 2px solid var(--line); border-radius: 16px; background: var(--raised); min-height: 52px; padding: 12px 16px; display: flex; align-items: center; }
.m-input.code { min-height: 60px; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: 6px; }
.m-input.multi { align-items: flex-start; min-height: 68px; line-height: 22px; }
.m-input .ph { color: var(--soft); }
.m-pile { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 800; font-size: 15px; line-height: 20px; display: flex; align-items: center; }
.m-pile.on { background: var(--ink); color: var(--paper); }
.m-add { min-height: 44px; min-width: 44px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--ink); display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 15px; line-height: 20px; }
.m-qrbox { padding: 8px; background: #FFFFFF; border-radius: 8px; border: 1px solid var(--line); }
.m-qrbox .qr { display: block; width: 150px; height: 150px; }
.m-dots { display: flex; gap: 6px; justify-content: center; }
.m-dots span { width: 8px; height: 8px; border-radius: 4px; background: var(--line); }
.m-dots span.past { background: var(--line-2); }
.m-dots span.now { background: var(--ink); }
.m-review { display: flex; justify-content: space-between; padding: 0 2px; }
.m-review > div { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; font-weight: 800; font-size: 12px; line-height: 16px; }
.m-review .circle { width: 44px; height: 44px; border-radius: 22px; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; }
.m-badge { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; line-height: 20px; }
.m-choice { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--raised); border: 1px solid var(--line); border-radius: 16px; min-height: 72px; }
.m-choice .ico { color: var(--accent-ink); }
.m-postcard { position: relative; background: var(--raised); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.m-postcard .stubs { display: flex; gap: 3px; height: 116px; background: var(--line); }
.m-postcard .stub { flex: 1; position: relative; overflow: hidden; background: var(--photo); border-bottom: 4px solid var(--tint); }
.m-postcard .stub svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-postmark { position: absolute; right: 12px; top: 88px; width: 60px; height: 60px; border-radius: 30px; border: 1.5px solid var(--soft); background: var(--raised); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(8deg); color: var(--soft); font-family: var(--font-text); font-weight: 800; font-size: 9px; line-height: 10px; letter-spacing: 0.5px; text-transform: uppercase; text-align: center; }
.m-postmark::before { content: ""; position: absolute; inset: -4px; border-radius: 40px; border: 2px solid var(--soft); }
.m-postcard .text { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.m-podium { display: flex; align-items: flex-end; gap: 10px; padding: 36px 16px 0; }
.m-podium .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.m-podium .ped { width: 100%; border-radius: 24px 24px 0 0; display: flex; flex-direction: column; align-items: center; padding-top: 12px; gap: 2px; }
.m-podium .score { font-family: var(--font-display); font-weight: 700; letter-spacing: -1.5px; }
.m-podium.floor { display: block; height: 6px; border-radius: 3px; background: var(--ink); margin: 0 16px; padding: 0; }
.m-sticker { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; }
.m-sticker.first { width: 68px; height: 68px; position: relative; color: var(--ink); font-size: 24px; padding-top: 6px; }
.m-sticker.first svg { position: absolute; inset: 0; }
.m-sticker.first span { position: relative; }
.m-sticker.disc { width: 54px; height: 54px; border-radius: 27px; background: var(--tint); color: var(--on); font-size: 22px; }
.m-confetti { position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; }
.m-headline { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 42px; letter-spacing: -0.5px; }
.m-headline:focus { outline: none; }
.m-headline:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.m-joinrow { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 24px; background: var(--tint-mint); }
.m-stamp-land { display: inline-flex; }
.m-mapcard { position: relative; }
/* "Off to Dad.": the app's ToastHost, ink with paper words, 20 from the sides. */
.m-toast { position: absolute; left: 20px; right: 20px; bottom: 124px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 24px; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 24px; }
.m-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 12px; }
.ico-wrap { display: inline-flex; flex-shrink: 0; }
.accent-ink { color: var(--accent-ink); }
.bunting-in { color: var(--ink); }
.bunting-in svg { display: block; width: 100%; height: 52px; }
.reveal-cols > .m-col { flex: 1 1 0; }

/* The demo's real buttons inside the phone: the app's look, a target of at least 48 px once zoomed. */
.phone.demo .inner { background: var(--paper); }
.phone.demo .inner.over { position: absolute; left: 0; top: 0; }
.demo-hit { position: relative; cursor: pointer; }
.demo-hit::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 76px; transform: translateY(-50%); }
.phone .demo-hit:focus-visible { outline: calc(3px / var(--z)) solid var(--ink); outline-offset: calc(2px / var(--z)); }
.m-btn.demo-hit:focus-visible { border-radius: 999px; }
.m-btn.demo-hit:active { transform: scale(0.97); opacity: 0.9; }
/* Live controls take passing pairs (docs/17 section 4 rule 5): Retake in ink on mint (13.48:1; the
   app's mintInk is 3.56:1), and the switch outlined in ink so its track and knob show (WCAG 1.4.11). */
.phone.demo .m-btn.secondary { color: var(--ink); }
.phone.demo .m-toggle { box-shadow: inset 0 0 0 1.5px var(--ink); }
.phone.demo .m-toggle::after { box-shadow: 0 0 0 1.5px var(--ink); }

@media (forced-colors: active) {
  .dl-item:is([aria-selected="true"], [aria-current="true"]) .dl-bead, .pill-input:checked + .tile-opt, .toc a[aria-current="true"] .toc-bead { border: 2px solid CanvasText; }
  .rp-btn[aria-pressed="true"] .circle { border-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The app's components (src/art) */
.rn-v{display:flex;flex-direction:column;position:relative;box-sizing:border-box;min-width:0;min-height:0;flex-shrink:0;align-items:stretch;border:0 solid}
.rn-t{display:inline;white-space:pre-wrap;overflow-wrap:break-word;margin:0;padding:0}
.rn-yp6k80{width:52px;height:52px;transform:rotate(-8deg) scale(1);opacity:1}
.rn-1npr1jq{flex:1;border-radius:26px;background-color:#FFD93D;align-items:center;justify-content:center;overflow:visible;box-shadow:0px 6px 10px rgba(255,217,61,0.35)}
.rn-e1i2tb{font-family:var(--font-text);font-weight:800;font-size:11px;line-height:13px;letter-spacing:0.3px;text-transform:uppercase;color:#22243A;text-align:center;width:42px;margin-left:5px;margin-right:5px}
.rn-1m75why{width:52px;height:52px;transform:rotate(7deg) scale(1);opacity:1}
.rn-1ey8wgf{width:20px;height:24px}
.rn-aj7evq{height:64px;background-color:var(--block);overflow:hidden;border-radius:16px;border-style:solid;border-width:1px;border-color:var(--line)}
.rn-9c1yw6{height:240px;background-color:var(--block);overflow:hidden;border-radius:16px;border-style:solid;border-width:1px;border-color:var(--line)}
.rn-1ekncbj{width:40px;height:48px}
.s-raised{stroke:var(--raised)}
.s-water{stroke:var(--water)}
.f-line-2{fill:var(--line-2)}
.f-accent{fill:var(--accent)}
.f-on-accent-words{fill:var(--on-accent-words)}
/* Picture details (src/lib/inline-styles.ts) */
.s-86w6v5{left:24.43% !important;top:34.1% !important}
.s-1tptt7d{left:50% !important;top:40.4% !important}
.s-1xn7vs{left:75.57% !important;top:34.1% !important}
.s-bjdgzx{gap:0 !important}
.s-urcxlh{opacity:.85 !important}
.s-1tc0076{justify-content:space-between !important}
.s-1olt6pd{gap:12px !important;padding-top:12px !important}
.s-v9un6z{gap:6px !important}
.s-2t7h2{padding-top:4px !important}
.s-cjx69j{gap:2px !important}
.s-cp6ja2{left:14% !important;top:30% !important}
.s-qginuq{gap:14px !important}
.s-1psb05k{height:440px !important;aspect-ratio:auto !important}
.s-19dgm5h{gap:8px !important}
.s-tgoca0{font-size:17px !important}
.s-1d9ojq7{font-size:17px !important;line-height:24px !important}
.s-tjq0vz{left:46% !important;top:12% !important}
.s-60mwv9{left:70% !important;top:44% !important}
.s-t2el1y{gap:12px !important;padding-top:8px !important}
.s-1iu691c{gap:12px !important}
.s-1mhnehb{display:flex !important;flex-direction:column !important;align-items:center !important;gap:8px !important}
.s-lmdudm{display:flex !important;flex-direction:row !important;align-items:center !important;gap:12px !important;padding:10px 14px 10px 16px !important}
.s-cnvfbm{gap:16px !important;justify-content:space-between !important}
.s-196dx6e{gap:10px !important}
.s-zy454f{gap:4px !important;padding-top:4px !important}
.s-q1kn1j{letter-spacing:0.5px !important;text-transform:uppercase !important}
.s-oz2d77{align-items:flex-start !important;gap:12px !important}
.s-1ddp2ws{gap:8px !important;flex:1 !important}
.s-hxoirw{gap:6px !important;padding-top:12px !important}
.s-1eviv88{position:relative !important}
.s-1p0rnsk{font-family:var(--font-display) !important;font-weight:600 !important;font-size:17px !important}
.s-87yhx8{height:140px !important;background:var(--fill16) !important}
.s-1n3cj90{font-size:36px !important;line-height:40px !important;color:var(--tink) !important}
.s-s787wm{font-family:var(--font-display) !important;font-weight:600 !important;font-size:19px !important}
.s-v4yss2{height:200px !important;background:var(--tint) !important}
.s-ek38x7{font-size:48px !important;line-height:52px !important;color:var(--on) !important}
.s-vuig5s{color:var(--on) !important;opacity:.85 !important}
.s-c0a270{gap:14px !important;padding-top:8px !important}
.s-1txto41{text-align:center !important}
.s-jaizj9{gap:12px !important;align-items:flex-start !important;padding-top:14px !important;padding-bottom:14px !important}
.s-n5gdi2{padding-top:8px !important}
.s-13t9w9x{gap:20px !important}
.s-1jwxygv{padding:0 !important;height:auto !important}
.s-1uykvw{padding:0 !important}
.s-zfhnbg{gap:16px !important}
.s-1w1wt6p{align-items:flex-start !important}
.s-ihkqnt{text-decoration:underline !important}
.s-12fnyjg{gap:14px !important;padding-top:0 !important}
.s-m7pi4h{gap:4px !important}
.s-x373cv{gap:10px !important;align-items:flex-start !important}
.s-1ubmd2m{display:flex !important;flex-direction:column !important;align-items:center !important;gap:8px !important;padding:24px 16px !important}
.s-1ae9fx1{font-family:var(--font-display) !important;font-weight:600 !important;font-size:44px !important;line-height:52px !important;letter-spacing:4px !important}
.s-1ad8z5m{gap:16px !important;padding-top:0 !important}
.s-1ksj6lu{gap:12px !important;align-items:center !important}
.s-1vff5c0{gap:18px !important;padding-top:8px !important}
.s-18nro8v{font-family:var(--font-display) !important;font-size:24px !important;letter-spacing:3px !important}