/* ================================================================
   FLEETCOMPLIANCEHQ — SITE THEME: "FIELD MANUAL"
   Owner decision 2026-07-15 (Session 019): supersedes the previous
   "Verified Ledger" (blue) theme, which was locked 2026-07-04 and is
   now retired. See North Star Key Decisions Log.

   Direction: an editorial reference aesthetic — a well-set technical
   handbook rather than a marketing page. Three deliberate changes
   from Verified Ledger, each addressing a specific reason the old
   pages read as untidy:

   1. NEAR-MONOCHROME. Previously --primary was a bright navy applied
      to heading text across every page type, so almost every card
      shouted in blue. --primary is now a deep ink charcoal, and warm
      amber is the ONLY accent. Colour now marks one thing (a link,
      a label, a source), so it means something again.
   2. ONE TYPE SCALE. The old sheet used ~18 ad-hoc font sizes
      (56/42/31/26/24/21/19/16.5/15.5/14.5/13.5/13/12.5/12/11.5/11/
      10/9.5px). Everything now comes from the --fs-* ramp below.
   3. QUIETER SURFACES. Heavy shadows, blob gradients and 20px radii
      are replaced by hairline rules and restrained radii, so the
      content is the thing you notice.

   Token NAMES are intentionally unchanged from the old theme: the
   scoped <style> blocks in MindMap.astro, AiAssist.astro and the
   tool pages consume --primary/--rule/--surface/--ink/--radius, so
   remapping values here restyles them for free. Do not rename tokens
   without grepping src/ for consumers first.
   ================================================================ */

:root{
  /* Surfaces — a near-neutral paper. Pulled cooler and lighter in the 2026-07-15 "sleek"
     pass: the earlier #f7f6f3/#e4e2db pairing carried a brown cast that read soft rather
     than crisp. Just enough warmth left to avoid a clinical grey. */
  --bg:#fafaf9;
  --surface:#ffffff;
  --surface-2:#f4f4f2;

  /* Ink — deeper black point for a harder, more modern contrast against the paper */
  --ink:#101114;
  --ink-soft:#585d67;
  --ink-faint:#9296a0;
  --rule:#e8e8e5;

  /* --primary is now INK, not a hue. It carries headings, buttons,
     the footer and the eco panel. Reads as authority, not decoration. */
  --primary:#1b1e26;
  --primary-dark:#0e1014;
  --primary-tint:#efeee9;

  /* Amber is the single accent: labels, links, "verified" marks. */
  --gold:#b0741f;
  --gold-dark:#8a5817;
  --gold-tint:#f7efe2;
  /* Lifted amber for use ON the dark hero band — --gold/--gold-dark are tuned for paper
     and fall below a readable contrast against charcoal. */
  --gold-on-dark:#e3a95c;

  /* One type ramp for the whole site */
  --fs-xs:12px;
  --fs-sm:14px;
  --fs-base:17px;
  --fs-md:19px;
  --fs-lg:22px;
  --fs-xl:28px;
  --fs-2xl:clamp(32px, 4vw, 40px);
  --fs-3xl:clamp(40px, 5.4vw, 60px);

  /* One spacing rhythm */
  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:40px;
  --sp-5:64px;
  --sp-6:88px;

  /* Tighter geometry — 14/8 read soft and slightly dated; 10/6 is crisper. */
  --radius:10px;
  --radius-sm:6px;
  --shadow:0 1px 2px rgba(16,17,20,.04), 0 10px 24px -16px rgba(16,17,20,.2);
  --shadow-sm:0 1px 2px rgba(16,17,20,.05);
  --max:1120px;
  --measure:68ch;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:var(--fs-base);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Display vs UI split (2026-07-15 "sleek" pass). Serif is now reserved for the voice of
   the page — h1/h2 and the wordmark — while component-level headings (card titles, list
   headings) run in Inter. Serif at 15-22px inside a card reads bookish and soft; a tight
   sans at those sizes is what makes an interface read modern. The hero is untouched: its
   h1 and italic .sub are still serif. */
h1,h2{
  font-family:'Source Serif 4', Georgia, serif;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.022em;
  line-height:1.16;
}
h3,h4{
  font-family:'Inter',sans-serif;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.008em;
  line-height:1.4;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
ul{list-style:none}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

/* Shared label style — replaces the old kicker/step-tag/h4 divergence */
.kicker,.step-tag,.sidebar-card h4,footer h4{
  font-family:'Inter',sans-serif;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
}

/* Shared button */
.btn,.nav-cta,.signup button{
  display:inline-block; font-family:'Inter',sans-serif;
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.01em;
  padding:11px 20px; border-radius:var(--radius-sm);
  background:var(--primary); color:#fff !important; border:none; cursor:pointer;
  transition:background .16s ease;
}
.btn:hover,.nav-cta:hover,.signup button:hover{background:var(--gold-dark)}

/* ===== HEADER — static, integrated, hairline-ruled =====
   Was a sticky floating pill (position:sticky; top:18px) that hovered
   over the content. Owner asked for it to sit in the page and scroll
   with it, so it is now a plain static header seated on the paper. */
.topbar{position:static; background:var(--bg); border-bottom:1px solid var(--rule)}
.topbar .wrap{
  display:flex; align-items:center; gap:var(--sp-3);
  height:72px; max-width:var(--max);
}
.logo{
  font-family:'Source Serif 4',serif; font-weight:600; font-size:var(--fs-lg);
  color:var(--primary); white-space:nowrap; letter-spacing:-.02em;
}
/* The wordmark is a single colour: "Compliance" used to be amber while the rest was ink,
   which split the name into two visual halves. Owner request 2026-07-15. */
.logo span{color:inherit}
.topnav{display:flex; gap:2px; flex:1}
.topnav a{
  font-size:var(--fs-sm); font-weight:500; color:var(--ink-soft);
  padding:8px 12px; border-radius:var(--radius-sm); transition:color .16s ease;
}
.topnav a:hover{color:var(--ink)}
/* .hot (Provider Navigator) previously rendered amber + bolder than its neighbours.
   Every nav item is now identical; the class stays so the markup needn't change. */
.topnav a.hot{color:var(--ink-soft); font-weight:500}
.topnav a.hot:hover{color:var(--ink)}

/* Menu toggle — only ever shown at <=820px, where the link row collapses into a panel.
   Hidden here (and inert for keyboard/AT) so it never appears on desktop. */
.nav-toggle{
  display:none; width:40px; height:40px; padding:0; flex-shrink:0;
  align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius-sm);
  cursor:pointer; color:var(--ink);
}
.nav-toggle:hover{border-color:var(--primary)}
.nav-toggle-bars{position:relative; display:block; width:16px; height:1.5px; background:currentColor; border-radius:2px}
.nav-toggle-bars::before,.nav-toggle-bars::after{
  content:''; position:absolute; left:0; width:16px; height:1.5px;
  background:currentColor; border-radius:2px; transition:transform .18s ease;
}
.nav-toggle-bars::before{top:-5px}
.nav-toggle-bars::after{top:5px}
/* Bars fold into an X while the panel is open. Driven off aria-expanded so the visual
   state cannot drift from the state announced to a screen reader. */
.nav-toggle[aria-expanded='true'] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded='true'] .nav-toggle-bars::before{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded='true'] .nav-toggle-bars::after{transform:translateY(-5px) rotate(-45deg)}

/* ===== HERO — dark full-bleed band =====
   Owner request 2026-07-15: reinstate the hero treatment from the v3 "Fable" prototype
   (HOME_PAGE/fleetcompliancehq_homepage_fable_v3.html) — a dark gradient band, white
   type, left-aligned, with the personas as translucent "glass" cards sitting on it.
   Translated into the Field Manual palette: v3's navy gradient becomes the ink charcoal
   --primary ramp, and its blue accent becomes amber, so it reads as this theme rather
   than a transplant of the retired blue one.
   Deliberately NOT carried over from v3: its giant 🚛 emoji watermark. Emoji were removed
   site-wide for consistency with the Mind Map spec's no-emoji rule; a warm radial glow
   does the same job of filling the right side. Easy to reinstate if the owner wants it.
   The Verify Ledger card (the old right column) is gone, so .hero-grid is not a grid. */
.hero{
  background:linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 60%, #2b3040 100%);
  color:#fff; padding:var(--sp-5) 0 var(--sp-4); position:relative; overflow:hidden;
}
/* The medallion (owner's own mark, circular-cropped from FAVICON/Hero.png with its blue
   glow preserved). Sits on the right; top:0/bottom:0 + aspect-ratio:1 makes its diameter
   exactly the hero's height, so it touches both edges. Decorative only — behind the
   content (.hero .wrap is z-index:1) and aria-hidden by virtue of being a pseudo-element. */
.hero::after{
  content:''; position:absolute; top:0; bottom:0; right:0; aspect-ratio:1;
  background:url('/assets/hero-medallion.webp') center/contain no-repeat;
  opacity:.25; pointer-events:none;
}
.hero .wrap{position:relative; z-index:1}
/* No max-width: the persona row spans the full container so the three cards run the width
   of the page (owner request 2026-07-15). The heading block is centred; .personas resets
   itself to text-align:left so the cards keep their own alignment. */
.hero-grid{display:block; text-align:center}
.hero h1{
  font-size:var(--fs-3xl); color:#fff; letter-spacing:-.025em;
  max-width:20ch; margin-inline:auto;
}
.hero .sub{
  font-family:'Source Serif 4',serif; font-size:var(--fs-md);
  color:rgba(255,255,255,.74); margin-top:var(--sp-1); font-style:italic;
}
/* Saira, centred, and held to a single line (owner request). The nowrap is lifted on
   narrow viewports — at 375px this sentence cannot fit on one line at any readable size,
   and forcing it would drag the whole page sideways. */
.hero .promise{
  font-family:'Saira',sans-serif; font-size:var(--fs-md);
  color:rgba(255,255,255,.62); margin-top:var(--sp-2);
  line-height:1.65; white-space:nowrap;
}

/* Personas sit on the dark band, so they are glass rather than white cards. */
.personas{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2);
  margin-top:var(--sp-4); text-align:left;
}
.persona{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius); padding:var(--sp-3);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.persona:hover{
  background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.3); transform:translateY(-2px);
}
.persona h3{font-size:var(--fs-lg); color:#fff}
.persona p{font-size:var(--fs-sm); color:rgba(255,255,255,.6); margin-top:6px; line-height:1.6}
.persona .go{
  font-family:'Inter',sans-serif; font-size:var(--fs-sm); font-weight:600;
  color:var(--gold-on-dark); margin-top:var(--sp-2); display:inline-block;
}

/* ===== SECTION SHELL ===== */
.sec{padding:var(--sp-5) 0}
.sec.alt{background:var(--surface); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
/* The measure sits on the heading rather than the whole block: the section ledes are held
   to a single line (owner request 2026-07-15), which a 68ch cap on .sec-head would break.
   The nowrap is lifted below the breakpoint further down, where one line no longer fits. */
.sec-head{margin-bottom:var(--sp-4)}
.sec-head h2{font-size:var(--fs-xl); margin-top:6px; max-width:var(--measure)}
.sec-head p{
  color:var(--ink-soft); font-size:var(--fs-base); margin-top:var(--sp-1);
  white-space:nowrap;
}

/* ===== ROADMAP ===== */
.roadline{display:flex; align-items:center; margin:0 0 var(--sp-3)}
.roadline .dot{
  width:30px; height:30px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-size:var(--fs-xs); font-weight:700; flex-shrink:0;
}
.roadline .seg{flex:1; height:1px; background:var(--rule)}
.road-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--sp-2)}
.rstep{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-2); transition:border-color .16s ease;
}
.rstep:hover{border-color:var(--primary)}
.rstep .step-no{display:block; margin-bottom:4px}
.rstep h3{font-size:var(--fs-base)}
.rstep ul{margin-top:var(--sp-2)}
.rstep li{font-size:var(--fs-sm); color:var(--ink-soft); padding:4px 0; line-height:1.5}
.rstep li:hover{color:var(--gold-dark)}

/* ===== INDUSTRY PILLARS ===== */
.pillar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2)}
.pillar{background:var(--bg); border:1px solid var(--rule); border-radius:var(--radius); padding:var(--sp-3)}
.pillar .p-head{padding-bottom:var(--sp-2); border-bottom:1px solid var(--rule); margin-bottom:var(--sp-2)}
.pillar h3{font-size:var(--fs-lg)}
.pillar .p-sub{font-size:var(--fs-sm); color:var(--ink-faint); margin-top:2px}
.pillar li{
  font-size:var(--fs-sm); color:var(--ink-soft); padding:7px 0;
  border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.pillar li:last-child{border-bottom:none}
.pillar li:hover{color:var(--gold-dark)}
.pillar li .arr{color:var(--ink-faint); font-size:var(--fs-xs)}
.new{
  font-family:'Inter',sans-serif; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--gold-tint); color:var(--gold-dark); padding:2px 7px; border-radius:999px;
  font-weight:700; margin-left:6px;
}

/* ===== TOOLS ===== */
.tools-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2)}
.tool{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--sp-3); position:relative; transition:border-color .16s ease, transform .16s ease;
}
.tool:hover{border-color:var(--primary); transform:translateY(-2px)}
.tool h3{font-size:var(--fs-base); padding-right:52px}
.tool p{font-size:var(--fs-sm); color:var(--ink-soft); margin-top:6px; line-height:1.6}
.tool .free{
  position:absolute; top:var(--sp-3); right:var(--sp-3);
  font-family:'Inter',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-dark); background:var(--gold-tint); padding:3px 8px; border-radius:999px;
}

/* ===== DATES STRIP ===== */
.dates{display:flex; gap:var(--sp-2); overflow-x:auto; padding-bottom:4px}
.date-chip{
  background:var(--surface); border:1px solid var(--rule); border-left:2px solid var(--gold);
  border-radius:var(--radius-sm); padding:var(--sp-2); min-width:215px;
}
.date-chip .d{font-family:'Inter',sans-serif; font-size:var(--fs-sm); font-weight:700; color:var(--ink)}
.date-chip .t{font-size:var(--fs-sm); color:var(--ink-soft); margin-top:2px; line-height:1.5}

/* ===== ECOSYSTEM PROMO ===== */
.eco{
  background:var(--primary); border-radius:var(--radius); color:#fff;
  padding:var(--sp-4); text-align:center;
}
.eco h2{font-size:var(--fs-xl); color:#fff}
.eco p{
  font-size:var(--fs-base); color:rgba(255,255,255,.72);
  margin:var(--sp-1) auto 0; max-width:56ch;
}
.eco .btn{margin-top:var(--sp-3); background:var(--gold); color:#fff !important}
.eco .btn:hover{background:#c98a35}

/* ===== SIGNUP BAND ===== */
.signup{background:var(--surface); border-top:1px solid var(--rule); padding:var(--sp-4) 0}
.signup .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap}
.signup h2{font-size:var(--fs-lg)}
.signup p{font-size:var(--fs-sm); color:var(--ink-soft); margin-top:2px}
.signup form{display:flex; gap:var(--sp-1)}
.signup input{
  font-family:'Inter',sans-serif; font-size:var(--fs-sm);
  padding:11px 14px; border:1px solid var(--rule); border-radius:var(--radius-sm);
  width:280px; background:var(--bg); color:var(--ink);
}
.signup input:focus{border-color:var(--primary); outline:none}

/* ===== FOOTER ===== */
.kofi{
  background:var(--bg); text-align:center; padding:var(--sp-2);
  font-size:var(--fs-sm); color:var(--ink-soft); border-top:1px solid var(--rule);
}
.kofi .kbtn{
  display:inline-block; background:var(--gold-tint); color:var(--gold-dark);
  padding:6px 14px; border-radius:var(--radius-sm);
  font-size:var(--fs-xs); font-weight:700; margin-left:var(--sp-1);
}
.kofi .kbtn:hover{background:var(--gold); color:#fff}
footer{background:var(--primary-dark); color:rgba(255,255,255,.66); padding:var(--sp-4) 0 var(--sp-3)}
footer .foot-top{
  display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
  padding-bottom:var(--sp-3); border-bottom:1px solid rgba(255,255,255,.12);
}
footer h4{color:rgba(255,255,255,.5); margin-bottom:var(--sp-2)}
footer .foot-legal a, footer .foot-topics a{
  display:block; font-size:var(--fs-sm); color:rgba(255,255,255,.66); padding:4px 0;
}
footer .foot-legal a:hover, footer .foot-topics a:hover{color:#fff}
footer .wrap{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  gap:var(--sp-1); padding-top:var(--sp-3); font-size:var(--fs-sm);
}

/* ===== BREADCRUMB / ARTICLE / HUB SHARED ===== */
/* padding-block, not the `padding` shorthand: these classes are used BOTH as children of
   .wrap and combined onto it (class="wrap breadcrumb"). A shorthand with a 0 horizontal
   value silently cancels .wrap's 24px gutter, which left those pages' text hard against
   a different margin than the rest of the site. */
.page-shell{padding-block:var(--sp-3) var(--sp-5)}
.breadcrumb{font-size:var(--fs-sm); color:var(--ink-faint); padding-block:var(--sp-3) 0}
.breadcrumb a{color:var(--ink-soft)}
.breadcrumb a:hover{color:var(--gold-dark)}
/* The measure is applied to the CHILDREN, not to .page-head itself. The tool pages use
   class="wrap page-head" on one element: if .page-head set its own narrower max-width it
   would beat .wrap's 1120px while .wrap's `margin:0 auto` still centred it, so those
   headings floated centre-page while every other page's sat on the left gutter. */
.page-head{padding-block:var(--sp-2) var(--sp-3)}
.page-head h1{font-size:var(--fs-2xl); margin-top:var(--sp-1); max-width:var(--measure)}
.page-head .desc{font-size:var(--fs-md); color:var(--ink-soft); margin-top:var(--sp-2); line-height:1.6; max-width:var(--measure)}

/* The Verify Ribbon — surfaces real frontmatter `sources:` data */
.verify-ribbon{
  background:var(--gold-tint); border:1px solid #e8d9bf; border-radius:var(--radius);
  padding:var(--sp-2) var(--sp-3); margin-top:var(--sp-3);
  display:flex; gap:var(--sp-2); align-items:flex-start;
}
.verify-ribbon .check{
  width:22px; height:22px; border-radius:50%; background:var(--gold-dark); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xs); flex-shrink:0; margin-top:3px;
}
.verify-ribbon strong{
  font-family:'Inter',sans-serif; font-size:var(--fs-sm);
  color:var(--gold-dark); display:block; margin-bottom:2px;
}
.verify-ribbon .src-list{font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.7}
.verify-ribbon .src-list span{display:block}
.src-chip{
  font-family:'Inter',sans-serif; font-size:var(--fs-xs); font-weight:600;
  color:var(--gold-dark); background:var(--gold-tint); padding:4px 10px; border-radius:999px;
}

.layout-2col{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:var(--sp-5); align-items:start; margin-top:var(--sp-3)}
/* Grid items default to min-width:auto, so a wide child (e.g. the .dates strip's
   min-width:215px chips) blows the track out past the viewport instead of letting that
   child's own overflow-x:auto scroll it. Allow the tracks to shrink. */
.layout-2col > *{min-width:0}

/* Article body — one measure, one rhythm */
.prose{font-size:var(--fs-base); color:var(--ink); max-width:var(--measure)}
.prose h2{font-size:var(--fs-xl); margin-top:var(--sp-5); margin-bottom:var(--sp-2)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--fs-lg); margin-top:var(--sp-4); margin-bottom:var(--sp-1)}
.prose p{margin-bottom:var(--sp-2)}
.prose ul, .prose ol{margin:0 0 var(--sp-2) var(--sp-3)}
.prose li{margin-bottom:6px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li::marker{color:var(--ink-faint)}
.prose strong{color:var(--ink); font-weight:650}
/* In-content links: amber + bold, no underline at rest; underline appears on hover.
   Amber colour distinguishes a link from plain bold text (.prose strong is ink). */
.prose a{
  color:var(--gold-dark); font-weight:600; text-decoration:none;
  transition:color .16s ease;
}
.prose a:hover{
  color:var(--primary); text-decoration:underline; text-underline-offset:3px;
}
.prose table{width:100%; border-collapse:collapse; margin:var(--sp-3) 0; font-size:var(--fs-sm)}
.prose th, .prose td{text-align:left; padding:10px 14px; border:1px solid var(--rule)}
.prose th{background:var(--surface-2); font-weight:700}
.prose hr{border:none; border-top:1px solid var(--rule); margin:var(--sp-4) 0}
.prose blockquote{
  border-left:2px solid var(--gold); padding-left:var(--sp-2);
  margin:var(--sp-3) 0; color:var(--ink-soft); font-style:italic;
}

.sidebar-card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:var(--sp-3); margin-bottom:var(--sp-2)}
.sidebar-card h4{margin-bottom:var(--sp-2)}
.sidebar-card .article-link{display:block; padding:10px 0; border-bottom:1px solid var(--rule)}
.sidebar-card .article-link:last-child{border-bottom:none}
.sidebar-card .article-link strong{
  display:block; font-family:'Inter',sans-serif; font-weight:600;
  font-size:var(--fs-sm); color:var(--ink); margin-bottom:2px; letter-spacing:-.008em;
}
.sidebar-card .article-link:hover strong{color:var(--gold-dark)}
.sidebar-card .article-link span{color:var(--ink-soft); font-size:var(--fs-sm)}

.ad-slot{
  background:transparent; border:1px dashed var(--rule); border-radius:var(--radius-sm);
  padding:var(--sp-3); text-align:center; font-size:var(--fs-xs); color:var(--ink-faint);
  letter-spacing:.08em; text-transform:uppercase; margin:var(--sp-4) 0;
}

.ai-row{
  display:flex; gap:var(--sp-1); flex-wrap:wrap; align-items:center;
  margin:var(--sp-4) 0; padding:var(--sp-2) 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.ai-row .lbl{font-size:var(--fs-sm); color:var(--ink-faint); margin-right:var(--sp-1)}
.ai-btn{
  font-family:'Inter',sans-serif; font-size:var(--fs-sm); font-weight:600;
  padding:7px 14px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--rule); color:var(--ink-soft);
  transition:border-color .16s ease, color .16s ease;
}
.ai-btn:hover{border-color:var(--primary); color:var(--ink)}

.step-nav{display:flex; justify-content:space-between; margin:var(--sp-4) 0; gap:var(--sp-2)}
.step-nav a{
  flex:1; border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm); color:var(--ink-faint);
  transition:border-color .16s ease;
}
.step-nav a strong{
  display:block; font-family:'Inter',sans-serif; font-weight:600;
  font-size:var(--fs-base); color:var(--ink); margin-top:2px; letter-spacing:-.008em;
}
.step-nav a.next{text-align:right}
.step-nav a:hover{border-color:var(--primary)}

/* Heading above a hub's card grid (the grid sits outside .prose, so it needs its own). */
.hub-heading{font-size:var(--fs-xl); margin-top:var(--sp-5)}
/* Article dateline under a page-head h1. */
.page-meta{font-size:var(--fs-sm); color:var(--ink-faint); margin-top:var(--sp-1)}
/* Provider-page no-vouching disclaimer (item 10, NEW BATCH). */
.provider-disclaimer{
  margin-top:var(--sp-3); padding-top:var(--sp-2);
  border-top:1px solid var(--rule); color:var(--ink-soft); font-size:var(--fs-sm);
}
.hub-articles{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); margin-top:var(--sp-3)}
.a-card{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--sp-3); transition:border-color .16s ease, transform .16s ease;
}
.a-card:hover{border-color:var(--primary); transform:translateY(-2px)}
.a-card .num{
  font-family:'Inter',sans-serif; font-size:var(--fs-sm); color:var(--gold-dark);
  font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.04em;
}
.a-card h3{font-size:var(--fs-lg); margin-top:6px}
.a-card p{font-size:var(--fs-sm); color:var(--ink-soft); margin-top:var(--sp-1); line-height:1.6}
.a-card .read{
  font-family:'Inter',sans-serif; font-size:var(--fs-sm); font-weight:600;
  color:var(--gold-dark); margin-top:var(--sp-2); display:inline-block;
}

/* Section ledes are held to one line only while one line actually fits. The longest
   ("Every carrier moves through the same sequence …", 115 chars) measures 951px, so it
   needs ~1014px of viewport once the scrollbar and .wrap's 24px gutters are counted.
   Below that the nowrap is lifted — forcing it would drag the page sideways. */
@media(max-width:1039px){
  .sec-head p{white-space:normal; max-width:var(--measure)}
}
/* The hero lede is held to one line only while one line actually fits. Below this the
   nowrap is lifted rather than letting the sentence push the page sideways. */
@media(max-width:900px){
  .hero .promise{white-space:normal; max-width:56ch; margin-inline:auto}
  /* Tighten the header through the tablet range. .topnav only hid at <=640, so between
     there and ~820 the logo + six links + CTA did not fit and .nav-cta pushed the page
     sideways. Compacting buys the range back down to the breakpoint below. */
  .topbar .wrap{gap:var(--sp-2)}
  .topnav a{padding:8px 8px; font-size:13px}
  .logo{font-size:var(--fs-base)}
  .nav-cta{font-size:var(--fs-xs); padding:9px 12px}
}
/* Below this even the compacted link row cannot fit alongside the logo and CTA, so it
   collapses behind the toggle and opens as a panel under the header. Until 2026-07-15 it
   was simply hidden here and these viewports had no primary nav at all. */
@media(max-width:820px){
  .topbar .wrap{position:relative}
  .nav-toggle{display:inline-flex}
  /* The CTA and toggle sit right: .topnav is out of flow once it becomes a panel, so the
     flex:1 spacer it used to provide is gone. */
  .nav-cta{margin-left:auto}
  .topnav{
    display:none;
    position:absolute; top:100%; left:0; right:0; z-index:90;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--rule);
    box-shadow:var(--shadow); padding:0 24px var(--sp-1);
  }
  .topnav[data-open]{display:flex}
  .topnav a{
    padding:14px 0; font-size:var(--fs-base); border-bottom:1px solid var(--rule);
    border-radius:0;
  }
  .topnav a:last-child{border-bottom:none}
}
@media(max-width:960px){
  .personas, .road-grid, .pillar-grid, .tools-grid, .hub-articles{grid-template-columns:1fr 1fr}
  .layout-2col{grid-template-columns:1fr}
  .road-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .personas, .road-grid, .pillar-grid, .tools-grid, .hub-articles{grid-template-columns:1fr}
  /* The link row is already a toggle-driven panel from 820px down (see above) — it must
     NOT be display:none'd here or the panel could never open on a phone. */
  .topbar .wrap{gap:var(--sp-2); height:64px}
  .logo{font-size:var(--fs-base)}
  .nav-cta{font-size:var(--fs-xs); padding:9px 13px}
  /* The signup input's fixed 280px + button + gap exceeds the space inside .wrap's
     padding at this viewport. Let the input flex instead. */
  .signup form{width:100%}
  .signup input{width:auto; flex:1 1 auto; min-width:0}
  .signup .wrap{align-items:flex-start}
  .step-nav{flex-direction:column}
  .step-nav a.next{text-align:left}
  /* Article tables (e.g. the DQF document table) are wider than a phone even with cells
     wrapping, so they dragged the whole page sideways. Make the table its own horizontal
     scroller here; desktop keeps a normal table box. */
  .prose table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .hub-articles{gap:var(--sp-2)}
  .hero::after{display:none}
}
/* Narrow phones (320px — SE / Fold cover screen). Adding the menu toggle put a third item
   in the header row: at 320 the wrap has 257px of content space but logo(154) + CTA(65) +
   toggle(40) + two 16px gaps needs 291. Buy back the ~34px rather than let the toggle push
   the page sideways. */
@media(max-width:400px){
  .topbar .wrap{padding:0 12px; gap:var(--sp-1)}
  .logo{font-size:15px}
  .nav-cta{font-size:11px; padding:8px 10px}
  .nav-toggle{width:36px; height:36px}
  /* The panel is positioned against .wrap, so match its reduced gutter. */
  .topnav{padding:0 12px var(--sp-1)}
}