/* Self-hosted webfonts (latin + latin-ext). Inter Tight for everything a person reads,
   IBM Plex Mono for everything the machine reports. No third-party font requests. */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-tight-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-tight-400-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}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-tight-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-tight-500-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}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-tight-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-tight-600-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}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-tight-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-tight-700-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}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-tight-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-tight-800-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}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-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}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-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}
/* ==========================================================================
   XDLOGIN BRAND SYSTEM — v1, September 2026
   Paper and ink. Red is scarce: the mark, one word, one button per page.
   Token values come from brand/tokens.css. The legacy variable NAMES are
   kept as the mapping layer so every component rule below inherits the new
   palette without being rewritten.
   ========================================================================== */

:root {
  /* Brand tokens (brand/tokens.css) */
  --paper:    #F2F2EF;
  --ink:      #111111;
  --red:      #E0261C;
  --graphite: #3A3A38;
  --white:    #FFFFFF;

  /* Grounds. The page is paper; cards and panels are white. */
  --bg: var(--paper);
  --bg-deep: #EAEAE6;      /* code chips, inset wells */
  --bg-2: var(--white);
  --surface: var(--white);
  --surface-2: var(--white);
  --surface-3: var(--paper);
  --raise: #EAEAE6;

  /* Red. #E0261C is 4.19:1 on paper — fine for the mark and for large type,
     under AA for body copy, so small red text uses --accent-text (5.3:1). */
  --accent: var(--red);
  --accent-strong: #C81F16;
  --accent-deep: #B01B13;
  --accent-soft: rgba(224, 38, 28, 0.08);
  --accent-glow: transparent;   /* no glows in this system */

  /* Text. --steel-light is the primary reading colour. */
  --steel-light: var(--ink);
  --steel: var(--graphite);
  --steel-muted: #5C5C58;       /* 5.99:1 on paper */

  /* Rules. Section rules 2px ink, table rules 1px line. */
  --line: #C9C9C4;
  --line-strong: var(--ink);
  --line-red: rgba(224, 38, 28, 0.35);

  /* Status. Success green, warnings amber. Red is never a status colour. */
  --good: #1F7A4D;
  --good-soft: rgba(31, 122, 77, 0.10);
  --warn: #C97A00;
  --warn-soft: rgba(201, 122, 0, 0.10);
  --warn-text: #8A5400;
  --good-text: #176A41;    /* 6.6:1 on white — #1F7A4D is 4.2:1 on its own tint */         /* 5.59:1 — #C97A00 is only 2.99:1 on paper */
  --bad: #C97A00;               /* errors are amber, never red */
  --bad-soft: rgba(201, 122, 0, 0.10);

  /* Type */
  --disp: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Sizing. Rectangles everywhere: no radius, no elevation. */
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --max: 1080px;
  --measure: 62ch;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-1: none;
  --shadow-2: none;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  color-scheme: light;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--steel-light);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* No decorative overlay: this system has no gradients, glows or blur. */
body > * {
  position: relative;
  z-index: 1;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-track {
  background: var(--paper);
}
::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 2px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--graphite);
}

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

a {
  color: var(--steel-light);
  text-decoration: none;
  transition: color 0.18s var(--ease);
}
a:hover {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Typography Scale
   Headlines are set in Inter — the display face (Orbitron) is reserved for
   identity moments only: the brand wordmark, stat digits, and eyebrow-level
   labels. Techno type at paragraph-headline sizes reads hobbyist; restraint
   here is what makes the red/steel palette feel enterprise-grade. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h4 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

p {
  margin-bottom: 1.15rem;
  color: var(--steel);
}

.lead {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--steel);
  font-weight: 400;
}

.mono {
  font-family: var(--mono);
}

.text-accent {
  color: var(--accent);
}

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

.text-good {
  color: var(--good);
}

/* Container & Wrappers */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}
.wrap.narrow {
  max-width: 860px;
}
.wrap.tight {
  max-width: 680px;
}

section {
  padding: 100px 0;
  position: relative;
}

section.tight {
  padding: 64px 0;
}

section.alt-bg {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.center {
  text-align: center;
}

.section-head {
  margin-bottom: 48px;
}

/* Page intro band used by every inner page (<section class="page-head">). */
.page-head {
  padding: 76px 0 44px;
}

.section-head p {
  max-width: 680px;
  margin-top: 12px;
  font-size: 1.1rem;
}

.section-head.center p {
  margin-left: auto;
  margin-right: auto;
}

/* Eyebrows & Badges */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 14px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  border-radius: 0;
  background: rgba(224, 38, 28, 0.08);
  border: 1px solid rgba(224, 38, 28, 0.28);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink);
  letter-spacing: 0.04em;
  margin-bottom: 22px;
  box-shadow: none;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: none;
  display: inline-block;
  animation: pulseDot 2s infinite ease-in-out;
}

.dot.dot-red {
  background: var(--accent);
  box-shadow: none;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */

.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  /* 8px reads identically at 92% opacity; 20px re-samples the full viewport
     width every scrolled frame for nothing. */
  border-bottom: 1px solid rgba(224, 38, 28, 0.15);
  box-shadow: none;
  transition: background 0.2s;
}

.hdr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  gap: 20px;
}


.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a {
  color: var(--steel-muted);
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 8px 14px;
  border: 1px solid transparent; /* reserves the active state's border — no shift */
  border-radius: 0;
  transition: all 0.16s var(--ease);
}

.nav a:hover {
  color: var(--ink);
  background: rgba(17, 17, 17, 0.04);
}

.nav a.on {
  color: var(--accent);
  background: rgba(224, 38, 28, 0.08);
  border: 1px solid rgba(224, 38, 28, 0.2);
}

.hdr-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.burger {
  display: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  border-radius: 0;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 1.1rem;
}

@media (max-width: 980px) {
  .nav {
    position: fixed;
    top: 72px; /* matches .hdr-in height exactly — no content sliver */
    left: 0;
    right: 0;
    /* 98% opaque — a backdrop blur under this is invisible, pure GPU cost
       on exactly the devices that can least afford it. */
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 24px 28px;
    border-bottom: 1px solid var(--line-strong);
    display: none;
    gap: 6px;
    box-shadow: none;
  }
  .nav.open {
    display: flex;
  }
  .nav a {
    padding: 12px 14px;
    font-size: 0.92rem;
    border-bottom: 1px solid var(--line);
  }
  .burger {
    display: block;
  }
  .hdr-cta .btn-ghost {
    display: none;
  }
}

/* Phone-width header: compact the brand + CTA so the row genuinely fits
   375px — without this the whole page lays out wider than the viewport. */
@media (max-width: 480px) {
  .hdr-in {
    padding: 0 14px;
    gap: 10px;
  }
  .brand {
    font-size: 0.95rem;
    gap: 9px;
  }
  .brand-mark {
    width: 38px;
    height: 24px;
  }
  .hdr-cta .btn-sm {
    padding: 8px 11px;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
  }
}

/* ==========================================================================
   BUTTONS & CTAs
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 0;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.16s var(--ease);
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  /* Deeper red than the raw accent: keeps white label text at WCAG AA
     (#ff1e1e on white is only 3.85:1 at button-label size) and reads more
     premium — race-car red, not neon. */
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent-deep);
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent);
  box-shadow: none;
  color: #ffffff;
}

.btn-ghost {
  background: rgba(17, 17, 17, 0.04);
  color: var(--steel-light);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  background: rgba(17, 17, 17, 0.04);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: none;
}

/* Destructive affordance (admin.js renders the user Delete button with it).
   Soft red field + saturated red label stays AA on dark surfaces; hover goes
   solid on the AA-safe --accent-strong/--accent-deep gradient. */
.btn-danger {
  background: var(--bad-soft);
  color: var(--bad);
  border-color: var(--bad);
}
.btn-danger:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent-deep);
  box-shadow: none;
}

.btn-lg {
  padding: 16px 32px;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.76rem;
}

.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-row.center {
  justify-content: center;
}

/* ==========================================================================
   HERO SECTION & THE BRAND LOCKUP
   ========================================================================== */

.hero {
  padding: 72px 0 100px;
  position: relative;
  overflow: hidden;
}

/* Dramatic red-to-void radial glow behind the hero mark */
.hero::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  /* Present but quiet — a hint of brand heat, not an RGB rig. */
  background: none;
  pointer-events: none;
  z-index: 0;
}

/* The hero leads with the value proposition; the nav wordmark carries the
   brand. (The old floating mega-logo also animated stacked drop-shadow
   filters — a full re-raster of a large image every frame. Never animate
   `filter`; animate transform/opacity only.) */

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  margin-top: 36px;
  position: relative;
  z-index: 1;
}

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

/* ==========================================================================
   INTERACTIVE HERO FINGERPRINT SCANNER WIDGET
   ========================================================================== */

.scanner-widget {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 24px;
  position: relative;
  box-shadow: none;
  overflow: hidden;
}

.scanner-widget::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ink);
}

.scanner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.scanner-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--steel-light);
  letter-spacing: 0.08em;
}

.scanner-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 0;
  background: var(--good-soft);
  border: 1px solid var(--good);
  color: var(--good);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.os-selector {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  background: var(--bg-deep);
  padding: 4px;
  border-radius: 0;
  border: 1px solid var(--line);
}

.os-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--steel-muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 9px 10px; /* comfortable tap target */
  border-radius: 0;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap; /* "Windows 11" must not wrap taller than siblings */
}

/* At 360-400px the three labels outgrow the row — step the type down
   instead of letting one tab wrap two lines tall. */
@media (max-width: 400px) {
  .os-btn {
    font-size: 0.68rem;
    padding: 9px 6px;
  }
}

.os-btn.active {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}

.scanner-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scanner-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 0;
}

/* Long telemetry values (GPU strings, IPs) stack under their label on
   phones instead of fighting it for one row. */
@media (max-width: 640px) {
  .scanner-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .scanner-row .val {
    word-break: break-word;
  }
}

.scanner-row .label {
  color: var(--steel-muted);
  letter-spacing: 0.05em;
}

.scanner-row .val {
  color: var(--steel-light);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Status semantics: green = protected. Red is reserved for actual danger —
   a "seeded noise" or "matched proxy" state is a WIN, so it reads green. */
.scanner-row .val.highlight {
  color: var(--good);
}

.scanner-row .val.green {
  color: var(--good);
}

.scanner-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mrz-code {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--steel-muted);
  letter-spacing: 0.1em;
  /* The passport-style ticker must never spill past the panel edge. */
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}

/* ==========================================================================
   STATS BAR
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 64px 0 72px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 768px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

.stat {
  text-align: center;
  position: relative;
}

.stat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--line);
}

@media (max-width: 768px) {
  .stat:nth-child(2)::after {
    display: none;
  }
}

.stat b {
  display: block;
  font-family: var(--disp);
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}

.stat span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--steel-muted);
  letter-spacing: 0.08em;
}

/* ==========================================================================
   INTERACTIVE DASHBOARD MOCKUP (PHANTOM HUD)
   ========================================================================== */

.dashboard-mockup {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  margin: 50px 0 80px;
}

.mock-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
}

.mock-dots {
  display: flex;
  gap: 6px;
}

.mock-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface-3);
}
.mock-dots span:nth-child(1) { background: #ff5f56; }
.mock-dots span:nth-child(2) { background: #ffbd2e; }
.mock-dots span:nth-child(3) { background: #27c93f; }

.mock-title {
  margin-left: 12px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--steel-muted);
  letter-spacing: 0.05em;
}

.mock-body-layout {
  display: grid;
  /* minmax(0,…) lets the main pane shrink below its table's min-content
     width — without it the whole page inherits the table's width on phones. */
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 400px;
}

@media (max-width: 860px) {
  .mock-body-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mock-sidebar,
.mock-main-view {
  min-width: 0;
}

.mock-sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mock-side-group-title {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--steel-muted);
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}

.mock-side-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-left: 2px solid transparent; /* reserves the active bar — no shift */
  border-radius: 0;
  font-size: 0.85rem;
  color: var(--steel-light);
  transition: all 0.15s;
  font-family: var(--mono);
}

.mock-side-item.active, .mock-side-item:hover {
  background: var(--surface);
  color: var(--ink);
  border-left: 2px solid var(--accent);
}

.mock-side-item em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--steel-muted);
  background: var(--bg-deep);
  padding: 2px 6px;
  border-radius: 0;
}

.mock-main-view {
  padding: 24px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mock-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 640px) {
  .mock-metrics-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mock-metric-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 14px;
  border-radius: 0;
}

.mock-metric-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--steel-muted);
}

.mock-metric-val {
  font-family: var(--disp);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 4px;
}

/* Sparkline Chart */
.sparkline-container {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 16px;
}

.sparkline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--steel-muted);
}

.sparkline-svg {
  width: 100%;
  height: 64px;
}

/* Profiles Table */
.table-scroll {
  overflow-x: auto;
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--bg-2);
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.88rem;
}

th {
  background: var(--bg-deep);
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--steel-muted);
  border-bottom: 1px solid var(--line);
}

td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--steel-light);
}

tr:hover td {
  background: rgba(17, 17, 17, 0.04);
}

.col-us {
  background: rgba(224, 38, 28, 0.04);
  font-weight: 600;
}

.tag-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
}

.tag-running {
  background: var(--good-soft);
  color: var(--good);
  border: 1px solid rgba(31, 122, 77, 0.3);
}

.tag-idle {
  background: var(--line);
  color: var(--steel-muted);
  border: 1px solid var(--line);
}

/* ==========================================================================
   CARDS & GRIDS (BRAND ICONS & HUD ACCENTS)
   ========================================================================== */

.grid {
  display: grid;
  gap: 24px;
}

.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 980px) {
  .g3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .g2, .g3 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 28px;
  position: relative;
  box-shadow: none; /* depth at rest — layered, not flat */
  /* transform/border/shadow are all compositor-cheap here (small surfaces). */
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-red);
  box-shadow: none;
}

.card .icon-box {
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--accent);
}

.card .icon-box svg {
  width: 24px;
  height: 24px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card h3 {
  margin-bottom: 10px;
  color: var(--ink);
}

.card p {
  color: var(--steel);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ==========================================================================
   DEVELOPER PLAYGROUND & CLI SECTION
   ========================================================================== */

.code-playground {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

.code-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  padding: 0 16px;
}

.tab-buttons {
  display: flex;
  gap: 2px;
}

.code-tab-btn {
  background: transparent;
  border: none;
  color: var(--steel-muted);
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}

.code-tab-btn:hover {
  color: var(--ink);
}

.code-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.copy-btn {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--steel-light);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 8px 14px; /* comfortable tap target */
  border-radius: 0;
  cursor: pointer;
  transition: all 0.15s;
}
.copy-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.code-pane {
  display: none;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--ink);
  overflow-x: auto;
}

.code-pane.active {
  display: block;
}

.code-pane pre {
  margin: 0;
}

/* Syntax Highlighting */
.kwd { color: var(--ink); font-weight: 500; }
.str { color: #1F7A4D; }
.fn  { color: #0B4F8F; }
.num { color: #8A5400; }
.cm  { color: var(--steel-muted); font-style: italic; }

/* ==========================================================================
   INTERACTIVE SAVINGS & PRICING CALCULATOR
   ========================================================================== */

.pricing-calculator {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 36px;
  margin-bottom: 60px;
  box-shadow: none;
}

.calc-slider-wrap {
  margin: 28px 0;
}

.calc-slider {
  width: 100%;
  height: 8px;
  border-radius: 0;
  background: var(--surface-3);
  outline: none;
  -webkit-appearance: none;
}

/* `outline: none` above beats the global :focus-visible rule — restore a
   visible keyboard-focus state for the slider. */
.calc-slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: none;
  border: 2px solid #ffffff;
}

.calc-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
  text-align: center;
}

@media (max-width: 768px) {
  .calc-results-grid {
    grid-template-columns: 1fr;
  }
}

.calc-res-box {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: 0;
}

.calc-res-box.winner {
  border-color: var(--accent);
  background: rgba(224, 38, 28, 0.05);
  box-shadow: none;
}

.calc-res-box .vendor {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--steel-muted);
}

.calc-res-box .price {
  font-family: var(--disp);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink);
  margin: 8px 0;
}

.calc-savings-banner {
  margin-top: 24px;
  padding: 16px;
  background: var(--good-soft);
  border: 1px solid var(--good);
  border-radius: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--good);
  font-weight: 600;
}

/* ==========================================================================
   PRICING TIERS
   ========================================================================== */

.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 44px;
}

.toggle-group {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: 4px;
  border-radius: 0;
}

.toggle-btn {
  background: transparent;
  border: none;
  color: var(--steel-muted);
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 8px 18px;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.16s;
}

.toggle-btn.active {
  /* .btn-primary's AA red — white on raw #ff1e1e is only 3.85:1 */
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  box-shadow: none;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1080px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

.plan-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: none;
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.plan-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-red);
  box-shadow: none;
}

/* The recommended tier stands one step proud of the row, even at rest. */
.plan-card.featured {
  border-color: var(--accent);
  background: var(--white);
  box-shadow: none;
  transform: translateY(-8px);
}

.plan-card.featured:hover {
  transform: translateY(-12px);
}

.plan-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  /* AA red (white on raw #ff1e1e fails); 600 is IBM Plex Mono's heaviest
     loaded weight — 700 rendered faux-bold. */
  background: var(--accent);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 3px 12px;
  border-radius: 0;
  box-shadow: none;
}

.plan-name {
  font-family: var(--disp);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.plan-price {
  margin: 16px 0 20px;
}

.plan-price .amount {
  font-family: var(--disp);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}

.plan-price .period {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--steel-muted);
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 24px 0 auto;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.plan-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--steel);
  margin-bottom: 12px;
}

.plan-features li::before {
  content: "✓";
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 600; /* IBM Plex Mono loads 400/500/600 — bold(700) is faux */
}

/* ==========================================================================
   USE CASES HUB (TABS)
   ========================================================================== */

.usecases-nav {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.usecase-tab-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--steel-muted);
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 10px 18px;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.16s;
}

.usecase-tab-btn:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.usecase-tab-btn.active {
  /* .btn-primary's AA red — white on raw #ff1e1e is only 3.85:1 */
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent-deep);
  font-weight: 600;
  box-shadow: none;
}

.usecase-content {
  display: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 40px;
  box-shadow: none;
}

.usecase-content.active {
  display: block;
}

/* ==========================================================================
   FAQ & ACCORDION (SEARCHABLE)
   ========================================================================== */

.faq-search-box {
  max-width: 600px;
  margin: 0 auto 36px;
  position: relative;
}

.faq-search-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 14px 18px 14px 44px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.18s;
}

.faq-search-input:focus {
  border-color: var(--accent);
  box-shadow: none;
}

.faq-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--steel-muted);
  pointer-events: none;
}

details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.2s;
}

details[open] {
  border-color: var(--accent);
  background: var(--surface-2);
}

summary {
  padding: 18px 22px;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 1.3rem;
  color: var(--steel-light); /* red on the open item's surface fails AA */
  transition: transform 0.2s;
}

details[open] summary::after {
  content: "−";
}

details .body {
  padding: 0 22px 20px;
  color: var(--steel);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ==========================================================================
   CALLOUT BAND
   ========================================================================== */

.band {
  background: var(--white);
  border-top: 1px solid var(--line-red);
  border-bottom: 1px solid var(--line-red);
  padding: 90px 0;
  text-align: center;
  position: relative;
}

.band h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 16px;
}

/* ==========================================================================
   FOOTER (RICH CATEGORICAL SILOS FOR SEO & NAVIGATION)
   ========================================================================== */

.ftr {
  background: var(--bg-deep);
  border-top: 1px solid var(--line-strong);
  padding: 80px 0 36px;
}

.ftr-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 60px;
}

@media (max-width: 1080px) {
  .ftr-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .ftr-grid {
    grid-template-columns: 1fr;
  }
}

.ftr-brand-col p {
  color: var(--steel-muted);
  font-size: 0.88rem;
  margin-top: 14px;
  max-width: 320px;
}

.ftr-col h4 {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin-bottom: 18px;
}

.ftr-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ftr-col ul li {
  margin-bottom: 10px;
}

.ftr-col ul li a {
  color: var(--steel-muted);
  font-size: 0.85rem;
  transition: color 0.15s;
}

.ftr-col ul li a:hover {
  color: var(--accent);
}

.ftr-btm {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--steel-muted);
}

@media (max-width: 640px) {
  .ftr-btm {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* Animations */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.rv.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Neutralize ALL motion, not just reveals — pulsing dots, chart bars,
     smooth scroll, and hovers included. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
  .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   ADMIN CONSOLE & ANALYTICS
   ========================================================================== */
.admin-tabs{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.admin-tab{background:var(--surface);border:1px solid var(--line);border-radius: 0;color:var(--steel-muted);font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;padding:8px 16px;cursor:pointer}
.admin-tab.is-active{background:rgba(224, 38, 28, 0.15);border-color:var(--accent);color: var(--ink)}
.chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:8px}
.ch-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.ch-bar{width:100%;max-width:34px;background:var(--accent);border-radius: 0;transition:height .4s var(--ease)}
.ch-x{font-family:var(--mono);font-size:.62rem;color:var(--steel-muted);margin-top:6px;white-space:nowrap;transform:rotate(-30deg);transform-origin:top left}
.admin-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.al-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:.82rem}
.al-row:last-child{border-bottom:none}
.al-k{color:var(--steel-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-v{color:var(--steel);flex-shrink:0}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.admin-stat{background:var(--surface);border:1px solid var(--line);border-radius: 0;padding:14px;text-align:center}
.admin-stat .n{font-family:var(--disp);font-size:1.6rem;font-weight:700;color: var(--ink)}
.admin-stat .l{font-family:var(--mono);font-size:.7rem;color:var(--steel-muted);margin-top:4px}


/* ==========================================================================
   ACCOUNT AREA & ADMIN CONSOLE (restored functional styles)
   Ported from the pre-overhaul stylesheet; tokens translated to the current
   palette. account.js / reset.js / admin.js build DOM against these classes.
   ========================================================================== */
.faint{color:var(--steel-muted);font-size:.86rem}
.linkbtn{background:none;border:0;color:var(--accent);font-family:var(--mono);font-size:.78rem;cursor:pointer;padding:4px}
.linkbtn:hover{text-decoration:underline;text-underline-offset:3px}
.acc-err{color:var(--bad);font-size:.82rem;margin-top:12px;min-height:1em;font-family:var(--mono)}
.w-full{width:100%}
.hash{font-family:var(--mono);font-size:.74rem;color:var(--steel);word-break:break-all;background:var(--bg);border:1px solid var(--line);border-radius: 0;padding:10px 13px;display:block;margin-top:6px}
.dash-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:4px}
.dash-plan{display:flex;align-items:center}
.dash-tier{font-family:var(--disp);font-weight:800;font-size:1.5rem;color:var(--steel-light)}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:14px}
.plan-cur{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--accent);border:1px solid var(--accent-deep);border-radius: 0;padding:2px 7px}
.plan-prof{font-size:.8rem;color:var(--steel);margin-bottom:10px}
.plan-active{font-family:var(--mono);font-size:.75rem;color:var(--accent);text-align:center;padding:6px 0}
.plan-actions{display:flex;flex-direction:column}
#acc-dash.loading{opacity:.5}
#acc-form .label,#acc-form label,#rs-form .label,#rs-form label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--steel);margin-bottom:7px;text-transform:uppercase}
#acc-form .input,#acc-form input,#rs-form .input,#rs-form input{display:block;width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius: 0;padding:11px 13px;color:var(--steel-light);font-size:.95rem;font-family:var(--sans)}
/* Visible focus ring matching the global :focus-visible treatment — the ID
   selectors here outweigh it, so outline:none would blind keyboard users. */
#acc-form .input:focus,#acc-form input:focus,#rs-form .input:focus,#rs-form input:focus{outline:2px solid var(--accent);outline-offset:3px;border-color:var(--accent)}
#acc-form .input::placeholder,#rs-form input::placeholder{color:var(--steel-muted)}
.admin-bar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.admin-bar .input{max-width:280px;background:var(--bg-2);border:1px solid var(--line);border-radius: 0;padding:9px 12px;color:var(--steel-light);font-family:var(--sans)}
.admin-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg)}
.admin-table{width:100%;border-collapse:collapse;font-size:.86rem}
.admin-table th{text-align:left;padding:10px 14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--steel-muted);border-bottom:1px solid var(--line);background:var(--bg-2)}
.admin-table td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--steel);vertical-align:middle}
.admin-table td:first-child{color:var(--steel-light)}
.admin-tier{background:var(--bg-2);border:1px solid var(--line);border-radius: 0;color:var(--steel-light);padding:5px 8px;font-family:var(--sans);font-size:.8rem}
.admin-badge{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--accent);border:1px solid var(--accent-deep);border-radius: 0;padding:1px 6px;margin-left:4px;vertical-align:middle}

/* ==========================================================================
   A11Y + POLISH ADDENDA (2026-08 audit minors)
   ========================================================================== */

/* Keyboard users get straight to content; invisible until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent-deep);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 10px 18px;
  border-radius: 0;
}
.skip-link:focus-visible {
  left: 0;
}

/* UA default placeholder is near-invisible in dark color-scheme. */
.faq-search-input::placeholder {
  color: var(--steel-muted);
  opacity: 1;
}

/* Pricing-card tier descriptions were 12.8px muted-on-dark — below AA. */
.pricing-grid .text-steel {
  color: var(--steel);
}

/* Interior paddings scale down on phones instead of eating the column. */
@media (max-width: 640px) {
  .usecase-content {
    padding: 22px 16px;
  }
  .pricing-calculator {
    padding: 22px 16px;
  }
}

/* Vertical rhythm steps down on phones — desktop's 100px section gaps read
   as dead scroll on a 640px-wide screen. */
@media (max-width: 640px) {
  section {
    padding: 64px 0;
  }
  .band {
    padding: 56px 0;
  }
  .ftr {
    padding: 56px 0 32px;
  }
  .page-head {
    padding: 48px 0 32px;
  }
}

/* ==========================================================================
   LIVE FINGERPRINT MIRROR + TRUST STRIP (homepage hook)
   ========================================================================== */

.trust-line {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--steel-muted);
  margin: -40px 0 72px;
}

.fp-mirror {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
  margin: 0 0 88px;
}

.fp-mirror .fp-copy h2 {
  margin-bottom: 14px;
}

.fp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 0;
  background: var(--bad-soft);
  border: 1px solid var(--bad);
  color: var(--bad);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.fp-panel .val {
  word-break: break-word;
  text-align: right;
}

@media (max-width: 980px) {
  .fp-mirror {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .fp-panel .val {
    text-align: left;
  }
  .trust-line {
    margin: -32px 0 56px;
  }
}

/* ==========================================================================
   SILVER INSTRUMENT — 2026-09 redesign layer
   Same brand tokens (void + red + brushed steel), calmer and larger:
   - Inter everywhere it is read; Orbitron only for the wordmark and digits.
   - Sentence-case nav and buttons (the mono-caps litany was the "gamer" tell).
   - A brushed-silver ledger band and a silver Pro card give the page a
     second material, so the dark sections read as chosen, not default.
   - The hero's proof is the visitor's REAL fingerprint (fp-mirror), not a
     fabricated HUD. Nothing on the page claims a number we cannot show.
   Loaded last: everything here intentionally overrides the rules above.
   ========================================================================== */

:root {
  /* The "silver" panels become plain white cards on paper. */
  --silver-1: #FFFFFF;
  --silver-2: #F7F7F5;
  --silver-3: #EAEAE6;
  --ink-2: #3A3A38;
  --ink-3: #5C5C58;
}

/* A quieter grid: present under the hero, invisible where copy is read. */
body::before {
  opacity: 0.07;
}

/* ---- Type scale ---- */
h1, h2, h3, h4 {
  text-wrap: pretty;
}
h1 {
  font-size: clamp(2.7rem, 6vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
h3 {
  font-size: 1.3rem;
  letter-spacing: -0.015em;
}
.lead {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--graphite);
}
p {
  color: var(--graphite);
}
.text-steel {
  color: var(--steel-muted);
}

.eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-bottom: 16px;
}

section {
  padding: 120px 0;
}
.section-head {
  margin-bottom: 56px;
}
.section-head p {
  font-size: 1.15rem;
  max-width: 720px;
}
.section-head.center h2 {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Header: sentence-case Inter nav ---- */
.hdr {
  border-bottom-color: var(--line);
  box-shadow: none;
}
.nav a {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--graphite);
  padding: 8px 12px;
}
.nav a:hover {
  color: var(--ink);
  background: transparent;
}
.nav a.on {
  color: var(--ink);
  background: transparent;
  border-color: transparent;
  position: relative;
}
.nav a.on::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  background: var(--accent);
  border-radius: 0;
}
@media (max-width: 980px) {
  .nav a {
    font-size: 1rem;
  }
  .nav a.on::after {
    display: none;
  }
}

/* ---- Buttons: Inter, sentence case ---- */
.btn {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 0;
  padding: 12px 20px;
}
.btn-lg {
  padding: 16px 26px;
  font-size: 1rem;
  letter-spacing: 0;
}
.btn-sm {
  padding: 9px 14px;
  font-size: 0.84rem;
}
.btn-primary {
  background: var(--accent);
  box-shadow: none;
}
.btn-ghost {
  background: transparent;
  border-color: var(--line);
}
.btn-ghost:hover {
  box-shadow: none;
  background: rgba(17, 17, 17, 0.04);
}
/* Quiet inline link-button used next to a primary CTA. */
.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--steel);
  padding-left: 12px;
  padding-right: 12px;
}
.btn-link:hover {
  color: var(--ink);
  transform: none;
}
.btn-link svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn svg.ic {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hdr-cta .btn-ghost {
  border-color: transparent;
}

/* ---- Hero ---- */
.hero {
  padding: 96px 0 96px;
}
.hero::before {
  top: -140px;
  width: 1100px;
  height: 620px;
  background: none;
}
.hero-grid {
  grid-template-columns: 1.25fr 0.95fr;
  gap: 56px;
  margin-top: 0;
}
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--steel-muted);
  margin-bottom: 26px;
}
.hero h1 {
  margin-bottom: 26px;
}
.hero .lead {
  max-width: 560px;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 22px;
  font-size: 0.86rem;
  color: var(--steel-muted);
}
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero-meta svg {
  width: 14px;
  height: 14px;
  stroke: var(--good);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The live mirror panel (visitor's own fingerprint) — hero edition. */
.mirror {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.mirror::before {
  display: none;
}
.mirror .scanner-header {
  padding: 16px 20px;
  margin: 0;
}
.mirror .scanner-title {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.mirror .scanner-rows {
  gap: 0;
}
.mirror .scanner-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 20px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.mirror .scanner-row:last-child {
  border-bottom: 0;
}
.mirror .scanner-row .label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}
.mirror .scanner-row .val {
  justify-content: flex-end;
  text-align: right;
  font-size: 0.82rem;
  word-break: break-word;
}
.mirror .scanner-footer {
  margin: 0;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: rgba(224, 38, 28, 0.06);
  gap: 12px;
}
.mirror .scanner-footer p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--graphite);
}
.mirror .scanner-footer .mrz-code {
  flex-shrink: 0;
  -webkit-mask-image: none;
  mask-image: none;
  letter-spacing: 0.06em;
  font-size: 0.66rem;
}
@media (max-width: 640px) {
  .mirror .scanner-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .mirror .scanner-row .val {
    justify-content: flex-start;
    text-align: left;
  }
  .mirror .scanner-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Silver ledger: the four facts we can stand behind ---- */
.ledger {
  padding: 56px 0;
  background: var(--white);
  color: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.ledger-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.ledger-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ledger-item b {
  font-family: var(--disp);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}
.ledger-item strong {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-2);
}
.ledger-item span {
  font-size: 0.86rem;
  color: var(--ink-3);
}
@media (max-width: 860px) {
  .ledger-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }
}

/* ---- Product frame (illustrative, and labelled as such) ---- */
.dashboard-mockup {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.mock-window-bar {
  padding: 11px 16px;
}
.mock-note {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.mock-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mock-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(320px, 100%);
  padding: 9px 12px;
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 0.84rem;
  color: var(--ink-3);
}
.mock-search svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.mock-actions {
  display: flex;
  gap: 8px;
}
.mock-btn {
  padding: 9px 12px;
  border-radius: 0;
  border: 1px solid var(--line-strong);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--steel);
}
.mock-btn.primary {
  background: var(--accent-strong);
  border-color: var(--accent-deep);
  color: #ffffff;
}
.mock-side-item {
  font-family: var(--sans);
}
.dashboard-mockup th {
  background: transparent;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}
.dashboard-mockup td {
  font-size: 0.86rem;
}
.dashboard-mockup td.mono {
  font-size: 0.8rem;
  color: var(--steel);
}
.dashboard-mockup tr.hl td {
  background: var(--surface);
}
@media (max-width: 640px) {
  .mock-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .mock-actions {
    justify-content: flex-end;
  }
}

/* ---- Benefit rows (three wide arguments, not six small cards) ---- */
.benefit {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 72px;
  align-items: center;
}
.benefit + .benefit {
  margin-top: 112px;
}
.benefit > * {
  min-width: 0;
}
.benefit.flip {
  grid-template-columns: 6fr 5fr;
}
.benefit.flip .benefit-copy {
  order: 2;
}
.benefit-copy h3 {
  font-size: clamp(1.75rem, 2.9vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
  margin-bottom: 16px;
}
.benefit-copy p {
  font-size: 1.06rem;
  line-height: 1.6;
  margin: 0;
}
.benefit-copy .eyebrow {
  margin-bottom: 14px;
}
.spec {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.78rem;
}
.spec .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--steel-muted);
}
.spec .row b {
  font-weight: 500;
  color: var(--steel-light);
  text-align: right;
}
.spec .row b.ok {
  color: var(--good);
}
.spec .rule {
  height: 1px;
  background: var(--line);
}
.spec {
  min-width: 0;
  overflow: hidden;
}
.spec pre {
  margin: 0;
  max-width: 100%;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--steel);
  white-space: pre;
  overflow-x: auto;
}
.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.mini {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mini b {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
}
.mini span {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--steel-muted);
}
@media (max-width: 900px) {
  .benefit,
  .benefit.flip {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .benefit.flip .benefit-copy {
    order: 0;
  }
  .benefit + .benefit {
    margin-top: 72px;
  }
}

/* ---- Silver pricing teaser ---- */
.silver-card {
  background: var(--white);
  color: var(--ink);
  border-radius: 0;
  padding: 56px 60px;
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 40px;
  align-items: center;
  box-shadow: none;
}
.silver-card h2,
.silver-card h3 {
  color: var(--ink);
}
.silver-card p {
  color: var(--ink-2);
}
.silver-card .eyebrow {
  color: var(--accent-deep);
}
.silver-card .btn-dark {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}
.silver-card .btn-dark:hover {
  background: var(--ink);
  color: #ffffff;
}
.silver-card .btn-link {
  color: var(--ink);
}
.silver-card .btn-link:hover {
  color: var(--accent-deep);
}
.price-ledger {
  background: var(--ink);
  color: var(--steel-light);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.price-ledger a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--steel-light);
}
.price-ledger a:last-child {
  border-bottom: 0;
}
.price-ledger a:hover {
  background: rgba(17, 17, 17, 0.04);
}
.price-ledger a.hl {
  background: rgba(224, 38, 28, 0.08);
  color: var(--accent-text);
}
.price-ledger small {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--steel-muted);
}
.price-ledger em {
  font-style: normal;
  font-family: var(--disp);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}
.price-ledger em small {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
}
@media (max-width: 900px) {
  .silver-card {
    grid-template-columns: 1fr;
    padding: 36px 26px;
    gap: 28px;
  }
}

/* ---- Pricing page: Pro is the silver card ---- */
.plan-name {
  font-family: var(--sans);
  font-size: 1.2rem;
  font-weight: 700;
}
.plan-desc {
  font-size: 0.86rem;
  color: var(--steel-muted);
  margin-bottom: 0;
}
.plan-card {
  padding: 30px 26px;
}
.plan-price .period {
  font-size: 0.78rem;
}
.plan-card.featured {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
}
.plan-card.featured .plan-name,
.plan-card.featured .plan-price .amount {
  color: var(--ink);
}
.plan-card.featured .plan-name.text-accent {
  color: var(--ink);
}
.plan-card.featured .plan-desc,
.plan-card.featured .plan-price .period,
.plan-card.featured .text-steel {
  color: var(--ink-2);
}
.plan-card.featured .plan-features {
  border-top-color: rgba(13, 15, 20, 0.12);
}
.plan-card.featured .plan-features li {
  color: var(--ink);
}
.plan-card.featured .plan-features li::before {
  color: var(--accent-deep);
}
.plan-tag {
  font-size: 0.66rem;
}
.toggle-btn {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  padding: 9px 18px;
}
.enterprise-strip {
  margin-top: 40px;
  padding: 30px 34px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.enterprise-strip h2 {
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.enterprise-strip p {
  margin: 0;
  max-width: 640px;
}
.enterprise-strip .btn {
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 760px) {
  .enterprise-strip {
    flex-direction: column;
    align-items: flex-start;
  }
}
.two-col {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 48px;
  align-items: start;
}
.two-col h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
}
.two-col p {
  font-size: 1.06rem;
  line-height: 1.6;
}
@media (max-width: 860px) {
  .two-col {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ---- Cards, tabs, code, FAQ: quieter chrome ---- */
.card {
  border-radius: 0;
}
.card h3 {
  font-size: 1.1rem;
}
.usecase-tab-btn {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: 0;
  padding: 10px 16px;
}
.code-tab-btn {
  font-family: var(--sans);
  font-size: 0.86rem;
}
.copy-btn {
  font-family: var(--sans);
  font-size: 0.8rem;
}
summary {
  font-size: 1.04rem;
}

/* ---- Final band ---- */
.band {
  background: var(--bg);
  border-top: 0;
  border-bottom: 0;
  padding: 140px 0 130px;
  overflow: hidden;
}
.band::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -120px;
  transform: translateX(-50%);
  width: 900px;
  height: 460px;
  background: none;
  pointer-events: none;
}
.band .wrap {
  position: relative;
}
.band h2 {
  font-size: clamp(2.3rem, 4.6vw, 3.75rem);
  max-width: 820px;
  margin: 0 auto 16px;
}

/* ---- Footer ---- */
.ftr {
  padding: 64px 0 36px;
  background: var(--bg);
  border-top-color: var(--line);
}
.ftr-col h4 {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.ftr-col ul li a {
  font-size: 0.88rem;
}

/* ---- Inner-page intro band ---- */
.page-head {
  padding: 88px 0 48px;
}
.page-head .lead {
  margin-top: 18px;
}

@media (max-width: 640px) {
  section {
    padding: 72px 0;
  }
  .hero {
    padding: 56px 0 64px;
  }
  .ledger {
    padding: 36px 0;
  }
  .band {
    padding: 80px 0 72px;
  }
  .page-head {
    padding: 52px 0 32px;
  }
  .hero-kicker {
    margin-bottom: 18px;
  }
}

/* ---- Post-audit polish (2026-09-02) ---- */
/* Feature bullets: keep the checkmark out of the flex flow so <strong> and
   the trailing text stay one inline run instead of ragged columns. */
.plan-features li {
  display: block;
  position: relative;
  padding-left: 24px;
  line-height: 1.5;
}
.plan-features li::before {
  position: absolute;
  left: 0;
  top: 0;
}
/* Inner-page titles sit in an 860px column; the homepage scale towers there. */
.page-head h1 {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
}
/* Form labels and inline link-buttons join the sentence-case vocabulary. */
#acc-form .label, #acc-form label, #rs-form .label, #rs-form label,
.contact-form label, label.mono {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--steel);
}
.linkbtn {
  font-family: var(--sans);
  font-size: 0.86rem;
}
/* Wide tables on phones: say so instead of silently clipping. */
@media (max-width: 640px) {
  .table-scroll::after {
    content: "Swipe sideways to see every column \2192";
    display: block;
    padding: 8px 12px;
    font-size: 0.74rem;
    color: var(--steel-muted);
    border-top: 1px solid var(--line);
    background: var(--bg-deep);
  }
}

/* ---- "Built for" band: five audiences, one row, no tabs ---- */
.builtfor {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.builtfor ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.builtfor li {
  padding: 9px 14px;
  border-radius: 0;
  border: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--steel);
}

/* Real product screenshot inside the window frame. */
.dashboard-mockup img {
  display: block;
  width: 100%;
  height: auto;
}


/* ==========================================================================
   2026-09-04 POLISH LAYER
   Honest entitlement labels, OS-aware download page, self-hosted fonts,
   contrast + tap-target fixes, phone-width code blocks. Loaded last.
   ========================================================================== */

:root {
  /* Small red text on paper: 5.34:1. Raw #E0261C is 4.19:1, under AA. */
  --accent-text: #C41A11;
}
.text-accent { color: var(--accent-text); }
h1 .text-accent { color: var(--accent); }
.eyebrow { color: var(--accent-text); }
.silver-card .eyebrow, .plan-card.featured .eyebrow { color: var(--accent-deep); }

/* Inline links never rely on colour alone. */
p a.text-accent, li a.text-accent, details .body a, td a, .os-note-box a, .ep p a {
  text-decoration: underline;
  text-decoration-color: rgba(224, 38, 28, 0.55);
  text-underline-offset: 3px;
}
p a.text-accent:hover, li a.text-accent:hover, details .body a:hover { text-decoration-color: currentColor; }

/* Form controls inherit the page face instead of the UA's Arial; code is always mono. */
button, input, select, textarea { font-family: inherit; }
pre, code, kbd, samp { font-family: var(--mono); }

/* Balanced two-line headlines instead of a one-word last line. */
.page-head h1, .section-head h2, .band h2, .silver-card h2, .two-col h2 { text-wrap: balance; }

/* Live fingerprint mirror: the verdict badge never wraps, long values ellipsise (full text in title). */
.fp-badge { white-space: nowrap; }
.mirror .scanner-row .val { overflow-wrap: anywhere; }

/* Homepage spec snippet fits its column instead of clipping mid-token. */
.spec pre { font-size: 0.74rem; line-height: 1.65; }

/* "Rolling out": an entitlement the plan already reserves but the app does not fully ship yet. */
.soon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid rgba(201, 122, 0, 0.4);
  white-space: nowrap;
}
.plan-card.featured .soon, .silver-card .soon, .ledger .soon {
  color: #7a4400;
  background: rgba(201, 122, 0, 0.16);
  border-color: rgba(122, 68, 0, 0.35);
}
td .soon { margin-left: 4px; }

/* Footer: column headings are h2 (no skipped heading levels); links get real tap height. */
.ftr-col h2 {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}
.ftr-col ul li { margin-bottom: 2px; }
.ftr-col ul li a { display: inline-block; padding: 6px 0; line-height: 1.35; }
.ftr-btm a { color: var(--steel-muted); }
.ftr-btm a:hover { color: var(--accent-text); }

/* Phone-width code blocks: wrap the tab strip, scroll the tabs, keep Copy reachable. */
@media (max-width: 640px) {
  .code-tabs { flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; }
  .tab-buttons { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .code-tab-btn { white-space: nowrap; padding: 10px 12px; }
  .copy-btn { margin-left: auto; }
  .code-pane { padding: 16px 14px; font-size: 0.8rem; }
  .mini-grid { grid-template-columns: 1fr; }
  .mock-note { display: none; }
  .mock-title { white-space: nowrap; }
  .builtfor { gap: 14px; }
}

/* OS-aware note under a hero CTA: hidden until main.js knows the platform. */
.os-note { display: none; margin-top: 14px; font-size: 0.86rem; color: var(--steel-muted); max-width: 520px; line-height: 1.5; }
.os-note.show { display: block; }
.os-note a { color: var(--steel-light); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Download page ---- */
.dl-hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(224, 38, 28, 0.35);
  border-radius: 0;
  padding: 34px 36px;
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 28px;
  align-items: center;
  text-align: left;
  box-shadow: none;
}
.dl-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ink);
}
.dl-hero .eyebrow { margin-bottom: 10px; }
.dl-hero h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 8px; }
.dl-hero .meta { font-family: var(--mono); font-size: 0.78rem; color: var(--steel-muted); margin: 0; }
.dl-switch { margin: 16px 0 0; font-size: 0.84rem; color: var(--steel-muted); }
.dl-switch a { color: var(--steel-light); text-decoration: underline; text-underline-offset: 3px; }
.dl-hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.dl-hero-actions .btn { width: 100%; }
.dl-hero-actions .alt { text-align: center; font-size: 0.82rem; color: var(--steel-muted); line-height: 1.5; }
.dl-hero-actions .alt a { color: var(--steel-light); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .dl-hero { grid-template-columns: 1fr; padding: 24px 20px; gap: 20px; }
}

.os-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
@media (max-width: 860px) { .os-grid { grid-template-columns: 1fr; } }
.os-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-margin-top: 90px;
  box-shadow: none;
}
.os-card.recommended { border-color: rgba(224, 38, 28, 0.45); box-shadow: none; }
.os-card-head { display: flex; align-items: center; gap: 12px; }
.os-icon {
  width: 40px; height: 40px;
  border-radius: 0;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.os-icon svg { width: 20px; height: 20px; stroke: var(--steel-light); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.os-card h3 { font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.os-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 0;
  border: 1px solid var(--line-strong);
  color: var(--steel-muted);
  font-weight: 500;
}
.os-tag.stable { color: var(--good); border-color: rgba(31, 122, 77, 0.4); background: var(--good-soft); }
.os-tag.beta { color: var(--accent-text); border-color: rgba(224, 38, 28, 0.4); background: var(--accent-soft); }
.os-tag.you { color: #ffffff; background: var(--accent-deep); border-color: var(--accent-deep); }
.os-card p { margin: 0; font-size: 0.9rem; color: var(--steel); line-height: 1.55; }
.os-card .req { font-family: var(--mono); font-size: 0.74rem; color: var(--steel-muted); }
.dl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dl-actions .btn { flex: 1 1 150px; }
.os-note-box {
  border-left: 2px solid var(--warn);
  background: var(--warn-soft);
  padding: 10px 14px;
  border-radius: 0;
  font-size: 0.84rem;
  color: var(--steel);
  line-height: 1.55;
}
.os-note-box code, .os-card p code { font-size: 0.78rem; background: var(--bg-deep); padding: 1px 6px; border-radius: 0; overflow-wrap: anywhere; }
.cmd {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--steel-light);
  overflow-wrap: anywhere;
  user-select: all;
}
.hash-details { margin: auto 0 0; background: transparent; border: 1px solid var(--line); border-radius: 0; }
.hash-details summary { padding: 10px 14px; font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.04em; color: var(--steel-muted); }
.hash-details[open] { background: var(--bg-deep); border-color: var(--line-strong); }
.hash-details .body { padding: 2px 14px 14px; }
.hash-row { display: block; margin-top: 8px; }
.hash-row span { display: block; font-family: var(--mono); font-size: 0.7rem; color: var(--steel-muted); margin-bottom: 4px; }
.hash-row code { display: block; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 0; font-size: 0.72rem; color: var(--steel); overflow-wrap: anywhere; user-select: all; }
.hash-details .req { margin-top: 10px; font-size: 0.74rem; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step-n { font-family: var(--disp); font-size: 1.5rem; font-weight: 800; color: var(--accent-text); line-height: 1; margin-bottom: 14px; }
.req-table td:first-child { white-space: nowrap; color: var(--ink); font-weight: 600; }
.dl-foot { text-align: center; font-size: 0.86rem; color: var(--steel-muted); margin-top: 28px; }
.dl-foot a { color: var(--steel-light); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .dl-actions .btn { flex-basis: 100%; }
  .os-card { padding: 20px 16px; }
}

/* ---- Docs page ---- */
.doc-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 28px; }
.doc-nav a { font-size: 0.86rem; padding: 8px 14px; border-radius: 0; border: 1px solid var(--line-strong); color: var(--steel); }
.doc-nav a:hover { color: var(--ink); border-color: var(--accent); }
.doc-section { scroll-margin-top: 90px; }
.doc-section + .doc-section { margin-top: 88px; }
.doc-section .section-head { margin-bottom: 28px; }
.ep { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; padding: 18px 22px; margin-bottom: 14px; }
.ep-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ep-method { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; padding: 4px 8px; border-radius: 0; letter-spacing: 0.04em; }
.ep-method.get { background: var(--good-soft); color: var(--good); }
.ep-method.post { background: var(--warn-soft); color: var(--warn); }
.ep-method.patch { background: rgba(11, 79, 143, 0.12); color: #79c0ff; }
.ep-method.delete { background: var(--bad-soft); color: var(--bad); }
.ep-path { font-family: var(--mono); font-size: 0.92rem; color: var(--steel-light); overflow-wrap: anywhere; }
.ep p { margin: 0; font-size: 0.92rem; }
.ep p + p { margin-top: 6px; }
.ep-code { margin-top: 12px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 0; font-family: var(--mono); font-size: 0.8rem; line-height: 1.65; color: var(--ink); overflow-x: auto; }
.ep-code pre { margin: 0; }
.doc-steps { counter-reset: step; display: grid; gap: 16px; padding: 0; margin: 0; }
.doc-steps li { list-style: none; position: relative; padding-left: 46px; }
.doc-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px;
  border-radius: 0;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--disp); font-size: 0.8rem; font-weight: 800;
  color: var(--accent-text);
}
.doc-steps li b { display: block; color: var(--ink); margin-bottom: 4px; font-size: 1rem; }
.doc-steps li p { margin: 0; font-size: 0.92rem; line-height: 1.55; }
.doc-steps li p code { font-size: 0.8rem; background: var(--bg-deep); padding: 1px 6px; border-radius: 0; }
.tool-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.tool-list li { font-family: var(--mono); font-size: 0.74rem; color: var(--steel); padding: 5px 10px; border-radius: 0; background: var(--bg-deep); border: 1px solid var(--line); }

/* Legibility + tap targets (post-screenshot pass, 2026-09-04) */
.soon { font-size: 0.66rem; }
.os-tag { font-size: 0.66rem; }
.dl-switch a, .dl-foot a, #acc-form p a { display: inline-block; padding: 4px 0; }


/* ==========================================================================
   BRAND SYSTEM v1 — September 2026. Loaded last; overrides the layers above.
   Paper and ink, left-aligned, rectangles. Section rules are 2px ink, table
   rules 1px --line. Red appears three times at most on a page: the mark, one
   word, one button. Type scale and spacing come from brand/tokens.css.
   ========================================================================== */

/* ---- Type ------------------------------------------------------------ */
body { font-size: 17px; line-height: 1.55; }
h1, h2, h3, h4 { font-family: var(--sans); }
h1 { font-size: clamp(32px, 4.4vw, 48px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.10; }
h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.020em; line-height: 1.20; }
p  { max-width: var(--measure); }
.lead { font-size: 20px; font-weight: 400; color: var(--graphite); letter-spacing: -0.01em; }
.mono, code, pre, .hash-row code { font-family: var(--mono); font-size: 13px; letter-spacing: 0; }

/* The display headline: hero only. */
.hero h1, .page-head h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; }

/* Eyebrows are sentence case and quiet — never a small-caps litany. */
.eyebrow, .hero-kicker, .plan-tag, .os-tag, .soon, .admin-tab, .ftr-col h2, .ftr-col h4 {
  font-family: var(--sans);
  letter-spacing: 0;
  font-weight: 600;
}
.eyebrow, .hero-kicker { color: var(--graphite); font-size: 14px; }

/* ---- The mark and logotype (spec section 3) -------------------------- */
.logotype {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.logotype:hover { color: var(--ink); text-decoration: none; }
.logotype svg { height: 0.74em; width: 0.68em; margin-right: 0.02em; transform: translateY(0.02em); display: inline-block; }
.logotype-nav { font-size: 20px; }
.logotype-footer { font-size: 16px; }
@media (max-width: 640px) { .logotype-nav { font-size: 18px; } }

/* ---- Header ---------------------------------------------------------- */
.hdr { background: var(--paper); border-bottom: 1px solid var(--line); }
.hdr-in { height: 64px; }
.nav a {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--graphite);
  padding: 8px 12px;
  background: none;
  border: 1px solid transparent;
}
.nav a:hover { color: var(--ink); background: none; text-decoration: underline; text-underline-offset: 4px; }
.nav a.on { color: var(--ink); background: none; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; }
.burger { background: none; border: 1px solid var(--line); color: var(--ink); }

/* ---- Buttons --------------------------------------------------------- */
.btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 11px 18px;
  border-radius: 0;
  border: 1px solid transparent;
}
.btn:hover, .btn:active { transform: none; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn-lg { padding: 14px 24px; font-size: 15px; letter-spacing: 0; }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }

/* The one red button. White on #E0261C is 4.70:1 — AA. */
.btn-primary { background: var(--red); color: var(--white); border-color: var(--red); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--white); }

/* Ink button: the nav CTA and every secondary primary (spec section 5). */
.btn-ink, .btn-dark { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-ink:hover, .btn-dark:hover { background: var(--graphite); border-color: var(--graphite); color: var(--white); }

/* Ghost stays a rectangle so the button rows on /download keep working;
   tokens.css draws it as bare underlined text, which is .btn-link here. */
.btn-ghost { background: none; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn-link {
  background: none;
  color: var(--ink);
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
.btn-link:hover { color: var(--ink); border-bottom-color: var(--red); }

/* Destructive is amber, not red — red is the brand, never an error state. */
.btn-danger { background: none; color: var(--warn-text); border-color: var(--warn); }
.btn-danger:hover { background: var(--warn-text); color: var(--white); border-color: var(--warn-text); }

/* ---- Surfaces -------------------------------------------------------- */
.card, .plan-card, .os-card, .scanner-widget, .fp-panel, .dl-hero, .silver-card,
.pricing-calculator, .code-playground, .dashboard-mockup, .ep, .faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.card:hover, .plan-card:hover, .os-card:hover { transform: none; border-color: var(--line-strong); }
.alt-bg { background: var(--white); }
.band, .ledger { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--paper); }

/* Rules: 2px ink for sections, 1px --line inside tables. */
.rule, .section-head { border-color: var(--ink); }
table { border-color: var(--line); }
th, td { border-color: var(--line); }
th { color: var(--ink); font-family: var(--sans); font-weight: 600; letter-spacing: 0; }

/* ---- Status ---------------------------------------------------------- */
.ok, .status-ok { color: var(--good); }
.status-warn, .soon { color: var(--warn-text); }
.dot-red { background: var(--red); }

/* ---- Links ----------------------------------------------------------- */
a { color: var(--ink); }
a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.text-steel { color: var(--graphite); }
p a, li a, td a, details .body a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Footer ---------------------------------------------------------- */
.ftr { background: var(--paper); border-top: 2px solid var(--ink); color: var(--graphite); }
.ftr a { color: var(--graphite); }
.ftr a:hover { color: var(--ink); }
.ftr-col h2, .ftr-col h4 { color: var(--ink); font-size: 14px; font-weight: 600; }
.ftr-btm { border-top: 1px solid var(--line); color: var(--steel-muted); }

/* ---- Focus ----------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ---- Contrast fixes found by the WCAG pass on the new palette --------- */
/* The price ledger was a dark card on a dark page; on paper it is a card. */
.price-ledger { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
.price-ledger a { color: var(--ink); }
.price-ledger a.hl { background: var(--accent-soft); color: var(--accent-text); }
.price-ledger em { color: var(--ink); }
.price-ledger small { color: var(--steel-muted); }

/* Amber at 12px needs the darker amber to clear AA (#C97A00 is 3.0:1). */
.fp-badge, .os-tag.beta, .soon { color: var(--warn-text); background: var(--warn-soft); border-color: var(--warn); }

/* An active tab is ink, not red — red is spent on the mark and one button. */
.code-tab-btn.active, .usecase-tab-btn.active, .toggle-btn.active {
  color: var(--white); background: var(--ink); border-color: var(--ink);
}

/* Method chips and status pills: the darker amber/green clear AA at 12px. */
.ep-method.post { color: var(--warn-text); }
.ep-method.delete { color: var(--warn-text); }
.ep-method.patch { background: rgba(11, 79, 143, 0.12); color: #0B4F8F; }
.ep-method.get { color: var(--good-text); }
.acc-err { color: var(--warn-text); }
.pill { color: var(--good-text); }

/* ---- Red budget (spec section 0.4) -----------------------------------
   Per page: the mark, at most one red word, at most one red button.
   Red was the generic "accent" of the old system and leaked into 41 links,
   table headers and changelog tags. On paper those are ink; links carry an
   underline instead of a colour. Red is now spent only on the mark and on
   the single primary CTA. -------------------------------------------- */
.text-accent,
h1 .text-accent,
.silver-card .eyebrow,
.plan-card.featured .eyebrow,
.price-ledger a.hl,
.step-n,
.plan-cur { color: var(--ink); }

.dot.dot-red { background: var(--ink); }
.plan-tag { background: var(--ink); color: var(--white); border-color: var(--ink); }
.os-tag.you { background: var(--ink); color: var(--white); border-color: var(--ink); }
.price-ledger a.hl { background: var(--paper); box-shadow: inset 2px 0 0 var(--ink); }

/* Pseudo-element red leaks: 24 plan checkmarks and the active-nav underline. */
.plan-features li::before,
.plan-card.featured .plan-features li::before { color: var(--ink); }
.nav a.on::after { background: var(--ink); }
.doc-steps li::before { color: var(--ink); }

/* ---- Phase 3: homepage ------------------------------------------------ */
/* The version badge and the proof line are machine facts: mono, quiet. */
.hero-kicker.mono {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--graphite);
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 20px;
  letter-spacing: 0;
}
.proof-line {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--graphite);
  margin-top: 20px;
}

/* The reader's verdict is the one red word on the page (spec section 7). */
.verdict {
  font-family: var(--sans);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--red);
  margin: 0;
  padding: 20px 20px 4px;
}
.scanner-title { font-weight: 600; color: var(--ink); }

/* Fourth fact carries no numeral; keep the baseline with the other three. */
.ledger-item.nonum strong { margin-top: 0; }
.ledger-item.nonum { padding-top: 4px; }

/* The reader footer carried an --accent-soft tint; red stays on the verdict. */
.scanner-footer, .mirror .scanner-footer { background: var(--paper); border-top: 1px solid var(--line); }

/* Prohibited-use list: plain bullets, never the affirmative check glyph. */
.aup-list { list-style: none; padding: 0; margin: 10px 0 0; }
.aup-list li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.aup-list li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 6px; height: 1px; background: var(--graphite); }