.journey-stage{overflow:clip}
/* Phone layouts share a safe footer and let longer panels scroll independently. */
@media(max-width:600px){
 :root{--phone-header:calc(72px + env(safe-area-inset-top,0px));--phone-footer:calc(120px + env(safe-area-inset-bottom,0px))}
 .header{padding:calc(12px + env(safe-area-inset-top,0px)) 16px 10px;background:linear-gradient(#f5f1e9f5,#f5f1e9e8,transparent);gap:12px}.brand img{width:138px}.header-link{min-height:40px;display:flex;align-items:center;font-size:8px;padding:8px 10px}
 .journey-stage{height:100svh;min-height:0}.journey-route{bottom:calc(48px + env(safe-area-inset-bottom,0px));padding:6px 10px;gap:10px}.journey-route button{width:44px;height:44px;padding:10px}.journey-route i{width:12px}.scroll-cue{bottom:calc(17px + env(safe-area-inset-bottom,0px));font-size:11px}.scroll-cue>span{font-size:11px;padding:4px 9px}.stage-front{height:8px}.stage-front span{width:5px}
 .scene-copy,#chapter-1 .scene-copy,#chapter-2 .scene-copy,#chapter-3 .scene-copy{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#b99a77 transparent;overflow-y:auto;min-height:0;max-height:none}
 .button,.story-link{min-height:44px}.room-picker button{min-height:34px}.stock-product{min-height:48px}.packing-modes button{min-height:44px}.customise-heading button{min-width:44px;min-height:44px;font-size:26px}.reservation-field input{font-size:16px;min-height:48px}dialog{padding:28px 20px;max-height:calc(100dvh - 24px - env(safe-area-inset-bottom,0px));}.dialog-close{width:44px;height:44px;right:8px;top:8px}
 /* Arrival room above the promotion. */
 .journey-stage[data-scene="0"] .arrival-rooms .arrival-room{top:var(--phone-header);height:24svh;object-fit:contain;object-position:center bottom;width:100%}
 .journey-stage[data-scene="0"] .room-picker{top:calc(var(--phone-header) + 24svh - 2px);left:16px;padding:3px;gap:4px}
 .journey-stage[data-scene="0"] .scene-copy{top:calc(var(--phone-header) + 24svh + 42px);bottom:var(--phone-footer);left:16px;right:16px;max-height:none;padding:14px 16px}
 .journey-stage[data-scene="0"] h1{font-size:clamp(22px,6.2vw,28px);margin-bottom:10px}.journey-stage[data-scene="0"] .brand-tagline{line-height:1.5;font-size:11px}.subscriber-offer span span{line-height:1.5}.journey-stage[data-scene="0"] .story-link{width:100%;min-height:44px}
 /* Pack selection and the persistent total. */
 .pack-chooser{top:var(--phone-header);left:16px;right:16px;padding:10px}.pack-tabs{gap:6px}.pack-tabs button{min-height:66px;padding:8px}.pack-tabs span{font-size:clamp(16px,4.6vw,20px)}.pack-tabs strong{font-size:12px}.pack-chooser .eyebrow{font-size:8px;line-height:1.5}
 .journey-stage[data-scene="1"] .story-box-slot{top:calc(176px + env(safe-area-inset-top,0px));left:5%;width:90%;height:22svh;bottom:auto}
 #chapter-1 .scene-copy{top:calc(174px + env(safe-area-inset-top,0px) + 22svh);bottom:calc(var(--phone-footer) + 72px);left:16px;right:16px;padding:12px 16px;width:auto;max-height:none}
 #chapter-1 h2{font-size:23px;margin-bottom:10px}.pack-selection-contents{font-size:12px;line-height:1.7}.pack-bonus{font-size:11px;line-height:1.5}.new-pack-summary strong{font-size:20px}#chapter-1 .new-pack-summary p{font-size:18px}.scene-copy .button{font-size:10px}.scene-copy .button.secondary{width:100%;margin-bottom:8px}#chapter-1 .scene-copy>[data-next]{display:none}
 .mobile-checkout{left:16px;right:16px;bottom:var(--phone-footer);height:62px;padding:8px 12px;border-radius:6px}.mobile-checkout .button{min-width:94px;min-height:44px;font-size:10px}.mobile-checkout strong{font-size:23px}
 /* List mode becomes a full-width editor; drag mode keeps the box alongside. */
 .journey-stage.is-customising #chapter-1 .scene-copy{display:none}
 .journey-stage.is-customising .stock-shelf{top:calc(182px + env(safe-area-inset-top,0px));bottom:calc(var(--phone-footer) + 72px);left:16px;right:16px;width:auto;padding:10px 12px;border-radius:6px;box-shadow:0 8px 24px #45362310}
 .journey-stage.is-customising:not(.is-drag-mode) .story-box-slot{visibility:hidden}
 .customise-heading{font-size:13px;margin-bottom:4px}.packing-modes{gap:6px;margin-bottom:8px}.packing-modes button{font-size:11px}.packing-hint{font-size:10px;line-height:1.5;margin-bottom:8px}.stock-section h3{font-size:20px;margin-top:14px}.stock-product{padding:8px;gap:7px}.stock-product>span:not(.stock-action){font-size:12px}.stock-product small{font-size:11px}.stock-product .stock-action{font-size:22px}.stock-product svg{width:35px;height:38px}.stock-shelf>.item-prices-note{font-size:9px;line-height:1.5;margin:7px 0 0}
 .journey-stage.is-customising.is-drag-mode .stock-shelf{width:48%;left:12px;right:auto;padding:8px}.journey-stage.is-customising.is-drag-mode .story-box-slot{left:51%;top:calc(190px + env(safe-area-inset-top,0px));bottom:auto;width:49%;height:34svh;visibility:visible}.journey-stage.is-drag-mode .customise-heading{font-size:11px}.journey-stage.is-drag-mode .packing-modes button{font-size:9px;padding:5px 3px}.journey-stage.is-drag-mode .stock-product>span:not(.stock-action){font-size:10px}.journey-stage.is-drag-mode .stock-product small{font-size:9px}.journey-stage.is-drag-mode .packing-hint{font-size:9px}.journey-stage.is-drag-mode .box-help{display:block;font-size:10px;padding:5px 7px;line-height:1.4;}
 /* Community and doorstep retain the illustration above readable copy. */
 #chapter-2 .theatre-set>img{top:var(--phone-header);height:31svh;width:100%;object-fit:contain;object-position:center bottom}
 #chapter-2 .theatre-set{background:linear-gradient(#f5f1e9,#e5ded2 calc(var(--phone-header) + 25svh),#cba477 calc(var(--phone-header) + 25svh),#bd976c calc(var(--phone-header) + 31svh),#f4efe6 calc(var(--phone-header) + 31svh),#eee7dc)}
 #chapter-2 .scene-copy{top:calc(var(--phone-header) + 31svh + 10px);bottom:var(--phone-footer);left:22px;right:22px;padding:8px 0;gap:12px}#chapter-2 h2{font-size:clamp(26px,7.4vw,32px)}#chapter-2 .community-intro{font-size:14px}#chapter-2 .community-values{font-size:13px}#chapter-2 .community-note{font-size:10px}
 .journey-stage[data-scene="3"] .story-box-slot{top:var(--phone-header);left:5%;width:90%;height:26svh;bottom:auto}
 #chapter-3 .scene-copy{top:calc(var(--phone-header) + 26svh);bottom:var(--phone-footer);left:16px;right:16px;padding:16px;max-height:none}#chapter-3 h2{font-size:27px;margin-bottom:16px}.doorstep-summary{margin:10px 0 14px}.doorstep-summary p{font-size:13px}.doorstep-summary strong{font-size:27px}.contents-details summary{min-height:36px;display:flex;align-items:center;font-size:12px}.contents-details ul{font-size:12px;max-height:120px}.edit-box{min-height:40px;padding:8px 0;margin-top:5px}
 .static-journey .journey-stage{height:auto}.static-journey .journey-frame{height:100svh;min-height:0}.static-journey .scene-copy{bottom:35px!important}.static-journey .mobile-checkout{bottom:25px}.static-journey #chapter-1 .scene-copy,.static-journey .stock-shelf{bottom:100px!important}.static-journey #chapter-1 .scene-copy{top:180px}.static-journey .static-box-slot{height:300px}
}
@media(max-width:600px) and (max-height:720px){
 .journey-stage[data-scene="0"] .arrival-rooms .arrival-room{height:21svh}.journey-stage[data-scene="0"] .room-picker{top:calc(var(--phone-header) + 21svh - 2px)}.journey-stage[data-scene="0"] .scene-copy{top:calc(var(--phone-header) + 21svh + 40px);padding:12px 14px}.journey-stage[data-scene="0"] h1{font-size:22px}.promotion-price>strong{font-size:29px}.subscriber-offer strong{font-size:24px}
 .journey-stage[data-scene="1"] .story-box-slot{height:17svh}#chapter-1 .scene-copy{top:calc(174px + env(safe-area-inset-top,0px) + 17svh);padding:10px 12px}#chapter-1 h2{font-size:19px}.pack-selection-contents{font-size:11px}
 #chapter-2 .theatre-set>img{height:27svh}#chapter-2 .scene-copy{top:calc(var(--phone-header) + 27svh + 8px);gap:8px}#chapter-2 h2{font-size:25px}#chapter-2 .community-intro{font-size:12px}#chapter-2 .community-values{font-size:12px}#chapter-2 .community-note{font-size:9px}.journey-stage[data-scene="3"] .story-box-slot{height:22svh}#chapter-3 .scene-copy{top:calc(var(--phone-header) + 22svh);padding:12px 14px}#chapter-3 h2{font-size:23px}
}
/* A sideways phone keeps the scene on the left and a scrollable panel on the right. */
@media(max-width:950px) and (max-height:500px) and (orientation:landscape){
 .journey-stage{height:100svh;min-height:0}.header{padding:8px 16px}.brand img{width:115px}.header-link{font-size:8px;min-height:36px;padding:7px 10px}.journey-route{bottom:40px;padding:4px 10px;gap:10px}.journey-route button{width:36px;height:36px;padding:8px}.scroll-cue{bottom:10px}.scene-copy,#chapter-1 .scene-copy,#chapter-2 .scene-copy,#chapter-3 .scene-copy,.journey-stage[data-scene="0"] .scene-copy{left:51%;right:20px;width:auto;top:66px;bottom:102px;max-height:none;padding:12px 16px;overflow-y:auto;display:block;}
 .journey-stage[data-scene="0"] .arrival-rooms .arrival-room,#chapter-2 .theatre-set>img{left:0;width:48%;top:60px;height:calc(100% - 155px);object-fit:contain;object-position:center bottom}.journey-stage[data-scene="0"] .room-picker{top:auto;bottom:102px;left:16px;}.scene-copy h1,.scene-copy h2,#chapter-1 h2,#chapter-2 h2,#chapter-3 h2,.journey-stage[data-scene="0"] h1{font-size:24px;margin-bottom:12px}.pack-chooser{top:65px;left:16px;width:44%;right:auto;padding:8px}.pack-tabs button{min-height:52px;padding:6px}.pack-tabs span{font-size:15px}.pack-tabs strong{font-size:11px}.journey-stage[data-scene="1"] .story-box-slot{left:3%;width:46%;top:158px;height:calc(100% - 252px);bottom:auto}.journey-stage[data-scene="3"] .story-box-slot{left:3%;width:46%;top:70px;height:calc(100% - 166px);bottom:auto}.mobile-checkout{display:none}#chapter-1 .scene-copy>[data-next]{display:inline-flex}
 .journey-stage.is-customising #chapter-1 .scene-copy{display:none}.journey-stage.is-customising .stock-shelf{top:66px;left:50%;right:16px;width:auto;bottom:104px;padding:8px}.journey-stage.is-customising .story-box-slot{left:3%;width:44%;top:145px;height:calc(100% - 240px)}.journey-stage.is-customising:not(.is-drag-mode) .story-box-slot{visibility:visible}.journey-stage.is-customising .mobile-checkout{display:flex;top:65px;left:16px;right:auto;width:44%;height:65px;bottom:auto}.customise-heading{font-size:12px}.customise-heading button{width:36px;height:36px}.stock-product{min-height:44px}.packing-modes button{min-height:34px}#chapter-2 .scene-copy>*{margin-bottom:10px}.journey-route button .route-tooltip{display:none}
}

@media(max-width:600px){.journey-stage.is-drag-mode .box-canvas canvas{touch-action:none}}

@media(max-width:950px){.header{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
@media(max-width:600px) and (max-height:720px){
 #chapter-2 .theatre-set{background:linear-gradient(#f5f1e9,#e5ded2 calc(var(--phone-header) + 21svh),#cba477 calc(var(--phone-header) + 21svh),#bd976c calc(var(--phone-header) + 27svh),#f4efe6 calc(var(--phone-header) + 27svh),#eee7dc)}
 .journey-stage.is-customising .pack-chooser{display:none}.journey-stage.is-customising .stock-shelf{top:var(--phone-header)}.journey-stage.is-customising.is-drag-mode .story-box-slot{top:145px;height:34svh}
 #chapter-1 .scene-copy h2{display:none}#chapter-1 .scene-copy .item-prices-note{display:none}#chapter-1 .pack-selection-contents{max-height:64px;overflow-y:auto;overscroll-behavior:contain;margin:8px 0}
 #customise-package{position:sticky;bottom:0;background:#f8f3e9!important;z-index:1;margin-bottom:0!important}
}

@media(max-width:950px) and (max-height:500px) and (orientation:landscape){.journey-stage.is-customising .pack-chooser{display:none}.journey-stage.is-customising[data-scene="1"] .story-box-slot{left:3%;width:44%;top:145px;bottom:auto;height:calc(100% - 240px)}}
@media(max-width:950px) and (max-height:500px) and (orientation:landscape){
 .journey-route button{width:44px;height:44px;padding:10px}.customise-heading{margin-bottom:3px}.packing-modes{margin-bottom:5px}.packing-hint{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:9px;margin-bottom:5px}.stock-section h3{font-size:16px;margin:4px 0 5px}.stock-shelf>.item-prices-note{font-size:8px;margin:4px 0 0}
}
