/* Riverbend Family Health demo stylesheet (spec 15, v2-demo-medical,
   the 15/2 Clearwater amendment): the UPMC-grammar light institutional
   register, this demo's recorded theme exception. Standalone, scoped
   css for this demo alone; it loads only on the four medical leaves.
   Every selector is .rbl-* prefixed. The documented exceptions, each
   with its inline reason: the two font-face blocks (at-rules, no
   selectors; the OFL self-hosted pair), the ONE machine-scope block
   rooted on #demo-main (the demo's own serving scope: it roots the
   token set and repaints the serving surface the demo-base midnight
   body paint would otherwise show) and the single focus rule riding
   that same serving scope. The mobile bottom clearance for the fixed
   action bar is carved into the deep footer, every page's last
   content band. No .demo-base descendant
   resets: every anchor context carries its own .rbl-* paint, and the
   demo carries its own border-box group because the machinery base
   ships no global reset.

   Locked tokens, contrast table, type ramp, chrome, and compositions:
   the UI/UX plan (2026-10-11-spec15-redesign-plan-1-design-chrome.md).
   Machinery contract (layouts.demo, demo-base, notice, consent) is
   never redefined here. No stylesheet imports anywhere; no references
   to any app stylesheet; zero cross-demo tokens. --demo-notice-space
   is consumed via var() exactly once, on the microbar (the topmost
   demo element; the fleet one-consumption precedent). Photo scrims
   use ONLY the neutral ink triplet written as literal rgba stops;
   overlay text rides full opacity. Color values ride the token set:
   the page paper surface is the opaque hex token, never a pure-light
   literal. Rotations use 0.5turn; reduced motion stops every
   transition. */

@font-face {
  font-family: "Archivo";
  src: url("/demos/medical/fonts/archivo-latin-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/demos/medical/fonts/sourcesans3-latin-wght.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Clearwater tokens (the plan's locked block; the single sanctioned
   machine-scope root on this file). Light institutional register:
   deep navy brand on pale blue-gray surfaces; the two paint lines
   below also re-register the demo's own serving scope away from the
   machinery midnight body paint. */
#demo-main {
  --rbl-ink: #14202b;        /* near-black blue ink: body, headings */
  --rbl-ink-soft: #43566c;   /* muted copy, meta, microbar text */
  --rbl-navy: #103c66;       /* brand navy: headings, rules, numerals, fills */
  --rbl-navy-deep: #0d2946;  /* footer, access band, chip fill */
  --rbl-sky: #1a62a8;        /* inline links */
  --rbl-surface: #edf1f6;    /* pale blue-gray page surface */
  --rbl-paper: #fcfdfe;      /* panels, launcher strip, table body */
  --rbl-band: #e3ebf3;       /* tinted full-width band */
  --rbl-band-deep: #d8e3ee;  /* deeper band: table header, quote band */
  --rbl-badge: #dce9f4;      /* boxed tag badge fill */
  --rbl-btn-ink: #fcfdfe;    /* text on navy fills */
  --rbl-footer-text: #e6edf5;  /* light text on the deep bands */
  --rbl-footer-muted: #b9cadd; /* quiet lines on the deep bands */
  --rbl-hairline: rgba(20, 43, 68, 0.18);
  --rbl-hairline-strong: rgba(20, 43, 68, 0.34);
  --rbl-tint: #103c661f;     /* navy wash: hover fills, never a scrim */
  --rbl-scrim-triplet: 10, 16, 23; /* neutral dark ink; scrims use ONLY this */
  --rbl-radius: 6px;         /* squared-soft, one knob */
  --rbl-display: "Archivo", sans-serif;
  --rbl-body: "Source Sans 3", sans-serif;
  background: var(--rbl-surface);
  color: var(--rbl-ink);
}

/* Box discipline: the machinery stylesheets ship no global reset
   (content-box is the browser default), so the demo carries its own
   border-box group like the machinery skip link does: min-heights
   stay honest (a 44px target never becomes 44 plus the padding). */
.rbl-shell,
.rbl-microbar,
.rbl-microbar-row,
.rbl-microbar-meta,
.rbl-microbar-phone,
.rbl-microbar-links,
.rbl-microbar-links a,
.rbl-nav,
.rbl-nav-bar,
.rbl-brand,
.rbl-brand-text,
.rbl-brand-word,
.rbl-brand-sub,
.rbl-nav-toggle,
.rbl-nav-bars,
.rbl-nav-toggle-label,
.rbl-nav-links,
.rbl-nav-links a,
.rbl-mega-trigger,
.rbl-mega-chev,
.rbl-mega-panel,
.rbl-mega-inner,
.rbl-mega-rows,
.rbl-mega-row,
.rbl-mega-note,
.rbl-mega-mobile-trigger,
.rbl-mega-mobile,
.rbl-mega-mobile a,
.rbl-actionbar,
.rbl-actionbar a,
.rbl-btn,
.rbl-btn-outline,
.rbl-textlink,
.rbl-hero-textlink,
.rbl-inline-link,
.rbl-chip,
.rbl-badge,
.rbl-overline,
.rbl-hero,
.rbl-hero-img,
.rbl-hero-scrim,
.rbl-hero-overlay,
.rbl-hero-inner,
.rbl-hero-title,
.rbl-hero-promise,
.rbl-hero-ctas,
.rbl-launcher,
.rbl-launcher-strip,
.rbl-chip-anchor,
.rbl-section,
.rbl-rail,
.rbl-rail-list,
.rbl-rail-row,
.rbl-rail-row > *,
.rbl-intro-grid,
.rbl-split,
.rbl-split-copy,
.rbl-split-copy > *,
.rbl-split-cta,
.rbl-split-media,
.rbl-split-media img,
.rbl-intro-media img,
.rbl-bandhead,
.rbl-lede,
.rbl-stat-run,
.rbl-stat-item,
.rbl-stat-num,
.rbl-stat-label,
.rbl-preview-rows,
.rbl-preview-row,
.rbl-preview-row > *,
.rbl-preview-more,
.rbl-access,
.rbl-access-cta,
.rbl-pagehero,
.rbl-svc-band,
.rbl-svc-row,
.rbl-svc-copy,
.rbl-svc-copy > *,
.rbl-svc-meta,
.rbl-svc-media,
.rbl-svc-media img,
.rbl-num,
.rbl-price,
.rbl-insurance,
.rbl-insurance > .rbl-shell > *,
.rbl-insurance-lead,
.rbl-team-grid,
.rbl-tile,
.rbl-tile > *,
.rbl-tile img,
.rbl-tile-cred,
.rbl-tile-focus,
.rbl-tile-tel,
.rbl-tran-row,
.rbl-quoteband,
.rbl-quote-text,
.rbl-quote-cite,
.rbl-facts,
.rbl-facts li,
.rbl-steps,
.rbl-step,
.rbl-step-num,
.rbl-step-body,
.rbl-step-body > *,
.rbl-price-table,
.rbl-price-table caption,
.rbl-price-table th,
.rbl-price-table td,
.rbl-faq,
.rbl-faq summary,
.rbl-faq-q,
.rbl-faq-chev,
.rbl-faq-a,
.rbl-faq-a > *,
.rbl-contact,
.rbl-contact-lines,
.rbl-contact-line,
.rbl-footer,
.rbl-footer-brand,
.rbl-footer-grid,
.rbl-footer-col,
.rbl-footer-col ul,
.rbl-footer-col li,
.rbl-footer-head,
.rbl-footer-copy {
  box-sizing: border-box;
}

/* Shell: institutional 1160px measure, inline gutters 20px mobile,
   32px at the >= 900px chrome boundary. */
.rbl-shell {
  width: 100%;
  max-width: 72.5rem;
  margin-inline: auto;
  padding-inline: 20px;
  font-family: var(--rbl-body);
  font-size: 16px;
  line-height: 1.6;
}
@media (min-width: 900px) {
  .rbl-shell {
    padding-inline: 32px;
  }
}

/* Section rhythm: dense institutional spacing, 56px mobile, 88px
   desktop; anchor targets need only a small scroll margin because the
   header is non-sticky. */
.rbl-section {
  padding-block: 56px;
  scroll-margin-top: 12px;
}
@media (min-width: 900px) {
  .rbl-section {
    padding-block: 88px;
  }
}

/* Left-bar overline: the metadata voice (thick navy left rule beside
   a small-caps label). */
.rbl-overline {
  display: block;
  padding-left: 12px;
  border-left: 4px solid var(--rbl-navy);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rbl-navy);
}

/* Boxed tag badge: the solid-tint inline tag. */
.rbl-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--rbl-radius);
  background: var(--rbl-badge);
  color: var(--rbl-navy);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* Paper-banded sections (the plain-facts band, the common questions
   band): full-width paper surface on the pale page field. */
.rbl-papertint {
  background: var(--rbl-paper);
}

/* Band head and lede type. */
.rbl-bandhead {
  font-family: var(--rbl-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.25;
  color: var(--rbl-navy);
  margin: 14px 0 10px;
}
.rbl-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--rbl-ink-soft);
  margin: 12px 0 0;
  max-width: 60ch;
}

/* Buttons: navy fill (the accent) and the paper-outline variant for
   deep bands; 44px floor, squared-soft corners. */
.rbl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--rbl-radius);
  background: var(--rbl-navy);
  color: var(--rbl-btn-ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.rbl-btn:hover {
  background: var(--rbl-navy-deep);
}
.rbl-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 20px;
  border: 2px solid var(--rbl-paper);
  border-radius: var(--rbl-radius);
  background: transparent;
  color: var(--rbl-paper);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.rbl-btn-outline:hover {
  background: var(--rbl-paper);
  color: var(--rbl-navy-deep);
}

/* Quiet text links on light surfaces; every use is a standalone row
   CTA, so the anchor rides the 44px floor. */
.rbl-textlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--rbl-sky);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}
.rbl-textlink:hover {
  color: var(--rbl-navy);
}

/* Inline links inside copy. */
.rbl-inline-link {
  color: var(--rbl-sky);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.rbl-inline-link:hover {
  color: var(--rbl-navy);
}

/* TIER 1: THE UTILITY MICROBAR. The page's first element; the ONE
   --demo-notice-space consumption clears the fixed machinery banner. */
.rbl-microbar {
  background: var(--rbl-surface);
  border-bottom: 1px solid var(--rbl-hairline);
  padding-top: var(--demo-notice-space);
}
.rbl-microbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 24px;
  padding-block: 4px;
  min-height: 44px;
}
.rbl-microbar-meta {
  font-size: 13px;
  color: var(--rbl-ink-soft);
}
.rbl-microbar-phone {
  font-weight: 600;
  font-size: 13px;
  color: var(--rbl-navy);
  text-decoration: none;
}
.rbl-microbar-phone:hover {
  color: var(--rbl-navy-deep);
}
.rbl-microbar-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 18px;
  margin-left: auto;
}
.rbl-microbar-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  color: var(--rbl-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.rbl-microbar-links a:hover {
  color: var(--rbl-navy);
}

/* TIER 2: THE PRIMARY NAV (15/3 user ruling: sticky at the page top
   while scrolling; the microbar above still scrolls away). The notice-
   space head rides the nav's own paper background so the pinned bar
   sits below the fixed machinery banner with no content sliver under
   it; z-index keeps the nav and its mega panel above the content
   bands. Paper band; brand left, links + the one accented button
   right. */
.rbl-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: var(--demo-notice-space);
  background: var(--rbl-paper);
  border-bottom: 1px solid var(--rbl-hairline);
}
.rbl-nav-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
}
.rbl-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-block: 12px;
  text-decoration: none;
}
.rbl-brand-mark {
  color: var(--rbl-navy);
  flex: none;
}
.rbl-brand-text {
  display: block;
}
.rbl-brand-word {
  display: block;
  font-family: var(--rbl-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.15;
  color: var(--rbl-navy);
}
.rbl-brand-sub {
  display: block;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--rbl-ink-soft);
}

/* Mobile disclosure toggle. */
.rbl-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 12px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--rbl-hairline-strong);
  border-radius: var(--rbl-radius);
  color: var(--rbl-navy);
  font-family: var(--rbl-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.rbl-nav-bars {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

/* The nav list: stacked disclosure below 900px, flex row on desktop.
   Class pair only (open/closed), never inline display writes. The two
   breakpoint-exclusive Services items hide with their whole li so no
   stray hairline rows are left behind. */
.rbl-nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
}
.rbl-nav-links.rbl-nav-open {
  display: block;
}
.rbl-nav-links li {
  border-top: 1px solid var(--rbl-hairline);
}
.rbl-nav-item-desktop {
  display: none;
}
.rbl-nav-links a,
.rbl-mega-mobile-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 2px;
  font-weight: 500;
  font-size: 16px;
  color: var(--rbl-ink);
  text-decoration: none;
}
.rbl-nav-links a[aria-current="page"] {
  font-weight: 600;
  color: var(--rbl-navy);
  box-shadow: inset 0 -3px 0 0 var(--rbl-navy);
}
.rbl-nav-links a:hover {
  color: var(--rbl-navy);
}
.rbl-nav-links .rbl-btn {
  display: flex;
  width: 100%;
  margin-top: 8px;
  color: var(--rbl-btn-ink);
}
/* The scoped rule carries the button ink directly: the grouped nav-
   link rule wins base specificity over the bare button rule, so the
   ink re-voices here and on hover. */
.rbl-nav-links .rbl-btn:hover {
  color: var(--rbl-btn-ink);
}
@media (min-width: 900px) {
  .rbl-nav-bar {
    min-height: 72px;
  }
  .rbl-nav-toggle {
    display: none;
  }
  .rbl-nav-item-desktop {
    display: list-item;
  }
  .rbl-nav-item-mobile {
    display: none;
  }
  .rbl-nav-links,
  .rbl-nav-links.rbl-nav-open {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 0;
    margin-left: auto;
  }
  .rbl-nav-links li {
    border-top: none;
  }
  .rbl-nav-links a,
  .rbl-mega-mobile-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    font-weight: 400;
    font-size: 16px;
  }
  .rbl-nav-links .rbl-btn {
    width: auto;
    margin: 0 0 0 8px;
  }
}

/* THE MEGA SERVICES PANEL (desktop): a full-width disclosure band
   under the nav; five link rows with one-liners + the care-access
   note. Closed state ships the hidden attribute; the open class is
   the class-only paint state. */
.rbl-mega-trigger {
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--rbl-ink);
  font-family: var(--rbl-body);
  cursor: pointer;
}
.rbl-mega-chev {
  flex: none;
  transition: transform 0.2s ease;
}
.rbl-mega-trigger.rbl-mega-open {
  color: var(--rbl-navy);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 0 var(--rbl-navy);
}
.rbl-mega-trigger.rbl-mega-open .rbl-mega-chev {
  transform: rotate(0.5turn);
}
@media (min-width: 900px) {
  .rbl-mega-trigger {
    display: inline-flex;
  }
}
.rbl-mega-panel {
  display: block;
  background: var(--rbl-paper);
  border-bottom: 1px solid var(--rbl-hairline);
}
.rbl-mega-inner {
  display: grid;
  gap: 16px;
  padding-block: 20px 24px;
}
.rbl-mega-rows {
  display: grid;
  gap: 2px;
}
.rbl-mega-row {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--rbl-radius);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.rbl-mega-row:hover {
  background: var(--rbl-tint);
}
.rbl-mega-name {
  font-family: var(--rbl-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--rbl-navy);
}
.rbl-mega-line {
  font-size: 15px;
  line-height: 1.5;
  color: var(--rbl-ink-soft);
}
.rbl-mega-note {
  font-size: 15px;
  line-height: 1.55;
  color: var(--rbl-ink-soft);
}
.rbl-mega-note p {
  margin: 0 0 10px;
}
.rbl-mega-note a {
  color: var(--rbl-sky);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (min-width: 900px) {
  .rbl-mega-inner {
    grid-template-columns: 65fr 35fr;
    gap: 48px;
  }
  .rbl-mega-note {
    border-left: 4px solid var(--rbl-navy);
    padding-left: 16px;
  }
}

/* The same services list as a small-screen accordion inside the nav
   disclosure; the desktop band hides below 900px. */
.rbl-mega-mobile-trigger {
  display: none;
}
.rbl-mega-mobile {
  display: block;
  padding: 0 0 8px 12px;
}
.rbl-mega-mobile a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 2px;
  font-size: 15px;
  color: var(--rbl-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rbl-mega-mobile a:hover {
  color: var(--rbl-navy);
}
.rbl-mega-mobile-trigger.rbl-mega-open .rbl-mega-chev {
  transform: rotate(0.5turn);
}
@media (max-width: 899.98px) {
  .rbl-mega-panel {
    display: none;
  }
  .rbl-mega-mobile-trigger {
    display: flex;
  }
}
@media (min-width: 900px) {
  .rbl-mega-mobile-trigger,
  .rbl-mega-mobile {
    display: none;
  }
}

/* THE STICKY MOBILE ACTION BAR (CSS-only, zero scripts): fixed bottom
   bar below the 900px boundary with exactly three anchors; display
   none at and above the boundary; z-index sits above page content and
   below the machinery banner and skip link. */
.rbl-actionbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  z-index: 100;
}
.rbl-actionbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  min-width: 44px;
  padding: 6px 4px;
  background: var(--rbl-paper);
  color: var(--rbl-navy);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.rbl-actionbar a + a {
  border-left: 1px solid var(--rbl-hairline-strong);
}
.rbl-actionbar a:hover {
  background: var(--rbl-band);
}
.rbl-actionbar a[aria-current="page"] {
  background: var(--rbl-band);
  box-shadow: inset 0 -3px 0 0 var(--rbl-navy);
}
.rbl-actionbar svg {
  flex: none;
}
@media (min-width: 900px) {
  .rbl-actionbar {
    display: none;
  }
}

/* HOME HERO: the only photo-text surface. img, scrim, overlay in
   that DOM order; overlay content bottom-left in the darkest stop. */
.rbl-hero {
  position: relative;
  background: var(--rbl-navy-deep);
}
.rbl-hero-img {
  display: block;
  width: 100%;
  height: clamp(400px, 56vw, 620px);
  object-fit: cover;
}
.rbl-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(10, 16, 23, 0.72) 0%, rgba(10, 16, 23, 0.84) 100%);
}
.rbl-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
}
.rbl-hero-inner {
  width: 100%;
  padding-block: 40px 48px;
}
.rbl-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: var(--rbl-radius);
  background: var(--rbl-navy-deep);
  color: var(--rbl-btn-ink);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rbl-hero-title {
  font-family: var(--rbl-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--rbl-paper);
  margin: 14px 0 10px;
  max-width: 22ch;
}
.rbl-hero-promise {
  font-size: 18px;
  line-height: 1.55;
  color: var(--rbl-paper);
  margin: 0 0 20px;
  max-width: 52ch;
}
.rbl-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0;
}
.rbl-hero-textlink {
  color: var(--rbl-paper);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}
.rbl-hero-textlink:hover {
  color: var(--rbl-badge);
}
@media (min-width: 900px) {
  .rbl-hero-inner {
    padding-block: 56px 104px;
  }
}

/* THE CARE-ACCESS LAUNCHER: opaque paper strip at the hero's lower
   edge (overlapped onto the photo at >= 900px), five anchor chips +
   the all-services chip; no borders or shadows on the chips. */
.rbl-launcher {
  position: relative;
  z-index: 3;
}
@media (min-width: 900px) {
  .rbl-launcher {
    margin-top: -76px;
  }
}
.rbl-launcher-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border-radius: var(--rbl-radius);
  background: var(--rbl-paper);
}
.rbl-chip-anchor {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--rbl-radius);
  background: var(--rbl-surface);
  color: var(--rbl-navy);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.rbl-chip-anchor:hover {
  background: var(--rbl-band);
  color: var(--rbl-navy-deep);
}

/* "I want to" rail: paper band; five plain anchors as hairline-separated rows. */
.rbl-rail {
  background: var(--rbl-paper);
}
.rbl-rail-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.rbl-rail-list li + li .rbl-rail-row {
  border-top: 1px solid var(--rbl-hairline);
}
.rbl-rail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 10px 0;
  color: var(--rbl-navy);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: color 0.15s ease;
}
.rbl-rail-row:hover {
  color: var(--rbl-navy-deep);
}
.rbl-rail-row .rbl-arrow,
.rbl-preview-row .rbl-arrow {
  flex: none;
  transition: transform 0.2s ease;
}
.rbl-rail-row:hover .rbl-arrow,
.rbl-preview-row:hover .rbl-arrow {
  transform: translateX(2px);
}

/* Intro statement band: tinted full-width band, split, flat image
   tile left + copy right. */
.rbl-intro {
  background: var(--rbl-band);
}
.rbl-intro-grid {
  display: grid;
  gap: 28px;
  align-items: center;
}
@media (min-width: 900px) {
  .rbl-intro-grid {
    grid-template-columns: 45fr 55fr;
    gap: 48px;
  }
}
.rbl-intro-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rbl-radius);
}
.rbl-stat-run {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 0;
  margin: 22px 0 0;
}
.rbl-stat-item {
  padding: 0 22px;
  border-left: 1px solid var(--rbl-hairline-strong);
}
.rbl-stat-item:first-child {
  padding-left: 0;
  border-left: none;
}
.rbl-stat-num {
  display: block;
  font-family: var(--rbl-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  color: var(--rbl-navy);
}
.rbl-stat-label {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--rbl-ink-soft);
}

/* Callout rows: paper band; text ~55%, image ~45%, image side flips
   at desktop; hairline rule between consecutive rows. */
.rbl-callouts {
  background: var(--rbl-paper);
}
.rbl-split {
  display: grid;
  gap: 24px;
  align-items: center;
  padding-block: 24px;
}
.rbl-split + .rbl-split {
  border-top: 1px solid var(--rbl-hairline);
}
.rbl-split-copy p {
  margin: 0 0 12px;
  max-width: 58ch;
}
.rbl-split-copy .rbl-split-cta {
  margin: 0;
}
.rbl-split-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rbl-radius);
}
@media (min-width: 900px) {
  .rbl-split {
    grid-template-columns: 55fr 45fr;
    gap: 48px;
  }
  .rbl-split-alt .rbl-split-media {
    order: -1;
  }
}

/* Care team preview: tinted band; three hairline name rows + the
   closing link. */
.rbl-preview {
  background: var(--rbl-band);
}
.rbl-preview-rows {
  margin: 16px 0 0;
}
.rbl-preview-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  min-height: 44px;
  padding: 12px 0;
  text-decoration: none;
}
.rbl-preview-row + .rbl-preview-row {
  border-top: 1px solid var(--rbl-hairline);
}
.rbl-preview-name {
  font-weight: 600;
  font-size: 17px;
  color: var(--rbl-navy);
  transition: color 0.15s ease;
}
.rbl-preview-role {
  font-size: 15px;
  color: var(--rbl-ink-soft);
  margin-left: auto;
  text-align: right;
}
.rbl-preview-row .rbl-arrow {
  align-self: center;
  color: var(--rbl-navy);
}
.rbl-preview-more {
  margin: 14px 0 0;
}

/* Access band (#rbl-access): the one deep statement band. */
.rbl-access {
  background: var(--rbl-navy-deep);
}
.rbl-access .rbl-bandhead {
  color: var(--rbl-paper);
}
.rbl-access p {
  margin: 6px 0;
  max-width: 60ch;
  color: var(--rbl-footer-text);
}
.rbl-access-cta {
  margin-top: 18px;
}

/* Thin page heroes: boxed badge (services) or straight to the h1. */
.rbl-pagehero {
  background: var(--rbl-band);
  padding-block: 48px;
  scroll-margin-top: 12px;
}
.rbl-pagehero h1 {
  font-family: var(--rbl-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 38px);
  line-height: 1.2;
  color: var(--rbl-navy);
  margin: 14px 0 0;
  max-width: 30ch;
}
@media (min-width: 900px) {
  .rbl-pagehero {
    padding-block: 64px;
  }
}
.rbl-pagehero .rbl-btn {
  margin-top: 18px;
}

/* Five numbered service bands: split rows with alternating media
   alignment; numeral + boxed badge + name + one-liner + price + tel
   verb; hairlines between bands. */
.rbl-svc-band {
  border-top: 1px solid var(--rbl-hairline);
  padding-block: 48px;
}
@media (min-width: 900px) {
  .rbl-svc-band {
    padding-block: 64px;
  }
}
.rbl-svc-row {
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 900px) {
  .rbl-svc-row {
    grid-template-columns: 55fr 45fr;
    gap: 56px;
  }
  .rbl-svc-row-alt .rbl-svc-media {
    order: -1;
  }
}
/* The band media: the canonical containment the split rows carry
   (width 100%, the attribute aspect ratio driving the height). Without
   it the source-file width overflows the column at every viewport. */
.rbl-svc-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rbl-radius);
}
.rbl-svc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.rbl-num {
  font-family: var(--rbl-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  color: var(--rbl-navy);
}
.rbl-svc-copy {
  font-size: 16px;
}
.rbl-svc-copy .rbl-bandhead {
  margin: 0 0 8px;
}
.rbl-price {
  font-family: var(--rbl-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--rbl-navy);
}
.rbl-svc-verb {
  margin: 14px 0 0;
}

/* Insurance bands (services deep tint, new-patients standard tint). */
.rbl-insurance {
  background: var(--rbl-band);
}
.rbl-insurance-deep {
  background: var(--rbl-band-deep);
}
.rbl-insurance-lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--rbl-ink);
  margin: 14px 0 8px;
  max-width: 56ch;
}

/* Provider grid: three flat portrait tiles; portrait media renders
   4:5 with the intrinsic dims in the attributes. */
.rbl-team-grid {
  display: grid;
  gap: 40px;
  margin: 24px 0 0;
}
@media (min-width: 900px) {
  .rbl-team-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}
/* The provider grid (15/3 user ruling): every portrait renders as the
   same circle: one diameter at every breakpoint, a square crop with
   the face leading, centered above its text block. height: auto keeps
   the css square ratio in charge over the attribute height hint (the
   old 4:5 tile rendered each image at its own attribute height). */
.rbl-tile {
  text-align: center;
}
.rbl-tile img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 50%;
  margin-inline: auto;
}
/* Per-portrait framing (paint-tuned): the two tighter head crops lift
   the window toward the top edge so the faces lead and the hairline
   stays inside the circle; the third portrait frames well on the base
   position. */
.rbl-team-grid .rbl-tile:nth-child(1) img {
  object-position: 50% 8%;
}
.rbl-team-grid .rbl-tile:nth-child(2) img {
  object-position: 50% 10%;
}
.rbl-tile h3 {
  font-family: var(--rbl-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--rbl-navy);
  margin: 14px 0 2px;
}
.rbl-tile-cred {
  margin: 0;
  font-size: 15px;
  color: var(--rbl-ink-soft);
}
.rbl-tile-focus {
  margin: 8px 0 10px;
  font-size: 15px;
  line-height: 1.55;
}
.rbl-tile-tel {
  color: var(--rbl-sky);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rbl-tile-tel:hover {
  color: var(--rbl-navy);
}

/* The RN text row: the voice of the triage line, no portrait. */
.rbl-tran-row {
  margin: 36px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--rbl-hairline);
  font-size: 16px;
  line-height: 1.6;
}
.rbl-tran-row strong {
  font-weight: 600;
  color: var(--rbl-navy);
}

/* Pull quote band (typography only) + plain facts rows. */
.rbl-quoteband {
  background: var(--rbl-band-deep);
}
.rbl-quote-text {
  margin: 0;
  font-family: var(--rbl-display);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.4;
  color: var(--rbl-navy);
  max-width: 44ch;
}
.rbl-quote-cite {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--rbl-ink-soft);
}
.rbl-facts {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.rbl-facts li {
  padding: 12px 0;
  font-size: 16px;
  line-height: 1.6;
}
.rbl-facts li + li {
  border-top: 1px solid var(--rbl-hairline);
}

/* First-visit steps: numbered hairline rows, 56px numerals. */
.rbl-steps {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.rbl-step {
  display: grid;
  gap: 6px 24px;
  padding: 22px 0;
}
.rbl-step + .rbl-step {
  border-top: 1px solid var(--rbl-hairline);
}
.rbl-step-num {
  font-family: var(--rbl-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  color: var(--rbl-navy);
}
.rbl-step-body h3 {
  font-family: var(--rbl-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--rbl-navy);
  margin: 0 0 6px;
}
.rbl-step-body p {
  margin: 0;
  max-width: 60ch;
}
@media (min-width: 900px) {
  .rbl-step {
    grid-template-columns: 96px 1fr;
    align-items: start;
  }
}

/* Price transparency table: real table semantics; band-deep header
   tint; hairline rules; roomy 48px rows. */
.rbl-price-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 22px;
  font-size: 15px;
}
.rbl-price-table caption {
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--rbl-ink-soft);
  padding-bottom: 8px;
}
.rbl-price-table th,
.rbl-price-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rbl-hairline);
}
.rbl-price-table thead th {
  background: var(--rbl-band-deep);
  font-weight: 600;
  color: var(--rbl-navy);
  border-bottom: 1px solid var(--rbl-hairline-strong);
}
.rbl-price-table tbody th {
  font-weight: 600;
  color: var(--rbl-ink);
}
.rbl-price-table tbody td {
  font-weight: 600;
  color: var(--rbl-navy);
}

/* Common questions: native disclosure rows; navy summaries at 48px;
   the chevron spins 0.5turn on open, CSS-only. */
.rbl-faq {
  border-top: 1px solid var(--rbl-hairline);
}
.rbl-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 12px 2px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 17px;
  color: var(--rbl-navy);
  transition: color 0.15s ease;
}
.rbl-faq summary:hover {
  color: var(--rbl-navy-deep);
}
.rbl-faq summary::-webkit-details-marker {
  display: none;
}
.rbl-faq-chev {
  flex: none;
  transition: transform 0.2s ease;
}
.rbl-faq[open] .rbl-faq-chev {
  transform: rotate(0.5turn);
}
.rbl-faq-a {
  padding: 0 2px 16px;
  font-size: 16px;
  line-height: 1.6;
}
.rbl-faq-a p {
  margin: 0;
  max-width: 60ch;
}

/* Contact block (#rbl-contact): byte-shaped by the contract, identical
   on all four pages. */
.rbl-contact {
  background: var(--rbl-paper);
}
.rbl-contact .rbl-bandhead {
  margin-bottom: 4px;
}
.rbl-contact-lines {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.rbl-contact-line {
  padding: 12px 0;
  font-size: 16px;
}
.rbl-contact-line + .rbl-contact-line {
  border-top: 1px solid var(--rbl-hairline);
}
.rbl-contact-line a {
  color: var(--rbl-sky);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rbl-contact-line a:hover {
  color: var(--rbl-navy);
}

/* The deep footer: four columns under the brand row. */
.rbl-footer {
  background: var(--rbl-navy-deep);
  color: var(--rbl-footer-muted);
  padding-block: 48px 40px;
}
/* Mobile bottom clearance: the fixed action bar overlays the viewport
   bottom below the chrome boundary, so the deep footer (every page's
   last content band) carries 64px of extra room above it at mobile. */
@media (max-width: 899.98px) {
  .rbl-footer {
    padding-bottom: 104px;
  }
}
.rbl-footer-brand {
  margin-bottom: 8px;
}
.rbl-footer-brand .rbl-brand-mark {
  color: var(--rbl-footer-text);
}
.rbl-footer-brand .rbl-brand-word {
  color: var(--rbl-footer-text);
}
.rbl-footer-brand .rbl-brand-sub {
  color: var(--rbl-footer-muted);
}
.rbl-footer-grid {
  display: grid;
  gap: 28px;
  padding-top: 20px;
}
@media (min-width: 640px) {
  .rbl-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .rbl-footer-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
  }
}
.rbl-footer-head {
  margin: 0 0 8px;
  font-family: var(--rbl-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rbl-footer-text);
}
.rbl-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rbl-footer-col li {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.rbl-footer-col p {
  margin: 4px 0;
  font-size: 15px;
}
.rbl-footer-col a {
  color: var(--rbl-footer-muted);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.15s ease;
}
.rbl-footer-col a:hover {
  color: var(--rbl-footer-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rbl-footer-copy {
  margin: 28px 0 0;
  font-size: 14px;
  color: var(--rbl-footer-muted);
}

/* Focus: every interactive element inside the demo's own serving
   scope gets the navy focus ring (the rule rides the same documented
   machine scope as the token block). */
#demo-main :focus-visible {
  outline: 2px solid var(--rbl-navy);
  outline-offset: 2px;
}

/* Anchor landings: the fixed machinery banner and the sticky nav's
   head + bar cover the viewport top while pinned, so every fragment
   target (the five service bands, the contact block) lands below the
   covered strip with its own scroll margin. */
.rbl-svc-band,
.rbl-contact {
  scroll-margin-top: calc(var(--demo-notice-space) + 76px);
}

/* Visibility-is-paint companions: every class that sets display or
   toggles visibility carries the explicit [hidden] companion rule. */
.rbl-nav-links[hidden] {
  display: none;
}
.rbl-mega-panel[hidden] {
  display: none;
}
.rbl-mega-mobile[hidden] {
  display: none;
}
.rbl-actionbar[hidden] {
  display: none;
}

/* Reduced motion: every transition this demo declares stops. */
@media (prefers-reduced-motion: reduce) {
  .rbl-btn,
  .rbl-btn-outline,
  .rbl-textlink,
  .rbl-inline-link,
  .rbl-microbar-links a,
  .rbl-microbar-phone,
  .rbl-nav-links a,
  .rbl-chip-anchor,
  .rbl-mega-row,
  .rbl-rail-row,
  .rbl-preview-name,
  .rbl-tile-tel,
  .rbl-contact-line a,
  .rbl-actionbar a,
  .rbl-footer-col a,
  .rbl-faq summary,
  .rbl-mega-chev,
  .rbl-faq-chev,
  .rbl-rail-row .rbl-arrow,
  .rbl-preview-row .rbl-arrow {
    transition: none;
  }
}