/* Native scrolling does the work. Full-size sections layer over one another. */
:root {
  --stack-base: 0px;
  --stack-step: 0px;
  --stack-bottom: 0px;
  --stack-gutter: 0px;
  --stack-gap: 0px;
  --stack-radius: 0px;
}

body { background: #e8e9e2; }
html { scroll-padding-top: 0; }
#main { position: relative; isolation: isolate; padding-bottom: var(--stack-gap); }
.stack-anchor {
  display: block;
  height: 0;
  pointer-events: none;
  scroll-margin-top: calc(var(--stack-base) + var(--stack-index) * var(--stack-step));
}
#main > .stack-card {
  position: relative;
  top: auto;
  width: calc(100% - var(--stack-gutter) * 2);
  max-width: none;
  min-height: calc(100svh - var(--stack-base) - var(--stack-index) * var(--stack-step) - var(--stack-bottom));
  margin: 0 auto var(--stack-gap);
  border: 0;
  border-radius: var(--stack-radius);
  background: var(--paper);
  box-shadow: 0 -12px 32px -18px #252b2040;
  overflow: clip;
  z-index: calc(1 + var(--stack-index));
}
.stack-ready #main > .stack-card {
  position: sticky;
  top: var(--stack-top, 0px);
}
#main > .stack-card.hero--canvas {
  background: #fff;
  min-height: 0;
  box-shadow: 0 2px 12px #252b2006;
  border-color: #dedfd8;
}
.stack-card .hero-scene {
  height: calc(100svh - 92px - var(--stack-bottom));
}
#main > .stack-card.mac-section {
  background: #232820;
  border-color: #3a4034;
}
#main > .stack-card.demo-section { background: #ebece5; }
#main > .stack-card.handoff-story { background: var(--paper); }
#main > .stack-card.closing { background: var(--yellow); border-color: #e8bb00; }
.stack-card.section-shell {
  padding-left: max(5%, calc((100vw - 1260px) / 2));
  padding-right: max(5%, calc((100vw - 1260px) / 2));
}
.stack-card.mac-section > .section-shell { max-width: 1400px; }
.site-footer {
  position: relative;
  z-index: 2;
  max-width: none;
  background: #e8e9e2;
}

/* Reduced motion restores ordinary page scrolling. */
.motion-paused #main > .stack-card { position: relative; top: auto; }
@media (prefers-reduced-motion: reduce) {
  .stack-ready #main > .stack-card { position: relative; top: auto; }
}
@media (max-width: 800px) {
  .stack-card .hero-scene { height: calc(100svh - 82px - var(--stack-bottom)); }
}
@media (max-width: 580px) {
  .stack-card .hero-scene { height: calc(100svh - 76px - var(--stack-bottom)); }
  .stack-card.section-shell { padding-left: 6%; padding-right: 6%; }
  .stack-card.mac-section > .section-shell { padding-left: 6%; padding-right: 6%; }
}