/* Base reveal.js styles — neutral default theme.
 *
 * Copy this file as styles.css for each new presentation.
 * Ships a clean, brand-neutral look: IBM Plex Sans/Mono with a blue/teal/slate
 * palette. Customize the CSS variables below, or apply a theme.
 *
 * IMPORTANT: All font sizes use pt (points) for predictable sizing.
 * Base text is intentionally small (16pt) to fit content-heavy slides.
 * Use .text-lg, .text-xl, etc. classes when slides have less content.
 */

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

/* ===========================================
   CSS VARIABLES - Customize these for each presentation
   =========================================== */
:root {
  /* ===========================================
     BACKGROUND COLORS
     Light mode by default. For dark mode, set --background-color and
     --section-divider-bg to a dark color (e.g. #0f172a), switch --text-color
     to #ffffff and --muted-color to rgba(255, 255, 255, 0.6) below.
     =========================================== */
  --background-color: #ffffff;              /* Main slide background */
  --section-divider-bg: #111827;            /* Section divider background (dark slate) */

  /* Typography — IBM Plex Sans/Mono (open fonts). ALWAYS use pt for font sizes */
  --heading-font: "Inter", Helvetica, sans-serif;
  --body-font: "Inter", Helvetica, sans-serif;
  --mono-font: "IBM Plex Mono", monospace;  /* Eyebrow labels, code, captions */
  --base-font-size: 32px;   /* Only px value - sets reveal.js base */
  --text-size: 16pt;        /* Base body text - intentionally small */
  --h1-size: 48pt;
  --h2-size: 36pt;
  --h3-size: 24pt;
  --footnote-size: 11pt;

  /* Colors — neutral default scheme (swap these for your own palette) */
  --primary-color: #2563eb;             /* Primary accent (blue) */
  --secondary-color: #06b6d4;           /* Secondary accent (teal) */
  --accent-purple: #3b82f6;             /* Tertiary accent / gradient pair (light blue) */
  --ink: #111827;                       /* Near-black slate - dark surfaces */
  --text-color: #111827;                /* Main text - use #ffffff for dark backgrounds */
  --muted-color: rgba(17, 24, 39, 0.55);/* Secondary text - use rgba(255,255,255,0.6) on dark */
  --line-color: rgba(17, 24, 39, 0.14); /* Decorative lines */

  /* Layout */
  --slide-padding: 60px;
  --slide-padding-top: 40px;
  --content-gap: 30px;

  /* Border radius for custom components */
  --box-radius: 14px;          /* Generous rounding by default; set to 0 for sharp corners */
}

/* ===========================================
   BASE STYLES - Override reveal.js defaults
   =========================================== */

.reveal {
  font-family: var(--body-font);
  font-size: var(--base-font-size);
}

/* Restore bold after reset.css strips it with font: inherit */
.reveal strong,
.reveal b {
  font-weight: bold;
}

/* Apply background colors */
.reveal-viewport {
  background-color: var(--background-color);
}

/* Hide reveal's built-in nav arrows in every presentation — navigate with the
   arrow keys, space, or by clicking. */
.reveal .controls {
  display: none !important;
}

/* Section divider background via data-state */
.reveal-viewport.is-section-divider .slide-background.present {
  background-color: var(--section-divider-bg) !important;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  font-family: var(--heading-font);
  text-transform: none;
  color: var(--text-color);
  font-weight: 700;   /* Headings are heavy/bold */
  line-height: 1.15;
}

.reveal h1 { font-size: var(--h1-size); }
.reveal h2 { font-size: var(--h2-size); margin-bottom: 0; }
.reveal h3 { font-size: var(--h3-size); }

.reveal p,
.reveal li,
.reveal td,
.reveal th,
.reveal blockquote {
  font-size: var(--text-size);
  color: var(--text-color);
  line-height: 1.5;
}

/* ===========================================
   LISTS
   =========================================== */

.reveal ul {
  list-style: none;
  padding-left: 0;
  margin: 15px 0;
}

.reveal ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
}

.reveal ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--text-color);
  border-radius: 50%;
}

.reveal ul ul li::before {
  background: var(--muted-color);
  width: 6px;
  height: 6px;
}

/* Prevent double-sizing for nested elements */
.reveal blockquote p {
  font-size: inherit;
}

/* ===========================================
   SLIDE LAYOUT
   =========================================== */

.reveal .slides section {
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  padding: var(--slide-padding-top) var(--slide-padding) var(--slide-padding) var(--slide-padding) !important;
  box-sizing: border-box;
  text-align: left;
}

/* Vertical stack wrapper - no padding, just pass through */
.reveal .slides section.stack {
  padding: 0 !important;
}

/* Content area - fills remaining space */
.reveal .slides section > .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: var(--content-gap);
  text-align: left;
}

/* Footnotes at bottom */
.reveal .slides section > .footnote,
.reveal .slides section .footnote {
  position: absolute;
  bottom: 15px;
  left: var(--slide-padding);
  right: var(--slide-padding);
  font-size: var(--footnote-size);
  color: var(--muted-color);
}

/* ===========================================
   SECTION DIVIDERS - Centered title slides
   =========================================== */

.reveal .slides section.section-divider {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
}

.reveal .slides section.section-divider h1 {
  font-size: 60pt;
  text-align: center;
  /* Dividers sit on the dark --section-divider-bg, so the headline uses the accent */
  color: var(--secondary-color);
}

.reveal .slides section.section-divider p {
  font-size: 20pt;
  color: rgba(255, 255, 255, 0.8);
}

/* ===========================================
   TEXT SIZE UTILITIES

   Base text is 16pt - use these to scale UP when
   slides have less content and you want to fill space.
   =========================================== */

.text-lg { font-size: 18pt !important; }   /* Slightly larger */
.text-xl { font-size: 20pt !important; }   /* Medium emphasis */
.text-2xl { font-size: 24pt !important; }  /* Strong emphasis */
.text-3xl { font-size: 28pt !important; }  /* Very large */
.text-4xl { font-size: 32pt !important; }  /* Maximum body text */

/* Other text utilities */
.text-muted { color: var(--muted-color) !important; }
.text-center { text-align: center !important; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.1em; }
.font-light { font-weight: 300; }
.font-bold { font-weight: 600; }

/* ===========================================
   BLOCKQUOTES
   =========================================== */

.reveal blockquote {
  border-left: 4px solid var(--primary-color);
  padding-left: 20px;
  margin: 20px 0;
  font-style: italic;
  background: none;
  box-shadow: none;
  width: 100%;
  max-width: none;
}

.reveal blockquote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  color: var(--muted-color);
}

/* ===========================================
   OPTIONAL: TITLE WITH UNDERLINE

   Add this to presentations where you want
   a line under the slide title.
   =========================================== */

/*
.reveal .slides section > h1,
.reveal .slides section > h2 {
  flex-shrink: 0;
  margin: 0;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--line-color);
}
*/

/* ===========================================
   OPTIONAL: DECORATIVE ELEMENTS
   =========================================== */

/* Top decorative line on all slides */
/*
.reveal .slides section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-color);
}
*/

/* Bottom decorative line */
/*
.reveal .slides section::after {
  content: '';
  position: absolute;
  bottom: 40px;
  left: var(--slide-padding);
  right: var(--slide-padding);
  height: 2px;
  background: var(--line-color);
}
*/

/* ===========================================
   REUSABLE UTILITIES
   Optional pieces for polished decks:
   color-block slides, mono kicker + bold headline, pill label.
   =========================================== */

/* Mono kicker / lead-in line above a bold headline (signature lockup) */
.kicker {
  font-family: var(--mono-font);
  font-size: 17pt;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px 0;
}

/* Eyebrow - mono, uppercase, tracked out (smaller label than .kicker) */
.eyebrow {
  font-family: var(--mono-font);
  font-size: 13pt;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--primary-color);
  margin: 0 0 18px 0;
}

/* Accent gradient text (use sparingly; flat two-tone usually reads better) */
.gradient-text {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-purple) 45%, var(--secondary-color) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* White rounded pill - logo lockup / tag */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  color: var(--primary-color);
  font-weight: 700;
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 20pt;
  line-height: 1;
}
.pill i { color: var(--primary-color); }

/* Thin gradient accent bar */
.accent-bar {
  width: 72px;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  margin: 0 0 26px 0;
}

/* ---- COLOR-BLOCK SLIDES ----
   Pair each class with a matching data-background-color on the <section>:
     <section class="on-purple" data-background-color="#7c3aed"> ... (light text)
     <section class="on-pink"   data-background-color="#ec4899"> ... (dark text)
     <section class="on-dark"   data-background-color="#0f172a"> ... (white text) */

/* Purple background -> white body, pink accents (the "Fachkräftemangel?" look) */
.reveal .slides section.on-purple h1,
.reveal .slides section.on-purple h2,
.reveal .slides section.on-purple h3,
.reveal .slides section.on-purple p,
.reveal .slides section.on-purple li { color: #ffffff; }
.reveal .slides section.on-purple .kicker { color: rgba(255, 255, 255, 0.8); }
.reveal .slides section.on-purple .text-muted { color: rgba(255, 255, 255, 0.65) !important; }
.reveal .slides section.on-purple .footnote { color: rgba(255, 255, 255, 0.55); }
.reveal .slides section.on-purple ul li::before { background: var(--secondary-color); }

/* Pink background -> ink body, purple headings (the "für große Aufgaben." look) */
.reveal .slides section.on-pink h1,
.reveal .slides section.on-pink h2,
.reveal .slides section.on-pink h3 { color: var(--primary-color); }
.reveal .slides section.on-pink p,
.reveal .slides section.on-pink li { color: var(--ink); }
.reveal .slides section.on-pink .kicker { color: var(--ink); }
.reveal .slides section.on-pink .text-muted { color: rgba(0, 0, 25, 0.6) !important; }
.reveal .slides section.on-pink .footnote { color: rgba(0, 0, 25, 0.55); }
.reveal .slides section.on-pink ul li::before { background: var(--primary-color); }

/* Ink background -> white body, pink accents */
.reveal .slides section.on-dark h1,
.reveal .slides section.on-dark h2,
.reveal .slides section.on-dark h3,
.reveal .slides section.on-dark p,
.reveal .slides section.on-dark li { color: #ffffff; }
.reveal .slides section.on-dark .kicker { color: rgba(255, 255, 255, 0.8); }
.reveal .slides section.on-dark .text-muted { color: rgba(255, 255, 255, 0.62) !important; }
.reveal .slides section.on-dark .footnote { color: rgba(255, 255, 255, 0.5); }
.reveal .slides section.on-dark ul li::before { background: var(--secondary-color); }

/* ===========================================
   TWEET / SOCIAL CARD
   Faithful preview of a real tweet. See references/tweet-embeds.md
   for the data-fetch workflow + HTML template.
   =========================================== */
.tweet-card {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 25, 0.1);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 25, 0.12);
  padding: 30px 36px 24px;
  overflow: hidden;
}
/* Accent gradient strip along the top of the card */
.tweet-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.tweet-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.tweet-avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.tweet-name {
  font-size: 17pt;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tweet-badge { color: #1d9bf0; font-size: 14pt; }   /* blue verified check */
.tweet-handle {
  font-size: 14pt;
  color: var(--muted-color);
  margin: 2px 0 0;
}
.tweet-logo {
  font-size: 22pt;
  color: var(--ink);
  margin-left: auto;
  align-self: flex-start;
}
.tweet-body {
  font-size: 18pt;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 14px;
}
.tweet-meta {
  font-size: 12.5pt;
  color: var(--muted-color);
  margin: 18px 0 0;
}
.tweet-stats {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 25, 0.08);
}
.tweet-stats p {
  font-size: 14pt;
  color: var(--muted-color);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Attached tweet media shown beside the card (two-column layout).
   NOTE: cap the <img> with an explicit pixel max-height on tall/portrait
   images — a percentage max-height can't resolve against an auto grid row,
   so the image overflows the slide. See references/tweet-embeds.md. */
.tweet-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}
.tweet-media img {
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 25, 0.1);
  box-shadow: 0 18px 50px rgba(0, 0, 25, 0.14);
}

/* ===========================================
   FANCY FRAGMENT ANIMATIONS (progressive disclosure)
   Opt-in: add to any element together with `fragment`.
     <p class="fragment rise">...</p>
     <p class="pill fragment pop">...</p>
   See references/advanced-features.md.
   =========================================== */

/* Rise + fade + subtle de-blur (text, cards, stats) */
.reveal .fragment.rise {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(6px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s ease;
}
.reveal .fragment.rise.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Pop / scale-in with a gentle overshoot (pills, badges, numbers) */
.reveal .fragment.pop {
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal .fragment.pop.visible {
  opacity: 1;
  transform: scale(1);
}

/* ── "Built with Estradeck" — fixed corner credit shown on every slide ────────
   Dark translucent pill so it reads on light or colored slide backgrounds.
   pointer-events:none so it never blocks the edge click-to-advance nav zones. */
.estradeck-badge {
  /* position is !important: reveal.css's `.reveal a { position: relative }` has
     higher specificity and would otherwise drop the badge into normal flow (top). */
  position: fixed !important;
  top: auto;
  left: auto;
  right: 18px;
  bottom: 16px;
  z-index: 50; /* above the edge nav zones (z-index 34) so the link stays clickable */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 25, 0.55);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 6px 18px rgba(0, 0, 25, 0.28);
  font-family: var(--body-font, "IBM Plex Sans", Helvetica, sans-serif);
  font-size: 11pt;
  line-height: 1;
  letter-spacing: 0.2px;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.estradeck-badge:hover {
  background: rgba(0, 0, 25, 0.72);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 25, 0.35);
}
.estradeck-badge .eb-logo { color: #fea9c6; font-size: 9.5pt; }
.estradeck-badge .eb-text { color: rgba(255, 255, 255, 0.72); font-weight: 500; }
.estradeck-badge .eb-mark { font-weight: 700; white-space: nowrap; }
.estradeck-badge .eb-mark .bm-w { color: #fff; }
.estradeck-badge .eb-mark .bm-g {
  background: linear-gradient(90deg, #fff 0%, #fea9c6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.estradeck-badge .eb-mark .bm-p { color: #fea9c6; }

/* Shrink the badge on phones/tablets — the deck scales down but a fixed-size badge
   would otherwise look oversized against the smaller slide content. */
@media (max-width: 768px), (max-height: 480px) {
  .estradeck-badge {
    right: 6px;
    bottom: 6px;
    gap: 3px;
    padding: 2px 7px 2px 6px;
    font-size: 4.5pt;
  }
  .estradeck-badge .eb-logo { font-size: 4pt; }
}

/* =========================================================
   WebsiteCare.Direct — deck brand additions (deck-level)
   Palette: blue #2563eb · teal #06b6d4 · green #10b981
   ========================================================= */
:root {
  --blue: #2563eb;
  --blue-dark: #1e40af;
  --teal: #06b6d4;
  --green: #10b981;
  --n50: #f9fafb;
  --n100: #f3f4f6;
  --n200: #e5e7eb;
  --n400: #9ca3af;
  --n500: #6b7280;
  --n600: #4b5563;
  --n700: #374151;
  --n800: #1f2937;
}

/* ---- Logo lockup: { (W) } with gradient heart ---- */
.wcd-logo { display: inline-flex; align-items: center; gap: 10px; }
.wcd-logo .bracket { font-family: 'IBM Plex Mono', monospace; font-size: 30px; font-weight: 300; color: var(--n400); }
.on-dark .wcd-logo .bracket { color: rgba(255, 255, 255, 0.45); }
.wcd-mark { position: relative; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; }
.wcd-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: wcd-heartbeat 3s infinite ease-in-out; }
.wcd-mark span { position: relative; z-index: 2; color: #fff; font-weight: 800; font-size: 17px; padding-bottom: 2px; }
.wcd-logo .logo-text { font-size: 19pt; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.on-dark .wcd-logo .logo-text { color: #ffffff; }
@keyframes wcd-heartbeat {
  0% { transform: scale(1); } 12% { transform: scale(1.08); }
  24% { transform: scale(1); } 36% { transform: scale(1.06); }
  54%, 100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .wcd-mark svg { animation: none; } }

/* ---- Branded hero / CTA backgrounds (full-bleed via slide-background) ---- */
.reveal .backgrounds .slide-background.wcd-hero {
  background-color: #111827;
  background-image:
    radial-gradient(60% 70% at 82% 18%, rgba(37, 99, 235, 0.38) 0%, rgba(37, 99, 235, 0) 62%),
    radial-gradient(50% 60% at 12% 88%, rgba(6, 182, 212, 0.25) 0%, rgba(6, 182, 212, 0) 60%),
    radial-gradient(40% 45% at 45% 45%, rgba(16, 185, 129, 0.10) 0%, rgba(16, 185, 129, 0) 60%);
}
.reveal .backgrounds .slide-background.wcd-cta-bg {
  background-color: #111827;
  background-image:
    radial-gradient(55% 65% at 18% 20%, rgba(6, 182, 212, 0.30) 0%, rgba(6, 182, 212, 0) 60%),
    radial-gradient(60% 70% at 85% 85%, rgba(37, 99, 235, 0.42) 0%, rgba(37, 99, 235, 0) 62%);
}

/* ---- Cards ---- */
.wcd-cards { display: grid; gap: 18px; margin-top: 6px; }
.wcd-cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.wcd-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.wcd-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }
.wcd-card {
  background: #ffffff; border: 1px solid var(--n200); border-radius: 14px;
  padding: 20px 22px; box-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
}
.on-dark .wcd-card { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
.wcd-card h3 { font-size: 15.5pt; margin: 0 0 8px; color: var(--n800); }
.on-dark .wcd-card h3 { color: #ffffff; }
.wcd-card p { font-size: 12pt; line-height: 1.5; color: var(--n500); margin: 0; }
.on-dark .wcd-card p { color: rgba(255, 255, 255, 0.65); }
.card-icon {
  width: 40px; height: 40px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 15pt; color: #fff;
  margin-bottom: 12px; background: linear-gradient(135deg, var(--blue), var(--teal));
}
.card-icon.teal  { background: linear-gradient(135deg, var(--teal), var(--green)); }
.card-icon.green { background: linear-gradient(135deg, var(--green), var(--blue)); }

/* ---- Service cards ---- */
.wcd-service ul { margin: 10px 0 12px; }
.wcd-service li { font-size: 11.5pt; margin-bottom: 7px; color: var(--n600); }
.wcd-service li::before { background: var(--blue); }
.wcd-service.svc-teal li::before { background: var(--teal); }
.wcd-service.svc-green li::before { background: var(--green); }
.wcd-outcome { font-size: 11.5pt; margin: 4px 0 0 !important; color: var(--n500) !important; }
.wcd-outcome strong { color: var(--blue); }
.wcd-service.svc-teal .wcd-outcome strong { color: var(--teal); }
.wcd-service.svc-green .wcd-outcome strong { color: var(--green); }

/* ---- Steps (how it works) ---- */
.wcd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.wcd-step { background: var(--n50); border: 1px solid var(--n200); border-radius: 14px; padding: 24px 24px 20px; }
.wcd-step .step-num {
  display: inline-flex; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--teal)); color: #fff;
  font-weight: 800; align-items: center; justify-content: center;
  font-size: 13pt; margin-bottom: 14px;
}
.wcd-step h3 { font-size: 15.5pt; margin: 0 0 8px; color: var(--n800); }
.wcd-step p { font-size: 12pt; color: var(--n500); margin: 0; line-height: 1.5; }

/* ---- Stats ---- */
.wcd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: center; margin-top: 10px; }
.wcd-stat .stat-num {
  font-size: 42pt; font-weight: 800; line-height: 1.1;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wcd-stat .stat-label { font-size: 12pt; color: var(--n500); margin-top: 8px; line-height: 1.4; }

/* ---- Price hero ---- */
.wcd-price { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 4px; }
.wcd-price .amount {
  font-size: 58pt; font-weight: 800; line-height: 1; color: var(--blue);
}
.wcd-price .unit { font-size: 16pt; font-weight: 600; color: var(--n500); }

/* ---- Tag pills ---- */
.wcd-tags { display: flex; gap: 12px; flex-wrap: wrap; }
.wcd-tag {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--n200); border-radius: 999px; padding: 10px 20px;
  font-size: 12.5pt; font-weight: 600; color: var(--n700); background: #ffffff;
}
.wcd-tag i { color: var(--green); }
.on-dark .wcd-tag { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); color: #ffffff; }
.wcd-platform {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  border: 1.5px solid var(--n200); border-radius: 16px; padding: 22px 10px 16px;
  font-size: 12pt; font-weight: 700; color: var(--n700); background: #ffffff;
  min-width: 150px;
}
.wcd-platform i { font-size: 26pt; color: var(--blue); }
.wcd-platform-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* ---- Quote slides ---- */
.wcd-quote-mark { font-size: 56pt; line-height: 1; color: var(--teal); font-weight: 800; }
.wcd-quote-text { font-size: 21pt; line-height: 1.5; font-weight: 500; color: #ffffff !important; max-width: 1020px; margin-top: 14px; }
.wcd-quote-text .hl { color: var(--teal) !important; font-weight: 700; }
.wcd-attrib { display: flex; align-items: center; gap: 16px; margin-top: 36px; }
.wcd-attrib .avatar-dot {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--teal));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 14pt; flex-shrink: 0;
}
.wcd-attrib .who { font-weight: 700; font-size: 14pt; color: #ffffff !important; margin: 0; }
.wcd-attrib .role { font-size: 11.5pt; color: rgba(255, 255, 255, 0.6) !important; margin: 2px 0 0; }

/* ---- CTA button ---- */
.wcd-cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: #ffffff; color: var(--blue); font-weight: 700;
  border-radius: 12px; padding: 16px 30px; font-size: 14.5pt;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* =========================================================
   WebsiteCare.Direct — visual upgrade (aurora, EKG, layouts)
   ========================================================= */

/* ---- Living aurora for dark brand slides ----
   Targets reveal's full-viewport background layer so the glow
   fills the whole screen, not just the 1280x720 box. */
.reveal .backgrounds .slide-background.wcd-hero {
  overflow: hidden;
  background-color: #111827;
  background-image:
    linear-gradient(155deg, #1e293b 0%, #172033 46%, #0b1220 100%),
    radial-gradient(46% 58% at 24% 30%, rgba(37, 99, 235, 0.55) 0%, rgba(37, 99, 235, 0) 60%),
    radial-gradient(50% 60% at 80% 70%, rgba(6, 182, 212, 0.42) 0%, rgba(6, 182, 212, 0) 58%),
    radial-gradient(40% 48% at 62% 16%, rgba(16, 185, 129, 0.20) 0%, rgba(16, 185, 129, 0) 60%),
    radial-gradient(44% 52% at 14% 84%, rgba(30, 64, 175, 0.50) 0%, rgba(30, 64, 175, 0) 60%);
  background-repeat: no-repeat;
  background-size: 165% 165%, 170% 170%, 185% 185%, 180% 180%, 175% 175%;
  background-position: 0% 0%, 18% 22%, 84% 70%, 60% 12%, 12% 86%;
  animation:
    wcdAuraDrift 26s ease-in-out infinite alternate,
    wcdAuraPulse 11s ease-in-out infinite alternate;
}
.reveal .backgrounds .slide-background.wcd-hero::before {
  content: '';
  position: absolute; inset: -30%;
  background: radial-gradient(38% 38% at 50% 50%, rgba(56, 130, 246, 0.45) 0%, rgba(56, 130, 246, 0) 70%);
  mix-blend-mode: screen;
  animation: wcdGlowOrbit 17s ease-in-out infinite;
  pointer-events: none;
}
.reveal .backgrounds .slide-background.wcd-hero::after {
  content: '';
  position: absolute; inset: -60%;
  background: conic-gradient(from 0deg,
    rgba(6, 182, 212, 0) 0deg,
    rgba(6, 182, 212, 0.15) 68deg,
    rgba(37, 99, 235, 0) 150deg,
    rgba(16, 185, 129, 0.12) 238deg,
    rgba(6, 182, 212, 0) 320deg,
    rgba(6, 182, 212, 0) 360deg);
  mix-blend-mode: screen;
  animation: wcdSheenSpin 36s linear infinite;
  pointer-events: none;
}
@keyframes wcdAuraDrift {
  0%   { background-position: 0% 0%,   18% 22%, 84% 70%, 60% 12%, 12% 86%; }
  50%  { background-position: 100% 50%, 70% 64%, 30% 36%, 24% 60%, 78% 40%; }
  100% { background-position: 0% 100%, 34% 80%, 66% 22%, 80% 48%, 30% 18%; }
}
@keyframes wcdAuraPulse {
  0%   { filter: saturate(1) brightness(1); }
  100% { filter: saturate(1.2) brightness(1.09); }
}
@keyframes wcdGlowOrbit {
  0%   { transform: translate(-12%, -6%) scale(0.85); opacity: 0.50; }
  25%  { transform: translate(9%, -11%)  scale(1.06); opacity: 0.85; }
  50%  { transform: translate(15%, 9%)   scale(1.22); opacity: 1.00; }
  75%  { transform: translate(-7%, 13%)  scale(1.00); opacity: 0.80; }
  100% { transform: translate(-12%, -6%) scale(0.85); opacity: 0.50; }
}
@keyframes wcdSheenSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .reveal .backgrounds .slide-background.wcd-hero,
  .reveal .backgrounds .slide-background.wcd-hero::before,
  .reveal .backgrounds .slide-background.wcd-hero::after { animation: none; }
}

/* ---- Signature EKG heartbeat line (SVG background layer) ---- */
.reveal .backgrounds .slide-background.wcd-cta-bg {
  overflow: hidden;
  background-color: #111827;
  background-image:
    radial-gradient(55% 65% at 18% 20%, rgba(6, 182, 212, 0.28) 0%, rgba(6, 182, 212, 0) 60%),
    radial-gradient(60% 70% at 85% 85%, rgba(37, 99, 235, 0.40) 0%, rgba(37, 99, 235, 0) 62%);
}
.wcd-ekg {
  position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1;
}
.wcd-cta-bg .wcd-ekg { display: block; }
.wcd-ekg path {
  fill: none; stroke: url(#wcdEkgGrad); stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: wcdEkgDraw 4.2s ease-out forwards;
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.45));
}
@keyframes wcdEkgDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .wcd-ekg path { animation: none; stroke-dashoffset: 0; }
}

/* ---- Founder photo treatment ---- */
.wcd-founder {
  width: 250px; height: 250px; border-radius: 50%; object-fit: cover;
  border: 5px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

/* ---- Case-study phone frames ---- */
.wcd-shots { display: flex; gap: 40px; align-items: center; justify-content: center; }
.wcd-shot { text-align: center; }
.wcd-shot img {
  width: 430px; max-height: 268px; object-fit: cover; object-position: top;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  display: block;
}
.wcd-shot .shot-label { font-size: 12pt; font-weight: 600; color: rgba(255, 255, 255, 0.85); margin-top: 16px; }
.wcd-shot .shot-sub { font-size: 10.5pt; color: rgba(255, 255, 255, 0.55); margin-top: 4px; }

/* ---- Big-number problem slide (no cards — direct typography) ---- */
.wcd-problem-list { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 56px; margin-top: 34px; max-width: 1100px; }
.wcd-prob { display: flex; gap: 18px; align-items: flex-start; }
.wcd-prob .pnum {
  font-family: 'IBM Plex Mono', monospace; font-size: 15pt; font-weight: 600;
  color: var(--teal); border-bottom: 3px solid var(--teal); line-height: 1.4;
  padding-bottom: 2px; flex-shrink: 0;
}
.wcd-prob h3 { font-size: 17pt; margin: 0 0 6px; color: var(--n800); }
.wcd-prob p { font-size: 12.5pt; color: var(--n500); margin: 0; line-height: 1.5; }

/* ---- Split layout (text left, visual right) ---- */
.wcd-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: center; flex: 1; }
.wcd-split .split-copy { text-align: left; }

/* ---- Kicker chip (rounded label above headlines) ---- */
.wcd-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(37, 99, 235, 0.10); color: var(--blue);
  border: 1.5px solid rgba(37, 99, 235, 0.25); border-radius: 999px;
  padding: 8px 18px; font-size: 11.5pt; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 22px;
}
.on-dark .wcd-chip {
  background: rgba(6, 182, 212, 0.12); color: var(--teal);
  border-color: rgba(6, 182, 212, 0.35);
}
.wcd-chip i { font-size: 10.5pt; }

/* =========================================================
   Auto-play entrances: fire sequentially when slide becomes
   present. Replays on every revisit (animation unapplies when
   .present is removed). Overview/PDF/export forced to final state.
   ========================================================= */
.reveal .slides section .auto-in { opacity: 0; transform: translateY(26px); }
.reveal .slides section .auto-in.auto-pop { transform: scale(0.86); }
.reveal .slides section.present .auto-in.auto-rise {
  animation: wcdAutoRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--d, 0s);
}
.reveal .slides section.present .auto-in.auto-pop {
  animation: wcdAutoPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes wcdAutoRise { to { opacity: 1; transform: translateY(0); } }
@keyframes wcdAutoPop  { to { opacity: 1; transform: scale(1); } }

/* EKG draws on slide entry */
.reveal .slides section .wcd-ekg path { animation: none; stroke-dashoffset: 1400; }
.reveal .slides section.present .wcd-ekg path { animation: wcdEkgDraw 4.2s 0.6s ease-out forwards; }

/* Overview grid: show final state */
.reveal.overview .slides section .auto-in { opacity: 1 !important; transform: none !important; animation: none !important; }

/* PDF export (print-pdf mode): everything at final state */
html.print-pdf .slides section .auto-in,
html.pdf .slides section .auto-in { opacity: 1 !important; transform: none !important; animation: none !important; }
html.print-pdf .slides section .wcd-ekg path,
html.pdf .slides section .wcd-ekg path { animation: none; stroke-dashoffset: 0; }
@media print {
  .reveal .slides section .auto-in { opacity: 1 !important; transform: none !important; animation: none !important; }
  .reveal .slides section .wcd-ekg path { animation: none; stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal .slides section .auto-in { opacity: 1; transform: none; animation: none; }
  .reveal .slides section .wcd-ekg path { animation: none; stroke-dashoffset: 0; }
}

/* =========================================================
   Imagery: problem illustrations, avatars, growth visual
   ========================================================= */
.wcd-prob .pimg {
  width: 88px; height: 88px; border-radius: 18px; object-fit: cover;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.14);
  flex-shrink: 0;
}
.wcd-attrib .avatar-img {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}
.wcd-growth-visual {
  width: 100%; max-width: 480px; border-radius: 18px; display: block;
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.18);
  border: 1px solid var(--n200);
}

/* =========================================================
   Image-first layouts — visuals at full scale
   ========================================================= */

/* Problem: two big illustration cards, magazine style */
.wcd-prob-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; }
.wcd-prob-card {
  display: flex; gap: 22px; align-items: center;
  background: #ffffff; border: 1px solid var(--n200); border-radius: 18px;
  padding: 22px 26px; box-shadow: 0 8px 26px rgba(17, 24, 39, 0.08);
}
.wcd-prob-card img { width: 150px; height: 150px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.wcd-prob-card h3 { font-size: 18pt; margin: 0 0 8px; color: var(--n800); }
.wcd-prob-card p { font-size: 12.5pt; color: var(--n500); margin: 0; line-height: 1.5; }
.wcd-prob-card .pcard-num {
  font-family: 'IBM Plex Mono', monospace; font-size: 11pt; font-weight: 600;
  color: var(--blue); letter-spacing: 0.14em; margin-bottom: 8px;
}

/* How it works: full-width illustration + overlay steps */
.wcd-hiw-visual {
  width: 100%; border-radius: 18px; display: block; object-fit: cover;
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.22);
}
.wcd-hiw-band {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: -70px;
  padding: 0 30px; position: relative; z-index: 3;
}
.wcd-hiw-band .wcd-step { background: #ffffff; box-shadow: 0 18px 44px rgba(17, 24, 39, 0.18); }

/* Working with us: growth illustration as right panel */
.wcd-growth-panel {
  border-radius: 20px; overflow: hidden; position: relative;
  box-shadow: 0 28px 70px rgba(17, 24, 39, 0.20);
}
.wcd-growth-panel img { width: 100%; display: block; }
.wcd-growth-panel .panel-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(17, 24, 39, 0.88) 40%);
  padding: 60px 26px 22px; color: #fff;
}
.wcd-growth-panel .panel-cap .cap-big { font-size: 17pt; font-weight: 700; margin: 0; }
.wcd-growth-panel .panel-cap .cap-sub { font-size: 11.5pt; color: rgba(255,255,255,0.75); margin: 4px 0 0; }

/* Case studies: big framed screenshots, before/after */
.wcd-case { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 28px; }
.wcd-case-item { text-align: center; }
.wcd-case-frame {
  border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); background: #0b1220;
  position: relative;
}
.wcd-case-frame img { width: 100%; display: block; }
.wcd-case-frame .frame-bar {
  height: 30px; background: rgba(255,255,255,0.08);
  display: flex; align-items: center; gap: 7px; padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.wcd-case-frame .frame-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.35); }
.wcd-case-frame .frame-bar .frame-url {
  margin-left: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 9.5pt;
  color: rgba(255,255,255,0.55); letter-spacing: 0.04em;
}
.wcd-case-label { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding: 0 6px; }
.wcd-case-label .case-name { font-size: 14pt; font-weight: 700; color: #fff; margin: 0; }
.wcd-case-label .case-desc { font-size: 10.5pt; color: rgba(255,255,255,0.55); margin: 0; }

/* Avatar size up: testimonials deserve real presence */
.wcd-attrib .avatar-img { width: 64px; height: 64px; }

/* =========================================================
   Full visual coverage — every slide gets a dominant visual
   ========================================================= */

/* Services: three tall image panels with caption plates */
.wcd-svc-panel {
  border-radius: 18px; overflow: hidden; position: relative;
  background: #0b1220; box-shadow: 0 20px 50px rgba(17, 24, 39, 0.18);
  display: flex; flex-direction: column;
}
.wcd-svc-panel img { width: 100%; height: 240px; object-fit: cover; display: block; }
.wcd-svc-panel .svc-plate { padding: 18px 20px 16px; background: #ffffff; flex: 1; }
.wcd-svc-panel .svc-plate h3 { font-size: 16pt; margin: 0 0 8px; color: var(--n800); }
.wcd-svc-panel .svc-plate ul { margin: 0; }
.wcd-svc-panel .svc-plate li { font-size: 11pt; margin-bottom: 5px; color: var(--n600); }
.wcd-svc-panel .svc-plate li::before { width: 6px; height: 6px; }
.wcd-svc-panel.p-blue li::before { background: var(--blue) !important; }
.wcd-svc-panel.p-teal li::before { background: var(--teal) !important; }
.wcd-svc-panel.p-green li::before { background: var(--green) !important; }
.wcd-svc-panel .svc-tag {
  position: absolute; top: 14px; left: 14px;
  background: rgba(17, 24, 39, 0.72); backdrop-filter: blur(6px);
  color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 9.5pt;
  letter-spacing: 0.12em; padding: 6px 12px; border-radius: 8px; font-weight: 600;
}

/* Pricing: dark panel with screenshot + price overlay */
.wcd-pricing-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: center; flex: 1; }
.wcd-price-card {
  border-radius: 20px; overflow: hidden; position: relative;
  box-shadow: 0 28px 70px rgba(17, 24, 39, 0.22);
}
.wcd-price-card img { width: 100%; display: block; }
.wcd-price-card .price-plate {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(17,24,39,0.92) 0%, rgba(17,24,39,0.55) 52%, rgba(17,24,39,0.1) 100%);
  display: flex; flex-direction: column; justify-content: center; padding: 40px;
}
.wcd-price-card .price-plate .amount {
  font-size: 62pt; font-weight: 800; line-height: 1; color: #fff;
}
.wcd-price-card .price-plate .amount small { font-size: 20pt; font-weight: 600; color: rgba(255,255,255,0.7); }
.wcd-price-card .price-plate .plate-sub { font-size: 13pt; color: rgba(255,255,255,0.75); margin-top: 14px; max-width: 380px; line-height: 1.5; }

/* Results: before/after pairs with arrow */
.wcd-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 26px; }
.wcd-ba-pair { }
.wcd-ba-pair .pair-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5pt; font-weight: 600;
  letter-spacing: 0.14em; margin-bottom: 10px; color: rgba(255,255,255,0.6);
}
.wcd-ba-pair .pair-label .to { color: var(--teal); }
.wcd-ba-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wcd-shot-frame {
  border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 18px 44px rgba(0,0,0,0.4); background: #0b1220;
}
.wcd-shot-frame img { width: 100%; display: block; height: 200px; object-fit: cover; object-position: top; }
.wcd-shot-frame .shot-tag {
  position: absolute; margin: 10px; padding: 4px 10px; border-radius: 6px;
  background: rgba(17, 24, 39, 0.78); color: rgba(255,255,255,0.9);
  font-family: 'IBM Plex Mono', monospace; font-size: 8.5pt; letter-spacing: 0.12em; font-weight: 600;
}
.wcd-ba-name { margin-top: 14px; font-size: 14pt; font-weight: 700; color: #fff; text-align: center; }
.wcd-ba-sub { font-size: 10.5pt; color: rgba(255,255,255,0.55); text-align: center; margin-top: 4px; }

/* Platforms: screenshot backdrop panel */
.wcd-platform-visual {
  border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 26px 60px rgba(0,0,0,0.45); margin-top: 34px;
}
.wcd-platform-visual img { width: 100%; display: block; height: 300px; object-fit: cover; object-position: top; }

/* Title: product screenshot card floating right of hero text */
.wcd-title-grid { display: grid; grid-template-columns: 1.05fr 0.9fr; gap: 50px; align-items: center; width: 100%; }
.wcd-title-shot {
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 40px 90px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  transform: perspective(1200px) rotateY(-8deg) rotateX(2deg);
}
.wcd-title-shot img { width: 100%; display: block; }

/* =========================================================
   Course deck additions: quiz + self-audit interaction
   ========================================================= */

/* ---- Quiz options ---- */
.quiz-opts { display: grid; gap: 14px; margin-top: 22px; max-width: 1050px; }
.quiz-opt {
  display: flex; align-items: flex-start; gap: 16px;
  background: rgba(255, 255, 255, 0.07); border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px; padding: 16px 20px; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.quiz-opt:hover { border-color: rgba(6, 182, 212, 0.5); transform: translateX(4px); }
.quiz-opt .opt-letter {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12pt; color: #fff;
}
.quiz-opt p { margin: 2px 0 0; font-size: 12.5pt; color: rgba(255,255,255,0.85); line-height: 1.45; }
.quiz-opt .opt-why { display: none; font-size: 11pt; color: rgba(255,255,255,0.6); margin-top: 8px; }
.quiz-opt .why-line { display: none; font-size: 11pt; color: rgba(255,255,255,0.65); margin-top: 8px; }
.quiz-opt .opt-verdict { display: none; font-size: 10.5pt; font-weight: 800; letter-spacing: 0.1em; margin-top: 8px; }

/* correct pick */
.quiz-opt.correct { border-color: var(--green); background: rgba(16, 185, 129, 0.14); }
.quiz-opt.correct .opt-letter { background: var(--green); color: #fff; }
.quiz-opt.correct .opt-why, .quiz-opt.correct .opt-why-show { display: block; }
.quiz-opt.correct .opt-why-show { display: block; }
.quiz-opt.correct .why-line { display: block; font-size: 11pt; color: rgba(255,255,255,0.65); margin-top: 8px; }
/* wrong pick */
.quiz-opt.wrong { border-color: #ef4444; background: rgba(239, 68, 68, 0.12); animation: wcdShake 0.4s ease; }
.quiz-opt.wrong .opt-letter { background: #ef4444; }
.quiz-opt.wrong .why-line { display: block; font-size: 11pt; color: rgba(255,255,255,0.65); margin-top: 8px; }
@keyframes wcdShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

/* once answered, lock the others */
.quiz.locked .quiz-opt { pointer-events: none; opacity: 0.55; }
.quiz-opt.correct, .quiz-opt.wrong.correct { opacity: 1; }
.quiz-opt.picked { opacity: 1 !important; }

/* ---- Self-audit checklist ---- */
.audit-list { display: grid; gap: 12px; margin-top: 20px; max-width: 1000px; }
.audit-item {
  display: flex; align-items: center; gap: 16px;
  background: #ffffff; border: 1.5px solid var(--n200); border-radius: 12px;
  padding: 13px 18px; cursor: pointer; user-select: none;
  transition: border-color 0.2s, background 0.2s;
}
.audit-item:hover { border-color: var(--blue); }
.audit-item .audit-box {
  width: 26px; height: 26px; border-radius: 7px; border: 2.5px solid var(--n300);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 12pt; transition: all 0.2s;
}
.audit-item.done .audit-item-check { }
.audit-item.done .box-i { display: block; }
.audit-item .box-i { display: none; color: var(--green); font-size: 13pt; }
.audit-item p { margin: 0; font-size: 12.5pt; color: var(--n700); }
.audit-item.done { border-color: var(--green); background: rgba(16, 185, 129, 0.06); }
.audit-item.done p { color: var(--n500); }
.audit-score {
  margin-top: 22px; display: inline-flex; align-items: baseline; gap: 14px;
  background: linear-gradient(135deg, var(--blue), var(--teal)); color: #fff;
  border-radius: 14px; padding: 14px 26px; opacity: 0; transition: opacity 0.4s;
}
.audit-score.show { opacity: 1; }
.audit-score .score-num { font-size: 26pt; font-weight: 800; }
.audit-score .score-label { font-size: 11.5pt; font-weight: 600; color: rgba(255,255,255,0.85); }

/* ---- Flip cards (myth vs fact) ---- */
.flip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.flip-card { perspective: 900px; cursor: pointer; }
.flip-inner { position: relative; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); transform-style: preserve-3d; }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 16px; padding: 22px 20px; min-height: 190px;
  display: flex; flex-direction: column; justify-content: center;
}
.flip-front {
  background: #ffffff; border: 1.5px solid var(--n200); box-shadow: 0 10px 28px rgba(17,24,39,0.1);
}
.flip-front .myth-tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5pt; letter-spacing: 0.14em;
  color: var(--blue); font-weight: 600; margin-bottom: 12px;
}
.flip-front p { font-size: 13.5pt; font-weight: 700; color: var(--n800); margin: 0; line-height: 1.4; }
.flip-front .tap-hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 9.5pt; color: var(--n400); }
.flip-back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--blue), var(--teal)); color: #fff;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.35);
}
.flip-back .fact-tag { font-family: 'IBM Plex Mono', monospace; font-size: 9.5pt; letter-spacing: 0.14em; color: rgba(255,255,255,0.8); font-weight: 600; margin-bottom: 12px; }
.flip-back p { font-size: 11.5pt; color: #fff; margin: 0; line-height: 1.5; }

/* progress chips (course nav) */
.course-meta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10pt; letter-spacing: 0.14em;
  color: #9ca3af; text-transform: uppercase;
}
/* Visual hierarchy inside the meta line: course name emphasized, position bright, time muted */
.course-meta .meta-course { color: #22d3ee; font-weight: 700; }
.course-meta .meta-sep { color: #4b5563; }
.course-meta .meta-position { color: #e5e7eb; font-weight: 600; }
.course-meta .meta-time { color: #9ca3af; }

/* =========================================================
   Course deck additions: quiz + self-audit interaction
   ========================================================= */

/* ---- Quiz options ---- */
.quiz-opts { display: grid; gap: 14px; margin-top: 22px; max-width: 1050px; }
.quiz-opt {
  display: flex; align-items: flex-start; gap: 16px;
  background: rgba(255, 255, 255, 0.07); border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px; padding: 16px 20px; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.quiz-opt:hover { border-color: rgba(6, 182, 212, 0.5); transform: translateX(4px); }
.quiz-opt .opt-letter {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12pt; color: #fff;
}
.quiz-opt p { margin: 2px 0 0; font-size: 12.5pt; color: rgba(255,255,255,0.85); line-height: 1.45; }
.quiz-opt .opt-why { display: none; font-size: 11pt; color: rgba(255,255,255,0.6); margin-top: 8px; }
.quiz-opt .why-line { display: none; font-size: 11pt; color: rgba(255,255,255,0.65); margin-top: 8px; }
.quiz-opt .opt-verdict { display: none; font-size: 10.5pt; font-weight: 800; letter-spacing: 0.1em; margin-top: 8px; }

/* correct pick */
.quiz-opt.correct { border-color: var(--green); background: rgba(16, 185, 129, 0.14); }
.quiz-opt.correct .opt-letter { background: var(--green); color: #fff; }
.quiz-opt.correct .opt-why, .quiz-opt.correct .opt-why-show { display: block; }
.quiz-opt.correct .opt-why-show { display: block; }
.quiz-opt.correct .why-line { display: block; font-size: 11pt; color: rgba(255,255,255,0.65); margin-top: 8px; }
/* wrong pick */
.quiz-opt.wrong { border-color: #ef4444; background: rgba(239, 68, 68, 0.12); animation: wcdShake 0.4s ease; }
.quiz-opt.wrong .opt-letter { background: #ef4444; }
.quiz-opt.wrong .why-line { display: block; font-size: 11pt; color: rgba(255,255,255,0.65); margin-top: 8px; }
@keyframes wcdShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

/* once answered, lock the others */
.quiz.locked .quiz-opt { pointer-events: none; opacity: 0.55; }
.quiz-opt.correct, .quiz-opt.wrong.correct { opacity: 1; }
.quiz-opt.picked { opacity: 1 !important; }

/* ---- Self-audit checklist ---- */
.audit-list { display: grid; gap: 12px; margin-top: 20px; max-width: 1000px; }
.audit-item {
  display: flex; align-items: center; gap: 16px;
  background: #ffffff; border: 1.5px solid var(--n200); border-radius: 12px;
  padding: 13px 18px; cursor: pointer; user-select: none;
  transition: border-color 0.2s, background 0.2s;
}
.audit-item:hover { border-color: var(--blue); }
.audit-item .audit-box {
  width: 26px; height: 26px; border-radius: 7px; border: 2.5px solid var(--n300);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 12pt; transition: all 0.2s;
}
.audit-item.done .audit-item-check { }
.audit-item.done .box-i { display: block; }
.audit-item .box-i { display: none; color: var(--green); font-size: 13pt; }
.audit-item p { margin: 0; font-size: 12.5pt; color: var(--n700); }
.audit-item.done { border-color: var(--green); background: rgba(16, 185, 129, 0.06); }
.audit-item.done p { color: var(--n500); }
.audit-score {
  margin-top: 22px; display: inline-flex; align-items: baseline; gap: 14px;
  background: linear-gradient(135deg, var(--blue), var(--teal)); color: #fff;
  border-radius: 14px; padding: 14px 26px; opacity: 0; transition: opacity 0.4s;
}
.audit-score.show { opacity: 1; }
.audit-score .score-num { font-size: 26pt; font-weight: 800; }
.audit-score .score-label { font-size: 11.5pt; font-weight: 600; color: rgba(255,255,255,0.85); }

/* ---- Flip cards (myth vs fact) ---- */
.flip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.flip-card { perspective: 900px; cursor: pointer; }
.flip-inner { position: relative; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); transform-style: preserve-3d; }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 16px; padding: 22px 20px; min-height: 190px;
  display: flex; flex-direction: column; justify-content: center;
}
.flip-front {
  background: #ffffff; border: 1.5px solid var(--n200); box-shadow: 0 10px 28px rgba(17,24,39,0.1);
}
.flip-front .myth-tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5pt; letter-spacing: 0.14em;
  color: var(--blue); font-weight: 600; margin-bottom: 12px;
}
.flip-front p { font-size: 13.5pt; font-weight: 700; color: var(--n800); margin: 0; line-height: 1.4; }
.flip-front .tap-hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 9.5pt; color: var(--n400); }
.flip-back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--blue), var(--teal)); color: #fff;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.35);
}
.flip-back .fact-tag { font-family: 'IBM Plex Mono', monospace; font-size: 9.5pt; letter-spacing: 0.14em; color: rgba(255,255,255,0.8); font-weight: 600; margin-bottom: 12px; }
.flip-back p { font-size: 11.5pt; color: #fff; margin: 0; line-height: 1.5; }

/* progress chips (course nav) */
.course-meta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10pt; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.55); text-transform: uppercase;
}

/* =========================================================
   WCAG 2.1 AA contrast fixes (audited Sep 16, 2026)
   ========================================================= */

/* 1. Teal/green as TEXT on white failed (2.4/2.5) → ink variants for text use;
      raw teal/green stay for dark-bg accents (7.3/7.0 — pass) and decorative bars */
:root { --teal-text: #0e7490; --green-text: #047857; --blue-text: #1d4ed8; }

/* 2. Light-slide muted text bumped 0.55 -> 0.64 (3.96 -> 5.33) */
.reveal .slides section .text-muted { color: rgba(17, 24, 39, 0.64) !important; }

/* 3. Service outcome strongs were teal/green on white -> ink variants */
.wcd-outcome strong { color: var(--teal-text) !important; }
.wcd-service.svc-green .wcd-outcome strong { color: var(--green-text) !important; }

/* 4. Stat gradient bottom end too light -> darker gradient (both ends AA-large) */
.wcd-stat .stat-num,
.wcd-price .amount { background: linear-gradient(135deg, #1d4ed8 0%, #0e7490 100%); -webkit-background-clip: text; background-clip: text; }

/* 5. tap-hint / faint hints n400 -> n500 */
.flip-front .tap-hint { color: var(--n500) !important; }
.wcd-chip { color: var(--blue-text); border-color: rgba(29, 78, 216, 0.3); background: rgba(29, 78, 216, 0.08); }

/* 6. Tag/check icons in white pills -> green ink */
.wcd-tag i { color: var(--green-text) !important; }

/* 7. Quiz wrong-state: white on #ef4444 failed (3.76) -> darker plate */
.quiz-opt.wrong { border-color: #b91c1c; background: rgba(185, 28, 28, 0.16); }
.quiz-opt.wrong .opt-letter { background: #b91c1c; }

/* 8. Audit score badge: gradient ends at AA-safe stops */
.audit-score { background: linear-gradient(135deg, #1d4ed8, #0e7490); }

/* CTA pill: white text on --blue passes (5.17); keep.
   Blue/teal gradient accents on DARK slides unchanged — all pass there (6.0-7.3). */

/* =========================================================
   CASCADE FIX — white-surface components on dark slides.
   Base .on-dark rules (higher/equal specificity) were forcing
   white text onto white card surfaces. Pin dark text with
   !important so cascade order can never invert these again.
   ========================================================= */
.reveal .slides section .wcd-prob-card h3 { color: #1f2937 !important; }
.reveal .slides section .wcd-prob-card p { color: #4b5563 !important; }
.reveal .slides section .wcd-prob-card .pcard-num { color: #1d4ed8 !important; }
.reveal .slides section .wcd-svc-panel .svc-plate h3 { color: #1f2937 !important; }
.reveal .slides section .wcd-svc-panel .svc-plate li { color: #4b5563 !important; }
.reveal .slides section .wcd-svc-panel .svc-plate p { color: #1f2937 !important; }
.reveal .slides section .wcd-svc-panel .svc-plate p strong { color: #111827 !important; }
.reveal .slides section .flip-face.flip-front p { color: #1f2937 !important; }
.reveal .slides section .flip-front .myth-tag { color: #1d4ed8 !important; }
.reveal .slides section .flip-front .tap-hint { color: #6b7280 !important; }
.reveal .slides section .audit-item p { color: #374151 !important; }
.reveal .slides section .wcd-step h3 { color: #1f2937 !important; }
.reveal .slides section .wcd-step p { color: #4b5563 !important; }
.reveal .slides section .wcd-prob-card,
.reveal .slides section .wcd-svc-panel .svc-plate,
.reveal .slides section .flip-face.flip-front,
.reveal .slides section .audit-item,
.reveal .slides section .wcd-step { background: #ffffff; }
/* dark-surface components keep their white text (declared here last so intent is explicit) */
.reveal .slides section.on-dark .wcd-card h3 { color: #ffffff !important; }
.reveal .slides section.on-dark .wcd-card p { color: rgba(255,255,255,0.65) !important; }

/* round-2 parity fixes */
.reveal .slides section .step-num { background: linear-gradient(135deg, #1d4ed8, #0e7490); }
.reveal .slides section .svc-tag { color: #ffffff !important; }
.reveal .slides section .shot-tag { color: rgba(255,255,255,0.95) !important; font-size: 10pt !important; }
.reveal .slides section.on-dark .wcd-chip { color: var(--teal) !important; }

/* =========================================================
   Module 3 additions: fake-email mockups, stat stack, rule
   steps, decode walkthrough
   ========================================================= */

/* ---- Fake email mockup (the recurring villain) ---- */
.fake-email {
  background: #ffffff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.08);
  padding: 22px 26px 24px; max-width: 520px;
  transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
}
.fake-email .fe-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.fake-email .fe-from {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5pt; color: #57606c;
  background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 6px; padding: 4px 10px;
}
.fake-email .fe-time { font-size: 10pt; color: #5d6672; }
.fake-email .fe-subj { font-size: 14.5pt; font-weight: 700; color: #1f2937; margin-bottom: 10px; }
.fake-email .fe-body { font-size: 12pt; color: #4b5563; line-height: 1.55; margin-bottom: 14px; }
.fake-email .fe-cta {
  display: inline-block; background: linear-gradient(135deg, #1d4ed8, #0e7490); color: #fff;
  font-size: 12pt; font-weight: 700; border-radius: 10px; padding: 10px 22px; margin-bottom: 14px;
}
.fake-email .fe-hot { color: #b91c1c; font-weight: 800; }
.fake-email .fe-hl { color: #1f2937; font-weight: 700; }
.fake-email .fe-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.fake-email .fe-field {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5pt; color: #374151;
  border: 1.5px solid #d1d5db; border-radius: 8px; padding: 9px 14px; background: #f9fafb;
}
.fake-email .fe-hover {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 10.5pt; color: #6b7280; background: #f9fafb;
  border: 1px dashed #d1d5db; border-radius: 8px; padding: 8px 12px; margin-bottom: 14px;
}
.fake-email .fe-hover .fe-url { font-family: 'IBM Plex Mono', monospace; color: #b91c1c; font-weight: 600; }
.fake-email .fe-flag {
  display: flex; align-items: center; gap: 9px;
  background: rgba(185, 28, 28, 0.08); border: 1.5px solid rgba(185, 28, 28, 0.35);
  border-radius: 8px; padding: 8px 12px; font-size: 10.5pt; font-weight: 600; color: #b91c1c;
}
.fake-email .fe-flag i { font-size: 11pt; }
.fake-email-mini { transform: none; padding: 18px 20px 20px; }
.fake-email-mini .fe-bar {
  display: flex; align-items: center; gap: 6px; margin-bottom: 14px;
}
.fake-email-mini .fe-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(17, 24, 39, 0.16); }
.fake-email-mini .fe-bar em {
  font-family: 'IBM Plex Mono', monospace; font-style: normal; font-size: 9.5pt;
  letter-spacing: 0.1em; color: #6b7280; margin-left: 8px; text-transform: uppercase;
}
.fake-email-mini .fe-row { margin-bottom: 8px; }
.fake-email-mini .fe-from { font-size: 9.5pt; }
.fake-email-mini .fe-subj { font-size: 12.5pt; margin-bottom: 8px; }
.fake-email-mini .fe-body { font-size: 10.5pt; margin-bottom: 0; }

/* ---- Numbered agenda list (reuses wcd-prob pattern without image) ---- */
.wcd-prob-list { display: grid; gap: 22px; }
.wcd-prob-list .wcd-prob h3 { font-size: 17pt; margin: 0 0 6px; color: #ffffff !important; }
.wcd-prob-list .wcd-prob p { font-size: 12.5pt; color: rgba(255, 255, 255, 0.65) !important; margin: 0; line-height: 1.5; }

/* ---- Stat stack (stakes slide) ---- */
.stat-stack { display: flex; flex-direction: column; gap: 20px; max-width: 460px; }
.stat-block {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px; padding: 24px 28px;
  border-left: 5px solid var(--teal);
}
.stat-block .stat-big {
  display: block; font-size: 44pt; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #1d4ed8, #0e7490);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 10px;
}
.stat-block .stat-cap { font-size: 12pt; color: rgba(255, 255, 255, 0.72); line-height: 1.5; }

/* ---- Rule steps (the one rule slide) ---- */
.rule-steps { display: grid; gap: 14px; margin-top: 28px; max-width: 900px; }
.rule-step {
  display: flex; align-items: flex-start; gap: 18px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px; padding: 16px 22px;
}
.rule-step .rnum {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #1d4ed8, #0e7490); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 14pt; font-weight: 700;
}
.rule-step p { margin: 4px 0 0; font-size: 13.5pt; color: rgba(255, 255, 255, 0.85); line-height: 1.5; }
.rule-step p strong { color: #ffffff; }

/* ---- Decode walkthrough (email + legend) ---- */
.decode-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; margin-top: 20px; }
.decode-email { transform: none; max-width: none; }
.decode-email .deco {
  border-bottom: 2.5px dashed #b91c1c; cursor: pointer; padding-bottom: 1px;
  transition: background 0.2s ease;
}
.decode-email .deco:hover, .decode-email .deco.active { background: rgba(185, 28, 28, 0.12); }
.decode-legend { display: grid; gap: 12px; }
.decode-item {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, 0.07); border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px; padding: 12px 18px; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.decode-item:hover { border-color: rgba(6, 182, 212, 0.5); }
.decode-item.active { border-color: var(--teal); background: rgba(6, 182, 212, 0.12); }
.decode-item p { margin: 0; font-size: 12.5pt; color: rgba(255, 255, 255, 0.85); line-height: 1.4; }
.decode-item .opt-letter { background: #b91c1c; }

/* ---- Keyboard/AT access for interactive elements ---- */
.quiz-opt, .decode-item, .decode-email .deco { -webkit-tap-highlight-color: transparent; }
.decode-email .deco { user-select: none; }

/* =========================================================
   Motion + spacing fixes (David review, Sep 16 2026)
   ========================================================= */

/* 1. MOTION OFF — freeze every looping animation */
.wcd-mark svg { animation: none !important; }
.reveal .backgrounds .slide-background.wcd-hero,
.reveal .backgrounds .slide-background.wcd-hero::before,
.reveal .backgrounds .slide-background.wcd-hero::after,
.reveal .backgrounds .slide-background.wcd-cta-bg,
.reveal .backgrounds .slide-background.wcd-cta-bg::before,
.reveal .backgrounds .slide-background.wcd-cta-bg::after { animation: none !important; }
.wcd-ekg path { animation: none !important; stroke-dashoffset: 0 !important; }

/* Entrance animations: instant appearance, no rise/pop */
.reveal .slides section .auto-in { opacity: 1 !important; transform: none !important; animation: none !important; }

/* 2. SPACING — wider gutters, calmer vertical rhythm */
:root {
  --slide-padding: 88px;
  --slide-padding-top: 48px;
  --content-gap: 26px;
}

/* Quiz hover: keep feedback, drop the shoving motion */
.quiz-opt:hover { transform: none; }
@keyframes wcdShake { 0%,100%{transform:translateX(0)} }

/* =========================================================
   FLAT BACKGROUND STANDARD (David review 2, Sep 16 2026)
   One flat dark surface. No gradients. No transparency.
   Every card is solid ink with a visible border.
   ========================================================= */

/* 1. Flatten every background: one color, no images, no pseudo layers */
.reveal .backgrounds .slide-background {
  background-color: #111827 !important;
  background-image: none !important;
}
.reveal .backgrounds .slide-background::before,
.reveal .backgrounds .slide-background::after { display: none !important; }

/* 2. Cards: translucent white → solid ink + visible border */
.quiz-opt {
  background: #1f2937 !important;
  border: 2px solid #374151 !important;
}
.decode-item {
  background: #1f2937 !important;
  border: 2px solid #374151 !important;
}
.rule-step {
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
}
.stat-block {
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
  border-left: 5px solid var(--teal) !important;
}
.quiz-opt:hover { border-color: var(--teal) !important; background: #243044 !important; }
.decode-item:hover { border-color: var(--teal) !important; }
.decode-item.active { border-color: var(--teal) !important; background: #1e3a4a !important; }

/* 3. Solid-state feedback colors (no alpha over unknown bg) */
.quiz-opt.correct { background: #143d2e !important; border-color: #10b981 !important; }
.quiz-opt.wrong { background: #3d1519 !important; border-color: #ef4444 !important; }
.quiz.locked .quiz-opt { opacity: 1 !important; }
.quiz.locked .quiz-opt:not(.correct):not(.wrong):not(.picked) { opacity: 0.5 !important; }

/* 4. Chips/eyebrows solid */
.wcd-chip {
  background: #1e3a4a !important;
  color: #22d3ee !important;
  border: 1.5px solid rgba(34, 211, 238, 0.4) !important;
}
.reveal .slides section.on-dark .wcd-chip { color: #22d3ee !important; }

/* 5. Stat numbers: flat bright color instead of gradient-clip text */
.stat-big { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #60a5fa !important; }
.stat-num, .wcd-stat .stat-num { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #60a5fa !important; }

/* 6. Step number + rnum circles: solid flat */
.rnum { background: #2563eb !important; }
.step-num { background: #2563eb !important; }

/* 7. Body text on ink: opaque grays only (no rgba on text) */
.reveal .slides section.on-dark p,
.reveal .slides section.on-dark li { color: #e5e7eb !important; }
.reveal .slides section.on-dark h1,
.reveal .slides section.on-dark h2,
.reveal .slides section.on-dark h3 { color: #ffffff !important; }
.reveal .slides section.on-dark .footnote { color: #9ca3af !important; }
.wcd-prob-list .wcd-prob p { color: #cbd5e1 !important; }
.wcd-prob-list .wcd-prob h3 { color: #ffffff !important; }
.split-copy p { color: #cbd5e1 !important; }

/* teal accents on dark: bright cyan for contrast */
.reveal .slides section.on-dark h1 span[style*="teal"],
.reveal .slides section.on-dark h2 span[style*="teal"] { color: #22d3ee !important; }
.pnum, .wcd-prob .pnum { color: #22d3ee !important; border-bottom-color: #22d3ee !important; }

/* 8. Fake-email CTA button + flags stay saturated */
.fake-email .fe-cta { background: #2563eb !important; }

/* 9. Logo text + brackets */
.on-dark .wcd-logo .bracket { color: #6b7280 !important; }

/* =========================================================
   Lesson badge (title card): course chip + quiet meta caption.
   Replaces the tri-color course-meta line (redesigned Sep 16).
   Uses existing design language: wcd-chip look, muted caption.
   ========================================================= */
.lesson-badge-row {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.lesson-course-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: #1e3a4a; border: 1.5px solid rgba(34, 211, 238, 0.4);
  color: #22d3ee; border-radius: 999px; padding: 8px 18px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10pt; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.lesson-course-chip i { font-size: 10.5pt; }
.lesson-badge-meta {
  font-family: Inter, Helvetica, sans-serif; font-size: 11.5pt; font-weight: 500;
  color: #9ca3af; letter-spacing: 0.02em;
}

/* =========================================================
   Module 1 additions: damage cards, fake browser/serp/data props
   (re-applied Sep 16 — was clobbered by a bad stylesheet sync)
   ========================================================= */

/* ---- 4-damage overview grid ---- */
.damage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; margin-top: 30px; max-width: 1060px; }
.damage-card {
  background: #1f2937; border: 2px solid #374151; border-radius: 14px;
  padding: 20px 24px; display: flex; gap: 16px; align-items: flex-start;
}
.damage-card .dnum {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: #2563eb; color: #ffffff; display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 14pt; font-weight: 700;
}
.damage-card h3 { font-size: 15.5pt; margin: 0 0 5px; color: #ffffff !important; }
.damage-card p { margin: 0; font-size: 11.5pt; color: #cbd5e1 !important; line-height: 1.45; }

/* ---- Fake browser (redirect prop) ---- */
.fake-browser {
  background: #ffffff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.08);
  max-width: 500px; padding: 0 0 18px;
}
.fake-browser .fe-bar {
  display: flex; align-items: center; gap: 6px; padding: 12px 16px;
  background: #f3f4f6; border-bottom: 1px solid #e5e7eb;
}
.fake-browser .fe-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(17, 24, 39, 0.16); }
.fake-browser .fe-bar em {
  font-family: 'IBM Plex Mono', monospace; font-style: normal; font-size: 10pt;
  color: #5d6672 !important; margin-left: 10px; background: #fff; border: 1px solid #e5e7eb;
  border-radius: 6px; padding: 3px 12px;
}
.fake-browser .fb-body { padding: 22px 24px 6px; }
.reveal .slides section .fake-browser .fe-loading { color: #5d6672 !important; font-size: 11.5pt; margin: 0 0 14px; }
.fake-browser .fe-redirect {
  display: flex; align-items: center; gap: 9px; font-size: 11pt; color: #5d6672;
  background: #f9fafb; border: 1px dashed #d1d5db; border-radius: 8px; padding: 10px 12px;
}
.fake-browser .fe-redirect .fe-url { font-family: 'IBM Plex Mono', monospace; color: #b91c1c; font-weight: 600; }

/* ---- Fake SERP (Google warning prop) ---- */
.fake-serp {
  background: #ffffff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.08);
  max-width: 500px; padding: 24px 26px;
}
.fake-serp .serp-row { margin-bottom: 12px; }
.fake-serp .serp-url { font-size: 10pt; color: #5d6672 !important; }
.fake-serp .serp-title { color: #1a0dab; font-size: 14.5pt; font-weight: 500; margin: 3px 0 4px; }
.fake-serp .serp-snippet { font-size: 11pt; color: #4b5563; line-height: 1.45; }
.fake-serp .serp-flag {
  display: flex; align-items: center; gap: 9px; color: #b91c1c; font-weight: 700; font-size: 12pt;
  border-top: 1px solid #e5e7eb; padding: 12px 0 4px; margin-top: 6px;
}
.fake-serp .serp-note { font-size: 10pt; color: #5d6672 !important; margin-top: 8px; }

/* ---- Data exfiltration prop ---- */
.fake-datacard {
  background: #1f2937; border: 2px solid #374151; border-radius: 16px;
  max-width: 460px; padding: 24px 26px;
}
.fake-datacard .fd-row {
  display: flex; align-items: center; gap: 12px; font-size: 12.5pt; color: #e5e7eb;
  padding: 10px 14px; background: #111827; border: 1px solid #374151; border-radius: 10px; margin-bottom: 10px;
}
.fake-datacard .fd-row i { color: #22d3ee; width: 20px; text-align: center; }
.fake-datacard .fd-row span { color: #e5e7eb !important; }
.fake-datacard .fd-arrow {
  display: flex; align-items: center; gap: 9px; font-size: 11pt; font-weight: 600; color: #ef4444;
  padding: 8px 2px 10px;
}

/* ---- Flag on browser prop (was missing after clobber) ---- */
.reveal .slides section .fake-browser .fe-flag {
  display: flex; align-items: center; gap: 9px; margin: 14px 24px 0;
  background: rgba(185, 28, 28, 0.08); border: 1.5px solid rgba(185, 28, 28, 0.35);
  border-radius: 8px; padding: 8px 12px; font-size: 10.5pt !important; font-weight: 600; color: #b91c1c !important;
  line-height: 1.4;
}
.reveal .slides section .fake-browser .fe-flag i { font-size: 11pt; color: #b91c1c; }

/* ---- svc-plate on white card: dark text (re-add after clobber) ---- */
.reveal .slides section.on-dark .wcd-svc-panel .svc-plate p,
.reveal .slides section.on-dark .wcd-svc-panel .svc-plate strong { color: #1f2937 !important; }
.reveal .slides section.on-dark .wcd-svc-panel .svc-plate p { margin: 0; font-size: 12pt; line-height: 1.5; }
.reveal .slides section.on-dark .wcd-svc-panel .svc-plate p strong { color: #111827 !important; }

/* ---- Flag on data card (same component as fake-email fe-flag) ---- */
.reveal .slides section .fake-datacard .fe-flag {
  display: flex; align-items: center; gap: 9px; margin: 14px 0 0;
  background: rgba(185, 28, 28, 0.08); border: 1.5px solid rgba(185, 28, 28, 0.35);
  border-radius: 8px; padding: 8px 12px; font-size: 10.5pt !important; font-weight: 600; color: #f87171 !important;
  line-height: 1.4;
}
.reveal .slides section .fake-datacard .fe-flag i { font-size: 11pt; color: #f87171; }