.hero { position: relative; overflow: clip; background: radial-gradient(ellipse at 85% 42%, var(--color-primary-soft), transparent 52%); }
.hero__grid { display: grid; gap: 3rem; align-items: center; }
.hero__descriptor { font-size: .9rem; font-weight: 600; color: var(--color-primary); margin-bottom: 1rem; }
.hero__title { margin-block: 1.5rem; max-width: 55rem; font-size: clamp(2.7rem, 4.4vw, 4.7rem); }
.hero__title span { color: var(--color-primary); }
.hero__text { font-size: 1.08rem; color: var(--color-muted); max-width: 39rem; margin-bottom: 2rem; }
.hero__note { margin-top: 1.2rem; font-size: .8rem; color: var(--color-muted); }
.hero__secondary { display: block; width: fit-content; margin-top: 1rem; font-size: .9rem; font-weight: 600; }

.hero__grid > * { min-width: 0; }


/* Mobile/tablet: a single content rail shared with adjacent sections. */
.hero__grid { grid-template-columns:minmax(0,1fr); gap:clamp(1.75rem,3vw,3rem); }
.hero__grid > div:first-child { max-width:58rem; }

/* Desktop: copy and illustration share the same row, with room for the chart. */
@media (min-width:70rem) {
  .hero__grid { grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(1.5rem,2.5vw,2.5rem); align-items:center; }
  .hero__title { font-size:clamp(2.65rem,3.35vw,3.6rem); line-height:1.08; margin-block:1.2rem; }
  .hero__text { font-size:1rem; line-height:1.65; margin-bottom:1.6rem; }
  .hero__descriptor { font-size:.8rem; }
  .hero__secondary { font-size:.85rem; }
}

.hero .eyebrow { white-space:pre-line; }

/* Compact home-page introduction, matching the centred reference. */
.hero--centered { background:#f6faf7; padding-top:clamp(1.75rem,3vw,3rem); }
.hero--centered .hero__grid { grid-template-columns:minmax(0,1fr); gap:clamp(1.5rem,3vw,2.5rem); }
.hero--centered .hero__grid > div:first-child { max-width:64rem; width:100%; margin-inline:auto; text-align:center; }
.hero--centered .hero__descriptor { text-transform:uppercase; font-size:.85rem; margin:0 0 .8rem; }
.hero--centered .hero__title { max-width:none; margin:0; font-size:clamp(1.8rem,2.5vw,2.5rem); line-height:1.2; letter-spacing:-.025em; }
.hero--centered .hero__text { max-width:58rem; margin:.85rem auto 1rem; font-size:clamp(1rem,1.5vw,1.25rem); line-height:1.5; }
.hero__actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.65rem; }
.hero__actions a { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:44px; padding:.65rem 1.2rem; border-radius:2rem; font-weight:650; text-decoration:none; line-height:1.35; }
.hero__method { border:1px solid #ced8d1; color:#4c5951; background:transparent; }
.hero__method:hover { background:var(--color-primary-soft); border-color:var(--color-primary); }
.hero__journey { min-width:0; scroll-margin-top:6rem; }
#mechanism { scroll-margin-top:6rem; }