/* ---- Hero ---- */
.ah-hero { position:relative; background:var(--grad-hero); color:#fff; padding:172px 0 var(--space-3xl); overflow:hidden; }
.ah-hero .wrap { position:relative; z-index:2; }
.ah-hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:var(--space-2xl); align-items:center; }
.ah-hero h1 { color:#fff; letter-spacing:-.02em; margin:0 0 var(--space-m); }
.ah-hero h1 .hl { color:var(--color-accent); }
.ah-hero .lede { color:rgba(255,255,255,.9); max-width:33em; margin:0 0 var(--space-s); }
.ah-hero .tagline { font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--color-accent); margin:0 0 var(--space-l); }
.ah-hero .btn-row { display:flex; gap:var(--space-xs); flex-wrap:wrap; }
.ah-hero .hero-note { margin:var(--space-m) 0 0; font-size:var(--text-sm); color:rgba(255,255,255,.72); }

.ah-hero-visual { position:relative; }
.ah-hero-visual img { width:100%; height:auto; filter:drop-shadow(0 30px 60px rgba(13,38,56,.55)); border-radius:var(--radius-lg); }
.ah-badge { position:absolute; background:#fff; color:var(--color-secondary); border-radius:var(--radius-lg); box-shadow:var(--shadow-4);
  padding:var(--space-xs) var(--space-s); display:flex; align-items:center; gap:var(--space-xs); font-weight:var(--weight-bold); z-index:3; }
.ah-badge .big { font-size:var(--text-xl); color:var(--color-primary); line-height:var(--line-none); }
.ah-badge .lbl { font-size:var(--text-xs); color:var(--color-ink-soft); font-weight:var(--weight-semibold); line-height:var(--line-snug); }
.ah-badge.b1 { top:8%; left:-26px; }
.ah-badge.b2 { bottom:10%; right:-20px; }
@media (prefers-reduced-motion: no-preference) {
  .ah-badge.b1 { animation:ah-float 6s ease-in-out infinite; }
  .ah-badge.b2 { animation:ah-float 6s ease-in-out infinite 1.5s; }
}
@keyframes ah-float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* ---- Problem (dark band) ---- */
.ah-problem { background:var(--color-surface-dark); color:#fff; }
.ah-problem h2 { color:#fff; }
.ah-problem .section-head p { color:rgba(255,255,255,.82); }
.prob-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-m); align-items:stretch; }
.prob-stat { background:rgba(255,255,255,.95); border:none;
  border-radius:var(--radius-lg); padding:var(--space-l); backdrop-filter:blur(4px); }
.prob-stat .num { font-size:var(--step-2); font-weight:var(--weight-extrabold); color:var(--color-accent); line-height:var(--line-none); letter-spacing:-.02em; }
.prob-stat .num .in { font-size:.52em; font-weight:var(--weight-semibold); color:var(--color-secondary); vertical-align:middle; margin:0 .12em; letter-spacing:0; }
.prob-stat p { font-size:var(--text-md); color:var(--color-ink-soft); margin:var(--space-xs) 0 0; }
.prob-note { margin:var(--space-l) auto 0; text-align:center; font-size:var(--text-md); color:rgba(255,255,255,.82); max-width:760px; }
.prob-note strong { color:#fff; }

/* ---- The knock-on effect: connected relay ----
   Deliberately NOT another icon-card grid — #benefits above is already .grid.cols-3, and
   layouts.md forbids stacking two identical card registers. The content is a causal chain
   (three conditions feeding one compounding outcome), so the spine draws the chain and the
   final step is the arrival rather than a fourth equal tile. */
/* The spine is a border-left on each step, NOT an absolute bar on the <ol> — that keeps the
   dots and the line in one coordinate system, so they cannot drift apart at any width. */
.ah-relay { list-style:none; margin:0 auto; padding:0; max-width:720px; --relay-indent:var(--space-l); --relay-card-pad:var(--space-s); }
.ah-relay-step { position:relative; border-left:2px solid var(--brand-200); padding:0 0 var(--space-l) var(--relay-indent); }
.ah-relay-step::before { content:""; position:absolute; left:-7px; top:calc(var(--space-2xs) - 1px); width:12px; height:12px; border-radius:var(--radius-full); background:var(--color-surface); border:2px solid var(--brand-300); box-sizing:border-box; }
.ah-relay-step h3 { font-size:var(--text-lg); font-weight:700; color:var(--color-secondary); margin:0 0 var(--space-3xs); letter-spacing:-.01em; }
.ah-relay-step p { margin:0; color:var(--color-ink); max-width:62ch; }

/* The payoff. The spine STOPS at this node (transparent border keeps the indent), and the
   card sits free of the line rather than hanging off it — the chain arrives at something
   separate instead of the line running through the card. */
/* Text alignment: the card's own padding + 1px border would push its copy right of the other
   three, so the step's indent is pulled back by exactly that much — all four text columns then
   start on the same x. Both sides come from --relay-indent / --relay-card-pad so a responsive
   override only has to change those two and the alignment follows. */
.ah-relay-step.is-payoff { border-left-color:transparent; padding-bottom:0; padding-left:calc(var(--relay-indent) - var(--relay-card-pad) - 1px); }
.ah-relay-step.is-payoff::before { width:16px; height:16px; left:-9px; top:var(--space-2xs); background:var(--color-primary); border-color:var(--color-primary); box-shadow:0 0 0 4px var(--brand-100); }
.ah-relay-card { background:var(--brand-50); border:1px solid var(--color-border-soft); border-radius:var(--radius-xl); padding:var(--relay-card-pad); }
.ah-relay-card h3 { font-size:var(--text-lg); font-weight:700; color:var(--color-secondary); margin:0 0 var(--space-3xs); letter-spacing:-.01em; }
.ah-relay-card p { margin:0; color:var(--color-ink); max-width:62ch; }

@media (max-width:600px) {
  /* Tighter gutter, smaller card inset — the calc above keeps the four text columns aligned. */
  .ah-relay { --relay-indent:var(--space-m); --relay-card-pad:var(--space-xs); }
}

/* ---- Stat-strip footnote ----
   The strip's card is pulled up over the hero (margin-top:-42px), so the note needs its own
   breathing room rather than sitting tight under the card edge. */
.stat-strip-note { margin:var(--space-m) 0 0; text-align:center; }
.fn-ref { color:var(--color-primary); text-decoration:none; font-weight:var(--weight-semibold); }
.fn-ref:hover, .fn-ref:focus-visible { text-decoration:underline; }
.fn-mark { color:var(--color-primary); font-weight:var(--weight-semibold); }

/* ---- Getting started: segmented rail + numerals ----
   No screenshots: the placeholders were generic stock and told the reader nothing the copy
   didn't. The numeral and the rule above it carry the sequence instead. Horizontal on purpose
   — #referrals above is a vertical spine, so this stays a different shape. */
/* Vertical: the four-across version starved each step of width and forced the copy down to
   --step--1. Full width lets it sit at body size. Distinguished from the #referrals relay by
   having no spine — hairline rules and numerals instead of a connected line and dots.
   --start-num-w keeps the numeral column and the paragraph's indent locked together. */
.ah-start { list-style:none; margin:0 auto; padding:0; max-width:760px; --start-num-w:2.25rem; }
.ah-start-step { padding:var(--space-m) 0; border-top:1px solid var(--color-border-soft); }
.ah-start-step:first-child { border-top:0; padding-top:0; }
.ah-start-head { display:flex; align-items:baseline; gap:var(--space-s); }
.ah-start-n { flex:none; width:var(--start-num-w); font-size:var(--step-2); font-weight:var(--weight-extrabold); line-height:1; color:var(--color-primary); font-variant-numeric:tabular-nums; }
.ah-start-step h3 { margin:0; font-size:var(--text-lg); color:var(--color-secondary); letter-spacing:-.01em; }
.ah-start-step p { margin:var(--space-2xs) 0 0; padding-left:calc(var(--start-num-w) + var(--space-s)); color:var(--color-ink); max-width:62ch; }
.ah-start-note { text-align:center; margin:var(--space-s) 0 0; font-size:var(--step--1); color:var(--color-ink-soft); }

@media (max-width:560px) {
  .ah-start { --start-num-w:1.75rem; }
  .ah-start-head { gap:var(--space-2xs); }
  .ah-start-step p { padding-left:calc(var(--start-num-w) + var(--space-2xs)); }
}

/* ---- The numbers (money) ---- */
.ah-ongoing { background:linear-gradient(160deg, var(--brand-50), #fff); }

/* ---- Responsive ---- */
@media (max-width:980px) {
  .ah-hero-grid { grid-template-columns:1fr; gap:var(--space-xl); }
  .ah-hero-visual { max-width:520px; margin:0 auto; }
  .ah-badge.b1 { left:0; }
  .ah-badge.b2 { right:0; }
}
@media (max-width:760px) {
  .stat-strip .stat:nth-child(2) { border-right:0; }
  .stat-strip .stat { border-bottom:1px solid var(--color-border-soft); }
  .prob-grid2 { grid-template-columns:1fr; }
  .ah-hero { padding:140px 0 var(--space-3xl); }
}