/* vaBase sales website (www.vabase.com): the one stylesheet. StylesheetClassTests reads this file,
   so every class the markup uses is defined here and nowhere else.

   Taken over from the approved boards' design/marketing/proposal.css (product/59, gate G1) and
   extended for the built site: the fallback faces, the open menus, the image slots, the beta and
   staging notes, and the platform and secondary pages.

   Structure: tokens > tones > fonts > base > layout > chrome (header, menus, footer) > components >
   sections > pages > responsive. Every colour is a token; a section changes tone with data-tone,
   nothing else. */

/* ------------------------------------------------------------------ tokens */
:root {
  --bg: #0c0d0f;
  --bg-soft: #141519;
  --surface: #17181c;
  --surface-raised: #1d1e23;
  --border: #292a30;
  --border-strong: #3c3e46;
  --text: #eceded;
  --text-secondary: #b4b6bc;
  --text-muted: #979aa1;
  --brand: #5e00ea;
  --brand-hover: #7326ff;
  --brand-soft: rgba(94, 0, 234, 0.16);
  --link: #a883ff;
  --link-hover: #c3aaff;
  --on-brand: #f7f3fd;
  --live: #3ec27d;
  --warn: #d9a13c;
  --horizon: #e8923a;
  --focus: #a883ff;
  --font: "Inter", "Inter Fallback", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "JetBrains Mono Fallback", "Cascadia Mono", Consolas, monospace;
  --container: 1200px;
  --wide: 1360px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow-frame: 0 30px 80px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255, 255, 255, 0.03) inset;
  --space-section: clamp(72px, 9vw, 128px);
  --header: 68px;
  color-scheme: dark;
}
[data-tone="paper"] {
  --bg: #f4f4f6;
  --bg-soft: #ededf0;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --border: #dcdee3;
  --border-strong: #c4c7cf;
  --text: #15161a;
  --text-secondary: #474b55;
  --text-muted: #6b6f7a;
  --link: #4a00c2;
  --link-hover: #5e00ea;
  --brand-soft: rgba(94, 0, 234, 0.08);
  --shadow-frame: 0 24px 60px rgba(20, 20, 40, 0.18);
  color-scheme: light;
}
[data-tone="soft"] { --bg: #141519; --surface: #1b1c21; --surface-raised: #202127; }
[data-tone="night"] { --bg: #07080a; --bg-soft: #0c0d0f; --surface: #121316; --surface-raised: #17181c; --border: #1f2026; }

/* ------------------------------------------------------------------- fonts */
/* Inter and JetBrains Mono are self-hosted and declared by the page head once their files are in
   wwwroot/fonts (SiteFonts). These local faces are sized to the same metrics, so the page keeps its
   line heights whether or not the files have arrived, and swapping in costs no layout shift. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Consolas"), local("Courier New");
  size-adjust: 109%;
  ascent-override: 93.58%;
  descent-override: 27.52%;
  line-gap-override: 0%;
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
main { overflow-x: clip; }
main:focus { outline: none; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.6; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; color: var(--text); text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.2vw, 4.4rem); letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); letter-spacing: -0.03em; }
h3 { font-size: 1.35rem; letter-spacing: -0.015em; }
h4 { font-size: 1.05rem; }
p { margin: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
code, .mono { font-family: var(--mono); font-feature-settings: normal; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; background: var(--brand); color: var(--on-brand); padding: 10px 14px; border-radius: var(--radius-sm); z-index: 100; font-weight: 600; }
.skip:focus { top: 12px; color: var(--on-brand); }

/* ------------------------------------------------------------------ layout */
.container { width: min(var(--container), 100% - 48px); margin-inline: auto; }
.container-wide { width: min(var(--wide), 100% - 48px); margin-inline: auto; }
.section { background: var(--bg); color: var(--text); padding-block: var(--space-section); position: relative; }
.section-tight { padding-block: clamp(48px, 6vw, 80px); }
.section + .section[data-tone="paper"], .section[data-tone="paper"] + .section { border-top: 1px solid var(--border); }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); font-weight: 500; }
.kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.7; }
.kicker-plain::before { display: none; }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--text-secondary); max-width: 58ch; line-height: 1.55; }
.measure { max-width: 62ch; }
.head { display: grid; gap: 18px; max-width: 760px; }
.head-center { margin-inline: auto; text-align: center; justify-items: center; }
.head-spaced { margin-bottom: 48px; }
.actions-spaced { margin-top: 36px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split-reverse > :first-child { order: 2; }
.split-even { grid-template-columns: 1fr 1fr; }
.split-start { align-items: start; }
.stack { display: grid; gap: 16px; }
.stack-lg { display: grid; gap: 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ----------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 10px; font-weight: 600; font-size: 15.5px; letter-spacing: -0.005em; border: 1px solid transparent; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s; white-space: nowrap; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-hover); color: var(--on-brand); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--text-muted); color: var(--text); background: rgba(127, 127, 140, 0.08); }
.btn-ghost { background: transparent; color: var(--link); padding-inline: 6px; min-height: 36px; }
.btn-ghost:hover { color: var(--link-hover); }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 16.5px; border-radius: 12px; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn .arrow { transition: transform 0.15s; }
.btn:hover .arrow { transform: translateX(2px); }
.textlink { font-weight: 600; color: var(--link); display: inline-flex; align-items: center; gap: 6px; }
.textlink:hover { color: var(--link-hover); }
/* A link inside running text is underlined: its colour alone would not mark it (WCAG 1.4.1). */
p a:not([class]), .callout a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.textlink .arrow { transition: transform 0.15s; }
.textlink:hover .arrow { transform: translateX(2px); }

/* ------------------------------------------------------------------ header */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.site-header .container-wide { display: flex; align-items: center; gap: 28px; height: var(--header); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 650; font-size: 19px; letter-spacing: -0.02em; }
.brand:hover { color: var(--text); }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav > a, .nav > button { background: none; border: 0; color: var(--text-secondary); font: inherit; font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.nav > a:hover, .nav > button:hover, .nav > [aria-expanded="true"], .nav > [aria-current="page"] { color: var(--text); background: rgba(127, 127, 140, 0.1); }
.nav .caret { width: 12px; height: 12px; opacity: 0.7; transition: transform 0.15s; }
.nav [aria-expanded="true"] .caret { transform: rotate(180deg); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.header-actions .signin { color: var(--text-secondary); font-weight: 500; font-size: 15px; padding: 8px 12px; }
.header-actions .signin:hover { color: var(--text); }
.menu-toggle { display: none; background: none; border: 1px solid var(--border-strong); color: var(--text); width: 44px; height: 44px; border-radius: 10px; align-items: center; justify-content: center; cursor: pointer; }
.menu-toggle .icon-close, .menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* mega menu */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); }
.mega-inner { width: min(var(--wide), 100% - 48px); margin-inline: auto; display: grid; grid-template-columns: 220px 1fr 1fr 260px; gap: 36px; padding: 28px 0 30px; }
.mega-col h2 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-family: var(--mono); font-weight: 500; margin-bottom: 14px; }
.mega-intro p { color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.mega-intro .textlink { margin-top: 14px; font-size: 15px; }
.mega-item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 10px 10px; margin: 0 -10px; border-radius: 10px; color: var(--text); align-items: start; }
.mega-item:hover { background: rgba(127, 127, 140, 0.1); color: var(--text); }
.mega-item .ico { width: 36px; height: 36px; border-radius: 9px; background: var(--brand-soft); color: var(--link); display: grid; place-items: center; }
.mega-item .ico svg { width: 18px; height: 18px; }
.mega-item strong { display: block; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.mega-item span { display: block; color: var(--text-muted); font-size: 13.5px; line-height: 1.4; margin-top: 2px; }
.mega-aside { border-left: 1px solid var(--border); padding-left: 28px; display: grid; gap: 14px; align-content: start; }
.mega-aside .mini-frame { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16 / 10; background: var(--bg); }
.mega-aside .mini-frame picture { height: 100%; }
.mega-aside .mini-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.mega-aside p { font-size: 14px; color: var(--text-secondary); }

/* mobile menu: a full sheet under the header */
.mobile-menu { position: fixed; z-index: 49; top: var(--header); left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); }
.mobile-menu .sheet { padding: 8px 16px 32px; display: grid; gap: 4px; }
.mobile-menu .sheet-group { padding: 10px 0 4px; }
.mobile-menu .sheet-group h2 { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-family: var(--mono); font-weight: 500; padding: 10px 12px 6px; }
.mobile-menu .sheet a.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 13px 12px; border-radius: 10px; color: var(--text); font-weight: 500; font-size: 16px; }
.mobile-menu .sheet a.row span { color: var(--text-muted); font-size: 13px; font-weight: 400; text-align: right; }
.mobile-menu .sheet a.row:hover { background: rgba(127, 127, 140, 0.1); }
.mobile-menu .sheet .divider { height: 1px; background: var(--border); margin: 8px 12px; }
.mobile-menu .sheet-actions { display: grid; gap: 10px; padding: 12px 12px 0; }
.mobile-menu .sheet-actions .btn { width: 100%; }
.menu-open { overflow: hidden; }

/* the closed-beta line and the staging note */
.beta-banner { background: var(--surface); border-bottom: 1px solid var(--border); color: var(--text-secondary); font-size: 14px; }
.beta-banner p { padding: 9px 0; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; text-align: center; }
.beta-banner a { font-weight: 600; }
.staging-ribbon { position: fixed; left: 12px; bottom: 12px; z-index: 60; background: var(--warn); color: #15161a; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; pointer-events: none; }

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--bg); border-top: 1px solid var(--border); padding: 64px 0 36px; color: var(--text-secondary); font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 36px; }
.footer-brand { display: grid; gap: 14px; align-content: start; max-width: 280px; }
.footer-brand p { color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.footer-col h2 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-family: var(--mono); font-weight: 500; margin-bottom: 14px; }
/* 44 px tall, so each link is a comfortable tap. Block, not flex: the external links' arrow keeps its space. */
.footer-col a { display: block; color: var(--text-secondary); padding: 10px 0; line-height: 24px; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; color: var(--text-muted); font-size: 13.5px; }
.footer-bottom .apps { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-bottom .apps a { color: var(--text-muted); }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom .apps a:hover { color: var(--text); }
.ext::after { content: " ↗"; font-size: 0.85em; opacity: 0.7; }

/* ---------------------------------------------------------------- frames */
.frame { position: relative; border-radius: var(--radius); overflow: hidden; background: #0c0d0f; border: 1px solid var(--border-strong); box-shadow: var(--shadow-frame); }
.frame img, .frame-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.frame-browser .bar { height: 36px; background: #15161a; border-bottom: 1px solid #26272d; display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.frame-browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: #2c2d34; display: block; }
.frame-browser .bar .url { margin-left: 10px; height: 20px; flex: 0 1 320px; border-radius: 6px; background: #1e1f25; color: #8a8d95; font-family: var(--mono); font-size: 11px; padding: 0 10px; white-space: nowrap; overflow: hidden; min-width: 0; text-overflow: ellipsis; display: block; line-height: 20px; }
.frame-window .titlebar { height: 34px; background: #101114; border-bottom: 1px solid #1f2026; display: flex; align-items: center; padding: 0 12px; gap: 8px; color: #979aa1; font-size: 12px; }
.frame-window .titlebar .mark { width: 16px; height: 16px; border-radius: 4px; }
.frame-window .titlebar .dim { color: #80838b; margin-left: 0.3em; }
.frame-window .titlebar .win { margin-left: auto; display: flex; gap: 14px; opacity: 0.6; font-size: 12px; }
.frame-phone { border-radius: 34px; border: 8px solid #1c1d22; box-shadow: var(--shadow-frame); background: #0c0d0f; overflow: hidden; }
.frame-phone .notch { height: 26px; display: grid; place-items: center; }
.frame-phone .notch i { width: 76px; height: 6px; border-radius: 3px; background: #26272d; display: block; }
.frame-body { position: relative; overflow: hidden; }
.frame-fill { display: flex; flex-direction: column; }
.frame-fill > .frame-body { flex: 1 1 auto; min-height: 0; }
.frame-body > img, .frame-body > picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.placeholder-slot { position: relative; display: block; width: 100%; }
.frame-body > .placeholder-slot { position: absolute; inset: 0; }
.placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(135deg, #121316 0 14px, #141519 14px 28px); color: #979aa1; text-align: center; padding: 20px; }
.placeholder span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px dashed #3c3e46; padding: 8px 12px; border-radius: 8px; background: rgba(12, 13, 15, 0.7); }
[data-tone="paper"] .frame { border-color: #d3d5db; }

/* A framed screenshot is a link to its full image (it works with scripts off) that the viewer
   below takes over. The hint appears on hover and focus, and stays visible on touch screens. */
.frame-body > .frame-zoom, .frame-body > .shot { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame-zoom { display: block; overflow: hidden; cursor: zoom-in; color: inherit; }
.frame-zoom > picture { width: 100%; height: 100%; }
.frame-zoom img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.frame-zoom:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; border-radius: 0; }
.zoom-hint { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(12, 13, 15, 0.86); border: 1px solid #3c3e46; color: #eceded; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.frame-zoom:hover .zoom-hint, .frame-zoom:focus-visible .zoom-hint { opacity: 1; }
@media (hover: none) { .zoom-hint { opacity: 0.92; } }
.frame-phone .frame-zoom img { object-position: top center; }
.frame-phone .zoom-hint { right: 8px; bottom: 8px; width: 28px; height: 28px; }

/* ---------------------------------------------------------------- the viewer
   It opens at a readable width and never shrinks a screen to fit the height: a long page scrolls.
   The visitor can zoom to the screen's real size and beyond, and pan. Night colours whatever the
   section's tone, as the frames are. */
.lightbox { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #07080a; color: #eceded; }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox::backdrop { background: #07080a; }
.lightbox-bar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid #292a30; background: #0c0d0f; }
.lightbox-caption { flex: 1 1 auto; min-width: 0; font-size: 14.5px; color: #b4b6bc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.lightbox-tools button, .lightbox-close { min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid #3c3e46; background: transparent; color: #eceded; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.lightbox-tools button:hover, .lightbox-close:hover { background: rgba(127, 127, 140, 0.14); }
.lightbox-tools button[aria-pressed="true"] { border-color: #eceded; }
.lightbox-level { font-family: var(--mono); font-size: 13px; color: #979aa1; min-width: 52px; text-align: center; }
.lightbox-bar form { margin: 0; flex: none; }
.lightbox-scroll { overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; padding: 24px; display: grid; justify-content: safe center; align-content: start; cursor: grab; }
.lightbox-scroll.is-panning { cursor: grabbing; user-select: none; }
.lightbox-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.lightbox-scroll img { display: block; max-width: none; height: auto; border-radius: 10px; border: 1px solid #292a30; background: #0c0d0f; }
.lightbox-help { margin: 0; padding: 8px 16px; border-top: 1px solid #292a30; font-size: 12.5px; color: #979aa1; text-align: center; background: #0c0d0f; }
.help-narrow { display: none; }
html:has(.lightbox[open]) { overflow: hidden; }

/* ---------------------------------------------------------------- hero */
.hero { padding-top: clamp(56px, 7vw, 96px); padding-bottom: 0; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-bg svg { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 1800px; height: 100%; opacity: 0.5; }
.hero-copy { position: relative; display: grid; gap: 22px; justify-items: center; text-align: center; max-width: 880px; margin-inline: auto; }
.hero-copy .lede { max-width: 640px; text-align: center; }
.hero-copy .actions { justify-content: center; margin-top: 6px; }
.hero-note { font-size: 14px; color: var(--text-muted); }
.hero-stage { position: relative; margin-top: clamp(44px, 6vw, 80px); height: clamp(360px, 46vw, 640px); }
.hero-stage .frame-admin { position: absolute; left: 6%; right: 6%; top: 0; height: 120%; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.hero-stage .frame-acars { position: absolute; right: 0; bottom: 6%; width: 36%; aspect-ratio: 16 / 10.5; z-index: 2; }
.hero-stage .frame-phone { position: absolute; left: 0; bottom: -4%; width: 15%; aspect-ratio: 9 / 18.6; z-index: 2; }
.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(to bottom, transparent, var(--bg)); z-index: 3; pointer-events: none; }

/* ------------------------------------------------------------- stat strip */
.strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg); }
.strip .container-wide { list-style: none; margin-block: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding: 18px 0; }
.strip li { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); display: inline-flex; align-items: center; gap: 10px; }
.strip li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--link); opacity: 0.8; }

/* ------------------------------------------------------------- chapters */
.chapter-no { font-family: var(--mono); font-size: 13px; color: var(--text-muted); letter-spacing: 0.1em; }
.chapter h2 { margin-top: 8px; }
.chapter .lede { margin-top: 14px; font-size: 1.12rem; }
.feature-list { display: grid; gap: 10px; margin-top: 22px; }
.feature-list li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; color: var(--text-secondary); font-size: 15.5px; line-height: 1.5; }
.feature-list li::before { content: ""; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; background: var(--brand-soft); box-shadow: inset 0 0 0 1px rgba(168, 131, 255, 0.4); }
.feature-list strong { color: var(--text); font-weight: 600; }
.chapter .actions { margin-top: 26px; }
.frame-stack { position: relative; }
.frame-stack .frame-over { position: absolute; width: 46%; right: -4%; bottom: -10%; z-index: 2; }
.frame-stack .frame-over-left { right: auto; left: -4%; }
.media-bleed { margin-right: calc((100vw - var(--container)) / -2); }
.media-bleed-left { margin-left: calc((100vw - var(--container)) / -2); }

/* map band */
.map-band { padding: 0; overflow: hidden; min-height: 640px; display: grid; }
.map-band .map-bg { position: absolute; inset: 0; }
.map-band .map-bg picture { height: 100%; }
.map-band .map-media { position: relative; }
.map-band .map-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 82% 50%; filter: brightness(1.9) contrast(1.05); transform: scale(1.15); transform-origin: 82% 50%; }
/* The map is decoration. Under the copy column it is almost fully shaded, so its aircraft and
   labels never sit on the words; on a narrow screen, where the copy spans the band, it is shaded
   evenly. */
.map-band .map-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 8, 10, 0.97) 0%, rgba(7, 8, 10, 0.94) 36%, rgba(7, 8, 10, 0.5) 52%, rgba(7, 8, 10, 0.1) 70%, rgba(7, 8, 10, 0.35) 100%), linear-gradient(180deg, rgba(7, 8, 10, 0.5), transparent 25%, transparent 75%, rgba(7, 8, 10, 0.6)); }
.map-band .lede { font-size: 1.12rem; }
.map-band .container { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding-block: var(--space-section); }
.map-band .frame-acars { width: 92%; margin-left: auto; }
.map-band .debrief { position: absolute; left: -6%; bottom: -8%; width: 54%; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-frame); display: grid; gap: 10px; }
/* The landing card over the map band's ACARS frame is the real card from ACARS, not a drawing. */
.map-band .debrief.debrief-shot { padding: 0; overflow: hidden; display: block; width: 58%; }
.debrief-shot .frame-zoom { position: relative; }
.debrief-shot img { width: 100%; height: auto; object-fit: contain; }

/* the homepage's three fleet modes: plain cards under the Run it your way chapter */
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(40px, 5vw, 64px); }
.mode { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px 22px; display: grid; gap: 8px; align-content: start; }
.mode-tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--link); }
.mode h3 { font-size: 1.2rem; }
.mode p { color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.modes-note { margin-top: 18px; color: var(--text-muted); font-size: 14.5px; max-width: 86ch; }

/* four-up */
.four-up { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.four-up .tile { display: grid; gap: 12px; align-content: start; }
.four-up .tile .frame { aspect-ratio: 16 / 10; }
.four-up .tile h3 { font-size: 15px; }
.four-up .tile p { color: var(--text-muted); font-size: 14px; line-height: 1.45; }
.zoom-content { transform: scale(1.45); transform-origin: 100% 12%; }

/* big figures */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.figure strong { display: block; font-size: clamp(2.4rem, 4vw, 3.6rem); letter-spacing: -0.04em; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.figure span { display: block; color: var(--text-muted); margin-top: 8px; font-size: 14.5px; }
.figure strong .unit { display: inline; font-size: 0.45em; margin: 0 0 0 4px; color: var(--text-muted); letter-spacing: 0; }
.figures-two { grid-template-columns: 1fr 1fr; margin-top: 28px; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: step; }
.step { display: grid; gap: 12px; align-content: start; }
.step .n { font-family: var(--mono); font-size: 13px; color: var(--link); letter-spacing: 0.1em; }
.step h3 { font-size: 17px; }
.step p { color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.step .frame { aspect-ratio: 16 / 10; margin-bottom: 6px; box-shadow: none; }
/* Two across on the homepage, so each screenshot is about twice the width it was. */
.steps-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; }
.steps-two .step h3 { font-size: 19px; }

/* pricing */
.price-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 30px 28px; display: grid; gap: 18px; align-content: start; position: relative; }
.price-card.featured { border: 2px solid var(--brand); }
.price-card .tag { position: absolute; top: -13px; left: 28px; background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; }
.price-card h3 { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; }
.price { display: flex; align-items: baseline; gap: 8px; }
.price strong { font-size: 3.2rem; letter-spacing: -0.04em; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.price span { color: var(--text-muted); font-size: 15px; }
.price-card .note { color: var(--text-muted); font-size: 14px; }
.price-card .btn { justify-self: start; }
.pricing-teaser { align-items: center; gap: 48px; }
.includes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 28px; }
.includes li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--text-secondary); font-size: 15px; line-height: 1.45; }
.includes li::before { content: "✓"; color: var(--link); font-weight: 700; }
.addon { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 22px 26px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.addon strong { font-size: 1.05rem; }
.addon p { color: var(--text-secondary); font-size: 15px; margin-top: 4px; }
table.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
table.compare th, table.compare td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.compare th { font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
table.compare td:first-child { color: var(--text); font-weight: 500; }
table.compare td { color: var(--text-secondary); }

/* faq */
.faq { display: grid; gap: 0; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-muted); font-size: 22px; font-weight: 300; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--text-secondary); padding: 0 0 20px; max-width: 70ch; font-size: 15.5px; }

/* cta band */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.cta-band .lede { margin: 16px auto 0; text-align: center; }
.cta-band .kicker { justify-content: center; }
.cta-band .kicker + h2 { margin-top: 14px; }
.cta-band .actions { justify-content: center; margin-top: 28px; }

/* the 404 and error pages */
.status-page { min-height: 56vh; }

/* related pages */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related a { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); background: var(--surface); }
.related a:hover { border-color: var(--border-strong); }
.related a strong { font-weight: 600; }
.related a span { color: var(--text-muted); font-size: 14px; }

/* misc components */
.pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--text-secondary); }
.pill-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(62, 194, 125, 0.18); }
.codeblock { background: #0c0d0f; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 18px 20px; font-family: var(--mono); font-size: 13.5px; line-height: 1.65; color: #b4b6bc; overflow: auto; }
.codeblock .c { color: #80838b; } .codeblock .k { color: #a883ff; } .codeblock .v { color: #e8923a; } .codeblock .s { color: #3ec27d; }
[data-tone="paper"] .codeblock { color: #c9cbd1; }
.route { font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.06em; color: var(--text-muted); }
.route b { color: var(--text); font-weight: 500; }
.callout { max-width: 820px; border-left: 2px solid var(--brand); padding: 4px 0 4px 18px; color: var(--text-secondary); font-size: 15.5px; }
.callout strong { color: var(--text); }
.requirements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.requirements div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.requirements h3 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--mono); color: var(--text-muted); font-weight: 500; margin-bottom: 8px; }
.requirements p { color: var(--text-secondary); font-size: 15px; }

/* phase timeline (ACARS) */
.timeline { position: relative; padding-top: 10px; }
.timeline .track { height: 2px; background: var(--border-strong); position: relative; border-radius: 2px; }
.timeline .track i { position: absolute; left: 0; top: 0; height: 2px; width: 58%; background: var(--brand); border-radius: 2px; }
.timeline .track b { position: absolute; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border-strong); margin-left: -6px; }
.timeline .track b.done { border-color: var(--brand); background: var(--brand); }
.timeline .track b.now { border-color: var(--live); background: var(--live); box-shadow: 0 0 0 5px rgba(62, 194, 125, 0.18); }
.timeline .labels { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 18px; }
.timeline .labels div { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.timeline .labels div span { display: block; font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--text-secondary); margin-top: 6px; line-height: 1.4; }
.timeline .labels div.now { color: var(--live); }

/* accent switcher (website page) */
.switcher { display: grid; gap: 18px; }
.switcher .options { display: flex; gap: 10px; flex-wrap: wrap; }
.switcher .opt { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 14px 7px 8px; font-size: 14px; font-weight: 500; color: var(--text-secondary); background: var(--surface); cursor: pointer; }
.switcher .opt i { width: 20px; height: 20px; border-radius: 50%; display: block; }
.switcher .opt[aria-pressed="true"] { border-color: var(--text); color: var(--text); }
.switcher .frame { aspect-ratio: 16 / 10; }
.code-beside { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 22px; align-items: stretch; }
.code-beside .frame { height: 100%; }

/* photo band */
.photo-band { position: relative; min-height: 520px; display: grid; align-items: end; padding: 0; overflow: hidden; }
.photo-band img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
/* Shaded on the side the copy sits on, so the words keep their contrast over a bright sky. */
.photo-band .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 8, 10, 0.78) 0%, rgba(7, 8, 10, 0.5) 38%, rgba(7, 8, 10, 0) 68%), linear-gradient(to top, rgba(7, 8, 10, 0.98) 0%, rgba(7, 8, 10, 0.55) 45%, rgba(7, 8, 10, 0.15) 100%); }
.photo-band .container { position: relative; padding: 80px 0 56px; }
.photo-band .credit { position: absolute; left: 24px; bottom: 10px; font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.06em; }

/* parity split (dispatch) */
.parity { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.parity .label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }

/* --------------------------------------------------------------- platform pages */
/* The heroes: a centred copy over a frame that runs into the next band, or copy beside the media. */
.hero-platform .hero-copy { max-width: 840px; }
.hero-platform h1 { font-size: clamp(2.6rem, 4.8vw, 4rem); }
.hero-wide .hero-copy .lede { max-width: 58ch; }
.hero-split { padding-bottom: var(--space-section); }
.hero-split .hero-copy { text-align: left; justify-items: start; margin-inline: 0; }
.hero-split .hero-copy .lede { text-align: left; }
.hero-split .hero-copy .actions { justify-content: flex-start; }
.hero-frame { margin-top: 56px; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.hero-figures { margin: 52px auto 0; max-width: 920px; text-align: center; }
.figures-note { margin-top: 14px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
.split-end { align-items: end; }
.head-tight { margin-bottom: 32px; }
.head-spaced-sm { margin-bottom: 36px; }
.chapter .kicker + h2, .map-band .kicker + h2 { margin-top: 12px; }

/* administration: the permission areas */
.area-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.area-pill { justify-content: center; padding: 12px; text-align: center; }

/* website: the accent trio, chosen with radio buttons and CSS alone */
.switcher { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.switcher .opt:has(input:checked) { border-color: var(--text); color: var(--text); }
.switcher .opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.swatch-dark { background: #5e00ea; }
.swatch-bright { background: #f5a623; }
.swatch-light { background: #0f6e56; }
.accent-frames { gap: 14px; align-self: start; }
.accent-frames .frame { transition: outline-color 0.15s; outline: 2px solid transparent; outline-offset: 4px; }
.accent-trio:has(input[value="dark"]:checked) .accent-frames .accent-dark,
.accent-trio:has(input[value="bright"]:checked) .accent-frames .accent-bright,
.accent-trio:has(input[value="light"]:checked) .accent-frames .accent-light { outline-color: var(--brand); }
.code-beside .frame.code-frame { height: auto; min-height: 360px; }
.three-ways { margin-top: 40px; }
.three-ways .stack, .ships .stack { gap: 8px; }
.three-ways p, .ships p { color: var(--text-secondary); font-size: 15px; }
.ships .stack { gap: 10px; align-content: start; }
.ships h3 { font-size: 1.05rem; }
.hosting-card { gap: 12px; }
.hosting-card h3 { color: var(--text); font-weight: 600; }
.hosting-card p:not(.note) { color: var(--text-secondary); }
.callout-spaced { margin-top: 28px; max-width: 760px; }

/* acars: the photograph, the window over it and the timeline */
.photo-band .photo-slot { position: absolute; inset: 0; }
.photo-band .photo-slot picture, .photo-band .photo-slot .placeholder-slot { height: 100%; }
.photo-band .photo-slot .placeholder span { margin-top: -30vh; }
.photo-window { transform: translateY(40px); }
/* One frame, three moments in flight, chosen with radio buttons as the Website page's accent trio is: no script. */
.switcher .opt-plain { padding: 9px 16px; min-height: 44px; }
.shot-switch .switcher { margin: 22px 0 0; }
.shot-switch .frame-body > .shot { display: none; }
.shot-switch:has(input[value="climb"]:checked) .shot-climb,
.shot-switch:has(input[value="cruise"]:checked) .shot-cruise,
.shot-switch:has(input[value="landed"]:checked) .shot-landed { display: block; }
.shot > .frame-zoom { position: absolute; inset: 0; }
.after-photo { padding-top: 120px; }
.timeline .labels { list-style: none; margin: 18px 0 0; padding: 0; }
.timeline .labels li { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.timeline .labels li span { display: block; font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--text-secondary); margin-top: 6px; line-height: 1.4; }
.timeline .labels li.now { color: var(--live); }

/* pilots: a phone beside the browser */
.device-pair { position: relative; padding-bottom: 6%; }
.device-pair .frame-phone { position: absolute; right: -2%; bottom: 0; width: 26%; z-index: 2; }

/* engagement, dispatch, statistics */
.four-up-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.two-chapters { gap: clamp(32px, 5vw, 80px); align-items: start; }
.two-chapters h2 { margin-top: 8px; }
.scoring-explainer { align-items: center; gap: 48px; }
.parity .label { margin: 0 0 10px; }

/* integrations: the payload, what a delivery carries, the commands and the scopes */
.code-beside-wide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.code-beside-wide .codeblock { margin: 0; }
.delivery-card, .scope-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; display: grid; gap: 16px; align-content: start; }
.delivery-card h3, .scope-card h3 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--mono); color: var(--text-muted); font-weight: 500; }
.header-list { display: grid; gap: 6px; }
.header-list code { font-size: 13.5px; color: var(--link); }
.command-list { display: grid; gap: 8px; }
.command-list li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; }
.command-list code { color: var(--link); font-size: 14px; }
.command-list span { color: var(--text-secondary); font-size: 14.5px; }
.scope-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* --------------------------------------------------------------- secondary pages */
/* A page's opening band: the kicker, the h1 and the lede, left-aligned, with less room than a hero. */
.page-head { padding-bottom: clamp(32px, 4vw, 56px); }
.page-head h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
.head-small { margin-bottom: 28px; }
.head-small h2 { font-size: 1.9rem; }
.head-small .lede { font-size: 1.05rem; }
.narrow { max-width: 820px; }

/* pricing */
.pricing-head { padding-bottom: 40px; }
.pricing-head .head { max-width: 820px; }
.pricing-head .callout { text-align: left; margin-top: 8px; }
.pricing-cards { padding-top: 0; }
.pricing-cards .price-cards { max-width: 860px; margin-inline: auto; }
.price-card .price-name { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; letter-spacing: -0.015em; }
.price-small { text-align: center; color: var(--text-muted); font-size: 14px; margin-top: 18px; }
.billing-grid { gap: 56px; align-items: start; }

/* faq */
.faq-link { margin-left: 0.35em; font-weight: 600; }
.faq-groups { display: grid; gap: 56px; max-width: 820px; }
.faq-group h2, .faq-title { font-size: 1.5rem; margin-bottom: 18px; }
.faq-page { padding-top: 0; }

/* getting started, switching */
.steps-six { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
.includes-one { grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
.switch-grid { gap: clamp(32px, 5vw, 72px); align-items: start; }
.switch-grid h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }

/* about */
.prose { max-width: 66ch; display: grid; gap: 20px; }
.prose p { color: var(--text-secondary); font-size: 1.12rem; line-height: 1.65; }
.photo-caption { position: relative; }
.about-facts h2, .covers h3 { font-size: 1.1rem; }
.about-facts p, .covers p { color: var(--text-secondary); font-size: 15px; }
.about-facts .stack, .covers .stack { gap: 8px; }

/* support */
.contact-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.contact-ways-one { grid-template-columns: minmax(0, 620px); }
.contact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 30px; display: grid; gap: 14px; align-content: start; }
.contact-card h2 { font-size: 1.5rem; overflow-wrap: anywhere; }
.contact-card p { color: var(--text-secondary); font-size: 15.5px; }
.contact-card .btn { justify-self: start; }
.covers { row-gap: 36px; }

/* ------------------------------------------------------------ cookie consent
   A bar at the foot of the page, not a wall across it: the site stays readable while the choice is
   open. Accept and Reject are the same size and side by side, because refusing must be as easy as
   agreeing, and there is no close button, since closing one would have to mean something. The bar
   keeps the page's own dark tokens wherever it sits, over a paper-toned band included. */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: color-mix(in srgb, #141519 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid #3c3e46; box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.35); color: #eceded; }
.consent[hidden] { display: none; }
.consent-inner { display: flex; align-items: center; gap: 32px; padding: 18px 0; }
.consent-copy { display: grid; gap: 5px; }
.consent-copy strong { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.consent-copy p { color: #b4b6bc; font-size: 14.5px; line-height: 1.5; max-width: 84ch; }
.consent-copy a { color: #a883ff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.consent-actions { margin-left: auto; flex: none; display: flex; gap: 10px; }
.consent-actions .btn { min-width: 132px; }
.consent-actions .btn-secondary { color: #eceded; border-color: #3c3e46; }
@media (max-width: 860px) {
  .consent-inner { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px 0; }
  .consent-actions { margin-left: 0; }
  .consent-actions .btn { flex: 1 1 0; min-width: 0; }
}

/* the footer's way back to the choice, in the Company column with the links */
.consent-reopen { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 0; font: inherit; font-size: 14.5px; line-height: 24px; color: var(--text-secondary); cursor: pointer; }
.consent-reopen:hover { color: var(--text); }

/* the Classic interstitial */
.interstitial { min-height: 52vh; }
.interstitial .hero-note { margin-top: 8px; }

/* the legal pages: the published Privacy Policy and Terms of Service. One column of plain prose at
   a comfortable line length, in the site's own type. A long document, so the headings carry the
   structure and a wide table scrolls inside its own region rather than stretching the page. */
.legal-updated { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--text-muted); }
/* One section holds the head and the document, so the opening sentence keeps the list or
   paragraph that follows it; the page's own foot is the section's. */
.legal { padding-bottom: var(--space-section); }
.legal-body { max-width: 76ch; margin-top: clamp(20px, 2.4vw, 28px); }
.legal-body h2 { font-size: 1.5rem; margin-top: 56px; }
.legal-body h3 { font-size: 1.08rem; margin-top: 34px; }
.legal-body p { color: var(--text-secondary); font-size: 16.5px; line-height: 1.7; margin-top: 14px; }
.legal-body ul, .legal-body ol { margin-top: 14px; padding-left: 22px; display: grid; gap: 10px; }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li { color: var(--text-secondary); font-size: 16.5px; line-height: 1.7; }
.legal-body li::marker { color: var(--text-muted); }
.legal-body li ul, .legal-body li p { margin-top: 10px; }
.legal-body strong { color: var(--text); font-weight: 600; }
.legal-body code { font-size: 0.92em; color: var(--text); overflow-wrap: anywhere; }
.legal-table { margin-top: 20px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.legal-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.legal-table th, .legal-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.55; color: var(--text-secondary); }
.legal-table th { background: var(--surface); color: var(--text-muted); font-weight: 600; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.legal-table td:first-child { color: var(--text); }
.legal-table code { overflow-wrap: normal; }
.legal-table tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------- the feature directory
   The search stays in reach while the list scrolls. Each area is a details element: open on a
   wide screen, folded to its heading on a phone (the script folds them; with scripts off they
   all stay open), so a phone shows thirteen headings rather than a hundred and fifty cards. */
.feature-head { padding-bottom: 0; }
.feature-body { padding-top: 28px; }
.feature-tools { position: sticky; top: var(--header); z-index: 20; padding: 14px 0 12px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; border-bottom: 1px solid var(--border); }
.feature-search { position: relative; display: flex; align-items: center; flex: 1 1 420px; max-width: 720px; }
.feature-search svg { position: absolute; left: 16px; color: var(--text-muted); pointer-events: none; }
.feature-search input { width: 100%; min-height: 54px; padding: 0 52px 0 46px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 16.5px; }
.feature-search input::placeholder { color: var(--text-muted); }
.feature-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: transparent; }
.feature-key { position: absolute; right: 14px; font-family: var(--mono); font-size: 12px; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: 6px; padding: 2px 7px; }
.feature-count { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; color: var(--text-muted); }
.feature-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 44px; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-secondary); font-size: 14px; font-weight: 500; background: transparent; }
.chip:hover { color: var(--text); border-color: var(--text-muted); }
.chip[aria-current="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
#features-list { min-height: 70vh; display: grid; gap: 52px; align-content: start; scroll-margin-top: calc(var(--header) + 100px); }
.feature-cat { scroll-margin-top: calc(var(--header) + 100px); }
.feature-cat-head { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: 4px 12px; margin-bottom: 20px; border-radius: 8px; }
.feature-cat-head::-webkit-details-marker { display: none; }
.feature-cat-head h2 { font-size: 1.6rem; }
.feature-cat-count { font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 1px 9px; }
.feature-cat-head p { grid-column: 1 / -1; color: var(--text-muted); font-size: 15px; }
.feature-cat-head::after { content: "+"; grid-column: 4; grid-row: 1; color: var(--text-muted); font-size: 22px; font-weight: 300; line-height: 1; }
.feature-cat[open] > .feature-cat-head::after { content: "−"; }
.feature-cat:not([open]) > .feature-cat-head { margin-bottom: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: grid; gap: 7px; align-content: start; }
.feature-surface { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.feature h3 { font-size: 16px; letter-spacing: -0.01em; }
.feature p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.5; }
.feature-link { font-size: 13.5px; font-weight: 600; margin-top: 3px; justify-self: start; }
.feature-link::after { content: " →"; }
.feature-empty { text-align: center; padding: 56px 0 24px; display: grid; gap: 12px; justify-items: center; }
.feature-empty h2 { font-size: 1.6rem; }
.feature-empty p { color: var(--text-secondary); max-width: 46ch; }
.feature-empty .actions { justify-content: center; margin-top: 8px; }
.feature[hidden], .feature-cat[hidden], .feature-empty[hidden] { display: none; }
@media (max-width: 1100px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  /* On a narrow screen the areas scroll sideways in one row. */
  .feature-chips { flex-wrap: nowrap; overflow-x: auto; margin: 16px -16px 28px; padding-inline: 16px; scrollbar-width: none; }
  .feature-chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; min-height: 40px; }
}
@media (max-width: 560px) {
  .feature-grid { grid-template-columns: 1fr; gap: 10px; }
  .feature-key { display: none; }
  .feature-search input { padding-right: 16px; font-size: 16px; min-height: 50px; }
  #features-list { gap: 0; }
  .feature-cat { border-top: 1px solid var(--border); }
  .feature-cat:last-of-type { border-bottom: 1px solid var(--border); }
  .feature-cat-head { padding: 18px 0; margin-bottom: 0; min-height: 44px; }
  .feature-cat-head h2 { font-size: 1.15rem; }
  .feature-cat-head p { font-size: 14px; }
  .feature-cat[open] > .feature-grid { padding-bottom: 22px; }
  .feature { padding: 15px 16px; }
}

/* ---------------------------------------------------------------- spacing
/* The spacing between a section's parts. A heading that follows a kicker or a chapter number, a
   lede that follows a heading and an actions row that follows copy always get a gap, wherever they
   sit, so a band that is not a chapter (the map band) cannot set its heading on its paragraph. The
   rules weigh no more than a single class, so every rule written for a particular section still
   wins; the containers that already space their children with a grid gap opt out. They come after
   every section rule, so an opt-out holds against a section rule of the same weight (.two-chapters h2). */
:is(h1, h2, h3):where(.chapter-no + *, .kicker + *) { margin-top: 8px; }
.lede:where(h1 + *, h2 + *, h3 + *) { margin-top: 14px; }
.actions:where(.lede + *, .feature-list + *, .figures + *) { margin-top: 26px; }
:is(.head, .stack, .stack-lg, .hero-copy) > :is(h1, h2, h3), :is(.head, .stack, .stack-lg, .hero-copy) > .lede { margin-top: 0; }
:is(.head, .stack, .stack-lg) > .actions { margin-top: 0; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .area-grid, .four-up-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
  .mega-inner { grid-template-columns: 1fr 1fr 1fr; }
  .mega-intro { display: none; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 901px) {
  /* The sheet belongs to the narrow header; a window widened with it open shows the full nav. */
  .mobile-menu { display: none; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .mega { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-actions .signin { display: none; }
  .split, .split-even, .map-band .container, .code-beside, .parity { grid-template-columns: minmax(0, 1fr); }
  .split-reverse > :first-child { order: 0; }
  .media-bleed, .media-bleed-left { margin: 0; }
  .grid-3, .figures, .related, .requirements, .includes { grid-template-columns: 1fr 1fr; }
  .price-cards { grid-template-columns: 1fr; }
  .hero-stage { height: auto; display: grid; gap: 18px; grid-template-columns: 1fr; }
  .hero-stage .frame-admin, .hero-stage .frame-acars, .hero-stage .frame-phone { position: static; width: 100%; height: auto; }
  .hero-stage .frame-admin { aspect-ratio: 16 / 9; border-radius: var(--radius); border-bottom: 1px solid var(--border-strong); }
  .hero-stage .frame-phone { display: none; }
  .hero-fade { display: none; }
  .frame-stack .frame-over { position: static; width: 100%; margin-top: 14px; }
  .map-band .debrief { position: static; width: 100%; margin-top: 14px; }
  .map-band .map-shade { background: rgba(7, 8, 10, 0.9); }
  .photo-band .credit { position: static; display: block; text-align: right; padding: 10px 0 0; }
  .photo-band .frame { transform: none !important; }
  .map-band .frame-acars { width: 100%; }
  .modes { grid-template-columns: minmax(0, 1fr); }
  .timeline .labels { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .hero-split { padding-bottom: var(--space-section); }
  .photo-window { transform: none; margin-top: 28px; }
  .after-photo { padding-top: var(--space-section); }
  .device-pair { padding-bottom: 0; }
  .device-pair .frame-phone { position: static; width: 52%; margin: 14px auto 0; }
  .code-beside-wide { grid-template-columns: minmax(0, 1fr); }
  .contact-ways { grid-template-columns: minmax(0, 1fr); }
  .command-list li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .container, .container-wide { width: calc(100% - 32px); }
  .mega-inner { width: calc(100% - 32px); }
  h1 { font-size: 2.35rem; }
  h2 { font-size: 1.75rem; }
  .site-header .container-wide { gap: 12px; }
  .hero-copy { text-align: left; justify-items: start; }
  .hero-copy .lede, .cta-band .lede { text-align: left; }
  .hero-copy .actions, .cta-band .actions { justify-content: flex-start; }
  .actions .btn { width: 100%; }
  .btn-sm { min-height: 44px; }
  .grid-2, .grid-3, .four-up, .figures, .related, .requirements, .includes, .steps, .footer-grid { grid-template-columns: 1fr; }
  .area-grid, .four-up-wide, .accent-frames { grid-template-columns: 1fr; }
  .steps-six, .steps-two { grid-template-columns: 1fr; }
  .hero-figures { text-align: left; }
  .figures-note { text-align: left; }
  .strip .container-wide { justify-content: flex-start; gap: 10px 20px; }
  .strip li { font-size: 11.5px; }
  .addon { grid-template-columns: 1fr; }
  .price strong { font-size: 2.6rem; }
  .cta-band { text-align: left; }
  .cta-band .kicker { justify-content: flex-start; }
  .mobile-menu .sheet { padding-inline: 8px; }
}
@media (max-width: 700px) {
  .lightbox-bar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .lightbox-caption { flex-basis: calc(100% - 60px); order: 1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13.5px; }
  .lightbox-bar form { order: 2; }
  .lightbox-tools { order: 3; flex: 1 1 100%; justify-content: space-between; }
  .lightbox-tools button { padding: 0 10px; }
  .lightbox-scroll { padding: 12px; }
  .lightbox-help { padding: 7px 12px; }
  .help-wide { display: none; }
  .help-narrow { display: inline; }
}
@media (max-width: 359px) {
  /* The header's own action gives way to the menu, which carries it, before the row overflows. */
  .header-actions > .btn-primary { display: none; }
}


/* The line the banner shows when the browser will neither record an answer nor release an older
   one: the choice holds for this page, and the visitor is told so rather than left to assume. */
.consent-unsaved { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); }