.essentials .feature-grid {
  display: flex; gap: 18px; width: 1000px; left: 183px; height: 630px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.feature-grid::-webkit-scrollbar { display: none; }
.essentials .feature-grid article { flex: 0 0 calc((100% - 54px) / 4); min-width: 0; scroll-snap-align: start; }
.essentials .feature-grid img, .essentials .feature-grid article:nth-child(3) img {
  width: 100%; height: 502px; transform: none; object-fit: contain;
}
.essentials .feature-grid img.feature-new { object-fit: cover; object-position: center bottom; }
.essentials .feature-grid h3 { margin: 24px 0 8px; font-size: 21px; white-space: normal; letter-spacing: 0; }
.essentials .feature-grid p { margin: 0; }
.feature-controls { position: absolute; top: 761px; left: 50%; width: 400px; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.feature-controls[hidden] { display: none; }
.feature-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff50; border-radius: 50%; background: #101728; color: #fff; font: 22px Arial, sans-serif; cursor: pointer; }
.feature-controls button:hover { background: #284453; border-color: #71dce5; }
.feature-controls button:focus-visible, .feature-grid:focus-visible { outline: 2px solid #71dce5; outline-offset: 4px; }
.feature-controls > button { flex-shrink: 0; background: #fff; color: #101728; border-color: #dce1e6; transition: transform .2s, background .2s; }
.feature-controls > button:hover { background: #e5f6f7; transform: scale(1.06); }
.feature-controls > button svg { display: block; width: 21px; height: 21px; }
.feature-dots { display: flex; align-items: center; justify-content: center; gap: 9px; }
.feature-dots button { position: relative; width: 8px; height: 8px; border: 0; background: #ffffff50; transition: width .25s, border-radius .25s, background .25s; }
.feature-dots button::before { content: ""; position: absolute; inset: -12px -4px; }
.feature-dots button[aria-current="true"] { width: 27px; border-radius: 999px; background: #71dce5; }
@media (prefers-reduced-motion: reduce) { .feature-dots button { transition: none; } }
@media (max-width: 1100px) {
  .frame .stage .feature-grid { display: flex; gap: 24px; width: 100%; height: auto; }
  .essentials .feature-grid article { flex-basis: calc((100% - 24px) / 2); height: auto; }
  .frame.essentials .feature-grid img, .frame.essentials .feature-grid article:nth-child(3) img { height: 390px; aspect-ratio: auto; }
  .frame.essentials .feature-grid img.feature-new { object-fit: contain; }
  .essentials .feature-grid h3 { font-size: 20px; }
  .essentials .feature-grid p { min-height: 72px; }
  .feature-controls { position: relative; top: auto; left: auto; transform: none; width: min(400px, 100%); margin: 28px auto 0; }
}
@media (max-width: 540px) {
  .essentials .feature-grid article { flex-basis: 100%; text-align: center; }
  .essentials .feature-grid p { max-width: 270px; margin: 0 auto; }
}