.learn-page {
  width: min(100% - 2rem, 72rem);
  margin: 0 auto;
  padding: 9rem 0 4rem;
}

.learn-intro {
  max-width: 48rem;
  padding: 2rem 0 5rem;
}

.eyebrow {
  margin: 0 0 0.8rem;
  color: var(--secondary-text);
  font: 700 0.72rem/1.2 var(--normal-font-family);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.learn-intro h1 {
  max-width: 12ch;
  margin: 0;
  color: var(--primary-text);
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.9;
}

.learn-intro > p:not(.eyebrow) {
  max-width: 38rem;
  margin: 1.75rem 0 2rem;
  color: var(--secondary-text);
  font-size: 1.05rem;
  line-height: 1.7;
}

.learn-cta {
  display: inline-block;
  padding: 0.85rem 1.25rem;
  color: var(--primary-text);
  background: var(--cta-color);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 3px 4px 0 #000;
}

.learn-cta:hover {
  background: var(--hover-background-color);
  border-color: var(--hover-border);
}

.learn-section {
  padding: 4rem 0;
  border-top: 1px solid var(--border);
}

.section-heading h2,
.learn-footer h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
}

.learn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

.learn-card {
  min-height: 15rem;
  padding: 1.5rem;
  background: var(--dark-background);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.card-number {
  color: var(--secondary-text);
  font: 700 0.8rem var(--normal-font-family);
}

.learn-card h3,
.mode-row h3 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.35rem;
}

.learn-card p,
.mode-row p,
.learn-footer > p {
  margin: 0;
  color: var(--secondary-text);
  line-height: 1.65;
}

.mode-list {
  margin-top: 2.5rem;
}

.mode-row {
  display: grid;
  grid-template-columns: minmax(7rem, 0.3fr) 1fr;
  gap: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
}

.mode-label {
  color: var(--cta-color);
  font: 700 1.2rem var(--heading-font-family);
}

.mode-row h3 {
  margin-top: 0;
}

.learn-checklist {
  max-width: 46rem;
  margin: 2.5rem 0 0;
  padding: 0;
}

.learn-checklist li {
  padding: 1rem 0;
  color: var(--secondary-text);
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

.learn-checklist strong {
  color: var(--primary-text);
}

.learn-footer {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 2rem;
  padding: 2rem 0 1rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 48rem) {
  .learn-page {
    padding-top: 7rem;
  }

  .learn-grid,
  .learn-footer {
    grid-template-columns: 1fr;
  }

  .learn-card {
    min-height: auto;
  }

  .mode-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}