/* How People Work with AI Design system: see docs/DESIGN.md. Every size, space, radius and shadow
   comes from a token below; don't add one-off values. No inline styles (the CSP blocks them). */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("fonts/source-sans-3.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/source-serif-4-600.woff2") format("woff2"); }

:root {
  color-scheme: light;
  /* colour */
  --bg: #faf8f4; --surface: #ffffff; --surface-2: #f2eee6; --text: #1f2a37; --text-2: #39424f; --muted: #5b6472;
  --border: #e6e1d8; --field-border: #6f7783;
  --accent: #1d4e6e; --accent-hover: #143a53; --accent-text: #ffffff; --accent-soft: #eaf0f5; --accent-border: #c5d6e3; --accent-track: #ddd6ca;
  --safe: #2f6b4f; --safe-bg: #f1f7f3; --safe-border: #b9d3c4;
  --error: #a4262c; --error-bg: #fdf1f1; --warn-bg: #fff8e6; --warn-border: #9a6a00;
  --ok: #2f6b4f; --focus: #ffbf47; --code-bg: var(--surface-2); --danger-text: #ffffff;
  --check-img: url("ui/check-light.svg"); --dot-img: url("ui/dot-light.svg"); --chevron-img: url("ui/chevron-light.svg");
  /* type: 6 sizes + display. Headings shrink on phones; body doesn't. */
  --fs-xs: .875rem; --fs-sm: 1rem; --fs-base: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.625rem; --fs-2xl: 2rem;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-relaxed: 1.5; --lh-body: 1.6;
  /* space: 4/8 scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --gutter: 20px; --section-y: 56px;
  /* shape */
  --radius-xs: 4px; --radius-sm: 8px; --radius: 12px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(31,42,55,.06), 0 2px 6px rgba(31,42,55,.05);
  --shadow-2: 0 2px 4px rgba(31,42,55,.04), 0 8px 24px rgba(31,42,55,.08);
  --measure: 42rem; --wide: 70rem;
  --font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (min-width: 768px) { :root { --fs-xl: 2rem; --fs-2xl: 2.75rem; --section-y: 88px; --gutter: 32px; } }
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #14181d; --surface: #1c2128; --surface-2: #1b2028; --text: #e9e6df; --text-2: #c9ccd1; --muted: #a3a9b1;
    --border: #2e353e; --field-border: #6b7480;
    --accent: #8cc4e6; --accent-hover: #b3d8ef; --accent-text: #0e1a24; --accent-soft: #1b2a36; --accent-border: #2b4a61; --accent-track: #39424d;
    --safe: #8fcfa9; --safe-bg: #16241d; --safe-border: #2f5a43;
    --error: #ff8a8a; --error-bg: #2c1a1b; --warn-bg: #2a2416; --warn-border: #d9a53a;
    --ok: #8fcfa9; --code-bg: #232931; --danger-text: #2a0c0d;
    --check-img: url("ui/check-dark.svg"); --dot-img: url("ui/dot-dark.svg"); --chevron-img: url("ui/chevron-dark.svg");
    --shadow-1: none; --shadow-2: none;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--fs-base)/var(--lh-body) var(--font); }
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
body.admin .wrap { max-width: 72rem; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s-4); top: var(--s-2); background: var(--surface); padding: var(--s-2) var(--s-3); z-index: 10; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em; }
h1, h2, h3, .title, .sample-h { text-wrap: balance; }
p, li, blockquote, .script-text, .q-text { text-wrap: pretty; }

/* Header + footer */
.local-banner { background: var(--warn-bg); border-bottom: 1px solid var(--warn-border); text-align: center; font-size: var(--fs-sm); padding: var(--s-1) var(--s-4); }
.site-header { border-bottom: 1px solid var(--border); background: var(--bg); }
.site-header .wrap-wide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-5); padding-top: var(--s-2); padding-bottom: var(--s-2); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-height: 44px; }
.brand-mark { width: 40px; height: 40px; flex: none; }
@media (max-width: 600px) { .brand-mark { width: 32px; height: 32px; } }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: var(--fs-lg); white-space: nowrap; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.tag { color: var(--muted); font-size: var(--fs-xs); font-weight: 400; }
.site-nav { display: flex; gap: 0 var(--s-5); font-size: var(--fs-sm); }
.site-nav a { display: inline-block; padding: var(--s-3) 0; font-weight: 600; text-decoration: none; color: var(--text-2); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; }
main.wrap { padding-top: var(--s-6); padding-bottom: var(--s-8); }
main.landing { padding: 0; }
.site-footer { border-top: 1px solid var(--border); padding: var(--s-5) 0 var(--s-7); font-size: var(--fs-sm); color: var(--muted); }
.site-footer .wrap-wide { display: grid; gap: var(--s-2); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.footer-nav a { display: inline-block; padding: var(--s-3) 0; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }

/* Type */
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); margin: 0 0 var(--s-4); }
h2 { font-size: var(--fs-xl); line-height: var(--lh-snug); margin: var(--s-7) 0 var(--s-3); }
h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); margin: 0 0 var(--s-2); font-weight: 700; }
p { margin: 0 0 var(--s-4); }
.lede { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--text-2); max-width: 65ch; }
.eyebrow { margin: 0 0 var(--s-3); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.small { font-size: var(--fs-sm); color: var(--muted); }
.muted { color: var(--muted); }
.lead-in { margin: 0 0 var(--s-5); color: var(--text-2); max-width: 65ch; }
code { font-family: var(--mono); font-size: .9em; background: var(--code-bg); padding: 1px var(--s-1); border-radius: var(--radius-xs); overflow-wrap: anywhere; }
h1 + :is(section, div, form, .panel-safe, .notice), .lede + :is(section, div, form) { margin-top: var(--s-5); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); background: var(--accent); color: var(--accent-text);
  border: 2px solid var(--accent); border-radius: var(--radius-sm); padding: var(--s-3) var(--s-5); font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; min-height: 48px; line-height: 1.3; }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }
.btn[aria-disabled="true"] { opacity: .7; cursor: progress; }
.btn-block { display: flex; width: 100%; }
.btn-secondary { background: transparent; color: var(--accent); }
.btn-secondary:hover { background: var(--accent-soft); color: var(--accent-hover); }
.btn-small { padding: var(--s-2) var(--s-4); min-height: 44px; font-size: var(--fs-sm); }
.btn-danger { background: var(--error); border-color: var(--error); color: var(--danger-text); }
.btn-danger:hover { background: var(--error); border-color: var(--error); filter: brightness(.9); color: var(--danger-text); }
.linklike { background: none; border: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; padding: 10px 0; }
form.inline { display: inline; }

/* Surfaces */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-5); }
.panel-safe { background: var(--safe-bg); border: 1px solid var(--safe-border); border-radius: var(--radius); padding: var(--s-5); }
.panel-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.panel-head h2, .panel-head h3 { margin: 0; }
.box-title, .panel-head h2, .code-card h2, .make-it-count h2, .come-back h2, .upload-check h2 {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-lg); line-height: var(--lh-snug); margin: 0; letter-spacing: 0; }
.badge-safe { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--safe); color: var(--bg); display: flex; align-items: center; justify-content: center; flex: none; }
.badge-safe .icon { width: 20px; height: 20px; }
.notice { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-5); }
.notice > :last-child, .panel-safe > :last-child, .card > :last-child { margin-bottom: 0; }

/* Progress */
.progress { margin: 0 0 var(--s-5); }
.progress-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1); margin-bottom: var(--s-2); }
.progress-bar span { height: 6px; border-radius: var(--radius-pill); background: var(--accent-track); }
.progress-bar span.done { background: var(--accent); }
.progress-label { font-size: var(--fs-xs); color: var(--muted); margin: 0; font-weight: 600; }

/* Forms */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-weight: 700; }
.q, .q.field { margin: 0 0 var(--s-7); }
.q > .field:last-child { margin-bottom: 0; }
.q > legend, .q > label { display: block; font: 600 var(--fs-lg)/var(--lh-snug) var(--serif); margin-bottom: var(--s-3); }
.qn { display: block; font: 700 var(--fs-xs)/1.4 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s-1); }
.field { margin: 0 0 var(--s-5); }
.field > label, .field > fieldset > legend, fieldset.field > legend { display: block; font-weight: 700; margin-bottom: var(--s-1); }
.hint, .hint-inline { color: var(--muted); font-weight: 400; font-size: var(--fs-sm); }
.q > label .hint-inline { font-family: var(--font); }
.hint { margin: 0 0 var(--s-2); }
input[type=text], input[type=email], input[type=password], select, textarea {
  width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--surface); border: 2px solid var(--field-border);
  border-radius: var(--radius-sm); padding: var(--s-3); min-height: 48px; }
input[type=text], input[type=email], input[type=password], select { font-size: var(--fs-base); }
select { appearance: none; -webkit-appearance: none; padding-right: var(--s-7); background: var(--surface) var(--chevron-img) no-repeat right var(--s-4) center / 18px; }
textarea { resize: vertical; }
textarea.mono, .mono { font-family: var(--mono); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.code-input { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; max-width: 22rem; }
input[type=file] { font: inherit; font-size: var(--fs-sm); max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-weight: 700; min-height: 44px; padding: var(--s-2) var(--s-4); margin-right: var(--s-3);
  border: 2px solid var(--accent); border-radius: var(--radius-sm); background: transparent; color: var(--accent); cursor: pointer; }
.options { display: grid; gap: 0; }
.opt, .check { display: flex; align-items: flex-start; gap: var(--s-3); }
.opt { min-height: 44px; align-items: center; }
.opt label, .check label { cursor: pointer; }
input[type=checkbox], input[type=radio] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; flex: none;
  border: 2px solid var(--field-border); border-radius: var(--radius-xs); background: var(--surface) no-repeat center / 18px; cursor: pointer; }
input[type=radio] { border-radius: 50%; background-size: 20px; }
input[type=checkbox]:checked { background-color: var(--accent); border-color: var(--accent); background-image: var(--check-img); }
input[type=radio]:checked { background-color: var(--accent); border-color: var(--accent); background-image: var(--dot-img); }
.check { flex-wrap: wrap; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: var(--s-4) var(--s-5); margin: var(--s-4) 0 var(--s-6); }
.check input { margin-top: 2px; }
.check .field-error { flex-basis: 100%; }
.check label { flex: 1; font-weight: 400; font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.or { margin: var(--s-3) 0; color: var(--muted); }
.has-error { border-left: 4px solid var(--error); padding-left: var(--s-3); }
.check.has-error { border-left-width: 6px; border-color: var(--error); }
.field-error { color: var(--error); font-weight: 700; margin: 0 0 var(--s-2); }
.error-summary { border: 2px solid var(--error); background: var(--error-bg); border-radius: var(--radius); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-5); }
.error-summary:focus, .warning:focus { outline: 3px solid var(--error); outline-offset: 2px; box-shadow: none; }
.warning:focus { outline-color: var(--warn-border); }
.error-summary h2, .warning h2 { margin: 0 0 var(--s-2); font: 700 var(--fs-lg)/var(--lh-snug) var(--font); }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary a { color: var(--error); font-weight: 700; }
.warning { border: 2px solid var(--warn-border); background: var(--warn-bg); border-radius: var(--radius); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-5); }
.leftovers { list-style: none; padding: 0; margin: var(--s-4) 0 0; border-top: 1px solid var(--border); }
.leftovers li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; margin: 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.leftovers .kind { font-weight: 700; }
.leftovers code { display: inline-block; margin-top: 2px; }
.show-me { margin: 0; }
#f-report fieldset > label { display: block; font-weight: 700; margin: var(--s-3) 0 var(--s-1); }
label code { white-space: nowrap; }

/* Consent box */
.terms-text { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-4) var(--s-5) var(--s-1); font-size: var(--fs-sm); }
.terms-text p:first-child strong { font: 600 var(--fs-lg) var(--serif); }
.terms-text ul { padding-left: 0; list-style: none; margin: var(--s-3) 0; }
.terms-text li { margin-bottom: var(--s-3); }
.terms-text li strong { color: var(--text); }
.terms-text p:last-child em { font-size: var(--fs-xs); color: var(--muted); font-style: normal; }
.terms-more { margin: var(--s-3) 0 var(--s-4); font-size: var(--fs-sm); }

/* Code + prompt */
.code-card { margin: 0 0 var(--s-5); }
.code-card p { margin: var(--s-2) 0; }
.code { font-family: var(--mono); font-size: clamp(1rem, 5.4vw - .1rem, 1.375rem); font-weight: 700; letter-spacing: .02em; white-space: nowrap; text-align: center;
  background: var(--surface); border: 1px solid var(--safe-border); border-radius: var(--radius-sm); padding: var(--s-3) var(--s-2); }
.steps { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; gap: var(--s-3); counter-reset: step; }
.steps li { display: flex; gap: var(--s-3); align-items: flex-start; counter-increment: step; }
.steps li::before, .num { content: counter(step); width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--accent);
  color: var(--accent-text); font-weight: 700; font-size: var(--fs-sm); display: flex; align-items: center; justify-content: center; }
.num.safe { background: var(--safe); color: var(--bg); }
.steps li > span { padding-top: 3px; }
.copy-row { margin: var(--s-4) 0 0; }
.copy-status { font-size: var(--fs-sm); color: var(--ok); margin: var(--s-2) 0 0; }
.copy-status:empty { display: none; }
.prompt-box { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin: var(--s-4) 0; }
.prompt-box summary, .legal summary { cursor: pointer; padding: var(--s-3) var(--s-4); font-weight: 700; min-height: 48px; display: flex; align-items: center;
  list-style: none; justify-content: space-between; gap: var(--s-3); }
.prompt-box summary::-webkit-details-marker, .legal summary::-webkit-details-marker { display: none; }
.prompt-box summary::after, .legal summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--accent); }
.prompt-box[open] > summary::after, .legal[open] > summary::after { content: "\2212"; }
.prompt-box pre { margin: 0; padding: var(--s-4); overflow: auto; max-height: 26rem; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--mono); font-size: .875rem; line-height: var(--lh-relaxed); background: var(--code-bg); border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius); }
.come-back { margin-top: var(--s-5); }
.come-back p { color: var(--text-2); }
.upload-check { margin: 0 0 var(--s-5); }
.upload-check ul { margin: var(--s-2) 0 0; padding-left: 20px; font-size: var(--fs-sm); }
.upload-check li { margin-bottom: var(--s-1); }

/* Study information page */
.study-info h2 { margin-top: var(--s-7); scroll-margin-top: var(--s-4); }
.toc { margin: var(--s-4) 0 var(--s-6); padding: var(--s-4) var(--s-5); background: var(--surface-2); border-radius: var(--radius); font-size: var(--fs-sm); }
.toc ol { margin: var(--s-2) 0 0; padding-left: 20px; }
.toc li { margin-bottom: var(--s-1); break-inside: avoid; }
@media (min-width: 640px) { .toc ol { columns: 2; column-gap: var(--s-6); } }
.study-info table { display: block; overflow-x: auto; border-collapse: collapse; margin: var(--s-4) 0; font-size: var(--fs-sm); }
.study-info th, .study-info td { border: 1px solid var(--border); padding: var(--s-2) var(--s-3); text-align: left; vertical-align: top; min-width: 9rem; }
.study-info th { background: var(--surface-2); }
.legal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 var(--s-5); }
.legal summary { padding-left: 0; padding-right: 0; }

/* Landing */
.hero { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-7); align-items: center; padding-top: var(--s-7); padding-bottom: var(--s-7); }
.hero-copy { flex: 999 1 30rem; min-width: 0; }
.hero h1 { margin: 0 0 var(--s-4); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; margin-top: var(--s-5); }
.report-card { flex: 1 1 20rem; min-width: 0; box-shadow: var(--shadow-2); }
.report-card .eyebrow { color: var(--muted); }
.report-card .title { font: 600 var(--fs-lg)/var(--lh-snug) var(--serif); margin: 0 0 var(--s-4); }
.levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1); }
.levels span { height: 8px; border-radius: var(--radius-pill); background: var(--accent-track); }
.levels span.on { background: var(--accent); }
.level-names { display: flex; flex-wrap: wrap; gap: 0 var(--s-1); font-size: var(--fs-xs); color: var(--muted); margin: var(--s-2) 0 var(--s-5); }
.level-names span + span::before, .level-names strong + span::before, .level-names span + strong::before { content: "›"; margin-right: var(--s-1); color: var(--muted); font-weight: 400; }
.level-names strong { color: var(--text); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.ticks li { display: flex; gap: var(--s-3); }
.ticks .icon { color: var(--accent); margin-top: 3px; }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section h2 { margin-top: 0; }
.section-alt { background: var(--surface-2); }
.two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--s-4); }
.two-up p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-4); }
.how .card { display: flex; flex-direction: column; gap: var(--s-2); }
.how h3 { margin: var(--s-1) 0 0; }
.how-top { display: flex; align-items: center; justify-content: space-between; }
.how-top .small { font-size: var(--fs-xs); font-weight: 600; }
.how p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s-5); margin-top: var(--s-5); }
.data-grid h3 { font-size: var(--fs-sm); color: var(--safe); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--s-2); }
.data-grid ul { margin: 0; padding-left: 20px; font-size: var(--fs-sm); }
.data-grid p { margin: 0; font-size: var(--fs-sm); }
.source { font-size: var(--fs-xs); color: var(--muted); margin: var(--s-4) 0 0; max-width: 65ch; }

/* "What you'll get" page */
.hero-tight { padding-bottom: var(--s-6); }
.sample-report { position: relative; box-shadow: var(--shadow-2); padding: var(--s-6); max-width: 46rem; }
.sample-tag { position: absolute; top: var(--s-4); right: var(--s-5); margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px 10px; }
.sample-h { font: 600 var(--fs-lg)/var(--lh-snug) var(--serif); margin: var(--s-6) 0 var(--s-3); }
.sample-report .sample-h:first-of-type { margin-top: 0; }
.sample-report p { margin: 0 0 var(--s-3); }
.moves { margin: 0; padding-left: 22px; display: grid; gap: var(--s-3); }
.moves li::marker { color: var(--accent); font-weight: 700; }
blockquote { margin: var(--s-2) 0 var(--s-3); padding: var(--s-3) var(--s-4); background: var(--accent-soft); border-radius: var(--radius-sm); color: var(--text); }
.levels-list { gap: var(--s-3); }
.scripts { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s-4); }
.script-card { display: flex; flex-direction: column; gap: var(--s-2); }
.script-card h3, .script-card .small { margin: 0; }
.script-card .btn { margin-top: auto; }
.script-text { flex: 0 0 auto; margin: var(--s-2) 0; padding: var(--s-3) var(--s-4); white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--font); font-size: var(--fs-sm); line-height: var(--lh-relaxed); background: var(--code-bg); border-radius: var(--radius-sm); }
.make-it-count { margin: var(--s-5) 0; }
.make-it-count h2 { margin-bottom: var(--s-2); }
.make-it-count .btn-block { margin-bottom: var(--s-4); }
.learn { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: var(--s-6); }
.learn-group { background: none; border: 0; padding: 0; }
.learn-group h3 { margin: 0 0 var(--s-1); }
.learn-group > .small { margin: 0 0 var(--s-3); }
.learn-group .eyebrow { margin-bottom: var(--s-1); }
.qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.qlist li { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-3); align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); margin: 0; }
.q-text { font-size: var(--fs-sm); line-height: var(--lh-relaxed); min-width: 0; overflow-wrap: anywhere; }
.q-copy { padding: var(--s-2); min-width: 44px; border-color: transparent; }
.q-copy:hover, .q-copy:focus-visible { border-color: var(--accent); }
.qlist .copy-status { grid-column: 1 / -1; margin: 0; font-size: var(--fs-xs); }

.nowrap { white-space: nowrap; }

/* Small utilities */
.mb-0 { margin-bottom: 0; } .mt-16 { margin-top: var(--s-4); } .mt-22 { margin-top: var(--s-5); }
.pt-8 { padding-top: var(--s-2); } .pt-0 { padding-top: 0; }
.panel-lg { padding: var(--s-5); }
@media (min-width: 768px) { .panel-lg { padding: var(--s-6); } }

/* Admin */
.admin-bar { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--border); margin-bottom: var(--s-2); font-size: var(--fs-sm); }
.filters { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); align-items: flex-end; }
.filters .field { min-width: 10rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
table { border-collapse: collapse; width: 100%; background: var(--surface); font-size: var(--fs-sm); }
th, td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { background: var(--code-bg); white-space: nowrap; }
td.nowrap { white-space: nowrap; }
tr[data-href] { cursor: pointer; }
tr[data-href]:hover td { background: var(--code-bg); }
.pill { display: inline-block; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 1px 10px; font-size: var(--fs-xs); white-space: nowrap; }
.pill-flag { border-color: var(--warn-border); background: var(--warn-bg); font-weight: 700; }
.pill-ok { border-color: var(--ok); color: var(--ok); }
.meta { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--s-1) var(--s-4); }
.meta dt { font-weight: 700; color: var(--muted); }
.meta dd { margin: 0; overflow-wrap: anywhere; }
table.fm th { width: 16rem; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.report { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--s-1) var(--s-5); overflow-wrap: anywhere; }
.report pre { background: var(--code-bg); padding: var(--s-3); overflow: auto; }

/* Phones */
@media (max-width: 600px) {
  .site-nav { gap: 0 var(--s-4); }
  .hero { padding-top: var(--s-6); padding-bottom: var(--s-6); }
  .hero .lede { font-size: var(--fs-base); }
  .hero-cta .btn, .closing-cta .btn { width: 100%; }
  .learn { grid-template-columns: 1fr; gap: var(--s-6); }
  .sample-report { padding: var(--s-5); }
  .sample-tag { position: static; display: inline-block; margin-bottom: var(--s-3); }
  :root { --fs-base: 1.0625rem; }
  .levels-list .card { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-3); align-items: baseline; padding: var(--s-3) var(--s-4); }
  .levels-list .how-top { display: none; }
  .levels-list h3 { margin: 0; font-size: var(--fs-sm); }
  .meta { grid-template-columns: 1fr; }
  .meta dd { margin-bottom: var(--s-2); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color .15s ease, border-color .15s ease; }
}

/* ---- Home page, research-first (A/B: app/landing.py) ---- */
.hero-b .hero-copy { max-width: 46rem; }
.hero-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-sm); color: var(--muted); }
.hero-ticks li { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero-ticks .icon { color: var(--safe); }
.give-get { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); margin: var(--s-5) 0 0; max-width: 46rem; }
.give-get > div { padding: var(--s-4) var(--s-4) var(--s-5); min-width: 0; }
.give-get > .get { background: var(--safe-bg); border-left: 1px solid var(--border); }
.give-get h3 { margin: 0 0 var(--s-2); font-size: var(--fs-base); }
.give-get ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s-2); font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--text-2); }
@media (min-width: 768px) { .give-get > div { padding: var(--s-5) var(--s-6) var(--s-6); } }
.learn-qs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s-4); }
.learn-qs li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-5);
  font: 600 var(--fs-lg)/var(--lh-snug) var(--serif); }
.split { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-8); align-items: center; }
.split-copy { flex: 3 1 24rem; min-width: 0; max-width: 40rem; }
.split-copy p:last-child { margin-bottom: 0; }
.split .report-card { flex: 2 1 18rem; }
.who-runs { max-width: 46rem; }
.who-runs p { margin: 0; }
.closing { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--s-6); align-items: start; }
.closing-cta h2 { margin-top: 0; }
.updates h2 { font-size: var(--fs-lg); margin: 0 0 var(--s-2); }
.updates > p:first-of-type { margin-top: 0; color: var(--text-2); }
.updates-form label { display: block; font-weight: 700; margin-bottom: var(--s-1); }
.updates-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
.updates-row input { flex: 1 1 14rem; min-width: 0; }
.updates-row .btn { flex: 0 0 auto; }
.wrap > .updates, .wrap .updates { margin-top: var(--s-6); }
.hp { display: none; }

/* ---- /what-you-share: transparency page ---- */
.jump { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin-top: var(--s-4); font-size: var(--fs-sm); font-weight: 600; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; }
.short-answer { margin: var(--s-4) 0 0; padding: var(--s-4) var(--s-5); background: var(--safe-bg); border: 1px solid var(--safe-border); border-radius: var(--radius); max-width: 44rem; }
.link-pair { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: var(--s-4); }
.journey .card { display: flex; flex-direction: column; gap: var(--s-2); }
.journey h3 { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-1) 0 0; }
.journey p, .journey ul { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.journey ul { padding-left: 1.1em; display: grid; gap: var(--s-2); }
.journey .kept { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--border); color: var(--text); }
.zone { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-xs); font-weight: 700; padding: var(--s-1) var(--s-2); border-radius: var(--radius-xs); white-space: nowrap; }
.zone .icon { width: 14px; height: 14px; }
.zone-site { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); }
.zone-ai { background: var(--safe-bg); color: var(--safe); border: 1px solid var(--safe-border); }
.file-doc { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.file-tab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-4); padding: var(--s-3) var(--s-4); background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 600; }
.file-name { font-family: var(--mono); }
.file-tab span { display: inline-flex; align-items: center; gap: var(--s-2); }
.file-tab-who { font-weight: 400; color: var(--muted); }
.file-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5) var(--s-4); }
.file-row + .file-row { border-top: 1px solid var(--border); }
@media (min-width: 900px) {
  .file-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; padding: 0; }
  .file-part { background: var(--code-bg); padding: var(--s-6); border-right: 1px solid var(--border); }
  .file-part .file-snippet { background: none; padding: 0; border-radius: 0; border-left: 0; }
  .anno { padding: var(--s-6); }
}
.file-label { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-weight: 700; }
.file-snippet { margin: 0; padding: var(--s-4); background: var(--code-bg); border-left: 3px solid var(--border); border-radius: var(--radius-sm); font: var(--fs-xs)/var(--lh-relaxed) var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
.anno h3 { margin: 0 0 var(--s-2); }
.anno p { margin: 0 0 var(--s-3); color: var(--text-2); font-size: var(--fs-sm); }
.anno p:last-child { margin-bottom: 0; }
.fields { margin-top: var(--s-3); font-size: var(--fs-sm); }
.fields summary { cursor: pointer; font-weight: 700; color: var(--accent); min-height: 44px; display: flex; align-items: center; }
.fields h4 { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fields dl { margin: 0; display: grid; gap: var(--s-2); }
.fields dt code { font-size: var(--fs-xs); overflow-wrap: anywhere; }
.fields dd { margin: 0 0 var(--s-2); color: var(--text-2); }
.leftout { margin-top: var(--s-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--s-4); }
.leftout h3 { margin-top: 0; }
.checks { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); }
.faq { display: grid; gap: var(--s-3); max-width: 50rem; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 var(--s-5); }
.faq summary { list-style: none; cursor: pointer; font-weight: 700; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--accent); flex: none; }
.faq details[open] > summary::after { content: "\2212"; }
.faq details p { margin: 0 0 var(--s-4); color: var(--text-2); }
.prompt-box + .prompt-box { margin-top: var(--s-3); }

/* ---- /about ---- */
.about-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
.about-head h1 { margin: 0; }
.about-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid var(--surface); box-shadow: var(--shadow-2); }
@media (min-width: 768px) { .about-photo { width: 160px; height: 160px; } }
.about-initials { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font: 600 var(--fs-xl) var(--serif); }
.about-role { margin: var(--s-1) 0 0; color: var(--muted); }
.about-lede { margin-top: var(--s-5); max-width: 44rem; }
.about-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--s-6) var(--s-8); }
.about-cols .ticks { font-size: var(--fs-base); }
.timeline { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-4); max-width: 50rem; }
.timeline li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--border); color: var(--text-2); }
.timeline .when { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); padding-top: 2px; }
.timeline strong { color: var(--text); }
@media (max-width: 560px) { .timeline li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); } }
.coi p { margin: var(--s-4) 0 0; max-width: 50rem; }
.leftout .ticks + p { margin-top: var(--s-4); }

/* ---- contact ---- */
.msg { margin-top: var(--s-4); }
.msg-meta, .msg-from { margin: 0 0 var(--s-2); font-size: var(--fs-sm); }
.msg-from { color: var(--muted); }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.email-btn.revealed { overflow-wrap: anywhere; }

/* ---- /findings ---- */
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); max-width: 46rem; }
.stage { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-4); align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-4) var(--s-5); }
.stage h3 { margin: 0 0 var(--s-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.stage p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.stage-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.stage-dot .icon { width: 16px; height: 16px; }
.stage-done .stage-dot { background: var(--safe-bg); color: var(--safe); border-color: var(--safe-border); }
.stage-now { border: 2px solid var(--accent); }
.stage-now .stage-dot { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.stage-next { opacity: .85; }
.stage-badge { font: 700 var(--fs-xs) var(--font); text-transform: uppercase; letter-spacing: .06em; padding: 2px var(--s-2); border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent); }
.protect { margin: var(--s-4) 0; padding-left: 1.2em; display: grid; gap: var(--s-2); }

/* ---- /research-design ---- */
.measures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: var(--s-4); }
.measures h3 { margin-top: 0; }
.measures p { color: var(--text-2); font-size: var(--fs-sm); }
.rq + .rq { border-top: 1px solid var(--border); }
.rq h2 { max-width: 46rem; }
.rq-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.rq-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-5); min-width: 0; }
.rq-step h3 { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-3); }
.rq-step h4 { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-sm); }
.rq-step h4:first-of-type { margin-top: 0; }
.rq-step p { margin: 0; color: var(--text-2); }
.srcs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
.src { display: grid; gap: 2px; }
.src code { font-size: var(--fs-xs); justify-self: start; }
.src-kind { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.src-answer .src-kind { color: var(--accent); }
.src-field .src-kind { color: var(--safe); }
.src-part2 .src-kind { color: var(--muted); }
.answers { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s-3); color: var(--text-2); }
.limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--s-4); margin: 0; }
.limits div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-4) var(--s-5); }
.limits dt { font-weight: 700; margin-bottom: var(--s-1); }
.limits dd { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.learn-qs a { color: inherit; text-decoration: none; display: block; }
.learn-qs a:hover, .learn-qs a:focus-visible { color: var(--accent); text-decoration: underline; }

/* Home: report excerpt (a faithful look at the real file, not a designed graphic) */
.report-excerpt { flex: 1 1 20rem; min-width: 0; }
.excerpt-body { padding: var(--s-4) var(--s-5) var(--s-5); display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
.excerpt-body p { margin: 0; }
.excerpt-h { font: 600 var(--fs-base)/var(--lh-snug) var(--serif); color: var(--text); }
.excerpt-more { color: var(--muted); font-style: italic; }