/* Keep the entire interactive scene inside the actual visible viewport. */
@media (max-height: 780px) and (min-width: 901px) {
  .journey{--story-height:calc(100svh - 76px)}
  .journey-visual.hero-art{min-height:0}
  .chapter-hero .chapter-inner,.chapter-features .chapter-inner{padding:24px 0}
  .chapter-hero .hero-copy h1{font-size:clamp(32px,3.4vw,48px);margin-bottom:18px}
  .chapter-hero .hero-copy .hero-lead{font-size:14px}
  .chapter-hero .hero-copy .hero-kicker{margin-bottom:16px}
  .chapter-hero .hero-actions{margin-top:20px}
  .chapter-hero .hero-copy .hero-price{margin-top:12px}
  .chapter-features h2{font-size:34px}
  .chapter-features .demo-tabs{margin-top:14px}
  .chapter-features .demo-tabs>button{padding:10px 12px}
  .journey-visual[data-news-index]{--news-card-top:34%;--news-card-height:calc(var(--story-height) * .66 - 76px)}
  .world-news .news-content{padding:9px 16px 11px}
  .world-news .news-content p{margin-top:7px}
  .news-controls{top:calc(var(--news-card-top) + var(--news-card-height) + 8px)}
  .world-context-note{bottom:0;font-size:8px}
}
@media (max-width: 900px) {
  .journey{--story-height:calc(100svh - 67px)}
  .journey-visual.hero-art{min-height:0}
  .journey-chapter{min-height:var(--story-height);height:var(--story-height)}
  .journey-visual[data-news-index]{--news-card-top:34%;--news-card-height:calc(var(--story-height) * .66 - 83px)}
  .world-news .news-content{padding:10px 15px 12px}
  .world-news .news-impact{font-size:11px;line-height:1.6}
  .world-news .news-content p{margin-top:7px}
  .world-news .news-post figcaption{padding:5px 12px}
  .news-controls{top:calc(var(--news-card-top) + var(--news-card-height) + 8px);min-height:38px}
  .news-controls button{width:38px;height:38px}
  .world-context-note{bottom:0;left:7%;right:7%;font-size:7px}
  .chapter-news .chapter-copy,.chapter-problem .chapter-copy,.chapter-product .chapter-copy{top:3%}
  .chapter-hero .chapter-copy{top:50%}
  .chapter-hero .hero-copy h1{font-size:32px;margin-bottom:18px}
  .chapter-hero .hero-copy .hero-lead{font-size:12px}
  .chapter-hero .hero-copy .hero-kicker{margin-bottom:12px}
  .chapter-hero .hero-actions{margin-top:16px;gap:10px}
  .chapter-hero .hero-copy .hero-price{margin-top:10px;font-size:9px}
  .chapter-hero .hero-text-link{font-size:10px}
  .journey-visual .orbit-protection{top:8%}
  .journey-visual .orbit-update{top:24%}
  .journey-visual .orbit-network{top:37%}
  .journey-visual[data-chapter="2"] figcaption,.journey-visual[data-chapter="3"] figcaption{bottom:4%}
  .journey-toolbar .motion-toggle{bottom:10px;left:10px;padding:6px 10px;font-size:9px}
}
@media (max-width:900px) and (max-height:740px) {
  .chapter-hero .chapter-copy{top:46%}
  .chapter-hero .hero-copy h1,html[lang=en] .chapter-hero .hero-copy h1{font-size:29px;line-height:1.2;margin-bottom:13px}
  .chapter-hero .hero-copy .hero-kicker{font-size:8px;margin-bottom:10px}
  .chapter-hero .hero-copy .hero-lead{font-size:11px;line-height:1.7}
  .chapter-hero .hero-actions{margin-top:13px}
  .chapter-hero .hero-copy .hero-price{margin-top:8px}
  .journey-visual .orbit-network{top:34%}
  .chapter-news h2,.chapter-problem h2,.chapter-product h2,.chapter-pricing h2,
  html[lang=en] .chapter-news h2,html[lang=en] .chapter-problem h2,html[lang=en] .chapter-product h2,html[lang=en] .chapter-pricing h2{font-size:25px;line-height:1.3}
  .chapter-kicker{font-size:8px;margin-bottom:9px}
  .chapter-news .chapter-lead,.chapter-problem .chapter-lead,.chapter-product .chapter-lead,.chapter-pricing .chapter-lead{font-size:10px;line-height:1.6;margin-top:9px}
  .chapter-features h2,html[lang=en] .chapter-features h2{font-size:26px}
  .chapter-features h2 br{display:block}
  .chapter-features .demo-tabs{margin-top:11px}
  .chapter-features .demo-tabs>button{padding:9px}
  .chapter-pricing .world-purchase{bottom:4%;padding:12px}
  .world-purchase{bottom:4%;padding:12px;gap:8px;width:calc(100% - 40px)}
  .world-purchase strong{font-size:29px}
  .calm-protection{top:31%}.calm-update{top:42%}.calm-network{bottom:38%}
}
/* A short landscape screen uses two columns so controls remain reachable. */
@media (min-width:560px) and (max-width:900px) and (max-height:500px) {
  .chapter-inner{width:calc(100% - 40px)}
  .journey-chapter .chapter-copy{top:8%;left:0;right:auto;width:43%;max-width:none;margin:0;text-align:left;padding:0}
  .chapter-hero .hero-copy h1,html[lang=en] .chapter-hero .hero-copy h1{font-size:25px;line-height:1.15}
  .chapter-copy h2,html[lang=en] .chapter-copy h2{font-size:23px;line-height:1.25}
  .chapter-copy .chapter-lead{font-size:10px;line-height:1.5;margin-top:10px}
  .chapter-hero .hero-actions{gap:8px;margin-top:10px}
  .chapter-hero .hero-actions .button{padding:8px 12px;min-height:34px}
  .journey-visual .orbit-label{padding:7px;min-width:95px}
  .journey-visual .orbit-label strong{font-size:9px}
  .journey-visual .orbit-label small{font-size:6px}
  .journey-visual .orbit-protection{left:53%;top:10%}
  .journey-visual .orbit-update{right:2%;top:42%}
  .journey-visual .orbit-network{left:55%;top:69%}
  .journey-visual[data-news-index]{--news-card-left:47%;--news-card-width:50%;--news-card-top:3%;--news-card-height:calc(var(--story-height) - 66px)}
  .world-news .news-card:nth-child(n){max-width:none;margin-left:0}
  .world-news .news-content{padding:6px 12px}
  .world-news .news-impact{font-size:9px;line-height:1.4}
  .world-news .news-post figcaption{font-size:6px!important;padding:3px 9px}
  .news-controls{left:47%;width:50%;top:calc(var(--news-card-top) + var(--news-card-height) + 5px)}
  .news-controls button{width:30px;height:30px}
  .world-context-note{left:3%;right:56%;bottom:10%;font-size:7px}
  .chapter-product .computer-explainer{margin-top:12px;padding-top:10px}
  .chapter-product .computer-explainer strong,.chapter-product .computer-explainer span{font-size:8px;line-height:1.5}
  .defender-source{font-size:8px}
  .chapter-features .demo-tabs{gap:5px;margin-top:10px}
  .chapter-features .demo-tabs>button{padding:8px;gap:6px}
  .chapter-features .demo-tabs strong{font-size:9px}
  .journey-visual figcaption,.journey-visual[data-chapter] figcaption{left:48%;right:3%;bottom:3%;font-size:7px}
  .world-purchase{left:3%;bottom:9%;transform:none;width:40%;padding:10px;gap:5px}
  .world-purchase strong{font-size:25px}.world-purchase .chapter-buy{min-height:34px;padding:7px 10px;font-size:11px}
  .calm-protection{left:53%;top:15%}.calm-update{right:3%;top:43%}.calm-network{left:57%;bottom:17%}
}