/* ============================================================
   How It Works page — scoped styles.
   Built on the global tokens in styles.css. Reuses .section,
   .container, .eyebrow, .stat-*, .gap-*, .cta-*, reveal-* etc.
   ============================================================ */

/* ---- HERO / PROBLEM STATEMENT (light — homepage Customer-Story skin) ----
   Cream surface, animated per-word headline on the left, neutral photo
   placeholder on the right. Reuses the homepage eyebrow + display type;
   no purple gradient. ------------------------------------------------------ */
.hiw-hero--light {
  position: relative;
  background: var(--cream);
  color: var(--ink);
  /* clears the fixed floating nav (the light hero has no full-height hero to
     centre content within, so it needs explicit top room) */
  padding-top: 92px;
  padding-bottom: var(--space-section-lg);
  overflow: hidden;
}

.hiw-hero-grid {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 420px);
  column-gap: clamp(40px, 5vw, 72px);
  align-items: end;
  padding-top: clamp(40px, 6vw, 80px);
}
/* Stretch the text column to the media's full height, then anchor the eyebrow
   to the top and the quote to the bottom so both edges align with the frame. */
.hiw-hero-text {
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hiw-hero-eyebrow { display: block; margin-bottom: 28px; }
.hiw-hero-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 5vw, var(--text-display-lg));
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin: 0;
  text-wrap: balance;
}
@media (min-width: 980px) {
  .hiw-hero-h1 { max-width: 20ch; }
}
/* Per-word reveal — words sit muted then ease to full ink in a staggered
   sweep (delays set inline by JS). Mirrors .statusquo-body .reveal-word but
   tuned for a light surface. */
.hiw-hero-h1 .reveal-word {
  color: rgba(11, 11, 12, 0.16);
  transition: color 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: color;
}
.hiw-hero-h1 .reveal-word.is-lit { color: var(--ink); }
.hiw-hero-h1 .reveal-group { white-space: nowrap; }

/* Right column — neutral photo placeholder, 4:5 frame like .statusquo-media. */
.hiw-hero-media { min-width: 0; }
.hiw-hero-media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--brand-gray);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hiw-hero-media-frame img,
.hiw-hero-media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Matches the homepage .statusquo-media video grade. */
.hiw-hero-media-frame video {
  filter: saturate(0.9) contrast(0.96) brightness(0.95);
}
@media (max-width: 860px) {
  .hiw-hero-grid { grid-template-columns: 1fr; row-gap: 40px; }
  /* Keep a character cap (instead of none) so the long sentence wraps to even
     lines once the layout goes single-column — avoids the ragged breaks. */
  .hiw-hero-h1 { max-width: 24ch; }
  .hiw-hero-media-frame { max-width: 360px; }
}

/* ---- STATS BAR (4-up, white — subtle contrast vs cream hero) ---- */
.hiw-stats {
  background: var(--white);
  color: var(--ink);
}
/* The band carries only the 4-up grid (no heading/intro like the homepage),
   so trim the bottom padding to keep the stats from floating above the next
   section. */
.hiw-stats .stats-body { padding-bottom: clamp(48px, 6vw, 72px); }
.hiw-statgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.hiw-stat .stat-number {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
  font-size: clamp(48px, 5.2vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.hiw-stat .stat-number .unit {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.34em;
  letter-spacing: 0;
  color: var(--ink-muted-on-light);
  margin-left: 4px;
}
.hiw-stat .stat-caption {
  margin-top: 14px;
  max-width: 28ch;
  color: var(--ink-muted-on-light);
}
@media (max-width: 860px) {
  .hiw-statgrid { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
}
@media (max-width: 520px) {
  .hiw-statgrid { grid-template-columns: 1fr; gap: 32px; }
}
/* 4th stat reveal — styles.css only defines .stat-item-1/2/3; extend the same
   fade-up + staggered delay to the 4th column used on this page. */
.stat-item-4 {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  transition-delay: 360ms;
}
.stat-item-4.is-in { opacity: 1; transform: translateY(0); }

/* ---- INTEGRATION (ice-blue -> white gradient — text left, editorial pathways ladder right) ---- */
.hiw-integration { background: linear-gradient(180deg, var(--brand-accent) 0%, var(--white) 100%); color: var(--ink); padding: clamp(var(--space-section-md), 9vw, var(--space-section-lg)) 0; }
.hiw-int-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
/* Intro travels with the ladder so it doesn't strand the lower-left quadrant
   empty. Site sticky-head convention is --sticky-top (120px, used by about/pov);
   this rule predates the token and pins higher at 96px. */
.hiw-int-grid .gap-intro { margin-bottom: 0; position: sticky; top: 96px; align-self: start; }

/* Pathways ladder — flat, editorial, no card. Mirrors the .hiw-steps row
   treatment: full-width hairline rules on the white surface, display-serif
   pathway names, a small 3-segment depth meter that shows integration depth
   without arrows or dashed rails. */
.hiw-int-visual { /* no border/background — sits flat on the white surface */ }

/* EHR -> Aetonix framing as small-caps text + hairline rule (no pills). */
.hiw-int-flow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 4px;
  padding-bottom: 20px;
}
.hiw-int-flow-end {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--ink-faint-on-light);
  white-space: nowrap;
}
.hiw-int-flow-end--ax { color: var(--ink); }
.hiw-int-flow-rule {
  flex: 1;
  height: 1px;
  background: var(--rule-on-light);
}

/* Pathway rows */
.hiw-int-list { list-style: none; margin: 0; padding: 0; }
.hiw-int-step {
  position: relative;
  /* reserve the right gutter for the depth meter so long desc lines clear it */
  padding: clamp(22px, 2.6vw, 30px) clamp(92px, 9vw, 116px) clamp(22px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--rule-on-light);
}
.hiw-int-step:last-child { border-bottom: 1px solid var(--rule-on-light); }
.hiw-int-tier {
  display: block;
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint-on-light);
  margin-bottom: 8px;
}
.hiw-int-step-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.hiw-int-step-desc {
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--ink-muted-on-light);
  margin: 12px 0 0;
  max-width: 48ch;
}

/* Flow indicator — a line-art arrow (stroke weight matched to the section
   icons) signifying the DIRECTION of data flow per tier. A bright dot travels
   along the stroke (SMIL) in the flow direction: one-way runs right; scheduled
   runs out and back on a cadence; bidirectional uses two stacked lines with
   dots running opposite ways. The dots are parked (hidden) until the rows
   scroll into view (see JS) and stay parked under reduced motion, leaving a
   clean static muted arrow. */
.hiw-flow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.hiw-flow svg {
  display: block;
  width: 72px;
  height: auto;
}

@media (max-width: 860px) {
  .hiw-int-grid { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 48px); }
  /* single column — the intro no longer has a tall ladder to track alongside */
  .hiw-int-grid .gap-intro { position: static; }
}
@media (max-width: 600px) {
  .hiw-int-step {
    padding-right: 0;
    padding-bottom: clamp(28px, 5vw, 40px);
    display: flex;
    flex-direction: column;
  }
  .hiw-flow {
    position: static;
    transform: none;
    order: 10;
    margin-top: clamp(20px, 4vw, 32px);
  }
  .hiw-flow svg { width: 88px; }
}

/* ---- HOW THE PLATFORM WORKS (blood — 6 steps + scroll-driven "close the gap" canvas) ---- */
.hiw-works {
  background: var(--pure-black);
  color: var(--ink-near-on-dark);
  padding: clamp(var(--space-section-md), 9vw, var(--space-section-lg)) 0;
}
/* Split header — heading left, lead bottom-aligned in the right column so it
   sits over the video and the right two-thirds isn't left empty. */
.hiw-works-head {
  display: grid;
  grid-template-columns: 3fr 2fr;            /* match the grid below so the lead sits above the animation */
  column-gap: clamp(48px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.hiw-works-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 5vw, var(--text-display-lg));
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink-on-dark);
  margin: 0;
}
.hiw-works-h2 em {
  font-style: italic;
  color: var(--ink-muted-on-dark);
}
.hiw-works-lead {
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--ink-muted-on-dark);
  max-width: 46ch;
  margin: 0;
  text-wrap: pretty; /* keep the last line from dropping a lone word (orphan) */
}
.hiw-works-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;            /* 60% text, 40% animation */
  column-gap: clamp(48px, 6vw, 96px);
  align-items: stretch;
}

/* Steps list (left) — full-width rules, large number marker, title + body */
.hiw-steplist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-on-dark);
}
.hiw-step {
  display: grid;
  grid-template-columns: clamp(52px, 6vw, 80px) 1fr;
  gap: clamp(20px, 2.5vw, 36px);
  align-items: start;
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--rule-on-dark);
}
.hiw-step:last-child { border-bottom: 0; }
.hiw-step-marker { padding-top: 0; }

/* Large structural step numbers — scale carries the reading sequence */
.hiw-step-num {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint-on-dark);
  /* Inter leaves dead space above the cap inside a line-height:1 box; on a
     glyph this large it pushes the number's visible top well below the title.
     Pull it up so the number cap-top aligns with the heading cap-top. */
  margin-top: -0.08em;
}

.hiw-step-title {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink-on-dark);
  margin: 0 0 8px;
}
.hiw-step-body {
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--ink-muted-on-dark);
  max-width: 52ch;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hiw-hero-h1 .reveal-word { transition: none; color: var(--ink); }
  .stat-item-4 { transition: none; opacity: 1; transform: none; }
}

/* Media column (right) — sticky phone mockup image */
.hiw-works-media { min-width: 0; }
.hiw-works-media-sticky {
  position: static;
  height: auto;
}
.hiw-works-phone {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.hiw-works-phone-img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
@media (max-width: 860px) {
  .hiw-works-head { grid-template-columns: 1fr; }
  .hiw-works-lead { margin-top: 24px; }
  .hiw-works-grid { grid-template-columns: 1fr; row-gap: clamp(32px, 6vw, 48px); }
  .hiw-works-media { order: -1; }
  .hiw-works-media-sticky { position: static; }
  .hiw-works-phone-img { max-width: 360px; }
}
@media (max-width: 640px) {
  .hiw-step { grid-template-columns: 44px 1fr; gap: 16px; }
}

/* ---- FOR THE CARE TEAM (charcoal — Legora-style hairline grid) ---- */
.hiw-team {
  /* Purple surface with a soft black->purple seam baked into the top edge, so
     the boundary with the black section above never snaps to a hard line —
     independent of the scroll animation below. */
  background:
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) clamp(140px, 18vh, 220px)),
    #47053D;
  color: var(--ink-on-dark);
  /* Extra top padding gives the section more height above the headline so it
     feels taller and lets the black->purple seam breathe. */
  padding: clamp(128px, 14vw, 220px) 0 clamp(var(--space-section-md), 9vw, var(--space-section-lg));
}
/* Animated black->purple resolve. The panel arrives BLACK (seamless with the
   section above) and the black cover lifts to reveal the purple as it scrolls
   into view. A single layer, behind the content (z-index 0) so text is never
   touched. No bloom — just a clean fade. */
.hiw-team::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #000;
  opacity: 0; /* default (no scroll-timeline / reduced motion): show the purple */
}
.hiw-team > .container { position: relative; z-index: 1; }

/* Scroll-driven resolve, only where supported and motion is welcome. cover() is
   used because the section is taller than the viewport. Kept snappy: black as
   the panel enters, resolving to full purple by ~a third of the way in so the
   colour establishes early without dragging. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hiw-team::before {
      opacity: 1;
      animation: hiwResolve linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 32%;
    }
  }
}

@keyframes hiwResolve {
  from { opacity: 1; }
  to   { opacity: 0; }
}
/* Split header: heading left, intro paragraph right */
.hiw-team-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  /* Tighter gap into the card grid so the two read as one composition. */
  margin-bottom: clamp(32px, 4vw, 60px);
}
.hiw-team-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 5vw, var(--text-display-lg));
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink-on-dark);
  /* Pin the headline's top edge to the cell top so the right-hand list lines up
     with it (no negative lift, which previously raised the headline above the
     list and made the list read as vertically centred). */
  margin: 0;
  max-width: 16ch;
}
/* Intro restructured for scannability: a short framing line, the pain points
   broken into a hairline-divided list (matching the section's hairline grid —
   no round bullets), then a pivot line into the grid below. Measure is capped
   so short fragments don't trail into long empty rules, and the rhythm is kept
   tight so the four points read as one unit rather than scattered lines. */
.hiw-team-intro {
  margin: 0;
}
.hiw-team-intro-lead {
  font-size: var(--text-body-lg);
  line-height: 1.45;
  color: var(--ink-on-dark);
  margin: 0 0 14px;
}
.hiw-team-intro-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.hiw-team-intro-list li {
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-near-on-dark);
  padding: 9px 0;
  border-top: 1px solid var(--rule-on-dark);
}
.hiw-team-intro-list li:last-child {
  border-bottom: 1px solid var(--rule-on-dark);
}
/* Pivot line under the headline — reads as a subline ("…what this looks like" →
   "here's what changes day to day") and balances the empty space below the
   headline while lightening the right column. */
.hiw-team-head-sub {
  font-size: var(--text-body-lg);
  line-height: 1.3;
  color: var(--ink-muted-on-dark);
  /* Sit close under the headline so the two read as one unit. No width cap —
     the line stays on one row in the wide column. */
  margin: clamp(12px, 1.4vw, 18px) 0 0;
}

/* Hairline grid of 4 cells: large faint icon up top, title + body at the base. */
.hiw-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);
}
.hiw-team-cell {
  display: flex;
  flex-direction: column;
  /* ~45% shorter — kills the dead zone between the top icon and bottom text. */
  min-height: clamp(190px, 18vw, 250px);
  padding: clamp(28px, 2.2vw, 40px) clamp(22px, 1.8vw, 34px);
  border-left: 1px solid var(--rule-on-dark);
}
/* Left-column cell sheds its left padding so the icon/title line up flush with
   the headline's left edge (the headline sits at the container edge, not inset). */
.hiw-team-cell:first-child { border-left: 0; padding-left: 0; }
/* Pull the glyph left so its visual edge lines up with the title/body (the
   24-unit viewBox leaves ~4u of padding before the glyph starts). */
.hiw-team-ico { display: block; align-self: flex-start; margin-left: -7px; }
.hiw-team-ico svg {
  width: clamp(44px, 4vw, 60px);
  height: auto;
  color: var(--ink-faint-on-dark);
  shape-rendering: geometricPrecision;
}
.hiw-team-ico svg g { stroke-width: 0.5; }
/* Render the accent as an outline (not a filled square) so every element in
   every icon shares one consistent 0.5 stroke weight. */
.hiw-team-ico .accent { fill: none; stroke: currentColor; stroke-width: 0.5; }
.hiw-team-cell-text { margin-top: auto; }
.hiw-team-cell-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(18px, 1.4vw, 21px);
  letter-spacing: -0.01em;
  color: var(--ink-on-dark);
  margin: 0 0 10px;
}
.hiw-team-cell-body {
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--ink-muted-on-dark);
  margin: 0;
  max-width: 32ch;
}
@media (max-width: 860px) {
  .hiw-team-grid { grid-template-columns: repeat(2, 1fr); }
  .hiw-team-cell { min-height: 180px; }
  /* 2-up: cells 1 & 3 form the left column — keep both flush with the headline. */
  .hiw-team-cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .hiw-team-cell:nth-child(n + 3) { border-top: 1px solid var(--rule-on-dark); }
}
@media (max-width: 600px) {
  .hiw-team-head { grid-template-columns: 1fr; }
  .hiw-team-grid { grid-template-columns: 1fr; }
  /* Stacked: every cell is the left column, so drop all left padding to align. */
  .hiw-team-cell { min-height: 0; border-left: 0; padding-left: 0; }
  .hiw-team-cell:nth-child(n + 2) { border-top: 1px solid var(--rule-on-dark); }
  /* stacked: a clear, fixed gap between icon and text (auto would collapse) */
  .hiw-team-cell-text { margin-top: 20px; }
}

/* ============================================================
   TYPE-AS-EVENT — POV-direction polish on the hero.
   A touch more display scale so the 46M sentence reads as an event.
   ============================================================ */
/* Slightly larger + tighter display ramp — keeps the full sentence but lets
   it land as the loudest type moment on the page. */
.hiw-hero-h1 {
  font-size: clamp(36px, 5.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

@media (max-width: 768px) {
  .hiw-hero-h1 { font-size: clamp(32px, 8.5vw, 44px); max-width: 16ch; }
}