/* =======================================================================
   AimwellBio · Canonical Design Tokens
   Reference page: /why-aimwellbio
   SVG language:   Variant C (Pipeline + Telemetry · Palantir Gotham)
   Locked:         2026-05-24
   ----------------------------------------------------------------------
   Aliases the original --wab-* token block under project-neutral --aw-*
   names so any page can opt in by linking this file and prefixing with
   --aw-. The --wab-* names are kept as fallbacks for /why-aimwellbio
   compatibility.
   ======================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---- Surface ---- */
  --aw-bg:           #07090c;
  --aw-bg-2:         #0b0e13;
  --aw-panel:        #0e131a;
  --aw-line:         #1c2530;
  --aw-line-bright:  #2a3644;

  /* ---- Ink ---- */
  --aw-ink:          #e8edf2;
  --aw-ink-dim:      #9aa7b4;
  --aw-ink-faint:    #5d6b78;

  /* ---- Accent (single-source) ---- */
  --aw-accent:       #4dbce8;   /* primary cyan — links, signal, eyebrows */
  --aw-accent-2:     #00e0a4;   /* consensus green — verdict, success */
  --aw-warn:         #f0c14b;   /* delay amber */
  --aw-kill:         #ff5b6e;   /* kill red */

  /* ---- Tier accents (preserved from prior system; namespace harmonised) ---- */
  --aw-tier-trial:        #E0843C;
  --aw-tier-signal:       #00B3C6;
  --aw-tier-shield:       #52D98D;
  --aw-tier-command:      #D4AF37;
  --aw-tier-growth:       #7D50FF;
  --aw-tier-enterprise:   #C7CBD1;
  --aw-tier-observer:     #00B3C6;
  --aw-tier-founding:     #FFD065;

  /* ---- Type stack ---- */
  --aw-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Neue Haas Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --aw-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: var(--aw-sans);
  --font-body: var(--aw-sans);
  --font-mono: var(--aw-mono);
  --aw-heading-font: var(--aw-sans);
  --aw-body-font: var(--aw-sans);
  --aw-nav-font: var(--aw-sans);
  --aw-cta-font: var(--aw-sans);

  /* ---- Spatial ---- */
  --aw-grid: 80px;
}

/* =======================================================================
   Investor-grade typography lock
   -----------------------------------------------------------------------
   Several generated public pages still contain older document/report font
   imports and inline serif declarations. This canonical layer is loaded
   after those imports on public pages and normalizes the visible surface
   without requiring hundreds of hand-edits to generated signal pages.
   Intentional mono/data surfaces opt back into --aw-mono below.
   ======================================================================= */
html,
body,
button,
input,
select,
textarea,
p,
a,
li,
td,
th,
label,
summary,
figcaption,
h1,
h2,
h3,
h4,
h5,
h6,
.nav,
.nav *,
.footer,
.footer *,
.hero-title,
.page-title,
.news-title,
.cover-headline,
.chapter-title,
.lede,
.pullquote,
[style*="Georgia"],
[style*="serif"],
[style*="DM Serif"],
[style*="Instrument Serif"],
[style*="Geist"] {
  font-family: var(--aw-sans) !important;
}

code,
pre,
kbd,
samp,
.aw-mono,
.aw-mono-meta,
.t-mono,
.t-data,
.t-ref,
.kpi-value,
.table-num,
.doc-ref,
.page-num,
.footnote-marker,
.version-string,
.meta-tag,
.tag,
.system-text,
.eyebrow,
.t-eyebrow,
.t-label,
.t-label-upper,
.nav .mega-col-label,
.nav .dd-label {
  font-family: var(--aw-mono) !important;
  font-variant-numeric: tabular-nums;
}

body {
  font-family: var(--aw-sans) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
.hero-title,
.page-title,
.news-title,
.cover-headline,
.chapter-title {
  font-family: var(--aw-sans) !important;
  letter-spacing: -0.02em;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.nav-cta,
.cta-btn,
[class*="cta"],
[class*="btn"] {
  font-family: var(--aw-cta-font) !important;
  letter-spacing: 0.02em;
}

/* Contrast guardrails for older dark/light section mixes. */
.section--navy,
.section--navy-deep,
.aw-surface-bg,
[class*="hero"][style*="#0"],
[class*="hero"][style*="navy"],
[class*="dark"],
.fhin-hero,
.fhin-tiers,
.pr-hero,
.pr-deploy,
.cs-wrap,
.footer {
  color: #e8edf2;
}

.section--navy p,
.section--navy-deep p,
.aw-surface-bg p,
.fhin-hero p,
.fhin-tiers p,
.pr-hero p,
.pr-deploy p,
.cs-wrap p,
.footer p,
.footer a,
[style*="background:#0"] p,
[style*="background: #0"] p {
  color: rgba(232, 237, 242, 0.78) !important;
}

.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy-deep h1,
.section--navy-deep h2,
.section--navy-deep h3,
.aw-surface-bg h1,
.aw-surface-bg h2,
.aw-surface-bg h3,
.fhin-hero h1,
.fhin-tiers h1,
.fhin-tiers h2,
.fhin-tiers h3,
.pr-hero h1,
.pr-hero h2,
.pr-hero h3,
.pr-deploy h1,
.pr-deploy h2,
.pr-deploy h3,
.cs-wrap h1,
.cs-wrap h2,
.cs-wrap h3,
.footer h1,
.footer h2,
.footer h3,
.footer h4 {
  color: #ffffff !important;
}

.card,
[class*="card"],
[class*="panel"],
[class*="cell"] {
  border-radius: 8px;
}

@media (max-width: 640px) {
  h1,
  .aw-h1,
  .hero-title,
  .page-title {
    font-size: clamp(32px, 10vw, 48px) !important;
    line-height: 1.08 !important;
  }
}

/* =======================================================================
   Headline pattern (Inter 900, tight tracking, clamp sizing)
   Use the .aw-h* utility classes OR override `h1 { font: var(--aw-h1) }`
   ======================================================================= */
.aw-h1, h1.aw-canonical {
  font-family: var(--aw-sans);
  font-size: clamp(38px, 6vw, 74px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--aw-ink);
}
.aw-h2, h2.aw-canonical {
  font-family: var(--aw-sans);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--aw-ink);
}
.aw-h3, h3.aw-canonical {
  font-family: var(--aw-sans);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--aw-ink);
}
.aw-eyebrow {
  font-family: var(--aw-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aw-accent);
}
.aw-lede {
  font-family: var(--aw-sans);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  color: var(--aw-ink-dim);
}
.aw-mono-meta {
  font-family: var(--aw-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--aw-ink-faint);
}

/* =======================================================================
   Inline bold pattern (matches /why-aimwellbio reference: weight 600, not 700)
   ======================================================================= */
strong, b {
  font-weight: 600;
  color: var(--aw-ink);
}

/* =======================================================================
   Surface utilities
   ======================================================================= */
.aw-surface-bg {
  background: var(--aw-bg);
  color: var(--aw-ink);
  background-image:
    linear-gradient(var(--aw-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--aw-line) 1px, transparent 1px);
  background-size: var(--aw-grid) var(--aw-grid);
  background-position: -1px -1px;
}
.aw-panel {
  background: var(--aw-panel);
  border: 1px solid var(--aw-line);
}

/* =======================================================================
   Variant C SVG component — animations
   The .crucible-pipeline class is applied to the partials/4agent-pipeline.html
   block. Counter increments + dashed-flow loops live here so per-page inline
   styles stay clean.
   ======================================================================= */
@keyframes aw-dashflow { to { stroke-dashoffset: -40; } }
@keyframes aw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.crucible-pipeline .flow {
  stroke-dasharray: 3 5;
  animation: aw-dashflow 4s linear infinite;
}
.crucible-pipeline .pulse {
  animation: aw-pulse 2.4s ease-in-out infinite;
}

/* Animated counter cells (CSS-driven on supporting browsers; JS fallback in partial) */
@property --aw-count {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}
.crucible-pipeline [data-counter] {
  font-family: var(--aw-mono);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .crucible-pipeline .flow,
  .crucible-pipeline .pulse { animation: none; }
}

/* =======================================================================
   Canonical nav-logo sizing (applies even when styles.css isn't linked).
   The 27 tier-dashboard / FHIN pages that load only canonical.css + their
   own tokens.css were rendering aimwell-lockup.png at native ~1200×400px
   dimensions because the page CSS only sized .logo-lockup / .logo-img
   (their page-specific classes), not the canonical .nav-logo-full.
   ======================================================================= */
.nav-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}
.nav-logo .nav-logo-full {
  display: block;
  height: 76px;
  width: auto;
  max-width: 400px;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .nav-logo .nav-logo-full { height: 48px; max-width: 220px; }
}

/* =======================================================================
   Mobile overflow defense (≤ 480px)
   Prevents horizontal scroll bleed from wide nav, hero SVGs, code blocks,
   data tables, embeds, and Leaflet containers.
   ======================================================================= */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
@media (max-width: 480px) {
  body { -webkit-text-size-adjust: 100%; }
  /* Defensive caps */
  img, svg, video, iframe, table, pre, code { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
  /* Nav: keep inner content inside the viewport even if children mis-size */
  .nav, .nav-inner { max-width: 100vw; overflow: hidden; }
  .nav-inner { flex-wrap: nowrap; padding-left: 1rem; padding-right: 1rem; gap: 0.5rem; }
  .nav-logo .nav-logo-full { max-width: 150px; height: 40px; }
  .nav-cta { display: none !important; }
  /* Hero / section containers */
  .container, [class*="container"], section, main, header, footer {
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  /* Force long unbroken strings to wrap (URLs, identifiers) */
  p, li, td, h1, h2, h3, h4, h5, h6, span, a, strong { overflow-wrap: anywhere; word-break: normal; }
  /* Section-level hero / story / proof overflow guards */
  .hero-weapon, .story-bridge, .atlas-live-section, .proof-outcomes,
  .closer-section, .sig-stats, .sig-filters, .sig-filters__inner,
  .ra-sec, .ra-sec-wrap, .meth-body, .meth-fomo, .meth-regtech {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }
  /* Horizontal scroll containers (chip rows) — keep inside viewport with internal scroll */
  .sig-filters, .sig-filters__inner { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* Leaflet maps stay within their parent */
  .leaflet-container { max-width: 100% !important; }
  /* Revenue-architecture grids: stack at mobile */
  .ra-verticals, .ra-sec-wrap { grid-template-columns: 1fr !important; }
}

/* =======================================================================
   .page-header collision fix (Shannon-flagged white-strip on /fhin-observer
   and /member-enterprise). styles.css line 2041 sets .page-header to
   --off-white (#F8F9FB) for marketing sub-page headers. Dashboard pages
   ALSO use class="page-header" inside <div class="app-body"> for their
   own dark header strip. Scope the override here so the dashboard wins
   without touching the marketing rule.
   ======================================================================= */
.app-body .page-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 1.5rem 0 1rem !important;
  overflow: visible !important;
  color: var(--aw-ink, #e8edf2) !important;
}
.app-body .page-header h1 { color: var(--aw-ink, #e8edf2) !important; }