/* Shared refinements for all editions: case separation, tighter button icons,
   and the requested removal of the carousel's secondary control row. */
body.light.v22-home:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  --v22-case-panel-shadow:
    0 12px 40px rgba(25, 47, 80, 0.07), 0 2px 8px rgba(25, 47, 80, 0.025);
  --v22-hero-action-icon-gap: 12px;
}
body.light.v22-home #practice .case-panel:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  border: 0;
  box-shadow: var(--v22-case-panel-shadow);
}
body.light.v22-home.v22-dark:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  --v22-case-panel-shadow:
    0 14px 42px rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* This is the gap inside each button, not the gap between the two buttons. */
body.light.v22-home .hero-actions .btn:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  gap: var(--v22-hero-action-icon-gap);
}

/* Keep these nodes for the existing carousel script and its autoplay state. */
body.light.v22-home #products .v22-carousel-controls:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: none;
}
body.light.v22-home .hero-copy > .eyebrow:where(:not(.nh, .nh *, .nh-home, .nh-home > body)),body.light.v22-home .hero-note:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
  display: none;
}

@media (max-width: 760px) {
  body.light.v22-home:where(:not(.nh, .nh *, .nh-home, .nh-home > body)){
    --v22-hero-action-icon-gap: 10px;
  }
}