/* features.html — the full feature list. Same tokens and retro contract as styles.css:
   square corners, hairline borders, mono labels. One section per group: the heading
   stays in view on the left while its cards scroll on the right. */

.fl > section { padding: 48px 32px; }

.fl > .fl-intro { padding-top: 88px; padding-bottom: 40px; }
.fl-intro h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.fl-intro .lede { margin-bottom: 32px; }

.fl-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-jump a {
  padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--muted); font-family: var(--mono); font-size: 0.82rem; white-space: nowrap;
}
.fl-jump a:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }

.fl-group { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 48px; border-top: 1px solid var(--line-soft); }
.fl-head { position: sticky; top: 104px; align-self: start; }
.fl-head h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.fl-head h2 .tag { top: -4px; }
.fl-head p { margin: 0; color: var(--muted); font-size: 1rem; }

.fl-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px; }
.fl-items article { padding: 20px 22px 22px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.fl-items h3 { margin-bottom: 8px; font-size: 1.02rem; line-height: 1.25; }
.fl-items h3 .tag { top: -2px; margin-left: 6px; }
.fl-items p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

.fl > .fl-cta { text-align: center; border-top: 1px solid var(--line-soft); padding-top: 72px; padding-bottom: 80px; }
.fl-cta > p { color: var(--muted); font-size: 1.1rem; }
.fl-cta .cta-row { justify-content: center; margin-top: 28px; }

.nav nav a[aria-current="page"] { color: var(--text); border-color: var(--line); }

@media (max-width: 960px) {
  .fl-group { grid-template-columns: 1fr; gap: 20px; }
  .fl-head { position: static; }
}
@media (max-width: 640px) {
  .fl > section { padding: 36px 18px; }
  .fl > .fl-intro { padding-top: 48px; padding-bottom: 28px; }
  .fl-items { grid-template-columns: 1fr; }
  .fl-cta .cta-row .btn { width: 100%; }
}