/* ============================================================
   SenSec FieldOps — Shared shell
   Command Infrastructure Aesthetic
   ------------------------------------------------------------
   Fonts are self-hosted (assets/fonts) and loaded via partials/head.php
   (<link> to assets/fonts/fonts.css) — no external font CSS, no @import.
   ============================================================ */

:root {
  /* ---- Surfaces ---- */
  --bg:            #0a0a0b;
  --bg-1:          #0d0d0f;
  --bg-2:          #121216;
  --bg-3:          #16161c;
  --card:          #121218;
  --card-hi:       #17171f;

  /* ---- Hairlines ---- */
  --line:          rgba(255,255,255,.07);
  --line-2:        rgba(255,255,255,.12);
  --line-strong:   rgba(255,255,255,.22);

  /* ---- Text ---- */
  --ink:           #eceaE5;
  --ink-dim:       #a3a39c;
  /* --ink-mute lightened from #6c6c66 to clear WCAG 2.2 4.5:1 for the small
     mono labels (≈10px) that use it, even on the lighter --bg-2/--bg-3 surfaces. */
  --ink-mute:      #82827a;
  --ink-ghost:     #45453f;

  /* ---- Accents ---- */
  --amber:         #d6a24a;
  --amber-hi:      #eaba5f;
  --amber-dim:     rgba(214,162,74,.14);
  --amber-line:    rgba(214,162,74,.45);

  --live:          #c2453c;        /* used ONLY for live/operational markers */
  --live-dim:      rgba(194,69,60,.14);
  --live-line:     rgba(194,69,60,.55);

  --ok:            #7aa87a;        /* dashboard accent echo */

  /* ---- Typography ---- */
  --f-display:     'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-body:        'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:        'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* ---- Grid ---- */
  --wrap:          1280px;
  --wrap-wide:     1440px;
  --gutter:        28px;

  /* ---- Spacing scale (8pt base) ---- */
  --space-2xs: 8px;
  --space-xs:  16px;
  --space-sm:  24px;
  --space-md:  40px;
  --space-lg:  64px;
  --space-xl:  96px;
  --space-2xl: clamp(112px, 12vw, 152px);

  /* ---- Section paddings (fluid) ---- */
  --pad-section:       clamp(88px, 11vw, 140px);
  --pad-section-tight: clamp(64px, 8vw, 96px);
  --pad-section-hero:  clamp(112px, 13vw, 160px);
  --pad-quote-band:    clamp(80px, 10vw, 120px);
  --pad-cta-strip:     clamp(80px, 10vw, 120px);
}

html { scroll-padding-top: 72px; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(1100px 600px at 72% -10%, rgba(214,162,74,.06), transparent 60%),
    radial-gradient(900px 700px at 10% 110%, rgba(255,255,255,.03), transparent 60%),
    var(--bg);
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Skip link — hidden until keyboard focus, then jumps to <main id="main">
   (WCAG 2.4.1 Bypass Blocks). Mouse users never see it. */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 2000;
  transform: translateY(-160%);
  padding: 10px 16px;
  background: var(--amber);
  color: var(--bg);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform .15s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--bg);
  outline-offset: 2px;
}
#main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* ============================================================
   TYPE SCALE
   ============================================================ */
.h-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 400;
}
.h-section {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0;
}
.h-page {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(46px, 6.4vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0;
}
.h-display {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(58px, 7.6vw, 120px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0;
}
.h-card {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.h-micro {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.body-lg {
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 62ch;
}
.body { color: var(--ink-dim); }
.mono { font-family: var(--f-mono); }

em.accent, .accent { color: var(--amber); font-style: normal; }

.dim   { color: var(--ink-dim); }
.mute  { color: var(--ink-mute); }
.ghost { color: var(--ink-ghost); }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap-wide {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--pad-section) 0;
  position: relative;
}
.section--tight { padding: var(--pad-section-tight) 0; }
.section--hero  { padding: var(--pad-section-hero) 0 calc(var(--pad-section-hero) * 0.72); }
.section--continue { padding-top: clamp(40px, 5vw, 64px); padding-bottom: var(--pad-section); }

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

/* corner section label: "›02 / CAPABILITIES" */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: clamp(28px, 3.2vw, 40px);
}
.section-label .bar {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--amber);
  transform-origin: left center;
}
.section-label .idx {
  color: var(--amber);
}

/* Amber bar draws in from the left when the label (or an ancestor) enters
   the viewport as part of a .reveal. Static outside a reveal context. */
.section-label.reveal .bar,
.reveal .section-label .bar {
  transform: scaleX(0);
  transition: transform 500ms cubic-bezier(.2,.6,.2,1) 150ms;
}
.section-label.reveal.in .bar,
.reveal.in .section-label .bar {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .section-label .bar { transform: none !important; transition: none !important; }
}

/* ============================================================
   HEADER
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10,10,11,.82);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background-color .25s ease, border-color .25s ease;
}
/* Settled state once the user has scrolled past the hero's top margin —
   the nav thickens just enough to separate from the body behind it. */
.nav.is-scrolled {
  background: rgba(10,10,11,.94);
  border-bottom-color: var(--line-2);
}
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none !important; }
}
.nav-inner {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  transition: opacity .15s ease;
}
.brand:hover { opacity: .85; }
.brand-logo {
  height: 48px;
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 600px) {
  .brand-logo { height: 40px; }
}

.nav-links {
  display: flex;
  gap: 28px;
  justify-content: center;
  font-size: 13.5px;
}
.nav-links a {
  color: var(--ink-dim);
  transition: color .15s ease;
  position: relative;
  padding: 8px 0;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--ink);
}
.nav-links a.active::after {
  content:'';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--amber);
}

.nav-cta {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

/* ------------------------------------------------------------
   Primary-nav dropdowns (Solutions / Sectors).
   Links stay in the DOM (visibility-toggled, not display:none),
   so they remain crawlable. Opens on hover, focus-within, or an
   explicit .is-open class set by click/keyboard (see shell.js).
   ------------------------------------------------------------ */
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-top {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  cursor: pointer;
  color: var(--ink-dim);
  font: inherit;
  font-size: 13.5px;
  line-height: 1;
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color .15s ease;
}
.nav-top:hover,
.nav-item:hover .nav-top,
.nav-item:focus-within .nav-top,
.nav-item.is-open .nav-top,
.nav-top[data-active] { color: var(--ink); }
.nav-caret {
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s ease;
  opacity: .7;
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret,
.nav-item.is-open .nav-caret { transform: rotate(225deg) translate(-1px, -1px); }

.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px -22px rgba(0,0,0,.8);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  z-index: 70;
}
/* Invisible bridge so the cursor can cross the gap to the panel. */
.nav-menu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu,
.nav-item.is-open .nav-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .16s ease, transform .16s ease;
}
.nav-menu__inner { padding: 16px 20px; }
.nav-menu--wide .nav-menu__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 36px;
  min-width: 440px;
}
.nav-menu--mega .nav-menu__inner { min-width: 500px; row-gap: 20px; }
.nav-menu__group--full {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 2px;
}
.nav-menu__group--full .nav-menu__all { margin-top: 0; }
.nav-menu__group { display: flex; flex-direction: column; }
.nav-menu__h {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 8px;
}
.nav-menu a {
  display: block;
  padding: 7px 0;
  color: var(--ink-dim);
  font-size: 13.5px;
  white-space: nowrap;
  transition: color .15s ease;
}
.nav-menu a:hover,
.nav-menu a:focus-visible { color: var(--ink); }
.nav-menu__all {
  margin-top: 8px;
  color: var(--amber) !important;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .nav-menu,
  .nav-caret { transition: none !important; }
}

/* ------------------------------------------------------------
   Mobile navigation — slide-in drawer (right)
   Shown on ≤960px in place of the inline nav-links + CTA.
   ------------------------------------------------------------ */
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--line-2);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color .15s ease;
  padding: 0;
}
.nav-burger:hover { border-color: var(--ink); }
.nav-burger .bar {
  position: absolute;
  left: 12px; right: 12px;
  height: 1px;
  background: var(--ink);
  transition: transform 240ms cubic-bezier(.2,.6,.2,1), opacity 180ms ease;
}
.nav-burger .bar:nth-child(1) { top: 15px; }
.nav-burger .bar:nth-child(2) { top: 21px; }
.nav-burger .bar:nth-child(3) { top: 27px; }
.nav-burger[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 85vw);
  z-index: 60;
  background: rgba(10,10,11,.98);
  border-left: 1px solid var(--line);
  padding: 88px 28px 32px;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.2,.6,.2,1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.nav-drawer[aria-hidden="false"] { transform: translateX(0); }
.nav-drawer[hidden] { display: none; }
.drawer-links { display: grid; gap: 0; }
.drawer-links a {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: var(--f-display);
  font-size: 20px;
  letter-spacing: -.01em;
  transition: color .15s ease;
}
.drawer-links a:hover,
.drawer-links a.active { color: var(--ink); }
/* Collapsible groups inside the mobile drawer (Solutions / Sectors). */
.drawer-group { border-bottom: 1px solid var(--line); }
.drawer-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  color: var(--ink-dim);
  font-family: var(--f-display);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-group > summary::-webkit-details-marker { display: none; }
.drawer-group > summary::after {
  content: '+';
  color: var(--ink-mute);
  font-size: 22px;
  line-height: 1;
}
.drawer-group[open] > summary { color: var(--ink); }
.drawer-group[open] > summary::after { content: '\2013'; }
.drawer-group a {
  display: block;
  padding: 12px 0 12px 16px;
  color: var(--ink-mute);
  font-family: var(--f-display);
  font-size: 16px;
  border-bottom: 1px solid var(--line);
  transition: color .15s ease;
}
.drawer-group a:last-child { border-bottom: 0; }
.drawer-group a:hover { color: var(--ink); }
.drawer-cta {
  margin-top: 28px;
  justify-content: center;
}
.drawer-meta {
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: grid;
  gap: 8px;
}
.drawer-meta b { color: var(--ink); font-weight: 400; }

body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer,
  .nav-backdrop,
  .nav-burger .bar { transition: none !important; }
}

/* ------------------------------------------------------------
   Sticky mobile CTA — persistent primary action on ≤960px.
   On mobile the inline header CTA collapses into the burger, so the
   only call to action would otherwise live inside the drawer. This
   slim amber bar keeps "Request Assessment" one tap away at all times.
   Sits below the drawer backdrop (z 55) and the consent banner (z 1000),
   and hides entirely while the consent banner is open so the two never
   stack. Rendered on every page except /contact (its own destination).
   ------------------------------------------------------------ */
.mobile-cta { display: none; }
@media (max-width: 960px) {
  .mobile-cta {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px calc(15px + env(safe-area-inset-bottom, 0px));
    background: var(--amber);
    color: var(--bg);
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-top: 1px solid var(--amber-hi);
    box-shadow: 0 -12px 32px -14px rgba(0,0,0,.65);
  }
  .mobile-cta .arr { display: inline-block; transition: transform .2s ease; }
  .mobile-cta:active .arr { transform: translateX(3px); }
  /* Reserve space so the bar never sits on top of the footer's last line. */
  body:has(.mobile-cta) { padding-bottom: 58px; }
}
/* Stand down while the consent banner is on screen — they share the
   bottom edge on narrow viewports. */
body:has(.consent-banner.is-open) .mobile-cta { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mobile-cta .arr { transition: none !important; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: all .18s ease;
  cursor: pointer;
}
.btn:hover {
  border-color: var(--ink);
  background: rgba(255,255,255,.03);
}
.btn--primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn--primary:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--bg);
}
.btn--amber {
  border-color: var(--amber-line);
  color: var(--amber);
}
.btn--amber:hover {
  background: var(--amber);
  color: var(--bg);
  border-color: var(--amber);
}
.btn--ghost {
  border-color: transparent;
  padding: 12px 0;
}
.btn--ghost:hover {
  background: transparent;
  color: var(--amber);
}
.btn .arr {
  font-family: var(--f-mono);
  transition: transform .2s ease;
}
.btn:hover .arr {
  transform: translateX(3px);
}

/* small link arrow */
.inline-link {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
  display: inline-flex;
  gap: 8px;
  border-bottom: 1px solid var(--amber-line);
  padding-bottom: 2px;
  transition: all .18s;
}
.inline-link:hover { color: var(--amber-hi); border-color: var(--amber-hi); }

/* Arrow nudge: trailing "→" is wrapped into .arr-glide by shell.js
   so it can translate on hover/focus without disturbing the text. */
.inline-link .arr-glide {
  display: inline-block;
  transition: transform .22s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
}
.inline-link:hover .arr-glide,
.inline-link:focus-visible .arr-glide {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .inline-link .arr-glide { transition: none !important; transform: none !important; }
}

/* ============================================================
   STATUS PILLS
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 10px;
  border: 1px solid var(--line-2);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px var(--live-dim);
}
.pill--live {
  color: var(--live);
  border-color: var(--live-line);
}
.pill--live .dot { background: var(--live); }

.pill--ok .dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(122,168,122,.14); }
.pill--ok { color: var(--ok); border-color: rgba(122,168,122,.35); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 28px;
  position: relative;
  transition: border-color .2s, background .2s;
}
.card:hover {
  border-color: var(--line-2);
  background: var(--card-hi);
}
.card--bare {
  background: transparent;
  border: 1px solid var(--line);
}
.card--frame {
  background: transparent;
  border: 0;
  padding: 0;
}
.card-num {
  position: absolute;
  top: 14px; right: 18px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink-ghost);
}
.card-icon {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  color: var(--amber);
}
.card-icon svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}
.card-title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  color: var(--ink);
}
.card-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
}

/* spec list */
.spec {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px 24px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.spec:last-of-type { border-bottom: 1px solid var(--line); }
.spec dt {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.spec dd {
  margin: 0;
  color: var(--ink);
}

/* ============================================================
   TEXTURES / PLACEHOLDERS
   ============================================================ */
.ph {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.022) 0 2px,
      transparent 2px 14px
    ),
    linear-gradient(180deg, #0e0e12, #0a0a0d);
  border: 1px solid var(--line);
  color: var(--ink-mute);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  display: grid;
  place-items: center;
}
.ph::before {
  content: attr(data-label);
  color: var(--ink-mute);
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  background: rgba(10,10,11,.7);
}

/* small corner tag on textures */
.corner-tag {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink-mute);
  text-transform: uppercase;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: rgba(10,10,11,.6);
  padding: 4px 8px;
  border: 1px solid var(--line);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--line);
  padding: clamp(72px, 8vw, 96px) 0 clamp(32px, 3.6vw, 48px);
  margin-top: 60px;
  background: var(--bg-1);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}
/* Intermediate step so the columns don't crowd on mid widths (the ≤960px
   rule below collapses to two). */
@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
.footer-col h5 {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 16px;
  font-weight: 400;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
}
.footer-col a {
  color: var(--ink-dim);
  transition: color .15s;
}
.footer-col a:hover { color: var(--ink); }

/* Sub-grouping inside denser columns — keeps every link but reads as a tidy
   two-tier list rather than a wall. Second sub-group gets a hairline divider. */
.footer-sub + .footer-sub {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.footer-subh {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: .62;
  margin: 0 0 12px;
  font-weight: 400;
}

.footer-brand {
  display: block;
  margin-bottom: 18px;
  line-height: 1;
}
.footer-logo-link {
  display: inline-block;
  line-height: 0;
  border: 0;
  text-decoration: none;
  color: inherit;
  transition: opacity .2s ease;
}
.footer-logo-link:hover,
.footer-logo-link:focus-visible { opacity: .78; }
.footer-logo-link:focus-visible {
  outline: 1px solid var(--amber-line);
  outline-offset: 4px;
}
.footer-brand img {
  height: 56px;
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 600px) {
  .footer-brand img { height: 44px; }
}
.footer-note {
  color: var(--ink-mute);
  font-size: 13px;
  max-width: 38ch;
  line-height: 1.6;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.footer-bottom a:hover { color: var(--ink); }

/* <button> styled identically to the footer's <a> text so "Cookie preferences"
   blends in visually while remaining a proper control for screen readers. */
.footer-bottom .linklike {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.footer-bottom .linklike:hover { color: var(--ink); }

.parent-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: all .18s;
}
.parent-link:hover { color: var(--ink); border-color: var(--ink); }
.parent-link .mk {
  width: 10px; height: 10px;
  background: var(--amber);
  display: inline-block;
}

/* ============================================================
   GRIDS
   ============================================================ */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px, 2.4vw, 40px); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px, 2.4vw, 40px); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px, 2.4vw, 40px); }

/* Two dropdowns push the primary nav wider, so fall back to the burger
   drawer a little earlier to avoid the links crowding the CTA. */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
}

@media (max-width: 960px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .nav-links { display:none; }
  .nav-cta > .btn { display: none; }
  .nav-burger { display: inline-flex; }
  /* Collapse nav grid to 2 columns so .nav-cta (burger) stays right-aligned. */
  .nav-inner { grid-template-columns: auto 1fr; }
  .nav-cta { justify-self: end; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   UTIL
   ============================================================ */
.stack-sm > * + * { margin-top: 10px; }
.stack-md > * + * { margin-top: 20px; }
.stack-lg > * + * { margin-top: 36px; }

.kbd {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  color: var(--ink-dim);
}

/* Dotted crosshair ornament */
.crosshair {
  position: absolute;
  width: 18px; height: 18px;
  pointer-events: none;
}
.crosshair::before,
.crosshair::after {
  content:'';
  position: absolute;
  background: var(--amber);
}
.crosshair::before {
  left: 8px; right: 8px; top: 0; bottom: 0;
  width: 1px;
}
.crosshair::after {
  top: 8px; bottom: 8px; left: 0; right: 0;
  height: 1px;
}

/* page header band */
.page-head {
  padding: clamp(96px, 12vw, 144px) 0 clamp(48px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.page-head > .wrap,
.page-head > .wrap-wide {
  position: relative;
  z-index: 2;
}
.page-head .lead {
  color: var(--ink-dim);
  font-size: clamp(17px, 1.3vw, 20px);
  max-width: 68ch;
  margin-top: clamp(24px, 2.4vw, 32px);
}
.page-head-meta {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  row-gap: clamp(16px, 2vw, 24px);
  margin-top: 44px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.page-head-meta b {
  display: block;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 4px;
}

/* ============================================================
   SHARED PRIMITIVES
   ============================================================ */

/* Page hero — unified hero for subpages (deployment/sectors/security/pricing) */
.page-hero {
  padding: clamp(104px, 13vw, 160px) 0 clamp(72px, 9vw, 112px);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.page-hero > .wrap,
.page-hero > .wrap-wide {
  position: relative;
  z-index: 2;
}
.page-hero .h-page { max-width: 22ch; }
.page-hero .lead {
  color: var(--ink-dim);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
  max-width: 68ch;
  margin: clamp(24px, 2.6vw, 32px) 0 0;
}
.page-hero .meta-row {
  display: flex;
  gap: clamp(20px, 2.2vw, 32px);
  margin-top: clamp(32px, 4vw, 52px);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  flex-wrap: wrap;
}
.page-hero .meta-row b {
  display: block;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 4px;
}

/* Shared decorative stage for page heroes (thematic, per-page SVG fills in)
   Design principle: engineered restraint. No autoplay motion loops, no fake
   telemetry. Decor is a static technical diagram; optional one-time draw-in
   on first view is provided via .hero-draw (see below). */
.page-hero-decor {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: clamp(320px, 44%, 560px);
  pointer-events: none;
  opacity: .55;
  z-index: 1;
  mask-image: linear-gradient(270deg, #000 40%, rgba(0,0,0,.35) 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(270deg, #000 40%, rgba(0,0,0,.35) 75%, transparent 100%);
}
.page-hero-decor svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.page-hero-decor .d-stroke        { stroke: rgba(255,255,255,.07); stroke-width: 1; fill: none; }
.page-hero-decor .d-stroke-2      { stroke: rgba(255,255,255,.11); stroke-width: 1; fill: none; }
.page-hero-decor .d-stroke-amber  { stroke: rgba(214,162,74,.42); stroke-width: 1; fill: none; }
.page-hero-decor .d-stroke-dim    { stroke: rgba(214,162,74,.18); stroke-width: 1; fill: none; }
.page-hero-decor .d-dashed        { stroke: rgba(214,162,74,.28); stroke-width: 1; fill: none; stroke-dasharray: 2 4; }
.page-hero-decor .d-fill-amber    { fill: var(--amber); }
.page-hero-decor .d-fill-dim      { fill: rgba(214,162,74,.22); }
.page-hero-decor .d-text          { fill: rgba(214,162,74,.6); font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; }
.page-hero-decor .d-text-dim      { fill: rgba(172,172,160,.42); font-family: var(--f-mono); font-size: 9px; letter-spacing: .2em; }

/* .pulse kept as static class (no animation). Retained so existing per-page
   SVG markup with .pulse.d1..d5 still renders as solid amber dots. */
.page-hero-decor .pulse { transform-origin: center; transform-box: fill-box; }

@media (max-width: 720px) {
  .page-hero-decor { width: 240px; opacity: .32; }
}

/* ------------------------------------------------------------
   Hero draw-in primitive
   One-time stroke-dasharray reveal on first view. Triggered by adding
   the class .is-drawn to an ancestor (.hero-draw.is-drawn) when the
   element enters the viewport (shell.js intersection observer).
   After 1.2s the element remains static. Respects reduced motion.
   ------------------------------------------------------------ */
.hero-draw :where(path, line, polyline, polygon, circle, rect, ellipse) {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1200ms cubic-bezier(.2,.6,.2,1);
}
.hero-draw.is-drawn :where(path, line, polyline, polygon, circle, rect, ellipse) {
  stroke-dashoffset: 0;
}
.hero-draw :where(.no-draw, text, tspan, .d-fill-amber, .d-fill-dim, [fill]:not([fill="none"])) {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}
.hero-draw--d1 :where(path, line, polyline, polygon, circle, rect, ellipse) { transition-delay: 0ms;   }
.hero-draw--d2 :where(path, line, polyline, polygon, circle, rect, ellipse) { transition-delay: 180ms; }
.hero-draw--d3 :where(path, line, polyline, polygon, circle, rect, ellipse) { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .hero-draw :where(path, line, polyline, polygon, circle, rect, ellipse) {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------
   Hero corner brackets — architect titleblock frame
   Four L-shaped corner marks framing a spec card. One-time
   sequential snap-in on first view (TL -> TR -> BR -> BL,
   180ms stagger, 900ms total). Triggered by adding .is-armed
   via shell.js intersection observer. Respects reduced motion.
   ------------------------------------------------------------ */
.hero-brackets { position: absolute; }
.hero-brackets .br {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid rgba(214,162,74,.55);
  opacity: 0;
  transform: translate(var(--bx, 0px), var(--by, 0px));
  transition: opacity 320ms ease, transform 320ms cubic-bezier(.2,.6,.2,1);
}
.hero-brackets .br--tl { top: -1px;    left: -1px;    border-right: 0; border-bottom: 0; --bx: -6px; --by: -6px; }
.hero-brackets .br--tr { top: -1px;    right: -1px;   border-left: 0;  border-bottom: 0; --bx:  6px; --by: -6px; transition-delay: 180ms; }
.hero-brackets .br--br { bottom: -1px; right: -1px;   border-left: 0;  border-top: 0;    --bx:  6px; --by:  6px; transition-delay: 360ms; }
.hero-brackets .br--bl { bottom: -1px; left: -1px;    border-right: 0; border-top: 0;    --bx: -6px; --by:  6px; transition-delay: 540ms; }
.hero-brackets.is-armed .br { opacity: 1; transform: translate(0, 0); }

@media (prefers-reduced-motion: reduce) {
  .hero-brackets .br {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ------------------------------------------------------------
   Hero data chip — single-line readout beneath headline
   Real data only (UTC, coordinates, location, release tag).
   ------------------------------------------------------------ */
.hero-datachip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: rgba(10,10,11,.6);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  line-height: 1.6;
}
.hero-datachip .sep {
  width: 1px;
  height: 10px;
  background: var(--line-2);
  display: inline-block;
}
.hero-datachip b {
  color: var(--ink);
  font-weight: 400;
}
.hero-datachip .accent { color: var(--amber); }

/* ------------------------------------------------------------
   Hero excerpt — optional muted system-view panel for flagship hero
   ------------------------------------------------------------ */
.hero-excerpt {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(360px, 44%, 580px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 1;
  opacity: .6;
  mask-image: radial-gradient(ellipse 85% 85% at 55% 50%, #000 45%, rgba(0,0,0,.35) 78%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 55% 50%, #000 45%, rgba(0,0,0,.35) 78%, transparent 100%);
}
.hero-excerpt svg { width: 100%; height: 100%; display: block; overflow: visible; }
@media (max-width: 900px) {
  .hero-excerpt { width: 320px; opacity: .32; top: auto; bottom: 40px; transform: none; right: -40px; }
}
@media (max-width: 600px) {
  .hero-excerpt { display: none; }
}

/* ------------------------------------------------------------
   Hero noise overlay — very subtle SVG noise to break flatness
   (2026 trend: engineered depth without visible texture).
   Attach as a child <div class="hero-noise"></div> inside .page-hero.
   ------------------------------------------------------------ */
.hero-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 160px 160px;
}

/* Quote band — unified for no-flat / nda-note / common-pattern / decision-filter */
.quote-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--pad-quote-band) 0;
  background:
    radial-gradient(800px 320px at 50% 20%, rgba(214,162,74,.05), transparent 70%),
    var(--bg-1);
  position: relative;
}
.quote-band .h-section { max-width: 24ch; }
.quote-band .body-lg   { max-width: 64ch; margin-top: clamp(20px, 2.2vw, 28px); }

/* ---------------------------------------------------------------------------
 * FAQ accordion (partials/faq.php) — the visible half of the FAQPage search
 * layer. Native <details>/<summary> so it works without JS and stays
 * keyboard-accessible by default.
 * ------------------------------------------------------------------------- */
.faq .faq-list {
  max-width: 80ch;
  margin-top: clamp(28px, 3.2vw, 44px);
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2.2vw, 26px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  transition: color .18s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--amber-hi); }
.faq-item:focus-within .faq-q { color: var(--amber-hi); }
.faq-mark {
  flex: 0 0 auto;
  position: relative;
  width: 14px;
  height: 14px;
  margin-top: 4px;
}
.faq-mark::before,
.faq-mark::after {
  content: "";
  position: absolute;
  background: var(--amber);
  transition: transform .2s ease, opacity .2s ease;
}
.faq-mark::before { top: 6px; left: 0; width: 14px; height: 2px; }
.faq-mark::after  { left: 6px; top: 0; width: 2px; height: 14px; }
.faq-item[open] .faq-mark::after { transform: scaleY(0); opacity: 0; }
.faq-a {
  padding: 0 0 clamp(20px, 2.4vw, 28px);
  max-width: 70ch;
  color: var(--ink-mute);
  font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.7;
}
.faq-a p { margin: 0 0 .8em; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .faq-mark::before, .faq-mark::after { transition: none; }
}

/* Capability "translation" caption — plain-language search term under the
 * premium capability name (capabilities.php). Visible, but deliberately quiet
 * so it reads as metadata, not marketing. */
.cap-plain {
  margin: -2px 0 14px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1.45;
  color: var(--ink-mute);
  text-transform: none;
}

/* Field quote — compact testimonial pull-quote reused across pages (homepage,
 * capabilities, sectors). Real operator words; attribution in mono. */
.field-quote {
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 6px 0 6px 24px;
  border-left: 2px solid var(--amber);
  max-width: 62ch;
}
.field-quote blockquote {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.field-quote .by {
  display: block;
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ------------------------------------------------------------
   Landing-page sub-blocks — reusable structured grid for the
   category / comparison landing pages (guard-tour, scheduling,
   incident-reporting, gdpr, tracktik-alternative). Mono kicker
   + a sentence or two; same gridded restraint as the sector read.
   ------------------------------------------------------------ */
.lp-subs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-top: clamp(24px, 2.8vw, 36px);
}
.lp-sub {
  padding: clamp(20px, 2.2vw, 28px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lp-sub .k {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
}
.lp-sub p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
}

/* Capability-mapping rows — code + name on the left, plain line on
   the right; each row links to the matching /capabilities anchor. */
.lp-map {
  margin-top: clamp(24px, 2.8vw, 36px);
  border-top: 1px solid var(--line);
}
.lp-map a {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) 1.3fr;
  gap: 4px 28px;
  padding: clamp(15px, 1.8vw, 20px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink-dim);
  transition: color .15s ease, background .2s ease;
}
.lp-map a:hover { color: var(--ink); background: rgba(214,162,74,.03); }
.lp-map .c {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
}
.lp-map .d { font-size: 15px; line-height: 1.55; }

/* Qualitative outcome / cost list — amber em-dash, ruled rows. */
.lp-points {
  margin-top: clamp(20px, 2.4vw, 30px);
  max-width: 76ch;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line);
}
.lp-points li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-dim);
}
.lp-points li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--amber);
}
@media (max-width: 720px) {
  .lp-subs { grid-template-columns: 1fr; }
  .lp-map a { grid-template-columns: 1fr; gap: 4px; }
}

/* Sticky sub-navigation — unified subnav primitive */
.subnav {
  position: sticky;
  top: 64px;
  z-index: 30;
  background: rgba(10,10,11,.88);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.subnav-inner {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  scrollbar-width: none;
  height: 56px;
  align-items: center;
  position: relative;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.subnav a:hover,
.subnav a.active {
  color: var(--amber);
  border-bottom-color: transparent;
}

/* Scroll-driven progress bar inside subnav.
   Width + left are driven by JS (shell.js · initSubnavProgress)
   based on actual scroll position through each section. The bar
   sits on the subnav's bottom edge, overlapping its 1px border. */
.subnav-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--amber);
  box-shadow: 0 0 10px rgba(214, 162, 74, .55);
  pointer-events: none;
  transition: left 220ms cubic-bezier(.2, .6, .2, 1),
              width 220ms cubic-bezier(.2, .6, .2, 1);
  will-change: left, width;
}
@media (prefers-reduced-motion: reduce) {
  .subnav-progress { transition: none !important; box-shadow: none; }
}
@media (max-width: 600px) {
  .subnav { top: 58px; }
  .subnav-inner { height: 48px; }
}

/* Lead row — standardized pre-grid headline row (h-section + sub-lead column) */
.lead-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
  margin-bottom: clamp(32px, 3.6vw, 48px);
}
.lead-row .lead-col {
  max-width: 42ch;
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.55;
}
@media (max-width: 900px) {
  .lead-row { grid-template-columns: 1fr; align-items: start; }
}

/* Section header row — headline + trailing meta/link, stacks on mobile */
.section-head-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(16px, 2vw, 40px);
  align-items: end;
}
@media (max-width: 600px) {
  .section-head-row { grid-template-columns: 1fr; }
}

/* ============================================================
   CTA strip
   ============================================================ */
.cta-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--pad-cta-strip) 0;
  background:
    radial-gradient(700px 300px at 50% 20%, rgba(214,162,74,.08), transparent 70%),
    var(--bg-1);
}
.cta-strip .h {
  font-family: var(--f-display);
  font-size: clamp(30px, 3.6vw, 48px);
  letter-spacing: -0.02em;
  font-weight: 300;
  margin: 0 0 12px;
}
.cta-strip .sub {
  color: var(--ink-dim);
  max-width: 62ch;
  margin: 0 auto 32px;
}
.cta-strip .row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.cta-strip .inner {
  text-align: center;
}

/* ============================================================
   LIVE-DEPLOYMENT PROOF STRIP — shared primitive
   ------------------------------------------------------------
   Named operational proof placed near a conversion point (under the
   hero / page-head, or beside the contact form). Client marks are
   normalized to a uniform light monochrome so the strip keeps the
   site's single-accent restraint and dark logos never disappear on the
   dark surface. Logo assets live in /assets/img/clients/.
   ============================================================ */
.proof-strip {
  border-bottom: 1px solid var(--line);
  padding: clamp(22px, 2.6vw, 32px) 0;
}
.proof-strip .wrap-wide {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: center;
}
.proof-strip .k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.proof-strip .k b {
  display: block;
  color: var(--ink-dim);
  font-weight: 400;
  margin-top: 6px;
  letter-spacing: .16em;
}
.proof-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
}
.proof-logos li { display: inline-flex; align-items: center; }
.proof-logos img {
  height: 34px;
  width: auto;
  opacity: .6;
  filter: brightness(0) invert(1);
  transition: opacity .2s ease;
}
.proof-logos li:hover img { opacity: .92; }
.proof-logos .wordmark {
  font-family: var(--f-mono);
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color .2s ease;
}
.proof-logos li:hover .wordmark { color: var(--ink); }
@media (max-width: 720px) {
  .proof-strip .wrap-wide { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   Subtle scroll reveal
   ============================================================ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Stagger variant: children animate sequentially as the container enters
   the viewport. shell.js populates --i on each child (0, 1, 2, …).
   Per-container cadence can be overridden with --step (default 70ms). */
.reveal--stagger > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1);
  transition-delay: calc(var(--i, 0) * var(--step, 70ms));
}
.reveal--stagger.in > * {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--stagger > * {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   Scroll-progress indicator (thin amber HUD line, top of viewport)
   Ratio pushed into --sp by shell.js on rAF-throttled scroll.
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  background: transparent;
}
.scroll-progress::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: var(--amber);
  opacity: .72;
  transform-origin: left center;
  transform: scaleX(var(--sp, 0));
  transition: transform .06s linear;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
}

/* ============================================================
   Anchor-jump highlight — a single, short amber left-edge pulse
   so the user instantly sees where a #-jump landed.
   ============================================================ */
@keyframes target-flash {
  0%   { box-shadow: inset 3px 0 0 var(--amber); }
  100% { box-shadow: inset 3px 0 0 transparent; }
}
:target {
  animation: target-flash 1100ms cubic-bezier(.2,.6,.2,1) 1;
}
@media (prefers-reduced-motion: reduce) {
  :target { animation: none !important; }
}

/* ============================================================
   Mobile sweep — tightens gutter, hero padding, body copy & subnav
   on small viewports. Per-page overrides sit in each page's
   inline <style> block.
   ============================================================ */
@media (max-width: 600px) {
  :root { --gutter: 20px; }
  .page-hero { padding: clamp(72px, 11vw, 96px) 0 clamp(48px, 7vw, 72px); }
  .lead-row .lead-col { font-size: 15px; }
  .card-body { font-size: 15px; }
  .subnav a { font-size: 12px; letter-spacing: .16em; }
}

/* ============================================================
   MEDIA PRIMITIVES
   Video card + vanilla lightbox modal + static screenshot figure
   + homepage video section grid. Shared by index/product/
   capabilities. No external JS libraries.
   ============================================================ */

/* Video card — semantic button with thumbnail, mono label, amber
   play glyph. Dark plate, subtle border. No marketing shine. */
.video-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  transition: border-color .2s ease, transform .2s ease;
  font: inherit;
  color: inherit;
  text-align: left;
}
.video-card:hover,
.video-card:focus-visible {
  border-color: var(--line-2);
}
.video-card:focus-visible {
  outline: 1px solid var(--amber-line);
  outline-offset: 2px;
}
.video-card__thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: .92;
  transition: opacity .2s ease, transform .4s ease;
}
.video-card:hover .video-card__thumb { opacity: 1; }
.video-card__label {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(10, 10, 12, .62);
  border: 1px solid var(--line);
  padding: 6px 10px;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(10, 10, 12, .55);
  border: 1px solid var(--amber-line);
  backdrop-filter: blur(6px);
  transition: transform .25s ease, background-color .2s ease, border-color .2s ease;
  pointer-events: none;
}
.video-card__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--amber);
}
.video-card:hover .video-card__play {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(10, 10, 12, .72);
}
@media (prefers-reduced-motion: reduce) {
  .video-card,
  .video-card__thumb,
  .video-card__play { transition: none; }
  .video-card:hover .video-card__play { transform: translate(-50%, -50%); }
}

/* Media modal — single shared lightbox for video playback.
   Iframe is injected on open and removed on close so the video
   stops immediately and no autoplay prefetch happens. */
.media-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(8, 8, 10, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 1;
  transition: opacity .22s ease;
}
.media-modal[hidden] {
  display: none;
}
.media-modal.is-opening { opacity: 0; }
.media-modal__frame {
  position: relative;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
}
.media-modal__frame iframe,
.media-modal__frame video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #000;
}
.media-modal__frame video {
  /* letterbox safely when the source aspect differs from 16:9 */
  object-fit: contain;
  outline: 0;
}
.media-modal__close {
  position: absolute;
  top: -12px;
  right: 0;
  transform: translateY(-100%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.media-modal__close:hover,
.media-modal__close:focus-visible {
  border-color: var(--amber-line);
  color: var(--amber);
  outline: none;
}
.media-modal__close svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}
@media (max-width: 600px) {
  .media-modal__close {
    top: auto;
    right: 0;
    bottom: -12px;
    transform: translateY(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .media-modal { transition: none; }
  .media-modal.is-opening { opacity: 1; }
}

/* Screenshot figure — static operational crop with mono caption.
   No hover interaction. No device frames. Flat dark plate. */
.screenshot {
  margin: 0;
  display: block;
}
.screenshot__frame {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 8px;
  overflow: hidden;
}
.screenshot__frame img {
  display: block;
  width: 100%;
  height: auto;
}
.screenshot__caption {
  margin-top: 14px;
  max-width: 62ch;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
}
.screenshot__caption b,
.screenshot__caption .cap-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 400;
  margin-bottom: 6px;
}
@media (max-width: 600px) {
  .screenshot__caption { font-size: 13px; }
}

/* Pair / row of screenshots (used on product.html under Roles &
   Surfaces). Collapses to single column on smaller viewports. */
.screenshots-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 32px);
}
.screenshots-pair .screenshot__caption { font-size: 13px; }
@media (max-width: 760px) {
  .screenshots-pair { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 36px); }
}

/* Video section — homepage §09 grid. Copy column + video card.
   Kept calm, no background colour shift vs surrounding sections. */
.video-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.video-section__copy .section-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: clamp(20px, 2.2vw, 28px);
}
.video-section__copy h2 {
  margin: 0 0 clamp(20px, 2.2vw, 28px);
}
.video-section__copy p {
  max-width: 52ch;
  color: var(--ink-dim);
  margin: 0 0 16px;
}
.video-section__copy p:last-of-type {
  margin-bottom: clamp(24px, 2.6vw, 32px);
}
.video-section__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.video-section__bullets li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink);
}
.video-section__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 1px;
  background: var(--amber);
}
@media (max-width: 860px) {
  .video-section__grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 40px);
  }
  .video-section__grid .video-card {
    order: -1;
  }
}

/* ============================================================
   LEGAL & COMPLIANCE — long-form document primitives
   Used by: legal.html, terms.html, privacy.html, cookies.html,
   dpa.html, eu-compliance.html, ai-transparency.html,
   ai-conformity.html. Optimised for reading density and
   disciplined typographic hierarchy — not marketing layout.
   ============================================================ */

/* Quieter page hero variant for legal documents. No ring decor,
   no page-hero-decor SVG; just label + title + last-updated. */
.page-hero--legal {
  padding: clamp(96px, 11vw, 136px) 0 clamp(40px, 5vw, 64px);
}
.page-hero--legal .h-page {
  font-size: clamp(38px, 5.2vw, 72px);
  max-width: 26ch;
}
.page-hero--legal .legal-meta {
  margin-top: clamp(20px, 2.2vw, 28px);
}

/* Small mono "Last updated: …" / "Document No." line */
.legal-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}
.legal-meta span + span {
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

/* Long-form document container. Narrow measure (72ch) for
   optimal reading rhythm. Slightly warmer text colour than
   the rest of the site — legal text should feel authoritative
   but not hostile. */
.legal-doc {
  max-width: 840px;
  margin-inline: auto;
}
.legal-doc > * {
  max-width: 72ch;
}
.legal-doc p,
.legal-doc li {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.7;
  color: var(--ink-dim);
}
.legal-doc p {
  margin: 0 0 clamp(16px, 1.6vw, 22px);
}
.legal-doc strong,
.legal-doc b {
  color: var(--ink);
  font-weight: 500;
}
.legal-doc em {
  color: var(--ink);
  font-style: normal;
  border-bottom: 1px dashed var(--line-2);
}
.legal-doc a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid var(--amber-line);
  transition: color .15s, border-color .15s;
}
.legal-doc a:hover {
  color: var(--amber-hi);
  border-bottom-color: var(--amber-hi);
}

/* Section heading with mono § prefix. The numeric prefix lives
   inside a span so it can render in mono + muted colour, while
   the heading itself uses the display family. */
.legal-doc h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: clamp(48px, 5vw, 72px) 0 clamp(16px, 1.8vw, 24px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
}
.legal-doc h2:first-child,
.legal-doc > h2:first-of-type:not(:first-child) {
  /* first h2 after TOC/summary keeps the border for rhythm */
}
.legal-doc h2 .legal-doc__num {
  display: inline-block;
  margin-right: 16px;
  font-family: var(--f-mono);
  font-size: .65em;
  letter-spacing: .1em;
  color: var(--amber);
  vertical-align: .2em;
}
.legal-doc h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.35;
  color: var(--ink);
  margin: clamp(28px, 3vw, 40px) 0 clamp(10px, 1.2vw, 14px);
  scroll-margin-top: 96px;
}
.legal-doc h4 {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: clamp(20px, 2vw, 28px) 0 clamp(8px, 1vw, 12px);
}

.legal-doc ul,
.legal-doc ol {
  margin: 0 0 clamp(18px, 2vw, 24px);
  padding-left: 22px;
}
.legal-doc li {
  margin: 0 0 8px;
}
.legal-doc li::marker {
  color: var(--amber);
}
.legal-doc ul ul,
.legal-doc ol ol,
.legal-doc ul ol,
.legal-doc ol ul {
  margin: 8px 0 8px;
}

.legal-doc hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: clamp(36px, 4vw, 56px) 0;
}

.legal-doc address {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
  padding: 18px 22px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  margin: 16px 0 24px;
  max-width: 52ch;
}

/* Plain-English summary callout. Appears before §1 in ToS / Privacy.
   Amber left border acts as a soft tonal signal without shouting. */
.legal-doc__summary {
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: clamp(20px, 2.2vw, 28px) clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber-line);
  background: var(--bg-1);
  max-width: none;
}
.legal-doc__summary .legal-doc__summary-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
}
.legal-doc__summary p {
  margin: 0;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.65;
  color: var(--ink-dim);
}
.legal-doc__summary p + p {
  margin-top: 10px;
}

/* Table of contents — renders inline on every viewport. Sticky
   sidebar TOC was considered but breaks the narrow reading
   measure; an inline, collapsible-looking TOC keeps the same
   rhythm on all devices. */
.legal-doc__toc {
  margin: 0 0 clamp(40px, 4vw, 56px);
  padding: clamp(20px, 2vw, 24px) clamp(24px, 2.4vw, 28px);
  border: 1px solid var(--line);
  background: var(--bg-1);
  max-width: none;
}
.legal-doc__toc-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.legal-doc__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 40px;
}
.legal-doc__toc li {
  margin: 0 0 6px;
  break-inside: avoid;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-dim);
}
.legal-doc__toc a {
  color: var(--ink-dim);
  border: 0;
  text-decoration: none;
}
.legal-doc__toc a:hover { color: var(--amber); }
.legal-doc__toc .toc-num {
  display: inline-block;
  width: 32px;
  color: var(--ink-mute);
}
@media (max-width: 720px) {
  .legal-doc__toc ol { columns: 1; }
}

/* Cookies policy — proper HTML table reconstructed from the
   broken markdown in the original source. Monospace rows, thin
   hairlines, horizontal scroll on narrow viewports. */
.cookies-table-wrap {
  margin: 16px 0 clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  background: var(--bg-1);
  overflow-x: auto;
  max-width: none;
}
.cookies-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--ink-dim);
}
.cookies-table th,
.cookies-table td {
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.55;
}
.cookies-table th {
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  border-bottom: 1px solid var(--line-2);
}
.cookies-table tr:last-child td { border-bottom: 0; }
.cookies-table td:first-child { color: var(--ink); }

/* Contact block at the foot of each document — condensed,
   mono, structured list of emails and postal address. */
.legal-doc__contacts {
  margin: clamp(48px, 5vw, 72px) 0 0;
  padding: clamp(28px, 3vw, 40px) 0 0;
  border-top: 1px solid var(--line);
  max-width: none;
}
.legal-doc__contacts h3 {
  margin-top: 0;
}
.legal-doc__contacts ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px 40px;
}
.legal-doc__contacts li {
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  padding-left: 0;
  margin: 0;
}
.legal-doc__contacts li b {
  display: block;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}

/* Legal hub — grid of document cards. Reuses .card primitive
   with local overrides for document navigation semantics. */
.legal-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.legal-hub .legal-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  padding: clamp(28px, 2.6vw, 36px);
  border: 1px solid var(--line);
  background: var(--card);
  transition: border-color .2s, background .2s, transform .2s;
  position: relative;
}
.legal-hub .legal-card:hover {
  border-color: var(--line-2);
  background: var(--card-hi);
}
.legal-hub .legal-card__num {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 18px;
}
.legal-hub .legal-card__title {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.25;
}
.legal-hub .legal-card__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0 0 10px;
}
.legal-hub .legal-card__desc b {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 400;
  margin-top: 10px;
  margin-bottom: 4px;
}
.legal-hub .legal-card__desc b:first-child { margin-top: 0; }
.legal-hub .legal-card__cta {
  margin-top: auto;
  padding-top: 22px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
}
.legal-hub .legal-card__cta .arr {
  display: inline-block;
  margin-left: 6px;
  transition: transform .2s;
}
.legal-hub .legal-card:hover .legal-card__cta .arr {
  transform: translateX(4px);
}

@media (max-width: 600px) {
  .legal-doc { padding: 0; }
  .legal-doc p,
  .legal-doc li { font-size: 15px; line-height: 1.65; }
  .legal-doc h2 { font-size: 22px; }
  .legal-doc__summary,
  .legal-doc__toc { padding: 20px 22px; }
  .legal-hub .legal-card { padding: 24px; }
}

/* =========================================================================
   CONSENT — cookie banner + preferences modal
   -------------------------------------------------------------------------
   Design intent: quiet, low-contrast, bottom-left sheet that sits BESIDE
   the content rather than over it. No flashy animation, no full-screen
   takeover, no attention grabs. Matches the "engineered restraint" idiom
   used across the rest of the site.
   ========================================================================= */

/* Link-as-button used inside the banner body */
.consent-linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--amber);
  border-bottom: 1px solid var(--amber-line);
  cursor: pointer;
}
.consent-linklike:hover { border-bottom-color: var(--amber); }

/* --- Banner ----------------------------------------------------------- */
.consent-banner {
  position: fixed;
  left: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  z-index: 1000;
  width: min(420px, calc(100vw - 32px));
  background: rgba(13, 13, 15, .92);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .28s cubic-bezier(.2,.6,.2,1), transform .28s cubic-bezier(.2,.6,.2,1);
  pointer-events: none;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.7);
}
.consent-banner.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.consent-banner[hidden] { display: none; }

.consent-banner__inner {
  padding: 22px 24px 20px;
}

.consent-banner__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 14px;
}
.consent-banner__eyebrow .bar {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--amber);
  flex: 0 0 auto;
}
.consent-banner__eyebrow .idx {
  color: var(--amber);
  font-weight: 500;
}

.consent-banner__title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--ink);
}

.consent-banner__body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0 0 18px;
}
.consent-banner__body a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid var(--amber-line);
}
.consent-banner__body a:hover { border-bottom-color: var(--amber); }

.consent-banner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.consent-banner__actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  padding: 10px 16px;
  font-size: 13px;
}

/* --- Modal ------------------------------------------------------------ */
.consent-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(6, 6, 7, .72);
  opacity: 0;
  transition: opacity .22s ease;
}
.consent-modal-backdrop.is-open { opacity: 1; }
.consent-modal-backdrop[hidden] { display: none; }

.consent-modal {
  position: fixed;
  z-index: 1002;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 8px));
  width: min(600px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  opacity: 0;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.6,.2,1);
  outline: none;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
}
.consent-modal.is-open {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.consent-modal[hidden] { display: none; }

.consent-modal__inner {
  display: flex;
  flex-direction: column;
}

.consent-modal__header {
  position: relative;
  padding: 28px 32px 22px;
  border-bottom: 1px solid var(--line);
}
.consent-modal__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 12px;
}
.consent-modal__eyebrow .bar {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--amber);
  flex: 0 0 auto;
}
.consent-modal__eyebrow .idx { color: var(--amber); font-weight: 500; }

.consent-modal__title {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--ink);
}
.consent-modal__intro {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0;
  max-width: 56ch;
}
.consent-modal__intro a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid var(--amber-line);
}
.consent-modal__intro a:hover { border-bottom-color: var(--amber); }

.consent-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.consent-modal__close:hover {
  border-color: var(--amber-line);
  color: var(--ink);
}

.consent-modal__body {
  padding: 8px 32px 8px;
}

/* Each category row */
.consent-row {
  padding: 20px 0;
  border-bottom: 1px dashed var(--line);
}
.consent-row:last-child { border-bottom: 0; }

.consent-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 8px;
}
.consent-row__title {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ink);
}
.consent-row__title label { cursor: pointer; }

.consent-row__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0;
  max-width: 62ch;
}

.consent-row__toggle--on {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--amber);
  padding: 5px 10px;
  border: 1px solid var(--amber-line);
  white-space: nowrap;
}

/* Toggle switch ---------------------------------------------------- */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.toggle input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.toggle__slider {
  position: relative;
  width: 40px;
  height: 22px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  transition: background .18s, border-color .18s;
  flex: 0 0 auto;
}
.toggle__slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: var(--ink-dim);
  transition: transform .2s cubic-bezier(.2,.6,.2,1), background .18s;
}
.toggle input:checked + .toggle__slider {
  border-color: var(--amber-line);
  background: rgba(214,162,74,.12);
}
.toggle input:checked + .toggle__slider::after {
  transform: translateX(18px);
  background: var(--amber);
}
.toggle input:focus-visible + .toggle__slider {
  outline: 2px solid var(--amber-line);
  outline-offset: 2px;
}
.toggle__label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  min-width: 2.5em;
}

/* Modal footer */
.consent-modal__footer {
  padding: 18px 32px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--bg-1);
}
.consent-modal__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--ink-mute);
}
.consent-modal__meta b {
  font-weight: 500;
  color: var(--ink-dim);
}
.consent-modal__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.consent-modal__actions .btn {
  padding: 10px 16px;
  font-size: 13px;
}

/* When the modal is open, prevent body scroll leaks on iOS */
body.consent-lock {
  overflow: hidden;
  touch-action: none;
}

/* Footer "Your Privacy Choices" shield */
.privacy-choice-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.privacy-choice-link::before {
  content: '';
  width: 13px;
  height: 16px;
  background:
    linear-gradient(180deg, var(--amber) 50%, #1e57c0 50%);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 16'><path d='M1 1 h11 v8 c0 4 -5.5 6 -5.5 6 s-5.5 -2 -5.5 -6 z' fill='white'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 16'><path d='M1 1 h11 v8 c0 4 -5.5 6 -5.5 6 s-5.5 -2 -5.5 -6 z' fill='white'/></svg>") center / contain no-repeat;
  flex: 0 0 auto;
}

/* Mobile -------------------------------------------------------------- */
@media (max-width: 600px) {
  .consent-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
  .consent-banner__inner { padding: 20px 20px 18px; }
  .consent-banner__title { font-size: 16px; }
  .consent-banner__actions .btn { font-size: 13px; padding: 11px 14px; }

  .consent-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 24px);
  }
  .consent-modal__header,
  .consent-modal__body,
  .consent-modal__footer {
    padding-left: 22px;
    padding-right: 22px;
  }
  .consent-modal__footer {
    flex-direction: column;
    align-items: stretch;
  }
  .consent-modal__actions .btn { flex: 1 1 0; justify-content: center; }
}

/* Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .consent-banner,
  .consent-modal,
  .consent-modal-backdrop,
  .toggle__slider,
  .toggle__slider::after {
    transition: none !important;
  }
  .consent-banner { transform: none; }
}

/* ============================================================
   CAPABILITY SYSTEM — shared primitives
   ------------------------------------------------------------
   Migrated out of the old capabilities.php <style> block so the
   capability hub AND every deep capability page can reuse the
   same dispatch/console/map visualisations and meta micro-format.
   ============================================================ */

/* Anchor offset — clears nav (64px) + any sticky subnav (56px) */
html { scroll-padding-top: 128px; }

/* ---- Deep-page split block: prose left, visual right ---- */
.cap-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  padding: var(--pad-section-tight) 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.cap-block:first-of-type { border-top: 1px solid var(--line); }
.cap-block .txt .idx {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--amber);
  margin-bottom: 18px;
  display: inline-block;
}
.cap-block h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 18px;
}
.cap-block p { color: var(--ink-dim); line-height: 1.6; font-size: 15px; max-width: 56ch; }
.cap-block .bullets { margin: 22px 0 0; padding: 0; list-style: none; }
.cap-block .bullets li {
  padding: 10px 0 10px 22px;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
  color: var(--ink-dim);
  position: relative;
}
.cap-block .bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 16px;
  width: 10px; height: 1px;
  background: var(--amber);
}
.cap-block.reverse .txt { order: 2; }
.cap-block.reverse .viz { order: 1; }

/* ---- Visual frame ---- */
.cap-viz {
  aspect-ratio: 4/3;
  background: linear-gradient(180deg, #0f1014, #0a0b0d);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.cap-viz .corner-tag {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink-mute);
  text-transform: uppercase;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: rgba(10,10,11,.6);
  padding: 4px 8px;
  border: 1px solid var(--line);
}
.metric-grid {
  position: absolute; inset: 50px 24px 24px 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  font-family: var(--f-mono);
}
.metric { border: 1px solid var(--line); padding: 12px; }
.metric .k { font-size: 9px; letter-spacing: .2em; color: var(--ink-mute); text-transform: uppercase; }
.metric .v { font-family: var(--f-display); font-size: 28px; letter-spacing: -0.02em; color: var(--ink); margin-top: 6px; }
.metric .v.amber { color: var(--amber); }
.metric .v.ok { color: var(--ok); }
.log {
  position: absolute; inset: 50px 24px 24px 24px;
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim);
  line-height: 1.9; overflow: hidden;
}
.log .line { display: grid; grid-template-columns: 80px 1fr 60px; gap: 10px; border-bottom: 1px dashed var(--line); padding: 6px 0; }
.log .line .t { color: var(--ink-mute); }
.log .line .s.ok { color: var(--ok); text-align: right; }
.log .line .s.drift { color: var(--amber); text-align: right; }
.log .line .s.active { color: var(--live); text-align: right; }
.flow-viz {
  position: absolute; inset: 50px 24px 24px 24px;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
}
.flow-viz .node { text-align: center; font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); position: relative; }
.flow-viz .node::before { content: ''; display: block; width: 10px; height: 10px; background: var(--amber); margin: 0 auto 10px; }
.flow-viz .conn { height: 1px; background: repeating-linear-gradient(90deg, var(--line-2) 0 4px, transparent 4px 10px); }
.form-viz {
  position: absolute; inset: 50px 24px 24px 24px;
  display: grid; gap: 10px; font-family: var(--f-mono); font-size: 11px;
}
.form-viz .row { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.form-viz .row .k { color: var(--ink-mute); letter-spacing: .16em; text-transform: uppercase; }
.form-viz .row .v { color: var(--ink); }
.form-viz .row .v.amber { color: var(--amber); }
.map-viz { position: absolute; inset: 50px 24px 24px 24px; }
.map-viz svg { width: 100%; height: 100%; }

/* ---- Capability meta micro-format (roles / used-when / record) ---- */
.cap-meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 26px 0 0; padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cap-meta > div { padding: 14px 14px 14px 0; border-right: 1px dashed var(--line); }
.cap-meta > div:last-child { border-right: 0; padding-right: 0; }
.cap-meta > div + div { padding-left: 14px; }
.cap-meta dt { font-family: var(--f-mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); margin: 0 0 6px; }
.cap-meta dd { margin: 0; font-size: 12.5px; color: var(--ink-dim); line-height: 1.45; }

/* ---- Role coverage matrix (one record, read at each layer) ---- */
.coverage-matrix {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: clamp(32px, 3.6vw, 48px);
}
.coverage-matrix .col { border-right: 1px solid var(--line); padding: 28px 22px 32px; position: relative; }
.coverage-matrix .col:last-child { border-right: 0; }
.coverage-matrix .col::before { content: ''; position: absolute; top: -1px; left: 0; width: 40px; height: 1px; background: var(--amber); }
.coverage-matrix .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; }
.coverage-matrix h4 { font-family: var(--f-display); font-size: 16px; font-weight: 500; letter-spacing: -0.005em; margin: 0 0 14px; }
.coverage-matrix ul { list-style: none; padding: 0; margin: 0; }
.coverage-matrix li { padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; color: var(--ink-dim); line-height: 1.45; }
.coverage-matrix li:last-child { border-bottom: 0; }

.coverage-closing {
  margin: 40px 0 0; padding-top: 28px; border-top: 1px dashed var(--line);
  font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; color: var(--ink-dim); max-width: 82ch;
}

/* ============================================================
   CAPABILITY HUB — domain cards + feature inventory table
   ============================================================ */

/* Hub intro line under the H1 */
.hub-intro { max-width: 70ch; }

/* Domain block: mono label + a grid of capability cards */
.dom-block { padding: var(--pad-section-tight) 0; border-top: 1px solid var(--line); }
.dom-block:first-of-type { border-top: 0; }
.dom-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  margin-top: clamp(22px, 2.6vw, 32px);
}
.cap-card {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; transition: background .2s ease;
}
.cap-card:hover { background: rgba(214,162,74,.03); }
.cap-card .t { font-family: var(--f-display); font-size: 17px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); }
.cap-card .t.uniq::after {
  content: '\2605'; margin-left: 8px; font-size: 11px; color: var(--amber); vertical-align: 2px;
}
.cap-card .d { font-size: 13px; line-height: 1.5; color: var(--ink-dim); }
.cap-card .go { margin-top: auto; padding-top: 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }

/* Feature inventory — grouped "do you do X?" list, each row deep-links */
.feat-inv { margin-top: clamp(24px, 2.8vw, 36px); border-top: 1px solid var(--line); }
.feat-inv .grp {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--amber);
  padding: 26px 0 8px; border-bottom: 1px solid var(--line);
}
.feat-inv .grp:first-child { padding-top: 8px; }
.feat-row {
  display: grid; grid-template-columns: 1fr auto; gap: 14px 28px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink); transition: color .15s ease, background .2s ease;
}
.feat-row:hover { background: rgba(214,162,74,.03); }
.feat-row .cap { font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.feat-row .cap span { color: var(--ink-dim); }
.feat-row .to { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-mute); white-space: nowrap; }
.feat-row:hover .to { color: var(--amber); }

/* ============================================================
   "WHAT NO ONE ELSE RUNS" — homepage differentiation band
   ============================================================ */
.unique-band {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(214,162,74,.04), transparent 70%);
}
.unique-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-left: 1px solid var(--line);
  margin-top: clamp(28px, 3vw, 40px);
}
.unique-cell {
  border-right: 1px solid var(--line); padding: 24px 20px 22px;
  display: flex; flex-direction: column; gap: 10px; text-decoration: none;
  transition: background .2s ease;
}
.unique-cell:hover { background: rgba(214,162,74,.04); }
.unique-cell .n { font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; color: var(--amber); }
.unique-cell .t { font-family: var(--f-display); font-size: 16px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.unique-cell .d { font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); }
.unique-cell .go { margin-top: auto; padding-top: 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }
.unique-cell:hover .go { color: var(--amber); }

/* ============================================================
   HYBRID COMPARISON TABLE (compare/tracktik-alternative)
   ============================================================ */
.cmp-grid { margin-top: clamp(26px, 3vw, 40px); border: 1px solid var(--line); overflow-x: auto; }
.cmp-grid table { width: 100%; border-collapse: collapse; min-width: 720px; }
.cmp-grid caption {
  caption-side: top; text-align: left; padding: 14px 16px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber); border-bottom: 1px solid var(--line);
}
.cmp-grid th, .cmp-grid td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; font-size: 13px; }
.cmp-grid thead th { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 400; }
.cmp-grid tbody th { text-align: left; font-weight: 400; color: var(--ink); font-size: 13.5px; max-width: 340px; }
.cmp-grid td.us { color: var(--ink); font-weight: 600; }
.cmp-grid .yes { color: var(--ok); }
.cmp-grid .part { color: var(--amber); }
.cmp-grid .no { color: var(--ink-ghost); }
.cmp-grid thead th.col-us { color: var(--amber); }
.cmp-note { margin-top: 14px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-mute); line-height: 1.7; }

@media (max-width: 1000px) {
  .unique-grid { grid-template-columns: 1fr 1fr 1fr; }
  .unique-cell:nth-child(n+4) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .cap-block { grid-template-columns: 1fr; }
  .cap-block.reverse .txt { order: 1; }
  .cap-block.reverse .viz { order: 2; }
  .cap-meta { grid-template-columns: 1fr; }
  .cap-meta > div { border-right: 0; border-bottom: 1px dashed var(--line); padding: 14px 0; }
  .cap-meta > div + div { padding-left: 0; }
  .cap-meta > div:last-child { border-bottom: 0; }
  .coverage-matrix { grid-template-columns: 1fr 1fr; }
  .coverage-matrix .col:nth-child(2) { border-right: 0; }
  .dom-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .dom-grid { grid-template-columns: 1fr; }
  .unique-grid { grid-template-columns: 1fr; }
  .unique-cell { border-bottom: 1px solid var(--line); }
  .coverage-matrix { grid-template-columns: 1fr; }
  .coverage-matrix .col { border-right: 0; }
  .feat-row { grid-template-columns: 1fr; gap: 4px; }
  .feat-row .to { justify-self: start; }
  .flow-viz { grid-template-columns: 1fr 1fr; gap: 12px 18px; position: static; inset: auto; padding: 16px; }
  .flow-viz .conn { display: none; }
}