/* Motion-off mode uses a readable, unpinned sequence, not hidden panels. */
body.static-mode .story-sequence{height:auto!important}
body.static-mode .scene{position:relative;height:auto;overflow:hidden}
body.static-mode .hero-visual{height:100svh;opacity:.28}
body.static-mode .hero-photo{transform:none!important}
body.static-mode .story-content{position:relative;inset:auto;width:min(670px,100%);margin:auto;padding:140px 30px 70px;display:grid;gap:38px}
body.static-mode .story-panel{position:relative;inset:auto;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto;padding:25px;background:#20262dd9;border-radius:25px}
body.static-mode .intro-panel{background:transparent;padding:0 25px 20px}
body.static-mode .intro-panel h1{font-size:43px}
body.static-mode .story-panel h2{font-size:36px}
body.static-mode .story-footer,body.static-mode .ambient-note{display:none}
body.static-mode .hero-shade-extra{display:none}
body.static-mode .intro-categories{gap:16px}
@media(min-width:1700px){
  :root{--page-pad:max(80px,calc((100vw - 1580px)/2))}
  .story-content{width:580px}
  .section{padding-left:40px;padding-right:40px}
}
@media(max-width:1100px){
  .story-content{width:470px;inset:120px auto 125px var(--page-pad)}
  .intro-panel h1{font-size:49px}
  .hero-shade{background:linear-gradient(90deg,#0c1218de 0%,#0c1218bd 25%,#0c121838 64%,#0c121800 100%),linear-gradient(0deg,#0c12187a,transparent 25%,transparent 80%,#0c12183b)}
  .ambient-note{font-size:9px}
  .section h2{font-size:38px}
  .use-panel{padding:35px;gap:25px}
  .use-question{font-size:25px}
  .use-result{padding:21px}
  .intro-categories{gap:16px}
}
@media(max-width:900px){
  :root{--header-height:76px;--page-pad:30px}
  .header-actions{margin-left:auto;gap:14px}
  .brand{width:146px}
  .story-content{width:440px}
  .intro-panel h1{font-size:46px}
  .story-panel h2{font-size:38px}
  .hero-photo{object-position:70% 50%}
  .ambient-note{display:none}
  .section-description{display:none}
  .use-panel{grid-template-columns:1fr 1fr;gap:20px;padding:27px}
  .use-question{font-size:24px}
  .use-result{padding:19px}
  .use-details{margin-left:0}
  .use-result-main h3{font-size:12px}
  .use-agent .mini-label{display:none}
  .principle-grid{gap:23px}
  .principle-grid h3{font-size:19px}
  .closing-card{padding:45px}
}
@media(max-width:600px){
  :root{--header-height:70px;--page-pad:22px;--story-travel:2400px}
  html{scroll-padding-top:90px}
  .site-header{gap:15px}
  .brand{width:133px}
  .nav-cta{font-size:11px;padding:10px 13px;gap:9px}
  .nav-cta .icon{width:13px;height:13px}
  .header-actions{gap:9px}
  .motion-toggle{width:31px;height:31px}
  .motion-toggle .icon{width:14px;height:14px}
  .hero-photo{object-position:68.5% 50%;transform-origin:68.5% 38%}
  .hero-shade{background:linear-gradient(0deg,rgba(9,16,23,.95) 0%,rgba(9,16,23,.83) 16%,rgba(9,16,23,.49) 35%,rgba(9,16,23,.02) 65%,rgba(9,16,23,.28) 100%)}
  .hero-shade-extra{background:linear-gradient(0deg,rgba(11,18,26,.85),rgba(11,18,26,.12) 60%,transparent)}
  .story-content{inset:95px var(--page-pad) 112px;width:auto}
  .story-panel{justify-content:flex-end}
  .intro-panel h1{font-size:clamp(32px,9.25vw,40px);line-height:1.32;letter-spacing:-.065em}
  .intro-panel .eyebrow{font-size:8px;gap:8px;margin-bottom:17px;letter-spacing:.14em}
  .tiny-line{width:17px}
  .intro-description{font-size:12px;line-height:1.85;margin-top:18px;color:#ffffffb8}
  .hero-cta-row{margin-top:24px;gap:9px}
  .button{font-size:12px;min-height:48px;padding:13px 20px;gap:23px}
  .button .icon{width:17px;height:17px}
  .intro-categories{gap:13px;margin-top:22px;padding-top:16px}
  .intro-categories span{font-size:8px;gap:4px}
  .intro-categories .icon{width:13px;height:13px}
  .chapter-eyebrow{font-size:8px;gap:8px;margin-bottom:11px;letter-spacing:.12em}
  .chapter-number{font-size:8px}
  .story-panel h2{font-size:32px;line-height:1.33;letter-spacing:-.055em;margin-bottom:19px}
  .chat-composition{width:100%}
  .user-bubble{max-width:286px;padding:16px 20px 10px;border-radius:20px 20px 5px 20px}
  .user-bubble p{font-size:17px}
  .message-meta{font-size:9px;margin-top:6px}
  .assistant-row{gap:8px;margin-top:13px}
  .agent-avatar{width:32px;height:32px;border-radius:10px}
  .agent-avatar img{width:21px}
  .assistant-bubble{padding:13px 15px 15px}
  .agent-name{font-size:9px;margin-bottom:5px}
  .assistant-bubble p{font-size:13px;line-height:1.65}
  .search-chips{gap:4px;margin-left:40px;margin-top:12px}
  .search-chips>span{font-size:8px;padding:6px 7px;gap:4px}
  .search-chips .icon{width:11px;height:11px}
  .search-chips>span:last-child{display:none}
  .booking-card{padding:15px 17px 11px;border-radius:20px}
  .card-heading{font-size:11px;gap:7px}
  .agent-avatar.small{width:24px;height:24px;border-radius:8px}
  .agent-avatar.small img{width:17px}
  .mini-label{font-size:7px;padding:3px 4px}
  .ticket{margin-top:13px;padding-bottom:12px}
  .ticket-label{gap:8px}
  .icon-tile{width:30px;height:30px;border-radius:9px}
  .icon-tile .icon{width:17px;height:17px}
  .ticket-label>div>strong{font-size:11px}
  .ticket-label>div>span{font-size:9px;margin-top:3px}
  .route-times{gap:10px;margin-top:11px;padding-left:1px}
  .route-times>div>strong{font-size:25px}
  .route-times>div>span{font-size:9px}
  .route-connector{width:48px;padding-top:6px}
  .route-connector span{font-size:7px!important}
  .route-connector>div{margin-top:8px}
  .ticket-price{font-size:13px}
  .ticket-price span{font-size:9px}
  .restaurant-row{padding:12px 0;gap:10px}
  .restaurant-row>img{width:43px;height:37px;border-radius:7px}
  .restaurant-row>div>strong{font-size:11px}
  .restaurant-row>div>span{font-size:9px;margin-top:4px}
  .pay-later{font-size:9px}
  .approval-footer{padding-top:11px}
  .approval-note{font-size:8px;gap:4px}
  .approval-note .icon{width:11px;height:11px}
  .approve-button{font-size:10px;padding:10px 12px;gap:8px;min-height:38px}
  .approve-button .icon{width:12px;height:12px}
  .sample-note{font-size:7px;margin-top:8px}
  .panel-hint{font-size:8px;margin-top:9px}
  .execution-card{padding:18px 19px 15px;border-radius:20px}
  .approved-stamp{font-size:9px;margin-top:14px;padding:6px 9px}
  .execution-list{gap:20px;margin:19px 0 20px}
  .execution-list li>div>strong{font-size:11px}
  .execution-list li>div>span{font-size:9px}
  .execution-caption{font-size:9px;margin-top:10px}
  .success-card{padding:20px 19px 0;border-radius:20px}
  .success-title{gap:10px;margin-bottom:17px}
  .success-title>div>strong{font-size:14px}
  .success-title>div>span{font-size:9px}
  .success-check{width:36px;height:36px}
  .success-check .icon{width:19px;height:19px}
  .completion-item{gap:10px;padding:13px 0}
  .completion-item>div>strong{font-size:11px}
  .completion-item>div>span{font-size:9px}
  .completion-badge{font-size:8px}
  .success-bottom{font-size:10px;padding:12px 0}
  .more-link{font-size:11px;margin-top:16px}
  .story-footer{bottom:24px;left:var(--page-pad);right:var(--page-pad)}
  .chapter-controls{width:100%}
  .chapter-meta{font-size:8px;gap:11px;margin-bottom:7px}
  #chapter-counter{font-size:8px}
  .chapter-nav{gap:7px}
  .chapter-nav button{font-size:9px;gap:9px;padding:8px 0}
  .scroll-caption{display:none}
  .possibilities{padding-top:67px;padding-bottom:54px}
  .dark-eyebrow{font-size:7px;margin-bottom:15px;letter-spacing:.10em}
  .section h2{font-size:29px;line-height:1.4;letter-spacing:-.06em}
  .use-tabs{gap:7px;margin-top:28px;margin-bottom:18px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--page-pad));padding-right:var(--page-pad);padding-bottom:3px}
  .use-tabs::-webkit-scrollbar{display:none}
  .use-tabs>button{flex-shrink:0;white-space:nowrap;font-size:10px;gap:6px;padding:9px 13px;min-height:39px}
  .use-tabs>button .icon{width:15px;height:15px}
  .use-panel{grid-template-columns:1fr;gap:26px;border-radius:22px;padding:27px 20px 21px}
  .use-prompt{padding:0 5px}
  .quote-mark{font-size:50px;margin-bottom:9px}
  .use-question{font-size:25px;line-height:1.4;letter-spacing:-.06em}
  .use-note{font-size:10px;margin-top:13px}
  .use-result{padding:19px 17px;border-radius:17px}
  .use-agent .mini-label{display:block;font-size:7px}
  .use-result-main{gap:10px;margin-top:21px}
  .use-result-main h3{font-size:12px}
  .use-result-main p{font-size:9px}
  .use-icon{width:36px;height:36px}
  .use-details{margin-left:46px;margin-top:14px}
  .use-details span{font-size:8px;padding:4px 6px}
  .use-result-footer{font-size:8px;margin-top:18px;padding-top:14px}
  .principles{padding-top:16px;padding-bottom:54px}
  .principles h2{font-size:29px}
  .principle-grid{grid-template-columns:1fr;gap:25px;margin-top:28px}
  .principle-grid article{padding-top:18px}
  .principle-number{font-size:8px}
  .principle-grid h3{font-size:20px;line-height:1.5;margin-top:12px;margin-bottom:9px}
  .principle-grid p{font-size:11px;max-width:none;line-height:1.9}
  .answers{padding-top:4px;padding-bottom:48px}
  .answer-list{margin-top:24px}
  .answer-list h3{font-size:17px}
  .answer-list p{font-size:13px;max-width:none}
  .closing{padding-bottom:34px}
  .closing-card{border-radius:22px;padding:34px 27px 32px}
  .closing-card h2{font-size:29px;margin-bottom:22px}
  .closing-card .eyebrow{font-size:7px;letter-spacing:.12em;margin-bottom:18px}
  .closing-note{font-size:11px;margin-top:16px;gap:3px}
  .closing-symbol{width:65%;right:-20%;top:48%}
  .store-pill{min-height:50px;padding:0 18px 0 14px;font-size:14px;gap:10px}
  .store-mark-apple{width:22px;height:22px}
  .store-mark-play{width:20px;height:22px}
  .footer-bar{flex-direction:column;align-items:flex-start;gap:14px;padding-top:22px;padding-bottom:28px}
  .footer-brand img{width:112px}
  .footer-meta{align-items:flex-start}
  .footer-copy,.footer-inquiry{font-size:12px}
  body.static-mode .story-content{padding:105px 15px 40px;gap:20px}
  body.static-mode .story-panel{padding:22px 15px}
  body.static-mode .intro-panel{padding:15px 7px 18px}
  body.static-mode .intro-panel h1{font-size:33px}
  body.static-mode .story-panel h2{font-size:29px}
}
@media(max-width:600px) and (max-height:740px){
  .story-content{inset:77px var(--page-pad) 99px}
  .story-panel h2{font-size:28px;margin-bottom:14px}
  .chapter-eyebrow{margin-bottom:9px}
  .intro-panel h1{font-size:33px}
  .intro-description{font-size:11px;margin-top:14px}
  .hero-cta-row{margin-top:19px}
  .intro-categories{margin-top:16px;padding-top:13px}
  .story-footer{bottom:17px}
  .user-bubble{padding:13px 18px 9px}
  .user-bubble p{font-size:16px}
  .booking-card{padding-top:13px}
  .ticket{margin-top:10px;padding-bottom:10px}
  .route-times{margin-top:9px}
  .restaurant-row{padding:10px 0}
  .panel-hint{font-size:7px}
  .execution-list{gap:17px;margin:17px 0}
  .execution-list li:not(:last-child):after{height:22px}
}
@media(min-width:601px) and (max-height:780px){
  .story-content{inset:105px auto 100px var(--page-pad)}
  .intro-panel h1{font-size:47px}
  .intro-panel .eyebrow{margin-bottom:15px}
  .intro-description{margin-top:19px;font-size:14px}
  .hero-cta-row{margin-top:22px}
  .intro-categories{margin-top:23px;padding-top:16px}
  .story-panel h2{font-size:32px;margin-bottom:15px}
  .chapter-eyebrow{margin-bottom:12px}
  .booking-card{padding-top:15px;padding-bottom:11px}
  .ticket{margin-top:12px;padding-bottom:12px}
  .restaurant-row{padding:12px 0}
  .story-footer{bottom:22px}
  .execution-list{margin:18px 0;gap:18px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
  .hero-photo,.story-panel{will-change:auto}
}

/* Final art direction: retain the exact same photograph on every breakpoint.
   The smaller mobile photo viewport keeps the phone and face inside the crop. */
.mobile-title{display:none}
@media(max-width:600px){
  .hero-visual{background:#101923}
  .hero-photo{height:80%;object-position:68.5% 50%}
  .hero-shade{background:linear-gradient(0deg,#101923 0%,rgba(12,20,29,.98) 16%,rgba(12,20,29,.76) 30%,rgba(12,20,29,.25) 48%,transparent 64%,rgba(9,16,23,.25) 100%)}
  .story-panel h2{font-size:29px}
  .story-panel h2 .desktop-title{display:none}
  .story-panel h2 .mobile-title{display:inline}
  .ticket-label>div>strong,.restaurant-row>div>strong{font-size:12px}
  .ticket-label>div>span,.restaurant-row>div>span{font-size:10px}
  .card-heading{font-size:12px}
  .completion-item>div>strong,.execution-list li>div>strong{font-size:12px}
  .completion-item>div>span,.execution-list li>div>span{font-size:10px}
}
@media(max-width:600px) and (max-height:740px){
  .story-panel h2{font-size:26px}
}

@media(min-width:901px){
  .use-agent>div>strong{font-size:12px}
  .use-agent>div>span{font-size:10px}
  .use-result-main h3{font-size:15px}
  .use-result-main p{font-size:11px}
  .use-details span{font-size:10px}
  .use-result-footer{font-size:10px}
}
@media(max-width:600px){
  .use-result-main h3{font-size:13px}
  .use-result-main p{font-size:10px}
  .use-details span{font-size:9px}
}