:root {
  --navy: #001433;
  --navy-deep: #000d22;
  --blue: #0066cc;
  --blue-dark: #004c99;
  --blue-deep: #001f52;
  --blue-light: #eaf2ff;
  --blue-soft: #b8d6f5;
  --turquoise: #00c3c8;
  --turquoise-dark: #008e92;
  --turquoise-deep: #005d60;
  --turquoise-light: #e5f9fa;
  --turquoise-soft: #b3eef0;
  --navy-light: #e8edf5;
  --navy-soft: #b8c6da;
  --navy-mid: #48617f;
  --yellow: #f5d76e;
  --yellow-light: #fffde6;
  --yellow-soft: #fff7b8;
  --pink: #f3a1c6;
  --pink-light: #fdedf5;
  --pink-soft: #f8d1e3;
  --white: #ffffff;
  --line: rgba(0, 20, 51, .13);
  --line-strong: rgba(0, 20, 51, .24);
  --muted: #48617f;
  --shadow: 0 20px 55px rgba(0, 20, 51, .10);
  --shadow-soft: 0 8px 28px rgba(0, 20, 51, .08);
  --sans: "DM Sans", "Segoe UI", Arial, sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --mono: "DM Mono", Consolas, "Courier New", monospace;
  --page: min(1180px, calc(100vw - 48px));
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

button, input { font: inherit; }
button { touch-action: manipulation; }

button:focus-visible,
input:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 800;
  text-decoration: none;
}

.skip-link:focus { transform: translateY(0); }

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 70px;
  padding: 10px max(24px, calc((100vw - 1180px) / 2));
  border-top: 5px solid var(--turquoise);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 20, 51, .97);
  color: var(--white);
  backdrop-filter: blur(16px);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
  text-decoration: none;
}

.wordmark span:first-child { color: var(--white); }
.wordmark span:last-child { color: var(--turquoise); }

.topbar-title {
  margin-left: 22px;
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, .24);
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  font-weight: 700;
}

.topbar-actions,
.button-row,
.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.language-switch {
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
}

.language-switch button {
  min-width: 42px;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .65);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.language-switch button[aria-pressed="true"] {
  background: var(--turquoise);
  color: var(--navy);
}

main { width: var(--page); margin: 0 auto; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, .75fr);
  gap: clamp(34px, 7vw, 92px);
  align-items: center;
  padding: clamp(64px, 9vw, 118px) 0 56px;
}

.eyebrow,
.panel-kicker,
.section-kicker,
.question-number,
.sub-label {
  margin: 0 0 12px;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1, h2, h3, h4, p { overflow-wrap: anywhere; }

h1, h2, h3, h4 {
  margin-top: 0;
  font-family: var(--serif);
  line-height: 1.08;
}

h1 {
  max-width: 760px;
  margin-bottom: 24px;
  font-size: clamp(44px, 6.4vw, 76px);
  letter-spacing: -.045em;
}

h2 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.035em; }
h3 { margin-bottom: 10px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.025em; }
h4 { margin-bottom: 8px; font-size: 21px; }

.hero-lede {
  max-width: 760px;
  margin: 0 0 24px;
  color: var(--navy-mid);
  font-size: clamp(18px, 2vw, 22px);
}

.signature {
  margin: 0;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
}

.method-card {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border-radius: 18px;
  background: var(--navy);
  box-shadow: var(--shadow);
  color: var(--white);
}

.method-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--turquoise), var(--blue));
  content: "";
}

.method-version {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: var(--turquoise);
  color: var(--navy);
  font-family: var(--mono);
  font-weight: 800;
}

.method-card h2 { margin-bottom: 12px; color: var(--white); font-size: 28px; }
.method-card > p { color: rgba(255, 255, 255, .75); }

.method-card dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 26px 0 18px;
}

.method-card dl div {
  padding: 12px 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  text-align: center;
}

.method-card dt { color: rgba(255, 255, 255, .6); font-size: 10px; text-transform: uppercase; }
.method-card dd { margin: 3px 0 0; color: var(--turquoise); font-family: var(--serif); font-size: 24px; font-weight: 700; }
.method-card .evidence-line { margin: 0; color: var(--turquoise-soft); font-size: 12px; }
.method-card .evidence-line.warning { color: var(--yellow); }

.disclosure-band {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 34px;
  padding: 18px 22px;
  border-left: 4px solid var(--blue);
  background: var(--blue-light);
  color: var(--navy-mid);
  font-size: 14px;
}

.disclosure-band strong { color: var(--navy); }

.status {
  margin: 0 0 22px;
  padding: 14px 18px;
  border-left: 4px solid var(--turquoise);
  background: var(--turquoise-light);
  color: var(--turquoise-deep);
  font-weight: 700;
}

.status.error { border-color: var(--pink); background: var(--pink-light); color: var(--navy); }

.panel,
.result-section {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.resume-panel,
.start-panel {
  display: grid;
  gap: 34px;
  align-items: center;
  margin-bottom: 82px;
  padding: clamp(26px, 5vw, 48px);
}

.resume-panel { grid-template-columns: 1fr auto; background: var(--yellow-light); }
.resume-panel h2, .start-panel h2 { margin-bottom: 12px; }
.resume-panel p, .start-panel p { margin-bottom: 0; color: var(--muted); }
.start-panel { grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr); }
.start-main > .button { margin-top: 28px; }

.privacy-card {
  padding: 24px;
  border-radius: 14px;
  background: var(--turquoise-light);
}

.privacy-card h3 { margin-bottom: 10px; font-family: var(--sans); font-size: 18px; }
.privacy-card p { color: var(--turquoise-deep); font-size: 14px; }
.privacy-card ul { margin: 18px 0 0; padding-left: 20px; color: var(--navy-mid); font-size: 13px; }
.privacy-card li + li { margin-top: 7px; }

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.button:hover { transform: translateY(-1px); }
.button-primary { background: linear-gradient(135deg, var(--turquoise), var(--blue)); box-shadow: 0 8px 24px rgba(0, 102, 204, .18); color: var(--white); }
.button-secondary { border-color: var(--line-strong); background: var(--white); color: var(--navy); }
.button-quiet { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: var(--white); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.assessment {
  margin: 18px 0 90px;
  padding: clamp(24px, 5vw, 50px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.assessment-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
}

.assessment-header h2 { margin-bottom: 8px; }
.muted { color: var(--muted); }
.assessment-header .muted { margin: 0; }

.progress-copy { display: grid; justify-items: end; }
.progress-copy strong { color: var(--blue); font-family: var(--serif); font-size: 34px; }
.progress-copy span { color: var(--muted); font-size: 13px; }

progress {
  overflow: hidden;
  width: 100%;
  height: 9px;
  border: 0;
  border-radius: 999px;
  background: var(--navy-light);
  color: var(--turquoise);
}

progress::-webkit-progress-bar { border-radius: 999px; background: var(--navy-light); }
progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, var(--turquoise), var(--blue)); }
progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--turquoise), var(--blue)); }

#assessment-progress { margin: 24px 0 34px; }
.questions { display: grid; gap: 20px; }

.question-card {
  min-width: 0;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.question-card.has-error { border-color: var(--pink); background: var(--pink-light); }

.question-card legend {
  width: 100%;
  padding: 0;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}

.question-meta { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 15px; color: var(--muted); font-size: 12px; }
.question-error { display: none; color: var(--navy); font-weight: 800; }
.has-error .question-error { display: inline; }

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.choice { position: relative; display: block; }

.choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice span {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 14px 10px 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--navy-mid);
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
}

.choice span::before {
  position: absolute;
  left: 15px;
  width: 17px;
  height: 17px;
  border: 2px solid var(--navy-soft);
  border-radius: 4px;
  background: var(--white);
  content: "";
}

.choice input[type="radio"] + span::before { border-radius: 50%; }
.choice input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.choice input:checked + span { border-color: var(--turquoise-dark); background: var(--turquoise-light); color: var(--navy); }
.choice input:checked + span::before { border-color: var(--turquoise-dark); background: var(--turquoise); box-shadow: inset 0 0 0 3px var(--white); }

.form-actions { justify-content: space-between; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.session-reminder { margin: 18px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

.results { margin: 18px 0 90px; }

.result-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 28px;
}

.result-header h2 { margin-bottom: 8px; }
.result-header p { margin-bottom: 0; }

.evidence-health {
  margin-bottom: 18px;
  padding: 18px 22px;
  border-left: 4px solid var(--turquoise);
  background: var(--turquoise-light);
  color: var(--turquoise-deep);
}

.evidence-health.warning { border-color: var(--yellow); background: var(--yellow-light); color: var(--navy); }
.evidence-health strong { color: var(--navy); }

.identity-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--line);
}

.identity-strip div { display: grid; gap: 3px; min-width: 0; padding: 16px 18px; background: var(--white); }
.identity-strip span { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.identity-strip strong { overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; }

.primary-action {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  padding: clamp(26px, 5vw, 44px);
  border-radius: 18px;
  background: var(--navy);
  box-shadow: var(--shadow);
  color: var(--white);
}

.primary-action::before { position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--turquoise); content: ""; }
.primary-action .section-kicker { color: var(--turquoise); }
.primary-action h3 { color: var(--white); }
.primary-action p { max-width: 900px; margin-bottom: 0; color: rgba(255, 255, 255, .74); }

.result-section { margin-top: 24px; padding: clamp(24px, 4vw, 38px); }
.result-section:not(.panel) { border: 0; border-radius: 0; box-shadow: none; padding-right: 0; padding-left: 0; }

.section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 24px; }
.section-heading p { max-width: 720px; margin-top: 6px; margin-bottom: 0; color: var(--muted); }
.section-heading-inline { align-items: center; }

.maturity-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.maturity-card { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: var(--shadow-soft); }
.maturity-card.target { border-color: var(--turquoise-dark); background: var(--turquoise-light); }
.maturity-code { display: flex; gap: 10px; margin: 10px 0; }
.maturity-code strong { display: grid; place-items: center; min-width: 58px; height: 58px; border-radius: 12px; background: var(--navy); color: var(--white); font-family: var(--serif); font-size: 23px; }
.maturity-card.target .maturity-code strong { background: var(--turquoise); color: var(--navy); }
.maturity-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.maturity-arrow { display: grid; place-items: center; color: var(--blue); font-size: 28px; font-weight: 800; }
.risk-list { margin: 16px 0 0; padding: 14px 18px 14px 34px; border-radius: 10px; background: var(--yellow-light); font-size: 13px; }

.archetype-card { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; }
.archetype-code { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--blue); color: var(--white); font-family: var(--serif); font-size: 30px; font-weight: 700; }
.archetype-card h4 { margin-top: 2px; font-size: 25px; }
.archetype-card p { color: var(--muted); }
.archetype-reasons { margin: 12px 0 0; padding-left: 20px; color: var(--navy-mid); }

.shortlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.vendor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.vendor-card.rank-1 { border-color: var(--turquoise-dark); background: linear-gradient(180deg, var(--turquoise-light), var(--white) 55%); }
.rank-badge { display: inline-flex; align-items: center; align-self: flex-start; min-height: 28px; margin-bottom: 16px; padding: 4px 10px; border-radius: 999px; background: var(--navy); color: var(--white); font-family: var(--mono); font-size: 11px; font-weight: 700; }
.vendor-card.rank-1 .rank-badge { background: var(--turquoise); color: var(--navy); }
.vendor-card h4 { font-size: 25px; }
.vendor-category { margin: 0 0 16px; color: var(--muted); font-size: 12px; text-transform: uppercase; }

.score-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 0 0 16px; }
.score-row div { min-width: 0; padding: 10px 8px; border-radius: 9px; background: var(--blue-light); text-align: center; }
.score-row div:last-child { background: var(--navy); color: var(--white); }
.score-row span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.score-row div:last-child span { color: rgba(255, 255, 255, .62); }
.score-row strong { display: block; margin-top: 2px; font-family: var(--serif); font-size: 18px; }
.vendor-card > p { color: var(--navy-mid); font-size: 14px; }
.vendor-card details { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.vendor-card summary { cursor: pointer; color: var(--blue-dark); font-weight: 800; }
.vendor-card details h5 { margin: 15px 0 5px; font-size: 12px; text-transform: uppercase; }
.vendor-card details ul { margin: 5px 0; padding-left: 18px; color: var(--navy-mid); font-size: 13px; }
.vendor-card details li + li { margin-top: 5px; }
.tradeoff { margin-top: 14px; padding: 13px; border-radius: 9px; background: var(--yellow-light); color: var(--navy); font-size: 13px; }
.alternative { margin-top: 10px; color: var(--muted); font-size: 12px; }
.fit-list { margin: 10px 0 0; padding-left: 18px; font-size: 12px; }

.context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.decision-callout { padding: 20px; border-radius: 14px; background: var(--navy-light); }
.decision-callout.cluster { background: var(--yellow-light); }
.decision-callout h4 { font-family: var(--sans); font-size: 18px; }
.decision-callout p { margin-bottom: 0; color: var(--muted); font-size: 14px; }

.architecture-intro { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); gap: 26px; }
.architecture-choice { padding: 22px; border-radius: 14px; background: var(--blue-light); }
.architecture-choice h4 { font-family: var(--sans); font-size: 18px; }
.architecture-choice p { margin-bottom: 0; color: var(--navy-mid); font-size: 14px; }
.architecture-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: stretch; }
.architecture-node { position: relative; display: grid; align-content: center; min-height: 108px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); text-align: center; }
.architecture-node + .architecture-node::before { position: absolute; top: 50%; left: -17px; color: var(--blue); content: "→"; font-weight: 800; transform: translateY(-50%); }
.architecture-node span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.architecture-node strong { margin-top: 6px; }
.considerations { margin: 22px 0 0; padding-left: 20px; color: var(--navy-mid); }
.considerations li + li { margin-top: 7px; }

.layer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.layer-card { padding: 20px; border: 1px solid var(--line); border-radius: 12px; }
.layer-card h4 { font-family: var(--sans); font-size: 18px; }
.layer-card p { color: var(--muted); font-size: 14px; }
.layer-card .selection-gate { padding: 12px; border-radius: 8px; background: var(--navy-light); color: var(--navy); font-size: 12px; }
.example-disclosure { margin-top: 12px; padding: 12px; border-left: 3px solid var(--turquoise); background: var(--turquoise-light); color: var(--turquoise-deep); font-size: 12px; }

.roadmap { display: grid; gap: 0; }
.roadmap-step { position: relative; display: grid; grid-template-columns: 150px 1fr 1fr; gap: 20px; padding: 20px 0 20px 34px; border-bottom: 1px solid var(--line); }
.roadmap-step:last-child { border-bottom: 0; }
.roadmap-step::before { position: absolute; top: 27px; left: 4px; width: 13px; height: 13px; border: 3px solid var(--white); border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 0 2px var(--turquoise); content: ""; }
.roadmap-step::after { position: absolute; top: 42px; bottom: -12px; left: 10px; width: 2px; background: var(--turquoise-soft); content: ""; }
.roadmap-step:last-child::after { display: none; }
.roadmap-phase strong { display: block; color: var(--blue); font-family: var(--mono); font-size: 12px; }
.roadmap-phase span { display: block; margin-top: 5px; font-weight: 800; }
.roadmap-step h4 { margin: 0 0 5px; font-family: var(--sans); font-size: 13px; text-transform: uppercase; }
.roadmap-step p { margin: 0; color: var(--muted); font-size: 13px; }

.confidence-grid { display: grid; grid-template-columns: minmax(230px, .6fr) minmax(0, 1.4fr); gap: 20px; }
.confidence-card { padding: 24px; border-radius: 14px; background: var(--navy); color: var(--white); }
.confidence-card strong { display: block; margin: 7px 0 12px; color: var(--turquoise); font-family: var(--serif); font-size: 38px; }
.confidence-card progress { margin-bottom: 12px; }
.confidence-card p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 13px; }
.trace-column { display: grid; gap: 14px; }
.trace-block { padding: 18px; border: 1px solid var(--line); border-radius: 12px; }
.trace-block h4 { font-family: var(--sans); font-size: 16px; }
.trace-block ul { margin: 8px 0 0; padding-left: 20px; color: var(--navy-mid); font-size: 13px; }
.trace-block li + li { margin-top: 7px; }
.trace-block.warning { border-color: var(--yellow); background: var(--yellow-light); }

.table-wrap { overflow: auto; margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; min-width: 850px; border-collapse: collapse; font-size: 13px; }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { position: sticky; top: 0; z-index: 1; background: var(--navy); color: var(--white); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--blue-light); }
td:first-child, th:first-child { position: sticky; left: 0; z-index: 2; }
td:first-child { background: inherit; }
th:first-child { z-index: 3; }
.evidence-badge, .eligibility-badge { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: var(--turquoise-light); color: var(--turquoise-deep); font-size: 10px; font-weight: 800; }
.evidence-badge.medium { background: var(--yellow-light); color: var(--navy); }
.evidence-badge.low, .eligibility-badge.no { background: var(--pink-light); color: var(--navy); }

.report-disclaimer { margin: 24px auto 0; max-width: 840px; color: var(--muted); font-size: 12px; text-align: center; }
.noscript { margin: 30px 0 80px; padding: 30px; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 28px max(24px, calc((100vw - 1180px) / 2));
  border-top: 5px solid var(--turquoise);
  background: var(--navy);
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
}

footer em { color: var(--white); font-family: var(--serif); }

@media (max-width: 960px) {
  :root { --page: min(100% - 36px, 780px); }
  .hero, .start-panel, .architecture-intro { grid-template-columns: 1fr; }
  .method-card { max-width: 620px; }
  .shortlist { grid-template-columns: 1fr; }
  .vendor-card { min-height: 0; }
  .roadmap-step { grid-template-columns: 130px 1fr; }
  .roadmap-step > div:last-child { grid-column: 2; }
  .confidence-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  :root { --page: calc(100% - 24px); }
  body { font-size: 15px; }
  .topbar { grid-template-columns: auto 1fr; min-height: 64px; padding: 9px 12px; }
  .topbar-title { display: none; }
  .topbar-actions { justify-self: end; }
  .reset-button { max-width: 112px; min-height: 38px; padding: 6px 10px; font-size: 11px; }
  .hero { gap: 34px; padding-top: 48px; }
  h1 { font-size: clamp(39px, 13vw, 58px); }
  .method-card { padding: 28px 22px; }
  .disclosure-band { display: block; }
  .disclosure-band strong { display: block; margin-bottom: 4px; }
  .resume-panel { grid-template-columns: 1fr; }
  .resume-panel .button-row, .result-header .button-row { align-items: stretch; flex-direction: column; }
  .start-panel, .assessment, .result-section { padding: 24px 18px; }
  .assessment-header, .result-header { grid-template-columns: 1fr; align-items: start; }
  .progress-copy { justify-items: start; }
  .choices { grid-template-columns: 1fr; }
  .question-card { padding: 20px 14px; }
  .form-actions .button { min-width: 0; }
  .identity-strip { grid-template-columns: 1fr; }
  .maturity-grid { grid-template-columns: 1fr; }
  .maturity-arrow { transform: rotate(90deg); }
  .archetype-card { grid-template-columns: 1fr; }
  .score-row { grid-template-columns: 1fr; }
  .score-row div { display: flex; justify-content: space-between; align-items: center; text-align: left; }
  .score-row strong { margin: 0; }
  .context-grid, .layer-grid { grid-template-columns: 1fr; }
  .architecture-flow { grid-template-columns: 1fr; }
  .architecture-node + .architecture-node::before { top: -20px; left: 50%; transform: translateX(-50%) rotate(90deg); }
  .roadmap-step { grid-template-columns: 1fr; gap: 10px; padding-left: 30px; }
  .roadmap-step > div:last-child { grid-column: auto; }
  .section-heading, .section-heading-inline { align-items: flex-start; flex-direction: column; }
  .section-heading .button { width: 100%; }
  footer { align-items: flex-start; flex-direction: column; padding: 24px 16px; }
}

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

@media print {
  @page { size: A4; margin: 12mm; }
  body { color: var(--navy); font-size: 10pt; }
  .topbar, .hero, .disclosure-band, .status, .resume-panel, .start-panel, .assessment, .result-actions, .result-header .button-row, #toggle-longlist, footer, .report-disclaimer { display: none !important; }
  main { width: 100%; }
  .results { display: block !important; margin: 0; }
  .result-header { display: block; margin-bottom: 8mm; }
  .result-header h2 { font-size: 26pt; }
  .evidence-health, .identity-strip, .primary-action, .result-section { break-inside: avoid; box-shadow: none; }
  .primary-action { background: var(--navy) !important; color: var(--white) !important; print-color-adjust: exact; }
  .shortlist { grid-template-columns: 1fr; }
  .vendor-card { break-inside: avoid; box-shadow: none; }
  .vendor-card details { display: block; }
  .vendor-card details > * { display: block; }
  #longlist { display: block !important; overflow: visible; }
  table { min-width: 0; font-size: 7.5pt; }
  th { position: static; }
  td:first-child, th:first-child { position: static; }
}