/* Feature row, like Tesla's "Efficient Drive" blocks: a photo, a short title
   and a line or two under it. On phones the next one peeks in and you swipe;
   on wide screens all of them sit side by side. Pair with /features.js. */
.features { padding: 48px 0 64px; font-family: var(--font-text); color: #171a20; }
.features .head { padding: 0 24px 24px; max-width: 1200px; margin: 0 auto; }
.features .free { padding: 0 24px 40px; max-width: 1200px; margin: 0 auto; }
.features .free p { margin: 0; max-width: 720px; font-size: 17px; line-height: 1.55; color: #393c41; }
.features .free .free-title { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; font-weight: var(--weight-heading); letter-spacing: var(--tracking-headline); color: #171a20; }
@media (min-width: 900px) { .features .free { padding-bottom: 56px; } .features .free p { font-size: 18px; } }
.features .head h2 { margin: 0; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; font-family: var(--font-display); font-weight: var(--weight-heading); letter-spacing: var(--tracking-headline); word-spacing: var(--word-spacing-headline); }
.f-row {
  display: flex; gap: 12px;
  padding: 0 24px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 24px;
  scrollbar-width: none;
}
.f-row::-webkit-scrollbar { display: none; }
.f-item { flex: 0 0 calc(100% - 36px); scroll-snap-align: start; }
.f-item img, .f-item video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: #f4f4f4; }
.f-item h3 { margin: 22px 0 8px; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; font-family: var(--font-display); font-weight: var(--weight-heading); letter-spacing: var(--tracking-headline); word-spacing: var(--word-spacing-headline); }
.f-item p { margin: 0; font-size: 18px; line-height: 1.5; color: #5c5e62; }
.f-dots { display: flex; justify-content: center; gap: 10px; padding: 22px 0 0; }
.f-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #b8b9bc; cursor: pointer; }
.f-dots button[aria-current="true"] { background: #171a20; }
.features .after { padding: 28px 24px 0; max-width: 1200px; margin: 0 auto; }
.features .after .btn { display: inline-flex; min-width: 200px; }
@media (min-width: 900px) {
  .f-row { max-width: 1200px; margin: 0 auto; gap: 24px; overflow: visible; }
  .f-item { flex: 1 1 0; }
  .f-dots { display: none; }
}