/* ==========================================================================
   Castle — site.css
   Design system rebuilt from castle.tech (Framer export), hand-maintained.
   Fonts: Hedvig Letters Serif (headings), Geist (body), Geist Mono (labels/UI)
   ========================================================================== */

:root {
  /* ---- Layer 1 — brand constants (Castle Brand Guidelines v1.0) ----
     The ONLY raw color values in the codebase. Everything else derives
     from these via opacity (rgb(c / a)) or white/ink mixes (color-mix).
     --c-risk (rust) is a brand-approved addition beyond the deck — the
     figures' risk accent. --c-violet is reserved for the incoming purple. */
  --c-ink: 23 23 23;          /* #171717 primary text */
  --c-gray-600: 82 82 82;     /* #525252 secondary text */
  --c-gray-500: 115 115 115;  /* #737373 secondary text */
  --c-line: 229 229 229;      /* #E5E5E5 background / borders */
  --c-bg: 245 245 245;        /* #F5F5F5 background */
  --c-white: 255 255 255;     /* #FFFFFF */
  --c-blue: 58 92 154;        /* #3A5C9A accent */
  --c-teal-blue: 36 96 117;   /* #246075 accent */
  --c-teal: 0 84 79;          /* #00544F accent */
  --c-forest: 57 89 56;       /* #395938 accent */
  --c-deep: 0 46 44;          /* #002E2C accent */
  --c-risk: 124 70 50;        /* #7C4632 accent — figure risk/rust (brand-approved addition) */

  /* ---- Layer 2 — semantic roles (brand base + opacity/mix only) ---- */
  --bg: rgb(var(--c-bg));
  --bg-warm: color-mix(in srgb, rgb(var(--c-line)) 60%, rgb(var(--c-white)));
  --surface: rgb(var(--c-white));
  --ink: rgb(var(--c-ink));
  --ink-strong: rgb(var(--c-ink));
  --gray-600: rgb(var(--c-gray-600));
  --gray-500: rgb(var(--c-gray-500));
  --gray-400: color-mix(in srgb, rgb(var(--c-ink)) 40%, rgb(var(--c-white)));
  --gray-300: color-mix(in srgb, rgb(var(--c-ink)) 18%, rgb(var(--c-white)));
  --border: rgb(var(--c-line));
  --teal-deep: color-mix(in srgb, rgb(var(--c-deep)) 62%, rgb(var(--c-ink))); /* ~old #002421 */
  --teal-text: color-mix(in srgb, rgb(var(--c-teal)) 16%, rgb(var(--c-white)));
  --footer-bg: rgb(var(--c-ink));
  --forest: rgb(var(--c-forest));
  --steel: color-mix(in srgb, rgb(var(--c-teal-blue)) 90%, rgb(var(--c-white))); /* ~old #3e6880 */
  --risk: rgb(var(--c-risk));
  --fig-guide: color-mix(in srgb, rgb(var(--c-gray-500)) 25%, rgb(var(--c-white)));
  --fig-casing: color-mix(in srgb, rgb(var(--c-gray-500)) 45%, rgb(var(--c-white)));
  --fig-hairline: color-mix(in srgb, rgb(var(--c-line)) 65%, rgb(var(--c-white)));

  /* Type */
  --font-serif: "Hedvig Letters Serif", Georgia, serif;
  --font-sans: "Geist", "Inter", -apple-system, sans-serif;
  --font-mono: "Geist Mono", "SF Mono", Menlo, monospace;

  /* Layout */
  --container: 1200px;
  --container-narrow: 680px;
  --nav-height: 64px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Scrolling is smoothed by Lenis (site.js) like the original — native
   scroll-behavior stays default so programmatic/anchor jumps behave. */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em; /* Geist subtexts: -1% per typography guidelines */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: 1248px; margin: 0 auto; padding: 0 24px; } /* 1200px of content, like the original */
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0; font-family: var(--font-serif); font-weight: 400; }

/* Fixed sizes per breakpoint (like the original) so the hero line
   "Hedge the unhedgable" stays on one line at desktop: 794px of text
   in an 800px column. A vw-based clamp either wraps it or overshoots. */
.display {
  font-size: 80px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
@media (max-width: 1439px) { .display { font-size: 64px; } }
@media (max-width: 809px)  { .display { font-size: 48px; } }

/* Section headings: fixed sizes per breakpoint like the original —
   48px keeps "From exposure to protection" on one line at desktop. */
.heading-xl {
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--gray-600);
}
@media (max-width: 1439px) { .heading-xl { font-size: 40px; } }
@media (max-width: 809px)  { .heading-xl { font-size: 32px; } }
.heading-xl .accent { color: var(--ink-strong); }

.heading-md {
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}

.label-mono {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--gray-500);
}

.body-text { color: var(--gray-600); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-pad: 12px;
  display: inline-block;
  position: relative;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600; /* Semi Bold per typography guidelines */
  line-height: 1.5; /* original: 21px label line, 45px hero button */
  letter-spacing: -0.02em;
  border-radius: var(--radius-sm);
  padding: var(--btn-pad) 24px;
  overflow: clip; /* the original clips at the button edge, so the rolling
                     label stays visible through the padding zone */
  transition: background-color .45s cubic-bezier(.25, .9, .35, 1);
  cursor: pointer;
  border: none;
}
.btn:active { transform: scale(.98); }

/* Hover: bg fades to gray-300 while the label ROLLS UP through the whole
   button — the duplicate starts at the button's bottom edge (outside the
   clip) and both copies travel one line + one pad, so the motion crosses
   the padding zone uncut, exactly like the original (which clips at the
   button border, duplicate parked at its bottom edge). Original tween:
   spring duration 1 / bounce .2 ≈ softly overshooting cubic. The duplicate
   span is added by site.js. Track stays unclipped and unpositioned so the
   duplicate anchors to the button itself. */
.btn-track { display: block; }
.btn-track > span { display: block; transition: transform .65s cubic-bezier(.32, 1.25, .5, 1); }
.btn-track > span + span { position: absolute; left: 0; top: 100%; width: 100%; text-align: center; }
.btn:hover .btn-track > span { transform: translateY(calc(-100% - var(--btn-pad))); }
@media (prefers-reduced-motion: reduce) {
  .btn-track > span { transition: none; }
  .btn:hover .btn-track > span { transform: none; }
}

.btn-light { background: rgb(var(--c-white)); color: var(--ink); box-shadow: 0 1px 3px rgb(var(--c-ink) / .12); }
.btn-light:hover { background: var(--gray-300); } /* original: var(--gray-300) */
.btn-dark  { background: var(--ink); color: rgb(var(--c-white)); }
.btn-sm    { --btn-pad: 6px; padding: var(--btn-pad) 16px; line-height: 1.5; } /* original nav CTA: 33px tall */

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

/* Floating centered pill, matching the Framer original:
   1200px max, 20px from top, 6px radius, dark translucent + blur */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  color: rgb(var(--c-bg));
  padding: 20px 24px 0;
  pointer-events: none; /* outer strip is just a positioning frame */
}
.site-nav .nav-inner {
  pointer-events: auto;
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px; /* original: logo and CTA sit 12px from the pill edges */
  height: 57px;
  border-radius: 6px;
  background: rgb(var(--c-ink) / .30);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* logo | centered links | CTA */
  align-items: center;
  gap: 24px;
}
.nav-logo { justify-self: start; }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 12px; }
@media (max-width: 1023px) {
  .site-nav { padding: 12px 12px 0; }
}
.nav-logo { display: flex; align-items: center; color: rgb(var(--c-bg)); }
.nav-logo svg, .nav-logo img { width: 97px; height: auto; } /* original: 97×27.9 */

.nav-links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
/* Original link behavior: hover dims to gray-300; the current page's
   link is underlined (aria-current set by site.js). */
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: var(--gray-300); }
.nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

/* Mobile menu */
.nav-burger {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 40px; height: 40px;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav-burger span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 1px; transition: transform .25s, opacity .25s; }
.nav-burger.open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  top: 76px; left: 12px; right: 12px;
  z-index: 99;
  background: rgb(var(--c-ink) / .96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 6px;
  padding: 24px;
  flex-direction: column;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 16px;
  color: rgb(var(--c-bg));
}
.mobile-menu.open { display: flex; }

@media (max-width: 1023px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgb(var(--c-white));
  overflow: hidden;
  background: rgb(var(--c-ink)); /* original's hero backdrop — the WebGL scene renders
                          at .95 opacity, so 5% of this bleeds through and
                          subtly darkens the whole hero */
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .95;          /* matches Framer's targetOpacity on the scene */
  will-change: transform; /* parallax: site.js moves this at 70% scroll speed */
}
.hero-bg canvas { width: 100%; height: 100%; display: block; }
/* No darkening overlay — the original's hero has none (verified in the
   Framer project: BG + Unicorn holds only the scene and a hidden image). */
.hero-content {
  position: relative;
  z-index: 2;
  /* original: hero has 120px side padding and an 800px text cap, so the
     column is min(viewport − 240px, 800px) — the h1's 794px line just fits
     at desktop and wraps at narrow tablet widths, same as the original */
  max-width: 1040px;
  padding: 0 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px; /* original: 16 to subtitle, 32 to the button */
}
.hero-content .btn { margin-top: 16px; }
.hero-content p {
  margin: 0;
  max-width: 530px; /* original wraps the subtitle in a 530px column */
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em; /* no text-shadow — the original has none */
}
@media (max-width: 809px) {
  .hero-content { padding: 0 15px; }
  .hero-content p { font-size: 16px; line-height: 1.4; }
}

/* --------------------------------------------------------------------------
   Section scaffolding
   -------------------------------------------------------------------------- */

.section { padding: 120px 0; }
/* Wide enough for the one-line desktop headings (original column: 820px);
   the subtitle keeps its own narrower measure. */
.section-header { text-align: center; max-width: 840px; margin: 0 auto 48px; }
.section-header p { margin: 16px auto 0; color: var(--gray-500); font-size: 18px; line-height: 1.3; max-width: 574px; }
@media (max-width: 809px) { .section-header p { font-size: 16px; } }

/* Per-section spacing measured off the original (space above the heading /
   below the cards): features 240/200 desktop, 120/80 below; blog 140 desktop,
   104 tablet, 80 phone. Generic .section keeps 120 for the inner pages. */
.section-features { padding: 80px 0; }
.section-blog { padding-top: 64px; }
@media (min-width: 1440px) {
  .section-features { padding: 200px 0; }
  .section-blog { padding-top: 100px; }
}
@media (max-width: 809px) { .section-blog { padding-top: 40px; } }

/* Scroll-in reveal — rise + fade with the original's exact tween:
   40px, 1s, cubic-bezier(0.12, 0.23, 0.17, 0.99), triggered at 50%
   visibility, runs once. Stagger delays (0.2s steps) set by site.js. */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(.12, .23, .17, .99), transform 1s cubic-bezier(.12, .23, .17, .99);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Hero content rises on page load */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}
.hero-content > * { animation: rise-in .9s cubic-bezier(.22, 1, .36, 1) both; }
.hero-content > *:nth-child(2) { animation-delay: .12s; }
.hero-content > *:nth-child(3) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .hero-content > * { animation: none; }
}

/* --------------------------------------------------------------------------
   Key features (Detect / Protect / Track) — institutional ledger panel:
   one hairline-bordered white surface, three numbered columns, square
   corners, no imagery (enterprise design language).
   -------------------------------------------------------------------------- */

.process-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* Separated boxes: each step is its own hairline-bordered white surface
   (square corners, no shadow — enterprise language) carrying a mini
   platform data-panel that mirrors the product. */
.process-step {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
}
.step-panel {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: rgb(var(--c-white));
  margin: 0;
}
.step-body { padding: 22px 24px 30px; }
/* instrument accent for the process figures (steel, per the mock) */
.product-fig .tst { font-size: 10px; letter-spacing: 1px; fill: var(--steel); }
.product-fig .tmb { font-size: 13px; font-weight: 600; fill: var(--ink); }
.product-fig .steel-fill { fill: var(--steel); }
.product-fig .steel-stroke { stroke: var(--steel); }
.fig-dot { fill: var(--gray-300); }
.fig-faint { stroke: var(--gray-300); }
.fig-line { stroke: var(--gray-500); }
.fig-accent-stroke { stroke: var(--forest); }
.fig-accent-fill { fill: var(--forest); }
.process-step h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
}
.process-step p { margin: 0; font-size: 16px; color: var(--gray-600); line-height: 1.5; }

@media (max-width: 900px) {
  .process-panel { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Manifesto (dark, word-reveal on scroll)
   -------------------------------------------------------------------------- */

.manifesto {
  position: relative;
  background: var(--teal-deep);
  color: var(--teal-text);
}
/* The WebGL pattern is a pinned, viewport-tall layer the text scrolls over,
   masked with a radial gradient so it fades to plain dark teal at the edges
   (keeps the centered text legible) — same as the Framer original.
   NOTE: the -100vh pull-up lives on .manifesto-inner, NOT on the sticky
   element — a negative margin on the sticky element itself would extend its
   sticky range past the section and make the pattern bleed over the next one. */
.manifesto-bg {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 0%, transparent 100%);
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 0%, transparent 100%);
}
.manifesto-bg canvas { width: 100%; height: 100%; display: block; }
/* The pattern's 100vh flow slot comes first, so the text begins one screen
   below and scrolls up into the pinned pattern (matches the original's pacing:
   a beat of pure pattern, then text passes through, then both leave together). */
.manifesto-inner {
  position: relative;
  z-index: 2;
  max-width: 598px; /* 550px text column + side padding, like the original */
  margin: 0 auto;
  padding: 56px 24px 256px;
  display: flex;
  flex-direction: column;
  gap: 80px;
  text-align: center;
}
.manifesto-block {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.03em;
  margin: 0;
}
.manifesto-block.large { font-size: 32px; line-height: 1.1; }
/* Words sit dim (0.10) and brighten one-by-one as a pure function of scroll
   position — site.js maps each block's viewport-top from 75%→50% of the
   viewport height onto its words (matches the original: stop scrolling and
   the reveal freezes mid-word; scroll back up and it reverses). */
.manifesto-block .w { opacity: .1; }
@media (prefers-reduced-motion: reduce) {
  .manifesto-block .w { opacity: 1 !important; }
}

/* --------------------------------------------------------------------------
   Product (sticky header + panels)
   -------------------------------------------------------------------------- */

/* Deck of five full-viewport sticky slides inside .product-deck. Slides are
   TRANSPARENT; only the white cards are opaque, so they cover each other as
   the deck advances, while slide 1's header ("Built for event risk") stays
   visible and pinned for the entire deck — exactly like the original, whose
   "Built for every step" headers exist in the DOM but are kept at opacity 0
   the whole time (replicated here as .ghost so the geometry stays centered).
   The header+card group is vertically centered per viewport, which
   reproduces the original's measured offsets at every breakpoint.
   Section padding: 100px desktop / 64 tablet / 40+80 phone. */
.product { background: color-mix(in srgb, rgb(var(--c-line)) 42%, rgb(var(--c-white))); padding: 64px 0; }
@media (min-width: 1440px) { .product { padding: 100px 0; } }
@media (max-width: 809px)  { .product { padding: 40px 0 80px; } }

.product-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.panel-head { text-align: center; padding: 0 24px; }
.panel-head.ghost { opacity: 0; pointer-events: none; }
.panel-head p { margin: 16px auto 0; max-width: 410px; color: var(--gray-500); font-size: 18px; line-height: 1.3; }
.panel-head + .container { margin-top: 48px; }
@media (max-width: 809px) {
  .panel-head { padding: 0 15px; }
  .panel-head p { font-size: 16px; line-height: 1.4; }
  .panel-head + .container { margin-top: 32px; }
}
/* Original deck card: 1200 wide, 16px pad, 4px radius, no border;
   art column 568px, 52px gutter, copy 548px with 20px right inset */
.product-card {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 16px;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 568fr 548fr;
  gap: 52px;
  align-items: center;
}
.product-card.flip { grid-template-columns: 548fr 568fr; }
/* homepage dark deck: panels float on the page background */
.deck-dark .product-card { background: var(--bg); }

.product-card.flip .product-art { order: 2; }
.product-card.flip .product-copy { order: 1; padding-left: 20px; padding-right: 0; }

.product-art img { width: 100%; border-radius: var(--radius-sm); }

/* Composed product figures: quiet plane + faint checker-castle motif
   (logo DNA) + schematic platform fragment mirroring the copy. */
.product-fig { display: block; width: 100%; height: auto; }
.product-fig .fp { fill: var(--surface); }
.product-fig .fp-edge { fill: none; stroke: var(--border); }
.product-fig .ffrag { fill: var(--surface); stroke: var(--gray-300); }
.product-fig .fbox { fill: none; stroke: var(--border); }
.product-fig .fhair { stroke: var(--border); }
.product-fig text { font-family: var(--font-mono); }
/* dark terminal deck figures */
.product-fig .dwk { fill: color-mix(in srgb, rgb(var(--c-forest)) 8%, rgb(var(--c-white))); font-size: 10px; letter-spacing: 1.4px; font-weight: 600; }
.product-fig .dw { fill: color-mix(in srgb, rgb(var(--c-forest)) 8%, rgb(var(--c-white))); fill-opacity: .64; font-size: 10px; letter-spacing: 1.4px; }
.product-fig .dga { fill: color-mix(in srgb, rgb(var(--c-forest)) 45%, rgb(var(--c-white))); font-size: 10px; letter-spacing: 1.4px; }
.product-fig .dhair { stroke: color-mix(in srgb, rgb(var(--c-forest)) 8%, rgb(var(--c-white))); stroke-opacity: .34; }
.product-fig .tl  { font-size: 10px; letter-spacing: 1px; fill: var(--gray-500); }
.product-fig .tlk { font-size: 10px; letter-spacing: 1px; fill: var(--ink); }
.product-fig .tla { font-size: 10px; letter-spacing: 1px; fill: var(--forest); }
.product-fig .tm  { font-size: 13px; fill: var(--ink); }
.product-fig .tba { font-size: 24px; fill: var(--forest); }
.product-fig .bar { fill: var(--gray-300); }
.product-fig .bar-strong { fill: var(--gray-400); }
.product-fig .bar-acc { fill: var(--forest); }
.product-copy { padding-right: 20px; }
.product-copy .label-mono { display: block; margin-bottom: 8px; }
.product-copy h3 { margin-bottom: 8px; }
.product-copy p { margin: 0; color: var(--gray-500); font-size: 16px; line-height: 1.4; }

@media (max-width: 900px) {
  .product-card, .product-card.flip { grid-template-columns: 1fr; gap: 24px; }
  .product-card.flip .product-art { order: 0; }
  .product-card.flip .product-copy { order: 0; padding-left: 0; }
  .product-copy { padding: 0 8px 12px; }
}

/* --------------------------------------------------------------------------
   Blog cards
   -------------------------------------------------------------------------- */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Original: borderless white card, 4px radius */
.blog-card {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 12px;
}
/* Original hover: no card lift — the cover's corners round from 4px to
   12px while the image inside zooms to 1.03 and blurs 1.3px (spring ≈
   duration 1 / bounce .2). site.js wraps each cover in .cover-wrap so
   the zoomed image stays clipped. */
.blog-card .cover-wrap {
  overflow: hidden;
  border-radius: var(--radius-sm);
  transition: border-radius .6s cubic-bezier(.25, .9, .35, 1);
}
.blog-card img.cover { width: 100%; aspect-ratio: 5 / 4; height: auto; object-fit: cover; border-radius: var(--radius-sm); display: block; transition: transform .6s cubic-bezier(.25, .9, .35, 1), filter .6s cubic-bezier(.25, .9, .35, 1); }
.blog-card:hover .cover-wrap { border-radius: 12px; }
.blog-card:hover img.cover { transform: scale(1.03); filter: blur(1.3px); }
@media (prefers-reduced-motion: reduce) {
  .blog-card img.cover, .blog-card .cover-wrap { transition: none; }
  .blog-card:hover img.cover { transform: none; filter: none; }
}
.blog-card .blog-title {
  font-family: var(--font-serif); /* matches the resources rows */
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  margin: 16px 4px 8px;
}
.blog-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 8px;
  font-family: var(--font-mono);
  font-size: 14px; /* original */
  color: rgb(var(--c-gray-500));
}
.blog-meta img { width: 20px; height: 20px; border-radius: 50%; }

.blog-cta { text-align: center; margin-top: 48px; }

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* --------------------------------------------------------------------------
   Logos / investors
   -------------------------------------------------------------------------- */

/* Original (measured live): serif 20px labels, Ribbit/Jump at 131px wide
   with 24px between, 22px label→logos, 62px logos→"And angels from",
   30px label→ticker; 100px section padding. */
.logos { padding: 100px 0 97px; text-align: center; }
.logos-label {
  display: block;
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.backed-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 22px 0 62px;
}
.backed-row img { width: 131px; height: auto; }

/* Ticker matched to the original: 40px gaps, 30px/s velocity (duration set
   by site.js from the measured group width), per-logo widths on the imgs,
   and the original's soft asymmetric fade mask. The track holds two
   identical groups and animates exactly one group width (-50%), so the
   loop has no seam. */
.marquee {
  overflow: clip;
  position: relative;
  max-width: 1136px; /* original: a centered 1136px strip, not full-bleed —
                        the fade covers proportionally more of the sides */
  margin: 30px auto 0; /* 30px below "And angels from" */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 52.8%, transparent 98.8%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 52.8%, transparent 98.8%);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee-group {
  display: flex;
  align-items: center;
  min-height: 50px; /* original: 50px item row, logos centered within */
  gap: 40px;
  padding-right: 40px; /* the gap between the two groups, part of the loop period */
}
.marquee-group img { display: block; height: auto; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* --------------------------------------------------------------------------
   Resources page — ledger layout (promoted from variations/resources-3)
   -------------------------------------------------------------------------- */

.rs-wrap { max-width: 1020px; margin: 0 auto; padding: 24px 24px 90px; } /* .page-main already clears the nav */
.rs-head h1 { font-size: 44px; letter-spacing: -0.01em; color: var(--ink-strong); margin-bottom: 40px; }
.rs3-feature { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 40px 44px; margin-bottom: 64px; }
.rs-tag { display: inline-block; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; color: var(--forest); margin-bottom: 14px; }
.rs3-feature h2 { font-size: 36px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink-strong);
  margin: 0 0 12px; }
.rs3-feature .dek { font-size: 16px; color: var(--gray-600); line-height: 1.55; margin: 0 0 20px; }
.rs3-feature .fcov img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.rs-meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 13px; color: var(--gray-500); }
.rs-meta img { width: 22px; height: 22px; border-radius: 50%; }
.rs3-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; } /* rows span the feature panel's full width */
.rs3-item { display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--border); }
.rs3-gallery .rs3-item:nth-child(-n+2) { border-top: 1px solid var(--border); }
.rs3-item img.thumb { width: 132px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.rs3-item .t { font-family: var(--font-serif); font-size: 19px; font-weight: 400;
  letter-spacing: -0.01em; color: var(--ink-strong); margin: 0 0 6px; line-height: 1.3; }
.rs3-item .m { font-family: var(--font-mono); font-size: 12px; color: var(--gray-500); }
.rs3-item:hover .t { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 800px) { .rs3-feature, .rs3-gallery { grid-template-columns: 1fr; }
  .rs3-gallery .rs3-item { border-top: 0; } .rs3-gallery .rs3-item:first-child { border-top: 1px solid var(--border); }
  .rs-wrap { padding-top: 120px; } }


/* --------------------------------------------------------------------------
   Broker submissions (/brokers/) — reuses the demo form language
   -------------------------------------------------------------------------- */

.broker-wrap { max-width: 720px; margin: 0 auto; padding: 24px 24px 110px; }
/* Section headers: the demo panels style .panel-label under .demo-panel,
   so the broker page defines its own copy of the mono micro-header. */
.broker-wrap .panel-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}
.broker-wrap .panel-label .optional { font-weight: 400; font-size: 14px; color: var(--gray-500); }
.broker-kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; color: var(--forest); margin: 0 0 14px; }
/* Broker page layout: sticky left rail (title + process) with the form
   on a white panel — promoted from variations/broker-1. The .broker-grid
   overrides .broker-wrap's narrow single-column geometry. The page
   carries no navbar, so it skips the nav-clearance top padding. */
.page-main.broker-pm { padding-top: 56px; }
.broker-grid { max-width: 1150px; padding: 40px 24px 110px; display: grid;
  grid-template-columns: 330px minmax(0, 1fr); gap: 72px; align-items: start; }
.broker-rail { position: sticky; top: 100px; }
.broker-rail h1 { font-size: 42px; letter-spacing: -0.015em; color: var(--ink-strong); margin: 0 0 30px; }
.broker-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--gray-300); }
.broker-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 15px 0;
  border-bottom: 1px solid var(--border); }
.broker-steps b { font: 600 11px/2.2 var(--font-mono); letter-spacing: .12em; color: var(--gray-400); }
.broker-steps strong { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-strong); }
.broker-steps p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--gray-500); }
.broker-mail { margin: 26px 0 0; font: 600 12.5px/1.7 var(--font-mono); letter-spacing: -0.02em;
  color: var(--gray-500); }
.broker-mail a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.broker-panel { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 46px 50px 50px; }
@media (max-width: 980px) {
  .broker-grid { grid-template-columns: 1fr; gap: 44px; }
  .broker-rail { position: static; }
  .broker-panel { padding: 34px 26px 40px; }
}
/* Post-submit confirmation screen (/brokers/thanks/): the confirmation
   fills the viewport (footer only on scroll), content centered under
   the fixed nav. */
/* Submitting state: the form quiets down while the POST is in flight */
.broker-form.is-submitting { pointer-events: none; }
.broker-form.is-submitting .broker-section,
.broker-form.is-submitting .broker-alt { opacity: .55; transition: opacity .2s ease; }
.broker-form .btn[disabled] { cursor: default; opacity: .85; }

.page-main.bt-main { padding-top: 0; min-height: 100vh; display: flex; align-items: center; }
.broker-thanks { width: 100%; max-width: 680px; padding: calc(var(--nav-height) + 40px) 24px 60px; }
.broker-thanks h1 { font-size: 42px; letter-spacing: -0.015em; color: var(--ink-strong); margin: 0 0 18px; }
.bt-msg { margin: 0 0 36px; font-size: 16px; line-height: 1.6; color: var(--gray-600); max-width: 470px; }
.bt-msg a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.bt-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.bt-again { font: 600 12.5px/1.5 var(--font-mono); letter-spacing: -0.02em; color: var(--gray-500);
  text-decoration: underline; text-underline-offset: 3px; }
.bt-again:hover { color: var(--ink); }
.broker-form { display: flex; flex-direction: column; gap: 36px; }
.broker-form .demo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.broker-form .demo-row .demo-field { display: flex; flex-direction: column; }
.broker-form .demo-row .demo-field input { margin-top: auto; }
.broker-form .demo-field label { font-family: var(--font-sans); letter-spacing: -0.01em;
  color: var(--gray-600); font-size: 14px; font-weight: 400; }
/* Broker fields sit on the page bg (no white panel behind them like the
   demo form), so the default hairline border all but disappears. */
.broker-form .demo-field input,
.broker-form .demo-field textarea { border-color: var(--gray-300); }
.broker-form .demo-field .optional { font-family: var(--font-sans); font-weight: 400; color: var(--gray-500); }
.broker-section { display: flex; flex-direction: column; gap: 14px; }
.broker-section > .panel-label { margin-bottom: 0; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.broker-section .req { color: var(--risk); font-style: normal; }
.broker-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 13px; }
.broker-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
  font-family: var(--font-sans); font-size: 14.5px; letter-spacing: -0.01em; color: var(--ink); }
.broker-checks label { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.broker-checks input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--forest); }
.broker-checks .bk-other-input { flex: 1; min-width: 60px; border: 0; border-bottom: 1px solid var(--gray-400);
  background: none; font: 600 14px/1.5 var(--font-mono); letter-spacing: -0.02em; color: var(--ink); }
.broker-checks .bk-other-input:focus { outline: none; border-bottom-color: var(--ink); }
.broker-attach { margin: 0; font-size: 14px; color: var(--ink); }
.broker-form .btn { align-self: flex-start; }
.broker-alt { margin: -22px 0 0; font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: -0.02em; color: var(--gray-500); }
.broker-alt a { text-decoration: underline; text-underline-offset: 3px; }
.broker-files { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.bk-file-btn { display: inline-block; font-family: var(--font-mono); font-size: 13px;
  font-weight: 600; letter-spacing: -0.02em; color: var(--ink); background: var(--surface);
  border: 1px solid var(--gray-400); border-radius: var(--radius-sm); padding: 8px 16px;
  cursor: pointer; }
.bk-file-btn:hover { border-color: var(--ink); }
.bk-file-hint { font-family: var(--font-mono); font-size: 11.5px; color: var(--gray-500); }
.bk-file-list { list-style: none; margin: 0; padding: 0; width: 100%;
  display: flex; flex-direction: column; gap: 6px; }
.bk-file-list li { display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: -0.02em; color: var(--ink); }
.bk-file-list button { background: none; border: 0; cursor: pointer; color: var(--gray-500);
  font-size: 12px; padding: 2px 4px; }
.bk-file-list button:hover { color: var(--risk); }
.broker-done { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 24px 28px; }
.broker-done p { margin: 10px 0 0; color: var(--ink); }
.broker-done a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .broker-row3, .broker-checks, .broker-form .demo-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* The footer is its own full screen: the landscape art centers in the
   leftover space while the link columns and copyright hold the bottom. */
.site-footer {
  background: var(--footer-bg);
  color: var(--gray-300);
  padding-top: 48px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.footer-art {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}
/* no CSS vignette — the dark feathered edges are baked into the image itself.
   The art scales down within its flex share so the roomier block below
   still fits the one-screen footer on shorter viewports. */
.footer-art img { max-width: 100%; max-height: 100%; width: auto; margin: 0 auto; }
.footer-main {
  width: 100%;
  max-width: 828px; /* 780px of content — the same rail as .footer-art */
  margin: 72px auto 0;
  padding: 0 24px 72px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px;
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; color: rgb(var(--c-bg)); }
.footer-brand svg, .footer-brand img { width: 131px; height: auto; } /* original: 131×37.4 */
.footer-brand p { margin: 0; font-size: 18px; color: color-mix(in srgb, rgb(var(--c-line)) 46%, rgb(var(--c-white))); }

/* The three link lists share a right-side band: content-width columns
   spread with space-between, so the whitespace between the lists is equal
   — and the brand→lists gap (the rest of the row) stays clearly wider. */
.footer-cols {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  width: 56%;
  margin-left: auto;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: -0.02em;
}
.footer-col .col-title { color: var(--gray-500); font-size: 14px; margin-bottom: 12px; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-col span { color: var(--gray-300); }
@media (max-width: 720px) {
  .footer-cols { width: 100%; margin-left: 0; flex-direction: column; justify-content: flex-start; gap: 36px; }
}

.footer-bottom {
  border-top: 1px solid color-mix(in srgb, rgb(var(--c-gray-500)) 16%, rgb(var(--c-ink)));
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--gray-300);
}
.footer-bottom .inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.footer-bottom a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   Page hero (interior pages: Team, Resources, legal)
   -------------------------------------------------------------------------- */

.page-main { padding-top: calc(var(--nav-height) + 64px); }

/* Team */
/* The team screen fills the viewport so the footer starts below the fold;
   the section's canvas background stretches to cover the remainder. */
.team-main { min-height: 100vh; display: flex; flex-direction: column; }
.team-main .team-section { flex: 1; }
.team-hero { text-align: center; padding: 48px 24px 64px; }
.team-hero h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -0.015em; color: var(--ink-strong); }
.team-hero p { margin: 16px auto 0; color: var(--gray-600); }
.team-section { position: relative; overflow: hidden; }
.team-bg { position: absolute; inset: 0; pointer-events: none; }
.team-bg canvas { width: 100%; height: 100%; }
.team-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 140px;
}
/* Borderless gallery (variation T2): photos sit flat on the page with a
   hairline rule before the meta — no card chrome. */
.team-card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.team-card .photo img { width: 100%; border-radius: var(--radius-sm); }
/* Meta text aligns flush with the photo edges (no 2px drift) and the
   kicker+name read as one cluster, with clear air above and below. */
.team-card .role {
  display: block; /* the span's vertical margin is real (inline would drop it) */
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--gray-500);
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--gray-300);
}
/* LinkedIn sits snug beside the name — in the borderless layout there is
   no card edge for a far-right icon to anchor to. */
.team-card .name-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 5px;
}
.team-card .name-row h3 { font-size: 19px; color: var(--ink-strong); }
/* the name itself is the LinkedIn link - no icon */
.team-card .name-row h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.team-card .facts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gray-500);
  margin: 0;
}
@media (max-width: 1023px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .team-grid { grid-template-columns: 1fr; max-width: 380px; } }

/* --------------------------------------------------------------------------
   Resources index
   -------------------------------------------------------------------------- */

.resources-header { max-width: var(--container); margin: 0 auto; padding: 24px 24px 40px; }
.resources-header h1 { font-size: clamp(34px, 4vw, 48px); color: var(--ink-strong); }

.resources-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px 140px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: start;
}
.resources-col { display: flex; flex-direction: column; gap: 24px; }
/* featured card pins while the right-hand article list scrolls past it */
.resources-grid > .blog-card.featured { position: sticky; top: 100px; align-self: start; }
@media (max-width: 900px) {
  .resources-grid { grid-template-columns: 1fr; }
  .resources-grid > .blog-card.featured { position: static; }
}

/* --------------------------------------------------------------------------
   Article pages
   -------------------------------------------------------------------------- */

.article { max-width: var(--container-narrow); margin: 0 auto; padding: 16px 24px 120px; }
.article .back-link {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--gray-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 40px;
}
.article .back-link:hover { color: var(--ink); }
.article h1 {
  text-align: center;
  font-size: clamp(32px, 4.5vw, 44px);
  letter-spacing: -0.015em;
  color: var(--ink-strong);
}
.article .blog-meta { justify-content: center; margin: 18px 0 36px; }
.article .cover {
  width: 100%;
  border-radius: var(--radius-lg);
  margin-bottom: 48px;
}

.prose { color: color-mix(in srgb, rgb(var(--c-line)) 20%, rgb(var(--c-ink))); font-size: 16.5px; line-height: 1.75; }
.prose p { margin: 0 0 1.4em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose h2 { font-size: 28px; color: var(--ink-strong); margin: 1.8em 0 .7em; }
.prose h3 { font-size: 22px; color: var(--ink-strong); margin: 1.6em 0 .6em; }
.prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
  margin: 1.6em 0;
  padding-left: 20px;
  border-left: 3px solid var(--gray-300);
  color: var(--gray-600);
}

/* Legal pages */
.legal { max-width: 620px; margin: 0 auto; padding: 24px 24px 120px; }
.legal h1 { text-align: center; font-size: clamp(30px, 4vw, 40px); color: var(--ink-strong); margin-bottom: 40px; }
.legal .prose { font-size: 14.5px; }
.legal .prose h3, .legal .prose h2 { font-size: 17px; font-family: var(--font-sans); font-weight: 600; }

/* --------------------------------------------------------------------------
   Book a demo — two panels: request form / embedded booking calendar
   -------------------------------------------------------------------------- */

.demo-page { padding-top: 0; }
.demo-close {
  position: fixed; top: 18px; right: 22px; z-index: 130;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 17px; line-height: 1;
  color: var(--gray-500); border-radius: 999px;
  transition: color .15s ease, background .15s ease;
}
.demo-close:hover { color: var(--ink); background: color-mix(in srgb, rgb(var(--c-line)) 84%, rgb(var(--c-white))); }

/* Modal-style presentation: the split rises in on load; clicking the
   close button plays the reverse before navigating away. */
.demo-overlay {
  position: fixed; inset: 0; z-index: 300; background: var(--bg);
  overflow-y: auto; opacity: 0; transition: opacity .3s ease;
}
.demo-overlay.on { opacity: 1; }
.demo-overlay .demo-split { animation: none; }
.demo-overlay.on .demo-split { animation: demoIn .5s cubic-bezier(.25, .9, .35, 1) both; }
body.demo-overlay-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .demo-overlay { transition: none; }
  .demo-overlay .demo-split, .demo-overlay.on .demo-split { animation: none; }
}

@keyframes demoIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.demo-split { animation: demoIn .55s cubic-bezier(.25, .9, .35, 1) both; }
.demo-close { animation: demoIn .55s .12s cubic-bezier(.25, .9, .35, 1) both; }
body.demo-leaving .demo-split,
body.demo-leaving .demo-close {
  transition: opacity .26s ease, transform .26s ease;
  opacity: 0; transform: translateY(10px);
}
@media (prefers-reduced-motion: reduce) {
  .demo-split, .demo-close { animation: none; }
  body.demo-leaving .demo-split, body.demo-leaving .demo-close { transition: none; }
}

/* Fixed art column: identical on both steps, so nothing shifts when the
   calendar opens; the right column keeps every remaining pixel. */
.demo-split { display: grid; grid-template-columns: 360px 1fr; min-height: 100vh; }

.demo-art {
  position: relative; overflow: hidden; background: color-mix(in srgb, rgb(var(--c-deep)) 14%, rgb(var(--c-ink)));
  display: flex; flex-direction: column;
  padding: 56px 52px 40px;
}
.demo-art .art-kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; color: color-mix(in srgb, rgb(var(--c-forest)) 45%, rgb(var(--c-white))); margin: 0 0 18px;
}
.demo-art h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(28px, 2.4vw, 38px); line-height: 1.12;
  letter-spacing: -0.01em; color: color-mix(in srgb, rgb(var(--c-gray-500)) 10%, rgb(var(--c-white))); margin: 0; max-width: 340px;
}
.demo-art img {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%;
  object-fit: cover; mix-blend-mode: screen; opacity: .96; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 86%, transparent 100%);
}

.demo-side {
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 56px 40px 40px;
  min-width: 0; /* the nowrap summary bar must not inflate the grid track */
}

.demo-hero {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  width: 100%; max-width: 620px; margin: 36px auto 0;
  padding: 0 0 20px;
}
.demo-hero h1 { font-size: clamp(30px, 3vw, 40px); letter-spacing: -0.015em; color: var(--ink-strong); white-space: nowrap; }
.demo-hero p { margin: 0; color: var(--gray-600); text-align: left; }
@media (max-width: 900px) {
  .demo-hero { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .demo-hero p { text-align: center; }
}

.demo-flow {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 0;
}
/* Calendar step: the whole step fits the viewport — hero and dots yield,
   the panel takes the full right column, and the frame sizes to the
   remaining height so the page never scrolls. The art column is fixed,
   so nothing on the left moves. */
.demo-flow.on-cal { max-width: none; }
/* 64px top strip keeps the fixed close button (40px tall at top:18px) on
   its own row above the panel, clear of the summary bar. */
.cal-mode .demo-side { padding: 64px 28px 16px; }
.cal-mode .demo-hero { display: none; }
.cal-mode .demo-panel.demo-cal { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.cal-mode .demo-summary { margin: 0; padding: 13px 18px; border-bottom: 1px solid var(--border); flex: none; }
.cal-mode .demo-summary .panel-label { margin-bottom: 0; }
.demo-cal .demo-alt {
  display: flex; align-items: center; justify-content: center;
  padding: 11px 18px; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .04em; color: var(--gray-500); white-space: nowrap;
}
.demo-cal .demo-alt i { font-style: normal; color: var(--gray-300); margin: 0 8px; }
.demo-cal .demo-alt a { text-decoration: underline; text-underline-offset: 3px; }
.demo-cal .demo-alt a:hover { color: var(--ink); }
.demo-booked {
  margin-left: 12px; border: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  padding: 5px 12px; border-radius: 999px;
  background: var(--forest); color: color-mix(in srgb, rgb(var(--c-forest)) 8%, rgb(var(--c-white)));
}
.demo-booked:hover { background: color-mix(in srgb, rgb(var(--c-forest)) 80%, rgb(var(--c-ink))); }
/* Non-native schedulers render oversized and scale down so their page fits
   the frame; Cal.com/Calendly embeds (.cal-native) size natively. */
.demo-cal-frame { flex: none; overflow: hidden; position: relative; }
.cal-mode .demo-cal-frame { height: max(480px, calc(100vh - 178px)); }
.demo-cal-frame.cal-native iframe {
  width: 100%; height: 100%; transform: none;
}
.demo-cal-frame iframe {
  width: calc(100% / 0.85);
  height: calc(100% / 0.85);
  transform: scale(0.85);
  transform-origin: top left;
  border: 0;
  background: var(--surface);
}

@media (max-width: 1020px) {
  .demo-split { grid-template-columns: 1fr; }
  .demo-art { min-height: 340px; padding: 44px 28px 28px; }
  .demo-art img { width: 420px; right: -10%; bottom: -12%; opacity: .55; }
  .demo-side { padding: 40px 20px 90px; }
  /* stacked layout: the close button floats over the art column, not the
     panel, so no strip is needed */
  .cal-mode .demo-side { padding: 28px 28px 16px; }
  .cal-mode .demo-cal-frame { height: max(480px, calc(100vh - 142px)); }
}

.demo-summary {
  display: flex; align-items: center; gap: 14px; margin-bottom: 6px;
  flex-wrap: nowrap;
}
.demo-summary .panel-label,
.demo-summary .demo-back { white-space: nowrap; }
.demo-summary .demo-back {
  margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--gray-500); text-decoration: underline; text-underline-offset: 3px;
}
.demo-summary .demo-back:hover { color: var(--ink); }
.demo-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 26px 24px;
}
.demo-panel .panel-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 16px;
}

.demo-form { display: flex; flex-direction: column; gap: 13px; }
.demo-form .demo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
@media (max-width: 640px) {
  .demo-form .demo-row { grid-template-columns: 1fr; }
  .demo-summary { flex-wrap: wrap; row-gap: 8px; }
  .demo-summary .demo-booked { margin-left: auto; }
}
.demo-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.02em;
  color: var(--gray-500);
  margin-bottom: 6px;
}
.demo-field .optional { color: var(--gray-400); }
.demo-field input,
.demo-field textarea {
  width: 100%;
  font: 600 15px/1.5 var(--font-mono); /* form fields: Geist Mono Semi Bold per guidelines */
  letter-spacing: -0.02em;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  transition: border-color .15s ease, background .15s ease;
}
.demo-field input:focus,
.demo-field textarea:focus {
  outline: none;
  border-color: var(--gray-400);
  background: var(--surface);
}
.demo-field textarea { resize: vertical; min-height: 56px; }
.demo-field select {
  width: 100%;
  font: 600 15px/1.5 var(--font-mono);
  letter-spacing: -0.02em;
  color: var(--ink);
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23737373' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 32px 9px 12px;
  transition: border-color .15s ease, background-color .15s ease;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.demo-field select:focus {
  outline: none;
  border-color: var(--gray-400);
  background-color: var(--surface);
}
/* Placeholder tint until a real option is picked */
.demo-field select:has(option[value='']:checked) { color: var(--gray-400); }
.demo-form .btn { width: 100%; border: 0; cursor: pointer; margin-top: 6px; }
/* Ghost button: transparent secondary action (step 1's "Book a call") */
.demo-form .btn-ghost { background: transparent; color: var(--ink);
  border: 1px solid var(--gray-400); margin-top: 0; }
.demo-form .btn-ghost:hover { border-color: var(--ink); background: var(--surface); }
.demo-reach { margin: 10px 0 0; text-align: center; font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; letter-spacing: -0.02em; color: var(--gray-500); }
.demo-reach a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.demo-skip {
  background: none; border: 0; cursor: pointer; align-self: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--gray-500); text-decoration: underline; text-underline-offset: 3px;
  padding: 2px 4px;
}
.demo-skip:hover { color: var(--ink); }
.demo-step-done .demo-done-msg { margin: 4px 0 0; font-size: 15px; color: var(--gray-600); }
.demo-step-done .demo-done-alt {
  margin: 14px 0 0; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .04em; color: var(--gray-500);
}
.demo-step-done .demo-done-alt a { text-decoration: underline; text-underline-offset: 3px; }
.demo-step-done .demo-done-alt a:hover { color: var(--ink); }
.demo-form .form-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gray-400);
  text-align: center;
  margin: 0;
}

.demo-cal { padding-bottom: 16px; }
.demo-cal .cal-fallback {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gray-400);
  text-align: center;
  margin: 12px 0 0;
}
.demo-cal .cal-fallback a { color: var(--gray-500); text-decoration: underline; text-underline-offset: 3px; }
.demo-cal .cal-fallback a:hover { color: var(--ink); }

@media (max-width: 900px) {
  .demo-flow { max-width: 560px; }
  .cal-mode .demo-cal-frame { height: 72vh; }
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.page-404 {
  position: relative;
  min-height: 100vh;
  background: rgb(var(--c-ink));
  color: rgb(var(--c-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.page-404 .bg { position: absolute; inset: 0; }
.page-404 .bg canvas { width: 100%; height: 100%; }
.page-404 .content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 24px; }
.page-404 h1 { font-family: var(--font-mono); font-size: 28px; font-weight: 700; }
.page-404 p { font-family: var(--font-mono); font-size: 14px; margin: 0 0 12px; color: var(--gray-300); }

/* --------------------------------------------------------------------------
   Stripe-style demo stages (claude/stripe-demo-deck)
   Each deck slide is a product vignette: a floating white panel over the
   archive artwork (bright, barely veiled). Animations are scroll-triggered:
   a .play class (IntersectionObserver in index.html) runs each sequence
   once to completion; leaving the slide resets it so it replays.
   Reduced-motion users get the completed state, static. Sharp edges
   throughout — no rounding on the demo elements.
   -------------------------------------------------------------------------- */
.demo-stage { position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  background: color-mix(in srgb, rgb(var(--c-forest)) 6%, rgb(var(--c-white))) var(--art) center/cover; }
.demo-stage::before { content: ""; position: absolute; inset: 0;
  background: transparent; }
.ds-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 78%; background: rgb(var(--c-white)); padding: 13px 16px 11px;
  box-shadow: 0 14px 36px rgb(var(--c-deep) / .18), 0 2px 6px rgb(var(--c-deep) / .1);
  font-family: var(--font-mono); }
/* CFTC Rule 4.41 corner note: the prescribed hypothetical-performance
   statement fills the dead space at the bottom of the P&L card's copy
   column — always visible, adjacent to the panel, zero added height. */
.product-card.fp-card { align-items: stretch; }
.fp-card .product-copy { display: flex; flex-direction: column; }
/* two auto margins split the free space: the copy group sits centered,
   the note stays pinned to the card's bottom edge */
.fp-card .product-copy::before { content: ""; margin-top: auto; }
.fp-note { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.fp-note b { display: block; font-family: var(--font-mono); font-size: 8px; font-weight: 600;
  letter-spacing: .15em; color: var(--gray-500); margin-bottom: 5px; }
.fp-note p { margin: 0; font-family: var(--font-sans); font-size: 8px; line-height: 1.45;
  color: var(--gray-500); text-align: left; }

/* Simulated numbers are labeled (counsel): a quiet tag floats just above
   each panel's top-right corner. One rule, all panels. */
.ds-panel::before { content: "ILLUSTRATIVE"; position: absolute; right: 2px; bottom: 100%;
  margin-bottom: 9px; font: 600 9px/1 var(--font-mono); letter-spacing: .16em;
  color: rgb(var(--c-white) / 0.92); text-shadow: 0 1px 3px rgb(var(--c-ink) / 0.4);
  pointer-events: none; }
.ds-head { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 9.5px; letter-spacing: .1em; color: var(--gray-500);
  padding-bottom: 9px; border-bottom: 1px solid color-mix(in srgb, rgb(var(--c-line)) 66%, rgb(var(--c-white))); }
.ds-row { display: grid; grid-template-columns: 1.15fr 1fr auto; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, rgb(var(--c-line)) 46%, rgb(var(--c-white)));
  font-size: 10.5px; letter-spacing: .05em; color: var(--gray-600);
  opacity: 0; transform: translateY(6px); }
.ds-row.ds-last { border-bottom: 0; }
.ds-row b { font-weight: 600; color: color-mix(in srgb, rgb(var(--c-blue)) 28%, rgb(var(--c-ink))); }
.ds-name { color: color-mix(in srgb, rgb(var(--c-bg)) 20%, rgb(var(--c-ink))); white-space: nowrap; }
.ds-track { height: 5px; background: color-mix(in srgb, rgb(var(--c-line)) 62%, rgb(var(--c-white))); overflow: hidden; }
.ds-bar { display: block; height: 100%; width: 0; background: var(--steel); }
.ds-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 9.5px;
  letter-spacing: .08em; color: var(--gray-400); padding-top: 9px; }
.ds-flip { position: relative; display: inline-block; text-align: right; white-space: nowrap; }
.ds-flip i { font-style: normal; opacity: 1; }
.ds-flip b { position: absolute; right: 0; top: 0; color: var(--forest); font-weight: 600;
  white-space: nowrap; opacity: 0; }
.ds-stamp { font-size: 9px; letter-spacing: .12em; padding: 3px 8px;
  background: color-mix(in srgb, rgb(var(--c-teal-blue)) 10%, rgb(var(--c-white))); color: var(--steel); font-weight: 600; white-space: nowrap;
  opacity: 0; transform: scale(.85); }
.ds-green { background: color-mix(in srgb, rgb(var(--c-forest)) 12%, rgb(var(--c-white))); color: var(--forest); }
.ds-xl { display: flex; align-items: center; gap: 10px; padding: 16px 0 12px; }
.ds-chip { font-size: 10px; letter-spacing: .06em; padding: 7px 10px; border: 1px solid color-mix(in srgb, rgb(var(--c-risk)) 18%, rgb(var(--c-white)));
  color: rgb(var(--c-risk)); background: color-mix(in srgb, rgb(var(--c-risk)) 4%, rgb(var(--c-white))); white-space: nowrap; }
.ds-beam { flex: 1; height: 2px; min-width: 24px;
  background: linear-gradient(90deg, color-mix(in srgb, rgb(var(--c-risk)) 24%, rgb(var(--c-white))), var(--steel));
  transform: scaleX(0); transform-origin: left; }
.ds-ticket { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px;
  border: 1px solid color-mix(in srgb, rgb(var(--c-deep)) 12%, rgb(var(--c-white))); border-left: 3px solid var(--steel); background: color-mix(in srgb, rgb(var(--c-bg)) 34%, rgb(var(--c-white)));
  opacity: 0; transform: scale(.96); }
.ds-ticket b { font-size: 10px; letter-spacing: .08em; color: color-mix(in srgb, rgb(var(--c-blue)) 28%, rgb(var(--c-ink))); }
.ds-ticket i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--steel); }
.ds-prog { height: 4px; background: color-mix(in srgb, rgb(var(--c-line)) 62%, rgb(var(--c-white))); margin: 11px 0 3px; overflow: hidden; }
.ds-prog i { display: block; height: 100%; width: 0; background: var(--forest); }
.ds-spark { display: block; width: 100%; height: auto; margin: 12px 0 10px; }
.ds-line { fill: none; stroke: var(--steel); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 320 320; stroke-dashoffset: 320; }
.ds-dot { fill: var(--steel); opacity: 0; }
.ds-alert { display: inline-block; font-size: 9.5px; letter-spacing: .1em; color: rgb(var(--c-risk));
  background: color-mix(in srgb, rgb(var(--c-risk)) 6%, rgb(var(--c-white))); border: 1px solid color-mix(in srgb, rgb(var(--c-risk)) 18%, rgb(var(--c-white))); padding: 5px 9px;
  opacity: 0; transform: translateX(8px); }

@keyframes dsIn      { to { opacity: 1; transform: none; } }
@keyframes dsGrow    { to { width: var(--w); } }
@keyframes dsFadeIn  { to { opacity: 1; } }
@keyframes dsFadeOut { to { opacity: 0; } }
@keyframes dsScaleIn { to { opacity: 1; transform: scale(1); } }
@keyframes dsBeamIn  { to { transform: scaleX(1); } }
@keyframes dsFill    { to { width: 100%; } }
@keyframes dsDraw    { to { stroke-dashoffset: 0; } }

.demo-stage.play .ds-row    { animation: dsIn .45s ease forwards; animation-delay: var(--d, 0s); }
.demo-stage.play .ds-bar    { animation: dsGrow .8s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: calc(var(--d, 0s) + .2s); }
.demo-stage.play .ds-flip i { animation: dsFadeOut .3s ease forwards; animation-delay: var(--fd, 2.4s); }
.demo-stage.play .ds-flip b { animation: dsFadeIn .3s ease forwards; animation-delay: var(--fd, 2.4s); }
.demo-stage.play .ds-beam   { animation: dsBeamIn .5s ease forwards .25s; }
.demo-stage.play .ds-ticket { animation: dsScaleIn .45s cubic-bezier(.2,.7,.3,1) forwards .7s; }
.demo-stage.play .ds-stamp  { animation: dsScaleIn .35s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: var(--sd, 1.25s); }
.demo-stage.play .ds-prog i { animation: dsFill 1.5s cubic-bezier(.3,.6,.4,1) forwards .2s; }
.demo-stage.play .ds-line   { animation: dsDraw 1.3s ease forwards .2s; }
.demo-stage.play .ds-dot    { animation: dsFadeIn .3s ease forwards 1.5s; }
.demo-stage.play .ds-alert  { animation: dsIn .45s ease forwards 1.8s; }

@media (prefers-reduced-motion: reduce) {
  .demo-stage * { animation: none !important; }
  .ds-row { opacity: 1; transform: none; }
  .ds-bar { width: var(--w); }
  .ds-flip i { opacity: 0; }
  .ds-flip b { opacity: 1; }
  .ds-beam { transform: none; }
  .ds-ticket, .ds-stamp, .ds-dot, .ds-alert { opacity: 1; transform: none; }
  .ds-prog i { width: 100%; }
  .ds-line { stroke-dashoffset: 0; }
}
@media (max-width: 900px) {
  .ds-panel { width: 90%; }
}

/* Slide 5: monitoring vignette extras */
.ds-mark { stroke: color-mix(in srgb, rgb(var(--c-risk)) 42%, rgb(var(--c-white))); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; }
.ds-mklb { font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; fill: color-mix(in srgb, rgb(var(--c-risk)) 58%, rgb(var(--c-white))); opacity: 0; }
.ds-stats { align-items: baseline; }
.ds-stat { opacity: 0; transform: translateY(4px); }
.ds-up { color: var(--forest); font-weight: 600; }
.demo-stage.play .ds-mark,
.demo-stage.play .ds-mklb { animation: dsFadeIn .4s ease forwards 1.1s; }
.demo-stage.play .ds-stat { animation: dsIn .4s ease forwards; animation-delay: var(--d, 1.4s); }
@media (prefers-reduced-motion: reduce) {
  .ds-mark, .ds-mklb, .ds-stat { opacity: 1; transform: none; }
}

/* Slide 3: stacked allocation strip (distinct from slide 1's row list) */
.ds-alloc { display: flex; height: 16px; background: color-mix(in srgb, rgb(var(--c-line)) 62%, rgb(var(--c-white))); margin: 15px 0 10px; }
.ds-seg { display: block; height: 100%; width: 0; background: var(--steel); }
.ds-seg2 { background: color-mix(in srgb, rgb(var(--c-teal-blue)) 74%, rgb(var(--c-white))); }
.ds-seg3 { background: color-mix(in srgb, rgb(var(--c-teal-blue)) 48%, rgb(var(--c-white))); }
.ds-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 9px; letter-spacing: .06em;
  color: var(--gray-500); padding-bottom: 9px; }
.ds-key { display: inline-flex; align-items: center; gap: 5px; opacity: 0; }
.ds-key i { width: 8px; height: 8px; background: var(--steel); }
.ds-key2 i { background: color-mix(in srgb, rgb(var(--c-teal-blue)) 74%, rgb(var(--c-white))); }
.ds-key3 i { background: color-mix(in srgb, rgb(var(--c-teal-blue)) 48%, rgb(var(--c-white))); }
.demo-stage.play .ds-seg { animation: dsGrow .65s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: var(--d, 0s); }
.demo-stage.play .ds-key { animation: dsFadeIn .35s ease forwards; animation-delay: var(--d, .4s); }
@media (prefers-reduced-motion: reduce) {
  .ds-seg { width: var(--w); }
  .ds-key { opacity: 1; }
}

/* Rounded language for the demo vignettes (site-wide call: rounded) */
.demo-stage { border-radius: var(--radius-sm); }
.ds-panel { border-radius: 10px; }
.ds-chip, .ds-ticket { border-radius: 8px; }
.ds-stamp, .ds-alert { border-radius: 999px; }
.ds-track, .ds-bar, .ds-alloc, .ds-seg { border-radius: 3px; }
.ds-prog, .ds-prog i { border-radius: 2px; }
.ds-key i { border-radius: 2px; }

/* --------------------------------------------------------------------------
   Process section — scenario-fan figure (option B)
   -------------------------------------------------------------------------- */
.fx { width: 100%; height: auto; display: block; }
.fx-narrow { max-width: 1060px; margin-left: auto; margin-right: auto; } /* homepage figure + copy rail */
.fx.fx-narrow { max-width: 1040px; } /* the graphic alone sits a touch narrower than the copy row */
.fx text { font-family: var(--font-mono); letter-spacing: .08em; }
.fx .t   { font-size: 11px; fill: color-mix(in srgb, rgb(var(--c-gray-600)) 68%, rgb(var(--c-white))); }
.fx .tk  { font-size: 11px; fill: color-mix(in srgb, rgb(var(--c-line)) 18%, rgb(var(--c-ink))); font-weight: 500; }
.fx .ts  { font-size: 11px; fill: var(--steel); font-weight: 600; }
.fx .tg  { font-size: 11px; fill: var(--forest); font-weight: 600; }
.fx .tr  { font-size: 11px; fill: rgb(var(--c-risk)); font-weight: 600; }
.fx .num { font-size: 30px; fill: color-mix(in srgb, rgb(var(--c-gray-500)) 6%, rgb(var(--c-ink))); font-weight: 600; }
.fx .serif { font-family: var(--font-serif); letter-spacing: 0; fill: color-mix(in srgb, rgb(var(--c-gray-500)) 6%, rgb(var(--c-ink))); }
.pv .pv-fade  { opacity: 0; }
.pv .pv-pop   { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; }
.pv .pv-growx { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
.pv .pv-draw  { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pv.play .pv-fade  { animation: pvFade .45s ease forwards; animation-delay: var(--d, 0s); }
.pv.play .pv-pop   { animation: pvIn .4s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: var(--d, 0s); }
.pv.play .pv-growx { animation: pvGrow .6s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: var(--d, 0s); }
.pv.play .pv-draw  { animation: pvDraw var(--dur, 1s) cubic-bezier(.45,.25,.25,1) forwards; animation-delay: var(--d, 0s); }
@keyframes pvFade { to { opacity: 1; } }
@keyframes pvIn   { to { opacity: 1; transform: scale(1); } }
@keyframes pvGrow { to { transform: scaleX(1); } }
@keyframes pvDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pv * { animation: none !important; }
  .pv .pv-fade, .pv .pv-pop { opacity: 1; transform: none; }
  .pv .pv-growx { transform: scaleX(1); }
  .pv .pv-draw { stroke-dashoffset: 0; }
}
/* wide block, moderate gutters: columns stay wide enough that the copy
   holds two balanced lines even on renderers that measure Geist wider */
.pl-copy3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 27px; margin-top: 30px; }
.pl-copy3 h3 { font-size: 13px; font-family: var(--font-mono); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin: 0 0 8px; }
/* Balanced two-line copy at natural spacing (no justify rivers); balance
   keeps the pair of lines equal so all three chunks are the same height. */
.pl-copy3 p { margin: 0; font-size: 14px; color: var(--gray-600); line-height: 1.5; }
/* three-column desktop only: balance evens each column's two lines so the
   gutters read symmetric; stacked mobile stays greedy and fills the width */
@media (min-width: 901px) { .pl-copy3 p { text-wrap: balance; } }
@media (max-width: 900px) { .pl-copy3 { grid-template-columns: 1fr; } }