/* static-page.css — About, Pro, Contact (story template) and Privacy, Terms (legal template) (10). */

/* ---- Page hero (_PageHero) ---- */
.page-hero { padding-block: var(--sp-6) var(--sp-5); }
.page-hero h1 { max-width: 22ch; }
.page-hero__lead { margin-top: var(--sp-3); max-width: 60ch; }
.page-hero__meta { margin-top: var(--sp-3); }
.page-hero .cluster { margin-top: var(--sp-5); }

/* ---- Story sections ---- */
.story { display: grid; gap: var(--sp-6); align-items: center; }
.story__media { display: flex; align-items: center; justify-content: center; min-height: 220px; border-radius: var(--r-lg);
  background: var(--grad-hero); border: var(--border-w) solid var(--border); }
.story__media img { width: 96px; height: 96px; }
.story__text p + p { margin-top: var(--sp-3); }

@media (min-width: 768px) {
  .story { grid-template-columns: 5fr 7fr; gap: var(--sp-7); }
}

.stats--page { justify-content: flex-start; }

.timeline { margin: 0; padding: 0; list-style: none; border-left: var(--accent-w) solid var(--border); }
.timeline__item { position: relative; padding: 0 0 var(--sp-5) var(--sp-5); }
.timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--step-dot) / 2 - var(--accent-w) / 2); top: .35em;
  width: var(--step-dot); height: var(--step-dot); border-radius: 50%; background: var(--primary); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__when { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--primary); }

.maker { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-start; }
.maker__avatar { flex: 0 0 auto; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
  background: var(--primary-tint); color: var(--primary); font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.maker__body { flex: 1 1 280px; }
.maker__role { color: var(--text-muted); margin-bottom: var(--sp-3); }
.maker .social { margin-top: var(--sp-4); }

/* ---- Pro ---- */
.upgrade-table th:first-child, .upgrade-table tbody th { position: sticky; left: 0; background: var(--surface); text-align: left; }
.buy-steps { margin-top: var(--sp-4); }
.buy-note { margin-top: var(--sp-4); }

/* ---- Contact ---- */
.contact-card .btn { align-self: flex-start; }
.contact-card__actions { margin-top: auto; }
.email-link { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.self-help { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.self-help li { display: flex; gap: var(--sp-2); align-items: baseline; }
.self-help .bi { color: var(--primary); }

/* ---- Legal template: TOC + prose ---- */
.legal__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
  max-width: calc(var(--w-prose) + var(--w-sidebar) + var(--sp-7) + 2 * var(--gutter));
  padding-block: var(--sp-5) var(--section-y);
}

.legal__aside { display: none; }
.legal__toc-mobile { padding: 0 var(--sp-4); border: var(--border-w) solid var(--border); border-radius: var(--r-md); }
.legal__toc-mobile .toc__list { padding-bottom: var(--sp-3); }

@media (min-width: 992px) {
  .legal__layout { grid-template-columns: var(--w-sidebar) minmax(0, var(--w-prose)); }
  .legal__toc-mobile { display: none; }
  .legal__aside { display: block; grid-row: 1; grid-column: 1; }
  .legal__toc { position: sticky; top: calc(var(--header-h) + var(--sp-5)); max-height: calc(100vh - var(--header-h) - var(--sp-7)); overflow-y: auto; }
  .legal__main { grid-column: 2; }
}

.legal-summary { padding: var(--sp-5); border-radius: var(--r-md); background: var(--primary-tint); border: var(--border-w) solid var(--border); }
.legal-summary ul { margin-bottom: 0; }
.legal-apps { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-4) 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.legal-app { padding-top: var(--sp-5); margin-top: var(--sp-5); border-top: var(--border-w) solid var(--border); scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.legal-app__links { color: var(--text-muted); }
.legal__body h2 { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

.contact-box { display: flex; gap: var(--sp-4); margin-top: var(--sp-7); padding: var(--sp-5); border-radius: var(--r-md);
  background: var(--bg-subtle); border: var(--border-w) solid var(--border); }
.contact-box__icon { font-size: var(--icon-md); color: var(--primary); }
.contact-box__title { font-weight: var(--fw-semibold); color: var(--text-strong); }

/* ---- 404 ---- */
.not-found .search-box { max-width: 560px; }
.not-found__block { margin-top: var(--sp-7); }