/* DD Memo cockpit — restrained enterprise dashboard skin.
   Boardroom-violet navigation, neutral work surfaces, pill chips, gauges. Class names are
   stable API for the templates; restyle here, not there. */

/* No third-party font calls: confidential M&A diligence must not leak usage to
   external CDNs. We fall back to the platform UI font stack (Segoe UI / system),
   declared in `body` below. Drop a self-hosted Inter @font-face here if desired. */

:root {
  --vdr-navy: #10172F;          /* report covers / brand dark */
  --vdr-navy-2: #18213F;
  --vdr-accent: #6E5BC4;
  --vdr-accent-strong: #5847A8;
  --vdr-accent-soft: #F1EFF9;
  --vdr-accent-line: #D6D0EC;
  --vdr-accent-rgb: 110, 91, 196;

  /* Navbar uses the same violet family as the authenticated workspace. */
  --nav-violet: var(--vdr-accent);
  --nav-violet-deep: #5A48A0;    /* deeper — active text */
  --nav-violet-strong: #4A3A86;  /* strongest — labels / hover text */
  --nav-tint: #F1EEF9;           /* hover surface */
  --nav-tint-active: #E7E1F5;    /* active surface */
  --nav-line: #E4DEF1;           /* violet-tinted border */
  --nav-text: #3B3452;           /* nav body text */
  --nav-text-muted: #837C99;     /* section labels / secondary */

  --vdr-line: #E2E5EC;
  --vdr-row-hover: #F7F8FB;
  --vdr-row-selected: #F1EFF9;
  --vdr-bg: #FFFFFF;
  --vdr-bg-soft: #F7F8FB;       /* app background */
  --vdr-text: #172033;
  --vdr-text-muted: #667085;
  --vdr-flag-red: #DC2626;
  --vdr-flag-amber: #D97706;
  --vdr-flag-green: #059669;
  --card-radius: 14px;
  --card-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
}

html, body {
  background: var(--vdr-bg-soft);
  color: var(--vdr-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---------- App shell: dark sidebar + slim topbar ---------- */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* Direction A — dark cockpit; violet is a jewel accent, not a wash. The nav
     tokens are re-scoped to dark values HERE so only the sidebar subtree flips;
     the rest of the app keeps the :root violet accent. */
  --nav-violet: #A78BEA;         /* light violet accent — glows on navy */
  --nav-violet-deep: #C4B4F0;    /* lighter — kbd text */
  --nav-violet-strong: #F1EDFC;  /* near-white violet — hover / active / brand */
  --nav-tint: rgba(255, 255, 255, 0.06);       /* hover surface */
  --nav-tint-active: rgba(167, 139, 234, 0.20); /* active surface */
  --nav-line: rgba(255, 255, 255, 0.10);        /* hairline border */
  --nav-text: rgba(255, 255, 255, 0.74);        /* body text */
  --nav-text-muted: rgba(255, 255, 255, 0.42);  /* section labels */
  background: linear-gradient(180deg, var(--vdr-navy) 0%, var(--vdr-navy-2) 100%);
  border-right: 1px solid var(--nav-line);
  color: var(--nav-text);
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
}
.side-brand .logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6E5BC4, #8B7CD6);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  display: grid;
  place-items: center;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(110, 91, 196, 0.35);
}
.side-brand .brand-name {
  color: var(--nav-violet-strong);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deal-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--nav-text-muted);
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* Sidebar search — jump to the evidence library */
.side-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 14px 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--nav-line);
  border-radius: 10px;
  color: var(--nav-text-muted);
}
.side-search svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--nav-violet); }
/* [type="search"] keeps specificity above the later generic light-surface
   input rule (background:#fff), which otherwise wins the tie by source order
   and paints this dark-sidebar pill white under its white text. */
.side-search input[type="search"] {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 12.5px;
  color: var(--nav-text);
}
.side-search input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.4); }
.side-search .kbd {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--nav-violet-deep);
  background: var(--nav-tint);
  border: 1px solid var(--nav-line);
  border-radius: 5px;
  padding: 2px 5px;
}
.side-search:focus-within {
  border-color: #B6A9E6;
  box-shadow: 0 0 0 3px rgba(110, 91, 196, 0.14);
}

/* Primary action pill */
.side-primary {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 14px 8px;
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #6E5BC4 0%, #8574CE 100%);
  box-shadow: 0 6px 16px rgba(110, 91, 196, 0.34);
  transition: filter 0.12s, box-shadow 0.12s, transform 0.04s;
}
.side-primary svg { width: 17px; height: 17px; flex-shrink: 0; }
.side-primary:hover { filter: brightness(1.05); box-shadow: 0 8px 20px rgba(110, 91, 196, 0.42); }
.side-primary:active { transform: translateY(1px); }
.side-primary.is-active { box-shadow: 0 0 0 3px rgba(110, 91, 196, 0.22), 0 6px 16px rgba(110, 91, 196, 0.34); }

.side-nav { flex: 1; overflow-y: auto; padding: 2px 0 12px; }
.side-nav::-webkit-scrollbar { width: 0; }

/* Top-level direct links (All Deals / Overview) */
.side-nav a.nav-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 10px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--nav-text);
  transition: background 0.12s, color 0.12s;
}
.side-nav a.nav-top svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--nav-violet); opacity: 0.9; }
.side-nav a.nav-top:hover { background: var(--nav-tint); color: var(--nav-violet-strong); }
.side-nav a.nav-top.active {
  background: var(--nav-tint-active);
  color: var(--nav-violet-strong);
  font-weight: 600;
}
.side-nav a.nav-top.active svg { color: var(--nav-violet-deep); opacity: 1; }

/* Collapsible groups (CSP-safe <details>/<summary>) */
.side-group { margin-top: 2px; }
.side-group > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 1px 10px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  list-style: none;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nav-text-muted);
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.side-group > summary::-webkit-details-marker { display: none; }
.side-group > summary:hover { background: var(--nav-tint); color: var(--nav-violet-strong); }
.side-group > summary .gi { width: 15px; height: 15px; flex-shrink: 0; color: var(--nav-violet); opacity: 0.85; }
.side-group > summary .chev {
  width: 13px;
  height: 13px;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--nav-text-muted);
  opacity: 0.7;
  transition: transform 0.15s ease;
}
.side-group[open] > summary { color: var(--nav-violet-strong); }
.side-group[open] > summary .gi { opacity: 1; }
.side-group[open] > summary .chev { transform: rotate(90deg); }

/* Nested children — text-only, indented */
.side-sub { padding: 2px 0 6px; }
.side-sub a {
  position: relative;
  display: block;
  margin: 1px 10px 1px 14px;
  padding: 6px 10px 6px 22px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--nav-text);
  transition: background 0.12s, color 0.12s;
}
.side-sub a:hover { background: var(--nav-tint); color: var(--nav-violet-strong); }
.side-sub a.active {
  background: var(--nav-tint-active);
  color: var(--nav-violet-strong);
  font-weight: 600;
}
.side-sub a.active::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--nav-violet);
}

/* Account switcher (foot) */
.side-foot {
  border-top: 1px solid var(--nav-line);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.side-foot .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6E5BC4, #8B7CD6);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  text-transform: uppercase;
  flex-shrink: 0;
}
.side-foot .who {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--nav-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-foot button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--nav-text-muted);
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.side-foot button svg { width: 16px; height: 16px; }
.side-foot button:hover { background: var(--nav-tint); color: var(--nav-violet-strong); }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 56px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--vdr-line);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
}

.page { padding: 24px; max-width: 1480px; width: 100%; margin: 0 auto; }

@media (max-width: 1024px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--nav-line); }
  .side-nav { padding: 4px 6px 10px; }
  .page { padding: 16px; }
}

/* ---------- Inputs ---------- */

input[type="text"], input[type="search"], input[type="email"],
input[type="password"], select, textarea {
  border-radius: 9px;
  background: #fff;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus-visible, select:focus, textarea:focus {
  outline: none;
  border-color: var(--vdr-accent-line) !important;
  box-shadow: 0 0 0 3px rgba(var(--vdr-accent-rgb), 0.14);
}
/* Component class referenced across templates (assessment, ask). Tailwind
   preflight zeroes borders and padding, so without this rule the fields
   render as invisible border-less strips on white panes. */
.vdr-input {
  border: 1px solid var(--vdr-line);
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
  font-size: 12.5px;
  color: var(--vdr-text);
}
/* The sidebar pill draws its own focus ring via .side-search:focus-within —
   suppress the generic input ring so focus is not doubled. */
.side-search input[type="search"]:focus-visible { box-shadow: none; }
/* Sign-off controls sit on the navy report cover: the generic rule paints
   them #fff while the cover's color:#fff would otherwise be inherited as
   their text color (white-on-white). Pair both halves explicitly. */
.report-signoff select,
.report-signoff input[type="text"] {
  color: var(--vdr-text);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 4px 8px;
  font-size: 12px;
}
.report-signoff button {
  background: #fff;
  color: var(--vdr-navy);
  border: 0;
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Cards / panes ---------- */

.vdr-pane {
  background: var(--vdr-bg);
  border: 1px solid var(--vdr-line);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* ---------- Evidence index (browser left pane) ---------- */

.vdr-folder {
  display: flex; align-items: baseline; gap: 8px;
  margin: 2px 8px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--vdr-text); cursor: pointer;
  font-size: 12.5px;
}
.vdr-folder:hover { background: var(--vdr-row-hover); }
.vdr-folder.active {
  background: var(--vdr-accent-soft);
  color: var(--vdr-accent-strong);
  font-weight: 600;
}
.vdr-folder .num {
  font-family: ui-monospace, monospace; color: var(--vdr-text-muted); font-size: 10.5px;
  min-width: 30px;
}
.vdr-folder.active .num { color: var(--vdr-accent); }

/* ---------- Tables ---------- */

table.vdr-table { width: 100%; border-collapse: collapse; }
table.vdr-table th {
  text-align: left; font-weight: 600; font-size: 10.5px;
  color: #8696AC; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 9px 14px; border-bottom: 1px solid var(--vdr-line);
  background: #FAFBFE;
  position: sticky; top: 0; z-index: 1;
}
table.vdr-table td {
  padding: 10px 14px; border-bottom: 1px solid #EEF1F7;
  vertical-align: top;
}
table.vdr-table tbody tr:last-child td { border-bottom: 0; }
table.vdr-table tr:hover td { background: var(--vdr-row-hover); }
table.vdr-table tr.selected td { background: var(--vdr-row-selected); }
table.vdr-table .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: var(--vdr-text-muted);
}

/* ---------- Buttons ---------- */

.vdr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border-radius: 9px;
  background: var(--vdr-accent); color: #FFFFFF;
  font-weight: 600; font-size: 12.5px;
  border: 1px solid transparent; cursor: pointer;
  box-shadow: 0 1px 2px rgba(var(--vdr-accent-rgb), 0.30);
  transition: background 0.12s, box-shadow 0.12s, transform 0.06s;
}
.vdr-btn:hover { background: var(--vdr-accent-strong); box-shadow: 0 3px 8px rgba(var(--vdr-accent-rgb), 0.35); }
.vdr-btn:active { transform: translateY(1px); }
.vdr-btn.ghost {
  background: #fff; color: var(--vdr-text);
  border-color: var(--vdr-line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.vdr-btn.ghost:hover { background: #F8FAFD; border-color: #C9D4E8; }

/* ---------- Chips ---------- */

.vdr-badge, .vdr-sev, .vdr-gate, .vdr-status, .vdr-cat {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  line-height: 1.4;
}

.vdr-badge.human    { background: #E0E7FF; color: #4338CA; }
.vdr-badge.agent    { background: #D1FAE5; color: #047857; }
.vdr-badge.running  { background: #FEF3C7; color: #B45309; }
.vdr-badge.complete { background: #D1FAE5; color: #047857; }
.vdr-badge.failed   { background: #FEE2E2; color: #B91C1C; }

.vdr-flag-red   { color: var(--vdr-flag-red); }
.vdr-flag-amber { color: var(--vdr-flag-amber); }
.vdr-flag-green { color: var(--vdr-flag-green); }

.vdr-sev.red    { background: #FEE2E2; color: #B91C1C; }
.vdr-sev.yellow { background: #FEF3C7; color: #B45309; }
.vdr-sev.green  { background: #D1FAE5; color: #047857; }
.vdr-sev.info   { background: #F1F5F9; color: #64748B; }
/* 5x5 matrix scale */
.vdr-sev.critical    { background: #DC2626; color: #FFFFFF; }
.vdr-sev.severe      { background: #FFEDD5; color: #C2410C; }
.vdr-sev.moderate    { background: #FEF3C7; color: #B45309; }
.vdr-sev.sustainable { background: #D1FAE5; color: #047857; }

.vdr-gate.failing { background: #FEE2E2; color: #B91C1C; }
.vdr-gate.warning { background: #FEF3C7; color: #B45309; }
.vdr-gate.passing { background: #D1FAE5; color: #047857; }
.vdr-gate.unknown { background: #F1F5F9; color: #64748B; }

.vdr-status            { background: #E0E7FF; color: #4338CA; }
.vdr-status.open       { background: #FEF3C7; color: #B45309; }
.vdr-status.mitigated  { background: #D1FAE5; color: #047857; }
.vdr-status.accepted   { background: #E0E7FF; color: #4338CA; }
.vdr-status.superseded { background: #F1F5F9; color: #64748B; }

/* Posture pill with status dot */
.vdr-rec {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
}
.vdr-rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vdr-rec.go             { background: #D1FAE5; color: #047857; }
.vdr-rec.conditional_go { background: #FEF3C7; color: #B45309; }
.vdr-rec.no_go          { background: #FEE2E2; color: #B91C1C; }
.vdr-rec.pending        { background: #F1F5F9; color: #64748B; }

/* Integration cost categories */
.vdr-cat { border-radius: 6px; font-family: ui-monospace, monospace; padding: 2px 7px; }
.vdr-cat.ote        { background: #FEF3C7; color: #B45309; }
.vdr-cat.capex      { background: #E0E7FF; color: #4338CA; }
.vdr-cat.opex_delta { background: #FEE2E2; color: #B91C1C; }
.vdr-cat.synergy    { background: #D1FAE5; color: #047857; }
.vdr-cat.idsw       { background: #EDE9FE; color: #6D28D9; }
.vdr-cat.other      { background: #F1F5F9; color: #64748B; }
.vdr-cat.synergy_attainment    { background: #D1FAE5; color: #047857; }
.vdr-cat.tsa_exit_enablement   { background: #EDE9FE; color: #6D28D9; }
.vdr-cat.systems_integration   { background: #E0E7FF; color: #4338CA; }
.vdr-cat.regulatory_compliance { background: #FEE2E2; color: #B91C1C; }

.evidence-pill {
  display: inline-block; padding: 2px 8px; margin: 2px 4px 0 0; border-radius: 6px;
  background: #F1F5F9; color: var(--vdr-text); font-family: ui-monospace, monospace;
  font-size: 10px;
  transition: background 0.12s, color 0.12s;
}
.evidence-pill:hover { background: var(--vdr-accent-soft); color: var(--vdr-accent-strong); }

/* ---------- Progress bars ---------- */

.cov-bar {
  position: relative; height: 6px; background: #E9EDF5; border-radius: 999px; overflow: hidden;
}
.cov-bar > span {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(90deg, #9588D6, var(--vdr-accent));
  transition: width 0.4s ease;
}
.cov-bar.warn > span { background: linear-gradient(90deg, #FBBF24, #D97706); }
.cov-bar.crit > span { background: linear-gradient(90deg, #F87171, #DC2626); }

/* ---------- KPI strips (inside panes) ---------- */

.vdr-kpi {
  display: flex; flex-wrap: wrap; gap: 32px; padding: 16px 20px;
  background: var(--vdr-bg);
  border: 1px solid var(--vdr-line);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.vdr-pane .vdr-kpi {
  border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--vdr-line);
}
.vdr-kpi .kpi { flex: 0 0 auto; min-width: 92px; }
.vdr-kpi .kpi .label {
  font-size: 10px; text-transform: uppercase; color: #8696AC; letter-spacing: 0.07em;
  font-weight: 600;
}
.vdr-kpi .kpi .value {
  font-size: 22px; font-weight: 700; color: var(--vdr-text);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.vdr-kpi .kpi.red    .value { color: var(--vdr-flag-red); }
.vdr-kpi .kpi.yellow .value { color: var(--vdr-flag-amber); }
.vdr-kpi .kpi.green  .value { color: var(--vdr-flag-green); }

/* ---------- Preview / memo ---------- */

.vdr-preview pre {
  white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: var(--vdr-text);
}

.memo-doc { max-width: 820px; }
.memo-doc h1 { font-size: 22px; font-weight: 700; margin: 1.2em 0 0.4em; }
.memo-doc h2 { font-size: 17px; font-weight: 700; margin: 1.2em 0 0.4em; color: #1E2A4A; }
.memo-doc h3 { font-size: 14px; font-weight: 700; margin: 1em 0 0.3em; }
.memo-doc p, .memo-doc li { margin: 0.4em 0; }
.memo-doc table { border-collapse: collapse; margin: 1em 0; font-size: 12px; }
.memo-doc th, .memo-doc td { border: 1px solid var(--vdr-line); padding: 6px 10px; }
.memo-doc code { background: #F1F5F9; padding: 1px 4px; border-radius: 4px; font-size: 12px; }
.memo-doc ul, .memo-doc ol { padding-left: 1.4em; }

.htmx-swapping { opacity: 0.55; transition: opacity 0.12s; }

/* ---------- Cockpit: hero, gauge, scoreboard ---------- */

.tdd-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, #FFFFFF 55%, #F5F3FA 100%);
  border: 1px solid var(--vdr-line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 20px 22px;
}

.tdd-scoreboard {
  display: grid;
  grid-template-columns: minmax(230px, 1.35fr) repeat(5, minmax(120px, 1fr));
  gap: 12px;
}

.tdd-score, .tdd-metric {
  background: var(--vdr-bg);
  border: 1px solid var(--vdr-line);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 16px;
  min-height: 96px;
}

.tdd-score { display: flex; align-items: center; gap: 16px; }

.tdd-score .label, .tdd-metric .label {
  font-size: 10px;
  text-transform: uppercase;
  color: #8696AC;
  letter-spacing: 0.07em;
  font-weight: 600;
}

.tdd-metric .value {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 700;
  color: var(--vdr-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tdd-metric .value.red    { color: var(--vdr-flag-red); }
.tdd-metric .value.yellow { color: var(--vdr-flag-amber); }
.tdd-metric .value.green  { color: var(--vdr-flag-green); }

/* CSS-only donut gauge: set --val (0-100) inline. */
.gauge {
  --val: 0;
  --gauge-color: var(--vdr-accent);
  width: 96px;
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--vdr-bg) 76%, transparent 77% 100%),
    conic-gradient(var(--gauge-color) calc(var(--val) * 1%), #E9EDF5 0);
  display: grid;
  place-items: center;
}
.gauge b {
  font-size: 26px;
  font-weight: 800;
  color: var(--vdr-text);
  font-variant-numeric: tabular-nums;
}
.gauge.red    { --gauge-color: #DC2626; }
.gauge.yellow { --gauge-color: #F59E0B; }
.gauge.green  { --gauge-color: #10B981; }

.tdd-mini {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 72px;
  border: 1px solid var(--vdr-line);
  border-radius: 12px;
  background: #FAFBFE;
  padding: 10px 12px;
  transition: background 0.12s, border-color 0.12s;
}
.tdd-mini:hover { background: var(--vdr-accent-soft); border-color: var(--vdr-accent-line); }
.tdd-mini span {
  font-size: 20px;
  font-weight: 700;
  color: var(--vdr-text);
  font-variant-numeric: tabular-nums;
}
.tdd-mini small {
  margin-top: 2px;
  font-size: 10px;
  text-transform: uppercase;
  color: #8696AC;
  letter-spacing: 0.06em;
  font-weight: 600;
}

@media (max-width: 1280px) {
  .tdd-scoreboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tdd-score { grid-column: span 3; }
}

@media (max-width: 720px) {
  .tdd-hero { align-items: flex-start; flex-direction: column; }
  .tdd-scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdd-score { grid-column: span 2; }
}

/* ---------- Charts (server-side SVG) ---------- */

.chart-wrap { padding: 16px 18px 14px; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-donut { width: 132px; height: 132px; flex-shrink: 0; }

/* Donut + legend side by side inside a pane. */
.chart-donut-row { display: flex; align-items: center; gap: 18px; padding: 16px 18px; }

.chart-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding: 0 18px 14px;
}
.chart-legend.tight { padding: 10px 0 0; }
.chart-legend .item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--vdr-text-muted);
}
.chart-legend .dot {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
}
.chart-legend .dot.round { border-radius: 50%; }
.chart-legend .item b { color: var(--vdr-text); font-variant-numeric: tabular-nums; }

/* Overview chart trio sit in one row at equal (stretched) height. Pin the
   header to the top and legend to the bottom, and center the chart between
   them so the shorter charts read as balanced cards, not half-empty ones. */
.chart-pane { display: flex; flex-direction: column; }
.chart-pane > .chart-wrap {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
}
.chart-pane > .chart-donut-row { flex: 1 1 auto; }

/* A one-line caption beneath a chart — the "so what" for the IC. */
.chart-cap {
  padding: 0 18px 16px;
  font-size: 11.5px; color: var(--vdr-text-muted);
  display: flex; flex-wrap: wrap; gap: 4px 18px;
}
.chart-cap b { color: var(--vdr-text); font-variant-numeric: tabular-nums; font-weight: 700; }

/* Charts embedded in the printable memo. */
.memo-figure { margin: 1.1em 0 1.4em; max-width: 640px; }
.memo-figure .chart-svg { border: 1px solid var(--vdr-line); border-radius: 10px; padding: 10px; background: #fff; }
.memo-figure figcaption { font-size: 11px; color: var(--vdr-text-muted); margin-top: 6px; }

/* ---------- IC report deliverable (/memo) ---------- */

.report-actions {
  max-width: 880px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.report-doc {
  max-width: 880px; margin: 0 auto; background: #fff;
  border: 1px solid var(--vdr-line); border-radius: 16px;
  box-shadow: var(--card-shadow); overflow: hidden;
}

.report-cover {
  padding: 34px 48px 26px;
  background: linear-gradient(135deg, var(--vdr-navy) 0%, var(--vdr-navy-2) 100%);
  color: #fff;
}
.report-confidential {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #FCA5A5;
}
.report-kicker {
  margin-top: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.62);
}
.report-title { font-size: 30px; font-weight: 800; line-height: 1.12; margin: 4px 0 0; color: #fff; }
.report-meta { margin-top: 7px; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.report-meta .mono { color: rgba(255, 255, 255, 0.85); }

.report-rec {
  margin-top: 22px; display: flex; align-items: center; gap: 18px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px; padding: 15px 18px;
}
.report-rec .rec-badge {
  font-size: 15px; font-weight: 800; letter-spacing: 0.03em; padding: 9px 16px;
  border-radius: 8px; white-space: nowrap; flex-shrink: 0;
}
.report-rec.go .rec-badge { background: #10B981; color: #042419; }
.report-rec.conditional_go .rec-badge { background: #F59E0B; color: #3A2400; }
.report-rec.no_go .rec-badge { background: #DC2626; color: #fff; }
.report-rec.pending .rec-badge { background: #CBD5E1; color: #0F172A; }
.report-rec .rec-body { flex: 1; min-width: 0; }
.report-rec .rec-line { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.report-rec .rec-score { text-align: center; flex-shrink: 0; }
.report-rec .rec-score-num { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.report-rec .rec-score-lbl { margin-top: 3px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); }
.report-byline { margin-top: 16px; font-size: 10.5px; color: rgba(255, 255, 255, 0.42); }

.report-section { padding: 22px 48px; border-bottom: 1px solid var(--vdr-line); }
.report-section:last-child { border-bottom: 0; }
.report-doc.memo-doc .report-section > h2:first-child { margin-top: 0; }

.report-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 16px 0; }
.report-kpi { border: 1px solid var(--vdr-line); border-radius: 10px; padding: 10px 12px; background: #FAFBFE; }
.report-kpi span { display: block; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.report-kpi small { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: #8696AC; font-weight: 600; }
.report-kpi.red span { color: var(--vdr-flag-red); }
.report-kpi.green span { color: var(--vdr-flag-green); }

table.report-rag { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 8px 0 4px; }
table.report-rag th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: #8696AC; padding: 6px 10px; border-bottom: 1px solid var(--vdr-line); font-weight: 600;
}
table.report-rag th.num, table.report-rag td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.report-rag td { padding: 7px 10px; border-bottom: 1px solid #EEF1F7; }
table.report-rag tr:last-child td { border-bottom: 0; }
.rag-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.rag-dot.red { background: #DC2626; } .rag-dot.yellow { background: #F59E0B; }
.rag-dot.green { background: #10B981; } .rag-dot.na { background: #CBD5E1; }

@media (max-width: 720px) {
  .report-cover, .report-section { padding-left: 22px; padding-right: 22px; }
  .report-rec { flex-wrap: wrap; }
  .report-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Print: drop the app chrome, render a clean document ---------- */
@media print {
  .sidebar, .topbar, .report-actions { display: none !important; }
  .app-shell { display: block; }
  .content, .page { display: block; max-width: none; margin: 0; padding: 0; }
  html, body { background: #fff; }
  .chart-svg, .memo-figure, .memo-figure .chart-svg,
  .report-section, .vdr-pane, table.report-rag { break-inside: avoid; }
  .report-section h2, .report-section h3 { break-after: avoid; }
  .report-doc { border: 0; border-radius: 0; box-shadow: none; max-width: none; }

  /* Browsers strip backgrounds by default — keep the dark cover legible. */
  .report-cover { background: #fff !important; color: #0F172A; border-bottom: 2px solid var(--vdr-navy); padding-left: 0; padding-right: 0; }
  .report-kicker, .report-meta, .report-byline { color: #64748B; }
  .report-meta .mono { color: #0F172A; }
  .report-title { color: #0F172A; }
  .report-confidential { color: #B91C1C; }
  .report-rec { background: #F4F6FB !important; border-color: var(--vdr-line); }
  .report-rec .rec-line { color: #0F172A; }
  .report-rec .rec-score-num { color: #0F172A !important; }
  .report-rec .rec-score-lbl { color: #64748B; }
  .report-rec .rec-badge { border: 1.5px solid #0F172A; color: #0F172A !important; }
  .report-section { padding-left: 0; padding-right: 0; }
}

/* ---------- IC presentation deck (/deck) ---------- */

.deck-actions {
  max-width: 1060px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.deck { max-width: 1060px; margin: 0 auto; counter-reset: slide; }

.slide {
  position: relative; width: 100%; min-height: 560px;
  background: #fff; border: 1px solid var(--vdr-line); border-radius: 14px;
  box-shadow: var(--card-shadow); margin-bottom: 18px;
  padding: 30px 40px 46px; display: flex; flex-direction: column;
  counter-increment: slide;
}
.slide-head { border-bottom: 2px solid var(--vdr-navy); padding-bottom: 10px; margin-bottom: 16px; }
.slide-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vdr-accent); }
.slide-title { font-size: 22px; font-weight: 700; line-height: 1.2; margin: 5px 0 0; color: var(--vdr-text); }
.slide-body { flex: 1 1 auto; min-height: 0; font-size: 13px; line-height: 1.5; color: var(--vdr-text); }
.slide-foot {
  position: absolute; left: 40px; right: 40px; bottom: 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 9px; letter-spacing: 0.04em; color: #94A3B8;
  border-top: 1px solid var(--vdr-line); padding-top: 7px;
}
.slide-foot .pageno::before { content: counter(slide); }

.slide.cover { background: linear-gradient(135deg, var(--vdr-navy) 0%, var(--vdr-navy-2) 100%); color: #fff; justify-content: center; border: 0; }
.slide.cover .cover-confidential { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #FCA5A5; }
.slide.cover .cover-kicker { margin-top: 18px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.slide.cover h1 { font-size: 40px; font-weight: 800; line-height: 1.1; margin: 6px 0 0; color: #fff; }
.slide.cover .cover-meta { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,0.62); }
.slide.cover .cover-rec { margin-top: 26px; }
.slide.cover .cover-byline { position: absolute; bottom: 28px; left: 40px; font-size: 11px; color: rgba(255,255,255,0.45); }

.slide-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.slide-cols-60-40 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: start; }
.slide-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.slide-fig { display: flex; align-items: center; justify-content: center; }
.slide-fig .chart-svg { width: auto; height: auto; max-height: 330px; max-width: 100%; }
.slide-takeaway {
  background: var(--vdr-accent-soft); border-left: 3px solid var(--vdr-accent);
  padding: 9px 13px; border-radius: 7px; font-size: 12.5px; margin-bottom: 12px;
}
.deck-recbox {
  background: #F4F6FB !important; border: 1px solid var(--vdr-line); border-radius: 12px;
  padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 14px;
}
.deck-recbox .rec-score-num { color: var(--vdr-text); }
.deck-recbox .rec-score-lbl { color: var(--vdr-text-muted); }

.deck-h { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #475569; margin: 14px 0 5px; }
.deck-h:first-child { margin-top: 0; }
.deck-ul, .deck-ol { padding-left: 1.25em; margin: 4px 0; }
.deck-ul li, .deck-ol li { margin: 3px 0; font-size: 12.5px; line-height: 1.45; }
.deck-ul { list-style: disc; } .deck-ol { list-style: decimal; }
.deck-p { font-size: 12.5px; line-height: 1.55; margin: 4px 0; }
.deck-lead { font-size: 15px; line-height: 1.6; max-width: 60ch; }
.deck-rag { width: 100%; }
.deck-legend td { padding: 5px 8px; font-size: 12px; border-bottom: 1px solid #EEF1F7; }
.deck-prov { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.deck-appendix { columns: 2; column-gap: 28px; }
.deck-appendix h4 { break-after: avoid; }
.deck-appendix ul { break-inside: avoid; }

@media (max-width: 860px) {
  .slide-2col, .slide-cols-60-40, .deck-prov { grid-template-columns: 1fr; }
  .deck-appendix { columns: 1; }
  .slide { padding: 24px; }
}

/* Print: one landscape slide per page, backgrounds on (use --print-background).
   The landscape @page rule lives in deck.html itself — @page cannot be scoped
   by selector, and a global one here hijacked printing of the portrait IC
   report (and every other page). */
@media print {
  html, body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sidebar, .topbar, .deck-actions { display: none !important; }
  .app-shell { display: block; }
  .content, .page { display: block; max-width: none; margin: 0; padding: 0; }
  .deck { max-width: none; margin: 0; }
  .slide {
    width: 13.333in; min-height: 7.5in; margin: 0;
    border: 0; border-radius: 0; box-shadow: none;
    padding: 0.5in 0.66in 0.5in;
    break-after: page; page-break-after: always; break-inside: avoid;
  }
  .slide:last-child { break-after: auto; page-break-after: auto; }
  .slide-foot { left: 0.66in; right: 0.66in; }
  .slide-fig .chart-svg { max-height: 3.4in; }
}

/* ---------- Deal switcher (topbar) + deal portfolio cards ---------- */

.deal-switcher { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.deal-switcher-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vdr-text-muted);
}
.deal-switcher select {
  border: 1px solid var(--vdr-line); border-radius: 8px; background: #fff;
  font-size: 12.5px; font-weight: 600; color: var(--vdr-text);
  padding: 6px 8px; max-width: 220px; cursor: pointer;
}
.deal-switcher select:focus-visible {
  outline: none; border-color: #AFA4DE; box-shadow: 0 0 0 3px rgba(var(--vdr-accent-rgb), 0.14);
}
.deal-switcher-all {
  color: var(--vdr-text-muted); font-weight: 700; padding: 2px 7px; border-radius: 6px; line-height: 1;
}
.deal-switcher-all:hover { background: var(--vdr-row-hover); color: var(--vdr-text); }

.deal-card.is-current {
  border-color: var(--vdr-accent);
  box-shadow: 0 0 0 1px var(--vdr-accent), var(--card-shadow);
}
.deal-card-new { border-style: dashed; background: #FCFDFF; }

/* Cited-evidence highlight (moved out of preview_page.html's inline <style>
   so the page can run under a strict CSP). */
mark#cited {
  background: #FDE68A;
  padding: 1px 2px;
  border-radius: 3px;
  scroll-margin-top: 80px;
}

/* Global HTMX failure toast (populated by static/app.js). */
.htmx-error-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: none;
  max-width: 90vw;
  padding: 10px 16px;
  border-radius: 6px;
  background: #B91C1C;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
@media print { .htmx-error-bar { display: none !important; } }

/* Visually-hidden but screen-reader-available (chart data tables, labels). */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Public site — "the confidential memo, alive" ---------- */
/* Editorial-institutional marketing layer. Everything is namespaced under
   .public-site / sample-* — the app styles above are untouched. Palette is
   the established navy / teal / blue on white; the design language is the
   deliverable itself: serif display, memo section numerals, mono provenance
   chips, ledger hairlines. */

.public-site {
  --public-navy: #081229;
  --public-navy-2: #102046;
  --public-ink: #10192d;
  --public-muted: #5b667b;
  --public-teal: #13b8a6;
  --public-teal-dark: #087f76;
  --public-teal-light: #55d9cd;
  --public-blue: #3467eb;
  --public-line: #dbe2ee;
  --public-soft: #f3f6fa;
  --public-red: #dc4654;
  --public-amber: #e19a20;
  --pub-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --pub-mono: "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
  margin: 0;
  background: #fff;
  color: var(--public-ink);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
.public-site *, .public-site *::before, .public-site *::after { box-sizing: border-box; }
.public-site h1, .public-site h2, .public-site h3, .public-site p { margin-top: 0; }
.public-site a { color: inherit; text-decoration: none; }
.public-site h1, .public-site h2 {
  font-family: var(--pub-serif); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.04;
}
.public-site h2 { font-size: clamp(2.2rem, 4.4vw, 3.7rem); margin-bottom: 1.1rem; }
.public-site h3 { font-size: 1.05rem; margin-bottom: .55rem; letter-spacing: -.01em; }

/* Scroll reveal — armed only when public.js sets .pjs on <html>, so the page
   is fully visible without JavaScript. */
.pjs .rv { opacity: 0; transform: translateY(26px); }
.pjs .rv.rv-in { opacity: 1; transform: none; transition: opacity .85s cubic-bezier(.22,.61,.21,1), transform .85s cubic-bezier(.22,.61,.21,1); }
.pjs .rv.rv-in[data-rvd="1"] { transition-delay: .1s; }
.pjs .rv.rv-in[data-rvd="2"] { transition-delay: .2s; }
.pjs .rv.rv-in[data-rvd="3"] { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .pjs .rv { opacity: 1; transform: none; transition: none; }
}

/* ----- chrome ----- */

.public-nav {
  min-height: 76px; max-width: 1240px; margin: 0 auto; padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fff;
}
.public-nav nav { display: flex; align-items: center; gap: 26px; font-size: .84rem; font-weight: 650; }
.public-nav nav > a:not(.public-button) { position: relative; }
.public-nav nav > a:not(.public-button)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px;
  background: var(--public-teal-dark); transition: right .22s ease;
}
.public-nav nav > a:not(.public-button):hover::after { right: 0; }
.public-brand { display: inline-flex; align-items: center; gap: 12px; }
.public-brand-mark {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--public-navy); color: var(--public-teal-light);
  font-family: var(--pub-serif); font-size: .95rem; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(85, 217, 205, .35), 0 8px 20px rgba(8, 18, 41, .22);
}
.public-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.public-brand strong { font-family: var(--pub-serif); font-size: 1.02rem; }
.public-brand small { margin-top: 4px; color: #738097; font-family: var(--pub-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }

.public-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px;
  padding: 13px 22px; border: 1px solid var(--public-blue); border-radius: 8px;
  background: var(--public-blue); color: #fff !important; font-weight: 750; font-size: .87rem;
  box-shadow: 0 10px 24px rgba(52, 103, 235, .2);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.public-button:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(52, 103, 235, .3); }
.public-button .arr { margin-left: 8px; transition: transform .18s; }
.public-button:hover .arr { transform: translateX(3px); }
.public-button-small { min-height: 40px; padding: 9px 15px; font-size: .76rem; }
.public-button-secondary { border-color: #b9c4d6; background: transparent; color: var(--public-ink) !important; box-shadow: none; }
.public-button-secondary:hover { border-color: var(--public-teal-dark); box-shadow: none; }
.public-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

.public-eyebrow {
  margin-bottom: 15px; display: flex; align-items: center; gap: 10px;
  color: var(--public-teal-dark); font-family: var(--pub-mono);
  font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
}
.public-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; }
.public-micro { color: #77839a; font-size: .78rem; }

/* Memo-style section numerals. */
.public-index {
  display: block; margin-bottom: 18px;
  color: var(--public-teal-dark); font-family: var(--pub-mono);
  font-size: .72rem; letter-spacing: .2em;
}
.public-index::after { content: ""; display: block; width: 44px; height: 2px; margin-top: 10px; background: var(--public-teal); }

/* ----- hero ----- */

.public-hero {
  position: relative; min-height: 680px; padding: 96px max(28px, calc((100vw - 1210px) / 2)) 130px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(370px, .8fr); align-items: center; gap: 76px;
  color: #fff; overflow: hidden;
  background:
    radial-gradient(820px 500px at 85% 8%, rgba(52, 103, 235, .22), transparent 65%),
    radial-gradient(560px 420px at 0% 100%, rgba(19, 184, 166, .16), transparent 70%),
    linear-gradient(148deg, var(--public-navy), var(--public-navy-2));
}
.public-hero::before {
  /* faint ledger grid — the audit-trail texture */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 56px);
  mask-image: radial-gradient(900px 640px at 30% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(900px 640px at 30% 40%, #000 30%, transparent 75%);
}
.public-hero > * { position: relative; }
.public-hero .public-eyebrow { color: var(--public-teal-light); }
.public-hero h1 {
  margin-bottom: 26px; font-size: clamp(3.8rem, 7.4vw, 6.9rem); font-weight: 700;
  text-wrap: balance;
}
.public-hero h1 span { color: var(--public-teal-light); font-style: italic; }
.public-lede { max-width: 700px; margin-bottom: 32px; color: #cbd7eb; font-size: clamp(1.06rem, 1.8vw, 1.3rem); line-height: 1.66; }
.public-hero .public-micro { margin: 20px 0 0; color: #8798b5; }
.public-hero .public-button-secondary { border-color: #61708d; color: #fff !important; }
.public-hero .public-button-secondary:hover { border-color: var(--public-teal-light); }

/* Hero artifact: the verdict card, staggered to life on load. */
.public-verdict-card {
  overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 14px;
  background: #fff; color: var(--public-ink);
  box-shadow: 0 40px 90px rgba(0,0,0,.4);
  animation: pv-lift .9s cubic-bezier(.22,.61,.21,1) backwards;
}
@keyframes pv-lift { from { opacity: 0; transform: translateY(22px); } }
.public-verdict-top {
  padding: 15px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--public-navy); color: #93a3bd;
  font-family: var(--pub-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
}
.public-verdict-top b { color: var(--public-teal-light); letter-spacing: .1em; }
.public-verdict-card h2 { padding: 24px 22px 12px; font-size: 1.55rem; margin-bottom: 0; }
.public-risk-row {
  padding: 15px 22px; display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 12px;
  border-top: 1px solid var(--public-line); font-size: .8rem;
  animation: pv-lift .7s cubic-bezier(.22,.61,.21,1) backwards;
}
.public-risk-row:nth-of-type(1) { animation-delay: .35s; }
.public-risk-row:nth-of-type(2) { animation-delay: .55s; }
.public-risk-row:nth-of-type(3) { animation-delay: .75s; }
.public-risk-row b { color: #6d7890; font-family: var(--pub-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
.public-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.public-dot-red { background: var(--public-red); box-shadow: 0 0 0 4px rgba(220,70,84,.12); }
.public-dot-amber { background: var(--public-amber); box-shadow: 0 0 0 4px rgba(225,154,32,.13); }
.public-verdict-foot { padding: 14px 22px; display: flex; gap: 8px; flex-wrap: wrap; background: #f7f9fc; border-top: 1px solid var(--public-line); }
.public-verdict-foot span {
  padding: 5px 9px; border-radius: 4px; background: #e8f7f5; color: var(--public-teal-dark);
  font-family: var(--pub-mono); font-size: .58rem; font-weight: 700; letter-spacing: .04em;
}

.public-proof-strip {
  max-width: 1210px; margin: -56px auto 0; position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--public-line); border-radius: 12px;
  background: #fff; box-shadow: 0 24px 54px rgba(17, 34, 67, .14);
}
.public-proof-strip div { padding: 26px 30px; display: flex; flex-direction: column; border-right: 1px solid var(--public-line); }
.public-proof-strip div:last-child { border-right: 0; }
.public-proof-strip strong { color: var(--public-navy); font-family: var(--pub-serif); font-size: 2.15rem; line-height: 1; }
.public-proof-strip span { margin-top: 9px; color: var(--public-muted); font-family: var(--pub-mono); font-size: .64rem; letter-spacing: .04em; }

/* ----- sections ----- */

.public-section { max-width: 1210px; margin: 0 auto; padding: 128px 28px; }
.public-section-head { max-width: 830px; margin-bottom: 54px; }
.public-section-head > p:last-child { color: var(--public-muted); font-size: 1.06rem; max-width: 62ch; }
.public-problem > div:first-child { max-width: 880px; margin-bottom: 52px; }
.public-grid-three, .public-grid-two { display: grid; gap: 18px; }
.public-grid-three { grid-template-columns: repeat(3, 1fr); }
.public-grid-two { grid-template-columns: repeat(2, 1fr); }
.public-grid-three article { padding: 30px 28px; border: 1px solid var(--public-line); border-radius: 10px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.public-grid-three article:hover { border-color: #b9cbc9; box-shadow: 0 14px 34px rgba(17,34,67,.08); }
.public-grid-three article > span:first-child { display: block; margin-bottom: 26px; color: var(--public-teal-dark); font-family: var(--pub-mono); font-size: .68rem; font-weight: 700; letter-spacing: .18em; }
.public-grid-three p { margin-bottom: 0; color: var(--public-muted); font-size: .88rem; }

/* ----- product walkthrough — the page shows the product ----- */

.pw-block {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: 72px; align-items: center; padding: 46px 0;
}
.pw-block + .pw-block { border-top: 1px solid #e9eef6; }
.pw-block:nth-of-type(even) > .pw-copy { order: 2; }
.pw-copy h3 { font-family: var(--pub-serif); font-size: clamp(1.5rem, 2.4vw, 2.05rem); letter-spacing: -.015em; margin-bottom: .8rem; }
.pw-copy p { color: var(--public-muted); font-size: .95rem; max-width: 52ch; }
.pw-copy .public-micro { margin-top: 14px; }

.pw-frame {
  border: 1px solid var(--public-line); border-radius: 12px; overflow: hidden;
  background: #fff; box-shadow: 0 30px 70px rgba(17, 34, 67, .13);
}
.pw-bar {
  padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--public-navy); color: #93a3bd;
  font-family: var(--pub-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
}
.pw-bar b { color: var(--public-teal-light); }
.pw-stamp {
  padding: 3px 8px; border: 1px solid rgba(85,217,205,.45); border-radius: 3px;
  color: var(--public-teal-light); font-size: .55rem; letter-spacing: .18em;
}
.pw-rows { padding: 6px 0; }
.pw-row {
  padding: 13px 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  border-top: 1px solid #eef2f8; font-size: .8rem;
}
.pw-row:first-child { border-top: 0; }
.pw-row > span:first-child { color: #3d4960; }
.pw-row small { display: block; margin-top: 3px; color: #8a95a9; font-size: .68rem; }
.pw-row-live { animation: pw-scan 3.4s ease-in-out infinite; }
@keyframes pw-scan { 0%, 100% { background: #fff; } 50% { background: #f0faf8; } }
.pw-chip {
  justify-self: end; padding: 4px 9px; border-radius: 4px;
  font-family: var(--pub-mono); font-size: .58rem; font-weight: 700; letter-spacing: .05em; white-space: nowrap;
}
.pw-chip-teal { background: #e8f7f5; color: var(--public-teal-dark); }
.pw-chip-navy { background: #edf1f9; color: #3c5382; }
.pw-chip-amber { background: #fdf3e0; color: #9a6a12; }
.pw-chip-red { background: #fdeaec; color: #b42334; }
.pw-foot {
  padding: 12px 20px; display: flex; justify-content: space-between; gap: 10px;
  background: #f7f9fc; border-top: 1px solid var(--public-line);
  color: #77839a; font-family: var(--pub-mono); font-size: .6rem; letter-spacing: .06em;
}
.pw-gate {
  margin: 14px 20px 18px; padding: 13px 16px; border-left: 3px solid var(--public-teal-dark);
  background: #f2faf8; font-size: .78rem; color: #23504a;
}
.pw-gate b { font-family: var(--pub-mono); font-size: .66rem; letter-spacing: .08em; }

/* ----- benefit strip ----- */

.public-benefit { background: var(--public-soft); max-width: none; padding-left: max(28px, calc((100vw - 1210px) / 2)); padding-right: max(28px, calc((100vw - 1210px) / 2)); }
.public-benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--public-line); border-radius: 12px; background: #fff; overflow: hidden; }
.public-benefit-grid article { padding: 30px 28px; border-right: 1px solid var(--public-line); }
.public-benefit-grid article:last-child { border-right: 0; }
.public-benefit-grid strong { display: block; margin-bottom: 10px; font-family: var(--pub-serif); font-size: 1.14rem; letter-spacing: -.01em; }
.public-benefit-grid p { margin: 0; color: var(--public-muted); font-size: .82rem; }

/* ----- POV / authority ----- */

.public-pov {
  position: relative; max-width: none; overflow: hidden;
  padding: 128px max(28px, calc((100vw - 1210px) / 2));
  color: #fff; background: linear-gradient(150deg, var(--public-navy), var(--public-navy-2));
}
.public-pov::before {
  content: "\00a7"; position: absolute; top: -60px; right: 2%;
  font-family: var(--pub-serif); font-size: 30rem; line-height: 1; color: rgba(255,255,255,.035);
  pointer-events: none;
}
.public-pov .public-eyebrow { color: var(--public-teal-light); }
.public-pov h2 { max-width: 800px; }
.public-pov-list { margin: 58px 0 0; display: grid; gap: 0; }
.public-pov-item {
  padding: 34px 0; display: grid; grid-template-columns: 84px 1fr; gap: 28px; align-items: baseline;
  border-top: 1px solid rgba(255,255,255,.12);
}
.public-pov-item > span {
  color: var(--public-teal-light); font-family: var(--pub-mono); font-size: .72rem; letter-spacing: .16em;
}
.public-pov-item h3 { font-family: var(--pub-serif); font-size: clamp(1.35rem, 2.3vw, 1.9rem); margin-bottom: .55rem; letter-spacing: -.015em; }
.public-pov-item p { margin: 0; max-width: 66ch; color: #aebbd1; font-size: .95rem; }

/* ----- proof offer / economics / security ----- */

.public-proof-offer { max-width: none; padding-left: max(28px, calc((100vw - 1210px) / 2)); padding-right: max(28px, calc((100vw - 1210px) / 2)); display: grid; grid-template-columns: 1fr .86fr; gap: 80px; align-items: center; color: #fff; background: var(--public-navy); }
.public-proof-offer > div:first-child p:last-child { max-width: 610px; color: #aebbd1; }
.public-proof-offer .public-eyebrow { color: var(--public-teal-light); }
.public-offer-card { padding: 32px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(255,255,255,.07); }
.public-offer-card > strong { display: block; font-family: var(--pub-serif); font-size: 1.35rem; }
.public-offer-card ol { margin: 22px 0 26px; padding-left: 22px; color: #c7d2e4; font-size: .86rem; }
.public-offer-card li { margin: 11px 0; padding-left: 6px; }

.public-economics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.public-economics-grid article { padding: 30px 28px; border-top: 3px solid var(--public-teal); background: var(--public-soft); }
.public-economics-grid strong { display: block; color: var(--public-navy); font-family: var(--pub-serif); font-size: 2.5rem; letter-spacing: -.03em; }
.public-economics-grid span { display: block; margin-top: 12px; color: var(--public-muted); font-size: .8rem; }

.public-security { max-width: none; padding-left: max(28px, calc((100vw - 1210px) / 2)); padding-right: max(28px, calc((100vw - 1210px) / 2)); background: var(--public-soft); }
.public-security > div:first-child { max-width: 780px; }
.public-security .public-micro { margin: 26px 0 0; max-width: 88ch; }

/* ----- FAQ — objections, answered ----- */

.public-faq { max-width: 1210px; }
.public-faq-list { max-width: 860px; border-top: 1px solid var(--public-line); }
.public-faq details { border-bottom: 1px solid var(--public-line); }
.public-faq summary {
  padding: 24px 44px 24px 0; position: relative; cursor: pointer; list-style: none;
  font-family: var(--pub-serif); font-size: 1.16rem; letter-spacing: -.01em;
}
.public-faq summary::-webkit-details-marker { display: none; }
.public-faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--public-teal-dark); font-family: var(--pub-mono); font-size: 1.15rem; transition: transform .2s;
}
.public-faq details[open] summary::after { content: "\2212"; }
.public-faq details p { margin: 0; padding: 0 60px 26px 0; color: var(--public-muted); font-size: .93rem; max-width: 74ch; }

/* ----- final CTA + footer ----- */

.public-final-cta {
  position: relative; padding: 120px 28px; text-align: center; color: #fff; overflow: hidden;
  background:
    radial-gradient(700px 420px at 50% 0%, rgba(19, 184, 166, .18), transparent 70%),
    linear-gradient(150deg, var(--public-navy), var(--public-navy-2));
}
.public-final-cta h2 { max-width: 880px; margin-left: auto; margin-right: auto; }
.public-final-cta > p:not(.public-eyebrow) { max-width: 680px; margin: 0 auto 30px; color: #aebbd1; }
.public-final-cta .public-eyebrow { color: var(--public-teal-light); justify-content: center; }
.public-final-cta .public-actions { justify-content: center; }
.public-final-cta .public-button { background: var(--public-teal); border-color: var(--public-teal); color: #06231f !important; box-shadow: 0 12px 30px rgba(19,184,166,.3); }
.public-final-cta .public-button:hover { box-shadow: 0 16px 36px rgba(19,184,166,.4); }
.public-final-cta .public-button-secondary { background: transparent; border-color: #61708d; color: #fff !important; }

.public-footer {
  max-width: 1210px; margin: 0 auto; padding: 38px 28px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px;
  border-top: 3px double var(--public-line);
}
.public-footer > div:nth-child(2) { display: flex; gap: 22px; font-size: .78rem; font-weight: 700; }
.public-footer > div:nth-child(2) a:hover { color: var(--public-teal-dark); }
.public-footer > p { grid-column: 1 / -1; margin: 0; color: #8490a3; font-family: var(--pub-mono); font-size: .62rem; letter-spacing: .05em; }

/* Public sample decision-pack excerpt. */
.public-sample-site { background: #eef2f7; }
.public-sample-site .public-nav { max-width: 1120px; }
.sample-wrap { max-width: 1064px; margin: 24px auto 72px; padding: 0 24px; }
.sample-disclaimer { margin-bottom: 18px; padding: 13px 17px; border: 1px solid #f0d796; border-radius: 8px; background: #fff8e6; color: #755b20; font-size: .73rem; }
.sample-cover, .sample-section { background: #fff; border: 1px solid var(--public-line); }
.sample-cover { min-height: 280px; padding: 50px 52px; display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; border-radius: 15px 15px 0 0; background: linear-gradient(145deg, #fff, #eef4ff); }
.sample-cover h1 { margin-bottom: 12px; font-size: clamp(2.6rem, 6vw, 4.8rem); }
.sample-cover > div:first-child > p:last-child { color: var(--public-muted); font-size: .75rem; }
.sample-verdict { min-width: 230px; padding: 21px; display: flex; flex-direction: column; border-left: 5px solid var(--public-teal); background: #fff; box-shadow: 0 12px 28px rgba(18, 35, 68, .12); }
.sample-verdict span { color: var(--public-muted); font-size: .62rem; letter-spacing: .11em; text-transform: uppercase; }
.sample-verdict strong { margin: 8px 0; color: var(--public-teal-dark); font-size: 1.3rem; }
.sample-verdict small { color: var(--public-muted); font-size: .67rem; }
.sample-section { padding: 45px 52px; border-top: 0; }
.sample-section h2 { font-size: 2rem; }
.sample-thesis > p { color: var(--public-muted); }
.sample-conditions { display: grid; gap: 9px; margin-top: 26px; }
.sample-conditions article { padding: 15px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 12px; border: 1px solid #f0c6ca; border-radius: 7px; background: #fff7f7; font-size: .78rem; }
.sample-conditions b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #dc4654; color: #fff; }
.sample-section-title { display: flex; justify-content: space-between; gap: 20px; }
.sample-section-title > span { height: fit-content; padding: 7px 10px; border-radius: 6px; background: #fff0f1; color: #bd3341; font-size: .66rem; font-weight: 900; }
.sample-table { border: 1px solid var(--public-line); border-radius: 8px; overflow: hidden; }
.sample-table > div { min-height: 64px; padding: 13px 15px; display: grid; grid-template-columns: .65fr 2.2fr 1fr 1fr; align-items: center; gap: 15px; border-top: 1px solid var(--public-line); font-size: .7rem; }
.sample-table > div:first-child { border-top: 0; }
.sample-table .sample-table-head { min-height: auto; background: #eef2f7; color: #6c7890; font-size: .59rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sample-table code { color: #65738b; font-size: .61rem; }
.sample-table b { color: #46536b; }
.sample-compare { background: #0d1933; color: #fff; }
.sample-compare .public-eyebrow { color: #55d9cd; }
.sample-compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sample-compare-grid article { padding: 21px; display: grid; grid-template-columns: 1fr auto; align-items: end; border: 1px solid #30405f; border-radius: 8px; background: #152441; }
.sample-compare-grid span, .sample-compare-grid small { color: #8ea0bd; font-size: .62rem; }
.sample-compare-grid strong { font-size: 1.65rem; }
.sample-compare-grid i { grid-column: 1 / -1; margin: 10px 0; color: #55d9cd; font-style: normal; }
.sample-economics .public-grid-three article { padding: 22px; background: var(--public-soft); }
.sample-economics .public-grid-three span { margin-bottom: 6px; color: var(--public-muted); font-size: .62rem; text-transform: uppercase; }
.sample-economics .public-grid-three strong { display: block; color: var(--public-blue); font-size: 1.75rem; }
.sample-challenge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sample-challenge-grid article { padding: 21px; border: 1px solid var(--public-line); border-radius: 8px; }
.sample-challenge-grid p { margin: 9px 0 13px; color: var(--public-muted); font-size: .72rem; }
.sample-challenge-grid span { padding: 5px 7px; border-radius: 5px; background: #e8f7f5; color: var(--public-teal-dark); font-size: .61rem; font-weight: 900; }
.sample-cta { border-radius: 0 0 15px 15px; }
.sample-cta small { display: block; margin-top: 17px; color: #cbd8f6; font-size: .66rem; }

@media (max-width: 980px) {
  .public-nav nav > a:not(.public-button):not([href="/login"]) { display: none; }
  .public-hero { grid-template-columns: 1fr; gap: 50px; }
  .public-verdict-card { max-width: 650px; }
  .pw-block { grid-template-columns: 1fr; gap: 34px; padding: 38px 0; }
  .pw-block:nth-of-type(even) > .pw-copy { order: 0; }
  .public-benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .public-benefit-grid article { border-bottom: 1px solid var(--public-line); }
  .public-pov-item { grid-template-columns: 1fr; gap: 8px; }
  .public-pov::before { font-size: 18rem; }
  .public-proof-offer { grid-template-columns: 1fr; gap: 42px; }
  .sample-compare-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .public-nav { padding: 12px 18px; }
  .public-nav nav { gap: 10px; }
  .public-nav nav > a[href="/login"] { display: none; }
  .public-brand small { display: none; }
  .public-button-small { padding: 8px 10px; }
  .public-hero { min-height: auto; padding: 70px 22px 95px; }
  .public-hero h1 { font-size: 3.4rem; }
  .public-actions { align-items: stretch; flex-direction: column; }
  .public-proof-strip { margin: -48px 18px 0; grid-template-columns: repeat(2, 1fr); }
  .public-proof-strip div { border-bottom: 1px solid var(--public-line); }
  .public-proof-strip div:nth-child(2) { border-right: 0; }
  .public-section { padding: 80px 22px; }
  .public-grid-three, .public-grid-two, .public-economics-grid, .public-benefit-grid, .sample-challenge-grid { grid-template-columns: 1fr; }
  .public-benefit-grid article { border-right: 0; }
  .public-faq details p { padding-right: 8px; }
  .public-footer { grid-template-columns: 1fr; }
  .public-footer > p { grid-column: auto; }
  .sample-wrap { padding: 0 12px; }
  .sample-cover { padding: 34px 24px; align-items: flex-start; flex-direction: column; }
  .sample-section { padding: 34px 22px; }
  .sample-section-title { flex-direction: column; }
  .sample-table { overflow-x: auto; }
  .sample-table > div { min-width: 720px; }
}