/* Home page sections (Figma 449:73 → 449:294). Shared sections are in sections.css. */

/* ---------- Stats ---------- */
.stats { background: var(--surface-tint); }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-block: 105px 120px; }
/* Number above label visually, but label first in the markup so screen readers hear "Fees to join: $0". */
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 16px; color: var(--green-800); }
.stat dd { margin: 0; font-size: 96px; line-height: 1; }
.stat dt { max-width: 248px; font-size: 28px; font-weight: 300; line-height: 1.2; }
/* Staggered columns, as in the design */
.stat:nth-child(2) { margin-top: 250px; }
.stat:nth-child(3) { margin-top: 137px; }

/* ---------- "The only virtual radiology practice" ---------- */
.practice { min-height: 860px; background: linear-gradient(to right, var(--green-900) 31.5%, var(--green-800) 89%); color: var(--on-dark); }
.practice__doctor { position: absolute; left: 842px; top: -43px; width: 1052px; height: 1296px; max-width: none; object-fit: cover; }
.practice__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding-block: 257px 160px; }
.practice__title { max-width: 457px; font-size: 48px; line-height: 1; letter-spacing: 0.01em; text-box: trim-both cap alphabetic; }
.practice__body { max-width: 539px; font-size: 16px; line-height: 1.3; color: var(--on-dark-soft); }

/* ---------- "What you can count on" ---------- */
.count-on { --heading: var(--near-black); --eyebrow: var(--green-800); background: var(--surface-tint); padding-block: 176px 188px; }
.count-on .eyebrow { font-family: var(--font-sans); text-transform: none; letter-spacing: -0.04em; }
.count-on__rows { display: grid; gap: 120px; margin-top: 124px; }
.count-row { position: relative; display: grid; align-items: center; }
/* Each row's columns come from the Figma x-positions, as fractions, so the staggered layout scales. */
.count-row--1 { grid-template-columns: 427fr 351fr 427fr 107fr; }
.count-row--1 .count-row__media { grid-column: 1; aspect-ratio: 427 / 573; }
.count-row--1 .count-row__text { grid-column: 3; }
.count-row--2 { grid-template-columns: 219fr 427fr 132fr 538fr; }
.count-row--2 .count-row__media { grid-column: 4; grid-row: 1; aspect-ratio: 538 / 573; }
.count-row--2 .count-row__text { grid-column: 2; grid-row: 1; }
.count-row--3 { grid-template-columns: 109fr 426fr 243fr 427fr 107fr; }
.count-row--3 .count-row__media { grid-column: 2; aspect-ratio: 426 / 470; }
.count-row--3 .count-row__text { grid-column: 4; }
.count-row--4 { grid-template-columns: 427fr 128fr 761fr; margin-top: 87px; }
.count-row--4 .count-row__media { grid-column: 3; grid-row: 1; aspect-ratio: 761 / 470; }
.count-row--4 .count-row__text { grid-column: 1; grid-row: 1; }
.count-row__media { margin: 0; border-radius: 11px; overflow: hidden; }
.count-row__media img { width: 100%; height: 100%; object-fit: cover; }
.count-row__booking { left: 16.7%; top: 168px; }
.count-row__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; color: var(--green-900); }
.count-row__text h3 { max-width: 321px; font-size: 36px; line-height: 1.05; text-box: trim-both cap alphabetic; }
.count-row__text p { max-width: 427px; font-size: 16px; line-height: 1.3; opacity: 0.75; }

/* ---------- "How Radian Works" ---------- */
.how { background: linear-gradient(105.93deg, var(--green-900) 4.37%, var(--green-800) 95.63%); color: var(--on-dark); padding-block: 133px 160px; }
.how .section-heading__title { letter-spacing: -0.04em; }
/* Live flow diagram: practices → Radian hub → radiologists, joined by lines motion.js draws between the cards.
   State classes (set by motion.js): .is-active (in this job), .is-dim (not matched), .is-done (tag showing),
   .is-busy (hub matching). Without JS or with reduced motion it rests as a still diagram with every step readable. */
.flow { margin-top: 80px; }
.flow__stage { position: relative; display: grid; grid-template-columns: 1fr 280px 1fr; align-items: center; gap: 112px; }
.flow__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; }
.flow__lines path { stroke: rgb(from var(--green-25) r g b / 0.2); stroke-width: 1; transition: stroke var(--dur) ease; }
.flow__lines path.is-active { stroke: rgb(from var(--green-200) r g b / 0.9); }
.flow__packet { fill: var(--green-25); filter: drop-shadow(0 0 6px var(--green-200)); }
.flow__col { position: relative; z-index: 1; display: grid; gap: 12px; }
.flow__heading { margin-bottom: 4px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-soft); }
.flow__node {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-card); backdrop-filter: blur(10px);
  transition: opacity var(--dur) ease, background var(--dur) ease, border-color var(--dur) ease, translate var(--dur) var(--ease-out);
}
.flow__node.is-active { background: rgb(from var(--green-25) r g b / 0.2); border-color: rgb(from var(--green-200) r g b / 0.7); }
.flow__node.is-dim { opacity: 0.4; }
.flow__dot { flex: none; width: 10px; height: 10px; border: 1px solid var(--green-100); border-radius: 50%; transition: background var(--dur) ease; }
.flow__node.is-active .flow__dot { background: var(--green-100); }
.flow__avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--green-100); color: var(--green-800); font-size: 13px; font-weight: 500; }
.flow__name { display: block; font-size: 15px; line-height: 1.2; }
.flow__sub { display: block; margin-top: 2px; font-size: 13px; color: var(--on-dark-soft); }
.flow__tag {
  position: absolute; top: -9px; right: 12px; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--green-200); color: var(--green-900); font-size: 12px; line-height: 1.3;
  opacity: 0; scale: 0.8; transition: opacity var(--dur) ease, scale var(--dur) var(--ease-out);
}
.flow__node.is-done .flow__tag { opacity: 1; scale: 1; }

.flow__hub { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.flow__ring { position: absolute; inset: 0; border: 1px solid var(--glass-border); border-radius: 50%; }
.flow__ring + .flow__ring { inset: 14%; }
.flow__hub-card { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; width: 228px; padding: 24px 20px; border-radius: var(--radius-card-lg); text-align: center; }
.flow__hub-card img { width: 18px; height: auto; margin-bottom: 6px; }
.flow__status { font-size: 20px; line-height: 1.2; }
.flow__detail { font-size: 13px; line-height: 1.3; color: var(--on-dark-soft); text-wrap: balance; }
.flow__status, .flow__detail { transition: opacity 150ms ease; }
.flow__hub-card.is-changing .flow__status, .flow__hub-card.is-changing .flow__detail { opacity: 0; }

.flow__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 88px 0 0; padding: 0; list-style: none; }
.flow__step { position: relative; padding-top: 24px; border-top: 1px solid var(--glass-border); transition: opacity var(--dur) ease; }
.flow__step::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--green-200); scale: 0 1; transform-origin: left; }
.flow__num { font-family: var(--font-mono); font-size: 12px; color: var(--on-dark-soft); }
.flow__step h3 { margin: 10px 0 8px; font-size: 18px; font-weight: 400; line-height: 1.25; }
.flow__step p { font-size: 14px; line-height: 1.4; color: var(--on-dark-soft); }

/* ---------- "Built for three sides of radiology" ---------- */
.sides { --heading: var(--green-900); --eyebrow: var(--green-800); background: var(--surface-tint); padding-block: 70px 79px; }
.sides .section-heading__title { max-width: 340px; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; }
.sides .section-heading__lede { max-width: 426px; font-size: 16px; color: var(--green-900); opacity: 1; }
.sides__inner { display: grid; grid-template-columns: minmax(0, 426px) minmax(0, 650px); justify-content: space-between; align-items: center; gap: 48px; }
.side-card { position: relative; display: block; height: 284px; overflow: hidden; color: var(--on-dark); background: var(--placeholder); }
.side-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 0.4s ease; }
.side-card img.is-mirrored { scale: -1 1; }
.side-card:hover img.is-mirrored { scale: -1.04 1.04; }
.side-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(from var(--green-900) r g b / 0.7); mix-blend-mode: multiply; }
.side-card > :not(img) { position: absolute; z-index: 2; }
.side-card h3 { left: 33px; top: 24px; font-size: 32px; line-height: 1.3; opacity: 0.85; }
.side-card p { left: 33px; bottom: 32px; max-width: 360px; font-size: 16px; line-height: 1.3; }
.side-card .icon-btn { right: 26px; bottom: 24px; }

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; padding-block: 80px; }
  .stat:nth-child(n) { margin-top: 0; }
  .practice { min-height: 0; }
  .practice .art { display: none; }
  .practice__inner { padding-block: var(--section-space); }
  .count-on { padding-block: var(--section-space); }
  .count-on__rows { gap: 72px; margin-top: 56px; }
  .count-row[class*="count-row--"] { grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 0; }
  .count-row[class*="count-row--"] .count-row__media { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 5; }
  .count-row[class*="count-row--"] .count-row__text { grid-column: 2; grid-row: 1; }
  .count-row__booking { display: none; }
  .flow__stage { grid-template-columns: 1fr 240px 1fr; gap: 48px; }
  .flow__hub-card { width: 210px; }
  .flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .sides__inner { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .stat dd { font-size: 64px; }
  .stat dt { font-size: 20px; }
  .practice__title { font-size: 34px; }
  .count-row[class*="count-row--"] { grid-template-columns: 1fr; gap: 24px; }
  .count-row[class*="count-row--"] .count-row__text { grid-column: 1; grid-row: 2; }
  .count-row[class*="count-row--"] .count-row__media { aspect-ratio: 4 / 3; }
  .count-row__text h3 { font-size: 28px; }
  .flow { margin-top: 56px; }
  .flow__stage { grid-template-columns: 1fr; gap: 48px; }
  .flow__col { grid-template-columns: 1fr 1fr; gap: 10px; }
  .flow__heading { grid-column: 1 / -1; }
  .flow__node { min-height: 56px; padding: 10px 12px; gap: 10px; }
  .flow__node--radiologist .flow__avatar { display: none; }
  .flow__hub { width: 240px; justify-self: center; }
  .flow__steps { grid-template-columns: 1fr; margin-top: 56px; }
  .side-card { height: 240px; }
  .side-card h3 { font-size: 26px; }
  .side-card p { right: 72px; }
}