/* ============================================================
   deck.css — the output, not the tool.
   Everything here is driven by the client's brand tokens:
   --acc (accent), --darkbg, --headF, --bodyF.
   ============================================================ */

/* ---------- 1. Outline card, used in the STORYLINE stage ----
   Deliberately plain. This is the wireframe, before design.
   ------------------------------------------------------------ */
.outline{
  aspect-ratio:16/9;
  background:#FCFCFD;
  border-bottom:1px solid var(--line);
  padding:26px 28px;
  display:flex;flex-direction:column;
  overflow:hidden;
  font-family:var(--body);
}
.outline .o-top{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.outline .o-num{font-family:var(--mono);font-size:11px;color:#A6AAB5;letter-spacing:.12em}
.outline .o-lay{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#7C818D;border:1px solid #DEE0E6;border-radius:999px;padding:3px 9px;background:#fff}
.outline .o-title{font-size:19px;font-weight:600;line-height:1.32;margin:0;color:#1C2029;max-width:34ch}
.outline .o-sub{font-size:13.5px;color:#7C818D;margin:8px 0 0;line-height:1.5;max-width:46ch}
.outline .o-items{margin:14px 0 0;padding:0;list-style:none;overflow:hidden}
.outline .o-items li{font-size:13px;color:#5F6470;padding:5px 0 5px 16px;position:relative;line-height:1.45}
.outline .o-items li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:1px;background:#B6BAC4}
.outline .o-items li b{color:#1C2029;font-weight:600}
.outline .o-ghost{margin-top:auto;display:flex;gap:6px;align-items:center;padding-top:14px}
.outline .o-ghost i{display:block;height:5px;border-radius:2px;background:#E9EAEF}
.outline .o-ghost i:nth-child(1){width:34%}
.outline .o-ghost i:nth-child(2){width:22%}
.outline .o-ghost i:nth-child(3){width:14%}
.outline .o-ghost span{font-family:var(--mono);font-size:9px;color:#B6BAC4;letter-spacing:.14em;margin-left:auto}

/* ---------- 2. The designed slide ---------- */
.slide{
  aspect-ratio:16/9;
  position:relative;
  overflow:hidden;
  container-type:inline-size;
  background:#fff;
  color:#0F1420;
  display:flex;flex-direction:column;
  padding:6.5cqw 7cqw 8cqw;
  font-family:var(--bodyF);
}
.slide.wash{background:#F6F7F9}
.slide.dark{background:var(--darkbg);color:#fff}

/* chrome */
.sl-rule{position:absolute;top:0;left:0;height:0.5cqw;width:16%;background:var(--acc)}
.sl-hair{position:absolute;top:0.5cqw;left:0;right:0;height:1px;background:rgba(0,0,0,.07)}
.slide.dark .sl-hair{background:rgba(255,255,255,.12)}
.sl-logo{position:absolute;top:5.5cqw;right:7cqw;max-width:10%;max-height:8%;object-fit:contain}
.sl-foot{
  position:absolute;left:7cqw;right:7cqw;bottom:3.4cqw;
  display:flex;justify-content:space-between;align-items:flex-end;gap:3cqw;
  font-family:var(--mono);font-size:1.7cqw;letter-spacing:.16em;text-transform:uppercase;color:#A2A8B4;
}
.slide.dark .sl-foot{color:#5C6472}
.sl-foot .src{text-transform:none;letter-spacing:.02em;color:#B0B5C0;max-width:60%;text-align:right}
.slide.dark .sl-foot .src{color:#525A68}

.sl-body{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}

.sl-eye{
  display:flex;align-items:center;gap:1.4cqw;
  font-family:var(--mono);font-size:1.85cqw;letter-spacing:.24em;text-transform:uppercase;
  color:var(--acc);margin-bottom:2.4cqw;
}
.sl-eye::before{content:"";width:1.5cqw;height:1.5cqw;background:var(--acc);flex:none}

.sl-title{
  font-family:var(--headF);font-weight:700;
  letter-spacing:-.028em;line-height:1.09;
  font-size:5.2cqw;margin:0;max-width:21ch;
}
.sl-sub{color:#6E7480;font-size:2.7cqw;margin:2.2cqw 0 0;max-width:50ch;line-height:1.55}
.slide.dark .sl-sub{color:#8F97A6}

/* ---------- cover ---------- */
.slide.cover{justify-content:flex-end;padding-left:9.5cqw}
.slide.cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1.4cqw;background:var(--acc)}
.slide.cover .sl-rule{display:none}
.slide.cover .sl-body{flex:none;justify-content:flex-end}
.slide.cover .sl-title{font-size:7.4cqw;max-width:17ch;letter-spacing:-.032em}
.slide.cover .sl-sub{font-size:2.9cqw;margin-top:3cqw}
.slide.cover .sl-mark{
  position:absolute;right:7cqw;top:6cqw;
  font-family:var(--mono);font-size:1.8cqw;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);
}

/* ---------- statement ---------- */
.slide.statement{justify-content:center;padding-left:9.5cqw}
.slide.statement::before{content:"";position:absolute;left:7cqw;top:26%;bottom:26%;width:0.4cqw;background:var(--acc)}
.slide.statement .sl-body{padding-left:3cqw}
.slide.statement .sl-title{font-size:6cqw;max-width:19ch}
.slide.statement .sl-eye{display:none}
.slide.statement::after{
  content:"";position:absolute;right:-10cqw;bottom:-14cqw;
  width:44cqw;height:44cqw;border-radius:50%;
  background:var(--acc);opacity:.13;filter:blur(3cqw);
}

/* ---------- bullets ---------- */
.sl-list{margin:3.4cqw 0 0;padding:0;list-style:none}
.sl-list li{
  font-size:2.7cqw;padding:1.9cqw 0 1.9cqw 4cqw;
  border-top:1px solid rgba(0,0,0,.08);color:#5A606C;position:relative;line-height:1.4;
}
.slide.dark .sl-list li{border-top-color:rgba(255,255,255,.13);color:#8F97A6}
.sl-list li::before{
  content:"";position:absolute;left:0;top:2.9cqw;
  width:1.4cqw;height:1.4cqw;background:var(--acc);
}

/* ---------- metrics ---------- */
.sl-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:4cqw}
.sl-metric{padding:0 3cqw;border-left:1px solid rgba(0,0,0,.1)}
.sl-metric:first-child{padding-left:0;border-left:0}
.slide.dark .sl-metric{border-left-color:rgba(255,255,255,.14)}
.sl-metric .cap{height:0.4cqw;width:5cqw;background:var(--acc);margin-bottom:2cqw}
.sl-metric .v{
  font-family:var(--headF);font-weight:700;font-size:7.4cqw;
  letter-spacing:-.035em;line-height:1;color:var(--acc);
}
.sl-metric .l{
  font-family:var(--mono);font-size:1.75cqw;letter-spacing:.14em;text-transform:uppercase;
  color:#7A808C;margin-top:1.8cqw;line-height:1.5;
}
.slide.dark .sl-metric .l{color:#79808F}

/* ---------- chart ---------- */
.sl-chart{margin-top:3.6cqw;display:flex;flex-direction:column;gap:1.5cqw}
.sl-bar{display:grid;grid-template-columns:17cqw 1fr 7cqw;gap:2.2cqw;align-items:center}
.sl-bar .lab{
  font-size:2.15cqw;color:#7A808C;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sl-bar.hi .lab{color:inherit;font-weight:600}
.sl-bar .track{height:2.9cqw;background:rgba(0,0,0,.055);position:relative}
.slide.dark .sl-bar .track{background:rgba(255,255,255,.08)}
.sl-bar .fill{height:100%;background:#C2C7D1;min-width:0.4cqw;transition:width .3s}
.slide.dark .sl-bar .fill{background:#39414F}
.sl-bar.hi .fill{background:var(--acc)}
.sl-bar .val{
  font-family:var(--mono);font-size:2.1cqw;color:#7A808C;
}
.sl-bar.hi .val{color:var(--acc);font-weight:700}

/* ---------- table ---------- */
.sl-table{margin-top:3.2cqw;width:100%;border-collapse:collapse}
.sl-table th{
  font-family:var(--mono);font-size:1.75cqw;letter-spacing:.15em;text-transform:uppercase;
  text-align:left;padding:1.5cqw 1.6cqw;color:var(--acc);
  border-bottom:0.25cqw solid var(--acc);
}
.sl-table th:first-child,.sl-table td:first-child{padding-left:0}
.sl-table td{
  font-size:2.3cqw;color:#5A606C;padding:1.7cqw 1.6cqw;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.slide.dark .sl-table td{color:#8F97A6;border-bottom-color:rgba(255,255,255,.1)}
.sl-table tr.hi td{
  color:inherit;font-weight:600;
  background:color-mix(in srgb, var(--acc) 8%, transparent);
  box-shadow:inset 0.4cqw 0 0 var(--acc);
}
.sl-table tr.hi td:first-child{padding-left:1.6cqw}

/* ---------- two column ---------- */
.sl-cols{display:grid;grid-template-columns:1fr 1fr;gap:3.4cqw;margin-top:3.6cqw}
.sl-col{padding:3cqw;border:1px solid rgba(0,0,0,.09)}
.slide.dark .sl-col{border-color:rgba(255,255,255,.14)}
.sl-col:first-child{
  border:0;border-left:0.5cqw solid var(--acc);
  background:color-mix(in srgb, var(--acc) 6%, transparent);
}
.sl-col h5{
  font-family:var(--mono);font-size:1.8cqw;letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 1.8cqw;color:var(--acc);
}
.sl-col:last-child h5{color:#9CA2AE}
.sl-col p{font-size:2.5cqw;color:#5A606C;margin:0;line-height:1.5}
.slide.dark .sl-col p{color:#8F97A6}

/* ---------- steps ---------- */
.sl-steps{margin-top:3.4cqw;position:relative;padding-left:5.5cqw}
.sl-steps::before{
  content:"";position:absolute;left:1.65cqw;top:1.6cqw;bottom:1.6cqw;
  width:1px;background:rgba(0,0,0,.13);
}
.slide.dark .sl-steps::before{background:rgba(255,255,255,.16)}
.sl-step{position:relative;padding:1.5cqw 0}
.sl-step .dot{
  position:absolute;left:-5.5cqw;top:1.9cqw;
  width:3.3cqw;height:3.3cqw;border-radius:50%;
  border:0.28cqw solid var(--acc);background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:1.5cqw;color:var(--acc);font-weight:700;
}
.slide.dark .sl-step .dot{background:var(--darkbg)}
.sl-step .h{font-family:var(--headF);font-weight:700;font-size:2.65cqw;letter-spacing:-.015em}
.sl-step .t{font-size:2.3cqw;color:#6E7480;margin-top:0.7cqw;line-height:1.45;max-width:60ch}
.slide.dark .sl-step .t{color:#8F97A6}

/* ---------- quote ---------- */
.slide.quote{justify-content:center;padding-left:9.5cqw}
.slide.quote .sl-eye{display:none}
.slide.quote .sl-rule{display:none}
.sl-quote{position:relative;padding-left:7cqw}
.sl-quote::before{
  content:"\201C";position:absolute;left:-1cqw;top:-3cqw;
  font-family:var(--headF);font-size:18cqw;line-height:1;color:var(--acc);opacity:.28;
}
.sl-quote .q{
  font-family:var(--headF);font-weight:500;font-size:3.9cqw;line-height:1.34;
  letter-spacing:-.018em;max-width:30ch;margin:0;
}
.sl-quote .a{
  font-family:var(--mono);font-size:1.85cqw;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);margin-top:3cqw;
}

/* ---------- close ---------- */
.slide.close{justify-content:center;padding-left:9.5cqw}
.slide.close .sl-eye::before{display:none}
.slide.close .sl-body::before{
  content:"";display:block;width:8cqw;height:0.5cqw;background:var(--acc);margin-bottom:3cqw;
}
.slide.close .sl-title{font-size:6cqw;max-width:18ch}
.slide.close::after{
  content:"";position:absolute;left:-8cqw;top:-12cqw;
  width:40cqw;height:40cqw;border-radius:50%;
  background:var(--acc);opacity:.12;filter:blur(3cqw);
}