
.about-main { padding-bottom: 72px; }
.about-main .public-intro { max-width: 920px; }
.about-main .public-intro h1 { margin-bottom: 24px; }
.about-main .public-lead { max-width: 64ch; font-size: clamp(1.1rem, 2vw, 1.4rem); }
.about-introduction { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; padding: 30px 0 48px; border-bottom: 1px solid var(--public-line); }
.about-main h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin: 10px 0 20px; }
.about-introduction h2 { max-width: 22ch; }
.about-introduction p { margin-top: 0; color: var(--public-muted); }
.about-section { padding: 48px 0; border-bottom: 1px solid var(--public-line); }
.about-section-lead { max-width: 76ch; color: var(--public-muted); }
.about-example-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-top: 28px; }
.about-example-grid article { padding: 26px; border: 1px solid var(--public-line); border-radius: 20px; background: var(--public-surface); }
.about-example-grid h3 { margin: 0 0 14px; font-size: 1.25rem; }
.about-example-grid p { margin: 0; color: var(--public-muted); font-size: .93rem; }
.about-note { max-width: 84ch; font-size: .85rem; color: var(--public-muted); padding-top: 14px; }
.about-how { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; }
.about-how p { color: var(--public-muted); }
.about-how ol { margin: 0; padding-left: 22px; }
.about-how li { padding-left: 6px; color: var(--public-muted); margin-bottom: 20px; }
.about-how li::marker { color: var(--public-blue-dark); font-weight: 800; }
.about-how strong { color: var(--public-ink); }
.about-principle-list { margin-top: 26px; }
.about-principle-list article { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; padding: 20px 0; border-top: 1px solid var(--public-line); }
.about-principle-list h3 { font-size: 1.2rem; margin: 0; }
.about-principle-list p { margin: 0; color: var(--public-muted); }
.about-story p { max-width: 83ch; color: var(--public-muted); }
@media (max-width:700px) {
  .about-introduction, .about-how, .about-example-grid, .about-principle-list article { grid-template-columns: 1fr; gap: 20px; }
  .about-introduction h2 { max-width: none; }
  .about-section { padding: 32px 0; }
  .about-main .public-callout { margin-top: 32px; }
}
