/* ==========================================================================
   Costella site (both pages): "11pm to morning".
   The page is one night in the owner's kitchen. Each section is a band on one of five flat grounds (Night, Late,
   First light, Early light, Daylight), each lighter than the last; every band sets its own colour tokens and the
   rules below use only those. The kitchen app's screens stay white cards in every band and both themes.
   TOKEN BLOCK: the only raw hex in this repo. The values' one home is the look file
   (/Users/alphonse_1/AI/platform/brand/look-and-voice.md); every other colour here is mixed from these.
   ========================================================================== */
:root {
  /* the five grounds, 11pm to morning (dark-mode values for the two light ones) */
  --night: #14182c;
  --late: #2b365d;
  --first-light: #405374;
  --early-light: #c2cddc;
  --early-light-dim: #5d6f88;
  --daylight: #f8f9fc;
  --daylight-dim: #7f8c9e;
  /* brand */
  --dusk: #252b54;
  --dusk-hover: #363d6f;
  --rice: #f6f4ec;
  --broth: #e9a23b;
  --pen-ink: #7c4904;
  --pen-deep: #5a3300;
  --lamp: #ffc47f;
  /* the kitchen app's screens */
  --s-card: #ffffff;
  --s-muted: #494d62;
  --s-hair: #dddfe9;
  --s-sunk: #eef0f7;
  --s-edge: #7f8497;
  --s-lit: #fff1d6;
  --s-ok-ink: #195b3b;
  --s-ok-bg: #dcf6e6;
  --s-wait-bg: #ebeefb;
  --s-up-ink: #744200;
  --s-up-bg: #feedc9;
  --problem: #902011;
  --problem-on-dark: #ffb4a6;
}

/* FONT BLOCK: the three families, served from this site (assets/fonts/, each family's OFL licence beside its
   files). Latin-ext loads only when a page uses one of its letters (macrons). Kalam is not preloaded. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/bricolage-grotesque-latin.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: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/lexend-latin.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: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/lexend-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Kalam"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/kalam-700-latin.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: "Kalam"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/kalam-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Derived tokens: mixes of the token block, no hex ---------- */
:root {
  color-scheme: light dark;
  --s-ink: var(--night);
  --s-brand: var(--dusk);
  --s-pen: var(--pen-ink);
  --shadow-screen: 0 1px 2px color-mix(in srgb, var(--night) 34%, transparent), 0 14px 32px color-mix(in srgb, var(--night) 40%, transparent);
  --shadow-day: 0 0 0 1px var(--s-hair), 0 1px 2px color-mix(in srgb, var(--night) 8%, transparent), 0 10px 26px color-mix(in srgb, var(--night) 10%, transparent);
  --shadow-sheet: 0 -1px 2px color-mix(in srgb, var(--night) 6%, transparent), 0 8px 20px color-mix(in srgb, var(--night) 14%, transparent);
  --tap-fill: color-mix(in srgb, var(--dusk) 22%, transparent);
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Lexend", ui-sans-serif, system-ui, sans-serif;
  --hand: "Kalam", "Comic Sans MS", cursive;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* one type scale: the hero headline is 1.5 times the section headings and outranks everything */
  --fs-h1: 2.25rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.375rem;
  --fs-close: 1.75rem;
  --fs-time: 1.75rem;
  --fs-topic: 1.375rem;
  --fs-lede: 1.0625rem;
  --fs-body: 1.0625rem;
}
@media (max-width: 22.4375em) { :root { --fs-h1: 2rem; --fs-h2: 1.375rem; --fs-h3: 1.25rem; --fs-close: 1.625rem; --fs-out: 1.75rem; } }
@media (min-width: 37.5em) { :root { --fs-h1: 3rem; --fs-h2: 2rem; --fs-h3: 1.75rem; --fs-close: 2.375rem; --fs-lede: 1.125rem; --fs-body: 1.125rem; } }
@media (min-width: 62.5em) {
  :root {
    --fs-h1: min(4.5rem, calc((100vw - 5rem) / 15.6));
    --fs-h2: min(3rem, calc((100vw - 5rem) / 23.4));
    --fs-h3: min(2.25rem, calc((100vw - 5rem) / 31.2));
    --fs-close: min(3.5rem, calc((100vw - 5rem) / 19.5));
    --fs-time: 2.125rem;
    --fs-topic: 1.5rem;
    --fs-lede: 1.25rem;
  }
}

/* ---------- The five grounds. Each band sets the tokens its contents use. ---------- */
/* 11pm: Night (the header, the hero, the pain, the free tool, 11:04 pm). Dark in both themes. */
.band--night, .band--late, .band--first {
  --fg: var(--rice);
  --muted: color-mix(in oklab, var(--rice) 80%, var(--bg));
  --rule: color-mix(in oklab, var(--rice) 18%, var(--bg));
  --line: color-mix(in oklab, var(--rice) 52%, var(--bg));
  --edge: color-mix(in oklab, var(--rice) 66%, var(--bg));
  --pen: var(--broth);
  --btn-bg: var(--rice); --btn-fg: var(--night); --btn-hover: var(--s-card);
  --focus: var(--lamp);
  --soft: color-mix(in oklab, var(--rice) 8%, var(--bg));
  --lamp-line: color-mix(in oklab, var(--rice) 74%, var(--bg));
  --lamp-shade: var(--dusk);
}
.band--night { --bg: var(--night); }
/* 11:09 pm: Late, the last job of the night */
.band--late { --bg: var(--late); }
/* 6:40 am: First light */
.band--first { --bg: var(--first-light); --muted: color-mix(in oklab, var(--rice) 90%, var(--bg)); }
/* 6:52 am: Early light, and 7:15 am to the end: Daylight. Light grounds, Night ink. */
.band--early, .band--day {
  --fg: var(--night);
  --rule: color-mix(in oklab, var(--night) 16%, var(--bg));
  --line: color-mix(in oklab, var(--night) 54%, var(--bg));
  --edge: color-mix(in oklab, var(--night) 58%, var(--bg));
  --pen: var(--pen-ink);
  --btn-bg: var(--dusk); --btn-fg: var(--s-card); --btn-hover: var(--dusk-hover);
  --focus: var(--dusk);
  --soft: color-mix(in oklab, var(--night) 5%, var(--bg));
  --lamp-line: var(--night);
  --lamp-shade: var(--dusk);
}
.band--early { --bg: var(--early-light); --muted: color-mix(in oklab, var(--night) 84%, var(--bg)); }
.band--day { --bg: var(--daylight); --muted: var(--s-muted); }
/* Dark theme: hero, pain, free tool and the night stay as they are; the morning still gets lighter, in dimmed
   steps, and ends in a dimmed real daylight. */
@media (prefers-color-scheme: dark) {
  .band--early {
    --bg: var(--early-light-dim);
    --fg: color-mix(in srgb, var(--rice) 40%, var(--s-card));
    --muted: var(--rice);
    --rule: color-mix(in oklab, var(--rice) 28%, var(--bg));
    --line: color-mix(in oklab, var(--rice) 72%, var(--bg));
    --edge: color-mix(in oklab, var(--rice) 82%, var(--bg));
    --pen: color-mix(in oklab, var(--broth) 42%, var(--s-card));
    --btn-bg: var(--rice); --btn-fg: var(--night); --btn-hover: var(--s-card);
    --focus: var(--lamp);
    --soft: color-mix(in oklab, var(--rice) 10%, var(--bg));
    --lamp-line: var(--rice);
  }
  .band--day {
    --bg: var(--daylight-dim);
    --muted: color-mix(in oklab, var(--night) 94%, var(--bg));
    --rule: color-mix(in oklab, var(--night) 26%, var(--bg));
    --line: color-mix(in oklab, var(--night) 66%, var(--bg));
    --edge: color-mix(in oklab, var(--night) 74%, var(--bg));
    --pen: var(--pen-deep);
    --focus: var(--night);
    --soft: color-mix(in oklab, var(--night) 7%, var(--bg));
  }
}
.band { background: var(--bg); color: var(--fg); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--night); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--daylight); color: var(--night);
  font-family: var(--body); font-size: var(--fs-body); font-weight: 400; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
@media (prefers-color-scheme: dark) { body { background: var(--daylight-dim); } }
svg { display: block; }
p, ul, ol, h1, h2, h3, figure { margin: 0; }
h1, h2, h3 { font-weight: inherit; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus, var(--dusk)); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.arw { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 600; }
.fig { white-space: nowrap; font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: 1rem; top: -20rem; z-index: 50; background: var(--rice); color: var(--night); padding: 0.75rem 1.125rem; border-radius: 0.75rem; font-weight: 600; text-decoration: none; }
.skip:focus { top: 0.75rem; }
.wrap { --wrap-pad: 1.25rem; width: 100%; max-width: 77.5rem; margin: 0 auto; padding: 0 var(--wrap-pad); }
@media (min-width: 62.5em) { .wrap { --wrap-pad: 2.5rem; } }
@media (max-width: 21.25em) { .wrap { --wrap-pad: 1rem; } }

/* The review strip: this is a review copy, not the live site. */
.review-strip { margin: 0; background: var(--night); color: color-mix(in oklab, var(--rice) 82%, var(--night)); font-size: 0.6875rem; line-height: 1.35; text-align: center; padding: 0.3125rem 0.75rem; border-bottom: 1px solid color-mix(in oklab, var(--rice) 16%, var(--night)); }

/* ---------- Type ---------- */
.h2, .h3, .hero__title, .close__title, .q-title, .q-rule h3 { font-family: var(--display); font-weight: 650; font-variation-settings: "opsz" 28; text-wrap: balance; }
.h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 1rem; }
.h3 { font-size: var(--fs-h3); line-height: 1.14; letter-spacing: -0.015em; margin-bottom: 0.625rem; }
@media (min-width: 62.5em) { .h2 { margin-bottom: 1.5rem; } .h3 { margin-bottom: 1rem; } }
.lede { font-size: var(--fs-lede); line-height: 1.5; }
/* Labels are Lexend; Costella's hand is kept for the clock times, topic words and her own marks. */
.label { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 0.5rem; }
/* Her hand: the clock times and the topic words */
.hand { user-select: none; -webkit-user-select: none; white-space: nowrap; }
.g1 { display: inline-block; width: 0.352em; height: 0.8em; vertical-align: baseline; overflow: visible; }
/* Her pen underlines a phrase by hand. It sits under the words, never over them; when the phrase must wrap
   (large text), it becomes a plain pen-coloured underline that wraps with the words. */
.penned { position: relative; white-space: nowrap; }
.penned__u { position: absolute; left: -0.03em; bottom: -0.02em; width: calc(100% + 0.08em); height: 0.18em; color: var(--pen); overflow: visible; pointer-events: none; }
/* When the phrase cannot fit on one line (large text), the drawn line gives way to an underline that wraps. */
@container hl (max-width: 8.75em) {
  .penned { white-space: normal; text-decoration-line: underline; text-decoration-color: var(--pen); text-decoration-thickness: 0.07em; text-underline-offset: 0.14em; text-decoration-skip-ink: none; }
  .penned__u { display: none; }
}

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.375rem 1.375rem; border-radius: 0.875rem; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: 1.0625rem; line-height: 1.2; text-decoration: none; text-align: center; border: 0; cursor: pointer; }
.btn:hover { background: var(--btn-hover); }
@media (prefers-reduced-motion: no-preference) { .btn { transition: background-color 160ms ease-out, transform 120ms ease-out; } .btn:active { transform: scale(0.98); } }
.btn--sm { min-height: 2.75rem; font-size: 1rem; padding: 0.25rem 1.125rem; border-radius: 0.75rem; }
.btn--lg { min-height: 3.375rem; font-size: 1.125rem; padding: 0.5rem 1.75rem; width: 100%; max-width: 24rem; }

/* ---------- Header (11pm) ---------- */
.site-head { position: relative; z-index: 20; }
.site-head__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; min-height: 3.25rem; padding-top: 0.25rem; padding-bottom: 0.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-family: var(--display); font-weight: 650; font-variation-settings: "opsz" 28; font-size: 1.5rem; letter-spacing: -0.02em; min-height: 2.75rem; }
.brand__nib { width: 1.375rem; height: 1.375rem; color: var(--pen); transform: rotate(35deg); flex: none; }
.nav-wide { display: none; }
.nav-wide a:not(.btn) { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.25rem; font-weight: 500; font-size: 1rem; text-decoration: none; }
.nav-wide a:not(.btn):hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--pen); text-decoration-thickness: 2px; }
@media (min-width: 62.5em) { .site-head__in { min-height: 5rem; } .nav-wide { display: flex; align-items: center; gap: 1.75rem; } .nav-phone { display: none; } }
.nav-phone summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1rem 0 0.75rem; border-radius: 0.75rem; border: 1.5px solid var(--edge); font-weight: 600; font-size: 1rem; }
.nav-phone summary::-webkit-details-marker { display: none; }
.nav-phone .ico { width: 1.25rem; height: 1.25rem; flex: none; }
.nav-phone .ico--shut, .nav-phone[open] .ico--open { display: none; }
.nav-phone[open] .ico--shut { display: block; }
.nav-phone:not([open]) .nav-phone__panel { display: none; }
.nav-phone__panel { --focus: var(--dusk); position: absolute; left: 1rem; right: 1rem; top: calc(100% + 0.375rem); background: var(--s-card); color: var(--s-ink); border-radius: 1.125rem; box-shadow: var(--shadow-screen); padding: 0.5rem; display: grid; gap: 0.125rem; }
.nav-phone__panel a:not(.btn) { display: flex; align-items: center; min-height: 3.25rem; padding: 0 1rem; border-radius: 0.75rem; text-decoration: none; font-weight: 500; font-size: 1.125rem; }
.nav-phone__panel a:not(.btn):hover { background: var(--s-sunk); }
.nav-phone__panel .btn { --btn-bg: var(--dusk); --btn-fg: var(--s-card); --btn-hover: var(--dusk-hover); margin: 0.375rem 0.25rem 0.25rem; min-height: 3.25rem; }

/* ---------- Hero: 11pm, the invoice under the desk lamp ---------- */
.hero { padding: 0.25rem 0 3rem; overflow-x: clip; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__kicker { font-family: var(--hand); font-weight: 700; font-size: 1.25rem; line-height: 1.3; color: var(--pen); margin: 0.25rem 0 0.125rem; }
.hero__title { container: hl / inline-size; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.025em; text-wrap: wrap; }
.hero__title .br-ph { display: inline; }
/* Phones: every hero item is one row of the grid, so its order can follow the screen's height. */
.hero__words { display: contents; }
.hero__kicker { order: 1; } .hero__title { order: 2; } .hero__field { order: 4; } .hero__lede { order: 5; margin-top: 1rem; font-size: 1rem; }
.hero__ticks { order: 6; } .hero__cta { order: 7; } .hero__byline { order: 8; } .hero__note { order: 9; }
.ticks { display: grid; gap: 0.125rem; margin: 0.75rem 0 1rem; }
.ticks li { display: flex; align-items: center; gap: 0.625rem; font-weight: 500; font-size: 1rem; line-height: 1.35; }
.ticks__mark { flex: none; width: 1.5rem; height: 1.5rem; color: var(--pen); }
.under { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--muted); padding-left: 0.125rem; }
.byline { margin-top: 1rem; font-size: 0.875rem; line-height: 1.45; color: var(--muted); max-width: 34em; }
.hero__note { margin-top: 1.25rem; padding-top: 0.875rem; border-top: 1px solid var(--rule); font-size: 0.875rem; line-height: 1.45; color: var(--muted); }

/* The lamp: Costella's one 2 px line, flat fills. On, its bulb is the lamp's warm colour. */
.lamp { display: block; overflow: visible; }
.lamp__arm { fill: none; stroke: var(--lamp-line); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lamp__joint { fill: var(--lamp-shade); stroke: var(--lamp-line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lamp__shade { fill: var(--lamp-shade); stroke: var(--lamp-line); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lamp__bulb { fill: var(--lamp); stroke: var(--lamp-line); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* Its light: one flat, hard-edged shape from the shade's mouth, widening over the card and lying under it. */
.light { position: absolute; z-index: 0; background: var(--lamp); pointer-events: none; }
.light ~ .scr { position: relative; z-index: 1; }

/* Phones: the lamp hangs just above the card; its light falls from the shade and lies behind the whole card. */
.hero__field { --lamp-w: 6.5rem; --lamp-h: calc(var(--lamp-w) * 0.5125); --cone: 1.5rem; --lamp-r: 0.5rem;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-top: 0.25rem; }
.hero__field .replay { grid-area: 1 / 1; align-self: start; justify-self: start; }
.hero__field .lamp { grid-area: 1 / 2; width: var(--lamp-w); height: var(--lamp-h); margin-right: var(--lamp-r); }
.hero__field .scr { grid-area: 2 / 1 / 3 / 3; margin-top: var(--cone); }
/* The light starts at the shade's mouth: when the Replay is taller than the lamp, the lamp sits at the row's foot. */
.hero__field .light { left: calc(-1 * var(--wrap-pad)); right: calc(-1 * var(--wrap-pad)); bottom: -0.625rem;
  top: max(var(--lamp-h), 2.75rem); clip-path: polygon(calc(100% - var(--wrap-pad) - var(--lamp-r) - var(--lamp-w) * 0.625) 0, calc(100% - var(--wrap-pad) - var(--lamp-r) - var(--lamp-w) * 0.125) 0, 100% calc(var(--cone) + 0.25rem), 100% 100%, 0 100%, 0 calc(var(--cone) + 0.25rem)); }

/* Short phones: the button comes straight after the invoice; the line and the terms follow it. */
@media (max-width: 62.4375em) and (max-height: 49.9375em) {
  .hero__cta { order: 5; margin-top: 1rem; }
  .hero__lede { order: 6; margin-top: 1.25rem; }
  .hero__ticks { order: 7; margin-bottom: 0; }
  .site-head__in { min-height: 3rem; padding-top: 0.125rem; padding-bottom: 0.125rem; }
}
@media (max-width: 21.25em) { .hero__field { --lamp-w: 6rem; } }
/* Tall phones: his name sits under his own line, like a quote's attribution, so it is on the first screen. */
@media (max-width: 62.4375em) and (min-width: 23.75em) and (min-height: 50em) {
  .hero__byline { order: 3; margin-top: 0.5rem; }
}

/* Tablets: the same stack, a little roomier. */
@media (min-width: 37.5em) and (max-width: 62.4375em) {
  .hero { padding-bottom: 4rem; }
  .hero__kicker { font-size: 1.5rem; margin-top: 1rem; }
  .hero__title .br-ph { display: none; }
  .hero__field { --lamp-w: 9rem; --cone: 2.5rem; --lamp-r: 3rem; }
  .hero__lede { margin-top: 1.75rem; font-size: var(--fs-lede); max-width: 36rem; }
}

/* Desktop: the headline across the full width; below it one field, the words beside the lamp-lit invoice. */
@media (min-width: 62.5em) {
  .hero { padding: 1.25rem 0 6rem; }
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6.6fr); column-gap: 4.5rem;
    grid-template-areas: "kicker kicker" "title title" "words field"; }
  .hero__kicker { grid-area: kicker; font-size: 1.625rem; margin: 0.5rem 0 0.25rem; }
  .hero__title { grid-area: title; margin-bottom: calc(var(--fs-h1) * 0.92); }
  .hero__title .br-ph { display: none; }
  .hero__words { grid-area: words; display: flex; flex-direction: column; }
  .hero__lede { margin-top: 0; font-size: var(--fs-lede); }
  .ticks { margin: 1.5rem 0 2rem; gap: 0.5rem; }
  .ticks li { font-size: 1.0625rem; }
  .btn--lg { width: auto; }
  .hero__field { grid-area: field; display: block; --lamp-w: calc(var(--fs-h1) * 2.1); --cone: calc(var(--fs-h1) * 0.66); --lamp-rf: 0.28; margin-top: 0; align-self: start; }
  .hero__field .scr { margin-top: 0; }
  .hero__field .lamp { position: absolute; right: calc(var(--lamp-rf) * 100%); bottom: calc(100% + var(--cone)); margin: 0; }
  .hero__field .light { top: calc(-1 * var(--cone)); left: -1.75rem; right: -1.75rem; bottom: -1.75rem;
    clip-path: polygon(calc(100% - 1.75rem - (100% - 3.5rem) * var(--lamp-rf) - var(--lamp-w) * 0.625) 0, calc(100% - 1.75rem - (100% - 3.5rem) * var(--lamp-rf) - var(--lamp-w) * 0.125) 0, 100% calc(var(--cone) + 1rem), 100% 100%, 0 100%, 0 calc(var(--cone) + 1rem)); }
  .hero__field .replay { position: absolute; right: -0.625rem; top: calc(100% + 2rem); }
}

/* ---------- The app screens (white cards in every band) ---------- */
.scr { --pad: 0.875rem; position: relative; background: var(--s-card); color: var(--s-ink); border-radius: 1rem; box-shadow: var(--shadow-screen); font-size: 0.875rem; line-height: 1.4; cursor: default; --focus: var(--dusk); }
.band--early .scr, .band--day .scr { box-shadow: var(--shadow-day); }
.scr p { margin: 0; }
.scr__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.375rem var(--pad); border-bottom: 1px solid var(--s-hair); font-size: 0.875rem; font-weight: 600; color: var(--s-muted); }
.tag { font-size: 0.8125rem; font-weight: 600; line-height: 1; color: var(--s-ink); background: var(--s-sunk); border: 1px solid var(--s-edge); border-radius: 0.375rem; padding: 0.25rem 0.4375rem; white-space: nowrap; }
.scr__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.375rem 0.625rem; padding: 0.75rem var(--pad) 0.625rem; }
.scr__head--tight { padding-bottom: 0.5rem; }
.scr__title { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.scr__sub { display: block; font-size: 0.875rem; line-height: 1.4; color: var(--s-muted); font-weight: 400; }
.scr__section { padding: 0.625rem var(--pad) 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--s-muted); border-top: 1px solid var(--s-hair); }
.was { color: var(--s-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; font-weight: 400; }
.scr .arw { color: var(--s-muted); margin: 0 0.3125rem; font-weight: 400; }
.ln { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.375rem 0.625rem; min-width: 0; }

.chip { display: inline-flex; align-items: center; gap: 0.375rem; text-align: left; min-height: 1.875rem; padding: 0.1875rem 0.5rem; border-radius: 999px; border: 1.5px solid transparent; font-size: 0.875rem; font-weight: 600; line-height: 1.15; white-space: nowrap; }
.chip svg { width: 0.875rem; height: 0.875rem; flex: none; }
.chip--lg { min-height: 2.125rem; padding: 0 0.8125rem; font-size: 0.9375rem; }
.chip--ok { color: var(--s-ok-ink); background: var(--s-ok-bg); }
.chip--up { color: var(--s-up-ink); background: var(--s-up-bg); }
.chip--wait { color: var(--dusk); background: var(--s-wait-bg); border: 1.5px dashed var(--dusk); }
.chip--pend { color: var(--s-muted); background: var(--s-card); border: 1.5px dashed var(--s-edge); }
.chip--hold { color: var(--s-ink); background: var(--s-sunk); border: 1.5px solid var(--s-edge); }
.chips { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem 0.875rem; }

/* Her circle, drawn round a number or a word by her pen: Pen ink on the white screens, her pen colour on a ground */
.ringed { position: relative; display: inline-flex; }
.ring { position: absolute; inset: -0.5rem -0.6875rem -0.5rem -0.75rem; overflow: hidden; pointer-events: none; }
.ring__in { display: block; width: 100%; height: 100%; }
.ring__in svg { width: 100%; height: 100%; color: var(--s-pen); overflow: visible; }

.note { display: inline-flex; align-items: center; gap: 0.3125rem; font-family: var(--hand); font-weight: 700; font-size: 1rem; line-height: 1.2; color: var(--s-pen); white-space: nowrap; }
.note svg { width: 0.875rem; height: 0.875rem; color: var(--s-pen); transform: rotate(35deg); flex: none; }
.note--sm { display: flex; font-size: 0.9375rem; margin-top: 0.125rem; }
.matched { display: inline-flex; align-items: center; font-size: 0.875rem; color: var(--s-muted); white-space: nowrap; }
.matched .arw { margin: 0 0.375rem 0 0; }
.src { display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; color: var(--s-muted); font-weight: 400; }
.src svg { width: 0.875rem; height: 0.875rem; flex: none; }

/* Buttons drawn inside a picture are not controls: no focus, no pointer. */
.sbtn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; text-align: center; min-height: 2.375rem; padding: 0 1rem; border-radius: 0.625rem; background: var(--dusk); color: var(--s-card); font-weight: 600; font-size: 0.875rem; border: 1.5px solid var(--dusk); cursor: default; white-space: nowrap; }
.sbtn svg { width: 0.9375rem; height: 0.9375rem; }
.sbtn--ghost { background: var(--s-card); color: var(--dusk); border-color: var(--s-edge); }
.sbtn--wide { width: 100%; min-height: 2.75rem; font-size: 0.9375rem; }
.sbtn--chosen { background: var(--s-ok-bg); color: var(--s-ok-ink); border-color: var(--s-ok-bg); }

/* Swaps: a first frame and a finished frame share one spot, so nothing around them moves */
.swap, .yswap { display: inline-grid; align-items: center; }
.swap > *, .yswap > * { grid-area: 1 / 1; justify-self: end; }
.swap--left > *, .swap--dot > *, .yswap--left > * { justify-self: start; }
.swap--wide { display: grid; }
.swap--wide > * { justify-self: stretch; }
.swap > [data-before] { opacity: 0; visibility: hidden; }
.yes-on, .is-yes .yes-off { opacity: 0; visibility: hidden; }
.is-yes .yes-on { opacity: 1; visibility: visible; }

.tap { position: absolute; left: 0; top: 0; width: 30px; height: 30px; opacity: 0; pointer-events: none; z-index: 4; }
.tap__in { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--tap-fill); border: 2px solid var(--s-card); box-shadow: 0 0 0 2px var(--dusk); }

/* Replay: one small, quiet control under each screen, shown by the script only when motion is allowed. */
.replay { display: inline-flex; align-items: center; gap: 0.375rem; flex: none; min-height: 2.75rem; padding: 0 0.625rem 0 0.375rem; border-radius: 0.625rem; cursor: pointer; background: transparent; color: var(--fg); border: 0; font-weight: 600; font-size: 0.875rem; text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.replay svg { width: 1rem; height: 1rem; }
.replay:hover { background: var(--soft); }
/* Its space is kept whether or not it shows, so nothing below moves when the script arrives. */
.replay { visibility: hidden; }
html.motion .replay:not(.is-off) { visibility: visible; }

/* ---------- The hero invoice ---------- */
@media (max-width: 39.9375em) { .dk-only { display: none !important; } }
.scr--invoice { container: inv / inline-size; }
.inv__head { display: grid; gap: 0.125rem; padding: 0.5rem var(--pad) 0.4375rem; }
.count { display: inline-flex; }
.count__n { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.875rem; font-weight: 600; color: var(--s-muted); text-align: right; }
.count__n svg { width: 0.875rem; height: 0.875rem; }
.count__n--ok { color: var(--s-ok-ink); }
.count__wait { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.875rem; font-weight: 500; color: var(--dusk); margin-left: auto; }
.count__wait svg { width: 0.8125rem; height: 0.8125rem; flex: none; }
.inv__row { padding: 0.5625rem var(--pad); border-top: 1px solid var(--s-hair); display: grid; gap: 0.375rem; }
.inv__name { font-weight: 500; font-size: 0.9375rem; min-width: 0; }
.inv .ln > .inv__name { flex: 1 1 auto; }
.inv .c-amt { font-weight: 600; font-size: 0.9375rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv__sub { font-size: 0.875rem; color: var(--s-muted); }
.inv__row--fold, .inv__row--group { display: none; }
.r-butter .c-st, .r-porcini .c-st { margin-left: auto; }
.inv__ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.625rem; width: 100%; }
/* One width for both states, so the owner's tap never moves anything on the page. */
.sbtn--live { position: relative; cursor: pointer; min-height: 2.75rem; width: 9.5rem; padding: 0 1.25rem 0 0.5rem; font-size: 0.875rem; }
.sbtn--live:hover { background: var(--dusk-hover); }
.sbtn__ok { display: none; position: absolute; right: 0.4375rem; top: 50%; margin-top: -0.46875rem; }
.is-yes .sbtn--live { background: var(--s-ok-bg); color: var(--s-ok-ink); border-color: var(--s-ok-bg); cursor: default; }
.is-yes .sbtn--live .sbtn__ok { display: block; }
.r-porcini .inv__name .matched { display: flex; margin-top: 0.125rem; }
@container inv (max-width: 21rem) { .r-porcini .note svg { display: none; } }
@media (max-width: 39.9375em) {
  .hero__field .scr { --pad: 0.75rem; }
  .hero__field .inv__row { padding-top: 0.4375rem; padding-bottom: 0.4375rem; gap: 0.25rem; }
}
/* Tall phones show the four checked lines as one row; desktop shows them all. */
@media (max-width: 62.4375em) and (min-height: 56.25em) { .hero__field .inv__row--group { display: grid; } }
@media (min-width: 62.5em) {
  .hero__field .inv__row--fold { display: grid; }
  .hero__field .inv__row { min-height: 2.75rem; }
}
/* A laptop's shorter screen: the four checked lines fold into one row, so the waiting line stays in view. */
@media (min-width: 62.5em) and (max-height: 53.6875em) {
  .hero__field .inv__row--fold:not(.inv__row--total):not(:nth-last-child(2)) { display: none; }
  .hero__field .inv__row--group { display: grid; }
}
@media (min-width: 40em) {
  .scr--invoice { --pad: 1.125rem; }
  .scr--invoice .scr__title { font-size: 1.125rem; }
  .inv__row--total .inv__name, .inv__row--total .c-amt { font-weight: 700; }
}
/* The invoice reads as a table only when its card is wide enough for three columns. */
.inv__cols { display: none; }
@container inv (min-width: 31.25rem) {
  .inv__cols, .inv__row { grid-template-columns: minmax(0, 1fr) 5.25rem 11.5rem; column-gap: 0.875rem; align-items: center; }
  .inv__cols, .inv__row:not(.inv__row--fold):not(.inv__row--group) { display: grid; }
  .inv__cols { padding: 0.375rem var(--pad); font-size: 0.875rem; font-weight: 600; color: var(--s-muted); border-top: 1px solid var(--s-hair); }
  .inv .ln { display: contents; }
  .inv .c-amt { text-align: right; }
  .inv__row { row-gap: 0.125rem; }
  .inv__row .c-st { grid-column: 3; justify-self: end; margin: 0; }
  .r-butter .c-st { grid-row: 1 / span 2; }
  .r-butter .chips { flex-direction: column; align-items: flex-end; }
  .inv__sub { grid-column: 1 / 3; }
  .inv__ask { grid-column: 1 / -1; justify-content: flex-start; gap: 0.5rem 1rem; }
  .inv__head .ln { display: flex; }
}

/* ---------- Motion. The finished frame is the plain HTML: no scripts and reduced motion get it.
   With scripts, each scene shows its first frame until it plays; html.land keeps every frame finished. ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-s], .light, .lamp__bulb { transition: opacity 240ms ease-out, transform 420ms var(--ease), clip-path 520ms var(--ease); }
  .swap > *, .yswap > * { transition: opacity 220ms ease-out 90ms, transform 300ms var(--ease) 90ms, visibility 0s linear 90ms; }
  .swap > [data-before], .is-yes .yes-off { transition: opacity 110ms ease-in, transform 110ms ease-in, visibility 0s linear 110ms; }
  .ring, .ring__in { transition: transform 480ms cubic-bezier(0.45, 0.05, 0.3, 1); }
  .tap { transition: transform 420ms var(--ease), opacity 200ms ease-out; }
  .tap__in, .sbtn, .pick, .lrow__st, .sbtn--live { transition: transform 140ms ease-out, background-color 160ms ease-out; }

  html.js:not(.land) [data-play]:not(.is-done) [data-m="rise"]:not(.go) { opacity: 0; transform: translateY(0.875rem); pointer-events: none; }
  html.js:not(.land) [data-play]:not(.is-done) [data-m="pop"]:not(.go) { opacity: 0; transform: scale(0.88); }
  html.js:not(.land) [data-play]:not(.is-done) [data-m="fade"]:not(.go) { opacity: 0; }
  html.js:not(.land) [data-play]:not(.is-done) [data-m="write"]:not(.go) { clip-path: inset(0 100% 0 0); }
  html.js:not(.land) [data-play]:not(.is-done) .ring[data-m="wipe"]:not(.go) { transform: translateX(-101%); }
  html.js:not(.land) [data-play]:not(.is-done) .ring[data-m="wipe"]:not(.go) > .ring__in { transform: translateX(101%); }
  html.js:not(.land) [data-play]:not(.is-done) :is(.swap[data-s]:not(.go), [data-s]:not(.go) .swap) > [data-before] { opacity: 1; visibility: visible; }
  html.js:not(.land) [data-play]:not(.is-done) :is(.swap[data-s]:not(.go), [data-s]:not(.go) .swap) > :not([data-before]) { opacity: 0; visibility: hidden; transform: scale(0.92); }
  [data-m="write"] { transition: clip-path 520ms var(--ease); }
  .tap.on { opacity: 1; }
  .tap.press .tap__in { transform: scale(0.76); }
  .is-pressed { transform: scale(0.96); }
  .snap, .snap *, .snap::before, .snap::after { transition: none !important; }
}

/* ---------- Still night: the old way crossed out, the new way written in ---------- */
.pain { padding: 3.5rem 0 4.5rem; }
.pain__grid { display: grid; gap: 0.5rem; }
.notes + .notes { margin-top: 1.5rem; }
.notes__label { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.375rem; color: var(--muted); }
.notes__list li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--rule); font-weight: 500; font-size: 1.0625rem; line-height: 1.4; }
.notes__list li:last-child { border-bottom: 1px solid var(--rule); }
.notes--before s { color: var(--muted); text-decoration-line: line-through; text-decoration-color: var(--pen); text-decoration-thickness: 3px; }
.notes__tick { flex: none; width: 1.625rem; height: 1.625rem; color: var(--pen); margin-top: -1px; }
@media (min-width: 62.5em) {
  .pain { padding: 2.5rem 0 7rem; }
  .pain__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 4rem; align-items: start; }
  .notes__list li { font-size: 1.25rem; padding: 0.875rem 0; }
}

/* ---------- Still night: the free tool ---------- */
.tool { padding: 0.5rem 0 4.5rem; }
.tool__grid { display: grid; gap: 1.375rem; }
.tool__intro .lede { max-width: 30em; }
.calc { --focus: var(--dusk); background: var(--s-card); color: var(--s-ink); border-radius: 1.125rem; padding: 1rem; display: grid; gap: 1.25rem; box-shadow: var(--shadow-screen); }
.calc > *, .calc__fields > * { min-width: 0; }
.calc__fields { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.375rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.field__label { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; padding: 0; }
.field__box { display: flex; align-items: center; min-height: 3.375rem; border-radius: 0.75rem; border: 1.5px solid var(--s-edge); background: var(--s-card); padding: 0 0.875rem; }
.field__box:focus-within { outline: 3px solid var(--dusk); outline-offset: 2px; }
.field__box input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; outline: none; font-size: 1.25rem; font-weight: 500; padding: 0.625rem 0.375rem; color: var(--s-ink); font-variant-numeric: tabular-nums; }
.field__unit { font-size: 1.25rem; font-weight: 500; color: var(--s-muted); }
.field__box--pct { max-width: 10rem; }
.field__box--pct input { text-align: right; }
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.25rem, 1fr)); gap: 0.5rem; }
.seg label { position: relative; display: block; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 3.375rem; padding: 0.375rem 0.25rem; border-radius: 0.75rem; border: 1.5px solid var(--s-edge); background: var(--s-card); font-weight: 600; font-size: 0.9375rem; line-height: 1.25; }
.seg input:checked + span { background: var(--dusk); color: var(--s-card); border-color: var(--dusk); }
.seg input:focus-visible + span { outline: 3px solid var(--dusk); outline-offset: 2px; }
.calc__out { background: var(--s-sunk); border-radius: 0.875rem; padding: 1.125rem; display: grid; gap: 0.875rem; }
.calc__boxes { display: grid; gap: 1rem; }
.out__label { font-size: 0.9375rem; font-weight: 600; color: var(--s-muted); }
.out__big { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.25rem; min-height: 2.75rem; font-family: var(--display); font-weight: 650; font-variation-settings: "opsz" 28; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; font-size: var(--fs-out, 2rem); line-height: 1.15; margin-top: 0.125rem; }
.out__big output { white-space: nowrap; }
.out__big .arw { font-size: 0.7em; color: var(--s-muted); padding: 0 0.25rem; }
.out.is-empty .out__big, .out.is-empty .out__note { visibility: hidden; }
.ringed--big { margin-left: 0.5rem; }
.ringed--big .ring { inset: -0.4375rem -0.625rem -0.375rem -0.625rem; }
.out.is-empty .ring { display: none; }
.out__note { font-size: 0.9375rem; color: var(--s-muted); }
.calc__msg { min-height: 0; }
.calc__why { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; color: var(--s-ink); border-left: 3px solid var(--s-pen); padding: 0.125rem 0 0.125rem 0.625rem; }
.fine { font-size: 0.875rem; color: var(--s-muted); }
@media (min-width: 23.75em) { .calc { padding: 1.25rem; } }
@media (min-width: 62.5em) {
  .tool { padding: 0 0 7.5rem; }
  .tool__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .calc { padding: 1.75rem; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .calc__out { align-content: start; }
}

/* ---------- The night, then the morning: five moments on Costella's clock ---------- */
.moment { position: relative; padding: 2.5rem 0 3.25rem; }
.moment__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "time" "shot" "text"; }
/* Her diary of the night: the clock time and a topic word, in her hand; her tick lands beside it when done. */
.time { grid-area: time; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; row-gap: 0; font-family: var(--hand); font-weight: 700; font-size: var(--fs-time); line-height: 1.2; color: var(--pen); margin-bottom: 1rem; }
.time time { white-space: nowrap; }
.time__sep { font-size: var(--fs-topic); }
.time__topic { font-size: var(--fs-topic); white-space: nowrap; }
.time__mark { position: relative; align-self: center; width: 1.75rem; height: 1.75rem; flex: none; margin-left: 0.125rem; color: var(--pen); }
.time__mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tm-tick { stroke-dasharray: 34; stroke-dashoffset: 0; }
.tm-dot { display: none; position: absolute; left: 50%; top: 50%; width: 0.625rem; height: 0.625rem; margin: -0.3125rem 0 0 -0.3125rem; border-radius: 50%; border: 2px solid var(--pen); }
.tm-wait { display: none; padding: 0.125rem; }
.moment__shot { grid-area: shot; display: grid; justify-items: stretch; min-width: 0; }
.moment__shot .scr { width: 100%; max-width: 30rem; }
.moment__shot .replay { justify-self: end; margin-top: 0.375rem; }
.moment__text { grid-area: text; padding-top: 0.75rem; }
.moment__text p { font-size: var(--fs-body); line-height: 1.5; max-width: 30em; }
@media (min-width: 37.5em) and (max-width: 62.4375em) { .moment__shot { justify-items: start; } .moment__shot .replay { justify-self: start; } }
/* Phones: a dashed stretch between 11:09 pm and 6:40 am says the hours pass. */
.hours { display: block; width: 0; height: 3rem; margin: 1.75rem 0 -3.25rem calc(50% - 1px); border-left: 2px dashed var(--line); }
.hours--in { margin: -2.5rem 0 1.5rem calc(50% - 1px); }
@media (min-width: 62.5em) {
  .hours { display: none; }
  .moment { padding: 6.5rem 0; }
  .moment__grid { grid-template-columns: 9.5rem minmax(0, 24rem) minmax(0, 1fr); column-gap: 3.25rem; grid-template-areas: "time text shot"; align-items: start; }
  .time { display: grid; justify-items: end; text-align: right; margin: 0; position: relative; row-gap: 0.125rem; }
  .time__sep { display: none; }
  .time__topic { font-size: var(--fs-topic); white-space: normal; }
  /* Costella's clock line runs down the margin through the night; her tick lands on it beside each time. */
  .time__mark { position: absolute; top: calc(var(--fs-time) * 0.6 - 0.875rem); left: calc(100% + 1.625rem - 0.875rem); margin: 0; background: var(--bg); border-radius: 50%; }
  .moment__grid::before, .moment__grid::after { content: ""; position: absolute; left: calc(var(--wrap-pad) + 9.5rem + 1.625rem - 1px); width: 2px; background: var(--pen); }
  .moment__grid::before { top: -6.5rem; height: calc(6.5rem + var(--fs-time) * 0.6 - 1rem); }
  .moment__grid::after { top: calc(var(--fs-time) * 0.6 + 1rem); bottom: -6.5rem; }
  .moment--first .moment__grid::before, .moment--last .moment__grid::after { display: none; }
  /* The hours between 11:09 pm and 6:40 am pass as a dashed line. */
  .moment--last-night .moment__grid::after, .moment--first-light .moment__grid::before { background: none; width: 0; border-left: 2px dashed var(--pen); }
  .moment__text { padding-top: 0.125rem; }
  .moment__shot { justify-items: start; }
  .moment__shot .replay { justify-self: start; margin-top: 0.5rem; }
}
@media (min-width: 62.5em) and (prefers-reduced-motion: no-preference) {
  /* The line fills as the night gets done: unfilled while a block waits its turn. */
  html.js:not(.land) .moment:not(.is-done) .moment__grid::before { background: var(--line); }
  html.js:not(.land) .moment:has(+ .moment:not(.is-done)) .moment__grid::after { background: var(--line); }
  html.js:not(.land) .moment--first-light:not(.is-done) .moment__grid::before,
  html.js:not(.land) .moment--last-night:has(+ .moment:not(.is-done)) .moment__grid::after { background: none; border-left-color: var(--line); }
  .moment__grid::before, .moment__grid::after { transition: background-color 400ms ease-out, border-color 400ms ease-out; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.land) .moment:not(.is-done) .tm-tick { stroke-dashoffset: 34; }
  html.js:not(.land) .moment:not(.is-done) .tm-dot { display: block; }
  html.js:not(.land) .moment:not(.is-done) .tm-wait { display: block; }
  .tm-tick { transition: stroke-dashoffset 480ms var(--ease) 120ms; }
}

/* Rows inside the screens */
.lrow { padding: 0.625rem var(--pad); border-top: 1px solid var(--s-hair); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.375rem 0.625rem; }
.lrow > .ln { flex: 1 1 100%; }
.lrow > .lrow__name { flex: 1 1 auto; }
.lrow__name { font-weight: 500; font-size: 0.9375rem; min-width: 0; }
.lrow__amt { font-weight: 600; font-size: 0.9375rem; }
.lrow__sub { font-size: 0.875rem; color: var(--s-muted); }
.lrow__st { margin-left: auto; display: inline-flex; }
.scr--card { container: card / inline-size; }
/* The 11:09 pm card on a narrow phone: the checked rows drop their amount so each state chip stays on its row. */
@container card (max-width: 22.5rem) { [data-play="lines"] .lrow:not(.lrow--rise) > .lrow__amt { display: none; } }
.mail { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.5rem; padding: 0.75rem var(--pad); border-top: 1px solid var(--s-hair); }
.mail__icon { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; background: var(--s-wait-bg); color: var(--dusk); display: grid; place-items: center; }
.mail__icon svg { width: 1.25rem; height: 1.25rem; }
.mail__body { display: grid; gap: 0.375rem; justify-items: start; }
.mail__subj { font-weight: 600; font-size: 0.9375rem; }
.pdf { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.25rem 0.5rem; border: 1px solid var(--s-hair); border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; }
.pdf svg { width: 0.875rem; height: 0.875rem; color: var(--s-muted); }
.mail__st { grid-column: 2; display: flex; }
.ask { margin: 0.625rem 0.625rem 0.875rem; padding: 0.75rem; border-radius: 0.75rem; background: var(--s-sunk); display: grid; gap: 0.25rem; justify-items: start; }
.ask__title { font-weight: 600; font-size: 0.9375rem; }
.ask__price { font-size: 0.9375rem; }
.ask__price strong { font-weight: 700; }
.ask__uses { color: var(--s-muted); margin-bottom: 0.375rem; }
.match { padding: 0.75rem var(--pad) 1rem; display: grid; gap: 0.75rem; }
.match__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.5rem 0.625rem; }
.match__top .swap { margin-left: auto; }
.match__note { min-height: 1.5rem; }
.pick { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border: 1.5px solid var(--s-edge); border-radius: 0.75rem; font-weight: 600; font-size: 0.9375rem; }
.radio { width: 1.375rem; height: 1.375rem; border-radius: 50%; border: 2px solid var(--s-edge); display: grid; place-items: center; background: var(--s-card); }
.radio--on { border-color: var(--dusk); background: var(--dusk); color: var(--s-card); }
.radio--on svg { width: 0.8125rem; height: 0.8125rem; }
.kv { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.625rem; padding: 0.5625rem var(--pad); border-top: 1px solid var(--s-hair); }
.kv__k { color: var(--s-muted); font-weight: 500; }
.kv__v { font-size: 0.9375rem; }
.kv__v strong { font-weight: 700; }
.kv .swap { margin-left: auto; }
.dl { border-top: 1px solid var(--s-hair); }
.dl__row { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 0.625rem; padding: 0.5625rem var(--pad); border-top: 1px solid var(--s-hair); }
.dl__row:first-child { border-top: 0; }
.dl__name { position: relative; font-weight: 500; font-size: 0.9375rem; min-width: 0; }
.dl__amt { position: relative; font-weight: 600; font-size: 0.9375rem; margin-left: auto; }
.dl__row .swap { position: relative; margin-left: auto; }
.lit { position: absolute; inset: 0; background: var(--s-lit); }
.dl__row--lit .src { color: var(--s-ink); font-weight: 600; }
.sheet { position: relative; margin: 0.5rem 0.625rem 0.75rem; padding: 0.75rem; border-radius: 0.875rem; background: var(--s-card); border: 1px solid var(--s-hair); box-shadow: var(--shadow-sheet); }
.sheet__q { font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.625rem; }
.sheet__btns { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 18.6875em) { .scr { --pad: 0.625rem; } .chip { white-space: normal; } .note, .matched, .sbtn { white-space: normal; } }

/* ---------- The film: one night in 30 seconds, at the top of How it works ----------
   Shown only when scripts run. Eight phone-shaped frames (4:5), each on the ground of its hour: her hand writes the
   time and topic word, the hook sits under it, and one real screen copied from this page fills the rest. One scene
   shows at a time, with clean cuts between grounds; with reduced motion the finished frames sit in a row to swipe. */
.film { display: none; padding: 2.5rem 0 0; }
html.js .film { display: block; }
.film__bar { display: flex; flex-wrap: wrap; }
.film__open { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0.375rem 1.125rem 0.375rem 0.75rem; border-radius: 999px; border: 1.5px solid var(--edge); background: transparent; color: var(--fg); font-weight: 600; font-size: 1rem; line-height: 1.25; text-align: left; cursor: pointer; }
.film__open svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--pen); }
.film__open:hover { background: var(--soft); }
.film__stage { container: fstage / inline-size; width: min(100%, 26rem); margin: 1.25rem auto 0; }
@media (min-width: 62.5em) { .film__stage { width: 27rem; } }
.film__scenes { list-style: none; margin: 0; padding: 0; }
.fs { container: fs / inline-size; display: none; }
.fs.is-now { display: block; }
.fs__frame { position: relative; aspect-ratio: 4 / 5; display: flex; flex-direction: column; padding: 5cqi 4.5cqi 0; border-radius: 6.5cqi; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in oklab, var(--rice) 22%, var(--night)); }
/* Her hand: the time and topic word, and her tick once the scene is done */
.fs__time { display: flex; align-items: center; gap: 0 1.8cqi; font-family: var(--hand); font-weight: 700; font-size: clamp(1.1875rem, 6cqi, 1.625rem); line-height: 1.2; color: var(--pen); white-space: nowrap; }
.fs__time time { display: inline-flex; align-items: baseline; }
.fs__topic { font-size: max(1.1875rem, 0.86em); }
.fs__mark { position: relative; width: 1.15em; height: 1.15em; flex: none; margin-left: 0.6cqi; }
.fs__mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fs__mark .tm-wait { display: none; padding: 0.125em; }
/* The hook: the owner's world in the ground's text colour, her answer in her pen colour. Each half stays whole. */
.fs__hook { margin-top: 1.5cqi; min-height: 2.16em; font-family: var(--display); font-weight: 650; font-variation-settings: "opsz" 28; font-size: clamp(1.5rem, 7cqi, 1.875rem); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; color: var(--fg); }
.fs__hook > span, .fs__hook em { display: inline-block; }
.fs__hook em { font-style: normal; color: var(--pen); }
/* Large text: the halves may wrap, and the frame grows taller so the screen still shows. */
@container fs (max-width: 12em) { .fs__hook > span, .fs__hook em { display: inline; } .fs__time { white-space: normal; flex-wrap: wrap; } .fs__frame { aspect-ratio: 1 / 2; } }
/* The screen: cropped close, running off the frame's foot (or its head, for a screen read from the bottom) */
.fs__shot { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; margin: 3cqi -4.5cqi 0; padding: 1cqi 4.5cqi 0; overflow: hidden; }
.fs__shot > .scr { flex: none; }
.fs__shot--foot { justify-content: flex-end; padding-bottom: 4.5cqi; }
.fs .inv__row--group { display: grid; }
.fs .ring, .fs .ring__in { transition-duration: 900ms; }
/* Scene 8: the close in daylight, "Total due", the button, and the lamp switching off over the finished invoice */
.fs__end { margin-top: 3cqi; }
.fs__due { padding: 2cqi 0 1.8cqi; border-top: 1px solid var(--edge); border-bottom: 4px double var(--edge); font-size: clamp(0.875rem, 4.2cqi, 1.0625rem); font-weight: 600; line-height: 1.35; }
.fs__due b { font-weight: 700; }
.fs__join { display: flex; width: 100%; margin-top: 3cqi; min-height: 2.75rem; }
.fs__shot--lamp { margin-top: 2cqi; }
.fs__shot--lamp .lamp { flex: none; align-self: flex-end; width: 29cqi; height: auto; aspect-ratio: 160 / 82; margin: 0 6cqi 0 0; position: relative; z-index: 1; }
.fs__shot--lamp .scr { margin-top: 3cqi; }
.fs__shot--lamp .light { top: calc(1cqi + 29cqi * 0.5125); left: 2cqi; right: 2cqi; bottom: 0;
  clip-path: polygon(calc(100% - 4cqi - 29cqi * 0.625) 0, calc(100% - 4cqi - 29cqi * 0.125) 0, 100% calc(3cqi + 0.25rem), 100% 100%, 0 100%, 0 calc(3cqi + 0.25rem)); opacity: 0; }
.fs__shot--lamp .lamp__bulb { fill: var(--lamp-shade); }
/* The controls: Pause and Play, Replay at the end, Close, and eight marks for where you are */
.film__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
/* Large text: the marks take their own line under the buttons. */
@container fstage (max-width: 18em) { .film__marks { order: 3; flex-basis: 100%; justify-content: flex-start; margin: 0.25rem 0 0; } }
.film__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; flex: none; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.875rem 0 0.625rem; border-radius: 0.75rem; border: 1.5px solid var(--edge); background: transparent; color: var(--fg); font-weight: 600; font-size: 0.9375rem; cursor: pointer; }
.film__btn:hover { background: var(--soft); }
.film__btn svg { width: 1.125rem; height: 1.125rem; flex: none; }
.film__btn .fb-play, .film.is-paused .film__btn .fb-pause { display: none; }
.film.is-paused .film__btn .fb-play { display: inline; }
.film.is-paused .film__btn svg.fb-play { display: block; }
.film__close { margin-left: auto; }
.film__marks { list-style: none; margin: 0 0 0 0.25rem; padding: 0; display: flex; align-items: center; gap: 0.3125rem; flex: 1 1 auto; justify-content: center; min-width: 0; }
.film__marks li { width: 0.5rem; height: 0.5rem; border-radius: 999px; border: 1.5px solid var(--edge); flex: none; }
.film__marks li.is-past { background: var(--pen); border-color: var(--pen); }
.film__marks li.is-now { width: 1.25rem; background: var(--pen); border-color: var(--pen); }
/* Reduced motion: the eight finished frames in a row to swipe; no autoplay. */
.film--still .film__stage { width: 100%; }
.film--still .film__scenes { display: flex; gap: 0.875rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.25rem 0.125rem 0.75rem; overscroll-behavior-x: contain; }
.film--still .fs { display: block; flex: 0 0 min(86%, 24rem); scroll-snap-align: center; }
.film--still .film__scenes:focus-visible { outline-offset: 2px; }
.film--still .film__pause, .film--still .film__replay { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.land) .fs [data-play]:not(.is-done) .light { opacity: 1; }
  html.js:not(.land) .fs [data-play]:not(.is-done) .lamp__bulb { fill: var(--lamp); }
  .fs .light, .fs .lamp__bulb { transition: opacity 140ms ease-in, fill 140ms ease-in; }
  html.js .fs:not(.is-ticked) .tm-tick { stroke-dashoffset: 34; }
  html.js .fs:not(.is-ticked) .tm-wait { display: block; }
  /* Paused: anything in flight lands at once and the frame holds. */
  .film.is-paused .fs *, .film.is-paused .fs *::before { transition: none !important; }
}
@media (min-width: 62.5em) { .film { padding-top: 4rem; } .film__bar { justify-content: center; } }

/* ---------- Daylight: who made this ---------- */
.about { padding: 5rem 0 6rem; border-top: 1px solid var(--rule); }
.about__grid { display: grid; gap: 3rem; }
.about .lede { margin-bottom: 1.375rem; max-width: 34em; }
/* The honest limit wears the app's own "not sure" mark: a dashed edge. */
.limit { padding: 0.875rem 1rem; border-radius: 0.875rem; border: 1.5px dashed var(--edge); font-size: 1rem; margin-bottom: 1.25rem; max-width: 34em; }
.limit strong { font-weight: 700; }
.textlink { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-weight: 600; text-decoration: none; }
.textlink__t { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--pen); }
.textlink:hover .textlink__t { text-decoration-thickness: 3px; }
/* The photo slot: his photo goes in this frame; the drawn bowl stands in, small. */
.photo { width: 100%; max-width: 13.5rem; aspect-ratio: 1 / 1; border-radius: 1.125rem; background: var(--soft); border: 1.5px solid var(--rule); display: grid; place-items: center; }
.bowl { width: 66%; height: auto; overflow: visible; }
.bowl__steam, .bowl__sticks, .bowl__foot { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bowl__body, .bowl__rim { fill: var(--bg); stroke: var(--fg); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@media (min-width: 62.5em) {
  .about { padding: 7.5rem 0 7rem; }
  .about__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4.5rem; align-items: center; }
  .photo { max-width: 17.5rem; justify-self: center; }
}

/* ---------- Daylight: the path in three steps, one line with three stops ---------- */
.when { padding: 2.5rem 0 8rem; }
.path { position: relative; display: grid; gap: 3rem; padding-left: 2.5rem; margin-top: 1.25rem; }
.path::before { content: ""; position: absolute; left: 0.625rem; top: 0.875rem; bottom: 1.875rem; width: 2px; background: var(--line); }
.path__step { position: relative; }
.path__dot { position: absolute; left: -2.5rem; top: 0.25rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; border: 2px solid var(--edge); background: var(--bg); }
.path__step--now .path__dot { background: var(--btn-bg); border-color: var(--btn-bg); box-shadow: 0 0 0 4px var(--bg); }
.path__t { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.25rem; }
.ringed--word { padding: 0 0.125rem; }
.ringed--word .ring { inset: -0.375rem -0.75rem -0.3125rem -0.625rem; }
.ringed--word .ring__in svg { color: var(--pen); }
.path__p { font-size: var(--fs-body); }
.path__btn { margin-top: 1rem; }
@media (min-width: 62.5em) {
  .when { padding: 1rem 0 7.5rem; }
  .path { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-left: 0; padding-top: 2.75rem; }
  .path::before { left: 0.6875rem; right: 0; top: 0.625rem; bottom: auto; width: auto; height: 2px; }
  .path__dot { left: 0; top: -2.75rem; }
}

/* ---------- Daylight: before you join ---------- */
.faq { padding: 3.5rem 0 6.5rem; }
.faq__grid { display: grid; }
.faq__list { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; padding: 1rem 0.25rem 1rem 0; font-weight: 600; font-size: 1.125rem; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq__chev { flex: none; width: 1.375rem; height: 1.375rem; color: var(--fg); }
.faq details[open] .faq__chev { transform: rotate(180deg); }
.faq details p { padding: 0 0.5rem 1.75rem 0; font-size: var(--fs-body); max-width: 40em; }
@media (min-width: 62.5em) {
  .faq { padding-bottom: 7.5rem; }
  .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .faq summary { font-size: 1.25rem; }
}

/* ---------- Morning: the close. The same invoice in daylight; the lamp switches off. ---------- */
.close { padding: 4rem 0 6.5rem; border-top: 1px solid var(--rule); overflow-x: clip; }
.close__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.close__words { display: contents; }
.close__title { order: 1; } .close__field { order: 2; margin: 0.75rem 0 3rem; } .close__lead { order: 3; } .join { order: 4; }
.close__title { font-size: var(--fs-close); line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 0.75rem; text-wrap: balance; }
.close__lead { font-size: var(--fs-lede); font-weight: 500; margin-bottom: 1.25rem; }
/* "Total due": a double-ruled line, as at the foot of an invoice, above the email field. */
.due { border-top: 1px solid var(--edge); border-bottom: 4px double var(--edge); padding: 0.875rem 0 0.75rem; margin-bottom: 1.25rem; }
.due__line { font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
.due__k { font-weight: 700; }
.due__sub { margin-top: 0.25rem; font-size: 0.9375rem; color: var(--muted); }
.join { max-width: 34rem; text-align: left; }
.join__label { display: block; font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.375rem; }
.join__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.625rem; }
@media (min-width: 35em) { .join__row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; } }
.join input { min-height: 3.5rem; border-radius: 0.875rem; border: 2px solid var(--edge); background: var(--s-card); color: var(--s-ink); padding: 0 0.875rem; font-size: 1.0625rem; min-width: 0; width: 100%; color-scheme: light; }
.join input::placeholder { color: var(--s-muted); }
.join input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.join input[aria-invalid="true"] { border-color: var(--problem); box-shadow: 0 0 0 1px var(--problem); }
.join__btn { min-height: 3.5rem; padding: 0 1.75rem; }
/* The error sits at the field: white words on Problem red, with a mark, on every ground. */
.join__err { display: flex; align-items: center; gap: 0.5rem; width: fit-content; margin-top: 0.5rem; padding: 0.4375rem 0.75rem; border-radius: 0.625rem; background: var(--problem); color: var(--s-card); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.join__err svg { width: 1.125rem; height: 1.125rem; flex: none; }
.join__done:empty { display: none; }
.join__ok { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.5rem 0.875rem; border-radius: 999px; background: var(--s-ok-bg); color: var(--s-ok-ink); font-weight: 600; font-size: 1rem; }
.join__ok svg { width: 1rem; height: 1rem; }
.join__note { margin-top: 0.5rem; font-size: 0.9375rem; }
/* The close's lamp and invoice */
.close__field { --lamp-w: 7rem; --lamp-h: calc(var(--lamp-w) * 0.5125); --cone: 1.75rem; position: relative; display: grid; justify-items: end; max-width: 30rem; }
.close__field .lamp { width: var(--lamp-w); height: var(--lamp-h); margin-right: 1.5rem; }
.close__field .scr { width: 100%; margin-top: var(--cone); }
.close__field .light { top: var(--lamp-h); left: -0.75rem; right: -0.75rem; bottom: -0.75rem;
  clip-path: polygon(calc(100% - 0.75rem - 1.5rem - var(--lamp-w) * 0.625) 0, calc(100% - 0.75rem - 1.5rem - var(--lamp-w) * 0.125) 0, 100% calc(var(--cone) + 0.25rem), 100% 100%, 0 100%, 0 calc(var(--cone) + 0.25rem)); }
.scr--done .inv__head .ln { flex-wrap: wrap; }
.scr--done .inv__row { display: grid; }
/* The finished frame: the lamp is off, its light gone. */
.close__field .light { opacity: 0; }
.close__field .lamp__bulb { fill: var(--lamp-shade); }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.land) .close__field:not(.is-done) .light { opacity: 1; }
  html.js:not(.land) .close__field:not(.is-done) .lamp__bulb { fill: var(--lamp); }
  .close__field .light, .close__field .lamp__bulb { transition: opacity 140ms ease-in, fill 140ms ease-in; }
}
@media (min-width: 62.5em) {
  .close { padding: 7rem 0 8rem; }
  .close__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 5rem; align-items: end; }
  .close__words { display: block; }
  .close__field { margin: 0; }
  .close__title { margin-bottom: 1rem; }
  .close__lead { margin-bottom: 1.75rem; }
  .close__field { --lamp-w: 9.5rem; --cone: 3rem; max-width: none; }
  .due__line { font-size: 1.1875rem; }
}

/* ---------- Footer (daylight) ---------- */
.foot { padding: 4.5rem 0 4.5rem; border-top: 1px solid var(--rule); }
.foot__in { display: grid; gap: 1rem; }
.foot p { font-size: 1rem; line-height: 1.65; max-width: 34rem; text-wrap: pretty; }
.foot .brand--foot { margin-bottom: 0.125rem; font-size: 1.375rem; }
.foot .foot__fine { font-size: 0.875rem; color: var(--muted); max-width: 33rem; }

/* ---------- A small Join on phones, once the hero's button has scrolled away ---------- */
.pill { position: fixed; z-index: 30; right: max(0.75rem, env(safe-area-inset-right)); bottom: max(0.75rem, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.25rem 1.125rem; border-radius: 999px; background: var(--rice); color: var(--night); border: 2px solid var(--night); font-weight: 600; font-size: 0.9375rem; line-height: 1.2; text-decoration: none; text-align: center; max-width: calc(100vw - 1.5rem); box-shadow: 0 6px 18px color-mix(in srgb, var(--night) 30%, transparent); opacity: 0; transform: translateY(0.5rem); pointer-events: none; --focus: var(--dusk); }
.pill.is-on { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) { .pill { transition: opacity 200ms ease-out, transform 240ms var(--ease); } }
@media (min-width: 62.5em) { .pill { display: none !important; } }

/* ---------- The questions page: the same night, read in full ---------- */
.q-head { padding: 1.75rem 0 3rem; }
.q-title { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.025em; margin-bottom: 1rem; }
.q-head .lede { max-width: 34em; margin-bottom: 1.5rem; }
.toc { display: flex; flex-wrap: wrap; gap: 0.5rem 0.625rem; }
.toc a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--edge); font-weight: 600; font-size: 1rem; text-decoration: none; }
.toc a:hover { border-color: var(--pen); }
.q-story { padding: 3rem 0 4.5rem; border-top: 1px solid var(--rule); }
.q-story__in { max-width: 40em; display: grid; gap: 1rem; }
.q-story__in .h2 { margin-bottom: 0.25rem; }
.q-story .limit { margin-bottom: 0; }
.q-stat { display: grid; gap: 0.5rem; padding: 1rem 1.125rem; border-radius: 0.875rem; border: 1.5px solid var(--edge); }
.q-stat a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.9375rem; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--pen); }
.q-sign { font-weight: 600; }
.q-rules { padding: 4rem 0 4.5rem; }
.q-rules .lede { max-width: 36em; margin-bottom: 1.75rem; }
.q-rules__list { display: grid; }
.q-rule { display: grid; gap: 1.125rem; padding: 1.75rem 0; border-top: 1px solid var(--rule); }
.q-rule:last-child { border-bottom: 1px solid var(--rule); }
.q-rule h3 { font-size: var(--fs-h3); line-height: 1.14; letter-spacing: -0.015em; margin-bottom: 0.5rem; }
.q-rule__text p { max-width: 30em; }
.q-rule .scr { width: 100%; max-width: 30rem; }
.q-total .dl__name, .q-total .dl__amt { font-weight: 700; }
.q-sec { padding: 4rem 0 4.5rem; }
.q-faq__lede { margin-bottom: 1.5rem; }
.q-worries { display: grid; border-top: 1px solid var(--rule); }
.q-worry { padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.q-worry h3 { font-weight: 600; font-size: 1.125rem; line-height: 1.35; margin-bottom: 0.5rem; }
.q-worry p { max-width: 40em; }
.q-found { border-top: 1px solid var(--rule); }
.q-found__grid { display: grid; gap: 2rem; }
.q-found .notes__list li { font-size: var(--fs-body); }
.q-signup__h { font-weight: 600; font-size: 1.25rem; line-height: 1.3; margin-bottom: 0.75rem; }
.q-under { margin-top: 0.875rem; font-size: 0.9375rem; color: var(--muted); max-width: 34em; }
.q-journal { border-top: 1px solid var(--rule); }
.q-journal .lede { max-width: 34em; margin-bottom: 1.25rem; }
@media (min-width: 62.5em) {
  .q-head { padding: 3.5rem 0 5rem; }
  .q-story { padding: 5rem 0 7rem; }
  .q-rules { padding: 7rem 0; }
  .q-rule { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; align-items: center; padding: 2.5rem 0; }
  .q-sec { padding: 7rem 0; }
  .q-worry h3 { font-size: 1.25rem; }
  .q-found__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4.5rem; align-items: start; }
}