/* About page — built from the reference design language (doc section 5.7). Uses .promo-banner/.link-hero from shared CSS. */
.about-hero { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 5rem; padding-bottom: 5rem; max-width: 80rem; }
.about-title { max-width: 900px; font-size: 3rem; line-height: .99; font-weight: 600; letter-spacing: -0.045em; color: #20322d; text-wrap: balance; }
.about-lead { max-width: 640px; font-size: 1.125rem; line-height: 1.625; color: var(--muted-foreground); text-wrap: pretty; }
.about-hero .link-hero, .about-close .link-hero { align-self: flex-start; font-size: .875rem; font-weight: 600; color: var(--primary); text-underline-offset: 4px; }
.about-hero .link-hero:hover, .about-close .link-hero:hover { text-decoration: underline; }

.about-split { display: grid; gap: 2rem; }
.about-split > div:first-child { display: flex; flex-direction: column; gap: 1rem; }
.about-copy { display: flex; flex-direction: column; gap: 1rem; font-size: 1.0625rem; line-height: 1.7; color: var(--muted-foreground); }
.about-copy a { text-decoration: underline; text-underline-offset: 4px; }
.about-narrow { max-width: 48rem; }

.about-values { display: flex; flex-direction: column; gap: 1rem; padding-top: 6rem; padding-bottom: 6rem; }
.value-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
.value-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: 1.35rem; background: var(--card); }
.value-card svg { color: var(--primary); }
.value-card h3 { font-size: 1.25rem; font-weight: 600; }
.value-card p { font-size: .875rem; line-height: 1.625; color: var(--muted-foreground); }

.about-steps { display: grid; gap: 1.25rem; counter-reset: step; }
.about-steps li { display: flex; flex-direction: column; gap: .375rem; padding-top: 1rem; border-top: 1px solid var(--border); counter-increment: step; }
.about-steps b { font-weight: 600; }
.about-steps b::before { content: counter(step, decimal-leading-zero) " · "; font-family: var(--font-mono); font-size: .75rem; font-weight: 500; color: var(--primary); }
.about-steps span { font-size: .875rem; line-height: 1.625; color: var(--muted-foreground); }

.about-close { padding-bottom: 6rem; }
.about-close-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }

@media (min-width: 640px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .about-steps { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; }
}
@media (min-width: 768px) {
  .about-title { font-size: 4.5rem; }
  .about-lead { font-size: 1.25rem; }
  .about-split { grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: start; }
}
@media (min-width: 1024px) {
  .value-grid { grid-template-columns: repeat(4, 1fr); }
}