/* Real browser layout. Reference playback controls remain available only in source. */
html,body{min-height:100%;width:100%;margin:0}
.tools,#controls,.device>.chrome,.phone>.browser-top,.phone>.browser-bottom{display:none!important}
body{background:#f5f7fc}
.device,.phone{width:100%;max-width:100%;margin:0;border-radius:0;box-shadow:none}
.device #app,.device:has(.blue-checkout) #app,.phone #checkout{height:100dvh;min-height:0}
#app>.header{max-width:760px;margin:auto}
#app>.screen:not(.checkout-b-screen){left:max(0px,calc((100% - 760px)/2));right:max(0px,calc((100% - 760px)/2))}
#app>.screen .content{scrollbar-width:thin}
#app>.screen .footer{padding-bottom:max(16px,env(safe-area-inset-bottom))}
#app>.screen .content>*:not(.assurance-stack){max-width:100%}
#app>.screen .content .art{object-fit:contain}
#app>.screen .content .generated-frame{margin-left:auto;margin-right:auto}
#app>.screen .form-center{max-width:540px;width:100%;margin:auto}
#app .plans .pay{font-size:18px;height:auto;min-height:52px}
#checkout .site-header{position:sticky;top:0;z-index:5}
@media(min-width:768px){
 #app>.header{height:80px;padding:24px 32px}
 #app>.screen:not(.checkout-b-screen){top:80px}
 #app>.screen .content{padding-left:48px;padding-right:48px}
 #app>.screen .footer{padding:16px 48px 24px}
 #app>.screen h1{font-size:34px;line-height:1.15}
 #app>.screen .reassurance h1{white-space:normal}
 #app .choice-list{max-height:none}
 #app .intro .art{max-height:44vh}
 #app .plans .content{padding-top:24px}
 #app .plans #plan-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 #app .plans .plan{min-width:0;padding:16px 10px}
 #app .plans .price strong{font-size:30px}
 /* Keep the offer in the same vertical order and rhythm as mobile. */
 .blue-inner{display:block;max-width:480px;padding:46px 24px 58px}
 .blue-inner>h1{font-size:29px;line-height:31px;margin:0 0 15px}
 .blue-hero{width:310px;margin:0 auto 9px}
 .blue-proof{width:352px;margin:0 auto 22px}
 .blue-inner>h2{font-size:18px;line-height:23px;margin:0 0 26px}
 .blue-start{margin-top:27px}
 .blue-pay-panel{margin-top:24px}
 .blue-legal{margin:46px 7px 0}
 /* Checkout B keeps the mobile column and spacing on desktop. */
 body .phone,body.embedded .phone{width:402px;max-width:100%;margin:0 auto}
 #checkout{background:#fff!important}
 .hero-inner{display:block;max-width:600px;text-align:center;padding:40px 24px 56px;margin:auto}
 .hero-art{width:360px;max-width:100%;margin:24px auto}
 .hero-inner h1{font-size:44px;line-height:1.1}
 .hero-inner p{font-size:18px;line-height:1.5}
 .hero-inner .awards{width:280px;margin:24px auto 0}
 .hero-inner .cta{max-width:340px;margin-left:auto;margin-right:auto}
 .case-grid{max-width:1040px;grid-template-columns:repeat(4,minmax(0,1fr))}
 .slides{max-width:1120px;margin:auto;gap:40px}
 .slide{flex:1;max-width:300px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.inline-payment{background:#fff;border:1px solid #dce3ee;border-radius:18px;padding:24px;margin:24px 0}.inline-payment h2{margin:0 0 20px}.inline-payment .consent{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;margin:20px 0}.inline-payment .consent input{flex:0 0 18px;width:18px;height:18px;margin-top:2px}.inline-payment [data-pay]{margin-top:16px}.inline-payment .preview-note{color:#a32020}

/* Keep actions inside short mobile browsers and landscape viewports. */
#app>.screen .footer{flex-shrink:0}
#app[data-step="0"]>.screen>.content{display:flex;flex-direction:column}
#app[data-step="0"] .trophy-block{position:static;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:18px 0}
@media(max-height:540px){#app[data-step="0"] .trophy-block img{width:72px;height:74px}#app[data-step="0"] .trophy-block h2{font-size:17px;margin-top:10px}#app[data-step="0"]>.screen h1{font-size:25px}.intro .content{overflow:auto}.intro .story-art-wrap{min-height:70px}.reassurance .content{overflow:auto}}

/* Reserve separate header space for the claim value and customer login. */
#app>.header:has(.claim-total)>.progress{display:none}
#app>.header .claim-total{position:static;max-width:135px;margin-left:auto;flex-shrink:1;text-align:center}
#app>.header:has(.claim-total){gap:8px}
#app>.header:has(.claim-total)>.public-login{margin-left:0}
@media(max-width:480px){#app>.header:has(.claim-total)>.logo{width:100px}#app>.screen .form-center{padding-top:clamp(16px,calc(100dvh - 560px),110px)}}