@import url("/assets/fonts.css");

/* DFENS — DFENS AI Ltd marketing site
   Self-contained: brand fonts are self-hosted (assets/fonts/), no external requests.
   (The product's pitch is "no outbound vendor calls" — the site keeps the same promise.)

   Design system: DFENS v1.0 — Ink canvas, Signal accent, Archivo + JetBrains Mono,
   the battlement mark. See marketing/BRAND.md. */

:root {
  --bg: #08090B;         /* Ink — page canvas             */
  --bg-raised: #0F1217;  /* Panel — cards / surfaces       */
  --bg-inset: #0A0C10;   /* deeper inset / on-panel wells  */
  --bg-term: #050607;    /* terminal / code                */
  --steel: #1A1E26;      /* elevated / hover               */
  --border: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.14);
  --text: #EDEFF2;       /* Bone — primary text            */
  --text-dim: #9BA3AF;   /* Mist — secondary text          */
  --text-mid: #C7CCD3;   /* between Bone and Mist          */
  --muted: #828C9B;      /* Slate — labels / muted TEXT    */
  --muted-deco: #5B6472; /* Slate (deep) — NON-TEXT only   */

  --signal: #22c55e;     /* Signal — accent, CTAs, active  */
  --signal-dim: #4ade80;
  --accent: #22c55e;     /* alias: primary accent = Signal */
  --pass: #4ADE80;       /* verdict: pass / covered        */
  --block: #FF5C5C;      /* verdict: block                 */
  --flag: #FBBF24;       /* verdict: flag / warn / partial  */
  --red: #FF5C5C;

  --focus: #EDEFF2;      /* focus ring — Bone, 17.3:1 on Ink */

  --max: 1180px;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* The site is permanently dark. Tell the UA so native scrollbars, form
     controls, and the default focus ring render against a dark canvas. */
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--signal); color: var(--bg); }

/* ---- focus ----
   The design system owns its focus indicator rather than inheriting the UA
   default, so no future `outline: none` can silently remove the only one. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { outline-offset: 3px; }

/* Visually hidden, still announced. Used where a heading is needed for
   document structure but would be redundant on screen. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- skip link ---- */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--signal); color: var(--bg);
  font-weight: 700; font-size: 14.5px;
  padding: 11px 18px; border-radius: 9px;
  transition: top 140ms ease-out;
}
.skip-link:focus { top: 12px; color: var(--bg); }

a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--signal-dim); text-decoration: none; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 40px; }

/* ---- brand mark ---- */
.mark-svg { display: block; flex: none; }

/* ---- nav ---- */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 9, 11, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px;
  height: 68px;
}
.brand {
  display: flex; align-items: center; gap: 13px; flex: none;
  font-weight: 800; font-size: 19px; letter-spacing: 0.14em; color: var(--text);
}
.brand:hover { color: var(--text); }
.brand .co {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; color: var(--muted);
}
nav ul { display: flex; gap: 26px; list-style: none; align-items: center; }
/* Nav labels never wrap; the wordmark suffix and then the gaps give way first. */
nav ul a, nav ul .btn { white-space: nowrap; }
nav ul a { color: var(--text-dim); font-size: 14.5px; font-weight: 500; }
nav ul a:hover { color: var(--text); }
nav ul a[aria-current="page"] { color: var(--text); }

/* Mobile disclosure nav. Hidden above 900px, where the full list is visible.
   Pure CSS + <details>: no script, consistent with the rest of the site. */
.nav-more { display: none; position: relative; }
.nav-more > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  color: var(--text-dim); font-size: 14.5px; font-weight: 500;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-2);
  transition: color 140ms ease-out, border-color 140ms ease-out;
}
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav-more[open] > summary { color: var(--text); border-color: var(--text-dim); }
.nav-more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.nav-more-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 210px; padding: 8px;
  background: var(--bg-raised); border: 1px solid var(--border-2);
  border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.9);
  display: grid; gap: 2px;
}
.nav-more-panel a {
  display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--text-dim); font-size: 15px;
}
.nav-more-panel a:hover { color: var(--text); background: var(--steel); }
.nav-more-panel a[aria-current="page"] { color: var(--signal); background: rgba(34,197,94,0.08); }

/* The CTA label shortens on small screens so it stays on one line. */
.cta-short { display: none; }

/* The wordmark suffix is the first thing to go when the nav gets tight. */
@media (max-width: 1340px) {
  .brand .co { display: none; }
}
@media (max-width: 1060px) {
  nav ul { gap: 20px; }
  nav ul a { font-size: 14px; }
}
.btn {
  display: inline-block;
  background: var(--signal);
  color: var(--bg) !important;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 9px;
  font-size: 14.5px;
  transition: background 140ms ease-out;
}
.btn:hover { background: var(--signal-dim); color: var(--bg) !important; }
.btn.ghost {
  background: transparent;
  color: var(--text) !important;
  border: 1px solid var(--border-2);
  font-weight: 600;
}
.btn.ghost:hover { border-color: var(--text-dim); background: var(--steel); }

/* ---- hero ---- */
.hero { padding: 92px 0 76px; }
.hero-grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center;
}
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--signal);
  border: 1px solid rgba(34,197,94,0.3); padding: 7px 13px; border-radius: 999px;
  margin-bottom: 26px;
}
.hero .eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
  animation: pulseDot 2s infinite;
}
.hero h1 {
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.0;
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 680px;
}
.hero p.lede {
  margin-top: 22px;
  font-size: 19px;
  color: var(--text-dim);
  max-width: 560px;
}
.hero p.lede code { font-family: var(--mono); font-size: 0.85em; color: var(--text); }
.hero .cta-row { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero .cta-row .btn { font-size: 16px; padding: 15px 28px; border-radius: 10px; }
.hero .note {
  margin-top: 34px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.04em; color: var(--muted);
}

/* ---- hero gate diagram ---- */
.gate {
  --cycle: 9s;          /* one full inspection cycle: three 3s phases */
  background: #0B0D11; border: 1px solid var(--border);
  border-radius: 18px; padding: 30px;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,0.9);
}
/* Paused by the inline script when offscreen or the tab is hidden.
   Default is running, so the sequence still works with no JS. */
.gate.is-paused *, .gate.is-paused { animation-play-state: paused; }
.gate-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
}
.gate-top .lbl { color: var(--muted); }
.gate-top .live { color: var(--pass); letter-spacing: 0.06em; }
.gate-track {
  position: relative; display: flex; align-items: stretch; justify-content: space-between;
  gap: 12px; height: 150px;
}
.gate-node {
  flex: 1; background: #12151B; border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.gate-node .cap { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.gate-node .glyph { width: 26px; height: 26px; border: 1.75px solid var(--muted-deco); border-radius: 6px; }
.gate-node .bars { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.gate-node .bars span { width: 26px; height: 5px; border-radius: 3px; background: var(--muted-deco); }
.gate-core {
  flex: 1.1; position: relative; background: #12151B;
  border: 1px solid rgba(34,197,94,0.4); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  overflow: hidden;
}
.gate-core .lbl { font-family: var(--mono); font-size: 10px; color: var(--signal); letter-spacing: 0.1em; }
/* The scan sweeps once per 3s phase, crossing the core exactly as a packet
   arrives, so the sweep reads as the inspection rather than as decoration. */
.gate-scan {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  animation: scan 3s ease-in-out infinite;
}
/* The core answers back when a request is refused. */
.gate-core { animation: coreAlert var(--cycle) ease-out infinite; }

/* ---- the inspection cycle ----
   Three requests, three outcomes, one after another: redacted and passed,
   blocked at the gate, routed to a cheaper model. Each lights its own verdict
   as it resolves. A lane spans the track, so translateX(100%) is one full
   traverse and the dot rides at the lane's left edge. */
.lane {
  position: absolute; left: 0; right: 0; height: 0;
  opacity: 0;                        /* nothing is on the track until its turn */
  animation-duration: var(--cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;    /* hold frame 0 through the delay */
}
.lane .pkt {
  position: absolute; left: 0; top: 0;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--signal);
  animation-duration: var(--cycle);
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.lane-redact { top: 20%; animation-name: laneRedact; }
.lane-block  { top: 50%; animation-name: laneBlock;  animation-delay: calc(var(--cycle) / 3); }
.lane-route  { top: 74%; animation-name: laneRoute;  animation-delay: calc(var(--cycle) / 1.5); }
.lane-redact .pkt { animation-name: pktRedact; }
.lane-block  .pkt { animation-name: pktBlock; animation-delay: calc(var(--cycle) / 3); }

@keyframes laneRedact {
  0%   { transform: translateX(2%);   opacity: 0; }
  2%   { opacity: 1; }
  14%  { transform: translateX(40%); }
  22%  { transform: translateX(56%); }               /* slows through the core */
  32%  { transform: translateX(98%);  opacity: 1; }  /* released, exits faster */
  34%  { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(100%); opacity: 0; }
}
@keyframes laneBlock {
  0%    { transform: translateX(2%);  opacity: 0; }
  2%    { opacity: 1; }
  14%   { transform: translateX(34%); }
  16%   { transform: translateX(37%); }               /* impact at the gate face */
  17.5% { transform: translateX(33%); }               /* hard recoil, no bounce */
  25%   { transform: translateX(33%); opacity: 1; }
  28%   { transform: translateX(33%); opacity: 0; }
  100%  { transform: translateX(33%); opacity: 0; }
}
@keyframes laneRoute {
  0%   { transform: translate(2%, 0);    opacity: 0; }
  2%   { opacity: 1; }
  14%  { transform: translate(40%, 0); }
  22%  { transform: translate(56%, 0); }
  26%  { transform: translate(68%, 12px); }           /* deflected to a cheaper model */
  32%  { transform: translate(98%, 12px);  opacity: 1; }
  34%  { transform: translate(100%, 12px); opacity: 0; }
  100% { transform: translate(100%, 12px); opacity: 0; }
}
/* The verdict is carried by the dot's own colour the instant it is decided. */
@keyframes pktRedact { 0% { background-color: var(--signal); } 20%, 100% { background-color: var(--pass); } }
@keyframes pktBlock  { 0% { background-color: var(--signal); } 16%, 100% { background-color: var(--block); } }
@keyframes coreAlert {
  0%, 48%   { border-color: rgba(34,197,94,0.4); }
  50%       { border-color: rgba(255,92,92,0.65); }
  58%       { border-color: rgba(255,92,92,0.45); }
  64%, 100% { border-color: rgba(34,197,94,0.4); }
}

.gate-verdicts { display: flex; gap: 8px; margin-top: 20px; }
.gate-verdicts span {
  flex: 1; text-align: center; font-family: var(--mono); font-size: 10.5px;
  padding: 8px; border-radius: 7px;
  /* Tinted from the chip's own colour, so one keyframe drives all three.
     Text colour never changes, so contrast holds at every point in the cycle. */
  background-color: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  animation: verdictCue var(--cycle) ease-out infinite;
}
.gate-verdicts .v-pass  { color: var(--pass); }
.gate-verdicts .v-block { color: var(--block);  animation-delay: calc(var(--cycle) / 3); }
.gate-verdicts .v-cost  { color: var(--signal); animation-delay: calc(var(--cycle) / 1.5); }

@keyframes verdictCue {
  0%, 17%   { background-color: color-mix(in srgb, currentColor 8%, transparent);
              border-color: color-mix(in srgb, currentColor 14%, transparent); }
  /* Tint peaks at 22%: at 26% the red chip's own text drops to 4.49:1.
     The border carries the rest of the emphasis, where contrast is free. */
  21%       { background-color: color-mix(in srgb, currentColor 22%, transparent);
              border-color: color-mix(in srgb, currentColor 62%, transparent); }
  31%       { background-color: color-mix(in srgb, currentColor 18%, transparent);
              border-color: color-mix(in srgb, currentColor 48%, transparent); }
  44%, 100% { background-color: color-mix(in srgb, currentColor 8%, transparent);
              border-color: color-mix(in srgb, currentColor 14%, transparent); }
}

@keyframes scan { 0%,100%{transform:translateX(-100%);} 50%{transform:translateX(100%);} }
@keyframes pulseDot { 0%,100%{opacity:0.4;} 50%{opacity:1;} }

/* Menu content arrives from the control that opened it. */
.nav-more[open] > .nav-more-panel { animation: menuIn 150ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gate-scan, .gate-core, .hero .eyebrow .dot,
  .lane, .lane .pkt, .gate-verdicts span,
  .nav-more[open] > .nav-more-panel { animation: none; }
  .skip-link, .btn, .doc-card, .nav-more > summary { transition: none; }
  /* The sequence resolves into a still frame telling the same story: one
     request through, one stopped at the gate, one deflected to a lower lane. */
  .lane { opacity: 1; }
  .lane-redact { transform: translateX(88%); }
  .lane-block  { transform: translateX(33%); }
  .lane-route  { transform: translate(88%, 12px); }
  .lane-redact .pkt { background: var(--pass); }
  .lane-block  .pkt { background: var(--block); }
  .gate-verdicts span {
    background-color: color-mix(in srgb, currentColor 20%, transparent);
    border-color: color-mix(in srgb, currentColor 42%, transparent);
  }
}

/* ---- terminal ---- */
.term {
  margin-top: 56px;
  background: var(--bg-term);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.term-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.term-bar span:not(.t) { width: 11px; height: 11px; border-radius: 50%; }
.term-bar span:nth-child(1) { background: var(--block); }
.term-bar span:nth-child(2) { background: var(--flag); }
.term-bar span:nth-child(3) { background: var(--pass); }
.term-bar .t { margin-left: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.term pre {
  padding: 22px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  overflow-x: auto;
  color: var(--text-mid);
}
.term .c  { color: var(--muted); }    /* comment */
.term .g  { color: var(--pass); }     /* pass / green */
.term .r  { color: var(--block); }    /* block / red */
.term .y  { color: var(--flag); }     /* flag / warn (amber) */

/* ---- sections ---- */
section { padding: 96px 0; border-top: 1px solid var(--border); }
.kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--signal); margin-bottom: 18px;
}
h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; max-width: 760px; }
.sub { margin-top: 16px; color: var(--text-dim); max-width: 720px; font-size: 18px; }

/* capabilities — three mandates */
.mandates { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mandate {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 16px; padding: 32px;
}
.mandate .m-ico {
  width: 44px; height: 44px; border-radius: 10px; background: rgba(34,197,94,0.12);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.mandate h3 { font-size: 21px; font-weight: 800; margin-bottom: 12px; }
.mandate p { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; margin-bottom: 18px; }
.mandate ul { list-style: none; display: grid; gap: 9px; }
.mandate li { font-size: 13.5px; color: var(--text-mid); display: flex; gap: 9px; }
.mandate li::before { content: "✓"; color: var(--pass); font-weight: 700; }

/* threat list */
.threats { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.threat {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}
.threat h3 { font-size: 17px; margin-bottom: 8px; }
.threat p { font-size: 14.5px; color: var(--text-dim); }
.threat .tag {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--block); margin-bottom: 12px;
}

/* how it works */
.steps { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { border-left: 2px solid var(--border); padding-left: 20px; }
.step .n {
  font-family: var(--mono); color: var(--signal); font-size: 14px;
  display: block; margin-bottom: 10px;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--text-dim); }
.step code, .feature code, .prov-detail code, .dm-lede code {
  font-family: var(--mono); font-size: 0.86em;
  background: var(--bg-inset); border: 1px solid var(--border);
  border-radius: 5px; padding: 1.5px 6px; color: var(--text);
}

/* feature grid */
.features { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.feature {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
}
.feature h3 { font-size: 17px; margin-bottom: 8px; }
.feature h3 .fico { color: var(--signal); font-family: var(--mono); margin-right: 8px; }
.feature p { font-size: 15px; color: var(--text-dim); }

/* provider / compatibility grid */
.providers { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.prov {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}
.prov-name { font-size: 17px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.prov-badge {
  display: inline-block; font-family: var(--mono); font-size: 10.5px;
  vertical-align: middle; margin-left: 6px; padding: 2px 8px;
  border-radius: 999px; color: var(--signal);
  border: 1px solid rgba(34,197,94,0.3); text-transform: uppercase; letter-spacing: 0.05em;
}
.prov-detail { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.prov-more { border-style: dashed; background: transparent; }

/* use cases */
.usecases { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.usecase {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
}
.uc-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.uc-ico {
  font-size: 24px; line-height: 1; color: var(--signal);
  background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.2);
  border-radius: 10px; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.usecase h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.uc-tag { font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.uc-lede { font-size: 15.5px; color: var(--text-mid); margin-bottom: 18px; }
.usecase h4 {
  font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); margin-bottom: 12px;
}
.uc-list { list-style: none; display: grid; gap: 11px; }
.uc-list li { padding-left: 24px; position: relative; font-size: 14.5px; color: var(--text-dim); }
.uc-list li::before { content: "→"; position: absolute; left: 0; color: var(--signal); font-family: var(--mono); }
.uc-list li strong { color: var(--text); font-weight: 600; }
.uc-out {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 14.5px; color: var(--text-mid);
}

/* deployment modes */
.deploy-modes { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.deploy-mode {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
}
.dm-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.dm-ico {
  font-size: 20px; line-height: 1; color: var(--signal);
  background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.2);
  border-radius: 10px; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.deploy-mode h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin-top: 2px; }
.dm-tag { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.dm-lede { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; }
.dm-out {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-mid);
}
.dm-out strong { color: var(--signal); font-weight: 600; }

/* where it runs — the Cloud / self-hosted fork */
.where { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.where-col {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 16px; padding: 28px 26px;
  display: flex; flex-direction: column;
}
.where-col.lead { border-color: rgba(34,197,94,0.4); }
.where-tag {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--signal);
}
.where-col.alt .where-tag { color: var(--text-dim); }
.where-col h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; margin: 10px 0 10px; }
.where-col > p { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; }
.where-list { list-style: none; display: grid; gap: 9px; margin-top: 18px; }
.where-list li { padding-left: 22px; position: relative; font-size: 14.5px; color: var(--text-mid); }
.where-list li::before {
  content: "→"; position: absolute; left: 0;
  color: var(--signal); font-family: var(--mono);
}
.where-col.alt .where-list li::before { color: var(--text-dim); }
/* `margin-bottom: auto` on the list pushes the trade-off line to the card foot,
   so both columns state their cost on the same baseline. */
.where-list { margin-bottom: auto; }
.where-foot {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-mid);
}
.where-foot strong { color: var(--signal); font-weight: 600; }
.where-col.alt .where-foot strong { color: var(--text); }

/* trust badges */
.trust-badges { margin-top: 40px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.trust-badges span {
  font-family: var(--mono); font-size: 13px; padding: 11px 20px; border-radius: 999px;
  color: var(--text); border: 1px solid var(--border-2);
}
.trust-badges span.hi { color: var(--signal); border-color: rgba(34,197,94,0.35); }

/* pricing tiers */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; margin-top: 8px; }
.tier {
  display: flex; flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 26px;
  position: relative;
}
.tier-featured {
  border-color: rgba(34,197,94,0.4);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.15), 0 20px 50px rgba(0,0,0,0.5);
}
.tier-flag {
  position: absolute; top: -12px; left: 26px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--signal); color: var(--bg);
  padding: 4px 12px; border-radius: 999px; font-weight: 700;
}
.tier-name { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; }
.tier-price { margin: 14px 0 6px; display: flex; flex-direction: column; }
.tier-price .amt { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.tier-price .per { font-size: 13.5px; color: var(--text-dim); margin-top: 2px; }
.tier-note { font-size: 14px; color: var(--text-dim); min-height: 40px; margin-bottom: 18px; }
.tier-list { list-style: none; display: grid; gap: 10px; margin-bottom: 24px; }
/* `margin-top: auto` pushes every CTA to the card foot so the four cards end
   on one line, which also keeps the pricing disclaimer a fixed distance from
   every price rather than ~700px below the tallest card. */
.tier-cta { margin-top: auto; }
.tier-list li { padding-left: 24px; position: relative; font-size: 14.5px; color: var(--text); }
.tier-list li::before { content: "✓"; position: absolute; left: 0; color: var(--pass); font-weight: 700; }
.tier-list li code { font-family: var(--mono); font-size: 12.5px; background: var(--bg-inset); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.tier-cta { display: block; text-align: center; }
.price-fine { margin-top: 22px; font-size: 13px; color: var(--text-dim); max-width: 760px; }
.price-fine code { font-family: var(--mono); font-size: 12px; }

/* four-tier grid (Cloud + self-hosted) */
.tiers-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tier-deploy {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--signal); margin-bottom: 10px;
}
.tier-deploy.dim { color: var(--text-dim); }
/* Marks a figure as provisional at the point it is read, so a screenshot of
   the tier row cannot show an uncommitted number with nothing qualifying it. */
.tier-draft {
  display: inline-block; margin: 0 0 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--flag); border: 1px solid rgba(251,191,36,0.35);
  padding: 3px 10px; border-radius: 999px;
}
.tier-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border: 1px solid rgba(34,197,94,0.3); border-radius: 12px;
  padding: 16px 22px; margin-bottom: 28px;
}
.tier-strip p { font-size: 14.5px; color: var(--text-dim); }
.tier-strip p strong { color: var(--text); }
.tier-strip .btn { flex: none; }
@media (max-width: 1120px) {
  .tiers-4 { grid-template-columns: repeat(2, 1fr); }
  .tier-strip { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* FAQ */
.faq { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.qa h3 { font-size: 16.5px; margin-bottom: 7px; }
.qa p { font-size: 14.5px; color: var(--text-dim); }
.qa em { color: var(--text); font-style: italic; }

/* coverage table */

/* Tables carry more columns than a 342px phone column can hold, and `.wrap`
   does not clip, so an unwrapped table pushed the whole document sideways.
   The wrapper scrolls the table instead of the page, and fades its right
   edge while there is more to see. */
.table-scroll {
  margin-top: 44px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--muted-deco) transparent;
}
/* Where scroll-driven animation is supported, the right edge fades while there
   is more table off-screen and resolves to a hard edge at the end, so the
   scroll is discoverable without a permanent gradient lying about the end. */
@supports (animation-timeline: scroll(self inline)) and (mask-image: linear-gradient(#000, #000)) {
  @property --edge-fade {
    syntax: '<length>'; inherits: false; initial-value: 0px;
  }
  .table-scroll {
    /* Base is 0: when the table fits, the scroll timeline is inactive and the
       animation never applies, so no fade is left sitting on a full table. */
    --edge-fade: 0px;
    mask-image: linear-gradient(to right, #000 calc(100% - var(--edge-fade)), transparent 100%);
    animation: tableEdge linear both;
    animation-timeline: scroll(self inline);
  }
  @keyframes tableEdge {
    from { --edge-fade: 46px; }
    to   { --edge-fade: 0px; }
  }
}
.table-scroll > table { margin-top: 0; }
.docs-main .table-scroll { margin-top: 24px; }
.docs-main .table-scroll > table { margin-top: 0; }

table { width: 100%; border-collapse: collapse; margin-top: 44px; font-size: 15px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
td .pill {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  padding: 2px 10px; border-radius: 999px; white-space: nowrap;
}
.pill.ok      { color: var(--pass);   border: 1px solid rgba(74, 222, 128, 0.35); }
.pill.partial { color: var(--flag);   border: 1px solid rgba(251, 191, 36, 0.35); }
.pill.na      { color: var(--muted);  border: 1px solid var(--border-2); }
td.dim { color: var(--text-dim); font-size: 14.5px; }
.tbl-note { margin-top: 16px; font-size: 13.5px; color: var(--text-dim); max-width: 90ch; }
.tbl-note strong { color: var(--text); }

/* audit */
.split { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.split ul { list-style: none; display: grid; gap: 12px; }
.split ul li { padding-left: 26px; position: relative; color: var(--text-dim); font-size: 15.5px; }
.split ul li::before { content: "→"; position: absolute; left: 0; color: var(--signal); font-family: var(--mono); }
.split ul li strong { color: var(--text); font-weight: 600; }
.split .term { margin-top: 0; }

/* early access */
.access {
  margin-top: 48px;
  background: radial-gradient(700px 360px at 50% 120%, rgba(34,197,94,0.12), transparent 60%), var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 56px 48px;
  text-align: center;
}
.access h2 { margin: 0 auto; }
.access .sub { margin-left: auto; margin-right: auto; }
.access .cta-row { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.access .cta-row .btn { font-size: 16px; padding: 15px 28px; }
.access .fine { margin-top: 18px; font-size: 13.5px; color: var(--muted); }

/* footer */
footer { border-top: 1px solid var(--border); padding: 56px 0 44px; font-size: 14px; color: var(--text-dim); }
.foot { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot .brand { margin-bottom: 6px; }
.foot .cols { display: flex; gap: 60px; flex-wrap: wrap; }
.foot .foot-h { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); margin-bottom: 16px; }
.foot ul { list-style: none; display: grid; gap: 11px; }
.foot a { color: var(--text-dim); font-size: 14px; }
.foot a:hover { color: var(--text); }
/* `.legal` is a SIBLING of `.foot`, not a descendant. The old `.foot .legal`
   selector never matched, so none of this styling applied. */
footer .legal {
  margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-dim);
  font-family: var(--mono); letter-spacing: 0.02em; line-height: 1.7;
}

/* ============================================================
   Developer documentation (/developers/*)
   Sidebar + prose layout, reusing the DFENS tokens above.
   ============================================================ */
.docs {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px 40px 96px;
  align-items: start;
}
.docs-nav {
  position: sticky; top: 92px;
  font-size: 14.5px;
}
.docs-nav .docs-nav-h {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--muted);
  margin: 22px 0 12px;
}
.docs-nav .docs-nav-h:first-child { margin-top: 0; }
.docs-nav ul { list-style: none; display: grid; gap: 3px; }
.docs-nav a {
  display: block; color: var(--text-dim);
  padding: 5px 12px; border-radius: 7px; border-left: 2px solid transparent;
}
.docs-nav a:hover { color: var(--text); background: var(--bg-raised); }
.docs-nav a.active {
  color: var(--signal); border-left-color: var(--signal);
  background: rgba(34,197,94,0.06);
}

.docs-main { min-width: 0; }
.docs-main .kicker { margin-bottom: 14px; }
.docs-main h1 {
  font-size: clamp(30px, 4vw, 44px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05;
}
.docs-main .lede {
  margin-top: 18px; font-size: 18px; color: var(--text-dim); max-width: 680px;
}
.docs-main h2 {
  font-size: 25px; font-weight: 800; letter-spacing: -0.02em;
  margin: 52px 0 0; padding-top: 20px; border-top: 1px solid var(--border);
  scroll-margin-top: 88px;
}
.docs-main h3 {
  font-size: 18px; font-weight: 700; margin: 32px 0 0; scroll-margin-top: 88px;
}
.docs-main h2 + p, .docs-main h3 + p, .docs-main h2 + .term, .docs-main h3 + .term { margin-top: 14px; }
/* Caps the measure at ~72ch. Prose ran to ~101 characters per line at 1440. */
.docs-main p, .docs-main li { max-width: 72ch; }
.docs-main p { margin-top: 16px; color: var(--text-mid); font-size: 16px; line-height: 1.65; }
.docs-main p code, .docs-main li code, .docs-main td code {
  font-family: var(--mono); font-size: 0.84em;
  background: var(--bg-inset); border: 1px solid var(--border);
  border-radius: 5px; padding: 1.5px 6px; color: var(--text);
}
.docs-main ul, .docs-main ol { margin-top: 16px; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.docs-main li { padding-left: 24px; position: relative; color: var(--text-mid); font-size: 16px; line-height: 1.6; }
.docs-main ul > li::before { content: "→"; position: absolute; left: 0; color: var(--signal); font-family: var(--mono); }
.docs-main ol { counter-reset: step; }
.docs-main ol > li { counter-increment: step; }
.docs-main ol > li::before { content: counter(step); position: absolute; left: 0; color: var(--signal); font-family: var(--mono); font-size: 14px; }
.docs-main li strong { color: var(--text); font-weight: 600; }
.docs-main .term { margin-top: 20px; }
.docs-main table { margin-top: 24px; }
.docs-main td { color: var(--text-mid); font-size: 14.5px; }

/* callout */
.note-box {
  margin-top: 24px; border: 1px solid var(--border); border-left: 3px solid var(--signal);
  background: var(--bg-raised); border-radius: 10px; padding: 18px 22px;
}
.note-box.warn { border-left-color: var(--flag); }
.note-box p { margin-top: 0; font-size: 15px; }
.note-box p + p { margin-top: 10px; }
.note-box .nb-label {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--signal); display: block; margin-bottom: 6px;
}
.note-box.warn .nb-label { color: var(--flag); }

/* doc cards (index hub) */
.doc-cards { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.doc-card {
  display: block; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 14px; padding: 26px; transition: border-color 140ms ease-out;
}
.doc-card:hover { border-color: var(--border-2); }
.doc-card .dc-k { font-family: var(--mono); font-size: 12px; color: var(--signal); letter-spacing: 0.06em; }
.doc-card h3 { font-size: 19px; font-weight: 800; margin: 10px 0 8px; color: var(--text); }
.doc-card p { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; }

.docs-main .method {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  padding: 2px 8px; border-radius: 5px; margin-right: 8px; vertical-align: middle;
  color: var(--bg); background: var(--signal);
}
.docs-main .method.post { background: var(--signal); }
.docs-main .method.get  { background: var(--pass); }

@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
  /* The links move into the disclosure panel rather than disappearing. */
  nav ul li.hide-m { display: none; }
  .nav-more { display: block; }
  nav ul { gap: 12px; }
  /* Stops the wordmark suffix wrapping to three lines against the CTA. */
  .brand .co { display: none; }
  .brand { gap: 10px; font-size: 18px; }
  .cta-full { display: none; }
  .cta-short { display: inline; }
  nav .btn { padding: 10px 15px; white-space: nowrap; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .threats, .steps, .features, .split, .mandates,
  .providers, .usecases, .tiers, .faq, .deploy-modes, .where { grid-template-columns: 1fr; }
  /* Four tiers still fit two-up on a tablet; only phones need a single file. */
  .tiers-4 { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 60px 0 48px; }
  section { padding: 64px 0; }
  .access { padding: 36px 22px; }
  .tier-featured { box-shadow: 0 0 0 1px rgba(34,197,94,0.15); }
  /* Below the wrapper's width the table scrolls itself; a visible scrollbar
     is the affordance, so the table must stay wider than its container. */
  .table-scroll { padding-bottom: 4px; }
  .table-scroll > table { min-width: 560px; }
  .docs-main .table-scroll > table { min-width: 520px; }
  .docs { grid-template-columns: 1fr; gap: 8px; padding: 32px 24px 64px; }
  .docs-nav { position: static; top: auto; border-bottom: 1px solid var(--border); padding-bottom: 18px; margin-bottom: 12px; }
  .doc-cards { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .tiers-4 { grid-template-columns: 1fr; }
  .trust-badges { gap: 10px; }
  .trust-badges span { font-size: 12px; padding: 9px 15px; }
  .access { padding: 32px 18px; }
  .foot .cols { gap: 36px; }
}