/* ============================================================
   GROVE · INVESTOR SITE
   Design system per Grove Visual Style Guide (Spring 2026)
   Type: PP Kyoto (display) · Switzer (body)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'PP Kyoto';
  font-weight: 500;
  src: local('PP Kyoto Medium'), local('PPKyoto-Medium'),
       url('assets/fonts/PPKyoto-Medium.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'PP Kyoto';
  font-weight: 800;
  src: local('PP Kyoto Extrabold'), local('PPKyoto-Extrabold'),
       url('assets/fonts/PPKyoto-Extrabold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  font-weight: 100 900;
  src: local('Switzer'), local('Switzer Variable'),
       url('assets/fonts/Switzer-Variable.ttf') format('truetype');
  font-display: swap;
}

/* ---------- Palette (Core + Expanded) ---------- */
:root {
  --cloud: #FAFBEF;      --cloud-l1: #FDFDF7;  --cloud-l2: #FFFFFF;
  --cloud-d1: #EFEFE1;   --cloud-d2: #E2E2CD;
  --lime: #C3F5A5;       --lime-l1: #D3F7BE;   --lime-d1: #ACE59B;  --lime-d2: #95D591;
  --palm: #50A573;       --palm-l1: #77BF95;   --palm-d1: #3C7C56;  --palm-d2: #285239;
  --grove: #2E7363;      --grove-l1: #579C8C;  --grove-d1: #22564A; --grove-d2: #173931;
  --dusk: #445D50;       --dusk-l1: #5E776A;   --dusk-d1: #2E3E37;  --dusk-d2: #27312C;
  --canopy: #213634;     --canopy-l1: #314F4C; --canopy-d1: #172C29;--canopy-d2: #172422;
  --clem: #FFB75A;       --clem-l1: #FFCB6C;   --clem-l2: #FFDF80;
  --clem-d1: #FF9F4A;    --clem-d2: #FF8E42;

  --font-display: 'PP Kyoto', Georgia, 'Times New Roman', serif;
  --font-body: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-card: 30px;   /* base cards */
  --radius-el: 6px;      /* content containers / secondary CTAs */
  --radius-cta: 12px;    /* primary CTA */
  --maxw: 1080px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- Reset / base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Paint the canvas a deep Grove green (matching the nav + theme-color) so the
   mobile browser chrome and any overscroll / safe-area gutters read on-brand,
   instead of the cream body colour bleeding through the edges as white. The
   body's own cream background still covers all page content. */
html { scroll-behavior: smooth; background-color: var(--canopy); }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px; /* single body size — all body copy inherits this */
  line-height: 1.55;
  color: var(--canopy);
  background: var(--cloud);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--lime); color: var(--canopy); }

/* Type scale per style guide: H1 55/110 · H2 42/110 · H3 36/110 · H4 XB 26/110 · H5 Switzer SB 18 */
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(38px, 5.5vw, 55px); letter-spacing: -0.01em; }
h2 { font-size: clamp(30px, 4.4vw, 42px); }
h3 { font-size: clamp(25px, 3.4vw, 36px); }
h4 { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.1; }
h5 { font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 1.2; }
@media (max-width: 480px) {
  h1 { font-size: 32px; overflow-wrap: break-word; }
  .hero .lede, .intro, .act p, ul.tick li, .featured-stat .cap, .band .takeaway,
  .value-block p, .band .kicker, .stage p { font-size: 18px; }
  .act .heard blockquote { font-size: 16px; }
}

p  { max-width: 68ch; }
a  { color: var(--grove); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--grove-d1); }
strong { font-weight: 600; }
em { font-style: italic; }

.accent   { color: var(--grove); }
/* Accent flips to Lime on dark surfaces per guide */
.hero .accent, .band .accent { color: var(--lime); }
/* Hero headline accents run Clementine, echoing the deck cover's
   "not AI slop" emphasis — one warm pop per page. */
.hero h1 .accent { color: var(--clem); }

/* Soften rag on running copy (no-op in browsers without text-wrap:pretty) */
.lede, .intro, .card p, .act p, .stage p, .value-block p,
.featured-stat .cap, .band .takeaway, .quote-card .q { text-wrap: pretty; }

/* ---------- Wordmark (official lockup — never redrawn) ---------- */
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { height: 46px; width: auto; display: block; margin: -6px 0; }
footer .wordmark img { height: 52px; }
/* The wordmark SVG carries ~17px of transparent left padding at this size;
   pull it left so the orange slice aligns with the fineprint text below. */
footer .wordmark { margin-left: -17px; }
/* Header lockup: wordmark | Investors */
.wordmark-suffix {
  /* wordmark SVG has ~15px trailing whitespace at 46px height — pull the
     divider back so the visual gap matches the 9px on its right */
  margin-left: -6px; padding-left: 9px;
  border-left: 1px solid rgba(250, 251, 239, 0.35);
  font-family: var(--font-body); font-weight: 500;
  font-size: 19px; line-height: 1.15; color: var(--cloud-d1);
  letter-spacing: 0.01em; white-space: nowrap;
  position: relative; top: -1px; /* optical align with wordmark letterforms */
}
.wordmark:hover .wordmark-suffix { color: var(--cloud); }

/* ---------- Nav (glassy overlay, grovehq.com format) ----------
   Fixed over the hero so the brand background reads through the glass.
   Slightly more opaque than marketing's 35% Canopy so Cloud links stay
   readable when scrolled over cream sections. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(33, 54, 52, 0.65);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* The wordmark SVG carries ~15px of transparent left padding at 46px height —
   pull the lockup left so the orange slice aligns with the page copy edge.
   Desktop only: the mobile nav uses tighter 16px side padding. */
@media (min-width: 721px) {
  .nav .wordmark { margin-left: -15px; }
}
.nav-links { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.nav-links a {
  font-size: 13.5px; font-weight: 500; color: var(--cloud-d1);
  text-decoration: none; padding: 7px 11px; border-radius: var(--radius-el);
  white-space: nowrap;
}
.nav-links a:hover { background: rgba(250, 251, 239, 0.1); color: var(--cloud); }
.nav-links a.active { background: rgba(195, 245, 165, 0.16); color: var(--lime); }
.nav-links a.cta {
  background: var(--clem); color: var(--canopy); font-weight: 600;
  border-radius: var(--radius-cta); padding: 8px 16px; margin-left: 6px;
}
.nav-links a.cta:hover { background: var(--clem-d1); }
/* Hamburger (mobile only) */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  color: var(--cloud); padding: 8px; border-radius: var(--radius-el);
}
.nav-toggle:hover { background: rgba(250, 251, 239, 0.1); }
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-inner { flex-wrap: wrap; padding: 10px 16px; }
  .nav-links { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 0 8px; }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding: 12px 10px; font-size: 15px; }
  .nav-links a.cta { margin: 10px 0 4px; text-align: center; }
}

/* ---------- Hero (brand gradient photo + scrim + grain) ----------
   Each page's hero carries a Grove brand background (bg-NN classes below).
   The images run darkest on the Problem page and get progressively lighter
   through the reading flow (deck anchors: 08 cover · 07 problem act).
   The CSS gradient stays as the paint-while-loading fallback. */
.hero {
  position: relative; overflow: hidden; color: var(--cloud);
  background:
    radial-gradient(110% 90% at 12% 8%, rgba(46,115,99,0.95) 0%, rgba(46,115,99,0) 55%),
    radial-gradient(90% 75% at 88% 22%, rgba(80,165,115,0.55) 0%, rgba(80,165,115,0) 55%),
    radial-gradient(120% 90% at 55% 108%, rgba(23,57,49,0.9) 0%, rgba(23,57,49,0) 62%),
    linear-gradient(158deg, var(--canopy) 0%, var(--grove-d2) 58%, var(--canopy-d1) 100%);
  background-size: cover; background-position: center;
}
/* Scrim: heavier behind the copy on the left, easing off to let the image read */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(23, 44, 41, 0.78) 0%,
    rgba(23, 44, 41, 0.62) 44%,
    rgba(23, 44, 41, 0.28) 100%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: 0.16; mix-blend-mode: overlay;
}
/* Brand backgrounds, dark → light through the journey:
   08 home (deck cover) · 07 problem (deck problem act) · 03 product ·
   05 why-grove · 06 go-to-market · 04 round · 01 documents */
.hero.bg-01 { background-image: url('assets/brand/backgrounds/grove-bg-01.jpg'); }
.hero.bg-02 { background-image: url('assets/brand/backgrounds/grove-bg-02.jpg'); }
.hero.bg-03 { background-image: url('assets/brand/backgrounds/grove-bg-03.jpg'); }
.hero.bg-04 { background-image: url('assets/brand/backgrounds/grove-bg-04.jpg'); }
.hero.bg-05 { background-image: url('assets/brand/backgrounds/grove-bg-05.jpg'); }
.hero.bg-06 { background-image: url('assets/brand/backgrounds/grove-bg-06.jpg'); }
.hero.bg-07 { background-image: url('assets/brand/backgrounds/grove-bg-07.jpg'); }
.hero.bg-08 { background-image: url('assets/brand/backgrounds/grove-bg-08.jpg'); }
.hero.bg-pos-low { background-position: center 78%; }
/* Brighter images need a touch more scrim to keep Cloud text comfortable */
.hero.bg-05::before, .hero.bg-06::before {
  background: linear-gradient(100deg,
    rgba(23, 44, 41, 0.84) 0%,
    rgba(23, 44, 41, 0.68) 44%,
    rgba(23, 44, 41, 0.34) 100%);
}
/* The two lightest gradients (round, documents) get the strongest scrim
   behind the copy while their brightness still glows through on the right */
.hero.bg-01::before, .hero.bg-04::before {
  background: linear-gradient(100deg,
    rgba(23, 44, 41, 0.88) 0%,
    rgba(23, 44, 41, 0.72) 44%,
    rgba(23, 44, 41, 0.38) 100%);
}
/* Top padding includes ~62px clearance for the fixed glass nav */
.hero-inner {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto; padding: 154px 24px 88px;
}
/* width:100% keeps the inner a full-width block inside the flex hero (without
   it, the auto side-margins shrink it to content width and indent the copy). */
/* Asymmetric padding: the top must clear the ~62px fixed glass nav plus a
   comfortable gap, so copy never crowds the nav even on the tallest heroes
   (problem, round). */
.hero-inner.tight { padding: 136px 24px 72px; width: 100%; }
/* Sub-page heroes (every page but the home page) share a consistent height,
   with the copy vertically centred so the extra space on the shorter pages is
   split evenly above and below. flex-direction:column keeps the cross axis
   horizontal, so .hero-inner stays a full-width block and the copy stays
   left-aligned with the body copy — this is NOT align-items:center (which
   would shrink the inner box and indent the copy). The min-height floor is
   sized so the tallest copy stack still fits inside it, meaning every
   sub-page hero renders at the same height. Home uses plain .hero-inner
   (no .tight) and is unaffected. */
.hero:has(.hero-inner.tight) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 560px;
}
@media (max-width: 720px) {
  /* Lift the hero copy toward the nav on phones. Applied to the shared
     .hero-inner (not the gate-locked variant) so the lock screen and the
     unlocked page use identical top spacing and the headline never jumps when
     the password gate clears. Desktop padding above is untouched. */
  .hero-inner { padding-top: 118px; }
  .hero-inner.tight { padding: 96px 24px 56px; }
  .hero:has(.hero-inner.tight) { min-height: 0; }
}
.hero h1 { color: var(--cloud); max-width: 20ch; }
.hero .lede {
  margin-top: 22px; font-size: 21px; line-height: 1.4; color: var(--cloud-d1);
  max-width: 58ch; font-weight: 400;
}
.hero .lede.narrow { max-width: 52ch; }
.hero .lede.wide { max-width: 66ch; } /* wider measure so a longer lede sits on 3 lines */
.hero .lede.balance { text-wrap: balance; } /* even out line lengths instead of a long line + short orphan */
.hero .lede strong { color: var(--cloud); }
.hero a { color: var(--lime); }
.hero-ctas { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-subcta { margin-top: 16px; font-size: 14.5px; color: rgba(239, 239, 225, 0.55); }
.hero-subcta a {
  color: rgba(239, 239, 225, 0.55);
  text-decoration: underline; text-decoration-color: rgba(239, 239, 225, 0.3); text-underline-offset: 2px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.hero-subcta a:hover { color: var(--cloud-d1); text-decoration-color: rgba(239, 239, 225, 0.55); }

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-block; background: var(--clem); color: var(--canopy);
  font-weight: 600; font-size: 16px; text-decoration: none;
  padding: 13px 26px; border-radius: var(--radius-cta);
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn-primary:hover { background: var(--clem-d1); color: var(--canopy); transform: translateY(-1px); }
/* Primary CTAs carry a trailing arrow per the style guide's CTA spec */
.btn-primary::after {
  content: '\2192'; display: inline-block; margin-left: 9px;
  transition: transform 0.15s ease;
}
.btn-primary:hover::after { transform: translateX(3px); }
.btn-secondary {
  display: inline-block; background: var(--lime); color: var(--canopy);
  font-weight: 600; font-size: 14px; text-decoration: none;
  padding: 11px 20px; border-radius: var(--radius-el);
}
.btn-secondary:hover { background: var(--lime-d1); color: var(--canopy); }
.btn-tertiary {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--canopy);
  font-weight: 600; font-size: 16px; text-decoration: none;
  padding: 13px 26px; border: 1px solid var(--cloud-d2); border-radius: var(--radius-cta);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-tertiary:hover { background: var(--cloud-d1); border-color: var(--dusk-l1); color: var(--canopy); }
.btn-ghost {
  display: inline-block; background: transparent; color: var(--lime);
  font-weight: 600; font-size: 14px; text-decoration: none;
  padding: 11px 20px; border-radius: var(--radius-el); border: 1px solid var(--lime);
}
.btn-ghost:hover { background: rgba(195,245,165,0.12); color: var(--lime); }
/* Filled CTAs always carry Canopy text per guide — beat contextual link colors
   (.hero a / .band a / .callout.round a) on specificity */
.hero a.btn-primary, .band a.btn-primary, .callout.round a.btn-primary,
.hero a.btn-secondary, .band a.btn-secondary, .callout.round a.btn-secondary {
  color: var(--canopy);
}

/* ---------- Sections ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: 64px 24px; }
.section.flush-top { padding-top: 48px; }
.section-label {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grove); margin-bottom: 14px;
}
.section h2 { margin-bottom: 18px; max-width: 24ch; }
/* Let a heading run its first line full-width (line breaks handled inline) */
.section h2.wide-head { max-width: none; }
.section h2.lg { font-size: clamp(38px, 5.5vw, 55px); letter-spacing: -0.01em; }
.intro { font-size: 21px; line-height: 1.4; max-width: 62ch; }
.section .intro { color: var(--dusk-d1); }
.band .intro { color: var(--cloud-d1); }
.rule { border: none; border-top: 1px solid var(--cloud-d2); max-width: var(--maxw); margin: 0 auto; }

/* Dark band section */
.band {
  position: relative; overflow: hidden; color: var(--cloud);
  background: linear-gradient(150deg, var(--grove-d1) 0%, var(--grove-d2) 70%, var(--canopy-d1) 100%);
}
.band::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: 0.14; mix-blend-mode: overlay;
}
.band-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 64px 24px; }
/* Text + graphic split inside a band. The art centers against the text
   column and stays smaller than it, so it never rises above the heading. */
.band-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: end; }
.band-split p { font-size: 21px; line-height: 1.4; }
.band-art img { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; }
@media (max-width: 900px) {
  .band-split { grid-template-columns: 1fr; gap: 40px; }
  .band-art img { max-width: 420px; }
}
.band h2, .band h3 { color: var(--cloud); }
.band .section-label { color: var(--lime); }
.band p { color: var(--cloud-d1); }
.band a { color: var(--lime); }

/* Band imagery — brand gradients behind dark sections, mirroring the deck's
   photo panels (moat = 02, the ask = 04). The flat gradient stays as the
   loading fallback; the scrim ::before slots under the grain ::after and the
   z-index:1 .band-inner. Bands never set background-size, so the image rules
   must. Default scrim is HEAVY (safe over dense content — cards, timelines);
   sparse single-statement closers add .airy for a softer wash. */
.band.bg-02, .band.bg-03, .band.bg-04, .band.bg-05,
.band.bg-06, .band.bg-07, .band.bg-08 {
  background-size: cover; background-position: center;
}
.band.bg-02 { background-image: url('assets/brand/backgrounds/grove-bg-02.jpg'); }
.band.bg-03 { background-image: url('assets/brand/backgrounds/grove-bg-03.jpg'); }
.band.bg-04 { background-image: url('assets/brand/backgrounds/grove-bg-04.jpg'); }
.band.bg-05 { background-image: url('assets/brand/backgrounds/grove-bg-05.jpg'); }
.band.bg-06 { background-image: url('assets/brand/backgrounds/grove-bg-06.jpg'); }
.band.bg-07 { background-image: url('assets/brand/backgrounds/grove-bg-07.jpg'); }
.band.bg-08 { background-image: url('assets/brand/backgrounds/grove-bg-08.jpg'); }
.band.bg-02::before, .band.bg-03::before, .band.bg-04::before,
.band.bg-05::before, .band.bg-06::before, .band.bg-07::before,
.band.bg-08::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(165deg,
    rgba(23, 44, 41, 0.93) 0%,
    rgba(23, 44, 41, 0.86) 100%);
}
.band.airy::before {
  background: linear-gradient(165deg,
    rgba(23, 44, 41, 0.80) 0%,
    rgba(23, 44, 41, 0.66) 100%);
}

/* ---------- Cards ---------- */
.card {
  background: transparent; border: 1px solid var(--cloud-d2);
  border-radius: var(--radius-card); padding: 30px;
}
.card.solid { background: var(--cloud-d1); border: none; }
.card.deep { background: var(--grove-d1); border: none; color: var(--cloud); }
.card.deep h3, .card.deep h4, .card.deep h5 { color: var(--cloud); }
.card.deep p { color: var(--cloud-d1); }
.card.deep a { color: var(--lime); }
.card.on-dark { background: transparent; border: 1px solid rgba(253, 253, 247, 0.45); color: var(--cloud); } /* 1px Cloud L1 outline per guide, softened for gradient bands */
.card.on-dark p { color: var(--cloud-d1); }

/* Link cards (Learn more grid) — the whole card is a button, and reads like
   one: a resting arrow on the title, then lift + fill + border highlight on
   hover with the arrow sliding forward. */
.card-link { display: block; text-decoration: none; height: 100%; }
.card-link .card {
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              border-color 0.18s ease, background 0.18s ease;
}
.card-link .card h5 {
  color: var(--grove);
  transition: color 0.18s ease;
}
.card-link .card h5::after {
  content: '\2192'; display: inline-block; margin-left: 8px;
  opacity: 0.55;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.card-link:hover .card {
  transform: translateY(-3px);
  background: var(--cloud-l1);
  border-color: var(--palm);
  box-shadow: 0 12px 28px rgba(23, 44, 41, 0.10);
}
.card-link:hover .card h5 { color: var(--grove-d1); }
.card-link:hover .card h5::after { transform: translateX(4px); opacity: 1; }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible .card {
  border-color: var(--palm);
  outline: 2px solid var(--grove); outline-offset: 2px;
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, 1fr); } }

/* Side-by-side cards whose headings wrap to different line counts: subgrid
   pins each internal block (label / heading / body) to shared rows so the
   internals align across siblings. Opt in with .eq-rows and set --rows to the
   number of stacked blocks per card. Desktop only — stacked cards flow
   naturally — and a graceful no-op where subgrid is unsupported. */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .eq-rows { row-gap: 14px; }
    .eq-rows > .card {
      display: grid; grid-template-rows: subgrid;
      grid-row: span var(--rows, 2); align-content: start;
    }
    .eq-rows > .card > :is(h3, h4, h5, .section-label) { margin-bottom: 0; }
    .eq-rows > .card > ul.tick { margin-top: 0; margin-bottom: 0; }
  }
}

.card h5 { margin-bottom: 8px; }
.card p { line-height: 1.5; color: var(--dusk-d1); }
/* Inline links on Cloud D1/D2 surfaces use Canopy per guide */
.card.solid a, .quote-card a, .callout.risk a { color: var(--canopy); }
.card.solid a:hover, .quote-card a:hover, .callout.risk a:hover { color: var(--canopy-d1); }

/* ---------- Stats ---------- */
.stat .num {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 4.5vw, 46px); color: var(--grove); line-height: 1.05;
}
.stat .label { font-weight: 500; color: var(--dusk); margin-top: 8px; }
.stat .label .sub { display: block; margin-bottom: 4px; color: var(--canopy); }
.band .stat .num { color: var(--lime); }
.band .stat .label { color: var(--cloud-d1); }
.stat .num .u { color: var(--clem-d2); }

/* Round stat cards (home): each key number in a soft solid card; the
   committed figure carries a lime tint as the momentum highlight. */
.stat-cards > .card {
  background: var(--cloud-d1); border: none; border-radius: 22px;
  padding: 24px 26px;
}
.stat-cards > .card.hl { background: var(--lime-l1); }
.stat-cards .num { font-size: clamp(30px, 3vw, 38px); }
.stat-cards .label { margin-top: 6px; }
/* On phones these four cards are a tight 2-up grid; the roomy 26px side
   padding plus the 30px figure left "$12M cap" no room and forced an ugly
   two-line wrap. Trim the side padding and step the figure down a touch —
   applied to every card so they stay identical — and it fits on one line. */
@media (max-width: 480px) {
  .stat-cards > .card { padding: 24px 16px; }
  .stat-cards .num { font-size: 25px; }
}

/* Featured stat — focal number, sized to sit within the text column */
.featured-stat { max-width: 40ch; margin: 36px auto 0; }
.featured-stat .num {
  font-family: var(--font-display); font-weight: 500; color: var(--lime);
  font-size: clamp(44px, 6vw, 64px); line-height: 1; letter-spacing: -0.01em;
}
.featured-stat .cap { font-size: 21px; line-height: 1.4; color: var(--cloud); margin-top: 8px; }
.featured-stat .src { font-size: 13px; color: var(--cloud-d1); margin-top: 14px; }
.band .takeaway {
  font-size: 21px; line-height: 1.4; max-width: 46ch;
  margin: 36px auto 0; color: var(--cloud-d1);
}
.band p strong { color: var(--cloud); }

/* ---------- Quotes ---------- */
/* Quote wall: one column per feedback category (design partner / alpha /
   market research). Columns stretch to equal height and each pins its cards
   to the top and bottom, so every column lines up on both edges regardless of
   how tall its quotes are. */
.quote-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.quote-col { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
@media (max-width: 900px) { .quote-wall { grid-template-columns: repeat(2, 1fr); } .quote-col { justify-content: flex-start; } }
@media (max-width: 640px) { .quote-wall { grid-template-columns: 1fr; } }

.quote-card {
  background: var(--cloud-d1); border-radius: 22px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.quote-card .src {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--dusk-l1);
}
.quote-card .q {
  font-family: var(--font-display); font-weight: 500; font-size: 16.5px; line-height: 1.45;
  color: var(--canopy);
}
.quote-card .who { font-size: 12.5px; font-weight: 600; color: var(--grove); margin-top: 2px; }

blockquote.pull {
  border-left: 3px solid var(--clem); padding: 6px 0 6px 22px; margin: 28px 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(20px, 2.6vw, 26px); line-height: 1.3; color: var(--grove-d1);
  max-width: 34ch;
}

/* Full-width takeaway card — section-closing statement, no accent bar */
.takeaway-card {
  background: var(--cloud-d1); border-radius: var(--radius-card);
  padding: 38px 44px; margin-top: 40px;
}
.takeaway-card p {
  font-family: var(--font-display); font-weight: 500; max-width: 52ch;
  font-size: clamp(21px, 2.3vw, 27px); line-height: 1.32; color: var(--grove-d1);
}
.takeaway-card strong { font-weight: 800; color: var(--grove-d1); }
@media (max-width: 640px) { .takeaway-card { padding: 30px 26px; } }

/* ---------- Story acts (Problem page) ---------- */
.act { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid var(--cloud-d2); }
.act:first-of-type { border-top: none; }
.act .n {
  font-family: var(--font-display); font-weight: 800; font-size: 40px;
  color: var(--cloud-d2); line-height: 1;
  -webkit-text-stroke: 1.5px var(--grove); color: transparent;
}
.act h3 { margin-bottom: 10px; font-size: 26px; }
.act p { margin-bottom: 10px; color: var(--dusk-d1); font-size: 21px; line-height: 1.4; }
.act .heard { margin-top: 14px; }
.act .heard blockquote {
  font-style: italic; color: var(--dusk-l1); font-size: 18px; padding: 6px 14px;
  border-left: 2px solid rgba(255, 183, 90, 0.5); margin: 6px 0;
}
@media (max-width: 640px) { .act { grid-template-columns: 1fr; gap: 6px; } }

/* Text + graphic split on a light section (Problem page ticket pile).
   The deck cards carry their own strokes and shadows, so the art sits
   directly on the page — no panel. */
/* Headline spans the full width on its own row so each sentence holds one line
   (the highlighted one runs toward the art without touching it); the copy and
   the ticket pile share the row beneath, so the art sits below the headline. */
.split-art { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 8px; align-items: start; }
.split-art .stacked-head { grid-row: 1; grid-column: 1 / -1; max-width: none; margin-bottom: 24px; }
.split-art .split-copy { grid-row: 2; grid-column: 1; }
/* Let the pile rise into the headline row on the right and bottom-align it to
   the copy, so its top tucks just under the headline and its bottom meets the
   end of the body text. The height cap keeps the top clear of the headline. */
.split-art .split-art-fig { grid-row: 1 / span 2; grid-column: 2; align-self: end; text-align: center; }
.split-art .intro { max-width: 54ch; text-wrap: pretty; }
.split-art-fig img { display: inline-block; width: auto; max-width: 100%; max-height: 384px; height: auto; }
/* Drop a sentence onto its own line with a small gap above it. */
.break-line { display: block; margin-top: 0.6em; }
/* Stack the two headline sentences; keep the lime marker at the heading weight
   (not bold) with a little leading so it isn't cramped. */
.split-art h2.stacked-head span { display: block; }
.split-art h2.stacked-head span + span { margin-top: 0.3em; }
.split-art h2.stacked-head span:has(mark.hl-lime) { line-height: 1.35; }
/* Pull the marker left by its own horizontal padding so the highlighted text
   left-aligns with the plain line above — the lime background extends further
   left rather than pushing the text inward. */
.split-art h2.stacked-head mark.hl-lime { font-weight: 500; margin-left: -10px; }
@media (max-width: 900px) {
  .split-art { grid-template-columns: 1fr; gap: 8px; }
  .split-art .split-art-fig { grid-column: 1; grid-row: auto; align-self: auto; }
  .split-art-fig img { width: 100%; max-width: 440px; max-height: none; margin: 0 auto; }
}

/* ---------- GTM stage timeline (Go-to-Market band) ----------
   Numbered sequence, not parallel cards — the point is the order.
   Mirrors the Problem page's .act pattern, flipped for the dark band. */
.stage { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 34px 0; }
.stages .stage:first-child { padding-top: 12px; }
.stage + .stage { border-top: 1px solid rgba(253, 253, 247, 0.22); }
.stage .n {
  font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1;
  -webkit-text-stroke: 1.5px var(--lime); color: transparent;
}
.stage .when {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cloud-d1); margin-bottom: 8px;
}
.band .stage h3 { font-size: clamp(23px, 3vw, 30px); color: var(--lime); margin-bottom: 10px; }
.stage p { font-size: 21px; line-height: 1.4; max-width: 62ch; }
.stage .key { margin-top: 16px; border-left: 3px solid var(--lime); padding: 3px 0 3px 16px; }
.stage .key.fund { border-left-color: var(--clem); }

/* Stages funded by the current round — boxed and labelled */
.funded {
  position: relative;
  border: 1.5px solid var(--lime-d2);
  border-radius: var(--radius-card);
  background: rgba(195, 245, 165, 0.05);
  padding: 4px 30px 12px;
  margin-bottom: 14px;
}
/* Stage 3 sits outside the box — indent it to line up with the boxed stages */
.stages > .stage { padding-left: 31.5px; }
.funded-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--canopy); background: var(--lime);
  padding: 7px 16px; border-radius: 999px;
  transform: translateY(-50%);
  margin-bottom: -6px;
}
.funded .stage { padding: 28px 0; }
.funded .stage:first-of-type { border-top: none; }
@media (max-width: 480px) {
  .funded { padding: 4px 18px 8px; }
  .funded-tag { letter-spacing: 0.1em; }
  .stages > .stage { padding-left: 19.5px; }
}
.stage .key.fund strong { color: var(--clem); }
@media (max-width: 640px) { .stage { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Value blocks (Why Grove) ----------
   Display heads over the standard 20px body copy, in or out of cards */
.value-block h3 { font-size: 26px; margin-bottom: 12px; }
.value-block p { font-size: 21px; line-height: 1.4; color: var(--dusk-d1); }
/* Compact value cards: display heads over standard 16px body copy, so short
   side-by-side cards hold the same line count instead of ragged wraps */
.card.value-block.compact p { font-size: 16px; line-height: 1.5; }
.value-block p + p { margin-top: 14px; }
.band .value-block p { color: var(--cloud-d1); }
.card.value-block { padding: 32px 34px; }
.card.value-block h3 { font-size: 24px; }
/* Dark value cards (Grove's value over time): give the serif headers room to
   breathe — looser leading and clear separation from the label above and the
   checklist below (balanced wrapping now comes from the global h3 rule). */
.band .card.value-block h3 {
  font-size: clamp(24px, 2.3vw, 27px); line-height: 1.22;
  letter-spacing: -0.005em; margin-bottom: 20px;
}
.band .card.value-block .section-label { margin-bottom: 12px; }

/* Highlighted takeaway line (marker style) */
mark.hl-lime {
  background: var(--lime); color: var(--canopy); font-weight: 600;
  padding: 3px 10px; border-radius: 6px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Marked lines inside display headings keep the heading weight, and pull
   left by the marker's own padding so the text stays flush with the line
   above (the lime extends further left instead of indenting the words). */
h1 mark.hl-lime, h2 mark.hl-lime { font-weight: 500; margin-left: -10px; }
/* A marked line following a <br> inside a heading: inline-block gives the
   marker its own line box (so the lime never overlays the line above) with
   a slimmer pad and a little clearance below the first line. */
h2.wide-head mark.hl-lime {
  display: inline-block; margin-top: 12px;
  padding: 2px 8px; margin-left: -8px;
}
.act p.take { line-height: 1.9; }
/* Force the marked heading to break at its balanced midpoint once it wraps on
   phones (≤560px). text-wrap:balance handles this in Chrome/Safari 17.5+, but
   this hard break keeps the two lime lines even — and the box-decoration-break
   pills tidy — on browsers that don't balance. Hidden above the wrap width. */
.br-bal { display: none; }
@media (max-width: 560px) { .br-bal { display: inline; } }

/* Compact competitor cards under the capability matrix */
.vs-card h3 { font-size: 21px; }
.vs-card h3 .ex {
  display: block; font-family: var(--font-body); font-size: 14.5px;
  font-weight: 500; letter-spacing: 0.02em; color: var(--dusk-l1); margin-top: 7px;
}

/* Setup line above a punch headline (closer bands, heroes) */
.band .kicker, .hero .kicker {
  font-size: 21px; line-height: 1.4; color: var(--cloud-d1);
  margin-bottom: 14px; text-wrap: balance;
}

/* ---------- Loop diagram ---------- */
.loop {
  display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
  margin: 34px 0 10px;
  /* Break out a touch beyond the text column so each step's copy fits on 4 lines */
  margin-left: -20px; margin-right: -20px;
}
@media (min-width: 1128px) {
  .loop { margin-left: -44px; margin-right: -44px; }
}
.loop .step { flex: 1 1 150px; position: relative; padding: 26px 18px 26px 22px; background: var(--cloud-d1); }
.loop .step:first-child { border-radius: var(--radius-card) 0 0 var(--radius-card); }
.loop .step:last-child  { border-radius: 0 var(--radius-card) var(--radius-card) 0; background: var(--grove-d1); }
.loop .step:last-child h5, .loop .step:last-child p { color: var(--cloud); }
.loop .step:last-child p { color: var(--cloud-d1); }
.loop .step + .step { border-left: 2px solid var(--cloud); }
.loop .step .art {
  height: 180px; margin-bottom: 20px;
  display: flex; align-items: flex-end; justify-content: center;
}
.loop .step .art img { max-height: 100%; max-width: 100%; width: auto; display: block; }
.loop .step:last-child .art img { transform: translateY(-22px); }
.loop .step .k {
  font-size: 15px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--grove); margin-bottom: 6px;
}
.loop .step:last-child .k { color: var(--lime); }
.loop .step h5 { font-family: var(--font-display); font-weight: 500; font-size: 21px; margin-bottom: 6px; }
.loop .step p { line-height: 1.5; color: var(--dusk-d1); }
@media (max-width: 900px) {
  .loop { flex-direction: column; }
  .loop .step { padding: 26px 24px; }
  .loop .step:first-child { border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .loop .step:last-child { border-radius: 0 0 var(--radius-card) var(--radius-card); }
  .loop .step + .step { border-left: none; border-top: 2px solid var(--cloud); }
  .loop .step .art { height: 170px; }
}

/* Timeline tag: marks what ships next to what runs today (loop + preview) */
.when-tag {
  display: inline-block; vertical-align: 2px; margin-left: 9px;
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--clem); color: var(--canopy-d1);
}
/* Quiet caption under the loop: states the norm so the tag reads as the exception */
.loop-note { margin-top: 12px; font-size: 14px; color: var(--dusk-l1); }

/* ---------- Vision map (roadmap cards over the faded loop, per deck slide) ---------- */
.vision-map { position: relative; container-type: inline-size; margin-top: 34px; }
.vision-map .vm-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8cqw; aspect-ratio: 1834 / 627; }
/* The overlaid vm-cards size to their own wrapped text, so at narrower
   widths they outgrow the aspect-locked column grid. These static floors
   (measured per container-width band, with clearance) keep the column
   boundaries extending beneath the lowest card even if the JS refinement
   below never runs; the script then sets the exact height inline. */
@container (max-width: 680px)                        { .vm-cols { min-height: 50.5cqw; } }
@container (min-width: 680.02px) and (max-width: 720px)  { .vm-cols { min-height: 48cqw; } }
@container (min-width: 720.02px) and (max-width: 760px)  { .vm-cols { min-height: 46cqw; } }
@container (min-width: 760.02px) and (max-width: 800px)  { .vm-cols { min-height: 44.5cqw; } }
@container (min-width: 800.02px) and (max-width: 840px)  { .vm-cols { min-height: 38.5cqw; } }
@container (min-width: 840.02px) and (max-width: 900px)  { .vm-cols { min-height: 37cqw; } }
@container (min-width: 900.02px) and (max-width: 1000px) { .vm-cols { min-height: 35.8cqw; } }
@container (min-width: 1000.02px)                    { .vm-cols { min-height: 35.2cqw; } }
.vision-map .vm-col {
  background: rgba(250, 251, 239, 0.52);
  border: 1px solid rgba(222, 224, 199, 0.85);
  border-radius: 11px;
  padding-top: 1.2cqw; text-align: center;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(13px, 1.9cqw, 36px); color: rgba(33, 54, 52, 0.38);
}
.vision-map .vm-card {
  position: absolute;
  padding: 1.6cqw 1.9cqw 1.9cqw;
  border-radius: clamp(14px, 1.64cqw, 30px);
  border: 1px solid rgba(250, 251, 239, 0.85);
  background-size: cover; background-position: center;
  color: var(--cloud);
  box-shadow: 0 14px 34px rgba(23, 44, 41, 0.18);
}
.vision-map .vm-now    { left: 32.06%; top: 16.11%; width: 51.42%; z-index: 3; background-image: url('assets/product/vision-now.jpg'); }
.vision-map .vm-next   { left: 65.10%; top: 48.80%; width: 33.40%; z-index: 4; background-image: url('assets/product/vision-next.jpg'); }
.vision-map .vm-future { left: 2.50%;  top: 57.90%; width: 47.40%; z-index: 1; background-image: url('assets/product/vision-future.jpg'); }
.vision-map .vm-card .t {
  font-family: var(--font-display); font-weight: 500; line-height: 1.15;
  font-size: clamp(17px, 2.35cqw, 45px); margin-bottom: 0.5cqw;
}
.vision-map .vm-card h5 { color: var(--cloud); font-size: clamp(12.5px, 1.5cqw, 29px); margin-bottom: 0.35cqw; }
.vision-map .vm-card p { color: rgba(250, 251, 239, 0.88); font-size: clamp(11.5px, 1.32cqw, 25px); line-height: 1.42; }
.vision-map .vm-now p    { max-width: 36cqw; }
.vision-map .vm-next p   { max-width: 30cqw; }
.vision-map .vm-future p { max-width: 43cqw; }
@media (max-width: 720px) {
  .vision-map .vm-cols { display: none; }
  .vision-map .vm-card { position: static; width: auto; padding: 22px 24px; border-radius: 22px; }
  .vision-map .vm-card + .vm-card { margin-top: 14px; }
  .vision-map .vm-card .t { font-size: 24px; margin-bottom: 6px; }
  .vision-map .vm-card h5 { font-size: 16px; margin-bottom: 4px; }
  .vision-map .vm-card p { font-size: 15px; max-width: none; }
}

/* ---------- Jobs board (the unit of progress) ----------
   Lives on a dark band: cream chips carry the light, the icons carry
   the color, and the pills/labels borrow the band's lime accents. */
.jobs-board { margin-top: 34px; }
.jobs-toggle { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Segmented tab track: one recessed rail, the active segment fills lime */
.jobs-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: rgba(23, 44, 41, 0.5);
  border: 1px solid rgba(253, 253, 247, 0.22);
  border-radius: 999px;
}
.jobs-pill {
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  border: none; background: transparent; color: var(--cloud-d1);
  transition: background 0.15s ease, color 0.15s ease;
}
.jobs-pill:hover { color: var(--cloud); background: rgba(253, 253, 247, 0.08); }
.jobs-pill[aria-pressed="true"] { background: var(--lime); color: var(--canopy-d1); }
.jobs-pill:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.jobs-count {
  margin-left: 4px; font-size: 14.5px; font-weight: 600;
  color: var(--cloud-d1); font-variant-numeric: tabular-nums;
}

.jobs-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 26px; }
.jobs-col-label {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lime); margin: 2px 2px 10px;
}
.jobs-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--cloud-l1); border: 1px solid rgba(23, 44, 41, 0.14);
  border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 6px 18px rgba(23, 44, 41, 0.22);
  font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--dusk-d1);
  transition: opacity 0.3s ease;
}
.jobs-chip + .jobs-chip { margin-top: 8px; }
/* Grove-run jobs read as handled: washed toward Grove's green and sitting
   lower (less lift), still fully alive — chips needing humans float bright. */
.jobs-chip.auto {
  background: #E7F3D8;
  border-color: rgba(46, 115, 99, 0.28);
  box-shadow: 0 2px 8px rgba(23, 44, 41, 0.14);
}
.jobs-chip .who { display: inline-flex; align-items: center; flex: none; }
/* Runner icons as small avatar badges: filled circle, glyph knocked out.
   Pairs stack like avatars: the first sits on top, the second peeks out
   behind it, each ringed in the chip's own surface color. */
.jobs-chip .who svg, .jobs-legend svg {
  display: block; width: 21px; height: 21px;
  padding: 4.5px; border-radius: 50%;
}
.jobs-chip .who svg { position: relative; box-shadow: 0 0 0 2px var(--cloud-l1); }
.jobs-chip .who svg:first-child { z-index: 1; }
.jobs-chip .who svg + svg { margin-left: -7px; }
.jobs-chip.auto .who svg { box-shadow: 0 0 0 2px #E7F3D8; }
.who-grove { background: var(--grove); color: var(--cloud); }
.who-team { background: var(--clem); color: var(--canopy-d1); }
.who-agent { background: var(--cloud-d2); color: var(--dusk-d1); }
.jobs-board.fix-view .jobs-chip:not([data-fix]) { opacity: 0.15; }

/* Quiet key: plain muted labels, the icon badges carry the identity */
.jobs-legend { margin-top: 24px; font-size: 13px; color: rgba(239, 239, 225, 0.72); }
.jobs-legend .legend-title { display: block; margin-bottom: 10px; }
.jobs-legend .who-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.jobs-legend .who-key { display: inline-flex; align-items: center; gap: 8px; }
.jobs-legend svg { width: 19px; height: 19px; padding: 4px; }
@media (max-width: 900px) { .jobs-cols { grid-template-columns: repeat(2, 1fr); row-gap: 22px; } }
@media (max-width: 560px) {
  /* Keep the board two-up on phones instead of collapsing to one very tall
     column, and compact the chips — the whole loop stays complete but takes
     far less scrolling to read. */
  .jobs-cols { grid-template-columns: repeat(2, 1fr); gap: 8px; row-gap: 16px; margin-top: 20px; }
  .jobs-chip { padding: 7px 9px; font-size: 12px; border-radius: 10px; gap: 5px; }
  .jobs-chip + .jobs-chip { margin-top: 6px; }
  .jobs-chip .who svg { width: 17px; height: 17px; padding: 3.5px; }
  .jobs-chip .who svg + svg { margin-left: -6px; }
  .jobs-col-label { margin-bottom: 6px; letter-spacing: 0.1em; }
}

/* ---------- Product preview (screenshot + scrolly highlights) ---------- */
.shot-frame {
  display: block; position: relative; width: 100%; padding: 0;
  font: inherit; text-align: inherit;
  border: 1px solid rgba(33, 54, 52, 0.16);
  border-radius: 18px; overflow: hidden;
  background: var(--cloud-l2);
  box-shadow: 0 14px 34px rgba(23, 44, 41, 0.18);
}
.shot-frame img { display: block; width: 100%; height: auto; }
.shot-frame:focus-visible { outline: 2px solid var(--grove); outline-offset: 3px; }

/* Home: framed shots straddling the hero seam — workspace peeking behind */
.hero-shot {
  position: relative; z-index: 1;
  max-width: min(920px, calc(100vw - 48px));
  margin: -380px auto 0;
}
.hero-shot .shot-frame {
  box-shadow: 0 24px 80px rgba(23, 36, 34, 0.45);
  border-color: rgba(23, 36, 34, 0.30);
  cursor: pointer;
}
.hero-shot-stack { position: relative; padding: 220px 120px 0 0; }
.hero-shot-stack .shot-frame.back {
  position: absolute; top: 0; right: 0; width: 76%;
  box-shadow: 0 18px 50px rgba(23, 36, 34, 0.35);
  cursor: default;
}
.hero-shot-stack > a.shot-frame { position: relative; z-index: 1; display: block; }
.hero.has-shot .hero-inner { padding-bottom: 452px; }

/* Product page: centered pinned shot, captions float beside each highlight */
.shot-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--lime); color: var(--canopy);
  font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 26px;
}
.shot-spotlight {
  position: absolute; opacity: 0; pointer-events: none;
  border: 1px solid rgba(46, 115, 99, 0.5); border-radius: 10px;
  /* Hairline + deeper dim + soft glow: the lit region reads as lifted */
  box-shadow: 0 0 0 200vmax rgba(23, 44, 41, 0.34), 0 10px 30px rgba(23, 44, 41, 0.35);
  transition: left .5s cubic-bezier(.4, 0, .2, 1), top .5s cubic-bezier(.4, 0, .2, 1),
              width .5s cubic-bezier(.4, 0, .2, 1), height .5s cubic-bezier(.4, 0, .2, 1),
              opacity .35s ease;
}
.shot-spotlight.on { opacity: 1; }
/* Secondary highlight: shows its slice of the shot lit above the dim.
   Glides its box AND its lit slice (position + size) between steps, matching
   the primary spotlight, so moving from one region to the next animates
   rather than snapping. When it first appears the JS suppresses the glide so
   it fades in where it belongs instead of sliding from a stale position. */
.shot-spot2 {
  position: absolute; opacity: 0; pointer-events: none;
  border: 1px solid rgba(46, 115, 99, 0.5); border-radius: 10px;
  background-repeat: no-repeat;
  box-shadow: 0 10px 30px rgba(23, 44, 41, 0.35);
  transition: left .5s cubic-bezier(.4, 0, .2, 1), top .5s cubic-bezier(.4, 0, .2, 1),
              width .5s cubic-bezier(.4, 0, .2, 1), height .5s cubic-bezier(.4, 0, .2, 1),
              background-position .5s cubic-bezier(.4, 0, .2, 1),
              background-size .5s cubic-bezier(.4, 0, .2, 1),
              opacity .35s ease;
}
.shot-spot2.on { opacity: 1; }
/* Animated cursor: glides onto the control that opens the next view, clicks */
.shot-cursor {
  position: absolute; width: 20px; height: 20px;
  opacity: 0; pointer-events: none;
  transition: left 1.1s cubic-bezier(.4, 0, .2, 1), top 1.1s cubic-bezier(.4, 0, .2, 1),
              opacity .3s ease;
}
.shot-cursor.jump { transition: none; }
.shot-cursor.on { opacity: 1; }
.shot-cursor svg { display: block; filter: drop-shadow(0 2px 5px rgba(23, 44, 41, 0.35)); }
.shot-cursor::after {
  content: ''; position: absolute; left: -7px; top: -7px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--grove); opacity: 0; transform: scale(0.3);
}
.shot-cursor.click::after { animation: cursor-ripple .45s ease-out; }
.shot-cursor.click svg { animation: cursor-press .45s ease; }
@keyframes cursor-ripple {
  0% { opacity: .8; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.4); }
}
@keyframes cursor-press {
  0% { transform: scale(1); }
  35% { transform: scale(0.8); }
  100% { transform: scale(1); }
}
/* Break out of the text column like .loop so the shot renders large */
.scrolly { position: relative; margin-left: -20px; margin-right: -20px; }
.scrolly-fig {
  /* Left edge stays on the text column (offsetting the breakout margin);
     only the right side borrows breakout room */
  position: relative; margin: 0 0 0 20px;
  /* As wide as the column allows while still fitting a pinned viewport
     (ratio = the tallest view's aspect: home shot 2424/2058) */
  max-width: min(100%, calc((100vh - 150px) * 1.1779));
}
/* Three views share the stage and crossfade in place */
.scrolly-fig .shot-frame + .shot-frame { margin-top: 16px; }
.scrolly.enhanced .scrolly-fig {
  /* height set by JS to the visible view's natural height; settles with the crossfade */
  border-radius: 18px; overflow: hidden;
  background: var(--cloud-l2);
  box-shadow: 0 14px 34px rgba(23, 44, 41, 0.18);
  transition: height .6s ease;
}
.scrolly.enhanced .scrolly-fig .shot-frame {
  position: absolute; inset: 0; margin: 0;
  box-shadow: none; transition: opacity .6s ease;
}
.scrolly.enhanced .scrolly-fig .shot-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.scrolly.enhanced .scrolly-fig .shot-frame { opacity: 0; }
.scrolly.enhanced[data-view="home"] .frame-home,
.scrolly.enhanced[data-view="project"] .frame-project,
.scrolly.enhanced[data-view="review"] .frame-review { opacity: 1; }
/* Static fallback (no JS or narrow screens): captions list below the shot */
.scrolly-captions { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.shot-caption { display: flex; gap: 12px; align-items: flex-start; }
.shot-caption div { color: var(--dusk-d1); }
.scrolly-track { display: none; }
/* Enhanced (JS + wide screens): pin the stage, sentinels pace the story */
.scrolly.enhanced .scrolly-stage { position: sticky; top: 76px; }
.scrolly.enhanced .scrolly-track { display: block; }
.scrolly-sent { height: 60vh; }
.scrolly-sent:first-child { height: 10vh; }
.scrolly-sent.breather { height: 45vh; } /* breather: clean look at each newly opened view */
/* Last step holds just long enough to read, then releases the pin so the
   page moves on — no long dead scroll parked on the final caption. */
.scrolly-sent:last-child { height: 50vh; }
.scrolly.enhanced .scrolly-captions { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; }
.scrolly.enhanced .shot-caption {
  position: absolute; width: min(320px, 44%);
  background: var(--cloud-l1); border: 1px solid var(--cloud-d2);
  border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 14px 34px rgba(23, 44, 41, 0.22);
  font-size: 15px; line-height: 1.45;
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
}
.scrolly.enhanced .shot-caption.active { opacity: 1; transform: none; }
@media (min-width: 1128px) {
  .scrolly { margin-left: -44px; margin-right: -44px; }
  .scrolly-fig { margin-left: 44px; }
}

/* Deep link from home lands clear of the fixed nav */
#product-preview { scroll-margin-top: 84px; }

@media (max-width: 900px) {
  .hero-shot { margin-top: -300px; }
  .hero.has-shot .hero-inner { padding-bottom: 370px; }
  .hero-shot-stack { padding: 160px 72px 0 0; }
}
@media (max-width: 720px) {
  .scrolly { margin-left: 0; margin-right: 0; }
  .scrolly-fig { margin-left: 0; }
  .shot-spotlight, .shot-spot2, .shot-cursor { display: none; }
}
@media (max-width: 640px) {
  .hero-shot { margin-top: -64px; }
  .hero.has-shot .hero-inner { padding-bottom: 136px; }
  .hero-shot-stack { padding: 0; }
  .hero-shot-stack .shot-frame.back { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shot-spotlight, .shot-spot2, .shot-caption, .shot-cursor { transition: none; }
  .shot-cursor { display: none; }
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--cloud-d2); border-radius: 18px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--cloud-l1); }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--cloud-d2); }
thead th { background: var(--canopy); color: var(--cloud); font-weight: 600; font-size: 14px; }
tbody tr:last-child td { border-bottom: none; }
td.hl, th.hl { background: rgba(195, 245, 165, 0.25); font-weight: 600; }
thead th.hl { background: var(--lime); color: var(--canopy); }
tr.total td { font-weight: 600; background: var(--cloud-d1); }
/* Two-column terms table: fixed label column on desktop; on phones the label
   shrinks so the long values (e.g. the SAFE definition) stop wrapping into a
   thin ribbon. */
.table-wrap.terms td:first-child { width: 230px; }
@media (max-width: 720px) {
  .table-wrap.terms td:first-child { width: 34%; }
}
.check { color: var(--grove); font-weight: 700; }
.dash { color: var(--cloud-d2); font-weight: 700; }
/* Capability matrix: tools as rows, capabilities as columns, status dots */
/* Tuned so every cell wraps to at most two lines: smaller type, tighter
   padding, and a narrow label column give the sentence columns more room. */
.table-wrap.matrix table { font-size: 14px; line-height: 1.35; }
.table-wrap.matrix th, .table-wrap.matrix td { padding: 12px 13px; }
.table-wrap.matrix thead th:first-child,
.table-wrap.matrix td:first-child { width: 104px; }
.table-wrap.matrix thead th:last-child,
.table-wrap.matrix td:last-child { width: 218px; }
.table-wrap.matrix td { vertical-align: top; }
.table-wrap.matrix td:first-child { font-weight: 600; white-space: nowrap; }
.table-wrap.matrix .dot {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  margin: 1px 0 7px;
}
.table-wrap.matrix .dot.g { background: var(--palm); }
.table-wrap.matrix .dot.y { background: var(--clem); }
.table-wrap.matrix .dot.r { background: #D06A56; }
/* Wide data tables on small screens: keep tabular shape, swipe to see more,
   first column pinned for context */
@media (max-width: 720px) {
  .table-wrap.wide table { min-width: 640px; font-size: 14px; }
  .table-wrap.wide th, .table-wrap.wide td { white-space: nowrap; }
  .table-wrap.wide th:first-child, .table-wrap.wide td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--cloud-l1);
    box-shadow: 1px 0 0 var(--cloud-d2);
    /* Let the label column wrap into a narrow fixed width instead of stretching
       to fit "Obtainable market projection" on one line — that reclaims room
       for the data columns and makes the horizontal scroll obvious. */
    white-space: normal; width: 130px; min-width: 130px;
  }
  .table-wrap.wide thead th:first-child { background: var(--canopy); vertical-align: bottom; }
  .table-wrap.wide tr.total td:first-child { background: var(--cloud-d1); }
  /* Matrix cells hold sentences — let them wrap inside a wider min-width */
  .table-wrap.wide.matrix table { min-width: 900px; }
  .table-wrap.wide.matrix th, .table-wrap.wide.matrix td { white-space: normal; min-width: 180px; }
  .table-wrap.wide.matrix td:first-child { white-space: nowrap; min-width: 0; }
  .table-wrap.wide.matrix td:first-child.hl { background: #EAF6DE; }
}

/* ---------- Callouts ---------- */
.callout {
  border-radius: var(--radius-card); padding: 26px 30px; margin: 30px 0;
  background: var(--cloud-d1);
}
.callout.risk { background: var(--cloud-d1); border: 1px solid var(--cloud-d2); font-size: 14.5px; color: var(--dusk-d1); }
/* Result callout — sized up so the takeaway reads as a headline moment */
.callout.solid { padding: 34px 40px; font-size: clamp(19px, 1.8vw, 22px); line-height: 1.5; }
.callout.solid strong { color: var(--grove); }
.callout.round {
  background: var(--grove-d1); color: var(--cloud);
}
.callout.round h4 { color: var(--cloud); margin-bottom: 10px; }
.callout.round p { color: var(--cloud-d1); }
.callout.round .figure { color: var(--clem); font-weight: 600; }
.callout.round a { color: var(--lime); }

/* ---------- Pitch deck modal ---------- */
.deck-modal {
  margin: auto; /* recenter — global reset zeroes dialog's UA margin */
  border: none; padding: 0; background: var(--canopy);
  border-radius: 18px; width: min(1100px, calc(100vw - 32px));
  max-width: none; max-height: calc(100vh - 32px); overflow: hidden;
  box-shadow: 0 24px 80px rgba(23, 36, 34, 0.5);
}
body:has(dialog[open]) { overflow: hidden; }
.deck-modal::backdrop {
  background: rgba(23, 36, 34, 0.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.deck-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 12px 14px 20px; color: var(--cloud);
}
.deck-title { font-family: var(--font-body); font-weight: 600; font-size: 17px; }
.deck-close {
  background: none; border: none; cursor: pointer; color: var(--cloud-d1);
  padding: 8px; border-radius: var(--radius-el); display: inline-flex; line-height: 0;
}
.deck-close:hover { background: rgba(250, 251, 239, 0.1); color: var(--cloud); }
.deck-frame { position: relative; aspect-ratio: 16 / 9; background: var(--canopy-d2); }
.deck-frame img { width: 100%; height: 100%; display: block; }
.deck-count {
  margin-left: auto; font-size: 13.5px; color: var(--cloud-d1);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.deck-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(23, 36, 34, 0.55); color: var(--cloud);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.deck-nav:hover { background: rgba(23, 36, 34, 0.85); }
.deck-nav.prev { left: 14px; }
.deck-nav.next { right: 14px; }
.deck-foot {
  padding: 10px 20px 14px; font-size: 13px; color: var(--dusk-l1);
}
.deck-foot a { color: var(--lime); }
.doc-modal { width: min(900px, calc(100vw - 32px)); }
.doc-frame { height: min(84vh, 960px); background: var(--canopy-d2); }
.doc-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- FAQ ---------- */
details {
  border: 1px solid var(--cloud-d2); border-radius: var(--radius-el);
  padding: 16px 20px; margin-bottom: 10px; background: var(--cloud-l1);
}
details[open] { background: var(--cloud-l2); }
summary { font-weight: 600; cursor: pointer; font-size: 16px; color: var(--canopy); }
summary::marker { color: var(--grove); }
details p, details li { color: var(--dusk-d1); margin-top: 10px; }
details ul { margin-left: 20px; margin-top: 8px; }

/* ---------- Team ---------- */
.person { display: flex; gap: 16px; align-items: flex-start; }
.person .avatar {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--cloud);
}
.person .avatar img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
}
.person h5 { margin-bottom: 2px; }
.person .role { font-size: 13px; font-weight: 600; color: var(--grove); margin-bottom: 6px; }
.band .person .role { color: var(--lime); } /* accent flips to Lime on dark surfaces per guide */
.person p { font-size: 14.5px; color: var(--dusk-d1); }
.person a { font-size: 14px; }
.av-grove { background: var(--grove); } .av-palm { background: var(--palm); }
.av-dusk { background: var(--dusk); } .av-clem { background: var(--clem-d2); }
.av-canopy { background: var(--canopy-l1); }

/* Compact founder cards (Round: who you're backing): soft solid cards in the
   quote-card treatment, headshot stacked above the copy so four fit across.
   The home page carries the full bios; these stay small and quiet so the
   page's emphasis lands on the closing CTA below. */
.backer { background: var(--cloud-d1); border-radius: 22px; padding: 22px 24px; }
.backer .avatar {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden; margin-bottom: 14px;
}
.backer .avatar img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
}
.backer h5 { margin-bottom: 2px; }
.backer .role { font-size: 13px; font-weight: 600; color: var(--grove); margin-bottom: 8px; }
.backer p { font-size: 14.5px; line-height: 1.5; color: var(--dusk-d1); max-width: none; }
/* Phones: the 2-up grid leaves names wrapping unevenly (1 vs 2 lines), so
   go single column with the headshot beside the copy, matching the home
   team section's row layout. Every name holds one line and the bios wrap
   to the same depth, so the cards read as an even list. */
@media (max-width: 640px) {
  .backers { grid-template-columns: 1fr; }
  .backer { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; }
  .backer .avatar { flex: 0 0 48px; width: 48px; height: 48px; margin-bottom: 0; }
}

/* ---------- Lists ---------- */
ul.tick { list-style: none; margin: 18px 0; }
ul.tick li { position: relative; padding-left: 30px; margin-bottom: 12px; max-width: 66ch; font-size: 21px; line-height: 1.4; }
ul.tick li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 14px; height: 8px;
  border-left: 2.5px solid var(--palm); border-bottom: 2.5px solid var(--palm);
  transform: rotate(-45deg);
}
/* Tick lists inside value cards: tighter, and lime ticks on the dark band */
.value-block ul.tick { margin: 18px 0 0; }
.value-block ul.tick li { margin-bottom: 10px; }
.value-block ul.tick li:last-child { margin-bottom: 0; }
.band ul.tick li { color: var(--cloud-d1); }
.band ul.tick li::before { border-color: var(--lime); }
ol.steps { counter-reset: step; list-style: none; margin: 20px 0; }
ol.steps li { counter-increment: step; position: relative; padding: 0 0 18px 52px; max-width: 64ch; }
ol.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -3px;
  width: 34px; height: 34px; border-radius: 50%; background: var(--lime); color: var(--canopy);
  font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center;
}
/* Card variant — steps as a 3+2 brick grid with the number badge on top */
ol.steps.cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
ol.steps.cards li {
  grid-column: span 2; max-width: none; padding: 24px 26px;
  border: 1px solid var(--cloud-d2); border-radius: 18px; background: var(--cloud-l1);
}
ol.steps.cards li:nth-child(4), ol.steps.cards li:nth-child(5) { grid-column: span 3; }
ol.steps.cards li::before { position: static; margin-bottom: 14px; }
ol.steps.cards li > strong:first-of-type { display: block; margin-bottom: 6px; font-size: 17px; }
@media (max-width: 900px) {
  ol.steps.cards li, ol.steps.cards li:nth-child(4), ol.steps.cards li:nth-child(5) { grid-column: 1 / -1; }
}
/* Stacked variant — each step as a compact full-width card */
ol.steps.stacked { display: flex; flex-direction: column; gap: 12px; max-width: 880px; }
ol.steps.stacked li {
  max-width: none; padding: 18px 22px 18px 68px;
  border: 1px solid var(--cloud-d2); border-radius: 18px; background: var(--cloud-l1);
}
ol.steps.stacked li::before { left: 18px; top: 50%; transform: translateY(-50%); }

/* Milestone sequence on a dark band (Round: what this round funds).
   Outlined on-dark cards read left to right as a timeline: the same lime
   number badges as ol.steps carry the order, and dates run as lime labels
   above each heading, echoing the GTM stage timeline's .when treatment. */
ol.miles {
  counter-reset: mile; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
ol.miles li {
  counter-increment: mile;
  border: 1px solid rgba(253, 253, 247, 0.45); border-radius: var(--radius-card);
  padding: 26px 28px;
}
ol.miles li::before {
  content: counter(mile);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 16px;
  background: var(--lime); color: var(--canopy); font-weight: 600; font-size: 15px;
}
ol.miles .when {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 8px;
}
ol.miles h5 { color: var(--cloud); margin-bottom: 6px; }
ol.miles p { font-size: 15px; line-height: 1.5; }
@media (max-width: 900px) { ol.miles { grid-template-columns: 1fr; } }

/* Allocation stats under the milestones: quieter than full stat cards.
   Tighter padding and a smaller figure keep the row visually subordinate
   to the timeline above it; width stays the same, height shrinks. */
.allocs > .card { padding: 16px 22px 18px; border-radius: 18px; }
.allocs .num { font-size: clamp(22px, 2.2vw, 27px); }
.allocs .label { margin-top: 3px; font-size: 14px; }

/* ---------- Prev / next pager ---------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: var(--maxw); margin: 0 auto; padding: 0 24px 36px; }
.pager a {
  display: block; text-decoration: none; border: 1px solid var(--cloud-d2);
  border-radius: 18px; padding: 18px 22px; background: var(--cloud-l1);
  transition: background 0.15s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.pager a:hover {
  background: var(--cloud-d1);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(23, 44, 41, 0.10);
}
.pager .dir { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grove); }
.pager .title { font-family: var(--font-display); font-size: 20px; color: var(--canopy); margin-top: 4px; }
.pager a.next { text-align: right; }
.pager a.next .dir::after { content: '\2192'; display: inline-block; margin-left: 6px; }
/* The one link that loops back to the start gets a restart icon instead of
   the forward arrow every other "Next" pager link uses. */
.pager a.next.restart .dir::after { content: '\21BB'; }
.pager a.only { grid-column: 2; }
@media (max-width: 640px) { .pager { grid-template-columns: 1fr; } .pager a.only { grid-column: 1; } }

/* ---------- Footer ---------- */
footer { background: var(--canopy-d2); color: var(--cloud-d1); margin-top: 40px; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 34px 24px 40px; }
.footer-grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.footer-bar { display: flex; justify-content: space-between; align-items: center; gap: 24px 32px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-links a { color: var(--lime-d2); font-size: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; }
.footer-links a:hover { color: var(--cloud); }
.footer-links .icon-link { padding: 2px; }
.footer-links .icon-link svg { display: block; }
footer .fineprint { font-size: 12.5px; line-height: 1.55; color: var(--dusk-l1); max-width: 72ch; margin-top: 16px; }
footer .copyright { font-size: 13px; line-height: 1.55; color: var(--dusk-l1); }
footer a { color: var(--lime); }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }
.center { text-align: center; }
.center p, .center h2 { margin-left: auto; margin-right: auto; }
.maxw-20 { max-width: 20ch; }
.small { font-size: 14px; color: var(--dusk-l1); }
.spacer-8 { height: 8px; } .spacer-16 { height: 16px; } .spacer-24 { height: 24px; }

/* ---------- Scroll reveal (site.js) ----------
   site.js tags targets with .reveal after load, so no-JS visitors see
   everything; .in fades each element up once as it enters the viewport.
   Fully disabled for reduced-motion users (site.js also skips tagging). */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
  .reveal.in { opacity: 1; transform: none; }
}

/* ---------- Private-access gate ----------
   While locked, the page is nav + hero copy + password form, with the hero
   image filling the whole viewport and a glass footer floating over its lower
   edge (mirroring the fixed glass nav up top). Nothing to scroll on a normal
   screen. The protected content isn't hidden here, it's absent: middleware
   serves these _locked/ variants pre-auth. */
html.gate-locked body {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  /* iOS Safari tints the status-bar / toolbar safe areas from the BODY's
     background colour (it ignores theme-color for regular tabs), so the cream
     body was bleeding white bars above and below the dark lock screen. The
     hero covers the body here, so painting it Canopy is invisible on-page but
     turns those browser bars on-brand. (Post-auth keeps the cream body — a
     light page correctly gets light bars.) */
  background-color: var(--canopy);
}
html.gate-locked body > *:not(.nav):not(.hero):not(footer) { display: none !important; }
/* Hero image runs the full viewport height so it reads behind the footer.
   !important beats the taller-specificity `.hero:has(.hero-inner.tight)` rule. */
html.gate-locked .hero { min-height: 100vh !important; min-height: 100svh !important; }
/* Footer floats over the image as frosted glass, matching the nav. */
html.gate-locked footer {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin-top: 0; background: rgba(33, 54, 52, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
/* Lock-screen footer is a single bar — tighten the roomy full-site padding. */
html.gate-locked .footer-inner { padding: 12px 24px 14px; }
/* The home hero reserves bottom padding for the overlapping product shots,
   which don't exist pre-auth — restore the plain hero padding (copy is
   top-anchored, so this doesn't move it). */
html.gate-locked .hero.has-shot .hero-inner { padding-bottom: 88px; }
/* Keep the copy in the exact spot it occupies once unlocked, so it doesn't
   drift when the image is expanded: the home hero stays a top-anchored block,
   and sub-page heroes pin their copy to the top of the viewport but re-centre
   it within the same 560px band they use when unlocked. */
html.gate-locked .hero:has(.hero-inner.tight) { justify-content: flex-start !important; }
html.gate-locked .hero-inner.tight {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 560px;
}
@media (max-width: 720px) {
  /* Mobile sub-page heroes are content-sized (min-height:0) when unlocked, so
     the copy sits at the top — mirror that instead of centring in 560px. */
  html.gate-locked .hero-inner.tight { display: block; min-height: 0; }

  /* Lock-screen mobile footer polish — the pre-auth pages are a single,
     non-scrolling viewport, so the footer is tuned tighter than the full site.
     Keep it to one compact band: the brand stacks (copyright tucked tight
     under the wordmark) on the left, with the links pulled up alongside on the
     right instead of wrapping underneath. The oversized wordmark shrinks and
     the links step down a notch so the whole bar reads as one tidy block. */
  html.gate-locked .footer-bar { flex-wrap: nowrap; align-items: flex-start; gap: 12px; }
  html.gate-locked .footer-brand { flex-direction: column; align-items: flex-start; gap: 5px; flex-shrink: 0; }
  html.gate-locked footer .wordmark img { height: 40px; }
  /* The wordmark SVG's transparent left padding scales with its height, so the
     52px -17px offset overshoots at 40px — retune it to -13px so the orange
     icon lands on the content edge, flush-left with the copyright below it. */
  html.gate-locked footer .wordmark { margin-left: -13px; }
  html.gate-locked footer .copyright { font-size: 12px; white-space: nowrap; }
  /* Sit the link row on the wordmark's line, copyright alone beneath. The
     link row centres itself within the wordmark's 28px layout box (the 40px
     img less its global -6px top/bottom pull) so it lands on the logo's
     optical centre rather than 6px below it. */
  html.gate-locked .footer-links { justify-content: flex-end; gap: 8px 14px; min-height: 28px; }
  html.gate-locked .footer-links a { font-size: 12.5px; }
  html.gate-locked .footer-links .icon-link svg { width: 18px; height: 18px; }
}
html.gate-locked .hero img,
html.gate-locked .hero-ctas,
html.gate-locked .hero-subcta { display: none !important; }

/* The form hangs from a zero-height slot inserted directly after the lede, so
   it sits a constant 28px below the copy on every page while contributing no
   height of its own — the headline/lede stay exactly where they render once
   unlocked, and the form tracks their position through font loads, text
   wrapping, and resizes without any JS measurement. */
.gate-slot { position: relative; height: 0; }
.gate-form {
  position: absolute; top: 28px; left: 0;
  width: 100%; max-width: 440px;
}
.gate-label {
  display: block; margin-bottom: 14px;
  font-size: 15px; line-height: 1.5; color: var(--cloud-d1);
}
.gate-row { display: flex; gap: 12px; flex-wrap: wrap; }
.gate-input {
  flex: 1 1 200px; min-width: 0;
  font-family: var(--font-body); font-size: 16px; color: var(--canopy);
  background: var(--cloud); border: 1px solid var(--cloud-d2);
  border-radius: var(--radius-cta); padding: 13px 16px; outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gate-input::placeholder { color: var(--dusk-l1); }
.gate-input:focus {
  border-color: var(--lime); box-shadow: 0 0 0 3px rgba(195, 245, 165, 0.28);
}
.gate-submit { border: none; cursor: pointer; font-family: var(--font-body); }
.gate-error { margin-top: 12px; font-size: 14px; color: var(--clem); }
.gate-help { margin-top: 14px; font-size: 14px; color: rgba(250, 251, 239, 0.58); }
.gate-help a {
  color: inherit; text-decoration: underline;
  text-decoration-color: rgba(250, 251, 239, 0.35); text-underline-offset: 3px;
}
.gate-help a:hover { color: var(--cloud-d1); }