/* Phones turned sideways: a short screen (500px or less) in landscape gets its
   own layout (Ollie, 7 Nov 2026: "a different view for landscape"). It keeps
   the desktop's side by side arrangement, with every scene's words on the left
   and its picture on the right, sized for a screen about 390px tall so nothing
   overlaps. js/home-story.js moves the pictures to match (window.__heroSpot). */
@media (orientation: landscape) and (max-height: 500px) {
  /* a slimmer bar */
  .topbar .tb-in{padding:10px 28px}
  .ann{height:28px;font-size:10px}
  .topbar.show .ann{margin-top:-28px}

  /* hero: everything in one screen */
  .hero{min-height:100vh;min-height:100svh;padding-top:70px;padding-bottom:28px}
  .hero-inner{margin-top:0!important}
  .tagline{font-size:min(5.4vw,8.5vh * 1.6);margin-bottom:10px}
  .posline{font-size:12px;margin-bottom:12px}
  .brief{font-size:11.5px;line-height:1.7;margin-bottom:10px;max-width:560px}
  .brief-2,.scroll-hint{display:none}

  /* the story: words left, picture right */
  .hstory .copy{left:5vw;bottom:7vh;max-width:36vw}
  .hstory .copy h1,.hstory .copy h2{font-size:21px;margin-bottom:8px}
  .hstory .copy p{font-size:11px;line-height:1.6}
  .hstory .eyebrow-y{margin-bottom:8px}
  .hs-mark,.hub2{width:60px}
  .msg{width:42px;border-radius:7px}
  .msg svg{width:20px}
  .party2{width:auto;gap:6px}
  .party2 img{width:54px;height:54px;padding:14px}
  .party2 b{font-size:10px;white-space:nowrap}
  .party2 span{display:none}

  /* the five steps: list on the left, the screen beside it, scaled to fit */
  .ft-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
  .ft-screen{position:sticky;top:64px;order:0;min-height:0;transform:scale(.78);transform-origin:top center}

  /* the founders' quote */
  .hs-quote{padding:10vh 48px 8vh}
  .hs-quote blockquote p{font-size:24px}

}

/* How it works and Onti AI: each scene's picture in the right 60%, scaled to
   fit (js/landscape.js gathers it), the words in the left third */
@media (orientation: landscape) and (max-height: 500px) {
  .ls-vis{position:absolute;top:0;right:0;width:calc(60vw / .62);height:calc(100% / .62);transform:scale(.62);transform-origin:top right}
  .story:not(.hstory) .copy{left:4vw;right:auto;bottom:4vh;max-width:37vw}
  .story:not(.hstory) .copy h1,.story:not(.hstory) .copy h2{font-size:20px;margin-bottom:8px}
  .story:not(.hstory) .copy p{font-size:10px;line-height:1.55}
  .story:not(.hstory) .num-o{font-size:30px;margin-bottom:4px}
}

/* the narrowest phones on their side (an iPhone SE, 667 x 375): a narrower
   words column and smaller circles, so the four parties have room */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 720px) {
  .hstory .copy{max-width:32vw}
  .hstory .copy h1,.hstory .copy h2{font-size:18px}
  .hs-mark,.hub2{width:48px}
  .party2 img{width:42px;height:42px;padding:11px}
  .party2 b{font-size:8px;letter-spacing:.06em}
  .msg{width:34px}
  .msg svg{width:16px}
}

/* tablets upright: each scene's picture across the top 60% of the screen,
   scaled to fit (js/landscape.js), the words in the space underneath */
@media (orientation: portrait) and (min-width: 760px) and (max-width: 1180px) {
  .ls-vis.pt{position:absolute;left:0;top:0;width:calc(100% / .7);height:calc(62% / .7);transform:scale(.7);transform-origin:top left}
  .story:not(.hstory) .copy{left:6vw;right:6vw;bottom:5vh;max-width:none}
  .story:not(.hstory) .copy p{max-width:620px}
}