/* ==========================================================================
   22 Remote Patient Monitoring — shared stylesheet
   Mobile-first. No build step, no framework, no webfont.
   Depends on brand.css for all colour and type tokens.
   ========================================================================== */

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

/* Height of the sticky masthead in its scrolled/compact state, measured at
   63px in Chrome at both 1280px and 375px (the mobile nav collapses to one
   row, so the two agree). Anchor targets are offset by it plus a little air
   so a jumped-to heading never lands underneath the header. */
:root {
  /* Page wash and band, both desaturated tints of --brand-primary over white
     (6% and 14%) rather than new hues. Measured against the inks that sit on
     them — on the wash: --text 13.05:1, --text-muted 6.32:1, --brand-primary
     11.58:1; on the band: 11.19:1, 5.42:1, 9.93:1. All clear AA. White cards
     lift off the wash at 1.12:1 and off the band at 1.30:1, helped by their
     existing border.

     These live in site.css, not brand.css, so brand.css stays byte-identical
     to the copy /bp-guide/ consumes. */
  --page: #f0f3f4;
  --surface-sunken: #dbe3e6;
  /* brand accent at 32% over the page wash */
  --hl-tone: #a3dfe5;
  /* brand primary at 30% over white */
  --dev-fill: #b3c2ca;

  /* Measured in Chrome at both 1280px and 375px: the sticky wrapper is 98px
     at rest and 72px once compact (56px panel inside an 8px gutter). */
  --header-h-stuck: 72px;
  --anchor-offset: calc(var(--header-h-stuck) + 0.75rem);
}
html {
  scroll-padding-top: var(--anchor-offset);
}
:where([id]) {
  scroll-margin-top: var(--anchor-offset);
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1,
h2,
h3,
h4 {
  color: var(--brand-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-md);
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.85rem, 5.2vw, 2.9rem);
  letter-spacing: -0.02em;
}
/* The hero headline carries the page, so it scales further than other h1s and
   sets tighter. clamp() keeps it sane from 375px up. */
.hero h1 {
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-lg);
  /* Base ink is the near-black --text; only the highlighted span carries
     --brand-primary, so the two are told apart by the underline rather than
     by hue alone (they are close in value: 13.05:1 and 11.58:1 on the wash). */
  color: var(--text);
  text-wrap: balance;
}

/* Highlighted phrase in the hero headline.
   Measured: #013550 on the page wash 11.58:1, and 8.76:1 where glyphs overlap
   the underline tone (#a3dfe5, the brand accent at 32% over the wash). The
   underline itself is 1.32:1 against the wash — soft, but it is decoration,
   not a carrier of meaning.

   Drawn with a background gradient rather than text-decoration or box-shadow
   so thickness and vertical position are both controllable, and with
   box-decoration-break: clone so a wrapped phrase paints an underline under
   every line fragment instead of one stretched box. */
.hero h1 .hl {
  color: var(--brand-primary);
  background-image: linear-gradient(var(--hl-tone), var(--hl-tone));
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 0.92em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
h2 {
  font-size: clamp(1.4rem, 3.6vw, 2rem);
}
h3 {
  font-size: 1.125rem;
}

p {
  margin: 0 0 var(--space-md);
  max-width: var(--measure);
}

a {
  color: var(--brand-primary);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}

ul,
ol {
  max-width: var(--measure);
  padding-left: 1.15rem;
}
li {
  margin-bottom: var(--space-xs);
}

/* Visible, high-contrast focus for every interactive element ------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.section--inverse a:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--focus-ring-inverse);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-primary);
  color: var(--text-inverse);
  padding: var(--space-sm) var(--space-md);
  z-index: 200;
}
.skip-link:focus {
  left: var(--space-md);
  top: var(--space-md);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (min-width: 40em) {
  .container {
    padding-inline: var(--space-lg);
  }
}

/* ---------------------------------------------------------------- header */

/* Sticky masthead.
   Solid --surface rather than translucent. Measured first: nav ink #1c2b33
   over an 80%-white header sitting on the worst content that actually passes
   underneath (the #013550 inverse CTA and footer, and the hero photo's
   shadows) still clears 9.83:1, so translucency would have been legible —
   it is declined for robustness, not contrast. Solid needs no backdrop-filter
   support and costs nothing to composite on a phone. */
/* The sticky element is a transparent gutter painted in the page wash; the
   white rounded panel sits inset within it. Painting the gutter rather than
   leaving it clear means content scrolling past disappears cleanly above the
   panel instead of sliding through the gap. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--page);
  padding: var(--space-xs) var(--space-md);

  /* The compact-on-scroll geometry rides on inherited custom properties
     rather than descendant selectors, so the children each keep one simple
     rule and the whole header resizes by re-declaring two values below. */
  --hdr-pad: var(--space-sm);
  --hdr-logo: 208px;
}
/* Set by site.js once the page has scrolled past the top. */
.site-header.is-stuck {
  --hdr-pad: var(--space-2xs);
  --hdr-logo: 170px;
}

/* The panel itself. .container already gives it max-width, auto margins and
   inline padding; this adds the surface, the radius and the lift. */
.site-header__inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(1, 53, 80, 0.04), 0 6px 18px rgba(1, 53, 80, 0.05);
  transition: box-shadow 0.18s ease, padding-block 0.18s ease;
}
/* Deepen once scrolled so the panel reads as a layer above the content. */
.site-header.is-stuck .site-header__inner {
  box-shadow: 0 2px 4px rgba(1, 53, 80, 0.08), 0 10px 28px rgba(1, 53, 80, 0.10);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--hdr-pad);
  flex-wrap: wrap;
  /* The global prefers-reduced-motion block collapses every transition to
     0.01ms, so this snaps rather than animates when reduced motion is set. */
  transition: padding-block 0.18s ease;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
/* Source artwork is 563px wide; capped at 208px so it stays sharp on 2x,
   narrowing to 170px once the header is stuck. */
.site-logo img {
  width: var(--hdr-logo);
  max-width: 52vw;
  transition: width 0.18s ease;
}

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin: 0;
  padding: 0;
}
.site-nav li {
  margin: 0;
}
.site-nav a {
  display: inline-block;
  padding-block: var(--space-2xs);
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--text);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover {
  border-bottom-color: var(--brand-accent);
}
.site-nav a[aria-current="page"] {
  color: var(--brand-primary);
  font-weight: 600;
  border-bottom-color: var(--brand-primary);
}

/* ------------------------------------------------- mobile nav disclosure */
/* Without JS the nav stays exactly as it was — visible, wrapping, reachable.
   The collapse is scoped to .js so a script failure can never hide the
   navigation. */

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-primary);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 17px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle__bars {
  position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle__bars::before {
  top: -5px;
}
.nav-toggle__bars::after {
  top: 5px;
}

@media (max-width: 39.99em) {
  /* Logo left, menu button right — one compact row. */
  .site-header__inner {
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .js .nav-toggle {
    display: inline-flex;
  }
  /* Collapsed by default; the button reveals it as a full-width panel. */
  .js .site-nav {
    display: none;
    flex-basis: 100%;
  }
  .js .site-nav[data-open="true"] {
    display: block;
    border-top: 1px solid var(--border);
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    /* The header is sticky, so an open panel must never grow taller than the
       screen — matters most in landscape, where the viewport is ~375px tall. */
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .js .site-nav[data-open="true"] ul {
    flex-direction: column;
    gap: 0;
  }
  .js .site-nav[data-open="true"] a {
    display: block;
    padding: var(--space-sm) var(--space-2xs);
    border-bottom: 0;
    border-left: 3px solid transparent;
    padding-left: var(--space-sm);
  }
  .js .site-nav[data-open="true"] a[aria-current="page"] {
    border-left-color: var(--brand-primary);
    background: var(--brand-primary-100);
  }
  /* No-JS fallback keeps the old centred, wrapping treatment. */
  html:not(.js) .site-header__inner {
    justify-content: center;
    text-align: center;
  }
  html:not(.js) .site-nav ul {
    justify-content: center;
    gap: var(--space-xs) var(--space-md);
  }
}

/* --------------------------------------------------------------- section */

.section {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--border);
}
.section:first-of-type {
  border-top: 0;
}
.section--sunken {
  background: var(--surface-sunken);
  border-top-color: transparent;
}
.section--inverse {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-top-color: transparent;
}
.section--inverse h2,
.section--inverse h3 {
  color: var(--text-inverse);
}
.section--inverse p {
  color: var(--text-on-inverse-muted);
}
.section--inverse a {
  color: var(--text-inverse);
}

@media (min-width: 48em) {
  .section {
    padding-block: var(--space-3xl);
  }
}

.section__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-sm);
}
.section--inverse .section__label {
  color: var(--brand-accent);
}

.lede {
  font-size: 1.125rem;
  color: var(--text-muted);
}
.section--inverse .lede {
  color: var(--text-on-inverse-muted);
}

/* ------------------------------------------------------------------ hero */

.hero {
  padding-block: var(--space-2xl) var(--space-2xl);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 48em) {
  .hero {
    padding-block: var(--space-3xl);
  }
}

.hero__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-primary);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--brand-accent);
  padding: var(--space-2xs) var(--space-sm);
  margin-bottom: var(--space-lg);
}

.hero__lede {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--text-muted);
  max-width: 38rem;
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 2px solid var(--brand-primary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn--primary {
  background: var(--brand-primary);
  color: var(--text-inverse);
}
.btn--primary:hover {
  background: var(--brand-primary-900);
  border-color: var(--brand-primary-900);
}
.btn--secondary {
  background: transparent;
  color: var(--brand-primary);
}
.btn--secondary:hover {
  background: var(--brand-primary-100);
}
.section--inverse .btn--primary {
  background: var(--text-inverse);
  color: var(--brand-primary);
  border-color: var(--text-inverse);
}
.section--inverse .btn--primary:hover {
  background: var(--brand-primary-200);
  border-color: var(--brand-primary-200);
}
.section--inverse .btn--secondary {
  color: var(--text-inverse);
  border-color: var(--text-inverse);
}
.section--inverse .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ----------------------------------------------------------------- grids */

.grid {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
@media (min-width: 34em) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 48em) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 62em) {
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
}
.card h3 {
  margin-bottom: var(--space-xs);
}
.card p:last-child {
  margin-bottom: 0;
}
.card--plain {
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------- workflow (CSS/SVG) */

.workflow {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 0;
  max-width: none;
  display: grid;
  gap: 0;
}

.workflow__step {
  position: relative;
  padding: 0 0 var(--space-xl) var(--space-xl);
  margin: 0;
  border-left: 2px solid var(--brand-accent);
}
.workflow__step:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.workflow__num {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--text-inverse);
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.workflow__step h3 {
  margin: 0.15rem 0 var(--space-2xs);
}
.workflow__step p {
  margin-bottom: 0;
  color: var(--text-muted);
}

@media (min-width: 56em) {
  .workflow {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }
  .workflow__step {
    padding: var(--space-xl) 0 0 0;
    border-left: 0;
    border-top: 2px solid var(--brand-accent);
  }
  .workflow__step:last-child {
    border-top-color: var(--brand-accent);
  }
  .workflow__num {
    left: 0;
    top: 0;
    transform: translateY(-50%);
  }
}

/* ----------------------------------------------------------- definitions */

.deflist {
  margin: var(--space-xl) 0 0;
  max-width: var(--measure);
}
.deflist > div {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border);
}
.deflist > div:last-child {
  border-bottom: 1px solid var(--border);
}
.deflist dt {
  font-weight: 700;
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
}
.deflist dd {
  margin: var(--space-2xs) 0 0;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- notice */

.notice {
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--brand-accent);
  background: var(--surface-sunken);
  padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-xl);
  max-width: var(--measure);
  font-size: 0.95rem;
  color: var(--text-muted);
}
.notice p:last-child {
  margin-bottom: 0;
}
.notice strong {
  color: var(--text);
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--surface-inverse);
  color: var(--text-on-inverse-muted);
  padding-block: var(--space-xl);
  font-size: 0.9rem;
}
.site-footer h2 {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: var(--space-sm);
}
.site-footer a {
  color: var(--text-inverse);
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer__grid {
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 40em) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}
.site-footer__legal {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.85rem;
}
.site-footer__legal p {
  margin-bottom: var(--space-2xs);
  max-width: none;
}

/* --------------------------------------------------------------- utility */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------- media band */
/* Text beside a photo, never over it. The hero photograph spans a wide
   luminance range (5th–95th percentile 0.07–0.62 relative luminance), so
   overlaid text fails WCAG in both directions — white reaches only 1.57:1
   against the bright wall, and --brand-primary only 1.49:1 against the dark
   sweater. No single ink passes without a heavy scrim, which would fight the
   clinical tone, so the type sits alongside instead. */

.band {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 52em) {
  .band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .band--text-first > .band__media {
    order: 2;
  }
}

.band__media {
  margin: 0;
}
/* aspect-ratio + width/height on the <img> reserve the box before the file
   arrives, so nothing reflows on load. */
.band__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.band__body > :last-child {
  margin-bottom: 0;
}

/* Hero: a deliberately unequal split. The text column takes the larger share
   and the photograph runs off the right edge of the viewport rather than
   stopping at the container margin. */
.hero .band {
  gap: var(--space-xl);
}
@media (min-width: 52em) {
  .hero .band {
    /* Tracks chosen so that once the (capped) bleed is added back to the image,
       the rendered split lands on ~55/45 and stays there: the bleed no longer
       grows without limit, so the image cannot overtake the text on a wide
       monitor the way it did above ~1750px before. */
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: center;
  }
  /* Full-bleed right. Percentage margins on a grid item resolve against the
     grid AREA, not the container, so the usual calc(50% - 50vw) trick
     overshoots badly here. Compute the gutter explicitly instead: half the
     leftover viewport beyond the container, plus the container's own padding.
     max() keeps it at zero once the viewport is narrower than the container. */
  .hero .band__media {
    /* Bleeds right, but capped at 8rem so it stops short of the edge on wide
       monitors instead of ballooning. Below the container width the gutter is
       just the container padding, so it still reaches the edge there. */
    margin-right: calc(
      -1 * min(8rem, max(0px, (100vw - var(--container)) / 2) + var(--space-lg))
    );
  }
  .hero .band__media img {
    border-radius: 14px 0 0 14px;
    border-right: 0;
    aspect-ratio: 4 / 3;
  }
}
/* vw units include the scrollbar in some engines, so the bleed can overhang by
   a few pixels; clip rather than let the page scroll sideways. */
.hero {
  overflow-x: clip;
}
.hero .band__body .hero__lede {
  max-width: 34rem;
}

.band__caption {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: var(--space-sm) 0 0;
  max-width: none;
}


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

/* --------------------------------------------------------- card artwork */
/* Same line language as the capability strip: one stroke weight, one colour,
   inherited via currentColor. Decorative only — every card's meaning is in
   its heading and prose, so the SVGs are aria-hidden. */

.card__fig,
.card__icon {
  width: 40px;
  height: 40px;
  color: var(--brand-primary);
  margin-bottom: var(--space-sm);
}
.card__icon {
  width: 44px;
  height: 44px;
}


/* ------------------------------------------------------------ CPT table */

.table-scroll {
  overflow-x: auto;
  margin-top: var(--space-xl);
  max-width: var(--measure);
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* The outline lives on the table itself, not the scroll wrapper: a <caption>
   box sits outside the table's border box, so this keeps the caption above the
   outline and lets the dark header row occupy the top edge with its corners
   clipped. Requires border-collapse: separate for the radius to render. */
table.cpt {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  overflow: hidden;
}
table.cpt caption {
  text-align: left;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding-bottom: var(--space-sm);
  max-width: var(--measure);
}
table.cpt thead th {
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-sm) var(--space-md);
  white-space: nowrap;
}
/* Column hints so "16 or more transmission days" breaks once, not twice. */
table.cpt thead th:nth-child(1) {
  width: 6.5rem;
}
table.cpt thead th:nth-child(3) {
  width: 14rem;
}
.cpt__thr {
  padding-inline: var(--space-sm) var(--space-md);
}
table.cpt tbody th,
table.cpt tbody td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.cpt thead th {
  border-bottom: 1px solid var(--brand-primary);
}
/* Every row is white and separated by a rule. Striping was dropped: the light
   stripe sat too close to the band tone behind the table and the pattern read
   as noise rather than structure. */
table.cpt tbody tr {
  background: var(--surface);
}
table.cpt tbody tr:last-child th,
table.cpt tbody tr:last-child td {
  border-bottom: 0;
}
.cpt__code {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 700;
  color: var(--brand-primary);
  white-space: nowrap;
}
.cpt__thr {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
}

.table-hint {
  display: none;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* Below 40em the three columns restack as labelled rows — no silent
   overflow, and no horizontal scrolling on a phone. */
@media (max-width: 39.99em) {
  /* Restacked as cards, so the wrapper outline would box the whole stack. */
  .table-scroll {
    overflow-x: visible;
    background: none;
    border: 0;
    border-radius: 0;
  }
  table.cpt thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  table.cpt tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-top: 3px solid var(--brand-primary);
    border-radius: var(--radius-sm);
    background: var(--surface) !important;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
  }
  table.cpt tbody th,
  table.cpt tbody td {
    display: block;
    padding: 0;
    border-bottom: 0;
  }
  .cpt__code {
    font-size: 1.15rem;
    margin-bottom: var(--space-xs);
  }
  table.cpt tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: var(--space-sm) 0 var(--space-2xs);
  }
}

/* Between 40em and the point the table stops needing it, show the scroll
   affordance rather than letting a column disappear off the edge. */
@media (min-width: 40em) and (max-width: 52em) {
  .table-hint {
    display: block;
  }
}

/* ---------------------------------------------------- icon chips + grid */

/* Every inline icon becomes a soft tinted rounded square. Done by styling the
   existing <svg> directly — padding inside a border-box element leaves a 26px
   glyph in a 52px tile — so no markup changed to introduce the chips. */
.card__icon,
.card__fig {
  width: 52px;
  height: 52px;
  padding: 13px;
  border-radius: 14px;
  background: var(--brand-primary-100);
  color: var(--brand-primary);
  margin-bottom: var(--space-md);
}


/* Notices sit on the band inside sunken sections, so lift them to white. */
.section--sunken .notice {
  background: var(--surface);
}

/* ------------------------------------------------------------- dialysis */
/* The lead-market section: given more air than its neighbours, a larger
   heading, and a photograph, so it reads as the centrepiece rather than a
   text block on a coloured band. */

.dialysis {
  padding-block: var(--space-3xl);
}
.dialysis h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-bottom: var(--space-lg);
}

.dialysis__lead {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  margin-bottom: var(--space-3xl);
}
@media (min-width: 52em) {
  .dialysis__lead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: var(--space-2xl);
  }
}
.dialysis__lead .lede {
  font-size: 1.2rem;
  color: var(--text-inverse);
}

.dialysis__media {
  margin: 0;
}
.dialysis__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
}

.dialysis__points {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 48em) {
  .dialysis__points {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
  }
}
.dialysis__points > li {
  margin: 0;
  padding-top: var(--space-md);
  border-top: 2px solid var(--brand-accent);
}
.dialysis__points strong {
  display: block;
  color: var(--text-inverse);
  font-size: 1.05rem;
  margin-bottom: var(--space-xs);
}
.dialysis__points span {
  display: block;
  color: var(--text-on-inverse-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* -------------------------------------------------- device illustrations */
/* The four "What we monitor" devices deliberately diverge from the thin line
   glyphs elsewhere: they are two-tone — a soft brand tint filling the body,
   a darker brand stroke for detail — so each reads as its actual device at a
   glance. They are consistent with each other, which is what matters here. */

/* A fixed-ratio slot so a product photograph can replace the illustration
   later without any layout change: swap the <svg> for an <img> and it fills
   the same box. */
.card__media {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--brand-primary-100);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: var(--space-md);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dev {
  width: 96px;
  height: 96px;
}
/* --dev-fill is brand primary at 30% over white. --brand-primary-200 was too
   close to the slot's --brand-primary-100 (1.18:1) for the fill to register;
   this sits at 1.56:1 against it, which reads as two tones without shouting. */
.dev .f {
  fill: var(--dev-fill);
  stroke: var(--brand-primary);
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.dev .i {
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------ providers hero + eligibility */

/* Providers hero: the headline runs full width, then the lede sits in a tinted
   panel beside the photograph so it reads as a statement rather than body copy.
   The panel is top-aligned (align-items: start) — stretching it to the photo's
   height left a band of dead space above and below the text. */
.hero--stacked h1 {
  font-size: clamp(2.1rem, 5vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--text);
  max-width: 20ch;
}
.hero__split {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  align-items: start;
}
@media (min-width: 52em) {
  .hero__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }
}
.pullquote {
  background: var(--brand-primary-100);
  border-left: 5px solid var(--brand-accent);
  border-radius: 0 14px 14px 0;
  padding: var(--space-xl);
}

/* The taller vertical padding exists only to bring the panel closer to the
   photo's height in the two-column layout. Stacked, there is nothing to match
   and it would just be dead height. */
@media (min-width: 52em) {
  .hero__split .pullquote { padding: var(--space-2xl) var(--space-xl); }
}
/* Measured: --brand-primary on --brand-primary-100 is 11.01:1. */
.pullquote p {
  margin: 0;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  color: var(--brand-primary);
  max-width: none;
}
/* 3:2 rather than 4:3: with the panel top-aligned it no longer stretches, so a
   4:3 photo ran ~200px past the bottom of the panel and the gap simply moved
   outside it. The shorter ratio brings the two columns close to level. */
.hero__split .band__media img {
  aspect-ratio: 3 / 2;
  border-radius: 14px;
}

/* Eligibility criteria: a checklist across the full width rather than a bullet
   list in a narrow column. The mark reuses the two-tone language of the device
   illustrations. */
.criteria {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 48em) {
  .criteria {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl) var(--space-2xl);
  }
}
.criteria > li {
  margin: 0;
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.crit-ico {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.crit-ico .f {
  fill: var(--dev-fill);
  stroke: var(--brand-primary);
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.crit-ico .i {
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.criteria strong {
  display: block;
  color: var(--brand-primary);
  font-size: 1rem;
  margin-bottom: 2px;
}
.criteria span {
  display: block;
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* ------------------------------------------------ capability ledger */

/* A ruled editorial list rather than a card grid: this section is a
   capabilities pitch, and rules read as "here is what the service is" where a
   wall of tiles reads as a feature dump. The promoted item breaks out of the
   two columns into a tinted full-width band, which is the whole reason for the
   ruled treatment — a band only reads as promoted against something quieter. */
.cap-ico .f {
  fill: var(--dev-fill);
  stroke: var(--brand-primary);
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.cap-ico .i {
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ledger {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: 0 var(--space-2xl);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .ledger { grid-template-columns: 1fr 1fr; }
}
.ledger > li {
  margin: 0;
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--border);
}
.ledger__row {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}
.ledger .cap-ico {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.ledger h3 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  color: var(--brand-primary);
}
.ledger p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: none;
}

/* The promoted item: a tinted band spanning both columns. */
.ledger .feat {
  grid-column: 1 / -1;
  border-top: 0;
  background: var(--brand-primary-100);
  border-left: 5px solid var(--brand-accent);
  border-radius: 0 14px 14px 0;
  padding: var(--space-2xl) var(--space-xl);
  margin-block: var(--space-lg);
}
.ledger .feat .ledger__row { gap: var(--space-xl); }
.ledger .feat .cap-ico { width: 84px; height: 84px; }
.ledger .feat h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin-bottom: 0.5rem;
}
.ledger .feat p {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--brand-primary);
  line-height: 1.55;
}
/* Stacked, an 84px icon beside text leaves the text a very short measure. */
@media (max-width: 47.99em) {
  .ledger .feat .ledger__row { flex-direction: column; }
}

/* Five ordinary items do not divide into two columns. Rather than leave the
   last one beside an empty ruled cell, it closes the list full width. */
.ledger .last { grid-column: 1 / -1; }
.ledger .last p { max-width: 62ch; }

/* Condensed variant — providers page, directly under the hero. Same items and
   the same promotion, one line of copy each, smaller icons, tighter rows. */
.ledger--tight { margin-top: var(--space-xl); }
.ledger--tight > li { padding: var(--space-lg) 0; }
.ledger--tight .cap-ico { width: 36px; height: 36px; }
.ledger--tight .ledger__row { gap: var(--space-md); }
.ledger--tight h3 { font-size: 1rem; margin-bottom: 0.15rem; }
.ledger--tight p { font-size: 0.92rem; line-height: 1.5; }
.ledger--tight .feat {
  padding: var(--space-lg) var(--space-xl);
  margin-block: var(--space-md);
}
.ledger--tight .feat .cap-ico { width: 52px; height: 52px; }
.ledger--tight .feat .ledger__row { gap: var(--space-lg); }
/* Centring only makes sense while the row is horizontal — once it stacks, it
   centres the icon over left-aligned text, which reads as a mistake. */
@media (min-width: 48em) {
  .ledger--tight .feat .ledger__row { align-items: center; }
}
.ledger--tight .feat h3 { font-size: 1.2rem; }
.ledger--tight .feat p { font-size: 1rem; }