/* ─────────────────────────────────────────────────────────────────────────
   Open Day slides - themes, layouts, surfaces, BiDi.
   Rendered by src/slides/SlideRenderer.vue. Design language lifted from the
   parent 10x site (fsp-design skill): white -> pale-blue light sections, the
   charcoal/gold terminal treatment for dark slides, and the brand gradient on
   light-weight display text only (never on bold - brand rule).

   SIZING MODEL: every slide surface is wrapped in an inline-size container
   (.od-display-stage / .od-stage-canvas / .od-participant-slide - see app.css),
   and ALL slide type + watermarks are sized in cqw (container-query width)
   units. The venue display container is the viewport, the presenter preview
   container is a fixed 1920x1080 canvas (scaled down with transform), and the
   phone container is the participant card - so the same rules produce a
   pixel-faithful presenter preview and correctly-scaled phone slides.
   Responsive rules use @container queries for the same reason.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Base ─────────────────────────────────────── */
.slide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Children share one centered, fixed-width column (the site's container
     pattern) so title / body / cards keep a common start edge on the big
     16:9 display instead of hugging one side. Centering happens here on the
     flex cross-axis - NOT via margin-inline:auto, which per-element
     `margin: 0` resets would silently override. */
  align-items: center;
  gap: clamp(16px, 1.6cqw, 32px);
  width: 100%;
  padding: clamp(32px, 5cqw, 96px) clamp(20px, 4cqw, 80px);
  text-align: start;
}

.slide > * {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 74rem;
}

/* ── Eyebrow (mono kicker, site section-title treatment) ──────────────────
   Every eyebrow is led by the site's brand-gradient hairline sitting ON TOP
   of the mono label (the /course "target audience" section-title recipe:
   48x2px bar, linear-gradient 0894FF -> BD32D6 -> FFA304, radius 999). */
.slide__eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(12px, 1.1cqw, 21px);
  font-weight: 400;
  color: var(--text-tertiary);
  margin: 0;
}

.slide__eyebrow::before {
  content: '';
  display: block;
  width: clamp(44px, 3.5cqw, 68px);
  height: clamp(2px, 0.16cqw, 3px);
  border-radius: 999px;
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
  margin-bottom: clamp(10px, 0.9cqw, 18px);
}

/* Centered layouts center the hairline with the label. */
.slide--layout-title .slide__eyebrow::before,
.slide--layout-statement .slide__eyebrow::before,
.slide:has(.path-flow) .slide__eyebrow::before {
  margin-inline: auto;
}

/* Inline venue logo inside the eyebrow (Mindspace on the intro slide). */
.slide__eyebrow .mindspace-logo {
  height: 1.7em;
  width: auto;
  vertical-align: -0.55em;
  margin-inline: 0.15em;
}

/* ── Title ────────────────────────────────────── */
.slide__title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(30px, 4.4cqw, 84px);
  color: var(--text-color);
  margin: 0;
}

/* ── Body ─────────────────────────────────────── */
.slide__body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(18px, 1.85cqw, 36px);
  line-height: 1.6;
  color: var(--text-secondary);
}

.slide__body p {
  margin: 0 0 0.7em;
}

.slide__body p:last-child {
  margin-bottom: 0;
}

.slide__body ul {
  list-style: disc;
  padding-inline-start: 1.2em;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
}

.slide__body li {
  padding-inline-start: 0.15em;
}

/* Unbreakable run (keeps hyphenated Hebrew names like לה-גארדיה on one line). */
.slide .nb {
  white-space: nowrap;
}

/* ── BiDi: keep forced-LTR runs (code, versions, tool names) intact ── */
.slide .en {
  direction: ltr;
  unicode-bidi: isolate;
  /* An .en run is one atomic English unit (a term, version, or tool name);
     don't let it break mid-token (e.g. "No-Code" wrapping at the hyphen). */
  white-space: nowrap;
}

.slide bdi {
  unicode-bidi: isolate;
}

.slide [dir='ltr'] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Code / CLI: forced LTR monospace blocks. */
.slide code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.slide pre {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.3cqw, 25px);
  line-height: 1.55;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 0.4em 0 0;
}

.slide pre code {
  display: block;
  font-size: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Theme: light (white -> pale blue, cool radial glows) ── */
.slide--theme-light {
  color: var(--text-color);
  background:
    radial-gradient(ellipse at 92% 15%, rgba(0, 113, 227, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 8% 85%, rgba(105, 53, 216, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 40%, #f0f6ff 100%);
}

.slide--theme-light .slide__body {
  color: var(--text-secondary);
}

.slide--theme-light .slide__body pre {
  background: rgba(11, 12, 18, 0.04);
  border: 1px solid var(--border-light);
  color: var(--text-color);
}

/* ── Theme: dark (charcoal gradient + warm-gold glow, white ink scale) ── */
.slide--theme-dark {
  --slide-gold: #d4a574;
  --slide-ink-100: rgba(255, 255, 255, 0.96);
  --slide-ink-80: rgba(255, 255, 255, 0.82);
  --slide-ink-60: rgba(255, 255, 255, 0.6);
  --slide-line: rgba(255, 255, 255, 0.08);
  --slide-surface: rgba(255, 255, 255, 0.03);
  color: var(--slide-ink-80);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 165, 116, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #0b0c12 0%, #13141c 30%, #161722 100%);
}

.slide--theme-dark .slide__eyebrow {
  color: var(--slide-gold);
}

.slide--theme-dark .slide__title {
  color: var(--slide-ink-100);
}

.slide--theme-dark .slide__body {
  color: var(--slide-ink-80);
}

.slide--theme-dark .slide__body pre {
  background: var(--slide-surface);
  border: 1px solid var(--slide-line);
  color: var(--slide-ink-100);
}

/* ── Layout: title (centered hero, light-weight gradient title) ── */
.slide--layout-title {
  align-items: center;
  text-align: center;
}

.slide--layout-title .slide__title {
  font-weight: 300;
  font-size: clamp(40px, 7.4cqw, 142px);
  letter-spacing: -0.03em;
}

.slide--layout-title.slide--theme-light .slide__title {
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 44%, #6462ea 49%, #0894ff 69%, #ffa304 94%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.slide--layout-title .slide__body {
  font-size: clamp(19px, 2.1cqw, 40px);
  color: var(--text-secondary);
  max-width: 60rem;
}

.slide--layout-title.slide--theme-dark .slide__body {
  color: var(--slide-ink-60);
}

/* ── Layout: statement (large centered statement, light weight) ── */
.slide--layout-statement {
  align-items: center;
  text-align: center;
}

.slide--layout-statement .slide__title {
  font-weight: 300;
  font-size: clamp(30px, 4.6cqw, 89px);
  letter-spacing: -0.025em;
  line-height: 1.2;
  max-width: 100%;
}

.slide--layout-statement.slide--theme-light .slide__title {
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 44%, #6462ea 49%, #0894ff 69%, #ffa304 94%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Layout: agenda (title + roomy list) ── */
.slide--layout-agenda .slide__body {
  font-size: clamp(20px, 2.2cqw, 42px);
  font-weight: 300;
  color: var(--text-color);
}

.slide--layout-agenda.slide--theme-dark .slide__body {
  color: var(--slide-ink-100);
}

.slide--layout-agenda .slide__body ul {
  gap: 0.7em;
}

/* ── Layout: terminal (dark + mono framing) ── */
.slide--layout-terminal .slide__title {
  font-weight: 400;
}

.slide--layout-terminal .slide__body pre {
  margin-top: var(--space-md);
}

/* ── Interaction poll placeholder (Phase 4 replaces the real UI) ── */
.slide__poll {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-lg) var(--space-xl);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.slide--theme-dark .slide__poll {
  border-color: var(--slide-line);
  background: var(--slide-surface);
}

.slide__poll-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(12px, 0.9cqw, 17px);
  color: var(--text-tertiary);
}

.slide--theme-dark .slide__poll-label {
  color: var(--slide-gold);
}

.slide__poll-text {
  margin: 0;
  font-size: clamp(18px, 1.7cqw, 30px);
  font-weight: 300;
}

/* ── Surface: display (venue screen + presenter preview canvas) ── */
.slide--surface-display {
  min-height: 100vh;
}

/* Inside the presenter's fixed 1920x1080 canvas the slide must fill the
   canvas, not the viewport (beats the 100vh rules above and the curric
   height rule below - this file loads after app.css). */
.od-stage-canvas .slide--surface-display,
.od-stage-canvas .slide--surface-display:has(.curric) {
  min-height: 100%;
  height: 100%;
}

/* ── Surface: phone (participant companion, narrow viewport) ── */
.slide--surface-phone {
  min-height: auto;
  padding: clamp(20px, 7cqw, 40px) clamp(16px, 5.4cqw, 24px);
  gap: var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
}

.slide--surface-phone > * {
  max-width: 100%;
}

.slide--surface-phone .slide__eyebrow {
  font-size: clamp(11px, 3.2cqw, 14px);
}

.slide--surface-phone .slide__title {
  font-size: clamp(24px, 7.4cqw, 34px);
}

.slide--surface-phone.slide--layout-title .slide__title,
.slide--surface-phone.slide--layout-statement .slide__title {
  font-size: clamp(28px, 9cqw, 44px);
}

.slide--surface-phone .slide__body {
  font-size: clamp(15px, 4.5cqw, 19px);
}

.slide--surface-phone .slide__body pre {
  font-size: clamp(12px, 3.5cqw, 15px);
  padding: var(--space-sm) var(--space-md);
}

.slide--surface-phone .slide__hint {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin: 0;
}

.slide--surface-phone.slide--theme-dark .slide__hint {
  color: var(--slide-ink-60);
}

/* ═══════════════════════════════════════════════════════════════════════════
   OPEN DAY DECK - content slide design system
   Watermarks, hero lockups, and the per-slide content blocks. Design language
   lifted from the parent 10x site (fsp-design): brand-gradient text on light
   weights only, cool light sections, gold/charcoal terminal treatment, thin
   hairlines and translucent cards.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Background watermarks (10x wordmark + terminal >_ mark) ───────────────── */
.slide > .slide-wm-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  max-width: none;
  margin-inline: 0;
  overflow: hidden;
  pointer-events: none;
}

.slide .slide-wm {
  position: absolute;
  z-index: 0;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* Giant faint "10x" gradient text, anchored to the lower-start corner. */
.slide-wm--text {
  bottom: -10%;
  inset-inline-start: -5%;
  font-family: var(--font-display);
  font-size: 46cqw;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.85;
  white-space: nowrap;
  background: linear-gradient(160deg, rgba(8, 148, 255, 0.12) 0%, rgba(100, 98, 234, 0.05) 45%, rgba(189, 50, 214, 0.09) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Terminal >_ mark, anchored to the top-end corner. */
.slide-wm--term {
  top: 0;
  inset-inline-end: 0;
  width: 24cqw;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  opacity: 0.07;
  transform: translate(9%, -8%);
  filter: blur(0.2px);
}

.slide-wm--term .logo-10x-terminal,
.slide-wm--term .logo-10x-terminal svg {
  width: 100%;
  height: 100%;
}

/* Dark slides: white-ink variant of the text mark (the light gradient would
   vanish on charcoal), plus a stronger terminal mark - the brand should stay
   clearly present on the charcoal statement slides. */
.slide--theme-dark .slide-wm--text {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.105) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.slide--theme-dark .slide-wm--term {
  opacity: 0.16;
}

/* Slides whose hero IS the terminal mark (cold-open, definition statement)
   drop the corner terminal watermark - it would double the mark - but keep
   the giant "10x" text watermark so the brand stays in the background. */
.slide:has(.slide-graphic--terminal) .slide-wm--term {
  display: none;
}

/* ── Persistent brand bug: 10x mark, bottom-right of every display slide ── */
.slide > .slide__brandmark {
  position: absolute;
  z-index: 2;
  width: clamp(79px, 6.1cqw, 119px);
  max-width: none;
  bottom: clamp(18px, 2.2cqw, 44px);
  right: clamp(22px, 2.4cqw, 48px);
  pointer-events: none;
  user-select: none;
}

.slide__brandmark .logo-10x-mark,
.slide__brandmark .logo-10x-mark svg {
  display: block;
  width: 100%;
  height: auto;
}

.slide--surface-phone > .slide__brandmark {
  display: none;
}

/* ── Site link: small mono chip pointing at the matching page/section.
   Bottom-center - clear of the connected badge (left) and the brand mark
   (right). ──────────────────────────────────────────────────────────────── */
.slide > .slide__sitelink {
  position: absolute;
  z-index: 2;
  width: auto;
  max-width: 44%;
  bottom: clamp(20px, 2.4cqw, 48px);
  left: 50%;
  transform: translateX(-50%);
  direction: ltr;
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.9cqw, 17px);
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slide > .slide__sitelink:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.slide--theme-dark > .slide__sitelink {
  color: var(--slide-ink-60);
}

.slide--theme-dark > .slide__sitelink:hover {
  color: var(--slide-ink-100);
}

/* Phone card: the link flows after the content instead of overlaying it. */
.slide--surface-phone > .slide__sitelink {
  position: static;
  max-width: 100%;
  align-self: flex-start;
  margin-top: var(--space-xs);
  font-size: 12px;
}

/* Centered terminal mark behind centered hero titles reads better mid-edge. */
.slide-wm--term-title,
.slide-wm--term-statement {
  width: 30cqw;
  max-width: 560px;
  opacity: 0.06;
}

/* ── Hero graphic lockups ─────────────────────────────────────────────────── */
.slide-graphic {
  position: relative;
  z-index: 1;
}

.slide-graphic--intro {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin-block: var(--space-sm);
}

.slide-graphic--intro .logo-10x-course {
  width: min(1080px, 74cqw);
}

.slide--surface-phone .slide-graphic--intro .logo-10x-course {
  width: 92%;
}

/* Cold-open: the standalone terminal mark, centered and large. */
.slide-graphic--terminal {
  display: flex;
  justify-content: center;
  width: 100%;
}

.slide-graphic--terminal .logo-10x-terminal {
  width: clamp(180px, 30cqw, 540px);
  aspect-ratio: 1 / 1;
}

/* Statement slides use the terminal mark as a compact lead-in above the
   text, not as the hero. */
.slide--layout-statement .slide-graphic--terminal .logo-10x-terminal {
  width: clamp(90px, 9.5cqw, 180px);
}

/* Curriculum slides: the standalone course wordmark, centered on top. */
.slide-graphic--track {
  display: flex;
  justify-content: center;
  width: 100%;
}

.slide-graphic--track .logo-10x,
.slide-graphic--track .logo-10x-architect {
  height: clamp(44px, 4.7cqw, 88px);
}

/* Intro slide: the lecturer line is a quieter second subtitle; the
   certifications trail the name in smaller caps (doctor's-credential
   treatment). */
.slide__body .intro-lecturer {
  font-size: 0.66em;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}

.intro-lecturer .intro-creds {
  font-size: 0.62em;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-inline-start: 0.6em;
  vertical-align: 0.08em;
}

/* "Powered by Claude Code" lockup (Claude Code deep-dive slide).
   The lockup is dir="ltr" inside the RTL slide; anchor it to the inline-start
   edge (visual right) so it stays aligned with the title and body. */
.slide-graphic--cc {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(16px, 1.6cqw, 32px);
  margin-bottom: var(--space-xs);
}

.slide-graphic-cc-mark {
  width: clamp(44px, 3.8cqw, 76px);
  height: auto;
  flex: none;
}

.slide-graphic-cc-sep {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(10px, 0.85cqw, 16px);
  color: var(--slide-ink-60);
}

.slide-graphic-cc-logo {
  height: clamp(34px, 3.8cqw, 74px);
  width: auto;
  flex: none;
}

/* ── Lecturer bio ─────────────────────────────────────────────────────────── */
.lecturer-lockup {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3cqw, 56px);
}

.lecturer-photo {
  width: clamp(160px, 19cqw, 330px);
  height: auto;
  border-radius: var(--radius-lg);
  flex: none;
}

/* Passport-style portrait (pre-cropped chest-up asset, 640x780), framed on a
   soft cool gradient. */
.lecturer-photo--portrait {
  width: clamp(160px, 17cqw, 300px);
  background: linear-gradient(180deg, #f2f7ff 0%, #dbeafe 100%);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
}

.lecturer-photo--phone {
  width: clamp(110px, 34cqw, 150px);
  display: block;
  margin: 0 auto var(--space-sm);
}

.lecturer-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cred-logos {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2cqw, 40px);
  margin-top: var(--space-sm);
}

.cred-logos img {
  height: clamp(26px, 2.6cqw, 50px);
  width: auto;
}

/* The VMware wordmark is much wider than the other cert marks at equal
   height - pull it down so the three logos read at the same visual weight. */
.cred-logos img[src*='vmware'] {
  height: clamp(18px, 1.8cqw, 34px);
}

/* Display credential strip (lecturer-bio): a hairline-separated row of large
   issuer logos. Microsoft (MCT) leads and is the most prominent, the Claude /
   Anthropic mark is next, VMware trails smaller. */
.cred-strip {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3cqw, 60px);
  margin-top: clamp(16px, 1.6cqw, 32px);
  padding-top: clamp(16px, 1.6cqw, 32px);
  border-top: 1px solid var(--border-light);
}

.cred-strip-logo {
  width: auto;
  flex: none;
}

.cred-strip-logo--ms {
  height: clamp(46px, 4.4cqw, 84px);
}

.cred-strip-logo--claude {
  height: clamp(36px, 3.4cqw, 66px);
}

.cred-strip-logo--vmware {
  height: clamp(20px, 1.9cqw, 36px);
}

/* ── Stats + certifications ───────────────────────────────────────────────── */
.stat-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.stat-grid--phone {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.stat-grid li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 3.9cqw, 74px);
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(120deg, #0894ff 0%, #bd32d6 46%, #6462ea 60%, #ffa304 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-size: clamp(13px, 1.15cqw, 22px);
  font-weight: 300;
  color: var(--text-secondary);
}

/* Certification chips: issuer logo + credential line, centered as a row. */
.cred-certs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 1.2cqw, 24px) clamp(16px, 1.6cqw, 32px);
  margin-top: clamp(20px, 2.4cqw, 48px);
}

.cred-cert {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 0.9cqw, 18px);
  padding: clamp(8px, 0.8cqw, 16px) clamp(14px, 1.4cqw, 28px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.cred-cert img {
  height: clamp(26px, 2.5cqw, 48px);
  width: auto;
}

/* Microsoft (MCT) reads most prominent in the chips row. */
.cred-cert img[src*='mct'] {
  height: clamp(30px, 2.9cqw, 56px);
}

.cred-cert img[src*='vmware'] {
  height: clamp(16px, 1.6cqw, 30px);
}

.cred-cert-text {
  font-size: clamp(13px, 1.15cqw, 22px);
  color: var(--text-secondary);
}

/* Full-Stack Pro wordmark used as the internship slide title. */
.slide__title .fsp-logo {
  display: block;
  height: clamp(30px, 3.2cqw, 62px);
  width: auto;
}

/* ── What-is-10x course-path illustration (site /course hero-flow) ────────
   Two course cards joined by a "+" node, flowing through a brand-gradient
   connector into the full-path bundle card - the /course hero diagram,
   recomposed horizontally for a 16:9 slide. */
.slide:has(.path-flow) {
  text-align: center;
  gap: clamp(10px, 1cqw, 20px);
  padding-block: clamp(24px, 2.8cqw, 54px);
}

.slide:has(.path-flow) .slide__title {
  font-size: clamp(26px, 3.5cqw, 67px);
}

.what-is-lead {
  font-size: 0.85em;
  max-width: 62rem;
  margin-inline: auto;
}

.path-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: min(100%, 66rem);
  margin-inline: auto;
}

.path-flow-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(10px, 1cqw, 20px);
  width: 100%;
}

.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, 0.5cqw, 10px);
  flex: 1 1 0;
  max-width: 30rem;
  padding: clamp(14px, 1.5cqw, 30px) clamp(16px, 1.7cqw, 34px);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 254, 0.96) 100%);
  border: 1px solid rgba(8, 148, 255, 0.12);
  box-shadow: 0 6px 24px rgba(0, 60, 130, 0.05);
}

.path-card--architect {
  border-color: rgba(189, 50, 214, 0.14);
}

.path-step {
  position: absolute;
  inset-block-start: clamp(10px, 0.9cqw, 18px);
  inset-inline-end: clamp(12px, 1.2cqw, 24px);
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.8cqw, 15px);
  letter-spacing: 0.2em;
  color: var(--text-tertiary);
}

.path-card-eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(10px, 0.85cqw, 16px);
  color: var(--text-secondary);
}

.path-card-logo {
  font-size: clamp(20px, 1.9cqw, 37px);
  line-height: 1.2;
}

.path-card-desc {
  margin: 0;
  font-size: clamp(12px, 1.1cqw, 21px);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* "+" node between the two course cards. */
.path-plus {
  align-self: center;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, 2.6cqw, 50px);
  height: clamp(30px, 2.6cqw, 50px);
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid rgba(8, 148, 255, 0.22);
  box-shadow: 0 0 0 clamp(4px, 0.35cqw, 7px) rgba(8, 148, 255, 0.08);
}

.path-plus-sign {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 1.8cqw, 35px);
  line-height: 1;
  color: var(--primary-color);
  transform: translateY(-0.04em);
}

/* Vertical brand-gradient connector: node -> line -> chevron tip (the site's
   .co-hero-flow-connector recipe). */
.path-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.35cqw, 7px);
  padding: clamp(8px, 0.8cqw, 16px) 0;
}

.path-connector-node {
  width: clamp(6px, 0.5cqw, 10px);
  height: clamp(6px, 0.5cqw, 10px);
  border-radius: 50%;
  background: #0894ff;
  box-shadow: 0 0 0 clamp(4px, 0.3cqw, 6px) rgba(8, 148, 255, 0.14);
}

.path-connector-line {
  width: clamp(2px, 0.16cqw, 3px);
  height: clamp(22px, 2.2cqw, 44px);
  background: linear-gradient(180deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
  border-radius: 1px;
}

.path-connector-tip {
  width: clamp(16px, 1.4cqw, 28px);
  height: auto;
  display: block;
  color: #ffa304;
  margin-top: -2px;
}

/* The full-path bundle card. */
.path-card--bundle {
  flex: none;
  width: min(100%, 58rem);
  max-width: none;
  gap: clamp(8px, 0.8cqw, 16px);
  padding: clamp(16px, 1.7cqw, 34px) clamp(20px, 2.2cqw, 44px);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(8, 148, 255, 0.07), transparent 55%),
    var(--bg-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.path-card--bundle::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
}

.path-card-eyebrow--bundle {
  color: var(--primary-color);
  letter-spacing: 0.18em;
}

.path-card-logo--bundle {
  font-size: clamp(22px, 2.1cqw, 41px);
}

.path-bonus-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 0.8cqw, 16px);
}

.path-bonus {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(6px, 0.55cqw, 11px);
  padding: clamp(6px, 0.6cqw, 12px) clamp(12px, 1.2cqw, 24px);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 163, 4, 0.22);
  background: rgba(255, 250, 242, 0.85);
  font-size: clamp(12px, 1.05cqw, 20px);
  color: var(--text-secondary);
}

.path-bonus-tag {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(9px, 0.7cqw, 14px);
  color: var(--text-tertiary);
}

/* ── Course overview: stat cards + module chips (infographic) ─────────────── */
.course-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.3cqw, 26px);
}

.course-stat {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.4cqw, 8px);
  padding: clamp(14px, 1.5cqw, 30px) clamp(16px, 1.7cqw, 34px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.course-stat-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 3.4cqw, 66px);
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(120deg, #0894ff 0%, #bd32d6 46%, #6462ea 60%, #ffa304 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.course-stat-label {
  font-size: clamp(12px, 1.05cqw, 20px);
  font-weight: 300;
  color: var(--text-secondary);
}

.course-topics {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1cqw, 20px);
  margin-top: clamp(14px, 1.5cqw, 30px);
}

.course-topics-title {
  font-weight: 500;
  font-size: clamp(16px, 1.5cqw, 29px);
  color: var(--text-color);
}

.topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 0.8cqw, 16px);
}

.topic-chips li {
  padding: clamp(7px, 0.65cqw, 13px) clamp(14px, 1.3cqw, 26px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  font-size: clamp(13px, 1.15cqw, 22px);
  font-weight: 300;
  color: var(--text-secondary);
}

.topic-chips li.topic-chip--hl {
  border-color: var(--primary-border);
  background: var(--primary-light);
  color: var(--primary-color);
  font-weight: 400;
}

/* ── Format slide: fact cards + weekly-meeting cards (site /next hero-facts
   + date-widget treatment) ────────────────────────────────────────────────── */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.2cqw, 44px);
  width: min(100%, 64rem);
  margin-inline: auto;
}

.fact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.4cqw, 8px);
  padding: clamp(16px, 1.7cqw, 34px) clamp(16px, 1.7cqw, 34px) clamp(14px, 1.5cqw, 30px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.fact-card::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
  opacity: 0.35;
}

.fact-card--accent {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-md);
}

.fact-card--accent::before {
  opacity: 1;
}

.fact-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(10px, 0.85cqw, 16px);
  color: var(--text-tertiary);
}

.fact-value {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(18px, 1.8cqw, 35px);
  line-height: 1.2;
  color: var(--text-color);
}

.fact-card--accent .fact-value {
  color: var(--primary-color);
}

.fact-sub {
  font-size: clamp(12px, 1.1cqw, 21px);
  color: var(--text-secondary);
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.2cqw, 44px);
  width: min(100%, 64rem);
  margin-inline: auto;
  margin-top: clamp(10px, 1.1cqw, 22px);
}

.week-card {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.4cqw, 28px);
  padding: clamp(12px, 1.3cqw, 26px) clamp(16px, 1.7cqw, 34px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.week-body {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.2cqw, 4px);
  text-align: start;
}

.week-title {
  font-size: clamp(12px, 1.1cqw, 21px);
  color: var(--text-secondary);
}

.week-time {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(20px, 2cqw, 39px);
  line-height: 1.1;
  color: var(--text-color);
}

/* Calendar-ticket date stub. */
.sched-stub {
  flex: none;
  width: clamp(52px, 4.4cqw, 84px);
  min-height: clamp(56px, 4.8cqw, 92px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 113, 227, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(224, 236, 255, 0.7) 100%);
  box-shadow: 0 1px 2px rgba(0, 60, 130, 0.05);
}

.sched-stub-day {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.9cqw, 37px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--primary-color);
}

.sched-stub-day--word {
  font-size: clamp(14px, 1.3cqw, 25px);
  font-weight: 600;
}

.sched-stub-month {
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.7cqw, 13px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.sched-foot {
  margin: clamp(10px, 1cqw, 20px) 0 0;
  font-size: clamp(12px, 1.05cqw, 20px);
  color: var(--text-tertiary);
  text-align: center;
}

/* Kept for the phone variant of the format slide. */
.format-note {
  margin-top: var(--space-lg);
  font-size: 0.82em;
  color: var(--text-secondary);
}

/* Lead line above agenda lists (audience / admission). */
.lead-line {
  font-weight: 400;
  color: var(--text-color);
}

/* ── Reviews ──────────────────────────────────────────────────────────────── */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6cqw, 32px);
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: clamp(16px, 1.8cqw, 36px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.review-photo {
  width: clamp(48px, 3.6cqw, 70px);
  height: clamp(48px, 3.6cqw, 70px);
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.review-card blockquote {
  margin: 0;
  font-size: 0.72em;
  line-height: 1.5;
  font-weight: 300;
  color: var(--text-secondary);
}

.review-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
}

.review-name {
  font-weight: 500;
  font-size: 0.74em;
  color: var(--text-color);
}

.review-role {
  font-size: 0.62em;
  color: var(--text-tertiary);
}

.review-more {
  margin-top: var(--space-md);
  font-size: 0.72em;
  color: var(--text-tertiary);
}

/* ── Pricing cards (from the site /next design) ───────────────────────────── */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6cqw, 32px);
  align-items: stretch;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: clamp(16px, 1.8cqw, 36px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.price-card--featured {
  border: 2px solid rgba(8, 148, 255, 0.45);
  box-shadow: 0 20px 52px rgba(0, 60, 130, 0.16);
  background:
    radial-gradient(ellipse at 50% -8%, rgba(8, 148, 255, 0.07), transparent 52%),
    var(--bg-surface);
}

.price-badge {
  position: absolute;
  top: 0;
  inset-inline-end: var(--space-lg);
  transform: translateY(-50%);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  background: var(--primary-color);
  color: #fff;
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgba(0, 113, 227, 0.32);
}

.price-name {
  font-weight: 600;
  font-size: 0.7em;
  letter-spacing: -0.01em;
  color: var(--text-color);
}

/* Full price leads the card, struck through and prominent; the pilot price
   sits below it. */
.price-was-label {
  font-size: 0.44em;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  margin-top: clamp(8px, 0.8cqw, 16px);
}

.price-was {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9cqw, 36px);
  font-weight: 500;
  line-height: 1.15;
  color: #9a9cab;
  text-decoration: line-through;
  text-decoration-thickness: 2.5px;
  text-decoration-color: rgba(154, 156, 171, 0.9);
}

.price-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 10px;
  margin-top: clamp(8px, 0.8cqw, 16px);
  border-radius: var(--radius-full);
  background: var(--primary-light);
  font-family: var(--font-mono);
  font-size: 0.4em;
  letter-spacing: 0.04em;
  color: var(--primary-color);
}

.price-now {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 2.9cqw, 54px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text-color);
  text-decoration: none;
}

.price-now--best {
  color: var(--primary-color);
  font-size: clamp(32px, 3.3cqw, 62px);
}

.price-vat {
  font-size: 0.46em;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.price-saving {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 12px;
  margin-top: 8px;
  border-radius: var(--radius-full);
  background: rgba(105, 53, 216, 0.1);
  color: var(--accent-warm);
  font-size: 0.5em;
  font-weight: 600;
}

.price-foot {
  text-align: center;
  font-size: 0.62em;
  color: var(--text-secondary);
  margin-top: var(--space-lg);
}

.price-foot strong {
  color: var(--text-color);
  font-weight: 600;
}

/* Phone pricing list */
.price-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.price-list .price-name {
  font-size: 1em;
}

.price-list del {
  color: #9a9cab;
  text-decoration: line-through;
  font-size: 0.85em;
  margin-inline-end: 6px;
}

.price-list ins {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}

.price-list--best {
  border-top-color: var(--primary-border);
}

/* ── Claude Code slide (deep-dive page card treatment) ────────────────────── */
/* Dense dark slide: pull the title down a notch and tighten the column gap so
   the lockup + title + sub + three pillars sit comfortably inside 16:9. */
.slide:has(.cc-pillars) {
  gap: clamp(12px, 1.2cqw, 24px);
}

.slide:has(.cc-pillars) .slide__title {
  font-size: clamp(26px, 3.7cqw, 71px);
}

.cc-sub {
  max-width: 58rem;
}

.cc-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.3cqw, 26px);
  margin-top: clamp(10px, 1cqw, 20px);
}

.cc-pillar {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.6cqw, 12px);
  padding: clamp(16px, 1.8cqw, 36px) clamp(16px, 1.7cqw, 34px);
  background: var(--slide-surface);
  border: 1px solid var(--slide-line);
  border-radius: var(--radius-lg);
}

.cc-pillar-kicker {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.8cqw, 15px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slide-gold);
}

.cc-pillar-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(16px, 1.5cqw, 29px);
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--slide-ink-100);
}

.cc-pillar-desc {
  margin: 0;
  font-size: clamp(12px, 1.05cqw, 20px);
  line-height: 1.6;
  color: var(--slide-ink-60);
}

/* ── Audience cards (site target-audience treatment) ──────────────────────── */
.aud-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1cqw, 20px);
}

.aud-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.6cqw, 12px);
  padding: clamp(14px, 1.4cqw, 28px) clamp(14px, 1.5cqw, 30px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  isolation: isolate;
}

/* Featured rows span the grid; icon leads, text stacks beside it. */
.aud-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(14px, 1.4cqw, 28px);
  row-gap: clamp(4px, 0.4cqw, 8px);
  align-items: center;
  background:
    radial-gradient(900px 280px at 85% -20%, rgba(8, 148, 255, 0.08), transparent 60%),
    radial-gradient(600px 240px at 10% 120%, rgba(189, 50, 214, 0.06), transparent 60%),
    rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-md);
}

.aud-card--featured::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 3px;
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
}

.aud-card--featured .aud-icon {
  grid-row: 1 / 3;
  width: clamp(28px, 2.5cqw, 48px);
  height: clamp(28px, 2.5cqw, 48px);
  background: linear-gradient(135deg, #0894ff 0%, #bd32d6 55%, #ffa304 100%);
}

/* mask-image icons (copied from the site's audience icon set) */
.aud-icon {
  flex: none;
  display: inline-block;
  width: clamp(22px, 2cqw, 38px);
  height: clamp(22px, 2cqw, 38px);
  background-color: var(--text-color);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.aud-icon--sparkles { -webkit-mask-image: url('/icons/audience/sparkles.svg'); mask-image: url('/icons/audience/sparkles.svg'); }
.aud-icon--entrepreneurs { -webkit-mask-image: url('/icons/audience/lightbulb-on.svg'); mask-image: url('/icons/audience/lightbulb-on.svg'); }
.aud-icon--product-managers { -webkit-mask-image: url('/icons/audience/diagram-project.svg'); mask-image: url('/icons/audience/diagram-project.svg'); }
.aud-icon--data-analysts { -webkit-mask-image: url('/icons/audience/chart-line.svg'); mask-image: url('/icons/audience/chart-line.svg'); }
.aud-icon--tech-leaders { -webkit-mask-image: url('/icons/audience/users-gear.svg'); mask-image: url('/icons/audience/users-gear.svg'); }
.aud-icon--rocket { -webkit-mask-image: url('/icons/audience/rocket-launch.svg'); mask-image: url('/icons/audience/rocket-launch.svg'); }
.aud-icon--puzzle { -webkit-mask-image: url('/icons/audience/puzzle-piece.svg'); mask-image: url('/icons/audience/puzzle-piece.svg'); }
.aud-icon--binoculars { -webkit-mask-image: url('/icons/audience/binoculars.svg'); mask-image: url('/icons/audience/binoculars.svg'); }

.aud-index {
  position: absolute;
  inset-block-start: clamp(12px, 1.1cqw, 22px);
  inset-inline-end: clamp(14px, 1.4cqw, 28px);
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.8cqw, 15px);
  letter-spacing: 0.2em;
  color: var(--text-tertiary);
}

.aud-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 1.25cqw, 24px);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-color);
}

.aud-desc {
  margin: 0;
  font-size: clamp(12px, 1cqw, 19px);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ── Admission: what-you-bring cards (site bring-cards treatment) ─────────── */
.bring-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.5cqw, 30px);
  margin-top: clamp(8px, 0.8cqw, 16px);
}

.bring-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1cqw, 20px);
  padding: clamp(18px, 1.9cqw, 38px) clamp(16px, 1.7cqw, 34px);
  background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
  border: 1px solid rgba(0, 113, 227, 0.1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Infographic accent: brand-gradient hairline along the card top. */
.bring-card::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #0894ff 0%, #bd32d6 50%, #ffa304 100%);
}

/* The icon sits in a tinted tile so each card reads as an infographic item. */
.bring-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(46px, 4.2cqw, 82px);
  height: clamp(46px, 4.2cqw, 82px);
  border-radius: var(--radius-md);
  background: var(--primary-light);
  border: 1px solid var(--primary-border);
}

.bring-icon {
  background-color: var(--primary-color);
  width: clamp(26px, 2.4cqw, 46px);
  height: clamp(26px, 2.4cqw, 46px);
}

.bring-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.5cqw, 29px);
  letter-spacing: -0.01em;
  color: var(--text-color);
}

.bring-desc {
  margin: 0;
  font-size: clamp(13px, 1.15cqw, 22px);
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ── Admission: formal requirements checklist ─────────────────────────────── */
.req-list {
  margin-top: clamp(6px, 0.6cqw, 12px);
  gap: clamp(10px, 1cqw, 20px);
}

.req-item {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1cqw, 20px);
}

.req-check {
  flex: none;
  width: clamp(22px, 2cqw, 38px);
  height: clamp(22px, 2cqw, 38px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--primary-border);
  background: var(--primary-light);
  color: var(--primary-color);
  margin-top: 0.1em;
}

.req-check svg {
  width: 55%;
  height: 55%;
}

.req-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.req-text strong {
  font-weight: 600;
  font-size: clamp(15px, 1.4cqw, 27px);
  color: var(--text-color);
}

.req-desc {
  font-size: clamp(12px, 1.1cqw, 21px);
  color: var(--text-secondary);
}

/* ═══ Curriculum accordion (synced, presenter-driven) ═════════════════════════ */

/* Curriculum slides are denser than prose slides: pull the title down a size,
   top-anchor the stack, and let the accordion own the leftover height so an
   expanded module never overflows the 16:9 frame. */
.slide--surface-display:has(.curric) {
  /* Centered both ways (the stack sits at the middle of the frame); roomy
     gaps between the logo, the title and the module rows. */
  justify-content: center;
  gap: clamp(18px, 1.8cqw, 36px);
  padding-block: clamp(32px, 3.4cqw, 66px);
  /* Fixed height (not min-height) so the flex column actually constrains the
     accordion; without it an oversized module body would spill past the
     16:9 frame with no way to see it. */
  height: 100vh;
}

/* The course wordmark leads the slide; the title reads as a small, centered
   subtitle below it. */
.slide:has(.curric) .slide__title {
  text-align: center;
  font-weight: 400;
  color: var(--text-secondary);
}

.slide--surface-display:has(.curric) .slide__title {
  font-size: clamp(26px, 2.9cqw, 55px);
}

.slide--surface-display:has(.curric) .slide-graphic--track {
  margin-block: clamp(14px, 1.5cqw, 30px) clamp(4px, 0.4cqw, 8px);
}

.slide--surface-display .curric {
  min-height: 0;
  overflow-y: auto; /* safety net - the compact open-state below is sized to fit */
}

.curric {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4cqw, 28px);
  width: 100%;
  max-width: 74rem;
  /* 4 modules per slide (the deck splits each course in two) - sized to be
     readable from the back of the venue. */
  font-size: clamp(21px, 2.34cqw, 45px);
}

.curric-module {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  flex: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.curric-module.is-open {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-md);
}

.curric-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: clamp(12px, 1cqw, 20px) clamp(18px, 1.7cqw, 34px);
  background: none;
  border: 0;
  margin: 0;
  font-family: inherit;
  color: var(--text-color);
  text-align: start;
}

.curric-num {
  flex: none;
  width: 2em;
  height: 2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.68em;
  color: var(--primary-color);
}

.curric-head-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.curric-title {
  font-weight: 500;
  font-size: 0.92em;
}

.curric-tagline {
  font-weight: 300;
  font-size: 0.68em;
  color: var(--text-secondary);
}

/* When a module is open, tuck the other modules' taglines away and tighten
   their rows - the open module gets the vertical room and the collapsed rows
   read as a compact index (same focus behavior as the site's syllabus
   accordion). */
.curric:has(.is-open) .curric-tagline {
  display: none;
}

.curric:has(.is-open) .curric-module:not(.is-open) .curric-head {
  padding-block: clamp(5px, 0.4cqw, 8px);
}

.curric-chevron {
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.curric-module.is-open .curric-chevron {
  transform: rotate(-135deg);
}

.curric-body {
  padding: 2px clamp(14px, 1.3cqw, 26px) clamp(10px, 0.85cqw, 16px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 0.7cqw, 14px) clamp(24px, 2.6cqw, 52px);
}

.curric-chapter-title {
  margin: 0 0 4px;
  font-weight: 500;
  font-size: 0.74em;
  color: var(--text-color);
}

.curric-subjects {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.curric-subjects li {
  position: relative;
  padding-inline-start: 14px;
  font-size: 0.64em;
  font-weight: 300;
  line-height: 1.35;
  color: var(--text-secondary);
}

.curric-subjects li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--primary-color);
}

/* Phone: single-column body, tighter type, natural page scroll. */
.curric--phone {
  font-size: clamp(12px, 3.6cqw, 15px);
  gap: 8px;
  overflow: visible;
}

.curric--phone .curric-body {
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

/* ── Dark-theme overrides for content blocks ──────────────────────────────── */
.slide--theme-dark .curric-module,
.slide--theme-dark .price-card {
  background: var(--slide-surface);
  border-color: var(--slide-line);
}

.slide--theme-dark .curric-title,
.slide--theme-dark .price-name {
  color: var(--slide-ink-100);
}

.slide--theme-dark .curric-tagline,
.slide--theme-dark .curric-subjects li {
  color: var(--slide-ink-60);
}

/* ── List overrides: custom list classes must beat the base `.slide__body ul`
   / `.slide__body li` rules (which force a bulleted flex column). ──────────── */
.slide__body ul.stat-grid,
.slide__body ul.price-list,
.slide__body ul.course-stat-grid,
.slide__body ul.topic-chips,
.slide__body ul.req-list {
  list-style: none;
  padding-inline-start: 0;
}

.slide__body ul.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.slide__body ul.stat-grid.stat-grid--phone {
  grid-template-columns: repeat(2, 1fr);
}

.slide__body ul.course-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.slide__body ul.topic-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.slide__body ul.price-list {
  display: flex;
  flex-direction: column;
}

.slide__body .stat-grid li,
.slide__body .req-list li,
.slide__body .price-list li {
  padding-inline-start: 0;
}

/* Chip pills and stat cards carry their OWN box padding - re-assert it here
   so the base `.slide__body li { padding-inline-start: 0.15em }` reset can't
   strip the inline-start (RTL: right) side and leave the text flush against
   the border (that was the "broken" look on the course-overview slides). */
.slide__body ul.topic-chips li {
  padding: clamp(7px, 0.65cqw, 13px) clamp(14px, 1.3cqw, 26px);
}

.slide__body ul.course-stat-grid li {
  padding: clamp(14px, 1.5cqw, 30px) clamp(16px, 1.7cqw, 34px);
}

/* ── Responsive (container queries - correct inside the presenter's 1920px
   canvas regardless of the browser window, and on narrow phone cards) ─────── */
@container (max-width: 1024px) {
  .review-grid,
  .price-grid,
  .cc-pillars,
  .bring-grid,
  .fact-grid,
  .week-grid {
    grid-template-columns: 1fr;
  }
  .aud-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .slide__body ul.course-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .curric-body {
    grid-template-columns: 1fr;
  }
  .path-flow-row {
    flex-direction: column;
    align-items: stretch;
  }
  .path-card {
    max-width: none;
  }
  .path-plus {
    align-self: center;
  }
}

@container (max-width: 767px) {
  .slide__body ul.stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lecturer-lockup {
    flex-direction: column;
    text-align: center;
  }
  .aud-grid {
    grid-template-columns: 1fr;
  }
}