/* Slide renderer styles: the 1920x1080 canvas, glow presets, element
   wrappers and the Captain Builders brand components that imported HTML
   decks use as frozen "html" elements (chips, QR cards, rails, ...). Shared
   by the editor canvas, slide thumbnails and the headless PDF export page. */

.pr-slide {
  position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0a0a0b; color: #fff;
  font-family: Manrope, -apple-system, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  --accent: #e60165; --accent-2: #8000db; --accent-soft: #ff5fa2; --card: #151517; --muted: #1f1f1f;
  --muted-foreground: #9a9aa3; --border: #2a2a2e; --success: #35d073; --danger: #ff4d6d;
}
.pr-slide::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.pr-slide.glow-default::before { background: radial-gradient(55% 45% at 78% -8%, rgba(128,0,219,.34), transparent 65%), radial-gradient(45% 35% at 12% 108%, rgba(230,1,101,.20), transparent 60%); }
.pr-slide.glow-center::before { background: radial-gradient(60% 55% at 50% 45%, rgba(128,0,219,.30), transparent 70%), radial-gradient(40% 30% at 85% 100%, rgba(230,1,101,.18), transparent 60%); }
.pr-slide.glow-left::before { background: radial-gradient(50% 60% at 0% 40%, rgba(230,1,101,.26), transparent 65%), radial-gradient(45% 40% at 95% 0%, rgba(128,0,219,.28), transparent 65%); }
.pr-slide.glow-right::before { background: radial-gradient(55% 70% at 85% 50%, rgba(128,0,219,.30), transparent 65%), radial-gradient(40% 40% at 0% 100%, rgba(230,1,101,.18), transparent 60%); }
.pr-slide.glow-soft::before { background: radial-gradient(50% 40% at 85% -5%, rgba(128,0,219,.18), transparent 65%), radial-gradient(40% 30% at 10% 105%, rgba(230,1,101,.10), transparent 60%); }
.pr-slide.glow-danger::before { background: radial-gradient(60% 55% at 50% 40%, rgba(230,1,101,.26), transparent 70%), radial-gradient(40% 30% at 85% 100%, rgba(128,0,219,.16), transparent 60%); }
.pr-slide.glow-none::before { display: none; }

.pr-el { position: absolute; box-sizing: border-box; }
.pr-el > * { box-sizing: border-box; }
.pr-el.pr-el-text .pr-text { width: 100%; height: 100%; margin: 0; overflow-wrap: break-word; }
.pr-el.pr-el-text .pr-text.pr-grad { -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-el.pr-el-image img { width: 100%; height: 100%; display: block; }
.pr-el.pr-el-shape > div { width: 100%; height: 100%; }
.pr-el.pr-el-html > * { display: block; }
.pr-el.pr-el-qr .pr-qr { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pr-el.pr-el-qr .pr-qr img { width: 100%; height: 100%; display: block; }

/* ---- inline text spans ---- */
.pr-slide .hl { background: linear-gradient(90deg, #ff3d8f 0%, #b23bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-slide .muted { color: var(--muted-foreground); }
.pr-slide .dim { color: #55555e; }
.pr-slide .glow-text { filter: drop-shadow(0 0 28px rgba(230,1,101,.35)); }
.pr-slide .strike { text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 8px; color: #6a6a74; }
.pr-slide h1, .pr-slide h2, .pr-slide h3, .pr-slide p { margin: 0; }
.pr-slide ul { margin: 0; padding: 0; }
.pr-slide svg { overflow: visible; }

/* ---- brand components (frozen html elements) ---- */
.pr-slide .eyebrow {
  display: inline-flex; align-items: center; gap: 14px; padding: 10px 22px; border-radius: 999px; background: var(--muted); border: 1px solid var(--border);
  font-size: 22px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); white-space: nowrap;
}
.pr-slide .eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px rgba(230,1,101,.8); flex: none; }
.pr-slide .chip { display: inline-flex; align-items: center; gap: 12px; padding: 12px 26px; border-radius: 999px; background: var(--muted); border: 1px solid var(--border); font-size: 28px; font-weight: 700; color: #e6e6ea; white-space: nowrap; }
.pr-slide .chip.accent { border-color: rgba(230,1,101,.5); color: var(--accent-soft); background: rgba(230,1,101,.10); }
.pr-slide .chip svg { width: 28px; height: 28px; flex: none; }
.pr-slide .chip.lg { font-size: 36px; padding: 16px 34px; }
.pr-slide .iconbox { width: 110px; height: 110px; border-radius: 28px; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent-soft); }
.pr-slide .iconbox svg { width: 60px; height: 60px; }
.pr-slide .iconbox.sm { width: 80px; height: 80px; border-radius: 20px; }
.pr-slide .iconbox.sm svg { width: 40px; height: 40px; }
.pr-slide .frame { border: 1px solid var(--border); border-radius: 28px; overflow: hidden; background: #101012; box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03), 0 0 120px rgba(128,0,219,.18); }
.pr-slide .frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pr-slide .frame.contain img { object-fit: contain; background: #fff; }
.pr-slide .frame .bar { height: 46px; background: #151517; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; padding: 0 20px; }
.pr-slide .frame .bar i { width: 14px; height: 14px; border-radius: 50%; background: #2f2f35; display: block; }
.pr-slide .frame.shot img { height: calc(100% - 0px); }
.pr-slide .qr { background: #fff; border-radius: 24px; padding: 22px; display: inline-block; }
.pr-slide .qr img { display: block; width: 100%; height: 100%; }
.pr-slide .qr.placeholder { background: transparent; border: 2px dashed #3a3a42; color: #4a4a52; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; font-size: 26px; font-weight: 700; }
.pr-slide .qr.placeholder svg { width: 90px; height: 90px; }
.pr-slide .handle { font-size: 34px; font-weight: 800; color: var(--accent-soft); letter-spacing: -.01em; }
.pr-slide .checks { display: flex; flex-direction: column; gap: 30px; }
.pr-slide .checks li { list-style: none; display: flex; align-items: center; gap: 30px; font-size: 52px; font-weight: 700; letter-spacing: -.02em; }
.pr-slide .checks .ck { width: 74px; height: 74px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: rgba(53,208,115,.12); border: 1px solid rgba(53,208,115,.4); color: var(--success); }
.pr-slide .checks .ck.bad { background: rgba(255,77,109,.12); border-color: rgba(255,77,109,.4); color: var(--danger); }
.pr-slide .checks .ck svg { width: 40px; height: 40px; }
.pr-slide .rail { display: flex; gap: 14px; align-items: center; }
.pr-slide .rail .seg { flex: 1; height: 8px; border-radius: 999px; background: #232327; }
.pr-slide .rail .seg.done { background: #3a3a42; }
.pr-slide .rail .seg.cur { background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 22px rgba(230,1,101,.6); }
.pr-slide .rail-labels { display: flex; gap: 14px; }
.pr-slide .rail-labels span { flex: 1; font-size: 20px; font-weight: 700; color: #4a4a52; text-transform: uppercase; letter-spacing: .06em; line-height: 1.2; }
.pr-slide .rail-labels span.cur { color: var(--accent-soft); }
.pr-slide .rail-labels span.done { color: #7a7a84; }
.pr-slide .index { font-size: 200px; font-weight: 800; letter-spacing: -.06em; line-height: .9; }
.pr-slide .big-number { font-size: 300px; font-weight: 800; letter-spacing: -.05em; line-height: .95; }
.pr-slide .mistake-tag { display: inline-flex; align-items: center; gap: 18px; font-size: 44px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-soft); }
.pr-slide .mistake-tag .iconbox { width: 84px; height: 84px; border-radius: 22px; border-color: rgba(230,1,101,.5); background: rgba(230,1,101,.10); }
.pr-slide .mistake-tag .iconbox svg { width: 44px; height: 44px; }
.pr-slide .uselist { display: flex; flex-direction: column; gap: 22px; }
.pr-slide .uselist .u { display: flex; align-items: center; gap: 34px; padding: 34px 44px; border-radius: 24px; border: 1px solid var(--border); background: rgba(21,21,23,.6); font-size: 44px; font-weight: 700; letter-spacing: -.02em; color: #5f5f68; }
.pr-slide .uselist .u .n { width: 64px; height: 64px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); font-size: 26px; font-weight: 800; color: #6a6a74; }
.pr-slide .uselist .u.cur { color: #fff; border-color: rgba(230,1,101,.6); background: var(--card); box-shadow: 0 12px 60px rgba(230,1,101,.2); }
.pr-slide .uselist .u.cur .n { background: linear-gradient(0deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; }
.pr-slide .uselist .u.done { color: #b8b8c2; }
.pr-slide .tree { display: flex; flex-direction: column; align-items: center; }
.pr-slide .tree .root { padding: 34px 64px; border-radius: 24px; background: #fff; color: #0a0a0b; font-size: 56px; font-weight: 800; letter-spacing: -.02em; }
.pr-slide .tree .links { width: 1100px; height: 120px; }
.pr-slide .tree .leaves { display: flex; gap: 60px; width: 1100px; }
.pr-slide .tree .leaf { flex: 1; text-align: center; padding: 44px 40px; border-radius: 24px; font-size: 48px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.pr-slide .tree .leaf.on { background: linear-gradient(0deg, var(--accent) 0%, var(--accent-2) 100%); color: #fff; box-shadow: 0 16px 70px rgba(230,1,101,.35); }
.pr-slide .tree .leaf.off { border: 1px solid rgba(128,0,219,.55); color: #d9c6f2; background: rgba(128,0,219,.16); }
.pr-slide .tree .leaf small { display: block; font-size: 24px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; opacity: .8; }
.pr-slide .funnel { display: flex; flex-direction: column; align-items: center; }
.pr-slide .funnel .node { padding: 26px 64px; border-radius: 24px; background: var(--card); border: 1px solid var(--border); font-size: 44px; font-weight: 800; letter-spacing: -.02em; }
.pr-slide .funnel .node.on { background: linear-gradient(0deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 16px 70px rgba(230,1,101,.35); }
.pr-slide .funnel .edge { display: flex; align-items: center; gap: 18px; height: 96px; color: var(--muted-foreground); font-size: 26px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pr-slide .funnel .edge svg { width: 36px; height: 36px; color: var(--accent-soft); }
.pr-slide .race text { font-family: Manrope, sans-serif; fill: #fff; font-weight: 700; }
.pr-slide .race .lane { stroke: #3a3a42; stroke-width: 3; }
.pr-slide .race .hurdle { stroke: #fff; stroke-width: 6; stroke-linecap: round; fill: none; }
.pr-slide .race .hurdle.bar { stroke: var(--accent); stroke-width: 12; }
.pr-slide .race .runner { stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.pr-slide .race .runner.head { fill: #fff; stroke: none; }
.pr-slide .race .flag { stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: rgba(230,1,101,.85); }
.pr-slide .race .flag.pole { fill: none; }
.pr-slide .race .head { fill: var(--muted-foreground); font-size: 26px; letter-spacing: .05em; text-transform: uppercase; }
.pr-slide .race .who { font-size: 38px; }
.pr-slide .ill { position: relative; overflow: hidden; }
.pr-slide .ill img { position: absolute; max-width: none; display: block; mix-blend-mode: screen; }
.pr-slide .ill-label { font-size: 28px; font-weight: 800; color: #fff; text-align: center; letter-spacing: -.01em; }
.pr-slide .rake { mix-blend-mode: screen; }
.pr-slide .slide-num { font-size: 22px; font-weight: 700; color: #4a4a52; letter-spacing: .04em; white-space: nowrap; }
.pr-slide .slide-brand { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; color: #4a4a52; letter-spacing: -.01em; white-space: nowrap; }
.pr-slide .slide-brand .dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(0deg, var(--accent), var(--accent-2)); flex: none; }
/* slides preserved 1:1 from Canva sources */
.pr-slide .rt { font-family: Montserrat, Manrope, sans-serif; font-weight: 700; line-height: 1.2; white-space: pre-line; }
.pr-slide .rp { position: relative; overflow: hidden; }
.pr-slide .rp img { position: absolute; max-width: none; display: block; }
.pr-slide .rl { background: #fff; }