/* Phone layer, loaded last on every page. Desktop is untouched: every rule sits in a max-width query.
   Controls added by mobile.js: .m-menu-btn/.m-menu (public header), .m-cta (landing bar), .m-swipe (hints),
   .m-more-tab/.m-more (dashboard "More" sheet). */
.m-menu-btn,.m-menu,.m-cta,.m-swipe,.m-more-tab,.m-more,.m-more-backdrop{display:none}
.workspace-dialog .app-sidebar nav .m-more-tab{display:none!important}

/* ---------- Every phone: no zoom on tap in iOS, comfortable tap targets ---------- */
@media (max-width:760px){
  input,select,textarea{font-size:16px!important}
  html{-webkit-text-size-adjust:100%}
  /* clip (not hidden) so the sticky header keeps working on iPhone and Android browsers */
  html,body{overflow-x:clip}
}

/* ---------- Public header: slim, sticky, with a menu ---------- */
@media (max-width:900px){
  .site header.nav{position:sticky;top:0;z-index:60;display:flex!important;flex-wrap:nowrap!important;align-items:center;width:auto;max-width:none;height:64px!important;min-height:0!important;margin:0!important;padding:0 16px!important;gap:10px;
    background:rgba(250,242,230,.94);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
  .site header.nav>nav,.site header.nav .nav-signin,.site header.nav #auth-button{display:none!important}
  .site header.nav .brand{font-size:17px}
  .site header.nav .mark{width:34px;height:34px;font-size:20px}
  .site header.nav .nav-actions{margin-left:auto;gap:8px}
  .site header.nav .nav-actions .button,.site header.nav #workspace-button{min-height:40px;padding:0 14px;font-size:14px;border-radius:12px;white-space:nowrap}
  .site header.nav #workspace-button:not([hidden]){display:inline-flex;align-items:center;background:var(--espresso);color:#fff;font-weight:800}
  .site header.nav .nav-actions .button span{display:none}
  .m-menu-btn{display:grid;place-content:center;gap:4px;flex:none;width:44px;height:44px;padding:0;border:1px solid #dcc3ab;border-radius:12px;background:#fffaf2;cursor:pointer}
  .m-menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:var(--espresso);transition:transform .2s,opacity .2s}
  .m-menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .m-menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .m-menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .m-menu:not([hidden]){display:block;position:fixed;inset:0;z-index:80;overflow-y:auto;overscroll-behavior:contain;padding:0 20px calc(28px + env(safe-area-inset-bottom));background:#faf2e6;animation:m-drop .18s ease-out}
  .m-menu-top{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;height:64px;margin:0 -20px 8px;padding:0 16px;background:#faf2e6;border-bottom:1px solid var(--line)}
  .m-menu-top .brand{font-size:17px;color:var(--espresso);text-decoration:none}
  .m-menu-top .mark{width:34px;height:34px;font-size:20px}
  .m-menu-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #dcc3ab;border-radius:12px;background:#fffaf2;cursor:pointer}
  .m-menu-close svg{width:20px;height:20px;fill:none;stroke:var(--espresso);stroke-width:2.2;stroke-linecap:round}
  .m-menu nav{display:flex;flex-direction:column}
  .m-menu nav a{display:flex;align-items:center;justify-content:space-between;min-height:58px;border-bottom:1px solid var(--line);color:var(--espresso);font:700 19px var(--sans);text-decoration:none}
  .m-menu nav a:after{content:"›";font:400 26px var(--sans);color:var(--terracotta)}
  .m-menu nav a.active{color:var(--terracotta-dark)}
  .m-menu-actions{display:grid;gap:10px;margin-top:24px}
  .m-menu-actions>*{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;border-radius:14px;font:800 16px var(--sans);text-decoration:none}
  .m-menu-secondary{border:1.5px solid var(--espresso);background:transparent;color:var(--espresso);cursor:pointer}
}
@keyframes m-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- Public pages on phones ---------- */
@media (max-width:620px){
  .site main .shell,.site .rich-footer .shell{width:auto;margin-left:16px;margin-right:16px}
  .site main .section,.lp-features,.lp-value,.lp-exams,.lp-final,.info-band,.info-dark{padding-top:56px!important;padding-bottom:56px!important}
  .site main h2{font-size:clamp(30px,8.4vw,38px)!important;line-height:1.08!important}
  .site main .section-heading{margin-bottom:28px}
  .site main .section-heading>p:last-child,.site main .lede{font-size:17px!important}
  .site main .eyebrow{font-size:12px;letter-spacing:.14em}
  /* Hero */
  .site main .lp-hero{padding-top:28px!important;gap:32px}
  .site main .lp-hero h1{font-size:clamp(38px,11vw,46px)}
  .lp-actions{flex-direction:column;align-items:stretch;gap:14px}
  .lp-actions .button{width:100%;justify-content:center;min-height:56px;font-size:17px}
  .lp-actions .lp-link{align-self:center}
  .lp-assure{display:flex;flex-wrap:wrap;gap:8px 18px}
  .lp-assure li{font-size:14.5px}
  .lp-hero-visual{padding-left:0!important}
  .lp-chip{right:8px!important;left:auto!important}
  /* Card rows that swipe sideways */
  .lp-plans,.site main .lp-exam-grid{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -16px;padding:16px 16px 6px;scroll-padding:0 16px}
  .lp-plans::-webkit-scrollbar,.site main .lp-exam-grid::-webkit-scrollbar{display:none}
  .lp-plan{flex:0 0 86%;scroll-snap-align:start}
  .site main .lp-exam-grid article{flex:0 0 84%;scroll-snap-align:start;grid-column:auto!important}
  .m-swipe{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 0;font:700 13px var(--sans);color:var(--muted)}
  .m-swipe:after{content:"→";color:var(--terracotta);animation:m-nudge 1.6s ease-in-out infinite}
  .lp-exams .m-swipe{color:#d9c3b2}
  /* Pricing table: swipe sideways, plan names stay in view */
  .compare-wrap{margin:0 -16px;border-radius:0;border-left:0;border-right:0}
  .compare{min-width:640px}
  .compare th,.compare td{padding:12px 12px;font-size:14.5px}
  .compare th:first-child,.compare td:first-child{position:sticky;left:0;z-index:1;background:var(--card);box-shadow:1px 0 0 var(--line);min-width:150px}
  .compare thead th:first-child{background:#f3e4d0}
  /* Footer: two link columns, form full width */
  .rich-footer{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
  .rich-footer .footer-links{grid-template-columns:1fr 1fr!important;gap:30px 18px!important}
  .rich-footer .footer-links>div:last-child{grid-column:1/-1}
  .rich-footer .footer-links a{display:block;padding:6px 0}
  /* Sticky "Start free trial" bar */
  .m-cta:not([hidden]){display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:55;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 10px 10px 18px;border-radius:18px;background:var(--espresso);color:#fff4e8;box-shadow:0 18px 40px -12px rgba(30,18,12,.55);animation:m-rise .22s ease-out}
  .m-cta div{display:grid;line-height:1.2}
  .m-cta b{font:800 15px var(--sans)}
  .m-cta small{font-size:12.5px;color:#e6cdb9}
  .m-cta .button{min-height:46px;padding:0 16px;font-size:15px;white-space:nowrap;box-shadow:none}
  .m-cta .button span{display:none}
  /* Sign-in and checkout windows become full-width sheets */
  dialog.auth-dialog,dialog#checkout{width:100%!important;max-width:100%!important;max-height:94dvh;margin:auto 0 0!important;border-radius:24px 24px 0 0!important;
    padding:26px 20px calc(24px + env(safe-area-inset-bottom))!important;overflow-y:auto}
  dialog.auth-dialog h2{font-size:34px}
  dialog.auth-dialog input,dialog#checkout input{min-height:52px}
  dialog.auth-dialog .button.wide,dialog#checkout .button{min-height:54px}
  .auth-links button{min-height:44px}
}
@keyframes m-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes m-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.m-swipe:after,.m-cta,.m-menu{animation:none!important}}

/* ---------- Dashboard on phones ---------- */
@media (max-width:600px){
  .workspace-dialog .app-sidebar nav{grid-auto-flow:row!important;grid-template-columns:repeat(5,1fr)!important;overflow:visible!important}
  .workspace-dialog .app-sidebar nav button.m-extra{display:none!important}
  .workspace-dialog .app-sidebar nav .m-more-tab{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;padding:0;border:0;border-radius:14px;background:none;color:inherit;cursor:pointer;position:relative}
  .workspace-dialog .app-sidebar nav .m-more-tab .nav-ico{fill:currentColor;stroke:none}
  .workspace-dialog .app-sidebar nav .m-more-tab.active{background:rgba(255,255,255,.08);color:#fff}
  .workspace-dialog .app-sidebar nav .m-more-tab.active::before{content:"";position:absolute;left:30%;right:30%;top:0;height:3px;border-radius:0 0 3px 3px;background:#e9a57c}
  .m-more-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:998;background:rgba(30,18,12,.4)}
  .m-more:not([hidden]){display:grid;position:fixed;left:10px;right:10px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:999;padding:8px;gap:2px;border-radius:20px;background:#fffdf8;box-shadow:0 24px 60px rgba(30,18,12,.35);animation:m-rise .18s ease-out}
  .m-more button{display:flex;align-items:center;gap:14px;min-height:54px;padding:0 14px;border:0;border-radius:12px;background:none;color:var(--espresso);font:700 16px var(--sans);text-align:left;cursor:pointer}
  .m-more button:active,.m-more button:hover{background:#f7ede0}
  .m-more svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--brown);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .m-more .danger{color:#a3352a;border-top:1px solid var(--line);border-radius:0 0 12px 12px}
  .m-more .danger svg{stroke:#a3352a}
  /* Room above the tab bar, and practice papers that scroll with the page */
  .workspace-dialog .app-main{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
  .reading-paper-content{height:auto!important;max-height:none!important;overflow:visible!important;padding:20px 16px!important}
}
@media (max-width:600px){
  /* Practice area uses the full phone width: no nested frames */
  .workspace-dialog .app-content{padding-left:12px!important;padding-right:12px!important}
  .workspace-dialog .skill-lab{border:0!important;background:transparent!important;box-shadow:none!important}
  .workspace-dialog .lab-workspace{padding:12px 0 0!important}
  .workspace-dialog .reading-paper{border-radius:16px;overflow:hidden}
}
@media (max-width:600px){
  /* Question sheets grow with the page (one scroll, not two); pinch to zoom still works on images */
  .workspace-dialog .sheet-scroll,.workspace-dialog .sheet-scroll.native-sheet{height:auto!important;max-height:none!important;overflow:visible!important;padding:8px!important;border-radius:14px}
  /* Answer tables keep their columns and swipe sideways inside their own frame */
  .workspace-dialog .native-table{display:block!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .workspace-dialog .native-table>div{display:grid!important;grid-template-columns:repeat(4,minmax(128px,1fr))!important;min-width:540px}
  .workspace-dialog .native-table.two>div{grid-template-columns:minmax(120px,1fr) minmax(170px,1.6fr)!important;min-width:0}
  .workspace-dialog .native-table span,.workspace-dialog .native-table b{border-right:1px solid var(--line)!important;font-size:14px!important}
  .workspace-dialog .native-question-content{min-width:0;grid-template-columns:minmax(0,1fr)!important;overflow-wrap:anywhere}
  .workspace-dialog .native-question-content>section{min-width:0;max-width:100%}
}
@media (max-width:600px){
  /* Focus ring only for keyboard users (opening the dashboard focuses the first tab) */
  .workspace-dialog .app-sidebar nav button:focus:not(:focus-visible){outline:none!important}
  /* Compact top bar and overview banner */
  .workspace-dialog .app-topbar{min-height:0!important;padding:10px 12px!important;gap:10px}
  .workspace-dialog .app-topbar h2{font-size:21px!important;line-height:1.15!important;margin:0!important}
  .workspace-dialog .app-topbar p,.workspace-dialog .app-topbar small{font-size:10.5px!important}
  .workspace-dialog .profile-trigger{height:42px}
  .workspace-dialog .performance-hero{padding:22px 18px!important;border-radius:20px!important}
  .workspace-dialog .performance-hero h3{font-size:27px!important;line-height:1.12!important}
  .workspace-dialog .performance-hero p:not(.eyebrow){font-size:15px!important}
  .workspace-dialog .performance-hero .eyebrow{font-size:11px!important}
  .workspace-dialog .performance-kpis{grid-template-columns:1fr 1fr!important}
  .workspace-dialog .performance-kpis>div{padding:16px 14px!important;border-right:1px solid var(--line)}
  .workspace-dialog .performance-kpis>div:nth-child(2n){border-right:0}
  .workspace-dialog .performance-hero .button{width:100%;justify-content:center}
  /* Larger answer options in listening questions */
  .workspace-dialog .native-choice li{font-size:15px!important;line-height:1.5}
}
/* "Everything in one subscription" on phones: one featured tile, then a 2x2 grid of glass tiles */
@media (max-width:620px){
  .lp-proof{padding:4px 0 26px}
  .site main .lp-proof .shell{width:auto;margin:0 12px}
  .lp-proof-card{padding:22px 14px 14px;border-radius:24px}
  .site main .lp-proof-title{margin:0 0 16px;gap:10px;font-size:11px;letter-spacing:.16em;white-space:nowrap}
  .lp-proof-title:before,.lp-proof-title:after{width:22px}
  .lp-proof-list{grid-template-columns:1fr 1fr!important;gap:10px!important;row-gap:10px!important}
  .lp-proof-list li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 14px 15px!important;border-radius:16px;
    background:linear-gradient(160deg,rgba(255,236,216,.09),rgba(255,236,216,.03));border:1px solid rgba(243,195,155,.18);box-shadow:inset 0 1px 0 rgba(255,236,216,.08)}
  .lp-proof-list li:before{display:none!important}
  .lp-proof-list li:last-child{grid-column:auto!important}
  .lp-proof-list li .lp-proof-ico{position:absolute;top:12px;right:12px;width:30px;height:30px;margin:0;border-radius:10px}
  .lp-proof-list li .lp-proof-ico svg{width:16px;height:16px}
  .lp-proof-list b{font-size:36px!important;line-height:1}
  .lp-proof-list li>span:last-child{font-size:13.5px!important;line-height:1.35;padding-right:2px;text-wrap:balance}
  /* Featured first tile: the live examiner */
  .lp-proof-list li:first-child{grid-column:1/-1!important;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;row-gap:2px;padding:16px!important;
    background:radial-gradient(circle at 0 50%,rgba(240,138,93,.28),transparent 60%),linear-gradient(160deg,rgba(255,236,216,.12),rgba(255,236,216,.04));border-color:rgba(240,138,93,.4)}
  .lp-proof-list li:first-child .lp-proof-ico{position:static;grid-row:1/3;width:48px;height:48px;border-radius:14px;background:rgba(240,138,93,.18);border-color:rgba(240,138,93,.45)}
  .lp-proof-list li:first-child .lp-proof-ico svg{width:22px;height:22px}
  .lp-proof-list li:first-child b{font-size:32px!important}
  .lp-proof-list li:first-child>span:last-child{font-size:14px!important}
}
@media (max-width:350px){.m-cta small{display:none}.lp-proof-list b{font-size:30px!important}.lp-proof-list li>span:last-child{font-size:12.5px!important}}
/* Footer on phones: centered intro and bottom lines, two link columns, legal links as one centered row,
   contact form in its own card */
@media (max-width:620px){
  .rich-footer{padding-top:52px!important}
  .rich-footer .footer-intro{justify-items:center;text-align:center;gap:14px!important;padding-bottom:30px!important}
  .rich-footer .footer-intro .brand{justify-content:center}
  .rich-footer .footer-intro h3{font-size:28px!important;line-height:1.15!important;margin:12px 0 0!important;text-wrap:balance}
  .rich-footer .footer-intro p{max-width:34ch;margin:0 auto!important;font-size:15.5px!important;line-height:1.6!important}
  .rich-footer .footer-links{gap:28px 16px!important;padding-top:30px!important}
  .rich-footer .footer-links b{display:block;margin-bottom:10px;font-size:12px;letter-spacing:.14em}
  .rich-footer .footer-links>div:nth-child(-n+2) a{display:flex;align-items:center;min-height:40px;padding:0!important;font-size:15.5px;line-height:1.3}
  /* Legal & trust: one compact centered row */
  .rich-footer .footer-links>div:nth-child(3){grid-column:1/-1;display:flex;flex-direction:row!important;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:20px;row-gap:0;text-align:center;padding-top:22px;border-top:1px solid rgba(255,244,232,.12)}
  .rich-footer .footer-links>div:nth-child(3) b{flex-basis:100%;margin-bottom:8px}
  .rich-footer .footer-links>div:nth-child(3) a{display:inline-flex;align-items:center;min-height:38px;padding:0!important;font-size:14px;text-decoration:underline;text-decoration-color:rgba(243,195,155,.35);text-underline-offset:4px}
  /* Contact form card */
  .rich-footer .footer-links>div:last-child{padding:22px 18px 20px;border:1px solid rgba(243,195,155,.18);border-radius:20px;background:rgba(255,236,216,.05)}
  .rich-footer .footer-links>div:last-child b{text-align:center}
  .rich-footer .footer-links>div:last-child small,.rich-footer .footer-links>div:last-child p,.rich-footer #contact-status{text-align:center}
  /* Bottom lines centered */
  .rich-footer .footer-bottom{align-items:center!important;text-align:center!important;gap:8px!important;margin-top:8px;padding-top:24px!important;font-size:13.5px}
  .rich-footer .footer-bottom span{max-width:36ch}
}
/* Dashboard window = the screen you can actually see (dvh follows the phone's address bar), and only the content
   area scrolls, so the top bar never slips under the browser bar */
.workspace-dialog[open]{height:100vh;height:100dvh!important;max-height:100dvh!important;overflow:hidden!important;margin:0!important;inset:0}
@media (max-width:600px){
  .workspace-dialog .app-shell{height:100%!important}
  .workspace-dialog .app-main{height:100%!important;overscroll-behavior:contain}
}
/* Dashboard pages on phones: app-style top bar, compact page intros, tidy lists */
@media (max-width:600px){
  .workspace-dialog .app-topbar{padding:calc(12px + env(safe-area-inset-top)) 16px 12px!important;background:rgba(250,242,230,.93)!important;
    -webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);box-shadow:0 1px 0 var(--line)}
  .workspace-dialog .app-topbar small{display:block;font:800 10.5px var(--sans)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta-dark)}
  .workspace-dialog .app-topbar h2{font:700 23px/1.12 var(--serif)!important;margin:3px 0 0!important;color:var(--espresso)}
  .workspace-dialog .app-topbar>div:first-child{min-width:0}
  .workspace-dialog .app-topbar h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Page intros: the top bar already names the page */
  .workspace-dialog .view-heading{margin:4px 0 20px!important;padding:0!important}
  .workspace-dialog .view-heading small{display:none!important}
  .workspace-dialog .view-heading h3{font-size:25px!important;line-height:1.16!important;margin:0 0 8px!important;text-wrap:balance}
  .workspace-dialog .view-heading p{font-size:15px!important;line-height:1.55!important;margin:0!important;color:var(--muted)}
  /* Learning Center lessons */
  .workspace-dialog .lc-lesson{min-height:58px}
  .workspace-dialog .lc-status{flex:none;padding:4px 10px;border-radius:999px;background:#f3e6d6;font:800 11px var(--sans)!important;letter-spacing:.02em;white-space:nowrap}
  /* Cards breathe a little less on small screens */
  .workspace-dialog .acct-grid{gap:14px!important}
  .workspace-dialog .acct-card{padding:22px 18px!important;border-radius:20px!important}
}