/* Feature pages: /features and /features/<slug> (Loop 2026-11-04). Loaded after web.css, plan.css and legal.css,
   which give the article layout (main.legal), fonts and colors. Colors only from web.css tokens. No inline styles: the
   content security policy blocks them. */

/* "Available on" pills under the lead. A pill with class "off" names a platform that doesn't have the feature. */
.legal .feature-platforms { list-style: none; padding: 0; margin: -8px 0 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.legal .feature-platforms li { margin: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--highlight); color: var(--deep); font-size: 14px; font-weight: 700; line-height: 1.3; }
.legal .feature-platforms li.off { background: var(--subtle); color: var(--secondary); font-weight: 600; }

/* Short FAQ (<details> inside section.feature-faq; the build reads it for FAQPage data). */
.legal .feature-faq details { border-bottom: 1px solid var(--stroke); }
.legal .feature-faq details:first-of-type { border-top: 1px solid var(--stroke); }
.legal .feature-faq summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--text); }
.legal .feature-faq details p { margin: 0 0 14px; }

/* Card grid: "More features" at the end of each page, and every feature on the hub. */
.legal .feature-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.legal .feature-grid li { margin: 0; }
.legal .feature-grid a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border: 1px solid var(--stroke); border-left: 4px solid var(--primary); border-radius: 12px; background: var(--bg); color: var(--text); text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease; }
.legal .feature-grid li:nth-child(4n+2) a { border-left-color: var(--teal); }
.legal .feature-grid li:nth-child(4n+3) a { border-left-color: var(--gold); }
.legal .feature-grid li:nth-child(4n+4) a { border-left-color: var(--deep); }
.legal .feature-grid a:hover { border-color: var(--primary); background: var(--highlight); }
.legal .feature-grid strong { font-family: var(--serif); font-size: 17px; line-height: 1.25; color: var(--deep); }
.legal .feature-grid span { font-size: 15px; line-height: 1.5; color: var(--secondary); }
.legal .feature-grid a:hover strong { color: var(--primary); }
.legal .feature-more { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--stroke); }
@media (min-width: 640px) {
  .legal .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .legal .feature-grid a { transition: none; } }