/* The usescene.app website (spec 0129; the home page redesigned in spec 0130, refined in 0131). Tokens from
   docs/product/design-system.md. Edit here, then run `pnpm site:sync`, which fingerprints this file
   and the font it names, and writes the rating demo's summary rules at the marker below.
   Everything works without JavaScript; theme.js remembers the theme switch's choice, and site.js
   adds the demo's steps, the Couch mode button, the count-up, the form's fetch, and the counts. */

@font-face {
  font-family: "Fraunces Display";
  src: url("/site/fraunces-display.e7701dd28c.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Each palette once; the theme rules below only choose one (spec 0129 revision: System, Light, Dark). */
:root {
  --light-canvas: #F7F8FA;
  --light-surface: #FFFFFF;
  --light-text-primary: #17202B;
  --light-text-secondary: #52606D;
  --light-accent: #B44D3D;
  --light-accent-soft: #F7EDEC;
  --light-on-accent: #FFFFFF;
  --light-tertiary: #2F6F73;
  --light-divider: #E2E8EC;
  --light-control-outline: #CBD6DC;
  --light-shadow: rgba(23, 32, 43, 0.28);
  --light-frame: #17202B;

  --dark-canvas: #111821;
  --dark-surface: #1B2530;
  --dark-text-primary: #F3F5F7;
  --dark-text-secondary: #B4C1CB;
  --dark-accent: #F2A58C;
  --dark-accent-soft: #39373D;
  --dark-on-accent: #111821;
  --dark-tertiary: #7FC4C0;
  --dark-divider: #394857;
  --dark-control-outline: #637484;
  --dark-shadow: rgba(0, 0, 0, 0.6);
  --dark-frame: #05080C;

  --display: "Fraunces Display", Georgia, "Times New Roman", serif;
  --radius: 1rem;

  /* Spec 0131's spacing and type, used instead of one-off values: phones first, then 768 px and
     1,024 px and up. */
  --page-max: 72rem;
  --text-max: 36rem;
  --h1: clamp(2.375rem, 1.4rem + 3.2vw, 4rem);
  --h2: 1.875rem;
  --body: 1rem;
  --section-gap: 3.5rem;
  --card-pad: 1.125rem;
  --grid-gap: 1rem;
  --gutter: 1.25rem;
}
@media (min-width: 48rem) {
  :root { --h2: 2.25rem; --body: 1.0625rem; --section-gap: 4rem; --card-pad: 1.5rem; --grid-gap: 1.25rem; --gutter: 2rem; }
}
@media (min-width: 64rem) {
  :root { --h2: 2.625rem; --body: 1.125rem; --section-gap: 5.5rem; --card-pad: 1.75rem; --grid-gap: 1.5rem; }
}

/* Light: the default, and the Light choice. */
:root {
  color-scheme: light;
  --canvas: var(--light-canvas);
  --surface: var(--light-surface);
  --text-primary: var(--light-text-primary);
  --text-secondary: var(--light-text-secondary);
  --accent: var(--light-accent);
  --accent-soft: var(--light-accent-soft);
  --on-accent: var(--light-on-accent);
  --tertiary: var(--light-tertiary);
  --divider: var(--light-divider);
  --control-outline: var(--light-control-outline);
  --shadow: var(--light-shadow);
  --frame: var(--light-frame);
}

/* Dark: System on a dark device (no saved choice), and the Dark choice, saved (data-theme, from
   theme.js) or just checked (:has, without JavaScript). Separate rules, so a browser without :has()
   still follows the device and the saved choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --canvas: var(--dark-canvas);
    --surface: var(--dark-surface);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --accent: var(--dark-accent);
    --accent-soft: var(--dark-accent-soft);
    --on-accent: var(--dark-on-accent);
    --tertiary: var(--dark-tertiary);
    --divider: var(--dark-divider);
    --control-outline: var(--dark-control-outline);
    --shadow: var(--dark-shadow);
    --frame: var(--dark-frame);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: var(--dark-canvas);
  --surface: var(--dark-surface);
  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --accent: var(--dark-accent);
  --accent-soft: var(--dark-accent-soft);
  --on-accent: var(--dark-on-accent);
  --tertiary: var(--dark-tertiary);
  --divider: var(--dark-divider);
  --control-outline: var(--dark-control-outline);
  --shadow: var(--dark-shadow);
  --frame: var(--dark-frame);
}
:root:not([data-theme]):has(#theme-dark:checked) {
  color-scheme: dark;
  --canvas: var(--dark-canvas);
  --surface: var(--dark-surface);
  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --accent: var(--dark-accent);
  --accent-soft: var(--dark-accent-soft);
  --on-accent: var(--dark-on-accent);
  --tertiary: var(--dark-tertiary);
  --divider: var(--dark-divider);
  --control-outline: var(--dark-control-outline);
  --shadow: var(--dark-shadow);
  --frame: var(--dark-frame);
}
/* Light chosen without JavaScript on a dark device. */
:root:not([data-theme]):has(#theme-light:checked) {
  color-scheme: light;
  --canvas: var(--light-canvas);
  --surface: var(--light-surface);
  --text-primary: var(--light-text-primary);
  --text-secondary: var(--light-text-secondary);
  --accent: var(--light-accent);
  --accent-soft: var(--light-accent-soft);
  --on-accent: var(--light-on-accent);
  --tertiary: var(--light-tertiary);
  --divider: var(--light-divider);
  --control-outline: var(--light-control-outline);
  --shadow: var(--light-shadow);
  --frame: var(--light-frame);
}

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

/* `hidden` always wins, even over a component's own display (the Couch mode button). */
[hidden] { display: none !important; }

html {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--canvas);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* iOS Safari: follow the iPhone's text size (Dynamic Type). */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text-primary);
  font-size: var(--body);
  line-height: 1.6;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 0.12em; }

:focus-visible {
  outline: 0.1875rem solid var(--accent);
  outline-offset: 0.1875rem;
  border-radius: 0.25rem;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h2 { font-size: var(--h2); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; text-wrap: pretty; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  color: var(--text-primary);
  border: 0.125rem solid var(--accent);
  border-radius: 0.5rem;
  z-index: 10;
}
.skip:focus { top: var(--gutter); }

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.small { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; }

/* Scene's drawn icons (design/site/icons): stroked in the accent, on a soft accent tile. */
.mark {
  display: block;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
  background: var(--accent-soft);
  color: var(--accent);
  overflow: visible;
}

/* Header */
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-right: auto;
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.375rem;
}
.brand img { width: 2rem; height: 2rem; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--divider); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text-primary); }
.site-nav a[aria-current="page"] { color: var(--accent); }

/* The theme switch: a radio group drawn as a small segmented control (spec 0132). Each choice is
   drawn 1.75 rem tall, but its radio reaches 0.5 rem above and below, so the target stays 44 px. */
.theme-switch {
  display: inline-flex;
  margin: 0;
  padding: 0.125rem;
  gap: 0.125rem;
  border: 0.0625rem solid var(--control-outline);
  border-radius: 999px;
  background: var(--surface);
  min-width: 0;
}
.theme-switch label { position: relative; display: inline-flex; }
.theme-switch input {
  position: absolute;
  inset: -0.5rem 0;
  width: 100%;
  height: calc(100% + 1rem);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.theme-switch span {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  min-width: 2.75rem;
  justify-content: center;
  padding: 0 0.625rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.theme-switch input:checked + span { background: var(--accent); color: var(--on-accent); }
.theme-switch input:focus-visible + span { outline: 0.1875rem solid var(--accent); outline-offset: 0.125rem; }
.theme-switch input:hover:not(:checked) + span { color: var(--text-primary); }

/* Buttons: the main one filled in the accent; a quiet one is text. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
}
.button:hover { text-decoration: none; box-shadow: 0 0 0 0.1875rem var(--accent-soft); }
.button:disabled { opacity: 0.7; cursor: progress; }
.button-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

/* The App Store link: a badge in Scene's inks (never Apple's artwork; see design/site/README.md). */
.store-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.375rem 1.25rem 0.4375rem;
  border-radius: 0.75rem;
  background: var(--text-primary);
  color: var(--canvas);
  text-decoration: none;
  line-height: 1.15;
  text-align: left;
}
.store-badge .small { font-size: 0.75rem; font-weight: 500; color: inherit; line-height: 1.15; }
.store-badge .big { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; }
.store-badge:hover { text-decoration: none; box-shadow: 0 0 0 0.1875rem var(--accent-soft); }
/* Spec 0130: once the App Store listing is live, "Get Scene" is the main button, in the accent. */
.store-badge.get-scene { align-items: center; background: var(--accent); color: var(--on-accent); padding-left: 1.5rem; padding-right: 1.5rem; }

/* Hero (spec 0130, section 2; resized in spec 0131): the label, the headline, the line, one obvious
   way in, and the phones. Clipped sideways, so the side phones never widen the page. */
.hero { display: grid; gap: 2rem; padding: 1.5rem 0 0; text-align: center; overflow-x: clip; }
.hero-label { margin: 0 0 0.5rem; font-weight: 700; color: var(--accent); }
.hero h1 { font-size: var(--h1); line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 0.875rem; }
.hero .lede { max-width: var(--text-max); margin: 0 auto 1.5rem; font-size: 1.125rem; color: var(--text-secondary); }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1rem; margin: 0; }
/* Spec 0134: how to get in, two short lines (three in the private beta), under the hero's buttons
   and in Join Scene; small, so the buttons stay above the fold. */
.how-in { max-width: 30rem; margin: 0.875rem auto 0; font-size: 0.875rem; line-height: 1.45; color: var(--text-secondary); }
.how-in p { margin: 0 0 0.25rem; }
.how-in strong { color: var(--text-primary); }
#get-in > .how-in { margin: -0.5rem auto 1.25rem; }
/* Spec 0134: "Coming soon" under each App Store badge until the listing is live, outside the link. */
.store-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 0.125rem; vertical-align: top; }
.store-soon { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); line-height: 1.2; }
.hero-actions .actions.store { margin-top: 1rem; }

/* The three phones, overlapping: Discover in front, Rankings behind on the left, Couch mode on the
   right, in a drawn frame (CSS only, no Apple artwork). On a phone Discover is 240 px wide and the
   side ones (at most 190 px) tuck behind it, a quarter of each showing. Widths match
   site-build.ts's PHONE_SIZES; each frame's image has its width and height, so nothing shifts. */
.phones { display: grid; justify-items: center; align-items: start; width: 100%; max-width: 32rem; margin: 0 auto; }
.phone {
  grid-area: 1 / 1;
  margin: 0;
  padding: 0.3125rem;
  border-radius: 2rem;
  background: var(--frame);
  box-shadow: 0 0 0 0.0625rem var(--divider), 0 1.5rem 3rem -1.5rem var(--shadow);
}
.phone img { width: 100%; vertical-align: top; border-radius: 1.6875rem; }
.phone-front { z-index: 2; width: min(15rem, 100%); }
.phone-left, .phone-right { z-index: 1; width: min(11.875rem, 50%); margin-top: 2.5rem; }
.phone-left { justify-self: start; transform: rotate(-4deg); }
.phone-right { justify-self: end; transform: rotate(4deg); }
@media (prefers-reduced-motion: no-preference) {
  .phone { animation: phone-rise 400ms ease-out both; }
  .phone-left, .phone-right { animation-delay: 60ms; }
}
@keyframes phone-rise {
  from { opacity: 0; translate: 0 1rem; }
  to { opacity: 1; translate: 0 0; }
}

/* A light and a dark copy of each screenshot: the light one in light, the dark one in dark. The other
   is display: none, so it's out of the accessibility tree and, being lazy, never downloaded. Same
   rules as the tokens. */
img.dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) img.light { display: none; }
  :root:not([data-theme]) img.dark { display: block; }
}
:root[data-theme="dark"] img.light { display: none; }
:root[data-theme="dark"] img.dark { display: block; }
:root:not([data-theme]):has(#theme-dark:checked) img.light { display: none; }
:root:not([data-theme]):has(#theme-dark:checked) img.dark { display: block; }
:root:not([data-theme]):has(#theme-light:checked) img.light { display: block; }
:root:not([data-theme]):has(#theme-light:checked) img.dark { display: none; }

/* The six parts (spec 0131): each starts one section gap below the last. */
/* Spec 0133: each part's space is one gap, the next part's own padding, so two never stack. The
   demo and the Discovery and Couch mode row get a little more; More to explore three-quarters. */
.home > section, .home > .duo, .home > .more, .home > .cta-final { margin-top: 0; padding-top: var(--section-gap); }
.home > #try-it, .home > .duo { padding-top: calc(var(--section-gap) + 1rem); }
.home > .more { padding-top: calc(var(--section-gap) * 0.75); }
.home > :last-child { padding-bottom: calc(var(--section-gap) * 0.5); }
main section > h2 { font-size: var(--h2); text-align: center; margin-bottom: 0.625rem; }
.lead { max-width: var(--text-max); margin: 0 auto 1.5rem; text-align: center; font-size: 1.0625rem; color: var(--text-secondary); }

/* Screenshots in a plain rounded frame with a soft shadow. */
.shot { margin: 0; }
.shot img {
  width: 100%;
  vertical-align: top;
  border-radius: 1.5rem;
  box-shadow: 0 0 0 0.0625rem var(--divider), 0 1.25rem 2.5rem -1.25rem var(--shadow);
}

/* Join Scene's button when there's no form (TestFlight and the App Store). */
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; margin: 0; }

/* 2. Experience Scene: the rating demo (spec 0130, section 3; spec 0131, section 3). Radios, and
   :has() scoped to the demo's form; with JavaScript, one pair at a time in one fixed area. */
.demo { width: 100%; max-width: 36rem; margin: 0 auto; }
.demo-note { text-align: center; margin: 0.75rem 0 0; }
.pair { min-width: 0; margin: 0 0 1rem; padding: var(--card-pad); border: 0; border-radius: 1.5rem; background: var(--surface); }
.progress { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); }
.dots { display: inline-flex; gap: 0.25rem; }
.dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--control-outline); }
.dot.on { background: var(--accent); }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.film { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.375rem 0.25rem; border-radius: 1rem; text-align: center; cursor: pointer; }
.film input, .skip-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* A fixed 2:3 box, 150 px on phones and 180 on wide screens (site-build.ts's POSTER_SIZES). */
.film img {
  width: 9.375rem;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 0.75rem;
  background: var(--accent-soft);
  box-shadow: 0 0 0 0.0625rem var(--divider), 0 0.75rem 1.5rem -1rem var(--shadow);
  transition: transform 200ms ease, opacity 200ms ease, box-shadow 200ms ease;
}
.film-name { display: block; line-height: 1.3; }
.film-title { display: block; font-weight: 600; }
.film-year { display: block; font-size: 0.875rem; color: var(--text-secondary); }
.film:hover img, .film input:focus-visible ~ img { transform: translateY(-0.125rem); box-shadow: 0 0 0 0.1875rem var(--accent), 0 1rem 2rem -1rem var(--shadow); }
.film input:focus-visible ~ img { outline: 0.1875rem solid var(--accent); outline-offset: 0.25rem; }
.film input:checked ~ img { transform: translateY(-0.125rem); box-shadow: 0 0 0 0.1875rem var(--accent), 0 1rem 2rem -1rem var(--shadow); }
.film input:checked ~ .film-name .film-title { color: var(--accent); }
/* The chosen poster's ring, for the 250 ms before the next pair (site.js). */
.film.is-chosen img { box-shadow: 0 0 0 0.3125rem var(--accent), 0 1rem 2rem -1rem var(--shadow); }
.skip-choice { position: relative; grid-column: 1 / -1; justify-self: center; display: inline-flex; }
.skip-choice span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 0.0625rem solid var(--control-outline);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.skip-choice input:checked + span, .skip-choice.is-chosen span { background: var(--accent-soft); border-color: var(--accent); color: var(--text-primary); }
.skip-choice input:focus-visible + span { outline: 0.1875rem solid var(--accent); outline-offset: 0.125rem; }
.response { margin: 0.875rem 0 0; text-align: center; font-weight: 500; }
.summary { padding: 0.875rem; border-radius: 1.5rem; background: var(--accent-soft); text-align: center; }
/* The ending's button at the 44-px target, a little smaller than the page's main buttons. */
.summary .button { min-height: 2.75rem; padding: 0.5rem 1.25rem; }
.summary:focus-visible { outline-offset: 0.25rem; border-radius: 1.5rem; }
/* Spec 0133's ending: the headline, the chosen films' posters (only the checked ones; never
   numbered), the line, the button, and Start again. Each poster is never more than a third of the
   row, so three always fit with real gaps: 72 px on phones (so the ending is never taller than a
   pair at 375 px; 96 px made it 68 px taller), 120 px wider up. */
.eyebrow { margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.ending-title { margin: 0 0 0.5rem; font-size: 1.125rem; line-height: 1.25; }
.ending-picks { margin: 0 0 0.5rem; }
.chosen { display: flex; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.chosen li { display: none; flex: none; width: min(4.5rem, calc((100% - 1rem) / 3)); }
.chosen img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; vertical-align: top; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--divider), 0 0.5rem 1rem -0.75rem var(--shadow); }
.nothing { display: none; margin: 0; color: var(--text-secondary); }
.ending { max-width: 30rem; margin: 0 auto 0.75rem; font-size: 0.875rem; line-height: 1.45; color: var(--text-secondary); }
.summary .actions { margin-bottom: 0.25rem; }
.again { margin: 0; }

/* Without JavaScript: with :has(), the next pair appears once one is answered (answered ones stay),
   each with its response, and the ending once all three are. Scoped to the demo's form, never the
   page (the theme switch always has a checked radio). Without :has(), every pair and response shows. */
@supports selector(:has(*)) {
  .demo .pair-2, .demo .pair-3, .demo .summary, .demo .response { display: none; }
  .demo:has(.pair-1 :checked) .pair-2 { display: block; }
  .demo:has(.pair-2 :checked) .pair-3 { display: block; }
  .demo:has(.pair-1 :checked):has(.pair-2 :checked):has(.pair-3 :checked) .summary { display: block; }
  .demo .pair:has(.choice-a:checked) .response-a,
  .demo .pair:has(.choice-b:checked) .response-b,
  .demo .pair:has(.choice-skip:checked) .response-skip { display: block; }
  .demo .pair:has(.choice-a:checked, .choice-b:checked) .film:not(:has(input:checked)) img { opacity: 0.45; transform: scale(0.97); }
  .demo:has(.pair-1 .choice-a:checked) .chosen-1-a { display: block; }
  .demo:has(.pair-1 .choice-b:checked) .chosen-1-b { display: block; }
  .demo:has(.pair-2 .choice-a:checked) .chosen-2-a { display: block; }
  .demo:has(.pair-2 .choice-b:checked) .chosen-2-b { display: block; }
  .demo:has(.pair-3 .choice-a:checked) .chosen-3-a { display: block; }
  .demo:has(.pair-3 .choice-b:checked) .chosen-3-b { display: block; }
  .demo:has(.pair-1 .choice-skip:checked):has(.pair-2 .choice-skip:checked):has(.pair-3 .choice-skip:checked) .nothing { display: block; visibility: inherit; }
}

/* With JavaScript (site.js adds .is-stepping): the pairs and the ending share one grid cell, so the
   area keeps the tallest step's height and nothing jumps; only the current one is visible (the
   others are also `inert`). The responses go: the live region says what was chosen. */
.demo.is-stepping .demo-steps { display: grid; }
.demo.is-stepping .demo-steps > .step {
  grid-area: 1 / 1;
  display: block;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 150ms ease, visibility 0s linear 150ms;
}
.demo.is-stepping .demo-steps > .step.is-current { visibility: visible; opacity: 1; transition: opacity 150ms ease; }
.demo.is-stepping .demo-steps > .summary { display: flex; flex-direction: column; justify-content: center; }
.demo.is-stepping .demo-steps > .pair > p.response { display: none; }
/* Only the posters of pairs shown so far (and, once someone reaches the demo, the next pair's) are
   laid out, so the stacked pairs don't fetch all six with the first view. Every pair is the same
   height, and a pair once shown keeps its posters, so the area never jumps. */
.demo.is-stepping .demo-steps > .pair:not(.is-current):not(.is-next):not(.is-seen) .film img { display: none; }
/* Spec 0133: the posters' row and the nothing line share one cell; the nothing line keeps its place
   hidden unless every pair was skipped (its generated rule sets visibility: inherit). */
.demo.is-stepping .ending-picks { display: grid; justify-items: center; align-items: center; }
.demo.is-stepping .ending-picks > .chosen, .demo.is-stepping .ending-picks > .nothing { grid-area: 1 / 1; }
.demo.is-stepping .ending-picks > .nothing { display: block; visibility: hidden; }

/* 3. Discovery and Couch mode: two blocks, side by side on wide screens. */
.duo { display: grid; gap: var(--section-gap); }
.duo > section > h2 { font-size: calc(var(--h2) * 0.8); }

/* Predictions: the example card leads, 96 the biggest thing in the block; one screenshot. */
.predict-body { display: grid; gap: var(--grid-gap); justify-items: center; align-items: center; }
.predict-body > .shot { width: 12rem; }
#predictions > .small { max-width: var(--text-max); margin: var(--grid-gap) auto 0; text-align: center; }
.predict-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: center;
  width: 100%;
  max-width: 26rem;
  padding: var(--card-pad);
  border-radius: 1.5rem;
  background: var(--surface);
  box-shadow: 0 1rem 2rem -1.5rem var(--shadow);
}
.poster-tile {
  display: grid;
  place-items: center;
  width: 5rem;
  aspect-ratio: 2 / 3;
  border-radius: 0.875rem;
  background: linear-gradient(160deg, var(--accent), var(--tertiary));
  color: var(--on-accent);
}
.poster-tile .mark { width: 2.75rem; height: 2.75rem; padding: 0.25rem; background: none; color: inherit; }
.predict-lines p { margin: 0; }
.yours { font-weight: 600; line-height: 1.3; text-wrap: balance; }
.scores { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin: 0.25rem 0 0.375rem !important; }
.score { font-family: var(--display); font-size: var(--h1); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.tmdb { font-size: 0.875rem; color: var(--text-secondary); }
.tmdb strong { color: var(--text-primary); }
.friends { display: flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; color: var(--text-secondary); }
.predict-title { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; color: var(--text-primary); margin-bottom: 0.25rem !important; }
.heart-mark { width: 1rem; height: 1rem; flex: none; color: var(--accent); }

/* People's initials, drawn as Scene's avatars. */
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
}
.avatar-small { width: 1.75rem; height: 1.75rem; font-size: 0.875rem; background: var(--tertiary); color: var(--surface); }

/* Couch mode's demo: two people, a button, and the couch; Tonight is the focal point. */
.couch-demo { padding: var(--card-pad); border-radius: 1.5rem; background: var(--surface); }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.person { display: grid; justify-items: center; gap: 0.375rem; text-align: center; }
.person:nth-child(2) .avatar, .seat-2 { background: var(--tertiary); color: var(--surface); }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; }
.pill { padding: 0.125rem 0.625rem; border: 0.0625rem solid var(--control-outline); border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }
.couch-go { margin: 1.25rem 0 1rem; text-align: center; }
.couch-result { margin: 1rem 0; border-radius: 1rem; }
.couch-result:focus-visible { outline-offset: 0.5rem; }
.sofa { position: relative; width: 9rem; height: 7rem; margin: 0 auto; color: var(--accent); }
.sofa .mark { width: 9rem; height: 9rem; margin-top: -1rem; padding: 0; background: none; }
.seat { position: absolute; top: 1.375rem; width: 2.5rem; height: 2.5rem; font-size: 1rem; box-shadow: 0 0 0 0.1875rem var(--surface); }
.seat-1 { left: 1.125rem; }
.seat-2 { right: 1.125rem; }
/* Spec 0133: the Tonight card is the block's focal point, as its base style (the same without JavaScript). */
.tonight { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.25rem; border-radius: 1.25rem; background: var(--accent-soft); }
.tonight h3 { margin: 0 0 0.25rem; font-size: var(--h2); line-height: 1.05; }
#couch > h2 { margin-bottom: 1.25rem; }
.tonight p { margin: 0; }
.kicker { margin: 0 0 0.25rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.kicker.next { margin: 1rem 0 0.5rem; color: var(--text-secondary); }
.why { font-weight: 600; color: var(--accent); }
.tile { display: block; flex: none; width: 4.5rem; aspect-ratio: 2 / 3; border-radius: 0.75rem; background: linear-gradient(160deg, var(--accent), var(--tertiary)); }
.tile-2 { width: 2.25rem; border-radius: 0.5rem; background: linear-gradient(160deg, var(--tertiary), var(--accent)); }
.tile-3 { width: 2.25rem; border-radius: 0.5rem; background: linear-gradient(200deg, var(--accent), var(--accent-soft)); }
.couch-picks { display: grid; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.couch-picks li { display: flex; align-items: center; gap: 0.875rem; padding: 0.375rem 0.75rem 0.375rem 0.375rem; border-radius: 1rem; border: 0.0625rem solid var(--divider); }
.pick { display: grid; gap: 0.125rem; }
.pick-title { font-weight: 600; line-height: 1.3; }
.marker { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; color: var(--text-secondary); }
.marker-mark { width: 1rem; height: 1rem; color: var(--accent); flex: none; }
.couch-demo > .small { margin: 0; }
/* With JavaScript: the couch waits for the button, then the two sit down and it appears. */
@media (prefers-reduced-motion: no-preference) {
  .couch-demo.is-waiting .seat { opacity: 0; transform: translateY(-2.5rem) scale(0.8); }
  .couch-demo.is-waiting .seat-1 { transform: translate(-2.5rem, -2.5rem) scale(0.8); }
  .couch-demo.is-waiting .seat-2 { transform: translate(2.5rem, -2.5rem) scale(0.8); }
  .couch-demo .seat { transition: transform 300ms cubic-bezier(0.2, 0.8, 0.3, 1.2), opacity 300ms ease; }
  .couch-demo.is-together .tonight, .couch-demo.is-together .couch-picks, .couch-demo.is-together .kicker.next { animation: rise-in 350ms 250ms ease-out both; }
}
@keyframes rise-in {
  from { opacity: 0; translate: 0 0.75rem; }
  to { opacity: 1; translate: 0 0; }
}

/* 4. Your Scene: four compact points, and two screenshots (a CSS scroll-snap carousel on phones). */
.taste-body { display: grid; gap: var(--grid-gap); }
.points { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.point {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 0.875rem;
  align-content: start;
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  background: var(--surface);
}
.point > .mark { grid-row: 1 / 3; }
.point h3 { margin: 0.125rem 0; font-size: 1.125rem; }
.point p { margin: 0; color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.45; }
.carousel {
  display: flex;
  gap: 1rem;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0.5rem var(--gutter) 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  overscroll-behavior-x: contain;
}
.carousel:focus-visible { outline-offset: -0.1875rem; border-radius: 1rem; }
.carousel > .shot { flex: 0 0 55%; scroll-snap-align: center; }
.swipe-hint { margin: 0; text-align: center; font-size: 0.8125rem; color: var(--text-secondary); }

/* 5. More to explore: six small cards; Coming soon and Private by default as one compact strip. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card { display: grid; align-content: start; padding: 0.875rem; border-radius: var(--radius); background: var(--surface); }
.card > .mark { width: 2.25rem; height: 2.25rem; padding: 0.375rem; margin-bottom: 0.5rem; }
.card > strong { display: block; font-weight: 600; line-height: 1.35; }
.card > span { display: block; color: var(--text-secondary); font-size: 0.875rem; line-height: 1.45; margin-top: 0.125rem; }
.strip { display: grid; gap: 1.25rem; margin-top: calc(var(--section-gap) * 0.375); padding-top: calc(var(--section-gap) * 0.375); border-top: 0.0625rem solid var(--divider); }
.strip section > h2 { font-size: 1.25rem; margin-bottom: 0.625rem; }
#coming-soon ul { max-width: 46rem; margin: 0 auto; padding: 0; list-style: none; display: grid; gap: 0.625rem; }
#coming-soon li {
  background: var(--surface);
  border: 0.09375rem dashed var(--accent);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
}
#coming-soon li strong { display: block; font-family: var(--display); font-size: 1.0625rem; color: var(--text-primary); }
#coming-soon li strong::after {
  content: "Soon";
  margin-left: 0.5rem;
  padding: 0.0625rem 0.5rem;
  border: 0.0625rem solid var(--tertiary);
  border-radius: 999px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tertiary);
  vertical-align: middle;
}
#private-by-default { text-align: center; }
#private-by-default p { max-width: 44rem; margin: 0 auto; font-size: 0.9375rem; color: var(--text-secondary); }
#private-by-default p a { white-space: nowrap; }

/* 6. Join Scene (spec 0130, section 6): the invite form, here and on /request-invite. */
#get-in { text-align: center; }
#get-in > p, .request-page > p { max-width: var(--text-max); margin: 0 auto 1.5rem; color: var(--text-secondary); font-size: 1.0625rem; }
#get-in > .store { display: flex; justify-content: center; margin: 1.25rem auto 0; }
.invite { max-width: 40rem; margin: 0 auto; padding: var(--card-pad); border-radius: 1.5rem; background: var(--surface); text-align: left; }
.invite-form { position: relative; margin: 0; }
.field label { display: block; margin-bottom: 0.375rem; font-weight: 600; }
.field-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.field-row input {
  flex: 1 1 16rem;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 0.0625rem solid var(--control-outline);
  border-radius: 0.875rem;
  background: var(--canvas);
  color: var(--text-primary);
  font: inherit;
}
.field-row input:focus-visible { outline-offset: 0.0625rem; border-color: var(--accent); }
.field-row input[aria-invalid="true"] { border-color: var(--accent); border-width: 0.125rem; }
.field-row .button { flex: 0 0 auto; }
/* Spec 0132: the address is the long part; on a narrow screen field and button stack, full width. */
@media (max-width: 30rem) { .field-row .button { flex: 1 1 100%; } }
.form-error { margin: 0.625rem 0 0; font-weight: 600; color: var(--accent); }
.form-error:empty { margin: 0; }
.form-note { margin: 1rem 0 0; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; }
/* The honeypot: off-screen and hidden from assistive technology; people never see it. */
.hp { position: absolute; left: -100rem; top: 0; width: 1px; height: 1px; overflow: hidden; }
.invite-done:not(:empty) { text-align: center; }
.invite-done p, .thanks [role="status"] p { margin: 0 0 0.5rem; color: var(--text-secondary); }
.thanks-lead { font-family: var(--display); font-weight: 700; font-size: 1.375rem; line-height: 1.25; color: var(--text-primary) !important; }
.request-page, .thanks { max-width: 36rem; margin: 0 auto; padding: 2.5rem 0 4rem; text-align: center; }
.request-page h1, .thanks h1 { font-size: 2.5rem; }

/* Support and the legal pages */
.prose { max-width: 42rem; margin: 0 auto; padding: 2rem 0 3rem; }
.prose h1 { font-size: 2.5rem; }
.prose section { border-top: 0; padding: 1rem 0; }
.prose section > h2 { text-align: left; margin-bottom: 1rem; }
.prose .block { margin-bottom: 0.75rem; padding-bottom: 0.5rem; }
.prose h2 { margin-top: 1.5rem; }
.prose li { margin: 0.35rem 0; }
.prose strong { color: var(--text-primary); }

/* The support page's questions: native <details>, so the browser says expanded or collapsed. */
.question {
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}
.question > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--text-primary);
}
.question > summary::-webkit-details-marker { display: none; }
.question > summary::marker { content: ""; }
.question > summary:hover { color: var(--accent); }
.question > summary:focus-visible { outline-offset: -0.1875rem; }
.chevron { flex: none; width: 1.5rem; height: 1.5rem; color: var(--accent); transition: transform 0.2s ease; }
.question[open] > summary .chevron { transform: rotate(180deg); }
.answer { padding: 0 1.25rem 0.25rem; color: var(--text-secondary); }

/* Not found */
.not-found { text-align: center; padding: 4rem 0; }
.not-found h1 { font-size: 2.5rem; }
.not-found ul { list-style: none; padding: 0; display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }

/* Footer */
.site-footer { border-top: 0.0625rem solid var(--divider); padding: 1.25rem 0 2.25rem; color: var(--text-secondary); font-size: 0.875rem; text-align: center; }
.site-footer .store { display: flex; justify-content: center; margin: 0 0 1rem; }
.site-footer ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.25rem; list-style: none; padding: 0; margin: 0 0 0.75rem; }
.site-footer ul a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-footer p { margin: 0 0 0.375rem; }
.credit { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 0.75rem; margin: 0.5rem 0 0.25rem; }
.credit a { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* TMDB's rule: its logo is less prominent than Scene's mark. */
.credit img { height: 1rem; width: auto; }

@media (min-width: 37.5rem) {
  .phones { max-width: 34rem; }
  .phone-front { width: 15rem; }
  .phone-left, .phone-right { width: 11.5rem; margin-top: 2.5rem; }
  .predict-body { grid-template-columns: minmax(0, 1fr) auto; justify-items: stretch; }
  .predict-card { justify-self: end; }
}

@media (min-width: 48rem) {
  .film img { width: 11.25rem; }
  .chosen li { width: min(7.5rem, calc((100% - 1rem) / 3)); }
  .summary { padding: var(--card-pad); }
  .ending-title { font-size: 1.25rem; }
  .predict-body > .shot { width: 9.5rem; }
  /* Your Scene: the points beside the two screenshots. */
  .taste-body { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--grid-gap); }
  /* Side by side: no scrolling, no hint (the region stays focusable, harmlessly). */
  .carousel { justify-content: center; margin: 0; padding: 0; overflow: visible; }
  .carousel > .shot { flex: 0 0 9.5rem; }
  .swipe-hint { display: none; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
  /* Wider up, each card's icon sits beside its words. */
  .card { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 0.875rem; padding: 1.25rem; }
  .card > .mark { grid-row: 1 / 3; margin: 0; }
  #coming-soon ul { grid-template-columns: 1fr 1fr; }
}

/* Wide: the hero's words beside the phones (whose column is a little wider, so Discover dominates);
   Predictions beside Couch mode; Your Scene's points beside its screenshots. */
@media (min-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 3rem; padding-top: 1rem; text-align: left; }
  .hero .lede { margin-left: 0; }
  .actions { justify-content: flex-start; }
  .hero .how-in { margin-left: 0; }
  .hero .actions { align-items: flex-start; }
  .phones { max-width: 40rem; }
  .phone-front { width: 18.75rem; }
  .phone-left, .phone-right { width: 14rem; margin-top: 3.5rem; }
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--grid-gap) * 2); align-items: start; }
  .duo > section > h2, .duo .lead { text-align: left; margin-left: 0; }
  .duo .lead { margin-bottom: 1.25rem; }
  .predict-body { justify-items: start; }
  .predict-card { justify-self: stretch; }
  #predictions > .small { text-align: left; margin-left: 0; }
  .taste-body { gap: calc(var(--grid-gap) * 2); }
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carousel > .shot { flex-basis: 10.5rem; }
  .card { padding: var(--card-pad); }
}

@media (forced-colors: active) {
  .card, .question, #coming-soon li, .button, .store-badge, .shot img, .phone, .theme-switch, .pair, .summary, .predict-card,
  .couch-demo, .tonight, .couch-picks li, .point, .invite, .field-row input, .skip-choice span { border: 0.0625rem solid CanvasText; }
  .button, .store-badge { forced-color-adjust: none; background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  .theme-switch input:checked + span, .skip-choice input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .film input:checked ~ img { outline: 0.25rem solid Highlight; }
  .dot.on { forced-color-adjust: none; background: Highlight; }
  .mark, .chevron, .marker-mark { color: CanvasText; }
  :focus-visible { outline-color: Highlight; }
}

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