.playbook-section {
  margin-bottom: 48px;
}

.playbook-section h2 {
  font-family: var(--font-d);
  font-size: 28px;
  color: var(--charcoal);
  margin-bottom: 16px;
}

.playbook-section p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--g1);
}

.playbook-age-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.playbook-age-card h3 {
  font-family: var(--font-d);
  font-size: 20px;
  color: var(--terra);
  margin-bottom: 8px;
}

.playbook-age-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--g1);
}

.playbook-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.timeline-phase {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--terra);
}

.timeline-phase h3 {
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 12px;
}

.timeline-phase p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--g1);
}

.playbook-calm {
  background: var(--terra-soft);
  padding: 32px;
  border-radius: var(--radius);
}

.playbook-calm h2 {
  color: var(--terra);
}

.playbook-calm p {
  color: var(--charcoal);
}

@media (max-width: 640px) {
  .playbook-section h2 {
    font-size: 22px;
  }

  .playbook-timeline {
    grid-template-columns: 1fr;
  }
}