/* GovBot.ai platform page. Tokens from mitigation-project-builder design/style-v4.md (section 2); see SPEC.md. */

@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/Lato-400.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/Lato-700.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url(fonts/Lato-900.woff2) format('woff2'); }
@font-face { font-family: 'Questrial'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/Questrial-400.woff2) format('woff2'); }

:root {
  color-scheme: dark;
  --ink: #001824;
  --ink-2: #002A3D;
  --ink-3: #0A2E40;
  --ink-line: #1E4A5E;
  --ink-text: #EAF6FB;
  --ink-muted: #A9C4D1;
  --ghost-line: rgba(148, 214, 230, .38);
  --cyan: #23C9E0;
  --cyan-soft: #7FE6F2;
  --on-cyan: #001824;
  --dot: rgba(127, 230, 242, .07);
  --dot-2: rgba(127, 230, 242, .05);
  --card: #FFFFFF;
  --card-border: #DDDFE2;
  --card-rule: 3px solid #003E60;
  --card-radius: 8px;
  --card-shadow: 0 8px 26px rgba(0, 12, 18, .32);
  --text: #1A1B1C;
  --muted: #5C5F63;
  --heading: #003E60;
  --link: #007DA2;
  --tag-line: #A5CDDF;
  --surface: #F4F8FA;
  --action: #F15C22;
  --error: #B42318;
  --grid: radial-gradient(circle, var(--dot) 1px, transparent 1.5px);
  --grid-2: radial-gradient(circle, var(--dot-2) 1px, transparent 1.5px);
  --vignette: radial-gradient(ellipse at 50% 45%, rgba(0, 24, 36, 0) 40%, rgba(0, 12, 18, .55) 100%);
  --ease-out: cubic-bezier(.33, 1, .68, 1);
  --ease-io: cubic-bezier(.37, 0, .63, 1);
  --gutter: 32px;
  --maxw: 1200px;
  --display: 'Questrial', 'Lato', system-ui, sans-serif;
  --body: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--ink-text); font: 400 17px/1.55 var(--body); font-variant-numeric: tabular-nums; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--card); color: var(--ink); padding: 10px 16px; border-radius: 4px; font-weight: 700; }
.skip:focus { top: 12px; }

/* Focus: cyan on dark, navy inside white surfaces (style-v4 2.5). */
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 2px; }
.card :focus-visible, .band-light :focus-visible, .edition :focus-visible { outline-color: #003E60; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* Grounds */
.ground { background: var(--vignette), var(--grid), var(--ink); background-size: 100% 100%, 28px 28px, auto; }
.ground-band { background: var(--grid-2), var(--ink-2); background-size: 28px 28px, auto; }
.band-light { background: var(--surface); color: var(--text); }

/* Type */
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 700 13px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 16px; }
.kicker-dark { color: #3D6B80; }
h1 { font: 400 clamp(40px, 5.2vw, 68px)/1.06 var(--display); letter-spacing: -.01em; color: var(--ink-text); }
h2, .h-display { font: 400 clamp(30px, 3.6vw, 46px)/1.12 var(--display); color: var(--ink-text); max-width: 22ch; }
.band-light h2 { color: var(--heading); }
.h-section { font: 400 clamp(26px, 2.6vw, 34px)/1.15 var(--display); color: var(--ink-text); }
.section-lede { max-width: 62ch; margin-top: 16px; font-size: 19px; line-height: 1.55; color: #33383C; }
.section-lede.on-dark { color: var(--ink-muted); }
.fine { font-size: 13px; line-height: 1.5; color: var(--muted); }
.fine.on-dark { color: var(--ink-muted); }

/* Status labels */
.status { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink-text); padding: 6px 12px 6px 10px; border: 1.5px solid var(--ghost-line); border-radius: 999px; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.status-light { color: var(--heading); border-color: var(--tag-line); background: #fff; }
.status-light::before { background: var(--cyan); box-shadow: 0 0 0 1.5px #003E60; }
.status-muted { color: var(--muted); border-color: var(--card-border); background: #fff; }
.status-muted::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 4px; font: 700 15px/1 var(--body); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; }
.btn-primary { background: var(--action); color: var(--ink); min-height: 52px; padding: 0 28px; font-size: 17px; }
.btn-primary:hover { background: #F37646; }
.btn-ghost { background: transparent; color: var(--ink-text); border-color: var(--ghost-line); }
.btn-ghost:hover { background: var(--ink-3); }
.btn-white { background: #fff; color: var(--ink); min-width: 120px; }
.btn-white:hover { background: #E4F4F9; }
.btn:disabled { opacity: .45; cursor: default; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(0, 24, 36, .94); border-bottom: 1px solid var(--ink-line); backdrop-filter: blur(6px); }
.top-inner { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); height: 64px; display: flex; align-items: center; gap: 32px; }
.lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lockup-name { font: 700 18px/1 var(--body); color: var(--ink-text); }
.top-nav { display: flex; gap: 24px; margin-left: auto; }
.top-nav a, .top-link { font: 700 14px/1 var(--body); color: var(--ink-muted); text-decoration: none; padding: 10px 0; }
.top-nav a:hover, .top-link:hover { color: var(--ink-text); }
.top-link { color: var(--ink-text); text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* Hero */
.hero { padding: 48px 0 56px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(38px, 4.4vw, 60px); }
.hero .lede { margin-top: 20px; max-width: 30em; font-size: 19px; line-height: 1.55; color: var(--ink-muted); }
.hero .film figcaption { margin-top: 10px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin: 36px 0 0; }
.hero-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding-top: 14px; border-top: 3px solid var(--cyan); }
.hero-stats dd { margin: 0; font: 900 clamp(32px, 3.3vw, 46px)/1 var(--body); color: #fff; letter-spacing: -.01em; }
.hero-stats dt { font: 700 15px/1.35 var(--body); color: var(--ink-text); }
.hero-stats-note { margin-top: 14px; font-size: 13px; color: var(--ink-muted); }
.hero-stats-note a { color: var(--ink-text); }
.platform-use { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; margin-top: 56px; align-items: start; }
.platform-use .platform-lines { grid-template-columns: 1fr; margin-top: 0; }
.hero .lede-2 { margin-top: 20px; font: 700 18px/1.5 var(--body); color: var(--ink-text); padding-left: 14px; border-left: 3px solid var(--cyan); }

/* Cards */
.card, .band-light, .edition { color-scheme: light; }
.card { background: var(--card); color: var(--text); border: 1px solid var(--card-border); border-top: var(--card-rule); border-radius: var(--card-radius); box-shadow: var(--card-shadow); }

/* Ask illustration */
.ask-card { padding: 24px; margin: 0; }
.ask-head { margin-bottom: 14px; }
.ask-name { font: 400 22px/1.2 var(--display); color: var(--heading); }
.ask-label { display: block; font: 700 13px/1.3 var(--body); color: var(--muted); margin-bottom: 6px; }
.ask-q { font: 400 18px/1.45 var(--display); color: var(--text); padding-left: 14px; border-left: 3px solid var(--tag-line); }
.ask-answer { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--card-border); }
.ask-figure { font: 900 56px/1 var(--body); color: var(--heading); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ask-figure span { font: 700 16px/1.3 var(--body); color: var(--text); }
.ask-body { margin-top: 10px; font-size: 16px; color: var(--text); }
.ask-sources-label { margin-top: 16px; font: 700 13px/1 var(--body); color: var(--muted); }
.ask-sources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.source-tag { display: inline-block; font: 700 12px/1.35 var(--body); color: var(--link); background: #fff; border: 1.5px solid var(--tag-line); border-radius: 4px; padding: 3px 8px; }
.ask-card figcaption { margin-top: 16px; }

/* Platform */
#platform { padding: 104px 0; }
.diagram { margin: 48px 0 0; }
.platform-value { margin-top: 48px; max-width: 40ch; font: 400 clamp(22px, 2.2vw, 28px)/1.35 var(--display); color: var(--ink-text); padding-left: 18px; border-left: 3px solid var(--cyan); }
.platform-lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; margin-top: 48px; border-top: 1px solid var(--ink-line); }
.platform-lines li { display: flex; flex-direction: column; gap: 8px; padding: 24px 0 0; }
.platform-lines strong { font: 700 18px/1.3 var(--body); color: var(--ink-text); }
.platform-lines li > span:not(.status) { color: var(--ink-muted); font-size: 16px; }
.platform-lines .status { align-self: flex-start; margin-top: 6px; color: var(--ink-text); }
.connectors { margin-top: 32px; font: 700 17px/1.5 var(--body); color: var(--ink-text); }
.connectors-status { color: var(--ink-muted); font-weight: 400; }
.terms { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
#platform .fine { margin-top: 6px; }

/* Diagram (inline SVG) */
.dg { width: 100%; height: auto; overflow: visible; }
.dg-narrow { display: none; }
.dg text { font-family: var(--body); }
.dg-num, .dg-num-s { font: 400 30px/1 var(--display); fill: var(--cyan); }
.dg-num-s { font-size: 16px; font-weight: 700; font-family: var(--body); }
.dg-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; fill: var(--ink-muted); }
.dg-rule { stroke: var(--ink-line); stroke-width: 1; }
.dg-chip { fill: var(--ink-3); stroke: var(--ink-line); }
.dg-dot { fill: var(--cyan); }
.dg-chip-t { font-size: 15px; fill: var(--ink-text); }
.dg-data { fill: var(--ink); stroke: var(--cyan); stroke-width: 1.5; }
.dg-data-t { font-size: 18px; font-weight: 700; fill: var(--ink-text); }
.dg-status { font-size: 13px; font-weight: 700; fill: var(--cyan-soft); }
.dg-card { fill: #fff; stroke: var(--card-border); }
.dg-card-rule { fill: var(--cyan); }
.dg-ed-t { font-family: var(--display) !important; font-size: 21px; fill: var(--heading); }
.dg-ed-s { font-size: 13px; font-weight: 700; fill: var(--muted); }
.dg-mod-node { fill: var(--cyan); stroke: #003E60; stroke-width: 1.5; }
.dg-mod-t { font-size: 14px; font-weight: 700; fill: var(--text); }
.dg-card-muted { fill: var(--ink-3); stroke: var(--ink-line); stroke-dasharray: 4 3; }
.dg-ed-t-muted { font-size: 16px; font-weight: 700; fill: var(--ink-text); }
.dg-ed-s-muted { font-size: 13px; fill: var(--ink-muted); }
.dg-use { fill: var(--ink-2); stroke: var(--ghost-line); stroke-width: 1.5; }
.dg-use-t { font-size: 16px; font-weight: 700; fill: var(--ink-text); }
.dg-use-s { font-size: 13px; fill: var(--ink-muted); }
.dg-use-s-n { font-size: 12px; }
.diagram[data-hl="em"] .dg-src-em .dg-chip, .diagram[data-hl="hi"] .dg-src-hi .dg-chip, .diagram[data-hl="rg"] .dg-src-rg .dg-chip,
.diagram[data-hl="gr"] .dg-src-gr .dg-chip, .diagram[data-hl="lc"] .dg-src-lc .dg-chip { stroke: var(--cyan); stroke-width: 2; }
.diagram[data-hl] .dg-path-src { stroke-opacity: .5; }
.dg-path { fill: none; stroke: var(--cyan); stroke-width: 1.25; stroke-opacity: .28; stroke-linecap: round; }
.dg-path-main { stroke-opacity: .55; }
.dg-ed { cursor: default; outline: none; }
.dg-ed:focus-visible .dg-card, .dg-ed:focus-visible .dg-card-muted { stroke: var(--cyan); stroke-width: 3; stroke-dasharray: none; }
.diagram[data-hl] .dg-path { stroke-opacity: .12; }
.diagram[data-hl="em"] .dg-path-em, .diagram[data-hl="hi"] .dg-path-hi, .diagram[data-hl="rg"] .dg-path-rg,
.diagram[data-hl="gr"] .dg-path-gr, .diagram[data-hl="lc"] .dg-path-lc { stroke-opacity: 1; stroke-width: 2; }
.diagram[data-hl="hi"] .dg-ed-hi .dg-card-muted, .diagram[data-hl="rg"] .dg-ed-rg .dg-card-muted,
.diagram[data-hl="gr"] .dg-ed-gr .dg-card-muted, .diagram[data-hl="lc"] .dg-ed-lc .dg-card-muted { stroke: var(--cyan); stroke-dasharray: none; }
.dg-text { margin-top: 24px; color: var(--ink-muted); font-size: 15px; }
.dg-text summary { cursor: pointer; font-weight: 700; color: var(--ink-text); width: max-content; }
.dg-text-list { margin-top: 12px; display: grid; gap: 8px; max-width: 80ch; }
.dg-text-list strong { color: var(--ink-text); }

/* From documents to data */
.docs { padding: 112px 0; border-top: 1px solid var(--ink-line); }
.docs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.docs-points { margin-top: 36px; display: grid; gap: 0; counter-reset: dp; }
.docs-points li { counter-increment: dp; display: grid; grid-template-columns: 40px 1fr; gap: 4px 0; padding: 18px 0; border-top: 1px solid var(--ink-line); }
.docs-points li::before { content: counter(dp); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--cyan); color: var(--cyan); display: grid; place-items: center; font: 700 13px/1 var(--body); }
.docs-points strong { font: 700 18px/1.3 var(--body); color: var(--ink-text); }
.docs-points span { color: var(--ink-muted); font-size: 16px; }
.doc-slot { margin: 0; }
.d2d { position: relative; }
.d2d canvas { display: block; width: 100%; height: auto; border-radius: 8px; }
.d2d-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.doc-slot-frame { aspect-ratio: 4 / 3; border: 1px solid var(--ink-line); border-radius: 12px; background: var(--grid-2), var(--ink-2); background-size: 28px 28px, auto; display: grid; align-content: center; gap: 20px; padding: 32px; }
.doc-slot-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.doc-slot-page { background: #fff; color: var(--muted); border-radius: 4px; padding: 20px 14px; font-size: 14px; min-height: 96px; display: grid; place-items: center; text-align: center; box-shadow: var(--card-shadow); }
.doc-slot-arrow { color: var(--cyan); font-size: 22px; }
.doc-slot-row { border: 1.5px dashed var(--ghost-line); color: var(--ink-muted); border-radius: 6px; padding: 20px 14px; font-size: 14px; min-height: 96px; display: grid; place-items: center; text-align: center; }
.doc-slot figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-muted); }

/* Stats */
.stats { padding: 112px 0 96px; }
.stat-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px 40px; margin: 56px 0 0; }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-top: 20px; border-top: 3px solid var(--cyan); }
.stat dt { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.stat dd { margin: 0; }
.stat-figure { font: 900 clamp(40px, 4.4vw, 60px)/1 var(--body); color: #fff; letter-spacing: -.01em; overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.stat-lead .stat-figure { font-size: clamp(48px, 5.2vw, 76px); }
.stat { grid-column: span 3; }
.stat-lead { grid-column: span 4; }
.stats-line { margin-top: 12px; }
.stat-about { display: block; font: 700 16px/1 var(--body); color: var(--ink-muted); letter-spacing: 0; }
.stat-label { font: 700 18px/1.3 var(--body); color: var(--ink-text); }
.stat-qual { font-size: 15px; line-height: 1.45; color: var(--ink-muted); max-width: 34ch; }
.swap { display: inline-block; }
.footnote { margin-top: 56px; max-width: 90ch; font-size: 13px; line-height: 1.55; color: var(--ink-muted); }

/* Editions */
#editions { padding: 104px 0; }
.editions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.edition { background: #fff; border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.edition h3 { font: 400 24px/1.2 var(--display); color: var(--heading); }
.edition p { font-size: 16px; color: #33383C; }
.edition-live { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 48px; border-top: var(--card-rule); box-shadow: 0 6px 20px rgba(0, 24, 36, .10); padding: 32px; }
.edition-live h3 { font-size: 32px; }
.edition-live > p:not(.edition-status) { font-size: 18px; }
.edition-live .modules { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.edition-status { margin: 0; }
.modules { display: grid; gap: 0; position: relative; }
.modules li { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; position: relative; }
.modules li + li { border-top: 1px solid var(--card-border); }
.module-node { flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--muted); background: #fff; }
.module-live .module-node { background: var(--cyan); border-color: #003E60; }
.modules strong { display: block; font: 700 17px/1.35 var(--body); color: var(--text); }
.module-note { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }

/* Film band */
.film-band { padding: 0 0 104px; }
.film-grid { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: 48px; align-items: start; }
.film-intro h2 { font-size: clamp(26px, 2.6vw, 34px); }

/* Flood module */
.module { padding: 112px 0 104px; }
.module .h-display { max-width: 24ch; }
.module-grid { margin-top: 48px; }
.statements-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.film { margin: 0; }
.film-frame { border-radius: var(--card-radius); overflow: hidden; border: 1px solid var(--ink-line); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); background: var(--ink); aspect-ratio: 16 / 9; }
.film-frame { position: relative; }
.film-frame video { width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
.film-play { position: absolute; inset: 0; display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-start; gap: 14px; padding: 0 0 6% 5%; background: transparent; border: 0; cursor: pointer; color: var(--ink-text); }
.film-play:focus-visible { outline: none; }
.film-play-ring { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 24, 36, .92); border: 3px solid var(--cyan); color: var(--cyan); box-shadow: 0 8px 26px rgba(0, 0, 0, .45); }
.film-play-ring svg { width: 34px; height: 34px; margin-left: 5px; }
.film-play:hover .film-play-ring { background: var(--ink-3); }
.film-play:focus-visible .film-play-ring { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--cyan), 0 8px 26px rgba(0, 0, 0, .45); }
.film-play-label { margin-bottom: 28px; font: 700 14px/1 var(--body); letter-spacing: .02em; color: var(--ink-text); background: rgba(0, 24, 36, .85); border: 1px solid var(--ink-line); border-radius: 999px; padding: 7px 12px; }
.film figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-muted); }
.transcript { margin-top: 8px; font-size: 15px; color: var(--ink-muted); }
.transcript summary { cursor: pointer; font-weight: 700; color: var(--ink-text); width: max-content; }
.transcript ol { list-style: decimal; padding-left: 22px; margin-top: 10px; display: grid; gap: 4px; }
.statements { display: grid; gap: 28px; }
.statement { padding-left: 18px; border-left: 3px solid var(--ink-line); }
.statement:first-child { border-left-color: var(--cyan); }
.statement h3 { font: 700 14px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.statement p { margin-top: 8px; font-size: 17px; line-height: 1.55; color: var(--ink-text); }

.module .h-section { margin-top: 104px; }
.changes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 32px; counter-reset: ch; }
.changes li { counter-increment: ch; padding: 24px 0 28px; border-top: 1px solid var(--ink-line); }
.changes h4 { font: 700 18px/1.3 var(--body); color: var(--ink-text); display: flex; gap: 12px; align-items: baseline; }
.changes h4::before { content: counter(ch); flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--cyan); color: var(--cyan); font: 700 13px/1 var(--body); transform: translateY(-2px); }
.changes p { margin-top: 10px; padding-left: 38px; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }

.reviewer { margin-top: 8px; padding: 28px 32px; border: 1px solid var(--ink-line); border-left: 3px solid var(--cyan); border-radius: 0 8px 8px 0; background: var(--ink-2); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4px 40px; align-items: start; }
.reviewer .kicker { grid-column: 1; margin: 0 0 6px; }
.reviewer h4 { grid-column: 1; font: 400 24px/1.25 var(--display); color: var(--ink-text); }
.reviewer p:not(.kicker) { grid-column: 2; grid-row: 1 / span 2; font-size: 17px; line-height: 1.6; color: var(--ink-text); }

/* Product tour */
.tour { margin-top: 104px; }
.tour .h-section { margin-top: 0; }
.tour-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.tour-sub { color: var(--ink-muted); font-size: 16px; max-width: 60ch; }
.tour-frame { margin-top: 28px; background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: 12px; padding: 0 0 20px; overflow: hidden; }
.tour-bar { height: 3px; background: var(--ink-line); }
.tour-bar span { display: block; height: 100%; width: 0; background: var(--cyan); }
.tour-meta { display: flex; align-items: center; gap: 16px; padding: 16px 24px; }
.tour-count { font: 700 15px/1 var(--body); color: var(--ink-text); font-variant-numeric: tabular-nums; }
.tour-count #tour-n { color: var(--cyan); }
.tour-label { font: 700 15px/1.3 var(--body); color: var(--ink-muted); flex: 1; min-width: 0; }
.tour-play { background: none; border: 1.5px solid var(--ghost-line); color: var(--ink-text); border-radius: 999px; padding: 6px 14px; font: 700 13px/1 var(--body); cursor: pointer; min-height: 32px; }
.tour-play:hover { background: var(--ink-3); }
.tour-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; padding: 0 24px; align-items: start; }
.tour-stage { position: relative; border-radius: 6px; overflow: hidden; background: var(--ink); aspect-ratio: 1440 / 900; box-shadow: 0 12px 36px rgba(0, 0, 0, .35); touch-action: pan-y; }
.tour-stage img { width: 100%; height: 100%; object-fit: cover; }
.hotspots { position: absolute; inset: 0; pointer-events: none; }
.hotspot { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink); background: var(--cyan); color: var(--on-cyan); font: 900 13px/1 var(--body); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 4px 10px rgba(0, 0, 0, .35); padding: 0; }
.hotspot[aria-pressed="true"] { background: #fff; }
.hotspot::after { content: ""; position: absolute; inset: -8px; }
.tour-caption { font: 400 22px/1.3 var(--display); color: var(--ink-text); }
.tour-notes { margin-top: 20px; display: grid; gap: 12px; counter-reset: nt; }
.tour-notes li { counter-increment: nt; display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); padding: 10px 12px; border-radius: 6px; border: 1px solid transparent; }
.tour-notes li::before { content: counter(nt); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--cyan); color: var(--on-cyan); display: grid; place-items: center; font: 900 12px/1 var(--body); margin-top: 1px; }
.tour-notes li.is-on { border-color: var(--cyan); color: var(--ink-text); background: var(--ink-3); }
.tour-controls { display: flex; gap: 12px; margin-top: 24px; }
.tour-rail { padding: 20px 24px 0; }
.tour-rail ol { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 6px; position: relative; }
.tour-rail button { width: 100%; height: 28px; background: none; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; }
.tour-rail button span { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--ink-line); }
.tour-rail button:hover span { background: var(--ink-muted); }
.tour-rail button.is-before span { background: rgba(35, 201, 224, .45); }
.tour-rail button[aria-current="true"] span { background: var(--cyan); height: 6px; }

/* Principles */
.principles { padding: 88px 0; }
.principle-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 8px; }
.principle-list li { font-size: 17px; line-height: 1.55; color: #33383C; padding-top: 20px; border-top: 3px solid #003E60; }
.principle-list strong { display: block; font: 400 26px/1.2 var(--display); color: var(--heading); margin-bottom: 10px; }

/* Questions */
.faq { padding: 96px 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.faq-list { border-top: 1px solid var(--card-border); }
.faq-item { border-bottom: 1px solid var(--card-border); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; font: 700 18px/1.4 var(--body); color: var(--heading); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--tag-line); display: grid; place-items: center; font: 400 20px/1 var(--body); color: var(--heading); }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { padding: 0 52px 22px 0; font-size: 17px; line-height: 1.6; color: #33383C; max-width: 70ch; }
.foot-links { margin-left: 16px; }
.foot-links a { color: var(--ink-text); margin-right: 14px; }
.form-result a { color: var(--link); font-weight: 700; }

/* Preview form: the page's one call to action */
.preview { padding: 112px 0; }
.form-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.form-card { padding: 32px; }
.form-intro { position: sticky; top: 112px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.field label { font: 700 15px/1.3 var(--body); color: var(--text); }
.optional { font-weight: 400; color: var(--muted); }
.hint { font-size: 14px; color: var(--muted); }
.field input[type=text], .field input[type=email], .field select, .field textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid #7D868C; border-radius: 4px; background: #fff; color: var(--text); font-size: 16px; }
.field textarea { min-height: 96px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #003E60 50%), linear-gradient(135deg, #003E60 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-check { display: grid; grid-template-columns: 24px 1fr; gap: 6px 12px; align-items: start; }
.field-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: #003E60; }
.field-check label { font-weight: 400; font-size: 15px; line-height: 1.45; }
.field-check .hint, .field-check .field-error { grid-column: 2; }
.field-error { font: 700 14px/1.4 var(--body); color: var(--error); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-summary { border: 2px solid var(--error); border-radius: 6px; padding: 14px 16px; margin-bottom: 20px; }
.form-summary-title { font-weight: 700; color: var(--error); }
.form-summary ul { list-style: disc; padding-left: 20px; margin-top: 6px; }
.form-summary a { color: var(--error); font-weight: 700; }
.form-sending { margin-top: 12px; color: var(--muted); }
.form-result h3 { font: 400 26px/1.2 var(--display); color: var(--heading); }
.form-result p { margin-top: 10px; color: var(--text); }
.form-result-error { margin-top: 20px; border-left: 3px solid var(--error); padding-left: 14px; }
.form-result-error h3 { color: var(--error); }

/* Footer */
.foot { background: var(--ink); border-top: 1px solid var(--ink-line); padding: 40px 0 48px; color: var(--ink-muted); font-size: 13px; line-height: 1.55; }
.foot-brand { display: flex; align-items: center; gap: 10px; font: 700 15px/1 var(--body); color: var(--ink-text); }
.foot-legal { margin-top: 20px; display: grid; gap: 8px; max-width: 110ch; }
.foot-copy { margin-top: 20px; }

/* Motion: only with no-preference; content is visible without JS or with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .stat .swap.is-swapping { animation: swap-in .4s var(--ease-out) both; }
  @keyframes swap-in { from { opacity: 0; transform: translateY(.9em); } to { opacity: 1; transform: none; } }
  .js .diagram:not(.is-built) .dg-layer { opacity: 0; transform: translateY(18px); }
  .js .diagram .dg-layer { transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); transform-box: fill-box; }
  .js .diagram.is-built .dg-l1 { transition-delay: 0s; }
  .js .diagram.is-built .dg-l2 { transition-delay: .35s; }
  .js .diagram.is-built .dg-l3 { transition-delay: .7s; }
  .js .diagram.is-built .dg-l4 { transition-delay: 1.05s; }
  .js .diagram .dg-path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js .diagram.is-built .dg-path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-io) .9s, stroke-opacity .3s linear, stroke-width .3s linear; }
  .tour-stage img { transition: opacity .24s linear; }
  .tour-stage img.is-fading { opacity: 0; }
  .hotspot { transition: background .15s linear; }
}

/* Tablet */
@media (max-width: 1100px) {
  .top-nav { display: none; }
  .top-link { margin-left: auto; }
  .hero-grid, .module-grid, .form-grid, .docs-grid, .film-grid, .statements-row { grid-template-columns: 1fr; }
  .film-grid { gap: 20px; }
  .form-intro { position: static; }
  .hero-grid { gap: 28px; }
  .platform-use { grid-template-columns: 1fr; gap: 32px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat, .stat-lead { grid-column: auto; }
  .editions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edition-live { grid-template-columns: 1fr; }
  .edition-live .modules { grid-column: auto; grid-row: auto; }
  .changes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviewer { grid-template-columns: 1fr; }
  .reviewer p:not(.kicker) { grid-column: 1; grid-row: auto; margin-top: 10px; }
  .tour-body { grid-template-columns: 1fr; }
  .principle-list { grid-template-columns: 1fr; gap: 28px; }
  .faq-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Phone (390 px reference) */
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .top-inner { height: 56px; gap: 12px; }
  .top-link { font-size: 13px; }
  .hero { padding: 28px 0 40px; }
  .hero .lede { font-size: 17px; margin-top: 14px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; margin-top: 24px; }
  .hero-stats dd { font-size: 30px; }
  .hero-stats dt { font-size: 13px; }
  .hero .film figcaption, .hero .transcript { font-size: 13px; }
  .ask-card { padding: 18px; }
  .ask-figure { font-size: 44px; }
  #platform, #editions, .module, .stats, .preview, .docs { padding: 72px 0; }
  .film-band { padding: 0 0 72px; }
  .film-play { gap: 8px; padding: 0 0 3% 4%; }
  .film-play-ring { width: 52px; height: 52px; }
  .film-play-ring svg { width: 24px; height: 24px; margin-left: 4px; }
  .film-play-label { font-size: 12px; padding: 5px 10px; margin-bottom: 14px; }
  .doc-slot-frame { padding: 16px; aspect-ratio: auto; }
  .doc-slot-pair { grid-template-columns: 1fr; gap: 8px; }
  .doc-slot-arrow { transform: rotate(90deg); justify-self: center; }
  .principles { padding: 64px 0; }
  .faq { padding: 64px 0; }
  .faq-item p { padding-right: 0; }
  .foot-links { display: block; margin: 10px 0 0; }
  .dg-wide { display: none; }
  .dg-narrow { display: block; }
  .platform-lines { grid-template-columns: 1fr; margin-top: 40px; }
  .stat-grid { grid-template-columns: 1fr; gap: 36px; margin-top: 40px; }
  .stat-figure { font-size: 44px; }
  .stat-lead .stat-figure { font-size: 56px; }
  .editions { grid-template-columns: 1fr; }
  .edition-live { padding: 24px; }
  .edition-live h3 { font-size: 28px; }
  .changes { grid-template-columns: 1fr; }
  .reviewer { padding: 20px; }
  .changes p { padding-left: 38px; }
  .module .h-section, .tour { margin-top: 72px; }
  .tour-frame { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; }
  .tour-meta { padding: 14px 16px; gap: 12px; }
  .tour-body { padding: 0 16px; gap: 20px; }
  .tour-caption { font-size: 19px; }
  .tour-rail { padding: 16px 16px 0; }
  .tour-rail ol { gap: 3px; }
  .hotspot { width: 24px; height: 24px; font-size: 12px; }
  .form-card { padding: 20px; margin: 0 calc(-1 * var(--gutter) + 8px); }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .form-intro { position: static; }
  .btn-primary { width: 100%; }
}

@media print {
  .top, .tour-bar, .tour-controls, .tour-rail, .tour-play, video { display: none; }
  body { background: #fff; color: #000; }
}