/* ============================================================
   Madrigal — Biomarkers and Diagnostic Tests in MASH (WV30041)
   ============================================================ */

/* ---- Font (self-hosted Fustat variable, Latin subset) ---- */
@font-face {
  font-family: "Fustat";
  src: url("../fonts/fustat-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens ---- */
:root {
  --navy: #00014d;
  --blue-bright: #000477;
  --orange: #ff6c00;
  --offwhite: #f4f3ef;
  --card: #e5e4e4;
  --light-blue: #bcdffa;
  --cyan: #04aced;
  --dark-gray: #3e3e3e;
  --white: #fff;
  --border: #cfcfce;

  --maxw: 73.75rem;
  --radius: 14px;
  --gap: 1.5rem;

  --fs-h1: clamp(2rem, 4.5vw, 3.25rem);
  --fs-h2: clamp(1.35rem, 2.6vw, 2rem);
  --fs-h3: clamp(1.15rem, 1.8vw, 1.5rem);
  --fs-body: clamp(1rem, 1.2vw, 1.15rem);
}

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

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

body {
  margin: 0;
  font-family:
    "Fustat",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.25;
  color: var(--white);
  background: linear-gradient(60deg, var(--blue-bright) 0%, var(--navy) 39%);
  background-attachment: fixed;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

sup {
  font-size: 0.62em;
  line-height: 0;
}

button {
  font: inherit;
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--white);
  color: var(--navy);
  padding: 0.6rem 1rem;
  border-radius: 0 0 8px;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

.noscript-note {
  max-width: var(--maxw);
  margin: 1rem auto;
  padding: 0.85rem 1.25rem;
  background: var(--offwhite);
  color: var(--navy);
  border-radius: 10px;
  font-weight: 600;
}

/* ---- Utilities ----
   .nowrap: browsers treat a hyphen as a break point, so a compound term like
   "Dysfunction-Associated" can split across two lines mid-word. This keeps it
   as one unbreakable unit while leaving the surrounding word spaces free to
   wrap normally. */
.nowrap {
  white-space: nowrap;
}

/* ---- Layout ---- */
main {
  display: block;
}

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
}

/* ---- Hero (curved swoosh header, section 1) ---- */
.hero {
  position: relative;
  overflow: hidden;

  /* Transparent so the body's fixed gradient shows through the swoosh's
     navy area — avoids a seam where the header meets the page background. */
  background: transparent;
}

.hero__swoosh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Two curve variants rather than one stretched curve, swapped by width:
   scaling a single curve non-uniformly overwhelms a short, wide header on
   phones with too much cream. The narrow variant pulls the sweep back and
   frees the navy side for a bigger logo. */
.hero__swoosh--narrow {
  display: none;
}

.hero__cream {
  fill: var(--offwhite);
}

.hero__accent {
  fill: var(--orange);
}

.hero__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) 1.25rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  min-height: clamp(10rem, 19vw, 18rem);
}

.hero__title {
  color: var(--navy);
  font-size: clamp(0.95rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1.2;

  /* em-based cap keeps the line break stable across the font-size clamp —
     a % or px cap drifts because the two don't scale together. The %
     fallback only matters once the clamp bottoms out at very small widths. */
  max-width: min(13.4em, 70%);
}

.hero__logo {
  align-self: flex-start;
  width: clamp(5rem, 19vw, 14.125rem);
  height: auto;
  flex: none;
}

/* ---- Section headings ---- */
.section__title {
  color: var(--offwhite);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.section__subhead {
  color: var(--offwhite);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.section__subtitle {
  color: var(--cyan);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: 1rem;
}

.section__subtitle--cyan {
  font-size: var(--fs-h2);
}

/* ---- Cards ---- */
.card {
  --card-pad-x: 1.75rem;

  position: relative;
  background: var(--card);
  color: var(--navy);
  border-radius: var(--radius);
  padding: 1.5rem var(--card-pad-x);
  margin-bottom: 1.5rem;
}

.card__head {
  color: var(--orange);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.08;
  margin-bottom: 0.75rem;
}

.card__body {
  margin-bottom: 0.75rem;
}

/* em cap holds the heading's line break independent of font-size, same
   technique as the hero h1. */
.card--risk .card__head {
  /* +6.5rem restores the badge's lane: the badge is absolutely positioned
     and reserves no space of its own, so a bare em cap would hand it the
     padding and break the phrase early. */
  max-width: calc(33.5em + 6.5rem);

  /* Keeps text out of the badge's lane at narrow widths, where the em cap
     no longer binds, and reserves room for the icon row below it. */
  padding-right: 6.5rem;
  min-height: 3.15rem;
}

.card__badge {
  position: absolute;
  top: 0.6rem;
  right: 0.975rem;
  width: 5.3rem;
  height: 5.3rem;
  border-radius: 50%;
  background: var(--orange);
  display: grid;
  place-items: center;
}

.card__badge .icon {
  width: 3.78rem;
  height: 3.78rem;
}

.card__liver {
  float: right;
  width: 6.594rem;
  height: auto;
  margin: 0 0 0.5rem 1rem;
  shape-outside: margin-box;
}

/* ---- Grid ---- */
.grid {
  display: grid;
  gap: var(--gap);
}

/* Grid items default to min-width: auto, so a wide child (the cutoff
   tables) can floor the track and push the card past the viewport. */
.grid > * {
  min-width: 0;
}

.grid--2 {
  grid-template-columns: 1fr 1fr;
}

/* Column ratios are sized to each pair's content, not split evenly, and
   carried as fr so they hold at any width. */
.grid--defs {
  grid-template-columns: 308.34fr 252.74fr;
  gap: 1.74rem;
}

.grid--elasto {
  grid-template-columns: 328.42fr 233.12fr;
  gap: 1.61rem;
}

.grid--elf {
  grid-template-columns: 218.52fr 285.01fr;
  align-items: start;
  gap: 5.15rem;
}

/* ---- Risk factors ----
   Content-sized flex items rather than equal columns — otherwise every set
   is sized to the widest one, leaving uneven gaps between the shorter ones. */
.riskfactors {
  list-style: none;
  padding: 0;
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.93rem;
}

.riskfactor {
  display: flex;
  align-items: center;
  gap: 0.75em;
  color: var(--navy);
  font-weight: 400;
}

/* Each icon is sized individually rather than to a uniform box — the source
   artwork carries different amounts of transparent margin per icon, so a
   single box size under- or over-weights most of them. */
.riskfactor .icon {
  flex: none;
}

.riskfactor .icon--obesity {
  width: 3.3rem;
  height: 3.3rem;
}

.riskfactor .icon--diabetes {
  width: 3.96rem;
  height: 3.96rem;
}

.riskfactor .icon--triglycerides {
  width: 2.96rem;
  height: 3.81rem;
}

.riskfactor .icon--cholesterol {
  width: 4.9rem;
  height: 4.9rem;
}

.riskfactor .icon--hypertension {
  width: 4.39rem;
  height: 4.39rem;
}

/* em caps hold each label's two-line break at any font-size. */
.riskfactor .icon--obesity + span {
  max-width: 5.82em;
}

.riskfactor .icon--diabetes + span {
  max-width: 7.655em;
}

.riskfactor .icon--triglycerides + span {
  max-width: 6.444em;
}

.riskfactor .icon--cholesterol + span {
  max-width: 5.785em;
}

.riskfactor .icon--hypertension + span {
  max-width: 6.444em;
}

/* ---- Alcohol note ---- */

/* Pill shape bleeding off the card's left edge, closed with a semicircular
   cap partway across the card. */
.alcohol-note {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  background: var(--white);
  border-radius: 0 999px 999px 0;
  padding: 0.85rem 1.1rem;
  margin-top: 1rem;
  margin-left: calc(-1 * var(--card-pad-x));
  width: calc(90.1% + 1.802 * var(--card-pad-x));
  clear: both;
}

.alcohol-note__label {
  color: var(--navy);
  font-weight: 700;
  flex: 0 0 auto;
}

.alcohol-note__val {
  color: var(--navy);
}

/* ---- Bullets ---- */
.bullets {
  margin: 0.25rem 0 0;
  padding-left: 1.2rem;
}

.bullets li {
  margin: 0.2rem 0;
}

/* Left edge matches the callout row's text column (icon width + gap) above
   it, not the card edge, so the bullet lines up with the sentence it
   continues rather than the icon. */
.bullets--inline {
  list-style: none;
  padding: 0;
  margin-left: calc(2.875rem + 0.85rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: baseline;
}

.bullets--inline::before {
  content: "\2022";
}

/* No display of its own: as a flex item each li is already blockified, and
   making it inline-flex would turn its own children into flex items too —
   whitespace gets discarded, running "globulin" straight into "(total
   protein minus albumin)". Normal inline flow keeps the space and still
   baseline-aligns the hotspot button. */
.bullets--inline > li {
  align-items: baseline;
}

.bullets--inline > li:not(:last-child)::after {
  content: ",";
}

/* ---- Fibrosis spectrum ---- */

/* Declares the container the cqw units below resolve against. It has to sit
   on the card, not on .spectrum__stages — an element can't query itself. */
.spectrum {
  container-type: inline-size;
}

.spectrum__stages {
  /* Sizing the liver by height (not width) makes the image row a known
     size, which is the only way to center the arrow on it via calc — the
     stage columns are flex-sized, so their width can't be expressed that
     way. Both liver and arrow scale with the card (cqw) rather than a fixed
     rem so they hold their proportion as the row width changes. */
  --liver-h: 6.559cqw;
  --arrow-w: 7.86cqw;
  --arrow-h: 1.356cqw;

  list-style: none;
  padding: 0;
  margin-top: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.25rem;
  flex-wrap: nowrap;
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 0;
  gap: 0.5rem;
}

/* Height-driven, and max-width must NOT apply here: the global
   `img { max-width: 100% }` would clamp the width while the height stays
   fixed, scaling the artwork non-uniformly. */
.stage__img {
  height: var(--liver-h);
  width: auto;
  max-width: none;
}

.stage__label {
  color: var(--navy);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.2;
}

.stage__grade {
  display: block;
  font-weight: 600;
}

/* Centers the arrow on the liver artwork above it, not on the stage column
   as a whole — the label text below plays no part in the alignment. */
.stage--arrow {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: calc((var(--liver-h) - var(--arrow-h)) / 2);
}

.stage--arrow .icon {
  width: var(--arrow-w);
  height: var(--arrow-h);
}

/* ---- CTA bar ---- */

/* Bleeds off the left edge of the page with a square corner, closed with a
   semicircular cap partway across; the bar's background bleeds but its text
   stays inset to the content column. */
.ctabar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--orange);
  color: var(--offwhite);
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  border-radius: 0 999px 999px 0;
  margin: 5.94rem 19.8% 1.5rem calc(50% - 50vw);
  padding: 0.89rem 0.84rem 0.89rem calc(50vw - 50% + 1.575rem);
}

.ctabar--wide {
  margin-right: 15.9%;
}

.section__subtitle + .ctabar {
  margin-top: 1.11rem;
}

.ctabar__icon {
  order: 1;
  margin-left: auto;
  width: 4.64rem;
  height: 4.64rem;
  flex: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ---- CTA link ---- */
.ctalink {
  margin: 1rem 0 1.25rem;
}

.ctalink a {
  color: var(--white);
  font-weight: 400;
  text-decoration: none;
}

.ctalink a:hover,
.ctalink a:focus-visible {
  text-decoration: underline;
}

/* ---- Callout (guidelines line) ---- */
.callout {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--navy);
  font-weight: 400;
  margin: 1rem 0;
}

.callout__icon {
  width: 2.875rem;
  height: 2.875rem;
  flex: none;
  background-color: var(--orange);
  border-radius: 50%;
  padding: 0.5625rem;
  background-origin: content-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* A callout whose text carries more than one child (a hotspot button
   mid-sentence) must flow as a single flex item, not spill its button and
   surrounding text nodes into separate flex items on the row. min-width: 0
   overrides the flex-item default of min-width: auto so it can still wrap
   instead of forcing the card wider. */
.callout__text {
  flex: 1;
  min-width: 0;
}

/* ---- Hotspots (modal triggers) ---- */
.hotspot {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--cyan);
  font-weight: 700;
  display: inline;
  text-align: left;
}

.hotspot::before {
  content: "";
  display: inline-block;
  width: 1.365em;
  height: 1.365em;
  margin-right: 0.19em;
  vertical-align: -0.3em;
  background: url("../img/icons/plus-cyan.svg") no-repeat center / contain;
  transition: transform 0.15s ease;
}

/* No separate close icon — the same marker rotates 45° to read as an X when
   the panel is open, and rotates back to close it. */
.hotspot[aria-expanded="true"]::before {
  transform: rotate(45deg);
}

.hotspot:hover,
.hotspot:focus-visible {
  text-decoration: underline;
}

.hotspot-line {
  margin: 0.6rem 0;
}

/* ---- Tables ---- */

/* Each page-3 table is framed as its own rounded rectangle with an orange
   keyline, filled a shade lighter than the card behind it. Needs
   border-collapse: separate — collapse suppresses border-radius on tables. */
.cutoff {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0.5rem 0 1rem;
  font-size: 0.98rem;
  border: 2px solid var(--orange);
  border-radius: 0.72rem;
  background: var(--offwhite);

  /* Padding the table rather than the cells insets the row rules from the
     frame while leaving the interior column gutters intact; the first and
     last cells give their outer padding back below. */
  padding-inline: 0.99rem;
}

.cutoff th:first-child,
.cutoff td:first-child {
  padding-left: 0;
}

.cutoff th:last-child,
.cutoff td:last-child {
  padding-right: 0;
}

.table-caption {
  color: var(--navy);
  font-weight: 700;
  margin-top: 1rem;
}

/* Only needed when a caption opens its own column — there's nothing above
   it to separate from in that case. */
.table-caption:first-child {
  margin-top: 0;
}

.cutoff thead th {
  /* Copy is uppercase except the "kPa" unit, so this can't use
     text-transform: it would also force-uppercase the unit. */
  color: var(--navy);
  font-size: inherit;
  text-align: left;
  padding: 0.5rem 0.99rem;
  border-bottom: 1px solid var(--orange);
}

.cutoff tbody th,
.cutoff tbody td {
  padding: 0.55rem 0.99rem;
  border-bottom: 1px solid var(--orange);
  text-align: left;
  font-weight: 400;
  color: var(--navy);
}

.cutoff tbody tr:last-child th,
.cutoff tbody tr:last-child td {
  border-bottom: none;
}

.cutoff thead th:last-child,
.cutoff tbody td.cutoff__val {
  text-align: center;
}

.cutoff tbody td.cutoff__val {
  color: var(--cyan);
  font-weight: 700;
  white-space: nowrap;
}

/* The reveal-panel table uses a lighter treatment than the card tables:
   mixed case, a cyan header rule instead of orange, plain navy values, and
   no outer frame — the popover panel is its own container. */
.cutoff--modal {
  font-size: 0.906rem;
  border: none;
  border-radius: 0;
  border-collapse: collapse;
  background: none;
  padding-inline: 0;
}

.cutoff--modal thead th,
.cutoff--modal tbody th,
.cutoff--modal tbody td {
  padding-inline: 0.6rem;
}

.cutoff--modal thead th {
  font-size: 1rem;
  padding-block: 0.2rem 0.3rem;
  border-bottom: 1.5px solid var(--cyan);
  vertical-align: bottom;
}

.cutoff--modal thead th:not(:first-child) {
  text-align: center;
}

.cutoff--modal thead th:first-child,
.cutoff--modal tbody th {
  white-space: nowrap;
  padding-right: 1rem;
}

.cutoff--modal tbody th,
.cutoff--modal tbody td {
  padding-block: 0.42rem;
  border-bottom: 1px solid var(--navy);
  font-weight: 400;
}

.cutoff--modal tbody td.cutoff__val {
  color: var(--navy);
  font-weight: 400;
  text-align: center;
}

.cutoff--modal tbody tr:last-child th,
.cutoff--modal tbody tr:last-child td {
  border-bottom: none;
}

.table-scroll {
  overflow-x: auto;
}

.footnote {
  font-size: 0.8rem;
  color: var(--navy);
  margin-top: 0.25rem;
}

/* ---- Floating scroll logo ----
   JS toggles .is-visible: hidden while the hero (with its own logo) is in
   view, hidden again over the footer so it never sits on the reference
   text, faded in for everything in between — in either scroll direction. */
.floating-logo {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: clamp(5rem, 19vw, 14.125rem);
  height: auto;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.floating-logo.is-visible {
  opacity: 1;
}

/* ---- Footer ---- */
.site-footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
  color: var(--white);
  font-size: 0.8rem;
  line-height: 1.2;
}

main > .section:last-of-type {
  padding-bottom: 0.1rem;
}

main > .section:last-of-type .ctalink {
  margin-bottom: 0;
}

/* Closing bars for the whole page — appear once, at the very end. */
.endbar {
  margin-left: calc(50% - 50vw);
}

/* Only the top-right corner is rounded: both bars bleed off the left edge,
   the orange bar's underside is covered by the cream one, and the cream
   bar's underside is cut by the page bottom — rounding all four corners
   would read as a floating pill instead of a closing edge treatment. */
.endbar--orange {
  height: 0.694rem;
  margin-top: 0.56rem;
  margin-right: 13%;
  border-radius: 0 0.25rem 0 0;
  background: var(--orange);
}

.endbar--cream {
  height: 1.19rem;
  margin-right: 3%;
  border-radius: 0 0.33rem 0 0;
  background: var(--offwhite);
}

.refs__head {
  color: var(--offwhite);
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}

/* References render as one run-in paragraph ("1. … 2. … 3. …" flowing and
   wrapping), not a stacked list. Keeps <ol>/<li> semantics for screen
   readers and drives the numbering with a counter, since `display: inline`
   suppresses the native marker. */
.refs {
  margin: 0 0 1rem;
  padding-left: 0;
  list-style: none;
  counter-reset: ref;
}

.refs li {
  display: inline;
  counter-increment: ref;
}

.refs li::before {
  content: counter(ref) ". ";
}

/* Reference 11 breaks onto its own line rather than trailing the previous
   citation in the run-in paragraph. */
.refs li.refs__break {
  display: block;
}

.abbr {
  color: var(--white);
  margin-bottom: 1rem;
}

.copyright {
  color: var(--white);
}

/* ============================================================
   Icons (pre-colored SVG/PNG via background-image)
   ============================================================ */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.icon--obesity {
  background-image: url("../img/icons/scale-orange.svg");
}

.icon--diabetes {
  background-image: url("../img/icons/diabetes-orange.svg");
}

.icon--triglycerides {
  background-image: url("../img/icons/triglycerides.png");
}

.icon--cholesterol {
  background-image: url("../img/icons/cholesterol-orange.svg");
}

.icon--hypertension {
  background-image: url("../img/icons/hypertension-orange.svg");
}

.icon--diagnosis {
  background-image: url("../img/icons/diagnosis-white.svg");
}

.icon--important {
  background-image: url("../img/icons/important-white.svg");
}

.icon--guidelines {
  background-image: url("../img/icons/guidelines-white.svg");
}

.icon--arrow {
  background-image: url("../img/icons/arrow-hz-bright-blue.svg");
}

/* ============================================================
   Popovers (native Popover API, JS-anchored to trigger)
   ============================================================ */
.popover {
  position: fixed;
  margin: 0;
  inset: auto;

  /* Reveal panels use three fixed widths rather than sizing to their
     content, so panel geometry stays consistent regardless of how much
     text a given reveal holds. */
  width: 26.75rem;
  max-width: calc(100vw - 1rem);
  border: 1.5px solid var(--cyan);
  border-radius: 13px;
  padding: 0;
  color: var(--navy);
  background: var(--white);
  box-shadow: 0 0.75rem 2.5rem rgba(0, 1, 40, 0.35);
  overflow: visible;
}

/* Pointer tail — a solid triangle; JS sets the side and offset to anchor it
   to the trigger. */
.popover__tail {
  position: absolute;
  width: 0;
  height: 0;
  border-inline: 1.21rem solid transparent;
  transform: translateX(-50%);
}

.popover__tail--up {
  top: -1.28rem;
  border-bottom: 1.28rem solid var(--cyan);
}

.popover__tail--down {
  bottom: -1.28rem;
  border-top: 1.28rem solid var(--cyan);
}

.popover--wide {
  width: 36.3rem;
}

.popover--narrow {
  width: 16.875rem;
}

.popover__inner {
  position: relative;

  /* Pinned to a flat 1rem rather than the page's fluid --fs-body — every
     other value here (padding, radius, pointer) is derived from that base,
     so the panel only holds together at a fixed size. */
  font-size: 1rem;
  padding: 0.82rem;
  line-height: 1.2;
  background: var(--white);
  border-radius: 12px;
}

.popover__inner > * + * {
  margin-top: 0.41rem;
}

.popover__inner > .formula--block,
.popover__inner > .riskgauge:first-of-type {
  margin-top: 0.82rem;
}

.popover__title {
  color: var(--cyan);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0;
}

.popover--accent .popover__title {
  color: var(--cyan);
}

.popover__inner > .popover__subhead {
  color: var(--navy);
  font-weight: 700;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1.5px solid var(--cyan);
}

/* Spacing above already separates this from the previous block; a
   margin-bottom here would double it up. */
.popover p {
  margin-bottom: 0;
}

/* Cutoff-risk gauges */
.riskgauge {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 1.37rem;
}

.riskgauge + .riskgauge {
  margin-top: 0.37rem;
}

.riskgauge__img {
  width: 2.515rem;
  height: auto;
  flex: none;
}

.riskgauge__k {
  font-weight: 600;
  color: var(--navy);
  flex: 0 0 6.5rem;
}

.riskgauge__v {
  color: var(--navy);
  font-weight: 400;
}

/* Platelet range block */
.pltrange {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: space-between;
  gap: 0.35rem 0;
}

.pltrange__k {
  color: var(--cyan);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.47em;
}

.pltrange__v {
  color: var(--navy);
}

/* The SVG already includes its own ring, so a CSS border here would draw a
   double circle around it. */
.pltrange__down {
  display: inline-block;
  width: 1.389em;
  height: 1.389em;
  background: url("../img/icons/arrow-down-cyan.svg") no-repeat center / contain;
  flex: none;
}

/* Mobile: popovers rise from the bottom edge as a sheet (JS adds
   .popover--sheet). Same card, no pointer tail — thumb-reachable. */
.popover.popover--sheet {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: var(--radius) var(--radius) 0 0;
  transform: none;
  animation: sheet-up 0.22s ease-out;
}

.popover.popover--sheet .popover__tail {
  display: none;
}

@keyframes sheet-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

/* Formulas */
.formula {
  color: var(--navy);
  font-weight: 400;
}

.formula--frac {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.formula__label {
  font-weight: 400;
}

.formula__label--bold {
  font-weight: 700;
}

.frac {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
}

.frac__num {
  padding: 0 0.5rem 0.35rem;
  border-bottom: 2px solid var(--cyan);
}

.frac__den {
  padding: 0.35rem 0.5rem 0;
}

.formula--block {
  font-family: "Fustat", monospace;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: var(--navy);
  font-weight: 400;
  line-height: 1.9;
  font-size: 0.95rem;
}

.formula__op {
  color: var(--cyan);
  font-weight: 700;
}

/* ---- Focus visibility ---- */
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

.hero :focus-visible,
.card :focus-visible,
.popover :focus-visible {
  outline-color: var(--orange);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 640px) {
  .hero__swoosh--wide {
    display: none;
  }

  .hero__swoosh--narrow {
    display: block;
  }

  .hero__inner {
    min-height: 9rem;
  }

  .hero__logo {
    width: clamp(6rem, 30vw, 7.5rem);
  }

  .floating-logo {
    width: clamp(6rem, 30vw, 7.5rem);
  }
}

@media (max-width: 860px) {
  .grid--2,
  .grid--elf {
    grid-template-columns: 1fr;
  }

  /* Stacked to one column, each factor gets its own row with a common icon
     box and the artwork pinned to its left edge — the negative
     background-position offsets below cancel the transparent margin each
     icon asset carries on its left. */
  .riskfactors {
    flex-direction: column;
    gap: 1rem;
  }

  .riskfactor {
    width: 100%;
  }

  .riskfactor .icon {
    width: 3.5rem;
    height: 3.5rem;
    background-position: left center;
  }

  .riskfactor .icon--obesity {
    background-position: -0.164rem center;
  }

  .riskfactor .icon--cholesterol {
    background-position: -0.504rem center;
  }

  .riskfactor .icon--hypertension {
    background-position: -0.182rem center;
  }

  /* The two-line-break caps only matter at the wider layout. */
  .riskfactor .icon + span {
    max-width: none;
  }

  /* Five stages don't read side by side at this width, so the progression
     turns vertical and the connector arrows rotate to point up/down. */
  .spectrum__stages {
    flex-flow: column nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    --liver-h: 5.5rem;
    --arrow-w: 0.474rem;
    --arrow-h: 2.75rem;
  }

  .stage {
    flex: 0 0 auto;
  }

  .stage--arrow {
    align-self: center;
    margin-top: 0;
  }

  .stage--arrow .icon {
    background-image: url("../img/icons/arrow-vt-bright-blue.svg");
  }
}

@media (max-width: 560px) {
  /* Drive the inline padding through the custom property, not the
     shorthand: .alcohol-note's negative margin is derived from it, so
     overriding only `padding` would leave the two out of sync. */
  .card {
    --card-pad-x: 1.1rem;

    padding-block: 1.25rem;
  }

  .alcohol-note {
    flex-direction: column;
    gap: 0.25rem;
  }

  /* Below this width the bar becomes a full-bleed band instead of a
     pill — the pill's rounded cap is aspect-dependent and starts eating too
     much of the bar's length once it's this narrow. */
  .ctabar,
  .ctabar--wide {
    margin-inline: calc(50% - 50vw);
    padding: 0.85rem 1rem;
    gap: 0.85rem;
    border-radius: 0;
    align-items: center;
  }

  .ctabar__icon {
    order: 0;
    margin-left: 0;
    width: 2.25rem;
    height: 2.25rem;
    align-self: center;
  }

  .cutoff {
    font-size: 0.9rem;
  }

  .grid--elf {
    gap: 1rem;
  }

  .formula--frac {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 400px) {
  /* Tighten the column gutters so the 3-column cutoff tables still fit the
     card's content box at 320px — trims spacing only, not type size. */
  .cutoff {
    padding-inline: 0;
  }

  .cutoff thead th,
  .cutoff tbody th,
  .cutoff tbody td,
  .cutoff th:first-child,
  .cutoff td:first-child,
  .cutoff th:last-child,
  .cutoff td:last-child {
    padding-inline: 0.15rem;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
    animation: none !important;
  }
}