/* ═══════════════════════════════════════════════════════════════
   DIGITAL TERMS — Components
   Buttons · Cards · KPI-Bars · Chips · Topbar · Footer
   Single source of truth — keine Duplikate in HTML-Seiten
═══════════════════════════════════════════════════════════════ */

/* ── Page Shell ─────────────────────────────────────────────── */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page > main { flex: 1; width: 100%; min-width: 0; }

/* Page-Header (about, glossary, etc.) */
.page-header { padding: calc(var(--u) * 14) 0 calc(var(--u) * 8); }
.page-eyebrow {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.75rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tx-3); display: block; margin-bottom: calc(var(--u) * 1.5);
}
.page-title {
  font-family: 'Archivo Condensed', sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; color: var(--tx-1);
  letter-spacing: -0.025em; line-height: 1.08; margin-bottom: calc(var(--u) * 1.5);
}
.page-subtitle {
  font-family: 'Archivo SemiCondensed', sans-serif;
  font-size: 1.0625rem; font-weight: 300; color: var(--tx-2); line-height: 1.68; max-width: 62ch;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem; font-weight: 400;
  letter-spacing: 0.10em; text-transform: uppercase; height: 32px;
  padding: 0 calc(var(--u) * 2); border-radius: var(--r); border: 1px solid transparent;
  white-space: nowrap; text-decoration: none;
  transition: transform var(--t), box-shadow var(--t), background var(--t);
  cursor: pointer; flex-shrink: 0;
}
.btn:active { transform: scale(0.97); }
.btn-primary  { background: var(--yellow); color: var(--yellow-tx); box-shadow: var(--sh-sm); border-color: var(--yellow-bdr); }
.btn-primary:hover  { box-shadow: var(--sh-md); transform: translateY(-1px); }
.btn-secondary { background: var(--bg-card); color: var(--tx-1); border-color: var(--border-card); box-shadow: var(--sh-sm); }
.btn-secondary:hover { background: var(--bg-glass-hover); box-shadow: var(--sh-md); transform: translateY(-1px); }
.btn-ghost  { background: transparent; color: var(--tx-2); border-color: rgba(0,0,0,0.10); }
.btn-ghost:hover { background: rgba(255,255,255,0.55); color: var(--tx-1); }
.btn-danger { background: rgba(212,32,32,0.08); color: var(--neg); border-color: rgba(212,32,32,0.20); }
.btn-danger:hover { background: rgba(212,32,32,0.14); }
.btn-sm  { height: 26px !important; font-size: 0.75rem !important; padding: 0 calc(var(--u) * 1.5) !important; }
.btn-lg  { height: 44px !important; font-size: 0.875rem !important; padding: 0 calc(var(--u) * 3) !important; }
.btn-full { width: 100%; }

/* ── Voices of Terms (Report C01) — Voice Circles + Quote ─────────────────── */
.voice-module {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.voice-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 1.25);
  margin-bottom: calc(var(--u) * 2);
}
.voice-select-label {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin: 0;
}
.voice-select-wrap {
  position: relative;
  flex: 1;
  min-width: 160px;
  max-width: 220px;
}
.voice-select-wrap::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -3px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--tx-3);
  pointer-events: none;
  opacity: 0.75;
}
.input-select-dt.voice-timeframe,
.voice-timeframe.input-select-dt {
  width: 100%;
  height: 32px;
  padding: 0 calc(var(--u) * 3.25) 0 calc(var(--u) * 1.5);
  border-radius: var(--r);
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  box-shadow: var(--sh-sm);
  font-family: 'Archivo SemiCondensed', sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--tx-1);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.input-select-dt.voice-timeframe:hover,
.voice-timeframe.input-select-dt:hover {
  border-color: rgba(0, 20, 60, 0.14);
  box-shadow: var(--sh-md);
}
.input-select-dt.voice-timeframe:focus,
.voice-timeframe.input-select-dt:focus {
  outline: none;
  border-color: var(--a1);
  box-shadow: 0 0 0 2px rgba(27, 133, 204, 0.18);
}
.voice-refresh-btn { flex-shrink: 0; }

.voice-circles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 1rem 0;
}

/* Hybrid Engine context strip (above on-demand voices) */
.voice-hybrid-context {
  margin-bottom: 0;
}
.voice-hybrid-context.has-content { display: block; }
.voice-hybrid-inner {
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.07);
}
.voice-hybrid-lead {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tx-3);
  margin: 0 0 0.5rem;
  font-weight: 600;
}
.voice-hybrid-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.8rem;
  color: var(--tx-2);
  line-height: 1.45;
}
.voice-hybrid-list li { margin-bottom: 0.35rem; }
.voice-hybrid-gap {
  font-weight: 500;
  color: var(--tx-1);
}

.loading-voices,
.voice-placeholder,
.voice-quote-container .error,
.voice-circles-container .error {
  text-align: center;
  padding: 1rem;
  color: var(--tx-3);
  font-style: italic;
}
.error { color: var(--neg); }

.voice-circle {
  position: relative;
  width: 80px;
  height: 120px;
  cursor: pointer;
  transition: transform 0.2s ease;
  text-align: center;
}
.voice-circle:hover { transform: scale(1.05); }
.voice-circle.active { transform: scale(1.05); }

.voice-ring { position: absolute; top: 0; left: 0; width: 80px; height: 80px; }
.voice-ring svg { width: 100%; height: 100%; }
.voice-ring-bg { fill: none; stroke: rgba(0,0,0,0.08); stroke-width: 3; }
.voice-ring-fill {
  fill: none;
  stroke: var(--a4);
  stroke-width: 3;
  stroke-dasharray: 314;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.voice-circle.active .voice-ring-fill { stroke: var(--a1); stroke-width: 4; }

.voice-avatar-circle {
  position: absolute;
  top: 40px;
  left: 40px;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.08);
}
.voice-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.voice-info { text-align: center; margin-top: 88px; }
.voice-name {
  font-weight: 600;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
  margin: 0 auto 0.15rem;
}
.voice-platform { opacity: 0.75; }
.voice-stats { font-size: 0.65rem; color: var(--tx-3); }

.voice-quote-panel {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--sh-sm);
}
.voice-quote-inner { display: block; }
.voice-quote-meta-row {
  display: flex;
  gap: calc(var(--u) * 1.5);
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.voice-quote-meta-left { min-width: 0; }
.voice-quote {
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  color: var(--tx-1);
}
.voice-quote-name { font-weight: 600; font-size: 0.85rem; }
.voice-quote-handle { font-weight: 400; font-size: 0.8rem; color: var(--tx-2); margin-left: 0.35rem; }
.voice-quote-detail { font-size: 0.7rem; color: var(--tx-3); margin-top: 0.15rem; }
.voice-quote-link {
  color: var(--tx-1);
  text-decoration: none;
  font-size: 0.7rem;
  border-bottom: 1px solid rgba(0,0,0,0.16);
}
.voice-quote-link:hover { border-bottom-color: rgba(0,0,0,0.32); }
.voice-quote-link-cta {
  flex-shrink: 0;
  align-self: center;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: var(--r);
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  text-decoration: none;
  border-bottom: 1px solid var(--border-card);
}
.voice-quote-link-cta:hover {
  background: var(--bg-glass-hover);
  border-bottom-color: var(--border-card);
}

/* Voice cards (below circles) */
.voice-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--u) * 1.5);
  margin-top: calc(var(--u) * 2);
}
@media (min-width: 768px) {
  .voice-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .voice-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.voice-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.voice-card-header {
  padding: calc(var(--u) * 1.25) calc(var(--u) * 1.5);
  border-bottom: 1px solid rgba(0,20,60,0.06);
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.55);
}
.voice-badge {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.voice-badge--platform { }
.voice-badge--domain { }

.voice-card-body {
  padding: calc(var(--u) * 1.5) calc(var(--u) * 1.5);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
}
.voice-author {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  min-width: 0;
}
.voice-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0,20,60,0.10);
  background: rgba(0,20,60,0.03);
  flex-shrink: 0;
}
.voice-author-info { min-width: 0; }
.voice-author-info .voice-name {
  font-size: 0.8125rem;
  max-width: none;
}
.voice-author-info .voice-stats {
  font-size: 0.6875rem;
}
.voice-card-quote {
  font-family: 'Archivo SemiCondensed', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--tx-2);
  line-height: 1.55;
}
.voice-card-footer {
  padding: calc(var(--u) * 1.25) calc(var(--u) * 1.5);
  border-top: 1px solid rgba(0,20,60,0.06);
  display: flex;
  justify-content: flex-end;
}
.voice-card-link {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-1);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.16);
}
.voice-card-link:hover { border-bottom-color: rgba(0,0,0,0.32); }

/* C01 sources as cards */
.source-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--u) * 1.25);
  margin-top: calc(var(--u) * 0.75);
}
@media (min-width: 900px) {
  .source-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.source-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.source-card-header {
  padding: calc(var(--u) * 1.0) calc(var(--u) * 1.25);
  border-bottom: 1px solid rgba(0,20,60,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: rgba(255,255,255,0.55);
}
.source-platform { }
.source-authority { }
.source-card-quote {
  padding: calc(var(--u) * 1.25) calc(var(--u) * 1.25);
  font-family: 'Archivo SemiCondensed', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--tx-2);
  line-height: 1.55;
}
.source-card-footer {
  padding: calc(var(--u) * 1.0) calc(var(--u) * 1.25);
  border-top: 1px solid rgba(0,20,60,0.06);
  display: flex;
  justify-content: flex-end;
}
.source-card-link {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-1);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.16);
}
.source-card-link:hover { border-bottom-color: rgba(0,0,0,0.32); }

/* Responsive grid target: 6 / 3 / 2 circles per row */
@media (min-width: 1024px) {
  .voice-circles-container {
    max-width: calc((80px * 6) + (1rem * 5));
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .voice-circles-container {
    max-width: calc((80px * 3) + (1rem * 2));
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 767px) {
  .voice-circles-container {
    max-width: calc((80px * 2) + (1rem * 1));
    margin-left: auto;
    margin-right: auto;
  }
}

/* Nav drawer — UI language */
.nav-drawer-lang {
  width: 100%;
  max-width: 320px;
  margin-bottom: calc(var(--u) * 2);
  padding-bottom: calc(var(--u) * 2);
  border-bottom: 1px solid rgba(0, 20, 60, 0.1);
}
.nav-drawer-lang-lbl {
  display: block;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
  text-align: center;
  margin-bottom: calc(var(--u) * 1);
}
.nav-lang-row {
  display: flex;
  gap: calc(var(--u));
  justify-content: center;
}
.nav-lang-btn {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: var(--r);
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  color: var(--tx-2);
  cursor: pointer;
  transition: color var(--t), background var(--t), border-color var(--t), box-shadow var(--t);
}
.nav-lang-btn:hover {
  color: var(--tx-1);
  background: rgba(0, 20, 60, 0.05);
}
.nav-lang-btn.is-active {
  color: var(--yellow-tx);
  background: var(--yellow-dim);
  border-color: var(--yellow-bdr);
  box-shadow: var(--sh-sm);
}

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 100; height: 52px;
  background: var(--bg-glass-strong); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid var(--border-card); box-shadow: var(--sh-sm);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 0 calc(var(--u) * 1.5); width: 100%;
}
.logo {
  font-family: 'Archivo Condensed', sans-serif; font-size: 1.625rem; line-height: 1;
  display: flex; align-items: baseline; letter-spacing: 0; text-decoration: none; position: relative;
}
.l-d  { color: var(--a1); }
.l-sep { color: var(--tx-3); font-weight: 100; }
.l-t  { color: var(--a5); }
.l-c  { color: var(--a3); letter-spacing: 0.02em; }

.burger {
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: 5px; padding: 6px;
  background: none; border: none; cursor: pointer;
}
.burger span { display: block; height: 2px; border-radius: 1px; transition: all 0.2s ease; }
.burger span:nth-child(1) { background: var(--a1); width: 22px; }
.burger span:nth-child(2) { background: var(--a5); width: 16px; }
.burger span:nth-child(3) { background: var(--a3); width: 10px; }

.topbar-nav { display: none; }

.topbar-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 2px;
}
.topbar-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r);
  color: var(--tx-2); text-decoration: none; flex-shrink: 0;
  transition: color var(--t), background var(--t);
}
.topbar-icon-btn:hover { color: var(--tx-1); background: rgba(0,20,60,0.05); }
.topbar-nav a, .nav-drawer a {
  font-family: 'Archivo Narrow', sans-serif; font-size: 1rem; font-weight: 400;
  color: var(--tx-2); padding: calc(var(--u) * 0.75) calc(var(--u) * 1.25);
  border-radius: var(--r); transition: color var(--t), background var(--t);
  text-decoration: none;
}
.topbar-nav a:hover, .nav-drawer a:hover { color: var(--tx-1); background: rgba(0,20,60,0.05); }
.nav-sep { flex: 1; }
.nav-cta {
  color: var(--yellow-tx) !important; background: var(--yellow-dim) !important;
  border: 1px solid var(--yellow-bdr) !important; border-radius: var(--r) !important;
}

/* Nav drawer — mobile: full-screen vertical centered */
.nav-drawer {
  display: none;
  position: fixed; top: 52px; left: 0; right: 0; bottom: 0;
  background: rgba(248,250,255,0.97); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  flex-direction: column; align-items: center; justify-content: flex-start;
  padding: calc(var(--u) * 3) calc(var(--u) * 2.5);
  z-index: 99; gap: 2px; border-top: 1px solid var(--border-card);
}
.nav-drawer.open { display: flex; }
.nav-drawer a {
  min-height: 48px; display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 320px;
  border-bottom: 1px solid rgba(0,20,60,0.06);
  border-radius: 0; padding: 0 calc(var(--u));
}
.nav-drawer .nav-sep { flex: none; display: none; }
.nav-cta:hover { opacity: 0.9; }

/* ═══════════════════════════════════════════════════════════════
   KPI-BARS — 5px, 10 Segmente, CI-Black
═══════════════════════════════════════════════════════════════ */
.kpi-hdr-row { display: flex; align-items: center; gap: calc(var(--u)); margin-bottom: 3px; }
.kpi-hdr-lbl { font-family: 'Archivo Narrow', sans-serif; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--tx-3); width: 44px; min-width: 44px; flex-shrink: 0; }
.kpi-hdr-mid { font-family: 'Archivo Narrow', sans-serif; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--tx-3); flex: 1; text-align: right; }
.kpi-hdr-pct { font-family: 'Archivo Narrow', sans-serif; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--tx-3); min-width: 28px; text-align: right; }
.kpi-hdr-sig { width: 5px; flex-shrink: 0; }
.kpi-row { display: flex; align-items: center; gap: calc(var(--u)); flex-wrap: nowrap; min-height: 20px; }
.kpi-lbl {
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--tx-3);
  width: 44px; min-width: 44px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}.kpi-bar {
  position: relative; flex: 1; height: 5px; border-radius: 100px;
  background: var(--ci-black-24); overflow: hidden; min-width: 0;
}
.kpi-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 100px; background: var(--ci-black-74); transition: width 0.4s ease;
}
.kpi-bar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right,
    transparent, transparent calc(10% - 0.75px), rgba(255,255,255,0.95) calc(10% - 0.75px), rgba(255,255,255,0.95) calc(10% + 0.75px),
    transparent calc(10% + 0.75px), transparent calc(20% - 0.75px), rgba(255,255,255,0.95) calc(20% - 0.75px), rgba(255,255,255,0.95) calc(20% + 0.75px),
    transparent calc(20% + 0.75px), transparent calc(30% - 0.75px), rgba(255,255,255,0.95) calc(30% - 0.75px), rgba(255,255,255,0.95) calc(30% + 0.75px),
    transparent calc(30% + 0.75px), transparent calc(40% - 0.75px), rgba(255,255,255,0.95) calc(40% - 0.75px), rgba(255,255,255,0.95) calc(40% + 0.75px),
    transparent calc(40% + 0.75px), transparent calc(50% - 0.75px), rgba(255,255,255,0.95) calc(50% - 0.75px), rgba(255,255,255,0.95) calc(50% + 0.75px),
    transparent calc(50% + 0.75px), transparent calc(60% - 0.75px), rgba(255,255,255,0.95) calc(60% - 0.75px), rgba(255,255,255,0.95) calc(60% + 0.75px),
    transparent calc(60% + 0.75px), transparent calc(70% - 0.75px), rgba(255,255,255,0.95) calc(70% - 0.75px), rgba(255,255,255,0.95) calc(70% + 0.75px),
    transparent calc(70% + 0.75px), transparent calc(80% - 0.75px), rgba(255,255,255,0.95) calc(80% - 0.75px), rgba(255,255,255,0.95) calc(80% + 0.75px),
    transparent calc(80% + 0.75px), transparent calc(90% - 0.75px), rgba(255,255,255,0.95) calc(90% - 0.75px), rgba(255,255,255,0.95) calc(90% + 0.75px),
    transparent calc(90% + 0.75px), transparent 100%
  );
}
/* ═══════════════════════════════════════════════════════════════
   CARD SYSTEM
   .card            — Basis (alle Seiten)
   .card--hover     — mit Hover-Lift
   .card-pad        — padded variant (simple content pages)
   .plan-card       — Pricing-Karte (weißer bg, kein glass)
   .plan-card--featured — gelbe border
═══════════════════════════════════════════════════════════════ */
.card {
  display: flex; flex-direction: column; border-radius: var(--r-card);
  background: var(--bg-card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-card); box-shadow: var(--sh-md);
  overflow: visible; text-decoration: none; min-width: 0; width: 100%;
}
.card--hover { transition: box-shadow 0.25s ease, transform 0.25s ease; cursor: pointer; }
.card--hover:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); }

/* Padded variant — für about, login, simple-content-Seiten */
.card-pad { padding: calc(var(--u) * 3); }

/* plan-card → defined in PLAN CARDS section below */

/* ── Card Header ─────────────────────────────────────────────── */
.card-header {
  background: #ffffff; border-bottom: 1px solid rgba(0,20,60,0.08); height: 52px;
  padding: 0 0 0 calc(var(--u) * 2.5); display: flex; align-items: center;
  gap: calc(var(--u) * 1.5); flex-shrink: 0;
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.card-header-left { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1; }
.card-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.report-main .card-header-right {
  flex: 0 0 auto;
  min-width: 0;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
.report-main .card-header-chips {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.report-main .card-header .card-ctx {
  width: 40px;
  min-width: 40px;
  flex-shrink: 0;
  margin-left: 0;
}

/* Typ-Label (z.B. "01_Identity") */
.card-type {
  font-family: 'Archivo Condensed', sans-serif; font-size: 1.25rem; font-weight: 500;
  color: var(--ci-black-74); white-space: nowrap; flex-shrink: 0; line-height: 1;
}
/* Term name: hidden by default (legacy body-only layout) */
.card-title { display: none; }
.terms-grid .card .card-header-left .card-title {
  display: inline-block;
  font-family: 'Archivo Condensed', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--tx-1);
  line-height: 1.15;
  max-width: min(100%, 360px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: baseline;
}
.report-main .card .card-header-left .card-title {
  display: none;
}
.report-main .card .card-header,
.terms-grid .card .card-header {
  height: auto;
  min-height: 52px;
  flex-wrap: wrap;
  row-gap: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: calc(var(--u) * 2.5);
}
/* Term as big title inside card body */
.card-term {
  font-family: 'Archivo Condensed', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700;
  color: var(--tx-1); line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: calc(var(--u) * 0.5);
}

/* ── Card Body ───────────────────────────────────────────────── */
.card-body {
  padding: calc(var(--u) * 3); flex: 1; background: rgba(255,255,255,0.22);
  display: flex; flex-direction: column; gap: calc(var(--u) * 2);
  min-width: 0;
}
/* Horizontale Trennlinie */
.card-rule { height: 1px; background: rgba(0,20,60,0.07); margin: calc(var(--u) * 0.5) 0; flex-shrink: 0; }

/* ── Card Module ─────────────────────────────────────────────── */
.card-module { display: flex; flex-direction: column; gap: calc(var(--u) * 0.75); }
.card-module + .card-module { margin-top: calc(var(--u) * 2); }
.card-module-label {
  font-family: 'Archivo SemiCondensed', sans-serif;
  font-size: 1.25rem; font-weight: 500;
  color: #000;
  margin-bottom: calc(var(--u) * 0.25);  /* tighter — content sits close to label */
  margin-top: calc(var(--u) * 2);        /* more space above = distance from previous module */
}
.card-module-label:first-child,
.card-module-label:first-of-type { margin-top: 0; }
.card-rule + .card-module-label { margin-top: calc(var(--u) * 1.25); } /* after a divider, less top margin needed */
.card-module-content {
  font-family: 'Archivo SemiCondensed', sans-serif; font-size: 0.9375rem;
  font-weight: 300; color: var(--tx-2); line-height: 1.58;
  margin-top: 0;                         /* no extra gap — label already close */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Zwei-Spalten-Layout im Card-Body (z.B. Text + TIMM) */
.card-two-col { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * 3); align-items: start; }

.card-kpi-section { display: flex; flex-direction: column; gap: calc(var(--u)); }

/* CTA Row */
.card-cta-row { display: flex; justify-content: flex-end; padding-top: calc(var(--u) * 1.5); }
.card-cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; height: 28px;
  padding: 0 calc(var(--u) * 1.75); border-radius: var(--r); border: none;
  background: var(--yellow); color: var(--yellow-tx); box-shadow: var(--sh-sm);
  cursor: pointer; transition: box-shadow var(--t), transform var(--t); text-decoration: none;
}
.card-cta:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }

/* ── Card Footer ─────────────────────────────────────────────── */
.card-footer {
  background: #ffffff; border-top: 1px solid rgba(0,20,60,0.07);
  padding: 0 calc(var(--u) * 2.5); height: 36px;
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--u)); flex-shrink: 0;
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem; font-weight: 300; color: var(--tx-3);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.card-footer-left, .card-footer-right { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-footer-left strong { font-weight: 500; color: var(--tx-2); }

/* ═══════════════════════════════════════════════════════════════
   CHIP SYSTEM — defined in css/chips.css (single source of truth)
═══════════════════════════════════════════════════════════════ */

/* LEDs (nur für KPI-Bars) */
.led {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.led-pos  { background: var(--pos);  box-shadow: 0 0 4px 1px rgba(23,168,78,0.55); }
.led-neg  { background: var(--neg);  box-shadow: 0 0 4px 1px rgba(212,32,32,0.55); }
.led-warn { background: var(--warn); box-shadow: 0 0 4px 1px rgba(196,120,0,0.55); }
.led-neu  { background: var(--neu);  box-shadow: 0 0 3px 1px rgba(138,150,168,0.40); }

/* ═══════════════════════════════════════════════════════════════
   CONTEXT MENU
═══════════════════════════════════════════════════════════════ */
.card-ctx {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  width: 48px; height: 48px; border-radius: 0;
  border: none; background: none; cursor: pointer; flex-shrink: 0; transition: background var(--t);
}
.card-ctx:hover { background: rgba(0,20,60,0.06); }

.card-ctx-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 0;
}
.card-ctx-btn span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tx-3);
  transition: background var(--t);
}
.card-ctx:hover .card-ctx-btn span { background: var(--tx-1); }

.card-ctx-dd {
  display: none; position: absolute; top: calc(100% + 4px); right: 0;
  width: 200px; background: #ffffff; border: 1px solid rgba(0,0,0,0.10);
  border-radius: 10px; overflow: hidden; z-index: 1000; padding: 4px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 16px 48px rgba(0,0,0,0.10);
}
.card-ctx.open .card-ctx-dd { display: block; }
.card-ctx-item {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%; background: none; border: none;
  min-height: 48px; padding: 8px 12px; white-space: nowrap;
  font-family: 'Archivo SemiCondensed', sans-serif;
  font-size: 1.3125rem; font-weight: 400;
  color: rgba(0,0,0,0.75); cursor: pointer; text-align: left;
  transition: background 0.12s;
}
.card-ctx-item .material-symbols-outlined {
  font-size: 1.375rem; color: rgba(0,0,0,0.45); flex-shrink: 0;
}
.card-ctx-item:hover .material-symbols-outlined { color: rgba(0,0,0,0.70); }
.card-ctx-item:hover { background: #F0F0F0; color: #000; }
.card-ctx-sep { height: 1px; background: rgba(0,20,60,0.06); margin: 3px 0; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.footer {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: calc(var(--u) * 5) 0 calc(var(--u) * 4);
  background: rgba(4,8,18,0.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  position: relative; z-index: 1;
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: calc(var(--u) * 3); }
.footer-logo {
  font-family: 'Archivo Condensed', sans-serif; font-size: 1.25rem; line-height: 1;
  display: flex; align-items: baseline; margin-bottom: calc(var(--u));
  position: relative; width: fit-content; padding-bottom: 4px;
}
.footer-desc { font-size: 0.875rem; font-weight: 300; color: rgba(255,255,255,0.45); line-height: 1.65; max-width: 26ch; }
.footer-col-title {
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.28); margin-bottom: calc(var(--u));
}
.footer-links { display: flex; flex-direction: column; gap: 4px; }
.footer-links a { font-size: 0.875rem; font-weight: 300; color: rgba(255,255,255,0.45); transition: color var(--t); }
.footer-links a:hover { color: rgba(255,255,255,0.85); }
.footer-bottom {
  padding-top: calc(var(--u) * 2); border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: calc(var(--u));
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem; color: rgba(255,255,255,0.26);
}

/* ═══════════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: calc(var(--u) * 2); right: calc(var(--u) * 2); z-index: 600;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(14px);
  border: 1px solid rgba(0,0,0,0.07); border-radius: var(--r);
  padding: calc(var(--u)) calc(var(--u) * 1.5); font-size: 0.875rem; color: var(--tx-1);
  box-shadow: var(--sh-md); transform: translateY(80px); opacity: 0;
  transition: transform .25s ease, opacity .25s ease; pointer-events: none; max-width: 300px;
}
.toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.toast.toast-error { border-color: rgba(212,32,32,0.22); }

/* ═══════════════════════════════════════════════════════════════
   REPORT / PREVIEW — Layout
═══════════════════════════════════════════════════════════════ */
.report-wrap  { padding: calc(var(--u) * 4) 0 calc(var(--u) * 10); }
.report-hd    { margin-bottom: calc(var(--u) * 4); max-width: none; }
.report-term {
  font-family: 'Archivo Condensed', sans-serif; font-size: clamp(2rem, 5.5vw, 3.4rem);
  font-weight: 700; color: var(--tx-1); letter-spacing: -0.025em; line-height: 1.08; margin-bottom: calc(var(--u));
}
.report-meta { display: flex; align-items: center; gap: calc(var(--u) * 1.25); flex-wrap: wrap; margin-bottom: calc(var(--u) * 1.5); }
.report-summary { font-family: 'Archivo SemiCondensed', sans-serif; font-size: 1rem; font-weight: 300; color: var(--tx-2); line-height: 1.72; }
.report-layout { display: grid; grid-template-columns: 1fr; gap: calc(var(--u) * 3); align-items: start; }
@media (min-width: 1200px) { .report-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); } }
.report-main { display: flex; flex-direction: column; gap: calc(var(--u) * 3); max-width: none; }
.report-sidebar { display: flex; flex-direction: column; gap: calc(var(--u) * 2); position: sticky; top: 68px; }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: calc(var(--u) * 0.75); flex-wrap: wrap; margin-bottom: calc(var(--u) * 3); font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem; color: var(--tx-3); }
.breadcrumb a { color: var(--tx-3); transition: color var(--t); }
.breadcrumb a:hover { color: var(--tx-2); }
.bc-sep { opacity: 0.4; }

/* ── KPI Circles (Preview / Report C01) ─────────────────────── */
/* KPI Circles — 6-col grid: [g1: 3 circles] [gutter + divider] [g2: 2 circles] */
.kpi-section     {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(14px, 1.35rem) repeat(2, minmax(0, 1fr));
  align-items: start;
  margin-top: 0.75rem;
  column-gap: 10px;
}
.kpi-g1          { display: contents; }
.kpi-g2          { display: contents; }
/* Separator between g1 and g2 */
.kpi-col-empty   {
  position: relative; grid-column: 4;
  width: 100%; align-self: stretch; justify-self: center;
  max-width: 1.35rem;
}
.kpi-col-empty::before {
  content: ''; position: absolute;
  left: 50%; top: 0.75rem; bottom: 0.75rem;
  width: 1px; background: rgba(0,20,60,0.08);
  transform: translateX(-50%);
}
/* More gap between label-above and the circle itself */
.kpi-item        { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.2rem 0.1rem 0.4rem; }
/* Fixed label height: 2 lines = prevents circle from shifting on multiline labels */
.kpi-item-lbl {
  font-family: 'Archivo SemiCondensed', sans-serif;
  font-size: 0.65rem;                    /* smaller — less visual competition with value */
  font-weight: 400;
  color: var(--ci-black-54); text-align: center; line-height: 1.3;
  min-height: calc(0.65rem * 1.3 * 2);  /* exactly 2 lines */
  display: flex; align-items: flex-end; justify-content: center;
  white-space: normal; word-break: break-word; max-width: 100%;
  margin-bottom: 0.25rem;               /* extra gap before circle */
}
.kpi-badge { position: relative; width: clamp(92px, 17vw, 148px); height: clamp(92px, 17vw, 148px); flex-shrink: 0; }
.kpi-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kpi-inner { position: absolute; inset: 0; }
.kpi-super { position: absolute; left: 0; right: 0; top: 18%; text-align: center; font-family: 'Archivo Condensed', sans-serif; font-size: clamp(0.45rem, 1vw, 0.75rem); font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tx-3); line-height: 1; }  /* smaller */
.kpi-val   { position: absolute; left: 0; right: 0; top: 43%; transform: translateY(-50%); text-align: center; font-family: 'Archivo Condensed', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--tx-1); line-height: 1; letter-spacing: 0.04em; }
.kpi-sub   { position: absolute; left: 0; right: 0; bottom: 24%; text-align: center; font-family: 'Archivo Condensed', sans-serif; font-size: clamp(0.6rem, 1.1vw, 0.75rem); font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tx-3); line-height: 1; }  /* smaller */
.kpi-lbl-sm { font-family: 'Archivo Narrow', sans-serif; font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-3); text-align: center; }
/* Label above KPI circles — separate from .kpi-lbl (bar-row label, fixed 44px) */
.kpi-circle-lbl { font-family: 'Archivo Narrow', sans-serif; font-size: 0.575rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-3); text-align: center; white-space: normal; word-break: break-word; max-width: 100%; line-height: 1.3; margin-bottom: 0.3rem; }

@media (max-width: 767px) {
  .kpi-val { font-size: 1.2rem; }
  .kpi-sub { font-size: 0.72rem; bottom: 24%; }
}

/* ── 5×5 Corpus Heatmap ─────────────────────────────────────── */
.hm-wrap { margin-top: 0; }
.hm-desc { font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem; font-weight: 300; color: var(--tx-3); line-height: 1.5; margin-bottom: calc(var(--u)); }
.hm-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vw, 6px);
  margin-top: calc(var(--u) * 0.5);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.hm-row {
  display: grid;
  grid-template-columns: clamp(2rem, 6.5vw, 2.75rem) repeat(6, minmax(0, 1fr));
  gap: clamp(4px, 1vw, 6px);
  align-items: stretch;
  border-radius: 3px;
}
.hm-row--hdr { background: transparent; }
.hm-row--data:nth-child(even) { background: rgba(0, 20, 60, 0.028); }
.hm-row-lbl {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: clamp(0.5625rem, 1.9vw, 0.6875rem);
  font-weight: 700;
  color: var(--tx-3);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: clamp(4px, 1vw, 8px);
  line-height: 1.2;
}
.hm-col-lbl {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: clamp(0.5625rem, 1.9vw, 0.6875rem);
  font-weight: 700;
  color: var(--tx-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(1.1rem, 4vw, 1.35rem);
  padding-bottom: 2px;
}
/* Heatmap cells — keep in sync with css/main.css (.hm-cell, .hm-cell-val) */
.hm-cell {
  box-sizing: border-box;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: clamp(0.625rem, 2.15vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: clamp(4px, 1.1vw, 7px) clamp(5px, 1.4vw, 9px);
  min-width: 0;
  min-height: clamp(36px, 9.5vw, 44px);
  width: 100%;
  border: var(--chip-border-width, 2px) solid var(--chip-border-default);
  background: #ffffff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  color: var(--tx-2);
  font-variant-numeric: tabular-nums;
}
.hm-cell-val { line-height: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hm-cell:hover { transform: translateY(-2px); z-index: 1; position: relative; }
.hm-cell--active { box-shadow: 0 0 0 2px var(--tx-1); z-index: 1; position: relative; }
.hm-cell--pos   { border-color: var(--pos); }
.hm-cell--neg   { border-color: var(--neg); }
.hm-cell--warn  { border-color: var(--warn); }
.hm-cell--neu   { border-color: rgba(0,20,60,0.18); }
.hm-cell--empty { background: rgba(0,20,60,0.02); color: var(--tx-3); border-color: rgba(0,20,60,0.08); box-shadow: none; }

/* Heatmap trace quote zone */
.hm-quote { margin-top: calc(var(--u) * 1.5); padding: calc(var(--u)) calc(var(--u) * 1.5); background: rgba(0,20,60,0.04); border-radius: 8px; border-left: 2px solid rgba(42,154,232,0.35); }
.hm-quote-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hm-quote-src { font-family: 'Archivo Narrow', sans-serif; font-size: 0.6875rem; color: var(--tx-3); flex: 1; }
.hm-quote-toggle { background: none; border: 1px solid rgba(0,20,60,0.12); border-radius: 4px; padding: 2px 6px; font-size: 0.75rem; cursor: pointer; color: var(--tx-3); transition: color var(--t), border-color var(--t); }
.hm-quote-toggle:hover { color: var(--tx-1); border-color: rgba(42,154,232,0.5); }
.hm-quote-text { margin: 0; font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem; color: var(--tx-2); line-height: 1.55; font-style: italic; }

/* ── Sidebar Cards ──────────────────────────────────────────── */
.sb-card { background: var(--bg-card); backdrop-filter: blur(14px); border: 1px solid var(--border-card); border-radius: var(--r-card); box-shadow: var(--sh-sm); overflow: hidden; }
.sb-hd   { padding: calc(var(--u) * 1.5) calc(var(--u) * 2); border-bottom: 1px solid rgba(0,20,60,0.07); background: rgba(255,255,255,0.55); }
.sb-lbl  { font-family: 'Archivo Narrow', sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-3); }
.sb-bd   { padding: calc(var(--u) * 1.5) calc(var(--u) * 2); display: flex; flex-direction: column; gap: 6px; }

/* 4C-Stepper in Sidebar */
.c4-step { display: flex; align-items: flex-start; gap: calc(var(--u) * 1.25); padding: calc(var(--u) * 0.75) 0; }
.c4-num  { font-family: 'Archivo Condensed', sans-serif; font-size: 1rem; font-weight: 700; color: var(--ci-black-24); line-height: 1; flex-shrink: 0; width: 20px; }
.c4-step.active .c4-num { color: var(--a5); }
.c4-step-name { font-family: 'Archivo SemiCondensed', sans-serif; font-size: 0.875rem; font-weight: 300; color: var(--tx-3); line-height: 1.4; }
.c4-step.active .c4-step-name { color: var(--tx-1); font-weight: 400; }
/* ── Locked Cards (Freemium overlay on .card base) ──────────── */
.card-locked { position: relative; overflow: hidden; }
.card-locked .card-header,
.card-locked .card-body,
.card-locked .card-footer { filter: blur(3px); opacity: 0.45; pointer-events: none; user-select: none; }
.card-locked-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: calc(var(--u) * 1.5);
  background: rgba(240,244,251,0.55);
  backdrop-filter: blur(2px);
  z-index: 10;
}
.card-locked-icon { font-size: 1.75rem; line-height: 1; }
.card-locked-title {
  font-family: 'Archivo Condensed', sans-serif;
  font-size: 1.25rem; font-weight: 700;
  color: var(--tx-1); letter-spacing: -0.01em;
}
.card-locked-desc {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.875rem; font-weight: 300;
  color: var(--tx-2); text-align: center;
  max-width: 36ch; line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════
   TOOLTIP SYSTEM
═══════════════════════════════════════════════════════════════ */
.has-tooltip { position: relative; cursor: help; }
.has-tooltip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: rgba(20,24,36,0.93); color: #fff;
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem;
  font-weight: 300; letter-spacing: 0; text-transform: none;
  line-height: 1.45; white-space: nowrap; max-width: 220px;
  white-space: normal; text-align: center;
  padding: 5px 10px; border-radius: 5px;
  pointer-events: none; opacity: 0;
  transition: opacity 0.15s ease; z-index: 1001;
}
.has-tooltip::before {
  content: '';
  position: absolute; bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(20,24,36,0.93);
  pointer-events: none; opacity: 0;
  transition: opacity 0.15s ease; z-index: 1001;
}
.has-tooltip:hover::after,
.has-tooltip:hover::before { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   CARD MODIFIER CLASSES
═══════════════════════════════════════════════════════════════ */
.card-module-content--mt { margin-top: 0.75rem; }
.card-timm-row { display: flex; justify-content: flex-end; margin-top: calc(var(--u)); }

/* ═══════════════════════════════════════════════════════════════
   KPI VALUE + DATA LABELS
═══════════════════════════════════════════════════════════════ */
/* Small value text after kpi-bar (sidebar, risk rows) */
.kpi-val-sm {
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem;
  font-weight: 700; color: var(--tx-1); min-width: 28px; text-align: right;
  flex-shrink: 0;
}

/* Live/Simulated data label */
.data-label { font-family: 'Archivo Narrow', sans-serif; font-size: 0.875rem; font-weight: 500; }
.data-label--live { color: var(--pos); }
.data-label--sim  { color: var(--neg); }

/* Report meta timeframe */
.report-meta-time {
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.875rem; color: var(--tx-3);
}

/* ═══════════════════════════════════════════════════════════════
   C02 — Authority Slider + Domain Signals + Spider Chart
═══════════════════════════════════════════════════════════════ */
/* Desktop: [Slider+Bars (5fr)] | [1px] | [Spider (3fr)] — minmax(0,…) + min-width:0 at all widths */
.c02-modules         { display: grid; grid-template-columns: minmax(0, 2.4fr) 1px minmax(0, 1.35fr); gap: 0; align-items: stretch; margin-top: calc(var(--u)); min-width: 0; width: 100%; }
.c02-modules > *     { min-width: 0; }
.c02-vdiv            { width: 1px; background: rgba(0,20,60,0.08); align-self: stretch; margin: calc(var(--u)) calc(var(--u) * 1.25); min-width: 0; }
.c02-mod             { padding: 0.5rem calc(var(--u)*2) calc(var(--u)*1.5); min-width: 0; }
.c02-mod-slider-bars { padding-left: 0; display: flex; flex-direction: column; min-height: 0; }
.c02-mod-spider      { padding-right: 0; display: flex; flex-direction: column; min-height: 0; }
/* Inner 2-col: slider left, bars right */
.c02-slider-bars-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: calc(var(--u) * 0.75); align-items: start; min-width: 0; flex: 1 1 auto; }
.c02-mod-slider-col    { padding: 0.5rem calc(var(--u)*0.75) calc(var(--u)*1.5) 0; min-width: 0; }
.c02-mod-bars-col      { padding: 0.5rem 0 calc(var(--u)*1.5) calc(var(--u)*1.5); min-width: 0; width: 100%; }
.c02-mod-label         { margin-bottom: calc(var(--u)); }

/* Column headers — same height both sides for perfect row alignment */
.c02-col-hdr           { height: 1.25rem; display: flex; align-items: flex-end; font-family: 'Archivo Narrow',sans-serif; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tx-2); }
.c02-col-hdr--bars     { justify-content: space-between; }

/* Authority Slider */
.c02-slider-wrap       { display: flex; justify-content: flex-start; padding-top: 0; }
.c02-slider-track-area { display: flex; align-items: stretch; gap: 12px; height: 200px; }
.c02-levels            { display: grid; grid-template-rows: repeat(5,1fr); height: 100%; }
.c02-lv                { display: flex; align-items: center; justify-content: flex-end; font-family: 'Archivo Narrow',sans-serif; font-size: 0.75rem; font-weight: 600; color: var(--tx-3); line-height: 1; cursor: pointer; transition: color var(--t); user-select: none; }
.c02-lv:hover,
.c02-lv.active         { color: var(--tx-1); }
.c02-track-col         { position: relative; width: 20px; }
.c02-track-col::after  { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 8px; pointer-events: none; z-index: 3;
  background: linear-gradient(to bottom,
    transparent calc(20% - 0.75px), rgba(255,255,255,0.92) calc(20% - 0.75px), rgba(255,255,255,0.92) calc(20% + 0.75px), transparent calc(20% + 0.75px),
    transparent calc(40% - 0.75px), rgba(255,255,255,0.92) calc(40% - 0.75px), rgba(255,255,255,0.92) calc(40% + 0.75px), transparent calc(40% + 0.75px),
    transparent calc(60% - 0.75px), rgba(255,255,255,0.92) calc(60% - 0.75px), rgba(255,255,255,0.92) calc(60% + 0.75px), transparent calc(60% + 0.75px),
    transparent calc(80% - 0.75px), rgba(255,255,255,0.92) calc(80% - 0.75px), rgba(255,255,255,0.92) calc(80% + 0.75px), transparent calc(80% + 0.75px)
  ); }
.c02-track             { position: absolute; left: 50%; transform: translateX(-50%); width: 8px; height: 100%; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; background: rgba(0,20,60,0.08); }
.c02-seg               { flex: 1; width: 100%; opacity: 0.22; transition: opacity 0.15s ease; }
.c02-seg.active        { opacity: 1; }
.c02-handle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 12px solid transparent;
  background: #ffffff;
  background-clip: padding-box;
  box-sizing: content-box;
  box-shadow: 0 0 0 2px rgba(0, 20, 60, 0.16);
  cursor: ns-resize;
  z-index: 4;
  transition: box-shadow var(--t), transform var(--t);
}
.c02-handle:hover {
  box-shadow: 0 0 0 2px rgba(42, 154, 232, 0.45);
  transform: translateX(-50%) scale(1.06);
}
.c02-handle--total {
  box-shadow: 0 0 0 2px rgba(42, 154, 232, 0.5);
  background: rgba(42, 154, 232, 0.18);
  background-clip: padding-box;
  cursor: pointer;
}

/* Seg colors — class-driven, no inline bg */
.c02-bars-unit { font-family: 'Archivo Narrow', sans-serif; font-size: 0.625rem; font-weight: 400; color: var(--tx-3); letter-spacing: 0.06em; text-transform: none; }
.c02-seg-l5 { background: var(--a5); }
.c02-seg-l4 { background: var(--a4); }
.c02-seg-l3 { background: var(--a3); }
.c02-seg-l2 { background: var(--a2); }
.c02-seg-l1 { background: var(--a1); }

/* Spider legend — unified style */
.c02-legend      { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.c02-leg-item    { display: flex; align-items: center; gap: 5px; }
.c02-leg-dot     { display: inline-block; width: 10px; height: 2px; border-radius: 1px; flex-shrink: 0; }
.c02-leg-lbl     { font-family: 'Archivo Narrow', sans-serif; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tx-2); }
.c02-leg-vol     { background: var(--a4); }
.c02-leg-disc    { background: var(--a2); }
.c02-spider-wrap { width: 100%; }
.c02-spider-svg  { width: 100%; height: auto; display: block; overflow: hidden; }
.spider-axis-lbl { font-family: 'Archivo Narrow',sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--tx-3); }
.spider-tsi-sup  { font-family: 'Archivo Condensed',sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; fill: rgba(0,20,60,0.38); }
.spider-tsi-val  { font-family: 'Archivo Condensed',sans-serif; font-size: 28px; font-weight: 700; fill: var(--tx-1); letter-spacing: 0.04em; }

/* Domain Signals Bars */
.c02-bars      { display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); height: 200px; gap: 2px; align-content: stretch; }
.c02-bars .kpi-lbl {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0 4px 0 0;
  min-height: 0;
  width: auto;
  min-width: 38px;
  max-width: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--axis-lbl-family);
  font-size: var(--axis-lbl-size);
  font-weight: var(--axis-lbl-weight);
  letter-spacing: var(--axis-lbl-tracking);
  text-transform: uppercase;
  color: var(--axis-lbl-color);
}
.c02-bars .kpi-bar {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}
.c02-bars .kpi-row {
  gap: calc(var(--u) * 0.5);
  align-self: stretch;
  min-height: 0;
  width: 100%;
}
.c02-bar-row   { display: flex; align-items: center; gap: calc(var(--u)); }
.c02-bar-lbl   { font-family: 'Archivo Narrow',sans-serif; font-size: 0.75rem; font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-3); min-width: 36px; }
.c02-bar-track { flex: 1; height: 5px; background: rgba(0,20,60,0.08); border-radius: 100px; overflow: hidden; }
.c02-bar-fill  { height: 100%; border-radius: 100px; background: var(--ci-black-74); transition: width 0.35s ease; }
.c02-bar-val   { font-family: 'Archivo Narrow',sans-serif; font-size: 0.75rem; font-weight: 700; color: var(--tx-1); min-width: 22px; text-align: right; }
.c02-led {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.80);
}
.c02-led-pos   { background: var(--pos);  box-shadow: 0 0 5px var(--pos),  0 0 0 2px rgba(255,255,255,0.80); }
.c02-led-warn  { background: var(--warn); box-shadow: 0 0 5px var(--warn), 0 0 0 2px rgba(255,255,255,0.80); }
.c02-led-neg   { background: var(--neg);  box-shadow: 0 0 5px var(--neg),  0 0 0 2px rgba(255,255,255,0.80); }
.c02-led-neu   { background: #AFAFAF; }

/* ═══════════════════════════════════════════════════════════════
   C03 RISK ROW DESC
═══════════════════════════════════════════════════════════════ */
.risk-bar { width: 120px; flex: none; }
.risk-row-desc {
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem;
  color: var(--tx-2); padding-left: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) * 1.5); line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   C03 GRI ROW
═══════════════════════════════════════════════════════════════ */
.c03-gri-row {
  display: flex; align-items: center;
  gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 2);
}

/* ═══════════════════════════════════════════════════════════════
   C04 TSI ROW + MOMENTUM BADGE
═══════════════════════════════════════════════════════════════ */
.c04-tsi-row {
  display: flex; align-items: center;
  gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 2);
}
.momentum-badge {
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem;
  font-weight: 600; padding: 3px 10px; border-radius: var(--r);
}
.momentum-badge--rising  { background: rgba(23,168,78,0.12);  color: var(--pos); }
.momentum-badge--stable  { background: rgba(0,20,60,0.07);    color: var(--tx-2); }
.momentum-badge--falling { background: rgba(196,120,0,0.12);  color: var(--warn); }

/* ═══════════════════════════════════════════════════════════════
   C04 USE CASES
═══════════════════════════════════════════════════════════════ */
.usecase-row  { display: flex; gap: 12px; margin-bottom: 14px; }
.usecase-tag  {
  padding: 3px 8px; border-radius: var(--r);
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.6875rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; flex-shrink: 0; align-self: flex-start; margin-top: 2px;
}
.usecase-tag--pos  { background: var(--pos); }
.usecase-tag--warn { background: var(--warn); }
.usecase-tag--neg  { background: var(--neg); }
.usecase-tag--neu  { background: var(--tx-3); }
.usecase-body  { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.usecase-title {
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.875rem;
  font-weight: 700; color: var(--tx-1);
}
.usecase-desc  {
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem;
  color: var(--tx-2); line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR UPSELL CARD
═══════════════════════════════════════════════════════════════ */
.sb-upsell      { background: var(--yellow) !important; border-color: rgba(0,0,0,0.08) !important; }
.sb-upsell-hd   { background: rgba(231,255,0,0.6) !important; border-color: rgba(0,0,0,0.08) !important; }
.sb-upsell-lbl  { color: #4A5200 !important; }
.sb-upsell-btn  {
  display: block; text-align: center;
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.9375rem;
  font-weight: 700; background: #4A5200; color: var(--yellow);
  padding: 10px; border-radius: var(--r); text-decoration: none;
  transition: opacity var(--t);
}
.sb-upsell-btn:hover { opacity: 0.88; }

/* ═══════════════════════════════════════════════════════════════
   INDEX — Section headings spacing
═══════════════════════════════════════════════════════════════ */
.section-eyebrow { margin-bottom: calc(var(--u) * 0.75); }
.section-h2      { margin-bottom: calc(var(--u)); }
.section-lead    { margin-bottom: calc(var(--u) * 4); max-width: 60ch; }
.section-lead--lg { margin-bottom: calc(var(--u) * 5); }

/* How-it-works card tags */
.how-card-tag--c02 { background: var(--a4); color: #fff; }
.how-card-tag--c03 { background: var(--a3); color: #fff; }
.how-card-tag--c04 { background: var(--a2); color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   C03 GRI VALUE + C04 TSI VALUE
═══════════════════════════════════════════════════════════════ */
.c03-gri-val,
.c04-tsi-val {
  font-family: 'Archivo Condensed', sans-serif;
  font-size: 2.5rem; font-weight: 700;
  color: var(--tx-1); line-height: 1; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR UPSELL TEXT
═══════════════════════════════════════════════════════════════ */
.sb-upsell-text {
  font-family: 'Archivo SemiCondensed', sans-serif;
  font-size: 0.9375rem; font-weight: 300;
  color: #4A5200; line-height: 1.6; margin-bottom: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR 4C NAV — Locked steps
═══════════════════════════════════════════════════════════════ */
.c4-step--locked { opacity: 0.45; }

/* ═══════════════════════════════════════════════════════════════
   INDEX — Section CTA center wrapper
═══════════════════════════════════════════════════════════════ */
.section-cta-center {
  text-align: center;
  margin-top: calc(var(--u) * 6);
}

/* ═══════════════════════════════════════════════════════════════
   TERM CREDITS / SOURCE LIST
   Blue dot list for authority corpus meta
═══════════════════════════════════════════════════════════════ */
.source-list  { display: flex; flex-direction: column; gap: 4px; margin-top: calc(var(--u) * 1.5); }
.source-item  { display: flex; align-items: baseline; gap: 8px; font-family: 'Archivo Narrow', sans-serif; font-size: 0.875rem; font-weight: 300; color: var(--tx-2); line-height: 1.5; }
.source-dot   { width: 6px; height: 6px; border-radius: 50%; background: var(--a4); flex-shrink: 0; margin-top: 0.35em; }

/* ═══════════════════════════════════════════════════════════════
   PLAN CARDS — Pricing page
═══════════════════════════════════════════════════════════════ */
.plan-card {
  background: var(--bg-card);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Featured / Pro card — CI Yellow highlight */
.plan-card--featured {
  background: var(--bg-glass-strong);
  border-color: rgba(180,195,0,0.30);
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(180,195,0,0.18);
}
.plan-hd {
  padding: calc(var(--u) * 2.5) calc(var(--u) * 2.5) calc(var(--u) * 2);
  border-bottom: 1px solid rgba(0,20,60,0.06);
  background: rgba(255,255,255,0.55);
}
.plan-card--featured .plan-hd {
  background: rgba(231,255,0,0.06);
  border-bottom-color: rgba(90,100,0,0.12);
}
.plan-badge {
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.6875rem;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tx-3); margin-bottom: calc(var(--u) * 0.75);
}
.plan-card--featured .plan-badge { color: var(--yellow-tx); }
.plan-name {
  font-family: 'Archivo Condensed', sans-serif; font-size: 1.75rem;
  font-weight: 700; color: var(--tx-1); line-height: 1; margin-bottom: calc(var(--u));
}
.plan-price-row { display: flex; align-items: baseline; gap: 4px; margin-bottom: calc(var(--u) * 1.5); }
.plan-num  { font-family: 'Archivo Condensed', sans-serif; font-size: 2.5rem; font-weight: 700; color: var(--tx-1); line-height: 1; }
.plan-num--sm { font-size: 1.75rem; }
.plan-per  { font-family: 'Archivo Narrow', sans-serif; font-size: 0.875rem; color: var(--tx-3); }
.plan-desc { font-family: 'Archivo Narrow', sans-serif; font-size: 0.875rem; font-weight: 300; color: var(--tx-2); line-height: 1.55; }
.plan-feats { padding: calc(var(--u) * 2) calc(var(--u) * 2.5); flex: 1; display: flex; flex-direction: column; gap: 6px; }
.plan-feat  { display: flex; align-items: baseline; gap: 8px; font-family: 'Archivo Narrow', sans-serif; font-size: 0.875rem; font-weight: 300; color: var(--tx-1); line-height: 1.45; }
.plan-feat-ok { font-weight: 700; color: var(--pos); flex-shrink: 0; }
.plan-feat-no { font-weight: 700; color: var(--tx-3); flex-shrink: 0; }
.plan-feat--dim { color: var(--tx-3); }
.plan-cta { padding: calc(var(--u) * 2) calc(var(--u) * 2.5) calc(var(--u) * 2.5); }

/* 4C explainer mini-cards (pricing page) */
.c-card       { overflow: hidden; }
.c-card-accent { height: 3px; }
.c-card-label { font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-3); margin-bottom: calc(var(--u)); }
.c-card-title { font-family: 'Archivo Condensed', sans-serif; font-size: 1.125rem; font-weight: 700; color: var(--tx-1); margin-bottom: calc(var(--u) * 0.75); }
.c-card-question { font-size: 0.875rem; font-style: italic; color: var(--tx-3); }

/* Pricing section divider */
.section-divider { border: none; border-top: 1px solid rgba(0,20,60,0.06); margin: calc(var(--u) * 8) 0 calc(var(--u) * 6); }

/* ═══════════════════════════════════════════════════════════════
   PRICING PAGE — Layout modifiers
═══════════════════════════════════════════════════════════════ */
.sec--flush-top   { padding-top: 0; }
.grid--top        { align-items: start; }

/* c-card accent bar colors — authority level driven */
.c-card-accent--l5 { background: var(--a5); }
.c-card-accent--l4 { background: var(--a4); }
.c-card-accent--l3 { background: var(--a3); }
.c-card-accent--l2 { background: var(--a2); }

/* ═══════════════════════════════════════════════════════════════
   KPI GUIDE PAGE — kpi-terminology.html
   These replace the inline <style> block on that page.
═══════════════════════════════════════════════════════════════ */
.kpi-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 3);
}
.kpi-guide-code {
  font-family: 'Archivo Condensed', sans-serif;
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-3);
}
.kpi-guide-name {
  font-family: 'Archivo SemiCondensed', sans-serif;
  font-size: 1.0625rem; font-weight: 500; color: var(--tx-1); line-height: 1.25;
}
.kpi-guide-desc {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.875rem; font-weight: 300; color: var(--tx-2); line-height: 1.65; flex: 1;
}
/* Bar row inside kpi-guide card — reuses .kpi-row + .kpi-bar system */
.kpi-guide-bar-row {
  display: flex; align-items: center; gap: calc(var(--u)); margin-top: auto;
}
.kpi-guide-bar-lbl {
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem;
  font-weight: 300; color: var(--tx-3); min-width: 32px;
}
.kpi-guide-bar-val {
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem;
  font-weight: 700; color: var(--tx-1); min-width: 28px; text-align: right;
}

/* Derived score grid — reuses .card system */
.derived-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 3);
}
.derived-badge {
  display: inline-block;
  font-family: 'Archivo Condensed', sans-serif;
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--data-dim); color: var(--data-tx);
  border: 1px solid var(--data-bdr); border-radius: var(--r);
  padding: 2px 8px; margin-bottom: calc(var(--u));
}
.derived-name {
  font-family: 'Archivo SemiCondensed', sans-serif;
  font-size: 1rem; font-weight: 600; color: var(--tx-1);
  margin-bottom: calc(var(--u) * 0.75);
}
.derived-desc {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.875rem; font-weight: 300; color: var(--tx-2); line-height: 1.65;
}

/* Signal legend strip */
.signal-legend {
  display: flex; gap: calc(var(--u) * 3); flex-wrap: wrap;
  margin-top: calc(var(--u) * 2); padding: calc(var(--u) * 2);
  background: var(--bg-card); border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}
.signal-item {
  display: flex; align-items: center; gap: calc(var(--u));
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.875rem; color: var(--tx-2);
}

/* Signal text — replaces inline style="color:var(--pos/neg/warn)" */
.signal-pos  { color: var(--pos);  font-weight: 500; }
.signal-warn { color: var(--warn); font-weight: 500; }
.signal-neg  { color: var(--neg);  font-weight: 500; }

/* dt-table — data table CI style */
.dt-table {
  width: 100%; border-collapse: collapse;
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.875rem;
}
.dt-table th {
  text-align: left; font-weight: 600; color: var(--tx-2);
  padding: calc(var(--u)) calc(var(--u) * 2); font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid rgba(0,20,60,0.08); background: rgba(0,20,60,0.02);
}
.dt-table td {
  padding: calc(var(--u)) calc(var(--u) * 2); color: var(--tx-2);
  border-bottom: 1px solid rgba(0,20,60,0.05); vertical-align: top; line-height: 1.45;
}
.dt-table tr:last-child td { border-bottom: none; }
.dt-table td strong { color: var(--tx-1); font-weight: 600; }

/* auth-level text colors (for tables/text, not chips) */
.auth-l1 { color: var(--a1); }
.auth-l2 { color: var(--a2); }
.auth-l3 { color: var(--a3); }
.auth-l4 { color: var(--a4); }
.auth-l5 { color: var(--a5); }

/* Utility: card top margin, card overflow clip for tables */
.card--mt           { margin-top: calc(var(--u) * 3); }
.card--overflow-hidden { overflow: hidden; }

/* Section padding variants */
.sec--pb-xl { padding-bottom: calc(var(--u) * 12); }

/* kpi-guide-card: flex column layout */
.kpi-guide-card { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }

/* ── Callout / Insight box ───────────────────────────────────── */
.callout {
  margin-top: calc(var(--u) * 4);
  padding: calc(var(--u) * 2) calc(var(--u) * 2.5);
  background: rgba(43,95,212,0.05);
  border-left: 3px solid var(--a5);
  border-radius: 0 var(--r) var(--r) 0;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.875rem; font-weight: 300;
  color: var(--tx-2); line-height: 1.65;
}

/* ── C01 Body — section labels + body text (reference spec) ── */
.sec-lbl { font-family: 'Archivo SemiCondensed', sans-serif; font-size: 1.5rem; font-weight: 500; color: #000; margin-bottom: 0.5rem; }
.body-text { font-family: 'Archivo SemiCondensed', sans-serif; font-size: 1.3125rem; font-weight: 300; color: rgba(0,0,0,0.68); line-height: 1.65; }
/* .card-rule defined above */
.ft-left { font-family: 'Archivo SemiCondensed', sans-serif; font-size: 1rem; font-weight: 300; color: rgba(0,0,0,0.50); }
.ft-bold { font-weight: 500; color: rgba(0,0,0,0.75); }
.ft-right { font-family: 'Archivo SemiCondensed', sans-serif; font-size: 1rem; font-weight: 300; color: rgba(0,0,0,0.35); }
.timm-chip { display: inline-flex; align-items: center; padding: 0.625rem 1.25rem; border-radius: var(--r); background: var(--a5); font-family: 'Archivo Condensed', sans-serif; font-size: 1.125rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: #F2F2F2; width: fit-content; box-shadow: var(--sh-sm); border: 1px solid var(--chip-l5-border); }
.timm-sub { font-family: 'Archivo SemiCondensed', sans-serif; font-size: 0.875rem; font-weight: 300; color: rgba(0,0,0,0.45); padding-left: 10px; }

/* ═══════════════════════════════════════════════════════════════
   REPORT PAGES — sidebar KPI bars, corpus card, placeholder cards
   (used in report-*.html pages)
═══════════════════════════════════════════════════════════════ */

/* Sidebar KPI mini-bars */
.sb-kpi { display: flex; align-items: center; gap: var(--u); }
.sb-kpi-lbl { font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem; font-weight: 400; color: var(--tx-2); min-width: 90px; }
.sb-kpi-bar-w { flex: 1; height: 4px; background: rgba(0,20,60,0.08); border-radius: 100px; overflow: hidden; }
.sb-kpi-bar-f { height: 100%; border-radius: 100px; }
.sb-kpi-val { font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem; font-weight: 700; color: var(--tx-1); min-width: 32px; text-align: right; }

/* Corpus card — shows source metadata below sidebar */
.corpus-card { background: var(--bg-card); backdrop-filter: blur(14px); border: 1px solid var(--border-card); border-radius: var(--r-card); box-shadow: var(--sh-sm); overflow: hidden; }
.corpus-hd { padding: calc(var(--u) * 1.5) calc(var(--u) * 2); border-bottom: 1px solid rgba(0,20,60,0.07); background: rgba(255,255,255,0.55); }
.corpus-bd { padding: calc(var(--u) * 1.5) calc(var(--u) * 2); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u)); }
.corpus-item-lbl { font-family: 'Archivo Narrow', sans-serif; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 2px; }
.corpus-item-val { font-family: 'Archivo Narrow', sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--tx-1); }
.corpus-item-sub { font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem; font-weight: 300; color: var(--tx-3); }

/* Placeholder cards (C03/C04 locked in report pages) */
.c-placeholder { background: var(--bg-card); backdrop-filter: blur(14px); border: 1px solid var(--border-card); border-radius: var(--r-card); box-shadow: var(--sh-sm); padding: calc(var(--u) * 2.5) calc(var(--u) * 3); display: flex; align-items: center; gap: calc(var(--u) * 2); }
.c-ph-num { font-family: 'Archivo Condensed', sans-serif; font-size: 2.5rem; font-weight: 300; color: var(--tx-3); line-height: 1; flex-shrink: 0; }
.c-ph-name { font-family: 'Archivo SemiCondensed', sans-serif; font-size: 1rem; font-weight: 500; color: var(--tx-2); margin-bottom: 3px; }

/* Two-col layout (AI Synthesis + TIMM col in C01) */
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; padding-top: 0.25rem; }
.timm-col { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }

/* Report card header inner classes (used in report pages) */
.h-left { display: flex; align-items: baseline; gap: 0.4rem; }
.h-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.h-comp { font-family: 'Archivo Condensed', sans-serif; font-size: 1.5rem; font-weight: 300; color: rgba(0,0,0,0.50); letter-spacing: -0.01em; line-height: 1; }
.h-term { font-family: 'Archivo Condensed', sans-serif; font-size: 1.5rem; font-weight: 700; color: #000; letter-spacing: -0.01em; line-height: 1; }

/* card-clip: border-radius clip for inner elements */
.card-clip { border-radius: var(--r-card); overflow: hidden; }

/* .hr divider inside card body */
.hr { height: 1px; background: rgba(0,0,0,0.09); margin: 1.5rem 0; }

/* Legacy ctx-wrap aliases — report pages still use these class names */
.ctx-wrap { position: relative; }
.ctx-btn { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.5px; width: 48px; height: 48px; transition: background 0.15s; }
.ctx-btn span { display: block; width: 4px; height: 4px; border-radius: 50%; background: #000; opacity: 0.45; transition: opacity 0.15s; }
.ctx-btn:hover { background: rgba(0,0,0,0.05); }
.ctx-btn:hover span { opacity: 0.80; }
.ctx-dd { display: none; position: absolute; top: calc(100% + 4px); right: 0; width: max-content; background: #fff; border: 1px solid rgba(0,0,0,0.10); border-radius: 10px; overflow: hidden; z-index: 1000; padding: 4px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 16px 40px rgba(0,0,0,0.12); }
.ctx-wrap.open .ctx-dd { display: block; }
.ctx-it { display: flex; align-items: center; gap: 0.75rem; width: 100%; background: none; border: none; min-height: 48px; padding: 8px 12px; white-space: nowrap; font-family: 'Archivo SemiCondensed', sans-serif; font-size: 1.3125rem; font-weight: 400; color: rgba(0,0,0,0.75); cursor: pointer; text-align: left; transition: background 0.12s; }
.ctx-it:hover { background: #F0F0F0; color: #000; }
.ctx-it .material-symbols-outlined { font-size: 1.375rem; color: rgba(0,0,0,0.45); flex-shrink: 0; }
.ctx-it:hover .material-symbols-outlined { color: rgba(0,0,0,0.70); }
.ctx-sep-ln { height: 1px; background: rgba(0,0,0,0.07); margin: 2px 0; }

/* ctx open/close JS toggle for report pages */
.ctx-wrap .ctx-btn { position: relative; }

/* c02-mod-title (used in report pages) = same as card-module-label */
.c02-mod-title { font-family: 'Archivo SemiCondensed', sans-serif; font-size: 1.5rem; font-weight: 500; color: #000; margin-bottom: calc(var(--u)); }

/* c4-step-desc visible in sidebar */
.c4-step-desc { font-family: 'Archivo Narrow', sans-serif; font-size: 0.6875rem; font-weight: 300; color: var(--tx-3); margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════
   INDEX — Hero, Search, Terms grid, How-It-Works
═══════════════════════════════════════════════════════════════ */
.hero {
  min-height: calc(100svh - 52px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: calc(var(--u)*10) 0 calc(var(--u)*8);
  text-align: center;
}
.hero-eyebrow {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tx-3); margin-bottom: calc(var(--u)*3);
}
.hero-title {
  font-family: 'Archivo Condensed', sans-serif;
  font-size: clamp(3.8rem,10vw,9rem);
  font-weight: 700; line-height: 0.92;
  letter-spacing: -0.025em; color: var(--tx-1);
  margin-bottom: calc(var(--u)*2);
}
.hero-sub {
  font-family: 'Archivo SemiCondensed', sans-serif;
  font-size: clamp(0.9375rem,1.8vw,1.1875rem);
  font-weight: 300; color: var(--tx-3);
  letter-spacing: 0.01em; line-height: 1.55;
  margin-bottom: calc(var(--u)*7); max-width: 48ch;
}
.search-block { width: 100%; max-width: 560px; margin: 0 auto; }
.search-wrap { display: flex; flex-direction: row; align-items: center; gap: calc(var(--u)); }
.search-field {
  flex: 1; height: 50px;
  background: var(--bg-glass-field);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r); border: 1px solid var(--border-field);
  box-shadow: var(--sh-md);
  display: flex; align-items: center;
  padding: 0 calc(var(--u)*1.5); gap: calc(var(--u));
  transition: box-shadow var(--t), border-color var(--t);
}
.search-field:focus-within {
  box-shadow: var(--sh-lg), 0 0 0 2px rgba(200,184,0,0.28);
  border-color: rgba(200,184,0,0.45);
}
.search-icon { color: var(--tx-3); flex-shrink: 0; }
.search-field input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: 'Archivo', sans-serif; font-size: 0.9375rem; font-weight: 300;
  color: var(--tx-1); caret-color: var(--yellow-tx);
  min-width: 0; height: 48px;
}
.search-field input::placeholder { color: var(--tx-3); }
.search-btn {
  height: 50px; padding: 0 calc(var(--u)*3);
  flex-shrink: 0;
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem;
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--yellow); color: var(--yellow-tx);
  border: none; border-radius: var(--r);
  box-shadow: var(--sh-sm); cursor: pointer;
  transition: box-shadow var(--t), transform var(--t), opacity var(--t);
}
.search-btn:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
.search-btn.loading { opacity: 0.55; pointer-events: none; }
.terms-section { padding: calc(var(--u)*10) 0 calc(var(--u)*12); border-top: 1px solid rgba(0,20,60,0.06); }
.terms-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: calc(var(--u)*2.5); }
.how-section { padding: calc(var(--u)*10) 0 calc(var(--u)*12); border-top: 1px solid rgba(0,20,60,0.06); }
.how-steps { display: flex; flex-direction: column; gap: 0; position: relative; }
.how-steps::before { content: ''; position: absolute; left: 28px; top: 0; bottom: 0; width: 1px; background: rgba(0,20,60,0.07); pointer-events: none; }
.how-step { display: grid; grid-template-columns: 56px 1fr; gap: calc(var(--u)*2.5); padding: calc(var(--u)*3) 0; position: relative; }
.how-step-num { font-family: 'Archivo Condensed', sans-serif; font-size: 1.75rem; font-weight: 700; color: rgba(0,20,60,0.14); line-height: 1; letter-spacing: -0.03em; display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; flex-shrink: 0; position: relative; z-index: 1; }
.how-card-tag { font-family: 'Archivo Condensed', sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; width: 40px; height: 40px; border-radius: var(--r); background: var(--a5); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--sh-sm); position: relative; z-index: 1; align-self: flex-start; }
.how-step-card { background: var(--bg-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-card); border-radius: var(--r-card); box-shadow: var(--sh-sm); padding: calc(var(--u)*2.5); }
.how-step-content { display: flex; flex-direction: column; gap: calc(var(--u)*0.75); }
.how-step-label { font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx-3); }
.how-step-title { font-family: 'Archivo Condensed', sans-serif; font-size: 1.25rem; font-weight: 600; color: var(--tx-1); line-height: 1.12; }
.how-step-body { font-size: 0.9375rem; font-weight: 300; color: var(--tx-2); line-height: 1.65; }
.how-cta { display: inline-flex; align-items: center; font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a4); margin-top: calc(var(--u)*0.5); transition: color var(--t); }
.how-cta:hover { color: var(--a5); }

/* ═══════════════════════════════════════════════════════════════
   GLOSSARY — KPI reference accordion cards
═══════════════════════════════════════════════════════════════ */
.gls-card { background: var(--bg-card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border-card); border-radius: var(--r-card); box-shadow: var(--sh-sm); overflow: hidden; margin-bottom: calc(var(--u)*1.5); }
.gls-hd { background: #ffffff; border-bottom: 1px solid rgba(0,20,60,0.08); min-height: 52px; padding: 0 calc(var(--u)*2.5); display: flex; align-items: center; gap: calc(var(--u)*2); cursor: pointer; user-select: none; transition: background var(--t); }
.gls-hd:hover { background: rgba(255,255,255,0.88); }
.gls-hd-l { display: flex; align-items: center; gap: calc(var(--u)*2); flex: 1; min-width: 0; }
.gls-abbr { font-family: 'Archivo Narrow', sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx-3); min-width: 40px; flex-shrink: 0; }
.gls-name { font-family: 'Archivo Condensed', sans-serif; font-size: 1.125rem; font-weight: 600; color: var(--tx-1); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gls-hd-r { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.gls-toggle { font-size: 1.25rem; line-height: 1; color: var(--tx-3); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; transition: transform 0.22s ease; flex-shrink: 0; margin-left: 2px; }
.gls-toggle.open { transform: rotate(45deg); }
.gls-body { display: none; padding: calc(var(--u)*2.5) calc(var(--u)*2.5) calc(var(--u)*3); background: rgba(255,255,255,0.28); border-top: 1px solid rgba(0,20,60,0.05); }
.gls-body.open { display: block; }
.gls-def { font-size: 1rem; font-weight: 300; color: var(--tx-2); line-height: 1.72; margin-bottom: calc(var(--u)*2.5); }
.gls-def strong { font-weight: 500; color: var(--tx-1); }
.gls-syns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: calc(var(--u)*2.5); }
.gls-syn { font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem; letter-spacing: 0.06em; padding: 3px 9px; border-radius: var(--r); background: rgba(0,20,60,0.05); color: var(--tx-3); border: 1px solid rgba(0,20,60,0.10); }
.gls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u)*2); margin-bottom: calc(var(--u)*2.5); }
.gls-body-title { font-family: 'Archivo Condensed', sans-serif; font-size: 1.25rem; font-weight: 600; color: var(--tx-1); line-height: 1.1; margin-bottom: calc(var(--u)*2); padding-bottom: calc(var(--u)); border-bottom: 1px solid var(--ci-black-24); }
.gls-blk { background: rgba(255,255,255,0.55); border: 1px solid rgba(0,20,60,0.07); border-radius: var(--r); padding: calc(var(--u)*1.75) calc(var(--u)*2); }
.gls-blk-lbl { display: block; font-family: 'Archivo Narrow', sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-3); margin-bottom: calc(var(--u)); }
.gls-blk-body { font-size: 0.875rem; font-weight: 300; color: var(--tx-2); line-height: 1.65; }
.gls-blk-body strong { font-weight: 500; color: var(--tx-1); }
.gls-formula { background: rgba(0,20,60,0.03); border: 1px solid rgba(0,20,60,0.09); border-left: 3px solid rgba(0,20,60,0.15); border-radius: 0 var(--r) var(--r) 0; padding: calc(var(--u)*1.75) calc(var(--u)*2); font-family: 'Archivo Narrow', sans-serif; font-size: 0.875rem; font-weight: 400; color: var(--tx-1); line-height: 1.85; margin-bottom: calc(var(--u)*2.5); white-space: pre-wrap; }
.gls-states { display: flex; flex-wrap: wrap; gap: 6px; margin-top: calc(var(--u)); }
.gls-state { font-family: 'Archivo Narrow', sans-serif; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; }
.gls-insight { background: rgba(231,255,0,0.07); border-left: 2px solid #8A9800; border-radius: 0 var(--r) var(--r) 0; padding: calc(var(--u)*1.25) calc(var(--u)*2); font-size: 0.9375rem; font-weight: 300; color: var(--tx-2); line-height: 1.68; margin-top: calc(var(--u)*2); }
.gls-insight strong { font-weight: 500; color: var(--tx-1); }
.lvl-row { display: flex; align-items: flex-start; gap: 10px; padding: calc(var(--u)*0.875) 0; border-bottom: 1px solid rgba(0,20,60,0.05); font-size: 0.875rem; }
.lvl-row:last-child { border-bottom: none; }
.lvl-badge { font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; margin-top: 1px; }
.lvl-txt { color: var(--tx-2); line-height: 1.55; }
.lvl-txt strong { font-weight: 500; color: var(--tx-1); }
.gls-section { margin-bottom: calc(var(--u)*6); }
.gls-card[data-accent="a5"] .gls-hd { border-top: 2px solid var(--a5); }
.gls-card[data-accent="a4"] .gls-hd { border-top: 2px solid var(--a4); }
.gls-card[data-accent="a3"] .gls-hd { border-top: 2px solid var(--a3); }
.gls-card[data-accent="a2"] .gls-hd { border-top: 2px solid var(--a2); }
.gls-card[data-accent="a1"] .gls-hd { border-top: 2px solid var(--a1); }
.gls-card[data-accent="neg"] .gls-hd { border-top: 2px solid var(--neg); }
.gls-card[data-accent="warn"] .gls-hd { border-top: 2px solid var(--warn); }

/* ═══════════════════════════════════════════════════════════════
   FORM PAGES — login, signup, checkout, account, cancel, success
   Centered narrow-column layout pattern
═══════════════════════════════════════════════════════════════ */
.page-narrow { width: 100%; max-width: 400px; }
.page-narrow--md { width: 100%; max-width: 540px; }
.col-center { display: flex; justify-content: center; }
.text-center { text-align: center; }
.sec--flush { padding-top: 0; }
.mt-1 { margin-top: calc(var(--u)); }
.mt-2 { margin-top: calc(var(--u)*2); }
.mb-3 { margin-bottom: calc(var(--u)*3); }
.mb-4 { margin-bottom: calc(var(--u)*4); }
.flex-col-2 { display: flex; flex-direction: column; gap: calc(var(--u)*2); }
.flex-col-3 { display: flex; flex-direction: column; gap: calc(var(--u)*3); }
.card-row { display: flex; justify-content: space-between; padding: calc(var(--u)) 0; border-bottom: 1px solid rgba(0,20,60,0.06); }
.card-row:last-child { border-bottom: none; }

/* Form text helpers */
.form-hint { font-size: 0.9375rem; font-weight: 300; color: var(--tx-3); text-align: center; }
.form-hint a { color: var(--a4); font-weight: 400; }
.form-hint--sm { font-size: 0.8125rem; font-weight: 300; color: var(--tx-3); text-align: center; margin-top: calc(var(--u)*1.5); }
.form-hint--italic { font-size: 0.8125rem; color: var(--tx-3); margin-top: calc(var(--u)*1.5); font-style: italic; }

/* Text with icon row */
.icon-row { display: flex; align-items: center; gap: 12px; }

/* Success / empty state centered content */
.state-icon { font-size: 3rem; margin-bottom: calc(var(--u)*3); }
.state-max { max-width: 420px; }

/* Legal / content pages */
.legal-section { margin-bottom: calc(var(--u)*7); scroll-margin-top: 80px; }
.legal-section h2 { margin-bottom: calc(var(--u)*3); }
.legal-tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: calc(var(--u)*2); }

/* About page */
.about-lead-card { border-left: 3px solid var(--a4); margin-bottom: calc(var(--u)*5); }

/* Section eyebrow label (used across many pages) */
.sec-eyebrow { font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-3); }
.sec-eyebrow--sm { font-family: 'Archivo Narrow', sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-3); }

/* Inline text variants */
.txt-muted { color: var(--tx-3); }
.txt-body { color: var(--tx-2); }
.txt-primary { color: var(--tx-1); }
.txt-warn { color: var(--neg); font-weight: 500; }
.txt-link { color: var(--a4); font-weight: 400; }
.txt-500 { font-weight: 500; color: var(--tx-1); }
.txt-600 { font-weight: 600; color: var(--tx-1); }

/* Checkout/order summary */
.order-row { display: flex; justify-content: space-between; padding: calc(var(--u)*1.5) 0; border-bottom: 1px solid rgba(0,20,60,0.06); }
.order-row:last-child { border-bottom: none; }
.order-label { font-size: 0.9375rem; color: var(--tx-2); }
.order-value { font-weight: 500; color: var(--tx-1); }

/* Report.html c02-seg colors — must not be inline */
.seg-l5 { background: var(--a5); }
.seg-l4 { background: var(--a4); }
.seg-l3 { background: var(--a3); }
.seg-l2 { background: var(--a2); }
.seg-l1 { background: var(--a1); }

/* ── Missing glossary/shared classes ───────────────────────────── */
.section-intro { font-size: 0.9375rem; font-weight: 300; color: var(--tx-3); margin-bottom: calc(var(--u)*3); max-width: 600px; line-height: 1.65; }
.mb-2h { margin-bottom: calc(var(--u)*2.5); }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: calc(var(--u)*3); }
.flex-row-icon { display: flex; align-items: center; gap: 5px; }
.gls-abbr--dim { opacity: 0.3; }
.gls-state--pos  { background: rgba(23,168,78,0.10);  color: #17A84E; border: 1px solid rgba(23,168,78,0.22); }
.gls-state--warn { background: rgba(196,120,0,0.10);  color: #C47800; border: 1px solid rgba(196,120,0,0.22); }
.gls-state--neg  { background: rgba(212,32,32,0.10);  color: #D42020; border: 1px solid rgba(212,32,32,0.22); }
.gls-state--neu  { background: rgba(138,150,168,0.15); color: #5A6678; border: 1px solid rgba(138,150,168,0.25); }
.gls-state--yel  { background: rgba(231,255,0,0.20);  color: #5A6200; border: 1px solid rgba(90,100,0,0.25); }
.gls-state--a2   { background: rgba(61,184,122,0.10);  color: var(--a2); border: 1px solid rgba(61,184,122,0.22); }
.gls-state--a3   { background: rgba(23,168,158,0.10);  color: var(--a3); border: 1px solid rgba(23,168,158,0.22); }
.gls-state--a4   { background: rgba(42,154,232,0.10);  color: var(--a4); border: 1px solid rgba(42,154,232,0.22); }
.gls-state--a5   { background: rgba(43,95,212,0.10);   color: var(--a5); border: 1px solid rgba(43,95,212,0.22); }
.gls-blk--a4 { border-top: 2px solid var(--a4); }
.gls-blk--a5 { border-top: 2px solid var(--a5); }
.gls-blk-lbl--a4 { color: var(--a4); }
.gls-blk-lbl--a5 { color: var(--a5); }
.lvl-badge--a1 { background: rgba(106,170,48,0.10);   color: var(--a1); }
.lvl-badge--a2 { background: rgba(61,184,122,0.10);   color: var(--a2); }
.lvl-badge--a3 { background: rgba(23,168,158,0.10);   color: var(--a3); }
.lvl-badge--a4 { background: rgba(42,154,232,0.10);   color: var(--a4); }
.lvl-badge--neu { background: rgba(0,20,60,0.06);     color: var(--tx-2); }
.c4-abbr--a1 { color: var(--a1); }
.c4-abbr--a2 { color: var(--a2); }
.c4-abbr--a3 { color: var(--a3); }
.c4-abbr--a4 { color: var(--a4); }
.c4-abbr--a5 { color: var(--a5); }
.sec-lg { padding: calc(var(--u)*12) 0; }
.sec-title { font-family: 'Archivo Condensed', sans-serif; font-size: 1.875rem; font-weight: 700; color: var(--tx-1); line-height: 1.1; margin-bottom: calc(var(--u)*3); }
.card-h3 { font-family: 'Archivo Condensed', sans-serif; font-size: 1.125rem; font-weight: 600; color: var(--tx-1); margin-bottom: calc(var(--u)*1.5); }
.legal-blk { display: flex; flex-direction: column; gap: calc(var(--u)*1.5); }
.info-label { color: var(--tx-3); margin-bottom: 2px; }
.card-grid-56 { display: grid; grid-template-columns: 56px 1fr; gap: calc(var(--u)*2.5); align-items: center; }
.card-grid-80 { display: grid; grid-template-columns: 80px 1fr; gap: calc(var(--u)*2.5); align-items: start; }
.card-icon-col { display: flex; flex-direction: column; align-items: center; }
.card-icon-col--top { text-align: center; padding-top: 2px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.card--glass-light { background: rgba(255,255,255,0.55); }
.leg-dot--a4 { background: var(--a4); }
.leg-dot--a2 { background: var(--a2); }
.mt-075 { margin-top: 0.75rem; }
.c4-step--dim { opacity: 0.45; }
.ph-locked { position: relative; overflow: hidden; min-height: 76px; }
.ph-lock-overlay { position: absolute; inset: 0; backdrop-filter: blur(3px); background: rgba(240,244,251,0.65); display: flex; align-items: center; justify-content: center; gap: 20px; z-index: 2; padding: 16px 24px; }
.ph-ghost { opacity: 0.12; pointer-events: none; display: flex; align-items: center; gap: 24px; padding: 20px 24px; }
.icon-lg { font-size: 1.25rem; }
.sb-action { font-family: 'Archivo Narrow', sans-serif; font-size: 0.875rem; color: #3A4A60; cursor: pointer; padding: 3px 0; }
.sb-meta { font-family: 'Archivo Narrow', sans-serif; font-size: 0.875rem; color: #7A8898; }
.sb-meta--link { font-family: 'Archivo Narrow', sans-serif; font-size: 0.875rem; color: #7A8898; cursor: pointer; padding: 3px 0; }
.rpt-h3 { font-family: 'Archivo Condensed', sans-serif; font-size: 1.125rem; font-weight: 600; color: #1A2030; }
.rpt-meta { font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem; color: var(--tx-2); }
.txt-ghost { color: rgba(255,255,255,0.18); }
.rpt-cta { font-family: 'Archivo Narrow', sans-serif; font-size: 0.875rem; font-weight: 700; background: #E7FF00; color: #4A5200; padding: 7px 16px; border-radius: 6px; text-decoration: none; white-space: nowrap; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   REPORT PAGES — classes from backup, JS-generated, and derived
   Migrated from inline <style> blocks (R4 de-inlining completion)
═══════════════════════════════════════════════════════════════ */

/* C02 module padding variants */
.c02-mod-slider { padding-left: 0; }
.c02-mod-bars   { padding-right: 0; }

/* Spider SVG text labels */
.spider-lbl { font-family: 'Archivo Narrow', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--tx-3); }
.spider-tsi-lbl { font-family: 'Archivo Condensed', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; fill: rgba(0,0,0,0.38); }

/* chip-l5 (report-*.html old chip variant) */
.chip-l5 { display: inline-flex; align-items: center; padding: 0.375rem 0.9rem; border-radius: var(--r); background: var(--a5); font-family: 'Archivo Condensed', sans-serif; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.06em; color: #fff; }
.chip-dom { background: var(--ci-black-24); color: var(--ci-black-74); border: 1px solid var(--cold-light); font-family: 'Archivo Narrow', sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-radius: var(--r); padding: 2px 7px; }


/* ── TILE CARD (report-*.html JS-generated term cards) ── */
.tile { background: var(--bg-card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border-card); border-radius: var(--r-card); box-shadow: var(--sh-sm); overflow: hidden; cursor: pointer; transition: box-shadow var(--t), transform var(--t); display: flex; flex-direction: column; }
.tile:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
.tile-header { background: #ffffff; border-bottom: 1px solid rgba(0,20,60,0.08); padding: 0 calc(var(--u)*2.5); min-height: 52px; display: flex; align-items: center; gap: calc(var(--u)*1.5); position: relative; }
.tile-term-name { font-family: 'Archivo Condensed', sans-serif; font-size: 1.125rem; font-weight: 700; color: var(--tx-1); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-chips-row { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tile-ctx-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 32px; height: 32px; cursor: pointer; color: var(--tx-3); border-radius: var(--r); transition: background var(--t); flex-shrink: 0; }
.tile-ctx-btn:hover { background: rgba(0,20,60,0.06); color: var(--tx-1); }
.tile-body { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u)*2.5); padding: calc(var(--u)*2) calc(var(--u)*2.5) calc(var(--u)*2.5); flex: 1; }
.tile-summary { font-size: 0.875rem; font-weight: 300; color: var(--tx-2); line-height: 1.65; margin-bottom: calc(var(--u)); }
.tile-synthesis { display: flex; flex-direction: column; gap: calc(var(--u)); }
.tile-module-label { font-family: 'Archivo Narrow', sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-3); margin-bottom: calc(var(--u)); }
.tile-kpi-section { display: flex; flex-direction: column; gap: calc(var(--u)*0.75); }
.tile-cta-row { margin-top: auto; padding-top: calc(var(--u)); }
.tile-cta { display: inline-flex; align-items: center; font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--a4); text-decoration: none; transition: color var(--t); }
.tile-cta:hover { color: var(--a5); }
.tile-footer { background: rgba(255,255,255,0.55); border-top: 1px solid rgba(0,20,60,0.06); padding: calc(var(--u)*1.25) calc(var(--u)*2.5); display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u)); }
.tile-ft-left { font-size: 0.8125rem; font-weight: 300; color: var(--tx-3); }
.tile-ft-right { font-size: 0.8125rem; font-weight: 300; color: var(--tx-3); flex-shrink: 0; }

/* ── REPORT.HTML — authority slider (unprefixed) ── */
.slider-area { display: flex; align-items: stretch; }
.slider-lvlabels { display: grid; grid-template-rows: repeat(5, 1fr); height: 220px; }
.slider-lvlbl { display: flex; align-items: center; justify-content: flex-end; font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem; font-weight: 600; color: var(--tx-3); line-height: 1; cursor: pointer; padding-right: 8px; transition: color var(--t); user-select: none; }
.slider-lvlbl.active { color: var(--tx-1); font-weight: 700; }
.slider-track-col { position: relative; width: 44px; }
.slider-track { position: absolute; left: 50%; transform: translateX(-50%); width: 14px; height: 100%; border-radius: 7px; overflow: hidden; display: flex; flex-direction: column; background: rgba(0,20,60,0.08); }
.slider-seg { flex: 1; width: 100%; opacity: 0.25; transition: opacity 0.15s ease; }
.slider-seg.active { opacity: 1; }
.slider-handle { position: absolute; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; background: #fff; border-radius: 50%; border: none; box-shadow: 0 0 0 2px rgba(0,20,60,0.12), 0 0 14px rgba(42,154,232,0.40); cursor: ns-resize; z-index: 2; transition: box-shadow var(--t), transform var(--t); }
.slider-handle:hover { box-shadow: 0 0 0 2px rgba(42,154,232,0.45), 0 0 18px rgba(42,154,232,0.70); transform: translateX(-50%) scale(1.12); }

/* ── REPORT.HTML — KPI circles ── */
.kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); align-items: stretch; margin-top: 0.75rem; }
.kpi-cell { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; padding: 0.5rem 0.5rem 0.75rem; }
.kpi-cell-lbl { font-family: 'Archivo SemiCondensed', sans-serif; font-size: 1rem; font-weight: 400; color: rgba(0,0,0,0.55); text-align: center; }
.kpi-circle { position: relative; width: clamp(72px, 13vw, 125px); height: clamp(72px, 13vw, 125px); flex-shrink: 0; }
.kpi-circle svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kpi-circle-inner { position: absolute; inset: 0; }
.kpi-csup { position: absolute; left: 0; right: 0; top: 18%; text-align: center; font-family: 'Archivo Condensed', sans-serif; font-size: clamp(0.5rem, 1.1vw, 0.9375rem); font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tx-3); line-height: 1; }
.kpi-cval { position: absolute; left: 0; right: 0; top: 37%; transform: translateY(-50%); text-align: center; font-family: 'Archivo Condensed', sans-serif; font-size: clamp(1.25rem, 2.6vw, 2.5rem); font-weight: 700; color: var(--tx-1); line-height: 1; letter-spacing: 0.04em; }
.kpi-csub { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; font-family: 'Archivo Condensed', sans-serif; font-size: clamp(0.5rem, 1.1vw, 0.9375rem); font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tx-3); line-height: 1; }
.kpi-div-col { position: relative; grid-column: 4; }
.kpi-div-col::before { content: ''; position: absolute; left: 50%; top: 0.75rem; bottom: 0.75rem; width: 1px; background: var(--divider, rgba(0,0,0,0.09)); transform: translateX(-50%); }

/* ── REPORT.HTML — TIMM badge ── */
.timm-badge { display: inline-flex; align-items: center; gap: 8px; padding: 0.625rem 1.25rem; border-radius: var(--r); background: var(--a5); font-family: 'Archivo Condensed', sans-serif; font-size: 1.125rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: #F2F2F2; width: fit-content; box-shadow: var(--sh-sm); border: 1px solid var(--chip-l5-border); }
.timm-badge-led { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── REPORT.HTML — locked pro cards ── */
.locked-wrap { position: relative; border-radius: var(--r-card); overflow: hidden; }
.locked-blur { pointer-events: none; opacity: 0.25; filter: blur(2px); }
.lock-ghost { display: flex; align-items: center; gap: calc(var(--u)*3); padding: calc(var(--u)*3) calc(var(--u)*3); background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--r-card); min-height: 120px; }
.lock-ghost-num { font-family: 'Archivo Condensed', sans-serif; font-size: 4rem; font-weight: 300; color: var(--tx-3); line-height: 1; flex-shrink: 0; }
.lock-ghost-name { font-family: 'Archivo SemiCondensed', sans-serif; font-size: 1.25rem; font-weight: 500; color: var(--tx-2); }
.locked-overlay { position: absolute; inset: 0; backdrop-filter: blur(4px); background: rgba(240,244,251,0.72); display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u)*2.5) calc(var(--u)*3); gap: calc(var(--u)*2); border-radius: var(--r-card); border: 1px solid var(--border-card); }
.lock-icon { font-size: 1.5rem; flex-shrink: 0; }
.lock-title { font-family: 'Archivo Condensed', sans-serif; font-size: 1.125rem; font-weight: 700; color: var(--tx-1); margin-bottom: 2px; }
.lock-desc { font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem; font-weight: 400; color: var(--tx-3); }

/* ── SIDEBAR KPI bars (report.html JS-generated) ── */
.sb-kpi-row { display: flex; align-items: center; gap: var(--u); }
.sb-kpi-bar { flex: 1; height: 4px; background: rgba(0,20,60,0.08); border-radius: 100px; overflow: hidden; }
.sb-kpi-fill { height: 100%; border-radius: 100px; background: var(--tx-2); transition: width 0.35s ease; }

/* ── BASE SHARED (form, text, layout — used across login/signup/legal) ── */
.form-group { display: flex; flex-direction: column; gap: calc(var(--u)*0.75); margin-bottom: calc(var(--u)*2); }
.form-label { font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--tx-3); }
.form-input { height: 44px; background: var(--bg-glass-field, rgba(255,255,255,0.72)); border: 1px solid var(--border-field, rgba(0,20,60,0.14)); border-radius: var(--r); padding: 0 calc(var(--u)*1.5); font-family: 'Archivo', sans-serif; font-size: 0.9375rem; font-weight: 300; color: var(--tx-1); outline: none; transition: border-color var(--t), box-shadow var(--t); width: 100%; }
.form-input:focus { border-color: rgba(42,154,232,0.5); box-shadow: 0 0 0 3px rgba(42,154,232,0.12); }
.form-divider { display: flex; align-items: center; gap: calc(var(--u)*1.5); font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.10em; text-transform: uppercase; color: var(--tx-3); margin: calc(var(--u)*1.5) 0; }
.form-divider::before, .form-divider::after { content: ''; flex: 1; height: 1px; background: rgba(0,20,60,0.08); }
.h2 { font-family: 'Archivo Condensed', sans-serif; font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; color: var(--tx-1); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: calc(var(--u)*2); }
.h3 { font-family: 'Archivo Condensed', sans-serif; font-size: 1.375rem; font-weight: 700; color: var(--tx-1); line-height: 1.15; margin-bottom: calc(var(--u)*1.5); }
.sec-lead { font-size: 1rem; font-weight: 300; color: var(--tx-2); line-height: 1.72; margin-bottom: calc(var(--u)*4); max-width: 680px; }
.wrap-text { max-width: 680px; margin: 0 auto; padding: 0 calc(var(--u)*2); }
.card-footer-right { display: flex; align-items: center; gap: calc(var(--u)); flex-shrink: 0; }
.clickable { cursor: pointer; }
.dt-card-module-title { font-family: 'Archivo Narrow', sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-3); margin-bottom: calc(var(--u)); }
.leg-dot { display: inline-block; width: 10px; height: 2px; border-radius: 1px; flex-shrink: 0; background: var(--tx-3); }
.leg-lbl { font-family: 'Archivo Narrow', sans-serif; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tx-2); }

/* .eyebrow — admin page section labels (same as page-eyebrow styling) */
.eyebrow { font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx-3); }

/* .spider-svg — report.html standalone spider (vs .c02-spider-svg) */
.spider-svg { width: 100%; height: auto; display: block; overflow: hidden; }
/* .spider-axis-lbl defined above */

.footer-sep { color: rgba(255,255,255,0.18); }

/* ═══════════════════════════════════════════════════════════════
   ADMIN PAGE — layout, tiles, modals, led-level variants
═══════════════════════════════════════════════════════════════ */
.card-strong{
  background:var(--glass-strong);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--border-field);
  border-radius:var(--r-card);box-shadow:var(--sh-md);
}
.tile-stripe{
  height:5px;width:100%;flex-shrink:0;display:block;
}
.tile-head{
  padding:calc(var(--u)*2) calc(var(--u)*2) calc(var(--u)*1.5);
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:calc(var(--u));
  background:rgba(255,255,255,0.45);
  border-bottom:1px solid rgba(0,20,60,0.07);
  flex-shrink:0;
}
.tile-head-left{
  display:flex;flex-direction:column;gap:6px;
  flex:1;min-width:0;
}
.tile-sources-row{
  font-family:'Archivo Narrow',sans-serif;
  font-size:0.75rem;font-weight:300;
  color:var(--tx-3);letter-spacing:0.04em;
}
.tile-chips-col{
  display:flex;flex-direction:column;
  align-items:flex-end;gap:5px;flex-shrink:0;
}
.tile-auth-label{
  font-family:'Archivo Narrow',sans-serif;
  font-size:0.75rem;font-weight:300;
  color:var(--tx-3);letter-spacing:0.06em;
  text-align:right;
}
.led-a5{background:var(--a5);box-shadow:0 0 4px 1px rgba(43,95,212,0.60);}
.led-a4{background:var(--a4);box-shadow:0 0 4px 1px rgba(42,154,232,0.55);}
.led-a3{background:var(--a3);box-shadow:0 0 4px 1px rgba(23,168,158,0.55);}
.led-a2{background:var(--a2);box-shadow:0 0 4px 1px rgba(61,184,122,0.55);}
.led-a1{background:var(--a1);box-shadow:0 0 4px 1px rgba(106,170,48,0.50);}
.tile-foot{
  padding:calc(var(--u)*1.25) calc(var(--u)*2);
  display:flex;align-items:center;justify-content:space-between;
  gap:calc(var(--u));flex-wrap:wrap;
  flex-shrink:0;
  border-top:1px solid rgba(0,20,60,0.07);
  background:rgba(255,255,255,0.30);
}
.tile-corpus{
  font-family:'Archivo Narrow',sans-serif;font-size:0.75rem;
  font-weight:300;color:var(--tx-3);
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.admin-page{padding:calc(var(--u)*3) 0 calc(var(--u)*8);}
.admin-layout{display:grid;grid-template-columns:220px 1fr;gap:calc(var(--u)*3);align-items:start;}
.admin-nav{position:sticky;top:calc(var(--u)*8);}
.admin-nav-item{display:flex;align-items:center;gap:calc(var(--u));font-family:"Archivo Narrow",sans-serif;font-size:0.875rem;font-weight:400;letter-spacing:0.06em;text-transform:uppercase;color:var(--tx-3);padding:calc(var(--u)*0.875) calc(var(--u)*1.25);border-radius:var(--r);cursor:pointer;transition:background var(--t),color var(--t);margin-bottom:2px;background:none;border:none;width:100%;text-align:left;}
.admin-nav-item:hover{background:rgba(255,255,255,0.25);color:var(--tx-2);}
.admin-nav-item.active{background:rgba(231,255,0,0.10);color:var(--yellow-tx);font-weight:500;}
.admin-panel{display:none;}
.admin-panel.active{display:block;}
.admin-table{width:100%;border-collapse:collapse;}
.admin-table th{font-family:"Archivo Narrow",sans-serif;font-size:0.75rem;font-weight:400;letter-spacing:0.12em;text-transform:uppercase;color:var(--tx-3);padding:calc(var(--u)*0.75) calc(var(--u));border-bottom:1px solid rgba(0,0,0,0.08);text-align:left;}
.admin-table td{padding:calc(var(--u)*1.25) calc(var(--u));border-bottom:1px solid rgba(0,0,0,0.05);font-size:0.9375rem;font-weight:300;color:var(--tx-2);vertical-align:top;}
.admin-table tr:hover td{background:rgba(255,255,255,0.15);}
.edit-btn{font-family:"Archivo Narrow",sans-serif;font-size:0.75rem;font-weight:400;letter-spacing:0.08em;text-transform:uppercase;background:rgba(42,125,196,0.10);color:var(--data-tx);border:1px solid var(--data-bdr);border-radius:var(--r);padding:3px 8px;cursor:pointer;transition:background var(--t);}
.edit-btn:hover{background:rgba(42,125,196,0.20);}
.modal-overlay{position:fixed;inset:0;background:rgba(6,10,22,0.55);backdrop-filter:blur(6px);z-index:500;display:flex;align-items:center;justify-content:center;padding:calc(var(--u)*2);}
.modal{background:var(--glass-strong);backdrop-filter:blur(20px);border:1px solid var(--border-field);border-radius:var(--r-card);box-shadow:var(--sh-lg);padding:calc(var(--u)*3);width:100%;max-width:640px;max-height:90vh;overflow-y:auto;}
.modal-title{font-size:1.125rem;font-weight:600;color:var(--tx-1);margin-bottom:calc(var(--u)*2);}
.modal-actions{display:flex;gap:calc(var(--u));margin-top:calc(var(--u)*2);}
.kpi-add-row{display:grid;grid-template-columns:80px 1fr 1fr 60px 60px;gap:calc(var(--u));align-items:center;padding:calc(var(--u)*0.75) 0;border-bottom:1px solid rgba(0,0,0,0.05);}
.admin-stat{text-align:center;padding:calc(var(--u)*2);}
.admin-stat-num{font-size:2rem;font-weight:700;color:var(--tx-1);letter-spacing:-0.03em;line-height:1;margin-bottom:4px;}
.admin-stat-lbl{font-family:"Archivo Narrow",sans-serif;font-size:0.75rem;letter-spacing:0.10em;text-transform:uppercase;color:var(--tx-3);}
@media(max-width:800px){
  .admin-layout{grid-template-columns:1fr;}
  .admin-nav{position:static;display:flex;flex-wrap:wrap;gap:4px;}
}
@media(max-width:640px){
  /* how-section */
  .how-steps::before{display:none;}
  .how-step{grid-template-columns:1fr;}
  .how-step-num{display:none;}
  .how-step-card{grid-template-columns:1fr;}
  .how-card-tag{display:none;}
  .hero-title{letter-spacing:-0.015em;}
  /* glossary */
  .gls-grid{grid-template-columns:1fr;}
  .gls-name{display:none;}
  /* layout */
  .grid-2{grid-template-columns:1fr!important;}
  .grid-3{grid-template-columns:1fr!important;}
  .grid-4{grid-template-columns:1fr!important;}
  .report-layout,.admin-layout{grid-template-columns:1fr!important;}
  .kpi-grid{grid-template-columns:1fr!important;}
  .kpi-add-row{grid-template-columns:1fr 1fr;flex-wrap:wrap;}
  .footer-grid{grid-template-columns:1fr!important;}
  .search-block{max-width:100%;}
  .card-pad{padding:calc(var(--u)*1.75)!important;}
  .tile-chips-row{flex-wrap:wrap!important;}
  .wrap,.wrap-narrow{
    padding-left:calc(var(--u)*2)!important;
    padding-right:calc(var(--u)*2)!important;
  }
}

/* ── Admin utility classes ─────────────────────────────────── */
.admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0; }
.grid-2-tight { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u)); }
.flex-row-sb { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: calc(var(--u)*2); }
.flex-row-wrap { display: flex; flex-wrap: wrap; gap: calc(var(--u)); }
.flex-row-gap { display: flex; gap: calc(var(--u)); }
.hidden { display: none; }
.h-32 { height: 32px; }
.h-40 { height: 40px; }
.h-auto { height: auto; }
.mb-h { margin-bottom: calc(var(--u)*0.5); }
.ml-5 { margin-left: 5px; }
.max-280 { max-width: 280px; }
.max-480 { max-width: 480px; }
.border-r { border-right: 1px solid rgba(0,0,0,0.06); }
.page-center-full { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.page-narrow-pad { padding: calc(var(--u)*4); width: 100%; max-width: 380px; }
.btn-compact { padding: 0 8px; font-size: 0.8125rem; }
.pt-10 { padding-top: 10px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.footer-sub { color: rgba(255,255,255,0.55); font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem; }

.callout--warn { border-left-color: var(--warn); }

/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM PAGE — internal reference styles
═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM PAGE CHROME
═══════════════════════════════════════════════════════════════ */

.ds-wrap {
  max-width: 1100px; margin: 0 auto;
  padding: calc(var(--u)*4) calc(var(--u)*3) calc(var(--u)*16);
}

/* Page title row */
.ds-hero {
  border-bottom: 2px solid rgba(0,20,60,0.10);
  padding-bottom: calc(var(--u)*4);
  margin-bottom: calc(var(--u)*2);
}
.ds-hero-eyebrow {
  font-family: 'Archivo Condensed', sans-serif;
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--a5); margin-bottom: 6px;
}
.ds-hero-title {
  font-family: 'Archivo Condensed', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700;
  color: var(--tx-1); line-height: 1; letter-spacing: -0.02em;
  margin-bottom: calc(var(--u));
}
.ds-hero-sub {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.9375rem; font-weight: 300; color: var(--tx-2);
  max-width: 64ch; line-height: 1.6;
}

/* TOC */
.ds-toc {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: calc(var(--u)*2) 0 calc(var(--u)*4);
}
.ds-toc a {
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem;
  font-weight: 500; color: var(--a5); text-decoration: none;
  padding: 3px 10px; border-radius: var(--r);
  border: 1px solid rgba(43,95,212,0.20);
  background: rgba(43,95,212,0.04);
  transition: background var(--t), border-color var(--t);
}
.ds-toc a:hover {
  background: rgba(43,95,212,0.12);
  border-color: rgba(43,95,212,0.40);
}

/* Section container */
.ds-section {
  padding: calc(var(--u)*5) 0 calc(var(--u)*4);
  border-top: 1px solid rgba(0,20,60,0.07);
}
.ds-section-head {
  display: flex; align-items: baseline; gap: calc(var(--u)*1.5);
  margin-bottom: calc(var(--u)*0.5);
}
.ds-section-num {
  font-family: 'Archivo Condensed', sans-serif;
  font-size: 1rem; font-weight: 300; color: var(--tx-3); min-width: 28px;
}
.ds-section-title {
  font-family: 'Archivo Condensed', sans-serif;
  font-size: 1.875rem; font-weight: 700; color: var(--tx-1); line-height: 1;
}
.ds-section-file {
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem;
  font-weight: 400; color: var(--a5); margin-left: auto;
}
.ds-section-desc {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.875rem; font-weight: 300; color: var(--tx-3);
  max-width: 72ch; line-height: 1.6;
  margin-bottom: calc(var(--u)*3);
}

/* Sub-heading within section */
.ds-sub {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tx-3);
  margin: calc(var(--u)*2.5) 0 calc(var(--u));
  padding-bottom: calc(var(--u)*0.75);
  border-bottom: 1px solid rgba(0,20,60,0.06);
}

/* Class label pill */
.ds-cls {
  display: inline-block;
  font-family: 'Archivo Condensed', sans-serif; font-size: 0.8125rem; font-weight: 400;
  color: var(--a5); background: rgba(43,95,212,0.07);
  padding: 1px 7px; border-radius: 3px;
  letter-spacing: 0.02em;
  margin-bottom: calc(var(--u)*0.75);
}

/* Row of items */
.ds-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: calc(var(--u)*2); }
.ds-col { display: flex; flex-direction: column; gap: calc(var(--u)*0.75); }

/* Token row */
.ds-tok {
  display: flex; align-items: center; gap: calc(var(--u)*1.5);
  padding: calc(var(--u)*0.75) 0;
  border-bottom: 1px solid rgba(0,20,60,0.04);
  font-family: 'Archivo Narrow', sans-serif; font-size: 0.8125rem;
}
.ds-tok-n { color: var(--a5); font-weight: 600; min-width: 160px; flex-shrink: 0; }
.ds-tok-v { color: var(--tx-3); font-weight: 300; flex: 1; }

/* Note block */
.ds-note {
  margin-top: calc(var(--u));
  padding: calc(var(--u)) calc(var(--u)*1.5);
  background: rgba(43,95,212,0.04);
  border-left: 2px solid rgba(43,95,212,0.25);
  border-radius: 0 var(--r) var(--r) 0;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.8125rem; font-weight: 300;
  color: var(--tx-2); line-height: 1.55;
}
.ds-note strong { font-weight: 600; color: var(--tx-1); }

/* Alert: rule that must not be broken */
.ds-rule {
  margin-top: calc(var(--u));
  padding: calc(var(--u)) calc(var(--u)*1.5);
  background: rgba(212,32,32,0.05);
  border-left: 2px solid rgba(212,32,32,0.35);
  border-radius: 0 var(--r) var(--r) 0;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.8125rem; font-weight: 400;
  color: var(--neg); line-height: 1.55;
}

/* Swatch */
.ds-sw { width: 44px; height: 44px; border-radius: var(--r); border: 1px solid rgba(0,20,60,0.10); flex-shrink: 0; }

/* Two / three col grids */
.ds-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u)*3); align-items: start; }
.ds-g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: calc(var(--u)*2.5); align-items: start; }

/* ── Design-system demo utilities ─────────────────────────── */
.ds-swatch-lbl { font-family: 'Archivo Narrow', sans-serif; font-size: 0.6875rem; color: var(--tx-3); }
.ds-demo-kpi-bars { max-width: 380px; display: flex; flex-direction: column; gap: calc(var(--u)*1.5); }
.ds-demo-narrow { max-width: 320px; }
.ds-demo-med { max-width: 500px; }
.ds-demo-pad { padding: calc(var(--u)*2) calc(var(--u)*2.5); }
.ds-demo-body { padding: calc(var(--u)*2) calc(var(--u)*3); background: transparent; }
.ds-card-demo { padding: calc(var(--u)*2); }
.ds-locked-demo { height: 100px; }
.ds-ctx-demo { position: relative; display: inline-block; }
.ds-ctx-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: calc(var(--u)*5); }
.ds-btn-full-demo { width: 220px; }
.ds-row-gap2 { gap: calc(var(--u)*2); }
.ds-col-gap1h { gap: calc(var(--u)*1.5); }
.ds-rules-section { border-top: 2px solid rgba(212,32,32,0.20); }
.ds-no-mt { margin-top: 0; }

.ds-shadow-swatch { width: 56px; height: 28px; background: rgba(255,255,255,0.9); border-radius: 4px; box-shadow: var(--sh-sm); flex-shrink: 0; border: 1px solid var(--border-card); }
.ds-shadow-swatch--md { box-shadow: var(--sh-md); border: none; }
.ds-shadow-swatch--lg { box-shadow: var(--sh-lg); border: none; }
.ds-kpi-val { font-family: 'Archivo Narrow', sans-serif; font-size: 0.75rem; font-weight: 700; color: var(--tx-1); min-width: 28px; text-align: right; }
.ds-mb-8 { margin-bottom: 8px; }

/* ══ Card System V2.0 — Domain Chips with Sentiment LEDs (Card 0) ══════════ */
.dom-chips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u)*0.5);
  margin-top: calc(var(--u));
}
.dom-chip-s {
  display: flex;
  align-items: center;
  gap: calc(var(--u)*0.75);
  padding: 2px calc(var(--u));
  border-radius: var(--r);
  background: var(--ci-black-24);
  border: 1px solid var(--cold-light);
}
.dom-chip-s-lbl {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ci-black-74);
}

/* ══ C01 Domain Authority Signal ════════════════════════════════════════════ */
.c01-domain-bars { margin-top: calc(var(--u)*0.5); }
.dom-sig-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-dom-sig { gap: 6px; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 700; font-size: 0.6875rem; }
/* .c01-bar-row uses .kpi-row base (display:flex; align-items:center; gap:var(--u)) — no gap override */

/* ══ Context Chain — C01 process position display ══════════════════════════ */
.context-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u)*0.5);
  margin-top: calc(var(--u));
}
.cc-node {
  display: inline-flex;
  align-items: center;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r);
  background: #ffffff;
  border: var(--chip-border-width) solid var(--chip-border-default);
  box-shadow: var(--chip-shadow);
  color: var(--tx-1);
  white-space: nowrap;
}
.cc-node--term {
  background: var(--a5);
  color: #fff;
  border: var(--chip-border-width) solid var(--chip-l5-border);
  font-weight: 700;
}
.cc-node--term.a1 { background: var(--a1); border-color: var(--a1); }
.cc-node--term.a2 { background: var(--a2); border-color: var(--a2); }
.cc-node--term.a3 { background: var(--a3); border-color: var(--a3); }
.cc-node--term.a4 { background: var(--a4); border-color: var(--a4); }
.cc-node--term.a5 { background: var(--a5); border-color: var(--chip-l5-border); }
.cc-arrow {
  font-size: 0.6875rem;
  color: var(--tx-3);
  opacity: 0.5;
  flex-shrink: 0;
}
.context-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u)*0.5);
  margin-top: calc(var(--u));
}
/* .cc-kw extends .chip.chip-neutral — use higher specificity, no !important */
.chip.cc-kw {
  font-size: 0.6875rem;
  padding: 2px 8px;
  opacity: 0.75;
}
.c01-chain-desc {
  margin-top: calc(var(--u)*0.5);
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--tx-3);
  font-style: italic;
}

/* ══ C02 Lock overlay — same locked-wrap pattern as C03/C04 ════════════════ */
/* (no new CSS needed — uses existing .locked-wrap, .locked-overlay, etc.) */

/* ══ Desktop text scale — titles, subtitles, prose only ────── */
@media (min-width: 1024px) {
  .hero-title         { font-size: clamp(4.75rem, 10vw, 11.25rem); }
  .hero-sub           { font-size: clamp(1.175rem, 1.8vw, 1.5rem); }
  .card-term          { font-size: clamp(1.875rem, 4vw, 2.8rem); }
  .card-module-content{ font-size: 1.175rem; }
  .how-step-title     { font-size: 1.5rem; }
  .how-step-body      { font-size: 1.175rem; }
}

/* ══ Mobile responsive — prevent horizontal overflow ─────────
   Breakpoint 700px covers all phones and small tablets.       */
@media (max-width: 700px) {

  /* C02 modules: stack slider+bars above spider instead of side-by-side */
  .c02-modules {
    grid-template-columns: 1fr;
  }
  .c02-mod {
    padding-left: 0;
    padding-right: 0;
  }

  /* C02 slider+bars: keep side-by-side but clip to width */
  .c02-slider-bars-inner {
    grid-template-columns: auto 1fr;
    min-width: 0;
  }

  /* KPI circles: 3-col grid → natural 3+2 row wrap, no overflow */
  .kpi-section { grid-template-columns: repeat(3, 1fr); }
  .kpi-col-empty { display: none; }
  .kpi-circle-lbl { font-size: 0.5625rem; }

  /* Heatmap: scroll internally rather than pushing page width */
  .hm-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hm-grid {
    min-width: min(300px, calc(100vw - 48px));
  }

  /* Report header: prevent long term names from overflowing */
  .report-hd {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Sidebar: full width below layout breakpoint (already single col at <1200px) */
  .report-sidebar {
    width: 100%;
    max-width: 100%;
  }
}