/* Shared layout for static content/landing pages (about.html, /track/* pages).
   Reuses the palette/fonts from styles.css — link that first. */
.about-page { max-width: 720px; margin: 0 auto; padding: 24px; }
.about-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.about-nav a { text-decoration: none; }
.about-hero { margin: 8px 0 32px; }
.about-hero h1 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 30px; line-height: 1.2;
  color: var(--white); margin-bottom: 14px; letter-spacing: 0.3px;
}
.about-hero p { font-size: 17px; color: var(--text-muted); line-height: 1.6; }

/* Prose: style whatever copy you paste into .about-content */
.about-content { color: var(--text); line-height: 1.7; font-size: 16px; }
.about-content h2 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 21px; color: var(--white);
  margin: 34px 0 12px;
}
.about-content h3 { font-size: 17px; color: var(--white); margin: 24px 0 8px; }
.about-content p { margin-bottom: 16px; }
.about-content ul, .about-content ol { margin: 0 0 16px 22px; }
.about-content li { margin-bottom: 8px; }
.about-content a { color: var(--accent); }

/* Four feature callouts */
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0 8px; }
.about-feature { background: var(--field-light); border: 1px solid var(--border); border-radius: 12px; padding: 18px 18px 16px; }
.about-feature-name { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text); font-weight: 700; }
.about-feature h3 { font-size: 17px; color: var(--white); margin: 6px 0 8px; }
.about-feature p { font-size: 14px; color: var(--text-muted); line-height: 1.55; margin: 0; }
@media (max-width: 520px) { .about-features { grid-template-columns: 1fr; } }

.about-closing { font-family: 'Barlow Condensed', sans-serif; font-size: 19px; color: var(--white); text-align: center; margin: 36px 0 4px; }

.about-cta { margin: 28px 0 8px; text-align: center; }
.about-cta .btn { display: inline-block; width: auto; padding: 14px 28px; text-decoration: none; font-size: 15px; }

.about-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 13px; text-align: center; }
.about-foot a { color: var(--text-muted); }
@media (max-width: 520px) { .about-hero h1 { font-size: 24px; } }