/* Shared course-information UI for the main application and the independent
   file-based tutorial/free-preview engines. */
body[data-course-info-only].modal-open {
  overflow: hidden;
}

body[data-course-info-only] .why-purchase-modal {
  --dashboard-surface: var(--surface, #ffffff);
  --dashboard-surface-soft: var(--surface-soft, var(--surface-2, #f8faff));
  --dashboard-surface-muted: var(--surface-muted, var(--surface-2, #eef1f6));
  --dashboard-heading: var(--heading, var(--text, #101828));
  --dashboard-text: var(--text, #172033);
  --dashboard-muted: var(--muted, #667085);
  --dashboard-border: var(--border, #dfe4ee);
  --dashboard-accent: var(--primary, #5b4de8);
  --dashboard-accent-deep: var(--primary-strong, var(--primary, #4338ca));
  --dashboard-accent-soft: var(--primary-soft, rgba(91, 77, 232, 0.12));
  --dashboard-glow: rgba(91, 77, 232, 0.18);
  --color-bg: #f5f7fb;
  --color-surface: #ffffff;
  --color-surface-soft: #f8faff;
  --color-surface-muted: #eef1f6;
  --color-heading: #101828;
  --color-text: #172033;
  --color-muted: #667085;
  --color-border: #dfe4ee;
  --color-primary: #5b4de8;
  --color-primary-dark: #4338ca;
  --color-primary-soft: #eeecff;
  --color-secondary: #0ea5a4;
  --radius-sm: 0.6rem;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ease: 180ms ease;
  font-family: inherit;
}

.tutorial-course-info-actions {
  --course-guide-accent: #5b4de8;
  --course-guide-accent-deep: #4938d4;
  --course-guide-surface: var(--surface, var(--bg-card, #ffffff));
  --course-guide-text: var(--text, var(--text-primary, #172033));
  --course-guide-border: var(--border, var(--border-default, #cfd6e4));
  position: relative;
  display: inline-flex;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0.2rem;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--course-guide-accent) 38%, var(--course-guide-border));
  border-radius: 0.7rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--course-guide-accent) 10%, transparent), transparent 70%),
    var(--course-guide-surface);
  color: var(--course-guide-text);
  box-shadow: 0 5px 16px -10px rgba(73, 56, 212, 0.65);
  isolation: isolate;
  animation: tutorialCourseGuideArrival 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.tutorial-course-info-actions__label {
  display: inline-flex;
  padding-inline: 0.35rem 0.15rem;
  align-items: center;
  gap: 0.38rem;
  color: var(--course-guide-text);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.tutorial-course-info-actions__status-dot {
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, #10b981 18%, transparent);
}

.tutorial-course-info-actions__buttons {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  flex-wrap: nowrap;
}

.tutorial-course-info-trigger {
  display: inline-flex;
  min-width: 0;
  min-height: 2.1rem;
  padding: 0.35rem 0.62rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--course-guide-accent) 52%, var(--course-guide-border));
  border-radius: 0.52rem;
  background: color-mix(in srgb, var(--course-guide-accent) 8%, var(--course-guide-surface));
  color: var(--course-guide-text);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
}

.tutorial-course-info-trigger:hover,
.tutorial-course-info-trigger:focus-visible {
  border-color: var(--course-guide-accent);
  background: color-mix(in srgb, var(--course-guide-accent) 15%, var(--course-guide-surface));
  color: var(--course-guide-text);
  box-shadow: 0 5px 12px -8px rgba(73, 56, 212, 0.75);
  transform: translateY(-1px);
}

.tutorial-course-info-trigger:focus-visible {
  outline: 2px solid var(--course-guide-accent);
  outline-offset: 2px;
}

.tutorial-course-info-trigger:active {
  box-shadow: none;
  transform: translateY(0) scale(0.98);
}

.tutorial-course-info-actions .why-purchase-trigger {
  min-height: 2.1rem;
  border-color: var(--course-guide-accent-deep);
  background: linear-gradient(135deg, var(--course-guide-accent), var(--course-guide-accent-deep));
  color: #ffffff;
  box-shadow: 0 5px 12px -8px rgba(73, 56, 212, 0.85);
}

.tutorial-course-info-actions .why-purchase-trigger:hover,
.tutorial-course-info-actions .why-purchase-trigger:focus-visible {
  border-color: #3727bd;
  background: linear-gradient(135deg, #5142dc, #3727bd);
  color: #ffffff;
}

/* Buy Course: the strongest CTA in this bar -- same primary gradient the
   rest of the site uses for its main purchase buttons (.btn,
   .course-summary-card__cta in app.css), so it reads as "the" action
   rather than a third info button. Placed last so it's the natural
   end-of-row destination after the two informational triggers. */
.tutorial-course-info-actions .buy-course-trigger {
  min-height: 2.1rem;
  border-color: var(--course-guide-accent-deep);
  background: linear-gradient(135deg, var(--course-guide-accent), var(--course-guide-accent-deep));
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 6px 16px -8px rgba(73, 56, 212, 0.9);
}

.tutorial-course-info-actions .buy-course-trigger:hover,
.tutorial-course-info-actions .buy-course-trigger:focus-visible {
  border-color: #3727bd;
  background: linear-gradient(135deg, #5142dc, #3727bd);
  color: #ffffff;
  text-decoration: none;
}

.buy-course-trigger__icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}

@keyframes tutorialCourseGuideArrival {
  0% {
    opacity: 0;
    transform: translateY(-0.35rem) scale(0.98);
  }
  65% {
    box-shadow: 0 0 0 0.25rem rgba(91, 77, 232, 0.14), 0 8px 20px -12px rgba(73, 56, 212, 0.7);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

body[data-course-info-only] .topbar-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

/* Free-preview "Home" link -- a standalone element (not a 4th item inside
   .tutorial-course-info-actions__buttons) so it can never disturb that
   component's bespoke 3-button flex/wrap tuning across breakpoints. Kept
   deliberately plain (not the purple Buy Course gradient) so it never reads
   as a second primary CTA. */
.tutorial-home-link {
  --home-link-accent: #5b4de8;
  --home-link-surface: var(--surface, var(--bg-card, #ffffff));
  --home-link-text: var(--text, var(--text-primary, #172033));
  --home-link-border: var(--border, var(--border-default, #cfd6e4));
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 2.1rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.35rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--home-link-accent) 52%, var(--home-link-border));
  border-radius: 0.52rem;
  background: color-mix(in srgb, var(--home-link-accent) 8%, var(--home-link-surface));
  color: var(--home-link-text);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.tutorial-home-link:hover,
.tutorial-home-link:focus-visible {
  border-color: var(--home-link-accent);
  background: color-mix(in srgb, var(--home-link-accent) 15%, var(--home-link-surface));
  color: var(--home-link-text);
  box-shadow: 0 5px 12px -8px rgba(73, 56, 212, 0.75);
  transform: translateY(-1px);
  text-decoration: none;
}

.tutorial-home-link:focus-visible {
  outline: 2px solid var(--home-link-accent);
  outline-offset: 2px;
}

.tutorial-home-link:active {
  box-shadow: none;
  transform: translateY(0) scale(0.98);
}

.tutorial-home-link__icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}

@media (max-width: 360px) {
  .tutorial-home-link {
    padding-inline: 0.4rem;
    gap: 0.28rem;
    font-size: 0.69rem;
  }

  .tutorial-home-link__icon {
    width: 0.95rem;
    height: 0.95rem;
  }
}

/* The Java and Python tutorial headers intentionally omit the redundant
   course/chapter crumb. Give its former column to topic navigation and the
   preview guide actions instead. */
body[data-course-info-layout="compact"] .topbar {
  grid-template-columns: auto minmax(8rem, 1fr) auto;
}

@media (max-width: 1500px) {
  .tutorial-course-info-actions__label {
    display: none;
  }
}

/* Tablet and mobile tutorial navbars use the same sticky header as desktop,
   with the course guide becoming its second row. This keeps both labels
   visible without pushing the brand, topic picker, dashboard, or menu beyond
   the viewport. The tutorial engines already size their sidebars and content
   from --topbar/--header-height, so updating those existing tokens preserves
   their established sticky offsets. */
@media (max-width: 1100px) {
  :root[data-preview-course-guide] {
    /* Buy Course always wraps onto its own row now (see
       .buy-course-trigger's flex:1 1 100% below), so the guide bar is
       reliably two button-rows tall here, not one -- these reserves grow
       to match so page content never starts underneath the (absolutely
       positioned) second row. */
    --topbar: 9.8rem;
    --header-height: 10.65rem;
  }

  body[data-preview-course-guide] .topbar {
    align-items: start;
    padding-top: 0.45rem;
  }

  body[data-preview-course-guide] .gt-header {
    align-items: flex-start;
    padding-top: 0.75rem;
  }

  body[data-preview-course-guide] .tutorial-course-info-actions {
    position: absolute;
    z-index: 2;
    right: 0.65rem;
    left: 0.65rem;
    top: 3rem;
    width: auto;
    padding: 0.2rem;
  }

  body[data-preview-course-guide] .gt-header .tutorial-course-info-actions {
    top: 3.75rem;
  }

  body[data-preview-course-guide] .tutorial-course-info-actions__buttons {
    width: 100%;
    flex-wrap: wrap;
  }

  body[data-preview-course-guide] .tutorial-course-info-trigger {
    min-height: 2.8rem;
    flex: 1 1 0;
    padding-inline: 0.55rem;
    font-size: 0.76rem;
  }

  body[data-preview-course-guide] .tutorial-course-info-actions .why-purchase-trigger {
    min-height: 2.8rem;
  }

  /* Buy Course always gets its own full-width row on phones rather than
     squeezing into a third equal column next to the two (narrower-content)
     info buttons -- keeps it readable and unmistakably the primary action
     regardless of whether zero, one, or both info buttons are also present. */
  body[data-preview-course-guide] .tutorial-course-info-actions .buy-course-trigger {
    flex: 1 1 100%;
    min-height: 2.8rem;
  }
}

/* With the redundant crumb removed, Java and Python have enough room to keep
   their CTAs in the primary navbar row on tablets. Phones still use the
   full-width second row above so neither label is clipped. */
@media (min-width: 701px) and (max-width: 1100px) {
  :root[data-course-info-layout="compact"][data-preview-course-guide] {
    --topbar: 2.875rem;
  }

  body[data-course-info-layout="compact"][data-preview-course-guide] .topbar {
    align-items: center;
    padding-top: 0;
  }

  body[data-course-info-layout="compact"][data-preview-course-guide] .tutorial-course-info-actions {
    position: relative;
    inset: auto;
    width: auto;
  }

  body[data-course-info-layout="compact"][data-preview-course-guide] .tutorial-course-info-actions__buttons {
    width: auto;
    flex-wrap: nowrap;
  }

  body[data-course-info-layout="compact"][data-preview-course-guide] .tutorial-course-info-actions .buy-course-trigger {
    flex: 0 1 auto;
  }

  body[data-course-info-layout="compact"][data-preview-course-guide] .tutorial-course-info-trigger,
  body[data-course-info-layout="compact"][data-preview-course-guide] .tutorial-course-info-actions .why-purchase-trigger {
    min-height: 2.1rem;
    flex: 0 1 auto;
    padding-inline: 0.55rem;
    font-size: 0.72rem;
  }
}

@media (max-width: 360px) {
  body[data-preview-course-guide] .tutorial-course-info-actions {
    right: 0.4rem;
    left: 0.4rem;
  }

  body[data-preview-course-guide] .tutorial-course-info-trigger {
    padding-inline: 0.4rem;
    gap: 0.28rem;
    font-size: 0.69rem;
  }

  body[data-preview-course-guide] .tutorial-course-info-trigger svg {
    width: 0.95rem;
    height: 0.95rem;
  }
}

/* Reusable "Why Purchase" sales-content trigger and accessible modal. */
.why-purchase-trigger {
  display: inline-flex;
  min-height: 2.6rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  text-align: center;
  font-weight: 750;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
}

.why-purchase-trigger__icon,
.who-is-this-for-trigger__icon {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
}

.course-card__triggers {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.course-card__why-purchase {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.05rem;
  padding: 0.25rem 0.72rem;
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--dashboard-accent, var(--color-primary)) 16%, var(--dashboard-surface, var(--color-surface))) 0%, color-mix(in srgb, var(--dashboard-accent, var(--color-primary)) 8%, var(--dashboard-surface, var(--color-surface))) 100%);
  border: 1.5px solid color-mix(in srgb, var(--dashboard-accent, var(--color-primary)) 45%, transparent);
  color: var(--dashboard-accent-deep, var(--color-primary-dark));
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--dashboard-accent, var(--color-primary)) 18%, transparent);
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
  margin: 0;
  position: relative;
  overflow: hidden;
}

.course-card__why-purchase:hover {
  background: var(--dashboard-accent, var(--color-primary));
  border-color: var(--dashboard-accent, var(--color-primary));
  color: #ffffff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--dashboard-accent, var(--color-primary)) 35%, transparent);
  transform: translateY(-1.5px);
}

.course-card__why-purchase:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.course-card__why-purchase .why-purchase-trigger__icon {
  width: 0.88rem;
  height: 0.88rem;
  color: var(--dashboard-accent, var(--color-primary));
  flex-shrink: 0;
  transition: transform var(--ease), color var(--ease);
}

.course-card__why-purchase:hover .why-purchase-trigger__icon {
  color: #ffffff;
  transform: scale(1.15) rotate(-5deg);
}

.course-card__who-is-this-for {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.05rem;
  padding: 0.25rem 0.72rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dashboard-accent, var(--color-primary)) 10%, var(--dashboard-surface, var(--color-surface)));
  border: 1.5px solid color-mix(in srgb, var(--dashboard-accent, var(--color-primary)) 32%, transparent);
  color: var(--dashboard-accent-deep, var(--color-primary-dark));
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
  margin: 0;
  position: relative;
  overflow: hidden;
}

.course-card__who-is-this-for:hover {
  background: color-mix(in srgb, var(--dashboard-accent, var(--color-primary)) 20%, var(--dashboard-surface, var(--color-surface)));
  border-color: var(--dashboard-accent, var(--color-primary));
  color: var(--dashboard-accent-deep, var(--color-primary-dark));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--dashboard-accent, var(--color-primary)) 25%, transparent);
  transform: translateY(-1.5px);
}

.course-card__who-is-this-for:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.course-card__who-is-this-for .who-is-this-for-trigger__icon {
  width: 0.88rem;
  height: 0.88rem;
  color: var(--dashboard-accent, var(--color-primary));
  flex-shrink: 0;
  transition: transform var(--ease), color var(--ease);
}

.course-card__who-is-this-for:hover .who-is-this-for-trigger__icon {
  transform: scale(1.15);
}

.purchase-summary-why-purchase {
  display: flex;
  margin-top: 1.1rem;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.purchase-otp-card__why-purchase {
  margin-top: 0.4rem;
}

.why-purchase-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  padding: clamp(0.5rem, 2vw, 1.25rem);
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 12%, var(--dashboard-glow, rgba(91, 77, 232, 0.22)), transparent 55%),
    rgba(6, 10, 20, 0.76);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 240ms;
  will-change: opacity;
}

.why-purchase-modal[hidden] {
  display: none;
}

.why-purchase-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.why-purchase-modal.is-closing {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.why-purchase-modal__dialog {
  display: grid;
  width: min(94vw, 64rem);
  max-height: calc(100svh - clamp(1rem, 2.5vw, 2.5rem));
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--dashboard-border, var(--color-border));
  border-radius: clamp(14px, 1.6vw, 20px);
  background: var(--dashboard-surface, var(--color-surface));
  color: var(--dashboard-text, var(--color-text));
  box-shadow:
    0 28px 75px -12px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 1px 0 0 rgba(255, 255, 255, 0.12) inset;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition:
    opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.why-purchase-modal.is-open .why-purchase-modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.why-purchase-modal.is-closing .why-purchase-modal__dialog {
  opacity: 0;
  transform: translateY(8px) scale(0.975);
  transition:
    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.why-purchase-modal__header {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 0.65rem clamp(0.85rem, 2vw, 1.25rem);
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  overflow: hidden;
  border-bottom: 1px solid var(--dashboard-border, var(--color-border));
  background:
    linear-gradient(90deg, var(--dashboard-accent-soft, var(--color-primary-soft)), var(--dashboard-surface, var(--color-surface)) 68%);
}

.why-purchase-modal__header::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.25rem;
  background: linear-gradient(180deg, var(--dashboard-accent, var(--color-primary)), var(--color-secondary));
  content: "";
}

.why-purchase-modal__header-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
}

.why-purchase-modal__badge {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--dashboard-surface, var(--color-surface));
  border: 1px solid var(--dashboard-border, var(--color-border));
  color: var(--dashboard-accent, var(--color-primary));
  box-shadow: 0 2px 6px var(--dashboard-glow, rgba(91, 77, 232, 0.15));
}

.why-purchase-modal__badge svg {
  width: 1.05rem;
  height: 1.05rem;
}

.why-purchase-modal__heading-group {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.why-purchase-modal__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.76rem;
  line-height: 1.2;
}

.why-purchase-modal__tag {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dashboard-accent-deep, var(--color-primary-dark));
  font-size: 0.72rem;
}

.why-purchase-modal__course {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--dashboard-muted, var(--color-muted));
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.why-purchase-modal__course::before {
  content: "•";
  margin-right: 0.4rem;
  opacity: 0.6;
}

.why-purchase-modal__title {
  margin: 0;
  color: var(--dashboard-heading, var(--color-heading));
  font-size: clamp(0.98rem, 1.8vw, 1.15rem);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.why-purchase-modal__close-icon {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--dashboard-border, var(--color-border));
  border-radius: 999px;
  background: var(--dashboard-surface, var(--color-surface));
  color: var(--dashboard-muted, var(--color-muted));
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease), color var(--ease), transform var(--ease);
}

.why-purchase-modal__close-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.why-purchase-modal__close-icon:hover {
  border-color: var(--dashboard-accent, var(--color-primary));
  background: var(--dashboard-accent-soft, var(--color-primary-soft));
  color: var(--dashboard-accent-deep, var(--color-primary-dark));
  transform: scale(1.05);
}

.why-purchase-modal__content {
  min-width: 0;
  padding: clamp(1rem, 2.2vw, 1.65rem) clamp(1rem, 2.8vw, 2rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.why-purchase-modal__footer {
  display: flex;
  min-width: 0;
  padding: 0.5rem clamp(0.85rem, 2vw, 1.25rem);
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--dashboard-border, var(--color-border));
  background: var(--dashboard-surface-soft, var(--color-surface-soft));
}

.why-purchase-modal__footer-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--dashboard-muted, var(--color-muted));
  font-size: 0.78rem;
  font-weight: 500;
}

.why-purchase-modal__footer-key kbd {
  display: inline-block;
  padding: 0.1em 0.4em;
  border: 1px solid var(--dashboard-border, var(--color-border));
  border-radius: 4px;
  background: var(--dashboard-surface, var(--color-surface));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--dashboard-text, var(--color-text));
}

.why-purchase-modal__close-button {
  min-width: 6.5rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--dashboard-border, var(--color-border));
  border-radius: var(--radius-sm, 0.6rem);
  background: var(--dashboard-surface, var(--color-surface));
  color: var(--dashboard-text, var(--color-text));
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.why-purchase-modal__close-button:hover,
.why-purchase-modal__close-button:focus-visible {
  border-color: var(--dashboard-accent, var(--color-primary));
  background: var(--dashboard-accent-soft, var(--color-primary-soft));
}

/* Shared output for every administrator-authored Markdown field. */
.markdown-content {
  min-width: 0;
  max-width: 100%;
  color: var(--dashboard-text, var(--color-text));
  font: inherit;
  line-height: 1.68;
  overflow-wrap: anywhere;
  word-break: normal;
}

.markdown-content > :first-child {
  margin-top: 0;
}

.markdown-content > :last-child {
  margin-bottom: 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  margin: 1.15em 0 0.5em;
  color: var(--dashboard-heading, var(--color-heading));
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.markdown-content h1 {
  font-size: clamp(1.35rem, 3vw, 1.7rem);
}

.markdown-content h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.48rem);
}

.markdown-content h3 {
  font-size: clamp(1.08rem, 2vw, 1.28rem);
}

.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  font-size: 1rem;
}

.markdown-content p {
  margin: 0 0 0.8rem;
}

.markdown-content ul,
.markdown-content ol {
  margin: 0.55rem 0 0.9rem;
  padding-left: 1.45rem;
}

.markdown-content ul ul,
.markdown-content ul ol,
.markdown-content ol ul,
.markdown-content ol ol {
  margin: 0.3rem 0;
  padding-left: 1.35rem;
}

.markdown-content li {
  margin: 0.28rem 0;
}

.markdown-content blockquote {
  margin: 0.9rem 0;
  padding: 0.7rem 1rem;
  border-left: 3px solid var(--dashboard-accent, var(--color-primary));
  background: var(--dashboard-accent-soft, var(--color-primary-soft));
  color: var(--dashboard-heading, var(--color-heading));
}

.markdown-content blockquote > :last-child {
  margin-bottom: 0;
}

.markdown-content code {
  padding: 0.14em 0.38em;
  border: 1px solid var(--dashboard-border, var(--color-border));
  border-radius: 0.35rem;
  background: var(--dashboard-surface-muted, var(--color-surface-muted));
  color: var(--dashboard-accent-deep, var(--color-primary-dark));
  font-family: var(--font-mono);
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

.markdown-content pre {
  max-width: 100%;
  margin: 0.9rem 0;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  border-radius: var(--radius-sm);
  background: #0d121f;
  color: #e2e8f0;
  line-height: 1.55;
  tab-size: 4;
  -webkit-overflow-scrolling: touch;
}

.markdown-content pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  white-space: pre;
  overflow-wrap: normal;
}

.markdown-content a {
  color: var(--dashboard-accent-deep, var(--color-primary-dark));
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  overflow-wrap: anywhere;
}

.markdown-content img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0.85rem auto;
  border-radius: var(--radius-sm);
}

.markdown-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0.9rem 0;
  overflow-x: auto;
  border-collapse: collapse;
  border: 1px solid var(--dashboard-border, var(--color-border));
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  -webkit-overflow-scrolling: touch;
}

.markdown-content th,
.markdown-content td {
  min-width: 8rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--dashboard-border, var(--color-border));
  text-align: left;
  vertical-align: top;
}

.markdown-content th {
  background: var(--dashboard-accent-soft, var(--color-primary-soft));
  color: var(--dashboard-heading, var(--color-heading));
  font-weight: 750;
}

.markdown-content hr {
  height: 1px;
  margin: 1.2rem 0;
  border: 0;
  background: var(--dashboard-border, var(--color-border));
}

.markdown-content del {
  opacity: 0.75;
}

.markdown-content input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0 0.4rem 0 0;
  accent-color: var(--dashboard-accent, var(--color-primary));
}

.markdown-content--compact {
  font-size: 0.92rem;
  line-height: 1.58;
}

.markdown-content--compact h1,
.markdown-content--compact h2,
.markdown-content--compact h3,
.markdown-content--compact h4,
.markdown-content--compact h5,
.markdown-content--compact h6 {
  font-size: 1rem;
}

.payment-method-markdown-block {
  min-width: 0;
}

.payment-method-markdown-label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--dashboard-heading, var(--color-heading));
}

.why-purchase-markdown {
  min-width: 0;
  color: var(--dashboard-text, var(--color-text));
  font-size: clamp(0.92rem, 1.4vw, 0.98rem);
  line-height: 1.68;
  overflow-wrap: anywhere;
}

.why-purchase-markdown > :first-child {
  margin-top: 0;
}

.why-purchase-markdown > :last-child {
  margin-bottom: 0;
}

.why-purchase-markdown h3 {
  position: relative;
  margin: 1.25rem 0 0.65rem;
  padding-bottom: 0.45rem;
  color: var(--dashboard-heading, var(--color-heading));
  font-size: clamp(1.18rem, 2.2vw, 1.42rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--dashboard-border, var(--color-border));
}

.why-purchase-markdown h3::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 2.8rem;
  height: 2px;
  background: linear-gradient(90deg, var(--dashboard-accent, var(--color-primary)), var(--color-secondary));
  border-radius: 999px;
}

.why-purchase-markdown h4 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.15rem 0 0.5rem;
  padding: 0.45rem 0.85rem;
  background: linear-gradient(90deg, var(--dashboard-accent-soft, var(--color-primary-soft)), transparent 92%);
  border-left: 3.5px solid var(--dashboard-accent, var(--color-primary));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--dashboard-heading, var(--color-heading));
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.why-purchase-markdown h5,
.why-purchase-markdown h6 {
  margin: 1rem 0 0.4rem;
  color: var(--dashboard-heading, var(--color-heading));
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

.why-purchase-markdown p {
  margin: 0 0 0.75rem;
}

.why-purchase-markdown strong {
  color: var(--dashboard-heading, var(--color-heading));
  font-weight: 750;
}

.why-purchase-markdown ul {
  margin: 0.5rem 0 0.85rem;
  padding-left: 0;
  list-style: none;
}

.why-purchase-markdown ul > li {
  position: relative;
  padding-left: 1.35rem;
  margin: 0.3rem 0;
  line-height: 1.6;
}

.why-purchase-markdown ul > li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--dashboard-accent, var(--color-primary));
  box-shadow: 0 0 6px var(--dashboard-glow, rgba(91, 77, 232, 0.35));
}

.why-purchase-markdown ul ul,
.why-purchase-markdown ul ol,
.why-purchase-markdown ol ul,
.why-purchase-markdown ol ol {
  margin: 0.3rem 0;
  padding-left: 1.35rem;
}

.why-purchase-markdown img {
  max-width: 100%;
  height: auto;
}

.why-purchase-markdown ol {
  margin: 0.5rem 0 0.85rem;
  padding-left: 1.35rem;
}

.why-purchase-markdown ol > li {
  margin: 0.3rem 0;
  padding-left: 0.25rem;
  line-height: 1.6;
}

.why-purchase-markdown ol > li::marker {
  color: var(--dashboard-accent, var(--color-primary));
  font-weight: 750;
}

.why-purchase-markdown blockquote {
  position: relative;
  margin: 0.85rem 0 1rem;
  padding: 0.7rem 1rem 0.7rem 1.15rem;
  background: var(--dashboard-accent-soft, var(--color-primary-soft));
  border: 1px solid var(--dashboard-border, var(--color-border));
  border-left: 3.5px solid var(--color-secondary, #0ea5a4);
  border-radius: var(--radius-sm);
  color: var(--dashboard-heading, var(--color-heading));
  font-style: italic;
  font-size: 0.95rem;
}

.why-purchase-markdown blockquote > :last-child {
  margin-bottom: 0;
}

.why-purchase-markdown code {
  padding: 0.15em 0.4em;
  border: 1px solid var(--dashboard-border, var(--color-border));
  border-radius: 0.35rem;
  background: var(--dashboard-surface-muted, var(--color-surface-muted));
  color: var(--dashboard-accent-deep, var(--color-primary-dark));
  font-family: var(--font-mono);
  font-size: 0.86em;
}

.why-purchase-markdown pre {
  max-width: 100%;
  margin: 0.9rem 0;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: #0d121f;
  color: #e2e8f0;
  line-height: 1.55;
  font-size: 0.86rem;
  tab-size: 4;
  -webkit-overflow-scrolling: touch;
}

.why-purchase-markdown pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}

.why-purchase-markdown a {
  color: var(--dashboard-accent-deep, var(--color-primary-dark));
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
}

.why-purchase-markdown hr {
  height: 1px;
  margin: 1.25rem 0;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--dashboard-border, var(--color-border)) 18% 82%, transparent);
}

.why-purchase-markdown__table-scroll {
  width: 100%;
  max-width: 100%;
  margin: 0.9rem 0;
  overflow-x: auto;
  border: 1px solid var(--dashboard-border, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--dashboard-surface, var(--color-surface));
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}

.why-purchase-markdown table {
  width: 100%;
  min-width: 28rem;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.why-purchase-markdown th,
.why-purchase-markdown td {
  padding: 0.55rem 0.85rem;
  border-right: 1px solid var(--dashboard-border, var(--color-border));
  border-bottom: 1px solid var(--dashboard-border, var(--color-border));
  text-align: left;
  vertical-align: top;
}

.why-purchase-markdown th:last-child,
.why-purchase-markdown td:last-child {
  border-right: 0;
}

.why-purchase-markdown tbody tr:last-child td {
  border-bottom: 0;
}

.why-purchase-markdown tbody tr:nth-child(even) td {
  background: var(--dashboard-surface-soft, var(--color-surface-soft));
}

.why-purchase-markdown th {
  background: var(--dashboard-accent-soft, var(--color-primary-soft));
  color: var(--dashboard-heading, var(--color-heading));
  font-weight: 750;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.why-purchase-markdown .text-center {
  text-align: center;
}

.why-purchase-markdown .text-right {
  text-align: right;
}

@media (max-width: 640px) {
  .purchase-summary-why-purchase,
  .purchase-summary-why-purchase .why-purchase-trigger {
    width: 100%;
  }

  .why-purchase-modal {
    padding: 0;
  }

  .why-purchase-modal__dialog {
    width: 100%;
    height: 100svh;
    max-height: 100svh;
    border: 0;
    border-radius: 0;
    transition: none;
  }

  .why-purchase-modal__header {
    padding: max(0.6rem, env(safe-area-inset-top)) 0.75rem 0.6rem 0.85rem;
    gap: 0.6rem;
  }

  .why-purchase-modal__badge {
    width: 1.85rem;
    height: 1.85rem;
  }

  .why-purchase-modal__badge svg {
    width: 0.95rem;
    height: 0.95rem;
  }

  .why-purchase-modal__title {
    font-size: 0.98rem;
  }

  .why-purchase-modal__content {
    padding: 0.9rem 0.85rem;
  }

  .why-purchase-modal__footer {
    padding: 0.55rem 0.85rem max(0.55rem, env(safe-area-inset-bottom));
  }

  .why-purchase-modal__footer-hint {
    display: none;
  }

  .why-purchase-modal__close-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-course-info-actions {
    animation: none;
  }

  .why-purchase-modal,
  .why-purchase-modal__dialog,
  .why-purchase-modal__close-icon {
    transition: none;
  }
}