/* ============================================================
   WeWatchYourWebsite — Landing page styles
   Dark security-grade base, lime accent. Mobile-first.
   Tokens are the LOCKED design anchor — consume, never redefine inline.
   ============================================================ */

:root{
  /* --- Brand source-of-truth (from logo SVG, do not alter) --- */
  --brand-lime:        #69ff12;
  --brand-lime-grad-a: #bed143;
  --brand-lime-grad-b: #3d6f3c;
  --brand-teal:        #1aa6b7;
  --brand-navy:        #000033;
  --brand-ink:         #0c0c0c;

  /* --- Accent scale --- */
  --accent:            #69ff12;
  --accent-hover:      #7bff33;
  --accent-press:      #5ee300;
  --accent-soft:       rgba(105,255,18,0.12);
  --accent-border:     rgba(105,255,18,0.40);
  --accent-ring:       #69ff12;
  --accent-2:          #1aa6b7;
  --accent-2-text:     #3dd6e8;

  /* --- Surfaces --- */
  --bg-base:           #05060a;
  --bg-base-2:         #080a11;
  --surface-1:         #0d1018;
  --surface-2:         #141925;
  --surface-3:         #1b2130;
  --surface-inset:     #04050a;

  /* --- Borders & hairlines --- */
  --border-subtle:     rgba(255,255,255,0.06);
  --border-default:    rgba(255,255,255,0.10);
  --border-strong:     rgba(255,255,255,0.16);
  --border-accent:     rgba(105,255,18,0.40);

  /* --- Text --- */
  --text-primary:      #e8ecf2;
  --text-secondary:    #b3bccb;
  --text-muted:        #8a94a6;
  --text-faint:        #7b8499;
  --text-on-accent:    #000033;
  --text-accent:       #69ff12;
  --text-link:         #69ff12;
  --text-link-hover:   #84ff45;

  /* --- Gradients --- */
  /* Bright-bodied lime: keep glyph bodies luminous on the largest type
     (olive only past 100%, so it never muddies the headline / stat numbers). */
  --grad-lime-text:    linear-gradient(180deg, #9bff63 0%, #69ff12 70%, #4f9a3a 130%);
  --grad-hero-vignette: radial-gradient(120% 90% at 50% 35%, transparent 0%, rgba(5,6,10,0.55) 55%, var(--bg-base) 80%);

  /* --- Radii --- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* --- Shadows (minimal — elevation via surface step + hairline) --- */
  --shadow-none:   none;
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.40);
  --glow-lime:     0 0 24px rgba(105,255,18,0.25);
  --glow-lime-sm:  0 0 12px rgba(105,255,18,0.18);

  /* --- Focus ring (two-layer) --- */
  --focus-ring-w:    2px;
  --focus-ring:      0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent-ring);
  --focus-ring-on-surface: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent-ring);

  /* --- Typography stacks --- */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Motion / easing --- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:      120ms;
  --dur-base:      160ms;
  --dur-slow:      260ms;

  /* --- Layout --- */
  --container-max:    1240px;
  --container-narrow: 760px;
  --gutter:           clamp(1.25rem, 4vw, 2.5rem);
  --z-header: 100; --z-overlay: 200; --z-modal: 300;

  /* --- Fluid type scale ---
     Tightened display max (5rem felt oversized and forced ragged hero wraps).
     h1/h2 nudged closer so section heads read as one consistent family. */
  --text-display: clamp(2.75rem, 1.5rem + 5.4vw, 4.5rem);
  --text-h1:      clamp(2.25rem, 1.6rem + 3.0vw, 3.25rem);
  --text-h2:      clamp(1.875rem, 1.45rem + 1.9vw, 2.5rem);
  --text-h3:      clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --text-h4:      clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --text-h5:      clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-h6:      clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --text-body-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --text-body:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-small:   0.875rem;
  --text-xs:      0.75rem;

  /* --- Spacing scale --- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* Lower mobile floors: the old 4rem/3rem/6rem minimums never relaxed on
     small screens, so every stacked section carried desktop-sized vertical
     padding and the page read as a series of voids. The vw term still scales
     these up generously on wide screens. */
  --section-py:       clamp(2.75rem, 6vw, 8rem);
  --section-py-tight: clamp(2.25rem, 4vw, 5rem);
  --section-gap:      clamp(1.75rem, 4vw, 4rem);
  --hero-py-top:      clamp(3.5rem, 9vw, 11rem);
  --grid-gap:         clamp(1.25rem, 2.5vw, 2rem);
  --stack-gap:        1rem;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; }
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:72px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg-base);
  color:var(--text-secondary);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:1.65;
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--text-primary);
  line-height:1.1;
  letter-spacing:-0.025em;
  /* Balance every headline by default so multi-line headings break evenly
     instead of orphaning a single word on the last line. */
  text-wrap:balance;
}
/* pretty avoids a lone last word (orphan/widow) on body + lede paragraphs */
p{ margin:0; text-wrap:pretty; }
a{ color:var(--text-link); text-decoration:none; transition:color var(--dur-base) var(--ease-out); }
a:hover{ color:var(--text-link-hover); }
img,svg,canvas{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

::selection{ background:rgba(105,255,18,0.24); color:#fff; }

:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }

/* Forced-colors / Windows High Contrast strips box-shadow, so the ring-based
   focus indicators vanish. Restore a real system-color outline for every
   focusable element in that mode. */
@media (forced-colors: active){
  :focus-visible{ outline:3px solid Highlight; outline-offset:2px; }
  /* .btn:focus-visible sets `outline:none` at higher specificity, so without
     this it would still have no indicator once box-shadow is stripped. Covers
     both primary and secondary CTAs (both carry .btn). */
  .btn:focus-visible{ outline:3px solid Highlight; outline-offset:2px; }
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:var(--space-4); top:-3rem; z-index:var(--z-modal);
  background:var(--accent); color:var(--text-on-accent);
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-md);
  font-weight:600; transition:top var(--dur-base) var(--ease-out);
}
.skip-link:focus{ top:var(--space-4); color:var(--text-on-accent); }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.container{
  width:100%; max-width:var(--container-max);
  margin-inline:auto; padding-inline:var(--gutter);
}

section{ padding-block:var(--section-py); position:relative; }
.section--alt{ background:var(--bg-base-2); }
/* Vary the vertical rhythm so the page doesn't pulse at one fixed interval:
   the monitor (radar) breathes wider; the FAQ sits tighter as a dense list. */
#stats{ padding-block:clamp(5rem, 8vw, 10rem); }
#faq{ padding-block:clamp(3rem, 5vw, 6rem); }

.section-head{ max-width:640px; margin-bottom:var(--space-7); }
.section-head--center{ margin-inline:auto; text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-accent); margin-bottom:var(--space-4);
}
.eyebrow::before{
  content:""; width:18px; height:1px; background:var(--accent-border);
}
.section-head--center .eyebrow{ justify-content:center; }

.section-title{ font-size:var(--text-h2); line-height:1.08; max-width:20ch; }
.section-head--center .section-title{ margin-inline:auto; }

/* Why-diff head — two sentences, each meant to sit on its own pair of lines.
   The shared 20ch cap collapses them into a lopsided wrap, so on desktop we
   drop the cap, hard-break between the sentences, and let each sentence find
   its own two near-even lines. Mobile keeps the default single-column wrap. */
.why-diff__br{ display:none; }
@media (min-width:920px){
  .why-diff__title{ max-width:none; }
  .why-diff__br{ display:inline; }
}
.section-lede{
  margin-top:var(--space-5); font-size:var(--text-body-lg);
  color:var(--text-muted); line-height:1.6; max-width:52ch;
}
.section-head--center .section-lede{ margin-inline:auto; }

/* Services head — the lone NON-centered section head, deliberately asymmetric so
   it doesn't add to the run of centered heads and it mirrors the two-column
   console grid directly below. Heading + a mono handoff label sit left, the lede
   sits right and fills what was dead top-right space over the console. The mono
   label parallels the console eyebrow ("Continuous scan · 4 passes") — the same
   left-says-section / right-says-artifact device as the FAQ rail. Overrides the
   global 640px cap (sized for a single-column block) so the head spans the grid. */
.services-head{ max-width:none; }
/* Match the console grid below exactly (same 1.35/1 ratio, gap and 900px break)
   so the lede's left edge lands on the console rail's left edge — the head reads
   as the same two columns, just one row up. */
@media (min-width:900px){
  .services-head{
    display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:clamp(1.5rem,3vw,3rem); align-items:end;
  }
  /* Lede baseline-aligns to the heading's last line, not floated mid-air. */
  .services-head__lede{ margin-top:0; max-width:46ch; }
}
.services-head__label{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint);
  margin-bottom:var(--space-4);
}
.services-head__title{ max-width:none; text-wrap:balance; }

/* Solid lime accent on display words — gradient-fill text reads as an AI tell.
   Weight + the display face carry the emphasis, not a gradient. */
.text-grad{ color:var(--accent); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:0.875rem 1.5rem; min-height:48px;
  border-radius:var(--radius-md); border:1px solid transparent;
  font-family:var(--font-body); font-size:1rem; font-weight:600;
  line-height:1; cursor:pointer; white-space:nowrap;
  transition:background var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

.btn--primary{ background:var(--accent); color:var(--text-on-accent); border-color:var(--accent); }
.btn--primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:var(--text-on-accent); transform:translateY(-2px); box-shadow:var(--glow-lime); }
.btn--primary:active{ background:var(--accent-press); border-color:var(--accent-press); transform:translateY(0); }
.btn--primary[disabled],.btn--primary:disabled{ background:rgba(105,255,18,0.30); color:rgba(0,0,51,0.55); cursor:not-allowed; transform:none; box-shadow:none; }

.btn--secondary{ background:transparent; color:var(--text-primary); border-color:var(--border-strong); }
.btn--secondary:hover{ border-color:var(--accent-border); color:var(--text-accent); background:var(--accent-soft); transform:translateY(-2px); }
.btn--secondary:active{ background:rgba(105,255,18,0.18); transform:translateY(0); }
.btn--secondary:focus-visible{ box-shadow:var(--focus-ring-on-surface); }

.btn--compact{ padding:0.625rem 1.125rem; min-height:auto; font-size:0.9375rem; }
.btn--block{ width:100%; }
.btn--lg{ padding:1rem 1.75rem; font-size:1.0625rem; }

/* ============================================================
   BADGE / PILL
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:0.375rem 0.75rem; border-radius:var(--radius-pill);
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:0.04em; text-transform:uppercase;
  background:var(--accent-soft); color:var(--text-accent);
  border:1px solid var(--accent-border);
}

.status-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:var(--glow-lime-sm); flex:none;
}
.status-dot--pulse{ animation:pulse 2s var(--ease-in-out) infinite; }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(105,255,18,0.45); }
  50%{ box-shadow:0 0 0 5px rgba(105,255,18,0); }
}
@media (prefers-reduced-motion: reduce){ .status-dot--pulse{ animation:none; } }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(5,6,10,0.72);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border-subtle);
  transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled{ background:rgba(5,6,10,0.92); border-bottom-color:var(--border-default); }

.nav{
  display:flex; align-items:center; gap:var(--space-5);
  height:64px; max-width:var(--container-max); margin-inline:auto;
  padding-inline:var(--gutter);
}
.nav__brand{ display:inline-flex; align-items:center; flex:none; border-radius:var(--radius-sm); }
.nav__brand:focus-visible{ box-shadow:var(--focus-ring); }
.brand-logo{ height:30px; width:auto; }

.nav__links{
  display:none; align-items:center; gap:var(--space-2);
  margin-inline-start:var(--space-4);
}
.nav__link{
  position:relative; padding:var(--space-2) var(--space-3);
  font-size:0.9375rem; font-weight:500; color:var(--text-muted);
  border-radius:var(--radius-sm);
  transition:color var(--dur-base) var(--ease-out);
}
.nav__link::after{
  content:""; position:absolute; left:var(--space-3); right:var(--space-3); bottom:4px;
  height:2px; background:var(--accent); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.nav__link:hover,.nav__link[aria-current="true"]{ color:var(--text-primary); }
.nav__link:hover::after,.nav__link[aria-current="true"]::after{ transform:scaleX(1); }
.nav__link:focus-visible{ box-shadow:var(--focus-ring); }

.nav__cta{ display:none; align-items:center; gap:var(--space-3); margin-inline-start:auto; }

.nav__toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-inline-start:auto; padding:0;
  background:transparent; border:1px solid var(--border-default);
  border-radius:var(--radius-sm); color:var(--text-primary); cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.nav__toggle:hover{ border-color:var(--accent-border); }
.nav__toggle:focus-visible{ box-shadow:var(--focus-ring); }
.nav__toggle .icon-close{ display:none; }
.nav__toggle[aria-expanded="true"] .icon-open{ display:none; }
.nav__toggle[aria-expanded="true"] .icon-close{ display:block; }

/* Mobile menu panel */
.mobile-menu{
  position:fixed; inset:64px 0 0; z-index:var(--z-overlay);
  background:var(--bg-base);
  border-top:1px solid var(--border-subtle);
  padding:var(--space-6) var(--gutter) var(--space-8);
  display:flex; flex-direction:column; gap:var(--space-2);
  transform:translateX(100%); visibility:hidden;
  transition:transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
  overflow-y:auto;
}
.mobile-menu.is-open{ transform:translateX(0); visibility:visible; }
.mobile-menu__link{
  padding:var(--space-4) var(--space-2); font-family:var(--font-display);
  font-size:var(--text-h4); font-weight:600; color:var(--text-primary);
  border-bottom:1px solid var(--border-subtle);
}
.mobile-menu__link:hover{ color:var(--text-accent); }
.mobile-menu__cta{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-6); }
@media (min-width:768px){ .mobile-menu{ display:none; } }

@media (min-width:768px){
  .nav__links,.nav__cta{ display:flex; }
  .nav__toggle{ display:none; }
  .brand-logo{ height:32px; }
}

/* ============================================================
   LETTERGLITCH BACKDROP
   ============================================================ */
/* SOURCE-ORDER WARNING (latent fragility — do not "tidy" by moving this):
   `.glitch` is z-index:0 (positioned, so it establishes a paint level). The
   hero/final-cta/footer `__bg` backdrops sit at z-index:-2 and `__bg-fade` /
   localized scrims at z-index:-1. Those negative z-indexes only paint BEHIND
   the section content because this `.glitch` block is declared BEFORE the
   section rules below — equal-specificity source order is what keeps the
   backdrop stack winning. If you relocate this block beneath the hero/footer
   section rules, the layering inverts and the glitch covers the copy. Keep it
   here, above the section blocks. */
.glitch{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#000; pointer-events:none; }
.glitch canvas{ display:block; width:100%; height:100%; }
.glitch__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,0,0,1) 100%);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; isolation:isolate;
  padding-block:var(--hero-py-top) var(--section-py);
  overflow:hidden;
}
/* Mobile: the stacked hero (message → ops panel → stat band) ran ~2 screens
   tall because the desktop padding floors (6rem top / 4rem bottom) are far too
   generous once everything is in one column. Tighten the whole vertical rhythm
   so the hero reads as one screen, not a void. */
@media (max-width:639px){
  .hero{ padding-block:var(--space-7) var(--space-6); }
}
/* A single calm anchor wash — a soft lime corner-glow over the base gradient.
   No character rain (it read dated + fought the type), no per-glyph scrim box. */
.hero__wash{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 50% at 8% 0%, rgba(105,255,18,0.10), transparent 58%),
    radial-gradient(60% 55% at 100% 12%, rgba(26,166,183,0.08), transparent 60%),
    linear-gradient(180deg, var(--bg-base-2) 0%, var(--bg-base) 70%);
}
/* faint hairline grid for depth, fading out before the stat band */
.hero__wash::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
          mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
}

/* Split: message left, network-ops panel right. Collapses to one column where
   the panel would get too narrow to read. */
.hero__grid{
  display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3.5rem);
  align-items:center;
}
@media (min-width:920px){
  .hero__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:clamp(2.5rem,5vw,5rem); }
}
.hero__inner{ position:relative; z-index:1; max-width:640px; }

.hero__title{
  font-size:var(--text-display); line-height:1.05; letter-spacing:-0.025em;
  margin-block:var(--space-5) var(--space-6); text-wrap:balance; max-width:18ch;
}
/* Controlled break: force "Real Security." / "Built From Real Attacks." onto
   their own lines once the column is wide enough, without nowrap (which would
   overflow the narrower split-layout column). */
.hero__title .brk{ display:none; }
@media (min-width:560px){
  .hero__title .brk{ display:block; }
}
.hero__body{
  max-width:52ch; font-size:var(--text-body-lg);
  color:var(--text-secondary); line-height:1.6;
}
.hero__cta{
  display:flex; flex-wrap:wrap; gap:var(--space-4);
  margin-top:var(--space-7);
}
.proof-line{
  display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5);
  margin-top:var(--space-6); font-size:var(--text-small); color:var(--text-muted);
}
.proof-line li{ display:inline-flex; align-items:center; gap:var(--space-2); }
.tick{ color:var(--accent); flex:none; }

/* ============================================================
   PROOF RIBBON
   ============================================================ */
.ribbon{
  border-block:1px solid var(--border-subtle);
  background:var(--bg-base-2);
  padding-block:var(--space-5);
}
.ribbon__list{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--space-3) var(--space-5); text-align:center;
}
.ribbon__item{
  display:inline-flex; align-items:center; gap:var(--space-3);
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted);
}
.ribbon__item .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none; }
.ribbon__sep{ width:1px; height:14px; background:var(--border-default); }
@media (max-width:560px){ .ribbon__sep{ display:none; } }

/* ============================================================
   SERVICES — "WATCH CONSOLE": one screen, four scan passes
   ============================================================ */
.card{
  position:relative; isolation:isolate;
  border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:var(--space-6);
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  transition:border-color var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out),
             box-shadow var(--dur-slow) var(--ease-out);
}

.console{
  --pass-dwell:5200ms; /* keep in sync with DWELL in main.js */
  display:grid; grid-template-columns:1fr; gap:var(--grid-gap);
  align-items:start;
}
@media (min-width:900px){
  .console{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(1.5rem,3vw,3rem); }
}

/* ---------- The screen (left) ---------- */
/* Sticky on ALL sizes: it's a monitor you keep watching. On mobile the rail
   stacks below and scrolls UNDER the pinned screen, so tapping any pass always
   shows the Lottie swap (the screen never scrolls out of view). z-index keeps
   the screen above the later-in-DOM rail; the gradient bg is fully opaque. */
.console__screen{
  position:sticky; top:72px; z-index:2;
  isolation:isolate;
  border:1px solid var(--border-default); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 32px 64px -48px rgba(0,0,0,0.8);
  overflow:hidden;
}
@media (min-width:900px){ .console__screen{ top:96px; z-index:auto; } }
@media (min-width:900px){ .pass{ scroll-margin-top:120px; } }

.console__screen::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--accent-border), inset 0 0 60px -20px var(--accent-soft);
  opacity:0; transition:opacity var(--dur-slow) var(--ease-out);
}
.console__screen.is-hot::before{ opacity:1; }

/* browser-chrome bar — frames the white art as a real screen */
.screen-chrome{
  display:flex; align-items:center; gap:var(--space-3);
  padding:0.625rem var(--space-4);
  background:var(--surface-3); border-bottom:1px solid var(--border-default);
}
.screen-chrome__dots{ display:inline-flex; gap:6px; }
.screen-chrome__dots i{ width:9px; height:9px; border-radius:50%; background:var(--border-strong); }
.screen-chrome__url{
  display:inline-flex; align-items:center; gap:6px; flex:1;
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted);
  padding:0.25rem 0.625rem; border-radius:var(--radius-pill);
  background:var(--surface-inset); border:1px solid var(--border-subtle);
}
.screen-chrome__url svg{ color:var(--text-accent); flex:none; }
.screen-chrome__live{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:600;
  letter-spacing:0.08em; color:var(--text-accent);
}
.screen-chrome__pulse{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-border); animation:console-pulse 2.4s var(--ease-out) infinite;
}
@keyframes console-pulse{
  0%{ box-shadow:0 0 0 0 rgba(105,255,18,0.5); }
  70%{ box-shadow:0 0 0 8px rgba(105,255,18,0); }
  100%{ box-shadow:0 0 0 0 rgba(105,255,18,0); }
}

/* the stage that holds the white Lottie — embraced as a "screen" surface */
.screen-stage{
  position:relative; aspect-ratio:600 / 400; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, #fbfdff 0%, #eef2f6 100%);
}
/* keep the pinned screen short on phones so it doesn't eat the viewport while
   the rail scrolls beneath it */
@media (max-width:899px){
  .screen-stage{ aspect-ratio:auto; height:min(42vh, 230px); }
}
.screen-stage .lottie-mount{ position:absolute; inset:0; }
.screen-stage .lottie-mount[hidden]{ display:none; }
.screen-stage .lottie-mount svg{ width:100% !important; height:100% !important; }

/* faint lime grid overlay ties the white screen to the brand */
.screen-stage__grid{
  position:absolute; inset:0; pointer-events:none; z-index:1; mix-blend-mode:multiply; opacity:0.5;
  background-image:linear-gradient(rgba(61,111,60,0.10) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(61,111,60,0.10) 1px, transparent 1px);
  background-size:28px 28px;
}
/* lime scan line sweeping the screen */
.screen-stage__scanline{
  position:absolute; left:0; right:0; top:0; height:64px; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(105,255,18,0.22) 70%, rgba(105,255,18,0.9) 100%);
  border-bottom:1px solid var(--accent);
  box-shadow:0 0 24px 4px rgba(105,255,18,0.35);
  animation:console-scan 3.6s var(--ease-in-out) infinite;
}
@keyframes console-scan{
  0%{ transform:translateY(-70px); opacity:0; }
  12%{ opacity:1; }
  88%{ opacity:1; }
  100%{ transform:translateY(420px); opacity:0; }
}

/* terminal-style readout strip beneath the screen */
.screen-readout{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:0.625rem var(--space-4);
  background:var(--surface-inset); border-top:1px solid var(--border-default);
  font-family:var(--font-mono); font-size:var(--text-xs);
}
.screen-readout__label{ color:var(--text-muted); letter-spacing:0.02em; }
.screen-readout__status{ display:inline-flex; align-items:center; gap:6px; color:var(--text-accent); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; }
.screen-readout__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px 1px var(--accent-border); }

/* ---------- The scan-pass rail (right) ---------- */
.console__rail-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.console__eyebrow{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--text-accent);
}
.console__toggle{
  display:inline-flex; align-items:center; gap:6px; flex:none; cursor:pointer;
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--text-muted);
  padding:0.3125rem 0.625rem; border-radius:var(--radius-pill);
  background:var(--surface-inset); border:1px solid var(--border-subtle);
  transition:color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.console__toggle:hover{ color:var(--text-primary); border-color:var(--border-default); }
.console__toggle:focus-visible{ outline:none; box-shadow:var(--focus-ring-on-surface); }
.console__toggle-icon{ display:inline-flex; }
.console__toggle-icon .icon-play{ display:none; }
/* aria-pressed="true" = user has PAUSED → show the play (resume) affordance */
.console__toggle[aria-pressed="true"] .icon-pause{ display:none; }
.console__toggle[aria-pressed="true"] .icon-play{ display:inline; }
/* The rail reads as a live scan-status panel: every pass is steadily LIVE
   (the product is continuous monitoring); the active pass is highlighted and
   "scanning". Quieter than the screen — no per-row cards, a single inset
   surface that slides to the active row. */
.passes{
  position:relative; display:flex; flex-direction:column;
  list-style:none; margin:0; padding:0;
  border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  background:linear-gradient(180deg, var(--surface-1), var(--bg-base-2, var(--surface-1)));
  overflow:hidden;
}

/* each pass is a list item: header button + its always-rendered copy panel */
.pass-item{ position:relative; border-top:1px solid var(--border-subtle); }
.passes .pass-item:first-child{ border-top:0; }

.pass{
  position:relative; z-index:1; display:grid;
  /* keyboard focus / scrollIntoView clears the sticky header + pinned screen */
  scroll-margin-top:360px;
  grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:var(--space-4); width:100%; text-align:left; cursor:pointer;
  padding:var(--space-4) var(--space-5); background:none; border:0;
  color:var(--text-secondary);
  transition:color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.pass:hover{ color:var(--text-primary); background:rgba(255,255,255,0.015); }
.pass:focus-visible{ outline:none; box-shadow:inset var(--focus-ring-on-surface); border-radius:var(--radius-sm); }

/* ---- status cell: number that becomes a live scan indicator ---- */
.pass__status{
  position:relative; display:grid; place-items:center;
  width:1.75rem; height:1.75rem; flex:none;
}
.pass__num{
  font-family:var(--font-mono); font-size:var(--text-small); font-weight:600;
  color:var(--text-muted); transition:color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
/* quiet "live" dot for non-active passes; scanning ring for the active one */
.pass__indicator{
  position:absolute; inset:0; margin:auto; width:7px; height:7px; border-radius:50%;
  background:var(--text-faint, #5b6479); opacity:0; transform:scale(0.6);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

/* title over a quiet verb sub-label (stacked, like the stats data-tag) — keeps
   the whole right column free for the live result chip, no collision */
.pass__main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pass__verb{
  order:-1;
  font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--text-faint);
  transition:color var(--dur-base) var(--ease-out);
}
.pass__title{ font-size:var(--text-body-lg); font-weight:600; color:inherit; line-height:1.15; }

/* ---- live result chip (right): per-site watch result ---- */
.pass__result{
  display:flex; flex-direction:column; align-items:flex-end; gap:1px; flex:none;
  text-align:right; font-family:var(--font-mono);
}
.pass__result-state{
  font-size:9px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--text-faint, #5b6479); line-height:1;
  opacity:0; height:0; overflow:hidden; transition:opacity var(--dur-base) var(--ease-out);
}
.pass__result-value{
  font-size:var(--text-xs); font-weight:500; letter-spacing:0.02em;
  color:var(--text-muted); transition:color var(--dur-base) var(--ease-out);
}
@media (max-width:560px){ .pass__result{ display:none; } }

/* progress bar under each pass — fills while that pass is the active auto-cycle target */
.pass__bar{
  position:absolute; left:0; right:0; bottom:-1px; height:2px; grid-column:1 / -1;
  background:transparent; overflow:hidden;
}
.pass__bar-fill{
  display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
}

/* ---- ACTIVE pass: the row being scanned right now (visual + aria-current) ---- */
.pass-item.is-active .pass{ color:var(--text-primary); background:var(--surface-inset); }
.pass-item.is-active::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px; z-index:2;
  background:linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 30%, transparent));
}
.pass-item.is-active .pass__num{ opacity:0; }
.pass-item.is-active .pass__indicator{
  opacity:1; transform:scale(1); background:var(--accent);
  box-shadow:0 0 0 0 rgba(105,255,18,0.5); animation:pass-scan 2s var(--ease-out) infinite;
}
.pass-item.is-active .pass__verb{ color:var(--text-accent); }
.pass-item.is-active .pass__result-state{ opacity:1; height:auto; color:var(--text-accent); }
.pass-item.is-active .pass__result-value{ color:var(--text-primary); }
.pass-item.is-active .pass__bar{ background:var(--border-subtle); }
/* fill animates over the auto-cycle interval; paused/instant per JS + reduced-motion */
.pass-item.is-active .pass__bar-fill{
  animation:pass-fill var(--pass-dwell, 5200ms) linear forwards;
}
.console[data-paused="true"] .pass-item.is-active .pass__bar-fill{ animation-play-state:paused; }
.console[data-paused="true"] .pass-item.is-active .pass__indicator{ animation-play-state:paused; }
@keyframes pass-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes pass-scan{
  0%{ box-shadow:0 0 0 0 rgba(105,255,18,0.5); }
  70%{ box-shadow:0 0 0 7px rgba(105,255,18,0); }
  100%{ box-shadow:0 0 0 0 rgba(105,255,18,0); }
}

/* the copy panel — ALWAYS rendered (no click to read). Continues the active
   row's inset surface; the active panel reads as part of the lit row. */
.pass-panel{
  position:relative; z-index:1;
  padding:0 var(--space-5) var(--space-5) calc(1.75rem + var(--space-4) + var(--space-5));
}
.pass-item.is-active .pass-panel{ background:var(--surface-inset); }
.pass-item.is-active .pass-panel::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 30%, transparent), transparent);
}

/* ---- "scan sweep" reveal: panels animate open as the scan sweeps down on
   scroll-in, then STAY open (accumulate). Gated by .is-revealing on .passes so
   no-JS and reduced-motion render everything open by default. ~110ms stagger,
   completes in ~1s — fast, not tied to the 5.2s highlight loop. ---- */
.passes.is-revealing .pass-panel{
  overflow:hidden;
  max-height:0; opacity:0; transform:translateY(-6px);
  transition:max-height 420ms var(--ease-out), opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.passes.is-revealing .pass-item.is-revealed .pass-panel{
  max-height:360px; opacity:1; transform:none;
}

@media (prefers-reduced-motion: reduce){
  .screen-stage__scanline,
  .screen-chrome__pulse,
  .pass-item.is-active .pass__indicator{ animation:none; }
  .screen-stage__scanline{ opacity:0; }
  .pass-item.is-active .pass__bar-fill{ animation:none; transform:scaleX(1); }
  /* never gate content behind a disabled animation: all panels open + static */
  .passes.is-revealing .pass-panel{ max-height:none; opacity:1; transform:none; overflow:visible; transition:none; }
}
.pass__body{ color:var(--text-secondary); margin-bottom:var(--space-4); }

@media (max-width:560px){
  .pass-panel{ padding-left:var(--space-5); }
}

.feature-list{ display:flex; flex-direction:column; gap:var(--space-3); }
.feature-list li{
  display:flex; align-items:flex-start; gap:var(--space-3);
  font-size:var(--text-small); color:var(--text-muted); line-height:1.5;
}
.feature-list .tick{ margin-top:2px; }

/* ============================================================
   HOW IT WORKS — a custom-drawn defense field + the argument as text.
   The watch console above lists the operational passes; this section's job
   is the plugin-vs-infrastructure argument, carried by a bespoke canvas
   figure (js/defense-field.js): attack vectors rain down, BURST against a
   defended boundary, and our infrastructure layer scans on solid ground
   below. The figure is the hero; the "can't be switched off" claim and the
   Watch/Clean/Seal payoff remain as real text beneath it.
   ============================================================ */
.how__inner{ max-width:920px; margin-inline:auto; }
.how__inner .section-head{ margin-bottom:var(--space-7); }

/* ---- The figure: a framed canvas stage with overlaid zone labels. ------- */
.defense{ margin:0 0 var(--space-7); }
.defense__stage{
  position:relative; width:100%; aspect-ratio:4 / 5;   /* tall on mobile so the
    zones breathe: boundary at 40% leaves real room above AND below the line */
  border:1px solid var(--border-default); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--surface-inset), var(--bg-base-2));
  overflow:hidden;
}
@media (min-width:560px){ .defense__stage{ aspect-ratio:16 / 11; } }
@media (min-width:720px){ .defense__stage{ aspect-ratio:16 / 9; } }
.defense__canvas{ display:block; width:100%; height:100%; }

/* Zone annotations — mono labels sitting over the three regions of the canvas.
   The boundary fraction MUST match `bound` in js/defense-field.js; keeping it
   in one var stops the label drifting off the line when geometry changes. */
.defense__stage{ --defense-bound: 40%; }
.defense__label{
  position:absolute; z-index:2; pointer-events:none;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.14em;
}
.defense__label-k{ display:block; font-size:var(--text-xs); font-weight:500; }
.defense__label-v{ display:block; font-size:var(--text-xs); letter-spacing:0.08em; text-transform:none; }
.defense__label--surface{ top:var(--space-4); left:var(--space-5); color:var(--text-faint); }
.defense__label--surface .defense__label-v{ color:var(--text-faint); opacity:0.75; }
/* The boundary label names the defended line. It sits ON the line, so it needs
   a solid dark chip to stay legible — without it the glowing lime rule strikes
   through the text. The chip's matching box-shadow masks the line behind it. */
.defense__label--boundary{
  top:calc(var(--defense-bound) - 1.05em); right:var(--space-5);
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-xs); font-weight:600; color:var(--accent-2-text);
  letter-spacing:0.12em;
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill);
  background:var(--bg-base); border:1px solid var(--accent-border);
  box-shadow:0 0 0 4px var(--bg-base), 0 2px 8px rgba(0,0,0,0.5);
}
/* a small lime node on the chip, tying it to the line it labels */
.defense__label--boundary::before{
  content:""; width:5px; height:5px; border-radius:50%; flex:none;
  background:var(--accent); box-shadow:var(--glow-lime-sm);
}
.defense__label--floor{ bottom:var(--space-4); left:var(--space-5); color:var(--accent-2-text); }
.defense__label--floor .defense__label-v{ color:var(--text-muted); letter-spacing:0.06em; }
@media (max-width:519px){
  .defense__label-v{ display:none; }              /* keep mobile uncluttered */
  .defense__label--surface, .defense__label--floor{ left:var(--space-4); }
  /* Drop the boundary chip on mobile. A floating tag in the narrow attack
     airspace always read awkward; the burst lands ON the line and the floor
     label ("one layer below · out of reach") already carries the meaning. The
     figure's aria-label still states "reach ends here" for assistive tech. */
  .defense__label--boundary{ display:none; }
}

/* ---- The statement: argument (left) + payoff spec row (right/below). ----- */
.defense__statement{ display:grid; grid-template-columns:1fr; gap:var(--space-6); }
@media (min-width:760px){
  .defense__statement{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--space-8); align-items:start; }
}
.defense__eyebrow{
  display:flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent-2-text); margin-bottom:var(--space-3);
}
.defense__dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:var(--glow-lime-sm);
  animation:depth-pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes depth-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }
.defense__claim{
  margin:0; color:var(--text-secondary);
  font-size:var(--text-h5); line-height:1.5; font-family:var(--font-display); font-weight:400;
}
.defense__claim strong{ color:var(--text-primary); font-weight:600; }

/* Payoff roles — a crafted spec list. Each role carries a custom glyph mark
   (radar / clear / sealed-shield) echoing the brand's scan language, set in a
   soft inset chip. Watch + Clean stay quiet (muted marks); Seal is the visual
   climax — the only non-redundant role — and carries the lime + glow. */
.defense__roles{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.defense__role{
  position:relative; display:flex; align-items:center; gap:var(--space-4);
  padding:var(--space-4) 0;
}
.defense__role + .defense__role{ border-top:1px solid var(--border-subtle); }
.defense__role:first-child{ padding-top:0; }
.defense__role:last-child{ padding-bottom:0; }

/* The glyph chip — inset square, hairline border, muted icon by default. */
.defense__role-mark{
  flex:none; width:44px; height:44px; display:grid; place-items:center;
  border-radius:var(--radius-md);
  background:var(--surface-inset);
  border:1px solid var(--border-default);
  color:var(--text-muted);
  transition:color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.defense__role-mark svg{ width:22px; height:22px; display:block; }
.defense__mark-ring{ opacity:0.55; }
.defense__mark-sweep{ color:var(--accent); opacity:0.9; }
.defense__role:hover .defense__role-mark{ color:var(--text-secondary); border-color:var(--border-strong); }

.defense__role-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.defense__role-k{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--text-faint);
}
.defense__role-v{ font-size:var(--text-body); color:var(--text-primary); line-height:1.3; }

/* Seal — the hero. Lime mark, accent chip, soft glow; the climax of the row. */
.defense__role--key .defense__role-mark{
  background:var(--accent-soft);
  border-color:var(--accent-border);
  color:var(--accent);
  box-shadow:var(--glow-lime-sm);
}
.defense__role--key:hover .defense__role-mark{ border-color:var(--accent); }
.defense__role--key .defense__mark-shield{ fill:rgba(105,255,18,0.10); }
.defense__role--key .defense__role-k{ color:var(--accent-2-text); }

@media (prefers-reduced-motion: reduce){
  .defense__dot{ animation:none; }
}

/* ============================================================
   LIVE MONITORING — asymmetric: scan radar | heading + real numbers
   ============================================================ */
.monitor__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:center; }
@media (min-width:960px){
  .monitor__grid{ grid-template-columns:minmax(0,0.85fr) minmax(0,1fr); gap:var(--space-9); }
}
.monitor__viz{ position:relative; display:flex; flex-direction:column; align-items:center; }
.monitor__radar{
  position:relative; width:100%; max-width:340px; aspect-ratio:1; margin-inline:auto;
}
@media (min-width:960px){ .monitor__radar{ max-width:440px; } }
/* Soft atmosphere behind the dial so it sits on something instead of floating
   in the void — reuses the page's lime+teal radial-glow vocabulary. Bleeds
   well past the dial (it's decorative) and sits BEHIND the transparent canvas. */
.monitor__radar::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:-18%; border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(105,255,18,0.14), rgba(105,255,18,0.05) 45%, transparent 72%),
    radial-gradient(closest-side at 64% 70%, rgba(26,166,183,0.10), transparent 60%);
}
.scan-radar__canvas{ display:block; position:relative; z-index:1; }
/* "live" readout under the dial */
.monitor__readout{
  display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-4);
  font-family:var(--font-mono);
}
.monitor__pulse{
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:var(--glow-lime-sm); flex:none; animation:pulse 2s var(--ease-in-out) infinite;
}
@media (prefers-reduced-motion: reduce){ .monitor__pulse{ animation:none; } }
.monitor__readout-num{ font-size:var(--text-h5); font-weight:600; color:var(--text-primary); font-feature-settings:"tnum"; }
.monitor__readout-label{ font-size:var(--text-xs); letter-spacing:0.04em; text-transform:uppercase; color:var(--text-muted); }

/* Faulty-terminal CRT field behind the heading block. Low opacity + edge
   mask so it reads as atmosphere, never as noise behind the words. The
   heading + lede are lifted above it via z-index. */
.section-head--terminal{ position:relative; isolation:isolate; }
.section-head--terminal > .section-title,
.section-head--terminal > .section-lede{ position:relative; z-index:1; }
.section-head__terminal{
  position:absolute; z-index:0; pointer-events:none;
  /* bleed past the text box so the CRT field fills the heading area */
  inset:-1.25rem -1.5rem;
  opacity:0.16;
  /* fade the field out toward the edges so it never reads as a hard panel */
  -webkit-mask-image:radial-gradient(120% 140% at 30% 35%, #000 0%, #000 42%, transparent 78%);
  mask-image:radial-gradient(120% 140% at 30% 35%, #000 0%, #000 42%, transparent 78%);
}
.faulty-terminal__canvas{ display:block; width:100%; height:100%; }
@media (prefers-reduced-motion: reduce){
  /* static frame already; trim opacity further so it's pure texture */
  .section-head__terminal{ opacity:0.10; }
}

/* ============================================================
   STATS GRID (inside the monitor body)
   ============================================================ */
.stats-grid{
  display:grid; grid-template-columns:1fr;
  gap:var(--space-6) var(--space-6);
}
/* Hero stat (re-infection rate) full-width on top; the three supporting stats
   sit in an even row below — no lopsided 1-2-1. */
@media (min-width:480px){ .stats-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.stat--hero{ grid-column:1 / -1; padding-bottom:var(--space-5); border-bottom:1px solid var(--border-subtle); }
.stat--hero .stat__num{ font-size:clamp(3.25rem, 2rem + 5vw, 5rem); }
.stat--hero .stat__label{ max-width:38ch; }

/* Hairline-anchored stat (no box): a left rule with a lime cap, a mono data-tag,
   the big number, then the label. Reads as a technical readout, not a card. */
.stat{
  position:relative; padding-left:var(--space-5);
  border-left:1px solid var(--border-default);
}
.stat::before{
  content:""; position:absolute; left:-1px; top:0; width:2px; height:34px;
  background:linear-gradient(180deg, var(--accent), transparent);
  border-radius:2px;
}
.stat__tag{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--text-faint);
  display:block; margin-bottom:var(--space-3);
}
.stat__num{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem); line-height:0.95;
  font-feature-settings:"tnum"; letter-spacing:-0.03em;
  white-space:nowrap; min-width:0;
  color:var(--accent);
}
.stat__num .stat__sup{
  color:var(--text-secondary);
  font-size:0.45em; font-weight:500; vertical-align:0.55em; margin-left:0.05em;
  letter-spacing:0;
}
.stat__label{
  margin-top:var(--space-4); font-family:var(--font-mono);
  font-size:var(--text-xs); letter-spacing:0.04em; color:var(--text-muted);
  line-height:1.5; text-transform:uppercase; max-width:22ch;
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing-grid{
  display:grid; grid-template-columns:1fr; gap:var(--grid-gap);
  align-items:start;
}
@media (min-width:880px){ .pricing-grid{ grid-template-columns:repeat(3,1fr); } }

.price-card{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--border-default); border-radius:var(--radius-lg);
  padding:var(--space-6);
  /* Glassmorphic surface: a top-lit gradient + an inset hairline highlight build
     depth without a heavy drop-shadow (which reads dated / "floating"). */
  background:
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  transition:border-color var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  isolation:isolate;
}
/* Accent bloom on hover (restrained — no scale): a faint lime wash from the top. */
.price-card::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:radial-gradient(120% 80% at 50% -10%, var(--accent-soft), transparent 60%);
  opacity:0; transition:opacity var(--dur-slow) var(--ease-out);
}
.price-card:hover{ border-color:var(--border-strong); transform:translateY(-4px); }
@media (hover:hover){ .price-card:hover::before{ opacity:1; } }

.price-card--featured{
  border-color:var(--accent-border);
  background:linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 40px 80px -44px rgba(105,255,18,0.28);
}
/* Extra top room on the featured card so the "Most Popular" pill clears the
   content; the pill straddles the top edge. The lime border + glow + pill already
   carry the emphasis, so no extra accent line (avoid over-decoration). */
.price-card--featured{ padding-top:var(--space-7); }
@media (min-width:880px){ .price-card--featured{ transform:translateY(-12px); } }
@media (min-width:880px){ .price-card--featured:hover{ transform:translateY(-16px); } }

.price-card__pill{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%); z-index:2;
}
/* Solid lime badge w/ dark text for the featured pill — far higher contrast and a
   more "premium product badge" feel than a translucent tinted chip. */
.price-card__pill .badge{
  background:var(--accent); color:var(--text-on-accent);
  border-color:transparent; box-shadow:var(--glow-lime-sm); font-weight:600;
  padding:0.4rem 0.85rem;
}
.price-card__pill .badge .status-dot{ background:var(--text-on-accent); box-shadow:none; }
.price-card__name{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--text-accent);
  margin-bottom:var(--space-4);
}
.price-card__price{
  display:flex; align-items:baseline; gap:var(--space-2); flex-wrap:wrap;
  margin-bottom:var(--space-2);
}
.price-card__amount{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--text-h2); color:var(--text-primary);
  font-feature-settings:"tnum"; letter-spacing:-0.02em; line-height:1;
}
.price-card__suffix{ font-size:var(--text-small); color:var(--text-muted); }
.price-card__note{
  display:inline-block; font-family:var(--font-mono); font-size:var(--text-xs);
  color:var(--text-faint); text-transform:uppercase; letter-spacing:0.04em;
  margin-bottom:var(--space-2);
}
.price-card__for{ color:var(--text-muted); font-size:var(--text-small); margin-bottom:var(--space-5); }
.price-card .feature-list{ margin-bottom:var(--space-6); flex:1; }
.price-card .feature-list li{ color:var(--text-secondary); }

.pricing__note{
  margin-top:var(--space-7); text-align:center;
  font-size:var(--text-small); color:var(--text-muted);
}
.pricing__note a{ color:var(--text-accent); }
.pricing__note a:hover{ color:var(--text-link-hover); text-decoration:underline; }

/* ============================================================
   FAQ
   ============================================================ */
/* ---- FAQ as a primary-source artifact ----
   Not a stack of floating cards: a titled Q&A log (sibling to the incident
   ledger / status board) beside a sticky rail that carries the section head
   and the escalation CTA. The rail earns the column the old narrow layout
   left void. Mono case-IDs + category tags reuse the ledger's provenance
   grammar; rows are hairline-seamed, not bordered boxes. Reads with no JS. */
/* Three grid children — head, escalation CTA, log — placed by named areas so
   the reading order can differ between mobile and desktop without reordering
   the DOM. Mobile: head → log → CTA (the escalation reads AFTER the questions).
   Desktop: head + CTA stack in the left sticky column, log on the right. */
.faq-layout{
  display:grid; grid-template-columns:1fr; gap:var(--space-7);
  grid-template-areas:"head" "log" "esc";
}
.faq-rail{ grid-area:head; }
.faq-log{ grid-area:log; }
.faq-rail__esc{ grid-area:esc; }
@media (min-width:920px){
  .faq-layout{
    grid-template-columns:minmax(0,20rem) minmax(0,1fr);
    grid-template-areas:
      "head log"
      "esc  log";
    grid-template-rows:auto 1fr;
    gap:var(--space-6) clamp(2rem, 5vw, 4.5rem); align-items:start;
  }
}

/* Left-column rail (head). NOT sticky: the head and the escalation card share
   the left column but are separate grid rows, so pinning the head let the
   static esc card scroll up and paint over the transparent heading text. The
   whole artifact fits one viewport anyway, so there's nothing to keep in view —
   plain grid flow, no overlap. */
.faq-rail{ display:flex; flex-direction:column; gap:var(--space-6); }

/* Intro block — tuned for the narrow left column, NOT the global .section-head
   (whose 656px lede measure was sized for full-width heads and read cramped
   here). A mono label parallels the log's chrome label on the right — left
   says what the section is, right says what the artifact is — and a hairline
   under the heading gives structure without a second box. */
.faq-intro{ display:flex; flex-direction:column; }
.faq-intro__label{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint);
  margin-bottom:var(--space-4);
}
.faq-intro__title{
  font-size:var(--text-h3); line-height:1.15;
  padding-bottom:var(--space-5);
  border-bottom:1px solid var(--border-subtle);
  text-wrap:balance;
}
/* At the full h2 size each clause is wider than the ~320px left column, so the
   headline cascaded into four ragged lines. Stepping to h3 lets the two clauses
   sit one-per-line. The <br> forces the break on the comma — the semantic pause
   — for two near-even lines. Forced only on the wide desktop column; on mobile
   the column is narrower still, so drop the break and let it wrap naturally. */
.faq-intro__br{ display:none; }
@media (min-width:920px){
  .faq-intro__title{ white-space:nowrap; }
  .faq-intro__br{ display:inline; }
}
.faq-intro__lede{
  margin-top:var(--space-5);
  font-size:var(--text-body-lg); line-height:1.6; color:var(--text-muted);
  font-weight:300;
  max-width:34ch; text-wrap:pretty;
}
/* Escalation card — deliberately NOT another data-card. The log / ledger /
   status board are read-only surfaces (raised, surface-1→bg-base-2). This is
   the one invitation to act, so it joins the page's action family instead: a
   recessed inset base, an accent-soft wash, an accent-border hairline, and a
   lime rule down its leading edge (the eyebrow tick / [open] spine, promoted
   to the card's identity). Restraint over glow — the tint does the signalling. */
.faq-rail__esc{
  position:relative; overflow:hidden;
  padding:var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 3px);
  border:1px solid var(--accent-border); border-radius:var(--radius-md);
  background:
    linear-gradient(180deg, var(--accent-soft) 0%, transparent 70%),
    var(--surface-inset);
}
/* Lime leading edge — the card's "this is the action" marker. */
.faq-rail__esc::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--accent), transparent 85%);
}
.faq-rail__esc-q{
  font-family:var(--font-display); font-weight:600; font-size:var(--text-h6);
  color:var(--text-primary); margin-bottom:var(--space-3);
}
.faq-rail__esc-link{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-display); font-weight:700; font-size:var(--text-body);
  color:var(--text-accent);
}
.faq-rail__esc-link svg{
  width:18px; height:18px; flex:none;
  transition:transform var(--dur-base) var(--ease-out);
}
.faq-rail__esc-link:hover{ color:var(--accent-hover); }
.faq-rail__esc-link:hover svg{ transform:translateX(3px); }
.faq-rail__esc-note{
  display:block; margin-top:var(--space-3);
  color:var(--text-secondary); font-size:var(--text-small); line-height:1.5;
}

/* The log shell — one bordered artifact, rows divided by internal seams.
   Mirrors the ledger chrome so the two read as the same family. */
.faq-log{
  overflow:hidden;
  border:1px solid var(--border-default); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--surface-1) 0%, var(--bg-base-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), var(--shadow-sm);
}
.faq-log__chrome{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-5);
  border-bottom:1px solid var(--border-subtle); background:var(--surface-inset);
  font-family:var(--font-mono); font-size:var(--text-xs);
}
.faq-log__mark{
  width:9px; height:9px; flex:none; border-radius:2px;
  background:var(--accent); box-shadow:var(--glow-lime-sm);
}
.faq-log__title{
  color:var(--text-secondary); font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
}
.faq-log__meta{
  margin-left:auto; color:var(--text-faint); white-space:nowrap;
  letter-spacing:0.04em; text-transform:uppercase; font-size:10px;
}
@media (max-width:520px){ .faq-log__meta{ display:none; } }

/* Each row is a native <details>; seams are top borders, not card gaps. */
.faq-item{
  position:relative;
  border-top:1px solid var(--border-subtle);
  transition:background var(--dur-base) var(--ease-out);
}
.faq-item:first-of-type{ border-top:0; }
.faq-item:hover{ background:var(--surface-1); }
.faq-item[open]{ background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%); }
/* Lime spine on the open row — the ledger's "this one's active" marker. */
.faq-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
}
.faq-item[open]::before{ opacity:1; }
/* The through-line case (reinfection) — teal leading edge, as in the ledger. */
.faq-item--key[open]::before{ background:linear-gradient(180deg, var(--accent-2), transparent); }

.faq-item__q{
  display:grid; align-items:baseline; gap:var(--space-2) var(--space-5);
  grid-template-columns:1fr auto;
  padding:var(--space-4) var(--space-5); cursor:pointer; list-style:none;
}
.faq-item__q::-webkit-details-marker{ display:none; }
@media (min-width:560px){
  .faq-item__q{ grid-template-columns:9rem minmax(0,1fr) auto; }
}
/* The ancestor .faq-log has overflow:hidden, which clips an outset box-shadow
   focus ring. A real outline with a NEGATIVE offset draws inside the clip box,
   so the keyboard focus indicator stays visible. */
.faq-item__q:focus-visible{ outline:2px solid var(--accent-ring); outline-offset:-2px; border-radius:var(--radius-sm); }

/* Provenance stamp — mono case ID over a category tag, echoing the ledger. */
.faq-item__id{ grid-row:1; display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2); min-width:0; }
@media (min-width:560px){ .faq-item__id{ flex-direction:column; gap:3px; } }
.faq-item__case{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:600;
  letter-spacing:0.08em; color:var(--text-accent); font-variant-numeric:tabular-nums;
}
.faq-item__tag{
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint);
}
.faq-item__title{
  grid-column:1 / -1; min-width:0; overflow-wrap:anywhere;
  font-family:var(--font-display); font-weight:600; font-size:var(--text-h5);
  color:var(--text-primary); line-height:1.3;
}
@media (min-width:560px){ .faq-item__title{ grid-column:2; } }
.faq-item__icon{
  grid-row:1; grid-column:-1; flex:none; width:22px; height:22px;
  align-self:center; color:var(--text-accent);
  transition:transform var(--dur-base) var(--ease-out);
}
.faq-item[open] .faq-item__icon{ transform:rotate(45deg); }

.faq-item__a{
  color:var(--text-secondary); font-size:var(--text-body); line-height:1.65;
}
.faq-item__a p{ padding:0 var(--space-5) var(--space-5); max-width:64ch; }
@media (min-width:560px){ .faq-item__a p{ padding-left:calc(9rem + var(--space-5) + var(--space-5)); } }

/* Modern native-details reveal (Baseline 2025): animate the height + fade of
   ::details-content. interpolate-size lets height transition from 0 to auto.
   Older engines simply skip the animation — the <details> still opens. The
   --dur-* tokens zero out under prefers-reduced-motion, so this is motion-safe
   without a separate query. */
@supports (interpolate-size: allow-keywords){
  :root{ interpolate-size:allow-keywords; }
  .faq-item::details-content{
    height:0; overflow:hidden; opacity:0;
    transition:height var(--dur-slow) var(--ease-out),
               opacity var(--dur-slow) var(--ease-out),
               content-visibility var(--dur-slow) allow-discrete;
  }
  .faq-item[open]::details-content{ height:auto; opacity:1; }
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{
  position:relative; isolation:isolate; overflow:hidden;
  text-align:center;
}
.final-cta__bg{ position:absolute; inset:0; z-index:-2; background:#000; }
.final-cta__bg-fade{
  position:absolute; inset:0; z-index:-1;
  background:var(--grad-hero-vignette);
}
.final-cta__bg-fade::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--bg-base) 0%, transparent 30%, transparent 70%, var(--bg-base) 100%);
}
.final-cta__inner{
  position:relative; z-index:1; max-width:720px; margin-inline:auto;
  /* Mirror of the hero scrim — centered focal point since the CTA is centered.
     High 0.88 mid-stop keeps effective alpha >=0.85 across the copy; edges fade
     to transparent so the glitch stays visible as texture, not characters. */
  background:radial-gradient(120% 120% at 50% 50%,
    rgba(5,6,10,0.9) 0%,
    rgba(5,6,10,0.88) 55%,
    rgba(5,6,10,0.6) 80%,
    transparent 100%);
  padding:var(--space-7) var(--space-6);
  border-radius:var(--radius-xl);
}
/* Eyebrow is inline-flex; center its inner content to match the centered CTA
   (replaces a former inline justify-content style). */
.final-cta__inner .eyebrow{ justify-content:center; }
.final-cta__title{ font-size:var(--text-h1); margin-block:0 var(--space-5); text-wrap:balance; }
.final-cta__body{ font-size:var(--text-body-lg); color:var(--text-secondary); margin-bottom:var(--space-7); }
.final-cta__aside{ font-weight:300; font-style:italic; }
.final-cta__cta{ display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:center; }
.final-cta .proof-line{ justify-content:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  position:relative; isolation:isolate; overflow:hidden;
  border-top:1px solid var(--border-subtle);
  padding-block:var(--section-py) var(--space-6);
}
/* Footer glitch is a SUBTLE backdrop, not a third hero. The canvas itself is
   dimmed (opacity) so the matrix reads as faint texture, and the fade keeps a
   high opacity floor across the whole footer (text lives top-to-bottom here, so
   unlike the hero there is no "empty zone" to let the glitch run hot). */
.site-footer__bg{ position:absolute; inset:0; z-index:-2; background:#000; opacity:0.38; }
.site-footer__bg-fade{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(5,6,10,0.86) 0%, rgba(5,6,10,0.78) 55%, rgba(5,6,10,0.82) 100%);
}
.footer-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap:var(--space-7);
}
@media (min-width:680px){ .footer-grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--space-6); } }

.footer-brand__logo{ height:30px; width:auto; margin-bottom:var(--space-4); }
.footer-brand__tag{ color:var(--text-muted); font-size:var(--text-small); max-width:34ch; margin-bottom:var(--space-4); }

.footer-col__title{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint);
  margin-bottom:var(--space-4);
}
.footer-col__list{ display:flex; flex-direction:column; gap:var(--space-3); }
/* :not(.btn) so the link colour never bleeds onto a CTA in the list (the
   "Get Started" column holds lime buttons — grey text on lime fails AA). */
.footer-col__list a:not(.btn){ color:var(--text-muted); font-size:var(--text-small); }
.footer-col__list a:not(.btn):hover{ color:var(--text-primary); }
.footer-get a{ display:inline-flex; }

.footer-legal{
  position:relative; z-index:1;
  margin-top:var(--space-8); padding-top:var(--space-5);
  border-top:1px solid var(--border-subtle);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--space-3); font-size:var(--text-xs); color:var(--text-faint);
}
.footer-legal__links{ display:flex; gap:var(--space-5); }
.footer-legal__links a{ color:var(--text-faint); }
.footer-legal__links a:hover{ color:var(--text-muted); }
.footer-legal__guarantee{ width:100%; color:var(--text-faint); font-family:var(--font-mono); letter-spacing:0.04em; }
@media (min-width:680px){ .footer-legal__guarantee{ width:auto; order:1; } }

/* ============================================================
   SECTION DIVIDER (thin glitch strip)
   ============================================================ */
.divider{
  position:relative; height:64px; overflow:hidden; background:#000;
  border-block:1px solid var(--border-subtle);
}
.divider .glitch{ z-index:0; }
.divider__fade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, var(--bg-base) 0%, transparent 50%, var(--bg-base) 100%);
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:none; }
/* Staggered children: each successive item delays by --i * step so a group reads
   as one choreographed gesture rather than N independent pops. JS sets --i. */
.reveal-group > *{
  opacity:0; transform:translateY(18px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay:calc(var(--i, 0) * 70ms);
}
.reveal-group.is-visible > *{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-group > *{ opacity:1; transform:none; transition:none; }
}
/* No-JS fallback: the reveal is a JS-driven enhancement (an IntersectionObserver
   adds .is-visible). Without scripting there's nothing to un-hide the content, so
   rest it visible — otherwise reveal-wrapped sections render blank. Keeps the
   "reads with no JS" promise for the FAQ artifact and the rest of the page. */
@media (scripting: none){
  .reveal, .reveal-group > *{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   REVERSED WORDMARK
   The dark-on-light logo is recolored for the dark surface INSIDE the
   inline <symbol>'s own <style> (index.html). That is required: <use>
   clones the symbol into a shadow tree, so document rules here would not
   reach the cloned paths — only the symbol's own styles (and inherited
   custom properties) cross the boundary. The lime shield glyph
   (.wm-cls-21) and radial gradient are intentionally left untouched.
   ============================================================ */

/* ============================================================
   HERO STATS — six field metrics under the hero CTA. A mono readout
   row, not cards: hairline-separated cells that wrap responsively.
   ============================================================ */
/* Full-width readout band beneath the split, divided from it by a hairline. */
.hero-stats{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--space-5) var(--space-5);
  margin-top:clamp(2rem, 5vw, 4rem); padding-top:var(--space-6);
  border-top:1px solid var(--border-default);
}
/* Hidden on phones: the network-ops panel above already carries the key
   numbers, so the band read as stat-overload when everything stacked. Shown
   from the small-tablet breakpoint up, where there's room for it to breathe. */
@media (max-width:639px){
  .hero-stats{ display:none; }
}
@media (min-width:560px){ .hero-stats{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.hero-stat{ margin:0; position:relative; padding-left:var(--space-4); border-left:1px solid var(--border-default); }
.hero-stat::before{
  content:""; position:absolute; left:-1px; top:0; width:2px; height:20px;
  background:linear-gradient(180deg, var(--accent), transparent); border-radius:2px;
}
.hero-stat__num{
  font-family:var(--font-display); font-weight:600; line-height:1;
  font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing:-0.03em;
  font-feature-settings:"tnum"; color:var(--text-primary); white-space:nowrap;
}
/* The count-up JS rewrites the inner suffix span to .stat__sup, so style both. */
.hero-stat__num .hero-stat__sup,
.hero-stat__num .stat__sup{
  font-size:0.5em; font-weight:500; color:var(--text-secondary);
  vertical-align:0.5em; margin-left:0.04em; letter-spacing:0;
}
/* The re-infection rate is the brand's single best number — give its cap a
   little more presence (taller, glowing) so the eye lands there, without a
   heavier card treatment that would break the readout row. */
.hero-stat--accent .hero-stat__num{ color:var(--accent); }
.hero-stat--accent::before{ height:100%; box-shadow:var(--glow-lime-sm); }
.hero-stat__label{
  margin:var(--space-2) 0 0; font-family:var(--font-mono);
  font-size:var(--text-xs); letter-spacing:0.03em; color:var(--text-muted);
  line-height:1.4; text-transform:uppercase;
}

/* ============================================================
   HERO NETWORK-OPS PANEL — the hero's bespoke right-side object. Tells the
   AGGREGATE story (whole network at scale) so it never duplicates the per-site
   watch console further down. Live count tick + rolling event feed (js/netops.js);
   fully static + readable under reduced-motion / no-JS.
   ============================================================ */
.netops{
  position:relative; z-index:1;
  border:1px solid var(--border-default); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 40px 90px -56px rgba(0,0,0,0.85);
  overflow:hidden; isolation:isolate;
}
/* faint lime top-edge sheen so the panel reads "powered/live" */
.netops::before{
  content:""; position:absolute; inset:0 0 auto; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--accent-border), transparent);
}
.netops__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--border-subtle);
  font-family:var(--font-mono);
}
.netops__title{
  font-size:var(--text-xs); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-secondary);
}
.netops__live{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--text-xs); font-weight:600; letter-spacing:0.1em; color:var(--text-accent);
}
.netops__live-dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-border); animation:console-pulse 2.4s var(--ease-out) infinite;
}

/* primary aggregate figure */
.netops__primary{
  padding:var(--space-6) var(--space-5) var(--space-5);
  display:flex; flex-direction:column; gap:var(--space-2);
}
.netops__primary-num{
  font-family:var(--font-display); font-weight:600; letter-spacing:-0.03em; line-height:1;
  font-size:clamp(2.25rem, 1.6rem + 2.6vw, 3rem);
  font-feature-settings:"tnum"; color:var(--text-primary);
}
.netops__primary-label{
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:0.04em;
  text-transform:uppercase; color:var(--text-muted);
}

/* the two products, shown as armed channels */
.netops__meters{
  display:flex; flex-direction:column; gap:var(--space-3);
  padding:0 var(--space-5) var(--space-5);
}
.netops__meter{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--space-2) var(--space-3);
  font-family:var(--font-mono); font-size:var(--text-xs);
}
.netops__meter-k{ color:var(--text-secondary); letter-spacing:0.02em; }
.netops__meter-v{ color:var(--text-accent); letter-spacing:0.08em; text-transform:uppercase; font-weight:600; }
.netops__meter-bar{
  grid-column:1 / -1; height:3px; border-radius:2px; overflow:hidden;
  background:var(--surface-inset);
}
.netops__meter-fill{
  display:block; height:100%; width:var(--w,100%);
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
}

/* rolling event feed — the network living its life */
.netops__feed{
  list-style:none; margin:0; padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--border-subtle);
  display:flex; flex-direction:column; gap:var(--space-3);
}
.netops__event{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--space-3);
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted);
  opacity:0; transform:translateY(4px);
  animation:netops-in var(--dur-slow) var(--ease-out) forwards;
}
.netops .netops__event:nth-child(1){ animation-delay:.05s; }
.netops .netops__event:nth-child(2){ animation-delay:.20s; }
.netops .netops__event:nth-child(3){ animation-delay:.35s; }
.netops .netops__event:nth-child(4){ animation-delay:.50s; }
@keyframes netops-in{ to{ opacity:1; transform:none; } }
.netops__event-dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:var(--glow-lime-sm); flex:none;
}
.netops__event-dot--teal{ background:var(--accent-2-text); box-shadow:0 0 8px 1px rgba(61,214,232,0.4); }
.netops__event-txt{ color:var(--text-secondary); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.netops__event-t{ color:var(--text-faint); }

.netops__foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-3) var(--space-5);
  border-top:1px solid var(--border-subtle); background:var(--surface-inset);
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted);
}
.netops__foot-v{ color:var(--text-accent); font-weight:600; letter-spacing:0.06em; }

@media (prefers-reduced-motion: reduce){
  .netops__live-dot{ animation:none; }
  .netops__event{ animation:none; opacity:1; transform:none; }
}

/* ============================================================
   CODE ANALYZER — second product. Glitch backdrop (low-text zone framing
   the pipeline), headline numbers, then the eight-stage pipeline conveyor.
   ============================================================ */
/* Match the section tone to its neighbours (both .section--alt = --bg-base-2)
   so there's no flat-colour step at either seam, and feather the glitch edges to
   the SAME tone over a long ramp so the texture emerges/dissolves gradually
   instead of snapping on at a hard line. Edge-only feathering — the mid-section
   band keeps its glitch opacity (the stat labels' AA contrast was verified
   against that, leave it). */
.analyzer{ position:relative; isolation:isolate; overflow:hidden; background:var(--bg-base-2); }
.analyzer__bg{ position:absolute; inset:0; z-index:-2; background:#000; opacity:0.30; }
.analyzer__bg-fade{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, var(--bg-base-2) 0%, rgba(5,6,10,0.86) 22%, rgba(5,6,10,0.86) 78%, var(--bg-base-2) 100%);
}

/* De-boxed stat row: numbers + labels separated by hairlines, no cards — so the
   section opens with a clean band of figures, not a grid of boxes. Labels read
   in --text-secondary (not muted) since they sit directly over the live glitch
   backdrop here with no card scrim. */
.analyzer-stats{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--space-5) 0; margin-bottom:var(--section-gap);
}
@media (min-width:780px){ .analyzer-stats{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.analyzer-stat{ padding:var(--space-1) var(--space-5); }
/* Hairline separators between items; suppressed at each row's start. */
.analyzer-stat + .analyzer-stat{ border-left:1px solid var(--border-default); }
@media (max-width:779px){
  .analyzer-stat{ padding-inline:var(--space-4); }
  .analyzer-stat:nth-child(odd){ border-left:0; padding-left:0; }
}
@media (min-width:780px){ .analyzer-stat:first-child{ padding-left:0; } }
.analyzer-stat__num{
  display:block; font-family:var(--font-display); font-weight:600; line-height:1;
  font-size:clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing:-0.03em;
  font-feature-settings:"tnum"; color:var(--accent);
}
.analyzer-stat__num .analyzer-stat__sup,
.analyzer-stat__num .stat__sup{
  font-size:0.5em; font-weight:500; color:var(--text-secondary); vertical-align:0.5em; letter-spacing:0;
}
.analyzer-stat__num--text{ color:var(--accent-2-text); letter-spacing:0.02em; }
.analyzer-stat__label{
  display:block; margin-top:var(--space-3); font-size:var(--text-small);
  color:var(--text-secondary); line-height:1.5; max-width:22ch;
}

/* ============================================================
   The inspection: the figure IS the artifact under analysis.
   Left = a code editor panel holding a real-looking, clean-at-a-glance
   vibe-coded file with threats hidden in plain sight. Right = the findings
   ledger (the eight real analysis stages, the load-bearing content). A scan
   sweeps the code; threats surface in place and resolve their ledger stage;
   the verdict assembles. The code/sweep/threats are decorative (aria-hidden);
   the ledger carries all meaning and reads with no JS.
   ============================================================ */
/* ONE window: a single bordered frame, one title bar, and a body split into the
   source (left) and a docked analysis panel (right) by an internal seam. Reads as
   one tool — an editor with its problems pane — not two cards. */
.inspect{
  max-width:1080px; margin-inline:auto; overflow:hidden;
  border:1px solid var(--border-default); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--surface-1) 0%, var(--bg-base-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), var(--shadow-sm);
}

/* Shared window chrome — spans the full frame width. */
.inspect__chrome{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--border-subtle); background:var(--surface-inset);
  font-family:var(--font-mono); font-size:var(--text-xs);
}
.inspect__dots{ display:inline-flex; gap:6px; }
.inspect__dots i{ width:9px; height:9px; border-radius:50%; background:var(--surface-3); }
.inspect__file{ color:var(--text-secondary); letter-spacing:0.01em; }
.inspect__lang{
  margin-left:auto; color:var(--text-faint); letter-spacing:0.04em;
  text-transform:uppercase; font-size:10px;
}

/* Body: source | seam | analysis. Single column on mobile (seam becomes a
   horizontal divider via the panel's top border). */
.inspect__body{ display:grid; grid-template-columns:1fr; }
@media (min-width:900px){
  .inspect__body{ grid-template-columns:minmax(0,1.06fr) minmax(0,0.94fr); }
}

/* ---- LEFT: the source region (no own frame — it's part of the window) ---- */
.inspect__code{ position:relative; margin:0; overflow:hidden; min-width:0; }

/* The scan sweep — a band of light that travels down the code as it's analyzed.
   Positioned by JS via --scan-y (px from the top of the code body). */
.inspect__scan{
  position:absolute; left:0; right:0; top:0; height:46px; z-index:2;
  pointer-events:none; opacity:0; transform:translateY(var(--scan-y, 0));
  background:linear-gradient(180deg, transparent, var(--accent-soft) 45%, transparent);
  border-bottom:1px solid var(--accent-border);
  box-shadow:0 6px 18px -6px rgba(105,255,18,0.45);
}
.inspect.is-scanning .inspect__scan{ opacity:1; }

.inspect__pre{
  margin:0; padding:var(--space-4) var(--space-5) var(--space-5);
  overflow-x:auto; font-family:var(--font-mono);
  font-size:clamp(0.72rem, 0.66rem + 0.3vw, 0.8125rem); line-height:1.85;
  color:var(--text-secondary); -webkit-overflow-scrolling:touch;
}
.inspect__pre code{ display:block; white-space:pre; min-width:max-content; }
.cl{ display:block; }
/* Line-number gutter — quiet, non-selectable. */
.ln{
  display:inline-block; width:2.25em; margin-right:var(--space-3);
  text-align:right; color:var(--text-faint); opacity:0.5;
  user-select:none; -webkit-user-select:none;
}
/* Syntax tokens, mapped to the locked palette (no new colors). */
.inspect__pre .k{ color:var(--accent-2-text); }     /* keywords — teal   */
.inspect__pre .s{ color:var(--text-secondary); }    /* strings           */
.inspect__pre .fn{ color:var(--text-primary); }     /* calls             */
.inspect__pre .o{ color:var(--text-muted); }        /* operators         */
.inspect__pre .lit{ color:var(--text-muted); }      /* literals          */

/* A threat token: looks like ordinary code until the sweep reaches its line,
   then surfaces — highlighted, underlined, with a severity glow. */
.threat{
  position:relative; border-radius:var(--radius-xs);
  transition:background var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out),
             box-shadow var(--dur-slow) var(--ease-out);
}
.cl.is-flagged .threat{
  background:var(--accent-soft); color:var(--text-accent);
  box-shadow:0 0 0 1px var(--accent-border), 0 0 12px rgba(105,255,18,0.22);
}
/* The zero-width GLASSWORM glyph: invisible at rest, becomes a visible marker
   once surfaced — the headline's "hidden character" made literal. */
.threat--glyph{
  display:inline-block; width:0; overflow:hidden; vertical-align:middle;
  text-align:center; color:var(--text-on-accent); font-size:0.7em; font-weight:700;
  transition:width var(--dur-slow) var(--ease-out), background var(--dur-slow) var(--ease-out);
}
.cl.is-flagged .threat--glyph{
  width:1.1em; margin:0 1px; border-radius:var(--radius-xs);
  background:var(--accent); box-shadow:0 0 10px rgba(105,255,18,0.5);
}
.cl.is-flagged .threat--glyph::before{ content:"\200B"; }
.cl.is-flagged .threat--glyph::after{ content:"⌫"; }

/* ---- RIGHT: the findings ledger ---- */
/* Docked analysis panel — a region of the window, not a card. The seam is its
   leading edge: a left border on desktop, a top border when stacked on mobile.
   A faint surface tint sets it apart from the darker code pane. */
.inspect__panel{
  display:flex; flex-direction:column; gap:var(--space-2);
  padding:var(--space-5);
  border-top:1px solid var(--border-default);
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
}
@media (min-width:900px){
  .inspect__panel{ border-top:0; border-left:1px solid var(--border-default); }
}
.inspect__panel-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3);
  margin:0 0 var(--space-2); padding-bottom:var(--space-3);
  border-bottom:1px solid var(--border-subtle);
}
.inspect__panel-title{ font-family:var(--font-display); font-weight:600; font-size:var(--text-h6); color:var(--text-primary); letter-spacing:0.01em; }
.inspect__progress{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-faint); }
.inspect__progress-n{ font-variant-numeric:tabular-nums; color:var(--text-accent); }

.inspect__stages{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.inspect-stage{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:var(--space-3);
  padding:var(--space-3) 0; border-top:1px solid var(--border-subtle);
}
.inspect-stage:first-child{ border-top:0; }
.inspect-stage__num{
  flex:none; width:1.625rem; height:1.625rem; display:grid; place-items:center;
  border-radius:var(--radius-sm); background:var(--surface-inset); border:1px solid var(--border-strong);
  font-family:var(--font-mono); font-size:10px; font-weight:600; color:var(--text-muted);
  transition:color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.inspect-stage__body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.inspect-stage__head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-2) var(--space-3); }
.inspect-stage__title{ font-family:var(--font-display); font-weight:600; font-size:var(--text-h6); color:var(--text-primary); line-height:1.3; }
.inspect-stage__desc{ font-size:var(--text-small); color:var(--text-muted); line-height:1.45; }
.inspect-stage__find{
  flex:none; font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:0.03em; line-height:1; padding:0.32em 0.5em; border-radius:var(--radius-pill);
  border:1px solid var(--border-subtle); color:var(--text-faint); background:var(--surface-inset);
  opacity:0; transform:translateY(-2px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out),
             color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.inspect-stage__find-n{ font-variant-numeric:tabular-nums; }

/* Resolved state — set by JS as the sweep surfaces each stage's threat. */
.inspect-stage.is-lit .inspect-stage__num{
  color:var(--text-on-accent); background:var(--accent); border-color:var(--accent);
  box-shadow:var(--glow-lime-sm);
}
.inspect-stage.is-lit[data-find="verify"] .inspect-stage__num{
  color:var(--bg-base); background:var(--accent-2-text); border-color:var(--accent-2-text);
  box-shadow:0 0 10px rgba(61,214,232,0.35);
}
.inspect-stage.is-lit .inspect-stage__find{ opacity:1; transform:none; }
.inspect-stage.is-lit[data-find="hit"] .inspect-stage__find{
  color:var(--text-accent); border-color:var(--accent-border); background:var(--accent-soft);
}
.inspect-stage.is-lit[data-find="clean"] .inspect-stage__find{ color:var(--text-muted); }
.inspect-stage.is-lit[data-find="verify"] .inspect-stage__find{
  color:var(--accent-2-text); border-color:rgba(61,214,232,0.32);
}

/* Verdict — assembles once every stage is resolved. */
.inspect__verdict{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:var(--space-3); row-gap:1px; align-items:center;
  margin:var(--space-3) 0 0; padding:var(--space-4);
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  background:var(--surface-inset); font-family:var(--font-mono);
  transition:border-color var(--dur-slow) var(--ease-out), background var(--dur-slow) var(--ease-out),
             box-shadow var(--dur-slow) var(--ease-out);
}
.inspect__verdict-icon{
  grid-row:1 / 3; width:1.75rem; height:1.75rem; border-radius:50%;
  border:1px solid var(--border-strong); background:var(--surface-2);
  position:relative; transition:background var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
.inspect__verdict-text{ font-size:var(--text-small); font-weight:600; color:var(--text-muted); letter-spacing:0.01em; transition:color var(--dur-slow) var(--ease-out); }
.inspect__verdict-sub{ font-size:10px; color:var(--text-faint); letter-spacing:0.04em; }
.inspect.is-complete .inspect__verdict{
  border-color:var(--accent-border); background:var(--accent-soft); box-shadow:var(--glow-lime-sm);
}
.inspect.is-complete .inspect__verdict-text{ color:var(--text-accent); }
.inspect.is-complete .inspect__verdict-icon{ background:var(--accent); border-color:var(--accent); }
.inspect.is-complete .inspect__verdict-icon::after{
  content:""; position:absolute; left:36%; top:18%; width:24%; height:48%;
  border:solid var(--text-on-accent); border-width:0 2px 2px 0; transform:rotate(45deg);
}

.analyzer__cta{ display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:center; margin-top:var(--section-gap); }

/* Reduced-motion: everything settles resolved immediately (JS reveals all; see
   pipeline.js), threats surfaced, no travelling sweep. */
@media (prefers-reduced-motion: reduce){
  .inspect-stage__num, .inspect-stage__find, .threat, .threat--glyph,
  .inspect__verdict, .inspect__verdict-text, .inspect__verdict-icon{ transition:none; }
  .inspect__scan{ display:none; }
}

/* ============================================================
   WHY THIS IS DIFFERENT + INCIDENT RESPONSE
   ============================================================ */
.link-arrow{
  display:inline-flex; align-items:center; gap:var(--space-2); margin-top:var(--space-5);
  font-family:var(--font-mono); font-size:var(--text-small); font-weight:500;
  letter-spacing:0.02em; color:var(--text-accent);
}
.link-arrow svg{ transition:transform var(--dur-base) var(--ease-out); }
.link-arrow:hover{ color:var(--text-link-hover); }
.link-arrow:hover svg{ transform:translate(2px,-2px); }
.link-arrow:focus-visible{ box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }

/* The incident ledger — one primary-source artifact, not four cards. A titled
   chrome strip over rows divided by internal seams; each row is columnar
   (case ID + class | description | status) so the full width is earned and the
   prose never runs past a readable measure. Static by design: no scan, no
   counters, no rAF — the restraint is what distinguishes it from the animated
   analyzer above and the scan-radar stats below. Reads fully with no JS. */
.ledger{
  max-width:1080px; margin-inline:auto; overflow:hidden;
  border:1px solid var(--border-default); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--surface-1) 0%, var(--bg-base-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), var(--shadow-sm);
}

/* Titled chrome strip — mirrors the analyzer window's chrome so the two read as
   siblings, but carries a label instead of a filename. */
.ledger__chrome{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-5);
  border-bottom:1px solid var(--border-subtle); background:var(--surface-inset);
  font-family:var(--font-mono); font-size:var(--text-xs);
}
.ledger__mark{
  width:9px; height:9px; flex:none; border-radius:2px;
  background:var(--accent-2); box-shadow:0 0 8px rgba(26,166,183,0.55);
}
.ledger__title{
  color:var(--text-secondary); font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
}
.ledger__meta{
  margin-left:auto; color:var(--text-faint); white-space:nowrap;
  letter-spacing:0.04em; text-transform:uppercase; font-size:10px;
}
/* Below the row-columnar breakpoint the chrome can crowd; drop the meta so the
   label keeps one clean line. */
@media (max-width:520px){ .ledger__meta{ display:none; } }

.ledger__rows{ list-style:none; margin:0; padding:0; }

/* Each row: case ID column | description | status. Columnar on desktop; the id
   and status collapse onto stacked lines on mobile. Seams are top borders. */
.ledger-row{
  display:grid; grid-template-columns:1fr; gap:var(--space-2) var(--space-5);
  padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--border-subtle);
  transition:background var(--dur-base) var(--ease-out);
}
.ledger-row:first-child{ border-top:0; }
.ledger-row:hover{ background:var(--surface-1); }
@media (min-width:780px){
  .ledger-row{
    grid-template-columns:11rem minmax(0,1fr) 7.5rem;
    align-items:baseline; gap:var(--space-5);
  }
}

/* Case ID + threat class — the provenance stamp. */
.ledger-row__id{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ledger-row__case{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:600;
  letter-spacing:0.08em; color:var(--accent-2-text);
  font-variant-numeric:tabular-nums;
}
.ledger-row__class{
  font-family:var(--font-display); font-size:var(--text-small); font-weight:600;
  color:var(--text-primary); letter-spacing:0.01em;
}

.ledger-row__desc{
  margin:0; color:var(--text-secondary);
  font-size:var(--text-body); line-height:1.55;
}

/* Status — a neutral mono pill; resolution, not severity. Stays in the
   two-accent palette (neutral by default; teal accent on hover only). */
.ledger-row__status{
  justify-self:start; align-self:center;
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; line-height:1;
  padding:0.42em 0.6em; border-radius:var(--radius-pill);
  border:1px solid var(--border-subtle); background:var(--surface-inset);
  color:var(--text-muted); white-space:nowrap;
}
@media (min-width:780px){ .ledger-row__status{ justify-self:end; } }

/* The headline case — GLASSWORM ties back to the analyzer's "hidden character".
   A teal leading edge marks it as the through-line, not a louder card. */
.ledger-row--key{ position:relative; }
.ledger-row--key::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--accent-2), transparent);
}
.ledger-row--key .ledger-row__status{
  color:var(--accent-2-text); border-color:rgba(61,214,232,0.32);
}

/* ============================================================
   HOSTING PARTNERS
   ============================================================ */
/* Partner band — the light, horizontal beat between the heavier bordered
   sections. NOT a framed panel: a trusted-by wordmark wall bracketed by hairline
   rules, deliberately open so it contrasts with the incident-ledger row-panel
   above. Left-aligned header pairs with the wall and breaks the all-centered run
   of neighbouring sections. Static apart from the existing status pulse. */
.partner-band .section-head{ margin-bottom:var(--space-7); }

/* The wall: real platform wordmarks in a single open row (wrapping as needed),
   divided by thin vertical rules and topped/tailed by hairlines — a band, not a
   grid of cards. Each platform shows its live state beneath the name. */
.partner-wall{
  list-style:none; margin:0; padding:var(--space-6) 0;
  display:flex; flex-wrap:wrap; align-items:stretch;
  gap:var(--space-5) 0;
  border-top:1px solid var(--border-default);
  border-bottom:1px solid var(--border-default);
}
.platform{
  flex:1 1 auto; min-width:8.5rem;
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-5); text-align:center;
}
/* Vertical divider rules between platforms (not after the last). */
.platform + .platform{ border-left:1px solid var(--border-subtle); }
.platform__name{
  font-family:var(--font-display); font-weight:600; font-size:var(--text-h5);
  color:var(--text-secondary); letter-spacing:0.01em;
  transition:color var(--dur-base) var(--ease-out);
}
.platform:hover .platform__name{ color:var(--text-primary); }
.platform__state{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--text-muted);
}
.platform__state--active{ color:var(--text-accent); }
.platform__state--available{ color:var(--accent-2-text); }
.platform__dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:var(--glow-lime-sm); animation:pulse 2.4s var(--ease-in-out) infinite;
}
@media (prefers-reduced-motion: reduce){ .platform__dot{ animation:none; } }
/* On narrow widths a wrapping horizontal wall scatters and strands the odd item.
   Rotate the band signature vertical instead: a single tight column where each
   platform is one row (name left · state right) divided by HORIZONTAL hairlines,
   still bracketed top and bottom. Reads as one cohesive ruled band, no orphan. */
@media (max-width:620px){
  .partner-wall{ flex-direction:column; padding:0; gap:0; }
  .platform{
    flex:none; width:100%;
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:var(--space-4); padding:var(--space-4) var(--space-1); text-align:left;
  }
  .platform + .platform{ border-left:0; border-top:1px solid var(--border-subtle); }
}

/* The API / white-label offer — one quiet line, set apart from the wall so it
   never reads as a sixth partner. */
.partner-band__offer{
  margin-top:var(--space-6); color:var(--text-muted);
  font-size:var(--text-body); line-height:1.6;
}
.link-arrow--inline{ margin-top:0; }

/* ============================================================
   PRICING — two-product duo override
   ============================================================ */
@media (min-width:880px){
  .pricing-grid--duo{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:840px; margin-inline:auto; }
  /* The featured (WordPress) card no longer lifts above a third card — keep the
     duo level so the two products read as co-equal. */
  .pricing-grid--duo .price-card--featured{ transform:none; }
  .pricing-grid--duo .price-card--featured:hover{ transform:translateY(-4px); }
}

/* ============================================================
   BLOG TEASER
   ============================================================ */
.blog__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--space-4); max-width:none; margin-bottom:var(--space-7);
}
.post-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:var(--grid-gap);
}
@media (min-width:780px){ .post-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.post{
  display:flex; flex-direction:column; gap:var(--space-3); height:100%;
  padding:var(--space-6); border:1px solid var(--border-default); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  transition:border-color var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.post:hover{ border-color:var(--accent-border); transform:translateY(-4px); }
.post:focus-visible{ box-shadow:var(--focus-ring); }
.post__tag{
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--text-accent);
}
.post__title{ font-size:var(--text-h5); color:var(--text-primary); line-height:1.3; }
.post:hover .post__title{ color:var(--text-accent); }
.post__excerpt{ font-size:var(--text-small); color:var(--text-muted); line-height:1.55; flex:1; }
.post__meta{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-faint); letter-spacing:0.04em; }