.section {
  padding-block: var(--space-section);
}

.section--hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2rem, 6vh, 4rem);
}

/*
 * Ruling R9: логотип знебарвлюється разом зі сторінкою. Його пляма — єдина
 * кольорова деталь угорі, і якщо лишити її теплою, обіцянка «починаємо без
 * кольору» ламається на першому ж екрані.
 */
.logo {
  width: min(11rem, 45vw);
  margin-inline: auto;
  filter: grayscale(var(--grayscale));
  transition: filter 300ms linear;
}

.logo--sm { width: min(7rem, 30vw); }

.lessons { list-style: none; margin: 0; padding: 0; }
.lessons li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.5rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}
.lessons .num { color: var(--fg-muted); font-size: 0.95rem; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 2px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: background-color 120ms linear, color 120ms linear, opacity 120ms;
}
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* Липка кнопка. Ховається, доки видно hero, щоб не дублювати CTA. */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 0.75rem var(--wrap-pad) calc(0.75rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  transform: translateY(110%);
  transition: transform 220ms ease;
  z-index: 10;
}
.sticky-cta[data-visible='true'] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sticky-cta, .logo { transition: none; }
}