/* ==========================================================================
   FraudTrax landing — tactical field document aesthetic
   Shared across /, /about, /compare, /hold-harmless, /privacy
   See landing/public/index.html for the canonical layout reference.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Metric-matched fallback faces (CLS).

   The landing pages carry no images, so every layout shift on a cold load came
   from font swap: the three Google faces load with display=swap, and when they
   replaced their fallbacks the text reflowed. Measured uncached, that was
   CLS 0.1508 across three bursts, all of them text nodes moving 3-62px.

   These faces re-cut the local fallback to the webfont's own metrics, so the
   first paint occupies the same space the webfont will. Values were measured
   in-browser against this page, not estimated: size-adjust is the ratio of
   average advance width (webfont / fallback), and the ascent and descent
   overrides are the webfont's ratios divided by that size-adjust, which is how
   the metric has to be expressed once the outlines are already being scaled.

   No fallback is defined for IBM Plex Mono: its declared fallback is
   ui-monospace, which is a generic keyword and cannot be named in local(), so
   there is nothing concrete to re-cut. Mono is confined to small labels and
   contributes least. If local() finds no match the face is simply skipped and
   the original stack applies, so this degrades cleanly on systems without
   Courier New or Times New Roman.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Stencil Fallback';
  src: local('Courier New'), local('CourierNewPSMT');
  size-adjust: 83.04%;
  ascent-override: 116.81%;
  descent-override: 49.37%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Serif Fallback';
  src: local('Times New Roman'), local('TimesNewRomanPSMT');
  size-adjust: 106.76%;
  ascent-override: 99.29%;
  descent-override: 43.09%;
  line-gap-override: 0%;
}

:root {
  --paper:    #efe8d6;
  --paper-2:  #e6dcc4;
  --ink:      #1a1d22;
  --ink-2:    #4a4d52;       /* UI labels: section nums, captions, meta */
  --ink-body: #2e3439;       /* body prose — darker for readability on textured paper */
  --slate:    #1f2429;
  --slate-2:  #2a3036;
  --slate-3:  #3a4148;
  --steel:    #d6d2c4;
  --amber:    #f6a800;
  --amber-2:  #c98300;
  --olive:    #5a6b3a;
  --olive-2:  #3f4b27;
  --redact:   #0d0f12;
  --hit:      #a8312b;
  --grid:     rgba(26,29,34,.06);
  --grid-d:   rgba(214,210,196,.05);

  --font-stencil: 'Stardos Stencil', 'Stencil Fallback', 'Courier New', monospace;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
  --font-serif:   'Spectral', 'Serif Fallback', 'Times New Roman', serif;

  --max:      1180px;
  --pad:      clamp(20px, 4vw, 56px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 64px),
    url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.94' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .07 0 0 0 0 .06 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  background-size: 64px 64px, 64px 64px, 240px 240px;
  background-attachment: local, local, fixed;
}
::selection { background: var(--amber); color: var(--ink); }
a { color: inherit; text-decoration: none; }
a.link { color: var(--olive-2); border-bottom: 1px dotted currentColor; }
a.link:hover { color: var(--ink); }

/* ---------- Classification chrome ---------- */
.classif {
  position: sticky; top: 0; z-index: 80;
  background: var(--slate);
  color: var(--amber);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--amber-2);
  box-shadow: 0 1px 0 #00000033, 0 6px 16px -10px #00000099;
}
.classif::before, .classif::after {
  content: "▮ ▮ ▮"; padding: 0 14px; opacity: .55; letter-spacing: 4px;
}
.classif strong { color: #fff; letter-spacing: 5px; padding: 0 12px; }

/* ---------- Top brand strip ---------- */
.strip {
  background: var(--slate);
  color: var(--steel);
  border-bottom: 1px solid var(--slate-3);
  padding: 14px var(--pad);
}
.strip-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.brand {
  font-family: var(--font-stencil);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 4px;
  color: #fff;
  display: inline-flex; align-items: baseline; gap: 10px;
}
.brand .dot { width: 9px; height: 9px; background: var(--amber); display: inline-block; }
.strip-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  color: var(--steel); text-transform: uppercase; opacity: .75;
  text-align: right;
}
.strip-meta b { color: var(--amber); font-weight: 600; }
nav.strip-nav {
  display: flex; gap: 22px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase;
  justify-self: center;
}
nav.strip-nav a { color: var(--steel); transition: color .12s; }
nav.strip-nav a:hover { color: var(--amber); }
@media (max-width: 760px) {
  .strip-inner { grid-template-columns: 1fr; gap: 10px; text-align: center; }
  nav.strip-nav { justify-content: center; flex-wrap: wrap; }
  .strip-meta { text-align: center; }
}

/* ---------- Page envelope ---------- */
.doc {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) 80px;
  position: relative;
}

/* Side rail running down the left of every section */
.rail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 40px;
  border-left: 1px solid var(--slate-3);
  display: none;
}
@media (min-width: 980px) { .rail { display: block; } }
.rail-tag {
  position: sticky; top: 80px;
  transform-origin: 0 100%;
  transform: rotate(-90deg) translate(-100%, -8px);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 4px;
  text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
  padding-left: 4px;
}

/* ---------- Section primitives ---------- */
section {
  position: relative;
  padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 80px);
  border-bottom: 1px dashed rgba(26,29,34,.18);
}
section:last-of-type { border-bottom: 0; }
.sec-num {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.sec-num::before {
  content: ""; width: 28px; height: 1px; background: var(--ink); display: inline-block;
}
h1, h2, h3, h4 { font-family: var(--font-stencil); font-weight: 700; line-height: 1.05; letter-spacing: 1px; }

/* ---------- Doc-title hero (smaller than the marketing hero) ---------- */
.doc-title {
  padding: clamp(36px, 6vw, 80px) 0 clamp(28px, 4vw, 48px);
}
.doc-title h1 {
  font-size: clamp(38px, 6.5vw, 80px);
  letter-spacing: 2px; color: var(--ink); text-transform: uppercase;
  margin-top: 14px;
}
.doc-title .meta {
  margin-top: 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  color: var(--ink-2); text-transform: uppercase;
}
.doc-title .meta b { color: var(--ink); }

/* ---------- Marketing hero (homepage only) ---------- */
.hero { padding-top: clamp(60px, 9vw, 120px); padding-bottom: clamp(60px, 9vw, 120px); }
.hero-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px); align-items: end;
}
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.3fr .9fr; } }
/* Hero headline. The markup uses <br> for three lines, but the browser will
   still wrap a segment that overflows the hero grid column (~603px at 1600px)
   and it does so silently — there is no error, the headline just grows a line.
   The BINDING segment is "reads the", not the stamp: at 112px it needed ~664px
   against a 603px column and broke into "READS" / "THE", pushing the headline
   to four lines. At 100px it needs ~593px (~10px slack). The "scene." + stamp
   pair is the looser constraint (~539px). If you enlarge the font, the stamp,
   or the copy, re-measure the WIDEST <br> segment — not just the stamp — and
   confirm three rendered lines at 1024/1280/1600px. */
.hero h1 { font-size: clamp(44px, 8.4vw, 100px); letter-spacing: 2px; color: var(--ink); text-transform: uppercase; }
.hero h1 .stamp {
  display: inline-block; transform: rotate(-3deg);
  background: var(--hit); color: var(--paper);
  padding: 4px 10px 2px; margin-left: 10px;
  font-size: clamp(16px, 2vw, 20px); letter-spacing: 4px;
  border: 2px solid var(--paper); box-shadow: 0 0 0 2px var(--hit);
  text-transform: uppercase; vertical-align: middle;
}
.hero .lede {
  font-family: var(--font-serif); font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6; color: var(--ink-body); max-width: 56ch; margin-top: 22px;
}
.hero .lede b { color: var(--ink); font-weight: 600; }
.hero-cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  border: none; cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.btn-amber { background: var(--amber); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn-amber:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn .arrow { font-family: var(--font-mono); font-size: 14px; }

/* ---------- Sitrep meta-card (right rail of homepage hero) ---------- */
.meta-card {
  background: var(--slate); color: var(--steel);
  padding: 20px 22px;
  border: 1px solid var(--slate-3);
  border-top: 4px solid var(--amber);
  font-family: var(--font-mono);
  box-shadow: 0 24px 60px -30px #00000088, 4px 4px 0 var(--olive);
  transform: translateY(-4px);
}
.meta-card .title { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
.meta-card dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 12px; }
.meta-card dt { color: var(--steel); opacity: .82; letter-spacing: 1px; text-transform: uppercase; font-size: 11px; align-self: center; }
.meta-card dd { color: #fff; text-align: right; font-weight: 500; }
.meta-card hr { border: 0; border-top: 1px dashed var(--slate-3); margin: 14px 0; }
.meta-card .stamp-hit { display: inline-block; padding: 3px 8px; background: var(--hit); color: #fff; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; }

/* ---------- DAN-O explainer two-column ---------- */
.dano-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 980px) { .dano-grid { grid-template-columns: 1fr 1.4fr; gap: 56px; } }
.dano-side {
  border: 1px solid var(--ink); padding: 22px;
  background: var(--paper-2);
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.75; color: var(--ink-body);
}
.dano-side .label {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--olive-2); margin-bottom: 10px;
}
.dano-side ul { list-style: none; }
.dano-side li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; margin: 8px 0; }
.dano-side li::before { content: "▸"; color: var(--amber); font-weight: 700; }

h2.section-title { font-size: clamp(34px, 5vw, 56px); line-height: 1.05; margin-bottom: 14px; text-transform: uppercase; }
.section-sub {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--olive-2); margin-bottom: 20px;
}

/* ---------- Prose ---------- */
.prose { font-size: 17.5px; line-height: 1.72; color: var(--ink-body); max-width: 70ch; }
.prose b, .prose strong { color: var(--ink); font-weight: 600; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 14px; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { padding: 4px 0 4px 18px; position: relative; }
.prose ul li::before { content: "▸"; position: absolute; left: 0; top: 4px; color: var(--olive); font-weight: 700; }
.prose h3 {
  font-family: var(--font-stencil); font-size: 22px; text-transform: uppercase;
  color: var(--ink); margin: 26px 0 10px; letter-spacing: 1.5px;
}
.prose h4 {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--olive-2); margin: 22px 0 8px;
}
.prose code {
  font-family: var(--font-mono); font-size: 14px;
  background: var(--paper-2); padding: 1px 6px; border-radius: 2px;
  border: 1px solid rgba(26,29,34,.12);
}
.prose a { color: var(--olive-2); border-bottom: 1px dotted currentColor; }
.prose a:hover { color: var(--ink); }

/* Numbered list (legal docs) */
.prose ol { counter-reset: legal; list-style: none; padding-left: 0; }
.prose ol > li { counter-increment: legal; padding: 4px 0 4px 32px; position: relative; }
.prose ol > li::before {
  content: counter(legal) ".";
  position: absolute; left: 0; top: 4px;
  font-family: var(--font-mono); font-weight: 600; color: var(--olive);
}

/* ---------- Capability matrix (homepage) ---------- */
.cap-intro { margin-bottom: 36px; }
.cap-grid {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--ink); border-left: 1px solid var(--ink);
}
/* Fixed column counts that all divide the 8 cards evenly (8/4/2) so the
   last row is always full — avoids a stray empty trailing grid cell. */
@media (min-width: 620px) { .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .cap-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cap {
  background: var(--paper);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 26px 24px 28px; position: relative;
  transition: background .15s;
}
.cap:hover { background: var(--paper-2); }
.cap .num {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--font-mono); font-size: 11px;
  /* opacity was .55, which blended ink-2 to #94938d over --paper: 2.52:1, well
     under the 4.5:1 WCAG AA minimum. .9 gives 5.49:1 on --paper and 4.92:1 on
     the darker --paper-2 hover background, so it passes in both states.
     .85 was rejected: it passes on --paper but drops to 4.34:1 on hover. */
  letter-spacing: 2px; color: var(--ink-2); opacity: .9;
}
.cap h3 { font-size: 24px; line-height: 1.05; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; padding-right: 60px; overflow-wrap: break-word; }
.cap p { font-family: var(--font-serif); font-size: 15.5px; line-height: 1.65; color: var(--ink-body); }
.cap .tag {
  margin-top: 14px; display: inline-block;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px;
  color: var(--olive-2); text-transform: uppercase;
  padding-top: 10px; border-top: 1px dashed var(--ink-2);
}

/* ---------- Case-file folder block (officer statement, etc) ---------- */
.file {
  background: var(--paper);
  border: 1px solid var(--ink); position: relative;
  padding: 36px clamp(24px, 4vw, 56px) 36px clamp(80px, 7vw, 120px);
  margin-top: 16px;
}
.file::before {
  content: attr(data-tab);
  position: absolute; top: -22px; left: clamp(60px, 6vw, 110px);
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px;
  padding: 6px 18px;
}
.file::after {
  content: ""; position: absolute; left: 32px; top: 28px; bottom: 28px; width: 16px;
  background-image: radial-gradient(circle, var(--paper-2) 6px, transparent 7px);
  background-position: 0 0; background-size: 16px 56px; background-repeat: repeat-y;
  border-right: 1px dashed rgba(26,29,34,.25);
}
.file .signed {
  margin-top: 22px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  color: var(--ink-2); text-transform: uppercase;
  display: flex; gap: 28px; flex-wrap: wrap; align-items: end;
}
.file .signature {
  font-family: 'Spectral', serif; font-style: italic; font-size: 28px;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding: 0 4px 0;
}
.file h3 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 8px; text-transform: uppercase; }
.file .role {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--olive-2); margin-bottom: 22px;
}

/* ---------- Pricing tiers (homepage) ---------- */
.tiers {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border: 1px solid var(--ink);
}
.tier { padding: 28px 24px; border-right: 1px solid var(--ink); background: var(--paper); display: flex; flex-direction: column; }
.tier:last-child { border-right: 0; }
.tier.feature { background: var(--slate); color: var(--steel); }
.tier.feature h4 { color: #fff; }
.tier.feature .price b { color: var(--amber); }
.tier h3 { font-family: var(--font-stencil); font-size: 26px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 6px; }
.tier .for { font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--olive-2); margin-bottom: 14px; }
.tier.feature .for { color: var(--amber); }
.tier .price { font-family: var(--font-mono); font-size: 14px; margin-bottom: 14px; }
.tier .price b { font-size: 28px; color: var(--ink); font-weight: 700; }
.tier ul { list-style: none; font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--ink-body); }
.tier.feature ul { color: #ffffff; }            /* dark tier: white text for max contrast on slate bg */
.tier li { padding: 6px 0 6px 18px; position: relative; }
.tier li::before { content: "✓"; position: absolute; left: 0; top: 6px; color: var(--olive); font-weight: 700; }
.tier.feature li::before { color: var(--amber); }
.tier.feature .price { color: var(--steel); }   /* "/ month" text — restore contrast on dark bg */
.tier .cta { margin-top: auto; padding-top: 18px; }

/* ---------- CTA block ---------- */
.cta-block {
  margin-top: 32px;
  background: var(--ink); color: var(--paper);
  padding: clamp(36px, 6vw, 72px);
  position: relative; overflow: hidden;
}
.cta-block::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 16px, rgba(246,168,0,.04) 16px 17px);
  pointer-events: none;
}
.cta-block h2 { font-size: clamp(36px, 5vw, 64px); color: var(--paper); text-transform: uppercase; line-height: 1.05; }
.cta-block p { font-size: 17px; max-width: 60ch; color: rgba(239,232,214,.78); margin-top: 14px; }
.cta-block .btns { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }
.cta-block .btn-ghost { color: var(--paper); border-color: var(--paper); }
.cta-block .btn-ghost:hover { background: var(--paper); color: var(--ink); }
/* Enrollment explainer — what happens after you apply */
.cta-block .enroll {
  list-style: none; counter-reset: enroll;
  margin-top: 24px; max-width: 60ch; display: grid; gap: 10px;
}
.cta-block .enroll li {
  counter-increment: enroll; position: relative; padding-left: 34px;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55;
  color: rgba(239, 232, 214, .82);
}
.cta-block .enroll li::before {
  content: counter(enroll, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  color: var(--amber); font-weight: 700; letter-spacing: 1px;
}

/* ---------- Callout / warn / note blocks ---------- */
.callout, .warn, .note {
  background: var(--paper-2); border: 1px solid var(--ink);
  padding: 18px 22px; margin: 22px 0; font-size: 15px; line-height: 1.55;
  color: var(--ink); position: relative;
  border-left-width: 6px; border-left-color: var(--olive);
}
.callout strong, .warn strong, .note strong { color: var(--ink); }
.warn { border-left-color: var(--amber); background: rgba(246,168,0,.08); }
.note { border-left-color: var(--olive); }
.callout { border-left-color: var(--ink); }

/* ---------- Compare table (compare page) ---------- */
.cmp {
  border: 1px solid var(--ink); width: 100%; border-collapse: collapse;
  font-size: 15px; background: var(--paper); color: var(--ink-body);
}
.cmp th, .cmp td {
  padding: 14px 16px; text-align: left;
  border-bottom: 1px solid var(--ink); vertical-align: top;
}
.cmp tr:last-child td { border-bottom: 0; }
.cmp thead th {
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase;
}
.cmp thead th.us { background: var(--olive); color: #fff; }
.cmp thead th.them { background: var(--slate-2); color: var(--steel); }
.cmp td.cap { font-weight: 600; color: var(--ink); width: 30%; background: var(--paper-2); }
.cmp td.us { background: rgba(90,107,58,.08); color: var(--ink); }
.cmp td.them { color: var(--ink-body); }
.cmp .check, .cmp .x, .cmp .partial {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%; margin-right: 8px;
  text-align: center; line-height: 18px; font-size: 11px; font-weight: 700; vertical-align: -3px;
}
.cmp .check { background: var(--olive); color: #fff; }
.cmp .x     { background: var(--hit);   color: #fff; }
.cmp .partial { background: var(--amber); color: var(--ink); }

/* Pillar grid (compare page) */
.pillars {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--ink); border-left: 1px solid var(--ink);
  margin-top: 24px;
}
.pillar {
  padding: 22px 22px 24px;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.pillar h3 { font-size: 18px; text-transform: uppercase; margin-bottom: 8px; }
.pillar p { font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--ink-body); }

/* ---------- Footer ---------- */
footer.tactical {
  background: var(--slate); color: var(--steel);
  padding: 36px var(--pad) 28px;
  border-top: 4px solid var(--amber);
  margin-top: 40px;
}
.foot-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto;
  gap: 24px; align-items: end;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
}
/* padding was `0 8px`, so at 11px these links were ~13px tall: under the 24px
   minimum touch target. inline-block + vertical padding grows the hit area to
   ~33px without moving the text, since the row is `align-items: end`. */
.foot-inner a { color: var(--steel); display: inline-block; padding: 10px 8px; opacity: .75; transition: opacity .1s; }
.foot-inner a:hover { opacity: 1; color: var(--amber); }
.foot-mark {
  font-family: var(--font-stencil); font-size: 18px; letter-spacing: 3px;
  color: #fff; text-transform: uppercase;
}
.foot-disclaimer {
  max-width: var(--max); margin: 18px auto 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
  color: var(--steel); opacity: .82; line-height: 1.65; text-transform: none;
}
@media (max-width: 760px) {
  .foot-inner { grid-template-columns: 1fr; text-align: left; }
}

/* ---------- Reveal animation (run once on load) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(.22,.61,.36,1) forwards; }
  .reveal-1 { animation-delay: .05s; }
  .reveal-2 { animation-delay: .18s; }
  .reveal-3 { animation-delay: .32s; }
  .reveal-4 { animation-delay: .46s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
  @keyframes scan {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(110%); }
  }
  .cap::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(246,168,0,.1) 50%, transparent 100%);
    transform: translateX(-110%); transition: opacity .2s; opacity: 0;
  }
  .cap:hover::after { opacity: 1; animation: scan 1.4s linear; }
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY — focus, skip link, form labels (added 2026-08-16)
   This stylesheet previously contained ZERO :focus rules of any kind, so
   keyboard users had no visible indication of position anywhere on the page.

   The ring is deliberately two-tone. --amber on --paper is ~1.9:1, which fails
   the 3:1 WCAG 2.4.11 requirement for a focus indicator, and --ink is invisible
   against the dark sections. An ink outline plus an amber halo stays visible on
   both the paper and the dark bands.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--amber);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
}
.skip:focus {
  left: 12px; top: 12px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); padding: 10px 16px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
}

/* Contributor form. Fields were placeholder-only: no <label> at all, which
   fails WCAG 3.3.2 and leaves the field unnamed once the placeholder clears. */
.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  margin-bottom: 5px;
  opacity: .78;
}
.field-label .req { font-weight: 700; }