/* Layout mode comes from the outer browser, not the desktop mockup's iframe width. */
.mobile-menu-button,.mobile-demo-menu,#mobile-tip,#mobile-spotlight,.mobile-tip-details{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[data-mobile="true"]{scroll-padding-top:76px}
html[data-mobile="true"] .site-header{padding-top:var(--mobile-safe-top,env(safe-area-inset-top));z-index:30}
html[data-mobile="true"] .header-inner{height:56px;padding:0 8px;gap:6px;max-width:none}
html[data-mobile="true"] .brand-link{flex-shrink:0;min-height:44px;display:flex;align-items:center}
html[data-mobile="true"] .brand-link img{width:98px;height:auto}
html[data-mobile="true"] .site-header[data-has-back="true"] .brand-link{margin-left:44px}
html[data-mobile="true"] .app-navigation{position:absolute;left:6px;top:calc(var(--mobile-safe-top,env(safe-area-inset-top)) + 6px);width:44px;height:44px;padding:0;border:0;background:none}
html[data-mobile="true"] .app-navigation .back{width:44px;height:44px;min-height:44px;display:flex;justify-content:center;padding:0;border:0;border-radius:10px;background:none;font-size:0;gap:0;color:#44353e}
html[data-mobile="true"] .app-navigation .back svg{width:21px;height:21px}
html[data-mobile="true"] .vouchers-link{position:relative;width:44px;height:44px;min-height:44px;padding:11px;border:0;justify-content:center;margin-left:auto}
html[data-mobile="true"] .vouchers-link #ticket-icon{display:flex}
html[data-mobile="true"] .vouchers-link svg{width:22px;height:22px}
html[data-mobile="true"] .vouchers-label{display:none}
html[data-mobile="true"] .vouchers-link .count{position:absolute;top:2px;right:0;width:16px;height:16px;min-width:16px;font-size:9px;border:2px solid #fff}
html[data-mobile="true"] .mobile-menu-button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:10px;background:none;color:#44353e;border-radius:10px}
.mobile-menu-button svg{width:22px;height:22px;fill:currentColor}
html[data-mobile="true"] .mobile-demo-menu:not([hidden]){display:grid;position:absolute;right:8px;top:calc(var(--mobile-safe-top,env(safe-area-inset-top)) + 54px);width:min(256px,calc(100vw - 16px));padding:6px;background:#fff;border:1px solid #deebf4;border-radius:14px;box-shadow:0 12px 32px #24152d26;z-index:100}
.mobile-demo-menu button{min-height:48px;text-align:left;padding:10px 14px;background:transparent;border-radius:9px;color:#44353e;font-size:13px}
.mobile-demo-menu button:hover,.mobile-demo-menu button:focus-visible{background:#eef7ff}
html[data-mobile="true"] #app{padding-top:20px;padding-bottom:max(32px,var(--mobile-safe-bottom,env(safe-area-inset-bottom)));min-height:calc(100dvh - 130px)}
html[data-mobile="true"] .site-footer{padding-bottom:max(24px,var(--mobile-safe-bottom,env(safe-area-inset-bottom)))}
html[data-mobile="true"] #mobile-spotlight:not([hidden]){display:block;position:fixed;inset:0;width:100%;height:100%;z-index:70;pointer-events:none}
html[data-mobile="true"] #mobile-tip:not([hidden]){display:block;position:fixed;z-index:71;width:min(316px,calc(100vw - 24px));padding:14px 16px 12px;background:#fafdff;border:1px solid #d9e9f5;border-radius:18px;box-shadow:0 12px 36px #24152d26;color:#302a35;text-align:left;animation:mobile-tip-enter 140ms ease-out}
.mobile-tip-kicker{font-size:8px;letter-spacing:1px;line-height:1.5;color:#237db5;padding-right:32px;margin:0 0 8px;font-weight:500}
.mobile-tip-close{position:absolute;right:4px;top:0;display:grid;place-items:center;width:44px;height:44px;background:none;font-size:25px;font-weight:400;color:#607988;border-radius:50%}
#mobile-tip-title{font-size:18px;line-height:1.3;letter-spacing:-.4px;margin:0 0 8px;font-weight:600;text-wrap:balance}
#mobile-tip-copy{font-size:13px;line-height:1.6;color:#5d7181;margin:0}
.mobile-tip-actions{display:flex;align-items:center;gap:8px;margin-top:10px}
.mobile-tip-actions{flex-wrap:wrap}
.mobile-tip[data-primary="applySavings"] .mobile-tip-actions [data-mobile-tip="next"],.mobile-tip[data-primary="reviewPurchase"] .mobile-tip-actions [data-mobile-tip="next"]{flex-basis:100%;margin-left:0}
.mobile-tip-actions button,.mobile-details-actions button{min-height:44px;min-width:44px;border:1px solid #d6e5ef;border-radius:99px;background:transparent;color:#3c6c88;padding:8px 13px;font-size:12px}
.mobile-tip-actions [data-mobile-tip="details"]{border-color:transparent;font-size:11px;padding-left:7px;padding-right:7px}
.mobile-tip-actions [data-mobile-tip="next"],.mobile-details-actions [data-mobile-tip="next"]{margin-left:auto;background:#0095ff;border-color:#0095ff;color:#ffffff;font-weight:500;padding-left:19px;padding-right:19px}
.mobile-tip [hidden],.mobile-tip-details [hidden]{display:none!important}
html[data-mobile="true"] .mobile-tip-details[open]{display:flex;flex-direction:column;position:fixed;inset:auto 0 0;width:100%;max-width:560px;max-height:85dvh;margin:0 auto;border:1px solid #d5e6f2;border-radius:20px 20px 0 0;background:#fafdff;padding:0 18px max(14px,var(--mobile-safe-bottom,env(safe-area-inset-bottom)));color:#302a35;box-shadow:0 -10px 35px #24152d26}
.mobile-tip-details::backdrop{background:#20142680}
.mobile-details-top{display:flex;align-items:center;justify-content:space-between;min-height:52px;flex:0 0 auto}
.mobile-details-top span{font-size:9px;letter-spacing:1px;color:#237db5}
.mobile-details-top button{width:44px;height:44px;font-size:25px;background:none;color:#607988}
.mobile-details-content{min-height:0;overflow:auto;overscroll-behavior:contain}
#mobile-details-title{font-size:22px;line-height:1.3;white-space:pre-line;margin:8px 0 16px;letter-spacing:-.5px}
#mobile-details-figures{display:grid;gap:10px;margin:0 0 16px;font-size:12px}
#mobile-details-figures>div{display:flex;justify-content:space-between;gap:16px}
#mobile-details-figures dt{color:#627f91}#mobile-details-figures dd{margin:0;text-align:right;font-weight:500}
#mobile-details-body,#mobile-details-action{font-size:13px;line-height:1.7;margin:12px 0}
#mobile-details-action{color:#2c79aa;border-top:1px solid #dfebf3;padding-top:12px}
.mobile-details-actions{display:flex;gap:8px;padding-top:12px;flex:0 0 auto}
.mobile-tip button:focus-visible,.mobile-demo-menu button:focus-visible,.mobile-menu-button:focus-visible,.mobile-tip-details button:focus-visible{outline:2px solid #006FC4;outline-offset:2px}
@keyframes mobile-tip-enter{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.mobile-tip{animation:none!important}}

html[data-mobile="true"] .coin-switch{min-height:48px}
html[data-mobile="true"] #edit-coins{min-height:44px;min-width:44px}

/* Route restoration owns scrolling; browser anchoring must not offset a revealed target. */
html[data-mobile="true"] body{overflow-anchor:none}