@media(max-width:1050px){.app-shell{grid-template-columns:205px minmax(0,1fr)}.landing{grid-template-columns:1fr 1fr;gap:30px}.landing-copy h1{font-size:62px}.future-stage{height:590px}.hero-grid,.future-layout,.workout-layout,.coach-layout,.mirror-layout{grid-template-columns:1fr}.future-panel{order:-1}.metrics-grid,.progress-metrics,.nutrition-grid{grid-template-columns:repeat(2,1fr)}.quick-grid,.product-grid{grid-template-columns:repeat(2,1fr)}.coach-context{display:none}}
@media(max-width:760px){body{background:var(--bg)}.public-topbar{height:calc(58px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0}.flow-progress{top:calc(57px + env(safe-area-inset-top))}.public-surface{inset:calc(58px + env(safe-area-inset-top)) 0 0}.public-scroll{padding:18px 15px max(24px,env(safe-area-inset-bottom))}.brand--compact{font-size:17px}.landing{display:flex;flex-direction:column;justify-content:flex-start;gap:18px;min-height:100%;padding:10px 0 24px}.landing-copy{width:100%}.landing-copy h1{font-size:clamp(48px,15vw,68px);line-height:.86;margin:10px 0 14px}.landing-copy>p{font-size:15px}.landing-actions{margin-top:20px}.landing-actions .button{flex:1}.trust-row{margin-top:17px;gap:11px}.landing-visual{width:100%;min-height:430px}.future-stage{height:430px}.stage-callout{right:10px;bottom:9%}.mode-gate{padding:18px}.mode-gate h1{font-size:44px}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:185px}.mode-card b{margin-top:34px;font-size:36px}.app-shell{display:block}.side-nav{display:none}.bottom-nav{display:grid;position:fixed;z-index:50;left:0;right:0;grid-template-columns:repeat(5,1fr)}.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-weight:750;border-radius:11px}.app-header{align-items:flex-start;flex-direction:column}.app-header h1{font-size:var(--type-h1)}.flow-screen{min-height:calc(100dvh - 112px);justify-content:flex-start;padding-top:8px}.flow-screen h1{font-size:49px}.capture-grid,.refine-layout,.unlock-layout,.lock-layout,.checkin-layout{grid-template-columns:1fr}.capture-well{min-height:410px}.capture-side{order:-1}.future-layout{min-height:auto}.compare-card{min-height:500px}.future-panel h1{font-size:47px}.preview-tile{min-height:470px}.metrics-grid,.quick-grid,.nutrition-grid,.meal-grid,.progress-metrics,.review-grid,.membership-grid,.product-grid{grid-template-columns:1fr}.twin-grid{grid-template-columns:1fr}.checkin-fields,.settings-fields{grid-template-columns:1fr}.checkin-fields .full,.settings-fields .full{grid-column:auto}.workout-layout,.coach-layout,.mirror-layout{grid-template-columns:1fr}.set-row{grid-template-columns:40px 1fr 1fr auto}.profile-row{grid-template-columns:1fr}.presentation-cards{grid-template-columns:1fr}.action-row>.button{flex:1}}
@media(max-width:410px){.landing-copy h1{font-size:46px}.future-stage{height:390px}.compare-card{min-height:430px}.metric-value{font-size:29px}}
@media(display-mode:standalone){.public-topbar{padding-top:env(safe-area-inset-top);height:calc(60px + env(safe-area-inset-top))}.public-surface{top:calc(60px + env(safe-area-inset-top))}.flow-progress{top:calc(59px + env(safe-area-inset-top))}.app-scroll{padding-top:max(24px,env(safe-area-inset-top))}}
@media(max-width:760px){.bottom-nav button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font:750 11px/1 inherit;border-radius:11px}.bottom-nav button .icon{width:20px;height:20px}.bottom-nav button.active{color:var(--text);background:var(--accent-soft)}.more-sheet[hidden]{display:none}.more-sheet{position:fixed;inset:0;z-index:90;display:grid;align-items:end}.more-sheet__scrim{position:absolute;inset:0;border:0;background:rgba(0,0,0,.58);backdrop-filter:blur(4px)}.more-sheet__panel{position:relative;max-height:min(82dvh,670px);overflow:auto;padding:10px 16px calc(24px + env(safe-area-inset-bottom));border:1px solid var(--line-strong);border-radius:28px 28px 0 0;background:linear-gradient(155deg,rgba(31,25,23,.98),rgba(8,7,6,.99));box-shadow:0 -24px 70px rgba(0,0,0,.5)}.more-sheet__handle{width:42px;margin:0 auto 14px;border-radius:99px;background:var(--line-strong)}.more-sheet__panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.more-sheet__panel h2{margin:4px 0 0;font:400 34px/1 var(--serif)}.more-sheet__close{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.05)}.more-sheet nav{grid-template-columns:1fr 1fr;gap:7px}.more-sheet nav a,.more-sheet__account>a,.more-sheet__account>button{padding:0 12px;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--radius-inner);background:rgba(255,255,255,.035);color:var(--text);font-size:13px}.more-sheet nav a.active{border-color:var(--accent-strong);background:var(--accent-soft)}.more-sheet__account{display:grid;gap:7px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.more-sheet__account>span{font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}.more-sheet__account>button{width:100%;color:var(--muted);text-align:left}.more-sheet__account .icon{width:19px;color:var(--accent)}}

@media(max-width:760px){
  .landing-actions{display:grid;grid-template-columns:1fr}.landing-actions .button{width:100%;white-space:nowrap}.mission-card .action-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.mission-card .action-row>.button{min-width:0}
  .app-profile-trigger{display:inline-flex;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:44px;padding:0}.app-profile-trigger span{display:none}
  .bottom-nav{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));padding:6px;border:1px solid var(--line-strong);border-radius:24px;box-shadow:0 16px 44px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(14px)}
  .bottom-nav a{min-width:44px;min-height:52px;color:var(--muted)}.bottom-nav a .icon{width:19px;height:19px}.bottom-nav a.active{background:var(--accent-soft);color:var(--text)}
  .member-skeleton{grid-template-columns:1fr 1fr;min-height:390px}.member-skeleton>i:first-of-type,.member-skeleton--workout>i:first-of-type,.member-skeleton--coach>i:first-of-type,.member-skeleton--nutrition>i:first-of-type,.member-skeleton--progress>i:first-of-type{grid-column:span 2;grid-row:auto;min-height:170px}.member-skeleton--workout>i:nth-of-type(2),.member-skeleton--coach>i:nth-of-type(2){grid-column:span 2;min-height:220px}
  .more-sheet__panel{will-change:transform}.more-sheet__handle{height:5px;margin-bottom:15px}.more-sheet__close{min-width:44px;min-height:44px}.more-sheet nav a,.more-sheet__account>a,.more-sheet__account>button{min-height:52px}
}

/* Member surfaces are task-first on a phone. Keep the floating rail clear of
   content with one shared geometry token instead of competing padding rules. */
@media(max-width:760px){
  :root{--app-nav-height:66px;--app-nav-offset:max(10px,env(safe-area-inset-bottom));--app-nav-reserved:calc(var(--app-nav-height) + var(--app-nav-offset) + 24px)}
  .app-shell{min-height:100svh;min-height:100dvh}
  .app-surface{height:100svh;height:100dvh;padding-bottom:0}
  .app-scroll{padding:calc(max(14px,env(safe-area-inset-top)) + 2px) 15px var(--app-nav-reserved);scroll-padding-bottom:var(--app-nav-reserved);scrollbar-gutter:stable}
  .bottom-nav{height:var(--app-nav-height);bottom:var(--app-nav-offset)}
  .member-screen{height:max-content;min-height:100%;gap:16px;padding-bottom:0}
  .app-header{gap:8px;margin-bottom:2px}
  .app-header .eyebrow{display:none}
  .app-header h1{margin-top:0;font-size:var(--type-h1);line-height:.98;letter-spacing:-.035em}
  .app-header--utility h1{font-size:var(--type-h1);line-height:1}
  .app-header__subtitle{margin-top:5px;font-size:13px;line-height:1.4;max-width:34ch}
  .app-header .eyebrow{letter-spacing:.16em}
  .app-header>.button{min-height:var(--control-h-sm);padding-inline:var(--control-pad-sm);font-size:var(--control-fs-sm)}
  .hero-grid{gap:var(--gap-cards)}
  .mission-card{min-height:0}
  .mission-card h2{margin:7px 0 5px;font-size:clamp(30px,8vw,37px);line-height:.95}
  .mission-card>p{margin:0;font-size:13px;line-height:1.5}
  .mission-card .action-row{margin-top:16px}
  .mission-card .mission-meta{margin-top:13px}
  .future-mini{min-height:198px;aspect-ratio:1.7/1}
  .future-mini-overlay{left:12px;right:12px;bottom:12px;padding:11px 12px}
  .quick-grid{gap:var(--gap-cards)}
  .quick-card{min-height:136px}
  .quick-card h3{margin:10px 0 3px}
  .quick-card p{font-size:11px}
  /* Keep the hit box just above the platform minimum so device-pixel rounding
     cannot turn a 44px target into 43.999px in WebKit/Chromium layout math. */
  /* Compact quick actions still need room for their label and trailing icon.
     The previous icon-sized width let `Open` overflow its own pill on phones. */
  .quick-card .button{justify-content:center;min-height:44.25px;min-width:84px;padding-inline:var(--control-pad-sm)}
  .exercise-panel{gap:var(--space-3)}
  .exercise-panel h2{font-size:32px}
  .exercise-row{padding:11px;gap:10px}
  .meal-grid,.review-grid,.membership-grid{gap:var(--gap-cards)}
  .checkin-photo{min-height:300px}
  .twin-grid{display:flex;overflow-x:auto;gap:var(--gap-cards);margin-right:-13px;padding:0 13px 6px 0;scroll-snap-type:x mandatory;scrollbar-width:none}
  .twin-grid::-webkit-scrollbar{display:none}
  .twin-grid>.glass-card{flex:0 0 min(82vw,330px);scroll-snap-align:start}
  .twin-card{min-height:280px}
  .history-thumb{flex-basis:96px;height:128px}
  .chat-card{min-height:calc(100svh - var(--app-nav-reserved) - 116px);min-height:calc(100dvh - var(--app-nav-reserved) - 116px)}
  .chat-header{padding:14px 16px}
  .chat-feed{padding:14px}
  .coach-context h2{margin:4px 0 11px}
  .profile-avatar{width:88px}
  .camera-stage{min-height:360px}
}

@media(max-width:410px){
  .app-scroll{padding-inline:13px}
  .future-mini{min-height:190px}
  .twin-grid>.glass-card{flex-basis:84vw}
  .twin-card{min-height:258px}
}

@media(max-width:340px){
  .mission-card .action-row{grid-template-columns:1fr;gap:8px}
  .mission-card .action-row>.button{width:100%;white-space:normal;line-height:1.15;padding-inline:12px}
}

/* Four summary values are a compact dashboard on a phone, not four full
   viewport cards. Keep the values readable while exposing the next useful
   section in the first swipe. */
@media(max-width:760px){
  .metrics-grid,.nutrition-grid,.progress-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-tiles)}
  .metric-card{min-height:94px}
  .metric-label{gap:5px;letter-spacing:.1em;line-height:1.2}
  .metric-value{margin-top:10px;font-size:27px}
  .metric-value small{font-size:11px;margin-left:3px}
  .hero-grid--media-first>.glass-card:first-child .mission-card{min-height:0}
  .hero-grid--media-first .mission-card .mission-meta{gap:5px;margin-top:9px}
  .hero-grid--media-first .mission-card>p{line-height:1.35}
  .mission-card .action-row>.button{white-space:normal;line-height:1.1}
  .mission-card .action-row>.button span{min-width:0;overflow-wrap:anywhere;text-align:center}
  .hero-grid--media-first>.glass-card:last-child,.hero-grid--media-first>.glass-card:last-child .future-mini{min-height:320px;height:320px}
}

/* The media-first hero owns its tablet behavior. The broad legacy hero rule
   above intentionally stacks generic routes, but this surface remains a
   composed two-column scene until the phone breakpoint; below that it uses a
   short media panel plus an overlapping mission sheet instead of two 430px
   cards stacked end-to-end. */
@media (min-width:850px) and (max-width:1050px){
  .hero-grid--media-first{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px}
  .hero-grid--media-first>.glass-card:first-child,.hero-grid--media-first>.glass-card:last-child{min-height:clamp(320px,56dvh,400px)}
  .hero-grid--media-first>.glass-card:first-child .mission-card,.hero-grid--media-first>.glass-card:last-child .future-mini{min-height:clamp(320px,56dvh,400px)}
  .hero-grid--media-first .mission-card h2{font-size:clamp(34px,4.2vw,44px)}
  .hero-grid--media-first .mission-card .action-row{margin-top:18px}
}

@media (min-width:761px) and (max-width:849px){
  .hero-grid--media-first{grid-template-columns:1fr;gap:0}
  .hero-grid--media-first>.glass-card:last-child{order:1;min-height:320px;z-index:1}
  .hero-grid--media-first>.glass-card:last-child .future-mini{min-height:320px;height:auto}
  .hero-grid--media-first>.glass-card:first-child{order:2;margin:-48px 22px 0;z-index:2;background:linear-gradient(145deg,rgba(31,24,23,.97),rgba(10,8,8,.97));box-shadow:var(--shadow-raised)}
  .hero-grid--media-first>.glass-card:first-child .mission-card{min-height:0}
  .hero-grid--media-first .mission-meta{gap:6px;margin-top:9px}
  .hero-grid--media-first .mission-card .action-row{margin-top:16px}
}

/* An empty Future Form is a truthful state, not a hero image. Keep it
   visually intentional but compact so a new member reaches today's mission
   without scrolling through a full-height placeholder. Approved user or
   provider media keeps the cinematic composition above unchanged. */
@media (max-width:760px){
  .hero-grid--media-first>.glass-card.future-card--empty{height:238px;min-height:238px;align-self:start}
  .hero-grid--media-first>.glass-card.future-card--empty .future-mini--empty{height:238px;min-height:238px;aspect-ratio:auto}
}
@media (max-width:410px){
  .hero-grid--media-first>.glass-card.future-card--empty{height:220px;min-height:220px}
  .hero-grid--media-first>.glass-card.future-card--empty .future-mini--empty{height:220px;min-height:220px}
}

/* Final cascade guard: semantic context must remain readable after the
   compact dashboard overrides above. */
@media(max-width:760px){
  .journey-step b,.journey-step small,.metric-label,.hero-grid--media-first .meta-pill,.hero-grid--media-first .mission-meta .meta-pill,.app-header .eyebrow,.bottom-nav a,.more-sheet__account>span{font-size:11px}
}