:root {
  --ink: #0c1730;
  --muted: #52607b;
  --blue: #0d46d9;
  --blue-dark: #0732a6;
  --line: #c3cde4;
  --line-dark: #172a52;
  --amber: #a85b00;
  --amber-bg: #fdf6e9;
  --soft-blue: #f2f6ff;
  --paper: #fcfbf7;
  --white: #ffffff;
  --stamp: #b3261e;
  --sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Nova", Palatino, "Book Antiqua", Georgia, serif;
  --container: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 17px; line-height: 1.6; }
a { color: var(--blue); text-underline-offset: 0.18em; }
a:hover { color: var(--blue-dark); }
button, input { font: inherit; }
button, .button { min-height: 48px; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 20; background: var(--ink); color: white; padding: 10px 16px; }
.skip-link:focus { top: 12px; }

/* Docket band — the site-wide disclaimer */
.legal-alert { background: var(--ink); color: #e8ecf7; border-bottom: 4px solid var(--amber); padding: 13px max(24px, calc((100% - var(--container)) / 2)); font-size: 14.5px; line-height: 1.5; letter-spacing: 0.01em; }
.legal-alert strong { color: #ffd9a0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px; margin-right: 6px; }

.eyebrow { margin: 0 0 14px; color: var(--blue); font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; }
.eyebrow::after { content: ""; display: block; width: 54px; height: 3px; margin-top: 10px; background: var(--blue); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.site-header { width: min(calc(100% - 48px), var(--container)); margin: 0 auto; min-height: 92px; display: grid; grid-template-columns: 1fr auto auto; gap: 40px; align-items: center; border-bottom: 2px solid var(--ink); }
.brand { color: var(--ink); font-family: var(--serif); font-size: 27px; font-weight: 700; text-decoration: none; letter-spacing: -0.02em; }
nav { display: flex; gap: 24px; }
nav a { color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none; }
nav a:hover { color: var(--blue); }

.button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border: 2px solid var(--blue); color: var(--blue); background: white; font-weight: 700; text-decoration: none; transition: background 150ms ease, color 150ms ease, transform 150ms ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--blue); color: white; }
.button-primary:hover { background: var(--blue-dark); color: white; }
.button-outline:hover { background: var(--soft-blue); }

.hero { width: min(calc(100% - 48px), var(--container)); min-height: 555px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr); gap: 70px; align-items: center; border-bottom: 1px solid var(--line-dark); overflow: hidden; }
.hero h1 { max-width: 820px; margin: 0 0 26px; font-family: var(--serif); font-size: clamp(54px, 6.3vw, 90px); line-height: 0.98; letter-spacing: -0.045em; }
.hero-lead { max-width: 720px; margin: 0 0 34px; font-size: clamp(23px, 2vw, 30px); line-height: 1.45; }
.hero-actions, .response-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.paper-stack { position: relative; align-self: stretch; min-height: 420px; }
.paper { position: absolute; width: 340px; height: 430px; right: 0; bottom: -20px; border: 1px solid #d7dce7; background: white; box-shadow: 0 16px 30px rgba(10, 25, 60, 0.1); }
.paper-back { right: 36px; bottom: -2px; transform: rotate(-5deg); }
.paper-front { padding: 64px 48px; transform: rotate(1deg); border-left: 3px solid var(--blue); }
.paper-front span, .paper-front strong { display: block; font-family: var(--serif); font-size: 14px; line-height: 1.4; letter-spacing: 0.04em; }
.paper-front i { display: block; height: 7px; margin-top: 25px; background: #e8ebf2; }
.paper-front i:nth-of-type(2) { width: 82%; } .paper-front i:nth-of-type(3) { width: 91%; } .paper-front i:nth-of-type(4) { width: 74%; } .paper-front i:nth-of-type(5) { width: 86%; }
.paper-front::after { content: "DISPUTED — PROOF REQUESTED"; position: absolute; left: 20px; bottom: 84px; padding: 9px 14px; border: 3px double var(--stamp); color: var(--stamp); font-family: var(--sans); font-size: 15px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-8deg); opacity: 0.82; }
.hero { background: repeating-linear-gradient(180deg, transparent 0 34px, rgba(23, 42, 82, 0.045) 34px 35px); }

.quick-start { width: min(calc(100% - 48px), var(--container)); margin: 0 auto; border-bottom: 1px solid var(--line-dark); }
.step-rail { list-style: none; padding: 28px 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.step-rail li { display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 8px 38px; border-right: 1px solid var(--blue); }
.step-rail li:first-child { padding-left: 0; } .step-rail li:last-child { border: 0; padding-right: 0; }
.step-number { color: var(--blue); font-family: var(--serif); font-size: 72px; line-height: 0.9; }
.step-rail h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 29px; }
.step-rail p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }

.section { width: min(calc(100% - 48px), var(--container)); margin: 0 auto; padding: 96px 0; border-bottom: 1px solid var(--line-dark); }
.section-heading { margin-bottom: 44px; }
.section-heading h2, .response-intro h2 { max-width: 920px; margin: 0 0 16px; font-family: var(--serif); font-size: clamp(42px, 4.3vw, 66px); line-height: 1.05; letter-spacing: -0.035em; }
.section-heading > p, .response-intro > p { max-width: 820px; margin: 0; color: var(--muted); font-size: 20px; }
.split-heading { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 70px; align-items: end; }
.split-heading h2, .split-heading p { margin: 0; }
.plain-grid { display: grid; gap: 34px; }
.three-up { grid-template-columns: repeat(3, 1fr); }
.four-up { grid-template-columns: repeat(4, 1fr); }
.subsection-title { margin: 52px 0 18px; font-family: var(--serif); font-size: 30px; letter-spacing: -0.02em; }
.plain-grid article { border-top: 4px solid var(--blue); padding-top: 22px; }
.plain-grid h3, .defense-grid h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 25px; }
.plain-grid p, .defense-grid p { margin: 0; color: var(--muted); }

/* Rights charter */
.rights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line-dark); background: var(--ink); }
.rights-grid article { position: relative; padding: 30px 30px 26px 30px; border-right: 1px solid #2a3a61; border-bottom: 1px solid #2a3a61; }
.rights-grid article:nth-child(3n) { border-right: 0; }
.rights-grid article:nth-child(n+4) { border-bottom: 0; }
.rights-grid span { display: block; margin-bottom: 10px; color: #ffd9a0; font-family: var(--serif); font-size: 30px; }
.rights-grid h3 { margin: 0 0 8px; color: #ffffff; font-family: var(--serif); font-size: 25px; letter-spacing: -0.01em; }
.rights-grid p { margin: 0; color: #c3cde4; font-size: 15.5px; line-height: 1.55; }
.rights-grid strong { color: #ffffff; }

.note { margin-top: 36px; padding: 18px 22px; border: 1px solid var(--line); }
.short-version { margin: 40px 0 48px; padding: 26px 30px 22px; border-left: 4px solid var(--blue); }
.short-version p { margin: 0 0 12px; font-size: 17px; }
.short-version ul { margin: 0; padding-left: 22px; }
.short-version li { margin: 8px 0; line-height: 1.6; }
.note-neutral { background: var(--soft-blue); }
.note-amber { border-color: #d58a2b; background: var(--amber-bg); color: #6d3c00; }
.large-note { font-size: 22px; }
.metadata-downloads { margin-top: 18px; }

.metadata-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 38px; }
.metadata-layout > * { min-width: 0; }
.code-figure { margin: 0; border: 1px solid var(--line); }
.code-figure figcaption { padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--blue); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; }
.code-figure pre { margin: 0; padding: 24px; overflow: auto; background: #fbfcff; font: 14px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.evidence-ledger { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.evidence-ledger > div { padding: 16px 24px 20px; }
.evidence-ledger > div + div { border-left: 1px solid var(--line); }
.evidence-ledger h3 { margin: 0 -24px 8px; padding: 0 24px 12px; border-bottom: 1px solid var(--line); color: var(--blue); font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
.evidence-ledger ul { margin: 0; padding: 0; list-style: none; }
.evidence-ledger li { padding: 14px 0; border-bottom: 1px solid #dce3f2; }
.evidence-ledger li:last-child { border: 0; }
.route-flow { margin-top: 44px; }
.route-flow h3 { margin: 0 0 18px; color: var(--blue); font-size: 14px; text-transform: uppercase; letter-spacing: 0.07em; }
.route-flow ol { margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); }
.route-flow li { position: relative; padding: 0 26px; }
.route-flow li:first-child { padding-left: 0; }
.route-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -5px; top: 12px; color: var(--blue); font-size: 24px; }
.route-flow strong, .route-flow span { display: block; }
.route-flow strong { color: var(--blue); font-size: 14px; text-transform: uppercase; }
.route-flow span { margin-top: 5px; color: var(--muted); font-size: 14px; line-height: 1.4; }

.factor-table { overflow-x: auto; border: 1px solid var(--blue); }
table { width: 100%; border-collapse: collapse; min-width: 820px; }
th, td { padding: 18px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { color: var(--blue); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
tbody th { width: 25%; font-family: var(--serif); font-size: 20px; }
tr > *:last-child { border-right: 0; } tbody tr:last-child > * { border-bottom: 0; }
.defense-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 46px; border-top: 1px solid var(--line-dark); }
.defense-grid article { padding: 30px 30px 30px 0; border-bottom: 1px solid var(--line); }
.defense-grid article:nth-child(3n+2), .defense-grid article:nth-child(3n+3) { padding-left: 30px; border-left: 1px solid var(--line); }

.preservation-layout { display: grid; grid-template-columns: 1.55fr 0.85fr; gap: 28px; margin-top: 32px; }
.checklist, .implementation-question { border: 1px solid var(--blue); padding: 26px; }
.checklist h3, .implementation-question h3 { margin: 0 0 18px; font-family: var(--serif); font-size: 28px; }
.checklist label { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); cursor: pointer; }
.checklist input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blue); }
.checklist label:has(input:checked) span { color: var(--muted); text-decoration: line-through; }
.privacy-note { margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.implementation-question { display: flex; flex-direction: column; justify-content: center; }
.implementation-question dl { margin: 18px 0 0; }
.implementation-question dl div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.implementation-question dt { font-weight: 700; }
.implementation-question dd { margin: 0; color: var(--muted); }

.request-list { margin: 0; padding: 0; list-style: none; counter-reset: request; columns: 2; column-gap: 70px; }
.request-list li { counter-increment: request; break-inside: avoid; position: relative; padding: 0 0 24px 50px; }
.request-list li::before { content: counter(request, decimal-leading-zero); position: absolute; left: 0; top: 0; color: var(--blue); font-family: var(--serif); font-size: 26px; line-height: 1; }

.response-section { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 60px; }
.response-intro { position: sticky; top: 24px; align-self: start; }
.generator { border: 1px solid var(--line-dark); }
.generator-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px; border-bottom: 1px solid var(--line); background: var(--soft-blue); }
.generator-fields label { color: var(--muted); font-size: 13px; font-weight: 700; }
.generator-fields input { width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid #8695b4; background: white; color: var(--ink); }
.letter-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.letter-toolbar button { min-height: 36px; margin-left: 8px; padding: 6px 10px; border: 1px solid var(--blue); background: white; color: var(--blue); font-weight: 700; cursor: pointer; }
.letter-preview pre { min-height: 650px; max-height: 820px; margin: 0; padding: 28px; overflow: auto; white-space: pre-wrap; font: 14px/1.6 var(--sans); }

.decision-flow { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); }
.decision-flow > div { padding: 28px; border-right: 1px solid var(--line); }
.decision-flow > div:first-child { padding-left: 0; } .decision-flow > div:last-child { border-right: 0; }
.decision-flow span { color: var(--blue); font-family: var(--serif); font-size: 42px; }
.decision-flow h3 { margin: 8px 0; font-family: var(--serif); font-size: 23px; }
.decision-flow p { margin: 0; color: var(--muted); font-size: 15px; }

.source-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; }
.source-list li { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; padding: 17px 0; border-top: 1px solid var(--line); }
.source-list a { font-weight: 700; }
.source-list span { color: var(--muted); }
.disclaimer { width: min(calc(100% - 48px), var(--container)); margin: 0 auto; padding: 46px 0 56px; display: grid; grid-template-columns: 0.55fr 1fr 0.9fr; gap: 42px; }
.disclaimer h2 { margin: 0; font-family: var(--serif); font-size: 29px; line-height: 1.2; }
.disclaimer p { margin: 0; color: var(--muted); font-size: 14px; }
footer { width: min(calc(100% - 48px), var(--container)); margin: 0 auto; min-height: 110px; padding: 22px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; border-top: 2px solid var(--ink); }
footer .brand { flex: 0 0 auto; }
footer p { flex: 1 1 260px; min-width: 0; margin: 0; color: var(--muted); }
footer nav { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 12px 26px; }
nav a { white-space: nowrap; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; } .site-header nav { display: none; } .header-download { justify-self: end; }
  .hero { grid-template-columns: 1fr; padding: 70px 0 30px; } .paper-stack { display: none; }
  .step-rail, .three-up, .four-up, .defense-grid, .decision-flow { grid-template-columns: 1fr; }
  .step-rail li { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 0; }
  .step-rail li:last-child { border-bottom: 0; }
  .split-heading, .metadata-layout, .preservation-layout, .response-section, .disclaimer { grid-template-columns: 1fr; gap: 30px; }
  .route-comparison, .strength-grid, .situation-panel { grid-template-columns: 1fr; }
  .rights-grid { grid-template-columns: 1fr; }
  .rights-grid article { border-right: 0; border-bottom: 1px solid #2a3a61; }
  .rights-grid article:last-child { border-bottom: 0; }
  .wizard-details .generator-fields { grid-template-columns: 1fr; }
  .wizard-how li { grid-template-columns: 1fr; gap: 4px; }
  .wizard-card { padding: 18px 20px 26px; }
  .wizard-main { width: min(calc(100% - 32px), 880px); }
  .wizard-cta { padding: 28px 24px; }
  .defense-grid article, .defense-grid article:nth-child(3n+2), .defense-grid article:nth-child(3n+3) { padding: 24px 0; border-left: 0; }
  .response-intro { position: static; }
  .decision-flow > div, .decision-flow > div:first-child { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .site-header, .hero, .quick-start, .section, .disclaimer, footer { width: min(calc(100% - 32px), var(--container)); }
  .site-header { min-height: 74px; } .brand { font-size: 21px; } .header-download { display: none; }
  .hero { min-height: auto; padding: 56px 0; } .hero h1 { font-size: 50px; } .hero-lead { font-size: 21px; }
  .hero-actions, .response-actions { display: grid; } .button { width: 100%; }
  .section { padding: 68px 0; } .section-heading h2, .response-intro h2 { font-size: 42px; }
  .evidence-ledger, .generator-fields, .source-list { grid-template-columns: 1fr; }
  .evidence-ledger > div + div { border-left: 0; border-top: 2px solid var(--ink); }
  .route-flow ol { grid-template-columns: 1fr; }
  .route-flow li { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .route-flow li:not(:last-child)::after { display: none; }
  .request-list { columns: 1; }
  .source-list li { grid-template-columns: 1fr; gap: 4px; }
  footer { flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; padding: 28px 0; }
  footer p { flex: 0 0 auto; }
  footer nav { justify-content: flex-start; }
}

/* Route comparison — original-source vs cached copy */
.route-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 46px; }
.route-comparison article { border: 1px solid var(--line-dark); background: var(--white); padding: 30px 32px 26px; position: relative; }
.route-label { margin: 0 0 6px; color: var(--blue); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; }
.route-comparison h3 { margin: 0 0 12px; font-family: var(--serif); font-size: 30px; letter-spacing: -0.02em; }
.route-comparison ul { margin: 14px 0; padding-left: 20px; color: var(--muted); }
.route-comparison li { margin: 8px 0; }
.route-warning { margin: 16px -32px -26px; padding: 14px 32px 16px; border-top: 1px solid var(--line); background: var(--soft-blue); color: var(--ink); font-size: 14.5px; }

/* Strength cards */
.strength-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 46px; }
.strength-card { padding: 26px 30px 22px; background: var(--white); border: 1px solid var(--line); border-top: 5px solid var(--blue); }
.strength-card.caution { border-top-color: var(--amber); }
.strength-card h3 { margin: 0 0 12px; font-family: var(--serif); font-size: 25px; }
.strength-card ul { margin: 0; padding-left: 20px; color: var(--muted); }
.strength-card li { margin: 8px 0; }

/* Substantiation section */
.burden-note { max-width: 860px; margin: 0 0 40px; padding: 16px 22px; background: var(--soft-blue); border-left: 4px solid var(--blue); }
.substantiation-language { position: relative; margin: 48px 0 0; padding: 30px 36px 30px 92px; border: 1px solid var(--line-dark); background: var(--white); font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.5; letter-spacing: -0.01em; }
.substantiation-language::before { content: "“"; position: absolute; left: 26px; top: 2px; color: var(--blue); font-family: var(--serif); font-size: 92px; line-height: 1.2; }

/* Wizard CTA on the main page */
.response-main { min-width: 0; }
.wizard-cta { border: 1px solid var(--line-dark); background: var(--white); padding: 40px 44px; }
.wizard-cta h3 { margin: 0 0 22px; font-family: var(--serif); font-size: clamp(30px, 3vw, 42px); letter-spacing: -0.02em; }
.wizard-how { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.wizard-how li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.wizard-how strong { color: var(--blue); font-size: 15px; white-space: nowrap; }
.wizard-how span { color: var(--muted); }
.wizard-cta-button { font-size: 19px; padding: 16px 30px; }
.wizard-privacy { margin: 18px 0 0; color: var(--muted); font-size: 13.5px; }
.wizard-bridge { max-width: 720px; margin: 0 0 6px; padding: 14px 18px; background: var(--ink); color: #c3cde4; font-size: 15.5px; }
.wizard-bridge strong { color: #ffd9a0; }
.wizard-bridge a { color: #ffffff; font-weight: 700; }
.generator-disclaimer { display: block; margin: 0 0 22px; padding: 16px 20px; border: 1px solid #d58a2b; background: var(--amber-bg); color: #6d3c00; font-size: 15px; }

/* Wizard page (respond.html) */
.wizard-main { width: min(calc(100% - 48px), 880px); margin: 0 auto; padding: 48px 0 96px; }
.wizard-hero { margin-bottom: 30px; }
.wizard-hero h1 { margin: 0 0 14px; font-family: var(--serif); font-size: clamp(40px, 5vw, 62px); line-height: 1.03; letter-spacing: -0.03em; }
.wizard-lead { max-width: 720px; margin: 0 0 26px; color: var(--muted); font-size: 19px; }
.wizard-hero .wizard-how li { border-top-color: #dde4f2; }
.wizard-card { border: 1px solid var(--line-dark); background: var(--white); padding: 26px 36px 34px; }
.wizard-progress { padding: 4px 0 8px; border-bottom: 1px solid var(--line); }
.wizard-progress-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#wizard-step-label { color: var(--blue); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
#wizard-restart { min-height: 32px; padding: 4px 10px; border: 1px solid var(--line); background: white; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; }
#wizard-restart:hover { color: var(--blue); border-color: var(--blue); }
.wizard-bar { height: 5px; margin-top: 10px; background: #dde4f2; overflow: hidden; }
#wizard-bar-fill { display: block; height: 100%; width: 9%; background: var(--blue); transition: width 300ms ease; }

.wizard-stage fieldset { display: none; margin: 0; padding: 26px 0 0; border: 0; }
.wizard-stage fieldset.active { display: block; animation: step-in 260ms ease; }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.wizard-stage legend { padding: 0 0 4px; font-family: var(--serif); font-size: clamp(24px, 2.6vw, 31px); letter-spacing: -0.015em; float: left; width: 100%; }
.wizard-stage legend + * { clear: both; }
.q-help { margin: 0 0 18px; color: var(--muted); font-size: 15px; }

/* Answer options: ONLY radio labels get the option-card treatment */
.wizard-stage fieldset > label { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; padding: 14px 16px; margin: 0 0 10px; border: 1px solid var(--line); background: var(--white); cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
.wizard-stage fieldset > label:hover { border-color: var(--blue); background: var(--soft-blue); }
.wizard-stage input[type="radio"] { width: 19px; height: 19px; margin-top: 3px; accent-color: var(--blue); }
.wizard-stage fieldset > label:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: var(--soft-blue); }
.wizard-stage fieldset > label strong { display: block; font-size: 17px; }
.wizard-stage fieldset > label small { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.45; }

/* Details step: plain stacked text fields, NOT option cards */
.wizard-details .generator-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0; border: 0; background: transparent; }
.wizard-details .generator-fields label { display: block; padding: 0; margin: 0; border: 0; background: transparent; cursor: text; color: var(--muted); font-size: 13px; font-weight: 700; }
.wizard-details .generator-fields input { display: block; width: 100%; margin-top: 6px; padding: 12px; border: 1px solid #8695b4; background: white; color: var(--ink); font-weight: 400; }

.wizard-nav { display: flex; justify-content: space-between; gap: 12px; padding: 22px 0 0; border-top: 1px solid var(--line); margin-top: 24px; }
.wizard-nav button { min-height: 48px; padding: 10px 22px; border: 2px solid var(--blue); background: white; color: var(--blue); font-weight: 700; font-size: 16px; cursor: pointer; }
.wizard-nav button:disabled { border-color: var(--line); color: var(--line); cursor: default; }
.wizard-nav .wizard-next { background: var(--blue); color: white; }
.wizard-nav .wizard-next:hover { background: var(--blue-dark); }

/* Result stage */
.result-stage { padding-top: 24px; }
.result-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.summary-chip { display: inline-grid; gap: 2px; padding: 9px 14px; border: 1px solid var(--line); background: var(--soft-blue); text-align: left; cursor: pointer; min-height: 0; }
.summary-chip span { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.summary-chip strong { color: var(--ink); font-size: 14px; }
.summary-chip:hover { border-color: var(--blue); }
.result-letter { border: 1px solid var(--line-dark); }
.letter-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--soft-blue); }
.letter-toolbar button { min-height: 40px; margin-left: 8px; padding: 8px 14px; border: 1px solid var(--blue); background: white; color: var(--blue); font-weight: 700; cursor: pointer; }
.result-letter pre { max-height: 640px; margin: 0; padding: 28px; overflow: auto; white-space: pre-wrap; font: 14.5px/1.6 var(--sans); }
.result-next { margin-top: 28px; padding: 24px 28px; border: 1px solid var(--line); background: var(--amber-bg); }
.result-next h2 { margin: 0 0 10px; font-family: var(--serif); font-size: 24px; }
.result-next ol { margin: 0; padding-left: 22px; }
.result-next li { margin: 8px 0; }
.generator { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; background: var(--white); }
.generator .wizard { border-bottom: 0; border-right: 1px solid var(--line); height: 100%; }
.letter-preview { position: sticky; top: 14px; }
.letter-preview pre { min-height: 420px; max-height: calc(100vh - 120px); }
.situation-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; }
.situation-notes { border: 1px solid var(--blue); background: var(--white); padding: 22px 26px; }
.situation-notes h2, .situation-notes h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 24px; }
.situation-notes ul { margin: 0; padding-left: 20px; color: var(--muted); }
.situation-notes li { margin: 10px 0; }

/* Panels sit on paper */
.checklist, .implementation-question, .factor-table, .code-figure, .generator { background: var(--white); }
tbody tr:hover > * { background: var(--soft-blue); }

/* Standalone pages (terms, privacy, 404) */
.page { width: min(calc(100% - 48px), 860px); margin: 0 auto; padding: 64px 0 96px; }
.page h1 { margin: 0 0 10px; font-family: var(--serif); font-size: clamp(40px, 5vw, 58px); line-height: 1.05; letter-spacing: -0.03em; }
.page .effective { margin: 0 0 40px; color: var(--muted); font-size: 15px; }
.page h2 { margin: 40px 0 10px; font-family: var(--serif); font-size: 27px; }
.page p, .page li { color: var(--ink); }
.page ul { padding-left: 22px; }
.page .placeholder { background: var(--amber-bg); border: 1px dashed #d58a2b; padding: 2px 6px; }
.notfound { min-height: 55vh; display: grid; align-content: center; text-align: left; }
.notfound .code { color: var(--blue); font-family: var(--serif); font-size: 120px; line-height: 1; margin: 0; }

/* These three grids are defined below the 980px media block, so the collapse rule
   inside it loses the cascade at equal specificity. Re-assert it here, after every
   base rule, or the grids stay two-column on phones and overflow the viewport. */
@media (max-width: 980px) {
  .route-comparison, .strength-grid, .situation-panel { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}