/* ══════════════════════════════════════════════════════════════════
   TRACARTA — design system
   ──────────────────────────────────────────────────────────────────
   One stylesheet. Grows as we add pages. Sections:

     1. TOKENS         Color, type, spacing, motion variables
     2. RESET / BASE   Reset, body, links, ::selection
     3. LAYOUT         .wrap, .section, .nav-h, grid helpers
     4. TYPE           Headings, leads, eyebrows, type utilities
     5. CONTROLS       Buttons, inputs, calculator
     6. NAV + FOOTER   .nav, .footer
     7. PATTERNS       .leak, .stack, .timeline, .qa, .final-cta
     8. AVIATION       .bp (boarding pass), .fboard (flight board),
                       .journey, .airstrip — the Tracarta signature
     9. PRICING        .price-card, .routing, .shape, .baseline, .note-card
    10. CONTACT        .intent, .form, .field, .resp-card, .alt-card, .office
    11. TMC-SOLUTIONS  .routemap, .tcalc (revenue calc), .anatomy2, .tmc-routing
    12. SKYSUITE       .airspace (layered hero), .layer + .mcard, .contract, .pick
    13. LEGAL          .legal-doc (2-col), .legal-toc rail, .legal-body prose, sibling nav
    14. ABOUT-FIRM     .about-stage (letter), .about-prose, .tline (timeline), .facts (at-a-glance)
    15. ABOUT-LEADERS  .bench (3-up cover), .portrait + monogram fallback, .chapter, .partner block, .beyond
    16. INDEX          .hero-stage (cinematic photo hero w/ ticker), .bigfact, .suite-preview, .artifacts (3 mini-visuals), .proof, .promise
    17. MEGA MENU      .nav-item (trigger wrapper), .megamenu (panel), .mm-layer/.mm-mod (Platform), .mm-audience (Solutions), .mm-about-cell (About)
    18. ABOUT-CAREERS  .careers-hero (photo hero), .careers-essay, .careers-prompts, .careers-form (editorial), .careers-next, .careers-direct
    19. COOKIE BANNER  .cc-banner (fixed-bottom slide-up), .cc-text, .cc-actions, .cc-btn-primary/.cc-btn-ghost
   ══════════════════════════════════════════════════════════════════ */


/* ── 1. TOKENS ─────────────────────────────────────────────────── */

:root {
  /* Backgrounds */
  --bg:            #212121;
  --bg-deep:       #1A1A1A;
  --surface:       #262626;
  --surface-hi:    #2E2E2E;

  /* Hairlines */
  --line:          rgba(255, 255, 255, 0.08);
  --line-strong:   rgba(255, 255, 255, 0.14);
  --line-edge:     rgba(255, 255, 255, 0.20);

  /* Text */
  --white:         #F5F5F0;
  --white-90:      rgba(245, 245, 240, 0.90);
  --white-80:      rgba(245, 245, 240, 0.80);
  --white-60:      rgba(245, 245, 240, 0.60);
  --white-40:      rgba(245, 245, 240, 0.40);
  --white-25:      rgba(245, 245, 240, 0.25);

  /* Accent — Citron */
  --accent:        #D4FF3A;
  --accent-deep:   #A8CC2E;
  --accent-dim:    rgba(212, 255, 58, 0.10);
  --accent-edge:   rgba(212, 255, 58, 0.28);
  --accent-soft:   rgba(212, 255, 58, 0.04);

  /* Semantic */
  --ok:            #6EE7B7;
  --warn:          #FCD34D;
  --err:           #FCA5A5;

  /* Type families */
  --ff-display:    'Bricolage Grotesque', system-ui, sans-serif;
  --ff-ui:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-body:       'Public Sans', 'Inter', -apple-system, sans-serif;
  --ff-mono:       'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Layout */
  --wrap-max:      1280px;
  --wrap-pad:      56px;
  --nav-h:         72px;

  /* Motion */
  --ease:          cubic-bezier(.25, .46, .45, .94);
  --t-fast:        140ms;
  --t-base:        240ms;
}

@media (max-width: 768px) {
  :root {
    --wrap-pad: 24px;
    --nav-h: 64px;
  }
}


/* ── 2. RESET / BASE ──────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--ff-ui);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Subtle architectural grid — Tracarta is precision and infrastructure.
   Two layers: 32px fine + 256px coarse, masked to fade at viewport edges. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to right,  rgba(255,255,255,0.04)  1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04)  1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 256px 256px, 256px 256px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, rgba(0,0,0,0.4) 50%, black 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, rgba(0,0,0,0.4) 50%, black 100%);
}

main, .nav, .footer { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
img, svg { display: block; max-width: 100%; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--bg); }


/* ── 3. LAYOUT ────────────────────────────────────────────────── */

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
  width: 100%;
}
.wrap-sm { max-width: 760px; margin: 0 auto; padding: 0 var(--wrap-pad); width: 100%; }

.section { padding: clamp(64px, 10vw, 128px) 0; }
.section-tight { padding: clamp(48px, 6vw, 80px) 0; }
.section-top-0 { padding-top: 0; }
.section-bot-0 { padding-bottom: 0; }
.section-deep { background: var(--bg-deep); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 56px;
  max-width: 720px;
}
.section-head h2,
.section-head h3 { max-width: 22ch; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 64px);
  align-items: center;
}
.intro-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 920px) { .split { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .intro-split { grid-template-columns: 1fr; } }

.cta-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.cta-cluster.center { justify-content: center; }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

.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;
}


/* ── 4. TYPE ──────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--white);
  margin: 0;
}

h1 { font-size: clamp(44px, 7vw, 96px); letter-spacing: -0.04em; }
h2 { font-size: clamp(32px, 4.5vw, 56px); }
h3 { font-size: clamp(22px, 2.6vw, 36px); }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p { margin: 0; line-height: 1.55; }
em { font-style: italic; }

.lede {
  font-family: var(--ff-body);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--white-80);
  max-width: 56ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.eyebrow.no-rule::before { display: none; }
.eyebrow.muted { color: var(--white-40); }
.eyebrow.muted::before { background: var(--white-40); }
.eyebrow.accent { color: var(--accent); }
.eyebrow.accent::before { background: var(--accent); }

.mono { font-family: var(--ff-mono); letter-spacing: 0.02em; }

.muted  { color: var(--white-60); }
.faint  { color: var(--white-40); }
.accent { color: var(--accent); }

.narrow-14 { max-width: 14ch; }
.narrow-16 { max-width: 16ch; }
.narrow-22 { max-width: 22ch; }
.narrow-36 { max-width: 36ch; }
.narrow-48 { max-width: 48ch; }

/* Spacing utilities (compose with classes; avoid inline styles) */
.mt-2  { margin-top: 8px; }
.mt-3  { margin-top: 12px; }
.mt-4  { margin-top: 16px; }
.mt-5  { margin-top: 24px; }
.mt-6  { margin-top: 32px; }
.mt-7  { margin-top: 40px; }
.mt-8  { margin-top: 56px; }

.text-xxs { font-size: 10px; }
.text-xs  { font-size: 11px; }

.strike {
  position: relative;
  display: inline-block;
  color: var(--white-25);
}
.strike::after {
  content: '';
  position: absolute;
  left: -2%; right: -2%;
  top: 52%;
  height: 4px;
  background: var(--accent);
  transform: rotate(-2deg);
}

.caption {
  text-align: center;
  margin-top: 16px;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--white-40);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--line-edge);
  color: var(--white-80);
}
.tag.accent {
  background: var(--accent-dim);
  border-color: transparent;
  color: var(--accent);
}

.audience-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.audience-tag-mark {
  width: 26px; height: 26px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--bg);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 13px;
}
.audience-tag-label {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white-80);
}


/* ── 5. CONTROLS ──────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--ff-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all var(--t-base) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn .arrow { display: inline-block; transition: transform var(--t-base) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn.primary {
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.btn.primary:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
}

.btn.secondary {
  background: transparent;
  color: var(--white);
  border-color: var(--line-edge);
}
.btn.secondary:hover {
  border-color: var(--white);
  background: var(--surface);
}

.btn.ghost {
  background: transparent;
  color: var(--white);
  padding-inline: 0;
}
.btn.ghost:hover { color: var(--accent); }

.btn.lg { padding: 18px 32px; font-size: 16px; }
.btn.sm { padding: 10px 16px; font-size: 13px; }

/* Calculator input */
.calc { margin-top: 24px; }
.calc-label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 12px;
}
.calc-input-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.calc-currency {
  font-family: var(--ff-display);
  font-size: 32px;
  color: var(--white-60);
}
.calc-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--ff-display);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.035em;
  width: 100%;
  -moz-appearance: textfield;
}
.calc-input::-webkit-outer-spin-button,
.calc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-unit { font-family: var(--ff-display); font-size: 22px; color: var(--white-60); }

.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--line-strong);
  border-radius: 4px;
  outline: 0;
  margin-top: 16px;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
}
.calc-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
}
.calc-hint {
  margin-top: 12px;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--white-40);
}


/* ── 6. NAV + FOOTER ──────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(33, 33, 33, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--line);
  height: var(--nav-h);
  display: flex;
  align-items: center;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}
.nav-mark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* Subtle hover treatment — slight opacity lift, no scale */
  transition: opacity var(--t-base) var(--ease);
}
.nav-mark:hover { opacity: 0.78; }
.nav-mark-img {
  display: block;
  height: 22px;
  width: auto;
  /* Allow the SVG's intrinsic aspect ratio to drive the rendered width */
}
@media (max-width: 768px) {
  .nav-mark-img { height: 18px; }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-size: 14px;
  color: var(--white-60);
  transition: color var(--t-base) var(--ease);
}
.nav-links a:hover,
.nav-links a.active { color: var(--white); }
.nav-cta {
  padding: 8px 14px;
  border: 1px solid var(--line-edge);
  border-radius: 8px;
  color: var(--white) !important;
  font-size: 13px;
  transition: all var(--t-base) var(--ease);
}
.nav-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg) !important;
}
@media (max-width: 768px) {
  .nav-links { gap: 18px; }
  .nav-links a:not(.nav-cta) { display: none; }
}

.footer {
  border-top: 1px solid var(--line);
  padding: 64px 0 32px;
  margin-top: 96px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--t-base) var(--ease);
}
.footer-brand:hover { opacity: 0.78; }
.footer-brand-img {
  display: block;
  height: 26px;
  width: auto;
}
@media (max-width: 768px) {
  .footer-brand-img { height: 22px; }
}
.footer-tag {
  font-size: 14px;
  color: var(--white-60);
  margin-top: 12px;
  max-width: 30ch;
}
.footer-col-h {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: var(--white-60); font-size: 14px; transition: color var(--t-base) var(--ease); }
.footer-col a:hover { color: var(--white); }
.footer-col-spacer { margin-top: 24px; }
.footer-foot {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--white-40);
}


/* ── 7. PATTERNS ──────────────────────────────────────────────── */

/* Card */
.card {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  transition: border-color var(--t-base) var(--ease);
}
.card:hover { border-color: var(--line-edge); }
.card-title {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.card-body { color: var(--white-60); font-size: 14px; }

/* Leak grid */
.leak {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.leak-item {
  padding: 40px 32px 40px 0;
  border-bottom: 1px solid var(--line);
}
.leak-item + .leak-item {
  padding-left: 32px;
  border-left: 1px solid var(--line);
}
@media (max-width: 820px) {
  .leak { grid-template-columns: 1fr; }
  .leak-item + .leak-item { padding-left: 0; border-left: 0; }
}
.leak-num {
  display: block;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 24px;
}
.leak-title {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.leak-body { font-size: 15px; color: var(--white-60); line-height: 1.6; }

/* Stack grid */
.stack {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.stack-cell {
  padding: 28px 20px;
  border-right: 1px solid var(--line);
  background: var(--bg-deep);
}
.stack-cell:last-child { border-right: 0; }
.stack-cell.us {
  background: var(--bg);
  border-top: 3px solid var(--accent);
  position: relative;
}
.stack-cell.us::after {
  content: 'TRACARTA SITS HERE';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  padding: 0 12px;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--accent);
  white-space: nowrap;
}
.stack-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 12px;
}
.stack-cell.us .stack-label { color: var(--accent); }
.stack-name {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.stack-desc { font-size: 13px; color: var(--white-60); line-height: 1.5; }
@media (max-width: 920px) {
  .stack { grid-template-columns: 1fr 1fr; }
  .stack-cell { border-bottom: 1px solid var(--line); }
  .stack-cell.us::after { display: none; }
}

/* Timeline */
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}
.timeline-item { position: relative; padding-bottom: 36px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg);
}
.timeline-week {
  display: block;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.timeline-title {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.timeline-body { font-size: 15px; color: var(--white-60); }

/* Q&A */
.qa { border-top: 1px solid var(--line); }
.qa-item {
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 820px) {
  .qa-item { grid-template-columns: 1fr; gap: 12px; }
}
.qa-q {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.qa-a { color: var(--white-60); line-height: 1.6; font-size: 15px; }

/* Final CTA */
.final-cta {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(48px, 6vw, 96px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 3px;
  background: var(--accent);
}
.final-cta h2 { max-width: 26ch; margin: 0 auto 16px; }
.final-cta .lede { max-width: 56ch; margin: 0 auto 32px; }


/* ── 8. AVIATION — the Tracarta signature ──────────────────────── */

/* Boarding pass */
.bp {
  position: relative;
  background: var(--bg-deep);
  border: 1px solid var(--line-edge);
  border-radius: 16px;
  overflow: hidden;
  font-family: var(--ff-mono);
}
.bp::before, .bp::after {
  content: '';
  position: absolute;
  left: 65%;
  width: 16px; height: 16px;
  background: var(--bg);
  border: 1px solid var(--line-edge);
  border-radius: 50%;
  z-index: 2;
}
.bp::before { top: -9px; }
.bp::after  { bottom: -9px; }
.bp-inner {
  display: grid;
  grid-template-columns: 1fr 35%;
  min-height: 320px;
}
@media (max-width: 580px) {
  .bp::before, .bp::after { display: none; }
  .bp-inner { grid-template-columns: 1fr; }
}
.bp-main {
  padding: 24px 32px;
  border-right: 1px dashed var(--line-edge);
}
@media (max-width: 580px) {
  .bp-main { border-right: 0; border-bottom: 1px dashed var(--line-edge); }
}
.bp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.bp-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
}
.bp-logo::before {
  content: '';
  width: 20px; height: 20px;
  border-radius: 3px;
  background: var(--accent);
}
.bp-class {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: 4px;
}
.bp-route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: end;
  margin-bottom: 24px;
}
.bp-endpoint { display: flex; flex-direction: column; gap: 6px; }
.bp-endpoint.right { text-align: right; }
.bp-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
}
.bp-code {
  font-family: var(--ff-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--white);
}
.bp-place {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white-60);
}
.bp-plane {
  display: grid;
  place-items: center;
  padding-bottom: 8px;
  color: var(--accent);
}
.bp-plane svg { width: 36px; height: 36px; }
.bp-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.bp-meta-cell { display: flex; flex-direction: column; gap: 4px; }
.bp-meta-value {
  font-size: 14px;
  color: var(--white);
  letter-spacing: 0.05em;
}
.bp-stub {
  background: var(--surface);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bp-stub-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}
.bp-stub-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
}
.bp-stub-amount {
  font-family: var(--ff-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--accent);
  line-height: 1;
}
.bp-stub-unit {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--white-60);
  letter-spacing: 0.05em;
}
.bp-barcode {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 2px;
  height: 40px;
  margin-top: 16px;
}
.bp-barcode span { display: block; width: 2px; background: var(--white); }
.bp-bar-50 { height: 50%; }
.bp-bar-55 { height: 55%; }
.bp-bar-60 { height: 60%; }
.bp-bar-65 { height: 65%; }
.bp-bar-70 { height: 70%; }
.bp-bar-75 { height: 75%; }
.bp-bar-80 { height: 80%; }
.bp-bar-85 { height: 85%; }
.bp-bar-90 { height: 90%; }

/* Flight board */
.fboard {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.fboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.fboard-header-left { display: flex; align-items: center; gap: 16px; }
.fboard-dots { display: flex; gap: 6px; }
.fboard-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line-edge);
}
.fboard-dots span:first-child { background: var(--accent); }
.fboard-title {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--white-60);
  letter-spacing: 0.04em;
}
.fboard-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.fboard-live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: fboard-pulse 1.4s ease-in-out infinite;
}
@keyframes fboard-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.fboard-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.fboard-stat {
  background: var(--bg-deep);
  padding: 24px 16px;
}
.fboard-stat-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 8px;
}
.fboard-stat-value {
  font-family: var(--ff-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.fboard-stat-value.accent { color: var(--accent); }
.fboard-stat-sub {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--white-40);
  margin-top: 4px;
}
@media (max-width: 720px) {
  .fboard-summary { grid-template-columns: repeat(2, 1fr); }
}
.fboard-cols {
  display: grid;
  grid-template-columns: 90px 1fr 100px 110px 130px 110px;
  gap: 12px;
  padding: 12px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.fboard-rows { display: flex; flex-direction: column; }
.fboard-row {
  display: grid;
  grid-template-columns: 90px 1fr 100px 110px 130px 110px;
  gap: 12px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-family: var(--ff-mono);
  font-size: 14px;
  transition: background var(--t-fast);
}
.fboard-row:last-child { border-bottom: 0; }
.fboard-row:hover { background: var(--surface); }
.fboard-row > * { letter-spacing: 0.03em; color: var(--white); }
.fboard-flight { font-weight: 500; color: var(--accent); }
.fboard-route { display: flex; align-items: center; gap: 12px; color: var(--white) !important; }
.fboard-route .arrow { color: var(--white-40); }
.fboard-amount { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .fboard-cols { display: none; }
  .fboard-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fboard-row > *:nth-child(n+3) { font-size: 12px; }
}

.fstatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fstatus::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
}
.fstatus.landed   { background: rgba(110, 231, 183, 0.12); color: var(--ok);   }
.fstatus.landed::before   { background: var(--ok); }
.fstatus.delayed  { background: rgba(252, 211, 77, 0.12);  color: var(--warn); }
.fstatus.delayed::before  { background: var(--warn); }
.fstatus.lost     { background: rgba(252, 165, 165, 0.12); color: var(--err);  }
.fstatus.lost::before     { background: var(--err); }
.fstatus.boarding { background: var(--accent-dim); color: var(--accent); }
.fstatus.boarding::before { background: var(--accent); }

/* Journey track */
.journey {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(32px, 4vw, 56px);
}
.journey-track {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 32px;
}
@media (max-width: 920px) { .journey-track { grid-template-columns: 1fr; } }
.journey-endpoint {
  background: var(--surface);
  border: 1px dashed var(--line-edge);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 8px;
}
.journey-endpoint-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.journey-endpoint-name {
  font-family: var(--ff-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.journey-pipeline {
  display: flex;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.journey-step {
  flex: 1;
  background: var(--bg);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  transition: all var(--t-base) var(--ease);
}
.journey-step:hover { background: var(--surface); }
.journey-step:hover .journey-step-name { color: var(--accent); }
.journey-step-name {
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
  transition: color var(--t-base) var(--ease);
}
.journey-step-action {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.journey-delivery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) { .journey-delivery { grid-template-columns: 1fr; } }
.journey-delivery-item { display: flex; flex-direction: column; gap: 8px; }
.journey-delivery-name {
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.journey-delivery-text { font-size: 14px; color: var(--white-60); line-height: 1.5; }

/* Airline strip */
.airstrip {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 24px 0;
  border-block: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white-40);
}
.airstrip-item { display: inline-flex; align-items: center; gap: 12px; }
.airstrip-item::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
}


/* ── 8b. AVIATION — SkyDox: ground ops + extraction ─────────────── */

/* Ops display — the live fetcher dashboard (SkyDox hero) */
.ops {
  background: var(--bg-deep);
  border: 1px solid var(--line-edge);
  border-radius: 16px;
  overflow: hidden;
  font-family: var(--ff-mono);
  position: relative;
}
.ops-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.ops-header-left { display: flex; align-items: center; gap: 14px; }
.ops-id {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--white-60);
  text-transform: uppercase;
}
.ops-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.ops-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: ops-blink 1.6s ease-in-out infinite;
}
@keyframes ops-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--accent-edge); }
  50%      { opacity: 0.5; box-shadow: 0 0 0 4px transparent; }
}
.ops-clock {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-40);
  letter-spacing: 0.05em;
}

/* Counter strip — big number + delta */
.ops-counter {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.ops-counter-cell {
  background: var(--bg-deep);
  padding: 24px 20px;
}
.ops-counter-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 6px;
}
.ops-counter-value {
  font-family: var(--ff-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.ops-counter-value.accent { color: var(--accent); }
.ops-counter-sub {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-40);
  margin-top: 6px;
}
@media (max-width: 720px) {
  .ops-counter { grid-template-columns: 1fr; }
}

/* Portal grid — each airline as a status card */
.ops-portals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
}
@media (max-width: 820px) { .ops-portals { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ops-portals { grid-template-columns: 1fr; } }

.portal {
  background: var(--bg-deep);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.portal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.portal-name {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}
.portal-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.portal-state::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
}
.portal-state.live    { color: var(--accent); }
.portal-state.live::before    { background: var(--accent); animation: ops-blink 1.6s ease-in-out infinite; }
.portal-state.idle    { color: var(--white-60); }
.portal-state.idle::before    { background: var(--white-60); }
.portal-state.queued  { color: var(--warn); }
.portal-state.queued::before  { background: var(--warn); }
.portal-state.paused  { color: var(--white-40); }
.portal-state.paused::before  { background: var(--white-40); }

.portal-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.portal-stat-label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 2px;
}
.portal-stat-value {
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.portal-stat-value.accent { color: var(--accent); }

.portal-bar {
  height: 3px;
  background: var(--line-strong);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.portal-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 600ms var(--ease);
}
.portal-bar-fill.warn { background: var(--warn); }
.portal-bar-fill.muted { background: var(--white-40); }


/* Extraction pipeline — vertical scan line of stages */
.pipeline {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-deep);
}
.pipe-step {
  display: grid;
  grid-template-columns: 80px 1fr 220px;
  gap: 24px;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background var(--t-base) var(--ease);
}
.pipe-step:last-child { border-bottom: 0; }
.pipe-step:hover { background: var(--surface); }
.pipe-step-num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.pipe-step-body { display: flex; flex-direction: column; gap: 6px; }
.pipe-step-title {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}
.pipe-step-desc {
  font-size: 14px;
  color: var(--white-60);
  line-height: 1.5;
  max-width: 56ch;
}
.pipe-step-tech {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-40);
  letter-spacing: 0.04em;
  text-align: right;
  line-height: 1.6;
}
@media (max-width: 820px) {
  .pipe-step {
    grid-template-columns: 60px 1fr;
    padding: 20px 20px;
    gap: 16px;
  }
  .pipe-step-tech { grid-column: 1 / -1; text-align: left; }
}

/* Connector line down the left edge of the pipeline */
.pipe-step::before {
  content: '';
  position: absolute;
  left: 50px;
  top: 50%;
  bottom: -50%;
  width: 1px;
  background: var(--line-strong);
}
.pipe-step:last-child::before { display: none; }


/* Invoice X-ray — sample doc with field callouts */
.xray {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 920px) { .xray { grid-template-columns: 1fr; } }

.xray-doc {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px;
  font-family: var(--ff-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--white-60);
  position: relative;
}
.xray-doc-head {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.xray-doc-title {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.02em;
}
.xray-doc-id {
  font-size: 11px;
  color: var(--white-40);
}
.xray-doc-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 4px 0;
}
.xray-doc-key {
  color: var(--white-40);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  padding-top: 3px;
}
.xray-doc-val { color: var(--white); }

/* Highlighted/extracted values */
.xray-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 1px 6px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-edge);
  border-radius: 3px;
  color: var(--accent);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.xray-tag::before {
  content: attr(data-num);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: var(--accent);
  color: var(--bg);
  padding: 1px 4px;
  border-radius: 2px;
  align-self: center;
}

.xray-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.xray-legend-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.xray-legend-row:last-child { border-bottom: 0; }
.xray-legend-num {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: var(--accent);
  color: var(--bg);
  padding: 3px 6px;
  border-radius: 3px;
  text-align: center;
  height: 22px;
  display: inline-grid;
  place-items: center;
}
.xray-legend-body { display: flex; flex-direction: column; gap: 2px; }
.xray-legend-key {
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--white);
}
.xray-legend-desc {
  font-size: 13px;
  color: var(--white-60);
  line-height: 1.45;
}


/* Spec grid — throughput / reliability */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
@media (max-width: 820px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .spec-grid { grid-template-columns: 1fr; } }

.spec-cell {
  background: var(--bg-deep);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.spec-cell-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white-40);
}
.spec-cell-value {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--white);
}
.spec-cell-value.accent { color: var(--accent); }
.spec-cell-desc {
  font-size: 13px;
  color: var(--white-60);
  margin-top: 6px;
  line-height: 1.4;
}


/* Handoff — where SkyDox's output goes */
.handoff {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: stretch;
  padding: 40px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
}
@media (max-width: 720px) { .handoff { grid-template-columns: 1fr; padding: 28px; gap: 24px; } }

.handoff-source {
  background: var(--bg);
  border: 1px solid var(--accent-edge);
  border-radius: 12px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 14px;
}
.handoff-source-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
}
.handoff-source-name {
  font-family: var(--ff-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1;
}
.handoff-source-emit {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-40);
  margin-top: 8px;
}

.handoff-targets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 720px) { .handoff-targets { grid-template-columns: 1fr; } }

.handoff-target {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  min-height: 160px;
}
.handoff-target::before {
  content: '→';
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 20px;
  font-family: var(--ff-mono);
  font-weight: 500;
}
@media (max-width: 720px) {
  .handoff-target::before { display: none; }
}
.handoff-target-name {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}
.handoff-target-desc {
  font-size: 14px;
  color: var(--white-60);
  line-height: 1.5;
}


/* Module-page hero specific */
.module-hero {
  padding: 64px 0 32px;
}
.module-marker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: 1px solid var(--line-edge);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-60);
  margin-bottom: 32px;
}
.module-marker .dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}
.module-marker .idx { color: var(--accent); }

.crumb {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--white-40);
  letter-spacing: 0.03em;
  margin-bottom: 40px;
}
.crumb a { color: var(--white-60); }
.crumb a:hover { color: var(--white); }
.crumb .here { color: var(--white); }
.crumb .pos { color: var(--white-40); }


/* ── 8c. AVIATION — SkyIQ: translation + journal composer ─────── */

/* Translator — recon row on left, journal entry on right */
.tx {
  background: var(--bg-deep);
  border: 1px solid var(--line-edge);
  border-radius: 16px;
  overflow: hidden;
}
.tx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.tx-head-left { display: flex; align-items: center; gap: 14px; }
.tx-id {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white-60);
}
.tx-pending {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--warn);
}
.tx-pending::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warn);
}

.tx-body {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0;
}
@media (max-width: 820px) {
  .tx-body { grid-template-columns: 1fr; }
}

.tx-col {
  padding: 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tx-col-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.tx-col-label.accent { color: var(--accent); border-bottom-color: var(--accent-edge); }

.tx-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: baseline;
  font-family: var(--ff-mono);
  font-size: 13px;
}
.tx-row-key {
  color: var(--white-40);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tx-row-val { color: var(--white); }
.tx-row-val.accent { color: var(--accent); }
.tx-row-val.dim { color: var(--white-60); }

/* The arrow column in the middle */
.tx-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--bg);
  position: relative;
}
.tx-arrow::after {
  content: '→';
  font-family: var(--ff-mono);
  font-size: 24px;
  color: var(--accent);
  animation: tx-pulse 2.4s ease-in-out infinite;
}
@keyframes tx-pulse {
  0%, 100% { opacity: 0.4; transform: translateX(-4px); }
  50%      { opacity: 1;   transform: translateX(4px); }
}
@media (max-width: 820px) {
  .tx-arrow {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
  }
  .tx-arrow::after { transform: rotate(90deg); }
  @keyframes tx-pulse {
    0%, 100% { opacity: 0.4; transform: rotate(90deg) translateX(-4px); }
    50%      { opacity: 1;   transform: rotate(90deg) translateX(4px); }
  }
}

/* Journal-entry posting lines */
.tx-entry {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 12px;
  align-items: baseline;
  font-family: var(--ff-mono);
  font-size: 13px;
  padding: 4px 0;
}
.tx-entry-dc {
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.tx-entry-dc.cr { color: var(--white-60); }
.tx-entry-acct {
  color: var(--white);
}
.tx-entry-gl {
  color: var(--white-40);
  font-size: 11px;
  display: block;
  margin-top: 2px;
}
.tx-entry-amt {
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.tx-entry-amt.neg { color: var(--err); }

.tx-foot {
  padding: 14px 24px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-40);
  letter-spacing: 0.03em;
}
.tx-foot-actions { display: flex; gap: 10px; }
.tx-foot-btn {
  padding: 6px 14px;
  border: 1px solid var(--line-edge);
  border-radius: 6px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
}
.tx-foot-btn:hover {
  border-color: var(--white-40);
  background: var(--bg-deep);
}
.tx-foot-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.tx-foot-btn.primary:hover {
  background: var(--accent-deep);
}

/* Doc-type chip on the translator left column */
.tx-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-edge);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
  align-self: flex-start;
}
.tx-doc-chip.cn { background: rgba(252, 211, 77, 0.10); border-color: rgba(252, 211, 77, 0.28); color: var(--warn); }
.tx-doc-chip.dn { background: rgba(110, 231, 183, 0.10); border-color: rgba(110, 231, 183, 0.28); color: var(--ok); }


/* Chart of accounts table */
.coa {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.coa-head {
  display: grid;
  grid-template-columns: 1fr 60px 1fr 180px;
  gap: 16px;
  padding: 16px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
}
.coa-row {
  display: grid;
  grid-template-columns: 1fr 60px 1fr 180px;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-family: var(--ff-mono);
  font-size: 14px;
  transition: background var(--t-fast);
}
.coa-row:last-child { border-bottom: 0; }
.coa-row:hover { background: var(--surface); }
.coa-field {
  color: var(--white);
}
.coa-arrow {
  color: var(--accent);
  text-align: center;
}
.coa-gl {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.coa-note {
  color: var(--white-40);
  font-size: 12px;
}
@media (max-width: 820px) {
  .coa-head { display: none; }
  .coa-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 20px;
  }
  .coa-row > * { font-size: 13px; }
  .coa-arrow { display: none; }
}


/* Destinations — where journals land */
.dest {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 920px) { .dest { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 580px) { .dest { grid-template-columns: repeat(2, 1fr); } }

.dest-card {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  transition: all var(--t-base) var(--ease);
}
.dest-card:hover {
  border-color: var(--accent-edge);
  transform: translateY(-2px);
}
.dest-card-mode {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.dest-card-name {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}
.dest-card-desc {
  font-size: 12px;
  color: var(--white-60);
  line-height: 1.4;
}


/* Posting workflow strip */
.workflow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 820px) { .workflow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .workflow { grid-template-columns: 1fr; } }

.workflow-step {
  background: var(--bg-deep);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.workflow-step-num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.workflow-step-title {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}
.workflow-step-desc {
  font-size: 13px;
  color: var(--white-60);
  line-height: 1.5;
}
.workflow-step-who {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.workflow-step-who.us { color: var(--accent); }


/* ── 8d. AVIATION — SkyConnect: live connection topology ─────── */

/* The connection panel — Tracarta at center, client systems around */
.cx {
  background: var(--bg-deep);
  border: 1px solid var(--line-edge);
  border-radius: 16px;
  overflow: hidden;
}
.cx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.cx-head-left { display: flex; align-items: center; gap: 14px; }
.cx-id {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white-60);
}
.cx-id .dim { color: var(--white-40); }
.cx-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-transform: uppercase;
}
.cx-state::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: ops-blink 1.6s ease-in-out infinite;
}

/* The topology body — grid with center "hub" and 4 corner nodes */
.cx-body {
  position: relative;
  padding: 32px 20px 40px;
  background:
    linear-gradient(transparent 0, transparent 100%),
    radial-gradient(circle at center, rgba(212, 255, 58, 0.04), transparent 60%);
  min-height: 420px;
}

.cx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
  position: relative;
  z-index: 2;
}
@media (max-width: 720px) { .cx-grid { grid-template-columns: 1fr; } }

/* The center hub — Tracarta engine */
.cx-hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: var(--bg);
  border: 1px solid var(--accent-edge);
  border-radius: 14px;
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 170px;
  box-shadow: 0 0 0 6px var(--bg-deep);
}
.cx-hub-label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-40);
}
.cx-hub-name {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.cx-hub-sub {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--white-60);
  letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .cx-hub { position: static; transform: none; box-shadow: none; margin: 16px 0; }
}

/* Each connected system tile */
.cx-node {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: border-color var(--t-base) var(--ease);
}
.cx-node.live { border-color: var(--accent-edge); }
.cx-node.idle { border-color: var(--line); }
.cx-node.warn { border-color: rgba(252, 211, 77, 0.28); }

.cx-node-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cx-node-name {
  font-family: var(--ff-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}
.cx-node-kind {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-40);
}
.cx-node-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.cx-node-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cx-node-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
}
.cx-node.live  .cx-node-status { color: var(--accent); }
.cx-node.live  .cx-node-status::before { background: var(--accent); animation: ops-blink 1.6s ease-in-out infinite; }
.cx-node.idle  .cx-node-status { color: var(--white-60); }
.cx-node.idle  .cx-node-status::before { background: var(--white-60); }
.cx-node.warn  .cx-node-status { color: var(--warn); }
.cx-node.warn  .cx-node-status::before { background: var(--warn); }
.cx-node-sync {
  color: var(--white-40);
}
.cx-node-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-60);
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.cx-node-arrow {
  color: var(--accent);
  font-weight: 600;
}
.cx-node-arrow.in  { color: var(--ok); }
.cx-node-arrow.out { color: var(--accent); }

/* The connecting lines — SVG-free, using pseudo-elements positioned across the hub */
.cx-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: none;
}
@media (min-width: 721px) {
  .cx-lines { display: block; }
  /* Diagonal lines from each corner toward center */
  .cx-line {
    position: absolute;
    background: linear-gradient(to right, var(--accent-edge), transparent 70%);
    height: 1px;
    transform-origin: 0 50%;
    opacity: 0.45;
  }
  .cx-line.tl  { top: 30%; left: 22%; width: 28%; transform: rotate(35deg); }
  .cx-line.tr  { top: 30%; right: 22%; width: 28%; transform: rotate(-35deg);
                 background: linear-gradient(to left, var(--accent-edge), transparent 70%);
                 transform-origin: 100% 50%; }
  .cx-line.bl  { bottom: 30%; left: 22%; width: 28%; transform: rotate(-35deg); }
  .cx-line.br  { bottom: 30%; right: 22%; width: 28%; transform: rotate(35deg);
                 background: linear-gradient(to left, var(--accent-edge), transparent 70%);
                 transform-origin: 100% 50%; }
}

/* Data-flow strip below the topology */
.cx-flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.cx-flow-cell {
  background: var(--bg-deep);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cx-flow-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.cx-flow-value {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.cx-flow-value.accent { color: var(--accent); }
.cx-flow-value.in     { color: var(--ok); }
.cx-flow-sub {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--white-40);
}


/* Supported systems — two-column grid */
.sys-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 820px) { .sys-grid { grid-template-columns: 1fr; } }

.sys-col {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.sys-col-head {
  padding: 18px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.sys-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.sys-row:last-child { border-bottom: 0; }
.sys-row:hover { background: var(--surface); }
.sys-row-name {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}
.sys-row-name .sub {
  font-family: var(--ff-body);
  font-size: 12px;
  color: var(--white-40);
  letter-spacing: 0;
  margin-left: 8px;
}
.sys-row-mode {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-60);
  padding: 3px 8px;
  border: 1px solid var(--line-edge);
  border-radius: 4px;
}
.sys-row-mode.live { color: var(--accent); border-color: var(--accent-edge); }


/* Sync rhythms — three cards */
.rhythm {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 820px) { .rhythm { grid-template-columns: 1fr; } }

.rhythm-card {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rhythm-card-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.rhythm-card-pace {
  font-family: var(--ff-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--white);
  line-height: 1;
}
.rhythm-card-desc {
  font-size: 14px;
  color: var(--white-60);
  line-height: 1.55;
}
.rhythm-card-eg {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--white-40);
  line-height: 1.6;
}


/* ── 8e. AVIATION — SkyLedger: verdict console + 8 verdicts ────── */

/* The verdict console — signature visual */
.vc {
  background: var(--bg-deep);
  border: 1px solid var(--line-edge);
  border-radius: 16px;
  overflow: hidden;
}
.vc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.vc-head-left { display: flex; align-items: center; gap: 14px; }
.vc-id {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white-60);
}
.vc-id .dim { color: var(--white-40); }
.vc-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-transform: uppercase;
}
.vc-state::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: ops-blink 1.6s ease-in-out infinite;
}

/* Case card — the central element that cycles */
.vc-case {
  padding: 28px;
  transition: opacity 280ms ease;
}
.vc-case-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 8px;
}
.vc-case-id {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--white);
}
.vc-case-id .dim { color: var(--white-40); }
.vc-case-conf {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white-60);
}
.vc-case-conf .pct { color: var(--accent); }

/* The three-records panel: airline / 2B / book */
.tr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 720px) { .tr { grid-template-columns: 1fr; } }

.tr-rec {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--t-base) var(--ease);
}
.tr-rec.agree   { border-color: rgba(110, 231, 183, 0.30); }
.tr-rec.differ  { border-color: rgba(252, 211, 77, 0.30); }
.tr-rec.absent  { border-color: var(--line); opacity: 0.55; }

.tr-rec-label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-40);
}
.tr-rec.agree  .tr-rec-label { color: var(--ok); }
.tr-rec.differ .tr-rec-label { color: var(--warn); }

.tr-rec-amt {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.tr-rec-amt.absent { color: var(--white-25); font-style: italic; }

.tr-rec-detail {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-60);
  line-height: 1.55;
}
.tr-rec-detail .dim { color: var(--white-40); }

/* The verdict line */
.vc-verdict {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  background: var(--bg);
  border: 1px solid var(--accent-edge);
  border-radius: 10px;
}
.vc-verdict-mark {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent-dim);
  display: inline-grid;
  place-items: center;
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
}
.vc-verdict-body { display: flex; flex-direction: column; gap: 4px; }
.vc-verdict-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.vc-verdict-text {
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--white);
  line-height: 1.45;
}
.vc-verdict-text .accent { color: var(--accent); }

/* Verdict colour modifiers */
.vc-verdict.hold    { border-color: rgba(252, 211, 77, 0.40); }
.vc-verdict.hold .vc-verdict-mark { background: rgba(252, 211, 77, 0.10); color: var(--warn); }
.vc-verdict.hold .vc-verdict-label { color: var(--warn); }

.vc-verdict.pursue  { border-color: rgba(252, 211, 77, 0.40); }
.vc-verdict.pursue .vc-verdict-mark { background: rgba(252, 211, 77, 0.10); color: var(--warn); }
.vc-verdict.pursue .vc-verdict-label { color: var(--warn); }

.vc-verdict.forfeit { border-color: rgba(252, 165, 165, 0.30); }
.vc-verdict.forfeit .vc-verdict-mark { background: rgba(252, 165, 165, 0.10); color: var(--err); }
.vc-verdict.forfeit .vc-verdict-label { color: var(--err); }

.vc-verdict.adjust,
.vc-verdict.refile,
.vc-verdict.reclaim,
.vc-verdict.dispute { /* default lime accent */ }

/* Running tally strip at the bottom of console */
.vc-tally {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) { .vc-tally { grid-template-columns: 1fr 1fr; } }

.vc-tally-cell {
  background: var(--bg-deep);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vc-tally-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.vc-tally-label::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
}
.vc-tally-label.recover::before { background: var(--accent); }
.vc-tally-label.hold::before    { background: var(--warn); }
.vc-tally-label.pursue::before  { background: var(--warn); opacity: 0.55; }
.vc-tally-label.forfeit::before { background: var(--err); }

.vc-tally-value {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.vc-tally-sub {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--white-40);
}


/* The eight-verdict catalog */
.eight {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 960px) { .eight { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .eight { grid-template-columns: 1fr; } }

.eight-card {
  background: var(--bg-deep);
  padding: 26px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background var(--t-base) var(--ease);
}
.eight-card:hover { background: var(--surface); }

.eight-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.eight-card-mark {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  display: inline-grid;
  place-items: center;
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}
.eight-card.warn .eight-card-mark { background: rgba(252, 211, 77, 0.10); color: var(--warn); }
.eight-card.err  .eight-card-mark { background: rgba(252, 165, 165, 0.10); color: var(--err); }

.eight-card-name {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--white);
}
.eight-card-pattern {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-top: 2px;
  padding: 5px 8px;
  background: var(--accent-dim);
  border-radius: 4px;
  align-self: flex-start;
}
.eight-card.warn .eight-card-pattern { background: rgba(252, 211, 77, 0.08); color: var(--warn); }
.eight-card.err  .eight-card-pattern { background: rgba(252, 165, 165, 0.08); color: var(--err); }

.eight-card-desc {
  font-size: 13.5px;
  color: var(--white-60);
  line-height: 1.55;
}
.eight-card-action {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--white-40);
  line-height: 1.5;
}


/* Position card — the cycle financial summary */
.pos {
  background: var(--bg-deep);
  border: 1px solid var(--line-edge);
  border-radius: 16px;
  overflow: hidden;
}
.pos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.pos-id {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white-60);
}
.pos-id .dim { color: var(--white-40); }
.pos-stamp {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--white-40);
}

.pos-headline {
  padding: 36px 28px 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pos-headline-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.pos-headline-amt {
  font-family: var(--ff-display);
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pos-headline-of {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--white-60);
}

.pos-split {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
@media (max-width: 720px) { .pos-split { grid-template-columns: 1fr 1fr; } }

.pos-cell {
  background: var(--bg-deep);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pos-cell-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.pos-cell-label::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
}
.pos-cell-label.recover::before { background: var(--accent); }
.pos-cell-label.hold::before    { background: var(--warn); }
.pos-cell-label.pursue::before  { background: var(--warn); opacity: 0.55; }
.pos-cell-label.forfeit::before { background: var(--err); }

.pos-cell-amt {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--white);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.pos-cell-count {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-40);
}


/* ── 8f. AVIATION — SkyLink: brand layering + economics ────────── */

/* The brand-skin mockup: side-by-side TMC-branded vs Tracarta-internal */
.skin {
  background: var(--bg-deep);
  border: 1px solid var(--line-edge);
  border-radius: 16px;
  overflow: hidden;
}
.skin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.skin-head-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.skin-head-id {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white-60);
}
.skin-head-id .dim { color: var(--white-40); }

/* Toggle pill — light/dark mode for "view as client" vs "view as ops" */
.skin-toggle {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.skin-toggle-btn {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-60);
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
}
.skin-toggle-btn.active {
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}

/* The dual-pane body */
.skin-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}
@media (max-width: 820px) { .skin-body { grid-template-columns: 1fr; } }

.skin-pane {
  padding: 32px 32px 36px;
  border-right: 1px solid var(--line);
  position: relative;
  min-height: 420px;
}
.skin-pane:last-child { border-right: 0; }
@media (max-width: 820px) {
  .skin-pane { border-right: 0; border-bottom: 1px solid var(--line); }
}

.skin-pane-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.skin-pane-tag.tmc {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border: 1px solid var(--line-edge);
}
.skin-pane-tag.us {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent-edge);
}
.skin-pane-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* The TMC-branded "panel" inside the left pane — fake client-facing UI */
.tmc-panel {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tmc-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.tmc-brand-mark {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #6B8FFF 0%, #9F7BFF 100%);
  display: inline-grid;
  place-items: center;
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--white);
  font-size: 14px;
  letter-spacing: -0.02em;
}
.tmc-brand-name {
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.015em;
}
.tmc-brand-name .sub {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--white-60);
  font-weight: 400;
  display: block;
  margin-top: 1px;
}

.tmc-headline {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tmc-headline-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.tmc-headline-amt {
  font-family: var(--ff-display);
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: #9F7BFF;
  line-height: 1;
}
.tmc-headline-of {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-60);
}

.tmc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  font-size: 13px;
}
.tmc-row:last-of-type { border-bottom: 0; }
.tmc-row-k { color: var(--white-60); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em; }
.tmc-row-v { color: var(--white); font-family: var(--ff-mono); font-size: 13px; font-variant-numeric: tabular-nums; }

.tmc-foot {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--white-40);
  display: flex;
  justify-content: space-between;
}

/* The Tracarta-internal pane — show the underlying modules */
.us-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.us-stack-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--ff-mono);
  font-size: 12px;
}
.us-stack-row .mod {
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--accent);
}
.us-stack-row .what { color: var(--white-60); font-size: 12px; }
.us-stack-row .stat {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white);
  letter-spacing: 0.02em;
}
.us-stack-row .stat .dim { color: var(--white-40); }
.us-stack-foot {
  margin-top: 4px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--white-40);
  text-align: center;
  padding: 10px 0 0;
}

/* The "invisibility bar" — the deliberate central element */
.invis-bar {
  position: absolute;
  top: 78px;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--accent-edge), var(--accent-edge), transparent);
}
.invis-bar::before {
  content: 'YOUR BRAND   |   OUR ENGINE';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  background: var(--bg-deep);
  padding: 8px 12px;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--accent);
  white-space: nowrap;
}
@media (max-width: 820px) {
  .invis-bar { display: none; }
}


/* Economics card — the unit-economics table */
.econ {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.econ-head {
  padding: 18px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.econ-head-id {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white-60);
}
.econ-head-id .dim { color: var(--white-40); }
.econ-head-tag {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 8px;
  border: 1px solid var(--accent-edge);
  border-radius: 4px;
}
.econ-body { padding: 32px 28px; }
.econ-row {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 24px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.econ-row:last-of-type { border-bottom: 0; }
.econ-row.total { border-top: 1px solid var(--line-edge); padding-top: 22px; margin-top: 8px; }

.econ-row-k {
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--white-60);
  line-height: 1.4;
}
.econ-row-k .lbl {
  display: block;
  font-family: var(--ff-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}
.econ-row-v {
  text-align: right;
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.econ-row.total .econ-row-v {
  font-size: 36px;
  color: var(--accent);
  letter-spacing: -0.035em;
}
.econ-row-v .unit {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--white-40);
  font-weight: 400;
  margin-left: 6px;
  letter-spacing: 0.02em;
}

.econ-foot {
  padding: 16px 28px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-40);
  letter-spacing: 0.03em;
  line-height: 1.5;
}


/* Ownership matrix — three-column responsibility table */
.own {
  display: grid;
  grid-template-columns: 220px 1fr 1fr 1fr;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 820px) {
  .own { grid-template-columns: 1fr; }
}

.own-cell {
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.own-cell:nth-child(4n) { border-right: 0; }
.own-cell.head {
  background: var(--surface);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.own-cell.head.you  { color: var(--accent); }
.own-cell.head.them { color: var(--white); }
.own-cell.head.us   { color: var(--white-60); }

.own-cell.rowhead {
  background: var(--surface);
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}

.own-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.own-tag.owns  { background: var(--accent-dim); color: var(--accent); }
.own-tag.uses  { background: rgba(255, 255, 255, 0.08); color: var(--white-60); }
.own-tag.none  { color: var(--white-25); }

.own-detail {
  font-size: 13px;
  color: var(--white-60);
  line-height: 1.5;
}
@media (max-width: 820px) {
  .own-cell { border-right: 0; }
  .own-cell.head:not(:first-child) { display: none; }
}


/* Three-stat row for the opportunity numbers */
.opp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 56px;
}
@media (max-width: 820px) { .opp-stats { grid-template-columns: 1fr; } }

.opp-stat {
  background: var(--bg-deep);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.opp-stat-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.opp-stat-value {
  font-family: var(--ff-display);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--accent);
  line-height: 1;
}
.opp-stat-desc {
  font-size: 14px;
  color: var(--white-60);
  line-height: 1.5;
}


/* ── 8g. AVIATION — SkyBoard: portal surfaces ─────────────────── */

/* The dash — SkyBoard home screen mockup */
.dash {
  background: var(--bg-deep);
  border: 1px solid var(--line-edge);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}

/* Top app bar */
.dash-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.dash-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dash-bar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.015em;
}
.dash-bar-brand::before {
  content: '';
  width: 16px; height: 16px;
  background: var(--accent);
  border-radius: 3px;
}
.dash-bar-org {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-60);
  padding-left: 16px;
  border-left: 1px solid var(--line);
  letter-spacing: 0.03em;
}
.dash-bar-org .dim { color: var(--white-40); }

.dash-bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dash-bar-period {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white);
  letter-spacing: 0.03em;
}
.dash-bar-period::after {
  content: '⌄';
  color: var(--white-40);
  font-size: 12px;
  margin-left: 2px;
}
.dash-bar-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--bg);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 12px;
  display: inline-grid;
  place-items: center;
}

/* Headline strip */
.dash-headline {
  padding: 28px 28px 26px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.dash-headline-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-headline-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.dash-headline-amt {
  font-family: var(--ff-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dash-headline-of {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--white-60);
}
.dash-headline-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.dash-cycle-tag {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 10px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-edge);
  border-radius: 4px;
}
.dash-cycle-date {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-60);
}

/* Four-pile strip */
.dash-piles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) { .dash-piles { grid-template-columns: 1fr 1fr; } }

.dash-pile {
  background: var(--bg-deep);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: background var(--t-base) var(--ease);
  position: relative;
}
.dash-pile:hover { background: var(--surface); }
.dash-pile-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.dash-pile-head::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
}
.dash-pile.recover .dash-pile-head { color: var(--accent); }
.dash-pile.recover .dash-pile-head::before { background: var(--accent); }
.dash-pile.hold    .dash-pile-head { color: var(--warn); }
.dash-pile.hold    .dash-pile-head::before { background: var(--warn); }
.dash-pile.pursue  .dash-pile-head { color: var(--warn); }
.dash-pile.pursue  .dash-pile-head::before { background: var(--warn); opacity: 0.55; }
.dash-pile.forfeit .dash-pile-head { color: var(--err); }
.dash-pile.forfeit .dash-pile-head::before { background: var(--err); }

.dash-pile-count {
  font-family: var(--ff-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--white);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dash-pile-amt {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--white-60);
  letter-spacing: 0.02em;
}
.dash-pile-open {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-pile:hover .dash-pile-open { color: var(--accent); }
.dash-pile-open::after { content: '→'; color: currentColor; }

/* Queue panel — "what's waiting for you" */
.dash-queue {
  padding: 24px 28px 28px;
}
.dash-queue-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dash-queue-title {
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--white);
}
.dash-queue-meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-40);
  letter-spacing: 0.03em;
}

.dash-queue-row {
  display: grid;
  grid-template-columns: 120px 1fr 140px auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--bg);
  transition: border-color var(--t-fast);
}
.dash-queue-row:hover { border-color: var(--line-edge); }
.dash-queue-row:last-child { margin-bottom: 0; }

.dash-queue-id {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--white);
  letter-spacing: 0.03em;
}
.dash-queue-id .dim { color: var(--white-40); }
.dash-queue-what {
  font-size: 13px;
  color: var(--white-80);
  line-height: 1.4;
}
.dash-queue-who {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-60);
  letter-spacing: 0.03em;
}
.dash-queue-who .dim { color: var(--white-40); }

.dash-queue-verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dash-queue-verdict::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
}
.dash-queue-verdict.pursue  { background: rgba(252, 211, 77, 0.12); color: var(--warn); }
.dash-queue-verdict.pursue::before  { background: var(--warn); }
.dash-queue-verdict.hold    { background: rgba(252, 211, 77, 0.08); color: var(--warn); }
.dash-queue-verdict.hold::before    { background: var(--warn); opacity: 0.55; }
.dash-queue-verdict.dispute { background: rgba(252, 165, 165, 0.12); color: var(--err); }
.dash-queue-verdict.dispute::before { background: var(--err); }
.dash-queue-verdict.adjust  { background: var(--accent-dim); color: var(--accent); }
.dash-queue-verdict.adjust::before  { background: var(--accent); }

@media (max-width: 720px) {
  .dash-queue-row { grid-template-columns: 1fr; gap: 6px; }
  .dash-queue-who { font-size: 10px; }
}


/* Pile detail cards on the page itself (not in dash) */
.piles-page {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 820px) { .piles-page { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .piles-page { grid-template-columns: 1fr; } }

.pile-page {
  background: var(--bg-deep);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background var(--t-base) var(--ease);
}
.pile-page:hover { background: var(--surface); }
.pile-page-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pile-page-head::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
}
.pile-page.recover .pile-page-head { color: var(--accent); }
.pile-page.recover .pile-page-head::before { background: var(--accent); }
.pile-page.hold    .pile-page-head { color: var(--warn); }
.pile-page.hold    .pile-page-head::before { background: var(--warn); }
.pile-page.pursue  .pile-page-head { color: var(--warn); }
.pile-page.pursue  .pile-page-head::before { background: var(--warn); opacity: 0.55; }
.pile-page.forfeit .pile-page-head { color: var(--err); }
.pile-page.forfeit .pile-page-head::before { background: var(--err); }

.pile-page-name {
  font-family: var(--ff-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--white);
}
.pile-page-desc {
  font-size: 13.5px;
  color: var(--white-60);
  line-height: 1.55;
  margin-top: 4px;
}
.pile-page-meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-40);
  letter-spacing: 0.03em;
}


/* Workflow rows — three personas */
.flow {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.flow:last-child { border-bottom: 0; }
@media (max-width: 820px) { .flow { grid-template-columns: 1fr; gap: 20px; } }

.flow-persona {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.flow-persona-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.flow-persona-name {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}
.flow-persona-desc {
  font-size: 14px;
  color: var(--white-60);
  line-height: 1.55;
}

/* Workflow mock — small UI vignettes */
.flow-mock {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--ff-mono);
}
.flow-mock-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--white-60);
  letter-spacing: 0.04em;
}
.flow-mock-head .right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
}
.flow-mock-head .right::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.flow-mock-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 580px) { .flow-mock-grid { grid-template-columns: 1fr 1fr; } }

.flow-mock-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flow-mock-stat-k {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.flow-mock-stat-v {
  font-family: var(--ff-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}
.flow-mock-stat-v.accent { color: var(--accent); }
.flow-mock-stat-v.warn   { color: var(--warn); }

.flow-mock-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.flow-mock-row:last-of-type { border-bottom: 0; }
.flow-mock-row-id {
  color: var(--white);
  letter-spacing: 0.03em;
}
.flow-mock-row-id .dim { color: var(--white-40); }
.flow-mock-row-act {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
.flow-mock-row-act.warn { color: var(--warn); }

.flow-mock-foot {
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--white-40);
  padding-top: 10px;
  border-top: 1px solid var(--line);
  text-align: right;
}


/* Anatomy view — one-invoice detail mockup */
.anatomy {
  background: var(--bg-deep);
  border: 1px solid var(--line-edge);
  border-radius: 16px;
  overflow: hidden;
}
.anatomy-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.anatomy-id {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--white);
}
.anatomy-id .dim { color: var(--white-40); }
.anatomy-verdict-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(252, 211, 77, 0.12);
  color: var(--warn);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.anatomy-verdict-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warn);
}

.anatomy-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1px;
  background: var(--line);
}
@media (max-width: 820px) { .anatomy-body { grid-template-columns: 1fr; } }

.anatomy-main {
  background: var(--bg-deep);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.anatomy-side {
  background: var(--bg-deep);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.anatomy-section-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 10px;
}

/* Re-use .tr for three-records inside anatomy */

.anatomy-action {
  padding: 16px 18px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-edge);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.anatomy-action-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.anatomy-action-text {
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--white);
  line-height: 1.5;
}
.anatomy-action-cta {
  margin-top: 6px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.anatomy-trail-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 12px;
  line-height: 1.5;
}
.anatomy-trail-item:last-of-type { border-bottom: 0; }
.anatomy-trail-when { color: var(--white-40); letter-spacing: 0.03em; }
.anatomy-trail-what { color: var(--white-80); }
.anatomy-trail-what .who { color: var(--accent); }

.anatomy-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color var(--t-fast);
  cursor: pointer;
}
.anatomy-doc:hover { border-color: var(--accent-edge); }
.anatomy-doc-icon {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: var(--accent-dim);
  color: var(--accent);
  display: inline-grid;
  place-items: center;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.anatomy-doc-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.anatomy-doc-name {
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--white);
  letter-spacing: 0.02em;
}
.anatomy-doc-meta {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--white-40);
}
.anatomy-doc-act {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.04em;
}


/* Download-bundle cards */
.bundles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 820px) { .bundles { grid-template-columns: 1fr; } }

.bundle {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--t-base) var(--ease);
}
.bundle:hover { border-color: var(--accent-edge); }

.bundle-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--accent-dim);
  color: var(--accent);
  display: inline-grid;
  place-items: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.bundle-name {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}
.bundle-desc {
  font-size: 14px;
  color: var(--white-60);
  line-height: 1.55;
}
.bundle-contents {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-40);
  line-height: 1.7;
}
.bundle-contents strong { color: var(--white-60); font-weight: 500; }


/* ── 9. PRICING — model cards + routing + baseline ─────────────── */

/* Three-card pricing grid — each is a model, not a tier */
.price {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 960px) { .price { grid-template-columns: 1fr; } }

.price-card {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 40px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: relative;
  transition: border-color var(--t-base) var(--ease);
}
.price-card:hover { border-color: var(--line-edge); }

/* Per-model character variants */
.price-card.per-inv  { /* default */ }
.price-card.fixed    { background: linear-gradient(180deg, var(--bg-deep) 0%, rgba(212, 255, 58, 0.02) 100%); border-color: var(--accent-edge); }
.price-card.success  { /* default */ }

.price-card-num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.price-card-num .idx {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--accent);
}
.price-card.fixed .price-card-num .idx { color: var(--accent); }

.price-card-name {
  font-family: var(--ff-display);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--white);
  margin-top: -4px;
}

.price-card-tag {
  font-family: var(--ff-body);
  font-size: 17px;
  color: var(--white);
  line-height: 1.55;
  max-width: 32ch;
}

.price-card-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.price-card-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.price-card-block-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
}
.price-card-block-label.accent { color: var(--accent); }
.price-card-block-label.warn   { color: var(--warn); }

.price-card-block-text {
  font-family: var(--ff-body);
  font-size: 16px;
  color: var(--white-80);
  line-height: 1.65;
}
.price-card-block-text .strong {
  color: var(--white);
  font-weight: 500;
}
.price-card-block-text .anchor {
  color: var(--accent);
  font-weight: 500;
}

.price-card-foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.price-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  transition: gap var(--t-base) var(--ease);
}
.price-card-cta:hover { gap: 12px; }
.price-card-cta::after { content: '→'; }


/* Routing block — three "If you're..." statements */
.routing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 820px) { .routing { grid-template-columns: 1fr; } }

.routing-card {
  background: var(--bg-deep);
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.routing-if {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.routing-then {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--white);
}
.routing-then em { color: var(--accent); font-style: normal; }

.routing-because {
  font-size: 14px;
  color: var(--white-60);
  line-height: 1.55;
}

.routing-pick {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}
.routing-pick .model { color: var(--accent); }


/* Worked-example table — strong disclaimer + shape only */
.shape {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.shape-head {
  padding: 18px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.shape-head-id {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white-60);
}
.shape-head-id .dim { color: var(--white-40); }
.shape-disclaimer {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--warn);
  padding: 3px 10px;
  border: 1px solid rgba(252, 211, 77, 0.28);
  background: rgba(252, 211, 77, 0.08);
  border-radius: 4px;
}

.shape-table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media (max-width: 720px) {
  .shape-table { grid-template-columns: 1fr; }
}

.shape-col {
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid var(--line);
}
.shape-col:last-child { border-right: 0; }
@media (max-width: 720px) {
  .shape-col { border-right: 0; border-bottom: 1px solid var(--line); }
  .shape-col:last-child { border-bottom: 0; }
}

.shape-col.head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
  padding: 14px 22px;
}
.shape-col.head:last-child { font-family: var(--ff-mono); }

.shape-row {
  display: contents;
}

.shape-cell {
  padding: 16px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--white-80);
}
.shape-cell:nth-child(4n) { border-right: 0; }
.shape-cell.label {
  background: var(--surface);
  color: var(--white);
  font-family: var(--ff-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  font-size: 14px;
}
.shape-cell.shape-amt {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.shape-cell.shape-amt-warn {
  color: var(--warn);
  font-variant-numeric: tabular-nums;
}
.shape-cell .sub {
  display: block;
  font-size: 11px;
  color: var(--white-40);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

.shape-foot {
  padding: 18px 28px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-60);
  letter-spacing: 0.02em;
  line-height: 1.55;
}


/* Baseline — what every plan includes */
.baseline {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.baseline-head {
  padding: 22px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.baseline-head-title {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}
.baseline-head-meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-40);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.baseline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}
@media (max-width: 720px) { .baseline-grid { grid-template-columns: 1fr; } }

.baseline-item {
  background: var(--bg-deep);
  padding: 22px 28px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  align-items: start;
}
.baseline-item-mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  display: inline-grid;
  place-items: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  margin-top: 1px;
}
.baseline-item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.baseline-item-title {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--white);
}
.baseline-item-desc {
  font-size: 13.5px;
  color: var(--white-60);
  line-height: 1.55;
}


/* Enterprise & white-label note row */
.note-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 720px) { .note-row { grid-template-columns: 1fr; } }

.note-card {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--t-base) var(--ease);
}
.note-card:hover { border-color: var(--line-edge); }

.note-card-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.note-card-title {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
}
.note-card-desc {
  font-size: 14px;
  color: var(--white-60);
  line-height: 1.55;
}
.note-card-cta {
  margin-top: 8px;
  font-family: var(--ff-ui);
  font-size: 14px;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.note-card-cta::after { content: '→'; transition: transform var(--t-base) var(--ease); }
.note-card-cta:hover::after { transform: translateX(4px); }

/* ── 10. CONTACT — adaptive intent form + response panel ────────── */

/* The contact hero is built around the intent selector. Three intents
   (Audit / Quote / Partner). The form below changes shape based on
   the selected intent. Pricing-page CTAs land here with ?model=...
   pre-selecting Quote and biasing the model field. */

.ct-hero { position: relative; }

.ct-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 32px;
}
.ct-eyebrow-row .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 255, 58, 0.15);
  animation: ct-pulse 2.4s ease-in-out infinite;
}
@keyframes ct-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.ct-eyebrow-row .sep { color: var(--white-25); }

/* Intent selector — three pills, one active, drives the form */

.intent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-deep);
  margin-top: 40px;
}
@media (max-width: 720px) {
  .intent { grid-template-columns: 1fr; }
}

.intent-opt {
  position: relative;
  padding: 24px 24px 22px;
  border-right: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--t-base) var(--ease);
  text-align: left;
  background: transparent;
  color: inherit;
  font: inherit;
  display: block;
  width: 100%;
}
.intent-opt:last-child { border-right: 0; }
@media (max-width: 720px) {
  .intent-opt { border-right: 0; border-bottom: 1px solid var(--line); }
  .intent-opt:last-child { border-bottom: 0; }
}
.intent-opt:hover { background: rgba(255, 255, 255, 0.015); }
.intent-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.intent-opt.active {
  background: rgba(212, 255, 58, 0.04);
}
.intent-opt.active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
}

.intent-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 10px;
}
.intent-opt.active .intent-mark { color: var(--accent); }

.intent-mark-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--white-25);
  transition: background var(--t-base) var(--ease);
}
.intent-opt.active .intent-mark-dot { background: var(--accent); }

.intent-name {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 6px;
}

.intent-desc {
  font-size: 13px;
  color: var(--white-60);
  line-height: 1.5;
}

/* The form itself — two-column on wide, stacks below */

.ct-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  margin-top: 56px;
  align-items: start;
}
@media (max-width: 980px) {
  .ct-shell { grid-template-columns: 1fr; gap: 40px; }
}

.form {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 44px);
}

.form-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.form-head-title {
  font-family: var(--ff-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.form-head-mode {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.form-head-mode .accent { color: var(--accent); }

.field {
  margin-bottom: 22px;
  display: block;
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              max-height 0.36s var(--ease),
              margin-bottom 0.36s var(--ease);
  overflow: hidden;
  max-height: 320px;
}
.field.hidden {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  pointer-events: none;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}

.field-label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 8px;
}
.field-label .req { color: var(--accent); margin-left: 4px; }
.field-label .opt { color: var(--white-25); text-transform: none; letter-spacing: 0; font-size: 11px; margin-left: 6px; }

.field-input,
.field-textarea,
.field-select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--white);
  font-family: var(--ff-ui);
  font-size: 15px;
  font-weight: 400;
  transition: border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
  box-sizing: border-box;
}
.field-input::placeholder,
.field-textarea::placeholder { color: var(--white-25); }
.field-input:hover,
.field-textarea:hover,
.field-select:hover { border-color: var(--line-edge); }
.field-input:focus,
.field-textarea:focus,
.field-select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-deep);
}

.field-textarea {
  resize: vertical;
  min-height: 110px;
  font-family: var(--ff-body);
  line-height: 1.55;
}

.field-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--white-60) 50%),
                    linear-gradient(135deg, var(--white-60) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
  cursor: pointer;
}

/* Compact pill-style select for tighter rows (model selector) */
.field-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.field-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--white-60);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.field-pill:hover { border-color: var(--line-edge); color: var(--white); }
.field-pill.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(212, 255, 58, 0.04);
}
.field-pill .pill-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--white-25);
}
.field-pill.active .pill-dot { background: var(--accent); }

/* Hidden native input that drives the value behind the pills */
.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;
}

.form-foot {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.form-foot-note {
  font-size: 13px;
  color: var(--white-40);
  max-width: 36ch;
  line-height: 1.5;
}
.form-foot-note .accent { color: var(--accent); }

/* The right column — response panel + alt channels */

.ct-side { display: flex; flex-direction: column; gap: 24px; }

.resp-card {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
}
.resp-card-h {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.resp-card-title {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  line-height: 1.25;
}
.resp-steps { display: flex; flex-direction: column; gap: 0; }
.resp-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.resp-step:first-child { border-top: 0; padding-top: 0; }
.resp-step:last-child { padding-bottom: 0; }
.resp-step-when {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  padding-top: 2px;
}
.resp-step-what-h {
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-bottom: 4px;
}
.resp-step-what-b {
  font-size: 13px;
  color: var(--white-60);
  line-height: 1.55;
}

/* Alternative channels — for when the form isn't the right move */

.alt-card {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 32px;
}
.alt-card-h {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 18px;
}
.alt-list { display: flex; flex-direction: column; }
.alt-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.alt-row:first-child { border-top: 0; padding-top: 0; }
.alt-row:last-child { padding-bottom: 0; }
.alt-row-label {
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--white);
}
.alt-row-label .alt-row-desc {
  display: block;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--white-40);
  letter-spacing: 0;
  margin-top: 2px;
}
.alt-row-link {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--accent);
  border-bottom: 1px dashed var(--accent-edge);
  padding-bottom: 1px;
  white-space: nowrap;
}
.alt-row-link:hover { border-bottom-color: var(--accent); }

/* Office card — the "built in India" reveal */

.office {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-deep);
}
@media (max-width: 720px) {
  .office { grid-template-columns: 1fr; }
}
.office-cell {
  padding: 32px;
  border-right: 1px solid var(--line);
}
.office-cell:last-child { border-right: 0; }
@media (max-width: 720px) {
  .office-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .office-cell:last-child { border-bottom: 0; }
}
.office-h {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 16px;
}
.office-h .dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
}
.office-name {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.office-addr {
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--white-60);
  line-height: 1.6;
  margin-bottom: 16px;
}
.office-meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--white-40);
}
.office-meta-row + .office-meta-row { margin-top: 4px; }
.office-meta .k { color: var(--white-25); }
.office-meta .v { color: var(--white-60); }

/* Submission success / failure flash */

.form-flash {
  display: none;
  margin-top: 20px;
  padding: 16px 20px;
  background: rgba(212, 255, 58, 0.04);
  border: 1px solid var(--accent-edge);
  border-radius: 10px;
  font-size: 14px;
  color: var(--white);
  line-height: 1.5;
}
.form-flash.shown { display: block; }
.form-flash .accent { color: var(--accent); }
.form-flash a { color: var(--accent); border-bottom: 1px solid var(--accent-edge); }
.form-flash a:hover { border-bottom-color: var(--accent); }
/* State variants — pending / success / error */
.form-flash.pending { background: rgba(245, 245, 240, 0.04); border-color: var(--line-edge); color: var(--white-60); }
.form-flash.success { background: rgba(212, 255, 58, 0.06); border-color: var(--accent-edge); }
.form-flash.error   { background: rgba(255, 90, 90, 0.06); border-color: rgba(255, 90, 90, 0.35); color: var(--white); }
.form-flash.error a { color: rgb(255, 160, 160); border-bottom-color: rgba(255, 90, 90, 0.5); }

/* contact-specific small utilities */
.section-stack { padding-top: 0; }

.ct-notlist-h { color: var(--white-40); }
.ct-notlist {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: var(--white-60);
  line-height: 1.7;
}
.ct-notlist-end {
  color: var(--accent);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}


/* ── 11. SOLUTIONS-TMCs — route map + revenue calculator + anatomy ─ */

/* The TMC audience page. Signature visual is the .routemap — TMCs
   already operate routes (Booking, Expense, Filing); GST Recovery
   is the route nobody's flying yet. Paired with a live revenue
   calculator (.tcalc) that answers the only number a TMC really
   wants: what new annual revenue line does this become. */

/* ── Route map (signature visual) ─────────────────────────────── */

.routemap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-deep);
  overflow: hidden;
}

.routemap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.routemap-head-id {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.routemap-head-id .dim { color: var(--white-25); margin: 0 6px; }
.routemap-head-tag {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.routemap-head-tag .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 255, 58, 0.15);
  animation: rm-pulse 2.4s ease-in-out infinite;
}
@keyframes rm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.routemap-body {
  padding: 36px 22px 28px;
}

.routemap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
@media (max-width: 720px) {
  .routemap-grid { grid-template-columns: 1fr 1fr; }
}

.route {
  position: relative;
  padding: 18px 16px 20px;
  text-align: center;
  border-right: 1px dashed var(--line);
}
.route:last-child { border-right: 0; }
@media (max-width: 720px) {
  .route { border-right: 0; border-bottom: 1px dashed var(--line); padding: 16px 12px; }
  .route:nth-child(2n) { border-right: 0; }
  .route:nth-child(odd) { border-right: 1px dashed var(--line); }
  .route:last-child, .route:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

.route-icon {
  width: 38px;
  height: 38px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--white-60);
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 500;
}

.route.live .route-icon {
  border-color: var(--white-25);
  color: var(--white);
}
.route.new .route-icon {
  border-color: var(--accent);
  background: rgba(212, 255, 58, 0.06);
  color: var(--accent);
  position: relative;
}
.route.new .route-icon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent-edge);
  animation: rm-orbit 3s ease-in-out infinite;
}
@keyframes rm-orbit {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.18); opacity: 0; }
}

.route-name {
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.route.new .route-name { color: var(--accent); }

.route-tag {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-25);
}
.route.live .route-tag { color: var(--white-40); }
.route.new .route-tag  { color: var(--accent); }

.route-status {
  margin-top: 10px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--white-25);
}
.route.live .route-status { color: var(--ok); }
.route.new .route-status  { color: var(--accent); }

/* The connecting flight line (visual rail between routes) */
.routemap-rail {
  position: relative;
  margin: 6px 0 0;
  height: 22px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media (max-width: 720px) { .routemap-rail { display: none; } }
.routemap-rail-cell {
  position: relative;
}
.routemap-rail-cell::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--white-25);
}
.routemap-rail-cell.live::before { background: var(--ok); }
.routemap-rail-cell.new::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(212, 255, 58, 0.12);
}

.routemap-foot {
  margin-top: 14px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-40);
  letter-spacing: 0.02em;
  text-align: center;
}
.routemap-foot .accent { color: var(--accent); }

/* ── TMC revenue calculator (live) ────────────────────────────── */

.tcalc {
  margin-top: 28px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
}
.tcalc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.tcalc-h {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.tcalc-h .accent { color: var(--accent); }
.tcalc-foot-tag {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--white-25);
}

.tcalc-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) { .tcalc-inputs { grid-template-columns: 1fr; } }

.tcalc-field {
  display: block;
}
.tcalc-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 8px;
  display: block;
}
.tcalc-input-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 10px;
  padding: 8px 14px;
  transition: border-color var(--t-base) var(--ease);
}
.tcalc-input-wrap:focus-within { border-color: var(--accent); }
.tcalc-prefix {
  font-family: var(--ff-display);
  font-size: 18px;
  color: var(--white-60);
}
.tcalc-input {
  flex: 1;
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--white);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 22px;
  padding: 4px 0;
  appearance: textfield;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}
.tcalc-input::-webkit-outer-spin-button,
.tcalc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tcalc-suffix {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-40);
  letter-spacing: 0.04em;
}

.tcalc-out {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
}
@media (max-width: 560px) { .tcalc-out { grid-template-columns: 1fr; } }

.tcalc-out-cell {
  padding: 18px 18px 16px;
  border-right: 1px solid var(--line);
}
.tcalc-out-cell:last-child { border-right: 0; }
@media (max-width: 560px) {
  .tcalc-out-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .tcalc-out-cell:last-child { border-bottom: 0; }
}
.tcalc-out-label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 8px;
}
.tcalc-out-cell.primary .tcalc-out-label { color: var(--accent); }
.tcalc-out-value {
  font-family: var(--ff-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.tcalc-out-cell.primary .tcalc-out-value { color: var(--accent); }
.tcalc-out-unit {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--white-25);
  letter-spacing: 0.05em;
  margin-left: 4px;
}
.tcalc-out-sub {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--white-40);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.tcalc-hint {
  margin-top: 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-25);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* ── Two-anatomies split (before / after carrying this route) ──── */

.anatomy2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
@media (max-width: 820px) { .anatomy2 { grid-template-columns: 1fr; } }

.anatomy2-cell {
  padding: 32px;
  background: var(--bg-deep);
}
.anatomy2-cell.before {
  border-right: 1px solid var(--line);
}
.anatomy2-cell.after {
  background: linear-gradient(180deg, var(--bg-deep) 0%, rgba(212, 255, 58, 0.025) 100%);
}
@media (max-width: 820px) {
  .anatomy2-cell.before { border-right: 0; border-bottom: 1px solid var(--line); }
}

.anatomy2-cell .a2-tag {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--white-40);
  margin-bottom: 18px;
}
.anatomy2-cell.after .a2-tag {
  border-color: var(--accent-edge);
  color: var(--accent);
}

.a2-h {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  line-height: 1.25;
}
.anatomy2-cell.after .a2-h .accent { color: var(--accent); }

.a2-list { display: flex; flex-direction: column; gap: 0; }
.a2-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.a2-row:first-child { border-top: 0; padding-top: 4px; }
.a2-row-mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  margin-top: 1px;
}
.anatomy2-cell.before .a2-row-mark {
  background: rgba(252, 165, 165, 0.08);
  color: var(--err);
  border: 1px solid rgba(252, 165, 165, 0.2);
}
.anatomy2-cell.after .a2-row-mark {
  background: rgba(212, 255, 58, 0.06);
  color: var(--accent);
  border: 1px solid var(--accent-edge);
}
.a2-row-text {
  font-size: 14px;
  color: var(--white-60);
  line-height: 1.55;
}
.a2-row-text .strong { color: var(--white); font-weight: 500; }

/* ── Routing cards at the bottom — three doors out of the page ── */

.tmc-routing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 820px) { .tmc-routing { grid-template-columns: 1fr; } }

.tmc-rcard {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.tmc-rcard:hover {
  border-color: var(--accent-edge);
  transform: translateY(-2px);
}
.tmc-rcard-h {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 14px;
}
.tmc-rcard-h .num { color: var(--accent); margin-right: 8px; }
.tmc-rcard-title {
  font-family: var(--ff-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  line-height: 1.3;
}
.tmc-rcard-body {
  font-size: 13.5px;
  color: var(--white-60);
  line-height: 1.55;
  margin-bottom: 20px;
  flex: 1;
}
.tmc-rcard-cta {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tmc-rcard-cta::after {
  content: '→';
  transition: transform var(--t-base) var(--ease);
}
.tmc-rcard:hover .tmc-rcard-cta::after { transform: translateX(4px); }


/* ── 12. PLATFORM (SkySuite) — airspace + layers + module cards ──── */

/* The platform overview page. Hero is the SkySuite airspace —
   three altitudes (Engine / Delivery / Partner), six modules placed
   on those altitudes as aircraft markers. Then three deepened
   layer sections, the composition principle, the contract grid,
   the pickguide, FAQ. */

/* ── The airspace hero (signature visual) ─────────────────────── */

.airspace {
  position: relative;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.airspace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.airspace-head-id {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.airspace-head-id .dim { color: var(--white-25); margin: 0 6px; }
.airspace-head-tag {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.airspace-head-tag .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 255, 58, 0.15);
  animation: as-pulse 2.4s ease-in-out infinite;
}
@keyframes as-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.airspace-body {
  padding: 0;
  position: relative;
}

/* The altitude column — left axis labels for each layer */
.airspace-stack {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0;
}
@media (max-width: 720px) {
  .airspace-stack { grid-template-columns: 1fr; }
}

.airspace-axis {
  border-right: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
@media (max-width: 720px) {
  .airspace-axis { display: none; }
}
.airspace-axis-cell {
  flex: 1;
  padding: 18px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.airspace-axis-cell:last-child { border-bottom: 0; }
.airspace-axis-alt {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--white-25);
}
.airspace-axis-layer {
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--white);
}
.airspace-axis-cell.partner .airspace-axis-layer { color: var(--accent); }

.airspace-rows {
  display: flex;
  flex-direction: column;
}

.airspace-row {
  position: relative;
  padding: 22px 24px 24px;
  border-bottom: 1px solid var(--line);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 36px 36px;
  background-position: 0 0;
  background-color: transparent;
}
.airspace-row:last-child { border-bottom: 0; }
.airspace-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(38, 38, 38, 0.6) 0%, rgba(26, 26, 26, 0.2) 100%);
  pointer-events: none;
}

/* Mobile axis stripe inside each row (shown when axis column is hidden) */
.airspace-row-mobile-axis {
  display: none;
  position: relative;
  z-index: 2;
  margin-bottom: 14px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
}
.airspace-row-mobile-axis .layer {
  color: var(--white);
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-left: 10px;
  text-transform: none;
}
.airspace-row.partner .airspace-row-mobile-axis .layer { color: var(--accent); }
@media (max-width: 720px) {
  .airspace-row-mobile-axis { display: block; }
}

.airspace-craft {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 820px) {
  .airspace-craft { grid-template-columns: 1fr; }
}

.craft {
  display: block;
  background: rgba(38, 38, 38, 0.85);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px 15px;
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.craft:hover {
  border-color: var(--accent-edge);
  background: rgba(45, 45, 45, 0.95);
  transform: translateY(-2px);
}

.craft-mark {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.craft-idx {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--white-25);
}
.craft-tail {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.craft-name {
  font-family: var(--ff-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 4px;
}
.craft-verb {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--white-40);
}
.craft:hover .craft-name { color: var(--accent); }

/* Partner row craft visually distinct (single aircraft, codeshare flag) */
.airspace-row.partner .craft {
  border-color: var(--accent-edge);
  background: rgba(212, 255, 58, 0.04);
}
.airspace-row.partner .craft .craft-tail { color: var(--accent); }
.airspace-row.partner .craft-verb { color: var(--white-60); }

/* Partner row only has one module — let it span */
.airspace-row.partner .airspace-craft {
  grid-template-columns: 1fr;
  max-width: 360px;
}

.airspace-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-40);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.airspace-foot-legend {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.airspace-foot-legend .swatch {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
.airspace-foot-legend .swatch.eng { background: var(--white-60); border: 1px solid var(--line-edge); }
.airspace-foot-legend .swatch.del { background: var(--white-25); border: 1px solid var(--line-edge); }
.airspace-foot-legend .swatch.par { background: var(--accent); }
.airspace-foot .accent { color: var(--accent); }

/* ── The layer detail sections (Engine / Delivery / Partner) ──── */

.layer {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 48px);
}
.layer + .layer { margin-top: 24px; }

.layer-head {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: start;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) {
  .layer-head { grid-template-columns: 48px 1fr; gap: 14px; }
}

.layer-num {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--white);
  letter-spacing: -0.02em;
}
.layer-num.partner {
  background: rgba(212, 255, 58, 0.06);
  border-color: var(--accent-edge);
  color: var(--accent);
}
@media (max-width: 720px) {
  .layer-num { width: 48px; height: 48px; font-size: 18px; border-radius: 10px; }
}

.layer-head-text { padding-top: 4px; }
.layer-tag {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 8px;
}
.layer-name {
  font-family: var(--ff-display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.layer-promise {
  font-family: var(--ff-body);
  font-size: 16px;
  color: var(--white-60);
  line-height: 1.55;
  max-width: 60ch;
}
.layer-promise .accent { color: var(--accent); }

/* Module cards inside layer sections */

.mods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.layer.partner .mods { grid-template-columns: 1fr; max-width: 560px; }
@media (max-width: 820px) {
  .mods { grid-template-columns: 1fr; }
}

.mcard {
  display: block;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 22px 24px;
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
  position: relative;
}
.mcard:hover {
  border-color: var(--accent-edge);
  background: var(--bg-deep);
}

.mcard-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.mcard-idx {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.mcard-tag {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-25);
}
.mcard-name {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 4px;
}
.mcard:hover .mcard-name { color: var(--accent); }
.mcard-verb {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--white-40);
  text-transform: lowercase;
  margin-bottom: 14px;
}
.mcard-body {
  font-size: 13.5px;
  color: var(--white-60);
  line-height: 1.55;
  margin-bottom: 18px;
}
.mcard-cta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mcard-cta::after {
  content: '→';
  transition: transform var(--t-base) var(--ease);
}
.mcard:hover .mcard-cta::after { transform: translateX(4px); }

/* ── The contract grid — what each layer guarantees ───────────── */

.contract {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-deep);
}
@media (max-width: 820px) {
  .contract { grid-template-columns: 1fr; }
}

.contract-cell {
  padding: 18px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-deep);
}
.contract-cell:nth-child(4n) { border-right: 0; }
@media (max-width: 820px) {
  .contract-cell { border-right: 0; }
  .contract-cell:nth-child(4n) { border-right: 0; }
}

.contract-cell.colhead {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  padding: 14px 22px;
}
.contract-cell.colhead.partner { color: var(--accent); }

.contract-cell.rowhead {
  background: var(--surface);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
  display: flex;
  align-items: center;
}

.contract-cell .ct-h {
  display: block;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-bottom: 4px;
}
.contract-cell.partner .ct-h { color: var(--accent); }
.contract-cell .ct-b {
  font-size: 12.5px;
  color: var(--white-60);
  line-height: 1.5;
}

/* ── Pickguide — which module page to read first by audience ──── */

.pick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-deep);
}
@media (max-width: 820px) { .pick { grid-template-columns: 1fr; } }

.pick-cell {
  padding: 28px 26px 30px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.pick-cell:last-child { border-right: 0; }
@media (max-width: 820px) {
  .pick-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .pick-cell:last-child { border-bottom: 0; }
}

.pick-aud {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 10px;
}
.pick-q {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1.35;
  margin-bottom: 14px;
}
.pick-rec {
  font-size: 13.5px;
  color: var(--white-60);
  line-height: 1.55;
  margin-bottom: 18px;
  flex: 1;
}
.pick-rec .rec-mod {
  font-family: var(--ff-display);
  color: var(--accent);
  font-weight: 500;
}
.pick-go {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pick-go::after {
  content: '→';
  transition: transform var(--t-base) var(--ease);
}
.pick-cell:hover .pick-go::after { transform: translateX(4px); }



/* ── 13. LEGAL — document layout, TOC rail, prose, footer ──────── */

/* Four legal pages share this template. Goals:
   - Wide reading column, generous type (17px Public Sans, NOT JetBrains)
   - Sticky left-rail TOC that highlights the current section on scroll
   - Numbered section anchors with permalinks
   - Document chrome (version, date, jurisdiction) up top — no fake polish
*/

.legal-doc {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
@media (max-width: 980px) {
  .legal-doc { grid-template-columns: 1fr; gap: 32px; }
}

/* ── TOC rail ────────────────────────────────────────────────── */

.legal-toc {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  padding: 22px 0 22px 0;
  border-top: 1px solid var(--line);
  align-self: start;
}
@media (max-width: 980px) {
  .legal-toc { position: static; padding: 0 0 24px; border-top: 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
}

.legal-toc-h {
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 18px;
  display: block;
}

.legal-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.legal-toc-list a {
  display: block;
  padding: 8px 14px 8px 18px;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--white-60);
  line-height: 1.4;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.legal-toc-list a:hover {
  color: var(--white);
  border-left-color: var(--line-edge);
}
.legal-toc-list a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(212, 255, 58, 0.03);
}

.legal-toc-list .num {
  display: inline-block;
  width: 20px;
  font-family: var(--ff-body);
  font-weight: 500;
  color: var(--white-25);
  margin-right: 4px;
}
.legal-toc-list a:hover .num,
.legal-toc-list a.active .num { color: inherit; }

/* TOC foot — print + last-updated info */
.legal-toc-foot {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--white-40);
  line-height: 1.55;
}
.legal-toc-foot a {
  color: var(--white-60);
  border-bottom: 1px dashed var(--line-edge);
}
.legal-toc-foot a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Document header ────────────────────────────────────────── */

.legal-head {
  margin-bottom: 56px;
}
.legal-head-tag {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--white-60);
  margin-bottom: 24px;
}

.legal-h1 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 28px;
  max-width: 18ch;
}

.legal-summary {
  font-family: var(--ff-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--white-80);
  max-width: 60ch;
  margin-bottom: 32px;
}

.legal-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  max-width: 720px;
}
@media (max-width: 720px) {
  .legal-meta {
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
    padding: 18px 0;
  }
}

.legal-meta-cell {
  padding: 0 24px;
  border-right: 1px solid var(--line);
}
.legal-meta-cell:first-child { padding-left: 0; }
.legal-meta-cell:last-child  { border-right: 0; padding-right: 0; }
@media (max-width: 720px) {
  .legal-meta-cell {
    border-right: 0;
    padding: 0;
  }
}

.legal-meta-k {
  display: block;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 8px;
}
.legal-meta-v {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--white);
  line-height: 1.3;
}
.legal-meta-v.accent { color: var(--accent); }

/* ── Prose body ─────────────────────────────────────────────── */

.legal-body {
  max-width: 68ch;
  font-family: var(--ff-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--white-80);
}

.legal-body p {
  margin: 0 0 1.1em;
}

.legal-section {
  scroll-margin-top: calc(var(--nav-h) + 24px);
  padding-top: 56px;
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
.legal-section:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.legal-section-h {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 24px;
  color: var(--white);
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.legal-section-h .legal-section-num {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--accent);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  width: 32px;
}

.legal-sub-h {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.015em;
  margin: 32px 0 14px;
  color: var(--white);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.legal-sub-h .legal-sub-num {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--white-40);
  flex-shrink: 0;
  width: 30px;
}

.legal-body strong,
.legal-body b {
  color: var(--white);
  font-weight: 500;
}

.legal-body em {
  font-style: italic;
  color: var(--white);
}

.legal-body a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-edge);
  transition: border-color var(--t-base) var(--ease);
}
.legal-body a:hover { border-bottom-color: var(--accent); }

.legal-body ul,
.legal-body ol {
  padding-left: 1.5em;
  margin: 0 0 1.2em;
}
.legal-body li {
  margin-bottom: 0.5em;
  padding-left: 6px;
}
.legal-body li::marker {
  color: var(--white-25);
}

/* Tight definition list pattern — used in privacy / PII docs */
.legal-defs {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-deep);
  margin: 20px 0 28px;
}
.legal-defs-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 18px 24px;
  border-top: 1px solid var(--line);
}
.legal-defs-row:first-child { border-top: 0; }
@media (max-width: 720px) {
  .legal-defs-row { grid-template-columns: 1fr; gap: 6px; }
}
.legal-defs-k {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--white);
  letter-spacing: -0.01em;
}
.legal-defs-v {
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--white-60);
  line-height: 1.55;
}

/* Callout for "what we never do / what we always do" */
.legal-callout {
  margin: 24px 0 32px;
  padding: 22px 26px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
}
.legal-callout-h {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--accent);
  margin-bottom: 10px;
  display: block;
}
.legal-callout-b {
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--white-80);
  line-height: 1.6;
}

/* Document footer (end-of-page, not site footer) */
.legal-doc-foot {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--white-40);
  line-height: 1.6;
}
.legal-doc-foot a {
  color: var(--white-60);
  border-bottom: 1px solid var(--line-edge);
}
.legal-doc-foot a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Sibling-document navigator (at bottom of each legal page) */
.legal-siblings {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.legal-siblings-h {
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--white-40);
  margin-bottom: 18px;
  text-transform: uppercase;
}
.legal-siblings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) { .legal-siblings-grid { grid-template-columns: 1fr; } }

.legal-sibling {
  display: block;
  padding: 18px 20px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.legal-sibling:hover {
  border-color: var(--accent-edge);
  background: var(--bg);
}
.legal-sibling-k {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--white-40);
  margin-bottom: 4px;
  display: block;
}
.legal-sibling-v {
  font-family: var(--ff-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--white);
}
.legal-sibling:hover .legal-sibling-v { color: var(--accent); }



/* ── 14. ABOUT-FIRM (rebuild) — editorial long-form ─────────────── */

/* The about page now reads as a letter, not a marketing artifact.
   Confident editorial type, generous spacing, no chrome. Four blocks:
   the letter, the timeline, the facts at-a-glance, the close. */

.about-stage {
  max-width: 880px;
  margin: 0 auto;
}

/* Quiet preamble */
.about-pre {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 40px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.about-pre .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Opening headline — big, considered, no marketing pop */
.about-open {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--white);
  max-width: 22ch;
  margin-bottom: 56px;
}
.about-open .accent { color: var(--accent); }
.about-open em {
  font-style: italic;
  color: var(--white);
}

/* Sub-section headers inside the letter */
.about-h {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--white);
  margin: 88px 0 28px;
  max-width: 22ch;
}
.about-h .accent { color: var(--accent); }

/* The letter body — generous prose */
.about-prose {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.6;
  color: var(--white-80);
}
.about-prose p {
  margin: 0 0 28px;
}
.about-prose p:last-child { margin-bottom: 0; }
.about-prose strong { color: var(--white); font-weight: 500; }
.about-prose em { font-style: italic; color: var(--white); }
.about-prose .accent { color: var(--accent); }
.about-prose a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-edge);
  transition: border-color var(--t-base) var(--ease);
}
.about-prose a:hover { border-bottom-color: var(--accent); }

/* Pull-quote — single visual flourish inside the prose */
.about-pull {
  margin: 56px 0;
  padding: 0 0 0 32px;
  border-left: 3px solid var(--accent);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--white);
  max-width: 28ch;
}
.about-pull-attr {
  display: block;
  margin-top: 16px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-40);
}

/* Signature off — first-person attribution */
.about-sign {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.about-sign-line {
  font-family: var(--ff-body);
  font-size: 18px;
  color: var(--white-60);
  line-height: 1.6;
  margin-bottom: 16px;
}
.about-sign-names {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* ── Timeline — six years, four moments ────────────────────────── */

.tline {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 0 clamp(48px, 6vw, 96px);
}
.tline-label {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 48px;
  display: inline-block;
  padding-top: 12px;
  border-top: 2px solid var(--accent);
}

.tline-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 48px;
  align-items: baseline;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.tline-row:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 720px) {
  .tline-row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
}

.tline-year {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 52px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--white);
}
.tline-row.now .tline-year { color: var(--accent); }

.tline-text {
  font-family: var(--ff-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--white-80);
  max-width: 50ch;
}
.tline-text .strong { color: var(--white); font-weight: 500; }

/* ── Facts at a glance — five numbers, hero-sized ──────────────── */

.facts {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 0 clamp(48px, 6vw, 96px);
}
.facts-label {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 48px;
  display: inline-block;
  padding-top: 12px;
  border-top: 2px solid var(--accent);
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 820px) { .facts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .facts-grid { grid-template-columns: 1fr; } }

.fact {
  padding: 40px 32px 44px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fact:nth-child(3n) { border-right: 0; }
@media (max-width: 820px) {
  .fact:nth-child(3n) { border-right: 1px solid var(--line); }
  .fact:nth-child(2n) { border-right: 0; }
}
@media (max-width: 520px) {
  .fact { border-right: 0; padding: 32px 0 36px; }
}

.fact-k {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 16px;
  display: block;
}
.fact-v {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 52px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--white);
}
.fact-v .accent { color: var(--accent); }
.fact-sub {
  margin-top: 14px;
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--white-60);
  line-height: 1.5;
  max-width: 28ch;
}


/* ── 15. ABOUT-LEADERS — the bench ───────────────────────────────── */

/* Sibling page to about-firm. Where about-firm is the letter, this is
   the bench. Three partners shown at hero scale up top, then each
   gets a full editorial block: prose biography + accountability rail.
   Big chapter numbers between partners give the page rhythm. */

/* ── Cover band — three partners side-by-side at hero scale ─────── */

.bench {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
@media (max-width: 980px) {
  .bench { grid-template-columns: 1fr; gap: 32px; max-width: 480px; margin: 56px auto 0; }
}

.bench-card {
  display: flex;
  flex-direction: column;
}

/* Portrait — square crop, deliberate desaturated render, with
   a clean monogram fallback for when the image hasn't loaded. */
.portrait {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: filter var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
  filter: saturate(0.85) contrast(1.02);
}
.portrait:hover { filter: saturate(1) contrast(1.04); border-color: var(--line-edge); }

.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  z-index: 2;
}

/* The monogram sits underneath the photo. If the photo loads, it covers
   the monogram. If the photo 404s (e.g. fresh deploy without assets),
   the monogram is what the user sees — clean fallback either way. */
.portrait::before {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(56px, 9vw, 110px);
  letter-spacing: -0.04em;
  color: var(--white-25);
  background:
    radial-gradient(circle at 30% 25%, rgba(212, 255, 58, 0.10), transparent 55%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
}

/* Per-partner subtle gradient variation on the monogram backdrop */
.portrait.p01::before { background:
  radial-gradient(circle at 25% 20%, rgba(212, 255, 58, 0.10), transparent 55%),
  linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%); }
.portrait.p02::before { background:
  radial-gradient(circle at 75% 25%, rgba(212, 255, 58, 0.10), transparent 55%),
  linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%); }
.portrait.p03::before { background:
  radial-gradient(circle at 50% 80%, rgba(212, 255, 58, 0.10), transparent 60%),
  linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%); }

.bench-meta {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bench-idx {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
}
.bench-name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(22px, 2.5vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--white);
}
.bench-role {
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--accent);
  font-weight: 500;
}
.bench-thesis {
  font-family: var(--ff-body);
  font-size: 16px;
  color: var(--white-60);
  line-height: 1.55;
  margin-top: 12px;
  font-style: italic;
}

/* ── Chapter break — huge number between partners ───────────────── */

.chapter {
  padding: clamp(24px, 3vw, 40px) 0 clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: baseline;
}
@media (max-width: 820px) {
  .chapter { grid-template-columns: 1fr; gap: 16px; padding-top: clamp(24px, 3vw, 40px); }
}
.chapter-num {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(80px, 12vw, 144px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--accent);
}
.chapter-h {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--white);
  max-width: 24ch;
}
.chapter-h .role {
  display: block;
  margin-top: 12px;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 18px;
  color: var(--accent);
  letter-spacing: 0.01em;
  font-style: italic;
}

/* ── Partner editorial block — bio + rail ───────────────────────── */

.partner-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 64px;
  align-items: start;
  padding-top: 24px;
}
@media (max-width: 980px) {
  .partner-block { grid-template-columns: 1fr; gap: 48px; }
}

.partner-thesis {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--white);
  margin-bottom: 32px;
  max-width: 28ch;
}
.partner-thesis .accent { color: var(--accent); }

.partner-bio {
  font-family: var(--ff-body);
  font-size: 19px;
  line-height: 1.6;
  color: var(--white-80);
}
.partner-bio p { margin: 0 0 24px; }
.partner-bio p:last-child { margin-bottom: 0; }
.partner-bio strong { color: var(--white); font-weight: 500; }
.partner-bio em { font-style: italic; color: var(--white); }

/* Partner rail — accountability + contact, sticky on desktop */
.partner-rail {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: sticky;
  top: calc(var(--nav-h) + 32px);
}
@media (max-width: 980px) {
  .partner-rail { position: static; }
}

.rail-block-h {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 14px;
  padding-top: 12px;
  border-top: 2px solid var(--accent);
  display: inline-block;
}

.rail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rail-list li {
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--white-80);
  line-height: 1.5;
  padding-left: 26px;
  position: relative;
}
.rail-list li::before {
  content: counter(rail, decimal-leading-zero);
  counter-increment: rail;
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 500;
}
.rail-list { counter-reset: rail; }
.rail-list li .k {
  display: inline;
  color: var(--white);
  font-weight: 500;
}

.rail-prior {
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--white-60);
  line-height: 1.55;
}
.rail-prior-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rail-prior-list li {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--white-60);
}

.rail-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rail-contact a {
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--white-60);
  letter-spacing: 0.01em;
  border-bottom: 1px dashed var(--line-edge);
  padding-bottom: 1px;
  display: inline-block;
  width: fit-content;
  transition: color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.rail-contact a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── The bench behind the bench — closing block ─────────────────── */

.beyond {
  padding: clamp(40px, 6vw, 64px);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 720px) {
  .beyond { grid-template-columns: 1fr; gap: 24px; }
}
.beyond-num {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(96px, 14vw, 160px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--accent);
}
.beyond-text {
  max-width: 56ch;
}
.beyond-h {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--white);
  margin-bottom: 16px;
}
.beyond-body {
  font-family: var(--ff-body);
  font-size: 18px;
  color: var(--white-80);
  line-height: 1.6;
}
.beyond-disciplines {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
@media (max-width: 720px) { .beyond-disciplines { grid-template-columns: 1fr 1fr; gap: 18px 24px; } }
.beyond-disc {
  padding-right: 24px;
  border-right: 1px solid var(--line);
}
.beyond-disc:last-child { border-right: 0; padding-right: 0; }
@media (max-width: 720px) {
  .beyond-disc { border-right: 0; padding-right: 0; }
}
.beyond-disc-k {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 6px;
  display: block;
}
.beyond-disc-v {
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--white);
  line-height: 1.3;
}


/* ── 16. INDEX (homepage) — cinematic hero + film-chapter structure ─ */

/* The homepage is structured like a film: one establishing shot (the
   photographic hero), then chapters that each pull a real artifact
   from elsewhere on the site at preview scale. The page doesn't
   make claims — it shows the actual thing.

   The hero uses an Unsplash aircraft image with a strong dark
   gradient overlay so type stays readable. Graceful fallback to
   a pure-CSS gradient if the image fails to load. */

/* ── Hero ────────────────────────────────────────────────────────── */

.hero-stage {
  position: relative;
  min-height: clamp(680px, 88vh, 920px);
  width: 100%;
  overflow: hidden;
  background-color: var(--bg);
  /* Fallback gradient — used if image fails to load */
  background-image:
    radial-gradient(ellipse at 30% 40%, rgba(212, 255, 58, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(96, 165, 250, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}

/* Photographic layer */
.hero-photo {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1569154941061-e231b4725ef1?w=2400&q=85&auto=format&fit=crop');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  z-index: 0;
  /* Push image further back: desaturate, dim, soften */
  filter: saturate(0.55) brightness(0.45) contrast(0.95) blur(1px);
}

/* Dark overlay — heavier across the full canvas; image reads as
   atmosphere, not subject. Subtle warm vignette toward the top-right
   keeps a hint of golden hour without competing with the text. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 85% 15%, rgba(212, 255, 58, 0.04) 0%, transparent 45%),
    linear-gradient(180deg, rgba(20, 20, 22, 0.92) 0%, rgba(20, 20, 22, 0.78) 50%, rgba(20, 20, 22, 0.96) 100%),
    linear-gradient(90deg, rgba(20, 20, 22, 0.85) 0%, rgba(20, 20, 22, 0.6) 60%, rgba(20, 20, 22, 0.75) 100%);
}

/* Subtle grain for cinematic feel */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.04;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,0.6) 0.5px, transparent 1px),
    radial-gradient(circle at 47% 87%, rgba(255,255,255,0.6) 0.5px, transparent 1px),
    radial-gradient(circle at 82% 33%, rgba(255,255,255,0.6) 0.5px, transparent 1px);
  background-size: 3px 3px, 5px 5px, 7px 7px;
  mix-blend-mode: screen;
}

/* Hero content layer */
.hero-content {
  position: relative;
  z-index: 3;
  min-height: clamp(680px, 88vh, 920px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(96px, 12vh, 144px) 0 clamp(48px, 6vh, 72px);
}

.hero-marker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-60);
  margin-bottom: 40px;
}
.hero-marker .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(212, 255, 58, 0.15);
  animation: hero-pulse 2.4s ease-in-out infinite;
}
@keyframes hero-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.92); }
}

.hero-h1 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--white);
  max-width: 18ch;
  margin-bottom: 32px;
}
.hero-h1 .accent { color: var(--accent); }
.hero-h1 .light { color: var(--white-60); }

.hero-sub {
  font-family: var(--ff-body);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--white-80);
  max-width: 52ch;
  margin-bottom: 44px;
}
.hero-sub .strong { color: var(--white); font-weight: 500; }

/* Hero foot — live ticker + secondary marker */
.hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: auto;
}
@media (max-width: 720px) {
  .hero-foot { flex-direction: column; align-items: flex-start; }
}

.hero-ticker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-ticker-k {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
}
.hero-ticker-v {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.hero-ticker-v .accent { color: var(--accent); }
.hero-ticker-sub {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--white-40);
}

.hero-mark-r {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-60);
  padding: 8px 14px;
  border: 1px solid rgba(245, 245, 240, 0.15);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(20, 20, 22, 0.4);
}
.hero-mark-r .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: hero-pulse 2.4s ease-in-out infinite;
}

/* Mobile responsiveness for hero */
@media (max-width: 720px) {
  .hero-stage { min-height: 720px; }
  .hero-photo { background-position: 70% 30%; }
  .hero-content { padding: 80px 0 32px; }
}

/* ── Section 2: the size of the problem ──────────────────────────── */

.bigfact {
  text-align: left;
}
.bigfact-label {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 32px;
  padding-top: 12px;
  border-top: 2px solid var(--accent);
  display: inline-block;
}
.bigfact-line {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--white);
  max-width: 22ch;
  margin-bottom: 56px;
}
.bigfact-line .accent { color: var(--accent); }
.bigfact-line .light { color: var(--white-60); }

.bigfact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 820px) { .bigfact-grid { grid-template-columns: 1fr; } }
.bigfact-cell {
  padding: 36px 32px 40px 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.bigfact-cell:last-child { border-right: 0; }
.bigfact-cell + .bigfact-cell { padding-left: 32px; }
@media (max-width: 820px) {
  .bigfact-cell { border-right: 0; padding: 28px 0; }
  .bigfact-cell + .bigfact-cell { padding-left: 0; }
}
.bigfact-num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: block;
}
.bigfact-text {
  font-family: var(--ff-body);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--white-80);
}
.bigfact-text .strong { color: var(--white); font-weight: 500; }

/* ── Section 3: SkySuite — six modules at prominent tile scale ──── */

/* The platform modules are the heroes of this section, not chips
   inside a card. Big architectural headline at the top, then six
   tappable tiles in a 3-col grid (responsive to 2, then 1). */

.suite-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
@media (max-width: 820px) {
  .suite-head { grid-template-columns: 1fr; gap: 28px; align-items: start; }
}

.suite-head-h {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--white);
  max-width: 22ch;
}
.suite-head-h .accent { color: var(--accent); }
.suite-head-h .light { color: var(--white-60); }

.suite-head-body {
  font-family: var(--ff-body);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--white-60);
  max-width: 38ch;
  margin-top: 18px;
}

.suite-modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px) { .suite-modules { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .suite-modules { grid-template-columns: 1fr; } }

.mod-tile {
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
  min-height: 220px;
}
.mod-tile:hover {
  border-color: var(--accent-edge);
  transform: translateY(-3px);
  background: var(--bg);
}

/* Layer-colored top stripe — locates each tile in the architecture */
.mod-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 48px;
  height: 3px;
  background: var(--white-40);
  transition: width var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.mod-tile:hover::before { width: 100%; background: var(--accent); }
.mod-tile.engine::before   { background: rgba(245, 245, 240, 0.5); }
.mod-tile.delivery::before { background: rgba(212, 255, 58, 0.6); }
.mod-tile.partner::before  { background: var(--accent); }

.mod-tile-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 22px;
}
.mod-tile-layer {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-40);
}
.mod-tile.engine   .mod-tile-layer { color: var(--white-60); }
.mod-tile.delivery .mod-tile-layer { color: var(--accent); opacity: 0.85; }
.mod-tile.partner  .mod-tile-layer { color: var(--accent); }

.mod-tile-num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--white-25);
  font-variant-numeric: tabular-nums;
}

.mod-tile-name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 10px;
}
.mod-tile:hover .mod-tile-name { color: var(--accent); }

.mod-tile-verb {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 18px;
  text-transform: uppercase;
}

.mod-tile-body {
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--white-60);
  line-height: 1.55;
}

.mod-tile-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--white-40);
}
.mod-tile-foot .go {
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mod-tile-foot .go::after {
  content: '→';
  transition: transform var(--t-base) var(--ease);
  display: inline-block;
}
.mod-tile:hover .mod-tile-foot .go::after { transform: translateX(4px); }

/* CTA strip below the tiles */
.suite-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(28px, 3vw, 36px);
  border-top: 1px solid var(--line);
}
.suite-cta-l {
  font-family: var(--ff-body);
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--white-60);
  max-width: 56ch;
}
.suite-cta-l .strong { color: var(--white); font-weight: 500; }

/* ── Section 4: artifact previews — what it feels like ──────────── */

.artifacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .artifacts { grid-template-columns: 1fr; } }

.artifact {
  display: block;
  padding: 28px 28px 24px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.artifact:hover {
  border-color: var(--accent-edge);
  transform: translateY(-3px);
}

.artifact-tag {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 18px;
  display: block;
}
.artifact-tag .num { color: var(--accent); margin-right: 6px; }

/* Each artifact has a mini-visual that's a stylized abstraction of
   the real signature visual from the corresponding deep page */
.artifact-visual {
  aspect-ratio: 16 / 11;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mini boarding pass — solid block with strike-through accent line */
.av-bp {
  background:
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
}
.av-bp::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: translateY(-50%);
  opacity: 0.4;
}
.av-bp::after {
  content: 'ITC';
  position: absolute;
  top: 18%;
  left: 16%;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.av-bp .bp-arr {
  position: absolute;
  bottom: 18%;
  right: 18%;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--white-60);
}
.av-bp .bp-amt {
  position: absolute;
  bottom: 14%;
  left: 16%;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* Mini verdict — 3 row card with one row highlighted */
.av-vc {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  justify-content: center;
}
.av-vc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--white-60);
}
.av-vc-row:first-child { border-top: 0; }
.av-vc-row.win {
  color: var(--accent);
  border-color: var(--accent-edge);
}
.av-vc-row .v {
  font-variant-numeric: tabular-nums;
}
.av-vc-row.win .v {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 13px;
}

/* Mini brand skin — split panel showing branded + engine */
.av-bs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
}
.av-bs-left,
.av-bs-right {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.av-bs-left {
  background: linear-gradient(135deg, #2A1F4E 0%, #1E1738 100%);
  border-right: 1px solid var(--line);
}
.av-bs-tag {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.av-bs-name {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  letter-spacing: -0.01em;
}
.av-bs-right .av-bs-tag { color: var(--accent); }
.av-bs-right .av-bs-name { color: var(--accent); }
.av-bs-mod {
  font-family: var(--ff-mono);
  font-size: 9px;
  color: var(--white-40);
  letter-spacing: 0.04em;
}

.artifact-title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 22px);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 8px;
}
.artifact:hover .artifact-title { color: var(--accent); }
.artifact-body {
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--white-60);
  line-height: 1.5;
  margin-bottom: 16px;
}
.artifact-cta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.artifact-cta::after {
  content: ' →';
  transition: transform var(--t-base) var(--ease);
  display: inline-block;
}
.artifact:hover .artifact-cta::after { transform: translateX(4px); }

/* ── Section 5: proof — named-role quotes ────────────────────────── */

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 980px) { .proof-grid { grid-template-columns: 1fr; } }
.proof {
  display: flex;
  flex-direction: column;
}
.proof-mark {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 64px;
  line-height: 0.4;
  color: var(--accent);
  margin-bottom: 16px;
}
.proof-q {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--white);
  margin-bottom: 28px;
  max-width: 24ch;
}
.proof-q .accent { color: var(--accent); }
.proof-attr {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--white-60);
  line-height: 1.55;
}
.proof-attr .role {
  display: block;
  color: var(--white);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

/* ── Section 6: the recon-audit promise ──────────────────────────── */

.promise {
  text-align: center;
  padding: clamp(56px, 7vw, 96px) clamp(32px, 5vw, 96px);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212, 255, 58, 0.05) 0%, transparent 70%),
    var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.promise::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 200px;
  height: 3px;
  background: var(--accent);
  transform: translateX(-50%);
}
.promise-mark {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
  display: inline-block;
}
.promise-h {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--white);
  margin: 0 auto 32px;
  max-width: 22ch;
}
.promise-h .accent { color: var(--accent); }
.promise-body {
  font-family: var(--ff-body);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--white-80);
  margin: 0 auto 40px;
  max-width: 60ch;
}
.promise-foot {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.promise-tags {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 36px;
  flex-wrap: wrap;
}
.promise-tag {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--white-60);
}


/* ── 17. MEGA MENU — anchored under .nav, layer-aware Platform panel ── */

/* Architecture: each .nav-links item that opens a panel is wrapped in
   a .nav-item; the trigger is a child link with [aria-haspopup="true"];
   the panel is a sibling .megamenu element absolutely positioned to
   drop directly under the sticky nav row. Behavior in components.js
   handles hover-intent + click-toggle + ESC-to-close. */

.nav-links { position: relative; }

.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-item > a::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0.5;
  transition: transform var(--t-base) var(--ease),
              opacity var(--t-base) var(--ease);
  margin-left: 2px;
}
.nav-item.is-open > a::after,
.nav-item:hover > a::after {
  opacity: 1;
  transform: rotate(-135deg) translate(-1px, -1px);
}

/* ── Megamenu panel ─────────────────────────────────────────────── */

.megamenu {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 90;
  /* Near-solid dark fill — must fully mask whatever's behind, since
     backdrop-filter alone leaves ~6% of underlying content showing
     through, which is enough to read through bright hero text. */
  background: rgb(24, 24, 26);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--line-edge);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
  /* hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 180ms var(--ease),
              transform 220ms var(--ease),
              visibility 0s linear 220ms;
}
.nav-item.is-open .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 180ms var(--ease),
              transform 220ms var(--ease),
              visibility 0s linear 0s;
}

/* Top accent line — feels like an extension of the nav's bottom border */
.megamenu::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent-edge) 30%,
    var(--accent-edge) 70%,
    transparent 100%);
  opacity: 0.5;
}

.megamenu-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 32px var(--wrap-pad) 36px;
}

/* Top row inside the menu: section label on the left, optional CTA on right */
.megamenu-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.megamenu-h {
  display: block;
}
.megamenu-eyebrow {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
}
.megamenu-title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1.2;
}
.megamenu-title .light {
  color: var(--white-60);
  font-weight: 400;
}
.megamenu-walk {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--white-60);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.megamenu-walk:hover {
  color: var(--accent);
  border-color: var(--accent-edge);
  background: rgba(212, 255, 58, 0.04);
}
.megamenu-walk::after {
  content: '→';
  transition: transform var(--t-base) var(--ease);
  display: inline-block;
}
.megamenu-walk:hover::after { transform: translateX(3px); }

/* ── Platform menu — layered, mirrors the airspace architecture ─── */

.megamenu-platform .megamenu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.mm-layer {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: stretch;
  gap: 32px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.mm-layer:first-child { border-top: 0; padding-top: 4px; }
.mm-layer:last-child { padding-bottom: 4px; }

.mm-layer-tag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding-left: 16px;
  border-left: 2px solid var(--white-40);
}
.mm-layer.engine   .mm-layer-tag { border-left-color: rgba(245, 245, 240, 0.6); }
.mm-layer.delivery .mm-layer-tag { border-left-color: rgba(212, 255, 58, 0.6); }
.mm-layer.partner  .mm-layer-tag { border-left-color: var(--accent); }

.mm-layer-name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--white);
  line-height: 1.2;
}
.mm-layer.partner .mm-layer-name { color: var(--accent); }
.mm-layer-tag-sub {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-40);
}

.mm-layer-modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 980px) {
  .mm-layer-modules { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .mm-layer-modules { grid-template-columns: 1fr; }
}

.mm-mod {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(245, 245, 240, 0.015);
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.mm-mod:hover {
  border-color: var(--accent-edge);
  background: rgba(212, 255, 58, 0.04);
  transform: translateY(-1px);
}
.mm-mod-name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.mm-mod:hover .mm-mod-name { color: var(--accent); }
.mm-mod-num {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--white-25);
  font-weight: 400;
}
.mm-mod-verb {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.mm-mod-line {
  font-family: var(--ff-body);
  font-size: 12px;
  color: var(--white-60);
  line-height: 1.4;
}

/* ── Solutions menu — two big audience cards ─────────────────────── */

.megamenu-solutions .megamenu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .megamenu-solutions .megamenu-grid { grid-template-columns: 1fr; }
}

.mm-audience {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(245, 245, 240, 0.015);
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
  position: relative;
  overflow: hidden;
}
.mm-audience::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40px;
  height: 2px;
  background: var(--accent);
  transition: width var(--t-base) var(--ease);
}
.mm-audience:hover {
  border-color: var(--accent-edge);
  background: rgba(212, 255, 58, 0.03);
  transform: translateY(-2px);
}
.mm-audience:hover::before { width: 100%; }
.mm-audience-tag {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 12px;
}
.mm-audience-name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.025em;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 8px;
}
.mm-audience:hover .mm-audience-name { color: var(--accent); }
.mm-audience-line {
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--white-60);
  line-height: 1.5;
  margin-bottom: 16px;
}
.mm-audience-go {
  margin-top: auto;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mm-audience-go::after {
  content: '→';
  transition: transform var(--t-base) var(--ease);
}
.mm-audience:hover .mm-audience-go::after { transform: translateX(4px); }

/* ── About menu — three compact cards ────────────────────────────── */

.megamenu-about .megamenu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .megamenu-about .megamenu-grid { grid-template-columns: 1fr; }
}

.mm-about-cell {
  display: block;
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(245, 245, 240, 0.015);
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.mm-about-cell:hover {
  border-color: var(--accent-edge);
  background: rgba(212, 255, 58, 0.04);
}
.mm-about-num {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 10px;
  display: block;
}
.mm-about-name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 6px;
}
.mm-about-cell:hover .mm-about-name { color: var(--accent); }
.mm-about-line {
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--white-60);
  line-height: 1.45;
}

/* ── Mobile responsiveness ─────────────────────────────────────── */

@media (max-width: 768px) {
  /* On mobile the megamenu becomes a full-width sheet from the nav */
  .megamenu {
    position: fixed;
    top: var(--nav-h);
    height: auto;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .megamenu-inner { padding: 24px; }
  .megamenu-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .mm-layer {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 0;
  }
  .mm-layer-tag {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding-bottom: 4px;
  }
  /* On mobile the nav-items collapse out (same as the existing a:not(.nav-cta) rule for non-menu items). The mobile experience uses the existing footer for full link inventory. */
  .nav-links .nav-item { display: none; }
}


/* ── 18. ABOUT-CAREERS — single-purpose hiring page ─────────────── */

/* No published roles. The page is one conversation starter — a
   photographic hero + an essay explaining why we don't post roles,
   then a single editorial form, then a "what happens next" block.
   Image blended in like the index hero. */

/* ── Hero, similar treatment to .hero-stage but smaller ─────────── */

.careers-hero {
  position: relative;
  min-height: clamp(440px, 56vh, 580px);
  overflow: hidden;
  background-color: var(--bg);
}
.careers-hero-photo {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=2400&q=85&auto=format&fit=crop');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  z-index: 0;
  /* Same atmospheric treatment as index hero: desaturate, dim, soften */
  filter: saturate(0.45) brightness(0.4) contrast(0.95) blur(1.5px);
}
.careers-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 80% 25%, rgba(212, 255, 58, 0.035) 0%, transparent 50%),
    linear-gradient(180deg, rgba(20, 20, 22, 0.92) 0%, rgba(20, 20, 22, 0.85) 50%, rgba(20, 20, 22, 0.98) 100%);
}
.careers-hero-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  background-image:
    radial-gradient(circle at 14% 24%, rgba(255,255,255,0.6) 0.5px, transparent 1px),
    radial-gradient(circle at 48% 86%, rgba(255,255,255,0.6) 0.5px, transparent 1px),
    radial-gradient(circle at 82% 33%, rgba(255,255,255,0.6) 0.5px, transparent 1px);
  background-size: 3px 3px, 5px 5px, 7px 7px;
  mix-blend-mode: screen;
}
.careers-hero-content {
  position: relative;
  z-index: 3;
  min-height: clamp(440px, 56vh, 580px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(72px, 9vh, 112px) 0 clamp(48px, 6vh, 72px);
}
.careers-hero-marker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-60);
  margin-bottom: 32px;
}
.careers-hero-marker .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(212, 255, 58, 0.15);
}
.careers-hero-h1 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--white);
  max-width: 18ch;
  margin-bottom: 24px;
}
.careers-hero-h1 .accent { color: var(--accent); }
.careers-hero-h1 .light { color: var(--white-60); }
.careers-hero-sub {
  font-family: var(--ff-body);
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.55;
  color: var(--white-80);
  max-width: 56ch;
}
.careers-hero-sub .strong { color: var(--white); font-weight: 500; }

/* ── Framing essay — three paragraphs explaining the no-listings stance ── */

.careers-stage {
  max-width: 880px;
  margin: 0 auto;
}

.careers-essay-label {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-40);
  margin-bottom: 32px;
  padding-top: 12px;
  border-top: 2px solid var(--accent);
  display: inline-block;
}
.careers-essay-h {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--white);
  max-width: 22ch;
  margin-bottom: 36px;
}
.careers-essay-h .accent { color: var(--accent); }
.careers-essay-h em { color: var(--white); font-style: italic; }

.careers-essay {
  font-family: var(--ff-body);
  font-size: 20px;
  line-height: 1.6;
  color: var(--white-80);
}
.careers-essay p { margin: 0 0 24px; }
.careers-essay p:last-child { margin-bottom: 0; }
.careers-essay strong { color: var(--white); font-weight: 500; }
.careers-essay em { font-style: italic; color: var(--white); }
.careers-essay a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-edge);
}
.careers-essay a:hover { border-bottom-color: var(--accent); }

/* ── Prompts row — what we'd want to know ────────────────────── */

.careers-prompts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: clamp(48px, 5vw, 72px) 0 clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 820px) {
  .careers-prompts { grid-template-columns: 1fr; }
}
.careers-prompt {
  padding: 28px 28px 32px 0;
  border-right: 1px solid var(--line);
}
.careers-prompt:last-child { border-right: 0; padding-right: 0; }
.careers-prompt + .careers-prompt { padding-left: 28px; }
@media (max-width: 820px) {
  .careers-prompt { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px 0; }
  .careers-prompt:last-child { border-bottom: 0; }
  .careers-prompt + .careers-prompt { padding-left: 0; }
}
.careers-prompt-num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 16px;
  display: block;
}
.careers-prompt-h {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 10px;
}
.careers-prompt-body {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--white-60);
}

/* ── The form itself — editorial, bigger than the contact form ── */

.careers-form {
  margin: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px);
  padding: clamp(36px, 5vw, 56px);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(212, 255, 58, 0.035) 0%, transparent 55%),
    var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.careers-form::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 120px;
  height: 3px;
  background: var(--accent);
}
.careers-form-head {
  margin-bottom: clamp(32px, 4vw, 44px);
  padding-bottom: clamp(20px, 2.5vw, 28px);
  border-bottom: 1px solid var(--line);
}
.careers-form-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: block;
}
.careers-form-h {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 12px;
  max-width: 24ch;
}
.careers-form-sub {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--white-60);
  max-width: 56ch;
}

.cf-field {
  margin-bottom: 28px;
}
.cf-field:last-of-type { margin-bottom: 32px; }
.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) { .cf-row { grid-template-columns: 1fr; } }

.cf-label {
  display: block;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-bottom: 8px;
}
.cf-label .opt {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--white-40);
  font-weight: 400;
  margin-left: 8px;
}
.cf-label .req {
  color: var(--accent);
  margin-left: 4px;
}
.cf-hint {
  display: block;
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--white-60);
  margin-bottom: 12px;
  max-width: 60ch;
  line-height: 1.5;
}

.cf-input,
.cf-textarea {
  width: 100%;
  display: block;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--white);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.5;
  transition: border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.cf-input:focus,
.cf-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(212, 255, 58, 0.02);
}
.cf-input::placeholder,
.cf-textarea::placeholder {
  color: var(--white-25);
}

/* The signature field — big textarea for "what you'd build" */
.cf-textarea {
  min-height: 200px;
  resize: vertical;
  font-family: var(--ff-body);
  line-height: 1.6;
}
.cf-textarea.big {
  min-height: 260px;
  font-size: 17px;
}

/* ── File upload — custom-styled label, hidden native input ───── */

/* The native input is visually hidden but kept focusable for keyboard /
   screen-reader access. The user interacts with the .cf-file label,
   which adopts focus state when the input has focus. */
.cf-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cf-file {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px dashed var(--line-edge);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}
.cf-file:hover {
  border-color: var(--accent-edge);
  background: rgba(212, 255, 58, 0.025);
}
.cf-file-input:focus-visible + .cf-file {
  border-color: var(--accent);
  background: rgba(212, 255, 58, 0.04);
}
.cf-field.has-file .cf-file {
  border-style: solid;
  border-color: var(--accent-edge);
  background: rgba(212, 255, 58, 0.03);
}

.cf-file-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-deep);
  color: var(--accent);
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}
.cf-file:hover .cf-file-icon { border-color: var(--accent-edge); }
.cf-field.has-file .cf-file-icon { border-color: var(--accent-edge); }

.cf-file-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0; /* allow truncation */
}
.cf-file-prompt {
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--white-80);
  font-weight: 500;
}
.cf-file-sub {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--white-40);
}
.cf-field.has-file .cf-file-prompt {
  color: var(--accent);
  /* clip long filenames cleanly */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cf-file-action {
  flex-shrink: 0;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-60);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.cf-file:hover .cf-file-action { color: var(--accent); border-color: var(--accent-edge); }
.cf-field.has-file .cf-file-action { color: var(--white-40); }

/* Small "remember to attach in your mail client" notice that appears
   when a file is selected. Sits below the file-upload as a sibling. */
.cf-file-reminder {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(212, 255, 58, 0.04);
  border-left: 2px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--white-80);
  line-height: 1.55;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  transition: opacity 0.3s var(--ease),
              max-height 0.36s var(--ease),
              padding 0.36s var(--ease),
              margin-top 0.36s var(--ease);
}
.cf-field.has-file .cf-file-reminder {
  opacity: 1;
  max-height: 200px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.cf-file-reminder .accent { color: var(--accent); font-weight: 500; }

.cf-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--line);
  margin-top: clamp(28px, 3vw, 36px);
}
.cf-foot-note {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--white-40);
  line-height: 1.5;
  max-width: 48ch;
}
.cf-foot-note .accent { color: var(--accent); }

.cf-flash {
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(212, 255, 58, 0.06);
  border: 1px solid var(--accent-edge);
  border-radius: 10px;
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--white-80);
  line-height: 1.5;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s var(--ease),
              max-height 0.36s var(--ease),
              margin-top 0.36s var(--ease);
}
.cf-flash.shown {
  opacity: 1;
  max-height: 200px;
}
.cf-flash .accent { color: var(--accent); }
.cf-flash a { color: var(--accent); border-bottom: 1px solid var(--accent-edge); }
.cf-flash a:hover { border-bottom-color: var(--accent); }
/* State variants */
.cf-flash.pending { background: rgba(245, 245, 240, 0.04); border-color: var(--line-edge); color: var(--white-60); }
.cf-flash.success { background: rgba(212, 255, 58, 0.08); border-color: var(--accent-edge); }
.cf-flash.error   { background: rgba(255, 90, 90, 0.08); border-color: rgba(255, 90, 90, 0.35); color: var(--white); }
.cf-flash.error a { color: rgb(255, 160, 160); border-bottom-color: rgba(255, 90, 90, 0.5); }

/* ── Next steps — three numbered cards ────────────────────────── */

.careers-next {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 820px) { .careers-next { grid-template-columns: 1fr; } }

.cn-step {
  padding: 24px 24px 28px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.cn-step-num {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 18px;
  display: block;
}
.cn-step-h {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 8px;
}
.cn-step-body {
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--white-60);
  line-height: 1.55;
}

/* ── Direct-mail option — for people who hate forms ──────────── */

.careers-direct {
  margin-top: clamp(40px, 5vw, 56px);
  padding: clamp(28px, 4vw, 40px);
  background: var(--bg);
  border: 1px dashed var(--line-edge);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
@media (max-width: 720px) {
  .careers-direct { grid-template-columns: 1fr; }
}
.careers-direct-h {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-bottom: 6px;
}
.careers-direct-b {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--white-60);
  max-width: 56ch;
}
.careers-direct-b a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-edge);
}
.careers-direct-b a:hover { border-bottom-color: var(--accent); }


/* ── 19. COOKIE CONSENT BANNER ────────────────────────────────────
   Appears once on first visit, bottom-anchored, dark surface with a
   lime accent line at top. Dismissal stored in localStorage. ──── */

.cc-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;

  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;

  padding: 22px 24px;
  background: rgb(24, 24, 26);
  border: 1px solid var(--line-edge);
  border-radius: 14px;
  box-shadow: 0 22px 60px -18px rgba(0, 0, 0, 0.65);

  /* slide-up entrance */
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity 260ms var(--ease),
              transform 320ms var(--ease);
}
.cc-banner.shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cc-banner::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent) 50%,
    transparent 100%);
  border-radius: 14px 14px 0 0;
  opacity: 0.55;
}

.cc-text {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--white-80);
}
.cc-text strong { color: var(--white); font-weight: 500; }
.cc-text a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-edge);
  white-space: nowrap;
}
.cc-text a:hover { border-bottom-color: var(--accent); }

.cc-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.cc-btn {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
  white-space: nowrap;
}
.cc-btn-primary {
  background: var(--accent);
  color: var(--bg-deep);
  font-weight: 600;
}
.cc-btn-primary:hover { background: #E4FF6A; }
.cc-btn-ghost {
  background: transparent;
  color: var(--white-60);
  border-color: var(--line-edge);
}
.cc-btn-ghost:hover {
  color: var(--white);
  border-color: var(--white-40);
}

@media (max-width: 640px) {
  .cc-banner {
    left: 16px;
    right: 16px;
    bottom: 16px;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px 20px;
  }
  .cc-actions { width: 100%; }
  .cc-btn { flex: 1; text-align: center; }
}

/* Don't print the banner */
@media print {
  .cc-banner { display: none !important; }
}