/* ==========================================================================
   D01 Home — page styles
   Home-page header (mega menu + accordion mobile menu), hero with audience
   router, logo wall, portfolio, outcomes aperture, KOL quote, teasers,
   CTA band, progress ring and the mobile sticky CTA bar.
   Behaviour: assets/js/pages/d01-home.js
   ========================================================================== */

/* ── Audience personalisation ───────────────────────────────────────────── */

/* <body data-active-role="…">: elements tagged data-for-role="…" only show
   for their role(s). The list may hold several roles ("surgeon biomed"). */
[data-active-role="surgeon"] [data-for-role]:not([data-for-role~="surgeon"]),
[data-active-role="leadership"] [data-for-role]:not([data-for-role~="leadership"]),
[data-active-role="biomed"] [data-for-role]:not([data-for-role~="biomed"]),
[data-active-role="patient"] [data-for-role]:not([data-for-role~="patient"]) {
  display: none;
}

/* ── Shared page bits ───────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: var(--radius-m);
  background: var(--graphite-900);
  color: var(--graphite-0);
  font: 500 15px/1 'Geist', sans-serif;
}
.skip-link:hover { color: var(--graphite-0); }
.skip-link:focus { top: 12px; color: var(--graphite-0); }

/* Plain text link in scrub ("Customer stories →") */
.text-link {
  font: 500 15px/1 'Geist', sans-serif;
  text-decoration: none;
}

/* "Explore … →" line at the bottom of a card */
.card-link {
  font: 500 16px/1 'Geist', sans-serif;
  color: var(--scrub-600);
}

/* Eyebrow on the dark outcomes panel */
.eyebrow--on-dark { color: var(--mist-400); }
.eyebrow--on-dark .eyebrow__rule {
  background: var(--mist-400);
  opacity: 1;
}

/* Section head: eyebrow + title left, intro right */
.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.section-head__title-group {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}
.section-head__title-group--wide { max-width: 760px; }

.section-head__intro {
  margin: 0;
  max-width: 400px;
  font: 400 17px/1.55 'Geist', sans-serif;
  color: var(--graphite-600);
  text-wrap: pretty;
}
.section-head__intro--on-dark {
  max-width: 380px;
  color: var(--mist-300);
}

.section-title {
  margin: 0;
  font: 500 var(--text-display-l)/1 'Geist', sans-serif;
  letter-spacing: -.035em;
}

/* Scroll reveal (d01-home.js adds .is-revealed at 88% of the viewport) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-5) var(--ease-diastole), transform var(--dur-5) var(--ease-diastole);
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* The original buttons wrap their label on narrow screens (.btn is nowrap) */
.hero__actions .btn,
.cta-band__actions .btn,
.outcomes__download,
.webinar__register { white-space: normal; }

/* One-off pulse ring on a primary CTA (hero after opening, band on reveal) */
.cta-primary { position: relative; }

.cta-pulse {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  pointer-events: none;
}
.is-pulsing .cta-pulse { animation: lumenPulse 1000ms var(--ease-diastole) 1.3s 1 both; }

/* Citation chip that opens a study card */
.cite-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  margin-left: 6px;
  vertical-align: 3px;
  border: 1px solid rgba(10, 18, 22, .28);
  border-radius: var(--citation-radius);
  background: var(--graphite-0);
  color: var(--graphite-900);
  font: 500 11px/1 'Geist Mono', monospace;
  cursor: pointer;
}
.cite-chip:hover {
  border-color: var(--scrub-600);
  color: var(--scrub-600);
}

.cite-chip--on-dark {
  align-self: flex-start;
  margin-top: 6px;
  margin-left: 0;
  vertical-align: baseline;
  border-color: rgba(232, 236, 234, .35);
  background: transparent;
  color: var(--graphite-mist);
  letter-spacing: 0;
}
.cite-chip--on-dark:hover {
  border-color: var(--scrub-300);
  color: var(--scrub-300);
}

/* Study card (popover of a citation chip) */
.study-card {
  position: absolute;
  left: 0;
  top: calc(100% + 12px);
  z-index: 8;
  width: min(400px, 100%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-m);
  background: var(--graphite-0);
  box-shadow: var(--elevation-3);
}

.study-card--stat {
  top: calc(100% + 8px);
  width: min(380px, 90vw);
  gap: 12px;
  border: 0;
  color: var(--graphite-900);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .5);
}

.study-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.study-card__close {
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--graphite-600);
  font: 500 16px/1 'Geist Mono', monospace;
  cursor: pointer;
}

.study-card__title { font: 500 17px/1.3 'Geist', sans-serif; }

.study-card__facts {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px 12px;
  font: 400 14px/1.4 'Geist', sans-serif;
}
.study-card--stat .study-card__facts { grid-template-columns: 90px 1fr; }

.study-card__term { color: var(--graphite-500); }
.study-card__num { font-variant-numeric: tabular-nums; }
.study-card__result { font: 500 14px/1.4 'Geist Mono', monospace; }

.study-card__ref {
  padding-top: 12px;
  border-top: 1px solid var(--ink-a10);
  font: 400 12px/1.45 'Geist Mono', monospace;
  color: var(--graphite-500);
}

/* ── Header (home variant of .site-header) ──────────────────────────────── */

.home-header__region {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--graphite-600);
  font: 400 12px/1 'Geist Mono', monospace;
  letter-spacing: .04em;
  cursor: pointer;
}

/* Audience switch as buttons (they set the role, see d01-home.js) */
.home-header__audience {
  height: 26px;
  padding: 0 12px;
  border: 0;
  font: 400 13px/1 'Geist', sans-serif;
  cursor: pointer;
}
.home-header__audience[aria-pressed="true"] {
  background: var(--graphite-900);
  color: var(--site-header-bg);
}

.home-header__brand { white-space: normal; }

/* Main-nav entries open the mega menu */
.home-header__menu-button {
  height: 100%;
  border: 0;
  background: none;
  cursor: pointer;
}
.home-header__menu-button::after { transition: background var(--dur-2); }
.home-header__menu-button[aria-expanded="true"]::after { background: var(--graphite-900); }

.home-header .site-header__action-link:hover { color: var(--scrub-600); }

.home-header .site-header__cta { transition: background var(--dur-2); }
.home-header .site-header__cta:hover {
  background: var(--graphite-900);
  color: var(--graphite-50);
}

.home-header__menu-toggle {
  border-color: var(--ink-a20);
  white-space: normal;
}

/* Mega menu */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: rgba(245, 246, 243, .9);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--color-hairline);
  box-shadow: 0 24px 48px -24px rgba(10, 18, 22, .25);
}

.mega__panel {
  max-width: 1320px;
  margin: 0 auto;
  padding: 36px clamp(20px, 4.2vw, 60px) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
}

.mega__main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mega__kicker {
  font: 500 12px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.mega__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 24px;
}

.mega__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--radius-m);
  color: var(--graphite-900);
  text-decoration: none;
  transition: background var(--dur-2);
}
.mega__link:hover {
  background: var(--graphite-0);
  color: var(--graphite-900);
}

.mega__link-title { font: 500 18px/1.2 'Geist', sans-serif; }

.mega__link-desc {
  font: 400 14px/1.4 'Geist', sans-serif;
  color: var(--graphite-600);
}

.mega__feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--ink-a10);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
  color: var(--graphite-900);
  text-decoration: none;
}
.mega__feature:hover { color: var(--graphite-900); }

.mega__feature-image {
  height: 120px;
  padding: 0 16px;
  border-radius: var(--radius-m);
  background: repeating-linear-gradient(135deg, var(--sage-100) 0 10px, var(--sage-150) 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 11px/1.4 'Geist Mono', monospace;
  letter-spacing: .06em;
  color: var(--graphite-600);
  text-align: center;
}

.mega__feature-kicker {
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.mega__feature-title { font: 500 18px/1.3 'Geist', sans-serif; }

.mega__feature-cta {
  font: 500 15px/1 'Geist', sans-serif;
  color: var(--scrub-600);
}

/* Mobile menu (accordion) */
.mobile-menu {
  position: fixed;
  inset: 72px 0 0;
  z-index: 39;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: auto;
  padding: 12px 20px 120px;
  background: var(--graphite-50);
}

.mobile-menu__group { border-bottom: 1px solid var(--ink-a10); }

.mobile-menu__toggle {
  width: 100%;
  min-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--graphite-900);
  font: 500 24px/1 'Geist', sans-serif;
  letter-spacing: -.02em;
  cursor: pointer;
}

.mobile-menu__sign {
  font: 400 18px/1 'Geist Mono', monospace;
  color: var(--graphite-600);
}
.mobile-menu__sign::before { content: '+'; }
.mobile-menu__toggle[aria-expanded="true"] .mobile-menu__sign::before { content: '−'; }

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  padding: 0 0 16px;
}

.mobile-menu__link {
  min-height: 44px;
  display: flex;
  align-items: center;
  font: 400 17px/1.3 'Geist', sans-serif;
  color: var(--graphite-900);
  text-decoration: none;
}

.mobile-menu__footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
}

.mobile-menu__audience {
  display: flex;
  padding: 3px;
  border: 1px solid var(--ink-a14);
  border-radius: var(--radius-pill);
}

/* Selected option follows the active role (patient ↔ HCP roles) */
.mobile-menu__audience-option {
  flex: 1;
  height: 40px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--graphite-600);
  font: 500 14px/1 'Geist', sans-serif;
}
body:not([data-active-role="patient"]) .mobile-menu__audience-option--hcp,
[data-active-role="patient"] .mobile-menu__audience-option--patient {
  background: var(--graphite-900);
  color: var(--graphite-50);
}

.mobile-menu__secondary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font: 500 16px/1 'Geist', sans-serif;
  color: var(--graphite-900);
  text-decoration: none;
}

.mobile-menu__link:hover,
.mobile-menu__secondary:hover { color: var(--graphite-900); }

.mobile-menu__region {
  font: 400 12px/1 'Geist Mono', monospace;
  color: var(--graphite-600);
}

@media (max-width: 959.98px) {
  .mega { display: none; }
}

@media (min-width: 960px) {
  .mobile-menu { display: none; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-hairline);
}

.hero__annotation {
  --annotation-top: 24px;
  width: min(320px, calc(100% - 32px));
  padding: 18px 20px;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 18px 40px -16px rgba(10, 18, 22, .5);
}
[data-annotations="on"] .hero__annotation { display: flex; }
.hero__annotation .annotation__label { margin-bottom: 0; }
.hero__annotation b { font-weight: 500; }

.hero__inner {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4.2vw, 60px) clamp(40px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

/* Registration corner mark */
.hero__corner {
  position: absolute;
  left: clamp(8px, 1.6vw, 24px);
  top: 32px;
  width: 14px;
  height: 14px;
  border-left: 1px solid var(--graphite-900);
  border-top: 1px solid var(--graphite-900);
  opacity: .45;
}

.hero__copy {
  position: relative;
  z-index: 2;
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero__title {
  margin: 0;
  font: 500 clamp(56px, 1.5rem + 7vw, 128px)/.94 'Geist', sans-serif;
  letter-spacing: -.045em;
}
.hero__title em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: -.02em;
}

/* Masked line reveal: each line slides up out of its own clip box */
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: .04em;
}
.hero__line--second { padding-bottom: .08em; }

.hero__line-text {
  display: block;
  transform: translateY(105%);
  transition: transform 1100ms var(--ease-diastole) 150ms;
}
.hero__line--second .hero__line-text { transition-delay: 300ms; }

.hero__proof-wrap {
  position: relative;
  max-width: 600px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-5) var(--ease-diastole) 600ms, transform var(--dur-5) var(--ease-diastole) 600ms;
}

.hero__proof-text {
  margin: 0;
  font: 400 clamp(18px, 1rem + .35vw, 21px)/1.5 'Geist', sans-serif;
  color: var(--graphite-750);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transition: opacity var(--dur-5) var(--ease-diastole) 750ms;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font: 400 12px/1.3 'Geist Mono', monospace;
  letter-spacing: .04em;
  color: var(--graphite-600);
  opacity: 0;
  transition: opacity var(--dur-5) var(--ease-diastole) 900ms;
}

.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__trust-item::before {
  content: '';
  width: 5px;
  height: 5px;
  border: 1px solid var(--graphite-600);
  border-radius: 50%;
}

/* Opened state (d01-home.js adds .is-open 140ms after load) */
.hero.is-open .hero__line-text { transform: translateY(0); }
.hero.is-open .hero__proof-wrap { opacity: 1; transform: translateY(0); }
.hero.is-open .hero__actions,
.hero.is-open .hero__trust { opacity: 1; }
.hero.is-open .dial__aperture { clip-path: circle(50% at 50% 50%); }

/* Dial visual */
.hero__visual {
  flex: 0 1 480px;
  min-width: 260px;
  display: flex;
  justify-content: center;
}

.dial {
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 1;
}

.dial__axis {
  position: absolute;
  background: var(--ink-a14);
}
.dial__axis--h { left: -7%; right: -7%; top: 50%; height: 1px; }
.dial__axis--v { top: -7%; bottom: -7%; left: 50%; width: 1px; }

.dial__ticks {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(10, 18, 22, .55) 0 .35deg, transparent .35deg 5deg);
  -webkit-mask: radial-gradient(circle, transparent 68.6%, #000 69%, #000 71.4%, transparent 71.8%);
  mask: radial-gradient(circle, transparent 68.6%, #000 69%, #000 71.4%, transparent 71.8%);
  transform: scale(1.14);
}

.dial__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--ink-a16);
}
.dial__ring--inner {
  inset: 6%;
  border-color: var(--color-hairline);
}

.dial__aperture {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  overflow: hidden;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1400ms var(--ease-diastole) 100ms;
  background: repeating-linear-gradient(135deg, var(--sage-200) 0 12px, var(--sage-250) 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dial__glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 38% 34%, rgba(255, 255, 255, .55), transparent 60%);
}

.dial__photo {
  position: relative;
  max-width: 62%;
  text-align: center;
  font: 500 12px/1.5 'Geist Mono', monospace;
  letter-spacing: .06em;
  color: var(--sage-800);
}

.dial__callout {
  position: absolute;
  right: -2%;
  top: 7%;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .06em;
  color: var(--graphite-600);
}
.dial__callout-line {
  width: 40px;
  height: 1px;
  background: var(--graphite-600);
}

/* Audience router */
.role-router {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  border-top: 1px solid var(--color-hairline);
  background: var(--graphite-0);
}

.role-router__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  padding: 20px clamp(20px, 2.4vw, 32px);
  border: 0;
  border-right: 1px solid var(--ink-a10);
  border-bottom: 1px solid rgba(10, 18, 22, .06);
  background: var(--graphite-50);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-2);
}
.role-router__tab[aria-selected="true"] { background: var(--graphite-0); }
.role-router__tab:hover { background: var(--graphite-25); }

.role-router__bar {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: transparent;
  transition: background var(--dur-3);
}
.role-router__tab[aria-selected="true"] .role-router__bar { background: var(--scrub-600); }

.role-router__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 12px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.role-router__arrow { font-size: 15px; }

.role-router__label { font: 500 18px/1.2 'Geist', sans-serif; }

.role-router__arrow,
.role-router__label { color: var(--graphite-600); }
.role-router__tab[aria-selected="true"] .role-router__arrow,
.role-router__tab[aria-selected="true"] .role-router__label { color: var(--graphite-900); }

.role-router__sub {
  font: 400 14px/1.3 'Geist', sans-serif;
  color: var(--graphite-500);
}

/* ── Logo wall ──────────────────────────────────────────────────────────── */

.logo-wall {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 72px) clamp(20px, 4.2vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.logo-wall__head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
}

.logo-wall__label {
  font: 500 12px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-600);
}

.logo-wall__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  border-top: 1px solid var(--color-hairline);
  border-left: 1px solid var(--color-hairline);
}

/* Typeset placeholder logos, one typographic treatment each */
.logo-wall__item {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  text-align: center;
  border-right: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  color: var(--graphite-600);
  line-height: 1.1;
}
.logo-wall__item--serif        { font-family: 'Instrument Serif', serif; font-size: 24px; font-weight: 400; }
.logo-wall__item--wide-caps    { font-family: 'Geist', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.logo-wall__item--tight        { font-family: 'Geist', sans-serif; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.logo-wall__item--serif-italic { font-family: 'Instrument Serif', serif; font-size: 24px; font-weight: 400; font-style: italic; }
.logo-wall__item--mono-caps    { font-family: 'Geist Mono', monospace; font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.logo-wall__item--light        { font-family: 'Geist', sans-serif; font-size: 18px; font-weight: 300; }

/* ── 01 Portfolio ───────────────────────────────────────────────────────── */

.products {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) clamp(20px, 4.2vw, 60px) clamp(64px, 8vw, 128px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Flagship card */
.flagship {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
  color: var(--graphite-900);
  text-decoration: none;
  transition: border-color var(--dur-3);
}

.flagship:hover,
.product-card:hover,
.case-teaser:hover,
.course-card:hover {
  border-color: var(--graphite-900);
  color: var(--graphite-900);
}

.flagship__figure {
  position: relative;
  flex: 1 1 440px;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--ink-a08);
  background-color: var(--graphite-25);
  background-image: linear-gradient(var(--ink-a04) 1px, transparent 1px), linear-gradient(90deg, var(--ink-a04) 1px, transparent 1px);
  background-size: 20px 20px;
}

.flagship__render {
  width: min(72%, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--ink-a16);
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, var(--sage-100) 0 10px, var(--sage-150) 10px 20px);
}

.flagship__render-label,
.product-card__image-label,
.case-teaser__image-label {
  max-width: 70%;
  text-align: center;
  font: 500 11px/1.5 'Geist Mono', monospace;
  letter-spacing: .06em;
  color: var(--graphite-600);
}
.flagship__render-label { max-width: 60%; }

.flagship__fig-no {
  position: absolute;
  left: 20px;
  top: 18px;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.flagship__body {
  flex: 1 1 400px;
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.flagship__meta {
  display: flex;
  justify-content: space-between;
  font: 500 12px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.flagship__name {
  font: 500 clamp(34px, 1.5rem + 2.6vw, 56px)/1.02 'Geist', sans-serif;
  letter-spacing: -.03em;
}

.flagship__desc {
  margin: 0;
  max-width: 460px;
  font: 400 18px/1.55 'Geist', sans-serif;
  color: var(--graphite-750);
}

.flagship__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: auto;
  border-top: 1px solid var(--ink-a10);
}

.flagship__spec {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 12px 0;
  border-left: 1px solid var(--ink-a08);
}
.flagship__spec:first-child { padding-left: 0; border-left: 0; }
.flagship__spec:last-child { padding-right: 0; }

.flagship__spec-value { font: 500 24px/1 'Geist', sans-serif; }
.flagship__spec-value--num { font-variant-numeric: tabular-nums; }

.flagship__spec-unit {
  font: 500 13px 'Geist Mono', monospace;
  color: var(--graphite-500);
}

.flagship__spec-label {
  font: 400 13px/1.3 'Geist', sans-serif;
  color: var(--graphite-600);
}

/* Product cards */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}

.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
  color: var(--graphite-900);
  text-decoration: none;
  transition: border-color var(--dur-3);
}

.product-card__image {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--ink-a08);
  background: repeating-linear-gradient(135deg, var(--sage-100) 0 10px, var(--sage-150) 10px 20px);
}

.product-card__body {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font: 500 12px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.product-card__name {
  font: 500 28px/1.1 'Geist', sans-serif;
  letter-spacing: -.02em;
}

.product-card__desc {
  margin: 0;
  font: 400 16px/1.55 'Geist', sans-serif;
  color: var(--graphite-600);
}

.product-card__link {
  margin-top: auto;
  padding-top: 8px;
}

/* Availability badge ("Not in all regions") */
.region-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--cyan-50);
  color: var(--cyan-700);
  font: 500 11px/1 'Geist', sans-serif;
  letter-spacing: 0;
}
.region-badge__icon { font: 600 10px/1 'Geist Mono', monospace; }

/* ── 02 Outcomes (dark aperture panel) ──────────────────────────────────── */

.outcomes {
  position: relative;
  padding: 0 clamp(8px, 1.2vw, 16px);
}

/* --aperture: circle radius driven by scroll (6% → 76%, d01-home.js) */
.outcomes__panel {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--graphite-950);
  color: var(--graphite-mist);
  clip-path: circle(var(--aperture, 6%) at 50% 40%);
}

.outcomes__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.outcomes__ring--outer  { width: 1400px; height: 1400px; margin: -700px 0 0 -700px; border: 1px solid var(--mist-a06); }
.outcomes__ring--middle { width: 980px;  height: 980px;  margin: -490px 0 0 -490px; border: 1px solid rgba(232, 236, 234, .07); }
.outcomes__ring--inner  { width: 560px;  height: 560px;  margin: -280px 0 0 -280px; border: 1px solid rgba(82, 224, 168, .16); }

.outcomes__inner {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(72px, 9vw, 140px) clamp(20px, 4.2vw, 60px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  border-top: 1px solid rgba(232, 236, 234, .16);
}

.stat {
  position: relative;
  padding: 28px 24px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid rgba(232, 236, 234, .08);
}

.stat__label {
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--mist-400);
}

.stat__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font: 500 clamp(52px, 2rem + 3vw, 88px)/1 'Geist', sans-serif;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.stat__unit {
  font: 500 18px/1 'Geist Mono', monospace;
  letter-spacing: 0;
  color: var(--mist-400);
}

.stat__desc {
  max-width: 240px;
  font: 400 16px/1.45 'Geist', sans-serif;
  color: var(--mist-200);
}

.outcomes__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
}

.outcomes__sources {
  font: 400 12px/1.5 'Geist Mono', monospace;
  color: var(--mist-400);
}

.outcomes__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.outcomes__download {
  gap: 10px;
  height: 52px;
  padding: 0 24px;
}

.outcomes__file {
  font: 500 12px 'Geist Mono', monospace;
  color: var(--mist-400);
}

.outcomes__hub-link {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 8px;
  color: var(--scrub-300);
  font: 500 16px/1 'Geist', sans-serif;
  text-decoration: none;
}
.outcomes__hub-link:hover { color: #7BEBC0; }

/* ── 03 In practice ─────────────────────────────────────────────────────── */

.kol {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(72px, 9vw, 140px) clamp(20px, 4.2vw, 60px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px);
  align-items: stretch;
}

.kol__quote {
  flex: 1 1 560px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.kol__text {
  margin: 0;
  font: 400 clamp(32px, 1.2rem + 2.4vw, 58px)/1.1 'Instrument Serif', serif;
  letter-spacing: -.01em;
  color: var(--graphite-900);
  text-wrap: pretty;
}

.kol__author {
  display: flex;
  align-items: center;
  gap: 18px;
}

.kol__portrait {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, var(--sage-200) 0 6px, var(--sage-250) 6px 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 9px/1 'Geist Mono', monospace;
  color: var(--sage-800);
}

.kol__author-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kol__name { font: 500 17px/1.2 'Geist', sans-serif; }

.kol__role {
  font: 400 15px/1.4 'Geist', sans-serif;
  color: var(--graphite-600);
}

.kol__disclosure {
  font: 400 12px/1.4 'Geist Mono', monospace;
  color: var(--graphite-500);
}

/* Case study teaser card */
.case-teaser {
  flex: 1 1 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
  color: var(--graphite-900);
  text-decoration: none;
  transition: border-color var(--dur-3);
}

.case-teaser__image {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, var(--sage-200) 0 12px, var(--sage-250) 12px 24px);
}
.case-teaser__image-label { color: var(--sage-800); }

.case-teaser__body {
  flex: 1;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.case-teaser__kicker {
  font: 500 12px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.case-teaser__title {
  font: 500 26px/1.15 'Geist', sans-serif;
  letter-spacing: -.02em;
}

.case-teaser__stats {
  display: flex;
  gap: 24px;
  padding-top: 8px;
  border-top: 1px solid var(--ink-a10);
}

.case-teaser__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-teaser__stat-value {
  font: 500 26px/1 'Geist', sans-serif;
  font-variant-numeric: tabular-nums;
}

.case-teaser__stat-label {
  font: 400 13px/1.3 'Geist', sans-serif;
  color: var(--graphite-600);
}

.case-teaser__link { margin-top: auto; }

/* ── 04 Evidence + 05 Academy teasers ───────────────────────────────────── */

.teasers {
  position: relative;
  border-top: 1px solid var(--color-hairline);
}

.teasers__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) clamp(20px, 4.2vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: clamp(40px, 5vw, 72px);
}

.teasers__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.teasers__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

/* Latest studies */
.study-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-hairline);
}

.study-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ink-a10);
  color: var(--graphite-900);
  text-decoration: none;
}
.study-list__item:hover { color: var(--scrub-600); }

.study-list__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .06em;
  color: var(--graphite-500);
}

.study-list__type {
  padding: 4px 7px;
  border: 1px solid rgba(10, 18, 22, .18);
  border-radius: var(--radius-s);
}

.study-list__meta { padding: 4px 0; }

.study-list__arrow {
  grid-row: span 2;
  align-self: center;
  font: 500 18px/1 'Geist', sans-serif;
}

.study-list__title {
  font: 500 19px/1.3 'Geist', sans-serif;
  letter-spacing: -.01em;
}

/* Webinar card */
.webinar {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
}

.webinar__date {
  flex: 0 0 132px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid var(--ink-a10);
  background: var(--graphite-25);
}

.webinar__month {
  font: 500 12px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.webinar__day {
  font: 500 56px/1 'Geist', sans-serif;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.webinar__time {
  font: 400 13px/1.3 'Geist Mono', monospace;
  color: var(--graphite-600);
}

.webinar__body {
  flex: 1 1 260px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.webinar__badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--cyan-50);
  color: var(--cyan-700);
  font: 500 12px/1 'Geist', sans-serif;
}

.webinar__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan-700);
}

.webinar__title {
  font: 500 22px/1.2 'Geist', sans-serif;
  letter-spacing: -.01em;
}

.webinar__meta {
  font: 400 15px/1.4 'Geist', sans-serif;
  color: var(--graphite-600);
}

.webinar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 6px;
}

.webinar__register {
  height: 44px;
  padding: 0 20px;
}

.webinar__calendar {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  color: var(--graphite-900);
  font: 500 15px/1 'Geist', sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.webinar__calendar:hover { color: var(--scrub-600); }

/* Course cards */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.course-card {
  padding: 20px;
  border: 1px solid var(--color-hairline);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--graphite-900);
  text-decoration: none;
}

.course-card__kicker {
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.course-card__title { font: 500 17px/1.3 'Geist', sans-serif; }

/* ── 06 CTA band ────────────────────────────────────────────────────────── */

.cta-band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-hairline);
  background: var(--graphite-0);
}

.cta-band__ring {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.cta-band__ring--outer { right: -180px; width: 560px; height: 560px; margin-top: -280px; border: 1px solid var(--ink-a08); }
.cta-band__ring--inner { right: -100px; width: 400px; height: 400px; margin-top: -200px; border: 1px solid var(--ink-a10); }

.cta-band__inner {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(72px, 9vw, 140px) clamp(20px, 4.2vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cta-band__title { max-width: 900px; }

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.cta-band__micro {
  font: 400 15px/1.4 'Geist', sans-serif;
  color: var(--graphite-600);
}

.trust-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin-top: 16px;
  border-top: 1px solid var(--color-hairline);
}

.trust-stack__item {
  padding: 18px 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trust-stack__label {
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.trust-stack__value { font: 500 15px/1.3 'Geist', sans-serif; }

/* ── Scroll progress ring (≥ 960px) ─────────────────────────────────────── */

.progress-ring {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 8px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  background: var(--graphite-0);
  box-shadow: 0 12px 32px -12px rgba(10, 18, 22, .3);
  color: var(--graphite-900);
  text-decoration: none;
  transition: padding var(--dur-4) var(--ease-diastole), background var(--dur-3);
}
.progress-ring:hover { color: var(--graphite-900); }

/* Label shows between 18% and 90% of the page */
.progress-ring.is-expanded { padding-left: 20px; }

.progress-ring__label {
  font: 500 15px/1 'Geist', sans-serif;
  white-space: nowrap;
}

.progress-ring__dial {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
}

.progress-ring__svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.progress-ring__pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 10px/1 'Geist Mono', monospace;
  color: var(--graphite-900);
  font-variant-numeric: tabular-nums;
}

/* ── Sticky CTA bar (< 960px) ───────────────────────────────────────────── */

.mobile-cta-bar { display: none; }

.mobile-cta-bar__primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--scrub-600);
  color: var(--graphite-0);
  font: 500 16px/1 'Geist', sans-serif;
  text-decoration: none;
}
.mobile-cta-bar__primary:hover { color: var(--graphite-0); }

.mobile-cta-bar__secondary {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-pill);
  color: var(--graphite-900);
  font: 500 15px/1 'Geist', sans-serif;
  text-decoration: none;
}
.mobile-cta-bar__secondary:hover { color: var(--graphite-900); }

@media (max-width: 959.98px) {
  .progress-ring { display: none; }

  .mobile-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 44;
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(245, 246, 243, .9);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--color-hairline);
  }
}

/* ── Without JavaScript: show everything in its final state ─────────────── */

@media (scripting: none) {
  .hero__line-text { transform: none; }
  .hero__proof-wrap,
  .hero__actions,
  .hero__trust,
  .reveal { opacity: 1; transform: none; }
  .dial__aperture { clip-path: circle(50% at 50% 50%); }
  .outcomes__panel { clip-path: none; }
}