:root {
  /* The Finext palette is these seven values and nothing else. */
  --blue: #0066CC;
  --turquoise: #00C3C8;
  --pink: #F3A1C6;
  --yellow: #FFFF82;
  --light-blue: #66CCFF;
  --white: #FFFFFF;
  --grey: #DEDEDE;
  /* Role aliases so component rules stay readable. */
  --navy: #0066CC;
  --navy-mid: #0066CC;
  --navy-light: #DEDEDE;
  --navy-soft: #DEDEDE;
  --blue-dark: #0066CC;
  --line: #DEDEDE;
  --muted: #0066CC;
  /* The house style is flat: no shadow, no gradient, no lift. */
  --shadow: none;
  --shadow-soft: none;
  /* finext.com loads the families under these exact names; the second
     spelling and the generic fallbacks cover everything else. */
  --sans: "Passengersans Regular", "Passenger Sans", Inter, "DM Sans", "Segoe UI", Arial, sans-serif;
  --sans-bold: "Passengersans Bold", "Passengersans Regular", "Passenger Sans", Inter, "DM Sans", "Segoe UI", Arial, sans-serif;
  --serif: "Passengerserif", "Passenger Serif", Georgia, "Times New Roman", serif;
  /* Content column and band rhythm, measured on finext.com at 1440px. */
  --container: 1280px;
  --gutter: 64px;
  --band: 96px;
}

/* The house shape is square. Only the buttons below opt back into a pill. */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

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.6;
  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(--blue);
  outline-offset: 3px;
}

.band-blue :focus-visible,
.topbar :focus-visible { outline-color: var(--yellow); }

[hidden] { display: none !important; }

#start-panel,
#assessment,
#results { scroll-margin-top: 112px; }

#round-title:focus,
#results-title:focus { outline: 0; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  padding: 12px 16px;
  background: var(--blue);
  color: var(--white);
  font-family: var(--sans-bold);
  font-weight: 700;
  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: 96px;
  padding: 0 max(var(--gutter), calc((100vw - var(--container)) / 2));
  background: var(--blue);
  color: var(--white);
}

.wordmark {
  display: inline-block;
  width: 132px;
  padding: 10px 0;
  color: var(--white);
  line-height: 0;
  text-decoration: none;
}

.wordmark img { display: block; width: 100%; height: auto; }

.topbar-title {
  margin-left: 32px;
  padding-left: 32px;
  border-left: 1px solid rgba(255, 255, 255, .28);
  color: var(--white);
  font-family: var(--sans-bold);
  font-size: 14.4px;
  font-weight: 700;
}

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

.language-switch {
  display: flex;
  gap: 8px;
}

.language-switch button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--turquoise);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font-family: var(--sans-bold);
  font-size: 14.4px;
  font-weight: 700;
}

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

main { width: 100%; margin: 0; }

/* Every section is a full-bleed band. The band paints the background across
   the whole viewport and holds its content in the 1280px column, so the
   sections stack as one body separated only by their colour. */
.band {
  padding: var(--band) max(var(--gutter), calc((100vw - var(--container)) / 2));
  background: var(--white);
  color: var(--blue);
}

.band-tight { padding-top: 32px; padding-bottom: 32px; }

.band-blue { background: var(--blue); color: var(--white); }
.band-blue h2, .band-blue h3, .band-blue h4, .band-blue strong { color: var(--white); }
/* ...except inside a white surface sitting on that band, which keeps its own
   text colour. Without this the headings and values there go white on white. */
.band-blue .architecture-choice h4, .band-blue .architecture-choice strong,
.band-blue .architecture-node strong, .band-blue .privacy-card h3, .band-blue .privacy-card strong { color: var(--blue); }
.band-blue .section-heading p, .band-blue .considerations, .band-blue .muted { color: var(--white); }
.band-blue .eyebrow, .band-blue .panel-kicker, .band-blue .section-kicker { color: var(--yellow); }

.band-turquoise { background: var(--turquoise); color: var(--blue); }
.band-turquoise h2, .band-turquoise h3 { color: var(--blue); }
.band-turquoise .section-heading p { color: var(--blue); }
.band-turquoise .eyebrow, .band-turquoise .panel-kicker, .band-turquoise .section-kicker { color: var(--blue); }

/* Elements that are not bands but must line up with the content column. */
.contained {
  width: min(var(--container), calc(100% - (2 * var(--gutter))));
  margin-inline: auto;
}

/* The method card moved out into its own band, so the hero is one column. */
/* Flex rather than a fixed two-column grid: the card is a welcome-only
   element, and when it is hidden the copy simply fills the row. */
.hero { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.hero-copy { flex: 1 1 520px; max-width: 900px; }

.hero-cta {
  flex: 0 1 380px;
  padding: 40px;
  background: var(--blue);
  color: var(--white);
}

.hero-cta h2 { margin-bottom: 12px; color: var(--white); font-size: 32px; }
.hero-cta p { margin: 0 0 32px; color: var(--white); font-size: 16px; line-height: 1.6; }

/* The chapeau above a section title. */
.eyebrow {
  margin: 0 0 20px;
  color: var(--pink);
  font-family: var(--sans-bold);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.6;
  text-transform: none;
}

/* The smaller category label inside a section or card. */
.panel-kicker,
.section-kicker,
.question-number,
.sub-label {
  margin: 0 0 12px;
  color: var(--pink);
  font-family: var(--sans-bold);
  font-size: 16.8px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.6;
  text-transform: none;
}

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

h1, h2, h3, h4 {
  margin-top: 0;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.2;
  text-transform: none;
}

h1 {
  max-width: 900px;
  margin-bottom: 24px;
  font-size: clamp(38px, 4.4vw, 54px);
}

h2 { font-size: clamp(28px, 2.8vw, 38px); }
h3 { margin-bottom: 12px; font-size: 32px; }
h4 { margin-bottom: 8px; font-size: 22px; }

.hero-lede {
  max-width: 760px;
  margin: 0 0 24px;
  color: var(--navy-mid);
  font-size: 19.2px;
  line-height: 1.6;
}

.scoring-body {
  max-width: 900px;
  margin: 0;
  font-size: 19.2px;
  line-height: 1.6;
}

.scoring-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: 40px 0 0;
}

.scoring-facts div { padding: 24px; border: 1px solid var(--line); }
.scoring-facts dt { font-family: var(--sans-bold); font-size: 16.8px; font-weight: 700; }
.scoring-facts dd { margin: 8px 0 0; color: var(--blue); font-family: var(--serif); font-size: 38px; font-weight: 500; }

.disclosure-band {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 16px;
}

.disclosure-band strong { color: var(--white); font-family: var(--sans-bold); }

.status {
  margin: 32px auto;
  padding: 0 0 0 18px;
  border-left: 6px solid var(--blue);
  color: var(--blue);
  font-family: var(--sans-bold);
  font-weight: 700;
}

.status.error { border-color: var(--blue); color: var(--blue); }

/* .panel and .result-section are historic wrappers; the band under them now
   carries the surface, so they only need to stop drawing a frame. */
.panel,
.result-section { border: 0; }

.resume-panel,
.start-panel {
  display: grid;
  gap: 48px;
  align-items: center;
}

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

.privacy-card {
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--blue);
}

.privacy-card h3 { margin-bottom: 10px; color: var(--blue); font-family: var(--sans); font-size: 18px; }
.privacy-card p { margin-bottom: 0; color: var(--blue); font-size: 14px; }

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 33px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--sans-bold);
  font-size: 14.4px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.button-primary { background: var(--blue); color: var(--white); }
.button-secondary { border-color: var(--blue); background: transparent; color: var(--blue); }
.button-invert { background: var(--white); color: var(--blue); }
.band-blue .button-secondary { border-color: var(--turquoise); color: var(--white); }
.button-quiet { border-color: var(--turquoise); background: transparent; color: var(--white); }
.button:disabled { opacity: .45; cursor: not-allowed; }

.assessment { margin: 0; }

.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: start; }
.progress-copy strong { color: var(--blue); font-family: var(--serif); font-size: 34px; }
.progress-copy span { color: var(--muted); font-size: 14.4px; }

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

progress::-webkit-progress-bar { background: var(--navy-light); }
progress::-webkit-progress-value { background: var(--turquoise); }
progress::-moz-progress-bar { background: var(--turquoise); }

#assessment-progress { margin: 32px 0 48px; }
.questions { display: grid; gap: 32px; }

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

.question-card.has-error { border-color: var(--pink); border-left-width: 5px; background: var(--white); }

.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: 12px 0 20px; color: var(--muted); font-size: 14px; }
.question-error { display: none; color: var(--navy); font-weight: 700; }
.has-error .question-error { display: inline; }

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

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

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

.choice span {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 56px;
  padding: 14px 16px 14px 48px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy-mid);
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
}

.choice span::before {
  position: absolute;
  left: 18px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 2px solid var(--navy-soft);
  background: var(--white);
  color: var(--white);
  font-family: var(--sans-bold);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  content: "";
}

.choice input[type="radio"] + span::before { border-radius: 50%; }
.choice input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.choice input:checked + span { border-color: var(--turquoise); border-left-width: 5px; padding-left: 44px; background: var(--white); color: var(--blue); }
/* A radio keeps the ring; a checkbox gets a tick, so a checked checkbox is
   never mistaken for a selected radio. */
.choice input[type="radio"]:checked + span::before { border: 4px solid var(--white); outline: 2px solid var(--blue); background: var(--blue); }
.choice input[type="checkbox"]:checked + span::before { border-color: var(--blue); background: var(--blue); content: "\2713"; }

.choice-hint { margin-top: 4px; color: var(--muted); font-size: 12.8px; line-height: 1.4; }
.choice input:checked + span .choice-hint { color: var(--blue); }

.form-actions { justify-content: space-between; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.session-reminder { margin: 32px 0 0; color: var(--muted); font-size: 14px; text-align: left; }

.results { margin: 0; }

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

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

.evidence-health {
  margin-bottom: 32px;
  padding: 0 0 0 18px;
  border-left: 6px solid var(--blue);
  color: var(--blue);
}

.evidence-health:empty { display: none; }
.evidence-health.warning { border-color: var(--pink); }
.evidence-health strong { color: var(--blue); font-family: var(--sans-bold); }

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

.identity-strip div { display: grid; gap: 6px; min-width: 0; padding: 20px 24px; background: var(--white); }
.identity-strip span { color: var(--muted); font-size: 14.4px; text-transform: none; }
.identity-strip strong { overflow-wrap: anywhere; font-family: var(--sans-bold); font-size: 16px; }

.primary-action {
  position: relative;
  overflow: hidden;
  color: var(--white);
}

.primary-action .section-kicker { color: var(--yellow); }
.primary-action h3 { color: var(--white); }
.primary-action p { max-width: 900px; margin-bottom: 0; color: var(--white); }

.result-section { margin: 0; }

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


/* ---------------------------------------------------------------------------
   Maturity matrix
   --------------------------------------------------------------------------- */

.matrix-intro {
  max-width: 900px;
  margin: 0 0 40px;
  font-size: 19.2px;
  line-height: 1.6;
}

.matrix-disclosure { margin: 0; }

.matrix-summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 24px 32px;
  border: 1px solid var(--blue);
  color: var(--blue);
  cursor: pointer;
  font-family: var(--sans-bold);
  font-size: 19.2px;
  font-weight: 700;
  list-style: none;
}

.matrix-summary::-webkit-details-marker { display: none; }
.matrix-summary::marker { content: ""; }
.matrix-summary:hover { background: var(--grey); }
.matrix-summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.matrix-chevron {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-right: 3px solid var(--blue);
  border-bottom: 3px solid var(--blue);
  transform: rotate(45deg);
}

.matrix-disclosure-body { padding-top: 40px; }

.matrix-explainer {
  max-width: 900px;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.6;
}

.matrix-explainer:last-of-type { margin-bottom: 40px; }

/* The matrix scrolls inside its own region so the page never does. */
.matrix-wrap { overflow-x: auto; }
.matrix-wrap:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.maturity-matrix {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}

.maturity-matrix th,
.maturity-matrix td {
  padding: 0;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.maturity-matrix th {
  padding: 12px 16px;
  background: var(--white);
  color: var(--blue);
  font-family: var(--sans-bold);
  font-size: 14.4px;
  font-weight: 700;
}

.maturity-matrix thead th { vertical-align: bottom; }

/* Keep the P-axis in view while the matrix is scrolled sideways. */
.maturity-matrix th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 190px;
  background: var(--white);
}

.matrix-axis-code { display: block; font-size: 16.8px; }
.matrix-axis-name { display: block; font-family: var(--sans); font-weight: 400; }

.matrix-cell-inner {
  display: block;
  min-height: 92px;
  padding: 12px 16px;
  background: var(--white);
  color: var(--blue);
}

.matrix-cell-code { display: block; font-size: 12.8px; opacity: .65; }
.matrix-cell-name { display: block; margin-top: 4px; }

/* The healthy line, where process and platform sit at the same level. */
.matrix-cell.is-diagonal { outline: 1px solid var(--turquoise); outline-offset: -1px; }

/* The two cells where a governed process and a matching platform meet. */
.matrix-cell.is-sweet-spot { outline: 3px solid var(--blue); outline-offset: -3px; }
.matrix-cell.is-sweet-spot .matrix-cell-name { font-family: var(--sans-bold); font-weight: 700; }

.matrix-cell.is-current .matrix-cell-inner { background: var(--blue); color: var(--white); }
.matrix-cell.is-target .matrix-cell-inner { background: var(--turquoise); color: var(--blue); }

.matrix-marker {
  display: block;
  margin-top: 8px;
  font-family: var(--sans-bold);
  font-size: 12.8px;
  font-weight: 700;
}

.matrix-cell.is-current .matrix-marker { color: var(--yellow); }
.matrix-cell.is-target .matrix-marker { color: var(--blue); }

/* ---------------------------------------------------------------------------
   Matrix legend
   --------------------------------------------------------------------------- */

.matrix-legend { margin-top: 32px; }
.matrix-legend h4 { margin: 0 0 20px; font-family: var(--sans-bold); font-size: 16.8px; font-weight: 700; }
.matrix-legend ul { display: grid; gap: 16px; max-width: 900px; margin: 0; padding: 0; list-style: none; }

.legend-row { display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start; font-size: 16px; line-height: 1.6; }
.legend-row strong { font-family: var(--sans-bold); font-weight: 700; }

.legend-swatch { flex: none; margin-top: 4px; }

/* A 3x3 corner of the grid: the diagonal runs bottom-left to top-right,
   exactly as it does in the matrix itself. */
.legend-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 10px; gap: 2px; width: 34px; }
.legend-grid i { border: 1px solid var(--line); background: var(--white); }
.legend-grid i:nth-child(3), .legend-grid i:nth-child(5), .legend-grid i:nth-child(7) { border-color: var(--turquoise); }
.legend-platform-ahead i:nth-child(6), .legend-platform-ahead i:nth-child(8), .legend-platform-ahead i:nth-child(9) { background: var(--grey); }
.legend-process-ahead i:nth-child(1), .legend-process-ahead i:nth-child(2), .legend-process-ahead i:nth-child(4) { background: var(--grey); }

.legend-cell { display: block; width: 34px; height: 22px; border: 1px solid var(--line); background: var(--white); }
.legend-sweet { outline: 3px solid var(--blue); outline-offset: -3px; }
.legend-now { border-color: var(--blue); background: var(--blue); }
.legend-target { border-color: var(--turquoise); background: var(--turquoise); }

.band-blue .legend-grid i,
.band-blue .legend-cell { border-color: var(--white); }

.legend-balance {
  max-width: 900px;
  margin: 24px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.6;
}

.band-blue .legend-balance { border-top-color: var(--white); }

.matrix-help {
  max-width: 900px;
  margin: 32px 0 0;
  font-size: 16px;
  line-height: 1.6;
}

.maturity-block > .maturity-grid { margin: 40px 0; }
.maturity-note { margin: 0 0 32px; max-width: 900px; }
.maturity-note p { margin: 0; font-size: 16px; line-height: 1.6; }
.maturity-note-help { margin-top: 8px; color: var(--muted); }
.roadmap-patterns { display: block; margin-top: 8px; color: var(--muted); font-size: 12.8px; font-weight: 400; }

/* ---------------------------------------------------------------------------
   What you get / what this is not
   --------------------------------------------------------------------------- */

.value-list {
  display: grid;
  gap: 24px;
  max-width: 900px;
  margin: 40px 0 0;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.6;
}

.outtake { padding: 0 0 0 18px; border-left: 6px solid var(--blue); color: var(--blue); }
.band-blue .outtake { border-left-color: var(--turquoise); color: var(--white); }
.band-blue .outtake h2, .band-blue .outtake p { color: var(--white); }
.outtake h2 { margin-bottom: 16px; font-size: 32px; }
.outtake p { max-width: 900px; margin: 0; font-size: 16px; line-height: 1.6; }

.maturity-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; }
.maturity-card { padding: 32px; border: 1px solid var(--line); background: var(--white); }
.maturity-card.target { border-color: var(--turquoise); border-top-width: 5px; background: var(--white); }
.maturity-code { display: flex; gap: 12px; margin: 16px 0; }
.maturity-code strong { display: grid; place-items: center; min-width: 58px; height: 58px; background: var(--navy); color: var(--white); font-family: var(--serif); font-size: 23px; }
.maturity-card.target .maturity-code strong { border: 3px solid var(--turquoise); background: var(--blue); color: var(--white); }
.maturity-card p { margin-bottom: 0; color: var(--muted); font-size: 16px; }
.maturity-arrow { display: grid; place-items: center; color: var(--blue); font-size: 28px; font-weight: 700; }
.risk-list { margin: 20px 0 0; padding: 0 0 0 18px; border-left: 6px solid var(--pink); list-style-position: inside; font-size: 14px; }

.archetype-card { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; padding: 32px; background: var(--white); color: var(--blue); }
.archetype-code { display: grid; place-items: center; width: 68px; height: 68px; 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: 16px 0 0; padding-left: 20px; color: var(--navy-mid); }

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

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

.vendor-card.rank-1 { border-color: var(--turquoise); border-top-width: 5px; background: var(--white); }
.rank-badge { display: inline-flex; align-items: center; align-self: flex-start; min-height: 28px; margin-bottom: 20px; padding: 4px 12px; background: var(--navy); color: var(--white); font-family: var(--sans-bold); font-size: 14.4px; font-weight: 700; }
/* Yellow is a text colour on blue, never a plane. */
.vendor-card.rank-1 .rank-badge { color: var(--yellow); }
.vendor-card h4 { font-size: 25px; }
.vendor-category { margin: 0 0 20px; color: var(--muted); font-family: var(--sans-bold); font-size: 16.8px; text-transform: none; }

.score-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 24px; }
.score-row div { min-width: 0; padding: 12px; border: 1px solid var(--line); background: var(--white); text-align: left; }
.score-row div:last-child { background: var(--navy); color: var(--white); }
.score-row span { display: block; color: var(--muted); font-size: 12.8px; text-transform: none; }
.score-row div:last-child span { color: var(--white); }
.score-row strong { display: block; margin-top: 2px; font-family: var(--serif); font-size: 18px; }
.vendor-card > p { color: var(--navy-mid); font-size: 16px; }
.vendor-card details { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line); }
.vendor-card summary { cursor: pointer; color: var(--blue-dark); font-weight: 700; }
.vendor-card details h5 { margin: 20px 0 8px; font-family: var(--sans-bold); font-size: 14.4px; text-transform: none; }
.vendor-card details ul { margin: 8px 0; padding-left: 18px; color: var(--navy-mid); font-size: 14.4px; }
.vendor-card details li + li { margin-top: 8px; }
.tradeoff { margin-top: 16px; padding: 0 0 0 14px; border-left: 4px solid var(--turquoise); color: var(--blue); font-size: 14px; }
.alternative { margin-top: 16px; color: var(--muted); font-size: 14px; }
.fit-list { margin: 12px 0 0; padding-left: 18px; font-size: 14px; }

.context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.decision-callout { padding: 0 0 0 18px; border-left: 6px solid var(--blue); background: transparent; color: var(--blue); }
.decision-callout.cluster { border-left-color: var(--turquoise); }
.decision-callout h4 { color: var(--blue); font-family: var(--sans-bold); font-size: 18px; }
.decision-callout p { margin-bottom: 0; color: var(--blue); font-size: 16px; }

/* align-items: start keeps the choice card at the height of its own content
   instead of stretching to match the flow beside it. */
.architecture-intro { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); gap: 40px; align-items: start; }
.architecture-choice { padding: 24px; background: var(--white); color: var(--blue); }
.architecture-choice h4 { color: var(--blue); font-family: var(--sans); font-size: 18px; }
.architecture-choice p { margin-bottom: 0; color: var(--navy-mid); font-size: 16px; }
.architecture-flow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; padding: 0; list-style: none; }
.architecture-node { display: inline-flex; flex-direction: column; gap: 4px; max-width: 100%; padding: 10px 16px; border: 1px solid var(--line); background: var(--white); color: var(--blue); font-size: 16px; text-align: left; }
.architecture-arrow { color: inherit; font-family: var(--sans-bold); font-weight: 700; }
.architecture-node span { color: var(--muted); font-size: 12.8px; text-transform: none; }
.architecture-node strong { color: var(--blue); font-family: var(--sans-bold); font-weight: 700; }

/* The heading below the flow keeps its distance. */
.architecture-flow + h4 { margin-top: 32px; }
.considerations { margin: 16px 0 0; padding-left: 20px; color: var(--navy-mid); }
.considerations li + li { margin-top: 10px; }

.layer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.layer-card { padding: 32px; border: 1px solid var(--line); }
.layer-card h4 { font-family: var(--sans); font-size: 18px; }
.layer-card p { color: var(--muted); font-size: 16px; }
.layer-card .selection-gate { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); background: var(--white); color: var(--blue); font-size: 14px; }
.example-disclosure { margin-top: 16px; padding: 0 0 0 14px; border-left: 4px solid var(--blue); color: var(--blue); font-size: 14px; }

.roadmap { display: grid; gap: 0; padding: 8px 32px; background: var(--white); color: var(--blue); }
/* One continuous timeline. --node is the distance from the top of a step to
   the centre of its marker, set to sit on the first line of the phase label.
   The connector starts at that centre and runs a full step height, which lands
   it exactly on the next marker centre; +1px bridges the separator border. */
.roadmap-step {
  --node: 40px;
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  gap: 32px;
  padding: 28px 0 28px 40px;
  border-bottom: 1px solid var(--line);
}

.roadmap-step:last-child { border-bottom: 0; }

.roadmap-step::before {
  position: absolute;
  top: calc(var(--node) - 6px);
  left: 0;
  width: 12px;
  height: 12px;
  background: var(--turquoise);
  content: "";
}

.roadmap-step::after {
  position: absolute;
  top: var(--node);
  left: 5px;
  width: 2px;
  height: calc(100% + 1px);
  background: var(--turquoise);
  content: "";
}

.roadmap-step:last-child::after { display: none; }
.roadmap-phase strong { display: block; color: var(--blue); font-family: var(--sans-bold); font-size: 14.4px; }
.roadmap-phase span { display: block; margin-top: 5px; font-weight: 700; }
.roadmap-step h4 { margin: 0 0 8px; font-family: var(--sans-bold); font-size: 14.4px; text-transform: none; }
.roadmap-step p { margin: 0; color: var(--muted); font-size: 14.4px; }

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

.report-disclaimer { margin: 0; max-width: 840px; color: var(--muted); font-size: 14px; text-align: left; }
.results .report-disclaimer { padding-bottom: var(--band); }
.noscript { margin: 30px 0 80px; padding: 30px; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 40px max(var(--gutter), calc((100vw - var(--container)) / 2));
  background: var(--blue);
  color: var(--white);
  font-size: 14.4px;
}

footer strong { color: var(--white); font-family: var(--serif); font-weight: 700; }

@media (max-width: 1100px) {
  :root { --gutter: 32px; --band: 72px; }
  .start-panel, .architecture-intro { grid-template-columns: 1fr; }
  .scoring-body { font-size: 16px; }
  .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: 768px) {
  :root { --gutter: 20px; --band: 32px; }
  body { font-size: 15px; }
  #start-panel, #assessment, #results { scroll-margin-top: 88px; }
  .topbar { grid-template-columns: auto 1fr; min-height: 72px; padding: 0 16px; }
  .topbar-title { display: none; }
  .topbar-actions { justify-self: end; }
  /* The measured 33px button is a desktop value; touch targets stay at 44px. */
  .button { min-height: 44px; }
  .reset-button { max-width: 120px; padding: 0 12px; font-size: 12.8px; }
  h1 { font-size: clamp(39px, 13vw, 58px); }
  .scoring-facts { grid-template-columns: 1fr; gap: 16px; }
  .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; }
  .archetype-card, .roadmap { padding: 20px; }
  .hero { gap: 32px; }
  .hero-cta { padding: 28px; }
  .hero-cta h2 { font-size: 24px; }
  .matrix-summary { gap: 16px; padding: 20px; font-size: 16px; }
  .legend-row { gap: 12px; font-size: 15px; }
  .matrix-intro { font-size: 16px; }
  .outtake h2 { font-size: 24px; }
  .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; }
  .roadmap-step { grid-template-columns: 1fr; gap: 10px; padding-left: 32px; }
  .roadmap-step > div:last-child { grid-column: auto; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .section-heading .button { width: 100%; }
  footer { align-items: flex-start; flex-direction: column; padding: 32px var(--gutter); }
}

/* Four micro-animations, each of them functional: the chevron states the
   disclosure is open, the panel and the two markers show what just appeared,
   and the hover shift says a cell is readable. Nothing else moves. */
@keyframes matrix-reveal {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@keyframes matrix-mark {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}

.matrix-chevron { transition: transform 150ms ease-out; }
.matrix-disclosure[open] .matrix-chevron { transform: rotate(-135deg); }
.matrix-disclosure[open] .matrix-disclosure-body { animation: matrix-reveal 200ms ease-out; }

/* First where you are, then where you can be, so the eye follows the move. */
#maturity .matrix-cell.is-current .matrix-cell-inner,
#maturity .matrix-cell.is-target .matrix-cell-inner { animation: matrix-mark 200ms ease-out both; }
#maturity .matrix-cell.is-target .matrix-cell-inner { animation-delay: 120ms; }

.matrix-cell:not(.is-current):not(.is-target) .matrix-cell-inner { transition: background 150ms ease-out; }
.matrix-cell:not(.is-current):not(.is-target):hover .matrix-cell-inner { background: var(--grey); }

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

  .matrix-chevron,
  .matrix-disclosure[open] .matrix-disclosure-body,
  #maturity .matrix-cell.is-current .matrix-cell-inner,
  #maturity .matrix-cell.is-target .matrix-cell-inner,
  .matrix-cell .matrix-cell-inner { transition: none; animation: none; }
}

@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, footer, .report-disclaimer { display: none !important; }
  main { width: 100%; }
  .band { padding: 0 !important; background: transparent !important; color: var(--navy) !important; }
  /* Every disclosure belongs in the PDF, open. */
  details > summary { display: block !important; }
  details:not([open]) > *:not(summary) { display: block !important; }
  details::details-content { content-visibility: visible !important; }
  .matrix-chevron { display: none !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .matrix-wrap { overflow: visible !important; }
  .maturity-matrix { min-width: 0; font-size: 7.5pt; }
  .maturity-matrix th[scope="row"] { position: static; width: auto; }
  .matrix-cell-inner { min-height: 0; print-color-adjust: exact; }
  .result-section { margin-bottom: 8mm; }
  .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; }
  .primary-action { background: var(--navy) !important; color: var(--white) !important; print-color-adjust: exact; }
  .shortlist { grid-template-columns: 1fr; }
  .vendor-card { break-inside: avoid; }
  .vendor-card details { display: block; }
  .vendor-card details > * { display: block; }
}