/* Toyota replaces the previous car in both desktop and mobile versions. */
.three-car{top:270px;left:0;width:570px}

/* Phone and tablet layouts use native text sizes and flow, without scaling a desktop canvas. */
.frame-body.mobile-mode{width:100%;height:auto;min-height:100svh;overflow-x:hidden;overflow-y:auto}
.mobile-mode .artboard{position:relative;left:auto;top:auto;width:100%;max-width:760px;height:auto;min-height:100svh;margin:0 auto;transform:none;overflow:hidden;padding:22px 20px 18px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'header' 'headline' 'visual' 'intro' 'detail' 'action' 'footer';grid-template-rows:auto auto minmax(155px,230px) auto auto auto auto;gap:14px;align-content:space-between}
.mobile-preview #landing{width:390px;min-height:844px;margin:20px auto}
.mobile-preview .artboard{min-height:844px}
.mobile-mode .landing-header{grid-area:header;position:static;inset:auto;width:100%;height:30px;margin:0 0 7px}
.mobile-mode .logo{width:186px;max-width:60%;height:auto}
.mobile-mode .header-label{display:none}
.mobile-mode .one-copy,.mobile-mode .two-copy,.mobile-mode .three-copy{display:contents}
.mobile-mode .eyebrow,.mobile-mode .micro-topics,.mobile-mode .two-topics,.mobile-mode .two-caption{display:none}
.mobile-mode h1{grid-area:headline;font-size:clamp(31px,9.75vw,42px);line-height:1.06;letter-spacing:-.045em;margin:0;font-weight:500}
.mobile-mode .intro{grid-area:intro;font-size:15px;line-height:1.45;margin:0!important}
.mobile-mode .detail{grid-area:detail;font-size:14px;line-height:1.45;margin:0!important}
.mobile-mode .intro br,.mobile-mode .detail br{display:none}
.mobile-mode .subscribe{grid-area:action;margin:5px 0 0!important}
.mobile-mode .subscribe>p{font-size:14px;line-height:1.4;margin:0 0 12px}
.mobile-mode .cta-row{display:flex;flex-direction:column;gap:8px;width:100%}
.mobile-mode .cta{height:50px;min-height:50px;width:100%;font-size:15px;padding:0 16px;gap:11px}
.mobile-mode .cta svg{width:21px;height:21px}
.mobile-mode .cta:hover{transform:none}
.mobile-mode .landing-footer{grid-area:footer;position:static;inset:auto;min-width:0;margin:4px 0 0;padding:12px 0 0;gap:12px;font-size:10px;line-height:1.4;align-items:center}
.mobile-mode .landing-footer>span{display:none}
.mobile-mode .landing-footer>div{gap:6px;white-space:nowrap;font-size:9px}
.mobile-mode .landing-footer{flex-wrap:wrap}
.mobile-mode .related-pages{flex-basis:100%;justify-content:flex-start;flex-wrap:wrap}
.mobile-mode .related-pages a{font-size:10px}
.mobile-mode .landing-footer>a{gap:5px;white-space:nowrap;font-size:10px}
.mobile-mode .landing-footer svg{width:13px;height:13px}
.mobile-mode .visual-one,.mobile-mode .visual-three{grid-area:visual;position:relative;inset:auto;width:100%;height:auto;min-height:155px;max-height:230px;align-self:stretch;overflow:hidden}
.mobile-mode .visual-one .visual-kicker,.mobile-mode .visual-one .visual-bottom{display:none}
.mobile-mode .visual-one h2{font-size:17px;line-height:1.15;left:15px;top:14px;letter-spacing:-.025em;margin:0}
.mobile-mode .mosaic{top:54px;left:0;width:100%;height:auto;aspect-ratio:425.22/139.56}
.mobile-mode .mosaic img{width:43.006%;height:auto;inset:auto;top:0;left:0}
.mobile-mode .mosaic img:nth-child(2){left:28.496%}
.mobile-mode .mosaic img:nth-child(3){left:56.994%}
.mobile-mode .concept-two h1{font-size:clamp(33px,10.5vw,45px);line-height:1.02}
.mobile-mode .two-atmosphere{grid-area:visual;position:relative;inset:auto;width:calc(100% + 40px);margin-inline:-20px;height:auto;min-height:160px;max-height:230px;background-position:center 71%;background-size:cover;opacity:1}
.mobile-mode .two-atmosphere:after{background:linear-gradient(0deg,#000 0%,transparent 20%,transparent 84%,#000 100%)}
.mobile-mode .two-brand{position:absolute;left:auto;right:20px;top:175px;width:155px;opacity:.065;pointer-events:none}
.mobile-mode .two-copy .intro{color:#c7c8ca}
.mobile-mode .two-copy .detail{color:#b3b3b3}
.mobile-mode .concept-three{grid-template-areas:'header' 'headline' 'visual' 'intro' 'detail' 'action' 'note' 'footer';grid-template-rows:auto auto minmax(140px,205px) auto auto auto auto auto;gap:12px}
.mobile-mode .three-copy h1{font-size:clamp(28px,8.7vw,38px);line-height:1.07}
.mobile-mode .three-copy h1>span{font-size:inherit;letter-spacing:inherit}
.mobile-mode .three-copy .fineprint{grid-area:note;font-size:10px;line-height:1.4;margin:0;color:#636466}
.mobile-mode .visual-three{min-height:140px;max-height:205px}
.mobile-mode .visual-three .visual-kicker{top:12px;left:14px;right:14px;font-size:8px;letter-spacing:.06em}
.mobile-mode .big-discount{top:25px;left:12px;right:auto;font-size:70px;line-height:1;letter-spacing:-.08em;text-align:left}
.mobile-mode .big-discount>span{font-size:48px;letter-spacing:-.09em}
.mobile-mode .three-car{left:0;top:65px;width:100%;height:calc(100% - 63px);object-fit:contain;object-position:center bottom;filter:drop-shadow(0 9px 9px #0002)}
.mobile-mode .three-symbol{left:auto;right:12px;bottom:15px;width:150px;opacity:.28}
.mobile-mode .three-routes,.mobile-mode .price-caption{display:none}

@media(min-width:601px){
 .mobile-mode:not(.mobile-preview) .artboard{padding:32px 36px 26px;gap:20px}
 .mobile-mode:not(.mobile-preview) h1{font-size:clamp(42px,5.4vw,54px)}
 .mobile-mode:not(.mobile-preview) .concept-two h1{font-size:clamp(44px,5.7vw,58px)}
 .mobile-mode:not(.mobile-preview) .three-copy h1{font-size:clamp(40px,5vw,52px)}
 .mobile-mode:not(.mobile-preview) .visual-one,.mobile-mode:not(.mobile-preview) .two-atmosphere{min-height:220px;max-height:300px}
 .mobile-mode:not(.mobile-preview) .concept-three{grid-template-rows:auto auto minmax(190px,260px) auto auto auto auto auto}
 .mobile-mode:not(.mobile-preview) .visual-three{min-height:190px;max-height:260px}
 .mobile-mode:not(.mobile-preview) .cta-row{flex-direction:row}
 .mobile-mode:not(.mobile-preview) .cta{width:auto;flex:1}
}

/* Compact phones keep the complete offer and 44px touch targets. */
@media(max-height:740px){
 .mobile-mode .artboard{padding-top:16px;padding-bottom:12px;gap:10px;grid-template-rows:auto auto minmax(102px,155px) auto auto auto auto}
 .mobile-mode .landing-header{height:25px;margin-bottom:1px}
 .mobile-mode .logo{width:170px}
 .mobile-mode h1{font-size:clamp(29px,9.1vw,37px)}
 .mobile-mode .concept-two h1{font-size:clamp(31px,9.7vw,40px)}
 .mobile-mode .visual-one,.mobile-mode .two-atmosphere{min-height:102px;max-height:155px}
 .mobile-mode .visual-one h2{display:none}
 .mobile-mode .mosaic{top:50%;transform:translateY(-50%)}
 .mobile-mode .intro{font-size:14px;line-height:1.4}
 .mobile-mode .detail{font-size:14px;line-height:1.4}
 .mobile-mode .subscribe{margin-top:0!important}
 .mobile-mode .subscribe>p{margin-bottom:9px;font-size:13px}
 .mobile-mode .cta{height:46px;min-height:46px;font-size:14px}
 .mobile-mode .concept-three{grid-template-rows:auto auto minmax(102px,142px) auto auto auto auto auto;gap:9px}
 .mobile-mode .three-copy h1{font-size:clamp(27px,8.5vw,35px)}
 .mobile-mode .visual-three{min-height:102px;max-height:142px}
 .mobile-mode .visual-three .visual-kicker{display:none}
 .mobile-mode .big-discount{display:none}
 .mobile-mode .big-discount>span{font-size:50px}
 .mobile-mode .three-car{top:3px;height:calc(100% - 3px)}
 .mobile-mode .landing-footer{padding-top:8px;margin-top:0}
}
@media(max-height:620px){
 .mobile-mode .artboard{padding:12px 18px 10px;gap:8px;grid-template-rows:auto auto minmax(75px,105px) auto auto auto auto}
 .mobile-mode .landing-header{height:23px}
 .mobile-mode .logo{width:155px}
 .mobile-mode h1{font-size:29px}
 .mobile-mode .concept-two h1{font-size:31px}
 .mobile-mode .three-copy h1{font-size:26px}
 .mobile-mode .intro,.mobile-mode .detail{font-size:14px;line-height:1.35}
 .mobile-mode .visual-one,.mobile-mode .two-atmosphere{min-height:75px;max-height:105px}
 .mobile-mode .concept-three{grid-template-rows:auto auto minmax(75px,100px) auto auto auto auto auto;gap:7px}
 .mobile-mode .visual-three{min-height:75px;max-height:100px}
 .mobile-mode .big-discount{font-size:64px;top:3px}
 .mobile-mode .big-discount>span{font-size:44px}
 .mobile-mode .cta{height:44px;min-height:44px}
 .mobile-mode .subscribe>p{font-size:12px;margin-bottom:7px}
 .mobile-mode .cta-row{gap:7px}
 .mobile-mode .landing-footer{padding-top:7px}
 .mobile-mode .two-atmosphere{margin-inline:-18px;width:calc(100% + 36px)}
}

/* Mobile wireframes follow the same reading order as the designed pages. */
.mobile-mode .wire-board{grid-template-areas:'header' 'headline' 'visual' 'benefit' 'action' 'footer';grid-template-rows:auto auto minmax(140px,250px) auto auto auto;gap:16px}
.mobile-mode .wire-header{grid-area:header;position:static;inset:auto;padding:0 0 14px;font-size:10px;gap:14px;align-items:center}
.mobile-mode .wire-header>span{display:none}
.mobile-mode .wire-logo{font-size:14px;display:flex;align-items:center}
.mobile-mode .wire-logo b{font-size:10px;padding:6px}
.mobile-mode .wire-copy{display:contents}
.mobile-mode .wire-copy>.wire-label,.mobile-mode .wire-pain{display:none}
.mobile-mode .wire-copy h1{font-size:31px;line-height:1.08}
.mobile-mode .wire-benefit{grid-area:benefit;width:100%;padding:15px 0;margin:0}
.mobile-mode .wire-label{font-size:9px;letter-spacing:.06em;line-height:1.4}
.mobile-mode .wire-benefit>p:last-child{font-size:15px;line-height:1.45;margin-top:9px}
.mobile-mode .wire-action{grid-area:action;margin:0}
.mobile-mode .wire-action>p:nth-child(2){font-size:13px;margin-top:9px}
.mobile-mode .wire-action>div{flex-direction:column;gap:8px;margin-top:10px}
.mobile-mode .wire-action>div>span{min-height:48px;text-align:center;font-size:14px;padding:14px}
.mobile-mode .wire-visual{grid-area:visual;position:relative;inset:auto;width:100%;height:auto;min-height:140px;max-height:250px;padding:14px}
.mobile-mode .wire-picture{inset:40px 14px 59px;width:auto;height:auto;min-height:35px}
.mobile-mode .wire-picture>span{font-size:36px;padding:0 10px}
.mobile-mode .wire-visual>p{position:absolute;left:14px;right:14px;bottom:33px;font-size:14px;line-height:1.3}
.mobile-mode .wire-visual>small{left:14px;right:14px;bottom:14px;font-size:9px}
.mobile-mode .wire-footer{grid-area:footer;position:static;inset:auto;padding-top:12px;font-size:9px;gap:12px;line-height:1.4}
@media(prefers-reduced-motion:reduce){.cta{transition:none}}