/* ============================================================
   Books & Vocab public site shell  (HAND-AUTHORED — the official-website surface.)

   Layers on top of kg-tokens.css (design tokens, generated, iOS-mirrored) and
   kg-components.css (primitives). This file owns the *website* itself: brand
   @font-face, the nav/footer chrome, the prose column, and the editorial
   typography — all expressed through tokens so it stays in lock-step with iOS.

   Surface-local @font-face: the woff2 live at /static/fonts/ (served by the
   FastAPI StaticFiles mount). Headings use Cormorant Garamond — the brand serif
   already shipped for italics — self-hosted upright so the public face matches
   the app's serif voice instead of falling back to a system face.

   北極星 mapping (mirrors kg-components.css): single warm surface, no borders
   (divider instead), shadow capped at z1 for resting cards, one brand colour
   (奶黃 brand-hero) for the single CTA, motion gated by reduced-motion.
   ============================================================ */

/* --- Brand fonts (served from /static/fonts/) ------------------------------ */

@font-face { font-family: 'ElmsSans'; src: url('/static/fonts/ElmsSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'ElmsSans'; src: url('/static/fonts/ElmsSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'CormorantGaramond'; src: url('/static/fonts/CormorantGaramond-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'CormorantGaramond'; src: url('/static/fonts/CormorantGaramond-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'CormorantGaramond'; src: url('/static/fonts/CormorantGaramond-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'CormorantGaramond'; src: url('/static/fonts/CormorantGaramond-Italic.woff2') format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; }

/* --- Site-local tokens ----------------------------------------------------- */
/* Web heading serif: lead with the self-hosted brand serif, then the iOS
   system serif (unavailable on web), then a CJK serif for 中文 headings. */
:root {
  --site-serif: 'CormorantGaramond', 'Athelas', 'Noto Serif TC', 'Songti TC', Georgia, serif;
  --site-measure: 42rem;          /* prose column width */
  --site-nav-h: 56px;
}

/* --- Reset / base (北極星 1: one warm surface) ----------------------------- */

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

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

body.kg-surface {
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--accent-subtle); color: var(--text-primary); }

/* Skip link (a11y) — visually hidden until focused. */
.skip-link {
  position: absolute; left: var(--sp-3); top: -3rem;
  background: var(--card-bg); color: var(--text-primary);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-control);
  box-shadow: var(--elevation-z2); z-index: 50;
  transition: top var(--motion-quick);
}
.skip-link:focus { top: var(--sp-3); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-control); }

/* --- Nav (北極星 1: shares the page surface, no chrome divider line) -------- */

.site-nav {
  position: sticky; top: 0; z-index: 20;
  height: var(--site-nav-h);
  display: flex; align-items: center; gap: var(--sp-5);
  padding: 0 var(--page-h-padding);
  background: color-mix(in srgb, var(--page-bg) 88%, transparent);
  /* iOS light nav bar is a flat transparent bar (no material). Keep a neutral
     blur for web sticky ergonomics, but no saturate — that warm-shift has no
     iOS basis (scan #8). */
  backdrop-filter: blur(var(--blur-material));
  -webkit-backdrop-filter: blur(var(--blur-material));
}
.site-nav__brand {
  font-family: var(--site-serif); font-size: var(--text-h2);
  font-weight: 600; letter-spacing: var(--tracking-h2-tight);
  color: var(--text-primary); text-decoration: none;
  margin-right: auto;
}
.site-nav__links { display: flex; gap: var(--sp-4); list-style: none; align-items: center; }
.site-nav__links a {
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: var(--tracking-uppercase); text-transform: uppercase;
  color: var(--text-tertiary); text-decoration: none;
  transition: color var(--motion-quick);
}
.site-nav__links a:hover { color: var(--text-primary); }
.site-nav__links a[aria-current="page"] { color: var(--accent); }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--toggle-size); height: var(--toggle-size); border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--tint); cursor: pointer;
  font-size: var(--toggle-glyph); line-height: 1;
  transition: background var(--motion-quick), color var(--motion-quick),
              transform var(--spring-press), opacity var(--spring-press);
}
.theme-toggle:hover { background: var(--muted-fill); color: var(--text-primary); }
/* Press feedback — icon button → iOS TapFeedback triplet (scale + opacity). */
.theme-toggle:active { transform: scale(var(--press-scale)); opacity: var(--press-opacity); }

/* --- Page column ----------------------------------------------------------- */

.site-page {
  flex: 1;
  width: 100%; max-width: var(--site-measure);
  margin: 0 auto;
  padding: var(--sp-10) var(--page-h-padding) var(--sp-10);
}

/* Card-less prose pages (guide / terms / privacy) get an iOS-faithful white
   panel sitting on the --page-bg gutter. The app screen is dominated by white
   cards over a thin warm-grey page, so bare page-bg reads flatter/greyer than
   iOS even though the token value is identical (scan #1 light-bg verdict).
   Card-dominant pages (support) stay on the transparent column and keep their
   standalone cards instead. */
.site-page--panel {
  flex: 0 0 auto;
  max-width: calc(var(--site-measure) + 2 * var(--sp-8));
  margin: var(--sp-8) auto;
  padding: var(--sp-9) var(--sp-8);
  background: var(--card-bg);
  border: var(--sp-hairline) solid color-mix(in srgb, var(--card-border) 70%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-z1);
}
/* Inside the panel, nested .kg-card blocks flatten to divider-delimited rows (one
   card per screen, the iOS Settings model) so they never stack white-on-white.
   Higher specificity (0,2,0) neutralises the .kg-card primitive's resting shell. */
.site-page--panel .checklist,
.site-page--panel .faq-item,
.site-page--panel .contact-card {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}

.page-eyebrow {
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: var(--tracking-uppercase); text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-3);
}
.site-page h1 {
  font-family: var(--site-serif);
  font-size: var(--text-hero); line-height: var(--leading-display);
  font-weight: 700;                       /* match iOS Athelas-Bold heft (scan #5) */
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}
.page-lead {
  font-size: var(--text-subhead); line-height: var(--leading-body);
  color: var(--text-secondary);
  margin-bottom: var(--sp-9);
}

/* --- Section --------------------------------------------------------------- */

.section { margin-bottom: var(--sp-9); }
.section > h2 {
  font-family: var(--site-serif);
  font-size: var(--text-h2); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-h2-tight); font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--sp-4);
}
.section p {
  color: var(--text-secondary); line-height: var(--leading-body);
  margin-bottom: var(--sp-3);
}
.section p:last-child { margin-bottom: 0; }
.section strong { color: var(--text-primary); font-weight: 700; }

/* Inline links — accent, underline on hover (北極星 4: accent is passive). */
.section a:not(.kg-btn), .contact-email, footer a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: border-color var(--motion-quick), color var(--motion-quick);
}
.section a:not(.kg-btn):hover, .contact-email:hover, footer a:hover {
  border-bottom-color: var(--accent);
}

/* --- Data table (北極星 2: divider lines, no boxed borders) ----------------- */

.data-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-1); }
.data-table th {
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: var(--tracking-uppercase); text-transform: uppercase;
  color: var(--text-tertiary); text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-strong);
}
.data-table td {
  font-size: var(--text-subhead); color: var(--text-secondary);
  padding: var(--sp-3); border-bottom: 1px solid var(--divider);
  vertical-align: top; line-height: var(--leading-body);
}
.data-table tr:last-child td { border-bottom: 0; }

/* --- Checklist (.kg-card primitive + divider rows, accent marks) ----------- */
/* Visual shell (fill/hairline/radius/shadow) comes from .kg-card in markup.
   Here: drop the primitive's card-padding (rows own their padding) and clip
   the divider rows to the rounded corners. */

.checklist {
  list-style: none;
  padding: 0; overflow: hidden;
}
.checklist li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--divider);
  font-size: var(--text-subhead); color: var(--text-secondary);
  line-height: var(--leading-body);
}
.checklist li:last-child { border-bottom: 0; }
.check-mark { color: var(--success); flex-shrink: 0; margin-top: 2px; font-weight: 700; }

/* --- Plain list (em-dash bullets) ------------------------------------------ */

.plain-list { list-style: none; }
.plain-list li {
  position: relative; padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
  color: var(--text-secondary); line-height: var(--leading-body);
}
.plain-list li::before {
  content: '—'; position: absolute; left: 0; top: var(--sp-1);
  color: var(--accent);
}

/* --- FAQ (native <details> disclosure, card per item) ---------------------- */

.faq { display: flex; flex-direction: column; gap: var(--sp-3); }
/* Visual shell comes from .kg-card in markup; summary/body own their padding,
   so drop the primitive's card-padding and clip the disclosure to the corners. */
.faq-item {
  padding: 0; overflow: hidden;
}
.faq-item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--card-padding);
  font-size: var(--text-subhead); font-weight: 700; color: var(--text-primary);
  transition: background var(--motion-quick);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: '+'; color: var(--text-tertiary); font-weight: 400; font-size: 1.25em; line-height: 1;
}
.faq-item[open] > summary::after { content: '\2212'; }   /* − minus */
.faq-item > summary:hover { background: var(--muted-fill); }
.faq-body {
  padding: 0 var(--card-padding) var(--sp-3);
  color: var(--text-secondary); line-height: var(--leading-body);
}
.response-tag {
  display: inline-block; font-size: var(--text-caption2); font-weight: 700;
  color: var(--accent); background: var(--accent-subtle);
  padding: var(--sp-micro) var(--sp-2); border-radius: var(--radius-chip);
  margin-top: var(--sp-2);
}

/* --- Contact card ---------------------------------------------------------- */
/* Visual shell + card-padding come from .kg-card in markup; only the inner
   vertical stack is surface-specific. */

.contact-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.contact-card .contact-email { font-size: var(--text-subhead); font-weight: 700; }

/* --- Landing / home -------------------------------------------------------- */
/* Marketing surfaces may use a display size larger than the in-app --text-hero;
   this is a website-only headline scale, fluid via clamp, still in the brand serif. */

.hero {
  flex: 0 0 auto;
  max-width: 48rem; margin: 0 auto;
  padding: var(--sp-10) var(--page-h-padding) var(--sp-8);
  text-align: center;
}
.hero .page-eyebrow { color: var(--accent); }
.hero__title {
  font-family: var(--site-serif);
  font-size: 64px; line-height: 1.02;
  font-weight: 700;                       /* iOS hero ships untracked + bold (scan #5/#6) */
  color: var(--text-primary);
  margin: var(--sp-2) 0 var(--sp-3);
}
.hero__tagline {
  font-size: var(--text-body); line-height: var(--leading-body);
  color: var(--text-secondary);
  max-width: 36rem; margin: 0 auto;
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  justify-content: center; align-items: center;
  margin-top: var(--sp-6);
}
.hero__cta .kg-btn { font-size: var(--text-body); padding: var(--sp-3) var(--sp-6); }
.hero__note {
  margin-top: var(--sp-4);
  font-size: var(--text-caption); letter-spacing: var(--tracking-uppercase);
  text-transform: uppercase; color: var(--text-tertiary);
}

/* Faint brand-hero wash behind the hero — stays inside the warm palette,
   landing-only (prose pages use .site-page, not .hero). */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--brand-hero) 10%, transparent), transparent 60%);
}

/* --- Hero: showcase variant (copy left, token-rendered device mock right) --- */

.hero--showcase {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: var(--sp-8); align-items: center;
  max-width: 72rem; text-align: left;
  padding: var(--sp-6) var(--page-h-padding) var(--sp-5);
  overflow-x: clip;
}
.hero--showcase .hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero--showcase .hero__tagline { margin-left: 0; max-width: 34rem; }
.hero--showcase .hero__cta,
.hero--showcase .hero__trust { justify-content: flex-start; }

/* Honest trust strip (formats + platform only — never a metric). */
.hero__trust {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--sp-2); margin-top: var(--sp-5); padding: 0;
  justify-content: center;
}

/* Real app screenshots in the hero. Fixed dimensions keep the first viewport
   stable; product truth comes from the shipped iPhone surfaces, not a mock. */
.hero__visual {
  position: relative;
  min-height: 520px;
  width: 100%;
  overflow: hidden;
}
.hero-screen {
  position: absolute;
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
}
.hero-screen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 462 / 1000;
  object-fit: cover;
  object-position: top center;
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
  box-shadow: var(--elevation-z2);
  background: var(--card-bg);
}
.hero-screen figcaption {
  font-size: var(--text-caption2); font-weight: 700;
  letter-spacing: var(--tracking-uppercase); text-transform: uppercase;
  color: var(--text-tertiary);
}
.hero-screen--primary {
  width: 222px;
  left: 50%; top: 0;
  z-index: 3;
  transform: translateX(-50%);
}
.hero-screen--secondary {
  width: 168px;
  right: 0; top: 58px;
  z-index: 2;
}
.hero-screen--tertiary {
  width: 168px;
  left: 0; bottom: 0;
  z-index: 1;
}

/* Token-rendered iPhone mock — illustrative, never a claimed screenshot.
   z3 is the sanctioned carve-out ONLY here (hero centerpiece, not a resting
   card); the inner translation popover is the z2 overlay tier; all screen
   content stays z0/z1. Every fill is a token (theme-reactive). */
.device { position: relative; width: min(280px, 70%); margin-inline: auto; }
.device::before {
  content: ''; position: absolute; inset: -12% -8%; z-index: -1;
  background: radial-gradient(60% 55% at 50% 45%, var(--accent-subtle), transparent 70%);
}
.device__frame {
  position: relative; padding: 10px; border-radius: 44px;
  background: color-mix(in srgb, #000 82%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
  box-shadow: var(--elevation-z3);
}
.device__island {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 24px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, #000 88%, var(--text-primary)); z-index: 3;
}
.device__screen {
  position: relative; aspect-ratio: 390 / 844;
  border-radius: 34px; overflow: hidden;
  background: var(--page-bg); padding: var(--sp-6) var(--sp-4) var(--sp-4);
}
.device__statusbar {
  display: flex; justify-content: space-between;
  font-size: var(--text-caption2); color: var(--text-tertiary);
  margin-bottom: var(--sp-4);
}
.device__readtitle {
  font-family: var(--site-serif); font-size: var(--text-subhead);
  color: var(--text-primary); margin-bottom: var(--sp-3);
}
.device__prose {
  font-family: var(--font-serif); font-size: var(--text-subhead);
  line-height: var(--leading-reading); color: var(--text-secondary);
  text-align: justify;
}
.device__vocab {
  background: var(--vocab-highlight); color: var(--text-primary);
  border-radius: var(--radius-xs); padding: 0 2px;
}
.device__popover {
  position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-6);
  background: var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
  border-radius: var(--radius-lg); box-shadow: var(--elevation-z2);
  padding: var(--sp-4);
}
.device__pop-tail {
  position: absolute; top: -6px; left: 30%; width: 12px; height: 12px;
  background: var(--card-bg);
  border-left: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
  transform: rotate(45deg);
}
.device__pop-head { display: flex; align-items: baseline; gap: var(--sp-2); }
.device__pop-word {
  font-family: var(--site-serif); font-size: var(--text-section-title);
  color: var(--text-primary);
}
.device__pop-pos {
  font-size: var(--text-caption2); color: var(--accent);
  background: var(--accent-subtle);
  padding: var(--sp-micro) var(--sp-2); border-radius: var(--radius-chip);
}
.device__pop-tr { font-size: var(--text-subhead); color: var(--text-primary); margin-top: var(--sp-1); }
.device__pop-ctx { font-size: var(--text-caption); color: var(--text-secondary); line-height: var(--leading-body); margin-top: var(--sp-1); }
.device__pop-save {
  display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3);
  background: var(--brand-hero); color: var(--on-brand-hero);
  font-weight: 700; font-size: var(--text-caption);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-pill);
}

@media (max-width: 860px) {
  .hero--showcase { grid-template-columns: 1fr; text-align: center; gap: var(--sp-5); }
  .hero--showcase .hero__copy { align-items: center; }
  .hero--showcase .hero__tagline { margin-inline: auto; }
  .hero--showcase .hero__cta,
  .hero--showcase .hero__trust { justify-content: center; }
  .hero__title { font-size: 52px; }
  .hero__visual { min-height: 390px; max-width: 26rem; margin-inline: auto; }
  .hero-screen--primary { width: 172px; }
  .hero-screen--secondary,
  .hero-screen--tertiary { width: 132px; }
  .hero-screen--secondary { top: 46px; }
  .device { width: min(220px, 54vw); }
}
@media (max-width: 600px) {
  .hero--showcase { padding-top: var(--sp-4); padding-bottom: var(--sp-4); gap: var(--sp-4); }
  .hero__title { font-size: 40px; }
  .hero__tagline { font-size: var(--text-subhead); }
  .hero__cta { margin-top: var(--sp-4); }
  .hero__trust { margin-top: var(--sp-3); }
  .hero__visual { min-height: 300px; max-width: 21rem; }
  .hero-screen--primary { width: 132px; }
  .hero-screen--secondary,
  .hero-screen--tertiary { width: 104px; }
  .hero-screen--secondary { top: 34px; }
  .device { width: min(155px, 40vw); }
}

/* Ambient hero float — opt-in (excluded for reduced-motion users by the query). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  .device__frame { animation: hero-float 6s ease-in-out infinite; }
}

.landing-section {
  width: 100%; max-width: 60rem; margin: 0 auto;
  padding: var(--sp-6) var(--page-h-padding) var(--sp-9);
}
.feature-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(2, 1fr);
}
.feature-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-6); }
/* iOS-style icon tile: accent glyph on an accent-subtle rounded square. */
.feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-bottom: var(--sp-2);
  border-radius: var(--radius-md);
  background: var(--accent-subtle); color: var(--accent);
}
.feature-icon svg {
  width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.feature-eyebrow {
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: var(--tracking-uppercase); text-transform: uppercase;
  color: var(--accent);
}
.feature-card h2 {
  font-family: var(--site-serif);
  font-size: var(--text-section-title); line-height: var(--leading-heading);
  font-weight: 700; color: var(--text-primary);
}
.feature-card p { color: var(--text-secondary); line-height: var(--leading-body); }

/* --- How it works (3-step journey on a divider connector, not cards) -------- */

.how-it-works {
  max-width: 60rem; margin: 0 auto;
  padding: var(--sp-9) var(--page-h-padding) var(--sp-7);
  text-align: center;
}
.section-eyebrow {
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: var(--tracking-uppercase); text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: var(--sp-2);
}
.section-title {
  font-family: var(--site-serif); font-size: var(--text-h1);
  line-height: var(--leading-heading); font-weight: 700;
  color: var(--text-primary); margin-bottom: var(--sp-8);
}
.steps {
  list-style: none; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6);
}
.steps::before {
  content: ''; position: absolute; top: 1.25rem; left: 14%; right: 14%;
  height: 1px; background: var(--divider);
}
.step { display: flex; flex-direction: column; align-items: center; }
.step__num {
  position: relative;
  display: inline-flex; width: 2.5rem; height: 2.5rem;
  align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--accent-subtle); color: var(--accent);
  font-family: var(--site-serif); font-size: var(--text-h2); font-weight: 700;
}
.step h3 {
  font-family: var(--site-serif); font-size: var(--text-section-title);
  font-weight: 700; color: var(--text-primary); margin-top: var(--sp-3);
}
.step p { color: var(--text-secondary); font-size: var(--text-subhead); margin-top: var(--sp-1); max-width: 18rem; }
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; gap: var(--sp-5); }
  .steps::before { top: 0; bottom: 0; left: 1.25rem; right: auto; width: 1px; height: auto; }
}

/* --- Product screenshots (real iPhone surfaces, not illustrative mockups) ---- */

.product-screens {
  width: 100%; max-width: 72rem; margin: 0 auto;
  padding: var(--sp-6) var(--page-h-padding) var(--sp-8);
}
.product-screens__intro {
  max-width: 42rem; margin: 0 auto var(--sp-6);
  text-align: center;
}
.product-screens .section-title { margin-bottom: 0; }
.screen-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: start;
}
.screen-card {
  min-width: 0;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.screen-card img {
  display: block; width: 100%;
  aspect-ratio: 1284 / 2778;
  object-fit: cover; object-position: top center;
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-z1);
  background: var(--card-bg);
}
.screen-card figcaption {
  display: flex; flex-direction: column; gap: var(--sp-1);
  min-height: 3.4rem;
}
.screen-card figcaption span {
  font-size: var(--text-caption2); font-weight: 700;
  letter-spacing: var(--tracking-uppercase); text-transform: uppercase;
  color: var(--accent);
}
.screen-card figcaption strong {
  font-size: var(--text-subhead); line-height: var(--leading-body);
  color: var(--text-primary);
}
@media (max-width: 860px) {
  .screen-rail {
    display: flex;
    overflow-x: auto;
    gap: var(--sp-4);
    padding-bottom: var(--sp-3);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .screen-card {
    flex: 0 0 min(16rem, 72vw);
    scroll-snap-align: center;
  }
}

/* --- Knowledge-graph showcase (signature feature, token-rendered SVG) ------- */

.graph-showcase {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8);
  align-items: center; max-width: 60rem; margin: 0 auto;
  padding: var(--sp-8) var(--page-h-padding);
}
.graph-showcase h2 {
  font-family: var(--site-serif); font-size: var(--text-h2);
  line-height: var(--leading-heading); font-weight: 700;
  color: var(--text-primary); margin-block: var(--sp-2);
}
.graph-showcase p { color: var(--text-secondary); line-height: var(--leading-body); }
/* SVG fills via CSS (NOT presentation attributes — var() is unreliable as an
   attribute value; as CSS it resolves and stays theme-reactive). */
.kg-graph { width: 100%; height: auto; }
.kg-graph__edges { stroke: var(--card-border); stroke-width: 1.5; fill: none; }
.kg-graph__nodes text { font-family: var(--font-sans); fill: var(--accent); }
.kg-graph__nodes rect { fill: var(--accent-subtle); }
.kg-graph__nodes .is-focus rect { fill: var(--brand-hero); }
.kg-graph__nodes .is-focus text { fill: var(--on-brand-hero); }
@media (max-width: 860px) {
  .graph-showcase { grid-template-columns: 1fr; gap: var(--sp-5); }
}

.closing {
  flex: 0 0 auto;
  max-width: 40rem; margin: 0 auto;
  padding: var(--sp-8) var(--page-h-padding) var(--sp-10);
  text-align: center;
}
.closing__title {
  font-family: var(--site-serif);
  font-size: var(--text-h1); line-height: var(--leading-heading);
  font-weight: 700;                       /* untracked + bold, matches iOS (scan #5/#6) */
  color: var(--text-primary);
}
.closing__lead {
  font-size: var(--text-subhead); color: var(--text-secondary);
  margin-top: var(--sp-2);
}
@media (max-width: 640px) {
  .hero { padding-top: var(--sp-6); }
  .hero__title { font-size: clamp(2.75rem, 11vw, 3.5rem); }
}

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

.site-footer {
  margin-top: auto;
  margin-inline: var(--page-h-padding);
  padding: var(--sp-9) 0 var(--sp-6);
  border-top: 1px solid var(--divider);
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--sp-7); align-items: start;
}
.footer-brand__name {
  font-family: var(--site-serif); font-size: var(--text-h2);
  font-weight: 700; color: var(--text-primary);
}
.footer-brand__desc { font-size: var(--text-caption); color: var(--text-tertiary); margin-top: var(--sp-2); }
.footer-brand__platform { font-size: var(--text-caption2); color: var(--text-quaternary); margin-top: var(--sp-2); }
.footer-col h3 {
  font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: var(--tracking-uppercase); color: var(--text-tertiary);
  font-weight: 700; margin-bottom: var(--sp-3);
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: var(--sp-2); }
/* Scope footer-col links to stay borderless tertiary (the generic `footer a`
   rule above adds an accent underline; that's for inline prose links). */
.footer-col a {
  font-size: var(--text-caption); color: var(--text-tertiary);
  text-decoration: none; border: 0;
  transition: color var(--motion-quick);
}
.footer-col a:hover { color: var(--text-primary); border: 0; }
.footer-meta {
  grid-column: 1 / -1; border-top: 1px solid var(--divider);
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
  font-size: var(--text-caption2); color: var(--text-quaternary);
}
@media (max-width: 640px) {
  .site-footer { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}

/* --- Motion & depth (progressive enhancement; reduced-motion + no-JS safe) -- */
/* Reveal is gated on .js (set by the head script) so without JS the content is
   NEVER hidden; site-motion.js adds .is-in when each element scrolls into view,
   wiring the otherwise-dead --transition-panel-reveal token. */

.js .reveal {
  opacity: 0; transform: translateY(16px);
  transition: var(--transition-panel-reveal);
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Sticky nav gains a hairline + lift once scrolled (class toggled by JS). */
.site-nav { transition: box-shadow var(--motion-standard), background var(--motion-standard); }
.site-nav--scrolled {
  background: color-mix(in srgb, var(--page-bg) 94%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--card-border) 70%, transparent), var(--elevation-z1);
}

/* Nav link underline grows from the left on hover. */
.site-nav__links a { position: relative; }
.site-nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  height: 1px; width: 100%; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-standard);
}
.site-nav__links a:hover::after { transform: scaleX(1); }

/* App Store CTA: 1px spring lift on hover (Motion Contract: transform + shadow). */
.hero__cta .kg-btn--appstore, .closing .kg-btn--appstore {
  transition: opacity var(--motion-quick), transform var(--motion-standard), box-shadow var(--motion-standard);
}
.hero__cta .kg-btn--appstore:hover, .closing .kg-btn--appstore:hover {
  transform: translateY(-1px); box-shadow: var(--elevation-z1);
}

/* Centered short divider between landing blocks. */
.site-divider { width: 40px; height: 1px; border: 0; margin: var(--sp-2) auto; background: var(--divider); }

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

@media (max-width: 640px) {
  .site-nav { gap: var(--sp-3); padding: 0 var(--sp-4); }
  .site-nav__links { gap: var(--sp-3); }
  .site-nav__brand { font-size: var(--text-section-title); }
  .site-page { padding: var(--sp-7) var(--sp-4) var(--sp-8); }
  .site-page--panel {
    width: auto; margin: var(--sp-5) var(--sp-4);
    padding: var(--sp-7) var(--sp-5); border-radius: var(--radius-lg);
  }
  .site-page h1 { font-size: var(--text-h1); }
  .data-table th:first-child, .data-table td:first-child { padding-left: 0; }
  .feature-grid { grid-template-columns: 1fr; }
}

/* --- Reduced motion (web equivalent of accessibilityReduceMotion) ---------- */
/* Durations already collapse via kg-tokens.css; here we also neutralise smooth
   scroll so navigation is instant rather than animated. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .site-nav, .site-nav__links a::after,
  .hero__cta .kg-btn--appstore, .closing .kg-btn--appstore { transition: none; }
  .device__frame { animation: none !important; }
  .theme-toggle:active { transform: none; }
}