/* =====================================================================
   Game Changer — Universidad Europea summer camp
   Design language: Müller-Brockmann / Swiss grid.
   Flat (no shadows, no gradients), strict grid, hairline rules,
   large folio numerals, one accent (UE red), mono technical labels.
   Typography kept: Poppins (display/body) + IBM Plex Mono (labels).
   ===================================================================== */

:root{
  --red:#ff3228;        /* UE accent — the single colour */
  --ink:#111111;
  --ink-soft:#5a5a5a;
  --line:#111111;       /* hairline rules are ink */
  --line-soft:#d7d7d7;
  --paper:#ffffff;
  --paper-2:#f4f4f4;
  --ok:#111111;         /* keep monochrome; correctness shown via fill */
  --bl:8px;             /* baseline unit */
  --maxw:1180px;
  --font:'Poppins',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono','Space Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.hidden{display:none !important}

/* kicker / mono label */
.kicker,.ktag,.slide-no,.meta,.crumb,.day-num,.sv-speaker,.groups-h,.quiz-prog,.gtag,.opt .key{
  font-family:var(--mono);
  letter-spacing:.02em;
}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:24px;height:96px}
.brand{display:flex;align-items:center;gap:18px;font-weight:700}
.brand img{height:60px;width:auto}
.brand .sep{width:1px;height:40px;background:var(--line)}
.brand .gc{font-weight:700;letter-spacing:-.01em;font-size:15px;text-transform:uppercase;white-space:nowrap}
.brand .gc b{color:var(--red);font-weight:700}
.topbar .spacer{flex:1}

.langtoggle{display:flex;border:1px solid var(--line)}
.langtoggle button{padding:8px 14px;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink)}
.langtoggle button+button{border-left:1px solid var(--line)}
.langtoggle button.active{background:var(--red);color:#fff}

.navlink{font-family:var(--mono);font-weight:600;font-size:12px;text-transform:uppercase;color:var(--ink);padding:6px 0;border-bottom:2px solid transparent}
.navlink:hover{border-bottom-color:var(--red);color:var(--red)}

/* ---------- Hero ---------- */
.hero{padding:72px 0 56px;border-bottom:1px solid var(--line)}
.hero-logo{height:84px;width:auto;margin-bottom:40px}
.hero h1{
  font-size:clamp(38px,6vw,80px);line-height:1.02;font-weight:800;letter-spacing:-.03em;
  max-width:18ch;
}
.hero h1 .changer{color:var(--red)}
.hero .sub{font-size:clamp(16px,2vw,21px);font-weight:500;color:var(--ink);margin-top:24px;max-width:60ch}
.hero .promise{margin-top:24px;max-width:56ch;font-size:16px;color:var(--ink-soft);
  padding-left:18px;border-left:3px solid var(--red)}
.hero .cta-row{margin-top:40px;display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--line);width:fit-content}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 28px;font-family:var(--mono);font-weight:600;font-size:13px;
  text-transform:uppercase;letter-spacing:.03em;transition:background .12s,color .12s;
}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--ink)}
.btn-ghost{background:var(--paper);color:var(--ink);border-left:1px solid var(--line)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.cta-row .btn{border:0}
/* standalone buttons (not in cta-row) get their own frame */
.slide-nav .btn,.quiz-actions .btn,.quiz-result .btn{border:1px solid var(--line)}
.slide-nav .btn-primary,.quiz-actions .btn-primary{border-color:var(--red)}

/* ---------- Cinematic hero intro (title card + parting curtain) ---------- */
.stage-curtain{position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden}
.curtain-pane{position:absolute;left:0;right:0;height:50.4%;background:var(--red);will-change:transform}
.curtain-pane.top{top:0;animation:paneUp .72s cubic-bezier(.76,0,.24,1) 1.15s forwards}
.curtain-pane.bottom{bottom:0;animation:paneDown .72s cubic-bezier(.76,0,.24,1) 1.15s forwards}
@keyframes paneUp{to{transform:translateY(-100%)}}
@keyframes paneDown{to{transform:translateY(100%)}}
.curtain-brand{
  position:absolute;inset:0;display:flex;justify-content:center;align-items:center;padding:0 28px;
  animation:brandIn .55s cubic-bezier(.2,.7,.2,1) .15s both, brandOut .3s ease .95s forwards;
}
.curtain-brand .cb-logo{height:clamp(180px,46vh,460px);width:auto;display:block}
@keyframes brandIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes brandOut{to{opacity:0;transform:translateY(-12px)}}
/* hero rises in as the curtain parts */
.hero.intro .hero-logo,
.hero.intro h1,
.hero.intro .promise,
.hero.intro .cta-row{opacity:0;transform:translateY(26px);animation:heroRise .7s cubic-bezier(.2,.7,.2,1) forwards}
.hero.intro .hero-logo{animation-delay:1.20s}
.hero.intro h1{animation-delay:1.34s}
.hero.intro .promise{animation-delay:1.50s}
.hero.intro .cta-row{animation-delay:1.62s}
@keyframes heroRise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .stage-curtain{display:none}
  .hero.intro .hero-logo,.hero.intro h1,
  .hero.intro .promise,.hero.intro .cta-row{opacity:1;transform:none;animation:none}
}

/* ---------- Day sections ---------- */
.day{padding:64px 0;border-bottom:1px solid var(--line)}
.day-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.day-num{
  font-size:13px;font-weight:700;text-transform:uppercase;
  color:#fff;background:var(--red);padding:6px 12px;
}
.day-head h2{font-size:clamp(26px,4vw,44px);font-weight:800;letter-spacing:-.025em}
.day-tag{color:var(--ink-soft);max-width:64ch;margin-bottom:36px;font-size:16px}

/* ---------- Session cards (modular grid) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.card{
  background:var(--paper);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:24px 22px 20px;min-height:230px;
  display:flex;flex-direction:column;gap:10px;position:relative;cursor:pointer;
  transition:background .12s;
  counter-increment:card;
}
.card::before{
  content:counter(card,decimal-leading-zero);
  font-family:var(--mono);font-size:34px;font-weight:600;line-height:1;color:var(--red);
  display:block;margin-bottom:6px;
}
.card:hover{background:var(--paper-2)}
.card .ic{display:none}                 /* drop emoji: type carries it */
.card .ktag{
  position:absolute;top:24px;right:22px;font-size:10px;font-weight:600;text-transform:uppercase;
}
.k-workshop{color:var(--red)}
.k-talk,.k-opening,.k-closing{color:var(--ink-soft)}
.card h3{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.card .meta{font-size:11px;color:var(--ink-soft);display:flex;gap:10px;flex-wrap:wrap}
.card .sum{font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.card .done{color:var(--red);font-weight:700;font-family:var(--font)}
.card .open{margin-top:auto;font-family:var(--mono);font-weight:600;color:var(--ink);font-size:12px;text-transform:uppercase}
.card:hover .open{color:var(--red)}

/* ---------- Passport ---------- */
.passport{padding:64px 0;border-bottom:1px solid var(--line)}
.passport-box{border:1px solid var(--line);padding:36px}
.passport-box h2{font-size:26px;font-weight:800;letter-spacing:-.02em}
.passport-box p{color:var(--ink-soft);margin:10px 0 28px;max-width:64ch}
.badges{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.badge{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;
}
.badge .seal{
  width:54px;height:54px;border:1px solid var(--line);display:grid;place-items:center;
  font-family:var(--mono);font-size:20px;color:var(--ink-soft);
}
.badge.earned .seal{background:var(--red);color:#fff;border-color:var(--red)}
.badge span{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;color:var(--ink-soft)}
.badge.earned span{color:var(--ink)}
.passport-foot{margin-top:28px;display:flex;align-items:center;gap:18px}
.passport-cta{margin-top:22px}
.bar{flex:1;height:6px;background:var(--paper-2);border:1px solid var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--red);width:0;transition:width .35s}
.passport-foot>span{font-family:var(--mono);font-size:12px}
.linkbtn{font-family:var(--mono);font-size:11px;text-transform:uppercase;text-decoration:underline;color:var(--ink-soft)}

/* ---------- Glossary ---------- */
.glossary{padding:64px 0;border-bottom:1px solid var(--line)}
.glossary h2{font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.glossary .lead{color:var(--ink-soft);margin-bottom:32px;max-width:60ch}
.gloss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.gloss{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px}
.gloss dt{font-weight:700;color:var(--ink);margin-bottom:8px;font-size:15px}
.gloss dd{font-size:13.5px;color:var(--ink-soft);line-height:1.5}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:#fff;padding:40px 0}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
footer img{height:52px;filter:brightness(0) invert(1)}
footer span{font-family:var(--mono);font-size:12px;color:#bdbdbd}

/* =====================================================================
   SESSION VIEW
   ===================================================================== */
.session-view{min-height:100vh;background:var(--paper)}
.sv-top{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:96px;z-index:40}
.sv-top .wrap{padding:24px 32px}
.crumb{font-size:11px;color:var(--ink-soft);text-transform:uppercase;display:flex;gap:8px;margin-bottom:12px}
.crumb a:hover{color:var(--red)}
.sv-title h2{font-size:clamp(24px,3.4vw,38px);font-weight:800;letter-spacing:-.025em}
.sv-title .ic{display:none}
.sv-speaker{font-size:12px;color:var(--ink-soft);margin-top:6px}
.tabs{display:flex;gap:28px;margin-top:20px}
.tab{
  padding:6px 0;font-family:var(--mono);font-weight:600;font-size:13px;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:2px solid transparent;
}
.tab.active{color:var(--ink);border-bottom-color:var(--red)}
.tab[disabled]{opacity:.35;cursor:not-allowed}

.sv-body{padding:48px 0 96px}

/* ---- shared nav row (practice / quiz result) ---- */
.slide-nav{display:flex;align-items:center;justify-content:space-between;margin-top:28px;flex-wrap:wrap;gap:12px}

/* ---- Practice ---- */
.practice-box{background:var(--paper);border:1px solid var(--line);padding:40px}
.practice-box h3{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.practice-goal{color:var(--ink-soft);margin-bottom:28px}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.plan{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px}
.plan h4{font-family:var(--mono);font-size:12px;text-transform:uppercase;margin-bottom:16px}
.plan.a h4{color:var(--red)}
.plan.b h4{color:var(--ink)}
.plan ol{padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:15px}
.groups{margin-top:32px;border:1px solid var(--line);padding:24px}
.groups-h{font-size:12px;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
.group-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.group{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px}
.group .gtag{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;margin-bottom:10px}
.group .gtag.s{color:var(--ink)}
.group .gtag.l{color:var(--red)}
.group p{font-size:14px;color:var(--ink-soft)}

/* ---- Quiz ---- */
.quiz-box{background:var(--paper);border:1px solid var(--line);padding:40px;max-width:760px}
.quiz-q{font-size:22px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.quiz-prog{font-size:12px;text-transform:uppercase;color:var(--red);margin-bottom:24px}
.opts{display:grid;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.opt{
  text-align:left;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 18px;font-size:16px;font-weight:500;display:flex;align-items:center;gap:14px;
  background:var(--paper);transition:background .1s;
}
.opt:hover:not([disabled]){background:var(--paper-2)}
.opt:disabled{cursor:default;color:var(--ink)}
.opt .key{width:28px;height:28px;border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--ink)}
.opt.correct{background:var(--red);color:#fff}
.opt.correct .key{background:#fff;color:var(--red);border-color:#fff}
.opt.wrong{color:var(--ink-soft)}
.opt.wrong .key{border-style:dashed}
.explain{margin-top:24px;padding:18px;border-left:3px solid var(--red);background:var(--paper-2);font-size:15px;display:none}
.explain.show{display:block}
.explain .verdict{font-family:var(--mono);text-transform:uppercase;font-size:12px;font-weight:700;margin-bottom:6px}
.explain.good .verdict{color:var(--red)}
.explain.bad .verdict{color:var(--ink)}
.quiz-actions{margin-top:24px;display:flex;gap:12px;justify-content:flex-end}
.quiz-result{text-align:center;padding:24px}
.quiz-result .big{font-family:var(--mono);font-size:64px;font-weight:700;color:var(--red);line-height:1}
.quiz-result p{font-family:var(--mono);text-transform:uppercase;font-size:13px;color:var(--ink-soft);margin-top:8px}
.quiz-result .big.no{color:var(--ink-soft)}
.quiz-result .earned-badge{margin-top:20px;display:inline-block;background:var(--red);color:#fff;padding:12px 22px;font-family:var(--mono);font-size:13px;text-transform:uppercase;font-weight:700}
.quiz-result .missed-badge{margin-top:20px;display:inline-block;border:1px solid var(--line);color:var(--ink-soft);padding:12px 22px;font-family:var(--mono);font-size:13px;text-transform:uppercase;font-weight:700}

/* ---- Video embed (shared by deck video slide) ---- */
.video-wrap{position:relative;width:100%;padding-top:56.25%;overflow:hidden;border:1px solid var(--line);background:#000}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-wrap.vertical{padding-top:0;aspect-ratio:9/16;max-width:340px;margin:0 auto}
/* file:// fallback when YouTube embeds can't play (Error 153) */
.video-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:300px;border:1px solid var(--line);background:#0d0d0d;color:#fff;text-decoration:none;text-align:center;padding:32px}
.video-fallback .vf-play{font-size:38px;color:var(--red)}
.video-fallback .vf-text{max-width:560px;font-size:14px;line-height:1.55;opacity:.9}
.video-fallback:hover{border-color:var(--red)}

/* =====================================================================
   DECK — full-screen animated slides (CUNEF mechanics, Swiss/UE skin)
   ===================================================================== */
body.deck-mode .topbar{display:none}

.deck{position:relative;min-height:100vh;background:var(--paper);display:flex;flex-direction:column}

/* top bar */
.deck-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px;
  height:64px;padding:0 28px;background:var(--paper);border-bottom:1px solid var(--line)}
.deck-brand{display:flex;align-items:center;gap:14px}
.deck-brand img{height:34px;width:auto}
.deck-brand .deck-sep{width:1px;height:24px;background:var(--line)}
.deck-name{font-family:var(--mono);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.deck-progress{flex:1;height:3px;background:var(--paper-2)}
.deck-progress i{display:block;height:100%;width:0;background:var(--red);transition:width .35s}
.deck-count{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-soft);min-width:50px;text-align:right}
.deck-lang{flex:none}
.deck-pdf{font-family:var(--mono);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  border:1px solid var(--line);padding:8px 14px;color:var(--ink)}
.deck-pdf:hover{background:var(--ink);color:#fff}

/* stage + slide layouts */
.deck-stage{flex:1;display:flex;align-items:stretch;padding:0;position:relative}
.slide{width:100%;min-height:100%;display:flex;align-items:center;padding:32px 0 64px}
/* optional-block badge ("skip if short on time") — shown in deck, grid overview AND print.
   Uses ::after because photo slides already own ::before for their gradient overlay. */
.slide[data-opt]{position:relative}
.slide[data-opt]::after{content:attr(data-opt);position:absolute;top:16px;right:20px;z-index:3;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#ffd24d;background:#161616;border:1px solid rgba(255,210,77,.45);
  padding:6px 10px;border-radius:3px;white-space:nowrap;box-shadow:0 1px 6px rgba(0,0,0,.3);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
@media (max-width:640px){.slide[data-opt]::after{font-size:9px;padding:5px 7px;top:10px;right:12px}}

/* full-bleed slide backgrounds — baked on .slide so they show in deck, grid AND PDF */
.slide-bg-red{background:var(--red)}
.slide-bg-photo{position:relative;background-size:cover;background-position:center;background-color:#1a1a1a}
.slide-bg-photo::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.58) 48%,rgba(0,0,0,.3) 100%)}
.slide-bg-photo .slide-inner{position:relative;z-index:1;text-shadow:0 2px 18px rgba(0,0,0,.45)}
/* white text on red or photo slides (.slide. prefix raises specificity over the base type rules) */
.slide.slide-bg-red .d-title,.slide.slide-bg-red .sec-title,.slide.slide-bg-red .st-big,.slide.slide-bg-red .stat-cap,
.slide.slide-bg-red .stat-big,.slide.slide-bg-red .sec-no,.slide.slide-bg-red .d-lead,.slide.slide-bg-red .sec-sub,
.slide.slide-bg-red .st-sub,.slide.slide-bg-red .stat-sub,.slide.slide-bg-red .d-points li,.slide.slide-bg-red .q-big,
.slide.slide-bg-red .q-who,.slide.slide-bg-red .cmp-title,.slide.slide-bg-red .cmp li,.slide.slide-bg-red .cmp-h,
.slide.slide-bg-red .case-org,.slide.slide-bg-red .case-title,.slide.slide-bg-red .case-fact,.slide.slide-bg-red .case-src,
.slide.slide-bg-photo .case-org,.slide.slide-bg-photo .case-title,.slide.slide-bg-photo .case-fact,.slide.slide-bg-photo .case-src,
.slide.slide-bg-photo .d-title,.slide.slide-bg-photo .sec-title,.slide.slide-bg-photo .st-big,.slide.slide-bg-photo .stat-cap,
.slide.slide-bg-photo .stat-big,.slide.slide-bg-photo .sec-no,.slide.slide-bg-photo .d-lead,.slide.slide-bg-photo .sec-sub,
.slide.slide-bg-photo .st-sub,.slide.slide-bg-photo .stat-sub,.slide.slide-bg-photo .d-points li,.slide.slide-bg-photo .q-big,
.slide.slide-bg-photo .q-who,.slide.slide-bg-photo .cmp-title,.slide.slide-bg-photo .cmp li,.slide.slide-bg-photo .cmp-h{color:#fff}
.slide.slide-bg-red .kicker,.slide.slide-bg-photo .kicker{color:#fff;border-bottom-color:#fff}
.slide.slide-bg-red .st-sub,.slide.slide-bg-photo .st-sub,
.slide.slide-bg-red .case-fact,.slide.slide-bg-photo .case-fact{border-left-color:rgba(255,255,255,.85)}
.slide.slide-bg-red .d-points li::before,.slide.slide-bg-photo .d-points li::before,
.slide.slide-bg-red .cmp li::before,.slide.slide-bg-photo .cmp li::before{background:#fff}
.slide.slide-bg-red .d-points li,.slide.slide-bg-photo .d-points li{border-top-color:rgba(255,255,255,.28)}
.slide.slide-bg-red .d-points li:first-child,.slide.slide-bg-photo .d-points li:first-child{border-top:0}
.slide.slide-bg-red .cmp-grid,.slide.slide-bg-photo .cmp-grid,.slide.slide-bg-red .cmp,.slide.slide-bg-photo .cmp{border-color:rgba(255,255,255,.45)}
.slide-inner{width:100%;max-width:1000px;margin:0 auto;padding:0 56px}
.deck .kicker{display:inline-block;font-family:var(--mono);font-size:13px;font-weight:600;text-transform:uppercase;
  letter-spacing:.03em;color:var(--red);border-bottom:2px solid var(--red);padding-bottom:4px;margin-bottom:26px}
.d-title{font-size:clamp(34px,6vw,72px);line-height:1.0;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.d-lead{font-size:clamp(17px,2.2vw,24px);font-weight:500;color:var(--ink-soft);margin-top:24px;max-width:48ch;line-height:1.4}
.d-tags{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.dtag{font-family:var(--mono);font-size:12px;font-weight:600;text-transform:uppercase;color:var(--ink);border:1px solid var(--line);padding:8px 14px}
.d-actions{margin-top:38px;display:flex;flex-wrap:wrap;border:1px solid var(--line);width:fit-content}
.d-actions .btn{border:0}
.d-actions .btn-ghost{border-left:1px solid var(--line)}

.slide-content .d-title{font-size:clamp(30px,5vw,60px);margin-bottom:30px}
.d-points{list-style:none;display:flex;flex-direction:column}
.d-points li{font-size:clamp(17px,2.1vw,26px);font-weight:500;color:var(--ink);padding:18px 0 18px 40px;position:relative;border-top:1px solid var(--line-soft)}
.d-points li:first-child{border-top:0}
/* tall lists (6+ bullets, e.g. the d1s1 "Six roles" slide) compact so they never clip on short viewports */
.d-points:has(li:nth-child(6)) li{padding:12px 0 12px 40px;font-size:clamp(16px,1.9vw,22px)}
.d-points li::before{content:"";position:absolute;left:0;top:30px;width:22px;height:2px;background:var(--red)}

.slide-video .d-vtitle{font-size:clamp(22px,3vw,34px);font-weight:800;letter-spacing:-.02em;margin:14px 0 26px;line-height:1.1}
.slide-video .video-wrap{max-width:880px}

/* ---- extra slide types (section / statement / stat / quote / compare) ---- */
/* section divider */
.slide-section .sec-no{display:block;font-family:var(--mono);font-size:clamp(64px,15vw,160px);font-weight:600;line-height:.82;color:var(--red);letter-spacing:-.04em;margin-bottom:20px}
.slide-section .sec-title{font-size:clamp(34px,6.5vw,76px);font-weight:800;letter-spacing:-.035em;line-height:1.0;max-width:18ch}
.slide-section .sec-sub{font-size:clamp(16px,2vw,22px);color:var(--ink-soft);margin-top:22px;max-width:52ch;line-height:1.4}

/* big statement */
.slide-statement .st-big{font-size:clamp(32px,5.6vw,68px);font-weight:800;letter-spacing:-.03em;line-height:1.05;max-width:20ch}
.slide-statement .st-sub{font-size:clamp(17px,2.2vw,24px);color:var(--ink-soft);margin-top:26px;max-width:46ch;line-height:1.4;padding-left:18px;border-left:3px solid var(--red)}

/* stat / big number */
.slide-stat .stat-big{font-family:var(--mono);font-size:clamp(64px,16vw,184px);font-weight:700;line-height:.82;color:var(--red);letter-spacing:-.045em}
.slide-stat .stat-cap{font-size:clamp(24px,3.6vw,46px);font-weight:800;letter-spacing:-.02em;margin-top:20px;max-width:22ch;line-height:1.05}
.slide-stat .stat-sub{font-size:clamp(16px,2vw,21px);color:var(--ink-soft);margin-top:18px;max-width:48ch;line-height:1.4}

/* quote */
.slide-quote .q-big{font-size:clamp(28px,4.7vw,58px);font-weight:700;letter-spacing:-.02em;line-height:1.12;max-width:24ch}
.slide-quote .q-big::before{content:"\201C"}
.slide-quote .q-big::after{content:"\201D"}
.slide-quote .q-who{font-family:var(--mono);font-size:14px;text-transform:uppercase;color:var(--ink-soft);margin-top:26px;letter-spacing:.03em}

/* compare A vs B */
.slide-compare .cmp-title{font-size:clamp(26px,4.4vw,52px);margin-bottom:26px}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cmp{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 24px}
.cmp-h{font-family:var(--mono);font-size:13px;text-transform:uppercase;font-weight:700;margin-bottom:16px;letter-spacing:.02em}
.cmp.a .cmp-h{color:var(--ink)}
.cmp.b .cmp-h{color:var(--red)}
.cmp ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.cmp li{font-size:clamp(15px,1.7vw,20px);font-weight:500;color:var(--ink);padding-left:22px;position:relative;line-height:1.3}
.cmp li::before{content:"";position:absolute;left:0;top:.6em;width:12px;height:2px;background:var(--red)}

/* verified real-world case: company + year + source stay on screen */
.slide-case .case-org{font-family:var(--mono);font-size:clamp(15px,1.8vw,22px);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--red);margin-bottom:18px}
.slide-case .case-title{font-size:clamp(30px,5vw,60px);font-weight:800;letter-spacing:-.03em;line-height:1.05;max-width:22ch}
.slide-case .case-fact{font-size:clamp(17px,2.2vw,24px);color:var(--ink-soft);margin-top:24px;max-width:46ch;line-height:1.4;padding-left:18px;border-left:3px solid var(--red)}
.slide-case .case-src{display:inline-block;font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-top:30px;text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--line);padding:6px 10px}

/* ---- live widgets: poll tally + quick check (deck slides) ---- */
.slide-poll .poll-title{font-size:clamp(28px,4.6vw,54px)}
.slide-poll .st-sub{margin-top:18px}
.poll-grid{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line);max-width:760px}
.poll-opt{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.poll-h{font-family:var(--mono);font-size:13px;text-transform:uppercase;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.poll-opt.b .poll-h{color:var(--red)}
.poll-count{font-family:var(--mono);font-size:clamp(40px,7vw,84px);font-weight:700;line-height:.9;color:var(--ink)}
.poll-opt.b .poll-count{color:var(--red)}
.poll-bar{height:6px;background:var(--paper-2);border:1px solid var(--line);overflow:hidden}
.poll-bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .35s}
.poll-opt.b .poll-bar i{background:var(--red)}
.poll-btns{display:flex;border:1px solid var(--line);width:fit-content}
.poll-btn{width:46px;height:46px;font-size:22px;display:grid;place-items:center;color:var(--ink)}
.poll-btn+.poll-btn{border-left:1px solid var(--line)}
.poll-btn:hover{background:var(--red);color:#fff}
.poll-prev{margin-top:20px;font-family:var(--mono);font-size:13px;color:var(--ink-soft);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.poll-prev-h{color:#fff;background:var(--red);padding:4px 10px;font-weight:700;text-transform:uppercase;font-size:11px}
.slide-check .check-q{font-size:clamp(26px,4.2vw,50px);margin-bottom:26px}
.check-opts{max-width:760px}
.slide-check .opt{font-size:clamp(15px,1.8vw,19px)}
.slide-check .explain{max-width:760px}

/* prev / next + hint */
.deck-nav{position:fixed;right:28px;bottom:26px;z-index:25;display:flex;gap:10px}
.navbtn{width:46px;height:46px;border:1px solid var(--line);background:var(--paper);font-size:22px;line-height:1;color:var(--ink);display:grid;place-items:center}
.navbtn:hover:not(:disabled){background:var(--red);color:#fff;border-color:var(--red)}
.navbtn:disabled{opacity:.3;cursor:not-allowed}
.deck-hint{position:fixed;left:28px;bottom:30px;z-index:25;font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.deck-hint kbd{font-family:var(--mono);border:1px solid var(--line);padding:1px 6px;font-size:11px;color:var(--ink)}

/* ---- build animations: each .an element revealed on click (presenter pointer) ---- */
@keyframes riseIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes inLeft{from{opacity:0;transform:translateX(-44px)}to{opacity:1;transform:none}}
@keyframes inRight{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.5) translateY(14px)}55%{opacity:1;transform:scale(1.09)}100%{opacity:1;transform:none}}
@keyframes dashGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* every animated element starts hidden, holding its final position (no layout shift) */
.deck-stage .an{opacity:0}
/* revealed by the teacher → animate in */
.deck-stage .an.shown{animation:riseIn .5s both;animation-timing-function:cubic-bezier(.18,.72,.24,1.12)}

/* per-type reveal flavour */
.deck-stage .kicker.shown,.deck-stage .q-who.shown,.deck-stage .stat-sub.shown,
.deck-stage .sec-sub.shown,.deck-stage .st-sub.shown,.deck-stage .d-lead.shown,
.deck-stage .d-points li.shown{animation-name:inLeft}
.deck-stage .sec-no.shown,.deck-stage .stat-big.shown{animation-name:popIn;animation-duration:.6s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1.25)}
.deck-stage .cmp.a .shown{animation-name:inLeft}
.deck-stage .cmp.b .shown{animation-name:inRight}
.deck-stage .case-fact.shown,.deck-stage .case-src.shown{animation-name:inLeft}
.deck-stage .d-tags.shown,.deck-stage .d-actions.shown{animation-name:popIn;animation-duration:.5s}

/* the red dash on a bullet draws just after the line arrives */
.deck-stage .d-points li.shown::before,.deck-stage .cmp li.shown::before{
  transform-origin:left center;animation:dashGrow .4s both .16s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}

/* jumps (back nav, grid, End) reveal everything at once, no animation */
.deck-stage.reveal-all .an.shown{animation:none;opacity:1;transform:none}
.deck-stage.reveal-all .an.shown::before{animation:none}

@media (prefers-reduced-motion:reduce){
  .deck-stage .an.shown,.deck-stage .an.shown::before{animation-duration:.001s!important}
}

/* slide overview grid */
.deck-grid{position:fixed;inset:0;z-index:60;background:rgba(17,17,17,.96);overflow:auto;padding:48px 40px;
  display:grid;grid-template-columns:repeat(auto-fill,260px);justify-content:center;gap:28px;align-content:start}
.thumb{width:260px;display:flex;flex-direction:column;gap:10px;text-align:left;background:none}
.thumb-frame{width:260px;height:156px;overflow:hidden;background:var(--paper);border:1px solid #444}
.thumb.cur .thumb-frame{border:2px solid var(--red)}
.thumb:hover .thumb-frame{border-color:var(--red)}
.thumb-inner{width:1000px;height:600px;transform:scale(.26);transform-origin:top left;pointer-events:none}
.thumb-cap{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;color:#e7e7e7;letter-spacing:.02em}

/* help overlay */
.deck-help{position:fixed;inset:0;z-index:60;background:rgba(17,17,17,.6);display:flex;align-items:center;justify-content:center;padding:20px}
.hk-card{background:var(--paper);border:1px solid var(--line);padding:34px 36px;width:min(440px,92vw)}
.hk-card h3{font-family:var(--mono);text-transform:uppercase;color:var(--red);font-size:16px;font-weight:700;margin-bottom:20px;letter-spacing:.03em}
.hk-row{display:flex;align-items:center;gap:16px;padding:7px 0;font-size:14px;color:var(--ink)}
.hk{font-family:var(--mono);font-size:12px;font-weight:600;min-width:88px;border:1px solid var(--line);padding:4px 8px;text-align:center;color:var(--ink)}
.hk-card .btn{margin-top:22px;border:1px solid var(--red)}

/* black screen */
.deck-black{position:fixed;inset:0;z-index:70;background:#000;cursor:pointer}

/* the class `display` would beat the [hidden] UA rule — re-assert it */
.deck-grid[hidden],.deck-help[hidden],.deck-black[hidden]{display:none}

/* print container (screen-hidden; shown only for PDF) */
.deck-print{display:none}

/* ---------- Video library (videoteca) ---------- */
.videoteca .lead{margin-bottom:24px}
.vt-session{margin-top:40px}
.vt-h{font-size:clamp(20px,3vw,30px);font-weight:800;letter-spacing:-.02em;margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid var(--red)}
.vt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.vt-card{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--paper);transition:transform .12s}
.vt-card:hover{transform:translateY(-3px)}
.vt-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;display:block}
.vt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vt-play{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;color:#fff;background:rgba(0,0,0,.22);transition:background .12s}
.vt-card:hover .vt-play{background:rgba(255,50,40,.55)}
.vt-meta{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.vt-title{font-weight:600;font-size:15px;line-height:1.3;color:var(--ink)}
.vt-by{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}

/* ---------- Responsive ---------- */
@media (max-width:680px){
  .wrap{padding:0 20px}
  .plan-grid,.group-grid,.cmp-grid,.poll-grid{grid-template-columns:1fr}
  .badges{grid-template-columns:repeat(2,1fr)}
  .topbar .navlink{display:none}
  .brand .gc{display:none}
  .brand img{height:46px}
  .topbar .wrap{height:76px}
  .sv-top{top:76px}
  .deck-top{gap:12px;padding:0 16px;height:56px}
  .deck-brand .deck-name{display:none}
  .deck-pdf{padding:7px 10px}
  .slide-inner{padding:0 22px}
  .deck-stage{padding:20px 0 76px}
  .deck-grid{grid-template-columns:repeat(auto-fill,150px);gap:18px;padding:32px 18px}
  .thumb,.thumb-frame{width:150px}
  .thumb-frame{height:90px}
  .thumb-inner{transform:scale(.15)}
  .navbtn{width:40px;height:40px}
  .deck-nav{right:16px;bottom:18px}
  .deck-hint{display:none}
}

/* ---------- Print → PDF (1 slide = 1 landscape page, current language) ---------- */
/* full-bleed page: fixed physical size in a column flex (chrome / slide / foot),
   so .slide{flex:1} resolves to a real height and its cover background fills the
   page edge-to-edge, same as .deck-stage{flex:1} does on screen */
@media print{
  @page{size:A4 landscape;margin:0}
  .topbar,.deck-top,.deck-nav,.deck-hint,.deck-grid,.deck-help,.deck-black,.deck-stage{display:none!important}
  .deck-print{display:block!important}
  .print-page{width:297mm;height:210mm;display:flex;flex-direction:column;overflow:hidden;
    break-after:page;page-break-after:always}
  .print-page:last-child{break-after:auto;page-break-after:auto}
  .print-chrome{flex:0 0 auto;display:flex;align-items:center;gap:12px;
    padding:7mm 14mm;border-bottom:2px solid var(--red);background:#fff}
  .print-chrome img{height:9mm}
  .print-brand{font-family:var(--mono);font-weight:700;font-size:13px;text-transform:uppercase;
    letter-spacing:.03em;color:var(--red)}
  .print-sep{color:var(--ink-soft)}
  .print-session{font-family:var(--mono);font-size:12px;text-transform:uppercase;
    letter-spacing:.03em;color:var(--ink-soft)}
  .print-page .slide{flex:1;min-height:0;width:100%;padding:0}
  .print-page .slide-inner{max-width:none;padding:14mm 20mm}
  .print-page .video-wrap{display:none}
  .print-page .slide-video .d-vtitle::after{content:" ▶ (video online)";font-family:var(--mono);font-size:14px;color:var(--ink-soft)}
  .print-foot{flex:0 0 auto;padding:4mm 14mm;text-align:right;font-family:var(--mono);
    font-size:11px;color:var(--ink-soft);border-top:1px solid var(--line-soft)}
  *{animation:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* print status toast (deck screen only — .no-print keeps it out of the PDF itself) */
.print-hint{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;
  max-width:520px;background:var(--ink);color:#fff;border:1px solid var(--ink);
  font-family:var(--mono);font-size:12px;line-height:1.4;text-align:center;padding:12px 20px}
.print-hint[hidden]{display:none}

/* full-page error card (render() catch): never leave the app blank mid-class */
.render-error{padding:120px 0 80px;min-height:60vh}
.render-error h2{font-size:clamp(24px,3.5vw,40px);font-weight:800;letter-spacing:-.02em;max-width:30ch}
.render-error p{margin-top:16px;color:var(--ink-soft);max-width:60ch}
.render-error pre{margin:24px 0;padding:14px 16px;border:1px solid var(--line);background:var(--paper-2);font-family:var(--mono);font-size:12px;white-space:pre-wrap;word-break:break-word;max-width:720px}

/* ---------- AI Scout Certificate ---------- */
.certificate{padding:48px 0 80px}
.cert-controls{display:flex;gap:12px;margin-bottom:26px;flex-wrap:wrap;max-width:900px;margin-left:auto;margin-right:auto}
.cert-controls input{flex:1;min-width:220px;border:1px solid var(--line);padding:12px 14px;font-family:var(--font);font-size:15px;background:var(--paper)}
.cert-controls input:focus{outline:2px solid var(--red);outline-offset:-1px}
.cert-sheet{border:3px double var(--ink);padding:56px 48px;text-align:center;background:var(--paper);max-width:900px;margin:0 auto}
.cert-logo{height:52px;margin-bottom:18px}
.cert-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.cert-title{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.02em;margin:10px 0 28px;color:var(--red)}
.cert-grant{color:var(--ink-soft);font-size:14px}
.cert-name{font-size:clamp(28px,4.5vw,42px);font-weight:800;letter-spacing:-.02em;margin:10px auto 20px;border-bottom:1px solid var(--line);display:inline-block;padding:0 30px 10px;min-width:50%;word-break:break-word}
.cert-body{max-width:56ch;margin:0 auto 28px;color:var(--ink-soft)}
.cert-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-bottom:36px}
.cert-badges span{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;color:var(--ink)}
.cert-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px;font-family:var(--mono);font-size:11px;color:var(--ink-soft);flex-wrap:wrap}

@media print{
  .no-print{display:none !important}
  body:not(.deck-mode) *{visibility:hidden}
  .cert-sheet,.cert-sheet *{visibility:visible!important}
  .cert-sheet{position:fixed;inset:0;max-width:none;margin:0;border-width:6px;display:flex;flex-direction:column;justify-content:center;align-items:center}
}