/* ==========================================================================
   onetouchdvir.com — ONE LIGHT for the web            (site.css)
   Sandbox build, Sept 27, 2026. Nothing here is live.

   The marketing site wears the same design system as the One Light driver
   and mechanic apps (Projects/Design-Sandbox/UI-Redesign-2026-09/design-system):
   - the SAME colour tokens (names and values), Night on :root, Day as one
     html[data-theme="light"] block. A visitor's phone setting picks the
     theme on first visit; the Night/Day switch in the header overrides it.
   - "One thing glows": the only glow on any page is the green One-Touch
     button inside the phone screens (the ping brand mark is flat, never
     glowing; stage light behind devices is neutral). Green = the signature. Blue = "you can act here". Red = a defect.
     Amber = caution. District colour = identity only.
   - Never colour alone: every status carries an icon and a word.
   - System fonts (like the app): zero web fonts, zero third-party requests,
     so the page loads fast on a rural district office connection.

   Differences from the app, on purpose:
   - Text is in rem so a visitor's browser font setting is respected
     (Rule 11 fixed-px sizing is about the phone app, not a web page).
   - .theme-night sections (hero, Out of Service, closing call) stay dark in
     both themes, the way a product page keeps a dark stage.

   CONTENTS
    1  Tokens: Night (default) + always-night stages
    2  Tokens: Day
    3  Reduced motion
    4  Base
    5  Layout: wrap, sections, grids
    6  Type: eyebrow, headings, lead, gauge numerals
    7  Header + nav + theme switch + mobile menu
    8  Buttons and links
    9  Brand mark + ping
   10  Cards, feature tiles, icon wells
   11  Status chips (the five mechanic statuses) + bus tiles
   12  Devices: phone + tablet frames, live screens, captions
   13  Hero
   14  Proof strip, quotes
   15  Steps (how it works, onboarding)
   16  Role tabs
   17  Out of Service stage
   18  Citation cards + legal text
   19  Pricing: plan card, receipt, calculator controls
   20  FAQ (details/summary)
   21  Founder, contact band
   22  Footer
   23  Long-form pages (legal, privacy, terms)
   24  Utilities
   25  Keyframes
   26  Paper (the printed monthly report)
   27  Home-only compositions
   28  Print
   29  Windows High Contrast (forced colours)
   ========================================================================== */


/* ==========================================================================
   1. TOKENS — NIGHT (default) — values identical to ds.css
   The selector list also re-applies Night inside .theme-night stages when
   the page is in Day, so a hero stays dark in both themes.
   ========================================================================== */
:root,
html[data-theme="light"] .theme-night{
  color-scheme:dark;

  --bg:#080B12;
  --app-bg:radial-gradient(130% 55% at 50% -12%, #111829 0%, #0A0E17 48%, #080B12 100%);
  --surface-1:#0F1420;
  --surface-2:#151C2B;
  --surface-3:#1C2437;
  --surface-inset:#05070C;
  --dock-bg:#0A0E17;
  --scrim:rgba(2,4,8,.72);
  --edge-hi:rgba(255,255,255,.07);
  --sheen:radial-gradient(90% 70% at 0% 0%, rgba(124,192,255,.07), rgba(124,192,255,0) 60%);

  --line-hair:#1F2839;
  --line-strong:#2B3750;
  --line-control:#5B6B8A;

  --ink-strong:#F2F5FA;
  --ink:#D6DEEB;
  --ink-2:#9AA8C0;
  --ink-3:#8391AB;
  --ink-off:#7A879E;

  --accent:#7CC0FF;
  --accent-fill:#2A5FB4;
  --accent-fill-hover:#3169C4;
  --on-accent:#FFFFFF;
  --accent-tint:#10233F;
  --focus:#7CC0FF;
  --focus-halo:rgba(124,192,255,.28);

  --go:#22CE67;
  --go-tint:#0B2016;
  --go-fill-a:#0C6331;
  --go-fill-b:#094F28;
  --go-rim:#2BD673;
  --on-go:#FFFFFF;
  --go-halo:rgba(34,206,103,.10);
  --go-glow:rgba(34,206,103,.30);
  --ping-core:#22CE67;
  --ping-check:#04200E;
  --ping-ring-1:rgba(34,206,103,.30);
  --ping-ring-2:rgba(34,206,103,.12);

  --stop:#FF7A6E;
  --stop-fill:#B42318;
  --on-stop:#FFFFFF;
  --stop-tint:#2A0E0D;

  --warn:#F2C14E;
  --warn-tint:#241D08;
  --warn-line:#8C6D1E;

  --oos-field:#990000;
  --oos-hot:#A80C0C;
  --oos-deep:#5C0000;
  --oos-panel:#6E0A0A;
  --on-oos:#FFFFFF;
  --oos-soft:#FFE1DC;
  --oos-line:rgba(255,255,255,.30);
  --oos-stripe:rgba(0,0,0,.38);

  --st-new:#FFB547;    --st-new-bg:#2A1D08;
  --st-prog:#6CB6FF;   --st-prog-bg:#0B2138;
  --st-parts:#C4A1FF;  --st-parts-bg:#231A3A;
  --st-oos:#FFFFFF;    --st-oos-bg:#990000;  --st-oos-line:#E5484D;
  --st-clear:#4ADE80;

  --sh-1:inset 0 1px 0 var(--edge-hi), 0 1px 0 rgba(0,0,0,.55);
  --sh-2:inset 0 1px 0 var(--edge-hi), 0 14px 28px -14px rgba(0,0,0,.9);
  --sh-3:inset 0 1px 0 var(--edge-hi), 0 30px 60px -24px rgba(0,0,0,.9);
  --sh-fill:inset 0 1px 0 rgba(255,255,255,.18);
  --sh-hero:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1.5px var(--go-rim),
            0 0 0 4px var(--go-halo), 0 14px 30px -14px var(--go-glow);

  /* web-only: soft NEUTRAL light behind a device (.device-glow). Deliberately not green:
     the only green glow on a page is the One-Touch button inside the phone screen. */
  --stage-glow:radial-gradient(50% 42% at 50% 46%, rgba(124,192,255,.08) 0%, rgba(124,192,255,.025) 45%, rgba(124,192,255,0) 72%);
  --stage-bg:radial-gradient(120% 70% at 70% -10%, #121A2C 0%, #0A0E17 50%, #080B12 100%);
  --device-bezel:#1A2130;
  --device-rim:#2B3750;
  --device-shadow:0 40px 80px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.05);
  --nav-bg:rgba(8,11,18,.97);
}

/* Always-night stages need their own base colours, since they sit inside
   a page that may be in Day. */
.theme-night{color:var(--ink);background-color:var(--bg)}

:root{
  /* ---- Type (web: rem so the browser font setting is respected) ------- */
  --font-ui:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;

  --fs-h1:clamp(2.4rem, 1.5rem + 3.6vw, 4.1rem);
  --fs-h1-page:clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  --fs-h2:clamp(1.9rem, 1.35rem + 2.3vw, 3.1rem);
  --fs-h3:clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  --fs-lead:clamp(1.1rem, 1.02rem + .35vw, 1.3rem);
  --fs-body:1.0625rem;      /* 17 px, same as the app body */
  --fs-small:.9375rem;      /* 15 px */
  --fs-meta:.875rem;        /* 14 px */
  --fs-label:.8125rem;      /* 13 px: the smallest text anywhere */
  --fs-gauge:clamp(3.4rem, 2.4rem + 4vw, 6rem);
  --tr-label:.08em;  --tr-kicker:.14em;  --tr-gauge:-.04em;  --tr-display:-.022em;

  /* ---- Space, shape ---------------------------------------------------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:32px; --r-pill:999px;
  --site-max:1200px;
  --gutter:clamp(16px, 4vw, 40px);
  --section-y:clamp(64px, 8vw, 128px);
  --nav-h:68px;

  /* ---- Motion ---------------------------------------------------------- */
  --dur-press:110ms; --dur-state:180ms; --dur-sheet:280ms; --dur-hero:420ms; --dur-reveal:600ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-decel:cubic-bezier(.05,.7,.1,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
}


/* ==========================================================================
   2. TOKENS — DAY (html[data-theme="light"]) — values identical to ds.css
   OOS colours and the hero fill are deliberately not overridden.
   ========================================================================== */
html[data-theme="light"]{
  color-scheme:light;

  --bg:#EEF1F6;
  --app-bg:linear-gradient(180deg, #F7F9FC 0%, #EEF1F6 100%);
  --surface-1:#F7F9FC;
  --surface-2:#FFFFFF;
  --surface-3:#FFFFFF;
  --surface-inset:#E9EDF3;
  --dock-bg:#FFFFFF;
  --scrim:rgba(10,16,32,.45);
  --edge-hi:rgba(255,255,255,.95);
  --sheen:linear-gradient(transparent, transparent);

  --line-hair:#D8DEE8;
  --line-strong:#C3CCDA;
  --line-control:#717E95;

  --ink-strong:#0A1020;
  --ink:#172033;
  --ink-2:#3D4859;
  --ink-3:#536074;
  --ink-off:#5F6B80;

  --accent:#1B56C4;
  --accent-fill:#1B56C4;
  --accent-fill-hover:#174BAD;
  --accent-tint:#E4EDFC;
  --focus:#1B56C4;
  --focus-halo:rgba(27,86,196,.22);

  --go:#0B6B32;
  --go-tint:#E6F6EC;
  --go-rim:#0A5A2B;
  --go-halo:rgba(12,99,49,.12);
  --go-glow:rgba(12,99,49,.35);
  --ping-core:#FFFFFF;
  --ping-check:#0C6331;
  --ping-ring-1:rgba(255,255,255,.34);
  --ping-ring-2:rgba(255,255,255,.14);

  --stop:#B42318;
  --stop-tint:#FDECEA;

  --warn:#8A5A00;
  --warn-tint:#FFF4D6;
  --warn-line:#A87A1E;

  --st-new:#8A4B00;    --st-new-bg:#FFF1DB;
  --st-prog:#0B4F8A;   --st-prog-bg:#E3F0FF;
  --st-parts:#5B2DA3;  --st-parts-bg:#F0E8FF;
  --st-clear:#0F6B34;

  --sh-1:0 1px 2px rgba(16,24,40,.07), 0 0 0 1px rgba(16,24,40,.03);
  --sh-2:0 1px 2px rgba(16,24,40,.06), 0 10px 22px -10px rgba(16,24,40,.20);
  --sh-3:0 2px 4px rgba(16,24,40,.05), 0 30px 60px -28px rgba(16,24,40,.30);
  --sh-fill:inset 0 1px 0 rgba(255,255,255,.22);
  --sh-hero:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1.5px var(--go-rim),
            0 0 0 4px var(--go-halo), 0 12px 24px -12px var(--go-glow);

  --stage-glow:radial-gradient(50% 42% at 50% 46%, rgba(27,86,196,.07) 0%, rgba(27,86,196,.02) 45%, rgba(27,86,196,0) 72%);
  --stage-bg:linear-gradient(180deg, #F7F9FC 0%, #EEF1F6 100%);
  --device-bezel:#1A2130;
  --device-rim:#3A4660;
  --device-shadow:0 36px 70px -34px rgba(16,24,40,.55), 0 0 0 1px rgba(16,24,40,.10);
  --nav-bg:rgba(255,255,255,.97);
}


/* ==========================================================================
   3. REDUCED MOTION — everything becomes an instant change
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1 !important;transform:none !important}
}


/* ==========================================================================
   4. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  background-color:var(--bg);
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
}
body{
  margin:0;min-width:320px;
  font-family:var(--font-ui);font-size:var(--fs-body);line-height:1.6;font-weight:450;
  color:var(--ink);background-color:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{margin:0;padding:0;border:0;background:none;cursor:pointer;text-align:inherit;-webkit-appearance:none;appearance:none;touch-action:manipulation}
b,strong{font-weight:700;color:var(--ink-strong)}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent-fill);color:var(--on-accent)}
hr{border:0;height:1px;background:var(--line-hair);margin:0}
abbr[title]{text-decoration:none}

.skip{
  position:absolute;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:var(--r-md);
  background:var(--accent-fill);color:var(--on-accent);font-weight:700;text-decoration:none;
}
.skip:focus{top:12px}

/* Icons: One Light sprite, 24 px grid, 2 px round strokes, currentColor */
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic-16{width:16px;height:16px}.ic-18{width:18px;height:18px}.ic-20{width:20px;height:20px}
.ic-28{width:28px;height:28px}.ic-32{width:32px;height:32px}.ic-bold{stroke-width:2.6}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
.num{font-variant-numeric:tabular-nums}


/* ==========================================================================
   5. LAYOUT
   ========================================================================== */
.wrap{width:100%;max-width:calc(var(--site-max) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:calc(820px + var(--gutter) * 2)}
.wrap-text{max-width:calc(720px + var(--gutter) * 2)}

.section{padding:var(--section-y) 0;position:relative}
/* Glows and tilted paper may paint past the edge; never let them widen the page. */
main > section,main > div,.site-foot{overflow-x:clip}
.section-tight{padding:calc(var(--section-y) * .6) 0}
.section-alt{background-color:var(--surface-1);box-shadow:inset 0 1px 0 var(--line-hair), inset 0 -1px 0 var(--line-hair)}
.section-head{max-width:760px;margin-bottom:clamp(32px, 4vw, 56px)}
.section-head.is-center{margin-left:auto;margin-right:auto;text-align:center}
.section-head .lead{margin-top:18px}
.section-foot{margin-top:clamp(28px, 3vw, 44px);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.section-head.is-center + * .section-foot,.section-foot.is-center{justify-content:center}

.grid{display:grid;gap:clamp(16px, 2vw, 24px)}
.grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4, minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px, 6vw, 88px);align-items:center}
.split.is-flip > :first-child{order:2}
.split-top{align-items:start}
.stack{display:flex;flex-direction:column;gap:16px}
.stack-8{display:flex;flex-direction:column;gap:8px}
.stack-24{display:flex;flex-direction:column;gap:24px}
.row{display:flex;align-items:center;gap:12px}
.row-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

@media (max-width: 1020px){
  .grid-4{grid-template-columns:repeat(2, minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2, minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr)}   /* not 1fr: a wide child (report paper, sheet) must not widen the column past the screen */
  .split.is-flip > :first-child{order:0}
}
@media (max-width: 680px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}


/* ==========================================================================
   6. TYPE
   ========================================================================== */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-label);font-weight:700;line-height:1.2;
  letter-spacing:var(--tr-kicker);text-transform:uppercase;color:var(--ink-3);
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--line-control)}
.eyebrow.is-go::before{background:var(--go)}
.eyebrow.is-plain::before{display:none}
.section-head .eyebrow + h2,.section-head .eyebrow + h1{margin-top:14px}

h1,.h1{
  font-family:var(--font-display);font-size:var(--fs-h1);font-weight:800;line-height:1.02;
  letter-spacing:var(--tr-display);color:var(--ink-strong);text-wrap:balance;
}
.h1-page{font-size:var(--fs-h1-page);line-height:1.06}
h2,.h2{
  font-family:var(--font-display);font-size:var(--fs-h2);font-weight:800;line-height:1.08;
  letter-spacing:var(--tr-display);color:var(--ink-strong);text-wrap:balance;
}
h3,.h3{
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:750;line-height:1.25;
  letter-spacing:-.01em;color:var(--ink-strong);
}
h4,.h4{font-size:var(--fs-body);font-weight:700;line-height:1.35;color:var(--ink-strong)}
.dim{color:var(--ink-2)}
h1 .dim,h2 .dim{color:var(--ink-3)}
.go-text{color:var(--go)}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.lead b,.lead strong{color:var(--ink-strong)}
.body-2{font-size:var(--fs-small);line-height:1.55;color:var(--ink-2)}
.meta{font-size:var(--fs-meta);color:var(--ink-3)}
.label{
  font-size:var(--fs-label);font-weight:700;line-height:1.2;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-3);
}
.prose p + p{margin-top:1em}
.prose ul,.prose ol{padding-left:1.3em;margin-top:.6em}
.prose li + li{margin-top:.35em}

/* Gauge numerals: the app's bus-number type, used for proof numbers */
.gauge{
  font-family:var(--font-display);font-size:var(--fs-gauge);font-weight:800;line-height:.92;
  letter-spacing:var(--tr-gauge);color:var(--ink-strong);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.gauge small{font-size:.38em;letter-spacing:-.01em;font-weight:750;color:var(--ink-2);margin-left:.08em}
.gauge.is-go{color:var(--go)}


/* ==========================================================================
   7. HEADER + NAV
   ========================================================================== */
.site-head{
  position:-webkit-sticky;position:sticky;top:0;z-index:40;
  background:var(--nav-bg);
  box-shadow:0 1px 0 var(--line-hair);
}
.site-head .wrap{display:flex;align-items:center;gap:16px;min-height:var(--nav-h)}
/* (The green hairline under the header was removed: green light belongs only to the
   One-Touch button inside the phone screens. The 1 px --line-hair edge above remains.) */
.brand{
  display:inline-flex;align-items:center;gap:10px;flex:none;min-height:44px;
  color:var(--ink-strong);text-decoration:none;font-family:var(--font-display);
  font-size:1.0625rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap;
}
.brand:hover{text-decoration:none}
.brand-tm{font-size:.6em;font-weight:700;vertical-align:super;color:var(--ink-3);margin-left:1px}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-sm);
  font-size:var(--fs-small);font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap;
}
.nav a:hover{color:var(--ink-strong);background:var(--surface-2)}
.nav a[aria-current="page"]{color:var(--ink-strong);box-shadow:inset 0 -2px 0 var(--accent)}
.head-actions{display:flex;align-items:center;gap:8px;flex:none}

.theme-switch{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 10px;border-radius:var(--r-md);
  font-size:var(--fs-meta);font-weight:700;color:var(--ink-strong);
  background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line-control);
}
.theme-switch .ic{width:18px;height:18px}
.theme-switch .ts-day,html[data-theme="light"] .theme-switch .ts-night{display:none}
html[data-theme="light"] .theme-switch .ts-day{display:inline-flex}
.theme-switch > span{display:inline-flex;align-items:center;gap:6px}

.menu-btn{display:none}
.mobile-nav{display:none}

/* Header widths, measured (Segoe UI): the full nav + worded Night/Day switch + "Call Bob"
   needs ~1090 px of content (1170 px viewport). From 1100 to 1199 px the nav links tighten
   and the switch shows its icon only (~1000 px, fits with room to spare). At 1099 px and
   below (iPad landscape at 1024 included) the Menu button takes over.
   site.js closes an open menu above 1099 px: keep the two numbers in step. */
@media (max-width: 1199px){
  .nav a{padding:0 9px}
  .site-head .theme-switch .ts-word{display:none}
  .site-head .theme-switch{padding:0 11px;min-width:44px;justify-content:center}
}
@media (max-width: 1099px){
  .nav{display:none}
  .head-actions{margin-left:auto}
  .menu-btn{
    display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 10px;border-radius:var(--r-md);
    font-size:var(--fs-meta);font-weight:700;color:var(--ink-strong);
    background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line-control);
  }
  .menu-btn .ic{width:20px;height:20px}
  .menu-btn .i-close,.menu-open .menu-btn .i-open{display:none}
  .menu-open .menu-btn .i-close{display:block}
  .mobile-nav{
    display:block;position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;z-index:39;
    overflow-y:auto;padding:12px var(--gutter) 40px;
    background:var(--bg);
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity var(--dur-state) var(--ease-standard), transform var(--dur-state) var(--ease-standard), visibility 0s linear var(--dur-state);
  }
  .menu-open .mobile-nav{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .menu-open{overflow:hidden}
  html:has(body.menu-open){overflow:hidden}   /* iOS Safari ignores overflow on body alone */
  .mobile-nav{overscroll-behavior:contain}
  /* List links only (direct children). The call/email buttons in .mobile-cta keep their
     .btn colours; a descendant selector here used to repaint them ink-on-blue. */
  .mobile-nav > a{
    display:flex;align-items:center;justify-content:space-between;min-height:60px;padding:0 4px;
    border-bottom:1px solid var(--line-hair);
    font-size:1.25rem;font-weight:700;color:var(--ink-strong);text-decoration:none;
  }
  .mobile-nav > a .ic{color:var(--ink-3)}
  .mobile-nav > a[aria-current="page"]{color:var(--accent)}
  .mobile-nav .mobile-cta{display:grid;gap:10px;margin-top:24px}
  .mobile-nav .mobile-cta a{border:0;justify-content:center;font-size:var(--fs-body)}
}
@media (max-width: 560px){
  .site-head .head-call{display:none}
  .site-head .theme-switch .ts-word{display:none}
  .site-head .theme-switch{padding:0 11px;min-width:44px;justify-content:center}
  .brand{font-size:1rem}
}
@media (max-width: 380px){
  .site-head .theme-switch{display:none}
}
.mobile-nav .theme-switch{display:flex;width:100%;justify-content:center;min-height:52px;margin-top:10px;font-size:var(--fs-body)}
.mobile-nav .theme-switch > span:not([hidden]){gap:8px}


/* ==========================================================================
   8. BUTTONS
   Blue = act. Green is reserved for the One-Touch sign button inside the
   device screens, never a marketing button (the one light stays special).
   ========================================================================== */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:10px 22px;border-radius:var(--r-md);
  font-size:var(--fs-body);font-weight:700;line-height:1.15;text-align:center;text-decoration:none;white-space:nowrap;
  transition:transform var(--dur-press) var(--ease-standard), background-color var(--dur-state) var(--ease-standard), box-shadow var(--dur-state) var(--ease-standard);
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.97)}
.btn .ic{width:20px;height:20px}
.btn-lg{min-height:60px;padding:12px 26px;font-size:1.125rem;font-weight:800}
.btn-sm{min-height:44px;padding:8px 16px;font-size:var(--fs-small)}
.btn-primary{color:var(--on-accent);background:var(--accent-fill);box-shadow:var(--sh-fill)}
.btn-primary:hover{background:var(--accent-fill-hover)}
.btn-quiet{color:var(--ink-strong);background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line-control), var(--sh-1)}
.btn-quiet:hover{background:var(--surface-3)}
.btn-ghost{color:var(--ink-strong);background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-control)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* Smallest phones: "Call Bob · 509-429-9805" at btn-lg is 294 px, wider than a 320 px screen's
   288 px column. Tighten the padding and let a label wrap rather than push past the edge. */
@media (max-width: 380px){
  .btn{white-space:normal;text-wrap:balance}   /* wrap at a word gap, never inside the number */
  .btn-lg{padding-left:18px;padding-right:18px}
}

.link-arrow{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-weight:700;color:var(--accent);text-decoration:none;
}
.link-arrow .ic{width:18px;height:18px;transition:transform var(--dur-state) var(--ease-standard)}
.link-arrow:hover .ic{transform:translateX(3px)}
.link-arrow:hover{text-decoration:underline}


/* ==========================================================================
   9. BRAND MARK + PING — the One-Touch ping from the app
   ========================================================================== */
.mark{position:relative;width:30px;height:30px;flex:none;display:grid;place-items:center}
.mark::before,.mark::after{content:"";position:absolute;border-radius:50%;background:var(--go)}
.mark::before{inset:0;opacity:.20}
.mark::after{inset:5px;opacity:.42}
.mark > span{
  position:relative;z-index:1;width:14px;height:14px;border-radius:50%;
  display:grid;place-items:center;background:var(--go);color:var(--ping-check);
}
html[data-theme="light"] .mark > span{color:var(--on-go)}
html[data-theme="light"] .theme-night .mark > span{color:var(--ping-check)}
.mark .ic{width:10px;height:10px;stroke-width:3.6}
.mark-lg{width:64px;height:64px}
.mark-lg::after{inset:10px}
.mark-lg > span{width:28px;height:28px}
.mark-lg .ic{width:18px;height:18px;stroke-width:3.2}

/* Inline ping bullet for lists: a small green core with a ring */
.ping-dot{
  display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;
  background:var(--go);box-shadow:0 0 0 4px var(--go-halo);
}


/* ==========================================================================
   10. CARDS, FEATURE TILES, ICON WELLS
   ========================================================================== */
.card{
  position:relative;border-radius:var(--r-lg);padding:clamp(20px, 2.4vw, 28px);
  background-color:var(--surface-2);background-image:var(--sheen);
  box-shadow:var(--sh-2), inset 0 0 0 1px var(--line-hair);
}
.card-flat{background:var(--surface-1);background-image:none;box-shadow:inset 0 0 0 1px var(--line-hair)}
.card-inset{background:var(--surface-inset);background-image:none;box-shadow:inset 0 0 0 1px var(--line-strong)}
.card h3 + p,.card h3 + .body-2{margin-top:8px}
.card .card-foot{margin-top:18px}
a.card{display:block;text-decoration:none;color:inherit;transition:transform var(--dur-state) var(--ease-standard), box-shadow var(--dur-state) var(--ease-standard)}
a.card:hover{transform:translateY(-2px);box-shadow:var(--sh-3), inset 0 0 0 1px var(--line-strong)}

.icon-well{
  width:48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center;flex:none;
  color:var(--accent);background:var(--accent-tint);
}
.icon-well .ic{width:24px;height:24px}
.icon-well.is-go{color:var(--go);background:var(--go-tint)}
.icon-well.is-stop{color:var(--stop);background:var(--stop-tint)}
.icon-well.is-warn{color:var(--warn);background:var(--warn-tint)}
.card .icon-well{margin-bottom:18px}

.feature-list{list-style:none;display:grid;gap:12px}
.feature-list li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.feature-list li > .ic{width:20px;height:20px;margin-top:3px;color:var(--go);stroke-width:2.6}
.feature-list li > .ping-dot{margin-top:8px}
.feature-list.is-x li > .ic{color:var(--ink-3)}

/* "Built for the 5:30 AM yard" condition cards */
.condition{display:flex;flex-direction:column;gap:10px}
.condition .label{display:flex;align-items:center;gap:8px}
.condition .label .ic{width:16px;height:16px}


/* ==========================================================================
   11. STATUS CHIPS (the five statuses: icon + word + fill style) + bus tiles
   ========================================================================== */
.chip{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 8px;
  border-radius:var(--r-sm);font-size:var(--fs-meta);font-weight:700;line-height:1;white-space:nowrap;
}
.chip .ic{width:16px;height:16px}
.chip-new{color:var(--st-new);background:var(--st-new-bg);box-shadow:inset 0 0 0 1.5px var(--st-new)}
.chip-prog{color:var(--st-prog);background:var(--st-prog-bg);box-shadow:inset 0 0 0 1.5px var(--st-prog)}
.chip-parts{color:var(--st-parts);background:var(--st-parts-bg);border:1.5px dashed var(--st-parts);padding:0 8.5px 0 6.5px}
.chip-oos{color:var(--st-oos);background:var(--st-oos-bg);box-shadow:inset 0 0 0 1.5px var(--st-oos-line);text-transform:uppercase;letter-spacing:.04em;font-weight:800}
.chip-clear{color:var(--st-clear);background:transparent;box-shadow:inset 0 0 0 1.5px var(--st-clear)}
.chip-neutral{color:var(--ink-2);background:var(--surface-inset);box-shadow:inset 0 0 0 1px var(--line-strong)}
.chip-go{color:var(--go);background:var(--go-tint);box-shadow:inset 0 0 0 1.5px var(--go)}
.chip-accent{color:var(--accent);background:var(--accent-tint);box-shadow:inset 0 0 0 1.5px var(--accent)}
.chip-lg{height:36px;padding:0 14px 0 11px;font-size:var(--fs-small)}
.chip-lg .ic{width:18px;height:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}

.bustile{
  flex:none;width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.2rem;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--ink-strong);background:var(--surface-inset);box-shadow:inset 0 0 0 1.5px var(--line-control);
}
.bustile.is-oos{color:var(--st-oos);background:var(--st-oos-bg);box-shadow:inset 0 0 0 2px var(--st-oos-line)}
.bustile.is-new{box-shadow:inset 0 0 0 2px var(--st-new)}
.bustile.is-prog{box-shadow:inset 0 0 0 2px var(--st-prog)}
.bustile.is-parts{box-shadow:none;border:2px dashed var(--st-parts)}
.bustile.is-clear{background:transparent;box-shadow:inset 0 0 0 2px var(--st-clear)}

/* Status lifecycle row */
.lifecycle{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lifecycle .arrow{color:var(--ink-3);width:16px;height:16px}


/* ==========================================================================
   12. DEVICES
   .device-phone holds either an <img> of a One Light screen or a live
   <iframe> (site.js scales the 360 x 740 screen to the frame).
   ========================================================================== */
/* The figure fills its column and the phone centres inside it. (A shrink-wrapped figure took
   its width from the lazy poster image, so until that image arrived the phone was a thin sliver.)
   The frame's padding is added outside the width (content-box), so the width subtracts it:
   the whole phone, bezel included, fits the column at 320 px. */
.device{position:relative;width:100%;margin:0 auto}
.device-phone{
  position:relative;
  width:calc(100% - 20px);max-width:340px;aspect-ratio:360 / 740;margin-left:auto;margin-right:auto;
  padding:10px;border-radius:44px;
  background:linear-gradient(160deg, #262F42 0%, var(--device-bezel) 40%, #10151F 100%);
  box-shadow:var(--device-shadow), inset 0 0 0 1.5px var(--device-rim), inset 0 1px 0 rgba(255,255,255,.12);
  box-sizing:content-box;
}
.device-phone.is-sm{width:calc(100% - 16px);max-width:260px;padding:8px;border-radius:36px}
.device-phone.is-xs{width:calc(100% - 14px);max-width:210px;padding:7px;border-radius:30px}
.device-screen{
  position:relative;width:100%;height:100%;overflow:hidden;border-radius:34px;
  background:#080B12;isolation:isolate;
}
.device-phone.is-sm .device-screen{border-radius:28px}
.device-phone.is-xs .device-screen{border-radius:23px}
.device-screen > img{width:100%;height:100%;object-fit:cover;object-position:top center}
.device-screen > iframe{
  position:absolute;top:0;left:0;width:360px;height:740px;max-width:none;border:0;
  max-width:none;   /* the base rule img,svg,video,iframe{max-width:100%} would squeeze the 360/1280 px screen to the frame's width */
  transform-origin:0 0;transform:scale(var(--dscale, 1));
  background:transparent;
  transition:opacity var(--dur-sheet) var(--ease-standard);
}
/* The poster image shows until the live screen reports {otd:"ready"} (site.js adds .is-live).
   A slow or failed screen therefore still shows a correct picture, never a blank phone.
   [data-live-off] = the Tour's "Try it" demo, which manages its own iframe: leave it visible. */
.device-screen[data-live]:not(.is-live):not([data-live-off]) > iframe{opacity:0}
.device-phone::before{   /* speaker slot, in the top bezel so it never covers the app's header */
  content:"";position:absolute;top:3px;left:50%;z-index:2;width:64px;height:4px;margin-left:-32px;border-radius:4px;
  background:rgba(0,0,0,.55);box-shadow:0 0 0 1px rgba(255,255,255,.04);
}
.device-phone.is-sm::before,.device-phone.is-xs::before{top:2px;width:44px;margin-left:-22px;height:3px}

.device-tablet{
  position:relative;
  width:calc(100% - 28px);max-width:880px;aspect-ratio:1280 / 800;margin-left:auto;margin-right:auto;
  padding:14px;border-radius:30px;
  background:linear-gradient(160deg, #262F42 0%, var(--device-bezel) 40%, #10151F 100%);
  box-shadow:var(--device-shadow), inset 0 0 0 1.5px var(--device-rim), inset 0 1px 0 rgba(255,255,255,.12);
  box-sizing:content-box;
}
.device-tablet .device-screen{border-radius:16px}
.device-tablet > .device-screen > iframe{width:1280px;height:800px}

.device-glow{position:relative}
.device-glow::before{   /* a soft neutral light behind the device (never green; see --stage-glow) */
  content:"";position:absolute;inset:-18% -30%;z-index:-1;background:var(--stage-glow);pointer-events:none;
}
.device-cap{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;
  font-size:var(--fs-meta);font-weight:600;color:var(--ink-3);text-align:center;
}
.device-cap .ic{width:16px;height:16px}
.device-pair{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px, 3vw, 32px)}
.device-pair > .device{margin:0}
.device-note{   /* "New app design rolling out this school year" */
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-label);font-weight:700;letter-spacing:.02em;color:var(--ink-2);
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong);
}
.device-note .ic{width:15px;height:15px;color:var(--accent)}


/* ==========================================================================
   13. HERO (always a Night stage)
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 104px);
  background-image:var(--stage-bg);
}
.hero::after{   /* faint instrument grid, fades out */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(var(--line-hair) 1px, transparent 1px), linear-gradient(90deg, var(--line-hair) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 60% at 70% 30%, #000 0%, transparent 75%);
  mask-image:radial-gradient(70% 60% at 70% 30%, #000 0%, transparent 75%);
}
.hero > .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px, 5vw, 72px);align-items:center}
.hero h1{margin-top:18px}
.hero h1 .go-text{display:block}
.hero .lead{margin-top:22px;max-width:590px}
.hero .btn-row{margin-top:30px}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line-hair);
  list-style:none;font-size:var(--fs-small);font-weight:600;color:var(--ink-2);
}
/* Four short promises: two columns, so a wide screen never leaves one item alone on a second row
   (3+1). Columns shrink and wrap their text before they would overflow a narrow hero column. */
.hero-trust{display:grid;grid-template-columns:repeat(2, minmax(0, max-content));gap:10px 28px}
@media (max-width: 560px){ .hero-trust{display:flex;flex-wrap:wrap;gap:10px 22px} }
.hero-trust li{display:inline-flex;align-items:center;gap:8px}
.hero-trust .ic{width:18px;height:18px;color:var(--go);stroke-width:2.6}
.hero-visual{display:flex;flex-direction:column;align-items:center}
.hero-visual .device-note{margin-top:18px}
.page-hero{padding:clamp(48px, 6vw, 96px) 0 clamp(40px, 5vw, 72px);background-image:var(--stage-bg);position:relative;overflow:hidden}
.page-hero .lead{margin-top:20px;max-width:720px}
.page-hero .btn-row{margin-top:28px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--fs-meta);color:var(--ink-3);margin-bottom:18px}
.crumbs a{   /* 44 px tall tap target; the negative margins keep the row's visual height */
  display:inline-flex;align-items:center;min-height:44px;margin:-11px 0;
  color:var(--ink-2);text-decoration:none;
}
.crumbs a:hover{text-decoration:underline}
.crumbs .ic{width:14px;height:14px}

@media (max-width: 1020px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-visual{order:2}
}


/* ==========================================================================
   14. PROOF STRIP + QUOTES
   ========================================================================== */
.proof{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:0;border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface-2);box-shadow:var(--sh-2), inset 0 0 0 1px var(--line-hair)}
.proof-item{padding:clamp(20px, 2.6vw, 32px);display:flex;flex-direction:column;gap:10px;box-shadow:inset -1px 0 0 var(--line-hair)}
.proof-item:last-child{box-shadow:none}
.proof-item p{font-size:var(--fs-small);line-height:1.45;color:var(--ink-2)}
.proof-item .gauge{font-size:clamp(2.6rem, 1.9rem + 2.6vw, 4.25rem)}
@media (max-width: 1020px){
  .proof{grid-template-columns:repeat(2, minmax(0,1fr))}
  .proof-item:nth-child(2){box-shadow:inset 0 -1px 0 var(--line-hair)}
  .proof-item:nth-child(1){box-shadow:inset -1px 0 0 var(--line-hair), inset 0 -1px 0 var(--line-hair)}
  .proof-item:nth-child(3){box-shadow:inset -1px 0 0 var(--line-hair)}
}
@media (max-width: 460px){
  .proof{grid-template-columns:1fr}
  .proof-item,.proof-item:nth-child(n){box-shadow:inset 0 -1px 0 var(--line-hair)}
  .proof-item:last-child{box-shadow:none}
}

.quote{position:relative;padding-left:24px;border-left:3px solid var(--go)}
.quote p{font-family:var(--font-display);font-size:clamp(1.25rem, 1.05rem + .9vw, 1.75rem);font-weight:700;line-height:1.35;letter-spacing:-.012em;color:var(--ink-strong);text-wrap:balance}
.quote footer{margin-top:14px;font-size:var(--fs-small);color:var(--ink-2)}
.quote footer b{color:var(--ink-strong)}
.quote-card{padding:clamp(24px, 3vw, 40px)}
.quote-mark{width:36px;height:36px;color:var(--go);margin-bottom:14px}


/* ==========================================================================
   15. STEPS
   ========================================================================== */
.steps{list-style:none;display:grid;gap:clamp(16px, 2vw, 24px);counter-reset:step}
.steps.is-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.steps.is-4{grid-template-columns:repeat(4, minmax(0,1fr))}
.step{position:relative;counter-increment:step}
.step-n{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;
  font-family:var(--font-display);font-size:1.1rem;font-weight:800;color:var(--ink-strong);font-variant-numeric:tabular-nums;
  background:var(--surface-inset);box-shadow:inset 0 0 0 1.5px var(--line-control);
}
.step-n::before{content:counter(step)}
.step-time{display:block;font-family:var(--font-mono);font-size:var(--fs-label);font-weight:600;color:var(--go);margin-bottom:6px;letter-spacing:.02em}
.step h3{font-size:1.2rem}
.step p{margin-top:8px;font-size:var(--fs-small);line-height:1.55;color:var(--ink-2)}
.step-visual{margin-top:22px}
@media (max-width: 1020px){
  .steps.is-4{grid-template-columns:repeat(2, minmax(0,1fr))}
  .steps.is-3{grid-template-columns:1fr}
}
@media (max-width: 600px){
  .steps.is-4{grid-template-columns:1fr}
}


/* ==========================================================================
   16. ROLE TABS (accessible tablist; works as stacked panels with no JS)
   ========================================================================== */
.tabs{display:flex;flex-wrap:wrap;gap:8px;padding:6px;border-radius:var(--r-lg);background:var(--surface-inset);box-shadow:inset 0 0 0 1px var(--line-strong);width:max-content;max-width:100%}
.tab{
  display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 14px;border-radius:var(--r-md);
  font-weight:700;color:var(--ink-2);
}
.tab .ic{width:20px;height:20px}
.tab[aria-selected="true"]{color:var(--ink-strong);background:var(--surface-3);box-shadow:inset 0 0 0 2px var(--ink-strong), var(--sh-2)}
.tab:hover{color:var(--ink-strong)}
.tab-panels{margin-top:clamp(24px, 3vw, 40px)}
.js .tab-panel[hidden]{display:none}
.no-js .tabs{display:none}
.no-js .tab-panel + .tab-panel{margin-top:64px}
@media (max-width: 600px){
  .tabs{width:100%}
  .tab{flex:1 1 40%;justify-content:center;padding:0 10px}
}


/* ==========================================================================
   17. OUT OF SERVICE STAGE (identical in both themes, like the app)
   ========================================================================== */
.oos-stage{
  position:relative;overflow:hidden;color:var(--on-oos);
  background:linear-gradient(170deg, var(--oos-hot) 0%, var(--oos-field) 40%, var(--oos-deep) 100%);
}
.oos-stage::before{
  content:"";position:absolute;left:0;right:0;top:0;height:14px;
  background-image:repeating-linear-gradient(-45deg, var(--oos-stripe) 0 12px, transparent 12px 24px);
}
.oos-stage h2,.oos-stage h3,.oos-stage b,.oos-stage strong{color:var(--on-oos)}
.oos-stage .lead,.oos-stage p{color:var(--oos-soft)}
.oos-stage .eyebrow{color:var(--oos-soft)}
.oos-stage .eyebrow::before{background:var(--oos-soft)}
.oos-stage .feature-list li > .ic{color:var(--on-oos)}
.oos-stage .card{background:var(--oos-panel);background-image:none;box-shadow:inset 0 0 0 1px var(--oos-line)}
.oos-stage .fine{font-size:var(--fs-meta);color:var(--oos-soft);opacity:.95}
.oos-stage :focus-visible{outline-color:#FFFFFF}
.oos-stage a{color:#FFFFFF}


/* ==========================================================================
   18. CITATIONS + LEGAL
   ========================================================================== */
.cite{display:flex;flex-direction:column;gap:10px;height:100%}
.cite-tag{
  display:inline-flex;align-self:flex-start;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:var(--r-sm);
  font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:700;color:var(--accent);
  background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent);white-space:nowrap;
}
/* A cite tag that is a link gets a 44 px tall invisible tap area; the chip itself looks the same. */
a.cite-tag{position:relative}
a.cite-tag::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px}
.cite h3{font-size:1.1rem}
.cite p{font-size:var(--fs-small);line-height:1.55;color:var(--ink-2)}
.cite .cite-link{margin-top:auto}
.legal-well{
  border-radius:var(--r-lg);padding:clamp(18px, 2.4vw, 28px);
  background:var(--surface-inset);box-shadow:inset 0 0 0 1px var(--line-strong);
  font-size:var(--fs-small);line-height:1.6;color:var(--ink);
}
.legal-well h4{margin-bottom:8px}
.legal-well p + p,.legal-well ul + p,.legal-well p + ul{margin-top:10px}
.legal-well ul{padding-left:1.2em}
.legal-well li + li{margin-top:6px}
.legal-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px;font-size:var(--fs-meta);color:var(--ink-3)}
.disclaimer{
  display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);
  font-size:var(--fs-meta);line-height:1.5;color:var(--ink-2);
  background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--line-hair);
}
.disclaimer .ic{width:18px;height:18px;color:var(--ink-3);margin-top:2px}
.draft-flag{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;border-radius:var(--r-pill);
  font-size:var(--fs-label);font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--warn);background:var(--warn-tint);box-shadow:inset 0 0 0 1.5px var(--warn-line);
}
.draft-flag .ic{width:16px;height:16px}


/* ==========================================================================
   19. PRICING
   ========================================================================== */
.plan{
  position:relative;border-radius:var(--r-xl);padding:clamp(24px, 3vw, 40px);
  background-color:var(--surface-2);background-image:var(--sheen);
  box-shadow:var(--sh-3), inset 0 0 0 1px var(--line-strong);
}
.plan-price{display:flex;align-items:flex-end;gap:10px;margin-top:14px}
.plan-price .gauge{font-size:clamp(4rem, 3rem + 4vw, 6.5rem)}
.plan-per{padding-bottom:10px;font-size:var(--fs-small);font-weight:600;line-height:1.3;color:var(--ink-2)}
.plan hr{margin:24px 0}
.addon-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 0;border-top:1px dashed var(--line-strong)}
.addon-row:first-of-type{border-top:0}
.addon-row .price{font-family:var(--font-display);font-weight:800;color:var(--ink-strong);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Receipt: the app's wallet-pass card, used for the calculator result */
.receipt{
  position:relative;border-radius:var(--r-xl);padding:26px 26px 22px;
  background:var(--surface-1);box-shadow:var(--sh-2), inset 0 0 0 1px var(--line-strong);
}
.receipt-head{display:flex;align-items:center;gap:14px;padding-bottom:18px}
.receipt-rows{display:grid}
.receipt-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-top:1px dashed var(--line-strong);font-size:var(--fs-small)}
.receipt-row > span:first-child{color:var(--ink-2)}
.receipt-row > span:last-child{font-weight:700;color:var(--ink-strong);font-variant-numeric:tabular-nums;text-align:right}
.receipt-perf{position:relative;height:28px;margin:6px -26px}
.receipt-perf::before{content:"";position:absolute;left:26px;right:26px;top:50%;border-top:2px dashed var(--line-strong)}
.receipt-perf > i::before,.receipt-perf > i::after{
  content:"";position:absolute;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
.receipt-perf > i::before{left:-13px}
.receipt-perf > i::after{right:-13px}
.section-alt .receipt-perf > i::before,.section-alt .receipt-perf > i::after{background:var(--surface-1)}
.receipt-total{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.receipt-total .gauge{font-size:clamp(2.8rem, 2rem + 3vw, 4rem)}
.receipt-foot{margin-top:14px;font-size:var(--fs-meta);color:var(--ink-3);line-height:1.5}

/* Calculator controls: our own steppers and switches (no OS pickers) */
.calc{display:grid;gap:14px}
.calc-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 18px;border-radius:var(--r-lg);
  background:var(--surface-2);box-shadow:var(--sh-1), inset 0 0 0 1px var(--line-hair);
}
.calc-row-txt{flex:1 1 220px;min-width:0}
.calc-row-txt b{display:block;font-size:var(--fs-body)}
.calc-row-txt span{display:block;margin-top:2px;font-size:var(--fs-meta);color:var(--ink-2);line-height:1.45}
.stepper{display:inline-flex;align-items:stretch;border-radius:var(--r-md);background:var(--surface-inset);box-shadow:inset 0 0 0 1.5px var(--line-control)}
.stepper button{width:52px;min-height:52px;display:grid;place-items:center;color:var(--ink-strong);border-radius:var(--r-md)}
.stepper button:hover{background:var(--surface-3)}
/* At a limit the button is aria-disabled, not disabled, so it keeps keyboard focus (site.js §6). */
.stepper button[aria-disabled="true"],.stepper button:disabled{color:var(--ink-3);cursor:not-allowed;background:none}
.stepper button .ic{width:20px;height:20px;stroke-width:2.6}
.stepper output,.stepper input{
  width:72px;min-height:52px;border:0;background:none;text-align:center;
  font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--ink-strong);font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;appearance:textfield;
}
.stepper input:focus-visible{outline-offset:-3px}
.switch{
  position:relative;display:inline-flex;align-items:center;gap:12px;min-height:52px;cursor:pointer;
  font-weight:700;color:var(--ink-strong);
}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch-track{
  position:relative;width:60px;height:34px;border-radius:var(--r-pill);flex:none;
  background:var(--surface-inset);box-shadow:inset 0 0 0 1.5px var(--line-control);
  transition:background-color var(--dur-state) var(--ease-standard);
}
.switch-track::after{
  content:"";position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;
  background:var(--ink-2);transition:transform var(--dur-state) var(--ease-standard), background-color var(--dur-state) var(--ease-standard);
}
.switch input:checked + .switch-track{background:var(--accent-fill);box-shadow:none}
.switch input:checked + .switch-track::after{transform:translateX(26px);background:#FFFFFF}
.switch input:focus-visible + .switch-track{outline:3px solid var(--focus);outline-offset:3px}
.switch-state{font-size:var(--fs-meta);color:var(--ink-2);min-width:24px}

.seg{display:inline-grid;grid-auto-flow:column;gap:6px;padding:5px;border-radius:var(--r-md);background:var(--surface-inset);box-shadow:inset 0 0 0 1px var(--line-strong)}
.seg button{min-height:44px;padding:0 16px;border-radius:10px;font-weight:700;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.seg button[aria-pressed="true"]{color:var(--ink-strong);background:var(--surface-3);box-shadow:inset 0 0 0 2px var(--ink-strong), var(--sh-1)}
.seg button .ic{width:16px;height:16px;display:none}
.seg button[aria-pressed="true"] .ic{display:block}

.price-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.price-table th,.price-table td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--line-hair);vertical-align:top}
.price-table th{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-3)}
.price-table td:last-child,.price-table th:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.price-table td b{font-weight:700}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line-hair);background:var(--surface-2)}
.table-scroll .price-table th:first-child,.table-scroll .price-table td:first-child{padding-left:18px}
.table-scroll .price-table th:last-child,.table-scroll .price-table td:last-child{padding-right:18px}


/* ==========================================================================
   20. FAQ — native details/summary (works with no JS, keyboard, readers)
   ========================================================================== */
.faq{display:grid;gap:10px}
.faq details{
  border-radius:var(--r-lg);background:var(--surface-2);box-shadow:var(--sh-1), inset 0 0 0 1px var(--line-hair);
}
.faq details[open]{box-shadow:var(--sh-2), inset 0 0 0 1px var(--line-strong)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:64px;padding:16px 20px;border-radius:var(--r-lg);
  font-family:var(--font-display);font-size:1.075rem;font-weight:750;line-height:1.35;color:var(--ink-strong);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{width:22px;height:22px;color:var(--ink-3);transition:transform var(--dur-state) var(--ease-standard)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq .faq-a{padding:0 20px 20px;color:var(--ink-2);line-height:1.65}
.faq .faq-a p + p,.faq .faq-a ul + p,.faq .faq-a p + ul{margin-top:10px}
.faq .faq-a ul{padding-left:1.2em}
.faq .faq-a li + li{margin-top:4px}
.faq-group + .faq-group{margin-top:clamp(40px, 5vw, 64px)}
.faq-group > h2{font-size:clamp(1.4rem, 1.2rem + .8vw, 1.8rem);margin-bottom:18px}


/* ==========================================================================
   21. FOUNDER + CONTACT BAND
   ========================================================================== */
.founder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px, 5vw, 72px);align-items:start}
.founder-card{display:flex;flex-direction:column;gap:16px}
.founder-badge{display:flex;align-items:center;gap:14px}
.founder-initials{
  width:72px;height:72px;border-radius:var(--r-lg);display:grid;place-items:center;flex:none;
  font-family:var(--font-display);font-size:1.6rem;font-weight:800;color:var(--ink-strong);
  background:var(--surface-3);box-shadow:inset 0 0 0 1.5px var(--line-control), var(--sh-2);
}
.contact-list{list-style:none;display:grid;gap:2px}
.contact-list li{display:flex;align-items:center;gap:12px}
.contact-list .ic{width:20px;height:20px;color:var(--ink-3)}
.contact-list a{font-weight:700;display:inline-flex;align-items:center;min-height:44px}
@media (max-width: 1020px){ .founder{grid-template-columns:1fr} }

.cta-band{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(64px, 8vw, 120px) 0;background-image:var(--stage-bg);
}
/* No glow behind the closing call: green light is the One-Touch button's alone. The 64 px
   .mark-lg above the heading is the flat brand mark (research/06: "64 px; flat, no glow"). */
.cta-band > .wrap{position:relative}
.cta-band .lead{max-width:640px;margin:18px auto 0}
.cta-band .btn-row{justify-content:center;margin-top:32px}
.cta-band .mark-lg{margin:0 auto 22px}
.cta-note{margin-top:18px;font-size:var(--fs-meta);color:var(--ink-3)}


/* ==========================================================================
   22. FOOTER
   ========================================================================== */
.site-foot{padding:clamp(48px, 6vw, 80px) 0 32px;background:var(--surface-1);box-shadow:inset 0 1px 0 var(--line-hair)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr));gap:32px}
.foot-grid h2{font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.foot-links{list-style:none;display:grid;gap:0}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none;font-size:var(--fs-small);font-weight:600}
.foot-links a:hover{color:var(--ink-strong);text-decoration:underline}
.foot-about p{margin-top:14px;font-size:var(--fs-small);line-height:1.55;color:var(--ink-2);max-width:360px}
.foot-legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line-hair);
  font-size:var(--fs-meta);line-height:1.5;color:var(--ink-3);
}
.foot-legal a{color:var(--ink-2)}
@media (max-width: 1020px){ .foot-grid{grid-template-columns:repeat(2, minmax(0,1fr))} .foot-about{grid-column:1 / -1} }
@media (max-width: 460px){ .foot-grid{grid-template-columns:1fr} }


/* ==========================================================================
   23. LONG-FORM PAGES (privacy, terms, accessibility, security)
   ========================================================================== */
.doc{max-width:760px}
.doc h2{font-size:clamp(1.35rem, 1.2rem + .6vw, 1.7rem);margin-top:48px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.doc h3{margin-top:28px;font-size:1.1rem}
.doc p,.doc ul,.doc ol{margin-top:14px;line-height:1.7}
.doc ul,.doc ol{padding-left:1.3em}
.doc li + li{margin-top:6px}
.doc .doc-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;color:var(--ink-3);font-size:var(--fs-meta)}
.doc table{width:100%;border-collapse:collapse;margin-top:16px;font-size:var(--fs-small)}
.doc th,.doc td{padding:12px 10px;border-bottom:1px solid var(--line-hair);text-align:left;vertical-align:top}
.doc th{font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-3)}
.toc{position:-webkit-sticky;position:sticky;top:calc(var(--nav-h) + 24px)}
.toc ol{list-style:none;display:grid;gap:2px;margin-top:10px}
.toc a{display:block;padding:7px 10px;border-radius:var(--r-sm);font-size:var(--fs-small);font-weight:600;color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--ink-strong);background:var(--surface-2)}
.doc-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px, 5vw, 72px);align-items:start}
@media (max-width: 1020px){
  .doc-layout{grid-template-columns:1fr} .toc{position:static}
  .toc a{padding-top:12px;padding-bottom:12px}   /* 44 px tap targets once the contents list is a touch list */
}


/* ==========================================================================
   24. UTILITIES
   ========================================================================== */
.center{text-align:center}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.maxw-640{max-width:640px}.maxw-760{max-width:760px}
.mx-auto{margin-left:auto;margin-right:auto}
.nowrap{white-space:nowrap}
.hide-sm{}
@media (max-width: 680px){ .hide-sm{display:none !important} }
.show-sm{display:none !important}
@media (max-width: 680px){ .show-sm{display:revert !important} }

/* Scroll reveal: only when JS is running, so nothing is ever hidden without it */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur-reveal) var(--ease-decel), transform var(--dur-reveal) var(--ease-decel)}
.js .reveal.is-in{opacity:1;transform:none}


/* ==========================================================================
   25. KEYFRAMES
   ========================================================================== */
@keyframes ol-breathe{
  0%,100%{box-shadow:0 0 0 4px var(--go-halo), 0 0 0 0 var(--go-glow)}
  50%{box-shadow:0 0 0 4px var(--go-halo), 0 0 22px 2px var(--go-glow)}
}


/* ==========================================================================
   26. PAPER — the monthly report, drawn as a printed page (always white,
   like the PDF it stands for; identical in both themes)
   ========================================================================== */
.paper{
  --p-ink:#0A1020; --p-ink-2:#3D4859; --p-ink-3:#536074; --p-line:#D8DEE8; --p-fill:#F4F6FA;
  --p-go:#0B6B32; --p-stop:#B42318; --p-warn:#8A5A00;
  position:relative;width:100%;max-width:520px;margin:0 auto;min-height:0;
  padding:clamp(18px, 4%, 30px);border-radius:6px;overflow:hidden;
  color:var(--p-ink);background:#FFFFFF;font-size:12px;line-height:1.4;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 30px 60px -28px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.08);
  transform:rotate(-1.2deg);
}
.paper::before{   /* a second sheet peeking out: "one PDF, every bus" */
  content:"";position:absolute;inset:0;z-index:-1;border-radius:6px;background:#F1F3F7;transform:translate(10px, 10px) rotate(2deg);
}
.paper-stack{position:relative;isolation:isolate;padding:10px 18px 24px 6px}
.paper-stack::before{
  content:"";position:absolute;left:24px;right:8px;top:18px;bottom:4px;z-index:-1;border-radius:6px;
  background:#E6EAF1;transform:rotate(2.2deg);box-shadow:0 20px 40px -24px rgba(0,0,0,.6);
}
.paper-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--p-ink)}
/* Scoped with .paper and given explicit colours, so a page rule like ".x p{color:var(--ink-2)}"
   (light grey in Night) can never repaint the white page's text. */
.paper .paper-title{font-family:var(--font-display);font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--p-ink)}
.paper .paper-sub{margin-top:3px;font-size:11px;color:var(--p-ink-2)}
.paper-badge{flex:none;padding:4px 8px;border-radius:4px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--p-go);box-shadow:inset 0 0 0 1.5px var(--p-go)}
.paper-stats{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px;margin-top:14px}
.paper-stat{padding:8px 9px;border-radius:5px;background:var(--p-fill)}
.paper-stat b{display:block;font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--p-ink);font-variant-numeric:tabular-nums;line-height:1.1}
.paper-stat span{font-size:9px;white-space:nowrap;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--p-ink-3)}
.paper-table{width:100%;margin-top:14px;border-collapse:collapse;font-size:11px}
.paper-table th{padding:6px 4px;text-align:left;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--p-ink-3);border-bottom:1px solid var(--p-line)}
.paper-table td{padding:6px 4px;border-bottom:1px solid var(--p-line);font-variant-numeric:tabular-nums;color:var(--p-ink)}
.paper-table td:first-child{font-weight:800}
.paper-table .ok{color:var(--p-go);font-weight:700}
.paper-table .open{color:var(--p-warn);font-weight:700}
.paper-foot{margin-top:16px;display:flex;justify-content:space-between;font-size:9.5px;color:var(--p-ink-3);border-top:1px solid var(--p-line);padding-top:8px}
@media (max-width: 420px){ .paper{font-size:10.5px} .paper-stats{grid-template-columns:repeat(2, minmax(0,1fr))} }


/* ==========================================================================
   27. HOME-ONLY COMPOSITIONS
   ========================================================================== */
.how-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(20px, 3vw, 40px);counter-reset:step}
.how-card{display:flex;flex-direction:column;gap:12px;counter-increment:step}
.how-card .step-n{margin-bottom:4px}
.how-card h3{font-size:clamp(1.25rem, 1.1rem + .5vw, 1.5rem)}
.how-card > p{color:var(--ink-2)}
.how-visual{margin-top:auto;padding-top:22px;display:flex;justify-content:center;align-items:flex-end;min-height:420px}
.how-visual .device-phone{max-width:230px}
.how-visual .paper-stack{width:100%;max-width:330px}
@media (max-width: 1020px){
  .how-grid{grid-template-columns:1fr;gap:56px}
  .how-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);grid-template-rows:repeat(5,auto) 1fr;gap:12px 32px;align-items:center}
  .how-card > :not(.how-visual){grid-column:1}
  .how-card .how-visual{grid-column:2;grid-row:1 / -1;padding-top:0;min-height:0}
}
@media (max-width: 640px){
  .how-card{display:flex}
  .how-card .how-visual{padding-top:16px;align-self:stretch}   /* full width, so the phone never shrinks to its not-yet-loaded poster */
}

.devices-compare{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:16px}
.devices-compare .card{display:flex;flex-direction:column;gap:10px}
.devices-compare .gauge{font-size:clamp(2.6rem, 2rem + 2.4vw, 3.8rem)}
@media (max-width: 460px){ .devices-compare{grid-template-columns:1fr} }

.not-list{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px;list-style:none}
.not-list li{display:flex;align-items:center;gap:10px;padding:16px 18px;border-radius:var(--r-lg);font-weight:700;color:var(--ink-strong);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-hair)}
.not-list .ic{color:var(--ink-3);width:20px;height:20px}
@media (max-width: 1020px){ .not-list{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 460px){ .not-list{grid-template-columns:1fr} }

/* Home page on phones: at 390 px the page ran ~20,000 px. Smaller phone mock-ups, the six
   "5:30 AM bus yard" cards as icon-beside-text rows, and the four rule cards two to a row. */
@media (max-width: 680px){
  body[data-page="home"] .hero-visual .device-phone,
  body[data-page="home"] .oos-grid .device-phone,
  body[data-page="home"] #tracker .device-phone{max-width:min(270px, calc(100% - 20px))}
  body[data-page="home"] #yard .card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:18px}
  body[data-page="home"] #yard .card .icon-well{grid-row:span 2;margin:0}
  body[data-page="home"] #compliance .grid-4{grid-template-columns:repeat(2, minmax(0,1fr));gap:10px}
  body[data-page="home"] #compliance .cite h3{font-size:1rem}
  body[data-page="home"] #compliance .cite p{font-size:var(--fs-meta)}
}
@media (max-width: 380px){   /* 320 px: a citation tag is wider than half the column */
  body[data-page="home"] #compliance .grid-4{grid-template-columns:minmax(0,1fr)}
}

/* a.card.customer-card: a linked card must not fall back to a.card's display:block */
.customer-card,a.card.customer-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 20px;align-items:start}
.customer-card .icon-well{margin:0}
@media (max-width: 460px){ .customer-card,a.card.customer-card{grid-template-columns:minmax(0,1fr)} }
.oos-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px, 6vw, 88px);align-items:center}
@media (max-width: 1020px){ .oos-grid{grid-template-columns:1fr} }


/* ==========================================================================
   28. PRINT — supervisors print pricing, compliance and the legal pages for
   boards and files. Browsers drop backgrounds when printing, so Night's
   light-on-dark text would vanish: print always uses Day ink on white,
   every section revealed, no header or menu, posters instead of live screens.
   ========================================================================== */
@media print{
  html,html[data-theme],html[data-theme] .theme-night,.theme-night{
    color-scheme:light;
    --bg:#FFFFFF; --app-bg:none; --surface-1:#FFFFFF; --surface-2:#FFFFFF; --surface-3:#FFFFFF; --surface-inset:#FFFFFF;
    --edge-hi:rgba(255,255,255,0); --sheen:none; --stage-bg:none; --stage-glow:none;
    --line-hair:#D8DEE8; --line-strong:#C3CCDA; --line-control:#717E95;
    --ink-strong:#0A1020; --ink:#172033; --ink-2:#3D4859; --ink-3:#536074; --ink-off:#5F6B80;
    --accent:#1B56C4; --accent-fill:#1B56C4; --accent-tint:#E4EDFC; --on-accent:#FFFFFF;
    --go:#0B6B32; --go-tint:#E6F6EC; --go-halo:rgba(12,99,49,.12);
    --stop:#B42318; --stop-tint:#FDECEA; --warn:#8A5A00; --warn-tint:#FFF4D6; --warn-line:#A87A1E;
    --st-new:#8A4B00; --st-new-bg:#FFF1DB; --st-prog:#0B4F8A; --st-prog-bg:#E3F0FF;
    --st-parts:#5B2DA3; --st-parts-bg:#F0E8FF; --st-clear:#0F6B34;
    --on-oos:#0A1020; --oos-soft:#3D4859; --oos-panel:#FFFFFF; --oos-line:#C3CCDA;
    --sh-1:0 0 0 1px rgba(16,24,40,.12); --sh-2:0 0 0 1px rgba(16,24,40,.12); --sh-3:0 0 0 1px rgba(16,24,40,.12);
    --sh-fill:0 0 0 0 transparent;
  }
  html,body{background:#FFFFFF !important}
  .js .reveal{opacity:1 !important;transform:none !important}
  .skip,.site-head,.mobile-nav,.menu-btn,.theme-switch,.tabs,.device-screen > iframe,.hero::after,.device-glow::before{display:none !important}
  .js .tab-panel[hidden]{display:block !important}     /* print every role, not just the selected tab */
  .section,.hero,.page-hero,.cta-band{padding:28px 0}
  .toc{position:static}
  /* Buttons print as outlined labels, since their fills are dropped */
  .btn,.btn-primary,.btn-quiet,.btn-ghost{color:var(--ink-strong) !important;background:none !important;box-shadow:none !important;border:1px solid var(--line-control)}
  /* The Out of Service stage prints as ink on white; keep only its words */
  .oos-stage{background:none;color:var(--ink)}
  .oos-stage::before{display:none}
  .oos-stage a{color:var(--accent)}
  /* Small things whose fill IS the meaning keep their colours on paper */
  .chip,.bustile,.device-phone,.device-tablet,.paper,.paper-stat,.icon-well,.mark{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Say where outside links go */
  a[href^="http"]:not(.btn):not(.cite-tag)::after{content:" (" attr(href) ")";font-size:.8em;font-weight:400;color:var(--ink-3);word-break:break-all}
  a.cite-tag::after{display:none}
  .card,.plan,.receipt,.legal-well,.disclaimer,.quote,.faq details,figure,.paper-stack,.step,.calc-row{break-inside:avoid}
  h2,h3,h4{break-after:avoid}
}


/* ==========================================================================
   29. WINDOWS HIGH CONTRAST (forced colours) — backgrounds and shadows are
   replaced by system colours, so any state drawn only with them needs a
   border, outline or underline here.
   ========================================================================== */
@media (forced-colors: active){
  .tab[aria-selected="true"],.seg button[aria-pressed="true"]{outline:2px solid CanvasText;outline-offset:-4px}
  .nav a[aria-current="page"],.mobile-nav > a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
  .switch-track{forced-color-adjust:none;background:Canvas;border:2px solid CanvasText;box-shadow:none}
  .switch-track::after{top:2px;left:2px;background:CanvasText}
  .switch input:checked + .switch-track{background:Highlight;border-color:Highlight}
  .switch input:checked + .switch-track::after{background:HighlightText}
  .stepper button[aria-disabled="true"]{color:GrayText}
}