/* intel-site.css — shared stylesheet for the public ABL Intel site
   (intel-home.html at '/', intel-how-it-works.html at '/how-it-works').
   Extracted 2026-09-21 from the inline <style> of intel-home.html, unchanged,
   so both pages share one set of tokens, header, buttons, section furniture,
   trust strip, CTA and footer. Page-specific rules live inline on each page.
   Served by express.static; CloudFront caches it, so invalidate on change. */
:root{
  --navy:#0F2744; --navy-deep:#0A1B30; --navy-soft:#1A3556;
  --gold:#B8934E; --gold-soft:#D8B872; --gold-deep:#9A7838;
  --paper:#FBFAF7; --paper-soft:#F4F1EA;
  --ink:#1A1A1A; --ink-soft:#4A4A4A; --ink-muted:#7A7A7A;
  --success:#2D6A4F; --warn:#B8860B; --danger:#8B2635;
  --rule:#E4DFD4;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Source Sans 3', system-ui, -apple-system, sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--sans); font-weight:400; color:var(--ink); background:var(--paper); line-height:1.62; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
h1,h2,h3{ font-family:var(--serif); font-weight:600; letter-spacing:-.01em; line-height:1.14; }


/* ── Header ──────────────────────────────────────────── */
header{ position:sticky; top:0; z-index:15; background:rgba(15,39,68,.97); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid rgba(255,255,255,.09); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 0; }
.brand{ display:flex; align-items:center; gap:14px; color:#fff; flex-shrink:0; }
.brand .logo{ height:40px; width:auto; display:block; }
.brand .tag{ color:rgba(255,255,255,.5); font-size:11px; letter-spacing:.16em; text-transform:uppercase; border-left:1px solid rgba(255,255,255,.2); padding-left:14px; }
.navlinks{ display:flex; gap:28px; font-size:15px; color:rgba(255,255,255,.72); margin-left:auto; }
.navlinks a{ transition:.15s; padding:4px 0; border-bottom:1px solid transparent; }
.navlinks a:hover{ color:#fff; border-bottom-color:var(--gold); }
.btn{ display:inline-block; font-family:var(--sans); font-weight:600; border-radius:6px; padding:11px 22px; transition:.16s; cursor:pointer; border:1px solid transparent; font-size:15px; white-space:nowrap; }
.btn-gold{ background:var(--gold); color:#231a07; }
.btn-gold:hover{ background:var(--gold-soft); }
.btn-ghost{ border-color:rgba(255,255,255,.32); color:#fff; }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-soft); }
.btn-outline{ border-color:var(--navy); color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:#fff; }
.btn-lg{ padding:14px 30px; font-size:16px; }

/* ── Hero ────────────────────────────────────────────── */
.hero{ background:linear-gradient(158deg,var(--navy-deep) 0%,var(--navy) 46%,var(--navy-soft) 100%); color:#fff; padding:96px 0 88px; position:relative; overflow:hidden; }
.hero::after{ content:""; position:absolute; right:-200px; top:-180px; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle,rgba(184,147,78,.16),transparent 68%); pointer-events:none; }
.hero .eyebrow{ color:var(--gold); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; margin-bottom:20px; }
.hero h1{ font-size:60px; max-width:880px; font-weight:600; }
.hero h1 .accent{ color:var(--gold-soft); font-style:italic; }
.hero p.lede{ font-size:20px; font-weight:300; color:rgba(255,255,255,.8); max-width:660px; margin:26px 0 36px; }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-meta{ margin-top:56px; padding-top:28px; border-top:1px solid rgba(255,255,255,.13); display:flex; gap:44px; flex-wrap:wrap; }
.hero-meta div{ font-size:14px; color:rgba(255,255,255,.62); }
.hero-meta b{ display:block; font-family:var(--serif); font-size:26px; color:#fff; font-weight:600; letter-spacing:-.01em; }

/* ── Section furniture ───────────────────────────────── */
section{ padding:88px 0; }
.eyebrow{ color:var(--gold-deep); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.sec-head{ max-width:720px; margin-bottom:52px; }
.sec-head h2{ font-size:40px; color:var(--navy); margin:12px 0 16px; }
.sec-head p{ color:var(--ink-soft); font-size:18px; font-weight:300; }
.rule{ height:1px; background:var(--rule); }

/* ── The gap ─────────────────────────────────────────── */
.gap-sec{ background:var(--paper-soft); }
.gap-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:4px; overflow:hidden; }
.gap-cell{ background:var(--paper-soft); padding:32px 30px; }
.gap-cell .n{ font-family:var(--serif); font-size:15px; color:var(--gold-deep); font-weight:700; letter-spacing:.1em; margin-bottom:12px; }
.gap-cell h3{ font-size:22px; color:var(--navy); margin-bottom:10px; }
.gap-cell p{ color:var(--ink-soft); font-size:15.5px; }

/* ── Audience tracks ─────────────────────────────────── */
.tracks{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.track{ border:1px solid var(--rule); border-radius:6px; padding:38px 34px; background:#fff; position:relative; overflow:hidden; }
.track::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold); }
.track.risk::before{ background:var(--navy); }
.track .who{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); }
.track h3{ font-size:28px; color:var(--navy); margin:10px 0 8px; }
.track .claim{ font-family:var(--serif); font-size:20px; font-style:italic; color:var(--gold-deep); margin-bottom:22px; }
.track ul{ list-style:none; }
.track li{ position:relative; padding-left:26px; margin-bottom:14px; color:var(--ink-soft); font-size:15.5px; }
.track li::before{ content:""; position:absolute; left:0; top:9px; width:11px; height:2px; background:var(--gold); }
.track.risk li::before{ background:var(--navy); }
.track li b{ color:var(--ink); font-weight:600; }

/* ── Product suite ───────────────────────────────────── */
.suite{ background:var(--navy); color:#fff; }
.suite .sec-head h2{ color:#fff; }
.suite .sec-head p{ color:rgba(255,255,255,.72); }
.suite .eyebrow{ color:var(--gold-soft); }
.legend{ display:flex; gap:22px; flex-wrap:wrap; margin-bottom:34px; font-size:13px; color:rgba(255,255,255,.6); align-items:center; }
.pill{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding:4px 11px; border-radius:100px; border:1px solid; white-space:nowrap; flex:none; }
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.pill-live{ color:#7EC9A3; border-color:rgba(126,201,163,.4); background:rgba(45,106,79,.18); }
.pill-build{ color:var(--gold-soft); border-color:rgba(216,184,114,.4); background:rgba(184,147,78,.14); }
.products{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px; }
.prod{ background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:32px 30px; transition:.18s; display:flex; flex-direction:column; }
.prod:hover{ background:rgba(255,255,255,.075); border-color:rgba(184,147,78,.42); transform:translateY(-2px); }
.prod-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.prod h3{ font-size:25px; color:#fff; }
.prod > p{ color:rgba(255,255,255,.76); font-size:15.5px; margin-bottom:20px; }
.prod ul{ list-style:none; margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); }
.prod li{ font-size:14px; color:rgba(255,255,255,.66); padding-left:18px; position:relative; margin-bottom:8px; }
.prod li::before{ content:"—"; position:absolute; left:0; color:var(--gold); }
.prod .note{ margin-top:16px; font-size:13.5px; color:var(--gold-soft); font-style:italic; line-height:1.5; }
/* A seventh card would orphan in the 3-up grid: the wide card spans the row,
   its body on the left and its list on the right (2026-10-03). */
.prod-wide{ grid-column:1 / -1; display:grid; grid-template-columns:1.1fr 1fr; gap:14px 44px; }
.prod-wide .prod-top{ grid-column:1 / -1; margin-bottom:4px; }
.prod-wide > p{ margin-bottom:0; }
.prod-wide ul{ margin-top:0; padding-top:0; border-top:none; }
.prod-wide .note{ grid-column:1 / -1; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); }
@media(max-width:760px){ .prod-wide{ grid-template-columns:1fr; } .prod-wide ul{ padding-top:18px; border-top:1px solid rgba(255,255,255,.1); } }

/* ── How it works ────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:34px; counter-reset:step; }
.step{ counter-increment:step; position:relative; padding-top:30px; }
.step::before{ content:counter(step,decimal-leading-zero); position:absolute; top:0; left:0; font-family:var(--serif); font-size:15px; font-weight:700; color:var(--gold-deep); letter-spacing:.1em; }
.step h3{ font-size:21px; color:var(--navy); margin-bottom:9px; }
.step p{ color:var(--ink-soft); font-size:15.5px; }
.step::after{ content:""; position:absolute; top:8px; left:34px; right:-17px; height:1px; background:var(--rule); }
.step:last-child::after{ display:none; }

/* ── Evidence / sources ──────────────────────────────── */
.evidence{ background:var(--paper-soft); }
.ev-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:start; }
.quote-card{ background:#fff; border:1px solid var(--rule); border-left:3px solid var(--gold); border-radius:4px; padding:28px 30px; }
.quote-card .lbl{ font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:14px; }
.quote-card blockquote{ font-family:var(--serif); font-size:20px; font-style:italic; color:var(--navy); line-height:1.42; margin-bottom:16px; }
.quote-card .src{ font-size:13.5px; color:var(--ink-muted); border-top:1px solid var(--rule); padding-top:14px; }
.quote-card .src b{ color:var(--ink-soft); font-weight:600; }
.src-table{ width:100%; border-collapse:collapse; font-size:15px; }
.src-table th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); padding:0 16px 10px 0; border-bottom:1px solid var(--rule); }
.src-table td{ padding:13px 16px 13px 0; border-bottom:1px solid var(--rule); vertical-align:top; color:var(--ink-soft); }
.src-table td:first-child{ color:var(--ink); font-weight:600; white-space:nowrap; }

/* ── Trust strip ─────────────────────────────────────── */
.trust{ background:var(--navy-deep); color:#fff; padding:64px 0; }
.trust-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:34px; }
.trust-item h4{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:10px; }
.trust-item p{ font-size:15px; color:rgba(255,255,255,.72); }

/* ── CTA ─────────────────────────────────────────────── */
.cta{ text-align:center; background:var(--paper); }
.cta h2{ font-size:44px; color:var(--navy); max-width:760px; margin:12px auto 18px; }
.cta p{ color:var(--ink-soft); font-size:18px; font-weight:300; max-width:560px; margin:0 auto 34px; }
.cta .cta-row{ justify-content:center; }
.cta .small{ font-size:14px; color:var(--ink-muted); margin-top:26px; }

/* ── Footer ──────────────────────────────────────────── */
footer{ background:var(--navy-deep); color:rgba(255,255,255,.6); padding:52px 0 40px; font-size:14.5px; }
.foot-top{ display:flex; justify-content:space-between; gap:34px; flex-wrap:wrap; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.1); }
.foot-brand .logo-sm{ height:36px; width:auto; display:block; margin-bottom:14px; }
.foot-brand .byline{ font-family:var(--serif); font-style:italic; font-size:19px; color:var(--gold-soft); }
.foot-links{ display:flex; flex-wrap:wrap; gap:9px 22px; max-width:560px; font-size:13.5px; }
.foot-links a{ color:rgba(255,255,255,.66); }
.foot-links a:hover{ color:var(--gold-soft); }
.foot-bottom{ padding-top:26px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.45); }

@media(max-width:900px){
  .navlinks{ display:none; }
  .tracks{ grid-template-columns:1fr; }
  .ev-grid{ grid-template-columns:1fr; gap:36px; }
  .step::after{ display:none; }
}
@media(max-width:640px){
  .wrap{ padding:0 20px; }
  /* The "Credit Intelligence" lockup pushes the login button off-screen at
     390px — the logo alone carries the brand at this width. */
  .brand .tag{ display:none; }
  .brand .logo{ height:34px; }
  .nav{ padding:13px 0; }
  .btn{ padding:10px 17px; font-size:14.5px; }
  section{ padding:60px 0; }
  .hero{ padding:64px 0 60px; }
  .hero h1{ font-size:38px; }
  .hero p.lede{ font-size:18px; }
  .sec-head h2{ font-size:31px; }
  .cta h2{ font-size:32px; }
  .hero-meta{ gap:26px; }
}