/* ============================================================
   HospaSense documentation suite — shared brand stylesheet
   Derived strictly from the HospaSense Design System v1.0
   (public/brand/Design system documentation request 2/)
   Cream is the ground, navy is the structure, blue is the
   action, and lime is a scalpel — used once per view.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Core brand palette — fixed six */
  --hs-ink: #030E14;
  --hs-navy: #061A27;
  --hs-blue: #11334B;
  --hs-sky: #B4CDE7;
  --hs-cream: #F4EFE1;
  --hs-lime: #D9FF36;
  --hs-white: #FFFFFF;

  /* Navy / blue ramp */
  --navy-900: #030E14; --navy-800: #061A27; --navy-700: #0B2538;
  --navy-600: #11334B; --navy-500: #1F4865; --navy-400: #355F7E;
  --navy-300: #5A7F9B; --navy-200: #89A6BD;

  /* Cool-neutral ramp */
  --slate-50: #FBFAF5; --slate-100: #F4EFE1; --slate-150: #ECEEEA;
  --slate-200: #DCE3EB; --slate-300: #C6D3E0; --slate-400: #A6B8C9;
  --slate-500: #7D93A6; --slate-600: #546B7E;

  /* Lime ramp */
  --lime-600: #A9CC1E; --lime-500: #C4EA28; --lime-400: #D9FF36;
  --lime-300: #E6FF7A; --lime-100: #F2FFC0;

  /* Status (derived, non-core) */
  --success: #1B8A53; --success-bg: #E2F1E9;
  --warning: #B5731A; --warning-bg: #F6EAD2;
  --critical: #C23B33; --critical-bg: #F7E2DF;
  --info: #11334B; --info-bg: #E5EDF4;

  /* Surfaces, text, borders */
  --surface-page: var(--hs-cream);
  --surface-card: var(--hs-white);
  --surface-sunken: var(--slate-150);
  --surface-sky: #E5EDF4;
  --text-primary: #061A27;
  --text-secondary: #546B7E;
  --text-tertiary: #7D93A6;
  --text-on-dark: #F4EFE1;
  --text-on-dark-muted: #B4CDE7;
  --border-subtle: #DCE3EB;
  --border-default: #C6D3E0;

  /* Type */
  --font-sans: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* The design system calls this --font-body; the suite called it --font-sans.
     Alias rather than rename so both spellings resolve. */
  --font-body: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Shape & depth */
  --radius-xs: 3px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(6,26,39,0.08), 0 1px 2px rgba(6,26,39,0.04);
  --shadow-md: 0 4px 12px rgba(6,26,39,0.08), 0 2px 4px rgba(6,26,39,0.04);
  --shadow-lg: 0 12px 28px rgba(6,26,39,0.12), 0 4px 8px rgba(6,26,39,0.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-page);
}

/* ---------- Document masthead (navy ground, on-dark logo) ---------- */
.hs-masthead {
  background: var(--hs-navy);
  color: var(--text-on-dark);
  padding: 40px 0 32px;
}
.hs-masthead .hs-container { display: flex; flex-direction: column; gap: 24px; }
.hs-masthead img.hs-logo { height: 32px; width: auto; align-self: flex-start; }
.hs-masthead .doc-overline {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--hs-lime);
}
.hs-masthead h1 {
  font-size: 36px; font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.1; color: var(--text-on-dark); margin-top: 6px;
}
.hs-masthead .doc-subtitle {
  font-size: 18px; font-weight: 400; color: var(--text-on-dark-muted);
  margin-top: 10px; max-width: 62ch;
}
.hs-masthead .doc-meta {
  display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 4px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-on-dark-muted);
}
.hs-masthead .doc-meta strong { color: var(--text-on-dark); font-weight: 500; }

/* ---------- Layout ---------- */
.hs-container { max-width: 960px; margin: 0 auto; padding: 0 28px; }
main.hs-container { padding-top: 40px; padding-bottom: 64px; }

/* ---------- Headings & text ---------- */
h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; color: var(--hs-navy); margin: 48px 0 16px; }
h2:first-child { margin-top: 0; }
h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--hs-blue); margin: 32px 0 12px; }
h4 { font-size: 18px; font-weight: 600; color: var(--hs-blue); margin: 24px 0 8px; }
p { margin: 0 0 14px; max-width: 72ch; }
p.lead { font-size: 18px; color: var(--text-secondary); }
ul, ol { margin: 0 0 16px 22px; max-width: 70ch; }
li { margin-bottom: 6px; }
a { color: var(--hs-blue); text-decoration: underline; text-decoration-color: var(--slate-300); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--hs-blue); }
strong { font-weight: 600; }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--surface-sunken); border-radius: 3px; padding: 1px 5px; }
hr { border: none; border-top: 1px solid var(--border-subtle); margin: 40px 0; }

.overline {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px;
}

/* ---------- Cards ---------- */
.hs-card {
  background: var(--surface-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 24px; margin: 0 0 20px;
  border: 1px solid var(--border-subtle);
}
.hs-card h3:first-child, .hs-card h4:first-child { margin-top: 0; }
.hs-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
.hs-card-grid .hs-card { margin: 0; }

/* Sunken panel for notes / callouts */
.hs-note {
  background: var(--surface-sky); border-radius: var(--radius-md);
  padding: 16px 20px; margin: 0 0 20px; font-size: 14px; color: var(--hs-blue);
}
.hs-note strong { color: var(--hs-navy); }
.hs-note--warning { background: var(--warning-bg); color: var(--warning); }
.hs-note--critical { background: var(--critical-bg); color: var(--critical); }
.hs-note--success { background: var(--success-bg); color: var(--success); }

/* The one lime moment per document — key takeaway / CTA band */
.hs-keyline {
  background: var(--hs-lime); color: var(--hs-navy);
  border-radius: var(--radius-lg); padding: 20px 24px; margin: 32px 0;
  font-weight: 600; font-size: 17px; max-width: none;
}

/* ---------- Tables ---------- */
.hs-table-wrap { overflow-x: auto; margin: 0 0 24px; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--surface-card); box-shadow: var(--shadow-sm); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
thead th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary);
  background: var(--surface-sunken); padding: 10px 16px;
  border-bottom: 1px solid var(--border-default); white-space: nowrap;
}
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
td.mono, th.mono { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }

/* ---------- Badges ---------- */
.hs-badge {
  display: inline-block; font-size: 12px; font-weight: 500;
  border-radius: var(--radius-pill); padding: 2px 10px; white-space: nowrap;
}
.hs-badge--neutral { background: var(--surface-sunken); color: var(--text-secondary); }
.hs-badge--info { background: var(--info-bg); color: var(--info); }
.hs-badge--success { background: var(--success-bg); color: var(--success); }
.hs-badge--warning { background: var(--warning-bg); color: var(--warning); }
.hs-badge--critical { background: var(--critical-bg); color: var(--critical); }
.hs-badge--accent { background: var(--hs-lime); color: var(--hs-navy); font-weight: 600; }

/* ---------- Questionnaire blocks ---------- */
.hs-question {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 20px 24px; margin: 0 0 16px;
}
.hs-question .q-id {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary);
  display: inline-block; margin-bottom: 6px;
}
.hs-question .q-text { font-size: 16px; font-weight: 600; color: var(--hs-navy); margin-bottom: 4px; }
.hs-question .q-why { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
.hs-question .q-options { list-style: none; margin: 0; }
.hs-question .q-options li {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--border-subtle); font-size: 14px; margin: 0;
}
.hs-question .q-options li::before {
  content: ''; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px;
  border: 2px solid var(--border-default); border-radius: 50%; background: var(--hs-white);
}
.hs-question .q-options.q-multi li::before { border-radius: 4px; }
.hs-question .q-write {
  border: 1px dashed var(--border-default); border-radius: var(--radius-sm);
  min-height: 72px; margin-top: 8px; background: var(--slate-50);
  padding: 10px 12px; font-size: 13px; color: var(--text-tertiary);
}

/* ---------- Screenshot / figure placeholders ---------- */
figure.hs-figure { margin: 0 0 24px; }
figure.hs-figure .frame {
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: var(--surface-sunken); min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); font-size: 13px; font-family: var(--font-mono);
  text-align: center; padding: 24px;
}
figure.hs-figure img { max-width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border-default); display: block; }
figure.hs-figure figcaption { font-size: 13px; color: var(--text-secondary); margin-top: 8px; }

/* ---------- Signature blocks (legal) ---------- */
.hs-sigrow { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; }
.hs-sig { border-top: 1px solid var(--border-default); padding-top: 12px; font-size: 14px; }
.hs-sig .sig-line { border-bottom: 1px solid var(--border-default); height: 44px; margin-bottom: 8px; }
.hs-sig .sig-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }

/* Draft watermark for legal documents */
.hs-draft-banner {
  background: var(--warning-bg); color: var(--warning);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  text-align: center; padding: 10px 16px;
}

/* ---------- Footer ---------- */
.hs-footer {
  background: var(--hs-navy); color: var(--text-on-dark-muted);
  padding: 28px 0; margin-top: 24px; font-size: 13px;
}
.hs-footer .hs-container { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; }
.hs-footer img { height: 20px; width: auto; }
.hs-footer .mono { font-size: 11px; }

/* ---------- Table of contents ---------- */
nav.hs-toc { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 20px 24px; margin-bottom: 32px; }
nav.hs-toc .overline { margin-bottom: 10px; }
nav.hs-toc ol { margin: 0 0 0 20px; columns: 2; column-gap: 40px; font-size: 14px; }
nav.hs-toc li { margin-bottom: 4px; break-inside: avoid; }
nav.hs-toc a { text-decoration: none; }
nav.hs-toc a:hover { text-decoration: underline; }

/* ---------- Print ---------- */
@media print {
  body { background: var(--hs-white); font-size: 12px; }
  .hs-masthead { padding: 24px 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hs-card, .hs-question, .hs-table-wrap { box-shadow: none; break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .hs-footer { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  nav.hs-toc ol { columns: 2; }
  a { color: var(--text-primary); text-decoration: none; }
}

@media (max-width: 640px) {
  .hs-masthead h1 { font-size: 28px; }
  nav.hs-toc ol { columns: 1; }
  .hs-sigrow { grid-template-columns: 1fr; }
}

/* ============================================================
   Questionnaire v2 (HS-T2-01) — interactive show-and-ask
   Additive block: nothing above this line may change.
   ============================================================ */

/* Capability brief card that opens every section */
.hs-brief {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--hs-blue); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 24px; margin: 0 0 24px;
}
.hs-brief .brief-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--hs-blue); margin-bottom: 10px;
}
.hs-brief .brief-points { margin: 0 0 20px 22px; font-size: 14px; }
.hs-brief figure.hs-figure { margin-bottom: 8px; }

/* Screenshot comment box */
.hs-comment { margin: 0 0 24px; }
.hs-comment label {
  display: block; font-size: 13px; font-weight: 600; color: var(--hs-blue);
  margin-bottom: 6px;
}
.hs-comment .c-id { font-weight: 400; color: var(--text-tertiary); font-size: 12px; }

/* Flow spotlight — numbered pipeline, pure CSS */
.hs-flowspot {
  background: var(--surface-sky); border-radius: var(--radius-lg);
  padding: 20px 24px; margin: 0 0 16px;
}
.hs-flowspot .flow-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--hs-blue); margin-bottom: 14px;
}
ol.hs-flow {
  list-style: none; margin: 0; padding: 0; counter-reset: hsflow;
  display: flex; flex-wrap: wrap; gap: 8px;
}
ol.hs-flow li {
  counter-increment: hsflow; position: relative;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 8px 14px 8px 34px;
  font-size: 13px; font-weight: 500; color: var(--hs-navy); margin: 0;
  display: flex; align-items: center;
}
ol.hs-flow li::before {
  content: counter(hsflow); position: absolute; left: 10px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--hs-blue);
}
ol.hs-flow li::after {
  content: '\2192'; margin-left: 12px; margin-right: -6px; color: var(--text-tertiary);
}
ol.hs-flow li:last-child::after { content: none; }

/* Interactive controls inside questions */
.q-controls { border-top: 1px solid var(--border-subtle); }
label.q-opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle); font-size: 14px;
  cursor: pointer;
}
label.q-opt:last-of-type { border-bottom: none; }
label.q-opt input { margin-top: 2px; accent-color: var(--hs-blue); flex: 0 0 auto; width: 16px; height: 16px; }
label.q-opt:hover span { color: var(--hs-blue); }
.q-other-input {
  display: none; width: 100%; margin: 4px 0 8px 26px; max-width: calc(100% - 26px);
}
.q-other-input.is-active { display: block; }
.q-other-input, .q-aux-input, .q-write-input, .q-notes,
.hs-respondent input {
  font-family: var(--font-sans); font-size: 14px; color: var(--text-primary);
  background: var(--slate-50); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
.q-other-input:focus, .q-aux-input:focus, .q-write-input:focus, .q-notes:focus,
.hs-respondent input:focus {
  outline: 2px solid var(--hs-sky); border-color: var(--hs-blue);
}
.q-aux-label {
  display: block; font-size: 12px; color: var(--text-secondary); margin: 10px 0 4px;
}
.q-aux-input { display: block; width: 100%; }
.q-write-input { display: block; width: 100%; min-height: 88px; resize: vertical; }
details.q-notes-wrap { margin-top: 10px; }
details.q-notes-wrap summary {
  font-size: 12px; color: var(--text-tertiary); cursor: pointer;
  list-style-position: inside;
}
details.q-notes-wrap summary:hover { color: var(--hs-blue); }
.q-notes { display: block; width: 100%; min-height: 56px; margin-top: 6px; resize: vertical; }

/* Respondent block */
.hs-respondent {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 24px; margin: 0 0 24px;
}
.hs-respondent .r-field label {
  display: block; font-size: 13px; font-weight: 600; color: var(--hs-blue); margin-bottom: 4px;
}
.hs-respondent .r-field .r-req {
  font-weight: 400; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--warning); margin-left: 6px;
}
.hs-respondent .r-field input { width: 100%; }

/* Sticky toolbar */
.hs-toolbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: var(--hs-navy); color: var(--text-on-dark);
  box-shadow: 0 -4px 12px rgba(6,26,39,0.18);
}
.hs-toolbar .hs-container {
  display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
  padding-top: 10px; padding-bottom: 10px;
}
.hs-toolbar .t-progress { font-family: var(--font-mono); font-size: 13px; color: var(--text-on-dark); }
.hs-toolbar .t-msg { font-size: 13px; color: var(--hs-sky); flex: 1 1 auto; }
.hs-toolbar .t-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.hs-toolbar button {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--hs-navy); background: var(--hs-cream);
  border: none; border-radius: var(--radius-pill); padding: 8px 16px; cursor: pointer;
}
.hs-toolbar button:hover { background: var(--hs-sky); }
/* The send action is the one thing we want pressed: lime on the navy bar.
   Everything beside it stays quiet so nothing competes with it. */
.hs-toolbar #t-send { background: var(--hs-lime); color: var(--hs-navy); padding: 10px 20px; }
.hs-toolbar #t-send:hover { background: var(--lime-300); }
.hs-toolbar #t-send[disabled] { opacity: 0.6; cursor: progress; }
.hs-toolbar #t-export { background: transparent; color: var(--hs-sky); box-shadow: inset 0 0 0 1px rgba(180,205,231,0.4); }
.hs-toolbar #t-export:hover { background: rgba(180,205,231,0.12); color: var(--text-on-dark); }
.hs-toolbar #t-print { background: transparent; color: var(--hs-sky); }
.hs-toolbar #t-print:hover { background: rgba(180,205,231,0.12); color: var(--text-on-dark); }
.hs-toolbar .t-msg--ok { color: var(--hs-lime); font-weight: 600; }
.hs-toolbar .t-msg--bad { color: var(--critical-bg); font-weight: 600; }

/* Clearing every answer is destructive, so it lives at the foot of the page
   rather than next to the button people press when they are finished. */
.hs-handover { margin-top: 48px; border-top: 1px solid var(--border-default); padding-top: 24px; }
.hs-handover h3 { margin-top: 0; }
.hs-handover .hs-btn { margin-top: 8px; }
main.hs-container { padding-bottom: 120px; }

/* Print: paper fallback keeps controls visible and hides the toolbar */
@media print {
  .hs-toolbar { display: none; }
  main.hs-container { padding-bottom: 0; }
  .hs-brief, .hs-flowspot { break-inside: avoid; }
  label.q-opt input { accent-color: var(--hs-navy); }
  .q-other-input { display: block; min-height: 20px; }
  .q-write-input, .q-notes { min-height: 64px; }
  details.q-notes-wrap summary { color: var(--text-secondary); }
}

@media (max-width: 640px) {
  .hs-respondent { grid-template-columns: 1fr; }
  ol.hs-flow { flex-direction: column; align-items: stretch; }
  ol.hs-flow li::after { content: none; }
}

/* ============================================================
   Portal chrome — added with the reviewer portal (v15.0.0).
   Navigation, entry page and buttons. Same six-colour palette:
   navy is the structure, blue is the action, lime is a scalpel.
   ============================================================ */

/* ---------- Top navigation (sits flush on the navy masthead) ---------- */
.hs-topbar { background: var(--hs-navy); border-bottom: 1px solid rgba(180, 205, 231, 0.14); padding: 14px 0; }
.hs-topbar .hs-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hs-topbar .tb-home { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.hs-topbar .tb-home img { height: 20px; width: auto; }
.hs-topbar .tb-home span { font-size: 13px; font-weight: 500; color: var(--text-on-dark); }
.hs-topbar nav { display: flex; align-items: center; gap: 22px; }
.hs-topbar nav a { font-size: 13px; color: var(--text-on-dark-muted); text-decoration: none; }
.hs-topbar nav a:hover { color: var(--text-on-dark); }
.hs-topbar + .hs-masthead { padding-top: 32px; }

/* ---------- Buttons (mirrors the design-system Button component) ---------- */
.hs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border: 1px solid transparent;
  border-radius: var(--radius-sm); font-family: var(--font-body);
  font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hs-btn--primary { background: var(--hs-blue); color: var(--hs-cream); }
.hs-btn--primary:hover { background: var(--hs-navy); color: var(--hs-cream); }
.hs-btn--accent { background: var(--hs-lime); color: var(--hs-navy); }
.hs-btn--accent:hover { background: var(--lime-500); }
.hs-btn--secondary { background: var(--surface-sunken); color: var(--text-primary); border-color: var(--border-subtle); }
.hs-btn--secondary:hover { background: var(--slate-200); }
.hs-btn--quiet { background: transparent; color: var(--text-secondary); }
.hs-btn--quiet:hover { background: var(--surface-sunken); }
.hs-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(217, 255, 54, 0.45); }
.hs-btn--sm { height: 38px; padding: 0 16px; font-size: 14px; }

/* ---------- Entry page hero ---------- */
.hs-hero { background: var(--hs-navy); color: var(--text-on-dark); padding: 56px 0 64px; }
.hs-hero .hs-container { display: flex; flex-direction: column; gap: 28px; }
.hs-hero img.hs-logo { height: 38px; width: auto; align-self: flex-start; }
.hs-hero h1 { font-size: 44px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; color: var(--text-on-dark); max-width: 20ch; }
.hs-hero .hero-lede { font-size: 19px; line-height: 1.55; color: var(--text-on-dark-muted); max-width: 60ch; }
.hs-hero .hero-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-lime); }
.hs-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
@media (max-width: 640px) { .hs-hero h1 { font-size: 32px; } }

/* ---------- Route cards: the three ways into the library ---------- */
.hs-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 0 0 16px; }
.hs-route {
  display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 24px;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--hs-blue); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); text-decoration: none;
  transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1), transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hs-route:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.hs-route .route-step { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.hs-route h3 { margin: 0; font-size: 20px; color: var(--hs-navy); }
.hs-route p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.hs-route .route-go { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 600; color: var(--hs-blue); }
.hs-route--accent { border-top-color: var(--hs-lime); }

/* ---------- Framed product screenshot ---------- */
.hs-shot { margin: 0 0 32px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); background: var(--surface-card); }
.hs-shot img { display: block; width: 100%; height: auto; }
.hs-shot figcaption { padding: 12px 18px; font-size: 13px; color: var(--text-secondary); border-top: 1px solid var(--border-subtle); background: var(--surface-sunken); }

/* ---------- Fact strip ---------- */
.hs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 32px; }
.hs-facts div { background: var(--surface-card); padding: 20px 22px; }
.hs-facts .fact-n { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--hs-navy); }
.hs-facts .fact-l { display: block; margin-top: 4px; font-size: 13px; color: var(--text-secondary); }

/* ---------- Footer contact ---------- */
.hs-footer a { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 2px; }
.hs-footer a:hover { color: var(--hs-lime); }

@media print {
  .hs-topbar { display: none; }
  .hs-route:hover { transform: none; }
}

/* The topbar carries the lockup on screen; the masthead keeps it for print/PDF. */
.hs-topbar + .hs-masthead img.hs-logo { display: none; }
@media print { .hs-topbar + .hs-masthead img.hs-logo { display: block; } }

/* A PDF link sits beside a document title, so it must read as a separate
   affordance rather than as the last word of the title. */
a.pdf-link {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.06em; text-decoration: none; vertical-align: 1px;
  color: var(--text-secondary); background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xs);
}
a.pdf-link:hover { color: var(--hs-navy); background: var(--slate-200); }

/* Four cards should read as a block of four, not three and a straggler. */
.hs-card-grid--pairs { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (min-width: 720px) { .hs-card-grid--pairs { grid-template-columns: 1fr 1fr; } }

/* Facts that are words rather than numbers need a smaller size to sit level. */
.hs-facts .fact-n--text { font-size: 19px; line-height: 1.3; }

/* Narrow screens: the top navigation must wrap rather than push the page wider
   than the viewport. A hospital reader on a phone should never scroll sideways. */
@media (max-width: 640px) {
  .hs-container { padding-left: 18px; padding-right: 18px; }
  .hs-topbar .hs-container { flex-wrap: wrap; gap: 6px 16px; }
  .hs-topbar nav { gap: 16px; flex-wrap: wrap; }
  .hs-topbar nav a { font-size: 12px; }
  .hs-topbar .tb-home span { font-size: 12px; }
  .hs-hero .hero-actions .hs-btn { width: 100%; }
  .hs-facts { grid-template-columns: 1fr 1fr; }
}