/* CurriculumView - Premium document-style curriculum page */

.curriculum-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 2.5rem 2.5rem 100px 2.5rem;
}

.curriculum-header {
  text-align: center;
  margin-bottom: 3rem;
}

.curriculum-logo {
  height: 44px;
  margin-bottom: 0.75rem;
}

.curriculum-page .page-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 0.5rem;
  letter-spacing: -0.025em;
  font-family: var(--font-display);
}

.curriculum-page .page-subtitle {
  font-size: 0.95rem;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 400;
  font-family: var(--font-body);
}

/* ── Search ──────────────────────────────────────── */

.curriculum-search {
  position: relative;
  max-width: 440px;
  margin: 1.75rem auto 0;
}

.curriculum-search .fa-search {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 0.82rem;
  pointer-events: none;
}

.curriculum-search input {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 2rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--bg-surface);
  color: var(--text-color);
}

.curriculum-search .search-clear {
  left: 8px;
  right: auto;
}

.curriculum-search input:focus {
  border-color: var(--primary-color);
  background: var(--bg-surface);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.empty-search {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-tertiary);
  font-size: 0.95rem;
}

/* ── Editorial notice card (formerly "disclaimer") ────
   The "living curriculum" promise is a selling point, not a footnote.
   Soft brand-tinted surface + inline-start brand-gradient accent rule
   + clear typographic hierarchy between the "הערה חשובה" eyebrow and
   the body copy. No alert iconography - minimal and professional. */

.curriculum-disclaimer {
  position: relative;
  margin: 0 auto 2.5rem;
  max-width: 760px;
  padding: 22px 28px 22px 32px;
  text-align: start;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-color);
  background:
    linear-gradient(135deg, rgba(8, 148, 255, 0.05) 0%, rgba(189, 50, 214, 0.035) 55%, rgba(255, 163, 4, 0.04) 100%),
    #ffffff;
  border: 1px solid rgba(0, 113, 227, 0.14);
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(0, 60, 130, 0.05);
  overflow: hidden;
}

.curriculum-disclaimer::before {
  content: '';
  position: absolute;
  inset-block: 14px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

.curriculum-disclaimer strong {
  display: block;
  margin-bottom: 6px;
  color: var(--primary-color);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
}

/* ── Totals summary ──────────────────────────────── */

.curriculum-totals {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
  margin: 0 auto 2.5rem;
  max-width: 720px;
}

.curriculum-total {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 28px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(8, 148, 255, 0.1), transparent 60%),
    radial-gradient(ellipse at 85% 95%, rgba(189, 50, 214, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(239, 246, 255, 0.55));
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  border: 1px solid rgba(98, 98, 234, 0.12);
  box-shadow: 0 2px 12px rgba(0, 60, 130, 0.05);
}

.curriculum-total-number {
  font-size: 40px;
  font-weight: 300;
  font-family: 'Noto Sans Hebrew', 'Helvetica Neue', var(--font-display);
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.curriculum-total-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
  font-family: var(--font-body);
}

@media (max-width: 768px) {
  .curriculum-totals {
    gap: 10px;
    margin-bottom: 1.75rem;
  }

  .curriculum-total {
    padding: 14px 10px;
  }

  .curriculum-total-number {
    font-size: 26px;
  }

  .curriculum-total-label {
    font-size: 12px;
  }
}

/* ── Global actions ──────────────────────────────── */

.global-actions {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1.25rem;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.8rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.15s;
}

.action-btn:hover {
  color: var(--primary-color);
  background: var(--primary-light);
}

.action-btn i {
  font-size: 0.72rem;
}

/* Per-module "expand all chapters" link in the module header row.
   Subtle link treatment: text + icon, transparent, primary color on hover
   with an underline so it reads as a link rather than a heavy button. */
.module-expand-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.78rem;
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease;
  flex-shrink: 0;
  align-self: center;
  white-space: nowrap;
}

.module-expand-link i {
  font-size: 0.68rem;
}

.module-expand-link:hover {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Timeline layout ──────────────────────────────── */

.timeline-label {
  display: none;
}

.curriculum-timeline {
  position: relative;
}

.curriculum-timeline::before {
  display: none;
}

/* ── Module block ─────────────────────────────────── */

.module-block {
  position: relative;
  margin-bottom: 0;
  padding-right: 0;
}

.module-block + .module-block {
  border-top: 1px solid var(--border-light);
}

/* ── Module header ────────────────────────────────── */

.module-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  padding: 1.35rem 0.85rem;
  transition: background 0.2s ease;
  position: relative;
}

.module-header:hover {
  background: rgba(0, 113, 227, 0.02);
}

.module-block.expanded .module-header {
  border: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Number badge */
.module-number-badge {
  position: static;
  transform: none;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  background: var(--primary-color);
  color: white;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  font-family: var(--font-body);
  z-index: 1;
  border: none;
  box-shadow: none;
  flex-shrink: 0;
  margin-top: 2px;
}

.module-block.draft .module-number-badge {
  background: var(--border-default);
  box-shadow: none;
}

.module-info {
  flex: 1;
  min-width: 0;
}

.module-block .module-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 0.25rem 0;
  line-height: 1.4;
  font-family: var(--font-display);
}

.module-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-tertiary);
  font-family: var(--font-body);
}

.meta-sep {
  color: var(--border-default);
}

.draft-badge {
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  margin-right: 0.25rem;
}

/* Expand icon */
.expand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--border-default);
  transition: transform 0.25s ease, color 0.25s ease;
  flex-shrink: 0;
  align-self: center;
  font-size: 0.75rem;
}

.expand-icon.open {
  transform: rotate(180deg);
  color: var(--primary-color);
}

.expand-icon.small {
  width: 20px;
  height: 20px;
  font-size: 0.65rem;
}

/* Prominent module-row chevron - sits next to the module number badge to
   strongly signal the row is expandable. Bolder weight + brand color +
   slightly larger surface so it reads as the primary affordance. */
.module-expand-chevron {
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
  color: var(--primary-color);
  /* background: rgba(0, 113, 227, 0.08); */
  border-radius: var(--radius-sm);
  margin-top: 2px;
  align-self: flex-start;
  font-weight: 900;
}

.module-header:hover .module-expand-chevron {
  background: rgba(0, 113, 227, 0.16);
}

.module-expand-chevron.open {
  background: var(--primary-color);
  color: white;
}

/* Chapter-row chevron - same affordance pattern as module chevron, sized
   smaller to match chapter scale. Sits next to the chapter-order badge. */
.chapter-expand-chevron {
  width: 24px;
  height: 24px;
  font-size: 0.75rem;
  color: var(--primary-color);
  /* background: rgba(0, 113, 227, 0.08); */
  border-radius: var(--radius-sm);
  font-weight: 900;
}

.chapter-header:hover .chapter-expand-chevron {
  background: rgba(0, 113, 227, 0.16);
}

.chapter-expand-chevron.open {
  background: var(--primary-color);
  color: white;
}

/* ── Full-view button (module row) ───────────────── */

.module-fullview-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3rem 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: 0.74rem;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  align-self: center;
  white-space: nowrap;
}

.module-fullview-btn:hover {
  color: var(--primary-color);
  border-color: rgba(0, 113, 227, 0.15);
  background: var(--primary-light);
}

.module-fullview-btn:active {
  background: rgba(0, 113, 227, 0.08);
  transform: scale(0.97);
}

.module-fullview-btn .fa-arrow-left {
  font-size: 0.62rem;
  transition: transform 0.2s ease;
}

.module-fullview-btn:hover .fa-arrow-left {
  transform: translateX(-2px);
}

/* ── Module body (expanded) ───────────────────────── */

.module-body {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0.85rem 1.5rem 0.85rem;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.module-desc-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0;
  border-bottom: none;
  padding-right: 2.75rem;
}

.module-desc {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* ── Chapters ─────────────────────────────────────── */

.chapters-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-right: 2.75rem;
}

.chapter-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.chapter-header:hover {
  background: var(--primary-light);
}

.chapter-order {
  width: 26px;
  height: 26px;
  background: var(--bg-secondary);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: all 0.15s;
  font-family: var(--font-body);
}

.chapter-block.expanded .chapter-order {
  background: var(--primary-light);
  color: var(--primary-color);
}

.chapter-title {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
  font-family: var(--font-body);
}

.chapter-count {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* ── Subjects ─────────────────────────────────────── */

.subjects-list {
  padding: 0.25rem 0 0.5rem 0;
  margin-right: 3.5rem;
  border-right: none;
  animation: slideDown 0.15s ease;
}

.subject-item {
  padding: 0.55rem 0.85rem;
  position: relative;
}

.subject-item::before {
  display: none;
}

.subject-item + .subject-item {
  border-top: 1px solid var(--border-light);
}

.subject-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 0.2rem 0;
  font-family: var(--font-body);
}

.subject-desc {
  font-size: 0.82rem;
  color: var(--text-tertiary);
  line-height: 1.55;
  margin: 0;
}

/* ── Draft modules ────────────────────────────────── */

.module-block.draft .module-header {
  border: none;
  background: transparent;
}

.module-block.draft .module-title {
  color: var(--text-tertiary);
}

.module-block.draft .module-header:hover {
  background: rgba(0, 0, 0, 0.01);
  box-shadow: none;
}

/* ── Loading/Error ────────────────────────────────── */

.loading-state,
.error-state {
  text-align: center;
  padding: 3rem;
  color: var(--text-tertiary);
  font-size: 0.95rem;
}

.error-state {
  color: #dc3545;
}

/* ══════════════════════════════════════════════════════
   Tabbed curriculum (Developer / Architect)
   The bundle pitch lives as a shared section at the bottom
   of both tabs (.bundle-pitch* below).
   ══════════════════════════════════════════════════════ */

/* ── Course picker (tab bar) ─────────────────────────
   Two course cards (logo + one-line descriptor). On /curriculum nothing
   is selected: the prompt above the cards asks the user to choose and
   both cards carry equal weight. On a tab route the active card is
   strongly emphasized (white surface, primary ring, elevated shadow,
   "מוצג כעת" pill) while its sibling is muted but clickable. */

.curriculum-picker {
  margin: 0 0 2rem;
}

/* Chooser state: nothing renders below the picker (curriculum, totals,
   bundle pitch, and promo CTAs are all gated on a selected course). The
   tall empty run under the cards is deliberate - an unfinished page is
   the cue that a selection is still pending. Doubled class beats the
   responsive .curriculum-page padding shorthands; the vh clamp scales
   the gap across viewports. */
.curriculum-page.curriculum-page--choose {
  padding-bottom: clamp(200px, 32vh, 360px);
}

.curriculum-picker-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 1.1rem;
  font-family: var(--font-body);
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--primary-color);
}

.curriculum-picker-prompt i {
  font-size: 0.9rem;
  animation: curriculum-prompt-nudge 2.2s ease-in-out infinite;
}

@keyframes curriculum-prompt-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .curriculum-picker-prompt i {
    animation: none;
  }
}

.curriculum-tabs {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  max-width: 680px;
  margin: 0 auto;
  padding: 8px;
  background:
    linear-gradient(135deg, rgba(8, 148, 255, 0.05) 0%, rgba(189, 50, 214, 0.035) 55%, rgba(255, 163, 4, 0.04) 100%),
    #ffffff;
  border: 1px solid rgba(0, 113, 227, 0.14);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0, 60, 130, 0.07);
}

.curriculum-tab {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 108px;
  padding: 22px 18px 20px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  text-decoration: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  cursor: pointer;
}

.curriculum-tab:hover {
  background: rgba(255, 255, 255, 0.75);
  color: var(--text-color);
  transform: translateY(-1px);
}

.curriculum-tab.is-active {
  background: #ffffff;
  border-color: var(--primary-color);
  color: var(--text-color);
  box-shadow: 0 8px 24px rgba(0, 60, 130, 0.1);
}

/* 3-stop brand-gradient hairline under the active tab - the canonical
   minimalist brand mark from fsp-design. Centered, scarcely-used. */
.curriculum-tab.is-active::after {
  content: '';
  position: absolute;
  inset-block-end: 9px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 44px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

.curriculum-tab-current {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--primary-color);
  background: var(--primary-light);
  border: 1px solid rgba(0, 113, 227, 0.16);
}

.curriculum-tab-current i {
  font-size: 0.58rem;
}

.curriculum-tab-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
}

.curriculum-tab-logo {
  height: 1.4em;
}

.curriculum-tab-desc {
  max-width: 250px;
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
  color: var(--text-tertiary);
}

.curriculum-tab-desc .no-break {
  white-space: nowrap;
}

/* Mute the unselected sibling only when a course IS selected - in the
   chooser state both cards carry equal weight. */
.curriculum-picker:not(.curriculum-picker--choose) .curriculum-tab:not(.is-active) .curriculum-tab-mark {
  opacity: 0.55;
}

.curriculum-picker:not(.curriculum-picker--choose) .curriculum-tab:not(.is-active) .curriculum-tab-desc {
  opacity: 0.7;
}

.curriculum-picker:not(.curriculum-picker--choose) .curriculum-tab:not(.is-active):hover .curriculum-tab-mark,
.curriculum-picker:not(.curriculum-picker--choose) .curriculum-tab:not(.is-active):hover .curriculum-tab-desc {
  opacity: 1;
}

/* Chooser state: slightly taller cards + a stronger hover lift, since
   choosing is the page's single job. */
.curriculum-picker--choose .curriculum-tab {
  min-height: 118px;
}

.curriculum-picker--choose .curriculum-tab:hover {
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 60, 130, 0.09);
  transform: translateY(-2px);
}

/* ── List toolbar (search + global expand/collapse) ─
   Sits directly above the module timeline so the controls
   are co-located with the list they affect. The expand-all
   button drops to its own line so it never crowds the
   search input. */

.list-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin: 0 0 1.5rem;
}

.list-toolbar .curriculum-search {
  margin: 0;
  max-width: none;
}

/* Global expand / collapse - a centered segmented control.
   Emphasized and unmistakable: a pill container lifts the pair off the
   page with a soft cool-blue shadow, and each action is a full-size tap
   target with icon + label. Because each button is disabled once its
   state is reached, the control doubles as a state indicator. */
.list-toolbar-actions {
  align-self: center;
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  padding: 5px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.list-toolbar-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}

.list-toolbar-action i {
  font-size: 0.85rem;
}

.list-toolbar-action:hover:not([disabled]) {
  color: var(--primary-color);
  background: var(--primary-light);
}

.list-toolbar-action[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.list-toolbar-action[disabled]:hover {
  color: var(--text-secondary);
  background: transparent;
}

/* ══════════════════════════════════════════════════════
   Bundle pitch - shared section at the bottom of both tabs
   ══════════════════════════════════════════════════════ */

.bundle-pitch {
  margin: 4rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bundle-pitch-hero {
  text-align: center;
  padding: 36px 28px 30px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(8, 148, 255, 0.10), transparent 60%),
    radial-gradient(ellipse at 85% 95%, rgba(189, 50, 214, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(239, 246, 255, 0.55));
  backdrop-filter: blur(8px);
  border: 1px solid rgba(98, 98, 234, 0.14);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 18px rgba(0, 60, 130, 0.06);
}

.bundle-pitch-hero > .bundle-pitch-eyebrow,
.bundle-pitch-hero > .bundle-pitch-heading,
.bundle-pitch-hero > .bundle-pitch-lede {
  position: relative;
  z-index: 1;
}

.bundle-pitch-eyebrow {
  display: inline-block;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.bundle-pitch-heading {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  flex-wrap: wrap;
}

/* "10x"-only mark within the bundle-pitch heading. The Logo10xMark
   component sets `height: 1em` on its inline variant; we lift it slightly
   here so the mark sits on the heading's optical baseline alongside the
   surrounding Hebrew. */
.bundle-pitch-heading-mark {
  display: inline-flex;
  align-items: center;
  line-height: inherit;
}

.bundle-pitch-heading-mark svg {
  height: 0.95em;
  vertical-align: -0.08em;
}

/* Mark inside the bundle pricing row - same treatment, slightly larger
   so the bundle row reads as more emphatic than the per-course rows. */
.bundle-pitch-row-mark {
  display: inline-flex;
  align-items: center;
  line-height: inherit;
}

.bundle-pitch-row-mark svg {
  height: 1.05em;
  vertical-align: -0.1em;
}

.bundle-pitch-lede {
  margin: 0 auto;
  max-width: 600px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

/* ── Three "what's included" cards ───────────────── */

.bundle-pitch-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bundle-pitch-card {
  position: relative;
  padding: 22px 22px 22px 28px;
  background: #ffffff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px rgba(0, 60, 130, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bundle-pitch-card::before {
  content: '';
  position: absolute;
  inset-block: 18px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

.bundle-pitch-card-eyebrow {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-color);
}

.bundle-pitch-card-title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-color);
}

.bundle-pitch-card-body {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ── Bundle CTAs ─────────────────────────────────
   Two stacked CTA cards replacing the previous pricing breakdown.
   Card 1 (warm/bundle): special-price + benefits for the full path.
   Card 2 (cool/open-day): exclusive bonus for open-day registrants.
   Each card is a hero-feel surface with a brand-aligned inline-start
   accent rule, a single short headline, and one primary action.
   The two cards alternate warm/cool to feel like a designed pair,
   not a duplicated row. */

.bundle-pitch-ctas {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bundle-pitch-cta {
  position: relative;
  padding: 30px 36px 30px 44px;
  background: #ffffff;
  border: 1px solid rgba(98, 98, 234, 0.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: 0 6px 22px rgba(0, 60, 130, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bundle-pitch-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 60, 130, 0.09);
}

.bundle-pitch-cta::before {
  content: '';
  position: absolute;
  inset-block: 22px;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 999px;
}

.bundle-pitch-cta-body {
  margin: 0;
  flex: 1 1 60%;
  min-width: 240px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--text-color);
}

.bundle-pitch-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--primary-color);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.2s ease;
}

.bundle-pitch-cta-btn i {
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

.bundle-pitch-cta-btn:hover {
  background: #0077ED;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 113, 227, 0.28);
}

.bundle-pitch-cta-btn:hover i {
  transform: translateX(-3px);
}

/* Card 1: warm/bundle - the "full path" value proposition.
   Warm radial glow + warm-only accent rule + warm CTA button. */
.bundle-pitch-cta--bundle {
  background:
    radial-gradient(ellipse at 18% 20%, rgba(255, 163, 4, 0.12), transparent 60%),
    radial-gradient(ellipse at 92% 100%, rgba(196, 85, 26, 0.08), transparent 60%),
    #ffffff;
  border-color: rgba(196, 85, 26, 0.22);
  box-shadow: 0 6px 22px rgba(196, 85, 26, 0.08);
}

.bundle-pitch-cta--bundle:hover {
  box-shadow: 0 12px 30px rgba(196, 85, 26, 0.12);
}

.bundle-pitch-cta--bundle::before {
  background: linear-gradient(180deg, #FFA304 0%, #C4551A 100%);
}

.bundle-pitch-cta-btn--warm {
  background: var(--accent-warm);
}

.bundle-pitch-cta-btn--warm:hover {
  background: #B14816;
  box-shadow: 0 8px 20px rgba(196, 85, 26, 0.28);
}

/* Card 2: cool/open-day - the open-day exclusive bonus.
   Cool radial glow + 3-stop brand-gradient accent rule + primary CTA. */
.bundle-pitch-cta--open-day {
  background:
    radial-gradient(ellipse at 18% 20%, rgba(8, 148, 255, 0.10), transparent 60%),
    radial-gradient(ellipse at 92% 100%, rgba(189, 50, 214, 0.07), transparent 60%),
    #ffffff;
  border-color: rgba(8, 148, 255, 0.22);
  box-shadow: 0 6px 22px rgba(0, 113, 227, 0.08);
}

.bundle-pitch-cta--open-day:hover {
  box-shadow: 0 12px 30px rgba(0, 113, 227, 0.12);
}

.bundle-pitch-cta--open-day::before {
  background: linear-gradient(180deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

/* ── Tablet (768px - 1024px) ─────────────────────── */

@media (max-width: 1024px) {
  .curriculum-page {
    max-width: 100%;
    padding: 1.75rem 1.75rem 80px 1.75rem;
  }

  .curriculum-page .page-title {
    font-size: 1.85rem;
  }

  .module-block .module-title {
    font-size: 1.05rem;
  }
}

/* ── Phone (< 768px) ────────────────────────────── */

@media (max-width: 767px) {
  .curriculum-page {
    padding: 1rem 0.75rem 60px 0.75rem;
  }

  .curriculum-header {
    padding: 24px 16px 16px;
    margin-bottom: 1.5rem;
  }

  .curriculum-logo {
    height: 36px;
  }

  .curriculum-picker {
    margin-bottom: 1.5rem;
  }

  .curriculum-picker-prompt {
    font-size: 0.95rem;
    gap: 8px;
  }

  .curriculum-tabs {
    gap: 6px;
    padding: 6px;
    border-radius: 14px;
  }

  .curriculum-tab {
    min-height: 104px;
    padding: 26px 10px 14px;
    gap: 7px;
  }

  .curriculum-picker--choose .curriculum-tab {
    min-height: 104px;
    padding-top: 16px;
  }

  .curriculum-tab-current {
    top: 6px;
    inset-inline-start: 6px;
    font-size: 0.6rem;
    padding: 2px 7px;
  }

  .curriculum-tab-mark {
    font-size: 16px;
  }

  .curriculum-tab-desc {
    font-size: 0.72rem;
  }

  .curriculum-tab.is-active::after {
    inset-block-end: 6px;
    width: 32px;
  }

  .list-toolbar {
    gap: 12px;
  }

  .list-toolbar-action {
    padding: 0.55rem 1.1rem;
    font-size: 0.88rem;
  }

  .bundle-pitch {
    margin-top: 3rem;
  }

  .bundle-pitch-heading {
    font-size: 1.7rem;
  }

  .bundle-pitch-hero {
    padding: 28px 20px 24px;
  }

  .bundle-pitch-items {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bundle-pitch-card {
    padding: 22px 20px 22px 24px;
  }

  .bundle-pitch-cta {
    padding: 24px 22px 24px 28px;
    gap: 18px;
  }

  .bundle-pitch-cta-body {
    font-size: 1.05rem;
    flex-basis: 100%;
  }

  .bundle-pitch-cta-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
    font-size: 0.95rem;
  }

  .bundle-pitch-cta::before {
    inset-block: 18px;
    width: 3px;
  }

  .curriculum-page .page-title {
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
  }

  .curriculum-page .page-subtitle {
    font-size: 0.95rem;
    flex-direction: column;
    gap: 0.25rem;
  }

  .curriculum-search {
    margin: 1.25rem auto 0;
  }

  .curriculum-search input {
    font-size: 16px;
    padding: 0.7rem 2.2rem 0.7rem 1.75rem;
  }

  .curriculum-disclaimer {
    padding: 18px 20px 18px 24px;
    font-size: 0.95rem;
    margin-bottom: 1.75rem;
    line-height: 1.7;
  }

  .curriculum-disclaimer strong {
    font-size: 0.9rem;
  }

  .global-actions {
    margin-bottom: 12px;
  }

  .global-actions .action-btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  .module-block {
    border-radius: 12px;
    margin-bottom: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
  }

  .module-block + .module-block {
    border-top: none;
  }

  .module-header {
    padding: 16px;
    min-height: 44px;
    gap: 12px;
    flex-wrap: wrap;
  }

  .module-number-badge {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 0.75rem;
    border-radius: 8px;
  }

  .module-info {
    gap: 4px;
  }

  .module-block .module-title {
    font-size: 1.15rem;
    font-weight: 700;
  }

  .module-meta {
    font-size: 0.85rem;
  }

  .module-fullview-btn,
  .action-btn,
  .module-expand-link {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* On mobile the header wraps; let the expand-link drop to its own row
     above the full-view button so the title doesn't get crowded. */
  .module-expand-link {
    order: 4;
    flex-basis: 100%;
    justify-content: flex-start;
    padding: 8px 4px;
    color: var(--primary-color);
  }

  .module-fullview-btn {
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-sm);
    color: var(--primary-color);
    font-weight: 600;
    order: 5;
    width: 100%;
    flex-basis: 100%;
    margin-top: 4px;
  }

  .module-fullview-btn .fa-arrow-left {
    font-size: 0.75rem;
  }

  .expand-icon {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
  }

  .expand-icon.small {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    font-size: 0.7rem;
  }

  .module-body {
    padding: 0 16px 20px 16px;
  }

  .module-desc-row {
    padding-right: 0;
    flex-direction: column;
    gap: 8px;
  }

  .module-desc {
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .chapters-list {
    padding-right: 0;
  }

  .chapter-header {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 0.95rem;
    gap: 10px;
  }

  .chapter-order {
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
    border-radius: 6px;
  }

  .chapter-title {
    font-size: 0.95rem;
  }

  .chapter-count {
    font-size: 0.72rem;
  }

  .subjects-list {
    margin-right: 0;
    padding: 4px 0 8px 0;
  }

  .subject-item {
    padding: 10px 16px;
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .subject-title {
    font-size: 0.9rem;
  }

  .subject-desc {
    font-size: 0.85rem;
    line-height: 1.5;
  }
}

/* ── Small phones (≤ 359px) ─────────────────
   The two course tabs sit side by side, and each is sized by an SVG lockup
   that cannot shrink: at 320px both marks were clipped mid-word by their own
   card. Scale the mark down and give the flex items permission to shrink.
   360px (the common Android width) still fits at full size, so the cut-off is
   deliberately below it. */

@media (max-width: 359px) {
  .curriculum-tab {
    min-width: 0;
    padding-inline: 8px;
  }

  .curriculum-tab-mark {
    font-size: 12.5px;
    max-width: 100%;
  }

  /* 0.7rem = 11.2px: the smallest this can go and stay comfortably legible. */
  .curriculum-tab-desc {
    font-size: 0.7rem;
  }
}