/* The public site at scenedata.dk.

   Tokens are copied from the app's own stylesheet (the public dark
   theme, the admin's light card, the brand ramp at hue 190, the four chart
   slots, the elevations and the motion curve) so the site and the app read as
   one product. Copied rather than imported: the site is plain static files
   with no build step, and a token that drifts here changes a marketing page,
   never a report.

   No inline style or script anywhere on the page, which is what lets the
   Content-Security-Policy in vercel.json say style-src 'self' and script-src
   'self'. Proportions in the previews are classes for the same reason.

   Most previews are pictures of the app, not controls: a role="img" figure
   that takes no pointer, so nothing drawn as a button in one answers a press.
   Two are the exception. The hero phone works once page.js has run (it is a
   still picture until then), and the overview answers a pointer the way the
   app's own does. */

:root {
  color-scheme: dark;
  --brand-hue: 190;
  /* Text size follows the reader's setting, as in the app: 1 everywhere
     except iOS, where the root takes the Dynamic Type body size. */
  --type-adjust: 1;
  --brand-300: oklch(81.1% 0.088 var(--brand-hue));
  --brand-400: oklch(70.2% 0.110 var(--brand-hue));
  --brand-500: oklch(60.6% 0.105 var(--brand-hue));
  --brand-600: oklch(54.1% 0.093 var(--brand-hue));
  --brand-700: oklch(49.1% 0.085 var(--brand-hue));
  --on-brand: #ffffff;

  --surface: #222120;
  --surface-raised: #2e2d2b;
  --fill: rgb(232 228 214 / 0.09);
  --fill-strong: rgb(232 228 214 / 0.15);
  --thumb: #56544f;
  --ink: #f5f4ef;
  --ink-secondary: #cfcdc4;
  --ink-muted: #a8a69c;
  --ink-subtle: #85837b;
  --line: #44433f;
  --line-strong: #585753;
  --line-subtle: #393835;

  /* The admin's light card and the printed poster, for the paper previews. */
  --paper: #ffffff;
  --paper-ground: #f2f2f7;
  --paper-head: #f9f9fb;
  --paper-ink: #1d1d1f;
  --paper-ink-secondary: #424245;
  --paper-muted: #6e6e73;
  --paper-line: #e5e5ea;
  --paper-line-strong: #d1d1d6;

  /* Fixed, validated for colour-vision separation; never the brand. */
  --chart-1: oklch(54.1% 0.281 293.009);
  --chart-2: oklch(58.8% 0.158 241.966);
  --chart-3: oklch(66.6% 0.179 58.318);
  --chart-4: oklch(70.5% 0.015 286.067);

  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* The app's critically damped curve: things arrive without overshoot. */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);

  --radius-card: 22px;
  /* On the dark ground a card is drawn with light, a lit top edge and a warm
     hairline ring (the app's --elevation-card and --elevation-float); only the
     paper previews, which are light objects, cast a plain shadow. */
  --elevation-card:
    inset 0 1px 0 rgb(255 250 238 / 0.05), 0 0 0 1px rgb(250 245 230 / 0.06),
    0 1px 3px rgb(0 0 0 / 0.24);
  --float:
    inset 0 1px 0 rgb(255 250 238 / 0.08), 0 0 0 1px rgb(250 245 230 / 0.08),
    0 12px 32px rgb(0 0 0 / 0.4);
  --float-paper: 0 0 0 0.5px rgb(0 0 0 / 0.3), 0 18px 50px rgb(0 0 0 / 0.45);
  --glow: radial-gradient(90% 260px at 50% 0, rgb(255 244 222 / 0.08), transparent);
}

/* On an iPhone or iPad `1rem` becomes the reader's Dynamic Type size, and
   `--type-adjust` keeps the default size pixel for pixel what a desktop shows.
   Only text follows it; spacing is in pixels. Same rule as the app. */
@supports (-webkit-touch-callout: none) {
  :root { font: -apple-system-body; font-family: var(--font-sans); line-height: 1.5; --type-adjust: 1.0625; }
}

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

/* At least the viewport tall: the body's pool of light is positioned on the
   root, and a short page (the 404) cut it off in a hard line. */
html { min-height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background-color: var(--surface);
  background-image: radial-gradient(60% 620px at 50% 0, rgb(255 244 222 / 0.075), transparent);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: calc(1.0625rem / var(--type-adjust));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Titles balanced and body text pretty, as the app sets them, so a heading
   never leaves one word on a line of its own. */
h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(calc(2.5rem / var(--type-adjust)), 7vw, calc(4.25rem / var(--type-adjust))); line-height: 1.04; letter-spacing: -0.022em; font-weight: 700; }
h2 { font-size: clamp(calc(1.75rem / var(--type-adjust)), 4vw, calc(2.5rem / var(--type-adjust))); line-height: 1.1; letter-spacing: -0.022em; font-weight: 700; }
h3 { font-size: calc(1.5rem / var(--type-adjust)); line-height: 1.2; letter-spacing: -0.014em; font-weight: 650; }
p { margin: 0; }
p, li, dd { text-wrap: pretty; }
a { color: var(--brand-400); }

/* The platform's focus ring: solid, the light step on the dark ground, and
   drawn as an outline so it follows each element's own radius. */
:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }

.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(680px, 100% - 32px); margin-inline: auto; }
.center { text-align: center; }

/* An uppercase label over a title, the app's `kicker`. */
.kicker { font-size: calc(0.6875rem / var(--type-adjust)); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

/* --- Wordmark: `scene` plain, `data` bold in the tint, as the app draws it. */
.wordmark { font-family: var(--font-display); font-size: calc(1.25rem / var(--type-adjust)); letter-spacing: -0.022em; text-decoration: none; line-height: 1; }
.wordmark.small { font-size: calc(1.125rem / var(--type-adjust)); }
.wm-a { font-weight: 400; color: var(--ink-secondary); }
.wm-b { font-weight: 700; color: var(--brand-400); }

/* --- Buttons: capsules, one filled tint action, and the app's `press`: the
   capsule dips the moment it is pressed, and reduced motion keeps only the
   colour change. Hover only where there is a pointer to hover with, or a tap
   on a phone leaves the button stuck dark. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: calc(1rem / var(--type-adjust)); text-decoration: none;
  transition: transform 120ms ease-out, background-color 150ms ease-out, filter 150ms ease-out;
}
a.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--brand-600); color: var(--on-brand); }
/* The grey capsule drawn at 36px, as the app's secondary buttons are, with a
   hit area reaching 44px, the floor every public target keeps. */
.btn-quiet {
  position: relative; min-height: 36px; padding: 0 16px;
  background: var(--fill); color: var(--brand-300); font-size: calc(0.9375rem / var(--type-adjust));
}
.btn-quiet::before { content: ''; position: absolute; inset: -4px 0; }
@media (hover: hover) {
  a.btn-primary:hover { filter: brightness(0.92); }
  a.btn-quiet:hover { background: var(--fill-strong); }
}
@media (prefers-reduced-motion: reduce) {
  a.btn:active { transform: none; }
}

/* --- Header: translucent chrome the page scrolls under. Its hairline shows
   only once something is under it, as the app's bars draw no edge at rest;
   a browser without scroll timelines keeps the line throughout. */
.top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--line-subtle);
}
.top-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "mark nav cta"; align-items: center; gap: 8px; height: 60px; }
.top-row > .wordmark { grid-area: mark; }
.top-row > .btn { grid-area: cta; }
@keyframes edge { from { border-bottom-color: transparent; } }

/* --- The menu: three plain links beside the one action, each a 44px target.
   The page a link names is marked in ink rather than tint, so it reads as
   where you are rather than somewhere to go. On a phone the links take a
   second row of the bar, which needs no script and hides nothing. */
.nav { grid-area: nav; display: flex; justify-content: flex-end; gap: 4px; margin-right: 12px; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--ink-secondary); text-decoration: none; font-size: calc(0.9375rem / var(--type-adjust)); font-weight: 500;
  border-radius: 999px; transition: color 150ms ease-out, background-color 150ms ease-out;
}
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
@media (hover: hover) {
  .nav a:hover { color: var(--ink); background: var(--fill); }
}

/* --- Hero */
.hero { padding: 72px 0 40px; }

/* A stage plot, the way a tech rider draws one, faint behind the phone and
   again behind the last call to action: lines on the ground, never a
   picture to look at. Behind the call to action the middle is cleared, so the
   plot frames the words rather than running under them. */
.hero { background: url(/stage.svg) no-repeat calc(50% + 350px) 24px / 760px auto; }
.cta { position: relative; isolation: isolate; }
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(/stage.svg) no-repeat 50% 24px / 980px auto;
  --clear: radial-gradient(ellipse 460px 210px at 50% 45%, transparent 55%, #000 100%);
  -webkit-mask-image: var(--clear); mask-image: var(--clear);
}
.hero-grid { display: grid; gap: 56px; align-items: center; grid-template-columns: 1.1fr 0.9fr; }
.eyebrow { color: var(--brand-400); font-size: calc(0.8125rem / var(--type-adjust)); margin-bottom: 16px; }
.lede { font-size: clamp(calc(1.125rem / var(--type-adjust)), 2.2vw, calc(1.3125rem / var(--type-adjust))); color: var(--ink-secondary); margin-top: 20px; max-width: 38ch; }
.actions { margin-top: 32px; }

/* --- Shared by the previews of the public screens: the grouped list. */
.group-list { background: var(--surface-raised); border-radius: 12px; overflow: hidden; box-shadow: var(--elevation-card); }

.chev {
  flex: none; width: 6px; height: 6px; margin-right: 2px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); color: var(--ink-subtle);
}

/* --- Phone preview: the group screen, at about three quarters of its size
   on a phone. The screen is a fixed height and clips, as a real one does, and
   the list runs on under the translucent send bar. */
.phone {
  margin: 0; justify-self: center; width: 320px; padding: 12px;
  border-radius: 50px; background: #0d0d0d;
  box-shadow: 0 0 0 1px #3a3936, var(--float);
  pointer-events: none; user-select: none;
}
.phone-screen {
  position: relative; height: 660px; overflow: hidden;
  border-radius: 40px; background-color: var(--surface); background-image: var(--glow);
}
.ph-body { display: flex; flex-direction: column; gap: 14px; padding: 40px 15px 0; }
.ph-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ph-kicker { font-size: calc(0.5625rem / var(--type-adjust)); color: var(--ink-muted); margin-bottom: 4px; }
.ph-title { font-family: var(--font-display); font-size: calc(1.3125rem / var(--type-adjust)); line-height: 1.2; font-weight: 700; letter-spacing: -0.022em; text-wrap: balance; }
.ph-meta { margin-top: 3px; font-size: calc(0.75rem / var(--type-adjust)); color: var(--ink-muted); }
.ph-lang { flex: none; display: flex; padding: 2px; border-radius: 999px; background: var(--fill); font-size: calc(0.625rem / var(--type-adjust)); letter-spacing: 0.006em; text-transform: uppercase; }
.ph-lang span { display: inline-flex; align-items: center; justify-content: center; min-width: 33px; min-height: 24px; border-radius: 999px; color: var(--ink-secondary); font-weight: 500; }
.ph-lang .on { background: var(--thumb); color: var(--ink); font-weight: 600; box-shadow: var(--elevation-card); }
.ph-intro { margin-top: -4px; font-size: calc(0.75rem / var(--type-adjust)); line-height: 1.55; color: var(--ink-muted); }
.ph-link { margin-top: -6px; display: flex; align-items: center; gap: 5px; font-size: calc(0.75rem / var(--type-adjust)); font-weight: 500; color: var(--brand-400); }
.ph-link .chev { width: 5px; height: 5px; color: inherit; }
.ph-label { margin-bottom: -4px; padding: 0 12px; font-size: calc(0.8125rem / var(--type-adjust)); font-weight: 600; letter-spacing: -0.014em; }
.phone .group-list { border-radius: 10px; }

/* Rows inset their hairline to the text, as on the platform. */
.ph-row, .ph-genders { margin-left: 12px; padding-right: 12px; }
.ph-row { display: flex; align-items: center; justify-content: space-between; min-height: 40px; border-top: 1px solid var(--line); font-size: calc(0.8125rem / var(--type-adjust)); }
.group-list > .ph-row:first-child { border-top: 0; }
.ph-row.open > span:first-child { font-weight: 600; }
.ph-row.open .chev { transform: rotate(135deg); }
.ph-trail { display: flex; align-items: center; gap: 8px; }
.pill {
  padding: 1px 8px; border-radius: 999px; background: color-mix(in oklab, var(--brand-500) 20%, transparent);
  color: var(--brand-300); font-size: calc(0.71875rem / var(--type-adjust)); font-weight: 600; font-variant-numeric: tabular-nums;
}
.ph-genders { padding-bottom: 6px; }
.ph-gender { display: flex; align-items: center; justify-content: space-between; min-height: 42px; border-top: 1px solid var(--line-subtle); font-size: calc(0.71875rem / var(--type-adjust)); color: var(--ink-secondary); }
.ph-step { display: flex; align-items: center; gap: 9px; }
.ph-step b { width: 21px; text-align: right; font-family: var(--font-display); font-size: calc(0.9375rem / var(--type-adjust)); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.ph-step .zero { color: var(--ink-muted); }

/* A number that rolls to its value: three values stacked in a window one line
   tall, resting on the third, so a still page shows the final count. */
.roll { display: inline-block; height: 1.5em; line-height: 1.5; overflow: hidden; vertical-align: top; }
.roll > span { display: block; transform: translateY(-200%); }

/* A stepper as the app draws one: minus and plus in one grey capsule with a
   rule between, the glyphs drawn as bars. */
.stepper { display: flex; align-items: center; border-radius: 999px; background: var(--fill); }
.stepper > span { position: relative; width: 36px; height: 30px; }
.stepper > :is(span, button)::before, .ic-plus::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px;
  border-radius: 1px; background: var(--ink); translate: -50% -50%;
}
.ic-plus::after { width: 1.5px; height: 10px; }
.stepper > .ic-plus { border-radius: 0 999px 999px 0; }
.ic-minus::after { content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 15px; translate: 0 -50%; background: var(--line-strong); }
.ic-minus.off::before { opacity: 0.4; }

.ph-bar {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 9px; padding: 12px 15px 10px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.ph-bar::before {
  content: ''; position: absolute; inset-inline: 0; bottom: 100%; height: 18px;
  background: linear-gradient(to top, color-mix(in oklab, var(--surface) 88%, transparent), transparent);
}
/* The home indicator. */
.ph-bar::after { content: ''; align-self: center; width: 96px; height: 4px; margin-top: 6px; border-radius: 2px; background: rgb(245 244 239 / 0.4); }
.ph-bar p { text-align: center; font-size: calc(0.71875rem / var(--type-adjust)); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ph-cta { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 999px; background: var(--brand-600); color: var(--on-brand); font-weight: 600; font-size: calc(0.8125rem / var(--type-adjust)); }

/* --- The working phone. page.js redraws the screen with real buttons and
   marks the figure `live`; until then everything above is the still picture.
   The body scrolls inside the screen, under the pinned bar, as on a phone. */
.phone.live { position: relative; pointer-events: auto; }
:where(.phone.live) button {
  margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit;
  text-transform: inherit; letter-spacing: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.phone.live :focus-visible { outline-offset: -2px; }
.phone.live .ph-body { height: 100%; overflow-y: auto; scrollbar-width: none; padding-bottom: 170px; }
.phone.live .ph-body > * { flex-shrink: 0; }
/* Clear of the bar's own height, which carries the privacy notice on the two screens that send. */
.phone-screen:is([data-screen='self'], [data-screen='review']) .ph-body { padding-bottom: 260px; }
.phone.live .ph-body::-webkit-scrollbar { display: none; }
.phone.live .ph-title { outline: none; }
.ph-lang button { display: inline-flex; align-items: center; justify-content: center; min-width: 33px; min-height: 24px; border-radius: 999px; color: var(--ink-secondary); font-weight: 500; }
.ph-lang button.on { background: var(--thumb); color: var(--ink); font-weight: 600; box-shadow: var(--elevation-card); }
button.ph-row { width: calc(100% - 12px); text-align: left; }
button.ph-link { align-self: flex-start; }
button.ph-link.ph-link-end { align-self: center; margin: 8px 0 0; text-align: center; }
.stepper > button { position: relative; width: 36px; height: 30px; border-radius: 999px 0 0 999px; }
.stepper > button.ic-plus { border-radius: 0 999px 999px 0; }
.stepper > button:active:not(:disabled), .stepper > .pressed { background: var(--fill-strong); }
.stepper > button:disabled { cursor: default; }
.stepper > button:disabled::before, .ic-plus:disabled::after { opacity: 0.4; }
.ph-cta:disabled { opacity: 0.35; cursor: default; }
.ph-cta[aria-busy='true'] { opacity: 0.7; }
.ph-bar .ph-error { color: oklch(80% 0.11 30); }
.ph-bar .ph-notice { text-align: left; font-size: calc(0.5625rem / var(--type-adjust)); line-height: 1.55; color: var(--ink-secondary); }
.ph-notice span { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-subtle); text-underline-offset: 2px; }
.ph-quiet { display: flex; align-items: center; justify-content: center; min-height: 32px; font-size: calc(0.75rem / var(--type-adjust)); font-weight: 500; color: var(--brand-400); }
.ph-review .ph-row b { font-family: var(--font-display); font-size: calc(0.9375rem / var(--type-adjust)); font-weight: 600; font-variant-numeric: tabular-nums; }
.ph-foot { margin-top: -6px; padding: 0 12px; font-size: calc(0.625rem / var(--type-adjust)); color: var(--ink-muted); }
.ph-foot p:first-child { font-size: calc(0.75rem / var(--type-adjust)); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ph-opt .ph-mark { flex: none; width: 10px; height: 6px; margin-right: 2px; translate: 0 -2px; rotate: -45deg; }
.ph-opt.on .ph-mark { border-left: 2px solid var(--brand-400); border-bottom: 2px solid var(--brand-400); }
.ph-opt.on > span:first-child { font-weight: 600; }

.ph-done { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; padding: 24px 22px 56px; text-align: center; }
.ph-done > p:not(.ph-title) { font-size: calc(0.8125rem / var(--type-adjust)); color: var(--ink-muted); text-wrap: balance; }
.ph-done .ph-title { margin-top: 10px; }
.ph-disc { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--brand-600); color: var(--on-brand); box-shadow: 0 0 70px color-mix(in oklab, var(--brand-500) 45%, transparent); }
.ph-disc svg { width: 32px; height: 32px; }
.ph-done > p.ph-answer { margin-top: 4px; padding: 5px 12px; border-radius: 14px; background: var(--fill); font-size: calc(0.75rem / var(--type-adjust)); color: var(--ink-secondary); }
.ph-gray { margin-top: 12px; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--fill); font-size: calc(0.8125rem / var(--type-adjust)); font-weight: 600; }
.ph-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 16px; padding: 10px 14px;
  border-radius: 12px; background: var(--surface-raised); box-shadow: var(--elevation-card); font-size: calc(0.8125rem / var(--type-adjust)); font-weight: 500; text-align: left;
}
.ph-nav small { display: block; font-size: calc(0.6875rem / var(--type-adjust)); font-weight: 400; color: var(--ink-muted); }
@media (hover: hover) {
  .stepper > button:hover:not(:disabled), .ph-gray:hover { background: var(--fill-strong); }
  button.ph-row:hover, .ph-nav:hover { background: var(--fill); }
}

@keyframes tick { from { translate: 0 35%; opacity: 0.35; } }
@keyframes reveal { from { opacity: 0; translate: 0 -4px; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes draw-check { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
.ph-disc polyline { stroke-dasharray: 16; }
@media (prefers-reduced-motion: no-preference) {
  .phone.live .tick { animation: tick 260ms var(--ease-out-soft); }
  .phone.live .enter { animation: reveal 320ms var(--ease-out-soft) both; }
  .ph-done .ph-disc { animation: rise 420ms var(--ease-out-soft) both; }
  .ph-disc polyline { animation: draw-check 380ms 180ms var(--ease-out-soft) both; }
}

/* --- Sections */
.band { padding: 88px 0; }
.band + .band { border-top: 0.5px solid var(--line-subtle); }
.narrow > p, .step-copy > p { color: var(--ink-secondary); }
.band h2 + p { margin-top: 18px; font-size: calc(1.1875rem / var(--type-adjust)); }
.band h2.center { margin-bottom: 24px; }

.step { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; padding: 48px 0; }
.step-flip { padding: 0; }
.step-copy h3 + p { margin-top: 12px; }
.step-copy .step-n {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--fill); color: var(--brand-300); font-weight: 700; margin-bottom: 16px;
}
.step figure { margin: 0; justify-self: center; width: 100%; max-width: 440px; pointer-events: none; user-select: none; }

.ticks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: baseline; color: var(--ink-secondary); }
.ticks li::before {
  content: ''; flex: none; width: 10px; height: 6px; border-left: 2px solid var(--brand-400);
  border-bottom: 2px solid var(--brand-400); transform: rotate(-45deg) translateY(-3px);
}

/* --- Poster preview: paper, laid out as the venue poster prints. `rotate`
   rather than a transform, so the scroll settle below composes with it. */
.step .poster {
  max-width: 340px; padding: 36px 30px 30px; border-radius: 6px; text-align: center;
  background: var(--paper); color: var(--paper-ink); box-shadow: var(--float-paper); rotate: -1.5deg;
}
.poster-title { font-family: var(--font-display); font-size: calc(2.25rem / var(--type-adjust)); line-height: 1.1; font-weight: 700; letter-spacing: -0.022em; }
.poster-sub { margin: 12px auto 0; max-width: 30ch; font-size: calc(1.0625rem / var(--type-adjust)); line-height: 1.35; color: var(--paper-ink-secondary); text-wrap: balance; }
.poster-qr { display: block; width: 190px; height: 190px; margin: 22px auto 16px; }
.poster-url { font-family: var(--font-mono); font-size: calc(0.8125rem / var(--type-adjust)); color: var(--paper-muted); }

/* --- Review preview: the screen before anything is sent, near its real size. */
.step .screen {
  max-width: 380px; padding: 24px 20px 16px; border-radius: 28px;
  background-color: var(--surface); background-image: var(--glow); box-shadow: var(--float);
}
.rv-kicker { color: var(--ink-muted); }
.rv-title { margin-top: 5px; font-family: var(--font-display); font-size: calc(1.5rem / var(--type-adjust)); line-height: 1.2; font-weight: 700; letter-spacing: -0.022em; }
.rv-meta { margin-top: 3px; font-size: calc(0.875rem / var(--type-adjust)); color: var(--ink-muted); }
.rv-list { margin-top: 20px; }
.rv-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 46px; margin-left: 14px; padding-right: 14px; border-top: 1px solid var(--line);
  font-size: calc(0.9375rem / var(--type-adjust)); color: var(--ink-secondary);
}
.rv-list > .rv-row:first-child { border-top: 0; }
.rv-row b { font-family: var(--font-display); font-size: calc(1.125rem / var(--type-adjust)); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rv-foot { margin-top: 10px; padding: 0 14px; }
.rv-total { font-size: calc(0.875rem / var(--type-adjust)); font-weight: 600; font-variant-numeric: tabular-nums; }
.rv-note { margin-top: 2px; font-size: calc(0.75rem / var(--type-adjust)); color: var(--ink-muted); }
.rv-notice { margin-top: 22px; font-size: calc(0.6875rem / var(--type-adjust)); line-height: 1.6; letter-spacing: 0.006em; color: var(--ink-secondary); }
.rv-policy { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-subtle); text-underline-offset: 2px; }
.rv-send { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 12px; border-radius: 999px; background: var(--brand-600); color: var(--on-brand); font-weight: 600; font-size: calc(0.9375rem / var(--type-adjust)); }
.rv-edit { display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 4px; font-size: calc(0.875rem / var(--type-adjust)); font-weight: 500; color: var(--brand-400); }

/* --- Overview preview: the admin's overview as its dark theme draws it. A
   stage lit from two sides in the tint holds the size of the record and its
   composition; under it, a card per breakdown. Every month is a 100% column
   at one height, with its sample size in the row beneath, never in the
   column's height, and the four categories keep the canonical order and one
   weight: nothing is enlarged or singled out, as in the app. */
.step-wide { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.step-wide .step-copy { max-width: 46ch; }
.step .dash { max-width: none; justify-self: stretch; pointer-events: auto; user-select: auto; }

.dash-stage {
  position: relative; isolation: isolate; overflow: hidden; padding: 40px; border-radius: 32px;
  background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in oklab, var(--brand-400) 22%, transparent), transparent 65%),
    radial-gradient(50% 100% at 0% 100%, color-mix(in oklab, var(--brand-300) 16%, transparent), transparent 70%),
    var(--surface-raised);
  box-shadow: var(--elevation-card);
}
.dash-stage::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: conic-gradient(from 200deg at 90% -15%, transparent 0deg,
    color-mix(in oklab, var(--brand-400) 12%, transparent) 8deg, transparent 18deg, transparent 30deg,
    color-mix(in oklab, var(--brand-300) 9%, transparent) 40deg, transparent 52deg);
}
.dash .kicker { color: var(--ink-muted); }
.dash-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; align-items: end; margin-top: 16px; }
.dash-top > div:first-child { grid-column: span 2; }
.dash-total { font-family: var(--font-display); font-size: clamp(calc(3.5rem / var(--type-adjust)), 9vw, calc(6.25rem / var(--type-adjust))); line-height: 0.9; font-weight: 700; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.dash-sub { margin-top: 12px; font-size: calc(1.125rem / var(--type-adjust)); color: var(--ink-secondary); }
.dash-stats { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0; }
.dash-stats div { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 2px solid var(--ink); }
.dash-stats dd { margin: 0; font-family: var(--font-display); font-size: calc(2.25rem / var(--type-adjust)); line-height: 1.1; font-weight: 700; letter-spacing: -0.022em; font-variant-numeric: tabular-nums; }

.split { display: flex; gap: 2px; overflow: hidden; }
.split-hero { height: 48px; margin-top: 40px; border-radius: 16px; }
.split-thin { height: 12px; margin-top: 8px; border-radius: 999px; }
.dash-key { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 24px; }
.dash-key li { display: flex; flex-direction: column; margin: -8px; padding: 8px; border-radius: 12px; transition: background-color 150ms ease-out; }
.dash-key-label { display: flex; align-items: center; gap: 8px; font-size: calc(0.875rem / var(--type-adjust)); color: var(--ink-secondary); }
.dash-key b { margin-top: 2px; font-family: var(--font-display); font-size: calc(1.875rem / var(--type-adjust)); line-height: 1.2; font-weight: 700; letter-spacing: -0.022em; font-variant-numeric: tabular-nums; }
.dash-key small { font-size: calc(0.75rem / var(--type-adjust)); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.dash-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: calc(0.75rem / var(--type-adjust)); color: var(--ink-muted); }
@media (pointer: coarse) { .dash-hint { display: none; } }

.dash-cards { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; margin-top: 24px; }
.dash-card {
  padding: 28px; border-radius: 28px; min-width: 0;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--brand-500) 5%, transparent), transparent 40%), var(--surface-raised);
  box-shadow: var(--elevation-card);
}
.dash-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 4px 16px; margin-bottom: 24px; }
.dash-card-head > span { font-size: calc(0.75rem / var(--type-adjust)); color: var(--ink-muted); }
.dash-card-title { margin-top: 6px; font-family: var(--font-display); font-size: calc(1.5rem / var(--type-adjust)); line-height: 1.2; font-weight: 600; letter-spacing: -0.014em; }
.dash-caption { margin-top: 16px; font-size: calc(0.75rem / var(--type-adjust)); line-height: 1.5; color: var(--ink-muted); }

.months { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 96px); justify-content: center; }
.month { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 2px 0 4px; border-radius: 8px; transition: background-color 150ms ease-out; }
.col { display: flex; flex-direction: column; gap: 2px; width: calc(100% - 6px); max-width: 56px; height: 176px; border-radius: 6px; overflow: hidden; transform-origin: bottom; }
.vol { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 28px; border-bottom: 1px solid var(--line-strong); }
.vol span { width: 40%; max-width: 20px; border-radius: 4px 4px 0 0; background: var(--line-strong); transform-origin: bottom; transition: background-color 150ms ease-out; }
.month small { font-size: calc(0.6875rem / var(--type-adjust)); line-height: 1.3; color: var(--ink-muted); }

.roles { display: grid; gap: 4px; }
.role { position: relative; margin: 0 -8px; padding: 10px 8px; border-radius: 12px; transition: background-color 150ms ease-out; }
.role p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.role p span { color: var(--ink-secondary); }
.role p b { font-family: var(--font-display); font-size: calc(1.125rem / var(--type-adjust)); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Anchored to its mark rather than following the cursor, one step lighter
   than the card with a hairline edge, as the app's dark theme draws it. */
.tip {
  position: absolute; bottom: 100%; left: 50%; z-index: 2; display: none; width: max-content; max-width: 14rem;
  margin-bottom: 8px; padding: 8px 12px; border-radius: 12px; translate: -50% 0; transform-origin: bottom;
  background: #3a3936; color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong), var(--float);
  font-size: calc(0.75rem / var(--type-adjust)); line-height: 1.4; text-align: left; pointer-events: none;
}
.tip.tip-start { left: 0; translate: none; transform-origin: bottom left; }
.tip.tip-end { left: auto; right: 0; translate: none; transform-origin: bottom right; }
.tip-list { display: block; margin-top: 4px; }
.tip-list span { display: block; font-variant-numeric: tabular-nums; }
.tip i { font-style: normal; color: var(--ink-muted); }
:is(.month, .role):is(:hover, :focus-visible) .tip { display: block; animation: pop 200ms var(--ease-out-soft) both; }
@keyframes pop { from { opacity: 0; transform: scale(0.95); } }
@media (hover: hover) {
  .month:hover, .role:hover, .dash-key li:hover { background-color: var(--fill); }
  .month:hover small { color: var(--ink); }
  .month:hover .vol span { background: var(--ink-subtle); }
}

/* Pointing at a category in the bar or the key dims the other three in every
   chart at once. Emphasis, never filtering: only opacity moves. page.js takes
   the categories in turn the same way, with data-focus. */
[data-charts]:has([data-cat-key='1']:hover) [data-cat]:not([data-cat='1']),
[data-charts]:has([data-cat-key='2']:hover) [data-cat]:not([data-cat='2']),
[data-charts]:has([data-cat-key='3']:hover) [data-cat]:not([data-cat='3']),
[data-charts]:has([data-cat-key='4']:hover) [data-cat]:not([data-cat='4']),
[data-charts][data-focus='1'] [data-cat]:not([data-cat='1']),
[data-charts][data-focus='2'] [data-cat]:not([data-cat='2']),
[data-charts][data-focus='3'] [data-cat]:not([data-cat='3']),
[data-charts][data-focus='4'] [data-cat]:not([data-cat='4']) { opacity: 0.2; }
[data-cat] { transition: opacity 160ms ease-out; }
.dash-key li.lit { background-color: var(--fill); }

/* Before it plays (page.js, and only below the fold): bars and columns wait
   at about 70%, then grow to their full length. */
.dash .split, .dash .col, .dash .vol span { transition: clip-path 900ms var(--ease-out-soft), transform 700ms var(--ease-out-soft); }
.dash.armed .split { clip-path: inset(0 30% 0 0); }
.dash.armed .col, .dash.armed .vol span { transform: scaleY(0.7); }
.dash .split-hero { transition-delay: 200ms; }
.dash .vol span { transition-delay: 120ms, 120ms; }
.month:nth-child(1) .col { transition-delay: 120ms; } .month:nth-child(2) .col { transition-delay: 155ms; }
.month:nth-child(3) .col { transition-delay: 190ms; } .month:nth-child(4) .col { transition-delay: 225ms; }
.month:nth-child(5) .col { transition-delay: 260ms; } .month:nth-child(6) .col { transition-delay: 295ms; }
.role:nth-child(1) .split { transition-delay: 320ms; } .role:nth-child(2) .split { transition-delay: 410ms; }
.role:nth-child(3) .split { transition-delay: 500ms; } .role:nth-child(4) .split { transition-delay: 590ms; }

.c1 { background: var(--chart-1); }
.c2 { background: var(--chart-2); }
.c3 { background: var(--chart-3); }
.c4 { background: var(--chart-4); }

/* Shares (flex weights) and the sample-size bars (a percentage of the
   busiest month), as classes because the CSP forbids style attributes. */
.f3 { flex: 3; } .f4 { flex: 4; } .f5 { flex: 5; } .f6 { flex: 6; } .f7 { flex: 7; } .f17 { flex: 17; } .f23 { flex: 23; }
.f35 { flex: 35; } .f37 { flex: 37; } .f38 { flex: 38; } .f39 { flex: 39; } .f40 { flex: 40; } .f41 { flex: 41; } .f42 { flex: 42; } .f49 { flex: 49; }
.f50 { flex: 50; } .f51 { flex: 51; } .f52 { flex: 52; } .f53 { flex: 53; } .f55 { flex: 55; } .f56 { flex: 56; }
.v47 { height: 47%; } .v67 { height: 67%; } .v76 { height: 76%; } .v87 { height: 87%; } .v97 { height: 97%; } .v100 { height: 100%; }

/* --- Excel preview: the Responses sheet with every column widened to its
   values, so no value is cut inside its cell. A screen too narrow for all
   five shows the sheet's left edge and lets the window cut off the rest, the
   way a spreadsheet always runs past its window. */
.step .sheet { width: fit-content; max-width: 100%; border-radius: 12px; overflow: hidden; background: var(--paper); box-shadow: var(--float-paper); }
.sheet-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--paper-ground); border-bottom: 0.5px solid var(--paper-line); }
.sheet-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--paper-line-strong); }
.sheet-bar p { margin-left: 8px; font-size: calc(0.75rem / var(--type-adjust)); color: var(--paper-muted); }
.sheet table { width: max-content; border-collapse: collapse; font-size: calc(0.75rem / var(--type-adjust)); color: var(--paper-ink); }
.sheet th, .sheet td { padding: 6px 10px; text-align: left; white-space: nowrap; border-right: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.sheet tr > :last-child { border-right: 0; }
.sheet th { font-weight: 600; background: var(--paper-head); }
.sheet-tabs { display: flex; gap: 2px; padding: 0 10px; background: var(--paper-ground); font-size: calc(0.6875rem / var(--type-adjust)); color: var(--paper-muted); }
.sheet-tabs span { padding: 6px 12px; }
.sheet-tabs .on { background: var(--paper); color: var(--paper-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand-600); }

/* --- Privacy facts */
.facts { margin: 32px 0 0; display: grid; background: var(--surface-raised); border-radius: 16px; overflow: hidden; box-shadow: var(--elevation-card); }
.facts div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; padding: 14px 18px; }
.facts div + div { border-top: 0.5px solid var(--line); }
.facts dt { color: var(--ink-muted); }
.facts dd { margin: 0; color: var(--ink); }

/* --- Contact */
.cta { padding-bottom: 104px; }
.cta p { margin-inline: auto; max-width: 46ch; text-wrap: balance; }

.foot { padding: 32px 0 40px; border-top: 0.5px solid var(--line-subtle); }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: calc(0.9375rem / var(--type-adjust)); }
.foot a { color: var(--ink-muted); text-decoration: none; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 16px; font-size: calc(0.875rem / var(--type-adjust)); }
.foot-nav a { display: inline-flex; align-items: center; min-height: 32px; }
.foot-legal { margin-top: 16px; font-size: calc(0.8125rem / var(--type-adjust)); color: var(--ink-subtle); }
@media (hover: hover) {
  .foot a:hover { color: var(--ink); }
}

/* --- The pages behind the menu: a title, then one column of reading. */
.page-head { padding: 72px 0 8px; }
.page-head h1 { font-size: clamp(calc(2.25rem / var(--type-adjust)), 6vw, calc(3.5rem / var(--type-adjust))); }
.page-head .lede { max-width: 52ch; }
.prose { padding: 32px 0 72px; }
.prose section + section { margin-top: 56px; }
.prose + .band { border-top: 0.5px solid var(--line-subtle); }
.prose h2 { font-size: clamp(calc(1.5rem / var(--type-adjust)), 3vw, calc(1.875rem / var(--type-adjust))); }
.prose h2 + p, .prose h2 + .facts, .prose h2 + .ticks, .prose h2 + .faq { margin-top: 16px; }
.prose p { color: var(--ink-secondary); }
.prose p + p, .prose p + .ticks, .prose .ticks + p, .prose .facts + p { margin-top: 14px; }
.prose code { font-family: var(--font-mono); font-size: 0.95em; color: var(--ink); }
.more { margin-top: 24px; }
.more a { font-weight: 600; text-decoration: none; }
@media (hover: hover) {
  .more a:hover { text-decoration: underline; }
}

/* Questions as the platform's disclosure rows in one grouped card: the
   chevron turns down when a row opens. A native element, so it opens without
   script and the browser's find opens a row it matches. */
.faq { background: var(--surface-raised); border-radius: 16px; overflow: hidden; box-shadow: var(--elevation-card); }
.faq details + details { border-top: 0.5px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 12px 18px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { transition: transform 200ms var(--ease-out-soft); }
.faq details[open] summary .chev { transform: rotate(135deg); }
.faq details > p { padding: 0 18px 16px; color: var(--ink-secondary); }
.faq details > p + p { margin-top: -6px; }
@media (hover: hover) {
  .faq summary:hover { background: var(--fill); }
}
@media (prefers-reduced-motion: reduce) {
  .faq summary .chev { transition: none; }
}

/* --- Motion, on screen only. The hero arrives once, line by line and then
   the phone, a cross-fade under reduced motion. Once the phone has landed,
   someone counts on it: two taps on Female's plus, and the three numbers roll
   up to the values the still picture shows. Stacked on a phone, the preview
   starts below the fold, so there the count follows the scroll instead.

   Further down, the previews settle into place as they scroll in, the copy
   beside them by less, so the two read as layers, and the poster swings onto
   the wall. All of it is driven by the scroll itself, so it follows the
   reader's hand both ways. It moves and never fades: content that waits at
   zero opacity for a scroll is blank in a full-page capture and on paper. */
@keyframes arrive { from { opacity: 0; transform: translateY(16px); } }
@keyframes arrive-phone { from { opacity: 0; transform: translateY(28px) scale(0.97); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes settle { from { translate: 0 40px; scale: 0.96; } }
@keyframes lift { from { translate: 0 20px; } }
@keyframes pin { from { rotate: -5deg; } }
@keyframes drift { to { translate: 0 -40px; } }

/* The count: a press on 0%, the second on 50%, each number rolling one step
   after each press on the app's curve. */
@keyframes count {
  0%, 2% { transform: translateY(0); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  26%, 52% { transform: translateY(-100%); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  76%, 100% { transform: translateY(-200%); }
}
@keyframes press {
  0%, 30%, 50%, 80%, 100% { background-color: transparent; }
  2%, 52% { background-color: var(--fill-strong); }
}
@keyframes wake {
  0%, 2% { opacity: 0.4; }
  12%, 100% { opacity: 1; }
}

@media screen and (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: arrive 700ms var(--ease-out-soft) both; }
  .hero-copy > :nth-child(2) { animation-delay: 70ms; }
  .hero-copy > :nth-child(3) { animation-delay: 140ms; }
  .hero-copy > :nth-child(4) { animation-delay: 210ms; }
  .phone { --phone-arrival: arrive-phone 900ms var(--ease-out-soft) 200ms both; animation: var(--phone-arrival); }

  .phone .roll > span { animation: count 1400ms linear 1300ms both; }
  .tapped .ic-plus { animation: press 1400ms ease-out 1300ms both; }
  .tapped .ic-minus::before { animation: wake 1400ms ease-out 1300ms both; }

  @supports (animation-timeline: view()) {
    .step figure, .step-copy {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    .step-copy { animation-name: lift; }
    .step .poster { animation-name: settle, pin; }

    /* Stacked, the count plays as Female's row scrolls into view, and the
       poster stays square, as it rests there, and inside the column. */
    @media (max-width: 820px) {
      .phone { view-timeline: --phone; }
      .phone .roll > span, .tapped .ic-plus, .tapped .ic-minus::before {
        animation-duration: auto;
        animation-delay: 0s;
        animation-timeline: --phone;
        animation-range: entry 65% entry 100%;
      }
      .step .poster { animation-name: settle; }
    }
  }
  /* Side by side, the phone rides slightly ahead of the page as it scrolls
     away. Stacked, it sits under the button and would climb onto it. */
  @supports (animation-timeline: scroll()) {
    @media (width > 820px) {
      .phone {
        animation: var(--phone-arrival), drift linear both;
        animation-timeline: auto, scroll();
        animation-range: normal, 0 100vh;
      }
    }
  }
}
@media screen and (prefers-reduced-motion: reduce) {
  .hero-copy, .phone { animation: fade-in 420ms var(--ease-out-soft) both; }
}
/* A colour change tied to the scroll, not a movement, so reduced motion keeps it. */
@media screen {
  @supports (animation-timeline: scroll()) {
    .top {
      animation: edge linear both;
      animation-timeline: scroll();
      animation-range: 0 48px;
    }
  }
}

/* Less transparency or more contrast: solid chrome with a defined edge. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .top { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--line-strong); animation: none; }
  .ph-bar { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--line-strong); }
  .ph-bar::before { content: none; }
}
@media (prefers-contrast: more) {
  body, .phone-screen, .step .screen { background-image: none; }
}

/* Forced colours erase a tint, a fill and a weight change alike: the buttons
   and the bars keep an edge in the system's own colours, the selected
   segment takes its selection colours, and the charts keep their own, since
   without them the overview preview is an empty frame. */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .top { border-bottom: 1px solid CanvasText; animation: none; }
  .ph-bar { border-top: 1px solid CanvasText; }
  .ph-lang .on { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .split, .col, .dot, .vol span { forced-color-adjust: none; }
}

/* An anchor the menu jumps to lands below the bar rather than under it. */
section[id] { scroll-margin-top: 60px; }

/* --- Phone width */
@media (max-width: 820px) {
  .top-row { grid-template-columns: 1fr auto; grid-template-areas: "mark cta" "nav nav"; row-gap: 0; height: auto; padding-top: 10px; }
  .nav { justify-content: flex-start; margin: 0 0 0 -12px; }
  section[id] { scroll-margin-top: 104px; }
  .page-head { padding-top: 48px; }
  .hero { padding-top: 48px; }
  .hero-grid, .step { grid-template-columns: 1fr; gap: 36px; }
  .band { padding: 64px 0; }
  .step { padding: 32px 0; }
  .step .poster { rotate: none; }
  .sheet table { font-size: calc(0.6875rem / var(--type-adjust)); }
  .sheet th, .sheet td { padding: 6px 5px; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
  .hero { background-size: 640px auto; background-position: 50% calc(100% - 20px); }
  .cta::before { background-size: 720px auto; --clear: radial-gradient(ellipse 240px 260px at 50% 45%, transparent 50%, #000 100%); }
  .dash-stage { padding: 24px; border-radius: 28px; }
  .dash-top, .dash-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-cards { grid-template-columns: minmax(0, 1fr); }
  .dash-card { padding: 22px; }
  .col { height: 140px; }
}
@media (max-width: 380px) {
  .phone { width: 100%; }
  a.btn-primary { width: 100%; }
}

/* --- Print: ink on paper. The page's dark ground does not print by default,
   which left light text on white, so the tokens take the paper values and the
   previews print as drawn. */
@media print {
  :root {
    color-scheme: light;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --fill: rgb(118 118 128 / 0.12);
    --fill-strong: rgb(118 118 128 / 0.2);
    --thumb: #ffffff;
    --ink: #1d1d1f;
    --ink-secondary: #424245;
    --ink-muted: #6e6e73;
    --ink-subtle: #8e8e93;
    --line: #e5e5ea;
    --line-strong: #d1d1d6;
    --line-subtle: #efeff4;
    --brand-300: oklch(49.1% 0.085 var(--brand-hue));
    --brand-400: oklch(49.1% 0.085 var(--brand-hue));
    --elevation-card: 0 0 0 0.5px rgb(0 0 0 / 0.15);
    --float: 0 0 0 0.5px rgb(0 0 0 / 0.15);
    --float-paper: 0 0 0 0.5px rgb(0 0 0 / 0.3);
    --glow: none;
  }
  body { background-image: none; }
  .top { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  figure { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .step, figure, .facts { break-inside: avoid; }
  .dash.armed .split { clip-path: none; }
  .dash.armed .col, .dash.armed .vol span { transform: none; }
  .hero { background-image: none; }
  .cta::before { display: none; }
  .nav, .top .btn, .foot-nav { display: none; }
  .faq details::details-content { content-visibility: visible; }
  .faq summary .chev { display: none; }
}

/* --- 404 */
.center-lede { margin-inline: auto; text-wrap: balance; }