@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --cs-blue:#1E42A8; --cs-blue-dark:#163386; --cs-blue-400:#4B7FE5;
  --navy:#0F1729; --navy-mid:#1A2744; --off-white:#F7F6F3; --warm-rule:#E6E2DC;
  --reuse-green:#059669; --reuse-green-bright:#34D399;
  --slate-600:#4B5563; --slate-400:#94A3B8;
  /* v15: titles unified to Inter (Fraunces retired). Revert = restore 'Fraunces',Georgia,serif and re-add it to the @import above. */
  --serif:'Inter',system-ui,sans-serif; --sans:'Inter',system-ui,sans-serif;
  --mx:8%; --my:7%;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0b0b0c}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased}
.deck{display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px}
.slide{position:relative;width:1280px;height:720px;overflow:hidden;background:var(--off-white);
  color:var(--navy);flex:0 0 auto;box-shadow:0 8px 40px rgba(0,0,0,.35)}
.slide.navy{background:radial-gradient(120% 120% at 20% 0%,var(--navy-mid),var(--navy));color:#fff}
.pad{position:absolute;inset:var(--my) var(--mx)}

/* type system */
.kicker{font:700 18px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cs-blue)}
.slide.navy .kicker{color:var(--cs-blue-400)}
h1,h2{font-family:var(--serif);font-weight:800;letter-spacing:-.025em;line-height:1.02}
.title{font-size:60px}
.big-num{font-family:var(--serif);font-weight:800;letter-spacing:-.03em;line-height:.9}
.lead{font-size:26px;line-height:1.35;color:var(--slate-600);max-width:60ch}
.slide.navy .lead{color:#cdd6e6}
.foot{position:absolute;left:var(--mx);right:var(--mx);bottom:36px;display:flex;justify-content:space-between;
  align-items:center;font:500 16px/1 var(--sans);color:var(--slate-600);
  border-top:1px solid var(--warm-rule);padding-top:10px}
.slide.navy .foot{display:none}
.rule{width:64px;height:4px;background:var(--cs-blue);border:0}
.slide.navy .rule{background:var(--cs-blue-400)}

/* slide 05 — five-chip row */
.chips{position:absolute;left:0;right:0;bottom:26px;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.chip{border:2px solid var(--cs-blue);border-radius:14px;padding:20px 16px;min-height:188px;display:flex;flex-direction:column}
.chip .l{font:800 40px/1 var(--sans);color:var(--cs-blue)}
.chip .n{font:700 18px/1.2 var(--sans);margin-top:12px}
.chip .ex{color:var(--slate-600);font-size:15px;margin-top:8px;line-height:1.35}
.chip.out{border-color:var(--reuse-green);background:rgba(5,150,105,.06)}
.chip.out .l{color:var(--reuse-green)}

/* slide 07 — two-column blue|green split */
.split{position:absolute;left:0;right:0;top:205px;bottom:128px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.split .col{padding:28px 36px}
.split .col.blue{border-right:2px solid var(--warm-rule)}
.split .h{font:800 16px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.split .blue .h{color:var(--cs-blue)} .split .green .h{color:var(--reuse-green)}
.split .t{font-family:var(--serif);font-weight:600;font-size:34px;margin:10px 0 18px}
.split ul{list-style:none}
.split li{font-size:20px;color:var(--slate-600);margin:10px 0}
.synth{position:absolute;left:8%;right:8%;bottom:70px;text-align:center;font:600 21px/1.4 var(--serif);color:var(--navy)}

/* slide 11 — coverage table */
.cov{position:absolute;left:0;right:0;top:184px;border-collapse:collapse;width:100%;font-size:18px}
.cov th{text-align:left;font:700 14px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-600);padding:8px 12px;border-bottom:2px solid var(--warm-rule)}
.cov td{padding:5px 12px;border-bottom:1px solid var(--warm-rule)}
.cov td.num{text-align:right;font-variant-numeric:tabular-nums}
.cov .bar{height:10px;background:var(--cs-blue);border-radius:5px}
.covhead{position:absolute;left:0;top:150px;font:700 18px/1 var(--sans);color:var(--cs-blue)}

/* slide 12 — 3-step flow */
.flow{position:absolute;left:0;right:0;top:170px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch}
.node{border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:22px;background:rgba(255,255,255,.04)}
.node .s{font:800 14px/1 var(--sans);color:var(--cs-blue-400);letter-spacing:.1em}
.node .x{font:600 22px/1.3 var(--serif);color:#fff;margin-top:10px}
.node .d{color:#9fb4e0;font-size:15px;margin-top:8px}
.node.loop{border-color:rgba(52,211,153,.5)} .node.loop .s{color:var(--reuse-green-bright)}
.arrow{align-self:center;color:#6b7da3;font-size:30px;padding:0 14px}

/* slide 08 — demo storyboard (3 screenshot frames) */
.shots{position:absolute;left:0;right:0;top:170px;bottom:54px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.shot{display:flex;flex-direction:column;margin:0}
.shot .frame{position:relative;flex:1;border:1px solid rgba(255,255,255,.20);border-radius:12px;background:rgba(255,255,255,.04);overflow:hidden}
.shot .frame.loop{border-color:rgba(52,211,153,.55)}
.shot .frame img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top}
.shot .frame .ph{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#7d8db0;font-size:18px;line-height:1.5;gap:6px}
.shot .frame .ph b{font-size:30px}
.shot .frame .ph small{color:#5f7099;font-size:14px}
.shot figcaption{color:#cdd6e6;font-size:17px;line-height:1.35;margin-top:14px}

/* print / export pagination */
@media print{
  html,body{background:#fff}
  .deck{display:block;padding:0;gap:0}
  .slide{box-shadow:none;page-break-after:always;break-after:page}
}
@page{ size:1280px 720px; margin:0 }