/* ═══════════════════════════════════════════════════════════════════════
   NOREVYN public site — light, calm, one story per page.

   Home, organizations, pilots, pricing, sign-in, the API reference, the
   legal pages, email confirmation and the 404 share this sheet. It sits on
   system.css (reset, fonts, the map component) and styles only under
   body.brand. Colours match the application (docs/SIMPLIFICATION_PLAN.md
   §5) and are --b-* tokens declared once, here. Two radii: 8px controls,
   12px surfaces.
   ═══════════════════════════════════════════════════════════════════════ */

body.brand {
  --b-bg: #FFFFFF;
  --b-soft: #F5F8FC;
  --b-soft-2: #EEF3FA;
  --b-ink: #0A1628;
  --b-ink-2: #475467;
  --b-ink-3: #667085;
  --b-line: #E4E9F0;
  --b-line-2: #D5DDE8;
  --b-blue: #1463FF;
  --b-blue-hover: #0E52DB;
  --b-blue-ink: #1452D6;
  --b-blue-soft: #EAF1FF;
  --b-blue-pale: #DCE7FF;
  --b-green: #0F7552;
  --b-green-soft: #EDF8F3;
  --b-amber: #B54708;
  --b-amber-soft: #FFF6E9;
  --b-amber-line: #F2DDB0;
  --b-amber-ink: #8A3B05;
  --b-red: #C0282D;
  --b-red-soft: #FDECEC;
  --b-red-ink: #9B1C1C;
  --b-red-line: #F5C2C2;
  --b-blue-line: #D4E1FF;
  /* A card, a panel, a menu, an input: white on the light page. */
  --b-surface: #FFFFFF;
  /* The brand's navy where it is a BACKGROUND (the ink panels, the sign-in
     photo card): it stays navy in both appearances, where --b-ink does not. */
  --b-navy: #0A1628;
  /* The brand blue as text and icon colour. The button blue itself, on the
     dark page, is too dark to read as small text; this one is lifted there. */
  --b-blue-text: #1463FF;
  /* A caption over a screenshot. */
  --b-glass: rgba(255, 255, 255, 0.94);
  --b-r-sm: 8px;
  --b-r-lg: 12px;
  --b-head: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --b-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --b-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --b-gutter: 48px;
  --b-header-h: 64px;
  --b-shadow: 0 24px 60px -28px rgba(10, 22, 40, .28);
  --focus-b: 0 0 0 3px rgba(20, 99, 255, 0.35);

  margin: 0;
  background: var(--b-bg);
  color: var(--b-ink-2);
  font-family: var(--b-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html:has(body.brand) { background: #FFFFFF; scroll-padding-top: 80px; }

/* ── dark appearance ───────────────────────────────────────────────────────
   The public site follows the device's appearance. It is the same palette
   the other way up: the page is the brand's navy taken darker, the ink is
   near-white, the blue keeps its place on buttons, and text and icons in
   blue take the paler blue the ink panels already used. Every rule above
   and below reads its colour from these tokens; nothing else changes. The
   signed-in app has its own token set in system.css and stays light. */
@media (prefers-color-scheme: dark) {
  html:has(body.brand) { background: #060B14; color-scheme: dark; }
  body.brand {
    --b-bg: #060B14;
    --b-soft: #0B1422;
    --b-soft-2: #101B2D;
    --b-ink: #F2F5FA;
    --b-ink-2: #B9C3D2;
    --b-ink-3: #94A1B5;
    --b-line: #1F2B3F;
    --b-line-2: #2D3B54;
    --b-blue-ink: #8FB6FF;
    --b-blue-text: #6EA0FF;
    --b-blue-soft: #10254B;
    --b-blue-pale: #172F5F;
    --b-blue-line: #244382;
    --b-green: #4CCB92;
    --b-green-soft: #0C271D;
    --b-amber: #F0A444;
    --b-amber-soft: #2A1D08;
    --b-amber-line: #5C431A;
    --b-amber-ink: #F6C880;
    --b-red: #FF7A72;
    --b-red-soft: #2E1213;
    --b-red-ink: #FFB4AE;
    --b-red-line: #6B2426;
    --b-surface: #0E1726;
    --b-navy: #101D33;
    --b-glass: rgba(14, 23, 38, 0.92);
    --b-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
    --focus-b: 0 0 0 3px rgba(143, 182, 255, 0.55);
  }
}
body.brand h1, body.brand h2, body.brand h3, body.brand h4 { color: var(--b-ink); font-family: var(--b-head); letter-spacing: -0.01em; }
body.brand p { line-height: 1.6; }
body.brand a { color: inherit; }
/* Zero specificity, so any component that fills a box wins. */
:where(body.brand) img { max-width: 100%; height: auto; }
/* Long words, emails and service names wrap inside their box on a phone. */
body.brand h1, body.brand h2, body.brand h3, body.brand p, body.brand li, body.brand summary, body.brand dd { overflow-wrap: break-word; }
body.brand :focus-visible { outline: none; box-shadow: var(--focus-b); border-radius: 4px; }
/* A display rule on a component must never beat the hidden attribute. */
body.brand [hidden] { display: none !important; }
.b-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.b-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.b-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--b-ink); color: var(--b-bg) !important; border-radius: var(--b-r-sm); text-decoration: none; }
.b-skip:focus { top: 12px; }
.b-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--b-gutter); }
[id] { scroll-margin-top: 80px; }

/* ── type ──────────────────────────────────────────────────────────────── */
.b-eyebrow { margin: 0 0 14px; font: 700 12px/1.3 var(--b-body); letter-spacing: .14em; text-transform: uppercase; color: var(--b-blue-ink); }
.b-h1 { margin: 0; font-size: clamp(40px, 5.2vw, 64px); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.b-h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.b-h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.b-lede { margin: 18px 0 0; font-size: 19px; line-height: 1.55; color: var(--b-ink-2); max-width: 36em; }
.b-text { margin: 14px 0 0; font-size: 16px; color: var(--b-ink-2); max-width: 36em; }
.b-fine { margin: 28px 0 0; font-size: 14px; color: var(--b-ink-3); }
.b-muted { color: var(--b-ink-3); }
.b-pill { display: inline-flex; align-items: center; min-height: 30px; margin: 0 0 20px; padding: 0 12px; border-radius: 999px; background: var(--b-blue-soft); color: var(--b-blue-ink); font: 600 14px/1 var(--b-body); }

/* ── buttons and links ─────────────────────────────────────────────────── */
.b-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: var(--b-r-sm); border: 1px solid transparent;
  font: 600 15px/1.2 var(--b-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.b-btn .b-ico { width: 18px; height: 18px; }
.b-btn-primary { background: var(--b-blue); color: #fff !important; }
.b-btn-primary:hover { background: var(--b-blue-hover); }
/* Secondary: white with a subtle border. */
.b-btn-outline { background: var(--b-surface); color: var(--b-ink) !important; border-color: var(--b-line-2); }
.b-btn-outline:hover { border-color: var(--b-ink-3); }
.b-btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.b-btn-block { width: 100%; }
/* Tertiary: text with an arrow. */
.b-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--b-blue-ink) !important; font: 600 15px/1.2 var(--b-body); text-decoration: none; }
.b-arrow .b-ico { width: 18px; height: 18px; transition: transform .15s ease; }
.b-arrow:hover .b-ico { transform: translateX(3px); }
.b-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }

/* ── header ────────────────────────────────────────────────────────────── */
.b-header { position: sticky; top: 0; z-index: 50; height: var(--b-header-h); background: rgba(255,255,255,0); transition: background-color .2s ease, box-shadow .2s ease; }
/* Opaque once scrolled: the page scrolling underneath must not show through.
   The map previews isolate their own z-indexes, or a map pane paints over
   this header. */
.b-header.is-solid, .b-header.is-open { background: var(--b-bg); box-shadow: 0 1px 0 var(--b-line); }
.b-header-in { height: 100%; display: flex; align-items: center; gap: 36px; }
.b-logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--b-ink) !important; text-decoration: none; flex: none; }
.b-logo svg { width: 24px; height: 24px; }
.b-logo span { font: 600 17px/1 var(--b-body); letter-spacing: 0.18em; }
.b-nav { display: flex; align-items: center; gap: 28px; }
.b-nav > a, .b-nav summary { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font: 500 15px/1 var(--b-body); color: var(--b-ink) !important; text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap; }
.b-nav summary::-webkit-details-marker { display: none; }
.b-nav summary .b-ico { width: 16px; height: 16px; transition: transform .15s ease; }
.b-menu[open] summary .b-ico { transform: rotate(180deg); }
.b-nav > a[aria-current="page"] { color: var(--b-blue-ink) !important; }
.b-nav > a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 1px; background: var(--b-blue); }
.b-nav > a:hover, .b-nav summary:hover { color: var(--b-blue-ink) !important; }
.b-menu { position: relative; }
.b-menu-panel { position: absolute; top: calc(100% + 6px); left: -14px; min-width: 260px; padding: 8px; background: var(--b-surface); border: 1px solid var(--b-line); border-radius: var(--b-r-lg); box-shadow: var(--b-shadow); }
.b-menu-panel a { display: block; padding: 10px 12px; border-radius: var(--b-r-sm); color: var(--b-ink) !important; text-decoration: none; font-size: 15px; font-weight: 500; }
.b-menu-panel a small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--b-ink-3); }
.b-menu-panel a:hover { background: var(--b-soft); }
.b-header-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.b-signin { font: 600 14px/1 var(--b-body); color: var(--b-ink) !important; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 18px; }
.b-signin:hover { color: var(--b-blue-ink) !important; }
.b-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-right: -10px; background: none; border: 0; border-radius: var(--b-r-sm); color: var(--b-ink); cursor: pointer; }
.b-toggle .b-ico { width: 24px; height: 24px; }
.b-nav .b-nav-mobile { display: none; }

/* ── hero ──────────────────────────────────────────────────────────────── */
.b-hero { position: relative; margin-top: calc(-1 * var(--b-header-h)); padding: calc(var(--b-header-h) + 64px) 0 72px; background: linear-gradient(180deg, var(--b-soft) 0%, var(--b-bg) 70%); }
.b-hero-center { text-align: center; }
.b-hero-center .b-lede { margin-left: auto; margin-right: auto; }
.b-hero-center .b-actions { justify-content: center; }
.b-lines { max-width: 30em; }
/* Split hero for the audience pages and pricing: copy beside a photograph. */
.b-hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.b-hero-split .b-h1 { font-size: clamp(40px, 4.4vw, 60px); }
.b-hero-split .b-actions .b-btn { min-height: 54px; padding: 0 26px; font-size: 16px; }
.b-hero-photo { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--b-r-lg); background: var(--b-soft-2); }
.b-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; }
.b-stats { display: flex; flex-wrap: wrap; gap: 16px 0; margin: 32px 0 0; padding: 0; list-style: none; }
.b-stats li { padding: 0 24px; border-left: 1px solid var(--b-line-2); }
.b-stats li:first-child { padding-left: 0; border-left: 0; }
.b-stats b { display: block; font: 800 26px/1.1 var(--b-head); letter-spacing: -0.02em; color: var(--b-ink); }
.b-stats span { display: block; margin-top: 4px; font-size: 14px; color: var(--b-ink-2); }

/* The hero stage: the sample workspace in front of a photograph. */
.b-stage { position: relative; margin: 56px 0 0; }
.b-stage-media { position: relative; overflow: hidden; border-radius: var(--b-r-lg); aspect-ratio: 16 / 7.4; background: var(--b-soft-2); }
.b-stage-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; }
.b-stage .b-win { position: relative; z-index: 1; width: calc(100% - 112px); margin: -30% auto 0; }

/* ── product previews: light windows built from the app's parts ───────── */
.b-win { position: relative; isolation: isolate; overflow: hidden; background: var(--b-surface); border: 1px solid var(--b-line); border-radius: var(--b-r-lg); box-shadow: var(--b-shadow); color: var(--b-ink-2); text-align: left; font-family: var(--b-body); }
.b-win-top { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--b-line); }
.b-win-brand { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--b-body); letter-spacing: .16em; color: var(--b-ink); }
.b-win-brand svg { width: 18px; height: 18px; }
.b-win-sample { padding: 4px 8px; border-radius: 999px; background: var(--b-soft-2); font: 600 12px/1 var(--b-body); color: var(--b-ink-2); }
.b-win-av { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--b-blue-soft); color: var(--b-blue-ink); font: 700 12px/1 var(--b-body); }
.b-win-body { display: grid; grid-template-columns: 60px minmax(0, 1fr); }
.b-win-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; border-right: 1px solid var(--b-line); background: var(--b-soft); }
.b-win-rail span { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--b-r-sm); color: var(--b-ink-3); }
.b-win-rail span.on { background: var(--b-blue-soft); color: var(--b-blue-text); }
.b-win-main { min-width: 0; padding: 18px 20px 20px; }
.b-win-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.b-win-head strong { font: 700 20px/1.2 var(--b-head); color: var(--b-ink); letter-spacing: -0.01em; }
.b-win-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--b-r-sm); background: var(--b-blue); color: #fff; font: 600 13px/1 var(--b-body); }
.b-win-btn .b-ico { width: 16px; height: 16px; stroke-width: 2.2; }
.b-win-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
.b-win-map { position: relative; min-height: 300px; border-radius: var(--b-r-sm); overflow: hidden; background: var(--b-soft-2); }
.b-win-map .nvm { position: absolute; inset: 0; }
.b-win-legend { position: absolute; left: 10px; bottom: 10px; z-index: 500; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.94); font: 600 12px/1.2 var(--b-body); color: var(--b-ink); }
.b-win-list { margin: 0; padding: 0; list-style: none; display: grid; align-content: start; }
.b-win-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 10px; border-bottom: 1px solid var(--b-line); }
.b-win-list li:last-child { border-bottom: 0; }
.b-win-list li.on { background: var(--b-soft); border-radius: var(--b-r-sm); border-bottom-color: transparent; }
.b-win-list b { display: block; font-size: 14px; font-weight: 600; color: var(--b-ink); }
.b-win-list small { display: block; font-size: 13px; color: var(--b-ink-3); }
.b-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: 999px; background: var(--b-soft-2); color: var(--b-ink-2); font: 600 12px/1.2 var(--b-body); font-style: normal; white-space: nowrap; }
.b-badge.is-ok { background: var(--b-green-soft); color: var(--b-green); }
.b-badge.is-warn { background: var(--b-amber-soft); color: var(--b-amber); }
.b-badge.is-info { background: var(--b-blue-soft); color: var(--b-blue-ink); }
.b-caption { margin: 14px 2px 0; font-size: 13px; color: var(--b-ink-3); text-align: center; }

/* mission readiness preview */
.b-preview { margin: 40px 0 0; }
.b-preview-win { display: block; }
.b-preview-map { position: relative; min-height: 380px; background: var(--b-soft-2); }
.b-preview-map .nvm { position: absolute; inset: 0; }
.b-preview-panel { padding: 24px; border-left: 1px solid var(--b-line); }
.b-preview-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--b-line); }
.b-preview-h b { display: block; font: 700 20px/1.2 var(--b-head); color: var(--b-ink); }
.b-preview-h small { display: block; margin-top: 4px; font-size: 14px; color: var(--b-ink-3); }
.b-ready { margin: 0; padding: 6px 0; list-style: none; }
.b-ready li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--b-line); font-size: 15px; }
.b-ready span { color: var(--b-ink); font-weight: 500; }
.b-ready em { display: inline-flex; align-items: center; gap: 8px; font-style: normal; color: var(--b-ink-2); }
.b-ready em .b-ico { color: var(--b-green); }
.b-preview-pilot { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.b-preview-pilot i { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--b-blue-soft); color: var(--b-blue-ink); font: 700 14px/1 var(--b-body); font-style: normal; }
.b-preview-pilot b { display: block; font-size: 15px; color: var(--b-ink); }
.b-preview-pilot small { display: block; font-size: 13px; color: var(--b-ink-3); }

/* ── sections ──────────────────────────────────────────────────────────── */
.b-section { padding: 96px 0; }
.b-section-tight { padding: 48px 0; }
.b-soft { background: var(--b-soft); }
.b-rule { border-top: 1px solid var(--b-line); }
.b-rule-b { border-bottom: 1px solid var(--b-line); }
.b-head { max-width: 720px; margin: 0 auto; text-align: center; }
.b-head .b-text { margin-left: auto; margin-right: auto; }
.b-head-left { max-width: 720px; }

/* trust strip: four concepts, no numbers */
.b-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0 auto; list-style: none; }
.b-trust li { display: flex; gap: 14px; align-items: flex-start; }
.b-trust .b-ico { width: 24px; height: 24px; margin-top: 1px; color: var(--b-blue-text); }
.b-trust b { display: block; font-size: 16px; font-weight: 600; color: var(--b-ink); }
.b-trust span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--b-ink-2); }

/* numbered steps with a connector line */
.b-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 48px 0 0; padding: 0; list-style: none; position: relative; }
.b-steps.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b-steps::before { content: ""; position: absolute; top: 22px; left: 22px; right: 22px; height: 1px; background: var(--b-line-2); }
.b-steps li { position: relative; }
.b-steps .b-num { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--b-surface); border: 1px solid var(--b-line-2); color: var(--b-blue-ink); font: 700 17px/1 var(--b-head); }
.b-steps h3 { margin: 18px 0 6px; font-size: 18px; }
.b-steps p { margin: 0; max-width: 22em; font-size: 15px; color: var(--b-ink-2); }
.b-section .b-fine { text-align: center; }

/* audiences: two panels side by side */
.b-aud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.b-aud-card { display: flex; flex-direction: column; overflow: hidden; background: var(--b-surface); border: 1px solid var(--b-line); border-radius: var(--b-r-lg); }
.b-aud-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--b-soft-2); }
.b-aud-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; }
.b-aud-card .b-netmap { aspect-ratio: 16 / 9; min-height: 0; border: 0; border-radius: 0; }
.b-aud-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 32px; }
.b-aud-body .b-h2 { font-size: clamp(22px, 1.9vw, 27px); }
.b-aud-body .b-btn { margin-top: auto; }
.b-checks { margin: 18px 0 24px; padding: 0; list-style: none; display: grid; gap: 9px; }
.b-checks li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.45; color: var(--b-ink); }
.b-checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--b-blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231452D6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.b-checks.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }

/* features: icon, title, one line */
.b-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; margin: 48px 0 0; padding: 0; list-style: none; }
.b-features li { min-width: 0; }
.b-features .b-h3 { margin-top: 16px; }
.b-features p { margin: 6px 0 0; font-size: 15px; color: var(--b-ink-2); max-width: 26em; }
.b-features.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.b-tile { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--b-r-sm); background: var(--b-blue-soft); color: var(--b-blue-text); flex: none; }
.b-tile .b-ico { width: 24px; height: 24px; }

/* FAQ */
.b-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.b-acc { border-top: 1px solid var(--b-line); }
.b-acc details { border-bottom: 1px solid var(--b-line); }
.b-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 0; font: 600 17px/1.4 var(--b-body); color: var(--b-ink); cursor: pointer; list-style: none; }
.b-acc summary::-webkit-details-marker { display: none; }
.b-acc summary::after { content: ""; flex: none; width: 14px; height: 14px; background:
  linear-gradient(currentColor, currentColor) center / 14px 1.8px no-repeat,
  linear-gradient(currentColor, currentColor) center / 1.8px 14px no-repeat; transition: transform .15s ease; }
.b-acc details[open] > summary::after { transform: rotate(45deg); }
.b-acc details > div { padding: 0 0 20px; font-size: 16px; color: var(--b-ink-2); max-width: 46em; }
.b-acc details > div > * { margin: 0; }
.b-acc details > div > * + * { margin-top: 10px; }
.b-acc a { color: var(--b-blue-ink); text-underline-offset: 2px; }
.b-states { display: grid; gap: 6px; margin: 10px 0 0; padding: 14px 16px; background: var(--b-soft); border-radius: var(--b-r-sm); }
.b-states div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; }
.b-states dt { font-weight: 600; color: var(--b-ink); }
.b-states dd { margin: 0; }

/* closing call to action */
.b-cta { padding: 88px 0; background: var(--b-soft); border-top: 1px solid var(--b-line); }
.b-cta-in { text-align: center; }
.b-cta-in > p { margin: 12px 0 0; font-size: 18px; color: var(--b-ink-2); }
.b-cta-in .b-actions { justify-content: center; }

/* pricing */
.b-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.b-plan { display: flex; flex-direction: column; padding: 28px; background: var(--b-surface); border: 1px solid var(--b-line); border-radius: var(--b-r-lg); }
.b-plan h3 { margin: 16px 0 0; font-size: 20px; }
.b-plan-sub { margin: 4px 0 0; font-size: 15px; color: var(--b-ink-2); }
.b-price { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 20px; }
.b-price b { font: 800 48px/1 var(--b-head); letter-spacing: -0.04em; color: var(--b-ink); }
.b-price span { font-size: 15px; color: var(--b-ink-2); }
.b-plan .b-checks { margin: 0 0 28px; }
.b-plan .b-checks li { font-size: 15px; }
.b-plan .b-btn { margin-top: auto; }
.b-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 48px 0 0; padding: 0; list-style: none; }
.b-flow h3 { margin: 16px 0 6px; font-size: 18px; }
.b-flow p { margin: 0; font-size: 15px; color: var(--b-ink-2); }
.b-note { display: flex; gap: 12px; align-items: center; margin: 40px auto 0; max-width: 760px; padding: 14px 18px; background: var(--b-blue-soft); border-radius: var(--b-r-sm); font-size: 15px; color: var(--b-blue-ink); }
.b-note .b-ico { color: var(--b-blue-text); }

/* live pilot map (real published pilots at city-level positions) */
.b-netmap { position: relative; isolation: isolate; min-height: 320px; overflow: hidden; background: var(--b-soft-2); border: 1px solid var(--b-line); border-radius: var(--b-r-lg); }
.b-netmap .nvm { position: absolute; inset: 0; }
.b-netmap-count { position: absolute; z-index: 500; left: 12px; bottom: 12px; padding: 6px 10px; background: rgba(255,255,255,.95); border-radius: var(--b-r-sm); color: var(--b-ink); font-size: 13px; line-height: 1.35; }
.b-netmap-count b { margin-right: 4px; font-size: 15px; }

/* ── footer ────────────────────────────────────────────────────────────── */
.b-footer { background: var(--b-bg); border-top: 1px solid var(--b-line); color: var(--b-ink-2); }
.b-footer-top { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding: 56px 0 40px; }
.b-footer-brand p { margin: 10px 0 0; font-size: 14px; color: var(--b-ink-3); }
.b-footer-nav { display: flex; justify-content: space-between; gap: 24px; }
.b-footer-nav > div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.b-footer-h { margin: 0 0 6px; font: 600 14px/1.4 var(--b-body); color: var(--b-ink); }
.b-footer-nav a { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; line-height: 1.3; color: var(--b-ink-2) !important; text-decoration: none; }
.b-footer-nav a:hover { color: var(--b-blue-ink) !important; }
.b-footer-legal { margin: 0; padding: 20px 0 28px; border-top: 1px solid var(--b-line); font-size: 13px; color: var(--b-ink-3); }

/* ── sign-in ───────────────────────────────────────────────────────────── */
.b-auth { margin-top: calc(-1 * var(--b-header-h)); padding: calc(var(--b-header-h) + 48px) 0 72px; background: linear-gradient(180deg, var(--b-soft) 0%, var(--b-bg) 80%); }
.b-auth-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
.b-auth-card { width: 100%; max-width: 480px; margin: 0 auto; padding: 40px; background: var(--b-surface); border: 1px solid var(--b-line); border-radius: var(--b-r-lg); box-shadow: var(--b-shadow); }
.b-auth-card h1 { margin: 0; font-size: clamp(30px, 3vw, 36px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.b-auth-sub { margin: 10px 0 0; font-size: 16px; color: var(--b-ink-2); }
.b-auth-lede:empty { display: none; }
.b-auth-lede { margin: 10px 0 0; font-size: 15px; color: var(--b-ink-2); }
.b-auth-media { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px; padding: 36px; border-radius: var(--b-r-lg); background: var(--b-navy); color: #fff; }
.b-auth-media > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.b-auth-media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,22,40,0) 40%, rgba(10,22,40,.82) 100%); }
.b-auth-media h2 { margin: 0; color: #fff !important; font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
.b-auth-media p { margin: 10px 0 0; max-width: 30em; font-size: 16px; color: rgba(255,255,255,.92); }
.b-form { margin-top: 26px; display: grid; gap: 18px; }
.b-field { display: grid; gap: 8px; }
.b-field > span { font: 600 14px/1.2 var(--b-body); color: var(--b-ink); }
.b-input { position: relative; display: flex; align-items: center; }
.b-input > .b-ico { position: absolute; left: 14px; color: var(--b-ink-3); pointer-events: none; }
.b-input input { width: 100%; min-height: 48px; padding: 0 48px 0 44px; border: 1px solid var(--b-line-2); border-radius: var(--b-r-sm); background: var(--b-surface); font: 400 16px/1.2 var(--b-body); color: var(--b-ink); }
.b-input input::placeholder { color: #7A8699; }
.b-input input:focus { outline: none; border-color: var(--b-blue-text); box-shadow: var(--focus-b); }
.b-eye { position: absolute; right: 2px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: var(--b-r-sm); color: var(--b-ink-2); cursor: pointer; }
.b-forgot { justify-self: end; margin: -8px 0 0; }
.b-linkbtn { background: none; border: 0; padding: 0; min-height: 44px; font: 500 14px/1.2 var(--b-body); color: var(--b-blue-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.b-form .b-btn { min-height: 48px; font-size: 16px; }
/* The arrow is drawn in CSS: signin.js swaps the button's text while it
   works, which would delete an icon placed inside it. */
#si-go::after { content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
#si-go:disabled { opacity: .75; cursor: progress; }
.b-msg, .si-msg { padding: 12px 14px; border-radius: var(--b-r-sm); font-size: 15px; }
/* signin.js rewrites the className to "si-msg note", so both spellings style alike. */
.si-msg.err, .b-msg.err { background: var(--b-red-soft); color: var(--b-red-ink); border: 1px solid var(--b-red-line); }
.si-msg.note, .b-msg.note { background: var(--b-blue-soft); color: var(--b-blue-ink); border: 1px solid var(--b-blue-line); }
.b-auth-card .si-msg { margin-top: 16px; }
.b-auth-alt { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--b-line); text-align: center; font-size: 15px; color: var(--b-ink-2); }
.b-auth-alt a { color: var(--b-blue-ink); font-weight: 600; text-underline-offset: 2px; display: inline-flex; align-items: center; min-height: 44px; }
.b-auth-legal { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--b-ink-3); }
.b-auth-legal a { color: var(--b-ink-2); }

/* ── documents: legal pages, the API reference, short status pages ─────── */
/* The page head sits under the transparent header the way a hero does, so
   the header reads the same on every public page. */
.b-page-head { margin-top: calc(-1 * var(--b-header-h)); padding: calc(var(--b-header-h) + 56px) 0 48px; background: var(--b-soft); border-bottom: 1px solid var(--b-line); }
.b-page-head .b-h1 { font-size: clamp(36px, 3.6vw, 48px); }
.b-page-head .b-lede { max-width: 42em; font-size: 18px; }
.b-meta { margin: 16px 0 0; font-size: 14px; color: var(--b-ink-3); }
.b-doc-body { padding-block: 56px 96px; }

/* Prose at a reading measure. Paragraph measure is set here in em, which
   also overrides system.css's .doc measure on the API reference. */
.b-doc { max-width: 760px; font-size: 16px; line-height: 1.7; color: var(--b-ink-2); }
.b-doc.is-wide { max-width: 880px; }
.b-doc > :first-child { margin-top: 0; }
.b-doc h2 { margin: 48px 0 14px; font-size: clamp(22px, 2vw, 27px); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.b-doc.is-wide h2 { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--b-line); }
.b-doc h3 { margin: 40px 0 10px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.b-doc p { margin: 0 0 16px; max-width: 42em; line-height: 1.7; }
.b-doc ul, .b-doc ol { margin: 0 0 20px; padding-left: 22px; max-width: 44em; }
.b-doc li { margin: 8px 0; padding-left: 4px; max-width: none; line-height: 1.7; }
.b-doc li::marker { color: var(--b-ink-3); }
.b-doc b, .b-doc strong { font-weight: 600; color: var(--b-ink); }
.b-doc a { color: var(--b-blue-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.b-doc a:hover { color: var(--b-blue-hover); }
.b-doc code { padding: 1px 5px; font: 500 0.86em/1.5 var(--b-mono); color: var(--b-ink); background: var(--b-soft-2); border: 1px solid var(--b-line); border-radius: 4px; overflow-wrap: anywhere; }
/* Code samples scroll inside their own box; the page never does. */
.b-doc pre { margin: 12px 0 24px; padding: 16px 18px; overflow-x: auto; font: 13px/1.6 var(--b-mono); color: var(--b-ink); background: var(--b-soft); border: 1px solid var(--b-line); border-radius: var(--b-r-sm); tab-size: 2; }
.b-doc pre .c { color: var(--b-ink-3); }
.b-doc .b-table-wrap { margin: 12px 0 24px; overflow-x: auto; border: 1px solid var(--b-line); border-radius: var(--b-r-sm); }
.b-doc table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.b-doc th { padding: 10px 14px; text-align: left; font: 600 13px/1.3 var(--b-body); color: var(--b-ink-2); background: var(--b-soft); border-bottom: 1px solid var(--b-line); }
.b-doc td { padding: 12px 14px; vertical-align: top; border-top: 1px solid var(--b-line); max-width: none; line-height: 1.55; }
.b-doc tbody tr:first-child td { border-top: 0; }
.b-doc td:first-child { font: 500 14px/1.55 var(--b-mono); color: var(--b-ink); white-space: nowrap; }
.b-callout { margin: 20px 0 24px; padding: 16px 18px; background: var(--b-blue-soft); border: 1px solid var(--b-blue-pale); border-left: 3px solid var(--b-blue); border-radius: var(--b-r-sm); font-size: 15px; }
.b-callout.is-warn { background: var(--b-amber-soft); border-color: var(--b-amber-line); border-left-color: var(--b-amber); }
.b-doc .b-callout p { margin: 8px 0 0; max-width: none; }
.b-doc .b-callout > :first-child { margin-top: 0; }
.b-doc h3.b-endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 600 18px/1.35 var(--b-mono); letter-spacing: 0; }
.b-endpoint > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.b-method { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 4px; font: 700 12px/1 var(--b-mono); letter-spacing: .04em; }
.b-method.is-get { background: var(--b-blue-soft); color: var(--b-blue-ink); border: 1px solid var(--b-blue-pale); }
.b-method.is-post { background: var(--b-amber-soft); color: var(--b-amber-ink); border: 1px solid var(--b-amber-line); }

/* The API reference: contents beside the document, sticky on a laptop. */
.b-dev { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; padding-block: 48px 96px; }
.b-dev-side { position: sticky; top: calc(var(--b-header-h) + 24px); max-height: calc(100vh - var(--b-header-h) - 48px); overflow-y: auto; padding: 0 8px 8px 0; font-size: 14px; }
.b-dev-group + .b-dev-group { margin-top: 22px; }
.b-dev-group > p { margin: 0 0 8px; font: 600 13px/1.3 var(--b-body); color: var(--b-ink-2); }
.b-dev-side ul { margin: 0; padding: 0; list-style: none; }
.b-dev-side a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--b-line); color: var(--b-ink-2) !important; text-decoration: none; line-height: 1.4; overflow-wrap: anywhere; }
.b-dev-side a:hover { color: var(--b-blue-ink) !important; border-left-color: var(--b-blue-text); }
.b-dev-side code { font: 500 13px/1.4 var(--b-mono); }

/* Short status pages: email confirmation and not found. */
.b-status { display: flex; align-items: center; min-height: calc(100svh - var(--b-header-h) - 160px); padding: 64px 0 96px; background: var(--b-soft); }
.b-status-card { max-width: 560px; margin: 0 auto; padding: 40px; text-align: center; background: var(--b-surface); border: 1px solid var(--b-line); border-radius: var(--b-r-lg); box-shadow: var(--b-shadow); }
.b-status-card.is-wide { max-width: 720px; text-align: left; }
/* A status page with no header or footer around it (the offline page). */
.b-status.is-alone { min-height: 100svh; padding: 48px 0; }
.b-status-act { margin-top: 24px; }
.b-status-card h1 { margin: 18px 0 0; font-size: clamp(30px, 3vw, 40px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.b-status-card.is-wide h1 { margin-top: 0; }
.b-status-card > p { margin: 14px auto 0; max-width: 34em; font-size: 17px; color: var(--b-ink-2); }
.b-status-card.is-wide > p { margin-left: 0; }
.b-status-card .b-btn { margin-top: 28px; }
.b-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.b-links a { display: flex; gap: 14px; align-items: center; height: 100%; padding: 14px; border: 1px solid var(--b-line); border-radius: var(--b-r-sm); color: var(--b-ink) !important; text-decoration: none; }
.b-links a:hover { border-color: var(--b-blue-text); }
.b-links .b-tile { width: 44px; height: 44px; }
.b-links .b-tile .b-ico { width: 22px; height: 22px; }
.b-links span:last-child { min-width: 0; }
.b-links b { display: block; font-size: 16px; font-weight: 600; }
.b-links small { display: block; font-size: 14px; line-height: 1.4; color: var(--b-ink-3); overflow-wrap: anywhere; }

/* ═══ home 2026-09-17: the lead hero, the live product window, the close ═══
   White ground, one blue action, the real map doing the selling. The window
   chrome mirrors /map (rail, search, layer chips, Plan a mission, Layers and
   Basemap) so a visitor recognises the product when they sign in. It is
   decoration around a REAL map: the chrome is aria-hidden, the map is the
   product's own component drawing public live data. */
.b-kicker { margin: 0 0 14px; font: 700 12px/1.3 var(--b-body); letter-spacing: .14em; text-transform: uppercase; color: var(--b-blue-ink); }
.b-btn-lg { min-height: 54px; padding: 0 26px; font-size: 16px; }

.b-hero-lead { margin-top: calc(-1 * var(--b-header-h)); padding: calc(var(--b-header-h) + 72px) 0 96px; background: var(--b-surface); overflow: hidden; }
/* Scenic atmosphere, nearly washed out: it must never compete with the
   headline or the map. */
.b-hero-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: flex; justify-content: space-between; background: linear-gradient(180deg, #DCE8FF 0%, #EAF1FF 38%, #F7FAFF 66%, var(--b-bg) 88%); }
.b-hero-sky img { width: 48%; height: 100%; object-fit: cover; object-position: var(--pos, 35% 34%); opacity: .78; mix-blend-mode: luminosity; filter: saturate(.15) brightness(1.02) contrast(1.18); }
.b-sky-l { mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.72) 52%, transparent 88%), linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 62%, transparent 95%); mask-composite: intersect; -webkit-mask-composite: source-in; }
.b-sky-r { transform: scaleX(-1); mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.72) 52%, transparent 88%), linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 62%, transparent 95%); mask-composite: intersect; -webkit-mask-composite: source-in; }
.b-hero-lead::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.40) 44%, rgba(255,255,255,.86) 74%, var(--b-bg) 100%); }
.b-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 56px; align-items: center; }
.b-hero-lead .b-h1 { font-size: clamp(42px, 4.6vw, 66px); line-height: 1.03; letter-spacing: -0.04em; }
.b-hero-lead .b-lede { max-width: 21em; font-size: 19px; }
.b-book { margin: 22px 0 0; font-size: 15px; line-height: 1.5; color: var(--b-ink-2); }
.b-book a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; color: var(--b-blue-ink) !important; text-decoration: none; white-space: nowrap; }
.b-book a .b-ico { width: 16px; height: 16px; transition: transform .15s ease; }
.b-book a:hover .b-ico { transform: translateX(3px); }
.b-points { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 34px 0 0; padding: 0; list-style: none; }
.b-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--b-ink-2); }
.b-points .b-ico { width: 18px; height: 18px; color: var(--b-blue-text); }
.b-hero-app { margin: 0; }

/* the product window */
.b-app { position: relative; isolation: isolate; overflow: hidden; background: var(--b-surface); border: 1px solid var(--b-line); border-radius: 14px; box-shadow: 0 30px 70px -30px rgba(10, 22, 40, .34); }
.b-app > img { display: block; width: 100%; height: auto; }
.b-app-top { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--b-line); }
.b-app-brand { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--b-body); letter-spacing: .16em; color: var(--b-ink); flex: none; }
.b-app-brand svg { width: 16px; height: 16px; }
.b-app-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--b-line); border-radius: var(--b-r-sm); background: var(--b-soft); color: var(--b-ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.b-app-search .b-ico { width: 15px; height: 15px; flex: none; }
.b-app-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--b-blue); color: #fff; font: 700 11px/1 var(--b-body); }
.b-app-body { display: grid; grid-template-columns: 142px minmax(0, 1fr); height: clamp(380px, 33vw, 470px); }
.b-app-rail { display: grid; align-content: start; gap: 2px; padding: 10px 8px; border-right: 1px solid var(--b-line); background: var(--b-surface); }
.b-app-rail span { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 9px; overflow: hidden; white-space: nowrap; border-radius: var(--b-r-sm); font: 500 12.5px/1 var(--b-body); color: var(--b-ink-2); }
.b-app-rail .b-ico { width: 17px; height: 17px; }
.b-app-rail span.on { background: var(--b-blue-soft); color: var(--b-blue-ink); font-weight: 600; }
.b-app-map { position: relative; background: var(--b-soft-2) linear-gradient(180deg, #EEF3FA, #E6EDF7); }
.b-app-map .nvm { position: absolute; inset: 0; }
.b-app-bar { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 500; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 10px; }
.b-app-chips { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.b-app-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.b-app-chips span, .b-app-tools span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid rgba(10,22,40,.10); border-radius: 999px; background: rgba(255,255,255,.94); font: 600 12px/1 var(--b-body); color: var(--b-ink-2); white-space: nowrap; }
.b-app-chips .b-ico, .b-app-tools .b-ico { width: 14px; height: 14px; }
.b-app-chips span.on { color: var(--b-blue-ink); border-color: var(--b-blue-pale); background: rgba(255,255,255,.96); }
.b-app-tools .b-app-cta { background: var(--b-blue); border-color: var(--b-blue-text); color: #fff; }
.b-app-live { position: absolute; left: 10px; bottom: 26px; z-index: 500; display: none; align-items: center; gap: 7px; height: 26px; margin: 0; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.94); border: 1px solid rgba(10,22,40,.10); font: 600 11.5px/1 var(--b-body); color: var(--b-ink-2); }
.b-app-live.is-on { display: inline-flex; }
.b-app-map .nvm-pin-aircraft { width: 11px; height: 11px; border-width: 2px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.75); }
.b-app-map .nvm-pin-aircraft i { display: none; }
.b-app-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--b-green); }
.b-app-live.is-off i { background: var(--b-amber); }
.b-hero-app .b-caption { text-align: left; margin-top: 12px; }

/* value strip: icon, label, nothing else */
.b-trust li b { font-size: 15px; font-weight: 600; color: var(--b-ink); }

/* steps: an icon over a number, joined by one hairline */
/* --b-blue on the pale disc measured 4.35:1 at 17px, under the 4.5:1 floor.
   The base rule's --b-blue-ink clears it, so this override keeps that. */
.b-steps .b-num { width: 52px; height: 52px; background: var(--b-blue-soft); border-color: transparent; }
.b-steps .b-num .b-ico { width: 22px; height: 22px; }
.b-steps .b-num i { position: absolute; right: -4px; bottom: -4px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--b-surface); border: 1px solid var(--b-line-2); font: 700 11px/1 var(--b-body); font-style: normal; color: var(--b-ink); }
.b-steps::before { top: 26px; }
.b-steps li::after { content: ""; position: absolute; top: 25px; right: -18px; width: 8px; height: 8px; border-top: 1.5px solid var(--b-line-2); border-right: 1.5px solid var(--b-line-2); transform: rotate(45deg); }
.b-steps li:last-child::after { display: none; }

/* audience panels: editorial, not cards */
.b-aud { gap: 24px; max-width: 1320px; }
.b-aud-card { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: stretch; gap: 22px; padding: 26px; overflow: hidden; background: var(--b-surface); border: 1px solid var(--b-line); border-radius: 18px; box-shadow: 0 20px 50px -34px rgba(10, 22, 40, .34); }
.b-aud-card > * { min-width: 0; }
.b-aud-media, .b-aud-card .b-netmap { border-radius: var(--b-r-lg); overflow: hidden; }
.b-aud-media { position: relative; aspect-ratio: auto; border-radius: 0 18px 18px 0; }
/* The visual fills its half of the card, edge to edge, as the approved
   visual shows: the card's padding belongs to the copy, not the picture. */
.b-aud-card > .b-aud-media, .b-aud-card > .b-find { margin: -26px -26px -26px 0; }
.b-aud-card > .b-find { border-radius: 0; border: 0; border-left: 1px solid var(--b-line); box-shadow: none; display: flex; flex-direction: column; }
.b-aud-card > .b-find .b-netmap { flex: 1; height: auto; min-height: 150px; }
.b-aud-body { padding: 0; align-self: center; }
.b-aud-body .b-text { margin-top: 12px; }
.b-aud-body .b-arrow { margin-top: auto; }
.b-aud-chip { position: absolute; right: 16px; bottom: 16px; display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--b-r-sm); background: rgba(255,255,255,.95); box-shadow: 0 10px 24px -14px rgba(10,22,40,.5); }
.b-aud-chip .b-badge { justify-self: start; margin-bottom: 4px; }
.b-aud-chip b { font: 700 15px/1.2 var(--b-body); color: var(--b-ink); }
.b-aud-chip small { font-size: 12.5px; color: var(--b-ink-3); }

/* see it in action */
.b-show { display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); gap: 56px; align-items: center; }
.b-show > * { min-width: 0; }
.b-show .b-win, .b-show .b-preview-body, .b-show .b-preview-body > * { min-width: 0; }
.b-show-copy .b-text { margin-bottom: 20px; }
.b-show .b-preview { margin: 0; }
.b-preview-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.b-preview-win .b-win-top { justify-content: space-between; }

/* closing band: one scenic image, large type, two actions */
.b-close { position: relative; isolation: isolate; overflow: hidden; padding: 104px 0; background: var(--b-soft); border-top: 1px solid var(--b-line); text-align: center; }
.b-close-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: .28; filter: saturate(.7) brightness(1.1); }
.b-close::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.92)); }
.b-close-in .b-h2 { font-size: clamp(32px, 3.6vw, 48px); }
.b-close-in > p { margin: 14px 0 0; font-size: 18px; color: var(--b-ink-2); }
.b-close-in .b-actions { justify-content: center; }
.b-close-in .b-fine { max-width: 62em; margin: 40px auto 0; }
.b-close-in .b-fine a { color: var(--b-blue-ink); }

/* the questions page reuses the light sub-head */
.b-sub { margin-top: calc(-1 * var(--b-header-h)); padding: calc(var(--b-header-h) + 72px) 0 40px; background: linear-gradient(180deg, var(--b-soft) 0%, var(--b-bg) 90%); }
.b-sub-in { max-width: 760px; }

/* ═══ the approved landing visual (2026-09-17) ═══════════════════════════
   Pill actions, a raised value strip over the hero, chevroned steps and a
   "find the right pilot" card filled with the real published network. */
.b-btn-round { border-radius: 999px; }
.b-points li { align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.35; color: var(--b-ink-2); }
.b-points li .b-ico { width: 22px; height: 22px; }
.b-points { gap: 14px 28px; }

/* the raised strip sits between the hero and the page, as the visual shows */
.b-strip-sec { position: relative; z-index: 2; margin-top: -36px; padding: 0 0 8px; }
.b-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 0; margin: 0; padding: 18px 8px; list-style: none; background: var(--b-surface); border: 1px solid var(--b-line); border-radius: var(--b-r-lg); box-shadow: 0 20px 50px -30px rgba(10, 22, 40, .35); }
.b-strip li { display: flex; align-items: center; gap: 12px; padding: 4px 18px; border-left: 1px solid var(--b-line); min-width: 0; }
.b-strip li:first-child { border-left: 0; }
.b-strip-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--b-blue-soft); color: var(--b-blue-text); }
.b-strip b { display: block; font: 800 19px/1.15 var(--b-head); letter-spacing: -0.02em; color: var(--b-blue-ink); }
.b-strip div span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.3; color: var(--b-ink-2); }

/* steps: a big soft icon, a numbered title, a chevron between */
.b-steps { text-align: center; gap: 16px; }
.b-steps::before { display: none; }
.b-steps li { display: flex; flex-direction: column; align-items: center; }
.b-steps .b-num { width: 72px; height: 72px; background: var(--b-blue-soft); border: 0; }
.b-steps .b-num .b-ico { width: 30px; height: 30px; stroke-width: 1.6; }
.b-steps h3 { margin: 20px 0 6px; font-size: 19px; }
.b-steps p { margin: 0 auto; font-size: 15px; }
.b-steps li::after { content: ""; position: absolute; top: 26px; right: -18px; width: 18px; height: 18px; border-top: 2.5px solid var(--b-blue); border-right: 2.5px solid var(--b-blue); transform: rotate(45deg); opacity: .55; }

/* the organizations panel: a product card over the live pilot map */
.b-find { overflow: hidden; background: var(--b-surface); border: 1px solid var(--b-line); border-radius: var(--b-r-lg); box-shadow: 0 18px 44px -30px rgba(10, 22, 40, .3); }
.b-find-h { margin: 0; padding: 14px 14px 8px; font: 700 16px/1.2 var(--b-head); color: var(--b-ink); }
.b-find-list { margin: 0; padding: 0 8px 8px; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.b-find-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 6px; border-radius: var(--b-r-sm); }
.b-find-list li + li { border-top: 1px solid var(--b-line); border-radius: 0; }
img.b-find-av { object-fit: cover; }
.b-find-av { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--b-blue-soft); color: var(--b-blue-ink); font: 700 13px/1 var(--b-body); }
.b-find-who { min-width: 0; flex: 1 1 0; overflow: hidden; }
.b-find-who b { display: block; font-size: 15px; font-weight: 600; color: var(--b-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-find-who span { display: block; font-size: 13px; color: var(--b-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-find-list .b-btn { flex: none; }
.b-find-empty { font-size: 14px; color: var(--b-ink-3); }
.b-find .b-netmap { border: 0; border-radius: 0; border-top: 1px solid var(--b-line); min-height: 0; aspect-ratio: auto; height: 190px; }
.b-aud-card .b-find .b-netmap { aspect-ratio: auto; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  body.brand { --b-gutter: 32px; }
  .b-header-in { gap: 28px; }
  .b-nav { gap: 22px; }
  .b-stage .b-win { width: calc(100% - 64px); }
  .b-features.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-footer-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* The full navigation needs about 1000px; below that it becomes a menu. */
@media (max-width: 1080px) {
  .b-header { background: var(--b-bg); box-shadow: 0 1px 0 var(--b-line); }
  .b-toggle { display: inline-flex; }
  .b-nav { display: none; position: absolute; top: var(--b-header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100svh - var(--b-header-h)); overflow-y: auto; padding: 8px var(--b-gutter) 20px; background: var(--b-bg); border-bottom: 1px solid var(--b-line); box-shadow: 0 20px 30px -20px rgba(10,22,40,.25); }
  .b-header.is-open .b-nav { display: flex; }
  .b-nav > a, .b-nav summary { display: flex; min-height: 52px; font-size: 17px; border-bottom: 1px solid var(--b-line); }
  .b-nav > a[aria-current="page"]::after { display: none; }
  .b-menu-panel { position: static; min-width: 0; box-shadow: none; border: 0; border-radius: 0; padding: 4px 0 8px 12px; }
  .b-nav .b-nav-mobile { display: flex; }
  .b-signin { display: none; }
}

/* The chips truncate before they can be clipped by the window edge: a half
   chip behind the primary action reads as a broken control. */
@media (max-width: 1520px) {
  .b-app-chips span:nth-child(n + 4) { display: none; }
}

@media (max-width: 1320px) {
  .b-app-tools span:last-child { display: none; }
  .b-app-chips span:nth-child(n + 3) { display: none; }
}

@media (max-width: 1180px) {
  .b-hero-grid { gap: 40px; }
  .b-app-body { grid-template-columns: 52px minmax(0, 1fr); }
  .b-app-rail span { justify-content: center; padding: 0; gap: 0; }
  .b-app-rail span { font-size: 0; }
  .b-app-tools span:not(.b-app-cta) { display: none; }
  .b-app-chips span:nth-child(n + 5) { display: none; }
}

@media (max-width: 1024px) {
  .b-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .b-hero-lead { padding-bottom: 72px; }
  .b-hero-lead .b-lede { max-width: 34em; }
  .b-app-body { height: clamp(320px, 52vw, 420px); }
  .b-show { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 1180px) {
  .b-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 0; }
  .b-strip li:nth-child(4) { border-left: 0; }
}

@media (max-width: 960px) {
  .b-hero { padding: calc(var(--b-header-h) + 40px) 0 56px; }
  .b-strip-sec { margin-top: -24px; }
  .b-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-strip li:nth-child(odd) { border-left: 0; }
  .b-steps li::after { display: none; }
  .b-hero-lead { padding: calc(var(--b-header-h) + 48px) 0 64px; }
  .b-aud { gap: 48px; }
  .b-preview-body { grid-template-columns: minmax(0, 1fr); }
  .b-preview-panel { border-left: 0; border-top: 1px solid var(--b-line); }
  .b-close { padding: 80px 0; }
  .b-hero-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .b-hero-photo { aspect-ratio: 16 / 10; }
  .b-hero-photo img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .b-stage { margin-top: 40px; }
  .b-stage-media { aspect-ratio: 16 / 9; }
  .b-stage-media img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .b-stage .b-win { width: calc(100% - 40px); margin-top: -34%; }
  .b-win-grid { grid-template-columns: minmax(0, 1fr); }
  .b-win-map { min-height: 240px; }
  .b-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
  .b-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .b-steps::before { display: none; }
  .b-aud { grid-template-columns: minmax(0, 1fr); }
  .b-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-preview-map { min-height: 280px; }
  .b-preview-panel { border-left: 0; border-top: 1px solid var(--b-line); }
  .b-faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .b-plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
  .b-flow { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .b-footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
  .b-auth-in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .b-auth-media { order: 2; min-height: 260px; }
  .b-page-head { padding: calc(var(--b-header-h) + 40px) 0 36px; }
  .b-dev { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 32px; }
  .b-dev-side { position: static; max-height: none; overflow: visible; padding: 18px 20px; columns: 2; column-gap: 32px; background: var(--b-soft); border: 1px solid var(--b-line); border-radius: var(--b-r-sm); }
  .b-dev-group { break-inside: avoid; }
  .b-dev-group + .b-dev-group { margin-top: 0; padding-top: 18px; }
  .b-dev-group:first-child + .b-dev-group { padding-top: 0; }
}

@media (max-width: 760px) {
  body.brand { --b-gutter: 16px; --b-header-h: 60px; }
  .b-header-in { gap: 12px; }
  .b-header-right { gap: 8px; }
  .b-logo span { font-size: 16px; letter-spacing: .14em; }
  .b-header-right .b-btn-sm { min-height: 44px; }
  .b-signin.b-btn { display: none; }
  .b-h1 { font-size: clamp(36px, 10.4vw, 44px); line-height: 1.06; }
  .b-lede { font-size: 17px; }
  .b-actions { flex-direction: column; align-items: stretch; }
  .b-actions .b-btn { width: 100%; }
  .b-actions .b-arrow { justify-content: center; }
  .b-stats li { padding: 0 14px; }
  .b-stats b { font-size: 22px; }
  .b-stats span { font-size: 13px; }
  .b-section { padding: 64px 0; }
  .b-section-tight { padding: 36px 0; }
  /* On a phone the sample window sits below the photograph, not over it. */
  .b-stage-media { aspect-ratio: 16 / 10; }
  .b-stage .b-win { width: 100%; margin-top: -16px; }
  .b-win-body { grid-template-columns: minmax(0, 1fr); }
  .b-win-rail, .b-win-sample { display: none; }
  .b-win-main { padding: 14px; }
  .b-win-list li:nth-child(n + 3) { display: none; }
  .b-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .b-aud-card { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 20px; }
  .b-aud-card > .b-aud-media, .b-aud-card > .b-find { margin: 0 -20px -20px; border-radius: 0; }
  .b-aud-card > .b-find { border-left: 0; border-top: 1px solid var(--b-line); }
  .b-aud-media { aspect-ratio: 16 / 10; }
  .b-find-list li { gap: 8px; padding: 8px 4px; }
  .b-find-list .b-btn-sm { padding: 0 10px; }
  .b-strip { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .b-strip li { border-left: 0; padding: 8px 10px; }
  .b-strip li + li { border-top: 1px solid var(--b-line); }
  .b-steps { text-align: left; }
  .b-steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 2px; }
  .b-steps .b-num { width: 52px; height: 52px; grid-row: span 2; }
  .b-steps h3 { margin: 0; align-self: end; }
  .b-steps p { margin: 0; align-self: start; }
  .b-hero-lead { padding: calc(var(--b-header-h) + 32px) 0 48px; }
  .b-hero-lead .b-h1 { font-size: clamp(36px, 10.6vw, 46px); }
  .b-points { gap: 10px 18px; margin-top: 26px; }
  .b-points li { font-size: 13.5px; }
  .b-app-top { height: 42px; padding: 0 10px; }
  .b-app-brand span, .b-app-search { display: none; }
  .b-app-search { display: none; }
  .b-app-body { grid-template-columns: minmax(0, 1fr); height: 340px; }
  .b-app-rail { display: none; }
  .b-app-chips span:nth-child(n + 3), .b-app-tools span:not(.b-app-cta) { display: none; }
  .b-app-bar { gap: 6px; }
  .b-app-chips span, .b-app-tools span { height: 26px; padding: 0 8px; font-size: 11.5px; }
  .b-steps li::after { display: none; }
  .b-close { padding: 64px 0; }
  .b-close-in .b-fine { text-align: left; }
  .b-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; }
  .b-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; }
  .b-steps h3 { margin: 10px 0 4px; }
  .b-steps p { grid-column: 2; }
  .b-steps .b-num { grid-row: span 2; }
  .b-aud-body { padding: 24px 20px; }
  .b-aud-body .b-btn { width: 100%; }
  .b-checks.is-2 { grid-template-columns: minmax(0, 1fr); }
  .b-features, .b-features.is-4 { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 32px; }
  .b-preview-panel { padding: 18px; }
  .b-acc summary { font-size: 16px; }
  .b-states div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .b-states div + div { margin-top: 8px; }
  .b-cta { padding: 64px 0; }
  .b-plan { padding: 22px; }
  .b-footer-top { padding: 40px 0 28px; }
  .b-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-footer-nav a { min-height: 44px; }
  .b-auth { padding: calc(var(--b-header-h) + 24px) 0 48px; }
  .b-auth-card { padding: 24px 20px; }
  .b-auth-media { padding: 24px 20px; min-height: 220px; }
  .b-page-head { padding: calc(var(--b-header-h) + 32px) 0 28px; }
  .b-page-head .b-h1 { font-size: clamp(32px, 9vw, 40px); }
  .b-doc-body { padding-block: 36px 64px; }
  .b-doc h3.b-endpoint { font-size: 16px; }
  .b-doc pre { margin-inline: calc(-1 * var(--b-gutter)); padding-inline: var(--b-gutter); border-radius: 0; border-inline: 0; font-size: 12.5px; }
  /* Tables become one card per row; the header labels move into each card. */
  .b-doc .b-table-wrap { overflow: visible; border: 0; border-radius: 0; }
  .b-doc table, .b-doc tbody, .b-doc tr, .b-doc td { display: block; width: 100%; }
  .b-doc thead { display: none; }
  .b-doc tr { padding: 12px 14px; border: 1px solid var(--b-line); border-radius: var(--b-r-sm); }
  .b-doc tr + tr { margin-top: 10px; }
  .b-doc td, .b-doc tbody tr:first-child td { padding: 0; border: 0; }
  .b-doc td + td { margin-top: 4px; }
  .b-doc td:first-child { white-space: normal; overflow-wrap: anywhere; font-weight: 600; }
  .b-params td:nth-child(2)::before { content: "Required: "; color: var(--b-ink-3); }
  .b-tiers td:nth-child(2)::before { content: "Burst: "; color: var(--b-ink-3); }
  .b-tiers td:nth-child(3)::before { content: "Refill: "; color: var(--b-ink-3); }
  .b-tiers td:nth-child(4)::before { content: "Applies to: "; color: var(--b-ink-3); }
  .b-dev-side { columns: 1; }
  .b-dev-group + .b-dev-group, .b-dev-group:first-child + .b-dev-group { padding-top: 18px; }
  .b-status { padding: 40px 0 64px; }
  .b-status-card { padding: 28px 20px; }
  .b-links { grid-template-columns: minmax(0, 1fr); }
}

/* Every control a finger can reach is at least 44px tall. */
@media (pointer: coarse) {
  .b-btn-sm, .b-footer-nav a, .b-logo { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  body.brand *, body.brand *::before, body.brand *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* live open-mission count on the pilots page (brand.js fillBoardCount) */
.b-board-live { margin: var(--sp-3) 0 0; font-size: 15px; color: var(--b-ink-2); }
.b-board-live[hidden] { display: none; }

/* ── Book a pilot: the everyday customer's own section ──────────────────────
   A third audience on a page built for two, so it gets its own band rather
   than a cramped third column in the organizations/pilots grid. Copy on the
   left, the six things people actually ask for on the right. */
.b-book-sec { background: var(--b-blue-pale); }
.b-book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.b-book-copy .b-text { max-width: 34em; }
.b-book-note { margin: 18px 0 0; font-size: 14px; line-height: 1.55; color: var(--b-ink-2); }

.b-kinds { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.b-kinds li {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px;
  background: var(--b-surface); border: 1px solid var(--b-line); border-radius: var(--b-r-sm);
}
.b-kind-ico {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px;
  border-radius: 50%; background: var(--b-blue-soft); color: var(--b-blue-ink);
}
.b-kind-ico .b-ico { width: 18px; height: 18px; }
.b-kinds b { display: block; font-size: 15px; line-height: 1.3; color: var(--b-ink); }
.b-kinds small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--b-ink-2); }

@media (max-width: 900px) {
  .b-book-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 560px) {
  .b-kinds { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING PAGE (2026-09-24)

   One continuous story rather than a stack of marketing blocks: what NOREVYN
   does, the four ways in, booking a pilot, the lifecycle, the real product,
   who it is for, and the close. The `n-` prefix is this page only; the shared
   header, footer, buttons and tokens are untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

.n-h1 {
  margin: 0;
  font: 800 clamp(38px, 5.4vw, 70px)/1.0 var(--b-head);
  letter-spacing: -0.035em; color: var(--b-ink); text-wrap: balance;
}
.n-h1 em { font-style: normal; color: var(--b-blue-text); }
.n-h2 {
  margin: 0;
  font: 800 clamp(28px, 3.6vw, 46px)/1.08 var(--b-head);
  letter-spacing: -0.03em; color: var(--b-ink);
}
.n-h2 em { font-style: normal; color: var(--b-blue-text); }
/* A display line that breaks leaves one word alone on its second line
   ("work.", "operations."). Balancing splits the words evenly instead. */
.n-h1, .n-h2, .n-track-h, .n-shot-copy h3 { text-wrap: balance; }
.n-lede { margin: 22px 0 0; max-width: 30em; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--b-ink-2); }
.n-text { margin: 18px 0 0; max-width: 34em; font-size: 17px; line-height: 1.6; color: var(--b-ink-2); }
/* --b-ink-3 measures 4.01:1 on the pale blue band, under the 4.5:1 floor
   for text this size. --b-ink-2 clears it. */
.n-note { margin: 18px 0 0; font-size: 14px; line-height: 1.55; color: var(--b-ink-2); }
.n-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.n-head { max-width: 30em; margin: 0 0 clamp(36px, 4vw, 60px); }
.n-head .n-h2 { margin-top: 10px; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.n-hero { padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); }
.n-hero-grid { display: grid; grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.n-hero-copy { min-width: 0; }

/* The map bleeds to the right edge and fades into the white on its left, so
   the seam is a gradient rather than the hard edge of a rectangle. */
.n-hero-map { position: relative; margin: 0; min-width: 0; }
.n-hero-map img {
  display: block; width: 100%; height: auto; border-radius: var(--b-r-lg);
  box-shadow: 0 30px 70px -32px rgba(10, 22, 40, 0.42);
}
/* The screenshot is shown as itself: a rounded frame and a soft shadow. A
   white gradient used to sit over its left edge as a "seam", but the app's
   own rail is already white there, and the two whites read as a smudge. */
.n-hero-fig { position: relative; display: block; }
.n-hero-cap { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--b-ink-3); }

/* Four items as a deliberate two-by-two. As a wrapping row they broke 3+1 at
   desktop width, with "Compliance Records" alone on the second line. */
.n-trust { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 28px; margin: 34px 0 0; padding: 0; list-style: none; }
.n-trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--b-ink-2); }
.n-trust .b-ico { width: 17px; height: 17px; color: var(--b-blue-text); }

/* ── four entry points ────────────────────────────────────────────────── */
.n-entry { padding: clamp(28px, 3vw, 44px) 0 clamp(56px, 6vw, 88px); }
.n-entry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.n-entry-grid a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; height: 100%;
  padding: 26px 24px 28px; border: 1px solid var(--b-line); border-radius: var(--b-r-lg);
  background: var(--b-surface); text-decoration: none; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.n-entry-grid a:hover { border-color: var(--b-blue-text); transform: translateY(-2px); box-shadow: 0 14px 34px -22px rgba(10, 22, 40, 0.45); }
.n-entry-ico { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 8px; border-radius: 50%; background: var(--b-blue-soft); color: var(--b-blue-ink); }
.n-entry-ico .b-ico { width: 20px; height: 20px; }
.n-entry-grid b { font-size: 17px; line-height: 1.25; color: var(--b-ink); }
.n-entry-grid span:not(.n-entry-ico) { font-size: 14px; line-height: 1.5; color: var(--b-ink-2); }

/* ── book a pilot ─────────────────────────────────────────────────────── */
.n-book { padding: clamp(56px, 6vw, 96px) 0; background: var(--b-blue-pale); }
.n-book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.n-uses { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.n-uses li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px 10px 13px; background: var(--b-surface); border: 1px solid var(--b-line); border-radius: 999px;
  font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--b-ink);
}
.n-uses .b-ico { width: 18px; height: 18px; flex: none; color: var(--b-blue-text); }

/* ── how it works: one track per audience ───────────────────────────────
   NOREVYN is used three different ways, so a single row of steps could only
   ever describe one of them. Each track is its own row of cards with its own
   way in, divided by a rule rather than by another band of colour: three
   coloured sections in a row would read as three different pages. */
.n-how { padding: clamp(56px, 6vw, 96px) 0 clamp(64px, 7vw, 104px); }
.n-how .n-head { max-width: 34em; }
.n-track + .n-track {
  margin-top: clamp(38px, 4.5vw, 64px); padding-top: clamp(38px, 4.5vw, 64px);
  border-top: 1px solid var(--b-line);
}
.n-track-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 28px; margin-bottom: 24px;
}
/* The audience label is a pill, not a heading: it names who the row is for
   and must not take a place in the document outline. */
.n-track-tag {
  display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px;
  background: var(--b-blue-soft); color: var(--b-blue-ink);
  font: 700 12px/1.3 var(--b-body); letter-spacing: .1em; text-transform: uppercase;
}
.n-track-h { margin: 0; font: 700 clamp(21px, 2.2vw, 29px)/1.15 var(--b-head); letter-spacing: -0.02em; color: var(--b-ink); }
.n-track-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.n-track-steps li {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: 26px 24px 28px; border: 1px solid var(--b-line); border-radius: var(--b-r-lg); background: var(--b-surface);
}
.n-track-steps .n-entry-ico { margin-bottom: 16px; }
/* The step index in the corner, where it reads as a footnote mark rather
   than a second decoration stacked between the icon and the title. */
.n-track-steps .n-step-n { position: absolute; top: 24px; right: 24px; }
.n-track-steps b { font-size: 18px; line-height: 1.25; padding-right: 40px; color: var(--b-ink); }
.n-track-steps p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--b-ink-2); }
.n-step-n { display: block; font: 700 13px/1 var(--b-mono); letter-spacing: 0.06em; color: var(--b-blue-text); }

/* ── product proof ────────────────────────────────────────────────────── */
.n-proof { padding: clamp(56px, 6vw, 96px) 0 clamp(64px, 7vw, 104px); background: var(--b-soft); }
.n-shot { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(48px, 5vw, 80px); }
.n-shot:last-child { margin-bottom: 0; }
.n-shot.is-flip .n-shot-copy { order: 2; }
.n-shot-copy h3 { margin: 0 0 12px; font: 700 clamp(21px, 2vw, 27px)/1.2 var(--b-head); letter-spacing: -0.02em; color: var(--b-ink); }
.n-shot-copy p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--b-ink-2); }
/* A text link that carries an arrow. inline-flex with a SIZED icon: an
   unstyled inline <svg> takes its intrinsic box and hangs out of the line. */
.b-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-weight: 600; color: var(--b-blue-ink); text-decoration: underline; text-underline-offset: 3px;
}
.b-link .b-ico { width: 16px; height: 16px; flex: none; transition: transform .15s ease; }
.b-link:hover .b-ico { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .b-link .b-ico { transition: none; } }
/* The screenshot IS the visual: no card around it, just a soft lift. */
.n-shot-img { position: relative; margin: 0; }
.n-shot-img img {
  display: block; width: 100%; height: auto; border-radius: var(--b-r-lg);
  border: 1px solid var(--b-line); box-shadow: 0 28px 64px -34px rgba(10, 22, 40, 0.45);
}
.n-shot-img figcaption {
  position: absolute; top: 14px; right: 14px; padding: 5px 11px; border-radius: 999px;
  background: var(--b-glass); border: 1px solid var(--b-line);
  font-size: 12px; font-weight: 600; color: var(--b-ink-2);
}

/* ── the questions people ask first ─────────────────────────────────────
   A list of links into /faq, where each answer is written once. A second
   copy on the landing page would drift out of step with the first. */
.n-qa { padding: clamp(56px, 6vw, 96px) 0; }
.n-qa-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.n-qa-copy { padding-top: 10px; }
.n-qa-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--b-line); }
.n-qa-list li { border-bottom: 1px solid var(--b-line); }
.n-qa-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 2px; text-decoration: none;
  font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--b-ink);
}
.n-qa-list a:hover { color: var(--b-blue-ink); }
.n-qa-list .b-ico { width: 18px; height: 18px; flex: none; color: var(--b-blue-text); transition: transform .15s ease; }
.n-qa-list a:hover .b-ico { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .n-qa-list .b-ico { transition: none; } }

/* ── close ────────────────────────────────────────────────────────────── */
.n-close { position: relative; isolation: isolate; padding: clamp(72px, 9vw, 136px) 0; color: #fff; overflow: hidden; }
.n-close-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.n-close::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8, 17, 32, 0.93) 0%, rgba(8, 17, 32, 0.78) 48%, rgba(8, 17, 32, 0.42) 100%);
}
.n-close-in { max-width: 44em; }
.n-close .b-kicker { color: #8FB6FF; }
.n-close .n-h2, .n-close .n-text { color: #fff; }
.n-close .n-text { opacity: 0.92; }
.n-close-note { margin: 34px 0 0; max-width: 46em; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.76); }
.n-close-note a { color: #fff; text-decoration: underline; }
.b-btn.n-on-dark { color: #fff; border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.10); }
.b-btn.n-on-dark:hover { border-color: #fff; background: rgba(255, 255, 255, 0.18); }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .n-entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* The headline and both actions come first; the map follows. */
  .n-hero-grid, .n-book-grid, .n-shot, .n-qa-grid { grid-template-columns: minmax(0, 1fr); }
  .n-hero-map::before { display: none; }
  .n-shot.is-flip .n-shot-copy { order: 0; }
  .n-shot-img { order: 1; }
  /* Three cards across a tablet leave roughly 180px of text each, which
     breaks the short sentences into ladders. One column reads. */
  .n-track-steps { grid-template-columns: minmax(0, 1fr); }
  .n-track-head { align-items: flex-start; }
  /* One column of tall cards was a screen and a half per track on a phone.
     Icon left, words right: half the height, and it reads as a list row. */
  .n-track-steps li { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 20px 20px 22px; }
  .n-track-steps .n-entry-ico { grid-row: 1 / span 2; margin: 0; }
  .n-track-steps b { grid-column: 2; margin-top: 10px; }
  .n-track-steps p { grid-column: 2; }
  .n-track-steps .n-step-n { top: 20px; right: 20px; }
}
@media (max-width: 680px) {
  .n-entry-grid { grid-template-columns: minmax(0, 1fr); }
  .n-actions .b-btn { flex: 1 1 100%; justify-content: center; }
  .n-trust { gap: 10px 22px; }
}

/* ── the landing page as a stack of panels ───────────────────────────────
   apple.com's idea, in this site's own type and palette: each panel is one
   headline, centred, one line under it, a way in, and the product screen
   itself beneath. Panels alternate white, ink and the soft blue-grey; the
   n-* rules above still dress the tracks, the question list and the close. */
.a-panel, .n-hero { padding: clamp(64px, 8vw, 120px) 0 0; text-align: center; }
.a-panel.is-soft { background: var(--b-soft); }
.a-panel.is-dark { background: var(--b-navy); color: #fff; }
.a-head { max-width: 58em; margin: 0 auto; }
.a-panel .b-kicker { margin-bottom: 16px; }
.a-h { margin: 0 auto; max-width: 14em; font-size: clamp(38px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -0.035em; }
.a-sub, .n-lede.a-sub { margin: 18px auto 0; max-width: 32em; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--b-ink-2); text-wrap: pretty; }
.a-actions { justify-content: center; align-items: center; margin-top: 28px; }
.a-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; margin-top: 22px; }
.a-links .b-link, .a-actions .b-link, .n-doors .n-entry-grid .b-link { text-decoration: none; font-size: 17px; }
.a-links .b-link:hover, .a-actions .b-link:hover { text-decoration: underline; }
.a-media { margin: clamp(40px, 5vw, 64px) auto 0; padding-bottom: clamp(64px, 8vw, 120px); max-width: 1100px; }
.a-media img {
  display: block; width: 100%; height: auto; border-radius: var(--b-r-lg);
  border: 1px solid var(--b-line); box-shadow: 0 30px 70px -32px rgba(10, 22, 40, 0.42);
}
.n-hero-map.a-media .n-hero-cap { text-align: center; }
/* On the ink panel the accent is the pale blue the close already uses:
   the brand blue itself is too dark against the ink to read. */
.is-dark .b-kicker, .is-dark .n-h2 em, .is-dark .b-link { color: #8FB6FF; }
.is-dark .n-h2 { color: #fff; }
.is-dark .a-sub { color: rgba(255, 255, 255, 0.78); }
.is-dark .a-media img { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 30px 70px -32px rgba(0, 0, 0, 0.7); }
.a-tracks { text-align: left; margin-top: clamp(44px, 5vw, 72px); padding-bottom: clamp(64px, 8vw, 120px); }
.a-unit { margin-top: clamp(56px, 7vw, 96px); }
.a-unit h3 { margin: 0 auto; font: 700 clamp(26px, 3vw, 40px)/1.1 var(--b-head); letter-spacing: -0.03em; color: var(--b-ink); text-wrap: balance; }
.a-unit > p { margin: 14px auto 0; max-width: 34em; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; color: var(--b-ink-2); text-wrap: pretty; }
.a-unit .a-media { margin-top: clamp(28px, 3.5vw, 44px); padding-bottom: 0; }
.n-proof.a-panel { padding-bottom: clamp(64px, 8vw, 120px); }
.a-list { max-width: 760px; margin: clamp(36px, 4vw, 56px) auto 0; text-align: left; }
.a-links-end { margin-top: 32px; padding-bottom: clamp(64px, 8vw, 120px); }
/* The four doors carry the entry-point class the suite protects, so the
   n-entry-grid card rules above are overridden here, property by property. */
.n-doors .n-entry-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  margin: 0 auto; padding: 0 0 clamp(64px, 8vw, 120px); list-style: none;
}
.n-doors .n-entry-grid a {
  display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; min-height: 250px;
  padding: 44px 32px 36px; background: var(--b-surface); border: 1px solid var(--b-line); border-radius: var(--b-r-lg);
  text-decoration: none; text-align: center; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.n-doors .n-entry-grid a:hover { border-color: var(--b-blue-text); transform: translateY(-2px); box-shadow: 0 14px 34px -22px rgba(10, 22, 40, 0.45); }
.n-doors .n-entry-grid .n-entry-ico { width: 48px; height: 48px; margin-bottom: 6px; }
.n-doors .n-entry-grid .n-entry-ico .b-ico { width: 22px; height: 22px; }
.n-doors .n-entry-grid b { font: 700 clamp(22px, 2.2vw, 28px)/1.15 var(--b-head); letter-spacing: -0.02em; color: var(--b-ink); }
.n-doors .n-entry-grid span:not(.n-entry-ico):not(.b-link) { max-width: 24em; font-size: 16px; line-height: 1.5; color: var(--b-ink-2); text-wrap: pretty; }
.n-doors .n-entry-grid .b-link { margin-top: auto; padding-top: 10px; }
@media (max-width: 680px) {
  .n-doors .n-entry-grid { grid-template-columns: minmax(0, 1fr); }
  .n-doors .n-entry-grid a { min-height: 0; padding: 32px 24px 28px; }
  .a-links { gap: 6px 22px; }
  .a-actions .b-link { flex: 1 1 100%; justify-content: center; }
}
/* The kinds of work, as a quiet row under the links on the ink panel. */
.a-panel .n-uses { justify-content: center; max-width: 36em; margin: 28px auto 0; }
.is-dark .n-uses li { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
.is-dark .n-uses .b-ico { color: #8FB6FF; }
/* The four things the platform is, as one quiet centred row under the hero
   actions; two by two on a phone. */
.n-hero .n-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 30px auto 0; }
@media (max-width: 680px) { .n-hero .n-trust { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; } }
/* Each panel settles in as it enters the viewport: a short fade and a
   twelve-pixel rise, the way apple.com's units arrive. The hidden state is
   applied only once brand.js has confirmed it can reveal (html.a-anim), so a
   page with no script or with reduced motion shows everything at once. */
html.a-anim .a-reveal { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; }
html.a-anim .a-reveal.is-in { opacity: 1; transform: none; }