/* Production copy of design/mobile-refresh/final/palettes/tabl-navy.css, the owner-approved mockup (TABL Navy + ambient motion,
   2026-09-28), written by design/mobile-refresh/export.cjs. Per-page order: onlocation.styles.css, calculator.css (index,
   pricing), home.css (index) | pages.css (download, 404, privacy, eula), ambient.css (not on legal pages), tabl-navy.css last. */
/* Palette: TABL NAVY (id tabl-navy). Linked after every other stylesheet on every page.
   Concept: the darker brand blue leads. Big FLAT fields in the TABL logo's own navies (the hero phone field, #product,
   the You pay card, the TABL row in every chart, the 404 stage, the footer) on a cool ice-blue page. TABL blue #0852E8 is
   the action on light and paints the second tier of fields (the run-of-show road strip, the #product phone stages, the
   Screens panel, the One-queue plate, the partner logo plates, the /download route, the close band); bright TABL blue
   #0A6BFE is the action on navy; on the TABL-blue close band the action inverts to a white button.
   Signature: painted road. White dashed centre lines on every lane (the hero's TABL-blue lane, the navy carriageway on
   the run-of-show, the #product route). One mint means Tap to Pay / live / not your cost, and the live pin is a target
   (mint, navy gap, mint ring), so shape carries it too. Selected = navy (the chart's TABL row, the chosen Screens tab).
   Flat colour, crisp white app screens: no rings, no glows, no gradient fills, no orange, no gold, no yellow.
   Colour only: no layout, size, type or markup changes, and one spacing rule (the Screens column gap, section 4).

   Token             Hex        Role                                               Key ratio (AA)
   paper             #E1E8F4    cool ice page                                      L 0.803 (<= 0.84)
   surface           #F0F4FB    cards, plates                                      ink 15.5
   sunk              #D3DDEE    quiet bands, wells                                 ink-3 5.07; links there are accent-hover 6.25
   ink               #011A43    deepest brand navy: headings, ink plates           13.9 paper
   ink-2 / ink-3     #233860 / #465A7E   body / meta                               9.44 / 5.64 paper, 5.07 sunk
   accent            #0852E8    TABL blue: buttons + links + stars on light        white label 6.21, 5.04 paper
   accent-hover      #0641B8    hover, links on sunk bands                         white 8.55, 6.25 sunk
   accent-wash       #D5E2FC    rank chip, pricing current, open tags              ink-3 5.33, accent 4.76
   tn-bright         #0A6BFE    bright TABL blue: the primary button on navy       white label 4.62, 3.23 vs night
   tn-blue           #0852E8    TABL-blue fields (see concept)                     white 6.21, tn-on-blue-2 #DCE8FF 5.03
   night             #062652    darker navy: the big fields, the TABL chart row    white 14.9, frost-2 9.10
   night-raised      #092666    dark blue: tiles + the Tap stage inside fields     white 14.2, frost-2 8.65
   tn-deep           #011A43    deepest navy: footer, KDS chip, QR ink             white 17.1, frost-2 10.4
   frost / frost-2   #FFFFFF / #B9CBEB   text on navy
   tn-ice            #9CCBFF    "+ 5¢", TABL chart bar, footer focus               8.81 night
   signal            #0A6A4E    Tap-to-Pay mint as text on light                   5.35 paper, 5.40 on wash
   signal-dot        #0E8A63    mint dots + discs on light (non-text)              3.53 paper, 3.94 surface
   signal-wash       #D2EFE3    NOT YOUR COST, service-fee row                     ink-3 5.69, signal 5.40
   signal-night      #4BE3AE    mint on navy (live pin, Tap stage, checks)         9.17 night, 3.81 on TABL blue
   danger            #B01830    crimson, hue 351: "+$" deltas, form errors         6.31 surface, 5.65 paper
   bar               #5C6A86    competitor bars (neutral slate)                    4.93 surface
   field-border      #5F7196    inputs, segmented control                          4.44 surface, 3.58 sunk
   Mint vs the action blue: luminance 0.60 vs 0.12-0.18, so they separate under every colour-vision deficiency.
   Every hue here is blue (210-223), mint (155-163) or crimson (351); nothing between 10 and 60 degrees. */

:root {
  --paper: #E1E8F4;
  --surface: #F0F4FB;
  --sunk: #D3DDEE;
  --ink: #011A43;
  --ink-2: #233860;
  --ink-3: #465A7E;
  --line: #C2CEE2;
  --line-strong: #9FB0CE;
  --field-border: #5F7196;
  --accent: #0852E8;
  --accent-hover: #0641B8;
  --accent-wash: #D5E2FC;
  --on-accent: #FFFFFF;
  --signal: #0A6A4E;
  --signal-dot: #0E8A63;
  --signal-wash: #D2EFE3;
  --signal-night: #4BE3AE;
  --danger: #B01830;
  --bar: #5C6A86;
  --night: #062652;
  --night-raised: #092666;
  --night-line: rgba(185, 203, 235, 0.2);
  --frost: #FFFFFF;
  --frost-2: #B9CBEB;
  --focus: var(--accent);
  --focus-night: #9CCBFF;
  --bezel: #050B18;
  --scrim: rgba(1, 26, 67, 0.5);
  --e1: 0 1px 2px rgba(1, 26, 67, 0.08);
  --e2: 0 8px 24px -8px rgba(1, 26, 67, 0.2);
  --e3: 0 40px 80px -24px rgba(1, 26, 67, 0.42);

  --tn-bright: #0A6BFE;
  --tn-blue: #0852E8;
  --tn-deep: #011A43;
  --tn-ice: #9CCBFF;
  --tn-on-blue: #FFFFFF;
  --tn-on-blue-2: #DCE8FF;
  --tn-cr: calc(50% + min(50% - var(--gutter), var(--container) / 2)); /* the container's right edge, in a band's gradient */
  --tn-shade: rgba(0, 8, 28, 0.55);
  --tn-dash: repeating-linear-gradient(var(--tn-on-blue) 0 18px, transparent 18px 30px); /* a vertical painted centre line */

  --node-dash: var(--accent);
  --node-ring: var(--ink);
}
/* On navy the eyebrow's lane dash and stop ring are white. */
.band--night, .is-dark, .card--night, .final-cta, .site-footer {
  --node-dash: var(--frost);
  --node-ring: var(--frost);
}

/* ---------- Base ---------- */
.site-header { box-shadow: inset 0 3px 0 var(--accent); } /* a TABL-blue tape on the top edge */
.site-header[data-scrolled="true"] { box-shadow: inset 0 3px 0 var(--accent), var(--e1); }
/* <=720 the header is short enough that the brand / menu focus ring lands on the tape (1.0:1 on that side): no tape. */
@media (max-width: 720px) {
  .site-header { box-shadow: none; }
  .site-header[data-scrolled="true"] { box-shadow: var(--e1); }
}
.btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(1, 26, 67, 0.22); }
/* On navy the action is the bright TABL blue (3.23 against the field, white label 4.62). */
:is(.band--night, .is-dark, .card--night, .final-cta) .btn--primary { background: var(--tn-bright); box-shadow: 0 2px 6px -2px rgba(0, 8, 28, 0.5); }
:is(.band--night, .is-dark, .card--night, .final-cta) .btn--primary:hover { background: var(--tn-blue); }
.pill--night, .band--night .pill:not(.pill--ink), .is-dark .pill:not(.pill--ink) { background: rgba(255, 255, 255, 0.07); }
.pill--ink svg { stroke: var(--signal-night); }
.stars, .testimonial-stars { color: var(--accent); } /* TABL-blue stars (5.04 paper, 5.63 surface), never gold */
.field :is(input, select, textarea):focus-visible, .calc-field__control:focus-within { box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px rgba(8, 82, 232, 0.2); }
.seg button:hover { background: rgba(240, 244, 251, 0.75); }
.form-actions { box-shadow: 0 -10px 20px -16px rgba(1, 26, 67, 0.28); }
.provider-row--unranked { background-image: repeating-linear-gradient(135deg, rgba(1, 26, 67, 0.05) 0 1px, transparent 1px 9px); }
/* Links that sit straight on a sunk band (ecosystem, partners): accent-hover, 6.25 on sunk. */
.eco-row__link, .partners-cta a { color: var(--accent-hover); }
.eco-row__link:hover, .partners-cta a:hover { color: var(--ink); }

/* ---------- 1. Hero: the phone stands on a full-bleed flat navy field ----------
   >1240: a hard-stop gradient on .hero, cut clamp(24px, 3vw, 42px) left of the figure (phone + gap + label, the container's
   right edge minus 536px / 462px). 961-1240: the cut moves to the phone's centre line (>= 32px clear of the copy).
   A clean straight edge: the owner chose it over the dashed TABL-blue lane (2026-09-28). */
.hero {
  --tn-w: 536px; --tn-ph: 284px;
  --tn-cut: calc(var(--tn-cr) - var(--tn-w) - clamp(24px, 3vw, 42px));
  background: linear-gradient(90deg, var(--paper) 0 var(--tn-cut), var(--night) 0);
}
@media (max-width: 1240px) { .hero { --tn-cut: calc(var(--tn-cr) - var(--tn-w) + var(--tn-ph) / 2); } }
@media (max-width: 1100px) { .hero { --tn-w: 462px; --tn-ph: 250px; } }
/* Stacked (<=960): the figure's own background, pushed full-bleed by a spread shadow and trimmed by clip-path (no layout
   change). .hero clips it at the sides; the run-of-show (positioned, later in the tree) paints over it at the bottom. */
@media (max-width: 960px) {
  .hero { background: var(--paper); }
  .hero-media { background: var(--night); box-shadow: 0 0 0 100vmax var(--night); clip-path: inset(-24px -100vmax -100vmax -100vmax); }
}
@media (max-width: 720px) { .hero-media { clip-path: inset(-20px -100vmax -100vmax -100vmax); } }
.hero-rings, .dl-rings { stroke: transparent; } /* a flat field: no concentric rings (the old site's radial glow) */
/* Ambient motion only (ambient.css; nothing here paints unless motion is on): the hero field carries a live route map,
   flat lines and no glow. TABL-blue route (2.33 on night), ice streets at 10%, ice stop dots, one mint traveller.
   The same mint dot (9.17 on night) rides the run-of-show road with a navy keyline; the One-queue packet and #87 ring
   are white on the TABL-blue plate (6.21), where mint would sit at 3.81. */
:root {
  --ambient-map: block; --ambient-map-route: var(--tn-blue); --ambient-map-street: rgba(156, 203, 255, 0.1);
  --ambient-lane-paint: var(--frost); /* the rolling #product lanes keep this palette's white paint */
  --ambient-route: var(--signal-night); --ambient-route-edge: var(--night); --ambient-order: var(--frost);
}
.device--hero { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -24px var(--tn-shade); }
.callout__label b { color: var(--frost); }
.callout__label span { color: var(--frost-2); }
@media (max-width: 720px) { .legend li { color: var(--frost-2); } .legend b { color: var(--frost); } }
@media (forced-colors: none) {
  .callout i { background: rgba(255, 255, 255, 0.4); } /* 3.55 on navy */
}
/* Pins, rings and roads: home.css / pages.css repaint these in system colours for forced colours / increased contrast;
   the painted versions apply only outside those modes. */
@media (forced-colors: none) and (prefers-contrast: no-preference) {
  /* Pins: white rings with a bright-blue centre; the live pin is a mint target (mint, a 2px navy gap, a mint ring). */
  .callout::before { background: var(--tn-bright); box-shadow: inset 0 0 0 3px var(--frost), 0 0 0 2px var(--bezel); }
  .callout--live::before { background: var(--signal-night); box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--signal-night); }
  @media (max-width: 720px) {
    /* Numbered pins on the bezel edge over navy: white discs with TABL-blue numbers (6.21); the live pin is a mint target. */
    .callout::before, .legend__n { background: var(--frost); color: var(--accent); box-shadow: 0 0 0 2px var(--bezel); }
    .callout--live::before, .legend__n--live {
      background: var(--signal-night); color: var(--tn-deep);
      box-shadow: inset 0 0 0 2px var(--signal-night), inset 0 0 0 4px var(--night), 0 0 0 2px var(--bezel);
    }
    .legend__n { box-shadow: none; }
    .legend__n--live { box-shadow: inset 0 0 0 2px var(--signal-night), inset 0 0 0 4px var(--night); }
  }

  /* Run of show: a navy carriageway (9px) across the TABL-blue strip, a white dashed centre line, white stop rings. */
  .runsheet__stops::before {
    background: repeating-linear-gradient(90deg, var(--tn-on-blue) 0 18px, transparent 18px 30px) 0 3px / 100% 3px no-repeat, var(--night);
  }
  .runsheet__stops li::before { border-color: var(--tn-on-blue); background: var(--tn-blue); }
  .runsheet__stops li:first-child::before { background: var(--tn-on-blue); }
  @media (max-width: 960px) {
    /* The road turns vertical: the 1px line widened to a 9px carriageway by a spread shadow, white dashes down its centre. */
    .runsheet__stops::before { background: repeating-linear-gradient(var(--tn-on-blue) 0 8px, var(--night) 8px 14px); box-shadow: 0 0 0 4px var(--night); }
  }

  /* /download mini route: the same road (7px + a 1px spread = 9px). */
  .dl-route__stops::before {
    background: repeating-linear-gradient(90deg, var(--tn-on-blue) 0 18px, transparent 18px 30px) 0 2px / 100% 3px no-repeat, var(--night);
    box-shadow: 0 0 0 1px var(--night);
  }
  .dl-route__stops li::before { border-color: var(--tn-on-blue); background: var(--tn-blue); }
  .dl-route__stops li:first-child::before { background: var(--tn-on-blue); }
  @media (max-width: 720px) {
    .dl-route__stops li:not(:last-child)::after { background: repeating-linear-gradient(var(--tn-on-blue) 0 8px, var(--night) 8px 14px); box-shadow: 0 0 0 4px var(--night); }
  }
}
/* Increased contrast on the blue road: system black would vanish, so the road and rings go solid white. */
@media (prefers-contrast: more) and (forced-colors: none) {
  .runsheet__stops::before, .dl-route__stops::before { background: var(--tn-on-blue); }
  .runsheet__stops li::before, .dl-route__stops li::before { border-color: var(--tn-on-blue); background: var(--tn-blue); }
  .runsheet__stops li:first-child::before, .dl-route__stops li:first-child::before { background: var(--tn-on-blue); }
}

.runsheet { background: var(--tn-blue); border-top-color: var(--tn-blue); --node-dash: var(--tn-on-blue); --node-ring: var(--tn-on-blue); }
.runsheet .eyebrow, .runsheet__note, .runsheet li p { color: var(--tn-on-blue-2); }
.runsheet time, .runsheet__place { color: var(--tn-on-blue); }
.runsheet a { color: var(--tn-on-blue); }

/* ---------- 2. Testimonials + partners: light logos on TABL-blue plates (white 6.21) ----------
   The UC Maker Space bulb is gold art: shown in greys on the plate, so no warm accent sits next to the blue. DoorDash's
   red-orange (#FF3008) wordmark shows as its own single-colour black lockup, for the same reason ("no orange anywhere"). */
.testimonial-logo:has(img[src*="light-logo"]), .partner-card__logo--night { background: var(--tn-blue); border-color: var(--tn-blue); }
.partner-card__logo--night img { filter: grayscale(1); }
.partner-card__logo--doordash img { filter: brightness(0); }

/* ---------- 3. Product: navy band, TABL-blue phone stages, white lane paint; the Tap stage stays navy + mint ---------- */
.route__num { border-color: var(--frost); color: var(--frost); }
.route__num--live { border-color: var(--signal-night); box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px var(--signal-night); } /* the live target */
.route__step:not(:last-child) .route__node::after { background: repeating-linear-gradient(90deg, var(--frost) 0 12px, transparent 12px 22px); }
.stage:not(.stage--tap) { background: var(--tn-blue); border-color: var(--tn-blue); }
.stage--tap { background: var(--night-raised); border-color: rgba(156, 203, 255, 0.55); } /* its own panel: ice hairline 3.70 */
.stage__device { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 -12px 40px -12px var(--tn-shade); }
.chip-hang { box-shadow: 0 0 0 1px rgba(1, 26, 67, 0.08), 0 14px 28px -12px rgba(0, 8, 28, 0.65); }
.band--night .lens .stage__readout { background: var(--night); border-color: rgba(156, 203, 255, 0.34); box-shadow: 0 8px 20px -10px rgba(0, 8, 28, 0.65); }
.lens { box-shadow: 0 18px 36px -16px rgba(0, 8, 28, 0.7); }
.tap-glyph__tile { background: rgba(75, 227, 174, 0.12); border-color: rgba(75, 227, 174, 0.5); }
.tap-glyph__rings { stroke: var(--tn-ice); stroke-opacity: 0.16; }
/* The divider under the route is a second painted lane line. */
.business { border-top-color: transparent; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 28px, transparent 28px 48px) left top / 100% 2px no-repeat; }
.band--night .icon-tile, .is-dark .icon-tile { background: var(--night-raised); border-color: rgba(156, 203, 255, 0.24); }
.business__grid .icon-tile { color: var(--tn-ice); }

/* ---------- 4. Screens: the phone stands on a TABL-blue panel inside the light stage; the chosen tab is navy ----------
   >720: the stage's own gradient, cut one stage padding right of the 284px phone. <=720 (stacked): cut across mid-phone.
   The one spacing rule in this file: >720 the column gap is two paddings, so the caption and tabs sit one full padding
   clear of the blue edge, the same as the stage's right padding (home.css's 64px gap left them 24px off the blue). */
.screens-stage {
  background: linear-gradient(90deg, var(--tn-blue) 0 calc(2 * clamp(24px, 3vw, 40px) + 284px), var(--sunk) 0) border-box;
  border-color: transparent;
  column-gap: calc(2 * clamp(24px, 3vw, 40px));
}
@media (max-width: 720px) { .screens-stage { background: linear-gradient(var(--tn-blue) 0 calc(20px + 243px), var(--sunk) 0) border-box; } }
@media (max-width: 480px) { .screens-stage { background: linear-gradient(var(--tn-blue) 0 calc(16px + 217px), var(--sunk) 0) border-box; } }
.device--stage { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 24px 48px -20px var(--tn-shade); }
.screen-card:hover { background: rgba(240, 244, 251, 0.55); }
@media (max-width: 720px) { .screen-card { background: rgba(240, 244, 251, 0.4); } }
/* Selected = navy, like the chart's TABL row: white title (14.9), frost-2 eyebrow (9.10), an ice edge. */
.screen-card[aria-selected="true"], .screen-card[aria-selected="true"]:hover {
  --ink: var(--frost); --ink-3: var(--frost-2);
  background: var(--night); border-color: var(--night); box-shadow: var(--e1), inset 3px 0 0 var(--tn-ice);
}

/* ---------- 5. Ecosystem: navy sign-plate icons with ice glyphs; the One-queue diagram on a TABL-blue plate ----------
   White tickets, white lane paint, the Kitchen Display a deepest-navy terminal chip. */
.eco-row .icon-tile { background: var(--night); border-color: var(--night); color: var(--tn-ice); }
.queue { background: var(--tn-blue); border-color: var(--tn-blue); box-shadow: var(--e2); color: var(--tn-on-blue-2); }
.queue__k { color: var(--tn-on-blue); }
.queue__src { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); color: var(--tn-on-blue); } /* white 4.97 */
.queue__src img, .queue__src svg { color: var(--tn-on-blue); }
.queue__lanes i { background: repeating-linear-gradient(var(--tn-on-blue) 0 6px, transparent 6px 11px); }
.queue__lanes::after { background: repeating-linear-gradient(90deg, var(--tn-on-blue) 0 6px, transparent 6px 11px); }
.ticket { border-color: transparent; box-shadow: 0 10px 24px -10px rgba(1, 26, 67, 0.5); }
.ticket--prev { background: #DCE5F5; border-color: transparent; box-shadow: none; }
.queue__dest { background: var(--tn-deep); color: var(--tn-on-blue); box-shadow: 0 6px 14px -8px rgba(1, 26, 67, 0.6); }
.queue__dest svg { color: var(--tn-on-blue); }
.queue__cap { color: var(--tn-on-blue-2); } /* 5.03 */

/* ---------- 6. Pricing: the You pay card is navy with a white 2.7% and an ice "+ 5¢"; TABL is the navy row ---------- */
.card--night { box-shadow: 0 16px 32px -14px rgba(1, 26, 67, 0.45); }
.pay__rate span { color: var(--tn-ice); }
/* The TABL row is a raised navy row in the light chart: white name + total (14.9), frost-2 rate (9.10), an ice bar and
   ice rule (8.81). Local tokens, so the row's own gridlines, text and rule follow without new selectors. */
.provider-row--tabl {
  --ink: var(--frost); --ink-2: var(--frost-2); --ink-3: var(--frost-2);
  --accent: var(--tn-ice); --accent-hover: var(--frost);
  --line: rgba(185, 203, 235, 0.16); --line-strong: rgba(185, 203, 235, 0.36);
  background: var(--night);
}
.calc-step { color: var(--accent); }

/* ---------- 8. FAQ ---------- */
.faq-group__title { border-bottom-color: var(--accent); }
.faq-item[open] summary::after { background: linear-gradient(var(--frost), var(--frost)) center / 12px 2px no-repeat, var(--accent); border-color: var(--accent); }
.faq-item summary:hover::after { border-color: var(--accent); }

/* ---------- Close band + footer: a flat TABL-blue close band, then the deepest navy ----------
   On TABL blue the action inverts: a white button with a TABL-blue label (6.21), white focus ring, ice-white body text
   (5.03), white eyebrow node. The QR sign is a plain white sign with a deepest-navy QR. */
.final-cta {
  --frost-2: var(--tn-on-blue-2); --focus-night: #FFFFFF; --focus: #FFFFFF;
  --node-dash: var(--tn-on-blue); --node-ring: var(--tn-on-blue);
  background: var(--tn-blue);
}
.final-cta .btn--primary { background: var(--tn-on-blue); color: var(--accent); box-shadow: 0 2px 8px -2px rgba(1, 26, 67, 0.4); }
.final-cta .btn--primary:hover { background: var(--tn-on-blue-2); color: var(--accent-hover); }
.qr-plate svg, .dl-qr svg { fill: var(--tn-deep); }
.site-footer { background: var(--tn-deep); }
.footer-grid { border-top-color: rgba(156, 203, 255, 0.22); }
.footer-brand { background: var(--night); }

/* ---------- /download: the home hero's navy field behind the phone (and, on desktop, the QR sign) ----------
   721+: cut clamp(24px, 3vw, 42px) left of the 260px phone. Desktop QR (hover + fine pointer): >1240 the field takes the
   QR card too; 961-1240 the cut moves to the phone's centre line. Clean straight edge, no lane.
   <=720 (stacked): the media's own background, full-bleed. */
.download-panel {
  --tn-pad: clamp(0px, 3vw, 40px);
  --tn-phone: calc(var(--tn-cr) - var(--tn-pad) - 260px);
  --tn-cut: calc(var(--tn-phone) - clamp(24px, 3vw, 42px));
  background: linear-gradient(90deg, var(--paper) 0 calc(var(--tn-cut) - 12px), var(--night) 0);
}
@media (max-width: 1100px) { .download-panel { --tn-pad: 0px; } }
@media (hover: hover) and (pointer: fine) and (min-width: 961px) { .download-panel { --tn-cut: calc(var(--tn-phone) + 130px); } }
@media (hover: hover) and (pointer: fine) and (min-width: 1241px) { .download-panel { --tn-cut: calc(var(--tn-phone) - 32px - 176px - 32px); } }
@media (max-width: 720px) {
  .download-panel { background: var(--paper); }
  .dl-media { background: var(--night); box-shadow: 0 0 0 100vmax var(--night); clip-path: inset(-24px -100vmax -56px -100vmax); }
}
.dl-chip { border-color: rgba(156, 203, 255, 0.45); } /* the ink chip keeps an ice edge where it crosses the navy field */
.pg-device { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 48px -20px var(--tn-shade); }
/* The QR sign is TABL blue (it stands on navy or paper), white QR, white + ice-white caption (5.03). */
.dl-qr { background: var(--tn-blue); box-shadow: 0 18px 36px -16px var(--tn-shade); }
.dl-qr figcaption { color: var(--tn-on-blue-2); }
.dl-qr figcaption b { color: var(--tn-on-blue); }

/* /download's mini run-of-show is the home road again: a TABL-blue strip, navy carriageway, white centre line + stops. */
.dl-route { background: var(--tn-blue); border-top-color: var(--tn-blue); --node-dash: var(--tn-on-blue); --node-ring: var(--tn-on-blue); }
.dl-route__title, .dl-route__stops h3, .dl-route__stops h3 .fig { color: var(--tn-on-blue); }
.dl-route__stops p { color: var(--tn-on-blue-2); }

/* /404: a TABL-blue numeral; the phone rises from a navy stage crossed by one white lane marking. */
.not-found-code { color: var(--accent); }
.nf-stage { background: var(--night); border-color: var(--night); }
.nf-stage .pg-device { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 24px 48px -20px rgba(0, 0, 0, 0.6); }
.nf-stage::before { background: repeating-linear-gradient(90deg, var(--frost) 0 24px, transparent 24px 40px); }
/* The CSS-drawn app screen stays the real app: white UI, the app's own steel blue. */
.app {
  --paper: #F2F3F5; --surface: #FFFFFF; --sunk: #E6E8EB; --line: #D6D9DD; --line-strong: #B9BEC4;
  --ink: #111418; --ink-2: #343A40; --ink-3: #5B636B; --accent: #1D5894; --accent-wash: #DCE6F1;
}

.site-footer .footer-analytics{margin:16px 0;text-align:center}.site-footer .footer-analytics a{color:inherit;display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}