/* Stable Home frame. Cue and stepper stay mounted in one reserved grid track. */
/* 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-snap-header-height,0px) - var(--home-frame-tail-height,0px));
  min-block-size:calc(100dvh - var(--scroll-snap-header-height,0px) - var(--home-frame-tail-height,0px));
  padding-block:24px;
  display:flex;
  flex-direction:column;
}
html[data-page="home"] #journey.is-home-step {scroll-margin-block:var(--scroll-snap-header-height,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;
}
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"] #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-snap-header-height,0px));
    min-block-size:calc(100dvh - var(--scroll-snap-header-height,0px));
  }
  html[data-page="home"] #stepContent>.step-heading+:is(.choice-grid,form,.review-grid) {padding-block:30px}
}
/* One configured timeline: outgoing fade, then incoming fade. Both nodes stay
   in the same grid track. Reversing phases retargets these transitions in place. */
html[data-page="home"] #journey.is-home-step>:is(.stepper-intro,.stepper) {
  transition:opacity var(--scroll-snap-exit-duration,0ms) var(--scroll-snap-easing,linear),
    visibility 0s linear var(--scroll-snap-exit-duration,0ms);
}
html[data-page="home"] #journey.is-home-step>.stepper {opacity:0;visibility:hidden;pointer-events:none}
html[data-page="home"] #journey.is-home-step>.stepper-intro {
  transition-duration:var(--scroll-snap-entry-duration,0ms),0s;
  transition-delay:var(--scroll-snap-exit-duration,0ms),0s;
}
html[data-page="home"] #journey.is-home-step:is([data-scroll-snap-phase="held"],[data-scroll-snap-phase="settling"],[data-scroll-snap-phase="resisting"])>.stepper {
  opacity:1;visibility:visible;
  transition-duration:var(--scroll-snap-entry-duration,0ms),0s;
  transition-delay:var(--scroll-snap-exit-duration,0ms),0s;
}
html[data-page="home"] #journey.is-home-step:is([data-scroll-snap-phase="held"],[data-scroll-snap-phase="settling"],[data-scroll-snap-phase="resisting"])>.stepper-intro {
  opacity:0;visibility:hidden;
  transition-duration:var(--scroll-snap-exit-duration,0ms),0s;
  transition-delay:0s,var(--scroll-snap-exit-duration,0ms);
}
html[data-page="home"] #journey.is-home-step[data-scroll-snap-phase="held"]>.stepper {pointer-events:auto}
@media(prefers-reduced-motion:reduce) {
  html[data-page="home"] #journey.is-home-step>:is(.stepper-intro,.stepper) {transition:none}
}
@media print {
  html[data-page="home"] #journey>.stepper-intro {display:none!important}
  html[data-page="home"] #journey {min-block-size:0;display:block}
}