/* ===========================================================================
   site.css - GENERATED BUNDLE (concatenate-only, no minification).
   DO NOT EDIT BY HAND. Source of truth = the modular partials in this folder.
   Regenerate:  python build.py
   Frozen order: tokens -> base -> utilities -> layout -> components ->
                 marketing -> identity -> responsive
   =========================================================================== */

/* ===== tokens.css ===== */
/* ============================================================================
   tokens.css — www-v3 design tokens (W-01 marketing dialect)
   ----------------------------------------------------------------------------
   WP-WEB-CSS-1: values are pulled from ACTUAL current inline usage so the
   refactor is mechanical (zero visual change). Consolidation/harmonisation of
   near-duplicate values is a LATER, separate pass — not this file's job yet.
   Do NOT force the product's --tg-* (dark) tokens onto the website here.
   ============================================================================ */
:root{
  /* brand + accent (declared inline on all 26 pages today) */
  --accent:#4338CA;
  --accent-deep:#322aa6;
  --accent-tint:#edecfb;
  --accent-soft:#d6d3f6;
  --accent-lilac:#9b93ff;   /* links/labels on dark */
  --logo-ai:#8f88ff;        /* the "AI"/"Gov" accent in the wordmark */
  --grad-accent:linear-gradient(110deg,#5b8cff 0%,#8b7bf7 55%,#a78bfa 100%); /* FROZEN hero <em> */

  /* surfaces */
  --navy:#0B0F17;           /* dark sections / hero */
  --footer:#080b11;         /* footer band (distinct from header) */
  --page:#F5F3EE;           /* light page background */
  --surface:#ffffff;        /* cards */
  --surface-2:#faf9f5;      /* insets / off-white */
  --border:#e6e2d9;         /* light card border */

  /* text — light surfaces */
  --ink:#101725;            /* primary text */
  --text-2:#5b6676;         /* body */
  --text-3:#7a8494;         /* muted */
  --meta:#98a2b0;           /* labels / meta */

  /* text — dark surfaces */
  --d-text:#EAECF2;
  --d-text-2:#aab2c2;
  --d-text-3:#c3cbe0;
  --d-muted:#6f7a8d;
  --nav-text:#c3c9d4;

  /* status (maps to posture vocabulary) */
  --ok:#6fd39f;      --ok-deep:#2E7D5B;
  --warn:#e0b872;    --warn-deep:#B08430;

  /* radii (exact values in use) */
  --r-xs:5px; --r-nav:7px; --r-sm:8px; --r:10px; --r-btn:11px; --r-md:12px;
  --r-lg:14px; --r-xl:16px; --r-2xl:18px; --r-pill:999px;

  /* layout + spacing */
  --container:1240px;
  --gutter:32px;
  --header-h:68px;
  --sp-30:30px; --sp-44:44px; --sp-60:60px; --sp-76:76px;
  --sp-96:96px; --sp-100:100px; --sp-104:104px; --sp-108:108px;

  /* elevation */
  --shadow-sm:0 1px 2px rgba(16,23,37,.06);
  --shadow-lg:0 18px 48px rgba(16,23,37,.12);

  /* motion (WP-WEB-POLISH-1) — one easing + duration vocabulary for consistent interaction */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-micro:.15s;   /* hovers, focus */
  --dur-reveal:.6s;   /* scroll reveal */
  --focus:rgba(67,56,202,.55);  /* accent-derived focus ring */

  /* semantic text roles (WP-WEB-POLISH-1 remediation — muted tiers darkened to clear WCAG AA) */
  --text-primary:#101725;
  --text-secondary:#5b6676;
  --text-muted:#616b7a;        /* light surfaces; replaces #7a8494 (was ≈4.1:1) → ≈5.2:1 */
  --text-faint:#656f80;        /* light faint tier; replaces #98a2b0 (was ≈2.9:1) → ≈4.9:1 */
  --text-inverse:#ffffff;
  --text-secondary-d:#aab2c2;  /* dark surfaces */
  --text-muted-d:#808b9e;      /* dark; replaces #6f7a8d (was ≈4.3:1) → ≈5.4:1 */
  --text-faint-d:#7c8698;      /* dark fine-print; replaces #5a6474 (was ≈3.1:1) → ≈5.2:1 */

  /* type families */
  /* Exact stacks as used inline across the site (do NOT add fallbacks — would drift the computed-style diff) */
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-display:'Newsreader',serif;
  --font-mono:'IBM Plex Mono',monospace;
  --font-hero:'Inter',sans-serif; /* weight 900 only — synthetic oblique, no italic axis */

  /* ── Type scale (canonical — the reference standard) ────────────────────── */
  --fs-hero:clamp(38px,4.8vw,62px);   /* Inter 900 hero display */
  --fs-h2:clamp(28px,3.6vw,46px);     /* Newsreader section heading */
  --fs-h3:22px;                        /* Newsreader sub-heading */
  --fs-lead:18px;                      /* hero sub / lead paragraph */
  --fs-body:16px;                      /* body */
  --fs-sm:14px;                        /* small body / card body */
  --fs-xs:13px;                        /* dense card body */
  --fs-eyebrow:12px;                   /* mono eyebrow */
  --fs-label:11px;                     /* mono label */
  --lh-tight:1.05; --lh-heading:1.1; --lh-body:1.6;
  --ls-hero:-0.03em; --ls-heading:-0.015em; --ls-eyebrow:0.16em; --ls-label:0.08em;
  --fw-body:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-hero:900;
}

/* ===== base.css ===== */
/* ============================================================================
   base.css — reset (www-v3)
   WP-WEB-CSS-1: this is a MECHANICAL, EXACT reproduction of the per-page inline
   <style> reset that every marketing page already carries. Loading it is a
   no-op against current pages (identical declared values, via tokens) so it
   introduces ZERO visual change. Richer resets (focus-visible rings, global
   img rules, reduced-motion, heading margin reset, base font-size) are design
   IMPROVEMENTS and are deferred to a later, separate work package.
   ============================================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page);            /* #F5F3EE */
  font-family: var(--font-body);      /* 'IBM Plex Sans', system-ui, sans-serif */
  -webkit-font-smoothing: antialiased;
  color: var(--ink);                  /* #101725 */
}
::selection { background: var(--accent); color: #fff; }   /* #4338CA */
a { text-decoration: none; color: inherit; }

/* ── WP-WEB-POLISH-1 · P0 — global, additive only ────────────────────────────
   Keyboard focus is currently invisible. A consistent, on-brand focus ring is an
   accessibility + craftsmanship win. :focus-visible only renders on keyboard
   focus, so the static page is unchanged (no mouse-click outline). The outline
   follows each element's border-radius automatically. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Respect reduced-motion globally (kept here so it applies even where a page's
   own <style> is later removed). Does not change any static appearance. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== utilities.css ===== */
/* ============================================================================
   utilities.css — small, bounded helper layer (www-v3)
   RULE: utilities are for ADJUSTMENTS, not for building components. If you find
   yourself composing a component out of utilities, it belongs in components.css.
   Every value maps to a token; none introduces a new value. Keep this file small.
   ============================================================================ */

/* display / flow */
.flex{ display:flex; }
.grid{ display:grid; }
.inline-flex{ display:inline-flex; }
.hidden{ display:none; }

/* alignment */
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.justify-center{ justify-content:center; }
.center{ display:flex; align-items:center; justify-content:center; }
.text-center{ text-align:center; }
.text-left{ text-align:left; }

/* sizing */
.w-full{ width:100%; }
.mx-auto{ margin-inline:auto; }

/* gap (token-mapped) */
.gap-14{ gap:14px; }
.gap-24{ gap:24px; }
.gap-44{ gap:var(--sp-44); }

/* spacing (token-mapped, deliberately few) */
.mt-24{ margin-top:24px; }
.mt-44{ margin-top:var(--sp-44); }
.mb-24{ margin-bottom:24px; }
.mb-32{ margin-bottom:32px; }

/* radius / elevation (token-mapped) */
.rounded-lg{ border-radius:var(--r-lg); }
.rounded-xl{ border-radius:var(--r-xl); }
.rounded-2xl{ border-radius:var(--r-2xl); }
.shadow-lg{ box-shadow:var(--shadow-lg); }

/* responsive visibility — class-keyed (replaces inline-attribute @media, see WP §6) */
@media (max-width:768px){
  .hide-mobile{ display:none !important; }
}
@media (min-width:769px){
  .show-mobile{ display:none !important; }
}

/* ── WP-WEB-POLISH-1 remediation ──────────────────────────────────────────── */
/* reading measure — caps over-wide intro paragraphs (~62 chars/line) */
.measure{ max-width: 62ch; }

/* semantic text-colour utilities — replace under-contrast inline colours only.
   Values resolve to the darkened AA-compliant tokens in tokens.css. */
.text-muted{ color: var(--text-muted); }       /* light surfaces */
.text-faint{ color: var(--text-faint); }        /* light faint tier */
.text-muted-d{ color: var(--text-muted-d); }   /* dark surfaces */
.text-faint-d{ color: var(--text-faint-d); }   /* dark fine-print / legal */

/* a11y helper */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===== layout.css ===== */
/* ============================================================================
   layout.css — structural primitives (www-v3)
   WP-WEB-POLISH-1 remediation: consistent section vertical rhythm on one scale
   value (100px), plus a flush-bottom modifier to remove the dead space where a
   section ends in a filled band (the homepage Assessment→Solutions gap).
   Containers and grids stay INLINE (responsive-coupled — the mobile @media keys
   off their inline strings) and are intentionally not lifted here yet.
   ============================================================================ */

/* Section vertical rhythm — one value, applied via class (replaces inline
   padding of 92/94/100/104/108). Horizontal 32px matches the existing inline. */
.section{ padding: 100px 32px; }

/* Surface variants (replace inline background / border-top on plain sections). */
.section--page{ background: var(--page); }                                   /* #F5F3EE */
.section--white{ background: #fff; border-top: 1px solid #ece9e1; }
.section--dark{ background: var(--navy); color: var(--d-text); }             /* #0B0F17 / #EAECF2 */

/* Flush-bottom — for a section whose LAST child is a filled band, so its
   trailing whitespace doesn't read as dead space (homepage gap fix). */
.section--flush-bottom{ padding-bottom: 56px; }

/* ===== components.css ===== */
/* ============================================================================
   components.css — reusable, page-agnostic components (www-v3)
   WP-WEB-CSS-1: every value here is a MECHANICAL copy of an existing inline
   pattern (measured on enterprise-security.html, the first migrated page).
   Contracts: COMPONENT_CONTRACTS.md §3,§4,§8.

   NOTE ON COLOURS: page-specific literal hex is used deliberately for now.
   Tokenising these one-off colours is a fast-follow AFTER all pages are
   migrated and the full palette is known — doing it early risks guessing the
   wrong shared value. The accent family already exists as CSS vars inline, so
   those are referenced as vars (identical computed value).
   ============================================================================ */

/* ---- Nav links (dark header) ------------------------------------------- */
.nav-link{
  color:#c3c9d4;
  font-size:14px;
  padding:7px 12px;
  border-radius:7px;
  transition:color .2s, background .2s;
}
.nav-link:hover{ color:#fff; background:rgba(255,255,255,0.06); }
/* caret variant (e.g. "Solutions ▾") — keeps the inline-flex row */
.nav-link--caret{ display:inline-flex; align-items:center; gap:5px; }
/* active/current-page variant */
.nav-link--active{ color:#fff; background:rgba(255,255,255,0.08); }

/* ---- Footer ------------------------------------------------------------ */
.footer-heading{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  color:#6f7a8d;
  margin-bottom:16px;
}
.footer-link{ color:#97a0b2; }
.footer-link:hover{ color:#fff; }
.footer-legal-link{ color:#6f7a8d; }
.footer-legal-link:hover{ color:#fff; }

/* ---- Status badges (procurement vocabulary) ---------------------------- */
.badge{
  font-family:var(--font-mono);
  font-size:10px;
  border-radius:5px;
  padding:2px 8px;
}
.badge-impl{ color:#2E7D5B; border:1px solid #bfe0cd; background:#edf7f1; } /* IMPLEMENTED + AVAILABLE */
.badge-plan{ color:var(--accent); border:1px solid var(--accent-soft); background:var(--accent-tint); }
.badge-ext{  color:#B08430; border:1px solid #f0e2c4; background:#fbf3e6; }

/* ---- Button system (reference standard — reproduces existing values, radius
   consolidated to the 8/11 steps; adoption rollout pending) ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:var(--fw-medium); font-size:15px;
  padding:14px 24px; border-radius:var(--r-btn); /* 11px */
  text-decoration:none; cursor:pointer;
  transition:background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 8px 30px rgba(67,56,202,.35); }
.btn-primary:hover{ background:var(--accent-deep); transform:translateY(-2px); }
.btn-ghost{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.13); }
/* outline — transparent secondary CTA (repeated "Why TrustedAIGov" button on solution pages) */
.btn-outline{ background:transparent; border:1px solid rgba(255,255,255,.18); color:#fff; }
.btn-outline:hover{ background:rgba(255,255,255,.08); }
.btn-lg{ font-size:15.5px; padding:15px 28px; }              /* CTA-band size */
.btn-lg.btn-primary{ box-shadow:0 12px 40px rgba(67,56,202,.4); }
.btn-sm{ font-size:14px; padding:9px 16px; border-radius:var(--r-sm); }  /* nav register size */

/* ---- Card system (reference standard — dominant #fff / 14px / 28×26 card;
   adoption rollout pending) ----------------------------------------------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px 26px; }
.card-muted{ background:var(--surface-2); padding:26px 24px; }   /* muted value-card (exact value-card geometry) */
.card-lg{ border-radius:var(--r-xl); }                          /* r16 feature card — use as `card card-lg` (add-on cards) */
/* row card — icon + text (recurring "outcome" rows) */
.card-row{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px 24px; display:flex; gap:18px; align-items:flex-start; }

/* ---- Card description (repeated muted body paragraph) ------------------ */
/* WP-WEB-POLISH-1: lifts the identical `font-size:13px;line-height:1.5;color:#7a8494;margin:0`
   paragraph into one class; colour resolves to the AA-corrected muted token. */
.card-desc{ font-size:13px; line-height:1.5; color:var(--text-muted); margin:0; }

/* Repeated faint-tier patterns (WP-WEB-POLISH-1 rollout) — colour resolves to
   the AA-corrected faint token; geometry reproduces the existing inline exactly. */
.card-quote{ font-family:var(--font-display); font-size:16px; line-height:1.5; font-style:italic; color:var(--text-faint); margin:0 0 14px; }
.card-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.06em; color:var(--text-faint); margin-bottom:14px; }

/* ---- Label / info card ------------------------------------------------- */
.info-card{
  background:#fff;
  border:1px solid #e6e2d9;
  border-radius:12px;
  padding:20px 22px;
}

/* ===== marketing.css ===== */
/* ============================================================================
   marketing.css — hero-title/sub, comparison table, artifact card, trust cards, faq
   Filled during Phase 2. Contracts: COMPONENT_CONTRACTS.md §5,§9,§10.
   Empty for now — scaffolding is additive and not yet linked to any page.
   ============================================================================ */

/* ===== identity.css ===== */
/* ============================================================================
   identity.css — split-screen auth shell: .auth-grid, .auth-brand, .auth-card,
   .field, .input, .note. Filled LAST (auth pages after marketing — WP §4).
   Auth wiring (endpoints, field names, non-enumerating messages) is NEVER
   touched by CSS. Empty for now — not yet linked to any page.
   ============================================================================ */

/* ===== responsive.css ===== */
/* ============================================================================
   responsive.css — CLASS-KEYED breakpoints (375 / 768 / 900 / 1024)
   ----------------------------------------------------------------------------
   CRITICAL (WP §6): this file REPLACES the old inline-attribute selectors
   [style*="grid-template-columns"] / [style*="padding: 76px 32px 88px"] with
   rules keyed to the new classes (.hero-grid, .container, .section, .footer-grid,
   .compare-row, .nav-links). The old inline-attribute @media block stays in the
   page until its class-based replacement here is screenshot-verified at 375/768
   on EVERY page — then it is removed. Filled during Phase 2.
   Empty for now — scaffolding is additive and not yet linked to any page.
   ============================================================================ */