/* Shared sizing for the academy, account, lessons and checkout entry pages. */
html {box-sizing:border-box; scrollbar-gutter:stable; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
*, *::before, *::after {box-sizing:inherit;}
body {min-width:0;}
img, video, canvas, svg {max-width:100%;}
video {height:auto;}
main, section, article, aside, form, fieldset, .wrap,
.hero-grid > *, .watch-grid > *, .cards-grid > *, .footer-grid > *,
.plan-grid > *, .class-grid > *, .outline-row-item > *, .catalog-course > * {min-width:0;}
h1, h2, h3, h4, p, a, button, label, .outline-sidebar, .auth-card {overflow-wrap:anywhere;}
input, select, textarea {min-width:0; max-width:100%;}
pre {max-width:100%; overflow-x:auto; overflow-wrap:anywhere;}
.nav-label-mobile {display:none;}
.auth-label-mobile {display:none;}
.mobile-course-picker {display:none;}
.auth-backdrop[aria-hidden="true"] {display:none;}
body.auth-open {overflow:hidden;}
.catalog-lesson-grid {grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))!important;}
.hero-grid {grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);}
.watch-grid {grid-template-columns:minmax(0,1fr) minmax(260px,340px);}
.video-stage {grid-template-columns:160px minmax(0,1fr);}
.pro-gate {overflow-y:auto; overscroll-behavior:contain;}
.auth-card {max-height:calc(100dvh - 32px); overscroll-behavior:contain;}
.auth-close, .modal-close {min-width:44px; min-height:44px;}
.auth-card .auth-error-msg {overflow-wrap:anywhere;}
body #auth-modal {max-height:calc(100dvh - 32px); overscroll-behavior:contain;}
body #auth-modal input {font-size:16px!important;}
.academy-subscription-prompt {max-height:calc(100dvh - 32px); overflow-y:auto;}
.academy-prompt-actions button {min-height:44px;}

@media(max-width:1024px) {
  .hero-grid, .watch-grid {grid-template-columns:minmax(0,1fr);}
  .video-stage {grid-template-columns:minmax(0,1fr);}
  .cards-grid {grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));}
}

@media(max-width:760px) {
  :root {--mobile-page-gap:16px;}
  .wrap {width:calc(100% - 2 * var(--mobile-page-gap)); max-width:100%;}
  input, textarea, select {font-size:16px!important;}
  button, a {touch-action:manipulation;}
  .btn, .learn-button, .save-button, .pill-button {min-height:44px; white-space:normal; max-width:100%;}
  .top-promo {min-height:32px;}
  .site-header .header-inner {
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    gap:10px 12px; padding:10px 0; min-height:0;
  }
  .header-inner .logo {grid-column:1; grid-row:1; font-size:25px; line-height:1.2;}
  .header-inner .header-actions {grid-column:2; grid-row:1; min-width:0; margin:0; gap:0;}
  #header-auth-btn {min-height:42px; max-width:165px; padding:8px 12px; font-size:13px; overflow:visible; white-space:normal;}
  #header-sub-btn, #mute-btn {display:none;}
  .header-inner .main-nav {
    display:grid; grid-column:1/-1; grid-row:2; grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px; width:100%; overflow:visible; padding:0; margin:0; order:initial;
  }
  .main-nav .nav-tab {min-width:0; min-height:44px; padding:8px 3px; font-size:12px; white-space:normal; line-height:1.25;}
  .nav-label-desktop {display:none;}
  .nav-label-mobile {display:inline;}
  .auth-label-desktop {display:none;}
  .auth-label-mobile {display:inline;}
  .hero-grid {gap:24px;}
  .view-section.active {animation:none;}
  .hero-copy {padding:0;}
  .hero-copy h1 {font-size:clamp(26px,7.3vw,36px); line-height:1.15;}
  .hero-copy .btn {display:flex; justify-content:center; align-items:center;}
  .video-topbar {flex-wrap:wrap; align-items:center; gap:10px; padding:12px;}
  .video-course-pill {flex:1 1 100%; min-width:0;}
  .video-course-pill span:last-child {white-space:normal; overflow:visible; text-overflow:clip;}
  .video-topbar > div:last-child {flex:1 1 100%; flex-wrap:wrap; justify-content:stretch;}
  .video-topbar .btn {min-height:44px; white-space:normal; flex:1; font-size:13px;}
  .video-topbar .btn.outline {display:inline-flex;}
  .video-stage {min-height:0; padding:12px; gap:12px;}
  .slide-board {height:auto; min-height:330px; max-height:none; padding:14px; overflow:visible;}
  .slide-title {font-size:clamp(19px,5vw,23px); line-height:1.3;}
  .slide-board .btn {height:auto;}
  .character-column {min-width:0;}
  .character-label {min-width:0; flex-wrap:wrap;}
  .steps-grid-4, .compare-grid {grid-template-columns:minmax(0,1fr)!important;}
  .subtitle-bar {height:auto; min-height:70px; padding:12px; flex-direction:column; gap:6px; overflow:visible;}
  .subtitle-bar > span:last-child {display:block; -webkit-line-clamp:unset; overflow:visible; line-height:1.5;}
  .scene-buttons-row {grid-template-columns:repeat(2,minmax(0,1fr));}
  .scene-step-btn {height:auto; min-height:44px; white-space:normal; overflow:visible; font-size:12px; padding:8px;}
  #player-course-tabs {display:none!important;}
  .mobile-course-picker {display:grid; gap:8px; font-size:13px; font-weight:700; padding-top:16px;}
  .mobile-course-picker select {width:100%; min-height:48px; border:1px solid #cbd5e1; border-radius:8px; background:white; color:#17243a; padding:10px;}
  #player-course-tabs .btn {min-height:44px;}
  .outline-sidebar #pl-list {max-height:none!important; overflow:visible!important;}
  .catalog-course {padding:18px!important;}
  .catalog-course-heading {align-items:flex-start!important;}
  .catalog-course-heading > div {min-width:0; flex:1 1 100%; flex-wrap:wrap;}
  .catalog-course-heading .btn {width:100%;}
  .catalog-course h3 {font-size:clamp(21px,6vw,27px)!important; line-height:1.25;}
  .catalog-lesson-grid {grid-template-columns:minmax(0,1fr)!important;}
  .course-body, .outline-header {padding:18px;}
  .course-body p {font-size:14px; line-height:1.6;}
  .pro-gate {position:fixed; inset:16px; margin:auto; width:calc(100% - 32px); max-width:500px; height:fit-content; max-height:calc(100dvh - 32px); padding:22px 18px; justify-content:flex-start; gap:0; border-radius:16px; z-index:9100; box-shadow:0 0 0 100vmax #10233f80;}
  .pro-gate > div, .pro-gate p {max-width:100%!important;}
  .pro-gate .btn {min-height:48px;}
  .auth-backdrop {padding:16px; align-items:center;}
  .auth-card {width:100%; max-width:440px; max-height:calc(100dvh - 32px); border-radius:16px; padding:24px 18px;}
  .auth-card h3 {padding-right:28px;}
  .auth-card .google-btn-full {min-height:48px; font-size:14px; white-space:normal;}
  .auth-card .auth-field input {min-height:48px;}
  .auth-card form .btn {min-height:48px;}
  .auth-close {top:8px; right:8px;}
  body #auth-modal {padding:24px 18px!important; width:calc(100% - 32px)!important;}
  .section-block {padding:28px 0;}
  .footer-grid {grid-template-columns:minmax(0,1fr);}
  .toast {max-width:calc(100% - 24px); overflow-wrap:anywhere;}

  /* The older lesson/account pages use a direct-child header and the same gutters. */
  body.learn-app .site-header.z-header {width:100%; max-width:100%; min-height:0; padding:12px 16px; display:flex; flex-wrap:wrap; gap:12px;}
  body.learn-app .site-header.z-header .brand {min-width:0; margin-right:auto;}
  body.learn-app .site-header.z-header > nav {display:none!important;}
  body.learn-app .site-header.z-header .header-actions {min-width:0; max-width:100%; flex-wrap:wrap; gap:8px;}
  body.learn-app .header-actions .nav-login, body.learn-app .header-actions .nav-account {display:inline-flex!important; min-height:44px; align-items:center;}
  body.learn-app .header-actions .nav-subscribe {white-space:normal;}
  body.learn-app .mobile-navigation {display:block;}
  body.learn-app .mobile-navigation nav {max-width:calc(100vw - 32px);}
  body.learn-app .learn-main .wrap, body.learn-app .section.wrap {width:calc(100% - 32px);}
  body.learn-app .plan-grid {display:grid; grid-template-columns:minmax(0,1fr);}
  body.learn-app .class-grid, body.learn-app .outcome-grid {grid-template-columns:minmax(0,1fr);}
  .claude-continue-heading, .claude-resources {min-width:0; flex-wrap:wrap;}
  .claude-free-lessons li, .claude-paid-lessons li {min-width:0; flex-wrap:wrap;}
  .claude-lesson-detail {min-width:0; flex:1 1 160px;}
  .claude-lesson-link {max-width:100%; white-space:normal;}
}

@media(max-width:360px) {
  :root {--mobile-page-gap:12px;}
  .header-inner .logo {font-size:23px;}
  #header-auth-btn {max-width:150px; padding:8px; font-size:11px;}
  .header-inner .main-nav {grid-template-columns:.8fr .8fr 1fr 1.25fr;}
  .main-nav .nav-tab {font-size:11px; overflow-wrap:normal;}
  .catalog-course {padding:14px!important;}
  .auth-backdrop {padding:12px;}
  .auth-card {max-height:calc(100dvh - 24px); padding:22px 16px;}
}

@media(max-height:540px) and (max-width:1024px) {
  .site-header {position:static;}
  .auth-backdrop {align-items:center; padding:12px;}
  .auth-card {max-height:calc(100dvh - 24px);}
}