:root {
  --header-height: 72px;
  --panel-height: calc(100dvh - var(--header-height));
}
html, body.swipe-page {
  margin: 0;
  height: 100%;
  overflow: clip;
}
.swipe-page #wrapper {
  height: 100dvh;
  overflow: visible;
}
.swipe-page #header {
  height: var(--header-height);
  padding-top: 10px;
  background: var(--color-white);
}
.swipe-page #wrapper .swipe-container {
  position: relative;
  top: 0;
  height: 100dvh;
  width: 100%;
  scroll-padding-top: var(--header-height);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.swipe-container::-webkit-scrollbar {
  display: none;
}
.swipe-page #wrapper .swipe-container.is-reading-long {
  scroll-snap-type: none;
}
.swipe-container:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.swipe-section {
  position: relative;
  width: 100%;
  height: var(--panel-height);
  min-height: var(--panel-height);
  max-height: var(--panel-height);
  padding: 16px 0 calc(var(--cta-space) + 16px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
}
.swipe-page #wrapper .grid, .swipe-page #wrapper .l-bg__noise {
  z-index: 0;
}
.swipe-section .section_title {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 600;
}
/* Match the kit's long-page end stop without adding space or visible content. */
.swipe-section-end {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-snap-align: end;
  scroll-snap-stop: always;
}