/* Hero v2 "silk" — layered on top of landing.css (v2.html; v3.html reuses its grid, scale and key figures).
   Brand grey ground with a purple wave; type, navigation and buttons in brand black.
   The shader paints the whole hero; the CSS gradient is the same field for the first
   frames and for browsers without WebGPU. */

.hero--silk {
  background:
    radial-gradient(48% 70% at 27% 97%, color-mix(in srgb, var(--purple) 85%, transparent) 0%, transparent 100%),
    var(--grey);
  color: var(--black);
}
/* !important: the shader library writes its first measured size inline in px and never lets go
   of it, so without this the canvas keeps its old size when the window is resized */
.hero--silk .hero__glass { width: 100% !important; height: 100% !important; }
.hero--silk .hero__fallback {
  left: 50%; top: 50%; width: auto; height: 62%;
  transform: translate(-50%, -50%); opacity: .12;
}

/* Grid, after the reference: content runs full width with 40px side padding (no 1280px cap),
   the header is 112px tall on desktop. Applies to the whole v2 page so sections line up with the hero. */
.container { max-width: none; }
@media (min-width: 901px) { .hero--silk .header { height: 112px; } }

/* Header: black wordmark (the mark lives in the glass), black navigation, black button */
.hero--silk .header__logo img { height: 14px; }
/* menu: no dividers, just spacing, centred in the header */
.hero--silk .slash-nav { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; gap: var(--space-8); }
.hero--silk .slash-nav a,
.hero--silk .slash-nav a.is-active { color: var(--black); }
.hero--silk .slash-nav a:hover { opacity: .7; }
/* right side: "Become partner" link, then the button at the edge */
.hero--silk .header__actions { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
.hero--silk .header__actions .header__cta { margin-left: 0; }
.hero--silk .header__link { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--black); text-decoration: none; }
.hero--silk .header__link:hover { opacity: .7; }

/* Buttons: brand black, no shadows or outlines */
.hero--silk .in-btn--primary { background: var(--black); border-color: var(--black); color: var(--white); }
.hero--silk .in-btn--primary:not(:disabled):hover { background: var(--graphite); border-color: var(--graphite); }

.hero--silk .hero__body {
  align-items: flex-end; justify-content: space-between; gap: var(--space-12);
  padding-bottom: var(--space-16);
}
.hero--silk .hero__text { align-items: flex-start; max-width: 760px; text-align: left; }
.hero--silk .hero__title {
  font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -0.035em; color: var(--black);
}
.hero--silk .hero__lead { max-width: 520px; color: var(--black); }
.hero--silk .hero__title > [data-words] { display: block; } /* keep the two-line headline */

/* Large screens: the layout is drawn at 1440px; wider than that, type, controls and spacing
   grow with the viewport (--s = 1px at 1440, up to 1.75px at about 2520) so nothing looks small. */
@media (min-width: 1441px) {
  :root { --s: min(100vw / 1440, 1.75px); }
  .container { padding-inline: calc(40 * var(--s)); }
  .hero--silk .header { height: calc(112 * var(--s)); }
  .hero--silk .header__logo img { height: calc(14 * var(--s)); }
  .hero--silk .slash-nav { gap: calc(32 * var(--s)); font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s)); }
  .hero--silk .header__actions { gap: calc(24 * var(--s)); }
  .hero--silk .header__link { font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s)); }
  .hero--silk .header__cta {
    height: calc(32 * var(--s)); padding: 0 calc(12 * var(--s)); border-radius: calc(8 * var(--s));
    font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s));
  }
  .hero--silk .hero__body { gap: calc(48 * var(--s)); padding-bottom: calc(64 * var(--s)); }
  .hero--silk .hero__text { max-width: calc(760 * var(--s)); }
  .hero--silk .hero__title { font-size: calc(72 * var(--s)); }
  .hero--silk .hero__lead { margin-top: calc(24 * var(--s)); max-width: calc(520 * var(--s)); font-size: calc(18 * var(--s)); line-height: calc(28 * var(--s)); }
}

/* Undo the v1 stacked layout from landing.css: v2 keeps the full-bleed canvas */
@media (max-width: 1100px), (max-aspect-ratio: 4/3) {
  .hero--silk { height: var(--hero-h); }
  .hero--silk .hero__glass { position: absolute; order: 0; left: 0; top: 0; width: 100%; height: 100%; }
  .hero--silk .hero__fallback { position: absolute; order: 0; left: 50%; top: 50%; width: auto; height: 62%; margin: 0; transform: translate(-50%, -50%); }
  .hero--silk .hero__body { order: 0; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--space-10); padding-top: 0; }
}

/* Narrow screens: the mark sits under the header, the copy below it */
@media (max-aspect-ratio: 1/1) {
  .hero--silk { height: auto; min-height: var(--hero-h); }
  /* mark: min(42svh, 91vw) tall, 8px under the 80px header — the same numbers as placement() in v2.html */
  .hero--silk .hero__fallback { top: calc(88px + min(21svh, 45.5vw)); height: min(42svh, 91vw); }
  .hero--silk .hero__body { padding-top: calc(min(42svh, 91vw) + var(--space-8)); }
}


/* Phones: no room for the header link */
@media (max-width: 600px) {
  .hero--silk .header__link { display: none; }
}

/* ---------- Key figures, right under the hero (after the reference) ----------
   A two-tone statement, then one white card split into three cells: the figure on top,
   what it means at the bottom. Flat: thin grey dividers, no shadow. */
.proof { padding: var(--space-16) 0 var(--space-20); background: var(--grey); color: var(--black); }
.proof__intro { max-width: 820px; font-family: var(--font-sans); font-size: 28px; line-height: 38px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink-muted); }
.proof__intro > span:not(.t-word) { color: var(--black); } /* the dark lead-in only, not the word-reveal spans */
/* two shared rows across the card (subgrid): figures in row 1, labels in row 2, so every label
   starts on the same line whatever its length */
.proof__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; row-gap: 0; margin: var(--space-10) 0 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--white); }
.proof__item { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 100px; padding: var(--space-12); }
.proof__value { grid-row: 1; }
.proof__label { grid-row: 2; align-self: start; }
.proof__item + .proof__item { border-left: 1px solid var(--grey); }
.proof__value { margin: 0; font-family: var(--font-brand); font-size: 76px; line-height: 1; font-weight: 400; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--black); }
.proof__value sup { position: relative; top: .32em; margin-left: .06em; font-size: .38em; line-height: 0; letter-spacing: 0; vertical-align: top; }
.proof__label { max-width: 360px; font-size: 16px; line-height: 24px; color: var(--ink-muted); }

@media (max-width: 900px) {
  .proof { padding: var(--space-12) 0 var(--space-16); }
  .proof__intro { font-size: 22px; line-height: 30px; }
  .proof__grid { grid-template-columns: 1fr; margin-top: var(--space-8); }
  .proof__item { row-gap: var(--space-8); padding: var(--space-8); }
  .proof__item + .proof__item { border-left: 0; border-top: 1px solid var(--grey); }
  .proof__value { font-size: 56px; }
}

/* large screens: the figures grow with the same --s scale as the hero */
@media (min-width: 1441px) {
  .proof { padding: calc(64 * var(--s)) 0 calc(80 * var(--s)); }
  .proof__intro { max-width: calc(820 * var(--s)); font-size: calc(28 * var(--s)); line-height: calc(38 * var(--s)); }
  .proof__grid { margin-top: calc(40 * var(--s)); border-radius: calc(20 * var(--s)); }
  .proof__item { padding: calc(48 * var(--s)); row-gap: calc(100 * var(--s)); }
  .proof__value { font-size: calc(76 * var(--s)); }
  .proof__label { max-width: calc(360 * var(--s)); font-size: calc(16 * var(--s)); line-height: calc(24 * var(--s)); }
}