/* ==========================================================================
   MatchPlay homepage — hand-authored stylesheet
   Re-platformed from the Webflow export. Plain HTML/CSS, no framework.

   Table of contents
   1.  Fonts
   2.  Design tokens (:root)
   3.  Reset & base
   4.  Layout primitives (.container, .section)
   5.  Buttons
   6.  Header / navigation
   7.  Hero
   7c. Process
   7d. Diligence value
   9.  Testimonials (marquee)
   10. Subscribe
   11. Footer
   12. Motion utilities (scroll-reveal)
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
/* Display face is self-hosted on the original CDN. Only the weights actually
   used on this page are loaded (down from 15 files to 4). Sora, Geist,
   Share Tech Mono, Inter and Libre Baskerville come from Google Fonts
   (see <head>). */
@font-face {
  font-family: "BW Gradual";
  src: url("../assets/fonts/BwGradual-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BW Gradual";
  src: url("../assets/fonts/BwGradual-RegularItalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "BW Gradual";
  src: url("../assets/fonts/BwGradual-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BW Gradual";
  src: url("../assets/fonts/BwGradual-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* 2. Design tokens -------------------------------------------------------- */
:root {
  /* Brand palette */
  --cyan: #1ED2F4;
  --cyan-hover: #2FBEDB;
  --orange: #F97D4A;
  --orange-hover: #E2673A;
  --mint: #79E8C9;
  --purple: #D25AFF;
  --purple-hover: #BE47E8;

  /* Page accent. Defaults to the MatchPlay Group cyan; a page can retint its
     whole surface — headings, buttons, links, footer — by redefining these two
     on a wrapper, which is how the investors page runs Ventures orange. */
  --accent: var(--cyan);
  --accent-hover: var(--cyan-hover);

  /* Match-category accents */
  --accent-investor: #63D6B6;
  --accent-mentor: #25BEDB;
  --accent-cofounder: #E86129;
  --accent-accelerator: #BED015;
  --accent-corp: #807DE5;
  --accent-testimonial: #8DEBD1;

  /* Surfaces */
  --bg-dark: #2E2E31;      /* primary dark background */
  --bg-darker: #28282B;    /* steps / feature bands */
  --bg-dark-alt: #2B2B2B;  /* testimonials */
  --surface-card: #3B3B3F; /* dark cards */
  --surface-light: #FFFFFF;
  /* Translucent panels (mission box, ecosystem cards) — one place to tune,
     so the panels stay matched. The -ink pair is the same surface inverted
     for the white side of the ecosystem split. */
  --surface-glass: rgba(255, 255, 255, 0.06);
  --surface-glass-hover: rgba(255, 255, 255, 0.1);
  --surface-glass-ink: rgba(10, 10, 10, 0.06);
  --surface-glass-ink-hover: rgba(10, 10, 10, 0.1);

  /* Text */
  --text-on-dark: #FFFFFF;
  --text-on-light: #111111;
  --text-muted: #808080;

  /* Typography */
  --font-display: "BW Gradual", "Segoe UI", sans-serif;
  /* One mono across the whole site, always set uppercase. */
  --font-mono: "Share Tech Mono", ui-monospace, monospace;
  /* MatchPlay Ventures faces, used by the hero lockup and copy */
  --font-wordmark: "Sora", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Geist", -apple-system, system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-serif: "Libre Baskerville", Georgia, serif;

  /* Fluid type scale */
  --fs-h1: clamp(2rem, 3.6vw, 3rem);             /* section headers */
  --fs-h2: clamp(1.75rem, 2.7vw, 3rem);          /* card titles */
  --fs-h3: clamp(1.5rem, 2.16vw, 2.2rem);
  --fs-lead: clamp(1.05rem, 1.26vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;

  /* Spacing scale */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --section-y: clamp(3.5rem, 6.3vw, 6rem);

  /* Shape */
  --radius-card: 27px;
  --radius-btn: 13.5px;
  --radius-img: 13.5px;
  --border-accent: 5px;

  /* Elevation */
  --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.2);
  --shadow-card-light: 0 4px 15px rgba(255, 255, 255, 0.2);

  /* Layout */
  --container-max: 1080px;
  --container-wide: 1260px;

  /* Hero splash animation */
  --splash-bg: #26262A;      /* field gray before the dim */
  --splash-bg-dim: #0E0E11;  /* after the dim */

  /* Motion */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur: 0.2s;
}

/* 3. Reset & base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The whole site is drawn at 90%: rem-based sizes follow this, and the
   vw and px sizes in the rules below were scaled by the same 0.9. */
html { font-size: 90%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; border: 0; vertical-align: middle; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

p { margin: 0; }

button { font: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* 4. Layout primitives ---------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--space-md), var(--container-max));
  margin-inline: auto;
}
.container--wide { --container-max: var(--container-wide); }

.section { padding-block: var(--section-y); }
/* A plain .section has no background, so on the homepage the animated field
   reads through it. Only the light bands paint over the field. */
.section--light { background-color: var(--surface-light); color: var(--text-on-light); }
/* First section on a page with no .page-hero: clear the fixed nav, matching
   the offset .page-hero uses, so the two kinds of page start at the same height. */
.section--top { padding-top: calc(var(--nav-h, 96px) + clamp(3rem, 6.3vw, 6rem)); }

/* 5. Buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  padding: 0.85em 2.2em;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  /* Hover is a colour swap only — no lift, no glow — as on the Ventures site. */
  transition: background-color var(--dur), border-color var(--dur), color var(--dur);
}

.btn--primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--primary:hover {
  background-color: #fff;
  border-color: #fff;
  color: var(--accent);
}

/* Fully-rounded CTA with a trailing arrow (matches the nav Apply pill). */
.btn--pill { border-radius: 999px; }
.btn__arrow {
  display: inline-block;
  margin-left: 0.5em;
}

/* Quiet secondary action — underline only, no chrome. */
.btn--quiet {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0;
  box-shadow: none;
  padding: 0.5em 0;
  color: rgba(255, 255, 255, 0.9);
}
.btn--quiet:hover {
  color: #fff;
  border-bottom-color: #fff;
  box-shadow: none;
}

.btn--nav {
  font-size: 0.85rem;
  letter-spacing: 1px;
  padding: 8.1px 16.2px;
  margin-left: 3.6px;
  border-radius: 999px;
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--nav::after {
  content: "→";
  margin-left: 0.5em;
  display: inline-block;
}
.btn--nav:hover {
  background-color: #fff;
  border-color: #fff;
  color: var(--accent);
}

/* 6. Header / navigation -------------------------------------------------- */
/* Floating glass pill navbar (inspired by MatchPlay Ventures, in group colors) */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding-top: 16.2px;
  pointer-events: none;   /* only the pill itself is interactive */
}
.site-header .container { --container-max: 1008px; }

.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 7.2px 7.2px 7.2px 19.8px;
  background: rgba(46, 46, 49, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
          backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.nav__brand { display: flex; align-items: center; flex-shrink: 0; }
.nav__brand img { width: 144px; }
/* Dividing line to the right of the logo — stays visible in mobile mode */
.nav__brand::after {
  content: "";
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.25);
  margin-left: 14.4px;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
/* Divider separating Log In / Apply from the rest of the menu */
.nav__divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.25);
  margin: 0 7.2px;
  flex-shrink: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5.4px;
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  padding: 7.2px 11.7px;
  border-radius: 999px;
  transition: color var(--dur), background-color var(--dur);
  white-space: nowrap;
}
.nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
/* The page being viewed (main.js marks it): its link, or the dropdown that
   holds it, in the site blue. */
.nav__link[aria-current="page"],
.nav__dropdown.is-current > .nav__link,
.nav__dropdown-menu a[aria-current="page"],
.nav__mobile a[aria-current="page"] { color: var(--cyan); }

.nav__chev {
  font-size: 7.2px;
  opacity: 0.6;
  transform: translateY(1px);
  transition: transform var(--dur);
}
.nav__dropdown:hover .nav__chev,
.nav__dropdown:focus-within .nav__chev { transform: translateY(3px); }

/* Dropdowns — hover/focus driven glass panels */
.nav__dropdown { position: relative; }
.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 10.8px);
  left: 50%;
  transform: translate(-50%, 6px);
  width: max-content;            /* as wide as its widest item, so it grows if a longer one is added */
  background: rgba(46, 46, 49, 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
          backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16.2px;
  padding: 7.2px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
/* Invisible bridge so the cursor can cross the gap without closing it */
.nav__dropdown-menu::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 12.6px;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav__dropdown-menu a {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  padding: 8.1px 12.6px;
  border-radius: 10.8px;
  transition: color 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}
.nav__dropdown-menu a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }

/* Hamburger — round pill button */
.nav__hamburger {
  display: none;
  width: 34.2px;
  height: 34.2px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4.5px;
  background: none;
  border: 0;
  padding: 0;
  transition: background-color var(--dur);
}
.nav__hamburger:hover { background: rgba(255, 255, 255, 0.06); }
.nav__hamburger span {
  display: block;
  width: 14.4px;
  height: 1.5px;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Morph to an X while the menu is open */
.nav__hamburger.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__hamburger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.nav__hamburger.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu — floating glass panel below the pill */
.nav__mobile {
  pointer-events: none;
  position: fixed;
  top: 75.6px;
  left: 18px;
  right: 18px;
  z-index: 999;
  background: rgba(46, 46, 49, 0.96);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 21.6px;
  padding: 14.4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* dvh tracks the toolbar, so the last items are never hidden behind it. */
  max-height: calc(100vh - 93.6px);
  max-height: calc(100dvh - 93.6px);
  overflow: auto;
  overscroll-behavior: contain;   /* reaching the end does not scroll the page */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px) scale(0.96);
  transform-origin: top center;
  /* Closing: short and snappy so dismissing never feels sluggish. */
  transition: opacity 0.18s ease-in,
              transform 0.2s ease-in,
              visibility 0.2s;
}
.nav__mobile.is-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  /* Opening: long, decelerating ease-out-expo for a fluid unfurl. */
  transition: opacity 0.3s ease-out,
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.45s;
}

/* Staggered reveal of the rows — --i is set per child in main.js */
.nav__mobile > * {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.16s ease-in, transform 0.16s ease-in;
}
.nav__mobile.is-open > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.28s ease-out, transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
  /* Capped so a long list still finishes promptly instead of dragging. */
  transition-delay: calc(40ms + min(var(--i, 0) * 12ms, 170ms));
}
.nav__mobile a {
  text-align: center;              /* every row centred in the panel */
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  padding: 10.8px 14.4px;
  border-radius: 12.6px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav__mobile a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav__mobile-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  padding: 12.6px 14.4px 5.4px;
}
/* A line between the site's pages and the app: above Log In, with room round it. */
.nav__mobile-login {
  position: relative;
  margin-top: 13px;
}
.nav__mobile-login::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 14.4px;
  right: 14.4px;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.nav__mobile-cta {
  margin-top: 9px;
  text-align: center;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
}
.nav__mobile-cta:hover { background: var(--accent-hover); color: #fff; }

/* 7. Hero ----------------------------------------------------------------- */
/* Animation only — the black dot grid, the colored links and rings, and the
   MatchPlay mark. All of it is generated as SVG by js/hero-splash.js; see that
   file for the load sequence. */
/* The stage holds the hero and the ecosystem section over a single field, so
   the dots and links run continuously from one into the other. */
.stage {
  position: relative;
  overflow: hidden;
  background: var(--splash-bg);
  transition: background 1.1s ease;
}
.stage.is-dim { background: var(--splash-bg-dim); }       /* step 4 */

/* Every section must be positioned to paint above the field. A static section
   sits in the block layer, which renders *below* a positioned z-index:0
   sibling — which is what put the animation on top of the lower sections. */
.stage > section {
  position: relative;
  z-index: 1;
}

.hero {
  position: relative;
  min-height: 100vh;
  /* On phones 100vh is the height with the toolbar hidden, so the hero would
     run past the screen it loads on; svh is the height with it showing. */
  min-height: 100svh;
  /* Centre the content in the area below the fixed nav, not the whole
     viewport. --nav-h is published by hero-splash.js. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--nav-h, 81px);
}

/* Spans the whole stage plus an 18% bleed on every side. hero-splash.js sets
   the box in px from the same numbers as the viewBox, so the 1:1 mapping the
   mark's placement depends on holds on phones too; these values are only the
   starting point. */
.hero-splash {
  position: absolute;
  left: -18%;
  top: -18vh;
  z-index: 0;
  width: 136%;
  height: calc(100% + 36vh);
  display: block;
  pointer-events: none;         /* decorative: never intercept clicks */
}
#splash-grid,
#splash-links { transition: opacity 1.1s ease; }
.stage.is-dim #splash-grid { opacity: 0.5; }
.stage.is-dim #splash-links { opacity: 0.26; }
.stage--bright.is-dim #splash-links { opacity: 0.75; }   /* brighter than the usual dim (0.26); kept off the hero copy (hero-splash.js) */

#splash-grid circle {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#splash-logo {
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
#splash-ball {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
#splash-dimples circle { transition: opacity 0.3s ease; }

/* Reveal gating — anything with data-reveal stays hidden until the timeline
   adds .shown. Scoped to html.splash so no-JS / reduced-motion never hides
   content. */
[data-reveal] {
  transition: opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.splash [data-reveal]:not(.shown) {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}
/* The fixed header drops in from above instead. */
html.splash .site-header[data-reveal]:not(.shown) { transform: translateY(-14px); }
/* A returning visitor is not watching an intro, so the arrival is brisk — the
   long easing reads as sluggishness once the field is already settled. */
html.splash--returning [data-reveal] {
  transition-duration: 0.5s;
}

/* --- Hero content: lockup + copy, stacked under the animated mark --------- */
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
}
/* Reserves the animated mark's slot so the group centres as one unit.
   --mark-h is published by hero-splash.js. */
.hero__mark-space {
  height: var(--mark-h, 180px);
  pointer-events: none;
}
/* Gap between the mark and the wordmark. */
.hero__content > .container { margin-top: clamp(0.5rem, 1.44vw, 1.5rem); }

/* Wordmark + tagline read as one locked-up unit: the lockup shrinks to the
   wordmark, and main.js tracks the tagline out to match that exact width. */
.hero__lockup {
  display: inline-block;
  margin: 0;
}
.hero__wordmark {
  display: block;
  font-family: var(--font-wordmark);
  /* weight / line-height / tracking per the Ventures .hero-title. Its size
     (clamp(64px,13vw,180px)) is for a two-line lockup with no mark above it —
     scaled down here so the wordmark sits with the animated mark. */
  font-weight: 600;
  /* the floor keeps the wordmark in proportion on small screens, where the
     dot grid (and so the mark) stops shrinking */
  font-size: clamp(2.9rem, 6.75vw, 6.75rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: #fff;
  white-space: nowrap;
}
.hero__tagline {
  /* inline-block so it shrink-wraps to its text — a block child would stretch
     to the lockup width and main.js could not measure the natural width. */
  display: inline-block;
  margin-top: clamp(0.75rem, 1.44vw, 1.4rem);
  font-family: var(--font-mono);
  font-weight: 400;
  /* Size drives the tracking: main.js fits this to the wordmark width, so a
     larger size leaves less letter-spacing to distribute (~0.5em, per the
     brand lockup) instead of the very wide gaps a small size forces. */
  font-size: clamp(0.8rem, 1.57vw, 1.6rem);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* Supporting copy and the single CTA. */
.hero__copy {
  margin-top: clamp(2.5rem, 5.4vw, 4rem);
}
/* Ventures .hero-sub, widened 25% (620px -> 775px) on desktop. */
.hero__sub {
  max-width: 697.5px;
  margin: 0 auto;
  font-family: var(--font-ui);
  font-size: clamp(15.3px, 1.44vw, 18.9px);
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  text-wrap: balance;
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(1.75rem, 3.15vw, 2.5rem);
  padding: 14.4px 25.2px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 1.05rem;                /* the same as .btn, so it matches the link beside it */
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  /* Colour swap only, as on the Ventures site. */
  transition: background-color var(--dur), color var(--dur);
}
.hero__cta:hover {
  background: #fff;
  color: var(--accent);
}

/* 7a. Statement panel ------------------------------------------------------
   A centred translucent panel holding a title and a paragraph, used by the
   Founders page for its problem statement. (Named for the homepage mission
   section it was first built for.) */

/* Translucent panel, same surface language as the ecosystem cards. */
.mission__inner {
  position: relative;
  overflow: hidden;
  max-width: 990px;
  background: var(--surface-glass);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: clamp(21.6px, 2.7vw, 36px);
  padding: clamp(2.25rem, 4.05vw, 4rem) clamp(1.75rem, 3.6vw, 3.5rem);
}
/* Soft glow behind the copy, echoing the cards' accent orb. */
.mission__inner::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -240px;
  translate: -50% 0;
  width: 414px;
  height: 414px;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(110px);
  opacity: 0.07;
  pointer-events: none;
}
.mission__inner > * { position: relative; z-index: 1; }

.mission__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(0.75rem, 1.35vw, 1.15rem);
}

.mission__title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.14vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}
.mission__title em { font-style: italic; color: var(--accent); }

.mission__body {
  max-width: 684px;
  margin: clamp(1.5rem, 2.7vw, 2.25rem) auto 0;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.17vw, 1.125rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}
.mission__body strong { color: #fff; font-weight: 500; }

/* 7b. Ecosystem ------------------------------------------------------------
   A flat dark band. Unlike the other dark sections this one is opaque, so the
   hero's animated field ends at the hero and the cards sit on a plain ground. */
.ecosystem {
  position: relative;
  background: var(--splash-bg-dim);
  padding-block: var(--section-y);
}

/* Title left, lead right — the lead sits on the title's baseline block rather
   than centred, which is what gives the band its editorial feel. */
.ecosystem__head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 3.6vw, 4rem);
  margin-bottom: clamp(2.5rem, 4.5vw, 4rem);
}
.ecosystem__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
}
.ecosystem__title em { font-style: italic; color: var(--accent); }
.ecosystem__lead {
  padding-top: 0.4em;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.17vw, 1.125rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.68);
  text-wrap: pretty;
}

.eco-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.75rem);
  align-items: stretch;
}

/* Cards ------------------------------------------------------------------- */
.eco-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  background: var(--surface-glass);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 21.6px;
  padding: clamp(1.75rem, 2.79vw, 2.5rem);
  transition: transform 0.4s var(--ease), background-color 0.4s var(--ease),
              border-color 0.4s var(--ease);
}
.eco-card:hover,
.eco-card.is-active {
  transform: translateY(-4px);
  background: var(--surface-glass-hover);
  border-color: rgba(255, 255, 255, 0.18);
}
/* The accent rule, the pointer glow and the tilt come from [data-tilt]
   (see "Pointer cards" below); each card only picks its colour. */
.eco-card[data-tilt] { --fx-accent: var(--eco-accent); }   /* outranks the shared [data-tilt] default */

.eco-card--group { --eco-accent: var(--cyan); }
.eco-card--ventures { --eco-accent: var(--orange); }
.eco-card--capital  { --eco-accent: var(--orange); }

.eco-card__name {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.79vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 0.2em;
}
.eco-card__tagline {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.53vw, 1.375rem);
  color: var(--eco-accent);
  margin-bottom: 1.25em;
}
.eco-card__body {
  position: relative;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: auto;            /* pins the link to the bottom */
}
.eco-card__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5.4px;
  align-self: flex-end;
  margin-top: clamp(1.25rem, 2.25vw, 1.75rem);
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 0.85vw, 0.8125rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eco-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity var(--dur);
}
.eco-card__link:hover { opacity: 0.7; }

/* 7c. Process ---------------------------------------------------------------
   Readiness before the first meeting, then the four stages. The order is the
   flow, so there is no separate diagram. */
.process__head {
  max-width: 738px;
  margin: 0 auto clamp(2.5rem, 4.5vw, 4rem);
  text-align: center;
}
.process__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.42vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.process__lead {
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.08vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(10, 10, 10, 0.6);
  text-wrap: pretty;
}

.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.62vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.process__step {
  padding: clamp(1.5rem, 2.16vw, 2rem);
  background: var(--surface-glass-ink);
  border: 1px solid rgba(10, 10, 10, 0.1);
  border-radius: 18px;
  border-top: 3px solid var(--accent);
}
.process__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
}
.process__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.62vw, 1.5rem);
  letter-spacing: -0.015em;
  margin-bottom: 0.4em;
}
.process__text {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(10, 10, 10, 0.62);
}

/* 7d. Diligence value ------------------------------------------------------ */
.values__head {
  max-width: 810px;
  margin: 0 auto clamp(2.5rem, 4.5vw, 4rem);
  text-align: center;
}
.values__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.96vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
}
.values__title em { font-style: italic; color: var(--accent); }

.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.75rem);
}
.value {
  padding: clamp(1.75rem, 2.52vw, 2.5rem);
  background: var(--surface-glass);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 21.6px;
}
.value__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
}
.value__name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.71vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 0.5em;
}
.value__text {
  font-family: var(--font-ui);
  font-size: 0.975rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.values__actions {
  margin-top: clamp(2rem, 3.6vw, 3rem);
  text-align: center;
}

/* 7e. Interior pages -------------------------------------------------------
   Pages other than the homepage do not run the splash. They sit on the same
   dark ground, plain — the type and the panels carry the page on their own. */
.dotfield {
  position: relative;
  background-color: var(--splash-bg-dim);
}
.dotfield > * { position: relative; z-index: 1; }

/* Retint a whole page. The accent cascades to headings, buttons, links and
   the footer, so a page only has to name its colour once. */
.page--ventures { --accent: var(--orange); --accent-hover: var(--orange-hover); }
.page--purple   { --accent: var(--purple); --accent-hover: var(--purple-hover); }
/* The nav and footer are shared chrome: they keep the site blue whatever the
   page's accent. */
.site-header,
.site-footer { --accent: var(--cyan); --accent-hover: var(--cyan-hover); }

/* Page hero — the homepage's animated lockup would be wrong here. */
.page-hero {
  padding-top: calc(var(--nav-h, 86.4px) + clamp(3rem, 6.3vw, 6rem));
  padding-bottom: clamp(2.5rem, 4.5vw, 4rem);
  text-align: center;
}
.page-hero__inner { max-width: 846px; }
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}
.page-hero__title em { font-style: italic; color: var(--accent); }
/* For a headline that is a full sentence rather than a line. */
.page-hero__title--long { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.08; }
.page-hero__sub {
  max-width: 648px;
  margin: clamp(1.25rem, 2.25vw, 1.75rem) auto 0;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.17vw, 1.125rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 2.7vw, 2.25rem);
  margin-top: clamp(1.75rem, 3.15vw, 2.5rem);
}

.carousel-band { padding-block: clamp(1.5rem, 2.7vw, 2.5rem); }

/* Who it's for */
.audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.75rem, 3.6vw, 3.5rem);
  padding: clamp(2rem, 3.6vw, 3.5rem);
  background: var(--surface-glass);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: clamp(21.6px, 2.7vw, 32.4px);
}
.audience__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.7vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
}
.audience__title em { font-style: italic; color: var(--accent); }
.audience__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.audience__list li {
  position: relative;
  padding-left: 1.9rem;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.08vw, 1.0625rem);
  color: rgba(255, 255, 255, 0.82);
}
.audience__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Founder stories — video beside the quote, alternating sides */
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.75rem, 3.6vw, 3.5rem);
  padding-block: clamp(1.75rem, 3.15vw, 3rem);
}
.story + .story { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.story--flip .story__video { order: 2; }

.story__video {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--surface-glass);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  overflow: hidden;
}
/* The embed fills the 16:9 box; the placeholder styling below is kept for
   stories that do not have a video yet. */
.story__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Before it plays: the video's thumbnail and a play button, a link to the
   video (main.js swaps in the player on click). Cropped to 16:9 from the
   middle, which also trims YouTube's letterbox bars. */
.story__poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
  cursor: pointer;
}
.story__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease), filter 0.3s ease;
}
.story__poster::after {                 /* a soft shade so the button reads on any frame */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}
.story__poster .story__play {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s var(--ease);
}
.story__poster:hover img { transform: scale(1.03); }
.story__poster:hover .story__play,
.story__poster:focus-visible .story__play { transform: scale(1.08); }
.story__poster:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.story__play {
  display: grid;
  place-items: center;
  width: 50.4px;
  height: 50.4px;
  border-radius: 50%;
  background: var(--accent);
  color: #0E0E11;
  font-size: 1.1rem;
  padding-left: 3px;
}
.story__video-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.story__quote p {
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.22vw, 1.175rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.story__quote strong { color: #fff; font-weight: 500; }
.story__by {
  margin-top: clamp(1.25rem, 2.25vw, 1.75rem);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}
.story__name { display: block; color: #fff; font-weight: 500; }
.story__by em { font-style: italic; color: var(--accent); }

/* Founder stories: one column of cards, video on one side and the line
   that matters on the other, alternating. Tokenized, so it sits on either
   band. */
.story-grid {
  display: grid;
  grid-auto-rows: 1fr;
  gap: clamp(1.5rem, 2.7vw, 2.5rem);
  max-width: 900px;
  margin-inline: auto;
}
.story-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 2.7vw, 2.5rem);
  margin: 0;
  padding: clamp(1rem, 1.62vw, 1.5rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 21.6px;
}
.story-card:nth-child(even) .story__video { order: 2; }
.story-card > .fx::before,
.testimonial > .fx::before { content: none; }   /* glow and tilt only, no accent rule */
.story-card .story__video { border-radius: 14px; background: var(--panel); border-color: var(--line); }
.story-card__text { display: flex; flex-direction: column; gap: 1rem; padding-right: clamp(0.5rem, 1.35vw, 1.25rem); }
/* The company's site sits at the bottom left; the quote and name centre in
   the space above it. */
.story-card__text { align-self: stretch; }
.story-card__text > blockquote { margin-top: auto; }
.story__site { align-self: flex-start; margin-top: auto; }
.story-card:nth-child(odd) .story__site { align-self: flex-end; }   /* text on the right: link bottom right */
.story-card:nth-child(even) .story-card__text { padding-right: 0; padding-left: clamp(0.5rem, 1.35vw, 1.25rem); }
.story-card blockquote { margin: 0; }
.story-card blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.44vw, 1.35rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.story-card .story__by { margin: 0; font-size: 0.9rem; color: var(--ink-2); }
.story-card .story__name { color: var(--ink); }
@media (max-width: 760px) {
  .story-card { grid-template-columns: 1fr; }
  .story-card:nth-child(even) .story__video { order: 0; }
  .story-card:nth-child(odd) .story__site { align-self: flex-start; }   /* stacked: always bottom left */
  .story-card__text,
  .story-card:nth-child(even) .story-card__text { padding: 0 0.35rem 0.5rem; }
}

/* The testimonial scroll under a page hero, a size down from the
   homepage's so the hero still fits one screen. */
.page-hero__marquee { margin-top: clamp(2rem, 5vh, 3.5rem); text-align: left; }
.page-hero__marquee .testimonial {
  width: min(297px, 78vw);
  padding: var(--space-md);
  gap: var(--space-sm);
}
.page-hero__marquee .testimonial__quote { font-size: 0.9rem; line-height: 1.7; }
.page-hero__marquee .testimonial__avatar { width: 3.25em; height: 3.25em; }
/* On a phone a card nearly fills the screen, so the strip's usual pace
   (about 37px/s) took some 8s per quote: twice as fast there (60s -> 30s). */
@media (max-width: 767px) {
  .page-hero__marquee .marquee__track { animation-duration: 30s; }
}

/* Featured quote on the light band */
.feature-quote { margin: 0; max-width: 792px; margin-inline: auto; text-align: center; }
.feature-quote blockquote { margin: 0; }
.feature-quote blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.98vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text-on-light);
}
.feature-quote blockquote p + p { margin-top: 1em; }
.feature-quote blockquote em { font-style: italic; color: var(--accent); }
.feature-quote__by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: clamp(1.75rem, 3.15vw, 2.5rem);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
  color: rgba(10, 10, 10, 0.6);
}
.feature-quote__by img { width: 64.8px; height: 64.8px; border-radius: 50%; object-fit: cover; }
.feature-quote__name { display: block; color: var(--text-on-light); font-weight: 500; }
.feature-quote__by em { font-style: italic; color: var(--accent); }
/* Giant quote mark over the text and a larger, ringed portrait. */
.feature-quote--marks::before {
  content: "\201C";
  display: block;
  height: 0.5em;                     /* the glyph sits high; trim its empty lower half */
  margin-bottom: clamp(0.5rem, 1.35vw, 1rem);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(7rem, 11.7vw, 11rem);
  line-height: 0.85;
  color: var(--accent);
}
.feature-quote--marks .feature-quote__by { gap: clamp(1.1rem, 2vw, 1.75rem); margin-top: clamp(2rem, 6vh, 4rem); font-size: 1rem; }
.feature-quote--marks .feature-quote__by img {
  width: clamp(104px, 10vw, 144px);
  height: clamp(104px, 10vw, 144px);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--accent);
}
.feature-quote--marks .feature-quote__name { font-size: 1.1rem; }
.feature-quote--marks { max-width: 940px; }
.feature-quote--marks blockquote p { font-size: clamp(1.45rem, 2.5vw, 2.3rem); line-height: 1.3; }

/* Closing CTA */
.cta-band {
  text-align: center;
  padding: clamp(2.5rem, 4.5vw, 4.5rem) clamp(1.5rem, 3.6vw, 3.5rem);
  background: var(--surface-glass);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: clamp(21.6px, 2.7vw, 32.4px);
}
.cta-band__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}
.cta-band__title em { font-style: italic; color: var(--accent); }
.cta-band__text {
  max-width: 558px;
  margin: clamp(1rem, 1.8vw, 1.5rem) auto 0;
  font-family: var(--font-ui);
  font-size: clamp(0.975rem, 1.08vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 2.7vw, 2.25rem);
  margin-top: clamp(1.75rem, 3.15vw, 2.5rem);
}

/* MATCH HOUSE: the page is one screen over the recap film (muted, looped),
   under a dark wash so the copy reads; main.js pauses it for reduced motion. */
.mh-hero { position: relative; overflow: hidden; isolation: isolate; }
.mh-hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The title in MATCH HOUSE's own type: Lexend Zetta Black for the name, and
   the line under it in Lexend Mega Black, smaller (Mega runs very wide). */
.mh-title { display: flex; flex-direction: column; align-items: center; gap: clamp(0.6rem, 1.4vw, 1.1rem); }
.mh-title__name {
  font-family: "Lexend Zetta", var(--font-display);
  font-weight: 900;
  font-size: clamp(1.7rem, 4.4vw, 3.8rem);   /* Zetta runs wider than the site's display face */
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
}
.mh-title__line {
  max-width: 34ch;
  font-family: "Lexend Mega", var(--font-display);
  font-weight: 900;
  font-size: clamp(1rem, 1.9vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: var(--accent);
  text-wrap: balance;
}
.mh-hero .page-hero__sub { color: #fff; }   /* full white over the film */
.mh-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 14, 17, 0.55) 0%, rgba(14, 14, 17, 0.35) 45%, rgba(14, 14, 17, 0.8) 100%),
    rgba(14, 14, 17, 0.25);
}

/* Blog title: the name, and under it a line of small caps tracked out by
   main.js to the name's exact width, like the homepage's brand lockup. The
   lockup shrink-wraps to the name so that width is the name's. */
.blog-lockup { display: inline-flex; flex-direction: column; align-items: center; }
.blog-lockup__name { display: block; }
.blog-lockup__tag {
  display: inline-block;
  margin-top: clamp(0.6rem, 1.3vw, 1.1rem);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(0.8rem, 1.4vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
}

/* 7f. Logo roster ----------------------------------------------------------
   Each tile holds a partner's logo (assets/partners/, transparent PNGs) on
   white. Used by the Partners page. */
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(0.75rem, 1.44vw, 1.1rem);
}
.roster__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 1.25rem 1.5rem;
  text-align: center;
  background: var(--surface-light);
  border-radius: 12.6px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--text-on-light);
  transition: transform 0.3s var(--ease);
}
.roster__tile:hover { transform: translateY(-3px); }
.roster__tile img { width: auto; height: auto; max-width: 80%; max-height: 58px; object-fit: contain; }

/* 7g. Press ----------------------------------------------------------------
   An index of releases, and the release pages themselves. */
.press-list { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
.press-item {
  display: block;
  padding: clamp(1.5rem, 2.7vw, 2.25rem);
  background: var(--surface-glass);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease),
              border-color 0.35s var(--ease);
}
.press-item:hover {
  transform: translateY(-3px);
  background: var(--surface-glass-hover);
  border-color: rgba(255, 255, 255, 0.2);
}
.press-item__date {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  color: var(--accent);
}
.press-item__title {
  margin-top: 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.16vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.press-item__excerpt {
  margin-top: 0.9rem;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}
.press-item__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* Release page: a single readable column. */
.release { max-width: 792px; margin-inline: auto; }
.release__title { text-align: left; margin-top: 0.75rem; }
/* The headline stands clear of the release text, which starts a good step below it. */
.release__head { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
/* Paragraphs sit a clear line apart (more than the 1.75 leading inside
   them); a heading opens more room above and stays close to what follows;
   a quote's attribution stays with its quote. */
.release__body > * + *,
.prose > * + * { margin-top: 2rem; }
.release__body > h2 + *,
.prose > h2 + * { margin-top: 0.85rem; }
.release__body > blockquote + p,
.prose > blockquote + p { margin-top: 0.85rem; }
.release__body p,
.prose p {
  font-family: var(--font-ui);
  font-size: 1.125rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
}
.release__body strong,
.prose strong { color: #fff; font-weight: 500; }
.release__body a,
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.release__body h2,
.prose h2 {
  margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.98vw, 1.75rem);
  letter-spacing: -0.02em;
  color: #fff;
}
.release__body blockquote,
.prose blockquote {
  margin-inline: 0;
  margin-bottom: 0;
  padding-left: clamp(1rem, 1.8vw, 1.5rem);
  border-left: 2px solid var(--accent);
}
.release__body blockquote p,
.prose blockquote p {
  font-family: var(--font-serif);
  font-style: italic;
  color: rgba(255, 255, 255, 0.88);
}
.release__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  color: var(--accent);
}
/* The same link above the dateline, so a reader can go back without scrolling. */
.release__back--top { margin-top: 0; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Legal pages (Terms, Privacy, Acceptable Use, Copyright & Trademark): the
   release column, with a row of links between the four documents, a contents
   list, numbered clause headings and bullet lists. */
.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.legal-nav a {
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.legal-nav a:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.legal-nav a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.legal-toc {
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.2vw, 1.75rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: var(--surface-glass);
}
.legal-toc__title {
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  font-size: var(--fs-sm) !important;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6) !important;
}
.legal-toc ol { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.legal-toc a { font-family: var(--font-ui); font-size: 1.05rem; color: #fff; text-decoration: none; }
.legal-toc a:hover { color: var(--accent); }
.legal > h2 { scroll-margin-top: calc(var(--nav-clear, 110px) + 2rem); }
.legal > h3 {
  margin-top: 2.25rem;
  font-family: var(--font-ui);
  font-size: 1.2rem;
  font-weight: 500;
  color: #fff;
}
.legal > h3 + * { margin-top: 0.6rem; }
.legal > p + ul { margin-top: 0.75rem; }
.legal ul { margin-bottom: 0; padding-left: 1.25rem; display: grid; gap: 0.45rem; }
.legal li {
  font-family: var(--font-ui);
  font-size: 1.125rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}
.legal li::marker { color: var(--accent); }

/* 7h. Summit recaps ---------------------------------------------------------
   Event pages: a banner lockup, sponsor rows, an agenda, panel slides and a
   photo gallery. Each summit sets its own --accent on <body>. */
.summit-hero {
  padding-top: calc(var(--nav-h, 86.4px) + clamp(2rem, 3.6vw, 3.5rem));
  padding-bottom: clamp(2rem, 3.6vw, 3rem);
}
/* The banner art already carries its own dark ground, so it needs no panel
   behind it — just room to breathe and a radius to match the cards. */
.summit-hero__banner {
  max-width: 900px;
  margin-inline: auto;
  border-radius: clamp(10.8px, 1.8vw, 18px);
  overflow: hidden;
}
.summit-hero__banner img { width: 100%; }

.summit-title {
  margin-top: clamp(2rem, 3.6vw, 3rem);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.96vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
}
.summit-title em { display: block; font-style: normal; color: var(--accent); }
.summit-meta {
  margin-top: clamp(0.75rem, 1.35vw, 1rem);
  text-align: center;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}

/* Sponsor rows. The marks are dark-on-transparent, so each sits on a white
   tile rather than being inverted. */
.sponsors { margin-top: clamp(2.5rem, 4.5vw, 3.5rem); text-align: center; }
.sponsors + .sponsors { margin-top: clamp(1.75rem, 3.15vw, 2.5rem); }
.sponsors__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}
.sponsors__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
}
.sponsor-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 144px;
  min-height: 68.4px;
  padding: 0.9rem 1.4rem;
  background: var(--surface-light);
  border-radius: 10.8px;
  transition: transform 0.3s var(--ease);
}
.sponsor-tile:hover { transform: translateY(-3px); }
/* Cap both axes: the marks range from square-ish to very wide, and without a
   width cap a wide one stretches its tile far past the others. */
.sponsor-tile img { max-height: 39.6px; max-width: 171px; width: auto; object-fit: contain; }

/* Photo gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(0.75rem, 1.44vw, 1.25rem);
}
.gallery__item {
  border-radius: 12.6px;
  overflow: hidden;
  background: var(--surface-glass);
}
.gallery__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.gallery__item:hover img { transform: scale(1.04); }
.gallery__actions { margin-top: clamp(1.75rem, 3.15vw, 2.5rem); text-align: center; }

/* A session: kicker, title, prose, then the panel slide. */
.highlight + .highlight { margin-top: clamp(3rem, 5.4vw, 5rem); }
.highlight__kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: var(--accent);
}
.highlight__title {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.52vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.highlight__body { margin-top: clamp(1rem, 1.8vw, 1.5rem); }
.highlight__slide {
  margin-top: clamp(1.75rem, 3.15vw, 2.5rem);
  border-radius: 12.6px;
  overflow: hidden;
}
.highlight__slide img { width: 100%; }

/* Two slides side by side (the 2024 panels). */
.slide-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin-top: clamp(1.75rem, 3.15vw, 2.5rem);
}
.slide-pair figure { margin: 0; border-radius: 14px; overflow: hidden; }

/* Agenda: a day's running order. */
.agenda { margin-top: clamp(1.25rem, 2.25vw, 1.75rem); padding: 0; list-style: none; }
.agenda li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-ui);
  color: rgba(255, 255, 255, 0.78);
}
.agenda li:last-child { border-bottom: 0; }
.agenda__time {
  min-width: 6.5rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* 7i. Homepage narrative ----------------------------------------------------
   The homepage alternates dark and light bands. Rather than a light variant of
   every component, each band defines the ink it paints with and the
   components read those tokens — so any of them can sit on either ground. */
.section,
.page-hero {
  --ink: #fff;
  --ink-2: rgba(255, 255, 255, 0.72);
  --ink-3: rgba(255, 255, 255, 0.5);
  --line: rgba(255, 255, 255, 0.1);
  --panel: var(--surface-glass);
  --panel-hover: var(--surface-glass-hover);
  --ground: var(--splash-bg-dim);
  --accent-ink: var(--accent);
}
.section--light {
  --ink: var(--text-on-light);
  --ink-2: rgba(10, 10, 10, 0.66);
  --ink-3: rgba(10, 10, 10, 0.5);
  --line: rgba(10, 10, 10, 0.1);
  --panel: rgba(10, 10, 10, 0.035);
  --panel-hover: rgba(10, 10, 10, 0.06);
  --ground: #fff;
  /* One accent everywhere: white bands use the same bright accent as dark ones. */
}

/* The colour-swap hover goes to white, which vanishes on a white band. */
.section--light .btn--primary:hover {
  background-color: var(--splash-bg-dim);
  border-color: var(--splash-bg-dim);
  color: var(--accent);
}

/* Section heads */
.sec-head { max-width: 810px; margin-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
/* Title across the full width, the short paragraph under it. */
.sec-head--stacked { max-width: none; }
.sec-head--stacked .sec-head__body { max-width: 648px; margin-top: clamp(1rem, 1.8vw, 1.5rem); padding-top: 0; }
.sec-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 3.6vw, 4.5rem);
}
.sec-head__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.78vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.sec-head__title em { font-style: italic; color: var(--accent-ink); }
.sec-head__body { padding-top: 0.35em; }
.sec-head--center .sec-head__body { max-width: 612px; margin: clamp(1rem, 1.8vw, 1.5rem) auto 0; }
.sec-head__body p {
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.12vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
.sec-head__body p + p { margin-top: 1em; }
.sec-head__body strong,
.sec-head__body .sec-head__emph { color: var(--ink); font-weight: 500; }

/* A short line that introduces a list or grid. */
.grid-intro {
  margin-bottom: clamp(1rem, 1.8vw, 1.4rem);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
}

/* Inline link with an arrow — the secondary action under most sections. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity var(--dur);
}
.text-link:hover { opacity: 0.7; }
.text-link span { transition: transform 0.25s var(--ease); }
.text-link:hover span { transform: translateX(3px); }

.sec-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 2.7vw, 2.25rem);
  margin-top: clamp(2rem, 3.6vw, 3rem);
}
.sec-actions--center { justify-content: center; }

/* Pointer cards ----------------------------------------------------------
   Any box with data-tilt. main.js gives it a decorative .fx layer and, for a
   mouse or pen, tilts the box toward the pointer and sets --gx/--gy to where
   the pointer is. The layer carries a short accent rule along the top that
   draws across on hover, and two blurred glows: one resting low right, and
   one under the pointer. When the pointer comes in, the resting glow fades
   out and the pointer's fades in where it is, then follows it; when it
   leaves, the reverse. The layer sits at z-index -1 inside the box's own
   stacking context: above its background, below its text. */
[data-tilt] {
  --fx-accent: var(--accent);
  --fx-rest: 0.08;        /* glow opacity at rest, on hover, while tracking */
  --fx-hover: 0.18;
  --fx-track: 0.24;
  position: relative;
  isolation: isolate;
  transition: transform 0.4s var(--ease), background-color 0.4s var(--ease),
              border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
[data-tilt]:hover { transform: translateY(-4px); }
.fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.fx::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--fx-accent);
  transform: scaleX(0.15);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
[data-tilt]:hover > .fx::before,
[data-tilt].is-active > .fx::before { transform: scaleX(1); }
/* The glows are soft radial gradients rather than blurred discs: the
   gradient follows the blur's own falloff (a 216px disc blurred 80px), so it
   looks the same, but it is drawn once. A blur had to be redrawn every time
   the glow moved, which made the hover lag; Safari also drew a big blur on a
   tilted box in tiles, cut off at their edges. The pointer's glow moves by
   transform only (main.js sets --gx/--gy in px), so following the pointer
   is just the GPU sliding a finished layer. */
.fx__orb {
  position: absolute;
  left: 0;
  top: 0;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  /* sampled every 20px from a 216px disc under blur(80px) */
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--fx-accent) 59.6%, transparent) 0.0%,
    color-mix(in srgb, var(--fx-accent) 58.4%, transparent) 7.1%,
    color-mix(in srgb, var(--fx-accent) 54.9%, transparent) 14.3%,
    color-mix(in srgb, var(--fx-accent) 50.2%, transparent) 21.4%,
    color-mix(in srgb, var(--fx-accent) 43.9%, transparent) 28.6%,
    color-mix(in srgb, var(--fx-accent) 36.9%, transparent) 35.7%,
    color-mix(in srgb, var(--fx-accent) 29.4%, transparent) 42.9%,
    color-mix(in srgb, var(--fx-accent) 22.7%, transparent) 50.0%,
    color-mix(in srgb, var(--fx-accent) 16.9%, transparent) 57.1%,
    color-mix(in srgb, var(--fx-accent) 11.8%, transparent) 64.3%,
    color-mix(in srgb, var(--fx-accent) 7.8%, transparent) 71.4%,
    color-mix(in srgb, var(--fx-accent) 4.7%, transparent) 78.6%,
    color-mix(in srgb, var(--fx-accent) 2.7%, transparent) 85.7%,
    color-mix(in srgb, var(--fx-accent) 1.6%, transparent) 92.9%,
    transparent 100%);
  transition: opacity 0.4s var(--ease);
}
.fx__orb--rest {
  left: calc(100% - 54px);
  top: 100%;
  transform: translate(-50%, -50%);
  opacity: var(--fx-rest);
}
/* Starts dark; it only moves while showing, so it never slides in from
   wherever it last was. */
.fx__orb--pointer {
  transform: translate3d(calc(var(--gx, 0px) - 50%), calc(var(--gy, 0px) - 50%), 0);
  opacity: 0;
}
[data-tilt]:hover .fx__orb--rest { opacity: var(--fx-hover); }   /* touch: no tracking */
[data-tilt].is-tracking .fx__orb--rest { opacity: 0; }
[data-tilt].is-tracking .fx__orb--pointer {
  opacity: var(--fx-track);
  will-change: transform;
  transition: opacity 0.4s var(--ease), transform 0.12s ease-out;
}
/* Touch screens have no hover: instead the card crossing the middle of the
   screen as it scrolls takes the hover look (main.js sets .is-active, and
   .is-tracking for the glow, which travels down through it). */
/* On white a glass box has nothing to glow against: the glow runs stronger
   and the lift reads through a soft shadow and a firmer edge. */
.section--light [data-tilt],
.testimonial[data-tilt] { --fx-rest: 0.06; --fx-hover: 0.18; --fx-track: 0.28; }   /* white testimonial cards glow like a light band's boxes */
.section--light [data-tilt]:hover,
.section--light [data-tilt].is-active {
  border-color: rgba(10, 10, 10, 0.14);
  box-shadow: 0 18px 40px -22px rgba(10, 10, 10, 0.28);
}
/* An accented panel's top rule is now the drawn one. */
.panel--accent[data-tilt] { border-top: 1px solid var(--line); }

/* Full-screen pages (page--screens: the homepage, Founders, MATCH HOUSE).
   Every box in a set is the same size. Columns are already equal
   (minmax(0, 1fr)); equal rows make each box as tall as the tallest one. */
.page--screens .eco-grid,
.page--screens .steps,
.page--screens .cards,
.page--screens .flow,
.page--screens .voices { grid-auto-rows: 1fr; }

/* Every section fills one screen. The fixed nav sits over the top of a
   section scrolled into view, so the top padding clears it (--nav-clear:
   its height plus a little room under it, set by main.js) and the content
   centres in the space below. min-height, so a section with more than a
   screen of content still grows. */
.page--screens .ecosystem,
.page--screens .page-hero,
.page--screens .section {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* centring supplies the breathing room, so the spacing can be leaner */
  padding-top: calc(var(--nav-clear, 5.5rem) + clamp(0.25rem, 1vh, 0.75rem));
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
/* The homepage's closing call to action and the newsletter: one dark
   section, the two boxes stacked one over the other at one size (the same
   width, and the height of the taller, main.js data-match). */
.page--screens #start > .container {
  justify-content: center;
  gap: clamp(1rem, 2.5vh, 1.75rem);
}
/* The ring toy starts right where the newsletter box ends: no screen of
   its own and nothing below the boxes (the two grounds are the same dark). */
.page--screens #start {
  min-height: 0;
  padding-bottom: 0;
}
.page--screens #start .cta-band,
.page--screens .subscribe__panel {
  width: 100%;
  max-width: none;
}
.page--screens #start .cta-band { display: flex; flex-direction: column; justify-content: center; }
/* The newsletter laid out as the box above it: centred, on the same glass,
   the field and its button side by side under the copy. */
.page--screens #start .subscribe__panel {
  text-align: center;
  padding: clamp(2.5rem, 4.5vw, 4.5rem) clamp(1.5rem, 3.6vw, 3.5rem);
  background: var(--surface-glass);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
/* its title, line and form spaced and set exactly as the box above's */
.page--screens #start .subscribe__panel { display: flex; flex-direction: column; justify-content: center; gap: 0; }
.page--screens #start .subscribe__title {
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}
.page--screens #start .subscribe__title em { color: var(--accent); }
.page--screens #start .subscribe__text {
  max-width: 558px;
  margin: clamp(1rem, 1.8vw, 1.5rem) auto 0;
  font-size: clamp(0.975rem, 1.08vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}
.page--screens #start .subscribe__form {
  width: 100%;
  max-width: 560px;
  margin: clamp(1.75rem, 3.15vw, 2.5rem) auto 0;
  justify-content: center;
}
/* The ring toy across a dark section, last thing before the footer: the
   homepage's dark ground (as the dark sections over the field and the
   footer), the toy filling it edge to edge. */
.play {
  position: relative;
  height: 80vh;
  height: 80svh;
  min-height: 30rem;
  background: var(--splash-bg-dim);
}
.play__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.page--screens .sec-head { margin-bottom: clamp(2rem, 4vh, 3rem); }
.page--screens .panel { padding: clamp(1.5rem, 2.16vw, 2rem); }
/* Every call to action sits centred. */
.page--screens .sec-actions { justify-content: center; }
/* Spare height is shared out evenly: above the header, between the header,
   the boxes and the actions, and below them, instead of everything bunching
   in the middle. The parts' own margins stay as the minimum gaps, so a
   section that already fills the screen is unchanged. */
.page--screens .ecosystem > .container,
.page--screens .section > .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

/* A set of boxes with a label over it ("The MatchPlay process") and its
   call to action under it. The wrapper keeps the three together when a
   section spaces out its parts, one even gap between them. */
.set { display: flex; flex-direction: column; gap: clamp(1.5rem, 2.7vw, 2.5rem); }
.set > .sec-actions { margin-top: 0; }
.set__label {
  font-family: var(--font-mono);
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* Numbered steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.62vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }   /* narrower screens fall back to .steps' columns */
/* A step set apart from the rest (the one that's the visitor's), in the accent. */
.step.step--accent {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.step.step--accent:hover, .step.step--accent.is-active { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.16vw, 2rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.step:hover, .step.is-active { background: var(--panel-hover); }
.step__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--accent-ink);
}
.step__name {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.71vw, 1.6rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.step__num + .step__name { margin-top: clamp(1rem, 1.8vw, 1.5rem); }   /* unnumbered steps start with the name */
.step__claim {
  margin-top: 0.5rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.step__text {
  margin-top: 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* Cards */
.cards {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: clamp(1rem, 1.62vw, 1.5rem);
}
.cards--2 { --cols: 2; }
.cards--4 { --cols: 4; }
@media (min-width: 761px) {
  .cards--tall .card { min-height: clamp(190px, 24vh, 260px); }   /* fills a sparse section, closing up its gaps */
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.34vw, 2.25rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card:hover, .card.is-active { background: var(--panel-hover); }
.card__kicker {
  margin-bottom: clamp(0.9rem, 1.62vw, 1.25rem);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.card__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.62vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.card__text {
  margin-top: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.975rem;
  line-height: 1.6;
  color: var(--ink-2);
}
/* The link sits on the card's floor, whatever the text above it runs to. */
.card .text-link { align-self: flex-start; margin-top: auto; }
.card__text:has(+ .text-link) { margin-bottom: clamp(1.25rem, 2.25vw, 1.75rem); }

/* A tile that closes a grid with the takeaway rather than another item. */
.card--result {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.card--result:hover, .card--result.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Feature rows: name on the left, what it means on the right. */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  align-items: baseline;
  gap: clamp(1rem, 2.7vw, 3rem);
  padding: clamp(1.25rem, 2.16vw, 1.75rem) 0;
  border-bottom: 1px solid var(--line);
}
.row__name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.row__text {
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.08vw, 1.0625rem);
  line-height: 1.6;
  color: var(--ink-2);
}

/* Tags */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.chips li {
  padding: 0.55rem 1rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
}
/* A tag fills with the accent on hover. */
.page--screens .chips li {
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease);
}
.page--screens .chips li:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* Panels and two-up layouts */
.panel {
  padding: clamp(1.5rem, 2.7vw, 2.5rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 21.6px;
}
.panel--accent { border-top: 3px solid var(--accent); }
.panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.98vw, 1.9rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.panel p:not(.grid-intro) {
  margin-top: 0.9rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.panel .sec-actions { margin-top: clamp(1.5rem, 2.7vw, 2rem); }
.panel__title + .chips { margin-top: 1.1rem; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 3.6vw, 4rem);
}
/* Two boxes side by side at one height, each ending in its own actions. */
/* Boxes side by side keep the same gutter as every other box set (.steps,
   .cards), and a box pair under a row of steps sits that same distance below. */
.split--even { align-items: stretch; grid-auto-rows: 1fr; gap: clamp(1rem, 1.62vw, 1.5rem); }   /* equal when stacked, too */
.split--even > .panel { display: flex; flex-direction: column; }
.split--even > .panel .sec-actions { margin-top: auto; padding-top: clamp(1.5rem, 2.7vw, 2rem); }
.split + .split,
.cards + .split { margin-top: clamp(2.5rem, 4.5vw, 4rem); }
.steps + .split { margin-top: clamp(1rem, 1.62vw, 1.5rem); }   /* one set, continued */

.fineprint {
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-3);
}
.panel .fineprint { font-size: 0.9rem; color: var(--ink-3); }

/* Investor pipeline: stages on a track, the last one filled. */
.pipeline-block {
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
  padding: clamp(1.75rem, 3.15vw, 2.75rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 21.6px;
}
.pipeline-block__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.98vw, 1.85rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pipeline-block__note {
  margin-top: clamp(1.5rem, 2.7vw, 2rem);
  font-family: var(--font-ui);
  color: var(--ink-2);
}
.pipeline {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: clamp(1.75rem, 3.15vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.pipeline li {
  position: relative;
  padding-top: 1.9rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pipeline li::before {              /* the track */
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line);
}
.pipeline li:first-child::before { left: 50%; }
.pipeline li:last-child::before  { right: 50%; }
.pipeline li::after {               /* the node */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: -0.55rem;
  border: 2px solid var(--accent-ink);
  border-radius: 50%;
  background: var(--ground);
}
.pipeline li:last-child { color: var(--ink); }
.pipeline li:last-child::after { background: var(--accent-ink); }

/* A golf ball rolls the stages (main.js). Without JS or with reduced motion
   the static track above is the whole story. The wrapper is the stacking
   context that lets the filled track run between the line and the nodes. */
.pipeline-run { position: relative; z-index: 0; }
.pipeline-run .pipeline li::before { z-index: 0; }
.pipeline-run .pipeline li::after  { z-index: 2; }
.pipeline__fill {
  position: absolute;
  z-index: 1;
  border-radius: 2px;
  background: var(--accent-ink);
  pointer-events: none;
}
.pipeline__ball {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 1.6rem;
  height: 1.6rem;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
  pointer-events: none;
  will-change: transform;
}
.pipeline__ball svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* White like a real ball, with a dark rim so it holds on a white band. */
.pipeline__ball-body   { fill: #fff; stroke: #0A0A0A; }
.pipeline__ball-dimple { fill: #0A0A0A; }

/* While it runs, a stage stays unlit until the ball reaches it. */
.pipeline.is-live li { color: var(--ink-3); transition: color 0.3s ease; }
.pipeline.is-live li::after {
  background: var(--ground);
  transition: background-color 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pipeline.is-live li.is-reached { color: var(--ink); }
.pipeline.is-live li.is-reached::after { background: var(--accent-ink); }
.pipeline.is-live li.is-cup::after { transform: scale(1.45); }   /* the drop into the cup */

/* Connected flow: four stages, each feeding the next. */
.flow {
  --flow-gap: clamp(1.75rem, 2.7vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--flow-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow li {
  position: relative;
  padding: clamp(1.35rem, 2.07vw, 1.85rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16.2px;
}
.flow li + li::before {
  content: "\2192";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--flow-gap));
  width: var(--flow-gap);
  transform: translateY(-50%);
  text-align: center;
  font-size: 1.25rem;
  color: var(--accent-ink);
}
.flow__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--accent-ink);
}
.flow__name {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.53vw, 1.45rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.flow__text {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.975rem;
  color: var(--ink-2);
}

/* A closing line under a group. */
.statement { max-width: 774px; margin: clamp(2.5rem, 4.5vw, 4rem) auto 0; text-align: center; }
.statement__lead {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.25vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.statement__text {
  margin-top: 0.75rem;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.12vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Featured founder voices, each answering one part of the pitch. */
.voices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.75rem);
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
}
.voice {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(1.5rem, 2.34vw, 2.25rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 21.6px;
}
.voice__kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.voice blockquote { flex: 1; margin: 1rem 0 0; }
.voice blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.voice figcaption {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: clamp(1.5rem, 2.7vw, 2rem);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.voice figcaption img { width: 43.2px; height: 43.2px; border-radius: 50%; object-fit: cover; }
.voice__name { display: block; color: var(--ink); font-weight: 500; }

.cards--5 { --cols: 5; }

/* Checked and crossed lists. */
.marks { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.marks li {
  position: relative;
  padding-left: 1.75rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}
.marks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  font-weight: 600;
  color: var(--accent-ink);
}
.marks--x li { color: var(--ink-2); }
.marks--x li::before { content: "\2715"; color: var(--ink-3); }
.panel .marks { margin-top: 1rem; }

/* A "Built for" row of tags, centred under a page hero. */
.page-hero__tags { margin-top: clamp(2rem, 3.6vw, 2.75rem); }
.page-hero__tags .grid-intro { color: var(--ink-2); font-weight: 400; }
.page-hero__tags .chips { justify-content: center; }

/* Term-and-meaning pairs inside a panel. */
.terms { display: grid; gap: 0.9rem; margin: 1rem 0 0; }
.terms div { padding-top: 0.9rem; border-top: 1px solid var(--line); }
/* Name and meaning on one line. */
.terms--inline { gap: 0.5rem; }
.terms--inline div {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
  padding-top: 0.5rem;
}
.terms--inline dd { margin: 0; }
@media (max-width: 600px) { .terms--inline div { grid-template-columns: 1fr; gap: 0.2rem; } }
.syndicate-intro { margin-top: clamp(1.75rem, 3.15vw, 2.5rem); }
.terms dt { font-family: var(--font-ui); font-weight: 500; color: var(--ink); }
.terms dd { margin: 0.2rem 0 0; font-family: var(--font-ui); font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }

/* Chips inside a closing call to action. */
.cta-band .chips { justify-content: center; margin-top: clamp(1.25rem, 2.25vw, 1.75rem); }
.card .grid-intro { margin: 1.25rem 0 0.75rem; font-size: 0.95rem; }

/* Team page ---------------------------------------------------------------
   Each person is a card in the site's panel style: the photo runs edge to
   edge across the top, the name, role and bio sit in the padded body. */
/* Flex rather than grid so a short last row centres instead of leaving a gap. */
.team-grid {
  --cols: 3;
  --gap: clamp(1rem, 1.62vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;   /* a short last row sits left, under the cards above */
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.team-grid > .member { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
@media (min-width: 601px) {
  .team-grid { max-width: 80%; margin-inline: auto; }   /* cards about 20% smaller */
}
.member {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.member:hover, .member.is-active { background: var(--panel-hover); }
/* The homepage's pointer card (data-tilt): tilt, lift and glow, without
   the accent rule along the top. */
.member > .fx::before { content: none; }
.member__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;                   /* the headshots are square */
  object-fit: cover;
  background: var(--line);
}
.member__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 1.98vw, 1.75rem);
}
/* LinkedIn sits in the card's bottom-right corner, level across a row. */
.member__link { align-self: flex-end; margin-top: auto; padding-top: 0; }
.member__role {
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.member .card__text { margin-top: 0.85rem; margin-bottom: 0.5rem; }   /* tighter than the usual text-to-link gap */

/* Blog --------------------------------------------------------------------
   The index and post pages built by tools/blog/build.py. Everything reads the
   band tokens, so the article column works on the white band it sits on. */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.post-meta > * + *::before { content: "\00B7"; margin: 0 0.6rem; }
.post-author { margin-top: auto; font-family: var(--font-ui); font-size: 0.875rem; color: var(--ink-3); }

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.62vw, 1.5rem);
}
.post-card {
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.post-card:hover, .post-card.is-active { background: var(--panel-hover); }
/* The pointer card (data-tilt) tilt and lift only: no glow, and no top rule
   (the cover would hide it anyway). */
.post-card > .fx { display: none; }
.post-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.post-card__img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.post-card__body { flex: 1; display: flex; flex-direction: column; gap: 0.65rem; padding: clamp(1.1rem, 1.8vw, 1.5rem); }
.post-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.44vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.post-card__text {
  font-family: var(--font-ui);
  line-height: 1.55;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__text { font-size: 0.95rem; -webkit-line-clamp: 3; }

/* Subscribe form in the index hero. */
.blog-subscribe { max-width: 468px; margin: clamp(1.75rem, 3.15vw, 2.5rem) auto 0; justify-content: center; }
.blog-subscribe .btn { flex: 0 0 auto; }
.blog-subscribe__done { margin-top: 1rem; }

/* Pagination under the grid. */
.post-grid > [hidden] { display: none; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin-top: clamp(2rem, 3.6vw, 3rem); }
.pager > * {
  display: inline-grid; place-items: center;
  min-width: 2.75rem; height: 2.75rem; padding: 0 1rem;
  font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  transition: background-color 0.2s var(--ease);
}
.pager a:hover { background: var(--panel-hover); }
.pager [aria-current="page"] { color: var(--ground); background: var(--ink); border-color: var(--ink); }
.pager .is-disabled { opacity: 0.4; }

/* Post header */
.article-head__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.article-head__back:hover { opacity: 0.75; }
.article-head__title {
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.96vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: pretty;          /* fill the line; only avoid a lone last word */
}
.article-head__meta { margin-top: clamp(1rem, 1.8vw, 1.4rem); }
.article-cover { margin: clamp(2rem, 3.6vw, 3rem) 0 0; }
.article-cover img { display: block; width: 100%; height: auto; border-radius: clamp(14px, 1.8vw, 22px); }

/* Article body: one readable column on the white band. */
.article {
  max-width: 648px;
  margin-inline: auto;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: color-mix(in srgb, var(--ink) 86%, transparent);
}
.article > * { margin: 0; }
.article > * + * { margin-top: 1.25em; }
.article h2,
.article h3 { font-family: var(--font-display); font-weight: 400; color: var(--ink); text-wrap: balance; }
.article h2 { font-size: clamp(1.55rem, 2.34vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
.article h3 { font-size: clamp(1.25rem, 1.8vw, 1.45rem); line-height: 1.25; letter-spacing: -0.01em; }
.article h4,
.article h5 { font-family: var(--font-ui); font-weight: 600; font-size: 1.0625rem; color: var(--ink); }
.article > h2 { margin-top: 2.2em; }
.article > h3 { margin-top: 1.8em; }
.article > h4,
.article > h5 { margin-top: 1.6em; }
.article > :is(h2, h3, h4, h5) + * { margin-top: 0.6em; }
.article strong { font-weight: 600; color: var(--ink); }
/* The link colour alone is faint on white, so links keep an underline. */
.article a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article a:hover { text-decoration-thickness: 2px; }
.article ul,
.article ol { padding-left: 1.35em; }
.article li + li { margin-top: 0.45em; }
.article li::marker { color: var(--accent); }
.article blockquote {
  padding: 1.1em 1.3em;
  background: var(--panel);
  border-left: 3px solid var(--accent);
  border-radius: 0 10.8px 10.8px 0;
}
.article__figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10.8px;
}
.article figcaption { margin-top: 0.6em; font-size: 0.875rem; color: var(--ink-3); }
.article__video { position: relative; aspect-ratio: 16 / 9; }
.article__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.article .article__cta { margin-top: 1.75em; }
.article a.btn { color: #fff; text-decoration: none; }
.article__byline {
  max-width: 648px;
  margin: clamp(2.5rem, 4.5vw, 3.5rem) auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--ink-3);
}
.related { margin-top: clamp(3.5rem, 6.3vw, 5.5rem); }
.related__title { margin-bottom: clamp(1.5rem, 2.7vw, 2.25rem); }

/* Hero: two actions side by side. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 2.7vw, 2.25rem);
  margin-top: clamp(1.75rem, 3.15vw, 2.5rem);
}
.hero__actions .hero__cta { margin-top: 0; }

/* Homepage ticker: a slow mono loop between two hairlines, on the
   ecosystem's ground so it closes off the hero above. */
.ticker {
  position: relative;
  z-index: 1;                        /* over the field, like the sections */
  overflow: hidden;
  padding-block: clamp(0.9rem, 1.44vw, 1.15rem);
  background: var(--splash-bg-dim);
  border-block: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: marquee 45s linear infinite;
}
/* Spacing lives on each item (no gap), so the two halves are identical and
   the -50% loop lands exactly; see .marquee__track. */
.ticker__track li {
  display: flex;
  flex: none;
  align-items: center;
  font-family: var(--font-mono);
  font-size: calc(0.78rem + 2px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.62);
}
.ticker__track li::after {
  content: "";
  width: 4.5px;
  height: 4.5px;
  margin-inline: clamp(1.25rem, 2.34vw, 2.25rem);
  border-radius: 50%;
  background: var(--accent);
}
/* The dots take the six brand colours in turn (COLORS in hero-splash.js).
   The list has seven items and is doubled to loop, so the pattern repeats
   every seven to keep the seam exact: the seventh repeats masters, which
   sits apart from its own copy and from its neighbours either side. */
.ticker__track li:nth-child(7n+1)::after { background: #1ED2F4; }
.ticker__track li:nth-child(7n+2)::after { background: #F97D4A; }
.ticker__track li:nth-child(7n+3)::after { background: #DDF01A; }
.ticker__track li:nth-child(7n+4)::after { background: #9590FF; }
.ticker__track li:nth-child(7n+5)::after { background: #8DEBD1; }
.ticker__track li:nth-child(7n+6)::after { background: #D25AFF; }
.ticker__track li:nth-child(7n+7)::after { background: #DDF01A; }

/* 9. Testimonials (marquee) ---------------------------------------------- */
.marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee__track {
  display: flex;
  list-style: none;
  margin: 0;
  /* No gap and no side padding: the loop moves the track by -50%, which only
     lands exactly on the copy if the track is two identical halves. A gap
     leaves it one gap short of that, so it jumped a few px every loop. */
  padding: 0.75rem 0 1.75rem;        /* room for a hovered card's lift and shadow */
  animation: marquee 60s linear infinite;
}
.marquee__track > * { margin-right: var(--space-md); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.testimonial {
  flex: 0 0 auto;
  width: min(360px, 80vw);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  background: #fff;
  color: var(--text-on-light);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
/* On a white band the white card needs an edge instead of a shadow. */
.section--light .testimonial {
  background: #F6F7F8;
  border: 1px solid var(--line);
  box-shadow: none;
}
.testimonial__quote {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.9;
}
.testimonial__person { display: flex; align-items: center; gap: var(--space-sm); }
.testimonial__avatar { width: 4.5em; height: 4.5em; border-radius: 50%; object-fit: cover; }
.testimonial__name { font-weight: 500; line-height: 1.4; }
.testimonial__role { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.4; }
.testimonial__role em { color: var(--accent-testimonial); font-style: italic; }

/* 10. Subscribe ----------------------------------------------------------- */
.subscribe__panel {
  position: relative;
  overflow: hidden;
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(2rem, 3.6vw, 3.5rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: clamp(21.6px, 2.7vw, 32.4px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(1.5rem, 3.6vw, 3rem);
}
.subscribe__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.9em;
}
.subscribe__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.34vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.subscribe__title em { font-style: italic; color: var(--accent-ink); }
.subscribe__text {
  margin-top: 0.7em;
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 0.99vw, 1.0625rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 40ch;
}

.subscribe__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.subscribe__field { display: block; flex: 1 1 260px; }
.subscribe__input {
  width: 100%;
  padding: 0.95em 1.25em;
  /* Mixed from the band's ink, so the field reads on either ground. */
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  transition: border-color var(--dur), background-color var(--dur);
}
.subscribe__input::placeholder { color: var(--ink-3); }
.subscribe__input:focus {
  outline: none;
  border-color: var(--accent-ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.subscribe__success {
  display: none;
  grid-column: 1 / -1;
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.subscribe__form.is-done ~ .subscribe__success { display: block; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 11. Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--splash-bg-dim);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: clamp(3rem, 5.4vw, 5rem) var(--space-md) clamp(2rem, 2.7vw, 2.5rem);
}
/* The brand (logo, line, newsletter), then four columns that follow
   the nav: Founders, Investors, Events, Company. Every link goes to a page,
   so they all work from any page. */
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 3fr);
  gap: clamp(2.5rem, 5.4vw, 5rem);
  padding-bottom: clamp(2.5rem, 4.5vw, 4rem);
}
.footer__brand img { width: 189px; }
/* Locked up with the logo like the hero's wordmark and line: blue mono caps,
   tracked out by main.js (data-fit-to) to span the logo's width exactly.
   inline-block so it shrink-wraps and the natural width can be measured. */
.footer__tagline {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.footer__brand { display: block; width: max-content; }
/* the newsletter as one field with its button inside it */
.footer__news {
  display: flex;
  align-items: center;
  max-width: 320px;
  margin-top: 1.5rem;
  padding: 4px 4px 4px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: border-color var(--dur);
}
.footer__news:focus-within { border-color: var(--accent); }
.footer__news-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}
.footer__news-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.footer__news-btn {
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: filter var(--dur);
}
.footer__news-btn:hover { filter: brightness(1.1); }
.footer__news-done {
  display: none;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer__news.is-done + .footer__news-done { display: block; }
/* a signup that didn't reach the sheet: the same line, in the ventures orange */
.footer__news.is-error + .footer__news-done,
.subscribe__form.is-error ~ .subscribe__success { color: var(--orange); }
.page--home .footer__news,
.page--home .footer__news-done { display: none; }   /* the homepage has its own box */

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.7vw, 2.5rem);
}
.footer__col-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--space-md);
}
.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.footer__col a {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--dur);
}
.footer__col a:hover { color: var(--accent); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-top: clamp(1.5rem, 2.7vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.footer__legal { display: flex; gap: var(--space-md); }   /* copyright left, Terms and Privacy right */
.footer__legal a { transition: color var(--dur); }
.footer__legal a:hover { color: #fff; }

/* 12. Motion utilities ---------------------------------------------------- */
/* Hidden only when JS is present (html.js), so content never disappears
   if the script fails to load. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  /* main.js indexes siblings so a row of cards cascades instead of popping in
     together. Capped there, so a long list never runs up a visible delay. */
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Collapse the nav to the hamburger before the desktop links get tight.
   The pill shrinks to a compact centered capsule (brand + toggle). */
@media (max-width: 1080px) {
  .nav {
    width: fit-content;
    margin-inline: auto;
    padding: 7.2px 7.2px 7.2px 14.4px;
    gap: 9px;
  }
  .nav__menu,
  .nav__actions { display: none; }
  .nav__brand img { width: 135px; }
  .nav__hamburger { display: flex; }
}

@media (max-width: 1180px) {
  .steps,
  .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Half a step is too narrow for a six-stage track; stack the step. */
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* In two columns the third stage starts a new row, so its arrow would
     point back across the gap at nothing. */
  .flow li:nth-child(odd)::before { content: none; }
}

@media (max-width: 991px) {
  .team-grid { --cols: 2; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-head--split,
  .split { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--2 { grid-template-columns: 1fr; }
  .voices { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .flow li + li:nth-child(odd)::before { content: "\2193"; }
  .flow li + li::before {
    content: "\2193";
    top: calc(-1 * var(--flow-gap));
    left: 0;
    width: 100%;
    height: var(--flow-gap);
    transform: none;
    display: grid;
    place-items: center;
  }

  /* Stack the split; the white panel then bleeds both sides and rounds both
     top corners instead of just the one. */
    .audience { grid-template-columns: 1fr; }
  .story { grid-template-columns: 1fr; }
  .story--flip .story__video { order: 0; }
  .subscribe__panel { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process__steps { grid-template-columns: repeat(2, 1fr); }
  .values__grid { grid-template-columns: 1fr; }

  .ecosystem__head { grid-template-columns: 1fr; }
  .eco-grid { grid-template-columns: 1fr; }
  .eco-card { min-height: 0; padding: 28.8px 23.4px 25.2px; }

}

@media (max-width: 760px) {
  .row { grid-template-columns: 1fr; gap: 0.4rem; }
  /* Seven stages will not fit across a phone: run the track down the
     middle, the stages either side of it in turn. */
  .pipeline { grid-template-columns: 1fr; }
  .pipeline li { padding: 0 0 1.15rem; }
  .pipeline li:nth-child(odd)  { padding-right: calc(50% + 1.1rem); text-align: right; }
  .pipeline li:nth-child(even) { padding-left: calc(50% + 1.1rem); text-align: left; }
  .pipeline li::before,
  .pipeline li:first-child::before,
  .pipeline li:last-child::before {
    top: 0; bottom: 0; left: calc(50% - 1px); right: auto; width: 2px; height: auto;
  }
  .pipeline li:first-child::before { top: 0.55rem; }
  .pipeline li:last-child::before  { bottom: auto; height: 0.55rem; }
  .pipeline li::after { top: 0.05rem; left: 50%; margin-left: -0.55rem; }
}

@media (max-width: 600px) {
  .team-grid { --cols: 1; }
  .post-grid { grid-template-columns: 1fr; }
  .steps,
  .cards,
  .cards--4,
  .cards--5 { grid-template-columns: 1fr; }
  .process__steps { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .footer__top { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track,
  .ticker__track { animation: none; }
  .nav__mobile,
  .nav__mobile.is-open,
  .nav__mobile > *,
  .nav__mobile.is-open > * { transition: none; transform: none; transition-delay: 0s; }
  .nav__hamburger span { transition: none; }
}