/* 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 revenue-conversion site ---------- */

.public-site {
  --public-navy: #081229;
  --public-navy-2: #102046;
  --public-ink: #10192d;
  --public-muted: #5b667b;
  --public-teal: #13b8a6;
  --public-teal-dark: #087f76;
  --public-blue: #3467eb;
  --public-line: #dbe2ee;
  --public-soft: #f3f6fa;
  margin: 0;
  background: #fff;
  color: var(--public-ink);
  font-size: 16px;
  line-height: 1.55;
}
.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 { letter-spacing: -0.035em; line-height: 1.05; }
.public-site h2 { font-size: clamp(2rem, 4vw, 3.35rem); margin-bottom: 1rem; }
.public-site h3 { font-size: 1.04rem; margin-bottom: .55rem; }

.public-nav {
  min-height: 76px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fff;
}
.public-nav nav { display: flex; align-items: center; gap: 24px; font-size: .84rem; font-weight: 700; }
.public-nav nav > a:not(.public-button):hover { color: var(--public-blue); }
.public-brand { display: inline-flex; align-items: center; gap: 11px; }
.public-brand-mark {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--public-blue), #705bf2); color: #fff;
  box-shadow: 0 8px 20px rgba(52, 103, 235, .25); font-size: .78rem; font-weight: 900;
}
.public-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.public-brand strong { font-size: .96rem; }
.public-brand small { margin-top: 4px; color: #738097; font-size: .61rem; letter-spacing: .08em; text-transform: uppercase; }

.public-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px;
  padding: 13px 20px; border: 1px solid var(--public-blue); border-radius: 9px;
  background: var(--public-blue); color: #fff !important; font-weight: 800; font-size: .86rem;
  box-shadow: 0 10px 24px rgba(52, 103, 235, .2); transition: transform .15s, box-shadow .15s;
}
.public-button:hover { transform: translateY(-1px); box-shadow: 0 13px 28px rgba(52, 103, 235, .28); }
.public-button-small { min-height: 40px; padding: 9px 14px; font-size: .76rem; }
.public-button-secondary { border-color: #b9c4d6; background: transparent; color: var(--public-ink) !important; box-shadow: none; }
.public-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.public-eyebrow { margin-bottom: 13px; color: var(--public-teal-dark); font-size: .73rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.public-micro { color: #77839a; font-size: .77rem; }

.public-hero {
  min-height: 650px; padding: 88px max(28px, calc((100vw - 1184px) / 2));
  display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(360px, .8fr); align-items: center; gap: 76px;
  color: #fff;
  background:
    radial-gradient(780px 480px at 85% 10%, rgba(52, 103, 235, .24), transparent 65%),
    radial-gradient(540px 400px at 0% 100%, rgba(19, 184, 166, .14), transparent 70%),
    linear-gradient(145deg, var(--public-navy), var(--public-navy-2));
}
.public-hero .public-eyebrow { color: #55d9cd; }
.public-hero h1 { margin-bottom: 24px; font-size: clamp(3.7rem, 7vw, 6.4rem); font-weight: 750; }
.public-hero h1 span { color: #52d6ca; }
.public-lede { max-width: 720px; margin-bottom: 30px; color: #cbd7eb; font-size: clamp(1.05rem, 1.8vw, 1.32rem); line-height: 1.62; }
.public-hero .public-micro { margin: 18px 0 0; color: #8798b5; }
.public-hero .public-button-secondary { border-color: #61708d; color: #fff !important; }

.public-verdict-card {
  overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
  background: rgba(255,255,255,.97); color: var(--public-ink); box-shadow: 0 30px 80px rgba(0,0,0,.33);
}
.public-verdict-top { padding: 18px 22px; display: flex; justify-content: space-between; gap: 12px; background: #edf2fb; color: #6c7890; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.public-verdict-top b { color: var(--public-teal-dark); }
.public-verdict-card h2 { padding: 25px 22px 11px; font-size: 1.6rem; letter-spacing: -.025em; }
.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: .78rem; }
.public-risk-row b { color: #6d7890; font-size: .66rem; text-transform: uppercase; }
.public-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.public-dot-red { background: #dc4654; box-shadow: 0 0 0 4px rgba(220,70,84,.1); }
.public-dot-amber { background: #e19a20; box-shadow: 0 0 0 4px rgba(225,154,32,.11); }
.public-verdict-foot { padding: 14px 22px; display: flex; gap: 8px; flex-wrap: wrap; background: #f7f9fc; }
.public-verdict-foot span { padding: 5px 8px; border-radius: 5px; background: #e8f7f5; color: #087b72; font-size: .62rem; font-weight: 800; }

.public-proof-strip {
  max-width: 1184px; margin: -36px auto 0; position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--public-line); border-radius: 14px;
  background: #fff; box-shadow: 0 20px 48px rgba(17, 34, 67, .13);
}
.public-proof-strip div { padding: 22px 26px; 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-size: 1.85rem; line-height: 1; }
.public-proof-strip span { margin-top: 8px; color: var(--public-muted); font-size: .72rem; }

.public-section { max-width: 1184px; margin: 0 auto; padding: 110px 28px; }
.public-section-head { max-width: 820px; margin-bottom: 42px; }
.public-section-head > p:last-child { color: var(--public-muted); font-size: 1.04rem; }
.public-problem > div:first-child { max-width: 860px; margin-bottom: 48px; }
.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: 27px; border: 1px solid var(--public-line); border-radius: 12px; background: #fff; }
.public-grid-three article > span:first-child { display: block; margin-bottom: 24px; color: var(--public-blue); font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
.public-grid-three p { margin-bottom: 0; color: var(--public-muted); font-size: .87rem; }

.public-method { max-width: none; padding-left: max(28px, calc((100vw - 1184px) / 2)); padding-right: max(28px, calc((100vw - 1184px) / 2)); background: var(--public-soft); }
.public-method-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 14px; }
.public-method-flow article { padding: 26px 22px; border: 1px solid var(--public-line); border-radius: 12px; background: #fff; }
.public-method-flow article > span { width: 30px; height: 30px; margin-bottom: 22px; display: grid; place-items: center; border-radius: 50%; background: #e9efff; color: var(--public-blue); font-size: .7rem; font-weight: 900; }
.public-method-flow article p { margin-bottom: 0; color: var(--public-muted); font-size: .79rem; }
.public-method-flow > b { align-self: center; color: #9ba7ba; }

.public-deliverables .public-grid-two { border: 1px solid var(--public-line); border-radius: 14px; overflow: hidden; }
.public-deliverables ul { margin: 0; padding: 30px 36px; list-style: none; }
.public-deliverables ul + ul { border-left: 1px solid var(--public-line); background: #f8fafc; }
.public-deliverables li { padding: 12px 0 12px 28px; position: relative; border-bottom: 1px solid #e6ebf3; color: #3d4960; font-size: .87rem; }
.public-deliverables li:last-child { border-bottom: 0; }
.public-deliverables li::before { content: "\2713"; position: absolute; left: 0; color: var(--public-teal-dark); font-weight: 900; }

.public-proof-offer { max-width: none; padding-left: max(28px, calc((100vw - 1184px) / 2)); padding-right: max(28px, calc((100vw - 1184px) / 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: #55d9cd; }
.public-offer-card { padding: 30px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.08); }
.public-offer-card > strong { display: block; font-size: 1.3rem; }
.public-offer-card ol { margin: 21px 0 25px; padding-left: 22px; color: #c7d2e4; font-size: .85rem; }
.public-offer-card li { margin: 10px 0; padding-left: 5px; }

.public-economics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.public-economics-grid article { padding: 28px; border-top: 4px solid var(--public-teal); background: var(--public-soft); }
.public-economics-grid strong { display: block; color: var(--public-navy); font-size: 2.25rem; letter-spacing: -.05em; }
.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 - 1184px) / 2)); padding-right: max(28px, calc((100vw - 1184px) / 2)); background: var(--public-soft); }
.public-security > div:first-child { max-width: 760px; }
.public-security .public-micro { margin: 24px 0 0; }

.public-final-cta { padding: 105px 28px; text-align: center; color: #fff; background: linear-gradient(140deg, #315ed5, #2446ab); }
.public-final-cta h2 { max-width: 900px; margin-left: auto; margin-right: auto; }
.public-final-cta > p:not(.public-eyebrow) { max-width: 700px; margin: 0 auto 28px; color: #dce5fb; }
.public-final-cta .public-eyebrow { color: #89eee4; }
.public-final-cta .public-actions { justify-content: center; }
.public-final-cta .public-button { background: #fff; border-color: #fff; color: #2446ab !important; }
.public-final-cta .public-button-secondary { background: transparent; border-color: #94aceb; color: #fff !important; }

.public-footer { max-width: 1184px; margin: 0 auto; padding: 35px 28px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; }
.public-footer > div:nth-child(2) { display: flex; gap: 22px; font-size: .78rem; font-weight: 800; }
.public-footer > div:nth-child(2) a:hover { color: var(--public-blue); }
.public-footer > p { grid-column: 1 / -1; margin: 0; color: #8490a3; font-size: .68rem; }

/* 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; }
  .public-method-flow { grid-template-columns: repeat(2, 1fr); }
  .public-method-flow > b { display: none; }
  .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.5rem; }
  .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: 76px 22px; }
  .public-grid-three, .public-grid-two, .public-economics-grid, .public-method-flow, .sample-challenge-grid { grid-template-columns: 1fr; }
  .public-deliverables ul + ul { border-left: 0; border-top: 1px solid var(--public-line); }
  .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; }
}
