:root {
  --pink:        #FFCADF;
  --lavender:    #EED1FF;
  --blue-ice:    #D0F2FF;
  --blue-sky:    #B7EBFF;
  --mint:        #C3F2D0;
  --peach-warm:  #D8AAFF;
  --off-white:   #FFFFFB;
  --warm-cream:  #FFF9F4;
  --near-black:  #232323;
  --text-subtle: #6B6B6B;
  --border:      #E8E2DC;
  --grad:   linear-gradient(135deg, #C3F2D0 0%, #B3EAFF 53%, #FEE3CC 100%);
  --grad-h: linear-gradient(90deg, #C3F2D0 0%, #B3EAFF 53%, #FEE3CC 100%);
  --nav-h: 44px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }
body { font-family: 'Raleway', sans-serif; background: var(--warm-cream); color: var(--near-black); overflow-x: hidden; }

/* ── TOP NAV ── */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  height: var(--nav-h);
  background: #1C1C1E; padding: 0 32px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.topnav-logo { display: flex; align-items: center; gap: 8px; margin-right: 4px; cursor: pointer; transition: opacity 0.15s; }
.topnav-logo:hover { opacity: 0.78; }
.topnav-logo svg, .topnav-logo img { width: 24px; height: 24px; display: block; }
.topnav a.tab-link {
  color: rgba(255,255,255,0.45); text-decoration: none; font-weight: 600; font-size: 13px;
  transition: color 0.15s; padding: 4px 10px; border-radius: 6px;
  display: flex; align-items: center; gap: 6px;
}
.topnav a.tab-link:hover { color: #fff; background: rgba(255,255,255,0.07); }
.topnav a.tab-link.active { color: #fff; background: rgba(255,255,255,0.1); }
.topnav a.tab-link.inactive { opacity: 0.3; pointer-events: none; cursor: default; }
.tab-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 800;
  background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7);
}
.tab-link.active .tab-num { background: var(--mint); color: #1a5c2a; }
.nav-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.12); }

/* ── TAB PANELS ── */
.tab-panel { display: none; padding-top: var(--nav-h); }
.tab-panel.active { display: block; }

/* ══════════════════════════════════
   TABS 1 & 2 — PLACEHOLDERS
   ══════════════════════════════════ */
.placeholder-screen {
  min-height: calc(100vh - var(--nav-h));
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px; color: var(--text-subtle); text-align: center; padding: 40px;
}
.placeholder-screen .icon { font-size: 44px; opacity: 0.25; }
.placeholder-screen strong { font-size: 15px; color: var(--near-black); font-weight: 700; }
.placeholder-screen p { font-size: 13px; max-width: 320px; line-height: 1.6; }

/* ══════════════════════════════════
   TAB 3 — APPENDIX (SLIDE DECK)
   ══════════════════════════════════ */
.deck {
  height: calc(100vh - var(--nav-h));
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.slide {
  min-height: calc(100vh - var(--nav-h));
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px clamp(28px, 7vw, 112px) 56px;
  position: relative; border-bottom: 1px solid var(--border);
}
.slide-inner { max-width: clamp(1080px, 75vw, 2000px); margin: 0 auto; width: 100%; }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #2a8c4a; margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: '✦';
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.slide h2 {
  font-size: clamp(24px, 3.4vw, 42px); font-weight: 800;
  line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 22px;
}
.slide h2 .grad, .cover h1 .grad {
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.lead { font-size: clamp(14px, 1.5vw, 18px); line-height: 1.65; color: var(--text-subtle); max-width: 740px; }
.lead strong { color: var(--near-black); font-weight: 700; }
.grad-strip { height: 5px; width: 72px; background: var(--grad-h); border-radius: 3px; margin-bottom: 26px; }
.slide-num {
  position: absolute; bottom: 20px; right: clamp(28px, 7vw, 112px);
  font-size: 11px; font-weight: 700; color: var(--border); letter-spacing: 0.1em;
}

/* cover */
.cover { background: var(--near-black); border-bottom: none; }
.cover::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 56px;
  background: var(--warm-cream); clip-path: ellipse(60% 100% at 50% 100%);
}
.cover .eyebrow { color: var(--mint); }
.cover h1 {
  font-size: clamp(34px, 6vw, 76px); font-weight: 800; color: var(--off-white);
  line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 20px; max-width: 16ch;
}
.cover .sub { font-size: clamp(13px, 1.4vw, 17px); color: #b8b8b8; max-width: 580px; line-height: 1.65; }
.cover-meta { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 32px; }
.cover-meta div { font-size: 12px; color: #8a8a8a; }
.cover-meta strong { display: block; color: var(--off-white); font-weight: 600; font-size: 13px; margin-top: 2px; }
.priority-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; margin-top: 24px;
}
.priority-opp  { background: var(--mint); color: #1a5c2a; border: 1px solid #8edda0; }
.priority-pri  { background: var(--pink); color: #7a1a3a; border: 1px solid #ffaaca; }
.scroll-hint {
  position: absolute; bottom: 72px; left: 50%; transform: translateX(-50%);
  color: #8a8a8a; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }

/* grids */
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.threecol { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media(max-width:760px){.twocol,.threecol{grid-template-columns:1fr}}

/* cards */
.card { background: var(--off-white); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.card h3 { font-size: 13px; font-weight: 700; margin-bottom: 7px; display: flex; align-items: center; gap: 8px; }
.card p { font-size: 12.5px; line-height: 1.55; color: var(--text-subtle); }
.card .rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--near-black); color: var(--off-white); font-size: 10px; font-weight: 800; flex-shrink: 0;
}
.card.client { border: 2px solid var(--peach-warm); background: #fdf6ff; }
.tag-client { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6a0dad; background: var(--lavender); padding: 2px 7px; border-radius: 999px; }
.tag-gap    { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #1a5c2a; background: var(--mint); padding: 2px 7px; border-radius: 999px; }

/* pills */
.pill { padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; display: inline-block; }
.pill-mint { background: var(--mint); color: #1a5c2a; border: 1px solid #8edda0; }
.pill-ice  { background: var(--blue-ice); color: #1a4a5c; border: 1px solid var(--blue-sky); }
.pill-lav  { background: var(--lavender); color: #4a1a7a; border: 1px solid var(--peach-warm); }

/* FIXED: list items use display:block so strong tags never create a three-column layout */
ul.clean { list-style: none; display: flex; flex-direction: column; gap: 11px; }
ul.clean li {
  display: block;        /* CRITICAL: block, not flex */
  font-size: 13.5px; line-height: 1.6;
  padding-left: 22px; position: relative;
}
ul.clean li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 9px; height: 9px; border-radius: 2px; background: var(--grad-h);
}
ul.clean li strong { display: inline; font-weight: 700; } /* CRITICAL: inline, never block or flex */

/* tables */
.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--off-white); border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.data-table th { background: var(--near-black); color: var(--off-white); text-align: left; padding: 10px 15px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.data-table td { padding: 10px 15px; border-bottom: 1px solid var(--border); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:nth-child(even) td { background: var(--warm-cream); }
.data-table .pos { color: #2a8c4a; font-weight: 700; }
.data-table .neg { color: #b03a3a; font-weight: 700; }
.data-table .zero { color: var(--text-subtle); }
.data-table tr.total td { font-weight: 700; background: var(--near-black); color: var(--off-white); }

/* kpi */
.kpi-strip { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.kpi { background: var(--off-white); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; min-width: 160px; }
.kpi .n { font-size: 32px; font-weight: 800; line-height: 1; margin-bottom: 5px; letter-spacing: -0.02em; }
.kpi .n .grad { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.kpi .l { font-size: 11px; color: var(--text-subtle); font-weight: 600; line-height: 1.4; }

/* schema badges */
.schema-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; margin-bottom: 5px; }
.badge-keep   { background: var(--mint); color: #1a5c2a; }
.badge-revise { background: #FFF3CD; color: #7a4f00; border: 1px solid #f0d070; }
.badge-add    { background: var(--pink); color: #7a1a3a; }

/* closing dark slide */
.close-slide { background: var(--near-black); }
.close-slide::before {
  content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 56px;
  background: var(--warm-cream); clip-path: ellipse(60% 100% at 50% 0%);
}
.close-slide .eyebrow { color: var(--mint); }
.close-slide h1 {
  font-size: clamp(26px, 4.5vw, 58px); font-weight: 800; color: var(--off-white);
  line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 16px;
}
.close-slide .sub { font-size: clamp(13px, 1.4vw, 16px); color: #b8b8b8; max-width: 600px; line-height: 1.65; margin-bottom: 20px; }
.priority-banner {
  display: inline-block; padding: 7px 18px; border-radius: 999px; margin-bottom: 24px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--mint); color: #1a5c2a;
}

/* progress dots — CRITICAL: top offset accounts for nav */
.dots {
  position: fixed; right: 16px;
  top: calc(var(--nav-h) + 50%);   /* offset from nav, not viewport top */
  transform: translateY(-50%);
  z-index: 9000; display: flex; flex-direction: column; gap: 9px;
}
.dots a { width: 7px; height: 7px; border-radius: 50%; background: var(--border); border: 1px solid #d8d2cc; transition: all 0.2s; display: block; }
.dots a.active { background: var(--near-black); transform: scale(1.3); }
/* ===== CONTRAST GUARD (added 2026-09-15) — keep this block at the END of the file =====
   Dark surfaces own their text color so nothing placed inside them can inherit body
   near-black and vanish. Before this, a bundle that dropped an <h2>/<p>/<td> the shell
   never styled into .cover or .close-slide rendered black-on-black. Light cards/tables
   nested inside dark slides re-assert dark text. Verified by contrast-audit.py (Phase 10). */
.cover,.close-slide{color:var(--off-white);}
.cover h2,.cover h3,.cover h4,.cover p,.cover li,.cover td:not([class]),.cover span:not([class]),.cover strong:not([class]),.cover em:not([class]),.cover a:not([class]),
.close-slide h2,.close-slide h3,.close-slide h4,.close-slide p,.close-slide li,.close-slide td:not([class]),.close-slide span:not([class]),.close-slide strong:not([class]),.close-slide em:not([class]),.close-slide a:not([class]){color:inherit;}
.cover .lead,.close-slide .lead{color:#b8b8b8;}
.cover .lead strong,.close-slide .lead strong{color:var(--off-white);}
.cover .priority-pill:not(.priority-opp):not(.priority-pri),.close-slide .priority-pill:not(.priority-opp):not(.priority-pri){border:1px solid rgba(255,255,255,0.35);color:var(--off-white);}
.cover .card,.close-slide .card,.cover .data-table,.close-slide .data-table,.cover .kw-table,.close-slide .kw-table{color:var(--near-black);}
.cover .card h3,.close-slide .card h3{color:var(--near-black);}
.cover .card p,.close-slide .card p{color:var(--text-subtle);}
/* slide counter was var(--border) on cream (1.2:1, effectively invisible) */
.slide-num{color:#8f8983;}
.cover .slide-num,.close-slide .slide-num{color:rgba(255,255,255,0.55);}