/* ==========================================================================
   AI-Powered Compliance Platform — Marketing Site
   Design System v1.0
   No framework. No jQuery. No vendor bundle.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Navy ramp — brand anchor is 800 */
  --navy-50:  #eff5fc;
  --navy-100: #dbe8f7;
  --navy-200: #b8d0ee;
  --navy-300: #8db2e2;
  --navy-400: #5a8fd4;
  --navy-500: #2f72c0;
  --navy-600: #1f66b5;
  --navy-700: #164f8f;
  --navy-800: #032a58;
  --navy-900: #021c3b;

  /* Neutral ramp — cool, navy-tinted */
  --n-0:   #ffffff;
  --n-25:  #fbfcfd;
  --n-50:  #f6f8fa;
  --n-100: #eef1f5;
  --n-200: #e2e7ee;
  --n-300: #cbd3de;
  --n-400: #9aa6b6;
  --n-500: #6b7887;
  --n-600: #4d5a6a;
  --n-700: #333f4d;
  --n-800: #1d2733;
  --n-900: #0f151c;

  /* Provenance — UI chrome only, never inside a chart plot */
  --prov-ai:       #5b4bc4;
  --prov-rule:     #1f66b5;
  --prov-human:    #17a67c;
  --prov-evidence: #4d5a6a;
  --prov-ai-dk:    #8d80e8;
  --prov-human-dk: #14a37a;

  /* Status — always paired with icon + label */
  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;

  /* Type — same families the main site uses (imported by style.css) */
  --font-sans: 'Montserrat', sans-serif;      /* headings + UI */
  --font-body: 'Open Sans', sans-serif;       /* body copy */
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Site ink */
  --ink-heading: #18191d;                     /* style.css h2 */
  --ink-body:    #4f4f4f;                     /* style.css p  */

  /* Space — 4px base */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-8: 48px;  --sp-12: 64px;
  --sp-16: 96px; --sp-20: 128px;

  /* Radius */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px;

  /* Layout */
  --container: 1280px;
  --gutter: 24px;
  --nav-h: 92px;              /* measured height of the site's fixed-top navbar:
                                 1.6rem padding x2 + 40px social icons */

  /* Motion */
  --t-fast: 150ms ease-out;
  --t-base: 200ms ease-out;
  --t-slow: 250ms ease-out;

  --border: 1px solid var(--n-200);
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink-heading);
  background: var(--n-0);
  font-variant-numeric: tabular-nums;
}

/* Element resets — style.css sets global p/h2 rules that centre text for the
   main site. Same specificity, loaded later, so these win inside this page.
   Values otherwise match the site: Open Sans, #4f4f4f, Montserrat headings. */
p {
  font-family: var(--font-body);
  font-size: 18px; line-height: 1.7;
  color: var(--ink-body); text-align: left;
}
h2 { font-size: 44px; line-height: 1.25; text-align: left; color: var(--ink-heading); }

h1, h2, h3, h4, h5 { font-family: var(--font-sans); font-weight: 600; color: var(--ink-heading); }

/* Scale mapped onto the site's own sizes:
   44px = style.css h2 · 24px/500 = .flip-box h5 · 20px/600 = team h5 */
.display-1 { font-size: 56px; line-height: 1.15; font-weight: 600; }
.display-2 { font-size: 48px; line-height: 1.18; font-weight: 600; }
.h1 { font-size: 44px; line-height: 1.25; font-weight: 600; }
.h2 { font-size: 32px; line-height: 1.3;  font-weight: 600; }
.h3 { font-size: 24px; line-height: 1.35; font-weight: 500; }
.h4 { font-size: 20px; line-height: 1.4;  font-weight: 600; }

.body-lg { font-family: var(--font-body); font-size: 18px; line-height: 1.75; }
.body    { font-family: var(--font-body); font-size: 16px; line-height: 1.7; }
.body-sm { font-family: var(--font-body); font-size: 14px; line-height: 1.65; }
.caption { font-family: var(--font-body); font-size: 13px; line-height: 1.5; font-weight: 600; }

.overline {
  font-family: var(--font-sans);
  font-size: 12px; line-height: 1.4; font-weight: 600;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--navy-600); display: inline-block;
}
.mono { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; }

.measure  { max-width: 68ch; }
.muted    { color: var(--ink-body); }
/* font-weight overrides Bootstrap's .lead{font-weight:300} */
.lead     { font-family: var(--font-body); font-size: 18px; line-height: 1.75; font-weight: 400; color: var(--ink-body); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.fc-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 64px;
}

.section { padding: var(--sp-20) 0; background: var(--n-0); }
.section--alt { background: var(--n-25); }
.section--tight { padding: var(--sp-16) 0; }

/* Dark band — max 3 per page */
.section--dark {
  background: var(--navy-800);
  background-image: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 60%, #0b4a8f 140%);
  color: rgba(255,255,255,.88);
  position: relative;
  overflow: hidden;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .overline { color: var(--navy-200); }
.section--dark .lead, .section--dark .muted { color: var(--navy-200); }
.section--dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 78% 20%, rgba(90,143,212,.20) 0%, rgba(3,42,88,0) 55%);
}
.section--dark > * { position: relative; z-index: 1; }

.section-head { max-width: 860px; margin: 0 auto var(--sp-12); text-align: center; }
.section-head--left { margin-left: 0; text-align: left; }
.section-head .h1 { margin-bottom: var(--sp-4); }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; }
.split--7-5 { grid-template-columns: 7fr 5fr; }
.split--5-7 { grid-template-columns: 5fr 7fr; }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   5. Skip link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--navy-600); color: #fff;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-4); }

/* --------------------------------------------------------------------------
   6. Fixed-navbar clearance
   The site header is .fixed-top, so it sits outside normal flow.
   Below 991px style.css hides the 40px social icons, so the bar shrinks
   to logo height and the clearance has to follow.
   -------------------------------------------------------------------------- */
.crumb { margin-top: var(--nav-h); }

@media (max-width: 991px) { :root { --nav-h: 78px; } }
@media (max-width: 767px) { :root { --nav-h: 72px; } }

/* --------------------------------------------------------------------------
   7. Buttons
   Overrides style.css .btn, which sets position:sticky, border-radius:0,
   text-transform:capitalize and a 2px border that would otherwise leak in.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 44px; padding: 0 var(--sp-5);
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 500; line-height: 1;
  letter-spacing: .5px;                    /* matches style.css .btn */
  border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  position: static; overflow: visible; text-transform: none;
  z-index: auto;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn--lg { height: 48px; padding: 0 var(--sp-5); font-size: 15px; }
.btn--primary { background: var(--navy-600); color: #fff; }
.btn--primary:hover { background: var(--navy-700); }
.btn--secondary { background: var(--n-0); color: var(--n-800); border-color: var(--n-300); }
.btn--secondary:hover { border-color: var(--navy-500); color: var(--navy-600); }
.btn--onDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--onDark:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn--onDarkPrimary { background: #fff; color: var(--navy-800); }
.btn--onDarkPrimary:hover { background: var(--navy-50); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row--center { justify-content: center; }

/* Tertiary — routing link, never a button */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--navy-600);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast);
}
.link-arrow:hover { border-bottom-color: var(--navy-600); }
.link-arrow svg { transition: transform var(--t-fast); }
.link-arrow:hover svg { transform: translateX(2px); }
.section--dark .link-arrow { color: var(--navy-200); }
.section--dark .link-arrow:hover { border-bottom-color: var(--navy-200); }

/* --------------------------------------------------------------------------
   8. Focus — never removed
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--navy-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.section--dark :focus-visible { outline-color: var(--navy-200); }

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
/* display:block overrides Bootstrap's .card{display:flex;flex-direction:column} */
.card {
  display: block;
  background: var(--n-0); border: var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); height: 100%;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.card--hover:hover { border-color: var(--navy-300); transform: translateY(-2px); }
.card__icon {
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--navy-50); color: var(--navy-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4);
}
.card__icon svg { width: 20px; height: 20px; }
.card__icon--ai    { background: #efedfa; color: var(--prov-ai); }
.card__icon--human { background: #e6f6f1; color: var(--prov-human); }
.card h3 { font-size: 16px; line-height: 22px; margin-bottom: var(--sp-2); }
.card p { font-size: 14px; line-height: 22px; color: var(--n-600); }

.section--dark .card {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}
.section--dark .card p { color: var(--navy-200); }
.section--dark .card__icon { background: rgba(255,255,255,.10); color: #fff; }

/* Compact feature row */
.feature {
  display: flex; gap: var(--sp-4); padding: var(--sp-4) 0;
  border-top: var(--border);
}
.feature__ico { flex: 0 0 auto; width: 20px; height: 20px; color: var(--navy-600); margin-top: 2px; }
.feature h4 { font-size: 15px; margin-bottom: 3px; }
.feature p { font-size: 14px; line-height: 22px; color: var(--n-600); }

/* --------------------------------------------------------------------------
   11. Lifecycle rail
   -------------------------------------------------------------------------- */
.rail { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.rail__node { position: relative; padding: 0 var(--sp-3); text-align: center; }
.rail__node::before {
  content: ""; position: absolute; top: 21px; left: -50%; width: 100%; height: 2px;
  background: var(--n-200); z-index: 0;
}
.rail__node:first-child::before { display: none; }
.rail__num {
  position: relative; z-index: 1;
  width: 44px; height: 44px; margin: 0 auto var(--sp-4);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--n-0);
  border: 2px solid var(--navy-600); color: var(--navy-600);
  font-size: 15px; font-weight: 600;
  transition: background var(--t-fast), color var(--t-fast);
}
.rail__node:hover .rail__num { background: var(--navy-600); color: #fff; }
.rail__node h4 { font-size: 15px; margin-bottom: 6px; }
.rail__node p { font-size: 13px; line-height: 20px; color: var(--n-600); }
.section--alt .rail__num { background: var(--n-25); }

/* --------------------------------------------------------------------------
   12. Comparison
   -------------------------------------------------------------------------- */
.compare { border-radius: var(--r-lg); padding: var(--sp-6); height: 100%; }
.compare h3 { font-size: 17px; margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid; }
.compare li { position: relative; padding-left: 28px; margin-bottom: var(--sp-3); font-size: 14px; line-height: 22px; }
.compare li:last-child { margin-bottom: 0; }
.compare li::before { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; }
.compare--before { background: var(--n-100); color: var(--n-600); }
.compare--before h3 { color: var(--n-600); border-bottom-color: var(--n-300); }
.compare--before li::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa6b6' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.compare--after { background: var(--navy-800); color: rgba(255,255,255,.9); }
.compare--after h3 { color: #fff; border-bottom-color: rgba(255,255,255,.22); }
.compare--after li::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237fd4a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* --------------------------------------------------------------------------
   13. Roadmap
   -------------------------------------------------------------------------- */
.roadmap { border: var(--border); border-radius: var(--r-lg); overflow: hidden; }
.roadmap__row {
  display: grid; grid-template-columns: 150px 1fr 260px;
  gap: var(--sp-5); align-items: center;
  padding: var(--sp-5); border-bottom: var(--border);
}
.roadmap__row:last-child { border-bottom: none; }
.roadmap__row h4 { font-size: 16px; }
.roadmap__row p { font-size: 14px; color: var(--n-600); }

/* --------------------------------------------------------------------------
   14. Accordion
   -------------------------------------------------------------------------- */
.acc { border: var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--n-0); }
.acc__item + .acc__item { border-top: var(--border); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-5); text-align: left;
  background: none; border: none; cursor: pointer;
  transition: background var(--t-fast);
}
.acc__btn:hover { background: var(--n-25); }
.acc__btn > span { font-size: 16px; font-weight: 600; color: var(--n-800); }
.acc__btn svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--navy-600); transition: transform var(--t-base); }
.acc__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-base); }
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__body { padding: 0 var(--sp-5) var(--sp-5); }
.acc__body p { font-size: 15px; line-height: 26px; color: var(--n-600); }
.acc__body p + p { margin-top: var(--sp-3); }
.acc__body strong { color: var(--n-800); }

/* Capability chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-4); }
.chips span {
  font-size: 11px; font-weight: 600; color: var(--navy-600);
  background: var(--navy-50); border: 1px solid var(--navy-100);
  border-radius: 999px; padding: 4px 10px;
}

/* --------------------------------------------------------------------------
   15. Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: var(--border); border-radius: var(--r-lg); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  background: var(--n-50); border-bottom: var(--border);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--n-500);
  white-space: nowrap;
}
table.data td { padding: var(--sp-4); border-bottom: var(--border); vertical-align: top; color: var(--n-600); line-height: 22px; }
table.data tr:last-child td { border-bottom: none; }
table.data td:first-child { font-weight: 600; color: var(--n-800); white-space: nowrap; }

/* --------------------------------------------------------------------------
   16. Trust strip
   -------------------------------------------------------------------------- */
.trust {
  padding: var(--sp-5) 0; background: var(--n-25);
  border-top: var(--border); border-bottom: var(--border);
}
.trust__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3) var(--sp-6); }
.trust__label { font-size: 13px; color: var(--n-500); }
.trust__marks { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.trust__marks span {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--n-500); border: var(--border); border-radius: var(--r-sm);
  padding: 5px 10px; background: var(--n-0);
}

/* --------------------------------------------------------------------------
   17. Hero
   -------------------------------------------------------------------------- */
.hero { padding: var(--sp-16) 0 var(--sp-20); }
.hero .display-1 { color: #fff; margin: var(--sp-4) 0 var(--sp-5); max-width: 15ch; }
.hero__sub { font-size: 19px; line-height: 30px; color: var(--navy-200); max-width: 54ch; margin-bottom: var(--sp-5); }
.hero__body { font-size: 16px; line-height: 27px; color: rgba(255,255,255,.82); max-width: 56ch; margin-bottom: var(--sp-6); }
.hero--product { padding: var(--sp-12) 0 var(--sp-16); }
.hero--product .display-2 { color: #fff; margin: var(--sp-4) 0 var(--sp-5); }

/* Breadcrumb */
.crumb { padding: var(--sp-3) 0; background: var(--n-25); border-bottom: var(--border); }
.crumb__inner { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--n-500); }
.crumb a:hover { color: var(--navy-600); }
.crumb .sep { color: var(--n-300); }
.crumb strong { color: var(--n-800); font-weight: 600; }

/* --------------------------------------------------------------------------
   18. Sticky subnav
   -------------------------------------------------------------------------- */
.subnav {
  position: sticky; top: var(--nav-h); z-index: 90;
  background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
  border-bottom: var(--border);
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform var(--t-base), opacity var(--t-base);
}
.subnav.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.subnav__inner { display: flex; gap: var(--sp-1); height: 56px; align-items: center; overflow-x: auto; }
.subnav a {
  padding: var(--sp-2) var(--sp-3); font-size: 13px; font-weight: 500;
  color: var(--n-600); border-radius: var(--r-md); white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.subnav a:hover, .subnav a.is-active { color: var(--navy-600); background: var(--n-50); }

/* --------------------------------------------------------------------------
   19. Diagram surfaces
   -------------------------------------------------------------------------- */
/* display:block overrides Bootstrap's .figure{display:inline-block},
   which otherwise shrink-wraps the panel to its content. */
.figure { display: block; width: 100%; border-radius: var(--r-lg); overflow: hidden; }
.figure--panel { background: var(--n-0); border: var(--border); padding: var(--sp-5); }
.section--dark .figure--panel { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.figure figcaption { font-size: 12px; color: var(--n-500); margin-top: var(--sp-3); text-align: center; }
.section--dark .figure figcaption { color: var(--navy-200); }

/* Wide diagrams: scroll rather than shrink to illegibility */
.figure__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.figure__hint { display: none; }

@media (max-width: 900px) {
  .figure__scroll svg { min-width: 920px; }
  .figure__hint {
    display: block; text-align: center; margin-top: var(--sp-3);
    font-size: 12px; color: var(--navy-200);
  }
  .figure__hint::after { content: " \2192"; }
}

/* Abstracted UI panel */
.ui {
  background: var(--n-0); border: var(--border); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: 0 16px 40px rgba(2,20,45,.10);
}
.ui__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px; background: var(--n-50); border-bottom: var(--border);
}
.ui__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--n-300); }
.ui__bar em { margin-left: 8px; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--n-500); text-transform: uppercase; }
.ui__body { padding: var(--sp-4); }
.ui__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 10px 12px; border: var(--border); border-radius: var(--r-sm);
  font-size: 13px; color: var(--n-600);
}
.ui__row + .ui__row { margin-top: 6px; }
.ui__row b { font-weight: 500; display: flex; align-items: center; gap: 8px; }
.ui__row b svg { width: 14px; height: 14px; color: var(--n-400); }
.pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill--ok   { background: #e6f4ee; color: #0a6e4b; }
.pill--warn { background: #fdf3e2; color: #8a5800; }
.pill--err  { background: #fdecec; color: #a5252b; }
.pill--idle { background: var(--n-100); color: var(--n-500); }
.ui__label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--n-500); margin: var(--sp-4) 0 6px; }
.ui__bar-track { height: 7px; border-radius: 999px; background: var(--n-100); overflow: hidden; }
.ui__bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--navy-600), var(--navy-400)); }
.ui__stats { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.ui__stat { flex: 1; background: var(--n-50); border-radius: var(--r-sm); padding: 10px 12px; }
.ui__stat b { display: block; font-size: 20px; color: var(--navy-700); line-height: 1.2; }
.ui__stat span { font-size: 11px; color: var(--n-500); }

/* Provenance legend */
.prov { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-5); }
.prov span { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--n-600); }
.prov i { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.section--dark .prov span { color: var(--navy-200); }

/* --------------------------------------------------------------------------
   20. Zig-zag steps
   -------------------------------------------------------------------------- */
.step { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; }
.step + .step { margin-top: var(--sp-16); }
.step:nth-child(even) .step__copy { order: 2; }
.step__num {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy-600); background: var(--navy-50);
  border-radius: var(--r-sm); padding: 5px 10px; margin-bottom: var(--sp-4);
}
.step h3 { font-size: 24px; line-height: 32px; margin-bottom: var(--sp-3); }
.step p { font-size: 15px; line-height: 26px; color: var(--n-600); }
.step p + p { margin-top: var(--sp-3); }
.step__outcome {
  margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: var(--border);
  font-size: 14px; color: var(--navy-700); font-weight: 500;
}

/* --------------------------------------------------------------------------
   21. Statistics
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.stat { text-align: center; }
.stat b { display: block; font-size: 40px; line-height: 1.1; font-weight: 600; color: var(--navy-700); letter-spacing: -.02em; }
.stat span { font-size: 13px; color: var(--n-500); }

/* --------------------------------------------------------------------------
   21a. Coverage strip
   -------------------------------------------------------------------------- */
.cover-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3);
}
.cover-strip li {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; color: var(--n-800);
  background: var(--n-0); border: var(--border); border-radius: var(--r-md);
  padding: 12px 18px;
}
.cover-strip svg { width: 15px; height: 15px; color: var(--good); flex: 0 0 auto; }
.cover-note {
  text-align: center; margin-top: var(--sp-5);
  font-size: 14px; color: var(--n-500);
}
.cover-note a { color: var(--navy-600); font-weight: 600; border-bottom: 1px solid var(--navy-200); }

/* --------------------------------------------------------------------------
   21b. AI Intelligence — illustrated capability cards
   -------------------------------------------------------------------------- */
.ai-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.ai-item {
  background: var(--n-0);
  border: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.ai-item:hover { border-color: var(--navy-300); transform: translateY(-2px); }

/* Illustration plate */
.ai-item__art {
  background: var(--n-50);
  border-bottom: var(--border);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
}
.ai-item__art svg { width: 100%; height: auto; display: block; }

.ai-item h3 {
  font-size: 16px; line-height: 22px;
  margin: var(--sp-5) var(--sp-5) var(--sp-2);
}
.ai-item p {
  font-size: 14px; line-height: 22px; color: var(--n-600);
  margin: 0 var(--sp-5) var(--sp-5);
}

@media (max-width: 1023px) {
  .ai-showcase { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ai-showcase { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   22. CTA section
   -------------------------------------------------------------------------- */
.cta-block { max-width: 780px; margin: 0 auto; text-align: center; }
.cta-block .h1 { color: #fff; margin-bottom: var(--sp-4); }
.cta-block .lead { color: var(--navy-200); margin-bottom: var(--sp-4); }
.cta-block p.body { color: rgba(255,255,255,.82); margin-bottom: var(--sp-6); }
.cta-trust {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 13px; color: rgba(255,255,255,.65);
}

/* --------------------------------------------------------------------------
   24. Scroll reveal — fires once, 12px max travel
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 400ms ease-out, transform 400ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   25. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .container { padding: 0 40px; }
  .rail { grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-8); }
  .rail__node:nth-child(4)::before { display: none; }
}

@media (max-width: 1023px) {
  .display-1 { font-size: 40px; line-height: 46px; }
  .display-2 { font-size: 34px; line-height: 42px; }
  .h1 { font-size: 28px; line-height: 36px; }
  .section { padding: var(--sp-16) 0; }
  .split, .split--7-5, .split--5-7, .step { grid-template-columns: 1fr; gap: var(--sp-8); }
  .step:nth-child(even) .step__copy { order: 0; }   /* copy always before visual */
  .step + .step { margin-top: var(--sp-12); }
  .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .roadmap__row { grid-template-columns: 1fr; gap: var(--sp-3); }

  /* Mobile nav */

  /* The simple nav is short enough to stay inline — no drawer needed */
}

@media (max-width: 767px) {
  .container { padding: 0 24px; }
  .display-1 { font-size: 32px; line-height: 38px; }
  .display-2 { font-size: 28px; line-height: 34px; }
  .h1 { font-size: 24px; line-height: 32px; }
  .h2 { font-size: 20px; line-height: 28px; }
  .hero__sub { font-size: 17px; line-height: 27px; }
  .section { padding: var(--sp-12) 0; }
  .section-head { margin-bottom: var(--sp-8); }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .rail { grid-template-columns: 1fr; }
  .rail__node { padding: 0; text-align: left; display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-4); }
  .rail__node::before { display: none; }
  .rail__num { margin: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat b { font-size: 32px; }
  .footer__grid { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .trust__inner { flex-direction: column; gap: var(--sp-3); }
  table.data td:first-child { white-space: normal; }
}