/* ═══════════════════════════════════════════════════════════
   DESIGN SYSTEM TOKENS
   Single source of truth: design-system/design-system.md
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Spacing (8px grid; --space-1 is the 4px half-step) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Vertical clearance below the fixed nav for any hero/first-section. */
  /* Top padding for every hero/first section — clears the fixed nav (~89px on
     desktop) and leaves it room to breathe. The mobile nav is shorter, so this
     steps back down under 960px; see the override there. */
  --hero-top: 180px;

  /* Typography */
  --font-sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3rem;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Backgrounds & surfaces */
  --color-bg: #0c0a12;
  --color-surface: #13101e;
  --color-surface-2: #1b1628;
  --color-surface-hover: #1f1a30;
  --color-surface-active: #251e38;

  /* Scrim — translucent overlay surfaces (mobile nav drawer and its action
     dock). Alpha suffix matches the --brand-glow-NN convention. */
  --color-scrim-72: rgba(13, 11, 22, 0.72);
  --color-scrim-98: rgba(13, 11, 22, 0.98);

  /* Page-background alpha steps — for scrims that fade full-bleed art into
     the page (home hero network). Alpha suffix matches --brand-glow-NN. */
  --color-bg-90: rgba(12, 10, 18, 0.9);
  --color-bg-55: rgba(12, 10, 18, 0.55);

  /* Borders */
  --color-border: #2a2240;
  --color-border-strong: #3d3060;

  /* Text */
  --color-text: #ece6f5;
  --color-text-2: #d7cfea;
  --color-text-muted: #877caa;

  /* Brand */
  --color-brand: #8530d1;
  --color-brand-light: #a855f7;
  --color-brand-subtle: #1c1231;
  --color-brand-hover: #9b45e8;
  --color-brand-active: #7228b8;
  --color-brand-text: #f0eaf8;
  --color-brand-light-text: #0c0a12;
  --color-brand-dim: #29193e;

  /* Semantic */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-error: #f87171;

  /* Focus */
  --color-focus-ring: rgba(168, 85, 247, 0.5);

  /* Brand glow rgbas — derived from --color-brand-light (168,85,247)
     for use in luminous shadows, gradients, and translucent fills */
  --brand-glow-04: rgba(168, 85, 247, 0.04);
  --brand-glow-08: rgba(168, 85, 247, 0.08);
  --brand-glow-12: rgba(168, 85, 247, 0.12);
  --brand-glow-18: rgba(168, 85, 247, 0.18);
  --brand-glow-25: rgba(168, 85, 247, 0.25);
  --brand-glow-35: rgba(168, 85, 247, 0.35);
  --brand-glow-50: rgba(168, 85, 247, 0.5);

  /* Shadows — luminous glow style (design-system.md §Shadows) */
  --shadow-sm: 0 0 0 1px rgba(133, 48, 209, 0.1);
  --shadow-md:
    0 0 0 1px rgba(133, 48, 209, 0.15), 0 0 20px rgba(133, 48, 209, 0.08);
  --shadow-lg:
    0 0 0 1px rgba(133, 48, 209, 0.22), 0 0 40px rgba(133, 48, 209, 0.12),
    0 0 80px rgba(133, 48, 209, 0.06);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Layout */
  --maxw: 1600px;
}

/* ═══════════════════════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 112.5%;
}
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: var(--leading-normal);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Long unbreakable tokens — bare URLs, package refs like
     example/action@cf67f7de…, a pasted JSON log line — have no break
     opportunity, so they run straight past the viewport. `overflow-x: hidden`
     above then CLIPS them rather than offering a scrollbar, which means the
     text is simply unreachable on a narrow screen. Breaking mid-token is the
     only outcome that keeps it readable. Only affects text that would
     otherwise overflow its line box; `nowrap`/`pre` content is unaffected. */
  overflow-wrap: break-word;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

::selection {
  background: var(--color-brand);
  color: var(--color-brand-text);
}
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  border-radius: var(--radius-sm);
}

/* Background atmosphere — luminous brand wash */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(
      ellipse 1200px 600px at 80% -10%,
      rgba(114, 40, 184, 0.18),
      transparent 60%
    ),
    radial-gradient(
      ellipse 900px 500px at 10% 30%,
      var(--brand-glow-08),
      transparent 60%
    ),
    radial-gradient(
      ellipse 800px 800px at 50% 120%,
      rgba(114, 40, 184, 0.1),
      transparent 60%
    );
  z-index: -2;
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(
    ellipse 900px 700px at 50% 20%,
    #000,
    transparent 80%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 900px 700px at 50% 20%,
    #000,
    transparent 80%
  );
  z-index: -1;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES
   ═══════════════════════════════════════════════════════════ */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-brand-light);
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
/* Pinned to the first line's center rather than the box's, so an eyebrow that
   wraps keeps its dot beside the first word. flex-shrink: 0 stops a wrapping
   eyebrow squeezing the dot into an oval. */
.eyebrow::before {
  content: "";
  flex-shrink: 0;
  margin-top: calc((1lh - 6px) / 2);
  width: 6px;
  height: 6px;
  background: var(--color-brand-light);
  border-radius: var(--radius-full);
  box-shadow: 0 0 12px var(--brand-glow-50);
}
/* Eyebrow modifiers — combine freely (e.g. `eyebrow eyebrow--plain eyebrow--compact`).
   The eyebrow owns the gap to the heading it introduces: 24px standard, 12px compact.
   Headings must NOT add their own margin-top, or the two would stack. */
.eyebrow--compact {
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  margin-bottom: var(--space-3);
}
.eyebrow--plain {
  gap: 0;
}
.eyebrow--plain::before {
  display: none;
}
.eyebrow--muted {
  color: var(--color-text-muted);
}
.eyebrow--warning {
  color: var(--color-warning);
}
/* Cards that space their children with a flex `gap` shouldn't also carry the eyebrow margin. */
.roi-out-card .eyebrow,
.resource-card .eyebrow,
.shot-stub .eyebrow,
.nav-mega-feature .eyebrow {
  margin-bottom: 0;
}

.h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-text);
}
.h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: clamp(1.25rem, 2vw, var(--text-xl));
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  letter-spacing: -0.005em;
  color: var(--color-text);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-2);
  font-weight: var(--weight-normal);
}
.muted {
  color: var(--color-text-muted);
}
/* Visible to assistive tech only — for labels the layout can't show. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

em.accent {
  font-style: italic;
  color: var(--color-brand-light);
  font-weight: var(--weight-normal);
}

/* ═══════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #0a0810;
  border-bottom: 1px solid var(--color-border);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.5),
    0 1px 0 var(--brand-glow-18);
  transition:
    box-shadow var(--transition-slow),
    background var(--transition-slow);
}
.nav.scrolled {
  background: #07050c;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.65),
    0 1px 0 var(--brand-glow-25);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-6) var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.logo {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-12);
}
.logo img {
  height: 30px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  gap: var(--space-8);
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links > .nav-item {
  position: relative;
}
.nav-links a,
.nav-trigger {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  transition: color var(--transition-base);
}
.nav-links a:hover,
.nav-trigger:hover,
.nav-item.has-submenu:focus-within > .nav-trigger {
  color: var(--color-brand-light);
}
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.nav-caret {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform var(--transition-base);
}
/* Nav link that leaves the site — matches .nav-trigger's layout so the
   arrow-up-right marker sits on the same baseline as a submenu caret. */
.nav-external {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.nav-external-icon {
  font-size: 0.875em;
  position: relative;
  top: 1px;
}
/* Child combinators, not descendant: submenus nest (Product > Platform > the
   three platform pages), and a descendant match would fire every level at once
   the moment the outermost item was hovered. */
.nav-item.has-submenu:hover > .nav-trigger .nav-caret,
.nav-item.has-submenu:focus-within > .nav-trigger .nav-caret {
  transform: rotate(180deg);
}

.nav-submenu {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--space-3));
  margin: 0;
  padding: var(--space-2);
  min-width: 220px;
  list-style: none;
  background: rgba(19, 16, 30, 0.96);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility var(--transition-base);
}
.nav-item.has-submenu:hover > .nav-submenu,
.nav-item.has-submenu:focus-within > .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-submenu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav-submenu a:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

/* ── Product mega menu ──────────────────────────────────────────
   Only the Product item uses this; Resources and Company keep the plain
   .nav-submenu list. It exists because the Platform capability pages were a
   second-level flyout and nobody found them — everything is on one surface
   now, with a line of copy per entry so the menu explains itself.

   Opens on hover/focus-within like the other two. It sits below the nav bar
   rather than flush under the trigger, so a pseudo-element bridges the gap the
   pointer has to cross — without it the panel closes mid-travel. Both read
   --nav-mega-gap, so they stay equal. */
.nav-item--mega {
  --nav-mega-gap: 40px;
}
.nav-mega {
  position: absolute;
  top: calc(100% + var(--nav-mega-gap));
  left: calc(-1 * var(--space-3));
  /* Left-aligned under Product, so it has to clear the viewport itself. Two
     regimes: below --maxw the nav content is flush left and the offset is
     fixed; above it, .nav-inner centers and the offset grows by half the
     surplus. One term each, both measured rather than derived. */
  width: min(1060px, calc(100vw - 240px), calc(50vw + 340px));
  /* The nav is position: fixed, so a panel taller than the window can't be
     reached by scrolling the page — it has to scroll itself. 103px is where
     the panel's top edge lands (measured); the extra space keeps its bottom
     off the window edge. Contain stops the page scrolling behind it once the
     panel hits its end. */
  max-height: calc(100dvh - 103px - var(--space-6));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-6);
  background: rgba(19, 16, 30, 0.96);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility var(--transition-base);
}
/* The hover bridge hangs off the trigger's <li>, not the panel: the panel
   scrolls, and overflow would clip anything drawn outside its box. It only
   exists while the item is already hovered, so it can't open the menu on its
   own. Focus-within opens the panel without a pointer, so it needs no bridge. */
.nav-item--mega:hover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--space-3));
  /* Only as wide as the pointer needs to cross, not the full panel: at full
     width it would sit over the bottom edge of the "Request a demo" button
     while the menu is open and eat clicks on it. */
  width: 260px;
  height: var(--nav-mega-gap);
}
.nav-item--mega:hover .nav-mega,
.nav-item--mega:focus-within .nav-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-mega-grid {
  display: grid;
  /* Why Kusari carries two short entries, so it takes less than the product
     columns rather than forcing all three narrow. */
  grid-template-columns: 1fr 1fr 0.8fr 220px;
  gap: var(--space-6);
}
.nav-mega-col {
  display: flex;
  flex-direction: column;
}
.nav-mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
/* Rows and the footer share one link shape: icon/text, full-bleed hover. */
.nav-mega-list a,
.nav-mega-foot {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--transition-base);
}
.nav-mega-list a:hover,
.nav-mega-foot:hover {
  background: var(--color-surface-hover);
}
/* Datasheet links. A PDF is a different kind of destination from a page, so it
   reads as a footnote to its column rather than another row in the list.
   Outranks `.nav-links a` further down the file, which would otherwise impose
   the nav's own font-size, weight and hover color. */
.nav-mega .nav-mega-doc {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-2);
  /* Pushed to the foot of the column so all three line up on one baseline
     above the Integrations rule, rather than staggering with the columns'
     different lengths. */
  margin-top: auto;
  padding: var(--space-4) var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-2);
  transition:
    background var(--transition-base),
    color var(--transition-base);
}
.nav-mega .nav-mega-doc:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}
.icon-doc {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--color-brand-light);
}
.nav-mega-doc-type {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.nav-mega-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-mega-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.nav-mega-desc {
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  line-height: var(--leading-snug);
  color: var(--color-text-2);
}
.nav-mega-list a:hover .nav-mega-title,
.nav-mega-foot:hover .nav-mega-title {
  color: var(--color-brand-light);
}
/* Featured rail — the interactive tour, distinct from the "Request a demo"
   CTA sitting a few pixels to its right in the nav bar. */
.nav-mega-feature {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--brand-glow-08);
  transition:
    background var(--transition-base),
    border-color var(--transition-base);
}
.nav-mega-feature:hover {
  background: var(--brand-glow-12);
  border-color: var(--color-border-strong);
}
.nav-mega-feature-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}
.nav-mega-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-brand-light);
}
/* Cross-product, so it spans both columns rather than living in either. */
.nav-mega-foot {
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.nav-mega-foot .nav-mega-desc {
  flex: 1;
}
.nav-mega-foot svg {
  flex: none;
  color: var(--color-brand-light);
}

@media (max-width: 960px) {
  /* In the drawer the panel is just another always-open block, like
     .nav-submenu. Order: Platform, then Inspector, then Integrations. The
     featured tour card is dropped — the drawer already ends in a CTA dock. */
  .nav-mega {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0 0 var(--space-2) var(--space-4);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    /* The drawer scrolls as a whole; a nested scroller inside it would trap
       the thumb. */
    max-height: none;
    overflow: visible;
  }
  .nav-item--mega:hover::after {
    display: none;
  }
  .nav-mega-grid {
    display: block;
  }
  .nav-mega-col + .nav-mega-col {
    margin-top: var(--space-4);
  }
  /* Outranks `.nav-links a` in the shared RESPONSIVE block further down the
     file, which would otherwise force this back to display: flex. */
  .nav-mega .nav-mega-feature {
    display: none;
  }
  /* The drawer's own `.nav-links a` rule sets font-size on the anchor; the
     row's title and description set their own, so only padding needs undoing. */
  .nav-mega .nav-mega-list a,
  .nav-mega .nav-mega-foot {
    padding: var(--space-2);
  }
  .nav-mega .nav-mega-foot {
    margin-top: var(--space-4);
  }
  .nav-mega .nav-mega-doc {
    margin-top: var(--space-1);
    padding: var(--space-2);
  }
  .nav-mega .pillar-icon {
    display: none;
  }
  /* Titles only in the drawer. The descriptions are what make the panel
     scannable on a desktop, but on a phone they double the drawer's length for
     copy nobody reads while thumbing a menu — the group labels above already do
     the finding. Delete this rule to bring them back. */
  .nav-mega .nav-mega-desc {
    display: none;
  }
  /* Match .nav-submenu a, so Product's entries don't read louder than
     Resources' and Company's in the drawer. */
  .nav-mega .nav-mega-title {
    color: var(--color-text-2);
  }
}

.nav-ctas {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* Hamburger — hidden on desktop, shown ≤960px via the existing media query */
.nav-hamburger {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 110;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: var(--color-text);
  border-radius: 2px;
  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
}
.nav.is-open .nav-hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav.is-open .nav-hamburger span:nth-child(2) {
  opacity: 0;
}
.nav.is-open .nav-hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  white-space: nowrap;
}
.btn-ghost {
  color: var(--color-text-2);
}
.btn-ghost:hover {
  color: var(--color-text);
}
.btn-outline {
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  background: var(--brand-glow-04);
}
.btn-outline:hover {
  border-color: var(--color-brand-light);
  background: var(--brand-glow-12);
}
.btn-primary {
  color: var(--color-brand-light-text);
  background: linear-gradient(
    180deg,
    #c084fc 0%,
    var(--color-brand-light) 100%
  );
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.5),
    0 8px 24px -6px var(--brand-glow-35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font-weight: var(--weight-semibold);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.6),
    0 12px 32px -4px var(--brand-glow-35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Shared directional icon — Lucide arrow-left / arrow-right / arrow-up-right,
   inlined via the partials in _includes/partials/icon-arrow-*.njk. Sized in `em`
   so one rule tracks the font-size of every button, card CTA, and back link it
   sits in; `vertical-align` only matters in the few non-flex parents. */
.arrow {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
}
.btn .arrow {
  transition: transform 250ms ease;
}
.btn:hover .arrow {
  transform: translateX(3px);
}
/* `.btn` is nowrap so short labels never break across lines, but a long CTA
   ("Get the Mythos Executive Threat Briefing") is then wider than a phone and
   gets clipped by the body's overflow-x. Below the single-column breakpoint,
   let a label that cannot fit wrap instead. */
@media (max-width: 520px) {
  .btn {
    white-space: normal;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
.hero {
  padding: var(--hero-top) 0 var(--space-24);
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
/* Home hero carries the partner logo strip as a full-width second row so mobile
   can reorder it between the copy and the graph. */
.hero.hero--logos {
  padding-bottom: var(--space-16);
}
/* Gap between the hero row and the logo row. This was 160px to reproduce the
   rhythm of the standalone .partner-logos section this replaced, back when the
   row opened on a small eyebrow. The "Built by the team behind GUAC and SLSA"
   heading now carries that separation itself, so the extra space just read as a
   void — the graph is 520px tall and the copy column is shorter, which already
   leaves slack under the CTA. Safe to tune: row 1 holds the graph and the
   particle canvas is absolutely positioned, so neither is affected.
   Mobile sets its own row-gap in the 960px block. */
.hero-grid--logos {
  row-gap: var(--space-24);
}
.hero-logos {
  grid-column: 1 / -1;
  text-align: center;
}
/* Spacing only — type comes from .h2. This owns the whole gap down to the
   eyebrow, which keeps its own tight margin-bottom so it reads as a label
   attached to the logo row rather than floating between the two. */
.hero-logos .h2 {
  margin-bottom: var(--space-12);
  text-wrap: balance;
}

/* Booking form sitting in the hero copy column (/start). Like .hero-logos, it
   holds a heading that is section-level in markup but column-level on screen —
   pinned to the bottom of the .h2 clamp so it reads under the h1 instead of
   competing with it. Needs no mobile rule: that is already the clamp's minimum,
   and .hero-grid--logos owns the stacking order (copy+form → logos → graph). */
.hero-form {
  animation: fadeUp 0.9s 0.3s both;
  /* Owns the gap down to the line sitting under the card, the same way
     .hero-sub owns its gap down to this block. Kept tight so that line reads
     as a caption on the form rather than as free-standing copy. */
  margin-bottom: var(--space-4);
}
/* Owns the gap down to the form card. */
.hero-form .h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-6);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 14px 6px 6px;
  background: var(--brand-glow-08);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--color-text-2);
  margin-bottom: var(--space-8);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  animation: fadeUp 0.8s 0.05s both;
}
/* The badge can hold a link with a tag chip + label; keep them aligned and
   let the label wrap as a block while the trailing arrow stays attached. */
.hero-badge a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
}
.hero-badge-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-brand-light);
  color: var(--color-brand-light-text);
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.hero h1 {
  margin-bottom: var(--space-8);
  animation: fadeUp 0.9s 0.1s both;
  text-wrap: balance;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
}
.hero h1 .line {
  display: block;
  text-wrap: balance;
}
.hero h1 .big-statement {
  font-style: italic;
  color: var(--color-brand-light);
  font-weight: var(--weight-normal);
}
.hero-sub {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-2);
  max-width: 560px;
  margin-bottom: var(--space-10);
  animation: fadeUp 0.9s 0.2s both;
}
.hero-sub strong {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}
.hero-ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  animation: fadeUp 0.9s 0.3s both;
}
.hero-ctas .btn {
  padding: 13px 22px;
  font-size: var(--text-base);
}

/* Single-column hero content well — used by simple subpage heroes
   (About, Platform, Inspector, Developers, etc.). Page-specific hero classes
   like .whitepaper-hero / .casestudy-hero / .oss-hero own their own layout. */
.hero-inner {
  max-width: 820px;
}
.hero-inner .h1 {
  margin-top: var(--space-6);
}
.hero-inner .hero-sub {
  margin-top: var(--space-6);
  max-width: 720px;
}
.hero-inner .hero-ctas {
  margin-top: var(--space-8);
}
.hero-inner .lead,
.hero-inner .problem-points {
  margin-top: var(--space-8);
}

.hero-stats {
  display: flex;
  gap: var(--space-8);
  margin-top: 56px;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  animation: fadeUp 0.9s 0.4s both;
}
.hero-stat-val {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.hero-stat-val span {
  font-size: 0.8em;
  color: var(--color-brand-light);
  font-weight: var(--weight-medium);
}
.hero-stat-lbl {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.35;
  max-width: 140px;
}

/* Dependency graph visualization */
.graph-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  animation: fadeUp 1.2s 0.4s both;
}
.graph-stage svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Product screenshot in a two-column hero's visual column (/inspector). It is
   landscape, so it can't reuse the square .graph-stage box; .hero-grid centers
   it against the taller copy column. The asset is already the surface color
   with its lower detail blurred and faded into that background, so the frame
   here is just the panel edge the rest of the site uses. */
.hero-shot {
  width: 100%;
  /* Never scaled past the asset's own 823px. The hero column is narrower than
     this on desktop, so the cap only binds once the grid has stacked. */
  max-width: 640px;
  margin-left: auto;
  animation: fadeUp 1.2s 0.4s both;
}
.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}
/* Stacked single column — center it rather than right-aligning, matching
   .graph-stage. Copy first, image second, which is the source order. */
@media (max-width: 960px) {
  .hero-shot {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Dependency-graph illustration in a .product-row visual column (/platform).
   Landscape, so it can't reuse the square .graph-stage or the portrait
   .depth-stage; this only sizes the box, and the SVG scales inside it. */
.dep-graph {
  width: 100%;
  max-width: 560px;
  margin-left: auto;
}
.dep-graph svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Stacked single column — centre it rather than right-aligning, matching
   .graph-stage and .hero-shot. */
@media (max-width: 960px) {
  .dep-graph {
    margin-left: auto;
    margin-right: auto;
  }
}

.graph-frame {
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse at 50% 50%, var(--brand-glow-18), transparent 55%),
    linear-gradient(180deg, rgba(27, 22, 40, 0.8), rgba(19, 16, 30, 0.6));
  border: 1px solid var(--color-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    var(--shadow-lg);
  backdrop-filter: blur(8px);
}
.graph-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px var(--space-6);
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 11px; /* design-system-exempt: art */
}
.graph-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.graph-dots {
  display: flex;
  gap: 6px;
}
.graph-dots span {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(168, 85, 247, 0.3);
}
.graph-dots span:last-child {
  background: var(--color-error);
  box-shadow: 0 0 8px var(--color-error);
  animation: pulse-crit 2s ease-in-out infinite;
}
.graph-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--color-text-muted);
}
.graph-label {
  background: rgba(19, 16, 30, 0.8);
  padding: 4px var(--space-2);
  border-radius: 4px;
  border: 1px solid var(--color-border);
}
.graph-label.alert {
  color: var(--color-error);
  border-color: rgba(248, 113, 113, 0.3);
}

/* Alert card popover */
.graph-alert-card {
  position: absolute;
  top: 22%;
  right: -28px;
  background: linear-gradient(
    180deg,
    var(--color-surface-2),
    var(--color-surface)
  );
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-3) 14px;
  width: 220px;
  font-family: var(--font-mono);
  font-size: 11px; /* design-system-exempt: art */
  box-shadow:
    0 20px 40px -10px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(248, 113, 113, 0.15);
  animation: fadeInCard 1s 1.2s both;
  z-index: 2;
}
.graph-alert-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-error);
  font-weight: var(--weight-semibold);
  font-size: 10px; /* design-system-exempt: art */
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.graph-alert-head::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--color-error);
  border-radius: var(--radius-full);
  box-shadow: 0 0 8px var(--color-error);
  animation: pulse-crit 1.2s ease-in-out infinite;
}
.graph-alert-title {
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}
.graph-alert-meta {
  color: var(--color-text-muted);
  line-height: 1.4;
  font-size: 10px; /* design-system-exempt: art */
}
.graph-alert-meta span {
  color: var(--color-brand-light);
}

.graph-score-card {
  position: absolute;
  bottom: 22%;
  left: -28px;
  background: linear-gradient(
    180deg,
    var(--color-surface-2),
    var(--color-surface)
  );
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) 14px;
  width: 180px;
  box-shadow:
    0 20px 40px -10px rgba(0, 0, 0, 0.6),
    var(--shadow-md);
  animation: fadeInCard 1s 1.6s both;
  z-index: 2;
}
.graph-score-label {
  font-family: var(--font-mono);
  font-size: 10px; /* design-system-exempt: art */
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-light);
  margin-bottom: 6px;
}
.graph-score-val {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: 28px; /* design-system-exempt: art */
  color: var(--color-text);
  line-height: 1;
  margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.graph-score-val span {
  color: var(--color-text-muted);
  font-size: 0.5em;
  font-weight: var(--weight-medium);
}
.graph-score-bar {
  height: 3px;
  background: rgba(168, 85, 247, 0.15);
  border-radius: 2px;
  overflow: hidden;
}
.graph-score-bar-fill {
  height: 100%;
  width: 84%;
  background: linear-gradient(
    90deg,
    var(--color-brand-light),
    var(--color-warning)
  );
  border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────
   DEPTH SCAN — the home hero's transitive-depth visual.
   Replaced the dependency-graph SVG; .graph-stage and friends stay
   because /platform and /inspector still use them. /start reuses this
   visual, but static — its copy of the markup parks the resolve line
   itself rather than carrying .depth-beam, so nothing here applies to it
   beyond .depth-stage and .depth-layer.
   ───────────────────────────────────────────────────────────── */
.depth-stage {
  position: relative;
  /* Matches the SVG viewBox (560 × 612) so nothing letterboxes. */
  aspect-ratio: 560 / 612;
  /* Width is derived, not chosen: 520 × (560/612) ≈ 476 renders this at the
     same 520px height the square .graph-stage did, so swapping the visual
     doesn't change the hero's height or push the partner strip down. */
  width: 100%;
  max-width: 476px;
  margin-left: auto;
  animation: fadeUp 1.2s 0.4s both;
}
.depth-stage svg {
  width: 100%;
  height: 100%;
  /* Labels sit slightly outside the viewBox at the top. */
  overflow: visible;
}

/* Taller redraw, used on /start. That hero's copy column carries the booking
   form and runs ~750px against this stage's 520px, so its copy of the SVG is
   drawn on a 560×792 box and given the full width of its grid column (~517px)
   rather than the home page's 476px. Node radii and font sizes are viewBox
   units, so the wider box renders them slightly larger, not smaller.
   Declared ABOVE the 960px block below on purpose — equal specificity means
   source order decides, and that rule's 420px cap has to keep winning. */
.depth-stage--tall {
  aspect-ratio: 560 / 792;
  max-width: 520px;
}

/* Every layer is drawn at its mapped opacity and stays there. The lower tree
   recedes slightly so depth still reads, but nothing about it animates — the
   graphic asserts "we already see all of this", which a tree that assembles
   itself every 11 seconds does not. */
.depth-layer {
  opacity: 0.62;
}

/* THE one animated element on the page. The resolve line travels the full 450px
   of tree depth, crossing the amber ceiling on the way, holds at the bottom long
   enough to register, then fades and resets. Everything it passes is already
   lit, so this reads as "our reach goes all the way down" rather than as a
   progressive reveal. */
@keyframes depthBeamDrop {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  4% {
    transform: translateY(0);
    opacity: 1;
  }
  62% {
    transform: translateY(450px);
    opacity: 1;
  }
  78% {
    transform: translateY(450px);
    opacity: 1;
  }
  88% {
    transform: translateY(450px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}
.depth-beam {
  animation: depthBeamDrop 5.5s cubic-bezier(0.42, 0, 0.6, 1) infinite;
}

/* Only two animations left, and the tree is already complete without them. */
@media (prefers-reduced-motion: reduce) {
  .depth-stage,
  .depth-beam {
    animation: none;
  }
  /* Park the resolve line at its end state — below layer 07, past the amber
     ceiling — so the still frame still makes the argument. */
  .depth-beam {
    transform: translateY(450px);
  }
}

/* Mobile: the stage is the graph's slot in the stacked hero, so it inherits
   that order rule in the 960px block. Cap the width so the mono labels inside
   the SVG stay legible instead of scaling to nothing. */
@media (max-width: 960px) {
  .depth-stage {
    max-width: 420px;
    margin-right: auto;
  }
}

/* ─────────────────────────────────────────────────────────────
   HERO — OPEN GRAPH + FULL-BLEED NETWORK
   .graph-stage--open is the frameless variant of the boxed
   .graph-stage — used by the home, /inspector, and /platform
   heroes, whose SVGs carry their own ambient halo instead of the
   .graph-frame card. The home hero additionally layers a
   full-bleed ambient node field (.hero-net canvas, drawn by
   main.js) that fades out behind the copy.
   ───────────────────────────────────────────────────────────── */
.hero--net {
  overflow: hidden;
}
.hero--net .wrap {
  position: relative;
  z-index: 1;
}
.hero-net {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-net canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Legibility scrim: solid page color over the copy column fading out
   toward the graph (::before), plus a vertical fade under the nav and
   into the next section (::after). */
.hero-net::before,
.hero-net::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-net::before {
  background: linear-gradient(
    90deg,
    var(--color-bg) 4%,
    var(--color-bg-90) 30%,
    var(--color-bg-55) 46%,
    transparent 66%
  );
}
.hero-net::after {
  background: linear-gradient(
    180deg,
    var(--color-bg-55),
    transparent 26%,
    transparent 62%,
    var(--color-bg) 97%
  );
}

/* Open (frameless) variant of the graph cluster */
.graph-stage--open {
  max-width: 560px;
}
.graph-stage--open .graph-overlay {
  padding: 0;
}

/* Sticky variant — for a .product-row whose copy column runs far taller than the
   stage (/start's repo-review section is ~1070px against 560px). Without it the
   stage centres and leaves ~260px of void above and below; with it the graph
   stays alongside the copy as it scrolls. align-self is what makes this work:
   .product-row's align-items: center pins the item mid-column, which leaves
   sticky only half the travel. Offset matches .demo-form-wrap's nav clearance. */
.graph-stage--sticky {
  position: sticky;
  top: 96px;
  align-self: start;
}
/* Single column — there is no taller neighbour to stick alongside. */
@media (max-width: 960px) {
  .graph-stage--sticky {
    position: static;
  }
}
.graph-label--live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.graph-label--live::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--color-success);
  border-radius: var(--radius-full);
  box-shadow: 0 0 8px var(--color-success);
  animation: pulse-crit 2s ease-in-out infinite;
}
.graph-stage--open .edge-flow line {
  animation: dashflow 2.1s linear infinite;
}
.graph-stage--open .edge-flow line:nth-child(2n) {
  animation-duration: 2.5s;
}
.graph-stage--open .edge-flow line:nth-child(3n) {
  animation-duration: 2.9s;
}

/* Mobile: the ambient field would sit behind the copy at full width, so
   drop it and let the cluster (ordered after the logos) carry the visual. */
@media (max-width: 960px) {
  .hero-net {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   INCIDENT TICKER
   ═══════════════════════════════════════════════════════════ */
.ticker-section {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(
    180deg,
    rgba(27, 22, 40, 0.4),
    rgba(27, 22, 40, 0.2)
  );
  padding: var(--space-6) 0;
  overflow: hidden;
  position: relative;
}
.ticker-section::before,
.ticker-section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.ticker-section::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-bg), transparent);
}
.ticker-section::after {
  right: 0;
  background: linear-gradient(270deg, var(--color-bg), transparent);
}
.ticker-incident-label {
  position: absolute;
  left: var(--space-8);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-bg);
  padding: var(--space-2) var(--space-4) var(--space-2) 0;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-error);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ticker-incident-label::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--color-error);
  border-radius: var(--radius-full);
  box-shadow: 0 0 10px var(--color-error);
  animation: pulse-crit 1.2s ease-in-out infinite;
}
.ticker-track {
  display: flex;
  width: max-content;
  /* The ticker-fill JS (main.js) measures content vs. viewport, clones the
     list to cover the screen, and sets the real animation-duration for a
     constant scroll speed. The 60s here is only a fallback if that JS
     doesn't run. */
  animation: ticker 60s linear infinite;
  /* No left padding and no flex `gap`. An animated padding offset scrolls with
     the track and reappears as a gap after the last item on every loop. And a
     flex `gap` isn't added after the last item, so the duplicated-list seam
     would be half-a-gap off. Instead each .ticker-item owns its trailing space
     via margin-right, so the track is *exactly* two identical copies and a
     plain -50% loops seamlessly. The opaque label + edge fade mask the left. */
}
.ticker-item {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Trailing space lives on the item (not flex `gap`) so every copy is
     identical — see .ticker-track. */
  margin-right: var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-2);
  white-space: nowrap;
}
.ticker-item-date {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  opacity: 0.8;
}
.ticker-item-title {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}
.ticker-item-tag {
  padding: 2px var(--space-2);
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(248, 113, 113, 0.12);
  color: var(--color-error);
  border: 1px solid rgba(248, 113, 113, 0.2);
}
.ticker-item-tag.worm {
  background: rgba(251, 191, 36, 0.12);
  color: var(--color-warning);
  border-color: rgba(251, 191, 36, 0.2);
}

/* Small viewports: stack the label above the track so the feed scrolls
   beneath it instead of being covered by the overlaid label. */
@media (max-width: 640px) {
  .ticker-incident-label {
    position: static;
    transform: none;
    padding: 0 0 var(--space-4) 0;
    margin-left: var(--space-6);
  }
  .ticker-track {
    padding-left: var(--space-6);
  }
}

/* ═══════════════════════════════════════════════════════════
   SECTIONS COMMON
   ═══════════════════════════════════════════════════════════ */
section {
  padding: 120px 0;
}
/* Tightens the gap to the preceding section when two read as one group. */
.section--tight-top {
  padding-top: 60px;
}
.section-head {
  max-width: 760px;
  margin-bottom: var(--space-16);
}
.section-head .lead {
  margin-top: var(--space-6);
  max-width: 640px;
}
.section-head .hero-ctas {
  margin-top: var(--space-8);
}

/* ═══════════════════════════════════════════════════════════
   FOUNDING STORY TIMELINE
   Three milestones on a horizontal track. Each milestone owns its dot
   (::before) and the connector reaching to the next dot (::after) — no
   separate track element, so the whole thing rotates to a vertical rail
   on mobile by swapping those two pseudo-elements' geometry.
   ═══════════════════════════════════════════════════════════ */
.founding-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Arrowhead closing the track. The line runs past the last dot rather than
   dead-ending on it, so the row reads as continuing instead of stopping short
   with an empty third column. Lives on the container because that's what spans
   the full track width; rotates to point down in the mobile rail below. */
.founding-timeline::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 0;
  width: 0;
  height: 0;
  border-left: 7px solid var(--color-border-strong);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.founding-milestone {
  position: relative;
  /* Clears the dot row sitting at the top of each column. */
  padding-top: var(--space-8);
}
.founding-milestone::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: var(--radius-full);
  background: var(--color-brand-light);
  box-shadow: 0 0 12px var(--brand-glow-50);
}
/* The track. Runs from the right edge of this dot into the grid gap, ending
   under the next dot — which paints over the line end, since a later sibling's
   ::before stacks above an earlier sibling's ::after. */
.founding-milestone::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 21px;
  right: calc(-1 * var(--space-10));
  height: 1px;
  background: var(--color-border-strong);
}
/* The last segment has no next dot to reach, so it stops just short of the
   container's edge and hands off to the arrowhead. */
.founding-milestone:last-child::after {
  right: 8px;
}
/* Everything before Kusari is hollow; the last dot — where Kusari starts and
   the arrow carries on from — is the only filled one. Keyed off :last-child so
   adding a milestone keeps the rule right without editing it. */
.founding-milestone:not(:last-child)::before {
  background: transparent;
  border: 1.5px solid var(--color-border-strong);
  box-shadow: none;
}
.founding-when {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.founding-desc {
  font-size: var(--text-base);
  color: var(--color-text-2);
  line-height: var(--leading-normal);
  margin-top: var(--space-3);
}

/* Reuses .hero-stats and its value/label children; only the layout differs —
   three columns aligned to the timeline above instead of the hero's tight
   flex row, so each stat sits under the milestone it came from. */
.founding-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
  margin-top: var(--space-16);
}
.founding-stats .hero-stat-lbl {
  max-width: none;
  font-size: var(--text-sm);
}

/* Mobile: the track becomes a rail down the left. Source order is already
   chronological, so the milestones stack oldest-first with no `order` needed. */
@media (max-width: 960px) {
  .founding-timeline {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
  .founding-milestone {
    padding-top: 0;
    padding-left: var(--space-8);
  }
  .founding-milestone::before {
    top: 5px;
  }
  /* Vertical now: starts below this dot and runs into the next milestone,
     where that dot covers the overshoot. */
  .founding-milestone::after {
    top: 18px;
    left: 6px;
    right: auto;
    width: 1px;
    height: calc(100% + var(--space-12));
  }
  /* Runs var(--space-6) past the last milestone, then the arrowhead. */
  .founding-milestone:last-child::after {
    right: auto;
    height: calc(100% + 6px);
  }
  /* Same arrowhead, turned to point down the rail. All four borders are
     restated because the horizontal version sets three of them. */
  .founding-timeline::after {
    top: calc(100% + var(--space-6));
    right: auto;
    left: 2px;
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 7px solid var(--color-border-strong);
    border-bottom: 0;
  }
}
@media (max-width: 520px) {
  .founding-stats {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ═══════════════════════════════════════════════════════════
   PROBLEM DIAGRAM
   ═══════════════════════════════════════════════════════════ */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: center;
}
.diagram-stage {
  position: relative;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: linear-gradient(
    180deg,
    rgba(27, 22, 40, 0.6),
    rgba(19, 16, 30, 0.4)
  );
  border: 1px solid var(--color-border);
  aspect-ratio: 1 / 1;
}
.diagram-ring {
  border-radius: 50%;
  border: 1px dashed rgba(168, 85, 247, 0.25);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.diagram-ring.r1 {
  width: 35%;
  height: 35%;
}
.diagram-ring.r2 {
  width: 62%;
  height: 62%;
}
.diagram-ring.r3 {
  width: 88%;
  height: 88%;
}

.ring-tag {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px; /* design-system-exempt: art */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
.ring-tag.r1 {
  top: 35%;
  right: 35%;
  color: var(--color-brand-light);
}
.ring-tag.r2 {
  top: 22%;
  right: 22%;
  color: var(--color-text-2);
}
.ring-tag.r3 {
  top: 9%;
  right: 9%;
  color: var(--color-text-muted);
}

.diagram-app {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  background: linear-gradient(
    180deg,
    var(--color-brand-light),
    var(--color-brand-active)
  );
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  box-shadow: 0 0 40px var(--brand-glow-35);
  z-index: 4;
}
.diagram-app svg {
  width: 32px;
  height: 32px;
  color: var(--color-text);
}
.diagram-app-label {
  position: absolute;
  top: calc(50% + 52px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px; /* design-system-exempt: art */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-brand-light);
  white-space: nowrap;
}

.node-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-brand-light);
  box-shadow: 0 0 8px var(--brand-glow-35);
  transform: translate(-50%, -50%);
}
.node-dot.warn {
  background: var(--color-warning);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
}
.node-dot.crit {
  background: var(--color-error);
  box-shadow: 0 0 10px rgba(248, 113, 113, 0.8);
  animation: pulse-crit 1.8s ease-in-out infinite;
}
.node-dot.transitive {
  width: 6px;
  height: 6px;
  background: var(--color-text-muted);
  box-shadow: none;
  opacity: 0.6;
}

.diagram-callout {
  position: absolute;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px; /* design-system-exempt: art */
  color: var(--color-text);
  box-shadow:
    0 12px 24px -6px rgba(0, 0, 0, 0.4),
    var(--shadow-sm);
}
.diagram-callout::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 1px;
  background: var(--color-border-strong);
}
.diagram-callout-stat {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: 22px; /* design-system-exempt: art */
  line-height: 1;
  color: var(--color-brand-light);
  margin-bottom: 2px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.diagram-callout-stat + span {
  font-size: 10px; /* design-system-exempt: art */
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.diagram-cb-1 {
  top: 12%;
  right: -20px;
}
.diagram-cb-1::before {
  top: 50%;
  left: -24px;
}
.diagram-cb-2 {
  bottom: 12%;
  left: -20px;
}
.diagram-cb-2::before {
  top: 50%;
  right: -24px;
}
/* Once the problem grid is single-column, keep the ring diagram from
   ballooning into a giant square. */
@media (max-width: 960px) {
  .diagram-stage {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
}
/* On phones the side callouts sit on top of the rings/dots and only repeat
   the copy beside them — drop them so the diagram reads cleanly. */
@media (max-width: 600px) {
  .diagram-cb-1,
  .diagram-cb-2 {
    display: none;
  }
}
/* The center "app" tile is a fixed 72px; once the stage scales down on a
   phone it grows relative to the rings and covers the "Direct" ring tag.
   Shrink it (and its label offset) to keep it inside the inner ring. */
@media (max-width: 520px) {
  .diagram-app {
    width: 48px;
    height: 48px;
  }
  .diagram-app svg {
    width: 22px;
    height: 22px;
  }
  .diagram-app-label {
    top: calc(50% + 38px);
  }
}

.problem-copy h2 {
  margin-bottom: var(--space-8);
}
.problem-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  list-style: none;
}
.problem-point {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.problem-point-num {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--color-brand-light);
  line-height: 1;
  min-width: 32px;
  letter-spacing: 0.05em;
}
.problem-point-body h4 {
  margin-bottom: 6px;
}
.problem-point-body p {
  font-size: 15px; /* design-system-exempt: art */
  color: var(--color-text-2);
  line-height: var(--leading-normal);
}

/* ═══════════════════════════════════════════════════════════
   PLATFORM — FOUR PILLARS
   ═══════════════════════════════════════════════════════════ */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.pillar {
  position: relative;
  padding: 36px;
  border-radius: var(--radius-xl);
  background: linear-gradient(
    180deg,
    rgba(27, 22, 40, 0.8),
    rgba(19, 16, 30, 0.4)
  );
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition:
    border-color var(--transition-slow),
    transform var(--transition-slow);
}
.pillar:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

/* Whole-card link, used by the three capability cards on /platform. Same shape
   as .resource-card: the card element is the <a> and its CTA is a <span>, so
   there is exactly one link per card. Scoped to `a.pillar` because .pillar is
   a plain, non-clickable card on seven other pages — element+class outranks
   the bare .pillar rules above without needing a modifier class.
   The brand border on hover is what tells these apart from those. */
a.pillar {
  display: block;
}
a.pillar:hover {
  border-color: var(--color-brand);
}
a.pillar:hover .scale-card-link .arrow {
  transform: translateX(3px);
}
.pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-brand-light),
    transparent
  );
  opacity: 0.5;
}
.pillar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.pillar-name {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.pillar-icon {
  width: 34px;
  height: 34px;
  background: var(--brand-glow-12);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: var(--color-brand-light);
}
.pillar-icon svg {
  width: 16px;
  height: 16px;
}
.pillar-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand-light);
  padding: 3px var(--space-2);
  background: var(--brand-glow-08);
  border-radius: 4px;
  border: 1px solid var(--color-border-strong);
  flex-shrink: 0;
}
.pillar-desc {
  font-size: var(--text-base);
  color: var(--color-text-2);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-6);
}
.pillar-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 5px 10px;
  background: rgba(12, 10, 18, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-2);
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT DEEP-DIVE SECTIONS
   ═══════════════════════════════════════════════════════════ */
.product-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-20);
  align-items: center;
}
.product-row.reverse {
  grid-template-columns: 1.2fr 1fr;
}
/* For a row whose visual runs much taller than its copy (a four-stage flow
   beside a heading and one paragraph), centring leaves the copy floating in
   dead space, so it tops out instead. Declared after .product-row so it wins
   at equal specificity; the 960px collapse needs no change, since align-items
   is inert once the row is a single column. */
.product-row--top {
  align-items: start;
}
/* Screenshots scale to the column and keep their aspect ratio. The global `img`
   reset sets max-width without height: auto, so an <img> carrying real
   width/height attributes renders at the capped width and its full attribute
   height — squashed. With this, dropping a screenshot in just works: keep the
   width/height attributes and they only supply the ratio, which is what stops
   the row reflowing as the image loads. */
/* A closing line after a list in a copy column. Neither .product-list nor
   .lead carries a margin, so the gap is owned here, on one side only. */
.product-copy .product-list + .lead {
  margin-top: var(--space-8);
}

.product-visual img {
  width: 100%;
  height: auto;
}

.product-row.reverse .product-copy {
  order: 2;
}
.product-row.reverse .product-visual {
  order: 1;
}

.product-copy h2,
.product-copy h3 {
  margin-bottom: var(--space-6);
}
.product-copy .lead {
  margin-bottom: var(--space-8);
}
/* A lead with nothing after it (the value-prop rows) owns no trailing gap —
   otherwise the copy sits visibly off-centre against its visual. */
.product-copy .lead:last-child {
  margin-bottom: 0;
}

/* Stacked value-prop rows under a section head. Only the rhythm between rows
   lives here; each row is a plain .product-row. */
.value-props {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Placeholder standing in for a product screenshot that hasn't been captured
   yet. Temporary by design: each stub carries the <img> to paste over it, and
   when the last one is replaced this rule has no markup left to match. */
.shot-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  aspect-ratio: 16 / 10;
  padding: var(--space-8);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.shot-stub p {
  font-size: 15px; /* design-system-exempt: art */
  color: var(--color-text-2);
  line-height: var(--leading-normal);
  max-width: 44ch;
}
/* Default: inline rows. Bullet · bold label · continuation text all on one line. */
.product-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.product-list li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text-2);
  line-height: var(--leading-snug);
  list-style: none;
}
.product-list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  background: var(--color-brand-light);
  border-radius: var(--radius-full);
  box-shadow: 0 0 8px var(--brand-glow-35);
}
.product-list li strong {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

/* Stacked variant: bold label on its own line above the description. Use when
   the labels are full sentences of varying length and you want descriptions to
   share a consistent left edge. */
.product-list--stacked {
  gap: var(--space-4);
}
.product-list--stacked li {
  display: block;
  position: relative;
  padding-left: 22px;
}
.product-list--stacked li::before {
  position: absolute;
  left: 0;
  top: 9px;
  margin-top: 0;
}
.product-list--stacked li strong {
  display: block;
  margin-bottom: 2px;
}

/* ── Inspector PR Mock ── */
.pr-mock {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.5),
    var(--shadow-md);
  font-family: var(--font-sans);
}
.pr-head {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: rgba(27, 22, 40, 0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pr-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
}
.pr-branch {
  font-family: var(--font-mono);
  font-size: 11px; /* design-system-exempt: art */
  color: var(--color-text-muted);
  padding: 3px var(--space-2);
  background: var(--color-surface-2);
  border-radius: 4px;
}
.pr-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px; /* design-system-exempt: art */
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-error);
}
.pr-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-error);
  box-shadow: 0 0 8px var(--color-error);
}
.pr-body {
  padding: var(--space-6);
}

.pr-check {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(12, 10, 18, 0.4);
}
.pr-check.pass {
  border-color: rgba(52, 211, 153, 0.2);
  background: rgba(52, 211, 153, 0.04);
}
.pr-check.fail {
  border-color: rgba(248, 113, 113, 0.25);
  background: rgba(248, 113, 113, 0.05);
}
.pr-check-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pr-check.pass .pr-check-icon {
  background: rgba(52, 211, 153, 0.15);
  color: var(--color-success);
}
.pr-check.fail .pr-check-icon {
  background: rgba(248, 113, 113, 0.15);
  color: var(--color-error);
}
.pr-check-icon svg {
  width: 14px;
  height: 14px;
}
.pr-check-body {
  flex: 1;
  min-width: 0;
}
.pr-check-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.pr-check-meta {
  font-family: var(--font-mono);
  font-size: 11px; /* design-system-exempt: art */
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}
.pr-check-meta span.dep {
  color: var(--color-text);
  background: var(--color-surface-2);
  padding: 1px 6px;
  border-radius: 3px;
}
.pr-check-meta span.cve {
  color: var(--color-error);
}
.pr-check-meta span.score {
  color: var(--color-warning);
}
.pr-check-meta span.fix {
  color: var(--color-success);
}

.pr-fix {
  margin-top: 14px;
  padding: var(--space-3) 14px;
  background: var(--color-bg);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-2);
}
.pr-fix-label {
  font-size: 10px; /* design-system-exempt: art */
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-light);
  margin-bottom: 6px;
}
.pr-diff-rem {
  color: var(--color-error);
  background: rgba(248, 113, 113, 0.08);
  padding: 2px var(--space-1);
  border-radius: 3px;
}
.pr-diff-add {
  color: var(--color-success);
  background: rgba(52, 211, 153, 0.08);
  padding: 2px var(--space-1);
  border-radius: 3px;
  margin-top: 2px;
  display: inline-block;
}

.pr-foot {
  padding: 14px var(--space-6);
  border-top: 1px solid var(--color-border);
  background: rgba(27, 22, 40, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px; /* design-system-exempt: art */
  color: var(--color-text-muted);
}
.pr-foot-kusari {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-brand-light);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* On phones the footer is too narrow for both items side by side — stack
   them so "kusari/inspector" sits on its own line below the check summary. */
@media (max-width: 520px) {
  .pr-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* ── Agent Terminal ── */
.terminal-mock {
  background: linear-gradient(180deg, var(--color-surface), var(--color-bg));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.5),
    var(--shadow-md);
  font-family: var(--font-mono);
  position: relative;
}
.terminal-head {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.terminal-head-dots {
  display: flex;
  gap: 6px;
  margin-right: 10px;
}
.terminal-head-dots span {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-surface-hover);
}
.terminal-head-dots span:nth-child(1) {
  background: #ff5f56;
  opacity: 0.8;
}
.terminal-head-dots span:nth-child(2) {
  background: var(--color-warning);
  opacity: 0.8;
}
.terminal-head-dots span:nth-child(3) {
  background: var(--color-success);
  opacity: 0.8;
}
.terminal-title {
  flex: 1;
  text-align: center;
  font-weight: var(--weight-medium);
}
.terminal-title span {
  color: var(--color-brand-light);
}

.terminal-body {
  padding: var(--space-6) 22px 26px;
  min-height: 320px;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.term-prompt {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
/* Keep "kusari ▸" intact and let the (growing) query text wrap beside it,
   instead of the flex squeeze pushing the arrow onto its own line. */
.term-prompt-sign {
  color: var(--color-brand-light);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
  white-space: nowrap;
}
.term-query {
  color: var(--color-text);
  min-width: 0;
  overflow-wrap: anywhere;
}
.term-query .cursor {
  display: inline-block;
  width: 7px;
  height: 15px;
  background: var(--color-brand-light);
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}
.term-response {
  margin-top: 10px;
  margin-bottom: 22px;
  color: var(--color-text-2);
  font-size: var(--text-xs);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border-strong);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.4s,
    transform 0.4s;
}
.term-response.show {
  opacity: 1;
  transform: translateY(0);
}
.term-response-summary {
  color: var(--color-brand-light);
  margin-bottom: 6px;
  font-weight: var(--weight-medium);
}
.term-response-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 2px 0;
}
.term-response-tag {
  display: inline-block;
  font-size: var(--text-xs);
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(248, 113, 113, 0.12);
  color: var(--color-error);
  border: 1px solid rgba(248, 113, 113, 0.2);
  min-width: 50px;
  text-align: center;
}
.term-response-tag.ok {
  background: rgba(52, 211, 153, 0.12);
  color: var(--color-success);
  border-color: rgba(52, 211, 153, 0.2);
}
.term-response-tag.warn {
  background: rgba(251, 191, 36, 0.12);
  color: var(--color-warning);
  border-color: rgba(251, 191, 36, 0.2);
}
.term-response-path {
  color: var(--color-text-2);
  flex: 1;
  font-size: var(--text-xs);
}
.term-response-meta {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════
   COMPLIANCE / CRA
   ═══════════════════════════════════════════════════════════ */
.compliance-wrap {
  padding: 56px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse at 80% 20%, var(--brand-glow-18), transparent 60%),
    linear-gradient(180deg, rgba(38, 30, 56, 0.8), rgba(19, 16, 30, 0.6));
  border: 1px solid var(--color-border-strong);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.countdown-block {
  padding: var(--space-8);
  background: rgba(12, 10, 18, 0.6);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.countdown-block::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--color-brand-light),
    var(--color-warning),
    var(--color-brand-light)
  );
}
.countdown-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-warning);
  margin-bottom: 14px;
}
.countdown-digits {
  display: flex;
  gap: var(--space-2);
  margin-bottom: 18px;
}
.countdown-unit {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  min-width: 72px;
  text-align: center;
}
.countdown-val {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.countdown-txt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 6px;
}
.countdown-footer {
  font-size: var(--text-sm);
  color: var(--color-text-2);
  line-height: var(--leading-snug);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.countdown-footer strong {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.compliance-copy h2 {
  margin-bottom: var(--space-6);
}
.compliance-copy .lead {
  margin-bottom: 26px;
}
.compliance-frameworks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.framework-chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  padding: 6px var(--space-3);
  background: var(--brand-glow-08);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-brand-light);
}

/* ═══════════════════════════════════════════════════════════
   QUOTE
   ═══════════════════════════════════════════════════════════ */
.quote-block {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.quote-open {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: 0.5;
  color: var(--color-brand-light);
  opacity: 0.6;
  margin-bottom: var(--space-6);
  display: inline-block;
}
.quote-text {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: var(--leading-snug);
  color: var(--color-text);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-6);
  font-style: italic;
  font-weight: var(--weight-normal);
}
.quote-text em {
  color: var(--color-brand-light);
  font-style: italic;
}
.quote-attrib {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.quote-attrib span {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

/* ═══════════════════════════════════════════════════════════
   STANDARDS ROW
   ═══════════════════════════════════════════════════════════ */
.standards-section {
  padding: 120px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(27, 22, 40, 0.3), transparent);
}
.standards-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-20);
  align-items: center;
}
.standards-copy h2 {
  margin-bottom: var(--space-6);
}
.standards-copy .lead {
  margin-bottom: var(--space-6);
}
.standards-copy p {
  color: var(--color-text-2);
  font-size: var(--text-base);
  line-height: 1.6;
  margin-bottom: 14px;
}

.standards-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.standard-card {
  padding: 22px;
  background: rgba(27, 22, 40, 0.5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base);
}
.standard-card:hover {
  border-color: var(--color-border-strong);
}
.standard-name {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--color-brand-light);
  margin-bottom: var(--space-2);
}
.standard-desc {
  font-size: var(--text-sm);
  color: var(--color-text-2);
  line-height: var(--leading-normal);
}

.adopter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding-top: var(--space-8);
  margin-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  align-items: center;
}
.adopter-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}
.adopter-name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--color-text-2);
  position: relative;
}

/* ═══════════════════════════════════════════════════════════
   INTEGRATIONS
   ═══════════════════════════════════════════════════════════ */
.integrations {
  padding: 100px 0;
}
.integrations-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}
.integrations-head h2 {
  margin-bottom: var(--space-4);
}

.integ-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.integ-cell {
  background: var(--color-surface);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  transition: background var(--transition-base);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-2);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
}
.integ-cell:hover {
  background: var(--brand-glow-08);
  color: var(--color-text);
}

/* ═══════════════════════════════════════════════════════════
   CTA
   ═══════════════════════════════════════════════════════════ */
.cta-section {
  padding: 140px 0;
  position: relative;
}
.cta-wrap {
  padding: var(--space-16) 56px;
  border-radius: 28px;
  background:
    radial-gradient(
      ellipse at 20% 20%,
      rgba(168, 85, 247, 0.22),
      transparent 60%
    ),
    radial-gradient(
      ellipse at 80% 80%,
      rgba(114, 40, 184, 0.18),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(38, 30, 56, 0.9), rgba(19, 16, 30, 0.8));
  border: 1px solid var(--color-border-strong);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-brand-light),
    transparent
  );
}
.cta-wrap h2 {
  margin-bottom: var(--space-4);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.cta-wrap .lead {
  max-width: 560px;
  margin: 0 auto 36px;
}
.cta-wrap .hero-ctas {
  justify-content: center;
  margin-top: var(--space-8);
}
.cta-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
.cta-path {
  padding: var(--space-6);
  background: rgba(12, 10, 18, 0.6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition:
    border-color 250ms ease,
    transform 250ms ease;
}
.cta-path:hover {
  border-color: var(--color-brand-light);
  transform: translateY(-2px);
}
.cta-path-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: 6px;
}
.cta-path-desc {
  font-size: var(--text-base);
  color: var(--color-text-2);
  line-height: var(--leading-normal);
  margin-bottom: 18px;
}
.cta-path-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-brand-light);
}
.cta-path:hover .cta-path-link .arrow {
  transform: translateX(3px);
}

/* Pricing variant of the pair (/inspector). The base sits inside the centered
   .cta-wrap, so it is capped at 720px and auto-centered; here it follows a
   left-aligned .section-head and has to line up with it. Cards also need a
   real fill, because .cta-path's rgba(12, 10, 18, 0.6) is all but invisible
   against --color-bg once it is off the CTA gradient. */
.cta-pair--pricing {
  max-width: 880px;
  margin: 0;
  gap: var(--space-6);
}
.cta-pair--pricing .cta-path {
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}
/* The card is an <article> here, not the link (.btn inside it is), because an
   anchor cannot nest in an anchor. So the base hover has to go: a card that
   lifts under the cursor and does nothing on click is a false affordance. */
.cta-pair--pricing .cta-path:hover {
  border-color: var(--color-border);
  transform: none;
}
/* Bottom-aligned so the two buttons line up whatever the description runs to,
   matching .scale-card-link in the surfaces grid above. The button sits in a
   .hero-ctas wrapper, which is the site-wide button container: its flex row
   shrink-wraps the button, so nothing here has to reach into .btn to stop the
   column stretching it. */
.cta-pair--pricing .cta-path .hero-ctas {
  margin-top: auto;
}
/* Trailing note under the pricing pair. This rule owns the whole gap up to
   the cards; .lead carries no margin of its own outside a .section-head. */
.cta-pair--pricing + .lead {
  margin-top: var(--space-8);
}
/* The price is the card's headline, so it takes the slot .cta-path-title holds
   on the CTA pair and none of that class's type. */
.cta-path-price {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-tight);
  /* Owns the whole gap down to the description. */
  margin-bottom: var(--space-3);
}
.cta-path-price-unit {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--color-text-2);
  line-height: var(--leading-snug);
  margin-top: var(--space-1);
}
/* Stacks at the same breakpoint as every other grid on the site. The shared
   RESPONSIVE block near the top of the file already stacks .cta-pair there and
   sits LATER in the source, so this needs the doubled class to win the gap at
   equal specificity — 48px reads as two unrelated cards once they are in a
   column. */
@media (max-width: 960px) {
  .cta-pair.cta-pair--pricing {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    max-width: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
footer {
  padding: var(--space-20) 0 var(--space-10);
  border-top: 1px solid var(--color-border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-16);
}
.footer-brand .logo {
  margin-bottom: var(--space-6);
}
.footer-tagline {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text-2);
  line-height: 1.45;
  max-width: 280px;
}
.footer-col-title {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 18px;
  transition: color var(--transition-base);
}
a.footer-col-title:hover {
  color: var(--color-text);
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-col a {
  font-size: var(--text-sm);
  color: var(--color-text-2);
  transition: color var(--transition-base);
}
.footer-col a:hover {
  color: var(--color-text);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════
   BLOG LANDING
   ═══════════════════════════════════════════════════════════ */
.blog-head {
  padding: var(--hero-top) 0 var(--space-12);
  border-bottom: 1px solid var(--color-border);
}
.blog-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.blog-lede {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-2);
  max-width: 640px;
}

.blog-list {
  padding: var(--space-16) 0 var(--space-24);
}
.blog-list-grid {
  margin: 0 auto;
  display: grid;
  /* min() rather than a bare 300px: auto-fill still lays down one track when
     one does not fit, and a bare 300px floor cannot shrink below that, so the
     card overhangs the viewport on a ~320px screen. */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--space-6);
}

.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  transition:
    border-color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.blog-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.blog-card-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 — locks every card's image area to the same height regardless of source image dimensions */
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  overflow: hidden;
  background: var(--color-surface);
}
.blog-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-card-body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-card-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  transition: color var(--transition-base);
}
.blog-card:hover .blog-card-title {
  color: var(--color-brand-light);
}
.blog-card-desc {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text-2);
  margin-bottom: var(--space-4);
}
.blog-card-byline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
}
.blog-card-byline-photos {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.blog-card-byline-photo {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  display: block;
  object-fit: cover;
}
.blog-card-byline-photos .blog-card-byline-photo + .blog-card-byline-photo {
  margin-left: -8px;
  box-shadow: 0 0 0 2px var(--color-surface);
}
.blog-card-byline-text {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.blog-card-byline-names {
  color: var(--color-text-2);
}

@media (max-width: 520px) {
  .blog-head {
    padding: 100px 0 var(--space-8);
  }
  .blog-list {
    padding: var(--space-12) 0 var(--space-16);
  }
}

/* Blog pager — "Newer" / "Older" only, no page-number buttons.
   The three columns are what keep this honest: the outer 1fr pair absorbs all
   the free space, so the counter is exactly centered and each link is pulled in
   tight against it. Because the columns are assigned explicitly, a page with
   only one link (the first and last) leaves the counter centered rather than
   letting it slide into the empty column. */
.blog-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.blog-pager-prev {
  grid-column: 1;
  justify-self: end;
}
.blog-pager-count {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.blog-pager-next {
  grid-column: 3;
  justify-self: start;
}
/* `.btn:hover .arrow` nudges right; the back-pointing arrow has to go left. */
.blog-pager-prev:hover .arrow {
  transform: translateX(-3px);
}

@media (max-width: 520px) {
  /* All three on one row doesn't fit a phone, so the counter drops to its own
     line under the links. Flex rather than a 2-column grid on purpose: the
     first and last pages have only one link, and a grid would leave it sitting
     in its assigned column instead of centered. The children's grid-column and
     justify-self are simply ignored here. */
  .blog-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-12);
  }
  .blog-pager-count {
    order: 3;
    flex-basis: 100%;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   LEARNING CENTER
   ═══════════════════════════════════════════════════════════ */

.lc-featured {
  padding: var(--space-16) 0 var(--space-12);
  border-bottom: 1px solid var(--color-border);
}
.lc-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.lc-featured-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition:
    border-color var(--transition-base),
    background var(--transition-base),
    transform var(--transition-base);
}
.lc-featured-card:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-2);
  transform: translateY(-2px);
}
.lc-featured-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin: 0;
}
.lc-featured-desc {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text-2);
  margin: 0;
}
.lc-featured-cta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brand-light);
}
.lc-featured-cta .arrow {
  transition: transform var(--transition-base);
  display: inline-block;
}
.lc-featured-card:hover .lc-featured-cta .arrow {
  transform: translateX(4px);
}

.lc-index {
  padding: var(--space-16) 0 var(--space-24);
}
.lc-jumpnav {
  position: sticky;
  top: 64px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-12);
  background: rgba(12, 10, 18, 0.85);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}
.lc-jumpnav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--color-text-2);
  transition:
    background var(--transition-base),
    color var(--transition-base);
}
.lc-jumpnav a:hover {
  background: var(--color-brand-subtle);
  color: var(--color-brand-light);
}

.lc-letter-group {
  margin-top: var(--space-16);
  scroll-margin-top: 140px;
}
.lc-letter-group:first-of-type {
  margin-top: var(--space-8);
}
.lc-letter {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-light);
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.lc-entry-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-8);
}
.lc-entry-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition:
    background var(--transition-base),
    border-color var(--transition-base);
}
.lc-entry-link:hover {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.lc-entry-name {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-bottom: 2px;
}
.lc-entry-desc {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-2);
}

@media (max-width: 768px) {
  .lc-featured-grid {
    grid-template-columns: 1fr;
  }
  .lc-entry-list {
    grid-template-columns: 1fr;
  }
  .lc-jumpnav {
    top: 56px;
  }
}

/* ═══════════════════════════════════════════════════════════
   DEMO PAGE (/demo)
   ═══════════════════════════════════════════════════════════ */
.demo-hero {
  padding: var(--hero-top) 0 var(--space-20);
}
.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}
/* The pitch column is far shorter than the form card beside it, so top-aligning
   both leaves it stranded at the top. Centring balances the two. No mobile
   override needed: stacked, each item is its own row, so this is a no-op. */
.demo-grid--centered {
  align-items: center;
}
.demo-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0 0 var(--space-6);
}
.demo-lede p {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-2);
  margin: 0 0 var(--space-4);
  max-width: 56ch;
}
.demo-lede p:last-child {
  margin-bottom: 0;
}
.demo-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  max-width: 56ch;
}
.demo-bullets li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text-2);
  margin-bottom: var(--space-3);
}
.demo-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-brand);
}
.demo-bullets li:last-child {
  margin-bottom: 0;
}
.demo-bullets strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

/* Hero value props — short checkmarked lines under the demo headline. */
.demo-values {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
}
.demo-values li {
  position: relative;
  padding-left: var(--space-8);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.demo-values li:last-child { margin-bottom: 0; }
.demo-values li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-brand-light);
  font-weight: var(--weight-bold);
}
/* Lead-in sentence. Owns the gap down to the number below it. */
.demo-phone {
  margin-top: var(--space-10);
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-2);
}
/* Sibling of .demo-phone, not a child — the paragraph above is block-level, so
   the link starts on its own line while staying inline and hugging the digits. */
.demo-phone-number {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-light);
}
.demo-phone-number:hover { text-decoration: underline; }

.demo-form-wrap {
  position: sticky;
  top: 96px;
  background: #fff;
  color: #0c0a12;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

/* HubSpot form overrides — gently theme the embedded markup */
#demo-form .hs-form-field {
  margin-bottom: var(--space-4);
}
#demo-form .hs-form-field > label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: #0c0a12;
  margin-bottom: var(--space-1);
}
#demo-form .hs-form-required {
  color: var(--color-brand);
  margin-left: 2px;
}
#demo-form .hs-input,
#demo-form input.hs-input,
#demo-form select.hs-input,
#demo-form textarea.hs-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: #0c0a12;
  background: #fff;
  border: 1px solid #d4cce5;
  border-radius: var(--radius-sm);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}
#demo-form .hs-input:focus,
#demo-form .hs-input:focus-visible {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
#demo-form textarea.hs-input {
  min-height: 120px;
  resize: vertical;
}
#demo-form .hs-error-msgs,
#demo-form .hs-error-msg {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  color: var(--color-error);
  font-size: var(--text-xs);
}
#demo-form .hs-richtext,
#demo-form .hs-richtext p {
  font-size: var(--text-xs);
  color: #555;
  line-height: var(--leading-snug);
}
#demo-form .hs-richtext a {
  color: var(--color-brand);
  text-decoration: underline;
}
#demo-form .hs_submit {
  margin-top: var(--space-4);
}
#demo-form .hs-button,
#demo-form input.hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: #fff;
  background: var(--color-brand);
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-base);
}
#demo-form .hs-button:hover,
#demo-form input.hs-button:hover {
  background: var(--color-brand-hover);
}
#demo-form .hs-fieldtype-checkbox ul,
#demo-form .hs-fieldtype-radio ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#demo-form .hs-form-checkbox-display,
#demo-form .hs-form-radio-display {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
#demo-form .submitted-message {
  font-size: var(--text-base);
  color: #0c0a12;
}

/* "Who you'll talk to" — centered reuse of the .webinar-person component. */
.demo-team {
  padding: var(--space-16) 0;
  text-align: center;
  border-top: 1px solid var(--color-border);
}
.demo-team .eyebrow { display: inline-flex; justify-content: center; }
.demo-team .webinar-people { justify-content: center; margin-top: var(--space-8); }
.demo-team .webinar-person { text-align: left; }

@media (max-width: 960px) {
  .demo-grid {
    grid-template-columns: 1fr;
  }
  .demo-form-wrap {
    position: static;
  }
}

/* ═══════════════════════════════════════════════════════════
   BLOG POST
   ═══════════════════════════════════════════════════════════ */
.post {
  padding: var(--hero-top) 0 var(--space-24);
}
.post-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-8);
}
.post-head {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}
.post-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  transition: color var(--transition-base);
}
.post-back:hover {
  color: var(--color-brand-light);
}
.post-back .arrow {
  transition: transform var(--transition-base);
}
.post-back:hover .arrow {
  transform: translateX(-3px);
}

.post-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}
.post-lede {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-2);
  margin-bottom: var(--space-6);
}
.post-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.post-byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.post-byline-photos {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.post-byline-photo {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  display: block;
  object-fit: cover;
  background: var(--color-surface);
}
.post-byline-photos .post-byline-photo + .post-byline-photo {
  margin-left: -12px;
  box-shadow: 0 0 0 2px var(--color-bg);
}
.post-byline-name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: 1.2;
}
.post-byline-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.post-feature {
  margin-bottom: var(--space-12);
}
.post-feature img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.post-body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-2);
}
.post-body > p,
.post-body > ul,
.post-body > ol,
.post-body > blockquote,
.post-body > figure,
.post-body > pre,
.post-body > table {
  margin-bottom: var(--space-6);
}
.post-body > p:first-of-type {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text);
}
.post-body h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}
.post-body h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.post-body strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}
.post-body em {
  font-style: italic;
}
/* Inline link inside prose. `a` is globally unstyled (color: inherit, no
   underline) so links in body copy need this explicitly. Two hooks, one
   definition: .post-body and .about-prose style every link inside a prose
   container, and .prose-link is applied per link on pages that own their own
   <head> and get neither. */
.post-body a,
.about-prose a:not(.btn),
.prose-link {
  color: var(--color-brand-light);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition:
    text-decoration-color var(--transition-base),
    color var(--transition-base);
}
.post-body a:hover,
.about-prose a:not(.btn):hover,
.prose-link:hover {
  text-decoration-color: var(--color-brand-light);
  color: var(--color-brand-hover);
}
.post-body ul,
.post-body ol {
  padding-left: var(--space-6);
}
.post-body li {
  margin-bottom: var(--space-2);
}
.post-body li::marker {
  color: var(--color-brand-light);
}
/* Markdown tables in prose — blog posts, learning-center, legal. Markdown gives
   us a bare <table> with no wrapper, so everything hangs off element selectors.

   `display: block` is the mobile overflow fix: these tables run well past a
   phone (HITRUST is six columns), nothing sets a width on them, and table
   layout will not shrink below min-content, so the overflow was being clipped
   by the body and the right half was unreachable. `display: block` is what
   makes overflow apply to a table box; the rows still lay out as a table
   inside the resulting anonymous table box.

   That anonymous box is sized to its own content rather than to the block, so
   a border or background on the table element would paint wider than the rows.
   Borders therefore go on the cells, which track the real row width. */
.post-body table,
.data-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.data-table {
  width: fit-content;
  margin-inline: auto;
}
.post-body th,
.post-body td,
.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
/* Same mono/uppercase treatment as .compare-head, the site's table-header voice. */
.post-body th,
.data-table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  border-bottom-color: var(--color-border-strong);
}
/* First column is a row label in every table we have; give it heading weight.
   Auto table layout hands the label column whatever is left after the prose
   column takes its share, which wraps short labels onto three lines. A floor
   stops that; the tables that are too wide for a phone already scroll. */
.post-body th:first-child,
.post-body td:first-child,
.data-table th:first-child,
.data-table td:first-child {
  min-width: 10rem;
}
.post-body td:first-child,
.data-table td:first-child {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}
.post-body tbody tr:last-child td,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}
/* The Kusari column header, same brand accent .compare-col-kusari gives its
   heading on /developers. */
.data-table th.is-kusari {
  color: var(--color-brand-light);
}
/* On a phone that floor is nearly half the container, which squeezes the prose
   column into a two-word ribbon. Drop it and let auto layout share the width
   out by content; the table still scrolls in place when it needs to. */
@media (max-width: 960px) {
  .post-body th:first-child,
  .post-body td:first-child,
  .data-table th:first-child,
  .data-table td:first-child {
    min-width: 0;
  }
}

/* A five- or six-column table has no chance in a 720px prose column: the SBOM
   tool comparison scrolls on a desktop of any size, because what's narrow is
   the column, not the window. Once there is room beside the column, let those
   tables break out of it — symmetric about the prose, capped at the viewport
   minus a gutter, so they gain the width without the page ever scrolling
   sideways (`body` is `overflow-x: hidden`, so anything past the viewport would
   be clipped and unreachable rather than scrollable).

   `:has(th:nth-child(4))` is the opt-in. The selector matches only when a
   fourth header cell exists, so every two- and three-column table on the site
   keeps the treatment above — including the genuinely narrow ones, which have
   nothing to gain from more room.

   The width goes on the table rather than being faked with negative margins on
   both sides, and that means dropping back to `display: table`. Widening the
   block alone does not widen the table: the anonymous table box inside sizes to
   its own content and stays left-aligned, so a four-column table narrower than
   the breakout would sit in the left margin instead of centered under the
   prose. `overflow-x` is not needed here either — the width is capped below the
   viewport, so there is nothing left to scroll.

   The child combinator is doing work: the learning-center pages wrap their wide
   tables (HITRUST's six-column framework matrix among them) in a bare
   `.comparison-table-wrap` div, so those are untouched by this and still scroll
   inside the column. Widen the selector if that's wanted there too. */
@media (min-width: 1024px) {
  .post-body > table:has(th:nth-child(4)) {
    --post-table-wide: min(1080px, calc(100vw - var(--space-24)));
    display: table;
    width: var(--post-table-wide);
    max-width: none;
    margin-left: calc((100% - var(--post-table-wide)) / 2);
  }
}

.post-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.post-body pre {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.post-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: var(--text-sm);
}
.post-body blockquote {
  border-left: 2px solid var(--color-brand-light);
  padding-left: var(--space-4);
  font-style: italic;
  color: var(--color-text);
}

/* Pull quote — a sentence lifted out of the post's own flow for emphasis.
   Distinct from `blockquote`, which keeps the credited quotes: that one is
   italic behind a brand rule, this one is roman and larger, so the two don't
   read as one component at two sizes. <aside> because it carries no caption
   and the content is the author's own; the blank lines in the Markdown are
   required, or markdown-it treats the wrapper as raw HTML and inline
   Markdown stops working:

     <aside class="pullquote">

     Text, with *emphasis* and [links](/x).

     </aside>
*/
.pullquote {
  /* .post-body's spacing rule covers p/ul/ol/blockquote/figure/pre/table, not
     this. */
  margin: var(--space-12) 0;
  /* In flow, size alone reads as "a big paragraph" — the rules bound it as a
     lifted block instead. Stronger than `hr`'s --color-border so a band and a
     section divider stay distinguishable, and the space inside is half the
     space outside so the two lines group with the quote rather than floating
     between it and the body copy. The rail state below drops these in favour
     of a single rule facing the column. */
  border-top: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border-strong);
  padding: var(--space-6) 0;
}
.pullquote p {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}
.pullquote p:last-child {
  margin-bottom: 0;
}

@media (max-width: 520px) {
  .pullquote {
    margin: var(--space-10) 0;
  }
  .pullquote p {
    font-size: var(--text-lg);
  }
}

/* Above 1340px there is room outside the column to hang the quote in the left
   margin, so the body copy keeps its full 656px measure instead of wrapping at
   ~32 characters beside an in-column float. The rail needs 300px of free space
   on the left (276px wide plus a 24px gutter) and the centered column's own
   half-width eats the rest, which is what sets the threshold: at 1340px the
   rail lands 42px clear of the viewport edge.

   The threshold is deliberately conservative because `body` is
   `overflow-x: hidden` — a rail that doesn't fit is CLIPPED rather than
   scrolled, so the words of the quote would silently vanish rather than merely
   look cramped.

   Floats only wrap what follows them, so the <aside> goes BEFORE the paragraph
   it should sit beside, not between the two paragraphs where it appears to
   belong. Keep it clear of tables and code blocks, which squeeze rather than
   wrap. Below 1340px none of this applies and the quote stays in flow at full
   column width.
*/
@media (min-width: 1340px) {
  .pullquote {
    float: left;
    /* 276px carries ~259px of text once the padding and rule are taken out,
       which is what keeps a short quote to three even lines rather than four
       tapering ones. */
    width: 276px;
    /* Left margin is -(width + gutter), which lifts the rail clear of the
       column so the wrapping paragraph is never narrowed. */
    margin: var(--space-2) var(--space-6) var(--space-6) -300px;
    /* The rule faces the column, tethering the quote to the text it belongs
       to rather than leaving it adrift in the margin. Thinner and quieter
       than blockquote's 2px brand rule so the two don't read as one
       component mirrored. `box-sizing: border-box` is global, so the padding
       and border come out of the 276px rather than adding to it, which is why
       the width above is what it is. */
    border-top: 0;
    border-bottom: 0;
    border-right: 1px solid var(--color-border-strong);
    padding: 0 var(--space-4) 0 0;
  }
  .pullquote p {
    font-size: var(--text-lg);
  }
  /* A wrapping paragraph shorter than the rail would let the float hang down
     into the next section head. Nothing else in a post body floats. */
  .post-body h2,
  .post-body h3 {
    clear: both;
  }
}

.post-body hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}
.post-body .sl-embed {
  margin-bottom: var(--space-8);
}

@media (max-width: 520px) {
  .post {
    padding: 100px 0 var(--space-16);
  }
  .post-inner {
    padding: 0 var(--space-6);
  }
  .post-body {
    font-size: var(--text-base);
  }
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInCard {
  from {
    opacity: 0;
    transform: translate(0, 8px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes ticker {
  from {
    transform: translateX(0);
  }
  /* Each item owns its trailing margin (see .ticker-item), so the track is
     exactly two identical copies — a plain -50% lands the second copy on the
     first with no seam. */
  to {
    transform: translateX(-50%);
  }
}
@keyframes pulse-crit {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.75;
  }
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
@keyframes dashflow {
  to {
    stroke-dashoffset: -20;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  :root {
    /* The mobile nav is shorter (.nav-inner drops to --space-3 padding), so the
       same gap needs less top padding — and vertical space is scarcer here. */
    --hero-top: 140px;
  }
  .hero-grid,
  .problem-grid,
  .product-row,
  .product-row.reverse,
  .compliance-wrap,
  .standards-grid,
  .cta-pair {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
  .product-row.reverse .product-copy {
    order: 1;
  }
  .product-row.reverse .product-visual {
    order: 2;
  }
  /* Home hero stacks copy → partner logos → graph */
  .hero-grid--logos {
    row-gap: var(--space-12);
  }
  .hero-grid--logos .hero-copy {
    order: 1;
  }
  .hero-grid--logos .hero-logos {
    order: 2;
  }
  .hero-grid--logos .graph-stage,
  .hero-grid--logos .depth-stage {
    order: 3;
  }
  .pillars-grid {
    grid-template-columns: 1fr;
  }
  /* Stacked single column — center the graph instead of right-aligning it. */
  .graph-stage {
    margin-left: auto;
    margin-right: auto;
  }
  .integ-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  /* Mobile nav: hide desktop layout, show hamburger */
  .nav-hamburger {
    display: block;
  }
  .nav-ctas {
    display: none;
  }
  /* When the drawer is open, drop the nav's backdrop-filter so `position: fixed`
     descendants are sized against the viewport, not the 64px nav bar. */
  .nav.is-open {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
    border-bottom-color: transparent;
  }
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 88px var(--space-8) 200px;
    margin: 0;
    background: var(--color-scrim-98);
    backdrop-filter: saturate(140%) blur(18px);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    /* Closed drawer covers the whole viewport (position: fixed, inset 0). Kill
       pointer events so taps fall through to the page — otherwise hidden submenu
       links (which re-enable visibility below) capture taps and navigate. */
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity var(--transition-base),
      transform var(--transition-base),
      visibility var(--transition-base);
    z-index: 90;
  }
  .nav.is-open .nav-links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  /* Bottom action dock. The drawer scrolls underneath it, so it needs its own
     surface — same colour as .nav-links above, at a lower alpha so the blur
     reads. Full-bleed rather than inset so nothing shows past its edges. */
  .nav.is-open .nav-ctas {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-8)
      calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    background: var(--color-scrim-72);
    backdrop-filter: saturate(140%) blur(18px);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    border-top: 1px solid var(--color-border);
    z-index: 100;
  }
  .nav.is-open .nav-ctas .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
  }
  .nav-links > .nav-item {
    width: 100%;
  }
  .nav-links a,
  .nav-trigger {
    display: flex;
    padding: var(--space-3) var(--space-2);
    font-size: var(--text-lg);
    color: var(--color-text);
  }
  .nav-trigger {
    width: 100%;
    text-align: left;
  }
  .nav-item.has-submenu .nav-caret {
    display: none;
  }
  .nav-submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--space-2) var(--space-4);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-width: 0;
  }
  .nav-submenu a {
    color: var(--color-text-2);
    font-size: var(--text-base);
    padding: var(--space-2) var(--space-2);
  }
  .hero {
    padding: var(--hero-top) 0 60px;
  }
  section {
    padding: var(--space-20) 0;
  }
  .compliance-wrap,
  .cta-wrap {
    padding: var(--space-8) var(--space-6);
  }
  .hero-stats {
    flex-wrap: wrap;
    gap: var(--space-6);
  }
}
@media (max-width: 520px) {
  .wrap {
    padding: 0 var(--space-6);
  }
  .nav-inner {
    padding: var(--space-3) var(--space-6);
  }
  .integ-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
  .hero-ctas .btn {
    font-size: var(--text-sm);
    padding: 11px 18px;
  }
  .graph-alert-card {
    right: 8px;
    width: 180px;
  }
  .graph-score-card {
    left: 8px;
    width: 140px;
  }

  /* Countdown digits: let the three units share the row and shrink the
     numerals so they don't overflow their boxes. */
  .countdown-unit {
    min-width: 0;
    flex: 1;
    padding: 12px 8px;
  }
  .countdown-val {
    font-size: var(--text-4xl);
  }
}

/* ═══════════════════════════════════════════════════════════
   AUTH PAGES (/login, /signup) — ported from SignUpContent.vue
   ═══════════════════════════════════════════════════════════ */
.auth-page .mobile-logo {
  display: none;
}

.signup-grid {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  justify-items: stretch;
  padding: var(--space-8);
  gap: var(--space-8);
}

.signup-logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-10);
  text-align: left;
}
.signup-logo-section .content-container {
  max-width: 540px;
}
.signup-logo-section .logo img {
  height: 2rem;
  width: auto;
}

.welcome-heading {
  font-size: var(--text-4xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin: var(--space-10) 0 0;
}
.tagline {
  font-size: var(--text-lg);
  font-weight: var(--weight-normal);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(
    135deg,
    var(--color-brand-light),
    var(--color-brand)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: var(--space-2) 0 0;
}
.body-text {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text);
  margin-top: var(--space-6);
}

.audience-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.audience-card {
  position: relative;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition:
    border-color var(--transition-base),
    background var(--transition-base);
}
.audience-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.card-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  border-radius: 3px 0 0 3px;
}
.card-oss .card-accent {
  background: linear-gradient(
    135deg,
    var(--color-brand-light),
    var(--color-brand)
  );
}
.card-enterprise .card-accent {
  background: linear-gradient(
    to bottom,
    var(--color-warning),
    var(--color-brand-light)
  );
}
.card-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.card-oss .card-label {
  color: var(--color-brand-light);
}
.card-enterprise .card-label {
  color: var(--color-warning);
}
.card-body {
  font-size: 0.925rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.signup-form-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(
    to bottom right,
    var(--color-brand-subtle),
    var(--color-brand-dim)
  );
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  text-align: center;
}
.signup-form-section .content-container {
  max-width: 500px;
}
.signup-title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-medium);
  color: #fff;
  margin: 0 0 var(--space-8);
}

.auth-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: #fff;
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 12px var(--space-4);
  border-radius: var(--radius-full);
  transition:
    background var(--transition-base),
    transform var(--transition-base);
}
.login-button:hover {
  background: var(--color-text);
  transform: translateY(-1px);
}
.button-icon {
  height: 24px;
  width: auto;
}
.signup-form-section .divider {
  margin-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: var(--space-4);
}

@media (max-width: 768px) {
  .signup-grid {
    grid-template-columns: 1fr;
  }
  .signup-grid .signup-logo-section {
    order: 2;
  }
  .signup-grid .signup-form-section {
    padding-bottom: var(--space-16);
  }
  .signup-logo-section .logo {
    display: none;
  }
  .auth-page .mobile-logo {
    display: block;
    margin: var(--space-4) auto;
  }
  .auth-page .mobile-logo img {
    height: 3rem;
    width: auto;
    margin: 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════
   DEVELOPERS PAGE — /developers/
   ═══════════════════════════════════════════════════════════ */

/* Hero (single-column variant of .hero) */

/* Framing — two-up "code you wrote is solid" / "OSS + AI have risks" */
.dev-framing {
  padding: var(--space-12) 0;
}
.dev-framing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}
.dev-framing-col .lead {
  margin-top: var(--space-4);
  max-width: 460px;
}
@media (max-width: 880px) {
  .dev-framing-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

/* Testimonials */
.dev-testimonials {
  padding: var(--space-20) 0;
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.testimonial-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transition:
    border-color var(--transition-base),
    transform var(--transition-base);
}
.testimonial-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}
.testimonial-mark {
  font-family: var(--font-sans);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--color-brand-light);
  opacity: 0.5;
}
.testimonial-quote {
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  flex: 1;
}
.testimonial-attrib {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.testimonial-name {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.testimonial-title {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
@media (max-width: 960px) {
  .testimonial-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}

/* Comparison table */
.dev-compare {
  padding: var(--space-20) 0;
}
.compare-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-12);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.compare-col {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.compare-col-kusari {
  background: linear-gradient(
    180deg,
    var(--brand-glow-08),
    var(--color-surface)
  );
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
}
.compare-head {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.compare-col-kusari .compare-head {
  color: var(--color-brand-light);
}
.compare-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.compare-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text);
}
.compare-list li::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--color-brand-light);
  box-shadow: 0 0 12px var(--brand-glow-50);
  flex-shrink: 0;
  background-image: linear-gradient(
    135deg,
    var(--color-brand-light),
    var(--color-brand)
  );
}
.compare-list-muted li::before {
  background: var(--color-surface-active);
  background-image: none;
  box-shadow: none;
}
.compare-list-muted .compare-empty {
  color: var(--color-text-muted);
}
.compare-list-muted .compare-empty::before {
  display: none;
}
@media (max-width: 720px) {
  .compare-table {
    grid-template-columns: 1fr;
  }
}

/* Surfaces — two-up GitHub App + CLI */
.dev-surfaces {
  padding: var(--space-20) 0;
}
.surface-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.surface-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transition:
    border-color var(--transition-base),
    transform var(--transition-base);
}
.surface-card:hover {
  border-color: var(--color-brand);
  transform: translateY(-2px);
}
.surface-card-tag {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-brand-light);
  padding: 6px var(--space-3);
  background: var(--brand-glow-12);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-full);
}
.surface-card-desc {
  color: var(--color-text-2);
  line-height: var(--leading-relaxed);
  flex: 1;
}
.surface-card .btn {
  align-self: flex-start;
}
@media (max-width: 720px) {
  .surface-pair {
    grid-template-columns: 1fr;
  }
}

/* Avoid costly rework */
.dev-rework {
  padding: var(--space-20) 0;
}
.dev-rework-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-16);
  align-items: center;
}
.rework-chart {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.rework-chart svg {
  width: 100%;
  height: auto;
}
.rework-caption {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}
@media (max-width: 880px) {
  .dev-rework-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

/* Open source leaders */
.dev-oss {
  padding: var(--space-20) 0;
}
.dev-oss-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.dev-oss-inner .eyebrow {
  justify-content: center;
  display: inline-flex;
}
.dev-oss-inner .lead {
  margin: var(--space-6) auto var(--space-8);
}

/* Resources */
.dev-resources {
  padding: var(--space-20) 0;
}
.section-head-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.resources-all-link {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-brand-light);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.resources-all-link:hover {
  color: var(--color-text);
}
.resources-all-link .arrow {
  transition: transform var(--transition-base);
}
.resources-all-link:hover .arrow {
  transform: translateX(3px);
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.resource-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  color: var(--color-text);
  transition:
    border-color var(--transition-base),
    transform var(--transition-base);
}
button.resource-card {
  width: 100%;
  text-align: left;
  font: inherit;
}
.resource-card:hover {
  border-color: var(--color-brand);
  transform: translateY(-2px);
}
.resource-card-feature {
  background: linear-gradient(
    180deg,
    var(--brand-glow-12),
    var(--color-surface)
  );
  border-color: var(--color-brand);
}
.resource-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}
.resource-card-desc {
  color: var(--color-text-2);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  flex: 1;
}
.resource-card-cta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-brand-light);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.resource-card:hover .resource-card-cta .arrow {
  transform: translateX(3px);
}
.resource-card-cta .arrow {
  transition: transform var(--transition-base);
}
@media (max-width: 960px) {
  .resource-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .resource-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   INSPECTOR PAGE — /inspector/
   ═══════════════════════════════════════════════════════════ */

/* Hero (single-column variant) */

.hero-trust {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
/* Two parallel "legs" of the trust claim — inline when they fit, stacked when they wrap */
.hero-trust-points {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-2);
}
.hero-trust-points strong {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}
.hero-trust-line {
  font-size: var(--text-sm);
  color: var(--color-text);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
/* Inline CTA — "Deploy faster" and DevSecOps guide blocks */
.inspector-guide-cta {
  padding: var(--space-12) 0;
}
.inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  background: linear-gradient(
    135deg,
    var(--brand-glow-12),
    var(--color-surface)
  );
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  box-shadow: var(--shadow-md);
}
.inline-cta-copy {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--color-text);
}
.inline-cta-guide .inline-cta-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inline-cta-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

/* ═══════════════════════════════════════════════════════════
   PLATFORM PAGE — /platform/
   ═══════════════════════════════════════════════════════════ */

/* Hero */

/* Partners strip — extends .adopter-row, centered, more padding */
.platform-partners {
  padding: var(--space-8) 0;
}
.partners-row {
  justify-content: center;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-8) 0;
  margin-top: 0;
  gap: var(--space-6) var(--space-8);
}

/* Use cases — 3-col grid of .pillar cards */
.platform-use-cases {
  padding: var(--space-20) 0 var(--space-16);
}
.use-case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.use-case-grid .pillar {
  padding: var(--space-8);
}
.use-case-grid .pillar .btn {
  align-self: flex-start;
  margin-top: var(--space-2);
}
@media (max-width: 960px) {
  .use-case-grid {
    grid-template-columns: 1fr;
  }
}

/* Case study stat callout */
.case-stat-callout {
  margin-top: var(--space-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  background: linear-gradient(
    135deg,
    var(--brand-glow-12),
    var(--color-surface)
  );
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-10);
  box-shadow: var(--shadow-md);
}
.case-stat-num {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.case-stat-val {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-text);
}
.case-stat-val span {
  color: var(--color-brand-light);
  font-size: 0.6em;
  margin-left: 2px;
}
.case-stat-lbl {
  font-size: var(--text-base);
  color: var(--color-text-2);
  max-width: 320px;
}
/* Text-only variant — the "because line" closing a how-it-works section. Same
   callout shell as the stat version, but the content is one or two sentences
   rather than a number, so it drops the side-by-side flex row. */
.case-stat-callout--note {
  display: block;
}
.case-stat-callout--note .lead {
  color: var(--color-text);
}
.case-stat-callout--note .muted {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}

/* Features section — reuses .pillars-grid, just spacing */
.platform-features {
  padding: var(--space-20) 0;
}
.platform-features .pillars-grid {
  margin-top: var(--space-12);
}
.platform-features .pillar .btn {
  align-self: flex-start;
  margin-top: var(--space-2);
}

/* Scale section — 8 compact mini-cards in 4-col grid */
.platform-scale {
  padding: var(--space-20) 0;
}
.scale-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-12);
}
/* Languages & ecosystems chip band under the surfaces grid (Inspector page) */
.interop-langs {
  margin-top: var(--space-10);
  text-align: center;
}
.interop-langs-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.interop-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.scale-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition-base);
}
.scale-card:hover {
  border-color: var(--color-border-strong);
}
.scale-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}
.scale-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-2);
  line-height: var(--leading-snug);
}
/* Docs/setup link inside a scale-card; bottom-aligned so links line up across a row */
.scale-card-link {
  margin-top: auto;
  padding-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-brand-light);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.scale-card-link .arrow {
  transition: transform var(--transition-base);
}
.scale-card-link:hover .arrow {
  transform: translateX(3px);
}

/* 2-click install — numbered steps (Inspector page) */
.install-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-12);
}
/* Equal padding + transparent border on every step keeps content aligned;
   only the featured (step 1) box shows the border + tint, so its lone CTA
   reads as intentional next to the two link-less steps. */
.install-step {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}
.install-step-feature {
  border-color: var(--color-brand);
  background: linear-gradient(180deg, var(--brand-glow-12), transparent);
}
.install-step-cta {
  margin-top: var(--space-6);
  align-self: flex-start;
}
.install-step-num {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand-light);
  margin-bottom: var(--space-6);
}
.install-step-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.install-step-desc {
  font-size: var(--text-sm);
  color: var(--color-text-2);
  line-height: var(--leading-snug);
}
@media (max-width: 640px) {
  .install-steps {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}
/* 4-up variant — the case study rollout stages. Steps down through 2 columns
   rather than straight to 1: four of these cards side by side are already tight
   at 960px, but two still read fine on a tablet. Both overrides live after the
   base modifier because a media query adds no specificity — declared before it,
   the 4-column rule would win at every width. */
.install-steps--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 960px) {
  .install-steps--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .install-steps--4 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 960px) {
  .scale-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .scale-grid {
    grid-template-columns: 1fr;
  }
}

/* Centered variant: flex-based so a partial final row (e.g. 6 cards = 4 + 2)
   centers instead of leaving a gap at the lower right. Roomier gap than the
   base grid. Breakpoints mirror .scale-grid (4 → 2 → 1). */
.scale-grid--center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}
.scale-grid--center .scale-card {
  flex: 0 1 calc((100% - 3 * var(--space-6)) / 4);
}
@media (max-width: 960px) {
  .scale-grid--center .scale-card {
    flex-basis: calc((100% - var(--space-6)) / 2);
  }
}
@media (max-width: 540px) {
  .scale-grid--center .scale-card {
    flex-basis: 100%;
  }
}

/* CISO CTA wrapper */
.platform-ciso-cta {
  padding: var(--space-12) 0;
}

/* Case study quote section */
.platform-case-quote {
  padding: var(--space-20) 0;
}
.quote-cta {
  margin-top: var(--space-8);
}

/* Vertical step flow — shared by the Trust Fabric stages (Ingest → Graph →
   Enrich → Act) and the ingest → enrich → route pipeline. */
.platform-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: linear-gradient(
    180deg,
    rgba(27, 22, 40, 0.6),
    rgba(19, 16, 30, 0.3)
  );
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.flow-step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
}
.flow-step::after {
  content: "";
  position: absolute;
  left: 33px;
  bottom: -10px;
  width: 1px;
  height: 10px;
  background: linear-gradient(180deg, var(--color-border-strong), transparent);
}
.flow-step:last-child::after {
  display: none;
}
.flow-step-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: var(--brand-glow-12);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: var(--color-brand-light);
}
.flow-step-icon svg {
  width: 16px;
  height: 16px;
}
.flow-step-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-light);
  margin-bottom: 2px;
}
.flow-step-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: 2px;
}
.flow-step-desc {
  font-size: var(--text-sm);
  color: var(--color-text-2);
  line-height: var(--leading-snug);
}
/* Sub-items under a flow step reuse the .pillar-caps chip row (with .chip).
   The row owns the gap up to the description, which carries no bottom margin. */
.flow-step .pillar-caps {
  margin-top: var(--space-3);
}
/* A stage's sub-items run three-up beneath its description, so a step reads as
   one wide band — kicker and summary across the top, then the detail in
   columns — rather than a tall stack. That keeps the outer rhythm of this
   section vertical, which is what separates it from the card grid above it.
   Owns its top gap, since .product-list carries no margin and .flow-step-desc
   no bottom margin. */
.flow-step .product-list--stacked {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
/* Each sub-item is a column in its own right, separated by a rule instead of a
   bullet. The rule does the work the dot was doing, and nine glowing dots in
   one panel was most of what made this section read as busy. Padding matches
   the grid gap, so the rule sits centred in the gutter with equal air either
   side. */
.flow-step .product-list--stacked li {
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-border);
}
.flow-step .product-list--stacked li:first-child {
  padding-left: 0;
  border-left: 0;
}
.flow-step .product-list--stacked li::before {
  display: none;
}

/* Same breakpoint the site's other grids collapse at. The sub-items keep the
   list's own var(--space-4) rhythm when stacked rather than the var(--space-12)
   a page-level grid uses — these are three details inside one step, not two
   sections meeting. */
@media (max-width: 960px) {
  .flow-step .product-list--stacked {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  /* Stacked in one column there is nothing to divide, so the rule goes and the
     bullet comes back to do the job it does everywhere else on the site.
     :first-child has to be named explicitly: its own rule above is (0,3,1) and
     a media query adds no specificity, so a bare `li` selector here loses to it
     and leaves the first item at padding-left:0 with its bullet on top of the
     text. */
  .flow-step .product-list--stacked li,
  .flow-step .product-list--stacked li:first-child {
    padding-left: 22px;
    border-left: 0;
  }
  .flow-step .product-list--stacked li::before {
    display: block;
  }
}

/* ── Banded variant of the flow ──────────────────────────────────────────
   The base .flow-step geometry is tuned for the Inspector sequence, which sits
   in a narrow sidebar column where a tight rhythm reads correctly. Run full
   width, the same numbers come out cramped, so this variant buys back the air:
   roomier steps, a real gap between the kicker, title and summary, and looser
   leading on anything that now runs to a long line.

   It also drops the per-step card. The outer panel, the connector, and the
   whitespace already group each stage, so a box inside a box was chrome that
   earned nothing. Everything here is scoped to the modifier — Inspector keeps
   the compact treatment it was designed with. */
.platform-flow--bands {
  gap: var(--space-4);
}
.platform-flow--bands .flow-step {
  gap: var(--space-6);
  padding: var(--space-6) var(--space-4);
  background: none;
  border-color: transparent;
}
/* With the step cards gone the base connector — a 10px stub hanging off a card
   edge — was left floating as a stray mark. Here it becomes a rail running from
   under one stage icon to the next, which is the thing that still says these
   are ordered rather than three separate blocks.
   33px is the icon's centre line (var(--space-4) of side padding + half its
   34px box); the top clears the icon, and the negative bottom carries the line
   across the gap and the next step's padding to meet the icon below. */
.platform-flow--bands .flow-step::after {
  top: calc(var(--space-6) + 34px + var(--space-2));
  bottom: calc(-1 * (var(--space-4) + var(--space-6)));
  left: calc(var(--space-4) + 17px);
  width: 1px;
  height: auto;
  background: linear-gradient(
    180deg,
    var(--color-border-strong),
    var(--color-border)
  );
}
.platform-flow--bands .flow-step-num {
  margin-bottom: var(--space-2);
}
.platform-flow--bands .flow-step-title {
  margin-bottom: var(--space-2);
}
/* Equal air either side of the rule. The two values match because the title's
   margin-bottom collapses into this margin-top rather than adding to it, so the
   gap above the rule is this value alone, not this plus the title's. */
.platform-flow--bands .product-list--stacked {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
}
.platform-flow--bands .product-list--stacked li {
  line-height: var(--leading-normal);
}
.platform-flow--bands .product-list--stacked li strong {
  margin-bottom: var(--space-2);
}

/* Stacked, the sub-items need the gap back between them, since the column
   rules that were separating them are gone. */
@media (max-width: 960px) {
  .platform-flow--bands .product-list--stacked {
    gap: var(--space-6);
  }
}

/* Closing "because" line under a how-it-works sequence — one per page, stating
   why a finding that reaches a developer is worth their attention. Type comes
   from .lead; this class owns only the placement, the reading width, and the
   rule that separates it from ordinary body copy. */
.because-line {
  max-width: 760px;
  margin-top: var(--space-12);
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-brand);
}

/* Zero-day timeline — without / with Kusari, near the bottom of the page */
.platform-zero-day {
  padding: var(--space-20) 0;
}
.platform-timeline {
  /* Single source of truth for the "Without/With Kusari" colors — used by the
     desktop header cells, the outcome-row text, and the mobile inline labels
     (which inherit these via the timeline container). */
  --timeline-without: var(--color-error);
  --timeline-with: var(--color-success);
  margin-top: var(--space-12);
  background: linear-gradient(
    180deg,
    rgba(27, 22, 40, 0.5),
    rgba(19, 16, 30, 0.25)
  );
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.timeline-head,
.timeline-row {
  display: grid;
  /* Two time columns, one per side: each half is [time | event]. The clocks
     diverge on purpose, so neither side can borrow the other's timings. */
  grid-template-columns: 96px 1fr 96px 1fr;
}
/* The head has one cell per side rather than one per column, so each label
   spans its own time + event pair. */
.timeline-head .t-without {
  grid-column: 1 / 3;
}
.timeline-head .t-with {
  grid-column: 3 / 5;
}
.timeline-head {
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-border);
  background: rgba(12, 10, 18, 0.5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.timeline-head .t-without {
  color: var(--timeline-without);
}
.timeline-head .t-with {
  color: var(--timeline-with);
}
.timeline-row {
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  transition: background var(--transition-base);
}
.timeline-row:last-child {
  border-bottom: none;
}
.timeline-row:hover {
  background: var(--brand-glow-04);
}
.timeline-time {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  color: var(--color-brand-light);
}
.timeline-without {
  color: var(--color-text-muted);
  padding-right: var(--space-6);
  border-right: 1px solid var(--color-border);
}
.timeline-with {
  color: var(--color-text);
}
/* The with-side time is the first cell past the divider, so the gap after that
   border belongs to it. Adjacent-sibling rather than a modifier class: it is
   the only .timeline-time that ever follows .timeline-without. */
.timeline-without + .timeline-time {
  padding-left: var(--space-6);
}
.timeline-with strong {
  color: var(--color-brand-light);
  font-weight: var(--weight-medium);
}
.timeline-row.outcome {
  background: var(--brand-glow-08);
}
.timeline-row.outcome .timeline-without {
  color: var(--timeline-without);
  font-weight: var(--weight-medium);
}
.timeline-row.outcome .timeline-with {
  color: var(--timeline-with);
  font-weight: var(--weight-medium);
}
@media (max-width: 720px) {
  /* The 3-column side-by-side can't fit a phone, so stack each row: the
     time, then the "Without" and "With" states one above the other, each
     given its own inline label since the table header is dropped. */
  .timeline-head {
    display: none;
  }
  .timeline-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-6);
  }
  .timeline-without,
  .timeline-with {
    padding: 0;
    border: none;
  }
  .timeline-without + .timeline-time {
    padding-left: 0;
  }
  .timeline-without::before,
  .timeline-with::before {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  .timeline-without::before {
    content: "Without Kusari";
    color: var(--timeline-without);
  }
  .timeline-with::before {
    content: "With Kusari";
    color: var(--timeline-with);
  }
}

/* ═══════════════════════════════════════════════════════════
   LEGAL PAGE — /terms/, /privacy-policy/
   Reuses .post-body typography; this section is just the wrapper.
   ═══════════════════════════════════════════════════════════ */
.legal-page {
  padding: var(--hero-top) 0 var(--space-24);
}
.legal-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-8);
}
.legal-head {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}
.legal-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.legal-meta,
.page-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Same stamp, used standalone at the foot of a page's content rather than under
   a title. Owns its own gap to the block above it. */
.page-meta {
  margin-top: var(--space-12);
  text-align: center;
}
/* Tighter gap where it annotates the block directly above it rather than
   closing out a page — e.g. the as-of note under a comparison table. */
.page-meta--tight {
  margin-top: var(--space-6);
}

/* Comparison-table marks. Sized in `em` like `.arrow`, so they track the cell's
   font-size, and coloured with the design system's status tokens rather than an
   emoji the OS renders however it likes.

   Shape carries the meaning as much as colour does — a check and a cross are
   distinguishable without seeing hue, which is what makes the table usable with
   red/green colour blindness. Both tokens clear 7:1 against --color-bg, well
   past the 3:1 WCAG asks of a graphical object.

   The SVG itself is aria-hidden; the partials pair each mark with a `.sr-only`
   label, so a screen reader announces "Yes" rather than the emoji's name. */
.mark {
  width: 1.35em;
  height: 1.35em;
  flex: none;
  vertical-align: -0.2em;
}
.mark--yes {
  color: var(--color-success);
}
.mark--no {
  color: var(--color-error);
}
/* Qualified: the caveat text sits in the same cell, and the icon owns the gap
   to it. Third distinct shape in the set, so the three states are separable
   without color. */
.mark--caution {
  color: var(--color-warning);
  margin-right: 0.35em;
}

/* A sub-heading bound to its own data table, for sections carrying more than one
   table under a single section head. The heading owns the gap down to its table;
   the group owns the gap up from the table above it. */
.data-table-group + .data-table-group {
  margin-top: var(--space-12);
}
.data-table-group .h3 {
  margin-bottom: var(--space-4);
  text-align: center;
}
/* Override .post-body's first-paragraph lede styling — legal text reads better evenly weighted */
.legal-body > p:first-of-type {
  font-size: 17px;  /* design-system-exempt: deliberate override of the lede size */
  line-height: var(--leading-relaxed);
  color: var(--color-text-2);
}
@media (max-width: 520px) {
  .legal-page {
    padding: 100px 0 var(--space-16);
  }
  .legal-inner {
    padding: 0 var(--space-6);
  }
}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE — /about/
   ═══════════════════════════════════════════════════════════ */

/* Hero — single column, centered max-width */

/* Origin story & OSS prose blocks */
.about-origin {
  padding: var(--space-20) 0 var(--space-12);
}
.about-oss {
  padding: var(--space-12) 0 var(--space-20);
}
.about-prose {
  max-width: 720px;
  margin-top: var(--space-10);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-2);
}
.about-prose > p {
  margin-bottom: var(--space-6);
}
.about-prose strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}
.about-prose em {
  color: var(--color-text);
  font-style: italic;
}
.about-prose-pull {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: -0.015em;
  line-height: var(--leading-tight);
  padding: var(--space-4) 0 var(--space-4) var(--space-6);
  border-left: 2px solid var(--color-brand-light);
  margin: var(--space-8) 0;
}
.about-prose-ctas {
  margin-top: var(--space-8);
}

/* Founders */
.about-founders {
  padding: var(--space-20) 0;
}
.founder-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.founder-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-10);
  align-items: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  transition: border-color var(--transition-base);
}
.founder-card:hover {
  border-color: var(--color-border-strong);
}
.founder-card-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.founder-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.founder-card-role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-brand-light);
  font-weight: var(--weight-medium);
}
.founder-card-name {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.1;
}
.founder-card-tagline {
  font-size: var(--text-base);
  color: var(--color-text-2);
  font-style: italic;
  margin-bottom: var(--space-2);
}
.founder-card-bio {
  color: var(--color-text-2);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}
.founder-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.founder-card-links a {
  color: var(--color-brand-light);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: color var(--transition-base);
}
.founder-card-links a:hover {
  color: var(--color-text);
}
.founder-card-links .arrow {
  transition: transform var(--transition-base);
}
.founder-card-links a:hover .arrow {
  transform: translateX(2px);
}
@media (max-width: 720px) {
  .founder-card {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-8);
  }
  .founder-card-photo img {
    max-width: 160px;
  }
}

/* Funding callout — reuses .case-stat-callout from platform page; just spacing */
.about-funding {
  padding: var(--space-12) 0 var(--space-20);
}
.about-funding .case-stat-callout {
  margin-top: var(--space-8);
}
/* Logo strip — shared base for rows of third-party logos (investors, partners).
   Layout only; each modifier sets its own sizing/treatment. */
.logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

/* Investors — bare logos (light/transparent art) directly on the dark bg. */
.logo-row--investors {
  margin-top: var(--space-10);
}
.logo-row--investors img {
  height: 48px;
  width: auto;
  max-width: 200px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.logo-row--investors img:hover {
  opacity: 1;
}
@media (max-width: 720px) {
  .logo-row--investors {
    gap: var(--space-8);
  }
  .logo-row--investors img {
    height: 36px;
  }
}

/* Partners — monochrome white logos directly on the dark bg (each source is a
   white/reverse version). Kept compact so the strip doesn't dominate the page. */
.logo-row--partners {
  gap: var(--space-8) var(--space-12);
}
.logo-row--partners img {
  height: 30px;
  width: auto;
  max-width: 150px;
}
@media (max-width: 720px) {
  .logo-row--partners {
    gap: var(--space-6) var(--space-8);
  }
  .logo-row--partners img {
    height: 24px;
    max-width: 120px;
  }
}

/* Partner logos — centered static strip on the home page. */
.partner-logos {
  padding: var(--space-16) 0;
  text-align: center;
}

/* News section — reuses .resource-grid / .resource-card */
.about-news {
  padding: var(--space-12) 0 var(--space-20);
}

/* Whitepaper detail page */
.whitepaper-hero {
  padding: var(--hero-top) 0 var(--space-12);
}
.whitepaper-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-12);
  align-items: start;
}
.whitepaper-byline {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-2);
  margin-top: var(--space-4);
}
.whitepaper-hero .hero-sub {
  margin-top: var(--space-6);
}
.whitepaper-form-wrap {
  background: #fff;
  color: #0c0a12;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: 96px;
}
.whitepaper-form-heading {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: #0c0a12;
  margin: 0;
}
.whitepaper-form-sub {
  font-size: var(--text-sm);
  color: #4a4458;
  margin: var(--space-2) 0 var(--space-6);
}
.whitepaper-body {
  padding: var(--space-12) 0 var(--space-20);
}
.whitepaper-body-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-12);
  align-items: start;
}
/* No cover image: the content is the grid's only child, so drop the 280px
   cover column rather than let auto-placement squeeze the text into it. */
.whitepaper-body-grid--solo {
  grid-template-columns: 1fr;
}
.whitepaper-cover {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: block;
}
.whitepaper-content {
  font-size: var(--text-base);
  color: var(--color-text-2);
  line-height: var(--leading-relaxed);
}
.whitepaper-content h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: var(--space-8) 0 var(--space-4);
}
.whitepaper-content h2:first-child {
  margin-top: 0;
}
.whitepaper-content p {
  margin: 0 0 var(--space-4);
}
.whitepaper-content strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}
.whitepaper-content ul {
  padding-left: var(--space-6);
  margin: 0 0 var(--space-4);
}
.whitepaper-content ul li {
  margin-bottom: var(--space-3);
}

/* Long-form whitepapers carry three heading levels. Without rules of their own
   h3 and h4 fall back to UA defaults, which render them smaller than the h2s
   above them and inherit the muted body color — hierarchy inverted. */
.whitepaper-content h3 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: var(--space-10) 0 var(--space-4);
}
.whitepaper-content h4 {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-2);
  margin: var(--space-6) 0 var(--space-3);
}

/* A hairline above each h3 marks the section boundary. Direct children only:
   the FAQ partial's questions are also h3 but sit inside .faq-item. Any numbers
   belong in the heading text, so they survive being read out of the page. */
.whitepaper-content > h2,
.whitepaper-content > h3 {
  /* .nav is fixed, so a TOC jump would otherwise land the heading behind it.
     Same offset the learning-center jump list uses. */
  scroll-margin-top: 140px;
}
.whitepaper-content > h3 {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
}

/* Sticky contents rail. Sticky works here because the grid sets
   align-items: start, so the aside is shorter than its grid area and has room
   to travel against the content column. */
.whitepaper-aside {
  position: sticky;
  /* Clears the fixed nav — same clearance as .whitepaper-form-wrap in the hero.
     A smaller offset hides the heading and first entries behind the nav bar. */
  top: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.whitepaper-toc-heading {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-2);
  margin: 0 0 var(--space-4);
}
.whitepaper-toc-list,
.whitepaper-toc-sublist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.whitepaper-toc-list > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* The nested level is indented by a rule rather than a bullet, so the eleven
   criteria read as belonging to the section above them. */
.whitepaper-toc-sublist {
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-border);
  gap: var(--space-2);
}
.whitepaper-toc-list a {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-2);
  text-decoration: none;
  transition: color var(--transition-base);
}
.whitepaper-toc-list > li > a {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.whitepaper-toc-sublist a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.whitepaper-toc-list a:hover,
.whitepaper-toc-list a:focus-visible {
  color: var(--color-brand-light);
}
@media (max-width: 960px) {
  .whitepaper-hero-grid {
    grid-template-columns: 1fr;
  }
  .whitepaper-form-wrap {
    position: static;
  }
  .whitepaper-body-grid {
    grid-template-columns: 1fr;
  }
  .whitepaper-cover {
    max-width: 280px;
  }
  .whitepaper-aside {
    position: static;
  }
}

/* Webinar detail page */
.webinar-hero {
  padding: var(--hero-top) 0 var(--space-12);
}
.webinar-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-12);
  align-items: start;
}
.webinar-hero .hero-sub {
  margin-top: var(--space-6);
}
.webinar-people {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-10);
}
.webinar-person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.webinar-person-photo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 1px solid var(--color-border-strong);
}
.webinar-person-role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-light);
}
.webinar-person-name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.webinar-meta {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text-2);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.webinar-meta-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.webinar-meta-value {
  color: var(--color-text);
}
.webinar-form-wrap {
  background: #fff;
  color: #0c0a12;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: 96px;
}
.webinar-form-heading {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: #0c0a12;
  margin: 0;
}
.webinar-form-sub {
  font-size: var(--text-sm);
  color: #4a4458;
  margin: var(--space-2) 0 var(--space-6);
}
.webinar-form-sub--note {
  margin: var(--space-6) 0 0;
}
.webinar-body {
  padding: 0 0 var(--space-20);
}
.webinar-body-wrap {
  max-width: 760px;
}
.webinar-content {
  font-size: var(--text-base);
  color: var(--color-text-2);
  line-height: var(--leading-relaxed);
}
.webinar-content p {
  margin: 0 0 var(--space-4);
}
.webinar-content strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}
.webinar-content ul {
  padding-left: var(--space-6);
  margin: 0 0 var(--space-4);
}
.webinar-content ul li {
  margin-bottom: var(--space-3);
}
/* Full-width band between the hero and the body, at the hero's width rather
   than the body column's. No frame: header art is often a transparent strip,
   and a border would box in empty space. Scales with the column on mobile. */
.webinar-header {
  padding: 0 0 var(--space-12);
}
.webinar-header img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 960px) {
  .webinar-hero-grid {
    grid-template-columns: 1fr;
  }
  .webinar-form-wrap {
    position: static;
  }
}

/* Event detail page */
.event-hero {
  padding: var(--hero-top) 0 var(--space-12);
}
.event-hero .hero-sub {
  margin-top: var(--space-6);
  max-width: 760px;
}
.event-hero-image {
  margin: var(--space-12) 0 0;
}
.event-hero-image img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
.event-body {
  padding: var(--space-8) 0 var(--space-20);
}
.event-body-wrap {
  max-width: 760px;
}
.event-content {
  font-size: var(--text-base);
  color: var(--color-text-2);
  line-height: var(--leading-relaxed);
}
.event-content h2,
.webinar-content h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: var(--space-10) 0 var(--space-4);
}
.event-content h2:first-child,
.webinar-content h2:first-child {
  margin-top: 0;
}
.event-content p {
  margin: 0 0 var(--space-4);
}
.event-content strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}
.event-content a {
  color: var(--color-brand-light);
  text-decoration: underline;
}
.event-content ul {
  padding-left: var(--space-6);
  margin: 0 0 var(--space-6);
}
.event-content ul li {
  margin-bottom: var(--space-2);
}
.event-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 2px 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* Case study detail page */
.casestudy-hero {
  padding: var(--hero-top) 0 var(--space-12);
}
.casestudy-hero .hero-sub {
  margin-top: var(--space-6);
  max-width: 760px;
}
.casestudy-hero-image {
  margin: var(--space-12) 0 0;
}
.casestudy-hero-image img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
/* A designed graphic with text baked into it can't be cropped: at the 1176px
   hero width the 480px cap shows only the middle 73% of a 16:9 frame, which
   cuts the kicker off the top and the logo off the bottom. Set
   `imageFull: true` in the front matter to render the whole frame. Photos keep
   the cap — that's what stops a tall shot dominating the page. */
.casestudy-hero-image--full img {
  max-height: none;
}
.casestudy-body {
  padding: var(--space-12) 0 var(--space-20);
}
.casestudy-body-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-12);
  align-items: start;
}
.casestudy-facts {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.casestudy-fact-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-light);
  margin-bottom: var(--space-2);
}
.casestudy-fact-value {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0;
}
.casestudy-fact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.casestudy-fact-list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-2);
  line-height: var(--leading-snug);
}
.casestudy-fact-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-brand-light);
}
.casestudy-content {
  font-size: var(--text-base);
  color: var(--color-text-2);
  line-height: var(--leading-relaxed);
}
.casestudy-content h2 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: var(--space-10) 0 var(--space-4);
}
.casestudy-content h2:first-child {
  margin-top: 0;
}
.casestudy-content p {
  margin: 0 0 var(--space-4);
}
.casestudy-content strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}
.casestudy-content a {
  color: var(--color-brand-light);
  text-decoration: underline;
}
.casestudy-content ul {
  padding-left: var(--space-6);
  margin: 0 0 var(--space-6);
}
.casestudy-content ul li {
  margin-bottom: var(--space-2);
}
.casestudy-content blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-2) var(--space-6);
  border-left: 3px solid var(--color-brand);
  color: var(--color-text);
  font-style: italic;
}
.casestudy-content blockquote p {
  margin: 0;
}
@media (max-width: 960px) {
  .casestudy-body-grid {
    grid-template-columns: 1fr;
  }
  .casestudy-facts {
    position: static;
  }
}

/* Storylane CTA wrapper. The Storylane embed snippet ships its own inline
   button styles, so we leave those alone and just give the button breathing
   room from surrounding content. Apply to a wrapping element (or the button
   directly for vertical spacing only):
     <div class="storylane"><button class="sl-preview-cta">...</button></div>
*/
.storylane {
  display: flex;
  justify-content: center;
  padding: var(--space-6) 0;
}

/* Resources listing */
.resource-listing {
  padding: var(--hero-top) 0 var(--space-20);
}
.resource-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-1);
}
.resource-tab {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: 0;
  margin-bottom: -1px;
  transition:
    color var(--transition-base),
    background var(--transition-base),
    border-color var(--transition-base);
}
.resource-tab:hover {
  color: var(--color-text);
  background: var(--brand-glow-08);
}
.resource-tab.is-active {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--color-border);
}
.resource-card-image {
  margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  background: var(--color-surface);
}
.resource-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.resource-empty {
  margin-top: var(--space-12);
  padding: var(--space-12);
  text-align: center;
  color: var(--color-text-2);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

/* Open source page */
.oss-hero {
  padding: var(--hero-top) 0 var(--space-12);
}
.oss-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-12);
  align-items: center;
}
.oss-hero-text .hero-sub {
  margin-top: var(--space-6);
}
.oss-hero-art img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
}
@media (max-width: 960px) {
  .oss-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .oss-hero-art {
    order: -1;
  }
  .oss-hero-art img {
    max-height: 280px;
  }
}

.oss-principle {
  padding: var(--space-16) 0;
}
.oss-principle-lede {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-top: var(--space-6);
  max-width: 800px;
}
.oss-principle-body {
  font-size: var(--text-base);
  color: var(--color-text-2);
  margin-top: var(--space-4);
  max-width: 800px;
  line-height: var(--leading-snug);
}
.oss-subhead {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: var(--space-12) 0 var(--space-6);
}

.oss-project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.oss-project {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background: linear-gradient(
    180deg,
    rgba(27, 22, 40, 0.8),
    rgba(19, 16, 30, 0.4)
  );
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition:
    border-color var(--transition-base),
    transform var(--transition-base);
}
.oss-project:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}
.oss-project-logo {
  height: 64px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  align-self: flex-start;
}
.oss-project-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-snug);
}
.oss-project-desc {
  font-size: var(--text-base);
  color: var(--color-text-2);
  line-height: var(--leading-snug);
  margin: 0;
}

.oss-advisory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.oss-advisory {
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.oss-advisory-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-snug);
}
.oss-advisory-desc {
  font-size: var(--text-base);
  color: var(--color-text-2);
  line-height: var(--leading-snug);
  margin: 0;
}

.contributor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.contributor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.contributor-photo {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 1px solid var(--color-border-strong);
}
.contributor-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contributor-role {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand-light);
}
.contributor-name {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
}
.contributor-chip {
  align-self: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 4px 10px;
  color: var(--color-brand-light);
  background: var(--brand-glow-08);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
}
.contributor-blurb {
  font-size: var(--text-base);
  color: var(--color-text-2);
  line-height: var(--leading-snug);
  margin: var(--space-2) 0 0;
}

.oss-tech-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-10) var(--space-8);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.oss-tech-row img {
  max-height: 56px;
  max-width: 240px;
  width: auto;
  height: auto;
}
.oss-project-logo[src*="clearly-defined"] {
  filter: invert(1);
}

@media (max-width: 960px) {
  .oss-project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .oss-advisory-grid {
    grid-template-columns: 1fr;
  }
  .contributor-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .oss-project-grid {
    grid-template-columns: 1fr;
  }
  .oss-tech-row {
    gap: var(--space-8);
    padding: var(--space-6);
  }
  .oss-tech-row img {
    max-height: 40px;
    max-width: 180px;
  }
}

/* Contact page */
.contact-form-section {
  padding: var(--space-12) 0;
}
.contact-form-section .wrap {
  max-width: 720px;
}
.contact-form-wrap {
  background: #fff;
  color: #0c0a12;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}
.contact-info {
  padding: 0 0 var(--space-20);
}
.contact-info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
}
.contact-info-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.contact-info-heading {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
}
.contact-info-link {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-brand);
  text-decoration: none;
}
.contact-info-link:hover {
  text-decoration: underline;
}
@media (max-width: 720px) {
  .contact-info-row {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ═══════════════════════════════════════════════════════════
   ROI CALCULATOR PAGE — /roi-calculator/
   Deliberate exception to the design system's 65ch body-text cap:
   text on this page fills the wrap, by request. Don't add max-width
   to text containers here.
   ═══════════════════════════════════════════════════════════ */
.roi-hero {
  padding: var(--hero-top) 0 var(--space-12);
}
.roi-hero .hero-inner {
  max-width: none;
}
.roi-hero .hero-sub {
  margin-top: var(--space-6);
  max-width: none;
}

.roi-section {
  padding: 0 0 var(--space-20);
}

/* Inputs panel — featured "stand out" card with brand-glow tint */
.roi-inputs {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 20%, var(--brand-glow-18), transparent 60%),
    radial-gradient(
      ellipse at 80% 80%,
      rgba(114, 40, 184, 0.15),
      transparent 60%
    ),
    linear-gradient(180deg, var(--color-surface-active), var(--color-surface-2));
  border: 1px solid var(--color-border-strong);
  border-left: 6px solid var(--color-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  margin-bottom: var(--space-10);
  box-shadow: var(--shadow-lg);
}
.roi-inputs > * {
  position: relative;
}
.roi-input-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-10);
}
.roi-field-wide {
  grid-column: 1 / -1;
}
.roi-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.roi-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  line-height: var(--leading-snug);
}
.roi-field select,
.roi-field input[type="text"],
.roi-field input[type="number"] {
  width: 100%;
  padding: 12px var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}
/* Selects rendered as native controls showed tiny text and an arrow jammed
   against the right edge. Reset the native chrome, draw our own chevron with
   room to breathe, and keep the 16px font (also avoids iOS focus-zoom). */
.roi-field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Restate the size next to appearance:none — WebKit/iOS can fall back to a
     tiny native control font when it isn't co-located with the reset. */
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23877CAA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
}
/* The open option list is a separate native popup — with appearance:none it
   no longer inherits the select's font, so its rows render tiny. Size the
   options directly (and theme them to match the dark inputs). */
.roi-field select option {
  font-size: var(--text-base);
  background: var(--color-surface);
  color: var(--color-text);
}
.roi-field select:focus,
.roi-field input:focus {
  outline: none;
  border-color: var(--color-brand-light);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Slider */
.roi-slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.roi-slider-row input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  outline: none;
  border: 1px solid var(--color-border);
}
.roi-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--color-brand-light);
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--brand-glow-25);
}
.roi-slider-row input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--color-brand-light);
  border-radius: var(--radius-full);
  cursor: pointer;
  border: none;
}
.roi-slider-value {
  min-width: 130px;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-brand-light);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Checkbox */
.roi-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
  margin-top: var(--space-8);
  font-size: var(--text-base);
}
.roi-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-brand);
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}
.roi-check-sub {
  display: block;
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

/* Results */
.roi-results {
  margin-top: var(--space-12);
}
.roi-results-title {
  margin-top: var(--space-4);
  margin-bottom: var(--space-8);
}

/* Headline number card */
.roi-headline-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--color-surface-2),
    var(--color-surface)
  );
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-10);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-md);
}
.roi-headline-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--brand-glow-25), transparent 70%);
  pointer-events: none;
}
.roi-headline-number {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: var(--weight-bold);
  font-style: italic;
  color: var(--color-text);
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-3);
}
.roi-headline-caption {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.roi-headline-body {
  font-size: var(--text-sm);
  color: var(--color-text-2);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-3);
}
.roi-source {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Conditional insights */
.roi-insight {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.roi-insight-hidden {
  display: none;
}
.roi-insight-body {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-normal);
}
.roi-insight-body strong {
  color: var(--color-brand-light);
  font-weight: var(--weight-semibold);
}

/* 2x2 grid */
.roi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.roi-out-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}
.roi-out-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}
.roi-out-number {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}
.roi-out-caption {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.roi-out-body {
  font-size: var(--text-sm);
  color: var(--color-text-2);
  line-height: var(--leading-normal);
}
.roi-out-body strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}
.roi-out-math {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-brand-light);
  background: var(--brand-glow-08);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px var(--space-3);
}

/* Three-year composite */
.roi-composite {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 20%, var(--brand-glow-18), transparent 60%),
    radial-gradient(
      ellipse at 80% 80%,
      rgba(114, 40, 184, 0.18),
      transparent 60%
    ),
    linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid var(--color-border-strong);
  border-left: 5px solid var(--color-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  margin-bottom: var(--space-10);
  box-shadow: var(--shadow-md);
}
.roi-composite-number {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 5.5vw, 3.5rem);
  font-weight: var(--weight-bold);
  font-style: italic;
  color: var(--color-text);
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-3);
}
.roi-composite-caption {
  font-size: var(--text-lg);
  color: var(--color-text-2);
  line-height: var(--leading-snug);
}
.roi-composite-caption strong {
  color: var(--color-brand-light);
  font-weight: var(--weight-semibold);
  font-style: italic;
}

/* Sources / methodology strip */
.roi-sources {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.roi-sources p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}
.roi-sources p:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .roi-input-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .roi-grid {
    grid-template-columns: 1fr;
  }
  /* The inputs panel's desktop padding eats most of a phone's width and
     makes the fields feel oversized — pull it in to match the result cards. */
  .roi-inputs {
    padding: var(--space-8);
  }
  .roi-headline-card,
  .roi-composite {
    padding: var(--space-8);
  }
  .roi-check {
    margin-top: 0;
  }
}
@media (max-width: 520px) {
  .roi-inputs {
    padding: var(--space-6);
    border-left-width: 4px;
  }
  /* The slider needs room next to its value readout on a narrow screen. */
  .roi-slider-value {
    min-width: 0;
  }
}

/* ─────────────────── Integrations hero ─────────────────── */
/* Two columns on desktop: copy on the left, the hub graphic alongside it.
   Collapses to a single column (graphic below the copy) on narrow viewports. */
.integrations-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-16);
  align-items: center;
}
@media (max-width: 900px) {
  .integrations-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

.integrations-hub {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.integrations-hub svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* dotted connectors with a flowing dash to read as a live link */
.ihub-line {
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
  stroke-dasharray: 1.5 9;
  stroke-linecap: round;
  opacity: 0.75;
  animation: ihub-dash 1.6s linear infinite;
}
@keyframes ihub-dash {
  to {
    stroke-dashoffset: -21;
  }
}

/* data packets travelling between the hub and the tools */
.ihub-packet {
  fill: var(--color-brand-light);
  filter: drop-shadow(0 0 5px var(--brand-glow-50));
  animation: ihub-flow 2.6s ease-in-out infinite;
}
@keyframes ihub-flow {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  86% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty));
    opacity: 0;
  }
}

/* spoke nodes */
.ihub-node circle {
  fill: var(--color-surface-2);
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
  transition: stroke var(--transition-base);
}
.ihub-glyph {
  fill: var(--color-text-2);
  transition: fill var(--transition-base);
}
.ihub-node:hover circle {
  stroke: var(--color-brand-light);
}
.ihub-node:hover .ihub-glyph {
  fill: var(--color-text);
}

/* Kusari hub */
.ihub-core circle {
  fill: var(--color-surface);
  stroke: var(--color-brand);
  stroke-width: 2;
  filter: drop-shadow(0 0 22px var(--brand-glow-35));
}
.ihub-mark {
  fill: var(--color-brand-light);
}

@media (prefers-reduced-motion: reduce) {
  .ihub-line {
    animation: none;
  }
  .ihub-packet {
    animation: none;
    opacity: 0.9;
  }
}

/* ═══════════════════════════════════════════════════════════
   MESSAGE-TEST LANDING PAGE (/start)
   Reuses the homepage spine; only the pieces below are new.
   ═══════════════════════════════════════════════════════════ */

/* Under-CTA microcopy in the hero */
.hero-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  animation: fadeUp 0.9s 0.4s both;
}

/* Three-up variant of the pillars grid, for the value props */
.pillars-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px) {
  .pillars-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* FAQ accordion — no existing component covers this */
/* Two-column FAQ: heading in the left rail, accordion in the right. The heading
   sticks while the questions scroll past it. */
.faq-layout {
  display: grid;
  /* Right column lands at ~640px — the max-width .faq-answer already uses. */
  grid-template-columns: 1fr 1.35fr;
  gap: var(--space-16);
  align-items: start;
}
.faq-layout .section-head {
  position: sticky;
  /* Clears the fixed nav. */
  top: var(--space-24);
  /* The grid gap owns the space to the accordion, on both axes. */
  margin-bottom: 0;
}
/* Stacks to one column, heading above the accordion, no sticky. Lives here
   rather than in the shared RESPONSIVE block because that block sits earlier in
   the file — a media query adds no specificity, so an override there would lose
   to the base rule above. */
@media (max-width: 960px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
  .faq-layout .section-head {
    position: static;
  }
}
.faq {
  border-top: 1px solid var(--color-border);
}
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  transition: color var(--transition-base);
}
/* The question is a real h3 so it lands in the document outline (and in answer
   engines' extraction) rather than being plain summary text. Type comes from the
   summary above, so the heading carries none of its own. */
.faq-item summary h3 {
  font: inherit;
  color: inherit;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  color: var(--color-brand-light);
}
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-brand-light);
  transition: transform var(--transition-base);
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-answer {
  padding: 0 0 var(--space-6);
  max-width: 640px;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-2);
}

/* ═══════════════════════════════════════════════════════════
   MYTHOS BRIEFING LANDING
   (/resources/whitepapers/mythos-executive-threat-briefing)
   Page-scoped spacing only — all type/color/components are reused.
   ═══════════════════════════════════════════════════════════ */
/* Briefing cover beside the hero text. */
.mythos-cover-frame {
  display: flex;
  justify-content: center;
}
.mythos-cover {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}
/* Closing thesis line that follows a points/pillars/list block. Owns the
   gap above it so neither neighbour splits the spacing. */
.mythos-punch {
  margin-top: var(--space-10);
  max-width: 760px;
}
.mythos-inside {
  margin-bottom: 0;
}
.mythos-inside-cta {
  margin-top: var(--space-10);
}
.mythos-reviewed {
  margin-top: var(--space-16);
}

/* Naked footer (footer-naked.njk) — centered brand, single Privacy link.
   Reuses <footer>, .logo, .footer-tagline, and .footer-bottom. */
.footer-naked-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}
.footer-naked .footer-tagline {
  max-width: none;
}
.footer-bottom--center {
  justify-content: center;
  gap: var(--space-6);
}
.footer-bottom a {
  color: var(--color-text-2);
  transition: color var(--transition-base);
}
.footer-bottom a:hover {
  color: var(--color-text);
}

/* Centered section intro — same .section-head, centered in its column. */
.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head--center .lead {
  margin-left: auto;
  margin-right: auto;
}

/* Standalone CTA centered below a section. */
.hero-ctas--center {
  justify-content: center;
  margin-top: var(--space-12);
}

/* Standalone (non-sidebar) HubSpot form card — reuses .demo-form-wrap visuals,
   drops the sticky sidebar behavior and centers it in the column. */
.trial-form-wrap {
  position: static;
  max-width: 640px;
  margin: 0 auto;
}

/* HubSpot injects the meetings iframe at runtime carrying its own
   `min-width: 312px`, which is wider than the content box on a 320px screen,
   so the calendar's right edge was being clipped by the body's overflow-x.
   `!important` is load-order self-defence, not specificity padding: their
   styles arrive with the embed script, after main.css, so an equal-specificity
   rule of ours loses on order no matter how it is written. */
.meetings-iframe-container iframe {
  min-width: 0 !important;
  max-width: 100% !important;
}