/* Vocab Companion — site styles
   Palette: blue-grey paper, ink, cobalt.
   Type: Bricolage Grotesque (display + body), Gentium Book Plus (accents),
   JetBrains Mono (keys, labels). App mock-ups use the system font and the
   macOS 26 system colours and metrics measured from AppKit. */

:root {
  --ground: #edf0f3;
  --surface: #ffffff;
  --sunken: #e2e7ec;
  --ink: #15202b;
  --muted: #566372;
  --rule: #cfd6de;
  --accent: #2743d6;
  --accent-ink: #ffffff;

  /* macOS system look (Aqua). Follows the page theme, like the app follows system appearance. */
  --sys-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --lbl: rgba(0, 0, 0, 0.85);
  --lbl2: rgba(0, 0, 0, 0.5);
  --lbl3: rgba(0, 0, 0, 0.26);
  --lbl4: rgba(0, 0, 0, 0.1);
  --sep: rgba(0, 0, 0, 0.1);
  --win-bg: #ffffff;
  --pop-bg: rgba(250, 250, 250, 0.92);
  --pop-bar: rgba(255, 255, 255, 0.5);
  --btn: rgba(0, 0, 0, 0.06);
  --sys-accent: #007aff;
  --sys-blue: #0088ff;
  --sys-green: #34c759;
  --sys-orange: #ff8d28;
  --sys-red: #ff383c;

  /* The film frame is always a dark scene, in both themes. */
  --film-sub: #f4f1e6;

  --f-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-entry: "Gentium Book Plus", "Charis SIL", "Iowan Old Style", Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.75rem;
  --step-3: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  --step-4: clamp(2.6rem, 1.6rem + 4.4vw, 4.5rem);

  --wrap: 72rem;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0e141b;
    --surface: #161f29;
    --sunken: #1c2733;
    --ink: #e4e9ee;
    --muted: #93a0ae;
    --rule: #2a3643;
    --accent: #93a6ff;
    --accent-ink: #0e141b;

    --lbl: rgba(255, 255, 255, 0.85);
    --lbl2: rgba(255, 255, 255, 0.55);
    --lbl3: rgba(255, 255, 255, 0.25);
    --lbl4: rgba(255, 255, 255, 0.1);
    --sep: rgba(255, 255, 255, 0.1);
    --win-bg: #1e1e1e;
    --pop-bg: rgba(34, 34, 34, 0.9);
    --pop-bar: rgba(255, 255, 255, 0.04);
    --btn: rgba(255, 255, 255, 0.12);
    --sys-blue: #0091ff;
    --sys-green: #30d158;
    --sys-orange: #ff9230;
    --sys-red: #ff4245;
  }
}

:root[data-theme="dark"] {
  --ground: #0e141b;
  --surface: #161f29;
  --sunken: #1c2733;
  --ink: #e4e9ee;
  --muted: #93a0ae;
  --rule: #2a3643;
  --accent: #93a6ff;
  --accent-ink: #0e141b;

  --lbl: rgba(255, 255, 255, 0.85);
  --lbl2: rgba(255, 255, 255, 0.55);
  --lbl3: rgba(255, 255, 255, 0.25);
  --lbl4: rgba(255, 255, 255, 0.1);
  --sep: rgba(255, 255, 255, 0.1);
  --win-bg: #1e1e1e;
  --pop-bg: rgba(34, 34, 34, 0.9);
  --pop-bar: rgba(255, 255, 255, 0.04);
  --btn: rgba(255, 255, 255, 0.12);
  --sys-blue: #0091ff;
  --sys-green: #30d158;
  --sys-orange: #ff9230;
  --sys-red: #ff4245;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-inline: clamp(16px, 4vw, 40px);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: var(--step-0);
  line-height: 1.55;
  font-optical-sizing: auto;
}

img, svg { max-width: 100%; }

a { color: var(--accent); text-underline-offset: 0.18em; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.08;
  text-wrap: balance;
  font-weight: 700;
  letter-spacing: -0.02em;
}

p { margin: 0; }

.wrap { max-width: var(--wrap); margin-inline: auto; }

.label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.9em;
  height: 1.9em;
  padding-inline: 0.4em;
  font-family: var(--f-mono);
  font-size: 0.85em;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-bottom-width: 3px;
  border-radius: 6px;
}

/* ---------- Header ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding-block: 22px;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark span {
  font-family: var(--f-entry);
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
}

.site-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: var(--step--1); }
.site-nav a:hover { color: var(--ink); }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(24px, 5vw, 64px) clamp(56px, 8vw, 104px);
}

.hero h1 { font-size: var(--step-4); letter-spacing: -0.035em; }
.hero h1 em {
  font-family: var(--f-entry);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.hero .lede {
  margin-top: 22px;
  max-width: 34ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--muted);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 32px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--ground);
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--step--1);
  text-decoration: none;
}
.badge svg { width: 16px; height: 16px; fill: currentColor; }

.cta-note { font-size: var(--step--1); color: var(--muted); }

/* Film frame with the capture popover over it */

.scene { display: grid; gap: 14px; margin: 0; }

.stage { position: relative; container-type: inline-size; }

.film {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    radial-gradient(38% 55% at 22% 48%, rgba(255, 176, 92, 0.34), transparent 70%),
    radial-gradient(30% 40% at 70% 36%, rgba(110, 150, 210, 0.2), transparent 70%),
    radial-gradient(60% 60% at 50% 110%, rgba(20, 30, 42, 0.9), transparent 70%),
    linear-gradient(160deg, #1d2833 0%, #121a22 55%, #0b1016 100%);
  box-shadow: 0 30px 60px -30px rgba(10, 20, 30, 0.55);
  container-type: inline-size;
}

.film::before, .film::after {
  content: "";
  position: absolute;
  bottom: 0;
  border-radius: 50% 50% 0 0;
  background: #0a0f15;
  filter: blur(2px);
}
.film::before { left: 10%; width: 22%; height: 52%; }
.film::after { left: 36%; width: 17%; height: 44%; opacity: 0.85; }

.subtitle {
  position: absolute;
  inset-inline: 0;
  bottom: 25%;
  z-index: 1;
  padding-inline: 8%;
  text-align: center;
  font-weight: 600;
  font-size: clamp(0.78rem, 3.3cqi, 1.4rem);
  line-height: 1.3;
  color: var(--film-sub);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Generic video-player chrome, so the frame reads as a player at a glance */
.player-top {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.2cqi;
  padding: 2.6cqi 3cqi 7cqi;
  background: linear-gradient(rgba(0, 0, 0, 0.6), transparent);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--sys-font);
  font-size: max(9px, 2cqi);
  font-weight: 600;
}

.player-bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: 2cqi;
  padding: 9cqi 3cqi 2.4cqi;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
  color: #fff;
}

.timeline {
  position: relative;
  height: max(3px, 0.6cqi);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}
.timeline span { position: absolute; inset-block: 0; left: 0; border-radius: inherit; }
.timeline .buffered { width: 74%; background: rgba(255, 255, 255, 0.3); }
.timeline .played { width: 61.6%; background: #fff; }
.timeline .thumb {
  top: 50%;
  bottom: auto;
  left: 61.6%;
  width: max(9px, 1.9cqi);
  height: max(9px, 1.9cqi);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 max(3px, 0.6cqi) rgba(255, 255, 255, 0.2);
}

.player-row {
  display: flex;
  align-items: center;
  gap: 2.8cqi;
}
.pi { flex: none; width: max(12px, 3.4cqi); height: max(12px, 3.4cqi); }
.player-top .pi { width: max(10px, 2.6cqi); height: max(10px, 2.6cqi); }
.time {
  font-family: var(--sys-font);
  font-size: max(9px, 1.9cqi);
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
  white-space: nowrap;
}

.scene-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: var(--step--1);
  color: var(--muted);
}
.keys { display: inline-flex; gap: 4px; }

/* ---------- App mock-ups ----------
   Built from the SwiftUI sources. --px is one macOS point at the mock's scale.
   Type: body/headline 13, callout 12, caption 10. */

.mac {
  --px: 1px;
  font-family: var(--sys-font);
  color: var(--lbl);
  line-height: 1.22;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.mac svg { width: calc(14 * var(--px)); height: calc(14 * var(--px)); flex: none; }

/* Mock columns scale their mock down when narrower than the real window */
.split > div:has(> .mac) { container-type: inline-size; }
.split .mac { --px: min(1px, calc(100cqi / 560)); }

/* Menu-bar popover: 560 × 260 in total, footer included */
.pop {
  display: flex;
  flex-direction: column;
  width: calc(560 * var(--px));
  height: calc(260 * var(--px));
  overflow: hidden;
  background: var(--pop-bg);
  border-radius: calc(12 * var(--px));
  box-shadow: 0 calc(16 * var(--px)) calc(40 * var(--px)) calc(-8 * var(--px)) rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
}

.stage .pop {
  --px: calc(100cqi * 0.6 / 560);
  position: absolute;
  top: 3%;
  right: 3%;
  z-index: 2;
  animation: drop 520ms 250ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.pop-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.pop-text {
  min-height: calc(76 * var(--px));
  padding: calc(17 * var(--px)) calc(21 * var(--px)) 0;
  font-size: calc(20 * var(--px));
  font-weight: 500;
}
.caret {
  display: inline-block;
  width: max(1px, calc(1.5 * var(--px)));
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.18em;
  background: var(--sys-accent);
  animation: blink 1.1s steps(1) infinite;
}

.pop-sep { flex: none; height: 1px; margin-inline: calc(16 * var(--px)); background: var(--sep); }
.pop-sep.full { margin-inline: 0; }

.pop-context {
  padding: calc(10 * var(--px)) calc(16 * var(--px));
  font-size: calc(14 * var(--px));
  color: var(--lbl2);
}

.pop-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--px));
  margin-top: auto;
  padding: calc(10 * var(--px)) calc(16 * var(--px));
  background: var(--pop-bar);
}
.grow { flex: 1; }
.pop-bar .icon { display: grid; place-items: center; width: calc(24 * var(--px)); height: calc(24 * var(--px)); color: var(--lbl); }

.btn {
  display: inline-flex;
  align-items: center;
  height: calc(24 * var(--px));
  padding-inline: calc(12 * var(--px));
  border-radius: 999px;
  font-size: calc(13 * var(--px));
  white-space: nowrap;
  background: var(--btn);
  color: var(--lbl);
}
.btn.primary { background: var(--sys-accent); color: #fff; }

.pop-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--px));
  padding: calc(8 * var(--px)) calc(16 * var(--px));
  font-size: calc(13 * var(--px));
}
.pop-foot > span { display: inline-flex; align-items: center; gap: calc(4 * var(--px)); }
.pop-foot .avatar { width: calc(28 * var(--px)); justify-content: center; color: var(--lbl2); }

/* Result panel — clipped by its ScrollView, like in the app */
.result-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.result-scroll::-webkit-scrollbar { display: none; }
.result { display: grid; gap: calc(10 * var(--px)); padding: calc(16 * var(--px)); }
.result .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(8 * var(--px)); }
.result .src { font-size: calc(20 * var(--px)); font-weight: 600; }
.result .chip { padding: calc(2 * var(--px)) calc(6 * var(--px)); border-radius: 999px; background: var(--lbl4); font-size: calc(10 * var(--px)); color: var(--lbl2); }
.result .tr { font-size: calc(18 * var(--px)); color: var(--sys-accent); }
.result .sec { font-size: calc(12 * var(--px)); color: var(--lbl2); }
.result .ex { display: grid; gap: calc(2 * var(--px)); font-size: calc(12 * var(--px)); }
.result .ex span + span { color: var(--lbl2); }
.result .tip { padding-top: calc(2 * var(--px)); font-size: calc(10 * var(--px)); color: var(--lbl3); }
.result .pop-sep { margin: calc(2 * var(--px)) 0; }

.saved { display: inline-flex; align-items: center; gap: calc(4 * var(--px)); font-size: calc(10 * var(--px)); color: var(--lbl2); }

/* Review window: 32 pt title bar + 560 × 380 content */
.win {
  display: flex;
  flex-direction: column;
  width: calc(560 * var(--px));
  overflow: hidden;
  background: var(--win-bg);
  border-radius: calc(16 * var(--px));
  box-shadow: 0 calc(22 * var(--px)) calc(48 * var(--px)) calc(-18 * var(--px)) rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(0, 0, 0, 0.28);
}
.win-title {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(32 * var(--px));
  font-size: calc(13 * var(--px));
  font-weight: 600;
  color: var(--lbl);
}
.lights { position: absolute; top: calc(9 * var(--px)); left: calc(9 * var(--px)); display: flex; gap: calc(9 * var(--px)); }
.lights i { width: calc(14 * var(--px)); height: calc(14 * var(--px)); border-radius: 50%; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }

.win-content { display: flex; flex-direction: column; height: calc(380 * var(--px)); }
.win-cardwrap { flex: 1; min-height: 0; display: flex; padding: calc(24 * var(--px)); }
.win-card {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--px));
  padding: calc(28 * var(--px));
  background: var(--win-bg);
  border-radius: calc(16 * var(--px));
  box-shadow: 0 calc(2 * var(--px)) calc(16 * var(--px)) rgba(0, 0, 0, 0.08);
}
.win-card > * { flex: none; }
.win-card .srcline { font-size: calc(13 * var(--px)); font-weight: 600; color: var(--lbl2); }
.win-card .tr { font-size: calc(24 * var(--px)); font-weight: 600; }
.win-card .ipa { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: calc(13 * var(--px)); color: var(--lbl2); }
.win-card .body { font-size: calc(13 * var(--px)); }
.win-card .ex { display: grid; gap: calc(2 * var(--px)); padding-block: calc(4 * var(--px)); font-size: calc(13 * var(--px)); }
.win-card .ex span + span { font-size: calc(12 * var(--px)); color: var(--lbl2); }
.win-card .notes { font-size: calc(12 * var(--px)); color: var(--lbl2); }

.rate {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(12 * var(--px));
  padding: calc(12 * var(--px)) calc(24 * var(--px));
  border-top: 1px solid var(--sep);
}
.rate span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--px));
  min-height: calc(50 * var(--px));
  border-radius: calc(12 * var(--px));
  color: #fff;
  font-size: calc(13 * var(--px));
  font-weight: 600;
  line-height: 1.15;
}
.rate small { font-size: calc(10 * var(--px)); font-weight: 400; opacity: 0.7; }
.rate .again { background: var(--sys-red); }
.rate .hard { background: var(--sys-orange); }
.rate .good { background: var(--sys-green); }
.rate .easy { background: var(--sys-blue); }

.mock-caption { margin-top: 14px; }

/* Hero demo: the popover steps through type → explaining → result → learning */
.demo .pop-body { position: relative; }
.demo .pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transition: opacity 280ms ease, transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.demo .pane-result { opacity: 0; transform: translateX(calc(28 * var(--px))); }
.demo[data-step="result"] .pane-capture,
.demo[data-step="learning"] .pane-capture { opacity: 0; transform: translateX(calc(-28 * var(--px))); }
.demo[data-step="result"] .pane-result,
.demo[data-step="learning"] .pane-result { opacity: 1; transform: none; }

.demo .caret { visibility: hidden; }
.demo[data-step="type"] .caret { visibility: visible; }

.working { display: none; align-items: center; gap: calc(6 * var(--px)); font-size: calc(10 * var(--px)); color: var(--lbl2); }
.demo[data-step="explaining"] .working { display: inline-flex; }
.demo[data-step="explaining"] .btn-explain { opacity: 0.4; }
.demo[data-step="explaining"] .pane-capture .icon { opacity: 0.35; }
.spin {
  width: calc(14 * var(--px));
  height: calc(14 * var(--px));
  border: calc(2 * var(--px)) solid var(--lbl4);
  border-top-color: var(--lbl2);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

.demo .when-learning { display: none; }
.demo[data-step="learning"] .when-learning { display: inline-flex; }
.demo[data-step="learning"] .when-saved { display: none; }
.saved.enrolled { color: var(--sys-green); }

.demo .btn { transition: transform 120ms ease, filter 120ms ease; }
.demo .btn.pressing { transform: scale(0.95); filter: brightness(0.8); }

.demo-steps { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.demo-steps button {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 0 8px;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--step--1);
  color: var(--muted);
  cursor: pointer;
}
.demo-steps button:hover { color: var(--ink); }
.demo-steps b { font-family: var(--f-mono); font-weight: 400; font-size: 0.75rem; color: var(--accent); }
.demo-steps .bar { position: absolute; inset-inline: 0; bottom: 0; height: 2px; overflow: hidden; border-radius: 2px; background: var(--rule); }
.demo-steps .bar::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.demo-steps button.active { color: var(--ink); }
.demo-steps button.active .bar::after { animation: fill var(--dur, 2s) linear forwards; }
.demo-steps.manual button.active .bar::after { animation: none; transform: none; }

/* Hero demo, review scene: the film gives way to the desktop and the Review window */
.desktop {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity 450ms ease;
  background:
    radial-gradient(70% 60% at 20% 100%, rgba(236, 140, 84, 0.55), transparent 70%),
    radial-gradient(60% 70% at 90% 10%, rgba(70, 120, 170, 0.55), transparent 70%),
    linear-gradient(170deg, #253447 0%, #3d4a5c 45%, #6e5d57 100%);
}
.menubar {
  display: flex;
  align-items: center;
  gap: 2cqi;
  height: max(14px, 3.6cqi);
  padding-inline: 2.4cqi;
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--sys-font);
  font-size: max(8px, 1.8cqi);
  font-weight: 500;
}
.mb-icon { width: max(10px, 2.3cqi); height: max(10px, 2.3cqi); }
.later {
  position: absolute;
  left: 2.4cqi;
  bottom: 2.4cqi;
  padding: 0.6cqi 1.4cqi;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--f-mono);
  font-size: max(9px, 1.6cqi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.stage[data-scene="review"] .desktop { opacity: 1; }

.stage .pop { transition: opacity 300ms ease; }
.stage[data-scene="review"] .pop { opacity: 0; }

.stage .demo-win {
  --px: calc(100cqi * 0.72 / 560);
  position: absolute;
  top: 5.6cqi;
  left: 50%;
  z-index: 4;
  opacity: 0;
  transform: translateX(-50%) scale(0.96);
  transition: opacity 350ms ease, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.stage[data-scene="review"] .demo-win { opacity: 1; transform: translateX(-50%); }

.demo-win .face-back, .demo-win .review-empty { display: none; }
.stage[data-step="rate"] .demo-win .face-front { display: none; }
.stage[data-step="rate"] .demo-win .face-back { display: contents; }
.stage[data-step="done"] .demo-win .review-cards { display: none; }
.stage[data-step="done"] .demo-win .review-empty { display: flex; }

.demo-win .face-front {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--px));
  text-align: center;
}
.front-src { font-size: calc(28 * var(--px)); font-weight: 600; }
.front-ctx { font-size: calc(12 * var(--px)); color: var(--lbl2); }
.front-hint { font-size: calc(10 * var(--px)); color: var(--lbl3); }
.stage[data-step="recall"] .demo-win .rate span { opacity: 0.4; filter: grayscale(0.7); }
.demo-win .rate span { transition: transform 120ms ease, filter 120ms ease; }
.demo-win .rate span.pressing { transform: scale(0.95); filter: brightness(0.8); }

.review-empty {
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--px));
  padding: calc(40 * var(--px));
  text-align: center;
}
.mac .seal { width: calc(36 * var(--px)); height: calc(36 * var(--px)); }
.empty-title { font-size: calc(15 * var(--px)); font-weight: 600; }
.empty-text { max-width: calc(320 * var(--px)); font-size: calc(12 * var(--px)); color: var(--lbl2); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fill { to { transform: scaleX(1); } }

@keyframes drop { from { transform: translateY(-12px); } }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(56px, 8vw, 104px);
  border-top: 1px solid var(--rule);
}

.section-head { display: grid; gap: 14px; max-width: 40rem; }
.section-head h2 { font-size: var(--step-3); }
.section-head p { color: var(--muted); font-size: var(--step-1); line-height: 1.45; }

/* Steps: a real sequence, so numbered */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 48px);
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li { display: grid; gap: 8px; align-content: start; counter-increment: step; }
.steps li::before {
  content: counter(step);
  font-family: var(--f-entry);
  font-style: italic;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--accent);
}
.steps h3 { font-size: var(--step-1); }
.steps p { color: var(--muted); max-width: 32ch; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.split.flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }

.fields { display: grid; margin: 28px 0 0; border-top: 1px solid var(--rule); }
.fields div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 4px 16px;
  padding-block: 10px;
  border-bottom: 1px solid var(--rule);
}
.fields dt { padding-top: 0.25em; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fields dd { margin: 0; }

/* ---------- Surfaces ---------- */

.surfaces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 44px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.surface {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(22px, 4vw, 40px);
  background: var(--ground);
}
.surface h3 { font-size: var(--step-2); }
.surface ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.surface li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 10px; }
.surface li::before { content: "—"; color: var(--muted); }
.sync-note {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px clamp(22px, 4vw, 40px);
  background: var(--sunken);
  color: var(--muted);
  font-size: var(--step--1);
}
.sync-note strong { color: var(--ink); font-weight: 600; }

.promises { display: grid; gap: 22px; margin: 28px 0 0; }
.promises div { display: grid; gap: 4px; }
.promises dt { font-weight: 700; font-size: var(--step-1); }
.promises dd { margin: 0; color: var(--muted); max-width: 38ch; }

/* ---------- Pricing ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 52rem;
  margin-top: 44px;
}
.plan {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.plan.pro { background: var(--surface); border-color: var(--accent); }
.plan h3 { font-size: var(--step-1); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-variant-numeric: tabular-nums; }
.price strong { font-size: var(--step-3); letter-spacing: -0.03em; }
.price span { color: var(--muted); font-size: var(--step--1); }
.plan ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plan li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 10px; }
.plan li::before { content: "✓"; color: var(--accent); font-weight: 700; }
.fine { margin-top: 18px; max-width: 52rem; font-size: var(--step--1); color: var(--muted); }

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding-block: 32px 48px;
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--muted);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }

/* ---------- Document pages (privacy, terms, support) ---------- */

.doc {
  max-width: 44rem;
  margin-inline: auto;
  padding-block: clamp(24px, 5vw, 56px) clamp(56px, 8vw, 96px);
}
.doc header { display: grid; gap: 12px; padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.doc h1 { font-size: var(--step-3); }
.doc h2 { margin-top: 44px; font-size: var(--step-1); letter-spacing: -0.01em; }
.doc p, .doc ul, .doc dl { margin-top: 14px; max-width: 65ch; }
.doc ul { padding-left: 1.2em; }
.doc li + li { margin-top: 6px; }
.doc dl { display: grid; gap: 22px; margin-top: 20px; }
.doc dt { font-weight: 700; }
.doc dd { margin: 6px 0 0; color: var(--muted); }
.doc .contact {
  display: grid;
  gap: 6px;
  margin-top: 24px;
  padding: 22px;
  background: var(--surface);
  border-radius: var(--radius);
}
.doc .contact a { font-size: var(--step-1); font-weight: 600; }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.doc th, .doc td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.doc th { font-family: var(--f-mono); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.table-scroll { margin-top: 18px; overflow-x: auto; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero, .split, .split.flip { grid-template-columns: minmax(0, 1fr); }
  .split.flip > :first-child { order: 2; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .surfaces { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  /* Square frame on phones: the windows still overlay the video, with subtitle and controls visible below */
  .film { aspect-ratio: 1 / 1; }
  .stage .pop {
    --px: calc(100cqi * 0.92 / 560);
    top: 4%;
    right: 4%;
  }
  .stage .demo-win {
    --px: calc(100cqi * 0.92 / 560);
    top: 7cqi;
  }
  .fields div { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .demo-steps button.active .bar::after { transform: none; }
}