/* ==========================================================================
   Wingcert — Product landing page
   Design system + page styles. No external dependencies, no webfonts.

   Art direction: "flight deck". The page is flown rather than scrolled — it
   starts on a dark ramp before dawn, climbs through the atmosphere, cruises at
   altitude and comes back down into daylight. Sections borrow the language of
   the environment the customer actually works in: horizon and pitch ladder,
   heading tape, runway markings, waypoints, radar, approach lights.

   Brand tokens are taken directly from the supplied logo artwork:
     Primary  #184389   Secondary #5b646f   Black/Ink #101820
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — exact values from Logo Primary / Secondary / Black */
  --brand-blue: #184389;
  --brand-slate: #5b646f;
  --brand-ink: #101820;

  /* Blue scale extended from the brand primary */
  --blue-950: #05101f;
  --blue-900: #0a1c3c;
  --blue-800: #102e60;
  --blue-700: #184389; /* brand */
  --blue-600: #1f58b4;
  --blue-500: #2a6fd9;
  --blue-400: #4e90f5;
  --blue-300: #8cbaff;
  --blue-200: #c3dbff;
  --blue-100: #e4eeff;
  --blue-50: #f2f7ff;

  /* Neutrals — warm-free, tuned to sit under the brand blue */
  --ink-950: #080c12;
  --ink-900: #101820; /* brand black */
  --ink-800: #18222d;
  --ink-700: #26323f;
  --ink-600: #3a4754;
  --slate-500: #5b646f; /* brand secondary */
  --slate-400: #7d8792;
  --slate-300: #a8b1bb;
  --slate-200: #d2d8de;
  --slate-100: #e8ecf0;
  --slate-50: #f5f7fa;
  --white: #ffffff;

  /* Atmosphere — the altitude scale the dark sections are painted from.
     Void is above the troposphere; dawn is the band sitting on the horizon. */
  --alt-void: #03060c;
  --alt-night: #060e1c;
  --alt-deep: #0a1b34;
  --alt-mid: #10305c;
  --alt-high: #1a4d94;
  --alt-horizon: #3f86d8;
  --dawn-1: #ff9d5c;
  --dawn-2: #ffcf94;
  --dawn-3: #ffe9c9;

  /* Instrument colours — HUD green and caution amber, used sparingly */
  --hud: #63e6b4;
  --caution: #ffb648;

  /* Semantic */
  --ok: #15926b;
  --ok-soft: #e6f6f0;
  --warn: #b7791f;
  --warn-soft: #fdf5e6;
  --crit: #c0392f;
  --crit-soft: #fdeceb;

  /* Surface roles — light context (default) */
  --bg: var(--white);
  --bg-alt: var(--slate-50);
  --fg: var(--ink-900);
  --fg-muted: var(--slate-500);
  --fg-faint: var(--slate-400);
  --line: var(--slate-200);
  --line-soft: var(--slate-100);
  --accent: var(--blue-700);

  /* Typography — resolves to SF Pro on Apple hardware, Segoe UI Variable on
     Windows. Zero network requests, native rendering on every platform. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
    "Segoe UI Mono", Menlo, monospace;

  /* Spacing rhythm */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(5.5rem, 12vw, 12rem);
  --max: 1200px;
  --max-narrow: 820px;

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(16, 24, 32, 0.05), 0 1px 3px rgba(16, 24, 32, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 32, 0.06), 0 12px 28px rgba(16, 24, 32, 0.07);
  --shadow-lg: 0 8px 24px rgba(16, 24, 32, 0.08), 0 32px 64px rgba(16, 24, 32, 0.12);
  --shadow-xl: 0 24px 60px rgba(10, 28, 60, 0.18), 0 60px 140px rgba(10, 28, 60, 0.22);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --nav-h: 62px;
}

/* Dark context — applied per-section, not globally. A marketing page commits
   to its art direction rather than following the OS theme. */
.ctx-dark {
  --bg: var(--alt-night);
  --bg-alt: var(--alt-deep);
  --fg: var(--white);
  --fg-muted: rgba(255, 255, 255, 0.66);
  --fg-faint: rgba(255, 255, 255, 0.44);
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.07);
  --accent: var(--blue-300);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-900);
  background: var(--alt-void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--blue-700); color: #fff; }

:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink-900);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: var(--max-narrow); }
.wrap-wide { max-width: 1400px; }

.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--fg);
}
.section-tight { padding-block: clamp(4rem, 8vw, 7rem); }

/* Sections sit on a dark body, so a light one paints its own ground. */
.section-light { background: var(--white); }
.section-tint { background: var(--slate-50); }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.display {
  font-size: clamp(3rem, 8.4vw, 6.75rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  font-weight: 700;
}
.h1 {
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 0.99;
  letter-spacing: -0.038em;
  font-weight: 700;
}
.h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 660;
}
.h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.28;
  letter-spacing: -0.016em;
  font-weight: 620;
}

.lede {
  font-size: clamp(1.12rem, 1.7vw, 1.4rem);
  line-height: 1.48;
  letter-spacing: -0.014em;
  color: var(--fg-muted);
  font-weight: 400;
}

.body-lg { font-size: 1.0625rem; line-height: 1.62; color: var(--fg-muted); }
.body { font-size: 1rem; line-height: 1.6; color: var(--fg-muted); }
.small { font-size: 0.875rem; line-height: 1.5; color: var(--fg-muted); }
.tiny { font-size: 0.78rem; line-height: 1.45; color: var(--fg-faint); }

/* Eyebrow — set like an instrument label, with a tick row rather than a rule */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.7rem;
  font-weight: 640;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 7px;
  flex-shrink: 0;
  background: linear-gradient(90deg, currentColor 1.5px, transparent 1.5px) 0 0 / 6px 100%;
  opacity: 0.55;
}

.grad-text {
  background: linear-gradient(96deg, var(--blue-300) 0%, var(--white) 44%, var(--dawn-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-text-blue {
  background: linear-gradient(96deg, var(--blue-700) 0%, var(--blue-500) 55%, var(--blue-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Monospaced readout — anything an instrument would display */
.readout {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Line breaks that only apply once there is room for them */
@media (max-width: 720px) {
  br.hide-sm { display: none; }
}

.section-head { max-width: 760px; margin-bottom: clamp(3rem, 5.5vw, 5rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head .h1 + .lede,
.section-head .h2 + .lede { margin-top: 1.35rem; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--blue-700);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.65rem;
  border: 1px solid transparent;
  border-radius: 980px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.975rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease),
    background-color 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.2s;
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.12);
}
/* A light sweep crosses the button on hover — the same specular pass the
   product shots get, so the whole page reads as one material. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.28) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease-out-expo);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(24, 67, 137, 0.32); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0); }

.btn-primary { --btn-bg: var(--blue-700); }
.btn-primary:hover { --btn-bg: var(--blue-600); }

/* A ghost button has to work on the dark nav over the hero and on a white
   pricing card. Taking its colour from --fg cannot do that: --fg is only
   redefined inside .ctx-dark, and the nav sits outside every section, so it
   stayed near-black over the hero while the bar around it turned white.
   Inheriting instead means the button follows whatever colour its context
   already set, and the border and hover wash follow the text. */
.btn-ghost {
  --btn-bg: transparent;
  color: inherit;
  border-color: color-mix(in srgb, currentColor 22%, transparent);
  box-shadow: none;
}
.btn-ghost:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
  border-color: color-mix(in srgb, currentColor 40%, transparent);
  box-shadow: none;
}
.btn-ghost::after { display: none; }

.btn-light { --btn-bg: #fff; --btn-fg: var(--ink-900); }
.btn-light:hover { --btn-bg: #fff; box-shadow: 0 10px 34px rgba(255, 255, 255, 0.24); }

.btn-sm { padding: 0.58rem 1.15rem; font-size: 0.9rem; }
.btn-lg { padding: 1.02rem 2.1rem; font-size: 1.05rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent);
  font-weight: 545;
  font-size: 1rem;
  transition: gap 0.24s var(--ease);
}
.link-arrow svg { transition: transform 0.24s var(--ease); }
.link-arrow:hover { gap: 0.65rem; }
.link-arrow:hover svg { transform: translateX(2px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}
.btn-row.center { justify-content: center; }

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease),
    backdrop-filter 0.5s var(--ease), transform 0.55s var(--ease-out-expo);
}
.nav.is-stuck {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: rgba(16, 24, 32, 0.08);
}
/* Reading downwards, the bar gets out of the way; it returns on the way up. */
.nav.is-hidden { transform: translateY(-104%); }
/* Over the dark hero, before the page scrolls */
.nav:not(.is-stuck) { color: #fff; }

/* Flight-progress hairline — how far through the page the reader has flown,
   with the aircraft at the present position. The bar is scaled and the aircraft
   is offset, so the glyph never inherits the bar's horizontal stretch. */
.nav-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.nav.is-stuck .nav-progress { opacity: 1; }
.nav-progress .bar {
  position: absolute;
  inset: 0;
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-300) 60%, var(--dawn-2));
}
.nav-progress .ship {
  position: absolute;
  top: 50%;
  left: calc(var(--page-progress, 0) * 100%);
  transform: translate(-50%, -50%);
  color: var(--dawn-1);
  filter: drop-shadow(0 0 5px rgba(255, 157, 92, 0.8));
}

.nav-inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img, .nav-logo svg { height: 21px; width: auto; }
.nav-logo .logo-dark { display: none; }
.nav.is-stuck .logo-dark { display: block; }
.nav.is-stuck .logo-light { display: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}
.nav-links a {
  position: relative;
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.28rem;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out-expo);
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.is-current { opacity: 1; }
.nav-links a.is-current::after { transform: scaleX(1); opacity: 0.45; }

.nav-cta { display: flex; align-items: center; gap: 0.6rem; margin-left: 0.75rem; }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
}
.nav-toggle span {
  display: block;
  width: 19px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 19px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid var(--slate-200);
  padding: 1rem var(--gutter) 1.75rem;
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 99;
  color: var(--ink-900);
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}
.nav-mobile.is-open { display: flex; }
.nav-mobile a {
  padding: 0.85rem 0.25rem;
  font-size: 1.05rem;
  font-weight: 500;
  border-bottom: 1px solid var(--slate-100);
  opacity: 0;
  transform: translateY(-8px);
  animation: nav-in 0.5s var(--ease-out-expo) forwards;
}
.nav-mobile.is-open a:nth-child(1) { animation-delay: 0.02s; }
.nav-mobile.is-open a:nth-child(2) { animation-delay: 0.05s; }
.nav-mobile.is-open a:nth-child(3) { animation-delay: 0.08s; }
.nav-mobile.is-open a:nth-child(4) { animation-delay: 0.11s; }
.nav-mobile.is-open a:nth-child(5) { animation-delay: 0.14s; }
.nav-mobile.is-open a:nth-child(6) { animation-delay: 0.17s; }
.nav-mobile.is-open a:nth-child(7) { animation-delay: 0.2s; }
.nav-mobile.is-open a:nth-child(8) { animation-delay: 0.23s; }
@keyframes nav-in { to { opacity: 1; transform: none; } }
.nav-mobile .btn { margin-top: 1rem; width: 100%; }

/* --------------------------------------------------------------------------
   7. Atmosphere — shared scenery primitives
   -------------------------------------------------------------------------- */
/* Star field. Three layers of box-shadow dots, each drifting at its own rate,
   so the sky has parallax without a single image request. */
.stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.stars i {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
}
/* Each layer drifts at its own rate — the depth cue comes from the difference,
   so the three offsets are set separately by the scroll loop. */
.stars i:nth-child(1) { transform: translate3d(0, calc(var(--star-y-1, 0) * 1px), 0); }
.stars i:nth-child(2) { transform: translate3d(0, calc(var(--star-y-2, 0) * 1px), 0); }
.stars i:nth-child(3) { transform: translate3d(0, calc(var(--star-y-3, 0) * 1px), 0); }
.stars i:nth-child(1) {
  box-shadow:
    12vw 14vh 0 0 rgba(255, 255, 255, 0.75), 27vw 8vh 0 0 rgba(255, 255, 255, 0.4),
    41vw 22vh 0 0 rgba(255, 255, 255, 0.6), 58vw 6vh 0 0 rgba(255, 255, 255, 0.5),
    69vw 18vh 0 0 rgba(255, 255, 255, 0.8), 83vw 11vh 0 0 rgba(255, 255, 255, 0.45),
    92vw 26vh 0 0 rgba(255, 255, 255, 0.55), 7vw 32vh 0 0 rgba(255, 255, 255, 0.35),
    35vw 38vh 0 0 rgba(255, 255, 255, 0.5), 52vw 30vh 0 0 rgba(255, 255, 255, 0.7),
    76vw 41vh 0 0 rgba(255, 255, 255, 0.4), 22vw 47vh 0 0 rgba(255, 255, 255, 0.5);
  animation: twinkle 5.5s ease-in-out infinite alternate;
}
.stars i:nth-child(2) {
  width: 1.5px; height: 1.5px;
  box-shadow:
    18vw 9vh 0 0 rgba(200, 224, 255, 0.5), 33vw 27vh 0 0 rgba(200, 224, 255, 0.35),
    47vw 13vh 0 0 rgba(200, 224, 255, 0.55), 63vw 34vh 0 0 rgba(200, 224, 255, 0.3),
    74vw 7vh 0 0 rgba(200, 224, 255, 0.45), 88vw 36vh 0 0 rgba(200, 224, 255, 0.4),
    3vw 21vh 0 0 rgba(200, 224, 255, 0.3), 29vw 44vh 0 0 rgba(200, 224, 255, 0.4),
    56vw 45vh 0 0 rgba(200, 224, 255, 0.3), 96vw 17vh 0 0 rgba(200, 224, 255, 0.35);
  animation: twinkle 7.5s ease-in-out infinite alternate-reverse;
}
.stars i:nth-child(3) {
  width: 1px; height: 1px;
  box-shadow:
    9vw 6vh 0 0 rgba(255, 255, 255, 0.3), 24vw 35vh 0 0 rgba(255, 255, 255, 0.25),
    38vw 5vh 0 0 rgba(255, 255, 255, 0.3), 51vw 19vh 0 0 rgba(255, 255, 255, 0.22),
    66vw 43vh 0 0 rgba(255, 255, 255, 0.28), 79vw 24vh 0 0 rgba(255, 255, 255, 0.25),
    86vw 48vh 0 0 rgba(255, 255, 255, 0.2), 15vw 40vh 0 0 rgba(255, 255, 255, 0.25),
    44vw 50vh 0 0 rgba(255, 255, 255, 0.22), 71vw 52vh 0 0 rgba(255, 255, 255, 0.2);
}
@keyframes twinkle { 50% { opacity: 0.55; } }

/* Horizon — the curve of the earth with a dawn band sitting on it */
.horizon {
  position: absolute;
  left: 50%;
  bottom: var(--horizon-bottom, -58%);
  width: 220%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%) translateY(calc(var(--horizon-y, 0) * 1px));
  border-radius: 50% 50% 0 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 46% at 50% 0%, rgba(255, 157, 92, 0.32), transparent 62%),
    linear-gradient(180deg, var(--alt-high) 0%, var(--alt-mid) 22%, var(--alt-deep) 55%, transparent 82%);
  box-shadow: 0 -1px 0 0 rgba(255, 207, 148, 0.5), 0 -18px 90px -10px rgba(255, 157, 92, 0.35);
  opacity: var(--horizon-o, 1);
}

/* Fine technical grid — a chart overlay, faded at the edges */
.grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse 80% 62% at 50% 34%, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 34%, #000 12%, transparent 76%);
}

/* Aircraft crossing a scene, contrail behind it */
.crosser {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0;
  opacity: 0;
  animation: crossing 26s linear infinite;
}
.crosser .trail {
  width: clamp(80px, 16vw, 240px);
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42));
  filter: blur(0.4px);
}
.crosser svg { color: rgba(255, 255, 255, 0.72); flex-shrink: 0; }
@keyframes crossing {
  0%   { transform: translate3d(-30vw, 0, 0); opacity: 0; }
  8%   { opacity: 0.9; }
  82%  { opacity: 0.9; }
  100% { transform: translate3d(120vw, -6vh, 0); opacity: 0; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse 90% 60% at 50% 108%, rgba(31, 88, 180, 0.5), transparent 68%),
    linear-gradient(180deg, var(--alt-void) 0%, var(--alt-night) 42%, var(--alt-deep) 100%);
  color: #fff;
  padding-top: clamp(8rem, 16vw, 12rem);
  padding-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}

/* Aurora field — high-altitude airglow behind everything else */
.aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  z-index: 0;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.7;
}
.aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.aurora i:nth-child(1) {
  width: 52vw; height: 52vw; left: 2%; top: 4%;
  background: radial-gradient(circle at 50% 50%, rgba(31, 88, 180, 0.72), transparent 65%);
  animation: drift-a 24s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) {
  width: 42vw; height: 42vw; right: 0; top: -4%;
  background: radial-gradient(circle at 50% 50%, rgba(42, 111, 217, 0.5), transparent 65%);
  animation: drift-b 28s ease-in-out infinite alternate;
}
.aurora i:nth-child(3) {
  width: 62vw; height: 38vw; left: 20%; top: 44%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 157, 92, 0.3), transparent 66%);
  animation: drift-c 32s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(6%, 8%, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-8%, 5%, 0) scale(1.08); } }
@keyframes drift-c { to { transform: translate3d(4%, -6%, 0) scale(1.15); } }

.hero .stars { height: 92%; }
.hero .grid-overlay { z-index: 0; }

.hero-inner { position: relative; z-index: 3; text-align: center; }

/* Attitude indicator. The ball banks and pitches against a fixed bank scale
   and aircraft symbol — the numbers are drawn by wingcert.js from scroll. */
.adi {
  position: absolute;
  left: 50%;
  /* Centred so the horizon line and aircraft symbol fall in the gap between the
     headline and the lede, with the bank scale arcing over the title and the
     ladder ends running out past the text column. */
  top: 43%;
  width: min(1020px, 94vw);
  z-index: 1;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + var(--adi-y, 0) * 1px));
  opacity: var(--adi-o, 0.42);
  color: var(--hud);
}
.adi svg { width: 100%; height: auto; overflow: visible; }
.adi line, .adi path, .adi rect { vector-effect: non-scaling-stroke; }

/* Fixed to the airframe: bank scale, its index, the aircraft symbol */
.adi-arc {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  opacity: 0.62;
}
.adi-ticks line {
  stroke: currentColor;
  stroke-width: 1.2;
  opacity: 0.6;
}
.adi-index { fill: currentColor; opacity: 0.85; }

.adi-craft path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: square;
  opacity: 0.9;
}
.adi-craft rect { fill: none; stroke: #fff; stroke-width: 2.6; opacity: 0.9; }

/* The roll pointer rides the scale with the bank */
.adi-roll {
  fill: currentColor;
  opacity: 0.9;
  transform-box: view-box;
  transform-origin: 300px 200px;
  transform: rotate(calc(var(--adi-roll, 0) * 1deg));
}

/* The ball: banked opposite to the aircraft, pitched by the ladder offset */
.adi-ball {
  transform-box: view-box;
  transform-origin: 300px 200px;
  transform:
    rotate(calc(var(--adi-roll, 0) * -1deg))
    translateY(calc(var(--adi-pitch, 0) * 1px));
}
.adi-horizon {
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0.85;
}
.adi-rung line {
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0.72;
}
.adi-rung text {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 13px;
  opacity: 0.6;
}
.adi-rung-minor line { opacity: 0.45; }
.adi-rung-neg line { stroke-dasharray: 7 6; opacity: 0.5; }
.adi-rung-neg .adi-tick { stroke-dasharray: none; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.55rem 0.4rem 0.5rem;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 0.83rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
}
.hero-badge b {
  font-weight: 620;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 980px;
  background: linear-gradient(120deg, var(--blue-600), var(--blue-500));
  color: #fff;
}
.hero-badge > span:first-of-type { opacity: 0.45; }

.hero h1 { max-width: 15ch; margin-inline: auto; }
.hero .lede {
  max-width: 56ch;
  margin: 1.75rem auto 0;
  color: rgba(255, 255, 255, 0.66);
}
.hero .btn-row { margin-top: 2.6rem; }

.hero-note {
  margin-top: 1.75rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.42);
  display: flex;
  gap: 1.6rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-note span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-note svg { color: var(--hud); opacity: 0.85; }

/* Scroll cue — a descent arrow that fades out as soon as the reader moves */
.scroll-cue {
  position: relative;
  z-index: 3;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  width: 22px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 980px;
  opacity: var(--cue-o, 1);
  transition: opacity 0.4s var(--ease);
}
.scroll-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.75);
  animation: cue 2.1s var(--ease-io) infinite;
}
@keyframes cue {
  0%   { transform: translateY(0); opacity: 0; }
  22%  { opacity: 1; }
  70%  { transform: translateY(15px); opacity: 0; }
  100% { transform: translateY(15px); opacity: 0; }
}

/* Hero product shot — rises, flattens and settles as the page scrolls */
.hero-shot {
  position: relative;
  z-index: 3;
  margin-top: clamp(3rem, 6vw, 5rem);
  perspective: 2400px;
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}
.hero-shot-inner {
  /* Declared here rather than only as var() fallbacks: wingcert.js overrides
     them on scroll, and declaring them keeps the resting state defined in CSS
     for anything that reads the stylesheet without running the script. */
  --shot-rx: 18deg;
  --shot-s: 0.92;
  --shot-y: 0px;
  position: relative;
  transform: rotateX(var(--shot-rx)) scale(var(--shot-s)) translateY(var(--shot-y));
  transform-origin: 50% 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255, 255, 255, 0.09);
  will-change: transform;
}
/* Specular pass across the glass as the shot settles */
.hero-shot-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%);
  opacity: var(--shot-gloss, 0);
  transform: translateX(calc(var(--shot-gloss-x, 0) * 1%));
}
.hero-shot-inner::after {
  content: "";
  position: absolute;
  inset: auto 8% -16%;
  height: 70px;
  background: radial-gradient(ellipse at 50% 0%, rgba(42, 111, 217, 0.6), transparent 70%);
  filter: blur(30px);
  z-index: -1;
}

/* --------------------------------------------------------------------------
   9. Heading tape (frameworks)
   -------------------------------------------------------------------------- */
.frameworks {
  position: relative;
  background: var(--alt-deep);
  color: #fff;
  padding-block: clamp(3rem, 6vw, 4.75rem);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.frameworks p {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  font-weight: 600;
  margin-bottom: 2.25rem;
}
/* The compass tape the names ride on */
.tape {
  position: relative;
  padding-block: 1.15rem;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.tape::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 44px);
  opacity: 0.6;
  pointer-events: none;
}
.tape-track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  width: max-content;
  animation: tape-run 34s linear infinite;
}
.tape:hover .tape-track { animation-play-state: paused; }
@keyframes tape-run { to { transform: translateX(-50%); } }
/* Edit mode renders one copy and holds it still — nothing should slide out
   from under the caret while somebody is typing into it. */
.tape-track.is-static { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; }

.framework-row {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  flex-shrink: 0;
}
.framework-row li {
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 680;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.35s var(--ease), text-shadow 0.35s var(--ease);
  cursor: default;
  white-space: nowrap;
}
.framework-row li:hover {
  color: #fff;
  text-shadow: 0 0 26px rgba(140, 186, 255, 0.55);
}
.framework-row li small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 0.2rem;
}

/* --------------------------------------------------------------------------
   10. The thread — pinned flight plan
   -------------------------------------------------------------------------- */
.thread-sec {
  position: relative;
  background: linear-gradient(180deg, var(--alt-deep) 0%, var(--alt-night) 40%, var(--alt-void) 100%);
  color: #fff;
  overflow: clip;
}
/* Height is what the pinned stage scrubs against: one viewport per step,
   plus a screen of lead-in and lead-out. */
.thread-track { position: relative; height: var(--thread-h, 560vh); }
.thread-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: center;
  padding-block: calc(var(--nav-h) + 1rem) 3rem;
  overflow: hidden;
}
.thread-stage .grid-overlay { opacity: 0.6; }

.thread-intro { position: relative; z-index: 2; text-align: center; }
.thread-intro .h2 { max-width: 18ch; margin-inline: auto; }
.thread-intro .lede {
  max-width: 60ch;
  margin: 1rem auto 0;
  font-size: clamp(0.98rem, 1.3vw, 1.12rem);
  color: rgba(255, 255, 255, 0.55);
}

/* The route itself */
.route {
  position: relative;
  z-index: 2;
  width: min(1180px, 92vw);
  margin-inline: auto;
  /* The route takes the stage's flexible row. min-height:0 lets that row
     shrink on a short screen; preserveAspectRatio then letterboxes the drawing
     instead of it overflowing and being clipped. Waypoints and the aircraft are
     positioned in user units, so they scale with it. */
  min-height: 0;
  align-self: stretch;
}
.route svg { width: 100%; height: 100%; overflow: visible; }
.route .route-bed {
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1.5;
  stroke-dasharray: 7 9;
  stroke-linecap: round;
}
.route .route-live {
  fill: none;
  stroke: url(#routeGrad);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: var(--route-len, 1200);
  stroke-dashoffset: calc(var(--route-len, 1200) - var(--route-len, 1200) * var(--p, 0));
  filter: drop-shadow(0 0 10px rgba(140, 186, 255, 0.55));
}
.route .wp { transition: none; }
.route .wp-ring {
  fill: var(--alt-void);
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1.5;
  transition: stroke 0.45s var(--ease), fill 0.45s var(--ease);
}
.route .wp-core {
  fill: rgba(255, 255, 255, 0.3);
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.45s var(--ease), transform 0.5s var(--ease-out-expo);
}
.route .wp.is-live .wp-ring { stroke: var(--blue-300); fill: rgba(24, 67, 137, 0.5); }
.route .wp.is-live .wp-core { fill: #fff; transform: scale(1.5); }
.route .wp.is-past .wp-ring { stroke: rgba(140, 186, 255, 0.55); }
.route .wp.is-past .wp-core { fill: var(--blue-300); }
.route .wp-label {
  fill: rgba(255, 255, 255, 0.4);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: fill 0.45s var(--ease);
}
.route .wp.is-live .wp-label { fill: #fff; }
.route .wp.is-past .wp-label { fill: rgba(255, 255, 255, 0.62); }
/* Pulse ring on the waypoint currently being read */
.route .wp-pulse {
  fill: none;
  stroke: var(--blue-300);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.route .wp.is-live .wp-pulse { animation: wp-pulse 2s var(--ease-out-expo) infinite; }
@keyframes wp-pulse {
  0%   { opacity: 0.6; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* The aircraft riding the route. Its transform is written by the scroll loop
   from getPointAtLength(), which also gives the heading to rotate it by —
   offset-path would tie the geometry to a second copy of the path data. */
.route .ship {
  fill: #fff;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.65));
}

/* Step copy that swaps under the route */
.thread-steps {
  position: relative;
  z-index: 2;
  min-height: 12.5rem;
  display: grid;
  align-content: start;
  justify-items: center;
  text-align: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.thread-step {
  grid-area: 1 / 1;
  max-width: 46ch;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-out-expo);
  pointer-events: none;
}
.thread-step.is-live { opacity: 1; transform: none; pointer-events: auto; }
.thread-step .dot {
  width: 54px;
  height: 54px;
  margin: 0 auto 1.35rem;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px -14px rgba(42, 111, 217, 0.75);
}
.thread-step .num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  color: var(--blue-300);
  margin-bottom: 0.7rem;
}
.thread-step h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 660;
  letter-spacing: -0.03em;
  line-height: 1.06;
}
.thread-step p {
  margin-top: 0.75rem;
  font-size: clamp(0.98rem, 1.35vw, 1.15rem);
  color: rgba(255, 255, 255, 0.58);
}

/* Progress readout, bottom of the stage */
.thread-meter {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(560px, 84vw);
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.42);
}
.thread-meter .bar {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.thread-meter .bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

/* Fallback for browsers without position:sticky support in this arrangement,
   and the layout used below the pin breakpoint. */
.thread-list { display: none; }

/* --------------------------------------------------------------------------
   11. Bento module grid
   -------------------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.15rem;
}
.tile {
  position: relative;
  overflow: hidden;
  padding: clamp(1.6rem, 2.5vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  min-height: 250px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease),
    border-color 0.3s;
}
/* Pointer spotlight — a soft light that follows the cursor across the card */
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
    rgba(42, 111, 217, 0.1), transparent 62%);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--slate-200); }
.tile:hover::before { opacity: 1; }
.tile-span-3 { grid-column: span 3; }
.tile-span-2 { grid-column: span 2; }
.tile-span-4 { grid-column: span 4; }
.tile-span-6 { grid-column: span 6; }

.tile-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-700);
  margin-bottom: 1.2rem;
  flex-shrink: 0;
  transition: transform 0.5s var(--ease-out-expo);
}
.tile:hover .tile-icon { transform: translateY(-2px) scale(1.06); }
.tile h3 { margin-bottom: 0.5rem; }
.tile p { font-size: 0.945rem; color: var(--fg-muted); }
.tile-body { flex: 1; position: relative; z-index: 1; }
.tile-visual { margin-top: 1.5rem; position: relative; z-index: 1; }

/* The featured tile is a night panel — the instrument in the middle of the
   dashboard, so the grid has one dark anchor. */
.tile-feature {
  background:
    radial-gradient(ellipse 80% 70% at 15% 0%, rgba(31, 88, 180, 0.55), transparent 62%),
    linear-gradient(160deg, var(--alt-night) 0%, var(--alt-deep) 60%, var(--alt-mid) 130%);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.tile-feature p { color: rgba(255, 255, 255, 0.62); }
.tile-feature .tile-icon {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.tile-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 70% at 80% 100%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 80% 100%, #000, transparent 70%);
}

/* Mini chart used inside tiles */
.mini-bars { display: flex; align-items: flex-end; gap: 6px; height: 74px; position: relative; }
.mini-bars i {
  flex: 1;
  display: block;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--blue-300), var(--blue-500));
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 1s var(--ease-out-expo);
}
.in .mini-bars i { transform: scaleY(1); }
.mini-bars i:nth-child(1) { transition-delay: 0.05s; }
.mini-bars i:nth-child(2) { transition-delay: 0.11s; }
.mini-bars i:nth-child(3) { transition-delay: 0.17s; }
.mini-bars i:nth-child(4) { transition-delay: 0.23s; }
.mini-bars i:nth-child(5) { transition-delay: 0.29s; }
.mini-bars i:nth-child(6) { transition-delay: 0.35s; }
.mini-bars i:nth-child(7) { transition-delay: 0.41s; }

.chip-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  font-size: 0.76rem;
  font-weight: 540;
  padding: 0.32rem 0.7rem;
  border-radius: 980px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  color: var(--slate-500);
  transition: transform 0.4s var(--ease-out-expo), border-color 0.3s;
}
.tile:hover .chip { border-color: var(--blue-200); }
.tile-feature .chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.82);
}
.tile-feature:hover .chip { border-color: rgba(255, 255, 255, 0.3); }

/* --------------------------------------------------------------------------
   12. Product mockup chrome
   Hand-built product UI. These classes are the contract with
   partials/mockups/* — rename nothing here without changing those.
   -------------------------------------------------------------------------- */
.frame {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  color: var(--ink-900);
  font-size: 13px;
  line-height: 1.4;
}
.frame-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.9rem;
  background: #f1f3f6;
  border-bottom: 1px solid #e2e6eb;
}
.frame-dots { display: flex; gap: 6px; }
.frame-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.frame-dots i:nth-child(1) { background: #ff5f57; }
.frame-dots i:nth-child(2) { background: #febc2e; }
.frame-dots i:nth-child(3) { background: #28c840; }
.frame-url {
  flex: 1;
  max-width: 340px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid #e2e6eb;
  border-radius: 6px;
  padding: 0.22rem 0.7rem;
  font-size: 11.5px;
  color: var(--slate-500);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.frame-url svg { width: 10px; height: 10px; flex-shrink: 0; color: var(--ok); }

/* App shell inside the frame */
.app {
  display: grid;
  grid-template-columns: 196px 1fr;
  min-height: 470px;
  background: #f7f9fb;
}
.app-side {
  background: var(--alt-night);
  padding: 0.95rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.app-side-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.55rem 1.1rem;
}
.app-side-logo img { height: 14px; width: auto; }
.app-side-group {
  font-size: 9.5px;
  font-weight: 640;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  padding: 0.9rem 0.55rem 0.4rem;
}
.app-nav {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.55rem;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 500;
}
.app-nav svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.75; }
.app-nav.is-active { background: var(--blue-700); color: #fff; }
.app-nav.is-active svg { opacity: 1; }
.app-nav .badge {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 640;
  padding: 0.1rem 0.35rem;
  border-radius: 980px;
  background: var(--crit);
  color: #fff;
}

.app-main { padding: 1.15rem 1.35rem 1.5rem; overflow: hidden; }
.app-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid #e6eaef;
  margin-bottom: 1.15rem;
}
.app-top h4 { font-size: 15px; font-weight: 640; letter-spacing: -0.015em; margin: 0; }
.app-top .sub { font-size: 11px; color: var(--slate-400); margin-top: 1px; }
.app-top-actions { margin-left: auto; display: flex; align-items: center; gap: 0.45rem; }
.pill {
  font-size: 10.5px;
  font-weight: 560;
  padding: 0.28rem 0.6rem;
  border-radius: 980px;
  border: 1px solid #dfe4ea;
  background: #fff;
  color: var(--slate-500);
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}
.pill-solid { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.avatar-stack { display: flex; }
.avatar-stack i {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid #fff;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 640; color: #fff;
  font-style: normal;
}
.avatar-stack i + i { margin-left: -7px; }

/* KPI cards */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin-bottom: 1.05rem;
}
.kpi {
  background: #fff;
  border: 1px solid #e6eaef;
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
}
.kpi .label {
  font-size: 10px;
  color: var(--slate-400);
  font-weight: 560;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.kpi .value {
  font-size: 21px;
  font-weight: 680;
  letter-spacing: -0.03em;
  margin-top: 0.28rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kpi .delta { font-size: 10px; font-weight: 580; margin-top: 0.15rem; }
.delta-up { color: var(--ok); }
.delta-down { color: var(--crit); }
.delta-flat { color: var(--slate-400); }

/* Panels */
.panel-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0.7rem; }
.panel {
  background: #fff;
  border: 1px solid #e6eaef;
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.panel-head h5 { font-size: 12px; font-weight: 640; margin: 0; letter-spacing: -0.01em; }
.panel-head .more { font-size: 10px; color: var(--blue-700); font-weight: 560; }

/* Horizontal compliance bars */
.reg-bar { margin-bottom: 0.7rem; }
.reg-bar:last-child { margin-bottom: 0; }
.reg-bar .reg-top {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  margin-bottom: 0.28rem;
}
.reg-bar .reg-top b { font-weight: 600; }
.reg-bar .reg-top span { color: var(--slate-400); font-variant-numeric: tabular-nums; }
.reg-track { height: 5px; border-radius: 3px; background: #eef1f5; overflow: hidden; }
.reg-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-400));
  width: 0;
  transition: width 1.3s var(--ease-out-expo);
}
.in .reg-fill { width: var(--w); }
.reg-fill.is-warn { background: linear-gradient(90deg, #d9a441, #e8c26b); }
.reg-fill.is-crit { background: linear-gradient(90deg, #c0392f, #e0645a); }

/* Finding list */
.find-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0f3f6;
}
.find-item:last-child { border-bottom: 0; }
.lvl {
  font-size: 9px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.lvl-1 { background: var(--crit-soft); color: var(--crit); }
.lvl-2 { background: var(--warn-soft); color: var(--warn); }
.lvl-3 { background: var(--blue-100); color: var(--blue-700); }
.find-item .txt { flex: 1; min-width: 0; }
.find-item .txt b { display: block; font-size: 11.5px; font-weight: 570; letter-spacing: -0.005em; }
.find-item .txt span {
  display: block;
  font-size: 10px;
  color: var(--slate-400);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.find-item .due { font-size: 10px; font-weight: 580; color: var(--slate-400); flex-shrink: 0; }
.find-item .due.is-over { color: var(--crit); }

/* Data table mockup */
.tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
.tbl th {
  text-align: left;
  font-size: 9.5px;
  font-weight: 620;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate-400);
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid #e6eaef;
  white-space: nowrap;
}
.tbl td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid #f2f5f8;
  vertical-align: middle;
  white-space: nowrap;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl .ref { font-family: var(--font-mono); font-size: 10px; color: var(--blue-700); font-weight: 560; }
.status {
  font-size: 9.5px;
  font-weight: 600;
  padding: 0.16rem 0.45rem;
  border-radius: 980px;
  display: inline-block;
}
.st-open { background: var(--crit-soft); color: var(--crit); }
.st-prog { background: var(--warn-soft); color: var(--warn); }
.st-ver { background: var(--blue-100); color: var(--blue-700); }
.st-closed { background: var(--ok-soft); color: var(--ok); }

/* Gantt / audit schedule */
.gantt-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 10.5px;
}
.gantt-row b { font-weight: 570; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-track { position: relative; height: 16px; background: #f2f5f8; border-radius: 4px; }
.gantt-track i {
  position: absolute;
  top: 3px;
  height: 10px;
  border-radius: 3px;
  background: var(--blue-600);
  display: block;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-out-expo);
}
.in .gantt-track i { transform: scaleX(1); }
.gantt-track i.g2 { background: var(--blue-400); }
.gantt-track i.g3 { background: var(--slate-300); }
.gantt-head {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}
.gantt-months {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  font-size: 9px;
  color: var(--slate-400);
  font-weight: 560;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   13. Product screens — the display unit
   -------------------------------------------------------------------------- */
.deck {
  position: relative;
  background: linear-gradient(180deg, var(--alt-void) 0%, var(--alt-night) 26%, var(--alt-deep) 100%);
  color: #fff;
  overflow: clip;
}
.deck::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 45% at 50% 6%, rgba(31, 88, 180, 0.42), transparent 70%);
  pointer-events: none;
}
.deck > * { position: relative; }

/* The unit pins as a whole — screen and keys together — so the controls are
   never off screen while the screens are. */
.deck-stage {
  position: sticky;
  top: calc(var(--nav-h) + 1.25rem);
  perspective: 2200px;
}

.deck-unit {
  position: relative;
  border-radius: 26px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 30%, rgba(0, 0, 0, 0.25)),
    linear-gradient(160deg, #1d2733, #0d141d 60%, #121b26);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 40px 90px -30px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: rotateX(calc(var(--deck-rx, 0) * 1deg)) scale(var(--deck-s, 1));
  transform-origin: 50% 100%;
  will-change: transform;
}

/* Status strip above the glass */
.deck-status {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.15rem 0.6rem 0.65rem;
}
.deck-lamps { display: flex; gap: 6px; }
.deck-lamps i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: block;
  background: rgba(255, 255, 255, 0.16);
}
.deck-lamps i:first-child {
  background: var(--hud);
  box-shadow: 0 0 8px 1px rgba(99, 230, 180, 0.7);
  animation: blink 3.2s ease-in-out infinite;
}
.deck-rule {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 7px);
}
.deck-status .readout {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
}

/* The glass. Screens are stacked in one cell, so the unit never changes height
   when the reader switches — the tallest screen sets it once. */
.deck-screen {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #05090f;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 2px 18px rgba(0, 0, 0, 0.8);
}
.tab-panels { display: grid; align-items: stretch; }
.tab-panel {
  grid-area: 1 / 1;
  /* Every screen fills the glass, so the shorter ones do not leave a strip of
     bezel showing under them where the tallest one sets the height. */
  display: flex;
  flex-direction: column;
  /* visibility, not display: it keeps the stack's height stable while still
     taking the inactive screens out of the tab order and the a11y tree. */
  visibility: hidden;
  opacity: 0;
  transform: scale(0.988);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease-out-expo), visibility 0.5s;
}
.tab-panel.is-active { visibility: visible; opacity: 1; transform: none; }

/* Inside the unit the browser chrome reads as the display's own address strip */
.deck .frame {
  border-radius: 0;
  box-shadow: none;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.deck .frame > .app { flex: 1; }
.deck .frame-dots { display: none; }
.deck .frame-bar { background: #eef1f5; }
.deck .frame-url { max-width: 380px; }

/* Redraw sweep, played when the screen changes */
.deck-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg,
    transparent 42%, rgba(140, 186, 255, 0.22) 50%, transparent 58%);
}
.deck-screen.is-changing .deck-sweep { animation: deck-sweep 0.65s var(--ease-out-expo); }
@keyframes deck-sweep {
  0%   { opacity: 0; transform: translateX(-60%); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(60%); }
}

/* Line-select keys on the bottom bezel */
.deck-keys {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  padding: 0.85rem 0.35rem 0.2rem;
}
.deck-keys .tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.62rem 0.85rem 0.66rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  color: rgba(255, 255, 255, 0.62);
  text-align: left;
  cursor: pointer;
  transition: color 0.25s, border-color 0.3s, background-color 0.3s, box-shadow 0.4s var(--ease);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
/* The tick that ties each key to the glass above it */
.deck-keys .tab::before {
  content: "";
  position: absolute;
  top: -0.85rem;
  left: 1rem;
  width: 1px;
  height: 0.6rem;
  background: rgba(255, 255, 255, 0.18);
  transition: background-color 0.3s, height 0.3s var(--ease);
}
.deck-keys .tab:hover { color: #fff; border-color: rgba(255, 255, 255, 0.22); }
.deck-keys .tab[aria-selected="true"] {
  color: #fff;
  border-color: rgba(140, 186, 255, 0.55);
  background: linear-gradient(180deg, rgba(42, 111, 217, 0.34), rgba(24, 67, 137, 0.22));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 24px -6px rgba(78, 144, 245, 0.75);
}
.deck-keys .tab[aria-selected="true"]::before {
  background: var(--blue-300);
  height: 0.85rem;
  top: -1.1rem;
}
.key-index {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.38);
  transition: color 0.25s;
}
.deck-keys .tab[aria-selected="true"] .key-index { color: var(--blue-300); }
.key-label { font-size: 0.92rem; font-weight: 550; letter-spacing: -0.012em; }

.tab-caption {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 3.5rem;
  /* Slack below the captions is what the pinned unit above has left to travel:
     without it the pin lasts a couple of hundred pixels and reads as a glitch. */
  margin-bottom: clamp(0rem, 7vh, 5rem);
}
.tab-caption > div { min-width: 0; }
.tab-caption h4 {
  font-size: 0.98rem;
  font-weight: 620;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tab-caption h4 svg { color: var(--blue-300); width: 15px; height: 15px; flex-shrink: 0; }
.tab-caption p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.55); }

/* --------------------------------------------------------------------------
   14. In the field — ramp scene with the tablet
   -------------------------------------------------------------------------- */
.field-sec {
  position: relative;
  /* Reads top to bottom as a descent: still in the murk of the cloud layer at
     the top, clearing into night air, then the ramp's own darkness. */
  background:
    linear-gradient(180deg,
      var(--alt-deep) 0%,
      #12243f 14%,
      var(--alt-night) 52%,
      var(--alt-void) 100%);
  color: #fff;
  overflow: hidden;
}

/* -------------------------------------------------------- cloud deck --- */
/* Three layers of soft blobs. Each layer parallaxes at its own depth (written
   by the scroll loop) and each blob drifts inside it, so the two motions never
   fight over the same transform. */
.cloud-deck {
  position: absolute;
  inset: 0 0 auto 0;
  height: 68%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 96%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 96%);
}
.cloud-deck .cl {
  position: absolute;
  inset: 0;
  display: block;
  transform: translate3d(0, calc(var(--cloud-y, 0) * var(--depth, 1) * 1px), 0);
}
.cl-far { --depth: 0.25; }
.cl-mid { --depth: 0.55; }
.cl-near { --depth: 1; }

.cloud-deck i {
  position: absolute;
  display: block;
  border-radius: 50%;
  animation: cloud-drift var(--dur, 90s) linear infinite;
  animation-delay: var(--delay, 0s);
}
/* Cold light on the tops, the ramp's sodium glow underneath */
.cl-far i {
  background: radial-gradient(ellipse 58% 50% at 50% 58%,
    rgba(126, 158, 200, 0.3), rgba(74, 100, 138, 0.12) 56%, transparent 74%);
  filter: blur(46px);
}
.cl-mid i {
  background: radial-gradient(ellipse 58% 48% at 50% 60%,
    rgba(150, 180, 220, 0.34), rgba(84, 112, 152, 0.14) 54%, transparent 72%);
  filter: blur(34px);
}
.cl-near i {
  background: radial-gradient(ellipse 60% 46% at 50% 64%,
    rgba(196, 214, 240, 0.3), rgba(255, 190, 140, 0.13) 52%, transparent 70%);
  filter: blur(26px);
}

.cl-far i:nth-child(1) { left: -12%; top: 2%;  width: 52%; height: 30%; --dur: 130s; }
.cl-far i:nth-child(2) { left: 42%;  top: -4%; width: 46%; height: 26%; --dur: 155s; --delay: -40s; }
.cl-far i:nth-child(3) { left: 74%;  top: 14%; width: 44%; height: 24%; --dur: 140s; --delay: -85s; }
.cl-mid i:nth-child(1) { left: -8%;  top: 20%; width: 58%; height: 26%; --dur: 105s; --delay: -20s; }
.cl-mid i:nth-child(2) { left: 52%;  top: 12%; width: 54%; height: 28%; --dur: 118s; --delay: -70s; }
.cl-near i:nth-child(1) { left: 6%;  top: 34%; width: 62%; height: 22%; --dur: 82s; --delay: -10s; }
.cl-near i:nth-child(2) { left: 58%; top: 40%; width: 56%; height: 20%; --dur: 94s; --delay: -55s; }

@keyframes cloud-drift {
  from { transform: translate3d(-16%, 0, 0); }
  to   { transform: translate3d(16%, 0, 0); }
}
/* Runway receding into the distance behind the tablet */
.field-runway {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  z-index: 0;
  pointer-events: none;
  perspective: 320px;
  perspective-origin: 50% 0%;
  opacity: 0.5;
}
.field-runway i {
  position: absolute;
  inset: 0;
  transform: rotateX(72deg);
  transform-origin: 50% 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 calc(50% - 1px), rgba(255, 255, 255, 0.22) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%),
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0.16) 0 3px, transparent 3px 64px);
  background-position: 0 0, 0 calc(var(--rw-y, 0) * 1px);
  mask-image: linear-gradient(180deg, transparent, #000 35%, transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, transparent 92%);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
  position: relative;
  z-index: 2;
}
.split-copy h2 { margin-bottom: 1.3rem; }
.feature-list { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 0.25rem; }
.feature-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.05rem 0;
  border-top: 1px solid var(--line-soft);
}
.feature-list li:last-child { border-bottom: 1px solid var(--line-soft); }
.feature-list .ic {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--blue-100);
  color: var(--blue-700);
  flex-shrink: 0;
  transition: transform 0.5s var(--ease-out-expo), background-color 0.3s;
}
.ctx-dark .feature-list .ic,
.field-sec .feature-list .ic { background: rgba(78, 144, 245, 0.16); color: var(--blue-300); }
.feature-list li:hover .ic { transform: scale(1.1) rotate(-4deg); }
.feature-list b { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -0.014em; }
.feature-list p { font-size: 0.92rem; color: var(--fg-muted); margin-top: 0.3rem; }

/* Tablet frame */
.split-visual { perspective: 1600px; }
.tablet {
  position: relative;
  border-radius: 30px;
  background: linear-gradient(150deg, #2a3340, #151d26);
  padding: 13px;
  box-shadow: var(--shadow-xl);
  max-width: 480px;
  margin-inline: auto;
  transform:
    rotateY(calc(var(--tab-ry, -8) * 1deg))
    rotateX(calc(var(--tab-rx, 4) * 1deg))
    translateY(calc(var(--tab-y, 0) * 1px));
  will-change: transform;
}
.tablet::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  width: 3px;
  height: 40px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-50%);
}
.tablet-screen {
  border-radius: 19px;
  overflow: hidden;
  background: #f7f9fb;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: var(--ink-900);
}
.tablet-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  background: #fff;
  border-bottom: 1px solid #e6eaef;
  font-size: 10.5px;
  font-weight: 580;
}
.tablet-status .time { font-variant-numeric: tabular-nums; }
.tablet-status .right { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; }
.offline-chip {
  font-size: 9.5px;
  font-weight: 640;
  padding: 0.14rem 0.45rem;
  border-radius: 980px;
  background: var(--warn-soft);
  color: var(--warn);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.offline-chip i {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; display: block;
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }

.audit-head {
  padding: 0.9rem 0.95rem;
  background: #fff;
  border-bottom: 1px solid #e6eaef;
}
.audit-head .ref { font-family: var(--font-mono); font-size: 10px; color: var(--blue-700); font-weight: 560; }
.audit-head h5 { font-size: 14px; font-weight: 650; margin: 0.2rem 0 0.65rem; letter-spacing: -0.015em; }
.audit-progress { display: flex; align-items: center; gap: 0.6rem; }
.ring { width: 34px; height: 34px; flex-shrink: 0; }
.ring circle { fill: none; stroke-width: 4; }
.ring .bg { stroke: #eef1f5; }
.ring .fg {
  stroke: var(--blue-600);
  stroke-linecap: round;
  stroke-dasharray: 88;
  stroke-dashoffset: 88;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1.5s var(--ease-out-expo);
}
.in .ring .fg { stroke-dashoffset: 26; }
.audit-progress .meta b { font-size: 11.5px; font-weight: 620; display: block; }
.audit-progress .meta span { font-size: 10px; color: var(--slate-400); }

.check-list { flex: 1; overflow: hidden; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.45rem; }
.check {
  background: #fff;
  border: 1px solid #e6eaef;
  border-radius: 9px;
  padding: 0.6rem 0.7rem;
}
.check-top { display: flex; gap: 0.5rem; align-items: flex-start; }
.check-top .q { flex: 1; }
.check-top .q b { font-size: 11px; font-weight: 580; display: block; letter-spacing: -0.005em; }
.check-top .q span { font-size: 9.5px; color: var(--slate-400); font-family: var(--font-mono); }
.seg {
  display: flex;
  gap: 2px;
  background: #eef1f5;
  border-radius: 6px;
  padding: 2px;
  flex-shrink: 0;
}
.seg i {
  font-style: normal;
  font-size: 9px;
  font-weight: 640;
  padding: 0.2rem 0.42rem;
  border-radius: 4px;
  color: var(--slate-400);
  display: block;
}
.seg i.on-ok { background: var(--ok); color: #fff; }
.seg i.on-no { background: var(--crit); color: #fff; }
.seg i.on-na { background: var(--slate-400); color: #fff; }

.check-expand {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed #e2e6eb;
}
.evidence-row { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
.evidence {
  width: 40px; height: 40px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--slate-200), var(--slate-100));
  display: grid; place-items: center;
  color: var(--slate-400);
  border: 1px solid #e2e6eb;
}
.evidence.add { border-style: dashed; background: #fff; color: var(--blue-700); }
.finding-raise {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 10px;
  font-weight: 580;
  color: var(--crit);
  background: var(--crit-soft);
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   15. Surfaces — gate signage
   -------------------------------------------------------------------------- */
.surface-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.surface {
  position: relative;
  overflow: hidden;
  padding: 1.75rem 1.6rem 1.6rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg);
  transition: transform 0.5s var(--ease-out-expo), border-color 0.35s, box-shadow 0.45s;
  display: block;
}
.surface::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-300), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out-expo);
}
.surface:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.surface:hover::before { transform: scaleX(1); }
.surface .host {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--accent);
  font-weight: 550;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}
.surface h3 { font-size: 1.08rem; margin-bottom: 0.45rem; }
.surface p { font-size: 0.9rem; color: var(--fg-muted); }
.surface .soon {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 5px;
  background: var(--warn-soft);
  color: var(--warn);
}

/* --------------------------------------------------------------------------
   16. Trust — radar sweep
   -------------------------------------------------------------------------- */
.trust-sec {
  position: relative;
  background: var(--alt-void);
  color: #fff;
  overflow: hidden;
}
.radar {
  position: absolute;
  right: -12%;
  top: 50%;
  width: min(760px, 82vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
.radar i,
.radar b {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
}
/* Range rings */
.radar i { border: 1px solid rgba(99, 230, 180, 0.16); }
.radar i:nth-child(2) { inset: 12.5%; }
.radar i:nth-child(3) { inset: 25%; }
.radar i:nth-child(4) { inset: 37.5%; }
/* The sweep */
.radar b {
  background: conic-gradient(from 0deg,
    rgba(99, 230, 180, 0.32) 0deg, rgba(99, 230, 180, 0.05) 26deg, transparent 60deg);
  animation: sweep 7s linear infinite;
  mask-image: radial-gradient(circle, #000 62%, transparent 63%);
  -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 63%);
}
@keyframes sweep { to { transform: rotate(360deg); } }

.sec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem);
  position: relative;
  z-index: 2;
}
.sec-item { padding-top: 1.35rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.sec-item .ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: var(--blue-300);
  margin-bottom: 1rem;
  transition: transform 0.5s var(--ease-out-expo), color 0.3s;
}
.sec-item:hover .ic { transform: translateY(-3px); color: var(--hud); }
.sec-item h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.sec-item p { font-size: 0.885rem; color: rgba(255, 255, 255, 0.55); }

/* --------------------------------------------------------------------------
   17. Pricing
   -------------------------------------------------------------------------- */
/* Segmented control — two named options with a thumb that slides between them */
.segmented {
  position: relative;
  display: inline-flex;
  margin-top: 2.5rem;
  padding: 4px;
  border-radius: 980px;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  isolation: isolate;
}
.seg-thumb {
  position: absolute;
  z-index: -1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: var(--seg-w, 50%);
  transform: translateX(var(--seg-x, 0));
  border-radius: 980px;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(16, 24, 32, 0.14), 0 4px 12px rgba(16, 24, 32, 0.06);
  transition: transform 0.45s var(--ease-out-expo), width 0.45s var(--ease-out-expo);
}
/* Named seg-opt, not seg: the tablet mockup's OK / NO / N-A control already
   owns `.seg`, and a blanket rule here would restyle it. */
.seg-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 1.5rem;
  border: 0;
  border-radius: 980px;
  background: none;
  color: var(--fg-muted);
  font-size: 0.95rem;
  font-weight: 540;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.seg-opt[aria-checked="true"] { color: var(--fg); font-weight: 580; }
.seg-save {
  font-size: 0.7rem;
  font-weight: 640;
  letter-spacing: 0.02em;
  padding: 0.16rem 0.5rem;
  border-radius: 980px;
  background: var(--ok-soft);
  color: var(--ok);
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-top: 3.5rem;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2rem 2rem;
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.5s var(--ease), transform 0.55s var(--ease-out-expo);
}
.plan:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.plan-featured {
  border-color: rgba(24, 67, 137, 0.14);
  box-shadow: 0 2px 6px rgba(16, 24, 32, 0.05), 0 26px 60px -22px rgba(10, 28, 60, 0.4);
  transform: translateY(-12px);
  background:
    radial-gradient(ellipse 120% 55% at 50% 0%, var(--blue-50), transparent 68%),
    var(--white);
}
.plan-featured:hover { transform: translateY(-16px); }
.plan-flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.66rem;
  font-weight: 640;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.36rem 0.95rem;
  border-radius: 980px;
  background: linear-gradient(120deg, var(--blue-700), var(--blue-500));
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(24, 67, 137, 0.8);
}

.plan-head { min-height: 6.5rem; }
.plan h3 {
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  font-weight: 640;
}
.plan .who { font-size: 0.9rem; color: var(--fg-muted); margin-top: 0.5rem; }

.plan-price {
  display: flex;
  align-items: flex-start;
  gap: 0.15rem;
  margin-top: 0.5rem;
  min-height: 4.25rem;
}
.plan-price .cur {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 0.55rem;
}
.plan-price .amt {
  font-size: 4rem;
  font-weight: 660;
  letter-spacing: -0.055em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: transform 0.4s var(--ease-out-expo), opacity 0.25s;
}
.plan-price.is-swapping .amt { transform: translateY(-10px); opacity: 0; }
.plan-price .custom {
  font-size: 2.5rem;
  font-weight: 660;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.plan .per { font-size: 0.85rem; color: var(--fg-muted); font-weight: 500; }
.plan .basis {
  font-size: 0.8rem;
  color: var(--fg-faint);
  margin: 1.35rem 0 1.6rem;
  min-height: 2.4em;
}
.plan .btn { width: 100%; }
.plan-feats {
  margin-top: 1.85rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.plan-feats li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.9rem; }
.plan-feats svg { width: 15px; height: 15px; color: var(--blue-700); flex-shrink: 0; margin-top: 3px; }
.plan-feats .muted { color: var(--fg-faint); }
.plan-feats .muted svg { color: var(--slate-300); }
.plan-feats .grp {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: 0.4rem;
}

.price-note {
  margin-top: 3rem;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--slate-200);
  font-size: 0.885rem;
  color: var(--slate-500);
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}
.price-note svg { color: var(--blue-700); flex-shrink: 0; margin-top: 2px; }

/* --------------------------------------------------------------------------
   18. FAQ — the datalink exchange
   -------------------------------------------------------------------------- */
.comms {
  border-radius: var(--radius-xl);
  background: var(--white);
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Panel head: carrier lamp, station label, signal bars */
.comms-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--slate-50);
}
.comms-lamp {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(21, 146, 107, 0.16);
  animation: blink 3s ease-in-out infinite;
}
.comms-head .readout { color: var(--fg-faint); }
.comms-signal { margin-left: auto; display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.comms-signal i {
  width: 3px;
  border-radius: 1px;
  background: var(--slate-300);
  display: block;
}
.comms-signal i:nth-child(1) { height: 30%; background: var(--blue-600); }
.comms-signal i:nth-child(2) { height: 55%; background: var(--blue-600); }
.comms-signal i:nth-child(3) { height: 78%; background: var(--blue-600); }
.comms-signal i:nth-child(4) { height: 100%; }

.comms-log {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.qa { display: flex; flex-direction: column; gap: 0.85rem; }

.msg { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; max-width: 88%; }
.msg-out { align-self: flex-end; align-items: flex-end; }
.msg-in { align-self: flex-start; align-items: flex-start; }

.msg .who {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  padding-inline: 0.35rem;
}
.msg .who .mark {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  display: block;
}

.msg .bubble {
  display: block;
  padding: 0.95rem 1.2rem;
  border-radius: 18px;
  font-size: 1rem;
  line-height: 1.55;
}
.msg-out .bubble {
  background: linear-gradient(150deg, var(--blue-700), var(--blue-600));
  color: #fff;
  border-bottom-right-radius: 6px;
  font-weight: 520;
  letter-spacing: -0.012em;
  box-shadow: 0 8px 22px -12px rgba(24, 67, 137, 0.9);
}
.msg-in .bubble {
  position: relative;
  background: var(--slate-50);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 6px;
  color: var(--fg-muted);
}
.msg-in .answer p { font-size: 0.975rem; }
.msg-in .answer p + p { margin-top: 0.85rem; }

/* Thinking dots. Absolutely placed so the answer keeps its space and the
   page never reflows while somebody is reading further down. */
.thinking {
  position: absolute;
  top: 1.15rem;
  left: 1.2rem;
  display: flex;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
}
.thinking i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--slate-300);
  display: block;
}

/* The exchange plays once, when it reaches the reader. Gated on `.js` so the
   whole conversation is simply present when the script never runs. */
.js .qa .msg-out,
.js .qa .answer { opacity: 0; }
.js .qa .msg-out { transform: translateY(14px); }

.js .qa.in .msg-out {
  animation: msg-send 0.65s var(--ease-out-expo) both;
}
.js .qa.in .thinking {
  animation: thinking-show 1.15s 0.42s both;
}
.js .qa.in .thinking i { animation: thinking-bounce 1.05s ease-in-out infinite; }
.js .qa.in .thinking i:nth-child(2) { animation-delay: 0.14s; }
.js .qa.in .thinking i:nth-child(3) { animation-delay: 0.28s; }
.js .qa.in .answer {
  animation: msg-recv 0.6s 1.4s var(--ease-out-expo) both;
}

@keyframes msg-send {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes msg-recv {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes thinking-show {
  0%   { opacity: 0; }
  14%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes thinking-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   19. Contact — final approach
   -------------------------------------------------------------------------- */
.contact {
  position: relative;
  background:
    radial-gradient(ellipse 90% 55% at 50% 100%, rgba(255, 157, 92, 0.18), transparent 66%),
    linear-gradient(180deg, var(--alt-void) 0%, var(--alt-night) 45%, var(--alt-deep) 100%);
  color: #fff;
  overflow: hidden;
}
/* Approach lighting — a ladder of lights running up to the form */
.approach {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(900px, 96vw);
  height: 46%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 3.2vh;
  mask-image: linear-gradient(0deg, #000, transparent 88%);
  -webkit-mask-image: linear-gradient(0deg, #000, transparent 88%);
}
.approach i {
  display: block;
  height: 3px;
  border-radius: 3px;
  background: var(--dawn-2);
  box-shadow: 0 0 14px 2px rgba(255, 207, 148, 0.7);
  opacity: 0.22;
  animation: approach-run 2.6s linear infinite;
}
.approach i:nth-child(1) { width: 190px; animation-delay: 0s; }
.approach i:nth-child(2) { width: 160px; animation-delay: 0.16s; }
.approach i:nth-child(3) { width: 132px; animation-delay: 0.32s; }
.approach i:nth-child(4) { width: 108px; animation-delay: 0.48s; }
.approach i:nth-child(5) { width: 86px;  animation-delay: 0.64s; }
.approach i:nth-child(6) { width: 66px;  animation-delay: 0.8s; }
.approach i:nth-child(7) { width: 48px;  animation-delay: 0.96s; }
@keyframes approach-run {
  0%, 70%, 100% { opacity: 0.2; }
  12%           { opacity: 1; }
}

/* Only the content column is lifted above the scenery. A blanket `> *` would
   also catch .approach and knock it out of its absolute placement. */
.contact > .wrap { position: relative; z-index: 2; }
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact-aside h2 { margin-bottom: 1.2rem; }
.contact-aside .lede { color: rgba(255, 255, 255, 0.65); }
.contact-points { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.contact-points li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.05rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-points li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.contact-points .ic {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  display: grid; place-items: center;
  color: var(--blue-300);
  flex-shrink: 0;
}
.contact-points b { display: block; font-size: 0.96rem; font-weight: 580; }
.contact-points span { font-size: 0.88rem; color: rgba(255, 255, 255, 0.55); }

.form-card {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 3.2vw, 2.6rem);
  box-shadow: var(--shadow-xl);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.1rem;
}
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-size: 0.78rem;
  font-weight: 570;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.field label .req { color: var(--blue-300); }
/* Text-like controls only. Checkboxes and radios must be excluded: this rule
   sets appearance:none, which strips the native tick and makes accent-color
   inert, so a checkbox would show no change at all when ticked. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  padding: 0.75rem 0.95rem;
  color: #fff;
  font-size: 0.95rem;
  width: 100%;
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 104px; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(255, 255, 255, 0.32); }
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-400);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(78, 144, 245, 0.2);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.5)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}
.field select option { background: var(--alt-deep); color: #fff; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #ef7b72; box-shadow: 0 0 0 3px rgba(239, 123, 114, 0.16); }
.field .err { font-size: 0.76rem; color: #ef9b94; display: none; }
.field.has-error .err { display: block; }

/* Multiple-choice group — an organisation can hold several approvals at once. */
.checkgroup {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;      /* a fieldset defaults to min-content and breaks the grid */
}
.checkgroup legend {
  padding: 0;
  font-size: 0.78rem;
  font-weight: 570;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.55rem;
}
.checkgroup .hint-inline {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.38);
  margin-left: 0.35rem;
}
.checkgroup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.4rem;
}
.checkpill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.3s var(--ease-out-expo);
}
.checkpill:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}
.checkpill input {
  /* Native rendering, so the tick and accent-color both work. */
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--blue-400);
  cursor: pointer;
}
.checkpill:has(input:checked) {
  background: rgba(78, 144, 245, 0.18);
  border-color: var(--blue-400);
  color: #fff;
}
.checkpill input:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }

.consent {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin-top: 0.25rem;
}
.consent input[type="checkbox"] {
  width: 17px; height: 17px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--blue-500);
  cursor: pointer;
}
.consent label { font-size: 0.82rem; color: rgba(255, 255, 255, 0.58); line-height: 1.5; }
.consent a { color: var(--blue-300); text-decoration: underline; text-underline-offset: 2px; }

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}
.form-actions .btn { min-width: 190px; }
.form-actions .note { font-size: 0.79rem; color: rgba(255, 255, 255, 0.42); }

.btn[data-loading="true"] { pointer-events: none; opacity: 0.72; }
.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}
.btn[data-loading="true"] .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-result {
  display: none;
  text-align: center;
  padding: 1.5rem 0.5rem;
}
.form-result.is-shown { display: block; animation: panel-in 0.6s var(--ease-out-expo); }
.form-result .tick {
  width: 58px; height: 58px;
  margin: 0 auto 1.3rem;
  border-radius: 50%;
  background: rgba(21, 146, 107, 0.15);
  border: 1px solid rgba(21, 146, 107, 0.35);
  display: grid; place-items: center;
  color: #4ade9f;
}
.form-result h3 { font-size: 1.38rem; letter-spacing: -0.024em; margin-bottom: 0.55rem; }
.form-result p { color: rgba(255, 255, 255, 0.6); font-size: 0.95rem; max-width: 44ch; margin-inline: auto; }
.form-result.is-error .tick {
  background: rgba(192, 57, 47, 0.15);
  border-color: rgba(192, 57, 47, 0.4);
  color: #ef9b94;
}

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--alt-void);
  color: rgba(255, 255, 255, 0.6);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem;
  font-size: 0.9rem;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140, 186, 255, 0.35), transparent);
}

/* Winglet — the view from the window seat, closing the flight */
.footer-wing {
  position: absolute;
  left: -2%;
  bottom: -8%;
  width: min(620px, 58%);
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}
.footer-wing .wing-body { fill: #0b131f; }
.footer-wing .wing-edge {
  fill: none;
  stroke: rgba(140, 186, 255, 0.4);
  stroke-width: 1.2;
}
.footer-wing .wing-light {
  fill: var(--dawn-2);
  filter: drop-shadow(0 0 6px rgba(255, 207, 148, 0.9));
  animation: blink 3.4s ease-in-out infinite;
}
.footer .wrap { position: relative; z-index: 1; }
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.footer-brand img { height: 22px; width: auto; margin-bottom: 1.15rem; }
.footer-brand p { font-size: 0.875rem; color: rgba(255, 255, 255, 0.45); max-width: 34ch; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.15rem;
}
.footer-col li { margin-bottom: 0.65rem; }
.footer-col a {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s, padding-left 0.3s var(--ease);
}
.footer-col a:hover { color: #fff; padding-left: 3px; }
.footer-bot {
  padding-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.38);
}
.footer-bot .legal { margin-left: auto; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-bot a:hover { color: rgba(255, 255, 255, 0.7); }

/* --------------------------------------------------------------------------
   21. Motion system
   Reveals are only armed once JS is confirmed running — see the flag script in
   <head>. No JS, a script error or a blocked file all leave the page visible.
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.9s var(--ease-out-expo),
    transform 0.9s var(--ease-out-expo),
    filter 0.9s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal.in { opacity: 1; transform: none; filter: none; }

/* Variants — same trigger, different entrance */
.js .reveal-scale { transform: translateY(24px) scale(0.94); }
.js .reveal-left { transform: translateX(-34px); }
.js .reveal-right { transform: translateX(34px); }

/* Fixed delays, for pairs that should not be index-driven */
.reveal-d1 { transition-delay: 0.09s; }
.reveal-d2 { transition-delay: 0.18s; }
.reveal-d3 { transition-delay: 0.27s; }
.reveal-d4 { transition-delay: 0.36s; }

/* Per-word headline entrance. Each word carries its own mask, so a word on the
   second line rises out of its own line box rather than across the one above.
   Split at runtime by wingcert.js, and never while the inline editor is on —
   that writes innerText and would eat the spans. */
.js .sw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Room for descenders, taken back so the line box is unchanged. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.js .swi {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 1.05s var(--ease-out-expo), opacity 0.6s var(--ease);
  transition-delay: calc(var(--w, 0) * 45ms + var(--wd, 0ms));
}
.js .is-split.in .swi { transform: none; opacity: 1; }

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */
/* The pinned stage has exactly one screen to fit a heading, the route, a step
   and the meter into. On a short screen it tightens rather than squeezing the
   route down to a line. */
@media (max-height: 820px) {
  /* A unit taller than the viewport cannot pin: its keys would sit below the
     fold with no way to scroll down to them. Let it scroll normally instead. */
  .deck-stage { position: static; }

  .thread-stage { padding-block: calc(var(--nav-h) + 0.5rem) 1.5rem; }
  .thread-intro .h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
  .thread-intro .lede { font-size: 0.95rem; margin-top: 0.7rem; }
  .route { min-height: 150px; }
  .thread-steps { min-height: 10rem; margin-top: 1rem; }
  .thread-step .dot { width: 44px; height: 44px; margin-bottom: 0.85rem; border-radius: 13px; }
  .thread-step .num { margin-bottom: 0.5rem; }
  .thread-step h3 { font-size: clamp(1.4rem, 2.8vw, 2.1rem); }
  .thread-step p { font-size: 0.98rem; margin-top: 0.55rem; }
}

@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .tab-caption { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .split { grid-template-columns: 1fr; }
  .split-visual { order: -1; }
  .contact-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .plan-featured { transform: none; }
  .plan-featured:hover { transform: translateY(-3px); }
  .tile-span-3, .tile-span-2, .tile-span-4 { grid-column: span 6; }
  .app { grid-template-columns: 1fr; min-height: 0; }
  .app-side { display: none; }
  .panel-row { grid-template-columns: 1fr; }
  .deck-stage { position: static; }

  /* The mockup tables are denser than a phone is wide. Let them scroll
     sideways rather than being silently clipped by .app-main. */
  .app-main { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .panel { overflow-x: auto; }
  .tbl { min-width: 620px; }
}

/* Below this width the pinned flight plan has nowhere to go, so the section
   falls back to a plain vertical list of the same steps. */
@media (max-width: 860px) {
  .thread-sec { padding-block: var(--section-y); }
  .thread-track { height: auto; }
  .thread-stage { position: static; height: auto; display: block; padding-block: 0; }
  .route, .thread-steps, .thread-meter { display: none; }
  .thread-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 2.75rem;
    position: relative;
    z-index: 2;
  }
  .thread-list li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.15rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .thread-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .thread-list .dot {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    flex-shrink: 0;
  }
  .thread-list h3 { font-size: 1.02rem; font-weight: 620; letter-spacing: -0.015em; }
  .thread-list p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.55); margin-top: 0.2rem; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-bot .legal { margin-left: 0; width: 100%; gap: 1rem; }
  .hero-shot-inner { --shot-rx: 10deg; }
  .tab-caption { grid-template-columns: 1fr; gap: 1.5rem; }
  .app-main { padding: 0.9rem 1rem 1.2rem; }
  .adi { width: 130%; opacity: 0.28; }
  .radar { right: -40%; opacity: 0.3; }
}

@media (max-width: 560px) {
  /* Three keys side by side leaves about ninety pixels each, which wraps every
     label onto three lines. One per row reads properly. */
  .deck-keys { grid-auto-flow: row; gap: 7px; }
  .deck-keys .tab { flex-direction: row; align-items: baseline; gap: 0.7rem; }
  .deck-keys .tab::before { display: none; }
}

@media (max-width: 460px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .btn-row .btn { width: 100%; }
  .hero-note { gap: 0.9rem 1.25rem; }
}

/* --------------------------------------------------------------------------
   23. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Matched with the same `.js` prefix the hidden states use, otherwise these
     lose on specificity and the content stays invisible until JS reveals it. */
  .js .reveal { opacity: 1; transform: none; filter: none; }
  .js .swi { transform: none; opacity: 1; }

  /* The exchange is just a conversation, printed. Shortening the animations is
     not enough here — their delays would still hold each answer back. */
  .js .qa .msg-out,
  .js .qa .answer {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .thinking { display: none; }
  .hero-shot-inner { transform: none; }
  .tablet { transform: none; }
  .deck-unit { transform: none; }
  .reg-fill { width: var(--w); }
  .gantt-track i, .mini-bars i { transform: scaleX(1) scaleY(1); }
  .aurora, .stars, .radar b, .approach i, .crosser, .cloud-deck i,
  .footer-wing .wing-light { animation: none; }

  /* A pinned stage that cannot animate is just a tall empty section, so the
     flight plan reverts to the same list the narrow layout uses. */
  .thread-sec { padding-block: var(--section-y); }
  .thread-track { height: auto; }
  .thread-stage { position: static; height: auto; display: block; padding-block: 0; }
  .route, .thread-steps, .thread-meter { display: none; }
  .thread-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 2.75rem;
    position: relative;
    z-index: 2;
  }
  .thread-list li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.15rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .thread-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .thread-list .dot {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    flex-shrink: 0;
  }
  .thread-list h3 { font-size: 1.02rem; font-weight: 620; }
  .thread-list p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.55); margin-top: 0.2rem; }
}

@media print {
  .nav, .hero-shot, .deck, .contact, .thread-sec { display: none; }
  body { color: #000; background: #fff; }
}