/* ── About page — overrides & extensions of base.css / index.css ──────── */

/* Simple "← Back to home" nav link (index.html uses a waitlist button instead) */
.nav-back {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-secondary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition);
}
.nav-back:hover { color: var(--color-primary-dark); }

/* Single-column hero (no route-visualization card, so no .hero-grid here) */
.about-hero { position: relative; overflow: hidden; padding-bottom: 32px; }

/* index.css caps .hero-sub at 480px — sized for its own two-column hero
   where the text already sits in a half-width .hero-grid column. This
   hero has no second column, so let the subtext use the full container
   width instead of wrapping at under half of it. */
.about-hero .hero-sub { max-width: none; }

.about-hero-watermark {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  font-size: 320px;
  line-height: 1;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

.about-story .section-headline {
  margin-bottom: 24px;
}
.about-story p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-secondary);
  margin-bottom: 20px;
}
.about-story p:last-child { margin-bottom: 0; }

/* Alternating light-green background for visual rhythm, same treatment
   already used elsewhere (e.g. faq.css's .faq-section-alt). */
.about-section-alt {
  background: var(--color-primary-light);
  position: relative;
  overflow: hidden;
}
.about-section-alt::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(122,158,107,0.12);
}
.about-section-alt::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -40px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(122,158,107,0.10);
}
.about-section-alt .container { position: relative; z-index: 1; }

/* index.css's .features-grid is a fixed 4-column grid (built for exactly
   4 cards on the homepage) — this page has 6, so 3×2 divides evenly.
   Only overridden above the existing 900px breakpoint, where index.css
   already collapses the grid to a single column regardless. */
@media (min-width: 901px) {
  #how-we-work .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}