/* ============================================================================
   E-Bike Dynamics -- fable-3
   Built to match the client sample: blue-gradient hero, colored section
   grounds (navy / espresso / forest / indigo), big uppercase cream headings,
   line art only. No photography anywhere.

   PALETTE SOURCE (authoritative): fully-opaque pixels sampled out of
   ../../assets/logo-lockup-onDark.png (455x138).
       #FFFFFF wordmark   #0F70E6 blue   #EB6B0A orange   #21A161 green
   ========================================================================= */

@font-face {
  font-family: "Public Sans";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/PublicSans-100-900.woff2") format("woff2");
}
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexMono-600.woff2") format("woff2"); }

:root {
  /* ---- brand, exactly as supplied by the client 2026-09-08 ---------------
     Blue #0F70E6  Green #21A161  Orange #EB6B0A  Navy #142B5C  Gray #707070
     These are FILL colors. They are mid-tone, so as SMALL TEXT they fail AA
     on both the dark grounds here and on white -- #0F70E6 is 2.93:1 on a
     panel and #EB6B0A is 3.16:1 on white. Two derived sets below fix that;
     never reach for the raw brand hex to set small type. */
  --blue:   #0f70e6;
  --green:  #21a161;
  --orange: #eb6b0a;
  --navy:   #142b5c;
  --gray:   #707070;

  /* small text ON DARK -- same hues, +0.18 lightness. Worst case 5.14:1. */
  --blue-l:   #5ca1f4;
  /* Hero kicker only. --blue (#0F70E6) measures 1.6-3.0:1 on the hero
     gradient and fails WCAG AA; this clears 5.8:1 at the light end. */
  --kicker:   #dbe4fb;
  --green-l:  #45d98f;
  --orange-l: #f89d59;

  /* small text ON WHITE -- same hues, darkened. 6.28 / 5.02 / 5.25. */
  --blue-d:   #0d5dc0;
  --green-d:  #1a7f4d;
  --orange-d: #b05008;

  /* text on a brand fill. White clears 4.69:1 on blue but only 3.31:1 on
     green, so no green fill carries small white text anywhere on this page. */
  --on-orange: #231202;
  --on-blue:   #ffffff;

  /* grounds, all derived from the logo navy or from a brand hue driven dark */
  --nav-bg:    #0b1730;
  --navy-sec:  #0d1b3a;
  --panel:     #142b5c;
  --panel-2:   #1b3468;
  --panel-3:   #101f45;
  --brown-sec: #492103;   /* deep orange, not brown: same hue as --orange at l=15% */
  --green-sec: #0b3721;   /* deep green, same hue as --green at l=13% */
  --indigo:    #16306b;
  --about-bg:  #0d1b3a;

  --white: #ffffff;
  --cream: #f4f1e6;
  --body:  #c9d6ea;
  --mute:  #93a3c0;

  --line:   rgba(150, 178, 224, 0.18);
  --line-2: rgba(150, 178, 224, 0.34);

  --paper:   #f2f5fa;
  --paper-2: #e4eaf3;
  --ink:     #0f1723;
  --ink-mute:#4a5769;
  --deep:    #142b5c;

  --focus: var(--orange-l);
  --display: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: clamp(1.15rem, 4vw, 4rem);
  --nav-h: 66px;
  --pad: clamp(3.25rem, 7vw, 6rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--navy-sec); color: var(--body);
  font-family: var(--display);
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.08rem);
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.022em; line-height: 1.08; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
sup.tm { font-size: 0.58em; letter-spacing: 0; margin-left: 0.04em; vertical-align: super; }
.nb { white-space: nowrap; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--orange); color: var(--on-orange); padding: 0.8rem 1.2rem; font-weight: 700;
}
.skip:focus { left: 0; }
.wrap { width: min(100% - 2 * var(--gutter), 1240px); margin-inline: auto; }
.body-col { max-width: 66ch; }

/* reveal-on-scroll (progressive; visible without JS) */
/* There is NO reveal-on-scroll animation, and that is deliberate.
   Two variants of one shipped today and both blanked the page: the first set
   .rv to opacity:0 and waited for a script to add .is-in, and the class name
   did not match what the script actually added; the second kept opacity:0 and
   the script did not run at all behind Cloudflare, so everything below the hero
   was invisible while returning a perfectly healthy 200. A fade-in is
   decoration. Decoration that can hide the entire page when one thing goes
   wrong is not worth having, so .rv is now an inert hook that marks the blocks
   a future animation could use, and nothing on this page is ever hidden. */

/* ================================ NAV ================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(17, 26, 47, 0.95); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(150, 178, 224, 0.12);
}
.nav__inner {
  width: min(100% - 2 * var(--gutter), 1240px); margin-inline: auto;
  min-height: var(--nav-h); display: flex; align-items: center; gap: 1.25rem;
}
.nav__brand { display: flex; align-items: center; gap: 0.55rem; margin-right: auto; text-decoration: none; }
.nav__mark { width: 30px; height: 30px; object-fit: cover; object-position: 1% 50%; flex: none; }
.nav__word { color: var(--white); font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; text-transform: uppercase; }
.nav__by {
  color: var(--mute); font-family: var(--mono); font-weight: 600; font-size: 0.66rem;
  letter-spacing: 0.15em; text-transform: uppercase;
}
/* Word and tagline never fit side by side with the full link row, so wide
   screens stack the tagline under the word, beside the mark. */
@media (min-width: 1341px) {
  .nav__brand { display: grid; grid-template-columns: auto auto; column-gap: 0.55rem; align-items: center; }
  .nav__mark { grid-row: 1 / 3; }
  .nav__word, .nav__by { white-space: nowrap; line-height: 1.25; }
}
@media (max-width: 1340px) { .nav__by { display: none; } }
.nav__toggle {
  display: none; font-family: var(--mono); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--body);
  background: none; border: 1px solid var(--line-2); border-radius: 6px;
  padding: 0.55rem 0.85rem; cursor: pointer;
}
.nav__links { display: flex; align-items: center; gap: clamp(0.85rem, 1.2vw, 1.7rem); }
.nav__links a {
  font-family: var(--display); font-weight: 600; font-size: 0.94rem;
  text-decoration: none; color: var(--body); white-space: nowrap;
}
.nav__links a:hover { color: var(--blue-l); }
.nav__links .btn { padding: 0.66rem 1.15rem; font-size: 0.95rem; }
.nav__links .btn--white, .nav__links .btn--white:hover { color: var(--ink); }

@media (max-width: 1240px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute; inset: var(--nav-h) 0 auto 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--nav-bg); border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.25rem;
    max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  }
  .nav__links.is-open { display: flex; }
  .nav__links li { padding: 0.65rem 0; }
  .nav__links .btn { justify-content: center; margin-top: 0.5rem; }
  /* .nav-ready is set by main.js only after the toggle handler is bound. Until
     then the toggle can never open the menu, so the links stay in the bar and
     the taller bar stops sticking, which would otherwise bury anchor targets. */
  html:not(.nav-ready) .nav { position: static; }
  html:not(.nav-ready) .nav__toggle { display: none; }
  html:not(.nav-ready) .nav__inner { flex-wrap: wrap; }
  html:not(.nav-ready) .nav__brand { min-height: var(--nav-h); }
  html:not(.nav-ready) .nav__links { display: flex; position: static; flex-basis: 100%; padding-inline: 0; max-height: none; }
}

/* ============================== BUTTONS ============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--display); font-weight: 700; font-size: 1rem; text-decoration: none;
  padding: 0.92rem 1.5rem; border: 1px solid transparent; border-radius: 4px;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn .arr { transition: transform 0.18s ease; }
.btn:hover .arr { transform: translateX(3px); }
.btn--solid { background: var(--orange); color: var(--on-orange); }
.btn--solid:hover { background: #f88b35; }
.btn--white { background: var(--paper); color: var(--ink); }
.btn--white:hover { background: #fff; }
.btn--outline { border-color: rgba(255, 255, 255, 0.42); color: #fff; }
.btn--outline:hover { background: rgba(255, 255, 255, 0.08); }
.btn--plain { padding-inline: 0.3rem; color: #fff; }
.btn--plain:hover { color: var(--blue-l); }
.btn--block { display: flex; width: 100%; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }

/* =============================== HERO ================================ */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(2.5rem, 4.5vw, 4rem) 0 clamp(3rem, 5vw, 4.5rem);
  background:
    radial-gradient(85% 90% at 96% 6%, rgba(15, 112, 230, 0.55), transparent 60%),
    radial-gradient(55% 60% at 4% 98%, rgba(33, 161, 97, 0.13), transparent 62%),
    linear-gradient(158deg, #1256b4 0%, #124a95 26%, #14356f 62%, #101f47 100%);
}
.hero__trail { position: absolute; inset: 6% 0 auto 44%; width: 56%; height: 26%; pointer-events: none; }
.hero__pip { position: absolute; width: 13px; height: 13px; border-radius: 50%; pointer-events: none; }
.hero__pip--b { background: var(--blue);   left: 50%; top: 12%; }
.hero__pip--o { background: var(--orange); left: 70%; top: 17%; }
.hero__pip--g { background: var(--green);  left: 90%; top: 24%; }
@media (max-width: 900px) { .hero__pip { display: none; } .hero__trail { opacity: 0.5; } }

.hero__in { position: relative; z-index: 1; }
.hero__kicker {
  margin: 0 0 1.5rem; display: flex; align-items: center; gap: 0.85rem;
  font-family: var(--mono); font-weight: 600; font-size: 0.76rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--kicker);
}
.hero__kicker::before { content: ""; width: 1.75rem; height: 3px; border-radius: 2px; background: var(--orange); flex: none; }
.hero__logo { width: clamp(290px, 44vw, 620px); height: auto; }
@media (max-width: 640px) { .hero__logo { width: 100%; } }
.hero__pill {
  margin: 1.85rem 0 0; display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.62rem 1.15rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.09);
  font-family: var(--mono); font-weight: 600; font-size: 0.79rem; letter-spacing: 0.07em; color: #fff;
}
.hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; }
.hero h1 { margin: 1.5rem 0 0; color: var(--white); font-size: clamp(1.9rem, 3.5vw, 2.9rem); line-height: 1.1; }
.hero__row { margin-top: 1.5rem; display: grid; gap: clamp(1.1rem, 2.4vw, 2.25rem); align-items: start; }
@media (min-width: 900px) { .hero__row { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); } }
.hero__lede {
  margin: 0; color: var(--white);
  font-weight: 500; font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.42;
}
.hero__lede a { color: var(--kicker); font-weight: 700; white-space: nowrap; }
.hero__cred { margin: 1.5rem 0 0; max-width: 78ch; color: rgba(255, 255, 255, 0.86); font-size: 0.95rem; }
.hero__fact {
  margin: 0; padding-left: 0.85rem; border-left: 3px solid var(--orange);
  color: rgba(255, 255, 255, 0.82); font-size: 0.88rem; line-height: 1.45;
}
.hero__fact--b { border-left-color: var(--green); }
.hero__fact span {
  display: block; margin-bottom: 0.2rem; color: #fff;
  font-weight: 800; font-size: 0.95rem; letter-spacing: -0.015em;
}
.hero__actions { margin-top: 1.9rem; }

/* ---- the three cards ride in the same viewport as the hero ---- */
.cards__grid { display: grid; gap: clamp(1rem, 1.7vw, 1.5rem); margin-top: clamp(2.4rem, 4vw, 3.1rem); position: relative; z-index: 1; }
@media (min-width: 860px) { .cards__grid { grid-template-columns: repeat(3, 1fr); } }
.card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; text-decoration: none;
  background: #fff; border-radius: 10px; border-top: 14px solid var(--blue);
  padding: clamp(1.4rem, 2.1vw, 1.9rem);
  box-shadow: 0 18px 40px rgba(4, 14, 32, 0.26);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 28px 58px rgba(4, 14, 32, 0.34); }
.card__ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--blue); background: var(--navy); }
.card__k {
  color: var(--blue-d); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
  font-size: clamp(1.32rem, 1.75vw, 1.72rem); text-transform: uppercase;
}
.card__t { margin: -0.3rem 0 0; font-size: clamp(1.02rem, 1.15vw, 1.14rem); line-height: 1.25; color: var(--deep); }
.card__p { margin: 0; color: var(--ink-mute); font-size: 0.98rem; line-height: 1.56; }
.card__go { margin-top: auto; padding-top: 0.7rem; color: var(--deep); font-weight: 700; font-size: 0.98rem; }
.card--b { border-top-color: var(--orange); }
.card--b .card__ico { color: var(--orange); background: #3a1a06; }
.card--b .card__k { color: var(--orange-d); }
.card--c { border-top-color: var(--green); }
.card--c .card__ico { color: var(--green); background: #08281a; }
.card--c .card__k { color: var(--green-d); }

/* ============================= SECTIONS ============================== */
.sec { padding: var(--pad) 0; }
.sec--navy  { background: var(--navy-sec); }
.sec--brown { background: var(--brown-sec); }
.sec--green { background: var(--green-sec); }
.sec--about { background: var(--about-bg); }
/* the muted labels are the lowest-contrast text on the espresso ground:
   5.49:1 as --mute, 11.0:1 in this off-white. */
.sec--brown .shead__l, .sec--brown .split__cap { color: #f0e2d3; }
.panel-indigo { background: var(--indigo); }

.shead { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1.4rem; }
.shead__l { font-family: var(--mono); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); }

.stitle {
  margin: 0 0 1.35rem; max-width: 17ch; color: var(--cream);
  text-transform: uppercase; line-height: 1.05;
  font-size: clamp(2rem, 4.3vw, 3.4rem);
}
.stitle--sm { font-size: clamp(1.6rem, 2.7vw, 2.3rem); max-width: 19ch; }
.slede { max-width: 62ch; font-size: clamp(1.02rem, 1.25vw, 1.14rem); color: var(--body); }
.mini-h {
  margin: clamp(2.25rem, 4vw, 3rem) 0 0.9rem; color: var(--cream);
  text-transform: uppercase; font-size: clamp(1.15rem, 1.6vw, 1.45rem);
}
.mono-eyebrow { font-family: var(--mono); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); margin: 0 0 0.7rem; }
.mono-eyebrow--o { color: var(--orange-l); }
.mono-eyebrow--b { color: var(--blue-l); }
code {
  font-family: var(--mono); font-size: 0.86em; padding: 0.14em 0.45em; border-radius: 3px;
  background: rgba(150, 178, 224, 0.14); color: var(--blue-l); white-space: nowrap;
}
sup { font-size: 0.66em; }
.fn { padding: 0 0.15em; font-weight: 700; text-decoration: none; }
.fn:hover { text-decoration: underline; }

/* ---------------------------- mission band ---------------------------- */
.band { background: var(--panel); border-block: 1px solid var(--line-2); padding-block: clamp(2.25rem, 4vw, 3.25rem); }
.band__in { max-width: 74ch; border-left: 4px solid var(--orange); padding-left: clamp(1.1rem, 2vw, 1.75rem); }
.band__eyebrow { color: var(--green-l); }
.band .stitle { color: var(--white); margin-bottom: 1rem; }
.band .slede { color: rgba(255, 255, 255, 0.9); margin-bottom: 1.6rem; }

/* ------------------------------ stat bar ----------------------------- */
.statbar {
  display: grid; gap: 1px; background: rgba(255, 255, 255, 0.18);
  margin: clamp(1.9rem, 3.5vw, 2.6rem) 0 clamp(1.9rem, 3.5vw, 2.6rem);
  border-radius: 3px; overflow: hidden;
}
/* five cards, so five columns or one: any other count leaves a dead cell. */
@media (min-width: 1040px) { .statbar { grid-template-columns: repeat(5, 1fr); } }
.statbar__c { background: var(--blue); color: var(--on-blue); padding: 1.05rem 1.15rem; font-size: 0.93rem; line-height: 1.45; }
.statbar__c strong { font-size: 1.24rem; font-weight: 800; margin-right: 0.3rem; }

/* ------------------------- indigo wheelie panel ---------------------- */
.wheelie { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .wheelie { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.wheelie__art svg { width: 100%; height: auto; }
.wheelie__cap { margin-top: 1.5rem; color: rgba(255, 255, 255, 0.66); font-size: 0.92rem; max-width: 52ch; }
.wheelie__copy .stitle { margin-bottom: 1rem; }
.wheelie__copy .slede { color: rgba(255, 255, 255, 0.88); margin-bottom: 1.75rem; }

/* ------------------------------ sources ------------------------------ */
.sources { padding-block: clamp(2.25rem, 4vw, 3.25rem); border-top: 1px dashed rgba(150, 178, 224, 0.22); }
.sources__h { font-weight: 700; color: var(--body); margin: 0 0 0.85rem; }
.sources__list { list-style: decimal; padding-left: 1.4rem; color: var(--mute); font-size: 0.88rem; line-height: 1.62; }
.sources__list li { margin-bottom: 0.4rem; }
.sources__back { color: var(--blue-l); text-decoration: none; padding: 0 0.25em; }
.sources__note { margin: 1.15rem 0 0; color: var(--mute); font-size: 0.88rem; }

/* ---------------------------- the 80/20 bar -------------------------- */
.split { display: grid; grid-template-columns: 4fr 1fr; margin: clamp(1.75rem, 3vw, 2.25rem) 0 0.9rem; border-radius: 3px; overflow: hidden; }
.split > * { padding: 1rem 1.25rem; display: grid; gap: 0.1rem; align-content: center; }
.split strong { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 800; line-height: 1.1; }
.split span { font-size: 0.86rem; font-weight: 600; }
.split__a { background: var(--orange); color: var(--on-orange); }
.split__b { background: var(--panel-2); color: #fff; }
.split__cap { max-width: 62ch; color: var(--mute); font-size: 0.95rem; }

/* ------------------------------ TCR cards ---------------------------- */
.tcr { display: grid; gap: clamp(0.9rem, 1.6vw, 1.35rem); margin-top: clamp(2rem, 3.5vw, 2.75rem); }
@media (min-width: 760px) { .tcr { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .tcr { grid-template-columns: repeat(4, 1fr); } }
.tcr__c { background: var(--panel); border-top: 4px solid var(--blue); padding: 1.25rem 1.35rem 1.5rem; }
.tcr__c h3 { font-size: 1.45rem; text-transform: uppercase; margin-bottom: 0.6rem; }
.tcr__c p:last-child { margin: 0; color: var(--body); font-size: 0.95rem; }
.tcr__c--think  h3 { color: var(--blue-l); }
.tcr__c--choose { border-top-color: var(--orange); } .tcr__c--choose h3 { color: var(--orange-l); }
.tcr__c--ride   { border-top-color: var(--green); }  .tcr__c--ride h3   { color: var(--green-l); }
.tcr__c--outcome{ border-top-color: #fff; }          .tcr__c--outcome h3{ color: #fff; }

/* --------------------------- generic panel card ----------------------- */
.ncard { background: var(--panel); border-left: 4px solid var(--blue); padding: clamp(1.2rem, 2vw, 1.65rem); }
.ncard h3 { color: var(--cream); text-transform: uppercase; font-size: clamp(1.05rem, 1.4vw, 1.3rem); margin-bottom: 0.7rem; }
.ncard p { color: var(--body); font-size: 0.96rem; }
.ncard p:last-child { margin-bottom: 0; }
.ncard--green { border-left-color: var(--green); }
.ncard--orange { border-left: 0; border-top: 4px solid var(--orange); }
.ncard--plain { border-left: 0; border: 1px solid var(--line); }
.ncard--brief { border-left: 0; border: 1px solid var(--line-2); }
/* tracks the .mini-h headings it sits beside, at every width */
.ncard--brief h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); }
.ncard--brief .btn {
  text-align: center;
  box-shadow: 0 3px 0 var(--orange-d), 0 8px 18px rgba(0, 0, 0, 0.45);
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.ncard--brief .btn .arr { font-size: 1.3em; line-height: 1; }
.ncard--brief .btn:hover, .ncard--brief .btn:focus-visible {
  background: #f88b35; transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--orange-d), 0 14px 28px rgba(0, 0, 0, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .ncard--brief .btn, .ncard--brief .btn .arr { transition: none; }
  .ncard--brief .btn:hover, .ncard--brief .btn:focus-visible,
  .ncard--brief .btn:hover .arr { transform: none; }
}
.ncard--about { border-left: 0; border: 1px solid var(--line); align-self: start; }
.ncard__cap { margin-top: 1rem; color: var(--mute); font-size: 0.9rem; }
.ncard--mt { margin-block: clamp(1.25rem, 2.4vw, 1.75rem); }
.laws { display: grid; gap: 0.6rem; font-size: 0.96rem; }
.chip {
  display: inline-block; margin: 0 0 0.9rem; padding: 0.34rem 0.7rem; border-radius: 3px;
  font-family: var(--mono); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
}
.chip--green { color: var(--green-l); border: 1px solid rgba(33, 161, 97, 0.5); }

.conseq { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); margin-top: 1.5rem; }
@media (min-width: 900px) { .conseq { grid-template-columns: repeat(2, 1fr); } }
.conseq .ncard--blue { border-left: 0; border-top: 4px solid var(--blue); }
.disclaim { margin-top: 1.1rem; color: var(--mute); font-size: 0.86rem; max-width: 92ch; }

/* --------------------------- parents grid ----------------------------- */
.pgrid__h { margin-top: clamp(2.25rem, 4vw, 3rem); }
.pgrid__h + .pgrid { margin-top: 0; }
.pgrid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); margin-top: clamp(2rem, 3.5vw, 2.75rem); align-items: start; }
@media (min-width: 940px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
.pgrid__col { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); align-content: start; }
.pgrid .mini-h { margin-top: 0.5rem; }

.checks { display: grid; gap: 0.7rem; }
.checks--2 { margin-top: 0.4rem; }
@media (min-width: 720px) { .checks--2 { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; } }
.checks li { position: relative; padding-left: 2rem; color: var(--body); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 19px; height: 19px; border-radius: 50%;
  border: 1.6px solid var(--green);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362d19a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.6 4.6L19 7'/%3E%3C/svg%3E") no-repeat center / 11px 11px;
}

/* ----------------------------- certificate ---------------------------- */
.cert { margin-top: 0.35rem; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #fff; }
.cert img { width: 100%; height: auto; display: block; }

/* ------------------------------- table -------------------------------- */
.tablewrap { margin: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(1.5rem, 2.5vw, 2rem); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.tablewrap__brand { display: none; }
.tablewrap__cap { margin: 0; padding: 0.75rem 1rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.05em; color: var(--mute); border-bottom: 1px solid var(--line); }
.tablewrap__note { margin: 0; padding: 0.75rem 1rem; color: var(--mute); font-size: 0.86rem; border-top: 1px solid var(--line); }
.tablewrap__note p { margin: 0 0 0.35rem; }
.tablewrap__note p:last-child { margin-bottom: 0; }
/* Six columns on wide screens; below 760px each device becomes its own card
   with labeled lines, so 375px needs no horizontal scroller. */
.fcard { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fcard th, .fcard td { text-align: left; vertical-align: top; padding: 0.75rem 0.9rem; font-size: 0.92rem; }
.fcard thead th {
  background: var(--panel-2); color: var(--mute); font-family: var(--mono); font-weight: 600;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.fcard thead th:first-child { width: 22%; }
.fcard thead th:nth-child(2) { width: 24%; }
.fcard tbody tr { background: var(--panel-3); border-top: 1px solid rgba(150, 178, 224, 0.10); }
.fcard tbody th { font-weight: 700; color: var(--cream); }
.fcard tbody td { color: var(--body); }
.fcard td strong { color: var(--cream); font-weight: 800; white-space: nowrap; }
.fcard__cvc { font-weight: 400; color: var(--mute); white-space: nowrap; }
.fcard__ast { color: var(--orange-l); font-weight: 800; text-decoration: none; padding: 0 0.15em 0 0.05em; }
.fcard tbody .fcard__band th {
  font-family: var(--mono); font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.fcard tbody .fcard__band--ok { background: var(--green); }
.fcard tbody .fcard__band--ok th { color: var(--on-orange); }
/* orange, not red: a licensed rider on these is legal */
.fcard tbody .fcard__band--lic { background: var(--orange); }
.fcard tbody .fcard__band--lic th { color: var(--on-orange); }
@media screen and (max-width: 759px) {
  .fcard, .fcard tbody, .fcard tr, .fcard th, .fcard td { display: block; }
  .fcard thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fcard tbody tr { padding: 0.35rem 0 0.6rem; }
  .fcard tbody th { padding: 0.55rem 1rem 0.35rem; font-size: 1rem; }
  .fcard tbody td { position: relative; padding: 0.2rem 1rem 0.2rem 8.5rem; font-size: 0.9rem; }
  /* the label is visible only here; "/ ''" keeps screen readers on the column header instead */
  .fcard td::before {
    content: attr(data-label); content: attr(data-label) / "";
    color: var(--mute); font-family: var(--mono); font-weight: 600; font-size: 0.7rem;
    letter-spacing: 0.1em; text-transform: uppercase; position: absolute; left: 1rem; top: 0.42rem;
  }
}
/* the same card is the printable handout: print it alone, on white paper.
   Every rule is scoped to .page-home: unscoped, they blanked the sheet on the
   three pages that have no #enforcement section. */
@media print {
  .page-home > *:not(main), .page-home main > *:not(#enforcement), .page-home #enforcement .wrap > *:not(.tablewrap) { display: none; }
  .page-home, .page-home .sec, .page-home .wrap, .page-home .tablewrap { margin: 0; padding: 0; width: auto; max-width: none; border: 0; background: #fff; }
  .page-home .tablewrap__brand { display: block; color: #000; font-weight: 800; padding: 0 0 0.35rem; }
  .page-home .tablewrap__cap { color: #000; border-bottom: 0; padding: 0 0 0.5rem; }
  .page-home .tablewrap__note { color: #000; border-top: 0; padding: 0.5rem 0 0; }
  .page-home .fcard, .page-home .fcard tr { break-inside: avoid; }
  .page-home .fcard thead th, .page-home .fcard tbody tr:not(.fcard__band) { background: #fff; }
  .page-home .fcard thead th, .page-home .fcard tbody tr:not(.fcard__band) th, .page-home .fcard tbody td, .page-home .fcard td strong, .page-home .fcard__cvc, .page-home .fcard__ast { color: #000; }
  .page-home .fcard th, .page-home .fcard td { border: 1px solid #000; }
  .page-home .fcard tbody .fcard__band--ok, .page-home .fcard tbody .fcard__band--lic { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------------------------- referral flow --------------------------- */
/* four large buttons at the top of For Law Enforcement */
.lebtns { display: grid; gap: clamp(0.75rem, 1.4vw, 1rem); margin-top: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 600px) { .lebtns { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .lebtns { grid-template-columns: repeat(4, 1fr); } }
.lebtns .btn { padding: 1.15rem 1.25rem; font-size: 1.08rem; text-align: center; }

.refgrid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(1rem, 2vw, 1.5rem); align-items: start; }
@media (min-width: 980px) { .refgrid { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } }
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem 0; margin-top: 1.25rem; }
.flow__s {
  display: flex; align-items: center; border: 1px solid rgba(92, 161, 244, 0.6); background: var(--panel);
  padding: 0.6rem 0.8rem; border-radius: 3px; white-space: nowrap;
  font-weight: 700; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white);
}
.flow__s + .flow__s { position: relative; margin-left: 1.6rem; }
.flow__s + .flow__s::before {
  content: "\2192"; position: absolute; left: -1.3rem; top: 50%; transform: translateY(-50%);
  color: var(--orange-l); font-size: 1.35rem; font-weight: 800;
}
.flow__s--end { border-color: var(--green); color: var(--green-l); }
.flow__cap { margin-top: 1.5rem; color: var(--mute); font-size: 0.94rem; max-width: 68ch; }

/* ---------------------------- closing panel --------------------------- */
.close__in { text-align: center; display: grid; justify-items: center; }
.close .stitle { max-width: 15ch; text-align: center; }
.close .slede { max-width: 52ch; color: rgba(255, 255, 255, 0.88); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
.chips li {
  font-family: var(--mono); font-weight: 600; font-size: clamp(0.76rem, 1.3vw, 0.9rem);
  padding: 0.62rem 1.05rem; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); color: #fff;
}
.close__actions { margin-top: clamp(2rem, 4vw, 3rem); justify-content: center; }
.close__fam { margin: 1.25rem 0 0; font-size: 0.92rem; }
.close__fam a { color: rgba(255, 255, 255, 0.88); }

/* -------------------------------- about ------------------------------- */
.about__grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); align-items: start; }
@media (min-width: 940px) { .about__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.about__grid p { color: var(--body); max-width: 66ch; }
.about__contact { margin-top: 1.25rem; }
.about__mail { font-family: var(--mono); color: var(--blue-l); }
.about__marks { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.5rem; }
.about__marks .csd { width: 92px; }
.about__marks .nsc { width: 118px; }
.ncard--about .btn { margin-top: 0.5rem; }

/* -------------------------------- footer ------------------------------ */
.foot { background: var(--nav-bg); border-top: 1px solid var(--line); padding: 1.9rem 0; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; color: var(--mute); font-size: 0.88rem; }

/* ======================= SUBPAGES: 404, privacy, contact ================ */
/* The shared 1240px wrap left subpage copy in a narrow column with a large
   empty area beside it, because the measure is capped in ch for readability.
   Narrow the CONTAINER instead of the text, so the column is centered and the
   dead space goes. */
.subpage .wrap { width: min(100% - 2 * var(--gutter), 60rem); }
.subpage .legal p, .subpage .legal li, .subpage .slede, .subpage .body-col { max-width: none; }

.subhead {
  background:
    radial-gradient(80% 120% at 92% 0%, rgba(15, 112, 230, 0.38), transparent 62%),
    linear-gradient(160deg, #14356f 0%, #101f47 100%);
  border-bottom: 1px solid var(--line-2);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
}
.subhead .stitle { color: var(--white); margin-bottom: 0.9rem; }
.subhead .slede { color: rgba(255, 255, 255, 0.88); margin: 0; }
.foot__row a { color: var(--blue-l); }
.foot__legal {
  margin: 1.1rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line);
  color: var(--mute); font-size: 0.8rem; line-height: 1.6; max-width: 96ch;
}

/* ---- long-form legal copy ---- */
.legal h2 {
  margin: clamp(1.9rem, 3.5vw, 2.6rem) 0 0.7rem; color: var(--cream);
  text-transform: uppercase; font-size: clamp(1.05rem, 1.4vw, 1.28rem);
}
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { max-width: 72ch; color: var(--body); }
.legal ul { display: grid; gap: 0.5rem; margin: 0 0 1em; }
.legal ul li { position: relative; padding-left: 1.15rem; }
.legal ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-l); }
.legal a:not(.btn) { color: var(--blue-l); }
.legal b, .legal strong { color: var(--white); }
.sub-body__note { color: var(--mute); font-size: 0.9rem; max-width: 72ch; }
.sub-body__src { color: var(--mute); font-size: 0.85rem; }
.sub-body__grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
/* legal copy reads as one continuous document; the two-column split was a
   fable-2 layout and it interleaved unrelated sections down the page. */

/* ---- contact form ---- */
.cf__panel { background: var(--panel); border: 1px solid var(--line); padding: clamp(1.35rem, 2.6vw, 2.25rem); max-width: 62rem; }
.cf__title { color: var(--cream); text-transform: uppercase; font-size: clamp(1.15rem, 1.6vw, 1.45rem); margin-bottom: 0.6rem; }
.cf__lede { color: var(--body); max-width: 62ch; }
.cf__live:empty { display: none; }
.cf__live { color: var(--green-l); font-weight: 600; }
.cf__notice { color: var(--orange-l); font-size: 0.92rem; }
.js .cf__notice { display: none; }
.cf__form { display: grid; gap: 1.15rem; margin-top: 1.35rem; }
.cf__row { display: grid; gap: 1.15rem; }
@media (min-width: 720px) { .cf__row { grid-template-columns: repeat(2, 1fr); } }
.cf__field { display: grid; gap: 0.4rem; }
.cf__field label { font-weight: 600; color: var(--white); font-size: 0.94rem; }
.cf__field input, .cf__field textarea {
  font: inherit; color: var(--white); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-2); border-radius: 4px; padding: 0.72rem 0.85rem; width: 100%;
}
.cf__field input:focus-visible, .cf__field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cf__field textarea { resize: vertical; min-height: 8rem; }
.cf__err { color: var(--orange-l); font-size: 0.88rem; margin: 0; }
.cf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf__status { color: var(--orange-l); margin: 0; }
.cf__actions { margin-top: 0.35rem; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.cf__turnstile:empty { display: none; }
.cf__done { text-align: center; padding: clamp(1.5rem, 4vw, 3rem) 0; }
.cf__tick {
  width: 54px; height: 54px; margin: 0 auto 1rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--green); color: var(--on-orange);
  font-size: 1.7rem; line-height: 1;
}
.cf__done h3 { color: var(--white); margin-bottom: 0.5rem; }
.cf__done p { color: var(--body); margin: 0; }
body.cf-lock { overflow: hidden; }