/* T182: the About page (templates/about.html). Tokens from app.css :root. */
.about { max-width: 760px; }
.about-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(20px, 4vw, 32px); box-shadow: var(--shadow-sm); margin: 0 0 18px; scroll-margin-top: 90px; }
.about-block h2 { font-size: var(--step-1); margin: 0 0 10px; }
.about-block p, .about-block li { line-height: 1.75; }
.about-block p { margin: 0 0 10px; }
.about-block > :last-child { margin-bottom: 0; }
.about-block ul { margin: 0 0 12px; padding-inline-start: 22px; }
.about-block li + li { margin-top: 4px; }
.about-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.about-plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--lilac-2); min-width: 0; }
.about-plan h3 { margin: 0 0 4px; font-size: 1.05rem; }
.about-plan p { margin: 0; color: var(--muted); font-size: var(--step--1); line-height: 1.6; }
.about-plan .about-price { font: 800 1.5rem/1.2 var(--font-display); color: var(--violet-ink); margin: 0 0 6px; }
.about-note { color: var(--muted); font-size: var(--step--1); }
.about-legal { color: var(--muted); font-size: var(--step--1); margin: 8px 0 0; }
@media (max-width: 640px) { .about-plans { grid-template-columns: 1fr; } }