/**
 * Max Exam Lab responsive foundation
 * Shared, additive mobile/tablet safeguards.
 * Desktop layout (>=1024px) is intentionally left untouched.
 */
:root{
  --max-mobile-gutter:16px;
  --max-touch-target:44px;
}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
img,svg,video,canvas,audio{
  max-width:100%;
}
img,video,canvas{
  height:auto;
}
input,select,textarea,button{
  max-width:100%;
}
/* Auth/account controls must honor their semantic hidden state even when
   component styles use !important display declarations. */
#profileBtn[hidden],
#signOutBtn[hidden],
#signInBtn[hidden],
#createAccountBtn[hidden]{
  display:none!important;
}
@supports(padding:max(0px)){
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
}
@media(max-width:1023px){
  :where(.max-page-header,.site-header,.topbar){
    max-width:100%;
  }
  :where(.max-page-header,.topbar) :where(a,button,[role="button"]),
  :where(.site-header) :where(a,button,[role="button"]){
    min-height:var(--max-touch-target);
  }
  :where(.dashboard-main,.view-landing,.launch-content,.exam-shell,.exam-container){
    min-width:0;
  }
  :where(.metric-grid,.learning-layout,.profile-card,.profile-lower-grid,.weekly-challenge-grid,.achievement-grid)>*{
    min-width:0;
  }
  :where(.premium-access-dialog,.modal,.dialog,[role="dialog"]){
    max-width:calc(100vw - 32px);
    max-height:calc(100dvh - 32px);
  }
}
@media(max-width:767px){
  :root{--max-mobile-gutter:14px}
  :where(.max-page-header,.topbar){
    gap:8px;
  }
  :where(.max-page-header .top-actions,.topbar .top-actions){
    min-width:0;
  }
  :where(.max-page-header .top-actions,.topbar .top-actions)>*{
    flex-shrink:1;
  }
  :where(.gate){
    padding:max(16px,env(safe-area-inset-top)) var(--max-mobile-gutter) max(16px,env(safe-area-inset-bottom));
  }
  :where(.gate-card){
    max-width:100%;
  }
  :where(input,select,textarea){
    font-size:max(16px,1em);
  }
}
@media(max-width:599px){
  :where(.max-page-header,.topbar){
    padding-left:max(10px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right));
  }
  :where(.metric-grid){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  :where(.learning-layout,.profile-card,.profile-lower-grid){
    grid-template-columns:minmax(0,1fr);
  }
  :where(.section-head,.dashboard-overview-head,.mistake-dashboard-head,.profile-heading){
    min-width:0;
  }
}
@media(max-width:359px){
  :root{--max-mobile-gutter:10px}
  :where(.metric-grid){
    grid-template-columns:minmax(0,1fr);
  }
}
@media(hover:none) and (pointer:coarse){
  :where(a,button,[role="button"],summary){
    -webkit-tap-highlight-color:transparent;
  }
}

/* Step 3: public-facing phone/tablet behavior */
@media(max-width:1023px){
  .site-header .brand-row{
    min-width:0;
  }
  .site-header .brand-clickable,
  .site-header .max-brand-lockup{
    min-width:0;
  }
  .site-header .header-quick-links{
    display:none;
  }
  .site-header .header-mobile-menu{
    display:block;
  }
  .site-header .account-actions{
    min-width:0;
  }
  .site-header .context-row{
    min-width:0;
  }
  .site-header .context-title,
  .site-header .context-sub{
    overflow-wrap:anywhere;
  }
  .view-landing,
  .launch-content{
    width:min(100% - 2 * var(--max-mobile-gutter),1120px);
    margin-left:auto;
    margin-right:auto;
  }
  .orbit .card{
    min-width:0;
  }
}
@media(max-width:767px){
  .site-header .brand-row{
    flex-wrap:wrap;
    row-gap:8px;
  }
  .site-header .language-menu{
    order:2;
  }
  .site-header .header-mobile-menu{
    order:3;
  }
  .site-header .account-actions{
    order:4;
    margin-left:auto;
  }
  .site-header .context-row{
    padding-left:var(--max-mobile-gutter);
    padding-right:var(--max-mobile-gutter);
  }
  .site-header .context-stats{
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .premium-access-dialog{
    width:min(100% - 24px,520px);
    margin-inline:auto;
    overscroll-behavior:contain;
  }
  .premium-access-price-grid{
    grid-template-columns:minmax(0,1fr);
  }
}
@media(max-width:599px){
  .site-header .brand-row{
    padding-left:max(10px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right));
  }
  .site-header .account-actions{
    width:100%;
    justify-content:flex-end;
  }
  .site-header .profile-trigger-copy{
    min-width:0;
  }
  .site-header .profile-trigger-copy strong,
  .site-header .profile-trigger-copy small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .site-header .context-row{
    align-items:flex-start;
  }
  .site-header .context-nav-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .site-header .context-back{
    max-width:100%;
    white-space:normal;
  }
  .launch-section{
    padding:clamp(22px,7vw,34px);
  }
}
@media(max-width:359px){
  .site-header .account-btn{
    padding-inline:10px;
  }
  .site-header .brand-wordmark small{
    display:none;
  }
}

/* English Practice shared mobile header */
@media(max-width:1023px){
  .max-section-header .max-global-row,
  .max-section-header .max-context-row{
    max-width:100%;
  }
  .max-section-header .max-global-utils{
    min-width:0;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
}
@media(max-width:599px){
  .max-section-header .max-global-row{
    align-items:center;
  }
  .max-section-header .max-global-utils{
    gap:6px;
  }
  .max-section-header .max-global-utils a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .max-section-header .max-context-row a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .practice-card-footer{
    flex-wrap:wrap;
    gap:10px;
  }
  .practice-card-footer :where(a,button){
    min-height:44px;
  }
}

/* Step 4: exam interfaces on tablets and phones */
@media(max-width:1023px){
  .view-exam{
    padding-left:var(--max-mobile-gutter);
    padding-right:var(--max-mobile-gutter);
  }
  .view-exam .layout,
  #view-ielts-exam .layout{
    grid-template-columns:minmax(0,1fr);
    width:100%;
    max-width:100%;
    gap:18px;
  }
  .view-exam .exam-content,
  #view-ielts-exam .exam-content,
  #view-ielts-exam .ielts-pane{
    min-width:0;
    max-width:100%;
  }
  #view-ielts-exam .reading-split{
    grid-template-columns:minmax(0,1fr);
    gap:18px;
  }
  #view-ielts-exam .reading-passage-pane{
    position:static;
    max-height:none;
    width:100%;
  }
  .navigator{
    max-width:min(360px,88vw);
    max-height:calc(100dvh - 24px);
  }
  .ielts-table-wrap{
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
  }
  .ielts-task-box,
  .qcard{
    min-width:0;
    max-width:100%;
  }
}
@media(max-width:767px){
  .view-exam{
    padding-top:16px;
    padding-bottom:max(96px,calc(72px + env(safe-area-inset-bottom)));
  }
  .qcard,
  .ielts-task-box,
  .reading-passage-pane{
    padding:18px;
  }
  .ielts-tabbar{
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .ielts-tab{
    flex:0 0 auto;
    min-height:44px;
  }
  .ielts-audio-player{
    position:sticky;
    top:0;
    max-width:100%;
    padding:12px;
    gap:10px;
  }
  .ielts-audio-controls{
    min-width:0;
  }
  .ielts-audio-btn{
    min-width:44px;
    width:44px;
    height:44px;
  }
  .ielts-audio-btn.play{
    width:44px;
    height:44px;
  }
  .ielts-audio-seek{
    flex:1 1 180px;
    min-width:0;
  }
  .ielts-audio-vol{
    max-width:100%;
  }
  .ielts-audio-vol input{
    width:min(100px,24vw);
  }
  .rp-passage-tabs{
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .rp-passage-tab{
    flex:0 0 auto;
    min-height:44px;
  }
  .nav-btn,
  .pn-btn,
  .startover-btn{
    min-height:44px;
  }
}
@media(max-width:599px){
  .view-exam{
    padding-left:10px;
    padding-right:10px;
  }
  .qcard,
  .ielts-task-box,
  .reading-passage-pane{
    padding:16px 14px;
    border-radius:12px;
  }
  .stem,
  .ielts-task-prompt{
    overflow-wrap:anywhere;
  }
  .ielts-audio-player{
    align-items:stretch;
  }
  .ielts-audio-controls{
    width:100%;
    justify-content:flex-start;
  }
  .ielts-audio-time{
    min-width:0;
    margin-left:auto;
  }
  .ielts-audio-seek{
    flex-basis:100%;
    width:100%;
  }
  .ielts-audio-vol{
    display:none;
  }
  .ielts-timer-widget{
    right:max(8px,env(safe-area-inset-right));
  }
  .ielts-match-row{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .match-input{
    flex:0 0 56px;
    font-size:16px;
  }
  .prof-text-answer{
    flex-wrap:wrap;
  }
  .prof-text-answer input,
  .prof-check{
    min-height:44px;
  }
}
@media(max-width:359px){
  .qcard,
  .ielts-task-box,
  .reading-passage-pane{
    padding:14px 12px;
  }
  .nav-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* Step 5: student dashboard and administrator portal */
@media(max-width:1023px){
  .dashboard-sidebar{
    max-width:min(320px,88vw);
  }
  .metric-grid,
  .snapshot-grid,
  .achievement-grid,
  .weekly-challenge-grid,
  .overview-metric-grid,
  .report-grid,
  .analytics-section-grid,
  .attention-grid,
  .diagnostic-section-grid,
  .quick-actions-grid,
  .membership-admin-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .user-management-table,
  .game-progress-table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
  }
  .modal-card,
  .admin-confirm-card,
  .student-profile-panel-shell{
    width:min(100% - 32px,760px);
    max-height:calc(100dvh - 32px);
    overflow:auto;
  }
  .user-management-toolbar,
  .progress-toolbar,
  .game-progress-toolbar,
  .english-practice-toolbar,
  .membership-filters{
    flex-wrap:wrap;
  }
  .user-management-toolbar > *,
  .progress-toolbar > *,
  .game-progress-toolbar > *,
  .english-practice-toolbar > *,
  .membership-filters > *{
    min-width:0;
  }
}
@media(max-width:767px){
  .dashboard-sidebar :where(a,button,[role="button"]),
  .admin-sidebar :where(a,button,[role="button"]){
    min-height:44px;
  }
  .profile-card,
  .profile-lower-grid,
  .learning-layout,
  .form-grid,
  .profile-grid,
  .practice-detail-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .user-management-toolbar,
  .progress-toolbar,
  .game-progress-toolbar,
  .english-practice-toolbar{
    gap:10px;
  }
  .user-management-toolbar :where(input,select,button),
  .progress-toolbar :where(input,select,button),
  .game-progress-toolbar :where(input,select,button),
  .english-practice-toolbar :where(input,select,button),
  .membership-filters :where(input,select,button){
    min-height:44px;
  }
  .modal-card,
  .admin-confirm-card,
  .student-profile-panel-shell{
    width:calc(100% - 24px);
    max-height:calc(100dvh - 24px);
  }
}
@media(max-width:599px){
  .metric-grid,
  .snapshot-grid,
  .achievement-grid,
  .weekly-challenge-grid,
  .overview-metric-grid,
  .report-grid,
  .analytics-section-grid,
  .attention-grid,
  .diagnostic-section-grid,
  .quick-actions-grid,
  .membership-admin-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .dashboard-main,
  .admin-main,
  .admin-content{
    min-width:0;
  }
  .user-management-toolbar > *,
  .progress-toolbar > *,
  .game-progress-toolbar > *,
  .english-practice-toolbar > *,
  .membership-filters > *{
    flex:1 1 100%;
    width:100%;
  }
  .modal-card,
  .admin-confirm-card,
  .student-profile-panel-shell{
    width:calc(100% - 16px);
    max-height:calc(100dvh - 16px);
    border-radius:14px;
  }
  .modal-card :where(input,select,textarea),
  .student-profile-panel-shell :where(input,select,textarea){
    font-size:16px;
  }
}


/* REAL-DEVICE MOBILE REPAIR 2026-09-25 */
/*
 * Verified against the user's 384x832 iPhone Safari recording.
 * These rules fix structural mobile layout; they do not rely on hiding page overflow.
 */

/* Flatten the desktop 3D orbit into a touch-native snap deck on phones/tablets. */
@media (max-width:820px){
  body.max-landing-mode #view-landing .hero{
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
    perspective:none!important;
    padding:24px 0 18px!important;
  }
  body.max-landing-mode #view-landing .stage{
    position:relative!important;
    inset:auto!important;
    display:flex!important;
    flex-direction:column!important;
    gap:18px!important;
    transform:none!important;
    transform-style:flat!important;
  }
  body.max-landing-mode #view-landing .grid,
  body.max-landing-mode #view-landing .ring-wrap,
  body.max-landing-mode #view-landing .trail{
    display:none!important;
  }
  body.max-landing-mode #view-landing .explore{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    order:1!important;
    width:100%!important;
    padding:0 18px!important;
    box-sizing:border-box!important;
  }
  body.max-landing-mode #view-landing .explore h1{
    font-size:clamp(30px,8vw,38px)!important;
    letter-spacing:.10em!important;
  }
  body.max-landing-mode #view-landing .explore p{
    margin-top:6px!important;
    font-size:10px!important;
    letter-spacing:.12em!important;
  }
  body.max-landing-mode #view-landing .orbit{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    order:2!important;
    width:100%!important;
    height:auto!important;
    transform:none!important;
    transform-style:flat!important;
    display:flex!important;
    align-items:stretch!important;
    gap:14px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    box-sizing:border-box!important;
    padding:4px max(24px,8vw) 18px!important;
    scroll-padding-inline:max(24px,8vw)!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  body.max-landing-mode #view-landing .orbit::-webkit-scrollbar{
    display:none!important;
  }
  body.max-landing-mode #view-landing .orbit .card{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    transform-origin:center!important;
    flex:0 0 min(78vw,320px)!important;
    width:min(78vw,320px)!important;
    min-width:0!important;
    height:auto!important;
    min-height:330px!important;
    margin:0!important;
    padding:22px 18px!important;
    border-radius:16px!important;
    scroll-snap-align:center!important;
    scroll-snap-stop:always!important;
    contain:layout paint!important;
    opacity:1!important;
    filter:none!important;
  }
  body.max-landing-mode #view-landing .orbit .card .icon{
    height:68px!important;
    margin-bottom:8px!important;
  }
  body.max-landing-mode #view-landing .orbit .card svg{
    width:58px!important;
    height:58px!important;
  }
  body.max-landing-mode #view-landing .orbit .card h3{
    margin:6px 0 10px!important;
    font-size:19px!important;
  }
  body.max-landing-mode #view-landing .orbit .card p{
    margin:0 0 18px!important;
    font-size:13px!important;
    line-height:1.5!important;
  }
  body.max-landing-mode #view-landing .orbit .card button{
    min-height:44px!important;
    padding:11px 14px!important;
    border-radius:10px!important;
    font-size:12px!important;
  }
  body.max-landing-mode #view-landing .orbit.has-hover .card:not(.is-hovered),
  body.max-landing-mode #view-landing .orbit .card.is-hovered{
    opacity:1!important;
    filter:none!important;
  }
  body.max-landing-mode #view-landing .footer{
    display:none!important;
  }
  body.max-landing-mode #view-landing .launch-content{
    width:100%!important;
    max-width:100%!important;
    margin:28px auto 0!important;
    padding:0 14px!important;
    box-sizing:border-box!important;
  }
}

/* Real phone header: two clean rows instead of forcing every control into one line. */
@media (max-width:640px){
  body.max-landing-mode .site-header{
    height:auto!important;
    min-height:0!important;
    padding:10px 12px!important;
    align-items:stretch!important;
  }
  body.max-landing-mode .site-header .brand-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    justify-content:initial!important;
    gap:8px 10px!important;
    width:100%!important;
    margin:0!important;
  }
  body.max-landing-mode .site-header .brand-clickable{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    max-width:170px!important;
    overflow:hidden!important;
    gap:8px!important;
  }
  body.max-landing-mode .site-header .brand-orbit-mark{
    width:30px!important;
    height:30px!important;
    flex:0 0 30px!important;
    border-width:2.5px!important;
  }
  body.max-landing-mode .site-header .brand-wordmark{
    min-width:0!important;
  }
  body.max-landing-mode .site-header .brand-wordmark strong{
    font-size:13.5px!important;
    letter-spacing:.035em!important;
    white-space:nowrap!important;
  }
  body.max-landing-mode .site-header .brand-wordmark small{
    display:none!important;
  }
  body.max-landing-mode .site-header .account-actions{
    grid-column:2!important;
    grid-row:1!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    gap:6px!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
  }
  body.max-landing-mode .site-header .account-actions .max-theme-toggle-site{
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0!important;
  }
  body.max-landing-mode .site-header .account-actions #signInBtn,
  body.max-landing-mode .site-header .account-actions #createAccountBtn{
    height:36px!important;
    min-height:36px!important;
    padding:0 10px!important;
    font-size:10px!important;
    letter-spacing:.04em!important;
  }
  body.max-landing-mode .site-header .header-mobile-menu{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:start!important;
    margin:0!important;
    min-width:0!important;
  }
  body.max-landing-mode .site-header .header-mobile-menu summary{
    min-height:36px!important;
    display:inline-flex!important;
    align-items:center!important;
    padding:0 12px!important;
    box-sizing:border-box!important;
    font-size:11px!important;
  }
  body.max-landing-mode .site-header .language-menu{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:end!important;
    margin:0!important;
  }
  body.max-landing-mode .site-header .language-menu-toggle{
    height:36px!important;
    min-height:36px!important;
    padding:0 10px!important;
    gap:6px!important;
    font-size:10px!important;
  }
  body.max-landing-mode .site-header .language-menu-toggle [data-language-current]{
    font-size:10px!important;
  }
  body.max-landing-mode .site-header .context-row,
  body.max-landing-mode .site-header .context-row.show{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    padding:8px 12px 10px!important;
  }
}

/* The IELTS book/test cards must stack their action below the content on phones. */
@media (max-width:599px){
  .view-versions{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    padding:26px 14px 72px!important;
    overflow-x:clip!important;
  }
  .view-versions .versions-wrap,
  body.max-ielts-selection-mode .versions-wrap,
  body.max-ielts-book-mode .versions-wrap,
  body.max-ielts-ultimate-book-mode .versions-wrap{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0 auto!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  .view-versions .version-list{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .view-versions .version-card,
  body.max-ielts-selection-mode .version-card,
  body.max-ielts-book-mode .version-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:14px!important;
    padding:18px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .view-versions .version-card > div:first-child{
    min-width:0!important;
    max-width:100%!important;
  }
  .view-versions .version-card-head-row{
    min-width:0!important;
    flex-wrap:wrap!important;
    gap:6px!important;
  }
  .view-versions .version-label,
  .view-versions .version-progress{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
  .view-versions .version-go{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    padding:10px 12px!important;
    box-sizing:border-box!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:normal!important;
    border:1px solid rgba(79,238,241,.28)!important;
    border-radius:999px!important;
    background:rgba(79,238,241,.06)!important;
  }
}

@media (max-width:359px){
  body.max-landing-mode .site-header .brand-clickable{
    max-width:140px!important;
  }
  body.max-landing-mode .site-header .brand-wordmark strong{
    font-size:12px!important;
  }
  body.max-landing-mode .site-header .account-actions #signInBtn,
  body.max-landing-mode .site-header .account-actions #createAccountBtn{
    padding:0 8px!important;
    font-size:9.5px!important;
  }
}


/* IPHONE REAL-DEVICE FINAL OVERRIDES 2026-09-25 */
/* Honor semantic/JS visibility even when legacy component rules use !important. */
[hidden]{
  display:none!important;
}

@media (max-width:820px){
  html,
  body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  body.max-landing-mode #main-content,
  body.max-landing-mode #view-landing{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  body.max-landing-mode #view-landing{
    padding-left:0!important;
    padding-right:0!important;
  }

  body.max-landing-mode #view-landing .hero,
  body.max-landing-mode #view-landing .stage,
  body.max-landing-mode #view-landing .orbit,
  body.max-landing-mode #view-landing .launch-content{
    max-width:none!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  body.max-landing-mode #view-landing .launch-content{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:max(14px,env(safe-area-inset-left))!important;
    padding-right:max(14px,env(safe-area-inset-right))!important;
  }
}

@media (max-width:640px){
  body.max-landing-mode .site-header{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    box-sizing:border-box!important;
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
  }

  body.max-landing-mode .site-header .brand-row{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(38px,1fr) auto!important;
    grid-template-areas:
      "brand account"
      "menu language"!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    column-gap:8px!important;
    row-gap:8px!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  body.max-landing-mode .site-header .brand-clickable{
    grid-area:brand!important;
    grid-column:auto!important;
    grid-row:auto!important;
    justify-self:start!important;
    max-width:150px!important;
    min-width:0!important;
    overflow:visible!important;
  }

  body.max-landing-mode .site-header .account-actions{
    grid-area:account!important;
    grid-column:auto!important;
    grid-row:auto!important;
    justify-self:end!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
  }

  body.max-landing-mode .site-header .header-mobile-menu{
    grid-area:menu!important;
    grid-column:auto!important;
    grid-row:auto!important;
    justify-self:start!important;
    margin:0!important;
    order:initial!important;
  }

  body.max-landing-mode .site-header .language-menu{
    grid-area:language!important;
    grid-column:auto!important;
    grid-row:auto!important;
    justify-self:end!important;
    margin:0!important;
    order:initial!important;
  }

  body.max-landing-mode .site-header .account-actions .max-theme-toggle-site{
    flex:0 0 36px!important;
  }

  body.max-landing-mode .site-header #signInBtn,
  body.max-landing-mode .site-header #createAccountBtn{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  body.max-landing-mode .site-header #profileBtn:not([hidden]){
    display:inline-flex!important;
    max-width:132px!important;
    min-width:0!important;
  }

  body.max-landing-mode .site-header #profileBtn .profile-trigger-copy{
    min-width:0!important;
    max-width:72px!important;
  }

  body.max-landing-mode .site-header #profileBtn .profile-trigger-copy strong{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}

@media (max-width:480px){
  body.max-landing-mode .site-header .brand-clickable{
    max-width:38px!important;
    overflow:visible!important;
  }

  body.max-landing-mode .site-header .brand-wordmark{
    display:none!important;
  }

  body.max-landing-mode #view-landing .orbit{
    padding-left:16px!important;
    padding-right:16px!important;
    scroll-padding-inline:16px!important;
  }

  body.max-landing-mode #view-landing .orbit .card{
    flex-basis:calc(100vw - 40px)!important;
    width:calc(100vw - 40px)!important;
    max-width:360px!important;
  }
}


/* HARD VIEWPORT LOCK FOR IOS 2026-09-26 */
/*
 * iOS real-device safeguard: anchor the public landing shell directly to the
 * visual viewport so no inherited percentage/grid/flex width can leave an
 * unused strip at the right edge.
 */
@media (max-width:820px){
  html,
  body.max-landing-mode{
    width:100vw!important;
    max-width:100vw!important;
    min-width:100vw!important;
    overflow-x:clip!important;
  }

  body.max-landing-mode #main-content,
  body.max-landing-mode #view-landing{
    position:relative!important;
    left:50%!important;
    right:auto!important;
    width:100vw!important;
    max-width:100vw!important;
    min-width:100vw!important;
    margin-left:-50vw!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  body.max-landing-mode #view-landing .hero,
  body.max-landing-mode #view-landing .stage,
  body.max-landing-mode #view-landing .launch-content{
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  body.max-landing-mode #view-landing .launch-content{
    padding-left:max(14px,env(safe-area-inset-left))!important;
    padding-right:max(14px,env(safe-area-inset-right))!important;
  }
}

@supports (width:100dvw){
  @media (max-width:820px){
    html,
    body.max-landing-mode{
      width:100dvw!important;
      max-width:100dvw!important;
      min-width:100dvw!important;
    }

    body.max-landing-mode #main-content,
    body.max-landing-mode #view-landing,
    body.max-landing-mode #view-landing .hero,
    body.max-landing-mode #view-landing .stage,
    body.max-landing-mode #view-landing .launch-content{
      width:100dvw!important;
      max-width:100dvw!important;
    }

    body.max-landing-mode #main-content,
    body.max-landing-mode #view-landing{
      min-width:100dvw!important;
      margin-left:-50dvw!important;
    }
  }
}