/* Phone layouts prioritize readable usage and actions within thumb reach. */
.m-mobile-usage { display:none; }
@media(max-width:767px) {
  body { min-width:0; }
  .member-app :is(a,button) { touch-action:manipulation; }
  .m-page-heading>div { min-width:0; }
  .member-app .m-content>* { animation:none; }
  .m-content { padding:22px 16px 28px; }
  .m-page-heading { align-items:center; gap:12px; margin-bottom:20px; }
  .m-page-heading h1 { font-size:26px; line-height:1.35; letter-spacing:-.02em; }
  .m-page-heading .m-eyebrow { font-size:10px; }
  .m-dashboard-heading h1 { font-size:26px; overflow-wrap:anywhere; }
  .m-dashboard-heading p { font-size:12px; line-height:1.7; margin-top:6px; }
  .m-heading-help { display:inline-flex; justify-content:center; width:44px; height:44px; padding:10px; border-radius:12px; }
  .member-app .m-announcements { margin-bottom:16px; }
  .member-app .m-announcement-bar { gap:8px; min-height:48px; padding:2px 8px; }
  .member-app .m-announcement-label { padding-right:8px; }
  .member-app .m-announcement-item span { display:none; }
  .member-app .m-announcement-item strong { font-size:12px; }
  .member-app .m-subscription { border-radius:16px; }
  .m-sub-overview { padding:20px; }
  .m-sub-topline { justify-content:space-between; gap:12px; }
  .m-sub-label,.m-sub-status { font-size:11px; }
  .member-app .m-subscription h2 { font-size:25px; line-height:1.4; margin:12px 0 0; }
  .m-sub-description,.m-sub-details,.m-usage-section { display:none; }
  .m-mobile-usage { display:grid; gap:10px; margin-top:20px; }
  .m-mobile-usage-values { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#eef3ff; font-size:12px; }
  .m-mobile-usage-values strong { color:#fff; font-size:15px; font-variant-numeric:tabular-nums; }
  .m-mobile-usage progress { display:block; width:100%; height:7px; overflow:hidden; border:0; border-radius:20px; appearance:none; background:#526edf; }
  .m-mobile-usage progress::-webkit-progress-bar { border-radius:20px; background:#526edf; }
  .m-mobile-usage progress::-webkit-progress-value { border-radius:20px; background:#38e0ff; }
  .m-mobile-usage progress::-moz-progress-bar { border-radius:20px; background:#38e0ff; }
  .member-app .m-sub-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:22px; }
  .member-app .m-sub-actions .m-renew-button { justify-content:center; min-height:46px; padding:11px 12px; font-size:13px; border-color:#96afff; }
  .member-app .m-sub-actions .m-renew-primary { grid-column:1/-1; border-color:#fff; font-weight:600; }
  .m-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0 24px; }
  .m-summary-card { display:flex; align-items:center; gap:12px; min-height:98px; padding:16px 12px; border-radius:12px; }
  .m-summary-card:first-child { grid-column:1/-1; min-height:82px; padding:16px; }
  .m-summary-icon { width:32px; height:32px; margin:0; flex-shrink:0; }
  .m-summary-icon .m-icon { width:17px; height:17px; }
  .m-summary-card:first-child .m-summary-icon { width:40px; height:40px; }
  .m-summary-copy { gap:4px; }
  .m-summary-copy>span { font-size:11px; }
  .m-summary-copy strong { font-size:16px; line-height:1.45; }
  .m-summary-card:first-child strong { font-size:22px; }
  .m-summary-card:first-child small { display:block; font-size:11px; }
  .m-summary-card:not(:first-child) { display:block; }
  .m-summary-card:not(:first-child) .m-summary-icon { display:none; }
  .m-tools-layout { margin-top:0; }
  .m-tools-layout .m-quick-import { display:grid; }
  .m-tools-layout .m-quick-import header { display:contents; }
  .m-quick-import header>div { order:0; }
  .m-quick-import .m-subscription-note { order:1; }
  .m-quick-import .m-import-clients { order:2; }
  .member-app .m-quick-import header .m-text-button { order:3; min-height:44px; margin-top:16px; font-size:13px; }
  .m-tools-layout .m-quick-import h2,.m-tools-layout .m-invite-promo h2 { font-size:20px; }
  .m-tools-layout .m-tools-description { font-size:12px; }
  .m-quick-import .m-import-clients { margin-top:16px; gap:10px; }
  .m-quick-import .m-import-client { min-height:84px; padding:12px 6px; }
  .m-quick-import .m-import-client>span { font-size:11px; }
  .m-tools-layout .m-invite-promo { min-height:200px; }
  .member-app .m-invite-promo a { min-height:46px; padding:11px 20px; font-size:13px; }
  .m-section-heading { align-items:flex-start; flex-wrap:wrap; gap:12px; }
  .m-section-heading h2 { max-width:none; font-size:20px; line-height:1.5; }
  .m-section-heading .m-text-button { min-height:44px; font-size:12px; }
  .m-client-grid { gap:12px; margin-top:12px; }
  .m-client-info { flex-direction:column; align-items:flex-start; gap:10px; min-height:112px; padding:16px; }
  .m-client-info h2 { font-size:16px; }
  .m-client-info p { font-size:11px; }
  .member-app .m-client-action { justify-content:center; min-height:48px; padding:12px 6px; font-size:11px; }
  .m-plan-center-heading { margin-bottom:16px; }
  .m-plan-filters { gap:3px; padding:4px; }
  .m-plan-filters button { min-height:44px; font-size:12px; padding:10px 8px; }
  .m-plan-grid { grid-template-columns:1fr; gap:16px; }
  .m-plan-card { padding:20px; }
  .m-plan-kind { font-size:11px; margin-bottom:10px; }
  .m-plan-card h2 { min-height:0; font-size:22px; }
  .m-plan-price { margin-top:12px; }
  .m-plan-price>strong { font-size:34px; }
  .m-plan-price>span { font-size:12px; }
  .m-plan-card-features { margin:16px 0 20px; padding-top:16px; gap:10px; }
  .m-plan-card-features .m-plan-feature-row { font-size:13px; line-height:1.7; gap:10px; }
  .m-plan-feature-icon { width:26px; height:26px; flex-basis:26px; }
  .m-plan-cycle>span { font-size:12px; }
  .m-plan-cycle select { min-height:48px; padding:10px 12px; font-size:16px; }
  .m-plan-purchase { min-height:48px; font-size:14px; font-weight:600; }
  .m-plan-card:hover,.m-plan-card:focus-within { transform:none; }
}
@media(max-width:359px) {
  .m-content { padding-right:12px; padding-left:12px; }
  .m-sub-overview { padding:18px; }
  .m-dashboard-heading h1 { font-size:23px; }
  .m-summary-copy strong { font-size:15px; }
  .m-tools-layout .m-quick-import,.m-tools-layout .m-invite-promo { padding:18px; }
  .m-plan-card { padding:18px; }
}

/* On phones the sign-in form is the first task on screen. */
@media(max-width:767px) {
  .page-navigation { height:68px; padding:0 16px; }
  .page-navigation .brand img { width:30px; height:30px; }
  .page-navigation .brand-wordmark strong { font-size:18px; }
  .page-navigation .brand-wordmark small { display:none; }
  .page-tools { gap:0; }
  .auth-layout { gap:0; margin:12px auto 0; padding:0 16px; }
  .auth-description { display:none; }
  .form-shell { padding:22px 20px; border-radius:16px; }
  .form-shell h2 { font-size:26px; }
  .form-kicker { margin-bottom:12px; }
  .form-subtitle { font-size:13px; line-height:1.7; }
  .auth-tabs button,.auth-tabs a { min-height:44px; font-size:14px; }
  .field-wrapper input { height:50px; padding:12px 14px; font-size:16px; }
  .field-wrapper:has(.password-toggle) input { padding-right:50px; }
  .password-toggle { width:44px; height:44px; }
  .field-label { font-size:13px; }
  .button-primary { min-height:48px; font-size:15px; }
  .auth-preview { min-height:48px; font-size:14px; }
  .form-options { min-height:44px; font-size:13px; }
  .form-options a,.form-options .checkbox-label { min-height:44px; display:inline-flex; align-items:center; }
  .auth-switch { display:flex; align-items:center; justify-content:center; min-height:44px; font-size:13px; }
  .auth-footer { padding:20px 16px max(20px,env(safe-area-inset-bottom)); font-size:11px; }
}

/* Compact phone plans keep the first two purchase choices on screen. */
.m-plan-mobile-facts,.m-plan-details>summary { display:none; }
@media(max-width:767px) {
  .m-content { padding-top:12px; }
  .m-plan-center-heading { margin-bottom:10px; }
  .m-plan-filters { width:100%; }
  .m-plan-grid { grid-template-columns:1fr; gap:10px; }
  .member-app .m-plan-card { padding:12px 14px; border-radius:12px; }
  .m-plan-card-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .m-plan-kind { display:none; }
  .member-app .m-plan-card h2 { min-width:0; font-size:18px; line-height:1.45; }
  .m-plan-price { flex:0 0 auto; margin:0; gap:2px; }
  .m-plan-price>strong { font-size:26px; line-height:1.25; }
  .m-plan-price>small { font-size:12px; }
  .m-plan-price>span { font-size:10px; }
  .m-plan-mobile-facts { display:flex; align-items:center; gap:18px; margin-top:8px; color:var(--m-muted); font-size:12px; line-height:1.5; }
  .m-plan-mobile-facts>span { display:inline-flex; align-items:center; gap:5px; }
  .m-plan-mobile-facts .m-icon { width:16px; height:16px; color:var(--plan-tone); }
  .m-plan-details { margin:2px 0 6px; }
  .member-app .m-plan-details>summary { display:flex; align-items:center; justify-content:flex-start; min-height:44px; padding:6px 0; color:var(--plan-tone); font-size:12px; cursor:pointer; list-style:none; }
  .m-plan-details>summary::marker { content:''; }
  .m-plan-details>summary::-webkit-details-marker { display:none; }
  .m-plan-details .m-plan-details-close { display:none; }
  .m-plan-details[open] .m-plan-details-open { display:none; }
  .m-plan-details[open] .m-plan-details-close { display:inline; }
  .m-plan-details>summary:focus-visible { outline:2px solid var(--plan-tone); outline-offset:2px; border-radius:4px; }
  .m-plan-details .m-plan-card-features { margin:0 0 12px; padding-top:10px; gap:8px; }
  .m-plan-details .m-plan-feature-row { font-size:12px; line-height:1.65; }
  .m-plan-card-footer { grid-template-columns:minmax(0,1fr) minmax(110px,.82fr); align-items:center; gap:8px; margin-top:0; }
  .m-plan-cycle { gap:0; }
  .m-plan-cycle>span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .m-plan-cycle select { min-height:44px; padding:8px; font-size:16px; }
  .m-plan-purchase { min-height:44px; padding:8px 10px; font-size:13px; }
}