/* Tokens mirror Pillowbook/DesignSystem/Palette.swift: the hollow's navy since 2026-10-31
   (#181C24 to #0A0C12 before, with a slate accent) */
:root {
  --bg-top: #272E4D;
  --bg-bottom: #1E2541;
  --bg-deep: #151A30;
  --stage: #2B3356;
  --text-hi: #EEEAE3;
  --text-cfd: #DAD5CD;
  --text-mid: #ABB2BF;
  --text-lead: #929AA7;
  --text-faint: #6C7381;
  --hairline: rgba(255,255,255,.08);
  --whisper: rgba(255,255,255,.06);
  --accent: #EEEAE3;   /* Palette.accent: buttons, links and selections wear the app's ivory */
  --accent-on: #1E2541;
  --kicker: #ABB2BF;   /* small capitals over a headline, as the app's labels */
  --gold: #ECD29A;
  --mark: #EBE6DD;   /* Palette.mark: the app's one white since 2026-10-19 (#E3E9F5 before) */
  --amber: 255,163,77;
  --dawn: 255,192,106;
  --gutter: clamp(16px, 4vw, 56px);
  --nav-h: 76px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-snap-type: y proximity; }
body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text-hi);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
/* Eight Sleep-style display: big and light, authority through restraint */
h1, h2 { font-weight: 300; letter-spacing: -0.035em; line-height: .96; margin: 0; }
h1, h2 { font-size: clamp(44px, 6.4vw, 104px); }
p { margin: 0; }

/* The hollow: the app's three layers (shade, the lamp turned down, the lamp), each 1.3 times the
   hollow so the lip and the soft edge spill past it, stacked as Hollow in Components.swift does */
.big-hollow { position: relative; width: min(240px, 48%); aspect-ratio: 1; }
.big-hollow img { position: absolute; inset: -15%; width: 130%; height: 130%; max-width: none; }

/* Nav */
/* The menu: two floating glass pills at the stage's edges (after noumi, 2026-10-21; one centred
   pill after Flighty before). The lockup and the links in one, the way to the app in the other. */
.nav {
  position: fixed; z-index: 20; inset: max(16px, env(safe-area-inset-top)) 0 auto;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 0 max(var(--gutter), calc((100vw - 1240px) / 2));
  pointer-events: none;
}
.pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 32px; min-height: 60px;
  padding: 0 24px; border-radius: 22px;
  background: rgba(30,37,65,.62); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--hairline);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
/* The way to the app is the whole right pill, as noumi's icons have theirs: no button inside it */
.pill-side {
  padding: 0 26px; font-size: 16px; font-weight: 600; color: var(--text-hi); text-decoration: none; white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.pill-side:hover { background: rgba(47,55,88,.76); }
.pill-side:active { transform: scale(.98); }
.pill-side:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The lockup: a 30px hollow (its picture 39px, spilling) and the name in Hanken light, as the app's
   launch sets "pillowbook" under its hollow */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 39px; height: 39px; margin: -4.5px; }
.brand-name { font-size: 23px; font-weight: 300; letter-spacing: -0.01em; line-height: 1; color: var(--text-hi); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 16px; font-weight: 500; color: var(--text-cfd); text-decoration: none;
  text-underline-offset: 6px; text-decoration-thickness: 1px; transition: color .2s ease;
}
.nav-links a:hover { color: var(--text-hi); text-decoration-line: underline; }
.nav-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.store-badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--text-hi); color: var(--bg-deep);
  border-radius: 14px; padding: 11px 22px 11px 18px;
  text-decoration: none; line-height: 1.1;
  transition: transform .25s ease, box-shadow .3s ease;
}
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(var(--amber), .2); }
.store-badge svg { width: 22px; height: 28px; }
.store-badge span { display: flex; flex-direction: column; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.store-badge small { font-size: 11px; font-weight: 500; letter-spacing: 0; }
.fine { color: var(--text-lead); font-size: 14px; }

/* ——— The story: one pinned frame over N scroll beats ——— */
.story { position: relative; }
.beats > div { height: 100svh; scroll-snap-align: start; }
/* The last beat as tall as the largest viewport, so the frame stays pinned to the end of it
   when Safari's toolbar has shrunk */
.beats > div:last-child { height: 100lvh; }
.footer { scroll-snap-align: end; }

/* Touch: one swipe, one chapter (2026-10-31, Nick: "it takes two scrolls basically to get to
   the next screen"). Every beat is a stopping point, and a hard flick still stops at the next one. */
@media (pointer: coarse) {
  html { scroll-snap-type: y mandatory; }
  .beats > div { scroll-snap-stop: always; }
}

/* The frame fills the visible screen as Safari's toolbar grows and shrinks (100svh left a band
   of page under it once the toolbar had shrunk) */
.stage {
  position: sticky; top: 0; height: 100dvh; margin-bottom: -100dvh;
  overflow: hidden; z-index: 1;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  grid-template-areas: "rail copy device";
  align-items: center; column-gap: clamp(24px, 5vw, 96px);
  padding: var(--nav-h) max(var(--gutter), calc((100vw - 1240px) / 2)) 0;
  background: radial-gradient(90% 70% at 72% 45%, var(--stage), var(--bg-bottom) 55%, var(--bg-deep));
}

/* Room light: amber night light from below, dawn from above on the morning beats */
.light { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.light.night {
  background: radial-gradient(60% 45% at 70% 108%, rgba(var(--amber), .26), rgba(var(--amber), .08) 55%, transparent 80%);
  transform-origin: 70% 100%;
}
.light.dawn {
  opacity: 0;
  background:
    radial-gradient(70% 55% at 70% -10%, rgba(var(--dawn), .30), rgba(255,159,122,.10) 50%, transparent 78%),
    linear-gradient(rgba(var(--dawn), .05), transparent 60%);
}
.stage > :not(.light, .scroll-hint) { position: relative; z-index: 1; }
.scroll-hint { z-index: 1; }

/* Rail */
.rail { grid-area: rail; align-self: center; display: grid; grid-template-columns: 2px 1fr; column-gap: 16px; row-gap: 14px; }
.rail-time { grid-column: 1 / -1; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--text-faint); }
.rail-track { grid-column: 1; grid-row: 2; background: var(--hairline); border-radius: 2px; position: relative; overflow: hidden; }
.rail-fill { position: absolute; inset: 0; background: linear-gradient(var(--kicker), var(--gold)); transform-origin: top; transform: scaleY(0); }
.rail-list { grid-column: 2; grid-row: 2; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rail-list button {
  all: unset; cursor: pointer; font-size: 14px; color: var(--text-lead);
  transition: color .4s ease, transform .4s ease; display: block;
}
.rail-list button:hover { color: var(--text-cfd); }
.rail-list button[aria-current="step"] { color: var(--text-hi); transform: translateX(4px); }
.rail-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* Copy */
.copy { grid-area: copy; display: flex; flex-direction: column; gap: 40px; }
.chapters { display: grid; }
.chapter { grid-area: 1 / 1; align-self: end; }
.js .chapter { opacity: 0; visibility: hidden; }
.js .chapter.is-active { visibility: visible; }
.chapter p:not(.kicker) { color: var(--text-mid); font-size: clamp(17px, 1.4vw, 20px); max-width: 30ch; margin-top: 28px; }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--kicker); margin-bottom: 18px; }
.chapter.morning .kicker { color: var(--gold); }
.cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* Device */
.device { grid-area: device; align-self: stretch; min-height: 0; display: grid; place-items: center; padding: 24px 0 40px; }
.phone {
  grid-area: 1 / 1;
  height: min(100%, 760px); aspect-ratio: 621 / 1329;
  border-radius: 13.5% / 6.2%;
  padding: 1.45%;
  background: #07080C;
  box-shadow: 0 0 0 1.5px #343C5E, 0 50px 100px rgba(0,0,0,.6), 0 12px 30px rgba(0,0,0,.4);
}
.screens { position: relative; width: 100%; height: 100%; border-radius: 12.4% / 5.7%; overflow: hidden; background: var(--bg-bottom); }
.screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js .screens img { opacity: 0; }
.js .screens img:first-child { opacity: 1; }
/* The last beat: the app's launch, the hollow and the name under it, in the phone's place */
.big-mark { grid-area: 1 / 1; width: min(380px, 100%); display: flex; flex-direction: column; align-items: center; opacity: 0; }
.big-name { margin-top: clamp(28px, 3vw, 40px); font-size: clamp(30px, 2.6vw, 38px); font-weight: 300; letter-spacing: -0.015em; line-height: 1; color: var(--text-hi); }
html:not(.js) .big-mark { display: none; }

.scroll-hint {
  position: absolute; left: 50%; bottom: 20px; translate: -50% 0;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint);
}
.scroll-hint::after { content: ""; display: block; width: 1px; height: 24px; margin: 8px auto 0; background: linear-gradient(var(--text-faint), transparent); }

/* Footer */
.footer {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 28px var(--gutter) max(32px, env(safe-area-inset-bottom));
  background: var(--bg-deep); color: var(--text-lead); font-size: 14px;
  border-top: 1px solid var(--hairline);
}
.footer nav { display: flex; gap: 24px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--text-hi); }

/* Legal pages (privacy.html, terms.html): one readable column under the same menu */
.legal-page { background: radial-gradient(90% 40% at 50% 0%, var(--stage), var(--bg-bottom) 60%, var(--bg-deep)); }
.legal { max-width: 720px; margin: 0 auto; padding: calc(var(--nav-h) + 72px) var(--gutter) 112px; }
.legal h1 { font-size: clamp(40px, 6vw, 64px); }
.legal .kicker { margin-bottom: 20px; }
.legal .updated { color: var(--text-lead); font-size: 14px; margin-top: 20px; }
.legal .summary {
  margin-top: 40px; padding: 26px 28px; border-radius: 22px;
  background: var(--whisper); border: 1px solid var(--hairline);
}
.legal .summary h2 { margin-top: 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--kicker); }
.legal h2 { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; margin: 56px 0 16px; }
.legal p, .legal li { color: var(--text-cfd); font-size: 17px; line-height: 1.65; }
.legal p + p, .legal ul + p, .legal p + ul, .legal ol + p, .legal p + ol { margin-top: 14px; }
.legal ul, .legal ol { margin: 0; padding-left: 22px; }
.legal h2 { scroll-margin-top: calc(var(--nav-h) + 48px); }
/* Support opens on one larger line: where to write */
.legal .lead { margin-top: 28px; font-size: 20px; line-height: 1.5; color: var(--text-hi); }
.legal li + li { margin-top: 8px; }
.legal a { color: var(--text-hi); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.legal strong { color: var(--text-hi); font-weight: 600; }
.legal address { font-style: normal; color: var(--text-cfd); font-size: 17px; line-height: 1.65; }
/* Details still to fill in before these pages go live */
.todo { color: var(--gold); background: rgba(236,210,154,.12); border-radius: 6px; padding: 1px 6px; }

/* No JS: the chapters simply stack */
html:not(.js) .stage { position: relative; height: auto; margin: 0; }
html:not(.js) .chapters { gap: 64px; }
html:not(.js) .beats, html:not(.js) .rail, html:not(.js) .scroll-hint { display: none; }

/* ——— Tablet & phone: stacked frame (copy · phone · button) ——— */
@media (max-width: 900px) {
  :root { --nav-h: 66px; }
  body { font-size: 16px; }
  h1, h2 { font-size: clamp(34px, 10vw, 52px); }
  .stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "rail" "copy" "device" "cta";
    align-items: stretch; row-gap: 0;
    padding: calc(var(--nav-h) + 4px) var(--gutter) max(16px, env(safe-area-inset-bottom));
    text-align: center;
    background: radial-gradient(120% 60% at 50% 60%, var(--stage), var(--bg-bottom) 60%, var(--bg-deep));
  }
  .light.night { background: radial-gradient(90% 40% at 50% 105%, rgba(var(--amber), .26), rgba(var(--amber), .08) 55%, transparent 80%); transform-origin: 50% 100%; }
  .light.dawn { background: radial-gradient(100% 45% at 50% -8%, rgba(var(--dawn), .30), rgba(255,159,122,.1) 50%, transparent 80%); }

  /* Rail becomes story-style segments */
  .rail { display: block; margin-bottom: 18px; }
  .rail-time, .rail-track { display: none; }
  .rail-list { flex-direction: row; gap: 4px; }
  .rail-list li { flex: 1; }
  .rail-list button { width: 100%; height: 3px; padding: 8px 0; font-size: 0; position: relative; transform: none !important; }
  .rail-list button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; translate: 0 -50%; border-radius: 2px; background: var(--hairline); transition: background .4s ease; }
  .rail-list button.is-past::before, .rail-list button[aria-current="step"]::before { background: var(--accent); }

  .copy { display: contents; }
  .chapters { grid-area: copy; }
  .chapter { align-self: start; }
  .chapter p:not(.kicker) { margin: 10px auto 0; font-size: 15px; max-width: 34ch; }
  .kicker { margin-bottom: 8px; font-size: 11px; }
  .device { padding: 18px 0 14px; min-height: 0; }
  .phone { height: 100%; max-height: 640px; }
  .cta { grid-area: cta; justify-content: center; gap: 12px; }
  .store-badge { padding: 9px 18px 9px 15px; }
  .store-badge span { font-size: 18px; }
  .fine { font-size: 13px; }
  .scroll-hint { display: none; }
  .nav { inset: max(10px, env(safe-area-inset-top)) 0 auto; }
  .pill { min-height: 48px; padding: 0 16px; border-radius: 18px; }
  .pill-side { padding: 0 18px; font-size: 14px; }
  .nav-links { display: none; }
  .brand { gap: 8px; }
  .brand-mark { width: 34px; height: 34px; margin: -4px; }
  .brand-name { font-size: 20px; }
  .big-name { margin-top: 24px; font-size: 28px; }
}

@media (max-height: 640px) and (max-width: 900px) {
  .chapter p:not(.kicker) { display: none; }
}