/* =========================================================================
   investors-page — page styles for /investors. v0.2 (2026-04-28).
   Sources tokens from webshield-navy.css. Composes shared chrome,
   compact-hero variant A, and (component-promoted) .ws-uc--row +
   .ws-uc--resource modifiers from universal-card.css v2.2.

   This file is page-specific only:
     • section scaffolding (.ws-iv-section* + eyebrow / title / intro)
     • grid containers (.ws-iv-moat-grid, .ws-iv-resource-grid)
     • Beat 4 single anchor block (.ws-iv-analysis*)
     • Beat 5 navy-ground inquiry (.ws-iv-inquiry*)
     • single primary hero CTA (.ws-iv-hero-cta)

   Component vocabulary (.ws-uc--row, .ws-uc--resource,
   .ws-uc__cta--download) was promoted into universal-card.css v2.2 —
   not duplicated here.
   ========================================================================= */

/* ── Section scaffolding ─────────────────────────────────────────── */
.ws-iv-section {
  background: var(--ws-page);
  padding: 64px 0 56px;
  border-top: 1px solid var(--ws-rule);
}
.ws-iv-section--surface { background: var(--ws-surface-2); }
.ws-iv-section--first { border-top: none; }

.ws-iv-section__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

.ws-iv-section__eyebrow {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-label);
  letter-spacing: var(--ws-tracking-label);
  text-transform: uppercase;
  color: var(--ws-accent);
  font-weight: 600;
  margin: 0 0 14px;
}

.ws-iv-section__title {
  font-family: var(--ws-font-display);
  font-size: 32px;
  font-weight: 500;
  line-height: var(--ws-lh-tight);
  letter-spacing: -0.012em;
  color: var(--ws-ink);
  margin: 0 0 18px;
  max-width: 820px;
}

.ws-iv-section__intro {
  font-family: var(--ws-font-display);
  font-size: var(--ws-fs-lede);
  line-height: var(--ws-lh-lede);
  font-weight: 400;
  color: var(--ws-ink-muted);
  margin: 0 0 36px;
  max-width: 760px;
}

/* Used for prose paragraphs that follow a card grid — adds top margin
   for breathing room while preserving the lede typography (e.g., Beat 2b
   consequence paragraph after the three Coasean-pillar cards). */
.ws-iv-section__intro--after-grid {
  margin-top: 40px;
}

/* Section footnote — small italic muted closing line citing canonical
   source. Used by Beat 2b (PVRF §5.10) and potentially others. */
.ws-iv-section__foot {
  margin: 28px 0 0;
  font-family: var(--ws-font-display);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ws-ink-muted);
  max-width: 760px;
}

/* ── Beat 2 grid · 4 across ──────────────────────────────────────── */
.ws-iv-moat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* ── Beat 3 grid · 3 across ──────────────────────────────────────── */
.ws-iv-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* =========================================================================
   BEAT 4 · DETAILED ANALYSIS · single anchor block
   New page primitive. Uses Ledger Row column geometry (rail-width +
   col-gap tokens) but is NOT a .ws-uc card — it's a one-off CTA block
   with a 3px gold left rule. Sources rail-width + col-gap from tokens
   so the block sits in the page's vertical rhythm.
   ========================================================================= */
.ws-iv-analysis {
  background: var(--ws-surface);
  border: var(--ws-rule-hair) solid var(--ws-rule);
  border-left: 3px solid var(--ws-accent);
  padding: 36px 40px 32px;
  display: grid;
  grid-template-columns: var(--ws-uc-rail-width) 1fr;
  gap: var(--ws-uc-col-gap);
  align-items: start;
}

.ws-iv-analysis__rail-ordinal {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-fs-micro);
  color: var(--ws-accent);
  font-weight: 500;
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ws-iv-analysis__rail-label {
  font-family: var(--ws-font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ws-ink);
}

.ws-iv-analysis__copy {
  font-family: var(--ws-font-display);
  font-size: var(--ws-fs-lede);
  line-height: var(--ws-lh-lede);
  color: var(--ws-ink);
  margin: 0 0 22px;
  font-weight: 400;
  max-width: 720px;
}

.ws-iv-analysis__cta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body);
  font-weight: 600;
  color: var(--ws-page);
  background: var(--ws-ink);
  padding: 12px 22px;
  text-decoration: none;
  border: 1px solid var(--ws-ink);
}
.ws-iv-analysis__cta:hover { background: #112E54; }

.ws-iv-analysis__note {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-fs-micro);
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-ink-faint);
  margin: 14px 0 0;
}

/* =========================================================================
   BEAT 5 · INVESTOR INQUIRY · page-bone centered close
   Sits on plain page bone (--ws-page) so the bottom-of-page cadence reads
   page → surface-2 (ecosystem inset, see /investors-only override below)
   → page (inquiry) → ink (footer). The footer is the single, intentional
   dark slab; its 2px gold border-top now reads as terminal chrome rather
   than a mystery rule between two dark zones. Centered single-column
   layout + serif italic hedge carry the weight without an inverted palette.
   ========================================================================= */
.ws-iv-inquiry {
  background: var(--ws-page);
  color: var(--ws-ink);
  padding: 72px 0 80px;
  border-top: 1px solid var(--ws-rule);
}
.ws-iv-inquiry__wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 48px;
  text-align: center;
}
.ws-iv-inquiry__eyebrow {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-label);
  letter-spacing: var(--ws-tracking-label);
  text-transform: uppercase;
  color: var(--ws-accent);
  font-weight: 600;
  margin: 0 0 16px;
}
.ws-iv-inquiry__title {
  font-family: var(--ws-font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: var(--ws-lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--ws-ink);
}
.ws-iv-inquiry__hedge {
  font-family: var(--ws-font-display);
  font-size: var(--ws-fs-lede);
  line-height: var(--ws-lh-lede);
  font-weight: 400;
  font-style: italic;
  color: var(--ws-ink-muted);
  margin: 0 auto 30px;
  max-width: 640px;
}
.ws-iv-inquiry__cta {
  display: inline-block;
  font-family: var(--ws-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ws-page);
  background: var(--ws-ink);
  padding: 14px 28px;
  text-decoration: none;
  border: 1px solid var(--ws-ink);
  margin-bottom: 22px;
}
.ws-iv-inquiry__cta:hover { background: #112E54; }
.ws-iv-inquiry__guidance {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body-sm);
  line-height: 1.65;
  color: var(--ws-ink-muted);
  max-width: 600px;
  margin: 0 auto;
}

/* =========================================================================
   /investors-only · Ecosystem block surface override
   The shared .ws-eco block ships on --ws-page elsewhere. On /investors we
   inset it onto --ws-surface-2 so the bottom-of-page cadence reads
   page (analysis) → surface-2 (ecosystem) → page (inquiry) → ink (footer),
   making the footer's dark slab the single intentional terminal block.
   Scoped by virtue of investors-page.css only being loaded on /investors;
   loads after webshield-home.css per the <link> order in the head.
   ========================================================================= */
.ws-eco { background: var(--ws-surface-2); }

/* ── Hero CTA button (single, primary) ──────────────────────────── */
.ws-iv-hero-cta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--ws-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ws-ink);
  background: var(--ws-accent);
  padding: 12px 22px;
  text-decoration: none;
  border: 1px solid var(--ws-accent);
  letter-spacing: 0.01em;
  margin-top: 22px;
}
.ws-iv-hero-cta:hover {
  background: var(--ws-accent-hover);
  border-color: var(--ws-accent-hover);
  color: var(--ws-page);
}
.ws-chero .ws-iv-hero-cta { color: var(--ws-ink); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .ws-iv-moat-grid { grid-template-columns: repeat(2, 1fr); }
  .ws-iv-resource-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ws-iv-section { padding: 44px 0 40px; }
  .ws-iv-section__wrap { padding: 0 24px; }
  .ws-iv-moat-grid { grid-template-columns: 1fr; gap: 14px; }
  .ws-iv-analysis {
    grid-template-columns: 1fr;
    padding: 26px 24px;
    gap: 18px;
  }
  .ws-iv-inquiry { padding: 56px 0 60px; }
  .ws-iv-inquiry__wrap { padding: 0 24px; }
  .ws-iv-inquiry__title { font-size: 24px; }
}