@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Zen+Dots&display=swap");

:root {
  --ink-900: #0B0C15;
  --ink-800: #10111A;
  --ink-700: #1C1D25;
  --ink-600: #31323B;
  --ink-500: #4F505E;
  --ink-400: #595A68;
  --ink-300: #90909B;
  --ink-200: #D7D7E0;
  --ink-100: #E5E5E5;
  --ink-75: #F0F0F1;
  --ink-50: #F5F5F7;
  --ink-25: #F9F9FB;
  --paper: #FFFFFF;
  /* Site canvas — #F9F9FB; alternate bands use --bg-alt (#F5F5F7) */
  --bg: var(--ink-75);
  --bg-alt: var(--ink-50);
  --bg-inverse: var(--ink-900);
  --fg: var(--ink-900);
  --fg-muted: var(--ink-400);
  --fg-subtle: var(--ink-300);
  --fg-inverse: var(--paper);
  --border: var(--ink-100);
  --border-strong: var(--ink-900);
  --border-muted: rgba(144, 144, 155, 0.3);
  --status-ok: #12B886;
  --font-display: "Zen Dots", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Space Grotesk", "Montserrat", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --container-max: 1280px;
  --content-w: 960px;
  --gutter: 20px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* Typography scale — even sizes, one step down from prior defaults */
  --text-body: 16px;
  --leading-body: 1.6;
  --text-lead: 18px;
  --leading-lead: 1.6;
  --text-secondary: 14px;
  --leading-secondary: 1.6;
  --text-small: 12px;
  --text-label: 12px;
  --tracking-label: 1.5px;

  /* Legacy aliases — page-specific CSS uses these */
  --serif: var(--font-body);
  --sans: var(--font-body);
  --mono: var(--font-mono);
  --text: var(--fg);
  --text-dim: var(--fg-muted);
  --text-faint: var(--fg-subtle);
  --surface: var(--bg);
  --surface2: var(--bg-alt);
  --border2: var(--ink-200);
  --red: #c9243a;
  --red-dark: #7a0a1a;
  --orange: #c45e1a;
  --yellow: #a68a00;
  --green: #0a7a5a;
  --blue: #1a7aaa;
  --purple: #1a7aaa;
  /* --purple: #7050c0; */
  --risk-none: var(--green);
  --risk-low: var(--yellow);
  --risk-medium: var(--orange);
  --risk-high: var(--red);
  --risk-critical: var(--red-dark);
  /* Quadrant palette — forked from risk palette so the two can evolve independently. */
  --q-red: #c9243a;
  --q-green: #0a7a5a;
  --q-orange: #c45e1a;
  --q-blue: #1a7aaa;
}

html {
  scroll-padding-top: 80px;
  scroll-behavior: smooth;
  background: var(--bg)
}

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

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility
}

/* ============ HEADER ============ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border-muted)
}

.site-nav-inner {
  position: relative;
  margin: 0;
  padding: 0 var(--gutter) 0 32px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 20px
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--fg);
  flex-shrink: 0
}

.brand-mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.02em;
  line-height: 1
}

.nav-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition: color var(--dur-base)
}

.nav-link:hover {
  color: var(--fg-muted)
}

.nav-link.current {
  font-weight: 600
}

.nav-spacer {
  flex: 1
}

.nav-cta {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-base)
}

.nav-cta:hover {
  color: var(--fg-muted)
}

.btn-pdf,
.scroll-top-btn {
  background: var(--ink-900);
  color: var(--paper);
  border: 1px solid var(--ink-900);
  cursor: pointer
}

.btn-pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  font: 500 14px/1.2 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out)
}

a.btn-pdf {
  color: var(--paper)
}

.btn-pdf:hover,
.scroll-top-btn.is-visible:hover {
  opacity: 0.8
}

.btn-pdf:active {
  transform: translateY(1px)
}

.burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--fg);
  flex-shrink: 0
}

.burger svg {
  display: block;
  width: 22px;
  height: 22px
}

.burger .icon-close {
  display: none
}

.site-nav.open .burger .icon-bars {
  display: none
}

.site-nav.open .burger .icon-close {
  display: block
}

.mobile-menu {
  display: none
}

.nav-desktop-hint {
  display: none
}

@media(max-width:1100px) {
  .hide-mobile {
    display: none
  }

  .site-nav-inner .nav-link:not(.nav-link-mobile),
  .site-nav-inner .nav-cta,
  .site-nav-inner .btn-pdf,
  .nav-spacer {
    display: none
  }

  .site-nav-inner .nav-link-mobile {
    display: inline-flex;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
    max-width: 42vw;
    font-size: var(--text-small);
    overflow: hidden;
    text-overflow: ellipsis
  }

  .site-nav-inner {
    height: 56px;
    gap: 12px;
    padding: 0 16px
  }

  .brand-mark {
    font-size: 18px
  }

  .nav-desktop-hint {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 400;
    color: var(--fg-muted);
    white-space: nowrap;
    flex: 1;
    text-align: right
  }

  .burger {
    display: inline-flex
  }

  .mobile-menu {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border-muted);
    padding: 8px 16px 16px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1)
  }

  .site-nav.open .mobile-menu {
    display: flex
  }

  .mobile-menu .nav-link,
  .mobile-menu .nav-cta {
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    text-align: right;
    border-bottom: 1px solid var(--border-muted)
  }

  .mobile-menu .nav-link:last-child,
  .mobile-menu .nav-cta:last-child,
  .mobile-menu .btn-pdf {
    border-bottom: none
  }

  .mobile-menu .btn-pdf {
    display: inline-flex;
    margin-top: 8px;
    align-self: flex-end
  }

  .mobile-menu .nav-spacer {
    display: none
  }
}

[data-theme="dark"] .mobile-menu {
  background: var(--bg)
}

/* Back to top */
.scroll-top-btn {
  position: fixed;
  right: clamp(16px, 2vw, 24px);
  bottom: clamp(16px, 2vw, 24px);
  z-index: 90;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base), transform var(--dur-base) var(--ease-out), background var(--dur-base), border-color var(--dur-base), color var(--dur-base)
}

.scroll-top-btn svg {
  width: 20px;
  height: 20px;
  display: block
}

.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.scroll-top-btn.is-visible:active {
  transform: translateY(1px)
}

/* ============ FOOTER ============ */
.site-footer {
  background: var(--ink-900);
  color: var(--fg-inverse);
  padding: 64px 0 32px
}

.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 48px
}

.footer-brand .brand-mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--paper)
}

.footer-tag {
  color: var(--ink-300);
  max-width: 36ch;
  margin-top: 16px;
  font-size: var(--text-secondary)
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 16px
}

.footer-col-h {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-300);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.footer-col a {
  color: var(--paper);
  text-decoration: none;
  font-size: var(--text-secondary)
}

.footer-col a:hover {
  opacity: 0.7
}

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

  .footer-cols {
    grid-template-columns: 1fr
  }
}

/* ============ REPORT LAYOUT ============ */
.report-wrap {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  max-width: none;
  margin: 0;
  padding: 0 0 80px 0
}

.report-wrap .report-main {
  max-width: var(--content-w);
  padding-left: 40px;
  padding-right: 40px;
  border-left: 1px solid var(--border)
}

@media(max-width:1100px) {
  .report-wrap {
    grid-template-columns: 1fr;
    padding: 0 var(--gutter) 80px
  }

  .report-wrap .report-main {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    border-left: none
  }
}

.report-toc {
  position: sticky;
  top: 70px;
  align-self: start;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: clamp(12px, 2.5vh, 24px) 24px;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.025em;
  background: var(--bg);
  z-index: 1
}

.report-toc::-webkit-scrollbar {
  width: 4px
}

.report-toc::-webkit-scrollbar-thumb {
  background: var(--ink-200)
}

@media(max-width:1100px) {
  .report-toc {
    display: none
  }
}

.report-toc h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(12px, 1.9vh, 16px);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 clamp(8px, 1.6vh, 16px);
  margin-left: -2px;
  padding: clamp(2px, 0.55vh, 5px) 12px clamp(2px, 0.55vh, 5px) 10px;
  border-left: 2px solid transparent;
  line-height: 1.5;
  transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base)
}

.report-toc h3::before {
  content: "[ "
}

.report-toc h3::after {
  content: " ]"
}

.report-toc h3:has(.report-toc-top.active) {
  font-weight: 600;
  border-left-color: var(--ink-900);
  background: var(--ink-100)
}

.report-toc h3 .report-toc-top {
  color: inherit;
  text-decoration: none;
  display: inline;
  font-weight: inherit;
  transition: color var(--dur-base)
}

.report-toc h3 .report-toc-top:hover {
  color: var(--fg-muted)
}

.report-toc h3:has(.report-toc-top:hover) {
  border-left-color: var(--ink-300)
}

.report-toc ol {
  list-style: none
}

.report-toc>ol>li {
  margin-bottom: clamp(0px, 0.3vh, 2px)
}

.report-toc>ol>li>a {
  display: block;
  padding: clamp(2px, 0.55vh, 5px) 12px clamp(2px, 0.55vh, 5px) 10px;
  color: var(--fg);
  font-weight: 500;
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  font-size: clamp(12px, 1.9vh, 16px);
  line-height: 1.3;
  transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base)
}

.report-toc>ol>li>a:hover {
  color: var(--fg-muted);
  border-left-color: var(--ink-300)
}

.report-toc>ol>li>a.active-parent {
  border-left-color: var(--ink-200)
}

.report-toc>ol>li>a.active {
  font-weight: 600;
  border-left-color: var(--ink-900);
  background: var(--ink-100)
}

.report-toc>ol>li>ol {
  list-style: none;
  margin: clamp(1px, 0.3vh, 2px) 0 clamp(4px, 0.9vh, 8px) 16px
}

.report-toc>ol>li>ol>li>a {
  display: block;
  padding: clamp(1px, 0.45vh, 3px) 12px clamp(1px, 0.45vh, 3px) 10px;
  color: var(--fg-muted);
  text-decoration: none;
  font-weight: 400;
  font-size: clamp(11px, 1.7vh, 14px);
  line-height: 1.35;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base)
}

.report-toc>ol>li>ol>li>a:hover {
  color: var(--fg);
  border-left-color: var(--ink-300)
}

.report-toc>ol>li>ol>li>a.active {
  font-weight: 600;
  border-left-color: var(--ink-900);
  color: var(--fg);
  background: var(--ink-100)
}

.report-main {
  min-width: 0;
  padding-top: 0
}

/* ============ COVER ============ */
.report-cover {
  padding: 66px 0 48px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px
}

@media(max-width:1100px) {
  .report-cover {
    padding: 40px 0 36px
  }
}

.cover-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 16px
}

.cover-subtitle {
  font-family: var(--font-body);
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--fg-muted);
  margin-bottom: 32px
}

.cover-meta {
  font-family: var(--font-body);
  font-size: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap
}

.cover-meta span {
  color: var(--fg-muted)
}

.cover-meta span.accent {
  color: var(--fg);
  font-weight: 600
}

.cover-abstract {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  font-weight: 400;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start
}

.cover-abstract p {
  margin-bottom: 14px
}

.cover-abstract-text> :first-child {
  margin-top: 0
}

.cover-abstract-figure {
  margin: 0
}

.cover-cta {
  margin: 24px 0 0;
  text-align: center
}

.cover-abstract-rest {
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  font-weight: 400
}

.cover-abstract-rest p {
  margin-bottom: 14px
}

@media (max-width: 820px) {
  .cover-abstract {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .cover-abstract-rest {
    font-size: var(--text-body)
  }
}

/* Report page only: main column full width; prose sections capped; wide sections span column */
.report-wrap--wide-main .report-main {
  max-width: none
}

.report-wrap--wide-main .report-main>.report-cover {
  max-width: var(--content-w)
}

.report-wrap--wide-main .report-body {
  max-width: none
}

.report-wrap--wide-main .report-body>section {
  max-width: var(--content-w)
}

.report-wrap--wide-main .report-body>section.wide-section {
  max-width: none
}

/* ============ REPORT TYPOGRAPHY ============ */
.report-body {
  max-width: 100%
}

.report-body>section {
  padding: 40px 0 8px
}

.report-body>section+section {
  border-top: 1px solid var(--border);
  margin-top: 24px
}

.report-body h1.rh {
  font-family: var(--font-body);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--fg);
  margin: 0 0 24px;
  display: flex;
  align-items: baseline;
  gap: 20px
}

.report-body h1.rh .sn {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.7em;
  color: var(--purple);
  letter-spacing: 0;
  min-width: 0.9em
}

.report-body h2.rh {
  font-family: var(--font-body);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--fg);
  margin: 44px 0 16px;
  display: flex;
  align-items: baseline;
  gap: 14px
}

.report-body h2.rh .sn {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.75em;
  color: var(--purple)
}

.report-body h3.rh {
  font-family: var(--font-body);
  font-size: var(--text-secondary);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--purple);
  margin: 16px 0 6px
}

.report-body h3.sh {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin: 28px 0 8px;
  letter-spacing: -0.01em
}

/* === Anchor links on report headings (anchor.js) === */
.report-body h1.rh,
.report-body h2.rh,
.report-body h3.rh {
  position: relative
}

.anchor-link {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 0.55em;
  font-weight: 400;
  color: var(--fg-muted);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--dur-fast, 0.15s) var(--ease-out, ease), color var(--dur-fast, 0.15s) var(--ease-out, ease);
  vertical-align: middle;
  letter-spacing: 0;
  text-transform: none
}

.report-body h1.rh:hover .anchor-link,
.report-body h2.rh:hover .anchor-link,
.report-body h3.rh:hover .anchor-link,
.anchor-link:focus {
  opacity: 0.6
}

.anchor-link:hover {
  color: var(--purple);
  opacity: 1
}

.anchor-link.copied {
  color: var(--purple);
  opacity: 1
}

.anchor-link.copied::after {
  content: " Copied";
  margin-left: 4px;
  font-size: 0.9em;
  color: var(--purple);
  letter-spacing: 0.5px
}

.report-body h4 {
  font-family: var(--font-body);
  font-size: var(--text-secondary);
  font-weight: 700;
  color: var(--fg);
  margin: 20px 0 6px
}

.report-body p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg);
  margin: 0 0 16px
}

.report-body p.lede {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  font-weight: 400;
  font-style: italic;
  color: var(--fg-muted);
  margin-bottom: 24px
}

.report-body p.small {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--fg-muted)
}

.about-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 20px;
  margin: 16px 0
}

.about-meta dt {
  color: var(--text-faint);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: 11px;
  padding-top: 4px;
  white-space: nowrap
}

.about-meta dd {
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body)
}

@media (max-width: 600px) {
  .about-meta {
    grid-template-columns: 1fr
  }

  .about-meta dt {
    padding-top: 8px
  }
}

.contributor-roster {
  list-style: none;
  margin: 8px 0 0;
  padding: 0
}

.contributor-roster li {
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body)
}

.contributor-roster strong {
  font-weight: 600;
  color: var(--fg)
}

.contributor-affil {
  color: var(--fg-muted)
}

.contributor-affil::before {
  content: "— "
}

.report-body ul,
.report-body ol {
  margin: 8px 0 20px 0;
  padding-left: 0
}

.report-body ul {
  list-style: none
}

.report-body ul>li {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  padding: 8px 0 8px 24px;
  position: relative;
  color: var(--fg)
}

.report-body ul>li::before {
  content: "\00B7";
  position: absolute;
  left: 8px;
  color: var(--purple);
  font-weight: 700;
  font-size: 1.6em;
  top: -2px
}

.report-body ol {
  list-style: decimal;
  padding-left: 28px
}

.report-body ol>li {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  padding: 5px 0;
  color: var(--fg)
}

.report-body li strong {
  font-weight: 700;
  color: var(--fg)
}

.report-body li em {
  font-style: italic;
  color: var(--fg)
}

.report-body a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-200);
  transition: border-color var(--dur-base)
}

.report-body a:hover {
  border-bottom-color: var(--ink-900)
}

.report-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 1px 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg)
}

.report-body strong {
  color: var(--fg);
  font-weight: 700
}

/* Tables */
.report-body table {
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-secondary);
  margin: 20px 0;
  max-width: 100%;
  line-height: var(--leading-secondary);
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden
}

.report-body table th,
.report-body table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top
}

.report-body table th {
  background: var(--bg);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 0.08em;
  font-size: 11px;
  text-transform: uppercase;
  font-family: var(--font-mono)
}

.report-body table tr:last-child td {
  border-bottom: none
}

.report-body .num-col th,
.report-body .num-col td {
  text-align: right;
  font-family: var(--font-mono)
}

.report-body .tbl-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin: 20px 0;
  -webkit-overflow-scrolling: touch
}

.report-body .tbl-wrap table {
  margin: 0
}

.risk-none {
  color: var(--risk-none)
}

.risk-low {
  color: var(--risk-low)
}

.risk-medium {
  color: var(--risk-medium)
}

.risk-high {
  color: var(--risk-high)
}

.risk-critical {
  color: var(--risk-critical)
}

.num--faint,
.mv--faint {
  color: var(--text-faint)
}

tr.row-empty {
  opacity: 0.4
}

/* Callout / note */
.note {
  margin: 18px 0;
  padding: 16px 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink-900);
  font-family: var(--font-body);
  font-size: var(--text-secondary);
  line-height: var(--leading-secondary);
  color: var(--fg-muted)
}

.note strong {
  color: var(--fg)
}

.note p {
  max-width: none;
  margin-bottom: 10px;
  font-size: inherit
}

.note p:last-child {
  margin-bottom: 0
}

/* Key Findings callout */
.findings {
  margin: 20px 0 28px;
  padding: 22px 28px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--purple)
}

.findings-title {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 14px
}

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

.findings li {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  padding: 6px 0 6px 22px;
  position: relative;
  color: var(--fg)
}

.findings li+li {
  border-top: 1px dashed var(--border);
  margin-top: 2px;
  padding-top: 10px
}

.findings li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--purple);
  font-weight: 700
}

.findings li+li::before {
  top: 11px
}

.findings li strong {
  color: var(--fg);
  font-weight: 700
}

.findings li em {
  color: var(--purple);
  font-style: normal;
  font-weight: 600
}

.findings li code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 1px 5px;
  background: var(--bg);
  border: 1px solid var(--border)
}

/* Quadrant definition cards (report §2, methodology) */
.qdef-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 8px 0 24px;
  font-size: var(--text-body);
  line-height: var(--leading-body)
}

.qdef-card {
  padding: 12px 16px;
  border: 1px solid var(--border);
  background: var(--bg)
}

.qdef-card.qdef-tint--fortified {
  background: rgba(10, 122, 90, 0.08)
}

.qdef-card.qdef-tint--tight {
  background: rgba(26, 122, 170, 0.08)
}

.qdef-card.qdef-tint--exposed {
  background: rgba(201, 36, 58, 0.08)
}

.qdef-card.qdef-tint--humble {
  background: rgba(196, 94, 26, 0.08)
}

.qdef-card .qname {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--text-body);
  margin-bottom: 4px;
  color: var(--text)
}

.qdef-card .qdesc {
  color: var(--text-dim)
}

.note.warn {
  border-left-color: var(--orange)
}

.report-body pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink-900);
  padding: 14px 18px;
  margin: 16px 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-secondary);
  line-height: var(--leading-secondary);
  color: var(--fg)
}

.report-body pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: inherit
}

.report-body table td.num,
.report-body table th.num {
  text-align: right;
  font-family: var(--font-mono);
  white-space: nowrap
}

.report-body table td.code,
.report-body table td:first-child.ref {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  white-space: nowrap;
  font-weight: 600
}

.report-body table td.quadrant-label {
  white-space: nowrap
}

.report-body table td.fw-label {
  white-space: nowrap;
  font-weight: 600
}

.report-body table.taxonomy-overview th:first-child,
.report-body table.taxonomy-overview tbody td:first-child {
  text-align: right
}

.report-body table.taxonomy-overview th:nth-child(2),
.report-body table.taxonomy-overview th:nth-child(3),
.report-body table.taxonomy-overview td.col-class,
.report-body table.taxonomy-overview td.col-scope {
  text-align: left
}

.report-body table.taxonomy-overview td.col-class {
  white-space: nowrap
}

.notfound {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(80px, 15vh, 160px) var(--gutter) 80px;
  text-align: center
}

.notfound-code {
  font-family: var(--font-display);
  font-size: clamp(64px, 15vw, 120px);
  font-weight: 400;
  line-height: 1;
  color: var(--fg);
  margin-bottom: 16px;
  letter-spacing: -2px
}

.notfound-nav {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px
}

/* Prose bullet lists (§4.1 style — tight purple-dot bullets, no box) */
.report-prose-list,
.phased-program ul {
  padding-left: 0;
  list-style: none;
  margin: 6px 0 14px;
}

.report-prose-list>li,
.phased-program ul>li {
  margin: 4px 0;
}

.phased-program {
  margin: 0;
}

.phased-program .insight-lede {
  font-style: italic;
  font-weight: 600;
  margin: 0 0 10px;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg);
}

.cls-widget-slot {
  padding-top: 10px;
  padding-bottom: 20px;
}

/* Class-detail one-liner callout (§3 — after widget slot) */
.class-tagline {
  font-style: italic;
  font-weight: 600;
  color: var(--fg);
  border-left: 3px solid var(--purple);
  padding: 10px 0 10px 20px;
  margin: 14px 0 18px;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* Class-detail subsections (scope, risk profile — not takeaways) */
.class-detail .class-subsection {
  margin: 18px 0;
}

.class-detail .class-subsection p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg);
  margin: 0 0 8px;
}

.class-detail {
  padding: 40px 0 24px;
  border-top: 1px dashed var(--border)
}

.class-detail:first-child {
  border-top: none;
  padding-top: 20px
}

.class-detail .class-mental {
  font-size: var(--text-body);
  font-style: italic;
  line-height: var(--leading-body);
  color: var(--text-dim);
  margin: 0 0 8px
}

.class-detail .class-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 18px;
  letter-spacing: 0.3px
}

.class-detail .class-meta b {
  color: var(--text);
  font-weight: 600
}

.class-detail .class-desc {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text);
  margin-bottom: 18px
}

.class-detail.empty-class {
  background: rgba(112, 80, 192, 0.025);
  padding: 28px 20px
}

.class-empty-note {
  padding: 14px 18px;
  border: 1px dashed rgba(112, 80, 192, 0.25);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--text-dim);
  font-style: italic;
  background: rgba(112, 80, 192, 0.02);
  margin-bottom: 8px
}

.cls-member-row {
  cursor: pointer
}

.cls-tbl-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 8px
}

.cls-tbl-body tbody tr.row-hidden {
  display: none
}

#agent-security .class-detail .cls-members-slot {
  display: none
}

.cls-rank-wrap {
  margin: 0 0 28px;
  overflow-x: auto
}

.cls-rank-tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--border)
}

.cls-rank-tbl th,
.cls-rank-tbl td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: center
}

.cls-rank-tbl th:first-child,
.cls-rank-tbl td.cls-name {
  text-align: left
}

.cls-rank-tbl th {
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  white-space: nowrap
}

.cls-rank-tbl th:hover {
  color: var(--text)
}

.cls-rank-tbl th.sorted {
  color: var(--text)
}

.cls-rank-tbl td.num {
  text-align: center;
  font-weight: 600
}

.cls-rank-tbl td.cls-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px
}

.cls-rank-tbl tr:last-child td {
  border-bottom: none
}

.cls-rank-tbl tr:hover {
  background: var(--surface)
}

.cls-rank-tbl th:first-child,
.cls-rank-tbl td:first-child {
  position: sticky;
  left: 0;
  background: var(--bg);
  z-index: 1;
  box-shadow: 1px 0 0 0 var(--border)
}

.cls-rank-tbl th:first-child {
  background: var(--surface);
  z-index: 2
}

.cls-rank-tbl tr:hover td:first-child {
  background: var(--surface)
}

.cls-name a,
.cls-name a:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--text-faint)
}

.cls-name a:hover {
  border-bottom-color: var(--text-dim);
  color: var(--text)
}

.cls-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px
}

.cls-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 12px
}

.cls-metric {
  padding: 6px 4px;
  background: var(--surface);
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08)
}

.cls-metric .mv {
  display: block;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.2
}

.cls-metric .ml {
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 11px
}

.cls-legend {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
  margin-top: 4px
}

.citation-text {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  background: var(--bg);
  padding: 12px;
  border: 1px solid var(--border);
  display: block;
  margin-bottom: 6px
}

.btn-copy {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg-muted);
  cursor: pointer
}

.btn-copy:hover {
  color: var(--fg);
  border-color: var(--ink-300)
}

/* Class definition blocks */
.cls-block {
  padding: 20px 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  margin: 14px 0 22px
}

.cls-block h3 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 10px
}

.cls-block h3 .num {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75em;
  color: var(--fg-subtle)
}

.cls-block .scope {
  font-family: var(--font-body);
  font-size: var(--text-secondary);
  color: var(--fg-muted);
  line-height: var(--leading-secondary);
  margin-bottom: 10px
}

.cls-block ul {
  margin: 8px 0 0 0
}

/* Figure */
figure.report-figure {
  margin: 28px 0 8px;
  max-width: 100%;
  padding: 20px 0
}

figure.report-figure .figbody {
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden
}

/* ============ MODALS ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(11, 12, 21, 0.45);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px
}

.modal-overlay.open {
  display: flex
}

.modal-dialog {
  width: 100%;
  max-width: 520px;
  padding: 32px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-body);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18)
}

.modal-dialog h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--fg);
  margin: 0
}

.modal-dialog .modal-lede {
  font-size: var(--text-secondary);
  color: var(--fg-muted);
  line-height: var(--leading-secondary);
  margin-bottom: 8px
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  font-size: 18px;
  cursor: pointer;
  line-height: 1
}

.modal-close:hover {
  background: var(--bg-alt)
}

.modal-dialog--form {
  max-width: 560px
}

.hs-form-frame {
  min-height: 180px;
  margin-top: 4px
}

@media (max-width: 600px) {
  .cls-grid {
    grid-template-columns: 1fr
  }

  .qdef-grid {
    grid-template-columns: 1fr
  }
}

@media print {

  .site-nav,
  .site-footer,
  .report-toc,
  .report-toolbar,
  .quadrant-toolbar-vt {
    display: none
  }

  .report-wrap {
    max-width: 100%;
    padding: 0
  }

  .report-wrap .report-main {
    max-width: 100%;
    padding: 0
  }

  body {
    background: #fff
  }
}

/* ============ SMALL SCREENS ============ */
@media(max-width:480px) {
  :root {
    --gutter: 16px
  }

  .cover-title {
    margin-bottom: 12px
  }

  .cover-subtitle {
    margin-bottom: 24px
  }

  .cover-meta {
    gap: 12px 16px;
    padding: 12px 0
  }

  .cover-abstract {
    font-size: var(--text-body)
  }

  .report-body p.lede {
    font-size: var(--text-body)
  }

  .findings {
    padding: 16px 18px
  }

  .note {
    padding: 14px 16px
  }

  .cls-block {
    padding: 16px 14px
  }

  .report-body h1.rh {
    gap: 12px
  }

  .footer-inner {
    padding: 0 var(--gutter)
  }

  .site-footer {
    padding: 48px 0 28px
  }

  .modal-overlay {
    padding: 12px
  }

  .modal-dialog {
    padding: 24px 20px
  }

  .report-body>section {
    padding: 28px 0 8px
  }
}

/* ============ DARK THEME ============ */
[data-theme="dark"] {
  --ink-900: #E0E0E8;
  --ink-800: #C8C8D2;
  --ink-700: #A8A8B5;
  --ink-600: #3A3B48;
  --ink-500: #6A6A7A;
  --ink-400: #8A8A98;
  --ink-300: #5A5A6A;
  --ink-200: #2E2F3A;
  --ink-100: #222330;
  --ink-75: #1C1D28;
  --ink-50: #171822;
  --ink-25: #131420;
  --paper: #0E0F17;
  --red: #e8556a;
  --orange: #e08540;
  --yellow: #c8a830;
  --green: #14c896;
  --blue: #3498d8;
  --purple: #8a70e0;
}

[data-theme="dark"] .site-nav {
  background: var(--bg)
}

[data-theme="dark"] .site-footer {
  background: #0A0B13
}

[data-theme="dark"] .site-footer .brand-mark {
  color: #E0E0E8
}

[data-theme="dark"] .footer-col a {
  color: #C8C8D2
}

[data-theme="dark"] .footer-tag,
[data-theme="dark"] .footer-col-h {
  color: #5A5A6A
}

[data-theme="dark"] .btn-pdf,
[data-theme="dark"] .scroll-top-btn {
  background: #E0E0E8;
  color: #0E0F17;
  border-color: #E0E0E8
}

[data-theme="dark"] .q-tag {
  background: #E0E0E8;
  color: #0E0F17;
  border-color: #E0E0E8
}

[data-theme="dark"] .cls-tag {
  background: #E0E0E8;
  color: #0E0F17;
  border-color: #E0E0E8
}

/* Dark-mode: restore colored q-tag modifier backgrounds (override generic dark q-tag rule above) */
[data-theme="dark"] .q-tag--exposed {
  background: rgba(201, 36, 58, 0.18);
  color: var(--q-red);
  border-color: rgba(201, 36, 58, 0.45)
}

[data-theme="dark"] .q-tag--fortified {
  background: rgba(10, 122, 90, 0.18);
  color: var(--q-green);
  border-color: rgba(10, 122, 90, 0.45)
}

[data-theme="dark"] .q-tag--tight {
  background: rgba(26, 122, 170, 0.18);
  color: var(--q-blue);
  border-color: rgba(26, 122, 170, 0.45)
}

[data-theme="dark"] .q-tag--humble {
  background: rgba(196, 94, 26, 0.18);
  color: var(--q-orange);
  border-color: rgba(196, 94, 26, 0.45)
}

[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.6)
}

[data-theme="dark"] .bar-track,
[data-theme="dark"] .sbar-track,
[data-theme="dark"] .sb,
[data-theme="dark"] .lb-score-bar {
  background: rgba(255, 255, 255, 0.15)
}

[data-theme="dark"] .hm tr:hover,
[data-theme="dark"] .lb-row:hover {
  background: rgba(255, 255, 255, 0.04)
}

[data-theme="dark"] .sgrid {
  background: rgba(255, 255, 255, 0.03)
}

[data-theme="dark"] .mb.cmp,
[data-theme="dark"] .mb.def {
  border-color: rgba(255, 255, 255, 0.1)
}

[data-theme="dark"] .mb.cmp.md,
[data-theme="dark"] .mb.def.m {
  background: rgba(255, 255, 255, 0.04)
}

[data-theme="dark"] .sv0 {
  color: rgba(255, 255, 255, 0.15)
}

[data-theme="dark"] .links-list li {
  border-bottom-color: rgba(255, 255, 255, 0.06)
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--dur-base), border-color var(--dur-base)
}

.theme-toggle:hover {
  color: var(--fg);
  border-color: var(--fg)
}

.theme-toggle svg {
  width: 18px;
  height: 18px
}

.theme-toggle .icon-sun {
  display: none
}

.theme-toggle .icon-moon {
  display: block
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: block
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: none
}

.random-agent-btn,
.quadrant-explorer-btn,
a.quadrant-explorer-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--dur-base), border-color var(--dur-base);
  text-decoration: none;
  box-sizing: border-box
}

.random-agent-btn:hover,
.quadrant-explorer-btn:hover {
  color: var(--fg);
  border-color: var(--fg)
}

.random-agent-btn svg,
.quadrant-explorer-btn svg {
  width: 18px;
  height: 18px
}

.nav-icon-actions,
.random-icon-picker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  pointer-events: none
}

.nav-icon-actions>* {
  pointer-events: auto
}

/* ═══════════════════════════════════════════════════════════════════
   Agent Risk Card — Profile components
   Used by all agent profile / risk card pages.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Agent header ── */
.agent-head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: start
}

.agent-head-meta {
  grid-column: 1/3
}

.agent-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: block
}

.agent-head-body {
  flex: 1;
  min-width: 0
}

.agent-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px
}

.agent-site {
  font-family: var(--font-body);
  font-size: var(--text-secondary);
  color: var(--fg-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px
}

.agent-site:hover {
  color: var(--fg)
}

.agent-site .arr {
  font-size: 11px;
  opacity: 0.7
}

.q-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-block;
  padding: 4px 10px;
  background: var(--ink-900);
  border: 1px solid var(--ink-900);
  color: var(--paper)
}

.cls-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-block;
  padding: 4px 10px;
  background: var(--ink-900);
  border: 1px solid var(--ink-900);
  color: var(--paper);
  white-space: nowrap
}

/* Cover chips (website + assessed date) — bordered pills aligned with cls-tag/q-tag */
.agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-small);
  font-weight: 500;
  padding: 2px 8px;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  text-decoration: none;
  line-height: var(--leading-body);
  transition: color 0.15s, border-color 0.15s
}

.agent-chip:hover {
  color: var(--fg);
  border-color: var(--fg-muted)
}

.date-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-small);
  font-weight: 500;
  padding: 2px 8px;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  line-height: var(--leading-body)
}

/* 2×2 chip matrix in agent-meta — left-aligned like the title above */
.agent-head-meta {
  align-items: flex-start
}

.agent-meta--grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: flex-start;
  width: 100%;
  margin: 0
}

.agent-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%
}

.agent-meta .cls-tag,
.agent-meta .q-tag {
  padding: 2px 8px;
  font-size: var(--text-small);
  line-height: var(--leading-body)
}

/* ── Summary grid (5 headline metrics) ── */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 28px 0 0
}

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

.summary-cell {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 18px 14px;
  text-align: center
}

.summary-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 8px
}

.summary-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--fg)
}

.summary-unit {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--fg-subtle);
  margin-left: 2px
}

.summary-verdict {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px
}

/* ── Score bars (used inside surf-grid) — inline: title | bar | number ── */
.score-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0
}

.score-bar label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: contents
}

.score-bar label span:first-child {
  width: 150px;
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 700
}

.score-bar label span:last-child {
  font-weight: 700;
  min-width: 52px;
  text-align: right;
  white-space: nowrap;
  order: 2
}

.bar-track {
  flex: 0 1 150px;
  height: 6px;
  background: var(--ink-200);
  overflow: hidden;
  order: 1
}

.bar-fill {
  height: 100%
}

/* ── Defense component grid ── */
.def-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 28px
}

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

.def-card {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 18px 12px;
  text-align: center;
  cursor: help
}

.def-card .dl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 6px;
  line-height: 1.3
}

.def-card .dv {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  line-height: 1
}

.def-card .dc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
  margin-top: 4px
}

/* ── Attack surface grid ── */
.surf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  margin-bottom: 28px;
  padding: 18px;
  background: var(--bg);
  border: 1px solid var(--border)
}

@media(max-width:640px) {
  .surf-grid {
    grid-template-columns: 1fr
  }
}

.surf-grid-title {
  grid-column: 1/-1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border)
}

.si {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0
}

.sl {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  width: 130px;
  flex-shrink: 0
}

.sb {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.07);
  overflow: hidden
}

.sf {
  height: 100%
}

.sv {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: 700;
  min-width: 44px;
  text-align: right;
  white-space: nowrap
}

/* ── Assessment table (detailed comparison) ── */
.assess-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: var(--text-secondary);
  border: 1px solid var(--border)
}

.assess-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 12px;
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  background: var(--bg)
}

.assess-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: var(--leading-secondary);
  color: var(--fg-muted)
}

.assess-table td:first-child {
  font-weight: 600;
  color: var(--fg);
  width: 26%;
  white-space: nowrap
}

.assess-table td:nth-child(2) {
  width: 74%
}

@media(max-width:640px) {

  .assess-table,
  .assess-table thead,
  .assess-table tbody,
  .assess-table tr,
  .assess-table td,
  .assess-table th {
    display: block
  }

  .assess-table thead {
    display: none
  }

  .assess-table td {
    padding: 8px 0;
    border: none
  }

  .assess-table tr {
    border-bottom: 1px solid var(--border);
    padding: 14px 0
  }

  .assess-table td:first-child {
    margin-bottom: 4px
  }

  .assess-table td:first-child {
    white-space: normal
  }
}

/* ── Key risk callouts ── */
.key-risk {
  padding: 18px 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  margin-bottom: 22px
}

.key-risk-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 6px;
  font-weight: 700
}

.key-risk-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg);
  font-weight: 400
}

/* ── Lethal Trifecta ── */

/* ── Risk table (per-dimension scoring rows in airq-scores, attack-surface, blast-radius, defense-controls) ── */
.risk-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: var(--text-secondary);
  border: 1px solid var(--border)
}

.risk-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 10px 12px;
  border-bottom: 2px solid var(--border);
  background: var(--bg)
}

.risk-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: var(--leading-secondary);
  color: var(--fg-muted);
  white-space: nowrap
}

.risk-table td:first-child {
  font-weight: 600;
  color: var(--fg)
}

.risk-table td:last-child {
  white-space: normal
}

.risk-table tr:last-child td {
  border-bottom: none
}

/* ── Hardening recommendations ── */
.hardening-group {
  margin-bottom: 22px
}

.hardening-cat {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border)
}

.report-body .rec-list {
  list-style: none;
  padding-left: 0;
  margin: 6px 0 14px
}

.report-body .rec-list>li {
  counter-increment: rec;
  position: relative;
  padding: 4px 0 4px 24px;
  margin-bottom: 6px;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg)
}

.report-body .rec-list>li::before {
  content: counter(rec);
  position: absolute;
  left: 0;
  top: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  color: var(--purple);
  letter-spacing: 1px;
  text-align: left;
  width: 20px
}

/* ── Source list (bullet style for citations) ── */
.src-list {
  list-style: none;
  padding: 0;
  margin: 0
}

.src-list li {
  position: relative;
  padding: 6px 0 6px 20px;
  margin-bottom: 4px;
  font-size: var(--text-secondary);
  line-height: var(--leading-secondary);
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border)
}

.src-list li:last-child {
  border-bottom: none
}

.src-list li::before {
  content: "\2022";
  position: absolute;
  left: 4px;
  color: var(--fg-subtle);
  font-weight: 700
}

/* Print */
@media print {

  .site-nav,
  .site-footer,
  .report-toc,
  .report-toolbar,
  #framework-banner,
  .theme-toggle,
  .random-agent-btn,
  .quadrant-explorer-btn,
  .btn-pdf,
  .nav-cta,
  .modal-overlay,
  .scroll-top-btn {
    display: none !important
  }

  .report-wrap {
    grid-template-columns: 1fr;
    max-width: 100%;
    padding: 0
  }

  .report-wrap .report-main {
    max-width: 100%;
    padding: 0;
    border-left: none
  }

  body {
    background: #fff;
    font-size: 11pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
  }

  /* Prevent content blocks from splitting across page boundaries */
  .key-risk,
  .trifecta-callout,
  .cover-callout,
  .hardening-group,
  .hardening-group li,
  .summary-cell,
  tr {
    break-inside: avoid
  }

  h1.rh,
  h2.rh,
  h3.rh {
    break-after: avoid
  }

  /* Suppress browser-injected URL text after every link */
  a[href]::after {
    content: none !important
  }

  [data-theme="dark"] {
    --ink-900: #0B0C15;
    --ink-800: #10111A;
    --ink-700: #1C1D25;
    --ink-600: #31323B;
    --ink-500: #4F505E;
    --ink-400: #595A68;
    --ink-300: #90909B;
    --ink-200: #D7D7E0;
    --ink-100: #E5E5E5;
    --ink-75: #F0F0F1;
    --ink-50: #F5F5F7;
    --ink-25: #F9F9FB;
    --paper: #FFFFFF;
    --red: #c9243a;
    --orange: #c45e1a;
    --yellow: #a68a00;
    --green: #0a7a5a;
    --blue: #1a7aaa;
    --purple: #7050c0
  }
}

/* ══════════════════════════════════════════════════════════════════
   Profile page — components added / refined in the 2025-05 revision
   ══════════════════════════════════════════════════════════════════ */

/* ── Framework info banner ── */
#framework-banner {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--fg-muted);
  color: var(--fg);
  padding: 14px 16px;
  margin: 20px 0 16px;
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--leading-secondary);
  display: flex;
  align-items: flex-start;
  gap: 14px
}

#framework-banner>div {
  flex: 1
}

#framework-banner ul {
  margin: 6px 0 0;
  padding-left: 20px;
  line-height: var(--leading-secondary)
}

#framework-banner .banner-tagline {
  margin: 6px 0 0
}

#framework-banner button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg-muted);
  font-size: 20px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  opacity: 0.7
}

/* ── Quadrant chart wrapper (right half of agent-head grid) ── */
.quadrant-wrap {
  grid-column: 3/5;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 10px
}

#airq-quadrant-chart {
  max-width: 360px;
  height: auto;
  display: block;
  margin: 0 auto
}

/* ── Cover callout blocks (About The Agent / About the AI Risk Quadrant) ── */
.cover-callouts {
  border-top: 1px solid var(--border);
  margin-top: 28px;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px
}

.cover-callout {
  border-left: 3px solid var(--q-blue);
  padding: 16px 20px;
  background: var(--bg)
}

.cover-callout-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--q-blue);
  margin-bottom: 10px
}

.cover-callout p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-secondary);
  line-height: var(--leading-secondary);
  color: var(--fg-muted)
}

/* ── Small annotative paragraph after metric grids ── */
.metric-note {
  color: var(--fg-muted);
  font-size: var(--text-secondary);
  margin: 4px 0 0
}

/* ── Risk level utility classes (color + bar fill) ──
   Used on text elements and .bar-fill so the template only needs a class name,
   not an inline color value. */
.risk-critical {
  color: var(--risk-critical)
}

.risk-high {
  color: var(--risk-high)
}

.risk-medium {
  color: var(--risk-medium)
}

.risk-low {
  color: var(--risk-low)
}

.risk-none {
  color: var(--risk-none)
}

.bar-fill.risk-critical {
  background: var(--risk-critical)
}

.bar-fill.risk-high {
  background: var(--risk-high)
}

.bar-fill.risk-medium {
  background: var(--risk-medium)
}

.bar-fill.risk-low {
  background: var(--risk-low)
}

.bar-fill.risk-none {
  background: var(--risk-none)
}

/* ── Quadrant tag modifier classes ──
   Template emits e.g. class="q-tag q-tag--exposed" instead of inline rgb values. */
.q-tag--exposed {
  background: rgba(201, 36, 58, 0.10);
  color: var(--q-red);
  border-color: rgba(201, 36, 58, 0.35)
}

.q-tag--fortified {
  background: rgba(10, 122, 90, 0.10);
  color: var(--q-green);
  border-color: rgba(10, 122, 90, 0.35)
}

.q-tag--tight {
  background: rgba(26, 122, 170, 0.10);
  color: var(--q-blue);
  border-color: rgba(26, 122, 170, 0.35)
}

.q-tag--humble {
  background: rgba(196, 94, 26, 0.10);
  color: var(--q-orange);
  border-color: rgba(196, 94, 26, 0.35)
}

/* ── Lethal Trifecta callouts ──
   .trifecta-partial controls all partial-state cards site-wide.
   Change display value here to show or hide partial trifectas across every profile. */
.trifecta-callout {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 16px 20px;
  margin-top: 28px
}

.trifecta-complete {
  border-left: 3px solid var(--red)
}

.trifecta-partial {
  margin-top: 14px;
  display: block
}

.trifecta-2of3 {
  border-left: 3px solid var(--orange)
}

.trifecta-1of3 {
  border-left: 3px solid var(--fg-muted)
}

.trifecta-callout-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px
}

.trifecta-complete .trifecta-callout-label {
  color: var(--red)
}

.trifecta-2of3 .trifecta-callout-label {
  color: var(--orange)
}

.trifecta-1of3 .trifecta-callout-label {
  color: var(--fg-muted)
}

.trifecta-callout p {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg)
}

/* Trifecta list — all rules scoped to .report-body to beat:
     .report-body ul { list-style:none }  (0,1,1)
     .report-body ul > li::before { ... } (0,1,2)
   These rules sit at (0,2,0) and (0,2,2) respectively. */
.report-body .trifecta-list {
  list-style: none;
  padding-left: 0;
  margin: 0
}

.report-body .trifecta-list>li {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg);
  padding: 4px 0 4px 24px;
  position: relative
}

.report-body .trifecta-list>li::before {
  content: "\00B7";
  display: block;
  position: absolute;
  left: 8px;
  top: -2px;
  color: var(--purple);
  font-weight: 700;
  font-size: 1.6em
}

/* References section keeps numbered .rec-list; src-list uses site bullet */
.report-body .src-list>li::before {
  content: "\00B7";
  left: 8px;
  top: -2px;
  color: var(--purple);
  font-size: 1.6em;
  font-weight: 700
}

/* ── Hardening Tips: green callout blocks ──
   Scoped to #hardening-tips so the references section stays in base style. */
#hardening-tips .hardening-group {
  background: rgba(10, 122, 90, 0.04);
  border: 1px solid var(--border);
  border-left: 3px solid var(--q-green);
  padding: 16px 20px;
  margin-bottom: 12px
}

#hardening-tips .hardening-group .hardening-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--q-green);
  margin: 0 0 10px;
  display: block
}

#hardening-tips .hardening-group .hardening-cat::before {
  display: none
}

#hardening-tips .hardening-group .rec-list {
  list-style: none;
  padding-left: 0
}

#hardening-tips .hardening-group .rec-list>li {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg);
  font-weight: 400;
  padding: 4px 0 4px 24px;
  position: relative;
  counter-increment: none;
  margin-bottom: 6px
}

#hardening-tips .hardening-group .rec-list>li::before {
  content: "\00B7";
  display: block;
  position: absolute;
  left: 8px;
  top: -2px;
  color: var(--purple);
  font-weight: 700;
  font-size: 1.6em
}

/* Hardening §6 — outer h2 (real section heading; normal case, tight to intro paragraph) */
.hardening-cat.rh {
  text-transform: none;
  letter-spacing: 0.01em;
  margin: 32px 0 4px;
  border-bottom: none
}

/* Hardening §6 — inner non-heading label, mirrors .key-risk-label / .trifecta-callout-label pattern */
.hardening-group-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--q-green);
  font-weight: 700;
  margin-bottom: 8px
}

/* Hardening §6 — agent-specific context paragraph between h2 and group */
.hardening-intro {
  margin: 4px 0 12px;
  color: var(--fg-muted);
  font-size: var(--text-secondary);
  line-height: var(--leading-secondary)
}

/* Hardening §6 — effort badge on each tip (uniform teal across all four types; severity not encoded) */
.tip-effort {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap
}

.tip-effort--configuration,
.tip-effort--engineering,
.tip-effort--policy {
  background: rgba(0, 155, 160, 0.12);
  color: #0a9ba0
}

/* §2 metric scale/direction legend (between surf-grid and table) */
.metric-legend {
  font-size: var(--text-small);
  color: var(--fg-muted);
  margin: 0 0 20px;
  line-height: var(--leading-secondary)
}

/* §3 context paragraphs bracketing the Lethal Trifecta callout block */
.trifecta-bridge {
  margin: 32px 0 16px;
  line-height: var(--leading-body)
}

/* ============ LANDING PAGE (about.html) ============ */

.lp-section {
  width: 100%;
  padding: 80px var(--gutter)
}

.lp-inner {
  max-width: var(--content-w);
  margin: 0 auto
}

.lp-inner--wide {
  max-width: var(--container-max)
}

/* ---- Hero ---- */
.lp-hero {
  background: var(--bg);
  color: var(--fg);
  padding: 100px var(--gutter) 88px;
  text-align: center
}

.lp-hero .lp-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #8a70e0;
  margin-bottom: 20px
}

.lp-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5.5vw, 64px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 20px
}

.lp-hero .lp-subtitle {
  font-family: var(--font-body);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
  line-height: 1.55;
  max-width: 720px;
  margin: 0 auto 32px;
  color: var(--fg-muted)
}

.lp-hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 36px
}

.lp-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px
}

.lp-hero-stat-num {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400;
  line-height: 1;
  color: #FFFFFF
}

.lp-hero-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55)
}

.lp-hero-axes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px
}

.lp-hero-axis {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 14px;
  background: var(--ink-900);
  color: var(--paper);
  border: 1px solid var(--ink-900)
}

.lp-hero-axis-sep {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--fg);
  opacity: 0.45
}

.lp-hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap
}

.lp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font: 600 15px/1.2 var(--font-body);
  text-decoration: none;
  color: var(--paper);
  background: var(--ink-900);
  border: 1px solid var(--ink-900);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out)
}

.lp-btn-primary:hover {
  opacity: 0.85
}

.lp-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font: 500 15px/1.2 var(--font-body);
  text-decoration: none;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--dur-base), color var(--dur-base)
}

.lp-btn-ghost:hover {
  border-color: var(--purple);
  color: var(--purple)
}

/* ---- Section nav (sticky anchor bar) ---- */
.lp-section-nav {
  position: sticky;
  top: 60px;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--gutter);
  display: flex;
  justify-content: center;
  gap: 32px
}

[data-theme="dark"] .lp-section-nav {
  background: var(--bg)
}

@media(max-width:1100px) {
  .lp-section-nav {
    top: 56px
  }
}

.lp-section-nav a {
  font-family: var(--font-body);
  font-size: var(--text-secondary);
  font-weight: 500;
  text-decoration: none;
  color: var(--fg-muted);
  padding: 14px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-base), border-color var(--dur-base)
}

.lp-section-nav a:hover,
.lp-section-nav a.active {
  color: var(--fg);
  border-bottom-color: var(--fg)
}

/* ---- Shared heading styles ---- */
.lp-section-heading {
  font-family: var(--font-body);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.8px;
  margin-bottom: 16px;
  color: var(--fg);
  text-align: center
}

.lp-section-lead {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--fg-muted);
  margin: 0 auto 36px;
  max-width: 720px;
  text-align: center
}

.lp-caption {
  font-size: var(--text-secondary);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  margin-bottom: 28px;
  max-width: 720px
}

/* ---- Shift section (before/now) ---- */
.lp-shift {
  background: var(--bg)
}

.lp-shift-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px
}

.lp-shift-col {
  padding: 28px 28px 24px;
  border: 1px solid var(--border);
  background: var(--bg-alt)
}

.lp-shift-col--after {
  border-color: var(--purple);
  background: rgba(112, 80, 192, 0.04)
}

[data-theme="dark"] .lp-shift-col--after {
  background: rgba(112, 80, 192, 0.08)
}

.lp-shift-col-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 10px
}

.lp-shift-col--after .lp-shift-col-label {
  color: var(--purple)
}

.lp-shift-col p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  margin: 0
}

.lp-shift-summary {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  margin: 0
}

/* ---- Challenge section (2x2 cards) ---- */
.lp-challenge {
  background: var(--bg-alt)
}

.lp-cards-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.lp-card {
  padding: 28px;
  background: var(--bg);
  border: 1px solid var(--border)
}

.lp-card-icon {
  color: var(--purple);
  margin-bottom: 14px
}

.lp-card h3 {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 8px
}

.lp-card p {
  font-size: var(--text-secondary);
  line-height: var(--leading-secondary);
  color: var(--fg-muted);
  margin: 0
}

/* ---- Pillar label ---- */
.lp-pillar-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 8px
}

/* ---- Framework section (Pillar 1) ---- */
.lp-framework {
  background: var(--bg)
}

.lp-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg)
}

/* Three axis summary cards */
.lp-axes-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.lp-axis-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  text-decoration: none;
  transition: border-color var(--dur-base), box-shadow var(--dur-base)
}

.lp-axis-card:hover {
  border-color: var(--fg-subtle);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06)
}

[data-theme="dark"] .lp-axis-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25)
}

.lp-axis-card .lp-axis-badge {
  margin-bottom: 14px
}

.lp-axis-card h3 {
  font-family: var(--font-body);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 6px
}

.lp-axis-card p {
  font-size: var(--text-secondary);
  line-height: var(--leading-secondary);
  color: var(--fg-muted);
  margin: 0 0 12px;
  flex: 1
}

.lp-axis-card-detail {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-subtle)
}

.lp-axis-card--red {
  border-top: 3px solid var(--q-red)
}

.lp-axis-card--orange {
  border-top: 3px solid var(--q-orange)
}

.lp-axis-card--green {
  border-top: 3px solid var(--q-green)
}

/* AIRQ Score formula callout */
.lp-formula-callout {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  margin-bottom: 32px
}

.lp-formula-callout-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-subtle)
}

.lp-formula-callout .lp-mono {
  font-size: 16px
}

/* Quadrant mini-grid */
.lp-quadrant-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 16px 0 16px
}

.lp-q {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px
}

.lp-q strong {
  font-family: var(--font-body);
  font-size: var(--text-secondary);
  font-weight: 600
}

.lp-q span {
  font-size: var(--text-small);
  color: var(--fg-muted)
}

.lp-q--fortified {
  background: rgba(10, 122, 90, 0.08);
  border-left: 3px solid var(--q-green)
}

.lp-q--fortified strong {
  color: var(--q-green)
}

.lp-q--tight {
  background: rgba(26, 122, 170, 0.08);
  border-left: 3px solid var(--q-blue)
}

.lp-q--tight strong {
  color: var(--q-blue)
}

.lp-q--exposed {
  background: rgba(201, 36, 58, 0.08);
  border-left: 3px solid var(--q-red)
}

.lp-q--exposed strong {
  color: var(--q-red)
}

.lp-q--humble {
  background: rgba(196, 94, 26, 0.08);
  border-left: 3px solid var(--q-orange)
}

.lp-q--humble strong {
  color: var(--q-orange)
}

[data-theme="dark"] .lp-q--fortified {
  background: rgba(10, 122, 90, 0.15)
}

[data-theme="dark"] .lp-q--tight {
  background: rgba(26, 122, 170, 0.15)
}

[data-theme="dark"] .lp-q--exposed {
  background: rgba(201, 36, 58, 0.15)
}

[data-theme="dark"] .lp-q--humble {
  background: rgba(196, 94, 26, 0.15)
}

/* ---- Quadrant section ---- */
.lp-quadrant-section {
  background: var(--bg-alt)
}

.lp-quadrant-section .lp-section-heading {
  text-align: center
}

.lp-quadrant-section .lp-section-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto
}

.lp-quadrant-visual {
  max-width: 560px;
  margin: 0 auto 28px
}

.lp-quadrant-grid--large {
  gap: 10px;
  margin: 0 0 12px
}

.lp-quadrant-grid--large .lp-q {
  padding: 20px 22px;
  gap: 6px
}

.lp-q-formula {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
  margin-top: 2px
}

.lp-quadrant-axes {
  display: flex;
  justify-content: center;
  gap: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  padding: 4px 0 0
}

.lp-quadrant-explainer {
  max-width: 680px
}

.lp-quadrant-explainer p {
  font-size: var(--text-secondary);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  margin: 0 0 12px
}

.lp-quadrant-explainer p:last-child {
  margin-bottom: 0
}

/* ---- Axis sections (attack surface, blast radius, defense) ---- */
.lp-axis {
  border-top: 1px solid var(--border);
  padding-top: 64px;
  padding-bottom: 64px
}

.lp-axis--surface {
  background: var(--bg-alt)
}

.lp-axis--blast {
  background: var(--bg)
}

.lp-axis--defense {
  background: var(--bg-alt)
}

.lp-axis-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 32px
}

.lp-axis-badge {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: #FFFFFF
}

.lp-axis-badge--red {
  background: var(--q-red)
}

.lp-axis-badge--orange {
  background: var(--q-orange)
}

.lp-axis-badge--green {
  background: var(--q-green)
}

.lp-axis-title {
  font-family: var(--font-body);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 4px
}

.lp-axis-tagline {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  margin: 0
}

/* Metric grid — attack surface & blast radius */
.lp-metric-grid {
  display: grid;
  gap: 12px
}

.lp-metric-grid--5x2 {
  grid-template-columns: repeat(5, 1fr)
}

.lp-metric-grid--3x2 {
  grid-template-columns: repeat(3, 1fr)
}

.lp-metric {
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  position: relative
}

.lp-axis--blast .lp-metric {
  background: var(--bg-alt)
}

.lp-metric-id {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  margin-bottom: 8px
}

.lp-metric-name {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 6px
}

.lp-metric-desc {
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--fg-muted);
  margin-bottom: 10px
}

.lp-metric-weight {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--purple)
}

/* Defense pipeline (horizontal flow) */
.lp-defense-pipeline {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px
}

.lp-defense-stage {
  flex: 1;
  min-width: 180px;
  padding: 24px 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column
}

.lp-defense-stage-label {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--q-green);
  margin-bottom: 6px
}

.lp-defense-stage-name {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px
}

.lp-defense-stage-phase {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 10px
}

.lp-defense-stage-desc {
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--fg-muted);
  flex: 1
}

.lp-defense-arrow {
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 20px;
  color: var(--fg-subtle);
  flex-shrink: 0
}

/* Axis footnote */
.lp-axis-footnote {
  margin-top: 20px;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--fg-subtle);
  max-width: 900px
}

/* Score description (below formula callout in quadrant section) */
.lp-score-desc {
  font-size: var(--text-secondary);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  max-width: 680px;
  margin: 0
}

/* ---- Audience section ---- */
.lp-audience {
  background: var(--bg)
}

.lp-cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.lp-audience .lp-card {
  background: var(--bg-alt)
}

/* ---- Scope section (is / is-not) ---- */
.lp-scope {
  background: var(--bg-alt)
}

.lp-scope-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px
}

.lp-scope-col {
  padding: 28px;
  border: 1px solid var(--border)
}

.lp-scope-col--is {
  background: rgba(10, 122, 90, 0.04);
  border-color: var(--q-green)
}

.lp-scope-col--isnt {
  background: rgba(201, 36, 58, 0.04);
  border-color: var(--q-red)
}

[data-theme="dark"] .lp-scope-col--is {
  background: rgba(10, 122, 90, 0.08)
}

[data-theme="dark"] .lp-scope-col--isnt {
  background: rgba(201, 36, 58, 0.08)
}

.lp-scope-col-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: 14px
}

.lp-scope-col--is .lp-scope-col-label {
  color: var(--q-green)
}

.lp-scope-col--isnt .lp-scope-col-label {
  color: var(--q-red)
}

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

.lp-scope-col li {
  font-size: var(--text-secondary);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  padding: 6px 0;
  border-top: 1px solid var(--border)
}

.lp-scope-col li:first-child {
  border-top: none;
  padding-top: 0
}

.lp-scope-col li:last-child {
  padding-bottom: 0
}

/* ---- Built-by section (org names, no logos) ---- */
.lp-built-by {
  background: var(--bg);
  text-align: center
}

.lp-built-by .lp-section-heading {
  text-align: center
}

.lp-built-by .lp-section-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto
}

.lp-org-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px
}

.lp-org-names-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px
}

.lp-org-names span {
  font-family: var(--font-body);
  font-size: var(--text-secondary);
  font-weight: 600;
  color: var(--fg);
  padding: 10px 20px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  transition: border-color var(--dur-base)
}

.lp-org-names span:hover {
  border-color: var(--purple)
}

.lp-built-by-footer {
  font-size: var(--text-body);
  color: var(--fg-muted)
}

.lp-built-by-footer a {
  color: var(--fg);
  font-weight: 500;
  text-decoration: none
}

.lp-built-by-footer a:hover {
  text-decoration: underline
}

/* ---- Industry Voices (marquee) ---- */
.lp-voices {
  background: var(--bg-alt);
  overflow: hidden
}

.lp-voices .lp-section-heading {
  text-align: center;
  margin-bottom: 40px;
  padding: 0 var(--gutter)
}

.lp-voice-track {
  -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent)
}

.lp-voice-scroll {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: voice-scroll 50s linear infinite;
  padding: 4px 0
}

.lp-voice-scroll:hover {
  animation-play-state: paused
}

@keyframes voice-scroll {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-voice-scroll {
    animation: none
  }
}

.lp-voice {
  flex: 0 0 auto;
  width: 380px;
  margin: 0;
  padding: 24px 28px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  display: flex;
  flex-direction: column
}

.lp-voice p {
  font-size: var(--text-secondary);
  line-height: var(--leading-body);
  color: var(--fg);
  margin: 0 0 16px;
  flex: 1;
  font-style: italic
}

.lp-voice p::before {
  content: "\201C"
}

.lp-voice p::after {
  content: "\201D"
}

.lp-voice footer {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: auto
}

.lp-voice cite {
  font-style: normal;
  font-weight: 700;
  font-size: var(--text-secondary);
  color: var(--fg)
}

.lp-voice footer span {
  font-size: var(--text-small);
  color: var(--fg-muted)
}

/* ---- Bottom CTA ---- */
.lp-cta-bottom {
  background: var(--bg);
  color: var(--fg);
  text-align: center
}

.lp-cta-bottom h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 40px);
  font-weight: 400;
  margin-bottom: 16px;
  color: var(--fg)
}

.lp-cta-bottom p {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--fg-muted);
  max-width: 580px;
  margin: 0 auto 32px
}

.lp-cta-bottom .lp-hero-cta {
  justify-content: center
}

/* ---- about-2 quadrant caption ---- */
.lp-quadrant-caption {
  font-size: var(--text-secondary);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  max-width: 640px;
  margin: 24px auto 0;
  text-align: center
}

.lp-quadrant-caption a {
  color: var(--purple);
  text-decoration: none;
  border-bottom: 1px solid transparent
}

.lp-quadrant-caption a:hover {
  border-color: var(--purple)
}

#lp-agent-count {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 0.01em
}

/* ---- about-2 axis card body ---- */
.lp-axis-card .lp-axis-card-lead {
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-body);
  color: var(--fg);
  margin: 0 0 4px;
  flex: none
}

.lp-axis-card-body {
  font-size: var(--text-secondary);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  margin: 0
}

/* ---- about-2 methodology link ---- */
.lp-methodology-link {
  margin-top: 36px;
  text-align: center
}

.lp-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font: 500 15px/1.2 var(--font-body);
  text-decoration: none;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--dur-base), color var(--dur-base)
}

.lp-btn-outline:hover {
  border-color: var(--purple);
  color: var(--purple)
}

/* ---- about-2 "Why" merged section ---- */
.lp-why {
  background: var(--bg-alt)
}

.lp-why-gaps {
  max-width: 680px;
  margin: 0 auto
}

.lp-why-bridge {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  margin: 8px 0 28px;
  max-width: 640px
}

.lp-why-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.lp-why-point {
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--border)
}

.lp-why-point h3 {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--fg)
}

.lp-why-point p {
  font-size: var(--text-secondary);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  margin: 0
}

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

.lp-gap-list li {
  font-size: var(--text-secondary);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  padding: 12px 0;
  border-bottom: 1px solid var(--border)
}

.lp-gap-list li:first-child {
  padding-top: 0
}

.lp-gap-list li:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.lp-gap-list strong {
  color: var(--fg);
  font-weight: 700
}

/* ---- about-2 scope+audience merged ---- */
.lp-scope-audience {
  background: var(--bg-alt)
}

.lp-scope-audience .lp-cards-3 {
  margin-bottom: 40px
}

.lp-scope-audience .lp-card {
  background: var(--bg)
}

/* ---- Chips (axis sub-metric tags) ---- */
.lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px
}

.lp-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  white-space: nowrap
}

.lp-axis-card--red .lp-chip {
  border-color: rgba(201, 36, 58, 0.25);
  color: var(--q-red)
}

.lp-axis-card--orange .lp-chip {
  border-color: rgba(196, 94, 26, 0.25);
  color: var(--q-orange)
}

.lp-axis-card--green .lp-chip {
  border-color: rgba(10, 122, 90, 0.25);
  color: var(--q-green)
}

.lp-axis-card .lp-chip {
  background: var(--bg)
}

[data-theme="dark"] .lp-chip {
  background: rgba(255, 255, 255, 0.05)
}

/* ---- Live quadrant ---- */
.lp-live-qc-wrap {
  position: relative;
  max-width: 860px;
  margin: 0 auto
}

.lp-live-qc {
  position: relative;
  width: 100%;
  padding-bottom: 62%;
  overflow: hidden;
  border: 1px solid var(--border)
}

.lp-live-qc .qbg {
  position: absolute
}

/* Canonical "zx" view: H=Defense(0-15,thr 7) V=Attack(1-10,thr 5)
   v-split = 7/15 = 46.67% from left
   h-split = 1-(5-1)/(10-1) = 55.56% from top
   qtl=Exposed(red) qtr=Fortified(green) qbl=Humble(orange) qbr=Tight(blue) */
.lp-live-qc .qbg.qtl {
  left: 0;
  top: 0;
  width: 46.67%;
  height: 55.56%;
  background: rgba(201, 36, 58, 0.05)
}

.lp-live-qc .qbg.qtr {
  right: 0;
  top: 0;
  width: 53.33%;
  height: 55.56%;
  background: rgba(10, 122, 90, 0.05)
}

.lp-live-qc .qbg.qbl {
  left: 0;
  bottom: 0;
  width: 46.67%;
  height: 44.44%;
  background: rgba(196, 94, 26, 0.05)
}

.lp-live-qc .qbg.qbr {
  right: 0;
  bottom: 0;
  width: 53.33%;
  height: 44.44%;
  background: rgba(26, 122, 170, 0.05)
}

[data-theme="dark"] .lp-live-qc .qbg.qtl {
  background: rgba(201, 36, 58, 0.08)
}

[data-theme="dark"] .lp-live-qc .qbg.qtr {
  background: rgba(10, 122, 90, 0.08)
}

[data-theme="dark"] .lp-live-qc .qbg.qbl {
  background: rgba(196, 94, 26, 0.08)
}

[data-theme="dark"] .lp-live-qc .qbg.qbr {
  background: rgba(26, 122, 170, 0.08)
}

.lp-live-qc .ax {
  position: absolute;
  background: var(--border)
}

.lp-live-qc .ax.h {
  left: 0;
  right: 0;
  height: 1px;
  top: 55.56%
}

.lp-live-qc .ax.v {
  top: 0;
  bottom: 0;
  width: 1px;
  left: 46.67%
}

.lp-live-qc .ql {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  opacity: 0.6;
  pointer-events: none;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.lp-live-qc .ql strong {
  font-weight: 700;
  font-size: 11px
}

.lp-live-qc .ql span {
  font-size: 9px;
  opacity: 0.75;
  text-transform: none;
  letter-spacing: 0.01em
}

.lp-live-qc .ql.qtl {
  left: 4px;
  top: 4px
}

.lp-live-qc .ql.qtr {
  left: 48%;
  top: 4px
}

.lp-live-qc .ql.qbl {
  left: 4px;
  top: 57%
}

.lp-live-qc .ql.qbr {
  left: 48%;
  top: 57%
}

.lp-bub {
  position: absolute;
  border-radius: 50%;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  animation: lp-bub-in 0.4s ease-out both
}

.lp-bub:hover {
  opacity: 1;
  transform: scale(1.3);
  z-index: 10
}

@keyframes lp-bub-in {
  from {
    opacity: 0;
    transform: scale(0)
  }

  to {
    opacity: 0.7;
    transform: scale(1)
  }
}

.lp-live-qc-axes {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-subtle)
}

/* ---- Contributors ---- */
.lp-contributors {
  background: var(--bg);
  text-align: center
}

.lp-contributors .lp-section-heading {
  text-align: center
}

.lp-contributors .lp-section-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto
}

.lp-contributors .lp-section-lead a {
  color: var(--purple);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  margin-left: 4px
}

.lp-contributors .lp-section-lead a:hover {
  border-color: var(--purple)
}

.lp-contributors .lp-org-names {
  justify-content: center
}

.lp-contributors .lp-org-names span {
  background: var(--bg-alt)
}

.lp-contrib-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  text-align: left;
  max-width: 840px;
  margin: 0 auto
}

.lp-contrib-person {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.lp-contrib-person strong {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--fg)
}

.lp-contrib-person span {
  font-size: var(--text-small);
  color: var(--fg-muted)
}

/* ---- Landing page responsive ---- */
@media (max-width: 1200px) {
  .lp-metric-grid--5x2 {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media (max-width: 820px) {
  .lp-section {
    padding: 56px var(--gutter)
  }

  .lp-hero {
    padding: 72px var(--gutter) 64px
  }

  .lp-br-desktop {
    display: none
  }

  .lp-hero-stats {
    gap: 24px
  }

  .lp-hero-stat-num {
    font-size: 28px
  }

  .lp-shift-cols,
  .lp-cards-2x2,
  .lp-axes-summary,
  .lp-scope-cols,
  .lp-why-points {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .lp-cards-3 {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .lp-contrib-people {
    grid-template-columns: 1fr 1fr
  }

  .lp-voice {
    width: 300px
  }

  .lp-quadrant-grid {
    gap: 6px
  }

  .lp-metric-grid--5x2,
  .lp-metric-grid--3x2 {
    grid-template-columns: 1fr 1fr;
    gap: 10px
  }

  .lp-axis {
    padding-top: 48px;
    padding-bottom: 48px
  }

  .lp-defense-pipeline {
    flex-direction: column
  }

  .lp-defense-arrow {
    justify-content: center;
    padding: 6px 0;
    transform: rotate(90deg)
  }

  .lp-formula-callout {
    flex-direction: column;
    gap: 6px;
    text-align: center
  }

  .lp-section-nav {
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  .lp-section-nav a {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: var(--text-small)
  }

  .lp-hero-axes {
    gap: 6px;
    margin-bottom: 24px
  }

  .lp-hero-axis {
    font-size: 11px;
    padding: 4px 10px
  }

  .lp-hero-axis-sep {
    font-size: 16px
  }

  .lp-hero-cta {
    flex-direction: column;
    align-items: center
  }

  .lp-btn-primary,
  .lp-btn-ghost {
    width: 100%;
    max-width: 280px;
    justify-content: center
  }
}

@media (max-width: 480px) {

  .lp-metric-grid--5x2,
  .lp-metric-grid--3x2 {
    grid-template-columns: 1fr
  }

  .lp-hero-stats {
    flex-direction: column;
    gap: 16px
  }

  .lp-contrib-people {
    grid-template-columns: 1fr
  }
}