/* Desktop retains the existing magnetic surface/companion treatment. Touch
   uses a single native top-edge snap marker, not counter-scrolling transforms. */
.scroll-settle-frame {
  box-sizing:border-box;
  min-block-size:calc(100vh - var(--scroll-settle-header,0px));
  min-block-size:calc(100dvh - var(--scroll-settle-header,0px));
  scroll-margin-block-start:var(--scroll-settle-header,0px);
}
@media(prefers-reduced-motion:no-preference) {
  :is([data-scroll-settle-target],[data-scroll-settle-follower]) {translate:0 var(--scroll-settle-pull,0px)}
}
/* The native marker never contributes size or a bottom-alignment candidate.
   Margin is applied once, to this start edge; the root gets no scroll padding. */
[data-scroll-settle-native-target] {position:relative;scroll-snap-align:none;translate:none!important}
.scroll-settle-native-anchor {
  position:absolute;inset-inline:0;top:0;height:1px;
  opacity:0;pointer-events:none;scroll-snap-align:none;
  scroll-margin-block:var(--scroll-settle-header,0px) 0;
}
@media(prefers-reduced-motion:no-preference) {
  [data-scroll-settle-native][data-scroll-settle-native-armed] {scroll-snap-type:y proximity}
  [data-scroll-settle-native-armed] [data-scroll-settle-native-target]>.scroll-settle-native-anchor[data-scroll-settle-eligible] {
    /* Let fast native momentum pass the lead-in instead of forcing a stop. */
    scroll-snap-align:start;scroll-snap-stop:normal;
  }
}
/* The real footer and preview strip consume available space, not an overlay.
   min-size (never height) lets every step grow normally on short viewports. */
html[data-page="home"] main {padding-bottom:0}
html[data-page="home"] #journey {
  box-sizing:border-box;
  min-block-size:calc(100vh - var(--scroll-settle-header,0px) - var(--shop-frame-tail,0px));
  min-block-size:calc(100dvh - var(--scroll-settle-header,0px) - var(--shop-frame-tail,0px));
  padding-block:24px;
  display:flex;
  flex-direction:column;
}
html[data-page="home"] #journey.is-home-step {scroll-margin-block:var(--scroll-settle-header,0px) 0}
/* Match the lead-in top border footprint so its stepper never shifts by 1px. */
html[data-page="home"] #journey:not(.is-home-step) {border-top:1px solid transparent}
html[data-page="home"] #journey>.stepper {flex:none}
html[data-page="home"] #stepContent {flex:1}
html[data-page="home"] #stepContent>* {flex-shrink:0}
/* Spacing belongs equally above/below the body, not below its heading. */
html[data-page="home"] #stepContent>.step-heading {margin-bottom:0}
html[data-page="home"] #stepContent>.step-heading+:is(.choice-grid,form,.review-grid) {padding-block:35px}
html[data-page="home"] #journey:not(.is-home-step) #stepContent>:is(.choice-grid,form,.review-grid) {margin-block:auto}
@media(min-width:721px) {
  html[data-page="home"] #journey.is-home-step #stepContent>.choice-grid {margin-block:auto}
}
@media(max-width:720px) {
  html[data-page="home"] #journey {padding-block:20px 28px}
  /* The lead-in is snapped just below the sticky header with 64px of top
     padding. Keep that same stepper Y position in the following Shop steps
     after the landing disappears and the page scrolls to the top. */
  html[data-page="home"] #journey:not(.is-home-step) {padding-block-start:var(--content-section-space,64px)}
  /* Home retains a full reading frame on phones. Standalone steps account for
     header AND footer on both phones and desktop. */
  html[data-page="home"] #journey.is-home-step {
    min-block-size:calc(100vh - var(--scroll-settle-header,0px));
    min-block-size:calc(100dvh - var(--scroll-settle-header,0px));
  }
  html[data-page="home"] #stepContent>.step-heading+:is(.choice-grid,form,.review-grid) {padding-block:30px}
}
/* A restored, genuinely aligned Home lead-in must be fully visible on its
   first foreground paint, not spend another 420ms fading from hidden. */
html[data-page="home"][data-scroll-settle-restoring] #journey.is-home-step>.stepper {transition:none!important}
/* Keep the space reserved; the stepper itself appears only in a held frame.
   Standalone Shop step navigation is always visible. */
html[data-page="home"] #journey.is-home-step>.stepper {
  opacity:0;
  pointer-events:none;
  will-change:opacity;
  transition:opacity 420ms cubic-bezier(.4,0,.2,1);
}
/* The entry signal starts the visual fade while the browser is still settling.
   Only confirmed capture enables the navigation controls; departure removes
   both states immediately so the 420ms fade-out can start without a late flash. */
html[data-page="home"] #journey.is-home-step:is([data-scroll-settle-captured],[data-scroll-settle-entering])>.stepper {
  opacity:1;
}
html[data-page="home"] #journey.is-home-step[data-scroll-settle-captured]>.stepper {
  pointer-events:auto;
}
@media(prefers-reduced-motion:reduce) {
  html[data-page="home"] #journey.is-home-step>.stepper {transition:none}
}
@media print {
  .scroll-settle-frame,html[data-page="home"] #journey {min-block-size:0;display:block}
  :is([data-scroll-settle-target],[data-scroll-settle-follower]) {translate:none!important}
  [data-scroll-settle-native] {scroll-snap-type:none!important}
}