/* ============================================================
   MONEYCIRCLE TRADING ACADEMY — PREMIUM DESIGN SYSTEM
   Black / Orange (#F47C20) / Gold (#D4AF37) / White
   Aesthetic: Apple Keynote × Bloomberg Terminal × TradingView
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Sora:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---------- RESET ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

:root {
  /* Core palette */
  --black:      #050506;
  --bg:         #08080B;
  --panel:      #0E0F13;
  --panel-2:    #14151B;
  --line:       #22242C;
  --line-soft:  #1A1B21;

  --orange:     #F47C20;
  --orange-2:   #FF9B45;
  --orange-deep:#C85A0E;
  --gold:       #D4AF37;
  --gold-2:     #E8C55F;

  --white:      #FFFFFF;
  --text:       #ECECF1;
  --muted:      #9A9CA8;
  --muted-2:    #6A6C78;

  --green:      #2FBF71;
  --green-soft: #1E7A4A;
  --red:        #F0473E;
  --red-soft:   #9E2A24;
  --blue:       #3D8BFF;

  --radius:     18px;
  --radius-sm:  12px;
  --radius-lg:  26px;

  --shadow:     0 30px 80px rgba(0,0,0,.55);
  --glow-orange: 0 0 40px rgba(244,124,32,.35);

  --sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --display: 'Sora', 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* The device, declared once. Every fixed element on an academy page is placed
   against these rather than against the glass: in the installed app the web view
   reaches the edges of the screen, so a flat top:0 sits behind the clock and a
   flat bottom sits behind the home indicator. Zero everywhere else. */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

body {
  background: var(--black);
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   DECK STAGE — fixed 1280×720, scaled to viewport (Keynote-like)
   ============================================================ */
#deck {
  /* Inset by the device rather than pinned to the glass. The page covers the
     whole screen now that it can measure the insets, so centring the slide on
     the viewport would centre part of it under the notch. Zero everywhere that
     has no notch, so this is inset:0 on a desktop. */
  position: fixed;
  top: var(--safe-top);
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(244,124,32,.10), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(212,175,55,.06), transparent 60%),
    var(--black);
}
#stage {
  position: relative;
  width: 1280px; height: 720px;
  flex: 0 0 auto;      /* never let flex shrink the stage below 1280×720 */
  transform-origin: center center;
}

.slide {
  position: absolute; inset: 0;
  width: 1280px; height: 720px;
  padding: 62px 76px 70px;
  background:
    linear-gradient(180deg, #0B0B0F 0%, #08080B 100%);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease;
}
.slide.active { opacity: 1; visibility: visible; pointer-events: auto; }

/* subtle grid texture on every slide */
.slide::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(1000px 600px at 70% 30%, #000 0%, transparent 78%);
  pointer-events: none;
}

/* ============================================================
   SLIDE CHROME (logo, section tag, footer, page number)
   ============================================================ */
.chrome-logo {
  position: absolute; top: 34px; left: 76px;
  display: flex; align-items: center; gap: 11px;
  z-index: 6;
}
.chrome-logo .mark {
  width: 30px; height: 30px; border-radius: 50%;
  background: conic-gradient(from 180deg, var(--orange), var(--gold), var(--orange));
  display: grid; place-items: center;
  box-shadow: var(--glow-orange);
  position: relative;
}
.chrome-logo .mark::after {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: var(--black);
}
.chrome-logo .txt { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.chrome-logo .txt b { color: var(--orange); }
.chrome-logo .txt span { color: var(--muted); font-weight: 400; }

.chrome-section {
  position: absolute; top: 36px; right: 76px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 2px;
  color: var(--muted-2); text-transform: uppercase; z-index: 6;
  display: flex; align-items: center; gap: 10px;
}
.chrome-section b { color: var(--orange); }

.chrome-footer {
  position: absolute; bottom: 30px; left: 76px; right: 76px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 1.5px;
  color: var(--muted-2); text-transform: uppercase; z-index: 6;
  border-top: 1px solid var(--line-soft); padding-top: 12px;
}
.chrome-footer .brand { color: var(--muted); }
.chrome-footer .brand b { color: var(--gold); font-weight: 600; }
.chrome-footer .page b { color: var(--orange); }

/* ============================================================
   TYPOGRAPHY & PRIMITIVES
   ============================================================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--orange); font-weight: 500;
  margin-bottom: 20px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--orange);
  box-shadow: var(--glow-orange);
}
.eyebrow.gold { color: var(--gold); }
.eyebrow.gold::before { background: var(--gold); box-shadow: none; }

h1.title {
  font-family: var(--display); font-weight: 800;
  font-size: 62px; line-height: 1.04; letter-spacing: -1.5px;
  color: var(--white); margin-bottom: 18px;
}
h2.headline {
  font-family: var(--display); font-weight: 700;
  font-size: 42px; line-height: 1.08; letter-spacing: -1px;
  color: var(--white); margin-bottom: 14px;
}
h3.sub {
  font-family: var(--display); font-weight: 600;
  font-size: 25px; line-height: 1.2; color: var(--white);
}
.grad-orange { background: linear-gradient(100deg, var(--orange), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead {
  font-size: 19px; line-height: 1.55; color: var(--muted);
  font-weight: 400; max-width: 62ch;
}
.lead b, .lead strong { color: var(--text); font-weight: 600; }
.hl { color: var(--orange); font-weight: 600; }
.hl-gold { color: var(--gold); font-weight: 600; }
.small { font-size: 14px; line-height: 1.5; color: var(--muted); }
.mono { font-family: var(--mono); }

/* ---------- LAYOUT HELPERS ---------- */
.center-col { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.row { display: flex; gap: 26px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; height: 100%; }
.split.wide-left { grid-template-columns: 1.25fr 1fr; }
.mt-auto { margin-top: auto; }
.gap-s { gap: 12px; }

/* ---------- CARDS ---------- */
.card {
  background: linear-gradient(160deg, var(--panel) 0%, #0A0B0F 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px;
  position: relative;
}
.card.pad-lg { padding: 30px; }
.card .num {
  font-family: var(--display); font-weight: 800; font-size: 15px;
  color: var(--orange); margin-bottom: 12px;
}
.card h4 {
  font-family: var(--display); font-size: 19px; font-weight: 600;
  color: var(--white); margin-bottom: 8px;
}
.card p { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.card.accent { border-color: rgba(244,124,32,.45); box-shadow: inset 0 0 0 1px rgba(244,124,32,.08); }
.card.accent::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px;
  background: linear-gradient(var(--orange), var(--gold)); border-radius: 3px;
}
.card-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(244,124,32,.12); border: 1px solid rgba(244,124,32,.3);
  display: grid; place-items: center; margin-bottom: 16px;
  color: var(--orange); font-size: 22px;
}

/* ---------- BADGES / PILLS ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px; border: 1px solid var(--line);
  color: var(--muted); background: var(--panel);
}
.pill.orange { color: var(--orange); border-color: rgba(244,124,32,.4); background: rgba(244,124,32,.08); }
.pill.gold { color: var(--gold); border-color: rgba(212,175,55,.4); background: rgba(212,175,55,.07); }
.pill.green { color: var(--green); border-color: rgba(47,191,113,.4); background: rgba(47,191,113,.08); }
.pill.red { color: var(--red); border-color: rgba(240,71,62,.4); background: rgba(240,71,62,.08); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------- BIG STAT ---------- */
.stat { }
.stat .n { font-family: var(--display); font-weight: 800; font-size: 54px; line-height: 1; color: var(--white); letter-spacing: -2px; }
.stat .n.orange { color: var(--orange); }
.stat .n.gold { color: var(--gold); }
.stat .l { font-size: 13px; color: var(--muted); margin-top: 8px; letter-spacing: .3px; }

/* ---------- COMPARISON TABLE ---------- */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; }
.cmp th, .cmp td { padding: 14px 18px; text-align: left; font-size: 14.5px; }
.cmp thead th {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted-2); border-bottom: 1px solid var(--line);
}
.cmp thead th.col-good { color: var(--green); }
.cmp thead th.col-bad { color: var(--red); }
.cmp tbody td { border-bottom: 1px solid var(--line-soft); color: var(--text); }
.cmp tbody tr:last-child td { border-bottom: none; }
.cmp td.feat { color: var(--muted); font-weight: 500; }
.cmp .good { color: #B7E9CE; }
.cmp .bad { color: #F4B9B4; }

/* two-panel versus */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vpanel {
  border-radius: var(--radius); padding: 24px; border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--panel), #0A0B0F);
}
.vpanel.good { border-color: rgba(47,191,113,.35); }
.vpanel.good .vhead { color: var(--green); }
.vpanel.bad { border-color: rgba(240,71,62,.35); }
.vpanel.bad .vhead { color: var(--red); }
.vhead {
  font-family: var(--display); font-weight: 700; font-size: 18px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.vhead .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 17px; }
.vpanel.good .ico { background: rgba(47,191,113,.15); }
.vpanel.bad .ico { background: rgba(240,71,62,.15); }
.vlist { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.vlist li { display: flex; gap: 11px; font-size: 14px; line-height: 1.45; color: var(--text); }
.vlist li::before { content: ""; flex: 0 0 auto; margin-top: 6px; width: 7px; height: 7px; border-radius: 50%; }
.vpanel.good .vlist li::before { background: var(--green); }
.vpanel.bad .vlist li::before { background: var(--red); }

/* ---------- CHECKLIST ---------- */
.checklist { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.checklist li {
  display: flex; gap: 14px; align-items: flex-start;
  background: linear-gradient(160deg, var(--panel), #0A0B0F);
  border: 1px solid var(--line); border-radius: 12px; padding: 15px 18px;
  font-size: 15px; line-height: 1.45; color: var(--text);
}
.checklist li .box {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px;
  border: 1.5px solid var(--orange); display: grid; place-items: center;
  color: var(--orange); font-size: 14px; margin-top: 1px;
  background: rgba(244,124,32,.08);
}
.checklist li b { color: var(--white); font-weight: 600; }

/* ---------- CALLOUT / QUOTE ---------- */
.callout {
  border-left: 3px solid var(--orange);
  background: linear-gradient(100deg, rgba(244,124,32,.10), transparent 80%);
  border-radius: 0 14px 14px 0; padding: 20px 24px;
}
.callout .k { font-family: var(--mono); font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
.callout p { font-size: 16px; line-height: 1.5; color: var(--text); }
.quote {
  font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.32;
  color: var(--white); letter-spacing: -.5px;
}
.quote .grad-orange { font-weight: 700; }
.quote-by { margin-top: 20px; font-size: 14px; color: var(--muted); font-family: var(--mono); letter-spacing: 1px; }

/* ---------- LIVE TRADINGVIEW PLACEHOLDER ---------- */
.live-box {
  border: 1.5px dashed rgba(244,124,32,.5);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, rgba(244,124,32,.03) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #0C0D11, #08090C);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; position: relative;
}
.live-box .badge {
  position: absolute; top: 16px; left: 16px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--red); display: flex; align-items: center; gap: 7px; font-weight: 600;
}
.live-box .badge .rec { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); animation: pulse 1.6s infinite; }
.live-box .tv-ico { width: 62px; height: 62px; border-radius: 14px; background: rgba(61,139,255,.12); border: 1px solid rgba(61,139,255,.35); display: grid; place-items: center; color: var(--blue); font-size: 30px; }
.live-box h4 { font-family: var(--display); font-size: 22px; color: var(--white); font-weight: 700; }
.live-box p { font-size: 14px; color: var(--muted); max-width: 44ch; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ---------- STEP FLOW ---------- */
.flow { display: flex; align-items: stretch; gap: 0; }
.flow .step { flex: 1; position: relative; padding: 0 8px; }
.flow .step .n { width: 38px; height: 38px; border-radius: 50%; background: rgba(244,124,32,.12); border: 1px solid rgba(244,124,32,.4); color: var(--orange); font-family: var(--display); font-weight: 700; display: grid; place-items: center; margin-bottom: 14px; }
.flow .step h5 { font-family: var(--display); font-size: 15px; color: var(--white); margin-bottom: 6px; font-weight: 600; }
.flow .step p { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.flow .step:not(:last-child)::after { content: "→"; position: absolute; right: -9px; top: 8px; color: var(--muted-2); font-size: 18px; }

/* ---------- NUMBERED CONCEPT ORDER (the 9-step teaching frame) ---------- */
.concept-rail { display: flex; flex-direction: column; gap: 9px; }
.concept-rail .cr { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.concept-rail .cr .i { width: 24px; height: 24px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--mono); font-size: 12.5px; color: var(--muted-2); }
.concept-rail .cr.on { color: var(--white); }
.concept-rail .cr.on .i { background: rgba(244,124,32,.15); border-color: var(--orange); color: var(--orange); }

/* ---------- ICON CIRCLE ---------- */
.iconcircle { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; }
.iconcircle.o { background: rgba(244,124,32,.12); border: 1px solid rgba(244,124,32,.3); color: var(--orange); }
.iconcircle.g { background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.3); color: var(--gold); }
.iconcircle.green { background: rgba(47,191,113,.12); border: 1px solid rgba(47,191,113,.3); color: var(--green); }
.iconcircle.red { background: rgba(240,71,62,.12); border: 1px solid rgba(240,71,62,.3); color: var(--red); }

/* ---------- TAGS ROW ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 9px; }

/* ============================================================
   COVER / SECTION DIVIDER SLIDES
   ============================================================ */
.slide.cover { padding: 0; }
.cover-wrap { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 90px; position: relative; z-index: 2; }
.cover .glow {
  position: absolute; z-index: 0; width: 620px; height: 620px; border-radius: 50%;
  right: -120px; top: -120px;
  background: radial-gradient(circle, rgba(244,124,32,.22), transparent 62%);
  filter: blur(6px);
}
.big-day { font-family: var(--mono); font-size: 13px; letter-spacing: 5px; color: var(--gold); text-transform: uppercase; }

.slide.divider { padding: 0; }
.divider-wrap { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 90px; position: relative; z-index: 2; }
.divider .ghost-num {
  position: absolute; right: 40px; bottom: -40px; font-family: var(--display); font-weight: 900;
  font-size: 380px; line-height: .8; color: rgba(255,255,255,.03); letter-spacing: -10px; z-index: 0;
}
.divider-wrap .part { font-family: var(--mono); letter-spacing: 4px; color: var(--orange); font-size: 13px; text-transform: uppercase; margin-bottom: 18px; }

/* ============================================================
   CANDLESTICK / DIAGRAM SVG HELPERS
   ============================================================ */
.diagram { width: 100%; height: 100%; display: block; }
.dg-label { font-family: var(--mono); font-size: 12.5px; fill: var(--muted); letter-spacing: 1px; }
.dg-note { font-family: var(--sans); font-size: 13px; fill: var(--text); }
.dg-orange { fill: var(--orange); }
.dg-gold { fill: var(--gold); }

/* ---------- OFFICIAL MONEYCIRCLE LOGO ---------- */
/* The mark is /brand/mark.png now — the same artwork the rest of the site
   uses, rather than an SVG drawn to look like it. */
.chrome-logo .mc-mark { width: 36px; height: 36px; flex: 0 0 auto; display: block; object-fit: contain; }
.chrome-logo .txt b { color: var(--white); }
.chrome-logo .txt em { color: var(--orange); font-style: normal; font-weight: 700; }
/* subtle brand watermark on every slide */
.slide .wm { position: absolute; right: -60px; bottom: -60px; width: 320px; height: 320px; opacity: .04; pointer-events: none; z-index: 0; }
.slide .wm svg,
.slide .wm img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- CHECKPOINT (inline knowledge check + instant solution) ---------- */
.cp-flag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(212,175,55,.45); background: rgba(212,175,55,.08);
  padding: 7px 16px; border-radius: 100px; font-weight: 600;
}
.cp-flag .zap { color: var(--orange); }
.quiz-sol {
  display: none; margin-top: 12px;
  border-left: 3px solid var(--gold);
  background: linear-gradient(100deg, rgba(212,175,55,.10), transparent 85%);
  border-radius: 0 12px 12px 0; padding: 13px 17px;
  font-size: 13.5px; line-height: 1.55; color: var(--text);
}
.quiz-sol b { color: var(--gold); }
.quiz-sol .tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 5px; }
.quiz-q.answered .quiz-sol { display: block; animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }

/* ---------- QUIZ ---------- */
.quiz-q { }
.quiz-q .q { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--white); margin-bottom: 14px; display: flex; gap: 12px; }
.quiz-q .q .qn { color: var(--orange); }
.quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.quiz-opt {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  background: linear-gradient(160deg, var(--panel), #0A0B0F); border: 1px solid var(--line);
  border-radius: 11px; padding: 13px 16px; font-size: 14.5px; color: var(--text); transition: .18s;
}
.quiz-opt:hover { border-color: rgba(244,124,32,.5); }
.quiz-opt .letter { width: 26px; height: 26px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.quiz-opt .mk { margin-left: auto; opacity: 0; font-size: 16px; }
.quiz-q.answered .quiz-opt.reveal[data-correct="yes"] { border-color: var(--green); background: rgba(47,191,113,.09); }
.quiz-q.answered .quiz-opt.reveal[data-correct="yes"] .letter { border-color: var(--green); color: var(--green); }
.quiz-q.answered .quiz-opt.reveal[data-correct="yes"] .mk { opacity: 1; color: var(--green); }
.quiz-q.answered .quiz-opt.picked[data-correct="no"] { border-color: var(--red); background: rgba(240,71,62,.09); }
.quiz-q.answered .quiz-opt.picked[data-correct="no"] .mk { opacity: 1; color: var(--red); }

/* ---------- PROGRESS + NAV ---------- */
#progress { position: fixed; top: var(--safe-top); left: var(--safe-left); height: 3px; background: linear-gradient(90deg, var(--orange), var(--gold)); width: 0; z-index: 40; box-shadow: var(--glow-orange); transition: width .35s ease; }
/* ---------- SLIDE CONTROLS ----------
   These used to be a small pill at the bottom that only appeared while the
   pointer was over the deck, next to a line of keyboard hints. Anyone who did
   not hover — every touch device — was left guessing how to move on.

   Two arrows on the edges instead, always there, big enough to hit with a
   thumb. The forward one drifts a little on its own so it reads as "keep
   going" rather than decoration. */
#nav {
  --nav-size: 52px;
  /* Inset with the deck. The arrows are positioned against this box and the
     overlap arithmetic in fit() assumes they share the coordinate space the
     slide is measured in; leaving them on the viewport would put one under the
     camera cutout in landscape and break that assumption. */
  position: fixed;
  top: var(--safe-top);
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  z-index: 40;
  pointer-events: none;            /* only the buttons take clicks */
}
#nav button {
  position: absolute; top: 50%; margin-top: calc(var(--nav-size) / -2);
  pointer-events: auto;
  width: var(--nav-size); height: var(--nav-size); border-radius: 50%;
  display: grid; place-items: center;
  font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--white);
  background: rgba(14,15,19,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}
#nav button:hover { border-color: var(--orange); color: var(--orange); background: rgba(244,124,32,.12); }
#nav button:active { transform: scale(.93); }
#nav button:disabled { opacity: .25; cursor: default; animation: none; }
#nav .prev { left: 22px; }
#nav .next { right: 22px; animation: navNudge 2.6s ease-in-out infinite; }
#nav .next:hover { animation: none; }
@keyframes navNudge { 0%,70%,100% { transform: translateX(0); } 82% { transform: translateX(5px); } }

#nav .count {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 1.5px;
  pointer-events: none;
}
#nav .count b { color: var(--orange); }

@media (max-width: 700px) {
  #nav { --nav-size: 44px; }
  #nav button { font-size: 20px; }
  #nav .prev { left: 10px; }
  #nav .next { right: 10px; }
}

/* When the slide is scaled down far enough that its own padding is narrower
   than an arrow, an arrow parked at the side stops being next to the text and
   starts being on top of it. That happens on every phone and every tablet, and
   never on a laptop, which is why it survived so long. The deck engine measures
   it and sets .nav-below; the arrows then sit under the slide, in the empty
   space the letterboxing already leaves there, centred either side of the page
   count so the row stays symmetrical. */
body.nav-below #nav button {
  top: auto; margin-top: 0;
  bottom: var(--nav-bottom, 16px);
}
body.nav-below #nav .prev { right: auto; left:  calc(50% - 48px - var(--nav-size)); }
body.nav-below #nav .next { left:  auto; right: calc(50% - 48px - var(--nav-size)); animation: none; }
body.nav-below #nav .count { bottom: calc(var(--nav-bottom, 16px) + var(--nav-size) / 2 - 8px); }
@media (prefers-reduced-motion: reduce) { #nav .next { animation: none; } }

/* ---------- ANIMATIONS: reveal children on active ---------- */
.slide.active [data-anim] { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.slide.active [data-anim="2"] { animation-delay: .09s; }
.slide.active [data-anim="3"] { animation-delay: .18s; }
.slide.active [data-anim="4"] { animation-delay: .27s; }
.slide.active [data-anim="5"] { animation-delay: .36s; }
.slide.active [data-anim="6"] { animation-delay: .45s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* draw candles */
.slide.active .grow { transform-origin: bottom; animation: grow .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* ---------- WAY OUT ----------
   The day decks carry no navigation of their own: once a member opens Day 1
   the only escape is the browser's back button, which on a full-screen slide
   deck is not an obvious thing to reach for. This sits top-left on every
   academy page and is deliberately NOT tied to #deck:hover the way the slide
   controls are — the way out must be visible without hunting for it. */
.mc-exit {
  /* The way out must not sit in the status bar. In the installed app the web
     view reaches the top of the screen, so a flat 14px lays this pill across the
     clock. The insets are zero everywhere else, so this stays 14px on a desktop. */
  position: fixed;
  top: calc(14px + var(--safe-top));
  left: calc(16px + var(--safe-left));
  z-index: 60;
  display: flex; align-items: center; gap: 6px;
  background: rgba(14,15,19,.86); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 100px; padding: 5px 6px 5px 10px;
  box-shadow: var(--shadow);
}
.mc-exit a {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .8px;
  text-transform: uppercase; text-decoration: none;
  color: var(--muted); padding: 5px 9px; border-radius: 100px; transition: .18s;
  white-space: nowrap;
}
.mc-exit a:hover { color: #fff; background: rgba(255,255,255,.07); }
.mc-exit a.primary { color: var(--orange); border: 1px solid rgba(244,124,32,.32); background: rgba(244,124,32,.10); }
.mc-exit a.primary:hover { background: rgba(244,124,32,.18); }
.mc-exit .sep { width: 1px; height: 15px; background: var(--line); flex: 0 0 auto; }
@media (max-width: 700px) {
  .mc-exit { top: 8px; left: 8px; padding: 4px 5px 4px 8px; }
  .mc-exit a { font-size: 11.5px; padding: 4px 7px; letter-spacing: .4px; }
}

/* ---------- PRINT (PDF export) ---------- */
@media print {
  .mc-exit { display: none !important; }
  @page { size: 1280px 720px; margin: 0; }
  body { overflow: visible; }
  #deck { position: static; background: var(--black); }
  #stage { transform: none !important; width: 1280px; height: auto; }
  .slide { position: relative; opacity: 1 !important; visibility: visible !important; page-break-after: always; break-after: page; }
  #nav, #progress { display: none !important; }
}

/* ============================================================
   OVERLAP-SAFETY PATCH — keep every slide clean & structured.
   Prevents text spilling out of cards/holders and over images,
   and removes the faint grid/raster texture for a cleaner look.
   ============================================================ */
.slide::before { display: none !important; }           /* no grid/raster on slides */

/* Flex/grid children default to min-width:auto and force overflow → overlap.
   Reset it everywhere so content stays inside its column/card. */
.slide *, .split > *, .row > *,
.grid-2 > *, .grid-3 > *, .grid-4 > *, .versus > * { min-width: 0; }
.split, .row, .grid-2, .grid-3, .grid-4, .center-col { min-height: 0; }

/* Long words / values wrap instead of overflowing their holder. */
.slide h1, .slide h2, .slide h3, .slide h4, .slide h5,
.slide p, .slide li, .slide td, .slide th, .slide .num, .small {
  overflow-wrap: anywhere; word-break: break-word;
}

/* Media never exceeds its container. */
.slide img, .slide svg, .slide video { max-width: 100%; height: auto; }

/* Card holders contain their content — text can't overlap neighbours. */
.card { min-width: 0; overflow: hidden; }
.vlist li { min-width: 0; }

/* ============================================================
   CROSS-DAY NAVIGATION CARD — appears on the last slide of a deck.
   Anchored above the slide nav (bottom-centre) and clear of the
   AI-mentor fab (bottom-right). Hidden until the learner reaches
   the end, and never printed.
   ============================================================ */
.day-end-cta {
  position: fixed; left: 50%; bottom: calc(78px + var(--safe-bottom)); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  max-width: min(92vw, 640px); width: max-content;
}
.day-end-cta.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.day-end-cta .dec-inner {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 16px;
  padding: 13px 18px; box-shadow: 0 20px 50px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center;
}
.day-end-cta .dec-txt { font-family: var(--display); font-weight: 700; color: var(--white); font-size: 14px; }
.day-end-cta .dec-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.day-end-cta a { text-decoration: none; font-family: var(--sans); font-size: 13px; font-weight: 600; border-radius: 100px; padding: 9px 16px; transition: .2s; white-space: nowrap; }
.day-end-cta .dec-ghost { color: var(--muted); border: 1px solid var(--line); }
.day-end-cta .dec-ghost:hover { color: var(--orange); border-color: rgba(244,124,32,.5); }
.day-end-cta .dec-go { background: var(--orange); color: #111; }
.day-end-cta .dec-go:hover { filter: brightness(1.08); }
@media print { .day-end-cta { display: none !important; } }

/* ============================================================
   BACK-TO-MENU — a persistent control on every slide so learners
   can always return to the Academy hub in one tap. Top-right,
   clear of the slide logo (top-left), nav (bottom) and mentor
   fab (bottom-left). Hidden in print.
   ============================================================ */
.hub-btn {
  position: fixed; top: calc(18px + var(--safe-top)); right: calc(20px + var(--safe-right)); z-index: 62;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  color: var(--white); text-decoration: none;
  background: linear-gradient(120deg, rgba(244,124,32,.18), rgba(212,175,55,.10));
  border: 1px solid rgba(244,124,32,.5); border-radius: 100px; padding: 9px 16px;
  backdrop-filter: blur(12px); box-shadow: var(--shadow); transition: .2s;
}
.hub-btn:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-1px); box-shadow: var(--glow-orange); }
.hub-btn svg { flex: 0 0 auto; }
.chrome-home { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.chrome-home:hover .txt em { filter: brightness(1.15); }
@media (max-width: 640px) { .hub-btn span { display: none; } .hub-btn { padding: 9px; top: 14px; right: 14px; } }
@media print { .hub-btn { display: none !important; } }