/* Full source frame, with readable text layered over the animation. */
.system-page .story-shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,#fffffffA 0%,#fffffff2 var(--copy-bottom,210px),#ffffff00 calc(var(--copy-bottom,210px) + 85px))}
.system-page .story-copy{z-index:6;pointer-events:none}
.system-page .utilities-status{z-index:6}
.system-page .story-copy h1{margin-inline:0}

@media(orientation:landscape){
 .system-page .story-shade{background:linear-gradient(90deg,#fffffffa 0%,#fffffff2 23%,#ffffffbd 32%,#ffffff00 46%)}
 .system-page .story-copy{left:var(--side);right:auto;top:24%;width:29%;max-width:440px;margin:0;text-align:left}
 .system-page .story-copy h1{font-size:clamp(26px,3.25vw,50px);line-height:1.08;margin:0 0 20px;max-width:none;text-wrap:balance}
 .system-page .story-copy h1 br{display:block}
 .system-page .story-copy h1 em:before{content:none}
 .system-page .story-kicker{font-size:9px;margin-bottom:20px}
 .system-page .story-description{font-size:clamp(11px,1.03vw,15px);line-height:1.75;max-width:340px;margin:0}
 .system-page .story-description br{display:none}
 .system-page .utilities-status{left:var(--side);right:auto;transform:none;justify-content:flex-start;gap:22px}
 .system-page .utilities-status span{font-size:9px}
}

@media(orientation:portrait){
 .system-page .story-copy{top:64px;left:22px;right:22px;width:auto;max-width:760px;margin-inline:auto;text-align:center}
 .system-page .story-copy h1{font-size:clamp(31px,4.7vw,46px);line-height:1.07;max-width:680px;margin:0 auto 12px}
 .system-page .story-copy h1 br{display:none}
 .system-page .story-copy h1 em:before{content:' '}
 .system-page .story-description{font-size:clamp(12px,1.65vw,15px);line-height:1.6;max-width:570px;margin:0 auto}
 .system-page .utilities-status{left:50%;transform:translateX(-50%);justify-content:center}
}

@media(orientation:landscape) and (max-height:650px){
 .system-page .story-copy{top:22%;width:29%}
 .system-page .story-copy h1{font-size:clamp(25px,3.1vw,36px);margin-bottom:12px}
 .system-page .story-kicker{font-size:7px;margin-bottom:13px}
 .system-page .story-description{font-size:11px;line-height:1.6}
 .system-page .utilities-status{gap:14px}
 .system-page .utilities-status span{font-size:8px}
}

@media(orientation:landscape) and (max-height:530px){
 .system-page .story-copy{top:19%;width:28%}
 .system-page .story-copy h1{font-size:clamp(22px,3vw,28px);margin-bottom:10px}
 .system-page .story-kicker{font-size:6px;margin-bottom:10px}
 .system-page .story-description{font-size:10px;line-height:1.5}
 .system-page .utilities-status{gap:12px}
 .system-page .utilities-status span{font-size:7px}
}

@media(orientation:portrait) and (max-width:360px){
 .system-page .story-copy{top:59px;left:19px;right:19px}
 .system-page .story-copy h1{font-size:28px}
 .system-page .story-description{font-size:11px}
}