.stack-enabled .feature-panel {
  position: sticky;
  top: var(--stack-top, 110px);
}
.stack-enabled .feature-panel__surface {
  will-change: transform, opacity;
  transform-origin: center var(--stack-origin, top);
}
.stack-enabled {
  padding-bottom: 10px;
}
.motion-active [data-plane]:not([data-plane="front"]) {
  will-change: transform;
}
.surface-reflection {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    735px circle at var(--light-x, 50%) var(--light-y, 40%),
    #fff9 0%,
    #fff3 32%,
    transparent 66%
  );
  mix-blend-mode: soft-light;
  transition: opacity 0.5s;
}
[data-light-surface].light-active > .surface-reflection {
  opacity: 1;
}
.feature-panel__surface::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid #fff;
  opacity: var(--edge-light, 0);
  z-index: 6;
}
.keyboard-navigation .feature-panel {
  position: relative;
  top: auto;
}
.keyboard-navigation .feature-panel__surface {
  transform: none !important;
  opacity: 1 !important;
}
html:not(.js-ready) .example-buttons,
html:not(.js-ready) .screen-tabs,
html:not(.js-ready) .copy-email,
html:not(.js-ready) .menu-toggle {
  display: none;
}
@media (max-width: 850px) {
  html:not(.js-ready) .site-header {
    position: static;
  }
  html:not(.js-ready) .navigation {
    flex-wrap: wrap;
    padding-block: 18px;
  }
  html:not(.js-ready) .nav-links {
    display: flex;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    order: 3;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  html:not(.js-ready) .nav-links a {
    padding: 8px 12px 8px 0;
  }
}
@media (min-width: 851px) and (max-height: 800px) {
  .feature-panel .source-note {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  [data-plane],
  [data-stack-surface] {
    transform: none !important;
    opacity: 1 !important;
  }
  [data-reading] {
    opacity: 1 !important;
  }
  .motion-active .feature-panel {
    position: relative;
    top: auto;
  }
  .surface-reflection {
    display: none;
  }
}

/* A flow-positioned mobile header also accommodates enlarged text. */
@media (max-width: 850px) {
  .site-header { position: sticky; }
  .navigation { flex-wrap: wrap; padding-block: 12px; }
  .brand { flex-shrink: 0; }
  .hero { padding-top: 76px; }
  .page-heading { padding-top: 59px; }
}
@media (max-width: 600px) {
  .hero { padding-top: 52px; }
  .page-heading { padding-top: 55px; }
}
.step-number { line-height: 1; }