/* ─── Clinics page ──────────────────────────────────
   Builds on top of home.css. Variables / fonts / nav
   are inherited.
*/

/* ═══ Hero ════════════════════════════════════════════ */
/* Override home.css's .hero padding-bottom so the gap to
   .dash-show is set explicitly (180px from the CTA). */
.hero { padding-bottom: 0; }
.hero__lede { margin-top: 32px; }

/* Page-specific layout for the hero CTA — visual styling
   comes from the shared .btn / .btn--lg / .btn--filled-dark
   classes in home.css. */
.hero__cta {
  margin-top: 40px;
  width: 165px;
}

/* ═══ Dashboard showcase ═════════════════════════════
   Sits in normal flow 180px below the hero CTA. The
   zoom animation is driven by native page scroll: JS
   publishes --p (0→1) on every scroll frame and the
   following calc()s interpolate the frame width and
   the dash inset. There is NO sticky, NO spacer, NO
   scroll-jacking — the animation is a passive effect
   that happens while the user scrolls naturally.

   Endpoints:
     • Frame zooms PROPORTIONALLY (same scale factor in both axes).
       p = 0  →  1320 × 799       p = 1  →  1437 × 870   (aspect ≈ 1.652)
     • Dash slides up with a DELAY (driven by --pd, not --p).
       pd = 0  →  top 30 % of frame, width 1080px
       pd = 1  →  top 15 % of frame, width 1264px
       --pd is published by JS as clamp((p - 0.30) / 0.70, 0, 1),
       so the dash holds its starting pose for the first 30 % of
       the scroll, then catches up to finish with the frame.
*/
.dash-show {
  --p: 0;
  --pd: 0;
  --frame-w: calc(1320px + 117px * var(--p));   /* 1320 → 1437 */
  --frame-h: calc(799px  + 71px  * var(--p));   /*  799 →  870 */
  --frame-shift: calc(-60px * var(--p));        /*  0    →  -60 */
  --dash-top: calc(30% - 15% * var(--pd));      /*  30%  →  15% */
  --dash-w: calc(1080px + 184px * var(--pd));   /* 1080 → 1264 */

  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 180px;            /* gap from hero CTA → dash frame */
  padding: 0 16px;
  display: flex;
  justify-content: center;
}

.dash-frame {
  position: relative;
  width: var(--frame-w);
  height: var(--frame-h);
  max-width: 100%;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  transform: translateY(var(--frame-shift));
  will-change: transform;
}

/* Layer 1 — teal gradient base. */
.dash-frame__gradient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  user-select: none;
  pointer-events: none;
}

/* Layer 2 — looping gradient video. */
.dash-frame__video {
  position: absolute;
  inset: 0;
  width: 120%;
  height: 120%;
  object-fit: cover;
  opacity: 0.55;
  z-index: 2;
  pointer-events: none;
}

/* Layer 3 — dashboard screenshot. Both top inset and
   width track --p. No CSS transition: the values are
   updated per scroll frame so any transition would lag
   behind native scrolling. */
.dash-frame__dash {
  position: absolute;
  top: var(--dash-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--dash-w);
  max-width: calc(100% - 32px);
  height: auto;
  z-index: 3;
  user-select: none;
  pointer-events: none;
}

/* ═══ Responsive ════════════════════════════════════ */
@media (max-width: 1100px) {
  .dash-show {
    margin-top: 120px;
    /* Mobile-friendly endpoints: percentage-based so the
       frame fits whatever viewport we're on. Width and
       height both scale with --p for the same window-zoom
       feel as desktop. */
    --frame-w: calc((100vw - 32px) * (0.92 + 0.08 * var(--p)));
    --frame-h: calc((100vw - 32px) * 0.75 * (0.92 + 0.08 * var(--p)));
    --dash-top: calc(26% - 12% * var(--pd));
    --dash-w: calc(80% + 12% * var(--pd));
  }
  .dash-frame {
    border-radius: 20px;
    width: var(--frame-w);
    height: var(--frame-h);
  }
  .dash-frame__dash {
    width: var(--dash-w);
    max-width: var(--dash-w);
  }
}

@media (max-width: 720px) {
  .hero__cta { margin-top: 40px; }
  /* Disable scroll-driven zoom on mobile — lock to the
     end state so the dashboard reads at full size from
     first paint, no scroll dependency. */
  .dash-show {
    margin-top: 96px;
    padding: 0 8px;
    --p: 1;
    --pd: 1;
  }
  .dash-frame { border-radius: 16px; }
}

/* Honor reduced motion: hold the end state, no scroll-driven zoom. */
@media (prefers-reduced-motion: reduce) {
  .dash-show { --p: 1; }
}

/* ═══ Stats / wave section ═══════════════════════════
   Sits directly below the dashboard zoom. Three layers,
   stacked vertically:
     1. .stats__wave   full-bleed voive_wave_bg.png on
                       the page bg (transitions white→teal)
     2. .stats__slab   solid #0a2633 block continuing the
                       dark transition into the page below
     3. .stats__copy   the lede + two stats, anchored to
                       the top-left of the section
*/
.stats {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--color-bg);               /* #F6F8F9 — page bg */
  isolation: isolate;
}

/* Wave illustration sits behind the copy.
   In Figma the 5288×1449 PNG is rendered at the same scale as
   the 1728px design viewport — i.e. 5288 wide / 1449 tall.
   On viewports BELOW 1728px we scale it down proportionally
   (306.02 vw / 83.854 vw); at 1728px and above we LOCK to the
   design size so it never grows beyond the intended scale.
   Aspect ratio is preserved at every breakpoint. */
.stats__wave {
  position: relative;
  width: 100%;
  display: block;
  height: min(83.854vw, 1180px);
  overflow: hidden;
  z-index: 0;
}
.stats__wave-img {
  position: absolute;
  bottom: 0;                                 /* anchor dark crown to container bottom */
  left: 50%;
  transform: translateX(-50%);
  width: min(306.02vw, 5288px);
  max-width: none;
  /* On wide viewports the natural (auto) height of a Figma-scaled
     image is taller than the container, so the bottom dark crown
     sits flush against .features below — good. On narrow viewports
     the auto height becomes shorter than the container's mobile
     clamp height, exposing a strip of light page bg above the dark
     section — the white gap. Forcing min-height: 100% + cover keeps
     the image full-bleed at every viewport, and object-position
     keeps the dark crown pinned to the bottom edge so the join with
     .features stays seamless. */
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: 55% bottom;
  user-select: none;
  pointer-events: none;
}

/* Foreground copy block — absolutely positioned so it
   overlays both the wave and the slab seam. Sits 344 px
   in from the LEFT EDGE of the centered main container
   (--container: 1496px). On viewports narrower than the
   container, falls back to the page gutter. */
.stats__copy {
  position: absolute;
  top: 100px;
  left: max(32px, calc((100vw - var(--container)) / 2 + 344px));
  width: 491px;
  max-width: calc(100% - 64px);
  z-index: 2;
  word-break: break-word;
}

.stats__lede {
  width: 428px;
  max-width: 100%;
  font-weight: 400;                  /* PP NM Book */
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
  color: var(--color-ink);
  opacity: 0.8;
}

.stats__grid {
  margin-top: 72px;                  /* 288 - 120 - 96 (lede block ≈ 96px) */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  column-gap: 102px;                 /* 756 − 460 − 194 */
  row-gap: 0;
}

.stats__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stats__num {
  font-weight: 500;                  /* PP NM Medium */
  font-size: 56px;
  line-height: 72px;
  letter-spacing: 0;
  white-space: nowrap;
  /* Vertical gradient text per Figma: ink → teal */
  background: linear-gradient(180deg, #0a2633 0%, #1e7299 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.stats__label {
  margin-top: 8px;
  width: 188px;
  max-width: 100%;
  font-weight: 400;                  /* PP NM Book */
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--color-ink);
  opacity: 0.8;
}

/* ═══ Responsive — stats ════════════════════════════ */
@media (max-width: 1100px) {
  .stats__copy {
    top: 80px;
    left: 24px;
    right: 24px;
    width: auto;
  }
  .stats__lede { width: auto; max-width: 480px; font-size: 20px; line-height: 28px; }
  .stats__grid {
    margin-top: 56px;
    column-gap: 64px;
  }
  .stats__num { font-size: 48px; line-height: 60px; }
}

@media (max-width: 720px) {
  .stats__copy { top: 64px; left: 16px; right: 16px; }
  .stats__lede { font-size: 18px; line-height: 26px; }
  .stats__grid {
    margin-top: 40px;
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .stats__num { font-size: 40px; line-height: 52px; }
  .stats__label { font-size: 18px; }
  .stats__wave { height: clamp(360px, 64vh, 700px); }
  /* On mobile, push the wave's focal point downward so more of
     the lighter (white) area shows at the top of the container —
     the stats text overlay reads cleanly without sitting on the
     dark teal portion of the gradient. */
  .stats__wave-img { object-position: 55% 130%; }
}

/* ═══ Bottom wave — mirror of .stats__wave ════════════
   Closes out the dark .features section and fades down
   into the page bg. Figma displays the PNG at 5404×889
   anchored at x=-1802 inside a 1728 design viewport, so
   the image is rendered at 5404/1728 ≈ 312.73 vw wide
   × 889/1728 ≈ 51.45 vw tall, centered at +36 px right
   of viewport center (1802 - 5404/2 = -900; centered).
   Below 1728 px it scales down proportionally; at/above
   1728 px it locks to the Figma display size. */
.wave-bottom {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: min(51.447vw, 889px);
  background: var(--color-bg);               /* #F6F8F9 — page bg */
  overflow: hidden;
  isolation: isolate;
}
.wave-bottom__img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(312.731vw, 5404px);
  /* Match Figma's 5404×889 display aspect (the source PNG is
     5400×1172; Figma crops the white-fade tail). Forcing the
     height + object-fit:cover with object-position:center top
     preserves the solid dark crown at the top of the image, so
     it butts cleanly against the dark .features section above
     instead of clipping the dark portion away. */
  height: min(51.447vw, 889px);
  object-fit: cover;
  object-position: center top;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

/* ═══ Dark features section ══════════════════════════
   Continuous #0A2633 from the .stats__slab into this
   block — no margin between them. Holds a header and
   three feature articles stacked vertically.
*/
.features {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--color-ink);
  color: #ffffff;
  padding: 0;
  isolation: isolate;
}

/* Header — left rail title + right-side copy/CTA. */
.features__head {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1085px) minmax(0, 472px);
  column-gap: 80px;
  align-items: start;
}

.features__title {
  font-weight: 450;                   /* PP NM Regular */
  font-size: 56px;
  line-height: 70px;
  letter-spacing: 0;
  color: #ffffff;
  padding-top: 3px;
}
.features__title-accent {
  display: block;
  color: var(--color-accent-yellow);
}

.features__head-side {
  padding-top: 3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.features__head-copy {
  font-weight: 400;                   /* PP NM Book */
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.6px;
  color: var(--color-cream);
  max-width: 472px;
}

/* Drop-shadow on top of the shared .btn--filled-light visual.
   Visual styling comes from .btn / .btn--filled-light. */
.features__cta {
  filter: drop-shadow(0 2px 1px rgba(1, 22, 31, 0.48));
}

/* Each feature article — centered title + lede + media. */
.feat {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.feat + .feat { margin-top: 0; }

/* Vertical rhythm between header → feat 1 → feat 2 → feat 3.
   From Figma:  head end ≈ y=160, feat1 title y=482  → 322
                feat1 illustration end ≈ y=1428,
                feat2 title y=1706            → 278
                feat2 illustration end ≈ y=2914,
                feat3 title y=2838            → already in place
*/
.feat--first { margin-top: 322px; }
.feat:nth-of-type(2) { margin-top: 278px; }
.feat:nth-of-type(3) { margin-top: 0; }

/* Spacing fallback — first article uses head→title gap. */
.features .feat:first-of-type { margin-top: 322px; }
.features .feat:nth-of-type(2) { margin-top: 236px; }
.features .feat:nth-of-type(3) { margin-top: 248px; }

.feat__title {
  font-weight: 450;                   /* PP NM Regular */
  font-size: 40px;
  line-height: 44px;
  letter-spacing: 0;
  color: #ffffff;
  margin: 0;
}
.feat__title--w-302 { width: 302px; max-width: 100%; }
.feat__title--w-350 { width: 350px; max-width: 100%; }
.feat__title-accent { color: var(--color-accent-yellow); }

.feat__lede {
  margin-top: 18px;
  font-weight: 400;                   /* PP NM Book */
  font-size: 17px;
  line-height: 28px;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.8);
}
.feat__lede--w-375 { width: 375px; max-width: 100%; }
.feat__lede--w-397 { width: 397px; max-width: 100%; }

/* Media — outer container holds illustrations + overlays. */
.feat__media {
  position: relative;
  margin-top: 72px;
}

/* ─── 01 Save 3-7 min — Pre-Visit Summary illustration ─── */
.feat__media--summary {
  width: 632px;
  max-width: 100%;
  display: flex;
  justify-content: center;
}
.feat__summary-img {
  display: block;
  width: 632px;
  max-width: 100%;
  height: auto;
  user-select: none;
}
.feat__dr-albert {
  position: absolute;
  /* Figma: Dr Albert pill at x=1109, y=1169 inside an illustration
     that starts at center; relative to the illustration's top-left
     (568, 776) → +541, +393. The 632px-wide illustration's right
     edge sits 541px from its left, so the bubble overhangs the
     right side of the card. */
  top: 393px;
  right: -90px;
  width: 175px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  animation: dr-albert-reading 10s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

/* Imitates Dr. Albert reading the pre-visit summary: pill stays
   anchored on the right SIDE of the card (no x-shift) and slides
   vertically to align with each section in turn — Chief complaint →
   History of present illness → Working diagnosis → Treatment
   recommendations — pausing on each to "read", then moves down and
   into the card to hover over the Review & Sign button, presses
   (scale 0.94) to imitate a click, and loops back to the top.
   The pill's natural rest (translate(0,0)) sits beside the Working
   diagnosis row. Negative X moves it leftward INTO the card. */
@keyframes dr-albert-reading {
  0%   { transform: translate(0, -240px) scale(1); }    /* Chief complaint */
  14%  { transform: translate(0, -240px) scale(1); }    /* read */
  19%  { transform: translate(0, -120px) scale(1); }    /* slide to History */
  33%  { transform: translate(0, -120px) scale(1); }    /* read */
  38%  { transform: translate(0, 0)      scale(1); }    /* slide to Working diagnosis */
  52%  { transform: translate(0, 0)      scale(1); }    /* read */
  57%  { transform: translate(0, 120px)  scale(1); }    /* slide to Treatment */
  71%  { transform: translate(0, 120px)  scale(1); }    /* read */
  78%  { transform: translate(-50px, 230px) scale(1); }    /* hover Review & Sign */
  82%  { transform: translate(-50px, 230px) scale(1); }    /* settle */
  85%  { transform: translate(-50px, 230px) scale(0.94); } /* press (click) */
  88%  { transform: translate(-50px, 230px) scale(1); }    /* release */
  92%  { transform: translate(-50px, 230px) scale(1); }    /* hold */
  100% { transform: translate(0, -240px) scale(1); }    /* return to Chief complaint */
}

@media (prefers-reduced-motion: reduce) {
  .feat__dr-albert { animation: none; }
}

/* ─── 02 Handles routine — iPhone illustration ─── */
.feat__media--routine {
  width: 472px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feat__iphone-img {
  display: block;
  width: 472px;
  max-width: 100%;
  height: auto;
  user-select: none;
}

/* ─── 03 Instant escalation — tree illustration ─── */
.feat__media--escalation {
  width: 1168px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feat__escalation-img {
  display: block;
  width: 100%;
  max-width: 1168px;
  height: auto;
  user-select: none;
}
.feat__escalation-lottie {
  display: block;
  width: 100%;
  max-width: 1168px;
  height: auto;
  aspect-ratio: 1128 / 750;
  background: #0a2633;
}


/* ═══ Responsive — features ═════════════════════════ */
@media (max-width: 1100px) {
  .features__head {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 32px;
    padding: 0 24px;
  }
  .features__title {
    font-size: 44px;
    line-height: 52px;
  }
  .features__head-side {
    align-items: flex-start;
    gap: 32px;
  }

  .features .feat:first-of-type { margin-top: 200px; }
  .features .feat:nth-of-type(2) { margin-top: 180px; }

  .feat { padding: 0 24px; }
  .feat__title { font-size: 32px; line-height: 36px; }
  .feat__title--w-302,
  .feat__title--w-350 { width: auto; max-width: 460px; }
  .feat__lede { margin-top: 32px; font-size: 16px; line-height: 24px; }
  .feat__lede--w-375,
  .feat__lede--w-397 { width: auto; max-width: 460px; }

  .feat__media { margin-top: 80px; width: 100%; max-width: 560px; }

  .feat__media--summary,
  .feat__media--routine,
  .feat__media--escalation { width: 100%; }

  .feat__summary-img { width: 100%; }
  .feat__iphone-img { width: 320px; }

  .feat__dr-albert {
    width: 130px;
    right: -36px;
    top: auto;
    bottom: 90px;
    animation: none;
    transform: none;
  }
}

@media (max-width: 720px) {
  .features__title { font-size: 32px; line-height: 38px; }
  .features__head-copy { font-size: 15px; line-height: 22px; }

  .features .feat:first-of-type { margin-top: 140px; }
  .features .feat:nth-of-type(2) { margin-top: 120px; }
  .features .feat:nth-of-type(3) { margin-top: 120px; }

  .feat__title { font-size: 28px; line-height: 32px; }
  .feat__media { margin-top: 56px; }
  .feat__iphone-img { width: 340px; }
  .feat__dr-albert { width: 100px; right: -8px; bottom: 48px; }
}

/* ═══ Experience section ═══════════════════════════════
   Light-bg section sitting after the bottom wave. Holds a
   centered header and three illustrated feature blocks:
   one full-width and two side-by-side.
*/
.exp {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 32px 240px;
  background: var(--color-bg);
}

.exp__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.exp__title {
  font-weight: 450;                   /* PP NM Regular */
  font-size: 72px;
  line-height: 76px;
  letter-spacing: 0;
  color: var(--color-ink);
  max-width: 743px;
  margin: 0;
}
/* .exp__title-muted styling lives in the shared .title-muted utility (home.css). */

.exp__lede {
  margin-top: 24px;
  max-width: 599px;
  font-weight: 400;                   /* PP NM Book */
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.6px;
  color: var(--color-ink);
}

/* ─── Block ─────────────────────────────────────────── */
.exp-block {
  display: flex;
  flex-direction: column;
  /* Allow grid items to shrink below their content's intrinsic
     width, so the two-up row collapses cleanly on mobile. */
  min-width: 0;
}
.exp-block--full {
  margin-top: 120px;
}

.exp-block__media {
  position: relative;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-bg);
}
.exp-block__media img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

/* Full-width block keeps the 1320×668 ≈ 1.976 aspect. */
.exp-block__media--full {
  aspect-ratio: 1320 / 668;
}
.exp-block__media--full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Voice overlay — base styles live in home.css (.voice-overlay).
   Here we just position the card over the upper-right of the
   patient illustration and tune the body-text size for this
   block (the Priya quote needs slightly larger type). */
.exp-block__media--full .voice-overlay {
  top: 15%;
  left: 62%;
  transform: translateX(-50%);
  width: clamp(280px, 32%, 380px);
  height: clamp(160px, 19vw, 164px);
}
.exp-block__media--full .voice-overlay__text {
  font-size: 16px;
}

/* Two-up tiles use the 640×460 aspect. */
.exp-row .exp-block__media {
  aspect-ratio: 640 / 460;
}
.exp-row .exp-block__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.exp-block__copy {
  margin-top: 28px;                   /* y=1256 - y=1228 ≈ 28 */
  max-width: 640px;
  font-weight: 400;                   /* PP NM Book */
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.6px;
  color: var(--color-ink);
}

.exp-block__lead {
  font-weight: 600;                   /* PP NM SemiBold */
}

/* ─── Two-up row ──────────────────────────────────────── */
.exp-row {
  margin-top: 80px;
  display: grid;
  /* minmax(0, 1fr) lets the cells shrink below their natural
     content width — without it, fixed-width children would force
     horizontal overflow on narrow viewports. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 40px;                   /* 884 - 204 - 640 = 40 */
  row-gap: 0;
}

/* ═══ Responsive — exp ═════════════════════════════════ */
@media (max-width: 1100px) {
  .exp { padding: 96px 24px 140px; }
  .exp__title { font-size: 44px; line-height: 52px; }
  .exp__lede { font-size: 16px; line-height: 24px; }

  .exp-block--full { margin-top: 120px; }
  .exp-row {
    margin-top: 120px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 96px;
  }
}

@media (max-width: 720px) {
  .exp { padding: 80px 16px 120px; }
  .exp__title { font-size: 32px; line-height: 36px; }
  .exp__lede { margin-top: 20px; font-size: 16px; line-height: 24px; }

  .exp-block--full { margin-top: 80px; }
  .exp-block__copy { margin-top: 20px; font-size: 16px; line-height: 24px; }
  .exp-row { margin-top: 80px; row-gap: 64px; }
  .exp-block__media { border-radius: 20px; }

  /* Hide the voice overlay on mobile — the patient illustration
     reads better without the overlapping card on small screens. */
  .exp-block__media--full .voice-overlay { display: none; }
}

/* Clinics-page override of the shared `main { padding: 0 24px }`
   rule from home.css. Scoped automatically because clinics.css is
   only loaded on clinics.html. Full-bleed sections inside main
   (.dash-show, .stats, .features, .wave-bottom) use
   `width: 100vw; margin-left: calc(50% - 50vw)` and remain viewport-
   aligned regardless of main's side padding. */
@media (max-width: 1100px) {
  main { padding: 0 8px; }
}

/* ═══ Security & Compliance section ═══════════════════
   Full-bleed light section. A subtle tinted slab paints
   the top ~1382px (header + logos + tile row), then the
   page bg resumes below. Uses a 3-up grid for the tiles.
*/
.sec {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Bottom padding adds breathing room inside the tinted
     slab — between the tile captions and the seam where
     .sec ends and .overhead begins. */
  padding: 0 0 230px;
  isolation: isolate;
}

/* Full-bleed tinted slab matching .sec's exact bounds.
   Anchored top + bottom so it always fills the section
   regardless of content height — without this, a fixed
   height of 1382px would leak past the section's true
   bottom and bleed into whatever follows. */
.sec__tint {
  position: absolute;
  inset: 0;
  background: #EBEFF0;
  z-index: 0;
  pointer-events: none;
}

/* ─── Header ─────────────────────────────────────────── */
.sec__head {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 218px 0px 0;
  display: grid;
  /* Right column matches the THIRD tile's column below
     (480 px, with 28 px gap to its neighbour), so the
     side container's left edge lines up with the third
     "Setting the safety standard." tile. The left column
     fills the remaining space. */
  grid-template-columns: minmax(0, 1fr) 480px;
  column-gap: 28px;
  align-items: start;
}

.sec__title {
  font-weight: 450;                   /* PP NM Regular */
  font-size: 56px;
  line-height: 70px;
  letter-spacing: 0;
  color: var(--color-ink);
  margin: 0;
}
/* .sec__title-muted styling lives in the shared .title-muted utility (home.css). */

.sec__head-side {
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.sec__head-copy {
  font-weight: 400;                   /* PP NM Book */
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.6px;
  color: var(--color-ink);
  max-width: 433px;
}

/* .sec__cta has no extra styling — it just uses .btn / .btn--filled-dark. */

/* ─── Logos marquee ──────────────────────────────────── */
.logos {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 92px auto 0;                /* y=472 - y=380 (head bottom) ≈ 92 */
  height: 80px;
  border-radius: 16px;
  background: #EAEEEF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  /* Edge fade — transparent at both ends so the marquee
     items appear to dissolve in/out. Authored as a mask
     so it blends with whatever bg sits behind. */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 14%,
    rgba(0,0,0,1) 86%,
    rgba(0,0,0,0) 100%
  );
          mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 14%,
    rgba(0,0,0,1) 86%,
    rgba(0,0,0,0) 100%
  );
}

.logos__track {
  display: flex;
  align-items: center;
  gap: 0;                              /* no seam between the duplicate rows */
  height: 100%;
  width: max-content;
  /* Track holds FOUR identical rows. Translating by -25%
     of the track equals exactly one row's width — the
     remaining three rows occupy the visible band, and
     the snap-back at -25% lands on a pixel-identical
     state, so the loop is endless with no empty space. */
  animation: logos-marquee 33.33s linear infinite;
  will-change: transform;
}
@keyframes logos-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}

.logos__row {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-shrink: 0;
}

.logos__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;                    /* spacing between items */
  font-weight: 450;                   /* PP NM Regular */
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.logos__icon {
  width: auto;
  height: 18px;
  display: block;
  flex-shrink: 0;
}
/* SOC 2 icon's natural aspect renders smaller than the EHR/HIPAA
   shields at the same height, so bump it up a touch for visual
   parity with its neighbors. */
.logos__icon[src*="SOC2"] { height: 20px; }

/* Visually hidden list of the logos for screen readers
   (the marquee is aria-hidden so AT users get a clean
   itemized list instead of duplicated content). */
.logos__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pause animation for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; }
}

/* ─── 3-up tile row ──────────────────────────────────── */
/* Figma: 3 columns × 480 px with a 28 px gap inside the
   1496 px container rail (same rail as the logos band).
   We mirror that exactly so content from x=116..x=1612 in
   the 1728 design viewport lands at the same proportional
   inset on any viewport. */
.sec-row {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 36px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 480px));
  column-gap: 28px;
  row-gap: 0;
  justify-content: space-between;     /* 1496 - 3×480 - 2×28 = 0 → tracks butt to gutters */
}

.sec-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sec-block__media {
  position: relative;
  width: 100%;
  aspect-ratio: 480 / 460;
  border-radius: 26px;
  overflow: hidden;
  background: transparent;
}
.sec-block__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
}

.sec-block__copy {
  margin-top: 28px;
  max-width: 480px;
  font-weight: 400;                   /* PP NM Book */
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.6px;
  color: var(--color-ink);
}
.sec-block__lead {
  font-weight: 600;                   /* PP NM SemiBold */
}

/* ═══ Responsive — sec ════════════════════════════════ */
@media (max-width: 1100px) {
  .sec__head {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 32px;
    padding: 120px 24px 0;
  }
  .sec__title { font-size: 44px; line-height: 52px; }
  .sec__head-side { gap: 20px; }

  .logos {
    margin-top: 64px;
    height: 72px;
  }
  .logos__item { padding: 0 20px; font-size: 13px; }

  .sec-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 64px;
    padding: 0 24px;
    margin-top: 56px;
  }
  .sec-block__copy { font-size: 16px; line-height: 24px; }
}

@media (max-width: 720px) {
  .sec__head { padding: 96px 16px 0; }
  .sec__title { font-size: 32px; line-height: 38px; }
  .sec__head-copy { font-size: 15px; line-height: 22px; }

  .logos { margin-top: 48px; height: 64px; border-radius: 12px; }
  .logos__item { padding: 0 16px; font-size: 12px; }
  .logos__icon { height: 16px; }

  .sec-row { row-gap: 48px; padding: 0 16px; margin-top: 40px; }
  .sec-block__media { border-radius: 20px; }
}

/* ═══ Reduce admin overhead section ═══════════════════
   Centered header, wide hero illustration, three-up
   stats row, and three full-width white feature cards
   stacked vertically.
*/
.overhead {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 220px 32px 0px;
  background: var(--color-bg);
}

.overhead__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.overhead__title {
  font-weight: 450;                   /* PP NM Regular */
  font-size: 72px;
  line-height: 76px;
  letter-spacing: 0;
  color: var(--color-ink);
  max-width: 1013px;
  margin: 0;
}
/* .overhead__title-muted styling lives in the shared .title-muted utility (home.css). */

.overhead__lede {
  margin-top: 24px;
  max-width: 729px;
  font-weight: 400;                   /* PP NM Book */
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.6px;
  color: var(--color-ink);
}

/* ─── Hero illustration ──────────────────────────────── */
.overhead__hero {
  margin: 120px auto 0;
  width: 100%;
  max-width: 1320px;
  aspect-ratio: 1320 / 668;
  border-radius: 24px;
  overflow: hidden;
}
.overhead__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
}

/* ─── Stats row ──────────────────────────────────────── */
.overhead-stats {
  margin: 48px auto 0;
  list-style: none;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 64px;
}
.overhead-stats__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.overhead-stats__num {
  font-weight: 400;                   /* PP NM Book */
  font-size: 42px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-ink);
  white-space: nowrap;
}
.overhead-stats__label {
  margin-top: 4px;                    /* nudge baseline so the label aligns to number's cap height */
  font-weight: 400;                   /* PP NM Book */
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.6px;
  color: var(--color-ink);
}
.overhead-stats__label--w-140 { width: 140px; }
.overhead-stats__label--w-209 { width: 209px; }

/* ─── Feature cards ─────────────────────────────────── */
.oh-card {
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin: 40px auto 0;
  /* y=1500 - y=1376 (stats end ≈ 1376) = 124 first-card top gap.
     Cards stack with a 40px gap (1500 → 2200 → 2900). */
  height: 660px;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.oh-card:first-of-type {
  margin-top: 160px;
}

.oh-card__copy {
  position: relative;
  width: 50%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.oh-card__index {
  font-weight: 300;                   /* PP NM Light */
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.6px;
  color: var(--color-ink-soft);       /* #6C7D85 */
}

.oh-card__body {
  margin-top: 24px;
  max-width: 512px;
  font-weight: 400;                   /* PP NM Book */
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.6px;
  color: var(--color-ink);
}
.oh-card__lead {
  font-weight: 600;                   /* PP NM SemiBold */
}

/* Push the outline CTA to the bottom of the copy column.
   Visual styling comes from the shared .btn / .btn--outline. */
.oh-card__cta {
  margin-top: auto;
}

.oh-card__media {
  position: relative;
  width: 50%;
  /* Per Figma: illustration sits inside the white card with
     uniform padding, so the white card's edge frames the
     image — no padding on the LEFT (the image meets the
     copy column), and 40px padding on the other three
     sides so it stops short of the card's outer edges. */
  padding: 40px 40px 40px 0;
}
.oh-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  user-select: none;
}

/* ═══ Responsive — overhead ════════════════════════════ */
@media (max-width: 1100px) {
  .overhead { padding: 96px 24px 140px; }
  .overhead__title { font-size: 44px; line-height: 52px; }
  .overhead__lede { font-size: 16px; line-height: 24px; }

  .overhead__hero { margin-top: 72px; }
  .overhead-stats {
    margin-top: 64px;
    gap: 32px;
    flex-wrap: wrap;
  }
  .overhead-stats__num { font-size: 36px; }

  .oh-card,
  .oh-card:first-of-type {
    margin-top: 32px;
    height: auto;
    flex-direction: column;
  }
  .oh-card:first-of-type { margin-top: 80px; }

  .oh-card__copy,
  .oh-card__media { width: 100%; }
  .oh-card__copy {
    padding: 40px 32px 32px;
    gap: 32px;
  }
  .oh-card__body { margin-top: 24px; }
  .oh-card__cta { margin-top: 8px; }
  .oh-card__media {
    aspect-ratio: 16 / 10;
    padding: 0 32px 32px;             /* image inset on three sides on mobile */
  }
}

@media (max-width: 720px) {
  .overhead { padding: 80px 16px 120px; }
  .overhead__title { font-size: 32px; line-height: 36px; }
  .overhead__lede { margin-top: 20px; font-size: 16px; line-height: 24px; }

  .overhead__hero { margin-top: 56px; border-radius: 20px; }

  .overhead-stats {
    margin-top: 48px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 0 8px;
  }
  .overhead-stats__num { font-size: 32px; }
  .overhead-stats__label--w-140,
  .overhead-stats__label--w-209 { width: auto; max-width: 280px; }

  .oh-card,
  .oh-card:first-of-type {
    margin-top: 24px;
    border-radius: 20px;
  }
  .oh-card:first-of-type { margin-top: 64px; }
  .oh-card__copy { padding: 32px 24px 24px; }
  .oh-card__body { font-size: 16px; line-height: 24px; }
  .oh-card__media { aspect-ratio: 4 / 3; padding: 0 24px 24px; }
}