/* ============================================================================
   Page typography — the block that used to be an inline <style> in the head.

   It moved out so no page carries inline CSS: the house rule, and what lets a
   CSP run `style-src 'self'` without 'unsafe-inline' — the escape hatch that
   makes a policy mostly decorative.

   LOAD ORDER IS THE WHOLE POINT: this file must stay linked AFTER
   css/tailwind.build.css, which is exactly where the inline block sat. Putting
   these rules in marketing.css instead (loaded BEFORE Tailwind) was tried and
   measurably broke two things, because both cases are ties that order settles:

   - `h1 { font-weight: 800 }` is an element selector, and Tailwind's preflight
     has its own `h1..h6 { font-weight: inherit }`. Same specificity, so the
     later one wins — every heading on the page silently rendered at 400.
   - `.band-dark { color: rgba(255,255,255,.72) }` and `.text-white` are both
     single classes, and the footer carries both. Loaded first, `.text-white`
     won and the footer headings went from 72% white to pure white.

   Neither is visible in the source; both showed up in a computed-style diff of
   the page before and after. If you ever add a rule here, keep it in this file
   rather than "tidying" it into marketing.css.
   ========================================================================== */

/* THE PAGE'S REAL FONT MECHANISM — read before "fixing" anything here.
   index.html's <body> carries `font-display` and `text-slate-900`, and a
   utility class beats an element selector on specificity no matter the load
   order — so a `body { font-family / color }` rule in this file is dead on
   arrival. One sat here anyway, claiming "Body stays Inter": measured with
   getComputedStyle, every paragraph on the page has rendered Plus Jakarta
   Sans since the first compiled build, because the class always won. Every
   visual pass vetted THAT look, so Jakarta-everywhere is the design now; the
   dead rule is deleted rather than fought for. If body copy should ever
   really become Inter, the change is `font-display` -> `font-body` ON THE
   BODY TAG in index.html, not a rule here — and note the footer <h5>s
   inherit their face from <body>, so they move with it. */
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; color: #001b3b; }
h1 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.16; }
h2 { font-weight: 800; letter-spacing: -0.015em; line-height: 1.18; }
h3 { font-weight: 700; line-height: 1.28; }

/* On the navy bands the headings invert — set here so every band gets it
   without repeating utilities on each heading. */
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: #fff; }
.band-dark { color: rgba(255,255,255,0.72); }

/* The eyebrow: a short rule then small caps in brand blue, the label style
   used above every section heading. */
.eyebrow { display: inline-flex; align-items: center; gap: 0.75rem;
           font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
           font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
           color: #0d59f2; }
.eyebrow::before { content: ""; width: 2rem; height: 2px; background: currentColor; }

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }