/* CLEAR deck system — reusable. Swap index.html content, keep this file.
   16:9 slides, scroll-snap on web, one slide per page in PDF. */
:root{
  --bg:#080D16; --bg2:#0C1524; --panel:#111C2B;
  --deep:#123A42; --teal:#1FABAA; --teal-br:#5AD4D3; --teal-dim:#0F3B3F;
  --amber:#E4A24C; --amber-br:#F2B96B; --cream:#FBF6EF;
  --text:#E9F0F7; --muted:#93A7BC; --dim:#6B7F94;
  --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.16);
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --W:1280px; --H:720px; --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}

/* ---- deck shell ---- */
.deck{scroll-snap-type:y mandatory;overflow-y:auto;height:100vh}
.slide{
  position:relative;width:var(--W);height:var(--H);margin:0 auto 28px;
  scroll-snap-align:center;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  padding:62px 76px 64px;box-shadow:0 24px 70px rgba(0,0,0,.45)
}
.slide::after{content:'clear vision. clear view. clear life.';position:absolute;left:76px;bottom:26px;
  font-size:12px;letter-spacing:.14em;color:var(--dim);font-family:var(--mono)}
.slide .num{position:absolute;right:76px;bottom:24px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.slide .mark{position:absolute;right:70px;top:46px;height:26px;opacity:.95}
.slide.title .mark{position:static;height:56px;margin-bottom:40px;align-self:flex-start}

/* ---- type ---- */
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);margin-bottom:18px}
h1{font-family:var(--serif);font-size:74px;line-height:1.02;font-weight:600;letter-spacing:-.02em}
h2{font-family:var(--serif);font-size:46px;line-height:1.08;font-weight:600;letter-spacing:-.015em;margin-bottom:10px}
h3{font-family:var(--serif);font-size:25px;font-weight:600;line-height:1.2}
.lede{font-size:21px;line-height:1.5;color:var(--muted);max-width:74ch;margin-top:16px}
.body{font-size:17.5px;line-height:1.55;color:var(--muted)}
.tint{color:var(--teal)}
.big{font-family:var(--serif);font-size:120px;line-height:1;font-weight:700;letter-spacing:-.03em}
.rule{height:3px;width:74px;background:var(--teal);border-radius:3px;margin:22px 0 30px}

/* ---- layout helpers ---- */
.mid{flex:1;display:flex;flex-direction:column;justify-content:center}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;flex:1}

/* ---- cards ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.card .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:9px}
.card p{font-size:15.5px;line-height:1.5;color:var(--muted)}
.card.on{border-color:var(--teal);background:linear-gradient(180deg,rgba(31,171,170,.14),rgba(31,171,170,.04))}
.card.on .k{color:var(--teal-br)}

/* tool chips */
.chips{display:flex;flex-wrap:wrap;gap:11px}
.chip{border:1px solid var(--line2);border-radius:999px;padding:11px 19px;font-size:15.5px;color:var(--text);background:rgba(255,255,255,.03)}
.chip.new{border-color:var(--amber);color:var(--amber-br);background:rgba(228,162,76,.09)}

/* ladder columns */
.lad{display:grid;grid-template-columns:168px repeat(3,1fr);gap:0;margin-top:20px;flex:1;align-content:center}
.lad div{padding:11px 14px;border-bottom:1px solid var(--line);font-size:14.5px;display:flex;align-items:center}
.lad .rh{color:var(--dim);font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase}
.lad .hd{display:block;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--text);
  border-bottom:2px solid var(--line2);padding:0 14px 12px;line-height:1.3}
.lad .hd span{display:block;margin-top:4px}
.lad .no{color:var(--dim)} .lad .yes{color:var(--teal-br)}
.lad .col3{background:linear-gradient(180deg,rgba(31,171,170,.13),rgba(31,171,170,.03))}
.lad .col3.hd{color:var(--teal-br)}

/* numbered steps */
.steps{display:flex;flex-direction:column;gap:13px}
.step{display:grid;grid-template-columns:42px 1fr;gap:18px;align-items:start}
.step b{font-family:var(--mono);font-size:13px;color:var(--teal);border:1px solid var(--teal-dim);
  border-radius:8px;height:34px;display:flex;align-items:center;justify-content:center;background:rgba(31,171,170,.07)}
.step span{font-size:16.5px;line-height:1.45;color:var(--muted);padding-top:6px}
.step em{color:var(--text);font-style:normal;font-weight:600}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat .v{font-family:var(--serif);font-size:52px;font-weight:700;color:var(--teal-br);line-height:1}
.stat .l{font-size:14.5px;color:var(--muted);margin-top:9px;line-height:1.4}

/* unconfirmed-content badge — visible on purpose */
.gap{border:1px dashed var(--amber);background:rgba(228,162,76,.07);border-radius:12px;padding:17px 20px}
.gap .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:7px}
.gap p{font-size:15px;line-height:1.5;color:var(--amber-br)}
body.clean .gap{display:none}

/* title + section slides */
.slide.title{background:radial-gradient(900px 520px at 22% 18%,rgba(31,171,170,.20),transparent 62%),var(--deep);justify-content:center}
.slide.sec{background:radial-gradient(760px 460px at 78% 72%,rgba(31,171,170,.17),transparent 60%),var(--deep);justify-content:center}
.slide.sec h2{font-size:62px}

/* ---- top bar (web only) ---- */
.bar{position:fixed;inset:0 0 auto 0;height:54px;background:rgba(8,13,22,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 20px;z-index:50}
.bar img{height:20px} .bar .sp{flex:1}
.bar a,.bar button{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1px solid var(--line2);border-radius:8px;
  padding:8px 13px;cursor:pointer;text-decoration:none}
.bar a:hover,.bar button:hover{color:var(--teal-br);border-color:var(--teal)}
.deck{padding-top:74px}

/* ---- responsive: phone reads it as a scroll ---- */
@media (max-width:1340px){
  .slide{transform-origin:top center}
  .deck{scroll-snap-type:none}
}
@media (max-width:820px){
  :root{--W:100%;--H:auto}
  .slide{width:auto;margin:0 12px 14px;padding:34px 24px 54px;height:auto;min-height:auto}
  .slide::after{left:24px;font-size:10.5px} .slide .num{right:24px}
  h1{font-size:40px} h2{font-size:30px} .slide.sec h2{font-size:34px} .big{font-size:64px}
  .lede{font-size:17px} .split{grid-template-columns:1fr;gap:26px}
  .g2,.g3,.g4,.stats{grid-template-columns:1fr}
  .lad{grid-template-columns:1fr;gap:14px}
  .lad div{border:none;padding:0}
  .lad .rh{display:none}
  .slide .mark{top:auto;bottom:22px;right:24px;height:18px}
}

/* ---- print / PDF ---- */
@media print{
  .bar{display:none} .deck{padding:0;height:auto;overflow:visible}
  body{background:#fff}
  .slide{margin:0;border:none;border-radius:0;box-shadow:none;page-break-after:always;break-after:page;
    width:var(--W);height:var(--H)}
}

/* phone: keep the top bar on one line */
.bar #pos{white-space:nowrap}
@media (max-width:520px){ .bar #pos{display:none} .bar{gap:10px;padding:0 12px} }