/* Keep layout contents within their columns; long pages retain normal scrolling. */
main,main :is(section,article,aside,figure,form,fieldset){min-width:0;box-sizing:border-box}
main :is(img,video,svg){max-width:100%}
main :is(input,select,textarea,button){max-width:100%;box-sizing:border-box}
main :is(h1,h2,h3,p,a,button,label){overflow-wrap:break-word}
main .actions{flex-wrap:wrap}
:is(.discovery-hero,.account-layout,.tp-hero,.tp-feature,.tp-details,.privacy-visual)>*{min-width:0}
.tp-hero,.tp-feature,.tp-details,.privacy-visual{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* The pinned desktop story must fit between the viewport's top and bottom. */
.scroll-story .story-stage{min-height:calc(100svh - 48px);padding:clamp(20px,3vh,36px);gap:clamp(20px,3vw,48px);overflow:visible;box-sizing:border-box}
.scroll-story .story-copy h2{font-size:clamp(28px,min(3.5vw,6vh),54px)}
.scroll-story .story-instruction{font-size:clamp(15px,1.2vw,19px);line-height:1.55}
.scroll-story .story-drawing{max-width:min(100%,calc((100svh - 260px)*1.6));margin-inline:auto}
.scroll-story .story-concept{height:80px;margin-top:10px}
.scroll-story .story-concept svg{height:80px;max-width:360px}
.scroll-story .story-progress{margin-top:16px}
.scroll-story .story-steps{gap:9px;margin-top:20px}
/* Previews keep their proportions without becoming taller than the screen. */
.course-showcase .showcase-stage{max-height:clamp(180px,calc(100svh - 300px),520px);aspect-ratio:8/5}
.course-showcase .showcase-stage>svg{object-fit:contain}
.discovery-studio .studio-picture{max-height:clamp(180px,calc(100svh - 260px),520px)}
.tp-hero img,.privacy-visual img{max-height:65svh;object-fit:contain}
@media(max-width:850px){.tp-hero,.tp-feature,.tp-details,.privacy-visual{grid-template-columns:minmax(0,1fr)}}
/* On phones and short windows, flow the section instead of pinning clipped content. */
@media(max-width:760px),(max-height:650px){
 .scroll-story{height:auto}
 .scroll-story .story-stage{position:relative;top:auto;min-height:0;padding:24px 18px;overflow:visible}
 .scroll-story .story-drawing{max-width:100%}
 .scroll-story .story-copy h2{min-height:0;font-size:clamp(26px,5vw,38px)}
 .scroll-story .story-instruction{font-size:15px}
 .scroll-story .story-visual{width:100%}
 .scroll-story .story-concept{height:70px}
 .scroll-story .story-concept svg{height:70px}
 .family-guide.course-showcase{position:relative;top:auto}
}
@media(max-width:760px){.scroll-story .story-stage{grid-template-columns:minmax(0,1fr);gap:20px}.course-showcase .showcase-pair{gap:6px}.tp-dot-groups>div{padding:8px;gap:6px}.tp-dot-groups i{width:16px;height:16px}}