/* ═══════════════════════════════════════════════════════════════════════
   Monetizr Landing Site — SHARED PAGE STYLES
   ───────────────────────────────────────────────────────────────────────
   One stylesheet for every page on landing.monetizr.com. Everything a page
   needs beyond tokens.css + components.css (the canonical Blackbelt design
   system, synced from github.com/themonetizr/Blackbelt) lives HERE — this
   file is the landing site's own page-shell layer, not part of that library.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page shell ──────────────────────────────────────────────────────── */
.page { padding: var(--space-10) max(20px, calc(50% - 560px)) 0; }
@media (max-width: 700px) { .page { padding-left: 16px; padding-right: 16px; } }

.skip-link {
  position: fixed; top: var(--space-3); left: var(--space-3); z-index: var(--z-burst);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  background: var(--accent); color: var(--on-accent); font-weight: var(--fw-black);
  transform: translateY(calc(-100% - var(--space-6)));
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { color: var(--on-accent); transform: translateY(0); }

/* ── Nav (fixed, site-standard) ──────────────────────────────────────── */
.nav {
  padding: 20px 28px; display: flex; align-items: center; gap: var(--space-3);
  border-bottom: 1px solid var(--border-hairline);
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(11,14,37,0.8);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { display: block; width: auto; height: var(--height-logo-nav); }
.nav-tabs { display: flex; align-items: center; gap: var(--gap-nav-item); margin-left: auto; }
.nav-tabs .bb-tab {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--height-nav-tab); padding: 0 var(--space-3);
  border: 0; border-radius: 0;
  background: transparent; color: var(--muted);
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-regular);
  text-decoration: none; white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}
.nav-tabs .bb-tab:hover { color: var(--text); border-color: transparent; }
.nav-separator { width: 1px; height: var(--height-nav-separator); background: var(--line-strong); flex: 0 0 1px; }
@media (max-width: 860px) {
  .nav { flex-wrap: wrap; justify-content: center; }
  .nav-logo { width: 100%; justify-content: center; }
  .nav-tabs { order: 3; width: 100%; margin-left: 0; padding-top: var(--space-1); justify-content: center; overflow-x: auto; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
}
@media (max-width: 700px) {
  .nav { padding: 14px 16px; }
  .nav img { height: 44px; }
  .nav-tabs { gap: 20px; }
  .nav-tabs .bb-tab { padding-right: var(--space-1); padding-left: var(--space-1); }
}
@media print { body { padding-top: 0 !important; } }

/* ── Section furniture ───────────────────────────────────────────────── */
.eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); margin-bottom: 12px; }
.section-sep { height: 0; border: 0; border-top: 1px solid var(--border-hairline); margin: var(--space-10) 0 var(--space-7); }
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* H1: display scale, unconstrained width. Give the accent clause's line break
   the class="mtz-desktop-break" <br> (components.css hides it + inserts the
   space on mobile) — never a bare <br>. */
h1.page-h1 { font-size: var(--fs-display); font-weight: var(--fw-black); letter-spacing: var(--tracking-display); line-height: var(--lh-display); color: var(--text); margin: 0 0 12px; }
.accent { color: var(--accent); }
h1.page-h1 .accent { white-space: nowrap; }

.page-lede { width: 100%; max-width: none; color: var(--muted); text-wrap: wrap; font-size: var(--fs-lede); margin: 0 0 var(--space-7); }
@media (min-width: 901px) { .page-lede { max-width: 70%; } }
.page-lede-sentence { display: inline; }
.page-lede-sentence + .page-lede-sentence::before { content: ' '; }

.section-lede { width: 100%; max-width: none; color: var(--muted); text-wrap: wrap; font-size: var(--fs-lede); margin: 0 0 var(--space-6); }
.content-narrow { width: 100%; max-width: var(--measure-reading); }
.content-compact { max-width: var(--width-content-narrow); }
.content-copy { color: var(--muted); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }
.content-copy--spaced { margin-bottom: var(--space-5); }
.hook-copy { color: var(--text); font-size: var(--fs-hook); font-weight: var(--fw-bold); margin: 0; }
@media (min-width: 901px) { .hook-copy { max-width: 60%; } }
.hero-actions { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.link-inline { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.section-after-ruled { margin-top: calc(var(--space-10) + var(--space-7)); }

/* ── Story ───────────────────────────────────────────────────────────── */
.story-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; column-gap: var(--space-8); }
.story-heading,
.story-grid > .hook-copy,
.story-grid > .content-copy { grid-column: 1; }
.story-grid > .hook-copy { max-width: none; margin-bottom: var(--space-5); }
.story-image-mask { position: relative; grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-photo-crop); }
.story-image { position: absolute; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: auto; }
.story-stats { margin-top: var(--space-7); }
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; row-gap: 0; }
  .story-heading { order: 1; }
  .story-image-mask { order: 2; grid-column: 1; grid-row: auto; margin: var(--space-5) 0; }
  .story-grid > .hook-copy { order: 3; }
  .story-grid > .content-copy { order: 4; }
}

h2.section-h2 { font-size: var(--fs-h2-section); font-weight: var(--fw-bold); color: var(--text); margin: 0 0 var(--space-3); }

/* ── Grids ───────────────────────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-card); }
@media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr; } }
.card-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-black); color: var(--accent); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin: 0 0 8px; }
.card-title { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text); line-height: var(--lh-tight); margin: 0 0 var(--space-2); }
.card-copy { color: var(--muted); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }
.layer-card { position: relative; }
.layer-card-icon { position: absolute; top: var(--space-5); right: var(--space-5); color: var(--faint); font-size: var(--space-7); line-height: 1; }
.layer-card-icon .licon-svg { stroke-width: 1.5; }

/* CSS-triangle line arrow: flat muted fill, no separate stroke — reads as
   one merged shape with the line it tips. Points right by default;
   --down swaps borders to point down (infra-scheme's vertical connectors). */
.mtz-line-arrow {
  display: inline-block; width: 0; height: 0;
  border-top: calc(var(--size-line-arrow-span) / 2) solid transparent;
  border-bottom: calc(var(--size-line-arrow-span) / 2) solid transparent;
  border-left: var(--size-line-arrow-depth) solid var(--muted);
}
.mtz-line-arrow--down {
  border-top: var(--size-line-arrow-depth) solid var(--muted); border-bottom: 0;
  border-left: calc(var(--size-line-arrow-span) / 2) solid transparent;
  border-right: calc(var(--size-line-arrow-span) / 2) solid transparent;
}

/* ── Infra scheme (demand → Monetizr hub → supply, with a measurement
   feedback loop) ─────────────────────────────────────────────────────────
   A layered schematic, not a card grid or a single flat box. Reads left to
   right: three demand sources bus into a shared trunk, a spine carries that
   into the hub (the Monetizr mark, ringed gold — the diagram's one deliberate
   accent point), a second spine + trunk fan back out to two supply facts.
   Depth comes from a recessed backing well plus a second surface peeking out
   behind every node — never a drop shadow, per the card rule. */
.infra-scheme {
  position: relative;
  margin: var(--space-9) 0 0;
  padding: var(--space-8);
  /* nested-squircle rule: corner radius grows by exactly the padding
     around it, same as the backing-plate/node relationship, so every
     concentric corner in the schematic reads as one continuous family
     instead of a generic panel radius. */
  border-radius: calc(var(--radius-infra-node) + var(--space-8));
  background-color: var(--surface-recessed);
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
  background-size: 24px 24px;
  border: 1px solid var(--border-hairline);
  overflow: hidden;
}
.infra-grid { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--width-infra-wire); justify-content: center; }
.infra-demand { position: relative; display: flex; flex-direction: column; gap: 10px; }
/* Reach aligns to Brands, Apps aligns to Data vendors — match the
   demand column's full stacked height (same 10px gaps) and let
   space-between push the two supply boxes to the same top/bottom rows
   instead of a plain gap, so the middle demand row (Retail) has no
   unmirrored counterpart. */
.infra-supply { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: calc(var(--height-infra-node) * 3 + 10px * 2); }
/* backing plate behind each column's whole box stack — 10px outset on
   every side, corners scaled up from the node radius to read as one
   continuous squircle rather than a bigger version of the same corner,
   same hairline color as the outer arc connector. Painted first (a
   pseudo-element) so the real node cards stack on top without needing
   z-index. */
.infra-demand::before, .infra-supply::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: rgba(11,14,37,0.90);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-hairline);
  border-radius: calc(var(--radius-infra-node) + 10px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events: none;
  z-index: 0;
}

/* On packet contact, the entire demand backing plate becomes a glowing gold
   hairline at once. The complete outline pulses, then switches off as one
   shape—there is no tracing, meeting point, directional wipe, or fade. */
.infra-demand::after {
  content: '';
  position: absolute;
  inset: -10px;
  padding: 2px;
  border-radius: calc(var(--radius-infra-node) + 10px);
  background: var(--accent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: none;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.infra-demand.is-arc-hit::after {
  animation: infra-arc-hit 1400ms cubic-bezier(0.16, 1, 0.3, 1) both,
             infra-container-scale 1150ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 50ms, 50ms;
}
.infra-demand.is-arc-hit::before {
  animation: infra-arc-fill 1100ms ease-in-out both,
             infra-container-scale 1150ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 50ms, 50ms;
}
.infra-demand.is-arc-hit .infra-node-card {
  animation: infra-inner-hairlines 1100ms ease-in-out both;
  animation-delay: 50ms;
}
.infra-demand.is-arc-hit .infra-node-image {
  transform-origin: center;
  animation: infra-icon-touch 1100ms cubic-bezier(0.45, 0, 0.55, 1) both;
  animation-delay: 50ms;
}
@keyframes infra-arc-hit {
  0%   { opacity: 0; filter: drop-shadow(0 0 4px rgba(254,201,2,0.9)) drop-shadow(0 0 18px rgba(254,201,2,0.55)) drop-shadow(0 0 36px rgba(254,201,2,0.25)); }
  18%  { opacity: 1; filter: drop-shadow(0 0 6px rgba(254,201,2,1)) drop-shadow(0 0 28px rgba(254,201,2,0.78)) drop-shadow(0 0 50px rgba(254,201,2,0.38)); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  46.36% { opacity: 1; padding: 2px; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  38%  { filter: drop-shadow(0 0 4px rgba(254,201,2,0.82)) drop-shadow(0 0 16px rgba(254,201,2,0.48)) drop-shadow(0 0 32px rgba(254,201,2,0.2)); }
  82.14% { opacity: 0; padding: 1px; }
  58%  { filter: drop-shadow(0 0 6px rgba(254,201,2,1)) drop-shadow(0 0 26px rgba(254,201,2,0.72)) drop-shadow(0 0 46px rgba(254,201,2,0.34)); }
  78%  { filter: drop-shadow(0 0 4px rgba(254,201,2,0.78)) drop-shadow(0 0 14px rgba(254,201,2,0.42)) drop-shadow(0 0 28px rgba(254,201,2,0.18)); }
  100% { opacity: 0; filter: drop-shadow(0 0 3px rgba(254,201,2,0.65)) drop-shadow(0 0 10px rgba(254,201,2,0.28)); }
}
@keyframes infra-arc-hit-mobile {
  0%   { opacity: 0; filter: drop-shadow(0 0 4px rgba(254,201,2,0.9)) drop-shadow(0 0 14px rgba(254,201,2,0.52)) drop-shadow(0 0 28px rgba(254,201,2,0.22)); }
  18%  { opacity: 1; filter: drop-shadow(0 0 5px rgba(254,201,2,1)) drop-shadow(0 0 22px rgba(254,201,2,0.72)) drop-shadow(0 0 38px rgba(254,201,2,0.32)); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  46.36% { opacity: 1; padding: 2px; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  38%  { filter: drop-shadow(0 0 3px rgba(254,201,2,0.8)) drop-shadow(0 0 12px rgba(254,201,2,0.44)) drop-shadow(0 0 24px rgba(254,201,2,0.18)); }
  82.14% { opacity: 0; padding: 1px; }
  58%  { filter: drop-shadow(0 0 5px rgba(254,201,2,1)) drop-shadow(0 0 20px rgba(254,201,2,0.68)) drop-shadow(0 0 34px rgba(254,201,2,0.28)); }
  78%  { filter: drop-shadow(0 0 3px rgba(254,201,2,0.76)) drop-shadow(0 0 10px rgba(254,201,2,0.38)) drop-shadow(0 0 20px rgba(254,201,2,0.15)); }
  100% { opacity: 0; filter: drop-shadow(0 0 2px rgba(254,201,2,0.6)) drop-shadow(0 0 8px rgba(254,201,2,0.24)); }
}
@keyframes infra-arc-fill {
  0%   { background-color: rgba(11,14,37,0.90); filter: brightness(1); }
  33%  { background-color: rgba(11,14,37,1); filter: brightness(1.2); }
  59%  { background-color: rgba(11,14,37,1); filter: brightness(1.2); }
  78%  { background-color: rgba(11,14,37,0.97); filter: brightness(1.14); }
  92%  { background-color: rgba(11,14,37,0.915); filter: brightness(1.03); }
  100% { background-color: rgba(11,14,37,0.90); filter: brightness(1); }
}
@keyframes infra-container-scale {
  0% {
    inset: -10px;
    border-radius: calc(var(--radius-infra-node) + 10px);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  38% {
    inset: -15px;
    border-radius: calc(var(--radius-infra-node) + 15px);
  }
  56.43% {
    inset: -15px;
    border-radius: calc(var(--radius-infra-node) + 15px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  100% {
    inset: -10px;
    border-radius: calc(var(--radius-infra-node) + 10px);
  }
}
@keyframes infra-inner-hairlines {
  0%   { border-color: rgba(255,255,255,0.08); }
  18%  { border-color: rgba(255,255,255,0.13); }
  59%  { border-color: rgba(255,255,255,0.13); }
  78%  { border-color: rgba(255,255,255,0.115); }
  92%  { border-color: rgba(255,255,255,0.0875); }
  100% { border-color: rgba(255,255,255,0.08); }
}
@keyframes infra-icon-touch {
  0%   { transform: scale(1); }
  24%  { transform: scale(1.08); }
  45%  { transform: scale(1); }
  58%  { transform: scale(1.03); }
  68%  { transform: scale(1); }
  77%  { transform: scale(1.015); }
  85%  { transform: scale(1); }
  90%  { transform: scale(1.006); }
  94%  { transform: scale(1); }
  96%  { transform: scale(1.003); }
  98%  { transform: scale(1); }
  99%  { transform: scale(1.0015); }
  100% { transform: scale(1); }
}

/* Wires: a full-bleed SVG overlay (see infra-wires.js), not CSS border
   segments — real cubic-bezier curves so the three demand sources bend
   into a shared trunk and the hub fans back out to the two supply facts,
   instead of right-angled bus bars. Absolutely positioned and taken out
   of grid flow entirely, so it never competes with the three grid columns
   for a track; JS measures the actual node/hub rects on load/resize and
   writes the path + dot geometry in, so it always lines up with wherever
   the columns actually land. */
/* z-index 2 (above the node/hub cards at z-index 1) so the connection
   dots at each box/circle edge sit visibly on top of the surface they
   touch, not tucked half-behind it. The curves only reach that far at
   their very endpoint, so the overlap onto the card is just the dot
   itself, not the line. */
.infra-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.infra-wires .wire-line { fill: none; stroke-linecap: round; }
.infra-wires .wire-line--muted { stroke: var(--muted-50); stroke-width: var(--width-infra-wire-stroke); }
.infra-wires .wire-line--gold { stroke: var(--line-gold); stroke-width: var(--width-infra-wire-stroke); }
.infra-wires .wire-line--hairline { stroke: var(--border-hairline); stroke-width: var(--width-infra-wire-stroke); }
.infra-wires .wire-dot--muted { fill: var(--muted); }
.infra-wires .wire-dot--gold { fill: var(--accent); }
.infra-wires .wire-dot--hairline { fill: var(--border-hairline); }
.infra-demand, .infra-supply, .infra-hub { position: relative; z-index: 1; } /* paint above the scheme's own canvas, below the wire overlay's dots */
.infra-demand > .infra-node, .infra-supply > .infra-node { z-index: 2; } /* cards stay above their backing plate and animated hairline */

/* Node: a fixed-size slot (unified across all 6 boxes — 5 nodes + the hub's
   own slot — so demand's single-line labels and supply's icon+label+caption
   occupy identical footprints). Elevation is a real second element behind
   the card, not a ::before — a ::before with z-index:-1 only paints above
   its OWN element's background (CSS stacking rule), so it would show the
   *card's* background peeking out, not a true backing plate. Two siblings,
   both z-index'd, avoids that trap. */
.infra-node { position: relative; width: var(--width-infra-node); height: var(--height-infra-node); }
.infra-node-card {
  position: absolute; z-index: 2; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  /* frosted glass, same recipe as .mtz-alert (translucent fill + blurred
     saturated backdrop + dropdown shadow + a hairline top highlight for
     the glass "sheen"), pushed stronger than the alert's 12px since the
     texture sitting behind here is a subtle dot-grid, not page content —
     needs more blur radius to actually read as frosted rather than flat. */
  background: var(--glass-control);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-hairline);
  box-shadow: 0 16px 32px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.08);
  border-radius: var(--radius-infra-node); padding: var(--space-3);
}
/* square image tiles, one row per box, sitting above the label. Empty =
   still a placeholder (brand/partner logo to come); filled with an <img>
   once real art exists — the app icons already carry their own Apple-style
   squircle mask baked into the asset, so the tile just frames it; the
   flag (a round badge, not a squircle) gets --flag's smaller contained
   sizing instead of a full-bleed cover. Each box gets however many tiles
   its content needs (1–3), same tile size throughout. */
.infra-node-images { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.infra-node-image {
  width: var(--size-infra-node-image); height: var(--size-infra-node-image);
  border-radius: calc(var(--radius-infra-node) * 0.4);
  background: var(--navy-700); border: 1px solid var(--border-hairline);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  flex: none;
}
.infra-node-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the flag is already a round badge — no tile box behind it, just the
   circle itself, same footprint as the other tiles. */
.infra-node-image--flag { background: none; border: 0; width: calc(var(--size-infra-node-image) * 0.8); height: calc(var(--size-infra-node-image) * 0.8); }
.infra-node-image--flag img { width: 100%; height: 100%; object-fit: contain; }
.infra-node-label { color: var(--text); font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.infra-label-mobile { display: none; }
.infra-node-caption { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-tight); margin-top: var(--space-1); }

/* hub: the same fixed node-sized slot as every other box (for grid/wire
   alignment). Three concentric layers, biggest to smallest: the breathing
   glow, a muted hairline ring the wires actually terminate on (with a
   visible gap between it and the disc — an orbit, not a card outline),
   and the smaller filled disc holding the Monetizr mark. */
.infra-hub { position: relative; width: var(--width-infra-node); height: var(--height-infra-node); justify-self: center; }
.infra-hub-halo {
  position: absolute; z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: var(--size-infra-hub-ring); height: var(--size-infra-hub-ring); border-radius: 50%;
  animation: hub-breathe var(--dur-hub-breathe) ease-in-out infinite;
}
@keyframes hub-breathe {
  0%, 100% { box-shadow: var(--shadow-hub-breathe-min); }
  50%      { box-shadow: var(--shadow-hub-breathe-max); }
}
/* geometry only now — the hairline itself is excluded (the disc below
   fills all the way out to this same circumference instead), but the
   element stays as the anchor the wires + connection dots measure
   against, and still carries the two via-dots. */
.infra-hub-ring {
  position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: var(--size-infra-hub-ring); height: var(--size-infra-hub-ring);
  border-radius: 50%;
}
/* no dot at the hub end — the wires just run straight into the circle,
   dot-free (only the box-edge ends keep their connection dot). */
.infra-hub-card {
  position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: var(--size-infra-hub-disc); height: var(--size-infra-hub-disc);
  display: flex; align-items: center; justify-content: center;
  /* same frosted-glass fill as the node cards. */
  background: var(--glass-control);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-dropdown), inset 0 1px 0 rgba(255,255,255,0.08);
  border: 1px solid var(--border-hairline); border-radius: 50%;
}
.infra-hub-logo { display: block; height: var(--size-infra-hub-logo); width: auto; }

/* flow markers: small packets traveling the curved wires (SVG
   <animateMotion> along each wire's own path, drawn by infra-wires.js) —
   muted grey on the demand side (converging), gold on the supply side
   (diverging). */
.infra-wires .wire-flow--muted { fill: var(--muted); }
.infra-wires .wire-flow--gold {
  fill: var(--accent);
  filter: drop-shadow(0 0 2px rgba(254,201,2,0.95)) drop-shadow(0 0 8px rgba(254,201,2,0.58)) drop-shadow(0 0 20px rgba(254,201,2,0.24));
}
.infra-wires .wire-tail {
  fill: none;
  stroke-width: 1px;
  stroke-linecap: butt;
}
@media (prefers-reduced-motion: reduce) {
  .infra-hub-halo { animation: none; display: none; }
  .infra-wires .wire-flow--muted, .infra-wires .wire-flow--gold { display: none; }
  .infra-demand.is-arc-hit .infra-node-image,
  .infra-demand.is-arc-hit .infra-node-card,
  .infra-demand.is-arc-hit::before,
  .infra-demand.is-arc-hit::after { animation: none; }
}

/* feedback loop: solid hairline return path, drawn once — no infinite motion */
.infra-feedback { margin-top: var(--space-8); text-align: center; color: var(--faint); font-family: var(--font-sans); font-size: var(--fs-plan-label); font-weight: var(--fw-regular); line-height: var(--lh-body); }
.infra-feedback-strong { display: inline-block; margin-bottom: var(--space-1); color: var(--accent); font-weight: var(--fw-black); }
.infra-feedback .licon { margin-right: var(--space-1); color: var(--muted); font-size: var(--fs-body); vertical-align: var(--icon-inline-shift); }

/* page-load entrance: fade + rise, staggered once on load — the hero's
   "appear-on-load" register, not a repeated interaction, so it sits outside
   the <200ms feedback cap and uses --ease-in-out per animation-states.md. */
.infra-node, .infra-hub, .infra-feedback { animation: infra-appear var(--dur-infra-reveal) var(--ease-in-out) both; }
.infra-demand .infra-node:nth-child(1) { animation-delay: 0ms; }
.infra-demand .infra-node:nth-child(2) { animation-delay: var(--stagger-infra); }
.infra-demand .infra-node:nth-child(3) { animation-delay: calc(var(--stagger-infra) * 2); }
.infra-hub { animation-delay: calc(var(--stagger-infra) * 3); }
.infra-supply .infra-node:nth-child(1) { animation-delay: calc(var(--stagger-infra) * 4); }
.infra-supply .infra-node:nth-child(2) { animation-delay: calc(var(--stagger-infra) * 5); }
.infra-feedback { animation-delay: calc(var(--stagger-infra) * 6); }
@keyframes infra-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .infra-node, .infra-hub, .infra-feedback { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  /* A constant-speed sweep avoids visible angular stepping on the smaller
     backing plate. Scale the expensive blur layers with the mobile shape so
     the conic mask can repaint smoothly without changing desktop's glow. */
  .infra-demand.is-arc-hit::after {
    animation-name: infra-arc-hit-mobile, infra-container-scale;
    animation-duration: 1400ms, 1150ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1);
    animation-delay: 50ms, 50ms;
  }
  .infra-grid { grid-template-columns: 1fr; row-gap: var(--space-8); justify-items: center; }
  .infra-demand, .infra-supply { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .infra-demand, .infra-supply { width: 100%; align-items: center; }
  .infra-demand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .infra-demand .infra-node { width: 100%; }
  .infra-demand .infra-node:last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - 10px) / 2); }
  .infra-demand .infra-node:nth-child(-n + 2) .infra-node-label { white-space: nowrap; }
  .infra-label-desktop { display: none; }
  .infra-label-mobile { display: inline; }
  .infra-demand .infra-node:first-child .infra-node-image:last-child { display: none; }
  /* undo the desktop-only alignment trick (fixed height + space-between
     that stretches .infra-supply to match the demand column's height) —
     on mobile the backing plate should hug its own two boxes with the
     same 10px gap the demand column uses, not the desktop's full span. */
  .infra-supply { width: 100%; height: auto; flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 10px; }
  .infra-supply .infra-node { width: calc((100% - 10px) / 2); }
  .infra-supply .infra-node:last-child .infra-node-image:last-child { display: none; }
}

/* ── Stat row ────────────────────────────────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-stat); padding: var(--space-6) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat-row > div { text-align: center; }
.stat-row .num { font-size: var(--fs-stat); font-weight: var(--fw-black); color: var(--accent); line-height: 1.1; }
.stat-row .lbl { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.stat-row.stat-row-3 { grid-template-columns: repeat(3, 1fr); }
.proof-metrics { width: 100%; margin: var(--space-8) 0 0; padding: 0; gap: var(--gap-card); border-top: 0; border-bottom: 0; }
.proof-metrics > div { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-9) var(--space-6); text-align: center; background: transparent; border: 1px solid var(--border-hairline); border-radius: var(--radius-xl); }
.proof-metrics .num { font-size: var(--fs-stat-hero); letter-spacing: var(--tracking-display); white-space: nowrap; }
.proof-metrics .lbl { margin-top: var(--space-2); color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-tight); white-space: nowrap; }
@media (min-width: 701px) {
  .proof-metrics > div { border: 0; border-radius: 0; }
  .proof-metrics > div + div::before { content: ''; position: absolute; top: var(--space-6); bottom: var(--space-6); left: calc(var(--gap-card) * -0.5); width: 1px; background: var(--border-hairline); }
}
@media (max-width: 700px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); }
  .stat-row.stat-row-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .proof-metrics.stat-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .proof-metrics > div { min-height: 0; box-sizing: border-box; justify-content: flex-start; padding: var(--space-3) var(--space-2); border: 0; border-radius: 0; }
  .proof-metrics > div + div { border-left: 1px solid var(--border-hairline); }
  .proof-metrics .layer-card-icon { display: none; }
  .proof-metrics .num { font-size: clamp(24px, 8vw, 34px); }
  .proof-metrics .lbl { display: block; font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); white-space: normal; }
  h1.page-h1 { font-size: var(--fs-display-mobile) !important; }
}

/* ── Sliced grids (brand and investor names) ─────────────────────────── */
.sliced-grid { display: grid; width: 100%; gap: 0; margin-top: var(--space-7); }
.sliced-grid > span { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 88px; box-sizing: border-box; padding: var(--space-5) var(--space-6); color: var(--text); font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-tight); text-align: center; }
.sliced-grid > span + span { border-left: 1px solid var(--border-hairline); }
.brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sliced-grid.brand-grid > span { height: 112px; border: 0; }
.brand-logo { display: block; width: min(100%, var(--brand-w, 96px)); height: var(--brand-h, 52px); object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: .78; transform: translateY(-1px); }
/* Fixed optical sizes travel with each logo, so grid cells can be reordered safely. */
.brand-logo[src$="/carat.svg"]          { --brand-w: 88.6px;  --brand-h: 33.1px; }
.brand-logo[src$="/dentsu.svg"]         { --brand-w: 98.6px;  --brand-h: 21.1px; }
.brand-logo[src$="/mars.svg"]           { --brand-w: 85.4px;  --brand-h: 28.7px; }
.brand-logo[src$="/pernod-ricard.svg"]  { --brand-w: 305.2px; --brand-h: 118.8px; transform: translateY(-11px); }
.brand-logo[src$="/coca-cola.svg"]      { --brand-w: 304.2px; --brand-h: 98.1px; }
.brand-logo[src$="/visa.svg"]           { --brand-w: 216px;   --brand-h: 76.2px; }
.brand-logo[src$="/amazon.svg"]         { --brand-w: 103.7px; --brand-h: 34.9px; }
.brand-logo[src$="/disney-plus.svg"]    { --brand-w: 96px;    --brand-h: 52px; transform: translateY(-13px); }
.brand-logo[src$="/apple-tv-plus.svg"]  { --brand-w: 85.5px;  --brand-h: 32.1px; }
.brand-logo[src$="/spotify.svg"]        { --brand-w: 49.2px;  --brand-h: 49.2px; }
.brand-logo[src$="/universal.svg"]      { --brand-w: 90px;    --brand-h: 48px; }
.brand-logo[src$="/bmw.svg"]            { --brand-w: 56.4px;  --brand-h: 56.4px; }
.brand-logo[src$="/audi.svg"]           { --brand-w: 243.4px; --brand-h: 85.9px; }
.brand-logo[src$="/kfc.svg"]            { --brand-w: 230.6px; --brand-h: 74.4px; }
.brand-logo[src$="/heineken.svg"]       { --brand-w: 142px;   --brand-h: 25.5px; }
.brand-logo[src$="/sprite.svg"]         { --brand-w: 85.5px;  --brand-h: 32.6px; }
.brand-logo[src$="/twix.svg"]           { --brand-w: 80.6px;  --brand-h: 35.7px; }
.brand-logo[src$="/jameson.svg"]        { --brand-w: 49px;    --brand-h: 49px; }
.brand-logo[src$="/theraflu.svg"]       { --brand-w: 111.4px; --brand-h: 26px; transform: translateY(-4px); }
.brand-logo[src$="/dude-wipes.svg"]     { --brand-w: 117.6px; --brand-h: 26.9px; }
.investor-marquee { width: 100%; margin-top: var(--space-7); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.investor-marquee-track { display: flex; width: max-content; animation: investor-marquee-left 36s linear infinite; will-change: transform; }
.investor-marquee.is-interactive { cursor: grab; touch-action: pan-y; user-select: none; }
.investor-marquee.is-interactive.is-dragging { cursor: grabbing; }
.investor-marquee.is-interactive .investor-marquee-track { animation: none; }
.investor-marquee.is-interactive .investor-logo { pointer-events: none; -webkit-user-drag: none; }
.investor-grid { display: flex; flex: 0 0 auto; align-items: center; gap: 70px; padding-right: 70px; }
.investor-grid > span { display: contents; }
.investor-logo { display: block; width: 184.7px; height: 69.1px; object-fit: contain; }
.investor-logo[src$="/berkley-angel-network.svg"] { width: 208.7px; height: 78.1px; }
.investor-logo[src$="/techstars.svg"],
.investor-logo[src$="/uptech.svg"] { width: 203.2px; height: 76px; }
/* Trim each SVG's transparent horizontal canvas from flex layout without
   changing the artwork size, so the shared gap measures visible edge to
   visible edge rather than viewBox to viewBox. */
.investor-logo[src$="/11-11-ventures.svg"] { margin-inline: -56px; }
.investor-logo[src$="/alfabeat.svg"] { margin-left: -14.4px; margin-right: -14.6px; }
.investor-logo[src$="/berkley-angel-network.svg"] { margin-left: -6.3px; }
.investor-logo[src$="/change-ventures.svg"] { margin-inline: -34.7px; }
.investor-logo[src$="/cox.svg"] { margin-inline: -48.8px; }
.investor-logo[src$="/etc-labs.svg"] { margin-left: -6.6px; margin-right: -10.2px; }
.investor-logo[src$="/ludus-ventures.svg"] { margin-inline: -38.8px; }
.investor-logo[src$="/techstars.svg"] { margin-inline: -30.5px; }
.investor-logo[src$="/uptech.svg"] { margin-inline: -36.6px; }
@keyframes investor-marquee-left { to { transform: translateX(-50%); } }
@media (max-width: 700px) {
  .sliced-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sliced-grid > span:nth-child(odd) { border-left: 0; }
  .sliced-grid > span:nth-child(even) { border-left: 1px solid var(--border-hairline); }
  .sliced-grid > span:nth-child(n + 3) { border-top: 1px solid var(--border-hairline); }
  .sliced-grid.brand-grid > span { border: 0; }
  .brand-grid > span:nth-child(n + 13) { display: none; }
  .investor-logo { width: 179.6px; height: 67.2px; }
  .investor-logo[src$="/berkley-angel-network.svg"] { width: 202.9px; height: 76px; }
  .investor-logo[src$="/techstars.svg"],
  .investor-logo[src$="/uptech.svg"] { width: 197.5px; height: 73.9px; }
  .investor-logo[src$="/11-11-ventures.svg"] { margin-inline: -54.4px; }
  .investor-logo[src$="/alfabeat.svg"] { margin-left: -14px; margin-right: -14.2px; }
  .investor-logo[src$="/berkley-angel-network.svg"] { margin-left: -6.1px; }
  .investor-logo[src$="/change-ventures.svg"] { margin-inline: -33.7px; }
  .investor-logo[src$="/cox.svg"] { margin-inline: -47.4px; }
  .investor-logo[src$="/etc-labs.svg"] { margin-left: -6.4px; margin-right: -9.9px; }
  .investor-logo[src$="/ludus-ventures.svg"] { margin-inline: -37.7px; }
  .investor-logo[src$="/techstars.svg"] { margin-inline: -29.6px; }
  .investor-logo[src$="/uptech.svg"] { margin-inline: -35.6px; }
}
@media (prefers-reduced-motion: reduce) {
  .investor-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .investor-marquee-track { animation: none; }
  .investor-grid[aria-hidden="true"] { display: none; }
}
.angel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-7); margin-top: 50px; }
.angel-grid > div { display: flex; flex-direction: column; align-items: center; text-align: center; }
.angel-photo { display: block; width: 70px; height: 70px; margin-bottom: var(--space-3); border: 1px solid var(--border-hairline); border-radius: var(--radius-full); object-fit: cover; }
.angel-name { display: block; color: var(--text); font-size: 16px; font-weight: var(--fw-bold); }
.angel-role { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 700px) { .angel-grid { grid-template-columns: repeat(2, 1fr); row-gap: 50px; } }

/* ── Founder card (reuses .case-quote-avatar's monogram language) ──────── */
.founder-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-card); margin-top: var(--space-8); }
.founder-head { display: flex; align-items: center; gap: var(--space-6); margin-bottom: var(--space-8); }
.case-quote-avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--size-case-quote-avatar); height: var(--size-case-quote-avatar); border: 1px solid var(--border-hairline); border-radius: var(--radius-full); background: var(--surface-card); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-black); flex: 0 0 auto; }
.founder-head .case-quote-avatar { width: calc(var(--size-case-quote-avatar) * 1.3); height: calc(var(--size-case-quote-avatar) * 1.3); font-size: var(--fs-sm); }
.founder-photo { display: block; width: calc(var(--size-case-quote-avatar) * 1.3); height: calc(var(--size-case-quote-avatar) * 1.3); object-fit: cover; border: 1px solid var(--border-hairline); border-radius: var(--radius-full); flex: 0 0 auto; }
.founder-name { color: var(--text); font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.founder-role { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
@media (max-width: 700px) { .founder-grid { grid-template-columns: 1fr; } }

/* ── Case quote (Blackbelt's quote pattern: big mark + rule beside the
   text) — nested inside .mtz-card here, so no extra background/padding
   of its own; .founder-head above already carries the photo/name/title. */
.case-quote { display: flex; gap: var(--space-4); margin: 0; padding: 0; background: none; }
.case-quote-mark-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 20px; }
.case-quote-mark { font-family: 'Alfa Slab One', serif; color: var(--muted); font-size: 28px; line-height: 1; margin-bottom: -12px; }
.case-quote-rule { flex: 1; width: 2px; min-height: 40px; margin-top: 2px; background: var(--border-hairline); border-radius: 1px; }
.case-quote-content { flex: 1; min-width: 0; }
.case-quote-content p { margin: 0; color: var(--muted); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); }

/* ── Values grid ─────────────────────────────────────────────────────── */
.value-main-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-card); margin-top: var(--space-7); }
.value-main-grid > div { padding: var(--space-6); border: 1px solid var(--border-hairline); border-radius: var(--radius-box); }
.value-main-grid .value-icon { color: var(--accent); }
.value-main-grid h4 { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text); margin: 0 0 8px; }
.value-main-grid p { color: var(--muted); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }
.value-secondary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 0; margin-top: var(--space-7); }
.value-secondary-grid > div { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 136px; box-sizing: border-box; padding: var(--space-7) var(--space-6); text-align: center; }
.value-secondary-grid > div + div { border-left: 1px solid var(--border-hairline); }
.value-secondary-grid > div:nth-child(4n + 1) { border-left: 0; }
.value-secondary-grid > div:nth-child(n + 5) { border-top: 1px solid var(--border-hairline); }
.value-secondary-grid .value-icon { color: var(--faint); }
.value-icon { font-size: var(--space-7); line-height: 1; margin-bottom: var(--space-3); }
.value-icon .licon-svg { stroke-width: 1.5; }
.value-secondary-grid h4 { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text); margin: 0; }
@media (max-width: 900px) {
  .value-main-grid { grid-template-columns: 1fr; }
  .value-secondary-grid { grid-template-columns: repeat(2, 1fr); row-gap: 0; }
  .value-secondary-grid > div { min-height: 112px; padding: var(--space-4); }
  .value-secondary-grid > div:nth-child(odd) { border-left: 0; }
  .value-secondary-grid > div:nth-child(n + 3) { border-top: 1px solid var(--border-hairline); }
}

/* ── Capture panel (site-standard bottom CTA, matches Blackbelt pages) ── */
.contact-section { margin-top: var(--space-10); }
.capture-panel { background: var(--surface); border: var(--border-modal); border-radius: var(--radius-box); padding: var(--space-7); }
.capture-panel .capture-title { font-size: var(--fs-h2-section); font-weight: var(--fw-bold); color: var(--text); margin-bottom: var(--space-2); }
.capture-panel p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--space-5); }
.capture-actions { display: flex; align-items: center; gap: var(--gap-cta-followup); flex-wrap: wrap; }
@media (max-width: 700px) {
  .capture-panel { padding: var(--space-7) var(--space-4) var(--space-5); }
  .capture-actions { flex-direction: column; align-items: center; gap: var(--gap-cta-followup); text-align: center; }
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer { margin: var(--footer-gap-top) 0 var(--footer-gap-bottom); padding: 0 var(--space-4); text-align: center; font-size: var(--fs-lede); color: var(--faint); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.site-footer-links { display: flex; align-items: center; gap: var(--space-5); font-size: var(--fs-sm); }
.site-footer-sep { width: 1px; height: 1em; background: var(--line-strong); flex-shrink: 0; }
.site-footer-links a { color: var(--faint); text-decoration: none; }
.site-footer-links a:hover { color: var(--accent); }

/* ── Legal pages (Privacy / Terms) ──────────────────────────────────── */
.hero { padding: 0 0 32px; }
.hero .eyebrow { margin-bottom: 12px; }
.hero h1 { font-family: var(--font-sans); font-size: var(--fs-display); font-weight: var(--fw-black); letter-spacing: var(--tracking-display); color: var(--text); line-height: var(--lh-display); margin-bottom: 14px; }
.hero .updated { font-size: var(--fs-lede); color: var(--muted); line-height: var(--lh-body); }
@media (max-width: 700px) { .hero h1 { font-size: var(--fs-display-mobile); } }

.legal-toc { background: var(--surface); border: 1px solid var(--border-hairline); border-radius: var(--radius-box); padding: var(--space-6); margin-bottom: var(--space-9); }
.legal-toc-title { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-4); }
.legal-toc ol { list-style: none; column-count: 2; column-gap: var(--space-6); counter-reset: toc; margin: 0; padding: 0; }
.legal-toc li { counter-increment: toc; font-size: var(--fs-body); break-inside: avoid; margin-bottom: var(--space-2); }
.legal-toc li a { display: flex; color: var(--muted); font-weight: var(--fw-regular); }
.legal-toc li a::before { content: counter(toc) '.'; display: inline-block; width: 1.6em; flex-shrink: 0; color: var(--faint); }
.legal-toc li a:hover { color: var(--accent); }
@media (max-width: 700px) { .legal-toc ol { column-count: 1; } }

.legal-body h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--text); border-top: 1px solid var(--border-hairline); margin: var(--space-7) 0 var(--space-3); padding-top: var(--space-7); scroll-margin-top: calc(var(--kb-nav-h, 77px) + var(--space-4)); }
.legal-body h2:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.legal-body > p + h2:first-of-type { border-top: 1px solid var(--border-hairline); margin-top: var(--space-7); padding-top: var(--space-7); }
.legal-body p { font-size: var(--fs-body); color: var(--muted); line-height: var(--lh-body); width: 100%; margin-bottom: var(--space-2); }
.legal-body ul,
.legal-body ol { width: 100%; margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.legal-body li { font-size: var(--fs-body); color: var(--muted); line-height: var(--lh-body); margin-bottom: var(--space-2); }
.legal-body li::marker { color: var(--faint); }
.legal-body strong { color: var(--text); font-weight: var(--fw-medium); }
.legal-body a { font-weight: var(--fw-black); }
.legal-divider { border: none; border-top: 1px solid var(--border-hairline); margin: var(--space-9) 0 0; }

/* ── 404 ─────────────────────────────────────────────────────────────── */
.not-found { flex: 1; display: grid; place-items: center; text-align: center; }
.not-found-card { width: min(100%, var(--width-not-found)); }
.not-found .page-lede { margin-right: auto; margin-left: auto; }