/* Keep navigation in normal flow; the scrolled surface echoes the hero cards. */
:root { --floating-header-top: 14px; --floating-header-gap: 24px; }
html { scroll-padding-top: var(--floating-header-clearance, 122px); }
body > .header {
  position: sticky;
  top: var(--floating-header-top);
  z-index: 41;
  margin-inline: auto;
  transition: border-radius .24s ease, box-shadow .24s ease, background-color .24s ease;
}
body > .header.is-floating {
  width: calc(100% - 2 * var(--floating-header-gap));
  max-width: 1280px;
  border: 1px solid #b7cdf5;
  border-radius: 16px;
  background: linear-gradient(110deg, #fff 55%, #eff6ff);
  box-shadow: 5px 6px 0 #12b8ad, 0 13px 38px #0a1b2e24;
}
.header.is-floating > .nav { padding-inline: 26px; }
.header.is-floating .nav-panel { top: calc(100% + 9px); border-radius: 14px; }
/* Page-level sticky content clears the header and its offset shadow. */
body .learn-section { scroll-margin-top: 0; }
@media (min-width: 801px) {
  body .learn-toc, body .legal-toc {
    top: var(--floating-header-clearance, 132px);
    max-height: calc(100vh - var(--floating-header-clearance, 132px) - 24px);
    max-height: calc(100dvh - var(--floating-header-clearance, 132px) - 24px);
    overflow-y: auto;
  }
}
body.cart-redesign-v2 #main .checkout-side-v4 {
  top: var(--floating-header-clearance, 132px);
}
@media (max-width: 1060px) {
  body.cart-redesign-v2 #main .cart-summary-card-v4[open] .summary-inner-v4 {
    max-height: calc(100vh - var(--floating-header-clearance, 132px) - 100px);
    max-height: calc(100dvh - var(--floating-header-clearance, 132px) - 100px);
  }
}
@media (max-width: 1050px) {
  :root { --floating-header-top: 10px; --floating-header-gap: 16px; }
  .header.is-floating .nav-links[data-open=true] {
    max-height: calc(100vh - 210px);
    max-height: calc(100dvh - 210px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .header.is-floating .nav-panel { border-radius: 0; }
}
@media (max-width: 760px) {
  :root { --floating-header-top: 8px; --floating-header-gap: 10px; }
  body > .header.is-floating { border-radius: 12px; box-shadow: 3px 4px 0 #12b8ad, 0 10px 25px #0a1b2e20; }
  .header.is-floating > .nav { padding-inline: 12px; }
}
@media (min-width: 361px) and (max-width: 420px) {
  body > .header.is-floating .logo { width: 100%; max-width: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  body > .header { transition: none; }
}