/*
 * Shared shell components — header, audience toggle, navigation, ISI.
 * Loaded after base.css. Mobile values are taken at 430px and desktop values
 * at 1628px; there is no tablet design, so the mid-range is interpolated.
 */

/* ===============================================================
 * Site header
 * ============================================================= */

.site-header {
  position: relative;
  z-index: 30;
  background-color: var(--color-nav-surface);
  color: var(--color-white);
}

/*
 * Overlay variant: the header sits on a photographic band that supplies the
 * background, and goes solid while the mobile panel is open.
 *
 * Selected by ancestor rather than by a modifier class so a single header
 * partial serves every page — only the pages that wrap the header in
 * .hero-band get the transparent treatment.
 */
.hero-band .site-header {
  background-color: transparent;
}

.hero-band .site-header[data-nav-open="true"] {
  background-color: var(--color-nav-surface);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-l);
  padding-block: var(--space-l);
}

.brand {
  display: block;
  flex-shrink: 0;
}

.brand img {
  block-size: var(--logo-height);
  inline-size: auto;
}

/* ---------------------------------------------------------------
 * Icon button — 32px glyph in a 44px touch target.
 * ------------------------------------------------------------- */

.icon-button {
  display: grid;
  position: relative;
  place-items: center;
  flex-shrink: 0;
  inline-size: var(--tap-target);
  block-size: var(--tap-target);
  padding: 0;
}

.icon-button img {
  inline-size: 100%;
  block-size: 100%;
}

.icon-button::after {
  content: "";
  position: absolute;
  inline-size: 2.75rem;
  block-size: 2.75rem;
}

.nav-toggle {
  margin-inline-start: auto;
}

/* Swap hamburger for the close glyph while the panel is open. */
.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

/* ===============================================================
 * Audience toggle — "I'm an HCP" / "I'm a Patient"
 * ============================================================= */

.audience-toggle {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  padding: var(--space-xs);
  border: var(--border-width) solid var(--color-toggle-border);
  border-radius: var(--radius-full);
}

.audience-toggle__option {
  display: flex;
  flex: 1 0 0;
  min-inline-size: 0;
  align-items: center;
  justify-content: center;
  padding: var(--space-s);
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  text-decoration: none;
}

/*
 * Held on one line only where there is room. Below the breakpoint these two
 * labels can neither wrap nor shrink, so a 200% text setting forces
 * horizontal scroll — a WCAG 1.4.4 reflow failure.
 */
@media (width >= 68rem) {
  .audience-toggle__option {
    white-space: nowrap;
  }
}

.audience-toggle__option[aria-current] {
  background-color: var(--color-white);
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-bold);
}

/* ===============================================================
 * Primary navigation
 *
 * One list serves both breakpoints. On mobile it is a panel beneath
 * the header; on desktop it is an inline row. Without JavaScript the
 * panel stays open, so every link remains reachable.
 * ============================================================= */

/*
 * The panel is full-bleed on mobile while its siblings stay within the
 * container gutter, so it breaks out by exactly the gutter on each side.
 */
.primary-nav {
  flex-basis: calc(100% + var(--container-margin) * 2);

  /*
   * The panel follows the audience toggle in source order but is drawn below
   * it on mobile. Moving the panel here rather than the toggle keeps the
   * desktop tab order — where every control is visible at once — matching its
   * visual order.
   */
  order: 1;
  margin-inline: calc(var(--container-margin) * -1);
}

.primary-nav__list {
  background-color: var(--color-surface);
}

.primary-nav__item {
  border-block-end: var(--border-width) solid var(--color-rule);
}

.primary-nav__item:first-child {
  border-block-start: var(--border-width) solid var(--color-rule);
}

.primary-nav__link {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);

  /* 72px per item, rule included. */
  min-block-size: calc(4.5rem - var(--border-width));
  padding-inline: var(--space-xl);
  padding-block: var(--space-m);
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  text-decoration: none;
}

.primary-nav__link[aria-current="page"] {
  font-weight: var(--font-weight-bold);
}

/* Active marker: 8px bar down the leading edge, full item height. */
.primary-nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0.5rem;
  background-color: var(--color-nav-surface);
}

.primary-nav__carat {
  flex-shrink: 0;
  inline-size: 0.375rem;
  block-size: 0.75rem;
}

/*
 * JS-enhanced state. The `js` class is set by a script in <head> before
 * paint, so the panel is only ever collapsed when script can reopen it.
 */
.js .primary-nav {
  display: none;
}

/*
 * Without scripting the panel is already open and the toggle has nothing to
 * act on, so the control is not rendered at all. A focusable button that
 * cannot work — and that reports aria-expanded="false" over an open panel —
 * is worse than no button.
 */
html:not(.js) .nav-toggle {
  display: none;
}

.js .site-header[data-nav-open="true"] .primary-nav {
  display: block;
}

/*
 * The open panel is an overlay, not a flow child: it sits flush under the
 * header, full-bleed, with the page beneath it unmoved at the same scroll
 * position and a scrim over the rest. As a flow child it would grow the header
 * and push the hero down by the panel's height.
 *
 * Positioned against .site-header (position: relative), so `100%` is the
 * header's own height in both places it appears: the panel starts at the
 * header's bottom edge, and on a short viewport (a landscape phone) it is
 * capped at what remains below the header and scrolls internally. Page scroll
 * is locked while it is open, so nothing else could reach the lower items.
 */
@media (width < 68rem) {
  .js .site-header[data-nav-open="true"] .primary-nav {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    max-block-size: calc(100dvh - 100%);
    margin-inline: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* 90% black scrim behind the open mobile panel. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 25;
  background-color: rgb(0 0 0 / 90%);
}

.nav-backdrop[hidden] {
  display: none;
}

/* ===============================================================
 * Important Safety Information
 *
 * Mobile: a bottom-pinned drawer that keeps a peek of the indication
 * text visible while collapsed — the safety copy has to be readable
 * without interaction. That peek is why the control is a button with
 * aria-expanded rather than <details>: a closed <details> hides its
 * content outright, with no cross-browser way to reveal a slice of it.
 *
 * Desktop: a static section in normal flow.
 * ============================================================= */

/* Above .isi-peek (z-index 20) so it covers the peek as the two meet. */
.isi {
  position: relative;
  z-index: 21;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-isi);
}

.isi__bar-wrap {
  background-color: var(--color-isi-title-bar);
}

.isi__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--isi-container-margin);
  padding-block: var(--space-m);
  color: var(--color-white);
  text-align: start;
}

.isi__title {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
}

.isi__body {
  padding-block: var(--space-s) var(--space-l);
}

.isi__section + .isi__section {
  margin-block-start: var(--space-m);
}

/* The one break in an otherwise uniform 16px rhythm. */
.isi__section + .isi__section--break {
  margin-block-start: var(--space-xl);
}

.isi__heading {
  margin-block-end: var(--space-xs);
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-isi-subhead);
}

.isi__heading--caps {
  text-transform: uppercase;
}

.isi__text,
.isi__list {
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-isi);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  letter-spacing: var(--tracking-isi-text);
}

.isi__text + .isi__text {
  margin-block-start: var(--space-s);
}

.isi__list {
  padding-inline-start: 1.4063rem; /* 22.5px */
  list-style: disc;
}

.isi__link {
  color: var(--color-link);
  font-weight: var(--font-weight-semibold);
}

/* ---------------------------------------------------------------
 * Always-visible safety peek
 *
 * `position: sticky`, never `fixed`. A sticky element keeps its place in
 * normal flow, so a full-page screenshot — which resizes the viewport to the
 * document height rather than scrolling — renders it where it belongs instead
 * of painting it once over the middle of the page.
 *
 * Sticky also does the swap for free: the peek can only stay pinned while its
 * containing block (.isi-peek-region) is in view, and that region ends exactly
 * where the full ISI begins. No scroll listener, no observer, no JS state, and
 * no `dvh` on anything load-bearing.
 * ------------------------------------------------------------- */

/*
 * The peek is deliberately the same box as .isi — same width, same radius,
 * same bar — because that is what makes the handover exact. Its height is
 * fixed and cancelled by an equal negative bottom margin, so it contributes
 * NOTHING to flow and rests precisely on the ISI's top edge. The ISI then
 * paints over it (higher z-index, opaque), so the two are never both legible.
 *
 * A fixed height, not a viewport fraction: `dvh` here would inflate to the
 * document height under a resize-based capture.
 */
.isi-peek {
  --isi-peek-height: 12rem; /* 192px */

  display: flex;
  position: sticky;
  flex-direction: column;
  inset-block-end: 0;
  z-index: 20;
  block-size: var(--isi-peek-height);
  margin-block-end: calc(var(--isi-peek-height) * -1);
  overflow: hidden;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-isi);
  transition:
    block-size var(--duration-base) var(--easing-standard),
    translate var(--duration-slow) var(--easing-standard),
    visibility 0s;
}

/*
 * Expanding only redefines the one custom property, so the height and the
 * cancelling margin stay in lockstep and the tray's flow contribution stays
 * zero — the page does not move when it opens. `min()` with a rem ceiling,
 * not a bare `dvh`, which would inflate under a resize-based capture.
 */
.isi-peek[data-expanded] {
  --isi-peek-height: min(32rem, 70dvh);
}

/*
 * Set by isi.js for the transient only — while the peek is still stuck and
 * the ISI is sliding up behind it. The peek slides down out of the viewport
 * as the ISI's own bar rises into it, and back up when the ISI scrolls away;
 * an instant swap reads as a jolt in both directions. A transform, never
 * `display` or a margin: the peek's flow space is already zero, and hiding it
 * must not move anything. Visibility still flips so the off-screen tray is
 * not focusable — delayed until the slide-out ends, immediate on the way back
 * in.
 */
.isi-peek[data-hidden] {
  translate: 0 100%;
  visibility: hidden;
  transition-delay: 0s, 0s, var(--duration-slow);
}

.isi-peek__bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-inline: var(--isi-container-margin);
  padding-block: var(--space-m);
  background-color: var(--color-isi-title-bar);
  color: var(--color-white);
  text-decoration: none;
}

.isi-peek__more {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-s);
  font-family: var(--font-heading);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-semibold);
}

.isi-peek__carat {
  flex-shrink: 0;
  inline-size: 1.1719rem; /* 18.75px */
  block-size: auto;
  rotate: 180deg;
}

.isi-peek__body {
  flex: 1;
  min-block-size: 0; /* let it shrink so overflow scrolls rather than spills */
  padding-block: var(--space-s) var(--space-l);
}

/* Expanded state — after the plain selectors so specificity ascends. */
.isi-peek[data-expanded] .isi-peek__carat {
  rotate: 0deg;
}

.isi-peek[data-expanded] .isi-peek__body {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------------
 * Desktop
 * ------------------------------------------------------------- */

@media (width >= 68rem) {
  .site-header__inner {
    flex-wrap: nowrap;
    gap: var(--space-xl);
    padding-block: 0;
  }

  .nav-toggle,
  .nav-backdrop {
    display: none;
  }

  .primary-nav {
    flex: 1 1 auto;
    order: 0;
    margin-inline: 0;
  }

  /* Undo the mobile collapse; ordered after the bare selector above so
     specificity ascends down the file. */
  .js .primary-nav {
    display: block;
  }

  .primary-nav__list {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .primary-nav__item,
  .primary-nav__item:first-child {
    border: 0;
  }

  .primary-nav__link {
    min-block-size: 6.0625rem; /* 97px nav row */
    padding-inline: clamp(var(--space-s), 1.4vw, var(--space-l));
    padding-block: 0;
    color: var(--color-white);
    font-size: var(--font-size-body);
  }

  /* Desktop active marker: a 6px bar flush to the top of the item. */
  .primary-nav__link[aria-current="page"]::before {
    inset-block: 0 auto;
    inset-inline: 0;
    inline-size: auto;
    block-size: 6px;
    background-color: var(--color-white);
  }

  .primary-nav__carat {
    display: none;
  }

  /* Source order already puts the toggle last, where it is drawn. */
  .audience-toggle {
    flex: 0 0 auto;
  }

  .audience-toggle__option {
    flex: 0 0 auto;
  }

  /*
   * The ISI box sits on the content column (1344px), not the full container
   * width, so its border and title bar line up with every section above it
   * rather than overhanging them by a gutter on each side.
   */
  .isi {
    max-inline-size: calc(
      var(--container-max) - var(--isi-container-margin) * 2
    );
    margin-inline: auto;
    border: var(--border-width) solid var(--color-isi-border);
    border-block-end: 0;
    border-start-start-radius: var(--radius-sm);
    border-start-end-radius: var(--radius-sm);
    background-color: var(--color-isi-surface);
    box-shadow: none;
  }

  .isi__bar-wrap {
    border-start-start-radius: var(--radius-sm);
    border-start-end-radius: var(--radius-sm);
  }

  /*
   * The peek takes the ISI's exact box on desktop — same width, same radius —
   * so that when it lands on the ISI's top edge the cover is pixel-exact and
   * the swap is invisible. A contained tray on the content column, not an
   * edge-to-edge bar.
   */
  .isi-peek {
    --isi-peek-height: 9.25rem; /* 148px */

    max-inline-size: calc(
      var(--container-max) - var(--isi-container-margin) * 2
    );
    margin-inline: auto;
    border: var(--border-width) solid var(--color-isi-border);
    border-block-end: 0;
    border-start-start-radius: var(--radius-sm);
    border-start-end-radius: var(--radius-sm);
    background-color: var(--color-isi-surface);
    box-shadow: none;
  }
}

/* ===============================================================
 * Shared page furniture
 *
 * These live here rather than in a page stylesheet because every page carries
 * them: the footer holds the legal links and job code, .button is the CTA
 * primitive, and components.css assumes .page exists on every page for the ISI
 * drawer clearance. A change here reaches every page.
 * ============================================================= */

.section {
  padding-block: var(--space-2xl);
}

.section__rule {
  inline-size: calc(100% - var(--container-margin) * 2);
  max-inline-size: calc(var(--container-max) - var(--container-margin) * 2);
  margin-inline: auto;
  border: 0;
  border-block-start: var(--border-width) solid var(--color-rule);
}

.eyebrow {
  margin-block-end: var(--space-s);
  color: var(--color-text-eyebrow);
  font-family: var(--font-mono);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.prose {
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--tracking-body-lg);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  padding-inline: var(--space-l);

  /* 44px tall on every breakpoint. The min-size is the exact number; the
     padding only matters once a label wraps. */
  min-block-size: 2.75rem;
  padding-block: 0.7rem;
  border-radius: var(--radius-full);
  background-color: var(--color-cta);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.button:hover {
  background-color: oklch(from var(--color-cta) calc(l - 0.05) c h);
}

.button--sm {
  font-size: var(--font-size-ui);
}

/*
 * Secondary CTA — navy text and border on no fill. Drawn only on the 500 page
 * so far, beside the filled primary. No hover state is specified for either
 * button; inverting to the border colour keeps `.button:hover`'s darkened CTA
 * red off a transparent navy control, and cannot be mistaken for the primary.
 */
.button--outline {
  border: var(--border-width) solid var(--color-brand-primary);
  background-color: transparent;
  color: var(--color-brand-primary);
}

.button--outline:hover {
  background-color: var(--color-brand-primary);
  color: var(--color-white);
}

/* ===============================================================
 * Video player — the no-JS baseline and its lightbox enhancement
 *
 * Shared by the HCP home page and the patient Learn About page, so a change
 * here reaches both. This is progressive-enhancement machinery rather than
 * page values: a control that cannot act must never render, and duplicating
 * that guarantee into a second file is how one copy stops matching the other.
 *
 * Each page's own RHYTHM stays page-scoped either side of this block — the
 * body padding, lede margin and play-glyph overrides live in home.css and
 * patient-learn-about.css.
 * ============================================================= */

/*
 * The native <video> is the no-JS baseline — always real, always playable,
 * poster and native controls included. .video__poster and .video__play exist
 * only to be shown BY SCRIPT (html.js below), the same rule as the hamburger:
 * a control that cannot act does not render.
 */
.video__player {
  display: block;
  position: relative;
  inline-size: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--color-card-surface);
}

.video__native {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.video__poster,
.video__play {
  display: none;
}

/* Scoped to the player on purpose: the lightbox script MOVES this element
   into the dialog's stage, where it must render. An unscoped hide follows it
   there and plays the audio into an invisible box. */
html.js .video__player .video__native {
  display: none;
}

html.js .video__poster {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* Both logical sizes, or the glyph's height attribute survives the width
   constraint and it renders squashed. */
.video__play img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* The play glyph is 49.84px wide on mobile and 92.19px on desktop. */
html.js .video__play {
  display: block;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 3.115rem;
  block-size: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  translate: -50% -50%;
}

/*
 * Lightbox. No desktop design exists for this state, so the video stage is
 * capped at a measure taken from the site's own scale.
 */
.video-modal {
  position: fixed;
  inset: 0;
  max-inline-size: 100vw;
  max-block-size: 100dvh;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border: 0;
  background: none;
}

.video-modal::backdrop {
  background-color: rgb(0 0 0 / 90%);
}

.video-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal__stage {
  position: relative;
  inline-size: min(91.5%, 60rem);
  aspect-ratio: 16 / 9;
}

.video-modal__stage video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border-radius: var(--radius-sm);
  background-color: black;
}

.video-modal__close {
  position: absolute;
  inset-block-start: var(--space-l);
  inset-inline-end: var(--space-l);
  z-index: 1;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: var(--space-s);
  border: 0;
  border-radius: var(--radius-full);
  background-color: rgb(255 255 255 / 10%);
  cursor: pointer;
}

.video-modal__close img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.site-footer {
  background-color: var(--color-footer-surface);
  color: var(--color-white);
}

/*
 * Mobile: ONE link per row, 70px tall, divided by horizontal rules — a
 * full-width stack on every page, never columns. Desktop keeps the 7-across
 * row.
 */
.site-footer__links {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
}

.site-footer__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 100%;
  min-block-size: 4.375rem; /* 70px rows */
  padding: var(--space-m) var(--space-xl); /* 32px inline */
  border-block-end: var(--border-width) solid var(--color-footer-divider);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--tracking-footer-link);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;

  /* Each track is `1fr` — i.e. minmax(auto, 1fr) — so an unbreakable word like
     PHARMACOVIGILANCE would otherwise force the track past its share and push
     the whole grid wider than the viewport. */
  overflow-wrap: anywhere;
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
  text-align: center;
}

.site-footer__mark {
  inline-size: 11.5rem; /* 184px */
  block-size: auto;
}

/*
 * Three lines of 10px type in a 335px measure. The 1.4 line-height comes from
 * the block's own geometry: 42px over three lines.
 */
.site-footer__copy {
  max-inline-size: 21rem; /* 335px */
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--font-size-legal);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug); /* 1.4 → 14px at 10px */
  letter-spacing: var(--tracking-footer-copy);
  text-align: center;
}

@media (width >= 68rem) {
  .section {
    padding-block: 4.5rem;
  }

  .site-footer__links {
    grid-template-columns: repeat(7, 1fr);
    border-block-end: var(--border-width) solid var(--color-footer-divider);
  }

  /* Desktop trades the mobile row dividers for a column scheme: vertical
     rules between cells, one horizontal rule under the whole row. */
  .site-footer__links a {
    min-block-size: 8.875rem; /* 142px */
    border-block-end: 0;
    border-inline: var(--border-width) solid var(--color-footer-divider);
    padding-inline: var(--space-xl);
  }
}

/* ===============================================================
 * SHARED CONTENT COMPONENTS
 *
 * Every one of these is consumed by more than one page — Efficacy reuses the
 * stat cards, the cohort block and the affordability band; Affordability and
 * FAQ reuse the band; every page uses .section__title and .footnote. A change
 * here reaches all of them.
 * ============================================================= */

/* ===============================================================
 * Shared section furniture
 * ============================================================= */

.section__title {
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-h1);
  letter-spacing: var(--tracking-display);
}

/* ===============================================================
 * Page hero — the band, the title and the accent rule
 *
 * Shared by Efficacy and Affordability, which agree on the grey band, the 40px
 * navy title (line-height 1.1) and the 80px accent rule. Everything else about
 * a page's hero — column arrangement, gap, whether it carries a photo — is
 * page rhythm and stays in that page's own stylesheet.
 * ============================================================= */

.page-hero {
  background-color: var(--color-card-surface);
}

.page-hero__title {
  margin: 0;
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-display);
}

/*
 * 80px, and it does not stretch — an accent rather than a divider.
 * Affordability's benefit cards carry their own 80px rule at
 * `.benefit-card__rule` rather than reusing this one, since the two
 * components have nothing else in common.
 */
.page-hero__rule {
  inline-size: 5rem;
  margin: 0;
  border: 0;
  border-block-start: var(--border-width) solid var(--color-rule);
}

/*
 * FAQ, Contact Us, 404 and 500 draw this hero on WHITE rather than the grey
 * band Efficacy and Affordability use. Everything else about it is shared, so
 * it is a modifier and not a second component.
 */
.page-hero--plain {
  background-color: var(--color-surface);
}

/*
 * The mobile title pair (28px/1.4 against the shared 40px/1.1), scoped to
 * --plain on purpose: Efficacy and Affordability take the same 28px step but
 * keep their own page-scoped copies of it.
 */
@media (width < 68rem) {
  .page-hero--plain .page-hero__title {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-snug);
  }
}

/* ===============================================================
 * Page references block
 *
 * Shared by Efficacy and FAQ, which agree on the desktop values; FAQ's smaller
 * mobile sizes are overrides in faq.css. Page-level and numbered independently
 * of the ISI partial's own list — both lists are correct in their own block
 * and are not reconciled.
 * ============================================================= */

/* 28px, not .section__title's 40px. */
.references__title {
  margin: 0 0 var(--space-s);
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-display);
}

.references__list {
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: var(--font-size-body);
  line-height: var(--line-height-loose);
  letter-spacing: var(--tracking-isi-text);
}

.references__list p + p {
  margin-block-start: 0.75rem; /* 12px */
}

/* ===============================================================
 * Efficacy stat cards
 * ============================================================= */

.cohort {
  margin-block: var(--space-xl) var(--space-l);
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-display);
}

.stat-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
  padding-block: var(--space-2xl);
  padding-inline: var(--space-l);
  border-radius: var(--radius-sm);
  background-color: var(--color-card-surface);
  text-align: center;
}

.stat-card__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
}

.stat-card__icon {
  flex-shrink: 0;
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.stat-card__label {
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
}

.stat-card__figure {
  display: grid;
  place-items: center;
  inline-size: 100%;
}

.stat-card__chart {
  /*
   * The cap is the CARD width, which differs per page — 324px on home, 437px
   * on Efficacy. Each page sets the property; this default is only the home
   * value, so a hard-coded cap here would clamp every other page's charts.
   */
  inline-size: 100%;
  max-inline-size: var(--stat-card-chart-max, 20.25rem);
  block-size: auto;
}

.stat-card__value {
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  letter-spacing: var(--tracking-body-lg);
}

.stat-card__note {
  max-inline-size: 17.375rem; /* 278px */
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: 0.015em;
}

.stat-card__note b {
  font-weight: var(--font-weight-semibold);
}

/* Donut — two stacked arcs with the value centred over them. */
.donut {
  display: grid;
  position: relative;
  place-items: center;
  inline-size: 7.25rem; /* 116px */
  block-size: 7.25rem;
}

.donut img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.donut__value {
  position: relative;
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-body-lg);
}

.efficacy__cta {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-xl);
}

/* ---------------------------------------------------------------
 * Mobile efficacy — a different component, not a reflow of the desktop cards.
 * Per cohort it is ONE card containing the heading, the clinical-response
 * sentence, then three icon+label / icon+value rows separated by rules. No
 * donuts, no charts.
 *
 * Rules are ordered plain-before-compound so specificity ascends.
 * ------------------------------------------------------------- */

@media (width < 68rem) {
  .cohort-block {
    padding-block: var(--space-l);
    border-radius: var(--radius-sm);
    background-color: var(--color-card-surface);
  }

  /* The two cohort cards are separated, not flush. */
  .cohort-block + .cohort-block {
    margin-block-start: var(--space-xl);
  }

  .cohort {
    margin-block: 0 1.25rem;
    padding-inline: var(--space-m);
    font-size: var(--font-size-body-lg);
    letter-spacing: -0.01em;
  }

  .stat-grid {
    gap: var(--space-l);
  }

  .stat-card {
    display: block;
    padding: 0;
    border-radius: 0;
    background: none;
    text-align: start;
  }

  .stat-card__chart {
    display: none;
  }

  /* Metric groups: a label row (icon + text) then a value row (text only). */
  .stat-card__head,
  .stat-card__value {
    display: flex;
    gap: var(--space-m);
    align-items: center;
    justify-content: flex-start;
    padding-inline: var(--space-l);
    text-align: start;
  }

  .stat-card__head {
    margin-block-end: var(--space-s);
  }

  .stat-card__label {
    color: var(--color-text-body);
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    letter-spacing: 0.015em;
  }

  .stat-card__value {
    /* The value aligns with its LABEL, not with the card edge — both sit 64px
       in. The label row gets there via its 24px icon plus the 16px gap; the
       value row has no icon, so the same offset has to be spacing. */
    padding-inline-start: calc(var(--space-l) + 1.5rem + var(--space-m));
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body);
    letter-spacing: 0.015em;
  }

  .stat-card__note {
    max-inline-size: none;
    padding-inline: var(--space-m);
    color: var(--color-black);
    font-size: var(--font-size-body);
    line-height: var(--line-height-caption);
    letter-spacing: 0.015em;
  }

  /* Rules between metric groups. */
  .stat-card + .stat-card {
    padding-block-start: var(--space-l);
    border-block-start: var(--border-width) solid var(--color-rule);
  }

  /*
   * Card 1 carries the clinical response: the donut and the "Clinical
   * Response" label are dropped and the sentence leads instead.
   *
   * Opt-in by modifier, never by :first-child — keyed to position it would
   * also fire on Efficacy's mobile lead card, which keeps its donut.
   */
  .stat-card--merged .stat-card__head,
  .stat-card--merged .stat-card__figure {
    display: none;
  }
}

/* ===============================================================
 * Access & Affordability
 * ============================================================= */

/*
 * This photograph runs off the left edge of the page with no gutter, on mobile
 * as well as desktop. The negative margin is the distance from the container's
 * content edge back to the viewport edge, so the image lands on the edge at
 * any width rather than at a guessed offset.
 *
 * `100vw` includes a classic scrollbar while the container is centred in the
 * layout viewport, so the pull overshoots by half a scrollbar. That is the
 * safe direction — it can only bleed slightly past the edge, never leave a
 * visible gap — and it self-corrects to 0 with overlay scrollbars.
 */
.affordability__media {
  margin-inline-start: calc(
    -1 *
      max(
        var(--container-margin),
        (100vw - var(--container-max)) / 2 + var(--container-margin)
      )
  );
}

.affordability__media img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-sm);
}

.affordability__lede {
  margin-block: var(--space-l);
}

/* 12px between the band's three lines on every instance that carries it, at
   both breakpoints. */
.affordability__lede p + p {
  margin-block-start: 0.75rem;
}

.footnote {
  margin-block-start: var(--space-l);
  color: var(--color-text-body);
  font-family: var(--font-support);
  font-size: var(--font-size-footnote);
  line-height: 1.3;
  letter-spacing: 0.015em;
}

/* ===============================================================
 * Shared content components — desktop
 * ============================================================= */

@media (width >= 68rem) {
  /* Headline left, lede right — a generic page-intro layout, deliberately not
     named after the first page that used it. Both the home page and Efficacy
     draw it this way, 48px apart. */
  .section-intro {
    display: grid;
    gap: var(--gutter);
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .affordability {
    display: grid;
    gap: var(--gutter);
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}