/* ==========================================================================
   Client briefing deck.  (product name lives in config.js)
   Print-perfect: each .slide is one 16:9 page. Typography uses container-query
   units (cqw) so it scales identically on screen and in Print-to-PDF.
   Print at 16:9 (13.333in x 7.5in), margins none, "Background graphics" ON.
   ========================================================================== */

:root {
  --bg:#0a0f1a; --bg-2:#0d1424; --surface:#111a2e; --surface-2:#16233c;
  --line:#22314d; --accent:#2f6df6; --accent-bright:#5b9bff; --accent-dim:#1c3a78;
  --text:#e8eef8; --text-2:#aebbd1; --text-3:#7d8aa3;
  --red:#e5484d; --yellow:#f5a524; --green:#2fbf71;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg-2); color:var(--text); font-family:var(--font); }

/* ---- Screen: scrollable stack of slide cards ---- */
.deck { padding:64px 0 96px; }
.slide {
  position:relative;
  width:min(94vw, 1180px);
  aspect-ratio:16/9;
  margin:0 auto 34px;
  background:
    radial-gradient(1100px 520px at 80% -10%, rgba(47,109,246,.16), transparent 60%),
    linear-gradient(180deg, #0b1120, #0a0f1a);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.8);
  overflow:hidden;
  container-type:size;            /* enables cqw/cqh units below */
  color:var(--text);
}
.slide-inner {
  position:absolute; inset:0;
  padding:7cqw 7cqw 5.5cqw;
  display:flex; flex-direction:column;
}

/* Accent rail + slide number + brand chip */
.slide::before { content:""; position:absolute; left:0; top:0; bottom:0; width:0.9cqw; background:linear-gradient(180deg,var(--accent-bright),var(--accent)); }
.slide-no { position:absolute; right:4cqw; bottom:3cqw; font-size:1.5cqw; color:var(--text-3); font-variant-numeric:tabular-nums; }
.slide-brand { position:absolute; right:4cqw; top:3cqw; display:flex; align-items:center; gap:1cqw; font-size:1.6cqw; color:var(--text-2); font-weight:650; }
.slide-brand svg { width:2.6cqw; height:2.6cqw; }

/* Typography (cqw = 1% of slide width → identical on screen & print) */
.eyebrow { font-size:1.6cqw; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-bright); font-weight:700; margin:0 0 2.4cqw; display:flex; align-items:center; gap:1.2cqw; }
.eyebrow::before { content:""; width:3cqw; height:0.2cqw; background:var(--accent); }
h1 { font-size:6.4cqw; line-height:1.05; letter-spacing:-.02em; margin:0 0 2.4cqw; font-weight:750; }
h2 { font-size:4.1cqw; line-height:1.08; letter-spacing:-.02em; margin:0 0 2.2cqw; font-weight:720; }
h3 { font-size:2.4cqw; margin:0 0 1cqw; font-weight:650; }
p  { font-size:2.15cqw; line-height:1.5; color:var(--text-2); margin:0 0 1.4cqw; max-width:44ch; }
.lead { font-size:2.5cqw; color:var(--text-2); }
strong { color:var(--text); font-weight:650; }
.muted { color:var(--text-3); }

/* Layouts */
.center { justify-content:center; }
.split { display:grid; grid-template-columns:1.02fr .98fr; gap:5cqw; align-items:center; flex:1; }
.split.text-first .fig { order:2; }
.fig { background:var(--surface-2); border:1px solid var(--line); border-radius:2cqw; padding:2.4cqw; }
.fig svg { display:block; width:100%; height:auto; }
.fig-cap { font-size:1.3cqw; color:var(--text-3); font-style:italic; margin:1.4cqw 0 0; text-align:center; }

ul { margin:1.6cqw 0 0; padding:0; list-style:none; }
li { position:relative; padding-left:3.4cqw; margin-bottom:1.5cqw; font-size:2.1cqw; color:var(--text-2); line-height:1.4; }
li::before { content:""; position:absolute; left:0; top:.62em; width:1.1cqw; height:1.1cqw; background:var(--accent); transform:rotate(45deg); }

/* Bullet cards row */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:2.4cqw; margin-top:auto; }
.cards.two { grid-template-columns:repeat(2,1fr); }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:1.6cqw; padding:2.6cqw; }
.tile h3 { font-size:2.1cqw; }
.tile p { font-size:1.7cqw; margin:0; }

/* Stats */
.stats { display:flex; gap:5cqw; margin-top:3cqw; }
.stat .num { font-size:5cqw; font-weight:780; line-height:1; letter-spacing:-.02em; }
.stat .num .a { color:var(--accent-bright); }
.stat .lbl { font-size:1.7cqw; color:var(--text-3); margin-top:1cqw; }

/* Title slide */
.title-wrap { flex:1; display:flex; flex-direction:column; justify-content:center; }
.title-badges { display:flex; gap:1.6cqw; flex-wrap:wrap; margin-top:4cqw; }
.chip { font-size:1.6cqw; color:var(--text-2); background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:1cqw 2cqw; }

/* Problem slide accent */
.big-quote { font-size:3.4cqw; line-height:1.25; color:var(--text); font-weight:600; max-width:none; }
.big-quote .em { color:var(--accent-bright); }

/* Pivot slide (live demo) — the moment the deck hands off to the live product */
.slide.pivot {
  background:
    radial-gradient(1200px 620px at 50% -20%, rgba(47,109,246,.28), transparent 62%),
    linear-gradient(180deg, #0c1730, #0a0f1a);
}
.pivot .slide-inner { padding:5.5cqw 7cqw 4.5cqw; }
.pivot-h { font-size:4.8cqw; margin-bottom:.8cqw; }
.pivot .lead { font-size:2.3cqw; margin-bottom:1.4cqw; }
.pivot-fig { text-align:center; margin:0 auto 1.6cqw; }
.pivot-fig svg { width:46cqw; max-width:100%; height:auto; }
.beats { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:1.8cqw; margin:auto 0 0; padding:0; }
.beats li { display:flex; gap:1.2cqw; background:var(--surface); border:1px solid var(--line); border-radius:1.3cqw; padding:1.4cqw 1.6cqw 1.6cqw; }
.beats li::before { content:none; }
.beat-n {
  flex:none; width:2.8cqw; height:2.8cqw; border-radius:0.7cqw; display:flex; align-items:center; justify-content:center;
  background:rgba(47,109,246,.16); border:1px solid var(--accent-dim); color:var(--accent-bright); font-weight:700; font-size:1.5cqw;
}
.beats h3 { font-size:1.6cqw; margin:0 0 .4cqw; line-height:1.16; }
.beats p { font-size:1.25cqw; margin:0; line-height:1.36; max-width:none; }

/* Engagement columns */
.eng { display:grid; grid-template-columns:1fr 1fr; gap:3cqw; margin-top:1cqw; flex:1; align-content:center; }
.eng .col { background:var(--surface); border:1px solid var(--line); border-radius:1.6cqw; padding:3cqw; }
.eng .price-tba { display:inline-block; font-size:1.5cqw; color:var(--yellow); border:1px solid var(--yellow); background:rgba(245,165,36,.08); border-radius:99px; padding:.6cqw 1.6cqw; margin-top:1.6cqw; }

/* Contact slide */
.contact-big { font-size:3cqw; color:var(--accent-bright); font-weight:650; margin-top:1cqw; word-break:break-word; }

/* ---- Toolbar (screen only) ---- */
.toolbar {
  position:fixed; top:16px; right:16px; z-index:100; display:flex; gap:10px; align-items:center;
  background:rgba(13,20,36,.9); backdrop-filter:blur(8px); border:1px solid var(--line);
  border-radius:12px; padding:8px 10px;
}
.toolbar button, .toolbar a {
  font:inherit; font-size:14px; cursor:pointer; border-radius:8px; padding:8px 14px; border:1px solid transparent;
  background:linear-gradient(180deg,var(--accent-bright),var(--accent)); color:#fff; text-decoration:none; font-weight:600;
}
.toolbar .ghost { background:transparent; border:1px solid var(--line); color:var(--text-2); }
.toolbar .count { color:var(--text-3); font-size:13px; padding:0 4px; }

.print-hint { text-align:center; color:var(--text-3); font-size:14px; padding:8px 16px 40px; }

/* ---- Print: one slide per page, exact colors ---- */
@media print {
  @page { size:13.333in 7.5in; margin:0; }
  html,body { background:#0a0f1a; }
  .toolbar, .print-hint { display:none !important; }
  .deck { padding:0; }
  .slide {
    width:13.333in; height:7.5in; margin:0; border:0; border-radius:0;
    box-shadow:none; break-after:page; page-break-after:always;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .slide:last-child { break-after:auto; page-break-after:auto; }
}

@media (max-width:640px){ .slide-inner{ padding:6cqw; } }