/* ============================================================
   VPT v2 Design System
   Virtual Performance Tool — site-v2/assets/css/vpt-v2.css
   ============================================================ */

/* ─── 1. Design Tokens ──────────────────────────────────────── */
:root {
  --bg-base: #0b1220;
  --bg-panel: #111a2b;
  --bg-surface: #172035;
  --border: rgba(255, 255, 255, 0.08);
  --border-bright: rgba(255, 255, 255, 0.15);
  --text-primary: #e6ecf5;
  --text-muted: #8a95ab;
  --text-faint: rgba(230, 236, 245, 0.55);
  --cyan: #4fd1e0;
  --cyan-dim: rgba(79, 209, 224, 0.15);
  --cyan-glow: rgba(79, 209, 224, 0.35);
  --amber: #f0b26b;
  --amber-dim: rgba(240, 178, 107, 0.15);
  --green: #10b981;
  --green-dim: rgba(16, 185, 129, 0.15);
  --red: #91162b;
  --white: #ffffff;
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow-cyan: 0 0 32px rgba(79, 209, 224, 0.2);
  --transition: 220ms ease;
}

/* ─── 2. Reset & Base ───────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}

/* Shared anchor offset: the fixed header is 60px tall, so any element opened
   through an in-page link or the URL hash clears it with some breathing room.
   Page-specific rules (e.g. the Performance in-page navigation) override it. */
[id] {
  scroll-margin-top: 5.5rem;
}

/* Keyboard shortcut past the navigation; only visible while focused. */
.skip-link {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 10000;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  background: var(--cyan);
  color: #06222a;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}
.skip-link:focus {
  top: 0.75rem;
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
#main:focus {
  outline: none;
}

/* ─── 2b. Scrollbars ─────────────────────────────────────────
   Thin, rounded, VPT-cyan thumb on a transparent track. The thumb is a
   soft cyan gradient at rest, brightens with a faint glow on hover and
   turns solid while dragging. The transparent border insets it from the
   edge so it reads as a slim pill inside a 10px gutter. */
@supports selector(::-webkit-scrollbar) {
  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  *::-webkit-scrollbar-track,
  *::-webkit-scrollbar-corner {
    background: transparent;
  }
  *::-webkit-scrollbar-thumb {
    background: linear-gradient(
      180deg,
      rgba(79, 209, 224, 0.55),
      rgba(47, 163, 179, 0.4)
    );
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 99px;
    min-height: 40px;
  }
  *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #6ee7f2, var(--cyan));
    background-clip: padding-box;
    box-shadow: 0 0 8px var(--cyan-glow);
  }
  *::-webkit-scrollbar-thumb:active {
    background: var(--cyan);
    background-clip: padding-box;
  }
}
/* Firefox (no pseudo-element scrollbars): standard properties. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(79, 209, 224, 0.55) transparent;
  }
}
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: var(--cyan);
  text-decoration: none;
  transition: color var(--transition);
}
@media (hover: hover) {
a:hover {
  color: var(--white);
}
}

/* ─── 3. Typography Scale ───────────────────────────────────── */
.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-weight: 500;
  display: block;
}
h1 {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 600;
  line-height: 1.3;
}
.lead {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 60ch;
}
.mono {
  font-family: var(--font-mono);
  font-size: 0.85em;
}
.text-muted {
  color: var(--text-muted);
}

/* ─── 4. Layout ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}
section {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

/* ─── 5. Navigation ─────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(11, 18, 32, 0.85);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  height: 60px;
  display: flex;
  align-items: center;
}
.nav-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  flex-shrink: 0;
}
@media (hover: hover) {
.nav-logo:hover {
  color: var(--text-primary);
}
}
/* The icon SVG is a 600x600 canvas with the mark filling ~61% x 56% of it.
   --nav-icon is the canvas size; negative margins collapse the empty canvas
   so layout (and the 60px header) only sees the mark itself. Margins are
   whole pixels per size so the vector is never drawn at a fractional offset
   (which makes edges look soft). */
.nav-logo img {
  --nav-icon: 64px;
  --nav-icon-margin: -15px -11px -13px -14px;
  flex-shrink: 0;
  width: var(--nav-icon);
  height: var(--nav-icon);
  margin: var(--nav-icon-margin);
}
/* Narrow desktops/landscape tablets (just above the mobile breakpoint): the
   full nav row is tight, so the lockup eases back a little and the gaps
   tighten, rather than pushing "Open VPT Web" / "Legacy Access" off-screen. */
@media (min-width: 861px) and (max-width: 1000px) {
  .nav-inner {
    gap: 1rem;
  }
  .nav-logo {
    font-size: 1.02rem;
    gap: 0.55rem;
  }
  .nav-logo img {
    --nav-icon: 54px;
    --nav-icon-margin: -13px -9px -11px -12px;
  }
  .nav-links a,
  .nav-dropdown-toggle {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .nav-cta {
    margin-left: 0.5rem;
  }
}
/* Tablet/mobile: scale the lockup back so it can't eat the header width. */
@media (max-width: 860px) {
  .nav-logo {
    font-size: 1.05rem;
    gap: 0.6rem;
  }
  .nav-logo img {
    --nav-icon: 56px;
    --nav-icon-margin: -13px -10px -11px -12px;
  }
}
@media (max-width: 400px) {
  .nav-logo {
    font-size: 0.95rem;
    gap: 0.5rem;
  }
  .nav-logo img {
    --nav-icon: 48px;
    --nav-icon-margin: -12px -8px -10px -11px;
  }
}
.nav-collapse {
  display: contents;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin-left: auto;
}
.nav-links > li {
  position: relative;
}
.nav-links a,
.nav-dropdown-toggle {
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  transition:
    color var(--transition),
    background var(--transition);
}
@media (hover: hover) {
.nav-links a:hover,
.nav-dropdown-toggle:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}
}
.nav-links a.active {
  color: var(--cyan);
}
/* Features dropdown */
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}
.nav-caret {
  font-size: 0.65rem;
  transition: transform var(--transition);
}
.nav-dropdown-toggle[aria-expanded="true"] .nav-caret {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  list-style: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 200px;
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--transition),
    transform var(--transition),
    visibility var(--transition);
  z-index: var(--z-nav, 100);
}
@media (hover: hover) {
/* Opened by JS only (hover on desktop, click/tap everywhere). The old
   :hover / :focus-within rules kept the menu open after a click-to-close. */
.nav-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
}
/* Bridges the gap between the toggle and the menu so moving the pointer
   down to it doesn't count as leaving the dropdown. */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -0.6rem;
  left: 0;
  right: 0;
  height: 0.6rem;
}
.nav-dropdown-menu a {
  display: block;
  padding: 0.55rem 0.75rem;
  width: 100%;
}
.nav-cta {
  margin-left: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Legacy access stays findable but quiet, so VPT Web is the clear primary action. */
.nav-legacy-link {
  padding: 0.25rem 0.4rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.nav-legacy-link:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
}

@media (hover: hover) {
.nav-legacy-link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}
@media (max-width: 860px) {
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    /* The glyph's right edge lines up with the page margin, not the button's. */
    margin-right: -0.75rem;
  }
  .nav-toggle i {
    display: block;
    font-size: 1.4rem;
    line-height: 1;
  }
  .nav-collapse {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    padding: 1rem;
    flex-direction: column;
    gap: 0.5rem;
    z-index: var(--z-sticky, 50);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .nav-collapse.open {
    display: flex;
  }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    width: 100%;
    gap: 0.25rem;
  }
  .nav-links > li {
    width: 100%;
  }
  .nav-links a {
    display: block;
    width: 100%;
    padding: 0.7rem 0.75rem;
  }
  /* Dropdown becomes an inline accordion on mobile */
  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0.7rem 0.75rem;
  }
  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 0.75rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }
  .nav-dropdown-menu.open {
    max-height: 340px;
  }
  .nav-dropdown:focus-within .nav-dropdown-menu:not(.open) {
    max-height: 0;
  }

  @media (hover: hover) {
.nav-dropdown:hover .nav-dropdown-menu:not(.open) {
    max-height: 0;
  }
}
  .nav-cta {
    flex-direction: column;
    width: 100%;
    margin-left: 0;
    margin-top: 0.5rem;
  }
  .nav-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ─── 6. Button System ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  /* Centre the label when a button is stretched wider than its content
     (full-width and grid-stretched buttons). */
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.btn-primary {
  background: var(--cyan);
  color: #0b1220;
}
@media (hover: hover) {
.btn-primary:hover {
  background: #6ee7f2;
  color: #0b1220;
  box-shadow: var(--shadow-glow-cyan);
  transform: translateY(-1px);
}
}
.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-bright);
}
@media (hover: hover) {
.btn-secondary:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: var(--cyan-dim);
}
}
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
@media (hover: hover) {
.btn-ghost:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  background: var(--cyan-dim);
}
}
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}
.btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;
  border-radius: var(--radius-lg);
}
.btn-amber {
  background: var(--amber);
  color: #1a0d00;
}
@media (hover: hover) {
.btn-amber:hover {
  background: #f5c487;
  transform: translateY(-1px);
}
}

/* ─── 7. Card System ────────────────────────────────────────── */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}
@media (hover: hover) {
.card:hover {
  border-color: var(--border-bright);
  box-shadow: var(--shadow-card);
}
}
.card-glass {
  background: rgba(17, 26, 43, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.card-cyan-border {
  border-color: var(--cyan-dim);
}
@media (hover: hover) {
.card-cyan-border:hover {
  border-color: var(--cyan);
  box-shadow: var(--shadow-glow-cyan);
}
}
/* Lets a .card be an <a> (e.g. update/announcement cards linking to their
   article page) without looking or behaving like a text link. */
.card-link-reset {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* ─── 8. Divider ────────────────────────────────────────────── */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--border-bright),
    transparent
  );
  margin: 0;
}

/* ─── 9. Stat / Data Display ────────────────────────────────── */
.stat-value {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1;
}
.stat-value .accent {
  color: var(--cyan);
}
.stat-label {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* ─── 10. Hero Grid Background ──────────────────────────────── */
.hero-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-grid-bg::before {
  content: "";
  position: absolute;
  inset: -50%;
  background-image:
    linear-gradient(rgba(79, 209, 224, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 209, 224, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: grid-drift 30s linear infinite;
}
.hero-grid-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 60% 50%,
    rgba(79, 209, 224, 0.06) 0%,
    transparent 70%
  );
}
@keyframes grid-drift {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(60px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-grid-bg::before {
    animation: none;
  }
}

/* ─── 11. Glass Panel ───────────────────────────────────────── */
.glass-panel {
  background: rgba(23, 32, 53, 0.6);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}

/* ─── 12. Badge / Pill ──────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.badge-cyan {
  background: var(--cyan-dim);
  color: var(--cyan);
  border: 1px solid rgba(79, 209, 224, 0.25);
}
.badge-amber {
  background: var(--amber-dim);
  color: var(--amber);
  border: 1px solid rgba(240, 178, 107, 0.25);
}
.badge-green {
  background: var(--green-dim);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.badge-live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* ─── 12b. Announcement "NEW" indicator (nav badge + updates tags) ──── */
.nav-badge-new {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 99px;
  background: var(--cyan-dim);
  color: var(--cyan);
  border: 1px solid rgba(79, 209, 224, 0.3);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
  vertical-align: middle;
}
.update-new-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.4rem;
  border-radius: 99px;
  background: var(--cyan-dim);
  color: var(--cyan);
  border: 1px solid rgba(79, 209, 224, 0.3);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ─── 13. Trust Strip ───────────────────────────────────────── */
.trust-strip {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
  justify-content: center;
  min-height: 28px;
}
.trust-strip-logo {
  opacity: 0.72;
  transition: opacity var(--transition);
  filter: grayscale(1) brightness(2);
  height: 28px;
  width: auto;
}
@media (hover: hover) {
.trust-strip-logo:hover {
  opacity: 0.95;
  filter: grayscale(0.2) brightness(1.2);
}
}

/* ─── 14. Fade-up Animation ─────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: none;
}

/* ─── 15. Footer ────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
.footer-brand-desc {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: 0.75rem 0 1.25rem;
  line-height: 1.6;
  max-width: 30ch;
}
.footer-heading {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
  display: block;
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-links a {
  color: var(--text-muted);
  font-size: 0.875rem;
  transition: color var(--transition);
}
@media (hover: hover) {
.footer-links a:hover {
  color: var(--text-primary);
}
}
.footer-links--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.footer-socials {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.footer-social-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  transition: all var(--transition);
  text-decoration: none;
}
@media (hover: hover) {
.footer-social-btn:hover {
  background: var(--cyan-dim);
  color: var(--cyan);
  border-color: rgba(79, 209, 224, 0.3);
}
}
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom-text {
  color: var(--text-faint);
  font-size: 0.78rem;
}
.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}
.footer-bottom-links a {
  color: var(--text-faint);
  font-size: 0.78rem;
  transition: color var(--transition);
}
@media (hover: hover) {
.footer-bottom-links a:hover {
  color: var(--text-muted);
}
}

/* ─── 16. App Badges ────────────────────────────────────────── */
.app-badges {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}
.app-badge-link img {
  height: 40px;
  width: auto;
  opacity: 0.85;
  transition: opacity var(--transition);
}
@media (hover: hover) {
.app-badge-link:hover img {
  opacity: 1;
}
}

/* ─── 16b. App Platform Cards ───────────────────────────────── */
.app-platform-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.app-platform-card {
  flex: 1;
  min-width: 180px;
  max-width: 220px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-decoration: none;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}
@media (hover: hover) {
.app-platform-card:hover {
  border-color: var(--border-bright);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
}
}
.app-platform-card i {
  font-size: 2rem;
}
.app-platform-card .apc-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
}
.app-platform-card .apc-note {
  font-size: 0.72rem;
  color: var(--text-faint);
}
/* Footer compact variant */
.app-platform-row--footer {
  flex-direction: column;
  gap: 0.5rem;
  justify-content: flex-start;
  margin-top: 0.75rem;
}
.app-platform-row--footer .app-platform-card {
  flex: none;
  min-width: 0;
  max-width: none;
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0.55rem 0.85rem;
  gap: 0.6rem;
  border-radius: var(--radius-sm);
}
.app-platform-row--footer .app-platform-card i {
  font-size: 1.15rem;
  min-width: 1.15rem;
}
.app-platform-row--footer .app-platform-card .apc-name {
  font-size: 0.8rem;
}
.app-platform-row--footer .app-platform-card .apc-note {
  display: none;
}

/* ─── 17. Tier Colors ───────────────────────────────────────── */
.tier-lite {
  --tier-color: #64748b;
}
.tier-standard {
  --tier-color: #f59e0b;
}
.tier-pro {
  --tier-color: var(--red);
}

/* ─── 18. Responsive Utilities ──────────────────────────────── */
@media (max-width: 640px) {
  .hide-mobile {
    display: none;
  }
}
.text-center {
  text-align: center;
}
.mt-1 {
  margin-top: 0.5rem;
}
.mt-2 {
  margin-top: 1rem;
}
.mt-3 {
  margin-top: 1.5rem;
}
.mt-4 {
  margin-top: 2rem;
}
.mt-6 {
  margin-top: 3rem;
}
.mt-8 {
  margin-top: 4rem;
}
.mb-1 {
  margin-bottom: 0.5rem;
}
.mb-2 {
  margin-bottom: 1rem;
}
.mb-3 {
  margin-bottom: 1.5rem;
}
.mb-4 {
  margin-bottom: 2rem;
}
.flex {
  display: flex;
}
.flex-center {
  display: flex;
  align-items: center;
}
.gap-1 {
  gap: 0.5rem;
}
.gap-2 {
  gap: 1rem;
}
.gap-3 {
  gap: 1.5rem;
}
.gap-4 {
  gap: 2rem;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.max-w-prose {
  max-width: 65ch;
}
.delay-1 {
  transition-delay: 0.15s;
}
.delay-2 {
  transition-delay: 0.3s;
}
.delay-3 {
  transition-delay: 0.45s;
}

/* ─── 19. Hero Section Layout ───────────────────────────────── */
.hero-section {
  position: relative;
  /* Content-driven by default (tablet/mobile): no viewport-height rule, so
     nothing clips with mobile browser chrome. */
  min-height: 0;
  display: flex;
  align-items: center;
  /* The global section padding added ~112px of dead space below the hero;
     .hero-layout already provides its own vertical padding. */
  padding: 64px 0 0;
  overflow: hidden;
}
/* Wide desktops: ~84vh instead of a full screen, so the first viewport also
   reveals the start of the Virtual Airlines strip. It is only a floor (min-
   height): on short screens the content sets the height and nothing is
   compressed or overlapped. */
@media (min-width: 901px) {
  .hero-section {
    min-height: clamp(560px, 84vh, 920px);
  }
}
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  width: 100%;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
}
.hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  z-index: 3;
}
.hero-accent {
  color: var(--cyan);
  font-style: normal;
}
.hero-cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.hero-proof {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
/* ─── 20. Hero Showcase (full-bleed screenshot + live EFB card) ─ */
.hero-bg-device {
  position: absolute;
  /* Oversized so the angled panel spills past every edge of the
     hero (clipped by .hero-section overflow:hidden) — gives the
     perspective tilt AND full coverage with no visible hard edges. */
  top: -25%;
  left: -12%;
  width: 124%;
  height: 150%;
  overflow: hidden;
  border: none;
  transform: perspective(1700px) rotateY(-9deg) rotateX(2deg) scale(1.04);
  transform-origin: 60% center;
  z-index: 1;
  pointer-events: none;
}
.hero-bg-device #hero-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Push the screenshot focal content to the right so the headline
     sits over near-solid navy, not over readable UI text. */
  object-position: 78% center;
  opacity: 0;
  transition: opacity 900ms ease;
  /* Visible but subdued: a mild brightness clamp (no blur, so the product
     screenshots stay sharp) keeps the headline readable. */
  filter: brightness(0.85) contrast(1) saturate(1.05);
  transform: scale(1.04);
}
.hero-slide.is-active {
  opacity: 1;
}
/* Light, uniform darkening veil so bright slides can't overpower the
   text — kept gentle to keep the screenshot legible. */
.hero-bg-device::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 13, 24, 0.15);
  z-index: 2;
  pointer-events: none;
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--bg-base) 28%,
    rgba(11, 18, 32, 0.85) 46%,
    rgba(11, 18, 32, 0.45) 66%,
    rgba(11, 18, 32, 0.18) 86%,
    rgba(11, 18, 32, 0.05) 100%
  );
  z-index: 2;
  pointer-events: none;
}
/* Top + bottom vignette so the screenshot edges fade out softly */
.hero-bg-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--bg-base) 0%,
    transparent 16%,
    transparent 80%,
    rgba(11, 18, 32, 0.85) 100%
  );
  pointer-events: none;
}
/* Glass glare: faint diagonal light streak, kept subtle so it never
   washes over the headline. */
.hero-bg-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    104deg,
    transparent 48%,
    rgba(255, 255, 255, 0.025) 56%,
    rgba(255, 255, 255, 0.05) 61%,
    rgba(255, 255, 255, 0.015) 66%,
    transparent 74%
  );
  pointer-events: none;
}
.hero-efb {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  width: 100%;
  padding: 1.1rem 1.2rem;
  background: rgba(13, 19, 33, 0.82);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  z-index: 4;
}
.hero-efb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.hero-efb-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-efb-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}
.hero-efb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  animation: efb-pulse 2.4s infinite;
  flex: none;
}
.hero-efb-dot.is-caution {
  background: var(--amber);
  animation: none;
}
.hero-efb-dot.is-error {
  background: #ef4444;
  animation: none;
}
@keyframes efb-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}
.hero-efb-status-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}
.hero-efb-updated {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
@media (max-width: 900px) {
  .hero-layout {
    grid-template-columns: 1fr;
  }
  .hero-content {
    max-width: 100%;
  }
  .hero-bg-device {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .hero-bg-overlay::after {
    display: none;
  }
  .hero-bg-overlay {
    background: linear-gradient(
      to bottom,
      rgba(11, 18, 32, 0.85) 0%,
      rgba(11, 18, 32, 0.6) 60%,
      rgba(11, 18, 32, 0.7) 100%
    );
  }
  .hero-efb {
    width: 100%;
    margin-top: 0.5rem;
  }
}

/* ─── 20b. EFB stat rows (shared) ───────────────────────────── */
/* Single-column list split into two subtle groups (Usage / Coverage) —
   hierarchy comes from the small group label + a hairline divider between
   groups, not a box per group or a border on every row. */
.hero-stats-grid {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}
.hero-stat-group {
  display: flex;
  flex-direction: column;
}
.hero-stat-group + .hero-stat-group {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.hero-stat-group-label {
  margin: 0 0 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.hero-device-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.3rem 0;
}
.hero-device-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.hero-device-value {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
@media (max-width: 360px) {
  .hero-device-label {
    white-space: normal;
  }
}

/* ─── 21. Trust Section ─────────────────────────────────────── */
.trust-section {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-note {
  color: var(--text-muted);
  font-size: 0.9rem;
}
/* Homepage: the strip directly follows the hero, so it reads as part of the
   first screen — less top spacing (about 20-30px) and a quieter divider. */
.hero-section + .trust-section {
  padding-top: clamp(1.25rem, 2.5vw, 2.25rem);
  border-top-color: rgba(255, 255, 255, 0.05);
}

/* ─── Performance data-flow diagram (homepage) ──────────────── */
.perf-flow {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* The engine is one continuous technical housing with three connected
   chambers — not three stacked cards — so data visibly flows through it. */
.perf-engine {
  position: relative;
  width: 100%;
  max-width: 900px;
  padding: 1.1rem 1.35rem 1.35rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow-cyan);
  overflow: hidden;
  animation: engine-breathe 4s ease-in-out infinite;
}
.perf-engine::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(79, 209, 224, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 209, 224, 0.05) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
}
.perf-engine-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68%;
  transform: translate(-50%, -50%);
  opacity: 0.05;
  pointer-events: none;
}
.perf-engine-label {
  position: relative;
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  padding-bottom: 0.75rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--border-bright);
}

/* Three connected chambers sharing one housing: DATA → CALCULATION CORE → RESULT. */
.perf-engine-chambers {
  position: relative;
  display: flex;
  align-items: stretch;
}
.perf-chamber {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem 0.9rem 0.95rem;
  background: rgba(5, 10, 20, 0.35);
  border: 1px solid var(--border-bright);
  border-radius: 10px;
}
.perf-chamber-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.perf-chamber-item {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--text-muted);
  padding-left: 0.6rem;
  border-left: 2px solid var(--border-bright);
}

/* Directional connector between chambers — the transformation made visible. */
.perf-chamber-connector {
  flex: none;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
}
.perf-chamber-connector i {
  color: var(--cyan);
  font-size: 0.7rem;
  opacity: 0.65;
}

/* Chamber 2 — the "brain": brighter cyan, processing traces, scan line. */
.perf-chamber--core {
  flex: 1.15 1 0;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(79, 209, 224, 0.1),
    rgba(79, 209, 224, 0.02)
  );
  border-color: rgba(79, 209, 224, 0.45);
  box-shadow: inset 0 0 20px rgba(79, 209, 224, 0.12);
}
.perf-chamber--core .perf-chamber-title {
  color: var(--cyan);
}
.perf-chamber--core .perf-chamber-title::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--cyan);
  animation: pulse-dot 2s ease-in-out infinite;
}
.perf-chamber--core .perf-chamber-item {
  border-left-color: rgba(79, 209, 224, 0.4);
}
.perf-chamber--core::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(79, 209, 224, 0.12) 0px,
    rgba(79, 209, 224, 0.12) 1px,
    transparent 1px,
    transparent 9px
  );
  pointer-events: none;
}
.perf-chamber--core::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(79, 209, 224, 0.22),
    transparent
  );
  animation: core-scan 3.2s linear infinite;
  pointer-events: none;
}

/* Chamber 3 — transitions toward green, the completed computed result. */
.perf-chamber--result {
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.1),
    rgba(16, 185, 129, 0.02)
  );
  border-color: rgba(16, 185, 129, 0.4);
}
.perf-chamber--result .perf-chamber-title {
  color: var(--green);
}
.perf-chamber--result .perf-chamber-item {
  border-left-color: rgba(16, 185, 129, 0.4);
}

@keyframes core-scan {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}
@keyframes engine-breathe {
  0%,
  100% {
    box-shadow: 0 0 24px rgba(79, 209, 224, 0.12);
  }
  50% {
    box-shadow: 0 0 32px rgba(79, 209, 224, 0.28);
  }
}
@media (prefers-reduced-motion: reduce) {
  .perf-engine,
  .perf-chamber--core::after,
  .perf-chamber--core .perf-chamber-title::after {
    animation: none;
  }
}
@media (max-width: 720px) {
  .perf-engine {
    max-width: 100%;
  }
  .perf-engine-chambers {
    flex-direction: column;
  }
  .perf-chamber-connector {
    width: auto;
    height: 1.25rem;
  }
  .perf-chamber-connector i {
    transform: rotate(90deg);
  }
}


/* ─── 22. Pillar Band ───────────────────────────────────────── */
.pillar-band {
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pillar-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--cyan-dim);
  border: 1px solid rgba(79, 209, 224, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--cyan);
  flex-shrink: 0;
}
/* Icon sits inline with the card title; on very narrow screens the icon
   is dropped so the title never has to fight it for space. */
.pillar-card h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
@media (max-width: 420px) {
  .pillar-card .pillar-icon {
    display: none;
  }
}
.pillar-card {
  display: flex;
  flex-direction: column;
}
.pillar-body {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-top: 0.75rem;
}
.pillar-link {
  margin-top: auto;
  padding-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cyan);
}
.pillar-link i {
  font-size: 0.75rem;
  transition: transform var(--transition);
}
@media (hover: hover) {
.pillar-link:hover i {
  transform: translateX(4px);
}
}

/* ─── 23. VPT 2.0 Section ───────────────────────────────────── */
.vpt2-section {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.vpt2-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 900px) {
  .vpt2-layout {
    grid-template-columns: 1fr;
  }
}
.vpt2-copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.vpt2-cta-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.vpt2-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vpt2-feature-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.vpt2-feature-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
}
.vpt2-feature-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ─── 24. Fleet Section ─────────────────────────────────────── */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 640px) {
  .fleet-grid {
    grid-template-columns: 1fr;
  }
}
.fleet-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fleet-card-img-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fleet-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
@media (hover: hover) {
.fleet-card:hover .fleet-card-img {
  transform: scale(1.04);
}
}
.fleet-card-img-wrap.img-error::after {
  content: "\2708";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  color: var(--text-faint);
  pointer-events: none;
}
.fleet-card-info {
  padding: 1.25rem 1.75rem 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fleet-variants {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.fleet-sim-badges {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.fleet-sim-badges .badge {
  font-size: 0.65rem;
  padding: 0.2rem 0.5rem;
}
.fleet-cta-row {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  justify-content: center;
}

/* Homepage "Explore VPT" cards — each destination page's own hero photo,
   heavily darkened, as a barely-visible background texture. */
.explore-card {
  background-size: cover;
  background-position: center;
}

/* Homepage "Latest activity" two columns — both CTA rows pinned to the
   bottom so they line up regardless of each column's content height. */
.activity-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.activity-col .updates-cta-row {
  margin-top: auto;
  padding-top: 1.5rem;
}
.airport-updates-fade {
  position: relative;
}
/* Only the list is clipped and faded; the "View all changes" link sits below
   it on its own line, so it never overlaps an entry. */
#home-airport-updates {
  position: relative;
  max-height: 290px;
  overflow: hidden;
}
#home-airport-updates > .card:last-child {
  opacity: 0.45;
}
#home-airport-updates::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 90px;
  background: linear-gradient(to bottom, transparent, var(--bg-base));
  pointer-events: none;
}
.airport-updates-fade-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cyan);
  text-decoration: none;
}
@media (hover: hover) {
.airport-updates-fade-link:hover {
  color: var(--text-primary);
}
}

/* Homepage "Behind VPT" — origin story + team photo row, above the two
   compact Sacha/Katia cards. ~55/45 split, collapses to a single column
   (story, then photo) on mobile. */
.team-story-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.team-story-row p + p {
  margin-top: 0.9rem;
}
.team-story-copy {
  max-width: 58ch;
}
.team-story-photo {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-bright);
  overflow: hidden;
}
.team-story-photo img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
}
@media (max-width: 640px) {
  .team-story-row {
    grid-template-columns: 1fr;
  }
  .team-story-photo {
    order: 2;
  }
}

/* ─── 25. Updates Section ───────────────────────────────────── */
/* Homepage "Latest VPT News" column (#home-updates-grid) — single live
   item now, so it should take the full width of its column. */
.updates-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.updates-cta-row {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  justify-content: center;
}

/* Homepage "Latest VPT News" featured card — compact, no badge. */
#home-updates-grid .news-card {
  padding: 1.25rem 1.5rem;
}
.news-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.news-headline {
  margin: 0.5rem 0 0;
}
.news-excerpt {
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ─── 26. Closing CTA Section ───────────────────────────────── */
.cta-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.cta-inner {
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 4rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.cta-btn-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.cta-app-note {
  font-size: 0.8125rem;
  color: var(--text-faint);
}
/* Reassurance line directly under the primary "Get started free" CTA:
   small, muted but readable, no badge/card. Centred by default (centred CTA
   groups); the homepage hero has a left-aligned CTA row, so it follows it. */
.cta-reassure {
  margin: 0.65rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
  color: var(--text-muted);
}
.hero-section .cta-reassure {
  text-align: left;
  /* The homepage hero copy column is a flex column with a 1.5rem gap;
     offset it so the line sits ~10px under the buttons. */
  margin-top: calc(0.65rem - 1.5rem);
}

/* ─── 27. Section Header ────────────────────────────────────── */
.section-header {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section-header.text-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ─── 28. Video Modal ───────────────────────────────────────── */
.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.video-modal.active {
  display: flex;
}
.video-modal-inner {
  position: relative;
  width: min(860px, 90vw);
  background: var(--bg-panel);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border);
}
.video-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 1.25rem;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  line-height: 1;
}
@media (hover: hover) {
.video-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
}
}
.video-modal-frame {
  aspect-ratio: 16/9;
  width: 100%;
}
.video-modal-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ─── Screen-reader only utility ────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── YouTube Modal ──────────────────────────────────────── */
#yt-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
#yt-modal[hidden] {
  display: none;
}
#yt-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 20, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
#yt-frame-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6);
}
#yt-embed {
  position: absolute;
  inset: 0;
}
#yt-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
#yt-close {
  position: absolute;
  top: -3rem;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-bright);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition);
}
@media (hover: hover) {
#yt-close:hover {
  background: rgba(255, 255, 255, 0.2);
}
}
@media (max-width: 600px) {
  #yt-close {
    top: -2.75rem;
  }
}

/* ============================================================
   28. Long-form content pages (Airport Intelligence,
   Calculation Core, EFB) — reusable canonical patterns
   ============================================================ */

/* Generic section rhythm */
.section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.section-tight {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.section-alt {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Decorative full-bleed section background image.
   Add .has-bg-img to the <section> and place a .section-bg-img div
   as the first child. The image fades in from the right, never
   overlapping the prose on the left. */
.has-bg-img {
  position: relative;
  overflow: hidden;
}
.section-bg-img {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.section-bg-img img {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 60%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.13;
  /* Fade left edge so the image dissolves into the section background
     before reaching the text column. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 30%,
    black 100%
  );
  mask-image: linear-gradient(to right, transparent 0%, black 30%, black 100%);
}
/* Ensure section content sits above the bg image */
.has-bg-img > .container {
  position: relative;
  z-index: 1;
}

/* Modifier: let the bg image span the full section width so nothing is
   cropped off — used when the image itself is the focal point, not just
   a right-edge accent. */
.section-bg-img-full img {
  width: 100%;
  height: 100%;
}

/* Modifier: let the image cover the whole section (not just the 60%
   right-edge accent), biased toward its right side where the subject sits. */
.section-bg-img-right img {
  width: 100%;
  height: 100%;
  object-position: right center;
}

/* Homepage "Everything you need..." intro — content is centered, not a
   left-text/right-image split, so fade both edges instead of just the left. */
.intro-bg-img img {
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 25%,
    black 75%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 25%,
    black 75%,
    transparent 100%
  );
}

/* Full-section background that dissolves into the page at the top and
   bottom, so busy photography never meets a section edge abruptly. */
.vertical-fade-bg-img img {
  opacity: 0.17;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 22%,
    black 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 22%,
    black 78%,
    transparent 100%
  );
}

/* Page sub-hero (below global nav) */
.page-hero {
  position: relative;
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.page-hero .hero-grid-bg {
  opacity: 0.6;
}

/* Hero banner photo — a wide performance-diagram/runway composite used as
   a faint full-bleed layer directly behind the hero copy. Faded uniformly
   (not masked away from the text) so it reads as a backdrop, with a dark
   scrim on top so the heading stays legible over any part of the image. */
.hero-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-banner-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 35%;
  opacity: 0.4;
}
.hero-banner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 18, 32, 0.55) 0%,
    rgba(11, 18, 32, 0.85) 55%,
    rgba(11, 18, 32, 0.97) 100%
  );
}
.page-hero-inner {
  position: relative;
  z-index: 1;
}
.page-hero .eyebrow,
.page-hero h1 {
  max-width: 780px;
}
.page-hero h1 {
  margin-top: 1rem;
}
.page-hero .lead {
  margin-top: 1.25rem;
  max-width: 640px;
}

/* Lede stat row: an instrument-style readout rather than a boxed panel.
   Hairline rules above and below, a short cyan datum tick at the start of
   each reading, values and mono labels left-aligned with the hero copy. */
.lede-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin-top: clamp(2rem, 5vw, 3rem);
  background: rgba(11, 18, 32, 0.5);
  border-top: 1px solid var(--border-bright);
  border-bottom: 1px solid var(--border);
}
.lede-stat {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 0;
  text-align: left;
}
.lede-stat + .lede-stat {
  padding-left: 1.25rem;
  border-left: 1px solid var(--border);
}
.lede-stat::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--cyan);
}
.lede-stat + .lede-stat::before {
  left: -1px;
}
.lede-stat-value {
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 3.6vw, 2.1rem);
  font-weight: 800;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}
.lede-stat-label {
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Hero actions sit under the (left-aligned) hero copy. */
.page-hero .cta-btn-row {
  justify-content: flex-start;
}
.page-hero .cta-reassure {
  text-align: left;
}
.lede-stats + .cta-btn-row {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
/* EFB hero: lighter crew-sync line, CTAs and a quiet platform row */
.page-hero .hero-sub {
  margin-top: 0.9rem;
  max-width: 640px;
  font-size: 0.95rem;
  color: var(--text-faint);
}
.hero-sub + .cta-btn-row {
  margin-top: clamp(1.75rem, 3.5vw, 2.25rem);
}
/* Platform availability: a small translucent plate under the CTAs so it
   stays readable over the photographic hero background. Hugs its content,
   centred, visually secondary to the buttons. */
.hero-platforms-block {
  width: fit-content;
  max-width: 100%;
  margin: clamp(1.25rem, 2.5vw, 1.5rem) auto 0;
  padding: 0.65rem 1.15rem;
  text-align: center;
  background: rgba(8, 18, 32, 0.7);
  border: 1px solid var(--border);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-platforms-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}
.hero-platforms {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.25rem;
  margin: 0.45rem 0 0;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
}
.hero-platforms li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.hero-platforms i {
  font-size: 0.95rem;
  color: #fff;
}

/* Article / prose narrative */
.prose {
  max-width: 720px;
}
.prose p {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 1.1rem;
}
.prose p strong,
.prose strong {
  color: var(--text-primary);
  font-weight: 600;
}
.prose ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.55rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}
/* Compact check items (icon + bold title + short description) */
.prose ul.check-list {
  margin: 0 0 1rem;
}
.prose ul.check-list li {
  padding-left: 1.6rem;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.prose ul.check-list li::before {
  display: none;
}
.prose ul.check-list li i {
  position: absolute;
  left: 0;
  top: 0.35em;
  font-size: 0.8rem;
  color: var(--cyan);
}
.prose ul.check-list li strong {
  margin-right: 0.25rem;
}
.prose ul.check-list code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--amber);
}
.section-head {
  max-width: 720px;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.section-head h2 {
  margin-top: 0.75rem;
}

/* Ties the five airport build-process sections into one visible pipeline
   (Airport Foundation → Runway Model → … → Continuous Maintenance) without
   a separate flowchart diagram. */
.pipeline-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.pipeline-stage-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border-bright);
  color: var(--cyan);
  font-weight: 700;
}

/* Inline stat figure (the scattered [NUMBER] callouts). Wraps the label
   below the number once the card is too narrow to fit both comfortably,
   rather than only at the page's mobile-stack breakpoint. */
.stat-figure {
  display: flex;
  flex-wrap: wrap;
  /* Last baseline: a two-line label grows upward, so its final line sits on
     the value's baseline instead of dropping below it. */
  align-items: last baseline;
  gap: 0.4rem 0.85rem;
  margin: 1.5rem 0 0.5rem;
  padding: 1.1rem 1.4rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-md);
  max-width: 720px;
}
.stat-figure-value {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  flex: none;
}
.stat-figure-label {
  flex: 1 1 200px;
  min-width: 200px;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.stat-figure.is-amber {
  border-left-color: var(--amber);
}
.stat-figure.is-amber .stat-figure-value {
  color: var(--amber);
}

/* Two stat figures side by side */
.stat-figure-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 720px;
}
.stat-figure-pair .stat-figure {
  margin: 1.25rem 0 0;
  max-width: none;
}
@media (max-width: 600px) {
  .stat-figure-pair {
    grid-template-columns: 1fr;
  }
}
/* Stacked: labels line up (shared value column), as in .stat-stack. */
@supports (grid-template-columns: subgrid) {
  @media (max-width: 600px) {
    .stat-figure-pair:not(.stat-figure-pair--aligned) {
      grid-template-columns: max-content minmax(0, 1fr);
      column-gap: 0;
      row-gap: 1rem;
    }
    .stat-figure-pair:not(.stat-figure-pair--aligned) .stat-figure {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      align-items: center;
      column-gap: 0.85rem;
    }
    .stat-figure-pair:not(.stat-figure-pair--aligned) .stat-figure-value {
      white-space: nowrap;
    }
    .stat-figure-pair:not(.stat-figure-pair--aligned) .stat-figure-label {
      flex: none;
      min-width: 0;
    }
  }
}
/* Pair whose cards share one internal layout. Side by side, each card flows
   naturally (value, then its label right beside it) so a short value leaves no
   empty gap. Stacked one above the other, the value column has a fixed width so
   the labels line up. */
.stat-figure-pair--aligned {
  --stat-value-size: clamp(1.6rem, 4vw, 2.4rem);
}
/* Two columns get too narrow below this width: the cards stack. */
@media (max-width: 780px) {
  .stat-figure-pair--aligned {
    grid-template-columns: 1fr;
  }
}
.stat-figure-pair--aligned .stat-figure {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 0.85rem;
}
.stat-figure-pair--aligned .stat-figure-value {
  font-size: var(--stat-value-size);
  white-space: nowrap;
}
.stat-figure-pair--aligned .stat-figure-label {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 780px) {
  .stat-figure-pair--aligned .stat-figure {
    display: grid;
    grid-template-columns: calc(var(--stat-value-size) * 4.6) minmax(0, 1fr);
    column-gap: 0.85rem;
  }
  .stat-figure-pair--aligned .stat-figure-label {
    flex: none;
  }
}

/* Text + stacked-stats layout for sections that pair explanatory prose with
   a couple of stat cards (closure detection, engine-failure procedures).
   The heading block spans the full width; the stats are then centred on the
   prose itself (not on heading + prose), so they sit level with the copy
   they describe. The left wrapper is "display: contents" so its children
   take part in this grid; the concluding note stays a separate full-width
   sibling below. */
.stats-note-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  column-gap: clamp(1.5rem, 4vw, 2.5rem);
  row-gap: 0;
  align-items: center;
}
.stats-note-layout > div:first-child {
  display: contents;
}
.stats-note-layout .pipeline-stage,
.stats-note-layout .section-head {
  grid-column: 1 / -1;
  justify-self: start;
  width: 100%;
}
.stats-note-layout .prose {
  grid-column: 1;
}
.stats-note-layout > .stat-stack {
  grid-column: 2;
}
.stat-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.stat-stack .stat-figure {
  margin: 0;
  max-width: none;
}
/* Two-column card grid: fixed-width value column, flexible label column,
   label vertically centred on the value (not baseline-aligned). */
.stat-stack--aligned {
  --stat-value-size: clamp(1.6rem, 4vw, 2.4rem);
}
.stat-stack--aligned .stat-figure {
  display: grid;
  grid-template-columns: calc(var(--stat-value-size) * 3.9) minmax(0, 1fr);
  align-items: center;
  column-gap: 0.85rem;
}
.stat-stack--aligned .stat-figure-value {
  font-size: var(--stat-value-size);
}
.stat-stack--aligned .stat-figure-label {
  flex: none;
  min-width: 0;
}
/* The cards in a stack sit one above another, so their labels start at the
   same x whatever the width of each value: the cards share one two-column
   track (value column as wide as the widest value) through a subgrid. Without
   subgrid support the rules above apply. */
@supports (grid-template-columns: subgrid) {
  .stat-stack {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 0;
    row-gap: 1.25rem;
  }
  .stat-stack .stat-figure {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    column-gap: 0.85rem;
  }
  .stat-stack .stat-figure-value {
    font-size: var(--stat-value-size, clamp(1.6rem, 4vw, 2.4rem));
    white-space: nowrap;
  }
  .stat-stack .stat-figure-label {
    flex: none;
    min-width: 0;
  }
}
/* iPad portrait and below: prose and its stat cards stack (a 2fr column is
   too narrow for a value plus a three-line label). */
@media (max-width: 900px) {
  .stats-note-layout {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }
  .stats-note-layout .prose,
  .stats-note-layout > .stat-stack {
    grid-column: 1;
  }
  /* Two-column text + figure blocks stack earlier than the generic grid, so a
     figure is never squeezed into a narrow second column. */
  .grid-2.stack-tablet {
    grid-template-columns: minmax(0, 1fr);
  }
}
.stat-figure-label {
  overflow-wrap: break-word;
}

/* Free-airports discovery trigger, integrated below the map legend. */
.map-free-airports {
  margin-top: 0.85rem;
  text-align: center;
}
.map-free-airports-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0.4rem 0.2rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cyan);
  cursor: pointer;
  transition: color var(--transition);
}
@media (hover: hover) {
.map-free-airports-toggle:hover {
  color: var(--text-primary);
}
}
.map-free-airports-toggle .fa-chevron-down {
  font-size: 0.7rem;
  transition: transform var(--transition);
}
.map-free-airports-toggle[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

/* Compact card grid for the 16 free demo airports (airports.html). */
.free-airports-panel {
  margin-top: 1.25rem;
}
.free-airports-panel[hidden] {
  display: none;
}
.free-airports-intro {
  max-width: 760px;
  margin: 0 auto 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  text-align: left;
}
.free-airport-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}
.free-airport-card {
  padding: 1rem 1.25rem;
}
.free-airport-card .badge {
  margin-bottom: 0.6rem;
}
.free-airport-card h3 {
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
}
.free-airport-card p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .free-airport-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .free-airport-grid {
    grid-template-columns: 1fr;
  }
}

/* Takeoff intro: text + stat in a narrower left column, the limiting-factor
   visual in a wider right column, vertically centered against the left
   content as a whole (performance.html). */
/* Framed diagrams share one padding and the same 2-column split and gap as
   .grid-2, so each box lines up with the cards beneath it (e.g. the
   Assumed temperature / FLEX card). */
.takeoff-intro-grid,
.reduced-thrust-grid {
  --diagram-pad: 1.75rem;
}
.takeoff-intro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "copy visual"
    "stat visual";
  column-gap: 1.5rem;
  row-gap: 1.25rem;
  align-items: start;
}
.takeoff-intro-copy {
  grid-area: copy;
}
.takeoff-intro-stat {
  grid-area: stat;
  margin: 1rem 0 0;
}
.takeoff-limit-visual {
  grid-area: visual;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--diagram-pad);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
@media (max-width: 860px) {
  .takeoff-intro-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "visual"
      "stat";
  }
  .takeoff-limit-visual {
    align-self: start;
  }
}

/* Reduced-thrust / EFP blocks: explanation left, flow right, centred on each other. */
.reduced-thrust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 1.5rem;
  align-items: center;
}
.reduced-thrust-grid .limit-flow {
  margin: 0;
  padding: var(--diagram-pad);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
@media (max-width: 860px) {
  .reduced-thrust-grid {
    grid-template-columns: 1fr;
  }
}

/* Compact vertical "limiting factor → result" flow (performance.html),
   deliberately small — a few badges and two arrows, not a big infographic. */
.limit-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 0 auto;
  max-width: 100%;
  text-align: center;
}
.limit-flow-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
/* Each limit shown as label + one-line description, replacing the separate
   explanation cards that used to repeat the same five limits underneath. */
.limit-flow-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 112px;
  padding: 0.5rem 0.85rem;
  border-radius: 10px;
  background: var(--cyan-dim);
  border: 1px solid rgba(79, 209, 224, 0.25);
}
.limit-flow-item-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
}
.limit-flow-item-desc {
  font-size: 0.68rem;
  line-height: 1.3;
  text-align: center;
  color: var(--text-muted);
}
.limit-flow-arrow {
  color: var(--text-faint);
  font-size: 0.9rem;
}
.limit-flow-result {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--amber);
}
.limit-flow-final {
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--green);
  padding: 0.65rem 1.4rem;
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-md);
  background: var(--green-dim);
}

/* Responsive auto-fit row for several short technical cards side by side,
   without forcing a fixed 3+2 split like .grid-3 followed by .grid-2. */
.cards-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.1rem;
}

/* Highlighted story block (e.g. TNCM) */
.story-card {
  max-width: 760px;
  margin-top: 1.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(155deg, rgba(79, 209, 224, 0.08), transparent);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
}
.story-card .eyebrow {
  color: var(--cyan);
}
.story-card p {
  margin-bottom: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.story-card p:last-child {
  margin-bottom: 0;
}
/* Used when a story-card is the full-width closing band of a section
   (e.g. after .stats-note-layout) rather than a text-column-width aside. */
.story-card--conclusion {
  max-width: none;
  width: 100%;
  margin-top: 2.5rem;
}
/* A full-width technical note/explanation card — spans the content
   container like .story-card--conclusion, but used mid-section rather
   than only as a closing band. */
.story-card--full {
  max-width: none;
  width: 100%;
}
.story-card-text {
  max-width: none;
}

/* Editorial media band — a cinematic image that blends into the page.
   Edges fade into the background so the picture reads as part of the
   narrative rather than a boxed screenshot. */
.media-band {
  position: relative;
  margin: clamp(2rem, 5vw, 3.25rem) 0 0;
}
.media-band img {
  display: block;
  width: 100%;
  height: clamp(280px, 42vw, 540px);
  object-fit: cover;
  object-position: center center;
  border-radius: var(--radius-lg);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
}
/* Subtle cyan-tinted scrim + vignette to seat the image in the theme. */
.media-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius-lg);
  background: radial-gradient(
    120% 90% at 50% 50%,
    transparent 55%,
    rgba(11, 18, 32, 0.55) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
}
.media-band-caption {
  margin-top: 1rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-faint);
  text-align: center;
}

/* Sibling to .media-band for smaller side-by-side figures. A hard border
   made this read as an unrelated "card" next to .media-band's borderless
   bleed — so it uses the same top/bottom dissolve, just a much tighter
   margin (6% vs .media-band's 12-14%) so it softens the silhouette without
   fading into the actual obstacle markers, which sit closer to the edges
   here than on a wide scenic shot. */
.side-media {
  position: relative;
  margin: 0;
}
.side-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}
.side-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius-lg);
  background: radial-gradient(
    120% 90% at 50% 50%,
    transparent 70%,
    rgba(11, 18, 32, 0.4) 100%
  );
}

/* Modifier for UI screenshots: keep the whole frame visible (no edge fade or
   vignette) and use the standard panel border. */
.side-media-plain img {
  height: auto;
  border: 1px solid var(--border);
  -webkit-mask-image: none;
  mask-image: none;
}
.side-media-plain::after {
  display: none;
}

/* Automatic inputs (Performance): text beside a capped-width UI screenshot. */
.weather-head {
  margin-bottom: 2.25rem;
}
.weather-grid {
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.weather-aside {
  width: 100%;
  max-width: 410px;
  justify-self: end;
}
.weather-copy .stat-figure {
  margin: 1.5rem 0 0;
}
.prose .prose-lead {
  color: var(--text-primary);
  font-weight: 600;
}
@media (max-width: 900px) {
  .weather-aside {
    max-width: none;
    justify-self: stretch;
  }
}

/* ─── Getting-started flow (compact numbered sequence) ────────────────
   Desktop: five steps in one row joined by a thin connector that runs from
   each number to the next step. Tablet: 3 + 2 with the second row centred.
   Mobile: vertical sequence with a thin vertical connector. */
.getting-started-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2rem 2rem;
  margin-top: 2rem;
}
.getting-started-step-num {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--cyan);
}
.getting-started-step-num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-bright);
}
.getting-started-step:last-child .getting-started-step-num::after {
  display: none;
}
.getting-started-step h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}
.getting-started-step p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
}
@media (max-width: 1200px) {
  /* 6-column track, each step spans 2: row one is 3 steps, row two is the
     remaining 2 centred. */
  .getting-started-flow {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .getting-started-step {
    grid-column: span 2;
  }
  .getting-started-step:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .getting-started-step:nth-child(3) .getting-started-step-num::after {
    display: none;
  }
}
@media (max-width: 720px) {
  .getting-started-flow {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .getting-started-step,
  .getting-started-step:nth-child(4) {
    grid-column: auto;
  }
  .getting-started-step {
    position: relative;
    padding-left: 3rem;
  }
  .getting-started-step-num {
    position: absolute;
    left: 0;
    top: 0.1rem;
    margin: 0;
  }
  .getting-started-step-num::after {
    display: none !important;
  }
  .getting-started-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.6rem;
    top: 1.6rem;
    bottom: -1.25rem;
    width: 1px;
    background: var(--border-bright);
  }
}

/* ─── Training & education (homepage) ─────────────────────────────────
   Self-balancing collaboration grid: append an .education-card and the
   layout re-balances. Desktop uses a 6-column track (cards span 2) so
   partial last rows can be centred: 1 centred, 2 = C C, 3 = C C C,
   4 = 2x2, 5 = 3 + centred 2, 6 = 3 + 3 (and so on). Tablet = 2 columns
   with an odd last card centred. Mobile = 1 column. */
.education-grid {
  display: grid;
  gap: 1.5rem;
}
/* Partner spotlight card: dark institutional panel with a faint oversized
   watermark of the partner's own logo (set from the card's <img> by
   initEducationCards; without JS the watermark is simply absent). */
.education-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.045), transparent 45%),
    var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.75rem 1.6rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.32);
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}
/* Watermark: one shared rule for every partner — an oversized copy of the
   partner's logo in the empty upper-right of the card (beside the foreground
   logo, clear of the text), cropped by the right edge, barely visible,
   always behind the content. */
.education-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: auto;
  bottom: 1.25rem;
  right: -8%;
  width: 62%;
  height: 52%;
  background: var(--education-logo, none) no-repeat right bottom / contain;
  filter: brightness(0) invert(1);
  opacity: 0.035;
  pointer-events: none;
}
@media (hover: hover) {
.education-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 16px 40px rgba(0, 0, 0, 0.42);
}
}
@media (hover: hover) {
.education-card:hover .education-logo img {
  opacity: 1;
}
}
/* Shared logo zone: logo centred in a fixed 96px area, then a fixed gap, the
   divider, and a fixed gap before the content (1rem each). */
.education-logo {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: calc(96px + 1rem + 1px);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
/* Same idea as .trust-strip-logo (VA partners): logos sit directly on the
   card in a light monochrome. Artwork keeps its own proportions; only the
   visual size is normalised (wide logos are width-capped, compact ones
   height-capped), and none is shown above ~60% of its native pixels. */
.education-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 280px;
  max-height: 82px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.88;
  transition: opacity var(--transition);
}
@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) {
.education-card:hover {
    transform: none;
  }
}
}
@media (max-width: 640px) {
  .education-card {
    padding: 1.4rem 1.25rem;
  }
  .education-card::before {
    top: 4%;
    right: -12%;
    width: 75%;
    height: 34%;
  }
  .education-logo {
    height: calc(76px + 1rem + 1px);
  }
  .education-logo img {
    max-width: 220px;
    max-height: 64px;
  }
}
.education-card h3 {
  font-size: 1.05rem;
  color: var(--text-primary);
}
.education-card-type {
  display: block;
  margin: 0.3rem 0 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}
.education-card p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-muted);
}
@media (min-width: 1001px) {
  .education-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .education-card {
    grid-column: span 2;
  }
  /* Partial last rows, centred: one leftover card, or a leftover pair. */
  .education-card:last-child:nth-child(3n + 1) {
    grid-column: 3 / span 2;
  }
  .education-card:nth-last-child(2):nth-child(3n + 1) {
    grid-column: 2 / span 2;
  }
  /* 2 and 4 cards: balanced halves (never 3 + 1). */
  .education-grid:has(> .education-card:nth-child(2):last-child)
    > .education-card,
  .education-grid:has(> .education-card:nth-child(4):last-child)
    > .education-card {
    grid-column: span 3;
  }
  /* A single card: centred, capped width. */
  .education-grid:has(> .education-card:only-child) > .education-card {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 520px;
  }
}
@media (min-width: 641px) and (max-width: 1000px) {
  .education-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .education-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.75rem);
  }
}
.education-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  max-width: 760px;
  margin: 2rem auto 0;
  padding: 1.1rem 1.4rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.education-cta strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.education-cta span {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.education-cta .btn {
  align-self: center;
  white-space: nowrap;
  font-weight: 600;
  color: var(--cyan);
  border-color: rgba(79, 209, 224, 0.45);
}
.education-disclaimer {
  margin: 0.9rem auto 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}
/* Training & education: a compact header (introduction left, "training
   organisation?" call right) above the partner grid. The grid re-balances
   itself for any number of partners (1, 2, 3, 4, ...), so adding a partner
   is just one more <article class="education-card">. */
.education-layout {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.education-head {
  display: grid;
  gap: 1.5rem;
}
.education-intro h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
}
.education-intro .lead {
  max-width: 62ch;
}
.education-aside .education-cta {
  margin: 0;
  max-width: none;
}
.education-aside .education-cta .btn {
  align-self: flex-start;
}
.education-aside .education-disclaimer {
  margin: 0.75rem 0 0;
  text-align: left;
}
@media (min-width: 1001px) {
  .education-head {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
  }
}

/* Advanced operations: equal-height cards, tags under the title, link pinned
   to the bottom, without padding the text to force alignment. */
.advanced-grid > .card {
  display: flex;
  flex-direction: column;
}
.advanced-grid .detail-card {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#advanced-heading + .lead {
  margin-top: 1rem;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin-bottom: 0.85rem;
}
.card-tag-note {
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-left: 0.25rem;
}
.advanced-note {
  margin-top: 1.5rem;
  max-width: 720px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.advanced-note strong {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.advanced-note a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Modifier: cap the image to whatever height the sibling text column ends
   up needing, instead of the image's own aspect ratio dictating the grid
   row's height. The img is taken out of flow (absolute) so it can't
   inflate the row, then stretched to fill it — keeps the same cover/fade/
   rounded-corner treatment as .side-media, just height-capped. */
.side-media-capped {
  align-self: stretch;
}
.side-media-capped img {
  position: absolute;
  inset: 0;
}

/* ─── Detail panels (shared technical / comparison component) ─────────
   One visual grammar for structured technical information:
   eyebrow -> title -> lead -> key output -> intro -> list -> note.
   Two ways to use it:
   - nested, as before:  .card > .detail-card  (title + paragraphs, free flow)
   - side-by-side pair:  .detail-grid > .card.detail-panel  (equal height;
     where subgrid is supported the first five parts line up across the two
     panels, and list + note flow naturally below). */
.detail-card h3,
.detail-panel h3 {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
  color: var(--text-primary);
}
.detail-card h3 i {
  color: var(--cyan);
  margin-right: 0.5rem;
}
.detail-card p,
.detail-panel p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
}
.detail-card p + p,
.detail-panel p + p {
  margin-top: 0.75rem;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.detail-panel {
  display: flex;
  flex-direction: column;
}
/* Small cyan label + strong value: the single most important result. */
.detail-output {
  margin-top: 1.1rem;
}
.detail-output-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}
.detail-output-value {
  display: block;
  margin-top: 0.2rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
}
.detail-panel .detail-output + .detail-lead {
  margin-top: 1.1rem;
}
.detail-panel h3 {
  margin-top: 0.4rem;
}
.detail-panel .detail-body {
  margin-top: 0.2rem;
}
/* Structured technical list: small cyan check markers, no default bullets. */
.detail-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}
.detail-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.5;
  /* a touch brighter than body copy, short of pure white */
  color: color-mix(in srgb, var(--text-primary) 78%, var(--text-muted));
}
.detail-list li + li {
  margin-top: 0.4rem;
}
.detail-list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.28em;
  width: 0.34rem;
  height: 0.62rem;
  border: solid var(--cyan);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.detail-note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.detail-panel .detail-note {
  font-size: 0.875rem;
}
@media (max-width: 760px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 761px) {
    /* Six parts: eyebrow, title, lead, key output, intro, body (list + note). */
    .detail-grid > .detail-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      grid-row: span 6;
      row-gap: 0;
    }
    .detail-grid > .detail-panel > * {
      min-width: 0;
    }
  }
}

/* Trusted partnership panel */
.partner-panel {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}
/* Darker than a surrounding .section-alt so the panel stands out. */
.partner-panel--contrast {
  max-width: 880px;
  background: linear-gradient(
      180deg,
      rgba(79, 209, 224, 0.08),
      transparent 38%
    ),
    var(--bg-base);
  border-color: var(--border-bright);
  border-top: 2px solid var(--cyan);
  box-shadow: var(--shadow-card);
}
.partner-panel.partner-panel--contrast .eyebrow {
  color: var(--cyan);
}
.partner-panel--contrast .prose {
  max-width: 780px;
}
.partner-panel--contrast .cta-btn-row {
  margin-top: 2.25rem;
}
.partner-panel .eyebrow {
  color: var(--amber);
}

/* Disclaimer line */
.disclaimer {
  max-width: 720px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-faint);
  text-align: center;
}

/* ============================================================
   29. Design System Additions — Spacing scale, z-index,
       typography polish, new components
   ============================================================ */

/* ─── Spacing scale (8pt grid) ──────────────────────────────── */
:root {
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 2.5rem;
  --sp-6: 3rem;
  --sp-8: 4rem;
  --sp-10: 5rem;
  --sp-12: 6rem;
  /* z-index scale — never use arbitrary values outside this set */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 50;
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
}

/* ─── Typography polish ─────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}
.lead,
.prose p,
.pillar-body,
.vpt2-feature-desc,
.case-section-body,
.team-story p {
  text-wrap: pretty;
}

/* ─── Button press feedback ─────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-ghost:hover {
    /* already defined above — this gate prevents false tap hovers */
  }
}
.btn:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* ─── Screenshot placeholder ────────────────────────────────── */
.shot-ph {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--bg-surface);
  border: 1px dashed var(--border-bright);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.82rem;
  font-family: var(--font-mono);
  line-height: 1.55;
}
.shot-ph i {
  font-size: 2rem;
  opacity: 0.4;
}
.shot-ph-label {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0.7;
}

/* ─── Tier badges (used in EFB page) ────────────────────────── */
.tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 99px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  flex-shrink: 0;
  vertical-align: middle;
}
.tier-badge-lite {
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(100, 116, 139, 0.3);
}
.tier-badge-standard {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.tier-badge-pro {
  background: rgba(145, 22, 43, 0.2);
  color: #e85d75;
  border: 1px solid rgba(145, 22, 43, 0.4);
}
.tier-badge-soon {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.tier-badge-wip {
  background: rgba(240, 178, 107, 0.12);
  color: var(--amber);
  border: 1px solid rgba(240, 178, 107, 0.3);
}

/* ─── Workflow strip (SimBrief → Navigraph → VPT) ───────────── */
.workflow-strip {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.workflow-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
  max-width: 860px;
  margin: 2.5rem auto 0;
}
.workflow-step {
  text-align: center;
  padding: 1.75rem 1.25rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition);
}
.workflow-step.is-vpt {
  border-color: rgba(79, 209, 224, 0.3);
  background: linear-gradient(
    160deg,
    rgba(79, 209, 224, 0.07),
    var(--bg-panel)
  );
  box-shadow: 0 0 40px rgba(79, 209, 224, 0.07);
}
.workflow-step-icon {
  font-size: 1.6rem;
  margin-bottom: 0.65rem;
  display: block;
}
.workflow-step-name {
  font-weight: 700;
  font-size: 0.975rem;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}
.workflow-step-role {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.workflow-arrow {
  color: var(--border-bright);
  font-size: 1.4rem;
  flex-shrink: 0;
  text-align: center;
}
@media (max-width: 700px) {
  .workflow-steps {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
  .workflow-arrow {
    transform: rotate(90deg);
  }
}

/* ─── EFB Phase sections ─────────────────────────────────────── */
.phase-nav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--sp-3) 0;
  position: sticky;
  top: 60px;
  z-index: var(--z-sticky);
  background: rgba(11, 18, 32, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.phase-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-sans);
  text-decoration: none;
}
@media (hover: hover) {
.phase-nav-btn:hover {
  border-color: var(--border-bright);
  color: var(--text-primary);
}
}
.phase-nav-btn.is-active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: var(--cyan-dim);
}
.phase-section {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  border-top: 1px solid var(--border);
}
.phase-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.phase-layout.reverse {
  direction: rtl;
}
.phase-layout.reverse > * {
  direction: ltr;
}
@media (max-width: 840px) {
  .phase-layout,
  .phase-layout.reverse {
    grid-template-columns: minmax(0, 1fr);
    direction: ltr;
  }
}
.phase-layout > * {
  min-width: 0;
}
.phase-copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.phase-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.phase-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.phase-feature-list li > i {
  color: var(--cyan);
  font-size: 0.8rem;
  margin-top: 0.25rem;
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
}
.phase-feat-inner {
  flex: 1;
}
.phase-feat-label {
  color: var(--text-primary);
  font-weight: 600;
}
.phase-feat-desc {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  line-height: 1.5;
}
.phase-feat-badges {
  display: inline-flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-left: 0.35rem;
  vertical-align: middle;
}
.phase-screenshot {
  position: relative;
}

/* ─── Per-section Boeing/Airbus screenshot carousel (reuses
   .cases-track/.cases-controls; each instance holds just the 2 family
   slides for that one phase, so a card is the full track width). ─── */
.shot-card {
  flex: 0 0 var(--shot-w, min(760px, 84vw));
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
/* iPad-style device: a black glass bezel with a thin aluminium rim, a front
   camera on the top edge and a soft contact shadow. The screenshot fills the
   screen at the iPad's own landscape proportions. */
.shot-frame {
  position: relative;
  padding: clamp(10px, 1.7vw, 18px);
  background: #080b12;
  border-radius: clamp(20px, 3.2vw, 34px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 0 3px #1a202c,
    0 0 0 4px rgba(255, 255, 255, 0.07),
    0 28px 50px -22px rgba(0, 0, 0, 0.75);
}
.shot-frame::before {
  content: "";
  position: absolute;
  top: clamp(3px, 0.6vw, 6px);
  left: 50%;
  width: clamp(4px, 0.55vw, 6px);
  height: clamp(4px, 0.55vw, 6px);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #26344d, #0c1220 70%);
}
.shot-media {
  position: relative;
  /* No fixed ratio: the screen takes the proportions of its own screenshot
     (they come from different tablets), so nothing is cropped. */
  border-radius: clamp(4px, 0.7vw, 8px);
  overflow: hidden;
  background: var(--bg-panel);
}
.shot-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.05) 0%,
    transparent 38%
  );
}
.shot-media img {
  display: block;
  width: 100%;
  height: auto;
}
.shot-media .shot-ph {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  border: none;
}
.shot-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
}
/* Title + one-line caption under a guided-workflow carousel slide. */
.shot-card-title {
  margin: 0.9rem 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-primary);
}
.shot-card-caption {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 0.85rem;
  text-align: center;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Arrows sit over the dimmed neighbouring slides, vertically centred on the
   device (not on the caption below it). --shots-arrow-top is set from JS. */
.shots-track-wrap {
  position: relative;
  padding: 0;
}
/* Centre-snapping track: the current device is centred and its neighbours peek
   in from both sides, like swiping through pages on an iPad. */
.shots-track {
  --shot-w: min(760px, 84vw);
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem calc((100% - var(--shot-w)) / 2) 0.75rem;
  scroll-behavior: smooth;
}
.shots-carousel.is-enhanced .shot-card {
  opacity: 0.4;
  transform: scale(0.93);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  cursor: pointer;
}
.shots-carousel.is-enhanced .shot-card.is-current {
  opacity: 1;
  transform: none;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .shots-track {
    scroll-behavior: auto;
  }
  .shots-carousel.is-enhanced .shot-card {
    transition: none;
  }
}
.cases-btn.shots-arrow {
  position: absolute;
  top: var(--shots-arrow-top, 40%);
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(11, 18, 32, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.shots-arrow-prev {
  left: 0.25rem;
}
.shots-arrow-next {
  right: 0.25rem;
}
@media (max-width: 600px) {
  .cases-btn.shots-arrow {
    width: 34px;
    height: 34px;
  }
}
/* Small screens and portrait tablets: the active device takes the full width
   and no neighbour peeks in, so it sits exactly centred. Wider screens keep the
   iPad-style centre-snap with the neighbours visible on both sides. Slightly
   above 900px the peek would be a thin sliver, so the cut-off is higher. */
@media (max-width: 960px) {
  .cases-btn.shots-arrow {
    display: none;
  }
  .shots-track {
    --shot-w: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .shot-card {
    flex-basis: 100%;
  }
  .shots-carousel.is-enhanced .shot-card {
    opacity: 1;
    transform: none;
    cursor: default;
  }
}
/* Page control in the iOS style: a small translucent pill holding the dots. */
.shots-dots-bottom {
  width: fit-content;
  margin: 0.75rem auto 0;
  padding: 0.45rem 0.7rem;
  gap: 0.5rem;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 99px;
}
.shots-dots-bottom .case-dot {
  background: rgba(255, 255, 255, 0.3);
}
.shots-dots-bottom .case-dot.is-active {
  background: var(--text-primary);
  transform: none;
}

/* ─── Airports: KLAX operational-example carousel ─────────────
   Text + tab controls on the left, screenshots on the right. Native
   scroll-snap provides touch swipe; tabs/arrows are synced in JS. */
.ops-example {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: 2rem;
}
.ops-example-copy .prose p:last-child {
  margin-bottom: 0;
}
.ops-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.ops-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.25rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.ops-tab {
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}
.ops-tab.is-active {
  color: var(--cyan);
  background: var(--cyan-dim);
  border-color: rgba(79, 209, 224, 0.4);
}
@media (hover: hover) and (pointer: fine) {
  .ops-tab:not(.is-active):hover {
    color: var(--text-primary);
  }
}
.ops-tab:focus-visible,
.ops-track:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.ops-arrows {
  display: flex;
  gap: 0.5rem;
}
.ops-arrows .cases-btn {
  width: 34px;
  height: 34px;
  font-size: 0.75rem;
}
.ops-arrows .cases-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.ops-captions {
  margin-top: 1.1rem;
  padding: 0.9rem 1.1rem;
  background: rgba(240, 178, 107, 0.06);
  border: 1px solid rgba(240, 178, 107, 0.18);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-md);
}
.ops-caption h3 {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}
.ops-caption p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.ops-example.is-ready .ops-caption,
[data-ops-carousel].is-ready .ops-caption {
  display: none;
}
.ops-example.is-ready .ops-caption.is-active,
[data-ops-carousel].is-ready .ops-caption.is-active {
  display: block;
}
/* EFB page: neutral (cyan) caption + landscape slides */
.ops-captions--cyan {
  background: rgba(79, 209, 224, 0.06);
  border-color: rgba(79, 209, 224, 0.18);
  border-left-color: var(--cyan);
}
.phase-copy .ops-controls,
.phase-copy .ops-captions {
  margin-top: 0;
}
.ops-carousel--wide .ops-slide {
  aspect-ratio: 16 / 10;
}
.ops-carousel--wide .shot-ph {
  height: 100%;
  border: 0;
  border-radius: 0;
}
/* Plain EFB screenshot: no decorative frame, keeps the UI readable */
.efb-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.phase-nav-sep {
  width: 1px;
  align-self: stretch;
  margin: 0.15rem 0.25rem;
  background: var(--border-bright);
}
.ops-carousel {
  min-width: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ops-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ops-track::-webkit-scrollbar {
  display: none;
}
.ops-slide {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  aspect-ratio: 456 / 616;
  display: flex;
  align-items: center;
}
.ops-slide img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 980px) {
  .ops-example {
    grid-template-columns: minmax(0, 1fr);
  }
  .ops-carousel {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
}


/* ─── Cases Carousel ─────────────────────────────────────────── */
.cases-track {
  display: flex;
  gap: 1.5rem;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.5rem;
}
.cases-track::-webkit-scrollbar {
  display: none;
}
.case-card {
  flex: 0 0 min(520px, 86vw);
  scroll-snap-align: start;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: border-color var(--transition);
}
@media (hover: hover) {
.case-card:hover {
  border-color: var(--border-bright);
}
}
.case-number {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.case-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  margin-top: 0.2rem;
}
.case-block {
  flex: 1;
}
.case-block-label {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.4rem;
  display: block;
}
.case-block-body {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
}
.case-impact {
  padding: 1rem 1.25rem;
  background: rgba(240, 178, 107, 0.06);
  border: 1px solid rgba(240, 178, 107, 0.18);
  border-radius: var(--radius-md);
  margin-top: auto;
}
.case-impact .case-block-label {
  color: var(--amber);
}
.case-impact .case-block-body {
  color: var(--text-primary);
  font-weight: 500;
}
.cases-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: var(--sp-3);
  justify-content: center;
}
.cases-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-bright);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .cases-btn:hover {
    background: var(--cyan-dim);
    border-color: var(--cyan);
    color: var(--cyan);
  }
}
.cases-dots {
  display: flex;
  gap: 0.4rem;
}
.case-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-bright);
  transition:
    background var(--transition),
    transform var(--transition);
  cursor: pointer;
}
.case-dot.is-active {
  background: var(--cyan);
  transform: scale(1.35);
}

/* ─── Team / Story Section ──────────────────────────────────── */
.team-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 840px) {
  .team-layout {
    grid-template-columns: 1fr;
  }
}
.team-story {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.team-story p {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.75;
}
.team-story p strong {
  color: var(--text-primary);
}
/* Team photo (from the app) */
.team-photo {
  margin: 0 0 1.25rem;
}
.team-photo img {
  width: 100%;
  height: clamp(200px, 30vw, 300px);
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-bright);
  box-shadow: var(--shadow-card);
}
.team-photo figcaption {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-faint);
  line-height: 1.5;
  text-align: center;
}
.team-numbers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.team-number {
  padding: 1.5rem;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.team-number-value {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.team-number-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ─── Data provider trust grid ──────────────────────────────── */
.data-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--sp-4);
}
@media (max-width: 640px) {
  .data-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.data-trust-item {
  padding: 1.5rem 1rem;
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.data-trust-icon {
  font-size: 1.5rem;
  color: var(--cyan);
}
.data-trust-value {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.data-trust-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ─── Subscription "Why a subscription?" section ────────────── */
.sub-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: var(--sp-4);
}
@media (max-width: 840px) {
  .sub-why-grid {
    grid-template-columns: 1fr;
  }
}
.sub-why-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.sub-why-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--cyan-dim);
  border: 1px solid rgba(79, 209, 224, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--cyan);
  flex-shrink: 0;
}
.sub-why-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.sub-why-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Calculation limits transparency */
.calc-limits {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.calc-limits-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.calc-limits-row:last-child {
  border-bottom: none;
}
.calc-limits-row.header-row {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.calc-limits-row .label {
  color: var(--text-muted);
}
.calc-limits-row .val {
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.calc-limits-row .val-lite {
  color: #94a3b8;
}
.calc-limits-row .val-standard {
  color: #f59e0b;
}
.calc-limits-row .val-pro {
  color: #e85d75;
}
.calc-bar {
  height: 4px;
  background: var(--border-bright);
  border-radius: 99px;
  overflow: hidden;
  display: block;
  width: 100%;
  max-width: 80px;
  margin: 0.35rem auto 0;
}
.calc-bar-fill {
  height: 100%;
  border-radius: 99px;
}
@media (max-width: 600px) {
  .calc-limits-row {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    font-size: 0.8rem;
  }
}

/* ─── Contact section ───────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 860px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}
.contact-form {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-md);
}
.contact-fields {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
@media (max-width: 520px) {
  .contact-row {
    grid-template-columns: 1fr;
  }
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.contact-field label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.75rem 0.9rem;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}
@media (hover: hover) {
.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover {
  border-color: var(--border-bright);
}
}
.contact-field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}
.contact-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%238a95ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px;
  padding-right: 2.4rem;
  cursor: pointer;
}
.contact-field select optgroup {
  font-style: normal;
  color: var(--text-muted);
}
.contact-field select option {
  color: var(--text-primary);
  background: var(--bg-panel);
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-dim);
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--text-faint);
}
/* Browser autofill paints its own light-blue field with dark text. Keep the
   form's dark theme: tell the browser the form is dark, then cover the autofill
   colours (a long background transition is the only reliable way to stop
   Chrome repainting it) and keep the text light. */
.contact-form {
  color-scheme: dark;
}
.contact-field input:-webkit-autofill,
.contact-field input:-webkit-autofill:hover,
.contact-field input:-webkit-autofill:focus,
.contact-field textarea:-webkit-autofill,
.contact-field select:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary);
  caret-color: var(--text-primary);
  box-shadow: 0 0 0 1000px var(--bg-base) inset;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-base) inset;
  border-color: var(--border-bright);
  transition: background-color 600000s 0s, color 600000s 0s;
}
.contact-field input:-webkit-autofill:focus {
  box-shadow:
    0 0 0 1000px var(--bg-base) inset,
    0 0 0 3px var(--cyan-dim);
  border-color: var(--cyan);
}
.contact-field input:autofill {
  background-color: var(--bg-base);
  color: var(--text-primary);
}
.contact-field.has-error input,
.contact-field.has-error select,
.contact-field.has-error textarea {
  border-color: #e8647a;
}
.contact-error {
  font-size: 0.78rem;
  color: #e8647a;
}
.contact-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-height: 1.1em;
}
.contact-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.contact-count.is-near {
  color: var(--amber);
}
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.contact-status {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.contact-status.is-success {
  color: var(--cyan);
}
.contact-status.is-error {
  color: var(--amber);
}
.contact-fallback {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-faint);
  margin: 0;
}
.contact-fallback a {
  color: var(--cyan);
}
/* Confirmation that replaces the fields once the message is sent. */
.contact-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1rem 0;
}
.contact-done[hidden] {
  display: none;
}
.contact-done > i {
  color: var(--cyan);
  font-size: 1.1rem;
}
.contact-done h3 {
  margin: 0;
  font-size: 1.25rem;
}
.contact-done p {
  margin: 0 0 0.6rem;
  max-width: 46ch;
  color: var(--text-muted);
}
.contact-form.is-sent .contact-fields {
  display: none;
}

/* Support aside: a quiet ruled column, no boxes or icons. */
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-clock {
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--border);
}
.contact-clock-time {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 0.5rem;
}
.contact-clock-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}
.contact-clock-diff {
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-top: 0.35rem;
  min-height: 1em;
}
.contact-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}
.contact-points li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.contact-points li strong {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.contact-points li a {
  color: var(--cyan);
}

/* ─── Cookie Consent Banner ─────────────────────────────────── */
#vpt-ccb {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-bright);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
  transform: translateY(100%);
  transition: transform 0.35s ease;
}
#vpt-ccb.ccb-show {
  transform: translateY(0);
}
.ccb-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.875rem clamp(1rem, 4vw, 2.5rem);
}
.ccb-text {
  flex: 1;
  min-width: 240px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.ccb-text strong {
  color: var(--text-primary);
}
.ccb-text a {
  color: var(--cyan);
  text-decoration: none;
}
@media (hover: hover) {
.ccb-text a:hover {
  color: var(--white);
}
}
.ccb-btns {
  display: flex;
  gap: 0.625rem;
  flex-shrink: 0;
}
.ccb-btn {
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all var(--transition);
  white-space: nowrap;
  line-height: 1;
}
.ccb-btn-decline {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-bright);
}
@media (hover: hover) {
.ccb-btn-decline:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}
}
.ccb-btn-accept {
  background: var(--cyan-dim);
  color: var(--cyan);
  border: 1px solid rgba(79, 209, 224, 0.3);
}
@media (hover: hover) {
.ccb-btn-accept:hover {
  background: var(--cyan);
  color: var(--bg-base);
}
}

/* ─── Team avatars ───────────────────────────────────────── */
/* The circle only masks: each avatar file is pre-cropped (Sacha at 1.5x on the
   face) and pre-sized to 360px, about 4x the 84px display, so the browser
   never has to scale a large photo down on the fly or with a CSS transform,
   which is what made them soft and pixelated. */
.team-avatar {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-bright);
  flex-shrink: 0;
  background: var(--bg-surface);
}
.team-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Framed figure ─────────────────────────────────────────────
   A real image presented as technical evidence: a thin frame, short corner
   ticks just outside it and a mono caption that names what is shown. Use on
   one image per section at most. */
.figure-frame {
  margin: 0;
}
.figure-frame-box {
  position: relative;
}
.figure-frame-media {
  position: relative;
  border: 1px solid var(--border-bright);
  background: var(--bg-panel);
  overflow: hidden;
}
.figure-frame-media > img {
  display: block;
  width: 100%;
  height: auto;
}
.figure-frame-box::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: 1;
  pointer-events: none;
  --tick: rgba(79, 209, 224, 0.75);
  background:
    linear-gradient(var(--tick), var(--tick)) top left / 14px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) top left / 1px 14px no-repeat,
    linear-gradient(var(--tick), var(--tick)) top right / 14px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) top right / 1px 14px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom right / 1px 14px no-repeat;
}
.figure-caption {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Fill variant: the frame takes the height of the text column beside it and
   the image covers it (used where the figure sits in a two-column section). */
.figure-frame--fill {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.figure-frame--fill .figure-frame-box {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(260px, 60vw, 420px);
  margin: 6px;
}
.figure-frame--fill .figure-frame-media {
  position: absolute;
  inset: 0;
}
.figure-frame--fill .figure-frame-media > img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

/* ─── Home: "Explore VPT" editorial index ───────────────────────
   A compact ruled index: eight numbered destinations in two columns, no
   imagery. One column on small screens. */
.explore-index {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.explore-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-bright);
}
.explore-list > li {
  border-bottom: 1px solid var(--border);
}
.explore-row {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: 0 0.75rem;
  align-items: baseline;
  padding: 1rem 0;
  color: inherit;
  text-decoration: none;
}
.explore-row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--cyan);
  transition: width 0.25s ease;
}
.explore-row:focus-visible::before {
  width: 2.25rem;
}

@media (hover: hover) {
.explore-row:hover::before {
  width: 2.25rem;
}
}
.explore-row:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.explore-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  transition: color var(--transition);
}
.explore-row:focus-visible .explore-num {
  color: var(--cyan);
}

@media (hover: hover) {
.explore-row:hover .explore-num {
  color: var(--cyan);
}
}
.explore-row h3 {
  margin: 0;
  font-size: 1.05rem;
}
.explore-row p {
  margin: 0.3rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.explore-go {
  font-size: 0.8125rem;
  color: var(--cyan);
  transition: transform 0.2s ease;
}
@media (hover: hover) {
.explore-row:hover .explore-go {
  transform: translateX(3px);
}
}
/* Not yet available: same row, no link, no hover, a quiet "Coming soon" tag. */
.explore-row--soon {
  cursor: default;
}
.explore-row--soon h3,
.explore-row--soon p {
  opacity: 0.6;
}
.explore-row--soon .explore-num {
  opacity: 0.6;
}
.explore-soon {
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(240, 178, 107, 0.4);
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .explore-row::before,
  .explore-go {
    transition: none;
  }
  @media (hover: hover) {
.explore-row:hover .explore-go {
    transform: none;
  }
}
}
@media (max-width: 800px) {
  .explore-list {
    grid-template-columns: 1fr;
  }
}

/* ─── Cases hero: ruled index of the eight cases ────────────── */
.cases-hero-grid {
  display: grid;
  gap: 2.5rem;
}
.cases-index-title {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}
.cases-index ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-bright);
}
.cases-index li {
  border-bottom: 1px solid var(--border);
}
.cases-index a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.7rem 0;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color var(--transition);
}
.cases-index a:focus-visible {
  color: var(--text-primary);
}

@media (hover: hover) {
.cases-index a:hover {
  color: var(--text-primary);
}
}
.cases-index a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.ci-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.cases-index a:focus-visible .ci-num {
  color: var(--cyan);
}

@media (hover: hover) {
.cases-index a:hover .ci-num {
  color: var(--cyan);
}
}
.ci-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
@media (min-width: 1000px) {
  .cases-hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: end;
  }
}

/* Scrollable table hint: the edge with more content fades out. */
.scroll-more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.scroll-more-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
}
.scroll-more-left.scroll-more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

/* ─── Touch targets ──────────────────────────────────────────
   Small screens and touch devices get larger hit areas on compact
   controls. Visual size and spacing of the page stay as they are. */
@media (max-width: 720px), (pointer: coarse) {
  .btn,
  .ccb-btn,
  .ops-tab {
    min-height: 44px;
  }
  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  .cases-btn,
  .map-free-airports-toggle {
    min-height: 40px;
  }
  .cases-btn {
    min-width: 40px;
  }
  .pillar-link,
  .learn-subnav-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .footer-bottom-links a {
    display: inline-block;
    padding: 0.65rem 0.4rem;
  }
}