/* Self-hosted webfonts.
 *
 * These used to come from fonts.googleapis.com, which put a render-blocking
 * cross-origin request in front of every page: DNS and TLS to googleapis,
 * then the CSS, then DNS and TLS to gstatic, then the font files. Lighthouse
 * measured that chain at 310ms on desktop and 1,050ms on throttled mobile.
 *
 * Serving them from our own origin removes the whole chain. There is no
 * cache-sharing argument left for the Google CDN either, since browsers
 * partitioned the HTTP cache per site in 2020.
 *
 * latin and latin-ext only. Regenerate with gen_fonts.py if a weight is added.
 */

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/manrope-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/manrope-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/manrope-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/manrope-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/manrope-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/manrope-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: #0a0908;
  color: #ede6d8;
  font-family: 'Manrope', -apple-system, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

:root {
  --bg: #0a0908;
  --surface: #141210;
  --surface-2: #1a1815;
  --border: rgba(237,230,216,0.06);
  --border-mid: rgba(237,230,216,0.12);
  --text: #ede6d8;
  --text-dim: rgba(237,230,216,0.6);
  --text-faint: rgba(237,230,216,0.55);
  --accent: #c8392e;
  /* #c8392e is 3.87:1 on --bg, below AA for text under 18px.
     This step clears 4.5:1 on --bg, --surface and --surface-2, and is
     used for body links and small copy. */
  --accent-text: #d25d54;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Manrope', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --max-w: 1180px;
  --px: 56px;
  --py: 96px;
  --section-py: 72px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 1024px) { :root { --px: 40px; --py: 80px; --section-py: 56px; } }
@media (max-width: 768px)  { :root { --px: 24px; --py: 60px; --section-py: 48px; } }
@media (max-width: 480px)  { :root { --px: 18px; --py: 48px; --section-py: 38px; } }

html { scroll-padding-top: 88px; }
section[id], #book { scroll-margin-top: 88px; }

/* Scoped to the top-level site nav. A bare `nav` selector would also capture
   nested landmarks such as the table of contents on article pages. */
body > nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(10,9,8,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--px); height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-mark { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -0.02em; text-transform: none; line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { font-size: 13px; font-weight: 600; color: var(--text-dim); transition: color 0.3s; }
.nav-links a:hover { color: var(--text); }
/* Nine items including the CTA need 732px at the full gap, and the bar has
   about 731px to give just above the mobile breakpoint. */
@media (max-width: 1080px) { .nav-links { gap: 24px; } }
.nav-cta { background: var(--accent); color: #fff; border: 1px solid var(--accent); padding: 9px 22px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.3s; }
.nav-cta:hover { background: transparent; color: var(--accent-text); }
.hamburger { display: none; background: none; border: none; width: 28px; height: 28px; padding: 6px; flex-direction: column; justify-content: space-between; }
.hamburger span { display: block; height: 1.5px; background: var(--text); width: 100%; }
/* 900px, matching the breakpoint where .nav-drop goes static below. These
   were 768 and 900, so between them the dropdown rendered its stacked mobile
   form inside a nav that was still horizontal, and the links overflowed the
   bar. Both now switch at the same width. */
@media (max-width: 900px) {
  .nav-inner { height: 60px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }

  /* Fixed, not absolute: the panel must stay put while the page is locked
     behind it. Capped to the viewport and scrollable, because eight items
     plus a CTA do not fit on a small phone. */
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; top: 60px; left: 0; right: 0;
    max-height: calc(100dvh - 60px);
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: rgba(10,9,8,0.98);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 8px var(--px) calc(20px + env(safe-area-inset-bottom));
    gap: 0;
  }
  .nav-links.open a {
    font-size: 16px; color: var(--text);
    min-height: 52px; display: flex; align-items: center;
    border-bottom: 1px solid var(--border);
    padding: 0; text-align: left;
  }
  .nav-links.open a:last-of-type { border-bottom: none; }
  .nav-links.open a:active { color: var(--accent-text); }
  .nav-links.open .nav-cta {
    width: 100%; text-align: center; padding: 16px 24px;
    font-size: 12px; margin-top: 16px; min-height: 52px;
  }
}

/* Page behind the open panel must not scroll. */
body.menu-open { overflow: hidden; }

/* 28px of bars inside a 44px target -- the visual stays, the tap area grows. */
.hamburger {
  width: 44px; height: 44px; padding: 14px 8px;
  margin-right: -8px; align-items: stretch;
}
.hamburger span { transition: transform 0.3s var(--ease), opacity 0.2s; transform-origin: center; }
.hamburger.open span:nth-child(1) { transform: translateY(7.25px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7.25px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .hamburger span { transition: none; }
}

.hero { padding: 128px var(--px) calc(var(--py) * 0.65); text-align: center; max-width: var(--max-w); margin: 0 auto; }
.hero-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 36px; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 8vw, 96px); line-height: 1.0; letter-spacing: -0.035em; margin-bottom: 28px; text-wrap: balance; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero-sub { font-size: clamp(16px, 1.4vw, 18px); font-weight: 400; color: var(--text-dim); line-height: 1.65; max-width: 640px; margin: 0 auto 40px; text-wrap: pretty; }
.hero-sub strong { color: #ffffff; font-weight: 600; }
.hero-actions { display: inline-flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
.btn-primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); padding: 16px 38px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; transition: all 0.5s var(--ease); display: inline-block; min-height: 48px; }
.btn-primary:hover { background: transparent; color: var(--accent-text); }
.btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border-mid); padding: 16px 38px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; transition: all 0.5s var(--ease); display: inline-block; min-height: 48px; }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-text); }
.hero-stat { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); margin-top: 40px; line-height: 1.6; }
@media (max-width: 768px) {
  .hero { padding: 96px 16px 44px; }
  .hero-eyebrow { margin-bottom: 24px; font-size: 10px; }
  .hero h1 { margin-bottom: 20px; letter-spacing: -0.035em; }
  .hero-sub { margin-bottom: 28px; padding: 0 8px; }
  .hero-actions { gap: 12px; }
  .btn-primary, .btn-secondary { padding: 15px 34px; }
  .hero-stat { font-size: 10px; margin-top: 28px; letter-spacing: 0.16em; }
}
@media (max-width: 480px) {
  .hero { padding: 88px 10px 36px; }
  .hero h1 { font-size: 36px; letter-spacing: -0.04em; line-height: 1.02; }
  .hero-sub { font-size: 15px; padding: 0 10px; }
  .hero-actions { flex-direction: column; gap: 10px; width: 100%; }
  .hero-actions a { width: 100%; }
  .btn-primary, .btn-secondary { width: 100%; }
  .hero-stat { font-size: 9.5px; letter-spacing: 0.12em; padding: 0 10px; }
}

.hype-section { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px) calc(var(--py) * 0.65); }
.hype-wrap { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; position: relative; cursor: pointer; }
.hype-video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }
.hype-mute { position: absolute; top: 14px; right: 14px; height: 38px; padding: 0 14px 0 12px; border-radius: 20px; background: rgba(0,0,0,0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.22); display: flex; align-items: center; gap: 8px; cursor: pointer; z-index: 3; font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: #fff; transition: background 0.25s, border-color 0.25s, transform 0.4s var(--ease); animation: muteFadeIn 0.6s var(--ease) 0.4s backwards; }
@keyframes muteFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.hype-mute:hover { background: rgba(0,0,0,0.85); border-color: rgba(255,255,255,0.4); transform: translateY(-1px); }
.hype-mute svg { width: 14px; height: 14px; fill: #fff; flex-shrink: 0; }
.hype-mute .label-muted { display: inline; }
.hype-mute .label-unmuted { display: none; }
.hype-mute .icon-unmuted { display: none; }
.hype-mute.unmuted .icon-muted { display: none; }
.hype-mute.unmuted .icon-unmuted { display: inline-block; }
.hype-mute.unmuted .label-muted { display: none; }
.hype-mute.unmuted .label-unmuted { display: inline; font-size: 9.5px; opacity: 0.85; }
.hype-mute.unmuted { padding: 0 12px; }

/* The reel is 2.5MB. It buffers quietly and waits to be started rather than
   playing itself, using the same control as the launch cards. */
.hype-play {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px;
  border-radius: 50%; background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.5); padding: 0; cursor: pointer; z-index: 3;
  transition: background 0.25s, transform 0.3s var(--ease), opacity 0.3s;
}
.hype-play::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; margin-left: 28px;
  border-left: 20px solid #fff;
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.hype-wrap:hover .hype-play { background: rgba(0,0,0,0.8); transform: scale(1.06); }
.hype-wrap.playing .hype-play, .hype-wrap.buffering .hype-play { opacity: 0; pointer-events: none; }
.hype-wrap:not(.started) .hype-mute { display: none; }
.hype-spin {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #fff; opacity: 0; pointer-events: none; z-index: 3;
  /* Same footprint and the same dark disc as the play button, so the swap
     reads as one control and the ring stays visible on a bright frame. */
  background: rgba(0,0,0,0.55); background-clip: padding-box;
}
.hype-wrap.buffering .hype-spin { opacity: 1; animation: hypeSpin 0.9s linear infinite; }
@keyframes hypeSpin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .hype-play { width: 56px; height: 56px; }
  .hype-play::after { margin-left: 22px; border-left: 15px solid #fff;
    border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
  .hype-spin { width: 56px; height: 56px; }
}
@media (max-width: 768px) {
  .hype-section { padding: 0 var(--px) 48px; }
  .hype-wrap { border-radius: 12px; }
  .hype-mute { top: 10px; right: 10px; height: 34px; padding: 0 12px 0 10px; font-size: 9.5px; }
  .hype-mute svg { width: 13px; height: 13px; }
}

.metrics { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.metrics-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px); display: grid; grid-template-columns: repeat(3, 1fr); }
.metrics-inner.metrics-four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .metrics-inner.metrics-four { grid-template-columns: repeat(2, 1fr); } .metrics-inner.metrics-four .metric:nth-child(2) { border-right: none; } }
.metric { padding: 36px 0; text-align: center; border-right: 1px solid var(--border); }
.metric:last-child { border-right: none; }
.metric-value { font-family: var(--serif); font-size: clamp(36px, 4vw, 56px); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 8px; line-height: 1; }
.metric-label { font-family: var(--mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.3em; text-transform: uppercase; }
@media (max-width: 768px) { .metric { padding: 26px 0; } .metric-value { font-size: 32px; } .metric-label { font-size: 9px; letter-spacing: 0.25em; } }
@media (max-width: 480px) { .metric { padding: 20px 4px; } .metric-value { font-size: 24px; margin-bottom: 6px; } .metric-label { font-size: 7.5px; letter-spacing: 0.18em; } }

.trusted { margin: 0 auto; padding: 56px 0 28px; text-align: center; }
.trusted-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 32px; line-height: 1.7; max-width: 480px; margin-left: auto; margin-right: auto; padding: 0 var(--px); }
.trusted-item { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; }
.trusted-logo { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; border-radius: 20px; overflow: hidden; background: #f5f1e8; padding: 14px;
  box-shadow: 0 0 0 1px rgba(237,230,216,0.07), 0 10px 26px -14px rgba(0,0,0,0.95);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.trusted-logo.no-bg { background: transparent; padding: 0; }
.trusted-item:hover .trusted-logo { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(237,230,216,0.2), 0 18px 36px -16px rgba(0,0,0,1); }
.trusted-logo img { width: 100%; height: 100%; object-fit: contain; }
.trusted-logo.no-bg img { object-fit: cover; border-radius: 20px; }
.trusted-name { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(237,230,216,0.62); margin-top: 12px; transition: color 0.4s var(--ease); }
.trusted-item:hover .trusted-name { color: var(--text); }
.trusted-fund { margin-top: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); font-weight: 500; white-space: nowrap; }
.trusted-more { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; color: var(--text-dim); font-style: italic; margin-top: 22px; padding: 0 var(--px); }

/* Marquee shared by the client wall and the backer row. Each track holds the
   full set twice; the -50% translate lands exactly on the clone, so the loop
   is seamless. One set is ~2400px, wider than any container, so no gap opens. */
.logo-marquee { position: relative; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%); }
.logo-track { display: flex; align-items: flex-start; width: max-content; will-change: transform; }
.logo-track-l { animation: logoScrollL 68s linear infinite; }
.logo-track-r { animation: logoScrollR 82s linear infinite; }
@keyframes logoScrollL { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes logoScrollR { from { transform: translateX(-50%); }   to { transform: translateX(0); } }
/* Hover no longer stops the marquee. Focus still does, so a keyboard user
   can reach a logo without it sliding away from them. */
.logo-marquee:focus-within .logo-track { animation-play-state: paused; }
.logo-track .trusted-item { flex: 0 0 auto; width: 126px; margin-right: 48px; }

.backers { margin: 0 auto; padding: 40px 0 56px; text-align: center; }
.backers-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 26px; padding: 0 var(--px); }
.backer-item { flex: 0 0 auto; display: inline-flex; align-items: center; font-family: var(--serif);
  font-size: clamp(21px, 2.1vw, 29px); letter-spacing: -0.01em; line-height: 1;
  color: rgba(237,230,216,0.52); white-space: nowrap; text-decoration: none;
  transition: color 0.4s var(--ease); }
.backer-item:hover { color: var(--text); }
.backer-item::after { content: '\00b7'; margin: 0 42px; color: rgba(237,230,216,0.16); font-size: 0.85em; }
/* Each mark carries its own --bh, derived from the ink height of its artwork so
   an 11:1 wordmark and a square mark read at the same optical weight.
   brightness(0) invert(1) flattens every brand colour to the wall's white. */
.backer-logo { display: block; height: var(--bh, 26px); width: auto;
  opacity: 0.58; filter: brightness(0) invert(1);
  transition: opacity 0.4s var(--ease); }
.backer-item:hover .backer-logo { opacity: 1; }

@media (max-width: 768px) {
  .trusted { padding: 40px 0 24px; } .trusted-label { margin-bottom: 22px; font-size: 9.5px; }
  .trusted-logo { width: 72px; height: 72px; padding: 12px; border-radius: 16px; }
  .trusted-logo.no-bg img { border-radius: 16px; }
  .trusted-name { font-size: 9px; } .trusted-more { margin-top: 20px; }
  .logo-track .trusted-item { width: 104px; margin-right: 34px; }
  .logo-track-l { animation-duration: 52s; } .logo-track-r { animation-duration: 62s; }
  /* The fade has to be wider than one tile or the edge logo reads as clipped. */
  .logo-marquee { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
                          mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
  .backers { padding: 12px 0 40px; } .backers-label { font-size: 9.5px; margin-bottom: 20px; }
  .backer-item { font-size: 20px; } .backer-item::after { margin: 0 28px; }
  .backer-logo { height: calc(var(--bh, 26px) * 0.82); }
}
@media (max-width: 480px) {
  .trusted-logo { width: 60px; height: 60px; padding: 10px; border-radius: 14px; }
  .trusted-logo.no-bg img { border-radius: 14px; }
  .trusted-name { font-size: 8px; letter-spacing: 0.12em; margin-top: 10px; }
  .trusted-fund { font-size: 8px; letter-spacing: 0.04em; margin-top: 4px; }
  .logo-track .trusted-item { width: 88px; margin-right: 26px; }
  .backer-item { font-size: 18px; } .backer-item::after { margin: 0 22px; }
  .backer-logo { height: calc(var(--bh, 26px) * 0.72); }
  .logo-marquee { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
                          mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
  .logo-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none;
    scrollbar-width: none; }
  .logo-marquee::-webkit-scrollbar { display: none; }
}

.section { max-width: var(--max-w); margin: 0 auto; padding: var(--section-py) var(--px); }
.section-header { text-align: center; margin-bottom: 48px; }
.section-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 20px; }
.section-heading { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -0.03em; max-width: 760px; margin: 0 auto 20px; text-wrap: balance; }
.section-heading em { font-style: italic; color: var(--accent); }
.section-desc { font-size: 15px; color: var(--text-dim); line-height: 1.7; max-width: 580px; margin: 0 auto; text-wrap: pretty; }
@media (max-width: 768px) { .section-header { margin-bottom: 32px; } .section-eyebrow { margin-bottom: 14px; } .section-heading { font-size: 28px; line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 14px; } .section-desc { font-size: 14px; line-height: 1.6; } }
@media (max-width: 480px) { .section-header { margin-bottom: 28px; } .section-heading { font-size: 26px; } }

.tweets-section { padding-bottom: 24px; }
.x-carousel { position: relative; overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.x-track { display: flex; align-items: stretch; width: max-content; animation: xScroll 95s linear infinite; will-change: transform; }
@keyframes xScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.x-track .x-card { flex: 0 0 360px; width: 360px; margin-right: 20px; display: flex; flex-direction: column; }
.x-track .x-card .x-stats { margin-top: auto; }
.x-card { background: #16181c; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 18px 20px 14px; display: block; text-decoration: none; color: #e7e9ea; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.x-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.x-avatar { width: 44px; height: 44px; border-radius: 50%; background: #1f2126; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: 18px; color: #fff; overflow: hidden; }
.x-avatar img { width: 100%; height: 100%; object-fit: cover; }
.x-meta { flex: 1; min-width: 0; }
.x-name-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 15px; line-height: 1.2; }
.x-name { font-weight: 700; color: #e7e9ea; }
.x-verified { display: inline-flex; align-items: center; flex-shrink: 0; }
.x-verified svg { width: 18px; height: 18px; }
.x-handle { font-size: 14px; color: #82868b; font-weight: 400; }
.x-dot { color: #82868b; font-size: 14px; }
.x-date { font-size: 14px; color: #82868b; font-weight: 400; }
.x-logo { margin-left: auto; flex-shrink: 0; width: 22px; height: 22px; }
.x-logo svg { width: 100%; height: 100%; fill: #e7e9ea; }
.x-body { font-size: 15px; line-height: 1.45; color: #e7e9ea; white-space: pre-wrap; word-wrap: break-word; margin-bottom: 14px; }
.x-video-wrap { position: relative; border-radius: 16px; overflow: hidden; background: #000; margin-bottom: 12px; aspect-ratio: 16 / 9; }
.x-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.x-stats { display: flex; align-items: center; gap: 0; padding-top: 4px; }
.x-stat { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #82868b; flex: 1; min-width: 0; }
.x-stat svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }
.x-stat-views { margin-left: auto; flex: 0 0 auto; }
@media (max-width: 768px) { .x-track .x-card { flex: 0 0 300px; width: 300px; margin-right: 16px; } }
@media (max-width: 480px) { .x-track .x-card { flex: 0 0 280px; width: 280px; margin-right: 14px; } }
@media (prefers-reduced-motion: reduce) { .x-track { animation: none; } .x-carousel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } }
@media (max-width: 480px) { .x-card { padding: 16px; } .x-body { font-size: 14.5px; } .x-stat { font-size: 12.5px; gap: 5px; } .x-stat svg { width: 16px; height: 16px; } }

.case-section { max-width: var(--max-w); margin: 0 auto; padding: calc(var(--section-py) * 0.5) var(--px); }
.cs-card { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 44px 0; display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: center; text-align: left; }
.cs-card.cs-reverse .cs-media { order: 2; }
.cs-card.cs-reverse .cs-copy { order: 1; }
.cs-media { border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; border: 1px solid var(--border); }
.cs-media video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.cs-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 16px; }
.cs-title { font-family: var(--serif); font-size: clamp(28px, 3.2vw, 40px); font-weight: 400; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 14px; text-wrap: balance; }
.cs-text { font-size: 15px; color: var(--text-dim); line-height: 1.7; margin: 0; max-width: 560px; }
.cs-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 24px; margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--border); align-items: start; }
.cs-stat-value { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; letter-spacing: -0.02em; line-height: 1; margin-bottom: 7px; }
.section-cta { text-align: center; padding: 8px var(--px) 40px; }
.cs-stat-label { font-family: var(--mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.3em; text-transform: uppercase; line-height: 1.5; }
.cs-card.cs-cold { grid-template-columns: 1fr; text-align: center; gap: 0; }
.cs-card.cs-cold .cs-text { margin: 0 auto; max-width: 640px; }
.cs-card.cs-cold .cs-stats { grid-template-columns: repeat(4, 1fr); max-width: 760px; margin: 28px auto 0; }
@media (max-width: 768px) { .cs-card { grid-template-columns: 1fr; gap: 22px; padding: 28px 0; text-align: center; } .cs-card.cs-reverse .cs-media { order: 1; } .cs-card.cs-reverse .cs-copy { order: 2; } .cs-media { border-radius: 12px; } .cs-title { font-size: 24px; margin: 0 auto 12px; } .cs-text { font-size: 14px; line-height: 1.6; margin: 0 auto; } .cs-eyebrow { margin-bottom: 12px; } .cs-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; padding-top: 18px; } .cs-card.cs-cold .cs-stats { grid-template-columns: repeat(2, 1fr); } .cs-stat-value { font-size: 22px; } .cs-stat-label { font-size: 8px; letter-spacing: 0.14em; } .section-cta { padding: 8px var(--px) 32px; } }
@media (max-width: 480px) { .cs-stats { gap: 8px; } .cs-stat-value { font-size: 19px; } .cs-stat-label { font-size: 7px; letter-spacing: 0.1em; } }

.services-section { max-width: var(--max-w); margin: 0 auto; padding: var(--section-py) var(--px); }
.services-list { border-top: 1px solid var(--border); }
.service-row { display: grid; grid-template-columns: 120px 1fr 1.15fr; gap: 44px; padding: 36px 0; border-bottom: 1px solid var(--border); align-items: start; }
.service-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-faint); padding-top: 9px; }
.service-title { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 8px; }
.service-hook { font-family: var(--serif); font-style: italic; font-size: 16.5px; color: var(--text-dim); line-height: 1.45; }
.service-text { font-size: 14.5px; color: var(--text-dim); line-height: 1.65; margin-bottom: 14px; }
.service-tags { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); line-height: 2; }
.service-tags span + span::before { content: '\00b7'; margin: 0 10px; color: var(--text-faint); }
@media (max-width: 900px) { .service-row { grid-template-columns: 90px 1fr; gap: 20px 28px; } .service-row > div:last-child { grid-column: 2; } }
@media (max-width: 600px) { .service-row { grid-template-columns: 1fr; gap: 8px; padding: 26px 0; text-align: center; } .service-row > div:last-child { grid-column: auto; } .service-num { padding-top: 0; margin-bottom: 4px; } .service-title { font-size: 22px; margin-bottom: 6px; } .service-hook { font-size: 15px; margin-bottom: 8px; } .service-text { font-size: 13.5px; line-height: 1.6; margin-bottom: 10px; } }

.playbook-section { max-width: var(--max-w); margin: 0 auto; padding: var(--section-py) var(--px); }
.playbook-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.playbook-card { padding: 28px 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease); }
.playbook-card:hover { border-color: var(--border-mid); transform: translateY(-3px); }
.playbook-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.25em; color: var(--accent-text); margin-bottom: 16px; }
.playbook-title { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -0.015em; margin-bottom: 10px; line-height: 1.2; }
.playbook-text { font-size: 14px; color: var(--text-dim); line-height: 1.6; }
@media (max-width: 900px) { .playbook-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 600px) { .playbook-grid { grid-template-columns: 1fr; gap: 14px; } .playbook-card { padding: 22px 20px; text-align: center; } .playbook-num { margin-bottom: 12px; } .playbook-title { font-size: 20px; margin-bottom: 8px; } .playbook-text { font-size: 13.5px; line-height: 1.55; } }

.arc-section { max-width: var(--max-w); margin: 0 auto; padding: var(--section-py) var(--px); }
.arc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.arc-step { padding: 28px 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease); display: flex; flex-direction: column; }
.arc-step:hover { border-color: var(--border-mid); transform: translateY(-3px); }
.arc-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.25em; color: var(--accent-text); margin-bottom: 6px; }
.arc-when { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 16px; }
.arc-title { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -0.015em; margin-bottom: 10px; line-height: 1.2; }
.arc-text { font-size: 14px; color: var(--text-dim); line-height: 1.6; }
@media (max-width: 1024px) { .arc-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 600px) { .arc-grid { grid-template-columns: 1fr; gap: 14px; } .arc-step { padding: 22px 20px; text-align: center; } .arc-title { font-size: 20px; margin-bottom: 8px; } .arc-text { font-size: 13.5px; line-height: 1.55; } }

.thesis-section { max-width: 1180px; margin: 0 auto; padding: var(--section-py) var(--px); }
.thesis-header { margin-bottom: 48px; }
.thesis-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .thesis-grid { grid-template-columns: 1fr; gap: 36px; } }
.thesis-copy h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 20px; text-wrap: balance; }
.thesis-copy p { font-size: 15px; color: var(--text-dim); line-height: 1.7; margin-bottom: 18px; }
.thesis-copy p strong { color: var(--text); font-weight: 600; }
@media (max-width: 768px) { .thesis-header { margin-bottom: 28px; } .thesis-copy { text-align: center; } .thesis-copy h3 { font-size: 26px; margin-bottom: 14px; } .thesis-copy p { font-size: 14px; line-height: 1.6; margin-bottom: 14px; } }

.chart-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px; position: relative; min-height: 420px; }
.chart-title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.chart-subtitle { font-family: var(--serif); font-size: 18px; color: var(--text); margin-bottom: 24px; }
.chart-svg { width: 100%; height: auto; display: block; }
@media (max-width: 768px) { .chart-wrap { padding: 18px; min-height: 0; border-radius: 12px; } .chart-subtitle { font-size: 16px; margin-bottom: 14px; } .chart-title { font-size: 9px; letter-spacing: 0.25em; } }
@media (max-width: 480px) { .chart-wrap { padding: 14px; } .chart-svg .chart-annotation { font-size: 11px; } }

.replay-btn { position: absolute; top: 24px; right: 24px; background: transparent; border: 1px solid var(--border-mid); color: var(--text-dim); padding: 6px 14px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; transition: all 0.3s; cursor: pointer; }
.replay-btn:hover { border-color: var(--accent); color: var(--accent-text); }
@media (max-width: 768px) { .replay-btn { top: 14px; right: 14px; padding: 5px 12px; font-size: 8px; } }

.chart-annotation { font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; fill: var(--text-faint); }
.chart-annotation.live { fill: var(--accent); }

.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-h { margin: 0; font: inherit; }
.faq-q { width: 100%; background: none; border: none; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; color: var(--text); font-family: var(--serif); font-weight: 400; font-size: 19px; text-align: left; gap: 24px; line-height: 1.4; min-height: 56px; }
.faq-q:hover { color: var(--text-dim); }
.faq-plus { width: 12px; height: 12px; flex-shrink: 0; position: relative; transition: transform 0.4s var(--ease); }
.faq-plus::before, .faq-plus::after { content: ''; position: absolute; background: var(--text-dim); top: 50%; left: 50%; }
.faq-plus::before { width: 12px; height: 1px; transform: translate(-50%, -50%); }
.faq-plus::after { width: 1px; height: 12px; transform: translate(-50%, -50%); transition: transform 0.4s; }
.faq-item.open .faq-plus::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-item.open .faq-plus::before { background: var(--accent); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease), padding-bottom 0.4s; }
.faq-item.open .faq-a { max-height: 640px; padding-bottom: 24px; }
.faq-a p { font-size: 14px; color: var(--text-dim); line-height: 1.75; max-width: 580px; }
.faq-a p + p { margin-top: 12px; }
@media (max-width: 768px) {
  .faq-q { font-size: 16.5px; padding: 18px 0; gap: 16px; text-align: center; justify-content: center; position: relative; padding-right: 28px; min-height: 0; }
  .faq-plus { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .faq-item.open .faq-a { padding-bottom: 18px; }
  .faq-a p { font-size: 13.5px; line-height: 1.6; text-align: center; margin: 0 auto; }
}

.book-section { max-width: var(--max-w); margin: 0 auto; padding: calc(var(--section-py) * 0.35) var(--px) calc(var(--section-py) * 0.85); }
/* The FAQ runs straight into the booking block; two full section paddings stacked read as a hole in the page. */
#faq.section { padding-bottom: 32px; }
.book-header { text-align: center; margin-bottom: 40px; }
.book-header h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 16px; text-wrap: balance; }
.book-header p { font-size: 15px; color: var(--text-dim); line-height: 1.65; max-width: 580px; margin: 0 auto; }
/* No frame of its own: Calendly draws a white panel with its own rounded
   corners, and a dark bordered card around it showed as a gutter above and a
   box inside a box. The panel sits on the page; the homepage stand-in keeps
   its own frame below. */
.cal-wrap { display: flex; justify-content: center; }
.cal-wrap > div { width: 100%; margin: 0; }
.calendly-inline-widget iframe { display: block; }
/* Calendly's booking iframe takes roughly three and a half seconds to paint,
   and the container was empty for all of it, so the page read as broken
   rather than loading. The iframe covers this once it mounts. */
/* The panel standing in for the scheduler on the homepage. Same box, same
   height, so swapping the real widget in shifts nothing. */
.cal-facade {
  width: 100%; min-height: 520px; margin: 0;
  border: 1px solid var(--border-mid); border-radius: 16px; background: var(--surface);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px 28px; gap: 4px;
}
.cal-facade-title {
  font-family: var(--serif); font-size: 30px; line-height: 1.2;
  color: var(--text); margin: 0 0 10px;
}
.cal-facade-note {
  font-size: 14.5px; line-height: 1.6; color: var(--text-dim);
  max-width: 420px; margin: 0 0 24px;
}
.cal-facade-alt { font-size: 13px; color: var(--text-faint); margin: 18px 0 0; }
.cal-facade-alt a { color: var(--text-dim); text-decoration: underline; }
.cal-facade-alt a:hover { color: var(--text); }
@media (max-width: 768px) {
  .cal-facade { min-height: 480px; padding: 32px 20px; }
  .cal-facade-title { font-size: 25px; }
  .cal-facade-note { font-size: 13.5px; }
}
@media (max-width: 480px) { .cal-facade { min-height: 680px; } }

.calendly-inline-widget:empty { position: relative; }
.calendly-inline-widget:empty::after {
  content: "Loading the scheduler";
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-faint);
  animation: calPulse 1.6s ease-in-out infinite;
}
@keyframes calPulse { 0%, 100% { opacity: 0.45 } 50% { opacity: 0.9 } }
@media (prefers-reduced-motion: reduce) {
  .calendly-inline-widget:empty::after { animation: none; opacity: 0.7 }
}
.book-email { text-align: center; margin-top: 28px; font-size: 14px; color: var(--text-dim); }
.book-email a { color: var(--accent-text); font-weight: 600; transition: opacity 0.3s; }
.book-email a:hover { text-decoration: underline; }
@media (max-width: 768px) { .book-header { margin-bottom: 24px; } .book-header h2 { font-size: 32px; margin-bottom: 12px; } .book-header p { font-size: 14px; line-height: 1.6; } .cal-wrap { min-height: 720px; border-radius: 12px; } .cal-wrap > div { min-height: 720px; } .book-email { margin-top: 20px; font-size: 13.5px; } }
@media (max-width: 480px) { .book-header h2 { font-size: 28px; } .cal-wrap { min-height: 680px; } .cal-wrap > div { min-height: 680px; } }

footer { border-top: 1px solid var(--border); }
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 36px var(--px); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px 32px; }
.footer-mark { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-links { display: flex; gap: 14px 26px; align-items: center; flex-wrap: wrap; }
.footer-links a { font-family: var(--mono); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-dim); transition: color 0.3s; }
.footer-links a:hover { color: var(--text); }
.footer-bottom { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px) 28px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); }
@media (max-width: 768px) {
  .footer-inner { flex-direction: column; gap: 18px; align-items: center; text-align: center; padding: 28px var(--px) 18px; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 14px; font-size: 9px; }
  .footer-links a { font-size: 9px; letter-spacing: 0.18em; }
  .footer-bottom { text-align: center; padding: 0 var(--px) 24px; }
}
@media (max-width: 380px) {
  .footer-links { gap: 10px; }
  .footer-links a { font-size: 8.5px; letter-spacing: 0.15em; }
}

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.vis { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   Article pages -- long-form cluster content.
   Reuses the homepage tokens above so the two never drift apart.
   ========================================================================== */

.doc-main { padding-top: 64px; }

.breadcrumb {
  max-width: 700px; margin: 0 auto; padding: 40px var(--px) 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-faint);
}
.breadcrumb a { color: var(--text-faint); transition: color 0.3s; }
.breadcrumb a:hover { color: var(--accent-text); }
.breadcrumb span { margin: 0 8px; opacity: 0.5; }

.doc-hero { max-width: 700px; margin: 0 auto; padding: 28px var(--px) 0; }
.doc-hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 5.2vw, 60px); line-height: 1.03;
  letter-spacing: -0.032em; margin-bottom: 22px; text-wrap: balance;
}
.doc-hero h1 em { font-style: italic; color: var(--accent); }
.doc-standfirst {
  font-size: clamp(16px, 1.5vw, 19px); color: var(--text-dim);
  line-height: 1.65; text-wrap: pretty; margin-bottom: 26px;
}
.doc-standfirst strong { color: #fff; font-weight: 600; }
.doc-meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-faint);
  padding-bottom: 34px; border-bottom: 1px solid var(--border);
}

/* Table of contents */
.doc-toc {
  max-width: 700px; margin: 36px auto; padding: 26px 30px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.doc-toc h2 {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 16px;
}
.doc-toc ol { list-style: none; counter-reset: toc; }
.doc-toc li { counter-increment: toc; margin-bottom: 9px; padding-left: 30px; position: relative; }
.doc-toc li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--mono); font-size: 10px; color: var(--accent-text);
}
.doc-toc a { font-size: 14.5px; color: var(--text-dim); transition: color 0.3s; }
.doc-toc a:hover { color: var(--text); }

/* Prose */
/* A long unbroken token (URL, handle, code) cannot push the page sideways. */
.prose { max-width: 700px; margin: 0 auto; padding: 8px var(--px) 0; overflow-wrap: break-word; }
.prose h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12;
  letter-spacing: -0.025em; margin: 68px 0 22px; text-wrap: balance;
}
.prose h2 em { font-style: italic; color: var(--accent); }
.prose h3 {
  font-family: var(--sans); font-weight: 600; font-size: 17px;
  letter-spacing: -0.005em; margin: 42px 0 14px; color: var(--text);
}
.prose p { font-size: 17px; line-height: 1.75; color: var(--text-dim); margin-bottom: 30px; text-wrap: pretty; }
.prose p strong, .prose li strong { color: var(--text); font-weight: 600; }
.prose a:not(.btn-primary):not(.btn-secondary) {
  color: var(--accent-text); border-bottom: 1px solid rgba(210,93,84,0.4);
  transition: border-color 0.3s;
}
.prose a:not(.btn-primary):not(.btn-secondary):hover { border-bottom-color: var(--accent-text); }
.prose ul, .prose ol { margin: 0 0 30px 0; padding-left: 22px; }
.prose li { font-size: 17px; line-height: 1.72; color: var(--text-dim); margin-bottom: 14px; }
.prose li::marker { color: var(--text-faint); }
.prose figure { margin: 0 0 30px; }
.prose figure img { width: 100%; height: auto; display: block;
  border: 1px solid var(--border-mid); border-radius: 10px; }
.prose figcaption { font-size: 13.5px; line-height: 1.6; color: var(--text-faint);
  margin-top: 12px; }
.prose blockquote {
  border-left: 2px solid var(--accent); padding: 4px 0 4px 22px;
  margin: 28px 0; font-family: var(--serif); font-size: 21px;
  line-height: 1.45; color: var(--text); font-style: italic;
}

/* Key-stat callout */
.keystat {
  display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 0 12px 12px 0; padding: 24px 26px; margin: 30px 0;
}
/* flex-shrink:0 keeps a short value like "$10M" on one line beside the note.
   max-width caps it at the container so a long value wraps instead of pushing
   the page wider than the viewport. */
.keystat-value {
  font-family: var(--serif); font-size: clamp(32px, 4vw, 46px);
  line-height: 1.05; letter-spacing: -0.02em; color: var(--text);
  flex-shrink: 0; max-width: 100%; min-width: 0;
}
.keystat-note { font-size: 14.5px; line-height: 1.6; color: var(--text-dim); flex: 1; min-width: 220px; }

/* Data table */
.doc-table-wrap { overflow-x: auto; margin: 28px 0; border: 1px solid var(--border); border-radius: 12px; }
.doc-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.doc-table th {
  text-align: left; padding: 14px 18px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.doc-table td {
  padding: 14px 18px; font-size: 14.5px; line-height: 1.55;
  color: var(--text-dim); border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.doc-table tr:last-child td { border-bottom: none; }
.doc-table td strong { color: var(--text); font-weight: 600; }

/* Mobile tables.
   Two and three column tables are made to fit, so nothing scrolls sideways.
   The four case-study tables carry 4 to 6 columns of figures and cannot fit at
   any readable size, so each row becomes a card of label/value pairs. The
   header row stays in the DOM for screen readers and is visually hidden. */
@media (max-width: 600px) {
  .doc-table { min-width: 0; }
  .doc-table th { padding: 11px 12px; letter-spacing: 0.12em; white-space: normal; }
  .doc-table td { padding: 11px 12px; font-size: 13.5px; }

  .doc-table-wrap.reflow { overflow: visible; border: none; border-radius: 0; }
  .doc-table-wrap.reflow thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .doc-table-wrap.reflow tr {
    display: block; background: var(--surface);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 6px 16px; margin-bottom: 12px;
  }
  .doc-table-wrap.reflow tr:last-child { margin-bottom: 0; }
  .doc-table-wrap.reflow td {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 4px 18px; min-width: 0;
    padding: 8px 0; border-bottom: 1px solid var(--border);
    text-align: right; overflow-wrap: break-word;
  }
  .doc-table-wrap.reflow tr td:last-child { border-bottom: none; }
  .doc-table-wrap.reflow td::before {
    content: attr(data-label);
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-faint);
    flex: 0 1 auto; min-width: 0; text-align: left;
  }
}

/* Three-column tables hold their shape longer than six-column ones, so they
   keep the table layout down to 460px and become cards below it. */
@media (max-width: 460px) {
  .doc-table-wrap.reflow-narrow { overflow: visible; border: none; border-radius: 0; }
  .doc-table-wrap.reflow-narrow thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .doc-table-wrap.reflow-narrow tr {
    display: block; background: var(--surface);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 6px 16px; margin-bottom: 12px;
  }
  .doc-table-wrap.reflow-narrow tr:last-child { margin-bottom: 0; }
  .doc-table-wrap.reflow-narrow td {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 4px 18px; min-width: 0;
    padding: 8px 0; border-bottom: 1px solid var(--border);
    text-align: right; overflow-wrap: break-word;
  }
  .doc-table-wrap.reflow-narrow tr td:last-child { border-bottom: none; }
  .doc-table-wrap.reflow-narrow td::before {
    content: attr(data-label);
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-faint);
    flex: 0 1 auto; min-width: 0; text-align: left;
  }
}

/* Related-pages grid */
.related { max-width: 700px; margin: 64px auto 0; padding: 0 var(--px); }
.related h2 {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 20px;
}
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.related-card {
  display: block; padding: 22px 24px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.related-card:hover { border-color: var(--border-mid); transform: translateY(-2px); }
.related-card .rc-title { font-size: 15.5px; font-weight: 600; color: var(--text); margin-bottom: 7px; line-height: 1.35; }
.related-card .rc-desc { font-size: 13.5px; color: var(--text-faint); line-height: 1.55; }
@media (max-width: 640px) { .related-grid { grid-template-columns: 1fr; } }

/* Closing CTA band */
/* One call to book, part-way down a page. A page with one CTA at the very
   end asks a reader to finish before it asks for anything; this one sits
   where the argument has landed. One per page, never more. */
.cta-inline {
  max-width: 700px; margin: 40px auto; padding: 22px 26px;
  border: 1px solid var(--border-mid); border-radius: 14px;
  background: var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.cta-inline p { font-size: 15px; line-height: 1.5; color: var(--text-dim); margin: 0; }
.cta-inline p strong { color: var(--text); font-weight: 600; }
.cta-inline .btn-primary { padding: 13px 24px; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 640px) {
  .cta-inline { flex-direction: column; align-items: stretch; text-align: center; }
}

/* The directory, by vertical. */
.lx-verticals { max-width: var(--max-w); margin: 28px auto 0; padding: 0 var(--px); }
.lx-verticals + .lx-verticals { margin-top: 16px; }
.lx-verticals-back { max-width: var(--max-w); margin: 28px auto 0; padding: 0 var(--px); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.lx-verticals-back a { color: var(--text-dim); }
.lx-verticals-back small { color: var(--text-faint); }
.lx-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); padding: 0 4px; cursor: pointer; }
.lx-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.lx-verticals-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 12px;
}
.lx-verticals-row { display: flex; flex-wrap: wrap; gap: 10px; }
.lx-vertical {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 16px; border: 1px solid var(--border);
  border-radius: 999px; font-size: 14px; color: var(--text);
  transition: border-color 0.3s;
}
.lx-vertical:hover, .lx-vertical[aria-current] { border-color: var(--accent); }
.lx-vertical small { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }

/* The stat strip on a vertical page: this vertical against everything. */
.lx-stats { max-width: var(--max-w); margin: 32px auto 0; padding: 0 var(--px); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.lx-stat { padding: 20px 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.lx-stat-value { font-family: var(--serif); font-size: 30px; line-height: 1; letter-spacing: -0.02em; }
.lx-stat-label { font-size: 13px; color: var(--text-dim); margin-top: 8px; line-height: 1.45; }
.lx-stat-label strong { color: var(--text); }

.doc-cta {
  max-width: 700px; margin: 64px auto 0; padding: 44px var(--px) 0;
  border-top: 1px solid var(--border); text-align: center;
}
.doc-cta h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1;
  letter-spacing: -0.028em; margin-bottom: 16px; text-wrap: balance;
}
.doc-cta h2 em { font-style: italic; color: var(--accent); }
.doc-cta p { font-size: 15.5px; color: var(--text-dim); line-height: 1.65; max-width: 520px; margin: 0 auto 28px; }

@media (max-width: 768px) {
  .doc-main { padding-top: 60px; }
  .prose h2 { margin: 42px 0 14px; }
  .prose p, .prose li { font-size: 16px; }
  .prose p { margin-bottom: 26px; }
  .prose ul, .prose ol { margin-bottom: 26px; }
  .doc-toc { padding: 22px 24px; margin: 28px auto; }
  .keystat { padding: 20px 22px; gap: 16px; }
}


/* ==========================================================================
   Accessibility: visible keyboard focus and a skip link.
   The design had neither -- keyboard users had no position indicator at all.
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Only suppress the ring for pointer users, never for keyboard. */
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--accent); color: #fff;
  padding: 12px 22px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.15em; text-transform: uppercase;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Case-study "read more" link on the homepage cards. */
.cs-link { margin-top: 14px; }
.cs-link a {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent-text);
  border-bottom: 1px solid rgba(200,57,46,0.35);
  padding-bottom: 2px;
  transition: border-color 0.3s;
}
.cs-link a:hover { border-bottom-color: var(--accent); }


/* Author attribution -- named expertise, not an anonymous org page. */
.doc-byline {
  font-size: 14px; color: var(--text-dim);
  margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px;
}
.doc-byline .author-name { color: var(--text); font-weight: 600; }
.doc-byline .author-role {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint);
}
.author-card {
  max-width: 700px; margin: 56px auto 0; padding: 26px 30px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 2px solid var(--accent); border-radius: 0 14px 14px 0;
}
.author-card-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 12px;
}
.author-card-name { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.author-card-bio { font-size: 14.5px; line-height: 1.65; color: var(--text-dim); margin-bottom: 12px; }
.author-card-contact a { font-family: var(--mono); font-size: 12px; color: var(--accent-text); }
.author-card-contact a:hover { border-bottom: 1px solid var(--accent); }
@media (max-width: 768px) { .author-card { padding: 22px 24px; margin-top: 40px; } }

/* Contact page: method cards above the scheduler. */
.contact-methods {
  max-width: 700px; margin: 40px auto 0; padding: 0 var(--px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px;
}
.contact-card {
  display: block; padding: 24px 26px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.contact-card:hover { border-color: var(--border-mid); transform: translateY(-2px); }
.contact-card-primary { border-left: 2px solid var(--accent); }
.contact-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px;
}
.contact-value { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
/* The address is one word and stays one line: the card grows or the type
   shrinks before it breaks at the dot. */
.contact-card-primary .contact-value { white-space: nowrap; font-size: clamp(14px, 1.6vw, 16px); }
.contact-card-primary .contact-value { color: var(--accent-text); }
.contact-note { font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
.cal-fallback { padding: 40px; text-align: center; color: var(--text-dim); font-size: 15px; }
.cal-fallback a { color: var(--accent-text); }
/* When the row wraps to two columns, the odd card out takes the full width
   instead of sitting alone on the left. */
.contact-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 560px) { .contact-methods { grid-template-columns: 1fr; } }


/* Footer had no wrap and outgrew its row once the site went multi-page. */
@media (max-width: 640px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-links { gap: 12px 20px; }
}


/* Author name links to the real profile — underline on hover only, so the
   byline stays a byline rather than reading as body copy with a link in it. */
.doc-byline .author-name a,
.author-card-name a { color: inherit; border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.doc-byline .author-name a:hover,
.author-card-name a:hover { border-bottom-color: var(--accent); }


/* Legal links sit inline with the copyright line. */
.footer-bottom a { color: var(--text-faint); transition: color 0.3s; }
.footer-bottom a:hover { color: var(--text-dim); }

/* ============================================================
   SERVICES: hub grid + nav dropdown
   ============================================================ */

.service-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  max-width: 700px; margin: 4px auto 34px; padding: 0 var(--px);
}
.service-card {
  display: block; padding: 22px 24px 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 2px solid var(--accent); border-radius: 0 12px 12px 0;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.service-card:hover { background: var(--surface-2); border-color: var(--border-mid); border-left-color: var(--accent); }
.sc-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--accent-text); margin-bottom: 10px;
}
.sc-title { font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--text); margin-bottom: 9px; }
.sc-desc { font-size: 14px; line-height: 1.6; color: var(--text-dim); margin-bottom: 12px; }
.sc-more {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-faint);
}
@media (max-width: 640px) {
  .service-grid { grid-template-columns: 1fr; }
}

/* Dropdown. Opens on hover for pointers and on focus-within for keyboards,
   with no JavaScript. On mobile the panel is already an open list, so the
   sub-items simply render inline and hover never enters the picture. */
.nav-drop { position: relative; display: inline-flex; align-items: center; }
.nav-drop-menu {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
  margin-top: 14px; width: 460px; padding: 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--surface); border: 1px solid var(--border-mid);
  border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  z-index: 60;
}
/* a bridge so the pointer can cross the gap without the menu closing */
.nav-drop::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
/* Hover only where a hover exists. On a phone a tap sets :hover too, and this
   rule's translate(-50%) was dragging the opened fold half a screen to the
   left, so the items rendered off the edge. */
@media (hover: hover) {
  .nav-drop:hover .nav-drop-menu,
  .nav-drop:focus-within .nav-drop-menu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  }
}
.nav-drop-menu a {
  display: block; padding: 12px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--text);
  transition: background 0.2s;
}
.nav-drop-menu a:hover { background: var(--surface-2); }
.nav-drop-menu em {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 11.5px; font-weight: 400; line-height: 1.45; color: var(--text-dim);
}
@media (prefers-reduced-motion: reduce) {
  .nav-drop-menu { transition: none; }
}
@media (max-width: 900px) {
  .nav-drop { display: block; }
  .nav-drop-menu {
    position: static; transform: none; margin: 0; width: auto; padding: 0;
    grid-template-columns: 1fr; gap: 0; background: none; border: none;
    box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto;
  }
  .nav-links.open .nav-drop-menu a {
    padding-left: 18px; font-size: 15px; min-height: 46px;
    color: var(--text-dim);
  }
  .nav-links.open .nav-drop-menu em { display: none; }

  /* Phone menu, second pass. Solid panel, the call to action first and always
     on screen, and the two groups folded until tapped so the list fits one
     screen. The group's own word still goes to its hub page; the chevron is a
     separate 52px target that only opens the fold. */
  .nav-links.open { background: #0a0908; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 4px; min-height: calc(100dvh - 60px); }
  .nav-links.open > a:last-of-type { order: -1; border-bottom: none; min-height: 0; margin: 8px 0 6px; }
  .nav-links.open .nav-cta { margin-top: 0; }
  .nav-links.open .nav-drop { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--border); }
  .nav-links.open .nav-drop > a { flex: 1 1 auto; border-bottom: none; }
  .nav-links.open .nav-drop-toggle {
    display: flex; align-items: center; justify-content: center; flex: 0 0 52px; height: 52px;
    background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0; margin-right: -8px;
  }
  .nav-links.open .nav-drop-toggle::before {
    content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s;
  }
  .nav-links.open .nav-drop.open .nav-drop-toggle::before { transform: rotate(-135deg) translate(-2px, -2px); }
  .nav-links.open .nav-drop-menu { display: none; flex: 1 1 100%; padding-bottom: 6px; }
  .nav-links.open .nav-drop.open .nav-drop-menu { display: block; }
  .nav-links.open .nav-drop:hover .nav-drop-menu,
  .nav-links.open .nav-drop:focus-within .nav-drop-menu { transform: none; }
  .nav-links.open .nav-drop-menu a { border-bottom: none; min-height: 44px; }
}
/* Specific enough to beat ".nav-drop-menu a", which otherwise showed the
   phone-only hub link on desktop and left a hole in the two-column grid. */
.nav-drop-toggle, .nav-drop-menu a.nav-drop-all { display: none; }
@media (max-width: 900px) {
  .nav-links.open .nav-drop-all { display: flex; }
  .nav-links.open .nav-drop-toggle::before { width: 9px; height: 9px; }
}

/* Footer variant of the services dropdown. Opens upward because it sits at the
   bottom of the page. Same hover-plus-focus-within behaviour as the nav, and on
   narrow screens it renders inline as part of the wrapped footer flow so the
   links are never hidden behind an interaction that touch cannot perform. */
.footer-drop { position: relative; display: inline-flex; align-items: center; }
.footer-drop-menu {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px);
  margin-bottom: 12px; min-width: 190px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border-mid);
  border-radius: 10px; box-shadow: 0 -14px 40px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  z-index: 60;
}
.footer-drop::after { content: ''; position: absolute; bottom: 100%; left: 0; right: 0; height: 14px; }
.footer-drop:hover .footer-drop-menu,
.footer-drop:focus-within .footer-drop-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.footer-drop-menu a {
  display: block; padding: 9px 12px; border-radius: 6px;
  white-space: nowrap; transition: background 0.2s, color 0.2s;
}
.footer-drop-menu a:hover { background: var(--surface-2); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .footer-drop-menu { transition: none; } }
@media (max-width: 900px) {
  .footer-drop { display: contents; }
  /* The menu's links become direct items of .footer-links, so they take its
     gap and wrap. As a flex row with no gap of their own they ran together. */
  .footer-drop-menu {
    display: contents; position: static; transform: none; margin: 0; padding: 0;
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .footer-drop-menu a { padding: 0; }
}

/* ============================================================
   THE ARC — restyled as a timeline rather than a second card grid.
   It was visually identical to the playbook grid, so two different
   ideas read as the same module twice. This gives it a progression:
   a rule running through the stages, a node per stage, and the time
   marker doing the work the card border used to do.
   ============================================================ */
.arc-grid { position: relative; }
.arc-grid::before {
  content: ''; position: absolute; top: 7px; left: 8%; right: 8%;
  height: 1px; background: var(--border-mid);
}
.arc-step {
  display: flex; flex-direction: column;
  padding: 30px 20px 0; background: none; border: none; border-radius: 0;
  position: relative; transition: transform 0.4s var(--ease);
}
.arc-step::before {
  content: ''; position: absolute; top: 3px; left: 20px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border-mid);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.arc-step:hover { transform: translateY(-3px); }
.arc-step:hover::before { background: var(--accent); border-color: var(--accent); }
.arc-step:hover .arc-title { color: var(--accent-text); }
.arc-step .arc-when {
  order: -1; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text); margin-bottom: 4px;
}
.arc-step .arc-num { font-size: 10px; letter-spacing: 0.22em; color: var(--text-faint); margin-bottom: 12px; }
.arc-step .arc-title { transition: color 0.3s var(--ease); }
.arc-more {
  margin-top: 12px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text);
  opacity: 0; transform: translateY(-3px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.arc-step:hover .arc-more { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .arc-step, .arc-more { transition: none; }
  .arc-more { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .arc-grid { grid-template-columns: 1fr 1fr; }
  .arc-grid::before { display: none; }
  .arc-step { padding: 22px 0 0; border-top: 1px solid var(--border-mid); }
  /* no connecting rule at this width, so the node has nothing to sit on */
  .arc-step::before { display: none; }
  .arc-more { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  .arc-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* two routes out of the playbook section, on one row */
.section-cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
@media (max-width: 600px) { .section-cta { flex-direction: column; align-items: stretch; } }

/* ---------------------------------------------------------------- raises
   The daily funding tracker. Two lists per edition: rounds the press covered,
   rendered as a dense table, and Form D filings nobody announced, rendered as
   cards because that list is the point of the page. */
/* Every band on a doc page is a 700px column with the page gutter, the same
   as .prose and .related. Without this the tracker runs edge to edge. */
.raise-section, .raise-read, .edition-nav {
  max-width: 700px; margin-left: auto; margin-right: auto;
  padding-left: var(--px); padding-right: var(--px);
}
.raise-section { margin-top: 60px; }
.raise-section h2 {
  font-family: var(--serif); font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 400; line-height: 1.15; letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.raise-intro {
  font-size: 15.5px; line-height: 1.65; color: var(--text-dim);
  max-width: 62ch; margin-bottom: 26px;
}
.raise-note {
  font-size: 13px; line-height: 1.6; color: var(--text-faint);
  max-width: 68ch; margin-top: 18px;
}
.raise-note a { color: var(--accent-text); }
.lx-note { max-width: 62ch; margin: 28px auto 0; text-align: center; }

.raise-list { list-style: none; margin: 0; padding: 0; }
.raise {
  display: flex; align-items: baseline; gap: 20px;
  padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; margin-bottom: 8px;
}
.raise-amt {
  font-family: var(--mono); font-size: 15px; font-weight: 500;
  color: var(--accent-text); white-space: nowrap;
  /* Wide enough for $4.99B so the company names line up down the list. */
  flex: 0 0 84px;
}
.raise-body { flex: 1 1 auto; min-width: 0; }
.raise-co { font-size: 15.5px; font-weight: 600; color: var(--text); line-height: 1.35; }
.raise-meta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint); margin-top: 5px;
}
.raise-src {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint);
  white-space: nowrap; transition: color 0.3s;
}
.raise-src:hover { color: var(--accent-text); }

.raise-read { margin-top: 56px; }

.edition-nav {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.edition-nav a { color: var(--text-faint); transition: color 0.3s; }
.edition-nav a:hover { color: var(--text); }
.edition-next { margin-left: auto; }

@media (max-width: 600px) {
  .raise { flex-wrap: wrap; gap: 6px 16px; padding: 15px 16px; }
  .raise-amt { flex: 0 0 auto; order: 1; }
  .raise-src { order: 2; margin-left: auto; }
  .raise-body { order: 3; flex: 1 0 100%; }
}

.raise-co a { color: inherit; }
.raise-co a:hover { color: var(--accent-text); }
/* A filing we could not match to a headline. Stated as an absence of evidence,
   and styled as one, so it does not read as a finding. */
.raise-src-none { color: rgba(237,230,216,0.3); }
/* The section already carries its own top margin, so the .prose h2 rule's
   68px would stack on top of it. */
.raise-read > h2:first-child { margin-top: 0; }
.raise-read h3 { margin-top: 40px; }

/* A filing with money left on the offering is a company still raising, so it
   gets the accent rather than the muted meta treatment. */
.raise-open {
  font-size: 13px; color: var(--accent-text); margin-top: 6px;
}
.raise-sector {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(237,230,216,0.35); margin-top: 8px;
}
/* What the company says it does, in its own words from its own site. Without
   this a row is a name and an SEC industry code, which explains nothing. */
.raise-what {
  font-size: 14px; line-height: 1.5; color: var(--text-dim); margin-top: 6px;
}
/* Distribution scope. Five motions, each its own block rather than one
   19-row table. As a table it needed a 540px floor to stop the prose column
   collapsing to 138px, which meant the whole thing scrolled sideways on a
   phone. Blocks re-flow instead: two items across on a wide screen, one on a
   narrow one, and nothing ever scrolls horizontally. */
.scope-grid {
  display: grid; gap: 14px; margin: 28px 0;
  /* Breaks out of the 700px prose column. Held inside it the two columns were
     259px each, the descriptions wrapped to four lines and the block ran
     1,963px tall, taller than the table it replaced. */
  width: min(var(--max-w), calc(100vw - 2 * var(--px)));
  margin-left: 50%; transform: translateX(-50%);
}
.scope-block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 22px;
}
.prose h3.scope-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 16px;
}
.scope-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 24px; }
.scope-name {
  display: block; font-size: 14.5px; font-weight: 600;
  color: var(--text); margin-bottom: 4px;
}
.scope-how { font-size: 13.5px; line-height: 1.5; color: var(--text-dim); margin: 0; }
@media (max-width: 640px) {
  .scope-items { grid-template-columns: 1fr; gap: 13px; }
  .scope-block { padding: 16px 18px; }
  .prose h3.scope-label { margin-bottom: 12px; }
  .scope-how { font-size: 13px; }
}
/* Whether the company got anything out of announcing the round. It is the one
   line on this page that comes from our own numbers, so it gets the accent. */
.raise-said {
  font-size: 13px; color: var(--accent-text); margin-top: 6px;
}
.raise-said a { color: inherit; text-decoration: underline; }

/* ------------------------------------------------------- launch directory */
.lx-controls, .lx-section, .lx-more-btn {
  max-width: var(--max-w); margin-left: auto; margin-right: auto;
  padding-left: var(--px); padding-right: var(--px);
}
/* No gutter of its own: .lx-section already supplies it, and applying both
   inset the cards twice. */
.lx-grid { padding-left: 0; padding-right: 0; }
.lx-controls { margin-top: 40px; }
.lx-section { margin-top: 26px; }
.lx-search {
  width: 100%; padding: 13px 16px; font-family: var(--sans); font-size: 15px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-mid); border-radius: 10px;
}
.lx-search::placeholder { color: var(--text-faint); }
.lx-search:focus { outline: none; border-color: var(--accent); }
.lx-bar { display: flex; gap: 10px; align-items: stretch; }
.lx-bar .lx-search { flex: 1 1 auto; min-width: 0; }
.lx-filter-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px;
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-mid); border-radius: 10px; cursor: pointer;
  transition: border-color 0.2s;
}
.lx-filter-btn:hover, .lx-filter-btn[aria-expanded="true"] { border-color: var(--accent); }
.lx-filter-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lx-filter-n[hidden] { display: none; }
.lx-filter-n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 11px; line-height: 1;
}
/* Collapsed until the button opens it. The class beats the [hidden]
   attribute here on purpose: display:flex on the open state would have
   overridden hidden anyway. */
.lx-filters { display: none; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.lx-filters.open { display: flex; }
.lx-select {
  flex: 1 1 190px; min-width: 0; max-width: 100%; padding: 10px 36px 10px 14px; font-family: var(--sans); font-size: 13.5px;
  color: var(--text); background: var(--surface); color-scheme: dark;
  border: 1px solid var(--border-mid); border-radius: 8px; cursor: pointer;
  /* Drawn by us on every platform: iOS and Safari otherwise draw their own
     control, which on a dark surface lost the label and pushed the chevron
     to the edge. */
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23b8b0a4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 12px;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.lx-select option { color: var(--text); background: var(--surface); }
.lx-filters { width: 100%; }
.lx-select:focus { outline: none; border-color: var(--accent); }
.lx-count {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-faint); margin-top: 14px;
}

/* Three across on a wide screen. The card is the post: poster frame, the
   account that ran it, the copy, and what it did. */
.lx-grid {
  list-style: none; display: grid; gap: 18px;
  grid-template-columns: repeat(3, 1fr); margin: 0 auto;
}
.lxc {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
.lxc-media {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: #000; overflow: hidden;
}
.lxc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lxc-play {
  position: absolute; inset: 0; margin: auto; width: 46px; height: 46px;
  border-radius: 50%; background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.5);
  transition: background 0.25s, transform 0.3s var(--ease);
}
.lxc-play::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; margin-left: 18px;
  border-left: 13px solid #fff;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.lxc-media:hover .lxc-play { background: rgba(0,0,0,0.8); transform: scale(1.06); }
.lxc-dur {
  position: absolute; right: 10px; bottom: 10px;
  font-family: var(--mono); font-size: 10.5px; color: #fff;
  background: rgba(0,0,0,0.7); padding: 3px 7px; border-radius: 5px;
}
.lxc-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px 0; }
.lxc-av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.lxc-who { min-width: 0; flex: 1 1 auto; }
.lxc-name {
  display: flex; align-items: center; gap: 4px;
  font-size: 14.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lxc-check { width: 15px; height: 15px; flex-shrink: 0; }
.lxc-handle {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lxc-rank {
  flex-shrink: 0; text-align: right;
  font-family: var(--mono); font-size: 15px; color: var(--accent-text); line-height: 1.1;
}
.lxc-rank span {
  display: block; font-size: 8.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint); margin-top: 3px;
}
.lxc-body {
  font-size: 13.5px; line-height: 1.5; color: var(--text-dim);
  padding: 12px 16px 0; margin: 0; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.lxc-foot {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 14px 16px 15px; margin-top: auto;
}
.lxc-x { color: var(--accent-text); }
.lxc-foot a { color: var(--text-faint); margin-left: auto; transition: color 0.3s; }
.lxc-foot a:hover { color: var(--accent-text); }

.lx-more-btn {
  display: block; margin: 26px auto 0; padding: 13px 30px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim);
  background: none; border: 1px solid var(--border-mid); border-radius: 8px;
  cursor: pointer; transition: border-color 0.3s, color 0.3s;
}
.lx-more-btn:hover { border-color: var(--accent); color: var(--text); }

@media (max-width: 1024px) { .lx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
  .lx-grid { grid-template-columns: 1fr; }
  /* The card footer links were 13px tall, which is a third of a usable tap
     target. They get the height on touch without changing how they look. */
  .lxc-foot { gap: 6px 14px; padding-bottom: 6px; }
  .lxc-x-link, .lxc-more-link {
    min-height: 44px; display: flex; align-items: center;
  }
  .lxc-more-link { margin-top: 0; }
  .lx-select, .lx-search { min-height: 46px; }
}

/* --------------------------------------------------- one launch, in detail */
.lp-wrap, .lp-stats {
  max-width: 700px; margin: 34px auto 0;
  padding-left: var(--px); padding-right: var(--px);
}
.lp-media { border-radius: 14px; overflow: hidden; display: block; aspect-ratio: 16/9; }
.lp-post {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px 15px; margin-top: 14px;
}
.lp-open {
  flex-shrink: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint); transition: color 0.3s;
}
.lp-open:hover { color: var(--accent-text); }
.lp-copy {
  font-size: 15px; line-height: 1.6; color: var(--text);
  white-space: pre-wrap; margin: 14px 0 0;
}
.lp-post .lxc-foot { padding: 14px 0 0; }

.lp-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px;
}
.lp-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 14px;
}
.lp-sv { font-family: var(--serif); font-size: 27px; line-height: 1; color: var(--text); }
.lp-sl {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint); margin-top: 9px;
}
.lp-sn { font-size: 11.5px; color: var(--accent-text); margin-top: 7px; line-height: 1.4; }
.lp-cn {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint);
}
@media (max-width: 760px) {
  .lp-stats { grid-template-columns: repeat(2, 1fr); }
  /* Open on X sat beside the handle and squeezed it to an ellipsis, and was
     a 13px tap target besides. Below the name, full width, properly tappable. */
  .lp-post .lxc-head { flex-wrap: wrap; }
  .lp-open {
    order: 3; flex: 1 0 100%; min-height: 44px;
    display: flex; align-items: center; margin-top: 2px;
  }
  .lp-post .lxc-handle { text-overflow: clip; }
}
/* The card is a way into our page. X gets an explicit link of its own rather
   than swallowing every click on the card. */
.lxc-name a { color: inherit; }
.lxc-name a:hover { color: var(--accent-text); }
.lxc-x-link { margin-left: auto; }
.lxc-more-link { color: var(--accent-text) !important; flex-basis: 100%; margin-top: 4px; }

/* The homepage carousel and the case study blocks used to carry 23 lazily
   loaded videos. They show the poster frame now and open the launch's own
   page, which took the video off the homepage and gave it 20 internal links. */
.x-poster {
  position: relative; display: block; width: 100%; height: 100%;
  background: #000; overflow: hidden;
}
.x-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x-poster-play {
  position: absolute; inset: 0; margin: auto; width: 46px; height: 46px;
  border-radius: 50%; background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.5);
  transition: background 0.25s, transform 0.3s var(--ease);
}
.x-poster-play::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; margin-left: 18px;
  border-left: 13px solid #fff;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.x-poster:hover .x-poster-play { background: rgba(0,0,0,0.8); transform: scale(1.06); }

/* Research report: bar charts as reflowing rows, and citable callouts */
.rp-stat { margin: 0 0 22px; padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 12px 12px 0; font-size: 18px; line-height: 1.55; }
.prose .rp-stat strong { color: var(--text); font-weight: 600; }
.rp-chart { margin: 0 0 30px; }
.rp-chart figcaption { font-size: 13px; color: var(--text-faint); margin-top: 10px; }
.rp-rows { display: grid; gap: 10px; }
.rp-row { display: grid; grid-template-columns: minmax(150px, 190px) 1fr auto; align-items: center; gap: 12px; font-size: 14px; }
.rp-lab { color: var(--text-dim); line-height: 1.3; }
.rp-track { display: block; height: 22px; border-radius: 4px; background: var(--border); overflow: hidden; }
.rp-bar { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.rp-bar.dim { background: var(--border-mid); }
.rp-val { color: var(--text); font-weight: 600; white-space: nowrap; font-size: 14px; }
@media (max-width: 600px) {
  .rp-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .rp-lab { grid-column: 1 / -1; font-size: 13px; }
  .rp-track { height: 16px; }
  .rp-val { font-size: 13px; }
  .rp-stat { font-size: 16px; padding: 12px 14px; }
}
.prose .rp-cite { font-family: var(--mono); font-size: 12px; color: var(--text-faint); margin: -14px 0 40px; line-height: 1.6; overflow-wrap: anywhere; }
.prose .rp-cite em { font-style: italic; }

/* On a phone the seven vertical pills stacked into a full screen before the
   search box, let alone a launch. One row that scrolls sideways instead. */
@media (max-width: 768px) {
  .lx-verticals-row { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px; margin-right: calc(var(--px) * -1); padding-right: var(--px); }
  .lx-verticals-row::-webkit-scrollbar { display: none; }
  .lx-verticals-row .lx-vertical { flex: 0 0 auto; white-space: nowrap; }
}

/* The launches Doomers ran carry a label on the poster frame. */
.lxc-dm {
  position: absolute; top: 10px; left: 10px; z-index: 2; padding: 5px 9px; border-radius: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--accent); color: #fff; pointer-events: none;
}

/* Mobile legibility floor.

   The letter-spaced mono labels are the site's voice at desktop sizes, and
   on a 375px viewport several of them had been scaled to 7, 8 and 9.5px:
   the metric labels, the client marquee, the footer, the launch card
   footers. Lighthouse counts anything under 12px as illegible and the
   footer links were 11px tall to the thumb. This block is the floor: 11px
   for eyebrows and captions, 12px for anything a reader has to act on, and
   enough padding on small links to reach a tappable height. It overrides
   the per-component mobile rules above by coming last. */
@media (max-width: 600px) {
  .section-eyebrow, .cs-eyebrow, .arc-num, .arc-when, .arc-more, .hero-stat, .trusted-label,
  .backers-label, .service-tags span, .chart-title, .label-muted, .label-unmuted,
  .author-role, .author-card-label, .sc-more, .related h2, .doc-meta, .lx-verticals-label,
  .lx-count, .lxc-dur, .lxc-rank span, .lp-sl, .lp-cn, .lxc-foot span, .lxc-handle,
  .doc-table th, .doc-table-wrap.reflow td::before { font-size: 11px; letter-spacing: 0.14em; }
  .lp-sn, .rp-chart figcaption { font-size: 12px; }
  .metric-label { font-size: 11px; letter-spacing: 0.12em; white-space: normal; }
  .cs-stat-label, .cs-strip .cs-stat-label { font-size: 11px; letter-spacing: 0.1em; }
  .contact-label { font-size: 11px; letter-spacing: 0.18em; }
  .author-card .author-role, span.author-role { font-size: 11px; }
  .trusted-name, .trusted-fund { font-size: 11px; }
  .author-role { font-size: 11px; }
  .replay-btn { font-size: 11px; padding: 8px 12px; }
  .arc-grid .arc-step .arc-num, .arc-grid .arc-step .arc-when { font-size: 11px; letter-spacing: 0.14em; }
  .breadcrumb, .breadcrumb a { font-size: 11px; }
  .breadcrumb a { display: inline-block; padding: 6px 0; }
  .footer-links a, .footer-drop-menu a, .footer-bottom, .footer-bottom a { font-size: 12px; letter-spacing: 0.16em; }
  .footer-links a, .footer-drop-menu a, .footer-bottom a { display: inline-block; padding: 8px 0; }
  .lp-open, .lxc-foot a, .lxc-more-link, .lxc-x-link { font-size: 12px; display: inline-block; padding: 8px 0; }
  .lxc-foot { row-gap: 2px; }
}

/* Key/value fact block (a definition list). Two columns on desktop, stacked
   label-over-value on phones, and never routed through the table reflow, which
   is built for data tables and prints the column names as labels. */
.fact-list { margin: 24px 0 32px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 4px 18px; }
.fact-list > div { display: grid; grid-template-columns: 132px 1fr; gap: 6px 18px; padding: 12px 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.fact-list > div:last-child { border-bottom: none; }
.fact-list dt { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.fact-list dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-muted, var(--text)); min-width: 0; overflow-wrap: anywhere; }
.fact-list dd strong { color: var(--text); font-weight: 600; }
.fact-list dd a { display: inline; }
@media (max-width: 640px) {
  .fact-list { padding: 2px 14px; }
  .fact-list > div { grid-template-columns: 1fr; gap: 3px; padding: 11px 0; }
  .fact-list dd { font-size: 14.5px; }
}

/* Mobile table reflow, second pass. A row's first cell is its identity, so it
   reads as the card's title instead of "FOLLOWERS Under 1,000". Two-column
   tables are key/value lists and get one line per row, label left and value
   right, with no column names printed at all: "MEASURE ... VALUE ..." was the
   thing that made the fact tables unreadable on a phone. */
@media (max-width: 640px) {
  .doc-table-wrap.reflow td:first-child,
  .doc-table-wrap.reflow-narrow td:first-child {
    display: block; text-align: left; color: var(--text); font-weight: 600;
    font-size: 15px; padding: 12px 0 8px;
  }
  .doc-table-wrap.reflow td:first-child::before,
  .doc-table-wrap.reflow-narrow td:first-child::before { display: none; }
  .doc-table-wrap.reflow td:first-child strong { font-weight: 600; }

  .doc-table-wrap.reflow-kv { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 2px 16px; overflow: visible; }
  .doc-table-wrap.reflow-kv tr {
    display: grid; grid-template-columns: minmax(96px, 36%) 1fr; align-items: baseline;
    gap: 6px 16px; padding: 11px 0; margin: 0; background: transparent;
    border: none; border-bottom: 1px solid var(--border); border-radius: 0;
  }
  .doc-table-wrap.reflow-kv tr:last-child { border-bottom: none; }
  .doc-table-wrap.reflow-kv td { display: block; padding: 0; border: none; min-width: 0; }
  .doc-table-wrap.reflow-kv td::before { display: none; }
  .doc-table-wrap.reflow-kv td:first-child { flex: 1 1 auto; font-weight: 400; font-size: 14px; color: var(--text-muted, var(--text)); }
  .doc-table-wrap.reflow-kv td:first-child strong { color: var(--text); font-weight: 600; }
  .doc-table-wrap.reflow-kv td:last-child { text-align: left; color: var(--text); font-weight: 500; font-size: 14.5px; line-height: 1.5; }
  .doc-table-wrap.reflow-kv td:last-child strong { font-weight: 600; }
}
@media (max-width: 460px) {
  .doc-table-wrap.reflow-narrow.reflow-kv tr { display: grid; }
}

/* cache key bump: 2026-09-16 mobile tables */

.hero-stat a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-text); }
.hero-stat a:hover { color: var(--text); }

/* Case-study stat strip inside the article column */
.cs-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 28px; margin: 0 0 40px; padding: 22px 28px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.cs-strip .cs-stat-value { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 30px); font-weight: 400; letter-spacing: -0.02em; line-height: 1; margin-bottom: 10px; color: var(--text); white-space: nowrap; }
.cs-strip .cs-stat-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); line-height: 1.5; max-width: 24ch; }
.cs-strip.cs-strip-5 { grid-template-columns: repeat(5, 1fr); gap: 14px 20px; }
@media (max-width: 640px) { .cs-strip.cs-strip-5 > div:last-child { grid-column: 1 / -1; } .cs-strip { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; padding: 18px 16px; margin-bottom: 32px; } .cs-strip .cs-stat-value { font-size: 24px; } }

/* cache key bump: 2026-09-17 strip and nav */

/* cache key bump 2 */

/* The client's row in a ranking table */
.doc-table tr.is-us td { background: rgba(232, 84, 60, 0.10); color: var(--text); }
.doc-table tr.is-us td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
@media (max-width: 640px) { .doc-table-wrap.reflow tr.is-us { border-color: var(--accent); } .doc-table-wrap.reflow tr.is-us td { background: transparent; box-shadow: none; } }

/* "What is included": one accordion per service, items as a numbered list.
   Native <details>, so every line is in the DOM for search and readers, and
   the summary row (name, one line, count) reads as a real UI when closed. */
.inc { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin: 0 0 14px; overflow: hidden; }
.inc-sum { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 18px; align-items: center; padding: 20px 24px; cursor: pointer; }
.inc-sum::-webkit-details-marker { display: none; }
.inc-sum::marker { content: ""; }
.inc-sum:hover .inc-title { color: var(--accent-text); }
.inc-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prose h3.inc-title, .inc-title { font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -0.01em; margin: 0; line-height: 1.15; color: var(--text); transition: color 0.25s; }
.inc-desc { font-size: 14.5px; color: var(--text-dim); line-height: 1.45; }
.inc-count { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.inc-chev { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 50%; position: relative; flex: 0 0 auto; transition: transform 0.25s var(--ease), border-color 0.25s; }
.inc-chev::after { content: ""; position: absolute; left: 10px; top: 8px; width: 8px; height: 8px; border-right: 1.5px solid var(--text-dim); border-bottom: 1.5px solid var(--text-dim); transform: rotate(45deg); }
.inc[open] .inc-chev { transform: rotate(180deg); border-color: var(--accent-text); }
.inc-body { padding: 0 24px 22px; }
.prose ol.inc-list, .inc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.prose .inc-list li, .inc-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 16px 0; margin: 0; border-top: 1px solid var(--border); font-size: 14.5px; }
.inc-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--accent-text); padding-top: 5px; }
.inc-name { display: block; font-size: 15.5px; font-weight: 600; color: var(--text); margin-bottom: 4px; line-height: 1.35; }
.prose .inc-how, .inc-how { font-size: 14.5px; line-height: 1.55; color: var(--text-dim); margin: 0; }
.inc-more { display: inline-block; margin-top: 14px; font-size: 13.5px; }
.inc-static .inc-body { padding-top: 6px; }
@media (max-width: 720px) {
  .inc-sum { grid-template-columns: minmax(0, 1fr) auto; padding: 16px 16px; }
  .inc-count { grid-column: 1; grid-row: 2; }
  .inc-chev { grid-column: 2; grid-row: 1 / span 2; }
  .prose h3.inc-title, .inc-title { font-size: 22px; }
  .inc-desc { font-size: 14px; }
  .inc-body { padding: 0 16px 16px; }
  .prose ol.inc-list, .inc-list { grid-template-columns: 1fr; }
  .prose .inc-list li, .inc-list li { padding: 13px 0; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
  .inc-name { font-size: 15px; }
  .inc-how { font-size: 14px; }
}

/* A proof card that is one link: a covering anchor for the whole card, the
   button and the inline link sit above it so they stay real links. */
.cta-inline-link { position: relative; transition: border-color 0.25s; }
.cta-inline-link:hover { border-color: var(--accent-text); }
.cta-cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.cta-inline-link p, .cta-inline-link .btn-primary { position: relative; z-index: 2; }
.cta-inline-link p a { color: inherit; border-bottom: 1px solid var(--accent-text); }
/* Proof block on a launch Doomers ran: sits under the four numbers with the
   same width and gutter as the stats above it. */
.lp-ours { margin: 26px auto 0; width: calc(100% - 2 * var(--px)); }
.lp-ours p { text-align: left; }
@media (max-width: 640px) { .lp-ours p { text-align: center; } }

/* Phone reading pass for case studies, guides and reports. Body copy sits at
   a size and measure a thumb-scroller can hold, the contents list folds to a
   single row until asked for, and ranking tables read one launch per line. */
@media (max-width: 640px) {
  .prose p, .prose li { font-size: 16px; line-height: 1.62; }
  .prose p { margin-bottom: 18px; }
  .prose ul, .prose ol { margin-bottom: 20px; }
  .prose h2 { margin: 40px 0 12px; font-size: 25px; }
  .prose h3 { margin: 26px 0 8px; }
  .doc-standfirst { font-size: 16px; line-height: 1.55; }

  .doc-toc.toc-fold { padding: 0; margin: 22px var(--px); }
  .prose .doc-toc.toc-fold { margin-left: 0; margin-right: 0; }
  .doc-toc.toc-fold h2, .prose .doc-toc.toc-fold h2 {
    margin: 0; padding: 15px 18px; display: flex; align-items: center;
    justify-content: space-between; cursor: pointer; color: var(--text-dim);
    font-family: var(--mono); font-size: 10px; font-weight: 500; line-height: 1;
    letter-spacing: 0.3em; text-transform: uppercase;
  }
  .prose .doc-toc a:not(.btn-primary):not(.btn-secondary) { color: var(--text-dim); border-bottom: none; }
  .doc-toc.toc-fold h2::after {
    content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s;
  }
  .doc-toc.toc-fold.open h2::after { transform: rotate(-135deg); }
  .doc-toc.toc-fold ol { display: none; padding: 0 18px 6px; margin: 0; }
  .doc-toc.toc-fold.open ol { display: block; }

  /* Four short numeric columns fit a phone as a table; stacking them into
     cards tripled the height and hid the comparison. */
  .doc-table-wrap.table-tight { overflow: visible; }
  .doc-table-wrap.table-tight table { width: 100%; table-layout: fixed; }
  .doc-table-wrap.table-tight th, .doc-table-wrap.table-tight td { padding: 10px 6px; font-size: 12.5px; text-align: right; white-space: normal; }
  .doc-table-wrap.table-tight th { font-size: 8.5px; letter-spacing: 0.08em; line-height: 1.35; vertical-align: bottom; }
  .doc-table-wrap.table-tight th:first-child, .doc-table-wrap.table-tight td:first-child { text-align: left; width: 34%; padding-left: 12px; }
  .doc-table-wrap.table-tight td:first-child strong { font-weight: 600; font-size: 12.5px; line-height: 1.3; display: block; }
  .doc-table-wrap.table-tight td:last-child, .doc-table-wrap.table-tight th:last-child { padding-right: 12px; }
  .doc-table-wrap.reflow-rank { overflow: visible; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 0 14px; }
  .doc-table-wrap.reflow-rank table, .doc-table-wrap.reflow-rank tbody { display: block; }
  .doc-table-wrap.reflow-rank thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .doc-table-wrap.reflow-rank tr {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
    column-gap: 10px; align-items: center; padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .doc-table-wrap.reflow-rank tr:last-child { border-bottom: none; }
  .doc-table-wrap.reflow-rank td { display: block; padding: 0; border: none; background: transparent; min-width: 0; font-size: 14px; }
  .doc-table-wrap.reflow-rank td:nth-child(1) { grid-row: 1 / 3; font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
  .doc-table-wrap.reflow-rank td:nth-child(2) { grid-column: 2; line-height: 1.3; }
  .doc-table-wrap.reflow-rank td:nth-child(2) strong { font-weight: 600; }
  .doc-table-wrap.reflow-rank td:nth-child(3) { grid-column: 2; grid-row: 2; font-size: 12px; color: var(--text-faint); }
  .doc-table-wrap.reflow-rank td:nth-child(4) { grid-column: 3; grid-row: 1 / 3; text-align: right; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
  .doc-table-wrap.reflow-rank tr.is-us { margin: 0 -14px; padding: 10px 14px; background: rgba(232, 84, 60, 0.10); box-shadow: inset 3px 0 0 var(--accent); }
  .doc-table-wrap.reflow-rank tr.is-us td { background: transparent; box-shadow: none; }
}
/* cache key bump: phone reading pass */

/* Adoption chart on the TypeSafe case study: one series in the accent, the
   comparison set in a single quiet tone, every line named at its end. */
.adopt-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 22px 14px; }
.adopt-title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; line-height: 1.5; }
.adopt-svg { width: 100%; height: auto; display: block; overflow: visible; }
.adopt-svg.ad-narrow { display: none; }
.ad-grid { stroke: rgba(237,230,216,0.08); stroke-width: 1; }
.ad-axis { fill: var(--text-faint); font-family: var(--mono); }
.ad-line { fill: none; stroke: rgba(237,230,216,0.38); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ad-line.ad-us { stroke: var(--accent-text); stroke-width: 2.75; }
.ad-dot { fill: rgba(237,230,216,0.55); }
.ad-dot.ad-us { fill: var(--accent-text); }
.ad-label { fill: var(--text-dim); font-family: var(--sans); font-weight: 500; }
.ad-label.ad-us { fill: var(--text); font-weight: 700; }
@media (max-width: 640px) {
  .adopt-card { padding: 16px 12px 10px; }
  .adopt-svg.ad-wide { display: none; }
  .adopt-svg.ad-narrow { display: block; }
}

/* A launch frame inside an article sits clear of the heading above it and the
   copy below it. */
.prose .lp-media { margin: 20px 0 30px; }
.prose h3 + .lp-media { margin-top: 18px; }
@media (max-width: 640px) { .prose .lp-media { margin: 16px 0 22px; } }

/* Case study lead: the launch frame, then the headline numbers, before any
   copy. Same order on every case study. */
.cs-lead { max-width: 700px; margin: 30px auto 0; padding: 0 var(--px); }
.cs-lead .lp-media { margin: 0; }
.cs-lead .cs-strip { margin: 16px 0 0; }
.cs-lead + .doc-toc, .cs-lead + .metrics { margin-top: 28px; }
@media (max-width: 640px) { .cs-lead { margin-top: 22px; } .cs-lead .cs-strip { margin-top: 12px; } }

/* Launch frames inside a case study: every launch the copy talks about,
   shown as its frame and linked to its page. */
.cs-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px; margin: 6px 0 30px; }
.prose a.cs-frame:not(.btn-primary):not(.btn-secondary) { display: block; border-bottom: none; color: var(--text); }
.cs-frame-img { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--border-mid); transition: border-color 0.25s; }
.cs-frame-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-frame:hover .cs-frame-img { border-color: var(--accent-text); }
.cs-frame-name { display: block; margin-top: 9px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--text); }
.cs-frame-meta { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
@media (max-width: 640px) { .cs-frames { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; margin-bottom: 24px; } .cs-frame-name { font-size: 13px; } }
@media (min-width: 641px) { .cs-lead ~ .doc-toc { max-width: calc(700px - 2 * var(--px)); } }

/* Case study opening: headline, the launch frame and its numbers, then the
   intro. A reader sees the launch before the paragraph about it. */
.doc-hero-title h1 { margin-bottom: 0; }
.doc-hero-intro { padding-top: 30px; }
.doc-hero-intro .doc-standfirst { margin-bottom: 22px; }
.metrics + .doc-hero-intro { padding-top: 36px; }
@media (max-width: 640px) {
  .breadcrumb { padding-top: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.14em; }
  .breadcrumb, .breadcrumb a { font-size: 10px; }
  .breadcrumb span { margin: 0 6px; }
  .doc-hero { padding-top: 14px; }
  .doc-hero h1 { font-size: 31px; line-height: 1.06; margin-bottom: 16px; }
  .doc-hero-title h1 { margin-bottom: 0; }
  .doc-hero-intro { padding-top: 22px; }
  .doc-standfirst { font-size: 16px; line-height: 1.55; margin-bottom: 18px; }
  .doc-byline { font-size: 13px; margin-bottom: 6px; }
  .doc-byline .author-role { display: none; }
  .doc-meta { font-size: 9px; letter-spacing: 0.14em; line-height: 1.7; padding-bottom: 22px; }
  .cs-lead { margin-top: 18px; }
}

/* Portfolio wall on the VC page: names set as wordmarks in an even grid. */
.pf-grid { list-style: none; max-width: 980px; margin: 0 auto; padding: 0 var(--px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; }
.pf-grid li { background: var(--surface); outline: 1px solid var(--border); min-height: 92px; display: flex; }
.pf-grid li > * { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px 12px; font-family: var(--serif); font-size: 21px; letter-spacing: -0.01em; line-height: 1.15; color: var(--text); }
.pf-grid a { transition: color 0.25s, background 0.25s; }
.pf-grid a:hover { color: var(--accent-text); background: var(--surface-2); }
@media (max-width: 900px) { .pf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
  .pf-grid li { min-height: 72px; }
  .pf-grid li > * { font-size: 18px; padding: 14px 10px; }
  .pf-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Launch breakdowns: the framing line at the top of each one, the card date,
   and the three-card row on the directory hub. */
.bd-frame { font-size: 14.5px; line-height: 1.6; color: var(--text-dim); padding: 14px 18px; border: 1px solid var(--border-mid); border-radius: 12px; background: var(--surface); margin-bottom: 30px; }
.bd-frame strong { color: var(--text); }
.rc-date { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-top: 10px; }
.lx-breakdowns { max-width: 1180px; margin: 28px auto 0; padding: 0 var(--px); }
.lx-breakdowns .related-grid-3 { grid-template-columns: repeat(3, 1fr); }
.lx-breakdowns-more { margin-top: 12px; font-size: 14px; }
.lx-breakdowns-more a { color: var(--accent-text); }
@media (max-width: 900px) { .lx-breakdowns .related-grid-3 { grid-template-columns: 1fr; } }

/* Booking confirmation page (/booked), where Calendly sends a new booking. */
.bk-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px;
}
.bk-budget {
  max-width: 700px; margin: 32px auto 0; padding: 0 var(--px);
}
.bk-budget p {
  padding: 18px 22px; background: var(--surface);
  border: 1px solid var(--border-mid); border-left: 2px solid var(--accent);
  border-radius: 12px; font-size: 15px; line-height: 1.6; color: var(--text-dim);
}
.bk-budget strong { color: var(--text); font-weight: 600; }
.bk-proof {
  max-width: 700px; margin: 8px auto 0; padding: 0 var(--px);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.bk-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.bk-card:hover { border-color: var(--border-mid); transform: translateY(-2px); }
.bk-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.bk-card-title { font-size: 15.5px; font-weight: 600; color: var(--text); }
.bk-card-text { font-size: 13.5px; line-height: 1.55; color: var(--text-dim); flex: 1; }
.bk-card-link { font-family: var(--mono); font-size: 11.5px; color: var(--accent-text); }
/* An odd last card spans the row and lays out sideways, so five cards never leave one orphan at half width. */
.bk-proof .bk-card:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
.bk-proof .bk-card:last-child:nth-child(odd) .lxc-media { flex: 0 0 50%; width: 50%; }
.bk-proof .bk-card:last-child:nth-child(odd) .bk-card-body { justify-content: center; }
@media (max-width: 640px) { .bk-proof { grid-template-columns: 1fr; } .bk-proof .bk-card:last-child:nth-child(odd) { flex-direction: column; } .bk-proof .bk-card:last-child:nth-child(odd) .lxc-media { width: auto; flex: none; } }

/* Guides hub: a jump bar, search, and sections that fold past six cards. */
.hub-nav { max-width: 700px; margin: 28px auto 0; padding: 0 var(--px); position: sticky; top: 60px; z-index: 30; background: var(--bg); padding-top: 10px; padding-bottom: 10px; }
.hub-search input { width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--border-mid); border-radius: 10px; outline: none; }
.hub-search input:focus { border-color: var(--accent); }
.hub-pills { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hub-pills::-webkit-scrollbar { display: none; }
.hub-pills a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); background: var(--surface); white-space: nowrap; }
.hub-pills a:hover { border-color: var(--border-mid); color: var(--text); }
.hub-pills a span { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); }
.hub-count { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); margin-left: 8px; letter-spacing: 0; text-transform: none; }
.hub-section { scroll-margin-top: 150px; }
.hub-more { margin-top: 14px; }
.hub-toggle { margin-top: 14px; padding: 9px 14px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent-text); background: none; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.hub-toggle:hover { border-color: var(--accent-text); }
.hub-empty { max-width: 700px; margin: 12px auto 0; font-size: 14px; color: var(--text-dim); }
.hub-start { margin-top: 36px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) { .hub-nav { top: 56px; } .hub-section { scroll-margin-top: 170px; } }
.hub-result { margin: 10px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.cs-lead-nomedia .cs-strip { margin-top: 0; }
/* Case studies page: the three stage headings are groupings, not case studies. */
.prose h2.stage { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--border); }
.prose h2.stage .stage-label { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; }
/* Case studies contents: stage names as labels, case studies numbered under them. */
.doc-toc-grouped .toc-group { counter-increment: none; padding-left: 0; margin: 18px 0 10px; }
.doc-toc-grouped .toc-group:first-child { margin-top: 0; }
.doc-toc-grouped .toc-group::before { content: none; }
.doc-toc-grouped .toc-group a { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); }
.doc-toc-grouped .toc-group a:hover { color: var(--text-dim); }
.prose .cs-start { margin: 22px 0 8px; }
.prose .cs-start .related-card { padding: 22px 24px; }
.doc-toc-grouped .toc-lead a { color: var(--text); font-weight: 600; }

/* Disclosure note: the paid partnership label is standard on every creator
   post we place. One quiet block, same on every page it appears on. */
.disclosure-note { max-width: 700px; margin: 36px auto; padding: 18px 22px; border: 1px solid var(--border-mid); border-left: 2px solid var(--accent); border-radius: 12px; background: var(--surface); }
.disclosure-note .dn-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 8px; }
.disclosure-note p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }
.disclosure-note p strong { color: var(--text); font-weight: 600; }
.disclosure-note a { color: var(--accent-text); }
.prose .disclosure-note { margin: 36px 0; }

/* cache key bump: disclosure note */

/* Long openers read as a block on a phone. A second, lighter paragraph. */
.doc-standfirst-more { margin-top: 14px; font-weight: 400; }
.doc-standfirst-more strong { font-weight: 600; }

/* Footer: labelled groups. Desktop keeps the one-row footer with its
   dropdowns; the groups flatten into it. Phones get a two-column grid of
   labelled columns instead of a wrapping row of tiny links. */
.footer-group { display: contents; }
.footer-group-label { display: none; }
@media (max-width: 900px) {
  footer .footer-inner { align-items: flex-start; text-align: left; gap: 26px; padding: 32px var(--px) 22px; }
  footer .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; width: 100%; justify-items: start; }
  footer .footer-group, footer .footer-drop { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
  footer .footer-group-label, footer .footer-drop > a:first-child { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 2px; }
  footer .footer-drop > a:first-child:hover { color: var(--text-faint); }
  footer .footer-drop-menu { display: flex; flex-direction: column; gap: 11px; position: static; transform: none; margin: 0; padding: 0; min-width: 0; background: none; border: none; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; }
  footer .footer-drop-menu a, footer .footer-group > a { padding: 0; font-family: var(--sans, inherit); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text-dim); border-radius: 0; white-space: normal; }
  footer .footer-drop-menu a:hover, footer .footer-group > a:hover { background: none; color: var(--text); }
  footer .footer-bottom { text-align: left; padding: 0 var(--px) 26px; }
}

/* cache key bump: serif wordmark */

/* cache key bump: serif wordmark, second pass */

/* cache key bump: 2026-10-06 leaner strip */

/* cache key bump: 2026-10-06 booked proof grid */

/* cache key bump: 2026-10-06 about metrics */

/* cache key bump: 2026-10-07 faq to booking gap */

/* ==========================================================================
   Readability floor (17 Oct 2026)
   An audit found 38% of homepage text and 68% of directory text under 12px,
   down to 7px on phones. Labels never drop below 11px, and anything people
   read for a number (views, dates, handles, sources) sits at 12px.
   ========================================================================== */
.hero-eyebrow, .hero-stat, .hype-mute, .hype-mute.unmuted .label-unmuted,
.metric-label, .trusted-label, .trusted-name, .trusted-fund, .backers-label,
.section-eyebrow, .cs-eyebrow, .cs-stat-label, .cs-strip .cs-stat-label,
.service-tags, .arc-when, .arc-step .arc-when, .arc-step .arc-num, .arc-more,
.chart-title, .chart-annotation, .chart-svg .chart-annotation, .replay-btn,
.doc-toc h2, .doc-toc li::before, .doc-toc.toc-fold h2, .prose .doc-toc.toc-fold h2,
.doc-table th, .doc-table-wrap.table-tight th,
.doc-table-wrap.reflow td::before, .doc-table-wrap.reflow-narrow td::before,
.related h2, .lx-verticals-label, .doc-byline .author-role, .author-card-label,
.sc-label, .sc-more, .raise-sector, .prose h3.scope-label, .lxc-dur,
.lxc-rank span, .lp-open, .lp-sl, .lp-cn, .adopt-title, .cs-frame-meta,
.hub-pills a span, .hub-count, .prose h2.stage .stage-label,
.doc-toc-grouped .toc-group a, .disclosure-note .dn-label,
.breadcrumb, .breadcrumb a,
footer .footer-group-label, footer .footer-drop > a:first-child { font-size: 11px; }

.lxc-foot, .lxc-handle, .lxc-dm, .lx-count, .rc-date, .raise-meta, .raise-src,
.doc-meta, .footer-links, .footer-links a, .footer-bottom { font-size: 12px; }

/* ==========================================================================
   Large screens (27-inch and up)
   Above 1,800px the whole page scales up a step and the content column
   widens, so a 2560px screen is no longer a 1,180px strip with 690px of
   empty space either side. Reading columns keep their line length, because
   zoom scales the text with them.
   ========================================================================== */
@media (min-width: 1800px) { :root { --max-w: 1280px; } body { zoom: 1.08; } }
@media (min-width: 2200px) { :root { --max-w: 1360px; } body { zoom: 1.18; } }
/* At 11px the wide tracking on stat labels wrapped one word per line on
   phones; tighter tracking keeps them to two or three lines. */
@media (max-width: 640px) {
  .metric-label, .cs-stat-label, .cs-strip .cs-stat-label, .trusted-name, .trusted-fund { letter-spacing: 0.06em; }
  /* The five-stat strip outranked the two-column phone layout and stayed at
     four columns on phones. */
  .cs-strip.cs-strip-5 { grid-template-columns: repeat(2, 1fr); }
}

/* Launches Doomers ran, near the top of a vertical page. */
.lx-featured { max-width: var(--max-w); margin: 32px auto 0; padding: 0 var(--px); }
.lx-featured-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 0 0 14px; }
.lx-featured h2 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; margin: 0; }
.lx-featured-link { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); border-bottom: 1px solid var(--accent-text); padding-bottom: 2px; white-space: nowrap; }
.lx-featured-link:hover { color: var(--text); border-color: var(--text); }
.lx-featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.lx-featured-grid .related-card { height: 100%; }

/* ---------------------------------------------- alignment pass, Oct 2026
   One column, one edge. Boxes that sit outside .prose used to be 700px wide
   while the text column inside .prose/.doc-hero is 700px minus the gutter,
   so every contents box, inline CTA and author card hung ~56px past the
   text on both sides. Inside .prose they already fill the text column. */
.doc-toc, .cta-inline, .author-card, .doc-cta {
  width: calc(100% - 2 * var(--px)); max-width: calc(700px - 2 * var(--px));
  margin-left: auto; margin-right: auto;
}
.doc-cta { padding-left: 0; padding-right: 0; padding-bottom: 88px; }
.prose .doc-toc, .prose .cta-inline, .prose .author-card { width: auto; max-width: none; }
/* Inside .prose the contents label was picking up the serif h2 and its
   42px top margin: an empty band over a label that matched nothing else. */
.doc-toc h2, .prose .doc-toc h2 {
  font-family: var(--mono); font-size: 11px; font-weight: 500; line-height: 1.4;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint);
  margin: 0 0 16px; padding: 0; border: 0;
}
.doc-toc li { line-height: 1.5; }
.doc-toc li::before { top: 0; line-height: calc(14.5px * 1.5); }
/* Long copy beside a button: wrap the button under the text instead of
   squeezing the text into a ten-line column next to it. */
.cta-inline { flex-wrap: wrap; }
.cta-inline > p { flex: 1 1 320px; }
/* Buttons in a row never touch. */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.doc-cta .hero-actions { margin-top: 4px; }

/* No orphans: headings and labels balance, running text avoids a lone last word. */
p, li, td, th, figcaption, .rc-desc, .cs-text { text-wrap: pretty; }
h1, h2, h3, h4, .rc-title, .cs-title, .doc-meta, .trusted-label, .cs-eyebrow, .bk-eyebrow,
.cs-stat-label, .lx-stat-label, .lx-stat p, .metric-label, .stat-label, .doc-standfirst,
[class$="-label"], [class*="-label "], [class$="-eyebrow"] { text-wrap: balance; }

/* Two-up card grids: a last card on its own takes the whole row. */
.related-grid:not(.related-grid-3) > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Adjacent homepage case cards drew two rules with a gap between them. */
.case-section + .case-section .cs-card { border-top: 0; }

/* Directory pages (hub, verticals, months, backers): the hero sits on the
   same left edge as the stats, chips and grid under it, with the text kept
   to a reading measure. */
.doc-main:has(.lx-controls) > .breadcrumb,
.doc-main:has(.lx-controls) > .doc-hero { max-width: var(--max-w); }
.doc-main:has(.lx-controls) > .doc-hero > * { max-width: 760px; }

/* Filters: eight selects as two even rows of four, not five over three. */
.lx-filters.open { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .lx-filters.open { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .lx-filters.open { grid-template-columns: 1fr; } }

/* Dates never break across lines. */
time, .nowrap { white-space: nowrap; }
/* Inside .prose the grid already sits in the text column; its own gutter indented it twice. */
.prose .service-grid { padding: 0; max-width: none; }
.service-num { white-space: nowrap; }
/* Launch page post card: the head kept the directory card's own inset, so the
   avatar row sat 16px right of the post text under it. */
.lp-post .lxc-head { padding: 0; }
/* One short line and a button: keep them on one row. */
.cta-inline.lp-ours > p { flex: 1 1 160px; }
.raises-editions td:first-child, .raises-editions th:first-child { white-space: nowrap; }
/* Research charts: every row shares one set of columns, so the bar tracks
   end at the same x whatever the width of each row's value label. */
@supports (grid-template-columns: subgrid) {
  .rp-rows { grid-template-columns: minmax(150px, 190px) 1fr auto; }
  .rp-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
  @media (max-width: 600px) {
    .rp-rows { grid-template-columns: 1fr auto; }
  }
}
.rp-val { text-align: right; }
@media (max-width: 640px) { .cta-inline > p, .cta-inline.lp-ours > p { flex: none; } }

.doc-main:has(.lx-controls) > .doc-hero > .doc-meta { max-width: none; }

/* ------------------------------------------- directory layout, Oct 2026
   Row heads: a mono label on the left, one quiet link on the right. */
.lx-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 0 0 14px; }
h2.lx-verticals-label { font-weight: 500; line-height: 1.4; margin: 0; }
.lx-row-head .lx-verticals-label { margin: 0; }
.lx-breakdowns { max-width: var(--max-w); margin: 36px auto 0; }
.lx-small { margin-top: 32px; }
.lx-breakdowns .related-card, .lx-small .related-card { height: 100%; }
.lx-controls { margin-top: 48px; }

/* One control bar: search, three selects, and the button for the rest. */
.lx-bar { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)) auto; gap: 10px; }
.lx-bar .lx-select { flex: none; }
.lx-filters.open { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .lx-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-bar .lx-search { grid-column: 1 / -1; }
  .lx-filter-btn { justify-content: center; min-height: 46px; }
  .lx-filters.open { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Browse links sit under the grid: crawlable, out of the way. */
.lx-browse { margin-top: 64px; }
.lx-browse-head { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px); }
.lx-browse .lx-verticals:first-of-type { margin-top: 18px; }

/* The lighter card: whole card is the link. */
.lxc { position: relative; transition: border-color 0.25s, transform 0.3s var(--ease); }
.lxc:hover { border-color: var(--border-mid); }
.lxc-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lxc-link:focus-visible { outline: none; }
.lxc:has(.lxc-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.lxc:hover .lxc-play { background: rgba(0,0,0,0.8); transform: scale(1.06); }
.lxc-rank { font-size: 19px; color: var(--text); font-family: var(--serif); letter-spacing: -0.01em; }
.lxc-body { -webkit-line-clamp: 2; white-space: normal; color: var(--text-dim); font-size: 14px; }
.lxc-foot { justify-content: space-between; align-items: center; gap: 12px; font-size: 10.5px; }
.lxc-x { color: var(--text-dim); }
.lxc-x.lxc-hot { color: var(--accent-text); }
.lxc-date { color: var(--text-faint); margin-left: auto; }
/* Posts without media: the post itself fills the frame. */
.lxc-quote {
  display: flex; align-items: center; padding: 22px 24px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border-bottom: 1px solid var(--border);
}
.lxc-quote p {
  margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1.22; letter-spacing: -0.01em;
  color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* Copy under the hub and month grids reads at the text measure. */
.lx-read { margin-top: 72px; }
/* Phones: the two short rows above the grid swipe sideways instead of
   stacking six cards before the first launch. */
@media (max-width: 900px) {
  .lx-breakdowns .related-grid-3 {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px;
    scrollbar-width: none;
  }
  .lx-breakdowns .related-grid-3::-webkit-scrollbar { display: none; }
  .lx-breakdowns .related-card { scroll-snap-align: start; }
  .lx-row-head { flex-wrap: wrap; row-gap: 6px; }
}
/* Closing CTA buttons written as sibling links (tools/new_guide.py) never touch. */
.doc-cta > a { display: inline-block; margin: 6px; }