/* Shared phone and tablet layout, loaded after page styles. */
.mobile-navigation{display:none}
@media(max-width:900px){
 .home-page .site-header{z-index:20}
 .home-page .site-header .nav{min-height:76px;gap:10px;flex-wrap:nowrap;padding-block:12px}
 .home-page .site-header .brand{min-width:0;margin-right:auto;font-size:15px;gap:8px}
 .home-page .site-header .brand strong{font-size:22px}
 .home-page .site-header .brand-icon{width:38px;height:38px;flex:none}
 .home-page .site-header .nav>nav{display:none}
 .home-page .site-header .nav-actions{width:auto;margin-left:0;padding:0;gap:0;flex-wrap:nowrap}
 .home-page .nav-actions>.nav-account-link,.home-page .nav-actions>.nav-cta{display:none}
 .mobile-navigation{display:block;flex:none}
 .mobile-navigation>summary{list-style:none;display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:24px;font-size:14px;font-weight:700;cursor:pointer;background:var(--paper);color:var(--ink)}
 .mobile-navigation>summary::-webkit-details-marker{display:none}
 .mobile-navigation[open]>summary{outline:2px solid var(--green);outline-offset:2px}
 .home-page .nav .mobile-navigation nav{position:absolute;top:100%;right:16px;display:flex;flex-direction:column;gap:6px;width:min(360px,calc(100vw - 32px));padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:0 0 18px 18px;box-shadow:0 16px 30px #0002}
 .mobile-navigation nav>a{display:flex;align-items:center;padding:12px 14px;min-height:48px;font-size:16px;white-space:normal;border-radius:8px}
 .mobile-navigation nav>a:hover{background:var(--cream)}
 .mobile-navigation nav .button{justify-content:center;margin-top:4px;min-height:48px;white-space:normal}
 .home-page .comparison-plans{grid-template-columns:minmax(0,1fr);max-width:600px;margin-inline:auto;gap:28px}
 .home-page .comparison-plans .plan{min-height:0;padding:30px 26px}
 .home-page .hero-grid,.home-page .personality-demo-grid{grid-template-columns:minmax(0,1fr);gap:30px}
 .home-page .hero-grid{padding-block:42px;min-height:0}
 .home-page .hero-copy{max-width:640px}
 .home-page .personality-demo{max-width:560px;width:100%;margin-inline:auto}
}
@media(max-width:700px){
 .wrap{width:calc(100% - 32px)}
 .site-header .nav{gap:10px}
 .site-header .brand{min-width:0;flex-shrink:1}
 .site-header .page-theme-actions{flex:none;gap:6px}
 .home-page .hero-actions{flex-wrap:wrap;gap:14px}
 .home-page .hero-actions .button{white-space:normal;text-align:center;justify-content:center;max-width:100%}
 .home-page .text-link{display:inline-flex;align-items:center;min-height:44px;padding-block:10px}
 .home-page .hero h1,.home-page main h2{overflow-wrap:break-word}
 .home-page .amount{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:8px;row-gap:4px}
 .home-page .amount span{font-size:18px;font-weight:700;white-space:nowrap}
 .home-page .plan,.home-page .personality-demo,.home-page .gift-grid>*{min-width:0}
 .home-page .plan-features li{overflow-wrap:break-word}
 .home-page .home-gift-option{flex-wrap:wrap}
 .home-page .home-gift-option>span{flex-basis:150px}
 .home-page .home-gift-option>b{margin-left:auto}
 .home-page .style-tabs button{min-height:48px;flex:1 1 125px}
 .account-card dl>div{display:block;padding-block:12px}
 .account-card dt{font-size:14px;margin-bottom:5px}
 .account-card dd{text-align:left;font-size:16px;line-height:1.5;min-width:0}
 .account-card,.security-content>*{min-width:0}
 .card-actions{gap:12px}.card-actions>.account-action{flex:1 1 180px}
 .account-action,.account-signout,.account-home,.editor-chip,.resend-button{min-height:48px}
 .editor-close,.close{width:44px;height:44px;right:16px;top:14px}
 .editor-shell,.dialog-shell{padding-top:64px}
 .editor-shell h2,.dialog-shell h2{overflow-wrap:break-word}
 .editor-group{min-width:0}.editor-group legend{max-width:100%;line-height:1.3}
 .editor-choice{min-width:0}.editor-choice>span{min-width:0;overflow-wrap:break-word}
 .editor-choice small,.choice small,.form-hint{font-size:14px}
 .editor-actions{flex-wrap:wrap;gap:12px}
 .editor-actions>.button{flex:1 1 180px;justify-content:center;white-space:normal;text-align:center;min-height:48px}
 .editor-add>div{flex-wrap:wrap}.editor-add>div>input{flex:1 1 180px;min-width:0}
 .profile-editor,.pause-dialog{height:auto;max-height:calc(100dvh - 24px);margin:auto;width:calc(100% - 24px);border-radius:18px;overflow-y:auto;overscroll-behavior:contain}
 .profile-editor .editor-shell{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
 .consent-links{flex-wrap:wrap;gap:4px 16px}
 .consent-links a,.legal-consent-links a,.footer-links a,.account-footer a,.account-footer button{display:inline-flex;align-items:center;min-height:44px}
 .footer-inner{gap:20px}.footer-links{gap:4px 18px}
 .account-footer .wrap{gap:8px 20px}
 .field input,.field select,.field textarea,.editor-label input,.editor-label textarea{font-size:16px;min-width:0;max-width:100%}
 .plan-choice-price{float:none;display:block;margin-bottom:8px}
 .button-loading{min-width:0}
 .gift-header{gap:12px}.gift-brand{min-width:0}
 .gift-layout>*{min-width:0}.gift-layout .panel{padding:22px 18px}
}
@media(max-width:380px){
 .home-page .hero-actions{align-items:stretch}.home-page .hero-actions .button{width:100%}
 .home-page .comparison-plans .plan{padding:30px 20px}
 .account-card{padding:20px}.editor-shell{padding-inline:18px}
 .page-theme-actions{flex-wrap:wrap;justify-content:flex-end}
}

/* Omit the decorative slogan strip on phone-sized screens. */
@media (max-width: 700px) {
  .home-page .marquee { display: none; }
}