/* Hello Later home page: option A, Living things (Charlie's pick, 27 Oct 2026). Built from 05-launch/website/options/.
   Tokens = Design System v1 (04-build/app/src/theme.ts). Fonts self-hosted, no inline styles (strict CSP in _headers). */
@font-face { font-family: "Literata"; font-weight: 600; font-display: swap; src: url("/assets/fonts/Literata_600SemiBold.woff2?v=1") format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/fonts/Literata_400Regular_Italic.woff2?v=1") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-display: swap; src: url("/assets/fonts/SchibstedGrotesk_400Regular.woff2?v=1") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 600; font-display: swap; src: url("/assets/fonts/SchibstedGrotesk_600SemiBold.woff2?v=1") format("woff2"); }

:root {
  color-scheme: light;
  --ground: #F4F4F2; --surface: #FFFFFF; --panel: #EDEDEA;
  --ink: #141414; --muted: #666666; --on-ink: #FFFFFF; --line: #DDDDDD;
  --note: #FFFFFF; --note-ink: #141414; --note-muted: #666666;
  --tile-1: #D6D6D6; --tile-2: #9E9E9E;
  --serif: "Literata", Georgia, serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-note: 6px; --r-photo: 16px; --r-button: 18px; --r-card: 22px;
  --shadow-note: 0 2px 4px rgba(20,20,20,.06), 0 12px 24px rgba(20,20,20,.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0E0E0E; --surface: #1B1B1B; --panel: #141414;
    --ink: #F4F4F4; --muted: #A6A6A6; --on-ink: #0E0E0E; --line: #333333;
    --note: #F4F4F4; --tile-1: #555555; --tile-2: #2C2C2C;
    --shadow-note: 0 12px 24px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0E0E0E; --surface: #1B1B1B; --panel: #141414;
  --ink: #F4F4F4; --muted: #A6A6A6; --on-ink: #0E0E0E; --line: #333333;
  --note: #F4F4F4; --tile-1: #555555; --tile-2: #2C2C2C;
  --shadow-note: 0 12px 24px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.55 var(--sans); overflow-x: hidden; overflow-x: clip; }
a { color: inherit; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
img, svg { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 600 19px/1 var(--serif); text-decoration: none; }
.mark { width: 30px; height: 30px; border-radius: 8px; background: #111111; flex: none; }
.top nav { display: flex; gap: 18px; font-size: 15px; }
.top nav a { text-decoration: none; color: var(--muted); }

/* Type */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(38px, 7vw, 64px); line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 4.2vw, 40px); }
h3 { font-size: 21px; }
p { margin: 0; }
.lede { font-size: 19px; color: var(--muted); max-width: 36ch; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: var(--r-button);
  background: var(--ink); color: var(--on-ink); font: 600 17px/1 var(--sans); text-decoration: none; border: 0; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }


/* The note: the app's "Hello later," card */
.note { background: var(--note); color: var(--note-ink); border-radius: var(--r-note); box-shadow: var(--shadow-note); padding: 20px 22px 18px; display: grid; gap: 6px; }
.note-head { font: italic 400 28px/1.1 var(--serif); }
.note-body { font-size: 16px; line-height: 1.45; }
.note-sign { font: italic 400 16px/1.3 var(--serif); color: var(--note-muted); }
.tilt { transform: rotate(-2deg); }


/* Sections */
section.block { padding-block: 64px 8px; display: grid; gap: 26px; }
.block > header { display: grid; gap: 12px; max-width: 42ch; }
.safety { border-left: 3px solid var(--ink); padding: 4px 0 4px 16px; max-width: 60ch; }

.why { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.why h3 { font: 600 21px/1.25 var(--serif); margin-bottom: 6px; }
.why p { color: var(--muted); max-width: 52ch; }
@media (min-width: 860px) { .why { grid-template-columns: 1fr 1fr; gap: 28px 48px; } }

.facts { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.facts > li { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; min-width: 0; }
.facts strong { font-weight: 600; }
.facts span { color: var(--muted); }
@media (min-width: 860px) { .facts { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.private-shot { display: none; }
@media (min-width: 900px) {
  .private-grid { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
  .private-shot { display: block; width: 240px; height: auto; border-radius: 30px; box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 0 0 1px var(--line); }
}
.leaves { margin: 2px 0 6px; padding-left: 18px; display: grid; gap: 2px; color: var(--muted); list-style: disc; }
.leaves li { display: list-item; padding: 0; border: 0; }

.plans { display: grid; gap: 14px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; display: grid; gap: 12px; align-content: start; }
.plan.plus { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.plan ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.prices { display: grid; gap: 4px; font-size: 16px; }
.prices b { font: 600 24px/1.2 var(--serif); }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1.4fr; } }

details { border-bottom: 1px solid var(--line); padding-block: 14px; max-width: 680px; }
details:first-of-type { border-top: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; content: "+" / ""; font: 400 22px/1 var(--sans); }
details[open] summary::after { content: "\2212"; content: "\2212" / ""; }
details p { margin-top: 10px; color: var(--muted); max-width: 60ch; }

footer { border-top: 1px solid var(--line); margin-top: 72px; padding-block: 28px 40px; font-size: 15px; color: var(--muted); display: grid; gap: 6px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 8px; }
footer nav a { color: var(--ink); text-decoration: none; }
.placeholder { background: #FFE9A8; color: #141414; padding: 0 4px; border-radius: 3px; }

@media (max-width: 520px) {
  body { font-size: 16px; }
  .top nav { gap: 14px; }
  .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Living characters (D&D living bins): eyes follow, blink, hop on a poke; faces: calm, worried, happy */
.living { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.living svg { width: var(--size, 96px); max-width: none; height: auto; overflow: visible; }
.living .eyes { transform: translate(var(--ex, 0px), var(--ey, 0px)); transition: transform .12s ease-out; }
.living .blink { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
.living:nth-of-type(2) .blink { animation-delay: 1.9s; }
.living:nth-of-type(3) .blink { animation-delay: 3.3s; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
.living .worry, .living .brows, .living .grin { display: none; }
.living.worried .calm, .living.happy .calm { display: none; }
.living.worried .worry, .living.worried .brows { display: inline; }
.living.happy .grin { display: inline; }
.living.pop svg { animation: hop .55s cubic-bezier(.3,1.5,.5,1); }
@keyframes hop { 0% { transform: translateY(0); } 35% { transform: translateY(-14px) rotate(-3deg); } 100% { transform: translateY(0); } }
.living .name { font: 600 14px/1.2 var(--sans); }


/* ---- Scene (Living things): this morning to later. --p (0 to 1) comes from home.js. ----
   One rule per selector, phones first, then the breakpoints in order (rounds 1–9 of the critic loop folded in, 27 Oct 2026).
   The scene keeps its own palette in both themes: morning is paper, later is ink. */
.scene { position: relative; height: 270vh; height: 270svh; --paper: #F4F4F2; --night: #141414; }
.home .scene { margin-top: -68px; }
.scene-stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--paper); color: #141414;
  --ink: #141414; --surface: #FFFFFF; transition: --ink .4s ease, --surface .4s ease, color .4s ease; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #141414; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
/* Night falls over p .40 to .60 and the ink flips just after halfway */
.scene-late { position: absolute; inset: 0; background: linear-gradient(180deg, #0B0B0B 0%, var(--night) 60%, #1E1E1E 100%); opacity: calc(var(--p, 0) * 5 - 2); }
.scene.late .scene-stick { color: #F4F4F4; --ink: #F4F4F4; --surface: #1B1B1B; }
.scene.paused .blink { animation-play-state: paused; }

.scene-copy { position: relative; padding-top: 80px; }
.morning-copy { display: grid; gap: 18px; max-width: 560px; opacity: calc(1.1 - var(--p, 0) * 6); transform: translateY(calc(var(--p, 0) * -60px)); }
.morning-copy .lede { color: #555555; }
.morning-copy .btn { background: #141414; color: #FFFFFF; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Proof folded into one quiet line */
.proof-line { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: #555555; }
.proof-line li { display: inline-flex; align-items: center; gap: 7px; }
.proof-line li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #141414; }
.proof-line a { color: inherit; text-decoration-color: rgba(0,0,0,.3); padding-block: 4px; }
/* The product on the phone's first screen: three timed photo tiles and the payoff */
.hero-proof { display: none; }

/* The snap beat, the doubt and the payoff lines */
.snap-copy { position: absolute; top: 84px; left: max(16px, env(safe-area-inset-left, 0px)); right: 16px; font: 600 clamp(30px, 5vw, 52px)/1.05 var(--serif);
  letter-spacing: -0.02em; color: #141414; text-wrap: balance; pointer-events: none;
  opacity: min(calc((var(--p, 0) - .2) * 14), calc((.48 - var(--p, 0)) * 10)); }
.late-copy { position: absolute; top: 16px; left: max(16px, env(safe-area-inset-left, 0px)); right: 16px; font: 600 clamp(34px, 6vw, 60px)/1.05 var(--serif);
  letter-spacing: -0.02em; text-wrap: balance; color: #F4F4F4; opacity: calc(var(--p, 0) * 12 - 6); }
.late-copy .lc-b { display: none; }
.scene.noted .late-copy .lc-a { display: none; }
.scene.noted .late-copy .lc-b { display: inline; }

/* The clock: hidden while you leave and snap (the snap line says 8:41), then twenty minutes roll by */
.clock { position: absolute; left: 50%; bottom: calc(13% + 300px); transform: translateX(-50%); display: grid; justify-items: center; gap: 2px;
  opacity: calc(var(--p, 0) * 8 - 3.1); }
.clock-time { font: 600 clamp(40px, 7vw, 72px)/1 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.clock-time.tick { animation: tick .14s ease-out; }
@keyframes tick { from { transform: translateY(-4px); opacity: .6; } }
.clock-label { font-size: 14px; opacity: .7; }

/* The things on the worktop */
.worktop { position: absolute; left: 0; right: 0; bottom: 0; height: 13%; border-top: 3px solid var(--ink); }
.scene-things { position: absolute; left: 50%; bottom: calc(13% + 1px); transform: translateX(-50%); display: flex; gap: 18px; align-items: flex-end; }
.scene-things .living { position: relative; }
.scene-things .living svg { width: 70px; }
.scene-things .name { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: .8; font-size: 12px; }
/* The learning beat: the straighteners' label guesses, then is put right */
.scene-things .name { transition: opacity .12s ease; }
.scene-things .name.guess { font: italic 600 15px/1 var(--serif); opacity: 1; background: #141414; color: #F4F4F4; padding: 5px 10px; border-radius: 999px; }
.scene.late .scene-things .name.guess { background: #F4F4F4; color: #141414; }
.scene-things .name.swap { opacity: 0; }
/* The fix is a tap (Legal, 27 Oct: the app doesn't correct itself; you put it right): a fingertip ripple on the label before the swap */
.scene-things .name.tap::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 2px solid #141414; opacity: 0; animation: tapring .45s ease-out; pointer-events: none; }
.scene.late .scene-things .name.tap::after { border-color: #F4F4F4; }
@keyframes tapring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.4); } }

/* The snap: viewfinder corners close on the thing, then a timed photo tile pops out above it (8:41, 8:41, 8:42) */
.snap { position: absolute; left: 50%; top: -58px; width: 50px; height: 42px; margin-left: -25px; border-radius: 7px; background: #9E9E9E center / cover;
  color: #FFFFFF; font: 600 11px/1 var(--sans); display: grid; place-items: end center; padding-bottom: 4px; text-shadow: 0 1px 2px rgba(0,0,0,.6);
  box-shadow: 0 2px 6px rgba(0,0,0,.25); opacity: 0; transform: translateY(40px) scale(.35);
  transition: opacity .2s ease, transform .4s cubic-bezier(.3,1.4,.5,1); }
.living.snapped .snap { opacity: 1; transform: none; }
/* Stand-in photos (PLACEHOLDER until Charlie's real ones) */
[data-thing="straighteners"] .snap, .note-tiles span:nth-child(1), .hero-proof span:nth-child(1) { background-image: linear-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,.45)), url("/assets/screens/photo-straighteners.jpg?v=3"); }
[data-thing="hob"] .snap, .note-tiles span:nth-child(2), .hero-proof span:nth-child(2) { background-image: linear-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,.45)), url("/assets/screens/photo-hob.jpg?v=3"); }
[data-thing="door"] .snap, .note-tiles span:nth-child(3), .hero-proof span:nth-child(3) { background-image: linear-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,.45)), url("/assets/screens/photo-door.jpg?v=3"); }
.living.flash::after { content: ""; position: absolute; inset: -10px -10px 22px; pointer-events: none; opacity: 0;
  background: linear-gradient(var(--ink), var(--ink)) 0 0 / 14px 2.5px, linear-gradient(var(--ink), var(--ink)) 0 0 / 2.5px 14px,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 14px 2.5px, linear-gradient(var(--ink), var(--ink)) 100% 0 / 2.5px 14px,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 14px 2.5px, linear-gradient(var(--ink), var(--ink)) 0 100% / 2.5px 14px,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 14px 2.5px, linear-gradient(var(--ink), var(--ink)) 100% 100% / 2.5px 14px;
  background-repeat: no-repeat; animation: viewfind .3s ease-out; }
@keyframes viewfind { from { opacity: 1; transform: scale(1.18); } 70% { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1); } }
/* Each thing reacts to its snap: the door shuts, the straighteners' cord goes, the hob's knobs go to off */
[data-thing="door"].flash svg { transform-origin: 20% 50%; animation: shut .45s ease-out; }
@keyframes shut { 40% { transform: scaleX(.84); } }
[data-thing="straighteners"].flash svg > path:first-child { animation: unplug .45s ease-out; }
@keyframes unplug { 50% { opacity: 0; transform: translateY(8px); } }
[data-thing="hob"].flash svg circle { animation: knob .45s ease-out; }
@keyframes knob { 50% { opacity: .1; } }

/* The worry */
.bubble { position: absolute; left: 50%; bottom: calc(13% + 420px); transform: translateX(-50%) scale(calc(.85 + var(--b, 0) * .15));
  background: #F4F4F4; color: #141414; border-radius: 22px; padding: 12px 18px; font: italic 400 17px/1.2 var(--serif); width: max-content; max-width: calc(100vw - 32px); text-align: center;
  opacity: var(--b, 0); }
.bubble::after { content: ""; position: absolute; left: 24px; bottom: -14px; width: 14px; height: 14px; border-radius: 50%; background: #F4F4F4; }
.bubble::before { content: ""; position: absolute; left: 34px; bottom: -26px; width: 8px; height: 8px; border-radius: 50%; background: #F4F4F4; }
.scroll-hint { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); font-size: 13px; opacity: calc(.7 - var(--p, 0) * 3); }

/* The note lands. Now and Later (the icon's two dots) arrive with it: Now wrote it, Later reads it (Charlie, 27 Oct). */
.note-wrap { position: absolute; left: 50%; top: 18%; width: min(340px, 86vw); transform: translate(-50%, -40px); opacity: 0; visibility: hidden;
  transition: transform .5s cubic-bezier(.3,1.4,.5,1), opacity .2s ease, visibility 0s .2s; }
.scene.noted .note-wrap { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition: transform .5s cubic-bezier(.3,1.4,.5,1), opacity .2s ease, visibility 0s; }
.scene-note { box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.scene-note.tilt { transform: rotate(-1deg); }
.scene-note .note-body { font: italic 400 17px/1.45 var(--serif); }
.note-duo { position: absolute; right: -4px; top: -80px; }
.note-duo svg { width: 88px; }
.note-tiles { display: flex; gap: 6px; margin-top: 4px; }
.note-tiles span { width: 46px; height: 38px; border-radius: 7px; background: #9E9E9E center / cover; color: #FFFFFF; font: 600 10px/1 var(--sans);
  display: grid; place-items: end center; padding-bottom: 4px; text-shadow: 0 1px 2px rgba(0,0,0,.6);
  opacity: 0; transform: scale(.9); transition: opacity .12s ease, transform .3s cubic-bezier(.3,1.4,.5,1); }
/* The photos travel: each tile flies from its thing into the note (home.js measures --fx/--fy), and the note's tile takes over as it lands */
/* The doubt: the photos are there but not looked at yet, so they fade back; the note brings them forward */
.scene.late:not(.noted) .scene-things .snap { opacity: .25; transform: scale(.8); }
.scene.noted .scene-things .snap { animation: flyfade .56s linear forwards; }
@keyframes flyfade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.scene.noted .scene-things .snap { opacity: 0; transform: translate(var(--fx, 10px), var(--fy, -40px)) scale(1.05);
  transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .1s linear .42s; }
.scene.noted .scene-things .living:nth-child(2) .snap { transition-delay: .06s, .48s; }
.scene.noted .scene-things .living:nth-child(3) .snap { transition-delay: .12s, .54s; }
.scene.noted .note-tiles span { opacity: 1; transform: none; }
.scene.noted .note-tiles span:nth-child(1) { transition-delay: .42s; }
.scene.noted .note-tiles span:nth-child(2) { transition-delay: .48s; }
.scene.noted .note-tiles span:nth-child(3) { transition-delay: .54s; }

/* The app on screen: on phones and tablets it appears while you snap; on laptops it sits beside the morning copy and leaves with it */
.hero-shot { display: block; position: absolute; left: 50%; top: 178px; height: min(46vh, 400px); width: auto; border-radius: 22px; pointer-events: none;
  box-shadow: 0 18px 44px rgba(0,0,0,.2), 0 0 0 1px #DDDDDD; opacity: min(calc((var(--p, 0) - .2) * 14), calc((.48 - var(--p, 0)) * 10));
  transform: translate(-50%, calc((.3 - var(--p, 0)) * 60px)); }
.hero-shot.shutter { animation: shutter .18s ease-out; }
/* Later, the app itself: on tablets and laptops it waits dimmed on the worktop through the doubt, and lights up with the note */
.later-shot { display: none; }
@keyframes shutter { 40% { scale: .985; opacity: .85; } }

/* Living characters: faces change behind a blink, and never show worry and a grin at once */
.living.blink-now .blink { animation: blinknow .16s ease-in-out; }
@keyframes blinknow { 50% { transform: scaleY(.1); } }
.living.happy .worry, .living.happy .brows { display: none; }

/* Phones */
@media (max-width: 600px) {
  .scene { height: 210vh; height: 210svh; }
  .scene.noted .clock { opacity: 0; }
}
@media (max-width: 760px), (max-width: 1099px) and (orientation: portrait) {
  .hero-proof { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
  .hero-proof span { width: 46px; height: 40px; border-radius: 8px; background: #9E9E9E center / cover; color: #FFFFFF;
    font: 600 10px/1 var(--sans); display: grid; place-items: end center; padding-bottom: 4px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
  .hero-proof b { font: italic 400 15px/1.2 var(--serif); margin-left: 6px; color: #141414; }
}
/* Short phones (iPhone SE and similar): a tighter first screen, smaller things, the bubble lower, the clock gives way to the note */
@media (max-width: 600px) and (max-height: 740px) {
  .morning-copy { gap: 12px; }
  .morning-copy h1 { font-size: 32px; }
  .morning-copy .lede { font-size: 16px; }
  .morning-copy .btn { min-height: 46px; }
  .morning-copy .proof-line { display: none; }
  .hero-proof { margin-top: 0; }
  .scene-things .living svg { width: 56px; }
  .snap { top: -52px; }
  .note-wrap { top: 22%; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .clock { bottom: calc(13% + 128px); }
  .bubble { bottom: calc(13% + 240px); }
  .hero-shot { top: 190px; height: 32vh; }
  .scene.noted .clock { opacity: 0; }
}
@media (max-width: 600px) and (max-height: 600px) { .hero-proof { display: none; } }
/* Small and 320 px wide phones (iPhone SE with Display Zoom) */
@media (max-width: 400px) {
  .scene-things { gap: 22px; }
  .scene-things .name { font-size: 11px; }
  .late-copy { font-size: 30px; }
}
@media (max-width: 359px) {
  .brand { font-size: 17px; }
  .top nav a:not(:last-child) { display: none; }
  .morning-copy h1 { font-size: 28px; }
  .morning-copy .lede { font-size: 15px; }
  .morning-copy .proof-line { display: none; }
  .scene-things .living svg { width: 48px; }
  .snap { width: 42px; height: 36px; margin-left: -21px; top: -48px; font-size: 10px; }
  .hero-shot { top: 204px; }
  .late-copy { font-size: 26px; right: 76px; }
  .note-wrap { top: 26%; }
  .note-duo { top: -60px; }
  .note-duo svg { width: 64px; }
}

/* Tablets and laptops */
@media (min-width: 601px) {
  .morning-copy { max-width: 800px; opacity: calc(1.2 - var(--p, 0) * 6); }
  .morning-copy h1 { font-size: clamp(40px, 5.2vw, 60px); }
  .late-copy { top: 24px; }
  .clock { left: auto; right: max(16px, env(safe-area-inset-right, 0px)); bottom: auto; top: 84px; transform: none; justify-items: end; }
  .worktop { height: 18%; }
  .scene-things { bottom: calc(18% + 1px); gap: clamp(14px, 4vw, 48px); }
  .scene-things .living svg { width: clamp(76px, 12vw, 120px); }
  .scene-things .name { font-size: 14px; }
  .snap { top: -60px; }
  .scene-things { left: 44%; }
  .bubble { left: 44%; bottom: calc(18% + clamp(150px, 22vw, 210px) + 60px); font-size: 20px; }
  .note-wrap { left: 42%; top: 30%; }
  .clock { opacity: calc(var(--p, 0) * 10 - 5.2); }
  .hero-shot, .later-shot { display: block; position: absolute; left: auto; right: max(24px, calc((100vw - 1080px) / 2 + 16px)); top: auto; bottom: calc(18% + 1px);
    height: min(56vh, 480px); width: auto; border-radius: 26px; pointer-events: none; box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 0 0 1px #DDDDDD; }
  .hero-shot { opacity: calc((.5 - var(--p, 0)) * 10); transform: none; }
  .later-shot { opacity: 0; filter: grayscale(1) brightness(.5); transition: opacity .5s ease, filter .5s ease; box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px #333333; }
  .scene.late .later-shot { opacity: .35; }
  .scene.noted .later-shot { opacity: 1; filter: none; }
  .note-duo { right: -36px; top: -112px; }
  .note-duo svg { width: 128px; }
}
@media (min-width: 601px) and (max-width: 1099px) { .morning-copy { max-width: min(800px, calc(100vw - 300px)); } }
@media (min-width: 601px) and (max-height: 820px) {
  .morning-copy { gap: 14px; }
  .morning-copy h1 { font-size: clamp(36px, 4.6vw, 52px); }
}
/* Tablets upright: bigger photo tiles and things fill the first screen */
@media (min-width: 601px) and (max-width: 1099px) and (orientation: portrait) {
  .hero-proof span { width: 64px; height: 54px; font-size: 12px; border-radius: 10px; }
  .hero-proof b { font-size: 18px; }
  .worktop { height: 26%; }
  .scene-things { bottom: calc(26% + 1px); }
  .bubble { bottom: calc(26% + 290px); }
  .scene-things .living svg { width: 112px; }
  .hero-shot, .later-shot { bottom: calc(26% + 1px); height: min(30vh, 330px); border-radius: 20px; }
}
/* Short tablets and laptops: the proof line would sit under the things */
@media (min-width: 601px) and (max-height: 780px) { .morning-copy .proof-line { display: none; } }
@media (min-width: 901px) {
  .morning-copy h1 { max-width: 13ch; }
  .clock { right: max(16px, calc((100vw - 1080px) / 2 + 16px)); }
  .clock-time { font-size: 48px; }
}
@media (min-width: 1100px) {
  .morning-copy { max-width: 620px; gap: 22px; }
  .morning-copy h1 { max-width: none; }
  .snap-copy { right: auto; max-width: min(600px, 50vw); }
  .clock { top: 210px; right: auto; left: max(16px, calc((100vw - 1080px) / 2 + 16px)); justify-items: start; }
  .scene-things .living svg { width: 140px; }
  .scene-things .snap { width: 56px; height: 48px; margin-left: -28px; top: -66px; font-size: 12px; }
  .hero-shot, .later-shot { height: min(62vh, 520px); border-radius: 28px; }
  .bubble { bottom: calc(18% + 290px); }
  .note-wrap { width: 440px; }
  .note-wrap .note-head { font-size: 34px; }
  .note-wrap .note-body { font-size: 18px; }
  .note-tiles span { width: 64px; height: 54px; font-size: 12px; }
}
@media (min-width: 1100px) and (max-height: 820px) { .scene-things .living svg { width: 104px; } }
/* Short tablets and laptops: the things stay clear of the buttons */
@media (min-width: 601px) and (max-height: 760px) { .scene-things .living svg { width: 84px; } }

/* Phone landscape and other short screens: a shorter scene, still states, and the note has the stage to itself */
@media (max-height: 500px) {
  .scene { height: 200vh; height: 200svh; }
  .home .scene-copy { padding-top: 64px; }
  .morning-copy .lede, .morning-copy .proof-line, .hero-proof, .hero-shot, .later-shot, .snap-copy { display: none; }
  .morning-copy h1 { font-size: 28px; }
  .late-copy { font-size: 26px; }
  .note-wrap { top: 30%; width: min(420px, 60vw); }
  .scene.noted .scene-things, .scene.noted .note-duo, .scene.noted .clock { opacity: 0; }
}
/* Reduced motion: four still states need a little more room */
@media (prefers-reduced-motion: reduce) {
  .scene { height: 200vh; height: 200svh; }
  .scene.noted .note-tiles span { opacity: 1; transform: none; }
}

/* ---- Page sections ---- */
/* Page fades between pages (cross-document View Transitions; iOS 18.2+, ignored elsewhere) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Sticky phone story with real screens. No drawn phone frame: Apple's marketing rules allow only Apple's own device frames,
   so real screens show bare, with rounded corners. */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.story-phone { position: sticky; top: 6vh; height: 88vh; height: 88svh; display: grid; place-items: center; }
.phone { position: relative; height: min(78vh, 660px); aspect-ratio: 1100 / 2393; border-radius: 40px; background: var(--panel);
  box-shadow: 0 30px 80px rgba(0,0,0,.22), 0 0 0 1px var(--line); overflow: hidden; }
/* Only the incoming screen fades, on top of the outgoing one, so there is never a double exposure. */
.phone-screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; transition: opacity 0s .22s; }
.phone-screen.on { opacity: 1; z-index: 1; transform: none; transition: opacity .22s cubic-bezier(.2,.7,.2,1), transform .3s cubic-bezier(.2,.7,.2,1); }
.phone-screen:not(.on) { transform: translateY(8px) scale(.99); }
@media (prefers-reduced-motion: reduce) { .phone-screen.on { transition: opacity .2s linear !important; } }
.story-steps { list-style: none; margin: 0; padding: 0; }
.story-steps > li { min-height: 86vh; display: flex; flex-direction: column; justify-content: center; }
.story-steps > li h3 { transition: opacity .4s; }
.story-steps > li:not(.on) h3 { opacity: .7; }
.cap { display: grid; gap: 10px; }
.story-steps h3 { font-size: clamp(30px, 4vw, 46px); line-height: 1.06; }
.story-steps p { color: var(--muted); font-size: 18px; max-width: 26em; }
@media (max-width: 820px) {
  .story { display: block; position: relative; }
  .story-phone { top: 4vh; height: 70vh; height: 70svh; z-index: 0; }
  .phone { height: 58vh; height: 58svh; border-radius: 34px; }
  .story-steps { position: relative; z-index: 1; margin-top: -40vh; }
  .story-steps > li { min-height: 92vh; justify-content: flex-end; padding-bottom: 4vh; }
  .story .cap { background: var(--ground); border: 1px solid var(--line); border-radius: 22px; padding: 16px 18px; }
  @supports (background: color-mix(in srgb, red 50%, blue)) { .story .cap { background: color-mix(in srgb, var(--ground) 86%, transparent); } }
  .story-steps h3 { font-size: 26px; }
  .story-steps p { font-size: 16px; }
}
@media (max-width: 600px) { .story-steps > li { min-height: 80vh; } }

/* Install moment after How it works */
.after-how { padding-block: 40px 8px; display: grid; gap: 14px; justify-items: start; }
.after-how h2 { font-size: clamp(28px, 4.6vw, 40px); }
/* Why: no orphan in the two-column grid */
@media (min-width: 860px) and (max-width: 1099px) { .why li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .why { grid-template-columns: repeat(3, 1fr); gap: 28px 40px; }
  .why h3 { margin-bottom: 10px; }
  #why { grid-template-columns: 1fr minmax(0, 560px); align-items: center; }
  #why > header { grid-column: 1; }
  #why .why-visual { grid-column: 2; }
  #why .why, #why .safety { grid-column: 1 / -1; }
}
/* Why: your camera roll against one look in Hello Later (drawn; the photo tiles are stand-ins) */
.why-visual { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 640px; }
.wv-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; display: grid; gap: 12px; align-content: start; }
.wv-app { align-content: start; }
.wv-label { font: 600 14px/1.2 var(--sans); color: var(--muted); }
.wv-roll { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.wv-roll i { aspect-ratio: 1; border-radius: 3px; background: #CFCAC2; }
.wv-roll i:nth-child(3n) { background: #B9B4AD; } .wv-roll i:nth-child(4n+1) { background: #DDD8D0; } .wv-roll i:nth-child(5n) { background: #A9A39B; }
.wv-roll i.wv-find { background: #9E9E9E url("/assets/screens/photo-straighteners.jpg?v=3") center / cover; }
.wv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wv-list li { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; font-size: 15px; }
.wv-list i { width: 48px; height: 41px; border-radius: 8px; background: #9E9E9E center / cover; }
.wv-list li:nth-child(1) i { background-image: url("/assets/screens/photo-straighteners.jpg?v=3"); }
.wv-list li:nth-child(2) i { background-image: url("/assets/screens/photo-hob.jpg?v=3"); }
.wv-list li:nth-child(3) i { background-image: url("/assets/screens/photo-door.jpg?v=3"); }
.wv-list b { font-weight: 600; }
.wv-list span { font-variant-numeric: tabular-nums; color: var(--muted); }
@media (max-width: 420px) { .why-visual { gap: 8px; } .wv-panel { padding: 12px; } .wv-list li { grid-template-columns: 30px 1fr auto; gap: 6px; font-size: 13px; } .wv-list i { width: 30px; height: 26px; } }
.facts-strip { margin: 0; font-size: 14px; color: var(--muted); letter-spacing: .01em; }
.prices small { font-size: 14px; opacity: .75; }

/* "Coming soon": a finished, quiet label (not a button) until the App Store badge on launch day */
.soon-label { display: inline-flex; align-items: center; gap: 8px; justify-self: start; width: max-content; max-width: 100%; min-height: 40px; padding: 0 14px;
  border-radius: 999px; background: rgba(20,20,20,.07); font: 600 14px/1 var(--sans); opacity: .8; }
@supports (background: color-mix(in srgb, red 50%, blue)) { .soon-label { background: color-mix(in srgb, currentColor 8%, transparent); } }
.soon-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* The closing ends on the product */
.closing { padding-block: 72px 8px; display: grid; grid-template-columns: 1fr; gap: 18px; justify-items: start; max-width: 880px; margin-inline: auto; }
.closing h2 { font-size: clamp(34px, 6vw, 56px); max-width: 16ch; }
.closing-copy { display: grid; gap: 16px; justify-items: start; }
.closing-sub { font: 400 18px/1.4 var(--sans); color: var(--muted); margin: -4px 0 0; }
.closing-shot { display: none; }
.closing-icon { display: none; }
@media (max-width: 759px) { .closing-icon { display: block; width: 72px; height: 72px; border-radius: 16px; } }
@media (min-width: 760px) {
  .closing { grid-template-columns: 280px 1fr; gap: 56px; align-items: center; }
  .closing-shot { display: block; width: 280px; height: auto; border-radius: 30px; box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 0 0 1px var(--line); }
}
.made-by { color: var(--muted); }

/* On a computer: scan to get it on your iPhone (live on launch day) */
.desk-qr { display: none; }
@media (min-width: 900px) and (hover: hover) {
  .desk-qr { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; margin-top: 8px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); max-width: 560px; }
}
.qr-box { width: 120px; height: 120px; border-radius: 12px; background: #FFFFFF; padding: 4px; }
.qr-box img { width: 100%; height: auto; }
.desk-qr h3 { font: 600 20px/1.2 var(--serif); margin-bottom: 4px; }

/* A lasting, quiet install row on phones once the scene is behind you; it steps aside while an inline "Coming soon" is in view */
.install-bar { display: none; }
@media (max-width: 760px) {
  html { scroll-padding-bottom: 84px; }
  .install-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--ground); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .25s ease; }
  .install-bar.show { transform: none; }
  .install-name { font: 600 16px/1 var(--serif); white-space: nowrap; }
  .install-bar .soon-label { min-height: 36px; font-size: 13px; }
}
@media (max-width: 359px) { .install-bar .soon-label { font-size: 12px; padding: 0 10px; } }

/* Plain pages: 404, /card */
.page { padding-block: 24px 8px; display: grid; gap: 22px; }
.page h1 { font-size: clamp(38px, 8vw, 64px); }
.lost { position: relative; display: flex; gap: clamp(18px, 4vw, 40px); align-items: flex-end; justify-content: center; padding: 40px 0 0; margin-bottom: 34px; border-bottom: 3px solid var(--ink); }
.lost.paused .blink { animation-play-state: paused; }
.lost .living { position: relative; }
.lost .living svg { width: clamp(72px, 14vw, 110px); }
.lost .name { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: .8; font-size: 12px; }
@media (max-width: 600px) { .lost { gap: 18px; } .lost .living svg { width: 70px; } }
.lost-line { font: italic 400 20px/1.3 var(--serif); text-align: center; margin-top: 30px; }
.card-split { display: grid; gap: 28px; align-items: center; }
.card-copy { display: grid; gap: 16px; }
.card-split .card-copy { order: -1; }
.card-shot { margin: 0; justify-self: center; width: min(280px, 70vw); border-radius: 34px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 0 0 1px var(--line); }
.card-shot img { width: 100%; height: auto; }
@media (min-width: 760px) { .card-split { grid-template-columns: 300px 1fr; } .card-split .card-copy { order: 0; } }
.soon-box { padding: 22px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; justify-items: start; }

/* ---- Header, focus and feedback ---- */
/* The header matches the morning scene in both themes, so there is no dark band over paper; the scene starts under it */
.home .top-band { position: relative; z-index: 6; background: #F4F4F2; color: #141414; --ink: #141414; --muted: #555555; }
.home .top-band .top nav a { color: #555555; }
@media (prefers-color-scheme: dark) { .mark { box-shadow: 0 0 0 1px rgba(255,255,255,.35); } .home .top-band .mark { box-shadow: none; } }
.top nav a, footer nav a { display: inline-block; padding-block: 10px; }
@media (max-width: 520px) { .top nav a.hide-sm { display: none; } }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: #141414; color: #FFFFFF; padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }
/* Press and hover feedback */
.btn, .living, summary, .top nav a { transition: transform .12s ease, background-color .15s ease, color .15s ease; }
.btn:active, .living:active { transform: scale(.97); }
summary:active { opacity: .7; }
@media (hover: hover) {
  .btn.ghost:hover { background: var(--ink); color: var(--on-ink); }
  .btn:not(.ghost):hover { background: #333333; }
  .top nav a:hover { color: var(--ink); }
  summary:hover { text-decoration: underline; text-underline-offset: 4px; }
}
/* Higher contrast when asked for: full-strength labels, darker (or lighter) grey text; colours that sit on the scene follow its ink */
@media (prefers-contrast: more) {
  .soon-label, .scene-things .name, .proof-line, .clock-label, .prices small { opacity: 1; }
  .proof-line, .morning-copy .lede { color: #141414; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: light) { :root { --muted: #444444; } }
@media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --muted: #C8C8C8; } }

/* Stand-in photos are labelled until Charlie's real ones replace them (Charlie, 1 Nov: go live with the stand-ins; Legal to approve the wording) */
.illus-tag { position: absolute; z-index: 3; top: 10px; left: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(20,20,20,.72); color: #FFFFFF;
  font: 600 11px/1.2 var(--sans); letter-spacing: .01em; pointer-events: none; }
.phone, .why-visual, .card-shot, .private-fig, .closing-fig { position: relative; }
.private-fig, .closing-fig { margin: 0; }
.private-fig { display: none; }
@media (min-width: 900px) { .private-fig { display: block; } }
.closing-fig { display: none; }
@media (min-width: 760px) { .closing-fig { display: block; } }
.closing-fig .illus-tag, .private-fig .illus-tag { top: 14px; left: 14px; }
.illus-line { font-size: 13px; color: #555555; }
@media (max-width: 600px) { .cta .illus-line { flex-basis: 100%; margin-top: -4px; } }
.why-visual .illus-tag { position: static; grid-column: 1 / -1; justify-self: start; padding: 0; background: none; color: var(--muted); font-weight: 400; font-size: 12px; }
.note-tiles { align-items: flex-end; }
.note-illus { margin-left: 4px; font: 600 11px/1.2 var(--sans); font-style: normal; color: var(--note-muted); align-self: center; }
.private-fig img, .closing-fig img { display: block; }