/* HAMOU MATH — Futuristic Luxury OS Design System (v55.3 Universal)
   Preserves all existing IDs, classes, DOM hierarchy, and JS behavioral contracts. */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;600;700;800;900&display=swap');

:root {
  --hm-bg: #060913;
  --hm-bg-alt: #0a1022;
  --hm-surface: rgba(14, 23, 44, 0.72);
  --hm-surface-solid: #0d172e;
  --hm-surface-2: #14213d;
  --hm-surface-hover: rgba(23, 37, 68, 0.85);
  --hm-text: #f8fafc;
  --hm-text-bright: #ffffff;
  --hm-muted: #94a3b8;
  --hm-line: rgba(56, 189, 248, 0.15);
  --hm-border: rgba(56, 189, 248, 0.18);
  --hm-border-hover: rgba(56, 189, 248, 0.45);
  
  --hm-primary: #38bdf8;
  --hm-primary-2: #06b6d4;
  --hm-blue: #2563eb;
  --hm-accent: #8b5cf6;
  --hm-violet: #7c3aed;
  --hm-gold: #f59e0b;
  --hm-gold-bright: #fbbf24;
  --hm-success: #10b981;
  --hm-danger: #ef4444;

  --hm-glow-cyan: 0 0 25px rgba(6, 182, 212, 0.35);
  --hm-glow-blue: 0 0 30px rgba(37, 99, 235, 0.35);
  --hm-glow-purple: 0 0 30px rgba(139, 92, 246, 0.35);
  --hm-glow-gold: 0 0 30px rgba(245, 158, 11, 0.35);

  --hm-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --hm-shadow-sm: 0 10px 30px -5px rgba(0, 0, 0, 0.45);
  --hm-shadow-inner: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);

  --hm-radius-sm: 12px;
  --hm-radius: 18px;
  --hm-radius-lg: 26px;
  --hm-radius-xl: 32px;
}

html.light {
  --hm-bg: #f8fafc;
  --hm-bg-alt: #f1f5f9;
  --hm-surface: rgba(255, 255, 255, 0.88);
  --hm-surface-solid: #ffffff;
  --hm-surface-2: #eef4fc;
  --hm-surface-hover: #ffffff;
  --hm-text: #0b1325;
  --hm-text-bright: #050a17;
  --hm-muted: #526077;
  --hm-line: rgba(15, 23, 42, 0.09);
  --hm-border: rgba(37, 99, 235, 0.16);
  --hm-border-hover: rgba(37, 99, 235, 0.38);
  --hm-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.05);
  --hm-shadow-sm: 0 8px 24px -4px rgba(15, 23, 42, 0.05);
  --hm-shadow-inner: inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
}

/* Base Canvas & Typography */
html {
  background: var(--hm-bg);
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh !important;
  color: var(--hm-text) !important;
  font-family: 'Cairo', 'Plus Jakarta Sans', Tajawal, 'Noto Sans Arabic', system-ui, -apple-system, sans-serif !important;
  background-color: var(--hm-bg) !important;
  background-image: 
    radial-gradient(1100px 650px at 0% -10%, rgba(6, 182, 212, 0.16), transparent 60%),
    radial-gradient(1000px 600px at 100% 10%, rgba(124, 58, 237, 0.15), transparent 60%),
    radial-gradient(800px 500px at 50% 90%, rgba(37, 99, 235, 0.12), transparent 70%) !important;
  background-attachment: fixed !important;
  line-height: 1.75;
  overflow-x: hidden;
}

/* Subtle Mathematical Matrix Grid */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.35;
  background-image: 
    linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at 50% 30%, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, black 40%, transparent 85%);
}

/* Interactive Element Transitions */
:where(button, a, input, select, textarea) {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--hm-primary) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.4) !important;
}

/* Layout Containers */
.container, .wrap, .hm-container {
  width: min(1360px, calc(100% - 32px)) !important;
  margin-inline: auto !important;
}

/* Futuristic Header / Navigation Bar */
header, .topbar, .hm-top, #hamou-navbar .hm-top, .navbar {
  background: rgba(6, 10, 20, 0.82) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border-bottom: 1px solid var(--hm-border) !important;
  box-shadow: 0 12px 35px -8px rgba(0, 0, 0, 0.5) !important;
}

html.light header, html.light .topbar {
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06) !important;
}

.brand, .hm-brand {
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: var(--hm-text) !important;
}

.brand-badge, .math-badge, .hm-logo-mark, #hamou-navbar .hm-logo {
  display: inline-grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #7c3aed 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 0 24px rgba(6, 182, 212, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Nav Links */
.nav-link, #hamou-navbar .hm-link {
  color: var(--hm-muted) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
}

.nav-link:hover, #hamou-navbar .hm-link:hover {
  color: var(--hm-text-bright) !important;
  background: rgba(56, 189, 248, 0.10) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.15) !important;
}

/* Buttons System */
button, .btn, .primary-btn, .secondary-btn, .success-btn, .danger-btn, a.btn, .hm-btn {
  font-family: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 46px !important;
  padding: 10px 22px !important;
  border-radius: var(--hm-radius-sm) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
}

button:hover, .btn:hover, .primary-btn:hover, .secondary-btn:hover, a.btn:hover {
  transform: translateY(-2px) !important;
}

button:active, .btn:active, .primary-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

.primary-btn, .btn-primary, .hm-btn-primary, #generate, #install-button {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 55%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 10px 25px -4px rgba(37, 99, 235, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.primary-btn:hover, .btn-primary:hover, #generate:hover {
  box-shadow: 0 14px 35px -2px rgba(6, 182, 212, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  filter: brightness(1.08) !important;
}

.secondary-btn, .btn-secondary {
  background: rgba(15, 23, 42, 0.65) !important;
  color: var(--hm-text) !important;
  border: 1px solid var(--hm-border) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: var(--hm-shadow-sm) !important;
}

.secondary-btn:hover, .btn-secondary:hover {
  border-color: var(--hm-primary) !important;
  background: rgba(23, 37, 68, 0.85) !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.2) !important;
}

/* Futuristic Glass Cards */
.card, .panel, .resource-card, .hero-card, .auth-box, .banner, .tool-card,
.feature-card, .dashboard-card, .function-card, .hm-card, .hm-stat, .preview-page {
  background: var(--hm-surface) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid var(--hm-border) !important;
  border-radius: var(--hm-radius) !important;
  box-shadow: var(--hm-shadow), var(--hm-shadow-inner) !important;
  color: var(--hm-text) !important;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}

.card:hover, .resource-card:hover, .tool-card:hover, .feature-card:hover, .function-card:hover {
  border-color: var(--hm-border-hover) !important;
  box-shadow: var(--hm-shadow), 0 0 25px rgba(56, 189, 248, 0.15) !important;
  transform: translateY(-4px) !important;
}

/* Form Controls (Inputs, Selects, Textareas) */
input, textarea, select {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px !important;
  border: 1px solid var(--hm-border) !important;
  border-radius: var(--hm-radius-sm) !important;
  background: rgba(11, 19, 38, 0.75) !important;
  color: var(--hm-text) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  outline: none !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

html.light input, html.light textarea, html.light select {
  background: #ffffff !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--hm-primary) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2), 0 0 18px rgba(6, 182, 212, 0.25) !important;
}

/* Headings & Typographic Hierarchy */
h1, h2, h3, h4, h5, h6 {
  color: var(--hm-text-bright) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  text-wrap: balance;
}

.eyebrow, .hm-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: #38bdf8 !important;
  background: rgba(6, 182, 212, 0.10) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.18) !important;
}

/* Stats Metric Cards */
.stats-card, .hm-stat {
  text-align: center;
  padding: 24px 18px !important;
  position: relative;
  overflow: hidden;
}

.stats-card::before, .hm-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hm-primary), transparent);
}

.stat-number, .hm-stat b {
  font-size: clamp(32px, 4vw, 42px) !important;
  font-weight: 950 !important;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #38bdf8, #818cf8 60%, #c084fc) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  display: block;
  margin-bottom: 4px;
}

/* Mobile & Touch Responsiveness */
@media (max-width: 1024px) {
  .hero-grid, .builder {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .grid-4, .function-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }
  .container, .wrap, .hm-container {
    width: calc(100% - 24px) !important;
    padding-inline: 0 !important;
  }
  .grid-4, .grid-3, .grid-2, .function-grid, .hm-grid-3, .hm-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .card, .panel, .hero-card {
    padding: 20px !important;
    border-radius: var(--hm-radius) !important;
  }
  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .hero-actions > * {
    width: 100% !important;
  }
  button, .btn, .primary-btn, .secondary-btn, a.btn {
    min-height: 48px !important;
    width: 100% !important;
  }
  .hero h1 {
    font-size: clamp(28px, 7vw, 40px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* HAMOU MATH — premium mobile ergonomics */
@media (max-width: 768px) {
  html { scroll-padding-top: 72px; }
  body { overflow-x: clip; }
  .container, .wrap, .page, main, .content, .dashboard-container {
    max-width: 100%;
  }
  .container { width: calc(100% - 28px); }
  .hero, .hero-grid, .growth-grid, .builder, .grid-2, .grid-3, .grid-4,
  .function-grid, .persona-grid, .growth-feature-grid {
    min-width: 0;
  }
  .hero-grid, .growth-grid, .builder, .grid-2, .grid-3, .grid-4,
  .function-grid, .persona-grid, .growth-feature-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .hero, .growth-hero, .growth-card, .card, .panel, .function-card {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.65rem); line-height: 1.2; }
  .hero p { font-size: 15px; }
  .section-head { gap: 10px; }
  .section-head, .topbar, .nav-inner, .header-inner {
    flex-wrap: wrap;
  }
  .btn, button, input, select, textarea, a.primary-btn, .primary-btn {
    max-width: 100%;
  }
  button, .btn, .primary-btn { min-height: 44px; }
  input, select, textarea { font-size: 16px !important; }
  .table-wrap, .table-responsive, .overflow-x-auto {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-menu { max-width: min(92vw, 360px); }
  img, video, canvas, svg { max-width: 100%; }
  .growth-section { padding: 42px 0; }
  .growth-hero, .growth-card { padding: 18px; border-radius: 20px; }
  .function-card { padding: 17px; min-height: 0; }
  .toast { width: calc(100% - 24px); border-radius: 14px; }
}
@media (max-width: 420px) {
  .container { width: calc(100% - 20px); }
  .brand { font-size: 17px !important; }
  .brand-badge { width: 36px !important; height: 36px !important; }
  .hero { padding-inline: 0; }
  .hero h1 { font-size: clamp(1.65rem, 8vw, 2rem); }
  .hero-actions, .hero-cta, .top-actions, .actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  .hero-actions > *, .hero-cta > *, .top-actions > *, .actions > * { width: 100%; }
  .stat-value, .metric-value { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 768px) {
  .hm-features-grid, .hm-mockups-grid, .hm-world-grid, .hm-world-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .hm-feature-card { min-width: 0; padding: 16px !important; }
  .hm-feature-card h3 { font-size: 16px; line-height: 1.45; }
  .hm-feature-card p { font-size: 13px; line-height: 1.65; }
  .hm-mockup-body img { height: auto; object-fit: contain; }
}
@media (max-width: 520px) {
  .hm-features-grid, .hm-mockups-grid, .hm-world-grid, .hm-world-cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .hm-feature-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; column-gap: 12px; }
  .hm-feature-icon-wrap { grid-row: span 3; width: 42px; height: 42px; }
  .hm-feature-card h3, .hm-feature-card p { min-width: 0; }
  .hm-feature-card-btn { justify-self: end; }
}


/* Shared mobile ergonomics v60 — loaded by every page using the world theme. */
/* HAMOU MATH — mobile-first refinement v60.1.1
   Additive responsive layer: preserves existing page IDs, forms, and JS contracts. */
:root{--hm-mobile-gutter:clamp(14px,4vw,24px)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;overflow-x:clip}
img,video,canvas,iframe{max-width:100%}
button,input,select,textarea{font:inherit}
:where(button,a,input,select,textarea,[role=button]){touch-action:manipulation}
:where(button,a,input,select,textarea){scroll-margin-block:84px}
@media(max-width:760px){
  body{font-size:15px;line-height:1.7}
  main,.container,.wrap,.page,.content,.page-content,.dashboard,.teacher-dashboard,.admin-dashboard,.dashboard-container{width:auto;max-width:100%;min-width:0}
  main,.container,.content,.page-content{padding-inline:var(--hm-mobile-gutter)}
  main>section{min-width:0}
  .hero,.hero-grid,.growth-hero,.growth-card,.panel,.card,.function-card,.stat-card,.stat-card,.account-conversion,.premium-strip{min-width:0;overflow-wrap:anywhere}
  .hero h1,h1{line-height:1.2;letter-spacing:-.02em}
  .hero p,.section-head p{line-height:1.75}
  .section-head{align-items:stretch;flex-direction:column;gap:12px}
  .hero-actions,.hero-cta,.top-actions,.actions,.account-conversion,.premium-strip{gap:10px}
  .hero-actions,.hero-cta{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .hero-actions>* ,.hero-cta>*{width:100%;min-width:0}
  .btn,button,.primary-btn,.secondary-btn,.success-btn,.ghost-btn,a.btn{min-height:46px;max-width:100%;white-space:normal}
  input,select,textarea{width:100%;max-width:100%;min-height:46px;font-size:16px!important}
  textarea{min-height:110px}
  .function-grid,.hm-functions-grid,.hm-features-grid,.hm-mockups-grid,.hm-world-grid,.hm-world-cards,.persona-grid,.growth-feature-grid,.pillars-grid,.hm-pillars-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  .function-card,.hm-feature-card,.hm-world-card{padding:16px!important;border-radius:18px}
  .function-card{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:12px;align-items:start}
  .function-card>span{grid-row:span 2}
  .function-card b,.function-card small{min-width:0}
  .grid,.grid-2,.grid-3,.grid-4,.stats,.stat-grid,.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .stats .stat-card,.stats .stat-value{min-width:0}
  .stat-value,.metric-value{font-size:clamp(20px,6vw,30px);overflow-wrap:anywhere}
  .table-wrap,.table-responsive,.overflow-x-auto,.table-container{max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  table{max-width:100%;white-space:nowrap}
  .modal,.dialog,[role=dialog]{max-width:calc(100vw - 20px)}
  .modal-content,.dialog-content{max-width:100%;max-height:88dvh;overflow:auto}
  .teacher-layout,.teacher-grid,.builder,.document-layout,.workspace-grid,.editor-grid{grid-template-columns:minmax(0,1fr)!important}
  #hamouCurriculumFlow{margin:14px 0;padding:15px;border-radius:18px}
  #hamouCurriculumFlow .hmcf-fields{grid-template-columns:minmax(0,1fr)!important}
  #hamouCurriculumFlow .hmcf-lessons{grid-template-columns:minmax(0,1fr)!important;max-height:42dvh}
  .lesson-plan-item{width:100%;text-align:right;min-width:0}
  .document-preview,.preview-page,.a4-preview{max-width:100%;overflow-x:auto}
  .document-preview iframe,.preview-page iframe{max-width:100%}
  .mobile-menu{max-width:calc(100vw - 20px);max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain}
  .mobile-menu a,.mobile-menu button{min-height:48px}
  .toast{left:12px;right:12px;width:auto;max-width:none}
  .footer-grid,.footer-columns{grid-template-columns:minmax(0,1fr)!important}
  .hide-on-mobile{display:none!important}
}
@media(max-width:520px){
  :root{--hm-mobile-gutter:12px}
  body{font-size:14px}
  main,.container,.content,.page-content{padding-inline:12px}
  .hero{padding-block:24px 18px}
  .hero h1,h1{font-size:clamp(27px,8vw,36px)}
  h2{font-size:clamp(20px,5.7vw,26px)}
  .grid,.grid-2,.grid-3,.grid-4,.stat-grid,.metrics-grid{grid-template-columns:minmax(0,1fr)!important}
  .pricing-card,.card,.panel,.growth-card{padding:15px!important;border-radius:17px}
  .topbar{gap:12px}
  .top-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .top-actions>*{width:100%;min-width:0}
  .title-area h1{font-size:20px}
  .section-head .primary-btn,.section-head>a{width:100%}
  .account-conversion,.premium-strip{display:grid;grid-template-columns:minmax(0,1fr)}
  .account-conversion>* ,.premium-strip>*{width:100%;min-width:0}
  .hm-hero-pills-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hm-hero-ctas{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .hm-hero-ctas>*{width:100%}
  .hm-nav-center,.desktop-nav{display:none!important}
  .mobile-toggle{display:inline-flex!important;align-items:center;justify-content:center;min-width:46px;min-height:46px}
  .hm-nav,.hm-nav-inner,.nav-inner,.header-inner{max-width:100%;min-width:0}
  .hm-brand,.brand{min-width:0;max-width:calc(100vw - 100px);overflow-wrap:anywhere}
  .table-wrap{margin-inline:-4px}
}
@media(hover:none) and (pointer:coarse){
  a:hover,button:hover,.function-card:hover,.card:hover{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* v60.1.0 — focused phone layout for admin, teacher studio, and source panels */
@media(max-width:760px){
  .page{width:100%!important;padding:14px 12px 36px!important}
  .topbar{gap:14px!important;padding:16px!important;border-radius:20px!important}
  .title-area{min-width:0;max-width:100%;align-items:flex-start;gap:10px}
  .title-area h1{font-size:clamp(20px,5.4vw,27px)!important;overflow-wrap:anywhere}
  .top-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%}
  .top-actions>*{min-width:0;width:100%!important;justify-content:center;text-align:center;padding-inline:8px!important}
  .stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .stats>* ,.stat-card,.stat{min-width:0;overflow-wrap:anywhere}
  .stat-card,.stat{padding:13px!important;border-radius:16px!important}
  .stat-value,.stat-number,.metric-value{font-size:clamp(20px,6vw,28px)!important;line-height:1.25;overflow-wrap:anywhere}
  .panel,.card,.account-box,.import-panel{min-width:0;padding:15px!important;border-radius:18px!important}
  .panel-header{align-items:stretch!important;gap:10px!important}
  .tools,.tools>*{min-width:0;max-width:100%}
  .search{min-width:0!important;width:100%!important}
  .table-wrap,.table-responsive,.table-container{width:100%;max-width:100%;overflow-x:auto!important;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .table-wrap table,.table-responsive table,.table-container table{min-width:640px}
  .field,.fields,.import-grid,.account-grid,.grid-2,.grid-3{min-width:0}
  .fields,.import-grid,.account-grid,.grid-2,.grid-3{grid-template-columns:minmax(0,1fr)!important}
  .teacher-flow-note,.source,.note{overflow-wrap:anywhere}
  .document-preview,.preview-page,.a4-preview{width:100%;max-width:100%;overflow-x:auto}
}
@media(max-width:520px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stats>* ,.stat-card,.stat{padding:11px!important}
  .stat-label,.stat-title,.stat small{font-size:12px!important;line-height:1.5}
  .top-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .source,.hero,.panel{padding:14px!important}
  .actions{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
  .actions>a,.actions>button{width:100%;min-width:0}
}
@media(max-width:350px){
  .stats{grid-template-columns:minmax(0,1fr)!important}
  .top-actions{grid-template-columns:minmax(0,1fr)!important}
}


/* v60.1.1 — focused mobile polish: avoid cramped teacher forms and modal obstruction */
@media(max-width:760px){
  body.hm-teacher-studio .grid,
  body.hm-teacher-studio .fields,
  body.hm-teacher-studio .form-grid,
  body.hm-teacher-studio .toolbar{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  body.hm-teacher-studio .field{width:100%;min-width:0}
  body.hm-teacher-studio .lesson-plan-panel{padding:14px!important}
  body.hm-teacher-studio .lesson-plan-head{align-items:flex-start;gap:8px;flex-wrap:wrap}
  body.hm-teacher-studio .lesson-plan-list{grid-template-columns:minmax(0,1fr)!important}
  body.hm-teacher-studio .lesson-plan-item{min-height:48px;padding:12px!important}
  body.hm-teacher-studio .preview{margin-inline:0!important;max-width:100%;overflow-x:auto}
  body.hm-admin-page .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.hm-admin-page .stat{padding:14px!important;min-width:0}
  body.hm-admin-page .table-wrap{border-radius:0}
  body.hm-admin-page .tools{width:100%;display:grid;grid-template-columns:minmax(0,1fr)}
  body.hm-admin-page .search{width:100%;min-width:0}
  body.hm49-home .hero-grid,
  body.hm49-home .growth-grid,
  body.hm49-home .hm-hero-grid{grid-template-columns:minmax(0,1fr)!important}
  body.hm49-home .hero-copy,
  body.hm49-home .hero-card,
  body.hm49-home .growth-hero,
  body.hm49-home .growth-card{min-width:0;width:100%;max-width:100%}
  body.hm49-home .hero-actions{display:grid;grid-template-columns:minmax(0,1fr)!important}
  body.hm49-home .hero-actions>*{width:100%;min-width:0}
  #hamou-sub-notice{max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
}
@media(max-width:520px){
  body.hm-teacher-studio main,
  body.hm-teacher-studio .page,
  body.hm-teacher-studio .container{padding-inline:12px!important}
  body.hm-teacher-studio h1{font-size:clamp(22px,6vw,30px)!important}
  body.hm-teacher-studio .toolbar>*{width:100%;min-width:0}
  body.hm-admin-page .stats{grid-template-columns:minmax(0,1fr)!important}
  body.hm49-home .function-grid,
  body.hm49-home .hm-feature-grid,
  body.hm49-home .hm-pathway-grid,
  body.hm49-home .hm49-pathway-grid,
  body.hm49-home .growth-feature-grid,
  body.hm49-home .persona-grid,
  body.hm49-home .feature-grid{grid-template-columns:minmax(0,1fr)!important}
}

/* v60.1.2 — touch-first polish across all mobile routes; additive only */
@media(max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:clip}
  body{padding-bottom:env(safe-area-inset-bottom)}
  header,nav,.hm-nav,.hm-nav-inner,.header-inner,.nav-inner{max-width:100%;min-width:0}
  main{min-width:0}
  :where(.card,.panel,.surface,.section-card,.feature-card,.tool-card,.dashboard-card){overflow-wrap:anywhere;min-width:0}
  :where(.card,.panel,.surface,.section-card,.feature-card,.tool-card){box-shadow:0 8px 24px rgba(2,12,32,.07)}
  :where(button,a.btn,.btn,[role=button]){touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  :where(button,input,select,textarea){border-radius:12px}
  :where(input,select,textarea){box-sizing:border-box}
  .modal,.dialog,[role=dialog]{width:calc(100vw - 20px);max-width:calc(100vw - 20px);margin-inline:auto}
  .modal-content,.dialog-content{padding:clamp(14px,4vw,22px)}
  .mobile-menu,.drawer,.sidebar.mobile-open{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .document-preview,.preview-page,.a4-preview{scrollbar-width:thin;overscroll-behavior-inline:contain}
  .document-preview{background:var(--surface2, #f4f7fb);padding:8px!important;border-radius:14px}
  .preview-page,.a4-preview{transform-origin:top right}
  .field label,label{line-height:1.55}
  .empty-state,.error-state,.loading-state{max-width:100%;overflow-wrap:anywhere}
  .toast{bottom:calc(12px + env(safe-area-inset-bottom));border-radius:14px;line-height:1.5}
}
@media(max-width:520px){
  .container,.page,.page-content,.content,main{max-width:100%;min-width:0}
  section{scroll-margin-top:76px}
  .section-head{margin-bottom:16px}
  .section-head h2{line-height:1.3}
  .grid-2,.grid-3,.grid-4,.grid,.stats,.stat-grid,.metrics-grid,.growth-grid,.builder,.persona-grid{min-width:0}
  .card,.panel,.pricing-card,.growth-card,.growth-hero{box-shadow:0 6px 20px rgba(2,12,32,.06)}
  :where(.primary-btn,.secondary-btn,.success-btn,.ghost-btn,.btn){justify-content:center;line-height:1.4}
  .preview-page{padding:16px!important}
  .preview-page h1{font-size:clamp(21px,6vw,28px)!important}
}
@media(max-width:360px){
  :root{--hm-mobile-gutter:10px}
  main,.container,.content,.page-content,.page{padding-inline:10px!important}
  .card,.panel,.pricing-card,.growth-card,.growth-hero{padding:12px!important}
  .brand{font-size:17px}
  .mobile-toggle{min-width:42px;min-height:42px}
}


/* v60.2.0 — reference-led mobile app visual system (navy / electric blue / cyan).
   Keeps existing page structure and JavaScript hooks; document paper stays printable/light. */
:root{
  --hm-night:#050d20;
  --hm-night-2:#081a35;
  --hm-blue:#147cff;
  --hm-cyan:#16d9f4;
  --hm-ink:#10284b;
  --hm-glow:0 0 0 1px rgba(30,144,255,.28),0 8px 28px rgba(0,105,255,.14);
}
@media(max-width:760px){
  html{background:var(--hm-night)}
  body{
    background:radial-gradient(ellipse at 50% -12%,rgba(0,130,255,.22),transparent 42%),linear-gradient(180deg,#061126 0%,#081a34 52%,#07152b 100%)!important;
    color:#eaf4ff;
    min-height:100dvh;
  }
  /* Compact, premium app header */
  header,nav,.hm-nav,.hm-nav-inner,.header-inner,.nav-inner,.topbar,.navbar,.app-header{
    background:rgba(4,13,31,.94)!important;
    color:#eff8ff!important;
    border-color:rgba(35,153,255,.35)!important;
    box-shadow:0 5px 24px rgba(0,0,0,.24),inset 0 -1px rgba(20,217,244,.12);
    backdrop-filter:blur(16px);
  }
  header a,nav a,.hm-nav a,.topbar a,.navbar a{color:inherit}
  .brand,.logo,.site-logo{letter-spacing:.015em}
  :where(.mobile-toggle,.menu-toggle,.hamburger,.nav-toggle){
    color:#eafaff!important;background:linear-gradient(145deg,#0c2447,#07152d)!important;
    border:1px solid rgba(22,217,244,.42)!important;border-radius:13px!important;
    box-shadow:0 0 18px rgba(0,140,255,.13);min-width:44px;min-height:44px;
  }
  /* Neon accents without changing links, buttons or their handlers */
  :where(.primary-btn,.btn-primary,.success-btn,.cta,.button-primary){
    color:#fff!important;border:1px solid rgba(100,210,255,.42)!important;
    background:linear-gradient(110deg,#126cff 0%,#168fff 56%,#6557ff 100%)!important;
    box-shadow:0 7px 22px rgba(0,110,255,.26),inset 0 1px rgba(255,255,255,.25);
    border-radius:14px!important;
  }
  :where(.secondary-btn,.btn-secondary,.ghost-btn){
    border:1px solid rgba(54,177,255,.55)!important;
    background:rgba(7,28,56,.78)!important;color:#e9f8ff!important;
    border-radius:14px!important;
  }
  :where(button,a.btn,.btn,[role=button]){min-height:42px}
  /* App cards: glass/navy surfaces for dashboards, with readable light workspaces */
  :where(.dashboard-card,.stat-card,.metric-card,.feature-card,.tool-card,.quick-card,.quick-action,.persona-card){
    border:1px solid rgba(48,155,255,.32)!important;
    border-radius:16px!important;
    box-shadow:0 9px 26px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.045)!important;
  }
  :where(.dashboard-card,.stat-card,.metric-card,.quick-card,.quick-action){
    background:linear-gradient(145deg,rgba(12,35,68,.96),rgba(6,21,43,.98))!important;color:#edf7ff!important;
  }
  :where(.dashboard-card,.stat-card,.metric-card,.quick-card,.quick-action) :where(p,small,.muted,.label){color:#a9c7e9}
  :where(.stat-value,.metric-value,.counter,.number){color:#fff}
  :where(.feature-card,.tool-card,.persona-card){
    background:linear-gradient(160deg,#0b2345,#07162d)!important;color:#eef8ff!important;
  }
  :where(.feature-card,.tool-card,.persona-card) :where(p,small,.muted){color:#b3cbe8}
  :where(.icon-box,.feature-icon,.tool-icon,.quick-icon){
    border:1px solid rgba(27,208,245,.24);border-radius:13px;
    box-shadow:0 0 20px rgba(0,150,255,.12);
  }
  /* Forms retain high contrast and comfortable touch targets */
  :where(input,select,textarea){
    min-height:44px;max-width:100%;color:#10284b;
    background:#f8fbff;border:1px solid #c5d8f2;
    border-radius:12px;box-shadow:inset 0 1px 2px rgba(10,45,90,.035);
  }
  :where(input,select,textarea)::placeholder{color:#7186a4}
  :where(input,select,textarea):focus{
    outline:2px solid rgba(20,124,255,.28);outline-offset:1px;border-color:#168fff;
  }
  /* Library and document creation remain paper-white like the reference */
  :where(.document-preview,.preview,.paper-preview,.document-page,.preview-page,.a4-preview,.document-sheet,.memo-paper,.exam-paper){
    background:#fff!important;color:#172c4d!important;border-color:#d6e3f4!important;
    box-shadow:0 10px 28px rgba(0,0,0,.16),0 0 0 1px rgba(31,123,255,.10)!important;
  }
  :where(.document-preview,.preview,.paper-preview,.document-page,.preview-page,.a4-preview,.document-sheet,.memo-paper,.exam-paper) :where(p,li,td,th,label,small,strong,h1,h2,h3,h4,span,div){color:inherit}
  :where(.library-list,.resource-list,.book-list,.exercise-list,.exam-list) :where(.resource-card,.book-card,.list-item,.item,.card){
    background:#fff!important;color:#12305a!important;border:1px solid #dbe7f7!important;
    border-radius:13px!important;box-shadow:0 4px 12px rgba(13,64,130,.06)!important;
  }
  :where(.bottom-nav,.mobile-bottom-nav,.tab-bar){
    background:rgba(4,13,31,.97)!important;border-top:1px solid rgba(30,144,255,.32)!important;
    box-shadow:0 -8px 28px rgba(0,0,0,.2);padding-bottom:env(safe-area-inset-bottom);
    backdrop-filter:blur(16px);
  }
  :where(.bottom-nav,.mobile-bottom-nav,.tab-bar) a{color:#a9c6e8}
  :where(.bottom-nav,.mobile-bottom-nav,.tab-bar) .active{color:#22d8f4!important}
  :where(.modal,.dialog,[role=dialog]){
    background:#07172e;color:#edf7ff;border:1px solid rgba(40,156,255,.4);
    border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.48),0 0 28px rgba(0,112,255,.12);
  }
  :where(.modal,.dialog,[role=dialog]) :where(p,label,h1,h2,h3){color:inherit}
  :where(.toast){background:#0b2446;color:#f1f8ff;border:1px solid rgba(22,217,244,.35);box-shadow:var(--hm-glow)}
  :where(.table-wrap){max-width:100%;overflow-x:auto;border-radius:12px}
  :where(.table-wrap table){background:#fff;color:#173153}
  :where(.empty-state,.error-state,.loading-state){border-radius:14px}
}
@media(max-width:520px){
  body{font-size:14px}
  :where(.container,.page,.page-content,.content,main){padding-inline:14px}
  :where(.grid-2,.grid-3,.grid-4,.stats,.stat-grid,.metrics-grid,.growth-grid,.persona-grid,.feature-grid,.tool-grid){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
  }
  :where(.hero,.hero-section,.growth-hero){border-radius:0 0 22px 22px}
  :where(.hero h1,.hero-title){font-size:clamp(27px,7.5vw,38px)!important;line-height:1.18!important}
  :where(.section-head h2,h2.section-title){font-size:clamp(19px,5vw,25px)!important}
  :where(.stats,.stat-grid,.metrics-grid){gap:8px!important}
  :where(.stat-card,.metric-card){padding:12px!important}
  :where(.document-preview,.preview,.paper-preview,.document-page,.preview-page,.a4-preview){border-radius:10px!important}
  :where(.actions,.button-row,.toolbar){gap:8px}
}
@media(max-width:380px){
  :where(.grid-2,.grid-3,.grid-4,.stats,.stat-grid,.metrics-grid,.growth-grid,.persona-grid,.feature-grid,.tool-grid){
    grid-template-columns:minmax(0,1fr)!important;
  }
  :where(.primary-btn,.btn-primary,.secondary-btn,.btn-secondary){width:100%;max-width:100%}
}


/* v60.3.0 — precise selectors for the real HAMOU MATH mobile markup.
   Mobile-only presentation overrides; no routes, handlers, data, or payment logic. */
@media (max-width: 760px) {
  body.hm49-home {
    color:#eaf5ff !important;
    background:
      radial-gradient(ellipse at 50% -10%,rgba(0,135,255,.28),transparent 42%),
      linear-gradient(180deg,#030918 0%,#07152d 54%,#061127 100%) !important;
  }
  body.hm49-home .topbar,
  body.hm49-home .navbar {
    background:rgba(3,10,25,.96)!important;
    border-color:rgba(30,145,255,.48)!important;
    box-shadow:0 8px 28px rgba(0,0,0,.32),0 1px rgba(20,217,244,.16) inset!important;
    backdrop-filter:blur(18px);
  }
  body.hm49-home .hm-brand-logo { color:#f3f9ff!important; }
  body.hm49-home .hm-nav-link { color:#c5d9f5!important; }
  body.hm49-home .hm-nav-link.active { color:#22d9f3!important; }
  body.hm49-home .mobile-toggle,
  body.hm49-home .icon-btn {
    color:#eafaff!important;
    background:linear-gradient(145deg,#10284c,#06142b)!important;
    border:1px solid rgba(28,202,245,.42)!important;
    border-radius:13px!important;
    box-shadow:0 0 20px rgba(0,128,255,.18)!important;
  }
  body.hm49-home .hero {
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(ellipse at 78% 25%,rgba(0,140,255,.22),transparent 38%),
      linear-gradient(145deg,#06142c 0%,#071c3a 55%,#041024 100%)!important;
    border:1px solid rgba(32,143,255,.34);
    border-radius:0 0 26px 26px;
    box-shadow:0 16px 42px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.04);
    padding:22px 0 25px!important;
  }
  body.hm49-home .hm-hero-container,
  body.hm49-home .hm-hero-main { min-width:0!important; }
  body.hm49-home .hm-hero-title,
  body.hm49-home .hm-hero-title-wrap,
  body.hm49-home .hm-hero-tagline { color:#f4f8ff!important; }
  body.hm49-home .hm-hero-title { text-shadow:0 0 24px rgba(0,139,255,.22); }
  body.hm49-home .hm-hero-title .accent,
  body.hm49-home .hm-hero-title .highlight,
  body.hm49-home .hm-hero-title span { color:#19d9f3; }
  body.hm49-home .hm-hero-desc,
  body.hm49-home .hm-hero-mini-pill { color:#c2d8f5!important; }
  body.hm49-home .hm-hero-mini-pill {
    background:rgba(8,33,65,.78)!important;
    border:1px solid rgba(44,152,255,.3)!important;
    border-radius:999px!important;
  }
  body.hm49-home .hm-btn-student,
  body.hm49-home .hm-btn-login,
  body.hm49-home .hm-btn-register,
  body.hm49-home .hm-feature-card-btn,
  body.hm49-home .hm-pathways-cta {
    color:#fff!important;
    background:linear-gradient(110deg,#146cff,#089eea 58%,#6259ff)!important;
    border:1px solid rgba(111,209,255,.46)!important;
    border-radius:14px!important;
    box-shadow:0 8px 22px rgba(0,111,255,.25),inset 0 1px rgba(255,255,255,.2)!important;
  }
  body.hm49-home .hm-btn-teacher {
    color:#ecf7ff!important;
    background:rgba(6,25,51,.88)!important;
    border:1px solid rgba(64,171,255,.62)!important;
    border-radius:14px!important;
  }
  body.hm49-home .hm-section-features,
  body.hm49-home .hm-section-pillars,
  body.hm49-home .hm-pathways-section,
  body.hm49-home .hm-math-world {
    color:#eff7ff!important;
    background:linear-gradient(180deg,#07152b,#091b35)!important;
  }
  body.hm49-home .hm-features-head,
  body.hm49-home .hm-pathways-heading,
  body.hm49-home .hm-math-world-heading,
  body.hm49-home .hm-features-head h2,
  body.hm49-home .hm-pathways-heading h2,
  body.hm49-home .hm-math-world-heading h2 { color:#f2f8ff!important; }
  body.hm49-home .hm-feature-card,
  body.hm49-home .hm-pillar-card,
  body.hm49-home .hm-pathway-card,
  body.hm49-home .hm-world-card,
  body.hm49-home .hm-founder-card,
  body.hm49-home .hm-side-badge {
    color:#edf7ff!important;
    background:linear-gradient(145deg,rgba(12,37,72,.98),rgba(5,19,40,.99))!important;
    border:1px solid rgba(40,153,255,.42)!important;
    border-radius:17px!important;
    box-shadow:0 10px 26px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.045)!important;
  }
  body.hm49-home .hm-feature-card :where(h2,h3,h4,p,span),
  body.hm49-home .hm-pillar-card :where(h2,h3,h4,p,span),
  body.hm49-home .hm-pathway-card :where(h2,h3,h4,p,span),
  body.hm49-home .hm-world-card :where(h2,h3,h4,p,span),
  body.hm49-home .hm-founder-card :where(h2,h3,h4,p,span),
  body.hm49-home .hm-side-badge :where(h2,h3,h4,p,span) { color:inherit; }
  body.hm49-home .hm-feature-icon-wrap,
  body.hm49-home .hm-pathway-icon,
  body.hm49-home .hm-pillar-icon,
  body.hm49-home .hm-world-symbol {
    border-radius:14px!important;
    box-shadow:0 0 22px rgba(0,153,255,.2);
  }
  body.hm49-home .hm-bottom-strip {
    color:#eaf5ff!important;
    background:linear-gradient(105deg,#06152d,#0a2850,#06152d)!important;
    border-top:1px solid rgba(35,151,255,.38);
  }
  body.hm49-home .hm-bottom-strip :where(p,span,strong,small) { color:inherit; }
  body.hm49-home .mobile-menu,
  body.hm49-home .mobile-submenu {
    color:#edf7ff!important;
    background:#071831!important;
    border:1px solid rgba(38,151,255,.42)!important;
    box-shadow:0 18px 44px rgba(0,0,0,.38)!important;
  }
  body.hm49-home :where(.hm-feature-card,.hm-pillar-card,.hm-pathway-card,.hm-world-card,.hm-founder-card) { min-width:0; }
}
@media (max-width: 520px) {
  body.hm49-home .hm-hero-container,
  body.hm49-home .hm-features-head,
  body.hm49-home .hm-features-grid,
  body.hm49-home .hm-pathways-heading,
  body.hm49-home .hm-pathways-grid,
  body.hm49-home .hm-math-world-inner,
  body.hm49-home .hm-math-world-grid,
  body.hm49-home .hm-pillars-grid { width:calc(100% - 24px)!important; max-width:none!important; }
  body.hm49-home .hm-hero-title { font-size:clamp(30px,8.5vw,42px)!important; line-height:1.15!important; }
  body.hm49-home .hm-hero-ctas { display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; }
  body.hm49-home .hm-hero-ctas > * { min-width:0!important; width:100%!important; }
  body.hm49-home .hm-features-grid,
  body.hm49-home .hm-pathways-grid,
  body.hm49-home .hm-math-world-grid,
  body.hm49-home .hm-pillars-grid { gap:10px!important; }
  body.hm49-home .hm-feature-card,
  body.hm49-home .hm-pillar-card,
  body.hm49-home .hm-pathway-card,
  body.hm49-home .hm-world-card { padding:14px!important; }
  body.hm49-home .hm-section-features,
  body.hm49-home .hm-section-pillars,
  body.hm49-home .hm-pathways-section,
  body.hm49-home .hm-math-world { padding-block:24px!important; }
}


/* v60.4.0 — repair the actual narrow-phone layout shown in mobile screenshot.
   Keep this isolated to the homepage and small screens; all controls retain their handlers. */
@media (max-width: 760px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden!important; }
  body.hm49-home, body.hm49-home * { box-sizing:border-box; }
  body.hm49-home :where(header, .topbar, .navbar, nav, .nav-inner, .header-inner) {
    max-width:100vw!important; min-width:0!important;
  }
  body.hm49-home :where(.topbar, .navbar) {
    position:relative; z-index:80; padding-inline:14px!important;
  }
  body.hm49-home :where(.mobile-menu, .mobile-submenu) {
    position:fixed!important;
    top: max(76px, env(safe-area-inset-top))!important;
    right:12px!important; left:12px!important;
    width:auto!important; max-width:none!important; min-width:0!important;
    max-height:calc(100dvh - 160px)!important;
    overflow-y:auto!important; overflow-x:hidden!important;
    padding:16px!important; border-radius:22px!important;
    z-index:9990!important;
    display:flex; flex-direction:column; gap:10px!important;
    transform:none!important;
  }
  body.hm49-home :where(.mobile-menu, .mobile-submenu) :where(a,button,[role=button]) {
    display:flex; align-items:center; justify-content:center;
    width:100%!important; min-width:0!important; max-width:100%!important;
    min-height:48px!important; padding:12px 14px!important;
    white-space:normal!important; overflow-wrap:anywhere!important;
    text-align:center; border-radius:13px!important;
  }
  body.hm49-home :where(.hm-brand-logo, .hm-brand, .brand, .logo) {
    max-width: min(58vw, 250px)!important; min-width:0!important;
  }
  body.hm49-home :where(.hm-brand-logo, .hm-brand, .brand, .logo) img {
    width:100%!important; max-width:100%!important; height:auto!important; object-fit:contain;
  }
  body.hm49-home .hero {
    width:100%!important; max-width:100%!important; min-width:0!important;
    margin-inline:0!important; padding:24px 0 30px!important;
  }
  body.hm49-home :where(.hm-hero-container, .hm-hero-main, .hm-hero-title-wrap) {
    width:100%!important; max-width:100%!important; min-width:0!important;
    margin-inline:auto!important; padding-inline:16px!important;
  }
  body.hm49-home .hm-hero-title {
    max-width:100%!important; overflow-wrap:break-word!important;
    word-break:normal!important; font-size:clamp(29px,8.1vw,40px)!important;
    line-height:1.22!important; letter-spacing:-.035em!important;
  }
  body.hm49-home :where(.hm-hero-desc, .hm-hero-tagline) {
    max-width:100%!important; overflow-wrap:anywhere!important;
  }
  body.hm49-home .hm-hero-ctas {
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important; max-width:100%!important;
  }
  body.hm49-home .hm-hero-ctas > * {
    width:100%!important; max-width:100%!important; min-width:0!important;
  }
  body.hm49-home :where(.hm-section-features,.hm-section-pillars,.hm-pathways-section,.hm-math-world) {
    width:100%!important; max-width:100%!important; min-width:0!important;
    margin-inline:0!important; padding-inline:12px!important;
  }
  body.hm49-home :where(.hm-features-grid,.hm-pathways-grid,.hm-math-world-grid,.hm-pillars-grid) {
    width:100%!important; max-width:100%!important; min-width:0!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.hm49-home :where(.hm-feature-card,.hm-pillar-card,.hm-pathway-card,.hm-world-card) {
    width:100%!important; max-width:100%!important; min-width:0!important;
  }
  body.hm49-home :where(.hm-bottom-strip,.premium-strip,.account-conversion) {
    max-width:100vw!important; min-width:0!important; overflow-wrap:anywhere!important;
  }
}
@media (max-width: 520px) {
  body.hm49-home .hm-hero-title { font-size:clamp(28px,7.8vw,36px)!important; }
  body.hm49-home :where(.bottom-nav,.mobile-bottom-nav,.tab-bar) {
    left:10px!important; right:10px!important; width:auto!important;
    max-width:calc(100vw - 20px)!important; border-radius:22px!important;
  }
  body.hm49-home :where(.hm-bottom-strip,.premium-strip) {
    padding:12px 14px!important; font-size:13px!important; line-height:1.5!important;
  }
}


/* v60.5.0 — hard override for the exact mobile header/menu IDs in index.html */
@media screen and (max-width: 760px) {
  html { overflow-x: clip !important; }
  body.hm49-home { width:100% !important; min-width:0 !important; max-width:100% !important; overflow-x:clip !important; }
  body.hm49-home #mobile-menu {
    position:fixed !important;
    inset-inline:12px !important;
    left:12px !important; right:12px !important;
    top:calc(env(safe-area-inset-top, 0px) + 12px) !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
    max-height:calc(100dvh - 120px) !important;
    overflow:auto !important; overscroll-behavior:contain !important;
    z-index:10000 !important;
    box-sizing:border-box !important;
    border-radius:20px !important;
  }
  body.hm49-home #mobile-menu.open { display:flex !important; flex-direction:column !important; gap:8px !important; }
  body.hm49-home #mobile-menu > a,
  body.hm49-home #mobile-menu > button,
  body.hm49-home #mobile-menu .mobile-submenu,
  body.hm49-home #mobile-menu .mobile-submenu > button {
    box-sizing:border-box !important;
    width:100% !important; min-width:0 !important; max-width:100% !important;
    white-space:normal !important; overflow-wrap:anywhere !important;
  }
  body.hm49-home .topbar, body.hm49-home .navbar {
    width:100% !important; min-width:0 !important; max-width:100% !important;
    box-sizing:border-box !important;
  }
  body.hm49-home .navbar { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:10px !important; }
  body.hm49-home .hm-brand-logo { flex:0 1 58% !important; width:58% !important; min-width:0 !important; }
  body.hm49-home .hm-brand-logo img { display:block !important; width:100% !important; height:auto !important; max-width:100% !important; object-fit:contain !important; }
  body.hm49-home .hm-hero-title-wrap, body.hm49-home .hm-hero-title, body.hm49-home .hero-actions, body.hm49-home .hm-hero-ctas {
    min-width:0 !important; max-width:100% !important; box-sizing:border-box !important;
  }
}
@media screen and (max-width: 520px) {
  body.hm49-home #mobile-menu { left:8px !important; right:8px !important; padding:12px !important; }
  body.hm49-home .hm-hero-title { font-size:clamp(27px, 8vw, 36px) !important; line-height:1.2 !important; }
}