/* ============================================================
   CCK Orientation Kit — Design System (per design.md)
   Purple/violet on light lavender · soft-3D world · Poppins + Nunito Sans
   ============================================================ */
:root{
  --purple-primary:#6C4AD8; --purple-bright:#7C5CE6; --purple-deep:#5636B4;
  --nav-bar:#5B3FB5;
  --lavender-bg:#EAE7F8; --lavender-soft:#F3F1FB; --panel:#FFFFFF;
  --ink:#1E1B33; --muted:#6B6880;
  --accent-warm:#F79A3C; --highlight:#FFB86B;
  --correct:#63C68A; --correct-soft:#E6F6EC; --tryagain:#F0B840; --tryagain-soft:#FCF3DD;
  --wrong:#E8705B; --wrong-soft:#FBEBE7;
  --line:#E4DFF4; --line-soft:#EFEBFA;
  --white:#fff;
  --r-sm:10px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --sh-sm:0 4px 12px rgba(18,21,31,.04);
  --sh-md:0 12px 30px rgba(18,21,31,.07);
  --sh-lg:0 24px 60px rgba(18,21,31,.10);
  --top-bar:linear-gradient(90deg,#7C5CE6 0%,#6A47D6 100%);
  --head:"Poppins", ui-rounded, system-ui, sans-serif;
  --body:"Nunito Sans", "Nunito", system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--body); color:var(--ink); background:var(--lavender-bg); -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--head); margin:0; font-weight:700; letter-spacing:-.01em; line-height:1.12}
p{margin:0}
button{font-family:var(--body); border:none; background:none; cursor:pointer; color:inherit}
img{max-width:100%; display:block}
.hidden{display:none !important}

/* ---------- app frame ---------- */
.course{display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden}

/* ---------- top bar ---------- */
.topbar{height:60px; flex:0 0 60px; background:var(--top-bar); color:#fff; display:flex; align-items:center;
  justify-content:space-between; padding:0 20px; position:relative; z-index:30; box-shadow:0 2px 12px rgba(60,40,120,.18)}
.tb-left{display:flex; align-items:center; gap:14px}
.hamburger{width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.14); display:grid; place-items:center; gap:4px; transition:background .15s}
.hamburger:hover{background:rgba(255,255,255,.24)}
.hamburger span{display:block; width:17px; height:2px; background:#fff; border-radius:2px}
.brand{display:flex; align-items:center; gap:10px}
.brand .mk{width:34px; height:34px; border-radius:10px; background:#fff; display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.15)}
.brand .mk span{font-family:var(--head); font-weight:800; font-size:18px; color:var(--purple-primary)}
.brand .mk img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.brand .nm{font-family:var(--head); font-weight:700; font-size:15px; line-height:1}
.brand .nm small{display:block; font-family:var(--body); font-weight:600; font-size:10px; opacity:.7; letter-spacing:.08em; text-transform:uppercase; margin-top:2px}
.section-label{font-family:var(--head); font-weight:600; font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,.85); background:rgba(255,255,255,.12); padding:6px 13px; border-radius:var(--r-full)}
.tb-right{display:flex; align-items:center; gap:12px}
.tb-btn{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:16px; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); cursor:pointer; transition:.15s; flex-shrink:0}
.tb-btn:hover{background:rgba(255,255,255,.28)}
.tb-btn.playing{color:#FFD86B; background:rgba(255,216,107,.22); border-color:rgba(255,216,107,.5)}
.settings-pop{position:fixed; top:58px; right:16px; z-index:130; width:236px; background:#fff; border-radius:14px; box-shadow:0 20px 48px rgba(20,14,45,.32); padding:10px 12px 12px}
.settings-pop[hidden]{display:none}
.settings-pop .set-title{font-family:var(--head); font-weight:800; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:4px 8px 6px}
.set-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 8px; font-size:14px; font-weight:600; color:var(--ink)}
.toggle{width:44px; height:26px; border-radius:20px; background:var(--line); position:relative; transition:.18s; flex-shrink:0; cursor:pointer; border:none}
.toggle span{position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:.18s}
.toggle[aria-pressed="true"]{background:var(--purple-primary)}
.toggle[aria-pressed="true"] span{left:21px}
/* "i" info hint pill (fact check, matching, etc.) — amber square badge like the reference */
.scan-hint{display:inline-flex; align-items:center; gap:10px; margin-bottom:16px; font-size:14px; font-weight:600; color:var(--muted); background:var(--lavender-soft); padding:7px 16px 7px 7px; border-radius:var(--r-full)}
.scan-hint .sh-ic{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:7px; background:#F4C948; color:#7a5b12; font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:700; font-size:15px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

/* click-to-match (two columns, click a problem then its fix) */
.match-grid{display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:6px}
.match-col{display:flex; flex-direction:column; gap:13px}
.match-item{text-align:left; background:#fff; border:2px solid var(--line); border-radius:var(--r-md); padding:16px 18px; font-size:16px; font-weight:600; color:var(--ink); cursor:pointer; transition:.14s; line-height:1.4}
.match-item:hover:not(.done){border-color:var(--accent)}
.match-item.sel{border-color:var(--accent); background:var(--lavender-soft); box-shadow:0 0 0 3px rgba(108,74,216,.16)}
.match-item.done{border-color:var(--correct); background:var(--correct-soft); color:var(--correct); cursor:default}
.match-item.done::after{content:" ✓"; font-weight:800}
.match-item.wrong{border-color:var(--wrong); background:var(--wrong-soft); animation:nudge .32s}
.match-item.nudge{animation:nudge .32s}
@keyframes nudge{0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)}}

/* ---------- slide-out outline ---------- */
.scrim{position:absolute; inset:0; background:rgba(30,20,55,.4); backdrop-filter:blur(2px); z-index:25; opacity:0; pointer-events:none; transition:opacity .22s}
.scrim.on{opacity:1; pointer-events:auto}
.outline{position:absolute; top:0; left:0; bottom:0; width:min(440px,86vw); background:#fff; z-index:26; box-shadow:var(--sh-lg);
  transform:translateX(-102%); transition:transform .26s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column; padding:22px 0}
.outline.on{transform:none}
.outline h3{padding:6px 26px 16px; font-size:18px}
.outline .ol-scroll{overflow-y:auto; padding:0 16px}
.ol-mod{margin-bottom:6px}
.ol-mod-title{display:flex; align-items:center; gap:10px; padding:9px 10px; font-family:var(--head); font-weight:700; font-size:13px; color:var(--muted)}
.ol-mod-title .n{width:22px; height:22px; border-radius:7px; background:var(--lavender-soft); color:var(--purple-primary); display:grid; place-items:center; font-size:12px; flex-shrink:0}
.ol-item{display:flex; align-items:center; gap:10px; padding:9px 12px 9px 42px; border-radius:var(--r-sm); font-size:13.5px; color:var(--ink); width:100%; text-align:left; transition:background .12s}
.ol-item:hover{background:var(--lavender-soft)}
.ol-item.active{background:var(--lavender-soft); color:var(--purple-primary); font-weight:700}
.ol-item.done .st{color:var(--correct)}
.ol-item .st{margin-left:auto; font-size:13px; color:var(--muted)}
/* module-only rows (top-left menu shows just the module names) */
.ol-module{padding:14px 14px; gap:13px; font-family:var(--head); font-weight:700; font-size:15.5px}
.ol-module .n{width:28px; height:28px; border-radius:9px; background:var(--lavender-soft); color:var(--purple-primary); display:grid; place-items:center; font-size:13px; flex-shrink:0}
.ol-module.active .n{background:var(--purple-primary); color:#fff}
.ol-module.done .n{background:var(--correct-soft); color:var(--correct)}
.ol-module .ol-mod-name{flex:1}

/* ---------- stage ---------- */
.stage{flex:1; position:relative; overflow:hidden}
.screen{position:absolute; inset:0; overflow-y:auto; opacity:0; pointer-events:none; transition:opacity .3s}
.screen.on{opacity:1; pointer-events:auto}
.wrap{max-width:960px; margin:0 auto; padding:46px 32px 40px; min-height:100%}
.wrap.narrow{max-width:720px}

.eyebrow{display:inline-block; font-family:var(--head); font-weight:600; font-size:11px; letter-spacing:.14em;
  color:var(--purple-primary); background:var(--lavender-soft); padding:6px 13px; border-radius:var(--r-full); margin-bottom:16px}
.s-title{font-size:34px; line-height:1.08; margin-bottom:12px}
.s-title .hl{color:var(--purple-primary)}
.s-sub{font-size:17px; color:var(--muted); max-width:60ch; line-height:1.5}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--head); font-weight:600;
  font-size:15px; border-radius:var(--r-full); padding:13px 26px; transition:transform .12s, box-shadow .2s, background .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--purple-primary); color:#fff; box-shadow:0 10px 24px rgba(108,74,216,.32)}
.btn-primary:hover{background:var(--purple-deep)}
.btn-secondary{background:#fff; color:var(--ink); border:1px solid var(--line)}
.btn-secondary:hover{background:var(--lavender-soft)}
.btn-lg{font-size:16px; padding:15px 30px}
.btn[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none}

/* ---------- bottom nav ---------- */
.navbar{height:64px; flex:0 0 64px; background:var(--nav-bar); display:flex; align-items:center; justify-content:space-between; padding:0 22px; z-index:20; box-shadow:0 -2px 14px rgba(50,30,110,.2)}
.nav-arrow{width:44px; height:44px; border-radius:var(--r-full); background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; font-size:18px; transition:background .15s}
.nav-arrow:hover:not(:disabled){background:rgba(255,255,255,.24)}
.nav-arrow:disabled{opacity:.3; cursor:not-allowed}
.dots{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; max-width:70%}
.dot{width:26px; height:26px; border-radius:var(--r-full); border:1.5px solid rgba(255,255,255,.35); color:rgba(255,255,255,.7);
  font-family:var(--head); font-weight:700; font-size:11px; display:grid; place-items:center; transition:.18s; background:transparent}
.dot:hover{border-color:#fff; color:#fff}
.dot.done{background:rgba(255,255,255,.28); border-color:transparent; color:#fff}
.dot.cur{background:#fff; border-color:#fff; color:var(--purple-deep); transform:scale(1.08)}
.dot.locked-gate{opacity:.45}

/* thin global progress line under top bar */
.progress-global{height:3px; background:rgba(255,255,255,.25); flex:0 0 3px}
.progress-global .pf{height:100%; background:var(--highlight); width:0; transition:width .4s}

/* ---------- art placeholder ---------- */
.art{position:relative; border-radius:var(--r-lg); overflow:hidden; background:
  repeating-linear-gradient(135deg,#EDE9FA,#EDE9FA 14px,#E6E1F6 14px,#E6E1F6 28px);
  border:1.5px dashed #C9BEEC; display:flex; align-items:center; justify-content:center; min-height:180px}
.art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.art .ph{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:22px; color:var(--purple-primary)}
.art .ph .ic{font-size:30px}
.art .ph .kd{font-family:var(--head); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.65}
.art .ph .lb{font-size:13px; color:var(--muted); max-width:32ch; line-height:1.4}
.art.scene{aspect-ratio:16/9} .art.character{aspect-ratio:3/4; min-height:0}
.art.tall{aspect-ratio:3/4}

/* ---------- hero / transition (full-bleed) ---------- */
.fullbleed{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.fullbleed .bg{position:absolute; inset:0; background:repeating-linear-gradient(135deg,#E5DFF7,#E5DFF7 16px,#DED6F2 16px,#DED6F2 32px)}
.fullbleed .bg img{width:100%; height:100%; object-fit:cover}
.fullbleed .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(30,20,55,.78) 0%, rgba(30,20,55,.5) 45%, rgba(30,20,55,.1) 100%)}
.fullbleed .fb-ph{position:absolute; right:26px; bottom:20px; z-index:2; color:rgba(255,255,255,.8); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:rgba(0,0,0,.25); padding:6px 12px; border-radius:var(--r-full)}
.fullbleed .fb-inner{position:relative; z-index:3; max-width:960px; width:100%; padding:0 56px; color:#fff}
/* title page (hero) — reads like the reference welcome layout */
.fullbleed .eyebrow{background:transparent; padding:0; font-weight:400; font-size:clamp(20px,2.4vw,30px); letter-spacing:0; text-transform:none; color:rgba(255,255,255,.9); margin-bottom:4px}
.fullbleed:has(.hero-rule) h1{font-size:clamp(38px,5.6vw,60px); margin-bottom:0}
.hero-rule{width:120px; height:5px; border-radius:3px; background:#FFC94D; margin:18px 0 24px}
/* nudge the title-page text block 2 inches left — same width, identical line wrapping */
/* Title-style slides: pin the text block hard LEFT on ANY monitor width.
   (center + a fixed -192px shift drifted back toward the middle on wide screens,
   which is why the module intros kept looking centered.) */
.fullbleed:has(.hero-rule), .fullbleed.tleft{justify-content:flex-start}
.fullbleed:has(.hero-rule) .fb-inner, .fullbleed.tleft .fb-inner{transform:none; padding:0 40px 0 clamp(64px,7vw,128px)}
.fullbleed h1{font-size:52px; line-height:1.03; margin-bottom:18px; max-width:16ch}
.fullbleed h1 .hl{color:#FFC94D; white-space:nowrap}   /* keep a highlighted phrase together on one line */
/* Module 4 title stacks as "Confident with / Parents and / Coworkers" */
.mod-conflict .fullbleed:has(.hero-rule) h1{max-width:15ch}
.mod-conflict .fullbleed h1 .hl{white-space:normal}
/* Gold accent rule under a title-slide eyebrow (transition slides), same look as the hero rule */
.gold-rule{width:120px; height:5px; border-radius:3px; background:#FFC94D; margin:14px 0 22px}
.fullbleed p{font-size:19px; line-height:1.55; color:rgba(255,255,255,.9); max-width:52ch; margin-bottom:30px}
.time-badge{display:inline-flex; align-items:center; gap:11px; color:rgba(255,255,255,.8); margin-top:26px}
.time-badge .clock{width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35); display:grid; place-items:center; font-size:17px}
.time-badge b{display:block; color:#fff; font-size:14px; font-family:var(--head)} .time-badge span{font-size:12px}

/* ---------- split (text + character/object) ---------- */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center; min-height:60vh}
.split .col-art{align-self:stretch; display:flex}
.split .art{width:100%}

/* ---------- card grids ---------- */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-top:26px}
.ccard{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:18px; box-shadow:var(--sh-sm); transition:transform .14s, box-shadow .14s}
.ccard.reveal{cursor:pointer}
.ccard.reveal:hover{transform:translateY(-2px); box-shadow:var(--sh-md)}
.ccard .ic{width:44px; height:44px; border-radius:12px; background:var(--lavender-soft); display:grid; place-items:center; margin-bottom:12px; overflow:hidden}
.ccard .ic .art{min-height:0; border:none; border-radius:12px; width:44px; height:44px; background:none}
.ccard .ic .art .ph{padding:0} .ccard .ic .art .ph .ic{font-size:20px} .ccard .ic .art .ph .kd,.ccard .ic .art .ph .lb{display:none}
.ccard h4{font-size:15.5px; margin-bottom:5px}
.ccard .line{font-size:13.5px; color:var(--muted); line-height:1.45}
.ccard.reveal .line{max-height:0; opacity:0; overflow:hidden; transition:max-height .25s, opacity .2s, margin .2s}
.ccard.reveal.open .line{max-height:120px; opacity:1; margin-top:4px}
.ccard.reveal .tap{font-size:11px; color:var(--purple-primary); font-weight:700; margin-top:6px}
.ccard.reveal.open .tap{display:none}

/* split columns (2-3 wide info) */
.split-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:24px}
.split-col{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--sh-sm)}
.split-col .ic{width:48px; height:48px; border-radius:13px; background:var(--lavender-soft); display:grid; place-items:center; margin-bottom:14px}
.split-col h4{font-size:17px; margin-bottom:7px} .split-col p{font-size:14px; color:var(--muted); line-height:1.5}

/* callout / note */
.note{display:flex; gap:12px; align-items:flex-start; background:var(--lavender-soft); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; margin-top:22px}
.note .ni{flex-shrink:0; width:30px; height:30px; border-radius:9px; background:var(--purple-primary); color:#fff; display:grid; place-items:center; font-size:15px}
.note p{font-size:14.5px; line-height:1.55}
.note.warm{background:#FFF4E4; border-color:#F6E1BE} .note.warm .ni{background:var(--accent-warm)}

/* ============================================================
   NEUTRAL CONTENT THEME (everything except title + Discover)
   Light neutral base + ONE themeable accent → reskins per center.
   ============================================================ */
:root{
  /* PRIMARY/accent = the center's brand color (purple for this kit) — swap per center */
  --accent:#6C4AD8; --accent-2:#8A6FE8;
  --neutral-bg:#F6F5FB; --neutral-bg2:#ECEAF4; --panel-edge:#F4F2FC;
  --ink-neutral:#2E2E38; --ink-neutral-soft:#6E6C7A;
  /* fixed lively POP palette (Calendly-style) — for imagery + accents, stays across reskins */
  --pop-coral:#FF6F61; --pop-yellow:#FFC94D; --pop-teal:#3FC1C9; --pop-pink:#F48FB1; --pop-green:#5FC58A;
}
.subfull{position:absolute; inset:0; display:grid; overflow:auto; background:var(--neutral-bg)}
.subfull.side-right{grid-template-columns:1.02fr .98fr}
.subfull.side-left{grid-template-columns:.98fr 1.02fr}
.subfull.side-left .feat-media{order:-1}
.feat-media{position:relative; overflow:hidden; min-height:100%; background:var(--neutral-bg2)}
.feat-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.feat-ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:26px;
  color:var(--ink-neutral-soft); font-size:13px; font-weight:600; background:repeating-linear-gradient(135deg,#ECE9E3,#ECE9E3 14px,#E3DFD7 14px,#E3DFD7 28px)}
.feat-ph span{max-width:24ch}
/* gradient blend between the image and the text panel */
.subfull.side-right .feat-media::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--panel-edge) 0%, rgba(244,242,252,0) 26%)}
.subfull.side-left .feat-media::after{content:""; position:absolute; inset:0; background:linear-gradient(270deg,var(--panel-edge) 0%, rgba(244,242,252,0) 26%)}
.feat-panel{position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:48px clamp(38px,5.5vw,86px);
  background:linear-gradient(145deg,#FFFFFF 0%, var(--neutral-bg) 100%)}
/* Every module shares the purple word/accent color; the images carry the color variety. */
.mod-conflict{--accent:#6C4AD8; --accent-2:#8A6FE8}
/* Show every split image cleanly, no fade over the character (Zaire's steer) */
.subfull .feat-media::after{display:none}
/* The dev "soft-3D scene ·" caption is not client-facing */
.fb-ph{display:none !important}
/* Left-shift the words on a full-bleed slide — SAME max-width (960) as the hero so the
   left edge lands in the exact same spot as the Orientation title. A narrower box was
   centering them further right; matching the width is what aligns them. */
.fullbleed.tleft .fb-inner{max-width:960px}
.fullbleed.tleft p{max-width:44ch}
.fullbleed.tleft h1{max-width:none}   /* let short titles (e.g. "Classroom Interactions") sit on one line */
/* soft Calendly-style pop blobs behind the copy (subtle, keep text legible) */
.feat-panel::before{content:""; position:absolute; width:300px; height:300px; border-radius:50%; top:-90px; right:-70px; pointer-events:none; background:radial-gradient(circle, rgba(255,201,77,.30), transparent 70%)}
.feat-panel::after{content:""; position:absolute; width:230px; height:230px; border-radius:50%; bottom:-80px; left:-60px; pointer-events:none; background:radial-gradient(circle, rgba(63,193,201,.22), transparent 70%)}
.feat-panel > *{position:relative; z-index:1}

/* ---- datablock: any content/interaction slide dropped into the module-1 split ---- */
.subfull.datablock .feat-panel{justify-content:flex-start; overflow-y:auto; padding-top:44px; padding-bottom:44px}
.subfull.datablock .dpanel{width:100%; position:relative; z-index:1}
/* neutralize the old centered-wrap look inside the panel */
.dpanel .eyebrow{display:inline-block; background:transparent; padding:0; color:var(--accent); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px}
.dpanel .s-title, .dpanel h2:not(.sub-title){font-family:var(--head); font-weight:800; font-size:clamp(21px,2.5vw,28px); line-height:1.12; color:var(--ink); margin-bottom:10px}
.dpanel .s-sub{font-size:15px; line-height:1.55; color:var(--muted); margin-bottom:18px; max-width:50ch}
.dpanel .card-grid{grid-template-columns:1fr 1fr}
.dpanel .split-cols{grid-template-columns:1fr}
.dpanel .fact-grid{grid-template-columns:1fr}
.dpanel .hub-grid{grid-template-columns:1fr}
.dpanel .ex-title{font-family:var(--head); font-weight:800; font-size:clamp(20px,2.4vw,26px); line-height:1.12; margin-bottom:14px}
.dpanel .coach-badge{display:inline-flex; align-items:center; gap:8px; background:var(--lavender-soft); color:var(--accent); font-weight:700; font-size:13px; padding:7px 14px; border-radius:var(--r-full); margin-bottom:14px}
.dpanel .coach-say{font-size:17px; line-height:1.6; color:var(--ink-neutral); margin-bottom:22px; max-width:48ch}
.dpanel .reflect-box{width:100%; min-height:120px}

/* ---- immersive: full-bleed image behind a floating interaction card ---- */
.immersive{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:auto; padding:34px 24px}
.immersive .bg{position:absolute; inset:0; background:linear-gradient(150deg,#eef1f6,#e3e9f2)}
.immersive .bg img{width:100%; height:100%; object-fit:cover}
.immersive .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(28,22,52,.60), rgba(28,22,52,.34))}
.imm-card{position:relative; z-index:2; width:100%; max-width:760px; margin:auto; background:rgba(255,255,255,.96); border-radius:22px; padding:34px clamp(22px,3.4vw,40px); box-shadow:0 26px 60px rgba(20,14,45,.34)}
.imm-card .eyebrow{color:var(--accent); background:transparent; padding:0; font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.imm-card .s-title, .imm-card h2{font-family:var(--head); font-weight:800; font-size:clamp(22px,2.6vw,30px); line-height:1.1; margin:6px 0 8px}
.imm-card .s-sub{font-size:15px; line-height:1.55; color:var(--muted); margin-bottom:18px}

/* ---- hotspot scan: fills the stage with padding ---- */
.hs-wrap{position:absolute; inset:0; overflow:auto; padding:30px clamp(24px,4vw,54px)}
.hs-wrap .eyebrow{color:var(--accent)}

.sub-head{border-left:3px solid var(--accent); padding-left:16px; margin-bottom:18px}
.sub-eyebrow{display:block; color:var(--ink-neutral-soft); font-size:clamp(15px,1.7vw,19px); font-weight:600; font-family:var(--head)}
.sub-title{color:var(--accent); font-family:var(--head); font-weight:800; font-size:clamp(26px,3.4vw,42px); text-transform:uppercase; line-height:1.03; margin:0}
.sub-intro{font-size:16px; line-height:1.6; color:var(--ink-neutral); margin-bottom:14px; max-width:52ch}
.sub-note{margin-top:8px; font-size:13.5px; color:var(--ink-neutral-soft); font-style:italic; max-width:48ch; position:relative; z-index:1}
/* resource links (Additional Training) */
.feat-links{display:flex; flex-direction:column; gap:10px; margin:6px 0 14px; max-width:440px; position:relative; z-index:1}
.feat-link{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:13px 16px; text-decoration:none; color:var(--ink-neutral); box-shadow:var(--sh-sm); transition:.14s}
.feat-link:hover{border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--sh-md)}
.fl-ic{font-size:20px; flex-shrink:0}
.fl-label{flex:1; font-family:var(--head); font-weight:600; font-size:14.5px}
.fl-arrow{color:var(--accent); font-weight:800}
.bars-list{display:flex; flex-direction:column; gap:15px; margin-top:6px}
.bar-tag{display:inline-block; background:var(--accent); color:#fff; font-family:var(--head); font-weight:800; font-size:13.5px; letter-spacing:.03em; text-transform:uppercase; padding:7px 15px; margin-bottom:6px}
.bar-item.alt .bar-tag{background:var(--accent-2)}
.bar-desc{font-size:14px; color:var(--ink-neutral); line-height:1.5; max-width:46ch; margin:0}
/* pill-reveal (policies) */
.pill-hint{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-neutral-soft); margin:14px 0 14px; position:relative; z-index:1}
.pill-i{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:5px; background:var(--pop-yellow); color:#5a4600; font-weight:800; font-size:12px}
.pill-grid{display:flex; flex-wrap:wrap; gap:10px; position:relative; z-index:1}
.pill{background:transparent; border:1.5px solid #C9C4DA; border-radius:var(--r-full); padding:12px 20px; font-family:var(--head); font-weight:600; font-size:15px; color:var(--ink-neutral); transition:.14s}
.pill:hover{border-color:var(--accent); transform:translateY(-1px)}
.pill.seen{border-color:var(--accent)}
.pill.seen::after{content:"✓"; margin-left:7px; color:var(--correct); font-weight:800; font-size:13px}
.pill.on{background:var(--accent); border-color:var(--accent); color:#fff}
.pill.on::after{color:#fff}
.pill-reveal{display:none; margin-top:18px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px; box-shadow:var(--sh-sm); position:relative; z-index:1; animation:cckIn .3s both}
.pill-reveal.on{display:block}
.pr-title{font-family:var(--head); font-weight:800; font-size:16px; color:var(--accent); margin-bottom:6px}
.pr-body{font-size:14.5px; color:var(--ink-neutral); line-height:1.55}

/* full-bleed scenario (character one side, choices the other) */
.sc2-top{display:flex; align-items:center; gap:12px; margin-bottom:12px; position:relative; z-index:1}
.sc2-tag{font-family:var(--head); font-weight:800; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:#fff; background:var(--accent); padding:6px 12px; border-radius:var(--r-full)}
.sc2-count{font-family:var(--head); font-weight:700; font-size:13px; color:var(--ink-neutral-soft)}
.sc2-name{font-family:var(--head); font-weight:800; font-size:clamp(20px,2.4vw,26px); color:var(--ink-neutral); margin-bottom:12px; position:relative; z-index:1}
.sc2-say{font-size:clamp(17px,1.9vw,20px); line-height:1.5; color:var(--ink-neutral); font-style:italic; background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:16px 18px 16px 20px; margin-bottom:16px; position:relative; z-index:1; box-shadow:var(--sh-sm)}
.sc2-quote{color:var(--accent); font-family:var(--head); font-weight:800; margin-right:2px}
.sc2-prompt{font-family:var(--head); font-weight:800; font-size:16px; color:var(--ink-neutral); margin-bottom:13px; position:relative; z-index:1}
.scenario2 .choices{position:relative; z-index:1}
.scenario2 .choice{background:#fff; border:2px solid var(--line)}
.scenario2 .choice .key{background:var(--neutral-bg2); color:var(--accent)}
.scenario2 .choice .tx{color:var(--ink-neutral)}
.scenario2 .choice:hover:not(.locked){border-color:var(--accent)}
.scenario2 .choice.correct{border-color:var(--correct); background:var(--correct-soft)} .scenario2 .choice.correct .key{background:var(--correct); color:#fff}
.scenario2 .choice.wrong{border-color:var(--wrong); background:var(--wrong-soft)} .scenario2 .choice.wrong .key{background:var(--wrong); color:#fff}
.scenario2 .feedback, .scenario2 .coach-note{position:relative; z-index:1}
.scenario2 .coach-note{background:var(--neutral-bg2)} .scenario2 .coach-note b{color:var(--accent)}

/* module knowledge check */
.mc-count{font-family:var(--head); font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-neutral-soft); margin-bottom:8px; position:relative; z-index:1}
.mc-q{font-family:var(--head); font-weight:800; font-size:clamp(19px,2.4vw,26px); line-height:1.25; margin-bottom:18px; color:var(--ink-neutral); position:relative; z-index:1}
.mc-choices{display:flex; flex-direction:column; gap:11px; position:relative; z-index:1}
.mc-choice{display:flex; align-items:center; gap:13px; text-align:left; background:#fff; border:2px solid var(--line); border-radius:var(--r-md); padding:14px 16px; transition:.14s}
.mc-choice:hover:not(.locked){border-color:var(--accent); transform:translateY(-1px)}
.mc-key{flex-shrink:0; width:28px; height:28px; border-radius:8px; background:var(--neutral-bg2); color:var(--accent); font-family:var(--head); font-weight:800; display:grid; place-items:center; font-size:14px}
.mc-choice span:last-child{font-size:15px; color:var(--ink-neutral); font-weight:500}
.mc-choice.locked{cursor:default}
.mc-choice.correct{border-color:var(--correct); background:var(--correct-soft)} .mc-choice.correct .mc-key{background:var(--correct); color:#fff}
.mc-choice.wrong{border-color:var(--wrong); background:var(--wrong-soft)} .mc-choice.wrong .mc-key{background:var(--wrong); color:#fff}
.mc-fb{display:none; margin-top:14px; font-family:var(--head); font-weight:700; font-size:14.5px; position:relative; z-index:1}
.mc-fb.on{display:block} .mc-fb.ok{color:var(--correct)} .mc-fb.no{color:var(--wrong)}
.mc-next{margin-top:16px; position:relative; z-index:1}
.mc-result{position:relative; z-index:1}
.mc-badge{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:26px; color:#fff; margin-bottom:14px}
.mc-result.pass .mc-badge{background:var(--correct)} .mc-result.fail .mc-badge{background:var(--accent)}
.mc-result h3{font-family:var(--head); font-weight:800; font-size:24px; margin-bottom:8px; color:var(--ink-neutral)}
.mc-result p{font-size:15px; color:var(--ink-neutral-soft); line-height:1.5; margin-bottom:18px; max-width:44ch}

@media (max-width:860px){
  .subfull{display:block}
  .feat-media{min-height:0; aspect-ratio:16/9}
  .subfull.side-left .feat-media{order:0}
}

/* ---------- learning-objectives directory (full-bleed image, legible left) ---------- */
.fullbleed.dir-full{justify-content:flex-start}
.dir-full .bg::after{background:linear-gradient(90deg, rgba(24,18,46,.88) 0%, rgba(24,18,46,.76) 42%, rgba(24,18,46,.36) 70%, rgba(24,18,46,.06) 100%)}
.dir-full .dir-inner{max-width:600px; padding:34px clamp(40px,6vw,92px)}
.dir-eyebrow{background:transparent; padding:0; color:rgba(255,255,255,.85); text-transform:none; letter-spacing:0; font-weight:600; font-size:clamp(16px,2vw,22px); margin-bottom:2px}
.dir-title{font-family:var(--head); font-weight:800; color:#fff; font-size:clamp(30px,4.4vw,50px); line-height:1.03; margin:0 0 24px}
.dir-title .hl{color:#FFC94D}
.dir-pillars{display:flex; flex-direction:column; gap:16px}
.dir-pillar{display:block; width:100%; text-align:left; transition:transform .12s}
.dir-pillar:hover{transform:translateX(3px)}
.dir-tag{display:inline-flex; align-items:center; gap:8px; background:var(--purple-primary); color:#fff; font-family:var(--head); font-weight:800; font-size:14px; letter-spacing:.03em; text-transform:uppercase; padding:8px 15px; border-radius:8px; margin-bottom:8px; transition:background .15s}
.dir-pillar:hover .dir-tag{background:var(--purple-bright)}
.dir-arrow{opacity:0; transform:translateX(-4px); transition:.15s; font-weight:700}
.dir-pillar:hover .dir-arrow{opacity:1; transform:none}
.dir-desc{display:block; font-size:14.5px; color:rgba(255,255,255,.82); line-height:1.5; max-width:44ch}
.dir-pillar:hover .dir-desc{color:#fff}
@media (max-width:860px){ .dir-inner{max-width:none} }

/* ---------- timeline ---------- */
.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:32px; position:relative}
.tl-stop{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 18px; text-align:center; box-shadow:var(--sh-sm)}
.tl-stop .n{width:30px; height:30px; border-radius:50%; background:var(--purple-primary); color:#fff; display:grid; place-items:center; font-family:var(--head); font-weight:700; margin:0 auto 12px}
.tl-stop .ic{width:52px; height:52px; margin:0 auto 12px; border-radius:14px; background:var(--lavender-soft); display:grid; place-items:center}
.tl-stop h4{font-size:15px; margin-bottom:5px} .tl-stop .note-sm{font-size:12.5px; color:var(--muted)}

/* ---------- name entry ---------- */
.name-card{max-width:460px; margin:6vh auto 0; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:38px 34px; text-align:center; box-shadow:var(--sh-md)}
.name-card .ic{width:64px; height:64px; margin:0 auto 16px}
.name-card h2{font-size:24px; margin-bottom:8px} .name-card p{color:var(--muted); font-size:14.5px; margin-bottom:22px}
.name-input{width:100%; font-family:var(--head); font-weight:600; font-size:19px; text-align:center; padding:16px; border:2px solid var(--line); border-radius:var(--r-md); background:var(--lavender-soft); outline:none; color:var(--ink); margin-bottom:18px}
.name-input:focus{border-color:var(--purple-primary); background:#fff}

/* ---------- coach split ---------- */
.coach-split{display:grid; grid-template-columns:.85fr 1.15fr; gap:36px; align-items:center; min-height:58vh}
.coach-portrait{text-align:center}
.coach-portrait .art{aspect-ratio:3/4; border-radius:var(--r-xl)}
.coach-name{font-family:var(--head); font-weight:700; font-size:16px; margin-top:14px; color:var(--purple-primary)}
.coach-body{font-size:18px; line-height:1.6; color:var(--ink)}
.coach-body .speech{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px; box-shadow:var(--sh-sm); margin-bottom:22px; position:relative}

/* ---------- hub ---------- */
.hub-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px}
.hub-card{background:#fff; border:2px solid var(--line); border-radius:var(--r-lg); padding:26px 22px; text-align:center; box-shadow:var(--sh-sm); transition:transform .15s, box-shadow .15s, border-color .15s}
.hub-card:hover{transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--purple-primary)}
.hub-card.done{border-color:var(--correct)}
.hub-card .ic{width:64px; height:64px; margin:0 auto 16px; border-radius:16px; background:var(--lavender-soft); display:grid; place-items:center}
.hub-card h4{font-size:18px; margin-bottom:8px} .hub-card p{font-size:13.5px; color:var(--muted); line-height:1.45}
.hub-card .badge-done{margin-top:12px; font-size:12px; font-weight:700; color:var(--correct)}

/* ---------- scenario ---------- */
.scenario-wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:30px; align-items:start}
.scen-char{text-align:center}
.scen-char .art{aspect-ratio:3/4; border-radius:var(--r-xl)}
.scen-char .nm{font-family:var(--head); font-weight:700; font-size:15px; margin-top:12px}
.scen-char .counter{display:inline-block; margin-top:8px; font-size:12px; font-weight:700; color:var(--purple-primary); background:var(--lavender-soft); padding:4px 12px; border-radius:var(--r-full)}
.speech-bubble{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--sh-sm); font-size:17px; line-height:1.5; position:relative; margin-bottom:8px}
.speech-bubble::before{content:"\201C"; position:absolute; top:12px; left:14px; font-family:var(--head); font-size:34px; color:var(--purple-primary); opacity:.3; line-height:0; padding-top:14px}
.speech-bubble .inner{padding-left:24px}
.prompt-q{font-family:var(--head); font-weight:700; font-size:16px; margin:20px 0 14px}
.choices{display:flex; flex-direction:column; gap:11px}
.choice{display:flex; align-items:center; gap:13px; text-align:left; background:#fff; border:2px solid var(--line); border-radius:var(--r-md); padding:15px 17px; transition:border .15s, background .15s, transform .1s}
.choice:hover:not(.locked){border-color:var(--purple-primary); transform:translateY(-1px)}
.choice .key{flex-shrink:0; width:28px; height:28px; border-radius:8px; background:var(--lavender-soft); color:var(--purple-primary); font-family:var(--head); font-weight:700; display:grid; place-items:center; font-size:14px}
.choice .tx{font-size:14.5px; line-height:1.4}
.choice .rr{margin-left:auto; font-size:16px; opacity:0}
.choice.correct{border-color:var(--correct); background:var(--correct-soft)} .choice.correct .key{background:var(--correct); color:#fff} .choice.correct .rr{opacity:1; color:var(--correct)}
.choice.wrong{border-color:var(--wrong); background:var(--wrong-soft)} .choice.wrong .key{background:var(--wrong); color:#fff} .choice.wrong .rr{opacity:1; color:var(--wrong)}
.choice.dim{opacity:.5} .choice.locked{cursor:default}
.feedback{margin-top:14px; border-radius:var(--r-md); padding:15px 17px; display:none; gap:12px; align-items:flex-start}
.feedback.on{display:flex}
.feedback .fi{flex-shrink:0; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-size:16px; color:#fff}
.feedback.ok{background:var(--correct-soft); border:1px solid #BFE6CD} .feedback.ok .fi{background:var(--correct)}
.feedback.no{background:var(--tryagain-soft); border:1px solid #EFDDA8} .feedback.no .fi{background:var(--tryagain)}
.feedback .ft{font-family:var(--head); font-weight:700; font-size:14.5px; margin-bottom:3px}
.feedback.ok .ft{color:var(--correct)} .feedback.no .ft{color:var(--tryagain)}
.feedback .fb{font-size:14px; color:var(--muted); line-height:1.5}
.coach-note{margin-top:16px; display:flex; gap:11px; align-items:flex-start; background:var(--lavender-soft); border-radius:var(--r-md); padding:14px 16px; font-size:14px; line-height:1.5}
.coach-note b{color:var(--purple-primary)}

/* example (wrong/better read) */
.example-band{display:inline-flex; align-items:center; gap:9px; font-family:var(--head); font-weight:700; font-size:13px; color:#fff; padding:9px 16px; border-radius:var(--r-full); margin-bottom:16px}
.example-band.wrong{background:var(--wrong)} .example-band.better{background:var(--correct)}
.example-points{display:flex; flex-direction:column; gap:10px; margin:18px 0}
.ep{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink)}
.ep .xi{flex-shrink:0; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; margin-top:1px}
.example.wrong .xi{background:var(--wrong-soft); color:var(--wrong)} .example.better .xi{background:var(--correct-soft); color:var(--correct)}
.reveal-note{margin-top:6px; background:var(--lavender-soft); border-radius:var(--r-md); padding:16px 18px; font-size:15px; line-height:1.55}
.reveal-note.hidden-until{display:none}

/* ---------- hotspot scan ---------- */
.scan-grid{display:grid; grid-template-columns:1.5fr .9fr; gap:20px; align-items:start; margin-top:22px}
.room{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/10; border:1.5px dashed #C9BEEC; background:repeating-linear-gradient(135deg,#EDE9FA,#EDE9FA 14px,#E6E1F6 14px,#E6E1F6 28px)}
.room .room-ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--purple-primary); text-align:center; padding:20px}
.room .room-ph .ic{font-size:34px} .room .room-ph .lb{font-size:13px; color:var(--muted); max-width:30ch}
.room img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hot{position:absolute; width:32px; height:32px; border-radius:50%; transform:translate(-50%,-50%); background:var(--highlight); color:#3a2a10;
  font-family:var(--head); font-weight:800; font-size:15px; display:grid; place-items:center; border:2px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.25); z-index:3}
.hot::before{content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--highlight); animation:ping 1.9s ease-out infinite}
@keyframes ping{0%{transform:scale(.7);opacity:.7} 80%,100%{transform:scale(1.5);opacity:0}}
.hot.found{background:var(--correct); color:#fff; border-color:#fff} .hot.found::before{display:none}
.scan-side{display:flex; flex-direction:column; gap:14px}
.counter{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:15px 17px; box-shadow:var(--sh-sm)}
.counter .num{font-family:var(--head); font-weight:700} .counter .num b{color:var(--purple-primary); font-size:19px}
.cbar{height:8px; background:var(--lavender-soft); border-radius:var(--r-full); margin-top:9px; overflow:hidden}
.cbar .fill{height:100%; width:0; background:var(--purple-primary); border-radius:var(--r-full); transition:width .4s}
.obs{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:17px; box-shadow:var(--sh-sm); min-height:130px}
.obs.empty{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--muted); gap:9px}
.obs h4{font-size:16px; margin-bottom:7px} .obs p{font-size:14px; color:var(--muted); line-height:1.5}

/* ---------- full-screen hotspot scan (tap a dot, popup opens beside it) ---------- */
.hs-full{position:absolute; inset:0; overflow:hidden; background:#e8ece6}
.hs-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hs-topbar{position:absolute; top:0; left:0; right:0; z-index:8; display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:22px clamp(20px,3vw,40px) 40px; background:linear-gradient(180deg, rgba(24,17,45,.72) 0%, rgba(24,17,45,0) 100%); color:#fff}
.hs-head{display:flex; flex-direction:column; gap:2px}
.hs-head b{font-family:var(--head); font-weight:800; font-size:clamp(19px,2.4vw,28px); line-height:1.1}
.hs-eyebrow{font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.85; font-weight:700}
.hs-sub{font-size:13px; opacity:.9; margin-top:3px; max-width:52ch}
.hs-counter{flex-shrink:0; background:rgba(255,255,255,.94); color:var(--ink); border-radius:var(--r-full); padding:7px 15px; font-family:var(--head); font-weight:800; font-size:15px}
.hs-counter b{color:var(--accent)}
.hs-full .hot{position:absolute; width:36px; height:36px; transform:translate(-50%,-50%); background:var(--accent); color:#fff; border:3px solid #fff; z-index:6; box-shadow:0 5px 14px rgba(0,0,0,.4)}
.hs-full .hot::before{border-color:#fff; inset:-7px}
.hs-full .hot.found{background:var(--correct)}
.hs-pop{position:absolute; z-index:7; width:236px; max-width:52vw; background:#fff; border-radius:14px; padding:14px 16px; box-shadow:0 18px 44px rgba(0,0,0,.34);
  transform:translate(24px,-50%) scale(.92); opacity:0; pointer-events:none; transition:opacity .16s, transform .16s}
.hs-pop::after{content:""; position:absolute; top:50%; left:-7px; transform:translateY(-50%); border:7px solid transparent; border-right-color:#fff; border-left:0}
.hs-pop.on{opacity:1; pointer-events:auto; transform:translate(24px,-50%) scale(1)}
.hs-pop.left{transform:translate(calc(-100% - 24px),-50%) scale(.92)}
.hs-pop.left::after{left:auto; right:-7px; border-right-color:transparent; border-left-color:#fff; border-right:0; border-left:7px solid #fff}
.hs-pop.left.on{transform:translate(calc(-100% - 24px),-50%) scale(1)}
.hs-pop.down{transform:translate(24px,20px) scale(.92)} .hs-pop.down.on{transform:translate(24px,20px) scale(1)}
.hs-pop.down::after{top:-7px; left:22px; transform:none; border:7px solid transparent; border-bottom-color:#fff; border-top:0}
.hp-title{font-family:var(--head); font-weight:800; font-size:15px; margin-bottom:5px; color:var(--ink)}
.hp-body{font-size:13.5px; line-height:1.5; color:var(--muted)}

/* door intro: whole image is a click-to-enter target */
.fullbleed.door .bg{cursor:pointer}
.door-hint{position:absolute; right:26px; bottom:22px; z-index:4; color:#fff; font-weight:700; font-size:13px; letter-spacing:.04em; background:rgba(0,0,0,.32); padding:8px 16px; border-radius:var(--r-full); backdrop-filter:blur(4px); animation:hotpulselite 2.4s infinite}
@keyframes hotpulselite{0%,100%{opacity:.85} 50%{opacity:1}}

/* ---------- classroom hub: full background + clickable pathway tiles ---------- */
.hub-full{position:absolute; inset:0; overflow:auto; display:flex; align-items:center; justify-content:center}
.hub-full .bg{position:absolute; inset:0}
.hub-full .bg img{width:100%; height:100%; object-fit:cover}
.hub-full .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,17,45,.5), rgba(24,17,45,.72))}
.hub-inner{position:relative; z-index:2; width:100%; max-width:1040px; padding:36px 30px; text-align:center; color:#fff}
.hub-eyebrow{display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.85; font-weight:700; margin-bottom:6px}
.hub-inner h2{font-family:var(--head); font-weight:800; font-size:clamp(25px,3.4vw,40px); margin-bottom:8px}
.hub-head p{opacity:.9; font-size:15px; margin-bottom:24px}
.hub-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:820px){.hub-tiles{grid-template-columns:1fr}}
.hub-tile{background:rgba(255,255,255,.97); border-radius:18px; padding:0 0 14px; overflow:hidden; text-align:left; cursor:pointer; transition:.16s; box-shadow:0 14px 34px rgba(0,0,0,.3); display:flex; flex-direction:column}
.hub-tile:hover{transform:translateY(-4px); box-shadow:0 20px 46px rgba(0,0,0,.4)}
.ht-img{height:124px; background:var(--lavender-soft); overflow:hidden}
.ht-img img{width:100%; height:100%; object-fit:cover}
.ht-body{padding:13px 16px 4px}
.ht-title{font-family:var(--head); font-weight:800; font-size:17px; color:var(--ink)}
.ht-line{font-size:13px; color:var(--muted); margin-top:4px; line-height:1.4}
.ht-go{margin:8px 16px 0; font-weight:800; font-size:13px; color:var(--accent)}
.hub-tile.done .ht-go{color:var(--correct)}

/* ---------- build-your-kit: full-screen items + tap hotspots + % gauge ---------- */
.kit-full{position:absolute; inset:0; overflow:hidden; background:#e9e4dd}
.kit-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.kit-hot{position:absolute; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff; border:3px solid #fff; font-weight:800; font-size:20px; cursor:pointer; z-index:6; box-shadow:0 5px 14px rgba(0,0,0,.4); animation:hotpulse 2s infinite; display:grid; place-items:center}
.kit-hot.bad{background:#8a8f98}
.kit-hot.got{background:var(--correct); animation:none}
.kit-hot.no{background:var(--wrong)}
.kit-pop{position:absolute; z-index:8; width:210px; max-width:48vw; background:#fff; border-radius:13px; padding:12px 14px; box-shadow:0 16px 40px rgba(0,0,0,.32); transform:translate(24px,-50%) scale(.9); opacity:0; pointer-events:none; transition:opacity .16s, transform .16s}
.kit-pop.left{transform:translate(calc(-100% - 24px),-50%) scale(.9)}
.kit-pop.on{opacity:1; transform:translate(24px,-50%) scale(1)}
.kit-pop.left.on{transform:translate(calc(-100% - 24px),-50%) scale(1)}
.kit-pop b{display:block; font-family:var(--head); font-size:14px; color:var(--ink); margin-bottom:3px}
.kit-pop span{font-size:13px; color:var(--muted); line-height:1.45}
.kit-pop.ok b{color:var(--correct)} .kit-pop.no b{color:var(--wrong)}
.kit-gauge{position:absolute; top:84px; right:22px; z-index:7; width:206px; background:rgba(255,255,255,.96); border-radius:18px; padding:18px 16px; box-shadow:0 16px 40px rgba(0,0,0,.28); text-align:center}
.kit-ring{position:relative; width:120px; height:120px; margin:0 auto 8px}
.kit-ring svg{width:120px; height:120px} .kit-ring [data-ring]{transition:stroke-dashoffset .5s}
.kit-pct{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--head); font-weight:800; font-size:26px; color:var(--ink)}
.kit-title{font-family:var(--head); font-weight:800; font-size:14px; color:var(--ink); margin-bottom:8px}
.kit-bag{display:flex; flex-direction:column; gap:6px; text-align:left}
.kit-empty{font-size:12px; color:var(--muted); text-align:center}
.kit-bag .kb{font-size:12.5px; color:var(--correct); font-weight:600; display:flex; gap:6px; align-items:center}

/* ---------- drag/click-to-fix (matching) ---------- */
.fix-grid{display:flex; flex-direction:column; gap:12px; margin-top:22px; max-width:660px}
.fix-row{display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center}
.fix-item{background:#fff; border:2px solid var(--line); border-radius:var(--r-md); padding:14px 16px; font-size:14px; font-weight:600; display:flex; align-items:center; gap:11px}
.fix-item .ic{width:36px;height:36px;border-radius:10px;background:var(--lavender-soft);display:grid;place-items:center;flex-shrink:0}
.fix-arrow{color:var(--muted); font-size:18px}
.fix-select{background:var(--lavender-soft); border:2px solid var(--line); border-radius:var(--r-md); padding:13px 15px; font-size:14px; font-family:var(--body); color:var(--ink); cursor:pointer; width:100%}
.fix-select.correct{border-color:var(--correct); background:var(--correct-soft)}
.fix-select.wrong{border-color:var(--wrong); background:var(--wrong-soft)}

/* ---------- classify ---------- */
.classify-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-sm); margin-top:24px; max-width:620px}
.classify-item{font-family:var(--head); font-weight:700; font-size:20px; text-align:center; padding:18px; background:var(--lavender-soft); border-radius:var(--r-md); margin-bottom:18px}
.classify-buttons{display:flex; gap:12px}
.cbtn{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px; border:2px solid var(--line); border-radius:var(--r-md); font-family:var(--head); font-weight:700; font-size:15px; background:#fff; transition:.15s}
.cbtn:hover:not(:disabled){border-color:var(--purple-primary)}
.cbtn .cb-ic{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; font-size:13px; color:#fff}
.cbtn.is-yes .cb-ic{background:var(--correct)} .cbtn.is-no .cb-ic{background:var(--wrong)}
.cbtn.correct{border-color:var(--correct); background:var(--correct-soft); color:var(--correct)}
.cbtn.wrong{border-color:var(--wrong); background:var(--wrong-soft); color:var(--wrong)}
.classify-progress{font-size:13px; color:var(--muted); margin-top:16px; text-align:center}

/* ---------- transition kit ---------- */
.kit-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:start; margin-top:22px}
.kit-items{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.kit-item{display:flex; align-items:center; gap:12px; background:#fff; border:2px solid var(--line); border-radius:var(--r-md); padding:13px 15px; text-align:left; transition:.15s}
.kit-item:hover:not(.picked){border-color:var(--purple-primary); transform:translateY(-1px)}
.kit-item.picked{border-color:var(--correct); background:var(--correct-soft)}
.kit-item .ic{width:40px;height:40px;border-radius:11px;background:var(--lavender-soft);display:grid;place-items:center;flex-shrink:0}
.kit-item .lb{font-family:var(--head); font-weight:600; font-size:14px}
.kit-item .add{margin-left:auto; font-family:var(--head); font-weight:800; font-size:18px; color:var(--muted)}
.kit-item.picked .add{color:var(--correct)}
.kit-panel{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--sh-sm); position:sticky; top:0}
.kit-ring{width:130px;height:130px;margin:0 auto 8px;position:relative}
.kit-ring .v{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.kit-ring .v .pct{font-family:var(--head); font-weight:800; font-size:28px}
.kit-ring .v .st{font-size:10px; font-weight:700; text-transform:uppercase; color:var(--muted)}
.kit-bag{margin-top:12px; display:flex; flex-direction:column; gap:6px; min-height:20px}
.kit-bag .b{font-size:13px; font-weight:600; color:var(--muted)} .kit-bag .b .ck{color:var(--correct); font-weight:800}

/* ---------- fact check ---------- */
.fact-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px}
.fact{background:#fff; border:2px solid var(--line); border-radius:var(--r-md); padding:16px 18px; text-align:left; transition:.15s}
.fact:hover:not(.revealed){border-color:var(--purple-primary)}
.fact .stmt{font-size:15px; font-style:italic; margin-bottom:10px}
.fact .verdict{font-size:12.5px; font-weight:700; display:none; align-items:center; gap:6px}
.fact.revealed .verdict{display:flex}
.fact.good.revealed{border-color:var(--correct); background:var(--correct-soft)} .fact.good .verdict{color:var(--correct)}
.fact.bad.revealed{border-color:var(--wrong); background:var(--wrong-soft)} .fact.bad .verdict{color:var(--wrong)}
.fact .why{font-size:13px; color:var(--muted); margin-top:6px; display:none} .fact.revealed .why{display:block}

/* ---------- steps / rules / takeaway ---------- */
.steps-list{display:flex; flex-direction:column; gap:12px; margin-top:26px; max-width:640px}
.step-row{display:flex; align-items:center; gap:15px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; box-shadow:var(--sh-sm)}
.step-row .n{width:34px; height:34px; border-radius:10px; background:var(--purple-primary); color:#fff; display:grid; place-items:center; font-family:var(--head); font-weight:700; flex-shrink:0}
.step-row h4{font-size:16px}
.rules-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px}
.rule-card{display:flex; gap:14px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:18px; box-shadow:var(--sh-sm)}
.rule-card .ic{width:44px;height:44px;border-radius:12px;background:var(--lavender-soft);display:grid;place-items:center;flex-shrink:0}
.rule-card h4{font-size:15.5px; margin-bottom:5px} .rule-card p{font-size:13.5px; color:var(--muted); line-height:1.45}
.takeaway-list{display:flex; flex-direction:column; gap:10px; margin-top:24px; max-width:520px}
.ta-row{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:14px 18px; font-family:var(--head); font-weight:600; font-size:16px}
.ta-row .ck{width:26px;height:26px;border-radius:50%;background:var(--correct-soft);color:var(--correct);display:grid;place-items:center;font-weight:800}

/* ---------- reflection ---------- */
.reflect-box{width:100%; max-width:600px; min-height:120px; font-family:var(--body); font-size:15px; padding:16px; border:2px solid var(--line); border-radius:var(--r-md); background:#fff; outline:none; resize:vertical; margin-top:20px}
.reflect-box:focus{border-color:var(--purple-primary)}

/* ---------- identity (optional) ---------- */
.identity-cards{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px}
.id-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-sm)}
.id-card h4{font-size:16px; margin-bottom:10px; color:var(--purple-primary)}
.id-card p, .id-card li{font-size:14.5px; color:var(--muted); line-height:1.6}
.id-actions{display:flex; gap:12px; margin-top:24px}

/* ---------- state add-on ---------- */
.addon{border:2px dashed var(--purple-primary); border-radius:var(--r-lg); padding:26px; background:var(--lavender-soft); margin-top:24px}
.addon .tag{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--purple-primary); margin-bottom:14px}
.addon .split-cols{margin-top:8px}
.addon-hint{font-size:13px; color:var(--muted); margin-top:16px; font-style:italic}

/* ---------- certificate (landscape, UNITAR-style, Carlie Care Kids branded) ---------- */
.cert-stage{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:auto; padding:26px 20px}
.cert-stage .bg{position:absolute; inset:0; background:linear-gradient(150deg,#f4efe4,#e9eef4)}
.cert-stage .bg img{width:100%; height:100%; object-fit:cover}
.cert-stage .bg::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,.34) 0%, rgba(40,30,18,.60) 100%)}
.cert-wrap-lg{position:relative; z-index:2; width:100%; max-width:1080px; margin:auto; display:flex; flex-direction:column; align-items:center}
.cert-doc{position:relative; width:100%; background:#fffdf8; border-radius:10px; padding:clamp(26px,4.2vw,54px) clamp(30px,6vw,92px); text-align:center; overflow:hidden;
  box-shadow:0 30px 70px rgba(35,25,10,.45); outline:2px solid #C0912F; outline-offset:-14px}
.cert-doc::before{content:""; position:absolute; inset:7px; border:1px solid rgba(192,145,47,.45); border-radius:6px; pointer-events:none}
.cert-laurel{position:absolute; top:50%; transform:translateY(-50%); font-size:clamp(150px,20vw,240px); line-height:1; opacity:.10; color:#C0912F; pointer-events:none; user-select:none}
.cert-laurel.l{left:-14px; transform:translateY(-50%) scaleX(-1)}
.cert-laurel.r{right:-14px}
.cert-top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(14px,2.4vw,26px); position:relative; z-index:1}
.cert-brand{display:flex; align-items:center; gap:11px}
.cert-brand.right{opacity:.9; text-align:right}
.cert-logo{width:46px; height:46px; border-radius:12px; background:linear-gradient(150deg,var(--purple-primary),#8A6FE8); display:grid; place-items:center; font-family:var(--head); font-weight:800; font-size:26px; color:#fff; box-shadow:0 6px 14px rgba(108,74,216,.3); overflow:hidden}
.cert-logo img{width:100%; height:100%; object-fit:cover}
/* gold, shiny CTA (e.g. Get your certificate) */
.btn-gold{background:linear-gradient(135deg,#E7B84B 0%,#F8D673 46%,#C9922E 100%); color:#4a3707; border:none; box-shadow:0 8px 22px rgba(201,146,46,.45), inset 0 1px 0 rgba(255,255,255,.55); text-shadow:0 1px 0 rgba(255,255,255,.3); position:relative; overflow:hidden}
.btn-gold:hover{filter:brightness(1.05)}
.btn-gold::after{content:""; position:absolute; top:0; left:-70%; width:45%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent); transform:skewX(-20deg); animation:goldshine 3.4s ease-in-out infinite; pointer-events:none}
@keyframes goldshine{0%{left:-70%} 55%,100%{left:140%}}
.cb-name{font-family:var(--head); font-weight:800; font-size:16px; color:var(--ink); line-height:1.1; text-align:left}
.cert-brand.right .cb-name{text-align:right}
.cb-tag{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.cert-h{font-family:var(--head); font-weight:800; font-size:clamp(26px,4.4vw,46px); letter-spacing:.02em; color:#C0912F; margin:0 0 clamp(14px,2.4vw,26px); position:relative; z-index:1}
.cert-name-box{display:inline-block; font-family:var(--head); font-weight:800; font-size:clamp(24px,3.6vw,40px); color:var(--ink); padding:4px 22px 8px; border-bottom:2px dashed rgba(108,74,216,.55); position:relative; z-index:1}
.cert-hascomp{font-style:italic; color:#C0912F; font-size:clamp(13px,1.5vw,16px); margin-top:14px; position:relative; z-index:1}
.cert-course{font-family:var(--head); font-weight:700; font-size:clamp(17px,2.1vw,23px); color:var(--ink); margin-top:6px; position:relative; z-index:1}
.cert-date{font-size:clamp(12px,1.4vw,15px); color:var(--muted); margin-top:14px; position:relative; z-index:1}
.cert-sign{margin-top:clamp(20px,3vw,36px); display:inline-flex; flex-direction:column; align-items:center; position:relative; z-index:1}
.cert-scribble{width:150px; height:44px; margin-bottom:2px}
.cert-sig-line{width:210px; max-width:60vw; border-top:1.5px solid #444; margin-bottom:7px}
.cert-sig-name{font-family:var(--head); font-weight:700; font-size:15px; color:var(--ink)}
.cert-sig-role{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px}
.cert-actions{display:flex; gap:12px; justify-content:center; margin-top:20px; flex-wrap:wrap}
@media print{ .cert-stage .bg,.cert-stage .bg::after,.cert-actions{display:none!important} .cert-stage{position:static; padding:0} .cert-doc{box-shadow:none} }

/* ---------- screen footer CTA ---------- */
.screen-cta{margin-top:32px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.gate-hint{font-size:13px; color:var(--muted)}

/* ---------- name modal (pops up after the title slide) ---------- */
.overlay{position:fixed; inset:0; background:rgba(22,16,44,.55); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:100; padding:20px}
.overlay.on{display:flex}
.modal{background:#fff; border-radius:22px; box-shadow:0 34px 90px rgba(20,15,40,.42); width:100%; max-width:460px; padding:40px 38px; text-align:center; animation:modalPop .3s cubic-bezier(.2,1.1,.35,1)}
@keyframes modalPop{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none}}
.modal-badge{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px}
.modal-badge .mk{width:34px; height:34px; border-radius:9px; background:var(--purple-primary); display:grid; place-items:center}
.modal-badge .mk span{font-family:var(--head); font-weight:800; color:#fff; font-size:18px}
.modal-badge .wm{font-family:var(--head); font-weight:800; font-size:18px; color:var(--ink)}
.modal-rule{width:48px; height:3px; border-radius:2px; background:var(--purple-primary); margin:0 auto 18px}
.modal h2{font-size:24px; margin-bottom:10px}
.modal-sub{font-size:14.5px; color:var(--muted); line-height:1.5; margin:0 auto 22px; max-width:34ch}
.modal-field{position:relative; margin-bottom:16px}
.modal-field input{width:100%; font-family:var(--body); font-size:16px; text-align:center; padding:15px 42px; border:1.5px solid var(--line); border-radius:12px; background:#fff; outline:none; color:var(--ink)}
.modal-field input:focus{border-color:var(--purple-primary)}
.modal-field input::placeholder{color:var(--ink-faint,#9aa0ad)}
.modal-count{position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--muted)}
.modal-btn{width:100%}
.modal-fine{font-size:12px; color:var(--muted); margin-top:16px}

/* ---------- toast + confetti ---------- */
.toast{position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(16px); background:var(--ink); color:#fff; font-weight:600; font-size:14px; padding:12px 22px; border-radius:var(--r-full); box-shadow:var(--sh-lg); opacity:0; transition:.3s; z-index:60; pointer-events:none}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
.confetti{position:fixed; top:-12px; width:9px; height:14px; z-index:70; pointer-events:none; opacity:0}
@keyframes fall{0%{opacity:1; transform:translateY(-10px) rotate(0)} 100%{opacity:0; transform:translateY(105vh) rotate(560deg)}}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .split,.coach-split,.scenario-wrap,.scan-grid,.kit-grid{grid-template-columns:1fr}
  .hub-grid,.timeline{grid-template-columns:1fr 1fr}
  .rules-grid,.fact-grid,.identity-cards{grid-template-columns:1fr}
  .fullbleed h1{font-size:36px} .fullbleed .fb-inner{padding:0 26px}
  .s-title{font-size:26px} .wrap{padding:30px 20px}
  .section-label{display:none}
  .scen-char .art,.coach-portrait .art{max-width:260px; margin:0 auto}
}

/* ============================================================
   Example slides (wrong way / better way) — bigger, fill the
   panel, prominent accent KEY-TAKEAWAY box (Jul 8 v40)
   ============================================================ */
.subfull.datablock .feat-panel:has(.example){justify-content:flex-start}   /* top-aligned so the takeaway sits under the bullets, no scrolling */
.dpanel:has(.example){display:block}
.example{display:block}
.example .ex-title{font-size:clamp(22px,2.6vw,30px); line-height:1.1; margin-bottom:14px}
.example .speech-bubble{font-size:clamp(16px,1.6vw,19px); padding:18px 24px; border-radius:var(--r-lg)}
.example .prompt-q{font-size:clamp(15px,1.6vw,18px); margin:18px 0 12px}
.example-points{gap:12px; margin:14px 0 18px}
.ep{font-size:clamp(15px,1.55vw,17.5px); gap:12px; line-height:1.4}
.ep .xi{width:25px; height:25px; font-size:13px}
.ep .hl{color:var(--accent-warm); font-weight:800}
.example .btn-secondary{align-self:flex-start}
.example .reveal-note{margin-top:18px; background:#fff; border:1.5px solid var(--line); border-left:6px solid var(--accent);
  border-radius:var(--r-lg); padding:20px 24px; font-size:clamp(16px,1.7vw,20px); line-height:1.5; font-weight:500;
  color:var(--ink); box-shadow:var(--sh-md)}
.example .reveal-note::before{content:"KEY TAKEAWAY"; display:block; font-family:var(--head); font-size:12px;
  letter-spacing:.14em; font-weight:800; color:var(--accent); margin-bottom:11px}
.example .reveal-note .hl{color:var(--accent-warm); font-weight:800}

/* Hub — final-check unlock button + locked note */
.hub-finish{margin:22px auto 0; display:block; background:var(--accent); color:#fff; border:none;
  padding:15px 32px; border-radius:var(--r-full); font-family:var(--head); font-weight:800; font-size:16px;
  cursor:pointer; box-shadow:var(--sh-md); transition:.15s}
.hub-finish:hover{filter:brightness(1.07); transform:translateY(-1px)}
.hub-note{margin-top:20px; text-align:center; color:rgba(255,255,255,.9); font-size:14px; font-weight:600}

/* Classify (Safe / Not safe) — Key-Takeaway-style card popping up right under the buttons (Jul 9 v42) */
.classify-note{margin-top:16px; background:#fff; border:1.5px solid var(--line); border-left:6px solid var(--accent);
  border-radius:var(--r-lg); padding:18px 22px; box-shadow:var(--sh-md)}
.classify-note[hidden]{display:none}
.classify-note.ok{border-left-color:var(--correct)}
.classify-note.no{border-left-color:var(--wrong)}
.classify-note.try{border-left-color:var(--tryagain)}
.classify-note .cn-label{font-family:var(--head); font-size:12px; letter-spacing:.14em; font-weight:800;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px}
.classify-note.ok .cn-label{color:var(--correct)}
.classify-note.no .cn-label{color:var(--wrong)}
.classify-note.try .cn-label{color:var(--tryagain)}
.classify-note .cn-body{font-size:15.5px; line-height:1.5; color:var(--ink)}
.classify-note .cn-next{margin-top:14px}

/* Uploaded wordmark logo (Carlie Care Kids) — top bar, name-entry modal, certificate (Jul 9 v43) */
.brand-logo{height:40px; width:auto; max-width:220px; object-fit:contain; display:block}
.brand-logo.modal-logo{height:52px; max-width:300px; margin:0 auto}
.cert-wordmark{height:58px; width:auto; max-width:340px; object-fit:contain; display:block}

/* Volume slider in the sound popover (Jul 9 v50) */
.set-vol{padding-top:6px}
.vol-slider{-webkit-appearance:none; appearance:none; width:120px; height:6px; border-radius:999px;
  background:var(--line); outline:none; cursor:pointer}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--purple-primary); box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:pointer}
.vol-slider::-moz-range-thumb{width:16px; height:16px; border:none; border-radius:50%; background:var(--purple-primary); cursor:pointer}
/* the treble/beamed-note icon reads a touch small — nudge it up */
#soundBtn{font-size:17px; line-height:1}

/* ===== Name modal validation + locked outline (Jul 9 v51) ===== */
.modal-err{color:var(--wrong); font-size:13px; font-weight:700; margin:-4px 0 12px}
#nameInput.shake{animation:nudge .4s; border-color:var(--wrong)}
.ol-item.locked{opacity:.72; cursor:pointer}   /* still clickable — click shows the "Complete Orientation first" toast */
.ol-item.locked .n{background:transparent; font-size:14px}

/* ===== Print isolation for take-home guides (guide-doc styling is injected via #pgcss) ===== */
.print-area{display:none}
@media print{
  body.printing-guide .course, body.printing-guide .toast, body.printing-guide .overlay{display:none!important}
  body.printing-guide .print-area{display:block!important}
}

/* ===== Milestone: PENDING state (light panel, "finish everything") ===== */
.ms-stage{position:absolute; inset:0; overflow:auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:38px 24px; background:radial-gradient(1100px 520px at 50% -8%, #efe9fb, #f7f6fb 62%)}
.ms-panel{max-width:560px; text-align:center; background:#fff; border-radius:24px; box-shadow:var(--sh-md); padding:40px 40px 36px}
.ms-badge{font-size:46px; line-height:1; margin-bottom:8px}
.ms-stage .eyebrow{display:inline-block; background:transparent; padding:0; color:var(--purple-primary); font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px}
.ms-stage h1{font-family:var(--head); font-weight:800; font-size:clamp(26px,3.2vw,36px); line-height:1.08; color:var(--ink); margin-bottom:12px}
.ms-panel p{font-size:16px; line-height:1.55; color:var(--muted); max-width:54ch; margin:0 auto}
.ms-remain{display:flex; flex-direction:column; gap:9px; margin:22px auto 26px; max-width:300px; text-align:left}
.ms-rc{display:flex; align-items:center; gap:11px; font-weight:700; color:var(--muted); font-size:15px}
.ms-rc.done{color:var(--correct)}
.ms-rk{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--lavender-soft); font-size:12px; font-weight:800}
.ms-rc.done .ms-rk{background:var(--correct-soft); color:var(--correct)}

/* ===== Milestone: READY state (ONE full-bleed image of the named notebooks + overlaid buttons) ===== */
.ms-nbk{position:absolute; inset:0; overflow:hidden}
.ms-nbk-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ms-nbk::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,12,36,.58) 0%, rgba(18,12,36,0) 24%, rgba(18,12,36,0) 56%, rgba(18,12,36,.52) 100%)}
.ms-nbk-head{position:absolute; top:3.5%; left:0; right:0; z-index:2; text-align:center; color:#fff; padding:0 24px}
.ms-nbk-head .eyebrow{display:inline-block; background:transparent; padding:0; color:#FFC94D; font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px}
.ms-nbk-head h1{font-family:var(--head); font-weight:800; font-size:clamp(26px,3.2vw,38px); line-height:1.05; color:#fff; margin-bottom:8px; text-shadow:0 2px 14px rgba(0,0,0,.42)}
.ms-nbk-head p{font-size:15px; line-height:1.5; color:rgba(255,255,255,.94); max-width:56ch; margin:0 auto}
.ms-nbk .nb-acts{position:absolute; top:70%; transform:translateX(-50%); z-index:2; display:flex; gap:8px; width:23%; max-width:280px; justify-content:center}
.nb-btn{flex:1; border:none; border-radius:999px; background:#fff; color:var(--ink); font-family:var(--head); font-weight:800;
  font-size:clamp(9px,1vw,13px); padding:9px 8px; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.38); white-space:nowrap; transition:.14s}
.nb-btn.nb-dl{background:var(--purple-primary); color:#fff}
.nb-btn:hover{filter:brightness(1.06); transform:translateY(-1px)}
.ms-nbk .ms-cta{position:absolute; bottom:2.5%; left:50%; transform:translateX(-50%); z-index:2}

/* ============ MOBILE PASS (phones <= 560px) ============ */
@media (max-width:560px){
  html,body{overflow-x:hidden;max-width:100%}
  .screen,.stage,.course{overflow-x:hidden}
  .topbar{height:54px;flex-basis:54px;padding:0 14px}
  .navbar{height:58px;flex-basis:58px;padding:0 12px}
  .wrap{padding:28px 20px 34px}
  .wrap.narrow{max-width:none}
  .fullbleed .fb-inner{padding-left:20px !important;padding-right:20px !important;max-width:100% !important}
  .dir-full .dir-inner{padding-left:20px !important;padding-right:20px !important;max-width:100% !important}
  .fullbleed h1{font-size:clamp(28px,8.4vw,40px) !important;line-height:1.06;max-width:100% !important;margin-bottom:14px}
  .dir-title{font-size:clamp(26px,8vw,38px) !important;max-width:100%}
  .fullbleed p,.dir-full p{font-size:16px;line-height:1.5;margin-bottom:22px;max-width:calc(100vw - 40px) !important;overflow-wrap:break-word}
  .fullbleed .eyebrow{max-width:calc(100vw - 40px)}
  .hero-rule{margin:14px 0 20px}
  .feat-panel{padding:32px 22px}
  .hs-wrap{padding:22px 18px}
  .imm-card{padding:26px 20px}
  .example{padding:26px 20px}
  .dots{max-width:60%;gap:6px}
  .dot{width:22px;height:22px;font-size:12px}
  .nav-arrow{width:40px;height:40px}
}

/* ===== portrait-phone rotate gate ===== */
.rotate-gate{ display:none; }
@media (max-width:767px) and (orientation:portrait){
  .rotate-gate{ display:flex; position:fixed; inset:0; z-index:100000;
    align-items:center; justify-content:center; text-align:center; padding:34px;
    background:linear-gradient(160deg,#6C4AD8 0%,#5A3FC0 58%,#4A32A8 100%); color:#fff; }
  body{ overflow:hidden; }
}
.rg-card{ max-width:320px; }
.rg-phone{ width:120px; height:120px; margin:0 auto 24px; display:grid; place-items:center; }
.rg-phone svg{ transform-origin:50% 50%; animation:rgRock 2.6s ease-in-out infinite; filter:drop-shadow(0 10px 20px rgba(0,0,0,.28)); }
@keyframes rgRock{ 0%,24%{transform:rotate(0)} 52%,78%{transform:rotate(-90deg)} 100%{transform:rotate(0)} }
.rotate-gate h2{ font-family:var(--head); font-weight:800; font-size:26px; line-height:1.15; margin:0 0 12px; color:#fff; }
.rotate-gate p{ font-family:var(--body); font-size:16px; line-height:1.55; color:rgba(255,255,255,.9); margin:0; }

/* ===== scale-to-fit the whole desktop layout on short landscape phones ===== */
html.fit-scale, html.fit-scale body{ overflow:hidden !important; background:#3f2a94; height:100%; }
html.fit-scale .course{
  position:fixed; left:50%; top:50%;
  width:1180px; height:600px;
  transform:translate(-50%,-50%) scale(var(--fs,1));
  transform-origin:center center;
  box-shadow:0 0 50px rgba(0,0,0,.45); border-radius:6px; overflow:hidden;
}