/* 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}
/* An always-present Home lead-in cue occupies the exact first grid track as the
   stepper. Overlaying those siblings avoids any height shift when capture begins
   and leaves the stepper a direct child for scroll/transition ownership. */
html[data-page="home"] #journey>.stepper-intro {display:none}
html[data-page="home"] #journey.is-home-step {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:max-content minmax(min-content,1fr);
}
html[data-page="home"] #journey.is-home-step>:is(.stepper-intro,.stepper) {
  grid-column:1;
  grid-row:1;
}
html[data-page="home"] #journey.is-home-step>.stepper-intro {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding-bottom:24px;
  margin-bottom:35px;
  pointer-events:none;
  opacity:1;
  visibility:visible;
  /* Do not let the translucent stepper reveal the cue underneath. Restore
     visibility only after its exit, alongside the delayed cue fade-in. */
  transition:opacity 160ms cubic-bezier(.4,0,.2,1) 260ms,
             visibility 0s linear 260ms;
}
html[data-page="home"] #journey.is-home-step>.stepper {
  position:relative;
  z-index:1;
}
html[data-page="home"] #journey.is-home-step>#stepContent {
  grid-column:1;
  grid-row:2;
  min-width:0;
}
html[data-page="home"] .stepper-intro-label {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
html[data-page="home"] .stepper-intro-label .icon {
  width:16px;
  height:16px;
  flex:none;
}
html[data-page="home"] #journey.is-home-step:is([data-scroll-settle-captured],[data-scroll-settle-entering])>.stepper-intro {
  opacity:0;
  visibility:hidden;
  /* Finish the opacity fade and remove the cue from painting before the
     stepper's delayed entrance. This also prevents a lingering painted layer. */
  transition-delay:0ms,160ms;
}
/* The mobile controller owns the cue's exit/return animation and physically
   detaches its node when the stepper is entering or captured. Suppress CSS
   transitions here to avoid a competing WebKit discrete-display animation.
   The active-state selector above still provides a no-JavaScript fallback. */
@media(max-width:720px) {
  html[data-page="home"] #journey.is-home-step>.stepper-intro {
    transition:none!important;
  }
}
html[data-page="home"] #stepContent {flex:1}
html[data-page="home"] #stepContent>* {flex-shrink:0}
/* Mobile keeps symmetric body padding; desktop overrides it for both
   the inline Home lead-in and standalone Shop steps below. */
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}
}
/* Both desktop Shop routes and Home's inline step-one lead-in share
   the existing measured journey frame. Keep the heading in a consistent
   two-line slot, then center the content in the remaining height. Do not
   change the Home lead-in's separate scroll-capture behavior. */
@media screen and (min-width:721px) {
  html[data-page="home"] #journey {padding-bottom:70px}
  html[data-page="home"] #journey #stepContent>.step-heading {
    min-height:84px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 35px;
  }
  html[data-page="home"] #journey #stepContent>.step-heading :is(h1,h2) {
    line-height:1.16;
  }
  html[data-page="home"] #journey #stepContent>.step-heading+:is(.choice-grid,form,.review-grid) {
    padding-block:0;
  }
  html[data-page="home"] #journey:not(.is-home-step) #stepContent>.review-grid {
    margin-top:auto;
    margin-bottom:0;
  }
  html[data-page="home"] #journey:not(.is-home-step) #stepContent>.review-grid+.flow-actions {
    margin-bottom:auto;
  }
}
@media(max-width:720px) {
  html[data-page="home"] #journey {padding-block:20px 28px}
  html[data-page="home"] #journey.is-home-step>.stepper-intro {
    padding-bottom:21px;
    margin-bottom:30px;
  }
  /* 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>:is(.stepper,.stepper-intro) {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;
  /* On departure fade immediately; on entry wait for the cue to disappear. */
  transition:opacity 260ms 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;
  transition-delay:160ms;
}
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,
  html[data-page="home"] #journey.is-home-step>.stepper-intro {transition:none}
}
@media print {
  html[data-page="home"] #journey>.stepper-intro {display:none!important}
  .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}
}