/* Features reuse the site's typography, amber accents and localized imagery. */
.features-page { max-width: 1080px; padding-top: 40px; }
.features-intro { max-width: 800px; }
.features-intro h1 { font-size: clamp(34px, 5vw, 56px); margin: 16px 0 24px; text-wrap: balance; }
.features-intro .features-lede { font-size: 21px; line-height: 1.7; }
.features-intro .features-version { font-size: 14px; color: var(--text-muted); padding-left: 16px; border-left: 2px solid var(--accent); margin: 24px 0; }
.features-contents { margin: 48px 0 16px; padding: 24px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-soft); }
.features-contents p { font-weight: 600; color: var(--text); }
.features-contents ol { columns: 2; column-gap: 40px; margin: 0; padding-left: 24px; }
.features-contents li { padding: 5px 0; break-inside: avoid; }
.features-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.feature-detail { position: relative; padding: 32px 0 20px; border-bottom: 1px solid var(--rule); scroll-margin-top: 24px; }
.feature-detail .feature-number { color: var(--accent); font-size: 13px; letter-spacing: .12em; margin: 0 0 8px; }
.features-page .feature-detail h2 { margin: 0 0 16px; font-size: 27px; }
.feature-detail li { padding-left: 4px; margin-bottom: 10px; }
.features-gallery { margin-top: 48px; }
.features-gallery > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.features-gallery figure { min-width: 0; margin: 0; }
.features-gallery img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--rule); }
.features-gallery figcaption { color: var(--text-muted); font-size: 14px; line-height: 1.5; margin-top: 12px; }
.features-next { padding: 28px; margin-top: 40px; border: 1px solid var(--accent-line); border-radius: var(--radius); background: var(--bg-soft); }
.features-page .features-next h2 { margin-top: 0; }
.features-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin: 24px 0; }
.features-faq { scroll-margin-top: 24px; }
.features-page a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
@media (max-width: 720px) {
  .features-sections { grid-template-columns: 1fr; }
  .features-contents ol { columns: 1; }
  .features-gallery > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .features-intro .features-lede { font-size: 18px; }
}