/* The agency menu stays available; fictional demo navigation is untouched. */
html{--agency-header-height:100px;scroll-padding-top:calc(var(--agency-header-height) + 16px)}
body[data-page] > header{position:sticky;top:0;z-index:100;box-shadow:0 5px 18px #00000012}
html[data-theme=light] body[data-page] > header{box-shadow:0 5px 18px #263f2b12}
body[data-page] section[id],body[data-page] .style-compare,body[data-page] .quiz-results{scroll-margin-top:12px}
body[data-page="how-it-works.html"] .how-step{top:calc(var(--agency-header-height) + 28px + var(--note-index)*19px)}
@media(max-width:800px){html{--agency-header-height:82px}}
@media(max-width:700px){body[data-page="how-it-works.html"] .how-step{top:calc(var(--agency-header-height) + 16px + var(--note-index)*13px)}}
/* Short screens and reduced motion use the existing normal-flow process. */
@media(max-height:700px){body[data-page="how-it-works.html"] .how-step{position:relative;top:auto}}
@media(prefers-reduced-motion:reduce){body[data-page="how-it-works.html"] .how-step{position:relative!important;top:auto!important}}
@media(forced-colors:active){body[data-page] > header{border-bottom:1px solid CanvasText;box-shadow:none}}

/* Let every note settle fully in view before the next one arrives. */
@media(min-width:801px) and (min-height:801px) and (prefers-reduced-motion:no-preference){body[data-page="how-it-works.html"] .how-steps{display:block;gap:0;padding-bottom:45vh}body[data-page="how-it-works.html"] .how-step{margin-bottom:0}body[data-page="how-it-works.html"] .note-anchor:not(:first-child){margin-top:65vh}}
@media(max-width:800px),(max-height:800px){body[data-page="how-it-works.html"] .how-step{position:relative;top:auto;transform:none;margin-bottom:0}body[data-page="how-it-works.html"] .how-steps{gap:45px;padding-bottom:0}}