/* =========================================================
   TECHWHERE — DESIGN SYSTEM
   1 tokens · 2 base · 3 layout · 4 views · 5 logo · 6 buttons
   7 header/toggle · 8 hero + tile map · 9 cards/lists/tables
   10 forms · 11 sections · 12 accordion · 13 footer
   14 bars/modals · 15 motion · 16 responsive · 17 reduced motion
   ========================================================= */

/* ============================ 1. TOKENS ============================ */
:root {
  /* Brand, taken from the logo. White text fails WCAG AA on all three
     (2.1:1, 2.8:1, 3.9:1), so they carry decoration, large surfaces and
     navy text only. Text and white-on-blue use the shades below. */
  --brand-cyan:#22C3F7; --brand-blue:#1EA2F5; --brand-blue-deep:#177EF7;
  --brand-gradient:linear-gradient(135deg,#22C3F7 0%,#1EA2F5 50%,#177EF7 100%);
  /* The same gradient taken deeper so white text passes AA at every stop
     (4.5:1, 5.3:1, 7.1:1). Primary buttons. */
  --brand-gradient-strong:linear-gradient(135deg,#097BC3 0%,#0768D9 50%,#0655B1 100%);
  --brand-gradient-strong-hover:linear-gradient(135deg,#0769A6 0%,#075EC5 50%,#054B9E 100%);

  /* Accessible shades of the logo blue (contrast with white in brackets) */
  --blue-50:#EBF7FE; --blue-100:#D3ECFD; --blue-200:#A9D9FB;
  --blue-600:#0768D9;   /* 5.3:1 buttons, focus rings, ticks, borders */
  --blue-700:#075EC5;   /* 6.2:1 links, eyebrows, accent text */
  --blue-800:#0650A8;   /* 7.7:1 hover/pressed, accent ink */
  /* Deep blue for the dark sections (white 10.3:1) */
  --deep:#0E3C8A; --deep-2:#0B4FB0; --deep-3:#1E5BB8;
  --on-deep:#EBF7FE;        /* body text on deep, 9.5:1 */
  --on-deep-soft:#B8E6FB;   /* secondary text on deep, 7.8:1 */
  --on-deep-muted:#C3D4EE;  /* fine print on deep, 6.9:1 */
  /* Navy for headings and strong text on light backgrounds */
  --navy-900:#0B1B33; --navy-800:#13294A; --navy-700:#1C3B66;
  --cyan-200:#B8E6FB;
  /* One warm accent: small badges, chips and highlights, navy text on it */
  --sun:#FFC83D; --sun-100:#FFF3D1; --sun-600:#E0A800;

  --n-0:#FFFFFF; --n-25:#FAFCFC; --n-50:#F4F8F8; --n-100:#EAF0F1;
  --n-200:#D8E2E4; --n-300:#BCCACD; --n-400:#8EA2A7; --n-500:#65797F;
  --n-600:#4E6167; --n-700:#3C4F57; --n-800:#243439; --n-900:#16242B;
  --danger-600:#B3261E; --danger-50:#FDF2F1;

  /* Map: a very light blue base ramp, the selected state in brand blue with
     a deep outline and a pin, hover in deep blue */
  --map-0:#EEF1F4; --map-1:#C9E6FC; --map-2:#A9D7FA; --map-3:#89C8F8;
  --map-4:#69B8F5; --map-5:#4AA5F2;
  --map-hover:var(--deep); --map-selected:var(--brand-blue-deep); --map-selected-ring:var(--deep);
  --map-edge:#FFFFFF;

  --bg:#F7F9FC; --bg-alt:#EAF4FE; --bg-tint:var(--blue-50); --bg-deep:var(--deep);
  --surface:var(--n-0); --border:var(--n-200); --border-soft:var(--n-100);
  --text:var(--n-700); --text-strong:var(--navy-900); --text-muted:var(--n-600);
  --accent:var(--blue-700); --accent-ink:var(--blue-800);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px;
  --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px; --s-28:112px; --s-32:128px; --s-36:144px;

  --font-display:"Outfit","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-logo:var(--font-display);

  --t-display:clamp(2.125rem,1.35rem + 3.1vw,3.5rem);
  --t-h2:clamp(1.625rem,1.25rem + 1.5vw,2.25rem);
  --t-h3:clamp(1.125rem,1.03rem + .38vw,1.3125rem);
  --t-h4:1.0625rem;
  --t-body-lg:clamp(1.0625rem,1.02rem + .19vw,1.1875rem);
  /* Nothing below 14px except legal fine print (13px) */
  --t-body:1rem; --t-small:.9375rem; --t-caption:.875rem; --t-legal:.8125rem;
  --lh-tight:1.12; --lh-snug:1.3; --lh-body:1.65; --measure:65ch;

  --r-sm:16px; --r-md:20px; --r-lg:24px; --r-xl:28px;
  --e-1:0 1px 2px rgba(14,60,138,.04),0 2px 8px rgba(14,60,138,.04);
  --e-2:0 2px 6px rgba(14,60,138,.04),0 10px 28px rgba(14,60,138,.07);
  --e-3:0 8px 20px rgba(14,60,138,.06),0 24px 56px rgba(14,60,138,.10);

  --container:1120px; --gutter:var(--s-6);
  --header-h:68px; --header-sm:68px; --bar-h:56px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-bounce:cubic-bezier(.34,1.4,.64,1);
}
@media (max-width:599px){ :root{ --gutter:var(--s-4); } }

/* ============================ 2. BASE ============================ */
/* One variable font file per family (latin subset, weight axis), so every
   weight the site uses (400-700) costs one request: Outfit for headings,
   Inter for text. @fontsource-variable/outfit and /inter 5.3.0, OFL-1.1. */
@font-face{ font-family:"Outfit"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/outfit-latin-wght-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/inter-latin-wght-normal.woff2") format("woff2"); }
*,*::before,*::after{ box-sizing:border-box; }
/* `hidden` always wins over a class's display (cart totals, form errors) */
[hidden]{ display:none !important; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--s-4));
  -webkit-text-size-adjust:100%;
  scrollbar-color:var(--blue-200) var(--bg);
}
body{
  margin:0; font-family:var(--font-body); font-size:var(--t-body);
  line-height:var(--lh-body); color:var(--text); background:var(--bg);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--text-strong); margin:0 0 var(--s-4); overflow-wrap:break-word; }
h1{ font-size:var(--t-display); line-height:var(--lh-tight); letter-spacing:-.028em; font-weight:700; }
h2{ font-size:var(--t-h2); line-height:var(--lh-tight); letter-spacing:-.022em; font-weight:700; }
h3{ font-size:var(--t-h3); line-height:var(--lh-snug); letter-spacing:-.012em; font-weight:600; }
h4{ font-size:var(--t-h4); line-height:var(--lh-snug); font-weight:600; }
p{ margin:0 0 var(--s-4); max-width:var(--measure); }
p:last-child{ margin-bottom:0; }
a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--accent-ink); }
img,svg{ display:block; max-width:100%; }
ul,ol{ margin:0; padding:0; list-style:none; }
strong{ color:var(--text-strong); font-weight:600; }
::selection{ background:var(--blue-100); color:var(--navy-900); }

:focus-visible{ outline:2px solid var(--blue-600); outline-offset:3px; border-radius:var(--r-sm); }
.band--dark :focus-visible,.site-footer :focus-visible,.cta-band :focus-visible,
.lookup :focus-visible{ outline-color:var(--brand-cyan); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:300; background:var(--deep);
  color:var(--n-0); padding:var(--s-3) var(--s-4); border-radius:0 0 var(--r-sm) 0; font-weight:600; }
.skip-link:focus{ left:0; color:var(--n-0); }
.anchor{ display:block; height:0; }

/* ============================ 3. LAYOUT ============================ */
.shell{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--s-28); }
.section--alt{ background:var(--bg-alt); }
.band--dark{ background:var(--bg-deep); color:var(--on-deep); }
.band--dark h2,.band--dark h3{ color:var(--n-0); }
.band--dark .section-lede{ color:var(--cyan-200); }
.band--dark .eyebrow{ color:var(--brand-cyan); }

.page-head{ padding-block:var(--s-16) var(--s-8); background:linear-gradient(180deg,var(--blue-50),var(--bg)); }
.page-head h1{ max-width:20ch; }
.page-head .lede{ margin-bottom:0; }

.section-head{ margin-bottom:var(--s-12); }
.section-head--center{ max-width:62ch; margin-inline:auto; text-align:center; }
.section-head--center p{ margin-inline:auto; }
.section-lede{ font-size:var(--t-body-lg); color:var(--text-muted); margin:0; }
.eyebrow{ font-family:var(--font-display); font-size:var(--t-caption); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 var(--s-3); }
.sub-title{ margin-top:var(--s-16); margin-bottom:var(--s-3); }
.sub-note{ color:var(--text-muted); font-size:var(--t-small); margin-bottom:var(--s-6); }
.center{ text-align:center; }
.center.sub-note,.center.sub-title{ margin-inline:auto; }
p.center{ max-width:none; }
.center-block{ max-width:760px; margin-inline:auto; }
.measure-wide{ max-width:820px; margin-inline:auto; }

/* ============================ 4. VIEWS ============================ */
html.js[data-view="tech"] [data-audience="company"],
html[data-view="company"] [data-audience="tech"]{ display:none !important; }
/* Without JavaScript (no .js class) the view still switches, by CSS alone:
   the toggle's "I'm a company" radio, or a link to an anchor inside a
   company section (index.html#pick-state), shows the company side. */
html:not(.js)[data-view="tech"]:not(:has(#aud-toggle input[value="company"]:checked)):not(:has([data-audience="company"] :target)) [data-audience="company"],
html:not(.js):has(#aud-toggle input[value="company"]:checked) [data-audience="tech"],
html:not(.js):has([data-audience="company"] :target) [data-audience="tech"]{ display:none !important; }
html:not(.js) .demo-toggle{ display:none; }   /* the pause button needs the script it controls */
main{ transition:opacity .2s var(--ease); }
main.is-switching{ opacity:0; }

/* ============================ 5. LOGO ============================ */
/* The app icon at 40px next to the name. The wordmark inside the icon is
   unreadable below ~120px, so small sizes use the pin-only mark. */
.logo-link{ display:inline-flex; align-items:center; gap:var(--s-3); flex:0 0 auto; min-width:0;
  border-radius:var(--r-sm); color:var(--text-strong); text-decoration:none; }
.logo-link:hover{ color:var(--text-strong); }
.logo-mark{ width:40px; height:40px; flex:0 0 auto; border-radius:9px;
  box-shadow:0 2px 6px rgba(23,126,247,.28); }
.logo-text{ display:grid; line-height:1; min-width:0; }
.logo-name{ font-family:var(--font-display); font-size:1.5rem; font-weight:400;
  letter-spacing:-.03em; color:inherit; white-space:nowrap; }
.logo-name b{ font-weight:700; }
.logo-tag{ margin-top:4px; font-size:var(--t-caption); font-weight:500; letter-spacing:-.005em;
  color:var(--text-muted); white-space:nowrap; }
.logo-link--anim .logo-mark{ transform-origin:50% 100%; animation:pinDrop .9s var(--ease-bounce) both; }
@keyframes pinDrop{
  0%{ transform:translateY(-26px) scale(.82); opacity:0; }
  55%{ transform:translateY(3px) scale(1.04); opacity:1; }
  78%{ transform:translateY(-2px) scale(.99); }
  100%{ transform:none; opacity:1; } }
.logo-link--footer{ display:inline-grid; justify-items:start; gap:var(--s-3); color:var(--n-0); }
.logo-link--footer:hover{ color:var(--n-0); }
.logo-full{ width:120px; height:120px; border-radius:27px; box-shadow:0 6px 18px rgba(0,0,0,.28); }
.logo-link--footer .logo-tag{ margin-top:0; font-size:var(--t-small); color:var(--n-300); white-space:normal; }
@media (max-width:599px){ .logo-tag{ display:none; } .logo-name{ font-size:1.3125rem; } .logo-mark{ width:36px; height:36px; } }
@media (max-width:599px){ .logo-link--footer .logo-tag{ display:block; } }

/* ============================ 6. BUTTONS ============================ */
.btn{
  --btn-bg:transparent; --btn-fg:var(--text-strong); --btn-bd:transparent; --btn-sh:none;
  position:relative; background-origin:border-box; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  padding:var(--s-3) var(--s-6); min-height:44px;
  border:1px solid var(--btn-bd); border-radius:var(--r-sm);
  background:var(--btn-bg); color:var(--btn-fg); box-shadow:var(--btn-sh);
  font-family:var(--font-body); font-size:var(--t-small); font-weight:600; line-height:1.2;
  text-align:center; text-decoration:none; cursor:pointer;
  transition:transform .15s var(--ease),box-shadow .2s var(--ease),
             background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.99); }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn--primary{ --btn-bg:var(--brand-gradient-strong); --btn-fg:var(--n-0); --btn-bd:var(--blue-600); --btn-sh:var(--e-1); }
.btn--primary:hover{ --btn-bg:var(--brand-gradient-strong-hover); --btn-bd:var(--blue-700); --btn-sh:0 2px 4px rgba(11,27,51,.05),0 8px 22px rgba(30,162,245,.32); color:var(--n-0); }
.btn--primary:active{ --btn-bg:var(--blue-800); --btn-bd:var(--blue-800); --btn-sh:none; }
.btn--primary::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  background-size:260% 100%; background-position:160% 0; background-repeat:no-repeat; }
.btn--primary:hover::after{ animation:sheen .65s var(--ease) 1; }
@keyframes sheen{ from{ background-position:160% 0; } to{ background-position:-60% 0; } }
.btn--outline{ --btn-bd:var(--n-300); --btn-fg:var(--text-strong); --btn-bg:var(--n-0); }
.btn--outline:hover{ --btn-bd:var(--navy-900); --btn-bg:var(--n-50); color:var(--text-strong); --btn-sh:var(--e-1); }
.btn--outline:active{ --btn-bg:var(--n-100); }
.btn--on-dark{ --btn-bd:rgba(184,230,251,.5); --btn-fg:var(--n-0); --btn-bg:transparent; }
.btn--on-dark:hover{ --btn-bg:rgba(255,255,255,.1); --btn-bd:var(--cyan-200); color:var(--n-0); }
.btn--sun{ --btn-bg:var(--sun); --btn-fg:var(--navy-900); --btn-bd:var(--sun-600); --btn-sh:var(--e-1); }
.btn--sun:hover{ --btn-bg:#FFD466; --btn-bd:var(--sun-600); color:var(--navy-900); }
.btn--sun:active{ --btn-bg:var(--sun-600); }
.btn--sun:focus-visible{ outline:3px solid var(--n-0); outline-offset:3px; }
.btn--lg{ padding:var(--s-4) var(--s-8); font-size:var(--t-body); min-height:52px; }
.btn--block{ display:flex; width:100%; }
.link-btn{ font:inherit; color:var(--accent); background:none; border:0; padding:0;
  cursor:pointer; text-align:left; text-decoration:underline; text-underline-offset:3px; }
.link-btn:hover{ color:var(--accent-ink); }
.chip{ display:inline-flex; align-items:center; gap:var(--s-2); padding:var(--s-1) var(--s-3);
  border-radius:999px; background:var(--blue-50); border:1px solid var(--blue-100);
  color:var(--navy-800); font-size:var(--t-caption); font-weight:600; line-height:1.6; white-space:nowrap; }
.ico{ width:18px; height:18px; flex:0 0 auto; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ====================== 7. HEADER & TOGGLE ====================== */
.scroll-progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:200; pointer-events:none; }
.scroll-progress span{ display:block; height:100%; width:100%; transform:scaleX(0);
  transform-origin:left center; background:var(--brand-gradient); }
.site-header{ position:sticky; top:0; z-index:150; background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--border-soft);
  transition:box-shadow .25s var(--ease); }
.site-header.is-stuck{ box-shadow:var(--e-1); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  height:var(--header-h); }
.header-nav{ display:flex; align-items:center; gap:var(--s-4); flex:0 0 auto; }
.header-nav .btn{ padding:var(--s-2) var(--s-4); min-height:40px; }
.nav-link{ font-size:var(--t-small); font-weight:600; color:var(--text-strong);
  text-decoration:none; padding:var(--s-2) 0; border-bottom:2px solid transparent; }
.nav-link:hover{ color:var(--accent); border-bottom-color:var(--blue-100); }
.nav-link[aria-current="page"]{ color:var(--accent); border-bottom-color:var(--blue-600); }
.aud-bar{ position:relative; background:var(--blue-50); border-bottom:1px solid var(--blue-100); }
.aud-bar-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:var(--s-2) var(--s-6); min-height:var(--bar-h); padding-block:var(--s-2); }
.aud-toggle{ border:0; padding:0; margin:0; min-width:0; }
.aud-track{ position:relative; display:inline-flex; gap:var(--s-1); padding:var(--s-1);
  background:var(--n-0); border:1px solid var(--blue-100); border-radius:var(--r-sm);
  box-shadow:var(--e-1); max-width:100%; }
.aud-opt{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:var(--s-2) var(--s-4); border-radius:12px; cursor:pointer;
  font-size:var(--t-small); font-weight:600; color:var(--text-muted); white-space:nowrap;
  transition:color .2s var(--ease); }
.aud-opt input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.aud-opt:has(input:checked){ color:var(--n-0); }
.aud-opt:has(input:focus-visible){ outline:2px solid var(--blue-600); outline-offset:2px; }
.aud-thumb{ position:absolute; top:var(--s-1); left:var(--s-1); height:calc(100% - var(--s-2));
  width:0; border-radius:12px; background:var(--blue-600);
  transition:transform .3s var(--ease),width .3s var(--ease); z-index:0; }
.aud-hint{ margin:0; font-size:var(--t-caption); color:var(--text-muted); }

/* ====================== 8. HERO & TILE MAP ====================== */
.hero{ position:relative; overflow:hidden; padding-block:var(--s-16) var(--s-24);
  background:linear-gradient(180deg,var(--blue-50) 0%,var(--bg) 72%); }
.hero-glow{ position:absolute; left:48%; top:-10%; width:70vw; height:70vw;
  max-width:900px; max-height:900px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side,rgba(34,195,247,.12),rgba(30,162,245,.07) 40%,rgba(30,162,245,.025) 70%,rgba(30,162,245,0) 100%); }
.hero-grid{ position:relative; z-index:1; display:grid; gap:var(--s-12); align-items:center; }
.hero-copy h1{ margin-bottom:var(--s-6); max-width:17ch; }
.lede{ font-size:var(--t-body-lg); color:var(--text-muted); margin-bottom:var(--s-8); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); }
.hero-points{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-6); margin-top:var(--s-8);
  font-size:var(--t-small); font-weight:500; color:var(--navy-700); }
.hero-points li{ display:flex; align-items:center; gap:var(--s-2); }
.hero-points li::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--blue-600); flex:0 0 auto; }
.hero-map-wrap{ position:relative; z-index:1; display:grid; gap:var(--s-4);
  justify-items:center; min-width:0; }
.geomap{ position:relative; width:100%; max-width:560px; }
.geomap--lg{ max-width:760px; }
.geomap-canvas{ position:relative; width:100%; aspect-ratio:1.62 / 1;
  filter:drop-shadow(0 10px 24px rgba(11,27,51,.16)); }
.geomap-canvas svg{ width:100%; height:100%; display:block; overflow:visible; }
/* B8: the finished map is on screen from first paint (a pre-rendered SVG,
   images/map-placeholder.svg); script.js draws the live map on top and drops
   it. If JavaScript fails or is slow the map is still shown, never pale. */
.geomap-canvas{ background:url("images/map-placeholder.svg") center / 100% 100% no-repeat; }
.geomap-canvas.is-drawn{ background:none; }
.geomap-fallback{ margin:0; padding:var(--s-8) var(--s-6); text-align:center;
  border:1px dashed var(--border); border-radius:var(--r-lg);
  color:var(--text-muted); font-size:var(--t-small); background:var(--n-50); max-width:none; }

.st{ cursor:pointer; outline:none; transition:filter .25s var(--ease); }
.st-shape{ stroke:var(--map-edge); stroke-width:1; vector-effect:non-scaling-stroke;
  transition:fill .3s var(--ease); }
.st[data-l="1"] .st-shape{ fill:var(--map-1); }
.st[data-l="2"] .st-shape{ fill:var(--map-2); }
.st[data-l="3"] .st-shape{ fill:var(--map-3); }
.st[data-l="4"] .st-shape{ fill:var(--map-4); }
.st[data-l="5"] .st-shape{ fill:var(--map-5); }
.st[data-l="0"] .st-shape{ fill:var(--map-0); }
.st:hover .st-shape,.st:focus-visible .st-shape{ fill:var(--map-hover); }
.st.is-cur .st-shape{ fill:var(--map-selected); stroke:var(--map-selected-ring); stroke-width:1.8; }
.st:focus-visible{ outline:2px solid var(--blue-600); outline-offset:2px; }

.metro-dot{ fill:var(--sun); stroke:var(--deep); stroke-width:.8; pointer-events:none; }
.metro-halo{ fill:var(--sun); pointer-events:none; opacity:0; transform-box:fill-box; transform-origin:center; }
.geomap.is-live .metro-halo{ animation:haloPulse 2.4s ease-out infinite; animation-delay:calc(var(--i,0) * .2s); }
@keyframes haloPulse{ from{ transform:scale(.43); opacity:.55; } to{ transform:scale(2); opacity:0; } }
.arc{ fill:none; stroke:var(--brand-blue); stroke-width:1.4; stroke-linecap:round; pointer-events:none; opacity:0; }
.arc.is-on{ animation:arcFade 2.2s ease-in-out 1 both; }
@keyframes arcFade{ 0%{ opacity:0; } 25%{ opacity:.9; } 70%{ opacity:.9; } 100%{ opacity:0; } }

.map-readout{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--e-2); padding:var(--s-4) var(--s-6); text-align:center; min-width:min(280px,100%); }
.ro-state{ font-family:var(--font-display); font-weight:700; font-size:var(--t-h3);
  color:var(--text-strong); margin:0 0 var(--s-1); max-width:none; }
.ro-count{ margin:0; max-width:none; }
.ro-num{ font-family:var(--font-display); font-size:var(--t-h2); font-weight:700;
  color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.1; }
.ro-unit{ font-size:var(--t-small); color:var(--text-muted); }
.ro-note{ font-size:var(--t-caption); color:var(--text-muted); margin:var(--s-2) 0 0; max-width:none; }
.tm-legend{ display:flex; align-items:center; gap:var(--s-2); font-size:var(--t-caption);
  color:var(--text-muted); }
.legend-scale{ display:flex; gap:2px; }
.legend-scale i{ width:18px; height:12px; border-radius:4px; display:block;
  box-shadow:inset 0 0 0 1px rgba(14,60,138,.22); }
.legend-scale i[data-l="1"]{ background:var(--map-1); } .legend-scale i[data-l="2"]{ background:var(--map-2); }
.legend-scale i[data-l="3"]{ background:var(--map-3); } .legend-scale i[data-l="4"]{ background:var(--map-4); }
.legend-scale i[data-l="5"]{ background:var(--map-5); }

/* ==================== 9. CARDS, LISTS, TABLES ==================== */
.card{ position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--s-8); box-shadow:var(--e-1);
  transition:box-shadow .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease); }
.card:hover{ box-shadow:var(--e-2); border-color:var(--blue-100); transform:translateY(-3px); }
.card h3,.card h4{ margin-bottom:var(--s-3); }
.card-note{ font-size:var(--t-small); color:var(--text-muted); margin-top:var(--s-4); }

@media (hover:hover) and (pointer:fine){
  .card::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    opacity:0; transition:opacity .25s var(--ease); z-index:0;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(30,162,245,.09),transparent 65%); }
  .card:hover::before{ opacity:1; }
  .card > *{ position:relative; z-index:1; }
}

.two-col,.mm-grid,.pain-grid,.forwho,.pricing-grid,.preview-grid{ display:grid; gap:var(--s-6); }
.pricing-grid,.preview-grid{ margin-top:var(--s-6); }
.pricing-note{ position:relative; z-index:1; max-width:46rem; margin:var(--s-8) auto 0; text-align:center;
  font-size:var(--t-small); color:var(--text-muted); }
.two-col--even > .card{ height:100%; }
.check-list{ display:grid; gap:var(--s-3); }
.check-list li{ position:relative; padding-left:var(--s-8); font-size:var(--t-small); }
.check-list li::before{ content:""; position:absolute; left:2px; top:.42em; width:15px; height:8px;
  border-left:2px solid var(--blue-600); border-bottom:2px solid var(--blue-600); transform:rotate(-45deg); }
.check-list.has-ck li::before{ content:none; }
.check-list .ck{ position:absolute; left:0; top:.18em; width:18px; height:18px; overflow:visible; }
.check-list .ck path{ fill:none; stroke:var(--blue-600); stroke-width:2.6; stroke-linecap:round;
  stroke-linejoin:round; stroke-dasharray:26; stroke-dashoffset:26;
  transition:stroke-dashoffset .45s var(--ease); transition-delay:calc(var(--ci,0) * 70ms); }
.is-visible .check-list .ck path,.check-list.is-visible .ck path{ stroke-dashoffset:0; }
.cross-list{ display:grid; gap:var(--s-3); }
.cross-list li{ position:relative; padding-left:var(--s-8); font-size:var(--t-small); }
.cross-list li::before{ content:""; position:absolute; left:3px; top:.45em; width:13px; height:13px;
  background:linear-gradient(currentColor,currentColor) center/13px 2px no-repeat,
             linear-gradient(currentColor,currentColor) center/2px 13px no-repeat;
  transform:rotate(45deg); color:var(--n-400); }
.mini-check{ display:grid; gap:var(--s-2); margin-top:var(--s-6); }
.mini-check li{ position:relative; padding-left:var(--s-6); font-size:var(--t-small); color:var(--navy-700); }
.mini-check li::before{ content:""; position:absolute; left:0; top:.5em; width:12px; height:6px;
  border-left:2px solid var(--blue-600); border-bottom:2px solid var(--blue-600); transform:rotate(-45deg); }
.pill-list{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.pill-list li{ background:var(--blue-50); color:var(--navy-800); border:1px solid var(--blue-100);
  border-radius:var(--r-sm); padding:var(--s-2) var(--s-3); font-size:var(--t-caption); font-weight:600;
  line-height:1.35; text-wrap:balance; }
.nowrap,.pill-list .nowrap{ white-space:nowrap; }
/* two doors under the hero: one for companies, one for technicians */
.doors{ padding-block:var(--s-8) var(--s-12); }
.doors-grid{ display:grid; gap:var(--s-6); }
.door{ position:relative; display:flex; flex-direction:column; gap:var(--s-3); padding:var(--s-8) var(--s-6);
  background:var(--surface); border:1px solid var(--border); border-top:6px solid var(--blue-600);
  border-radius:var(--r-xl); transition:border-color .15s var(--ease),box-shadow .15s var(--ease); }
.door--tech{ border-top-color:var(--sun); }
.door-eyebrow{ margin:0; font-family:var(--font-display); font-size:var(--t-caption); font-weight:600;
  color:var(--text-muted); }
.door-title{ margin:0; font-size:var(--t-h3); }
.door-text{ margin:0; color:var(--text-muted); }
.door-cta{ margin-top:auto; padding-top:var(--s-2); font-weight:700; color:var(--blue-700); text-decoration:none; }
.door--tech .door-cta{ color:var(--navy-900); }
/* the whole card is the link target; the link text stays short for screen readers */
.door-cta::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.door:hover{ border-color:var(--blue-600); box-shadow:0 8px 24px rgba(14,60,138,.10); }
.door--tech:hover{ border-color:var(--sun-600); }
.door:has(.door-cta:focus-visible){ outline:3px solid var(--blue-600); outline-offset:3px; }
.door-cta:focus-visible{ outline:none; }
@media (min-width:768px){ .doors-grid{ grid-template-columns:1fr 1fr; } .door{ padding:var(--s-8); } }

/* company side: "Data you can trust" / "Who we are" / "What we don't promise" */
.trust-grid{ display:grid; gap:var(--s-6); }
.trust-card{ display:flex; flex-direction:column; gap:var(--s-3); }
.trust-card h3{ margin:0; }
.trust-card p{ margin:0; color:var(--text-muted); }
.trust-card .trust-sample{ margin-top:auto; padding-top:var(--s-2); color:var(--text-strong); font-weight:600; }
@media (min-width:1024px){ .trust-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* "What's included" beside "Skills covered": the 12 pills need the room, so
   the pair stacks until 1024 px, then splits 1:2 (heights stay equal) */
@media (min-width:600px) and (max-width:1023px){ .two-col.two-col--skills{ grid-template-columns:1fr; } }
@media (min-width:1024px){ .two-col.two-col--skills{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); } }

/* comparison table */
.table-scroll{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface); margin-inline:auto; max-width:900px; }
.cmp{ width:100%; min-width:560px; border-collapse:collapse; font-size:var(--t-small); }
.cmp th,.cmp td{ text-align:left; padding:var(--s-4); border-bottom:1px solid var(--border-soft); vertical-align:top; }
.cmp td{ max-width:34ch; }
.cmp thead th{ font-family:var(--font-display); font-size:var(--t-caption); letter-spacing:.06em;
  text-transform:uppercase; color:var(--n-0); background:var(--deep); border-bottom:0; }
.cmp thead th:nth-child(2){ background:var(--blue-700); color:var(--n-0); }
.cmp tbody th{ font-weight:600; color:var(--text-strong); width:28%; }
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{ border-bottom:0; }
.cmp td.yes{ color:var(--text-strong); font-weight:600; position:relative; }
.cmp td.yes::before{ content:""; position:absolute; inset:0; background:var(--blue-50);
  transition:opacity .5s var(--ease); z-index:0; }
.cmp td.no{ color:var(--text-muted); }
.cmp-title{ margin-top:var(--s-16); text-align:center; }
.cmp-note{ margin:var(--s-4) auto 0; font-size:var(--t-caption); color:var(--text-muted); text-align:center; }
.entry dl{ margin:0; display:grid; gap:0; }
.entry dt{ font-family:var(--font-display); font-size:var(--t-caption); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); margin-top:var(--s-3); }
.entry dd{ margin:0; font-size:var(--t-small); color:var(--text); }

/* states disclosure */
.disclosure{ max-width:900px; margin:var(--s-12) auto 0; border:1px solid var(--border);
  border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.disclosure > summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-4) var(--s-6); cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:600; color:var(--text-strong); }
.disclosure > summary::-webkit-details-marker{ display:none; }
.disclosure > summary:hover{ background:var(--n-50); }
.dis-icon{ position:relative; width:16px; height:16px; flex:0 0 auto; transition:transform .3s var(--ease); }
.dis-icon::before,.dis-icon::after{ content:""; position:absolute; background:var(--accent); border-radius:1px; }
.dis-icon::before{ inset:7px 0; height:2px; }
.dis-icon::after{ inset:0 7px; width:2px; }
.disclosure[open] .dis-icon{ transform:rotate(135deg); }
.states-wrap{ display:grid; gap:0 var(--s-8); padding:0 var(--s-6) var(--s-6); }
.states-table{ width:100%; border-collapse:collapse; font-size:var(--t-small); }
.states-table th{ text-align:left; font-weight:500; color:var(--text); padding:var(--s-2) 0;
  border-bottom:1px solid var(--border-soft); }
.states-table td{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600;
  color:var(--text-strong); padding:var(--s-2) 0 var(--s-2) var(--s-4); border-bottom:1px solid var(--border-soft);
  white-space:nowrap; }
.states-table thead th{ font-size:var(--t-caption); font-weight:600; color:var(--text-muted);
  padding-top:0; border-bottom:1px solid var(--border); }
.states-table thead th + th{ text-align:right; padding-left:var(--s-4); }
.states-table td:last-child{ color:var(--accent-ink); }
.disclosure > summary:focus-visible{ outline:3px solid var(--blue-600); outline-offset:-3px; }
/* The list is ordinary content: no reveal script may ever fade it or its label. */
.disclosure, .disclosure > summary, .disclosure .states-wrap{ opacity:1 !important; transform:none !important; }

/* ============================ 10. FORMS ============================ */
.field{ display:grid; gap:var(--s-2); border:0; padding:0; margin:0; min-width:0; }
.field > label,.field legend{ font-size:var(--t-small); font-weight:600; color:var(--text-strong); padding:0; }
.field-row{ display:grid; gap:var(--s-4); }
.select,.field input[type="text"],.field input[type="email"],.field input[type="tel"]{
  width:100%; min-height:46px; padding:var(--s-3) var(--s-4); font:inherit; font-size:var(--t-body);
  color:var(--n-900); background:var(--n-0); border:1px solid var(--n-500); border-radius:var(--r-sm);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background-color .15s var(--ease); }
.field input::placeholder{ color:var(--n-500); }
.field input:hover,.select:hover{ border-color:var(--n-700); }
.select:focus,.field input:focus{ outline:none; border-color:var(--blue-600);
  box-shadow:0 0 0 3px rgba(7,104,217,.2); }
.field input:disabled,.select:disabled{ background:var(--n-50); color:var(--n-400); cursor:not-allowed; }
.field input[aria-invalid="true"],.select[aria-invalid="true"]{ border-color:var(--danger-600); background-color:var(--danger-50); }
.field-hint{ margin:0; font-size:var(--t-caption); color:var(--text-muted); }
.select{ appearance:none; -webkit-appearance:none; padding-right:var(--s-12); cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230B1B33' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--s-4) center; background-size:12px 8px; }
.field-error{ display:flex; align-items:center; gap:var(--s-2); color:var(--danger-600);
  font-size:var(--t-caption); margin:0; font-weight:500; }
.field-error::before{ content:""; width:14px; height:14px; flex:0 0 auto; background:var(--danger-600);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8v5M12 16.5v.01' stroke='%23000' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8v5M12 16.5v.01' stroke='%23000' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat; }
.checks{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.check{ display:inline-flex; align-items:center; gap:var(--s-2); border:1px solid var(--n-300);
  border-radius:var(--r-sm); padding:var(--s-2) var(--s-3); font-size:var(--t-small); cursor:pointer;
  transition:border-color .15s var(--ease),background-color .15s var(--ease); }
.check:hover{ border-color:var(--blue-600); background:var(--n-50); }
.check input{ accent-color:var(--blue-600); width:16px; height:16px; margin:0; }
.check:has(input:checked){ background:var(--blue-50); border-color:var(--blue-600); color:var(--text-strong); }
.form-fine{ font-size:var(--t-legal); color:var(--text-muted); margin:0; }
/* information, not legal small print: card text stays at 14 px or more (B4) */
.form-fine--note{ font-size:var(--t-caption); }
.form-success{ margin:0; background:var(--blue-50); border:1px solid var(--blue-600);
  border-left-width:3px; border-radius:var(--r-sm); padding:var(--s-3) var(--s-4);
  color:var(--text-strong); font-weight:500; font-size:var(--t-small); }
.listing{ display:grid; gap:var(--s-8); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--s-12); box-shadow:var(--e-1);
  max-width:980px; margin-inline:auto; }
.listing-copy p{ color:var(--text-muted); }
.listing-form,.listing-join{ display:grid; gap:var(--s-4); }
.listing-join p{ margin:0; }

/* ========================== 11. SECTIONS ========================== */
.stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; padding-block:var(--s-12); text-align:center; }
.stat{ padding:var(--s-4) var(--s-2); }
.stat-num{ display:block; font-family:var(--font-display);
  font-size:clamp(1.75rem,1.2rem + 2.2vw,2.5rem); font-weight:700; line-height:1.05;
  color:var(--brand-cyan); font-variant-numeric:tabular-nums; }
.stat-rule{ display:block; width:36px; height:2px; margin:var(--s-3) auto; background:var(--brand-cyan);
  transform:scaleX(0); transform-origin:center; transition:transform .6s var(--ease) .25s; }
.stat.is-visible .stat-rule{ transform:scaleX(1); }
.stat-label{ display:block; font-size:var(--t-caption); letter-spacing:.08em;
  text-transform:uppercase; color:var(--n-300); }
.mm-icon{ display:grid; place-items:center; width:36px; height:36px; border-radius:var(--r-sm);
  background:var(--blue-50); color:var(--accent-ink); margin-bottom:var(--s-4); }
.mm-grid .card,.pain-grid .card{ display:flex; flex-direction:column; height:100%; }
.mm-grid .card p,.pain-grid .card p{ color:var(--text-muted); font-size:var(--t-body); }
.pain-grid .card{ overflow:hidden; }
.pain-grid .card::after{ content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:var(--blue-600); transform:scaleX(0); transform-origin:left center;
  transition:transform .4s var(--ease); z-index:2; }
.pain-grid .card:hover::after,.pain-grid .card:focus-within::after{ transform:scaleX(1); }
.pain-fix{ margin-top:auto !important; padding-top:var(--s-3); border-top:1px solid var(--border-soft);
  color:var(--navy-700) !important; font-weight:500; transition:color .3s var(--ease); }
.pain-grid .card:hover .pain-fix{ color:var(--accent-ink) !important; }
.forwho-card--yes{ border-top:2px solid var(--blue-600); }
.forwho-card--no{ border-top:2px solid var(--n-300); }

.coverage-split{ display:grid; gap:var(--s-8); align-items:start; margin-top:var(--s-8); }
.cov-map-col{ display:grid; gap:var(--s-4); justify-items:center; min-width:0; }
.cov-side{ min-width:0; }
.lookup{ background:var(--deep); border-radius:var(--r-lg); padding:var(--s-8); color:var(--blue-50); }
.lookup-field label{ display:block; font-family:var(--font-display); font-size:var(--t-h3);
  font-weight:600; color:var(--n-0); margin-bottom:var(--s-3); }
.lookup-result{ display:block; text-align:center; background:rgba(255,255,255,.07);
  border:1px solid rgba(184,230,251,.24); border-radius:var(--r-sm);
  padding:var(--s-4) var(--s-6); margin-top:var(--s-6); }
.lookup-result-num{ display:block; font-family:var(--font-display);
  font-size:clamp(1.75rem,1.2rem + 2.2vw,2.25rem); font-weight:700; color:var(--brand-cyan);
  line-height:1.1; font-variant-numeric:tabular-nums; }
.lookup-result-label{ display:block; font-size:var(--t-caption); color:var(--n-300); margin-top:var(--s-1); }
.lookup-result-price{ display:block; min-height:1.5em; margin-top:var(--s-2);
  font-family:var(--font-display); font-size:var(--t-body); font-weight:600; color:var(--sun);
  line-height:1.5; font-variant-numeric:tabular-nums; }
.lookup-buy{ margin-top:var(--s-4); }
/* Below 1024px the box is narrow enough for long names ("District of
   Columbia") to wrap; two lines are reserved for each changing line so the
   box keeps one height whichever state is picked (no layout shift). */
@media (max-width:1023px){
  .lookup-result-label, .lookup-result-price{ line-height:1.5; min-height:3em; }
  .lookup-result-label{ min-height:calc(2 * 1.5 * var(--t-caption)); }
  .lookup-buy{ min-height:calc(2 * 1.2em + 2 * var(--s-4) + 2px); }   /* two lines + padding + border */
}
.lookup-fine{ margin:var(--s-3) 0 0; font-size:var(--t-caption); color:var(--on-deep-muted); text-align:center; max-width:none; }

.price-card{ display:flex; flex-direction:column; position:relative; height:100%; }
.price-card .check-list{ margin-bottom:var(--s-8); }
.price-card .btn{ margin-top:auto; }
.price-card--featured{ border-color:var(--blue-600); box-shadow:var(--e-2); }
.price-card--featured::after{ content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:4px;
  border-radius:var(--r-lg) var(--r-lg) 0 0; background:var(--brand-gradient); pointer-events:none; }
.badge{ position:absolute; top:calc(-1 * var(--s-3)); left:var(--s-8); background:var(--sun);
  color:var(--navy-900); font-size:var(--t-caption); font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:2px var(--s-3); border-radius:999px; box-shadow:var(--e-1); }
.price{ margin:0 0 var(--s-6); }
.price-amount{ font-family:var(--font-display); font-size:clamp(1.625rem,1.3rem + 1.3vw,2rem);
  font-weight:700; color:var(--text-strong); }
.price-term{ font-size:var(--t-small); color:var(--text-muted); }
.pricing-solo{ max-width:720px; margin-inline:auto; }
.price-wide{ display:grid; gap:var(--s-6) var(--s-8); align-items:start; }
.pw-head h3{ margin-bottom:var(--s-2); }
.pw-head .price{ margin:0; }
.pw-list{ margin:0; }
.pw-cta{ margin-top:var(--s-2); }
@media (min-width:640px){
  .price-wide{ grid-template-columns:minmax(190px,0.85fr) 1.15fr; }
  .pw-list{ grid-template-columns:1fr 1fr; column-gap:var(--s-6); }
  .pw-cta{ grid-column:1 / -1; }
}

.steps-wrap{ position:relative; }
.steps-line{ position:absolute; left:16%; right:16%; top:56px; height:2px; display:none; }
.steps-line i{ display:block; height:100%; background:var(--blue-100); transform:scaleX(0);
  transform-origin:left center; transition:transform .9s var(--ease); }
.steps-wrap.is-visible .steps-line i{ transform:scaleX(1); }
.steps{ display:grid; gap:var(--s-6); position:relative; z-index:1; }
.step{ position:relative; }
.step-num{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:var(--n-0); border:2px solid var(--blue-100); color:var(--text-muted);
  font-family:var(--font-display); font-weight:700; font-size:var(--t-body);
  margin-bottom:var(--s-4); transition:background-color .4s var(--ease),color .4s var(--ease),
  border-color .4s var(--ease); }
.step.is-visible .step-num{ background:var(--blue-600); border-color:var(--blue-600); color:var(--n-0); }
.step p{ color:var(--text-muted); font-size:var(--t-body); }

.timeline{ position:relative; display:grid; gap:var(--s-6); }
.timeline::before{ content:""; position:absolute; left:7px; top:12px; bottom:12px; width:2px;
  background:var(--blue-100); }
.tl-item{ position:relative; padding-left:var(--s-8); }
.tl-dot{ position:absolute; left:0; top:var(--s-6); width:16px; height:16px; border-radius:50%;
  background:var(--blue-600); box-shadow:0 0 0 4px var(--bg); }
.section--alt .tl-dot{ box-shadow:0 0 0 4px var(--bg-alt); }
.tl-week{ font-family:var(--font-display); font-size:var(--t-caption); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:0 0 var(--s-2); }
.tl-card h3{ margin-bottom:var(--s-2); }
.tl-card p{ color:var(--text-muted); font-size:var(--t-body); }

.ready-card:hover{ transform:none; box-shadow:var(--e-1); }
.ready-bar-wrap{ margin-bottom:var(--s-6); }
.ready-bar{ height:6px; border-radius:999px; background:var(--n-100); overflow:hidden; }
.ready-fill{ display:block; height:100%; width:100%; border-radius:999px; background:var(--blue-600);
  transform:scaleX(0); transform-origin:left center; transition:transform .4s var(--ease); }
.ready-status{ margin:var(--s-3) 0 0; font-family:var(--font-display); font-weight:600;
  color:var(--text-strong); font-size:var(--t-small); }
.ready-list{ display:grid; gap:var(--s-2); }
.ready-item{ display:flex; align-items:flex-start; gap:var(--s-3); padding:var(--s-3) var(--s-4);
  border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; font-size:var(--t-small);
  transition:border-color .15s var(--ease),background-color .15s var(--ease); }
.ready-item:hover{ border-color:var(--blue-600); background:var(--n-50); }
.ready-item input{ accent-color:var(--blue-600); width:18px; height:18px; margin:1px 0 0; flex:0 0 auto; }
.ready-item:has(input:checked){ background:var(--blue-50); border-color:var(--blue-600); }
.ready-item:has(input:checked) span{ color:var(--text-strong); font-weight:500; }
.ready-msg{ margin:var(--s-6) 0; font-size:var(--t-small); color:var(--text-muted); }
.ready-msg.is-done{ color:var(--text-strong); font-weight:600; background:var(--blue-50);
  border-left:3px solid var(--blue-600); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:var(--s-3) var(--s-4); }

/* guides teaser band */
.teaser-list{ display:grid; gap:var(--s-3); max-width:760px; margin:0 auto var(--s-12); }
.teaser{ position:relative; display:flex; align-items:center; gap:var(--s-4);
  padding:var(--s-4) var(--s-6); background:rgba(255,255,255,.06);
  border:1px solid rgba(184,230,251,.2); border-radius:var(--r-sm);
  transition:background-color .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease); }
.teaser:hover{ background:rgba(255,255,255,.1); border-color:var(--brand-cyan); transform:translateX(4px); }
.teaser-n{ font-family:var(--font-display); font-size:var(--t-caption); font-weight:700;
  color:var(--on-deep-soft); flex:0 0 auto; }
.teaser-link{ color:var(--n-0); text-decoration:none; font-weight:500; }
.teaser-link:hover{ color:var(--cyan-200); }
.teaser-link::after{ content:""; position:absolute; inset:0; }

/* final CTA band */
.cta-band{ position:relative; overflow:hidden; padding-block:var(--s-28);
  background:var(--deep); color:var(--on-deep); }
.cta-glow{ position:absolute; inset:-30%; z-index:0; pointer-events:none;
  background:linear-gradient(115deg,#0E3C8A 0%,#0B4FB0 30%,#1E5BB8 48%,#0B4FB0 66%,#0E3C8A 100%);
  opacity:.85; }
.cta-inner{ position:relative; z-index:2; text-align:center; display:grid; gap:var(--s-6); justify-items:center; }
.cta-inner h2{ color:var(--n-0); max-width:20ch; margin:0; }
.cta-inner p{ color:var(--on-deep-soft); margin:0; }

/* ========================== 12. ACCORDION ========================== */
.accordion{ border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); margin-bottom:var(--s-6); }
.acc-item + .acc-item{ border-top:1px solid var(--border-soft); }
.acc-item h3,.acc-item h4{ margin:0; font-size:var(--t-body); }
.acc-trigger{ width:100%; display:flex; align-items:center; gap:var(--s-4);
  padding:var(--s-4) var(--s-6); background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--font-display); font-size:var(--t-h3); font-weight:600; line-height:var(--lh-snug);
  color:var(--text-strong); transition:background-color .15s var(--ease); }
.acc-trigger:hover{ background:var(--n-50); }
.acc-trigger:focus-visible{ outline-offset:-2px; }
.acc-label{ flex:1 1 auto; min-width:0; }
.acc-step{ flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px; border-radius:6px;
  background:var(--blue-50); color:var(--accent-ink); font-size:var(--t-caption); font-weight:700; }
.acc-trigger[aria-expanded="true"] .acc-step{ background:var(--blue-600); color:var(--n-0); }
.acc-icon{ position:relative; width:16px; height:16px; flex:0 0 auto; transition:transform .3s var(--ease); }
.acc-icon::before,.acc-icon::after{ content:""; position:absolute; background:var(--accent); border-radius:1px; }
.acc-icon::before{ inset:7px 0; height:2px; }
.acc-icon::after{ inset:0 7px; width:2px; }
.acc-trigger[aria-expanded="true"] .acc-icon{ transform:rotate(135deg); }
.acc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease); }
.acc-panel[data-open="true"]{ grid-template-rows:1fr; }
.acc-panel-inner{ overflow:hidden; }
.acc-panel-inner > *{ padding-inline:var(--s-6); color:var(--text-muted); font-size:var(--t-small); }
.acc-panel-inner > *:last-child{ padding-bottom:var(--s-6); }
.acc-panel-inner p{ margin-bottom:var(--s-3); max-width:var(--measure); }
.acc-panel-inner .mini-check{ max-width:var(--measure); }
.sample-label{ font-family:var(--font-display); font-size:var(--t-caption) !important; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent) !important; margin-bottom:var(--s-2) !important; }
.sample{ margin:0 var(--s-6) var(--s-3); padding:var(--s-4); background:var(--n-50);
  border-left:2px solid var(--blue-600); border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--navy-700); font-size:var(--t-small); font-style:italic; max-width:var(--measure); }
.acc-panel-inner > .sample{ padding-inline:var(--s-4); }
.disclaimer{ color:var(--text-strong) !important; font-weight:500; font-size:var(--t-caption) !important; }

/* =========================== 13. FOOTER =========================== */
.site-footer{ background:var(--bg-deep); color:var(--n-300); padding-block:var(--s-16) var(--s-8); }
.footer-grid{ display:grid; gap:var(--s-8); }
.footer-blurb{ font-size:var(--t-small); color:var(--n-300); max-width:38ch; margin-top:var(--s-4); }
.footer-head{ font-family:var(--font-display); font-size:var(--t-caption); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--brand-cyan); margin:0 0 var(--s-3); }
.footer-head--gap{ margin-top:var(--s-6); }
.footer-links{ display:grid; gap:var(--s-2); font-size:var(--t-small); }
.footer-contact{ font-size:var(--t-small); margin-bottom:var(--s-2); }
.footer-fine{ font-size:var(--t-legal); color:var(--on-deep-muted); }
.site-footer a,.site-footer .link-btn{ color:var(--cyan-200); text-decoration:none; }
.site-footer a:hover,.site-footer .link-btn:hover{ color:var(--n-0); text-decoration:underline; }
.footer-bottom{ margin-top:var(--s-12); padding-top:var(--s-6); border-top:1px solid rgba(255,255,255,.1);
  display:grid; gap:var(--s-1); font-size:var(--t-legal); color:var(--on-deep-muted); }
.footer-bottom p{ margin:0; max-width:none; }

/* ====================== 14. MOBILE BAR & MODALS ====================== */
.mobile-bar{ position:fixed; left:0; right:0; bottom:0; z-index:145; display:none; gap:var(--s-2);
  padding:6px var(--s-4) calc(6px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.98); border-top:1px solid var(--border);
  transform:translateY(110%); transition:transform .3s var(--ease); }
.mobile-bar.is-up{ transform:none; }
.mobile-bar .btn{ flex:1 1 0; min-height:44px; padding-inline:var(--s-3); }
.modal{ width:min(560px,calc(100vw - var(--s-8))); max-height:min(80vh,640px); padding:0;
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--e-3);
  color:var(--text); overflow:auto; }
.modal::backdrop{ background:rgba(11,27,51,.55); }
.modal[open]{ animation:modalIn .18s var(--ease); }
@keyframes modalIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.modal-inner{ padding:var(--s-8); }
.modal-inner h2{ font-size:var(--t-h2); }
.modal-inner .btn{ margin-top:var(--s-6); }
.modal-flag{ background:var(--blue-50); border-left:3px solid var(--blue-600);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:var(--s-3) var(--s-4);
  font-size:var(--t-small); font-weight:600; color:var(--text-strong); }

/* =========================== 15. MOTION =========================== */
/* Everything is visible by default. GSAP sets the starting state at runtime,
   so if the CDN or JavaScript fails nothing can stay hidden. */
.reveal, .rise { opacity:1; transform:none; }
/* Set by script.js only on elements that start below the fold, so nothing is
   hidden without JavaScript and nothing already on screen ever fades. */
.rv{ opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--ease) var(--rv-d,0ms), transform .5s var(--ease) var(--rv-d,0ms); }
.rv.rv-in{ opacity:1; transform:none; }

/* Progressive states driven by GSAP / JS, never required for visibility */
.stat-rule{ transform:scaleX(0); }
.stat.is-visible .stat-rule{ transform:scaleX(1); transition:transform .6s var(--ease) .2s; }
.steps-line i{ transform:scaleX(0); }
.steps-wrap.is-visible .steps-line i{ transform:scaleX(1); transition:transform .9s var(--ease); }
.step-num{ transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease); }
.cmp td.yes > span{ position:relative; z-index:1; }
.cmp td.yes::before{ opacity:0; }
.cmp.is-lit td.yes::before{ opacity:1; }

/* ========================= 16. RESPONSIVE ========================= */
@media (max-width:767px){
  .mobile-bar{ display:flex; }
  .lookup{ padding:var(--s-6) var(--s-4); }
  .lookup-result{ margin-top:var(--s-4); }
  /* Phones: the header scrolls away; only the 56px bottom bar stays on screen. */
  .site-header{ position:relative; }
  html{ scroll-padding-top:var(--s-4); }
  .site-footer{ padding-bottom:var(--s-24); }
  .aud-hint{ display:none; }
  .aud-bar-inner{ justify-content:center; }
  .aud-toggle,.aud-track{ width:100%; }
  .aud-opt{ flex:1 1 0; padding-inline:var(--s-2); }
  .header-nav{ gap:var(--s-3); }
  .header-nav .btn{ display:none; }
  .hero-map-wrap{ margin-top:var(--s-8); }
  .listing{ padding:var(--s-6); }
}
@media (min-width:600px){
  .field-row{ grid-template-columns:1fr 1fr; }
  .footer-bottom{ grid-template-columns:auto auto; justify-content:space-between; }
  .two-col,.forwho,.preview-grid{ grid-template-columns:repeat(2,1fr); }
  .mm-grid,.pain-grid{ grid-template-columns:repeat(2,1fr); }
  .states-wrap{ grid-template-columns:1fr 1fr; }
}
@media (min-width:768px){
  .stats-grid{ grid-template-columns:repeat(4,1fr); }
  .stat + .stat{ border-left:1px solid rgba(255,255,255,.12); }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .steps-line{ display:block; }
  .listing{ grid-template-columns:1fr 1.2fr; gap:var(--s-12); align-items:start; }
  .timeline{ gap:var(--s-8); }
  .coverage-split{ grid-template-columns:1.35fr 1fr; gap:var(--s-12); }
  /* The picker comes first in the HTML (phones and screen readers reach it
     first); side by side, the map stays on the left. */
  .coverage-split .cov-map-col{ grid-column:1; grid-row:1; }
  .coverage-split .cov-side{ grid-column:2; grid-row:1; }
}
@media (min-width:960px){
  .hero-grid{ grid-template-columns:45fr 55fr; gap:var(--s-16); }
  .pricing-grid{ grid-template-columns:repeat(3,1fr); }
  .preview-grid{ grid-template-columns:repeat(3,1fr); }
  .pain-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:var(--s-8); }
}
.shell--wide{ max-width:1320px; }
@media (min-width:1280px){
  .section{ padding-block:var(--s-36); }
  .mm-grid{ grid-template-columns:repeat(4,1fr); }
}

/* ====================== 17. REDUCED MOTION ====================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; transition-delay:0ms !important;
    scroll-behavior:auto !important; }
  .cmp td.yes::before{ opacity:1 !important; }
  .reveal,.rise,.rv{ opacity:1 !important; transform:none !important; }
  .stat-rule{ transform:scaleX(1) !important; }
  .steps-line i{ transform:scaleX(1) !important; }
  .step-num{ background:var(--blue-600) !important; border-color:var(--blue-600) !important;
    color:var(--n-0) !important; }
  .check-list .ck path{ stroke-dashoffset:0 !important; }
  .btn:hover,.card:hover,.teaser:hover{ transform:none; }
  .logo-link--anim .logo-mark{ animation:none !important; }
  .card::before{ display:none !important; }
  .st-shape{ fill-opacity:1 !important; stroke-dasharray:none !important;
    stroke-dashoffset:0 !important; }
  .metro{ opacity:1 !important; }
  .metro-halo{ opacity:0 !important; }
  .arc{ opacity:0 !important; }
}

/* =========================================================
   18. PRODUCT DEMO — mock app window
   Everything here is a static, readable screen by default;
   GSAP only moves the cursor and reveals steps on top of it.
   ========================================================= */

.demo-section{ background:var(--bg); }
.demo{ max-width:960px; margin-inline:auto; }

.demo-frame{
  position:relative;
  border-radius:var(--r-lg);
  background:var(--n-0);
  border:1px solid var(--border);
  box-shadow:var(--e-3);
  overflow:hidden;
}

/* --- window chrome --- */
.win-bar{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  background:var(--deep);
  border-bottom:1px solid var(--deep-2);
}
.win-dots{ display:inline-flex; gap:6px; flex:0 0 auto; }
.win-dots i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22); }
.win-dots i:first-child{ background:#E8705F; }
.win-dots i:nth-child(2){ background:#E8C05F; }
.win-dots i:nth-child(3){ background:var(--brand-cyan); }
.win-title{
  flex:1 1 auto; text-align:center;
  font-family:var(--font-logo); font-weight:600; font-size:var(--t-caption);
  letter-spacing:.02em; color:var(--cyan-200);
}
.demo-toggle{
  flex:0 0 auto; display:grid; place-items:center;
  width:30px; height:30px; padding:0;
  border:1px solid rgba(184,230,251,.32); border-radius:8px;
  background:rgba(255,255,255,.06); color:var(--cyan-200);
  cursor:pointer; transition:background-color .15s var(--ease), color .15s var(--ease);
}
.demo-toggle:hover{ background:rgba(255,255,255,.14); color:var(--n-0); }
.demo-toggle:focus-visible{ outline:2px solid var(--brand-cyan); outline-offset:2px; }
.demo-toggle .ico{ width:16px; height:16px; stroke-width:2; }
.demo-toggle .ico-play{ display:none; fill:currentColor; stroke:none; }
.demo-toggle[aria-pressed="true"] .ico-pause{ display:none; }
.demo-toggle[aria-pressed="true"] .ico-play{ display:block; }

/* --- body: sidebar + main --- */
/* No fixed floor: the window hugs its content so the results area cannot leave
   a band of empty white underneath at wide viewports. */
.win-body{ display:grid; grid-template-columns:168px 1fr; }
.win-side{
  display:flex; flex-direction:column; gap:var(--s-1);
  padding:var(--s-4) var(--s-3);
  background:var(--n-50); border-right:1px solid var(--border-soft);
}
.win-side-item{
  display:flex; align-items:center; gap:var(--s-2);
  padding:var(--s-2) var(--s-3); border-radius:8px;
  font-size:var(--t-caption); font-weight:600; color:var(--text-muted);
}
.win-side-item i{ width:14px; height:14px; border-radius:4px; background:var(--n-300); flex:0 0 auto; }
.win-side-item.is-on{ background:var(--blue-50); color:var(--accent-ink); }
.win-side-item.is-on i{ background:var(--blue-600); }
.win-steps{ margin:0; list-style:none; }
.win-steps .win-side-item{ padding:var(--s-2); white-space:nowrap; }
.win-steps .win-side-item i{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--n-0); border:1.5px solid var(--n-300); color:var(--text-muted);
  font-style:normal; font-size:var(--t-caption); font-weight:700; line-height:1; }
.win-steps .win-side-item.is-done{ color:var(--text-strong); }
.win-steps .win-side-item.is-done i{ background:var(--blue-600); border-color:var(--blue-600); color:var(--n-0); }
.win-steps .win-side-item.is-on i{ background:var(--deep); border-color:var(--deep); color:var(--n-0); }

.win-main{ padding:var(--s-6); display:grid; gap:var(--s-4); align-content:start; min-width:0; }

/* --- shared demo bits --- */
.dm-eyebrow{
  font-family:var(--font-display); font-size:var(--t-caption); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin:0 0 2px; max-width:none;
}
.dm-title{ font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  color:var(--text-strong); margin:0; max-width:none; }
.dm-bar{ display:block; height:9px; width:68px; border-radius:999px;
  background:linear-gradient(90deg,var(--n-200),var(--n-100)); filter:blur(2.2px); }
.dm-bar--wide{ width:104px; }

/* --- company: picker --- */
.dm-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; }
.dm-picker{ position:relative; min-width:190px; }
.dm-select{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:9px var(--s-3); border:1px solid var(--n-300); border-radius:var(--r-sm);
  background:var(--n-0); font-size:var(--t-small); color:var(--text-strong);
}
.dm-picker.is-open .dm-select{ border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(7,104,217,.2); }
.dm-caret{ width:8px; height:8px; border-right:2px solid var(--navy-900);
  border-bottom:2px solid var(--navy-900); transform:rotate(45deg) translateY(-2px); flex:0 0 auto; }
.dm-options{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:4;
  background:var(--n-0); border:1px solid var(--border); border-radius:var(--r-sm);
  box-shadow:var(--e-2); padding:var(--s-1); display:grid; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.dm-picker.is-open .dm-options{ opacity:1; visibility:visible; transform:none; }
.dm-options li{ padding:7px var(--s-3); border-radius:6px; font-size:var(--t-small); color:var(--text); }
.dm-options li[data-dm-opt].is-hot{ background:var(--blue-50); color:var(--accent-ink); font-weight:600; }

/* --- company: map + stat --- */
.dm-split{ display:grid; grid-template-columns:1.25fr 1fr; gap:var(--s-4); align-items:stretch; }
.dm-mapbox{
  position:relative; border:1px solid var(--border-soft); border-radius:var(--r-sm);
  background:var(--n-25); overflow:hidden; min-height:170px;
}
.dm-map-canvas{ position:absolute; inset:0; }
.dm-map-canvas svg{ width:100%; height:100%; display:block; }
.dm-map-canvas .dms{ fill:var(--map-1); stroke:var(--map-edge); stroke-width:.5; vector-effect:non-scaling-stroke; }
.dm-map-canvas .dms.is-hot{ fill:var(--blue-600); }
.dm-pill{
  position:absolute; left:var(--s-3); bottom:var(--s-3);
  padding:4px 10px; border-radius:999px; background:var(--sun); color:var(--navy-900);
  font-size:var(--t-caption); font-weight:700; letter-spacing:.04em;
}
.dm-stat{
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:var(--s-4); border:1px solid var(--border-soft); border-radius:var(--r-sm);
  background:var(--blue-50);
}
.dm-num{ font-family:var(--font-display); font-size:2.1rem; font-weight:700; line-height:1;
  color:var(--accent-ink); font-variant-numeric:tabular-nums; }
.dm-unit{ font-size:var(--t-caption); color:var(--text-muted); }
.dm-stat-rule{ width:28px; height:2px; background:var(--blue-600); margin:var(--s-2) 0; }
.dm-stat-note{ font-size:var(--t-caption); color:var(--text-muted); }
.dm-price{ font-size:var(--t-caption); color:var(--text); margin-bottom:var(--s-1); }
.dm-price b{ font-family:var(--font-display); font-size:1.05rem; font-weight:700; color:var(--accent-ink);
  font-variant-numeric:tabular-nums; }
.dm-stat.is-hot{ border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(7,104,217,.2); }

/* --- company: table --- */
.dm-table{ width:100%; border-collapse:collapse; font-size:var(--t-caption); }
.dm-table th{
  text-align:left; font-weight:600; color:var(--text-muted); font-size:var(--t-caption);
  letter-spacing:.08em; text-transform:uppercase;
  padding:0 var(--s-3) var(--s-2) 0; border-bottom:1px solid var(--border);
}
.dm-table td{ padding:7px var(--s-3) 7px 0; border-bottom:1px solid var(--border-soft);
  color:var(--text-strong); white-space:nowrap; }
.dm-table tr:last-child td{ border-bottom:0; }

.dm-actions{ display:flex; justify-content:flex-end; }
.dm-btn{
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:9px var(--s-4); border-radius:var(--r-sm);
  background:var(--blue-600); color:var(--n-0);
  font-size:var(--t-small); font-weight:600;
}
a.dm-btn{ text-decoration:none; }
a.dm-btn:hover{ background:var(--blue-700); color:var(--n-0); }
a.dm-btn:focus-visible{ outline:3px solid var(--blue-800); outline-offset:3px; }

/* --- technician: search + cards + checklist --- */
.dm-search{
  display:flex; align-items:center; gap:var(--s-3);
  padding:10px var(--s-4); border:1px solid var(--n-300); border-radius:var(--r-sm);
  background:var(--n-0); color:var(--text-muted);
}
.dm-search.is-on{ border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(7,104,217,.2); }
.dm-search-ico{ width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; }
.dm-search-text{ display:inline-flex; align-items:center; font-size:var(--t-small);
  color:var(--text-strong); min-height:1.2em; }
.dm-caret-blink{ display:inline-block; width:1.5px; height:1em; margin-left:1px;
  background:var(--blue-600); opacity:0; }
.dm-search.is-on .dm-caret-blink{ animation:dmCaret 1s steps(1) infinite; }
@keyframes dmCaret{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }

.dm-two{ display:grid; grid-template-columns:1fr 196px; gap:var(--s-4); align-items:start; }
.dm-cards{ display:grid; gap:var(--s-3); min-width:0; }
.dm-card{
  border:1px solid var(--border); border-radius:var(--r-sm);
  padding:var(--s-3) var(--s-4); background:var(--n-0);
}
.dm-card.is-open{ border-color:var(--blue-600); box-shadow:var(--e-1); }
.dm-card-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }
.dm-card-top h4{ margin:0; font-size:var(--t-small); }
.dm-tag{ padding:2px 8px; border-radius:999px; background:var(--blue-50);
  border:1px solid var(--blue-100); color:var(--accent-ink);
  font-size:var(--t-caption); font-weight:700; letter-spacing:.02em; }
.dm-kv{ display:grid; grid-template-columns:auto 1fr; gap:2px var(--s-3);
  margin:var(--s-2) 0 0; align-items:baseline; }
.dm-kv dt{ font-size:var(--t-caption); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); white-space:nowrap; }
.dm-kv dd{ margin:0; font-size:var(--t-caption); color:var(--text); }
.dm-kv--tight{ margin-top:0; }
.dm-expand{
  overflow:hidden; margin-top:var(--s-3); padding-top:var(--s-3);
  border-top:1px dashed var(--blue-100);
}

.dm-checklist{
  border:1px solid var(--border-soft); border-radius:var(--r-sm);
  padding:var(--s-4); background:var(--n-50);
}
.dm-checklist ul{ display:grid; gap:var(--s-2); margin-top:var(--s-3); }
.dm-checklist li{ display:flex; align-items:center; gap:var(--s-2);
  font-size:var(--t-caption); color:var(--text-muted); }
.dm-tick{
  display:grid; place-items:center; width:18px; height:18px; flex:0 0 auto;
  border:1.5px solid var(--n-300); border-radius:5px; background:var(--n-0);
}
.dm-tick svg{ width:12px; height:12px; fill:none; stroke:var(--n-0); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:26; stroke-dashoffset:26; }
.dm-checklist li.is-done{ color:var(--text-strong); font-weight:600; }
.dm-checklist li.is-done .dm-tick{ background:var(--blue-600); border-color:var(--blue-600); }
.dm-checklist li.is-done .dm-tick svg{ stroke-dashoffset:0; transition:stroke-dashoffset .3s var(--ease); }

.demo.is-armed .dm-card:not(.is-open) .dm-expand{ display:none; }

/* --- cursor + click ripple --- */
.demo-cursor{
  position:absolute; left:0; top:0; z-index:6; width:22px; height:22px;
  pointer-events:none; opacity:0;
}
.demo-cursor svg{ width:22px; height:22px; fill:var(--deep);
  stroke:#FFFFFF; stroke-width:1.2; filter:drop-shadow(0 2px 4px rgba(11,27,51,.4)); }
.demo-ripple{
  position:absolute; left:2px; top:2px; width:28px; height:28px; margin:-14px 0 0 -14px;
  border-radius:50%; border:2px solid var(--blue-600); opacity:0; pointer-events:none;
}

/* --- responsive --- */
@media (max-width:767px){
  .win-body{ grid-template-columns:1fr; }
  .win-side{ display:none; }
  .win-steps{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-1);
    padding:var(--s-2); border-right:0; border-bottom:1px solid var(--border-soft); }
  .win-steps .win-side-item{ padding:var(--s-1) var(--s-2); }
  .win-main{ padding:var(--s-4); gap:var(--s-3); }
  .dm-sm-hide{ display:none; }
  .dm-split{ grid-template-columns:1fr; }
  .dm-two{ grid-template-columns:1fr; }
  .dm-mapbox{ min-height:150px; }
  .dm-num{ font-size:1.6rem; }
  .dm-head{ align-items:stretch; }
  .dm-picker{ min-width:0; width:100%; }
  .demo-cursor{ display:none; }
}
@media (max-width:400px){
  .win-main{ padding:var(--s-3); }
  .dm-card{ padding:var(--s-3); }
  .dm-kv{ grid-template-columns:1fr; }
  .dm-kv dd{ margin-bottom:var(--s-2); }
}

/* --- reduced motion: the final frame, held still --- */
@media (prefers-reduced-motion:reduce){
  .demo-cursor{ display:none !important; }
  .demo-toggle{ display:none !important; }
  .dm-options{ opacity:0 !important; visibility:hidden !important; }
  .dm-pill{ opacity:1 !important; }
  .dm-expand{ height:auto !important; }
  .dm-search .dm-caret-blink{ animation:none !important; opacity:0 !important; }
  .dm-checklist li .dm-tick svg{ stroke-dashoffset:0 !important; }
}

/* ====================== 18. ARTICLES & GUIDE CARDS ====================== */

/* --- the readable column --- */
.art{ padding-block:var(--s-12) var(--s-24); }
.shell--art{ max-width:46rem; }

/* --- breadcrumbs: always one line, last crumb truncates --- */
.crumbs{ margin-bottom:var(--s-8); font-size:var(--t-caption); color:var(--text-muted); }
.crumbs ol{ display:flex; flex-wrap:nowrap; align-items:center; gap:var(--s-2); min-width:0; }
.crumbs li{ display:flex; align-items:center; gap:var(--s-2); white-space:nowrap; min-width:0; }
.crumbs li + li::before{ content:"/"; color:var(--n-300); }
/* earlier crumbs keep their width; only the current page truncates (they used to overlap at 360px) */
.crumbs li:not([aria-current]){ flex:0 0 auto; }
.crumbs li[aria-current]{ flex:1 1 auto; }
.crumbs a{ color:var(--text-muted); text-decoration:none; border-bottom:1px solid transparent; }
.crumbs a:hover{ color:var(--accent-ink); border-bottom-color:var(--brand-blue); }
.crumbs li[aria-current]{ color:var(--n-600); display:block; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }

/* --- title block --- */
.art-head{ margin-bottom:var(--s-12); padding-bottom:var(--s-8);
  border-bottom:1px solid var(--border-soft); }
.art-head h1{ max-width:28ch; margin-bottom:var(--s-6); }
.art-meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-1) var(--s-3);
  margin:0; max-width:none; font-size:var(--t-caption); color:var(--text-muted); }
.art-meta strong{ color:var(--n-600); font-weight:600; }
.art-meta span[aria-hidden]{ color:var(--n-300); }

/* --- "In short" direct-answer box --- */
.art-summary{ margin-bottom:var(--s-12); padding:var(--s-6); background:var(--blue-50);
  border:1px solid var(--blue-100); border-left:4px solid var(--brand-blue);
  border-radius:var(--r-sm); box-shadow:var(--e-1); }
.art-summary-h{ font-size:var(--t-caption); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-ink); margin:0 0 var(--s-3); line-height:1.2; }
.art-summary p{ font-size:var(--t-body-lg); line-height:1.55; color:var(--navy-800); max-width:none; }

/* --- body sections --- */
.art-sec{ margin-bottom:var(--s-12); }
.art-sec:last-of-type{ margin-bottom:0; }
.art-sec > h2{ margin-top:0; margin-bottom:var(--s-4); font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem); }
.art-sec > h3{ margin-top:var(--s-8); margin-bottom:var(--s-3); }
.art-sec a{ text-decoration:underline; }

/* --- lists --- */
.art-list,.art-steps{ display:grid; gap:var(--s-3); margin:0 0 var(--s-6);
  max-width:var(--measure); }
.art-list li{ position:relative; padding-left:var(--s-6); }
.art-list li::before{ content:""; position:absolute; left:3px; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--brand-blue); }
.art-steps{ counter-reset:artstep; gap:var(--s-4); }
.art-steps li{ position:relative; padding-left:var(--s-12); counter-increment:artstep;
  min-height:28px; }
.art-steps li::before{ content:counter(artstep); position:absolute; left:0; top:0;
  width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:var(--blue-100); color:var(--accent-ink); font-family:var(--font-display);
  font-size:var(--t-caption); font-weight:600; }

/* --- general-information note --- */
.art-note{ padding:var(--s-3) var(--s-4); margin-bottom:var(--s-4); max-width:none;
  background:var(--n-50); border:1px dashed var(--border); border-radius:var(--r-sm);
  font-size:var(--t-caption); color:var(--text-muted); font-style:italic; }

/* --- in-article tables (sit inside .table-scroll) --- */
.art-table{ width:100%; min-width:420px; border-collapse:collapse; font-size:var(--t-small); }
.art-table th,.art-table td{ text-align:left; padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--border-soft); vertical-align:top; }
.art-table thead th{ font-family:var(--font-display); font-size:var(--t-caption);
  letter-spacing:.06em; text-transform:uppercase; color:var(--n-0);
  background:var(--deep); border-bottom:0; white-space:nowrap; }
.art-table tbody th[scope="row"]{ color:var(--text-strong); font-weight:600;
  white-space:nowrap; background:var(--n-25); }
.art-table tbody tr:last-child th,.art-table tbody tr:last-child td{ border-bottom:0; }
.art-sec .table-scroll{ max-width:none; margin-bottom:var(--s-6); }

/* --- closing checklist --- */
.art-check{ padding:var(--s-6); background:var(--n-25); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--e-1); }
.art-check li{ font-size:var(--t-body); color:var(--n-700); }

/* --- related guides --- */
.art-related{ margin-top:var(--s-16); padding-top:var(--s-8);
  border-top:1px solid var(--border); }
.art-related h2{ font-size:var(--t-h3); margin-bottom:var(--s-6); }
.art-related ul{ display:grid; gap:var(--s-3); grid-template-columns:repeat(2,minmax(0,1fr)); }
.art-related li{ display:flex; }
.art-related a{ display:block; width:100%; padding:var(--s-4); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-sm); text-decoration:none;
  font-family:var(--font-display); font-size:var(--t-small); font-weight:600;
  color:var(--text-strong); line-height:var(--lh-snug);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease); }
.art-related a:hover{ border-color:var(--brand-blue); box-shadow:var(--e-2);
  transform:translateY(-2px); color:var(--accent-ink); }

/* --- glossary --- */
.glossary{ display:grid; gap:var(--s-4); margin:0; }
.gl-item{ padding:var(--s-4) var(--s-6); background:var(--surface);
  border:1px solid var(--border); border-left:3px solid var(--brand-blue);
  border-radius:var(--r-sm); scroll-margin-top:calc(var(--header-h) + var(--s-6)); }
.gl-item dt{ font-family:var(--font-display); font-size:var(--t-h4); font-weight:600;
  color:var(--text-strong); margin-bottom:var(--s-2); }
.gl-item dd{ margin:0; font-size:var(--t-small); max-width:var(--measure); }

/* --- guide index cards (hub pages, full-width shell) --- */
.gcard-grid{ display:grid; gap:var(--s-6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.gcard{ display:flex; flex-direction:column; padding:var(--s-6); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--e-1);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease); }
.gcard:hover{ border-color:var(--brand-blue); box-shadow:var(--e-2); transform:translateY(-3px); }
.gcard h3{ margin-bottom:var(--s-3); font-size:var(--t-h4); line-height:var(--lh-snug); }
.gcard h3 a{ color:var(--text-strong); text-decoration:none; }
.gcard h3 a:hover{ color:var(--accent-ink); text-decoration:underline; }
.gcard p{ margin:0; font-size:var(--t-body); color:var(--text-muted); max-width:none; }

/* --- "read the full guide" link out of an accordion --- */
.guide-more-wrap{ margin:var(--s-6) 0 0; max-width:none; }
.guide-more{ display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--font-display); font-size:var(--t-small); font-weight:600;
  color:var(--accent-ink); text-decoration:none; }
.guide-more::after{ content:""; width:7px; height:7px; border-top:2px solid currentColor;
  border-right:2px solid currentColor; transform:rotate(45deg);
  transition:transform .2s var(--ease); }
.guide-more:hover{ color:var(--blue-600); text-decoration:underline; }
.guide-more:hover::after{ transform:rotate(45deg) translate(2px,-2px); }

/* --- article responsive --- */
@media (max-width:899px){
  .art-related ul{ grid-template-columns:1fr; }
}
@media (max-width:599px){
  .art{ padding-block:var(--s-8) var(--s-16); }
  .art-head{ margin-bottom:var(--s-8); padding-bottom:var(--s-6); }
  .art-summary{ padding:var(--s-4); margin-bottom:var(--s-8); }
  .art-check{ padding:var(--s-4); }
  .gl-item{ padding:var(--s-4); }
  .art-sec{ margin-bottom:var(--s-8); }
  .crumbs{ margin-bottom:var(--s-6); }
  .art-steps li{ padding-left:var(--s-8); }
  .art-steps li::before{ width:22px; height:22px; }
  /* Let article tables wrap rather than scroll inside their own box on a phone. */
  .art-table{ min-width:0; }
  .art-table thead th,.art-table tbody th[scope="row"]{ white-space:normal; }
}
@media (prefers-reduced-motion:reduce){
  .gcard:hover,.art-related a:hover{ transform:none; }
  .guide-more:hover::after{ transform:rotate(45deg); }
}

/* ====================== 19. PORTAL (map, state panel, cart) ====================== */

/* --- layout: map beside the selected state --- */
.pmap-section{ padding-block:var(--s-16); }
.pmap-layout{ display:grid; gap:var(--s-8); align-items:start; }
.pmap-col{ min-width:0; }

.pmap-toolbar{ display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-4); }
.pmap-layers{ border:0; margin:0; padding:0; }
.pmap-check{ display:inline-flex; align-items:center; gap:var(--s-2);
  padding:var(--s-2) var(--s-4); background:var(--surface);
  border:1px solid var(--border); border-radius:999px;
  font-size:var(--t-small); font-weight:600; color:var(--text-strong); cursor:pointer; }
.pmap-check:hover{ border-color:var(--brand-blue); }
.pmap-check input{ accent-color:var(--blue-700); }
.pmap-hint{ margin:0; font-size:var(--t-caption); color:var(--text-muted); max-width:42ch; }

.pmap{ position:relative; width:100%; }
.pmap-canvas{ position:relative; width:100%; min-height:240px;
  filter:drop-shadow(0 10px 24px rgba(11,27,51,.14)); }
.pmap-canvas svg{ width:100%; height:auto; display:block; overflow:visible; }

.pmap-legend{ display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:var(--s-3); margin-top:var(--s-4); }
.pmap-note{ margin:0; font-size:var(--t-caption); color:var(--text-muted); max-width:60ch; }
.pmap-terr{ margin-top:var(--s-4); padding:var(--s-3) var(--s-4);
  background:var(--n-50); border:1px solid var(--border-soft);
  border-radius:var(--r-sm); max-width:none; }

/* --- coverage circles: aggregate areas on ZIP centroids --- */
/* Navy rim for the light states, white halo for the dark ones and the
   navy selection: at least 3.2:1 against every map colour. */
.layer-coverage{ filter:drop-shadow(0 0 1px rgba(255,255,255,.9)); }
.cov-circle{ fill:#FFFFFF; fill-opacity:.45; stroke:var(--deep);
  stroke-opacity:.85; stroke-width:1; pointer-events:none; }
.cov-sm{ fill-opacity:.35; }
.cov-md{ fill-opacity:.45; }
.cov-lg{ fill-opacity:.55; }
.cov-xl{ fill-opacity:.65; }

/* --- selected state panel --- */
.pmap-side{ min-width:0; }
.pstate{ padding:var(--s-6); }
.pstate-empty{ margin:0; color:var(--text-muted); font-size:var(--t-small); }
.pstate-name{ font-size:var(--t-h3); margin-bottom:var(--s-3); }
.pstate-count{ margin:0 0 var(--s-2); max-width:none; }
.pstate-num{ font-family:var(--font-display); font-size:var(--t-h2); font-weight:700;
  line-height:1.05; color:var(--accent-ink); font-variant-numeric:tabular-nums; }
.pstate-unit{ display:block; font-size:var(--t-caption); color:var(--text-muted); }
.pstate-price{ margin:0 0 var(--s-6); font-family:var(--font-display);
  font-size:var(--t-h3); font-weight:700; color:var(--text-strong); max-width:none; }
.pstate-sub{ margin:var(--s-8) 0 var(--s-2); font-size:var(--t-h4); }
.pstate-fine{ margin:0 0 var(--s-4); font-size:var(--t-caption);
  color:var(--text-muted); max-width:none; }
.pstate-tag{ display:inline-block; margin-left:var(--s-2); padding:1px 7px;
  border-radius:999px; background:var(--blue-100); color:var(--accent-ink);
  font-family:var(--font-body); font-size:var(--t-caption); font-weight:600; letter-spacing:.01em; }

/* --- cart --- */
.cart-layout{ display:grid; gap:var(--s-6); align-items:start; }
.cart-card{ padding:var(--s-6); }
.cart-items{ display:grid; gap:var(--s-3); margin:0 0 var(--s-6); }
.cart-empty{ color:var(--text-muted); font-size:var(--t-small); }
.cart-note{ margin:0 0 var(--s-4); padding:var(--s-3) var(--s-4); border-radius:var(--r-sm);
  background:var(--blue-50); color:var(--text); font-size:var(--t-small); }
.remove-form{ display:grid; gap:var(--s-5); padding:var(--s-6); max-width:34rem; margin-top:var(--s-6); }
.form-error{ margin:var(--s-4) 0 0; padding:var(--s-3) var(--s-4); border-radius:var(--r-sm);
  background:var(--danger-50); color:var(--danger-600); font-weight:600; }
.hp-field{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
/* free technician sign-up (portal/join.php) */
.section--tight{ padding-block:var(--s-8) var(--s-16); }
.join-shell{ max-width:48rem; }
.join-shell .join-form{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:var(--s-6); }
.join-shell .form-error{ margin:0 0 var(--s-6); }
.form-error p{ margin:0; }
.form-error ul{ margin:var(--s-2) 0 0; padding-left:1.25em; font-weight:500; }
.form-error a{ color:inherit; }
.join-form .field-row{ align-items:start; }
.join-consent{ padding:var(--s-4); border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--blue-50); }
@media (min-width:640px){ .join-shell .join-form{ padding:var(--s-8); } }
.wd-options{ display:grid; gap:var(--s-3); border:0; padding:0; margin:0 0 var(--s-4); }
.wd-option{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--s-3); align-items:center;
  padding:var(--s-4); border:1px solid var(--border-soft); border-radius:var(--r-sm); cursor:pointer; }
.wd-option:has(input:checked){ border-color:var(--blue-600); background:var(--blue-50); }
.wd-option.is-disabled{ opacity:.6; cursor:not-allowed; }
.wd-option-name{ font-weight:600; color:var(--text-strong); }
.wd-option-price{ font-family:var(--font-display); font-weight:700; color:var(--text-strong); }
.wd-option .pstate-tag{ grid-column:2 / -1; justify-self:start; margin-left:0; }
.cart-item{ display:grid; grid-template-columns:1fr auto auto; gap:var(--s-3);
  align-items:baseline; padding-bottom:var(--s-3); border-bottom:1px solid var(--border-soft); }
.cart-item-name{ font-size:var(--t-small); color:var(--text-strong); font-weight:500; }
.cart-item-price{ font-family:var(--font-display); font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--text-strong); }
.cart-remove{ font-size:var(--t-caption); }

.cart-totals{ display:grid; gap:var(--s-2); padding:var(--s-4) 0;
  border-top:1px solid var(--border); margin-bottom:var(--s-4); }
.cart-row{ display:flex; justify-content:space-between; gap:var(--s-4);
  margin:0; max-width:none; font-size:var(--t-small); }
.cart-row--off{ color:var(--accent-ink); }
.cart-row--cap{ color:var(--text-muted); font-size:var(--t-caption); }
.cart-row--total{ padding-top:var(--s-3); border-top:1px solid var(--border);
  font-family:var(--font-display); font-size:var(--t-h4); font-weight:700;
  color:var(--text-strong); }
.cart-row span:last-child{ font-variant-numeric:tabular-nums; }

.cart-licence{ display:flex; gap:var(--s-3); align-items:flex-start;
  margin-bottom:var(--s-4); font-size:var(--t-caption); color:var(--text-muted); }
.cart-licence input{ margin-top:3px; flex:0 0 auto; accent-color:var(--blue-700); }
.cart-full h3{ margin-bottom:var(--s-4); }

.pstate-table th[scope="row"]{ white-space:normal; }

/* --- portal footer --- */
.portal-footer-grid{ grid-template-columns:1fr; }
.portal-removal{ margin-top:0; }
.portal-removal a{ color:var(--brand-cyan); }
.portal-footer .footer-fine a{ color:var(--cyan-200); }

/* --- portal responsive --- */
@media (min-width:768px){
  .cart-layout{ grid-template-columns:1.4fr 1fr; }
  .portal-footer-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:960px){
  .pmap-layout{ grid-template-columns:1.5fr 1fr; }
  .portal-footer-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:599px){
  .pmap-section{ padding-block:var(--s-8); }
  .pstate{ padding:var(--s-4); }
  .cart-card{ padding:var(--s-4); }
  .pmap-legend{ gap:var(--s-2); }
  .cart-item{ grid-template-columns:1fr auto; }
  .cart-remove{ grid-column:2; }
}

@media (prefers-reduced-motion:reduce){
  .pmap-canvas{ filter:none; }
}

/* ====================== 20. PIN MOTIF & TECHNICIAN WARMTH ====================== */
/* The logo's pin and smile, used sparingly: section markers, empty and success
   states, the 404 page and the selected state on the map. */
:root{
  --pin-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath fill-rule='evenodd' d='M1.99 16.13A10.88 10.88 0 1 1 22.01 16.13C19.53 21.97 13.36 29.50 12.00 29.50C10.64 29.50 4.47 21.97 1.99 16.13ZM4.07 11.88a7.93 7.93 0 1 0 15.86 0a7.93 7.93 0 1 0 -15.86 0Z'/%3E%3Ccircle cx='8.77' cy='9.87' r='1.3'/%3E%3Ccircle cx='15.23' cy='9.87' r='1.3'/%3E%3Cpath d='M8.30 14.03A4.28 4.28 0 0 0 15.70 14.03' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* section markers: a small pin before the eyebrow of each section heading */
.section-head .eyebrow{ display:inline-flex; align-items:center; gap:var(--s-2); }
.section-head .eyebrow::before{ content:""; width:12px; height:15px; flex:0 0 auto;
  background:currentColor; -webkit-mask:var(--pin-mask) center/contain no-repeat; mask:var(--pin-mask) center/contain no-repeat; }
.section-head--center .eyebrow{ justify-content:center; }

/* empty states */
.cart-empty,.pstate-empty{ display:grid; justify-items:start; gap:var(--s-3); }
.cart-empty::before,.pstate-empty::before{ content:""; width:28px; height:35px;
  background:url("images/brand/pin-smile.svg") center/contain no-repeat; opacity:.9; }

/* success states (portal success and removal pages) */
.state-success h1::before{ content:""; display:block; width:48px; height:60px; margin-bottom:var(--s-4);
  background:url("images/brand/pin-smile.svg") center/contain no-repeat; }

/* the selected-state marker on the coverage map (drawn by portal.js) */
.map-pin{ pointer-events:none; }
.map-pin .mp-body{ fill:#FFFFFF; stroke:var(--deep); stroke-width:1.4; }
.map-pin .mp-face{ fill:var(--brand-blue-deep); }
.map-pin .mp-eye{ fill:#FFFFFF; }
.map-pin .mp-smile{ fill:none; stroke:#FFFFFF; stroke-width:1.5; stroke-linecap:round; }

/* 404 */
.notfound{ text-align:center; }
.notfound .notfound-pin{ width:96px; height:120px; margin:0 auto var(--s-6); }
.notfound h1{ margin-inline:auto; }
.notfound p{ margin-inline:auto; }
.notfound .hero-actions{ justify-content:center; }

/* Technician side: a little warmer. Sun on the toggle, chips and bullets,
   larger rounded cards and pill buttons. The company side stays as is. */
html[data-view="tech"] .aud-thumb{ background:var(--sun); }
html[data-view="tech"] .aud-opt:has(input:checked){ color:var(--navy-900); }
html[data-view="tech"] .hero-points li::before{ background:var(--sun-600); }
html[data-view="tech"] .chip,html[data-view="tech"] .pill-list li,
html[data-view="tech"] .dm-tag{ background:var(--sun-100); border-color:#FFE29A; color:var(--navy-900); }
html[data-view="tech"] .card,html[data-view="tech"] .listing,
html[data-view="tech"] .gcard{ border-radius:var(--r-xl); }
html[data-view="tech"] .btn{ border-radius:999px; }
html[data-view="tech"] .pstate-tag{ background:var(--sun-100); color:var(--navy-900); }

/* Order page (order.html on the static sites, built by build_split.py) */
.order-sub{ margin:var(--s-12) 0 var(--s-4); }
[data-order] .hero-actions{ margin-top:var(--s-6); }
.order-sample{ margin:var(--s-4) 0 0; }
.join-shell > .sales-final{ margin-top:var(--s-8); }