/* ===========================================================================
   POINT OF VIEW — a photographic negative of the homepage.

   The page reuses the homepage section shells (hero, gap-section, cta-section,
   footer) verbatim; this stylesheet only inverts each section's light/dark
   treatment, so where the homepage is dark the POV page is light and vice
   versa. Everything is scoped under body.pov-neg so it can't leak elsewhere.

   Homepage rhythm:  hero(dark) - band(dark) - gap(light) - cta(light) - footer(dark)
   POV negative:     hero(light) - sections alternate - cta(dark) - footer(light)
   =========================================================================== */

/* ---------- HERO  (black surface, text left + video right) ---------- */
.pov-neg .hero {
  background: var(--ink);
  color: var(--ink-on-dark);
  min-height: 88vh;
}
.pov-neg .hero-video,
.pov-neg .hero-overlay { display: none; }
.pov-neg .hero h1 { color: var(--ink-on-dark); }
.pov-neg .hero-lead { color: var(--ink-muted-on-dark); }

/* Two-column hero: text left, video right.
   Both columns are stretched to the same height. The left column anchors the
   headline to the top and the sub-copy caption to the bottom; the video fills
   the full column height so its top aligns with the headline's top and its
   bottom aligns with the caption's bottom — the two masses feel balanced.
   (Legora-style: the lead reads as a bottom-anchored metadata caption rather
   than a paragraph hanging under the headline.) */
.pov-neg .pov-hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 64px;
  align-items: stretch;
}
.pov-neg .pov-hero-grid .hero-content {
  /* No fixed cap: the type-as-hero headline fills its grid column so the
     explicit line breaks never wrap internally at the largest sizes. The lead
     keeps its own narrow measure via .hero-lead { max-width: 42ch }. */
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}
.pov-neg .pov-hero-grid .hero-content h1 { margin: 0; }
/* Caption: small mono label above the lead, sitting at the column's bottom. */
.pov-neg .pov-hero-caption { margin-top: 48px; }
.pov-neg .pov-hero-caption .eyebrow { display: block; margin: 0 0 14px; }
.pov-neg .pov-hero-caption .hero-lead {
  margin: 0;
  max-width: 42ch;
  font-size: var(--text-body-lg);
  line-height: 1.5;
}
.pov-neg .pov-hero-media { min-width: 0; display: flex; }
.pov-neg .pov-hero-media-frame {
  position: relative;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-dark);
  /* Fill the full height of the (stretched) left column. */
  align-self: stretch;
  /* Don't collapse below a sensible minimum if the headline is unusually short. */
  min-height: 420px;
}
.pov-neg .pov-hero-media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(0.96) brightness(0.95);
}
@media (max-width: 860px) {
  .pov-neg .pov-hero-grid { grid-template-columns: 1fr; row-gap: 32px; align-items: start; }
  .pov-neg .pov-hero-grid .hero-content { max-width: none; display: block; }
  .pov-neg .pov-hero-caption { margin-top: 28px; }
  /* On mobile the video returns to a natural 4:3 below the copy. */
  .pov-neg .pov-hero-media-frame { aspect-ratio: 4 / 3; min-height: 0; align-self: auto; }
}

/* ===========================================================================
   HERO AS TYPE-AS-EVENT (Legora-direction)
   The headline becomes the hero: oversized display serif set in tight stacked
   lines that own the left column, the final line lifted into the ice-blue
   accent. The video stays but is reframed as a deliberate cinematic panel
   (taller, subtle treatment, a mono corner tag) rather than a stock photo box.
   =========================================================================== */
.pov-neg .hero { min-height: 92vh; }

.pov-neg .pov-hero-grid { grid-template-columns: 1.18fr 0.82fr; gap: 56px; }

.pov-neg .pov-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  /* Larger and tighter than the default hero ramp — this is the page's loudest
     typographic moment. */
  font-size: clamp(44px, 6vw, 96px) !important;
  line-height: 0.99;
  letter-spacing: -0.03em;
}
.pov-neg .pov-hero-line { display: block; }
.pov-neg .pov-hero-line--accent { color: inherit; }

/* Per-line kinetic stagger: each line rises + un-blurs in sequence on enter,
   so the headline "performs" the way Legora's type does. Used on the hero
   (.pov-hero-line) and on section headlines (.pov-hl) site-wide on this page. */
.pov-neg .reveal-stagger .pov-hero-line,
.pov-neg .reveal-stagger .pov-hl {
  display: block;
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  transition: opacity 0.9s var(--reveal-ease), transform 0.9s var(--reveal-ease), filter 0.9s var(--reveal-ease);
}
.pov-neg .reveal-stagger .pov-hero-line:nth-child(1),
.pov-neg .reveal-stagger .pov-hl:nth-child(1) { transition-delay: 60ms; }
.pov-neg .reveal-stagger .pov-hero-line:nth-child(2),
.pov-neg .reveal-stagger .pov-hl:nth-child(2) { transition-delay: 180ms; }
.pov-neg .reveal-stagger .pov-hero-line:nth-child(3),
.pov-neg .reveal-stagger .pov-hl:nth-child(3) { transition-delay: 300ms; }
.pov-neg .reveal-stagger .pov-hero-line:nth-child(4),
.pov-neg .reveal-stagger .pov-hl:nth-child(4) { transition-delay: 420ms; }
.pov-neg .reveal-stagger.in-view .pov-hero-line,
.pov-neg .reveal-stagger.in-view .pov-hl {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .pov-neg .reveal-stagger .pov-hero-line,
  .pov-neg .reveal-stagger .pov-hl {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
}

/* Section headlines use a gradient text-fill (background-clip:text +
   -webkit-text-fill-color:transparent) applied to the <h2>. When we split a
   headline into per-line .pov-hl spans for the stagger, the glyphs move into
   the spans, which inherit the transparent fill but have no background to clip
   to — rendering invisible. Re-apply the gradient fill to each span so the
   lines paint correctly on both light and dark surfaces. */
.pov-neg .reveal-stagger .pov-hl {
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.12em;
  /* Default fallback fill; surface-specific gradients below. */
  background-image: linear-gradient(180deg, currentColor 0%, currentColor 100%);
}
/* Light sections: dark ink gradient. Dark sections: light gradient.
   The closing CTA (#book) is a light/cream section matching the homepage. */
.pov-neg .pov-sec--light .reveal-stagger .pov-hl,
.pov-neg .cta-section .reveal-stagger .pov-hl {
  background-image: linear-gradient(180deg, var(--ink) 0%, rgba(11, 11, 12, 0.78) 100%);
}
.pov-neg .pov-sec--dark .reveal-stagger .pov-hl {
  background-image: linear-gradient(180deg, var(--ink-on-dark) 0%, rgba(255, 255, 255, 0.72) 100%);
}

/* Hero descriptor as precise mono metadata: "Point of view / Aetonix". */
.pov-neg .pov-hero-meta__sep { opacity: 0.4; margin: 0 0.5em; }

/* Elevated cinematic media frame: taller portrait crop, gentle grade, and a
   mono corner tag pinned bottom-left so the panel reads as captioned footage. */
.pov-neg .pov-hero-media-frame {
  min-height: 540px;
}
.pov-neg .pov-hero-media-frame video {
  filter: saturate(0.92) contrast(0.98) brightness(0.92);
}
.pov-neg .pov-hero-media__tag {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
/* Soft bottom scrim so the tag stays legible over bright footage. */
.pov-neg .pov-hero-media-frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 860px) {
  .pov-neg .pov-hero-grid { grid-template-columns: 1fr; }
  .pov-neg .pov-hero-media-frame { min-height: 0; }
}

/* ---------- Cinematic figure treatment (elevated photos) ----------
   Shared look for the kept photographs (who-we-serve): a hairline frame, a
   gentle grade, a soft bottom scrim, and a mono corner tag — so the image
   reads as deliberate, captioned footage in the same language as the hero
   video panel, rather than a plain stock split. */
.pov-neg .pov-cine { position: relative; }
.pov-neg .pov-cine img {
  filter: saturate(0.94) contrast(0.98) brightness(0.96);
}
.pov-neg .pov-cine::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 36%;
  background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  pointer-events: none;
  z-index: 1;
}
.pov-neg .pov-cine__tag {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* ---------- Cinematic band (full-width captioned footage beat) ----------
   A deliberate scale-contrast moment between text sections: a tall, wide
   cinematic panel with an overlay caption (mono eyebrow + one display line)
   and the shared mono corner tag. Breaks the vertical text hum the way
   Legora drops in a large footage moment between dense blocks. */
/* ===========================================================================
   HOW WE ARE DIFFERENT — a left-anchored intro (eyebrow + heading + lead), a
   single static cinematic band, then four outcome columns. The heading, band
   and columns all share one content axis so the whole block reads as one
   composition rather than three drifting zones.
   =========================================================================== */
.pov-neg #how-we-are-different .hwd-head {
  max-width: none;
  margin-bottom: clamp(48px, 6vw, 72px);
}
/* Two-column intro: heading anchors the left, the lead counterweights the right
   (bottom-aligned so the two settle on a shared baseline) — fills the otherwise
   empty right half instead of stacking all the weight on the left. */
.pov-neg .hwd-head__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.pov-neg #how-we-are-different .hwd-head h2 { max-width: 12ch; }
.pov-neg #how-we-are-different .hwd-lead {
  margin: 0 0 6px;
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--ink-muted-on-light);
  text-wrap: pretty;
}

/* Static cinematic band — one clean letterbox on the content axis (no pin).
   aspect-ratio keeps it proportional; max-height stops it dominating on wide
   monitors. Edges align to the heading and the columns below. */
.pov-neg .hwd-band { position: relative; }
.pov-neg .hwd-band__sticky { position: static; padding: 0; }
.pov-neg .hwd-band__media {
  /* 0 = full height, 1 = collapsed 20% — driven by JS on scroll. */
  --hwd-shrink: 0;
  margin: 0;
  width: 100%;          /* fill the content axis so the right edge aligns with the columns */
  max-width: none;
  aspect-ratio: 2.2 / 1;
  height: auto;
  max-height: calc(660px * (1 - 0.2 * var(--hwd-shrink)));
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--ink);
}
.pov-neg .hwd-band__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Four columns. A mono index over a hairline rule gives each column a visual
   anchor and a clear large -> small type ladder. Each card is a subgrid sharing
   the row's index / title / body tracks, so the bodies stay aligned across
   columns without reserving dead space when every title is a single line. */
.pov-neg .hwd-outcomes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(28px, 3vw, 44px);
  row-gap: 0;
  margin-top: clamp(48px, 5vw, 72px);
}
.pov-neg .hwd-outcomes .gap-outcome {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  border-top: 1px solid rgba(11, 11, 12, 0.14);
  padding-top: 14px;
}
.pov-neg .hwd-index {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-muted-on-light);
}
.pov-neg .hwd-outcomes .gap-outcome-title {
  font-size: clamp(21px, 1.6vw, 27px);
  margin: 0;
}
.pov-neg .hwd-outcomes .gap-outcome-body {
  margin: 10px 0 0;
}

@media (max-width: 860px) {
  /* Stack the intro: the two-up header only balances when there's room for both
     columns to breathe. */
  .pov-neg .hwd-head__row { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .pov-neg #how-we-are-different .hwd-head h2 { max-width: 16ch; }
  .pov-neg #how-we-are-different .hwd-lead { margin: 0; max-width: 56ch; }
}
@media (max-width: 1024px) {
  /* Two-up: drop the subgrid so the four cards flow into two rows naturally. */
  .pov-neg .hwd-outcomes { grid-template-columns: 1fr 1fr; grid-template-rows: none; row-gap: 44px; }
  .pov-neg .hwd-outcomes .gap-outcome { display: block; grid-row: auto; }
}
@media (max-width: 600px) {
  .pov-neg .hwd-outcomes { grid-template-columns: 1fr; }
}

/* ---------- Content sections share the gap-section shell ---------- */
/* Neutralise the homepage's -72px overlap so stacked sections don't bleed. */
.pov-neg .gap-section.pov-sec { margin-top: 0; }

/* Light variant — cream surface, dark ink (the default gap-section colours
   already suit a light surface; we only swap white for cream). */
.pov-neg .pov-sec--light { background: var(--cream); color: var(--ink); }

/* Dark variant — grey surface, light ink. Recolour the children that the
   homepage tuned for a light background. */
.pov-neg .pov-sec--dark { background: var(--surface-dark); color: var(--ink-on-dark); }

/* ===========================================================================
   TONAL RAMP — instead of hard black/white/black alternation, the page steps
   smoothly down a single tonal gradient: darkest at the hero, easing through
   four dark steps, crossing once into the light cluster, then easing up four
   light steps to pure white at the last section. Each section keeps its
   --dark / --light class (which drives all the text/ink colors); we override
   only the background per section to create the gentle, stepped descent.
   ===========================================================================
   STRICT token surfaces only — no invented hex.
   Dark cluster (light text):
     hero / who-we-serve  --near-black   #0B0B0F
     why-we-exist         --surface-dark #141419
     care-delivery-model  --near-black   #0B0B0F
   --- single intentional crossover (moved up to On AI to lighten the run) ---
   Light cluster (dark ink):
     on-ai                --cream        #F9F7F4
     on-value-based-care  --brand-gray   #EDEFF2
     how-we-are-different --cream        #F9F7F4 (gradients in/out of gray)
     the-future           --brand-gray   #EDEFF2
     cta                  --brand-gray   #EDEFF2
   --- dark bookend ---
     footer               --near-black   #0B0B0F
   =========================================================================== */
.pov-neg .hero,
/* Tonal ramp — STRICT token surfaces only. Every section background maps to a
   defined brand surface: --near-black #0B0B0F, --surface-dark #141419,
   --brand-gray #EDEFF2, --cream #F9F7F4, --white #FFFFFF. No invented hex.
   Dark run shortened to 3 sections (crossover moved up to On AI) so the page
   is not dark-heavy up top. */
.pov-neg #who-we-serve.pov-sec        { background: var(--near-black); padding-top: 72px; padding-bottom: 72px; }   /* #0B0B0F */
/* why-we-exist: black fading down into brand purple (strict tokens only —
   --near-black #0B0B0F → --brand-purple #2D0A2E). The dot-map sits over the
   purple lower half, giving the section depth without a hard surface step. */
.pov-neg #why-we-exist.pov-sec        { background: linear-gradient(180deg, var(--near-black) 0%, var(--near-black) 28%, var(--brand-purple) 100%); }  /* #0B0B0F -> #2D0A2E */
.pov-neg #care-delivery-model.pov-sec { background: var(--surface-dark); }  /* purple treatment below */
/* on-ai: ice blue fading down into the brand gray of the next section so the
   surface step into #on-value-based-care reads as one continuous wash
   (strict tokens only — --brand-accent #CADFFF → --brand-gray #EDEFF2). */
.pov-neg #on-ai.pov-sec               { background: linear-gradient(180deg, var(--brand-accent) 0%, var(--brand-accent) 55%, var(--brand-gray) 100%); }  /* #CADFFF -> #EDEFF2 */
.pov-neg #on-value-based-care.pov-sec { background: var(--brand-gray); }   /* #EDEFF2 */
/* how-we-are-different: cream washing in from and back out to the brand gray
   of its neighbours, so neither surface step reads as a hard line — the
   background appears to drift gray -> cream -> gray as the section scrolls
   (strict tokens only — --brand-gray #EDEFF2 / --cream #F9F7F4). */
.pov-neg #how-we-are-different.pov-sec{ background: linear-gradient(180deg, var(--brand-gray) 0%, var(--cream) 28%, var(--cream) 72%, var(--brand-gray) 100%); }
.pov-neg #the-future.pov-sec          { background: var(--brand-gray); }   /* #EDEFF2 */
/* The CTA follows #the-future directly, so it sits on the same brand gray —
   the shared homepage rule fades white -> gray, which would re-introduce a
   hard edge here. The grid texture already fades in via its own mask. */
.pov-neg .cta-section                 { background: var(--brand-gray); }   /* #EDEFF2 */
/* The page resolves up to a light close. The CTA matches the homepage
   (light surface, dark ink, grid canvas); the footer remains the dark bookend,
   bridged by the .closing-band gradient. */
.pov-neg .site-footer { background: var(--near-black); }                /* #0B0B0F */
.pov-neg .pov-sec--dark .gap-intro h2 {
  background: linear-gradient(180deg, var(--ink-on-dark) 0%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-background-clip: text;
          background-clip: text;
}
.pov-neg .pov-sec--dark .gap-lead { color: var(--ink-near-on-dark); }
.pov-neg .pov-sec--light .gap-lead { color: var(--ink-muted-on-light); }
.pov-neg .pov-sec--dark .gap-outcome-title { color: var(--ink-on-dark); }
.pov-neg .pov-sec--dark .gap-outcome-body { color: var(--ink-muted-on-dark); }

/* Four-up grid for the "how we're different" / "the future" statement cards. */
.pov-neg .gap-outcomes--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .pov-neg .gap-outcomes--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .pov-neg .gap-outcomes--4 { grid-template-columns: 1fr; }
}

/* The closing kicker line in the value-based-care section (now a light
   surface in the ramp, so the kicker reads as dark ink). */
.pov-neg .pov-kicker { color: var(--ink); font-weight: 500; }

/* ---------- FOOTER  (dark bookend that mirrors the hero) ----------
   Background is the darkest ramp tone (#0B0B0F, set above); text is light. */
.pov-neg .site-footer { color: var(--ink-muted-on-dark); }
.pov-neg .site-footer .eyebrow--on-dark { color: var(--ink-faint-on-dark); }
.pov-neg .site-footer a { color: var(--ink-muted-on-dark); }
.pov-neg .site-footer a:hover { color: var(--ink-on-dark); }
.pov-neg .footer-tag { color: var(--ink-muted-on-dark); }
.pov-neg .footer-wordmark-display { color: var(--ink-on-dark); }
.pov-neg .footer-baseline { color: var(--ink-faint-on-dark); }

/* ===========================================================================
   POV NARRATIVE SYSTEM
   Six prose sections previously shared one single-column layout, so they
   blurred together. This kit gives each a distinct layout while unifying them
   under one rhythm: a sticky section title on the left, content scrolling past
   on the right, hairline rules, and the existing .reveal-* scroll animations.
   Sticky (not JS-pinned) for accessibility; collapses to stacked single-column
   under 860px and respects prefers-reduced-motion via the shared reveal system.
   =========================================================================== */

/* Two-column shell: sticky title rail (left) + scrolling content (right). */
.pov-neg .pov-block {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 80px;
  align-items: start;
}
.pov-neg .pov-block__title {
  position: sticky;
  top: 120px;
  align-self: start;
}
.pov-neg .pov-block__title .eyebrow { display: block; margin: 0 0 20px; }
.pov-neg .pov-block__title h2 {
  margin: 0;
  line-height: 1.05;
  text-wrap: balance;
  max-width: 14ch;
}
/* Dark sections keep the gradient-clipped heading; light keep solid ink. */
.pov-neg .pov-sec--light .pov-block__title h2 { color: var(--ink); }

.pov-neg .pov-block__body { min-width: 0; }
.pov-neg .pov-block__body .gap-lead { margin-top: 0; max-width: 56ch; }
.pov-neg .pov-block__body .gap-lead + .gap-lead { margin-top: 28px; }
/* A lead paragraph after a contrast/list block needs breathing room. */
.pov-neg .pov-contrast + .gap-lead,
.pov-neg .pov-list + .gap-lead { margin-top: 40px; }

/* Hairline rule colour adapts to surface. */
.pov-neg .pov-sec--dark  { --pov-rule: rgba(255,255,255,0.14); }
.pov-neg .pov-sec--light { --pov-rule: rgba(11,11,12,0.12); }

/* ---- Hairline list (Legora security pattern): label + body, divided ---- */
.pov-neg .pov-list { display: grid; gap: 0; }
.pov-neg .pov-list__item {
  padding: 24px 0;
  border-top: 1px solid var(--pov-rule);
}
.pov-neg .pov-list__item:last-child { border-bottom: 1px solid var(--pov-rule); }
.pov-neg .pov-list__item h3 {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.pov-neg .pov-list__item p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  max-width: 60ch;
}
.pov-neg .pov-sec--dark  .pov-list__item p { color: var(--ink-muted-on-dark); }
.pov-neg .pov-sec--light .pov-list__item p { color: var(--ink-muted-on-light); }

/* ---- Dot-globe field (value-based-care) -----------------------------------
   A dispersed dot-sphere in the house USA-dot-map style — fine hairline dots,
   ~half ice-blue, crossed by two thin orbital arcs — that scatters as loose
   dust and converges into a globe (Stripe "borderless money movement"
   reference). It is anchored to the BOTTOM of the section and centred, with its
   centre on the lower edge so only the top hemisphere rises in — a half-cut,
   atmospheric dome. The top is feathered so it dissolves upward into the copy,
   and a soft light bloom sits behind it so the field reads as atmosphere
   rather than a diagram. ---------------------------------------------------- */
.pov-neg #on-value-based-care.pov-sec {
  position: relative;
  overflow: hidden;
  /* Faint purple rising from the bottom adds depth and ties into the globe's
     purple base; sits over the brand-gray surface. */
  background:
    linear-gradient(to top, rgba(45, 10, 46, 0.07) 0%, rgba(45, 10, 46, 0) 44%),
    var(--brand-gray);
  /* Room below the copy so the dome reads as atmosphere in open space rather
     than sitting behind the proof rows. */
  min-height: clamp(680px, 86vh, 960px);
}
.pov-neg .pov-globe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(72%, 720px);
  z-index: 0;
  pointer-events: none;
}
/* Soft luminous bloom behind the dome — atmosphere, not a hard sphere. */
.pov-neg .pov-globe::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: min(1180px, 92%);
  height: 118%;
  transform: translateX(-50%);
  background:
    radial-gradient(50% 52% at 50% 100%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 68%),
    radial-gradient(46% 50% at 50% 96%, rgba(202,223,255,0.22) 0%, rgba(202,223,255,0) 72%);
}
.pov-neg .pov-globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* feather the top so the dome dissolves upward into the section */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 34%, #000 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 34%, #000 100%);
}
/* Keep all section content above the globe layer. */
.pov-neg #on-value-based-care .container { position: relative; z-index: 1; }

/* ---- Value-based-care: one clear argument, not five competing ideas. -------
   Tighten the headline (smaller + a measure that wraps to whole phrases, not
   oversized fragments), pull the eyebrow in, and soften the dividers + numerals
   so the rows read as quiet evidence. The left rail aligns to the top of the
   right column. Scoped so no other section is affected. --------------------- */
.pov-neg #on-value-based-care .pov-block__title h2 {
  font-size: clamp(34px, 4.5vw, 64px);   /* ~12–15% smaller than the global h2 */
  max-width: 24ch;                       /* whole-phrase line wraps */
  /* Looser line-height so the gradient text-fill box covers glyph descenders
     (the g/p tails were clipped at the tight 1.02 line-height). */
  line-height: 1.14;
}
.pov-neg #on-value-based-care .pov-block__title .eyebrow { margin-bottom: 12px; }

/* Align the left rail with the top of the right column: no sticky offset
   pushing the headline down below the first proof row. */
.pov-neg #on-value-based-care .pov-block__title {
  position: relative;
  top: auto;
}

/* Dividers organise the list without competing with the type. */
.pov-neg #on-value-based-care.pov-sec { --pov-rule: rgba(11,11,12,0.08); }
/* The list closes on the last entry itself — no trailing rule under it. */
.pov-neg #on-value-based-care .pov-list--partners .pov-list__item:last-child { border-bottom: 0; }

/* Quieter numerals — evidence, not another messaging layer. */
.pov-neg #on-value-based-care .pov-list--future .pov-list__n {
  color: var(--ink-faint-on-light);
  opacity: 0.7;
}

/* Strong but slightly smaller titles, tighter row rhythm. */
.pov-neg #on-value-based-care .pov-list--partners h3 {
  font-size: clamp(17px, 1.35vw, 20px);
}
.pov-neg #on-value-based-care .pov-list--future .pov-list__item {
  padding: clamp(15px, 1.3vw, 19px) 0;
}

/* ---- Partner list (value-based-care): the numbered hairline pattern from
   the "future" list, but each row carries a label + a single short descriptor.
   No icons — a confident editorial statement, not a feature grid (Legora). ---- */
.pov-neg .pov-list--partners .pov-list__text { min-width: 0; }
.pov-neg .pov-list--partners h3 {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.pov-neg .pov-list--partners .pov-list__text p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
}
.pov-neg .pov-sec--light .pov-list--partners .pov-list__text p { color: var(--ink-muted-on-light); }
.pov-neg .pov-sec--dark  .pov-list--partners .pov-list__text p { color: var(--ink-muted-on-dark); }
.pov-neg .pov-sec--light .pov-list--future .pov-list__n { color: var(--ink-faint-on-light); }
.pov-neg .pov-sec--dark  .pov-list--future .pov-list__n { color: var(--ink-faint-on-dark); }

/* ---- Future list: numbered statements (01–04) sharing the value-based-care
   index-number language, but single-column — a quiet marker in the left gutter
   + the statement. Even row rhythm so single- and multi-line rows breathe the
   same. Scoped to --future so other .pov-list uses are untouched. ---- */
.pov-neg .pov-list--future { margin: 0; padding: 0; list-style: none; }
.pov-neg .pov-list--future .pov-list__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: clamp(16px, 1.8vw, 28px);
  align-items: baseline;
  padding: clamp(20px, 1.8vw, 26px) 0;
}
.pov-neg .pov-list--future .pov-list__n {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.pov-neg .pov-list--future h3 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 44ch;
}

/* ---- Stat trio (stacked, hairline-divided) ---- */
.pov-neg .pov-stats { display: grid; gap: 0; margin-top: 8px; }
.pov-neg .pov-stat {
  padding: 28px 0;
  border-top: 1px solid var(--pov-rule);
}
.pov-neg .pov-stat:last-child { border-bottom: 1px solid var(--pov-rule); }
.pov-neg .pov-stat__num {
  font-family: var(--font-display, var(--font-body));
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.pov-neg .pov-stat__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
}
.pov-neg .pov-sec--dark  .pov-stat__label { color: var(--ink-muted-on-dark); }
.pov-neg .pov-sec--light .pov-stat__label { color: var(--ink-muted-on-light); }

/* ---- Contrast two-up (old model vs. the new one) ---- */
.pov-neg .pov-contrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 8px;
}
.pov-neg .pov-contrast__col { padding-top: 24px; border-top: 1px solid var(--pov-rule); }
.pov-neg .pov-contrast__tag {
  display: block;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pov-neg .pov-sec--dark  .pov-contrast__tag { color: var(--ink-faint-on-dark); }
.pov-neg .pov-sec--light .pov-contrast__tag { color: var(--ink-faint-on-light); }
.pov-neg .pov-contrast__col p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
}
.pov-neg .pov-sec--dark  .pov-contrast__col p { color: var(--ink-near-on-dark); }
.pov-neg .pov-sec--light .pov-contrast__col p { color: var(--ink); }

/* ---- Thin-line image placeholders (swap real photos in later) ---- */
.pov-neg .pov-ph {
  position: relative;
  width: 100%;
  border: 1px solid var(--pov-rule);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pov-neg .pov-ph[data-ratio="3:4"]  { aspect-ratio: 3 / 4; }
.pov-neg .pov-ph[data-ratio="4:3"]  { aspect-ratio: 4 / 3; }
.pov-neg .pov-ph[data-ratio="1:1"]  { aspect-ratio: 1 / 1; }
.pov-neg .pov-ph[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.pov-neg .pov-ph__label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pov-neg .pov-sec--dark  .pov-ph__label { color: var(--ink-faint-on-dark); }
.pov-neg .pov-sec--light .pov-ph__label { color: var(--ink-faint-on-light); }
/* Corner ticks so an empty box still reads as an intentional frame. */
.pov-neg .pov-ph::before,
.pov-neg .pov-ph::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--pov-rule);
}
.pov-neg .pov-ph::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.pov-neg .pov-ph::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* Media spanning full content width below the body text. */
.pov-neg .pov-block__media { margin-top: 48px; }
.pov-neg .pov-block__media--wide { grid-column: 1 / -1; margin-top: 72px; }
/* When a full-width image follows the block, make sure the (possibly taller,
   sticky) title column can never overlap the image: reserve clearance below
   the text columns. */
.pov-neg .pov-block:has(+ .pov-block__media--wide) { padding-bottom: 56px; }

/* Stat trio sits beside a tall image inside the body column. */
.pov-neg .pov-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}

/* Card grids living inside a sticky-title body column: cards are narrower
   here than full-width, so 2-up reads better than 4-up. Kill the .gap-outcomes
   top margin since the body column already supplies vertical rhythm. */
.pov-neg .pov-block__body .gap-outcomes { margin-top: 8px; }
.pov-neg .gap-outcomes--2 { grid-template-columns: 1fr 1fr; gap: 40px 48px; }

/* ---- Real images drop into the same frames the placeholders used ---- */
.pov-neg figure.pov-block__media,
.pov-neg figure.pov-block__media--wide,
.pov-neg .pov-hero-split__media { margin: 0; }
.pov-neg figure.pov-block__media img,
.pov-neg figure.pov-block__media--wide img,
.pov-neg .pov-hero-split__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
.pov-neg figure.pov-block__media--wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.pov-neg figure.pov-block__media img { aspect-ratio: 1 / 1; object-fit: cover; }

/* ---- WHO WE SERVE: headline copy block height-matched to its image ----
   Left column (eyebrow + headline + lede) is set to the image's height and
   distributes its content top-to-bottom, so the top of the eyebrow lines up
   with the top of the photo and the last line of body copy lines up with the
   bottom of the photo. The 3:4 image defines that height. */
.pov-neg .pov-hero-split {
  display: grid;
  /* Image left, copy right: media column first and a touch wider. */
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 72px;
  align-items: stretch;
}
.pov-neg .pov-hero-split__media { order: 1; }
.pov-neg .pov-hero-split__copy  { order: 2; }

/* Reverse variant: image on the right, copy on the left — alternates the
   rhythm against the default split so consecutive sections mirror each other. */
.pov-neg .pov-hero-split--reverse {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
.pov-neg .pov-hero-split--reverse .pov-hero-split__media { order: 2; }
.pov-neg .pov-hero-split--reverse .pov-hero-split__copy  { order: 1; }

/* ---- Image swipe-up reveal ----
   The figure masks its image with a clip-path that opens from the bottom edge
   upward (a rising curtain), while the image inside starts slightly lower and
   scaled-in, then settles — so the photo feels like it swipes up into frame.
   Driven by the same .in-view toggle the rest of the page uses. */
.pov-neg .pov-reveal-wipe { overflow: hidden; }
.pov-neg .pov-reveal-wipe img,
.pov-neg .pov-reveal-wipe video {
  clip-path: inset(100% 0 0 0);
  transform: translateY(24px) scale(1.06);
  transition: clip-path 1.1s var(--reveal-ease), transform 1.1s var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: clip-path, transform;
}
.pov-neg .pov-reveal-wipe.in-view img,
.pov-neg .pov-reveal-wipe.in-view video {
  clip-path: inset(0 0 0 0);
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .pov-neg .pov-reveal-wipe img,
  .pov-neg .pov-reveal-wipe video {
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
}
.pov-neg .pov-hero-split__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.pov-neg .pov-hero-split__copy .eyebrow { display: block; margin: 0 0 24px; }
.pov-neg .pov-hero-split__title {
  margin: 0;
  line-height: 1.05;
  text-wrap: balance;
  /* Narrow enough to wrap to 4 lines (the cap), filling the column so the
     gap to the lede stays tight rather than leaving a large void. */
  max-width: 13ch;
}
.pov-neg .pov-hero-split__lede { margin-top: 40px; max-width: 52ch; }
.pov-neg .pov-hero-split__lede .gap-lead { margin-top: 0; }
.pov-neg .pov-hero-split__lede .gap-lead + .gap-lead { margin-top: 24px; }
.pov-neg .pov-hero-split__media { align-self: stretch; }
.pov-neg .pov-hero-split__media img {
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* ---- US dot-map (replaces the why-we-exist photo) ----
   A field of dots in the shape of the lower-48; ~half glow in the ice-blue
   accent to encode "roughly half of US adults". The canvas is animated by
   initUsMap() in the page script (scatter -> settle on scroll-in). The map is
   wide (≈1.6:1), so it overrides the column's 3/4 frame and centres itself in
   the media column rather than stretching. */
.pov-neg .pov-usmap {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
}
.pov-neg .pov-usmap__canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1.6125 / 1;   /* matches the generated dot data */
  height: auto;
}
.pov-neg .pov-usmap__caption {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* wide enough to wrap to 2 balanced lines (~28ch each) instead of 3 */
  max-width: 48ch;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ink-muted-on-dark);
}
.pov-neg .pov-usmap__caption-text { text-wrap: balance; }
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent) 60%, transparent), 0 0 8px color-mix(in srgb, var(--brand-accent) 60%, transparent); }
  50%       { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-accent) 0%, transparent),  0 0 8px color-mix(in srgb, var(--brand-accent) 60%, transparent); }
}
.pov-neg .pov-usmap__dot {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--brand-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--brand-accent) 60%, transparent);
  animation: dot-pulse 2s ease-in-out infinite;
}

/* ---- US-map split: top-align both columns so the eyebrow and the top of the
   map start on the same line, and let the copy sit at the top instead of
   stretching to fill (the map is the visual anchor). Scoped to --usmap so the
   who-we-serve photo split keeps its stretch behaviour. ---- */
.pov-neg .pov-hero-split--usmap {
  align-items: start;
  /* give the map column more room so the silhouette reads larger and balances
     the oversized headline (was 1.05fr / 0.95fr on the reverse variant) */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}
.pov-neg .pov-hero-split--usmap .pov-hero-split__copy { justify-content: flex-start; }
.pov-neg .pov-hero-split--usmap .pov-usmap {
  align-self: start;
  /* nudge the map down so its optical centre lines up with the headline */
  margin-top: 12px;
}

/* ---- Responsive: collapse to single column, drop sticky ---- */
@media (max-width: 860px) {
  .pov-neg .gap-outcomes--2 { grid-template-columns: 1fr; }
  .pov-neg .pov-block { grid-template-columns: 1fr; gap: 36px; }
  .pov-neg .pov-block__title { position: static; top: auto; }
  .pov-neg .pov-block__title h2 { max-width: none; }
  .pov-neg .pov-contrast { grid-template-columns: 1fr; gap: 28px; }
  .pov-neg .pov-split { grid-template-columns: 1fr; gap: 32px; }
  .pov-neg .pov-block__media--wide { margin-top: 36px; }
  /* Who we serve stacks: copy first, image below at natural 3:4 height. */
  .pov-neg .pov-hero-split { grid-template-columns: 1fr; gap: 36px; }
  .pov-neg .pov-hero-split__media { order: 2; }
  .pov-neg .pov-hero-split__copy { order: 1; display: block; }
  .pov-neg .pov-hero-split__title { max-width: none; }
  .pov-neg .pov-hero-split__media img { height: auto; }
}

/* ===========================================================================
   LEGORA-DIRECTION POLISH (POV page only)
   Three moves that push the page toward the editorial / institutional feel:
   (1) monospace eyebrows tracked out as metadata labels,
   (2) larger, tighter display-serif headlines,
   (3) a narrower body-copy measure for an editorial reading rhythm.
   All scoped to .pov-neg so nothing leaks to other pages.
   =========================================================================== */

/* --font-mono fallback chain (declared as a custom prop on the page root). */
.pov-neg {
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* (1) Eyebrows become mono metadata labels: smaller, wider tracking, a touch
   of extra weight so the lighter mono reads cleanly at 11px. */
.pov-neg .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
/* The mono eyebrows are tiny; the 0.45 faint tone disappears on the deep ramp
   tones, so lift them to a clearly-legible muted level on each surface. */
.pov-neg .pov-sec--dark .eyebrow,
.pov-neg .site-footer .eyebrow { color: var(--ink-muted-on-dark); }
.pov-neg .pov-sec--light .eyebrow,
.pov-neg .cta-section .eyebrow { color: var(--ink-muted-on-light); }

/* (1b) Brand accent on the eyebrow label — ATX's single grounded signal
   (ice-blue "--brand-accent"), the equivalent of a lone accent color on an
   otherwise neutral, type-led layout. Used in place of the muted neutral so
   each section is announced by a quiet brand cue rather than gray metadata.
   The mono "/" separators (a colour-mixed faint tone) stay recessive so the
   accent reads as the label, not the punctuation. */
.pov-neg .pov-sec--dark .eyebrow { color: color-mix(in srgb, var(--brand-accent) 70%, #3f6fd1); }
.pov-neg .pov-sec--light .eyebrow,
.pov-neg .cta-section .eyebrow { color: color-mix(in srgb, var(--brand-accent) 30%, #1f3b73); }
.pov-neg .site-footer .eyebrow { color: var(--ink-muted-on-dark); }

/* (2) Display headlines: larger and set tighter so multi-line headings read as
   a single typographic block. Applies to both the sticky-title blocks and the
   hero-split title. */
.pov-neg .pov-block__title h2,
.pov-neg .pov-hero-split__title {
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

/* (3) Narrower editorial measure for body copy. */
.pov-neg .pov-block__body .gap-lead { max-width: 46ch; }
.pov-neg .pov-hero-split__lede { max-width: 44ch; }

@media (max-width: 768px) {
  /* Keep headlines from going oversized on small screens. */
  .pov-neg .pov-block__title h2,
  .pov-neg .pov-hero-split__title { font-size: 34px; letter-spacing: -0.02em; }
}

/* ===========================================================================
   ON AI — type-as-hero (Legora-direction)
   No left media. The headline is the visual: oversized stacked display serif,
   split into an ink line (the affirmation) and a muted line (the limit), the
   way Legora stacks a solid + tinted weight. Body copy drops below at a small,
   scannable measure with bold lead-ins as entry anchors, plus a single hairline
   "limit" note set apart. Scoped under .pov-neg #on-ai so nothing leaks.
   =========================================================================== */
.pov-neg #on-ai .pov-onai { display: block; }
.pov-neg #on-ai .pov-onai__eyebrow { display: block; margin: 0 0 28px; }

.pov-neg #on-ai .pov-onai__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  /* Bigger than the rest of the page's headlines — this is the hero. */
  font-size: clamp(44px, 8vw, 124px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.pov-neg #on-ai .pov-onai__line { display: block; }
/* Second line set in italic ink to match the headline (was a neutral grey).
   Italic differentiates it from the first line while keeping full contrast over
   the section's ice-blue (#CADFFF). */
.pov-neg #on-ai .pov-onai__line--muted { color: var(--ink); font-style: italic; }

/* --- Kinetic headline ------------------------------------------------------
   JS (initOnAiKinetic) splits each line into word masks: an overflow-hidden
   .kw wrapper clipping a .kw__i inner that rises from below the baseline and
   un-blurs, staggered per word via --kw-d; the muted second line waits an
   extra beat. If JS never runs the masks never exist and the headline is
   simply visible. The mask gets em padding + matching negative margin so the
   Arizona Flare ascenders/descenders and the comma survive the 0.98
   line-height clip box at rest. */
.pov-neg #on-ai .pov-onai__title .kw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.16em 0.08em;
  margin: -0.16em -0.08em;
}
.pov-neg #on-ai .pov-onai__title .kw__i {
  display: inline-block;
  opacity: 0;
  transform: translateY(118%);
  filter: blur(10px);
  transition:
    opacity 0.9s var(--reveal-ease) var(--kw-d, 0ms),
    transform 0.9s var(--reveal-ease) var(--kw-d, 0ms),
    filter 0.9s var(--reveal-ease) var(--kw-d, 0ms);
  will-change: transform, filter;
}
.pov-neg #on-ai .pov-onai__title.in-view .kw__i {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Below the type: the captioned still fills the left half the headline used
   to leave empty, body copy keeps the right half — the eye lands on the type
   first, then drops to read. Bottoms align; tops stay ragged. */
.pov-neg #on-ai .pov-onai__row {
  margin-top: clamp(48px, 6vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: 80px;
  align-items: end;
}
.pov-neg #on-ai .pov-onai__media { margin: 0; }
.pov-neg #on-ai .pov-onai__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
.pov-neg #on-ai .pov-onai__body {
  margin-left: auto;
  max-width: 60ch;
  display: grid;
  gap: clamp(24px, 2.4vw, 32px);
}
.pov-neg #on-ai .pov-onai__para {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.55;
  color: var(--ink-muted-on-light);
  max-width: 52ch;
}
.pov-neg #on-ai .pov-onai__para strong {
  color: var(--ink);
  font-weight: 600;
}
/* The limit note: smaller, mono, set apart by a hairline rule as a deliberate
   "and here's the boundary" aside. */
.pov-neg #on-ai .pov-onai__limit {
  margin: 0;
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid rgba(11, 11, 12, 0.14);
  max-width: 52ch;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--ink-faint-on-light);
}

/* Split collapses at the official 860 mid-break (DESIGN.md); copy leads,
   the still follows — same order as the who-we-serve split. */
@media (max-width: 860px) {
  .pov-neg #on-ai .pov-onai__row { grid-template-columns: 1fr; row-gap: 48px; }
  .pov-neg #on-ai .pov-onai__media { order: 2; }
}
@media (max-width: 768px) {
  .pov-neg #on-ai .pov-onai__title { font-size: clamp(38px, 12vw, 56px); line-height: 1.0; }
  .pov-neg #on-ai .pov-onai__body { margin-left: 0; max-width: none; }
  .pov-neg #on-ai .pov-onai__para,
  .pov-neg #on-ai .pov-onai__limit { max-width: none; }
}

/* ===========================================================================
   CARE-DELIVERY-MODEL — “care team” treatment (mirrors the How It Works
   “What this looks like for the care team” section): a split header (big serif
   headline + sub on the left, a framing line and hairline-divided list on the
   right) over a 4-up hairline icon grid with animated pulse glyphs. Kept on the
   page’s dark ramp, now carried onto a purple surface that resolves from the
   dark section above — matching the How It Works “care team” treatment.
   =========================================================================== */

/* ---- Purple surface + purple->purple seam (mirrors How It Works .hiw-team) --
   The section sits on the same purple as How It Works (#47053D). #why-we-exist
   now ends in --brand-purple (#2D0A2E), so the top-edge gradient resolves from
   that same brand purple into the section's deeper #47053D — the seam stays a
   continuous purple wash with no hard line. Extra top padding lets it breathe. */
.pov-neg #care-delivery-model.pov-sec {
  background:
    linear-gradient(180deg, var(--brand-purple) 0%, rgba(45, 10, 46, 0) clamp(150px, 18vh, 230px)),
    #47053D;
  padding-top: clamp(128px, 14vw, 220px);
}
/* Animated dark->purple resolve. The panel arrives in the surface-dark tone of
   the section above (seamless), and that cover lifts to reveal the purple as it
   scrolls in. Single layer behind the content, so text is never touched.
   Default (no scroll-timeline / reduced motion): show the purple. */
.pov-neg #care-delivery-model.pov-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--brand-purple);
  opacity: 0;
}
.pov-neg #care-delivery-model.pov-sec > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pov-neg #care-delivery-model.pov-sec::before {
      opacity: 1;
      animation: povCareResolve linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 32%;
    }
  }
}
@keyframes povCareResolve {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.pov-neg #care-delivery-model .pov-team-eyebrow { display: block; margin: 0 0 28px; }

/* Split header: heading left, framing + list right. */
.pov-neg .pov-team-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(40px, 4.5vw, 72px);
}
.pov-neg .pov-team-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ink-on-dark);
  margin: 0;
  max-width: 16ch;
}
.pov-neg .pov-team-head-sub {
  font-size: var(--text-body-lg);
  line-height: 1.3;
  color: var(--ink-muted-on-dark);
  margin: clamp(14px, 1.6vw, 20px) 0 0;
}
.pov-neg .pov-team-intro { margin: 0; }
.pov-neg .pov-team-intro-lead {
  font-size: var(--text-body-lg);
  line-height: 1.45;
  color: var(--ink-on-dark);
  margin: 0 0 18px;
  max-width: 40ch;
}
.pov-neg .pov-team-intro-list { list-style: none; margin: 0; padding: 0; }
.pov-neg .pov-team-intro-list li {
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-near-on-dark);
  padding: 11px 0;
  border-top: 1px solid var(--rule-on-dark);
}
.pov-neg .pov-team-intro-list li:last-child { border-bottom: 1px solid var(--rule-on-dark); }

/* Hairline grid of 4 cells: faint animated glyph up top, title + body at base. */
.pov-neg .pov-team-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule-on-dark);
  border-bottom: 1px solid var(--rule-on-dark);
}
.pov-neg .pov-team-cell {
  display: flex;
  flex-direction: column;
  min-height: clamp(200px, 18vw, 260px);
  padding: clamp(28px, 2.2vw, 40px) clamp(22px, 1.8vw, 34px);
  border-left: 1px solid var(--rule-on-dark);
}
.pov-neg .pov-team-cell:first-child { border-left: 0; padding-left: 0; }
.pov-neg .pov-team-ico { display: block; align-self: flex-start; margin-left: -7px; }
.pov-neg .pov-team-ico svg {
  width: clamp(44px, 4vw, 60px);
  height: auto;
  color: var(--ink-faint-on-dark);
  shape-rendering: geometricPrecision;
}
.pov-neg .pov-team-ico svg g { stroke-width: 0.5; }
.pov-neg .pov-team-cell-text { margin-top: auto; }
.pov-neg .pov-team-cell-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(18px, 1.4vw, 21px);
  letter-spacing: -0.01em;
  color: var(--ink-on-dark);
  margin: 0 0 10px;
}
.pov-neg .pov-team-cell-body {
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--ink-muted-on-dark);
  margin: 0;
  max-width: 26ch;
  text-wrap: balance;
}
@media (max-width: 860px) {
  .pov-neg .pov-team-grid { grid-template-columns: repeat(2, 1fr); }
  .pov-neg .pov-team-cell { min-height: 190px; }
  .pov-neg .pov-team-cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .pov-neg .pov-team-cell:nth-child(n + 3) { border-top: 1px solid var(--rule-on-dark); }
}
@media (max-width: 600px) {
  .pov-neg .pov-team-head { grid-template-columns: 1fr; }
  .pov-neg .pov-team-grid { grid-template-columns: 1fr; }
  .pov-neg .pov-team-cell { min-height: 0; border-left: 0; padding-left: 0; }
  .pov-neg .pov-team-cell:nth-child(n + 2) { border-top: 1px solid var(--rule-on-dark); }
  .pov-neg .pov-team-cell-text { margin-top: 20px; }
}

/* ===========================================================================
   THE FUTURE (#the-future) — own treatment. Full-width stacked composition:
   header, serif numbered statements (.hairline-list--serif from styles.css
   supplies the layout + display type), wide media placeholder. The
   pov-list--future rules above are untouched and still drive
   #on-value-based-care.
   =========================================================================== */
.pov-neg .pov-future__head { margin-bottom: 64px; }
.pov-neg .pov-future__head .eyebrow { display: block; margin-bottom: var(--eyebrow-gap); }
.pov-neg .pov-future__head h2 {
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
/* Section retint + the page's mono index voice on top of the component. */
.pov-neg .pov-future__list { --hairline-rule: var(--pov-rule); }
.pov-neg .pov-future__list .hairline-list__n {
  font-family: var(--font-mono);
  font-size: 12px;
}
@media (max-width: 768px) {
  .pov-neg .pov-future__head { margin-bottom: 40px; }
  .pov-neg .pov-future__head h2 { font-size: 34px; letter-spacing: -0.02em; }
}