/* ============================================================
   THE CHAMP PLAN — presentation deck
   23 slides · arrow keys / space / click to navigate
   ============================================================ */

:root{
  --ink:            #05060f;
  --slide-bg:       #070a18;
  --slide-bg-2:     #0a0d20;
  --card:           #0b0f22;
  --card-2:         #10142a;
  --line:           #1d2440;
  --line-soft:      #161c33;

  --text:           #eef1f8;
  --text-dim:       #aab3c9;
  --text-faint:     #7d879e;

  --violet:         #c2a4f2;
  --indigo:         #a5b0f5;
  --sky:            #8ec9ef;
  --cyan:           #7fe3e8;
  --gold:           #f3c64f;

  --pos:            #7ee0a5;
  --neg:            #f4a0a8;
  --warn:           #f6cf9a;
  --blue:           #7cc0f5;

  --grad-head:      linear-gradient(97deg,#cfa6f5 0%,#b0aef6 32%,#8fc4f2 62%,#7fe0ea 100%);
  --grad-rule:      linear-gradient(90deg,#b98bf0 0%,#8bb7f2 50%,#77e0e6 100%);
  --grad-edge:      linear-gradient(180deg,#b98bf0 0%,#77e0e6 100%);

  --font-head:      "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:      "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--ink);
  font-family:var(--font-body);
  color:var(--text);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  -webkit-font-smoothing:antialiased;
}

/* ---------- stage & scaling ---------- */
#stage{position:relative;width:1280px;height:720px;transform-origin:center center;flex:0 0 auto}

.slide{
  position:absolute;inset:0;
  background:var(--slide-bg);
  border-radius:10px;
  overflow:hidden;
  padding:56px 62px 96px;
  display:none;
  flex-direction:column;
  justify-content:center;
}
.slide-foot{position:absolute;left:62px;right:62px;bottom:40px}
.slide-foot .disclaimer{margin-top:9px}
.slide.is-active{display:flex;animation:fade .32s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.slide--black{background:#05050c}
.slide--divider{background:radial-gradient(120% 90% at 50% 45%,#0b0f24 0%,#05060f 70%)}

/* ---------- brand mark ---------- */
.brandmark{position:absolute;top:20px;left:26px;width:104px;height:45px;
  background:url("assets/brandmark.png") no-repeat left center;background-size:contain;opacity:.97}

/* ---------- headings ---------- */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;letter-spacing:-.015em}

.h-slide{
  font-size:46px;line-height:1.1;text-align:center;font-weight:800;
  background:var(--grad-head);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.13em;
}
.h-slide.sm{font-size:40px}
.h-slide.xs{font-size:35px}
.h-lede{
  text-align:center;font-size:15px;line-height:1.45;font-weight:600;color:#e7ebf5;
  max-width:1000px;margin:16px auto 0;
}
.h-lede.thin{font-weight:500;color:var(--text-dim);font-size:14px}

.kicker{
  display:inline-block;font-family:var(--font-head);font-size:9px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:#cfd8ee;
  border:1px solid #2c3554;border-radius:5px;padding:3px 9px;background:#101736;
}

.footnote{
  text-align:center;font-size:18.5px;font-weight:700;line-height:1.4;font-family:var(--font-head);
  background:var(--grad-head);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.footnote.sm{font-size:16.5px}
.disclaimer{text-align:center;font-size:9.5px;font-style:italic;color:#5d6780;margin-top:10px;letter-spacing:.01em}

.spacer{flex:0 0 auto;height:0}

/* ---------- generic cards ---------- */
.card{
  position:relative;background:linear-gradient(160deg,var(--card) 0%,#080b1b 100%);
  border:1px solid var(--line);border-radius:9px;padding:16px 20px;overflow:hidden;
}
.card--edge{padding-left:24px}
.card--edge::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;
  background:var(--grad-edge);
}
.card h4{font-size:17px;text-align:center;color:#fff;margin-bottom:7px;font-weight:700}
.card p{font-size:12.5px;line-height:1.5;color:var(--text-dim);text-align:center}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}

ul.bul{list-style:none;display:flex;flex-direction:column;gap:6px}
ul.bul li{position:relative;padding-left:15px;font-size:12.5px;line-height:1.45;color:var(--text-dim)}
ul.bul li::before{content:"";position:absolute;left:2px;top:7px;width:4px;height:4px;border-radius:1px;background:#6f7b99}

/* ============ TITLE SLIDE ============ */
.title-wrap{display:flex;align-items:center;justify-content:center;gap:70px;height:100%}
.torch{width:196px;height:auto;flex:0 0 auto;display:block}
.title-text{text-align:center}
.title-text h1{
  font-size:104px;line-height:.98;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(103deg,#b79df3 0%,#a9b3f6 40%,#8fd0f0 72%,#87e2ee 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.title-text .tagline{margin-top:34px;font-size:13.5px;font-weight:600;color:#e9edf6;max-width:420px;margin-left:auto;margin-right:auto;line-height:1.45}

/* ============ DIVIDER SLIDE ============ */
.divider-title{
  margin:auto;text-align:center;font-family:var(--font-head);font-weight:800;
  font-size:84px;line-height:1.18;letter-spacing:-.025em;max-width:900px;padding-bottom:.1em;
  background:var(--grad-head);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============ AGENDA TIMELINE ============ */
.timeline{position:relative;margin:64px 30px 0;display:grid;grid-template-columns:repeat(3,1fr)}
.timeline::before{content:"";position:absolute;top:13px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#3a4568 12%,#3a4568 88%,transparent)}
.tl-node{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 22px}
.tl-num{
  position:relative;z-index:1;width:27px;height:27px;border-radius:5px;background:#252d49;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);
  font-weight:700;font-size:15px;color:#fff;
}
.tl-stem{width:1px;height:26px;background:#3a4568}
.tl-node h4{font-size:18px;color:#fff;margin-bottom:8px;max-width:230px}
.tl-node p{font-size:12.5px;line-height:1.5;color:var(--text-dim);max-width:240px}

/* ============ STAT TRIO (why employers trust) ============ */
.stat-trio{display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px}
.stat{padding:2px 26px;border-left:2px solid;border-image:var(--grad-edge) 1;text-align:center}
.stat:first-child{padding-left:20px}
.stat .big{font-family:var(--font-head);font-size:52px;font-weight:800;color:#fff;line-height:1.05;letter-spacing:-.02em}
.stat .lbl{font-family:var(--font-head);font-size:16px;font-weight:700;color:#fff;margin-top:4px}
.stat .sub{font-size:11.5px;line-height:1.45;color:var(--text-faint);margin-top:8px}

.marquee{margin-top:34px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:scroll 34s linear infinite}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-wm{
  font-family:var(--font-head);font-weight:800;font-size:17px;color:#fff;opacity:.72;
  white-space:nowrap;letter-spacing:.02em;display:flex;align-items:center;height:34px;
}
.logo-wm.serif{font-family:Georgia,serif;font-weight:700;letter-spacing:.06em}
.logo-wm.wide{letter-spacing:.24em;font-size:13px;font-weight:600}
.logo-wm.script{font-family:Georgia,serif;font-style:italic;font-size:20px}

/* ============ ICON CARDS ============ */
.iconcard{position:relative;background:linear-gradient(165deg,#0c1024 0%,#070a18 100%);
  border:1px solid var(--line);border-radius:9px;padding:26px 18px 16px;margin-top:17px}
.iconcard::before{content:"";position:absolute;left:12px;right:12px;top:-1px;height:2px;border-radius:2px;
  background:var(--grad-rule)}
.iconcard .bubble{
  position:absolute;top:-17px;left:50%;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(150deg,#d5c5f7 0%,#b9d4f3 55%,#a8e6ee 100%);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px var(--slide-bg)
}
.iconcard .bubble svg{width:18px;height:18px;stroke:#1d2748;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.iconcard h4{font-size:15.5px;text-align:center;color:#8fc4f2;margin-bottom:9px;line-height:1.25}
.iconcard h4.gold{color:var(--gold)}

/* ============ IS / IS NOT ============ */
.isnot h4{font-size:19px}
.isnot .em-is{color:#9db6f5;font-style:italic}
.isnot .em-not{color:#f08fa6;font-style:italic}
.isnot ul.bul li{font-size:13px}

/* ============ TWO COMPONENT SLIDE ============ */
.combine{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:22px}
.comp{text-align:center}
.comp .comp-title{font-family:var(--font-head);font-weight:700;font-size:17px;color:#fff;margin-top:8px}
.comp .comp-tax{font-size:11px;font-weight:600;margin-top:5px}
.comp .comp-tax.pre{color:#8fb4f2}
.comp .comp-tax.post{color:#7ecb99}
.comp .comp-icon{height:118px;display:flex;align-items:center;justify-content:center;margin:10px 0 6px}
.comp .comp-icon svg{height:112px;width:auto;stroke:#fff;fill:none;stroke-width:5.5;
  stroke-linecap:round;stroke-linejoin:round}
.comp .comp-cap{font-size:9.5px;line-height:1.4;color:var(--text-faint);max-width:330px;margin:0 auto 10px}
.comp .comp-out{font-family:var(--font-head);font-weight:800;font-size:33px;letter-spacing:-.015em}
.comp .comp-out.pre{color:#4f9bf0}
.comp .comp-out.post{color:#4cc07c}
.combine-note{margin-top:20px;border:1px solid var(--line);border-radius:8px;padding:12px 18px;
  text-align:center;font-size:12.5px;font-weight:600;color:#e5eaf4;line-height:1.5}

/* ============ NUMBERED STEPS ============ */
.steps{margin:30px 6px 0;display:flex;flex-direction:column;gap:19px}
.step{display:flex;gap:14px;align-items:flex-start}
.step .n{flex:0 0 auto;width:24px;height:24px;border-radius:5px;background:#252d49;color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.step h4{font-size:19px;color:#fff;text-align:left;margin-bottom:4px}
.step p{font-size:12.5px;font-style:italic;color:#98a2ba;line-height:1.5;text-align:left}
.ghost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:.045}
.ghost svg{height:520px;width:auto;max-width:560px;stroke:#fff;fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}

.chip-hl{border-radius:7px;padding:.04em .22em .16em;display:inline-block;color:#0a1020;
  font-weight:800;line-height:1.2}
.chip-hl.blue{background:#6fb4f4}
.chip-hl.green{background:#79e0a4}

/* ============ PAYCHECK TABLE ============ */
.paytable{margin-top:26px;background:#14151a;border-radius:9px;overflow:hidden}
.paytable .row{display:grid;grid-template-columns:1fr 46px 1fr 46px 1fr;align-items:center;
  padding:18px 22px 20px}
.paytable .cell{text-align:center;padding:0 12px}
.paytable .cell h4{font-size:16px;color:#fff;margin-bottom:8px}
.paytable .cell p{font-size:11.5px;line-height:1.45;color:#9aa4bb}
.paytable .op{display:flex;align-items:center;justify-content:center}
.paytable .op span{width:30px;height:30px;border-radius:7px;background:#1f2128;color:#dbe1ee;
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;font-family:var(--font-head)}
.paytable .divider-v{position:relative}
.paytable .net{border-top:1px solid #22242c;padding:14px 22px 18px;text-align:center}
.paytable .net h4{font-size:17px;color:#fff;margin-bottom:8px}
.paytable .net p{font-size:11.5px;color:#9aa4bb;margin-top:8px}
.money{display:inline-block;font-family:var(--font-head);font-weight:800;font-size:17px;
  border-radius:7px;padding:3px 11px 7px;line-height:1.2;letter-spacing:-.01em}
.money.neg{background:#f9b6bd;color:#1b0d10}
.money.pos{background:#a8ebc4;color:#0c1f15}
.money.warn{background:#f8d7ac;color:#241505}
.money.blue{background:#a4cff7;color:#0b1830}

/* ============ BIG ICON METRIC ROW ============ */
.metrics{display:grid;gap:10px;margin-top:22px;flex:1 1 auto;align-content:center}
.metrics.c3{grid-template-columns:repeat(3,1fr)}
.metrics.c4{grid-template-columns:repeat(4,1fr)}
.metric{text-align:center;display:flex;flex-direction:column;align-items:center}
.metric .ico{height:150px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:16px}
.metric .ico svg{height:140px;width:auto;stroke:#fff;fill:none;stroke-width:5;
  stroke-linecap:round;stroke-linejoin:round}
.metric .ico img{height:150px;width:auto;display:block}
.metric .ico svg.solid{fill:#fff;stroke:none}
.metric .cap{font-family:var(--font-head);font-weight:700;font-size:16px;color:#fff;margin-bottom:9px}
.metric .val{font-family:var(--font-head);font-weight:800;font-size:44px;line-height:1.12;color:#fff;letter-spacing:-.02em}
.metric .val.tag{border-radius:9px;padding:3px 14px 9px}
.metric .val.neg{background:#f9b6bd;color:#12080a}
.metric .val.pos{background:#a8ebc4;color:#08170f}
.metric .val.warn{background:#f8d7ac;color:#1c1004}
.metric .val.blue{background:#a4cff7;color:#08152c}
.metric .sub{font-size:11px;color:#6f7990;margin-top:11px}
.metric .sub.micro{font-size:8.5px;color:#5a6378}
.metric .sub.tiny{font-size:8.5px;color:#5c6680;margin-top:9px}

/* ============ FUNNEL ============ */
.funnel{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:11px}
.funnel .bar{background:#1b1d24;border-radius:7px;text-align:center;padding:13px 20px}
.funnel .bar b{display:block;font-family:var(--font-head);font-size:22px;font-weight:700;color:#fff}
.funnel .bar span{display:block;font-size:11.5px;color:#9aa4bb;margin-top:4px}
.funnel .w1{width:42%}
.funnel .w2{width:54%}
.funnel .w3{width:66%}

/* ============ INVOICE ============ */
.invoice-row{display:grid;grid-template-columns:1fr 46px 1fr 46px 1fr;align-items:center;
  background:#17181e;border-radius:9px;padding:16px 20px;margin-top:22px}
.invoice-row .cell{text-align:center;padding:0 10px}
.invoice-row .cell b{display:block;font-family:var(--font-head);font-size:30px;font-weight:700;color:#fff;letter-spacing:-.01em}
.invoice-row .cell span{display:block;font-size:12.5px;font-weight:600;color:#e2e7f2;margin-top:6px}
.invoice-row .cell span.dim{color:#98a2ba;font-weight:500}
.invoice-row .op span{width:30px;height:30px;border-radius:7px;background:#212329;color:#dbe1ee;
  display:flex;align-items:center;justify-content:center;font-size:17px;font-family:var(--font-head)}

/* ============ PROCESS (5 steps) ============ */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px}
.pstep{text-align:center;padding:0 4px}
.pstep .ico{height:92px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.pstep .ico svg{height:74px;width:auto;stroke:#f0f3fa;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.pstep h4{font-size:14.5px;color:#fff;line-height:1.28;margin-bottom:9px}
.pstep p{font-size:11.5px;line-height:1.48;color:var(--text-dim)}

/* ============ SPLIT (dashboard preview) ============ */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:46px;align-items:center;flex:1 1 auto}
.split .h-slide{text-align:left;font-size:37px}
.split .h-lede{text-align:left;margin-left:0;font-size:13px;margin-top:12px}
.vtimeline{margin-top:22px;position:relative;padding-left:26px}
.vtimeline::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:#2c3554}
.vt-item{position:relative;background:#1b1d24;border-radius:7px;padding:12px 16px;margin-bottom:11px}
.vt-item::before{content:"";position:absolute;left:-30px;top:22px;width:8px;height:8px;border-radius:50%;
  background:#c9d4ee;box-shadow:0 0 0 3px var(--slide-bg)}
.vt-item::after{content:"";position:absolute;left:-22px;top:25px;width:22px;height:1px;background:#2c3554}
.vt-item h4{font-size:15px;color:#fff;text-align:left;margin-bottom:5px}
.vt-item p{font-size:11px;color:#98a2ba;text-align:left;line-height:1.45}

/* proposal dashboard preview */
.pmock{
  background:
    radial-gradient(120% 90% at 18% 118%, #2b3bd6 0%, rgba(43,59,214,0) 58%),
    linear-gradient(168deg,#0a1152 0%,#0c1666 62%,#111d7e 100%);
  border-radius:12px;padding:16px 15px 18px;width:100%;
  box-shadow:0 20px 44px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:9px;
  font-family:var(--font-head);
}
.pm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.pm-co{font-size:13.5px;font-weight:600;color:#ffffff;letter-spacing:.02em;line-height:1.2}
.pm-btn{background:#2f6bf0;color:#fff;font-size:9px;font-weight:700;border-radius:7px;
  padding:7px 11px;white-space:nowrap;letter-spacing:.005em}

.pm-card,.pm-group{background:#e9e9f0;border-radius:11px}
.pm-card{padding:15px 14px;text-align:center}
.pm-group{display:grid;overflow:hidden}
.pm-group.c3{grid-template-columns:repeat(3,1fr)}
.pm-group.c2{grid-template-columns:repeat(2,1fr)}
.pm-cell{padding:14px 9px;text-align:center}
.pm-group.c3 .pm-cell + .pm-cell,
.pm-group.c2 .pm-cell + .pm-cell{border-left:1px solid #c5c6d2}

.pmock b{display:block;font-weight:700;color:#14151c;letter-spacing:-.01em;line-height:1.15}
.pmock span{display:block;color:#3c4050;line-height:1.35}
.pmock strong{font-weight:700;color:#23262f}

.pm-hero b{font-size:27px}
.pm-hero span{font-size:10px;margin-top:3px}
.pm-group.c3 b{font-size:20px}
.pm-group.c3 span{font-size:8.5px;margin-top:4px}
.pm-label{font-size:12px;font-weight:500;color:#eaeeff;margin:1px 0 -1px;letter-spacing:.01em}
.pm-group.c2 b{font-size:20.5px}
.pm-group.c2 .s1{font-size:9px;font-weight:700;color:#23262f;margin-top:5px}
.pm-group.c2 .s2{font-size:8.5px;margin-top:3px}
.pm-agg b{font-size:22px}
.pm-agg span{font-size:8.5px;margin-top:4px}

/* ---------- app screenshots ---------- */
.phone-stage{position:relative;height:444px}
.phone{position:absolute;border-radius:24px;background:#0a0d1c;border:4px solid #c3c8d4;
  box-shadow:0 22px 46px rgba(0,0,0,.65);overflow:hidden}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.phone .notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:44%;height:12px;border-radius:8px;background:#05070f}

/* ---------- chrome: progress + controls ---------- */
#chrome{position:fixed;left:0;right:0;bottom:0;padding:0 0 10px;z-index:30;pointer-events:none}
#segbar{display:flex;gap:2px;padding:0 10px 9px;pointer-events:auto}
#segbar .seg{flex:1;height:3px;border-radius:2px;background:#3a4057;cursor:pointer;transition:background .2s}
#segbar .seg.on{background:#5f7fd6}
#segbar .seg:hover{background:#8fa8e8}
#ctrls{display:flex;align-items:center;justify-content:center;gap:14px;pointer-events:auto}
#ctrls button{
  background:#121628;border:1px solid #242c48;color:#cdd6ea;border-radius:7px;
  width:32px;height:28px;font-size:14px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-body)
}
#ctrls button:hover{background:#1b2138;color:#fff}
#counter{font-size:12px;color:#7d879e;font-variant-numeric:tabular-nums;min-width:58px;text-align:center}
#ctrls #present,#ctrls #notes{width:auto;min-width:92px;padding:0 18px;font-size:11.5px;
  font-weight:500;letter-spacing:.01em;white-space:nowrap}

/* ---------- presentation mode ---------- */
html.presenting #chrome{opacity:0;transition:opacity .22s ease}
html.presenting.show-ui #chrome{opacity:1}
html.presenting #segbar{visibility:hidden}
html.presenting.show-ui #segbar{visibility:visible}
html.presenting .slide{border-radius:0}
html.presenting.hide-cursor,html.presenting.hide-cursor *{cursor:none!important}

@media print{
  body{overflow:visible;display:block;background:#fff}
  #chrome{display:none}
  #stage{width:100%;height:auto;transform:none!important}
  .slide{display:flex!important;position:relative;page-break-after:always;width:1280px;height:720px}
}