/* ==========================================================================
   D01 — Group Home
   Field-line hero with scroll-driven stages, intent router (synced with the
   header switch), divisions, credibility stack, teasers and CTA band.
   The page uses the shared site header / footer with the group-home
   adjustments collected in the first two sections below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared header — group-home variant (.site-header--home)
   -------------------------------------------------------------------------- */
.site-header--home .site-header__intent {
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  letter-spacing: .02em;
}

.site-header--home .site-header__bar {
  gap: 32px;
  padding: 0 var(--gutter-site);
  background: rgba(7, 8, 11, .78);
}

.site-header--home .site-nav {
  gap: 4px;
}

.site-header--home .site-nav__link {
  height: 40px;
}

.site-header--home .site-header__cta-short {
  padding: 0 16px;
}

.site-header--home .mega-menu {
  gap: 24px;
  padding: 32px var(--gutter-site) 40px;
}

/* Intent switch sits in a bordered cell at the right end of the strip */
.site-header--home .intent-switch {
  align-self: stretch;
  padding: 0 10px;
  border-left: 1px solid var(--line);
}

.site-header--home .intent-switch__btn {
  height: 24px;
  color: #C9CED6;
}

.site-header--home .intent-switch__btn[aria-pressed="true"] {
  background: #EDEFF2;
  color: #0B0D10;
}

/* Mobile menu: intent pills above the links */
.site-header--home .mobile-nav {
  z-index: 80;
}

.mobile-nav__intents {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 24px 0;
}

.mobile-nav__intent {
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: #C9CED6;
  font-family: var(--font-mono);
  font-size: 12px;
}

.mobile-nav__intent[aria-pressed="true"] {
  background: #EDEFF2;
  color: #0B0D10;
}

.site-header--home .mobile-nav__list {
  margin-top: 0;
}

.site-header--home .mobile-nav__link {
  font-size: clamp(28px, 8vw, 44px);
}

/* Menu links keep the default amber link hover on this page */
.site-header--home .mobile-nav__link:hover {
  color: #FFB020;
}

.site-header--home .mobile-nav__cta {
  margin-top: 32px;
  font-stretch: 100%;
}

@media (max-width: 1099.98px) {
  .site-header--home .intent-switch {
    display: none;
  }
}

/* Milestone ticker (scrolls while motion is on) */
.milestone-ticker {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
}

.milestone-ticker__label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 16px;
  border-right: 1px solid var(--line);
  color: var(--text);
}

.milestone-ticker__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3DDC97;
}

.milestone-ticker__viewport {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  overflow: hidden;
}

.milestone-ticker__track {
  display: flex;
  align-items: center;
  gap: 48px;
  height: 100%;
  padding-left: 24px;
  white-space: nowrap;
  will-change: transform;
}

.milestone-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   Shared footer — group-home adjustments
   -------------------------------------------------------------------------- */
.page-d01-group-home .site-footer {
  padding-bottom: 120px;
}

.page-d01-group-home .site-footer__fineprint {
  margin-top: 64px;
}

.page-d01-group-home .site-footer__link {
  padding: 0;
}

.page-d01-group-home .site-footer__link:hover,
.page-d01-group-home .site-footer__legal a:hover {
  color: var(--text-2);
}

.page-d01-group-home .flux-pill {
  background: rgba(15, 18, 23, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
}

.page-d01-group-home .flux-pill__toggle[aria-pressed="true"] {
  background: #7FDBFF;
  color: #0B0D10;
}

/* The pill waits below the viewport while the hero is on screen */
.page-d01-group-home.is-in-hero .flux-pill {
  --pill-bottom: -80px;
}

/* --------------------------------------------------------------------------
   Page-wide pieces: headings, proof chips, CTAs, annotations
   -------------------------------------------------------------------------- */
.home-title {
  margin-top: 16px;
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: .98;
  font-weight: 650;
  font-stretch: 118%;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.home-title--md {
  margin-top: 0;
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: -.025em;
  text-wrap: wrap;
}

.home-title--xl {
  font-size: clamp(40px, 6vw, 96px);
  line-height: .92;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: -.04em;
}

/* Title left, control or figures right */
.split-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px 64px;
  align-items: end;
}

/* Readiness status: dot + label + dated meta */
.proof-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.proof-chip__meta {
  color: var(--text-3);
}

.page-d01-group-home .status-dot {
  --dot-size: 9px;
}

/* Filled buttons in the page body have no (transparent) border either */
/* Large CTA pair (hero, CTA band) */
.cta-lg {
  gap: 12px;
  padding: 0 28px;
}

.cta-lg--secondary {
  padding: 0 24px;
}

.cta-lg--secondary:hover {
  border-color: #EDEFF2;
  color: #EDEFF2;
}

/* Outlined secondary CTA (divisions, teasers): turns amber on hover */
.cta-outline {
  padding: 0 18px;
  border-color: rgba(237, 239, 242, .32);
  font-weight: 600;
  font-stretch: 110%;
}

.cta-outline:hover {
  border-color: #FFB020;
  color: #FFB020;
}

/* Conversion annotations — shown via the footer pill toggle */
/* Annotation boxes (base: components/annotation.css) */
.anno {
  top: 32px;
  color: var(--text);
}

.anno--hero {
  left: var(--gutter-site);
  right: auto;
  top: 170px;
}

/* --------------------------------------------------------------------------
   Hero
   The section is 280vh tall; its sticky inner stays pinned while the scroll
   progress morphs the field (plasma → silicon → robot).
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 280vh;
  margin-top: -100px; /* slide under the sticky header (36px strip + 64px bar) */
}

.hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 8, 11, .55) 0%, rgba(7, 8, 11, 0) 55%),
    linear-gradient(0deg, rgba(7, 8, 11, .7) 0%, rgba(7, 8, 11, 0) 40%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(96px, 15vh, 128px) var(--gutter-site) 24px;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(16px, 3vh, 32px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-2);
}

.hero__eyebrow-rule {
  width: 24px;
  height: 1px;
  background: var(--line-strong);
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.6vh, 28px);
  max-width: 1100px;
  margin-top: auto;
}

.hero__stage-line {
  display: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}

.hero__title {
  font-size: clamp(44px, min(10.4vw, 13vh), 176px);
  line-height: .86;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.hero__lead {
  max-width: 560px;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px 0 10px;
  border: 1px solid rgba(61, 220, 151, .5);
  border-radius: var(--r-pill);
  color: var(--text);
}

.hero__badge .status-dot {
  --dot-size: 8px;
}

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

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--text-3);
}

/* Stage switcher, note and motion toggle */
.hero__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: clamp(12px, 2.6vh, 28px);
  padding-top: clamp(8px, 1.6vh, 16px);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.stage-nav {
  display: flex;
  gap: 6px;
}

.stage-nav__btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 84px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: #8A919C;
  text-align: left;
  white-space: nowrap;
}

.stage-nav__bar {
  width: 100%;
  height: 2px;
  background: rgba(237, 239, 242, .2);
}

.stage-nav__btn[aria-current="step"] {
  color: #EDEFF2;
}

.stage-nav__btn[aria-current="step"] .stage-nav__bar {
  background: #EDEFF2;
}

.hero__note {
  margin-left: auto;
}

.hero__pause {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  white-space: nowrap;
}

/* Telemetry panel (wide screens only) */
.telemetry {
  position: absolute;
  top: 128px;
  right: var(--gutter-site);
  width: 340px;
  padding: 20px;
  background: rgba(15, 18, 23, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.telemetry__head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.telemetry__scale {
  margin-top: 14px;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: -.01em;
}

.telemetry__name {
  font-size: 15px;
  color: var(--text-2);
}

.telemetry__readings {
  display: flex;
  flex-direction: column;
  margin-top: 18px;
  border-top: 1px solid var(--line);
}

.telemetry__reading {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.telemetry__label {
  font-size: 11px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-3);
}

.telemetry__trend {
  font-size: 11px;
  text-align: right;
  color: var(--text-3);
}

.telemetry__value {
  font-size: 18px;
  color: var(--text);
}

.telemetry__unit {
  font-size: 13px;
  color: var(--text-2);
}

.telemetry__unc {
  font-size: 12px;
  color: var(--text-3);
}

.telemetry__status {
  margin-top: 14px;
}

.telemetry__source {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

/* < 1100px: no telemetry panel; the stage line takes over (if tall enough) */
@media (max-width: 1099.98px) {
  .telemetry {
    display: none;
  }
}

@media (max-width: 1099.98px) and (min-height: 700px) {
  .hero__stage-line {
    display: block;
  }
}

/* Short viewports (< 700px): drop the lead and the trust line */
@media (max-height: 699.98px) {
  .hero__lead,
  .hero__trust {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Intent router
   -------------------------------------------------------------------------- */
.intent-router {
  position: relative;
  padding: clamp(96px, 12vw, 176px) 0 clamp(80px, 9vw, 136px);
  border-top: 1px solid var(--line);
}

.intent-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}

.intent-tabs__tab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 12px 16px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: #C9CED6;
  text-align: left;
}

.intent-tabs__tab[aria-selected="true"] {
  background: #EDEFF2;
  color: #0B0D10;
}

.intent-tabs__num {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: .75;
}

.intent-tabs__label {
  font-size: 16px;
  font-weight: 600;
  font-stretch: 112%;
}

.intent-panel {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  margin-top: 48px;
}

.intent-panel__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
}

.intent-panel__title {
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.1;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.intent-panel__body {
  max-width: 48ch;
  color: var(--text-2);
  text-wrap: pretty;
}

.intent-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}

.intent-panel__cta {
  height: 52px;
  padding: 0 22px;
}

.intent-panel__link {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 15px;
  color: var(--text);
}

.intent-panel__link:hover {
  color: #FFB020;
}

.intent-stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 240px;
  padding: 32px;
}

.intent-stat__figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.intent-stat__value {
  font-size: clamp(48px, 5vw, 80px);
  line-height: 1;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: -.04em;
}

.intent-stat__unit {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-2);
}

.intent-stat__label {
  font-size: 15px;
  color: var(--text-2);
}

.intent-stat__status {
  margin-top: auto;
}

.intent-router__note {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   Divisions
   -------------------------------------------------------------------------- */
.divisions {
  position: relative;
  padding: clamp(80px, 9vw, 136px) 0;
  background: #0F1217;
  border-top: 1px solid var(--line);
}

.divisions__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
}

.divisions__aside {
  max-width: 420px;
  color: var(--text-2);
  text-wrap: pretty;
}

.divisions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 20px;
  margin-top: 56px;
}

.division-card {
  --tint-a: rgba(123, 60, 255, .28);
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  outline: 1px dashed rgba(127, 219, 255, 0);
  outline-offset: 0;
  transition: outline-offset 400ms var(--ease-inertia), outline-color 250ms, transform 700ms var(--ease-inertia);
}

.division-card:hover {
  outline-color: rgba(127, 219, 255, .55);
  outline-offset: 8px;
}

.division-card--silicon { --tint-a: rgba(127, 219, 255, .22); }
.division-card--robotics { --tint-a: rgba(237, 239, 242, .14); }

/* Photo placeholder with the division tint */
.division-card__media {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 16 / 10;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, rgba(123, 60, 255, .10) 0 1px, transparent 1px 10px),
    linear-gradient(160deg, var(--tint-a), rgba(7, 8, 11, .9));
}

.division-card__photo {
  padding: 4px 8px;
  background: rgba(7, 8, 11, .7);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-2);
}

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

.division-card__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.division-card__title {
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.05;
  font-weight: 650;
  font-stretch: 120%;
  letter-spacing: -.02em;
}

.division-card__desc {
  font-size: 15px;
  color: var(--text-2);
  text-wrap: pretty;
}

.division-card__metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.division-card__figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.division-card__value {
  font-size: 32px;
  line-height: 1;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: -.03em;
}

.division-card__unit {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}

.division-card__metric-label {
  font-size: 13px;
  color: var(--text-2);
}

.division-card__trl {
  display: flex;
  align-items: center;
  gap: 10px;
}

.division-card__trl-label {
  min-width: 44px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}

/* Full-width TRL meter */
.division-card__trl .trl-meter {
  flex: 1;
  width: auto;
  height: 8px;
  gap: 3px;
}

.division-card__trl .trl-meter > span {
  background: rgba(237, 239, 242, .14);
}

.division-card__trl .trl-meter > span.is-on {
  background: #EDEFF2;
}

.division-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

.division-card__explore {
  padding: 12px 4px;
  font-size: 14px;
  color: var(--text-2);
}

.division-card__explore:hover {
  color: #EDEFF2;
}

/* --------------------------------------------------------------------------
   Credibility stack
   -------------------------------------------------------------------------- */
.record {
  position: relative;
  padding: clamp(80px, 9vw, 136px) 0;
  border-top: 1px solid var(--line);
}

.record-counts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.record-counts__item {
  padding: 20px;
}

.record-counts__value {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.record-counts__label {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}

/* Milestone record (ARIA table built from grid rows) */
.milestone-table {
  margin-top: 56px;
  border-top: 1px solid var(--line-strong);
}

.milestone-table__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 24px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.milestone-table__row:hover {
  background: rgba(237, 239, 242, .025);
}

.milestone-table__date {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.milestone-table__div {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}

.milestone-table__text {
  grid-column: span 2;
  min-width: 0;
  font-size: 17px;
  font-weight: 500;
}

.milestone-table__ver {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}

.record__footnote {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.record__footnote-link,
.record__alerts-link {
  border-bottom: 1px solid var(--line-strong);
  color: var(--text-2);
}

.record__footnote-link:hover {
  color: var(--text-2);
}

.record__alerts-link,
.record__alerts-link:hover {
  color: var(--text);
}

.record__lower {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 40px;
  margin-top: 72px;
}

.record__label {
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.record__partners {
  grid-column: span 2;
  min-width: 0;
}

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

.standard-badge {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
}

.standard-badge__name {
  font-family: var(--font-mono);
  font-size: 13px;
}

.standard-badge__desc {
  font-size: 12px;
  color: var(--text-2);
}

.standard-badge__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
}

.standard-badge .status-dot {
  --dot-size: 8px;
}

.logo-wall {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.logo-wall__item {
  display: grid;
  place-items: center;
  height: 96px;
  background: repeating-linear-gradient(135deg, rgba(237, 239, 242, .04) 0 1px, transparent 1px 8px), var(--canvas);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   Investors and careers teasers
   -------------------------------------------------------------------------- */
.teasers {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  border-top: 1px solid var(--line);
}

.teaser {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(64px, 7vw, 112px) var(--gutter-kit);
}

.teaser:first-child {
  border-right: 1px solid var(--line);
}

.teaser__body {
  max-width: 46ch;
  color: var(--text-2);
}

.teaser__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.teaser__fact {
  flex: 1 1 140px;
  padding: 16px;
  background: var(--canvas);
}

.teaser__fact-value {
  font-size: 28px;
  font-weight: 600;
  font-stretch: 125%;
  font-variant-numeric: tabular-nums;
}

.teaser__fact-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}

.teaser__teams {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.team-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--text);
}

.team-chip:hover {
  border-color: rgba(237, 239, 242, .32);
  color: #EDEFF2;
}

.team-chip__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.teaser__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.teaser__link {
  padding: 14px 4px;
  font-size: 14px;
  color: var(--text-2);
}

.teaser__link:hover {
  color: #EDEFF2;
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 11vw, 168px) 0;
  background: #0F1217;
  border-top: 1px solid var(--line);
}

.cta-band__rings {
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(ellipse at 85% 50%, rgba(123, 60, 255, .14) 0 1px, transparent 1px 28px);
  pointer-events: none;
}

.cta-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 40px 64px;
  align-items: end;
}

.cta-band__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cta-band__body {
  max-width: 46ch;
  color: var(--text-2);
}

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

.cta-band__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}