/* Homepage mobile edges and unified, eased section navigation. */

/* The homepage section pager is driven by one JS animator. Native snap was
   competing with each animation frame and caused the visible micro-jumps. */
html:has(body.is-home):has(main > section.hero-section#top) {
  scroll-snap-type: none !important;
  scroll-padding-block: 0 !important;
}

html:has(body.is-home.home-programmatic-scroll):has(main > section.hero-section#top) {
  scroll-snap-type: none !important;
}

@media (max-width: 820px) {
  html:has(body.is-home):has(main > section.hero-section#top) body.is-home > main > section[id],
  html:has(body.is-home):has(main > section.hero-section#top) body.is-home > main > section.snap-page {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  html:has(body.is-home):has(main > section.hero-section#top) body.is-home > main > section[id]::before,
  html:has(body.is-home):has(main > section.hero-section#top) body.is-home > main > section[id]::after {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  /* The last CTA had a separate inset outline; remove that border layer too. */
  html:has(body.is-home):has(main > section.hero-section#top) body.is-home > main > #start.cta-section {
    border: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  html:has(body.is-home):has(main > section.hero-section#top) body.is-home > main > #start.cta-section::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.is-home):has(main > section.hero-section#top) {
    scroll-snap-type: none !important;
  }
}


/* The final section has no decorative border/frame at any viewport size. */
html:has(body.is-home):has(main > section.hero-section#top) body.is-home > main > #start.cta-section {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
html:has(body.is-home):has(main > section.hero-section#top) body.is-home > main > #start.cta-section::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}