/* Phones: two screens. First the hero (photo, headline, a cue to scroll), then the picker below it.
   Loaded last so it can reset the earlier one-screen phone layout. Desktop and tablets are untouched. */
.scroll-cue{display:none}
@media (max-width:700px){
 html{height:auto;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y proximity}
 body{display:block;height:auto;min-height:100svh;overflow:visible;padding:0}
 .masthead{position:absolute;top:0;left:0;right:0;height:58px;padding:0 16px;z-index:50}
 .world-photo{position:fixed;inset:0}
 .experience{display:block;height:auto;max-width:none;margin:0;padding:0 16px;min-height:0}
 /* screen 1 */
 .story{min-height:100svh;height:auto;padding:84px 4px 176px;justify-content:flex-end;scroll-snap-align:start}
 .story-copy{padding:0}
 .story-overline{font-size:11px;letter-spacing:.12em;margin-bottom:14px}
 .story h1{font-size:clamp(40px,13vw,64px);line-height:1.02;max-width:9em}
 .story p{display:block;font-size:15px;line-height:1.6;margin-top:16px;max-width:26em}
 .story-bottom{display:flex;border-top:1px solid #ffffff40;margin-top:22px;padding-top:14px;font-size:12px}
 .scroll-cue{display:flex;flex-direction:column;align-items:flex-start;gap:6px;position:absolute;left:4px;bottom:100px;color:var(--acid);font:600 12px/1 Onest,sans-serif;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
 .scroll-cue .ico{width:22px;height:22px;stroke-width:1.5;animation:cue 1.8s ease-in-out infinite}
 @keyframes cue{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}}
 /* screen 2 */
 .wizard{height:calc(100svh - 168px);min-height:480px;margin:8px 0 14px;scroll-snap-align:start;scroll-margin-top:12px}
 .report-panel{height:calc(100svh - 168px);min-height:480px}
 .experience.show-report{display:block;padding-top:76px}
 .page-footer{height:auto;padding:6px 16px 104px}
}
@media (max-width:700px) and (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.scroll-cue .ico{animation:none}}
@media (max-width:700px) and (max-height:560px){.story{padding-bottom:120px}.scroll-cue{bottom:84px}.story h1{font-size:clamp(32px,10vw,48px)}.story p{font-size:13px;margin-top:10px}}