/* Preserve the original desktop positioning of the product images. */
.device-composition{display:contents}
/* Portrait phones: copy and scene have separate, predictable space. */
@media (max-width:1024px) {
  html{overflow-x:clip}
  body{height:760svh}
  .stage{height:100svh;bottom:auto}
  .topbar{padding:calc(16px + env(safe-area-inset-top)) 20px 12px}
  .brand img{width:110px}
  .brand b{font-size:11px}
  .grain,.transition-wash,.route{display:none}
  .ambient{background:linear-gradient(180deg,#151211 0,transparent 40%,transparent 85%,#151211);mix-blend-mode:normal}
  .scene{inset:34% 0 54px;transform:none!important;filter:none!important;overflow:hidden;background:#151211}
  .scene:after{background:linear-gradient(180deg,#151211 0,transparent 14%,transparent 80%,#151211);pointer-events:none}
  #sceneOrder img,#sceneServed img{object-position:35% 50%}
  #scenePayment{background:#151211}
  .payment-photo{mask-image:none}
  .intro,.copy,.copy.right,#copyOrder,#copyKitchen,#copyServed,#copyPayment{
    left:20px;right:20px;top:calc(76px + env(safe-area-inset-top));bottom:auto;width:auto;transform:none!important;
  }
  .eyebrow{font-size:9px;letter-spacing:.15em;margin-bottom:12px;gap:8px}
  .eyebrow:before{width:20px}
  .intro h2{font-size:clamp(40px,10.8vw,52px);line-height:.98}
  .copy h2,#copyOrder h2,#copyKitchen h2,#copyServed h2,#copyPayment h2{font-size:clamp(32px,8.8vw,42px);line-height:1.02}
  .intro p,.copy p,#copyOrder p,#copyKitchen p,#copyPayment p{font-size:13px;line-height:1.5;margin-top:12px;max-width:36ch}
  .copy .label{display:none}
  .scroll-cue{margin-top:12px;letter-spacing:.12em;font-size:9px}
  .scroll-cue i{width:25px;height:25px}
  .progress{left:20px;right:20px;top:auto;bottom:calc(18px + env(safe-area-inset-bottom));transform:none;flex-direction:row;gap:12px}
  .progress-line{position:relative;flex:1;height:2px;width:auto;background:#ffffff30}
  .progress-line i{position:absolute;inset:0;height:100%!important;width:100%;transform-origin:left;transform:scaleX(var(--scroll-progress,0))}
  .send-pill{top:auto;bottom:calc(67px + env(safe-area-inset-bottom));font-size:9px;white-space:nowrap}
  .kitchen-badge{top:auto;right:20px;bottom:calc(68px + env(safe-area-inset-bottom));font-size:8px;padding:9px 11px}
  .final{padding:84px 24px 70px;background:#151211ec}
  .final h2{font-size:clamp(44px,12vw,60px);line-height:.97}
  .final p{font-size:14px;line-height:1.6}
  .cta{min-height:48px;min-width:190px;align-items:center;justify-content:center;font-size:12px}
  .cta:focus-visible{outline:3px solid #b692e8;outline-offset:5px}
}
@media (max-width:760px) and (max-height:700px) and (orientation:portrait){
  .scene{top:39%}
  .intro,.copy,.copy.right,#copyOrder,#copyKitchen,#copyServed,#copyPayment{top:65px}
  .intro h2{font-size:38px}.copy h2,#copyOrder h2,#copyKitchen h2,#copyServed h2,#copyPayment h2{font-size:30px}
  .eyebrow{margin-bottom:8px}
  .intro p,.copy p,#copyOrder p,#copyKitchen p,#copyPayment p{font-size:12px;line-height:1.4;margin-top:8px}
  .scroll-cue{margin-top:8px}
  #sceneOrder{top:45%}
}
/* Short landscape screens: side-by-side text and photography. */
@media (max-width:1024px) and (max-height:600px) and (orientation:landscape){
  body{height:850svh}.stage{height:100svh;bottom:auto}
  .topbar{padding:14px 20px}.chapter{display:none}.brand img{width:100px}
  .scene{inset:0 0 0 37%;transform:none!important;filter:none!important;overflow:hidden}
  .scene:after{background:linear-gradient(90deg,#151211,transparent 18%)}
  .intro,.copy,.copy.right,#copyOrder,#copyKitchen,#copyServed,#copyPayment{left:20px;right:auto;top:76px;bottom:auto;width:32%;transform:none!important}
  .intro h2,.copy h2,#copyOrder h2,#copyKitchen h2,#copyServed h2,#copyPayment h2{font-size:32px;line-height:1.02}
  .intro p,.copy p,#copyOrder p,#copyKitchen p,#copyPayment p{font-size:12px;line-height:1.4;max-width:100%;margin-top:10px}
  .eyebrow{font-size:8px;margin-bottom:10px}.label,.chapter,.scroll-cue,.kitchen-badge,.send-pill{display:none}
  .final h2{font-size:44px}.final p{margin:14px auto;font-size:13px}.final{padding:60px 30px 30px}
  .cta{min-height:44px}.progress{top:auto;bottom:12px;right:20px;left:20px;transform:none;flex-direction:row}
  .progress-line{flex:1;height:2px}.progress-line i{height:100%!important;transform-origin:left;transform:scaleX(var(--scroll-progress,0))}
}

/* Loaded last so every chapter uses the same mobile layout. */
@media (max-width:1024px) {
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{height:1895svh} /* Shorter People pause; preserve the other chapter lengths. */
  .stage{height:100svh;bottom:auto}
  .topbar{padding:calc(16px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));pointer-events:none}
  .brand img{display:block;width:110px;height:auto}
  .chapter{display:none}
  .cta{max-width:100%;min-width:0;min-height:48px;white-space:normal;text-align:center;line-height:1.4;touch-action:manipulation}
  .copy .label,.x-copy .label,.people-copy .label{display:none}
  .intro,.copy,.copy.right,#copyOrder,#copyKitchen,#copyServed,#copyPayment,.x-copy,.x-copy.right,.people-copy,.people-copy.right{
    top:calc(76px + env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:auto;width:auto;transform:none!important;
  }
  .intro h2{font-size:clamp(34px,9.8vw,52px);line-height:1.04}
  .copy h2,#copyOrder h2,#copyKitchen h2,#copyServed h2,#copyPayment h2,.x-copy h2,.people-copy h2{font-size:clamp(30px,8.4vw,44px);line-height:1.06;overflow-wrap:break-word}
  .intro p,.copy p,#copyOrder p,#copyKitchen p,#copyPayment p,.x-copy p,.people-copy p{font-size:14px;line-height:1.5;margin-top:12px;max-width:42ch}
  .scene{top:var(--pos-scene-top,40%)}
  .x-scene{top:var(--x-scene-top,40%)}
  .people-scene{top:var(--people-scene-top,40%)}
  .scene,.x-scene,.people-scene{left:0;right:0;bottom:calc(48px + env(safe-area-inset-bottom));overflow:hidden;transform:none!important;filter:none!important}
  #sceneOrder{top:var(--pos-scene-top,40%)}
  .progress{left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}
  .squadra-intro{display:flex;flex-direction:column;align-items:stretch;gap:22px;padding:calc(82px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));overflow-y:auto}
  .squadra-intro>div{order:0;width:100%;max-width:620px;flex:none;transform:none!important}
  .squadra-intro h1{font-size:clamp(32px,8.8vw,52px);line-height:1.06}
  .squadra-intro p{font-size:14px;line-height:1.5;max-width:48ch;margin:16px 0 20px}
  .squadra-intro .cta{font-size:11px;min-height:48px;padding:13px 20px}
  .squadra-intro .scroll-cue{display:none}
  .squadra-art{position:relative;order:1;left:auto;right:auto;top:auto;bottom:auto;width:min(100%,540px);min-height:160px;flex:1;margin:0 auto}
  .squadra-art .product-pos{width:auto;height:82%;max-width:91%;object-fit:contain;right:3%;top:0}
  .squadra-art .product-hris{width:auto;height:42%;max-width:42%;left:0;bottom:0;object-fit:contain}
  .squadra-art .product-loyalty{width:auto;height:40%;max-width:39%;right:0;bottom:0;object-fit:contain}
  .squadra-art img{filter:drop-shadow(0 12px 16px #0007)}
  .final,.x-final,.people-final,.about-squadra{padding:calc(80px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));overflow-y:auto;transform:none!important}
  .final:not([inert]),.x-final:not([inert]),.people-final:not([inert]),.about-squadra:not([inert]){pointer-events:auto}
  .final>div,.x-final>div,.people-final>div,.about-squadra>div{width:100%;min-width:0;margin:auto}
  .final h2,.x-final h2,.people-final h2{font-size:clamp(36px,10vw,64px);line-height:1.04;overflow-wrap:break-word}
  .about-squadra h2{font-size:clamp(30px,8.5vw,54px);line-height:1.1;overflow-wrap:break-word}
  .final p,.x-final p,.people-final p,.about-squadra p{font-size:14px;line-height:1.6;margin:18px auto 22px}
  .about-squadra .about-invite{margin:16px auto 0}.about-squadra .cta{margin-top:22px;font-size:10px}
}
@media (max-width:1024px) and (max-height:600px) and (orientation:landscape) {
  .squadra-intro{display:block;padding-top:66px;padding-bottom:22px}
  .squadra-intro>div{width:51%}
  .squadra-intro h1{font-size:clamp(26px,4vw,38px)}
  .squadra-intro p{font-size:12px;margin:12px 0 14px}
  .squadra-art{position:absolute;left:57%;right:3%;top:65px;bottom:26px;width:auto;min-height:0;margin:0}
  .intro,.copy,.copy.right,#copyOrder,#copyKitchen,#copyServed,#copyPayment,.x-copy,.x-copy.right,.people-copy,.people-copy.right{top:66px;right:auto;width:40%}
  .intro h2,.copy h2,#copyOrder h2,#copyKitchen h2,#copyServed h2,#copyPayment h2,.x-copy h2,.people-copy h2{font-size:clamp(24px,3.7vw,32px)}
  .intro p,.copy p,#copyOrder p,#copyKitchen p,#copyPayment p,.x-copy p,.people-copy p{font-size:12px;line-height:1.4;margin-top:10px}
  .scene,#sceneOrder,.x-scene,.people-scene{inset:54px 0 38px 44%}
  .final,.x-final,.people-final,.about-squadra{padding-top:64px;padding-bottom:32px}
  .final h2,.x-final h2,.people-final h2{font-size:36px}
  .about-squadra h2{font-size:30px}
  .final p,.x-final p,.people-final p,.about-squadra p{font-size:12px;line-height:1.45;margin:12px auto}
  .about-squadra .about-invite{margin-top:10px}.about-squadra .cta{margin-top:12px}
}
@media (prefers-reduced-motion:reduce) {
  .scene,.x-scene,.people-scene,.final,.x-final,.people-final{transform:none!important;filter:none!important}
}

/* A single scaled arrangement keeps the phones next to the tablet on phones. */
@media (max-width:1024px) {
  .device-composition{display:block;position:absolute;top:0;left:50%;width:var(--intro-art-width,100%);aspect-ratio:5/4;transform:translateX(-50%)}
  .squadra-art .product-pos{width:90%;height:auto;max-width:none;right:0;top:0}
  .squadra-art .product-hris{width:42%;height:auto;max-width:none;left:0;bottom:0;z-index:2}
  .squadra-art .product-loyalty{width:35%;height:auto;max-width:none;right:1%;bottom:0;z-index:3}
}