/* =========================================================================
   WebShield home page — page-level composition styles.
   Loaded only on /site/index.html. All tokens from webshield-navy.css.
   Component styles (ws-uc, ws-credibility-bar, ws-invariants-row) live in
   their own component CSS files. Only page-specific layout lives here.

   Source:   docs/handoff/composition/index.html (inlined <style> block)
   Extracted: 2026-04-20
   Design system: WebShield Navy v1.2 (see docs/handoff/CHANGELOG.md)
   ========================================================================= */

/* ── Beat 1 · Hero ──────────────────────────────────────────────
   Migrated to the shared compact-hero component (variant
   .ws-chero--portal). See compact-hero.css. The legacy .ws-hero,
   .ws-btn, and .ws-hero responsive rules previously here are
   superseded by the component's two-variant system. */

/* ── Beat 3 · Reframe ─────────────────────────────────────────── */
.ws-reframe { background: var(--ws-page); }
.ws-reframe__wrap {
  max-width: 820px; margin: 0 auto;
  padding: 84px 48px 88px; text-align: center;
}
.ws-reframe__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-ink-faint); font-weight: 500;
  margin-bottom: 22px;
}
.ws-reframe__text {
  font-family: var(--ws-font-display);
  font-size: 24px; font-weight: 400;
  line-height: 1.5; letter-spacing: -0.005em;
  color: var(--ws-ink);
  margin: 0;
  text-wrap: pretty;
}
.ws-reframe__text-fallback { color: var(--ws-ink-muted); }

/* ── Beat 4 · Universals stack ────────────────────────────────── */
.ws-universals {
  background: var(--ws-page);
  border-top: 1px solid var(--ws-rule);
}
.ws-universals__wrap { max-width: 1200px; margin: 0 auto; padding: 80px 48px 24px; }
.ws-universals__title {
  font-family: var(--ws-font-display);
  font-size: 36px; font-weight: 500;
  line-height: 1.15; letter-spacing: -0.015em;
  color: var(--ws-ink);
  margin: 0 0 12px;
}
.ws-universals__dek {
  font-family: var(--ws-font-display);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ws-ink-muted);
  margin: 0 0 40px;
  max-width: 720px;
}
.ws-universals__stack { position: relative; }

/* Foundation rule — 3px gold top, signals load-bearing ground floor */
.ws-universals__foundation-rule {
  border-top: 3px solid var(--ws-accent);
  margin-bottom: -1px;
}

/* Per-card overlap collapses borders into a single continuous ledger */
.ws-universals__slot {
  position: relative;
  margin-bottom: -1px;
}

/* Capability layer slot — visual break from the four-foundation row above.
   Per Primer §3, Universal AI is a capability category enabled by the
   foundations, not a fifth peer. The 28px gap + 2px gold rule mark the
   architectural-level transition; mirrors the same rule above the coda. */
.ws-universals__slot--capability {
  margin-top: 28px;
  border-top: 2px solid var(--ws-accent);
}

/* Foundation / capability rail captions — floated over the card's left
   rail without modifying the locked component's internals. */
.ws-universals__rail-caption {
  position: absolute;
  left: 32px; bottom: 16px;
  font-family: var(--ws-font-mono);
  font-size: 10px;
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  color: var(--ws-accent); font-weight: 600;
  pointer-events: none;
}

.ws-universals__coda {
  margin-top: 28px;
  border-top: 2px solid var(--ws-accent);
  font-family: var(--ws-font-display);
  font-style: italic; font-size: 15px;
  line-height: 1.5; color: var(--ws-ink-muted);
  padding-bottom: 72px;
}

/* ── Beat 6 · Evidence ────────────────────────────────────────── */
.ws-evidence {
  background: var(--ws-surface);
  border-top: 1px solid var(--ws-rule);
}
.ws-evidence__wrap { max-width: 820px; margin: 0 auto; padding: 80px 48px; }
.ws-evidence__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-ink-faint); font-weight: 500;
  margin-bottom: 24px;
}
.ws-evidence__headline {
  font-family: var(--ws-font-display);
  font-size: 20px; font-weight: 500;
  line-height: 1.5; letter-spacing: -0.005em;
  color: var(--ws-ink);
  margin: 0 0 24px;
}
.ws-evidence__headline a {
  color: var(--ws-accent); text-decoration: none;
  border-bottom: 1px solid var(--ws-accent);
}
.ws-evidence__prose {
  font-family: var(--ws-font-body);
  font-size: 15px; line-height: 1.65;
  color: var(--ws-ink-muted);
  margin: 0 0 10px;
}
.ws-evidence__link {
  font-family: var(--ws-font-body);
  font-size: 13px; font-weight: 500;
  color: var(--ws-ink); text-decoration: none;
  border-bottom: 1px solid var(--ws-ink); padding-bottom: 2px;
}
.ws-evidence__pointer {
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--ws-rule);
  font-family: var(--ws-font-display);
  font-style: italic; font-size: 16px;
  line-height: 1.55;
  color: var(--ws-ink);
}
.ws-evidence__pointer a {
  color: var(--ws-accent); text-decoration: none;
  border-bottom: 1px solid var(--ws-accent);
  font-style: normal; font-weight: 500;
}

/* ── Beat 7 · Ecosystem ───────────────────────────────────────── */
.ws-eco {
  background: var(--ws-page);
  border-top: 1px solid var(--ws-rule);
}
.ws-eco__wrap { max-width: 1200px; margin: 0 auto; padding: 72px 48px 96px; }
.ws-eco__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-ink-faint); font-weight: 500;
  margin-bottom: 14px;
}
.ws-eco__title {
  font-family: var(--ws-font-display);
  font-size: 28px; font-weight: 500;
  line-height: 1.2; letter-spacing: -0.015em;
  color: var(--ws-ink);
  margin: 0 0 32px;
}
/* Optional lede between title and grid. Currently used on /investors
   (Stage 1 of 3) to add an investor-tuned framing paragraph. Other pages
   omit the .ws-eco__intro element and render unchanged. */
.ws-eco__intro {
  font-family: var(--ws-font-display);
  font-size: var(--ws-fs-lede);
  line-height: var(--ws-lh-body);
  color: var(--ws-ink-muted);
  max-width: 720px;
  margin: 0 0 36px;
  text-wrap: pretty;
}
.ws-eco__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.ws-eco__card {
  background: var(--ws-surface);
  border: 1px solid var(--ws-rule);
  padding: 22px 22px 20px;
  font-family: var(--ws-font-body);
  height: 100%;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.ws-eco__card--here { border-left: 3px solid var(--ws-accent); }
.ws-eco__card--disabled { opacity: 0.78; }
.ws-eco__card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px; min-height: 18px;
}
.ws-eco__card-ord {
  font-family: var(--ws-font-mono);
  font-size: 10.5px;
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-ink-faint);
}
/* Optional role-tag pill in the card head. Currently used only on
   /investors (Stage 2 of 3). margin-left:auto pushes the pill to the
   right; on card 01 the You-are-here pill follows it via the gap on
   .ws-eco__card-head. Other pages omit the .ws-eco__card-roletag
   element and render unchanged. */
.ws-eco__card-roletag {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-fs-micro);
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  color: var(--ws-ink-faint);
  border: 1px solid var(--ws-rule);
  padding: 2px 5px;
  white-space: nowrap;
  margin-left: auto;
}
.ws-eco__card-here-tag {
  font-family: var(--ws-font-mono);
  font-size: 10px;
  letter-spacing: var(--ws-tracking-mono);
  text-transform: uppercase;
  color: var(--ws-accent);
  background: var(--ws-surface-2);
  padding: 3px 8px;
  border: 1px solid var(--ws-accent);
}
.ws-eco__card-name {
  font-family: var(--ws-font-display);
  font-size: 18px; font-weight: 500;
  letter-spacing: -0.005em; line-height: 1.2;
  color: var(--ws-ink);
  margin-bottom: 6px;
}
.ws-eco__card-domain {
  font-family: var(--ws-font-mono);
  font-size: 11px;
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-ink-muted);
  margin-bottom: 12px;
}
.ws-eco__card--disabled .ws-eco__card-domain {
  color: var(--ws-ink-faint); font-style: italic;
}
.ws-eco__card-desc {
  font-size: 13px; line-height: 1.55;
  color: var(--ws-ink-muted);
}

@media (max-width: 1100px) { .ws-eco__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .ws-eco__grid { grid-template-columns: 1fr; } }