/* ════════════════════════════════════════════════════════════════════
   CyberXYZ — Product pages (shared components)
   Additive layer on top of styles.css. Reuses the same tokens:
   --orange #f5793b · --blue #2e2eff · --ink #0a0a23 · paper surfaces.
   Loaded alongside styles.css on: products/*, pricing, partners, case-studies.
   Nothing here overrides existing homepage selectors.
   ════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────
   NAV — Products dropdown (glass, the one approved floating surface)
   ──────────────────────────────────────────────────────────────────── */
.nav__item { position: relative; }
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
  transition: color .2s ease;
}
.nav__trigger:hover,
.nav__item:hover .nav__trigger,
.nav__item:focus-within .nav__trigger { color: var(--orange); }
.nav__caret {
  width: 9px; height: 9px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret { transform: rotate(225deg) translateY(-1px); }

.nav__menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 320px;
  padding: 10px;
  /* solid (not transparent) */
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(15,15,40,.16), 0 4px 12px rgba(15,15,40,.08),
              inset 0 1px 0 rgba(255,255,255,0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.7,.2,1), visibility .22s;
  z-index: 120;
}
.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__menu::before { /* bridge the 16px gap so hover doesn't drop */
  content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px;
}
.nav__menu-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 11px;
  transition: background .18s ease, transform .18s ease;
}
.nav__menu-link:hover { background: rgba(245,121,59,.08); transform: translateX(2px); }
.nav__menu-ico {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--line);
}
.nav__menu-ico img { width: 20px; height: 20px; }
.nav__menu-tx b {
  display: block;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--orange);
  letter-spacing: -.01em;
}
.nav__menu-tx span {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  margin-top: 1px;
}
@media (max-width: 860px) {
  .nav__item { display: none; } /* mobile uses the existing collapsed pattern */
}

/* ────────────────────────────────────────────────────────────────────
   PRODUCT HERO — sub-page hero (paper + soft radial, like riskscore/cta)
   ──────────────────────────────────────────────────────────────────── */
.phero {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--gutter) clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.phero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 82% 12%, var(--orange-soft) 0%, transparent 58%),
    radial-gradient(ellipse 55% 75% at 8% 92%, var(--blue-soft) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}
.phero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(10,10,35,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,35,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 75% 72% at 50% 34%, #000 22%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 72% at 50% 34%, #000 22%, transparent 72%);
}
/* hero background spans the viewport (not a centered box) */
.phero::before, .phero::after { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); }
.phero__copy { position: relative; z-index: 2; }
.phero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 18px 0 0;
  color: var(--ink);
}
.phero__title em { font-style: italic; color: var(--orange); }
.phero__title .ink { color: var(--ink); }
.phero__sub {
  margin: 22px 0 0;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 52ch;
}
.phero__sub strong { color: var(--ink); font-weight: 600; }
.phero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.phero__meta {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.phero__meta li { display: flex; flex-direction: column; gap: 2px; list-style: none; }
.phero__meta b {
  font-family: var(--font-display);
  font-weight: 800; font-size: 26px; color: var(--ink); letter-spacing: -.02em;
}
.phero__meta span { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); }
.phero__art { position: relative; z-index: 2; }
@media (max-width: 920px) {
  .phero { grid-template-columns: 1fr; }
  .phero__art { order: 2; }
}

/* "world's first" category badge */
.first-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--orange);
  background: var(--orange-soft);
  border: 1px solid var(--orange-line);
  border-radius: 999px;
  padding: 7px 13px;
}
.first-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(245,121,59,.5);
  animation: firstPulse 2.4s ease-out infinite;
}
@keyframes firstPulse {
  0% { box-shadow: 0 0 0 0 rgba(245,121,59,.45); }
  70% { box-shadow: 0 0 0 8px rgba(245,121,59,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,121,59,0); }
}

/* ────────────────────────────────────────────────────────────────────
   MEDIA FRAMES — wrap real screenshots / video in on-brand chrome
   (.frame--browser / .frame--editor reuse the homepage .mock look)
   ──────────────────────────────────────────────────────────────────── */
.frame {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow .3s ease, transform .3s ease;
}
.frame:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.frame__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.frame__dots { display: flex; gap: 6px; }
.frame__dots i { width: 11px; height: 11px; border-radius: 50%; background: #d9d9e3; display: block; }
.frame__dots i:nth-child(1) { background: #ff5f57; }
.frame__dots i:nth-child(2) { background: #febc2e; }
.frame__dots i:nth-child(3) { background: #28c840; }
.frame__addr {
  flex: 1; margin-left: 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-4);
  background: var(--white); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.frame__tab {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
  background: var(--white); border: 1px solid var(--line);
  border-bottom: none; border-radius: 8px 8px 0 0; padding: 6px 14px;
}
.frame__body { display: block; line-height: 0; }
.frame__body img, .frame__body video { width: 100%; height: auto; display: block; }
.frame__cap {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
  text-align: right; margin-top: 10px;
}

/* PLACEHOLDER — labelled, on-brand, holds final aspect ratio (no CLS) */
.ph {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(135deg, var(--bg-2) 0 14px, var(--bg) 14px 28px);
  color: var(--ink-4);
}
.ph[data-ratio="16x9"] { aspect-ratio: 16 / 9; }
.ph[data-ratio="4x3"]  { aspect-ratio: 4 / 3; }
.ph[data-ratio="1x1"]  { aspect-ratio: 1 / 1; }
.ph__tag {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--white); border: 1px dashed var(--orange-line);
  border-radius: 8px; padding: 8px 14px; text-align: center;
}
.ph__tag b { color: var(--orange); display: block; font-size: 11px; margin-top: 3px; }

/* ────────────────────────────────────────────────────────────────────
   FEATURE GRID (reuses .card hover language)
   ──────────────────────────────────────────────────────────────────── */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 18px;
}
.feat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
  position: relative;
  overflow: hidden;
}
.feat::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.feat:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--orange-line); }
.feat:hover::after { transform: scaleX(1); }
.feat__ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 16px;
  background: var(--orange-soft); border: 1px solid var(--orange-line);
  color: var(--orange);
}
.feat__ico svg { width: 22px; height: 22px; display: block; }
.feat__ico img { width: 22px; height: 22px; object-fit: contain; }
/* differentiator cards use reference logos / wordmark badges on white tiles */
.feat--diff .feat__ico { background: var(--white); border-color: var(--line); width: auto; min-width: 44px; padding: 0 10px; }
.feat--diff .feat__ico img { height: 26px; width: auto; }
.refbadge {
  font-family: var(--font-mono); font-weight: 700; font-size: 15px; letter-spacing: .03em;
  color: var(--ink); position: relative; padding: 0 2px;
}
.refbadge--strike::after {
  content: ""; position: absolute; left: -3px; right: -3px; top: 52%;
  height: 2.5px; background: var(--block); border-radius: 2px; transform: rotate(-10deg);
}
.feat h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0 0 8px; letter-spacing: -.01em; }
.feat p { color: var(--ink-3); margin: 0; font-size: 14.5px; line-height: 1.55; }

/* ────────────────────────────────────────────────────────────────────
   SHOWCASE — homepage "surface" mock (left) + capability list (right)
   Reuses styles.css .mock / .mock--editor / .mock--cli verbatim.
   ──────────────────────────────────────────────────────────────────── */
.showcase {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.showcase__art { display: flex; flex-direction: column; gap: 16px; }
.showcase__logos {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.showcase__logos img { height: 30px; width: auto; filter: grayscale(.2) opacity(.92); transition: filter .3s ease, transform .3s ease; }
.showcase__logos img:hover { filter: grayscale(0) opacity(1); transform: translateY(-2px); }
.showcase__logos figcaption {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
  margin-left: auto;
}
@media (max-width: 920px) { .showcase { grid-template-columns: 1fr; } }
/* bigger-visual variant: give the art column more room + larger mock text */
.showcase--lg { grid-template-columns: 1.45fr .9fr; }
.showcase--lg .mock pre code { font-size: 14px; line-height: 1.95; }
@media (max-width: 920px) { .showcase--lg { grid-template-columns: 1fr; } }

/* capability list — typographic, no emoji */
.caplist { list-style: none; margin: 0; padding: 0; }
.caplist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.caplist li:last-child { border-bottom: 0; }
.caplist__n {
  display: inline-grid; place-items: center;
  min-width: 32px; height: 32px; padding: 0 7px;
  border-radius: 9px;
  background: var(--orange-soft); color: var(--orange); border: 1px solid var(--orange-line);
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
}
.caplist li:nth-child(even) .caplist__n {
  background: var(--blue-soft); color: var(--blue); border-color: var(--blue-line);
}
.caplist b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16.5px; letter-spacing: -.01em; }
.caplist span { display: block; color: var(--ink-3); font-size: 14px; line-height: 1.5; margin-top: 3px; }

/* ────────────────────────────────────────────────────────────────────
   HOVER CARD — built mock of the extension's hover tooltip (vuln detail)
   ──────────────────────────────────────────────────────────────────── */
.hoverdemo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
@media (max-width: 860px) { .hoverdemo { grid-template-columns: 1fr; } }

.hovercard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 420px;
}
.hovercard__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.hovercard__pkg { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--ink); }
.pill {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.pill--block { color: #fff; background: var(--block); }
.pill--quar  { color: #fff; background: var(--alert); }
.pill--allow { color: #fff; background: var(--ok); }

.hovercard__score {
  display: flex; align-items: baseline; gap: 8px;
  padding: 16px 18px 12px;
}
.hovercard__score-num { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--block); line-height: 1; letter-spacing: -.03em; }
.hovercard__score-den { font-family: var(--font-mono); font-size: 13px; color: var(--ink-4); }
.hovercard__score-label { font-family: var(--font-mono); font-size: 11px; color: var(--block); margin-left: auto; text-transform: uppercase; letter-spacing: .06em; }

.hovercard__rows { list-style: none; margin: 0; padding: 0 18px 6px; }
.hovercard__rows li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-top: 1px dashed var(--line); font-size: 13px;
}
.hovercard__rows li span { color: var(--ink-4); font-family: var(--font-mono); font-size: 11.5px; }
.hovercard__rows li b { color: var(--ink-2); text-align: right; font-weight: 600; }
.hovercard__rows li b.is-bad { color: var(--block); }
.hovercard__foot {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
  padding: 12px 18px; background: var(--bg-2); border-top: 1px solid var(--line);
}

/* hero composition: a flagged code line with the hover card popping out */
.hero-hover { position: relative; max-width: 460px; margin-left: auto; }
.hero-hover__line {
  font-family: var(--font-mono); font-size: 14px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm); color: var(--ink-2);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hero-hover__line .ln { color: var(--ink-4); user-select: none; }
.hero-hover__line .k  { color: #2e2eff; }
.hero-hover__line .v  { color: #0a7d54; }
.hero-hover__line .flag {
  margin-left: auto; color: var(--block); font-size: 12px;
  display: inline-flex; align-items: center; gap: 5px;
}
.hero-hover__line .cursor {
  width: 2px; height: 17px; background: var(--orange); display: inline-block;
  animation: hhBlink 1.1s steps(1) infinite;
}
@keyframes hhBlink { 50% { opacity: 0; } }
.hero-hover .hovercard { position: relative; margin-left: 24px; }
.hero-hover .hovercard::before {
  content: ""; position: absolute; top: -7px; left: 38px;
  width: 12px; height: 12px; background: var(--white);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
@media (max-width: 920px) { .hero-hover { margin: 0 auto; } }

/* ────────────────────────────────────────────────────────────────────
   EDITORIAL FEATURE CARD — typographic, no icon (research-pub style)
   ──────────────────────────────────────────────────────────────────── */
.efeat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.efeat {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  border-top: 3px solid var(--orange);
  padding: 24px 22px;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.efeat:nth-child(even) { border-top-color: var(--blue); }
.efeat:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.efeat__k { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--orange); }
.efeat:nth-child(even) .efeat__k { color: var(--blue); }
.efeat h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 8px 0 8px; letter-spacing: -.01em; }
.efeat p { color: var(--ink-3); margin: 0; font-size: 14px; line-height: 1.55; }

/* ────────────────────────────────────────────────────────────────────
   SEVERITY LEGEND
   ──────────────────────────────────────────────────────────────────── */
.sev { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.sev__item {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.sev__swatch { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; }
.sev__swatch--crit { background: var(--block); }
.sev__swatch--high { background: var(--alert); }
.sev__swatch--med  { background: var(--orange); }
.sev__swatch--low  { background: var(--ok); }
.sev__item b { font-size: 14px; font-weight: 600; display: block; }
.sev__item span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }

/* ────────────────────────────────────────────────────────────────────
   STEPPER — numbered horizontal flow (install / enroll)
   ──────────────────────────────────────────────────────────────────── */
.stepper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  counter-reset: step;
}
.stepper__step {
  position: relative;
  padding: 0 26px;
  border-left: 1px solid var(--line);
}
.stepper__step:first-child { border-left: 0; padding-left: 0; }
.stepper__num {
  counter-increment: step;
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  margin-bottom: 16px;
}
.stepper__step:last-child .stepper__num { background: var(--orange); }
.stepper__num::before { content: counter(step); }
.stepper__step h3 { font-family: var(--font-display); font-size: 17px; margin: 0 0 8px; }
.stepper__step p { color: var(--ink-3); font-size: 14px; margin: 0 0 14px; }
@media (max-width: 720px) {
  .stepper__step { border-left: 0; padding: 0; margin-bottom: 28px; }
}

/* code block used inside steps / sections */
.codeblock {
  background: var(--ink);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  overflow-x: auto;
}
.codeblock code { color: #e7e7f0; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; white-space: pre; display: block; }
.codeblock .tok-cmt { color: #8a8aa0; }
.codeblock .tok-cmd { color: var(--orange-2); }
.codeblock .tok-str { color: #7ee0a0; }
.codeblock .tok-key { color: #9db4ff; }

/* ────────────────────────────────────────────────────────────────────
   COMMIT-LEVEL DIFF — signature Platform visual (GitHub red/green)
   ──────────────────────────────────────────────────────────────────── */
.commit {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.commit__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--font-mono); font-size: 12.5px;
}
.commit__hash { color: var(--blue); font-weight: 700; }
.commit__msg  { color: var(--ink-2); }
.commit__meta { margin-left: auto; color: var(--ink-4); }
.commit__file {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-2);
  padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--white);
  display: flex; gap: 8px; align-items: center;
}
.commit__file::before { content: "📄"; font-size: 13px; }
.diff { margin: 0; }
.diff__line {
  display: grid; grid-template-columns: 56px 26px 1fr;
  font-family: var(--font-mono); font-size: 14px; line-height: 2.1;
}
.diff__gutter { color: var(--ink-4); text-align: right; padding-right: 14px; user-select: none; background: #f6f8fa; }
.diff__sign   { text-align: center; user-select: none; color: var(--ink-4); }
.diff__code   { white-space: pre; overflow-x: auto; padding-right: 16px; color: var(--ink-2); }
/* GitHub-authentic diff colours */
.diff__line--add { background: #e6ffec; }
.diff__line--add .diff__gutter { background: #ccffd8; }
.diff__line--add .diff__sign { color: #1a7f37; }
.diff__line--del { background: #ffebe9; }
.diff__line--del .diff__gutter { background: #ffd7d5; }
.diff__line--del .diff__sign { color: #cf222e; }
/* our finding: orange highlight (brand), not dark */
.diff__line--flag { background: rgba(245,121,59,.16); box-shadow: inset 3px 0 0 var(--orange); }
.diff__line--flag .diff__gutter { background: rgba(245,121,59,.22); }
.diff__line--flag .diff__sign { color: var(--orange); }
.diff__line--flag .diff__code { color: var(--ink); font-weight: 600; }
.diff__note {
  background: var(--orange-soft); color: var(--ink-2);
  border-left: 3px solid var(--orange);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  padding: 12px 20px 12px 66px;
  display: flex; gap: 10px; align-items: flex-start;
}
.diff__note .tag {
  flex: 0 0 auto; color: #fff;
  background: var(--orange); border-radius: 5px;
  padding: 2px 8px; font-weight: 700; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .05em;
}
.diff__note b { color: var(--orange); font-weight: 700; }

/* ────────────────────────────────────────────────────────────────────
   PARTNERS strip — greyscale at rest, color on hover (calm, on-brand)
   ──────────────────────────────────────────────────────────────────── */
.partners { text-align: center; }
.partners__grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: clamp(28px, 5vw, 64px);
  margin-top: 12px;
}
.partners__logo { height: 34px; width: auto; }
.partners__logo {
  filter: grayscale(1) opacity(.55);
  transition: filter .3s ease, transform .3s ease;
}
.partners__logo:hover { filter: grayscale(0) opacity(1); transform: translateY(-2px); }

/* ────────────────────────────────────────────────────────────────────
   MARKER HIGHLIGHT — editorial highlighter swipe on a key phrase
   ──────────────────────────────────────────────────────────────────── */
.mark {
  background-color: transparent; /* kill the native <mark> yellow */
  background-image: linear-gradient(0deg, rgba(245,121,59,.42), rgba(245,121,59,.42));
  background-repeat: no-repeat;
  background-size: 0% 52%;
  background-position: 0 82%;
  padding: 0 3px; margin: 0 -1px;
  font-weight: 700; color: var(--ink);
  transition: background-size .9s cubic-bezier(.2,.7,.2,1) .25s;
}

/* soft warm-paper tint surface (design-language) — replaces flat grey bands */
.soft-tint {
  background:
    radial-gradient(ellipse 60% 80% at 82% 15%, var(--orange-soft) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 8% 90%, var(--blue-soft) 0%, transparent 60%),
    var(--bg);
}
.reveal.in-view .mark, .in-view .mark { background-size: 100% 44%; }

/* ────────────────────────────────────────────────────────────────────
   BRAIN FIGURE — reuse of the homepage decision diagram (animated)
   ──────────────────────────────────────────────────────────────────── */
.brain-figure { width: 100%; max-width: 560px; margin: 0 auto; }
.brain-figure .diagram { width: 100%; height: auto; }
.brain-figure .hero__caption {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); margin-top: 8px;
}

/* ────────────────────────────────────────────────────────────────────
   ENROLL — glass / morphism step cards (per request: no flat black)
   ──────────────────────────────────────────────────────────────────── */
.enroll {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px;
}
.enroll__card {
  position: relative; padding: 26px 24px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(240,240,255,0.80) 52%, rgba(255,248,245,0.88) 100%);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 14px 36px rgba(15,15,40,.10), 0 2px 6px rgba(15,15,40,.04), inset 0 1px 0 rgba(255,255,255,0.75);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.enroll__card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(15,15,40,.14), inset 0 1px 0 rgba(255,255,255,.8); }
.enroll__card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 90% at 0% 0%, rgba(245,121,59,.12), transparent 55%);
}
.enroll__num {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--orange); color: #fff; font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  box-shadow: 0 6px 16px rgba(245,121,59,.35); margin-bottom: 16px;
}
.enroll__card h3 { font-family: var(--font-display); font-size: 17px; margin: 0 0 8px; }
.enroll__card p { color: var(--ink-3); font-size: 14px; margin: 0 0 14px; }
.codeline-lite {
  font-family: var(--font-mono); font-size: 13px;
  background: rgba(10,10,35,.045); border: 1px solid rgba(10,10,35,.08);
  border-radius: 9px; padding: 11px 14px; color: var(--ink-2);
}
.codeline-lite .c { color: var(--orange); font-weight: 700; }
.codeline-lite .cm { color: var(--ink-4); }

/* ────────────────────────────────────────────────────────────────────
   BIGGER LOGO ROW (cross-platform / ecosystem emphasis)
   ──────────────────────────────────────────────────────────────────── */
.showcase__logos--lg img { height: 48px; }
.logo-row {
  display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 52px);
  flex-wrap: wrap; margin-top: 14px;
}
.logo-row img { height: 40px; width: auto; filter: grayscale(.15); transition: transform .3s ease, filter .3s ease; }
.logo-row img:hover { transform: translateY(-3px); filter: grayscale(0); }
.logo-row figure { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
.logo-row figcaption { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }

/* ────────────────────────────────────────────────────────────────────
   AUDIT — floaty ecosystem icons (subtle, staggered)
   ──────────────────────────────────────────────────────────────────── */
.feat--audit .feat__ico { background: var(--white); border-color: var(--line); animation: floaty 4s ease-in-out infinite; }
.feat--audit:nth-child(2) .feat__ico { animation-delay: .5s; }
.feat--audit:nth-child(3) .feat__ico { animation-delay: 1s; }
.feat--audit:nth-child(4) .feat__ico { animation-delay: 1.5s; }
.feat--audit:nth-child(5) .feat__ico { animation-delay: 2s; }
.feat--audit:nth-child(6) .feat__ico { animation-delay: 2.5s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ────────────────────────────────────────────────────────────────────
   AUDIT ROTATOR — "xyz audit <ecosystem>" gear-scroll animation
   ──────────────────────────────────────────────────────────────────── */
.rotator {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.rotator__cmd {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--bg-2);
  font-family: var(--font-mono); font-size: 14px; color: var(--ink-2);
}
.rotator__cmd .p { color: var(--orange); font-weight: 700; }
.rotator__cmd .blink { width: 8px; height: 17px; background: var(--orange); display: inline-block; animation: hhBlink 1.1s steps(1) infinite; }
.rotator__reel { --row: 76px; height: var(--row); overflow: hidden; position: relative; }
.rotator__list { animation: auditReel 9s cubic-bezier(.7,0,.3,1) infinite; }
.rotator__row {
  height: var(--row); box-sizing: border-box;
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
}
.rotator__logo { width: 34px; height: 34px; object-fit: contain; flex: 0 0 34px; }
.rotator__row .tx b { display: block; font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--ink); }
.rotator__row .tx span { display: block; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); }
.rotator__verdict {
  margin-left: auto; font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px;
}
.rotator__verdict.is-block { color: var(--block); background: rgba(220,38,38,.10); }
.rotator__verdict.is-ok    { color: var(--ok);    background: rgba(22,163,74,.10); }
@keyframes auditReel {
  0%,18%   { transform: translateY(0); }
  25%,43%  { transform: translateY(calc(var(--row) * -1)); }
  50%,68%  { transform: translateY(calc(var(--row) * -2)); }
  75%,93%  { transform: translateY(calc(var(--row) * -3)); }
  100%     { transform: translateY(calc(var(--row) * -4)); }
}

/* ────────────────────────────────────────────────────────────────────
   CI ROWS — staged "build runs" + blocked pulse + logo strip
   ──────────────────────────────────────────────────────────────────── */
.reveal.in-view .ci__row { animation: ciDrop .5s both; }
.reveal.in-view .ci__row--ok:nth-of-type(1) { animation-delay: .15s; }
.reveal.in-view .ci__row:nth-of-type(2) { animation-delay: .45s; }
.reveal.in-view .ci__row--block { animation-delay: .8s; }
@keyframes ciDrop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ci__row--block { position: relative; }
.ci__row--block::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(220,38,38,.4); animation: ciPulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes ciPulse { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,.35); } 70% { box-shadow: 0 0 0 10px rgba(220,38,38,0); } 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); } }

/* ────────────────────────────────────────────────────────────────────
   TERMINAL — clean light terminal frame (scanner hero)
   ──────────────────────────────────────────────────────────────────── */
.term { background: linear-gradient(180deg, #fbfcff 0%, #eef1f8 100%); padding: 22px 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.term__line {
  font-family: var(--font-mono); font-size: 14px; line-height: 2; color: var(--ink-2);
  display: flex; align-items: baseline; gap: 10px; white-space: nowrap;
}
.term__line .prompt { color: var(--orange); font-weight: 700; }
.term__line .ok    { color: var(--ok); }
.term__line .block { color: var(--block); }
.term__line .alert { color: var(--alert); }
.term__line .muted { color: var(--ink-4); }
.term__line.is-typed { overflow: hidden; }
.term__cmd { color: var(--ink-2); }
.term__caret { display: inline-block; width: 8px; height: 16px; background: var(--orange); vertical-align: text-bottom; margin-left: 1px; animation: hhBlink 1.1s steps(1) infinite; }
.term__out { opacity: 1; transition: opacity .25s ease; }
.term--anim .term__out { opacity: 0; }
.term--anim .term__out.is-shown { opacity: 1; }

/* ────────────────────────────────────────────────────────────────────
   COMMAND ROWS — modern install lines with copy buttons
   ──────────────────────────────────────────────────────────────────── */
.cmd-stack { display: flex; flex-direction: column; gap: 10px; }
.cmd-stack__label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); margin: 4px 0 -2px; }
.cmd {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 11px;
  padding: 12px 12px 12px 16px;
  font-family: var(--font-mono); font-size: 13.5px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cmd:hover { border-color: var(--orange-line); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.cmd__prompt { color: var(--orange); font-weight: 700; }
.cmd__text { color: var(--ink); flex: 1; white-space: nowrap; overflow-x: auto; }
.cmd__copy {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--bg-2);
  color: var(--ink-3); font-family: var(--font-mono); font-size: 11px;
  padding: 7px 13px; border-radius: 8px; cursor: pointer;
  transition: all .2s ease; display: inline-flex; align-items: center; gap: 6px;
}
.cmd__copy:hover { border-color: var(--orange); color: var(--orange); }
.cmd__copy.is-copied { background: var(--orange); color: #fff; border-color: var(--orange); }

/* ────────────────────────────────────────────────────────────────────
   CMD LIST — the audit command list (logo + command + file)
   ──────────────────────────────────────────────────────────────────── */
.cmd-list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cmd-list li {
  display: flex; align-items: center; gap: 13px;
  background: var(--white); border: 1px solid var(--line); border-radius: 11px; padding: 13px 16px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.cmd-list li:hover { transform: translateX(5px); border-color: var(--orange-line); box-shadow: var(--shadow-sm); }
.cmd-list__logo { width: 24px; height: 24px; object-fit: contain; flex: 0 0 24px; }
.cmd-list__logo--glyph { color: var(--orange); font-weight: 700; text-align: center; font-family: var(--font-mono); }
.cmd-list__cmd { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); }
.cmd-list__cmd b { color: var(--orange); font-weight: 700; }
.cmd-list__file { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); white-space: nowrap; }
@media (max-width: 520px) { .cmd-list__file { display: none; } }

/* ────────────────────────────────────────────────────────────────────
   ENROLL — sequential step animation (fill bar + pulsing number)
   ──────────────────────────────────────────────────────────────────── */
.enroll__card::after {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
  animation: stepFill 6s ease-in-out infinite;
}
.enroll__card:nth-child(1)::after { animation-delay: 0s; }
.enroll__card:nth-child(2)::after { animation-delay: 2s; }
.enroll__card:nth-child(3)::after { animation-delay: 4s; }
@keyframes stepFill { 0% { width: 0; } 10% { width: 100%; } 30% { width: 100%; } 36%,100% { width: 0; } }
.enroll__card:nth-child(1) .enroll__num { animation: numPulse 6s ease-in-out infinite 0s; }
.enroll__card:nth-child(2) .enroll__num { animation: numPulse 6s ease-in-out infinite 2s; }
.enroll__card:nth-child(3) .enroll__num { animation: numPulse 6s ease-in-out infinite 4s; }
@keyframes numPulse {
  0%,30%,100% { box-shadow: 0 6px 16px rgba(245,121,59,.30); transform: scale(1); }
  6% { box-shadow: 0 0 0 7px rgba(245,121,59,.22); transform: scale(1.08); }
}

/* ────────────────────────────────────────────────────────────────────
   CI PIPELINE — jobs flow to the gate; some pass, one blocked
   ──────────────────────────────────────────────────────────────────── */
.pipe { display: flex; flex-direction: column; gap: 16px; }
.pipe__lane {
  display: flex; align-items: center; gap: 20px;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 22px; box-shadow: var(--shadow-sm);
}
.pipe__job { flex: 0 0 104px; }
.pipe__job b, .pipe__job span { white-space: nowrap; }

/* tree: one aggregated source → branches to N job lanes */
.pipetree { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; }
.pipetree__source {
  position: relative; align-self: center;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; box-shadow: var(--shadow-sm); text-align: center;
}
.pipetree__source-logos { display: flex; gap: 14px; align-items: center; justify-content: center; }
.pipetree__source-logos img { width: 26px; height: 26px; object-fit: contain; }
.pipetree__source-label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); margin-top: 10px; }
.pipetree__source::after { /* horizontal feed from source to the spine */
  content: ""; position: absolute; right: -24px; top: 50%; width: 24px; height: 2px; background: var(--line);
}
.pipetree__lanes { position: relative; display: flex; flex-direction: column; gap: 16px; }
.pipetree__lanes::before { /* continuous vertical spine, full height of the stack */
  content: ""; position: absolute; left: -24px; top: 0; bottom: 0; width: 2px; background: var(--line);
}
.pipetree .pipe__lane { position: relative; }
.pipetree .pipe__lane::before { /* horizontal tick from the spine to each lane */
  content: ""; position: absolute; left: -24px; top: 50%; width: 24px; height: 2px; background: var(--line);
}
@media (max-width: 760px) {
  .pipetree { grid-template-columns: 1fr; gap: 20px; }
  .pipetree__source::after, .pipetree__lanes::before, .pipetree .pipe__lane::before { display: none; }
}

/* ────────────────────────────────────────────────────────────────────
   STATUS BAR — "ENFORCING · registries ONLINE" (Platform hero)
   ──────────────────────────────────────────────────────────────────── */
.statusbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 16px; box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.statusbar__pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--ok); background: rgba(22,163,74,.10); border-radius: 999px; padding: 7px 13px;
}
.statusbar__pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: firstPulse 2.4s ease-out infinite; }
.statusbar__chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.statusbar__sep { width: 1px; height: 22px; background: var(--line); }
.statusbar__ecos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.statusbar__eco { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); letter-spacing: .04em; }
.statusbar__eco img { width: 18px; height: 18px; object-fit: contain; }
.statusbar__eco .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.statusbar__ecos i.div { width: 1px; height: 16px; background: var(--line); display: inline-block; }
.statusbar__refresh { margin-left: auto; color: var(--ink-4); font-size: 15px; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pipe__job { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); line-height: 1.3; }
.pipe__src-logo { width: 22px; height: 22px; object-fit: contain; flex: 0 0 22px; }
.pipe__job b { display: block; font-size: 13px; color: var(--ink); }
.pipe__job span { font-size: 10.5px; color: var(--ink-4); }
/* chain: fixed-size node pills + flex connectors (no overlap) */
.pipe__chain { display: flex; align-items: center; gap: 0; min-width: 0; flex: 1 1 auto; }
.pipe__node {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 12px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
  background: rgba(22,163,74,.06); border-color: rgba(22,163,74,.4); color: #1a7f37;
}
.pipe__node.gate { font-weight: 700; }
.pipe__lane--block .pipe__node.gate { background: rgba(220,38,38,.08); border-color: var(--block); color: var(--block); }
.pipe__conn { flex: 1 1 auto; min-width: 18px; height: 2px; margin: 0 4px; position: relative; background: var(--line); border-radius: 2px; overflow: hidden; }
.pipe__conn::after {
  content: ""; position: absolute; inset: 0; background-repeat: no-repeat; background-size: 200% 100%;
  background-image: linear-gradient(90deg, transparent 20%, var(--ok) 50%, transparent 80%);
  animation: connFlow 1.6s linear infinite;
}
@keyframes connFlow { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
.pipe__out {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  padding: 7px 13px; border-radius: 999px; white-space: nowrap;
}
.pipe__out.ok { color: var(--ok); background: rgba(22,163,74,.10); }
.pipe__out.block { color: var(--block); background: rgba(220,38,38,.10); animation: ciPulse 2.4s ease-out infinite; }
@media (max-width: 680px) {
  .pipe__lane { flex-wrap: wrap; }
  .pipe__chain { order: 3; width: 100%; }
}

/* ────────────────────────────────────────────────────────────────────
   PRICING — value-based tiers (no figures), comparison table, FAQ
   ──────────────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 880px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan--featured { border: 1.5px solid var(--blue); box-shadow: var(--shadow); }
.plan--enterprise { border: 1.5px solid var(--orange); }
.plan__count { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 16px; }
.plan__count b { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; color: var(--ink); }
.plan__count span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); }

/* "included in every plan" band */
.incl { text-align: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 28px; box-shadow: var(--shadow-sm); }
.incl__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--orange); }
.incl__items { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink-2); margin: 10px 0 16px; }
.incl__items b { color: var(--ink); }

/* logos inside comparison rows */
.cmp__rowlogos { display: inline-flex; gap: 7px; align-items: center; margin-left: 8px; vertical-align: middle; }
.cmp__rowlogos img { height: 16px; width: auto; }
.plan__badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff; font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.plan__name { font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -.02em; }
.plan__target { color: var(--ink-3); font-size: 14px; line-height: 1.5; margin: 8px 0 18px; min-height: 42px; }
.plan__price { font-family: var(--font-mono); font-size: 13px; color: var(--ink-4); padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.plan__price b { display: block; font-family: var(--font-display); font-size: 20px; color: var(--ink); font-weight: 700; margin-bottom: 2px; }
.plan__features { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
.plan__features li { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--ink-2); }
.plan__features li::before { content: "✓"; color: var(--ok); font-weight: 700; }
.plan__features li.muted { color: var(--ink-4); }
.plan__features li.muted::before { content: "—"; color: var(--ink-4); }
.plan__cta { margin-top: auto; }
.plan__cta .btn { width: 100%; justify-content: center; }

/* comparison table */
.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp th, .cmp td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: center; font-size: 14px; }
.cmp th:first-child, .cmp td:first-child { text-align: left; color: var(--ink-2); font-weight: 500; }
.cmp thead th { font-family: var(--font-display); font-weight: 700; font-size: 16px; border-bottom: 1.5px solid var(--ink); }
.cmp thead th.is-featured { color: var(--blue); }
.cmp td.is-featured { background: var(--blue-soft); }
.cmp .yes { color: var(--ok); font-weight: 700; }
.cmp .part { color: var(--alert); font-weight: 700; }
.cmp .no { color: var(--ink-4); }
.cmp thead th img { height: 22px; width: auto; display: inline-block; vertical-align: middle; }
.cmp thead th .th-us { color: var(--blue); font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.cmp tbody tr.cmp__score td { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink-3); border-bottom: 1.5px solid var(--line); }
.cmp tbody tr.cmp__score td.is-featured { color: var(--blue); }
.cmp tbody tr:hover td { background: var(--bg-2); }
.cmp tbody tr:hover td.is-featured { background: var(--blue-soft); }

/* FAQ accordion (native details/summary, no JS) */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink);
  padding: 22px 0; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--orange); font-size: 22px; font-weight: 400; transition: transform .25s ease; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { color: var(--ink-3); margin: 0; padding: 0 0 22px; font-size: 15px; line-height: 1.6; max-width: 70ch; }

/* ────────────────────────────────────────────────────────────────────
   PARTNER TYPES + form select
   ──────────────────────────────────────────────────────────────────── */
.ptypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.ptype {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.ptype:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--orange-line); }
.ptype__tag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--orange); }
.ptype:nth-child(even) .ptype__tag { color: var(--blue); }
.ptype h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin: 10px 0 8px; }
.ptype p { color: var(--ink-3); font-size: 14.5px; line-height: 1.55; margin: 0; }

.pform-select {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--white);
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.pform-select:focus { outline: none; border-color: var(--blue); }

/* ────────────────────────────────────────────────────────────────────
   SURFACE STORY — alternating left/right feature blocks (homepage)
   ──────────────────────────────────────────────────────────────────── */
.sstory {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px); align-items: center;
  margin-top: clamp(52px, 8vw, 104px);
}
.sstory__kicker { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--orange); }
.sstory--flip .sstory__kicker { color: var(--blue); }
.sstory__copy h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; line-height: 1.05; margin: 14px 0 0; }
.sstory__copy h3 em { font-style: italic; color: var(--orange); }
.sstory--flip .sstory__copy h3 em { color: var(--blue); }
.sstory__copy p { color: var(--ink-3); margin: 16px 0 0; font-size: 16px; line-height: 1.6; }
.sstory__copy p strong { color: var(--ink); font-weight: 600; }
.sstory__list { list-style: none; margin: 18px 0 0; padding: 0; }
.sstory__list li { position: relative; padding: 7px 0 7px 26px; font-size: 14.5px; color: var(--ink-2); }
.sstory__list li::before { content: "→"; position: absolute; left: 0; top: 7px; color: var(--orange); font-family: var(--font-mono); }
.sstory__list code { color: var(--ink); }
.sstory__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-family: var(--font-mono); font-size: 13px; color: var(--blue); border-bottom: 1px solid var(--blue-line); padding-bottom: 2px; }
.sstory__link:hover { color: var(--orange); border-color: var(--orange-line); }
.sstory__art { display: flex; flex-direction: column; gap: 16px; }
.sstory--flip .sstory__art { order: 2; }
@media (max-width: 880px) {
  .sstory { grid-template-columns: 1fr; gap: 28px; }
  .sstory--flip .sstory__art { order: 0; }
}

/* ────────────────────────────────────────────────────────────────────
   LIVE PROXY animation — rows start hidden, stream in on view
   ──────────────────────────────────────────────────────────────────── */
.mock--proxy .proxy__row { opacity: 0; }
.reveal.in-view .mock--proxy .proxy__row { animation: pxRow .5s ease both; }
.reveal.in-view .mock--proxy .proxy__row:nth-child(2) { animation-delay: .2s; }
.reveal.in-view .mock--proxy .proxy__row:nth-child(3) { animation-delay: .5s; }
.reveal.in-view .mock--proxy .proxy__row:nth-child(4) { animation-delay: .8s; }
.reveal.in-view .mock--proxy .proxy__row:nth-child(5) { animation-delay: 1.1s; }
@keyframes pxRow { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ────────────────────────────────────────────────────────────────────
   TYPING editor — caret blinks, diagnostics scan in, hover card pops up
   ──────────────────────────────────────────────────────────────────── */
.mock--editor.is-typing .warn,
.mock--editor.is-typing .alert,
.mock--editor.is-typing .ok { opacity: 0; }
.reveal.in-view .mock--editor.is-typing .warn  { animation: diagIn .45s ease .8s both; }
.reveal.in-view .mock--editor.is-typing .alert { animation: diagIn .45s ease 1.2s both; }
.reveal.in-view .mock--editor.is-typing .ok    { animation: diagIn .45s ease 1.6s both; }
@keyframes diagIn { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } }
.type-caret {
  display: inline-block; width: 7px; height: 15px; background: var(--orange);
  vertical-align: text-bottom; margin-left: 1px; animation: hhBlink 1.1s steps(1) infinite;
}
.hovercard.is-pop { opacity: 0; }
.reveal.in-view .hovercard.is-pop { animation: cardPop .55s cubic-bezier(.2,.7,.2,1) 2.2s both; }
@keyframes cardPop { from { opacity: 0; transform: translateY(16px) scale(.95); } to { opacity: 1; transform: none; } }

/* ────────────────────────────────────────────────────────────────────
   RESEARCH signals FLOW diagram — 6 signals → scorer → verdicts
   ──────────────────────────────────────────────────────────────────── */
.rsig-wrap { max-width: 920px; margin: 0 auto; }
/* tighten the brain section around the (tall) funnel */
.brain { padding-top: clamp(30px, 4vw, 52px); padding-bottom: clamp(24px, 3vw, 40px); }
.brain .section__head { margin-bottom: 20px; }
.section.compare { padding-top: clamp(30px, 4vw, 52px); }
.section.compare .section__head { margin-bottom: 36px; }
.rsig { width: 100%; height: auto; display: block; }
.rsig-node-bg { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.rsig-node:hover .rsig-node-bg { stroke: var(--orange); }
.rsig-lt-bg { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 2; }
.rsig-lt { fill: var(--orange); font-family: var(--font-display); font-weight: 800; font-size: 19px; text-anchor: middle; }
.rsig-ic { stroke: var(--orange); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rsig-title { fill: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: 15px; }
.rsig-sub { fill: var(--ink-4); font-family: var(--font-mono); font-size: 11px; }
.rsig-rail { fill: none; stroke: var(--orange); stroke-opacity: .45; stroke-width: 2; stroke-dasharray: 5 9; animation: rsigFlow 1.2s linear infinite; }
.rsig-rail--out { stroke: var(--blue); stroke-opacity: .45; }
@keyframes rsigFlow { to { stroke-dashoffset: -14; } }
.rsig-core { fill: #fff; stroke: var(--orange); stroke-width: 2.5; }
.rsig-core-ring { fill: none; stroke: var(--orange); stroke-opacity: .35; stroke-dasharray: 4 8; transform-box: fill-box; transform-origin: center; animation: spin 16s linear infinite; }
.rsig-core-label { fill: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 16px; text-anchor: middle; }
.rsig-core-sub { fill: var(--ink-3); font-family: var(--font-mono); font-size: 11px; text-anchor: middle; }
.rsig-vbg { stroke-width: 1.5; }
.rsig-vbg--allow { fill: rgba(22,163,74,.10); stroke: rgba(22,163,74,.4); }
.rsig-vbg--alert { fill: rgba(245,158,11,.12); stroke: rgba(245,158,11,.45); }
.rsig-vbg--quar  { fill: rgba(245,121,59,.12); stroke: var(--orange-line); }
.rsig-vbg--block { fill: rgba(220,38,38,.10); stroke: rgba(220,38,38,.45); }
.rsig-vt { font-family: var(--font-mono); font-weight: 700; font-size: 13px; }
.rsig-vt--allow { fill: var(--ok); } .rsig-vt--alert { fill: var(--alert); }
.rsig-vt--quar  { fill: var(--orange); } .rsig-vt--block { fill: var(--block); }
.rsig-vbg--block { animation: rsigBlockPulse 2.4s ease-in-out infinite; }
@keyframes rsigBlockPulse { 0%,100% { fill: rgba(220,38,38,.08); } 50% { fill: rgba(220,38,38,.20); } }
@media (max-width: 640px) { .rsig-title { font-size: 13px; } .rsig-sub { font-size: 10px; } }

/* ────────────────────────────────────────────────────────────────────
   RESEARCH signals — sequential top-accent scan ("firing in parallel")
   ──────────────────────────────────────────────────────────────────── */
.efeat-grid--sig .efeat { position: relative; overflow: hidden; }
.efeat-grid--sig .efeat::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  animation: sigScan 7s ease-in-out infinite;
}
.efeat-grid--sig .efeat:nth-child(even)::after { background: var(--blue); }
.efeat-grid--sig .efeat:nth-child(1)::after { animation-delay: 0s; }
.efeat-grid--sig .efeat:nth-child(2)::after { animation-delay: .5s; }
.efeat-grid--sig .efeat:nth-child(3)::after { animation-delay: 1s; }
.efeat-grid--sig .efeat:nth-child(4)::after { animation-delay: 1.5s; }
.efeat-grid--sig .efeat:nth-child(5)::after { animation-delay: 2s; }
.efeat-grid--sig .efeat:nth-child(6)::after { animation-delay: 2.5s; }
@keyframes sigScan { 0%,4% { transform: scaleX(0); } 10% { transform: scaleX(1); } 24% { transform: scaleX(1); } 30%,100% { transform: scaleX(0); } }

/* RESEARCH scorer — verdicts light in sequence, block keeps pulsing */
.sev--score .sev__item { animation: sevSeq 5s ease-in-out infinite; }
.sev--score .sev__item:nth-child(1) { animation-delay: 0s; }
.sev--score .sev__item:nth-child(2) { animation-delay: .5s; }
.sev--score .sev__item:nth-child(3) { animation-delay: 1s; }
.sev--score .sev__item:nth-child(4) { animation-delay: 1.5s; }
@keyframes sevSeq { 0%,8% { box-shadow: none; transform: none; } 16% { box-shadow: var(--shadow); transform: translateY(-3px); } 34%,100% { box-shadow: none; transform: none; } }
.sev--score .sev__item:last-child { position: relative; }
.sev--score .sev__item:last-child::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(220,38,38,.35); animation: ciPulse 2.4s ease-out infinite 1.5s;
}

/* ────────────────────────────────────────────────────────────────────
   BRAIN signals — 6 cards (3-up) consistent with Research
   ──────────────────────────────────────────────────────────────────── */
.signals { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .signals { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .signals { grid-template-columns: 1fr; } }
.signal--e::before { background: var(--orange); }
.signal--f::before { background: var(--alert); }
.signal--f .signal__letter { background: #fff5e0; color: var(--alert); border-color: #ffe1a8; }

/* ────────────────────────────────────────────────────────────────────
   CASE STUDY — at-a-glance stats + source note
   ──────────────────────────────────────────────────────────────────── */
.case-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  max-width: 760px; margin: 0 auto 44px; text-align: center;
}
.case-stats > div { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 14px; }
.case-stats b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; color: var(--ink); }
.case-stats span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); margin-top: 4px; display: block; }
.case-note { text-align: center; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); max-width: 720px; margin: 32px auto 0; line-height: 1.6; }
.case-note a { color: var(--blue); border-bottom: 1px solid var(--blue-line); }
@media (max-width: 640px) { .case-stats { grid-template-columns: repeat(2, 1fr); } }

/* ────────────────────────────────────────────────────────────────────
   CONSISTENCY — uniform white content + equal section rhythm
   (hero keeps its own background; integrations grey + partners tint
    + CTA stay as intentional bands)
   ──────────────────────────────────────────────────────────────────── */
.section { padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(48px, 6vw, 84px); }
.provenance, .ecosystems, .integrations { padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(48px, 6vw, 84px); }
.trusted { padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(48px, 6vw, 84px); }
/* drop the stray tinted/coloured bands → uniform paper */
.riskscore, .centrality, .story, .trusted { background: none; }

/* brand balance: blue section tags + orange emphasis (per sales-doc) */
.eyebrow { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue); }
.eyebrow__dot { background: var(--blue); box-shadow: 0 0 0 4px rgba(46,46,255,.16); }

/* enhanced footer column headers */
.footer__kicker {
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  text-transform: none; letter-spacing: -.01em; color: var(--blue);
  margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.footer__kicker::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 26px; height: 2px; background: var(--orange); }

/* ────────────────────────────────────────────────────────────────────
   COMPLEMENT — prevention vs detection (two panels)
   ──────────────────────────────────────────────────────────────────── */
.vsx { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
@media (max-width: 760px) { .vsx { grid-template-columns: 1fr; } }
.vsx__col { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; }
.vsx__col--us { border: 1.5px solid var(--blue); box-shadow: var(--shadow); }
.vsx__tag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-4); }
.vsx__col--us .vsx__tag { color: var(--blue); }
.vsx__h { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.02em; margin: 8px 0 4px; }
.vsx__sub { font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); margin-bottom: 18px; }
.vsx__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 20px; margin: 6px 0 18px; min-height: 26px; }
.vsx__logos img { height: 22px; width: auto; filter: grayscale(1) opacity(.55); transition: filter .3s ease; }
.vsx__logos img:hover { filter: grayscale(0) opacity(1); }
.vsx__list li strong { color: var(--blue); font-weight: 700; }
.vsx__list { list-style: none; margin: 0; padding: 0; }
.vsx__list li { position: relative; padding: 10px 0 10px 28px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.vsx__list li:first-child { border-top: 0; }
.vsx__list li > span:first-child { position: absolute; left: 0; top: 11px; font-weight: 700; }
.vsx__yes { color: var(--ok); }
.vsx__us  { color: var(--blue); }
.vsx__no  { color: var(--ink-4); }
.vsx-foot { text-align: center; margin-top: 28px; font-size: 16px; color: var(--ink-2); }
.vsx-foot strong { color: var(--ink); }
.vsx-along { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px; margin-top: 22px; }
.vsx-along img { height: 26px; width: auto; filter: grayscale(1) opacity(.5); transition: filter .3s ease; }
.vsx-along img:hover { filter: grayscale(0) opacity(1); }
.vsx-along__label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); width: 100%; text-align: center; margin-bottom: 2px; }

/* ────────────────────────────────────────────────────────────────────
   DASHBOARD MOCKS — built UI (replaces screenshot placeholders)
   ──────────────────────────────────────────────────────────────────── */
.dmock { background: var(--white); font-family: var(--font-body); }
.dmock__head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.dmock__stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; line-height: 1; }
.dmock__stat span { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); }
.dmock__stat--block b { color: var(--block); } .dmock__stat--quar b { color: var(--orange); } .dmock__stat--ok b { color: var(--ok); }
.dmock__search { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; background: var(--white); }
.dmock__row { display: grid; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.dmock__row:last-child { border-bottom: 0; }
.dmock__row:hover { background: var(--bg-2); }
.dmock__pkg { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.dmock__meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); }
.dpill { font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; justify-self: end; white-space: nowrap; }
.dpill--allow { color: var(--ok); background: rgba(22,163,74,.10); }
.dpill--block { color: var(--block); background: rgba(220,38,38,.10); }
.dpill--quar  { color: var(--orange); background: rgba(245,121,59,.12); }
.dmock__bar { height: 7px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.dmock__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ok), var(--orange)); }
.dmock__score { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.dmock__score.is-block { color: var(--block); }

/* proxy events list (matches app.cyberxyz.io proxy monitor) */
.pevt__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.pevt__title { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); font-weight: 600; }
.pevt__badge { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--block); background: rgba(220,38,38,.10); border-radius: 999px; padding: 3px 11px; }
.pevt__cap { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-4); padding: 12px 18px 4px; }
.pevt__row { display: grid; grid-template-columns: 18px auto 1fr auto; align-items: center; gap: 12px; padding: 11px 18px; border-left: 3px solid var(--block); }
.pevt__row + .pevt__row { border-top: 1px solid var(--line); }
.pevt__eco { width: 18px; height: 18px; object-fit: contain; }
.pevt__bl { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #fff; background: var(--block); border-radius: 5px; padding: 3px 8px; letter-spacing: .04em; }
.pevt__pkg { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.pevt__pkg span { color: var(--ink-4); }
.pevt__ip { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }

/* fleet cards grid (matches the fleet overview) */
.fleet { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; padding: 16px; }
.fleet__card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.fleet__card:hover { border-color: var(--orange-line); }
.fleet__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fleet__name { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet__badge { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.fleet__badge.is-clean { color: var(--ok); background: rgba(22,163,74,.10); }
.fleet__badge.is-block { color: var(--block); background: rgba(220,38,38,.10); }
.fleet__meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); margin-top: 8px; line-height: 1.5; }
.fleet__tags { display: flex; gap: 6px; margin-top: 10px; }
.fleet__tag { font-family: var(--font-mono); font-size: 9.5px; color: var(--blue); border: 1px solid var(--blue-line); border-radius: 6px; padding: 2px 7px; }

/* ────────────────────────────────────────────────────────────────────
   Generic reveal entrance (works with app.js .in-view on .reveal/.card)
   ──────────────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .feat, .frame { transition: none; }
  .reveal { opacity: 1; transform: none; }
  .first-badge::before,
  .rotator__list,
  .feat--audit .feat__ico,
  .ci__row--block::after,
  .enroll__card::after,
  .enroll__num,
  .pipe__conn::after,
  .pipe__out.block,
  .statusbar__pill .dot,
  .statusbar__refresh,
  .type-caret,
  .term__caret,
  .efeat-grid--sig .efeat::after,
  .sev--score .sev__item,
  .sev--score .sev__item:last-child::after { animation: none !important; }
  .efeat-grid--sig .efeat::after { transform: scaleX(1); }
  .rsig-rail, .rsig-core-ring, .rsig-vbg--block { animation: none !important; }
  .mock--proxy .proxy__row { opacity: 1 !important; animation: none !important; }
  .mock--editor.is-typing .warn,
  .mock--editor.is-typing .alert,
  .mock--editor.is-typing .ok,
  .hovercard.is-pop { opacity: 1 !important; animation: none !important; }
  .mark { background-size: 100% 52%; }
}

/* ════════════════════════════════════════════════════════════════════
   PLATFORM FIGURES — live dashboard mocks (fig.02 findings · fig.04
   fleet · fig.05 verdict). Faithful rebuilds of app.cyberxyz.io, with
   on-scroll "streaming" entrance motion.
   ════════════════════════════════════════════════════════════════════ */

/* shared: streamed entrance (each element carries its own --d delay) */
.stream { opacity: 0; }
.reveal.in-view .stream { animation: streamIn .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
@keyframes streamIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* shared: verdict pills (taxonomy) */
.vpill { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: #fff; border-radius: 5px; padding: 3px 8px; white-space: nowrap; line-height: 1; }
.vpill--block { background: var(--block); }
.vpill--alert { background: var(--blue); }
.vpill--quar  { background: var(--orange-2); color: #5a3a00; }

/* shared: severity tags */
.fsev { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; justify-self: end; white-space: nowrap; }
.sev--crit { color: var(--block); }
.sev--high { color: var(--orange); }
.sev--med  { color: #b8860b; }

/* ── fig.02 · proxy findings log ─────────────────────────────────── */
.flog { background: var(--white); font-family: var(--font-mono); line-height: 1.5; position: relative; overflow: hidden; }
/* ambient: a soft "scan" band travels down the live feed forever */
.flog::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 80px; pointer-events: none; z-index: 2; opacity: 0; background: linear-gradient(180deg, transparent, rgba(245,121,59,.05) 46%, rgba(245,121,59,.11) 50%, rgba(245,121,59,.05) 54%, transparent); }
.reveal.in-view .flog::after { animation: flogScan 5s ease-in-out 1.8s infinite; }
@keyframes flogScan { 0% { transform: translateY(-80px); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(640px); opacity: 0; } }
.flog__toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); flex-wrap: wrap; }
.flog__search { flex: 1; min-width: 160px; font-size: 11.5px; color: var(--ink-4); background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; }
.flog__filter { font-size: 11px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; }
.flog__filter::after { content: " \25BE"; color: var(--ink-4); }
.flog__live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.flog__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: flogLive 1.8s ease-out infinite; }
@keyframes flogLive { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }

.flog__group { border-bottom: 1px solid var(--line); }
.flog__lead, .flog__row { display: grid; grid-template-columns: 116px 18px minmax(120px,1fr) auto auto auto auto; align-items: center; gap: 12px; padding: 12px 16px; }
.flog__row { border-bottom: 1px solid var(--line); }
.flog__lead { background: rgba(220,38,38,.035); border-left: 3px solid var(--block); }
.flog__row  { border-left: 3px solid var(--block); }
.flog__row:has(.vpill--quar), .flog__lead:has(.vpill--quar) { border-left-color: var(--orange-2); background: rgba(251,176,64,.05); }
.flog__date { font-size: 10.5px; color: var(--ink-4); }
.flog__eco { width: 18px; height: 18px; object-fit: contain; }
.flog__pkg { font-size: 12.5px; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flog__pkg span { color: var(--ink-4); font-weight: 400; }
.flog__host { font-size: 10.5px; color: var(--ink-4); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.flog__env, .flog__os { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .04em; border-radius: 5px; padding: 2px 6px; }
.flog__env { color: var(--blue); background: rgba(46,46,255,.08); }
.flog__env.env--dev { color: var(--orange); background: var(--orange-soft); }
.flog__os { color: var(--ink-4); background: var(--bg-2); border: 1px solid var(--line); }
.flog__ip { font-size: 10.5px; color: var(--ink-4); white-space: nowrap; }

.flog__detail { background: var(--bg-2); padding: 4px 0 8px; }
.flog__finding { display: grid; grid-template-columns: auto auto minmax(120px,1fr) auto; align-items: center; gap: 10px; padding: 7px 16px 7px 28px; }
.flog__key { font-size: 10.5px; color: var(--orange); font-weight: 600; white-space: nowrap; }
.flog__txt { font-size: 11px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 720px) {
  .flog__lead, .flog__row { grid-template-columns: 18px minmax(90px,1fr) auto auto; }
  .flog__date, .flog__host, .flog__ip { display: none; }
  .flog__finding { grid-template-columns: auto minmax(90px,1fr) auto; }
  .flog__key { display: none; }
}

/* ── fig.04 · fleet overview ─────────────────────────────────────── */
.fleet-frame, .verdict-frame { max-width: 1080px; margin: 0 auto; }
.verdict-frame { margin-top: clamp(36px,4vw,56px); }
.fleet2 { background: var(--white); font-family: var(--font-mono); line-height: 1.5; }
.fleet2__toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); flex-wrap: wrap; }
.fleet2__search { flex: 1; min-width: 160px; font-size: 11.5px; color: var(--ink-4); background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; }
.fleet2__filter { font-size: 11px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; }
.fleet2__filter::after { content: " \25BE"; color: var(--ink-4); }
.fleet2__grouplabel { display: flex; align-items: center; gap: 10px; padding: 16px 16px 8px; font-size: 11.5px; color: var(--ink); }
.fleet2__grouplabel b { font-weight: 700; }
.fleet2__atrisk { font-size: 9.5px; font-weight: 700; color: var(--block); background: rgba(220,38,38,.08); border-radius: 999px; padding: 2px 9px; }
.fleet2__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 12px; padding: 4px 16px 8px; }
.fleet2__grid--ci { padding-bottom: 16px; }
.fleet2__card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.fleet2__card:hover { border-color: var(--orange-line); box-shadow: var(--shadow); transform: translateY(-2px); }
.fleet2__card.is-risk { border-color: var(--orange-line); background: linear-gradient(180deg, rgba(220,38,38,.03), transparent 60%); }
.fleet2__card.is-risk .fleet2__badge.is-block { animation: badgeBlink 2.4s ease-in-out infinite; }
@keyframes badgeBlink { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); } 50% { box-shadow: 0 0 0 3px rgba(220,38,38,.12); } }
.fleet2__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fleet2__name { font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet2__badge { font-size: 9.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.fleet2__badge.is-clean { color: var(--ok); background: rgba(22,163,74,.10); }
.fleet2__badge.is-clean::before { content: "\2713\00a0"; }
.fleet2__badge.is-block { color: var(--block); background: rgba(220,38,38,.10); }
.fleet2__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.tg { font-size: 9px; font-weight: 600; color: var(--ink-4); background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; }
.tg--dev { color: var(--orange); background: var(--orange-soft); border-color: var(--orange-line); }
.tg--blue { color: var(--blue); background: rgba(46,46,255,.06); border-color: var(--blue-line); }
.tg--ok { color: var(--ok); background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.25); }
.fleet2__meta { font-size: 10.5px; color: var(--ink-4); margin-top: 10px; }
.fleet2__meta b { color: var(--ink); font-weight: 700; }
.fleet2__foot { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.fleet2__link { margin-left: auto; font-size: 10px; color: var(--blue); }

/* ── fig.05 · install verdict (XYZ score) ────────────────────────── */
.verdict { background: var(--white); font-family: var(--font-body); line-height: 1.5; padding: clamp(18px,2.4vw,28px); }
.verdict__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.verdict__kicker { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.verdict__time { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); }
.verdict__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(15px,2vw,20px); letter-spacing: -.02em; line-height: 1.35; margin: 8px 0 0; color: var(--ink); }
.verdict__title b { color: var(--block); font-weight: 800; }

.vlabel { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin: 22px 0 8px; }
.vlabel--block { color: var(--block); }

.verdict__hero { display: grid; grid-template-columns: 168px 1fr; gap: 22px; align-items: center; margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.vscore { display: flex; flex-direction: column; align-items: center; text-align: center; }
.vscore__dial { position: relative; width: 96px; height: 96px; }
.vscore__ring { width: 96px; height: 96px; transform: rotate(-90deg); }
.vscore__track { fill: none; stroke: var(--line); stroke-width: 9; }
.vscore__arc { fill: none; stroke: var(--ok); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; }
.reveal.in-view .vscore__arc { animation: vArc 1.1s cubic-bezier(.3,.7,.3,1) .35s both; }
@keyframes vArc { to { stroke-dashoffset: 26; } }
/* numeric risk variant (red, fills to 94%) */
.vscore__arc--risk { stroke: var(--block); }
.reveal.in-view .vscore__arc--risk { animation: vArcRisk 1.2s cubic-bezier(.3,.7,.3,1) .35s both; }
@keyframes vArcRisk { to { stroke-dashoffset: 19.6; } }
.vscore--risk .vscore__dial { animation: scorePulse 2.6s ease-in-out infinite; }
@keyframes scorePulse { 0%,100% { filter: drop-shadow(0 0 0 rgba(220,38,38,0)); } 50% { filter: drop-shadow(0 0 7px rgba(220,38,38,.35)); } }
.vscore__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; }
.vscore__num b { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -.03em; color: var(--block); line-height: 1; }
.vscore__num small { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; color: var(--ink-4); position: relative; top: 6px; }
.vscore__label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--ink); margin-top: 12px; }
.vscore__sub { font-family: var(--font-mono); font-size: 9.5px; color: var(--ok); margin-top: 4px; }
.vscore__sub--crit { color: var(--block); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.verdict__impact { min-width: 0; }
.verdict__sigrow { display: flex; align-items: center; gap: 12px; }
.verdict__sigrow .vlabel { margin: 0; }
.sigdots { display: inline-flex; gap: 5px; }
.sigdots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
.sigdots i.on { background: var(--blue); }
.reveal.in-view .sigdots i.on { animation: dotPop .4s ease both, dotTravel 2.4s ease-in-out 1s infinite; }
.reveal.in-view .sigdots i.on:nth-child(1) { animation-delay: .45s, 1.0s; }
.reveal.in-view .sigdots i.on:nth-child(2) { animation-delay: .55s, 1.2s; }
.reveal.in-view .sigdots i.on:nth-child(3) { animation-delay: .65s, 1.4s; }
.reveal.in-view .sigdots i.on:nth-child(4) { animation-delay: .75s, 1.6s; }
@keyframes dotPop { from { transform: scale(0); } 70% { transform: scale(1.35); } to { transform: scale(1); } }
@keyframes dotTravel { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46,46,255,0); } 50% { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(46,46,255,.18); } }
.verdict__fleet { margin-top: 16px; }
.verdict__frac { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--ink); margin: 6px 0 8px; }
.verdict__frac b { font-weight: 700; }
.vbar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.vbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--blue) 0%, #6a6aff 40%, #b9b9ff 50%, #6a6aff 60%, var(--blue) 100%); background-size: 220% 100%; }
.reveal.in-view .vbar i { animation: vFill 1s cubic-bezier(.3,.7,.3,1) .5s both, vBarFlow 2.4s linear 1.5s infinite; }
@keyframes vFill { to { width: 100%; } }
@keyframes vBarFlow { from { background-position: 220% 0; } to { background-position: -220% 0; } }
.verdict__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.vchip { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.vchip--blue { color: var(--blue); border-color: var(--blue-line); background: rgba(46,46,255,.05); }
.vchip--ghost { color: var(--ink-4); letter-spacing: .06em; font-weight: 700; }
/* highlighted "impacted machine" chips — orange edition accent + ambient pulse */
.vchip--hit { color: var(--orange); border-color: var(--orange-line); background: var(--orange-soft); font-weight: 700; }
.reveal.in-view .vchip--hit { animation: chipPulse 2.8s ease-in-out infinite; }
.reveal.in-view .vchip--hit:nth-child(2) { animation-delay: .5s; }
.reveal.in-view .vchip--hit:nth-child(3) { animation-delay: 1s; }
@keyframes chipPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,121,59,0); } 50% { box-shadow: 0 0 0 4px rgba(245,121,59,.14); } }

.verdict__statement { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); line-height: 1.7; }
.verdict__statement .vlabel { margin: 0 0 6px; }
.verdict__statement b { color: var(--ink); font-weight: 700; }

/* one unified frame holding all signals — hairline dividers, no side colors */
.verdict__risks { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); }
.vrisk { padding: 15px 18px; background: transparent; border-top: 1px solid var(--line); }
.vrisk:nth-child(-n+2) { border-top: 0; }
.vrisk:nth-child(odd) { border-right: 1px solid var(--line); }
.vrisk__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.vrisk__n { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--ink-4); background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.vrisk__name { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--ink); margin-right: auto; }
.vrisk p { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); line-height: 1.6; margin: 0; }
.vrisk p b { color: var(--ink); font-weight: 700; }
@media (max-width: 620px) {
  .verdict__risks { grid-template-columns: 1fr; }
  .vrisk:nth-child(odd) { border-right: 0; }
  .vrisk:nth-child(2) { border-top: 1px solid var(--line); }
}
.vstat { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 5px; padding: 2px 7px; }
.vstat--hit  { color: var(--block);  background: rgba(220,38,38,.10); }
.vstat--warn { color: var(--orange); background: var(--orange-soft); }

.verdict__ctx { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); line-height: 1.7; }
.verdict__ctx b { color: var(--ink); font-weight: 700; }

.verdict__foot { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.verdict__foot span { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.verdict__foot em { display: block; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .1em; color: var(--ink-4); margin-bottom: 3px; }
.verdict__decision { margin-left: auto; }
.verdict__decision b { color: var(--block); font-weight: 800; }

@media (max-width: 720px) {
  .verdict__hero { grid-template-columns: 1fr; text-align: center; }
  .verdict__impact { text-align: left; }
}

/* reduced motion: show final states, no streaming or ambient loops */
@media (prefers-reduced-motion: reduce) {
  .stream { opacity: 1 !important; animation: none !important; transform: none !important; }
  .flog__live i,
  .flog::after,
  .vscore--risk .vscore__dial,
  .vchip--hit,
  .sigdots i.on,
  .fleet2__card.is-risk .fleet2__badge.is-block { animation: none !important; }
  .flog::after { opacity: 0 !important; }
  .vscore__arc { stroke-dashoffset: 26; animation: none !important; }
  .vscore__arc--risk { stroke-dashoffset: 19.6; }
  .vbar i { width: 100%; animation: none !important; }
  .sigdots i.on { transform: none !important; }
}

/* ── case-studies index cards ─────────────────────────────────────── */
.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 20px; max-width: 920px; margin: 0 auto; }
.cs-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: clamp(22px,3vw,30px); text-decoration: none; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.cs-card:hover { border-color: var(--orange-line); box-shadow: var(--shadow); transform: translateY(-3px); }
.cs-card__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--orange); }
.cs-card__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px,3vw,28px); letter-spacing: -.02em; color: var(--ink); margin: 10px 0 0; }
.cs-card__title .brand-orange { color: var(--orange); }
.cs-card__title .brand-blue { color: var(--blue); }
.cs-card__desc { font-family: var(--font-body); font-size: 14.5px; line-height: 1.6; color: var(--ink-4); margin: 12px 0 0; }
.cs-card__stats { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.cs-card__stats span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.cs-card__stats b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); letter-spacing: -.01em; }
.cs-card__cta { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--blue); margin: 20px 0 0; }
.cs-card:hover .cs-card__cta { color: var(--orange); }

/* ── trusted band · two-row (trusted by + built with) ─────────────── */
.trusted__sublabel { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--orange); text-align: center; margin: clamp(26px,3.5vw,40px) 0 16px; }
.trusted__partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px,2.1vw,28px); padding: 0; max-width: 100%; }
.trusted__partners img { height: 30px; width: auto; opacity: .96; transition: filter .3s ease, transform .3s ease; }
.trusted__partners img:hover { transform: translateY(-2px); filter: drop-shadow(0 6px 14px rgba(15,15,40,.12)); }
.trusted__partner-cta { font-family: var(--font-mono); font-size: 12px; color: var(--blue); border-bottom: 1px solid var(--blue-line); white-space: nowrap; }
/* mobile: never let a wide logo overflow the section (keeps aspect) */
@media (max-width: 600px) {
  .trusted__partners { gap: 16px 22px; }
  .trusted__partners img { height: auto !important; max-height: 32px; max-width: 78vw; }
}

/* vscode surface mock · a touch larger (homepage "// vscode · inline") */
.mock--editor.mock--lg { font-size: 14px; }
.mock--editor.mock--lg .mock__bar { padding: 10px 15px; }
.mock--editor.mock--lg .mock__bar em { font-size: 12px; }
.mock--editor.mock--lg pre { padding: 20px 22px; line-height: 1.95; }

/* mobile: keep the findings table from pushing the page wide (scroll inside its frame) */
@media (max-width: 600px) {
  .flog { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .flog__lead, .flog__row, .flog__finding { min-width: 320px; }
}

/* ── live stat band (count-ups) ───────────────────────────────────── */
.statband { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px,3.5vw,46px); margin: clamp(22px,2.6vw,34px) auto clamp(6px,1.5vw,18px); padding: 0 var(--gutter); }
.statband__item { text-align: center; }
.statband__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,4vw,44px); letter-spacing: -.03em; line-height: 1; color: var(--ink); white-space: nowrap; }
.statband__num b { font-weight: 800; }
.statband__label { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); margin-top: 9px; letter-spacing: .02em; }
.statband__sep { width: 1px; height: 40px; background: var(--line); }
@media (max-width: 600px) { .statband { gap: 22px 30px; } .statband__sep { display: none; } }

/* live "this week" hook under the stat band */
.statband__live { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); margin: 4px 0 0; }
.statband__live b { color: var(--ink); font-weight: 700; }
.statband__live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: flogLive 1.8s ease-out infinite; }

/* ── testimonials ─────────────────────────────────────────────────── */
/* smaller, staggered "pinned clipping" layout */
.tcard-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(20px,3vw,40px); max-width: 760px; margin: 0 auto; padding-bottom: 40px; }
.tcard { position: relative; flex: 0 1 330px; border: 1.5px solid var(--line); border-radius: 16px; padding: clamp(20px,2.4vw,26px); margin: 0; -webkit-backdrop-filter: saturate(125%) blur(10px); backdrop-filter: saturate(125%) blur(10px); box-shadow: 0 4px 16px rgba(15,15,40,.045); transition: border-color .25s ease, box-shadow .25s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.tcard:nth-child(odd)  { transform: rotate(-1.6deg); border-color: var(--orange); background: linear-gradient(150deg, rgba(255,251,249,.62) 0%, rgba(255,242,234,.5) 100%); }
.tcard:nth-child(even) { transform: rotate(1.3deg) translateY(38px); border-color: var(--blue); background: linear-gradient(150deg, rgba(250,251,255,.62) 0%, rgba(239,241,255,.5) 100%); }
.tcard:hover { box-shadow: var(--shadow-lg); transform: rotate(0) translateY(-4px); z-index: 2; }
.tcard__mark { font-family: var(--font-display); font-weight: 800; font-size: 42px; line-height: .5; color: var(--orange); }
.tcard:nth-child(even) .tcard__mark { color: var(--blue); }
.tcard__quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(15px,1.5vw,17px); line-height: 1.5; letter-spacing: -.01em; color: var(--ink); margin: 8px 0 20px; }
.tcard__who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.tcard__pic { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, var(--orange), var(--blue)); }
.tcard__pic--in { background: var(--blue-soft); color: var(--blue); border: 1px solid var(--blue-line); }
.tcard__pic--in svg { width: 22px; height: 22px; }
.tcard__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tcard__meta b { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--ink); }
.tcard__meta > span { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); line-height: 1.4; }
.tcard__loc { color: var(--ink-4); }

.tcard__link { color: var(--blue); transition: color .2s ease; }
.tcard__link:hover { color: var(--orange); }

/* ── package checker (/check) ─────────────────────────────────────── */
.chk { max-width: 920px; margin: 0 auto; padding: 0 var(--gutter); }
.chk__bar { display: flex; align-items: center; gap: 10px; background: var(--white); border: 1.5px solid var(--line); border-radius: 14px; padding: 7px 7px 7px 16px; box-shadow: var(--shadow-sm); transition: border-color .2s ease, box-shadow .2s ease; }
.chk__bar:focus-within { border-color: var(--orange-line); box-shadow: 0 8px 28px rgba(245,121,59,.12); }
.chk__eco { display: inline-flex; align-items: center; padding-right: 12px; border-right: 1px solid var(--line); }
.chk__eco img { width: 22px; height: 22px; }
.chk__input { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--font-mono); font-size: 15px; color: var(--ink); padding: 12px 4px; min-width: 0; }
.chk__go { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: #fff; background: var(--blue); border: 0; border-radius: 10px; padding: 12px 24px; cursor: pointer; transition: transform .2s ease; }
.chk__go:hover { transform: translateY(-1px); }
.chk__examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 2px 0; }
.chk__examples-label { font-family: var(--font-mono); font-size: 11px; color: var(--orange); }
.chk__chip { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.chk__chip:hover { color: var(--blue); border-color: var(--blue-line); background: var(--blue-soft); }
.chk__note { text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); margin: 24px 0 0; }
.chk__note a { color: var(--blue); border-bottom: 1px solid var(--blue-line); }
/* report (reuses .verdict / .vscore / .vrisk) */
.chk-report .vscore__sub { color: inherit; }
.chk-scripts { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; margin-top: 16px; }
.chk-scripts--block  { border-color: rgba(220,38,38,.3);  background: rgba(220,38,38,.04); }
.chk-scripts--review { border-color: var(--orange-line);   background: rgba(245,121,59,.05); }
.chk-scripts--ok     { border-color: rgba(22,163,74,.25);  background: rgba(22,163,74,.045); }
.chk-scripts__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chk-scripts__top .vlabel { margin: 0; }
.chk-scripts__list { list-style: none; margin: 10px 0 0; padding: 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); }
.chk-scripts__list li { padding: 2px 0; }
.chk-scripts__note { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); line-height: 1.55; margin: 8px 0 0; }
.chk-scripts__note b { color: var(--ink); font-weight: 700; }
.chk-grid { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; }
.chk-grid span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.chk-grid b { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ink); margin-right: 5px; }
.fsev.sev--ok { color: var(--ok); }
.vstat--ok { color: var(--ok); background: rgba(22,163,74,.10); }
.vrisk--ok::before { display: none; }
.chk-empty { text-align: center; max-width: 560px; margin: 32px auto 0; }
.chk-empty p { font-family: var(--font-body); font-size: 15px; color: var(--ink-3); line-height: 1.6; margin: 6px 0; }
.chk-empty a { color: var(--blue); border-bottom: 1px solid var(--blue-line); }
@media (max-width: 560px) { .chk__bar { flex-wrap: wrap; } .chk__go { width: 100%; } }

/* checker v2: ecosystems, score breakdown, capabilities, deps */
.chk__ecos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 16px 2px 0; }
.chk__ecos-label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.chk__ecos img { height: 20px; width: auto; filter: grayscale(1) opacity(.5); transition: filter .2s ease; }
.chk__ecos img:hover { filter: grayscale(0) opacity(1); }
.chk-report .chk-eco-ic { width: 14px !important; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.verdict__kicker { display: inline-flex; align-items: center; }
/* why-this-score breakdown */
.fct-list { display: flex; flex-direction: column; gap: 7px; }
.fct { display: grid; grid-template-columns: minmax(110px,1fr) 1.3fr; align-items: center; gap: 12px; }
.fct__n { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.fct__bar { height: 7px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.fct__bar i { display: block; height: 100%; border-radius: 999px; width: 0; }
/* capabilities */
.chk-caps { display: flex; flex-wrap: wrap; gap: 8px; }
.cap { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line); }
.cap--risk { color: var(--block); background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.25); }
.cap--use  { color: var(--blue);  background: rgba(46,46,255,.06); border-color: var(--blue-line); }
.cap--none { color: var(--ink-4); background: var(--bg-2); text-decoration: line-through; opacity: .65; }
.chk-caps__note { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); line-height: 1.55; margin: 10px 0 0; }
.chk-caps__note b { color: var(--ink); font-weight: 700; }
/* dependency list */
.chk-deps { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dep { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.dep:last-child { border-bottom: 0; }
.dep:hover { background: var(--bg-2); }
.dep__name { font-family: var(--font-mono); font-size: 12px; color: var(--ink); white-space: nowrap; }
.dep__name span { color: var(--ink-4); }
.dep__note { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); text-align: right; }
.dep__pill { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 3px 11px; border-radius: 999px; white-space: nowrap; }

/* checker: live-fetch loading state */
.chk-loading { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); margin: 44px auto; }
.chk-loading b { color: var(--ink); }
.chk-spin { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--orange); border-radius: 50%; animation: spin .7s linear infinite; }

/* checker: recently-caught board */
.chk-recent { margin-top: clamp(30px,4vw,44px); }
.chk-recent__label { font-family: var(--font-mono); font-size: 11px; color: var(--orange); margin: 0 0 10px 2px; }
.chk-recent__list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--white); }
.chk-recent__row { display: grid; grid-template-columns: 18px minmax(140px,auto) auto 1fr auto; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 16px; background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; font-family: var(--font-mono); transition: background .15s ease; }
.chk-recent__row:last-child { border-bottom: 0; }
.chk-recent__row:hover { background: var(--bg-2); }
.chk-recent__row img { width: 18px; height: 18px; object-fit: contain; }
.chk-recent__pkg { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chk-recent__pkg span { color: var(--ink-4); font-weight: 400; }
.chk-recent__sum { font-size: 11px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chk-recent__when { font-size: 10.5px; color: var(--ink-4); white-space: nowrap; }
@media (max-width: 720px) { .chk-recent__sum { display: none; } .chk-recent__row { grid-template-columns: 18px minmax(100px,1fr) auto auto; } }