/* =========================================================
   ECNNT — PRESENTATION DECK
   Editorial · Professional · Federation-ready
   Palette: warm paper · deep navy · federation gold · subtle red
   ========================================================= */

:root {
  /* paper / surfaces */
  --paper:        #f7f4ee;
  --paper-2:      #efeae0;
  --card:         #ffffff;
  --card-elev:    #ffffff;
  --hairline:     #e2dccd;
  --hairline-2:   #d8d1bf;

  /* ink */
  --ink:          #14213d;
  --ink-2:        #2b3a5a;
  --muted:        #5e6877;
  --muted-2:      #8a93a3;

  /* accents */
  --gold:         #b8893a;       /* federation gold */
  --gold-2:       #9c7128;
  --navy:         #14213d;
  --navy-2:       #0e1a33;
  --crimson:      #b3322d;       /* Lebanese flag nod, used sparingly */
  --teal:         #2b7a78;
  --olive:        #6b7a3a;

  /* shadows */
  --shadow-sm:    0 1px 2px rgba(20,33,61,.06), 0 1px 1px rgba(20,33,61,.04);
  --shadow-md:    0 6px 18px rgba(20,33,61,.08), 0 2px 4px rgba(20,33,61,.05);
  --shadow-lg:    0 24px 60px rgba(20,33,61,.12), 0 8px 18px rgba(20,33,61,.06);

  /* type */
  --f-display:    'Fraunces', 'Cairo', 'Noto Naskh Arabic', Georgia, serif;
  --f-ui:         'Inter', 'Tajawal', 'Cairo', 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif;
  --f-mono:       'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --f-ar-display: 'Cairo', 'Noto Naskh Arabic', 'Fraunces', Georgia, serif;
  --f-ar-ui:      'Tajawal', 'Cairo', 'Noto Naskh Arabic', 'Inter', system-ui, sans-serif;

  --header-h:     64px;
  --maxw:         1200px;
  --radius:       10px;
  --radius-lg:    16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
html { scroll-behavior: smooth; }
.slide { scroll-margin-top: calc(var(--header-h, 56px) + 8px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body.deck {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  min-height: 100vh;
}
body.deck[dir="rtl"] {
  /* Arabic glyphs render visually smaller than Latin at the same
     font-size, so bump the base and switch to higher-x-height faces
     (Tajawal / Cairo) for much better readability — especially mobile. */
  font-family: var(--f-ar-ui);
  font-size: 17.5px;
  line-height: 1.75;
}
body.deck[dir="rtl"] h1,
body.deck[dir="rtl"] h2,
body.deck[dir="rtl"] h3,
body.deck[dir="rtl"] .slide__eyebrow,
body.deck[dir="rtl"] .slide__title {
  font-family: var(--f-ar-display);
  letter-spacing: 0;            /* Arabic doesn't use Latin letter-spacing */
  line-height: 1.4;
  font-weight: 700;
}
body.deck[dir="rtl"] p,
body.deck[dir="rtl"] li,
body.deck[dir="rtl"] .slide__lede,
body.deck[dir="rtl"] .slide__body { font-size: 1.06em; }
@media (max-width: 640px) {
  body.deck[dir="rtl"] { font-size: 18px; line-height: 1.8; }
  body.deck[dir="rtl"] .slide__lede { font-size: 1.1em; }
}

/* Subtle paper texture (very faint) */
.grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%,   rgba(184,137,58,.07), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(20,33,61,.06), transparent 60%);
}
.scan-line { display: none; } /* removed; replaced with calm gradients */

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff;
  padding: 10px 16px; border-radius: 6px; z-index: 9999;
  font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

/* =========================================================
   HEADER
   ========================================================= */
.deck-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  z-index: 100;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 24px;
  padding: 0 28px;
  background: rgba(247, 244, 238, .88);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}
.deck-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--navy); text-decoration: none; font-weight: 700;
  letter-spacing: .14em; font-size: 12px;
}
.deck-brand__mark { color: var(--gold); font-size: 16px; }

.deck-nav {
  display: flex; gap: 2px; overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  justify-self: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.deck-nav::-webkit-scrollbar { display: none; }
.deck-nav__btn {
  border: 0; background: transparent;
  color: var(--muted); padding: 8px 14px; border-radius: 6px;
  font: 600 12px/1 var(--f-ui); letter-spacing: .03em;
  cursor: pointer; white-space: nowrap; transition: color .18s, background .18s;
}
.deck-nav__btn:hover { color: var(--ink); background: rgba(20,33,61,.04); }
.deck-nav__btn.is-active {
  color: var(--ink); background: transparent;
  position: relative;
}
.deck-nav__btn.is-active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  background: var(--gold); border-radius: 1px;
}

.deck-tools { display: flex; align-items: center; gap: 10px; min-width: 0; justify-self: end; }

/* =========================================================
   HEADER COLLAPSE
   ----------------------------------------------------------
   All primary controls (slide nav, language, tools, updated
   stamp) live exclusively in the hamburger panel at every
   viewport size. This keeps the header calm and prevents the
   horizontal overlap that occurred when the nav buttons grew
   in EN / AR.
   ========================================================= */
.deck-header .deck-nav,
.deck-header .deck-tools > .lang,
.deck-header .deck-tools > .tool-btn,
.deck-header .deck-tools > .deck-updated {
  display: none !important;
}

/* Current-slide label shown in the header centre (set by JS). */
.deck-current {
  justify-self: center;
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 11px/1 var(--f-ui); letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
  padding: 8px 16px; border-radius: 999px;
  background: rgba(20,33,61,.04);
  border: 1px solid var(--hairline);
  max-width: min(60vw, 420px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .25s ease, background .25s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}
.deck-current::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(184,137,58,.55);
  animation: deckPulse 2.4s ease-out infinite;
}
.deck-current.is-changing { transform: translateY(-2px); color: var(--ink); background: rgba(184,137,58,.12); }
@keyframes deckPulse {
  0%   { box-shadow: 0 0 0 0   rgba(184,137,58,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(184,137,58,0);   }
  100% { box-shadow: 0 0 0 0   rgba(184,137,58,0);   }
}
@media (max-width: 560px) {
  .deck-current { display: none; }
}

/* =========================================================
   HAMBURGER MENU BUTTON (always visible)
   ========================================================= */
.deck-menu-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px;
  background: #ffffff; border: 1.5px solid var(--ink);
  cursor: pointer; padding: 0; flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(20,33,61,.08);
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .25s ease;
}
.deck-menu-btn:hover {
  background: var(--paper); border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(184,137,58,.22);
}
.deck-menu-btn:active { transform: scale(.94); }
.deck-menu-btn.is-open {
  background: var(--ink); border-color: var(--ink);
  box-shadow: 0 8px 22px rgba(20,33,61,.28);
}
.deck-menu-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.deck-menu-btn__bars {
  position: relative; display: block; width: 22px; height: 16px;
}
.deck-menu-btn__bars::before,
.deck-menu-btn__bars::after,
.deck-menu-btn__bars > i {
  content: ''; position: absolute; left: 0; right: 0; height: 2.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .25s ease, top .2s .05s ease, opacity .15s ease, background .2s ease;
}
.deck-menu-btn.is-open .deck-menu-btn__bars::before,
.deck-menu-btn.is-open .deck-menu-btn__bars::after,
.deck-menu-btn.is-open .deck-menu-btn__bars > i { background: #fff; }
.deck-menu-btn__bars::before { top: 0; }
.deck-menu-btn__bars > i      { top: 7px; }
.deck-menu-btn__bars::after  { top: 14px; }
.deck-menu-btn.is-open .deck-menu-btn__bars > i { opacity: 0; }
.deck-menu-btn.is-open .deck-menu-btn__bars::before {
  top: 7px; transform: rotate(45deg); transition: top .2s ease, transform .25s .15s ease;
}
.deck-menu-btn.is-open .deck-menu-btn__bars::after {
  top: 7px; transform: rotate(-45deg); transition: top .2s ease, transform .25s .15s ease;
}

.lang { display: inline-flex; gap: 0; border: 1px solid var(--hairline); border-radius: 999px; padding: 2px; flex-shrink: 0; }
.lang__btn {
  background: transparent; border: 0; color: var(--muted);
  padding: 6px 11px; font: 600 11px/1 var(--f-ui); letter-spacing: .04em;
  cursor: pointer; border-radius: 999px;
}
.lang__btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tool-btn {
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--hairline); padding: 7px 13px;
  font: 600 11px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase;
  border-radius: 6px; cursor: pointer; transition: all .2s;
}
.tool-btn:hover { border-color: var(--gold); color: var(--gold); }

.deck-progress {
  position: fixed; top: var(--header-h); left: 0; right: 0; height: 2px;
  background: var(--hairline); z-index: 99;
}
#deckProgressBar {
  display: block; width: 0; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--crimson));
  transition: width .15s linear;
}

.deck-counter {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  font: 700 11px/1 var(--f-ui); letter-spacing: .12em;
  color: var(--muted); background: var(--card); padding: 9px 13px; border-radius: 999px;
  border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
}
.deck-counter .sep { color: var(--muted-2); margin: 0 4px; }

/* =========================================================
   SLIDES
   ========================================================= */
.slides { position: relative; z-index: 2; padding-top: var(--header-h); }

.slide {
  min-height: 100vh;
  padding: 96px 40px 96px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  scroll-margin-top: var(--header-h);
}
.slide > * { max-width: var(--maxw); margin-inline: auto; width: 100%; }

.slide-head { margin-bottom: 48px; }
.slide-tag {
  display: inline-block;
  font: 700 11px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); padding: 0; margin-bottom: 16px;
  position: relative; padding-left: 28px;
}
.slide-tag::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 18px; height: 1px; background: var(--gold);
}
[dir="rtl"] .slide-tag { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .slide-tag::before { left: auto; right: 0; }

.slide-head h2 {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.08; margin: 0 0 16px; letter-spacing: -.015em;
  color: var(--ink); max-width: 22ch;
}
.slide-head .lede {
  color: var(--muted); font-size: clamp(16px, 1.3vw, 19px);
  max-width: 70ch; margin: 0; font-weight: 400;
}

/* Reveal animation */
[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .45s cubic-bezier(.2,.7,.3,1), transform .45s cubic-bezier(.2,.7,.3,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
/* Stagger children: parent gets [data-reveal-stagger]; each child reveal is delayed by its index */
[data-reveal-stagger] > [data-reveal] { transition-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-reveal-stagger] > [data-reveal] { transition-delay: 0s !important; }
}
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Presenter mode */
body.is-presenter .slides { scroll-snap-type: y mandatory; height: 100vh; overflow-y: scroll; }
body.is-presenter .slide { scroll-snap-align: start; scroll-snap-stop: always; min-height: 100vh; }
body.is-presenter .deck-nav { opacity: .4; transition: opacity .2s; }
body.is-presenter .deck-nav:hover { opacity: 1; }

/* =========================================================
   SLIDE 1 — COVER
   ========================================================= */
.slide--cover {
  padding-top: var(--header-h);
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.cover-layer { position: absolute; inset: 0; pointer-events: none; }
.cover-layer--bg {
  background:
    radial-gradient(circle at 18% 28%, rgba(184,137,58,.18), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(20,33,61,.10), transparent 50%);
}
.cover-layer--rings { display: grid; place-items: center; opacity: .25; }
.cover-layer--rings svg { width: min(100vmin, 1000px); height: auto; }
.cover-layer--rings circle {
  fill: none; stroke: var(--gold); stroke-width: .8;
  transform-origin: center;
}
.cover-layer--rings circle:nth-child(2) { stroke: var(--navy); opacity: .35; }
.cover-layer--rings circle:nth-child(3) { stroke: var(--crimson); opacity: .25; }

.cover-inner { position: relative; z-index: 2; text-align: center; padding: 0 12px; max-width: 1000px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 11px/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 24px;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}

.cover-title {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(40px, 6.6vw, 84px); line-height: 1.02;
  margin: 0 auto 22px; max-width: 18ch; letter-spacing: -.025em;
  color: var(--ink);
}
.cover-title__main { display: block; }
.cover-title__accent {
  display: block; font-style: italic; font-weight: 500;
  color: var(--gold);
}
.cover-sub {
  color: var(--muted); font-size: clamp(16px, 1.5vw, 20px);
  max-width: 56ch; margin: 0 auto 42px;
}

.cover-meta {
  display: flex; gap: 36px; justify-content: center; align-items: center;
  flex-wrap: wrap; margin-top: 32px;
  padding-top: 32px; border-top: 1px solid var(--hairline);
}
.prepared-by {
  display: inline-flex; align-items: center; gap: 16px; margin: 0;
}
.prepared-by img {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold);
  box-shadow: 0 4px 14px rgba(184,137,58,.25);
}
.prepared-by figcaption { text-align: left; display: grid; line-height: 1.3; }
[dir="rtl"] .prepared-by figcaption { text-align: right; }
.prepared-by__label { font: 600 10px/1.4 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--muted-2); }
.prepared-by__name { font-family: var(--f-display); font-size: 18px; color: var(--ink); font-weight: 600; }
.prepared-by__role { color: var(--gold); font-size: 12px; letter-spacing: .06em; font-weight: 500; }

.cover-stats { display: flex; gap: 32px; margin: 0; flex-wrap: wrap; justify-content: center; }
.cover-stats > div { display: grid; gap: 6px; text-align: center; }
.cover-stats dt { font: 600 10px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--muted-2); margin: 0; }
.cover-stats dd { margin: 0; font: 600 14px/1.3 var(--f-ui); color: var(--ink); }

.cover-scroll {
  margin-top: 64px; color: var(--muted); font: 600 10px/1 var(--f-ui);
  letter-spacing: .24em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px;
}
.cover-scroll .arrow { color: var(--gold); animation: bob 1.8s ease-in-out infinite; font-size: 16px; }
@keyframes bob { 50% { transform: translateY(5px); } }

/* =========================================================
   SLIDE 2 — KPIs
   ========================================================= */
.kpi-row {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 32px 0;
}
.kpi {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 28px 22px; text-align: center;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi__num {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(40px, 5vw, 56px);
  color: var(--ink); line-height: 1; letter-spacing: -.02em;
}
.kpi__label {
  color: var(--muted); font-size: 12px; margin-top: 10px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}

.note {
  margin-top: 28px; padding: 20px 24px;
  border-left: 3px solid var(--gold);
  background: rgba(184,137,58,.06); border-radius: 0 8px 8px 0;
  color: var(--ink-2); font-size: 14.5px;
}
[dir="rtl"] .note { border-left: 0; border-right: 3px solid var(--gold); border-radius: 8px 0 0 8px; }
.note strong { color: var(--gold-2); letter-spacing: .04em; }

/* =========================================================
   SLIDE 3 — KIT GRID
   ========================================================= */
.kit-grid {
  list-style: none; padding: 0; margin: 24px 0 18px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.kit {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 22px; position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.kit:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow-md); }
.kit__qty {
  position: absolute; top: 14px; right: 14px;
  font: 700 12px/1 var(--f-ui); color: var(--gold);
  background: rgba(184,137,58,.1); padding: 5px 9px; border-radius: 4px;
  letter-spacing: .04em;
}
[dir="rtl"] .kit__qty { right: auto; left: 14px; }
.kit h3 { margin: 0 0 8px; font: 600 15px/1.3 var(--f-ui); color: var(--ink); padding-right: 40px; }
[dir="rtl"] .kit h3 { padding-right: 0; padding-left: 40px; }
.kit p { margin: 0; color: var(--muted); font-size: 13.5px; }

.footnote { color: var(--muted); font-size: 13.5px; margin-top: 28px; font-style: italic; max-width: 80ch; }

/* =========================================================
   SLIDE 4 — RECOGNITION / COUNTDOWN
   ========================================================= */
.countdown {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  margin: 28px 0 32px; max-width: 720px;
}
.countdown > div {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 22px 14px; text-align: center;
  box-shadow: var(--shadow-sm);
}
.countdown__num {
  display: block; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(34px, 4.4vw, 48px);
  color: var(--navy); line-height: 1; letter-spacing: -.02em;
}
.countdown__lbl {
  display: block; margin-top: 8px; color: var(--muted);
  font: 600 10px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase;
}
.countdown__caption {
  grid-column: 1 / -1; text-align: center; color: var(--muted);
  font-size: 13px; margin: 4px 0 0; letter-spacing: .04em;
}

.rec-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.rec-card {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 24px; background: var(--card);
  border-top: 3px solid var(--muted-2);
  box-shadow: var(--shadow-sm);
}
.rec-card--warn { border-top-color: var(--crimson); }
.rec-card--ok   { border-top-color: var(--olive); }
.rec-card--info { border-top-color: var(--navy); }
.rec-card h3 { margin: 0 0 10px; font: 600 17px/1.2 var(--f-ui); color: var(--ink); letter-spacing: -.005em; }
.rec-card p { margin: 0; color: var(--muted); font-size: 14px; }

/* =========================================================
   SLIDE 5 — GEN2 BUDGET
   ========================================================= */
.budget-layout {
  display: grid; gap: 28px;
  grid-template-columns: 1.4fr 1fr;
  align-items: start;
}
@media (max-width: 920px) { .budget-layout { grid-template-columns: 1fr; } }

.budget-table-wrap {
  border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow-sm);
}
.budget-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.budget-table th, .budget-table td {
  padding: 13px 16px; text-align: left;
  border-bottom: 1px solid var(--hairline);
}
[dir="rtl"] .budget-table th, [dir="rtl"] .budget-table td { text-align: right; }
.budget-table thead th {
  background: var(--paper-2); color: var(--ink-2);
  font: 700 10.5px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase;
  padding-top: 14px; padding-bottom: 14px;
}
.budget-table tbody tr:hover { background: var(--paper); }
.budget-table tbody td { color: var(--ink-2); }
.budget-table tfoot th {
  font: 600 12px/1 var(--f-ui); color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--paper-2);
}
.budget-table tfoot td {
  font: 600 15px/1 var(--f-ui); color: var(--ink);
  background: var(--paper-2);
  font-feature-settings: 'tnum';
}
.budget-table tfoot tr.tot td {
  color: var(--gold); font-size: 19px; font-family: var(--f-display); font-weight: 600;
  letter-spacing: -.01em;
}
.budget-table--compact th, .budget-table--compact td { padding: 9px 12px; font-size: 12.5px; }

.budget-aside { display: grid; gap: 18px; }
.big-num {
  text-align: center; padding: 32px 22px;
  background: var(--navy); color: #fff;
  border-radius: var(--radius); position: relative; overflow: hidden;
  box-shadow: var(--shadow-md);
}
.big-num::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at top right, rgba(184,137,58,.25), transparent 60%);
  pointer-events: none;
}
.big-num__currency {
  position: relative;
  font: 600 10px/1 var(--f-ui); letter-spacing: .24em;
  color: rgba(255,255,255,.6); text-transform: uppercase;
}
.big-num__value {
  display: block; position: relative;
  font: 600 clamp(38px, 6vw, 60px) var(--f-display);
  color: var(--gold); margin: 10px 0; line-height: 1; letter-spacing: -.02em;
  font-feature-settings: 'tnum';
}
.big-num__caption {
  position: relative; color: rgba(255,255,255,.75); font-size: 13px;
  letter-spacing: .04em;
}

.chart-card {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm);
}
.chart-card--big { padding: 22px; }
.aside-note {
  color: var(--muted); font-size: 13.5px; padding: 16px 18px;
  background: var(--paper-2); border-radius: 8px;
  border-left: 2px solid var(--gold); margin: 0; line-height: 1.55;
}
[dir="rtl"] .aside-note { border-left: 0; border-right: 2px solid var(--gold); }

/* =========================================================
   SLIDE 6 — GEN3 SLIDER
   ========================================================= */
.slider { margin-top: 28px; }
.slider__viewport { overflow: hidden; border-radius: var(--radius); }
.slider__track {
  list-style: none; padding: 0; margin: 0;
  display: flex; transition: transform .55s cubic-bezier(.7, 0, .2, 1);
  will-change: transform;
}
.slider__slide { flex: 0 0 100%; padding: 0 6px; }

.g3-card {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 32px; min-height: 480px;
  box-shadow: var(--shadow-sm);
}
.g3-card header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px; flex-wrap: wrap; gap: 12px;
  padding-bottom: 18px; border-bottom: 1px solid var(--hairline);
}
.g3-card__tag {
  font: 700 10.5px/1 var(--f-ui); letter-spacing: .22em;
  text-transform: uppercase; padding: 6px 12px; border-radius: 4px;
}
.g3-card--low  .g3-card__tag { background: rgba(107,122,58,.12); color: var(--olive); }
.g3-card--high .g3-card__tag { background: rgba(179,50,45,.10); color: var(--crimson); }
.g3-card--vis  .g3-card__tag { background: rgba(20,33,61,.08); color: var(--navy); }
.g3-card--video .g3-card__tag { background: rgba(184,137,58,.12); color: var(--gold-2); }
.g3-card header h3 {
  margin: 0; font-family: var(--f-display);
  font-size: clamp(24px, 3vw, 34px); font-weight: 600; color: var(--ink);
  letter-spacing: -.015em;
}
.g3-card header small { font: 400 14px/1 var(--f-ui); color: var(--muted); }

.slider__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.slider__btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--hairline);
  color: var(--ink); font-size: 20px; cursor: pointer; transition: all .2s;
  display: grid; place-items: center; box-shadow: var(--shadow-sm);
}
.slider__btn:hover { border-color: var(--gold); color: var(--gold); }
.slider__dots { display: flex; gap: 8px; }
.slider__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hairline-2); border: 0;
  cursor: pointer; padding: 0; transition: all .2s;
}
.slider__dot.is-active { background: var(--gold); transform: scale(1.3); }

/* =========================================================
   SLIDE 7 — COMPARISON
   ========================================================= */
.scoreboard {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px;
  align-items: center; margin: 32px 0 36px;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: 44px 36px;
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}
.scoreboard::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--olive), var(--gold), var(--crimson));
}
.scoreboard__col { text-align: center; }
.scoreboard__label {
  font: 600 11px/1 var(--f-ui); letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
}
.scoreboard__digits {
  font: 600 clamp(36px, 5.4vw, 60px)/1 var(--f-display);
  color: var(--ink); letter-spacing: -.025em;
  font-feature-settings: 'tnum';
}
.scoreboard__col--g3 .scoreboard__digits { color: var(--gold); }
.scoreboard__sub { color: var(--muted); font-size: 13px; margin-top: 12px; }
.scoreboard__vs {
  font: 600 clamp(20px, 2.4vw, 28px) var(--f-display);
  font-style: italic; color: var(--muted-2);
  padding: 0 12px;
}

.cmp-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cmp-card {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
}
.cmp-card h4 {
  margin: 0 0 14px; font: 700 11px/1 var(--f-ui);
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.cmp-card p { margin: 0 0 10px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.cmp-card p:last-child { margin-bottom: 0; }
.cmp-card p strong { color: var(--ink); font-weight: 700; margin-right: 6px; }
[dir="rtl"] .cmp-card p strong { margin-right: 0; margin-left: 6px; }

.cta-strip {
  margin-top: 28px; padding: 24px 28px;
  background: var(--navy); color: #fff;
  border-radius: var(--radius); font-size: 15px; line-height: 1.6;
  box-shadow: var(--shadow-md);
}
.cta-strip strong { color: var(--gold); display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }

/* =========================================================
   SLIDE 8 — FUNDING PATHS
   ========================================================= */
.path-grid {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) { .path-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px)  { .path-grid { grid-template-columns: 1fr; } }
.path {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 24px; position: relative;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.path:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow-md); }
.path__icon {
  font-size: 24px; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--paper-2); margin-bottom: 14px;
}
.path h3 { margin: 0 0 8px; font: 600 15px/1.3 var(--f-ui); color: var(--ink); }
.path p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.path .learn-more { margin-top: auto; align-self: flex-start; }

/* =========================================================
   SLIDE 9 — SPONSORSHIP TIERS
   ========================================================= */
.tier-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 28px;
}
@media (max-width: 1100px) { .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px)  { .tier-grid { grid-template-columns: 1fr; } }
.tier {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 28px 24px;
  position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tier::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.tier--gold::before      { background: linear-gradient(90deg, #d4a64f, var(--gold-2)); }
.tier--silver::before    { background: linear-gradient(90deg, #c5cdd9, #95a0b3); }
.tier--bronze::before    { background: linear-gradient(90deg, #c08254, #8a5934); }
.tier--community::before { background: linear-gradient(90deg, var(--teal), var(--navy)); }

.tier h3 {
  margin: 0 0 6px; font-family: var(--f-display);
  font-size: 26px; font-weight: 600; letter-spacing: -.01em;
}
.tier--gold h3      { color: var(--gold-2); }
.tier--silver h3    { color: #6c7585; }
.tier--bronze h3    { color: #8a5934; }
.tier--community h3 { color: var(--teal); }
.tier__amount { color: var(--muted); font-size: 13px; margin: 0 0 16px; font-style: italic; }
.tier ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tier li {
  color: var(--ink-2); font-size: 13.5px;
  padding-left: 18px; position: relative; line-height: 1.5;
}
[dir="rtl"] .tier li { padding-left: 0; padding-right: 18px; }
.tier li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-size: 12px; font-weight: 700; top: 1px; }
[dir="rtl"] .tier li::before { left: auto; right: 0; }
.tier .learn-more { margin-top: auto; align-self: flex-start; }
.tier ul + .learn-more { margin-top: 18px; }   /* breathing room above when ul precedes button */

/* =========================================================
   SLIDE 10 — TIMELINE
   ========================================================= */
.timeline {
  list-style: none; padding: 0; margin: 36px 0 0;
  position: relative;
}
.timeline::before {
  content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--hairline-2));
}
[dir="rtl"] .timeline::before { left: auto; right: 9px; }
.tl-step { padding: 14px 0 30px 48px; position: relative; }
[dir="rtl"] .tl-step { padding: 14px 48px 30px 0; }
.tl-step::before {
  content: ''; position: absolute; left: 3px; top: 22px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--gold);
}
[dir="rtl"] .tl-step::before { left: auto; right: 3px; }
.tl-step__date {
  font: 700 11px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 8px;
}
.tl-step h3 { margin: 0 0 6px; font: 600 18px/1.25 var(--f-ui); color: var(--ink); letter-spacing: -.005em; }
.tl-step p { margin: 0; color: var(--muted); font-size: 14px; max-width: 70ch; line-height: 1.55; }

/* =========================================================
   SLIDE — VIDEO RESOURCES
   ========================================================= */
.video-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 28px;
}
.video-card {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column;
}
.video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.video-card__body { padding: 18px 20px 20px; }
.video-card__tag {
  display: inline-block; font: 700 10.5px/1 var(--f-ui);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.video-card h3 {
  margin: 0 0 6px; font: 600 16px/1.35 var(--f-ui);
  color: var(--ink); letter-spacing: -.005em;
}
.video-card p { margin: 0; color: var(--muted); font-size: 13px; }

/* Lite-YouTube */
.lite-yt {
  position: relative; display: block; width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #0e1a33;
  cursor: pointer; overflow: hidden;
  border: 0; text-decoration: none;
  /* Mobile: kill 300ms tap delay and double-tap zoom so the lightbox opens on first touch */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.lite-yt img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s, filter .25s;
}
.lite-yt:hover img { transform: scale(1.04); filter: brightness(.85); }
.lite-yt__play {
  position: absolute; inset: 0;
  display: grid; place-items: center; pointer-events: none;
}
.lite-yt__play svg {
  width: 68px; height: 48px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.5));
  transition: transform .25s;
}
.lite-yt:hover .lite-yt__play svg { transform: scale(1.08); }
.lite-yt iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.lite-yt__badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(14,26,51,.85); color: #fff;
  font: 600 10px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 4px;
  pointer-events: none;
}
[dir="rtl"] .lite-yt__badge { left: auto; right: 12px; }

/* Article card (link variant inside a lite-yt frame) */
.lite-yt--article { background: linear-gradient(135deg, var(--navy), var(--navy-2)); }
.article-card-inner {
  position: absolute; inset: 0;
  display: grid; place-items: center; padding: 24px; text-align: center;
  color: var(--paper); font-family: var(--f-display);
}
.article-card-inner__kicker {
  font: 700 11px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.article-card-inner__title { font-size: 20px; line-height: 1.25; font-weight: 500; }
.article-card-inner__link {
  margin-top: 16px; font: 600 11px/1 var(--f-ui);
  color: rgba(247, 244, 238, .65); letter-spacing: .08em;
}

/* Inline single video block (used within budget slides) */
.video-inline {
  margin-top: 24px;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
.video-inline__caption {
  padding: 14px 18px; display: flex; gap: 14px;
  align-items: baseline; justify-content: space-between; flex-wrap: wrap;
}
.video-inline__caption strong { font: 600 14px/1.3 var(--f-ui); color: var(--ink); }
.video-inline__caption span { font: 600 10.5px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* =========================================================
   SLIDE 11 — CLOSING
   ========================================================= */
.slide--closing {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.closing-grid {
  display: grid; gap: 48px;
  grid-template-columns: 1.4fr 1fr; align-items: start;
}
@media (max-width: 900px) { .closing-grid { grid-template-columns: 1fr; } }
.closing-title {
  font-family: var(--f-display); font-size: clamp(32px, 5vw, 60px);
  line-height: 1.05; margin: 16px 0 36px; font-weight: 600; letter-spacing: -.02em;
}
.closing-title .accent { color: var(--gold); font-style: italic; font-weight: 500; }
.signature {
  display: flex; align-items: center; gap: 18px; margin: 0;
  padding-top: 24px; border-top: 1px solid var(--hairline);
}
.signature img {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold);
  box-shadow: 0 6px 18px rgba(184,137,58,.25);
}
.signature figcaption { display: grid; gap: 4px; line-height: 1.3; }
.signature strong { font-family: var(--f-display); font-size: 20px; font-weight: 600; color: var(--ink); }
.signature span { color: var(--gold); font-size: 13px; letter-spacing: .04em; font-weight: 500; }
.signature a { color: var(--muted); font-size: 13px; text-decoration: none; }
.signature a:hover { color: var(--gold); text-decoration: underline; }

.closing-right h3 {
  margin: 0 0 16px; font: 700 11px/1 var(--f-ui);
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.sources { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.sources li {
  display: grid; gap: 4px; padding: 14px 18px;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 8px; box-shadow: var(--shadow-sm);
}
.sources a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.sources a:hover { color: var(--gold); }
.sources span { color: var(--muted); font-size: 12.5px; }
.disclaimer { color: var(--muted-2); font-size: 12px; font-style: italic; line-height: 1.55; }

/* =========================================================
   RESPONSIVE — header / mobile menu strategy
   --------------------------------------------------
   • Hamburger (.deck-menu-btn) is shown at ALL widths.
   • <1100px : in-header slide nav is hidden (lives in panel)
   • <900px  : language toggle hides (lives in panel)
   • <640px  : brand text hides, tighter padding
   • ≥1400px : secondary tools (Present/Full/PDF/PNG/Updated)
               surface inline in the header for power users.
   ========================================================= */
.deck-tools > #presenterBtn,
.deck-tools > #fullscreenBtn,
.deck-tools > .deck-updated { display: none; }

@media (min-width: 1400px) {
  .deck-tools > #presenterBtn,
  .deck-tools > #fullscreenBtn { display: inline-flex; }
  .deck-tools > .deck-updated { display: inline-flex; align-items: center; }
}

/* Wide-desktop layout pass:
   center every section on a stronger content frame without
   affecting tablet/mobile composition. */
@media (min-width: 1440px) {
  :root { --maxw: 1280px; }

  .slide {
    align-items: center;
    padding-inline: clamp(56px, 7vw, 120px);
  }

  .slide-head {
    text-align: center;
    margin-inline: auto;
  }

  .slide-head h2,
  .slide-head .lede {
    margin-inline: auto;
  }

  .slide-head h2 { max-width: 26ch; }
  .slide-head .lede { max-width: 78ch; }

  .note,
  .footnote,
  .feedback,
  .share {
    margin-inline: auto;
  }

  .kpi-row,
  .budget-layout,
  .path-grid,
  .tier-grid,
  .timeline,
  .video-inline,
  .closing-grid,
  .primer-grid,
  .glossary,
  .gen-compare-mini {
    margin-inline: auto;
  }
}

@media (max-width: 1100px) {
  .deck-nav { display: none; }
}
@media (max-width: 640px) {
  .deck-brand__text { display: none; }
  .deck-header { padding: 0 12px; gap: 8px; }
  .deck-tools { gap: 6px; }
  /* Make hamburger unmistakable on small screens */
  .deck-menu-btn { width: 46px; height: 46px; border-width: 2px; }
  .deck-menu-btn__bars { width: 22px; height: 16px; }
}

/* =========================================================
   MOBILE PANEL  (the sheet that drops from the header)
   ========================================================= */
.deck-panel-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 33, 61, 0.35);
  z-index: 90;
  animation: backdropIn .2s ease-out;
}
.deck-panel-backdrop[hidden] { display: none !important; }

.deck-panel {
  position: fixed;
  top: var(--header-h); inset-inline: 0;
  max-height: calc(100vh - var(--header-h));
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 18px 36px rgba(20, 33, 61, .14);
  z-index: 95;
  overflow-y: auto;
  padding: 24px clamp(18px, 4vw, 36px) 32px;
  animation: panelIn .24s cubic-bezier(.2,.7,.3,1);
}
.deck-panel[hidden] { display: none !important; }
@keyframes panelIn {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.deck-panel__section + .deck-panel__section {
  margin-top: 22px; padding-top: 22px;
  border-top: 1px dashed var(--hairline);
}
.deck-panel__title {
  font: 700 11px/1 var(--f-ui);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
.deck-panel__nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
.deck-panel__nav-btn {
  text-align: start;
  padding: 12px 14px;
  font: 600 13px/1.1 var(--f-ui);
  letter-spacing: .03em;
  border-radius: 8px;
  background: rgba(20, 33, 61, .04);
  color: var(--ink);
  border: 0; cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.deck-panel__nav-btn:hover {
  background: rgba(184, 137, 58, .12);
  color: var(--gold);
}
.deck-panel__nav-btn.is-active {
  background: var(--ink); color: #fff;
}
.deck-panel__nav-btn.is-active::after { display: none; }
[dir="rtl"] .deck-panel__nav-btn { text-align: end; }

.deck-panel__lang { display: inline-flex; }
.deck-panel__tools {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.deck-panel__tools .tool-btn { padding: 9px 14px; font-size: 11px; }
.deck-panel__updated {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px dashed var(--hairline);
  font: 500 12px/1.5 var(--f-ui);
  color: var(--muted);
}
.deck-panel__updated .deck-updated {
  color: var(--muted) !important;
  padding: 0;
}
.deck-panel__updated #lastUpdated { color: var(--ink); font-weight: 600; }

body.menu-open { overflow: hidden; }

/* Stagger nav buttons into view as the panel opens */
.deck-panel__nav-btn {
  opacity: 0; transform: translateY(8px);
  animation: panelItemIn .35s cubic-bezier(.2,.7,.3,1) forwards;
}
.deck-panel__nav-btn:nth-child(1)  { animation-delay: .02s; }
.deck-panel__nav-btn:nth-child(2)  { animation-delay: .04s; }
.deck-panel__nav-btn:nth-child(3)  { animation-delay: .06s; }
.deck-panel__nav-btn:nth-child(4)  { animation-delay: .08s; }
.deck-panel__nav-btn:nth-child(5)  { animation-delay: .10s; }
.deck-panel__nav-btn:nth-child(6)  { animation-delay: .12s; }
.deck-panel__nav-btn:nth-child(7)  { animation-delay: .14s; }
.deck-panel__nav-btn:nth-child(8)  { animation-delay: .16s; }
.deck-panel__nav-btn:nth-child(9)  { animation-delay: .18s; }
.deck-panel__nav-btn:nth-child(10) { animation-delay: .20s; }
.deck-panel__nav-btn:nth-child(11) { animation-delay: .22s; }
.deck-panel__nav-btn:nth-child(12) { animation-delay: .24s; }
.deck-panel__nav-btn:nth-child(13) { animation-delay: .26s; }
.deck-panel__tools .tool-btn,
.deck-panel__lang .lang__btn,
.deck-panel__updated {
  opacity: 0; transform: translateY(6px);
  animation: panelItemIn .35s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: .12s;
}
@keyframes panelItemIn {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-panel__nav-btn,
  .deck-panel__tools .tool-btn,
  .deck-panel__lang .lang__btn,
  .deck-panel__updated { opacity: 1; transform: none; animation: none; }
}

/* =========================================================
   RESPONSIVE (legacy block — slide-level overrides only)
   ========================================================= */
@media (max-width: 800px) {
  .slide { padding: 80px 22px; }
  .cover-meta { gap: 24px; }
  .scoreboard { grid-template-columns: 1fr; gap: 18px; padding: 30px 22px; }
  .scoreboard__vs { padding: 0; }
  .countdown { grid-template-columns: repeat(2, 1fr); }
  .slide-head { margin-bottom: 32px; }
}

/* =========================================================
   PRINT (PDF EXPORT)
   ========================================================= */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body.deck { background: #fff; color: #000; }
  .deck-header, .deck-progress, .deck-counter, .grid-bg, .cover-scroll, .slider__controls, .lite-yt__play, .lite-yt__badge { display: none !important; }
  .slides { padding-top: 0; }
  .slide { min-height: auto; page-break-after: always; padding: 12mm 8mm; break-inside: avoid; }
  .kit, .kpi, .rec-card, .cmp-card, .path, .tier, .chart-card, .budget-table-wrap, .scoreboard, .g3-card, .video-card, .sources li, .video-inline { box-shadow: none; border-color: #ccc; }
  .slider__track { display: block; }
  .slider__slide { width: 100% !important; flex: none !important; transform: none !important; }
  .big-num, .cta-strip { background: #f5f0e6; color: #000; }
  .big-num__caption, .cta-strip { color: #333; }
  .big-num__value, .scoreboard__col--g3 .scoreboard__digits { color: #8a6020; }
  a { color: #1a3370; text-decoration: underline; }
  .lite-yt::after { content: 'Video — see online'; position: absolute; inset: 0; display: grid; place-items: center; background: #f5f0e6; color: #333; font: italic 12px var(--f-ui); }
  .lite-yt img { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* =========================================================
   COVER — HERO CTAs + MICRO-INTERACTIONS
   ========================================================= */
.cover-ctas {
  display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin: 8px 0 0;
}
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font: 600 12.5px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.cta--primary {
  background: var(--ink); color: #fff;
  box-shadow: 0 8px 24px rgba(20, 33, 61, .25);
}
.cta--primary:hover {
  background: var(--navy-2); transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(20, 33, 61, .35);
}
.cta--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--hairline-2);
}
.cta--ghost:hover { border-color: var(--gold); color: var(--gold-2); transform: translateY(-2px); }
.cta__arrow { transition: transform .2s; }
.cta:hover .cta__arrow { transform: translateX(3px); }
[dir="rtl"] .cta__arrow { transform: scaleX(-1); }
[dir="rtl"] .cta:hover .cta__arrow { transform: scaleX(-1) translateX(3px); }

/* Mouse-parallax on cover layers */
.cover-layer.parallax { transition: transform .25s ease-out; }

/* Cover micro-band */
.cover-band {
  display: flex; flex-wrap: wrap; gap: 28px 40px;
  list-style: none;
  justify-content: center; align-items: center;
  margin: 36px auto 0; padding: 22px 28px;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  border-radius: 12px; max-width: 880px;
}
.cover-band__item { display: grid; line-height: 1.3; text-align: center; }
.cover-band__num {
  font-family: var(--f-display); font-weight: 600;
  font-size: 24px; color: var(--ink); letter-spacing: -.01em;
}
.cover-band__lbl {
  font: 600 10px/1.3 var(--f-ui); letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted-2); margin-top: 4px;
}

/* =========================================================
   SIDE DOTS (slide minimap)
   ========================================================= */
.side-dots {
  position: fixed; top: 50%; right: 22px;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px;
  z-index: 50; padding: 14px 10px;
  background: rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
[dir="rtl"] .side-dots { right: auto; left: 22px; }
.side-dots__btn {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--hairline-2); border: 0;
  padding: 0; cursor: pointer; position: relative;
  transition: background .2s, transform .2s;
}
.side-dots__btn:hover { background: var(--gold); transform: scale(1.25); }
.side-dots__btn.is-active { background: var(--ink); transform: scale(1.3); }
/* Phase 3: rich hover mini-map (CSS-only card, no screenshot) */
.side-dots__card {
  position: absolute; top: 50%; right: 22px; transform: translateY(-50%) translateX(6px);
  width: 200px; min-height: 88px;
  background: var(--ink); color: #fff;
  padding: 10px 12px; border-radius: 8px;
  box-shadow: 0 10px 28px rgba(20,33,61,.32);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
}
[dir="rtl"] .side-dots__card { right: auto; left: 22px; transform: translateY(-50%) translateX(-6px); text-align: right; }
.side-dots__card-eyebrow {
  font: 700 9px/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}
.side-dots__card-title {
  font: 700 13px/1.3 var(--f-ui);
  color: #fff;
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.side-dots__card-index {
  font: 600 10px/1 var(--f-ui); letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  margin-top: auto;
}
.side-dots__btn:hover .side-dots__card,
.side-dots__btn:focus-visible .side-dots__card {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
/* Hide the old plain tooltip when rich card is present */
.side-dots__btn:has(.side-dots__card)::after { display: none; }

.app-version {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 55;
  padding: .28rem .52rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(14,23,38,.74);
  color: rgba(255,255,255,.9);
  font: 600 .66rem/1 var(--f-ui);
  letter-spacing: .04em;
  pointer-events: none;
}

[dir="rtl"] .app-version {
  left: auto;
  right: 12px;
}

@media (max-width: 900px) {
  .app-version {
    bottom: 70px;
  }
}

@media (max-width: 900px) { .side-dots { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .side-dots__card { transition: opacity .1s linear; }
  .side-dots__btn { transition: background .1s; }
  .side-dots__btn:hover, .side-dots__btn.is-active { transform: none; }
}

/* =========================================================
   PHASE 3 — Slide snap (toggle in toolbar, body.is-snap)
   Only takes effect on desktop (viewport ≥ 901px). Avoids the
   well-known iOS Safari rubber-band + sticky-header conflicts.
   ========================================================= */
@media (min-width: 901px) {
  body.is-snap { scroll-snap-type: y mandatory; }
  body.is-snap .slide { scroll-snap-align: start; scroll-snap-stop: always; min-height: calc(100vh - var(--header-h, 56px)); }
}
#snapBtn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
#snapBtn[hidden] { display: none !important; }

/* =========================================================
   PRIMER SLIDE — "PSS 101 for non-technical readers"
   ========================================================= */
.primer-grid {
  display: grid; gap: 22px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  margin-top: 28px;
}
@media (max-width: 900px) { .primer-grid { grid-template-columns: 1fr; } }

.flow-card {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow-sm);
}
.flow-card h3 {
  margin: 0 0 18px; font: 700 11px/1 var(--f-ui);
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.flow {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 14px;
}
.flow li {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px;
  align-items: center; padding: 12px 14px;
  background: var(--paper); border-radius: 8px;
  border-left: 3px solid var(--gold);
}
[dir="rtl"] .flow li { border-left: 0; border-right: 3px solid var(--gold); }
.flow__icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 600; font-size: 18px;
}
.flow__body strong { display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
.flow__body span { color: var(--muted); font-size: 12.5px; }

.analogy-card {
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius); padding: 28px;
  position: relative; overflow: hidden;
}
.analogy-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at bottom right, rgba(184,137,58,.2), transparent 60%);
  pointer-events: none;
}
.analogy-card h3 {
  position: relative;
  margin: 0 0 16px; font: 700 11px/1 var(--f-ui);
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.analogy-card p { position: relative; margin: 0 0 14px; font-size: 14.5px; line-height: 1.65; color: rgba(247,244,238,.88); }
.analogy-card p:last-child { margin-bottom: 0; }
.analogy-card em { color: var(--gold); font-style: normal; font-weight: 600; }

.glossary {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.glossary > div {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 8px; padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.glossary dt { font: 700 12px/1 var(--f-ui); color: var(--ink); letter-spacing: .04em; }
.glossary dd { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

.primer-subheading {
  font: 700 11px/1 var(--f-ui);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin: 36px 0 0;
}

.sponsors-cta { text-align: center; margin-top: 28px; }

.gen-compare-mini {
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 28px;
}
@media (max-width: 720px) { .gen-compare-mini { grid-template-columns: 1fr; } }
.gen-mini {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 24px;
  border-top: 3px solid var(--muted-2);
  box-shadow: var(--shadow-sm);
  min-width: 0;          /* allow shrink inside grid */
}
.gen-mini--g2 { border-top-color: var(--olive); }
.gen-mini--g3 { border-top-color: var(--gold); }
.gen-mini h4 {
  margin: 0 0 6px; font-family: var(--f-display);
  font-size: 22px; font-weight: 600; color: var(--ink);
}
.gen-mini__sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; line-height: 1.5; }
.gen-mini ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.gen-mini li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px;
  color: var(--ink-2); font-size: 13.5px; line-height: 1.5;
  word-break: break-word;
}
.gen-mini li::before {
  content: '●'; color: var(--gold); font-size: 10px; line-height: 1.6;
}
.gen-mini--g2 li::before { color: var(--olive); }
.gen-mini--g3 li::before { color: var(--gold); }

/* =========================================================
   "LEARN MORE" BUTTONS (on path / tier cards)
   ========================================================= */
.learn-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; padding: 8px 12px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--hairline-2); border-radius: 6px;
  font: 600 10.5px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: all .18s;
}
.learn-more:hover { border-color: var(--gold); color: var(--gold-2); background: rgba(184,137,58,.06); }
.learn-more::after { content: '→'; transition: transform .18s; }
.learn-more:hover::after { transform: translateX(3px); }
[dir="rtl"] .learn-more::after { content: '←'; }

/* =========================================================
   MODAL SYSTEM
   ========================================================= */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 33, 61, .55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  z-index: 1000;
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; }
body.modal-open { overflow: hidden; }

.modal {
  background: var(--paper);
  border-radius: var(--radius-lg);
  max-width: 760px; width: 100%;
  max-height: 86vh; overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  position: relative;
  transform: translateY(20px) scale(.96);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.modal-backdrop.is-open .modal { transform: none; }

.modal__head {
  position: sticky; top: 0; z-index: 2;
  padding: 24px 28px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  display: grid; gap: 4px;
}
.modal__eyebrow {
  font: 700 10.5px/1 var(--f-ui); letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
}
.modal__title {
  margin: 0; font-family: var(--f-display);
  font-size: clamp(22px, 2.6vw, 28px); font-weight: 600;
  color: var(--ink); letter-spacing: -.01em; padding-right: 48px;
}
[dir="rtl"] .modal__title { padding-right: 0; padding-left: 48px; }

/* Close button — visually matches the video lightbox: white pill with
   strong shadow, anchored to the top-inline-end corner. z-index sits
   ABOVE .modal__head (z:2) so the sticky white header cannot cover it
   on long-scrolling modals (this was the "no close button" report). */
.modal__close {
  position: absolute; top: 8px; right: 8px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.95);
  border: 0;
  color: var(--ink);
  font: 700 22px/1 var(--f-ui);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
  z-index: 5;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, color .2s, transform .2s;
}
[dir="rtl"] .modal__close { right: auto; left: 8px; }
.modal__close:hover,
.modal__close:focus-visible {
  background: var(--gold); color: var(--ink); outline: none;
  transform: rotate(90deg);
}

.modal__body { padding: 22px 28px 28px; color: var(--ink-2); font-size: 14.5px; line-height: 1.65; }
.modal__body > * { max-width: 100%; }
.modal__body > p:first-child { margin-top: 0; }
.modal__body h4 {
  margin: 24px 0 10px; font: 700 11px/1 var(--f-ui);
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}

.modal__kpis {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 14px 0 6px;
  padding: 0;                      /* reset browser default dl padding */
  width: 100%;
}
.modal__kpis > div {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 8px; padding: 14px 16px;
  min-width: 0;                    /* allow flex/grid item to shrink properly */
  display: flex; flex-direction: column; justify-content: center;
}
.modal__kpis dt {
  font: 600 10px/1.1 var(--f-ui);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 8px;                 /* reset default dt margin */
}
.modal__kpis dd {
  margin: 0;                       /* override default 40px margin-inline-start */
  font-family: var(--f-display); font-weight: 600;
  color: var(--ink);
  font-size: 16px; line-height: 1.25;
  word-break: break-word;
}

.modal__steps {
  list-style: none; padding: 0; margin: 12px 0;
  counter-reset: step;
}
.modal__steps li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px;
  align-items: start;
  padding: 14px 16px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 8px;
  width: 100%;
}
.modal__steps li::before {
  counter-increment: step; content: counter(step);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: var(--gold);
  display: grid; place-items: center;
  font: 700 12px/1 var(--f-ui);
  margin-top: 2px;
}
.modal__steps strong {
  grid-column: 2;
  color: var(--ink); display: block; margin-bottom: 4px;
  font: 600 14px/1.35 var(--f-ui);
}
.modal__steps span {
  grid-column: 2;
  color: var(--muted);
  font: 400 13px/1.55 var(--f-ui);
  display: block;
}

.modal__pitfall {
  margin: 18px 0 0; padding: 14px 16px;
  background: rgba(179, 50, 45, .07);
  border-left: 3px solid var(--crimson);
  border-radius: 0 6px 6px 0;
  font-size: 13.5px; color: var(--ink-2);
}
[dir="rtl"] .modal__pitfall { border-left: 0; border-right: 3px solid var(--crimson); border-radius: 6px 0 0 6px; }
.modal__pitfall strong { color: var(--crimson); }

.modal__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.modal__tags li {
  font: 600 10.5px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: 5px 10px; background: var(--paper-2);
  border: 1px solid var(--hairline); border-radius: 999px;
}

@media (max-width: 600px) {
  .modal__head { padding: 20px 22px 14px; }
  .modal__body { padding: 18px 22px 24px; }
  .modal__close { top: 14px; right: 14px; }
}

@media print {
  .side-dots, .modal-backdrop, .learn-more { display: none !important; }
  /* Exclude any slide containing an embedded video from print/PDF output. */
  .slide:has(.lite-yt) { display: none !important; }
}

/* =========================================================
   PHASE 6 — Interactive simulators (funding mix + sponsor coverage)
   ========================================================= */
.sim {
  margin: 32px 0 12px;
  padding: 22px 24px;
  border: 1px solid rgba(20, 33, 61, 0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #faf6ef 100%);
  box-shadow: 0 4px 18px rgba(20, 33, 61, 0.05);
}
.sim h3 {
  margin: 0 0 6px;
  font-family: var(--f-display, serif);
  font-size: 22px;
  color: #14213d;
}
.sim__lede { margin: 0 0 18px; color: #555; font-size: 14px; }
.sim__rows { display: grid; gap: 10px; }
.sim__row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr 56px;
  gap: 14px;
  align-items: center;
  font-size: 14px;
}
.sim__row-name { color: #14213d; font-weight: 600; }
.sim__row input[type=range] { width: 100%; accent-color: #b8893a; }
.sim__row output { text-align: end; font-variant-numeric: tabular-nums; color: #14213d; font-weight: 700; }
.sim__total {
  margin-top: 18px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}
.sim__total strong { font-size: 18px; color: #14213d; font-variant-numeric: tabular-nums; }
.sim__bar { display: block; height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
.sim__bar > span { display: block; height: 100%; background: #b8893a; transition: width .15s ease; }
.sim__total[data-state="ok"] strong { color: #2e6b3a; }
.sim__total[data-state="ok"] .sim__bar > span { background: #2e6b3a; }
.sim__total[data-state="over"] strong { color: #b3322d; }
.sim__total[data-state="over"] .sim__bar > span { background: #b3322d; }

.sim__tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.sim__tiers label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: #14213d;
  font-weight: 600;
}
.sim__tiers input[type=number] {
  font: 600 16px/1.2 var(--f-ui, sans-serif);
  padding: 8px 10px;
  border: 1px solid rgba(20, 33, 61, 0.18);
  border-radius: 8px;
  background: #fff;
}
.sim__result {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(20, 33, 61, 0.15);
  font-size: 14px;
}
.sim__result strong { display: block; font-size: 22px; color: #b8893a; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .sim__row { grid-template-columns: 1fr; }
  .sim__row output { text-align: start; }
}

/* =========================================================
   PHASE 7 — Sources drawer + last-updated badge
   ========================================================= */
.deck-updated {
  font: 500 11px/1 var(--f-ui, sans-serif);
  color: var(--muted-2);
  padding: 0 8px;
  align-self: center;
  white-space: nowrap;
}
.deck-updated #lastUpdated { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.sources-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(420px, 92vw);
  background: #fff;
  color: #14213d;
  z-index: 200;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  animation: drawerIn .22s ease-out;
}
/* Critical: [hidden] must win over the .sources-drawer display rule above. */
.sources-drawer[hidden],
.sources-backdrop[hidden] { display: none !important; }
.sources-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 33, 61, 0.35);
  z-index: 199;
  animation: backdropIn .22s ease-out;
}
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
[dir="rtl"] .sources-drawer { animation-name: drawerInRTL; }
@keyframes drawerInRTL { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.sources-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(20, 33, 61, 0.12);
}
.sources-drawer__head h2 { margin: 0; font-family: var(--f-display, serif); font-size: 22px; }
.sources-drawer__close {
  background: none; border: 0; font-size: 30px; line-height: 1; cursor: pointer; color: #14213d;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.sources-drawer__close:hover { background: rgba(20, 33, 61, 0.08); }
.sources-drawer__close:focus-visible { outline: 2px solid #b8893a; outline-offset: 2px; }
.sources-drawer__list {
  margin: 0; padding: 18px 22px; list-style: none; overflow-y: auto; flex: 1;
}
.sources-drawer__list li { padding: 10px 0; border-bottom: 1px dashed rgba(20, 33, 61, 0.12); font-size: 14px; }
.sources-drawer__list a { color: #14213d; text-decoration: underline; word-break: break-word; }
.sources-drawer__n { display: inline-block; min-width: 26px; font-weight: 700; color: #b8893a; }
@media print { .sources-drawer, .deck-updated { display: none !important; } }

/* =========================================================
   PHASE 8 — Feedback widget
   ========================================================= */
.feedback { margin-top: 24px; padding: 14px 16px; border: 1px dashed rgba(20, 33, 61, 0.25); border-radius: 10px; max-width: 360px; }
.feedback__q { margin: 0 0 8px; font-size: 14px; color: #14213d; font-weight: 600; }
.feedback__btns { display: flex; gap: 10px; }
.feedback__btn {
  font-size: 22px; padding: 6px 14px; border: 1px solid rgba(20, 33, 61, 0.2);
  background: #fff; border-radius: 8px; cursor: pointer; transition: transform .1s ease, background .15s ease;
}
.feedback__btn:hover:not(:disabled) { background: #faf6ef; transform: translateY(-1px); }
.feedback__btn:disabled { cursor: default; opacity: .55; }
.feedback__btn[aria-pressed="true"] { background: #b8893a; color: #fff; opacity: 1; border-color: #b8893a; }
.feedback__thanks { margin: 10px 0 0; font-size: 13px; color: #2e6b3a; }
@media print { .feedback { display: none; } }

/* =========================================================
   PHASE 9 — Social share strip (closing slide)
   ========================================================= */
.share { margin-top: 20px; padding: 14px 16px; border: 1px solid rgba(20,33,61,0.18); border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(247,243,238,0.35)); max-width: 480px; }
.share__q { margin: 0 0 10px; font-size: 14px; color: #14213d; font-weight: 700; letter-spacing: .2px; }
.share__btns { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.share__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1;
  color: #14213d; background: #ffffff;
  border: 1px solid rgba(20,33,61,0.18);
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.share__btn svg { flex: 0 0 18px; }
.share__btn:hover, .share__btn:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(20,33,61,0.12); outline: none; }
.share__btn--linkedin:hover  { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.share__btn--x:hover         { background: #000000; color: #fff; border-color: #000000; }
.share__btn--facebook:hover  { background: #1877f2; color: #fff; border-color: #1877f2; }
.share__btn--whatsapp:hover  { background: #25d366; color: #fff; border-color: #25d366; }
.share__btn--telegram:hover  { background: #229ed9; color: #fff; border-color: #229ed9; }
.share__btn--reddit:hover    { background: #ff4500; color: #fff; border-color: #ff4500; }
.share__btn--email:hover     { background: #14213d; color: #fff; border-color: #14213d; }
.share__btn--copy:hover      { background: #b8893a; color: #fff; border-color: #b8893a; }
.share__btn[data-copied="1"] { background: #2e6b3a; color: #fff; border-color: #2e6b3a; }
.share__toast { margin: 10px 0 0; font-size: 12.5px; color: #2e6b3a; font-weight: 600; }
[dir="rtl"] .share__btn { direction: rtl; }
@media print { .share { display: none; } }

/* =========================================================
   PHASE 1 — Foundation polish
   (Back-to-top FAB + keyboard-hints toast)
   ========================================================= */
.back-to-top {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  z-index: 1400;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  box-shadow: 0 8px 20px rgba(20,33,61,.25);
  cursor: pointer;
  opacity: 0; transform: translateY(8px) scale(.96);
  transition: opacity .25s ease, transform .25s ease, background-color .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.back-to-top svg { width: 22px; height: 22px; display: block; }
.back-to-top:hover { background: var(--gold); border-color: var(--gold); color: #14213d; }
.back-to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.back-to-top.is-visible { opacity: 1; transform: none; }
.back-to-top[hidden] { display: none !important; }
/* Lift FAB above the existing bottom-right slide counter so they don't overlap */
@media (max-width: 720px) {
  .back-to-top { inset-block-end: 64px; }
}
@media print {
  .back-to-top { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity .15s linear; transform: none; }
  .back-to-top.is-visible { transform: none; }
}

.kbd-hints {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-start: 22px;
  z-index: 1400;
  display: inline-flex; align-items: center; gap: 12px;
  max-width: min(560px, calc(100vw - 44px));
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(20,33,61,.28);
  font: 600 12.5px/1.3 var(--f-ui);
  letter-spacing: .02em;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.kbd-hints.is-visible { opacity: 1; transform: none; }
.kbd-hints[hidden] { display: none !important; }
.kbd-hints__text { white-space: normal; }
.kbd-hints__close {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 0;
  color: #fff;
  font: 700 16px/1 var(--f-ui);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s;
}
.kbd-hints__close:hover { background: rgba(255,255,255,.25); }
.kbd-hints__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Toast is desktop-only (mobile has no physical keyboard); hide on small viewports */
@media (max-width: 900px) {
  .kbd-hints { display: none !important; }
}
@media print {
  .kbd-hints { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .kbd-hints { transition: opacity .15s linear; transform: none; }
}
[dir="rtl"] .kbd-hints__text { font-family: var(--f-ar-ui); }

/* =========================================================
   PHASE 4 — GEN2 ↔ GEN3 photo compare slider
   ========================================================= */
.compare-photos {
  margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 10px;
  align-items: stretch;
}
.compare-photos__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 420px;
  border-radius: 12px;
  overflow: hidden;
  background: #0e1726;
  box-shadow: var(--shadow-sm);
  user-select: none;
  touch-action: none;
}
.compare-photos__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  pointer-events: none;
}
.compare-photos__img--gen3 { z-index: 1; }
/* Top image (GEN2) is clipped from the right; --x is a 0–100 percentage of the visible GEN2 region */
.compare-photos__img--gen2 {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0);
}
[dir="rtl"] .compare-photos__img--gen2 {
  clip-path: inset(0 0 0 calc(100% - var(--x, 50%)));
}
.compare-photos__label {
  position: absolute; top: 12px;
  font: 700 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
  background: rgba(20,33,61,.72);
  padding: 6px 10px; border-radius: 4px;
  z-index: 4; pointer-events: none;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.compare-photos__label--left  { left: 12px; }
.compare-photos__label--right { right: 12px; }
[dir="rtl"] .compare-photos__label--left  { left: auto; right: 12px; }
[dir="rtl"] .compare-photos__label--right { right: auto; left: 12px; }
.compare-photos__divider {
  position: absolute; top: 0; bottom: 0;
  left: var(--x, 50%);
  width: 2px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 12px rgba(0,0,0,.4);
  z-index: 3; pointer-events: none;
  transform: translateX(-1px);
}
[dir="rtl"] .compare-photos__divider {
  left: auto; right: var(--x, 50%);
  transform: translateX(1px);
}
.compare-photos__handle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 14px/1 var(--f-ui);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.compare-photos__range {
  width: 100%; margin: 0;
  accent-color: var(--gold);
}
.compare-photos__caption {
  font: 500 12.5px/1.4 var(--f-ui);
  color: var(--muted);
  text-align: center;
}
@media (max-width: 720px) {
  .compare-photos__stage { aspect-ratio: 4 / 3; }
  .compare-photos__handle { width: 30px; height: 30px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .compare-photos__img--gen2 { transition: none; }
}
@media print {
  .compare-photos__range, .compare-photos__divider, .compare-photos__handle { display: none !important; }
  .compare-photos__img--gen2 { clip-path: inset(0 50% 0 0); }
}


/* =========================================================
   PHASE 5 — Deep-link state, FX switcher, Scenario, Video lightbox, Print TOC
   ========================================================= */

/* 5b — FX toolbar button */
#fxBtn .tool-btn__fx { display: inline-block; min-width: 2.5em; text-align: center; }
.fx-footnote {
  position: fixed; inset-block-end: 22px; inset-inline-start: 22px;
  z-index: 1300; max-width: 360px;
  background: var(--ink); color: #fff;
  padding: 8px 12px; border-radius: 6px;
  font: 500 11px/1.35 var(--f-ui); letter-spacing: .02em;
  box-shadow: 0 8px 20px rgba(20,33,61,.22);
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.fx-footnote.is-visible { opacity: 1; transform: none; }
.fx-footnote[hidden] { display: none !important; }
@media (max-width: 900px) { .fx-footnote { display: none !important; } } /* kbd-hints location collides on small screens */
@media print { .fx-footnote { display: none !important; } }

/* 5c — Scenario toggle */
.scenario-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 22px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(20,33,61,.05); border: 1px solid var(--hairline);
}
.scenario-toggle__label {
  font: 700 11px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding-inline-end: 4px;
}
.scenario-toggle__btn {
  background: transparent; color: var(--ink-2);
  border: 1px solid transparent;
  padding: 6px 12px; border-radius: 999px;
  font: 600 11px/1 var(--f-ui); letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.scenario-toggle__btn:hover { color: var(--gold); }
.scenario-toggle__btn.is-active {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
/* When a scenario filter is active, hide non-matching [data-scenario] items.
   body.is-scn-gen2 → keep [data-scenario="gen2"] only; body.is-scn-gen3 → only gen3. */
body.is-scn-gen2 [data-scenario="gen3"],
body.is-scn-gen3 [data-scenario="gen2"] { display: none !important; }

/* 5d — Video lightbox
   Size the dialog so its derived 16:9 height always fits within ~90% of
   the viewport height, on every orientation. Without this, landscape
   phones produced a dialog wider than the viewport could vertically
   accommodate, which clipped the close button offscreen and cropped
   the video. */
.video-lightbox {
  padding: 0; border: 0; background: transparent;
  /* width is the smaller of: 96vw and the width whose 16:9 height equals 88vh */
  width: min(960px, 96vw, calc(88vh * 16 / 9));
  max-width: 96vw;
  max-height: 92vh;
  overflow: visible;
}
.video-lightbox::backdrop { background: rgba(14,23,38,.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.video-lightbox__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.video-lightbox__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Close button sits INSIDE the dialog corner so it can never be clipped
   on short viewports (was top:-42 which fell offscreen on landscape phones). */
.video-lightbox__close {
  position: absolute; top: 8px; right: 8px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.95); color: var(--ink); border: 0;
  font: 700 22px/1 var(--f-ui); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
  z-index: 2;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.video-lightbox__close:hover,
.video-lightbox__close:focus-visible { background: var(--gold); outline: none; }
[dir="rtl"] .video-lightbox__close { right: auto; left: 8px; }
@media print { .video-lightbox { display: none !important; } }

/* 5e — Print-only cover + TOC */
.print-only { display: none; }
@media print {
  .print-only { display: block; }
  .print-cover {
    page-break-after: always;
    padding: 60px 40px;
    color: #14213d;
  }
  .print-cover__eyebrow {
    font: 700 11px/1 sans-serif; letter-spacing: .18em; text-transform: uppercase;
    color: #b8893a; margin: 0 0 18px;
  }
  .print-cover__title {
    font: 800 38px/1.15 serif;
    margin: 0 0 10px;
  }
  .print-cover__sub {
    font: 400 16px/1.4 sans-serif; color: #4a5468;
    margin: 0 0 30px;
  }
  .print-cover__meta {
    font: 500 12px/1 sans-serif; color: #6b7a93;
    margin: 0 0 40px;
  }
  .print-toc__title {
    font: 700 16px/1 sans-serif; letter-spacing: .04em; text-transform: uppercase;
    color: #14213d; margin: 0 0 14px; padding-top: 24px;
    border-top: 1px solid #c8cdd4;
  }
  .print-toc { list-style: decimal-leading-zero inside; padding: 0; margin: 0; }
  .print-toc li {
    font: 500 13px/1.7 sans-serif; color: #14213d;
    padding: 2px 0;
  }
}