/* ============================================================
   EmergencyNA — design tokens
   ============================================================ */
/* CACHE-BUSTING NOTE: loaded everywhere as "style.css?v=59" — see the
   matching note at the top of script.js for why that query string matters
   and needs bumping on future changes. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --ink:        #0A0D12;
  --surface:    #151D26;
  --surface-2:  #1C2530;
  --line:       #2A3540;
  --paper:      #F1F3F6;
  --paper-dim:  #98A3AE;
  --signal:     rgb(var(--signal-rgb));
  --signal-dim: #5C1712;
  --steel:      #629BC7;
  --ready:      #35B88C;

  /* v92 — TRAP 5, CLOSED. These were declared TWICE at :root, here and again
     ~1,500 lines down under "country accents". The later block won, so this
     set -- the one sitting with every other brand token, the one that looks
     authoritative -- was dead for the project's whole history and gave wrong
     answers to anyone reading the sheet top-down. The WINNING values are now
     here and the duplicate is deleted. Computed output is identical; a test
     asserts the exact hexes so an edit cannot silently revert to the dead set.
     Not to be confused with --country-us/-ca/-mx (v82), the hero button
     BORDER colours, which are a separate and still-live set. */
  --usa: #4A7FA7;
  --can: #C1443B;
  --mex: #3F9B6F;
  --emergency: var(--signal);  /* alias, kept so per-dimension colour can return */
  /* Was a flagged guess when violet appeared nowhere else in the token set.
     As of v81 violet IS the brand accent — see --signal-rgb at the end of
     this sheet. Kept pointing at --signal so the two can't drift apart. */
  --violet: var(--signal);

  /* Filter-dimension colors — every filterable icon on the site belongs to
     exactly one of these four families, used consistently for its icon,
     marker highlight, and glow. Geography keeps the existing --usa/--can/--mex.
     All four now resolve to the same brand red as --signal — they used to be
     four different hues (red/purple/olive/gold), which read as an unrelated
     rainbow against the rest of the site's disciplined red+neutral language.
     Hazard was already --signal-equivalent; capability/agency/location are
     now aligned to match rather than clashing with it. The variables stay
     separate (not literally merged into one) so a future request to bring
     back per-dimension color-coding is a one-line change, not a rewrite. */
  --dim-hazard:      var(--emergency);
  --dim-hazard-dim:  #4A211B;
  --dim-capability:  var(--signal);
  --dim-capability-dim: var(--signal-dim);
  --dim-agency:      var(--signal);
  --dim-agency-dim:  var(--signal-dim);
  --dim-location:    var(--signal);
  --dim-location-dim: var(--signal-dim);

  /* Flag-color gradients — used only for Location country/region chips */
  --flag-us: linear-gradient(#0A3161, #0A3161) top left / 42% 54% no-repeat,
    linear-gradient(to bottom, #B31942 0 7.7%, #fff 7.7% 15.4%, #B31942 15.4% 23.1%, #fff 23.1% 30.8%, #B31942 30.8% 38.5%, #fff 38.5% 46.2%, #B31942 46.2% 53.8%, #fff 53.8% 61.5%, #B31942 61.5% 69.2%, #fff 69.2% 76.9%, #B31942 76.9% 84.6%, #fff 84.6% 92.3%, #B31942 92.3% 100%) top left / 100% 100% no-repeat;
  --flag-ca: linear-gradient(90deg, #FF0000 0%, #FF0000 25%, #FFFFFF 25%, #FFFFFF 75%, #FF0000 75%, #FF0000 100%);
  --flag-mx: linear-gradient(90deg, #006341 0%, #006341 33%, #FFFFFF 33%, #FFFFFF 66%, #CE1126 66%, #CE1126 100%);

  --font-head: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --max: 1180px;
  --gap: 24px;
  --radius: 4px;
  --shadow: 0 8px 24px rgba(0,0,0,0.28);
}

/* Per-country theming: --signal is reassigned so buttons, tags, dots,
   and section labels shift to the region's color automatically. */
body.theme-usa{ --signal: var(--usa); --signal-dim: #1E3A52; }
body.theme-can{ --signal: var(--can); --signal-dim: #4E1D18; }
body.theme-mex{ --signal: var(--mex); --signal-dim: #12432A; }

body.theme-usa .btn-signal, body.theme-can .btn-signal, body.theme-mex .btn-signal{ color: #0A0D12; }

/* tri-national gradient — used only where the "combined" identity applies */
.tri-bar{
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--usa) 0%, var(--usa) 32%, var(--can) 34%, var(--can) 65%, var(--mex) 67%, var(--mex) 100%);
}
.tri-dot-row{ display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.tri-dot{ display:inline-flex; align-items:center; gap:6px; font-family: var(--font-mono); font-size:0.74rem; color: var(--paper-dim); }
.tri-dot i{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.tri-dot.usa i{ background: var(--usa); }
.tri-dot.can i{ background: var(--can); }
.tri-dot.mex i{ background: var(--mex); }

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }
/* Native <button> elements default to the browser's own black "buttontext"
   system color instead of inheriting from the page — invisible on this
   site's dark background unless every single button class remembers to
   set its own explicit color. .type-pick-btn (the account-type picker on
   signup.html/usa.html/canada.html/mexico.html) had exactly this bug:
   pure black text on a near-black background, effectively invisible. This
   reset fixes that at the source and prevents any future button from
   silently inheriting the same bug. */
button{ font: inherit; color: inherit; }

h1, h2, h3, h4{
  font-family: var(--font-head);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

p{ margin: 0 0 1em; max-width: 62ch; }
p:last-child{ margin-bottom: 0; }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

:focus-visible{
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* ---------- header ---------- */
:root{ --ribbon-h: 50px; }

.brand-block{
  position: relative;
  background: var(--ink);
}

/* Soft two-tone backdrop sitting behind AMERICAN + the E button, visually
   pairing them as one unit at rest — sized to just the E button now, not
   stretched to also cover the region box below it. The region box (North
   etc.) is a deliberately separate element with its own border/background,
   not sharing this card — see .brand-region-box. .top-ribbon is a sibling
   that sits just above .brand-block (not a parent), so the glow reaches up
   over it with a negative offset rather than being nested inside it —
   nesting it would make .brand-block (short) the sticky containing block
   and break .top-ribbon's stickiness past that point. It scrolls away
   naturally with the header once the ribbon detaches and pins to the top
   of the viewport. */
/* Removed per feedback: this whole top area (AMERICAN/E/Emergency
   Response/country card) had three separate background boxes stacked on
   each other, which made it look inconsistent with the rest of the page
   — everything below (the Be an American Hero section) is flat, with only
   the actual interactive cards carrying their own background. This glow
   is disabled (kept as an empty rule rather than deleted outright, in
   case a future request wants a subtler version back) rather than
   removed from the markup, since .brand-block still depends on this
   element existing for its layout. */
.brand-glow{
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, 84%);
  height: 122px;
  z-index: 0;
  pointer-events: none;
}

/* Region box — a separate, self-contained card beneath the E button (not
   sharing .brand-glow's card), so North/Central/South clearly reads as
   its own thing rather than being lumped in with the E toggle above it.
   Plain text/icon inside, same font/weight/case as AMERICAN with the
   compass icon in the signal red to match E's own red border/text. It's a
   real link now, not just a label — tapping it cycles to the next region
   (North -> South -> Central -> North), so hover/active states make that
   discoverable. */
/* Region tag under E — soft filled chip instead of a hard-bordered box, so
   it reads as one smooth surface with everything around it rather than a
   separate boxed-in element. Same idea applied to the country card below
   and the install icon in the nav menu: borders removed site-wide in favor
   of soft fills/backgrounds for a more consistent, less "boxy" look. */
/* Region box — now rendered directly beneath the North/Central/South (or
   world-subregion) label inside .filter-row-location, not under the E
   button. Its own top margin is removed since .location-card-label
   already supplies a clean 20px gap above it; a bottom margin keeps it
   separated from whatever follows (country picker / placeholder card). */
.brand-region-box{
  position: relative;
  z-index: 1;
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 24px;
  padding: 4px 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal);
  text-decoration: none;
  transition: opacity .15s ease;
}

header{
  position: relative;
  z-index: 25; /* above .top-ribbon (20) so the nav-links dropdown never
                 tucks under the sticky bar when open */
}
.share-btn-toast{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.78rem;
  color: var(--paper);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.share-btn-toast.show{ opacity: 1; }

.install-btn-toast{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: var(--paper);
  white-space: normal;
  width: 200px;
  text-align: left;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.install-btn-toast.show{ opacity: 1; }
.install-btn[hidden]{ display: none; }
/* AMERICAN — sticks to the very top of the viewport. Holds three children:
   the home link (always present, left when collapsed), a compact nav-toggle
   (hidden until the big hero E button below has scrolled out of view — see
   the IntersectionObserver in script.js, which adds .ribbon-collapsed to
   body — then centers itself), and a region label (hidden until collapsed,
   then sits on the right). Grid instead of flex so the middle item can stay
   truly centered independent of how wide the two side items are. */
.top-ribbon{
  position: sticky;
  top: 0;
  z-index: 20;
  height: calc(var(--ribbon-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
  padding-right: 16px;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}
.top-ribbon-text{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.729rem, 3.77vw, 2.028rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-block;
  white-space: nowrap;
  padding: 2px 2px;
  cursor: pointer;
  transition: font-size .15s ease, opacity .15s ease;
  color: var(--paper);
}
/* AMÉRICAN's accent mark in the signal red, rest of the word staying
   white — a single "É" glyph can't be half-colored with CSS, so the
   accent is drawn as its own small element instead: a plain "e" (in the
   surrounding white text color) plus a short red diagonal bar positioned
   above it, sized in em so it scales with whatever heading it's used in
   (top-ribbon, hero heading, etc.) without extra rules per context. */
.accent-e{ position: relative; display: inline-block; line-height: 1; }
/* v92 — OPEN THREAD 14, CLOSED. The accent was an <i class="accent-tick">,
   an absolutely-positioned ELEMENT inside the word. `inner_text` breaks at it,
   so "EMERGENT" arrived as "E MERGENT" and "AGENT" as "AGE\nNT". That was
   worked around five times across v83, v85, v89 and twice in v92 before being
   fixed here.

   It is generated content now. `::after` never appears in `inner_text` or
   `textContent`, so the artifact cannot occur -- it is not suppressed, it is
   structurally impossible. The v92 info mark proved the technique at 94 sites
   before it was rolled to the brand marks.

   THE LETTER STAYS REAL TEXT. Only the accent moved. The word is brand
   content and belongs in the DOM; a screen reader still reads "EMERGENT".

   SPECIFICITY NOTE (trap 1). Every selector below gained exactly one
   pseudo-element, so each moved from (0,n,0) to (0,n,1) and the relative
   order is unchanged. Adding a pseudo-element to only SOME of them would have
   silently reordered the cascade -- the trap this sheet has hit four rounds
   running. They were converted together, deliberately. */
.accent-e::after,
.e-mark::after{
  content: "";
  position: absolute;
  top: -0.22em;
  left: 50%;
  width: 0.16em;
  height: 0.42em;
  background: var(--signal);
  border-radius: 1px;
  transform: translateX(-50%) rotate(28deg);
}
/* .e-mark needs the positioning context its parent gave the <i>. */
.e-mark{ position: relative; }
/* AMERICAN sits in the middle column at rest so install/share can flank it
   symmetrically (both outer columns are equal 1fr, keeping it visually
   centered); once collapsed it moves to the now-vacant left column and
   install/share disappear entirely — the compact bar has no room for them
   and their job (install the app / share the page) is still one scroll
   away from the big hero header where a person can find the buttons again
   on the way back up. */
.ribbon-home-group{
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}
.ribbon-home{}
.ribbon-home:hover{ opacity: 0.85; }
body.ribbon-collapsed .ribbon-home-group{
  grid-column: 1;
  justify-self: start;
}
body.ribbon-collapsed .ribbon-home{
  font-size: 1.222rem;
}
/* AMERICAN and NORTH were an arrow-cycle (tap to reveal, tap arrow to
   step one at a time) — replaced with a direct-pick dropdown: tap the
   text itself, get a list of every option, pick one. No separate toggle
   icon — the text is the whole trigger. See .crumb-dropdown below for
   the shared component both controls now use. */
.crumb-dropdown{ position: relative; display: inline-flex; }
.crumb-trigger{
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 2px;
}
.crumb-trigger:hover{ opacity: 0.85; }
.crumb-menu{
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 36px rgba(0,0,0,0.45);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.crumb-dropdown.open .crumb-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Click-catcher. Without this the first click outside the open menu lands on
   whatever the menu happens to be covering — on a desktop viewport the menu
   sits directly over the country picker, so "click Canada" actually followed
   a continent link and navigated off the page. Now the first outside click
   only ever closes the menu, which is how menus are supposed to behave. */
/* Live verdict under the government email field on signup.html. Green here
   carries real meaning (an approval actually granted), consistent with the
   rest of the site reserving green for genuine status and red otherwise. */
.gov-verdict{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--paper-dim);
}
.gov-verdict .gov-verdict-icon{
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--paper-dim);
}
.gov-verdict.ok{ border-color: rgba(106,168,79,0.55); color: var(--paper); }
.gov-verdict.ok .gov-verdict-icon{ background: #6AA84F; }
.gov-verdict.no{ border-color: rgba(200,60,60,0.5); }
.gov-verdict.no .gov-verdict-icon{ background: var(--signal); }
.gov-verdict.pending .gov-verdict-icon{ background: var(--paper-dim); opacity: 0.6; }

.crumb-backdrop{
  position: fixed;
  inset: 0;
  z-index: 29;          /* under .crumb-menu (30), over everything else */
  display: none;
  background: transparent;
}
.crumb-dropdown.open .crumb-backdrop{ display: block; }

/* While a crumb menu is open, drop <header> below .top-ribbon so the big E
   button stops painting through the menu. .crumb-menu lives inside
   .top-ribbon (z-index 20) and is therefore clamped to that layer, while
   header sits at 25 — which is why the E punched a hole in the panel. The
   nav menu and a crumb menu are never open at the same time, so borrowing
   the layer like this is safe and fully reverts on close. */
body.crumb-open header{ z-index: 10; }

/* Desktop: a 6-item vertical column anchored under the ribbon reaches ~265px
   down the page, straight over the hero and the country buttons. There is
   plenty of horizontal room at this width, so lay it out as a single row
   instead — same options, ~44px tall, nothing important covered. */
@media (min-width: 900px){
  .crumb-menu{
    flex-direction: row;
    min-width: 0;
    gap: 2px;
    padding: 5px;
    white-space: nowrap;
    max-width: min(96vw, 1080px);
  }
  .crumb-menu .crumb-option{ padding-left: 16px; padding-right: 16px; }
}
.crumb-option{
  display: block;
  padding: 10px 14px;
  border-radius: calc(var(--radius) - 4px);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-decoration: none;
  text-align: left;
  transition: background .12s ease, color .12s ease;
}
.crumb-option:hover{ background: var(--surface-2); color: var(--paper); }
.crumb-option.current{
  color: var(--signal);
  background: rgba(var(--signal-rgb), 0.08);
  cursor: default;
  pointer-events: none;
}

/* Install / Share now live as rows inside the nav dropdown (#navLinks)
   rather than flanking AMERICAN in the sticky bar — see .nav-menu-item
   below. #installBtn / #shareBtn IDs are preserved on the new elements
   since script.js's initInstallButton()/initShareButton() look them up
   by ID; only their DOM location and markup changed. */
.nav-menu-item{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 260px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--paper-dim);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.nav-menu-item:hover{ color: var(--paper); border-color: var(--signal); }
.nav-menu-item[hidden]{ display: none; }
.nav-menu-item svg{ width: 14px; height: 14px; flex-shrink: 0; }
/* Install item's icon — was a small bordered box copying the header E
   button's shape; switched to the same borderless accent-e treatment used
   everywhere else the E mark appears outside the header itself (AMÉRICAN,
   HERO), so there's exactly one bordered E on the whole site (the real
   header logo) instead of several slightly-different boxed versions. */
.nav-menu-item-icon-e{
  display: inline-flex;
  align-items: center;
  position: relative;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1;
}

/* Compact toggle that lives inside the sticky bar. Hidden (and unclickable)
   until .ribbon-collapsed is set, at which point it takes over the E
   button's job — the big hero E below has scrolled out of view by then —
   and sits centered in the bar. */
.ribbon-toggle{
  width: 38px;
  height: 32px;
  flex-shrink: 0;
  grid-column: 2;
  justify-self: center;
}
.ribbon-toggle .e-mark{ font-size: 1.05rem; }
/* The collapsed sticky bar is a fixed 50px tall — .nav-toggle's new
   larger box (65x55) would overflow it, so this context gets capped to a
   size that actually fits, with a smaller (but still slightly larger
   than before) letter to match. Compound selector (.nav-toggle.ribbon-
   toggle) so this reliably wins over .nav-toggle's own width/height
   regardless of source order — both classes sit on the same button. */
.nav-toggle.ribbon-toggle{ width: 46px; height: 40px; }
/* Extra class-combo specificity here so this reliably beats the generic
   .nav-toggle{ display:flex } rule further down the sheet. */
.top-ribbon .ribbon-toggle{ display: none; }
body.ribbon-collapsed .top-ribbon .ribbon-toggle{
  display: flex;
}

/* Region label — hidden until collapsed, then takes the right-hand slot
   vacated by the toggle (which moves to center). Names which continental
   section of the site the sticky bar belongs to. */
.ribbon-region{
  display: none;
  align-items: center;
  gap: 5px;
  grid-column: 3;
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
}
body.ribbon-collapsed .ribbon-region{
  display: inline-flex;
}

/* anchor targets (#short, #long, #contact, etc.) shouldn't hide under the sticky header */
section[id]{ scroll-margin-top: 88px; }

.nav{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  height: 72px;
  position: relative;
}

.wordmark{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.wordmark .mark{
  color: var(--signal);
}
.wordmark .full{
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}
@media (max-width: 560px){
  .wordmark .full{ display: none; }
}

.nav-links{
  position: absolute;
  top: 72px; left: 0; right: 0;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 22px 28px 30px;
  gap: 16px;
  z-index: 50;
}
.nav-links.open{ display: flex; }
.nav-links a{
  font-size: 0.98rem;
  color: var(--paper-dim);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-links a:hover, .nav-links a.active{
  color: var(--paper);
  border-color: var(--signal);
}
/* Pre-existing specificity bug, fixed here: ".nav-links a" (a plain-link
   list rule from before tiles existed) was beating ".nav-tile" and
   rendering every anchor-based tile (Sign in/Sign up, all subregion
   links) dim gray while button-based tiles stayed bold white. Tiles
   should look identical regardless of whether they're <a> or <button>. */
.nav-links .nav-tile,
.nav-links .nav-tile:hover,
.nav-links .nav-tile.active{
  color: var(--paper);
  border-bottom: none;
}
/* Selected tile is now a filled signal-red block, so its contents must be
   white. The old rule painted them signal-red on signal-red and the tile
   rendered completely blank. */
.nav-links .nav-tile[aria-pressed="true"],
/* .nav-links a.nav-tile sets the resting dim colour and sits later in the
   file at equal specificity, so without the a. prefix here the tile you are
   currently on rendered dim grey on its signal-red fill. The icon inherits
   via currentColor, but the label needs saying explicitly. */
.nav-links a.nav-tile[aria-current="page"],
.nav-links a.nav-tile[aria-current="page"] .nav-tile-label{ color: #fff; }

/* The notch pointed down at the sub-region strip a tile used to open. Those
   strips are gone, so it would now point at nothing. */
.nav-tile[aria-current="page"]::after{ content: none; }
/* .nav-links a{font-size:.98rem} was written for the old text-link menu and
   outranks .nav-tile on the anchor tiles, so Sign in / Sign up rendered at a
   different size from the two button tiles beside them. */
.nav-links a.nav-tile{ font-size: 0.76rem; color: var(--paper-dim); padding: 18px 6px 15px; border-bottom: 0; }
.nav-links a.nav-tile:hover{ color: var(--paper); }
.nav-links a.nav-tile-sub{ font-size: 0.74rem; padding: 15px 8px; }

/* "Data" — a collapsible group inside the nav for the more granular,
   research-heavy pages (country pages, response types, platform, etc.)
   so the top-level nav can stay focused on North/Central/South. */
.nav-data{
  width: 100%;
  max-width: 260px;
  text-align: center;
}
.nav-data summary{
  list-style: none;
  cursor: pointer;
  font-size: 0.98rem;
  color: var(--paper-dim);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-data summary::-webkit-details-marker{ display: none; }
.nav-data summary::after{
  content: '▾';
  display: inline-block;
  margin-left: 6px;
  font-size: 0.75em;
  transition: transform .15s ease;
}
.nav-data[open] summary::after{ transform: rotate(180deg); }
.nav-data summary:hover{ color: var(--paper); }
.nav-data-list{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
}
.nav-data-list a{
  font-size: 0.9rem;
  color: var(--paper-dim);
  padding: 2px 0;
  border-bottom: 1px solid transparent;
}
.nav-data-list a:hover, .nav-data-list a.active{
  color: var(--paper);
  border-color: var(--signal);
}
/* World Regions / More sections no longer live inside <details> dropdowns
   — everything is a permanently-visible tile grid now, with a plain
   (non-interactive) label above each section instead of a clickable
   <summary>. */
/* Nav is now split into two explicit zones — quick actions (sign in/up,
   install, share) on top, world navigation (continents + subregions)
   below — separated by a plain divider line. No text section labels are
   used (that pattern was explicitly rejected earlier in this project);
   the divider plus spacing is what reads as "two sections." */
.nav-section{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav-section-divider{
  width: 100%;
  max-width: 320px;
  height: 1px;
  margin: 2px 0 6px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--signal) 50%, var(--line) 88%, transparent);
  opacity: 0.5;
}
.nav-section-label{
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: 2px 0 10px;
  text-align: center;
}
.nav-tile-grid-actions{ margin-bottom: 0; }

/* Menu tiles, Option A: an edge-to-edge icon strip rather than the previous
   168px text-only blocks. The 1px gaps show the panel colour through, which
   is what gives the strip its tiled look — so the grid's background is the
   line colour and each cell paints over it. Four actions across the top,
   regions in threes below, both sharing one cell style. */
.nav-tile-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  box-sizing: border-box;
  gap: 2px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0;
  background: var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  margin-bottom: 14px;
}
#continentTileGrid{ grid-template-columns: repeat(3, 1fr); }

.nav-tile{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  min-height: 0;
  padding: 18px 6px 15px;
  border: none;
  border-radius: 0;
  background: var(--surface);
  color: var(--paper-dim);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: background .16s ease, color .16s ease;
}
.nav-tile-ic{
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-tile:hover{ background: #1B242F; color: var(--paper); }
.nav-tile:active{ background: #223040; }

/* Selected region: filled in signal red with a pointer notch pointing down
   at the sub-region strip it opens, so the connection is visible rather
   than implied. */
.nav-tile[aria-pressed="true"],
.nav-tile[aria-current="page"]{
  background: var(--signal);
  color: #fff;
  box-shadow: none;
}
.nav-tile[aria-pressed="true"]::after,
.nav-tile[aria-current="page"]::after{
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--surface-2);
}

/* Sub-regions carry no icon — they're a second level, and repeating a
   continent glyph five times would add noise without adding meaning. */
.nav-tile-sub{
  min-height: 0;
  padding: 15px 8px;
  font-size: 0.74rem;
  font-weight: 600;
}
.nav-tile-subgrid{ grid-template-columns: repeat(2, 1fr); }
.nav-tile-subgrid[hidden]{ display: none; }

@media (max-width: 420px){
  .nav-tile-grid{ grid-template-columns: repeat(2, 1fr); }
  #continentTileGrid{ grid-template-columns: repeat(2, 1fr); }
}

.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
}
.btn-signal{
  background: var(--signal);
  color: #14100b;
  box-shadow: 0 4px 14px rgba(var(--signal-rgb), 0.22);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn-signal:hover{ background: #f25a44; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--signal-rgb), 0.3); }
.btn-outline{
  border-color: var(--line);
  color: var(--paper);
}
.btn-outline:hover{ border-color: var(--paper-dim); }

.nav-toggle{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px; height: 55px;
  flex-shrink: 0;
  background: none;
  border: 1.5px solid var(--paper);
  color: var(--paper);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"]{
  color: var(--paper);
  background: var(--ink);
  border-color: var(--paper);
}
.nav-toggle .e-mark{
  position: relative;
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.495rem;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* ---------- status dot ---------- */
.status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--paper-dim);
}
.dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ready);
  box-shadow: 0 0 0 0 rgba(62,168,138,0.5);
  animation: pulse 2.4s ease-out infinite;
}
.dot.orange{ background: var(--signal); box-shadow: 0 0 0 0 rgba(255,106,61,0.5); animation-name: pulse-orange; }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(62,168,138,0.45); }
  70%{ box-shadow: 0 0 0 8px rgba(62,168,138,0); }
  100%{ box-shadow: 0 0 0 0 rgba(62,168,138,0); }
}
@keyframes pulse-orange{
  0%{ box-shadow: 0 0 0 0 rgba(255,106,61,0.45); }
  70%{ box-shadow: 0 0 0 8px rgba(255,106,61,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,106,61,0); }
}

/* ---------- hero ---------- */
.hero{
  border-bottom: 1px solid var(--line);
  padding: 72px 0 0;
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
}
.hero h1, .hero h2{
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  max-width: 14ch;
  margin-bottom: 22px;
}
.hero .lede{
  font-size: 1.08rem;
  color: var(--paper-dim);
  max-width: 46ch;
}
.hero-actions{
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.board{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.board-head{
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--paper-dim);
  display: flex;
  justify-content: space-between;
}
.board-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.board-row:last-child{ border-bottom: none; }
.board-row .name{ font-weight: 500; }

@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
}

/* ---------- section scaffolding ---------- */
section{
  padding: 72px 0;
  border-bottom: 1px solid var(--line);
}
section:last-of-type{ border-bottom: none; }

.section-head{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 44px;
  align-items: end;
}
.section-head h2{
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  max-width: 16ch;
}
.section-head .desc{ color: var(--paper-dim); }

@media (max-width: 720px){
  .section-head{ grid-template-columns: 1fr; }
}

.index{
  font-family: var(--font-mono);
  color: var(--signal);
  font-size: 0.8rem;
  margin-bottom: 10px;
  display: block;
}

/* ---------- service lines ---------- */
.services{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.service{
  background: var(--ink);
  padding: 32px;
}
.service h3{ font-size: 1.25rem; margin-bottom: 14px; }
.service p{ color: var(--paper-dim); }
.service .tag{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 9px;
  display: inline-block;
  margin-bottom: 16px;
}

@media (max-width: 720px){
  .services{ grid-template-columns: 1fr; }
}

.services-3{
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){
  .services-3{ grid-template-columns: 1fr; }
}

/* ---------- dashboard window ---------- */
.dash-window{
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.dash-titlebar{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--paper-dim);
}
.dash-dots{ display: flex; gap: 5px; }
.dash-dots span{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line);
  display: inline-block;
}
.dash-body{ padding: 18px 20px 20px; }
.dash-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 16px;
}
.dash-stats .cell{ background: var(--surface-2); padding: 12px 14px; }
.dash-stats .cell .n{ font-family: var(--font-head); font-size: 1.3rem; color: var(--signal); }
.dash-stats .cell .l{ font-size: 0.7rem; color: var(--paper-dim); margin-top: 3px; }

.rowline{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}
.rowline:last-child{ border-bottom: none; }
.rowline .l{ color: var(--paper-dim); }

/* ---------- audience split ---------- */
.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
}
.split-panel{
  padding: 40px;
  position: relative;
}
.split-panel.gov{ border-right: 1px solid var(--line); border-top: 3px solid var(--steel); }
.split-panel.priv{ border-top: 3px solid var(--signal); }
.split-panel h3{ font-size: 1.4rem; margin-bottom: 12px; }
.split-panel p{ color: var(--paper-dim); margin-bottom: 20px; }
.split-panel ul{
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.split-panel li{
  font-size: 0.92rem;
  padding-left: 18px;
  position: relative;
  color: var(--paper-dim);
}
.split-panel li::before{
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 1px;
  background: var(--paper-dim);
}

@media (max-width: 720px){
  .split{ grid-template-columns: 1fr; }
  .split-panel.gov{ border-right: none; border-bottom: 1px solid var(--line); }
}

/* ---------- process ---------- */
.process{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.step{
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.step .num{
  font-family: var(--font-mono);
  color: var(--paper-dim);
  font-size: 0.8rem;
}
.step h4{ font-size: 1.02rem; margin: 8px 0 8px; }
.step p{ color: var(--paper-dim); font-size: 0.92rem; }

@media (max-width: 900px){
  .process{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .process{ grid-template-columns: 1fr; }
}

/* ---------- network diagram ---------- */
.network{
  border: 1px solid var(--line);
  padding: 40px;
  background: radial-gradient(circle at 50% 50%, rgba(91,143,176,0.06), transparent 60%);
}

/* ---------- stat row ---------- */
.stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
}
.stat{
  padding: 26px 24px;
  border-right: 1px solid var(--line);
}
.stat:last-child{ border-right: none; }
.stat .n{
  font-family: var(--font-head);
  font-size: 2rem;
  color: var(--signal);
}
.stat .l{
  color: var(--paper-dim);
  font-size: 0.84rem;
  margin-top: 6px;
}
@media (max-width: 720px){
  .stats{ grid-template-columns: 1fr 1fr; }
  .stat{ border-bottom: 1px solid var(--line); }
}

/* ---------- app section ---------- */
.phone{
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  padding: 10px;
  width: 260px;
}
.phone-screen{
  background: var(--ink);
  border-radius: 10px;
  padding: 18px;
  min-height: 420px;
}
.phone-screen .row{
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
}
.phone-screen .row:last-child{ border-bottom: none; }

/* ---------- cta band ---------- */
.cta-band{
  background: var(--surface);
  text-align: left;
}
.cta-band .wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-band h2{ font-size: 1.6rem; max-width: 20ch; }
/* "Become an American Hero" band — replaces the old plain "Sign up" CTA on the
   North/Central/South pages. Two tabs (Government / Responder), each its
   own pitch — this is a lead-capture + preview surface, not a signup form
   itself (that's still signup.html, linked to only from the responder side). */
.hero-cta-band .wrap{
  justify-content: center;
  text-align: center;
  flex-direction: column;
  max-width: 640px;
}
.hero-cta-band h2{ max-width: none; margin-top: 6px; }
.hero-cta-title{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.hero-cta-title h2{ margin: 0; }

/* Heading wraps around the tab toggle instead of sitting entirely above
   it: "Be an AMÉRICAN" heads it, the Government / Emergency Responder
   tabs sit in the middle, and "HERO" closes it out underneath in the
   signal color. No filler copy anywhere in this block anymore — just Be
   an / AMÉRICAN / the two user-type tabs / HERO. Plain solid color on
   HERO, no boxed/badged E — that was tried three different ways and never
   landed, so it's gone; the E mark lives in the header and this heading
   is just clean type. */
.hero-cta-heading{ display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hero-cta-lead{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.hero-cta-brandline{
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  color: var(--paper);
  line-height: 1.15;
}
.hero-cta-brandline.hero-word{ color: var(--signal); }
/* The E in HERO used to be its own bordered box (matching the header E
   button's shape) — removed per feedback that it shouldn't look like a
   separate logo chip sitting in the middle of the word. It's just the
   letter now, at the same size as the rest of HERO, reusing the exact
   same .accent-e/.accent-tick treatment as AMÉRICAN's accent: a plain
   letter plus a red accent mark sized to match the surrounding heading
   text, not the smaller scale a boxed treatment needed. */


/* Two "hero option" cards, each a self-contained accordion item: card
   button + its own reveal panel directly beneath it (wrapped together in
   .hero-cta-option), so picking one drops its content in immediately
   below that card — not below both cards, and not in a shared area
   further down the page. Always single-column: a side-by-side layout
   would leave the unselected card awkwardly floating next to open
   content instead of the drop-down reading as directly attached to the
   card that triggered it. */
.hero-cta-toggle{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 6px;
  text-align: left;
}
.hero-cta-option{ display: flex; flex-direction: column; }
.hero-cta-tab{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, background .18s ease;
}
.hero-cta-tab:hover{ border-color: rgba(var(--signal-rgb), 0.45); }
.hero-cta-tab-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--paper-dim);
  transition: color .18s ease, border-color .18s ease;
}
.hero-cta-tab-icon svg{ width: 19px; height: 19px; }
.hero-cta-tab-title{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--paper);
  line-height: 1.3;
}
.hero-cta-tab-desc{
  font-size: 0.82rem;
  color: var(--paper-dim);
  line-height: 1.4;
}
/* HERO used to live as its own separate line below each card's title
   ("Public Sector Emergency Management" ... "HERO"); now it's merged
   directly into the title itself ("Public Sector Hero"), so the title
   reads as one complete phrase instead of two stacked lines. */
.hero-cta-tab.active{
  border-color: var(--signal);
  background: linear-gradient(180deg, rgba(var(--signal-rgb), 0.12), var(--surface) 65%);
}
.hero-cta-tab.active .hero-cta-tab-icon{
  color: var(--signal);
  border-color: var(--signal);
}

/* Animated reveal: grid-template-rows 0fr -> 1fr is the modern no-JS-
   measuring way to transition to "auto" height. The inner wrapper clips
   overflow while collapsed so content doesn't leak out during the
   transition. `inert` (set/removed in script.js) keeps a closed panel's
   buttons and inputs out of tab order and off screen readers. Nested
   inside .hero-cta-option now, directly under its own card, rather than
   sitting in a shared area after both cards. */
.hero-cta-panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
  text-align: left;
}
.hero-cta-panel.open{ grid-template-rows: 1fr; }
.hero-cta-panel-inner{
  overflow: hidden;
  min-height: 0;
}
.hero-cta-panel.open .hero-cta-panel-inner{ padding: 28px 4px 4px; }
.hero-cta-panel p{ color: var(--paper-dim); font-size: 0.95rem; line-height: 1.6; }
.hero-cta-intro{ margin-bottom: 4px; }

/* Sub-section structure inside each open panel — small red eyebrow label
   above each themed block (Why American E / See it in action / Schedule a
   call, etc.) so the revealed content reads as a complete, organized
   experience for that user type rather than one long scroll of paragraphs
   and form fields with no visual structure. */
.hero-cta-section{
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.hero-cta-section:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.hero-cta-section-label{
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 14px;
}
.hero-cta-section-label::before{
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal);
  flex-shrink: 0;
}

.hero-cta-email-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 10px;
}
.hero-cta-email-input{
  flex: 1 1 220px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.92rem;
}
.hero-cta-email-input:focus{ outline: 2px solid var(--signal); outline-offset: 1px; }
.hero-cta-email-btn{ white-space: nowrap; }
.hero-cta-fineprint{ font-size: 0.8rem; opacity: 0.75; margin: 4px 0; }
.hero-cta-todo{ color: var(--signal); opacity: 0.8; font-style: italic; }

.hero-cta-learnmore{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--signal);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 4px 0;
  margin: 4px 0 16px;
  cursor: pointer;
}
.hero-cta-learnmore .chev{ font-size: 0.7em; transition: transform .2s ease; }
.hero-cta-learnmore[aria-expanded="true"] .chev{ transform: rotate(180deg); }
.hero-cta-preview{ margin-bottom: 18px; }
.hero-cta-preview[hidden]{ display: none; }
.hero-cta-preview .sample-badge{ margin-bottom: 10px; display: inline-block; }
.hero-cta-preview .dash-window{ margin-bottom: 10px; }
.hero-cta-slot-grid{ justify-content: flex-start; margin: 0 0 16px; }

.hero-cta-subhead{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: 18px 0 8px;
}
.hero-cta-subhead:first-of-type{ margin-top: 8px; }
.hero-cta-req, .hero-cta-opt{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
  text-transform: uppercase;
  vertical-align: middle;
}
.hero-cta-req{ color: var(--signal); border: 1px solid rgba(var(--signal-rgb), 0.4); }
.hero-cta-opt{ color: var(--paper-dim); border: 1px solid var(--line); opacity: 0.85; }
.hero-cta-schedule-btn{
  display: inline-flex;
  transition: opacity .15s ease;
}
.hero-cta-schedule-btn[aria-disabled="true"]{
  opacity: 0.35;
  pointer-events: none;
}
.hero-cta-location-grid,
.hero-cta-hazard-grid,
.hero-cta-esf-grid,
.hero-cta-size-grid{ justify-content: flex-start; margin: 0 0 14px; }
.hero-cta-esf-blurb, .hero-cta-size-blurb{ min-height: 1.6em; }

/* Selected-state fill for the plain (non-country) chips inside this CTA
   band — hazard, capability, business-size, time-slot. These previously had
   no visual "selected" feedback at all (only the tab buttons and the
   country-tinted location chips did), which made a click feel like it did
   nothing. Scoped to .hero-cta-panel so it never touches the main filter
   system's own dimension-colored active states elsewhere on the page. */
.hero-cta-panel .filter-icon-btn.active:not([data-country]):not([data-country-pick]){
  background: var(--signal);
  border-color: var(--signal);
  color: #0A0D12;
  font-weight: 600;
}

/* ---------- footer ---------- */
footer{
  padding: 56px 0 28px;
}
.foot-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.foot-grid h5{
  font-family: var(--font-mono);
  color: var(--paper-dim);
  font-size: 0.76rem;
  font-weight: 500;
  margin-bottom: 14px;
}
.foot-grid ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.foot-grid a{ color: var(--paper-dim); font-size: 0.9rem; }
.foot-grid a:hover{ color: var(--paper); }
.foot-bottom{
  display: flex;
  justify-content: space-between;
  padding-top: 22px;
  font-size: 0.8rem;
  color: var(--paper-dim);
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 780px){
  .foot-grid{ grid-template-columns: 1fr 1fr; }
}

/* ---------- country accents ---------- */
:root{
  /* --usa/--can/--mex moved to the token block at the top (trap 5). */
}
.page-head.usa{ border-top: 3px solid var(--usa); background: radial-gradient(ellipse at top left, rgba(74,130,180,0.10), transparent 62%); }
.page-head.can{ border-top: 3px solid var(--can); background: radial-gradient(ellipse at top left, rgba(209,75,65,0.10), transparent 62%); }
.page-head.mex{ border-top: 3px solid var(--mex); background: radial-gradient(ellipse at top left, rgba(47,163,107,0.10), transparent 62%); }

.country-map .marker-dot,
.carousel-map .marker-dot{
  fill: var(--signal);
  stroke: var(--ink);
  stroke-width: 1;
  cursor: pointer;
  transition: opacity .15s ease, r .15s ease, filter .2s ease;
}
.country-map .marker-label{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 8px;
  fill: var(--ink);
  pointer-events: none;
}
.carousel-map .marker-icon{
  fill: #0A0D12;
  pointer-events: none;
}
.country-map .partner-marker,
.carousel-map .partner-marker{
  transition: opacity .15s ease;
  cursor: pointer;
}
.country-map .partner-marker.marker-hidden,
.carousel-map .partner-marker.marker-hidden{
  opacity: 0;
  pointer-events: none;
}
.country-map .partner-marker:hover .marker-dot,
.country-map .partner-marker:focus .marker-dot,
.carousel-map .partner-marker:hover .marker-dot,
.carousel-map .partner-marker:focus .marker-dot{
  r: 8.5;
}
.country-map .partner-marker.marker-active .marker-dot{
  fill: var(--paper);
}
.carousel-map .partner-marker.marker-active .marker-dot{
  fill: var(--paper);
  filter: drop-shadow(0 0 3px var(--signal)) drop-shadow(0 0 8px var(--signal));
  animation: marker-glow 1.6s ease-in-out infinite;
}
@keyframes marker-glow{
  0%, 100%{ filter: drop-shadow(0 0 3px var(--signal)) drop-shadow(0 0 7px var(--signal)); }
  50%{ filter: drop-shadow(0 0 5px var(--signal)) drop-shadow(0 0 13px var(--signal)); }
}

.sample-badge{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--paper-dim);
  opacity: 0.65;
  margin-bottom: 10px;
}

/* minimal single-line footnote — no border, no callout box */
.footnote-min{
  font-size: 0.7rem;
  color: var(--paper-dim);
  opacity: 0.55;
  margin-top: 8px;
  text-align: center;
}

/* ---------- response coverage module (country pages) ---------- */
.country-map-wrap{
  border: none;
  padding: 28px 0 12px;
  display: flex;
  justify-content: center;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(var(--signal-rgb), 0.09), transparent 70%);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.country-map{ max-width: 460px; width: 100%; transform-origin: center center; transition: transform .15s ease-out; user-select: none; }
.country-map.no-transition{ transition: none; }

/* ---------- map carousel (homepage) ---------- */
/* v92 — OPEN THREAD 10 IS **NOT** CLOSED. Read this before spending a round
   on it, because the thread's own description sent me the wrong way.

   The thread blames `.map-carousel` / `.map-slide`. **It is not them.**
   Measured: deleting every `.map-carousel` from the DOM at 320px leaves the
   document at 340px, unchanged. Bisecting by hiding elements one at a time
   puts the 20px inside `.filter-system` -> `.filter-row-location` ->
   `.brand-region-box` (the EMERGENCY / RESPONSE line) and its `.pulse-dot`.
   Hiding the dot restores 320. The confusing part, and where I ran out of
   round: `.brand-region-box` measures 244px inside a 284px parent, so it
   fits, and `.wrap` at 340 is a symptom of the widened body rather than a
   cause. Start there, not at the map.

   The change below IS a real fix, just not to that symptom: `100vw` includes
   the vertical scrollbar and the document width does not, so a full-bleed
   built on 100vw overflows by exactly the scrollbar on any platform with
   classic scrollbars. It measured 0 in headless chromium, which is why it did
   not move the number above. Kept because it is correct, not because it
   closed the thread.

   `100vw` INCLUDES THE VERTICAL SCROLLBAR; the document's own width does not.
   So a full-bleed built on 100vw is always wider than the page by exactly the
   scrollbar, which then makes the whole document scroll sideways -- and
   because `.wrap` is width:auto it grows to the widened body, which is why
   `.wrap` looked like an offender too. It was a symptom.

   `--erna-sbw` is measured once in script.js and updated on resize. It is 0
   on overlay-scrollbar platforms (most phones), where 100vw was already
   correct, so this costs nothing there. Fixing it in CSS alone is not
   possible: no CSS value reports the scrollbar's width.

   NOT fixed with `overflow-x: hidden` on html/body deliberately -- that
   creates a scroll container and breaks `position: sticky` on `.top-ribbon`,
   which is load-bearing for the ribbon collapse. */
.map-carousel{
  position: relative;
  width: calc(100vw - var(--erna-sbw, 0px));
  left: 50%;
  right: 50%;
  margin-left: calc(-50vw + (var(--erna-sbw, 0px) / 2));
  margin-right: calc(-50vw + (var(--erna-sbw, 0px) / 2));
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(var(--signal-rgb), 0.09), transparent 70%);
  padding: 20px 0 4px;
}
.map-carousel-track{
  display: flex;
  transition: transform .38s cubic-bezier(.4,0,.2,1);
}
.map-carousel-track.dragging{ transition: none; }
.map-slide{
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.map-zoom-wrap{
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  max-width: 460px;
  width: 100%;
  padding: 0 20px;
}
.map-zoom-wrap.zoomed{ cursor: grab; touch-action: none; }
.map-zoom-wrap:active{ cursor: grabbing; }
.carousel-map{
  width: 100%;
  height: auto;
  display: block;
  transform-origin: center center;
  transition: transform .15s ease-out;
  user-select: none;
}
.carousel-map.no-transition{ transition: none; }

.map-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(16,21,27,0.75);
  border: 1px solid var(--line);
  color: var(--paper);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-nav:hover{ border-color: var(--signal); color: var(--signal); }
.map-nav.prev{ left: 8px; }
.map-nav.next{ right: 8px; }
.map-nav:disabled{ opacity: 0.25; cursor: default; }
.map-nav:disabled:hover{ border-color: var(--line); color: var(--paper); }

.map-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.map-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--paper-dim);
  cursor: pointer;
  padding: 0;
}
.map-dot.active{ background: var(--signal); border-color: var(--signal); }

.map-zoom-controls{
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
}
.map-zoom-controls button{
  width: 30px; height: 30px;
  border-radius: 6px;
  background: rgba(16,21,27,0.75);
  border: 1px solid var(--line);
  color: var(--paper-dim);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.map-zoom-controls button:hover{ border-color: var(--signal); color: var(--signal); }

.map-slide-label{
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-top: 14px;
}
.map-swipe-hint{
  text-align: center;
  font-size: 0.72rem;
  color: var(--paper-dim);
  opacity: 0.6;
  margin-top: 4px;
}
.map-explore-link{
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--signal);
  margin-top: 10px;
  text-decoration: none;
}
.map-explore-link:hover{ text-decoration: underline; text-underline-offset: 3px; }

.hazard-pills{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 20px 0;
}
.hazard-pill{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--paper-dim);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hazard-pill:hover{ border-color: var(--paper-dim); }
.hazard-pill.active{
  background: var(--signal);
  border-color: var(--signal);
  color: #0A0D12;
  font-weight: 600;
}

.capability-chips{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px 0;
}
.capability-chip{
  font-size: 0.84rem;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--paper-dim);
  opacity: 0.4;
  transition: opacity .2s ease, border-color .2s ease, color .2s ease;
}
.capability-chip.on{
  opacity: 1;
  border-color: var(--signal);
  color: var(--paper);
}

/* ---------- capability legend (click to highlight dots + show stats) ---------- */
.map-legend{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 8px;
}
.legend-item{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: none;
  color: var(--paper-dim);
  cursor: pointer;
  transition: opacity .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.legend-item svg{ width: 15px; height: 15px; flex-shrink: 0; fill: currentColor; }
.legend-item:hover{ border-color: var(--paper-dim); color: var(--paper); }
.legend-item.active{
  border-color: var(--signal);
  color: #0A0D12;
  background: var(--signal);
  font-weight: 600;
}
.legend-stat{
  max-width: 480px;
  margin: 0 auto 8px;
  text-align: center;
  min-height: 1.4em;
}
.legend-stat .headline{
  color: var(--paper);
  font-size: 0.92rem;
  font-weight: 600;
}
.legend-stat .sub{
  color: var(--paper-dim);
  font-size: 0.8rem;
  margin-top: 2px;
}
.legend-stat .tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--paper-dim);
  opacity: 0.6;
  margin-top: 4px;
}

/* dot dim / highlight states, driven by legend selection */
.carousel-map .partner-marker .marker-dot{ transition: opacity .2s ease, r .2s ease, filter .2s ease; }
.carousel-map .partner-marker.dot-dim .marker-dot{ opacity: 0.22; }
.carousel-map .partner-marker.dot-highlight .marker-dot{
  r: 4.4;
  filter: drop-shadow(0 0 3px var(--signal)) drop-shadow(0 0 7px var(--signal));
  animation: marker-glow 1.6s ease-in-out infinite;
}

/* hazard-pill icons */
.hazard-pill{ display: inline-flex; align-items: center; gap: 6px; }
.hazard-pill svg{ width: 13px; height: 13px; flex-shrink: 0; fill: currentColor; stroke: currentColor; }

/* ============================================================
   Home page linked filter system — hazard / capability / agency
   Three color-coded, cross-filtering icon rows beneath the map.
   ============================================================ */
.filter-system{
  max-width: 720px;
  margin: 0 auto 0;
}
.filter-row{ margin-bottom: 18px; }
.filter-row:last-child{ margin-bottom: 0; }

/* ---- Country picker: enlarged, centered "card" that carries its own
   subdued heading (.location-card-label) now that the external CAPABILITY
   bar is gone. ---- */
.filter-row-location{
  max-width: 480px;
  margin: 0 auto 26px;
  padding: 8px 20px 28px;
}
/* Placeholder content for the 19 new world regions (Africa/Asia/Europe/
   Oceania/Antarctica subregions) — structure and navigation only, no real
   agency data yet. Deliberately plain/honest ("Coming soon") rather than
   dressing up empty content to look complete. */
.region-placeholder-card{ text-align: center; }
.region-placeholder-badge{
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 16px;
}
.region-placeholder-text{
  color: var(--paper-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto 14px;
}
.region-placeholder-text strong{ color: var(--paper); }
.region-placeholder-sub{
  color: var(--paper-dim);
  font-size: 0.82rem;
  line-height: 1.6;
  max-width: 50ch;
  margin: 0 auto 22px;
  opacity: 0.85;
}
.region-placeholder-cta{ display: inline-block; }
.location-card-label{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.38vw, 1.56rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 20px;
}
.location-card-label:hover{ opacity: 0.85; }
/* NORTH's dropdown reuses .crumb-dropdown/.crumb-trigger/.crumb-menu
   (see the shared component near .top-ribbon-text above) — the old
   region-cycle arrow system that used to live here is gone. */
.location-card-label{ display: inline-flex; }
/* Not scoped to .location-card-label anymore — this dot now lives inside
   .brand-region-box (see the North/Central/South <-> Emergency Response
   position swap), so the rule targets the class directly regardless of
   which element currently contains it. */
.pulse-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Cycles through this region's own country colors (the same colors used
   for the country buttons below) instead of a generic palette — ties the
   blinking dot to "these are the countries in this network." Each region
   gets its own keyframe (different country counts) and a duration scaled
   so every color gets roughly half a second of visibility rather than
   flashing past. Default (no region-central/region-south class) is North. */
.pulse-dot{ animation: location-label-pulse-north 3s ease-in-out infinite; }
body.region-central .pulse-dot{ animation: location-label-pulse-central 7s ease-in-out infinite; }
body.region-south .pulse-dot{ animation: location-label-pulse-south 12s ease-in-out infinite; }

@keyframes location-label-pulse-north{
  0% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  16.67% { background: #4A73B5; box-shadow: 0 0 10px #4A73B5; }
  33.33% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  50% { background: #D8495A; box-shadow: 0 0 10px #D8495A; }
  66.67% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  83.33% { background: #4FA37D; box-shadow: 0 0 10px #4FA37D; }
  100% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
}
@keyframes location-label-pulse-central{
  0% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  7.14% { background: #2A9D8F; box-shadow: 0 0 10px #2A9D8F; }
  14.29% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  21.43% { background: #4472CA; box-shadow: 0 0 10px #4472CA; }
  28.57% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  35.71% { background: #6C5CE7; box-shadow: 0 0 10px #6C5CE7; }
  42.86% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  50% { background: #22A6B3; box-shadow: 0 0 10px #22A6B3; }
  57.14% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  64.29% { background: #D9A441; box-shadow: 0 0 10px #D9A441; }
  71.43% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  78.57% { background: #34B77A; box-shadow: 0 0 10px #34B77A; }
  85.71% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  92.86% { background: #8B5FBF; box-shadow: 0 0 10px #8B5FBF; }
  100% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
}
@keyframes location-label-pulse-south{
  0% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  4.17% { background: #D9A441; box-shadow: 0 0 10px #D9A441; }
  8.33% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  12.5% { background: #4472CA; box-shadow: 0 0 10px #4472CA; }
  16.67% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  20.83% { background: #2FAD71; box-shadow: 0 0 10px #2FAD71; }
  25% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  29.17% { background: #22A6B3; box-shadow: 0 0 10px #22A6B3; }
  33.33% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  37.5% { background: #B5A22F; box-shadow: 0 0 10px #B5A22F; }
  41.67% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  45.83% { background: #A13D63; box-shadow: 0 0 10px #A13D63; }
  50% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  54.17% { background: #3F8F5F; box-shadow: 0 0 10px #3F8F5F; }
  58.33% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  62.5% { background: #8B5FBF; box-shadow: 0 0 10px #8B5FBF; }
  66.67% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  70.83% { background: #D46A9E; box-shadow: 0 0 10px #D46A9E; }
  75% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  79.17% { background: #5B6EE1; box-shadow: 0 0 10px #5B6EE1; }
  83.33% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  87.5% { background: #5AA9E6; box-shadow: 0 0 10px #5AA9E6; }
  91.67% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
  95.83% { background: #6B7FA3; box-shadow: 0 0 10px #6B7FA3; }
  100% { background: #F1F3F6; box-shadow: 0 0 10px #F1F3F6; }
}
.filter-row-location .filter-icons{
  gap: 14px;
}
.filter-row-location .flag-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 18px 22px;
  border-radius: 16px;
  border-width: 1.5px;
}
/* Subdued solid country color at rest — no flag graphic, just a muted tint.
   Full solid color (see .active[data-country-pick] further down) takes over
   once actually selected. */
.filter-row-location .flag-btn[data-country-pick="us"]{ background: #1C3D6E; border-color: #4A73B5; color: #fff; }
.filter-row-location .flag-btn[data-country-pick="ca"]{ background: #A11F2E; border-color: #D8495A; color: #fff; }
.filter-row-location .flag-btn[data-country-pick="mx"]{ background: #1E6B4F; border-color: #4FA37D; color: #fff; }

/* Once a country is selected, append "Ready" in that country's own top
   language(s) right after its name — data-ready holds the localized text so
   no JS is needed, it only renders while .active is present. */
.filter-row-location .flag-btn.active::after{
  content: " · " attr(data-ready);
  font-weight: 400;
  opacity: 0.85;
}
@media (max-width: 520px){
  .filter-row-location .filter-icons{ flex-direction: column; align-items: stretch; }
}
.filter-row-head{
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
}
.dim-swatch{
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.filter-row[data-dim="hazard"] .dim-swatch{ background: var(--dim-hazard); }
.filter-row[data-dim="capability"] .dim-swatch{ background: var(--dim-capability); }
.filter-row[data-dim="agency"] .dim-swatch{ background: var(--dim-agency); }
.filter-row[data-dim="location"] .dim-swatch{ background: var(--dim-location); }
.filter-row-head h4{
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--paper-dim);
  margin: 0;
}
.filter-row-head .dim-help{
  font-size: 0.68rem;
  color: var(--paper-dim);
  opacity: 0.55;
}
/* Small "more info" toggle appended to each filter-row-head, replacing the
   always-visible helper paragraph that used to sit under every section
   heading — that constant instructional text added clutter to a page
   people mostly just want to click through. The explanation still exists,
   just on demand: .filter-row-note is hidden by default and only shown
   once this button is tapped. */
.filter-row-info-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--paper-dim);
  opacity: 0.6;
  cursor: pointer;
  transition: color .15s ease, opacity .15s ease;
}
.filter-row-info-btn svg{ width: 100%; height: 100%; }
.filter-row-info-btn:hover,
.filter-row-info-btn[aria-expanded="true"]{
  color: var(--signal);
  opacity: 1;
}

.filter-icons{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}
.filter-icon-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--paper-dim);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.filter-icon-btn svg{ width: 13px; height: 13px; flex-shrink: 0; fill: currentColor; stroke: currentColor; }
.filter-icon-btn{ position: relative; }
.filter-icon-btn[hidden]{ display: none; }
.esf-tag{
  font-family: var(--font-mono);
  font-size: 0.62rem;
  opacity: 0.6;
  letter-spacing: 0.03em;
}
/* Agency buttons tagged to a specific country get a soft tint of that
   country's color instead of the small corner dot used before — reads at a
   glance without adding a fussy little indicator. Full solid fill still
   takes over once the button is actually selected (further down). */
.filter-row[data-dim="agency"] .filter-icon-btn[data-country="us"]{ background: #1C3D6E; border-color: #4A73B5; color: #fff; }
.filter-row[data-dim="agency"] .filter-icon-btn[data-country="ca"]{ background: #A11F2E; border-color: #D8495A; color: #fff; }
.filter-row[data-dim="agency"] .filter-icon-btn[data-country="mx"]{ background: #1E6B4F; border-color: #4FA37D; color: #fff; }
.filter-icon-btn:hover{ border-color: var(--paper-dim); color: var(--paper); }

/* selected state — filled in the row's dimension color */
.filter-row[data-dim="hazard"] .filter-icon-btn.active{
  background: var(--dim-hazard); border-color: var(--dim-hazard); color: #fff; font-weight: 600;
}
.filter-row[data-dim="capability"] .filter-icon-btn.active{
  background: var(--dim-capability); border-color: var(--dim-capability); color: #fff; font-weight: 600;
}
.filter-row[data-dim="agency"] .filter-icon-btn.active{
  background: var(--dim-agency); border-color: var(--dim-agency); color: #fff; font-weight: 600;
}
.filter-row[data-dim="agency"] .filter-icon-btn.active[data-country="us"]{ background: #1C3D6E; border-color: #4A73B5; color: #fff; }
.filter-row[data-dim="agency"] .filter-icon-btn.active[data-country="ca"]{ background: #A11F2E; border-color: #D8495A; color: #fff; }
.filter-row[data-dim="agency"] .filter-icon-btn.active[data-country="mx"]{ background: #1E6B4F; border-color: #4FA37D; color: #fff; }

/* related state — a selection in one row softly outlines relevant icons in the others */
.filter-icon-btn.related{
  border-color: currentColor;
  color: var(--paper);
  box-shadow: 0 0 0 1px currentColor inset;
}
.filter-row[data-dim="hazard"] .filter-icon-btn.related{ color: var(--dim-hazard); }
.filter-row[data-dim="capability"] .filter-icon-btn.related{ color: var(--dim-capability); }
.filter-row[data-dim="agency"] .filter-icon-btn.related{ color: var(--dim-agency); }

.agency-icons[hidden]{ display: none; }

/* ---------- Location row: country chips + revealable region sub-groups ---------- */
.flag-swatch{
  width: 18px; height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  border: 1.5px solid rgba(255,255,255,0.35);
  background-size: cover;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
}
.flag-swatch.flag-us{ background: var(--flag-us); }
.flag-swatch.flag-ca{ background: var(--flag-ca); }
.flag-swatch.flag-mx{ background: var(--flag-mx); }

/* Active state: a clean solid accent color per country (not a literal flag
   fill across the whole pill) — modern and legible, while the circular
   flag-swatch icon on the button keeps it clearly recognizable. */
.filter-icon-btn.active[data-country-pick="us"],
.filter-icon-btn.active[data-country="us"]{ background: #1C3D6E; border-color: #4A73B5; color: #fff; font-weight: 700; }
.filter-icon-btn.active[data-country-pick="ca"],
.filter-icon-btn.active[data-country="ca"]{ background: #A11F2E; border-color: #D8495A; color: #fff; font-weight: 700; }
.filter-icon-btn.active[data-country-pick="mx"],
.filter-icon-btn.active[data-country="mx"]{ background: #1E6B4F; border-color: #4FA37D; color: #fff; font-weight: 700; }
.filter-icon-btn.active[data-country-pick] .flag-swatch,
.filter-icon-btn.active[data-country] .flag-swatch{ border-color: rgba(255,255,255,0.6); }

.filter-icon-btn.flag-btn.related[data-country-pick="us"], .filter-icon-btn.flag-btn.related[data-country="us"]{ color: #6E93C9; }
.filter-icon-btn.flag-btn.related[data-country-pick="ca"], .filter-icon-btn.flag-btn.related[data-country="ca"]{ color: #E27E77; }
.filter-icon-btn.flag-btn.related[data-country-pick="mx"], .filter-icon-btn.flag-btn.related[data-country="mx"]{ color: #5FBF8F; }

/* Central America / South America — each country now gets its own distinct
   color, matching how United States/Canada/Mexico already work on the North
   page: a subdued tint at rest, solid fill once selected. */
body.region-central [data-country-pick="bz"],
body.region-central [data-country="bz"]{ background: #103E39; border-color: #2A9D8F; color: #fff; }
body.region-central .filter-icon-btn.active[data-country-pick="bz"],
body.region-central .filter-icon-btn.active[data-country="bz"]{ background: #103E39; border-color: #2A9D8F; color: #fff; font-weight: 700; }
body.region-central [data-country-pick="gt"],
body.region-central [data-country="gt"]{ background: #1B2D50; border-color: #4472CA; color: #fff; }
body.region-central .filter-icon-btn.active[data-country-pick="gt"],
body.region-central .filter-icon-btn.active[data-country="gt"]{ background: #1B2D50; border-color: #4472CA; color: #fff; font-weight: 700; }
body.region-central [data-country-pick="sv"],
body.region-central [data-country="sv"]{ background: #2B245C; border-color: #6C5CE7; color: #fff; }
body.region-central .filter-icon-btn.active[data-country-pick="sv"],
body.region-central .filter-icon-btn.active[data-country="sv"]{ background: #2B245C; border-color: #6C5CE7; color: #fff; font-weight: 700; }
body.region-central [data-country-pick="hn"],
body.region-central [data-country="hn"]{ background: #0D4247; border-color: #22A6B3; color: #fff; }
body.region-central .filter-icon-btn.active[data-country-pick="hn"],
body.region-central .filter-icon-btn.active[data-country="hn"]{ background: #0D4247; border-color: #22A6B3; color: #fff; font-weight: 700; }
body.region-central [data-country-pick="ni"],
body.region-central [data-country="ni"]{ background: #56411A; border-color: #D9A441; color: #fff; }
body.region-central .filter-icon-btn.active[data-country-pick="ni"],
body.region-central .filter-icon-btn.active[data-country="ni"]{ background: #56411A; border-color: #D9A441; color: #fff; font-weight: 700; }
body.region-central [data-country-pick="cr"],
body.region-central [data-country="cr"]{ background: #144930; border-color: #34B77A; color: #fff; }
body.region-central .filter-icon-btn.active[data-country-pick="cr"],
body.region-central .filter-icon-btn.active[data-country="cr"]{ background: #144930; border-color: #34B77A; color: #fff; font-weight: 700; }
body.region-central [data-country-pick="pa"],
body.region-central [data-country="pa"]{ background: #37264C; border-color: #8B5FBF; color: #fff; }
body.region-central .filter-icon-btn.active[data-country-pick="pa"],
body.region-central .filter-icon-btn.active[data-country="pa"]{ background: #37264C; border-color: #8B5FBF; color: #fff; font-weight: 700; }

body.region-south [data-country-pick="ve"],
body.region-south [data-country="ve"]{ background: #56411A; border-color: #D9A441; color: #fff; }
body.region-south .filter-icon-btn.active[data-country-pick="ve"],
body.region-south .filter-icon-btn.active[data-country="ve"]{ background: #56411A; border-color: #D9A441; color: #fff; font-weight: 700; }
body.region-south [data-country-pick="co"],
body.region-south [data-country="co"]{ background: #1B2D50; border-color: #4472CA; color: #fff; }
body.region-south .filter-icon-btn.active[data-country-pick="co"],
body.region-south .filter-icon-btn.active[data-country="co"]{ background: #1B2D50; border-color: #4472CA; color: #fff; font-weight: 700; }
body.region-south [data-country-pick="gy"],
body.region-south [data-country="gy"]{ background: #12452D; border-color: #2FAD71; color: #fff; }
body.region-south .filter-icon-btn.active[data-country-pick="gy"],
body.region-south .filter-icon-btn.active[data-country="gy"]{ background: #12452D; border-color: #2FAD71; color: #fff; font-weight: 700; }
body.region-south [data-country-pick="sr"],
body.region-south [data-country="sr"]{ background: #0D4247; border-color: #22A6B3; color: #fff; }
body.region-south .filter-icon-btn.active[data-country-pick="sr"],
body.region-south .filter-icon-btn.active[data-country="sr"]{ background: #0D4247; border-color: #22A6B3; color: #fff; font-weight: 700; }
body.region-south [data-country-pick="ec"],
body.region-south [data-country="ec"]{ background: #484012; border-color: #B5A22F; color: #fff; }
body.region-south .filter-icon-btn.active[data-country-pick="ec"],
body.region-south .filter-icon-btn.active[data-country="ec"]{ background: #484012; border-color: #B5A22F; color: #fff; font-weight: 700; }
body.region-south [data-country-pick="pe"],
body.region-south [data-country="pe"]{ background: #401827; border-color: #A13D63; color: #fff; }
body.region-south .filter-icon-btn.active[data-country-pick="pe"],
body.region-south .filter-icon-btn.active[data-country="pe"]{ background: #401827; border-color: #A13D63; color: #fff; font-weight: 700; }
body.region-south [data-country-pick="br"],
body.region-south [data-country="br"]{ background: #193926; border-color: #3F8F5F; color: #fff; }
body.region-south .filter-icon-btn.active[data-country-pick="br"],
body.region-south .filter-icon-btn.active[data-country="br"]{ background: #193926; border-color: #3F8F5F; color: #fff; font-weight: 700; }
body.region-south [data-country-pick="bo"],
body.region-south [data-country="bo"]{ background: #37264C; border-color: #8B5FBF; color: #fff; }
body.region-south .filter-icon-btn.active[data-country-pick="bo"],
body.region-south .filter-icon-btn.active[data-country="bo"]{ background: #37264C; border-color: #8B5FBF; color: #fff; font-weight: 700; }
body.region-south [data-country-pick="py"],
body.region-south [data-country="py"]{ background: #542A3F; border-color: #D46A9E; color: #fff; }
body.region-south .filter-icon-btn.active[data-country-pick="py"],
body.region-south .filter-icon-btn.active[data-country="py"]{ background: #542A3F; border-color: #D46A9E; color: #fff; font-weight: 700; }
body.region-south [data-country-pick="cl"],
body.region-south [data-country="cl"]{ background: #242C5A; border-color: #5B6EE1; color: #fff; }
body.region-south .filter-icon-btn.active[data-country-pick="cl"],
body.region-south .filter-icon-btn.active[data-country="cl"]{ background: #242C5A; border-color: #5B6EE1; color: #fff; font-weight: 700; }
body.region-south [data-country-pick="ar"],
body.region-south [data-country="ar"]{ background: #24435C; border-color: #5AA9E6; color: #fff; }
body.region-south .filter-icon-btn.active[data-country-pick="ar"],
body.region-south .filter-icon-btn.active[data-country="ar"]{ background: #24435C; border-color: #5AA9E6; color: #fff; font-weight: 700; }
body.region-south [data-country-pick="uy"],
body.region-south [data-country="uy"]{ background: #2A3241; border-color: #6B7FA3; color: #fff; }
body.region-south .filter-icon-btn.active[data-country-pick="uy"],
body.region-south .filter-icon-btn.active[data-country="uy"]{ background: #2A3241; border-color: #6B7FA3; color: #fff; font-weight: 700; }

/* Every country button is full solid color all the time now (not just
   once selected) — selection is communicated by this border/ring plus the
   " · Ready" text (.flag-btn.active::after below), not by a color
   intensity difference. Placed after every per-country rule above so it
   wins the cascade (equal specificity, source order decides) regardless
   of which country's own active rule already set a border-color. */
.filter-row-location .flag-btn.active,
.filter-row[data-dim="agency"] .filter-icon-btn.active[data-country],
.filter-icon-btn.active[data-country-pick],
.filter-icon-btn.active[data-country]{
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
}

.region-group{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.region-group[hidden]{ display: none; }
.region-group-label{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--paper-dim);
  opacity: 0.75;
  margin-bottom: 8px;
}
.region-group-label .filter-row-info-btn{ opacity: 0.75; width: 13px; height: 13px; }
.region-group-label-detail{
  display: block;
  width: 100%;
  max-width: 46ch;
  margin: 4px auto 0;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0.01em;
}
.region-group-label-detail[hidden]{ display: none; }
/* Persistent "why isn't the next section here yet" hint — sits where a
   gated row would go, visible exactly when that row is hidden. Every
   gated row genuinely requires the prior selection (this is a mandatory
   sequence, not a soft suggestion), so this makes the requirement visible
   up front instead of leaving an unexplained gap, which was the actual
   confusion: the old explanation lived inside the row that wasn't
   showing, so there was nothing to read at the moment it mattered.
   Deliberately quieter than an active row — dashed border, muted color,
   no swatch dot — so it reads as "not yet available" rather than another
   thing competing for attention. */
.filter-row-locked{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  max-width: 46ch;
  margin: 0 auto 18px;
  padding: 12px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--paper-dim);
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.8;
}
.filter-row-locked[hidden]{ display: none; }
.filter-row-locked-icon{
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--paper-dim);
  opacity: 0.8;
}
.filter-row-note{
  text-align: center;
  font-size: 0.78rem;
  color: var(--paper-dim);
  max-width: 46ch;
  margin: 0 auto 14px;
  line-height: 1.4;
}
.agency-region-note{
  text-align: center;
  font-size: 0.76rem;
  color: var(--dim-agency);
  max-width: 46ch;
  margin: 10px auto 0;
  line-height: 1.4;
}
.agency-region-note[hidden]{ display: none; }
/* Compact badge instead of a permanently-full paragraph — matches the
   filter-row info-toggle pattern used elsewhere (small icon reveals detail
   on demand instead of always showing a wall of text). The country
   buttons also get a visible frame while this mode is active (see
   .filter-row-location:has(...) below) so "all countries selected" reads
   as one bordered group, not just three separately-colored buttons. */
.na-mode-banner{
  max-width: 62ch;
  margin: 4px auto 22px;
  text-align: center;
}
.na-mode-banner[hidden]{ display: none; }
.na-mode-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--signal);
  background: linear-gradient(90deg, rgba(80,144,196,0.12), rgba(var(--signal-rgb), 0.1), rgba(47,173,113,0.12));
  font-size: 0.86rem;
}
.na-mode-badge strong{ color: var(--signal); }
.na-mode-info-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  color: var(--paper-dim);
  opacity: 0.7;
  cursor: pointer;
  transition: color .15s ease, opacity .15s ease;
}
.na-mode-info-btn svg{ width: 100%; height: 100%; }
.na-mode-info-btn:hover,
.na-mode-info-btn[aria-expanded="true"]{ color: var(--signal); opacity: 1; }
.na-mode-detail{
  margin: 10px auto 0;
  max-width: 56ch;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--paper-dim);
  padding: 0 8px;
}
.filter-row-location:has(+ .na-mode-banner:not([hidden])) .filter-icons{
  border: 2px solid var(--signal);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 0 0 4px rgba(var(--signal-rgb), 0.08);
}
.county-group{
  margin-top: 10px;
  padding: 10px 0 0 16px;
  border-left: 2px solid var(--dim-location-dim);
  margin-left: 6px;
}
.county-group[hidden]{ display: none; }
.county-group-label{
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--paper-dim);
  opacity: 0.65;
  margin-bottom: 7px;
}
.county-group .filter-icon-btn{ font-size: 0.72rem; padding: 5px 10px; }

.filter-clear-row{
  display: flex;
  justify-content: center;
  margin-top: 4px;
  min-height: 26px;
}
.filter-clear-btn{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--paper-dim);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px 8px;
}
.filter-clear-btn:hover{ color: var(--paper); }

/* ---------- stat readout: one focused card, only what was asked for ---------- */
.stat-readout{
  max-width: 480px;
  margin: 18px auto 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.stat-readout:empty{ margin: 0; }
/* Impact Calculator CTA — sits directly under the results box and shows
   itself the moment there's an actual result to size a calculation
   against, instead of being a permanent nav link disconnected from
   whether the user has selected anything yet. */
.map-calculator-cta{
  display: block;
  max-width: 480px;
  margin: 14px auto 0;
  padding: 14px 20px;
  text-align: center;
  border: 1px solid var(--signal);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(var(--signal-rgb), 0.1), rgba(var(--signal-rgb), 0.02));
  color: var(--paper);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.map-calculator-cta:hover{ background: rgba(var(--signal-rgb), 0.16); transform: translateY(-1px); }
.map-calculator-cta[hidden]{ display: none; }
.stat-readout-empty{
  text-align: center;
  font-size: 0.82rem;
  color: var(--paper-dim);
  opacity: 0.7;
  max-width: 40ch;
  margin: 0 auto;
}
.stat-card{
  width: 100%;
  border: 1px solid var(--line);
  border-left-width: 3px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-align: left;
}
.stat-card.dim-hazard{ border-left-color: var(--dim-hazard); }
.stat-card.dim-capability{ border-left-color: var(--dim-capability); }
.stat-card.dim-agency{ border-left-color: var(--dim-agency); }
.stat-card.dim-location{ border-left-color: var(--dim-location); }
.stat-card .stat-headline{ color: var(--paper); font-size: 0.94rem; font-weight: 600; }
.stat-card .stat-item{ color: var(--paper); font-size: 0.86rem; line-height: 1.5; }
.stat-card .stat-item b{ font-weight: 600; }
.stat-card .stat-item + .stat-item{ margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.stat-readout .stat-card + .stat-card{ margin-top: 10px; }
.stat-card .stat-sub{ color: var(--paper-dim); font-size: 0.8rem; margin-top: 3px; }
.stat-card .stat-related{
  font-size: 0.74rem;
  color: var(--paper-dim);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.stat-card .stat-related b{ color: var(--paper); font-weight: 500; }
.stat-card .stat-tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--paper-dim);
  opacity: 0.6;
  margin-top: 8px;
}

/* ---------- dimension-colored marker highlight states ---------- */
.carousel-map .partner-marker{ pointer-events: none; cursor: default; }
/* Hidden until a filter actually matches — the map stays empty by default
   and only populates with the matching resources, not a static field of dots. */
.carousel-map .marker-dot{ fill: var(--paper-dim); opacity: 0; transition: opacity .2s ease, r .2s ease, filter .2s ease; }
.carousel-map .marker-icon{ opacity: 0; fill: #0A0D12; transition: opacity .2s ease; pointer-events: none; }
.carousel-map .partner-marker.dot-dim .marker-dot{ opacity: 0; }
.carousel-map .partner-marker.dot-dim .marker-label{ opacity: 0; }
.carousel-map .partner-marker.dot-related .marker-dot{ opacity: 0; }
.carousel-map .partner-marker.dot-highlight-hazard .marker-dot{
  fill: var(--dim-hazard); opacity: 1; r: 6;
  filter: drop-shadow(0 0 3px var(--dim-hazard)) drop-shadow(0 0 7px var(--dim-hazard));
  animation: marker-glow-hazard 1.6s ease-in-out infinite;
}
.carousel-map .partner-marker.dot-highlight-capability .marker-dot{
  fill: var(--dim-capability); opacity: 1; r: 6;
  filter: drop-shadow(0 0 3px var(--dim-capability)) drop-shadow(0 0 7px var(--dim-capability));
  animation: marker-glow-capability 1.6s ease-in-out infinite;
}
.carousel-map .partner-marker.dot-highlight-agency .marker-dot{
  fill: var(--dim-agency); opacity: 1; r: 6;
  filter: drop-shadow(0 0 3px var(--dim-agency)) drop-shadow(0 0 7px var(--dim-agency));
  animation: marker-glow-agency 1.6s ease-in-out infinite;
}
.carousel-map .partner-marker.dot-highlight-hazard .marker-icon,
.carousel-map .partner-marker.dot-highlight-capability .marker-icon,
.carousel-map .partner-marker.dot-highlight-agency .marker-icon{ opacity: 1; }
@keyframes marker-glow-hazard{
  0%, 100%{ filter: drop-shadow(0 0 3px var(--dim-hazard)) drop-shadow(0 0 6px var(--dim-hazard)); }
  50%{ filter: drop-shadow(0 0 5px var(--dim-hazard)) drop-shadow(0 0 12px var(--dim-hazard)); }
}
@keyframes marker-glow-capability{
  0%, 100%{ filter: drop-shadow(0 0 3px var(--dim-capability)) drop-shadow(0 0 6px var(--dim-capability)); }
  50%{ filter: drop-shadow(0 0 5px var(--dim-capability)) drop-shadow(0 0 12px var(--dim-capability)); }
}
@keyframes marker-glow-agency{
  0%, 100%{ filter: drop-shadow(0 0 3px var(--dim-agency)) drop-shadow(0 0 6px var(--dim-agency)); }
  50%{ filter: drop-shadow(0 0 5px var(--dim-agency)) drop-shadow(0 0 12px var(--dim-agency)); }
}

@media (max-width: 640px){
  .filter-row-head h4{ font-size: 0.68rem; }
  .filter-icon-btn{ font-size: 0.74rem; padding: 6px 11px; }
}

.coverage-info{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 6px;
  text-align: center;
}
.coverage-info-text{
  color: var(--paper-dim);
  font-size: 0.92rem;
  margin: 0 auto;
  max-width: 62ch;
}
.coverage-info .note{ margin-top: 12px; margin-left: auto; margin-right: auto; max-width: 62ch; text-align: center; }

/* ---------- emergency category / services offered tiles ---------- */
.hazard-card-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 780px){
  .hazard-card-grid{ grid-template-columns: 1fr; }
}
.hazard-card{ background: var(--ink); transition: background .15s ease; }
.hazard-card:hover{ background: var(--surface); }
.emcat-head{
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--line);
}
.emcat-eyebrow{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 7px;
}
.emcat-head h4{ font-size: 1.15rem; margin-bottom: 6px; }
.emcat-meta{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--paper-dim);
}
.emcat-services{ padding: 18px 24px 24px; }
.services-eyebrow{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-dim);
  display: block;
  margin-bottom: 12px;
}
.service-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.service-list li{
  font-size: 0.88rem;
  color: var(--paper-dim);
  padding-left: 16px;
  position: relative;
}
.service-list li::before{
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 1px;
  background: var(--signal);
}

/* the dynamic version rendered under the hazard-toggle module */
.hazard-services{ margin-top: 20px; text-align: left; }
.hazard-services .hazard-card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ---------- impact calculator CTA teaser ---------- */
.calc-teaser{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  text-align: left;
}
.calc-teaser p{ margin: 0; color: var(--paper-dim); font-size: 0.9rem; max-width: 48ch; }
.calc-teaser strong{ color: var(--paper); }

/* ---------- impact calculator page ---------- */
.calc-master{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  padding: 32px;
  box-shadow: var(--shadow);
  text-align: center;
}
.calc-master-label{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--paper-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.calc-master-num{
  font-family: var(--font-head);
  font-size: clamp(2.6rem, 8vw, 4.2rem);
  color: var(--signal);
  margin: 8px 0 20px;
  line-height: 1;
}
.calc-master-num span{ font-size: 0.4em; color: var(--paper-dim); font-family: var(--font-body); }

input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  outline: none;
  margin: 10px 0 4px;
  padding: 0;
  border: none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--signal);
  cursor: pointer;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--signal);
}
input[type="range"]::-moz-range-thumb{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--signal);
  cursor: pointer;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--signal);
}
.calc-master-scale{
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--paper-dim);
  opacity: 0.6;
}

.calc-results-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 36px;
}
@media (max-width: 780px){
  .calc-results-grid{ grid-template-columns: 1fr; }
}
.calc-card{ background: var(--ink); padding: 28px 26px; transition: background .15s ease; }
.calc-card:hover{ background: var(--surface); }
.calc-card-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.calc-card-head h3{ font-size: 1.1rem; }
.calc-standard-tag{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--ready);
  border: 1px solid var(--ready);
  border-radius: var(--radius);
  padding: 3px 8px;
  white-space: nowrap;
}
.calc-outputs{
  display: flex;
  gap: 22px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.calc-output .n{ font-family: var(--font-head); font-size: 1.7rem; color: var(--signal); }
.calc-output .l{ font-size: 0.74rem; color: var(--paper-dim); margin-top: 2px; }

/* ---------- home page mini estimator ---------- */
.mini-estimate-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px;
}
.mini-estimate-cell{ text-align: center; }
.mini-estimate-cell .n{ font-family: var(--font-head); font-size: 1.5rem; color: var(--signal); }
.mini-estimate-cell .l{ font-size: 0.7rem; color: var(--paper-dim); margin-top: 2px; }
@media (min-width: 560px){
  .mini-estimate-grid{ grid-template-columns: repeat(3, 1fr); }
}
/* Responder capacity-input grid — same 2-column card layout as the
   government path's read-only .mini-estimate-grid above, but these are
   real number inputs (what a provider has to offer) rather than computed
   output, so each cell needs its own label and input field instead of a
   number + caption. */
.responder-input-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px;
}
.responder-input{
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.responder-input span{ font-size: 0.7rem; color: var(--paper-dim); }
.responder-input input{
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--paper);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
  padding: 8px 10px;
  width: 100%;
}
.responder-input input:focus-visible{ outline: 2px solid var(--signal); outline-offset: 1px; }
@media (min-width: 560px){
  .responder-input-grid{ grid-template-columns: repeat(3, 1fr); }
}
.calc-source{
  font-size: 0.78rem;
  color: var(--paper-dim);
  border-left: 2px solid var(--ready);
  padding-left: 10px;
  margin-bottom: 18px;
}

/* ---- Estimate gate: the cost (government) / earnings (responder) teaser
   that follows a sizing estimate on both the home page's quick estimator
   and the full calculator. The figure is always shown blurred behind a
   lock — never unblurred client-side — because there's no real pricing
   logic behind it yet (see the footnote copy); signing up is genuinely
   the next real step, not a fake gate around a number we could just show. ---- */
.estimate-gate{
  margin-top: 24px;
  border: 1px solid var(--signal-dim);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(var(--signal-rgb), 0.07), transparent 60%), var(--surface);
  padding: 22px 20px 24px;
  text-align: center;
}
.estimate-gate-toggle{
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  margin-bottom: 18px;
}
.estimate-gate-tab{
  border: none;
  background: transparent;
  color: var(--paper-dim);
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.estimate-gate-tab:hover{ color: var(--paper); }
.estimate-gate-tab.active{
  background: var(--signal);
  color: #fff;
}
.estimate-gate-label{
  font-size: 0.82rem;
  color: var(--paper-dim);
  margin-bottom: 6px;
}
.estimate-gate-figure-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.estimate-gate-figure{
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--paper);
  filter: blur(7px);
  user-select: none;
  pointer-events: none;
}
.estimate-gate-lockover{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--signal);
}
.estimate-gate-lockover svg{ width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(10,13,18,0.9)); }
.estimate-gate-sub{
  color: var(--paper-dim);
  font-size: 0.88rem;
  max-width: 40ch;
  margin: 0 auto 16px;
  line-height: 1.5;
}
.estimate-gate .footnote-min{ margin-top: 14px; margin-bottom: 0; }

.calc-assumption{ margin-top: 14px; }
.calc-assumption-label{
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--paper-dim);
  margin-bottom: 2px;
}
.calc-assumption-label b{ color: var(--paper); font-weight: 600; }
.calc-assumption-tag{
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--paper-dim);
  opacity: 0.7;
}
.calc-radio-row{ display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.calc-radio-row label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 10px;
  cursor: pointer;
  margin-bottom: 0;
}
.calc-radio-row input{ width: auto; accent-color: var(--signal); }
.calc-radio-row label:has(input:checked){ border-color: var(--signal); color: var(--paper); }

/* ---------- install / add to home screen ---------- */
.install-card{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.install-card h3{ font-size: 1.3rem; margin-bottom: 10px; }
.install-card p{ color: var(--paper-dim); }
.install-steps{ display: grid; gap: 14px; }
.install-steps .item{
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.install-steps .item span.plat{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--signal);
  display: block;
  margin-bottom: 4px;
}
.install-steps .item p{ font-size: 0.88rem; color: var(--paper-dim); margin: 0; }
@media (max-width: 780px){
  .install-card{ grid-template-columns: 1fr; }
}

.flag-tag{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: var(--radius);
  display: inline-block;
  border: 1px solid var(--line);
}
.flag-tag.usa{ color: var(--usa); border-color: var(--usa); }
.flag-tag.can{ color: var(--can); border-color: var(--can); }
.flag-tag.mex{ color: var(--mex); border-color: var(--mex); }

/* ---------- tri-country summary ---------- */
.countries{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.country-card{
  background: var(--ink);
  padding: 28px;
  border-top: 3px solid var(--line);
}
.country-card.usa{ border-top-color: var(--usa); }
.country-card.can{ border-top-color: var(--can); }
.country-card.mex{ border-top-color: var(--mex); }
.country-card h3{ font-size: 1.15rem; margin-bottom: 8px; }
.country-card .agency{
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--paper-dim);
  display: block;
  margin-bottom: 14px;
}
.country-card p{ color: var(--paper-dim); font-size: 0.9rem; margin-bottom: 18px; }

@media (max-width: 860px){
  .countries{ grid-template-columns: 1fr; }
}

/* ---------- response type grid ---------- */
.type-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.type-col{ background: var(--ink); padding: 32px; }
.type-col-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.type-col-head h3{ font-size: 1.2rem; }
.type-col-head span{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--paper-dim);
}
.type-item{
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.type-item:last-child{ border-bottom: none; padding-bottom: 0; }
.type-item:first-child{ padding-top: 0; }
.type-item h4{ font-size: 1rem; margin-bottom: 6px; }
.type-item p{ color: var(--paper-dim); font-size: 0.88rem; }
.type-item .meta{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--signal);
  display: block;
  margin-bottom: 6px;
}

@media (max-width: 780px){
  .type-cols{ grid-template-columns: 1fr; }
}

/* ---------- map hero (homepage banner) ---------- */
.map-hero{
  padding: 4px 0 40px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--signal-rgb), 0.06), transparent 65%);
}
.map-hero-title{
  margin: 0 0 8px;
  font-weight: inherit;
}
.full-big{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.6rem, 4.4vw, 2.6rem);
  color: var(--paper);
  letter-spacing: -0.01em;
  display: block;
}
.full-big + .full-big{ margin-top: 6px; }
.mark-big{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  color: var(--signal);
  letter-spacing: -0.02em;
}
.full-big.accent{ color: var(--signal); }
.map-hero-title .full-big .mark{ color: var(--signal); }

.map-reveal-wrap{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s ease, opacity .3s ease .05s;
}
.map-reveal-wrap.revealed{
  max-height: 1400px;
  opacity: 1;
}

/* ---------- region map ---------- */
.region-map-wrap{
  border: none;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(var(--signal-rgb), 0.09), transparent 70%);
  padding: 28px 0 12px;
  display: flex;
  justify-content: center;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.region-map{ max-width: 460px; width: 100%; }
.region-map a{ cursor: pointer; }
.region-map .region-shape{
  transition: opacity .15s ease, filter .15s ease;
  opacity: 0.88;
}
.region-map a:hover .region-shape,
.region-map a:focus .region-shape{
  opacity: 1;
  filter: brightness(1.2);
}
.region-map .region-label{
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--ink);
  font-weight: 600;
  pointer-events: none;
}

/* ---------- centered content layout ---------- */
.page-head .wrap{ text-align: center; }
.page-head .status{ justify-content: center; }
.page-head .lede{ margin-left: auto; margin-right: auto; }
.page-head .hero-actions{ justify-content: center; }
.page-head .flag-tag{ margin-left: auto; margin-right: auto; }

.section-head{
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}
.section-head .desc{ max-width: 62ch; margin-left: auto; margin-right: auto; }

.hero-grid > div:first-child{ text-align: center; }
.hero-grid > div:first-child .lede{ margin-left: auto; margin-right: auto; }
.hero-grid > div:first-child .hero-actions{ justify-content: center; }
.hero-grid > div:first-child .tri-dot-row{ justify-content: center; }

/* ---------- generic page hero (secondary pages) ---------- */
.page-head{
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--line);
}
.page-head h1{
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  max-width: 18ch;
}
.page-head .lede{ color: var(--paper-dim); font-size: 1.02rem; max-width: 52ch; margin-top: 16px; }

/* ---------- table ---------- */
.spec-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.spec-table th, .spec-table td{
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.spec-table th{
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--paper-dim);
  font-size: 0.76rem;
}

/* ---------- form ---------- */
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-grid .full{ grid-column: 1 / -1; }
label{
  display: block;
  font-size: 0.82rem;
  color: var(--paper-dim);
  margin-bottom: 6px;
}
input, select, textarea{
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 11px 12px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.92rem;
}
textarea{ resize: vertical; min-height: 110px; }
input:focus, select:focus, textarea:focus{ border-color: var(--steel); }
@media (max-width: 640px){
  .form-grid{ grid-template-columns: 1fr; }
}

.note{
  font-size: 0.84rem;
  color: var(--paper-dim);
  border-left: 2px solid var(--signal);
  padding-left: 14px;
  margin-top: 20px;
}

/* ---------- phased response model ---------- */
.phase-block{ text-align: left; }
.phase-tabs{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.phase-tab{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--paper-dim);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.phase-tab:hover{ border-color: var(--paper-dim); }
.phase-tab.active{
  background: var(--signal);
  border-color: var(--signal);
  color: #0A0D12;
  font-weight: 600;
}
.phase-panel{ display: none; }
.phase-panel.active{ display: block; }
.phase-card{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  padding: 30px 32px;
}
.phase-card-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.phase-card-head h3{ font-size: 1.25rem; }
.phase-meta{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--paper-dim);
  white-space: nowrap;
}
.mix-bar{
  display: flex;
  height: 30px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 10px;
}
.mix-seg{
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: #0A0D12;
}
.mix-seg.indep{ background: var(--signal); }
.mix-seg.partner{ background: var(--steel); }
.mix-legend{
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--paper-dim);
  margin-bottom: 22px;
}
.mix-legend span{ display: inline-flex; align-items: center; gap: 6px; }
.mix-legend i{ width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.mix-legend .indep i{ background: var(--signal); }
.mix-legend .partner i{ background: var(--steel); }
.phase-points{ display: grid; gap: 11px; margin-bottom: 18px; }
.phase-points .pt{
  font-size: 0.9rem;
  color: var(--paper-dim);
  padding-left: 18px;
  position: relative;
}
.phase-points .pt::before{
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 1px;
  background: var(--signal);
}
.phase-points .pt b{ color: var(--paper); font-weight: 600; }
.phase-flow{
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 16px;
  font-size: 0.88rem;
  color: var(--paper-dim);
}
.phase-flow b{ color: var(--paper); }
.phase-cta{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.phase-cta p{ margin: 0; color: var(--paper-dim); font-size: 0.86rem; max-width: 42ch; }

/* ---------- signup modal ---------- */
.modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6,8,11,0.78);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease;
  padding: 0;
}
.modal-overlay.open{ opacity: 1; visibility: visible; }
.modal-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  padding: 28px 22px 30px;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(16px);
  transition: transform .18s ease;
  text-align: center;
}
.modal-overlay.open .modal-card{ transform: translateY(0); }
@media (min-width: 640px){
  .modal-overlay{ align-items: center; }
  .modal-card{ border-radius: 16px; padding: 34px; }
}
.modal-close{
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: none;
  color: var(--paper-dim);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover{ color: var(--paper); border-color: var(--paper-dim); }
.modal-type-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 560px){
  .modal-type-grid{ grid-template-columns: 1fr 1fr; }
}

/* ---------- shared account-type pick button (modal + signup step 1) ---------- */
.type-pick-btn{
  display: block;
  width: 100%;
  text-align: center;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.type-pick-btn:hover, .type-pick-btn:focus-visible{
  border-color: var(--signal);
  background: var(--surface);
  outline: none;
}
.type-pick-btn .tag{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 6px;
}
.type-pick-btn h4{ font-size: 1rem; margin: 0; }
/* Icon slot — new, used by the Government/Responder role picker on the
   home page's filter flow (reuses the exact same building/wrench icon
   paths as the "Be an American Hero" CTA band, so the two places on the
   site making the same government-vs-private distinction look like the
   same product). Not present on signup.html's plain text-only usage of
   this same button, so it's additive, not a redesign of that page. */
.type-pick-btn .type-pick-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--paper-dim);
  transition: color .18s ease, border-color .18s ease;
}
.type-pick-btn .type-pick-icon svg{ width: 19px; height: 19px; }
.type-pick-btn:hover .type-pick-icon,
.type-pick-btn.active .type-pick-icon{ color: var(--signal); border-color: var(--signal); }
.type-pick-btn.active{ border-color: var(--signal); background: var(--surface); }
.type-pick-btn p{ font-size: 0.82rem; color: var(--paper-dim); margin: 5px 0 0; }

.type-picker-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px){
  .type-picker-grid{ grid-template-columns: 1fr 1fr; }
  .type-picker-grid-3{ grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------- signup wizard: centered layout ---------- */
.wizard-wrap{ text-align: center; }
.wizard-wrap .section-head{
  display: block;
  text-align: center;
  margin-bottom: 26px;
}
.wizard-wrap .section-head h2{ max-width: none; margin: 0 auto; }
.wizard-wrap .section-head .desc{ margin: 10px auto 0; max-width: 52ch; }
.wizard-wrap .index{ display: block; margin-bottom: 8px; }
.wizard-wrap .hazard-pills{ justify-content: center; }
.wizard-wrap .type-picker-grid{ max-width: 560px; margin: 0 auto; }
.wizard-wrap .type-pick-btn{ text-align: center; }
.wizard-wrap .type-pick-btn .tag{ margin-left: auto; margin-right: auto; }
.wizard-wrap form{ text-align: center; }
.wizard-wrap .form-grid label{ text-align: center; }
.wizard-wrap .form-grid input,
.wizard-wrap .form-grid select,
.wizard-wrap .form-grid textarea{ text-align: center; }

.wizard-steps{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--paper-dim);
  flex-wrap: wrap;
}
.wizard-steps .step{ display: flex; align-items: center; gap: 8px; }
.wizard-steps .step .num{
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
}
.wizard-steps .step.current{ color: var(--paper); }
.wizard-steps .step.current .num{ border-color: var(--signal); color: var(--signal); }
.wizard-steps .step.done .num{ background: var(--signal); border-color: var(--signal); color: #0A0D12; }
.wizard-panel{ display: none; }
.wizard-panel.active{ display: block; }
.selected-type-banner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 0 auto 28px;
  max-width: 420px;
}
.selected-type-banner p{ margin: 0; font-size: 0.88rem; }
.selected-type-banner p b{ color: var(--signal); }
.selected-type-banner button{
  background: none;
  border: none;
  color: var(--paper-dim);
  text-decoration: underline;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
}
.selected-type-banner button:hover{ color: var(--paper); }
.start-over-link{
  display: inline-block;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--paper-dim);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-body);
}
.start-over-link:hover{ color: var(--paper); }

/* ---------- multi-select checkbox pills (provider step) ---------- */
.checkbox-group{ margin-bottom: 26px; }
.checkbox-group-label{
  display: block;
  font-size: 0.86rem;
  color: var(--paper-dim);
  margin-bottom: 10px;
}
.checkbox-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.check-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  color: var(--paper-dim);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  margin: 0;
}
.check-pill input{ accent-color: var(--signal); margin: 0; width: auto; }
.check-pill:hover{ border-color: var(--paper-dim); }
.check-pill:has(input:checked){
  background: var(--signal);
  border-color: var(--signal);
  color: #0A0D12;
  font-weight: 600;
}
.coverage-row{
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 14px;
}
.coverage-row:first-child{ border-top: none; margin-top: 0; padding-top: 0; }
.coverage-row-label{
  display: block;
  font-size: 0.84rem;
  color: var(--paper);
  margin-bottom: 8px;
  font-weight: 600;
}
.same-countries-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: normal;
  font-size: 0.8rem;
  color: var(--paper-dim);
  margin-left: 10px;
  cursor: pointer;
}
.same-countries-toggle input{ accent-color: var(--signal); }
.draft-note{
  font-size: 0.76rem;
  color: var(--paper-dim);
  opacity: 0.65;
  margin-top: 10px;
}
.confirm-panel{
  text-align: center;
  padding: 48px 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
}
.confirm-panel .check{
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--signal);
  color: #0A0D12;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 18px;
}

/* ---------- provider licensing / equipment / account steps ---------- */
.step-note{
  font-size: 0.84rem;
  color: var(--paper-dim);
  margin: -6px auto 22px;
  line-height: 1.5;
  max-width: 56ch;
  text-align: center;
}
.license-card{
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 20px 20px 22px;
  margin-bottom: 18px;
  text-align: center;
}
.license-card.has-error{ border-color: var(--signal); }
.license-card-head{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}
.license-card-head h4{
  margin: 0;
  font-size: 1rem;
  font-family: var(--font-head);
}
.license-card-head .req-tag{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--signal);
  border: 1px solid var(--signal-dim);
  border-radius: 999px;
  padding: 3px 10px;
  flex-shrink: 0;
  white-space: nowrap;
}
.license-card label.field-label{
  display: block;
  font-size: 0.8rem;
  color: var(--paper-dim);
  margin: 14px 0 8px;
}
.license-card label.field-label:first-of-type{ margin-top: 0; }
.license-card .checkbox-grid{ justify-content: center; }
.license-card input[type="text"],
.license-card input[type="date"]{
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.license-card input[type="text"]:focus,
.license-card input[type="date"]:focus{ outline: none; border-color: var(--signal); }
.license-card .two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px){ .license-card .two-col{ grid-template-columns: 1fr; } }
.field-error-text{
  color: var(--signal);
  font-size: 0.78rem;
  margin: 8px auto 0;
  text-align: center;
  max-width: 52ch;
}
.equip-card{
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 20px;
  margin-bottom: 16px;
  text-align: center;
}
.equip-card h4{ margin: 0 0 12px; font-size: 0.98rem; font-family: var(--font-head); }
.equip-card textarea{
  width: 100%;
  margin-top: 12px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.88rem;
  resize: vertical;
  min-height: 60px;
}
.equip-card textarea:focus{ outline: none; border-color: var(--signal); }
.wizard-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
}
.wizard-skip-link{
  background: none;
  border: none;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.wizard-skip-link:hover{ color: var(--paper); }
.account-note-box{
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 18px 20px;
  margin: 0 auto 22px;
  max-width: 56ch;
  font-size: 0.84rem;
  color: var(--paper-dim);
  line-height: 1.55;
  text-align: center;
}
.account-note-box b{ color: var(--paper); }
.access-code-box{
  border: 1px dashed var(--signal);
  border-radius: 8px;
  background: var(--signal-dim);
  padding: 22px 20px;
  margin: 18px auto 0;
  max-width: 420px;
  text-align: center;
}
.access-code-box .label{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
  display: block;
  margin-bottom: 8px;
}
.access-code-box .code{
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: 0.06em;
  word-break: break-all;
}
.field-code-install-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Any .pwa-install-btn just needs position:relative for its JS-appended
   toast bubble to anchor against — layout (flex/inline-flex, width, gap)
   is otherwise left to whatever context it's actually placed in
   (.nav-menu-item in the header, .field-code-install-btn on signup). */
.pwa-install-btn{ position: relative; }
.review-block{
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 18px 20px;
  margin-bottom: 16px;
  text-align: center;
}
.review-block h4{
  margin: 0 0 10px;
  font-size: 0.92rem;
  font-family: var(--font-head);
}
.review-block dl{
  margin: 0;
  font-size: 0.84rem;
  color: var(--paper-dim);
  line-height: 1.7;
}
.review-block dl dt{ color: var(--paper); font-weight: 600; margin-top: 8px; }
.review-block dl dt:first-child{ margin-top: 0; }
.review-block dl dd{ margin: 0 0 4px; }
.returning-toggle{
  text-align: center;
  margin-top: 28px;
}
.returning-toggle button{
  background: none;
  border: none;
  color: var(--paper);
  text-decoration: underline;
  font-family: var(--font-body);
  font-size: 0.86rem;
  cursor: pointer;
  padding: 0;
}
.returning-panel{
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 22px;
  margin-top: 16px;
  text-align: left;
}
.returning-panel .form-grid{ margin-top: 14px; }
.returning-result{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--paper-dim);
  line-height: 1.6;
}
.returning-result b{ color: var(--paper); }

/* ---------------------------------------------------------------------------
   Estimator: readiness inputs, network supply, contract value
   --------------------------------------------------------------------------- */
/* Response time and sustainment duration. Both are mandatory in WHO's EMT
   classification and INSARAG's USAR classification, and both drive cost in an
   EMAC-style mission package — so they sit with the resource counts rather
   than being buried in the sign-up flow. */
.readiness-block{
  margin: 18px 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.readiness-row{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.readiness-row:last-child{ margin-bottom: 0; }
.readiness-label{
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.readiness-label strong{ color: var(--paper); font-variant-numeric: tabular-nums; }
.readiness-row input[type="range"]{ width: 100%; }
.readiness-pills{ margin: 0; gap: 6px; }
.readiness-pills .filter-icon-btn{ padding: 7px 14px; font-size: 0.8rem; }
/* The shared .filter-icon-btn.active styling is scoped to .filter-row, and
   these pills live in the estimator rather than the filter system — so
   without this they rendered identically whether selected or not. */
.readiness-pills .filter-icon-btn.active{
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
  font-weight: 700;
}

/* Supply against need, stated as a gap. An agency that finds the shortfall
   after signing up is an agency we've lost, so a short network says so. */
.network-supply-head{ text-align: center; margin-bottom: 14px; }
.network-supply-head p{
  color: var(--paper-dim);
  font-size: 0.86rem;
  line-height: 1.5;
  margin-top: 6px;
}
.supply-line{
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
}
/* Per-provider share is a neutral arithmetic result, not a verdict, so it
   gets neutral colour. Green here would imply an approval or a guarantee of
   supply, which this page is in no position to make. */
.mini-estimate-cell[hidden]{ display: none; }

/* "How valuable could a government contract be" — answered in three numbers
   rather than a day rate the reader has to multiply out themselves. */
.contract-value-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0 6px;
}
.contract-value-cell{
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.contract-value-cell .n{
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.contract-value-cell .l{
  margin-top: 5px;
  font-size: 0.68rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--paper-dim);
}
@media (max-width: 560px){
  .contract-value-grid{ grid-template-columns: 1fr; }
  .contract-value-cell{ display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
  .contract-value-cell .l{ margin-top: 0; max-width: 58%; }
}

/* ---------------------------------------------------------------------------
   Centred layout: filter system, estimator, sign-up band
   --------------------------------------------------------------------------- */
/* The page reads as one vertical decision path — pick a country, pick who you
   are, size it, sign up — so everything on that path is centred on a single
   axis rather than left-aligned against a wide column. Text blocks get a
   readable max-width so centring doesn't turn into long ragged lines. */
#mapFilterSystem,
#estimator-section,
#hero-cta-band{ text-align: center; }

#mapFilterSystem .filter-row-head,
#mapFilterSystem .region-group-label,
#estimator-section .calc-slider-block,
#estimator-section .readiness-row{
  justify-content: center;
  align-items: center;
}
#mapFilterSystem .filter-icons,
#hero-cta-band .filter-icons{ justify-content: center; }

#mapFilterSystem .filter-row-note,
#mapFilterSystem .region-group-label-detail,
#estimator-section p,
#hero-cta-band .hero-cta-fineprint{
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}
#estimator-section .readiness-label{ text-align: center; width: 100%; }

/* On-demand fineprint in the sign-up band, same (i) affordance the filter
   rows use — so the band explains itself when asked rather than by default. */
.cta-note-info{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.cta-note-info .cta-note-detail[hidden]{ display: none; }



/* ---------------------------------------------------------------------------
   Role picker: two choices collapse to one detailed box
   --------------------------------------------------------------------------- */
.type-picker-grid.single{
  display: block;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.type-picker-grid.single .type-pick-btn{
  width: 100%;
  cursor: default;
}
.type-picker-grid.single .type-pick-btn[hidden]{ display: none; }

.type-detail{
  max-width: 720px;
  margin: 14px auto 0;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.type-detail[hidden]{ display: none; }
.type-detail-title{
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--paper);
}
.type-detail-lead{
  color: var(--paper-dim);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 auto 16px;
}
.type-detail-list{
  list-style: none;
  padding: 0;
  margin: 0 auto 18px;
  max-width: 60ch;
  text-align: center;
}
.type-detail-list li{
  position: relative;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: var(--paper-dim);
  font-size: 0.88rem;
  line-height: 1.55;
}
.type-detail-list li:last-child{ border-bottom: 1px solid var(--line); }
.type-detail-list strong{ color: var(--paper); }
.type-detail-list code{
  font-size: 0.85em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--paper);
}
.type-detail-back{
  background: none;
  border: 0;
  padding: 4px 6px;
  color: var(--paper-dim);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.type-detail-back:hover{ color: var(--paper); }

/* Sign-up band: centre the card contents and everything revealed from them,
   so the bottom of the page reads on the same axis as the rest. */
#hero-cta-band .hero-cta-tab,
#hero-cta-band .hero-cta-panel-inner,
#hero-cta-band .hero-cta-section,
#hero-cta-band .hero-cta-preview{
  text-align: center;
}
#hero-cta-band .hero-cta-tab{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#hero-cta-band .hero-cta-section p,
#hero-cta-band .hero-cta-fineprint{
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}
#hero-cta-band .hero-cta-email-row,
#hero-cta-band .hero-cta-subhead{ justify-content: center; }
#hero-cta-band .dash-body .rowline{ justify-content: center; gap: 10px; }

/* In single mode the card above is already the heading, so the detail box
   doesn't repeat the name, and the card drops its one-line summary in favour
   of the fuller lead underneath. */
.type-picker-grid.single .type-pick-btn p{ display: none; }
.type-picker-grid.single + .type-detail .type-detail-title,
.type-detail .type-detail-title{ display: none; }

/* "Human E" carries the logo mark as an inline <span>, which let the ribbon
   wordmark and the menu tiles break between the word and the E. These are
   two-word names, not two lines. */
.ribbon-home,
.crumb-option,
.nav-tile,
.type-detail-title{ white-space: nowrap; }
.ribbon-home .accent-e,
.crumb-option .accent-e,
.nav-tile .accent-e{ display: inline-block; vertical-align: baseline; }

/* EMERGENCY (dot) RESPONSE moved out of the hero and down into the role row,
   so it appears the moment a country is picked rather than sitting above the
   choice that reveals it. It replaces the old "Who's this for" heading — the
   heading text is kept for screen readers, since the row still needs an
   accessible name even though the visible line is now the brand mark. */
.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.filter-row-head-brand{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 14px;
}
.filter-row-head-brand .brand-region-box{ margin: 0; }

/* Hero spacing is done with flex gaps, not per-element margins.
   Earlier rounds tuned margin-top / padding-bottom on individual pieces to
   centre things, and the numbers only ever held for one state — every time a
   row was revealed or hidden they had to be re-tuned. Laying the column out
   as flex with one gap means every visible child is evenly spaced
   automatically, hidden rows (display:none) contribute nothing, and the
   group stays centred as selections reveal more rows. */
.map-hero{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
}
.filter-system{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.filter-system > *{ margin-top: 0; margin-bottom: 0; }
.filter-row-location{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.filter-row-location > *{ margin-top: 0; margin-bottom: 0; }
.filter-row-location .crumb-trigger{ margin-bottom: 0; }

/* ==========================================================================
   v79 — hero vertical rhythm, rebuilt so it spans the whole black block
   ==========================================================================

   What v78 got wrong (measured, not guessed):

   The black block a reader sees at the top of index.html is NOT one element.
   It is three siblings sharing the ink background — `.top-ribbon` (AMERICAN),
   `.brand-block > header` (the E button) and `.map-hero` (NORTH, the country
   buttons, EMERGENCY / RESPONSE). v78 put `gap: 30px` on `.map-hero`,
   `.filter-system` and `.filter-row-location`, which only ever governed the
   last three of those five elements, because the first two live outside
   `.map-hero` entirely. Measured at 1440x900 with nothing selected:

       AMERICAN -> E button          2.6px
       E button -> NORTH            48.5px
       NORTH -> country buttons     30.0px
       country buttons -> EMERGENCY 30.0px

   So "uniform 30px" was true of the three elements that happened to be inside
   the flex column and false of the two that were not. Two further findings:

   - `.map-hero`'s `gap` was never set (it computed to `normal`) and it has a
     single child, `.wrap`, so the flex column there did nothing at all.
   - `justify-content: center` on `.map-hero` was inert: the section has no
     height of its own, so there was nothing to centre within.
   - The block was not centred. Slack above the first element was 0px; slack
     below the last was 97px, 56px of which was `#filterClearRow` sitting in
     the flow at `visibility: hidden` (it reserves its box) plus its flex gap.

   The approach here: one token, `--hero-rhythm`, is the only spacing value in
   the block, and every boundary between the five elements is made to resolve
   to exactly that value — including the two that cross a section boundary.
   `--hero-edge` is the slack above the first element and below the last; it
   defaults to the rhythm, so the block is uniformly spaced end to end and the
   group is therefore centred (slack-top == slack-bottom is what centring
   means when the block's height is content-derived).

   Boundary arithmetic, all of it token-driven so no state can break it:

     slack above AMERICAN   = .top-ribbon padding-top            = edge
     AMERICAN -> E          = .top-ribbon padding-bottom         = rhythm
     E -> NORTH             = .nav slack (0) + .map-hero pad-top = rhythm
     NORTH -> countries     = .filter-row-location gap           = rhythm
     countries -> EMERGENCY = .filter-row-location gap           = rhythm
     slack below EMERGENCY  = .map-hero padding-bottom           = edge

   `.nav` is sized to exactly the E button so it contributes no slack of its
   own; all of the E-to-NORTH distance comes from one place instead of being
   split across a nav height and a hero padding that had to be kept in sync.
   Revealed rows inherit the same `--hero-rhythm` gap, so the rhythm holds as
   selections open more rows rather than needing a per-state correction. */

:root{
  --hero-rhythm: 30px;              /* every gap inside the black block */
  --hero-edge: var(--hero-rhythm);  /* slack above the first / below the last */

  /* AMERICAN's size is needed in the ribbon height calc below, so it lives in
     a token rather than being repeated as a literal in two places. */
  --wordmark-size: clamp(1.729rem, 3.77vw, 2.028rem);

  /* The resting sticky bar is exactly edge + wordmark + rhythm tall, so the
     wordmark's own slack is the rhythm by construction at any viewport width,
     including the clamp's fluid middle. 4px is .top-ribbon-text's 2px block
     padding, which is why line-height is pinned to 1 below — an inherited
     line-height would make this number a guess. */
  --ribbon-rest-h: calc(var(--wordmark-size) + 4px
                        + var(--hero-edge) + var(--hero-rhythm));

  /* E button. Roughly 2x the old 65x55 / 1.495rem, driven through variables
     rather than rules so the compact .ribbon-toggle can opt out by resetting
     them on itself. Overriding by selector instead would lose:
     `.nav-toggle .e-mark` (0,2,0) sits later in this sheet than
     `.ribbon-toggle .e-mark` (0,2,0), so at equal specificity the big hero
     size would win inside the 50px sticky bar and overflow it. Same class of
     silent specificity trap as v74's aria-pressed tile and v76's nav-tile. */
  --e-w: 130px;
  --e-h: 110px;
  --e-font: 2.99rem;
  --e-border: 2.5px;
  --e-radius: 18px;
  --e-fill: rgba(255,255,255,0.045);
}

/* ---- 1. the sticky bar: taller at rest, unchanged when collapsed ---- */

.top-ribbon-text{
  font-size: var(--wordmark-size);
  line-height: 1;
}
.top-ribbon{
  height: calc(var(--ribbon-rest-h) + env(safe-area-inset-top, 0px));
}

/* Collapsed, the bar returns to its 50px working height. The height it gives
   up is handed straight back to .brand-block as padding, so the document's
   total height never changes and the page does not jump under the reader at
   the collapse threshold. Without this compensation the shift would also feed
   back into initRibbonCollapse's IntersectionObserver — it observes
   `.brand-block header`, which the shift moves — and the two states could
   oscillate across the boundary. The padding is ink-on-ink and sits above the
   fold the reader has already scrolled past, so it is never visible. */
body.ribbon-collapsed .top-ribbon{
  height: calc(var(--ribbon-h) + env(safe-area-inset-top, 0px));
}
body.ribbon-collapsed .brand-block{
  padding-top: calc(var(--ribbon-rest-h) - var(--ribbon-h));
}

/* ---- 2. the E button ---- */

.nav-toggle{
  width: var(--e-w);
  height: var(--e-h);
  border-width: var(--e-border);
  border-radius: var(--e-radius);
  background: var(--e-fill);
}
.nav-toggle .e-mark{ font-size: var(--e-font); }
.nav-toggle:hover,
.nav-toggle[aria-expanded="true"]{
  background: rgba(255,255,255,0.09);
  border-color: var(--paper);
}

/* The compact in-ribbon toggle resets the tokens instead of fighting the
   rules, so it stays inside the 50px collapsed bar. */
.ribbon-toggle,
.nav-toggle.ribbon-toggle{
  --e-w: 46px;
  --e-h: 40px;
  --e-font: 1.05rem;
  --e-border: 1.5px;
  --e-radius: var(--radius);
  --e-fill: none;
}

/* .nav hugs the E button exactly, so the header contributes no slack of its
   own and the whole E-to-NORTH distance is one value in one place. */
.nav{ height: var(--e-h); }

/* .nav-links was pinned to `top: 72px`, the old .nav height, as a literal.
   With a taller E button that number would have opened the menu on top of the
   button that opens it. Anchored to the row instead so it can never drift. */
.nav-links{ top: 100%; }

/* ---- 3. the hero column ---- */

.map-hero{
  padding-top: var(--hero-edge);
  padding-bottom: var(--hero-edge);
}
.filter-system{ gap: var(--hero-rhythm); }
.filter-row-location{ gap: var(--hero-rhythm); }

/* #filterClearRow is toggled by visibility, which keeps its 26px box and its
   flex gap in the flow — 56px of invisible weight under EMERGENCY / RESPONSE
   with nothing selected, and the largest single reason the block read as
   top-heavy. It is toggled with the `hidden` attribute now (see
   initHomeFilterSystem / initCountryFilterSystem) so it leaves the flow
   entirely and contributes no gap, the same way the hidden filter rows
   already do. */
.filter-clear-row[hidden]{ display: none; }

/* ---- 4. narrow widths ---- */

@media (max-width: 600px){
  :root{
    --hero-rhythm: 24px;
    --e-w: 116px;
    --e-h: 98px;
    --e-font: 2.6rem;
    --e-radius: 16px;
  }
}

/* ---- 5. refinements found by looking at the rebuilt block ---- */

/* The ribbon's hairline used to sit at y=50, tight under a bar that read as
   chrome. With the bar now holding the wordmark inside the block's own
   rhythm, that rule drew a line straight through the group and split AMERICAN
   off from the E below it — the block stopped reading as one thing. It is
   only needed once the bar is pinned over scrolling content, so it is scoped
   to the collapsed state. */
.top-ribbon{ border-bottom-color: transparent; }
body.ribbon-collapsed .top-ribbon{ border-bottom-color: var(--line); }

/* The accent scales in em, so doubling the letter doubled the tick too and it
   started reading as a separate red slash rather than an accent on the E.
   Tightened and pulled in for the hero size only — the ribbon and inline
   marks keep the original proportions. The composite (E plus accent) sits
   higher than the E alone, so the line box is nudged down to centre what the
   eye actually sees rather than what the layout measures. */
.nav-toggle .e-mark{
  transform: translateY(0.05em);
}
.nav-toggle .e-mark::after{
  top: -0.17em;
  width: 0.135em;
  height: 0.34em;
}
.ribbon-toggle .e-mark{ transform: none; }
.ribbon-toggle .e-mark::after{
  top: -0.22em;
  width: 0.16em;
  height: 0.42em;
}

/* ---- 6. E button treatments ----------------------------------------------
   Subjective, so three are built rather than one guessed at. `hero-e-options
   .html` renders all three at true size side by side. Switching is one line:
   set the tokens below on :root, or add the class to <body>.

     A "outline"  the existing mark, scaled 2x, nothing else changed
     B "framed"   2x + heavier border, faint fill, softer corner   [shipped]
     C "signal"   2x + signal-red border, red glow, white letter

   B is the default. It is the one that reads as the anchor of the block
   without spending the signal red, which this site reserves for meaning
   (EMERGENCY / RESPONSE, the accent itself) rather than for decoration. */


/* Scoped to any ancestor, not just <body>, so hero-e-options.html can render
   all three at once; putting the class on <body> switches the live site. */
.e-outline{
  --e-border: 1.5px;
  --e-radius: var(--radius);
  --e-fill: none;
}
.e-signal{
  --e-border: 2.5px;
  --e-radius: 18px;
  --e-fill: rgba(var(--signal-rgb), 0.10);
}
.e-signal .nav-toggle{
  border-color: var(--signal);
  box-shadow: 0 0 0 1px rgba(var(--signal-rgb), 0.18), 0 6px 26px rgba(var(--signal-rgb), 0.22);
}
.e-signal .nav-toggle:hover,
.e-signal .nav-toggle[aria-expanded="true"]{
  border-color: var(--signal);
  background: rgba(var(--signal-rgb), 0.18);
}
.e-signal .ribbon-toggle{ box-shadow: none; }

/* ==========================================================================
   v80 — North America Mode as a switch, inside the box it describes
   ==========================================================================
   It used to be a badge in a `.na-mode-banner` that appeared *below* the
   country row once you happened to have all three countries selected. Two
   problems with that: the label described the bordered box but sat outside
   it, and there was no way to ask for the mode — you could only arrive at it
   by accident. It is a `role="switch"` now, inside `.location-box` with the
   country buttons, and the box carries the border in both states so the
   group reads as one thing whether the mode is on or off. */
.location-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: 18px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.location-box.na-on{
  border-color: var(--signal);
  box-shadow: 0 0 0 4px rgba(var(--signal-rgb), 0.08);
}
.na-mode-bar{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.na-mode-toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--paper-dim);
  font-family: var(--font-head);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.na-mode-toggle:hover{ border-color: var(--paper-dim); color: var(--paper); }
.na-mode-toggle[aria-checked="true"]{
  color: var(--signal);
  border-color: var(--signal);
  background: linear-gradient(90deg, rgba(80,144,196,0.12), rgba(var(--signal-rgb), 0.1), rgba(47,173,113,0.12));
}
/* The switch reads as off/on at a glance rather than relying on the label
   colour alone, which would be the only cue for anyone who can't separate
   the signal red from the resting grey. */
.na-mode-switch{
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  transition: background .18s ease;
}
.na-mode-knob{
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--paper-dim);
  transition: transform .18s ease, background .18s ease;
}
.na-mode-toggle[aria-checked="true"] .na-mode-switch{ background: rgba(var(--signal-rgb), 0.35); }
.na-mode-toggle[aria-checked="true"] .na-mode-knob{
  transform: translateX(16px);
  background: var(--signal);
}
/* Full wording where it fits, the short form where it doesn't. Both are in
   the DOM and swapped with display, so the accessible name is whichever one
   is actually on screen rather than a truncated string. */
.na-mode-short{ display: none; }
@media (max-width: 560px){
  .na-mode-full{ display: none; }
  .na-mode-short{ display: inline; }
  .na-mode-toggle{ font-size: 0.78rem; padding: 5px 12px 5px 7px; }
  .location-box{ padding: 12px; gap: 12px; align-self: stretch; }
}
/* The detail paragraph lives inside the box now, so it no longer needs the
   banner's own centring wrapper. */
.location-box .na-mode-detail{ margin: 0 auto; }
/* Superseded: the border moved onto .location-box, which exists in both
   states. Keeping the old :has() rule would double the border. */
.filter-row-location:has(+ .na-mode-banner:not([hidden])) .filter-icons{
  border: 0;
  padding: 0;
  box-shadow: none;
}

/* ==========================================================================
   v81 — accent palette: violet-led, with a calm companion hue
   ==========================================================================
   The accent was #E8402F, an emergency orange-red, used 113 times through
   `var(--signal)` plus 23 hardcoded `rgba(232,64,47,…)` literals scattered
   across the sheet. Those literals are now `rgba(var(--signal-rgb), …)`, so
   the entire palette swaps from one token instead of a find-and-replace that
   would miss a dozen of them.

   TWO THINGS WORTH READING BEFORE CHANGING THIS AGAIN.

   1. **The accent cannot simply become green.** Ground rule 5 of this project
      is "green means a real approval" — `--ready` (#35B88C) marks government
      auto-approval and nothing else on the site is allowed to use it. A green
      brand accent would put approval-green on the logo, the wordmark, the
      EMERGENCY / RESPONSE line and every filter chip, and the one signal that
      is supposed to mean something would stop meaning it. So violet leads,
      and the green side of the brief is carried by a **teal companion**
      (`--accent-2`) that is deliberately held away from `--ready` in hue, and
      is used only decoratively — the É accent, brand gradients — never for
      status.
   2. **Red still exists where red is the fact, not the brand.** `--can`
      (#DD5347) is the Canadian flag colour on the Canada button and is
      untouched. Country buttons keep their own national colours.

   Three palettes are built rather than one guessed at; `palette-options.html`
   renders them side by side. Switch with a class on <body>. */

:root{
  /* Aurora (default). Violet primary, teal companion. */
  --signal-rgb: 139, 111, 232;
  --signal-dim: #241C4A;
  --accent-2:   #35C6C0;
  --accent-2-rgb: 53, 198, 192;
  --dim-hazard-dim: #241C4A;
  /* Approval green pushed further from the teal companion so the two can
     never be read as the same signal. Still unmistakably a green light. */
  --ready: #2FBF5E;
}

/* A "Amethyst" — one hue, no companion. The quietest of the three. */
body.palette-amethyst{
  --signal-rgb: 124, 92, 224;
  --signal-dim: #201A44;
  --accent-2:   #7C5CE0;
  --accent-2-rgb: 124, 92, 224;
  --dim-hazard-dim: #201A44;
}
/* C "Iris" — desaturated violet with a sage companion. The most muted. */
body.palette-iris{
  --signal-rgb: 122, 108, 196;
  --signal-dim: #232047;
  --accent-2:   #7FB8A0;
  --accent-2-rgb: 127, 184, 160;
  --dim-hazard-dim: #232047;
}

/* Superseded in v82: the accent rests white and takes the first selected
   country's colour. The violet/teal brand pair still leads everywhere else —
   EMERGENCY / RESPONSE, the filter chips, every active state. */
/* The pulse dot in EMERGENCY (dot) RESPONSE picks up the companion hue so
   the line reads as the two-tone brand rather than one flat colour. */
.pulse-dot{
  background: var(--accent-2);
}


/* ==========================================================================
   v82 — the É mark carries the country selection
   ==========================================================================

   FIRST, A BUG THIS ROUND HAD TO FIX TO WORK AT ALL.

   `--usa` / `--can` / `--mex` were declared in TWO `:root` blocks: once at the
   top of this sheet (#5090C4 / #DD5347 / #2FAD71) and again about 1,500 lines
   down under "country accents" (#4A7FA7 / #C1443B / #3F9B6F). The second one
   wins, so the set at the top — the one that looks authoritative, sitting with
   every other brand token — has been dead the whole time. Neither set matches
   the country buttons in the hero, which carry their own hardcoded hexes.

   So "make the accent the country colour" had three candidate answers and two
   of them were wrong. The tokens below are the colours a reader can actually
   see on the button they just clicked, and the buttons are rewired to use the
   same tokens, so there is now one source of truth. The button *fill* is far
   too dark to read as a small stroke on black, so the tokens are the button's
   border colour, which is the bright edge of the same hue.

   The older --usa/--can/--mex pair is left alone: it is used by .page-head on
   the country pages and is not this. Worth collapsing in a later round.

   ---- the mark itself -----------------------------------------------------

   Three slots, filled in the order countries are selected (see
   updateAccentTick in script.js):

     1st -> the accent stroke        --e-accent
     2nd -> the letter               --e-ink
     3rd -> the frame                --e-frame
     4th+ -> the letter blends every selected country   --e-blend

   All three rest at white. Everything is scoped to the brand mark in the
   header — the compact .ribbon-toggle in the sticky bar is deliberately left
   alone, because at 46x40 a three-colour mark is mud. */

:root{
  --country-us: #4A73B5;
  --country-ca: #D8495A;
  --country-mx: #4FA37D;
}

/* One source of truth: the buttons now read the same tokens the É does. */
.filter-row-location .flag-btn[data-country-pick="us"]{ border-color: var(--country-us); }
.filter-row-location .flag-btn[data-country-pick="ca"]{ border-color: var(--country-ca); }
.filter-row-location .flag-btn[data-country-pick="mx"]{ border-color: var(--country-mx); }

/* The accent rests white everywhere; only the brand mark takes a country. */
.accent-e::after,
.e-mark::after{
  background: var(--paper);
  transition: background .25s ease;
}
.brand-block header .nav-toggle .e-mark::after{
  background: var(--e-accent, var(--paper));
}
.brand-block header .nav-toggle .e-mark{
  color: var(--e-ink, var(--paper));
  transition: color .25s ease;
}
.brand-block header .nav-toggle{
  border-color: var(--e-frame, var(--paper));
  transition: border-color .25s ease, background .15s ease;
}
/* The hover / open states set border-color at the same specificity earlier in
   the sheet, which would otherwise snap the frame back to white the moment
   the menu opened. */
.brand-block header .nav-toggle:hover,
.brand-block header .nav-toggle[aria-expanded="true"]{
  border-color: var(--e-frame, var(--paper));
}
/* Four or more countries: the letter stops being one colour. background-clip
   needs a transparent fill, so the `color` above is overridden rather than
   extended — and the accent stroke is a separate element, so it keeps its own
   first-country colour and is not swallowed by the gradient. */
.brand-block header .nav-toggle.e-blend .e-mark{
  background: var(--e-blend);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- v83: the emergency entry in the menu ---- */
.nav-section-emergency{ order: -1; width: 100%; }
.nav-emergency-toggle{
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; cursor: pointer; text-align: left;
  border: 1.5px solid var(--signal); border-radius: 12px;
  background: rgba(var(--signal-rgb), 0.10); color: var(--paper);
  font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
}
.nav-emergency-toggle:hover{ background: rgba(var(--signal-rgb), 0.18); }
.nav-emergency-toggle svg{ flex-shrink: 0; width: 22px; height: 22px; stroke: var(--signal); fill: none; stroke-width: 1.8; }
.nav-emergency-panel{
  margin-top: 10px; padding: 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--ink);
}
.emg-lead{ margin: 0 0 12px; font-weight: 700; color: var(--paper); font-size: 0.92rem; }
.emg-big{ display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 0 16px; }
.emg-big-num{ font-family: var(--font-head); font-weight: 700; font-size: 3.2rem; line-height: 1; color: var(--signal); }
.emg-big-scope{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--paper-dim); }
.emg-varies{ font-size: 0.86rem; color: var(--paper); margin-bottom: 8px; font-weight: 700; }
.emg-list{ list-style: none; margin: 0 0 10px; padding: 0; }
.emg-list li{ display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.emg-list li:last-child{ border-bottom: 0; }
.emg-place{ font-size: 0.8rem; color: var(--paper-dim); }
.emg-num{ font-family: var(--font-mono); font-size: 0.8rem; color: var(--signal); white-space: nowrap; text-align: right; }
.emg-note{ margin: 8px 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--paper-dim); }
.emg-verified{ margin: 10px 0 0; font-family: var(--font-mono); font-size: 0.68rem; color: var(--paper-dim); opacity: 0.75; }
.emg-split{ margin: 14px 0 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--paper-dim); }
.emg-secondary{ display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.84rem; color: var(--paper); }
.emg-secondary:hover{ border-color: var(--paper-dim); }
.emg-honest{ font-style: italic; }
@media (max-width: 520px){ .emg-big-num{ font-size: 2.6rem; } }

/* ---- v83: sector cards — no icon, larger type ----
   The icons were a generic house and a generic wrench doing no work the
   heading wasn't already doing, and they pushed the type down. Removed with
   `display:none` rather than cut from 20 files, so the markup stays parallel
   with the panels below and a later round can put them back in one line. */
.hero-cta-tab-icon{ display: none; }
.hero-cta-tab-title{ font-size: 1.4em; }
.hero-cta-tab-desc{ font-size: 1.4em; }

/* ---- v83: the map label ----
   The previous label said "Where this comes from", which invited the reader
   to treat the dots as sourced data. They are not: the markers are anonymous
   decorative <g> dots with no provider behind them, which is exactly the
   fiction that had to be torn out of an earlier build when they were counted
   and reported as "registered providers". The replacement says plainly what
   the map is and, more importantly, what it is not. Do not re-word this into
   anything that implies the dots represent real registered providers. */
.map-context-label{
  display: block; max-width: 62ch; margin: 0 auto 14px; text-align: center;
  font-size: 0.8rem; line-height: 1.55; color: var(--paper-dim);
}
.map-context-label strong{ color: var(--paper); }

/* ==========================================================================
   v84 — emergency red on the brand mark
   ==========================================================================
   One colour, one job, one place. `--emergency-red` appears on exactly four
   things and must not spread:

     the AMERICAN wordmark
     the É letter and the square around it
     the region word (NORTH)
     the EMERGENCY / RESPONSE line

   It is NOT `--signal`. The violet accent still runs the interface — filter
   chips, active states, the signup eyebrow — and `--ready` green still means
   a real government approval and nothing else. Adding a third colour with a
   single meaning only works if it stays scarce, so a test counts where it is
   used and fails if that count grows. If you need red somewhere new, that is
   a decision about what red means here, not a styling choice.

   Interaction with v82: the É's three slots (accent / letter / frame) now
   REST at this red instead of white, and a country selection still overrides
   them one at a time in selection order. So an untouched page is red, and
   the mark fills with country colour as the reader picks. */

:root{
  --emergency-red: #FF2D1F;
}

.top-ribbon .ribbon-home,
body.ribbon-collapsed .ribbon-home{ color: var(--emergency-red); }

.filter-row-location .crumb-trigger.location-card-label{ color: var(--emergency-red); }

.brand-region-box{ color: var(--emergency-red); }
.pulse-dot{ background: var(--emergency-red); }

/* The É rests red; v82's country slots still win when they are set. */
.brand-block header .nav-toggle .e-mark::after{
  background: var(--e-accent, var(--emergency-red));
}
.brand-block header .nav-toggle .e-mark{
  color: var(--e-ink, var(--emergency-red));
}
.brand-block header .nav-toggle,
.brand-block header .nav-toggle:hover,
.brand-block header .nav-toggle[aria-expanded="true"]{
  border-color: var(--e-frame, var(--emergency-red));
}

/* ---- v85: AGÉNT on its own line ----
   The card title is two parts now: who the reader is, then the word AGÉNT
   centred underneath it. The É moved off "Emergency" and onto AGÉNT — two
   accented É's in one title fought each other, and the accent is worth more
   on the word the card is actually about. Both parts are block-level inside
   the existing .hero-cta-tab-title, so the 1.4em sizing from v83 still
   applies to the pair and there is one size to change, not two. */
.hero-cta-tab-title{ display: block; text-align: center; }
.agent-who{ display: block; }
.agent-word{
  display: block;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* The letter-spacing adds a trailing gap after the final T, which pulls the
     word visually left of the line above it. Half the tracking is given back
     as padding so the two lines share a true centre. */
  padding-left: 0.14em;
  font-weight: 700;
}

/* ==========================================================================
   v87 — emergency red is a HOVER state, not a resting colour
   ==========================================================================
   v84 painted the wordmark and the region word red permanently. Wrong: they
   rest white and take the red only on hover. Written as explicit overrides at
   the end of the sheet rather than by editing v84's rules, so the v84 block
   still reads as the history of how this got here.

   Still fixed red, deliberately, and not part of this change:
     - EMERGENCY / RESPONSE, which was asked for as a fixed colour
     - the É's resting state, which v82's country slots override in
       selection order

   Everything else that reaches for red should be a hover. */

/* v92: the region word (NORTH) is OFF this list. It was asked for as a fixed
   red alongside EMERGENCY / RESPONSE back in v87 and deferred every round
   since. Dropping it from here lets the earlier
   `.filter-row-location .crumb-trigger.location-card-label{ color: red }` at
   the top of this section apply at rest -- same specificity (0,3,0), and it
   is the earlier of the two, so removing the later one is the whole edit.
   Its :hover rule below is now red-on-red, which is harmless and left in
   place so the focus-visible half keeps working. The wordmark (AMERICAN) was
   NOT named in that request and stays a hover. */
.top-ribbon .ribbon-home,
body.ribbon-collapsed .ribbon-home{
  color: var(--paper);
  transition: color .15s ease;
}
.filter-row-location .crumb-trigger.location-card-label{
  transition: color .15s ease;
}
.top-ribbon .ribbon-home:hover,
.top-ribbon .ribbon-home:focus-visible,
.filter-row-location .crumb-trigger.location-card-label:hover,
.filter-row-location .crumb-trigger.location-card-label:focus-visible{
  color: var(--emergency-red);
}

/* Menu navigation: the continent and account tiles, and the crumb options in
   the region dropdown. The label carries the colour rather than the tile, so
   the icon stroke follows via currentColor without a second rule. */
.nav-tile,
.crumb-option{ transition: color .15s ease, border-color .15s ease; }
/* `.nav-links a.nav-tile:hover{ color: var(--paper) }` sits at (0,3,1) around
   line 637 and beats a bare `.nav-tile:hover` (0,2,0) no matter how late in
   the sheet it appears. Matched here rather than fought with !important.
   Fourth round running that an equal-or-higher-specificity rule earlier in
   this file has quietly eaten a later one — v74, v76, v79, now this. When a
   new rule silently does nothing here, check specificity before anything
   else. */
.nav-links a.nav-tile:hover,
.nav-links a.nav-tile:focus-visible,
.nav-links .nav-tile:hover,
.nav-links .nav-tile:focus-visible,
.nav-tile:hover,
.nav-tile:focus-visible,
.crumb-option:hover,
.crumb-option:focus-visible{
  color: var(--emergency-red);
  border-color: var(--emergency-red);
}
.nav-links .nav-tile:hover .nav-tile-label,
.nav-links .nav-tile:focus-visible .nav-tile-label,
.nav-links .nav-tile:hover .nav-tile-ic,
.nav-links .nav-tile:focus-visible .nav-tile-ic{ color: var(--emergency-red); stroke: var(--emergency-red); }

/* ---- v88: emergency toggle centred, country picker, text size ---- */
.nav-emergency-toggle{ justify-content: center; text-align: center; }

.emg-country-mount{ margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.emg-pick-label{ display: block; font-size: 0.78rem; color: var(--paper-dim); margin-bottom: 6px; }
.emg-pick{
  width: 100%; padding: 9px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--ink); color: var(--paper);
  font-family: var(--font-body); font-size: 0.86rem;
}
.emg-pick-out{
  margin: 10px 0 0; padding: 10px; border-radius: 10px;
  background: rgba(var(--signal-rgb), 0.08); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.84rem; color: var(--paper);
}
/* The text-size control scales the root font size, which every rem already
   follows, so there is no second set of sizes to keep in step. Steps are a
   fixed list rather than free zoom so the layout cannot be driven apart. */

/* ---- v89: band third line, and the captured country chips ---- */
.hero-cta-place{
  display: flex; justify-content: center; gap: 10px; margin-top: 10px;
  font-size: 0.42em; letter-spacing: 0.1em;
}
.hero-cta-place-btn{
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 14px; color: var(--paper-dim); cursor: pointer;
  font-family: inherit; font-weight: 700; letter-spacing: inherit;
  text-transform: uppercase; transition: color .15s ease, border-color .15s ease;
}
.hero-cta-place-btn:hover,
.hero-cta-place-btn:focus-visible{ color: var(--emergency-red); border-color: var(--emergency-red); }

.hero-cta-captured{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hero-cta-captured-chip{
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--signal); background: rgba(var(--signal-rgb), 0.12);
  color: var(--paper); font-size: 0.86rem; font-weight: 700;
}
.hero-cta-captured-note,
.hero-cta-captured-empty{
  flex-basis: 100%; margin: 4px 0 0; font-size: 0.78rem; color: var(--paper-dim);
}


/* ==========================================================================
   v92 — the QR moved out of the page field and into the E ring
   ==========================================================================
   v90 put one 620px code in the middle of the page; v91 tiled it across the
   whole outer field. Both put the texture next to blocks that carry
   information, which is what this round removes. The body carries no image at
   all now -- deleted, not overridden, so there is no second rule to find.

   The texture lives in ONE place: the band between the letter E and the
   square border of the big E button. See "the E ring" below.

   The encoded payload is unchanged -- https://humanemergent.world, 33x33
   modules, error correction H, generated with segno. Decoding is verified in
   tools/regression_tests.py rather than assumed: the ring art and the working
   code in the menu are rendered and run through OpenCV's detector.

   Two things from v90/v91 that are still true and still load-bearing:

     POLARITY BEATS CONTRAST.  Light modules on a dark field never decode, at
     any contrast. Dark modules on a lighter field decode down to 1.08:1. The
     modules stay the darker tone everywhere they appear on this site.

     TILING MAKES A CODE UNREADABLE.  Adjacent finder patterns stop a detector
     locking onto any one copy. The ring tiles, so the ring is art. The
     scannable code lives in the menu, bounded, with its own quiet zone -- see
     "v92 -- a code that actually scans" further down. */


/* ---- the E mark IS one working QR code ------------------------------------
   v92 first pass tiled the code around the letter in a thin ring. It looked
   like a torn-off piece of a QR because that is what it was, and it could not
   scan. This is one complete symbol with the letter knocked out of the middle
   -- the standard logo-in-QR construction, which works because error
   correction H recovers about 30% of a symbol.

   EVERY NUMBER BELOW WAS MEASURED, not chosen. The harness renders the real
   button in chromium and then does what a lens does to it -- downscales,
   defocuses, skews the perspective, adds sensor noise -- and counts decodes.
   "It is a valid SVG" always passes and tells you nothing.

   1. POLARITY: modules must be DARKER than the field. Inverted (light on
      dark) decoded 0/16 at every size tried. That part stands.

      What does NOT stand is the round-2 claim that this forced a pale
      plate. That was measured at 110px / 41 modules, where near-black on
      near-black only decoded point-blank. At the current size and 33
      modules it is simply not true -- see note 6. Round 2 generalised from
      one size to all of them, and the pale plate shipped on that basis.

   2. MODULE SIZE IS THE LEVER, not pixel size.  Measured decode floor:

        ~3.2 px/module   close range only
        ~4.5 px/module   normal handheld distance
        ~7.0 px/module   arm's length and off-axis

   3. THE PAYLOAD IS UPPERCASE ON PURPOSE.  `HUMANEMERGENT.WORLD` encodes in
      QR *alphanumeric* mode (which allows A-Z, 0-9 and ".") rather than byte
      mode, so it fits version 2 at error H -- 33 modules including the quiet
      zone, against 41 for `https://humanemergent.world`. Fewer modules at the
      same width is a bigger module, and a bigger module is the whole game.
      Scanners treat a bare uppercase domain as a URL. **Re-adding the scheme,
      or lowercasing it, pushes this to 41 modules and costs a decode band.**

   4. THE KNOCKOUT HAS A CLIFF AT ABOUT A QUARTER.  Measured at three sizes:

        plate 22% of the edge    decodes, every size, every condition but
                                 the worst
        plate 30% of the edge    FAILS -- including in ideal conditions
        plate 38% of the edge    fails

      So `--e-qr-plate` is 0.22 and there is no headroom above it. Enlarging
      the E because it looks small is the one change here that silently turns
      the code off, and it will still look completely fine on screen.

   6. THE FIELD IS DARK, AND THE FLOOR IS MEASURED. Modules #0A0D12, field
      varied, at 180px and 240px through the lens simulation (of 5 each,
      ideal / close / normal handheld):

        #0E131B  1.04:1   0/0/0    -- v91's field. Does not decode at all.
        #141B26  1.13:1   5/5/0    -- close range only
        #1B2430  1.24:1   5/5/5    -- [shipped]
        #222C3B  1.38:1   5/5/5
        #2A3547  1.57:1   5/5/5

      That table is the CODE ALONE. On the live page -- red frame, rounded
      corners, the E knockout -- the same field measures (ideal / close /
      normal handheld, of 5):

        desktop at 1x, 240px     5/5/0
        phone at 2x, ~179px      5/5/3

      So the honest scope is: reliable CLOSE UP everywhere, and at normal
      handheld distance on phone screens most of the time. What the pale
      plate had and this does not is a phone held back from a desktop
      monitor. That was the trade taken for the dark look, on instruction.
      Shrinking the knockout to 0.15 did not recover it; contrast is the
      whole story. The pale build is not kept as an option -- it was
      rejected on sight -- but #2A3547 (1.57:1) recovers some of that band
      if it is ever wanted back.

      Below #1B2430 it falls off a cliff. DO NOT DARKEN THE FIELD PAST #1B2430 -- one
      step darker and handheld scanning goes to zero while the screen looks
      barely different. A test asserts the field colour and decodes it.

   5. THE QUIET ZONE IS INSIDE THE IMAGE (border=4). The page around the
      button is dark, so it cannot serve as one. The corner radius is kept
      below the quiet zone's width so rounding eats only margin, never a
      finder pattern. */

:root{
  /* Square, because a QR must be. --e-h still drives .nav's height and the
     hero rhythm, so both move together and nothing else needs to agree.

     Fluid, and the floor matters as much as the ceiling. A fixed 190px broke
     the mobile hero rhythm (measured: the five-element gap went to -26px at
     390px wide) and a fixed 150px was too small to decode at 1x. The clamp
     gives the widest square the viewport can actually hold, up to the size
     that decodes at arm's length.

     THE FLOOR IS A SCANNABILITY FLOOR, NOT A LAYOUT ONE. At 33 modules,
     170px is ~5.2px a module, which is the bottom of the normal-handheld
     band. Lowering it to fit a narrower layout turns the code off. */
  --e-w: clamp(170px, 46vw, 240px);
  --e-h: var(--e-w);
  --e-font: clamp(2rem, 6vw, 3rem);
  --e-radius: 14px;          /* < the 23px quiet zone at this size */
  --e-qr-plate: 0.22;        /* MEASURED CEILING. See note 4. Do not raise. */
  /* v92 round 3: dark field. Modules #0A0D12 on #1B2430, 1.24:1. See note 6. */
  --e-qr-field: #1B2430;
  --e-qr-art: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2033%2033%22%3E%3Cpath%20fill%3D%22%231b2430%22%20d%3D%22M0%200h33v33h-33z%22%2F%3E%3Cpath%20stroke%3D%22%230a0d12%22%20d%3D%22M4%204.5h7m2%200h1m5%200h2m1%200h7m-25%201h1m5%200h1m2%200h1m3%200h1m2%200h1m1%200h1m5%200h1m-25%201h1m1%200h3m1%200h1m2%200h2m1%200h3m3%200h1m1%200h3m1%200h1m-25%201h1m1%200h3m1%200h1m3%200h1m2%200h1m1%200h2m1%200h1m1%200h3m1%200h1m-25%201h1m1%200h3m1%200h1m1%200h3m1%200h2m2%200h1m1%200h1m1%200h3m1%200h1m-25%201h1m5%200h1m2%200h4m1%200h1m3%200h1m5%200h1m-25%201h7m1%200h1m1%200h1m1%200h1m1%200h1m1%200h1m1%200h7m-17%201h1m3%200h2m2%200h1m-15%201h2m2%200h4m1%200h4m2%200h2m1%200h1m-20%201h1m2%200h2m1%200h1m2%200h4m2%200h1m1%200h1m2%200h1m1%200h2m-25%201h1m2%200h6m1%200h3m1%200h2m2%200h4m2%200h1m-25%201h1m2%200h2m2%200h3m2%200h1m1%200h1m3%200h1m3%200h3m-25%201h2m2%200h1m1%200h1m1%200h5m1%200h2m1%200h1m1%200h3m1%200h2m-23%201h2m3%200h2m2%200h2m1%200h1m6%200h1m2%200h1m-24%201h3m2%200h2m1%200h1m1%200h1m1%200h2m1%200h3m5%200h1m-25%201h1m1%200h1m2%200h1m2%200h3m2%200h3m2%200h1m4%200h2m-21%201h3m3%200h2m1%200h1m2%200h6m1%200h1m-16%201h2m2%200h1m1%200h1m1%200h1m3%200h2m1%200h2m-25%201h7m1%200h2m1%200h1m3%200h2m1%200h1m1%200h1m1%200h1m-23%201h1m5%200h1m2%200h2m2%200h1m1%200h2m3%200h2m-22%201h1m1%200h3m1%200h1m2%200h1m3%200h1m2%200h5m3%200h1m-25%201h1m1%200h3m1%200h1m1%200h4m2%200h1m1%200h4m4%200h1m-25%201h1m1%200h3m1%200h1m1%200h2m2%200h1m4%200h1m1%200h2m2%200h1m-24%201h1m5%200h1m2%200h3m1%200h1m2%200h3m1%200h2m2%200h1m-25%201h7m2%200h6m2%200h5m2%200h1%22%2F%3E%3C%2Fsvg%3E%0A");
}

.nav-toggle:not(.ribbon-toggle){ position: relative; overflow: hidden; }
.nav-toggle:not(.ribbon-toggle)::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--e-qr-art);
  background-repeat: no-repeat;     /* ONE symbol. Tiling stops it decoding. */
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
}

/* The letter sits on its own opaque plate, in the light field's tone, so the
   knockout is clean rather than the letter sitting over live modules. */
.nav-toggle:not(.ribbon-toggle) .e-mark{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--e-w) * var(--e-qr-plate));
  height: calc(var(--e-w) * var(--e-qr-plate));
  background: var(--e-qr-field);
  border-radius: 3px;
}

/* Size options, measured rather than guessed. `e-qr-ring-options.html` renders
   all three at true size with their decode rates printed underneath.

     A "compact"  150px, 4.5 px/module -- normal handheld, not off-axis
     B "standard" 190px, 5.8 px/module -- [shipped]
     C "scanner"  240px, 7.3 px/module -- decodes at arm's length and tilted */
/* Field options, measured. `e-qr-ring-options.html` renders all three.
     A "whisper"  #141B26, 1.13:1 -- close range only, fails handheld
     B "subdued"  #1B2430, 1.24:1 -- [shipped] decodes to normal handheld
     C "legible"  #222C3B, 1.38:1 -- same decode band, more visible */
.e-qr-whisper{ --e-qr-field: #141B26; --e-qr-art: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2033%2033%22%3E%3Cpath%20fill%3D%22%23141b26%22%20d%3D%22M0%200h33v33h-33z%22%2F%3E%3Cpath%20stroke%3D%22%230a0d12%22%20d%3D%22M4%204.5h7m2%200h1m5%200h2m1%200h7m-25%201h1m5%200h1m2%200h1m3%200h1m2%200h1m1%200h1m5%200h1m-25%201h1m1%200h3m1%200h1m2%200h2m1%200h3m3%200h1m1%200h3m1%200h1m-25%201h1m1%200h3m1%200h1m3%200h1m2%200h1m1%200h2m1%200h1m1%200h3m1%200h1m-25%201h1m1%200h3m1%200h1m1%200h3m1%200h2m2%200h1m1%200h1m1%200h3m1%200h1m-25%201h1m5%200h1m2%200h4m1%200h1m3%200h1m5%200h1m-25%201h7m1%200h1m1%200h1m1%200h1m1%200h1m1%200h1m1%200h7m-17%201h1m3%200h2m2%200h1m-15%201h2m2%200h4m1%200h4m2%200h2m1%200h1m-20%201h1m2%200h2m1%200h1m2%200h4m2%200h1m1%200h1m2%200h1m1%200h2m-25%201h1m2%200h6m1%200h3m1%200h2m2%200h4m2%200h1m-25%201h1m2%200h2m2%200h3m2%200h1m1%200h1m3%200h1m3%200h3m-25%201h2m2%200h1m1%200h1m1%200h5m1%200h2m1%200h1m1%200h3m1%200h2m-23%201h2m3%200h2m2%200h2m1%200h1m6%200h1m2%200h1m-24%201h3m2%200h2m1%200h1m1%200h1m1%200h2m1%200h3m5%200h1m-25%201h1m1%200h1m2%200h1m2%200h3m2%200h3m2%200h1m4%200h2m-21%201h3m3%200h2m1%200h1m2%200h6m1%200h1m-16%201h2m2%200h1m1%200h1m1%200h1m3%200h2m1%200h2m-25%201h7m1%200h2m1%200h1m3%200h2m1%200h1m1%200h1m1%200h1m-23%201h1m5%200h1m2%200h2m2%200h1m1%200h2m3%200h2m-22%201h1m1%200h3m1%200h1m2%200h1m3%200h1m2%200h5m3%200h1m-25%201h1m1%200h3m1%200h1m1%200h4m2%200h1m1%200h4m4%200h1m-25%201h1m1%200h3m1%200h1m1%200h2m2%200h1m4%200h1m1%200h2m2%200h1m-24%201h1m5%200h1m2%200h3m1%200h1m2%200h3m1%200h2m2%200h1m-25%201h7m2%200h6m2%200h5m2%200h1%22%2F%3E%3C%2Fsvg%3E%0A"); }
.e-qr-legible{ --e-qr-field: #222C3B; --e-qr-art: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2033%2033%22%3E%3Cpath%20fill%3D%22%23222c3b%22%20d%3D%22M0%200h33v33h-33z%22%2F%3E%3Cpath%20stroke%3D%22%230a0d12%22%20d%3D%22M4%204.5h7m2%200h1m5%200h2m1%200h7m-25%201h1m5%200h1m2%200h1m3%200h1m2%200h1m1%200h1m5%200h1m-25%201h1m1%200h3m1%200h1m2%200h2m1%200h3m3%200h1m1%200h3m1%200h1m-25%201h1m1%200h3m1%200h1m3%200h1m2%200h1m1%200h2m1%200h1m1%200h3m1%200h1m-25%201h1m1%200h3m1%200h1m1%200h3m1%200h2m2%200h1m1%200h1m1%200h3m1%200h1m-25%201h1m5%200h1m2%200h4m1%200h1m3%200h1m5%200h1m-25%201h7m1%200h1m1%200h1m1%200h1m1%200h1m1%200h1m1%200h7m-17%201h1m3%200h2m2%200h1m-15%201h2m2%200h4m1%200h4m2%200h2m1%200h1m-20%201h1m2%200h2m1%200h1m2%200h4m2%200h1m1%200h1m2%200h1m1%200h2m-25%201h1m2%200h6m1%200h3m1%200h2m2%200h4m2%200h1m-25%201h1m2%200h2m2%200h3m2%200h1m1%200h1m3%200h1m3%200h3m-25%201h2m2%200h1m1%200h1m1%200h5m1%200h2m1%200h1m1%200h3m1%200h2m-23%201h2m3%200h2m2%200h2m1%200h1m6%200h1m2%200h1m-24%201h3m2%200h2m1%200h1m1%200h1m1%200h2m1%200h3m5%200h1m-25%201h1m1%200h1m2%200h1m2%200h3m2%200h3m2%200h1m4%200h2m-21%201h3m3%200h2m1%200h1m2%200h6m1%200h1m-16%201h2m2%200h1m1%200h1m1%200h1m3%200h2m1%200h2m-25%201h7m1%200h2m1%200h1m3%200h2m1%200h1m1%200h1m1%200h1m-23%201h1m5%200h1m2%200h2m2%200h1m1%200h2m3%200h2m-22%201h1m1%200h3m1%200h1m2%200h1m3%200h1m2%200h5m3%200h1m-25%201h1m1%200h3m1%200h1m1%200h4m2%200h1m1%200h4m4%200h1m-25%201h1m1%200h3m1%200h1m1%200h2m2%200h1m4%200h1m1%200h2m2%200h1m-24%201h1m5%200h1m2%200h3m1%200h1m2%200h3m1%200h2m2%200h1m-25%201h7m2%200h6m2%200h5m2%200h1%22%2F%3E%3C%2Fsvg%3E%0A"); }

/* v91: the E square's blink is removed. It was the pulse dot's keyframes
   applied to the button, which also meant the dot's country colours washed
   across the whole 130x110 mark every three seconds -- far too much movement
   for a menu trigger sitting still on the page. The dot keeps it; the button
   does not. --e-fill governs the button's background again. */


/* ==========================================================================
   v91/v92 — information blocks paint their own ink
   ==========================================================================
   Written when the QR tiled the whole page field. v92 took the texture off
   the body entirely (it lives in the E ring now), so nothing is currently
   showing through these blocks.

   KEEP THESE RULES ANYWAY. They were kept deliberately, by instruction: the
   rule on this site is that anything carrying information stays opaque over
   any texture, whatever texture happens to exist this round. Deleting them
   because the body is plain today is how the next round's background quietly
   reads through a control again. If you add a block that sits on bare body
   background and holds content, add it here.

   The two notes worth carrying forward, both measured rather than assumed:

   1. Tiled, a code will not scan. A 3x3 sheet of complete codes, each with a
      full 4-module quiet zone, failed to decode at every contrast from 1.02:1
      to 1.15:1 -- adjacent finder patterns give the detector several candidate
      symbols and it locks onto none. The E ring tiles, so the E ring is art.
   2. Polarity beats contrast. Dark modules on a lighter field decode down to
      1.08:1; light modules on a dark field never decode. */

.location-box,
.filter-row-locked,
.hero-cta-tab,
.hero-cta-panel,
.nav-emergency-panel,
.nav-links,
.crumb-menu,
.emg-pick-out,
.hero-cta-captured-chip{
  background-color: var(--ink);
}
/* The map panel and the sign-up band own their whole width. Same reasoning:
   a block that holds content paints its own ink. */
.map-context-label,
.carousel-map,
.hero-cta-band{ background-color: var(--ink); }


/* ---- the same list again, from v91 --------------------------------------
   Duplicated in the original; left as-is rather than collapsed, because the
   duplicate is inert and merging two identical rules is exactly the kind of
   tidy-up that has broken specificity on this sheet four rounds running. */
.location-box,
.hero-cta-tab,
.hero-cta-panel,
.nav-emergency-panel,
.filter-row-locked,
.emg-pick-out,
.hero-cta-captured-chip{
  background-color: var(--ink);
}
.location-box.na-on{ background-color: var(--ink); }


/* ==========================================================================
   v92 — the circled "i" is the brand mark now
   ==========================================================================
   Every information toggle on the site (93 of them in the HTML plus one built
   in script.js) was a circled lowercase "i". They are all a small white E with
   the accent tick instead -- the same mark as the hero button and the
   wordmark, just small.

   THE ACCENT IS A ::after, NOT AN <i class="accent-tick">.

   That is deliberate and it is the interesting part. Trap 3 -- `inner_text`
   splitting a word at the absolutely-positioned `.accent-tick`, so "EMERGENT"
   arrives as "E MERGENT" -- has been worked around four times. Generated
   content never appears in `inner_text` or `textContent` at all, so a mark
   built this way cannot produce the artifact. 93 sites of evidence that the
   technique holds; the big marks are still the old construction and are still
   open thread 14. This is the proof, not the fix.

   Colour: white, via `color` on the buttons below. It sits inside information
   blocks, so `--emergency-red` would be both unreadable at 18px and a fifth
   home for a colour that is supposed to mean one thing (the scarcity test
   caps it at 8 classes). The tick takes `currentColor` rather than
   `--signal`: a violet tick two pixels wide on a white E reads as a smudge,
   not as an accent. Measured at 18px before choosing. */

.e-info-mark{
  position: relative;
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1;
  letter-spacing: 0.01em;
}
/* The LETTER is generated content too, not just the accent, and the span is
   empty in the DOM. First pass put a real "E" in the markup and it worked --
   but it then contributed a stray "E" to the inner_text of every row holding
   an info toggle ("NORTH AMERICA MODE\nE"), where the old SVG contributed
   nothing. Caught by the trap-3 check below, which is exactly what that check
   is for. The mark is decorative -- every host button already carries its own
   aria-label -- so the correct answer is for it to be invisible to text
   entirely, not merely harmless.

   Note this is NOT the answer for the big marks in open thread 14. There the
   letter is brand content and belongs in the DOM as text; only the accent
   should move. This is the narrower case. */
.e-info-mark::before{ content: "E"; }
.e-info-mark::after{
  content: "";
  position: absolute;
  top: -0.2em;
  left: 50%;
  width: 0.16em;
  height: 0.4em;
  background: currentColor;
  border-radius: 1px;
  transform: translateX(-50%) rotate(28deg);
}

/* The two host buttons carried `color: var(--paper-dim)` at 0.6 opacity, which
   was right for a hairline circle and reads as grey mush on a letterform. The
   mark is paper white and the opacity does the recessive work instead. Both
   keep their hover and [aria-expanded] states, and both keep their aria-label
   -- these are still info toggles, the glyph is all that changed. */
.filter-row-info-btn,
.na-mode-info-btn{
  color: var(--paper);
  opacity: 0.72;
}
.filter-row-info-btn:hover,
.filter-row-info-btn[aria-expanded="true"],
.na-mode-info-btn:hover,
.na-mode-info-btn[aria-expanded="true"]{
  color: var(--paper);
  opacity: 1;
}
/* The region-group variant is 13px rather than 18px, so the mark is stepped
   down with it -- em would have inherited the row's font size, not the
   button's box. */
.region-group-label .e-info-mark{ font-size: 0.72rem; }


/* ==========================================================================
   v92 — one Size tile, and a Language tile
   ==========================================================================
   Was: a "TEXT SIZE" label over two tiles, "A Smaller" and "A Larger".
   Now: one tile that says Size and cycles upward, wrapping from the largest
   step back to the smallest, plus Language beside it in the same section.

   The steps are unchanged (0.9 / 1 / 1.15 / 1.3 on the root font size, which
   every rem on the site already follows). Only the control changed: four
   steps in a loop instead of two clamped buttons. There is no label above the
   row any more -- the tiles say what they are.

   `.nav-tile-grid` already exists and already collapses to two columns at
   narrow widths, so this reuses it rather than keeping `.text-size-row`'s
   separate flex row alive. `.text-size-row` and its two `A` sizes are gone
   from the sheet; nothing else referenced them. */

.nav-tile-grid-size{
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 14px;
}

/* The Language tile's label is the only one that changes at runtime, so it is
   given a min-height in ch rather than px: the autonyms run from "Language"
   to "Русский" to "বাংলা" and the row must not jump height as they cycle. */
#langTileLabel{
  display: inline-block;
  min-width: 7ch;
}

/* ---- the translated-scope notice ----------------------------------------
   Load-bearing, not decoration. The menu chrome and the fixed emergency-panel
   strings are translated; the per-page emergency note and all body copy are
   not. This says so, in the language the reader just picked. Removing it
   would leave the site implying a completeness it does not have. */
.i18n-notice{
  margin: 10px 0 0;
  padding: 7px 10px;
  border-left: 2px solid var(--line);
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--paper-dim);
}
[data-i18n-dir="rtl"]{ direction: rtl; text-align: right; }


/* ==========================================================================
   v92 — a code that actually scans
   ==========================================================================
   The E ring is art: it tiles, and tiling is what was measured in v90/v91 to
   stop a detector locking onto any one copy. No amount of contrast fixes
   that. So the working code is a separate object in a separate place, which
   is what the last two handoffs kept recommending.

   Bounded, one symbol, its own 4-module quiet zone, dark #0A0D12 modules on a
   light #E8ECF2 field -- polarity first, contrast second, per v90. Version 3,
   error correction M, encoding https://humanemergent.world, generated with
   segno. It sits directly under the Install tile because that is the moment
   someone would point a phone at it.

   A regression test renders it at 128px and decodes it with OpenCV. If a
   later round restyles it into near-blacks to match the page, that test
   fails, which is the entire point of it. DO NOT make this one subtle. */

.nav-install-qr{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--ink);   /* opaque, like every other content block */
}
.install-qr-img{
  display: block;
  width: 128px;
  height: 128px;
  flex-shrink: 0;
  border-radius: 4px;
  image-rendering: pixelated;     /* no interpolation across module edges */
}
.install-qr-note{
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--paper-dim);
}
@media (max-width: 560px){
  .nav-install-qr{ flex-direction: column; text-align: center; }
}

/* RTL base direction on the emergency panel; the parts that stay English keep
   their own dir="ltr" so a number or a place name is never reordered. */
.nav-emergency-panel[dir="rtl"]{ text-align: right; }
.nav-emergency-panel[dir="rtl"] .emg-big{ text-align: center; }
.emg-note-en[dir="ltr"], .emg-big-scope[dir="ltr"]{ text-align: left; }
.nav-emergency-panel[dir="rtl"] .emg-big-scope[dir="ltr"]{ text-align: center; }


/* ==========================================================================
   v92 — the band's third line is a registration choice, not a breadcrumb
   ==========================================================================
   It used to look like a location crumb and behave like one — clicking it
   scrolled back to the top and opened the hero's dropdown. It is a control
   over where the reader wants to be registered, so it has to READ like one:
   a label in front of it, and buttons that look pressable rather than like
   static text.

   The dotted underline and the caret are doing real work. Without them the
   two words are indistinguishable from the headline above, and nobody
   discovers that they cycle. */

.hero-cta-place-label{
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.hero-cta-place-btn{
  border-bottom: 1px dotted rgba(var(--signal-rgb), 0.65);
  cursor: pointer;
}
.hero-cta-place-btn::after{
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: 7px;
  vertical-align: middle;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.7;
}
.hero-cta-place-btn:hover,
.hero-cta-place-btn:focus-visible{
  color: var(--signal);
  border-bottom-color: var(--signal);
}
/* Once the reader has chosen for themselves it stops mirroring the page, and
   saying so is the difference between "this is a label" and "this is mine". */
.hero-cta-place[data-user-set="true"] .hero-cta-place-btn{
  border-bottom-style: solid;
}

.hero-cta-scope-line{
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--paper-dim);
}
.hero-cta-register-scope{
  color: var(--paper);
  font-weight: 700;
}
.hero-cta-scope-hint{
  display: block;
  font-size: 0.74rem;
  opacity: 0.75;
}

/* The registration scope, echoed on signup.html. Hidden until the home page
   has actually set one -- an empty "Registering in ." would be worse than
   nothing. */
.signup-scope-line{
  margin: 0 0 18px;
  font-size: 0.85rem;
  color: var(--paper-dim);
}
.signup-scope-hint{ display: block; font-size: 0.74rem; opacity: 0.8; }


/* ==========================================================================
   v93 — Human Émergent: the menu tile and the analysis page
   ==========================================================================
   The tile's icon is the brand mark, built the same way as the v92 info mark:
   letter and accent are both generated content, so the icon adds nothing to
   inner_text and cannot reintroduce trap 3. White, not red -- the scarcity
   test caps --emergency-red, and a menu icon is not the brand mark itself. */
.nav-tile-grid-he{ grid-template-columns: 1fr; margin-bottom: 14px; }
.nav-tile-he .he-mark{
  display: block;
  font-size: 1.35rem;
  line-height: 1;
  margin: 2px auto 6px;
}

/* ---- the page -----------------------------------------------------------
   A reading page, not a marketing one: one measure, generous leading, and
   the citations visible but quiet. Every block that holds content paints its
   own ink, per the standing rule for information blocks. */
.he-page{
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 72px;
  color: var(--paper);
  line-height: 1.7;
}
.he-hero{ text-align: center; margin-bottom: 40px; }
.he-eyebrow, .he-kicker{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: 0 0 8px;
}
.he-hero h1{
  font-family: var(--font-head);
  font-size: clamp(2rem, 6vw, 3rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.he-sub{ font-size: 1.05rem; color: var(--paper-dim); margin: 0 auto 22px; }
.he-toc{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; }
.he-toc a{
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--paper);
  text-decoration: none;
  background-color: var(--ink);
}
.he-toc a:hover, .he-toc a:focus-visible{ border-color: var(--signal); color: var(--signal); }
.he-method{ font-size: 0.82rem; color: var(--paper-dim); max-width: 600px; margin: 0 auto; }

.he-section{
  margin: 0 0 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;   /* clear the sticky ribbon on anchor jumps */
}
.he-section h2{ font-family: var(--font-head); font-size: 1.55rem; margin: 0 0 18px; }
.he-section h3{
  font-family: var(--font-head);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin: 26px 0 10px;
}
.he-claim, .he-lead{ margin: 0 0 14px; }
.he-lead{ color: var(--paper-dim); }
.he-cites{ white-space: normal; color: var(--paper-dim); font-size: 0.92em; }
.he-cite{ color: inherit; text-decoration: underline dotted rgba(var(--signal-rgb), 0.7); text-underline-offset: 3px; }
.he-cite:hover, .he-cite:focus-visible{ color: var(--signal); }

/* ERNA's own claims are visibly separated from sourced ones. */
.he-own{
  margin: 22px 0 6px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--signal);
  border-radius: var(--radius);
  background-color: var(--ink);
}
.he-own p{ margin: 0; }
.he-own-label{
  font-family: var(--font-mono);
  font-size: 0.66rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 6px !important;
}
.he-own a, .he-honest a{ color: var(--signal); }

.he-honest ul{ margin: 0; padding-left: 20px; color: var(--paper-dim); }
.he-honest li{ margin-bottom: 8px; }

.he-refnote{ font-size: 0.82rem; color: var(--paper-dim); }
.he-reflist{ list-style: none; margin: 0; padding: 0; }
/* APA hanging indent. */
.he-ref{
  padding-left: 2em;
  text-indent: -2em;
  margin: 0 0 12px;
  font-size: 0.86rem;
  line-height: 1.6;
  overflow-wrap: anywhere;   /* long URLs must not push the page sideways */
  scroll-margin-top: 90px;
}
.he-ref a{ color: var(--paper-dim); }
.he-ref:target{ outline: 1px solid var(--signal); outline-offset: 6px; border-radius: 2px; }
/* A global paragraph measure (set for the site's short marketing blocks)
   capped these at ~490px inside a 712px column, and pulled the centred
   eyebrow off-axis. Measured in a screenshot before overriding. */
.he-page p{ max-width: none; }
.he-hero p{ margin-left: auto; margin-right: auto; }


/* ==========================================================================
   v94 — the radial menu
   ==========================================================================
   The menu opens as a full-screen orbit around a small É. Layout is a 3x3
   grid: the emergency action and Size / Language sit directly above the
   hub, account tiles on the left arc, regions on the right arc, Human
   Émergent and the install code below.

   Everything here is scoped to `.nav-links.radial`, which script.js adds at
   init. Specificity (0,2,0)+ beats the old dropdown rules (.nav-links.open is
   (0,2,0) and sits EARLIER), and the tiles keep their existing colour, hover
   and pressed rules untouched -- this block changes arrangement, not look. */

.nav-links.radial{
  --ring-d: clamp(136px, 40vw, 196px);
  --core: 56px;
  --arm-gap: 12px;
}
.nav-links.radial.open{
  position: fixed;
  inset: 0;
  top: 0;                            /* beats the old `top: 100%` */
  z-index: 1000;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ring-d) minmax(0, 1fr);
  /* Equal flexible rows above and below: the hub lands on the true centre of
     the screen whenever the orbit fits, whatever the arms' heights. When it
     does not fit, both rows grow to their content and the overlay scrolls. */
  grid-template-rows: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
  grid-template-areas:
    "top    top  top"
    "left   hub  right"
    "bottom bottom bottom";
  align-content: stretch;
  justify-items: center;
  column-gap: var(--arm-gap);
  row-gap: 18px;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 12px calc(22px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  background-color: rgba(10, 13, 18, 0.93);   /* opaque enough to read over anything */
  -webkit-backdrop-filter: blur(14px) saturate(115%);
          backdrop-filter: blur(14px) saturate(115%);
  animation: radial-fade .22s ease both;
}
/* Centre the orbit vertically when it fits, top-align when it does not, so
   the emergency action at the top can never be scrolled out of reach. */

html.menu-open{ overflow: hidden; }

/* ---- arms --------------------------------------------------------------- */
.nav-links.radial .radial-arm{ display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.nav-links.radial .radial-top{ grid-area: top; width: min(460px, 100%); align-self: end; }
.nav-links.radial .radial-left{ grid-area: left; justify-self: end; align-self: center; }
.nav-links.radial .radial-right{ grid-area: right; justify-self: start; align-self: center; }
.nav-links.radial .radial-bottom{
  grid-area: bottom;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  width: min(560px, 100%);
  align-self: start;
}
.nav-links.radial .nav-section{ width: 100%; margin: 0; }
.nav-links.radial .radial-left .nav-section,
.nav-links.radial .radial-right .nav-section{ width: auto; }

/* Side grids stop being one joined card and become separate tiles, so each
   can sit on the arc. Same surface, border and radius language as before. */
.nav-links.radial .radial-left .nav-tile-grid,
.nav-links.radial .radial-right .nav-tile-grid{
  grid-template-columns: 1fr;
  gap: 8px;
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  max-height: none;
  margin: 0;
}
.nav-links.radial .radial-left .nav-tile,
.nav-links.radial .radial-right .nav-tile{
  width: 76px;
  padding: 10px 4px 9px;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.62rem;
  translate: var(--arc-x, 0) 0;      /* set by layoutArc() in script.js */
  transition: translate .25s cubic-bezier(.2,.8,.2,1), color .15s ease, border-color .15s ease;
}
.nav-links.radial .radial-left .nav-tile-label,
.nav-links.radial .radial-right .nav-tile-label{
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Section labels stay for screen readers on small screens; there is no room
   to print them without breaking the orbit. */
.nav-links.radial .radial-left .nav-section-label,
.nav-links.radial .radial-right .nav-section-label{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.nav-links.radial .nav-emergency-toggle{ width: 100%; }
.nav-links.radial .nav-tile-grid-size{ width: min(320px, 100%); margin: 0 auto; }

.nav-links.radial .radial-bottom .nav-section-he{ width: auto; flex: 1 1 180px; max-width: 260px; }
.nav-links.radial .radial-bottom .nav-tile-grid-he{ margin: 0; height: 100%; }
.nav-links.radial .radial-bottom .nav-tile-he{ height: 100%; }
.nav-links.radial .nav-install-qr{ margin: 0; flex: 0 1 auto; padding: 10px 12px; gap: 10px; }
.nav-links.radial .install-qr-img{ width: 96px; height: 96px; }
.nav-links.radial .install-qr-note{ max-width: 13ch; font-size: 0.72rem; }

/* ---- the hub: ring + core ------------------------------------------------ */
.nav-links.radial .radial-hub{
  grid-area: hub;
  position: relative;
  width: var(--ring-d);
  height: var(--ring-d);
  display: grid;
  place-items: center;
  align-self: center;
}
.nav-links.radial .radial-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: radial-gradient(circle,
      rgba(var(--signal-rgb), 0.12) 0%,
      rgba(var(--signal-rgb), 0.04) 42%,
      transparent 70%);
  animation: radial-ring-in .5s cubic-bezier(.2,.8,.2,1) both;
}
.nav-links.radial .radial-ring::before{          /* inner orbit, slowly turning */
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  border: 1px dashed rgba(var(--signal-rgb), 0.30);
  animation: radial-spin 80s linear infinite;
}
.nav-links.radial .radial-ring i{                /* where each arm meets the orbit */
  position: absolute;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px rgba(var(--signal-rgb), 0.8);
}
.nav-links.radial .radial-ring i:nth-child(1){ left: 50%; top: 0; }
.nav-links.radial .radial-ring i:nth-child(2){ left: 100%; top: 50%; }
.nav-links.radial .radial-ring i:nth-child(3){ left: 50%; top: 100%; }
.nav-links.radial .radial-ring i:nth-child(4){ left: 0; top: 50%; }

/* The core: the É in its square, much smaller than the hero. Same frame,
   letter and accent tokens as the hero button, so the country selection
   carries through (v82 slots are set on :root). Field is the QR plate's own
   #1B2430 -- it reads as the hero plate distilled, not a new object. */
.nav-links.radial .radial-core{
  position: relative;
  z-index: 1;
  width: var(--core);
  height: var(--core);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  border: 2px solid var(--e-frame, var(--emergency-red));
  border-radius: 14px;
  background: var(--e-qr-field, #1B2430);
  color: var(--e-ink, var(--emergency-red));
  box-shadow: 0 0 0 8px rgba(10, 13, 18, 0.92), 0 14px 40px rgba(0, 0, 0, 0.55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.nav-links.radial .radial-core:hover{ transform: scale(1.06); }
.nav-links.radial .radial-core:focus-visible{
  outline: 2px solid var(--signal);
  outline-offset: 4px;
}
.nav-links.radial .radial-core .e-mark{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(var(--core) * 0.46);
  line-height: 1;
  color: inherit;
  transform: translateY(0.05em);
}
.nav-links.radial .radial-core .e-mark::after{
  background: var(--e-accent, var(--emergency-red));
  top: -0.17em; width: 0.135em; height: 0.34em;
}

/* ---- emergency panel: drops under its own button, orbit steps back ------ */
.nav-links.radial .nav-section-emergency{ position: relative; z-index: 3; }
.nav-links.radial .nav-emergency-panel{
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  width: min(560px, calc(100vw - 24px));
  max-height: min(72vh, 680px);
  overflow-y: auto;
  margin: 0;
  text-align: left;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
}
.nav-links.radial .radial-left,
.nav-links.radial .radial-right,
.nav-links.radial .radial-bottom,
.nav-links.radial .radial-hub{ transition: opacity .2s ease, filter .2s ease; }
.nav-links.radial.emg-open .radial-left,
.nav-links.radial.emg-open .radial-right,
.nav-links.radial.emg-open .radial-bottom,
/* Size and Language are deliberately NOT dimmed: they stay usable while the
   emergency numbers are on screen. */
.nav-links.radial.emg-open .radial-hub{
  opacity: 0.12;
  filter: blur(2px);
  pointer-events: none;
}

/* ---- motion --------------------------------------------------------------
   Each arm arrives from the centre outward, staggered; closing reverses it.
   The site-wide reduced-motion rule shortens all of this to ~0, and script.js
   skips the É flight entirely under reduced motion. */
.nav-links.radial.open .radial-top   { animation: radial-in-top    .36s cubic-bezier(.2,.8,.2,1) .04s both; }
.nav-links.radial.open .radial-left  { animation: radial-in-left   .36s cubic-bezier(.2,.8,.2,1) .09s both; }
.nav-links.radial.open .radial-right { animation: radial-in-right  .36s cubic-bezier(.2,.8,.2,1) .09s both; }
.nav-links.radial.open .radial-bottom{ animation: radial-in-bottom .36s cubic-bezier(.2,.8,.2,1) .14s both; }
.nav-links.radial.closing{ animation: radial-out .17s ease forwards; }
.nav-links.radial.closing .radial-arm{ animation: radial-collapse .17s ease forwards; }

@keyframes radial-fade      { from { opacity: 0; } }
@keyframes radial-out       { to   { opacity: 0; } }
@keyframes radial-collapse  { to   { opacity: 0; transform: scale(0.94); } }
@keyframes radial-in-top    { from { opacity: 0; transform: translateY(26px)  scale(0.96); } }
@keyframes radial-in-left   { from { opacity: 0; transform: translateX(26px)  scale(0.96); } }
@keyframes radial-in-right  { from { opacity: 0; transform: translateX(-26px) scale(0.96); } }
@keyframes radial-in-bottom { from { opacity: 0; transform: translateY(-26px) scale(0.96); } }
@keyframes radial-ring-in   { from { opacity: 0; transform: scale(0.55) rotate(-25deg); } }
@keyframes radial-spin      { to   { transform: rotate(360deg); } }

/* ---- very small phones (≤ 360px): tighter still ------------------------- */
@media (max-width: 360px){
  .nav-links.radial{ --ring-d: 116px; --core: 50px; --arm-gap: 6px; }
  .nav-links.radial .radial-left .nav-tile,
  .nav-links.radial .radial-right .nav-tile{ width: 68px; }
  .nav-links.radial .install-qr-note{ display: none; }
}

/* ---- tablet and up: labelled arcs, horizontal tiles ---------------------- */
@media (min-width: 760px){
  .nav-links.radial{ --ring-d: clamp(200px, 30vmin, 300px); --core: 64px; --arm-gap: 26px; }
  .nav-links.radial.open{ row-gap: 22px; padding-left: 24px; padding-right: 24px; }
  .nav-links.radial .radial-left .nav-section-label,
  .nav-links.radial .radial-right .nav-section-label{
    position: static; width: auto; height: auto; overflow: visible;
    clip: auto; clip-path: none; white-space: nowrap;
    margin: 0 0 4px;
  }
  .nav-links.radial .radial-left .nav-tile,
  .nav-links.radial .radial-right .nav-tile{
    width: 190px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 16px;
    font-size: 0.76rem;
  }
  /* Icons face the ring on both sides: the left arm reads label-then-icon. */
  .nav-links.radial .radial-left .nav-tile{ flex-direction: row-reverse; }
  .nav-links.radial .radial-left .nav-section-label{ align-self: flex-end; }
  .nav-links.radial .radial-right .nav-section-label{ align-self: flex-start; }
  .nav-links.radial .install-qr-img{ width: 112px; height: 112px; }
}

/* ---- large desktop ------------------------------------------------------- */
@media (min-width: 1200px) and (min-height: 760px){
  .nav-links.radial{ --ring-d: clamp(260px, 34vmin, 340px); --core: 72px; --arm-gap: 34px; }
  .nav-links.radial .radial-left .nav-tile,
  .nav-links.radial .radial-right .nav-tile{ width: 210px; }
}

/* TRAP 1, fifth occurrence. `#continentTileGrid{ repeat(3,1fr) }` (and a
   2-column version at <=560px) is an ID selector, (1,0,0), so no number of
   classes can beat it -- `.nav-links.radial .radial-right .nav-tile-grid`
   at (0,4,0) silently lost and the regions laid out three across, pushing the
   overlay 113px sideways. Matched with the same ID rather than escalated. */
.nav-links.radial #continentTileGrid{ grid-template-columns: 1fr; }
.nav-links.radial .radial-core{ box-sizing: border-box; }

/* Short screens (landscape phones, 320x568): tighten vertical rhythm so more
   of the orbit fits before the overlay has to scroll. The emergency action is
   first in the grid, so it is always on screen at the top regardless. */
@media (max-height: 700px){
  .nav-links.radial.open{ row-gap: 12px; }
  .nav-links.radial .nav-emergency-toggle{ padding-top: 9px; padding-bottom: 9px; }
  .nav-links.radial .nav-tile-grid-size .nav-tile{ padding-top: 11px; padding-bottom: 10px; }
  .nav-links.radial .radial-left .nav-tile-grid,
  .nav-links.radial .radial-right .nav-tile-grid{ gap: 6px; }
}
@media (max-width: 480px){
  .nav-links.radial .install-qr-img{ width: 84px; height: 84px; }
  .nav-links.radial .radial-bottom .nav-tile-he{ padding-top: 14px; padding-bottom: 12px; }
}

/* An old rule, `.nav-section-emergency{ order: -1 }`, pins the emergency
   section first in ANY flex parent. It silently undid the v94 DOM reorder
   (Size / Language above the emergency button) -- the markup said one thing
   and the screen another. Reset inside the radial menu only. */
.nav-links.radial .nav-section-emergency{ order: 0; }

/* The emergency panel is the most important text on the site and nothing may
   paint over it. Its own z-index only competes INSIDE .radial-top, because
   the arm's entrance animation makes it a stacking context -- so the later,
   dimmed arms (opacity + filter = their own stacking contexts, later in the
   DOM) painted over the 911. Visible only in a screenshot. Lifting the whole
   arm fixes it for every state. */
.nav-links.radial .radial-top{ position: relative; z-index: 5; }