/* ═══════════════════════════════════════════════════════════════════
   MALCARE — THE OPEN SECURITY PERIMETER
   Prime-Intellect design language: squared, mono, cell-grids, FIG panels.
   Dark only. Blue is the system. Red is the threat.
   ═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }

:root {
  --blue-100:#DBEAFE; --blue-200:#BFDBFE; --blue-300:#93C5FD; --blue-400:#60A5FA;
  --blue-500:#3B82F6; --blue-600:#2563EB; --blue-700:#1D4ED8; --blue-900:#1E3A8A; --blue-950:#172554;
  --red-300:#FCB4A2; --red-400:#F97150; --red-500:#F5502E; --red-600:#E23A18;

  --canvas:#02050C;        /* blue, but a step off black */
  --panel:#050A15;
  --panel-2:#08101F;
  --ink:#EDF1FA;
  --ink-2:#94A1BF;
  /* tertiary ink carries mono labels, metas and captions at 8.5–16px. It must
     clear 4.5:1 against every surface it lands on — --canvas #02050C (4.89:1),
     --panel #050A15 (5.11:1) and --panel-2 #08101F (4.89:1) — because none of
     that text is large-scale. The former #5B6785 sat at 3.5:1 and failed 1.4.3
     on ~250 nodes across every route. Keep any replacement above #6F7C9E. */
  --ink-3:#7481A4;
  --para:rgba(255,255,255,0.5);   /* supporting paragraphs — neutral white, no blue cast */
  --line:rgba(255,255,255,0.08);
  --line-2:rgba(255,255,255,0.15);
  --line-blue:rgba(96,165,250,0.28);

  --sans:'Geist',-apple-system,sans-serif;
  --mono:'Space Grotesk','Geist',-apple-system,sans-serif;  /* labels, tags & data — unified with the CTA font */
  --cta:'Space Grotesk','Geist',-apple-system,sans-serif;   /* buttons & CTAs — complements Geist */
  --ease:cubic-bezier(0.32,0.72,0,1);
  --maxw:1720px;
  --gut:clamp(16px,2.2vw,34px);   /* one grid cell of margin, no more */
  --pad-out:clamp(20px,2.6vw,44px);   /* content → page rail */
  --pad-in:clamp(30px,4vw,64px);      /* content → column rule */
  --nav-h:62px;                       /* fixed nav height — every sticky offset hangs off it */

  /* semantic status — the only sanctioned status colors; never re-introduce literals */
  --ok:#6EE7B7;             --ok-bright:#34D399;
  --ok-border:rgba(52,211,153,0.35);     --ok-fill:rgba(16,185,129,0.07);
  --bad:var(--red-300);
  --bad-border:rgba(245,80,46,0.4);      --bad-fill:rgba(226,58,24,0.08);
  --warn:#FDBA74;           --warn-bright:#FCD34D;   --warn-bar:#F59E0B;
  --warn-border:rgba(251,146,60,0.35);   --warn-fill:rgba(234,88,12,0.07);
  --info:var(--blue-300);
  --info-border:rgba(96,165,250,0.35);   --info-fill:rgba(37,99,235,0.08);
  --sev-med:#64748B;
  --sev-med-border:rgba(100,116,139,0.30); --sev-med-fill:rgba(100,116,139,0.12);
}

::selection { background: rgba(37,99,235,0.5); color:#fff; }

body {
  font-family: var(--sans);
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
}

/* Text for screen readers only — kept in the accessibility tree and out of the
   visual design. Never use display:none here; that removes it from both. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ─── FOCUS ─────────────────────────────────────────────────────────────────
   One authored ring for the whole site. Without this the only indicator is the
   UA default, whose colour resolves near-black against our near-black canvas.
   :focus-visible keeps it off pointer interactions, so the visual language is
   unchanged for mouse users. Any component overriding this must replace the
   ring, never merely remove it (WCAG 2.4.7 / 1.4.11). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 2px;
  border-radius: 2px;
}
/* On the light figure panels the blue ring loses contrast against white, so
   those surfaces get the ink ring instead. */
:where(.light-panel, .rc-card, .legal-table) :where(a, button, [tabindex]):focus-visible {
  outline-color: #1D4ED8;
}

/* ─── SKIP LINK — 2.4.1 Bypass Blocks ───────────────────────────────────────
   The header ships ~30 focusable links before the first word of content. */
.skip-link {
  position: fixed; top: 0; left: 0; z-index: 3000;
  transform: translateY(-120%);
  padding: 13px 20px;
  background: var(--blue-600); color: #fff;
  font-family: var(--cta); font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  text-decoration: none; border-radius: 0 0 4px 0;
}
.skip-link:focus-visible,
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: -5px; }
@media (prefers-reduced-motion: no-preference) { .skip-link { transition: transform .18s var(--ease); } }

/* the skip target is scrolled to under a fixed 62px header */
/* every in-page anchor target clears the fixed nav, not just the skip target */
:where([id]) { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ─── section parallax fade — each section fades + drifts in on enter, out on exit (repeating) ─── */
.section-reveal { opacity: 0; transform: translateY(54px);
  transition: opacity .9s var(--ease), transform 1.05s var(--ease); }
.section-reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .section-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ─── atmosphere ─── */
.grain { position: fixed; inset:-50%; z-index:2000; pointer-events:none; opacity:0.018;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* matt mesh: dark blue almost everywhere, red only as a hue in the corners */
/* flat: barely-there hues, no haze */
.mesh { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%,  rgba(23,37,84,0.30) 0%, transparent 68%),
    radial-gradient(ellipse 60% 50% at 88% 72%, rgba(127,29,29,0.055) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 10% 88%, rgba(88,17,17,0.045) 0%, transparent 62%);
}

main { position: relative; z-index: 2; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
section { position: relative; }
.rule { border-top: 1px solid var(--line); }

/* ─── the line grid: rails that run unbroken from the perimeter to the footer ─── */
.railed { position: relative; }
.rails { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.rails-in { position: relative; height: 100%; max-width: var(--maxw); margin: 0 auto; }
.rails-in i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.rails-in i.l { left: var(--gut); }
.rails-in i.r { right: var(--gut); }
/* edges only — each grid now splits at its own ratio, so a shared centre rail would lie */

/* ─── type ─── */
.mono-xs { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.h1 {
  font-size: clamp(42px,5.6vw,84px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; color: var(--ink);
}
.h2 { font-size: clamp(30px,3.6vw,54px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.06; }
.h2 .dim { color: var(--ink-3); }
.h2 .blue { color: var(--blue-400); }
.h2 .red { color: var(--red-500); }
.sub { font-size: clamp(15px,1.35vw,17.5px); color: var(--para); line-height: 1.65; font-weight: 400; }
/* Last-resort default for any link the design has not spoken for. Without it,
   such a link falls through to the browser's #0000EE — in the nav, the footer,
   or anywhere a component styles only the anchor's children. Wrapped in
   :where() so it carries ZERO specificity: every other rule still wins.
   Do not remove the :where(). */
:where(a:not(.btn)) {
  color: var(--blue-300);
  text-decoration-color: rgba(147,197,253,0.34);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
:where(a:not(.btn):hover) { color: var(--blue-100); text-decoration-color: currentColor; }

/* Inline prose links use the system blue instead of the browser's default link
   color. Dedicated buttons and component links own their own treatment. */
main :where(p, li) a:not(.btn) {
  color: var(--blue-300);
  text-decoration: underline;
  text-decoration-color: rgba(147,197,253,0.34);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
main :where(p, li) a:not(.btn):hover {
  color: var(--blue-100);
  text-decoration-color: currentColor;
}
.sec-head { padding: clamp(56px,7vw,104px) var(--pad-out) clamp(34px,4.5vw,60px); border-bottom: 1px solid var(--line); }
.sec-head .h2 { max-width: var(--editorial-heading-max, 800px); }
.sec-head .sub { margin-top: 18px; max-width: 660px; font-size: clamp(16px,1.5vw,19px); color: var(--para); line-height: 1.72; }
.sec-head.has-eyebrow .h2 { margin-top: 22px; }
.sec-head.is-center { text-align: center; }
.sec-head.is-center .h2,
.sec-head.is-center .sub { margin-left: auto; margin-right: auto; }
.sec-head.is-right { text-align: right; }
.sec-head.is-right .h2,
.sec-head.is-right .sub { margin-left: auto; }
/* compare section: right-align the heading + supporting text to the container */
#compare .sec-head { text-align: right; }
#compare .sec-head .h2, #compare .sec-head .sub { margin-left: auto; }

/* ─── reveal hooks ─── */
/* Hidden-until-revealed is an enhancement, not the default: it applies only
   when JS runs (html.js is stamped by an inline head script) and the animation
   engine loaded (html.no-anim is added when GSAP is missing). With neither,
   content simply shows — a no-JS visitor must never get blank sections. */
html.js:not(.no-anim) .rv { opacity: 0; transform: translateY(46px); will-change: transform,opacity; }
html.js:not(.no-anim) .rv-scale { opacity: 0; transform: scale(0.94); will-change: transform,opacity; }

/* ─── buttons: PI rectangles, mono uppercase ─── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--cta); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 13px 22px; text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; border-radius: 0;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  position: relative;
}
.btn .ar { font-family: var(--cta); transition: transform .18s var(--ease); }
.btn .btn-ico { width: 15px; height: 15px; flex-shrink: 0; }
.btn .nav-sep { opacity: 0.4; font-weight: 400; margin: 0 1px; }
.btn:hover .ar { transform: translateX(3px); }
.btn-solid { background: var(--ink); color: #08090B; border-color: var(--ink); }
.btn-solid:hover { background: var(--blue-100); border-color: var(--blue-100); }
.btn-line { background: rgba(11,13,16,0.6); color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { border-color: var(--blue-400); color: var(--blue-200); }
.btn-line.alarm { color: var(--red-400); border-color: var(--bad-border); }
.btn-line.alarm:hover { color: var(--red-300); border-color: var(--red-400); }
/* section CTAs echo the nav chips — outlined, sized to their label */
.dive-btn {
  align-self: flex-start; margin-top: 28px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 16px; border: 1px solid var(--line);
  background: rgba(16,19,24,0.5); color: var(--ink-2); text-decoration: none;
  font-family: var(--cta); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.dive-btn:hover { color: var(--ink); border-color: var(--line-2); background: var(--panel-2); }
.dive-btn .ar { transition: transform .18s var(--ease); }
.dive-btn:hover .ar { transform: translateX(3px); }

/* ─── panels: squared, corner ticks, FIG chips ─── */
.panel {
  position: relative; background: var(--panel); border: 1px solid var(--line-2);
}
/* corner brackets — two hairlines meeting, not a glyph */
.corners::before, .corners::after,
.corners .ck::before, .corners .ck::after {
  content: ''; position: absolute; z-index: 6; width: 10px; height: 10px; pointer-events: none;
  border-color: var(--line-blue); border-style: solid; border-width: 0;
}
.corners::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.corners::after  { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.corners .ck::before { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.corners .ck::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 20px; border-bottom: 1px solid var(--line);
}
.panel-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 9px; }
.panel-title .pulse { width: 6px; height: 6px; background: var(--blue-400); box-shadow: 0 0 8px rgba(96,165,250,0.9); animation: blink 1.8s infinite; }
.panel-title .pulse.red { background: var(--red-500); box-shadow: 0 0 8px rgba(245,80,46,0.9); }
.panel-meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.06em; }
.panel-meta b { color: var(--blue-300); font-weight: 600; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* chips */
.chip { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border: 1px solid; }
.chip.ok   { color:var(--ok); border-color:var(--ok-border); background:var(--ok-fill); }
.chip.bad  { color:var(--bad); border-color:var(--bad-border); background:var(--bad-fill); }
.chip.warn { color:var(--warn); border-color:var(--warn-border); background:var(--warn-fill); }
.chip.info { color:var(--info); border-color:var(--info-border); background:var(--info-fill); }

/* ═══ NAV ═══ */
.nav-wrapper { position: fixed; top:0; left:0; right:0; z-index:1000; background: rgba(7,8,9,0.55);
  border-bottom: 1px solid transparent; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: background .3s, border-color .3s; }
.nav-wrapper.scrolled { background: rgba(7,8,9,0.85); border-bottom-color: var(--line); }
.nav { position: relative; max-width: var(--maxw); margin: 0 auto; height: var(--nav-h); padding: 0 var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.nav-logo { display: flex; align-items: center; min-height: 24px; text-decoration: none; flex-shrink: 0; }
.nav-logo-icon { height: 21px; width: auto; display: block; }
.nav-center { position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: stretch; gap: 4px; list-style: none; }
.nav-center > li { position: relative; display: flex; }
.nav-center > li.resources-li, .nav-center > li.features-li { position: static; }
/* the three dropdown triggers are <button>s (see HomeHeader.astro), the rest
   are <a>s — both wear the same chip, so reset the button UA styling here */
.nav-center a.nav-item, .nav-center button.nav-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 13px; border-radius: 0;
  color: var(--ink-2); text-decoration: none;
  font-family: var(--sans); font-size: 14.5px; font-weight: 450; letter-spacing: -0.01em;
  transition: color .18s, background .18s;
  background: none; border: 0; cursor: pointer; line-height: inherit;
}
.nav-center a.nav-item:hover, .nav-center button.nav-item:hover { color: var(--ink); background: rgba(255,255,255,0.055); }
.nav-center > li.nav-open > a.nav-item,
.nav-center > li.nav-open > button.nav-item { color: var(--blue-400); background: rgba(96,165,250,0.12); }
.nav-caret { width: 12px; height: 12px; opacity: .65; transition: transform .22s var(--ease); }
.nav-center > li.nav-open .nav-caret { transform: rotate(180deg); opacity: 1; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-live { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-3); }
.nav-live b { color: var(--red-400); font-weight: 600; }
.nav-live .pulse { width: 5px; height: 5px; background: var(--red-500); box-shadow: 0 0 8px rgba(245,80,46,0.9); animation: blink 1.6s infinite; }
.nav-right .btn { padding: 9px 16px; font-size: 11px; }

/* hamburger + mobile slide-in drawer */
.nav-burger { display: none; width: 42px; height: 42px; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--line-2); border-radius: 0; background: rgba(255,255,255,0.04); cursor: pointer; }
.nav-burger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .28s var(--ease), opacity .2s var(--ease); }
.nav-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.m-nav-backdrop { position: fixed; inset: 0; z-index: 1002; background: rgba(2,5,12,0.6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); }
.m-nav-backdrop.open { opacity: 1; visibility: visible; }
.m-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1003; width: min(360px, 86vw);
  background: #0A0D13; border-left: 1px solid var(--line-2); box-shadow: -30px 0 80px rgba(0,0,0,0.55);
  display: flex; flex-direction: column; overscroll-behavior: contain;
  transform: translateX(100%); visibility: hidden;
  transition: transform .34s var(--ease), visibility .34s var(--ease); }
.m-nav.open { transform: translateX(0); visibility: visible; }
.m-nav-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.m-nav-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.m-nav-close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--ink); cursor: pointer; }
.m-nav-close svg { width: 18px; height: 18px; }
.m-nav-body { flex: 1; overflow-y: auto; padding: 8px 10px 16px; }
.m-nav-link, .m-acc { border-bottom: 1px solid var(--line); }
.m-nav-link { display: block; padding: 15px 12px; text-decoration: none;
  font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink); }
.m-nav-link:hover { color: var(--blue-300); }
/* a colour swap alone is not a focus indicator — keep the ring (2.4.7) */
.m-nav-link:focus-visible { color: var(--blue-300); outline: 2px solid var(--blue-300); outline-offset: -2px; }
.m-acc-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 12px; background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink); }
.m-acc-trigger .m-caret { width: 16px; height: 16px; color: var(--ink-2); flex-shrink: 0; transition: transform .26s var(--ease); }
.m-acc-trigger[aria-expanded="true"] .m-caret { transform: rotate(180deg); }
.m-acc-panel { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
/* max-height:0 clips a collapsed panel but leaves its links in the tab order and
   readable by screen readers. visibility:hidden takes them out of both; the
   delay lets the collapse animation finish before it applies (2.4.3, 4.1.2). */
.m-acc-trigger[aria-expanded="false"] + .m-acc-panel {
  visibility: hidden; transition: max-height .3s var(--ease), visibility 0s linear .3s;
}
.m-acc-trigger[aria-expanded="true"] + .m-acc-panel { visibility: visible; }
.m-acc-group { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); padding: 12px 12px 3px; }
.m-sub { display: block; padding: 10px 12px 10px 20px; text-decoration: none;
  font-family: var(--sans); font-size: 14.5px; color: var(--ink-2); }
.m-sub:hover { color: var(--blue-300); }
.m-sub:focus-visible { color: var(--blue-300); outline: 2px solid var(--blue-300); outline-offset: -2px; }
.m-nav-foot { display: grid; gap: 10px; padding: 16px 18px; border-top: 1px solid var(--line); }
.m-nav-foot .btn { width: 100%; justify-content: center; }
@media (min-width: 1081px) { .m-nav, .m-nav-backdrop { display: none; } }

/* mega menu — squared */
.mega-menu {
  position: absolute; top: calc(100% + 10px); left: 0;
  width: min(700px, calc(100vw - 40px));
  background: rgba(11,13,16,0.97); border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  padding: 6px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; z-index: 1001;
}
.mega-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.mega-hover-bridge { position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.mega-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.mega-item { display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px; text-decoration: none; background: var(--panel); transition: background .15s; }
.mega-item:hover { background: var(--panel-2); }
.mega-item-icon { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
  border: 1px solid var(--line-blue); color: var(--blue-300); background: var(--info-fill); }
.mega-item-icon svg { width: 16px; height: 16px; }
.mega-item-name { font-size: 15px; font-weight: 500; color: var(--ink); }
.mega-item-desc { font-family: var(--sans); font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }

/* resources mega — multi-column, dark, Geist */
.res-mega {
  position: absolute; top: calc(100% + 12px); left: 50%;
  width: min(1000px, calc(100vw - 32px));
  background: #0A0D13; border: 1px solid var(--line-2); border-radius: 0;
  box-shadow: 0 40px 90px rgba(0,0,0,0.8);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
  z-index: 1001; overflow: hidden;
}
.res-mega.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.res-mega .mega-hover-bridge { top: -14px; height: 14px; }
.res-cols { display: grid; grid-template-columns: repeat(3, 1fr); }
.res-col { padding: 30px 34px; border-left: 1px solid var(--line); }
.res-col:first-child { border-left: 0; }
.res-eyebrow { font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.res-group + .res-group { margin-top: 30px; }
.res-links { margin-top: 14px; display: flex; flex-direction: column; gap: 3px; }
.res-link { text-decoration: none; display: block; padding: 9px 12px; margin: 0 -12px; border-radius: 0; transition: background .15s; }
.res-link:hover { background: rgba(96,165,250,0.08); }
.res-link .t { display: block; font-family: var(--sans); font-size: 15px; font-weight: 450; letter-spacing: -0.01em; color: var(--ink); transition: color .15s; }
.res-link .d { display: block; margin-top: 3px; font-family: var(--sans); font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.res-link:hover .t { color: var(--blue-400); }
.res-more { display: inline-flex; align-items: center; gap: 7px; margin: 16px -12px 0; padding: 9px 12px; border-radius: 0;
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--blue-400);
  text-decoration: none; transition: background .15s var(--ease), gap .15s var(--ease); }
.res-more:hover { background: rgba(96,165,250,0.1); gap: 11px; }
.res-more svg { width: 15px; height: 15px; }

/* features menu — compact two-column version from the established site header.
   These selectors are global so Astro's dev-server HMR cannot leave newly-added
   menu nodes without their scoped attribute while swapping the header. */
.res-mega.features-menu { width: min(640px, calc(100vw - 32px)); }
.features-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 12px;
}
.feature-link {
  display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 11px 12px;
  color: inherit; text-decoration: none; transition: background .16s var(--ease);
}
.feature-link:hover { background: rgba(255,255,255,.04); }
.feature-index {
  flex: 0 0 22px; padding-top: 2px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .08em; color: var(--blue-400);
}
.feature-copy { min-width: 0; }
.feature-name {
  display: block; font-family: var(--sans); font-size: 13.5px; line-height: 1.35;
  font-weight: 500; letter-spacing: -.01em; color: var(--ink); transition: color .16s var(--ease);
}
.feature-desc {
  display: block; margin-top: 2px; font-family: var(--sans); font-size: 11.5px;
  line-height: 1.4; color: var(--ink-3);
}
.feature-link:hover .feature-name { color: var(--blue-300); }
.features-foot {
  display: flex; justify-content: flex-end; padding: 10px 24px; border-top: 1px solid var(--line);
}
.features-foot a {
  font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--blue-400);
  text-decoration: none; transition: color .16s var(--ease);
}
.features-foot a:hover { color: var(--blue-200); }

/* compact dropdown (Support) — dark, Geist */
.mini-menu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  min-width: 216px; padding: 10px;
  background: #0A0D13; border: 1px solid var(--line-2); border-radius: 0;
  box-shadow: 0 30px 70px rgba(0,0,0,0.75);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; z-index: 1001;
}
.mini-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mini-menu .mega-hover-bridge { top: -14px; height: 14px; }
.mini-link { display: block; padding: 10px 14px; border-radius: 0; text-decoration: none;
  font-family: var(--sans); font-size: 15px; font-weight: 450; letter-spacing: -0.01em;
  color: var(--ink); transition: color .15s, background .15s; }
.mini-link:hover { color: var(--blue-400); background: rgba(96,165,250,0.08); }

/* ═══ HERO ═══ */
.hero { padding-top: clamp(148px,15vh,196px); text-align: center; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 2; }


/* ── Electric pulse: leaves the beam's landing point, runs the top edge to each
      corner, turns, and dies partway down the sides. Tracks clip it so it can
      never overshoot the frame; linear timing keeps the run definite. ── */
.pulse-origin {
  position: absolute; left: 50%; top: -2px; width: 5px; height: 5px; z-index: 7;
  transform: translateX(-50%); border-radius: 50%; background: #E8F1FF;
  box-shadow: 0 0 10px 2px rgba(191,219,254,0.9), 0 0 30px 6px rgba(59,130,246,0.55);
  animation: origin-throb 4.6s linear infinite;
}
@keyframes origin-throb {
  0%   { opacity: 0.2; transform: translateX(-50%) scale(0.6); }
  3%   { opacity: 1;   transform: translateX(-50%) scale(1.6); }
  14%  { opacity: 0.6; transform: translateX(-50%) scale(1); }
  60%  { opacity: 0.2; transform: translateX(-50%) scale(0.6); }
  100% { opacity: 0.2; transform: translateX(-50%) scale(0.6); }
}
.ptrack { position: absolute; overflow: hidden; z-index: 6; pointer-events: none; }
.ptrack.top   { top: -2px; left: 0; right: 0; height: 5px; }
.ptrack.right { top: 0; bottom: 0; right: -2px; width: 5px; }
.ptrack.left  { top: 0; bottom: 0; left: -2px; width: 5px; }
.ph {
  position: absolute; top: 1px; height: 3px; width: 130px; left: 50%; margin-left: -65px;
  background: linear-gradient(90deg, transparent, rgba(191,219,254,0.9) 35%, #FFFFFF 50%, rgba(191,219,254,0.9) 65%, transparent);
  box-shadow: 0 0 12px 1px rgba(147,197,253,0.75), 0 0 34px 4px rgba(59,130,246,0.35);
}
.pv {
  position: absolute; left: 1px; width: 3px; height: 120px; top: 0; margin-top: -60px;
  background: linear-gradient(180deg, transparent, rgba(191,219,254,0.9) 35%, #FFFFFF 50%, rgba(191,219,254,0.9) 65%, transparent);
  box-shadow: 0 0 12px 1px rgba(147,197,253,0.75), 0 0 34px 4px rgba(59,130,246,0.35);
}
.ph.r { animation: run-right 4.6s linear infinite; }
.ph.l { animation: run-left  4.6s linear infinite; }
.pv   { animation: run-down  4.6s linear infinite; }
@keyframes run-right {
  0%   { left: 50%; opacity: 0; }
  3%   { opacity: 1; }
  34%  { left: 100%; opacity: 1; }
  35%  { left: 100%; opacity: 0; }
  100% { left: 100%; opacity: 0; }
}
@keyframes run-left {
  0%   { left: 50%; opacity: 0; }
  3%   { opacity: 1; }
  34%  { left: 0%; opacity: 1; }
  35%  { left: 0%; opacity: 0; }
  100% { left: 0%; opacity: 0; }
}
@keyframes run-down {
  0%, 34% { top: 0%; opacity: 0; }
  35%     { top: 0%; opacity: 1; }
  60%     { top: 48%; opacity: 0.55; }
  70%     { top: 66%; opacity: 0; }
  100%    { top: 66%; opacity: 0; }
}
.hero-h1 { margin: 42px auto 0; max-width: 14ch; }
.hero-h1 .accent {
  background: linear-gradient(100deg,
    #5B9DF9 0%, #6E7BF2 18%, #A85FD6 34%, #F0552F 50%, #A85FD6 66%, #6E7BF2 82%, #5B9DF9 100%);
  background-size: 220% auto; background-repeat: repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(150,135,220,0.24));
  animation: accent-sheen 7s linear infinite;
}
@keyframes accent-sheen { from { background-position: 0% center; } to { background-position: 220% center; } }
@media (prefers-reduced-motion: reduce) { .hero-h1 .accent { animation: none; } }
.hero-sub { margin: 30px auto 0; max-width: 680px; }
.hero-ctas { display: flex; justify-content: center; gap: 10px; margin-top: 46px; flex-wrap: wrap; }
.hero-trust {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 0;
  margin-top: 40px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase;
}
.hero-trust .sl { margin: 0 14px; color: var(--line-2); }
.hero-trust .star { color: var(--blue-300); }

/* hero stage: aurora beams DROP to the dashboard top edge */
.hero-stage { position: relative; margin: clamp(168px,16vh,232px) auto 0; max-width: 1360px; padding: 0 var(--gut); }
.dash-aurora {
  position: absolute; left: var(--gut); right: var(--gut); bottom: calc(100% - 1px); height: 300px;
  pointer-events: none; z-index: 1; overflow: hidden;
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
}
/* single light shaft falling onto the dashboard */
.dash-beam {
  position: absolute; left: 50%; bottom: calc(100% - 2px); transform: translateX(-50%);
  width: 340px; height: 170px; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse 22% 96% at 50% 100%, rgba(191,219,254,0.5) 0%, rgba(147,197,253,0.24) 55%, transparent 80%) 50% 0 / 100% 100%,
    radial-gradient(ellipse 50% 92% at 50% 100%, rgba(59,130,246,0.28) 0%, rgba(37,99,235,0.1) 55%, transparent 78%) 50% 0 / 100% 100%;
  background-repeat: no-repeat;
  filter: blur(6px);
  animation: beam-breathe 5.5s ease-in-out infinite alternate;
}
@keyframes beam-breathe { from { opacity: 0.8; } to { opacity: 1; } }
/* landing flare where the beam meets the dashboard edge */
.dash-land {
  position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%);
  width: min(420px, 46%); height: 74px; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(240,247,255,0.85) 0%, rgba(147,197,253,0.4) 34%, rgba(59,130,246,0.14) 60%, transparent 78%);
  filter: blur(7px);
  animation: beam-breathe 5.5s ease-in-out infinite alternate;
}
.dash-edge {
  position: absolute; left: calc(var(--gut) + 4%); right: calc(var(--gut) + 4%); top: -1px; height: 1px; z-index: 4;
  background: linear-gradient(90deg, transparent, rgba(219,234,254,0.95) 30%, #fff 50%, rgba(219,234,254,0.95) 70%, transparent);
  box-shadow: 0 0 18px 2px rgba(147,197,253,0.75), 0 0 60px 8px rgba(59,130,246,0.4);
}
.dash-edge-flow {
  position: absolute; left: var(--gut); right: var(--gut); top: -30px; height: 60px; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 55% 100% at 50% 100%, rgba(96,165,250,0.4) 0%, rgba(37,99,235,0.14) 45%, transparent 75%);
  filter: blur(8px);
}
.edge-particle {
  position: absolute; bottom: 0; width: 2px; height: 2px; background: var(--blue-200);
  box-shadow: 0 0 6px rgba(147,197,253,0.9); opacity: 0;
  animation: ep-rise 5s ease-out infinite;
}
@keyframes ep-rise {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  10% { opacity: 0.9; }
  60% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-210px) scale(0.3); }
}
.hero-frame {
  position: relative; z-index: 2;
  border: 1px solid var(--line-blue);
  background: var(--panel);
  padding: 6px;
  box-shadow: 0 -14px 60px rgba(59,130,246,0.16), 0 40px 120px rgba(0,0,0,0.8);
}
.hero-frame img { width: 100%; display: block; border: 1px solid var(--line); }
.hero-frame .tint { position: absolute; inset: 6px; pointer-events: none;
  background: linear-gradient(200deg, rgba(37,99,235,0.08) 0%, transparent 40%), linear-gradient(0deg, rgba(7,8,9,0.5) 0%, transparent 30%); }

/* counter strip: bordered cells */
.hero-counter { max-width: 1360px; margin: 0 auto; padding: 0 var(--gut); position: relative; z-index: 2; }
.hc-grid { display: grid; grid-template-columns: repeat(var(--hero-counter-columns,3),1fr); border: 1px solid var(--line-2); border-top: none; background: var(--panel); }
.hc-cell { padding: 24px 26px; text-align: left; }
.hc-cell + .hc-cell { border-left: 1px solid var(--line); }
.hc-key { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-3); text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.hc-key .pulse { width: 5px; height: 5px; background: var(--red-500); box-shadow: 0 0 8px rgba(245,80,46,0.9); animation: blink 1.4s infinite; }
.hc-num { font-family: var(--mono); font-weight: 600; font-size: clamp(22px,2.6vw,34px); letter-spacing: 0; margin-top: 8px;
  color: var(--red-400); text-shadow: 0 0 16px rgba(245,80,46,0.4); font-variant-numeric: tabular-nums; }
.hc-num.blue { color: var(--blue-300); text-shadow: 0 0 16px rgba(59,130,246,0.4); }
.hc-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.12em; margin-top: 5px; text-transform: uppercase; }

/* ═══ CUSTOMER LOGOS ═══ */
.ticker-sec { margin-top: clamp(60px,8vw,100px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ticker-inner { display: grid; grid-template-columns: auto 1fr; align-items: center; }
.ticker-label { padding: 18px var(--gut) 18px var(--gut); border-right: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-3); text-transform: uppercase; white-space: nowrap; }
.ticker-label b { color: var(--ink-2); }
.customer-logo-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; }
.customer-logo {
  min-width: 0; min-height: 64px; padding: 14px 20px; display: flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--line);
}
.customer-logo img {
  display: block; width: 100%; height: 30px; max-width: 112px; object-fit: contain; object-position: center;
  filter: brightness(0) invert(.92); opacity: .5; transition: opacity .2s var(--ease);
}
.customer-logo:hover img { opacity: .9; }

/* ═══ THREAT (red zone) ═══ */
.threat { background:
  radial-gradient(ellipse 75% 55% at 50% 0%, rgba(127,29,29,0.16) 0%, transparent 66%),
  linear-gradient(180deg, rgba(20,6,10,0.55) 0%, transparent 74%); }
.threat::before { content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(245,80,46,0.6), transparent); }
.threat .scene-kick { color: var(--red-400); }
.threat-grid { display: grid; grid-template-columns: repeat(var(--metric-columns, 4),1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.editorial-metric-grid { margin-bottom: clamp(56px,7vw,100px); }
.editorial-section.has-body .editorial-metric-grid { margin-bottom: 0; }
.editorial-section.has-graphic .sec-head {
  padding-bottom: clamp(28px,3.6vw,48px);
  border-bottom: 0;
}
.editorial-section.has-graphic .scene-body { padding-top: 0; }
.editorial-section.metrics-after .scene-body { padding-bottom: clamp(36px,4.6vw,64px); }
.editorial-section.metrics-after .editorial-metric-grid { margin-bottom: clamp(56px,7vw,100px); }
.threat-card { background: #0B0709; padding: 30px 26px; position: relative; overflow: hidden; transition: background .25s; }
.threat-card:hover { background: #120A0D; }
.threat-num { font-family: var(--cta); font-size: clamp(26px,2.6vw,38px); font-weight: 600; color: var(--red-400);
  letter-spacing: 0.01em; text-shadow: 0 0 18px rgba(245,80,46,0.35); font-variant-numeric: tabular-nums; }
.threat-unit { font-family: var(--cta); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(252,165,165,0.55); margin-top: 4px; }
.threat-title { font-size: 16.5px; font-weight: 500; color: var(--ink); margin-top: 16px; }
.threat-desc { font-size: 15.5px; color: var(--ink-3); line-height: 1.6; margin-top: 7px; }
.threat-card.is-copy-only .threat-unit { margin-top: 0; }
.threat-card.is-copy-only .threat-title { margin-top: 12px; }

/* ═══ PILLARS — numbered PI blocks ═══ */
/* ── Four fundamentals: figure over a Prime-style copy/points body ── */
.fund-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-left: var(--pad-out); margin-right: var(--pad-out); }
.fund { background: var(--panel); display: flex; flex-direction: column; transition: background .25s var(--ease); }
.fund:hover { background: var(--panel-2); }
/* the figure sits on a dotted field, landscape ratio, ruled off from the copy */
.fund-fig { position: relative; border-bottom: 1px solid var(--line); overflow: hidden;
  background-color: var(--panel);
  /* soft glow pooled behind the figure — no dots (reserved for the vuln/hacked/protection panels) */
  background-image: radial-gradient(ellipse 58% 66% at 50% 46%, rgba(37,99,235,0.12) 0%, transparent 70%);
  background-size: 100% 100%; }
.fund-fig img { display: block; width: 78%; height: auto; margin: 6px auto; opacity: 0.75; }
.fund-body { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(20px,2.6vw,42px);
  padding: clamp(26px,2.6vw,38px) clamp(26px,2.6vw,40px) clamp(30px,3vw,42px); align-items: start; }
.fund-body:not(.has-points), .fund-body:not(.has-copy) { grid-template-columns: 1fr; }
.fund-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-400); }
.fund-title { margin: 10px 0 0;
  font-size: clamp(20px,2vw,27px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.fund-title .d-t { color: var(--ink); }
.fund-copy > p { margin-top: 14px; font-size: 14.5px; color: var(--para); line-height: 1.66; }
.fund-kpi { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 11px; }
.fund-kpi b { font-family: var(--mono); font-size: clamp(22px,2.2vw,28px); font-weight: 600; color: var(--blue-300); }
.fund-kpi span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.fund-points { border-top: 1px solid transparent; }
.fund-points li { list-style: none; display: grid; grid-template-columns: clamp(30px,2.6vw,40px) 1fr;
  gap: 4px 0; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); line-height: 1.6; }
.fund-points li:not(.has-label) { grid-template-columns: 1fr; }
.fund-points li:first-child { padding-top: 4px; }
.fund-points li:last-child { border-bottom: none; }
.fund-points .pn { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--blue-400); }
.pillar-card.is-compact .fund-fig {
  padding: clamp(18px,2vw,26px) 0 clamp(10px,1.2vw,16px);
  background-image: radial-gradient(ellipse 62% 70% at 50% 46%, rgba(37,99,235,0.12) 0%, transparent 70%);
}
.pillar-card.is-compact .fund-fig.tone-green {
  background-image: radial-gradient(ellipse 62% 70% at 50% 46%, rgba(16,185,129,0.10) 0%, transparent 70%);
}
.pillar-card.is-compact .fund-fig.tone-plain { background-image: none; }
.pillar-card.is-compact .fund-fig svg {
  display: block; width: 72%; max-width: 220px; height: auto; margin: 0 auto;
}
.pillar-card.is-compact .fund-body {
  grid-template-columns: 1fr;
  padding: clamp(16px,1.8vw,24px) clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);
}
.pillar-card.is-compact .fund-title {
  margin-top: 10px; font-size: clamp(15.5px,1.5vw,19px); letter-spacing: -0.015em;
}
.pillar-card.is-compact .fund-copy > p {
  margin-top: 8px; font-size: 15px; color: var(--ink-3); line-height: 1.6;
}
.pillar-card-link {
  display: inline-flex; margin-top: 20px; color: var(--blue-300); text-decoration: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.pillar-card-link:hover { color: var(--blue-200); }
.pillar-card.has-link .fund-body { flex: 1; }
.pillar-card.has-link .fund-copy { display: flex; flex-direction: column; height: 100%; }
.pillar-card.has-link .pillar-card-link { margin-top: auto; padding-top: 20px; }

/* A framed field of pillar cards: the outer boundary is intentionally heavier
   than the internal rules so the units read as one composed instrument. */
.pillar-card-grid {
  --pillar-grid-outer: rgba(148,161,191,0.34);
  --pillar-grid-inner: rgba(148,161,191,0.16);
  display: grid; gap: 1px; min-width: 0;
  border: 2px solid var(--pillar-grid-outer);
  background: var(--pillar-grid-inner);
}
.pillar-card-grid.columns-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.pillar-card-grid.columns-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.pillar-card-grid.columns-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.pillar-card-grid > .pillar-card { min-width: 0; }
@media (max-width: 1080px) {
  .fund-grid { grid-template-columns: 1fr; }
  .pillar-card-grid.columns-3,
  .pillar-card-grid.columns-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .fund-body { grid-template-columns: 1fr; }
  .pillar-card-grid.columns-2,
  .pillar-card-grid.columns-3,
  .pillar-card-grid.columns-4 { grid-template-columns: 1fr; }
}

/* ═══ SECURITY STACK — scroll-scrubbed 8-dimension build (embedded motion piece) ═══ */
/* no background: transparent like the real .rule sections, so the body canvas
   reads identically to the section above and the .railed rails show through */
.stack-section { position: relative; }
.stack-intro {
  position: relative; z-index: 2; height: clamp(260px,34svh,340px);
  padding: clamp(56px,7vw,104px) var(--pad-out) 0;
}
.stack-intro-h {
  position: sticky; top: calc(var(--nav-h) + clamp(28px,4vw,56px));
  max-width: 1100px; margin: 0 auto; text-align: center; text-wrap: balance;
  font-size: clamp(30px,3.6vw,54px); font-weight: 500; line-height: 1.08;
  letter-spacing: -0.025em; color: var(--ink);
}
.stack-intro-h span { color: var(--ink-3); }
.stack-scroll { position: relative; height: 760vh; }
/* transparent frame so the page canvas + rails show straight through and blend.
   inset below the fixed nav (--nav-h) so the piece centres in the visible area, not behind the nav */
.stack-frame { position: sticky; top: var(--nav-h); width: 100%; height: calc(100svh - var(--nav-h)); display: block; border: 0;
  background: transparent; z-index: 1; }
.stack-outro { position: relative; z-index: 1; min-height: 70svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px var(--pad-out); }
.stack-outro-h { font-size: clamp(30px,3.6vw,54px); line-height: 1.08; font-weight: 500; letter-spacing: -0.025em;
  color: var(--ink-3); max-width: 820px; margin: 0 auto; }
.stack-outro-h span { color: var(--ink); }
.stack-outro-p { font-size: clamp(15px,1.4vw,19px); line-height: 1.55; color: var(--para); max-width: 760px; margin: 0 auto; }
/* the outro sits outside a <section>, so the GSAP .rv reveal never reaches it —
   drive its entrance from the scroll timeline instead, always-visible fallback */
@keyframes stackOutroFade { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
/* hold hidden well into the scroll, then reveal as it settles toward centre — a slower,
   more deliberate entrance; the paragraph trails the heading for a premium stagger */
.stack-outro-h, .stack-outro-p { animation: stackOutroFade linear both; animation-timeline: view(); }
.stack-outro-h { animation-range: cover 30% cover 52%; }
.stack-outro-p { animation-range: cover 38% cover 60%; }
@supports not (animation-timeline: view()) { .stack-outro-h, .stack-outro-p { opacity: 1; transform: none; animation: none; } }
@media (prefers-reduced-motion: reduce) { .stack-outro-h, .stack-outro-p { opacity: 1; transform: none; animation: none; } }
@media (max-width: 680px) {
  .stack-intro { height: clamp(220px,30svh,270px); padding-top: clamp(48px,12vw,72px); }
  .stack-intro-h { top: calc(var(--nav-h) + 24px); }
  .stack-scroll { height: 700vh; }
}
/* overview video player (lives in the performance section) — plays only while in view */
/* the cell is a true 16:9 box, so a 16:9 video fills it exactly — no crop, no letterbox bands */
.demo-video-poster, .demo-video-frame { position: absolute; inset: 0;
  width: 100%; height: 100%; display: block; border: 0; }
.demo-video-poster { object-fit: cover; z-index: 0; }
.demo-video-frame { z-index: 1; }
.demo-video-guard { position: absolute; inset: 0; z-index: 2; }   /* keeps it a clean loop — no click-to-pause */
.demo-video-controls { position: absolute; right: clamp(14px,1.4vw,22px); bottom: clamp(14px,1.4vw,22px); z-index: 3;
  display: inline-flex; gap: 10px; }
.demo-video-btn { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(6,10,18,0.6); color: var(--ink);
  cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
.demo-video-btn:hover { background: rgba(12,18,30,0.82); border-color: rgba(255,255,255,0.36); transform: translateY(-1px); }
.demo-video-btn svg { display: none; width: 21px; height: 21px; }
.demo-video-play.is-playing .ic-pause { display: block; }
.demo-video-play:not(.is-playing) .ic-play { display: block; }
.demo-video-mute.is-muted .ic-muted { display: block; }
.demo-video-mute:not(.is-muted) .ic-unmuted { display: block; }
.demo-video-cc .ic-cc { display: block; }
.demo-video-cc.is-cc-on { background: rgba(37,99,235,0.6); border-color: rgba(96,165,250,0.65); color: #fff; }
.demo-video-fs .ic-fs-enter { display: block; }
.demo-video-fs .ic-fs-exit { display: none; }
.demo-video-fs.is-fs .ic-fs-enter { display: none; }
.demo-video-fs.is-fs .ic-fs-exit { display: block; }
.demo-video:fullscreen, .demo-video:-webkit-full-screen { width: 100vw; height: 100vh; aspect-ratio: auto; background: #000; }

/* video lightbox — opened by the Watch demo button; full YouTube controls */
.video-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  padding: clamp(16px,4vw,56px); background: rgba(2,5,12,0.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .28s var(--ease); }
.video-modal.open { display: flex; opacity: 1; }
.video-modal-dialog { position: relative; width: min(1180px, 100%); }
.video-modal-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: #04070d; border: 1px solid var(--line-2); box-shadow: 0 40px 120px rgba(0,0,0,0.6); }
.video-modal-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal-close { position: absolute; top: 12px; right: 12px; z-index: 5; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.24); background: rgba(6,10,18,0.72); color: var(--ink); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .18s var(--ease), transform .18s var(--ease); }
.video-modal-close:hover { background: rgba(20,28,44,0.92); transform: rotate(90deg); }
.video-modal-close svg { width: 20px; height: 20px; }

/* ═══ CASE STUDY — full-bleed video (left); quote + author over a gradient field (right) ═══ */
.cs-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; align-items: stretch; }
/* LEFT — a full-bleed click-to-play video, centred in its cell */
.cs-left { display: flex; flex-direction: column; justify-content: center; }
.cs-video { position: relative; width: 100%; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; background: #04070d;
  display: grid; place-items: center; }   /* full bleed: fills the cell, no border / radius */
.cs-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cs-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 5; }
.cs-play { position: relative; z-index: 2; width: clamp(58px,5vw,80px); height: clamp(58px,5vw,80px); border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5); background: rgba(6,10,18,0.42); color: #fff; cursor: pointer;
  display: grid; place-items: center; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: transform .25s var(--ease), background .25s var(--ease); }
.cs-play svg { width: 34%; height: 34%; margin-left: 8%; }
.cs-video:hover .cs-play { transform: scale(1.07); background: rgba(37,99,235,0.55); }
.cs-play-ring { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.45); animation: play-pulse 2.6s var(--ease) infinite; }
@keyframes play-pulse { 0%{transform:scale(1);opacity:0.7} 80%,100%{transform:scale(1.5);opacity:0} }
.cs-video-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; background: linear-gradient(0deg, rgba(3,6,12,0.82), transparent); }
.cs-video.is-playing .cs-play, .cs-video.is-playing .cs-play-ring, .cs-video.is-playing .cs-video-bar { display: none; }
.cs-video-title { font-size: 15px; color: var(--ink); }
.cs-video-dur { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-3); white-space: nowrap; }
/* RIGHT — quote + author on the gradient field */
.cs-panel { position: relative; overflow: hidden; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(44px,5.5vw,80px) var(--pad-out) clamp(44px,5.5vw,80px) clamp(34px,4vw,58px); }
/* the gradient field: applied from the right edge, fading out toward the left */
.cs-panel::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(118deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 5px),
    linear-gradient(122deg, transparent 30%, rgba(43,111,255,0.55) 56%, rgba(126,86,216,0.44) 70%, rgba(238,90,44,0.55) 85%, rgba(255,106,40,0.62) 99%);
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 64%);
  mask-image: linear-gradient(90deg, transparent 4%, #000 64%); opacity: 0.8; }
.cs-text, .cs-author { position: relative; z-index: 1; }
.cs-text { margin: 0; font-size: clamp(15.5px,1.45vw,20px); line-height: 1.5; letter-spacing: -0.012em; color: var(--para); font-weight: 400; }
.cs-text b { color: var(--ink); font-weight: 500; }
.cs-author { display: flex; align-items: center; gap: 14px; margin-top: clamp(28px,3.2vw,44px); }
.cs-avatar { position: relative; width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.03em; color: var(--blue-200);
  background: rgba(37,99,235,0.14); border: 1px solid var(--line-blue); }
.cs-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cs-who b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cs-who i { font-style: normal; font-size: 14px; line-height: 1.45; color: var(--ink-3); max-width: 36ch; }
@media (max-width: 900px) {
  .cs-grid { grid-template-columns: 1fr; }
  .cs-panel { border-left: none; border-top: 1px solid var(--line); }
}

/* ── Section band: bold lead runs straight into its own description, CTAs beneath,
      and the fleet reads away to the right edge ── */
.band { position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
  min-height: clamp(280px, 30vw, 400px); display: flex; align-items: center; }
.color-band.tone-network { background: transparent; }
.color-band.tone-blue {
  background:
    radial-gradient(ellipse 70% 100% at 92% 50%, rgba(37,99,235,0.18), transparent 68%),
    var(--bg);
}
.color-band.tone-warm {
  background:
    radial-gradient(ellipse 70% 100% at 92% 50%, rgba(245,80,46,0.17), transparent 68%),
    var(--bg);
}
#fleet { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; z-index: 0; pointer-events: none; opacity: 0.85;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 24%, rgba(0,0,0,0.45) 52%, #000 86%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 24%, rgba(0,0,0,0.45) 52%, #000 86%); }
.band-copy { position: relative; z-index: 2; padding: clamp(40px,5vw,68px) var(--pad-out); max-width: var(--color-band-copy-max,50%); }
.band-h { font-size: clamp(22px,2.4vw,32px); font-weight: 400; letter-spacing: -0.018em; line-height: 1.34;
  color: var(--ink-3); }
.band-h b { color: var(--ink); font-weight: 500; }
.band-content { margin-top: clamp(28px,3.4vw,46px); }
.band-ctas { display: flex; gap: 10px; margin-top: clamp(26px,3vw,38px); flex-wrap: wrap; }
@media (max-width: 900px) {
  .band-copy { max-width: 100%; }
  #fleet { opacity: 0.35; width: 100%; -webkit-mask-image: none; mask-image: none; }
}

/* ═══ FEATURE DIVES — numbered, FIG panels, n.n rows ═══ */
/* every feature grid splits at its own ratio — the layout should never feel stamped */
.dive { position: relative; display: grid; width: 100%; max-width: var(--maxw); margin-inline: auto;
  grid-template-columns: minmax(0, var(--dive-left, 1fr)) minmax(0, var(--dive-right, 1.1fr));
  gap: 0; align-items: stretch; overflow: hidden; }
.dive.feature-split-contained { width: calc(100% - (2 * var(--gut)));
  max-width: calc(var(--maxw) - (2 * var(--gut))); }
.dive.rule-top { border-top: 1px solid var(--line); }
.dive-copy, .dive-visual { display: flex; flex-direction: column; justify-content: center; min-width: 0;
  padding-top: clamp(56px,7vw,104px); padding-bottom: clamp(56px,7vw,104px); }
/* --pad-in clears the column rule, --pad-out keeps content off the page rails */
.dive-copy   { padding-left: var(--pad-out); padding-right: var(--pad-in); }
.dive-visual { padding-left: var(--pad-in);  padding-right: var(--pad-out); border-left: 1px solid var(--line); }
.feature-visual.is-dotted {
  background:
    radial-gradient(circle at 1px 1px, rgba(96,165,250,0.13) 1px, transparent 0) 0 0 / 17px 17px,
    radial-gradient(ellipse 54% 46% at 20% 16%, rgba(37,99,235,0.15) 0%, transparent 62%),
    radial-gradient(ellipse 46% 42% at 84% 86%, rgba(96,165,250,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 42% 38% at 50% 55%, rgba(30,58,138,0.20) 0%, transparent 65%);
}
.dive.flip .dive-visual { padding-left: var(--pad-out); padding-right: var(--pad-in); border-left: none; }
.dive.flip .dive-copy   { padding-left: var(--pad-in);  padding-right: var(--pad-out); border-left: 1px solid var(--line); }
/* per-section proportions — desktop only. These are ID-scoped, which outranks the
   single-column collapse below, so they must be gated by min-width or they'd crush
   the grid on small screens. */
@media (min-width: 1081px) {
  #malware                       { grid-template-columns: 1.4fr 1fr; }    /* chart left, copy right */
  #vuln                          { grid-template-columns: 0.8fr 1.58fr; }  /* seven columns need the room */
  #firewall                      { grid-template-columns: 0.8fr 1.4fr; }
  #login                         { grid-template-columns: 0.8fr 1.4fr; }  /* match firewall so the pinned card is the same size */
  #activity                      { grid-template-columns: 1.25fr 0.95fr; }
}
.dive + .dive { border-top: 1px solid var(--line); }
.dive.flip .dive-visual { order: -1; }
.dive-copy :is(h2,h3,h4) .d-n { color: var(--ink-3); font-weight: 400; }
.dive-copy :is(h2,h3,h4) { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline;
  font-size: clamp(24px,2.5vw,34px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; }
.dive-copy > p { margin-top: 16px; color: var(--para); font-size: clamp(15.5px,1.35vw,18px); line-height: 1.72; max-width: 500px; }
.d-points { margin-top: 22px; border-top: 1px solid var(--line); }
.d-points li { list-style: none; display: grid; grid-template-columns: clamp(34px,3vw,46px) 1fr;
  padding: 16px 0; border-bottom: 1px solid var(--line); }
.d-points .pn { grid-column: 1; grid-row: 1; font-style: normal; font-size: 15.5px; color: var(--ink-2); letter-spacing: 0.01em; }
.d-points b { grid-column: 2; grid-row: 1; font-size: 15.5px; font-weight: 400; color: var(--ink); letter-spacing: -0.005em; }
.d-points span { grid-column: 2; grid-row: 2; margin-top: 9px; max-width: 46ch;
  font-size: 15.5px; color: var(--ink-3); line-height: 1.65; }
.d-points b { color: var(--ink); font-weight: 500; }

/* the panel sits on a dotted field, like graph paper under a spec sheet */
#vuln .dive-visual {
  background-image: radial-gradient(circle at 1px 1px, rgba(96,165,250,0.13) 1px, transparent 0);
  background-size: 17px 17px;
}

/* ── Vulnerability Shield stage — off-centre, pinned to the bottom-left corner ── */
.dive-stage-cell { justify-content: flex-end; align-items: flex-end;
  padding: clamp(48px,6vw,96px) clamp(8px,1vw,16px) 0 var(--pad-out);
}
#vuln .dive-visual {
  /* slim right inset — the svg's own edge fade supplies the rest of the visible gap */
  /* dotted field over a blue mesh glow — open field on the left now */
  background:
    radial-gradient(circle at 1px 1px, rgba(96,165,250,0.13) 1px, transparent 0) 0 0 / 17px 17px,
    radial-gradient(ellipse 52% 44% at 18% 16%, rgba(37,99,235,0.16) 0%, transparent 62%),
    radial-gradient(ellipse 46% 42% at 86% 88%, rgba(96,165,250,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 36% at 42% 55%, rgba(30,58,138,0.22) 0%, transparent 65%);
}
.dive-stage { margin: 0 0 -14px; position: relative; width: min(93%, 910px); align-self: flex-end; }
.vuln-shot { position: relative; }
/* bottom tuck hides only the svg's transparent tail; the right edge keeps pad-out
   clearance so its fade visibly dissolves into the dotted field */
.vuln-shot .vxp-svg { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 32px 56px rgba(0,0,0,0.55)) drop-shadow(0 9px 20px rgba(37,99,235,0.16)); }
/* the Patch All control pulses gently until used */
.vxp-svg .vx-patch { cursor: pointer; transform-box: fill-box; transform-origin: center;
  animation: vx-breathe 2.4s var(--ease) infinite; }
.vxp-svg .vx-ring { pointer-events: none; transform-box: fill-box; transform-origin: center;
  animation: vx-ring 2.4s var(--ease) infinite; }
@keyframes vx-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes vx-ring { 0% { opacity: 0.5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.22); } }
.vxp-svg.busy .vx-patch, .vxp-svg.done .vx-patch { animation: none; cursor: default; }
.vxp-svg.busy .vx-ring, .vxp-svg.done .vx-ring { animation: none; opacity: 0; }
.vxp-svg .vx-patch-bg, .vxp-svg .vx-patch-label { transition: fill .35s var(--ease); }
.vxp-svg.done .vx-patch-bg { fill: #0b312c; }
.vxp-svg.done .vx-patch-label { fill: var(--ok); }
/* per-row patched state — fills/strokes glide, a green flash washes the row */
.vxp-svg .vx-sev, .vxp-svg .vx-score-bg, .vxp-svg .vx-score,
.vxp-svg .vx-met-n, .vxp-svg .vx-met-chip, .vxp-svg .vx-met-dot, .vxp-svg .vx-met-t,
.vxp-svg .vx-banner { transition: fill .4s var(--ease), stroke .4s var(--ease); }
.vxp-svg .vx-risk, .vxp-svg .vx-shield, .vxp-svg .vx-mark { transition: stroke .4s var(--ease), opacity .4s var(--ease); }
.vxp-svg .vx-row.patched .vx-sev { fill: var(--ok-bright); }
.vxp-svg .vx-row.patched .vx-score-bg { fill: #103129; }
.vxp-svg .vx-row.patched .vx-score { fill: var(--ok); }
.vxp-svg .vx-row.patched .vx-risk { stroke: #4c5668; opacity: 0.5; }
.vxp-svg .vx-row.patched .vx-shield, .vxp-svg .vx-row.patched .vx-mark { stroke: #42d6b1; opacity: 1; }
.vxp-svg .vx-row.patched .vx-flash { animation: vx-flash 0.9s ease-out; }
@keyframes vx-flash { 0% { opacity: 0.13; } 100% { opacity: 0; } }
/* dashboard totals follow once everything is patched */
.vxp-svg.done .vx-met-n { fill: #52d9bc; }
.vxp-svg.done .vx-met-chip { fill: #103129; }
.vxp-svg.done .vx-met-dot { stroke: #55d6ba; }
.vxp-svg.done .vx-met-t { fill: #61dfc0; }
.vxp-svg.done .vx-banner { fill: #69e0c4; }
@media (prefers-reduced-motion: reduce) {
  .vxp-svg .vx-patch, .vxp-svg .vx-ring { animation: none; }
  .vxp-svg .vx-row.patched .vx-flash { animation: none; }
}


/* ── Vulnerability Shield header chrome — the product dashboard, in site language ── */
.vs-live { font-family: var(--mono); font-style: normal; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ok); border: 1px solid rgba(52,211,153,0.28); background: rgba(16,185,129,0.08);
  padding: 3px 8px; margin-left: 10px; display: inline-flex; align-items: center; gap: 6px; }
.vs-live::before { content: ''; width: 5px; height: 5px; background: var(--ok-bright); box-shadow: 0 0 6px rgba(52,211,153,0.9); }
/* metrics strip — core version, vulnerable/outdated counts, exactly like the dashboard top row */
.vs-stats { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); }
.vs-stat { padding: 14px 14px 12px; min-width: 0; }
.vs-stat + .vs-stat { border-left: 1px solid var(--line); }
.vs-stat b { font-family: var(--mono); font-size: clamp(18px,1.6vw,23px); font-weight: 600; color: var(--ink);
  display: block; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.vs-stat b.danger { color: var(--red-400); }
.vs-stat b.okc { color: var(--ok-bright); }
.vs-stat span { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3);
  display: block; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-chip { display: inline-block; font-family: var(--mono); font-style: normal; font-size: 9px; letter-spacing: 0.04em;
  padding: 3px 7px; margin-top: 9px; border: 1px solid transparent; white-space: nowrap; transition: all .25s var(--ease); }
.vs-chip.up   { color: var(--blue-300); background: rgba(37,99,235,0.12);  border-color: rgba(96,165,250,0.30); }
.vs-chip.crit { color: var(--red-300);  background: rgba(226,58,24,0.12);  border-color: rgba(245,80,46,0.30); }
.vs-chip.ok   { color: var(--ok);         background: rgba(16,185,129,0.10); border-color: rgba(52,211,153,0.28); }
.vs-subhead { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  padding: 12px 16px 10px; border-bottom: 1px solid var(--line); }
@media (max-width: 1120px) {
  .vs-stats { grid-template-columns: repeat(3, 1fr); }
  .vs-stat:nth-child(4) { border-left: none; }
  .vs-stat:nth-child(n+4) { border-top: 1px solid var(--line); }
}

/* ── Top vulnerabilities: severity, subject, finding, date, score, signals ── */
.cve-rows { }
.cve-row { display: grid; align-items: center; gap: 12px;
  grid-template-columns: 4px 26px minmax(116px, 1fr) minmax(150px, 1.45fr) auto auto auto;
  padding: 13px 16px 13px 12px; border-bottom: 1px solid var(--line); transition: background .18s var(--ease); }
.cve-row:last-child { border-bottom: none; }
.cve-row:hover { background: var(--panel-2); }
.sev { width: 4px; height: 26px; border-radius: 1px; }
.sev.crit { background: var(--red-500); }
.sev.high { background: var(--warn-bar); }
.sev.med  { background: var(--sev-med); }
.cve-ico { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-2);
  background: var(--panel-2); color: var(--ink-2); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; }
.cve-name { font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cve-meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; }
.cve-desc { font-size: 13.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cve-date { font-family: var(--mono); font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.cve-score { font-family: var(--mono); font-size: 10px; letter-spacing: 0.03em; padding: 4px 8px; white-space: nowrap;
  border: 1px solid transparent; transition: all .2s var(--ease); }
.cve-score.crit { color: var(--red-300); background: rgba(226,58,24,0.12); border-color: rgba(245,80,46,0.30); }
.cve-score.high { color: var(--warn-bright); background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.26); }
.cve-score.med  { color: var(--ink-2); background: var(--sev-med-fill); border-color: var(--sev-med-border); }
.cve-score.patched { color: var(--ok); background: rgba(16,185,129,0.10); border-color: rgba(52,211,153,0.28); }
/* the three signals — lit means it applies to this finding */
.cve-flags { display: flex; gap: 7px; }
.f { width: 17px; height: 17px; display: block; color: var(--ink-3); opacity: 0.32; transition: color .2s var(--ease), opacity .2s var(--ease); }
.f svg { width: 100%; height: 100%; display: block; }
.f.on { opacity: 1; }
.f-risk.on  { color: var(--red-400); }
.f-fix.on   { color: var(--blue-300); }
.f-patch.on { color: var(--ok-bright); }
/* legend */
.cve-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  padding: 13px 18px; border-top: 1px solid var(--line); }
.cve-legend .lgd { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.cve-legend .lg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 1260px) { .cve-date { display: none; } }
@media (max-width: 1120px) { .cve-desc { white-space: normal; } }
.panel-foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.patch-success { display: none; padding: 11px 18px; border-top: 1px solid rgba(52,211,153,0.28); background: rgba(16,185,129,0.05);
  font-family: var(--mono); font-size: 10.5px; color: var(--ok); letter-spacing: 0.04em; }
.patch-success.show { display: block; }

/* ── Instant Cleanup: a focused window inside a wider, dimmed grid ──
   The rack is deliberately wider than the panel and centred, so the panel's
   own overflow clips the neighbouring columns exactly like the reference. */
.rack-wrap { position: relative; overflow: hidden; }
/* the toggle spans exactly the focus window (46%) and shares its centre line */
.seg-toggle { display: grid; grid-template-columns: 1fr 1fr; width: 46%; margin: 0 auto 22px;
  border: 1px solid var(--line-blue); background: rgba(8,16,31,0.75); }
.seg { background: none; border: none; cursor: pointer; padding: 11px 10px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--ink-2); transition: color .18s var(--ease), background .18s var(--ease); }
.seg + .seg { border-left: 1px solid var(--line-blue); }
.seg.active { background: rgba(37,99,235,0.20); color: #fff; box-shadow: inset 0 0 0 1px rgba(96,165,250,0.30); }
.seg:not(.active):hover { color: var(--ink); background: rgba(37,99,235,0.08); }

.rack { display: grid; grid-template-columns: repeat(3, 1fr); width: 138%; margin-left: -19%; }
.rk { padding: 18px 22px; border-bottom: 1px solid var(--line); min-width: 0; }
/* the neighbours: dimmed and out of focus, but still on the same rows */
/* neighbours: dimmed only — no blur, no frame of their own */
.rk.ghost { opacity: 0.28; pointer-events: none; transition: opacity .3s var(--ease); }
/* on the Clean tab the whole site reads healthy — lift the neighbours out of the shadow */
.rack.is-clean .rk.ghost { opacity: 0.5; }
/* the window: the only thing in focus */
.rk.focus { border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); }
.rack > .rk.focus:nth-child(2) { border-top: 1px solid var(--line-2); }
.rack > .rk.focus:last-of-type { border-bottom: 1px solid var(--line-2); }
.rk-top { display: flex; align-items: center; gap: 10px; }
.fc-ico { width: 15px; height: 15px; flex-shrink: 0; color: var(--ink-3); }
.rk.focus .fc-ico { color: var(--blue-400); }
.fc-name { font-size: 15.5px; color: var(--ink); white-space: nowrap; }
.fc-right { margin-left: auto; font-size: 14px; color: var(--ink); white-space: nowrap; letter-spacing: 0.01em; }
.fc-right.bad { color: var(--red-400); }
.fc-right.ok { color: var(--ok); }
.rk-mid { display: flex; align-items: baseline; gap: 9px; margin-top: 7px; padding-left: 25px; }
.fc-state { font-size: 12.5px; }
.fc-state.bad { color: var(--red-400); }
.fc-state.ok { color: var(--ok); }
.fc-note { font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.rk-meta { margin-top: 9px; padding-left: 25px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
/* bot rows */
.bot-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 9.5px 14px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.bot-row:last-child { border-bottom: none; }
.bot-row .path { color: var(--ink-3); }

/* firewall — live-dashboard motion piece, enlarged and pinned to the grid box's bottom-right corner */
#firewall { border-bottom: 1px solid var(--line); overflow: hidden; }   /* close the box: bottom stroke runs out to both rails; clip the piece flush to the right + bottom margins */
.fw-shot { margin: 0; display: flex; align-items: center; justify-content: center; }
.fw-frame { display: block; width: 100%; max-width: 1120px; aspect-ratio: 16 / 10; margin: 0 auto; border: 0; background: transparent; overflow: visible; }
@media (min-width: 1081px) {
  /* pin the piece to the cell's bottom-right corner, out to the right rail. The frame is
     absolutely positioned so the cell keeps its full grid-track width — an aspect-ratio frame
     in normal flow gets height-squeezed by the copy and drags the whole cell narrow with it. */
  #firewall .dive-visual { position: relative; padding: 0; }
  #firewall .fw-shot { position: absolute; right: calc(var(--pad-out) * -1.5); bottom: -44px; display: block;
    width: calc((100% - var(--pad-in)) * 1.15); }   /* grown diagonally, flush to the bottom + right margin, left edge kept inside the cell */
  #firewall .fw-frame { width: 100%; max-width: none; margin: 0; }
}

/* ═══ CENTERED GRAPHIC SECTIONS — shared shell for poster/map + optional units ═══ */
.graphic-section.is-panel { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 0 var(--pad-out); padding: clamp(48px,6vw,90px) 0 clamp(40px,5vw,72px); }
.graphic-section.is-panel.has-units,
.graphic-section.is-panel.has-bar { padding-bottom: 0; }
.graphic-section.is-panel.has-footer { padding-bottom: 0; }
.graphic-section.is-center { text-align: center; }
.graphic-section.is-right { text-align: right; }
.graphic-section .graphic-section-head .sec-tag { color: var(--ink-3); }
.graphic-section.is-panel .graphic-section-head { max-width: var(--graphic-head-max); margin: 0 auto; padding: 0 var(--pad-out); }
.graphic-section.is-panel.is-center .graphic-section-head .sec-tag { justify-content: center; }
.graphic-section.is-panel .graphic-section-head .h2 { margin-top: 0; }
.graphic-section.is-panel.has-eyebrow .graphic-section-head .h2 { margin-top: 22px; }
.graphic-section.is-panel .graphic-section-head .sub { margin: 18px auto 0; max-width: var(--graphic-description-max); }
.graphic-section.is-scene { border-top: 1px solid var(--line); }
.graphic-section.is-scene.has-units .scene-body,
.graphic-section.is-scene.has-bar .scene-body { padding-bottom: 0; }
.graphic-section.is-scene .graphic-section-head .h2 { max-width: var(--graphic-head-max); }
.graphic-section.is-scene:not(.has-eyebrow) .graphic-section-head .h2 { margin-top: 0; }
.graphic-section.is-scene .graphic-section-head .sub { max-width: var(--graphic-description-max); }
.graphic-section-actions { margin-top: clamp(34px,4vw,56px); }

/* ═══ GEO-BLOCKING — live map artwork inside the shared graphic-section shell ═══ */
/* the live map, centred; its dark field dissolves into the section canvas on every edge */
.geo-shot { margin: clamp(22px,3vw,48px) auto 0; position: relative; width: min(94%, 1140px); }
.geo-frame { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; background: transparent;
  /* map already paints the canvas colour; feather all edges so any residual boundary dissolves */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 93%, transparent 100%),
                      linear-gradient(90deg,  transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 93%, transparent 100%),
              linear-gradient(90deg,  transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect; }
/* three facts as a ruled horizontal band, flush to the section's bottom border */
.geo-facts { display: grid; grid-template-columns: repeat(var(--unit-columns, 3),1fr); border-top: 1px solid var(--line);
  margin-top: clamp(30px,4vw,56px); text-align: left; }
.feature-unit-grid.has-bottom-rule { border-bottom: 1px solid var(--line); }
.geo-fact { padding: clamp(26px,3vw,42px) clamp(24px,3vw,44px); }
.geo-fact + .geo-fact { border-left: 1px solid var(--line); }
.geo-fact .pn { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--blue-400); }
.geo-fact h3, .geo-fact h4 { font-size: clamp(16px,1.6vw,19px); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin-top: 12px; }
.geo-fact p  { font-size: 14px; color: var(--para); line-height: 1.62; margin-top: 8px; }
@media (max-width: 820px) {
  .geo-facts { grid-template-columns: 1fr; }
  .geo-fact + .geo-fact { border-left: none; border-top: 1px solid var(--line); }
}

/* ═══ RULED CONTENT — reusable multi-cell grids and full-width ledgers ═══ */
.ruled-content {
  display: grid;
  min-width: 0;
  border-top: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
}
.ruled-content.has-bottom-rule { border-bottom: 1px solid var(--line); }
.ruled-content.is-grid { grid-template-columns: repeat(var(--ruled-columns, 3), minmax(0, 1fr)); }
.ruled-content.is-ledger { grid-template-columns: 1fr; }
.ruled-content-item {
  min-width: 0;
  padding: clamp(24px,2.8vw,40px);
  background: var(--panel);
}
.ruled-content.is-ledger .ruled-content-item {
  display: grid;
  grid-template-columns: minmax(120px,.45fr) minmax(180px,.75fr) minmax(240px,1.4fr) auto;
  align-items: baseline;
  gap: clamp(14px,2vw,30px);
  padding: clamp(20px,2.2vw,30px) clamp(24px,3vw,44px);
}
.ruled-content-item.is-highlighted {
  background: rgba(37,99,235,0.1);
  box-shadow: inset 3px 0 0 var(--blue-500);
}
.ruled-content-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--blue-400);
}
.ruled-content-title {
  margin-top: 11px;
  font-size: clamp(16px,1.6vw,20px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
}
.ruled-content-description {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--para);
}
.ruled-content-link {
  display: inline-flex;
  gap: 6px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blue-300);
}
.ruled-content.is-ledger .ruled-content-title,
.ruled-content.is-ledger .ruled-content-description,
.ruled-content.is-ledger .ruled-content-link { margin-top: 0; }
.ruled-content-link:hover { color: var(--blue-200); }
@media (max-width: 900px) {
  .ruled-content.is-grid { grid-template-columns: repeat(var(--ruled-tablet-columns,2), minmax(0,1fr)); }
  .ruled-content.is-ledger .ruled-content-item {
    grid-template-columns: minmax(100px,.5fr) 1fr;
  }
  .ruled-content.is-ledger .ruled-content-description,
  .ruled-content.is-ledger .ruled-content-link { grid-column: 2; }
}
@media (max-width: 620px) {
  .ruled-content.is-grid { grid-template-columns: 1fr; }
  .ruled-content.is-ledger .ruled-content-item { display: block; }
  .ruled-content.is-ledger .ruled-content-title,
  .ruled-content.is-ledger .ruled-content-description,
  .ruled-content.is-ledger .ruled-content-link { margin-top: 8px; }
}

/* ═══ SEGMENTED VISUAL — shared tab semantics and cycling controller ═══ */
.segmented-visual { min-width: 0; }
.segmented-visual-tabs {
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: 3px;
  padding: 3px;
  margin-bottom: clamp(16px,2vw,24px);
  border: 1px solid var(--line);
  background: rgba(5,8,14,.76);
}
.segmented-visual-tab {
  min-width: 0;
  padding: 9px 14px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font: 500 10.5px/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.segmented-visual-tab:hover { color: var(--ink); }
.segmented-visual-tab.is-active {
  background: rgba(37,99,235,.18);
  color: var(--blue-200);
  box-shadow: inset 0 0 0 1px var(--line-blue);
}
.segmented-visual-tab:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 2px;
}
.segmented-visual-panels,
.segmented-visual-panels > [data-segment-panel] { min-width: 0; }
.segmented-visual-panels > [data-segment-panel][hidden] { display: none !important; }
@media (max-width: 560px) {
  .segmented-visual-tabs { width: 100%; }
  .segmented-visual-tab { flex: 1 1 0; padding-inline: 8px; }
}

/* ── Login Protection & 2FA — interactive login-shield motion piece, transparent-bg SVG ── */
/* login — same treatment as the realtime firewall: a transparent motion piece on a dotted field,
   enlarged and pinned to the grid box's bottom-right corner, flush to the right + bottom margins */
#login { overflow: hidden; }   /* clip the piece flush to the right + bottom margins */
.login-shot { margin: 0; display: flex; align-items: center; justify-content: center; }
.login-frame { display: block; width: 100%; max-width: 1120px; aspect-ratio: 16 / 10; margin: 0 auto; border: 0; background: transparent; overflow: visible; }
/* dotted field + blue mesh glow behind the piece, like Instant Cleanup / Vulnerability Shield */
#login .dive-visual { position: relative;
  background:
    radial-gradient(circle at 1px 1px, rgba(96,165,250,0.13) 1px, transparent 0) 0 0 / 17px 17px,
    radial-gradient(ellipse 54% 46% at 20% 16%, rgba(37,99,235,0.15) 0%, transparent 62%),
    radial-gradient(ellipse 46% 42% at 84% 86%, rgba(96,165,250,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 42% 38% at 50% 55%, rgba(30,58,138,0.20) 0%, transparent 65%); }
@media (min-width: 1081px) {
  /* pin the piece to the cell's bottom-right corner, out to the right rail (mirrors #firewall) */
  #login .dive-visual { padding: 0; }
  #login .login-shot { position: absolute; right: calc(var(--pad-out) * -1.5); bottom: -44px; display: block;
    width: calc((100% - var(--pad-in)) * 1.15); }
  #login .login-frame { width: 100%; max-width: none; margin: 0; }
}

/* ── Activity Log — animated dashboard floating on a feathered dotted field ── */
.activity-shot { position: relative; z-index: 1; margin: 0; display: flex; align-items: center; justify-content: center; }
.activity-frame { display: block; flex-shrink: 0; width: 115%; max-width: 1200px; aspect-ratio: 16 / 10; margin: 0 auto; transform: translateX(10px); border: 0; background: transparent; overflow: visible; }
/* dotted field + blue mesh glow behind the piece, feathered so no edge shows */
#activity .dive-visual { position: relative; }
#activity .dive-visual::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 54% 46% at 24% 22%, rgba(37,99,235,0.14) 0%, transparent 62%),
    radial-gradient(ellipse 46% 42% at 80% 82%, rgba(96,165,250,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 42% 38% at 50% 52%, rgba(30,58,138,0.18) 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(82% 80% at 50% 50%, #000 42%, transparent 84%);
  mask-image: radial-gradient(82% 80% at 50% 50%, #000 42%, transparent 84%); }

/* ── Instant Cleanup — Infected/Clean dashboard with clickable tabs over the SVG control ── */
/* the box carries a dotted field + blue mesh glow; the transparent-bg SVG floats on it */
#cleanup-dive .dive-visual { position: relative; }
.dive-figure { position: relative; width: 100%; max-width: 820px; margin: 0 auto; aspect-ratio: 4 / 3; }
.clean-shot { position: relative; }
.cs-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; }
.cs-img.is-active { opacity: 1; }
/* transparent hotspots sitting exactly over the SVG's Infected|Clean segmented control */
.cs-tabs { position: absolute; left: 26.7%; top: 10.2%; width: 46.7%; height: 6.5%; min-height: 24px; display: flex; z-index: 3; }
.cs-tab { flex: 1; min-height: 24px; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: transparent; font: inherit; -webkit-tap-highlight-color: transparent; }
.cs-tab:focus-visible { outline: 1.5px solid var(--line-blue); outline-offset: -3px; border-radius: 12px; }

/* ── Malware Scanner — animated detection-comparison motion piece, centred in the box ── */
/* no container/outline — the transparent motion piece sits straight on the page background */
#malware .dive-visual { align-items: center; justify-content: center; }
.mws-anim { position: relative; width: 100%; max-width: 680px; margin: 0 auto; }
.mws-frame { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; background: transparent; overflow: visible; }

/* login shield */
.login-mock { padding: 16px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.login-field { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-2); padding: 9px 12px;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); background: var(--panel-2); }
.login-field .lk { color: var(--ink-3); min-width: 66px; }
.tfa-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.tfa-boxes { display: flex; gap: 6px; }
.tfa-box { width: 30px; height: 36px; border: 1px solid var(--line-blue); background: var(--info-fill);
  display: grid; place-items: center; font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--blue-200); }
.tfa-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }
.tfa-meta b { color: var(--blue-300); }

/* ═══ ACTIVITY LOG ═══ */
.spark-bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; padding: 14px 14px 0; }
.spark-bars .bar { flex: 1; background: linear-gradient(180deg, rgba(96,165,250,0.85), rgba(37,99,235,0.2)); min-height: 8%; transform-origin: bottom; }
.spark-cap { display: flex; justify-content: space-between; padding: 8px 14px 10px; font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.1em; border-bottom: 1px solid var(--line); }
.log-row { display: flex; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.log-row:last-child { border-bottom: none; }
.log-ico { width: 26px; height: 26px; display: grid; place-items: center; flex-shrink: 0; font-size: 12px;
  border: 1px solid var(--line-blue); color: var(--blue-300); background: var(--info-fill); }
.log-ico.warn { border-color: var(--bad-border); color: var(--red-400); background: var(--bad-fill); }
.log-main { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.log-main b { color: var(--ink); font-weight: 500; }
.log-time { font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-top: 3px; letter-spacing: 0.04em; }

/* ═══ TESTIMONIAL BAND — one loud quote in brand blue, one quiet on dark ═══ */
.quote-sec { padding: clamp(56px,7vw,100px) 0; }
.quote-band { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.quote-lead, .quote-side { margin: 0; display: flex; flex-direction: column;
  padding: clamp(30px,3.4vw,52px) clamp(30px,3.4vw,54px); position: relative; overflow: hidden; }
/* the blue panel */
.quote-lead { background:
  radial-gradient(ellipse 70% 90% at 12% 6%, rgba(191,219,254,0.42) 0%, transparent 52%),
  radial-gradient(ellipse 80% 95% at 92% 96%, rgba(245,80,46,0.42) 0%, transparent 56%),
  linear-gradient(125deg, #60A5FA 0%, #3B82F6 40%, #4F6FE8 66%, #7C5AD6 84%, #C24C6A 108%);
  color: #fff; }
.quote-lead .q-mark { font-family: Georgia, serif; font-size: 96px; line-height: 0.6; color: rgba(255,255,255,0.4); margin-bottom: -8px; }
.quote-lead blockquote { margin: 0; font-size: clamp(21px,2.35vw,31px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.28; color: #fff; flex: 1; }
.quote-lead figcaption { display: flex; align-items: center; gap: 14px; margin-top: clamp(32px,4vw,56px); }

/* the dark panel */
.quote-side { background: var(--panel); }
/* push the quiet quote down so its first line meets the loud quote's first line (which sits below the 96px mark) */
.quote-side blockquote { margin: 49px 0 0; font-size: clamp(16px,1.5vw,20px); font-weight: 400; line-height: 1.5; color: var(--ink); flex: 1; }
.quote-side figcaption { display: flex; align-items: center; gap: 13px; margin-top: clamp(32px,4vw,56px); }
.quote-side .q-arrow { margin-left: auto; font-size: 22px; color: var(--ink-3); }
/* company wordmark logos */
.q-brand { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding-right: 14px; border-right: 1px solid rgba(255,255,255,0.22); }
.q-brand.side { border-right-color: var(--line-2); }
.q-brand-mark { width: 20px; height: 20px; }
.quote-lead .q-brand-mark { color: #fff; }
.quote-side .q-brand-mark { color: var(--ink-2); }
.q-brand-name { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
.quote-lead .q-brand-name { color: #fff; }
.quote-side .q-brand-name { color: var(--ink-2); }
/* shared caption identity block */
.q-who { display: flex; flex-direction: column; line-height: 1.35; }
.q-who b { font-size: 14px; font-weight: 600; }
.q-who i { font-style: normal; font-size: 12px; }
.quote-lead .q-who b { color: #fff; } .quote-lead .q-who i { color: rgba(255,255,255,0.72); }
.quote-side .q-who b { color: var(--ink); } .quote-side .q-who i { color: var(--ink-3); }
@media (max-width: 860px) { .quote-band { grid-template-columns: 1fr; } }

/* ═══ CLEANUP REPORT ═══ */
.report-check { display: flex; align-items: center; gap: 13px; padding: 16px; border-bottom: 1px solid var(--line); }
.report-check .big-tick { width: 38px; height: 38px; display: grid; place-items: center; color: #05221A; font-size: 16px; font-weight: 700;
  background: var(--ok-bright); box-shadow: 0 0 26px rgba(16,185,129,0.35); }
.report-check .rt { font-size: 14.5px; font-weight: 500; }
.report-check .rs { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.report-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10.5px 16px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.report-row:last-child { border-bottom: none; }
.report-row b { font-family: var(--mono); font-size: 13.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.report-row b.red { color: var(--red-400); } .report-row b.green { color: var(--ok-bright); }

/* ── Cleanup Report — light two-column grid, inset to the page margins (Geist) ── */
.report-light { background: transparent; border-top: none; }   /* equal top/bottom gap set on .report-grid below */
.light-report-section.has-rule { border-top: 1px solid var(--line); }
/* the white block sits within the page rails; a visible bordered grid split by a grey stroke */
.report-grid { display: grid; grid-template-columns: 1fr; align-items: stretch;
  margin: clamp(56px,6vw,92px) 0; background: #f2f3f5;
  border: 1px solid rgba(15,23,42,0.14); overflow: hidden; }
.light-report-section.is-flush .report-grid { margin: 0; border-left: none; border-right: none; }
/* wider right track so the edge-to-edge animation has room; left height tuned to match it */
@media (min-width: 1081px) { .report-grid { grid-template-columns: minmax(0,var(--report-left,.82fr)) minmax(0,var(--report-right,1.18fr)); } }
/* left cell — content, same side padding other sections use; vertical padding set to
   match the animation's height so the two columns balance */
.report-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0;
  padding: clamp(40px,4.6vw,58px) var(--pad-in) clamp(40px,4.6vw,58px) var(--pad-out); }
.report-eyebrow { margin-bottom: 14px; }
/* right cell holds the deep-scan animation edge to edge — grey stroke divider on the left */
.report-visual { position: relative; min-width: 0; overflow: hidden; aspect-ratio: 36 / 25;
  border-left: 1px solid rgba(15,23,42,0.12); background: #efe6dc; }
.report-visual.is-paper { background: #efe6dc; }
.report-visual.is-panel { background: var(--panel); }
.report-visual.is-transparent { background: transparent; }
.light-report-section.theme-dark .report-grid { background: var(--panel); border-color: var(--line-2); }
.light-report-section.theme-dark .report-title,
.light-report-section.theme-dark .report-checks li { color: var(--ink); }
.light-report-section.theme-dark .report-sub { color: var(--para); }
@media (max-width: 1080px) {
  .report-visual { border-left: none; border-top: 1px solid rgba(15,23,42,0.12); }
}

.report-title { font-family: var(--sans); font-size: clamp(24px,2.6vw,38px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.08; }
/* line 1 — grey, like the other section headings; line 2 — dark blue → vermilion gradient */
.report-title .dim  { color: var(--ink-3); font-weight: 600; }
.grad { background: linear-gradient(100deg, #1E40AF 0%, #2563EB 36%, #E23A18 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.report-sub { margin-top: clamp(16px,1.8vw,22px); font-family: var(--sans); font-size: clamp(15px,1.3vw,16.5px);
  line-height: 1.6; color: #4b5563; max-width: 44ch; font-weight: 400; }
.report-checks { margin-top: clamp(26px,3vw,40px); display: grid; gap: 16px; }
.report-checks li { list-style: none; display: flex; align-items: center; gap: 13px;
  font-family: var(--sans); font-size: clamp(15.5px,1.4vw,17.5px); font-weight: 500; letter-spacing: -0.01em; color: #1f2937; }
.rc-ico { flex-shrink: 0; width: 21px; height: 21px; color: #9aa2ae; }
.rc-ico svg { display: block; width: 100%; height: 100%; }

/* right column — the deep-scan animation (native 1440×1000). Overscaled a touch so the
   runtime's own inset frame is cropped and the piece fills the cell edge to edge */
.cleanup-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 112%; height: 112%; border: 0; background: #efe6dc; }

/* ═══ GRAPHIC + STEPS — featured visual left, stacked action rail right ═══ */
.graphic-steps-section .sec-head .h2 { max-width: var(--graphic-steps-head-max); }
.graphic-steps-grid { display: grid;
  grid-template-columns: minmax(0,var(--graphic-steps-left)) minmax(0,var(--graphic-steps-right));
  margin: 0 var(--pad-out) 0 0; }
.graphic-steps-visual { margin: 0; position: relative; display: flex; align-items: center; justify-content: center;
  min-width: 0; overflow: hidden; padding: clamp(30px,4vw,64px); }
.feature-visual.is-recovery {
  background:
    radial-gradient(circle 1.5px at 8% 18%,  rgba(147,197,253,0.22) 0, transparent 100%),
    radial-gradient(circle 1.1px at 17% 62%, rgba(147,197,253,0.15) 0, transparent 100%),
    radial-gradient(circle 1.7px at 24% 33%, rgba(147,197,253,0.18) 0, transparent 100%),
    radial-gradient(circle 1px   at 33% 83%, rgba(147,197,253,0.12) 0, transparent 100%),
    radial-gradient(circle 1.3px at 45% 12%, rgba(147,197,253,0.17) 0, transparent 100%),
    radial-gradient(circle 1.1px at 58% 88%, rgba(147,197,253,0.13) 0, transparent 100%),
    radial-gradient(circle 1.6px at 69% 25%, rgba(147,197,253,0.19) 0, transparent 100%),
    radial-gradient(circle 1px   at 79% 71%, rgba(147,197,253,0.12) 0, transparent 100%),
    radial-gradient(circle 1.4px at 88% 39%, rgba(147,197,253,0.16) 0, transparent 100%),
    radial-gradient(circle 1.1px at 93% 79%, rgba(147,197,253,0.12) 0, transparent 100%),
    radial-gradient(ellipse 74% 62% at 50% 92%, rgba(127,29,29,0.14) 0%, transparent 60%),
    var(--panel);
  background-repeat: no-repeat; }
.graphic-steps-visual > img { width: 100%; max-width: 672px; height: auto; display: block; border: 1px solid var(--line-2);
  /* dissolve the top corners into the pattern */
  -webkit-mask-image: radial-gradient(135% 118% at 50% 116%, #000 60%, rgba(0,0,0,0.35) 84%, transparent 100%);
  mask-image: radial-gradient(135% 118% at 50% 116%, #000 60%, rgba(0,0,0,0.35) 84%, transparent 100%); }
.graphic-steps-rail { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--line); }
.graphic-step { padding: clamp(22px,2.4vw,32px) clamp(24px,2.6vw,38px); border-bottom: 1px solid var(--line); }
.graphic-step-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-400); }
.graphic-step h3 { font-size: clamp(16px,1.6vw,20px); font-weight: 500; letter-spacing: -0.01em; margin-top: 12px; }
.graphic-step p { font-size: 14.5px; color: var(--ink-3); line-height: 1.62; margin-top: 9px; }
.graphic-steps-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: clamp(24px,2.6vw,34px) clamp(24px,2.6vw,38px); }
.graphic-steps-actions .btn { flex: 1 1 auto; justify-content: center; }
.graphic-steps-actions .btn-solid { flex-basis: 100%; }
.graphic-steps-note { padding: 0 clamp(24px,2.6vw,38px) clamp(24px,2.6vw,34px);
  font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
@media (max-width: 900px) {
  .graphic-steps-grid { grid-template-columns: 1fr; margin-right: 0; }
  .graphic-steps-rail { border-left: none; border-top: 1px solid var(--line); }
}

/* ═══ VULNERABILITY PROTECTION — poster artwork inside the shared graphic-section shell ═══ */
.vprotect-shot { margin: clamp(16px,2vw,30px) 0 0; position: relative; overflow: hidden;
  padding: clamp(18px,2.2vw,36px) 0 0;
  background:
    radial-gradient(ellipse 62% 58% at 50% 92%, rgba(37,99,235,0.14) 0%, transparent 62%),
    var(--panel);
  /* two crossed gradients → a soft feather on all four edges (no hard rectangle) */
  -webkit-mask-image:
    linear-gradient(90deg,  transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 7%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg,  transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 7%, #000 92%, transparent 100%);
  mask-composite: intersect; }
/* swivel dots — a tilted dot grid behind the poster, dissolving toward the centre */
.vprotect-shot::before { content: ""; position: absolute; inset: -40%; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(96,165,250,0.13) 1px, transparent 0);
  background-size: 23px 23px; transform: rotate(-15deg);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 6%, transparent 76%);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 6%, transparent 76%); }
.vprotect-shot img { position: relative; z-index: 1; width: 96%; max-width: 1488px; height: auto; display: block; margin: 0 auto; aspect-ratio: 3 / 2; }

/* ═══ AGENCIES ═══ */
.agency-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px,4vw,64px); align-items: center; }
.agency-points li { grid-template-columns: 0 1fr; }   /* no numbers here — no gutter either */
.site-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.site-row:last-child { border-bottom: none; }
.site-name { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

/* ═══ NETWORK ═══ */
/* ── Network: shared centered shell, five-stat body, then its own spaced footer ── */
.graphic-section.is-panel.net-sec { border-top: none; padding-top: clamp(56px,7vw,104px); }
.net-sec .graphic-section-head .h2 { white-space: nowrap; }   /* keep "…400,000 sites strong." on one line */
.net-sec .graphic-section-head .sub b { color: var(--ink); font-weight: 500; }
.net-link { color: var(--blue-300); text-decoration: none; white-space: nowrap; }
.net-link .ar { transition: transform .18s var(--ease); display: inline-block; }
.net-link:hover .ar { transform: translateX(3px); }
@media (max-width: 640px) { .net-sec .graphic-section-head .h2 { white-space: normal; } }   /* allow wrap on small screens */
.net-stats { display: grid; grid-template-columns: repeat(var(--stat-columns,5),1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: clamp(20px,3vw,40px) 0 0; }
.net-stat { padding: clamp(30px,3vw,44px) clamp(18px,2vw,26px); text-align: left; }
.net-stat + .net-stat { border-left: 1px solid var(--line); }
.net-stat b { font-family: var(--mono); font-size: clamp(26px,2.8vw,42px); font-weight: 600; color: var(--ink); display: block; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.net-stat b .u { font-size: 0.55em; }
.net-stat > span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 12px; display: block; line-height: 1.5; }
.net-foot { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); text-align: left; margin: clamp(36px,4vw,64px) 0 0; padding-bottom: clamp(56px,7vw,100px); }

/* ═══ GDPR — header-only form of the shared centered shell ═══ */
.graphic-section.is-panel.gdpr-sec {
  padding-top: clamp(72px,9vw,128px);
  padding-bottom: clamp(96px,12vw,168px);
}
.gdpr-sec .graphic-section-head .sub { margin-top: clamp(26px,3vw,40px); }

/* ═══ PERFORMANCE — copy + numbered rows left, video placeholder right ═══ */
.perf-grid { display: grid; grid-template-columns: minmax(0,var(--video-feature-left,.6fr)) minmax(0,var(--video-feature-right,1fr)); gap: 0; align-items: stretch;
  border-top: 1px solid var(--line); margin: 0 0 0 var(--pad-out); }   /* video bleeds to the right margin */
.perf-copy { padding: clamp(14px,1.8vw,26px) clamp(34px,4vw,64px) clamp(14px,1.8vw,26px) 0; display: flex; flex-direction: column; justify-content: center; }
.perf-copy .h2 { max-width: 12ch; }
.perf-rows { margin-top: clamp(16px,2vw,26px); }
.perf-row { padding: 13px 0; }
.perf-row-head { display: grid; grid-template-columns: 24px 1fr; column-gap: 14px; align-items: center; }
.perf-row-head b { font-size: 16px; font-weight: 500; color: var(--ink); }
.perf-check { display: inline-flex; }
.perf-check svg { width: 22px; height: 22px; display: block; }
/* video — an in-flow 16:9 box that sets the row height; copy centers against it, video reaches the bottom line */
.perf-video { position: relative; margin: 0; border-left: 1px solid var(--line); overflow: hidden; background: #04070d; }
.demo-video { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #04070d; }
@media (max-width: 900px) {
  .perf-grid { grid-template-columns: 1fr; }
  .perf-copy { padding-right: 0; }
  .perf-video { border-left: none; border-top: 1px solid var(--line); }
}

/* ═══ COMPARISON ═══ */
.comparison-table-section.is-right .sec-head { text-align: right; }
.comparison-table-section.is-right .sec-head .h2,
.comparison-table-section.is-right .sec-head .sub { margin-left: auto; }
.comparison-table-section.is-center .sec-head { text-align: center; }
.comparison-table-section.is-center .sec-head .h2,
.comparison-table-section.is-center .sec-head .sub { margin-left: auto; margin-right: auto; }
.comparison-table-section .sec-head .h2 { max-width: min(100%, var(--comparison-heading-max,1200px)); }
.comparison-table-content { margin-bottom: clamp(56px,7vw,100px); }
.video-testimonial-section .cs-grid { margin-bottom: clamp(56px,7vw,100px); }
.compare-scroll { overflow-x: auto; border: 1px solid var(--line-2); background: var(--panel); }
table.compare { border-collapse: collapse; width: 100%; min-width: var(--comparison-min,840px); }
.compare th, .compare td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.compare thead th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-2); }
.compare tbody tr:last-child td { border-bottom: none; }
.compare td:first-child { color: var(--ink-2); font-weight: 400; }
.compare td { color: var(--ink-3); }
.compare .mc-col { background: rgba(37,99,235,0.1); border-left: 1px solid var(--line-blue); border-right: 1px solid var(--line-blue); color: var(--ink); font-weight: 500; }
.compare thead .mc-col { color: var(--blue-300); }
.compare .win::before { content: '✓ '; color: var(--blue-400); }
.compare .comparison-group-row td { padding-top: 22px; padding-bottom: 10px; background: rgba(255,255,255,.025); font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--blue-300); }
/* row labels are <th scope="row"> for screen readers; visually they match the
   old first-column <td> exactly */
.compare tbody th { color: var(--ink-2); font-weight: 400; }
/* On tables several screens tall the reader loses which column is which plan.
   Once the table fits without horizontal scrolling (all current tables are
   ≤980px min-width), the wrapper stops being a scroll container so the header
   row can stick below the fixed nav. Solid backgrounds keep rows from showing
   through. */
@media (min-width: 1100px) {
  .compare-scroll { overflow-x: visible; }
  .compare thead th { position: sticky; top: var(--nav-h); z-index: 3; background-color: var(--panel); }
  .compare thead th.mc-col { background-color: var(--panel); background-image: linear-gradient(rgba(37,99,235,0.14), rgba(37,99,235,0.14)); }
}

/* ═══ STATS ═══ */
.bento { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.bento-cell { padding: 26px 24px; background: var(--panel); position: relative; transition: background .2s; }
.bento-cell:hover { background: var(--panel-2); }
.bento-cell.w2 { grid-column: span 2; }
.bento-cell.danger { background: #0C0709; }
.bento-cell.danger:hover { background: #120A0D; }
.bento-num { font-family: var(--mono); font-size: clamp(26px,2.6vw,38px); font-weight: 600; color: var(--blue-300); font-variant-numeric: tabular-nums; }
.bento-cell.danger .bento-num { color: var(--red-400); text-shadow: 0 0 18px rgba(245,80,46,0.3); }
.bento-cell p { font-size: 15.5px; color: var(--ink-3); line-height: 1.6; margin-top: 9px; }
.bento-cell p b { color: var(--ink-2); font-weight: 500; }

/* ═══ TESTIMONIALS ═══ */
.testimonial-grid-section .sec-head { border-bottom: none; }
.tweets { display: grid; grid-template-columns: repeat(var(--testimonial-columns,4),1fr); gap: 14px; align-items: start; margin: 0 var(--pad-out); }
.tw-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tweet { padding: 22px 24px; background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: 14px; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.tweet:hover { border-color: var(--line-2); transform: translateY(-2px); }
.tweet p { font-size: 14.5px; color: var(--para); line-height: 1.65; }
.tweet p b { color: var(--blue-300); font-weight: 500; }
.tweet-by { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
/* the mark stays 16px; the link around it grows to a 24px target (2.5.8) */
.tweet-src { margin-left: auto; width: 24px; height: 24px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--ink-3); opacity: 0.75; flex-shrink: 0; }
.tweet-src svg { width: 16px; height: 16px; display: block; }
.tweet-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-2); }
.tweet-name { font-size: 15px; font-weight: 500; }
.tweet a.tweet-name { display: inline-block; padding: 2.5px 0; color: inherit; text-decoration: none; }
.tweet a.tweet-name:hover { color: var(--blue-300); }
.tweet-handle { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }

/* ═══ TRUST BAND ═══ */
.trust-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.trust-row .sl { margin: 0 18px; color: var(--line-2); }
.trust-row .hl { color: var(--ink-2); }

/* ═══ TESTIMONIAL CAROUSEL ═══ */
.tcar { position: relative; max-width: none; margin: clamp(20px,3vw,40px) 0 clamp(64px,8vw,110px); padding: 0; }
.tcar-viewport { overflow: hidden; }
.tcar-track { display: flex; transition: transform .6s var(--ease); will-change: transform; }
.tcar-slide { flex: 0 0 100%; min-width: 0; box-sizing: border-box; text-align: center;
  padding: clamp(30px,3.6vw,48px) clamp(24px,3.4vw,52px);
  background: linear-gradient(180deg, rgba(22,28,44,0.55), rgba(12,16,26,0.35)); border: 1px solid var(--line); }
.tcar-stars { color: var(--blue-300); font-size: 15px; letter-spacing: 4px; }
.tcar-quote { margin: 16px auto 0; max-width: 42ch; font-family: var(--sans);
  font-size: clamp(18px,2vw,25px); line-height: 1.5; letter-spacing: -0.012em; color: var(--ink); font-weight: 400; }
.tcar-by { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; }
.tcar-av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-2); flex-shrink: 0; }
.tcar-who { display: flex; flex-direction: column; text-align: left; line-height: 1.3; }
.tcar-who b { color: var(--ink); font-size: 15px; font-weight: 600; }
.tcar-who i { margin-top: 2px; font-style: normal; font-family: var(--cta); font-size: 11.5px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.tcar-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: none; background: none; color: var(--ink-3); cursor: pointer;
  transition: color .18s var(--ease), transform .18s var(--ease); }
.tcar-arrow:hover { color: var(--ink); }
.tcar-prev:hover { transform: translateY(-50%) translateX(-2px); }
.tcar-next:hover { transform: translateY(-50%) translateX(2px); }
.tcar-arrow svg { width: 24px; height: 24px; }
.tcar-prev { left: clamp(8px,1.1vw,16px); }
.tcar-next { right: clamp(8px,1.1vw,16px); }
/* indicators — squares; the active one is a rectangle whose blue fill flows left → right over the autoplay interval */
/* the pause control and the dots share one row under the viewport */
.tcar-controls { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 28px; }
.tcar-pause { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: none; background: none; color: var(--ink-3); cursor: pointer; transition: color .18s; }
.tcar-pause:hover { color: var(--ink-2); }
.tcar-pause svg { width: 13px; height: 13px; display: block; }
.tcar-pause .tcar-ic-play, .tcar-pause.is-paused .tcar-ic-pause { display: none; }
.tcar-pause.is-paused .tcar-ic-play { display: block; }

.tcar-dots { display: flex; justify-content: center; align-items: center; gap: 0; }
/* The dot reads as a 9px bar but must offer a 24x24 target (2.5.8). The extra
   size is transparent padding — background-clip keeps the paint on the bar. */
.tcar-dot { width: 24px; height: 24px; padding: 7.5px; box-sizing: border-box;
  border: none; border-radius: 0; cursor: pointer; overflow: hidden;
  position: relative; background: var(--line-2); background-clip: content-box;
  transition: width .45s var(--ease), background-color .3s var(--ease); }
.tcar-dot:hover { background-color: var(--ink-3); }
.tcar-dot.active { width: 57px; background-color: rgba(96,165,250,0.20); }
.tcar-dot.active::after { content: ''; position: absolute; inset: 7.5px; transform-origin: left center;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-400) 55%, var(--blue-300));
  animation: tcar-fill 5500ms linear forwards; }
.tcar:hover .tcar-dot.active::after,
.tcar:focus-within .tcar-dot.active::after,
.tcar-pause.is-paused ~ .tcar-dots .tcar-dot.active::after { animation-play-state: paused; }
@keyframes tcar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .tcar-dot.active::after { animation: none; transform: scaleX(1); } }
@media (max-width: 720px) { .tcar-arrow { display: none; } }

/* ═══ FAQ ═══ */
.faq-section-head { border-bottom: 0; }
.faq-section-head .h2 { max-width: var(--faq-heading-max); margin-left: auto; margin-right: auto; }
.faq-section-head .sub { margin-left: auto; margin-right: auto; }
.faq-wrap { max-width: 760px; margin: 0 auto; border: 1px solid var(--line); }
.faq-section .faq-wrap { margin-bottom: clamp(56px,7vw,100px); }
.faq-item { border-bottom: 1px solid var(--line); background: var(--panel); }
.faq-item:last-child { border-bottom: none; }
.faq-q { width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 21px 24px; color: var(--ink); font-family: var(--sans); font-size: 16.5px; font-weight: 500; transition: color .18s; }
.faq-q:hover { color: var(--blue-200); }
.faq-q .fx { font-family: var(--mono); font-size: 15px; color: var(--blue-400); transition: transform .3s var(--ease); }
.faq-item.open .fx { transform: rotate(45deg); }
.faq-a { overflow: visible; }
[data-faq][data-faq-ready="true"] .faq-a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
/* a closed answer is clipped, but links inside it would still be tabbable —
   visibility takes them out of the tab order and the accessibility tree */
[data-faq][data-faq-ready="true"] .faq-item:not(.open) .faq-a { visibility: hidden; }
[data-faq]:not([data-faq-ready="true"]) .faq-q .fx { display: none; }
.faq-a-inner { padding: 0 48px 22px 24px; color: var(--para); font-size: 14.5px; line-height: 1.7; }
.faq-a-inner b, .faq-a-inner strong { color: var(--ink); font-weight: 500; }

/* ═══ FINAL CTA ═══ */
.final-cta { text-align: center; overflow: hidden; padding: clamp(90px,11vw,150px) 0 clamp(110px,13vw,180px); }
.final-horizon { position: absolute; left: 50%; bottom: -170px; transform: translateX(-50%); width: 150vw; height: 320px; pointer-events: none;
  background: radial-gradient(ellipse 40% 60% at 50% 100%, rgba(191,219,254,0.55) 0%, rgba(59,130,246,0.26) 32%, rgba(37,99,235,0.08) 58%, transparent 78%);
  filter: blur(18px); }
.final-cta .h1 { max-width: 18ch; margin: 24px auto 0; }
.final-cta .sub { margin: 18px auto 0; max-width: 460px; }

/* ═══ FOOTER ═══ */
.site-footer { border-top: 1px solid var(--line); padding: clamp(50px,6vw,80px) 0 0; background: var(--panel); position: relative; z-index: 2; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4,1fr); gap: clamp(24px,3.5vw,44px); }
.footer-brand p { font-size: 15px; color: var(--ink-3); line-height: 1.65; margin-top: 14px; max-width: 300px; }
.footer-col .footer-col-title { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a { display: block; color: var(--ink-2); text-decoration: none; font-size: 15px; padding: 4.5px 0; transition: color .15s; }
.footer-col a:hover { color: var(--blue-200); }
.footer-bottom { margin-top: clamp(40px,5vw,60px); border-top: 1px solid var(--line); padding: 18px 0 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }
.footer-social, .footer-legal { display: flex; align-items: center; gap: 8px; }
.footer-social a { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); border: 1px solid var(--line); text-decoration: none; transition: color .18s, border-color .18s, background .18s; }
.footer-social a:hover { color: var(--blue-200); border-color: var(--line-blue); background: rgba(96,165,250,0.08); }
.footer-social svg { width: 14px; height: 14px; fill: currentColor; }
.footer-legal { gap: clamp(12px,2vw,24px); }
/* 2.5.8 asks for 24px in both axes; these sit on their own, so the inline
   exception does not apply. The height comes from padding, so nothing moves. */
.footer-legal a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ink-3); text-decoration: none; transition: color .18s; }
.footer-legal a:hover { color: var(--blue-200); }
/* The oversized footer wordmark is intentionally hidden. */
.footer-watermark { display: none; }

/* pad util */
.sec-pad-b { padding-bottom: clamp(64px,8vw,120px); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1080px) {
  .threat-grid { grid-template-columns: repeat(2,1fr); }
  .layers-stage { grid-template-columns: 1fr; gap: 36px; }
  .rings-wrap { max-width: 460px; }
  .dive { grid-template-columns: 1fr; gap: 30px; }
  .dive.flip .dive-visual { order: 0; }
  .dive .dive-copy,
  .dive .dive-visual,
  .dive.flip .dive-copy,
  .dive.flip .dive-visual {
    padding-left: var(--pad-out);
    padding-right: var(--pad-out);
    border-left: 0;
  }
  .dive .dive-copy { padding-bottom: 36px; }
  .dive .dive-visual { padding-top: 0; border-top: 1px solid var(--line); }
  .agency-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2,1fr); }
  .tweets { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-live { display: none; }
  .nav-center { display: none; }
  .nav-burger { display: inline-flex; }
  .ticker-inner { grid-template-columns: 1fr; }
  .ticker-label { border-right: none; border-bottom: 1px solid var(--line); text-align: center; white-space: normal; }
}
@media (max-width: 660px) {
  .sec-head .h2 { max-width: 100%; }
  .nav-right .btn-line { display: none; }
  .nav-right .btn { padding: 8px 12px; font-size: 10px; }
  .threat-grid, .pillars-grid, .geo-stats { grid-template-columns: 1fr; }
  .net-stats { grid-template-columns: 1fr 1fr; }
  .net-stat:nth-child(odd) { border-left: none; }
  .net-stat { border-top: 1px solid var(--line); }
  .bento { grid-template-columns: 1fr; }
  .bento-cell.w2 { grid-column: span 1; }
  .tweets { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .hc-grid { grid-template-columns: 1fr; }
  .hc-cell + .hc-cell { border-left: none; border-top: 1px solid var(--line); }
  .customer-logo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-logo { min-height: 64px; border-bottom: 1px solid var(--line); }
  .customer-logo:nth-child(2n + 1) { border-left: 0; }
  .customer-logo:nth-last-child(-n + 2) { border-bottom: 0; }
  .fw-row { grid-template-columns: 60px 1fr auto; }
  .fw-row .ip { display: none; }
  .dive .dive-copy { padding-top: 48px; padding-bottom: 30px; }
  .dive .dive-visual { padding-bottom: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  .rv, .rv-scale { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   INTERIOR PAGE SCAFFOLD — shared by feature/landing pages (not the homepage).
   Pages opt in with <body class="page-int">. See docs/design-system/landing-pages.md.
   ═══════════════════════════════════════════════════════════════════ */
/* interior pages use one-shot .rv reveals only — no repeating section fade */
.page-int section.section-reveal, .page-int footer.section-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ─── the scene scaffold ─── */
.scene { border-top: 1px solid var(--line); }
.scene-head { padding: clamp(76px,9vw,128px) var(--pad-out) 0; max-width: 1080px; }
.scene-head.center { margin: 0 auto; text-align: center; }
.scene-kick { font-family: var(--sans); font-size: 16px; letter-spacing: normal; text-transform: none; color: var(--ink-3); }
.scene-head .h2 { margin-top: 22px; max-width: 28ch; font-size: clamp(28px,3.2vw,48px); }
.scene-head.center .h2 { margin-left: auto; margin-right: auto; }
.scene-head .sub { margin-top: 16px; max-width: 620px; font-size: clamp(16px,1.6vw,20px); line-height: 1.6; }
.scene-head.center .sub { margin-left: auto; margin-right: auto; }
/* head variants — homepage-style variety: left is the default */
.scene-head.right { margin-left: auto; text-align: right; }
.scene-head.right .h2 { margin-left: auto; }
.scene-head.right .sub { margin-left: auto; }
/* the red zone — the one section allowed its own wash */
.scene-threat { position: relative; background:
  radial-gradient(ellipse 75% 55% at 50% 0%, rgba(127,29,29,0.15) 0%, transparent 66%),
  linear-gradient(180deg, rgba(20,6,10,0.5) 0%, transparent 70%); }
.scene-threat::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,80,46,0.6), transparent); }
.scene-threat .scene-kick { color: var(--red-400); }
/* band lead — a statement instead of a headline (off-server) */
.band-lead { margin-top: 22px; max-width: 30ch; font-size: clamp(22px,2.5vw,34px); font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.32; color: var(--ink-3); }
.band-lead b { color: var(--ink); font-weight: 500; }
.band-sub { margin-top: 14px; max-width: 540px; font-size: clamp(15px,1.4vw,17.5px); color: var(--para); line-height: 1.62; }
/* a sub-headline introducing a reference artifact (the coverage table) */
.table-head { border-top: 1px solid var(--line); padding-top: clamp(30px,3.6vw,48px); }
.table-head h3 { font-size: clamp(20px,2vw,27px); font-weight: 500; letter-spacing: -0.02em; }
.table-head h3 .dim { color: var(--ink-3); font-weight: 500; }
.table-head p { margin-top: 10px; font-size: 14.5px; color: var(--para); line-height: 1.65; max-width: 62ch; }
.table-head { margin-bottom: clamp(22px,2.6vw,34px); }
.table-head.center { text-align: center; }
.table-head.center p { margin-left: auto; margin-right: auto; }
.scene-body { padding: clamp(36px,4.6vw,64px) var(--pad-out) clamp(80px,10vw,140px); }
.scene-body > * + * { margin-top: clamp(36px,4.6vw,60px); }
/* A body whose last element should end ON the section boundary rather than
   inside its padding — the next section's top rule becomes the line beneath it.
   The element itself must also drop its own bottom border, or the two stack
   into a 2px hairline. See docs/briefs/feature-page-component-contract.md. */
.scene-body.is-flush { padding-bottom: 0; }

.mono-cap { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }

.ink-b { color: var(--ink); font-weight: 500; }

/* engineering disclosure */
details.eng { border: 1px solid var(--line); background: var(--panel); }
details.eng summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 17px 22px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
details.eng summary::-webkit-details-marker { display: none; }
details.eng summary:hover { color: var(--blue-200); }
details.eng summary .fx { font-family: var(--mono); font-size: 15px; color: var(--blue-400); transition: transform .3s var(--ease); }
details.eng[open] summary .fx { transform: rotate(45deg); }
details.eng .eng-body { padding: 4px 24px 22px; max-width: 760px; }
details.eng .eng-body p { font-size: 14px; color: var(--para); line-height: 1.7; }
details.eng .eng-body p + p { margin-top: 12px; }
details.eng .eng-body em, details.eng .eng-body b { color: var(--ink); font-style: normal; font-weight: 500; }

.scan-hero { position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(380px, 0.9fr) 1.1fr; gap: clamp(28px,4vw,72px);
  align-items: center; min-height: min(86svh, 820px); padding: clamp(110px,12vh,150px) var(--pad-out) clamp(30px,4vw,56px); }
.feature-hero-grid {
  grid-template-columns:
    minmax(var(--hero-left-min), var(--hero-left))
    minmax(var(--hero-right-min), var(--hero-right));
  gap: var(--hero-gap);
  min-height: var(--hero-min-height);
}
.feature-hero-grid > * { min-width: 0; }
.feature-hero-copy { min-width: 0; }
.feature-hero-copy .scan-h1 > span { display: block; }
.scan-h1 { font-size: clamp(38px,4.1vw,64px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
.scan-h1 .accent {
  background: linear-gradient(100deg, #5B9DF9 0%, #6E7BF2 30%, #A85FD6 55%, #F0552F 85%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hero-lede { margin-top: 22px; max-width: 40ch; font-size: clamp(16px,1.5vw,19px); color: var(--para); line-height: 1.62; }
.hero-lede b { color: var(--ink); font-weight: 500; }
.hero-cta-row { display: flex; gap: 10px; margin-top: 34px; flex-wrap: wrap; }
.hero-mono { margin-top: 26px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
.hero-mono .sl { margin: 0 10px; color: var(--line-2); }
/* standalone links in this line are targets in their own right (2.5.8) */
.hero-mono a { display: inline-flex; align-items: center; min-height: 24px; }

/* panic ramp — a solid toolbar attached under the hero, not a floating line */
.panic-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); }
.panic-inner { display: flex; align-items: center; gap: clamp(16px,3vw,40px); padding: 20px var(--pad-out); flex-wrap: wrap; }
.panic-key { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-400); }
.panic-key .pulse { width: 5px; height: 5px; background: var(--red-500); box-shadow: 0 0 8px rgba(245,80,46,0.9); animation: blink 1.4s infinite; }
.urgency-band.tone-calm .panic-key,
.urgency-band.tone-info .panic-key { color: var(--blue-300); }
.urgency-band.tone-calm .panic-key .pulse,
.urgency-band.tone-info .panic-key .pulse {
  background: var(--blue-400);
  box-shadow: 0 0 8px rgba(59,130,246,0.9);
}
.urgency-band.tone-info { background: rgba(37,99,235,0.06); }
.panic-copy { flex: 1; min-width: 240px; }
.panic-copy b { display: block; font-size: 15.5px; font-weight: 500; color: var(--ink); }
.panic-copy span { display: block; margin-top: 3px; font-size: 15px; color: var(--para); line-height: 1.55; }
.panic-band + .ticker-sec { margin-top: 0; border-top: 0; }
@media (max-width: 680px) { .panic-inner .btn { width: 100%; justify-content: center; } }

.dive-copy .scene-kick { margin-bottom: 14px; }

/* generic interior split-hero collapse */
@media (max-width: 1080px) {
  .hero-grid,
  .feature-hero-grid { grid-template-columns: 1fr; min-height: 0; }
}