/* Approved comic illustrations, loaded by the main homepage only. */
.home-story-page .animation[data-phase="0"] .board-frame{background-image:linear-gradient(90deg,#ffffff26 0%,#ffffff59 36%,#ffffffc7 65%,#ffffffdb 100%),url('/alternativforside/slide-1.png')}
.home-story-page .animation[data-phase="1"] .board-frame{background-image:linear-gradient(#ffffffb8,#ffffffb8),url('/alternativforside/slide-2.png')}
.home-story-page .conversation{background-image:linear-gradient(#ffffffb8,#ffffffb8),url('/alternativforside/slide-3.png')}
.home-story-page .animation[data-phase="3"] .board-frame{background-image:linear-gradient(#ffffffb8,#ffffffb8),url('/alternativforside/slide-4.png')}
.home-story-page .everyday-scene{background:none}
@media(max-width:720px){.home-story-page .conversation{background:none}.home-story-page .everyday-scene{background-image:linear-gradient(#ffffffb8,#ffffffb8),url('/alternativforside/slide-3.png')}}
/* Slide 3 speech uses the same solid palette and ink edge as the cards. */
.home-story-page .everyday-quote{background:var(--card);color:#fff;border:2px solid var(--ink);box-shadow:5px 6px 0 var(--ink)}
.home-story-page .football .everyday-quote{background:var(--green);color:var(--ink)}
.home-story-page .bedroom .everyday-quote{background:var(--pink);color:var(--ink)}
.home-story-page .everyday-quote:before{border-color:var(--ink);border-width:2px}

/* Larger illustrated phone on the final slide; other scenes are unchanged. */
.home-story-page .animation[data-phase="3"] .bank-phone{top:80px;transform:rotate(5deg) scale(1.16);transform-origin:center top}
@media(max-width:720px){.home-story-page .animation[data-phase="3"] .bank-phone{top:145px}}

/* Mobile browser only: compact header and readable first scene. */
@media(max-width:720px){
 .home-story-page>header{grid-template-columns:48px minmax(0,1fr) 62px;gap:8px;padding:10px 12px;align-items:center}
 .home-story-page>header>.home-brand{grid-column:1;grid-row:1}
 .home-story-page>header>.home-brand img{content:url('/logo-desktop.svg');width:44px;height:44px;aspect-ratio:1;border-radius:7px}
 .home-story-page>header>.intro{grid-column:2;grid-row:1;padding:0;text-align:left}
 .home-story-page>header>.intro h1{font-size:clamp(9.5px,2.8vw,11.5px);line-height:1.28;letter-spacing:0;margin:0;max-width:none}
 .home-story-page>header>.intro h1 br{display:initial}
 .home-story-page>header>.header-actions{grid-column:3;grid-row:1}
 .home-story-page .login-menu summary{font-size:8px;padding:11px 5px;white-space:nowrap;border-radius:9px;min-height:36px}
 .home-story-page .login-menu summary span{margin-left:3px}
 .home-story-page .animation[data-phase="0"] .board-frame{background-image:linear-gradient(#ffffff33,#ffffff33),url('/alternativforside/slide-1.png');background-size:100% auto;background-position:center 68%;background-color:#fff;background-repeat:no-repeat}
 .home-story-page .lesson-copy{top:27px;left:5%;right:5%;text-align:center}
 .home-story-page .lesson-copy h2{font-size:24px;margin:9px 0;line-height:1.12}
 .home-story-page .lesson-copy p{color:#000;font-size:12px;line-height:1.4;margin:8px 0}
 .home-story-page .story-caption{min-width:0;flex:1;gap:6px}
 .home-story-page .animation[data-phase="0"] .story-caption p{font-size:clamp(7.5px,2.15vw,10px);white-space:nowrap;max-width:none;min-height:0}
 .home-story-page .animation[data-phase="0"] .story-caption>span{font-size:7px}
 .home-story-page .animation[data-phase="0"] .story-footer{gap:6px}
 .home-story-page .animation[data-phase="0"] .story-footer button{font-size:8px;padding:9px 6px}
}

/* Mobile slide headings share the first slide's upper, centered position. */
@media(max-width:720px){
 .home-story-page .class-activity,.home-story-page .closing{top:27px;left:5%;right:5%;text-align:center}
 .home-story-page .conversation .place-title{top:17px;left:5%;right:5%;text-align:center}
}

.home-story-page .desktop-heading,.home-story-page .mobile-heading{color:inherit}
.home-story-page .mobile-heading{display:none}
@media(max-width:720px){.home-story-page .desktop-heading{display:none}.home-story-page .mobile-heading{display:inline}}

/* Mobile-only correction and a continuous, left-to-right card sequence. */
@media(max-width:720px){
 .home-story-page .animation[data-phase="1"] .board-frame{background-image:linear-gradient(#ffffffb8,#ffffffb8),url('/alternativforside/slide-2-mobile.png')}
 .home-story-page .animation[data-phase="0"] .word-card,.home-story-page .animation[data-phase="1"] .word-card{left:10px;top:190px;transform:scale(var(--mobile-card-scale,.42));transform-origin:top left;z-index:6}
 .home-story-page .class-activity{transition:none}
 .home-story-page .class-activity .phone-row{top:163px;left:-5.5556%;right:-5.5556%;display:block;height:260px}
 .home-story-page .class-activity .phone{position:absolute;top:0;width:var(--mobile-card-width,106px);height:250px;transform:none;transition:none;pointer-events:none}
 .home-story-page .class-activity .phone-one{left:calc(50% - var(--mobile-card-width,106px)/2);opacity:var(--mobile-first-opacity,0)}
 .home-story-page .class-activity .phone-two{left:auto;right:10px;opacity:var(--mobile-second-opacity,0)}
 .home-story-page .class-activity .phone>strong{font-size:16px}
}
@media(max-width:720px){.home-story-page .story-footer{height:54px;min-height:54px}}

/* Approved mobile composition: one fixed text area and picture area in every scene. */
@media(max-width:720px){
 .home-story-page .stage-viewport{height:520px!important}
 .home-story-page .stage-viewport>.stage{height:520px;width:100%!important;transform:none!important}
 .home-story-page .board-frame,.home-story-page .conversation{inset:10px 5px 20px;background:#fff!important;border:1px solid #d8d3c9;border-radius:18px;overflow:hidden}
 .home-story-page .board-frame:after,.home-story-page .conversation:after{content:"";position:absolute;top:128px;left:0;right:0;height:232px;background-position:center;background-size:cover;background-repeat:no-repeat;pointer-events:none}
 .home-story-page .animation[data-phase="0"] .board-frame:after{background-image:linear-gradient(#ffffff15,#ffffff66),url('/alternativforside/slide-1.png')}
 .home-story-page .animation[data-phase="1"] .board-frame:after{background-image:linear-gradient(#ffffff15,#ffffff66),url('/alternativforside/slide-2-mobile.png')}
 .home-story-page .conversation:after{background-image:linear-gradient(#ffffff15,#ffffff66),url('/alternativforside/slide-3.png')}
 .home-story-page .animation[data-phase="3"] .board-frame:after{background-image:linear-gradient(#ffffff15,#ffffff66),url('/alternativforside/slide-4.png')}
 .home-story-page .lesson-copy,.home-story-page .class-activity,.home-story-page .closing{top:24px;left:5%;right:5%;text-align:center;z-index:3}
 .home-story-page .conversation .place-title{top:14px;left:5%;right:5%;z-index:3}
 .home-story-page .lesson-copy .eyebrow,.home-story-page .class-activity .eyebrow,.home-story-page .place-title .eyebrow,.home-story-page .closing .eyebrow{display:block;font-size:7px;line-height:1.3;min-height:9px}
 .home-story-page .lesson-copy h2,.home-story-page .class-activity h2,.home-story-page .place-title h2,.home-story-page .closing h2{font-size:23px;line-height:1.05;min-height:48px;margin:9px 0 0;letter-spacing:-.6px}
 .home-story-page .lesson-copy h2 br,.home-story-page .class-activity h2 br{display:initial}
 .home-story-page .lesson-copy p{font-size:10px;line-height:1.3;margin:5px 0 0;color:#111}
 .home-story-page .animation[data-phase="0"] .word-card,.home-story-page .animation[data-phase="1"] .word-card{top:258px;left:15px;transform:scale(.548);transform-origin:top left;z-index:7}
 .home-story-page .animation[data-phase="1"] .word-card{transition:transform .45s,opacity .45s}
 .home-story-page .animation[data-phase="1"][data-mobile-focus="1"] .word-card,.home-story-page .animation[data-phase="1"][data-mobile-focus="2"] .word-card{transform:scale(.395) rotate(-7deg);opacity:.7}
 .home-story-page .class-activity .phone-row{top:234px;left:0;right:0;height:228px;pointer-events:none}
 .home-story-page .class-activity .phone{width:138px;height:228px;padding:14px 9px 10px;transform:scale(.72);transform-origin:center top;transition:transform .45s;pointer-events:auto;cursor:pointer}
 .home-story-page .class-activity .phone-one{left:calc(50% - 69px)}
 .home-story-page .class-activity .phone-two{right:0;transform:scale(.72) rotate(7deg)}
 .home-story-page .animation[data-mobile-focus="1"] .phone-one,.home-story-page .animation[data-mobile-focus="2"] .phone-two{transform:none;z-index:4}
 .home-story-page .class-activity .phone>strong{font-size:17px;padding:10px 1px}
 .home-story-page .class-activity .phone p{font-size:9px;line-height:1.35}
 .home-story-page .class-activity .choice,.home-story-page .class-activity .answer{font-size:8px;padding:7px 5px}
 .home-story-page .class-activity .phone label{font-size:6px;margin-top:9px}
 .home-story-page .class-activity .phone .writing{font-size:7px;min-height:30px;padding:7px 5px}
 .home-story-page .class-activity .sent{font-size:6px;padding:8px 3px;margin-top:12px}
 .home-story-page .everyday-scenes{display:block;inset:0;z-index:2}
 .home-story-page .everyday-scene{position:static;background:none!important}
 .home-story-page .everyday-quote{position:absolute;width:72%;min-height:0;font-size:13px;padding:11px 12px;box-shadow:3px 4px #171713}
 .home-story-page .everyday-quote p{font-size:13px;line-height:1.35}
 .home-story-page .canteen .everyday-quote{left:10px;top:250px}
 .home-story-page .football .everyday-quote{right:10px;top:326px}
 .home-story-page .bedroom .everyday-quote{right:10px;top:402px}
 .home-story-page .animation[data-phase="3"] .bank-phone{right:15px;top:258px;width:142px;height:228px;min-height:0;padding:14px 10px 10px;transform:none;border-radius:12px}
 .home-story-page .bank-phone h3{font-size:10px;margin:7px 0 10px}
 .home-story-page .bank-phone .saved-word-list{gap:4px}
 .home-story-page .bank-phone .saved-word-row{padding:6px;margin:0}
 .home-story-page .bank-phone .saved-word-row span{font-size:6px;margin-bottom:2px}
 .home-story-page .bank-phone .saved-word-row b{font-size:10px;line-height:1.15}
 .home-story-page .bank-phone .saved-label{font-size:5px;margin-top:8px}
 .home-story-page .story-footer{height:58px;min-height:58px;gap:7px;padding:8px 2px 0}
 .home-story-page .story-caption{gap:7px}
 .home-story-page .story-caption p,.home-story-page .animation[data-phase="0"] .story-caption p{font-size:9px;line-height:1.25;font-weight:700;max-width:none;min-height:0;white-space:normal}
 .home-story-page .story-caption>span,.home-story-page .animation[data-phase="0"] .story-caption>span{font-size:7px}
 .home-story-page .story-footer button,.home-story-page .animation[data-phase="0"] .story-footer button{font-size:7px;padding:9px 6px}
}
@media(max-width:720px){
 .home-story-page .animation[data-phase="1"][data-mobile-focus="1"] .word-card,.home-story-page .animation[data-phase="1"][data-mobile-focus="2"] .word-card{z-index:2}
 .home-story-page .class-activity .phone-one{opacity:calc(var(--mobile-first-opacity,0) * .7)}
 .home-story-page .class-activity .phone-two{opacity:calc(var(--mobile-second-opacity,0) * .7)}
 .home-story-page .animation[data-mobile-focus="1"] .phone-one{opacity:var(--mobile-first-opacity,0)}
 .home-story-page .animation[data-mobile-focus="2"] .phone-two{opacity:var(--mobile-second-opacity,0)}
}