:root {
  --ink: #173038;
  --ink-soft: #496068;
  /* Semantic color system: blue=structure, green=public/current, amber=caution, plum=future. */
  --brand-blue: #0063c3;
  --blue-900: #073763;
  --blue-800: #0a4e96;
  --green-900: #173f3d;
  --green-800: #215b56;
  --green-700: #2d746a;
  --green-600: #3d8b78;
  --green-200: #c9e2d9;
  --green-100: #e7f2ed;
  --green-50: #f3f8f5;
  --blue-700: #1b5f98;
  --blue-200: #c5daed;
  --blue-100: #e7f0f7;
  --amber-700: #8a570f;
  --amber-100: #fbefd9;
  --plum-700: #6c5197;
  --plum-100: #eee8f7;
  --white: #fff;
  --line: #d8e4ea;
  --canvas: #f9fbfc;
  --max-width: 1180px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(23, 63, 61, .06), 0 8px 20px rgba(23, 63, 61, .05);
  --font: "Segoe UI", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--blue-700); text-decoration-thickness: .08em; text-underline-offset: .16em; }
a:hover { color: var(--green-800); }
h1, h2, h3, h4 { margin: 0 0 .65rem; color: var(--green-900); line-height: 1.18; letter-spacing: -.012em; }
h1 { max-width: 22ch; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.3rem); font-weight: 700; }
h3 { font-size: clamp(1.18rem, 2vw, 1.42rem); font-weight: 700; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding-left: 1.25rem; }
li + li { margin-top: .45rem; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(7, 55, 99, .92); }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: -5rem;
  left: 1rem;
  padding: .7rem 1rem;
  border-radius: 0 0 10px 10px;
  background: var(--green-900);
  color: var(--white);
}
.skip-link:focus { top: 0; color: var(--white); }
.wrap { width: min(calc(100% - 2rem), var(--max-width)); margin-inline: auto; }
.section { padding-block: clamp(3.75rem, 7vw, 6.5rem); }
.section--soft { background: linear-gradient(135deg, #f3f8fc 0%, var(--green-50) 100%); }
.section--dark { background: var(--green-900); color: #d9ebe4; }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark .eyebrow { color: #91d2bd; }
.section-heading { max-width: 1000px; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-heading p { max-width: 95ch; color: var(--ink-soft); font-size: 1.22rem; }
.section--dark .section-heading p { color: #c2d7d0; }
.readiness-list {
  max-width: 950px;
  margin: 0;
  padding-left: 1.25rem;
}

.readiness-list li {
  margin-bottom: .7rem;
  padding-left: .25rem;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--blue-900);
  line-height: 1.55;
}

.readiness-list strong {
  font-weight: 750;
}

.readiness-list span {
  color: var(--blue-900);
}
.eyebrow {
  margin-bottom: .8rem;
  color: var(--green-700);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.lead { max-width: 72ch; color: var(--ink-soft); font-size: clamp(1.1rem, 2vw, 1.3rem); }
.muted { color: var(--ink-soft); }
.grid { display: grid; gap: 1.35rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.stack { display: grid; gap: 1.25rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--brand-blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-800); color: var(--white); }
.btn--light { background: var(--white); color: var(--green-900); }
.btn--outline { border-color: var(--green-600); background: transparent; color: var(--green-900); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.7rem; }
.actions--center { justify-content: center; }

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid rgba(220, 231, 226, .9);
  background: rgba(251, 252, 251, .94);
  backdrop-filter: blur(14px);
}
.site-header.is-scrolled { box-shadow: 0 8px 28px rgba(23, 63, 61, .08); }
.nav { display: flex; min-height: 74px; align-items: center; gap: 1.2rem; }
.brand { display: flex; align-items: center; gap: .7rem; color: var(--green-900); font-weight: 700; text-decoration: none; }
.brand:hover { color: var(--green-900); }
.brand img { width: 38px; height: 38px; }
.brand span { display: grid; line-height: 1.05; }
.brand small { margin-top: .25rem; color: var(--ink-soft); font-size: .62rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: .05rem; margin-left: auto; }
.nav-links a { padding: .55rem .65rem; border-radius: 9px; color: var(--ink-soft); font-size: .91rem; font-weight: 650; text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current="page"] { background: var(--green-100); color: var(--green-900); }
.nav-links .nav-join { margin-left: .35rem; padding-inline: 1rem; background: var(--brand-blue); color: var(--white); }
.nav-links .nav-join:hover, .nav-links .nav-join[aria-current="page"] { background: var(--blue-800); color: var(--white); }
.nav-toggle { display: none; width: 46px; height: 46px; margin-left: auto; border: 0; border-radius: 10px; background: var(--green-100); color: var(--green-900); cursor: pointer; }
.nav-toggle-lines, .nav-toggle-lines::before, .nav-toggle-lines::after { display: block; width: 22px; height: 2px; margin-inline: auto; background: currentColor; content: ""; }
.nav-toggle-lines::before { transform: translateY(-7px); }
.nav-toggle-lines::after { transform: translateY(5px); }

.hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--blue-900), var(--blue-800)); color: #eaf4fb; }
.hero::after {
  display: none;
}
.hero .wrap { position: relative; z-index: 1; display: grid; min-height: 560px; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(4rem, 8vw, 6.5rem); }
.hero h1 { color: var(--white); }
.hero h1 span { display: block; color: #29cb00; }
.hero .lead { margin-top: 1.5rem; color: #d7e7f4; }
.hero .tagline { font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: #BFD6EE; font-weight: 500;
  margin: .8rem 0 0; font-family: var(--font-serif); }
.hero .kicker {
  display: inline-flex; align-items: center; gap: .6em; font-size: 1.01rem; font-weight: 600;
  letter-spacing: .1em; color: #fff;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.3);
  padding: .4em 1em; border-radius: 999px; margin-bottom: 1.4rem;
}
.hero .btn--outline { border-color: rgba(255,255,255,.38); color: var(--white); }
.hero .btn--outline:hover { border-color: var(--white); background: rgba(255,255,255,.09); color: var(--white); }
.hero-note { position: relative; padding: 1.5rem; border: 1px solid rgba(255, 255, 255, .26); border-radius: var(--radius); background: rgba(255, 255, 255, .07); }
.hero-note strong { display: block; margin-bottom: .5rem; color: var(--white); font-size: 1.2rem; }
.hero-note p { color: #d7e7f4; }
.status-line { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.1rem; color: #9ce4ca; font-size: .85rem; font-weight: 700; }
.status-line::before { width: 9px; height: 9px; border-radius: 50%; background: var(--green-600); content: ""; box-shadow: 0 0 0 5px rgba(61, 139, 120, .14); }

.infrastructure-motif { display: grid; gap: 1rem; margin-top: 1.75rem; }
.motif-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; }
.motif-row span { display: block; height: 34px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px; background: rgba(255, 255, 255, .08); }
.motif-row--standard span { border-color: rgba(142, 224, 193, .72); background: rgba(142, 224, 193, .2); }
.motif-connector { position: relative; height: 34px; }
.motif-connector::before,
.motif-connector::after { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .45); content: ""; }
.motif-connector::before { left: 18%; transform: rotate(-27deg); transform-origin: bottom; }
.motif-connector::after { right: 18%; transform: rotate(27deg); transform-origin: bottom; }
.motif-connector span { position: absolute; inset: 0 38%; border: 1px solid rgba(255, 255, 255, .48); border-radius: 5px; background: rgba(255, 255, 255, .12); }

.page-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--blue-900), var(--blue-800)); color: #d8e9f2; }
.page-hero .wrap { padding-block: clamp(3.75rem, 7vw, 6rem); }
.page-hero h1 { max-width: 22ch; color: var(--white); font-size: clamp(2.2rem, 5vw, 3.6rem); }
.page-hero p { max-width: 66ch; margin-top: 1.25rem; color: #c1d8d0; font-size: clamp(1.08rem, 2vw, 1.28rem); }
.crumb { margin-bottom: 1rem; color: #cfe3db; font-size: .85rem; }
.crumb a { color: #c5ddd4; }

.card { padding: clamp(1.35rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.card .number { display: inline-grid; width: 2rem; height: 2rem; margin-bottom: 1.25rem; place-items: center; border-radius: 50%; background: var(--green-100); color: var(--green-800); font-weight: 850; }
.card--blue { border-color: #cddfed; background: #f5f9fc; }
.card--amber { border-color: #eedab7; background: #fffaf1; }
.card--plum { border-color: #ded2ee; background: #faf8fd; }
.card--quiet { background: transparent; }
.card p:last-child { margin-bottom: 0; }
.tag { display: inline-flex; padding: .3rem .65rem; border-radius: 999px; background: var(--green-100); color: var(--green-800); font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tag--next { background: var(--amber-100); color: var(--amber-700); }
.tag--future { background: var(--plum-100); color: var(--plum-700); }
.callout { padding: clamp(1.5rem, 4vw, 2.5rem); border-left: 5px solid var(--green-600); border-radius: 0 var(--radius) var(--radius) 0; background: var(--green-100); }
.callout strong { color: var(--green-900); }
.callout--spaced { margin-top: 1.25rem; }

.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; counter-reset: flow; }
.readiness-card { border-top: 5px solid var(--green-600); }
.readiness-card--method { border-top-color: var(--blue-700); }
.readiness-card--collaboration { border-top-color: #c67b1c; }
.readiness-card--interpretation { border-top-color: var(--plum-700); }

.model-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1rem; }
.model-card { display: grid; align-content: start; padding: clamp(1.35rem, 3vw, 2rem); border: 1px solid var(--line); border-top: 4px solid var(--brand-blue); border-radius: var(--radius); background: var(--white); }
.model-card p { color: var(--ink-soft); }
.model-card p:last-child { margin-bottom: 0; }
.model-index { margin-bottom: 1rem; color: var(--blue-700); font-size: .78rem; font-weight: 800; letter-spacing: .13em; }
.variation-label { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink) !important; font-size: .9rem; }
.model-tradeoff { margin-top: 1rem; padding: 1rem; border-radius: var(--radius-sm); background: var(--amber-100); color: #67410b !important; }
.variation-scale { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem 1rem; margin-top: 1rem; color: var(--ink); font-size: .86rem; }
.variation-scale strong { color: var(--blue-900); }
.variation-scale i { position: relative; grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--blue-100); overflow: hidden; }
.variation-scale i::after { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--brand-blue); content: ""; }
.variation-scale[data-level="low"] i::after { width: 34%; }
.variation-scale[data-level="medium"] i::after { width: 67%; }
.model-layout { display: grid; gap: 1rem; }
.model-comparator-enhanced .model-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: start; }
/* Enhanced view: one card frame holds the selected approach and its radar. */
.model-comparator-enhanced .model-layout { gap: 0; border: 1px solid var(--line); border-top: 4px solid var(--brand-blue); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.model-comparator-enhanced .model-card { border: 0; border-radius: 0; background: transparent; }
.model-comparator-enhanced .model-radar { border: 0; border-left: 1px solid var(--line); border-radius: 0; }
.model-radar { margin: 0; padding: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.model-radar figcaption { display: grid; gap: .25rem; margin-bottom: .5rem; }
.model-radar figcaption strong { color: var(--blue-900); }
.model-radar figcaption span { color: var(--ink-soft); font-size: .84rem; }
.model-radar__chart { display: block; width: 100%; height: auto; font-family: var(--font); }
.model-radar__ring { fill: none; stroke: #d8e4ea; }
.model-radar__axis { stroke: #d8e4ea; }
.model-radar__label { fill: var(--ink); font-size: 13px; font-weight: 700; }
.model-radar__level { fill: var(--ink-soft); font-size: 10px; }
.model-radar__series { --series: var(--brand-blue); opacity: .5; transition: opacity .2s ease; }
.model-radar__series--question { --series: #6b4fa3; }
.model-radar__series--protocol { --series: #b7791f; }
.model-radar__series--cdm { --series: #0063c3; }
.model-radar__series polygon { fill: none; stroke: var(--series); stroke-width: 2; stroke-dasharray: 5 4; }
.model-radar__series circle { fill: var(--series); }
.model-radar__series.is-active { opacity: 1; }
.model-radar__series.is-active polygon { fill: var(--series); fill-opacity: .18; stroke-width: 3; stroke-dasharray: none; }
.model-radar__legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .5rem 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: .84rem; }
.model-radar__key { display: inline-flex; align-items: center; gap: .4rem; }
.model-radar__key::before { width: .8rem; height: .8rem; border-radius: 2px; content: ""; }
.model-radar__key--question::before { background: #6b4fa3; }
.model-radar__key--protocol::before { background: #b7791f; }
.model-radar__key--cdm::before { background: #0063c3; }
@media (max-width: 960px) { .model-comparator-enhanced .model-layout { grid-template-columns: 1fr; } .model-comparator-enhanced .model-radar { border-left: 0; border-top: 1px solid var(--line); } }
.model-controls { display: none; flex-wrap: wrap; gap: .55rem; margin-bottom: 1rem; }
.model-comparator-enhanced .model-controls { display: flex; }
.model-controls button { padding: .6rem .9rem; border: 1px solid var(--blue-200); border-radius: var(--radius-sm); background: var(--white); color: var(--blue-900); cursor: pointer; font-weight: 700; }
.model-controls button[aria-selected="true"] { border-color: var(--brand-blue); background: var(--brand-blue); color: var(--white); }

.etl-process { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: .85rem; padding: 0; list-style: none; counter-reset: etl; }
.etl-process li { margin: 0; padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
.etl-process li::before { display: block; margin-bottom: .65rem; color: var(--blue-700); content: "0" counter(etl); counter-increment: etl; font-size: .78rem; font-weight: 800; letter-spacing: .11em; }
.revision-loop { margin-top: 1rem; padding: 1rem 1.1rem; border-left: 4px solid var(--amber-700); background: var(--amber-100); color: #67410b; }
.route-card { border-top: 4px solid var(--brand-blue); }
.technical-label { display: inline-block; margin-bottom: .75rem; color: var(--blue-700); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.section-heading--sub { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.table-scroll { overflow-x: auto; margin-top: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
.research-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .92rem; }
.research-table th,
.research-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.research-table thead th { background: var(--blue-100); color: var(--blue-900); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.research-table tbody tr:last-child th,
.research-table tbody tr:last-child td { border-bottom: 0; }
.research-table--compact { min-width: 580px; }
.quality-dimensions .card { border-top: 4px solid var(--green-600); }
.qa-evidence { margin-top: 1rem; }

.pipeline { display: grid; gap: 1rem; list-style: none; padding: 0; counter-reset: pipeline; }
.pipeline > li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 1rem; margin: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
.pipeline > li::before { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--green-900); color: var(--white); content: counter(pipeline); counter-increment: pipeline; font-weight: 850; }
.pipeline h3 { margin: .15rem 0 .35rem; }
.pipeline p { margin: 0; color: var(--ink-soft); }

.partner { display: grid; grid-template-columns: 54px 1fr; gap: 1rem; align-items: start; }
.partner-code { display: grid; width: 54px; height: 54px; place-items: center; border-radius: var(--radius-sm); background: var(--green-100); color: var(--green-900); font-size: .68rem; font-weight: 800; }
.partner small { display: block; margin-top: .3rem; color: var(--ink-soft); }

.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.case-card { position: relative; overflow: hidden; display: grid; min-height: 360px; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.case-card::after { position: absolute; inset: auto -12% -40% 35%; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 99, 195, .13), transparent 66%); content: ""; }
.case-card--green::after { background: radial-gradient(circle, rgba(61, 139, 120, .18), transparent 66%); }
.case-card > * { position: relative; z-index: 1; }
.case-card .case-kicker { color: var(--blue-700); font-size: .78rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.case-card .case-stat { align-self: end; margin: 1.8rem 0 1rem; color: var(--blue-800); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 750; letter-spacing: -.035em; line-height: 1; }
.case-card--green .case-stat { color: var(--green-700); }
.case-card a { width: fit-content; font-weight: 800; }

.case-nav { display: flex; flex-wrap: wrap; gap: .75rem; }
.case-nav a { padding: .65rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-weight: 800; text-decoration: none; }
.evidence-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.evidence-layout > * { min-width: 0; }
.source-note { margin-top: 1.25rem; color: var(--ink-soft); font-size: .85rem; }

.evidence-figure { min-width: 0; margin: 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.figure-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.figure-heading h3 { margin-bottom: 0; }
.data-link { font-size: .85rem; font-weight: 700; white-space: nowrap; }
.chart-status { padding: .8rem 1rem; border-left: 4px solid var(--brand-blue); background: var(--blue-100); color: var(--blue-900); }
.chart-error { padding: .8rem 1rem; border-left: 4px solid var(--amber-700); background: var(--amber-100); color: #67410b; }
.chart-shell { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; margin-top: 1rem; }
.chart-shell svg { display: block; width: 100%; min-width: 620px; height: auto; }
.chart-shell--wide svg { min-width: 820px; }
.evidence-chart text { font-family: var(--font); }
.chart-gridline { stroke: #d8e4ea; stroke-width: 1; }
.chart-reference { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 5; }
.range-estimate { stroke: var(--brand-blue); stroke-width: 9; stroke-linecap: round; }
.range-endpoint { fill: var(--white); stroke: var(--brand-blue); stroke-width: 4; }
.chart-tick { fill: var(--ink-soft); font-size: 13px; }
.chart-axis-label { fill: var(--ink); font-size: 14px; font-weight: 700; }
.chart-annotation { fill: var(--ink-soft); font-size: 13px; }
.chart-value { fill: var(--blue-900); font-size: 15px; font-weight: 700; }
.chart-panel-title { fill: var(--green-900); font-size: 15px; font-weight: 700; }
.chart-zero-label { fill: var(--ink-soft); font-size: 11px; }
.chart-database-label { fill: var(--ink); font-size: 12px; font-weight: 700; }
.confidence-interval { stroke-width: 3; stroke-linecap: round; }
.slope-segment { stroke-width: 2; opacity: .72; }
.chart-definition-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; }
.chart-definition-highlight { fill: var(--blue-100); opacity: .65; }
.chart-definition-label { fill: var(--green-900); font-size: 14px; font-weight: 700; }
.chart-not-reported { fill: var(--amber-700); font-size: 10px; }
.chart-baseline { stroke: var(--ink-soft); stroke-width: 1.5; }
.chart-bar-value { fill: var(--ink); font-size: 11px; font-weight: 700; }
.evidence-figure figcaption { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .88rem; }
.figure-table { margin-top: 1rem; }
.figure-table summary { width: fit-content; color: var(--blue-700); cursor: pointer; font-weight: 700; }
.data-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .88rem; }
.data-table th,
.data-table td { padding: .7rem .85rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table thead th { background: var(--blue-100); color: var(--blue-900); }
.figure-metadata { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1px; margin: 1.25rem 0 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); overflow: hidden; }
.figure-metadata div { padding: 1rem; background: var(--white); }
.figure-metadata dt { color: var(--ink-soft); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.figure-metadata dd { margin: .35rem 0 0; }
.chart-controls { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.25rem 0; }
.chart-controls fieldset { display: flex; flex-wrap: wrap; gap: .45rem .8rem; min-width: min(100%, 260px); margin: 0; padding: .75rem 1rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.chart-controls legend { padding: 0 .35rem; color: var(--green-900); font-size: .78rem; font-weight: 800; }
.control-option,
.database-option { display: inline-flex; min-height: 36px; align-items: center; gap: .4rem; color: var(--ink); cursor: pointer; font-size: .85rem; }
.control-option input,
.database-option input { width: 18px; height: 18px; accent-color: var(--brand-blue); }
.legend-marker { width: 20px; height: 20px; }
.definition-register { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: .75rem; margin-bottom: 1rem; }
.definition-register div { display: grid; gap: .3rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.definition-register strong { color: var(--blue-700); }
.definition-register span { color: var(--ink-soft); font-size: 1.08rem; }
.definition-explanation { padding: .75rem 1rem; border-left: 4px solid var(--brand-blue); background: var(--blue-100); color: var(--blue-900); }
.interpretation-note--spaced { margin-top: 1.5rem; }
.interpretation-note--findings { margin-top: 1.5rem; }
.interpretation-note--findings ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: .4rem 2rem; margin-bottom: 1rem; }

.interpretation-note { padding: 1.3rem; border-radius: var(--radius-sm); background: var(--amber-100); color: #67410b; }
.integration-slot { padding: clamp(2rem, 5vw, 4rem); border: 2px dashed #9eb8c8; border-radius: var(--radius); background: linear-gradient(135deg, #f3f8fc, #f4f8f6); }
.integration-slot ul { margin-top: 1rem; }

.timeline-tabs { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.4rem; }
.timeline-tabs button { padding: .7rem 1rem; border: 1px solid var(--green-200); border-radius: var(--radius-sm); background: var(--white); color: var(--green-900); cursor: pointer; font-weight: 700; }
.timeline-tabs button[aria-selected="true"] { border-color: var(--green-700); background: var(--green-700); color: var(--white); }
.timeline-panel { min-height: 265px; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.timeline-panel .tag { margin-bottom: 1rem; }
.timeline-panel ul { margin-top: 1.25rem; }
.timeline-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-top: 2rem; }
.timeline-progress span { height: 7px; border-radius: 999px; background: var(--line); }
.timeline-panel[data-stage="current"] .timeline-progress span:first-child,
.timeline-panel[data-stage="next"] .timeline-progress span:nth-child(-n+2),
.timeline-panel[data-stage="future"] .timeline-progress span { background: var(--green-600); }

.maturity { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.maturity .card { border-top: 5px solid var(--green-600); }
.maturity .status-card--next { border-top-color: #d98a28; }
.maturity .status-card--future { border-top-color: var(--plum-700); }

.living-timeline { position: relative; display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.living-timeline::before { position: absolute; top: .7rem; bottom: .7rem; left: 21px; width: 3px; border-radius: 999px; background: var(--line); content: ""; }
.living-timeline li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1.2rem; margin: 0; }
.timeline-dot { position: relative; z-index: 1; display: grid; width: 44px; height: 44px; place-items: center; border: 4px solid var(--white); border-radius: 50%; background: var(--brand-blue); box-shadow: 0 0 0 2px var(--blue-200); color: var(--white); font-size: .68rem; font-weight: 800; }
.timeline-current .timeline-dot { background: var(--green-700); box-shadow: 0 0 0 2px var(--green-200); }
.timeline-next .timeline-dot { background: var(--amber-700); box-shadow: 0 0 0 2px #eedab7; }
.timeline-future .timeline-dot { background: var(--plum-700); box-shadow: 0 0 0 2px #ded2ee; }
.timeline-event { padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
.timeline-event .when { color: var(--blue-700); font-size: .76rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.timeline-event h3 { margin-top: .25rem; }

.js .reveal-target { opacity: 0; transition: opacity .3s ease; }
.js .reveal-target.is-visible { opacity: 1; }

.faq-list { display: grid; gap: .8rem; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); overflow: hidden; }
.faq-question { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.35rem; border: 0; background: transparent; color: var(--green-900); cursor: pointer; text-align: left; font-weight: 800; }
.faq-question::after { color: var(--green-700); content: "+"; font-size: 1.5rem; }
.faq-question[aria-expanded="true"]::after { content: "−"; }
.faq-answer { padding: 0 1.35rem 1.3rem; color: var(--ink-soft); }
.boundary { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.boundary > div { padding: 1.5rem; border-radius: var(--radius-sm); }
.boundary .yes { background: var(--green-100);color: var(--ink-soft); }
.boundary .yes h3{ color: var(--ink-soft); }
.boundary .not-yet { background: var(--amber-100); color: var(--ink-soft);}
.boundary .not-yet h3{ color: var(--ink-soft); }

.assessment-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 1.25rem; align-items: start; }
.assessment-form { min-width: 0; }
.assessment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: .85rem; }
.assessment-item { display: grid; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
.assessment-item span { display: grid; gap: .25rem; }
.assessment-item strong { color: var(--green-900); }
.assessment-item small { color: var(--ink-soft); line-height: 1.45; }
.assessment-item select,
.assessment-context textarea { width: 100%; padding: .65rem .75rem; border: 1px solid #9eb8c8; border-radius: 6px; background: var(--white); color: var(--ink); }
.assessment-context { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--green-50); }
.assessment-context summary { width: fit-content; color: var(--blue-700); cursor: pointer; font-weight: 700; }
.assessment-context .grid { margin-top: 1rem; }
.assessment-context label { display: grid; gap: .4rem; color: var(--green-900); font-weight: 700; }
.assessment-context textarea { resize: vertical; font-weight: 400; }
.assessment-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.assessment-actions button { cursor: pointer; }
.assessment-actions button:disabled { cursor: not-allowed; opacity: .55; }
.btn--quiet-action { border: 1px solid transparent; background: transparent; color: var(--ink-soft); }
.btn--quiet-action:hover { border-color: var(--line); background: var(--white); transform: none; }
.assessment-summary { position: sticky; top: 96px; padding: 1.25rem; border: 1px solid var(--line); border-top: 5px solid var(--green-600); border-radius: var(--radius); background: var(--white); }
.assessment-summary h3 { margin-bottom: .5rem; }
.assessment-summary dl { display: grid; grid-template-columns: 1fr auto; gap: .6rem 1rem; margin: 1rem 0; }
.assessment-summary dt { color: var(--ink-soft); }
.assessment-summary dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 750; }
.assessment-summary .summary-warning { padding: .75rem; border-left: 4px solid var(--amber-700); background: var(--amber-100); color: #67410b; }
.privacy-note { margin-top: 1.25rem; padding: 1rem; border-left: 4px solid var(--green-600); background: var(--green-100); }

.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2rem, 5vw, 3.5rem); border-radius: var(--radius); background: var(--green-900); color: #c9ddd6; }
.cta-band h2 { color: var(--white); font-size: clamp(1.8rem, 3vw, 2.7rem); }
.cta-band p { margin: 0; }

.site-footer { padding-block: 4rem 2rem; background: #102f2d; color: #bcd2cb; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.footer-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; color: var(--white); font-weight: 850; }
.footer-brand img { width: 38px; height: 38px; }
.site-footer h3 { color: var(--white); font-size: 1rem; letter-spacing: 0; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-top: .5rem; }
.site-footer a { color: #d7e8e2; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .82rem; }

.redirect-page { display: grid; min-height: 100vh; place-items: center; padding: 2rem; background: var(--green-50); }
.redirect-card { width: min(100%, 620px); padding: 2.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); text-align: center; box-shadow: var(--shadow); }
.redirect-card img { width: 58px; margin: 0 auto 1.2rem; }

@media (max-width: 1020px) {
  .nav-toggle { display: block; }
  .nav-links { position: fixed; inset: 74px 0 auto; display: grid; padding: 1rem; border-bottom: 1px solid var(--line); background: var(--canvas); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(-10px); transition: .18s ease; }
  .nav-links.is-open { opacity: 1; pointer-events: auto; transform: none; }
  .nav-links a { padding: .8rem 1rem; }
  .nav-links .nav-join { margin: .4rem 0 0; text-align: center; }
  .hero .wrap { min-height: auto; grid-template-columns: 1fr; }
  .hero-note { max-width: 620px; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maturity { grid-template-columns: 1fr; }
  .assessment-layout { grid-template-columns: 1fr; }
  .assessment-summary { position: static; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .grid--2, .grid--3, .grid--4, .flow, .boundary, .footer-grid, .case-grid, .evidence-layout { grid-template-columns: 1fr; }
  .figure-heading { flex-direction: column; gap: .5rem; }
  .data-link { white-space: normal; }
  .cta-band, .footer-bottom { align-items: flex-start; flex-direction: column; }
  .page-hero h1 { font-size: clamp(2.1rem, 10vw, 3rem); }
  .pipeline > li { grid-template-columns: 44px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .js .reveal-target { opacity: 1; transform: none; }
}

@media print {
  .site-header,
  .site-footer,
  .page-hero,
  .assessment-form,
  .privacy-note,
  .source-note,
  body[data-page="databases"] main > section:not(#readiness-check) { display: none !important; }
  body { background: var(--white); color: #000; }
  #readiness-check { padding: 0; }
  #readiness-check .section-heading { margin-bottom: 1rem; }
  .assessment-layout { display: block; }
  .assessment-summary { position: static; border: 1px solid #777; }
}

/* ============================================================
   Web mod additions — case studies, slide-derived
   interactive widgets, and the CDM brick motif.
   ============================================================ */

/* --- Track-record band (home) --- */
.record-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); overflow: hidden; }
.record-band div { padding: 1.4rem 1.25rem; background: var(--white); }
.record-band dt { color: var(--ink-soft); font-size: .94rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; text-align: center;}
.record-band dd { margin: .4rem 0 0; color: var(--blue-900); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 750; line-height: 1; letter-spacing: -.03em; text-align: center;}
.record-band small { display: block; margin-top: .5rem; color: var(--ink-soft); font-size: .8rem; line-height: 1.45; }
.record-band--dark { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.16); }
.record-band--dark div { background: var(--green-900); }
.record-band--dark dt { color: #9ac6b8; }
.record-band--dark dd { color: var(--white); }
.record-band--dark small { color: #b6cfc7; }

/* --- CDM brick motif --- */
.cdm-showcase { width: 100%; margin: 1.4rem auto 0; }
.cdm-showcase img { width: 100%; height: auto; }
.brick-figure { margin: 0; }
.brick-figure img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.brick-figure figcaption { margin-top: .85rem; color: var(--ink-soft); font-size: .88rem; }
.brick-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.35rem; align-items: start; }
.brick-step { display: block; margin-bottom: .5rem; color: var(--blue-700); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hero .brick-figure img { border-color: rgba(255,255,255,.28); }
.hero .brick-figure figcaption { color: #c9dced; }

/* --- Success cases --- */
.case-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1rem; margin-top: 2rem; }
.case-hero-stats div { padding: 1.1rem 1.2rem; border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-sm); background: rgba(255,255,255,.08); }
.case-hero-stats dt { color: #9ce4ca; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.case-hero-stats dd { margin: .35rem 0 0; color: var(--white); font-size: 1.5rem; font-weight: 750; line-height: 1.15; }
.case-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.35rem; }
.case-tile { display: grid; align-content: start; height: 100%; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line); border-top: 5px solid var(--brand-blue); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.case-tile--derm { border-top-color: var(--green-700); }
.case-tile--method { border-top-color: var(--plum-700); }
.case-tile .case-kicker { display: block; margin-bottom: .6rem; color: var(--blue-700); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.case-tile .headline { display: block; margin: 1rem 0 .35rem; color: var(--blue-800); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 750; letter-spacing: -.03em; line-height: 1; }
.case-tile--derm .headline { color: var(--green-800); }
.case-tile--method .headline { color: var(--plum-700); font-size: clamp(1.25rem, 3vw, 1.55rem); line-height: 1.2; }
.case-tile .headline-note { color: var(--ink-soft); font-size: .88rem; }
.case-tile a { margin-top: 1.25rem; width: fit-content; font-weight: 800; }
.case-preview { position: relative; min-height: 90px; margin: .4rem 0 1rem; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, var(--blue-100), rgba(229,245,238,.8)); }
.case-preview--chart { padding: .6rem .75rem .45rem; }
.case-preview__chart { display: block; width: 100%; height: auto; font-family: var(--font); }
.case-story { display: grid; gap: 1rem; padding: 0; margin: 0; list-style: none; }
.case-story li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.25rem; margin: 0; padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
.case-story .story-label { color: var(--blue-700); font-size: .72rem; font-weight: 800; letter-spacing: .09em; line-height: 1.35; text-transform: uppercase; }
.case-story h3 { margin-bottom: .4rem; }
.case-story p:last-child { margin-bottom: 0; }
.pull-finding { padding: clamp(1.5rem, 4vw, 2.25rem); border: 1px solid var(--green-200); border-left: 5px solid var(--green-600); border-radius: 0 var(--radius) var(--radius) 0; background: var(--green-50); }
.pull-finding .technical-label { color: var(--green-700); }
.pull-finding p:last-child { margin-bottom: 0; }
.pull-number { display: block; margin: .35rem 0 .6rem; color: var(--green-900); font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 750; letter-spacing: -.03em; line-height: 1; }
.limits-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; }
.limits-list div { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
.limits-list h3 { margin-bottom: .35rem; font-size: 1rem; }
.limits-list p { margin: 0; color: var(--ink-soft); font-size: .92rem; }

/* --- Slide-derived interactive widgets --- */
.widget { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.widget-head { margin-bottom: 1.25rem; }
.widget-head h3 { margin-bottom: .35rem; }
.widget-head p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

.etl-interactive { display: grid; grid-template-columns: minmax(0, 1fr) minmax(min(100%, 300px), .85fr); gap: 1.5rem; align-items: start; }
.etl-steps { display: grid; gap: .6rem; padding: 0; margin: 0; list-style: none; }
.etl-steps li { margin: 0; }
.etl-steps button { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .9rem; width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); cursor: pointer; text-align: left; }
.etl-steps button:hover { border-color: var(--green-600); }
.etl-steps button[aria-pressed="true"] { border-color: var(--brand-blue); background: var(--blue-100); }
.etl-steps .step-num { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: var(--green-900); color: var(--white); font-size: .82rem; font-weight: 800; }
.etl-steps button[aria-pressed="true"] .step-num { background: var(--brand-blue); }
.etl-steps .step-name { align-self: center; font-weight: 700; }
.etl-gate { margin-top: .6rem; padding: .85rem 1rem; border: 1px dashed var(--amber-700); border-radius: var(--radius-sm); background: var(--amber-100); color: #67410b; font-size: .9rem; }
.etl-detail { padding: 1.25rem; border: 1px solid var(--line); border-top: 4px solid var(--brand-blue); border-radius: var(--radius-sm); background: var(--green-50); }
.etl-detail h4 { margin-bottom: .5rem; color: var(--green-900); font-size: 1.05rem; }
.etl-detail p { color: var(--ink-soft); font-size: .93rem; }
.etl-detail ul { margin-top: .6rem; color: var(--ink-soft); font-size: .9rem; }
.etl-detail p:last-child, .etl-detail ul:last-child { margin-bottom: 0; }

.route-guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(min(100%, 300px), .85fr); gap: 1.5rem; align-items: start; }
.route-questions { display: grid; gap: .9rem; }
.route-question { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
.route-question > p { margin: 0 0 .35rem; color: var(--green-900); font-size: .96rem; font-weight: 700; }
.route-question small { display: block; margin-bottom: .7rem; color: var(--ink-soft); font-size: .85rem; line-height: 1.5; }
.route-answers { display: flex; flex-wrap: wrap; gap: .5rem; }
.route-answers label { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: .86rem; font-weight: 650; }
.route-answers label.is-active { border-color: var(--brand-blue); background: var(--blue-100); color: var(--blue-900); }
.route-answers input { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); overflow: hidden; }
.route-answers label.has-focus { outline: 3px solid var(--white); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(7,55,99,.92); }
.route-result { position: sticky; top: 96px; padding: 1.25rem; border: 1px solid var(--line); border-top: 5px solid var(--green-600); border-radius: var(--radius-sm); background: var(--white); }
.route-result h4 { margin-bottom: .5rem; }
.route-lean { display: inline-flex; margin-bottom: .75rem; padding: .25rem .7rem; border-radius: 4px; background: var(--green-100); color: var(--green-800); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.route-result ul { margin-top: .75rem; color: var(--ink-soft); font-size: .9rem; }
.route-caveat { margin: 1rem 0 0; padding: .75rem .85rem; border-left: 4px solid var(--amber-700); background: var(--amber-100); color: #67410b; font-size: .87rem; }

.survey-matrix { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
.survey-matrix table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .9rem; }
.survey-matrix th, .survey-matrix td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.survey-matrix thead th { background: var(--blue-100); color: var(--blue-900); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.survey-matrix tbody tr:last-child th, .survey-matrix tbody tr:last-child td { border-bottom: 0; }
.survey-flag { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; }
.survey-flag::before { width: 10px; height: 10px; border-radius: 2px; content: ""; }
.survey-flag--direct { color: var(--green-800); }
.survey-flag--direct::before { background: var(--green-600); }
.survey-flag--derived { color: var(--amber-700); }
.survey-flag--derived::before { background: #d98a28; }
.survey-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1rem; color: var(--ink-soft); font-size: .86rem; }

.cite-block { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--green-50); }
.cite-block p { margin: 0; color: var(--ink-soft); font-size: .85rem; }
.cite-copy { min-height: 40px; padding: .45rem 1rem; border: 1px solid var(--green-600); border-radius: var(--radius-sm); background: var(--white); color: var(--green-900); cursor: pointer; font-size: .85rem; font-weight: 700; }
.cite-copy:hover { background: var(--green-100); }

@media (max-width: 1020px) {
  .etl-interactive, .route-guide { grid-template-columns: 1fr; }
  .route-result { position: static; }
}
@media (max-width: 720px) {
  .case-story li { grid-template-columns: 1fr; gap: .5rem; }
}

/* --- IMPRESIVE impact --- */
.impact-section { background: var(--white); }
.impact-heading { max-width: 860px; margin-inline: auto; text-align: center; }
.impact-heading p { margin-inline: auto; }
.impact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.impact-card {
  --impact-accent: var(--brand-blue);
  --impact-tint: var(--blue-100);
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 1.15rem;
  width: 100%;
  min-height: 250px;
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  border: 1px solid var(--line);
  border-left: 7px solid var(--impact-accent);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.impact-card--scientific { --impact-accent: #124fb3; --impact-tint: #eaf2ff; }
.impact-card--clinical { --impact-accent: #e6531a; --impact-tint: #fff1ea; }
.impact-card--economic { --impact-accent: #238347; --impact-tint: #edf8f0; }
.impact-card--education { --impact-accent: #d82f42; --impact-tint: #fff0f2; }
.impact-card:hover { transform: translateY(-3px); border-color: var(--impact-accent); box-shadow: 0 14px 28px rgba(23, 63, 61, .12); }
.impact-card.is-active { border-color: var(--impact-accent); background: var(--impact-tint); box-shadow: 0 0 0 2px var(--impact-accent), 0 14px 28px rgba(23, 63, 61, .1); }
.impact-card__mark {
  position: relative;
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 2px solid var(--impact-accent);
  border-radius: 50%;
  background: var(--impact-tint);
  color: var(--impact-accent);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.impact-card__mark::before, .impact-card__mark::after {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--impact-accent);
  content: "";
}
.impact-card__mark::before { top: 5px; right: -3px; }
.impact-card__mark::after { bottom: 4px; left: -3px; }
.impact-card__content { display: flex; min-width: 0; flex-direction: column; }
.impact-card__title {
  color: var(--impact-accent);
  font-size: clamp(1rem, 1.8vw, 1.28rem);
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.22;
  text-transform: uppercase;
}
.impact-card__themes { margin-top: .45rem; color: var(--impact-accent); font-size: .9rem; font-weight: 700; line-height: 1.45; }
.impact-card__summary { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .96rem; line-height: 1.55; }
.impact-card__action { margin-top: auto; padding-top: .85rem; color: var(--impact-accent); font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.impact-detail {
  --impact-accent: #124fb3;
  --impact-tint: #eaf2ff;
  margin-top: 1.5rem;
  padding: clamp(1.4rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-top: 6px solid var(--impact-accent);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--impact-tint), var(--white) 72%);
  box-shadow: var(--shadow);
}
.impact-detail[data-impact-active="0"] { --impact-accent: #124fb3; --impact-tint: #eaf2ff; }
.impact-detail[data-impact-active="1"] { --impact-accent: #e6531a; --impact-tint: #fff1ea; }
.impact-detail[data-impact-active="2"] { --impact-accent: #238347; --impact-tint: #edf8f0; }
.impact-detail[data-impact-active="3"] { --impact-accent: #d82f42; --impact-tint: #fff0f2; }
.impact-detail__toolbar { display: none; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.impact-section.is-enhanced .impact-detail__toolbar { display: flex; }
.impact-detail__counter { color: var(--impact-accent); font-size: .8rem; font-weight: 800; letter-spacing: .12em; }
.impact-detail__controls { display: flex; gap: .55rem; }
.impact-detail__controls button {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--impact-accent);
  border-radius: 50%;
  background: var(--white);
  color: var(--impact-accent);
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 800;
}
.impact-detail__controls button:hover { background: var(--impact-accent); color: var(--white); }
.impact-detail__panel { max-width: 900px; }
.impact-detail__panel + .impact-detail__panel { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.impact-section.is-enhanced .impact-detail__panel + .impact-detail__panel { margin-top: 0; padding-top: 0; border-top: 0; }
.impact-detail__label { margin-bottom: .55rem; color: var(--impact-accent); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.impact-detail__panel h3 { max-width: 32ch; color: var(--impact-accent); font-size: clamp(1.45rem, 3vw, 2.05rem); }
.impact-detail__lead { max-width: 72ch; color: var(--green-900); font-size: clamp(1.05rem, 2vw, 1.22rem); font-weight: 700; }
.impact-detail__panel p:last-child { max-width: 88ch; margin-bottom: 0; color: var(--ink-soft); }

@media (max-width: 860px) {
  .impact-grid { grid-template-columns: 1fr; }
  .impact-card { min-height: 0; }
}
@media (max-width: 560px) {
  .impact-card { grid-template-columns: 54px minmax(0, 1fr); gap: .85rem; padding: 1.1rem; }
  .impact-card__mark { width: 52px; height: 52px; font-size: .9rem; }
  .impact-card__mark::before, .impact-card__mark::after { width: 8px; height: 8px; border-width: 2px; }
  .impact-card__title { font-size: .95rem; }
  .impact-card__summary { font-size: .9rem; }
  .impact-detail { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .impact-card { transition: none; }
  html { scroll-behavior: auto; }
}

/* --- Synchronized Impact rendering --- */
.impact-static-fallback[hidden] { display: none; }
.impact-static-fallback--summary .impact-detail { display: none; }
.impact-section--summary .impact-card { min-height: 230px; text-decoration: none; }
.impact-section--summary .impact-card:hover { color: var(--ink); }

/* --- PHDc collaboration route --- */
.collaboration-hub {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  overflow: hidden;
  border: 1px solid #c8dbe7;
  border-radius: calc(var(--radius) + 4px);
  background: var(--white);
  box-shadow: var(--shadow);
}
.collaboration-hub__route { padding: clamp(2rem, 5vw, 4rem); }
.collaboration-hub__route h2 { max-width: 18ch; }
.collaboration-capabilities { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.collaboration-capabilities li {
  margin: 0;
  padding: .42rem .7rem;
  border: 1px solid #bcd7ce;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-900);
  font-size: .82rem;
  font-weight: 700;
}
.phdc-contact-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3rem);
  background: linear-gradient(150deg, var(--blue-900), #0f5f74 72%, var(--green-800));
  color: #d9e9f2;
}
.phdc-contact-card img { width: min(100%, 300px); height: auto; margin-bottom: 2rem; padding: .7rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .94); }
.phdc-contact-card .tag { align-self: flex-start; }
.phdc-contact-card h3 { margin: 1rem 0 .35rem; color: var(--white); }
.phdc-contact-card p { margin: 1rem 0 0; color: #c8dce7; font-size: .92rem; }
.phdc-contact-email { color: var(--white); font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 800; overflow-wrap: anywhere; }
.phdc-contact-email:hover { color: #bfe8d9; }

/* --- Governance and transparency --- */
.governance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.governance-card {
  position: relative;
  min-height: 210px;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-top: 4px solid var(--green-600);
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--white), var(--green-50));
}
.governance-card span { display: block; margin-bottom: 1rem; color: var(--blue-700); font-size: .78rem; font-weight: 850; letter-spacing: .14em; }
.governance-card h3 { font-size: 1.12rem; }
.governance-card p { margin-bottom: 0; color: var(--ink-soft); }

/* --- LEGO researcher mascot system --- */
.hero .wrap, .page-hero .wrap { position: relative; z-index: 2; }
.mascot-enabled .page-hero .wrap { padding-right: clamp(18rem, 32vw, 30rem); }
.lego-scene {
  position: absolute;
  right: clamp(12px, 3vw, 48px);
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
  filter: drop-shadow(0 7px 7px rgba(6, 30, 60, .28));
}
body[data-page="home"] .lego-scene {
  display: none !important;
}
.lego-scene .lego-fig { width: 78px; height: auto; }
.lego-scene .lego-tower { width: 116px; height: auto; }
.lego-scene .lego-tiles { display: flex; flex-direction: column; gap: 6px; }
.lego-scene .lego-tile { width: 48px; height: auto; }

/* .lego-header-crew { display: flex; height: 48px; align-items: flex-end; gap: 1px; margin-left: .15rem; pointer-events: none; } 
.lego-header-crew .lego-fig { width: 34px; height: auto; }
.lego-header-crew .lego-tile { width: 24px; height: auto; } */


.lego-header-crew { display: inline-flex !important; flex-direction: row ; align-items: center; justify-content: flex-start; gap: 4px; width: auto;}
.lego-header-crew .lego-fig { width: 34px; height: auto; flex: 0 0 auto;}
.lego-header-crew .lego-tile { width: 24px; height: auto; flex: 0 0 auto;}

.lego-parade {
  display: flex;
  width: min(calc(100% - 2rem), 1200px);
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 auto 1.6rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.lego-parade .lego-fig { width: 66px; height: auto; }
.lego-parade .lego-tile { width: 52px; height: auto; }

.has-lego-mascot { position: relative; }
.lego-peek {
  position: absolute;
  z-index: 3;
  top: -22px;
  right: 12px;
  width: 42px;
  pointer-events: none;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 4px 4px rgba(6, 30, 60, .2));
}
.lego-peek .lego-fig { display: block; width: 42px; height: auto; }
.lego-bubble {
  position: absolute;
  z-index: 5;
  top: -20px;
  left: 50%;
  padding: 2px 8px;
  border: 2px solid #16263f;
  border-radius: 10px;
  background: var(--white);
  color: #16263f;
  box-shadow: 2px 2px 0 rgba(10, 37, 64, .2);
  font-size: 11px;
  font-weight: 800;
  opacity: 0;
  white-space: nowrap;
  transform: translate(-50%, 5px) scale(.5);
  transform-origin: bottom center;
  transition: .2s cubic-bezier(.3, 1.5, .5, 1);
}
.lego-bubble::after { position: absolute; bottom: -8px; left: 50%; border: 5px solid transparent; border-top-color: #16263f; content: ""; transform: translateX(-50%); }
.has-lego-mascot:hover .lego-bubble,
.has-lego-mascot:focus-visible .lego-bubble,
.has-lego-mascot:focus-within .lego-bubble { opacity: 1; transform: translate(-50%, 0) scale(1); }

@keyframes lego-jump {
  0% { transform: translateY(0) scaleY(1); }
  15% { transform: translateY(0) scaleX(1.12) scaleY(.82); }
  45% { transform: translateY(-26px) rotate(6deg) scaleY(1.05); }
  68% { transform: translateY(0) rotate(0) scaleX(1.08) scaleY(.92); }
  84% { transform: translateY(-9px); }
  100% { transform: translateY(0); }
}
@keyframes lego-flip {
  0% { transform: translateY(0) rotate(0); }
  18% { transform: translateY(-10px) rotate(-10deg); }
  38% { transform: translateY(0) rotate(0) scaleY(.94); }
  56% { transform: translateY(-10px) rotate(10deg); }
  76% { transform: translateY(0) rotate(0) scaleY(.94); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes lego-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-15deg); } 45% { transform: rotate(12deg); } 70% { transform: rotate(-7deg); } 88% { transform: rotate(4deg); } }
@keyframes lego-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes lego-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes lego-wave-idle { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(-15deg); } }
@keyframes lego-wave-big { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(-46deg); } }
@keyframes lego-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.12); } }

@media (hover: hover) {
  .has-lego-mascot:hover .pk0 { animation: lego-jump .9s cubic-bezier(.34, 1.5, .5, 1); }
  .has-lego-mascot:hover .pk1 { animation: lego-flip 1s ease; }
  .has-lego-mascot:hover .pk2 { animation: lego-wiggle .7s ease; }
  .has-lego-mascot:hover .lego-arm { animation: lego-wave-big .45s ease-in-out infinite; }
}
.lego-scene .lego-fig, .lego-parade .lego-fig { animation: lego-bob 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.lego-scene .lego-fig:nth-child(odd), .lego-parade .lego-fig:nth-child(3n) { animation: lego-sway 4.2s ease-in-out infinite; }
.lego-arm { animation: lego-wave-idle 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 28% 96%; }
.lego-eyes { animation: lego-blink 5.5s ease-in-out infinite; animation-delay: var(--bd, 0s); transform-box: fill-box; transform-origin: 50% 50%; }

/* Pause continuous mascot work outside the viewport and while the page is hidden. */
.mascot-animation-paused,
.mascot-animation-paused *,
.mascot-page-hidden .lego-scene,
.mascot-page-hidden .lego-scene *,
.mascot-page-hidden .lego-header-crew,
.mascot-page-hidden .lego-header-crew *,
.mascot-page-hidden .lego-parade,
.mascot-page-hidden .lego-parade *,
.mascot-page-hidden .lego-peek,
.mascot-page-hidden .lego-peek * { animation-play-state: paused !important; }

@media (max-width: 1180px) { .lego-header-crew { display: none; } }
@media (max-width: 1080px) {
  .lego-scene { display: none; }
  .mascot-enabled .page-hero .wrap { padding-right: 0; }
}
@media (max-width: 900px) {
  .collaboration-hub { grid-template-columns: 1fr; }
  .governance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .governance-grid { grid-template-columns: 1fr; }
  .lego-parade { gap: 10px; }
  .lego-parade .lego-fig { width: 50px; }
  .lego-parade .lego-tile { width: 42px; }
  .lego-peek { top: -18px; right: 8px; width: 34px; }
  .lego-peek .lego-fig { width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .lego-peek,
  .lego-scene .lego-fig,
  .lego-parade .lego-fig,
  .lego-arm,
  .lego-eyes { animation: none !important; }
  .lego-bubble { transition: none; }
}

/* ============================================================
   Merged approved visual system and interaction layer
   ============================================================ */
/*
 * IMPRESIVE visual redesign v0
 * Review scope: Home, About, and Join only.
 * This file intentionally overrides styles.css without changing content or interaction contracts.
 */

:root {
  /* Brand and structural blues. Keep --blue-900 for backwards compatibility. */
  --brand-blue: #0063c3;
  --blue-950: #062b52;
  --blue-900: #073763;
  --blue-800: #0a4e96;
  --blue-700: #1b5f98;
  --blue-200: #c5daed;
  --blue-100: #eaf3fb;

  /* PHDc green is a supporting, current/readiness accent. */
  --phdc-green: #3f7b64;
  --green-900: #173f3d;
  --green-800: #2f6756;
  --green-700: #2d746a;
  --green-600: #3d8b78;
  --green-200: #c9e2d9;
  --green-100: #eaf3ee;
  --green-50: #f3f8f5;

  /* Text, surfaces, and borders. */
  --ink: #17324d;
  --ink-soft: #4d6478;
  --white: #fff;
  --canvas: #f7fafc;
  --line: #d6e3ee;
  --line-strong: #6f879d;

  /* Dark-surface text. */
  --on-dark: #fff;
  --on-dark-soft: #e2edf5;
  --on-dark-accent: #cbeee2;

  /* Semantic state colours: amber=warning, plum=future. */
  --amber-700: #8a570f;
  --amber-100: #fbefd9;
  --plum-700: #6c5197;
  --plum-100: #eee8f7;

  /* Links and interaction states. */
  --link: #0063c3;
  --link-hover: #004f9c;
  --link-visited: #5d4c9a;
  --disabled: #718596;
  --focus-inner: #fff;
  --focus-outer: #062b52;

  /* Data-viz categories remain independent from the brand palette. */
  --chart-nhird: #174a7e;
  --chart-cgrd: #2c7a4b;
  --chart-nhis: #a55a00;
  --chart-hira: #6b4fa3;
  --chart-desc: #a33b6b;
  --chart-cdars: #007c91;

  --mascot-outline: #16263f;
  --max-width: 1180px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(6, 43, 82, .06), 0 12px 30px rgba(6, 43, 82, .075);
  --font: "Segoe UI Variable Text", "Segoe UI", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
  --font-heading: "Segoe UI Variable Display", "Segoe UI", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
  --font-serif: var(--font-heading);
}

body {
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-family: var(--font-heading);
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }
main a:not(.btn):not(.roadmap-cta):visited { color: var(--surface-link-visited, var(--link-visited)); }

/* Ordinary links on the dark hero need their own contrast-safe colour context. */
.page-hero a:not(.btn),
.page-hero a:not(.btn):visited { color: var(--on-dark-accent); }
.page-hero a:not(.btn):hover { color: var(--on-dark); }

/* Keep fragment targets clear of the compact sticky header. */
main [id] { scroll-margin-top: 5.25rem; }
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] { color: var(--disabled); }

:focus-visible,
.route-answers label.has-focus {
  outline: 3px solid var(--focus-inner);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-outer);
}

/* Interactive boundaries must be distinguishable without relying on fill colour. */
.case-nav a,
.etl-steps button,
.route-answers label,
.chart-controls fieldset,
.assessment-item select,
.assessment-context textarea,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-color: var(--line-strong);
}

/* Functional controls meet the 44 px touch-target contract. */
.assessment-item select { min-block-size: 44px; }
.data-link,
.phdc-contact-email {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
}
.figure-table summary,
.assessment-context summary {
  min-block-size: 44px;
  padding-block: .65rem;
}

.section--soft {
  background: linear-gradient(135deg, #eff6fc 0%, var(--blue-100) 58%, var(--green-50) 100%);
}

.section--dark,
.cta-band {
  --surface-link-visited: var(--on-dark-accent);
  background: linear-gradient(125deg, var(--blue-800) 0%, var(--brand-blue) 68%, #3b6c73 100%);
  color: var(--on-dark-soft);
}

.section--dark { padding-block: clamp(3rem, 5vw, 4.75rem); }

.site-footer {
  background: linear-gradient(145deg, var(--blue-950), var(--blue-900));
  color: var(--on-dark-soft);
}

.section--dark h2,
.section--dark h3,
.cta-band h2,
.site-footer h3 { color: var(--on-dark); }

.section--dark .eyebrow { color: var(--on-dark-accent); }
.section--dark .section-heading p,
.cta-band p { color: var(--on-dark-soft); }
.site-footer a { color: var(--on-dark-soft); }
.site-footer a:hover { color: var(--on-dark-accent); }

/* Compact header: 66 px rail with 44 px minimum targets. */
.site-header {
  border-bottom-color: rgba(197, 218, 237, .86);
  background: rgba(255, 255, 255, .95);
}

.site-header.is-scrolled { box-shadow: 0 8px 24px rgba(6, 43, 82, .09); }
.nav { min-height: 66px; }
.brand { color: var(--ink); }
.brand:hover { color: var(--blue-900); }
.brand img { width: 36px; height: 36px; }

.nav-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink-soft);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  background: var(--blue-100);
  color: var(--blue-950);
}

.nav-links .nav-join,
.nav-links .nav-join:visited { color: var(--white); }
.nav-toggle { width: 44px; height: 44px; flex: 0 0 44px; background: var(--blue-100); color: var(--blue-950); }

/* Minimal navigation when JavaScript is unavailable. */
.noscript-nav {
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: 1rem;
}
.noscript-brand {
  color: var(--blue-950);
  font-weight: 850;
  letter-spacing: .04em;
  text-decoration: none;
}
.noscript-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .1rem;
  margin-left: auto;
}
.noscript-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding-inline: .65rem;
  border-radius: 9px;
  color: var(--ink-soft);
  font-size: .91rem;
  font-weight: 700;
  text-decoration: none;
}
.noscript-links a:hover,
.noscript-links a:focus-visible { background: var(--blue-100); color: var(--blue-950); }

/* Teal terminates on the mascot side; copy remains over navy and Amgen blue. */
.hero,
.page-hero {
  --surface-link-visited: var(--on-dark-accent);
  background: linear-gradient(90deg, var(--blue-800) 0%, var(--brand-blue) 64%, #3b6c73 100%);
  color: var(--on-dark-soft);
}

.hero::after,
.page-hero::after {
  position: absolute;
  inset: 0;
  display: block;
  background:
    radial-gradient(circle at 87% 112%, rgba(203, 238, 226, .22), transparent 34%),
    linear-gradient(90deg, rgba(6, 43, 82, .12), transparent 60%);
  content: "";
  pointer-events: none;
}

.hero .wrap {
  min-height: 520px;
  padding-block: clamp(3.5rem, 7vw, 5.75rem);
}

.hero h1 ,
.page-hero h1 {
  color: var(--on-dark);
  font-size: clamp(2.66rem, 5vw, 4.25rem);
}

.hero .lead,
.hero .tagline,
.page-hero p { color: var(--on-dark-soft); }
.hero .kicker,
.page-hero .eyebrow,
.status-line { color: var(--on-dark-accent); }

.hero .kicker {
  border-color: rgba(255, 255, 255, .38);
  background: rgba(6, 43, 82, .22);
}

.page-hero { min-height: 360px; }
.page-hero .wrap {
  display: grid;
  min-height: 360px;
  align-content: center;
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
}

.mascot-enabled .page-hero .wrap { padding-right: clamp(17rem, 28vw, 23rem); }
.crumb,
.crumb a,
.crumb a:visited { color: var(--on-dark-soft); }
.crumb a:hover { color: var(--on-dark-accent); }

.btn--primary { background: var(--brand-blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-800); color: var(--white); }
.btn--outline { border-color: var(--brand-blue); color: var(--blue-900); }
.btn--outline:hover { border-color: var(--blue-800); background: var(--blue-100); color: var(--blue-950); }
.hero .btn--outline { border-color: rgba(255, 255, 255, .55); color: var(--white); }
.hero .btn--outline:hover { border-color: var(--white); background: rgba(255, 255, 255, .12); color: var(--white); }

/* Blue is the default card axis; green remains a deliberate supporting accent. */
.card,
.case-card,
.record-band,
.faq-item,
.collaboration-hub,
.governance-card,
.impact-card,
.impact-detail {
  border-color: var(--blue-200);
  box-shadow: var(--shadow);
}

.card:not(.card--amber):not(.card--plum),
.governance-card {
  background: linear-gradient(145deg, var(--white), #f7fbff);
}

/* A light card creates its own text context even when nested in a dark section. */
.section--dark .card {
  --surface-link-visited: var(--link-visited);
  color: var(--ink);
}

.section--dark .card h2,
.section--dark .card h3,
.section--dark .card h4 {
  color: var(--ink);
}

.section--dark .card p,
.section--dark .card li,
.section--dark .card small {
  color: var(--ink-soft);
}

.section--dark .card .technical-label { color: var(--blue-700); }
.section--dark .card a { color: var(--link); }
.section--dark .card a:visited { color: var(--link-visited); }
.section--dark .card a:hover { color: var(--link-hover); }

.card .number,
.partner-code { background: var(--blue-100); color: var(--blue-800); }
.callout { border-left-color: var(--brand-blue); background: var(--blue-100); }
.callout strong { color: var(--ink); }

.record-band { gap: 1px; background: var(--blue-200); }
.record-band dd { color: var(--blue-800); }

.readiness-card { border-top-color: var(--phdc-green); }
.readiness-card--method { border-top-color: var(--brand-blue); }
.readiness-card--collaboration { border-top-color: var(--blue-800); }
.readiness-card--interpretation { border-top-color: var(--green-700); }

.impact-card--scientific,
.impact-detail[data-impact-active="0"] { --impact-accent: var(--brand-blue); --impact-tint: var(--blue-100); }
.impact-card--clinical,
.impact-detail[data-impact-active="1"] { --impact-accent: var(--blue-800); --impact-tint: #edf4fb; }
.impact-card--economic,
.impact-detail[data-impact-active="2"] { --impact-accent: var(--green-800); --impact-tint: var(--green-100); }
.impact-card--education,
.impact-detail[data-impact-active="3"] { --impact-accent: var(--chart-cdars); --impact-tint: #edf4f6; }
.impact-detail__lead { color: var(--ink); }

.governance-card { border-top-color: var(--brand-blue); }
.governance-card:nth-child(3n) { border-top-color: var(--phdc-green); }

.collaboration-capabilities li {
  border-color: var(--blue-200);
  background: var(--blue-100);
  color: var(--blue-900);
}

.phdc-contact-card {
  background: linear-gradient(150deg, var(--blue-800), var(--brand-blue) 68%, #3b6c73);
  color: var(--on-dark-soft);
}
.phdc-contact-card p { color: var(--on-dark-soft); }
.phdc-contact-card .tag--next { background: var(--on-dark-accent); color: var(--blue-950); }
.phdc-contact-email,
.phdc-contact-email:visited { color: var(--white); }
.phdc-contact-email:hover { color: var(--on-dark-accent); }

.lego-bubble {
  border-color: var(--mascot-outline);
  color: var(--mascot-outline);
}
.lego-bubble::after { border-top-color: var(--mascot-outline); }

@media (max-width: 1080px) {
  .mascot-enabled .page-hero .wrap { padding-right: 0; }
}

@media (max-width: 1020px) {
  .nav-links { inset: 66px 0 auto; }
  .noscript-nav { align-items: flex-start; flex-direction: column; padding-block: .65rem; }
  .noscript-links { margin-left: 0; }
  .hero .wrap { min-height: 480px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero .wrap { min-height: 440px; padding-block: 3rem; }
  .page-hero,
  .page-hero .wrap { min-height: 320px; }
  .hero h1,
  .page-hero h1 { font-size: clamp(2.25rem, 10vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .page-hero::after { transition: none; }
}

/* ============================================================
   Meaning-first motion and reading utilities
   ============================================================ */

.site-header { isolation: isolate; }
.reading-progress {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--brand-blue);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.record-band--motion dd {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 220ms ease-out var(--motion-delay, 0ms), transform 220ms cubic-bezier(.2, .8, .2, 1) var(--motion-delay, 0ms);
}
.record-band--motion.is-motion-visible dd { opacity: 1; transform: translateY(0); }

.timeline-motion { --timeline-progress: 0; }
.timeline-motion::after {
  position: absolute;
  z-index: 0;
  top: .7rem;
  bottom: .7rem;
  left: 21px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(var(--brand-blue), var(--phdc-green));
  content: "";
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: top center;
}
.timeline-motion--fallback::after { transform: scaleY(var(--timeline-progress)); transition: transform 260ms ease-out; }
.timeline-motion .timeline-dot { opacity: .72; transform: scale(.8); transition: opacity 200ms ease-out, transform 200ms cubic-bezier(.2, .9, .25, 1.3); }
.timeline-motion li.is-reached .timeline-dot { opacity: 1; transform: scale(1); }
.timeline-motion .timeline-current.is-reached .timeline-dot { animation: timeline-current-pulse 2.8s ease-in-out infinite; }

@supports (animation-timeline: view()) {
  .timeline-motion:not(.timeline-motion--fallback)::after {
    animation: timeline-line-fill linear both;
    animation-timeline: view();
    animation-range: entry 18% cover 72%;
  }
}

@keyframes timeline-line-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes timeline-current-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--green-200), 0 0 0 7px rgba(63, 123, 100, 0); transform: scale(1); }
  50% { box-shadow: 0 0 0 2px var(--green-200), 0 0 0 7px rgba(63, 123, 100, .18); transform: scale(1.035); }
}

.variation-scale--motion i::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(.2, .8, .2, 1) var(--motion-delay, 0ms);
}
.variation-scale--motion.is-motion-visible i::after { transform: scaleX(1); }

.case-tile {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
@media (hover: hover) {
  .case-tile:hover,
  .case-tile:focus-within {
    border-color: var(--brand-blue);
    box-shadow: 0 2px 4px rgba(6, 43, 82, .08), 0 16px 34px rgba(6, 43, 82, .12);
    transform: translateY(-2px);
  }
}

.impact-panel-enter { animation: impact-panel-enter 180ms ease-out both; }
@keyframes impact-panel-enter {
  from { opacity: 0; transform: translateX(6px); }
  to { opacity: 1; transform: translateX(0); }
}

.chart-motion-ready .range-estimate,
.chart-motion-ready .confidence-interval,
.chart-motion-ready .slope-segment {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.chart-motion-ready .chart-marker,
.chart-motion-ready .range-endpoint { opacity: 0; }
.chart-motion-ready.is-chart-visible .range-estimate,
.chart-motion-ready.is-chart-visible .confidence-interval,
.chart-motion-ready.is-chart-visible .slope-segment {
  animation: chart-line-draw 520ms ease-out forwards;
  animation-delay: calc(var(--motion-index, 0) * 34ms);
}
.chart-motion-ready.is-chart-visible .chart-marker,
.chart-motion-ready.is-chart-visible .range-endpoint {
  animation: chart-mark-in 220ms ease-out forwards;
  animation-delay: calc(120ms + var(--motion-index, 0) * 28ms);
}
@keyframes chart-line-draw { to { stroke-dashoffset: 0; } }
@keyframes chart-mark-in { from { opacity: 0; } to { opacity: 1; } }

.figure-heading { flex-wrap: wrap; }
.figure-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-left: auto; }
.figure-action {
  min-height: 40px;
  padding: .48rem .72rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--blue-900);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 750;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.figure-action:hover:not(:disabled) { border-color: var(--brand-blue); background: var(--blue-100); color: var(--blue-950); }
.figure-action:disabled { cursor: wait; opacity: .58; }

/* =========================================================
   Reading tools / On this page
   A slim bar pinned under the site header. It sits in the normal flow,
   so it never covers the hero or narrows the sections at any zoom level.
   ========================================================= */
:root { --header-h: 67px; --subnav-h: 52px; }
.reading-tools__sentinel { height: 0; }
.reading-tools {
  position: sticky;
  z-index: 40;
  top: var(--header-h);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(10px);
  transition: box-shadow .2s ease;
}
.reading-tools.is-pinned { box-shadow: 0 6px 18px rgba(6, 43, 82, .08); }
.reading-tools__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: min(calc(100% - 2rem), var(--max-width));
  min-height: var(--subnav-h);
  margin: 0 auto;
}
.reading-tools__label {
  flex: none;
  color: var(--blue-950, var(--blue-900));
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}
.reading-tools__list {
  display: flex;
  flex: 1 1 auto;
  gap: .25rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.reading-tools__list::-webkit-scrollbar { display: none; }
.reading-tools__list li { flex: none; margin: 0; }
.reading-tools__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: var(--subnav-h);
  padding: 0 .7rem;
  color: var(--ink-soft);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.reading-tools__list a::after {
  position: absolute;
  right: .7rem;
  bottom: -1px;
  left: .7rem;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-blue);
  content: "";
  transform: scaleX(0);
  transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}
.reading-tools__list a:hover { color: var(--blue-900); }
.reading-tools__list a.is-current { color: var(--blue-900); }
.reading-tools__list a.is-current::after { transform: scaleX(1); }
.reading-tools__list a:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: -3px; border-radius: 6px; }
.reading-tools__index {
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-700);
  font-size: .72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.reading-tools__list a.is-current .reading-tools__index { background: var(--brand-blue); color: #fff; }
.reading-time {
  flex: none;
  margin: 0;
  color: var(--ink-soft);
  font-size: .78rem;
  white-space: nowrap;
}
/* Anchored sections land below the header and the pinned bar. */
body.has-reading-tools main [id] { scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 1rem); }
/* Other pinned panels clear the header and the pinned bar on these pages. */
body.has-reading-tools .route-result,
body.has-reading-tools .partner-map-detail,
body.has-reading-tools .arch__panel { top: calc(var(--header-h) + var(--subnav-h) + 1rem); }
body.has-reading-tools .partner-map-detail { max-height: calc(100vh - var(--header-h) - var(--subnav-h) - 2rem); }

@media (max-width: 720px) {
  .reading-tools__label, .reading-time { display: none; }
  .reading-tools__inner { width: 100%; padding-left: .5rem; }
}
@media print {
  .reading-tools { display: none !important; }
}

.lego-parade-slot { min-height: 132px; }
.lego-parade-slot .lego-parade { margin-bottom: 0; }

@media (max-width: 1080px) {
  .lego-scene {
    right: 8px;
    display: flex;
    gap: 0;
    opacity: .94;
  }
  .lego-scene > * { display: none; }
  .lego-scene .lego-mobile-keeper { display: block; width: 54px; }
}

@media (max-width: 720px) {
  .figure-heading { display: grid; grid-template-columns: 1fr; }
  .figure-actions { margin-left: 0; }
  .figure-action { flex: 1 1 125px; }
  .lego-scene .lego-mobile-keeper { width: 46px; }
  .lego-parade-slot { min-height: 108px; }
}

@media (prefers-reduced-motion: reduce) {
  .reading-progress { will-change: auto; }
  .record-band--motion dd,
  .timeline-motion .timeline-dot,
  .variation-scale--motion i::after,
  .chart-motion-ready .range-estimate,
  .chart-motion-ready .confidence-interval,
  .chart-motion-ready .slope-segment,
  .chart-motion-ready .chart-marker,
  .chart-motion-ready .range-endpoint {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .record-band--motion dd,
  .timeline-motion .timeline-dot,
  .variation-scale--motion i::after {
    transform: none !important;
  }
  .timeline-motion::after { animation: none !important; transform: scaleY(1) !important; }
  .timeline-motion .timeline-current.is-reached .timeline-dot { animation: none !important; }
  .impact-panel-enter { animation: none !important; }
}

/* ============================================================
   2026-08-10 content-architecture refinements
   ============================================================ */

.identity-intro {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--blue-200);
  border-left: 5px solid var(--brand-blue);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--white), var(--blue-100));
  box-shadow: var(--shadow);
}
.identity-intro__lead {
  max-width: 72ch;
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: clamp(1.16rem, 2.2vw, 1.46rem);
  font-weight: 750;
  line-height: 1.5;
}
.identity-intro > h3{ max-width: 94ch; margin-bottom: 1rem; color: var(--blue-700); font-size: 1.93rem; }
.record-link { display: inline; font-weight: 750; }
.section--dark .identity-intro {
  color: var(--ink);
}
.identity-intro > p:last-child { max-width: 94ch; margin-bottom: 0; color: var(--ink-soft); font-size: 1.03rem; }
.record-link { display: inline; font-weight: 750; }
.section--dark .identity-intro {
  color: var(--ink);
}

.page-updated {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.35rem;
  padding: .45rem .7rem;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 999px;
  background: rgba(6, 43, 82, .22);
  color: var(--on-dark);
  font-size: .86rem;
  line-height: 1.3;
}
.page-updated span { color: var(--on-dark-accent); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.page-updated time { color: var(--on-dark); font-weight: 700; }

.timeline-disclosure,
.pipeline-details {
  margin-top: 1rem;
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-sm);
  background: var(--blue-100);
  overflow: hidden;
}
.timeline-disclosure summary,
.pipeline-details summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: .8rem;
  padding: .75rem 1rem;
  color: var(--blue-800);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
.timeline-disclosure summary::-webkit-details-marker,
.pipeline-details summary::-webkit-details-marker { display: none; }
.timeline-disclosure summary::after,
.pipeline-details summary::after { margin-left: auto; color: var(--brand-blue); content: "+"; font-size: 1.2rem; line-height: 1; }
.timeline-disclosure[open] > summary::after,
.pipeline-details[open] > summary::after { content: "−"; }
.timeline-disclosure__body,
.pipeline-details__body { padding: 1.25rem; border-top: 1px solid var(--blue-200); background: var(--white); }
.timeline-disclosure .case-story { margin-top: 1rem; }
.timeline-disclosure .case-story li { padding: 1rem; border-color: var(--blue-200); box-shadow: none; }
.roadmap-cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .45rem;
  margin-top: 1rem;
  padding: .65rem 1rem;
  border-radius: 999px;
  background: var(--brand-blue);
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
}
.roadmap-cta:visited { color: var(--white); }
.roadmap-cta:hover { background: var(--blue-800); color: var(--white); transform: translateY(-1px); }

.impact-icon { display: block; width: 58px; height: 58px; object-fit: contain; }
@media (max-width: 560px) { .impact-icon { width: 42px; height: 42px; } }
#impact .impact-card { min-height: 156px; }
#impact .impact-card__summary,
#impact .impact-card__action { display: none; }

.section--models {
  border-top: 1px solid var(--blue-200);
  border-bottom: 1px solid var(--blue-200);
  background: linear-gradient(135deg, #f5f9fd 0%, var(--blue-100) 64%, var(--green-50) 100%);
}
.section--models .section-heading p { color: var(--ink-soft); }
.variation-scale[data-metric="variation"][data-level="high"] i::after,
.variation-scale[data-metric="variation"][data-level="low"] i::after { background: #2f7a55; }
.variation-scale[data-metric="flexibility"][data-level="high"] i::after,
.variation-scale[data-metric="flexibility"][data-level="low"] i::after { background: #b44242; }
.variation-scale[data-level="medium"] i::after { background: #b7791f; }
.pipeline-details__body p { margin: 0 0 1rem; }
.pipeline-details__body .boundary,
.pipeline-details__body .quality-dimensions { margin-top: 1.25rem; }
.pipeline-detail-heading { max-width: 780px; margin-bottom: 1.5rem; }
.pipeline-details__body .card p { margin-bottom: 0; }

.partner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; }
.partner-grid .partner { min-height: 100%; grid-template-columns: 64px minmax(0, 1fr); padding: 1.35rem; border-top: 4px solid var(--brand-blue); }
.partner-grid .partner:nth-child(3n + 2) { border-top-color: var(--phdc-green); }
.partner-code { width: 64px; height: 64px; }
.partner-content { display: flex; min-width: 0; height: 100%; flex-direction: column; }
.partner-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.partner-heading h3 { margin: 0; }
.partner-heading small { margin: 0; text-align: right; }
.partner-scale { display: grid; gap: .25rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--blue-200); }
.partner-scale strong { color: var(--blue-800); font-size: clamp(1.45rem, 3vw, 1.85rem); line-height: 1.1; }
.partner-scale span { color: var(--ink-soft); font-size: .82rem; line-height: 1.45; }
.partner-scale a { display: inline-flex; min-height: 44px; align-items: center; color: var(--brand-blue); font-size: .82rem; font-weight: 800; }
.partner-context-note { margin: 1.25rem 0 0; padding: 1rem 1.15rem; border-left: 4px solid var(--phdc-green); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--green-100); color: var(--ink-soft); }
.partner-context-note strong { color: var(--ink); }

.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn--on-dark { border-color: rgba(255, 255, 255, .72); color: var(--white); }
.btn--on-dark:visited { color: var(--white); }
.btn--on-dark:hover { border-color: var(--white); background: rgba(255, 255, 255, .12); color: var(--white); }

@media (max-width: 960px) {
  .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .identity-intro { padding: 1.25rem; }
  .page-updated { align-items: flex-start; flex-direction: column; border-radius: var(--radius-sm); }
  .partner-grid { grid-template-columns: 1fr; }
  .partner-grid .partner { grid-template-columns: 54px minmax(0, 1fr); padding: 1.15rem; }
  .partner-code { width: 54px; height: 54px; }
  .partner-heading { align-items: flex-start; flex-direction: column; gap: .1rem; }
  .partner-heading small { text-align: left; }
  .pipeline-details__body { padding: 1rem; }
}

/* ============================================================
   2026-08-12 research expansion
   Compact covers, source-driven explorers and transportability
   ============================================================ */

/* Covers are intentionally compact: their job is orientation, not a full-screen poster. */
.hero .wrap {
  min-height: 410px;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, .5fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2.35rem, 4.5vw, 3.75rem);
}
.page-hero,
.page-hero .wrap { min-height: 245px; }
.page-hero .wrap { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }
.page-hero h1 { font-size: clamp(2.35rem, 4.25vw, 3.45rem); }
.page-hero p { margin-top: .75rem; }
.case-hero-stats { margin-top: 1.25rem; }
.mascot-enabled .page-hero .wrap { padding-right: clamp(15rem, 24vw, 20rem); }
.page-hero .lego-scene { transform: scale(.82); transform-origin: right bottom; }

.hero-marks {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;

  width: min(100%, 350px);

  justify-self: end;
  align-self: end;
}
.hero-ncku-mark,
.hero-phdc-mark {
  width: 100%;

  padding: .75rem 1rem 1rem;

  border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--radius-sm);

  background: rgba(255,255,255,.96);

  box-shadow: 0 18px 40px rgba(6,43,82,.22);
}

.hero-ncku-mark img,
.hero-phdc-mark img {
  display: block;
  width: 100%;
  height: auto;
}

.pillar-navigator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .75rem;
  align-items: stretch;
  margin-top: 2rem;
}

.pillar-navigator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .75rem;
  align-items: stretch;
  margin-top: 2rem;
}
.pillar-map-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.pillar-map-heading .section-heading { margin-bottom: 0; }
.pillar-map-heading .btn { flex: 0 0 auto; }
.pillar-link {
  display: grid;
  height: 100%;
  min-height: 250px;
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radius);
  background: rgba(255,255,255,.96);
  color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pillar-link summary { min-height: 205px; }
.pillar-link[open] summary { min-height: 0; }
.pillar-link:hover { color: var(--ink); transform: translateY(-3px); box-shadow: 0 18px 34px rgba(0,0,0,.22); }
.pillar-link summary { display: grid; cursor: pointer; list-style: none; }
.pillar-link summary::-webkit-details-marker { display: none; }
.pillar-link summary::after { margin-top: auto; color: var(--brand-blue); content: "Open pillar +"; font-size: .78rem; font-weight: 900; }
.pillar-link[open] summary::after { content: "Close pillar −"; }
.pillar-link summary > span { color: var(--brand-blue); font-weight: 900; letter-spacing: .14em; }
.pillar-link h3 { margin-top: 1rem; color: var(--blue-950); font-size: 1.65rem; }
.pillar-link p { color: var(--ink-soft); }
.pillar-link__detail { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--blue-200); }
.pillar-destination { margin: 0 0 .75rem !important; color: var(--blue-800) !important; font-size: .74rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.pillar-link__detail a { display: inline-flex; min-height: 44px; align-items: center; color: var(--brand-blue); font-weight: 900; }
.pillar-link__detail a,
main .pillar-link__detail a:not(.btn):not(.roadmap-cta):visited {
  color: var(--brand-blue);
}

.pillar-link__detail a:hover,
main .pillar-link__detail a:not(.btn):not(.roadmap-cta):visited:hover {
  color: var(--blue-800);
}
.pillar-link--analytics { border-top: 5px solid var(--phdc-green); }
.pillar-link--database { border-top: 5px solid var(--brand-blue); }
.pillar-link--knowledge { border-top: 5px solid var(--chart-cdars); }
.pillar-connector { position: relative; align-self: center; max-width: 90px; color: var(--on-dark-soft); font-size: .65rem; font-weight: 800; line-height: 1.25; text-align: center; text-transform: uppercase; }
.pillar-connector::before { display: block; height: 2px; margin-bottom: .4rem; background: linear-gradient(90deg, var(--on-dark-accent), var(--white)); content: ""; }
.pillar-connector::after { position: absolute; top: -3px; right: -2px; width: 8px; height: 8px; border-top: 2px solid var(--white); border-right: 2px solid var(--white); content: ""; transform: rotate(45deg); }
.pillar-quick-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-top: 1rem;
}

.pillar-quick-links a {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  padding: .8rem 1rem;

  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 10px;

  background: rgba(255, 255, 255, .08);
  color: var(--white);
}

/* Prevent the global visited-link color from overriding
   links inside the dark pillar section. */
main .pillar-quick-links a:not(.btn):not(.roadmap-cta):visited {
  color: var(--white);
}

.pillar-quick-links a:hover,
main .pillar-quick-links a:not(.btn):not(.roadmap-cta):visited:hover {
  background: rgba(255, 255, 255, .14);
  color: var(--white);
}

.pillar-quick-links strong {
  color: inherit;
}

.pillar-quick-links span {
  color: rgba(255, 255, 255, .88);
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.research-explorer,
.harmonization-stepper,
.route-table-widget {
  margin-top: 1.75rem;
  padding: clamp(1rem, 2.4vw, 1.75rem);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}
.source-badge,
.provisional-badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  margin-bottom: 1rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: var(--blue-100);
  color: var(--blue-800);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.provisional-badge { background: var(--amber-100); color: #714600; }
.explorer-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.25rem;
}
.explorer-button {
  min-height: 44px;
  padding: .65rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue-900);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.explorer-button:hover { border-color: var(--brand-blue); background: var(--blue-100); }
.explorer-button[aria-pressed="true"],
.explorer-button[aria-selected="true"] { border-color: var(--brand-blue); background: var(--brand-blue); color: var(--white); }
.explorer-form { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin: 1rem 0 1.5rem; }
.explorer-field { display: grid; min-width: min(100%, 240px); gap: .35rem; color: var(--ink); font-size: .86rem; font-weight: 800; }
.explorer-field select { min-height: 44px; padding: .55rem 2.4rem .55rem .7rem; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--white); color: var(--ink); font: inherit; }

.case-accomplishment { display: grid; gap: .35rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--blue-200); }
.case-accomplishment > span { color: var(--blue-700); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.case-accomplishment > strong { color: var(--blue-950); font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.15; }
.case-tile--derm .case-accomplishment > strong { color: var(--green-900); }
.case-tile--transport .case-accomplishment > strong { color: var(--blue-800); }
.case-tile--visualization .case-accomplishment > strong { color: var(--chart-cdars); }
.case-accomplishment p { margin: 0; color: var(--ink-soft); font-size: .9rem; }

.country-flag { display: block; flex: 0 0 auto; width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 50%; background: var(--white); object-fit: contain; box-shadow: 0 2px 7px rgba(6,43,82,.1); }
.country-flag--cohort { width: 1.8rem; height: 1.8rem; }
.country-flag--network { width: 2.35rem; height: 2.35rem; }
.country-flag--table { width: 1.65rem; height: 1.65rem; }
.country-flag--control { width: 1.55rem; height: 1.55rem; }
.country-flag--map { width: 2.1rem; height: 2.1rem; border-radius: 7px; }
.country-flag--detail { width: 2.8rem; height: 2.8rem; border-radius: 9px; }
.country-flag--large { width: 3rem; height: 3rem; }
.transport-setting-card__heading { display: flex; align-items: center; gap: 1rem; }
.transport-setting-card__heading h3 { margin: .15rem 0 0; }

.cohort-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
.cohort-summary-card { display: grid; gap: .4rem; padding: 1rem; border: 1px solid var(--blue-200); border-top: 5px solid var(--db-color); border-radius: var(--radius-sm); background: #f8fbfe; }
.cohort-db { display: flex; align-items: center; gap: .45rem; color: var(--ink-soft); font-weight: 800; }
.cohort-n { color: var(--blue-900); font-size: 1.25rem; }
.cohort-period, .cohort-female { font-size: .87rem; }
.cohort-status { width: fit-content; padding: .15rem .45rem; border-radius: 999px; background: var(--amber-100); color: #714600; font-size: .7rem; font-weight: 800; text-transform: uppercase; }

.network-stepper { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: .5rem; margin-bottom: 1.5rem; overflow-x: auto; padding-bottom: .25rem; }
.network-stepper .explorer-button { border-radius: 10px; }
.network-journey-button { display: grid; min-height: 72px; align-content: center; gap: .2rem; text-align: left; }
.network-journey-button .network-step-number { color: var(--blue-700); font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
.network-journey-button strong { font-size: .78rem; line-height: 1.25; }
.network-journey-button[aria-pressed="true"] .network-step-number { color: var(--on-dark-accent); }
.network-stage { position: relative; overflow: hidden; padding: 2rem 1rem; border-radius: var(--radius-sm); background: linear-gradient(135deg, #eef6fc, #eff9f6); }
.network-stage > * { opacity: 0; transform: translateY(8px); }
.network-stage.is-revealed > * { opacity: 1; transform: none; transition: opacity .24s ease, transform .24s ease; }
.network-country-journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 1rem; }
.network-country-card { position: relative; display: grid; gap: .75rem; min-width: 0; padding: 1rem; border: 1px solid var(--blue-200); border-radius: 12px; background: rgba(255,255,255,.92); box-shadow: 0 8px 20px rgba(6,43,82,.08); }
.network-country-card:not(:last-child)::after { position: absolute; z-index: 2; top: 50%; right: -.7rem; width: 1.3rem; height: 2px; background: var(--brand-blue); content: ""; }
.network-country-card__heading { display: flex; align-items: center; gap: .65rem; color: var(--blue-950); }
.network-country-databases { display: flex; flex-wrap: wrap; gap: .35rem; }
.network-database-chip { padding: .3rem .55rem; border: 1px solid color-mix(in srgb, var(--db-color) 62%, white); border-radius: 999px; background: color-mix(in srgb, var(--db-color) 10%, white); color: var(--blue-950); font-size: .73rem; font-weight: 900; }
.network-node-rail { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; }
.network-node-rail::before { position: absolute; z-index: 0; top: 50%; right: 4%; left: 4%; height: 3px; background: var(--blue-200); content: ""; }
.network-node { position: relative; z-index: 1; display: grid; min-width: 0; aspect-ratio: 1; place-items: center; align-content: center; gap: .2rem; border: 3px solid var(--blue-200); border-radius: 50%; background: var(--white); color: var(--ink-soft); font-size: clamp(.68rem, 1.6vw, .9rem); font-weight: 900; opacity: .4; transform: scale(.82); transition: opacity .2s ease, transform .2s ease, border-color .2s ease; }
.network-node-flag { font-size: clamp(.9rem, 2.2vw, 1.35rem); filter: grayscale(1); transition: filter .2s ease; }
.network-node.is-connected { border-color: var(--db-color); color: var(--blue-950); opacity: 1; transform: scale(1); box-shadow: 0 0 0 5px rgba(255,255,255,.8); }
.network-node.is-connected .network-node-flag { filter: none; }
.network-diseases { display: flex; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.network-disease { padding: .35rem .75rem; border: 1px solid var(--blue-200); border-radius: 999px; color: var(--ink-soft); opacity: .45; }
.network-disease.is-connected { border-color: var(--phdc-green); background: var(--green-100); color: var(--green-900); font-weight: 800; opacity: 1; }
.network-status { margin-top: 1rem; color: var(--ink); font-weight: 700; }
.network-route-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .4rem .75rem; margin: 1.25rem auto 0; padding: .75rem 1rem; border: 1px solid var(--blue-200); border-radius: 10px; background: rgba(255,255,255,.78); }
.network-route-summary small { width: 100%; color: var(--ink-soft); text-align: center; }

.research-bars-chart { position: relative; display: grid; gap: .85rem; margin-top: 1rem; }
.research-bars-chart--svg { overflow-x: auto; }
.research-bars-chart--svg svg { display: block; width: 100%; min-width: 760px; height: auto; }
.research-svg-category { fill: var(--blue-950); font-size: 14px; font-weight: 850; }
.research-svg-series { fill: var(--ink-soft); font-size: 11px; }
.research-svg-value { fill: var(--blue-950); font-size: 11px; font-weight: 800; }
.research-svg-bar { cursor: help; }
.research-svg-bar:focus, .research-point:focus, .forest-point:focus, [data-chart-tooltip]:focus { outline: 3px solid var(--brand-blue); outline-offset: 3px; }
.research-bar-row { display: grid; grid-template-columns: minmax(125px, .7fr) 3fr; gap: 1rem; align-items: center; }
.research-bar-label { color: var(--ink); font-size: .88rem; font-weight: 800; }
.research-bars { display: grid; gap: .25rem; }
.research-bar-line { display: grid; grid-template-columns: minmax(65px, auto) 1fr 48px; gap: .5rem; align-items: center; }
.research-bar-series { color: var(--ink-soft); font-size: .75rem; }
.research-bar-track { overflow: hidden; height: 10px; border-radius: 999px; background: var(--blue-100); }
.research-bar-fill { display: block; height: 100%; border-radius: inherit; transition: width .25s ease; }
.research-bar-value { color: var(--ink); font-size: .75rem; text-align: right; }

.concordance-result { display: grid; gap: 1rem; }
.concordance-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.concordance-country { display: grid; gap: .8rem; padding: 1rem; border: 1px solid var(--blue-200); border-radius: var(--radius-sm); background: #fbfdff; }
.concordance-country__heading { display: flex; align-items: center; gap: .75rem; }
.concordance-country__heading h3 { margin: 0; }
.concordance-country__heading small { display: block; margin-top: .2rem; color: var(--ink-soft); }
.concordance-difference { margin: .15rem 0 0; padding-top: .65rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .82rem; }
.concordance-row { display: grid; grid-template-columns: 80px 1fr 72px; gap: .75rem; align-items: center; }
.concordance-track { overflow: hidden; height: 24px; border-radius: 6px; background: var(--blue-100); }
.concordance-fill { display: block; min-width: 2px; height: 100%; transition: width .25s ease; }
.concordance-groups { display: grid; gap: .8rem; }
.concordance-group { overflow: hidden; border: 1px solid var(--blue-200); border-radius: var(--radius-sm); background: #fbfdff; }
.concordance-group__summary { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; cursor: pointer; list-style: none; }
.concordance-group__summary::-webkit-details-marker { display: none; }
.concordance-group__summary > span:first-child { display: grid; gap: .2rem; }
.concordance-group__summary strong { color: var(--blue-950); }
.concordance-group__summary small { color: var(--ink-soft); font-size: .78rem; font-weight: 500; }
.concordance-group__count { flex: 0 0 auto; padding: .3rem .55rem; border-radius: 999px; background: var(--blue-100); color: var(--blue-800); font-size: .72rem; font-weight: 850; }
.concordance-group[open] .concordance-group__summary { border-bottom: 1px solid var(--blue-200); background: var(--blue-100); }
.concordance-table-scroll { overflow-x: auto; }
.concordance-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.concordance-table th, .concordance-table td { padding: .75rem .9rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.concordance-table th:last-child, .concordance-table td:last-child { border-right: 0; }
.concordance-table tbody tr:last-child > * { border-bottom: 0; }
.concordance-table thead th { background: var(--white); color: var(--blue-950); }
.concordance-table tbody th { width: 28%; color: var(--blue-950); font-size: .82rem; }
.concordance-table-country { display: inline-flex; align-items: center; gap: .55rem; }
.concordance-pair { min-width: 235px; }
.concordance-route { position: relative; display: grid; grid-template-columns: 66px 1fr; overflow: hidden; align-items: baseline; gap: .4rem; padding: .25rem .45rem; border-radius: 6px; isolation: isolate; }
.concordance-route + .concordance-route { margin-top: .25rem; }
.concordance-route small { position: relative; z-index: 1; color: var(--ink-soft); font-size: .7rem; }
.concordance-route strong { position: relative; z-index: 1; color: var(--blue-950); text-align: right; }
.concordance-route__track { position: absolute; z-index: 0; inset: 0; background: var(--route-rail); }
.concordance-route__fill { display: block; min-width: 2px; height: 100%; background: var(--route-fill); transition: width .25s ease; }
.concordance-route--omop { --route-rail: #eaf3fb; --route-fill: #b8d9f4; }
.concordance-route--sentinel { --route-rail: #eaf6f1; --route-fill: #b8dfcf; }
.concordance-delta { display: block; margin-top: .35rem; color: var(--ink-soft); font-size: .68rem; text-align: right; }

.line-chart-shell { position: relative; overflow-x: auto; }
.line-chart-shell svg { display: block; width: 100%; min-width: 650px; height: auto; }
.chart-gridline { stroke: #c9dbe9; stroke-width: 1.5; }
.chart-axis-label { fill: #4f6476; font-size: 15px; }
.research-line { stroke-linecap: round; stroke-linejoin: round; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1.25rem; margin-top: 1rem; }
.chart-legend-item { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-soft); font-size: .83rem; }
.chart-legend-item::before { width: .75rem; height: .75rem; border-radius: 50%; background: var(--legend-color); content: ""; }

.medication-bars { display: grid; gap: .9rem; }
.medication-row { display: grid; grid-template-columns: minmax(150px, 1fr) 3fr 58px; gap: .75rem; align-items: center; }
.medication-track { overflow: hidden; height: 20px; border-radius: 5px; background: var(--blue-100); }
.medication-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-blue), var(--phdc-green)); transition: width .25s ease; }
.medication-matrix-scroll { overflow-x: auto; border: 1px solid var(--blue-200); border-radius: var(--radius-sm); }
.medication-matrix { display: grid; grid-template-columns: minmax(170px, 1.15fr) repeat(var(--medication-columns), minmax(145px, 1fr)); min-width: 940px; background: var(--white); }
.medication-matrix > * { min-width: 0; padding: .8rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.medication-matrix > *:nth-child(6n) { border-right: 0; }
.medication-matrix__corner, .medication-matrix__database { position: sticky; top: 0; z-index: 2; background: var(--blue-100); color: var(--blue-950); font-weight: 850; }
.medication-matrix__database { display: flex; align-items: center; gap: .45rem; }
.medication-matrix__category { position: sticky; left: 0; z-index: 1; background: #fbfdff; color: var(--blue-950); font-weight: 800; }
.medication-matrix__cell { display: grid; gap: .35rem; align-content: center; }
.medication-matrix__cell strong { color: var(--blue-950); font-size: .82rem; }

.module-pipeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem; }
.module-pipeline .explorer-button { position: relative; display: grid; min-height: 88px; place-items: center; border-radius: 10px; text-align: center; }
.module-pipeline .explorer-button:not(:last-child)::after { position: absolute; z-index: 2; top: 50%; right: -.58rem; color: var(--brand-blue); content: "→"; transform: translateY(-50%); }
.module-new { display: block; color: inherit; font-size: .62rem; opacity: .85; }
.module-detail { margin-top: 1rem; padding: 1.25rem; border-radius: var(--radius-sm); background: var(--blue-100); }
.module-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1rem; }
.module-detail-grid > div { padding: .85rem; border-radius: 9px; background: var(--white); }
.module-detail-grid dt { color: var(--blue-700); font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.module-detail-grid dd { margin: .35rem 0 0; color: var(--ink); }

.code-list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.code-list-card { padding: 1rem; border: 1px solid var(--blue-200); border-top: 4px solid var(--db-color); border-radius: var(--radius-sm); background: #fbfdff; }
.code-chip-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
.code-chip { padding: .25rem .4rem; border: 1px solid var(--blue-200); border-radius: 5px; background: var(--white); color: var(--blue-900); }
.code-chip--concept { border-color: var(--phdc-green); background: #e8f3ee; color: #1f5a43; font-weight: 700; }
.harmonized-concept { display: block; margin: .5rem 0 .15rem; color: var(--green-800); font-size: .75rem; font-weight: 900; text-transform: uppercase; }

.harmonization-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.harmonization-tabs button { min-height: 68px; padding: .7rem; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--white); color: var(--blue-900); font: inherit; font-weight: 800; cursor: pointer; }
.harmonization-tabs button span { display: block; color: var(--brand-blue); font-size: .72rem; letter-spacing: .1em; }
.harmonization-tabs button[aria-selected="true"] { background: var(--brand-blue); color: var(--white); }
.harmonization-tabs button[aria-selected="true"] span { color: var(--on-dark-accent); }
.harmonization-panel { margin-top: .75rem; padding: 1.25rem; border-radius: var(--radius-sm); background: linear-gradient(145deg, var(--blue-100), var(--green-100)); }
.harmonization-panel[hidden] { display: none; }
.record-transform { display: grid; gap: .25rem; margin-top: 1rem; padding: 1rem; border-left: 4px solid var(--brand-blue); border-radius: 0 9px 9px 0; background: rgba(255,255,255,.78); }
.record-transform span { color: var(--blue-700); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.record-transform strong { color: var(--blue-950); font-size: 1.05rem; }
.record-transform small { color: var(--ink-soft); }
.stewardship-note { margin: 1rem 0 0; color: var(--ink-soft); font-size: .82rem; }
.mapping-emphasis > * { background: var(--amber-100) !important; }
.mapping-emphasis td small { display: block; margin-top: .35rem; color: #704500; font-weight: 700; }
.route-table-widget[data-route-active="omop"] .route-col-sentinel,
.route-table-widget[data-route-active="sentinel"] .route-col-omop { display: none; }
.route-table-widget[data-route-active="both"] tbody .route-col-omop { background: #eef6ff; }
.route-table-widget[data-route-active="both"] tbody .route-col-sentinel { background: #eef8f5; }

.partner-map-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.partner-map-layout.has-detail { grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr); }
.partner-map-stage { position: relative; min-height: 560px; overflow: hidden; border: 1px solid var(--blue-200); border-radius: var(--radius-sm); background: linear-gradient(150deg, #d8eef4, #cbe5ed); }
.partner-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.partner-map-gridline { stroke: rgba(255,255,255,.55); stroke-width: 1; stroke-dasharray: 4 8; }
.partner-land { fill: #f7f5ee; stroke: #a9c0c4; stroke-width: 2; stroke-linejoin: round; }
.partner-land--focus { fill: #fffdf8; stroke: #879fa5; }
.partner-island { fill: #f7f5ee; stroke: #a9c0c4; stroke-width: 1.5; }
.partner-map-label { fill: #526b75; font-size: 12px; font-weight: 850; letter-spacing: .08em; }
.map-country-pin { position: absolute; z-index: 3; display: inline-flex; min-height: 52px; align-items: center; gap: .4rem; padding: .35rem .45rem; border: 2px solid var(--phdc-green); border-radius: 11px; background: var(--white); color: var(--blue-900); font: inherit; font-size: .78rem; font-weight: 900; cursor: pointer; transform: translate(-50%, -50%); box-shadow: 0 8px 18px rgba(6,43,82,.18); }
.map-country-name { white-space: nowrap; }
.map-country-count { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 50%; background: var(--phdc-green); color: var(--white); font-size: .72rem; }
.map-country-pin[aria-pressed="true"] { border-color: var(--brand-blue); background: var(--brand-blue); color: var(--white); }
.map-country-pin[aria-pressed="true"] .map-country-count { background: var(--white); color: var(--brand-blue); }
.partner-map-detail { position: sticky; top: calc(var(--header-height, 68px) + 1rem); max-height: calc(100vh - var(--header-height, 68px) - 2rem); overflow-y: auto; padding: 1.1rem 1.25rem; border: 1px solid var(--blue-200); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
.partner-map-detail[hidden] { display: none; }
.partner-map-detail__heading { display: flex; align-items: center; gap: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.partner-map-detail__heading h3 { margin: 0; }
.partner-map-detail__heading small { color: var(--ink-soft); }
.partner-map-detail h3, .partner-map-detail h4 { color: var(--blue-950); }
.partner-map-detail h4 { margin: 1rem 0 .4rem; }
.partner-map-detail li { color: var(--ink-soft); }
.map-detail-close { min-height: 44px; margin-left: auto; padding: .45rem .7rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--white); color: var(--blue-800); font: inherit; font-size: .75rem; font-weight: 850; cursor: pointer; }
.map-detail-close:hover { border-color: var(--brand-blue); background: var(--blue-100); }
.map-db-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin-top: .75rem; }
.map-db-chip { display: grid; gap: .15rem; padding: .55rem .65rem; border-left: 4px solid var(--db-color); border-radius: 5px; background: var(--blue-100); color: var(--blue-950); font-size: .8rem; }
.map-db-chip span { color: var(--ink-soft); font-size: .72rem; }
.map-cohort-controls { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .75rem; }
.map-cohort-controls .explorer-button { min-height: 38px; padding: .45rem .65rem; font-size: .76rem; }
.map-cohort-list { display: grid; gap: .55rem; }
.map-cohort-card { display: grid; gap: .2rem; padding: .65rem .75rem; border: 1px solid var(--blue-200); border-left: 4px solid var(--db-color); border-radius: 8px; background: #fbfdff; }
.map-cohort-card__heading { display: flex; justify-content: space-between; gap: .75rem; color: var(--blue-950); }
.map-cohort-card__heading span { color: var(--ink-soft); font-size: .72rem; }
.map-cohort-n { color: var(--blue-900); font-weight: 850; }
.map-cohort-card small { color: var(--ink-soft); }

.chart-tooltip { position: absolute; z-index: 20; max-width: min(320px, calc(100vw - 2rem)); padding: .55rem .7rem; border-radius: 7px; background: var(--blue-950); color: var(--white); font-size: .76rem; font-weight: 700; line-height: 1.35; pointer-events: none; box-shadow: 0 9px 25px rgba(6,43,82,.25); }
.chart-tooltip--fixed { position: fixed; }
.chart-tooltip[hidden] { display: none; }
.provisional-note { margin: 1rem 0; padding: .8rem 1rem; border-left: 4px solid var(--amber-700); border-radius: 0 8px 8px 0; background: var(--amber-100); color: #5b3a00; font-size: .86rem; }
.forest-chart-shell { position: relative; overflow-x: auto; }
.forest-chart-shell svg { display: block; width: 100%; min-width: 820px; height: auto; }
.forest-controls .forest-database-button { display: inline-flex; align-items: center; gap: .45rem; border: 2px solid var(--db-color); background: var(--white); color: var(--blue-950); opacity: .52; }
.forest-controls .forest-database-button:hover { background: color-mix(in srgb, var(--db-color) 8%, white); opacity: .82; }
.forest-controls .forest-database-button[aria-pressed="true"] { background: color-mix(in srgb, var(--db-color) 13%, white); color: var(--blue-950); opacity: 1; box-shadow: inset 0 -3px 0 var(--db-color); }
.forest-point { cursor: help; }

.transport-chart-shell { overflow-x: auto; }
.transport-chart-shell svg { display: block; width: 100%; min-width: 780px; height: auto; }
.forest-reference { stroke: #516373; stroke-width: 2; stroke-dasharray: 8 7; }
.forest-row-line { stroke: #d3e1eb; stroke-width: 1.5; stroke-dasharray: 3 7; }
.forest-outcome-label { fill: #1d344e; font-size: 15px; font-weight: 700; }
.forest-axis-title { fill: #1d344e; font-size: 17px; font-weight: 800; }
.transport-protocol-table td { min-width: 280px; }

body[data-page="cases"] .case-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-tile--transport { border-top-color: var(--phdc-green); }
.case-tile--visualization { border-top-color: var(--chart-cdars); }
.cdm-showcase img { display: block; width: 100%; height: auto !important; max-height: none; object-fit: contain; aspect-ratio: auto; }

/* ============================================================
   Case cards — consistent two-column layout
   ============================================================ */

.case-index {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .case-index {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 1020px) {
  .hero .wrap { min-height: 0; grid-template-columns: minmax(0, 1.4fr) minmax(180px, .6fr); }
  .page-hero, .page-hero .wrap { min-height: 220px; }
  .mascot-enabled .page-hero .wrap { padding-right: 0; }
  .cohort-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .module-pipeline { grid-template-columns: repeat(3, 1fr); }
  .module-pipeline .explorer-button::after { display: none; }
  .code-list-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar-map-heading { align-items: flex-start; flex-direction: column; }
  .partner-map-layout.has-detail { grid-template-columns: 1fr; }
  .partner-map-detail { position: static; max-height: none; }
  body[data-page="cases"] .case-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .hero .wrap { min-height: 0; grid-template-columns: 1fr; padding-block: 2rem; }
  .hero-phdc-mark { width: min(80%, 280px); }
  .hero-ncku-mark { width: min(80%, 280px); }
  .page-hero, .page-hero .wrap { min-height: 0; }
  .page-hero .wrap { padding-block: 1.75rem 2rem; }
  .page-hero h1 { font-size: clamp(2.05rem, 10vw, 2.75rem); }
  .page-hero .lego-scene { display: none; }
  .pillar-navigator, body[data-page="cases"] .case-index, .partner-map-layout { grid-template-columns: 1fr; }
  .pillar-link { min-height: 0; }
  .pillar-connector { max-width: none; padding-block: .15rem; }
  .pillar-connector::before { width: 2px; height: 24px; margin: 0 auto .35rem; background: linear-gradient(var(--on-dark-accent), var(--white)); }
  .pillar-connector::after { top: 18px; right: calc(50% - 4px); transform: rotate(135deg); }
  .pillar-quick-links { grid-template-columns: 1fr; }
  .cohort-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .network-stage { padding-inline: .5rem; }
  .network-node-rail { gap: .3rem; }
  .network-node { font-size: .6rem; }
  .research-bar-row { grid-template-columns: 1fr; gap: .3rem; }
  .module-pipeline, .module-detail-grid, .harmonization-tabs { grid-template-columns: 1fr; }
  .code-list-grid { grid-template-columns: 1fr; }
  .partner-map-stage { min-height: 0; padding-top: 400px; overflow: hidden; }
  .partner-map-svg { height: 400px; }
  .partner-map-detail { width: auto; max-height: none; }
  .medication-row { grid-template-columns: 1fr 54px; }
  .medication-row > span:first-child { grid-column: 1 / -1; }
  .concordance-row { grid-template-columns: 70px 1fr 64px; }
  .concordance-comparison { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .cohort-summary-grid { grid-template-columns: 1fr; }
  .network-diseases { flex-wrap: wrap; }
  .map-country-pin { min-width: 92px; font-size: .72rem; }
  .map-country-name { display: none; }
  .network-country-card:not(:last-child)::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .network-node, .network-node-flag, .network-stage > *, .research-bar-fill, .concordance-fill, .medication-fill, .pillar-link { transition: none; }
}

/* ------------------------------------------------ architecture strip */

/* Five chapters read left to right on wide screens and stack on narrow ones.
   Phase 3 replaces each chapter's body with an interactive inline SVG; the
   markup and colour roles stay the same so the upgrade is contained. */
.arch-strip {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 1rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  counter-reset: none;
  list-style: none;
}
.arch-chapter {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.15rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-blue);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.arch-chapter__index {
  color: var(--ink-soft);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .12em;
}
.arch-chapter h3 { margin: .3rem 0 .35rem; font-size: 1.12rem; }
.arch-chapter__lead { margin: 0 0 .6rem; color: var(--blue-900); font-weight: 650; }
.arch-chapter p { font-size: .92rem; }
.arch-chapter__link { margin-top: auto; padding-top: .7rem; }
.arch-chapter__link a { font-size: .88rem; font-weight: 650; }

/* Semantic roles: structure, preparation, evidence — one hue per stage group
   rather than a new accent per box. */
.arch-chapter--frame { border-top-color: var(--ink-soft); }
.arch-chapter--assess { border-top-color: var(--brand-blue); }
.arch-chapter--implement { border-top-color: var(--brand-blue); }
.arch-chapter--interpret { border-top-color: var(--green-600); }
.arch-chapter--integrate { border-top-color: var(--green-700); }

/* The falls-short branch is scientifically load-bearing, so it gets its own
   band rather than a footnote under the strip. */
.arch-branch {
  margin-top: 1.5rem;
  padding: clamp(1.3rem, 3vw, 2rem);
  border: 1px solid var(--amber-100, #eedab7);
  border-left: 5px solid var(--amber-700, #854f0b);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #fffaf1;
}
.arch-branch h3 { margin: .2rem 0 .6rem; }
.arch-branch p:last-child { margin-bottom: 0; }

.pipeline--compact li p { font-size: 1.15rem; }
.pipeline--compact li p a { font-weight: 650; white-space: nowrap; }

@media (max-width: 380px) {
  .pipeline--compact li p a { white-space: normal; }
}

@media (max-width: 1080px) {
  .arch-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .arch-strip { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------- home architecture rail */

/* A compact read-only preview of the five chapters. The walk-through itself
   lives on How; this only has to make the shape legible and route there. */
.arch-rail {
  display: grid;
  margin: 0 0 1rem;
  padding: 0;
  gap: .75rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
}
.arch-rail li {
  position: relative;
  display: grid;
  align-content: start;
  padding: 1rem .95rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-blue);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.arch-rail li:nth-child(4) { border-top-color: var(--green-600); }
.arch-rail li:nth-child(5) { border-top-color: var(--green-700); }
.arch-rail span { color: var(--ink-soft); font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.arch-rail strong { margin: .25rem 0 .3rem; color: var(--blue-900); font-size: 1.02rem; }
.arch-rail small { color: var(--ink-soft); font-size: .82rem; line-height: 1.45; }
.arch-rail__note {
  max-width: 70ch;
  margin: 0 0 1.4rem;
  padding-left: .9rem;
  border-left: 3px solid var(--amber-700, #854f0b);
  color: var(--ink-soft);
  font-size: .92rem;
}

@media (max-width: 1080px) { .arch-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .arch-rail { grid-template-columns: minmax(0, 1fr); } }

/* The footer reserves a lane for the mascot parade. Pages that opt out of the
   mascots (case studies, Methods, the visualization app) would otherwise show
   an empty 132 px band, so the lane collapses when nothing is injected. */
.lego-parade-slot:empty { min-height: 0; }


/* ------------------------------------------ evidence-preparation flowchart */

/* One complete pathway rather than five tabbed fragments: the point of the
   diagram is that the process is continuous, and splitting it hid that.
   Semantic roles only — blue for programme steps, amber for the evidence
   facets and the deliverables frame, terracotta for the second-best route,
   red for the feedback edge that returns to step 1. */
.arch {
  --f-step: #1f5fa9;
  --f-step-fill: #c9dcf3;
  --f-facet: #d8a32a;
  --f-line: #2a2a2a;
  --f-pass: #2f7d45;
  --f-fail: #cf2b2b;
  --f-fb: #b5651d;
  --f-lane: #cfd8e2;
}

.arch__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 1.5rem; }
.arch__stage { min-width: 0; }
.arch-figure { margin: 0; }

.arch-svg {
  display: block; width: 100%; height: auto;
  padding: 1rem .5rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white);
  font-family: inherit;
}
.arch--nopanel .arch__body { grid-template-columns: minmax(0, 1fr); }

/* ---- text ---- */
.arch-svg .at { fill: #0d2f57; font-size: 15px; font-weight: 700; text-anchor: middle; }
.arch-svg .as { fill: #0d2f57; font-size: 12.5px; text-anchor: middle; }
.arch-svg .an { fill: #8a6410; font-size: 12px; font-weight: 800; text-anchor: middle; }
.arch-svg .ab { fill: #8a6410; font-size: 13px; font-weight: 700; text-anchor: middle; }
.arch-svg .ak { fill: var(--ink-soft); font-size: 10.5px; text-anchor: middle; }
.arch-svg .ap { fill: #6b4a05; font-size: 9.5px; font-weight: 700; text-anchor: middle; }
.arch-svg .af { fill: #14304f; font-size: 13px; font-weight: 650; text-anchor: middle; }
.arch-svg .ag { font-size: 12px; font-weight: 800; text-anchor: middle; }
.arch-svg .ag--pass { fill: var(--f-pass); }
.arch-svg .ag--fail { fill: var(--f-fail); }

/* ---- edges ---- */
.arch-edge { fill: none; stroke: var(--f-line); stroke-width: 1.6; }
.arch-edge--pass { stroke: var(--f-pass); stroke-width: 2; }
.arch-edge--fail { stroke: var(--f-fail); stroke-width: 2; }
.arch-head { fill: none; stroke: context-stroke; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.arch-head--fail { stroke: var(--f-fail); }

/* ---- frames ---- */
.arch-deliverables { fill: none; stroke: var(--f-facet); stroke-width: 2; stroke-dasharray: 9 6; }
.arch-badge { fill: #fdf6e6; stroke: var(--f-facet); stroke-width: 1.4; }
.arch-badge-box { fill: var(--white); stroke: var(--f-facet); stroke-width: 1.6; }
.arch-lane { fill: #fbfcfd; stroke: var(--f-lane); stroke-width: 1; }
.arch-pill { fill: #fbbf3b; stroke: #c78f10; stroke-width: .8; }
.arch-tag { fill: var(--white); stroke-width: 1.4; }
.arch-tag--pass { stroke: var(--f-pass); }
.arch-tag--fail { stroke: var(--f-fail); }

/* ---- nodes ---- */
.arch-node { cursor: pointer; }
.arch-node > rect { stroke-width: 1.6; }
.arch-n--step > rect { fill: var(--f-step-fill); stroke: var(--f-step); }
.arch-n--facet > rect { fill: var(--white); stroke: var(--f-facet); }
.arch-n--result > rect { fill: var(--f-step-fill); stroke: var(--f-step); }
.arch-n--fb > rect { fill: var(--f-step-fill); stroke: var(--f-fb); }
.arch-n--key > rect { stroke-width: 2.6; }

.arch-node:hover > rect,
.arch-node:focus-visible > rect,
.arch-node.is-selected > rect { stroke-width: 3; }
.arch-node:focus { outline: none; }
.arch-node:focus-visible > rect { stroke: var(--brand-blue); }
.arch-node.is-selected > rect { filter: drop-shadow(0 2px 7px rgba(8, 40, 74, .28)); }

.gear-icon {
  color: #2f69ad;
  fill: #dce9f7;
}

.gear-body {
  fill: inherit;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.gear-hole {
  fill: #fff;
  stroke: currentColor;
  stroke-width: 1.5;
}

.gear--blue {
  color: #2f6098;
  --gear-fill: #4f86c6;
}

.gear--purple {
  color: #6a3dab;
  --gear-fill: #9665d3;
}

.gear--orange {
  color: #b5730d;
  --gear-fill: #efa83b;
}

.gear--pink {
  color: #c45a68;
  --gear-fill: #f6dde0;
}
.tool-icon {
  color: #2f6098;
  --tool-fill: #6ea0d8;
}

.tool--blue {
  color: #2f6098;
  --tool-fill: #5a88c7;
}

.tool--purple {
  color: #6f43b3;
  --tool-fill: #9b72d8;
}

.tool--orange {
  color: #b97812;
  --tool-fill: #e8a33d;
}

/* ---- per-partner marks: one shape and hue per data partner ---- */
.sh--a { fill: #4a7fc1; stroke: #24528f; stroke-width: 1.2; }
.sh--b { fill: #9b6bd4; stroke: #6a3fa8; stroke-width: 1.2; }
.sh--c { fill: #e8a33d; stroke: #b57612; stroke-width: 1.2; }
.sh-l--a { stroke: #4a7fc1; stroke-width: 1.8; }
.sh-l--b { stroke: #9b6bd4; stroke-width: 1.8; }
.sh-l--c { stroke: #e8a33d; stroke-width: 1.8; }
.sh-l--d { stroke: #c45a68; stroke-width: 1.8; }
.cdm--a { fill: #4a7fc1; stroke: #24528f; stroke-width: 1.2; }
.cdm--b { fill: #9b6bd4; stroke: #6a3fa8; stroke-width: 1.2; }
.cdm--c { fill: #e8a33d; stroke: #b57612; stroke-width: 1.2; }
.gear { fill: #f0f4f9; stroke: #8aa0b8; stroke-width: 1.4; }
.gear--k { fill: #f6dde0; stroke: #c05a68; stroke-width: 1.6; }
.doc { fill: var(--white); stroke: #6f7d8c; stroke-width: 1.1; }
.doc-l { stroke: #6f7d8c; stroke-width: 1; }

/* ---- legend ---- */
.arch-legend {
  display: flex; flex-wrap: wrap;
  margin: .9rem 0 0; padding: 0;
  gap: .4rem 1.3rem;
  color: var(--ink-soft); font-size: .82rem;
  list-style: none;
}
.arch-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.arch-legend__k { width: 15px; height: 12px; border-radius: 3px; }
.arch-legend__k--step { border: 1.5px solid #1f5fa9; background: #c9dcf3; }
.arch-legend__k--facet { border: 1.5px solid #d8a32a; background: #fff; }
.arch-legend__k--fb { border: 1.5px solid #b5651d; background: #c9dcf3; }
.arch-legend__k--fail { height: 0; border-top: 2px solid #cf2b2b; border-radius: 0; }
.arch-legend__k--shape { border: 0; background: linear-gradient(90deg, #4a7fc1 33%, #9b6bd4 33% 66%, #e8a33d 66%); }

/* ---- side panel ---- */
.arch__panel {
  position: sticky; top: 88px;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-blue);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.arch__panel-eyebrow { margin: 0 0 .3rem; color: var(--ink-soft); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.arch__panel h3 { margin: 0 0 .55rem; font-size: 1.06rem; }
.arch__panel p { font-size: .92rem; }
.arch__panel-case {
  margin-top: .8rem; padding-left: .8rem;
  border-left: 3px solid var(--green-600);
  color: var(--ink-soft); font-size: .86rem;
}
.arch__panel-link { margin: .9rem 0 0; }
.arch__panel-link a { font-size: .9rem; font-weight: 650; }

@media (max-width: 1024px) {
  .arch__body { grid-template-columns: minmax(0, 1fr); }
  .arch__panel { position: static; }
}
@media (max-width: 720px) {
  /* The pathway keeps its own horizontal scroll rather than shrinking the
     labels below a readable size. */
  .arch__stage { overflow-x: auto; }
  .arch-svg { min-width: 680px; }
}
@media (prefers-reduced-motion: reduce) {
  .arch-node { transition: none; }
}

/* Remediation boxes under the second-best route, and the dashed edge showing
   that a second-best design still carries weight in the final totality. */
.arch-remedy { fill: #fdf1ea; stroke: #b5651d; stroke-width: 1.3; }
.arch-svg .ar { fill: #7a3f12; font-size: 14px; font-weight: 650; text-anchor: middle; }
.arch-svg .as--fb { fill: #8a4a1c; }
.arch-edge--weight { stroke: #b5651d; stroke-width: 1.3; stroke-dasharray: 5 4; }
.arch-head--weight { stroke: #b5651d; stroke-width: 1.5; }
/* Compact desktop home hero */
/* ============================================================
   Compact hero system
   ============================================================ */

/* Desktop */
@media (min-width: 1021px) {

  /* ---------- Home hero ---------- */
  .hero .wrap {
    min-height: 0;
    padding-block: 2.25rem;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 4vw, 3.65rem);
    line-height: 1.08;
  }

  .hero .kicker {
    margin-bottom: 1rem;
  }

  .hero .tagline {
    margin-top: .5rem;
  }

  .hero .actions {
    margin-top: 1.25rem;
  }


  /* ---------- Inner-page hero ---------- */
  .page-hero,
  .page-hero .wrap {
    min-height: 0;
  }

  .page-hero .wrap {
    padding-block: 2rem 2.25rem;
  }

  .page-hero h1 {
    font-size: clamp(2.25rem, 3.5vw, 3.1rem);
    line-height: 1.1;
  }

  .page-hero p {
    margin-top: .65rem;
  }

  .page-hero .crumb {
    margin-bottom: .7rem;
  }
}

.org-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .45rem 0 .8rem;
}

.org-title h3 {
  margin: 0;
}

.org-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex: 0 0 auto;
}

#workflow .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 2rem;
  width: 100%;
  max-width: none;
}

#workflow .section-heading h2 {
  margin: 0;
  max-width: none;
}

#workflow .section-heading .actions {
  margin: 0;
  justify-self: end;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  #workflow .section-heading {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  #workflow .section-heading .actions {
    justify-self: start;
  }
}
/* ------------------------------------------------- common-data-model timeline */

/* The timeline is a wide figure with outlined text, so it is given the full
   content width and a light frame rather than being cropped into a card. */
.cdm-timeline {
  margin: 2rem 0 1.5rem;
}
.cdm-timeline img {
  display: block;
  width: 100%;
  height: auto;
  padding: clamp(.75rem, 2vw, 1.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.cdm-timeline figcaption {
  max-width: 78ch;
  margin-top: .85rem;
  color: var(--ink-soft);
  font-size: .92rem;
}
.cdm-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 3.5rem;
  align-items: start;
  margin-bottom: 2rem;
}

.cdm-intro__main {
  max-width: 760px;
}

.cdm-intro__main h2 {
  margin: .35rem 0 1rem;
  max-width: 680px;
}

.cdm-intro__lead {
  margin: 0;
  max-width: 720px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-muted);
}

.cdm-intro__why {
  padding: 1.4rem 1.5rem;
  border-left: 3px solid var(--blue-500);
  background: rgba(30, 112, 170, .045);
  border-radius: 0 12px 12px 0;
}

.cdm-intro__label {
  margin: 0 0 .6rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-700);
}

.cdm-intro__why > p:not(.cdm-intro__label) {
  margin: 0;
  line-height: 1.65;
  color: var(--text-muted);
}

.cdm-intro__outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1rem;
}

.cdm-intro__outcomes span {
  padding: .38rem .65rem;
  border: 1px solid rgba(30, 112, 170, .16);
  border-radius: 999px;
  background: #fff;
  font-size: .78rem;
  font-weight: 700;
  color: var(--blue-800);
}

@media (max-width: 760px) {
  .cdm-intro {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .cdm-intro__why {
    border-left-width: 3px;
  }
}

/* Large-desktop adaptation: preserve the tuned 1440px layout, then let the
   existing grid, figures, and navigation use more of wider displays. */
@media (min-width: 1600px) {
  :root {
    --max-width: min(78vw, 1500px);
  }
}

@media (min-width: 1800px) {
  html {
    font-size: 106.25%;
  }

  body {
    font-size: 18px;
  }
}

/* Inner-page hero copy spans the full content width now that the right-side
   mascot illustration is gone; the "last updated" pill keeps its own width. */
.page-hero h1,
.page-hero p:not(.page-updated) { max-width: none; }

/* ============================================================
   Data readiness questionnaire (mSCDM 8.1.0)
   ============================================================ */
#readiness-check {
  --rq-available: #2f7a55;
  --rq-derivable: #b7791f;
  --rq-missing: #b44242;
  --rq-unknown: #5c7285;
  --rq-idle: #dbe4ea;
  --rq-hairline: #e3ebf0;
  --rq-pin-top: calc(var(--header-h, 67px) + var(--subnav-h, 52px) + 1rem);
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shared status chips */
.rq-status { display: inline-flex; align-items: center; padding: .2rem .65rem; border-radius: 999px; background: #eef2f5; color: #3f5163; font-size: .78rem; font-weight: 750; white-space: nowrap; }
.rq-status--ready { background: #e3f1e9; color: #1f5a3d; }
.rq-status--derivable { background: #fbefd9; color: #6d4510; }
.rq-status--not-ready { background: #fde4e4; color: #8f2424; }
.rq-status--idle { background: transparent; color: var(--ink-soft); font-weight: 600; }

/* ---------------------------------------------------- guide: one shared grid
   Intro | answer key on top, judging ladder | scoring below. Both rows share
   the same column split, so every edge lines up. */
.rq-guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: 1.5rem 1.5rem;
  align-items: stretch;
  margin-bottom: 2.25rem;
}
.rq-intro__text { align-self: start; margin-bottom: 0; max-width: none; }
.rq-intro__note { padding-left: .9rem; border-left: 2px solid var(--blue-200); color: var(--ink-soft); font-size: .92rem; }
.rq-legend, .rq-rules__ladder, .rq-rules__score {
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.rq-legend h3, .rq-rules__ladder h3, .rq-rules__score h3 { margin: 0 0 .35rem; color: var(--blue-900); font-size: 1rem; }
.rq-legend h3 { margin-bottom: 1rem; }

/* Answer key: the same dot-and-label chip as the answer buttons. */
.rq-legend ul { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: space-evenly; gap: 1.1rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.rq-legend__item { display: grid; align-content: start; justify-items: start; gap: .45rem; margin: 0 !important; }
.rq-legend__chip { display: flex; min-width: 8.5rem; min-block-size: 36px; align-items: center; justify-content: center; gap: .4rem; padding: .25rem .5rem; border: 1px solid #c5d4de; border-radius: 6px; background: var(--white); color: var(--ink); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.rq-legend__chip::before { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--rq-tone); content: ""; }
.rq-legend__item > span:last-child { color: var(--ink-soft); font-size: .86rem; line-height: 1.45; }

/* Judging ladder: four rules read left to right; the first that applies wins. */
.rq-rules__lead { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: .88rem; line-height: 1.5; }
.rq-ladder { display: grid; flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.rq-ladder li { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: .9rem; margin: 0 !important; padding: 1rem; border-radius: 10px; background: #f4f7fa; }
.rq-ladder li + li::before {
  position: absolute;
  top: 50%;
  left: -1.1rem;
  width: 1.1rem;
  height: 1.1rem;
  background: no-repeat center / .8rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%2397b0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  content: "";
  transform: translateY(-50%);
}
.rq-ladder p { margin: 0; color: var(--ink); font-size: .88rem; line-height: 1.45; }
.rq-ladder .rq-status { align-self: flex-start; max-width: 100%; white-space: normal; line-height: 1.3; }
/* Four cards need room; when the box is narrow (zoom, mid widths) use 2 × 2. */
.rq-rules__ladder { container-type: inline-size; }
@container (max-width: 700px) {
  .rq-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rq-ladder li + li::before { display: none; }
}
@container (max-width: 380px) {
}

/* Scoring bars */
.rq-weights { display: grid; gap: .55rem; margin: .5rem 0 1rem; }
.rq-weights div { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); align-items: center; gap: .75rem; }
.rq-weights dt { color: var(--ink); font-size: .86rem; font-weight: 650; }
.rq-weights dd { display: grid; grid-template-columns: minmax(0, 1fr) 2.6rem; align-items: center; gap: .5rem; margin: 0; }
.rq-weights__bar { position: relative; display: block; height: 8px; overflow: hidden; border-radius: 4px; background: var(--rq-idle); }
.rq-weights__bar::after { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--rq-unknown); content: ""; }
.rq-weights__bar--available::after { background: var(--rq-available); }
.rq-weights__bar--derivable::after { background: var(--rq-derivable); }
.rq-weights b { color: var(--ink); font-size: .82rem; font-variant-numeric: tabular-nums; text-align: right; }
.rq-rules__score > p { margin: auto 0 0; color: var(--ink-soft); font-size: .86rem; line-height: 1.5; }

/* ---------------------------------------------------- table groups */
.rq-form { display: grid; gap: 2rem; }
.rq-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .7rem; }
.rq-group__head h3 { margin: 0; color: var(--blue-900); font-size: 1.1rem; }
.rq-group__head p { margin: 0; color: var(--ink-soft); font-size: .86rem; }
.rq-group__list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.rq-table + .rq-table { border-top: 1px solid var(--rq-hairline); }
.rq-table:first-child .rq-table__summary { border-radius: var(--radius) var(--radius) 0 0; }
.rq-table:last-child:not([open]) .rq-table__summary { border-radius: 0 0 var(--radius) var(--radius); }
.rq-table__summary { display: grid; grid-template-columns: 1.25rem minmax(9rem, 1fr) minmax(9rem, 13rem) 11.5rem; align-items: center; gap: 1.25rem; min-block-size: 64px; padding: .75rem 1.25rem; cursor: pointer; list-style: none; transition: background-color .15s ease; }
.rq-table__summary::-webkit-details-marker { display: none; }
.rq-table__summary:hover { background: #f5f9fc; }
.rq-table__summary:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: -3px; }
.rq-table[open] > .rq-table__summary { background: #f2f7fb; box-shadow: inset 0 -1px 0 var(--rq-hairline); }
.rq-table__chevron { display: grid; place-items: center; color: var(--blue-700); transition: transform .18s cubic-bezier(.2, .7, .2, 1); }
.rq-table__chevron svg { width: 1rem; height: 1rem; }
.rq-table[open] .rq-table__chevron { transform: rotate(90deg); }
.rq-table__title { display: grid; gap: .1rem; min-width: 0; }
.rq-table__title strong { color: var(--blue-900); font-size: 1rem; }
.rq-table__title small { color: var(--ink-soft); font-size: .8rem; }
.rq-table__meter { display: grid; gap: .35rem; }
.rq-mix { display: flex; gap: 2px; height: 6px; overflow: hidden; border-radius: 3px; background: var(--rq-idle); }
.rq-mix__seg { flex: 1 1 0; background: var(--rq-idle); }
.rq-mix__seg--available { background: var(--rq-available); }
.rq-mix__seg--derivable { background: var(--rq-derivable); }
.rq-mix__seg--not-available { background: var(--rq-missing); }
.rq-mix__seg--not-known { background: var(--rq-unknown); }
.rq-table__progress { color: var(--ink-soft); font-size: .76rem; font-variant-numeric: tabular-nums; }
.rq-table__summary .rq-status { justify-self: end; }

.rq-table__intro { padding: 1.1rem 1.25rem .4rem; }
.rq-table__description { color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }
.rq-table__description p { margin: 0 0 .35rem; }
.rq-table__description p:last-child { margin-bottom: 0; }
.rq-table__description ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.rq-table__description li + li { margin-top: .25rem; }
.rq-table__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .6rem 1.25rem .8rem; color: var(--ink-soft); font-size: .82rem; }
.rq-link-button { padding: .35rem .1rem; border: 0; background: none; color: var(--blue-700); cursor: pointer; font: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rq-link-button:hover { color: var(--blue-900); }
.rq-link-button:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------- variable rows */
.rq-table__vars { container-type: inline-size; }
.rq-var { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: 1rem 1.25rem; border-top: 1px solid var(--rq-hairline); }
.rq-var__text { display: grid; gap: .4rem; min-width: 0; }
.rq-var__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rq-var__name { color: var(--blue-900); font-size: .98rem; font-weight: 800; }
.rq-var__type { color: var(--ink-soft); font-size: .78rem; font-variant-numeric: tabular-nums; }
.rq-tag { display: inline-block; padding: .08rem .45rem; border-radius: 4px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.rq-tag--essential { background: #fde4e4; color: #8f2424; }
.rq-var__definition { color: var(--ink); font-size: .9rem; line-height: 1.55; }
.rq-var__definition p { margin: 0 0 .3rem; }
.rq-var__definition p:last-child { margin-bottom: 0; }
.rq-var__spec summary { display: inline-flex; min-block-size: 32px; align-items: center; color: var(--blue-700); cursor: pointer; font-size: .82rem; font-weight: 700; }
.rq-var__spec dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: .35rem 0 0; padding: .75rem .9rem; border-radius: 6px; background: #f5f8fa; font-size: .84rem; }
.rq-var__spec dt { color: var(--ink-soft); font-weight: 700; }
.rq-var__spec dd { margin: 0; }
.rq-var__values p { margin: 0 0 .2rem; }
.rq-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; align-self: start; }
@container (min-width: 780px) {
  .rq-var { grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.5rem; }
  .rq-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 460px) {
  .rq-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rq-var__spec dl { grid-template-columns: 1fr; }
}
.rq-choice { position: relative; margin: 0; }
.rq-choice input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.rq-choice span { display: flex; min-block-size: 44px; align-items: center; justify-content: center; gap: .4rem; padding: .3rem .5rem; border: 1px solid #c5d4de; border-radius: 6px; background: var(--white); color: var(--ink); font-size: .85rem; font-weight: 700; text-align: center; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.rq-choice span::before { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--rq-tone); content: ""; }
.rq-choice--available { --rq-tone: var(--rq-available); }
.rq-choice--derivable { --rq-tone: var(--rq-derivable); }
.rq-choice--not-available { --rq-tone: var(--rq-missing); }
.rq-choice--not-known { --rq-tone: var(--rq-unknown); }
.rq-choice:hover span { border-color: var(--rq-tone); }
.rq-choice input:focus-visible + span { outline: 3px solid var(--brand-blue); outline-offset: 2px; }
.rq-choice input:checked + span { border-color: var(--rq-tone); background: var(--rq-tone); color: #fff; }
.rq-choice input:checked + span::before { background: #fff; }
.rq-note { display: grid; gap: .4rem; padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--rq-hairline); color: var(--ink); font-size: .86rem; font-weight: 700; }
.rq-note textarea { width: 100%; padding: .6rem .75rem; border: 1px solid #c5d4de; border-radius: 6px; font: inherit; font-weight: 400; resize: vertical; }

/* ---------------------------------------------------- summary panel */
.rq-summary { position: static; display: grid; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-top-width: 1px; border-radius: var(--radius); background: var(--white); box-shadow: 0 10px 28px rgba(6, 43, 82, .07); }
.rq-summary__live { display: grid; }
.rq-summary h4 { margin: 0 0 .35rem; color: var(--blue-900); font-size: .9rem; }
.rq-summary p { margin: 0; }
.rq-score { display: grid; gap: .7rem; padding: 1.2rem 1.25rem 1.1rem; background: #f2f6f9; }
.rq-score--ready { background: #e8f3ed; }
.rq-score--derivable { background: #fbf1df; }
.rq-score--not-ready { background: #fcebea; }
.rq-score__heading { margin: 0; color: var(--blue-900); font-size: .95rem; }
.rq-score__figure { display: flex; align-items: baseline; gap: .55rem; }
.rq-score__figure strong { color: var(--blue-900); font-size: 2.5rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.rq-score__figure span { color: var(--ink-soft); font-size: .84rem; font-weight: 700; }
.rq-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: stretch; gap: 3px; margin: 0; padding: 0; list-style: none; }
.rq-strip__cell { height: 8px; margin: 0 !important; border-radius: 2px; background: var(--rq-idle); }
.rq-strip__cell--ready { background: var(--rq-available); }
.rq-strip__cell--derivable { background: var(--rq-derivable); }
.rq-strip__cell--not-ready { background: var(--rq-missing); }
.rq-strip__cell--incomplete { background: var(--rq-unknown); }
.rq-summary .rq-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.rq-facts div { display: grid; gap: .1rem; }
.rq-facts dt { color: var(--ink-soft); font-size: .72rem; line-height: 1.3; }
.rq-facts dd { margin: 0; color: var(--ink); font-size: .95rem; font-variant-numeric: tabular-nums; font-weight: 800; }
.rq-verdict, .rq-followup { padding: 1rem 1.25rem 0; }
.rq-verdict p { color: var(--ink-soft); font-size: .86rem; line-height: 1.5; }
.rq-actions { display: grid; gap: .35rem; margin: 0; padding-left: 1rem; font-size: .84rem; line-height: 1.45; }
.rq-actions li { margin: 0; }
.rq-actions__critical { color: #8f2424; font-weight: 700; }
.rq-actions__unresolved { color: #46586a; }
.rq-actions__derive { color: #6d4510; }
.rq-actions__minor, .rq-actions__more { color: var(--ink-soft); }
.rq-report-details { margin: 1rem 1.25rem 0; padding-top: .85rem; border-top: 1px solid var(--rq-hairline); }
.rq-report-details summary { color: var(--blue-700); cursor: pointer; font-size: .85rem; font-weight: 700; }
.rq-report-details summary span { color: var(--ink-soft); font-weight: 500; }
.rq-report-details label { display: grid; gap: .25rem; margin-top: .6rem; color: var(--ink); font-size: .8rem; font-weight: 700; }
.rq-report-details input { width: 100%; min-block-size: 38px; padding: .4rem .6rem; border: 1px solid #c5d4de; border-radius: 6px; font: inherit; font-weight: 400; }
.rq-summary__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0; padding: 1rem 1.25rem 1.25rem; }
.rq-summary__actions .btn { justify-content: center; min-block-size: 40px; padding-inline: .6rem; font-size: .84rem; white-space: nowrap; }
.rq-summary__actions .btn--quiet-action { color: var(--ink-soft); }

/* Follow the reader down the form on desktop. */
@media (min-width: 961px) {
  .assessment-layout { align-items: start; }
  .rq-summary {
    position: sticky;
    top: var(--rq-pin-top);
    max-height: calc(100vh - var(--rq-pin-top) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c5d4de transparent;
  }
  .rq-summary::-webkit-scrollbar { width: 6px; }
  .rq-summary::-webkit-scrollbar-thumb { border-radius: 3px; background: #c5d4de; }
}

@media (max-width: 960px) {
  .rq-guide-grid { grid-template-columns: 1fr; }
  .rq-intro__text { max-width: none; }
}
@media (max-width: 640px) {
  .rq-legend, .rq-rules__ladder, .rq-rules__score { padding: 1.1rem; }
  .rq-ladder { grid-template-columns: 1fr; }
  .rq-legend ul { grid-template-columns: 1fr; }
  .rq-table__summary { grid-template-columns: 1.1rem minmax(0, 1fr) auto; grid-template-areas: "chev title status" ". meter meter"; gap: .45rem .7rem; padding: .8rem 1rem; }
  .rq-table__chevron { grid-area: chev; }
  .rq-table__title { grid-area: title; }
  .rq-table__summary .rq-status { grid-area: status; }
  .rq-table__meter { grid-area: meter; }
  .rq-table__intro, .rq-table__toolbar, .rq-var, .rq-note { padding-inline: 1rem; }
  .rq-weights div { grid-template-columns: 6.5rem minmax(0, 1fr); }
}

/* ---------------------------------------------------- formal printed report */
.rq-report { display: none; }
@media print {
  body.rq-printing > :not(.rq-report) { display: none !important; }
  body.rq-printing { background: #fff !important; }
  body.rq-printing .rq-report { display: block; color: #111; font-size: 10pt; line-height: 1.45; }
  @page { margin: 16mm 14mm; }
}
.rq-report h1 { max-width: none; margin: .15rem 0 .2rem; font-size: 18pt; letter-spacing: -.01em; }
.rq-report h2 { margin: 1.4rem 0 .5rem; padding-bottom: .25rem; border-bottom: 1.5px solid #111; font-size: 12pt; break-after: avoid; }
.rq-report h3 { margin: 1rem 0 .35rem; font-size: 10.5pt; break-after: avoid; }
.rq-report p { margin: .35rem 0; }
.rq-report__org { margin: 0; color: #444; font-size: 8.5pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rq-report__standard { color: #444; }
.rq-report__header { padding-bottom: .6rem; border-bottom: 3px solid #0b3a66; }
.rq-report__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem 1.5rem; margin: .8rem 0 0; }
.rq-report__meta div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); }
.rq-report__meta dt { color: #444; font-weight: 700; }
.rq-report__meta dd { margin: 0; }
.rq-report__table { width: 100%; margin: .3rem 0 .4rem; border-collapse: collapse; font-size: 9pt; }
.rq-report__table th, .rq-report__table td { padding: .28rem .45rem; border: 1px solid #b9c2c9; text-align: left; vertical-align: top; }
.rq-report__table thead th { background: #e9eef2; font-weight: 700; }
.rq-report__table tbody th { font-weight: 600; }
.rq-report__table tr { break-inside: avoid; }
.rq-report__table--key { width: auto; min-width: 60%; }
.rq-report__table--vars td:last-child { font-weight: 600; }
.rq-report__table--vars { table-layout: fixed; }
.rq-report__table--vars th:nth-child(1) { width: 30%; }
.rq-report__table--vars th:nth-child(2) { width: 18%; }
.rq-report__table--vars th:nth-child(3) { width: 14%; }
.rq-report__block { break-inside: avoid-page; }
.rq-report__actions { margin: .3rem 0; padding-left: 1.3rem; }
.rq-report__actions li { margin: .15rem 0; }
.rq-report__note { font-style: italic; }
.rq-report__footer { margin-top: 1.4rem; padding-top: .5rem; border-top: 1px solid #b9c2c9; color: #444; font-size: 8.5pt; }

/* ============================================================
   2026-10-22 review fixes
   ============================================================ */

/* Text selection in the brand palette instead of the browser default. */
::selection { background: rgba(0, 99, 195, .2); color: inherit; }

/* Call-to-action buttons keep their label on one line; the band reflows instead. */
.cta-band .btn, .cta-actions .btn { flex: none; white-space: nowrap; }
@media (max-width: 420px) {
  .cta-band .btn, .cta-actions .btn { white-space: normal; }
}

/* Spacing that used to come from an inline style and a <br>. */
.pull-finding--spaced { margin-top: 1.5rem; }
.section-heading--figure { margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.25rem; }
.section-heading--figure h3 { margin: 0; }

/* Touch screens: every control reaches the 44 px target. */
@media (pointer: coarse) {
  .case-tile > a { display: inline-flex; min-block-size: 44px; align-items: center; }
  .rq-link-button { min-block-size: 44px; }
  .rq-var__spec summary { min-block-size: 44px; }
  .rq-report-details summary { display: flex; min-block-size: 44px; align-items: center; }
  .rq-report-details input { min-block-size: 44px; }
}

/* On this page: fade whichever edge has more links beyond it. */
.reading-tools__list { -webkit-mask-image: none; mask-image: none; }
.reading-tools__list.is-clipped-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.reading-tools__list.is-clipped-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); mask-image: linear-gradient(90deg, transparent, #000 32px); }
.reading-tools__list.is-clipped-start.is-clipped-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }

/* The ETL illustration keeps its natural proportions now that it declares its size. */
.etl-figure { display: block; max-width: 100%; height: auto; }

/* About: the pipeline statement reads as a calm lead, not small bold grey text
   (a later p:last-child rule used to override the lead style). */
.identity-intro > p.identity-intro__lead { max-width: 82ch; margin: 0; color: var(--ink); font-size: clamp(1.05rem, 1.6vw, 1.18rem); font-weight: 500; line-height: 1.7; }