/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --app-font-sans: "Open Sans", sans-serif;
  --app-font-serif: "Cormorant Garamond", serif;
  /* App skeleton token aliases. */
  --text: var(--app-text);
  --text-muted: var(--app-text-muted);
  --text-light: var(--app-text-faint);
  --bg: var(--app-surface-strong);
  --bg-alt: var(--app-bg);
  --rule: var(--app-border);
  --accent: var(--app-accent);
  --accent-dark: var(--app-accent-strong);
  --teal: var(--app-success);
  --teal-tint: var(--app-teal-tint);
  --warm: var(--app-panel-warm);
  --sage: var(--app-panel-sage);
  --stone: var(--app-panel-stone);
  --cream: var(--app-panel-cream);
  --cloud: var(--app-panel-cloud);
  --serif: var(--app-font-serif);
  --sans: var(--app-font-sans);
  --ratio: 1.333;
  --base: 1rem;
  --text-xs: var(--app-text-xs);
  --text-sm: var(--app-text-sm);
  --text-md: var(--app-text-md);
  --text-lg: var(--app-text-lg);
  --text-xl: var(--app-text-xl);
  --text-2xl: var(--app-text-2xl);
  --text-3xl: var(--app-text-3xl);
  --text-4xl: var(--app-text-4xl);
  --app-text-xs: 0.563rem;
  --app-text-sm: 0.75rem;
  --app-text-md: 1rem;
  --app-text-lg: 1.333rem;
  --app-text-xl: 1.777rem;
  --app-text-2xl: 2.369rem;
  --app-text-3xl: 3.157rem;
  --app-text-4xl: 4.209rem;
  --app-type-display-size: clamp(2.25rem, 5vw, 3.25rem);
  --app-type-display-line: 1.02;
  --app-type-display-tracking: -0.03em;
  --app-type-display-weight: 300;
  --app-type-display-emphasis-weight: 600;
  --app-type-hero-size: clamp(var(--app-text-2xl), 5.5vw, var(--app-text-4xl));
  --app-type-hero-line: 1.1;
  --app-type-hero-tracking: -0.02em;
  --app-type-page-title-size: clamp(var(--app-text-xl), 5vw, var(--app-text-2xl));
  --app-type-page-title-line: 1.05;
  --app-type-page-title-tracking: -0.02em;
  --app-type-page-title-weight: 400;
  --app-type-publish-title-size: clamp(1.875rem, 4vw, 2.75rem);
  --app-type-editor-title-size: clamp(1.75rem, 3.5vw, 2.25rem);
  --app-type-generation-title-size: clamp(1.75rem, 4vw, 2.5rem);
  --app-type-section-title-size: clamp(1.75rem, 3vw, 2rem);
  --app-type-subsection-title-size: clamp(1.25rem, 2.5vw, var(--app-text-xl));
  --app-type-title-line: 1.1;
  --app-type-title-tracking: -0.02em;
  --app-type-card-title-size: 1.1875rem;
  --app-type-card-title-lg-size: 1.25rem;
  --app-type-card-title-sm-size: 1.0625rem;
  --app-type-row-title-size: 0.9375rem;
  --app-type-card-title-line: 1.25;
  --app-type-card-title-tracking: -0.01em;
  --app-type-card-title-weight: 500;
  --app-type-step-number-size: 1.375rem;
  --app-type-body-lg-size: 1.0625rem;
  --app-type-body-size: 0.9375rem;
  --app-type-body-sm-size: 0.875rem;
  --app-type-ui-size: 0.8125rem;
  --app-type-caption-size: 0.75rem;
  --app-type-meta-size: 0.6875rem;
  --app-type-label-size: 0.625rem;
  --app-type-label-xs-size: 0.5625rem;
  --app-type-body-line: 1.65;
  --app-type-copy-line: 1.6;
  --app-type-tight-line: 1.45;
  --app-type-caption-line: 1.5;
  --app-type-label-line: 1.4;
  --app-type-label-tracking: 0.14em;
  --app-type-label-tight-tracking: 0.1em;
  --app-type-label-weight: 700;
  --app-type-label-soft-weight: 600;
  --app-type-button-size: 0.8125rem;
  --app-type-button-sm-size: 0.75rem;
  --app-type-button-lg-size: 0.9375rem;
  --app-type-button-weight: 500;
  --app-type-nav-brand-size: 1.0625rem;
  --app-type-nav-size: 0.8125rem;
  --app-type-nav-weight: 400;
  --app-bg: #f6f5f3;
  --app-bg-strong: rgba(246, 245, 243, 0.94);
  --app-bg-landing: #ffffff;
  --app-surface: #ffffff;
  --app-surface-strong: #ffffff;
  --app-surface-soft: rgba(28, 28, 26, 0.04);
  --app-surface-muted: #f6f5f3;
  --app-border: rgba(28, 28, 26, 0.08);
  --app-border-strong: rgba(28, 28, 26, 0.18);
  --app-text: #1c1c1a;
  --app-text-strong: #1c1c1a;
  --app-text-soft: #6b6b68;
  --app-text-muted: #6b6b68;
  --app-text-faint: #767673;
  --app-accent: #c4716a;
  --app-accent-strong: #a85850;
  --app-accent-soft: rgba(196, 113, 106, 0.12);
  --app-accent-border: rgba(168, 88, 80, 0.22);
  --app-accent-contrast: #ffffff;
  --app-success: #3d6b56;
  --app-success-soft: rgba(61, 107, 86, 0.14);
  --app-success-border: rgba(61, 107, 86, 0.2);
  --app-success-contrast: #ffffff;
  --app-teal-tint: #e0efe9;
  --app-info: #5f7186;
  --app-info-soft: rgba(95, 113, 134, 0.12);
  --app-info-border: rgba(95, 113, 134, 0.18);
  --app-info-contrast: #ffffff;
  --app-danger: #b96570;
  --app-danger-soft: rgba(185, 101, 112, 0.13);
  --app-danger-border: rgba(185, 101, 112, 0.18);
  --app-danger-contrast: #fff7f8;
  --app-panel-warm: #f3ece6;
  --app-panel-sage: #eef3ef;
  --app-panel-stone: #f0eeed;
  --app-panel-cream: #f5f2e8;
  --app-panel-cloud: #eef1f5;
  --app-shadow: 0 4px 12px rgba(28, 28, 26, 0.05), 0 12px 28px rgba(28, 28, 26, 0.06);
  --app-shadow-soft: 0 1px 2px rgba(28, 28, 26, 0.04), 0 4px 16px rgba(28, 28, 26, 0.03);
  --app-radius: 16px;
  --app-radius-soft: 10px;
  --app-radius-pill: 999px;
  --app-z-sticky: 20;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--app-font-sans);
  line-height: var(--app-type-copy-line);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

::selection {
  background: var(--app-accent-soft);
  color: var(--app-text-strong);
}

:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 3px;
}

.type-display,
.type-hero,
.type-page-title,
.type-section-title,
.type-subsection-title,
.type-card-title {
  color: var(--app-text-strong);
  font-family: var(--app-font-serif);
  text-wrap: balance;
}

.type-display {
  font-size: var(--app-type-display-size);
  font-weight: var(--app-type-display-weight);
  letter-spacing: var(--app-type-display-tracking);
  line-height: var(--app-type-display-line);
}

.type-hero {
  font-size: var(--app-type-hero-size);
  font-weight: var(--app-type-display-weight);
  letter-spacing: var(--app-type-hero-tracking);
  line-height: var(--app-type-hero-line);
}

.type-page-title {
  font-size: var(--app-type-page-title-size);
  font-weight: var(--app-type-page-title-weight);
  letter-spacing: var(--app-type-page-title-tracking);
  line-height: var(--app-type-page-title-line);
}

.type-section-title {
  font-size: var(--app-type-section-title-size);
  font-weight: var(--app-type-page-title-weight);
  letter-spacing: var(--app-type-title-tracking);
  line-height: var(--app-type-title-line);
}

.type-subsection-title,
.type-card-title {
  font-size: var(--app-type-card-title-size);
  font-weight: var(--app-type-card-title-weight);
  letter-spacing: var(--app-type-card-title-tracking);
  line-height: var(--app-type-card-title-line);
}

.type-subsection-title {
  font-size: var(--app-type-subsection-title-size);
}

.type-display em,
.type-hero em,
.type-page-title em,
.type-section-title em {
  font-style: normal;
  font-weight: var(--app-type-display-emphasis-weight);
}

.type-body,
.type-body-lg,
.type-body-sm,
.type-caption,
.type-meta,
.type-label {
  font-family: var(--app-font-sans);
}

.type-body-lg {
  font-size: var(--app-type-body-lg-size);
  line-height: var(--app-type-body-line);
}

.type-body {
  font-size: var(--app-type-body-size);
  line-height: var(--app-type-body-line);
}

.type-body-sm {
  font-size: var(--app-type-body-sm-size);
  line-height: var(--app-type-copy-line);
}

.type-caption {
  font-size: var(--app-type-caption-size);
  line-height: var(--app-type-caption-line);
}

.type-meta {
  font-size: var(--app-type-meta-size);
  line-height: var(--app-type-label-line);
}

.type-label {
  font-size: var(--app-type-label-size);
  font-weight: var(--app-type-label-soft-weight);
  letter-spacing: var(--app-type-label-tracking);
  line-height: var(--app-type-label-line);
  text-transform: uppercase;
}

.type-label--xs {
  font-size: var(--app-type-label-xs-size);
}

.app-page-frame {
  isolation: isolate;
  background: var(--app-bg) !important;
}

.app-page-glow {
  background-image:
    radial-gradient(circle at top left, rgba(196, 113, 106, 0.09), transparent 30%),
    radial-gradient(circle at top right, rgba(61, 107, 86, 0.06), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(246, 245, 243, 0)) !important;
}

.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 4rem);
  padding-block: 1.5rem;
}

.auth-card {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--app-panel-cream);
  border: 1px solid var(--app-border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(28, 28, 26, 0.04),
    0 18px 40px -20px rgba(28, 28, 26, 0.22),
    0 36px 80px -40px rgba(28, 28, 26, 0.16);
}

@media (min-width: 60rem) {
  .auth-card {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    min-height: 36rem;
  }
}

.auth-card__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.25rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  min-width: 0;
}

.auth-card__brandmark {
  display: inline-flex;
  width: fit-content;
}

.auth-card__brandmark img {
  height: 26px;
  width: auto;
}

.auth-card__intro {
  margin-bottom: 1.75rem;
}

.auth-card .auth-card__title {
  margin-top: 0.7rem;
  font-size: clamp(1.95rem, 2.6vw, 2.4rem);
  line-height: 1.04;
}

.auth-card__intro .ui-eyebrow {
  font-size: 0.5625rem;
}

.auth-card__fields {
  display: grid;
  gap: 1.25rem;
}

.auth-card__fields .ui-field-label {
  font-size: 0.6875rem;
}

/* Settings page: match the calmer auth form sizing (labels + eyebrow). */
.settings-page .ui-field-label {
  font-size: 0.6875rem;
}
.settings-page .ui-eyebrow {
  font-size: 0.5625rem;
}

.auth-card__aside {
  position: relative;
  display: none;
  min-height: 22rem;
  background-color: var(--app-accent-strong);
  background-size: cover;
  background-position: center;
}

@media (min-width: 60rem) {
  .auth-card__aside {
    display: block;
  }
}

.auth-card__aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28, 28, 26, 0.42) 0%, rgba(28, 28, 26, 0) 22%),
    linear-gradient(180deg, rgba(168, 88, 80, 0.22) 0%, rgba(28, 28, 26, 0) 50%),
    linear-gradient(180deg, rgba(28, 28, 26, 0) 34%, rgba(28, 28, 26, 0.84) 100%);
}

.auth-card__aside-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 3vw, 2.75rem);
  color: #fff;
}

.auth-card__aside-logo {
  height: 30px;
  width: auto;
}

.auth-card__aside-statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 2.8vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 14ch;
  text-wrap: balance;
}

.auth-card__aside-sub {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 34ch;
}

.auth-signin__meta {
  border-top: 1px solid var(--app-border);
  display: grid;
  gap: 0.85rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
}

.ui-stack {
  display: grid;
  gap: 1.5rem;
}

.ui-stack--tight {
  gap: 1rem;
}

.ui-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ui-pill-row--compact {
  gap: 0.5rem;
}

.ui-split-header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ui-section-split {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ui-divider-top {
  border-top: 1px solid var(--app-border);
  padding-top: 1.25rem;
}

.ui-sidebar-grid {
  display: grid;
  gap: 1.5rem;
}

.ui-progress-bar {
  height: 3px;
  overflow: hidden;
  border-radius: var(--app-radius-pill);
  background: var(--app-border);
}

.ui-progress-fill {
  height: 100%;
  border-radius: var(--app-radius-pill);
  background: var(--app-accent);
  transition: width 0.2s ease;
}

.ui-surface {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface-strong);
  box-shadow: var(--app-shadow-soft);
}

.ui-surface--glass {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
}

.ui-surface--panel {
  background: var(--app-surface-strong);
}

.ui-surface--panel_soft {
  background: var(--app-surface-muted);
}

.ui-surface--accent {
  background: var(--app-accent-soft);
  border-color: var(--app-accent-border);
}

.ui-surface--success {
  background: var(--app-success-soft);
  border-color: var(--app-success-border);
}

.ui-surface--info {
  background: var(--app-info-soft);
  border-color: var(--app-info-border);
}

.ui-surface--empty {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
  color: var(--app-text-soft);
  font-size: var(--app-type-body-size);
  line-height: var(--app-type-body-line);
  padding: 2rem;
}

.ui-btn {
  border: 1px solid transparent;
  border-radius: var(--app-radius-pill);
  cursor: pointer;
  font-size: var(--app-type-button-size);
  font-weight: var(--app-type-button-weight);
  letter-spacing: 0;
  transition:
    background-color 0.16s cubic-bezier(0.2, 0, 0, 1),
    border-color 0.16s cubic-bezier(0.2, 0, 0, 1),
    box-shadow 0.16s cubic-bezier(0.2, 0, 0, 1),
    color 0.16s cubic-bezier(0.2, 0, 0, 1),
    transform 0.16s cubic-bezier(0.2, 0, 0, 1);
}

.ui-btn:hover {
  transform: translateY(-1px);
}

.ui-btn:active {
  transform: translateY(0);
}

.ui-btn--sm {
  padding: 0.6rem 1rem;
  font-size: var(--app-type-button-sm-size);
}

.ui-btn--md {
  padding: 0.8rem 1.35rem;
}

.ui-btn--lg {
  padding: 0.95rem 1.6rem;
  font-size: var(--app-type-button-lg-size);
}

.ui-btn--primary {
  background: var(--app-text);
  color: var(--app-bg-landing);
}

.ui-btn--primary:hover {
  background: color-mix(in srgb, var(--app-text-strong) 92%, var(--app-accent));
  color: var(--app-bg-landing);
}

.ui-btn--success {
  background: var(--app-success);
  color: var(--app-success-contrast);
}

.ui-btn--success:hover {
  background: color-mix(in srgb, var(--app-success) 92%, var(--app-text-strong));
}

.ui-btn--secondary {
  background: transparent;
  border-color: var(--app-border);
  color: var(--app-text);
}

.ui-btn--secondary:hover {
  background: var(--app-surface-soft);
  border-color: var(--app-border-strong);
  color: var(--app-text-strong);
}

.ui-btn--link,
.ui-btn--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

.ui-btn--link {
  color: var(--app-accent-strong);
}

.ui-btn--link:hover {
  color: var(--app-accent);
  transform: none;
}

.ui-btn--ghost {
  color: var(--app-text-soft);
}

.ui-btn--ghost:hover {
  color: var(--app-text-strong);
  transform: none;
}

.ui-btn:disabled {
  background: rgba(130, 126, 119, 0.65);
  border-color: transparent;
  box-shadow: none;
  color: rgba(255, 250, 247, 0.9);
  cursor: not-allowed;
  transform: none;
}

.ui-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-pill);
  background: var(--app-surface);
  color: var(--app-text-soft);
  font-size: var(--app-type-caption-size);
  font-weight: var(--app-type-button-weight);
  letter-spacing: 0;
  padding: 0.4rem 0.85rem;
}

.ui-pill--neutral,
.ui-pill--muted {
  background: var(--app-surface);
  color: var(--app-text-soft);
}

.ui-pill--success {
  background: var(--app-success-soft);
  border-color: var(--app-success-border);
  color: var(--app-success);
}

.ui-pill--warning {
  background: var(--app-accent-soft);
  border-color: var(--app-accent-border);
  color: var(--app-accent-strong);
}

.ui-pill--info {
  background: var(--app-info-soft);
  border-color: var(--app-info-border);
  color: var(--app-info);
}

.ui-input {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-soft);
  background: var(--app-surface-strong);
  color: var(--app-text);
  font-size: 0.875rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.ui-input::placeholder {
  color: var(--app-text-faint);
}

.ui-input:focus {
  border-color: rgba(28, 28, 26, 0.28);
  box-shadow: 0 0 0 4px var(--app-accent-soft);
  outline: none;
}

.ui-input--multiline {
  border-radius: var(--app-radius);
  min-height: 9rem;
}

.ui-input--muted {
  background: var(--app-surface-muted);
}

.ui-field-label {
  color: var(--app-text);
  font-size: var(--app-type-caption-size);
  /* Deliberately lighter than the 600 soft-label weight: uppercase +
     tracking already signal "label", so 500 keeps form labels quiet
     and in harmony with the dashboard instead of shouting. */
  font-weight: 500;
  letter-spacing: var(--app-type-label-tight-tracking);
  text-transform: uppercase;
}

.ui-notice,
.ui-toast {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-soft);
  padding: 0.9rem 1rem;
}

.ui-notice {
  font-size: var(--app-type-body-sm-size);
  line-height: var(--app-type-copy-line);
}

.ui-notice--error,
.ui-toast--alert {
  background: var(--app-danger-soft);
  border-color: var(--app-danger-border);
  color: var(--app-danger);
}

.ui-notice--warning {
  background: var(--app-accent-soft);
  border-color: var(--app-accent-border);
  color: var(--app-accent-strong);
}

.ui-notice--info {
  background: var(--app-info-soft);
  border-color: var(--app-info-border);
  color: var(--app-info);
}

.billing-access-notice {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.billing-access-notice__copy {
  margin: 0;
}

.billing-access-notice__action {
  display: inline-flex;
  flex-shrink: 0;
}

.billing-inline-lock {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.btn-pill:disabled,
.btn-ghost:disabled,
.app-sidebar-cta:disabled,
.app-icon-btn:disabled,
.module-action:disabled,
.share-action:disabled,
.ai-assistant-action:disabled,
.course-callout__action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.empty-card-action:disabled {
  color: var(--app-text-faint);
  cursor: not-allowed;
  opacity: 0.7;
}

.ui-stack-card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface-muted);
  box-shadow: none;
  padding: 1rem 1.1rem;
}

.ui-stack-card--panel {
  background: var(--app-surface-strong);
}

.ui-stack-card--dashed {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
  color: var(--app-text-soft);
}

.ui-stack-card--success {
  background: var(--app-success-soft);
  border-color: var(--app-success-border);
}

.ui-stack-card--info {
  background: var(--app-info-soft);
  border-color: var(--app-info-border);
}

.ui-eyebrow {
  color: var(--app-text-faint);
  font-size: var(--app-type-label-size);
  font-weight: var(--app-type-label-soft-weight);
  letter-spacing: var(--app-type-label-tracking);
  line-height: var(--app-type-label-line);
  text-transform: uppercase;
}

.ui-eyebrow--accent {
  color: var(--app-accent-strong);
}

.ui-eyebrow--success {
  color: var(--app-success);
}

.ui-eyebrow--info {
  color: var(--app-info);
}

.ui-heading {
  color: var(--app-text-strong);
  font-family: var(--app-font-serif);
  font-weight: var(--app-type-page-title-weight);
  letter-spacing: var(--app-type-title-tracking);
  line-height: var(--app-type-title-line);
  text-wrap: balance;
}

.ui-heading--hero {
  font-size: var(--app-type-hero-size);
  font-weight: var(--app-type-display-weight);
  line-height: var(--app-type-hero-line);
}

.ui-heading--section {
  /* Match the dashboard's prominent headings (section-title size) so
     page-header titles like "Account" don't tower over the rest. */
  font-size: var(--app-type-section-title-size);
  font-weight: var(--app-type-page-title-weight);
  line-height: var(--app-type-page-title-line);
}

.ui-heading--subsection {
  font-size: var(--app-type-section-title-size);
}

.ui-heading--card {
  font-size: var(--app-type-card-title-size);
  font-weight: var(--app-type-card-title-weight);
  letter-spacing: var(--app-type-card-title-tracking);
  line-height: var(--app-type-card-title-line);
}

.ui-copy {
  font-size: var(--app-type-body-size);
  line-height: var(--app-type-body-line);
  margin-top: 0.75rem;
}

.ui-copy--body {
  color: var(--app-text-soft);
}

.ui-copy--muted {
  color: var(--app-text-muted);
}

.ui-copy--accent {
  color: var(--app-accent-strong);
}

.ui-copy--success {
  color: var(--app-success);
}

.ui-copy--info {
  color: var(--app-info);
}

.ui-disclosure {
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  color: var(--app-text-soft);
  padding: 1rem 1.15rem;
}

.ui-disclosure summary {
  color: var(--app-text);
  cursor: pointer;
  font-size: var(--app-type-ui-size);
  font-weight: var(--app-type-label-soft-weight);
  line-height: var(--app-type-caption-line);
}

.ui-disclosure > * + * {
  margin-top: 1rem;
}

.ui-disclosure pre {
  background: var(--app-surface-muted);
  border-radius: var(--app-radius-soft);
  color: var(--app-text-muted);
  font-size: var(--app-type-caption-size);
  line-height: var(--app-type-caption-line);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 1rem;
  white-space: pre-wrap;
}

.ui-definition-list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
}

.ui-definition-list div {
  border-top: 1px solid var(--app-border);
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding-top: 0.85rem;
}

.ui-definition-list div:first-child {
  border-top: 0;
  padding-top: 0;
}

.ui-definition-list dt {
  color: var(--app-text-faint);
  font-size: var(--app-type-label-xs-size);
  font-weight: var(--app-type-label-soft-weight);
  letter-spacing: var(--app-type-label-tracking);
  line-height: var(--app-type-label-line);
  text-transform: uppercase;
}

.ui-definition-list dd {
  color: var(--app-text-soft);
  font-size: var(--app-type-body-sm-size);
  line-height: var(--app-type-copy-line);
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.generation-engine-topbar {
  margin-bottom: 1rem;
}

.generation-canvas {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 40rem;
  padding: 3rem 2rem 5rem;
  text-align: center;
}

.generation-orbit {
  align-items: center;
  display: flex;
  height: 7rem;
  justify-content: center;
  margin-bottom: 2.25rem;
  position: relative;
  width: 7rem;
}

.generation-orbit-ring {
  animation: generation-orbit-spin 1.8s linear infinite;
  border: 2px solid var(--app-border);
  border-radius: 50%;
  border-top-color: var(--app-accent);
  inset: 0;
  position: absolute;
}

.generation-orbit-core {
  align-items: center;
  background: var(--app-text);
  border-radius: 50%;
  box-shadow: var(--app-shadow-soft);
  color: var(--app-bg-landing);
  display: flex;
  height: 4.5rem;
  justify-content: center;
  width: 4.5rem;
}

.generation-orbit-core svg {
  height: 1.875rem;
  width: 1.875rem;
}

.generation-title {
  color: var(--app-text-strong);
  font-family: var(--app-font-serif);
  font-size: var(--app-type-generation-title-size);
  font-weight: var(--app-type-page-title-weight);
  letter-spacing: var(--app-type-title-tracking);
  line-height: var(--app-type-title-line);
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

.generation-title em {
  font-style: normal;
  font-weight: var(--app-type-display-emphasis-weight);
}

.generation-sub {
  color: var(--app-text-muted);
  font-size: var(--app-type-body-size);
  line-height: var(--app-type-copy-line);
  margin: 0 0 2rem;
  max-width: 27rem;
}

.engine-tag {
  align-items: center;
  background: var(--app-success-soft);
  border-radius: var(--app-radius-pill);
  color: var(--app-success);
  display: inline-flex;
  font-size: var(--app-type-label-size);
  font-weight: var(--app-type-label-soft-weight);
  gap: 0.5rem;
  letter-spacing: var(--app-type-label-tracking);
  line-height: var(--app-type-label-line);
  margin-bottom: 3rem;
  padding: 0.3rem 0.875rem;
  text-transform: uppercase;
}

.engine-tag-dot {
  background: var(--app-success);
  border-radius: 50%;
  height: 0.375rem;
  position: relative;
  width: 0.375rem;
}

.engine-tag-dot::after {
  animation: generation-tag-pulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  background: var(--app-success);
  border-radius: 50%;
  content: "";
  inset: 0;
  position: absolute;
}

.step-list {
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  margin-bottom: 2.5rem;
  max-width: 32.5rem;
  padding: 1.25rem 1.5rem;
  text-align: left;
  width: 100%;
}

.step-list-head {
  align-items: center;
  border-bottom: 1px solid var(--app-border);
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.875rem;
  padding-bottom: 0.875rem;
}

.step-list-head-label,
.step-list-head-live {
  font-size: var(--app-type-label-size);
  font-weight: var(--app-type-label-soft-weight);
  letter-spacing: var(--app-type-label-tracking);
  line-height: var(--app-type-label-line);
  text-transform: uppercase;
}

.step-list-head-label {
  color: var(--app-text-faint);
}

.step-list-head-live {
  align-items: center;
  color: var(--app-success);
  display: inline-flex;
  gap: 0.375rem;
}

.step-list-head-live::before {
  background: var(--app-success);
  border-radius: 50%;
  content: "";
  flex-shrink: 0;
  height: 0.375rem;
  width: 0.375rem;
}

.step-item {
  align-items: center;
  color: var(--app-text-faint);
  display: flex;
  font-size: var(--app-type-ui-size);
  gap: 0.75rem;
  line-height: var(--app-type-caption-line);
  padding: 0.625rem 0;
  position: relative;
}

.step-item-mark {
  align-items: center;
  background: transparent;
  border-radius: 50%;
  display: inline-flex;
  flex-shrink: 0;
  height: 1.125rem;
  justify-content: center;
  position: relative;
  width: 1.125rem;
}

.step-item-mark svg {
  height: 0.6875rem;
  width: 0.6875rem;
}

.step-item.is-complete {
  color: var(--app-text);
}

.step-item.is-complete .step-item-mark {
  background: var(--app-success);
  color: var(--app-bg-landing);
}

.step-item.is-active {
  color: var(--app-text);
  font-weight: var(--app-type-label-soft-weight);
}

.step-item.is-active .step-item-mark {
  background: transparent;
  border: 2px solid var(--app-border);
  height: 1.125rem;
  width: 1.125rem;
}

.step-item.is-active .step-item-mark::before {
  border-radius: 50%;
  content: "";
  position: absolute;
}

.step-item.is-active .step-item-mark::before {
  animation: generation-step-spin 0.95s linear infinite;
  border: 2px solid transparent;
  border-radius: 50%;
  border-top-color: var(--app-accent);
  border-right-color: color-mix(in srgb, var(--app-accent) 65%, transparent);
  inset: -2px;
}

.step-item.is-pending .step-item-mark {
  border: 1.5px solid var(--app-border);
}

.factoid-card {
  background: var(--app-text);
  border-radius: calc(var(--app-radius) + 2px);
  box-shadow: var(--app-shadow);
  color: var(--app-bg-landing);
  max-width: 32.5rem;
  padding: 1.5rem 1.75rem;
  text-align: left;
  width: 100%;
}

.factoid-card-label {
  color: color-mix(in srgb, var(--app-bg-landing) 55%, transparent);
  font-size: var(--app-type-label-size);
  font-weight: var(--app-type-label-weight);
  letter-spacing: var(--app-type-label-tracking);
  line-height: var(--app-type-label-line);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.factoid-card-title {
  color: var(--app-bg-landing);
  font-family: var(--app-font-serif);
  font-size: var(--app-type-card-title-size);
  font-weight: var(--app-type-page-title-weight);
  letter-spacing: var(--app-type-card-title-tracking);
  line-height: 1.3;
  margin: 0 0 0.75rem;
}

.factoid-card-body {
  color: color-mix(in srgb, var(--app-bg-landing) 78%, transparent);
  font-size: var(--app-type-body-sm-size);
  line-height: var(--app-type-copy-line);
  margin: 0;
}

.factoid-card-pages {
  min-height: 7.25rem;
  overflow: hidden;
}

.factoid-card-page[hidden] {
  display: none;
}

.factoid-card-page.is-active .factoid-card-title {
  animation: factoid-content-enter-next 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.factoid-card-page.is-active .factoid-card-body {
  animation: factoid-content-enter-next 320ms cubic-bezier(0.16, 1, 0.3, 1) 55ms both;
}

.factoid-card[data-factoid-direction="previous"] .factoid-card-page.is-active .factoid-card-title {
  animation-name: factoid-content-enter-previous;
}

.factoid-card[data-factoid-direction="previous"] .factoid-card-page.is-active .factoid-card-body {
  animation-name: factoid-content-enter-previous;
}

.factoid-card-foot {
  display: flex;
  gap: 0.375rem;
  justify-content: center;
  margin-top: 1.25rem;
}

.factoid-card-dot {
  appearance: none;
  background: color-mix(in srgb, var(--app-bg-landing) 25%, transparent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 0.3125rem;
  overflow: hidden;
  padding: 0;
  position: relative;
  transition: background-color 240ms ease, transform 240ms ease, width 240ms ease;
  width: 0.3125rem;
}

.factoid-card-dot.is-active {
  background: var(--app-bg-landing);
  border-radius: var(--app-radius-pill);
  transform: scaleY(1.15);
  width: 1.375rem;
}

.factoid-card-dot.is-active::after {
  animation: factoid-dot-progress 6s linear both;
  background: color-mix(in srgb, var(--app-text) 30%, transparent);
  content: "";
  inset: 0;
  position: absolute;
  transform-origin: left center;
}

.factoid-card-dot:focus-visible {
  outline: 2px solid var(--app-bg-landing);
  outline-offset: 0.25rem;
}

@keyframes generation-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes generation-tag-pulse {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(3);
  }
}

@keyframes generation-step-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes factoid-content-enter-next {
  from {
    opacity: 0;
    transform: translateX(0.875rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes factoid-content-enter-previous {
  from {
    opacity: 0;
    transform: translateX(-0.875rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes factoid-dot-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.learner-layout {
  align-items: start;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  padding-block: 2rem 5rem;
}

.learner-main {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

/* Focus-player progress header — a slim persistent bar + context that replaces
   the repeated full hero so the content card is the focus. */
.runner-progress {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

.runner-progress__track {
  height: 5px;
}

.runner-progress__meta {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
}

.runner-progress__course {
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
}

.runner-progress__module {
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.runner-progress__count {
  color: var(--text-light);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-left: auto;
}

/* Runner splash — the intro a learner lands on from a share link, so they get
   a welcome + Start beat instead of being dropped straight onto card one. */
.runner-splash {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  justify-content: safe center;
  margin: 0 auto;
  max-height: calc(100dvh - 11.5rem);
  max-width: 40rem;
  min-height: calc(100dvh - 11.5rem);
  padding-block: 0;
  text-align: center;
}

/* The cover fills whatever height the copy leaves: it grows to a cap when the
   copy is short and shrinks (down to a floor) when the copy runs long, so the
   whole intro stays on one screen until even a floor-height cover won't fit. */
.runner-splash__media {
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(28, 28, 26, 0.06), 0 18px 44px rgba(28, 28, 26, 0.12);
  flex: 1 1 auto;
  max-height: 37dvh;
  min-height: 7rem;
  overflow: hidden;
  width: 100%;
}

.runner-splash__body {
  flex: 0 0 auto;
}

.runner-splash__cover {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.runner-splash__body {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
}

.runner-splash__eyebrow {
  color: var(--app-accent, var(--accent));
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.runner-splash__title {
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3.15rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0.25rem 0 0;
}

.runner-splash__meta {
  color: var(--text-light);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}

.runner-splash__desc {
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0.5rem 0 0;
  max-width: 38rem;
}

.btn-pill.runner-splash__start {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
  margin-top: 1.25rem;
  white-space: nowrap;
}

.learner-card__citation {
  background: color-mix(in srgb, var(--app-surface-strong) 76%, transparent);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  color: var(--app-text-muted);
  font-size: var(--app-type-caption-size);
  line-height: var(--app-type-caption-line);
  padding: 0.4rem 0.65rem;
  text-decoration: none;
}

.learner-card__citation:hover {
  border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-border));
  color: var(--app-text-strong);
}

.learner-runner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* .learner-module-complete (the between-modules checkpoint) is styled in the
   RUNNER --rk section as a milestone medallion, coherent with its siblings
   (pre-amble card + end seal). See ".learner-shell .learner-module-complete". */

.learner-runner__actions .btn-ghost,
.learner-runner__actions .btn-pill,
.learner-module-complete .btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .learner-runner__actions .btn-pill {
    margin-left: auto;
  }
}

.course-workspace {
  display: grid;
  gap: 2rem;
  padding-block: 1rem 5rem;
}

.course-workspace__topbar {
  align-items: center;
  border-bottom: 1px solid var(--app-border);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding-bottom: 1rem;
}

.course-workspace__nav,
.course-workspace__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  min-width: 0;
}

.course-workspace__actions {
  justify-content: flex-end;
}

.course-workspace__titlebar {
  align-items: center;
  color: var(--app-text-muted);
  display: flex;
  flex: 1 1 auto;
  gap: 0.65rem;
  justify-content: center;
  min-width: 0;
}

.course-workspace__title,
.course-workspace__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-workspace__title {
  color: var(--app-text-strong);
  font-size: var(--app-type-ui-size);
  font-weight: var(--app-type-label-soft-weight);
  line-height: var(--app-type-ui-line);
}

.course-workspace__divider {
  background: var(--app-border-strong);
  flex-shrink: 0;
  height: 1rem;
  width: 1px;
}

.course-workspace__meta {
  color: var(--app-text-faint);
  font-size: var(--app-type-caption-size);
  font-weight: var(--app-type-label-weight);
  line-height: var(--app-type-caption-line);
}

.course-workspace__action-form {
  display: inline-flex;
}

.course-workspace__grid {
  align-items: start;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
}

.course-workspace__grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.course-editor {
  display: grid;
  gap: 2rem;
  min-width: 0;
}

/* Editor workspace canvas. */
.editor-canvas {
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem 2rem 10rem;
  width: 100%;
}

.publish-canvas {
  width: 100%;
}

.course-editor__header {
  display: grid;
  gap: 0.75rem;
  max-width: 45rem;
}

.course-editor__eyebrow {
  color: var(--app-accent-strong);
  display: block;
  font-size: var(--app-type-meta-size);
  font-weight: var(--app-type-label-soft-weight);
  letter-spacing: var(--app-type-label-tracking);
  line-height: var(--app-type-label-line);
  text-transform: uppercase;
}

.course-editor__title {
  color: var(--app-text-strong);
  font-family: var(--app-font-serif);
  font-size: var(--app-type-editor-title-size);
  font-weight: var(--app-type-page-title-weight);
  letter-spacing: var(--app-type-title-tracking);
  line-height: var(--app-type-title-line);
  margin: 0;
}

.course-editor__title em {
  font-style: normal;
  font-weight: var(--app-type-display-emphasis-weight);
}

.course-editor__sub {
  color: var(--app-text-soft);
  font-size: var(--app-type-body-size);
  line-height: var(--app-type-copy-line);
  margin: 0;
  max-width: 65ch;
}

.course-editor__facts {
  align-items: center;
  color: var(--app-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--app-type-caption-size);
  gap: 0.6rem 1rem;
  line-height: var(--app-type-caption-line);
  margin-top: 0.35rem;
}

.course-state {
  align-items: center;
  border-radius: var(--app-radius-pill);
  display: inline-flex;
  font-size: var(--app-type-label-xs-size);
  font-weight: var(--app-type-label-weight);
  gap: 0.4rem;
  letter-spacing: var(--app-type-label-tracking);
  line-height: var(--app-type-label-line);
  padding: 0.3rem 0.65rem;
  text-transform: uppercase;
}

.course-state::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  flex-shrink: 0;
  height: 0.375rem;
  width: 0.375rem;
}

.course-state--live {
  background: var(--app-success-soft);
  color: var(--app-success);
}

.course-state--changes,
.course-state--ready,
.course-state--progress {
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
}

.course-state--failed {
  background: var(--app-danger-soft);
  color: var(--app-danger);
}

.course-state--draft {
  background: var(--app-surface-muted);
  color: var(--app-text-faint);
}

.course-callout {
  align-items: center;
  background: var(--app-text-strong);
  border-radius: var(--app-radius);
  color: var(--app-bg);
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  overflow: hidden;
  padding: 1.5rem;
  position: relative;
}

.course-callout::after {
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
  height: 7rem;
  opacity: 0.08;
  position: absolute;
  right: -1rem;
  top: -2rem;
  width: 7rem;
}

.course-callout__text {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.course-callout__text strong {
  color: var(--app-bg);
  font-family: var(--app-font-serif);
  font-size: var(--app-type-card-title-size);
  font-weight: var(--app-type-card-title-weight);
  letter-spacing: var(--app-type-card-title-tracking);
  line-height: var(--app-type-card-title-line);
}

.course-callout__text span {
  color: color-mix(in srgb, var(--app-bg) 78%, transparent);
  font-size: var(--app-type-body-sm-size);
  line-height: var(--app-type-copy-line);
}

.course-callout__action {
  background: var(--app-bg);
  border: 0;
  border-radius: var(--app-radius-pill);
  color: var(--app-text-strong);
  cursor: pointer;
  flex-shrink: 0;
  font-size: var(--app-type-button-sm-size);
  font-weight: var(--app-type-label-soft-weight);
  line-height: 1;
  padding: 0.65rem 1rem;
  position: relative;
  text-decoration: none;
  z-index: 1;
}

.course-draft-compare {
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-soft);
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  padding: 1.35rem 1.5rem;
}

.course-draft-compare__head {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-width: 0;
}

.course-draft-compare__title {
  color: var(--app-text-strong);
  font-family: var(--app-font-serif);
  font-size: var(--app-type-card-title-lg-size);
  font-weight: var(--app-type-card-title-weight);
  letter-spacing: var(--app-type-card-title-tracking);
  line-height: var(--app-type-card-title-line);
  margin: 0.35rem 0 0;
}

.course-draft-compare__metrics {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.course-draft-compare__metric {
  background: var(--app-surface-muted);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-soft);
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.9rem 1rem;
}

.course-draft-compare__metric--draft {
  background: color-mix(in srgb, var(--app-accent-soft) 58%, var(--app-surface-strong));
  border-color: color-mix(in srgb, var(--app-accent) 36%, var(--app-border));
}

.course-draft-compare__metric span,
.course-draft-compare__group h3 {
  color: var(--app-text-faint);
  font-size: var(--app-type-label-xs-size);
  font-weight: var(--app-type-label-weight);
  letter-spacing: var(--app-type-label-tracking);
  line-height: var(--app-type-label-line);
  text-transform: uppercase;
}

.course-draft-compare__metric strong {
  color: var(--app-text-strong);
  font-family: var(--app-font-serif);
  font-size: var(--app-type-card-title-size);
  font-weight: var(--app-type-card-title-weight);
  line-height: var(--app-type-card-title-line);
  min-width: 0;
}

.course-draft-compare__metric em {
  color: var(--app-text-soft);
  font-size: var(--app-type-caption-size);
  font-style: normal;
  line-height: var(--app-type-caption-line);
}

.course-draft-compare__groups {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.course-draft-compare__group {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.course-draft-compare__group h3 {
  margin: 0;
}

.course-draft-compare__group ul {
  display: grid;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.course-draft-compare__group li,
.course-draft-compare__empty {
  color: var(--app-text-muted);
  font-size: var(--app-type-ui-size);
  line-height: var(--app-type-copy-line);
  min-width: 0;
  overflow-wrap: anywhere;
}

.course-draft-compare__group li {
  background: var(--app-surface-muted);
  border-radius: var(--app-radius-soft);
  padding: 0.55rem 0.7rem;
}

.course-draft-compare__empty {
  margin: 0;
}

.course-editor-panel {
  display: block;
  min-width: 0;
  scroll-margin-top: 6rem;
}

.course-editor-panel:empty {
  display: none;
}

.course-edit-form {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.course-edit-form__advanced {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  margin-top: 1rem;
}

.quiz-card-editor {
  background: var(--app-surface-muted);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-soft);
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: 1rem;
}

.quiz-card-editor__head {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-width: 0;
}

.quiz-card-editor__title {
  color: var(--app-text-strong);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0.25rem 0 0;
}

.quiz-card-editor__options {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.quiz-card-editor__option {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr) auto;
  min-width: 0;
  padding: 0.85rem 1rem;
  transition: border-color 0.15s, background 0.15s;
}

.quiz-card-editor__correct {
  align-items: center;
  color: var(--app-text-muted);
  display: flex;
  font-size: var(--app-type-ui-size);
  font-weight: 700;
  gap: 0.45rem;
  line-height: 1.2;
  min-width: 0;
}

.quiz-card-editor__text {
  min-width: 0;
}

.quiz-card-editor__remove {
  align-items: center;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  color: var(--app-text-muted);
  display: inline-flex;
  font-size: 1.25rem;
  height: 2.25rem;
  justify-content: center;
  line-height: 1;
  width: 2.25rem;
}

.quiz-card-editor__remove:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.quiz-card-editor__error {
  color: var(--app-danger, #b42318);
  font-size: var(--app-type-ui-size);
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.scenario-card-editor__option {
  align-items: start;
}

.scenario-card-editor__fields {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

@media (max-width: 640px) {
  .scenario-card-editor__option {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .scenario-card-editor__fields {
    grid-column: 1 / -1;
  }
}

.course-module-section {
  display: grid;
  gap: 1.25rem;
}

.course-section-head {
  align-items: flex-end;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
}

.course-section-head__text {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
}

.course-section-head__title {
  color: var(--app-text-strong);
  font-family: var(--app-font-serif);
  font-size: var(--app-type-section-title-size);
  font-weight: var(--app-type-page-title-weight);
  letter-spacing: var(--app-type-title-tracking);
  line-height: var(--app-type-title-line);
  margin: 0;
}

.course-section-head__title em {
  font-style: normal;
  font-weight: var(--app-type-display-emphasis-weight);
}

.course-module-card__meta {
  align-items: center;
  color: var(--app-text-faint);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--app-type-meta-size);
  font-weight: var(--app-type-label-weight);
  gap: 0.5rem 0.85rem;
  letter-spacing: var(--app-type-label-tight-tracking);
  line-height: var(--app-type-caption-line);
  text-transform: uppercase;
}

.card-add-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Higher specificity than .btn-ghost so the resting state actually wins —
   these "Add ___" actions need to read as buttons at rest, not just on hover. */
.card-add-actions .card-add-actions__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--rule);
  background: rgba(28, 28, 26, 0.035);
  color: var(--text-muted);
}

.card-add-actions .card-add-actions__link::before {
  content: "+";
  font-size: 1.05em;
  font-weight: 600;
  opacity: 0.7;
}

.card-add-actions .card-add-actions__link:hover {
  border-color: var(--app-border-strong, rgba(28, 28, 26, 0.18));
  background: rgba(28, 28, 26, 0.07);
  color: var(--text);
}

.module-actions {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.module-actions form {
  display: contents;
}

.module-actions .module-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.module-action--danger {
  color: var(--app-danger, #b42318);
}

.course-module-empty {
  font-size: var(--app-type-body-size);
  line-height: var(--app-type-body-line);
}

.course-workspace__sidebar {
  display: grid;
  gap: 1rem;
  min-width: 0;
  position: sticky;
  top: 5.5rem;
}

.course-control {
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-soft);
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: 1.5rem;
}

.course-control--share {
  background: var(--app-panel-warm);
}

.course-control--source {
  background: var(--app-surface);
}

.course-control__head {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-width: 0;
}

.course-control__title {
  color: var(--app-text-strong);
  font-family: var(--app-font-serif);
  font-size: var(--app-type-card-title-size);
  font-weight: var(--app-type-card-title-weight);
  letter-spacing: var(--app-type-card-title-tracking);
  line-height: var(--app-type-card-title-line);
  margin: 0.45rem 0 0;
}

.course-control__body {
  color: var(--app-text-soft);
  font-size: var(--app-type-body-sm-size);
  line-height: var(--app-type-body-line);
  margin: 0;
}

.course-control__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.course-source-facts {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  min-width: 0;
}

.course-source-facts__row {
  align-items: baseline;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  min-width: 0;
}

.course-source-facts__row--wide {
  align-items: start;
}

.course-source-facts dt {
  color: var(--app-text-faint);
  font-size: var(--app-type-label-xs-size);
  font-weight: var(--app-type-label-weight);
  letter-spacing: var(--app-type-label-tracking);
  line-height: var(--app-type-label-line);
  text-transform: uppercase;
}

.course-source-facts dd {
  color: var(--app-text-muted);
  font-size: var(--app-type-ui-size);
  line-height: var(--app-type-ui-line);
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.course-source-history {
  border-top: 1px solid var(--app-border);
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding-top: 1rem;
}

.course-source-history__title {
  color: var(--app-text-faint);
  font-size: var(--app-type-label-xs-size);
  font-weight: var(--app-type-label-weight);
  letter-spacing: var(--app-type-label-tracking);
  line-height: var(--app-type-label-line);
  margin: 0;
  text-transform: uppercase;
}

.course-source-history__list {
  display: grid;
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.course-source-history__list li {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.course-source-history__name {
  color: var(--app-text-strong);
  font-size: var(--app-type-ui-size);
  line-height: var(--app-type-ui-line);
  min-width: 0;
  overflow-wrap: anywhere;
}

.course-source-history__meta {
  color: var(--app-text-faint);
  font-size: var(--app-type-caption-size);
  line-height: var(--app-type-caption-line);
  min-width: 0;
}

.course-control__form {
  display: inline-flex;
}

.form-field-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.form-field-grid + .form-field-grid {
  margin-top: 1rem;
}

.form-field-grid--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setup-source-card__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.setup-source-card__panel {
  display: block;
  min-width: 0;
}

.setup-grounding-card {
  align-items: flex-start;
  background: linear-gradient(135deg, var(--app-surface-strong), var(--app-surface-muted));
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  cursor: pointer;
  display: flex;
  gap: 0.85rem;
  min-width: 0;
  padding: 1rem 1.1rem;
}

.setup-grounding-card.is-disabled {
  cursor: default;
  opacity: 0.62;
}

.setup-grounding-card__mark {
  align-items: center;
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-soft);
  display: inline-flex;
  flex: 0 0 auto;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.setup-grounding-card__input {
  accent-color: var(--app-accent);
}

.setup-grounding-card__copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.setup-grounding-card__title {
  color: var(--app-text-strong);
  font-size: var(--app-type-ui-size);
  font-weight: var(--app-type-button-weight);
  line-height: var(--app-type-label-line);
}

.setup-grounding-card__body {
  color: var(--app-text-soft);
  font-size: var(--app-type-caption-size);
  line-height: var(--app-type-caption-line);
}

.setup-source-intake {
  align-items: flex-end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-width: 0;
}

.setup-source-intake__title {
  color: var(--app-text-strong);
  font-family: var(--app-font-serif);
  font-size: var(--app-type-card-title-sm-size);
  font-weight: var(--app-type-card-title-weight);
  letter-spacing: var(--app-type-card-title-tracking);
  line-height: var(--app-type-card-title-line);
  margin: 0;
}

.setup-source-intake__body {
  color: var(--app-text-soft);
  font-size: var(--app-type-ui-size);
  line-height: var(--app-type-copy-line);
  margin: 0.25rem 0 0;
}

.setup-upload {
  align-items: center;
  background: var(--app-surface-muted);
  border: 1.5px dashed var(--app-border-strong);
  border-radius: var(--app-radius);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  min-width: 0;
  padding: 1rem;
  text-align: center;
}

.setup-upload__icon {
  align-items: center;
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-soft);
  color: var(--app-text-muted);
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.setup-upload__icon svg {
  height: 1.25rem;
  width: 1.25rem;
}

.setup-upload__text {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  min-width: 0;
}

.setup-upload__text span {
  color: var(--app-text-strong);
  font-size: var(--app-type-ui-size);
  font-weight: var(--app-type-button-weight);
  line-height: var(--app-type-label-line);
}

.setup-upload__text small {
  color: var(--app-text-muted);
  font-size: var(--app-type-meta-size);
  line-height: var(--app-type-tight-line);
}

.setup-upload__input {
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-soft);
  color: var(--app-text-muted);
  font-size: var(--app-type-ui-size);
  line-height: var(--app-type-label-line);
  min-width: 0;
  padding: 0.55rem;
  width: 100%;
}

.setup-inline-field {
  background: var(--app-surface-muted);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-soft);
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.85rem;
}

.setup-inline-field__label {
  color: var(--app-text-faint);
  font-size: var(--app-type-label-xs-size);
  font-weight: var(--app-type-label-weight);
  letter-spacing: var(--app-type-label-tracking);
  line-height: var(--app-type-label-line);
  text-transform: uppercase;
}

.setup-inline-field__textarea {
  background: transparent;
  border: 0;
  color: var(--app-text);
  font: inherit;
  font-size: var(--app-type-ui-size);
  line-height: var(--app-type-copy-line);
  min-height: 8rem;
  min-width: 0;
  outline: 0;
  resize: vertical;
  width: 100%;
}

.setup-inline-field__input {
  background: transparent;
  border: 0;
  color: var(--app-text);
  font: inherit;
  font-size: var(--app-type-ui-size);
  line-height: var(--app-type-copy-line);
  min-width: 0;
  outline: 0;
  width: 100%;
}

.setup-inline-field__input::placeholder {
  color: var(--app-text-faint);
}

.setup-inline-field__textarea::placeholder {
  color: var(--app-text-faint);
}

.setup-upload__input::file-selector-button {
  background: var(--app-text);
  border: 0;
  border-radius: var(--app-radius-pill);
  color: var(--app-bg-landing);
  cursor: pointer;
  font: inherit;
  font-size: var(--app-type-button-sm-size);
  font-weight: var(--app-type-label-soft-weight);
  margin-right: 0.75rem;
  padding: 0.5rem 0.8rem;
}

.setup-upload-status {
  color: var(--app-text-soft);
  display: block;
  font-size: var(--app-type-meta-size);
  font-weight: var(--app-type-label-soft-weight);
  line-height: var(--app-type-tight-line);
  margin-top: 0.4rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-field.has-file .setup-upload-status {
  color: var(--app-accent);
}

.ui-file-input {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-soft);
  background: var(--app-surface-strong);
  color: var(--app-text-soft);
}

.ui-file-input::file-selector-button {
  background: var(--app-text);
  border: 0;
  border-radius: var(--app-radius-pill);
  color: var(--app-bg-landing);
  cursor: pointer;
  font-size: var(--app-type-button-size);
  font-weight: var(--app-type-button-weight);
  margin-right: 1rem;
  padding: 0.65rem 1rem;
  transition: opacity 0.16s ease;
}

.ui-file-input::file-selector-button:hover {
  opacity: 0.85;
}

.ui-link {
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  transition: color 0.16s ease, text-decoration-color 0.16s ease;
}

.ui-link--accent {
  color: var(--app-accent-strong);
  font-weight: var(--app-type-label-soft-weight);
}

.ui-link--accent:hover {
  color: var(--app-accent);
  text-decoration-color: currentColor;
}

.ui-link--muted {
  color: var(--app-text-soft);
  font-size: var(--app-type-body-sm-size);
  font-weight: var(--app-type-label-soft-weight);
}

.ui-link--muted:hover,
.ui-link--ghost:hover {
  color: var(--app-text-strong);
  text-decoration-color: currentColor;
}

.ui-link--ghost {
  color: var(--app-text-soft);
}

.ui-toast {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(28, 28, 26, 0.05),
    0 12px 32px -12px rgba(28, 28, 26, 0.24);
  animation: toast-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ui-toast.is-leaving {
  animation: toast-out 220ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Opaque tinted surface (soft tone layered over the app background) so the
   floating toast never picks up dark UI behind it at the top-right. */
.ui-toast--notice {
  background:
    linear-gradient(var(--app-success-soft), var(--app-success-soft)),
    var(--app-bg);
  border-color: var(--app-success-border);
  color: var(--app-success);
}

.ui-toast--alert {
  background:
    linear-gradient(var(--app-danger-soft), var(--app-danger-soft)),
    var(--app-bg);
}

.ui-toast__body {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.ui-toast__icon {
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 0.05rem;
}

.ui-toast__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.ui-toast__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}

.ui-toast__message {
  color: var(--app-text-strong);
  font-size: 0.8125rem; /* 13px — toast-scoped, one notch below body-sm */
  font-weight: 500;
  line-height: 18px; /* whole-pixel line-height keeps small text crisp */
  overflow-wrap: anywhere;
}

.ui-toast__action {
  color: currentColor;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s ease;
}

.ui-toast__action:hover {
  opacity: 0.78;
}

.ui-toast__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.2rem -0.2rem -0.2rem 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--app-text-soft);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ui-toast__close svg {
  width: 0.95rem;
  height: 0.95rem;
}

.ui-toast__close:hover {
  opacity: 1;
  color: var(--app-text-strong);
  background: rgba(28, 28, 26, 0.06);
}

.ui-toast__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  transform-origin: left center;
  background: currentColor;
  opacity: 0.32;
  animation: toast-progress 6s linear forwards;
}

.ui-toast:hover .ui-toast__progress {
  animation-play-state: paused;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(18px) scale(0.98);
  }
}

@keyframes toast-progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-toast,
  .ui-toast.is-leaving {
    animation: none;
  }

  .ui-toast__progress {
    display: none;
  }
}

.card-image-region:empty,
.card-image-status:empty {
  display: none;
}

.card-image {
  position: relative;
  margin: 0 0 1rem;
}

.card-image__preview {
  display: block;
  width: 100%;
  max-height: 22rem;
  object-fit: cover;
  border-radius: 0.75rem;
}

.card-image__attribution {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.45rem;
  color: var(--app-text-muted);
  font-size: 0.78rem;
}

.card-image--pending,
.card-image-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--app-text-muted);
  font-size: 0.9rem;
}

.card-image-status {
  margin-top: 0.75rem;
}

.card-image__spinner {
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: card-image-spin 700ms linear infinite;
}

.card-image-editor {
  padding: 1rem;
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
}

.card-image-editor__upload-button {
  align-items: center;
  align-self: flex-start;
  background: var(--app-text);
  border: 1px solid var(--app-text);
  border-radius: var(--app-radius-pill);
  color: var(--app-bg-landing);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--app-type-button-sm-size);
  font-weight: var(--app-type-button-weight);
  line-height: 1;
  padding: 0.7rem 1rem;
  position: relative;
  transition: opacity 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.card-image-editor__upload-button:hover {
  opacity: 0.85;
}

.card-image-editor__upload-button:focus-within {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}

.card-image-editor__upload-input {
  cursor: pointer;
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}

.card-image-editor__removed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
  margin-bottom: 1rem;
}

.card-image-editor__removed[hidden] {
  display: none;
}

@keyframes card-image-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .card-image__spinner { animation: none; }
}

.editorial-steps {
  display: grid;
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.editorial-step {
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  border-top: 1px solid var(--app-border);
  padding-top: 1.1rem;
}

.editorial-step:first-child {
  padding-top: 0;
  border-top: 0;
}

.editorial-step__num {
  color: var(--app-text-faint);
  font-size: var(--app-type-caption-size);
  font-weight: var(--app-type-label-soft-weight);
  letter-spacing: var(--app-type-label-tight-tracking);
  line-height: var(--app-type-caption-line);
}

.editorial-step__title {
  color: var(--app-text-strong);
  font-family: var(--app-font-serif);
  font-size: var(--app-type-section-title-size);
  font-weight: var(--app-type-page-title-weight);
  line-height: var(--app-type-title-line);
  letter-spacing: var(--app-type-title-tracking);
  margin: 0;
}

.editorial-step__text {
  color: var(--app-text-soft);
  font-size: var(--app-type-body-size);
  line-height: var(--app-type-body-line);
  margin: 0.45rem 0 0;
  max-width: 52ch;
}

.editorial-stats {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-top: 1px solid var(--app-border);
  margin-top: 2.5rem;
  padding-top: 1.75rem;
}

.editorial-stat {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: center;
  min-width: 0;
  padding: 0 1.5rem;
  text-align: center;
}

.editorial-stat:first-child {
  padding-left: 0;
}

.editorial-stat:last-child {
  padding-right: 0;
}

.editorial-stat__value {
  color: var(--app-text-strong);
  font-family: var(--app-font-serif);
  font-size: var(--app-type-publish-title-size);
  font-weight: var(--app-type-display-weight);
  letter-spacing: var(--app-type-title-tracking);
  line-height: 1;
}

.editorial-stat__label {
  color: var(--app-text-muted);
  font-size: var(--app-type-caption-size);
  line-height: var(--app-type-caption-line);
}

.editorial-stat__divider {
  align-self: stretch;
  background: var(--app-border);
  width: 1px;
}

.editorial-module {
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-soft);
  color: var(--app-text);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.editorial-module:hover {
  box-shadow: var(--app-shadow);
}

.editorial-module--warm {
  background: var(--app-panel-warm);
}

.editorial-module--sage {
  background: var(--app-panel-sage);
}

.editorial-module--stone {
  background: var(--app-panel-stone);
}

.editorial-module--cream {
  background: var(--app-panel-cream);
}

.editorial-module--cloud {
  background: var(--app-panel-cloud);
}

.editorial-module__header {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  justify-content: space-between;
}

.editorial-module__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.editorial-module__num,
.editorial-module__source {
  color: var(--app-text-faint);
  font-size: var(--app-type-caption-size);
  line-height: var(--app-type-label-line);
}

.editorial-module__num {
  font-weight: var(--app-type-label-soft-weight);
  letter-spacing: var(--app-type-label-tight-tracking);
}

.editorial-module__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.editorial-module__title {
  color: var(--app-text-strong);
  font-family: var(--app-font-serif);
  font-size: var(--app-type-card-title-size);
  font-weight: var(--app-type-card-title-weight);
  letter-spacing: var(--app-type-card-title-tracking);
  line-height: var(--app-type-card-title-line);
  margin: 0;
}

.editorial-module__body {
  color: var(--app-text-soft);
  font-size: var(--app-type-ui-size);
  line-height: var(--app-type-copy-line);
  margin: 0;
}

.editorial-module__details {
  border-top: 1px solid var(--app-border);
  display: grid;
  gap: 0.85rem;
  padding-top: 1rem;
}

.editorial-module__footer {
  border-top: 1px solid var(--app-border);
  color: var(--app-text-faint);
  font-size: var(--app-type-caption-size);
  line-height: var(--app-type-copy-line);
  padding-top: 1rem;
}

.editorial-quiz {
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--app-radius-soft);
  padding: 1rem;
}

.editorial-quiz__label {
  color: var(--app-text-faint);
  font-size: var(--app-type-label-xs-size);
  font-weight: var(--app-type-label-weight);
  letter-spacing: var(--app-type-label-tight-tracking);
  margin: 0 0 0.55rem;
  text-transform: uppercase;
}

.editorial-quiz__question {
  color: var(--app-text);
  font-size: var(--app-type-body-sm-size);
  font-weight: var(--app-type-label-soft-weight);
  line-height: var(--app-type-caption-line);
  margin: 0 0 0.75rem;
}

.editorial-quiz__options {
  display: grid;
  gap: 0.35rem;
}

.editorial-quiz__option {
  background: var(--app-surface-muted);
  border-radius: 8px;
  color: var(--app-text-soft);
  font-size: var(--app-type-ui-size);
  line-height: var(--app-type-tight-line);
  margin: 0;
  padding: 0.45rem 0.75rem;
}

.editorial-quiz__option--correct {
  background: var(--app-success-soft);
  border-left: 2px solid var(--app-success);
  color: var(--app-text);
  font-weight: var(--app-type-label-soft-weight);
}

@media (min-width: 640px) {
  .ui-section-split {
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .ui-split-header {
    align-items: end;
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (max-width: 800px) {
  .course-workspace {
    gap: 1.5rem;
    padding-block: 0.5rem 8rem;
  }

  .course-workspace__topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .course-workspace__titlebar {
    justify-content: flex-start;
    order: 2;
    width: 100%;
  }

  .course-workspace__actions {
    display: none;
  }

  .course-workspace__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-editor {
    gap: 1.5rem;
  }

  .course-editor__facts {
    align-items: flex-start;
    flex-direction: column;
  }

  .course-callout {
    align-items: flex-start;
    flex-direction: column;
  }

  .course-draft-compare {
    padding: 1.15rem;
  }

  .course-draft-compare__metrics,
  .course-draft-compare__groups {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-control__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .course-workspace__sidebar {
    position: static;
  }

  .course-control {
    padding: 1.15rem;
  }

  .generation-canvas {
    padding: 2.5rem 0 5rem;
  }

  .generation-orbit {
    height: 6rem;
    margin-bottom: 1.75rem;
    width: 6rem;
  }

  .generation-orbit-core {
    height: 3.75rem;
    width: 3.75rem;
  }

  .engine-tag {
    margin-bottom: 2rem;
  }

  .step-list {
    margin-bottom: 1.75rem;
    padding: 1.1rem 1.2rem;
  }

  .factoid-card {
    padding: 1.35rem 1.45rem;
  }

  .learner-layout {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 1.5rem 3rem;
  }

  .form-field-grid--split {
    grid-template-columns: minmax(0, 1fr);
  }

  .editorial-stats {
    flex-direction: column;
    gap: 1.25rem;
  }

  .editorial-stat {
    padding: 0;
  }

  .editorial-stat__divider {
    height: 1px;
    width: 100%;
  }
}

/* ============================================================
 * APP SKELETON COPY
 * Local selectors bridge existing Rails views onto copied app skeleton primitives.
 * ============================================================ */

.app-shell {
  min-height: 100dvh;
  background: var(--bg-alt);
  color: var(--text);
  font-family: var(--sans);
  position: relative;
}

.app-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 1.5rem 6rem;
}

.app-shell > .app-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 4rem;
  background: rgba(246, 245, 243, 0.78);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
}

.app-topbar-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.app-topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.app-topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--stone);
  flex-shrink: 0;
}

.app-topbar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-topbar-logo {
  display: block;
  flex-shrink: 0;
  height: 1.5rem;
  width: auto;
}

.app-topbar-avatar span,
.app-sidebar-user-avatar span {
  align-items: center;
  color: var(--text);
  display: flex;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.app-topbar-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.app-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.app-topbar-action-form {
  display: inline-flex;
}

.course-topbar-actions {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
}

.app-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.app-icon-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.app-icon-btn:active {
  transform: scale(0.95);
}

.app-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.app-page-header-text {
  min-width: 0;
}

.app-eyebrow {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  display: block;
  margin-bottom: 0.5rem;
}

.app-page-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(var(--text-xl), 5vw, var(--text-2xl));
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}

.app-page-title em {
  font-style: normal;
  font-weight: 600;
}

.course-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@media (min-width: 720px) {
  .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .course-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.progress-meta-value {
  color: var(--accent);
  font-family: var(--sans);
}

.progress-track {
  height: 3px;
  background: var(--rule);
  border-radius: 100px;
  overflow: hidden;
}

.progress-fill {
  width: 100%;
  height: 100%;
  background: var(--accent);
  border-radius: 100px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0,0,0,1);
}

.progress-fill--complete {
  background: var(--teal);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.6875rem;
  color: var(--text-light);
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.meta-item--success {
  color: var(--teal);
  font-weight: 600;
}

.meta-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.empty-card {
  background: var(--bg-alt);
  border: 1.5px dashed rgba(28,28,26,0.18);
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 320px;
  gap: 1rem;
}

.empty-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-card-icon svg {
  width: 22px;
  height: 22px;
}

.empty-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.0625rem;
  color: var(--text);
}

.empty-card-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 220px;
}

.empty-card-action {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: 0.25rem;
}

.empty-card-action:hover {
  text-decoration: underline;
}

.app-bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--rule);
}

.nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--text-light);
  border-radius: 10px;
  transition: color 0.15s, background 0.15s;
}

.nav-tab:hover {
  color: var(--text);
}

.nav-tab.is-active {
  color: var(--text);
  background: var(--bg-alt);
}

.nav-tab svg {
  width: 22px;
  height: 22px;
}

.nav-tab-label {
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .app-bottomnav.is-mobile-only {
    display: none;
  }
}

.app-layout {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  background: var(--bg-alt);
  color: var(--text);
  font-family: var(--sans);
}

@media (max-width: 1024px) {
  .app-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-layout .app-sidebar {
    display: none;
  }
}

.app-sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  background: #f1eee7;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1rem 1.75rem;
  gap: 1.5rem;
}

.app-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.5rem;
  margin-top: -0.375rem;
  min-width: 0;
}

.app-sidebar-logo {
  height: 22px;
  width: auto;
  max-width: 100%;
  display: block;
}

.app-sidebar-brand-link {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.app-sidebar-brand-link:hover {
  opacity: 0.68;
}

.app-sidebar-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.04em;
}

.app-sidebar-mark img {
  width: 16px;
  height: 16px;
  display: block;
}

.app-sidebar-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-sidebar-brand-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sidebar-cta {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: var(--text);
  color: var(--bg);
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(28,28,26,0.14), 0 4px 14px rgba(28,28,26,0.08);
  transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}

.app-sidebar-cta:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(28,28,26,0.18), 0 8px 22px rgba(28,28,26,0.1);
}

.app-sidebar-cta svg {
  width: 16px;
  height: 16px;
}

.app-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-height: 0;
  margin-top: 0.25rem;
}

.app-sidebar-section-label {
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  padding: 0 0.75rem;
  margin-bottom: 0.5rem;
}

.app-sidebar-recent {
  margin-top: 0.5rem;
  min-width: 0;
}

.app-sidebar-recent-list {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.sidebar-recent-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-muted);
  min-width: 0;
  transition: background 0.15s, color 0.15s;
}

.sidebar-recent-link:hover {
  background: rgba(255,255,255,0.6);
  color: var(--text);
}

.sidebar-recent-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-light);
}

.sidebar-recent-dot.is-live {
  background: var(--teal);
}

.sidebar-recent-title {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.app-sidebar-account {
  margin-top: auto;
  padding: 0.85rem;
  border-radius: 12px;
  background: var(--app-surface-strong);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(28,28,26,0.04);
}

.app-sidebar-account-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  margin-bottom: 0.9rem;
}

.app-sidebar-plan-usage {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.app-sidebar-plan-usage-count {
  font-weight: 600;
  color: var(--text);
}

.app-sidebar-plan-bar {
  height: 4px;
  border-radius: 100px;
  background: var(--bg-alt);
  overflow: hidden;
}

.app-sidebar-plan-bar span {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--accent);
}

.app-sidebar-plan-upgrade {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.75rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
  transition: gap 0.15s ease;
}

.app-sidebar-plan-upgrade svg {
  width: 13px;
  height: 13px;
}

.app-sidebar-plan-upgrade:hover {
  gap: 0.5rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
  position: relative;
}

.sidebar-link:hover {
  background: rgba(255,255,255,0.6);
  color: var(--text);
}

.sidebar-link.is-active {
  background: var(--app-surface-strong);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(28,28,26,0.06), 0 3px 8px rgba(28,28,26,0.05);
}

.sidebar-link.is-active svg {
  color: var(--accent);
}

.sidebar-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-link-label {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.app-sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--stone);
}

.app-sidebar-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-sidebar-user-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-sidebar-user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sidebar-user-role {
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 0.125rem;
}

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-alt);
}

.app-topbar--desktop {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  background: rgba(246, 245, 243, 0.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
  height: 4rem;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  z-index: 30;
}

.app-topbar-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.app-topbar-back {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.4rem;
  min-width: 0;
  max-width: 14rem;
  margin-right: 1rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
}

.app-topbar-back:hover {
  color: var(--text);
}

.app-topbar-back svg {
  flex: 0 0 1.125rem;
}

.app-topbar-back span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-topbar-title-row .app-topbar-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.app-topbar-divider {
  width: 1px;
  height: 18px;
  background: var(--rule);
  flex-shrink: 0;
}

.app-topbar-meta {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
}

.app-topbar-crumb {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
}

.app-topbar-crumb-step {
  color: var(--accent-dark);
  margin-right: 0.5rem;
}

.app-topbar-spacer {
  flex: 1;
}

.app-search {
  position: relative;
  width: clamp(180px, 22vw, 280px);
}

.app-search input {
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 2.25rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 100px;
  transition: border-color 0.15s, background 0.15s;
}

.app-search input:focus {
  outline: none;
  border-color: rgba(28,28,26,0.2);
}

.app-search input::placeholder {
  color: var(--text-light);
}

.app-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  pointer-events: none;
}

.app-search-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.organization-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.organization-switcher__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.organization-switcher__label {
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
}

.organization-switcher__control {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.organization-switcher__select {
  max-width: clamp(9rem, 16vw, 14rem);
  min-width: 8rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.75rem;
  padding: 0.45rem 2rem 0.45rem 0.85rem;
}

.organization-switcher__select:disabled {
  color: var(--text-muted);
  opacity: 1;
}

.organization-switcher__button,
.organization-switcher__new {
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--app-surface-strong);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.55rem 0.75rem;
  text-decoration: none;
  white-space: nowrap;
}

.organization-switcher__new {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.organization-switcher__button:hover,
.organization-switcher__new:hover {
  background: var(--bg);
  color: var(--text);
}

.organization-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.organization-choice__text {
  min-width: 0;
}

.organization-choice__text h2 {
  color: var(--app-text);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

.organization-choice__text p {
  color: var(--app-text-muted);
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0.25rem 0 0;
}

.app-content--desktop {
  max-width: 1280px;
  padding: 2.5rem 2.5rem 5rem;
  margin: 0 auto;
  width: 100%;
}

.app-content--course {
  max-width: none;
}

.app-content--course .course-workspace {
  width: 100%;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.section-head-text {
  min-width: 0;
}

.section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.section-head h2 em {
  font-style: normal;
  font-weight: 600;
}

.section-divider {
  border: none;
  height: 1px;
  background: var(--rule);
  margin: 4rem 0 3rem;
}

.learning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

.learning-card {
  background: var(--bg);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(28,28,26,0.04), 0 4px 16px rgba(28,28,26,0.03);
  transition: box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
}

.learning-card:hover {
  box-shadow: 0 4px 12px rgba(28,28,26,0.05), 0 12px 28px rgba(28,28,26,0.06);
}

.learning-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-alt);
}

.learning-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.4s ease;
  filter: saturate(0.7);
}

.learning-card:hover .learning-card-media img {
  transform: scale(1.04);
  filter: saturate(1);
}

.learning-card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1.5rem;
}

.learning-card-status {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.625rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent-dark);
  backdrop-filter: blur(6px);
}

.learning-card-status--new {
  color: var(--teal);
}

.learning-card-status--review {
  color: var(--text);
}

.learning-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.learning-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.learning-card:hover .learning-card-title {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.learning-card-arrow {
  color: var(--text-light);
  flex-shrink: 0;
  transition: color 0.2s, transform 0.2s;
}

.learning-card-arrow svg {
  width: 18px;
  height: 18px;
  display: block;
}

.learning-card:hover .learning-card-arrow {
  color: var(--text);
  transform: translate(2px, -2px);
}

.learning-card-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  color: var(--text-light);
}

.learning-card-meta-dot {
  color: var(--rule);
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.module-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}

.module-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.module-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--teal-tint);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-card-icon svg {
  width: 18px;
  height: 18px;
}

.module-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--text);
}

.module-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
}

.avatar-stack {
  display: inline-flex;
}

.avatar-stack > * {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  margin-left: -6px;
  background: var(--stone);
}

.avatar-stack > *:first-child {
  margin-left: 0;
}

.avatar-stack > *:nth-child(2) {
  background: var(--cream);
}

.avatar-stack > *:nth-child(3) {
  background: var(--sage);
}

.status-pill {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 0.75rem 1rem;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(28,28,26,0.08), 0 1px 2px rgba(28,28,26,0.04);
}

.status-pulse {
  width: 10px;
  height: 10px;
  position: relative;
  flex-shrink: 0;
}

.status-pulse::before,
.status-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
}

.status-pulse::before {
  animation: statusPing 1.6s cubic-bezier(0,0,0.2,1) infinite;
  opacity: 0.4;
}

.status-pulse::after {
  transform: scale(0.8);
}

@keyframes statusPing {
  0% {
    transform: scale(0.8);
    opacity: 0.55;
  }

  75% {
    transform: scale(2.2);
    opacity: 0;
  }

  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.status-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.status-label {
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.125rem;
}

.status-message {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text);
}

.status-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  padding: 0.25rem;
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.status-close:hover {
  color: var(--text);
}

.status-close svg {
  width: 14px;
  height: 14px;
}

/* Setup wizard surfaces. */
.setup-canvas {
  max-width: 880px;
  margin: 0 auto;
  padding: 3rem 2.5rem 8rem;
}

.setup-header {
  margin-bottom: 4rem;
  max-width: 720px;
}

.setup-eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 1rem;
  display: block;
}

.setup-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 1.25rem;
}

.setup-title em {
  font-style: normal;
  font-weight: 600;
}

.setup-sub {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.form-sections {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.form-section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.form-section-num {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
}

.form-section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

.field-chip {
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.2rem 0.625rem;
  border-radius: 4px;
  background: var(--bg-alt);
  color: var(--text-light);
}

.field-chip--required {
  color: var(--accent);
  background: rgba(196,113,106,0.1);
}

.field-chip--contextual {
  color: var(--teal);
  background: var(--teal-tint);
}

.form-field {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  transition: border-color 0.15s;
}

.form-field:focus-within {
  border-color: rgba(28,28,26,0.24);
}

.form-field--needs-attention {
  border-color: var(--app-accent-border);
  background: var(--app-accent-soft);
}

.form-field textarea,
.form-field select,
.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text);
  background: transparent;
}

.form-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 0.8rem) 55%, calc(100% - 0.45rem) 55%;
  background-repeat: no-repeat;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  padding-right: 1.5rem;
}

.form-field textarea {
  min-height: 120px;
}

.form-field textarea::placeholder,
.form-field input::placeholder {
  color: var(--text-light);
}

.form-field--mono textarea {
  font-family: monospace;
  font-size: 0.8125rem;
}

.form-field-help {
  color: var(--text-muted);
  font-size: var(--app-type-caption-size);
  line-height: var(--app-type-caption-line);
  margin-top: 0.45rem;
}

.form-field-help--warning {
  color: var(--app-accent-strong);
}

.source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.source-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}

.source-card:hover {
  border-color: rgba(28,28,26,0.22);
}

.source-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(196,113,106,0.1), 0 8px 24px rgba(196,113,106,0.08);
}

.source-card-check {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: none;
  align-items: center;
  justify-content: center;
}

.source-card.is-selected .source-card-check {
  display: inline-flex;
}

.source-card-check svg {
  width: 13px;
  height: 13px;
}

.source-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.source-card-icon svg {
  width: 20px;
  height: 20px;
}

.source-card-icon--docs {
  background: rgba(196,113,106,0.12);
  color: var(--accent-dark);
}

.source-card-icon--ai {
  background: var(--teal-tint);
  color: var(--teal);
}

.source-card-icon--hybrid {
  background: linear-gradient(135deg, rgba(196,113,106,0.18), rgba(61,107,86,0.18));
  color: var(--text);
}

.source-card-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--text);
}

.source-card-desc {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-muted);
  flex: 1;
}

.source-card-foot {
  margin-top: auto;
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
}

.source-card.is-selected .source-card-foot {
  color: var(--accent);
}

.upload-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  background: var(--bg-alt);
  border: 1.5px dashed rgba(28,28,26,0.16);
  border-radius: 10px;
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.upload-drop:hover {
  border-color: var(--accent);
  background: rgba(196,113,106,0.04);
}

.source-card.is-selected .upload-drop {
  border-color: rgba(196,113,106,0.35);
}

.upload-drop.has-file {
  background: rgba(196,113,106,0.08);
  border-color: rgba(196,113,106,0.5);
}

.source-upload-input {
  cursor: pointer;
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}

.source-upload-input:disabled {
  pointer-events: none;
}

.upload-drop svg {
  width: 18px;
  height: 18px;
  color: var(--text-light);
}

.upload-drop-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.4;
  max-width: 160px;
}

.upload-drop-status {
  color: var(--accent);
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.35;
  max-width: 180px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-drop--big {
  padding: 2.5rem;
  border-radius: 16px;
}

.upload-drop--big svg {
  width: 28px;
  height: 28px;
}

.upload-drop--big .upload-drop-label {
  font-size: 0.8125rem;
  max-width: 260px;
}

/* Shared pill button. */
.btn-pill {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.6rem 1.5rem;
  background: var(--text);
  color: var(--bg);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.btn-pill:hover {
  opacity: 0.8;
}

.btn-pill--danger {
  background: var(--app-danger-soft);
  color: var(--app-danger);
}

.btn-pill--ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--app-border-strong);
  color: var(--app-text-strong);
}

.btn-pill--ghost:hover {
  background: rgba(28, 28, 26, 0.045);
  opacity: 1;
}

.btn-pill--ghost svg {
  flex-shrink: 0;
}

.app-footer-bar {
  position: fixed;
  bottom: 0;
  left: 248px;
  right: 0;
  z-index: 30;
  height: 4.5rem;
  background: rgba(246, 245, 243, 0.86);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  gap: 2rem;
}

.app-footer-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.app-footer-progress-track {
  width: clamp(120px, 20vw, 220px);
  height: 3px;
  background: var(--rule);
  border-radius: 100px;
  overflow: hidden;
}

.app-footer-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 100px;
  transition: width 0.4s cubic-bezier(0,0,0,1);
}

.app-footer-progress-meta {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
}

.app-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.btn-ghost {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.6rem 1.25rem;
  border-radius: 100px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

.btn-ghost:hover {
  color: var(--text);
  background: rgba(28,28,26,0.04);
}

@media (max-width: 1024px) {
  .app-footer-bar {
    left: 0;
    padding: 0 1.25rem;
  }
}

@media (max-width: 768px) {
  .setup-canvas {
    padding: 2rem 1.25rem 7rem;
  }

  .setup-header {
    margin-bottom: 2.5rem;
  }

  .form-sections {
    gap: 2.5rem;
  }

  .app-footer-bar {
    height: auto;
    padding: 0.875rem 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .app-footer-progress {
    width: 100%;
    justify-content: space-between;
  }

}

/* Editor workspace module cards. */
.module-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Content editor: module groups + collapsible card rows ──────────────────
   Each module is a clear group — a header with a number marker, then its cards
   nested under a left spine, collapsible to a scannable outline. */
.module-group {
  margin-bottom: 1.75rem;
}

.module-group:last-child {
  margin-bottom: 0;
}

.module-group__header {
  align-items: start;
  display: grid;
  gap: 0.25rem 1.25rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0 0.25rem 1.4rem;
}

.module-group__num {
  align-items: center;
  background: var(--bg-alt);
  border-radius: 12px;
  color: var(--text-muted);
  display: inline-flex;
  flex-shrink: 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  grid-row: 1 / span 2;
  height: 2.75rem;
  justify-content: center;
  width: 2.75rem;
}

.module-group__head-text {
  min-width: 0;
}

.module-group__eyebrow {
  align-items: center;
  color: var(--text-light);
  display: inline-flex;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  gap: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.module-group__title {
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0.35rem 0 0;
}

.module-group__objective {
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0.6rem 0 0;
  max-width: 56ch;
}

.module-group__objective--pending {
  color: var(--text-light);
  font-style: italic;
}

.module-group__meta {
  color: var(--text-light);
  display: flex;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  gap: 1rem;
  letter-spacing: 0.08em;
  margin-top: 0.85rem;
  text-transform: uppercase;
}

.module-group__edit {
  align-self: start;
}

.module-group__header-form {
  margin-bottom: 0.5rem;
}

/* Cards nested under the module, connected by a left spine. */
.module-group__cards {
  border-left: 2px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-left: 1.375rem;
  padding-left: 1.6rem;
}

.module-group--draft .module-group__cards {
  border-left-color: var(--app-accent-border, var(--rule));
}

.module-group--editing .module-group__cards {
  border-left-style: dashed;
}

/* Collapsible card row. */
.card-row {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  scroll-margin-top: 6rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.card-row:hover {
  border-color: rgba(28, 28, 26, 0.16);
}

.card-row.is-open {
  box-shadow: 0 1px 2px rgba(28, 28, 26, 0.04), 0 6px 18px rgba(28, 28, 26, 0.05);
}

.card-row__head {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  padding: 0.45rem 0.55rem 0.45rem 0.6rem;
}

.card-row__toggle {
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex: 1;
  font: inherit;
  gap: 0.85rem;
  min-width: 0;
  padding: 0.35rem 0.25rem;
  text-align: left;
}

.card-row__icon {
  align-items: center;
  background: var(--bg-alt);
  border-radius: 9px;
  color: var(--text-muted);
  display: inline-flex;
  flex-shrink: 0;
  height: 2.1rem;
  justify-content: center;
  width: 2.1rem;
}

.card-row__icon svg {
  height: 1.1rem;
  width: 1.1rem;
}

.card-row--check .card-row__icon {
  background: var(--app-success-soft, var(--teal-tint));
  color: var(--app-success, var(--teal));
}

.card-row__text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.card-row__kind {
  color: var(--text-light);
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-row__title {
  color: var(--text);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-row__chevron {
  color: var(--text-light);
  flex-shrink: 0;
  height: 1.05rem;
  margin-left: 0.5rem;
  transition: transform 0.25s ease;
  width: 1.05rem;
}

.card-row.is-open .card-row__chevron {
  transform: rotate(180deg);
}

.card-row__actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 0.05rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.card-row:hover .card-row__actions,
.card-row:focus-within .card-row__actions,
.card-row.is-open .card-row__actions {
  opacity: 1;
}

.card-row__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}

.card-row__body-inner {
  border-top: 1px solid var(--rule);
  padding: 1rem 1.25rem 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .card-row__body,
  .card-row__chevron {
    transition: none;
  }
}

.module-editor-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 2.5rem 2.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  overflow: hidden;
  scroll-margin-top: 6rem;
  box-shadow: 0 1px 2px rgba(28, 28, 26, 0.04), 0 4px 16px rgba(28, 28, 26, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.module-editor-card:hover {
  border-color: rgba(28, 28, 26, 0.18);
  box-shadow: 0 2px 4px rgba(28, 28, 26, 0.05), 0 8px 24px rgba(28, 28, 26, 0.05);
}

/* Cards sit indented under their module so it reads as a hierarchy:
   modules at the base, their sub-cards pushed slightly right. */
.module-editor-card--card {
  margin-left: 2rem;
}

.module-editor-card--draft {
  border-color: rgba(196,113,106,0.35);
}

.module-editor-card--draft::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--accent);
}

.module-editor-card--complete::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--app-border-strong);
}

.module-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

.module-head-text {
  min-width: 0;
}

.module-num {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.5rem;
}

.module-num-state {
  margin-left: 0.5rem;
  color: var(--accent);
}

.module-num-state--complete {
  color: var(--teal);
}

.module-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

.module-action {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  padding: 0.25rem;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
}

.module-action:hover {
  color: var(--text);
  background: var(--bg-alt);
}

/* Interactive feedback — hover + keyboard focus on editor controls so nothing
   reads as a flat, unstyled element. Destructive controls tint danger-red. */
.module-action--danger:hover,
.module-action--danger:focus-visible {
  background: var(--app-danger-soft, var(--bg-alt));
  color: var(--app-danger, var(--text));
}

.quiz-card-editor__remove {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.quiz-card-editor__remove:hover,
.quiz-card-editor__remove:focus-visible {
  background: var(--app-danger-soft, var(--bg-alt));
  border-color: var(--app-danger-border, var(--app-danger));
  color: var(--app-danger, var(--text));
}

.card-row__toggle {
  border-radius: 10px;
  transition: background 0.15s;
}

.card-row__toggle:hover {
  background: var(--bg-alt);
}

.card-row__toggle:hover .card-row__icon {
  color: var(--text);
}

.quiz-card-editor__correct {
  cursor: pointer;
  transition: color 0.15s;
}

.quiz-card-editor__correct:hover {
  color: var(--text);
}

.module-action:focus-visible,
.card-row__toggle:focus-visible,
.quiz-card-editor__remove:focus-visible {
  outline: 2px solid var(--app-accent-border, var(--accent));
  outline-offset: 2px;
}

.module-action--ai {
  color: var(--accent);
}

.module-action svg {
  width: 18px;
  height: 18px;
}

.course-overview-card {
  background: var(--app-panel-warm, var(--bg-alt));
  margin-bottom: 1.5rem;
}

/* Edit-mode cards get a warm tint so the white fields read as distinct planes
   instead of white-on-white. Applies to every inline edit form, coherently. */
.module-editor-card--card,
.module-group__header-form {
  background: var(--app-panel-warm, var(--bg-alt));
}

.course-overview-form,
.course-overview-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.course-overview-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 34%);
  gap: 1.5rem;
  align-items: start;
}

.course-overview-preview__text {
  min-width: 0;
}

.course-overview-preview__title {
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0.75rem 0 0;
  overflow-wrap: anywhere;
}

.course-overview-preview__description {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 1rem 0 0;
  max-width: 38rem;
  overflow-wrap: anywhere;
}

.course-overview-preview__media {
  aspect-ratio: 16 / 10;
  background: var(--bg-alt);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
}

.course-overview-preview__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Edit-mode field polish — scoped to inline edit forms so the global
   .form-field pattern is untouched. Fields read as editable on hover/focus. */
.course-edit-form .form-field:not(.cover-upload):hover {
  border-color: rgba(28, 28, 26, 0.18);
}

.course-edit-form .form-field:not(.cover-upload):focus-within {
  border-color: var(--text);
  outline: 2px solid var(--app-accent-border, rgba(28, 28, 26, 0.16));
  outline-offset: 2px;
}

.course-edit-form .form-field textarea {
  min-height: 84px;
  resize: vertical;
}

/* Inline edit-form header — orients the editor with the type icon + context. */
.edit-form__head {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  margin-bottom: 0.35rem;
}

.edit-form__eyebrow {
  color: var(--text-light);
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Answer-choice editor — clearer per-option grouping + green "correct" state. */
.quiz-card-editor__option:has(.quiz-card-editor__correct input:checked) {
  border-color: var(--app-success-border, var(--rule));
  background: var(--app-success-soft, var(--teal-tint));
}

.quiz-card-editor__correct:has(input:checked) {
  color: var(--app-success, var(--teal));
  font-weight: 600;
}

/* Cover image upload — thumbnail + styled replace control + live preview. */
.cover-upload {
  align-items: center;
  display: grid;
  gap: 1.15rem;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
}

.cover-upload__preview {
  aspect-ratio: 16 / 10;
  background: var(--bg-alt);
  border-radius: 10px;
  overflow: hidden;
}

.cover-upload__image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.cover-upload__body {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.cover-upload__action {
  align-items: center;
  background: var(--app-surface-strong, #fff);
  border: 1px solid var(--rule);
  border-radius: var(--app-radius-pill, 999px);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 500;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}

.cover-upload__action:hover {
  border-color: rgba(28, 28, 26, 0.3);
}

.cover-upload__action:focus-within {
  border-color: var(--text);
  outline: 2px solid var(--app-accent-border, rgba(28, 28, 26, 0.18));
  outline-offset: 2px;
}

/* Visually hidden but focusable + clickable over the whole pill. */
.cover-upload__input {
  cursor: pointer;
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}

.cover-upload__status {
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cover-upload.has-file .cover-upload__status {
  color: var(--app-accent, var(--text));
  font-weight: 500;
}

@media (max-width: 540px) {
  .cover-upload {
    grid-template-columns: minmax(0, 1fr);
  }

  .cover-upload__preview {
    max-width: 14rem;
  }
}

/* Course theme options — Vista texture picker + custom background (editor). */
.theme-options__vista[hidden] {
  display: none;
}

.theme-options__vista {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-top: 1.15rem;
}

.theme-options__hint {
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
  margin: 0;
}

.texture-picker__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.texture-picker__sw {
  border: 1px solid var(--rule);
  border-radius: 9px;
  cursor: pointer;
  height: 36px;
  padding: 0;
  transition: box-shadow 0.18s, transform 0.18s;
  width: 36px;
}

.texture-picker__sw:hover {
  transform: translateY(-1px);
}

.texture-picker__sw:focus-visible {
  outline: 2px solid var(--app-accent, var(--text));
  outline-offset: 2px;
}

.texture-picker__sw[aria-pressed="true"] {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--app-accent, var(--text));
}

.texture-picker .sw-espresso {
  background: radial-gradient(120% 105% at 50% 0%, #2a1f16, #120b06);
}

.texture-picker .sw-slate {
  background: radial-gradient(120% 105% at 50% 0%, #262d31, #0b0f11);
}

.texture-picker .sw-linen {
  background: repeating-linear-gradient(46deg, rgba(255, 240, 214, 0.09) 0 2px, transparent 2px 5px),
    radial-gradient(120% 105% at 50% 0%, #241c14, #100a06);
}

.texture-picker .sw-ink {
  background: radial-gradient(100% 78% at 50% 32%, #191411, #050302);
}

.texture-picker .sw-sand {
  background: radial-gradient(120% 105% at 50% 0%, #ece0da, #d3beb4);
}
/* The course's own photo (auto-fetched or uploaded), shown as a live thumbnail
   from an inline background-image — the default, first background choice. */
.texture-picker .sw-photo {
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.24);
}

.texture-picker .sw-photo[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--app-accent, var(--text)), inset 0 0 0 1px rgba(0, 0, 0, 0.24);
}

/* Custom background upload — reuses .cover-upload; empty preview shows a hatch. */
.background-upload .cover-upload__image:not([src]),
.background-upload .cover-upload__image[src=""] {
  background: repeating-linear-gradient(45deg, var(--app-surface-muted, rgba(0, 0, 0, 0.05)) 0 8px, transparent 8px 16px);
}

.background-upload__remove {
  align-items: center;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.8125rem;
  gap: 0.4rem;
}

.course-overview-display-field {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.course-overview-display-field--description {
  min-height: 12rem;
}

.course-overview-display-field__value {
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.course-content-markdown {
  overflow-wrap: anywhere;
  white-space: normal;
}

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

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

.course-content-markdown p,
.course-content-markdown ul,
.course-content-markdown ol,
.course-content-markdown blockquote,
.course-content-markdown pre,
.course-content-markdown table {
  margin: 0 0 0.75rem;
}

.course-content-markdown ul,
.course-content-markdown ol {
  padding-left: 1.25rem;
}

.course-content-markdown li + li {
  margin-top: 0.25rem;
}

.course-content-markdown a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.course-content-markdown blockquote {
  border-left: 2px solid var(--app-border-strong);
  color: var(--text-muted);
  padding-left: 0.875rem;
}

.course-content-markdown code {
  background: var(--bg-alt);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.92em;
  padding: 0.1rem 0.25rem;
}

.course-content-markdown pre {
  background: var(--bg-alt);
  border-radius: 8px;
  overflow-x: auto;
  padding: 0.875rem;
}

.course-content-markdown pre code {
  background: transparent;
  padding: 0;
}

.course-content-markdown__table-wrap {
  overflow-x: auto;
}

.course-content-markdown__table {
  border-collapse: collapse;
  min-width: 100%;
}

.course-content-markdown__table th,
.course-content-markdown__table td {
  border-bottom: 1px solid var(--rule);
  padding: 0.45rem 0.6rem;
  text-align: left;
  vertical-align: top;
}

.course-overview-display-field__value--placeholder {
  color: var(--text-light);
}

.module-body {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

.module-image {
  aspect-ratio: 16 / 8;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-alt);
}

.module-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.7);
}

@media (max-width: 760px) {
  .course-overview-preview {
    grid-template-columns: 1fr;
  }
}

.module-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.module-skeleton-line {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--bg-alt) 0%, var(--rule) 50%, var(--bg-alt) 100%);
  background-size: 200% 100%;
  animation: skelShimmer 1.8s ease-in-out infinite;
}

.module-skeleton-line:nth-child(2) {
  width: 92%;
}

.module-skeleton-line:nth-child(3) {
  width: 68%;
}

@keyframes skelShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.module-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--accent);
  min-width: 0;
}

.module-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  position: relative;
}

.module-status-dot::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: tagPulse 1.6s cubic-bezier(0,0,0.2,1) infinite;
}

@keyframes tagPulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  100% {
    transform: scale(3);
    opacity: 0;
  }
}

.module-quiz {
  background: var(--bg-alt);
  border-radius: 10px;
  padding: 1rem;
}

.module-quiz-q {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.625rem;
  line-height: 1.45;
}

.module-quiz-opt {
  display: block;
  font-family: var(--sans);
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border-radius: 8px;
  margin-top: 0.5rem;
  color: var(--text-muted);
}

.module-quiz-opt.is-correct {
  background: var(--teal-tint);
  color: var(--teal);
  font-weight: 500;
  border-left: 2px solid var(--teal);
}

/* Floating adjust panel. */
.adjust-panel {
  position: fixed;
  bottom: 1.5rem;
  z-index: 40;
  left: calc(248px + 2.5rem);
  right: 2.5rem;
  max-width: 780px;
  margin: 0 auto;
  background: rgba(243, 236, 230, 0.94);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(28,28,26,0.06);
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 12px 40px rgba(28,28,26,0.08), 0 1px 3px rgba(28,28,26,0.04);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

@media (max-width: 1024px) {
  .adjust-panel {
    left: 1rem;
    right: 1rem;
  }
}

.adjust-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
  flex: 1;
  min-width: 0;
}

.adjust-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.adjust-label {
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
}

.adjust-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.55rem 2rem 0.55rem 0.875rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231c1c1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
  transition: border-color 0.15s;
}

.adjust-select:hover {
  border-color: rgba(28,28,26,0.22);
}

.adjust-select:focus {
  outline: none;
  border-color: var(--accent);
}

.adjust-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  flex-shrink: 0;
}

.btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--rule);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.btn-icon:hover {
  background: var(--bg-alt);
  border-color: rgba(28,28,26,0.22);
}

.btn-icon svg {
  width: 18px;
  height: 18px;
}

/* Mobile tune/preview surface. */
.tune-canvas {
  display: none;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 0 2rem;
}

.tune-section {
  margin-bottom: 2rem;
}

.tune-section-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.875rem;
}

.tune-section-label span {
  color: var(--accent-dark);
}

.option-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  border-radius: 100px;
  background: var(--bg);
  border: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.option-item:hover {
  color: var(--text);
  border-color: rgba(28,28,26,0.18);
}

.option-item.is-selected {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.option-item-radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.4;
  flex-shrink: 0;
}

.option-item.is-selected .option-item-radio {
  opacity: 1;
  background: var(--bg);
  border-color: var(--bg);
  position: relative;
}

.option-item.is-selected .option-item-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--text);
  border-radius: 50%;
}

.slider-control {
  padding: 0.5rem 0 0;
}

.slider-input {
  width: 100%;
  accent-color: var(--accent);
}

.slider-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 0.5rem;
}

.ai-assistant-card {
  background: var(--text);
  color: var(--bg);
  border-radius: 16px;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  margin-top: 1.5rem;
}

.ai-assistant-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.625rem;
}

.ai-assistant-label svg {
  width: 12px;
  height: 12px;
}

.ai-assistant-body {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--bg) 86%, transparent);
  margin-bottom: 1rem;
}

.ai-assistant-body em {
  color: var(--bg);
  font-style: normal;
  font-weight: 600;
}

.ai-assistant-action {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-radius: 100px;
  background: rgba(255,255,255,0.12);
  color: var(--bg);
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.ai-assistant-action:hover {
  background: rgba(255,255,255,0.18);
}

/* Post-publish dashboard. */
.publish-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.publish-header-text {
  min-width: 0;
}

.publish-header-action-form {
  display: inline-flex;
}

.publish-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.publish-title em {
  font-style: normal;
  font-weight: 600;
}

.publish-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.live-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.publish-meta {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
}

.publish-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.share-zone {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.share-zone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.share-zone-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.125rem;
  margin: 0;
}

.share-zone-sub {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.share-row {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}

.share-input {
  flex: 1;
  min-width: 0;
  padding: 0.625rem 0.875rem;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: var(--bg-alt);
  font-family: var(--sans);
  font-size: 0.8125rem;
}

.share-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}

.share-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-alt);
  border: 1px dashed var(--rule);
  border-radius: 10px;
  padding: 0.625rem 0.875rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 0;
}

.share-link code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--sans);
}

.share-qr {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Share actions 3-button grid (mobile publish). */
.share-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.share-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.875rem 0.5rem;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.share-action:hover {
  border-color: rgba(28,28,26,0.22);
  background: var(--bg-alt);
}

.share-action.is-primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.share-action svg {
  width: 16px;
  height: 16px;
}

.share-zone .share-actions {
  display: none;
  margin-bottom: 0;
}

.stat-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.stat-list--dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  gap: 1rem;
  min-width: 0;
}

.stat-card-text {
  min-width: 0;
}

.stat-card-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.875rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  display: block;
  margin-bottom: 0.25rem;
}

.stat-card-num--placeholder {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-muted);
}

.stat-card-label {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
}

.stat-card-glyph {
  color: var(--text-light);
  opacity: 0.65;
  flex-shrink: 0;
}

.stat-card-glyph svg {
  width: 28px;
  height: 28px;
}

/* Callout card. */
.callout-card {
  background: var(--text);
  color: var(--bg);
  border-radius: 16px;
  padding: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.callout-card-text {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.45;
  max-width: 480px;
  min-width: 0;
}

.callout-card-text strong {
  color: var(--bg);
}

.callout-card-text em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}

.callout-card-glyph {
  position: absolute;
  right: 1rem;
  bottom: -0.5rem;
  opacity: 0.06;
  pointer-events: none;
}

.callout-card-glyph svg {
  width: 110px;
  height: 110px;
}

.callout-card-action {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.65rem 1.25rem;
  border-radius: 100px;
  background: rgba(255,255,255,0.12);
  color: var(--bg);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}

.callout-card-action:hover {
  background: rgba(255,255,255,0.18);
}

.callout-card-action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.enroll-table {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: visible;
}

.enroll-table-head {
  display: grid;
  grid-template-columns: minmax(11rem, 1.6fr) minmax(0, 0.85fr) repeat(3, minmax(0, 0.85fr)) minmax(0, 0.65fr) minmax(0, 0.9fr) minmax(3rem, 0.45fr);
  gap: 1rem;
  padding: 0.875rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
}

.enroll-row {
  display: grid;
  grid-template-columns: minmax(11rem, 1.6fr) minmax(0, 0.85fr) repeat(3, minmax(0, 0.85fr)) minmax(0, 0.65fr) minmax(0, 0.9fr) minmax(3rem, 0.45fr);
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.enroll-row:last-child {
  border-bottom: none;
}

.enroll-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.enroll-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--stone);
  overflow: hidden;
  flex-shrink: 0;
}

.enroll-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.enroll-user-name {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.enroll-status {
  text-align: left;
}

.enroll-score,
.enroll-activity,
.enroll-date,
.enroll-duration {
  color: var(--text-light);
  font-family: var(--sans);
  font-size: 0.75rem;
  min-width: 0;
}

.enroll-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
  min-width: 0;
  position: relative;
}

.enroll-action-form {
  margin: 0;
}

.enroll-actions .callout-card-action {
  background: var(--stone);
  color: var(--text);
  padding: 0.5rem 0.75rem;
}

.enroll-actions .callout-card-action:hover {
  background: var(--rule);
}

.enroll-action-menu {
  position: relative;
}

.enroll-action-menu__trigger {
  align-items: center;
  background: var(--stone);
  border: 0;
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  list-style: none;
  transition: background 0.15s, color 0.15s;
  width: 2.25rem;
}

.enroll-action-menu__trigger::-webkit-details-marker {
  display: none;
}

.enroll-action-menu__trigger:hover,
.enroll-action-menu[open] .enroll-action-menu__trigger {
  background: var(--rule);
}

.enroll-action-menu__panel {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(34, 31, 28, 0.14);
  display: grid;
  gap: 0.25rem;
  min-width: 11rem;
  padding: 0.35rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 20;
}

.enroll-action-menu__item {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.2;
  padding: 0.65rem 0.75rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.enroll-action-menu__item:hover {
  background: var(--stone);
}

.enroll-action-menu__item:disabled,
.enroll-action-menu__item--muted {
  color: var(--text-light);
  cursor: not-allowed;
}

.enroll-actions__upgrade {
  text-decoration: none;
}

.enroll-actions__empty {
  color: var(--text-light);
  font-family: var(--sans);
  font-size: 0.75rem;
}

.removed-invites {
  margin-top: 1rem;
}

.removed-invites summary {
  color: var(--text-light);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Learner invite runner bridge. */
.learner-app-content {
  max-width: 1120px;
  padding-top: 7rem;
}

/* Focus-player has no full hero, so it needs only a small breath below the
   fixed topbar rather than the old hero-sized clearance. */
.learner-app-content--runner {
  padding-bottom: 3rem;
  padding-top: 4.5rem;
}

/* The layout's deep scroll-padding double-counts with the splash's fill height;
   trim it for the runner so the splash can sit as a single-viewport intro. */
.learner-app-content--runner .learner-layout {
  padding-block: 2rem;
}

.learner-publish-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
  padding-bottom: 2rem;
}

.learner-publish-header .publish-header-text {
  flex: 1 1 0;
}

.learner-publish-sub {
  max-width: 32rem;
  margin-top: 1rem;
}

.learner-publish-media {
  flex-shrink: 0;
  width: clamp(220px, 28%, 340px);
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: var(--app-surface-soft);
  margin-top: 0.4rem;
}

.learner-publish-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .learner-publish-media {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

.learner-runner {
  min-width: 0;
  padding: 0;
}

.learner-runner [data-learner-runner-target="runner"] {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.learner-card.module-editor-card {
  margin-top: 0;
}

.learner-card.module-editor-card.is-entering {
  animation: learner-card-enter 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.learner-card .module-num.is-entering,
.learner-card .module-title.is-entering {
  animation: learner-card-title-enter 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.learner-card .module-title.is-entering {
  animation-delay: 70ms;
}

.learner-card.learner-card--summary {
  background: var(--text);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--bg);
  box-shadow: 0 1px 2px rgba(28, 28, 26, 0.18), 0 8px 24px rgba(28, 28, 26, 0.12);
}

.learner-card--summary .module-num,
.learner-card--summary .progress-meta {
  color: rgba(255, 255, 255, 0.55);
}

.learner-card--summary .module-title {
  color: var(--bg);
}

.learner-card--summary .module-body,
.learner-card--summary .learner-card__body {
  color: rgba(255, 255, 255, 0.78);
}

.learner-card--summary .progress-track {
  background: rgba(255, 255, 255, 0.12);
}

.learner-card--summary .progress-meta-value {
  color: var(--accent);
}

.learner-card--summary.module-editor-card--complete::before {
  background: rgba(255, 255, 255, 0.2);
}

.learner-card__citations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Optional creative-commons image band (content cards). Breaks out of the card
   padding to sit full-bleed at the top; the card's overflow:hidden clips it to
   the card's rounded corners. */
.learner-card__media {
  position: relative;
  margin: -2.5rem -2.75rem 0.5rem;
  aspect-ratio: 16 / 6.2;
  overflow: hidden;
  background: var(--media-avg, var(--app-surface-muted));
}
.learner-card__media[hidden] {
  display: none;
}
.learner-card__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02) brightness(0.98) sepia(0.08);
}
.learner-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: linear-gradient(200deg, color-mix(in srgb, var(--app-accent) 14%, transparent), rgba(20, 16, 12, 0.14));
}
@media (max-width: 640px) {
  .learner-card__media {
    margin: -1.25rem -1.25rem 0.5rem;
    aspect-ratio: 16 / 8;
  }
}

/* Elevated learner choices — the choices float on the card (no inset box) and
   read as tactile, selectable surfaces. */
.learner-card__choices.module-quiz {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: none;
  border-radius: 0;
  padding: 0;
  margin-top: 1.6rem;
}

.learner-choice.module-quiz-opt {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  width: 100%;
  margin-top: 0;
  padding: 1rem 1.25rem 1rem 1rem;
  background: var(--opt);
  border: 1px solid var(--app-border);
  border-radius: 15px;
  color: var(--app-text);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.28s ease,
    border-color 0.28s ease, box-shadow 0.28s ease;
}

.learner-choice__key {
  flex: none;
  width: 32px;
  height: 32px;
  margin-top: -1px;
  border-radius: 50%;
  border: 1px solid var(--app-border-strong);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1;
  color: var(--app-accent-strong);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.learner-choice__body {
  flex: 1;
  min-width: 0;
  padding-top: 0.3rem;
}

.learner-choice__title {
  display: block;
  min-width: 0;
}

/* Hover — only while the option is still interactive. */
.learner-choice.module-quiz-opt:not(:disabled):not(.is-selected):not(.is-correct):not(.is-incorrect):hover {
  transform: translateY(-2px);
  background: var(--opt-hover);
  border-color: var(--app-accent);
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--app-accent) 42%, transparent),
    0 2px 6px -3px rgba(0, 0, 0, 0.22);
}
.learner-choice.module-quiz-opt:not(:disabled):not(.is-selected):not(.is-correct):not(.is-incorrect):hover
  .learner-choice__key {
  background: var(--app-accent);
  color: #fff;
  border-color: var(--app-accent);
  transform: scale(1.06);
}

.learner-choice.module-quiz-opt:focus-visible {
  outline: 2px solid var(--app-accent-border, var(--accent));
  outline-offset: 2px;
}

/* Selected (before the answer is checked). */
.learner-choice.module-quiz-opt.is-selected {
  background: var(--opt-hover);
  border-color: var(--app-text);
  color: var(--app-text);
}
.learner-choice.module-quiz-opt.is-selected .learner-choice__key {
  background: var(--app-text);
  color: var(--app-surface-strong);
  border-color: var(--app-text);
}

/* Correct — forest ring, inset bar, revealed reasoning, drawn tick. */
.learner-choice.module-quiz-opt.is-correct {
  border-color: color-mix(in srgb, var(--app-success) 52%, transparent);
  background: color-mix(in srgb, var(--app-success) 13%, var(--app-surface-strong));
  box-shadow: inset 3px 0 0 var(--app-success),
    0 14px 32px -20px color-mix(in srgb, var(--app-success) 60%, transparent);
  color: var(--app-text);
}
.learner-choice.module-quiz-opt.is-correct .learner-choice__key {
  background: var(--app-success);
  color: #fff;
  border-color: var(--app-success);
}

/* Incorrect — terracotta ring + inset bar. */
.learner-choice.module-quiz-opt.is-incorrect {
  border-color: var(--app-danger);
  background: var(--app-danger-soft);
  box-shadow: inset 3px 0 0 var(--app-danger);
  color: var(--app-text);
}
.learner-choice.module-quiz-opt.is-incorrect .learner-choice__key {
  background: var(--app-danger);
  color: #fff;
  border-color: var(--app-danger);
}

/* Locked non-answers recede. */
.learner-choice.module-quiz-opt:disabled {
  cursor: default;
}
.learner-choice.module-quiz-opt:disabled:not(.is-correct):not(.is-incorrect):not(.is-selected) {
  opacity: 0.5;
}

.learner-choice.module-quiz-opt.is-feedback-correct {
  animation: learner-answer-correct 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.learner-choice.module-quiz-opt.is-feedback-wrong {
  animation: learner-answer-wrong 720ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* WHY reveal — collapses to zero height until the answer resolves. */
.learner-choice__outcome {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  min-width: 0;
  color: var(--app-text-soft);
  font-size: 0.84rem;
  line-height: 1.56;
  max-width: 58ch;
  transition: max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, margin-top 0.4s ease;
}
.learner-choice.is-correct .learner-choice__outcome,
.learner-choice.is-incorrect .learner-choice__outcome {
  max-height: 240px;
  opacity: 1;
  margin-top: 0.55rem;
}
.learner-choice.is-correct .learner-choice__outcome::before,
.learner-choice.is-incorrect .learner-choice__outcome::before {
  content: "Why";
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.learner-choice.is-correct .learner-choice__outcome::before {
  color: var(--app-success);
}
.learner-choice.is-incorrect .learner-choice__outcome::before {
  color: var(--app-danger);
}

/* Drawn check on the correct choice. */
.learner-choice__tick {
  margin-left: auto;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  align-self: center;
  opacity: 0;
  color: var(--app-success);
  transition: opacity 0.3s ease 0.12s;
}
.learner-choice__tick path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.learner-choice.is-correct .learner-choice__tick {
  opacity: 1;
}
.learner-choice.is-correct .learner-choice__tick path {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .learner-choice.module-quiz-opt,
  .learner-choice__key,
  .learner-choice__outcome,
  .learner-choice__tick,
  .learner-choice__tick path {
    transition: none;
  }
  .learner-choice.module-quiz-opt:hover {
    transform: none;
  }
  .learner-choice.module-quiz-opt.is-feedback-correct,
  .learner-choice.module-quiz-opt.is-feedback-wrong {
    animation: none;
  }
}

.learner-finish-panel {
  margin-bottom: 0;
  margin-top: 0.5rem;
}

.learner-finish-panel__summary {
  color: color-mix(in srgb, var(--bg) 78%, transparent);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-style: normal;
  line-height: 1.5;
  margin: 0.5rem 0 0;
}

@keyframes learner-card-enter {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.992);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes learner-card-title-enter {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes learner-answer-correct {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 0%, transparent);
  }

  38% {
    transform: scale(1.03);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--teal) 22%, transparent);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 0%, transparent);
  }
}

@keyframes learner-answer-wrong {
  0%,
  100% {
    transform: translateX(0);
  }

  16% {
    transform: translateX(-10px);
  }

  32% {
    transform: translateX(10px);
  }

  48% {
    transform: translateX(-7px);
  }

  64% {
    transform: translateX(7px);
  }

  80% {
    transform: translateX(-3px);
  }
}

.learner-finish-panel__form {
  display: inline-flex;
  flex-shrink: 0;
}

.learner-access-card {
  min-height: 22rem;
}

.learner-result {
  display: grid;
  gap: 2rem;
  min-width: 0;
}

.learner-result-grid {
  margin-bottom: 0;
}

.learner-result-summary {
  justify-content: space-between;
}

.learner-result-badge {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--teal-tint);
  color: var(--teal);
  flex-shrink: 0;
}

.learner-result-badge--review {
  background: var(--app-accent-soft);
  color: var(--accent-dark);
}

.learner-result-actions form {
  display: inline-flex;
}

.learner-result-review {
  min-width: 0;
}

/* Completion review — purpose-built learner list (replaces the borrowed
   creator enroll-table, whose 6-column grid collided in this context). */
.result-review-list {
  background: var(--app-surface-strong, #fff);
  border: 1px solid var(--rule);
  border-radius: 14px;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.result-review-item {
  align-items: center;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 1rem 1.25rem;
}

.result-review-item:last-child {
  border-bottom: none;
}

.result-review-item__icon {
  align-items: center;
  background: var(--app-accent-soft, var(--bg-alt));
  border-radius: 9px;
  color: var(--accent-dark, var(--text-muted));
  display: inline-flex;
  flex-shrink: 0;
  height: 2.1rem;
  justify-content: center;
  width: 2.1rem;
}

.result-review-item__icon svg {
  height: 1.05rem;
  width: 1.05rem;
}

.result-review-item__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.result-review-item__module {
  color: var(--text-light);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.result-review-item__check {
  color: var(--text);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.result-review-item__tag {
  background: var(--app-accent-soft);
  border-radius: 999px;
  color: var(--accent-dark);
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.6rem;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Completion moment — centered, editorial. The result view reads as an earned
   accomplishment, not a dashboard; the confetti (confetti_controller) is the
   celebration, this layout is the quiet sense of having finished. */
.learner-result.completion {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 1rem;
  text-align: center;
}

.completion__hero {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  max-width: 40rem;
}

.completion__seal {
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  display: inline-block;
  position: relative;
  width: 8.5rem;
}

.completion__seal-img {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28, 28, 26, 0.06), 0 8px 22px rgba(28, 28, 26, 0.08);
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.completion__seal-check {
  align-items: center;
  background: var(--app-success, var(--teal));
  border: 2px solid var(--app-bg, #fff);
  border-radius: 999px;
  bottom: -0.6rem;
  box-shadow: 0 2px 8px rgba(28, 28, 26, 0.18);
  color: #fff;
  display: inline-flex;
  height: 2.2rem;
  justify-content: center;
  position: absolute;
  right: -0.6rem;
  width: 2.2rem;
}

.completion__seal-check svg {
  height: 1.1rem;
  width: 1.1rem;
}

.completion__title {
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0.4rem 0 0;
}

.completion__lede {
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0;
  max-width: 30rem;
}

.completion__stats {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.25rem;
  justify-content: center;
  margin-top: 2.75rem;
}

.completion__stat {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 4.5rem;
}

.completion__stat-value {
  color: var(--text);
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

.completion__stat-frac {
  color: var(--text-light);
  font-size: 0.5em;
}

.completion__stat-label {
  color: var(--text-light);
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.completion__stat-div {
  background: var(--rule);
  height: 2.5rem;
  width: 1px;
}

.completion__note {
  color: var(--text-light);
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  margin-top: 1.5rem;
}

.completion__actions {
  margin-top: 2rem;
}

.completion__review {
  margin-top: 3.5rem;
  max-width: 40rem;
  text-align: left;
  width: 100%;
}

@media (max-width: 480px) {
  .completion__stat-div {
    display: none;
  }

  .completion__stats {
    gap: 1.5rem;
  }
}

.course-table-head,
.course-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 1rem;
}

.course-table-head {
  padding: 0.875rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
}

.course-row {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  transition: background 0.15s;
}

.course-row {
  cursor: pointer;
}

.course-row:hover {
  background: var(--bg-alt);
}

.course-row--archived {
  cursor: default;
  opacity: 0.56;
}

.course-row--archived:hover {
  background: transparent;
}

.course-row:last-child {
  border-bottom: none;
}

.course-row-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.course-row-text {
  min-width: 0;
}

.course-row-title {
  display: block;
  max-width: 100%;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-row-title {
  text-decoration: none;
}

.course-row-title:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.course-row-title--static:hover {
  text-decoration: none;
}

.course-row-sub {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  color: var(--text-light);
}

.course-row-cell {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.enroll-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.enroll-progress-track {
  flex: 1;
  min-width: 0;
  height: 3px;
  background: var(--rule);
  border-radius: 100px;
  overflow: hidden;
}

.enroll-progress-fill {
  height: 100%;
  background: var(--text);
  border-radius: 100px;
}

.enroll-progress-value {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 3ch;
}

.enroll-status {
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.course-row > .enroll-status {
  text-align: left;
}

.enroll-status--complete {
  color: var(--teal);
}

.enroll-status--progress {
  color: var(--accent);
}

.enroll-status--draft {
  color: var(--text-light);
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}

.featured-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--text);
}

.featured-card-media {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-alt);
  position: relative;
}

.featured-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.6);
  transition: filter 0.4s ease, transform 0.5s ease;
}

.featured-card:hover .featured-card-media img {
  filter: saturate(1);
  transform: scale(1.04);
}

.featured-card-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.featured-card-meta {
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
}

@media (max-width: 768px) {
  .app-content--desktop {
    padding: 1.5rem 1.25rem 4rem;
  }

  .app-topbar--desktop {
    padding: 0 1rem;
  }

  .app-search {
    display: none;
  }

  .organization-switcher {
    flex: 1;
  }

  .organization-switcher__label,
  .organization-switcher__new {
    display: none;
  }

  .organization-switcher__form,
  .organization-switcher__control,
  .organization-switcher__select {
    width: 100%;
  }

  .organization-switcher__select {
    min-width: 0;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .module-editor-card {
    padding: 1.25rem;
  }

  .editor-canvas {
    padding: 2rem 1.25rem 12rem;
  }

  .adjust-panel {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
  }

  .adjust-panel--with-actionbar {
    bottom: 8rem;
    display: none;
  }

  .adjust-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adjust-panel--with-actionbar .adjust-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .adjust-actions {
    justify-content: flex-end;
  }

  .adjust-panel--with-actionbar .btn-pill {
    flex: 1;
    text-align: center;
  }

  .tune-canvas--mobile {
    display: block;
  }

  .module-head {
    flex-direction: row;
    align-items: flex-start;
  }

  .callout-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .callout-card-action,
  .learner-finish-panel__form {
    width: 100%;
  }

  .callout-card-action {
    text-align: center;
  }

  .status-pill {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }
}

@media (max-width: 800px) {
  .publish-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .share-row {
    flex-direction: column;
  }

  .share-zone .share-actions {
    display: grid;
  }

  .share-row .btn-pill {
    text-align: center;
  }

  .enroll-table {
    background: transparent;
    border: 0;
    display: grid;
    gap: 1rem;
    overflow: visible;
  }

  .course-table-head,
  .enroll-table-head {
    display: none;
  }

  .course-row,
  .enroll-row {
    align-items: stretch;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 14px;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    padding: 1rem;
  }

  .course-row .enroll-status,
  .enroll-row .enroll-status,
  .enroll-row .enroll-progress,
  .enroll-row .enroll-user,
  .enroll-row .enroll-score,
  .enroll-row .enroll-activity,
  .enroll-row .enroll-date,
  .enroll-row .enroll-duration,
  .enroll-row .enroll-actions,
  .course-row-cell {
    align-items: center;
    border-top: 1px solid var(--rule);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding-top: 0.85rem;
  }

  .enroll-row .enroll-actions {
    overflow: visible;
  }

  .enroll-action-menu__panel {
    left: auto;
    right: 0;
  }

  .course-row .enroll-status::before,
  .enroll-row .enroll-status::before,
  .enroll-row .enroll-progress::before,
  .enroll-row .enroll-user::before,
  .enroll-row .enroll-score::before,
  .enroll-row .enroll-activity::before,
  .enroll-row .enroll-date::before,
  .enroll-row .enroll-duration::before,
  .enroll-row .enroll-actions::before,
  .course-row-cell::before {
    color: var(--text-light);
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
  }

}

/* Creator workspace.
 * The learner experience earns its drama from strong visual planes and
 * authored imagery. Carry that same grammar into every creator screen while
 * keeping the content surfaces quiet enough for long working sessions. */
.app-layout {
  --creator-ink: #271d18;
  --creator-ink-soft: #352720;
  --creator-paper: #f3ece4;
  --creator-paper-deep: #ebe0d5;
  --creator-surface: #fffaf5;
  --creator-rule: rgba(69, 47, 37, 0.12);
  --creator-cream: #f5eae1;
  --creator-coral: #cf756d;
  background: var(--creator-paper);
}

.app-layout .app-sidebar {
  background:
    radial-gradient(circle at 8% 12%, rgba(207, 117, 109, 0.16), transparent 32%),
    radial-gradient(circle at 112% 74%, rgba(197, 142, 108, 0.12), transparent 35%),
    linear-gradient(158deg, var(--creator-ink-soft), var(--creator-ink) 54%, #201713);
  border-right-color: rgba(255, 244, 234, 0.08);
  box-shadow: 12px 0 40px rgba(51, 34, 27, 0.09);
  padding: 2rem 1.15rem 1.25rem;
  gap: 1.7rem;
  overflow: hidden;
}

.app-layout .app-sidebar::after {
  content: "";
  position: absolute;
  width: 15rem;
  height: 15rem;
  right: -10rem;
  bottom: 9rem;
  border: 1px solid rgba(245, 234, 225, 0.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 2.5rem rgba(245, 234, 225, 0.018),
    0 0 0 5rem rgba(245, 234, 225, 0.012);
  pointer-events: none;
}

.app-layout .app-sidebar > * {
  position: relative;
  z-index: 1;
}

.app-layout .app-sidebar-logo {
  height: 24px;
}

.app-layout .app-sidebar-brand {
  padding-inline: 0.7rem;
}

.app-layout .app-sidebar-cta {
  min-height: 44px;
  border: 1px solid rgba(255, 244, 234, 0.12);
  border-radius: 999px;
  background: var(--creator-coral);
  color: #fffaf5;
  box-shadow: 0 12px 28px rgba(15, 9, 7, 0.24);
  letter-spacing: 0.01em;
}

.app-layout .app-sidebar-cta:hover {
  background: #d98379;
  box-shadow: 0 16px 34px rgba(15, 9, 7, 0.3);
}

.app-layout .sidebar-link {
  border-radius: 12px;
  color: rgba(245, 234, 225, 0.6);
  padding: 0.7rem 0.8rem;
}

.app-layout .sidebar-link:hover,
.app-layout .sidebar-recent-link:hover {
  background: rgba(255, 250, 245, 0.07);
  color: var(--creator-cream);
}

.app-layout .sidebar-link.is-active {
  background: rgba(255, 250, 245, 0.11);
  color: #fffaf5;
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 245, 0.06),
    0 10px 26px rgba(15, 9, 7, 0.12);
}

.app-layout .sidebar-link.is-active::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  width: 3px;
  height: 1.4rem;
  border-radius: 0 3px 3px 0;
  background: var(--creator-coral);
  box-shadow: 0 0 18px rgba(207, 117, 109, 0.55);
}

.app-layout .sidebar-link.is-active svg {
  color: #dc8a81;
}

.app-layout .app-sidebar-section-label {
  color: rgba(245, 234, 225, 0.38);
}

.app-layout .sidebar-recent-link {
  color: rgba(245, 234, 225, 0.56);
}

.app-layout .sidebar-recent-dot {
  background: rgba(245, 234, 225, 0.3);
}

.app-layout .sidebar-recent-dot.is-live {
  background: #8ebca3;
  box-shadow: 0 0 0 3px rgba(142, 188, 163, 0.12);
}

.app-layout .app-sidebar-account {
  background: rgba(255, 250, 245, 0.075);
  border-color: rgba(255, 250, 245, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 250, 245, 0.035);
  backdrop-filter: blur(14px);
}

.app-layout .app-sidebar-user-avatar {
  background: var(--creator-coral);
  color: #fffaf5;
}

.app-layout .app-sidebar-user-name,
.app-layout .app-sidebar-plan-usage-count {
  color: var(--creator-cream);
}

.app-layout .app-sidebar-user-role,
.app-layout .app-sidebar-plan-usage {
  color: rgba(245, 234, 225, 0.48);
}

.app-layout .app-sidebar-plan-bar {
  background: rgba(255, 250, 245, 0.1);
}

.app-layout .app-sidebar-plan-bar span {
  background: var(--creator-coral);
}

.app-layout .app-sidebar-plan-upgrade {
  color: #df9187;
}

.app-layout .app-main {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 83% 7%, rgba(207, 117, 109, 0.105), transparent 23rem),
    radial-gradient(circle at 10% 45%, rgba(177, 124, 88, 0.06), transparent 30rem),
    linear-gradient(180deg, #f6f0e9 0%, var(--creator-paper) 38%, #f0e8df 100%);
}

.app-layout .app-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.032'/%3E%3C/svg%3E");
}

.app-layout .app-topbar--desktop {
  height: 4.75rem;
  padding-inline: clamp(1.5rem, 3vw, 3rem);
  background: rgba(246, 240, 233, 0.78);
  border-bottom-color: var(--creator-rule);
  backdrop-filter: blur(20px) saturate(1.2);
}

.app-layout .app-topbar-title-row .app-topbar-title {
  font-size: 1.35rem;
  color: var(--creator-ink);
}

.app-layout .app-topbar-meta,
.app-layout .app-topbar-crumb {
  color: rgba(62, 44, 35, 0.48);
}

.app-layout .app-topbar-divider {
  background: var(--creator-rule);
}

.app-layout .app-icon-btn {
  border: 1px solid transparent;
  color: rgba(62, 44, 35, 0.56);
}

.app-layout .app-icon-btn:hover {
  background: rgba(255, 250, 245, 0.74);
  border-color: var(--creator-rule);
  color: var(--creator-ink);
}

.app-layout .organization-switcher__select,
.app-layout .organization-switcher__button,
.app-layout .organization-switcher__new {
  background-color: rgba(255, 250, 245, 0.66);
  border-color: var(--creator-rule);
}

.app-layout .btn-pill {
  background: var(--creator-ink);
  color: #fffaf5;
  box-shadow: 0 8px 20px rgba(42, 27, 21, 0.14);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease, background 0.2s ease;
}

.app-layout .btn-pill:hover {
  background: #3b2a22;
  box-shadow: 0 11px 24px rgba(42, 27, 21, 0.2);
  opacity: 1;
  transform: translateY(-1px);
}

.app-layout .app-content--desktop {
  max-width: 1340px;
  padding: clamp(2.75rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem) 6rem;
}

.app-layout .section-head {
  margin-bottom: 2rem;
}

.app-layout .section-head h2 {
  color: var(--creator-ink);
  font-size: clamp(2.15rem, 4.1vw, 3.35rem);
  font-weight: 300;
  letter-spacing: -0.035em;
}

.app-layout .section-head h2 em {
  color: var(--creator-coral);
  font-weight: 600;
}

.app-layout .section-divider {
  margin: clamp(4rem, 7vw, 6.5rem) 0 clamp(3rem, 5vw, 4.5rem);
  background: linear-gradient(90deg, transparent, rgba(66, 44, 35, 0.15) 8%, rgba(66, 44, 35, 0.15) 92%, transparent);
}

.app-layout .learning-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(1.1rem, 2vw, 1.75rem);
}

.app-layout .learning-card {
  position: relative;
  border: 1px solid rgba(72, 48, 37, 0.1);
  border-radius: 24px;
  background: var(--creator-surface);
  box-shadow:
    0 2px 3px rgba(62, 42, 33, 0.03),
    0 16px 42px rgba(62, 42, 33, 0.075);
  transform: translateZ(0);
  transition:
    transform 0.42s cubic-bezier(0.2, 0.75, 0.2, 1),
    box-shadow 0.42s ease,
    border-color 0.42s ease;
}

.app-layout .learning-card:hover {
  border-color: rgba(137, 80, 67, 0.22);
  box-shadow:
    0 3px 5px rgba(62, 42, 33, 0.035),
    0 25px 54px rgba(62, 42, 33, 0.14);
  transform: translateY(-7px);
}

.app-layout .learning-card-media {
  aspect-ratio: 1.55 / 1;
  background: var(--creator-paper-deep);
}

.app-layout .learning-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(25, 16, 12, 0.08), transparent 36%),
    linear-gradient(0deg, rgba(31, 20, 15, 0.19), transparent 38%);
  pointer-events: none;
}

.app-layout .learning-card-media img {
  filter: saturate(0.9) contrast(1.025);
  transition: transform 0.8s cubic-bezier(0.2, 0.75, 0.2, 1), filter 0.5s ease;
}

.app-layout .learning-card:hover .learning-card-media img {
  filter: saturate(1.08) contrast(1.03);
  transform: scale(1.055);
}

.app-layout .learning-card-status {
  z-index: 1;
  top: 1rem;
  left: 1rem;
  padding: 0.42rem 0.72rem;
  background: rgba(39, 29, 24, 0.8);
  border: 1px solid rgba(255, 250, 245, 0.14);
  color: #fff7f0;
  backdrop-filter: blur(12px);
}

.app-layout .learning-card-status--new {
  color: #b9dac7;
}

.app-layout .learning-card-status--review {
  color: #f0c0b8;
}

.app-layout .learning-card-body {
  min-height: 8.9rem;
  gap: 1.35rem;
  padding: 1.45rem 1.55rem 1.65rem;
}

.app-layout .learning-card-title {
  color: var(--creator-ink);
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  line-height: 1.14;
}

.app-layout .learning-card:hover .learning-card-title {
  text-decoration-color: rgba(207, 117, 109, 0.65);
}

.app-layout .learning-card-arrow {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--creator-rule);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(39, 29, 24, 0.54);
}

.app-layout .learning-card-arrow svg {
  width: 15px;
  height: 15px;
}

.app-layout .learning-card-meta-row {
  color: rgba(62, 44, 35, 0.48);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.app-layout .empty-card {
  position: relative;
  isolation: isolate;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(255, 247, 240, 0.1);
  border-radius: 24px;
  background:
    radial-gradient(circle at 80% 15%, rgba(207, 117, 109, 0.24), transparent 35%),
    linear-gradient(150deg, #3a2a23, var(--creator-ink) 66%, #201713);
  box-shadow: 0 18px 44px rgba(57, 36, 27, 0.14);
  color: var(--creator-cream);
}

.app-layout .empty-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 14rem;
  height: 14rem;
  top: -6.5rem;
  right: -5.5rem;
  border: 1px solid rgba(255, 247, 240, 0.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 2rem rgba(255, 247, 240, 0.025),
    0 0 0 4rem rgba(255, 247, 240, 0.015);
}

.app-layout .empty-card-icon {
  width: 54px;
  height: 54px;
  background: rgba(255, 250, 245, 0.09);
  border: 1px solid rgba(255, 250, 245, 0.11);
  color: #dc8a81;
}

.app-layout .empty-card-title {
  color: #fff9f4;
  font-size: 1.35rem;
}

.app-layout .empty-card-text {
  color: rgba(245, 234, 225, 0.62);
}

.app-layout .empty-card-action {
  color: #e3948a;
}

.app-layout .enroll-table {
  overflow: hidden;
  border-color: var(--creator-rule);
  border-radius: 22px;
  background: rgba(255, 250, 245, 0.76);
  box-shadow: 0 16px 44px rgba(62, 42, 33, 0.06);
  backdrop-filter: blur(10px);
}

.app-layout .enroll-table--interactive {
  overflow: visible;
}

.app-layout .course-table-head {
  min-height: 3.35rem;
  padding-inline: 1.75rem;
  border-bottom-color: var(--creator-rule);
  background: rgba(235, 224, 213, 0.48);
  color: rgba(62, 44, 35, 0.48);
}

.app-layout .course-row {
  min-height: 5.5rem;
  padding: 1rem 1.75rem;
  border-bottom-color: var(--creator-rule);
  cursor: default;
  transition: background 0.24s ease, transform 0.24s ease;
}

.app-layout .course-row:hover {
  background: rgba(255, 252, 248, 0.9);
}

.app-layout .course-row-cover {
  position: relative;
  width: 64px;
  height: 46px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 10px;
  background: var(--creator-paper-deep);
  box-shadow: 0 5px 14px rgba(58, 36, 27, 0.12);
}

.app-layout .course-row-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 250, 245, 0.18);
  border-radius: inherit;
  pointer-events: none;
}

.app-layout .course-row-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.88);
  transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.2, 1), filter 0.3s ease;
}

.app-layout .course-row:hover .course-row-cover img {
  filter: saturate(1.05);
  transform: scale(1.06);
}

.app-layout .course-row-main {
  gap: 1rem;
}

.app-layout .course-row-title {
  color: var(--creator-ink);
  font-size: 1.05rem;
}

.app-layout .course-row-sub,
.app-layout .course-row-cell {
  color: rgba(62, 44, 35, 0.48);
}

.app-layout .course-row > .enroll-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.42rem;
}

.app-layout .course-row > .enroll-status::after {
  content: "";
  order: -1;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}

/* Shared settings, billing and members surfaces belong to the same paper world. */
.app-layout .ui-split-header {
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-color: var(--creator-rule);
}

.app-layout .ui-split-header .ui-heading--section {
  color: var(--creator-ink);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.04em;
}

.app-layout .ui-split-header .ui-eyebrow,
.app-layout .settings-page .ui-eyebrow {
  color: var(--creator-coral);
}

.app-layout .ui-split-header .ui-copy {
  max-width: 42rem;
  color: rgba(62, 44, 35, 0.59);
}

.app-layout .ui-surface {
  border-color: var(--creator-rule);
  background: rgba(255, 250, 245, 0.76);
  box-shadow:
    0 2px 3px rgba(62, 42, 33, 0.025),
    0 18px 46px rgba(62, 42, 33, 0.06);
  backdrop-filter: blur(12px);
}

.app-layout .ui-surface--panel_soft {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 250, 245, 0.93), rgba(239, 227, 216, 0.7));
}

.app-layout .ui-surface--panel_soft::after {
  content: "";
  position: absolute;
  width: 6rem;
  height: 6rem;
  right: -3.5rem;
  top: -3.5rem;
  border: 1px solid rgba(207, 117, 109, 0.16);
  border-radius: 50%;
  pointer-events: none;
}

.app-layout .ui-surface .ui-heading {
  color: var(--creator-ink);
}

.app-layout .ui-surface .ui-eyebrow {
  color: rgba(62, 44, 35, 0.44);
}

.app-layout .ui-surface .ui-copy--muted,
.app-layout .ui-surface .ui-copy--body {
  color: rgba(62, 44, 35, 0.58);
}

.app-layout .ui-input,
.app-layout .adjust-select,
.app-layout .ui-disclosure {
  border-color: var(--creator-rule);
  background-color: rgba(255, 252, 248, 0.76);
}

.app-layout .ui-input:focus,
.app-layout .adjust-select:focus {
  border-color: rgba(207, 117, 109, 0.56);
  box-shadow: 0 0 0 4px rgba(207, 117, 109, 0.1);
}

.app-layout .ui-disclosure {
  border-radius: 14px;
}

.app-layout .ui-btn--primary {
  background: var(--creator-ink);
  color: #fffaf5;
  box-shadow: 0 8px 20px rgba(42, 27, 21, 0.12);
}

.app-layout .ui-btn--primary:hover {
  background: #3b2a22;
}

.app-layout .ui-btn--secondary {
  border-color: var(--creator-rule);
  background: rgba(255, 250, 245, 0.42);
  color: var(--creator-ink);
}

.app-layout .ui-btn--secondary:hover {
  border-color: rgba(62, 44, 35, 0.22);
  background: rgba(255, 252, 248, 0.94);
}

.app-layout .billing-plan-card--recommended {
  border-color: rgba(207, 117, 109, 0.42);
  background:
    radial-gradient(circle at 100% 0, rgba(207, 117, 109, 0.14), transparent 11rem),
    rgba(255, 250, 245, 0.86);
  box-shadow: 0 24px 54px rgba(89, 49, 38, 0.11);
}

.app-layout table thead {
  background: rgba(235, 224, 213, 0.43);
}

.app-layout table tbody tr {
  transition: background 0.2s ease;
}

.app-layout table tbody tr:hover {
  background: rgba(255, 252, 248, 0.75);
}

.app-layout .app-bottomnav {
  background: rgba(39, 29, 24, 0.92);
  border-top-color: rgba(255, 250, 245, 0.08);
  box-shadow: 0 -12px 36px rgba(42, 27, 21, 0.2);
  backdrop-filter: blur(18px);
}

.app-layout .nav-tab {
  color: rgba(245, 234, 225, 0.52);
}

.app-layout .nav-tab:hover {
  color: var(--creator-cream);
}

.app-layout .nav-tab.is-active {
  background: rgba(255, 250, 245, 0.09);
  color: #e3948a;
}

@keyframes creator-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.app-layout .section-head,
.app-layout .ui-split-header {
  animation: creator-rise 0.62s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.app-layout .learning-grid > *,
.app-layout .ui-surface {
  animation: creator-rise 0.58s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.app-layout .learning-grid > :nth-child(2),
.app-layout .ui-surface:nth-of-type(2) {
  animation-delay: 70ms;
}

.app-layout .learning-grid > :nth-child(3),
.app-layout .ui-surface:nth-of-type(3) {
  animation-delay: 140ms;
}

.app-layout .learning-grid > :nth-child(4),
.app-layout .ui-surface:nth-of-type(4) {
  animation-delay: 210ms;
}

.app-layout .enroll-table {
  animation: creator-rise 0.62s 90ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

@media (max-width: 767px) {
  .app-layout .app-topbar--desktop {
    height: 4.25rem;
    padding-inline: 1.15rem;
  }

  .app-layout .app-topbar-meta,
  .app-layout .app-topbar-divider,
  .app-layout .organization-switcher {
    display: none;
  }

  .app-layout .app-content--desktop {
    padding: 2.25rem 1rem 7rem;
  }

  .app-layout .section-head h2 {
    font-size: 2.35rem;
  }

  .app-layout .learning-card:hover {
    transform: none;
  }

  .app-layout .course-row {
    border-color: var(--creator-rule);
    background: rgba(255, 250, 245, 0.78);
  }

  .app-layout .course-row-cover {
    width: 70px;
    height: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-layout .section-head,
  .app-layout .ui-split-header,
  .app-layout .learning-grid > *,
  .app-layout .ui-surface,
  .app-layout .enroll-table {
    animation: none;
  }

  .app-layout .learning-card,
  .app-layout .learning-card-media img,
  .app-layout .course-row-cover img,
  .app-layout .ui-btn,
  .app-layout .btn-pill {
    transition-duration: 0.01ms;
  }
}

/* Production landing page. */
.landing-page {
  background: var(--app-surface-strong);
  color: var(--app-text);
  font-family: var(--app-font-sans);
  line-height: var(--app-type-copy-line);
}

/* --- NAV --- */
.landing-page .landing-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 3rem; transition: background 0.4s, box-shadow 0.4s;
}
.landing-page .landing-nav.scrolled {
  background: rgba(255,255,255,0.92); backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--app-border);
}
.landing-page .landing-nav-logo {
  display: inline-flex; align-items: center;
  color: var(--app-text); text-decoration: none;
}
.landing-page .landing-nav-logo img {
  display: block; width: 7.5rem; height: auto;
}
.landing-page .landing-nav-links { display: flex; gap: 2.5rem; list-style: none; margin-left: auto; margin-right: 2rem; }
.landing-page .landing-nav-links a {
  font-size: 0.8125rem; font-weight: 400; color: var(--app-text-muted);
  text-decoration: none; transition: color 0.2s;
}
.landing-page .landing-nav-links a:hover { color: var(--app-text); }
.landing-page .btn-pill-outline {
  display: inline-block; font-size: 0.8125rem; font-weight: 500;
  padding: 0.55rem 1.5rem; background: transparent;
  color: var(--app-text); border: 1.5px solid var(--app-border);
  border-radius: 100px; cursor: pointer;
  text-decoration: none; transition: border-color 0.2s;
}
.landing-page .btn-pill-outline:hover { border-color: rgba(28,28,26,0.3); }

/* --- WAITING LIST --- */
.waiting-list-page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: var(--app-surface-strong);
}

.waiting-list-page .waiting-list-nav {
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface-strong);
}

.waiting-list-page .waiting-list-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100% - 3rem, 1140px);
  height: 5rem;
  margin-inline: auto;
}

.waiting-list-page .waiting-list-nav__logo {
  width: 8.75rem;
  height: auto;
}

.waiting-list-page .waiting-list-main {
  display: flex;
  flex: 1;
  justify-content: center;
  padding: 7.5rem 1.5rem 5rem;
}

.waiting-list-page .waiting-list-hero {
  width: min(100%, 48rem);
  text-align: center;
}

.waiting-list-page .waiting-list-eyebrow {
  margin: 0 0 1.5rem;
  color: var(--app-accent-strong);
  font-size: var(--app-type-label-size);
  font-weight: var(--app-type-label-soft-weight);
  letter-spacing: var(--app-type-label-tracking);
  line-height: var(--app-type-label-line);
  text-transform: uppercase;
}

.waiting-list-page .waiting-list-title {
  margin: 0;
  color: var(--app-text);
  font-family: var(--app-font-serif);
  font-size: clamp(3rem, 8vw, 4rem);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.05;
  text-wrap: balance;
}

.waiting-list-page .waiting-list-copy {
  max-width: 38rem;
  margin: 1.5rem auto 0;
  color: var(--app-text-muted);
  font-size: var(--app-type-body-lg-size);
  line-height: var(--app-type-body-line);
  text-wrap: pretty;
}

.waiting-list-page .waiting-list-copy--closing {
  margin-top: 1rem;
}

.waiting-list-page .waiting-list-panel {
  margin-top: 3rem;
}

.waiting-list-page .waiting-list-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: min(100%, 34rem);
  margin-inline: auto;
  padding: 0.75rem;
  border: 1px solid var(--app-border);
  border-radius: 2rem;
  background: var(--app-surface-muted);
}

.waiting-list-page .waiting-list-form__field {
  min-width: 0;
  flex: 1;
}

.waiting-list-page .waiting-list-input {
  width: 100%;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-pill);
  background: var(--app-surface-strong);
  color: var(--app-text);
  padding: 0.8rem 1.5rem;
  font-size: var(--app-type-body-size);
  line-height: 1.4;
}

.waiting-list-page .waiting-list-input:focus {
  border-color: var(--app-accent-strong);
  box-shadow: 0 0 0 4px var(--app-accent-soft);
  outline: none;
}

.waiting-list-page .waiting-list-submit {
  flex-shrink: 0;
  border: 0;
  border-radius: var(--app-radius-pill);
  background: var(--app-accent-strong);
  color: var(--app-accent-contrast);
  cursor: pointer;
  font-size: var(--app-type-button-size);
  font-weight: var(--app-type-button-weight);
  line-height: 1;
  padding: 0.95rem 1.75rem;
  transition: opacity 0.16s ease, transform 0.16s ease;
  white-space: nowrap;
}

.waiting-list-page .waiting-list-submit:hover {
  opacity: 0.9;
}

.waiting-list-page .waiting-list-submit:active {
  transform: scale(0.98);
}

.waiting-list-page .waiting-list-error {
  width: min(100%, 34rem);
  margin: 0.75rem auto 0;
  color: var(--app-danger);
  font-size: var(--app-type-body-sm-size);
  line-height: var(--app-type-copy-line);
  text-align: left;
}

.waiting-list-page .waiting-list-confirmation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 4.25rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--app-success-border);
  border-radius: 2rem;
  background: var(--app-success-soft);
  color: var(--app-success);
  font-size: var(--app-type-body-size);
  font-weight: var(--app-type-label-soft-weight);
}

.waiting-list-page .waiting-list-confirmation p,
.waiting-list-page .waiting-list-note p {
  margin: 0;
}

.waiting-list-page .waiting-list-confirmation__icon,
.waiting-list-page .waiting-list-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--app-radius-pill);
}

.waiting-list-page .waiting-list-confirmation__icon {
  width: 1.5rem;
  height: 1.5rem;
  background: var(--app-success);
  color: var(--app-success-contrast);
  font-size: 0.85rem;
}

.waiting-list-page .waiting-list-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 1.5rem;
  color: var(--app-text-muted);
  font-size: var(--app-type-caption-size);
  font-weight: var(--app-type-label-soft-weight);
  line-height: var(--app-type-caption-line);
}

.waiting-list-page .waiting-list-note__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--app-success);
}

.waiting-list-page .waiting-list-footer {
  border-top: 1px solid var(--app-border);
  background: var(--app-surface-muted);
}

.waiting-list-page .waiting-list-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(100% - 3rem, 1140px);
  margin-inline: auto;
  padding: 3rem 0;
}

.waiting-list-page .waiting-list-footer__brand {
  color: var(--app-text);
  font-family: var(--app-font-serif);
  font-size: var(--app-type-card-title-lg-size);
  line-height: var(--app-type-title-line);
}

.waiting-list-page .waiting-list-footer__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-end;
}

.waiting-list-page .waiting-list-footer a {
  color: var(--app-text-muted);
  font-size: var(--app-type-caption-size);
  font-weight: var(--app-type-label-soft-weight);
  text-decoration: none;
  transition: color 0.16s ease;
}

.waiting-list-page .waiting-list-footer a:hover {
  color: var(--app-accent-strong);
}

@media (max-width: 768px) {
  .waiting-list-page .waiting-list-nav__inner {
    width: min(100% - 2rem, 1140px);
  }

  .waiting-list-page .waiting-list-main {
    padding: 5rem 1rem 3rem;
  }

  .waiting-list-page .waiting-list-title {
    font-size: 3rem;
  }

  .waiting-list-page .waiting-list-form {
    flex-direction: column;
    align-items: stretch;
    border-radius: 1.5rem;
  }

  .waiting-list-page .waiting-list-submit {
    width: 100%;
  }

  .waiting-list-page .waiting-list-footer__inner {
    align-items: center;
    flex-direction: column;
    width: min(100% - 2rem, 1140px);
    padding: 2rem 0;
    text-align: center;
  }

  .waiting-list-page .waiting-list-footer__links {
    justify-content: center;
  }
}

/* --- LEGAL PAGES --- */
.landing-page.legal-page {
  min-height: 100vh;
  background: var(--app-surface-strong);
}
.landing-page .legal-main {
  width: min(1120px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 7.5rem 0 4rem;
}
.landing-page .legal-hero {
  max-width: 780px;
  padding: 2rem 0 3.5rem;
}
.landing-page .legal-title {
  font-family: var(--app-font-serif);
  font-size: clamp(var(--app-text-2xl), 6vw, var(--app-text-4xl));
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--app-text);
  margin: 0;
}
.landing-page .legal-intro {
  max-width: 68ch;
  margin-top: 1.25rem;
  font-size: var(--app-type-body-lg-size);
  line-height: 1.75;
  color: var(--app-text-muted);
}
.landing-page .legal-updated {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--app-text-faint);
}
.landing-page .legal-table-section {
  padding: 3rem 0;
  border-top: 1px solid var(--app-border);
}
.landing-page .legal-section-header {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: 1.5rem;
}
.landing-page .legal-section-header h2,
.landing-page .legal-note-card h2 {
  font-family: var(--app-font-serif);
  font-size: var(--app-text-xl);
  font-weight: 400;
  line-height: 1.15;
  color: var(--app-text);
  margin: 0;
}
.landing-page .legal-section-header p,
.landing-page .legal-note-card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--app-text-muted);
}
.landing-page .legal-table-wrap {
  overflow-x: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface-strong);
  box-shadow: 0 4px 24px rgba(28,28,26,0.04);
}
.landing-page .legal-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}
.landing-page .legal-table th,
.landing-page .legal-table td {
  padding: 1.1rem 1rem;
  border-bottom: 1px solid var(--app-border);
  color: var(--app-text-muted);
  font-size: 0.8125rem;
  line-height: 1.65;
  text-align: left;
  vertical-align: top;
}
.landing-page .legal-table thead th {
  background: var(--app-surface-muted);
  color: var(--app-text-faint);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}
.landing-page .legal-table tbody th {
  width: 18%;
  color: var(--app-text);
  font-weight: 600;
}
.landing-page .legal-table tbody tr:last-child th,
.landing-page .legal-table tbody tr:last-child td {
  border-bottom: 0;
}
.landing-page .legal-table a {
  color: var(--app-text);
  text-decoration-color: var(--app-accent-border);
  text-underline-offset: 0.2em;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.landing-page .legal-table a:hover {
  color: var(--app-accent-strong);
  text-decoration-color: var(--app-accent-strong);
}
.landing-page .legal-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0 0.65rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.landing-page .legal-status--active {
  background: var(--app-success-soft);
  color: var(--app-success);
}
.landing-page .legal-status--conditional {
  background: var(--app-accent-soft);
  color: var(--app-accent-strong);
}
.landing-page .legal-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  padding: 0 0 3rem;
}
.landing-page .legal-note-card {
  padding: 2rem;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface-muted);
}
.landing-page .legal-note-card p {
  margin-top: 0.85rem;
}
.landing-page .legal-document {
  max-width: 78ch;
  color: var(--app-text-muted);
  font-size: var(--app-type-body-size);
  line-height: 1.75;
}
.landing-page .legal-document > *:first-child {
  margin-top: 0;
}
.landing-page .legal-document h1,
.landing-page .legal-document h2,
.landing-page .legal-document h3 {
  color: var(--app-text);
  font-family: var(--app-font-serif);
  font-weight: 400;
  line-height: 1.12;
  text-wrap: balance;
}
.landing-page .legal-document h1 {
  font-size: clamp(var(--app-text-2xl), 6vw, var(--app-text-4xl));
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}
.landing-page .legal-document h2 {
  border-top: 1px solid var(--app-border);
  font-size: var(--app-text-xl);
  margin: 3rem 0 1rem;
  padding-top: 2rem;
}
.landing-page .legal-document h3 {
  font-size: var(--app-type-card-title-lg-size);
  margin: 2rem 0 0.75rem;
}
.landing-page .legal-document p,
.landing-page .legal-document ul,
.landing-page .legal-document ol {
  margin: 1rem 0 0;
}
.landing-page .legal-document ul,
.landing-page .legal-document ol {
  padding-left: 1.4rem;
}
.landing-page .legal-document li + li {
  margin-top: 0.35rem;
}
.landing-page .legal-document strong {
  color: var(--app-text);
  font-weight: 600;
}
.landing-page .legal-document a {
  color: var(--app-text);
  text-decoration-color: var(--app-accent-border);
  text-underline-offset: 0.2em;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.landing-page .legal-document a:hover {
  color: var(--app-accent-strong);
  text-decoration-color: var(--app-accent-strong);
}
.landing-page .legal-document-table-wrap {
  overflow-x: auto;
  overscroll-behavior: contain;
  margin-top: 1.25rem;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface-strong);
  box-shadow: 0 4px 24px rgba(28,28,26,0.04);
}
.landing-page .legal-document-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
.landing-page .legal-document-table th,
.landing-page .legal-document-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--app-border);
  color: var(--app-text-muted);
  font-size: 0.8125rem;
  line-height: 1.65;
  text-align: left;
  vertical-align: top;
}
.landing-page .legal-document-table thead th {
  background: var(--app-surface-muted);
  color: var(--app-text-faint);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}
.landing-page .legal-document-table tbody tr:last-child td {
  border-bottom: 0;
}

/* --- HERO --- */
.landing-page .landing-hero {
  min-height: 100vh; padding: 9rem 3rem 4rem;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--app-panel-warm);
}
.landing-page .hero-content {
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  align-items: stretch;
}
.landing-page .hero-left {
  display: flex; flex-direction: column; justify-content: flex-end;
}
.landing-page .hero-eyebrow {
  font-size: var(--app-text-sm); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--app-accent-strong);
  margin-bottom: 1.5rem;
}
.landing-page .hero-headline {
  font-family: var(--app-font-serif); font-weight: 300;
  font-size: clamp(var(--app-text-2xl), 5.5vw, var(--app-text-4xl));
  line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.landing-page .hero-headline em {
  font-style: normal; font-weight: 600;
}
.landing-page .hero-sub {
  font-size: var(--app-text-md); font-weight: 400; color: var(--app-text-muted);
  line-height: 1.7; margin-bottom: 2.5rem;
}
.landing-page .hero-actions { display: flex; gap: 0.75rem; }

/* Hero image */
.landing-page .hero-image {
  position: relative;
  border-radius: 20px; overflow: hidden; min-height: clamp(400px, 55vh, 720px);
  align-self: stretch;
}
.landing-page .hero-card {
  width: 100%;
  max-width: 420px;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 252, 246, 0.88);
  border: 1px solid rgba(60, 44, 28, 0.14);
  border-radius: 22px;
  box-shadow: 0 2px 8px rgba(60, 44, 28, 0.08), 0 36px 70px -42px rgba(90, 60, 34, 0.42);
}
.landing-page .hero-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 7.2;
}
.landing-page .hero-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36, 28, 20, 0.04), rgba(36, 28, 20, 0.24));
  mix-blend-mode: multiply;
}
.landing-page .hero-card-media-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(0.9) contrast(1.02) brightness(0.98) sepia(0.08);
}
.landing-page .hero-card-badge {
  position: absolute;
  z-index: 1;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(30, 23, 18, 0.7);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: #fff8ee;
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.landing-page .hero-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.75rem;
}
.landing-page .hero-card-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #954139;
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.landing-page .hero-card-mark,
.landing-page .mq-card-mark {
  width: 0.85em;
  height: 0.85em;
  flex: none;
  background: currentColor;
  -webkit-mask: url("/assets/brand/logo-mark-white-34a174ff.svg") center / contain no-repeat;
  mask: url("/assets/brand/logo-mark-white-34a174ff.svg") center / contain no-repeat;
}
.landing-page .hero-card-course {
  margin-top: 0.75rem;
  color: rgba(36, 28, 20, 0.54);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.landing-page .hero-card-title {
  margin: 0.35rem 0 0;
  color: #241c14;
  font-family: var(--app-font-serif);
  font-size: clamp(1.75rem, 2.75vw, 2.15rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.08;
}
.landing-page .hero-card-body {
  margin: 0.8rem 0 0;
  color: rgba(36, 28, 20, 0.7);
  font-size: 0.8125rem;
  line-height: 1.58;
}
.landing-page .hero-card-quiz {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 1.35rem;
}
.landing-page .hero-card-opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(60, 44, 28, 0.13);
  border-radius: 13px;
  background: rgba(246, 238, 226, 0.6);
  color: #241c14;
  font-size: 0.75rem;
  line-height: 1.35;
}
.landing-page .hero-card-opt > span {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  place-items: center;
  border: 1px solid rgba(60, 44, 28, 0.22);
  border-radius: 50%;
  color: #954139;
  font-family: var(--app-font-serif);
  font-size: 0.875rem;
  font-weight: 600;
}
.landing-page .hero-card-opt--correct {
  border-color: rgba(61, 107, 86, 0.36);
  background: rgba(61, 107, 86, 0.1);
  box-shadow: inset 3px 0 0 var(--app-success);
  font-weight: 550;
}
.landing-page .hero-card-opt--correct > span {
  border-color: var(--app-success);
  background: var(--app-success);
  color: #fff;
}
.landing-page .hero-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(60, 44, 28, 0.11);
  color: rgba(36, 28, 20, 0.48);
  font-size: 0.625rem;
  line-height: 1.3;
}
.landing-page .hero-card-meta > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-page .hero-card-completion {
  flex: none;
  color: var(--app-success);
  font-weight: 650;
}

/* Hero flow strip */
.landing-page .hero-flow {
  max-width: 1200px; margin: 3.5rem auto 0; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
}
.landing-page .hero-flow-step {
  display: flex; align-items: center; gap: 0.625rem;
  font-size: 0.8125rem; font-weight: 500;
}
.landing-page .hero-flow-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--app-surface-strong); color: var(--app-text);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.landing-page .hero-flow-icon--accent { background: var(--app-surface-strong); color: var(--app-accent-strong); }
.landing-page .hero-flow-icon--teal { background: var(--app-surface-strong); color: var(--app-success); }
.landing-page .hero-flow-arrow { color: var(--app-text-faint); display: flex; align-items: center; opacity: 0.4; }

/* Hero stats bar */
.landing-page .hero-stats {
  max-width: 1200px; margin: 3rem auto 0; width: 100%;
  display: flex; align-items: stretch; justify-content: center; gap: 0;
}
.landing-page .hero-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 2.5rem 2rem;
}
.landing-page .hero-stat-num {
  font-family: var(--app-font-serif); font-size: var(--app-text-3xl); font-weight: 300;
  letter-spacing: -0.02em; color: var(--app-text); line-height: 1;
  margin-bottom: 0.5rem;
}
.landing-page .hero-stat-label { font-size: 0.75rem; color: var(--app-text-muted); }
.landing-page .hero-stat-divider { width: 1px; background: rgba(28,28,26,0.1); align-self: stretch; margin: 1rem 0; }


/* --- PARALLAX IMAGES --- */
.landing-page .parallax-bg {
  position: absolute; top: -25%; left: 0;
  width: 100%; height: 150%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  will-change: transform;
}
.landing-page .hero-image .parallax-bg {
  top: -15%; height: 130%;
}

/* --- IMAGE BREAK --- */
.landing-page .image-break {
  position: relative;
  height: 55vh; overflow: hidden;
}

/* --- HOW IT WORKS (inverted) --- */
.landing-page .how-section {
  padding: 6rem 3rem; background: var(--app-surface-strong); color: var(--app-text);
  position: relative; overflow: hidden;
}
.landing-page .how-inner { max-width: 1000px; margin: 0 auto; position: relative; z-index: 1; }
.landing-page .how-eyebrow {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--app-accent-strong); margin-bottom: 0.75rem;
}
.landing-page .how-title {
  font-family: var(--app-font-serif); font-weight: 300;
  font-size: clamp(var(--app-text-xl), 4vw, var(--app-text-2xl));
  line-height: 1.25; margin-bottom: 3.5rem;
}
.landing-page .how-title em, .landing-page .marquee-headline em, .landing-page .product-headline em, .landing-page .cta-headline em { font-style: normal; font-weight: 600; }
.landing-page .how-layout {
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 4rem; align-items: stretch;
}
.landing-page .how-steps { display: flex; flex-direction: column; gap: 0; }
.landing-page .how-card-col {
  display: flex; align-items: center;
}
.landing-page .how-card-col .hero-card {
  width: 100%; height: auto;
  display: flex; flex-direction: column;
}
.landing-page .how-card-col .hero-card-meta {
  margin-top: 1.35rem;
}
.landing-page .how-step {
  display: flex; gap: 2rem; align-items: flex-start;
  padding: 2rem 0; border-bottom: 1px solid var(--app-border);
  position: relative;
}
.landing-page .how-step:not(:last-child)::after {
  content: '↓'; position: absolute;
  left: 0.6rem; bottom: 0.5rem;
  font-size: var(--app-text-sm); color: var(--app-text-faint);
  animation: arrowBounce 6s ease-in-out infinite;
}
.landing-page .how-step:nth-child(1)::after { animation-delay: 0.8s; }
.landing-page .how-step:nth-child(2)::after { animation-delay: 2.8s; }
@keyframes arrowBounce {
  0%, 15% { opacity: 0; transform: translateY(-4px); }
  20%, 30% { opacity: 1; transform: translateY(0); }
  35%, 100% { opacity: 0; transform: translateY(4px); }
}
.landing-page .how-step-num {
  font-family: var(--app-font-serif); font-size: var(--app-text-2xl); font-weight: 300;
  color: var(--app-accent); flex-shrink: 0; line-height: 1;
  position: relative; top: -0.2em;
}
.landing-page .how-step-title {
  font-family: var(--app-font-serif); font-weight: 400; font-size: var(--app-text-lg); margin-bottom: 0.5rem;
}
.landing-page .how-step-text {
  font-size: var(--app-text-md); color: var(--app-text-muted); line-height: 1.7;
  max-width: 520px;
}
/* Sequential step glow */
@keyframes stepFlow {
  0%, 20% { color: var(--app-accent); }
  33%, 100% { color: var(--app-text-faint); }
}
.landing-page .how-step-num {
  animation: stepFlow 6s ease-in-out infinite;
}
.landing-page .how-step:nth-child(1) .how-step-num { animation-delay: 0s; }
.landing-page .how-step:nth-child(2) .how-step-num { animation-delay: 2s; }
.landing-page .how-step:nth-child(3) .how-step-num { animation-delay: 4s; }

/* --- STATS BAND (lifted from hero, sits between How and Product) --- */
.landing-page .stats-band {
  padding: 4rem 3rem; background: var(--app-panel-cream);
}
.landing-page .stats-band .hero-stats { margin-top: 0; }
.landing-page .stats-band .hero-stat-divider { background: rgba(28,28,26,0.12); }

/* --- PRODUCT SHOWCASE --- */
.landing-page .product-section {
  padding: 6rem 3rem; background: var(--app-surface-strong);
  overflow: hidden;
}
.landing-page .product-eyebrow {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--app-accent-strong);
  max-width: 1100px; margin: 0 auto 0.75rem;
}
.landing-page .product-headline {
  font-family: var(--app-font-serif); font-weight: 300;
  font-size: clamp(var(--app-text-xl), 3.5vw, var(--app-text-2xl));
  line-height: 1.25; margin-bottom: 1.25rem;
  max-width: 1100px; margin-left: auto; margin-right: auto;
}
.landing-page .product-sub {
  font-size: var(--app-text-md); color: var(--app-text-muted); line-height: 1.7;
  max-width: 1100px; margin: 0 auto 3.5rem;
}
.landing-page .product-stage {
  max-width: 1100px; margin: 0 auto;
}
.landing-page .product-callouts {
  display: flex; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.landing-page .product-callout {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--app-text-sm); font-weight: 500; color: var(--app-text);
}
.landing-page .product-callout-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--app-accent);
  flex-shrink: 0;
}
.landing-page .product-frame {
  background: #e8e8e6; border: 1px solid rgba(28,28,26,0.05); border-radius: 16px; padding: 1.5rem;
  box-shadow: 0 8px 40px rgba(28,28,26,0.06), 0 2px 12px rgba(28,28,26,0.04);
}
.landing-page .product-mock-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 1rem; background: rgba(255,255,255,0.9);
  border-radius: 10px; margin-bottom: 1.25rem;
}
.landing-page .product-mock-logo { display: inline-flex; align-items: center; }
.landing-page .product-mock-logo img { height: 16px; width: auto; display: block; }
/* Content-editor topbar (right side of product-mock-nav) */
.landing-page .mock-editor-bar { display: flex; align-items: center; gap: 0.5rem; }
.landing-page .mock-editor-meta {
  font-size: 0.625rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--app-text-faint); margin-right: 0.4rem;
}
.landing-page .mock-editor-btn {
  font-size: 0.6875rem; font-weight: 500;
  padding: 0.35rem 0.8rem; border-radius: 100px;
  color: var(--app-text-muted); background: rgba(255,255,255,0.7);
  border: 1px solid var(--app-border);
}
.landing-page .mock-editor-btn--primary {
  background: var(--app-text); color: var(--app-surface-strong); border-color: transparent;
}

/* Content-editor body */
.landing-page .mock-editor {
  background: rgba(255,255,255,0.7); border-radius: 14px;
  padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem;
}
.landing-page .mock-module-row { display: flex; gap: 1rem; align-items: flex-start; }
.landing-page .mock-module-index {
  font-family: var(--app-font-serif); font-size: 1.375rem; font-weight: 400;
  color: var(--app-text-faint); line-height: 1.1; flex-shrink: 0;
}
.landing-page .mock-module-info { min-width: 0; flex: 1; }
.landing-page .mock-module-thumb {
  flex-shrink: 0; width: 104px; height: 68px; border-radius: 9px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(28,28,26,0.08);
}
.landing-page .mock-module-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.landing-page .mock-tags { display: flex; gap: 0.4rem; margin-bottom: 0.45rem; }
.landing-page .mock-tag {
  font-size: 0.5rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--app-text-faint); padding: 0.2rem 0.5rem; border-radius: 100px;
  background: var(--app-panel-stone);
}
.landing-page .mock-tag--ready { color: var(--app-accent-strong); background: rgba(196,113,106,0.12); }
.landing-page .mock-module-title {
  font-family: var(--app-font-serif); font-size: 1.25rem; font-weight: 400;
  line-height: 1.2; margin-bottom: 0.35rem;
}
.landing-page .mock-module-meta { font-size: 0.6875rem; color: var(--app-text-faint); }

.landing-page .mock-cards { display: flex; flex-direction: column; gap: 0.5rem; }
.landing-page .mock-card {
  background: var(--app-surface-strong); border: 1px solid var(--app-border);
  border-radius: 10px; padding: 0.85rem 1rem;
}
.landing-page .mock-card.is-open { box-shadow: 0 6px 20px rgba(28,28,26,0.06); }
.landing-page .mock-card-head { display: flex; align-items: center; gap: 0.75rem; }
.landing-page .mock-card-icon {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--app-panel-stone); color: var(--app-text-muted);
}
.landing-page .mock-card-icon svg { width: 15px; height: 15px; }
.landing-page .mock-card-icon--check { background: var(--app-teal-tint); color: var(--app-success); }
.landing-page .mock-card-icon--summary { background: rgba(196,113,106,0.12); color: var(--app-accent-strong); }
.landing-page .mock-card-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.landing-page .mock-card-kind {
  font-size: 0.5rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--app-text-faint);
}
.landing-page .mock-card-title {
  font-family: var(--app-font-serif); font-size: 0.95rem; font-weight: 400; color: var(--app-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.landing-page .mock-card-chevron { width: 16px; height: 16px; color: var(--app-text-faint); flex-shrink: 0; }
.landing-page .mock-card-chevron--open { color: var(--app-text-muted); }
.landing-page .mock-card-body {
  font-size: 0.8125rem; color: var(--app-text-muted); line-height: 1.65;
  margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--app-border);
}

.landing-page .mock-add-row { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.landing-page .mock-add-chip {
  font-size: 0.625rem; font-weight: 500; color: var(--app-text-faint);
  padding: 0.35rem 0.75rem; border-radius: 100px;
  border: 1px dashed var(--app-border); background: transparent;
}

/* --- MARQUEE WALL --- */
.landing-page .marquee-section {
  position: relative;
  padding: 6rem 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 12%, rgba(196, 113, 106, 0.16), transparent 32%),
    radial-gradient(circle at 16% 86%, rgba(231, 201, 160, 0.11), transparent 30%),
    #211a16;
}
.landing-page .marquee-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.landing-page .marquee-header {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto 3.5rem;
  padding: 0 1.5rem;
  text-align: center;
}
.landing-page .marquee-eyebrow {
  margin-bottom: 0.75rem;
  color: #e6b0a6;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.landing-page .marquee-headline {
  color: #f8f0e4;
  font-family: var(--app-font-serif);
  font-size: clamp(var(--app-text-xl), 4vw, var(--app-text-2xl));
  font-weight: 300;
  line-height: 1.15;
}
.landing-page .marquee-sub { color: rgba(248, 240, 228, 0.62); }
.landing-page .marquee-row {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-bottom: 0.85rem;
  padding: 0.35rem 0;
}
.landing-page .marquee-track {
  display: flex;
  width: max-content;
  gap: 0.85rem;
}
.landing-page .marquee-track--left { animation: scrollLeft 58s linear infinite; }
.landing-page .marquee-track--right { animation: scrollRight 58s linear infinite; }
.landing-page .marquee-track--slow { animation-duration: 65s; }
@keyframes scrollLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes scrollRight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.landing-page .mq-card {
  position: relative;
  display: flex;
  width: 316px;
  height: 188px;
  flex-shrink: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 1.35rem 1.45rem;
  border: 1px solid rgba(54, 39, 28, 0.13);
  border-radius: 20px;
  box-shadow: 0 18px 46px -28px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  color: #241c14;
  font-size: 0.8125rem;
}
.landing-page .mq-card::after {
  content: "";
  position: absolute;
  right: -2.5rem;
  bottom: -3.5rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  filter: blur(12px);
  pointer-events: none;
}
.landing-page .mq-card--warm { background: #dfc4bb; }
.landing-page .mq-card--sage { background: #dce4d9; }
.landing-page .mq-card--stone {
  border-color: rgba(248, 240, 228, 0.12);
  background: #302722;
  color: #f8f0e4;
  box-shadow: 0 22px 52px -28px rgba(0, 0, 0, 0.82), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.landing-page .mq-card--cream { background: #f3e8d8; }
.landing-page .mq-card--cloud { background: #e7ddd4; }
.landing-page .mq-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.landing-page .mq-card-mark {
  width: 0.8rem;
  height: 0.8rem;
  color: rgba(36, 28, 20, 0.34);
}
.landing-page .mq-card--stone .mq-card-mark { color: rgba(248, 240, 228, 0.46); }
.landing-page .mq-label {
  color: rgba(36, 28, 20, 0.56);
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.landing-page .mq-card--stone .mq-label { color: rgba(248, 240, 228, 0.58); }
.landing-page .mq-title {
  position: relative;
  z-index: 1;
  margin-bottom: 0.45rem;
  font-family: var(--app-font-serif);
  font-size: 1.38rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.landing-page .mq-text {
  position: relative;
  z-index: 1;
  color: rgba(36, 28, 20, 0.66);
  font-size: 0.725rem;
  line-height: 1.5;
}
.landing-page .mq-card--stone .mq-text { color: rgba(248, 240, 228, 0.64); }
.landing-page .mq-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid rgba(36, 28, 20, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  color: #954139;
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.landing-page .mq-card--stone .mq-badge {
  border-color: rgba(248, 240, 228, 0.12);
  background: rgba(248, 240, 228, 0.08);
  color: #e6b0a6;
}
.landing-page .mq-pills {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
}
.landing-page .mq-pill {
  padding: 0.42rem 0.75rem;
  border: 1px solid rgba(36, 28, 20, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  color: rgba(36, 28, 20, 0.7);
  font-size: 0.65rem;
  font-weight: 500;
}
.landing-page .mq-card--stone .mq-pill {
  border-color: rgba(248, 240, 228, 0.14);
  background: rgba(248, 240, 228, 0.08);
  color: rgba(248, 240, 228, 0.68);
}
.landing-page .mq-pill.active { border-color: #954139; background: #954139; color: #fff; }
.landing-page .mq-pill.active-teal { background: var(--app-success); color: #fff; }
.landing-page .mq-ring {
  position: relative;
  width: 68px;
  height: 68px;
  margin: -0.15rem auto 0.3rem;
}
.landing-page .mq-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.landing-page .mq-ring-bg { fill: none; stroke: rgba(248, 240, 228, 0.12); stroke-width: 5; }
.landing-page .mq-ring-fill { fill: none; stroke: #e6b0a6; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 28; }
.landing-page .mq-ring-text {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-family: var(--app-font-serif);
  font-size: 1.1rem; font-weight: 500;
}
.landing-page .mq-option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 1.8rem;
  margin-top: 0.3rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid rgba(36, 28, 20, 0.09);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.25);
  color: rgba(36, 28, 20, 0.68);
  font-size: 0.625rem;
  line-height: 1.25;
}
.landing-page .mq-option::before {
  content: "";
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  border: 1px solid rgba(36, 28, 20, 0.24);
  border-radius: 50%;
}
.landing-page .mq-option.correct { color: var(--app-success); font-weight: 500; }
.landing-page .mq-option.correct::before {
  border-color: var(--app-success); background: var(--app-success);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.88);
}
.landing-page .mq-stat {
  position: relative;
  z-index: 1;
  margin: auto 0;
  text-align: left;
}
.landing-page .mq-stat-number {
  font-family: var(--app-font-serif);
  font-size: 2.8rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 0.9;
}
.landing-page .mq-stat-label {
  max-width: 24ch;
  margin-top: 0.65rem;
  color: rgba(36, 28, 20, 0.58);
  font-size: 0.6875rem;
  line-height: 1.4;
}
.landing-page .mq-card--stone .mq-stat-label { color: rgba(248, 240, 228, 0.58); }
.landing-page .mq-wizard {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.3rem;
  margin: auto 0;
}
.landing-page .mq-wiz-step {
  flex: 1;
  padding: 0.7rem 0.25rem;
  border: 1px solid rgba(36, 28, 20, 0.08);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.28);
  color: rgba(36, 28, 20, 0.48);
  font-size: 0.5625rem;
  font-weight: 600;
  text-align: center;
}
.landing-page .mq-wiz-step.done { background: rgba(61, 107, 86, 0.12); color: var(--app-success); }
.landing-page .mq-wiz-step.current { border-color: #954139; background: #954139; color: #fff; }
.landing-page .mq-progress {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.3rem;
  margin-top: auto;
}
.landing-page .mq-progress span {
  width: 1.75rem;
  height: 3px;
  border-radius: 999px;
  background: rgba(36, 28, 20, 0.14);
}
.landing-page .mq-card--stone .mq-progress span { background: rgba(248, 240, 228, 0.14); }
.landing-page .mq-progress .is-complete { background: rgba(36, 28, 20, 0.5); }
.landing-page .mq-card--stone .mq-progress .is-complete { background: rgba(248, 240, 228, 0.52); }
.landing-page .mq-progress .is-current {
  width: 2.75rem;
  background: #a85850;
  box-shadow: 0 0 8px -2px rgba(168, 88, 80, 0.8);
}
.landing-page .mq-card--module .mq-text,
.landing-page .mq-card--control .mq-text { max-width: 34ch; }
.landing-page .mq-card--control .mq-title { margin-top: auto; }
.landing-page .mq-card--control .mq-text { margin-top: 0.75rem; }
.landing-page .mq-card--question .mq-card-top { margin-bottom: 0.45rem; }
.landing-page .mq-card--question .mq-title {
  margin-bottom: 0.35rem;
  font-size: 1.08rem;
  line-height: 1.12;
}
.landing-page .mq-card--metric { text-align: center; }
.landing-page .mq-card--metric .mq-text { text-align: center; }

/* --- INTELLIGENT TRAINING ENGINE --- */
.landing-page .engine-section {
  padding: 6rem 3rem; background: var(--app-panel-warm);
}
.landing-page .engine-inner { max-width: 1100px; margin: 0 auto; }
.landing-page .engine-header { margin-bottom: 3.5rem; max-width: 720px; }
.landing-page .engine-eyebrow {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--app-accent-strong); margin-bottom: 0.75rem;
}
.landing-page .engine-headline {
  font-family: var(--app-font-serif); font-weight: 300;
  font-size: clamp(var(--app-text-xl), 4vw, var(--app-text-2xl));
  line-height: 1.2; margin-bottom: 1rem;
}
.landing-page .engine-headline em { font-style: normal; font-weight: 600; }
.landing-page .engine-sub {
  font-size: var(--app-text-md); color: var(--app-text-muted); line-height: 1.7;
}
.landing-page .engine-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2rem;
}
.landing-page .engine-col {
  background: var(--app-surface-strong); border-radius: 20px; padding: 2.25rem;
  box-shadow: 0 4px 24px rgba(28,28,26,0.04);
  display: flex; flex-direction: column;
}
.landing-page .engine-col-label {
  font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--app-text-faint);
  margin-bottom: 1.5rem;
}
.landing-page .engine-mode {
  display: grid; grid-template-columns: 56px 1fr; gap: 1rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--app-border);
  align-items: baseline;
}
.landing-page .engine-mode:first-of-type { padding-top: 0; }
.landing-page .engine-mode:last-child { border-bottom: none; padding-bottom: 0; }
.landing-page .engine-mode-num {
  font-family: var(--app-font-serif); font-size: var(--app-text-2xl); font-weight: 300;
  letter-spacing: -0.02em; line-height: 1;
}
.engine-mode-num--accent,
.engine-mode-num--teal,
.landing-page .engine-mode-num--blend { color: var(--app-accent); }
.landing-page .engine-mode--featured .engine-mode-title { font-style: italic; }
.landing-page .engine-mode-title {
  font-family: var(--app-font-serif); font-weight: 400; font-size: var(--app-text-lg);
  margin-bottom: 0.4rem; line-height: 1.25;
}
.landing-page .engine-mode-text {
  font-size: var(--app-text-sm); color: var(--app-text-muted); line-height: 1.65;
}
.landing-page .engine-uses {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 1.75rem;
}
.landing-page .engine-use {
  display: grid; grid-template-columns: 40px 1fr; gap: 1rem; align-items: flex-start;
}
.landing-page .engine-use-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--app-teal-tint); color: var(--app-success);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.landing-page .engine-use-title {
  font-family: var(--app-font-serif); font-weight: 400; font-size: var(--app-text-md);
  margin-bottom: 0.3rem; line-height: 1.3;
}
.landing-page .engine-use-text {
  font-size: var(--app-text-sm); color: var(--app-text-muted); line-height: 1.6;
}

/* --- TESTIMONIAL --- */
.landing-page .testimonial {
  padding: 7rem 3rem; max-width: 900px; margin: 0 auto;
  text-align: center; border-bottom: 1px solid var(--app-border);
}
.landing-page .testimonial-quote {
  font-family: var(--app-font-serif); font-style: italic; font-weight: 300;
  font-size: clamp(var(--app-text-xl), 3.5vw, var(--app-text-2xl));
  line-height: 1.35; letter-spacing: -0.01em; margin-bottom: 2rem;
}
.landing-page .testimonial-author {
  font-size: 0.8125rem; font-weight: 400; color: var(--app-text-muted);
}

/* --- CTA --- */
.landing-page .cta-section {
  padding: 7rem 3rem; background: var(--app-panel-warm);
  text-align: center;
}
.landing-page .cta-section > * { max-width: 1000px; margin-left: auto; margin-right: auto; }
.landing-page .cta-headline {
  font-family: var(--app-font-serif); font-size: clamp(var(--app-text-xl), 3.5vw, var(--app-text-2xl)); font-weight: 300;
  letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 2rem;
}
.landing-page .cta-sub {
  font-size: 1rem; color: var(--app-text-muted); margin-bottom: 2.5rem;
  max-width: 420px; margin-left: auto; margin-right: auto; line-height: 1.7;
}
.landing-page .cta-proof {
  font-size: var(--app-text-sm); color: var(--app-text-faint); margin-top: 1.25rem;
}

/* --- FOOTER --- */
.landing-page .landing-footer {
  padding: 4rem 3rem 2rem; border-top: 1px solid var(--app-border);
}
.landing-page .landing-footer-inner {
  max-width: 1000px; margin: 0 auto;
  display: flex; justify-content: space-between; gap: 3rem;
}
.landing-page .landing-footer-brand { max-width: 240px; }
.landing-page .landing-footer-logo { display: block; width: 7.5rem; height: auto; margin-bottom: 0.5rem; }
.landing-page .landing-footer-tagline {
  font-size: 0.8125rem; color: var(--app-text-muted); line-height: 1.6;
}
.landing-page .landing-footer-cols { display: flex; gap: 3.5rem; }
.landing-page .landing-footer-col { display: flex; flex-direction: column; gap: 0.5rem; }
.landing-page .landing-footer-col-title {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--app-text-faint); margin-bottom: 0.25rem;
}
.landing-page .landing-footer-col a {
  font-size: 0.8125rem; color: var(--app-text-muted);
  text-decoration: none; transition: color 0.2s;
}
.landing-page .landing-footer-col a:hover { color: var(--app-text); }
.landing-page .landing-footer-bottom {
  max-width: 1000px; margin: 2.5rem auto 0;
  padding-top: 1.5rem; border-top: 1px solid var(--app-border);
}
.landing-page .landing-footer-copy {
  font-size: 0.6875rem; color: var(--app-text-faint);
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
.landing-page .how-layout { grid-template-columns: 1fr; }
.landing-page .how-card-col { position: static; justify-content: center; }
.landing-page .engine-grid { grid-template-columns: 1fr; }
.landing-page .legal-section-header { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 768px) {
.landing-page .landing-nav { padding: 1rem 1.5rem; }
.landing-page .landing-nav-links { display: none; }
.landing-page .legal-main { width: min(100% - 2rem, 1120px); padding-top: 6.25rem; }
.landing-page .legal-hero { padding: 2rem 0 2.5rem; }
.landing-page .legal-intro { font-size: var(--app-type-body-size); line-height: 1.7; }
.landing-page .legal-table-section { padding: 2rem 0; }
.landing-page .legal-table th,
.landing-page .legal-table td { padding: 0.95rem 0.85rem; }
.landing-page .legal-table-wrap { overflow-x: visible; }
.landing-page .legal-table { min-width: 0; }
.landing-page .legal-table thead { display: none; }
.landing-page .legal-table,
.landing-page .legal-table tbody,
.landing-page .legal-table tr,
.landing-page .legal-table th,
.landing-page .legal-table td { display: block; }
.landing-page .legal-table tbody {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}
.landing-page .legal-table tr {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface-strong);
}
.landing-page .legal-table tbody th,
.landing-page .legal-table tbody td {
  width: auto;
  border-bottom: 1px solid var(--app-border);
}
.landing-page .legal-table tbody tr:last-child th,
.landing-page .legal-table tbody tr:last-child td {
  border-bottom: 1px solid var(--app-border);
}
.landing-page .legal-table tbody tr th:last-child,
.landing-page .legal-table tbody tr td:last-child {
  border-bottom: 0;
}
.landing-page .legal-table tbody th::before,
.landing-page .legal-table tbody td::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 0.35rem;
  color: var(--app-text-faint);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}
.landing-page .legal-notes { grid-template-columns: 1fr; gap: 1rem; padding-bottom: 2rem; }
.landing-page .legal-note-card { padding: 1.5rem; }
.landing-page .landing-hero { padding: 6rem 1.5rem 2.5rem; min-height: auto; }
.landing-page .hero-content { grid-template-columns: 1fr; gap: 2rem; }
.landing-page .hero-image { min-height: 280px; max-height: 50vh; border-radius: 16px; margin: 0 -0.5rem; }
.landing-page .hero-image .parallax-bg { top: -15%; height: 130%; }
.landing-page .hero-flow { gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.landing-page .hero-flow-arrow svg { width: 20px; height: 8px; }
.landing-page .hero-stats { flex-direction: row; gap: 0; margin-top: 1.5rem; }
.landing-page .hero-stat { padding: 1.5rem 0.75rem; }
.landing-page .hero-stat-num { font-size: var(--app-text-xl); }
.landing-page .hero-stat-divider { width: 1px; height: auto; }
.landing-page .image-break { height: 35vh; }
.landing-page .how-section { padding: 3rem 1.5rem; }
.landing-page .how-title { margin-bottom: 2rem; }
.landing-page .how-step { flex-direction: column; gap: 0.5rem; padding: 1.25rem 0; }
.landing-page .how-card-col { margin-top: 1.5rem; }
.landing-page .how-card-col .hero-card { height: auto; }
.landing-page .hero-card-content { padding: 1.4rem; }
.landing-page .product-section { padding: 3rem 1.5rem; }
.landing-page .product-headline { margin-bottom: 1rem; }
.landing-page .product-sub { margin-bottom: 2rem; }
.landing-page .mock-editor-meta { display: none; }
.landing-page .mock-editor { padding: 1.25rem; }
.landing-page .testimonial { padding: 3rem 1.5rem; }
.landing-page .cta-section { padding: 3.5rem 1.5rem; }
.landing-page .cta-headline { margin-bottom: 1.25rem; }
.landing-page .cta-sub { margin-bottom: 1.5rem; }
.landing-page .engine-section { padding: 3rem 1.5rem; }
.landing-page .engine-header { margin-bottom: 2rem; }
.landing-page .engine-col { padding: 1.5rem; }
.landing-page .engine-grid { gap: 1rem; }
.landing-page .marquee-section { padding: 3.5rem 0; }
.landing-page .marquee-header { margin-bottom: 2rem; }
.landing-page .marquee-row { margin-bottom: 0.5rem; }
.landing-page .mq-card { width: 286px; height: 174px; padding: 1.1rem 1.15rem; border-radius: 17px; font-size: 0.75rem; }
.landing-page .mq-title { font-size: 1.15rem; }
.landing-page .mq-card--question .mq-title { font-size: 0.96rem; }
.landing-page .mq-text { font-size: 0.6875rem; }
.landing-page .mq-option { font-size: 0.625rem; }
.landing-page .mq-stat-number { font-size: 2.25rem; }
.landing-page .mq-ring { width: 58px; height: 58px; }
.landing-page .mq-pills { gap: 0.2rem; }
.landing-page .mq-pill { font-size: 0.6rem; padding: 0.35rem 0.55rem; }
.landing-page .marquee-track { gap: 0.5rem; }
.landing-page footer { padding: 2rem 1.5rem 1.5rem; }
.landing-page .landing-footer-inner { flex-direction: column; gap: 2rem; text-align: left; }
.landing-page .landing-footer-brand { text-align: left; }
.landing-page .landing-footer-cols {
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 3rem;
  row-gap: 2rem;
}
.landing-page .landing-footer-col { align-items: flex-start; }
}
@media (max-width: 480px) {
.landing-page .hero-headline { font-size: var(--app-text-xl); }
.landing-page .hero-card-media { aspect-ratio: 16 / 8.4; }
.landing-page .hero-card-title { font-size: 1.65rem; }
.landing-page .hero-card-meta { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
}
.landing-page .hero-microcopy {
  font-size: 0.8125rem;
  color: var(--app-text-muted);
  margin-top: 1rem;
  opacity: 0.8;
}

.landing-page .marquee-sub {
  max-width: 620px;
  margin: 1rem auto 0;
  color: rgba(248, 240, 228, 0.62);
  line-height: 1.7;
}

.landing-page .analysis-section {
  padding: 6rem 3rem;
  background: var(--app-surface-strong);
}

.landing-page .analysis-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.landing-page .analysis-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: 4rem;
  align-items: center;
}

.landing-page .analysis-left,
.landing-page .analysis-right {
  min-width: 0;
}

.landing-page .analysis-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--app-accent-strong);
  margin-bottom: 1.5rem;
}

.landing-page .analysis-headline {
  font-family: var(--app-font-serif);
  font-weight: 300;
  font-size: clamp(var(--app-text-xl), 4vw, var(--app-text-2xl));
  line-height: 1.15;
  color: var(--app-text);
  margin-bottom: 1.25rem;
}

.landing-page .analysis-headline em {
  font-style: normal;
  font-weight: 600;
}

.landing-page .analysis-sub {
  color: var(--app-text-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.landing-page .analysis-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.landing-page .analysis-bullets li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--app-text-muted);
  line-height: 1.6;
}

.landing-page .analysis-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--app-success);
}

.landing-page .analysis-card {
  background: var(--app-panel-warm);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 16px 50px rgba(28, 28, 26, 0.08);
}

.landing-page .analysis-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--app-border);
}

.landing-page .analysis-card-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-text-faint);
  margin-bottom: 0.4rem;
}

.landing-page .analysis-card-title,
.landing-page .analysis-summary-num {
  font-family: var(--app-font-serif);
  font-weight: 400;
  font-size: var(--app-text-lg);
  color: var(--app-text);
}

.landing-page .analysis-card-summary {
  text-align: right;
  flex-shrink: 0;
}

.landing-page .analysis-summary-num {
  display: block;
  line-height: 1;
  color: var(--app-success);
}

.landing-page .analysis-summary-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-text-faint);
}

.landing-page .analysis-table {
  display: flex;
  flex-direction: column;
}

.landing-page .analysis-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.4fr) minmax(4rem, 0.55fr) minmax(5rem, 0.75fr);
  gap: 1rem;
  align-items: center;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--app-border);
}

.landing-page .analysis-row:last-child {
  border-bottom: 0;
}

.landing-page .analysis-row--head {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-text-faint);
}

.landing-page .analysis-user,
.landing-page .analysis-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.landing-page .analysis-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-family: var(--app-font-serif);
  font-size: 0.9375rem;
}

.landing-page .analysis-avatar--warm { background: var(--app-panel-warm); color: var(--app-accent-strong); }
.landing-page .analysis-avatar--sage { background: var(--app-panel-sage); color: var(--app-success); }
.landing-page .analysis-avatar--cream { background: var(--app-panel-cream); color: var(--app-accent-strong); }
.landing-page .analysis-avatar--stone { background: var(--app-panel-stone); color: var(--app-text); }

.landing-page .analysis-user-name {
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--app-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-page .analysis-progress-track {
  height: 0.4rem;
  flex: 1 1 auto;
  min-width: 2.5rem;
  border-radius: 999px;
  background: rgba(28, 28, 26, 0.08);
  overflow: hidden;
}

.landing-page .analysis-progress-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.8s ease;
}

.landing-page .analysis-progress-fill--complete { background: var(--app-success); }
.landing-page .analysis-progress-fill--active { background: var(--app-accent-strong); }

.landing-page .analysis-progress-value,
.landing-page .analysis-time {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--app-text-muted);
  font-variant-numeric: tabular-nums;
}

.landing-page .analysis-status {
  justify-self: end;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.landing-page .analysis-status--complete { color: var(--app-success); }
.landing-page .analysis-status--progress { color: var(--app-accent-strong); }
.landing-page .analysis-status--idle,
.landing-page .analysis-progress-value--empty,
.landing-page .analysis-time--empty { color: var(--app-text-faint); }

@media (max-width: 980px) {
  .landing-page .analysis-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.75rem;
  }
}

@media (max-width: 720px) {
  .landing-page .analysis-section {
    padding: 4rem 1.5rem;
  }

  .landing-page .analysis-card {
    padding: 1.25rem;
  }

  .landing-page .analysis-card-header {
    flex-direction: column;
  }

  .landing-page .analysis-card-summary {
    text-align: left;
  }

  .landing-page .analysis-row--head {
    display: none;
  }

  .landing-page .analysis-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "user status"
      "progress progress"
      "time time";
    gap: 0.75rem 1rem;
  }

  .landing-page .analysis-user { grid-area: user; }
  .landing-page .analysis-status { grid-area: status; text-align: right; }
  .landing-page .analysis-progress { grid-area: progress; }
  .landing-page .analysis-time { grid-area: time; font-size: 0.6875rem; }
}

.landing-page .landing-nav-links a.is-active {
  color: var(--app-text);
  font-weight: 500;
}

.landing-page .page-hero {
  padding: 9rem 3rem 5rem;
  background: var(--app-panel-warm);
}

.landing-page .page-hero-inner,
.landing-page .editorial-inner,
.landing-page .team-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.landing-page .page-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}

.landing-page .page-hero-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.landing-page .page-hero-eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-accent-strong);
  margin-bottom: 2rem;
}

.landing-page .chapter-eyebrow {
  font-family: var(--app-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--app-accent-strong);
}

.landing-page .page-hero-title {
  font-family: var(--app-font-serif);
  font-weight: 300;
  font-size: clamp(var(--app-text-2xl), 5vw, var(--app-text-3xl));
  line-height: 1.1;
  color: var(--app-text);
  letter-spacing: -0.01em;
  max-width: 20ch;
  margin-bottom: 1.75rem;
}

.landing-page .page-hero-title em,
.landing-page .editorial-h2 em,
.landing-page .subpage-cta-title em {
  font-style: normal;
  font-weight: 600;
}

.landing-page .page-hero-lead,
.landing-page .modes-lead,
.landing-page .mode-card-text,
.landing-page .commitment-text,
.landing-page .contact-text,
.landing-page .faq-a,
.landing-page .subpage-cta-sub {
  color: var(--app-text-muted);
  line-height: 1.7;
}

.landing-page .page-hero-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 20px;
  min-width: 0;
}

.landing-page .page-hero-image .parallax-bg {
  top: -15%;
  height: 130%;
}

.landing-page .editorial-section {
  padding: 5rem 3rem;
  background: var(--app-surface-strong);
}

.landing-page .editorial-row {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
  gap: 4rem;
  align-items: start;
}

.landing-page .editorial-label {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.landing-page .editorial-h2,
.landing-page .team-heading,
.landing-page .subpage-cta-title {
  font-family: var(--app-font-serif);
  font-weight: 300;
  font-size: clamp(var(--app-text-xl), 3.5vw, var(--app-text-2xl));
  line-height: 1.2;
  color: var(--app-text);
  letter-spacing: -0.015em;
}

.landing-page .editorial-content {
  max-width: 640px;
}

.landing-page .editorial-content p {
  font-size: var(--app-text-md);
  line-height: 1.7;
  color: var(--app-text-muted);
}

.landing-page .editorial-content p + p,
.landing-page .faq-item + .faq-item {
  margin-top: 1.25rem;
}

.landing-page .editorial-pullquote {
  padding: 10rem 3rem;
  background: var(--app-surface-strong);
}

.landing-page .editorial-pullquote--cream { background: var(--app-panel-cream); }
.landing-page .editorial-pullquote--sage { background: var(--app-panel-sage); }

.landing-page .editorial-pullquote-inner {
  max-width: 940px;
  margin: 0 auto;
}

.landing-page .editorial-pullquote blockquote {
  font-family: var(--app-font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(var(--app-text-xl), 4.5vw, var(--app-text-2xl));
  line-height: 1.3;
  color: var(--app-text);
}

.landing-page .editorial-pullquote blockquote em {
  font-weight: 600;
  font-style: italic;
}

.landing-page .editorial-section--warm,
.landing-page .editorial-section--cream,
.landing-page .editorial-section--sage,
.landing-page .subpage-cta--warm {
  border-top: none;
}

.landing-page .editorial-section--warm,
.landing-page .subpage-cta--warm {
  background: var(--app-panel-warm);
}

.landing-page .editorial-section--cream { background: var(--app-panel-cream); }
.landing-page .editorial-section--sage { background: var(--app-panel-sage); }

.landing-page .modes-header,
.landing-page .tiers-header {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 4rem;
}

.landing-page .tiers-header {
  gap: 0.75rem;
  margin-bottom: 3.5rem;
}

.landing-page .modes-lead {
  margin-top: 0.75rem;
  max-width: 540px;
}

.landing-page .modes-grid,
.landing-page .tiers-grid,
.landing-page .team-roster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
}

.landing-page .mode-card {
  display: flex;
  flex-direction: column;
}

.landing-page .modes-grid--ruled .mode-card-text {
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--app-border);
}

.landing-page .mode-card-icon,
.landing-page .commitment-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--app-teal-tint);
  color: var(--app-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.landing-page .mode-card-icon {
  margin-bottom: 1.5rem;
}

.landing-page .mode-card-icon svg,
.landing-page .commitment-icon svg {
  width: 22px;
  height: 22px;
}

.landing-page .mode-card-title,
.landing-page .commitment-title,
.landing-page .faq-q,
.landing-page .contact-headline {
  font-family: var(--app-font-serif);
  font-weight: 400;
  font-size: var(--app-text-xl);
  line-height: 1.25;
  color: var(--app-text);
  letter-spacing: -0.01em;
}

.landing-page .mode-card-title,
.landing-page .commitment-title {
  margin-bottom: 0.6rem;
}

.landing-page .team-section {
  padding: 8rem 3rem;
  background: var(--app-surface-strong);
}

.landing-page .team-header {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 5rem;
}

.landing-page .team-heading {
  max-width: 26ch;
}

.landing-page .team-roster {
  gap: 2.5rem;
}

.landing-page .team-member {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
}

.landing-page .team-portrait {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--app-font-serif);
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  overflow: hidden;
}

.landing-page .team-portrait--warm { background: var(--app-panel-warm); color: var(--app-accent-strong); }
.landing-page .team-portrait--sage { background: var(--app-panel-sage); color: var(--app-success); }
.landing-page .team-portrait--cream { background: var(--app-panel-cream); color: var(--app-accent-strong); }
.landing-page .team-portrait--cloud { background: var(--app-panel-cloud); color: var(--app-success); }
.landing-page .team-portrait--stone { background: var(--app-panel-stone); color: var(--app-text); }

.landing-page .team-name {
  font-family: var(--app-font-serif);
  font-weight: 400;
  font-size: var(--app-text-lg);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--app-text);
}

.landing-page .team-role,
.landing-page .contact-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--app-text-faint);
}

.landing-page .subpage-cta {
  padding: 10rem 3rem;
  text-align: center;
  background: var(--app-surface-strong);
}

.landing-page .subpage-cta--warm {
  background: var(--app-panel-warm);
}

.landing-page .subpage-cta > * {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.landing-page .subpage-cta-title {
  font-size: clamp(var(--app-text-2xl), 4.5vw, var(--app-text-3xl));
  line-height: 1.1;
  margin-bottom: 1.75rem;
}

.landing-page .subpage-cta-sub {
  max-width: 480px;
  margin-bottom: 2.5rem;
}

.landing-page .tiers-grid {
  gap: 1.25rem;
  align-items: stretch;
}

.landing-page .tier-card {
  position: relative;
  padding: 2.75rem 2.25rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--app-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.landing-page .tier-card {
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1), background-color 0.25s ease, border-color 0.25s ease;
}

.landing-page .tier-card:hover {
  transform: translateY(-2px);
  background: var(--app-surface-strong);
  border-color: rgba(196, 113, 106, 0.3);
  box-shadow: 0 2px 4px rgba(28,28,26,0.05), 0 12px 30px rgba(28,28,26,0.09);
}

.landing-page .tier-card--featured {
  background: var(--app-surface-strong);
  border-color: rgba(196, 113, 106, 0.35);
  box-shadow: 0 2px 4px rgba(28,28,26,0.04), 0 10px 28px rgba(28,28,26,0.07);
}

.landing-page .tier-card-tag {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--app-font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--app-surface-strong);
  background: var(--app-accent-strong);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
}

.landing-page .tier-card-head {
  margin-bottom: 2rem;
}

.landing-page .tier-card-name {
  font-family: var(--app-font-serif);
  font-weight: 400;
  font-size: var(--app-text-lg);
  color: var(--app-text);
  margin-bottom: 0.75rem;
}

.landing-page .tier-card-price {
  display: block;
  font-family: var(--app-font-serif);
  font-weight: 300;
  font-size: clamp(2.75rem, 6.5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--app-text);
  margin-bottom: 0.5rem;
}

.landing-page .tier-card-price-unit {
  font-family: var(--app-font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--app-text-muted);
  letter-spacing: 0;
  margin-left: 0.2rem;
}

.landing-page .tier-card-note {
  font-family: var(--app-font-sans);
  font-size: 0.8125rem;
  color: var(--app-text-muted);
  line-height: 1.5;
}

.landing-page .tier-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}

.landing-page .tier-card-features li {
  font-family: var(--app-font-sans);
  font-size: 0.9375rem;
  color: var(--app-text);
  line-height: 1.5;
  position: relative;
  padding-left: 1.4rem;
}

.landing-page .tier-card-features li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--app-accent-strong);
  font-family: var(--app-font-serif);
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 400;
}

.landing-page .tier-card .btn-pill,
.landing-page .tier-card .btn-pill-outline {
  align-self: flex-start;
}

.landing-page .faq-jumpnav {
  background: var(--app-surface-strong);
  border-top: 1px solid var(--app-border);
  border-bottom: 1px solid var(--app-border);
  padding: 1.25rem 3rem;
}

.landing-page .faq-jumpnav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.25rem;
  align-items: center;
  justify-content: center;
}

.landing-page .faq-jumpnav a {
  font-family: var(--app-font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--app-text-muted);
  text-decoration: none;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: var(--app-panel-stone);
  border: 1px solid var(--app-border);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.landing-page .faq-jumpnav a:hover {
  color: var(--app-accent-strong);
  background: rgba(196, 113, 106, 0.1);
  border-color: rgba(196, 113, 106, 0.28);
}

.landing-page .faq-list {
  display: flex;
  flex-direction: column;
}

.landing-page .faq-item {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--app-border);
}

.landing-page .faq-a {
  font-family: var(--app-font-sans);
  font-size: var(--app-text-md);
  color: var(--app-text-muted);
  line-height: 1.7;
  margin: 0;
}

.landing-page .commitments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}

.landing-page .commitment-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

.landing-page .certs-band {
  padding: 3.5rem 3rem;
  background: var(--app-surface-strong);
  border-top: 1px solid var(--app-border);
  border-bottom: 1px solid var(--app-border);
}

.landing-page .certs-band-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}

.landing-page .cert {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1.5rem;
  border-right: 1px solid var(--app-border);
  min-width: 0;
}

.landing-page .cert:last-child {
  border-right: none;
}

.landing-page .cert:first-child {
  padding-left: 0;
}

.landing-page .cert-label {
  font-family: var(--app-font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--app-text-faint);
}

.landing-page .cert-value {
  font-family: var(--app-font-serif);
  font-weight: 400;
  font-size: var(--app-text-lg);
  line-height: 1.2;
  color: var(--app-text);
  letter-spacing: -0.005em;
}

.landing-page .contact-list {
  display: flex;
  flex-direction: column;
}

.landing-page .contact-item {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
  gap: 4rem;
  align-items: start;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--app-border);
}

.landing-page .contact-label {
  padding-top: 0.5rem;
}

.landing-page .contact-body {
  min-width: 0;
}

.landing-page .contact-headline {
  display: block;
  color: var(--app-accent-strong);
  text-decoration: none;
  margin-bottom: 0.65rem;
  transition: color 0.2s;
}

.landing-page a.contact-headline:hover {
  color: var(--app-text);
}

.landing-page .contact-text {
  font-family: var(--app-font-sans);
  font-size: var(--app-text-md);
  color: var(--app-text-muted);
  line-height: 1.7;
  margin: 0;
  max-width: 480px;
}

.landing-page .contact-time {
  font-family: var(--app-font-sans);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--app-text);
}

@media (max-width: 980px) {
  .landing-page .page-hero-row,
  .landing-page .editorial-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .landing-page .page-hero-image {
    aspect-ratio: 16 / 10;
  }

  .landing-page .editorial-label {
    position: static;
  }

  .landing-page .modes-grid,
  .landing-page .tiers-grid,
  .landing-page .team-roster {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-page .tiers-grid {
    gap: 2rem;
  }

  .landing-page .tier-card {
    padding: 2.5rem 1.5rem;
  }

  .landing-page .tier-card--featured {
    background: var(--app-surface-strong);
  }

  .landing-page .certs-band {
    padding: 2.5rem 1.5rem;
  }

  .landing-page .certs-band-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
  }

  .landing-page .cert {
    border-right: none;
    padding: 0;
  }
}

@media (max-width: 640px) {
  .landing-page .page-hero {
    padding: 7rem 1.5rem 3rem;
  }

  .landing-page .editorial-section {
    padding: 3.5rem 1.5rem;
  }

  .landing-page .editorial-pullquote {
    padding: 3.5rem 1.5rem;
  }

  .landing-page .team-section {
    padding: 4rem 1.5rem;
  }

  .landing-page .subpage-cta {
    padding: 5rem 1.5rem;
  }

  .landing-page .faq-jumpnav {
    padding: 1rem 1rem;
  }

  .landing-page .faq-jumpnav-inner {
    gap: 0.25rem;
  }

  .landing-page .faq-jumpnav a {
    padding: 0.4rem 0.7rem;
    font-size: 0.75rem;
  }

  .landing-page .team-portrait {
    width: 52px;
    height: 52px;
    font-size: 1.5rem;
  }

  .landing-page .commitment-item {
    gap: 1.25rem;
  }

  .landing-page .contact-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    padding: 2rem 0;
  }

  .landing-page .contact-label {
    padding-top: 0;
  }

  .landing-page .page-hero,
  .landing-page .editorial-section,
  .landing-page .team-section,
  .landing-page .subpage-cta {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .marquee-track {
    animation: none;
  }
}

.landing-page .marketing-nav-burger {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  margin-right: 0.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--app-text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  position: relative;
  z-index: 110;
}

.landing-page .marketing-nav-burger span {
  display: block;
  width: 1.375rem;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(0.2,0,0,1), opacity 0.2s;
}

.landing-page .marketing-nav-burger.is-open span:nth-child(1) {
  transform: translateY(3.25px) rotate(45deg);
}

.landing-page .marketing-nav-burger.is-open span:nth-child(2) {
  transform: translateY(-3.25px) rotate(-45deg);
}

.landing-page .marketing-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--app-surface);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 2.5rem;
  gap: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.landing-page .marketing-mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.landing-page .marketing-mobile-menu a {
  font-family: var(--app-font-serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  color: var(--app-text);
  text-decoration: none;
  line-height: 1.2;
}

.landing-page .marketing-mobile-menu a.is-active {
  font-weight: 400;
}

.landing-page .marketing-mobile-menu .marketing-mobile-menu-cta {
  margin-top: 1.5rem;
  font-family: var(--app-font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.7rem 1.75rem;
  background: var(--app-text);
  color: var(--app-surface);
  border-radius: 100px;
}

body.menu-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .landing-page .marketing-nav-burger {
    display: inline-flex;
  }

}

/* ============================================================
   Learner-card THEMES (ux/learner-card-themes)
   A theme is chosen per course (Course#default_theme) and applied as a class
   on .learner-shell; every learner colour already resolves through --app-*
   tokens, so a theme is a token override — no renderer/markup changes.
   ============================================================ */

/* Atelier — warm editorial paper (the light default, gently warmed). */
.learner-shell.theme-atelier {
  --app-bg: #f4ece0;
  --app-bg-strong: rgba(244, 236, 224, 0.94);
  --app-surface-muted: #f0e6d6;
}

/* Nocturne — deep warm-black, cinematic. */
.learner-shell.theme-nocturne {
  --app-bg: #17110c;
  --app-bg-strong: rgba(23, 17, 12, 0.94);
  --app-surface: #1e1712;
  --app-surface-strong: #1e1712;
  --app-surface-soft: rgba(245, 239, 228, 0.05);
  --app-surface-muted: #221b14;
  --app-border: rgba(230, 205, 160, 0.15);
  --app-border-strong: rgba(230, 205, 160, 0.27);
  --app-text: #f5efe4;
  --app-text-strong: #f7f2e8;
  --app-text-soft: rgba(245, 239, 228, 0.66);
  --app-text-muted: rgba(245, 239, 228, 0.6);
  --app-text-faint: rgba(245, 239, 228, 0.44);
  --app-accent: #e0a89f;
  --app-accent-strong: #e9c0b8;
  --app-accent-soft: rgba(224, 168, 159, 0.14);
  --app-accent-border: rgba(224, 168, 159, 0.3);
  --app-success: #7ba98e;
  --app-success-soft: rgba(123, 169, 142, 0.16);
  --app-success-border: rgba(123, 169, 142, 0.3);
  --app-teal-tint: rgba(123, 169, 142, 0.16);
  --app-danger: #d98b93;
  --app-danger-soft: rgba(217, 139, 147, 0.15);
  --app-danger-border: rgba(217, 139, 147, 0.28);
}

/* Vista — warm espresso dark. (Phase 1: token-based; the per-course photo
   background is a later phase.) */
.learner-shell.theme-vista {
  --app-bg: #140d08;
  --app-bg-strong: rgba(20, 13, 8, 0.94);
  --app-surface: #211811;
  --app-surface-strong: #211811;
  --app-surface-soft: rgba(246, 240, 230, 0.05);
  --app-surface-muted: #281d13;
  --app-border: rgba(232, 208, 164, 0.16);
  --app-border-strong: rgba(232, 208, 164, 0.28);
  --app-text: #f6f0e6;
  --app-text-strong: #f8f2e8;
  --app-text-soft: rgba(246, 240, 230, 0.68);
  --app-text-muted: rgba(246, 240, 230, 0.62);
  --app-text-faint: rgba(246, 240, 230, 0.46);
  --app-accent: #e6b0a6;
  --app-accent-strong: #eec3ba;
  --app-accent-soft: rgba(230, 176, 166, 0.15);
  --app-accent-border: rgba(230, 176, 166, 0.3);
  --app-success: #83ab8e;
  --app-success-soft: rgba(131, 171, 142, 0.16);
  --app-success-border: rgba(131, 171, 142, 0.3);
  --app-teal-tint: rgba(131, 171, 142, 0.16);
  --app-danger: #dd9199;
  --app-danger-soft: rgba(221, 145, 153, 0.15);
  --app-danger-border: rgba(221, 145, 153, 0.28);
}

/* Themed wrapper paints its own page background and fills the viewport. */
.learner-shell.theme-atelier,
.learner-shell.theme-nocturne,
.learner-shell.theme-vista {
  background: var(--app-bg);
  min-height: 100dvh;
}

/* Dark themes: black wordmark → light; topbar reads over the dark page. */
.learner-shell.theme-nocturne .app-topbar-logo,
.learner-shell.theme-vista .app-topbar-logo {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.learner-shell.theme-nocturne .app-topbar,
.learner-shell.theme-vista .app-topbar {
  background: var(--app-bg-strong);
  border-bottom-color: var(--app-border);
}

/* (Summary is now a dark feature card on every theme — see the --rk summary
   rules below; the old dark-theme de-inversion here is obsolete and removed.) */

/* Alias re-binding: the app's alias tokens (--bg, --text, --accent, --teal…) are
   `var(--app-*)` resolved once at :root, so their baked value inherits and does NOT
   pick up a deeper --app-* override. Re-declare them on the themed shell so they
   re-resolve against the theme's --app-* values. */
.learner-shell.theme-atelier,
.learner-shell.theme-nocturne,
.learner-shell.theme-vista {
  --text: var(--app-text);
  --text-muted: var(--app-text-muted);
  --text-light: var(--app-text-faint);
  --bg: var(--app-surface-strong);
  --bg-alt: var(--app-bg);
  --rule: var(--app-border);
  --accent: var(--app-accent);
  --accent-dark: var(--app-accent-strong);
  --teal: var(--app-success);
  --teal-tint: var(--app-teal-tint);
  --warm: var(--app-panel-warm);
  --sage: var(--app-panel-sage);
  --stone: var(--app-panel-stone);
  --cream: var(--app-panel-cream);
  --cloud: var(--app-panel-cloud);
  /* Recessed choice-option surface — a subtle tint off the card so options don't
     blend into the card background (theme-aware via --app-text/--app-surface-strong). */
  --opt: color-mix(in srgb, var(--app-text) 5%, var(--app-surface-strong));
  --opt-hover: color-mix(in srgb, var(--app-text) 9%, var(--app-surface-strong));
}

/* Dark themes: warm the neutral panel tokens so any panel/callout that uses them
   doesn't punch a light hole in the dark view. */
.learner-shell.theme-nocturne,
.learner-shell.theme-vista {
  --app-panel-warm: var(--app-surface-muted);
  --app-panel-sage: var(--app-surface-muted);
  --app-panel-stone: var(--app-surface-muted);
  --app-panel-cream: var(--app-surface-muted);
  --app-panel-cloud: var(--app-surface-muted);
}

/* ============================================================
   Vista background TEXTURE presets (data-tex on the themed shell)
   Vista paints a soft radial texture as its page background; the learner
   (and, later, the creator) can swap the texture. Default = espresso.
   ============================================================ */
.learner-shell.theme-vista {
  --vista-tex: radial-gradient(120% 105% at 50% 0%, #2a1f16, #120b06 72%);
  --app-bg: var(--vista-tex);
}
.learner-shell.theme-vista[data-tex="slate"] {
  --vista-tex: radial-gradient(120% 105% at 50% 0%, #262d31, #0b0f11 72%);
}
.learner-shell.theme-vista[data-tex="linen"] {
  --vista-tex:
    repeating-linear-gradient(46deg, rgba(255, 240, 214, 0.022) 0 2px, transparent 2px 6px),
    radial-gradient(120% 105% at 50% 0%, #241c14, #100a06 72%);
}
.learner-shell.theme-vista[data-tex="ink"] {
  --vista-tex: radial-gradient(100% 78% at 50% 32%, #191411, #050302 80%);
}

/* Clay — a BRIGHT Vista texture. It carries a full light token set so cards and
   text stay legible over the warm rose-taupe background. */
.learner-shell.theme-vista[data-tex="sand"] {
  --vista-tex: radial-gradient(120% 105% at 50% 0%, #ece0da, #d3beb4 74%);
  --app-bg: var(--vista-tex);
  --app-bg-strong: rgba(228, 214, 188, 0.9);
  --app-surface: rgba(255, 252, 246, 0.9);
  --app-surface-strong: #fffdf8;
  --app-surface-soft: rgba(60, 44, 28, 0.05);
  --app-surface-muted: rgba(246, 238, 226, 0.85);
  --app-border: rgba(60, 44, 28, 0.14);
  --app-border-strong: rgba(60, 44, 28, 0.24);
  --app-text: #241c14;
  --app-text-strong: #1a130c;
  --app-text-soft: rgba(36, 28, 20, 0.72);
  --app-text-muted: rgba(36, 28, 20, 0.66);
  --app-text-faint: rgba(36, 28, 20, 0.5);
  --app-accent: #b0574e;
  --app-accent-strong: #954139;
  --app-accent-soft: rgba(176, 87, 78, 0.12);
  --app-accent-border: rgba(176, 87, 78, 0.28);
  --app-success: #5f8a6f;
  --app-success-soft: rgba(95, 138, 111, 0.14);
  --app-success-border: rgba(95, 138, 111, 0.3);
  --app-teal-tint: rgba(95, 138, 111, 0.14);
  --app-danger: #c0605f;
  --app-danger-soft: rgba(192, 96, 95, 0.14);
  --app-danger-border: rgba(192, 96, 95, 0.28);
}
/* Clay is light, so the wordmark should NOT invert and the topbar reads dark-on-light. */
.learner-shell.theme-vista[data-tex="sand"] .app-topbar-logo {
  filter: none;
  opacity: 1;
}

/* Custom Vista background — a creator-uploaded photo (--rk-bg-photo) replaces the
   texture preset. A darkening scrim keeps the dark Vista tokens legible over any
   image. Theme-scoped, so a learner switching to Atelier/Nocturne drops it. */
.learner-shell.theme-vista.has-custom-bg .learner-bg {
  background:
    linear-gradient(rgba(12, 8, 5, 0.62), rgba(14, 10, 7, 0.74)),
    var(--rk-bg-photo) center / cover no-repeat;
}

/* Over a photo, the card's translucency (tuned for the subtle texture background)
   lets busy/high-contrast imagery punch through and fight the text — so make the
   card surface far more opaque when a photo is behind it. The texture case keeps
   its lighter float. Only the dark token set applies here (a photo drops data-tex,
   so the Clay/sand light variant never matches). */
.learner-shell.theme-vista.has-custom-bg {
  --rk-card: rgba(23, 17, 12, 0.9);
  --rk-card-2: rgba(34, 26, 19, 0.93);
}

/* When the course has a photo background the switcher offers it as the first
   "photo" swatch alongside the textures — the learner can always override the
   photo with a flat texture and switch back, so the row stays visible (picking
   a texture drops `has-custom-bg`, which cleanly replaces the photo). */

/* ============================================================
   Learner theme switcher (topbar) — icon-expand theme + texture picker
   ============================================================ */
.theme-switch {
  position: relative;
}
.theme-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  appearance: none;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  background: color-mix(in srgb, currentColor 6%, transparent);
  color: var(--app-text-soft);
  border-radius: var(--app-radius-pill);
  padding: 0.28rem 0.5rem 0.28rem 0.34rem;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.theme-switch__toggle:hover {
  background: color-mix(in srgb, currentColor 13%, transparent);
}
.theme-switch__cur {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.22);
}
.theme-switch__caret {
  width: 13px;
  height: 13px;
  opacity: 0.6;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-switch__toggle[aria-expanded="true"] .theme-switch__caret {
  transform: rotate(180deg);
}
.theme-switch__menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  min-width: 176px;
  background: var(--app-surface-strong);
  color: var(--app-text);
  border: 1px solid var(--app-border);
  border-radius: 14px;
  box-shadow: var(--app-shadow);
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 60;
}
.theme-switch.open .theme-switch__menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.theme-switch__head {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--app-text-faint);
  padding: 0.375rem 0.7rem 0.25rem;
  margin: 0;
}
.theme-switch__opt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  color: var(--app-text);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.18s;
}
.theme-switch__opt:hover,
.theme-switch__opt[aria-checked="true"] {
  background: var(--app-surface-muted);
}
.theme-switch__opt[aria-checked="true"] {
  font-weight: 600;
}
.theme-switch__sw {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}
.theme-switch__opt[aria-checked="true"] .theme-switch__sw {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 0 0 2px var(--app-accent);
}
.theme-switch__lab {
  flex: 1;
}
.theme-switch__tick {
  width: 15px;
  height: 15px;
  opacity: 0;
  color: var(--app-accent-strong);
  transition: opacity 0.18s;
}
.theme-switch__opt[aria-checked="true"] .theme-switch__tick {
  opacity: 1;
}
/* Theme swatches */
.theme-switch .sw-atelier {
  background: linear-gradient(135deg, #fdfbf4, #e0ccab);
}
.theme-switch .sw-nocturne {
  background: linear-gradient(135deg, #2c2119, #0c0806);
}
.theme-switch .sw-vista {
  background: linear-gradient(135deg, #835838, #160e08);
}
/* Vista texture row — only shown when Vista is the active theme */
.theme-switch__tex {
  display: none;
  border-top: 1px solid var(--app-border);
  margin-top: 5px;
  padding-top: 5px;
}
.learner-shell.theme-vista .theme-switch__tex {
  display: block;
}
.theme-switch__tex-row {
  display: flex;
  gap: 8px;
  padding: 2px 0.7rem 6px;
}
.theme-switch__sw2 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--app-border-strong);
  cursor: pointer;
  padding: 0;
  transition: box-shadow 0.2s, transform 0.2s;
}
.theme-switch__sw2:hover {
  transform: translateY(-1px);
}
.theme-switch__sw2[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--app-accent);
  border-color: transparent;
}
.theme-switch .sw-espresso {
  background: radial-gradient(120% 105% at 50% 0%, #2a1f16, #120b06);
}
.theme-switch .sw-slate {
  background: radial-gradient(120% 105% at 50% 0%, #262d31, #0b0f11);
}
.theme-switch .sw-linen {
  background: repeating-linear-gradient(46deg, rgba(255, 240, 214, 0.09) 0 2px, transparent 2px 5px),
    radial-gradient(120% 105% at 50% 0%, #241c14, #100a06);
}
.theme-switch .sw-ink {
  background: radial-gradient(100% 78% at 50% 32%, #191411, #050302);
}
.theme-switch .sw-sand {
  background: radial-gradient(120% 105% at 50% 0%, #ece0da, #d3beb4);
}
/* The course's own photo, shown as a live thumbnail (background-image set inline
   from the resolved URL). A faint inset ring keeps it reading as a swatch. */
.theme-switch .sw-photo {
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}
.theme-switch .sw-photo[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--app-accent), inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .theme-switch__menu,
  .theme-switch__caret {
    transition: none;
  }
}

/* ============================================================
   Living background layer + card-frame parity (mock fidelity)
   A fixed page gradient + slowly drifting glow + fine grain behind the runner so
   the page reads "alive", not a flat fill. The shell is a stacking context; the
   layer sits at z-index 0 with the content lifted above it.
   ============================================================ */
.learner-shell {
  isolation: isolate;
}
.learner-shell .learner-app-content {
  position: relative;
  z-index: 1;
}

/* Per-theme living-background + card-shadow tokens (values tuned in the mock). */
.learner-shell.theme-atelier {
  --learner-page: radial-gradient(150% 132% at 50% -18%, #fdfbf4 0%, #f0e6cf 40%, #dac09a 100%);
  --learner-glow:
    radial-gradient(70% 60% at 10% -4%, rgba(255, 250, 236, 0.9), rgba(255, 250, 236, 0) 56%),
    radial-gradient(62% 56% at 76% 82%, rgba(192, 134, 70, 0.32), rgba(192, 134, 70, 0) 62%),
    radial-gradient(84% 80% at 94% 104%, rgba(118, 74, 34, 0.5), rgba(118, 74, 34, 0) 60%),
    radial-gradient(58% 52% at 99% 0%, rgba(200, 92, 78, 0.36), rgba(200, 92, 78, 0) 58%);
  --learner-grain-op: 0.06;
  --learner-grain-blend: multiply;
  --learner-card-shadow: 0 1px 2px rgba(48, 32, 20, 0.05), 0 32px 62px -38px rgba(70, 46, 28, 0.34);
}
.learner-shell.theme-nocturne {
  --learner-page: radial-gradient(128% 98% at 50% -6%, #241b15 0%, #17110c 54%, #0c0806 100%);
  --learner-glow:
    radial-gradient(52% 42% at 26% 20%, rgba(196, 113, 106, 0.18), transparent 62%),
    radial-gradient(48% 44% at 80% 76%, rgba(184, 150, 104, 0.13), transparent 60%);
  --learner-grain-op: 0.07;
  --learner-grain-blend: screen;
  --learner-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.44), 0 36px 72px -42px rgba(0, 0, 0, 0.72);
}
.learner-shell.theme-vista {
  --learner-page: var(--vista-tex);
  --learner-glow: radial-gradient(62% 46% at 50% 8%, rgba(196, 113, 106, 0.16), transparent 62%);
  --learner-grain-op: 0.06;
  --learner-grain-blend: screen;
  --learner-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 44px 80px -46px rgba(0, 0, 0, 0.82);
}
.learner-shell.theme-vista[data-tex="sand"] {
  --learner-glow: radial-gradient(62% 46% at 50% 4%, rgba(196, 113, 106, 0.12), transparent 60%);
  --learner-grain-op: 0.05;
  --learner-grain-blend: multiply;
  --learner-card-shadow: 0 1px 3px rgba(60, 44, 28, 0.08), 0 34px 66px -40px rgba(90, 60, 34, 0.34);
}

.learner-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--learner-page, var(--app-bg));
  transition: background 0.8s ease;
}
.learner-bg__glow {
  position: absolute;
  inset: -32%;
  background: var(--learner-glow);
  will-change: transform;
  transform-origin: center;
  animation: learner-glowdrift 9s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}
.learner-bg__grain {
  position: absolute;
  inset: 0;
  opacity: var(--learner-grain-op, 0.06);
  mix-blend-mode: var(--learner-grain-blend, multiply);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes learner-glowdrift {
  0% {
    transform: translate3d(-5.5%, -4%, 0) scale(1.01) rotate(-2deg);
  }
  100% {
    transform: translate3d(6%, 5%, 0) scale(1.12) rotate(2.5deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .learner-bg__glow {
    animation: none;
  }
}

/* Card-frame parity: softer 22px radius + a deeper, warmer, theme-aware lift. */
.learner-shell .learner-card.module-editor-card {
  border-radius: 22px;
  box-shadow: var(--learner-card-shadow, 0 1px 2px rgba(28, 28, 26, 0.05), 0 30px 60px -38px rgba(40, 28, 16, 0.3));
}

/* ============================================================
   Runner presentation — mock-faithful chrome (topbar, card frame, nav-in-card)
   ============================================================ */

/* Transparent topbar over the living background (replaces the frosted app bar
   for the learner runner only). */
.learner-shell .app-topbar.runner-topbar {
  position: fixed;
  height: auto;
  padding: 1.15rem 0;
  background: none;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--app-text-soft);
}
.runner-topbar__inner {
  gap: 1.4rem;
}
.runner-topbar .app-topbar-logo {
  height: 19px;
  width: auto;
}
.runner-topbar__title {
  display: inline-flex;
  align-items: center;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--app-text-soft);
  white-space: nowrap;
  opacity: 0.92;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.runner-topbar__title::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 15px;
  background: currentColor;
  opacity: 0.24;
  margin-right: 1.15rem;
  flex: none;
}
.runner-topbar__prog {
  flex: 0 1 380px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.runner-topbar__seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.16;
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0.5s ease, box-shadow 0.5s ease;
}
.runner-topbar__seg.on {
  opacity: 1;
  background: var(--app-accent);
}
.runner-topbar__seg.now {
  box-shadow: 0 0 7px -1px var(--app-accent);
}
.runner-topbar__actions {
  gap: 0.95rem;
}
.runner-topbar__count {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--app-text-faint);
  white-space: nowrap;
  min-width: 62px;
  text-align: right;
}
.runner-topbar__exit {
  align-items: center;
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: var(--app-radius-pill);
  color: var(--app-text);
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 650;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.45rem 0.8rem 0.45rem 0.65rem;
  text-decoration: none;
  transition:
    background-color 0.2s cubic-bezier(0.2, 0, 0, 1),
    border-color 0.2s cubic-bezier(0.2, 0, 0, 1),
    color 0.2s cubic-bezier(0.2, 0, 0, 1);
  white-space: nowrap;
}

.runner-topbar__exit svg {
  flex: none;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.runner-topbar__exit:hover {
  background: color-mix(in srgb, currentColor 15%, transparent);
  border-color: color-mix(in srgb, currentColor 36%, transparent);
}

.runner-topbar__exit:hover svg {
  transform: translateX(-2px);
}

@media (max-width: 760px) {
  .runner-topbar__title,
  .runner-topbar__prog {
    display: none;
  }

  .runner-topbar__actions:has(.runner-topbar__exit) .runner-topbar__count {
    display: none;
  }
}

/* Card inner column + eyebrow + serif lead (mock qcard chrome). */
.learner-card__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.learner-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--app-accent);
}
.learner-card__mark {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  flex: none;
  background: currentColor;
  -webkit-mask: url("/assets/brand/logo-mark-white-34a174ff.svg") center / contain no-repeat;
  mask: url("/assets/brand/logo-mark-white-34a174ff.svg") center / contain no-repeat;
}
.learner-card__title {
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}
.learner-card__title em {
  font-style: normal;
  font-weight: 600;
}
.learner-card__lead {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.44;
  color: var(--app-text);
  max-width: 56ch;
}
.learner-card__lead[hidden] {
  display: none;
}
.learner-card__lead em {
  font-style: normal;
  font-weight: 600;
  color: var(--app-accent-strong);
}
.learner-card__body {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--app-text-soft);
  max-width: 62ch;
}
.learner-card__body[hidden] {
  display: none;
}
.learner-card__body p {
  margin-top: 0.9rem;
}
.learner-card__body p:first-child {
  margin-top: 0;
}
.learner-card__body b,
.learner-card__body strong {
  color: var(--app-text);
  font-weight: 600;
}

/* Nav lives inside the card footer (Back / Continue). */
.learner-card__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
.learner-card__actions-spacer {
  flex: 1;
}
.learner-card__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.2rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--app-text-soft);
  transition: color 0.2s ease, opacity 0.2s ease;
}
.learner-card__back:hover {
  color: var(--app-text);
}
.learner-card__back:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ============================================================
   Intro hero — full-bleed split screen (image left, dark panel right)
   ============================================================ */
.runner-splash.runner-hero {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  max-width: none;
  min-height: 0;
  max-height: none;
  text-align: left;
}
.runner-hero__media {
  position: relative;
  overflow: hidden;
  background: #16100b;
}
.runner-hero__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.84) contrast(1.05) brightness(0.84) sepia(0.12);
}
.runner-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 15, 10, 0.24), transparent 42%);
}
.runner-hero__warm {
  position: absolute;
  inset: 0;
  mix-blend-mode: soft-light;
  background: radial-gradient(70% 60% at 46% 40%, rgba(196, 113, 106, 0.42), transparent 60%);
  pointer-events: none;
}
.runner-hero__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 9vh clamp(2rem, 5vw, 4rem);
  background: radial-gradient(122% 92% at 66% 16%, #2c2018 0%, #1b120c 72%);
  color: #f6efe2;
  overflow-y: auto;
}
.runner-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e9c0b8;
}
.runner-hero__eyebrow .learner-card__mark {
  background: currentColor;
}
.runner-hero__title {
  margin: 1.1rem 0 0;
  max-width: 13ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #f6efe2;
}
.runner-hero__title em {
  font-style: normal;
  font-weight: 600;
}
.runner-hero__desc {
  margin: 1.6rem 0 0;
  max-width: 42ch;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.72;
  color: rgba(246, 239, 226, 0.76);
}
.runner-hero__desc b,
.runner-hero__desc strong {
  color: #f6efe2;
  font-weight: 600;
}
.runner-hero__stats {
  display: flex;
  margin-top: 1.9rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(184, 150, 104, 0.32);
  max-width: 27rem;
}
.runner-hero__stat {
  padding-right: 1.9rem;
  margin-right: 1.9rem;
  border-right: 1px solid rgba(184, 150, 104, 0.32);
}
.runner-hero__stat:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}
.runner-hero__stat-v {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
  color: #f6efe2;
}
.runner-hero__stat-v small {
  font-size: 0.46em;
  margin-left: 0.1em;
}
.runner-hero__stat-k {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 239, 226, 0.52);
}
.runner-hero__start {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.4rem;
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: var(--app-radius-pill);
  cursor: pointer;
  background: #f5f2e8;
  color: #1c1c1a;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.runner-hero__start:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.6);
}
.runner-hero__start svg {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.runner-hero__start:hover svg {
  transform: translateX(4px);
}

/* Cover mode — the topbar reads light over the dark hero, whatever the theme. */
.learner-shell.runner--cover .runner-topbar {
  color: rgba(246, 239, 226, 0.92);
}
.learner-shell.runner--cover .runner-topbar__title {
  color: rgba(246, 239, 226, 0.86);
}
.learner-shell.runner--cover .runner-topbar__count {
  color: rgba(246, 239, 226, 0.6);
}
.learner-shell.runner--cover .runner-topbar__exit {
  color: rgba(246, 239, 226, 0.96);
}
.learner-shell.runner--cover .theme-switch__toggle {
  color: rgba(246, 239, 226, 0.86);
}
.learner-shell.runner--cover .app-topbar-logo {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

@media (max-width: 820px) {
  .runner-splash.runner-hero {
    grid-template-columns: 1fr;
    grid-template-rows: 34vh 1fr;
  }
  .runner-hero__panel {
    padding: 2.4rem 1.5rem 3rem;
  }
  .runner-hero__title {
    max-width: none;
  }
}

/* ============================================================
   RUNNER — exact mock design tokens (pixel-parity with the mockup)
   The learner runner uses the mockup's own token values verbatim (not the
   app's --app-* remapping) so every surface, colour and shadow matches 1:1.
   ============================================================ */
.learner-shell {
  --rk-serif: "Cormorant Garamond", Georgia, serif;
  --rk-sans: "Open Sans", system-ui, sans-serif;
  --rk-forest: #3d6b56;
  --rk-gold: #b89668;
  --rk-gold-deep: #9c7c4e;
  --rk-r-card: 22px;
  --rk-r-pill: 999px;
  --rk-power3: cubic-bezier(0.215, 0.61, 0.355, 1);
  --rk-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --rk-hov: cubic-bezier(0.2, 0, 0, 1);
}
.learner-shell.theme-atelier {
  --rk-card: #fffdf9;
  --rk-card-2: #faf4ea;
  --rk-opt: color-mix(in srgb, #f4ece0, #fffdf9);
  --rk-opt-hover: #fffefb;
  --rk-ink: #1c1c1a;
  --rk-ink-soft: #6b6b62;
  --rk-ink-faint: #8f8b82;
  --rk-hairline: rgba(28, 24, 18, 0.1);
  --rk-hairline-strong: rgba(28, 24, 18, 0.17);
  --rk-accent: #c4716a;
  --rk-accent-strong: #a85850;
  --rk-accent-soft: rgba(196, 113, 106, 0.1);
  --rk-card-shadow: 0 1px 2px rgba(48, 32, 20, 0.05), 0 32px 62px -38px rgba(70, 46, 28, 0.34);
  --rk-gold-line: rgba(184, 150, 104, 0.55);
  --rk-page-solid: #ecdfc8;
  --rk-hover-shadow: 0 16px 34px -18px rgba(120, 74, 40, 0.42), 0 2px 6px -3px rgba(120, 74, 40, 0.22);
  --rk-end-label: var(--rk-gold-deep);
}
.learner-shell.theme-nocturne {
  --rk-card: #1e1712;
  --rk-card-2: #251d16;
  --rk-opt: color-mix(in srgb, #261e16, #1e1712);
  --rk-opt-hover: #31261a;
  --rk-ink: #f5efe4;
  --rk-ink-soft: rgba(245, 239, 228, 0.66);
  --rk-ink-faint: rgba(245, 239, 228, 0.42);
  --rk-hairline: rgba(230, 205, 160, 0.15);
  --rk-hairline-strong: rgba(230, 205, 160, 0.27);
  --rk-accent: #e0a89f;
  --rk-accent-strong: #e9c0b8;
  --rk-accent-soft: rgba(224, 168, 159, 0.12);
  --rk-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.44), 0 36px 72px -42px rgba(0, 0, 0, 0.72);
  --rk-gold-line: rgba(184, 150, 104, 0.5);
  --rk-page-solid: #12100c;
  --rk-hover-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.66), 0 2px 6px -3px rgba(0, 0, 0, 0.5);
  --rk-end-label: #d9b988;
}
.learner-shell.theme-vista {
  --rk-card: rgba(23, 17, 12, 0.52);
  --rk-card-2: rgba(34, 26, 19, 0.66);
  --rk-opt: color-mix(in srgb, rgba(44, 34, 23, 0.5), rgba(23, 17, 12, 0.6));
  --rk-opt-hover: rgba(58, 46, 31, 0.62);
  --rk-ink: #f6f0e6;
  --rk-ink-soft: rgba(246, 240, 230, 0.74);
  --rk-ink-faint: rgba(246, 240, 230, 0.5);
  --rk-hairline: rgba(232, 208, 164, 0.2);
  --rk-hairline-strong: rgba(232, 208, 164, 0.32);
  --rk-accent: #e6b0a6;
  --rk-accent-strong: #eec3ba;
  --rk-accent-soft: rgba(230, 176, 166, 0.16);
  --rk-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 44px 80px -46px rgba(0, 0, 0, 0.82);
  --rk-gold-line: rgba(200, 168, 110, 0.5);
  --rk-page-solid: #0e0a07;
  --rk-hover-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7), 0 2px 6px -3px rgba(0, 0, 0, 0.55);
  --rk-end-label: #dcbf92;
}
.learner-shell.theme-vista[data-tex="sand"] {
  --rk-card: rgba(255, 252, 246, 0.62);
  --rk-card-2: rgba(255, 253, 248, 0.8);
  --rk-opt: rgba(246, 238, 226, 0.55);
  --rk-opt-hover: rgba(255, 254, 250, 0.82);
  --rk-ink: #241c14;
  --rk-ink-soft: rgba(36, 28, 20, 0.72);
  --rk-ink-faint: rgba(36, 28, 20, 0.5);
  --rk-hairline: rgba(60, 44, 28, 0.14);
  --rk-hairline-strong: rgba(60, 44, 28, 0.24);
  --rk-accent: #b0574e;
  --rk-accent-strong: #954139;
  --rk-accent-soft: rgba(176, 87, 78, 0.12);
  --rk-page-solid: #dbc8bf;
  --rk-hover-shadow: 0 16px 34px -18px rgba(120, 74, 40, 0.34), 0 2px 6px -3px rgba(120, 74, 40, 0.2);
}

/* ============================================================
   RUNNER — exact mock card + choices + typography (pixel-parity)
   ============================================================ */
/* Card frame = mock .qcard (no padding on the card; the inner + media handle it) */
.learner-shell .learner-card.module-editor-card {
  background: var(--rk-card);
  border: 1px solid var(--rk-hairline);
  border-radius: var(--rk-r-card);
  box-shadow: var(--rk-card-shadow);
  overflow: hidden;
  padding: 0;
  gap: 0;
  max-width: 864px;
  margin: 0 auto;
  width: 100%;
}
.learner-shell .learner-card__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 42px 54px 46px;
}
/* Full-bleed image band (mock .cph 16/6.2) */
.learner-shell .learner-card__media {
  margin: 0;
  aspect-ratio: 16 / 6.2;
}
.learner-shell .learner-card__media:not([hidden]) + .learner-card__inner {
  padding-top: 34px;
}
.learner-shell .learner-card__media-img {
  filter: saturate(0.9) contrast(1.02) brightness(0.98) sepia(0.1);
}
.learner-shell .learner-card__media::after {
  mix-blend-mode: multiply;
  background: linear-gradient(200deg, rgba(196, 113, 106, 0.12), rgba(28, 28, 26, 0.12));
}

/* Eyebrow (mock .eyebrow) */
.learner-shell .learner-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--rk-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rk-accent-strong);
}
.learner-shell .learner-card__mark { width: 1em; height: 1em; }

/* Title (mock .qcard .title) */
.learner-shell .learner-card__title {
  font-family: var(--rk-serif);
  font-weight: 300;
  font-size: clamp(30px, 3vw, 35px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--rk-ink);
  margin: 12px 0 0;
}
.learner-shell .learner-card__title em { font-style: normal; font-weight: 600; }

/* Serif lead (mock .clead) */
.learner-shell .learner-card__lead {
  font-family: var(--rk-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.42;
  color: var(--rk-ink);
  margin: 16px 0 0;
  max-width: 58ch;
}
.learner-shell .learner-card__lead[hidden] { display: none; }
.learner-shell .learner-card__lead em { font-style: normal; font-weight: 600; color: var(--rk-accent-strong); }

/* Prose (mock .cprose) */
.learner-shell .learner-card__body {
  font-family: var(--rk-sans);
  font-size: 16px;
  line-height: 1.72;
  color: var(--rk-ink-soft);
  margin: 16px 0 0;
  max-width: 62ch;
}
.learner-shell .learner-card__body[hidden] { display: none; }
.learner-shell .learner-card__body p { margin-top: 14px; }
.learner-shell .learner-card__body p:first-child { margin-top: 0; }
.learner-shell .learner-card__body b,
.learner-shell .learner-card__body strong { color: var(--rk-ink); font-weight: 600; }

/* Choices (mock .choices / .choice) */
.learner-shell .learner-card__choices.module-quiz {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 26px;
  background: none;
  padding: 0;
  border-radius: 0;
}
.learner-shell .learner-choice.module-quiz-opt {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--rk-hairline);
  border-radius: 15px;
  padding: 16px 20px 16px 16px;
  margin: 0;
  background: var(--rk-opt);
  font-family: var(--rk-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--rk-ink);
  cursor: pointer;
  text-align: left;
  position: relative;
  box-shadow: none;
  transition: transform 0.35s var(--rk-power3), box-shadow 0.35s var(--rk-power3),
    border-color 0.25s var(--rk-hov), background-color 0.25s var(--rk-hov);
}
.learner-shell .learner-choice__key {
  flex: none;
  width: 32px;
  height: 32px;
  margin-top: -1px;
  border-radius: 50%;
  border: 1px solid var(--rk-hairline-strong);
  display: grid;
  place-items: center;
  font-family: var(--rk-serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  color: var(--rk-accent-strong);
  transition: background-color 0.25s var(--rk-hov), color 0.25s var(--rk-hov),
    border-color 0.25s var(--rk-hov), transform 0.3s var(--rk-expo);
}
.learner-shell .learner-choice__body { flex: 1; min-width: 0; padding-top: 5px; }
.learner-shell .learner-choice__title { display: block; }
.learner-shell .learner-choice__outcome {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-family: var(--rk-sans);
  font-size: 13.5px;
  color: var(--rk-ink-soft);
  line-height: 1.56;
  max-width: 58ch;
  margin-top: 0;
  transition: max-height 0.55s var(--rk-power3), opacity 0.4s 0.12s, margin-top 0.55s var(--rk-power3);
}
.learner-shell .learner-choice.module-quiz-opt:not(:disabled):not(.is-selected):not(.is-correct):not(.is-incorrect):hover {
  transform: translateY(-2px);
  box-shadow: var(--rk-hover-shadow);
  border-color: var(--rk-accent);
  background: var(--rk-opt-hover);
}
.learner-shell .learner-choice.module-quiz-opt:not(:disabled):not(.is-selected):not(.is-correct):not(.is-incorrect):hover .learner-choice__key {
  background: var(--rk-accent);
  color: #fff;
  border-color: var(--rk-accent);
  transform: scale(1.06);
}
.learner-shell .learner-choice.module-quiz-opt:focus-visible { outline: 2px solid var(--rk-accent); outline-offset: 2px; }
.learner-shell .learner-choice.module-quiz-opt.is-selected {
  border-color: var(--rk-ink);
  background: var(--rk-opt-hover);
  transform: none;
  box-shadow: none;
}
.learner-shell .learner-choice.module-quiz-opt.is-selected .learner-choice__key {
  background: var(--rk-ink);
  color: var(--rk-page-solid);
  border-color: var(--rk-ink);
}
.learner-shell .learner-choice.module-quiz-opt:disabled { cursor: default; }
.learner-shell .learner-choice.module-quiz-opt:disabled:not(.is-correct):not(.is-selected):not(.is-incorrect) { opacity: 0.42; }
.learner-shell .learner-choice.module-quiz-opt.is-correct {
  border-color: color-mix(in srgb, var(--rk-forest) 52%, transparent);
  background: color-mix(in srgb, var(--rk-forest) 13%, var(--rk-card));
  box-shadow: inset 3px 0 0 var(--rk-forest), 0 14px 32px -20px color-mix(in srgb, var(--rk-forest) 60%, transparent);
  color: var(--rk-ink);
}
.learner-shell .learner-choice.module-quiz-opt.is-correct .learner-choice__key {
  background: var(--rk-forest);
  color: #fff;
  border-color: var(--rk-forest);
}
.learner-shell .learner-choice.is-correct .learner-choice__outcome { max-height: 240px; opacity: 1; margin-top: 9px; }
.learner-shell .learner-choice.is-correct .learner-choice__outcome::before {
  content: "Why";
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--rk-forest);
  margin-bottom: 5px;
}
.learner-shell .learner-choice.module-quiz-opt.is-incorrect {
  border-color: var(--rk-accent);
  background: var(--rk-accent-soft);
  box-shadow: inset 3px 0 0 var(--rk-accent);
  color: var(--rk-ink);
  animation: rk-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.learner-shell .learner-choice.module-quiz-opt.is-incorrect .learner-choice__key {
  background: var(--rk-accent);
  color: #fff;
  border-color: var(--rk-accent);
}
.learner-shell .learner-choice.is-incorrect .learner-choice__outcome { max-height: 240px; opacity: 1; margin-top: 9px; }
.learner-shell .learner-choice.is-incorrect .learner-choice__outcome::before {
  content: "Why";
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--rk-accent);
  margin-bottom: 5px;
}
@keyframes rk-shake {
  0% { transform: translateX(0); }
  12% { transform: translateX(-8px); }
  24% { transform: translateX(7px); }
  38% { transform: translateX(-5px); }
  52% { transform: translateX(4px); }
  66% { transform: translateX(-2px); }
  80% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}
.learner-shell .learner-choice__tick {
  margin-left: auto;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  align-self: center;
  opacity: 0;
  color: var(--rk-forest);
  transition: opacity 0.3s 0.12s;
}
.learner-shell .learner-choice__tick path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 0.55s 0.3s var(--rk-power3); }
.learner-shell .learner-choice.is-correct .learner-choice__tick { opacity: 1; }
.learner-shell .learner-choice.is-correct .learner-choice__tick path { stroke-dashoffset: 0; }

/* ============================================================
   RUNNER — staggered content reveal (mock .r) + exact nav footer
   ============================================================ */
/* Replace the card-scale enter with the mock's per-element rise reveal. */
.learner-shell .learner-card.module-editor-card.is-entering { animation: none; }
.learner-shell .learner-card .module-num.is-entering,
.learner-shell .learner-card .module-title.is-entering { animation: none; }

@keyframes rk-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes rk-fade-feedback {
  from { opacity: 0.72; }
  to { opacity: 1; }
}
.learner-shell .learner-card.is-entering .learner-card__media,
.learner-shell .learner-card.is-entering .learner-card__inner > * {
  animation: rk-rise 0.8s var(--rk-power3) both;
}
.learner-shell .learner-card.is-entering .learner-card__media { animation-delay: 0s; }
.learner-shell .learner-card.is-entering .learner-card__eyebrow { animation-delay: 0.08s; }
.learner-shell .learner-card.is-entering .learner-card__title { animation-delay: 0.15s; }
.learner-shell .learner-card.is-entering .learner-card__lead { animation-delay: 0.22s; }
.learner-shell .learner-card.is-entering .learner-card__body { animation-delay: 0.3s; }
.learner-shell .learner-card.is-entering .learner-card__choices { animation-delay: 0.25s; }
.learner-shell .learner-card.is-entering .learner-card__actions { animation-delay: 0.4s; }

/* Nav footer = mock .actions (ghost Back + dark Continue). */
.learner-shell .learner-card__actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 42px;
}
.learner-shell .learner-card__back {
  padding: 0;
  font-family: var(--rk-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--rk-ink-soft);
  transition: color 0.25s ease, opacity 0.25s ease;
}
.learner-shell .learner-card__back:hover { color: var(--rk-ink); }
.learner-shell .learner-card__back:disabled { opacity: 0.32; }
.learner-shell .learner-card__next.btn-pill {
  background: var(--rk-ink);
  color: var(--rk-page-solid);
  border: 0;
  border-radius: var(--rk-r-pill);
  padding: 15px 30px;
  font-family: var(--rk-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.5s var(--rk-expo), opacity 0.3s ease, background 0.3s ease;
}
.learner-shell .learner-card__next.btn-pill:hover { transform: translateY(-2px); }
.learner-shell .learner-card__next.btn-pill:disabled { opacity: 0.32; transform: none; }
.learner-shell .learner-card__next.btn-pill svg { transition: transform 0.4s var(--rk-expo); }
.learner-shell .learner-card__next.btn-pill:hover svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .learner-shell .learner-choice.module-quiz-opt.is-feedback-correct,
  .learner-shell .learner-choice.module-quiz-opt.is-feedback-wrong,
  .learner-shell .learner-choice.module-quiz-opt.is-incorrect,
  .learner-shell .learner-card.is-entering .learner-card__media,
  .learner-shell .learner-card.is-entering .learner-card__inner > * {
    animation: rk-fade-feedback 160ms linear both;
  }
}

/* Per-type image band aspect (mock: content .cph 16/6.2, quiz .qph 24/7). */
.learner-shell .learner-card[data-card-type="quiz"] .learner-card__media {
  aspect-ratio: 24 / 7;
}
.learner-shell .learner-card[data-card-type="quiz"] .learner-card__media-img {
  filter: saturate(0.94) contrast(1.03);
}

/* ============================================================
   RUNNER — end/result card, exact mock #s-end (round gold seal + stats + revisit)
   ============================================================ */
.learner-shell .learner-result.completion { padding-top: 84px; padding-bottom: 60px; }
.learner-shell .completion__hero { gap: 0; max-width: 648px; }
/* Round seal with a conic gold ring + forest check badge (mock .seal) */
.learner-shell .completion__seal {
  aspect-ratio: auto;
  width: 110px;
  height: 110px;
  padding: 5px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--rk-gold-deep), #e8d3a6 25%, var(--rk-gold) 50%, #e8d3a6 72%, var(--rk-gold-deep));
  box-shadow: 0 12px 28px -14px rgba(60, 40, 18, 0.55);
}
.learner-shell .completion__seal-img {
  border-radius: 50%;
  box-shadow: none;
}
.learner-shell .completion__seal-check {
  width: 34px;
  height: 34px;
  right: -3px;
  bottom: -3px;
  background: var(--rk-forest);
  border: 3px solid var(--rk-page-solid);
  box-shadow: 0 5px 12px -4px rgba(0, 0, 0, 0.45);
}
.learner-shell .completion__seal-check svg { width: 15px; height: 15px; }
.learner-shell .completion__title {
  font-family: var(--rk-serif);
  font-weight: 300;
  font-size: clamp(38px, 5.2vw, 54px);
  color: var(--rk-ink);
  letter-spacing: -0.015em;
  margin: 14px 0 0;
}
.learner-shell .completion__lede {
  font-family: var(--rk-sans);
  font-size: 16px;
  color: var(--rk-ink-soft);
  line-height: 1.62;
  max-width: 46ch;
  margin: 16px auto 0;
}
/* Stats (mock .acc) */
.learner-shell .completion__stats {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0;
  margin-top: 30px;
}
.learner-shell .completion__stat {
  flex-direction: column;
  gap: 0;
  padding: 0 30px;
  border-right: 1px solid var(--rk-hairline);
  min-width: 0;
}
.learner-shell .completion__stat:last-child { border-right: 0; }
.learner-shell .completion__stat-div { display: none; }
.learner-shell .completion__stat-value {
  font-family: var(--rk-serif);
  font-weight: 400;
  font-size: 38px;
  color: var(--rk-ink);
  line-height: 1;
}
.learner-shell .completion__stat-value em { color: var(--rk-end-label); font-weight: 600; font-style: normal; }
.learner-shell .completion__stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rk-ink-faint);
  margin-top: 9px;
}
.learner-shell .completion__note { font-size: 12.5px; color: var(--rk-ink-faint); margin-top: 24px; letter-spacing: 0.02em; }
.learner-shell .completion__actions { justify-content: center; gap: 18px; margin-top: 20px; }
.learner-shell .completion__actions .btn-pill {
  background: var(--rk-ink);
  color: var(--rk-page-solid);
  border-radius: var(--rk-r-pill);
  padding: 15px 30px;
  font-family: var(--rk-sans);
  font-size: 14px;
  font-weight: 600;
}
/* Revisit list (mock .revisit / .rv-*) */
.learner-shell .completion__review { max-width: 532px; margin: 28px auto 0; text-align: left; }
.learner-shell .completion__review .app-eyebrow,
.learner-shell .completion__review [data-learner-runner-target="previewReviewEyebrow"] {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rk-accent-strong);
}
.learner-shell .completion__review h2 {
  font-family: var(--rk-serif); font-weight: 500; font-size: 23px; color: var(--rk-ink); margin: 3px 0 12px; line-height: 1.1;
}
.learner-shell .result-review-list {
  display: flex;
  flex-direction: column;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  list-style: none;
}
.learner-shell .result-review-item {
  display: flex; align-items: center; gap: 15px; padding: 14px 2px; border-top: 1px solid var(--rk-hairline);
  border-bottom: 0;
  grid-template-columns: none;
}
.learner-shell .result-review-item:last-child { border-bottom: 1px solid var(--rk-hairline); }
.learner-shell .result-review-item__icon {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--rk-hairline-strong); display: grid; place-items: center; color: var(--rk-accent-strong);
}
.learner-shell .result-review-item__icon svg { width: 15px; height: 15px; }
.learner-shell .result-review-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.learner-shell .result-review-item__module { font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rk-ink-faint); }
.learner-shell .result-review-item__check { font-size: 15px; color: var(--rk-ink); line-height: 1.36; }
.learner-shell .result-review-item__tag {
  flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rk-accent-strong); background: var(--rk-accent-soft); border-radius: 999px; padding: 5px 12px;
}

/* ============================================================
   RUNNER — module checkpoint (between-modules milestone medallion)
   Not in the mock: a new screen designed as a lighter cousin of the end
   seal (waypoint, not destination) on the pre-amble's card chrome, so the
   between-content rhythm holds and every --rk token stays coherent.
   ============================================================ */
.learner-shell .learner-module-complete {
  max-width: 600px;
  margin: 0 auto;
  padding: 56px 56px 48px;
  background: var(--rk-card);
  border: 1px solid var(--rk-hairline);
  border-radius: var(--rk-r-card);
  box-shadow: var(--rk-card-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Checkpoint seal — thin gold ring + gap + forest check disc.
   Deliberately smaller/thinner than the end-card's conic-gold seal. */
.learner-module-complete__seal {
  width: 84px;
  height: 84px;
  padding: 6px;
  border-radius: 50%;
  border: 1px solid var(--rk-gold-line);
  display: grid;
  place-items: center;
}
.learner-module-complete__seal-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--rk-forest);
  color: #f4eede;
  box-shadow: 0 10px 22px -12px rgba(30, 46, 34, 0.6);
}
.learner-module-complete__seal-disc svg { width: 34px; height: 34px; }

.learner-module-complete__eyebrow {
  margin-top: 22px;
  font-family: var(--rk-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rk-gold-deep);
}
.learner-module-complete__title {
  margin: 10px 0 0;
  font-family: var(--rk-serif);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--rk-ink);
}
.learner-module-complete__subtitle {
  margin: 14px 0 0;
  font-family: var(--rk-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--rk-ink-soft);
  max-width: 40ch;
}

/* Journey rail — one node per module, filled up to the just-completed one.
   Decorative; the eyebrow carries the semantic "Module N of M". */
.learner-module-complete__rail {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
}
.learner-module-complete__rail[hidden] { display: none; }
.learner-module-complete__rail-node {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f4eede;
}
.learner-module-complete__rail-node.is-done { background: var(--rk-forest); }
.learner-module-complete__rail-node.is-todo { border: 1.5px solid var(--rk-hairline-strong); }
.learner-module-complete__rail-node.is-current {
  width: 26px;
  height: 26px;
  background: var(--rk-forest);
  box-shadow: 0 0 0 2px var(--rk-card), 0 0 0 4px var(--rk-accent);
}
.learner-module-complete__rail-node.is-current svg { width: 14px; height: 14px; }
.learner-module-complete__rail-seg {
  flex: none;
  width: 28px;
  height: 1.5px;
  background: var(--rk-hairline-strong);
}
.learner-module-complete__rail-seg.is-filled { background: var(--rk-forest); }

.learner-shell .learner-module-complete__cta {
  margin-top: 36px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--rk-ink);
  color: var(--rk-page-solid);
  border: 0;
  border-radius: var(--rk-r-pill);
  padding: 15px 30px;
  font-family: var(--rk-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.4s var(--rk-expo), box-shadow 0.4s var(--rk-expo);
}
.learner-shell .learner-module-complete__cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--rk-hover-shadow);
}
.learner-shell .learner-module-complete__cta svg { transition: transform 0.4s var(--rk-expo); }
.learner-shell .learner-module-complete__cta:hover svg { transform: translateX(4px); }

@media (max-width: 620px) {
  .learner-shell .learner-module-complete { padding: 40px 26px 34px; }
}

/* ============================================================
   RUNNER — summary as a dark feature card (mock #s-summary feel)
   The generated summary is flat prose (no discrete recap points), so this
   carries the mock's dark editorial treatment rather than the 3-col grid.
   ============================================================ */
.learner-shell .learner-card.module-editor-card.learner-card--summary {
  background: radial-gradient(122% 92% at 66% 16%, #2c2018 0%, #1b120c 72%);
  border-color: rgba(184, 150, 104, 0.26);
  color: #f6efe2;
}
.learner-shell .learner-card--summary .learner-card__eyebrow { color: #e9c0b8; }
.learner-shell .learner-card--summary .learner-card__title {
  color: #f6efe2;
  font-size: clamp(34px, 4vw, 46px);
}
.learner-shell .learner-card--summary .learner-card__title::after {
  content: "";
  display: block;
  height: 1px;
  max-width: 200px;
  margin-top: 22px;
  background: linear-gradient(90deg, var(--rk-gold), transparent);
}
.learner-shell .learner-card--summary .learner-card__lead { color: #f6efe2; }
.learner-shell .learner-card--summary .learner-card__lead em { color: #e7c9a0; }
.learner-shell .learner-card--summary .learner-card__body { color: rgba(246, 239, 226, 0.74); }
.learner-shell .learner-card--summary .learner-card__body b,
.learner-shell .learner-card--summary .learner-card__body strong { color: #f6efe2; }
/* Nav on the dark summary reads light (mock .btn.light). */
.learner-shell .learner-card--summary .learner-card__back { color: rgba(246, 239, 226, 0.7); }
.learner-shell .learner-card--summary .learner-card__back:hover { color: #f6efe2; }
.learner-shell .learner-card--summary .learner-card__next.btn-pill {
  background: #f5f2e8;
  color: #1c1c1a;
}

/* ============================================================
   RUNNER — scenario split layout (mock .qcard.split: side image + content)
   ============================================================ */
.learner-shell .learner-card[data-card-type="scenario"]:has(.learner-card__media:not([hidden])) {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  align-items: stretch;
  max-width: 968px;
}
.learner-shell .learner-card[data-card-type="scenario"] .learner-card__media:not([hidden]) {
  aspect-ratio: auto;
  min-height: 440px;
  margin: 0;
}
.learner-shell .learner-card[data-card-type="scenario"] .learner-card__media:not([hidden]) + .learner-card__inner {
  padding: 46px 48px;
  justify-content: center;
}
.learner-shell .learner-card[data-card-type="scenario"] .learner-card__media::after {
  background: linear-gradient(200deg, rgba(196, 113, 106, 0.12), rgba(61, 107, 86, 0.05) 55%, rgba(28, 28, 26, 0.1));
}
@media (max-width: 820px) {
  .learner-shell .learner-card[data-card-type="scenario"]:has(.learner-card__media:not([hidden])) {
    grid-template-columns: 1fr;
  }
  .learner-shell .learner-card[data-card-type="scenario"] .learner-card__media:not([hidden]) {
    min-height: 190px;
  }
}

/* Summary recap grid (mock #s-summary .recap/.rk) — parsed from the <ol><li> points. */
.learner-shell .learner-card.module-editor-card.learner-card--summary {
  max-width: 1000px;
}
.learner-shell .learner-card--summary .learner-card__recap {
  display: grid;
  grid-template-columns: repeat(var(--recap-count, 3), minmax(0, 1fr));
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid rgba(184, 150, 104, 0.34);
  max-width: none;
}
.learner-shell .learner-card--summary .learner-card__recap-item {
  padding: 30px 28px 8px;
  border-right: 1px solid rgba(184, 150, 104, 0.34);
}
.learner-shell .learner-card--summary .learner-card__recap-item:first-child { padding-left: 0; }
.learner-shell .learner-card--summary .learner-card__recap-item:last-child { border-right: 0; padding-right: 0; }
.learner-shell .learner-card--summary .learner-card__recap-n {
  font-family: var(--rk-serif);
  font-weight: 300;
  font-size: 44px;
  line-height: 1;
  color: #e9c0b8;
}
.learner-shell .learner-card--summary .learner-card__recap-h {
  font-family: var(--rk-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: #f6efe2;
  margin-top: 14px;
}
@media (max-width: 820px) {
  .learner-shell .learner-card--summary .learner-card__recap {
    grid-template-columns: 1fr;
  }
  .learner-shell .learner-card--summary .learner-card__recap-item {
    padding: 20px 0;
    border-right: 0;
    border-top: 1px solid rgba(184, 150, 104, 0.24);
  }
  .learner-shell .learner-card--summary .learner-card__recap-item:first-child { border-top: 0; }
}

/* ============================================================
   RUNNER — module pre-amble / briefcard (mock #s-instrument)
   ============================================================ */
.runner-preamble {
  display: flex;
  justify-content: center;
  align-items: safe center;
}
.preamble-card {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  max-width: 940px;
  width: 100%;
  margin: 0 auto;
  background: var(--rk-card);
  border: 1px solid var(--rk-hairline);
  border-radius: var(--rk-r-card);
  overflow: hidden;
  box-shadow: var(--rk-card-shadow);
}
.preamble-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 48px;
  min-width: 0;
}
.preamble-card__kicker {
  font-family: var(--rk-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rk-gold-deep);
  margin-bottom: 12px;
}
.preamble-card__title {
  font-family: var(--rk-serif);
  font-weight: 300;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--rk-ink);
  margin: 0;
}
.preamble-card__promise {
  font-family: var(--rk-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--rk-ink-soft);
  margin-top: 16px;
  max-width: 42ch;
}
.preamble-card__promise[hidden] { display: none; }
.preamble-card__ahead {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--rk-hairline);
}
.preamble-card__it { display: flex; align-items: center; gap: 9px; }
.preamble-card__n {
  font-family: var(--rk-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  color: var(--rk-accent-strong);
}
.preamble-card__x { font-family: var(--rk-sans); font-size: 11px; line-height: 1.25; color: var(--rk-ink-soft); }
.preamble-card__x b { display: block; color: var(--rk-ink); font-weight: 600; font-size: 11.5px; }
.preamble-card__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--rk-hairline-strong); }
.preamble-card__begin {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 26px;
  padding: 14px 24px;
  border: 0;
  border-radius: var(--rk-r-pill);
  cursor: pointer;
  background: var(--rk-ink);
  color: var(--rk-page-solid);
  font-family: var(--rk-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.4s var(--rk-expo);
}
.preamble-card__begin:hover { transform: translateY(-2px); }
.preamble-card__media {
  position: relative;
  overflow: hidden;
  background: #2a221d;
  min-height: 420px;
}
.preamble-card__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.16) saturate(1.12) contrast(1.02) brightness(1.01);
}
.preamble-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(285deg, rgba(196, 113, 106, 0.1), transparent 46%);
}
@media (max-width: 820px) {
  .preamble-card { grid-template-columns: 1fr; }
  .preamble-card__media { min-height: 200px; order: -1; }
  .preamble-card__content { padding: 28px 26px; }
}

/* ============================================================
   RUNNER — screen reveal animations (mock .r staggered rise) + ken burns
   Each screen adds .is-entering when shown; children rise in with a stagger.
   ============================================================ */
/* Hero / splash */
.runner-hero.is-entering .runner-hero__eyebrow,
.runner-hero.is-entering .runner-hero__title,
.runner-hero.is-entering .runner-hero__desc,
.runner-hero.is-entering .runner-hero__stats,
.runner-hero.is-entering .runner-hero__start {
  animation: rk-rise 0.9s var(--rk-power3) both;
}
.runner-hero.is-entering .runner-hero__eyebrow { animation-delay: 0.3s; }
.runner-hero.is-entering .runner-hero__title { animation-delay: 0.45s; }
.runner-hero.is-entering .runner-hero__desc { animation-delay: 0.7s; }
.runner-hero.is-entering .runner-hero__stats { animation-delay: 0.9s; }
.runner-hero.is-entering .runner-hero__start { animation-delay: 1.1s; }
/* Ken-burns on the cover image */
.runner-hero__cover { transform: scale(1.07); }
.runner-hero.is-entering .runner-hero__cover { animation: rk-ken 22s var(--rk-expo) forwards; }
@keyframes rk-ken {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}

/* Pre-amble briefcard */
.runner-preamble.is-entering .preamble-card__kicker,
.runner-preamble.is-entering .preamble-card__title,
.runner-preamble.is-entering .preamble-card__promise,
.runner-preamble.is-entering .preamble-card__ahead,
.runner-preamble.is-entering .preamble-card__begin {
  animation: rk-rise 0.8s var(--rk-power3) both;
}
.runner-preamble.is-entering .preamble-card__kicker { animation-delay: 0.14s; }
.runner-preamble.is-entering .preamble-card__title { animation-delay: 0.2s; }
.runner-preamble.is-entering .preamble-card__promise { animation-delay: 0.28s; }
.runner-preamble.is-entering .preamble-card__ahead { animation-delay: 0.36s; }
.runner-preamble.is-entering .preamble-card__begin { animation-delay: 0.44s; }

/* End / result card */
.learner-result.completion.is-entering .completion__seal,
.learner-result.completion.is-entering .completion__title,
.learner-result.completion.is-entering .completion__lede,
.learner-result.completion.is-entering .completion__stats,
.learner-result.completion.is-entering .completion__note,
.learner-result.completion.is-entering .completion__actions,
.learner-result.completion.is-entering .completion__review {
  animation: rk-rise 0.8s var(--rk-power3) both;
}
.learner-result.completion.is-entering .completion__seal { animation-delay: 0.1s; }
.learner-result.completion.is-entering .completion__title { animation-delay: 0.3s; }
.learner-result.completion.is-entering .completion__lede { animation-delay: 0.42s; }
.learner-result.completion.is-entering .completion__stats { animation-delay: 0.54s; }
.learner-result.completion.is-entering .completion__note { animation-delay: 0.7s; }
.learner-result.completion.is-entering .completion__actions { animation-delay: 0.78s; }
.learner-result.completion.is-entering .completion__review { animation-delay: 0.66s; }

/* Module checkpoint — staggered rise, with a stamp-pop on the seal */
.learner-module-complete.is-entering .learner-module-complete__eyebrow,
.learner-module-complete.is-entering .learner-module-complete__title,
.learner-module-complete.is-entering .learner-module-complete__subtitle,
.learner-module-complete.is-entering .learner-module-complete__rail,
.learner-module-complete.is-entering .learner-module-complete__cta {
  animation: rk-rise 0.8s var(--rk-power3) both;
}
.learner-module-complete.is-entering .learner-module-complete__seal {
  animation: rk-seal-pop 0.7s var(--rk-expo) both;
}
.learner-module-complete.is-entering .learner-module-complete__seal { animation-delay: 0.08s; }
.learner-module-complete.is-entering .learner-module-complete__eyebrow { animation-delay: 0.3s; }
.learner-module-complete.is-entering .learner-module-complete__title { animation-delay: 0.38s; }
.learner-module-complete.is-entering .learner-module-complete__subtitle { animation-delay: 0.48s; }
.learner-module-complete.is-entering .learner-module-complete__rail { animation-delay: 0.58s; }
.learner-module-complete.is-entering .learner-module-complete__cta { animation-delay: 0.68s; }

@keyframes rk-seal-pop {
  from { opacity: 0; transform: scale(0.62); }
  62% { opacity: 1; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .runner-hero.is-entering .runner-hero__eyebrow,
  .runner-hero.is-entering .runner-hero__title,
  .runner-hero.is-entering .runner-hero__desc,
  .runner-hero.is-entering .runner-hero__stats,
  .runner-hero.is-entering .runner-hero__start,
  .runner-hero.is-entering .runner-hero__cover,
  .runner-preamble.is-entering .preamble-card__kicker,
  .runner-preamble.is-entering .preamble-card__title,
  .runner-preamble.is-entering .preamble-card__promise,
  .runner-preamble.is-entering .preamble-card__ahead,
  .runner-preamble.is-entering .preamble-card__begin,
  .learner-result.completion.is-entering .completion__seal,
  .learner-result.completion.is-entering .completion__title,
  .learner-result.completion.is-entering .completion__lede,
  .learner-result.completion.is-entering .completion__stats,
  .learner-result.completion.is-entering .completion__note,
  .learner-result.completion.is-entering .completion__actions,
  .learner-result.completion.is-entering .completion__review,
  .learner-module-complete.is-entering .learner-module-complete__seal,
  .learner-module-complete.is-entering .learner-module-complete__eyebrow,
  .learner-module-complete.is-entering .learner-module-complete__title,
  .learner-module-complete.is-entering .learner-module-complete__subtitle,
  .learner-module-complete.is-entering .learner-module-complete__rail,
  .learner-module-complete.is-entering .learner-module-complete__cta {
    animation: rk-fade-feedback 160ms linear both;
  }
  .runner-hero__cover { transform: none; }
}