/* Oak Mountain Ventures — shared design tokens + chrome (nav, footer, panel).

   Design history, in order, because each pass corrected the one before it
   rather than replacing it wholesale:

   1. Original: full-page green wash + real backdrop-blur "glass" cards.
      Chris: too monotone, the green was too strong, didn't read as Apple.
      Root cause — background, text and accent were all one hue at
      different lightness. Moved to a true white/black base with one
      confident accent, plus .field-glow: soft blurred color placed behind
      the card sections specifically, so blur had something real to
      diffuse instead of a flat page (a translucent card over nothing
      colored is just a translucent white box).
   2. .field-glow paired the accent with a second hue (warm gold). Where
      the two blurred shapes overlapped, they desaturated into a muddy
      brown — a blend artifact, not a chosen color. Fixed to single-hue:
      same accent, varying only size/position/opacity.
   3. Even single-hue, the glow itself was still the problem: "distracting
      ... too much going on ... can't figure out what to focus on." The
      lesson wasn't about hue count, it was that a decorative color layer
      competes with content for attention on a page that's supposed to be
      readable. .field-glow removed entirely. And once there's no color
      behind them, "glass" cards have nothing to blur — backdrop-filter on
      a flat white page just softens nothing, so pretending they're
      translucent was never honest here. Renamed .glass to .panel: a
      plain, confident surface (fill + border + shadow), which is what
      most of Apple's own text-and-spec pages actually use once you look —
      Liquid Glass is for chrome that sits over live content, not for
      cards on a plain page with nothing behind them.
   4. Chris asked for a real audit against Apple's own HIG lenses (not just
      "does it look premium"). Found real, measurable failures, not taste:
      --ink-faint's 2.95:1 contrast against white fails the 4.5:1 minimum
      for small text; nav and footer links were 16–18px tall against a
      44pt tap-target minimum; .contours (the last decorative background
      layer) still sat behind body copy; .panel stacked three separate
      depth signals (fill + border + shadow) where Apple typically uses
      one. Fixed here: --ink-faint darkened to a value that clears 4.5:1
      on every background it's used against; .contours removed entirely;
      .panel reduced to a single signal (fill only); nav/footer links
      given real hit-area padding without changing their visible size.
   5. 2026-09-17: SurveyRock's external site shipped "Strata v2" — a
      spectrum palette, gradients, night bands and scroll motion, replacing
      SurveyRock's own prior one-accent restraint. Chris asked for the same
      system here. This is a deliberate reversal of the *palette* direction
      pass 1–3 fought hard to reach (single hue, no glow, no gradient) —
      done on his explicit instruction, not a rediscovery of the same
      mistake. What did NOT change: the accent is still forest green, not
      SurveyRock's Bedrock Blue — "grounded in the Oak Mountain name, not
      generic SaaS blue" (see README) survives the v2 adoption; only the
      *system* (spectrum tones, gradients, a night band, reveal-on-scroll)
      came over, applied around that existing accent. The pass-4 audit
      fixes (contrast, tap targets, one depth signal per surface) are
      unrelated to color and stay as-is — v2's own components (night-band
      glass cards) still respect them: text against the dark tokens below
      clears 4.5:1, tap targets are unchanged, and the new components use
      at most two stacked signals, not three. The "nothing running" empty
      state and the privacy/legal page are deliberately NOT touched by this
      pass — the empty state's restraint is about not overselling a real
      absence of content, unrelated to which design system is in force, and
      Strata v2 itself carves legal/trust pages out of its own spectrum and
      motion rules. If touching either again, that's a separate call from
      "apply v2." */

:root{
  --bg: #FFFFFF;
  --bg-raised: #F7F7F8;
  --stone: #EFEFF1;
  --stone-line: #E3E3E7;
  --ink: #0B0C0E;
  --ink-soft: #56585F;
  --ink-faint: #6A6C73;
  --moss: #0E6B3D;
  --moss-strong: #0A4E2C;
  --sage-tint: #E3EFE6;
  --shadow-color: rgba(10,12,14,0.10);
  --focus: #0E6B3D;

  /* -- spectrum (Strata v2 adoption, 2026-09-17) --
     One supporting hue per accent moment (steps, tags, glows). The accent
     stays forest green — these are the supporting cast, same relationship
     Bedrock Blue has to SurveyRock's own spectrum. Values reused directly
     from SurveyRock's tokens (they're generic spectrum hues, not brand-
     specific), paired with soft tints for tone-* grounds. */
  --teal: #0D9488;
  --teal-soft: #E1F5F1;
  --sky: #0284C7;
  --sky-soft: #E2F2FB;
  --violet: #7C3AED;
  --violet-soft: #EFE9FE;
  --rose: #DB2777;
  --rose-soft: #FDE8F1;

  --gradient-brand: linear-gradient(100deg, var(--teal) 0%, var(--moss) 52%, var(--violet) 100%);
  --gradient-spectrum: linear-gradient(90deg, var(--teal), var(--sky), var(--moss), var(--violet), var(--rose));

  /* -- night: the footer + "how it works" band, dark regardless of the
     (otherwise always-light) page theme — rhythm, not a color mode. */
  --night-bg: #0A120E;
  --night-raised: #131D17;
  --night-border: #223027;
  --night-text: #F3F6F1;
  --night-muted: #9FB0A4;
}

*{ box-sizing: border-box; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Onest", -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-inline: 24px;
  /* .bleed sections (the night band) rely on a negative inline margin to
     reach the viewport edge; clip (not the default visible) keeps that
     from ever producing a horizontal scrollbar on Windows, where the
     scrollbar itself is part of 100vw. */
  overflow-x: clip;
}
.mono{
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.04em;
}
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.wrap{ max-width: 920px; margin: 0 auto; }

/* ---------- full-bleed ground ----------
   Escapes body's side padding and any ancestor's max-width so a section's
   background can reach the viewport edge while its content stays on the
   usual 920px column — the margin/padding pair cancel out exactly,
   regardless of body's own padding-inline, because percentage margins
   resolve against the containing block's width, not the viewport's. */
.bleed{
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}

/* ---------- night band ----------
   Dark in the otherwise-always-light page — rhythm, not a theme toggle.
   Used for the footer and the "how it works" section. */
.night-band{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--night-bg);
  color: var(--night-muted);
}
.night-band::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(34rem 20rem at 12% 0%, color-mix(in srgb, var(--teal) 22%, transparent), transparent 70%),
    radial-gradient(36rem 22rem at 90% 100%, color-mix(in srgb, var(--violet) 22%, transparent), transparent 70%),
    radial-gradient(26rem 16rem at 55% 40%, color-mix(in srgb, var(--moss) 16%, transparent), transparent 70%);
}
.night-band::after{
  /* faint horizontal strata lines — the sediment-layers concept, in dark */
  content:"";
  position:absolute; inset:0; z-index:-1;
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 40px);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}
.night-band h2,
.night-band h3{ color: var(--night-text); }

/* ---------- strata line ----------
   A single thin gradient ribbon — the sediment-layers metaphor drawn as
   one line, not a wall of color. */
.strata-line{ display:block; width:100%; }
.strata-line path{ opacity: 0.85; }
.strata-line .g1{ stop-color: var(--teal); }
.strata-line .g2{ stop-color: var(--moss); }
.strata-line .g3{ stop-color: var(--violet); }

/* ---------- gradient text ----------
   One key phrase per headline, display sizes only — never body text. */
.grad-text{ color: var(--moss); }
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .grad-text{
    background: var(--gradient-brand);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* ---------- tone (one hue per block, e.g. a step card) ---------- */
.tone-teal{ --tone: var(--teal); --tone-soft: var(--teal-soft); }
.tone-sky{ --tone: var(--sky); --tone-soft: var(--sky-soft); }
.tone-violet{ --tone: var(--violet); --tone-soft: var(--violet-soft); }

/* ---------- reveal-on-scroll ----------
   Enhancement only: [data-reveal] content is never hidden unless the
   bootstrap script below confirmed an IntersectionObserver exists AND the
   visitor allows motion — otherwise it just renders in place. */
html.reveal-on [data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
html.reveal-on [data-reveal].is-visible{
  opacity: 1;
  transform: none;
}

/* ---------- nav ---------- */
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 22px;
  max-width: 920px; margin: 0 auto;
}
.wordmark{
  display:flex; align-items:center; gap:10px;
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  text-decoration:none; color: var(--ink);
  padding-block: 13px; margin-block: -13px;
}
.wordmark svg{ width:22px; height:22px; }
.nav-links{ display:flex; gap:28px; align-items:center; }
.nav-links a{
  font-size: 14px; font-weight: 500; text-decoration:none; color: var(--ink-soft);
  transition: color .15s ease;
  /* Visible text stays 14px; padding + matching negative margin expands
     the actual clickable/tappable box toward the 44pt target without
     changing layout spacing or how the link looks. */
  display: inline-flex; align-items: center;
  padding-block: 13px; margin-block: -13px;
}
.nav-links a:hover{ color: var(--ink); }

/* ---------- panel: one signal only (a fill), not fill+border+shadow ---------- */
.panel{
  background: var(--stone);
  border-radius: 20px;
}

.kicker{
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 10px;
}

/* ---------- pill badge (eyebrow) ---------- */
.pill-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 12px; font-weight: 500; text-transform: uppercase;
  color: var(--moss-strong); background: var(--sage-tint);
  border: 1px solid color-mix(in srgb, var(--moss) 18%, transparent);
  padding: 6px 12px; border-radius: 100px;
}
.pill-badge .dot{ width:6px; height:6px; border-radius:50%; background: var(--moss); }
.pill-badge.night{
  color: var(--night-text);
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.14);
}
.pill-badge.night .dot{ background: #6ee7b7; }

/* ---------- footer (always a night band) ---------- */
footer{
  position: relative;
  isolation: isolate;
  background: var(--night-bg);
  color: var(--night-muted);
  /* Always a full-bleed night band, regardless of body's own side padding
     — see the .bleed utility comment above for why this math holds up
     even though footer is a direct child of a padded body. */
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}
footer::before{
  content:"";
  position:absolute; inset:0 0 auto; height:3px;
  background: var(--gradient-spectrum);
}
.footer-inner{
  max-width: 920px; margin: 0 auto; padding-block: 37px 48px;
  display:flex; justify-content:space-between; align-items:flex-end; gap: 24px; flex-wrap:wrap;
}
.footer-entity{ font-size: 13px; line-height:1.6; color: var(--night-muted); max-width: 46ch; }
.footer-entity strong{ color: var(--night-text); font-weight:600; }
.footer-links{ display:flex; gap: 22px; flex-wrap:wrap; }
.footer-links a{
  font-size: 13px; color: var(--night-muted); text-decoration:none;
  display: inline-flex; align-items: center;
  padding-block: 14px; margin-block: -14px;
}
.footer-links a:hover{ color: var(--night-text); text-decoration:underline; }
.placeholder-tag{
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--stone);
  border: 1px dashed var(--stone-line); border-radius:6px;
  padding: 1px 6px; margin-left: 6px; vertical-align: 2px;
}

@media (max-width: 720px){
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  nav{ flex-wrap:wrap; gap:14px; }
}

@media (prefers-reduced-motion: reduce){
  html.reveal-on [data-reveal]{
    opacity: 1;
    transform: none;
    transition: none;
  }
}