/* ============================================================
   observeadaptprotect.com  -  site stylesheet
   Rebuilt 2026-07 for the multi-page bench site. The dark frame
   (header / footer / privacy modal) is lifted from the original
   microsite stylesheet; the light page body is new. Fonts are
   self-hosted (see /fonts/), no external font load.
   ============================================================ */

/* ==== Self-hosted Inter (variable, latin subset) ==== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/Inter-Variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== Color foundation (lifted) + light-body tokens (new) ==== */
:root {
  --cyan: #00E6FF;
  --blue: #0066FF;
  --navy: #0A0F1C;
  --black: #05070D;
  --green: #39FF14;
  --red: #FF202D;
  --yellow: #FFEA00;
  --white: #F5F7FA;
  --silver: #B8C2CC;
  --slate: #607086;

  --bg-primary: var(--navy);
  --bg-secondary: var(--black);
  --bg-panel: rgba(10, 15, 28, 0.78);
  --bg-panel-strong: rgba(5, 7, 13, 0.88);

  --text-primary: var(--white);
  --text-secondary: rgba(245, 247, 250, 0.74);
  --text-muted: rgba(184, 194, 204, 0.52);

  --border-primary: rgba(0, 230, 255, 0.18);
  --border-secondary: rgba(255, 255, 255, 0.08);
  --border-active: rgba(57, 255, 20, 0.24);

  --glow-cyan-soft: 0 0 14px rgba(0, 230, 255, 0.18);
  --glow-cyan-medium: 0 0 32px rgba(0, 230, 255, 0.28);
  --glow-green-soft: 0 0 14px rgba(57, 255, 20, 0.18);

  /* Light body ("the bench"): dark ink on paper. The working accents are
     deepened brand hues tuned for contrast on white; the neon brand values
     stay in the dark frame where they belong. */
  --paper: #FFFFFF;
  --paper-dim: #F3F6F9;
  --ink: #0A0F1C;
  --ink-soft: rgba(10, 15, 28, 0.74);
  --ink-mute: rgba(10, 15, 28, 0.52);
  --rule: rgba(10, 15, 28, 0.14);
  --rule-soft: rgba(10, 15, 28, 0.08);
  --cyan-deep: #006B87;
  --green-deep: #1E7A00;

  --transition-fast: 160ms ease;
  --transition-medium: 320ms ease;
  --transition-slow: 680ms ease;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --z-bg: -1;
  --z-base: 1;
  --z-ui: 10;
  --z-overlay: 100;

  --header-offset: 50px;   /* two nav rows */
}

/* ==== Global reset + typography (lifted) ==== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-offset);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--black);
  color: var(--text-primary);
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  animation: pageFade 900ms ease;
}

@keyframes pageFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  html { scroll-behavior: auto; }
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

p, h1, h2, h3, h4 {
  margin: 0;
}

h1, h2, h3, h4 {
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

.label {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.text-cyan  { color: var(--cyan); }
.text-green { color: var(--green); }
.text-muted { color: var(--text-muted); }

@media (max-width: 768px) {
  .container { padding: 0 22px; }
}

/* Trademark mark on the OAP wordmark (Observe. Adapt. Protect.) */
.wm-tm {
  font-size: 0.8em;
  line-height: 0;
  vertical-align: 0.2em;
  letter-spacing: 0;
  margin-left: 1px;
  font-weight: 600;
  opacity: 0.85;
}

/* ==== Header (lifted frame, extended to two nav rows) ==== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-overlay);
  background: rgba(5, 7, 13, 0.62);
  border-bottom: 1px solid rgba(0, 230, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    background var(--transition-medium),
    border-color var(--transition-medium);
}

.site-header.scrolled {
  background: rgba(5, 7, 13, 0.9);
  border-bottom-color: rgba(0, 230, 255, 0.18);
}

.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  padding-top: 15px;
  padding-bottom: 12px;
}

/* ---- Logo (unchanged: resolves to source) ---- */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.nav-logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.nav-wordmark {
  display: block;
  line-height: 1;
}

.nav-wordmark strong {
  font-size: 1.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-wordmark span {
  margin-top: 6px;
  font-size: 0.58rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.nav-wordmark p {
  margin: 0;
}

/* ---- Nav links (shared link style, lifted) ---- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-link {
  position: relative;
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  color: var(--cyan);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 100%;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition:
    transform var(--transition-fast),
    opacity var(--transition-fast);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
  opacity: 1;
}

/* ---- Row 2: the main-site rail ---- */
.nav-subrow {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(5, 7, 13, 0.35);
}

.nav-subshell {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.nav-sublabel {
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-subrow .nav-links {
  gap: 20px;
}

.nav-subrow .nav-link {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.nav-subrow .nav-link:hover {
  color: var(--cyan);
}

.nav-subrow .nav-link::after {
  bottom: -6px;
}

/* ---- Nav actions (phone) ---- */
.nav-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}

.nav-phone {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--cyan);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.nav-phone:hover {
  color: var(--green);
}

/* ---- Hamburger button (hidden on desktop, lifted) ---- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid rgba(0, 230, 255, 0.22);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition-fast);
}

.nav-hamburger:hover {
  border-color: rgba(0, 230, 255, 0.54);
}

.nav-hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--cyan);
  border-radius: 1px;
  transition:
    transform var(--transition-medium),
    opacity var(--transition-fast);
  transform-origin: center;
}

.nav-hamburger.is-open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.is-open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ---- Mobile drawer (both nav groups, grouped) ---- */
.nav-drawer {
  display: none;
}

@media (min-width: 769px) and (max-width: 1280px) {
  .nav-shell {
    flex-wrap: wrap;
    gap: 10px 18px;
    padding-top: 12px;
    padding-bottom: 8px;
  }

  .nav-shell .nav-links {
    order: 3;
    width: 100%;
    gap: 20px;
    padding: 6px 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav-shell .nav-links::-webkit-scrollbar {
    display: none;
  }

  .nav-link {
    flex: 0 0 auto;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
  }

  .nav-link::after {
    bottom: -5px;
  }

  .nav-subshell {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav-subshell::-webkit-scrollbar {
    display: none;
  }

  :root { --header-offset: 75px; }
}

@media (max-width: 768px) {

  .nav-shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding-top: 8px;
    padding-bottom: 5px;
  }

  .nav-logo {
    flex: 1 1 auto;
    order: 1;
    gap: 10px;
    min-width: 0;
  }

  .nav-logo img {
    width: 34px;
    height: 34px;
  }

  .nav-wordmark strong {
    font-size: 1rem;
    letter-spacing: 0.06em;
  }

  .nav-wordmark span {
    font-size: 0.5rem;
    letter-spacing: 0.28em;
  }

  .nav-hamburger {
    display: flex;
    flex-shrink: 0;
    order: 2;
  }

  .nav-phone {
    order: 3;
    width: 100%;
    display: block;
    text-align: right;
    font-size: 0.56rem;
    letter-spacing: 0.08em;
    padding-bottom: 2px;
  }

  .nav-actions {
    display: contents;
  }

  /* Desktop nav rows hide; the drawer carries both groups */
  .nav-shell .nav-links,
  .nav-subrow {
    display: none;
  }

  .nav-drawer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 80vw);
    z-index: calc(var(--z-overlay) + 1);

    background: rgba(5, 7, 13, 0.97);
    border-left: 1px solid rgba(0, 230, 255, 0.14);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding-top: 72px;
    overflow-y: auto;

    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform var(--transition-medium),
      visibility var(--transition-medium);
  }

  .nav-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-drawer .nav-group-label {
    padding: 18px 28px 8px;
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  .nav-drawer .nav-link {
    display: block;
    width: 100%;
    padding: 15px 28px;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    border-bottom: 1px solid rgba(0, 230, 255, 0.07);
    white-space: normal;
  }

  .nav-drawer .nav-link::after {
    display: none;
  }

  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: rgba(3, 8, 18, 0.62);
  }

  :root { --header-offset: 50px; }
}

/* ==== The lit body ==== */
.page-white {
  position: relative;
  z-index: var(--z-base);
  background: var(--paper);
  color: var(--ink);
  padding-top: var(--header-offset);
  border-bottom: 1px solid rgba(0, 230, 255, 0.35);
}

.page-white ::selection {
  background: rgba(0, 230, 255, 0.28);
}

.bench-section {
  padding: 72px 0;
}

.bench-section + .bench-section {
  border-top: 1px solid var(--rule-soft);
}

.bench-section.dim {
  background: var(--paper-dim);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--cyan-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.page-white h1 {
  max-width: 21ch;
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  font-weight: 800;
  color: var(--ink);
}

.page-white h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 800;
  color: var(--ink);
}

.page-white h3 {
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.lede {
  max-width: 68ch;
  margin-top: 26px;
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.75;
}

.page-white p {
  color: var(--ink-soft);
}

.prose {
  max-width: 68ch;
}

/* ==== The thesis hero: copy beside the illustration ====
   The artwork is generated on a #F2F6F9 ground, one value off --paper-dim,
   but this section sits on --paper, so the ground was keyed out to
   transparency rather than left in. It therefore sits on whichever paper the
   section uses and needs no plate, border or shadow behind it.
   Copy leads and the art follows in source order, so the stacked layout on a
   phone reads the thesis first. */
.bench-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.bench-hero-art {
  justify-self: end;
  width: 100%;
  max-width: 460px;
  height: auto;
}

@media (max-width: 1024px) {
  .bench-hero {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .bench-hero-art {
    justify-self: center;
    max-width: 360px;
  }
}

.prose p + p {
  margin-top: 16px;
}

.page-white a.inline {
  color: var(--cyan-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(0, 107, 135, 0.35);
  text-underline-offset: 3px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.page-white a.inline:hover {
  color: var(--ink);
  text-decoration-color: var(--cyan-deep);
}

.footnote {
  color: var(--ink-mute);
  font-size: 0.85rem;
}

/* ---- The doors (home) ---- */
.door-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
}

.door {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  transition:
    transform var(--transition-medium),
    border-color var(--transition-medium),
    box-shadow var(--transition-medium);
}

.door:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 107, 135, 0.55);
  box-shadow: 0 14px 34px rgba(10, 15, 28, 0.1);
}

.door .door-stage {
  color: var(--cyan-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.door h3 {
  margin-top: 10px;
  font-size: 1.28rem;
}

.door p {
  margin-top: 12px;
  flex-grow: 1;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.door .door-go {
  margin-top: 22px;
  color: var(--cyan-deep);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Tactic cards (observe) ---- */
.tactic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 36px;
}

.tactic {
  padding: 26px 26px 22px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--cyan-deep);
  border-radius: var(--radius-sm);
}

.bench-section.dim .tactic {
  box-shadow: 0 6px 20px rgba(10, 15, 28, 0.05);
}

.tactic h3 {
  font-size: 1.05rem;
}

.tactic .t-what,
.tactic .t-cost {
  margin-top: 12px;
  font-size: 0.93rem;
  line-height: 1.7;
}

.tactic .t-tag {
  display: block;
  margin-top: 12px;
  color: var(--ink-mute);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tactic .t-tag + p {
  margin-top: 4px;
}

/* ---- Cite chips: the site's recurring device.
        Every claim about the industry carries its source, twice:
        the live page and the archived capture. ---- */
.cites {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.cite {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-dim);
  font-size: 0.72rem;
  color: var(--ink-mute);
  line-height: 1.4;
}

.bench-section.dim .cite {
  background: var(--paper);
}

.cite .c-src {
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}

.cite a {
  color: var(--cyan-deep);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(0, 107, 135, 0.3);
  text-underline-offset: 2px;
}

.cite a:hover {
  color: var(--ink);
}

/* ---- Benchmark strip (observe: pricing) ---- */
.bench-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 36px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.bench-figure {
  padding: 30px 24px;
  text-align: center;
  border-left: 1px solid var(--rule-soft);
}

.bench-figure:first-child {
  border-left: 0;
}

.bench-figure strong {
  display: block;
  color: var(--cyan-deep);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.bench-figure span {
  display: block;
  margin-top: 10px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bench-figure small {
  display: block;
  margin-top: 6px;
  color: var(--ink-mute);
  font-size: 0.78rem;
}

/* ---- Checklist (adapt) ---- */
.check-group {
  margin-top: 40px;
}

.check-group h3 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-deep);
}

.check-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.check-item .box {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  border: 1.5px solid var(--ink-mute);
  border-radius: 3px;
}

.check-item .q {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.98rem;
}

.check-item .a {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.check-item .a strong {
  color: var(--green-deep);
  font-weight: 700;
}

/* ---- Clause rows (protect) ---- */
.clause-list {
  margin-top: 36px;
  border-top: 1px solid var(--rule);
}

.clause {
  display: grid;
  grid-template-columns: minmax(200px, 0.9fr) 150px minmax(280px, 1.6fr);
  gap: 20px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.clause .cl-name {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.98rem;
}

.clause .cl-where {
  color: var(--cyan-deep);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.clause .cl-why {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* ---- Evidence panel (protect) ---- */
.evidence {
  margin-top: 44px;
  padding: 30px 30px 26px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--green-deep);
  border-radius: var(--radius-sm);
  background: var(--paper-dim);
}

.evidence h3 {
  font-size: 1.05rem;
}

.evidence p {
  margin-top: 10px;
  font-size: 0.93rem;
}

.evidence .cites {
  margin-top: 14px;
}

/* ---- Buttons on the light body ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast);
}

.btn:hover {
  transform: translateY(-1px);
}

.page-white .btn-ink {
  color: var(--paper);
  background: var(--ink);
}

.page-white .btn-ink:hover {
  box-shadow: 0 10px 26px rgba(10, 15, 28, 0.22);
}

.page-white .btn-line {
  color: var(--ink);
  background: transparent;
  border-color: var(--rule);
}

.page-white .btn-line:hover {
  border-color: var(--cyan-deep);
  color: var(--cyan-deep);
}

/* ---- Next-step rail at each page's end ---- */
.next-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}

.next-rail p {
  color: var(--ink-mute);
  font-size: 0.9rem;
}

/* ==== Footer (lifted; gains the This-site column) ==== */
.footer {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 64px 0 28px;
  border-top: 1px solid rgba(0, 230, 255, 0.12);
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(0, 230, 255, 0.07),
      transparent 34%
    ),
    var(--black);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) repeat(4, minmax(140px, 1fr));
  gap: 44px;
  align-items: start;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
}

.footer-logo img {
  width: 46px;
  height: auto;
  object-fit: contain;
}

.footer-logo .nav-wordmark {
  display: grid;
  grid-template-columns: repeat(3, auto);
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
}

.footer-logo > a {
  flex: 0 0 auto;
}

.footer-logo .nav-wordmark > a {
  display: contents;
}

.footer-logo .nav-wordmark strong {
  grid-column: 1 / -1;
  display: block;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 2rem;
}

.footer-logo .nav-wordmark span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.footer-column h4 {
  margin-bottom: 8px;
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-column a {
  color: var(--text-secondary);
  font-size: 0.84rem;
  transition: color var(--transition-fast);
  overflow-wrap: anywhere;
}

.footer-column a:hover {
  color: var(--cyan);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 0.78rem;
}

.footer-bottom > div {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-bottom a {
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.footer-bottom a:hover {
  color: var(--cyan);
}

/* VioLev house signature (lifted verbatim) */
.footer-bottom .sig {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.footer-bottom .sig a {
  color: inherit;
  transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .footer-bottom .sig-violev:hover,
  .footer-bottom .sig-violev:focus-visible {
    color: #A87BFF;
    text-shadow: 0 0 18px rgba(139, 92, 255, 0.45);
  }

  .footer-bottom .sig-lynx:hover,
  .footer-bottom .sig-lynx:focus-visible {
    color: var(--cyan);
    text-shadow: 0 0 18px rgba(0, 230, 255, 0.40);
  }
}

@media (hover: none) {
  .footer-bottom .sig a:hover {
    color: inherit;
    text-shadow: none;
  }
}

.footer-bottom .sig a:focus-visible {
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==== Privacy modal (lifted verbatim from the original) ==== */
body.privacy-modal-open {
  overflow: hidden;
}

.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  padding: clamp(14px, 2.4vw, 30px);
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 102, 255, 0.22), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(0, 230, 255, 0.12), transparent 30%),
    rgba(3, 8, 18, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity var(--transition-medium);
}

.privacy-modal.is-open {
  display: block;
  opacity: 1;
}

.privacy-modal__backdrop {
  position: absolute;
  inset: 0;
}

.privacy-modal__panel {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  height: min(92vh, 920px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(0, 230, 255, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(11, 24, 48, 0.97), rgba(6, 14, 31, 0.98)),
    var(--navy);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.52),
    0 0 52px rgba(0, 102, 255, 0.18);
  outline: none;
}

.privacy-modal__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 78%);
}

.privacy-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(0, 230, 255, 0.25);
  border-radius: 999px;
  background: rgba(4, 12, 28, 0.9);
  color: var(--white);
  font-size: 1.85rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(0, 102, 255, 0.22);
  transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.privacy-modal__close:hover,
.privacy-modal__close:focus-visible {
  border-color: rgba(57, 255, 20, 0.42);
  color: var(--green);
  transform: scale(1.04);
  box-shadow: 0 0 24px rgba(57, 255, 20, 0.16);
}

.privacy-modal__header {
  position: relative;
  z-index: 2;
  padding: clamp(30px, 5vw, 58px) clamp(24px, 5.6vw, 72px) 24px;
  border-bottom: 1px solid rgba(0, 230, 255, 0.12);
  background:
    radial-gradient(circle at 14% 0%, rgba(0, 230, 255, 0.13), transparent 32%),
    linear-gradient(180deg, rgba(10, 26, 58, 0.78), rgba(10, 26, 58, 0));
}

.privacy-modal__eyebrow {
  margin: 0 52px 12px 0;
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.privacy-modal__header h2 {
  max-width: 760px;
  margin: 0;
  color: var(--white);
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.privacy-modal__updated {
  margin: 18px 0 0;
  color: rgba(245, 247, 250, 0.58);
  font-size: 0.86rem;
}

.privacy-modal__content {
  position: relative;
  z-index: 2;
  height: calc(100% - 190px);
  padding: 26px clamp(24px, 5.6vw, 72px) 44px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.privacy-modal__intro {
  max-width: 820px;
  color: rgba(245, 247, 250, 0.86);
  font-size: 1.02rem;
  line-height: 1.75;
}

.privacy-modal__section {
  max-width: 820px;
  margin-top: 26px;
}

.privacy-modal__section h3 {
  margin: 0 0 8px;
  color: var(--cyan);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.privacy-modal__section p {
  margin: 0 0 10px;
  color: rgba(245, 247, 250, 0.78);
  font-size: 0.94rem;
  line-height: 1.7;
}

.privacy-modal__section a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-modal__statement p {
  color: rgba(245, 247, 250, 0.9);
  font-weight: 600;
}

/* ==== Responsive: the lit body ==== */
@media (max-width: 1024px) {
  .door-grid {
    grid-template-columns: 1fr;
  }

  .tactic-grid {
    grid-template-columns: 1fr;
  }

  .clause {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 34px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .bench-section {
    padding: 52px 0;
  }

  .bench-figures {
    grid-template-columns: 1fr;
  }

  .bench-figure {
    border-left: 0;
    border-top: 1px solid var(--rule-soft);
  }

  .bench-figure:first-child {
    border-top: 0;
  }

  .footer {
    padding: 46px 0 24px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-column {
    gap: 10px;
  }

  .footer-column h4 {
    margin-bottom: 4px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 32px;
  }

  .footer-bottom > div {
    flex-wrap: wrap;
    gap: 14px 20px;
  }
}

/* ==== Print: the bench on paper ==== */
@media print {
  .site-header,
  .footer,
  .nav-drawer,
  .privacy-modal,
  .next-rail,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    animation: none;
  }

  .page-white {
    padding-top: 0;
    border-bottom: 0;
  }

  .bench-section {
    padding: 24px 0;
  }

  .cite a {
    color: #000;
  }

  .cite a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.62rem;
    color: #444;
    word-break: break-all;
  }
}

/* ==== Guides matrix (breadcrumbs + link mesh) ==== */
.crumbs {
  margin-bottom: 18px;
  color: var(--ink-mute);
  font-size: 0.76rem;
  font-weight: 600;
}

.crumbs a {
  color: var(--cyan-deep);
}

.crumbs a:hover {
  color: var(--ink);
}

.crumb-sep {
  margin: 0 8px;
  color: var(--rule);
}

.crumb-here {
  color: var(--ink-mute);
}

.mesh-block {
  margin-top: 44px;
}

.mesh-block h3 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-deep);
}

.mesh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 22px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.mesh-grid a {
  display: block;
  padding: 7px 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--rule-soft);
  transition: color var(--transition-fast);
}

.mesh-grid a:hover {
  color: var(--cyan-deep);
}

/* ==== Skip link (keyboard / screen-reader) ==== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: calc(var(--z-overlay) + 2);
  padding: 12px 18px;
  background: var(--navy);
  color: var(--cyan);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(0, 230, 255, 0.4);
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

/* ==== Drawer close button ==== */
.nav-drawer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: rgba(4, 12, 28, 0.9);
  border: 1px solid rgba(0, 230, 255, 0.25);
  border-radius: 999px;
  color: var(--white);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.nav-drawer-close:hover,
.nav-drawer-close:focus-visible {
  border-color: rgba(57, 255, 20, 0.42);
  color: var(--green);
}

/* ---- Transparent-examples list (protect) ----
        Scoreboard table + per-provider source row. Uses the paper tokens and
        the recurring .cite chip. Horizontal scroll on narrow screens. ---- */
.disclosure-wrap {
  margin-top: 36px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}

.disclosure {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.disclosure thead th {
  padding: 14px 12px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.disclosure th.dp-name { text-align: left; }

.disclosure .dp-name {
  min-width: 190px;
  text-align: left;
  padding: 16px 14px 4px;
  font-weight: 700;
}

.disclosure .dp-row .dp-name { border-top: 1px solid var(--rule); }

.disclosure .dp-co {
  display: block;
  color: var(--ink);
  font-weight: 800;
  font-size: 0.98rem;
}

.disclosure .dp-region {
  display: block;
  margin-top: 2px;
  color: var(--ink-mute);
  font-size: 0.75rem;
  font-weight: 600;
}

.disclosure .dp-cell {
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid var(--rule);
  padding: 16px 12px 4px;
  min-width: 74px;
}

.disclosure .ck {
  color: var(--green-deep);
  font-weight: 900;
  font-size: 1.05rem;
}

.disclosure .dp-src-row td {
  padding: 4px 14px 16px;
  border-top: none;
}

.disclosure-legend {
  margin-top: 26px;
  max-width: 70ch;
}

.disclosure-legend > p {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.disclosure-legend ul {
  margin-top: 10px;
  padding-left: 0;
  list-style: none;
}

.disclosure-legend li {
  padding: 6px 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  border-bottom: 1px solid var(--rule-soft);
}

.disclosure-legend li strong { color: var(--ink); }

.list-disclaimer {
  margin-top: 26px;
  padding: 18px 20px;
  max-width: 76ch;
  border-left: 3px solid var(--rule);
  background: var(--paper);
  border-radius: var(--radius-sm);
}

.list-disclaimer p {
  color: var(--ink-mute);
  font-size: 0.84rem;
  line-height: 1.7;
}