/* ============================================
   MOBILE RESPONSIVE STYLES
   Optimized for small cell phone screens (320px - 480px)
   ============================================ */

/* Ensure consistent text rendering across devices (Pixel 7, Galaxy S23, etc.) */
/* Prevents Chrome and other browsers from auto-adjusting text size based on device */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Ensure consistent font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Consistent font rendering across devices */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent layout shifts from different default font sizes */
  font-size: 14px;
}

/* Ensure consistent box-sizing for all elements */
*, *::before, *::after {
  box-sizing: border-box;
}


/* Scroll Indicator Arrow - Mobile Only */
.scroll-indicator {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
  display: none;
}

.scroll-arrow {
  font-size: 2rem;
  color: #ffc107;
  animation: blinkArrow 1.5s infinite;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

@keyframes blinkArrow {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.3;
    transform: translateY(10px);
  }
}

/* Hide bouncing arrow on Galaxy S23 screens */
@media (max-width: 480px) {
  .scroll-indicator {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  .scroll-arrow {
    animation: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Galaxy S23 - Ensure housekeeping dropdown is clickable */
  .housekeeping h4,
  .housekeeping[data-moved="true"] h4,
  #landing .housekeeping h4,
  html body #landing .housekeeping h4,
  body #landing .housekeeping h4 {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    z-index: 10 !important;
  }
  
  /* Ensure housekeeping element itself is clickable */
  .housekeeping,
  .housekeeping[data-moved="true"] {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  
  /* Ensure toggle icon is clickable */
  .housekeeping #housekeepingToggleIcon,
  .housekeeping[data-moved="true"] #housekeepingToggleIcon {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }
  
  /* Prevent helper buttons from moving when housekeeping opens */
  .helper-buttons {
    position: relative !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
  }
  
  /* Lock action buttons in place - prevent shifting */
  .helper-buttons .action-group-small {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    position: relative !important;
    min-width: 0 !important;
  }
  
  /* Lock button widths to prevent movement */
  .helper-buttons .action-button {
    flex-shrink: 0 !important;
    position: relative !important;
  }
  
  /* Ensure helper-section doesn't shift when housekeeping opens */
  .helper-section {
    position: relative !important;
    overflow: visible !important;
  }
  
  /* Ensure moved housekeeping doesn't affect button layout - allow scrolling */
  .main-buttons + .housekeeping[data-moved="true"] {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  
  /* Prevent housekeeping content from pushing buttons - allow it to expand naturally */
  /* Note: Default state is hidden - only show when housekeeping-visible class is present */
  .housekeeping[data-moved="true"] .housekeeping-content:not(.housekeeping-visible) {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  /* Show housekeeping content when toggled */
  .housekeeping[data-moved="true"] .housekeeping-content.housekeeping-visible {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Body does not scroll; the landing card fills the screen and may scroll inside */
  body {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
  
  .landing-content {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: none !important;
    scrollbar-width: thin !important;
  }
  
  #landing {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    max-height: none !important;
  }

  #landing::-webkit-scrollbar,
  .landing-content::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
}

/* Desktop styles - ensure subcategory is always visible and clickable */
#subcategoryContainer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
}

#subcategoryContainer[style*="display: none"] {
  display: block !important;
}

#skillSubcategory {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
}

#skillSubcategory:disabled,
#skillSubcategory[disabled] {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: white !important;
}

@media (min-width: 481px) {
  .scroll-indicator {
    display: none !important;
  }
  
  /* Step 0 step tooltip - set specific dimensions on desktop screens only (324x358) */
  /* Use maximum specificity to override JavaScript inline styles */
  html body .step-tooltip[data-host-step="0"],
  html body .step-tooltip[data-host-step="0"][style],
  html body .step-tooltip[data-host-step="0"][style*="width"],
  html body .step-tooltip[data-host-step="0"][style*="height"],
  body .step-tooltip[data-host-step="0"],
  body .step-tooltip[data-host-step="0"][style],
  body .step-tooltip[data-host-step="0"][style*="width"],
  body .step-tooltip[data-host-step="0"][style*="height"],
  .step-tooltip[data-host-step="0"],
  .step-tooltip[data-host-step="0"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 358px !important;
    min-height: 358px !important;
    max-height: 358px !important;
    box-sizing: border-box !important;
  }
  
  /* Step 6 step tooltip - set specific dimensions on desktop screens only (324x324) */
  /* Use maximum specificity to override JavaScript inline styles */
  html body .step-tooltip[data-step="6"],
  html body .step-tooltip[data-step="6"][style],
  html body .step-tooltip[data-step="6"][style*="width"],
  html body .step-tooltip[data-step="6"][style*="height"],
  body .step-tooltip[data-step="6"],
  body .step-tooltip[data-step="6"][style],
  body .step-tooltip[data-step="6"][style*="width"],
  body .step-tooltip[data-step="6"][style*="height"],
  .step-tooltip[data-step="6"],
  .step-tooltip[data-step="6"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 324px !important;
    min-height: 324px !important;
    max-height: 324px !important;
    box-sizing: border-box !important;
  }
}

/*  Step 2 - Show all content without scrolling on Mobile */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* Step 2 step tooltip — hug content, sit below pulsing tabs */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="2"],
  body .step-tooltip[data-host-step="2"][style],
  html body .step-tooltip[data-host-step="2"],
  html body .step-tooltip[data-host-step="2"][style],
  .step-tooltip[data-host-step="2"],
  .step-tooltip[data-host-step="2"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    padding: 6px 10px 4px 10px !important;
    transform: translateX(-50%) !important;
    left: 50% !important;
  }
  
  .step-tooltip[data-host-step="2"] h3 {
    font-size: 0.88rem !important;
    margin-bottom: 4px !important;
    line-height: 1.15 !important;
    padding: 0 !important;
  }
  
  .step-tooltip[data-host-step="2"] p {
    font-size: 0.7rem !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .step-tooltip[data-host-step="2"] p span {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
  }
  
  .step-tooltip[data-host-step="2"] button {
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
    margin-top: 8px !important;
  }
  
  .step-tooltip[data-host-step="2"] > div {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .step-tooltip[data-host-step="2"] > div[style*="display: flex"] {
    margin-top: 8px !important;
    gap: 6px !important;
  }
}

@media (max-width: 360px) {
  /* Step 2 step tooltip — hug content, sit below pulsing tabs */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="2"],
  body .step-tooltip[data-host-step="2"][style],
  html body .step-tooltip[data-host-step="2"],
  html body .step-tooltip[data-host-step="2"][style],
  .step-tooltip[data-host-step="2"],
  .step-tooltip[data-host-step="2"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    padding: 5px 8px 3px 8px !important;
    transform: translateX(-50%) !important;
    left: 50% !important;
  }
  
  .step-tooltip[data-host-step="2"] {
    padding: 10px 8px !important;
  }
  
  .step-tooltip[data-host-step="2"] h3 {
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
  }
  
  .step-tooltip[data-host-step="2"] p {
    font-size: 0.7rem !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }
  
  .step-tooltip[data-host-step="2"] p span {
    font-size: 0.7rem !important;
  }
  
  .step-tooltip[data-host-step="2"] button {
    padding: 5px 10px !important;
    font-size: 0.7rem !important;
  }
}

/* Inspiration Banner - Mobile Optimization */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* Inspiration Banner */
  #mhInspireBanner {
    width: 95% !important;
    max-width: 95% !important;
    padding: 20px 15px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }
  
  #mhInspireBanner h2 {
    font-size: 1.4rem !important;
    margin: 0 0 8px 0 !important;
  }
  
  #mhInspireBanner p {
    font-size: 0.9rem !important;
    margin: 6px 0 !important;
    line-height: 1.3 !important;
  }
  #mhInspireBanner .ephesians-verse-ref {
    font-style: normal !important;
  }
  
  #mhInspireBanner p[style*="1.2rem"] {
    font-size: 0.95rem !important;
  }
  
  #mhInspireBanner p[style*="1.3rem"] {
    font-size: 1rem !important;
    margin: 10px 0 !important;
  }
  
  #mhInspireBanner button {
    padding: 10px 20px !important;
    font-size: 0.95rem !important;
    margin-top: 10px !important;
  }
}

/* Very Small Screens (320px - 360px) */
@media (max-width: 360px) {
  #mhInspireBanner {
    width: 98% !important;
    padding: 15px 12px !important;
  }
  
  #mhInspireBanner h2 {
    font-size: 1.2rem !important;
  }
  
  #mhInspireBanner p {
    font-size: 0.85rem !important;
    margin: 5px 0 !important;
  }
  #mhInspireBanner .ephesians-verse-ref {
    font-style: normal !important;
  }
  
  #mhInspireBanner button {
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
    width: 100% !important;
  }
}

/* Galaxy S23 only — inspiration banner fonts +15%; grow modal height as needed */
@media (max-width: 480px) {
  #mhInspireBanner {
    width: 95% !important;
    max-width: 95% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    padding: 18px 12px !important;
    box-sizing: border-box !important;
  }

  #mhInspireBanner h2 {
    font-size: 1.61rem !important; /* 1.4rem × 1.15 */
    margin: 0 0 10px 0 !important;
    line-height: 1.25 !important;
  }

  #mhInspireBanner p {
    font-size: 1.035rem !important; /* 0.9rem × 1.15 */
    margin: 7px 0 !important;
    line-height: 1.35 !important;
  }

  #mhInspireBanner .ephesians-verse-ref {
    font-size: 0.863rem !important; /* 0.75rem × 1.15 */
    font-style: normal !important;
  }

  #mhInspireBanner p[style*="0.95rem"],
  #mhInspireBanner p[style*="1.093rem"],
  #mhInspireBanner p[style*="1.2rem"] {
    font-size: 1.093rem !important; /* 0.95rem × 1.15 */
  }

  #mhInspireBanner p[style*="1.150rem"],
  #mhInspireBanner p[style*="1.15rem"],
  #mhInspireBanner p[style*="1.3rem"] {
    font-size: 1.15rem !important; /* 1rem × 1.15 */
  }

  #mhInspireBanner button {
    padding: 12px 20px !important;
    font-size: 1.093rem !important; /* 0.95rem × 1.15 */
    margin-top: 12px !important;
  }
}

/* Welcome Tour Modal - Mobile Optimization */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
/* Note: Galaxy S23 (360px-430px) has its own specific ultra-compact rules below */
@media (max-width: 600px) {
  #welcomeTourModal > div {
    width: 98% !important;
    max-width: 98% !important;
    padding: 4px 3px !important;
    margin: 1px auto !important;
    border-radius: 10px !important;
    max-height: calc(100vh - 2px) !important;
    height: calc(100vh - 2px) !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
  }
  
  #welcomeTourModal h2 {
    font-size: 0.95rem !important;
    margin-bottom: 4px !important;
    line-height: 1.1 !important;
  }
  
  #welcomeTourModal h3 {
    font-size: 1.02rem !important; /* Increased by 20% from 0.85rem */
    margin: 0 0 3px 0 !important;
    line-height: 1.1 !important;
  }
  
  #welcomeTourModal p {
    font-size: 0.65rem !important;
    line-height: 1.1 !important;
    margin: 0 0 2px 0 !important;
  }
  
  #welcomeTourModal .logo {
    height: 18px !important;
  }
  
  #welcomeTourModal .logo-background {
    padding: 2px 6px !important;
  }
  
  #welcomeTourModal button[onclick*="closeWelcomeTour"] {
    width: 20px !important;
    height: 20px !important;
    font-size: 16px !important; /* Increased by 15% */
  }
  
  /* Section 1: What and Why - Mobile */
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #f0f4ff"] {
    padding: 6px 4px !important;
    margin-bottom: 4px !important;
    border: 1px solid #b8c5e6 !important;
    border-radius: 8px !important;
  }
  
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #f0f4ff"] h3 {
    font-size: 1.02rem !important; /* Increased by 20% from 0.85rem */
    margin-bottom: 4px !important;
  }
  
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #f0f4ff"] button {
    padding: 6px 4px !important;
    font-size: 1.06rem !important; /* Increased by 15% */
    border-radius: 6px !important;
  }
  
  /* Section 2: Team Matching Example - Mobile */
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #fff5e6"] {
    padding: 6px 4px !important;
    margin-bottom: 4px !important;
    border: 1px solid #ffd699 !important;
    border-radius: 8px !important;
  }
  
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #fff5e6"] h3 {
    font-size: 1.02rem !important; /* Increased by 20% from 0.85rem */
    margin-bottom: 4px !important;
  }
  
  #welcomeTourModal #teamMatchingExampleBtn {
    padding: 7px 12px !important;
    font-size: 1.06rem !important; /* Increased by 15% */
    border-radius: 8px !important;
  }
  
  /* Section 3: Roadmap - Mobile */
  #keysToSuccessSection {
    padding: 6px 4px !important;
    margin-bottom: 4px !important;
    border: 1px solid #ffc107 !important;
    border-radius: 8px !important;
  }
  
  #keysToSuccessSection h3 {
    font-size: 0.85rem !important;
    margin-bottom: 3px !important;
  }
  
  #keysToSuccessSection > div {
    margin-bottom: 3px !important;
  }
  
  #keysToSuccessSection button {
    padding: 6px 10px !important;
    font-size: 0.81rem !important; /* Increased by 15% */
    border-radius: 6px !important;
  }
  
  /* Section 4: Demo Tour - Mobile */
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #e3f2fd"] {
    padding: 6px 4px !important;
    margin-bottom: 4px !important;
    border: 1px solid #90caf9 !important;
    border-radius: 8px !important;
  }
  
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #e3f2fd"] h3 {
    font-size: 1.02rem !important; /* Increased by 20% from 0.85rem */
    margin-bottom: 4px !important;
  }
  
  /* Section 4 buttons (Demo Tour) - match What/Why exactly - REMOVED duplicate rule */
  
  /* Grid buttons - Section 1 (What/Why) - 2 columns on mobile */
  #welcomeTourModal div[style*="grid-template-columns: 1fr 1fr"]:not([style*="grid-template-columns: 1fr 1fr 1fr"]) {
    gap: 4px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  
  /* Skip Button - Mobile — Main Page: +15% text, +10% button vs prior */
  #welcomeTourModal #skipTourButton {
    padding: 9px 18px !important;
    font-size: 1.22rem !important;
    border-radius: 6px !important;
    margin-top: 3px !important;
  }
  
  /* Section 1 buttons (What/Why) - keep in grid, side by side - match Helper/ exactly */
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #f0f4ff"] div[style*="display: grid"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #f0f4ff"] button {
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 4px !important;
    font-size: 1.06rem !important; /* Increased by 15% */
    box-sizing: border-box !important;
  }
  
  /* Section 2: How and Example buttons */
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #fff5e6"] button {
    padding: 8px 12px !important;
    font-size: 1.06rem !important; /* Increased by 15% */
    width: 100% !important;
  }
  
  #welcomeTourModal #teamMatchingExampleBtn {
    padding: 8px 12px !important;
    font-size: 1.06rem !important; /* Increased by 15% */
    width: 100% !important;
  }
  
  /* Section 3: Roadmap button */
  #welcomeTourModal #viewRoadmapBtn {
    padding: 8px 12px !important;
    font-size: 1.06rem !important; /* Increased by 15% */
    width: 100% !important;
  }
  
  /* Section 4 buttons (Demo Tour) - keep in grid, match What/Why exactly */
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #e3f2fd"] div[style*="grid-template-columns: 1fr 1fr"] {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }
  
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #e3f2fd"] button {
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 4px !important;
    font-size: 1.06rem !important; /* Increased by 15% */
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  
  /* Skip button — Main Page: +15% text, +10% button vs prior */
  #welcomeTourModal #skipTourButton {
    padding: 9px 18px !important;
    font-size: 1.22rem !important;
    margin-top: 3px !important;
  }
  
  /* Close button - exclude from general button rules */
  #welcomeTourModal button[aria-label="Close modal"] {
    width: 20px !important;
    height: 20px !important;
    font-size: 16px !important; /* Increased by 15% */
    padding: 0 !important;
  }
  
  /* Header logo container */
  #welcomeTourModal .logo-background {
    padding: 2px 6px !important;
  }
  
  /* Ensure no scrolling */
  #welcomeTourModal {
    overflow: hidden !important;
  }
  
  #welcomeTourModal > div {
    box-sizing: border-box !important;
  }
}

/* Galaxy S23 specific (360px - 430px) - Fit content between browser UI elements */
@media (max-width: 480px) {
  #welcomeTourModal > div {
    width: 98% !important;
    max-width: 98% !important;
    padding: 8px 6px !important;
    margin: 0 auto !important;
    border-radius: 10px !important;
    /* Account for browser address bar at top and navigation bar at bottom */
    max-height: calc(100dvh - 120px) !important;
    max-height: calc(100vh - 120px) !important; /* Fallback */
    height: calc(100dvh - 120px) !important;
    height: calc(100vh - 120px) !important; /* Fallback */
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
  }
  
  #welcomeTourModal h2 {
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
  }
  
  #welcomeTourModal h3 {
    font-size: 1.02rem !important; /* +20% from 0.85rem — About / Learn More / Demo Tour */
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
  }
  
  #welcomeTourModal .logo {
    height: 30px !important;
    max-height: 30px !important;
    width: auto !important;
  }
  
  #welcomeTourModal .logo-background {
    padding: 6px 10px !important;
  }
  
  #welcomeTourModal button[onclick*="closeWelcomeTour"],
  #welcomeTourModal button[aria-label="Close modal"] {
    width: 18px !important;
    height: 18px !important;
    font-size: 28px !important; /* 2× previous 14px — enlarge X only */
    line-height: 1 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  
  /* All sections - compact but readable */
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #f0f4ff"],
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #fff5e6"],
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #e3f2fd"] {
    padding: 8px 6px !important;
    margin-bottom: 6px !important;
    border-radius: 6px !important;
  }
  
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #f0f4ff"] h3,
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #fff5e6"] h3,
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #e3f2fd"] h3 {
    font-size: 1.02rem !important; /* +20% from 0.85rem — About / Learn More / Demo Tour */
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
  }
  
  /* What? / Why? /  /  — taller tap targets on Galaxy S23 */
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #f0f4ff"] button,
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #e3f2fd"] button {
    padding: 13px 10px !important;
    font-size: 0.95rem !important;
    border-radius: 6px !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    min-height: 46px !important;
  }

  /* Learn More / FAQ — keep compact; Main Page sized separately below */
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #fff5e6"] button,
  #welcomeTourModal #teamMatchingExampleBtn,
  #welcomeTourModal #viewRoadmapBtn,
  #welcomeTourModal #commonQuestionsFaqBtn {
    padding: 8px 12px !important;
    font-size: 0.92rem !important;
    border-radius: 6px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    min-height: 32px !important;
  }

  /* Main Page button — Galaxy S23: +15% text, +10% button vs prior */
  #welcomeTourModal #skipTourButton {
    padding: 9px 13px !important;
    font-size: 1.058rem !important;
    border-radius: 6px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    min-height: 35px !important;
  }
  
  /* Grid gaps - compact */
  #welcomeTourModal div[style*="grid-template-columns: 1fr 1fr"],
  #welcomeTourModal div[style*="display: grid"] {
    gap: 4px !important;
  }
  
  /* Flex gaps - compact */
  #welcomeTourModal div[style*="display: flex; flex-direction: column"],
  #welcomeTourModal div[style*="flex-direction: column"] {
    gap: 4px !important;
  }
  
  /* Header spacing */
  #welcomeTourModal > div > div[style*="justify-content: space-between"],
  #welcomeTourModal > div > div[style*="display: flex"][style*="justify-content"] {
    margin-bottom: 6px !important;
    gap: 6px !important;
  }
  
  /* Skip button margin and container */
  #welcomeTourModal #skipTourButton {
    margin-top: 4px !important;
  }
  
  #welcomeTourModal > div > div[style*="justify-content: center"][style*="margin-top"] {
    margin-top: 4px !important;
  }
}

@media (max-width: 360px) {
  #welcomeTourModal > div {
    width: 98% !important;
    padding: 15px 12px !important;
  }
  
  #welcomeTourModal h2 {
    font-size: 1.3rem !important;
  }
  
  #welcomeTourModal h3 {
    font-size: 1rem !important;
  }
  
  /* REMOVED: General button rule that was causing all buttons to shrink */
  /* Buttons now use their specific section rules or inline styles */
  
  /* All sections - even more compact on very small screens */
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #f0f4ff"],
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #fff5e6"],
  #welcomeTourModal div[style*="background: linear-gradient(135deg, #e3f2fd"],
  #keysToSuccessSection {
    padding: 12px 10px !important;
    margin-bottom: 12px !important;
  }
  
  /* Section 1 - stack buttons on very small screens */
  #welcomeTourModal div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  /* Section 4 - stack buttons on very small screens */
  #welcomeTourModal div[style*="grid-template-columns: 1fr 1fr"]:not([style*="grid-template-columns: 1fr 1fr 1fr"]) {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* Tab Buttons - Mobile Optimization */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  .tab-button {
    min-width: 100px !important;
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
    margin: 0 4px !important;
  }
  
  /* Stack tabs on very small screens */
  .tab-button-container {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }
}

@media (max-width: 360px) {
  .tab-button {
    min-width: 90px !important;
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
    margin: 0 2px !important;
  }
}

/* Landing Page - Mobile Optimization - Ultra Compact to fit without scrolling */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* Landing container - fill more vertical space */
  #landing,
  .landing-optimized {
    padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    min-height: 100vh !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-y: auto !important;
  }

  /* Compact phones: fill the screen; scroll inside the landing card if needed */
  @media (max-width: 480px) {
    #landing,
    .landing-optimized,
    html body #landing,
    html body #landing.landing-optimized {
      overflow: hidden !important;
      overflow-y: hidden !important;
      overflow-x: hidden !important;
    }

    .landing-content,
    html body .landing-content,
    #landing .landing-content {
      overflow: hidden !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      scrollbar-width: thin !important;
    }
  }
  
  /* Landing content - more padding to fill space (increased by ~2%) */
  .landing-content {
    padding: 10px 6px !important;
    border-width: 1.5px !important;
    border-radius: 10px !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }
  
  /* Logo - equal space above & below blue box (S23 overrides below tighten this) */
  #landing .logo-container,
  .landing-optimized .logo-container,
  .landing-content .logo-container {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .logo-background {
    padding: 7px 10px !important;
    border-radius: 6px !important;
  }
  
  .logo {
    height: 39px !important;
  }
  
  /* Galaxy S23 specific - make landing page logo slightly bigger */
  @media screen and (min-width: 360px) and (max-width: 390px) {
    html body #landing .logo-container .logo-background img.logo,
    html body #landing .logo-container .logo-background .logo,
    html body .landing-optimized .logo-container .logo-background img.logo,
    html body .landing-optimized .logo-container .logo-background .logo,
    html body .landing-content .logo-container .logo-background img.logo,
    html body .landing-content .logo-container .logo-background .logo {
      height: 71.5px !important; /* 70px * 1.02 = 71.5px (2% bigger) */
      max-height: 71.5px !important;
      width: auto !important;
    }
  }
  
  /* Tagline - more space (increased by ~2%) */
  .tagline {
    font-size: 0.7315rem !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
    color: #000000 !important;
  }

  .mh-faith-aligned {
    font-size: 0.68rem !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
    color: #334155 !important;
    font-weight: 500 !important;
    text-align: center !important;
  }
  
  /* Main buttons container - more spacing (increased by ~2%) */
  .main-buttons {
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    position: relative !important;
  }
  
  /* Hide housekeeping section in its original location (under My Profile) on cell screens only */
  /* Target both with and without data-moved attribute to ensure it's hidden */
  .helper-section .housekeeping,
  .helper-section .housekeeping[data-moved],
  .helper-section .housekeeping[style*="display"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    flex: 0 0 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
  }
  
  /* Completely remove housekeeping from helper-buttons flex layout */
  .helper-buttons .housekeeping {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
  }
  
  /* Style the moved housekeeping section (near bottom of page) - make it visible on cell screens */
  /* The moved housekeeping is placed outside helper-section, so it won't be affected by the hide rule above */
  .housekeeping[data-moved="true"] {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    order: 1 !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 10 !important;
  }
  
  /* Ensure housekeeping h4 is clickable and above other elements */
  .housekeeping[data-moved="true"] h4 {
    position: relative !important;
    z-index: 11 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  
  /* Hide housekeeping content by default on cell screens - only show when toggled */
  .housekeeping[data-moved="true"] .housekeeping-content:not(.housekeeping-visible) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  /* Show housekeeping content when toggled (has housekeeping-visible class) - HIGH SPECIFICITY */
  .housekeeping[data-moved="true"] .housekeeping-content.housekeeping-visible,
  html body .housekeeping[data-moved="true"] .housekeeping-content.housekeeping-visible,
  body .housekeeping[data-moved="true"] .housekeeping-content.housekeeping-visible,
  .landing-content .housekeeping[data-moved="true"] .housekeeping-content.housekeeping-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    position: relative !important;
    /* Ensure it's actually visible */
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
  }
  
  /* Ensure proper spacing for moved housekeeping section (increased by ~2%) */
  .main-buttons + .housekeeping[data-moved="true"] {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Mobile Housekeeping FAB - Hide original housekeeping on mobile */
  @media (max-width: 600px) {
    /* Hide original housekeeping section completely on mobile - FAB handles it */
    .helper-section .housekeeping:not([data-moved="true"]),
    .housekeeping:not([data-moved="true"]) {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      height: 0 !important;
      overflow: hidden !important;
    }
    
    /* Hide moved housekeeping too - FAB replaces it */
    .housekeeping[data-moved="true"] {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      height: 0 !important;
      overflow: hidden !important;
    }
    
    /* FAB retired — Controls is a footer link; keep FAB from covering footer taps */
    #housekeepingFABWrapper,
    #housekeepingFAB,
    #housekeepingFABLabel {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
      z-index: -1 !important;
    }
    
    /* Housekeeping Drawer Styles */
    #housekeepingDrawerBackdrop {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: 100001 !important;
    }
    
    #housekeepingDrawer {
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      z-index: 100002 !important;
      background: white !important;
    }
  }
  
  /* Galaxy S23 - Prevent housekeeping from affecting button layout */
  @media (max-width: 480px) {
    /* Ensure housekeeping h4 is ALWAYS clickable on Galaxy S23 */
    .housekeeping[data-moved="true"] h4,
    html body .housekeeping[data-moved="true"] h4,
    body .housekeeping[data-moved="true"] h4,
    #landing .housekeeping[data-moved="true"] h4,
    .housekeeping[data-moved="true"] h4[data-mobile-handler-attached="true"] {
      position: relative !important;
      z-index: 99999 !important; /* Very high z-index to ensure it's above everything */
      pointer-events: auto !important;
      touch-action: manipulation !important;
      cursor: pointer !important;
      -webkit-tap-highlight-color: rgba(37, 99, 235, 0.3) !important; /* Visual feedback */
      user-select: none !important;
      -webkit-user-select: none !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    /* Ensure nothing overlays the h4 */
    .housekeeping[data-moved="true"] {
      position: relative !important;
      z-index: 0 !important;
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
      height: 0 !important;
      overflow: hidden !important;
    }
    
    /* Ensure h4 children (like icon) are also clickable */
    .housekeeping[data-moved="true"] h4 *,
    .housekeeping[data-moved="true"] h4 #housekeepingToggleIcon {
      pointer-events: auto !important;
      z-index: 100000 !important;
    }
    /* Ensure helper-buttons maintain their layout when housekeeping opens */
    .helper-buttons {
      position: relative !important;
      overflow: visible !important;
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
    }
    
    /* Lock action buttons in place with fixed width - prevent any shifting */
    .helper-buttons .action-group-small {
      position: relative !important;
      flex: 0 0 calc(50% - 4px) !important;
      flex-shrink: 0 !important;
      flex-grow: 0 !important;
      width: calc(50% - 4px) !important;
      max-width: calc(50% - 4px) !important;
      min-width: calc(50% - 4px) !important;
    }
    
    /* Lock button widths to prevent shifting */
    .helper-buttons .action-button {
      flex-shrink: 0 !important;
      min-width: 0 !important;
      max-width: 100% !important;
      width: 81% !important;
    }
    
    /* Ensure moved housekeeping doesn't affect main-buttons layout */
    .main-buttons + .housekeeping[data-moved="true"] {
      clear: both !important;
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
      height: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    
    /* Hide housekeeping content by default on Galaxy S23 - only show when toggled */
    .housekeeping[data-moved="true"] .housekeeping-content:not(.housekeeping-visible) {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      height: 0 !important;
      min-height: 0 !important;
      max-height: 0 !important;
      overflow: hidden !important;
      position: relative !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    
    /* Show housekeeping content when toggled - HIGHEST SPECIFICITY to override all other rules */
    .housekeeping[data-moved="true"] .housekeeping-content.housekeeping-visible,
    html body .housekeeping[data-moved="true"] .housekeeping-content.housekeeping-visible,
    body .housekeeping[data-moved="true"] .housekeeping-content.housekeeping-visible,
    html body #landing .housekeeping[data-moved="true"] .housekeeping-content.housekeeping-visible,
    #landing .housekeeping[data-moved="true"] .housekeeping-content.housekeeping-visible,
    .landing-content .housekeeping[data-moved="true"] .housekeeping-content.housekeeping-visible {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      height: auto !important;
      min-height: 200px !important; /* Force minimum height to ensure visibility */
      max-height: none !important;
      overflow: visible !important;
      position: relative !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      /* Force all properties to ensure visibility */
      padding: 8px !important;
      margin: 8px 0 !important;
      /* Ensure it's not hidden by transform or other properties */
      transform: none !important;
      clip: auto !important;
      clip-path: none !important;
      /* Explicitly remove any height restrictions */
      line-height: normal !important;
      z-index: 1 !important;
    }
    
    /* Ensure parent container doesn't clip content */
    .housekeeping[data-moved="true"] {
      overflow: visible !important;
      position: relative !important;
      display: block !important;
      visibility: visible !important;
    }
    
    /* Ensure landing-content doesn't clip housekeeping content */
    .landing-content,
    html body .landing-content,
    body .landing-content {
      overflow: hidden !important;
      overflow-y: hidden !important;
      overflow-x: hidden !important;
    }
    
    /* Ensure all child elements inside housekeeping content are visible when toggled */
    /* Only override if they're hidden - preserve their natural display */
    .housekeeping[data-moved="true"] .housekeeping-content.housekeeping-visible * {
      visibility: visible !important;
      opacity: 1 !important;
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
    }
    
    /* Ensure buttons are visible and clickable */
    .housekeeping[data-moved="true"] .housekeeping-content.housekeeping-visible button {
      display: inline-block !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      height: auto !important;
      min-height: auto !important;
      width: auto !important;
    }
    
    /* Ensure divs are visible (preserve their flex/block display) */
    .housekeeping[data-moved="true"] .housekeeping-content.housekeeping-visible > div,
    .housekeeping[data-moved="true"] .housekeeping-content.housekeeping-visible div {
      visibility: visible !important;
      opacity: 1 !important;
      display: flex !important;
      height: auto !important;
      min-height: auto !important;
      width: 100% !important;
    }
    
    /* Ensure paragraphs are visible */
    .housekeeping[data-moved="true"] .housekeeping-content.housekeeping-visible p {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      height: auto !important;
      min-height: auto !important;
      width: 100% !important;
    }
    
    /* Make register button same width as helper button on Galaxy S23 */
    /* Helper button is 81% of calc(50% - 4px) = calc(40.5% - 3.24px) */
    .register-button,
    html body .register-button,
    body .register-button,
    #landing .register-button,
    .host-registration .register-button {
      width: calc(40.5% - 3.24px) !important;
      max-width: calc(40.5% - 3.24px) !important;
      min-width: calc(40.5% - 3.24px) !important;
      box-sizing: border-box !important;
    }
  }
  
  /* Helper and Host sections - more padding (increased by ~2%) */
  .helper-section,
  .host-section {
    padding: 10px 6px !important;
    border-radius: 8px !important;
    margin: 0 !important;
    border-width: 1px !important;
  }
  
  /* Helper Tools (helper-section) background on cell screens — one shade lighter than gray-400/600 */
  .helper-section,
  .helper-section[style*="background"] {
    background: linear-gradient(135deg, #dee2e6, #adb5bd) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* Galaxy S23: do not use negative side margins (they shift content off-center) */
  @media (max-width: 480px) {
    html body #landing .helper-section,
    html body #landing .host-section,
    body #landing .helper-section,
    body #landing .host-section,
    #landing .helper-section,
    #landing .host-section,
    .helper-section,
    .host-section {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
      box-sizing: border-box !important;
      transform: none !important;
    }

    html body #landing .landing-content,
    body #landing .landing-content,
    #landing .landing-content {
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 6px !important;
      padding-right: 6px !important;
      text-align: center !important;
      overflow: hidden !important;
      overflow-x: hidden !important;
      overflow-y: hidden !important;
      scrollbar-gutter: auto !important;
      scrollbar-width: none !important;
    }

    html body #landing,
    body #landing,
    #landing,
    html body #landing.landing-optimized,
    body #landing.landing-optimized {
      overflow: hidden !important;
      overflow-x: hidden !important;
      overflow-y: hidden !important;
      scrollbar-width: none !important;
    }

    html body #landing .landing-content::-webkit-scrollbar,
    #landing .landing-content::-webkit-scrollbar,
    #landing::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
      display: none !important;
    }

    html body #landing .logo-container,
    body #landing .logo-container,
    #landing .logo-container {
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding-top: 12px !important;
      padding-bottom: 12px !important;
      box-sizing: border-box !important;
    }
  }
  
  /* Make Admin Tools (host-section) background darker on cell screens only */
  .host-section,
  .host-section[style*="background"] {
    background: linear-gradient(135deg, #e9ecef, #dee2e6) !important;
  }
  
  /* Section titles - slightly larger (increased by ~2%) */
  .section-title {
    font-size: 0.95rem !important;
    margin-bottom: 11px !important;
    line-height: 1.2 !important;
  }
  
  /* Make Helper Tools title same color as Admin Tools on cell screens only */
  .helper-section .section-title,
  .helper-section .section-title[style*="color: #28a745"] {
    color: #495057 !important;
  }
  
  /* Action buttons container - more spacing */
  .helper-buttons,
  .host-buttons {
    gap: 10px !important;
  }
  
  /* Put Helpers and My Profile buttons on same line, equally spaced on cell screens */
  .helper-buttons[style*="flex-direction: column"],
  .helper-buttons {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: stretch !important;
    position: relative !important;
  }
  
  /* Make action-group-small containers equal width */
  .helper-buttons .action-group-small {
    flex: 1 1 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: none !important;
    position: relative !important;
  }
  
  /* Make action buttons fit within their containers - 10% less width on cell screens (reduced from 90% to 81%) */
  .helper-buttons .action-button {
    width: 81% !important;
    max-width: 81% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  
  /* Action buttons - slightly larger */
  .action-button {
    width: 150px !important;
    height: 58px !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    padding: 8px !important;
  }
  
  /* Action group small - compact */
  .action-group-small {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Override inline styles for sections */
  .helper-section[style*="padding: 25px"],
  .host-section[style*="padding: 25px"] {
    padding: 12px 8px !important;
  }
  
  .helper-section[style*="margin-right: 15px"],
  .host-section[style*="margin-left: 15px"] {
    margin: 0 !important;
  }
  
  .helper-buttons[style*="gap: 15px"],
  .host-buttons[style*="gap: 15px"] {
    gap: 10px !important;
  }
  
  .action-group-small[style*="gap: 15px"] {
    gap: 10px !important;
  }
  
  /* Override section title inline styles */
  .section-title[style*="margin-bottom: 20px"] {
    margin-bottom: 10px !important;
  }
  
  .section-title[style*="font-size: 1.3rem"] {
    font-size: 0.95rem !important;
  }
  
  /* Override housekeeping inline styles */
  .housekeeping[style*="margin-top: 12px"] {
    margin-top: 10px !important;
  }
  
  .housekeeping[style*="padding: 10px"] {
    padding: 8px !important;
  }
  
  .housekeeping h4[style*="font-size: 0.9rem"] {
    font-size: 0.991875rem !important; /* 0.8625rem * 1.15 = 15% larger */
    margin-bottom: 4px !important;
  }
  
  .housekeeping p[style*="font-size: 0.72rem"] {
    font-size: 0.65rem !important;
    margin-bottom: 6px !important;
  }
  
  .housekeeping button[style*="padding: 6px 12px"] {
    padding: 5px 10px !important;
    font-size: 0.68rem !important;
  }
  
  /* Override host registration inline styles */
  .host-registration[style*="margin-top: 20px"] {
    margin-top: 12px !important;
  }
  
  .host-registration[style*="padding-top: 20px"] {
    padding-top: 12px !important;
  }
  
  .host-registration[style*="border-top: 2px"] {
    border-top-width: 1px !important;
  }
  
  .host-title[style*="font-size: 1.1rem"] {
    font-size: 0.8rem !important;
  }
  
  .host-title[style*="margin-bottom: 15px"] {
    margin-bottom: 8px !important;
  }
  
  .register-button[style*="padding: 12px 24px"] {
    padding: 8px 16px !important;
  }
  
  .register-button[style*="font-size: 1rem"] {
    font-size: 0.8rem !important;
  }
  
  .register-button[style*="margin-bottom: 15px"] {
    margin-bottom: 8px !important;
  }
  
  .host-info[style*="font-size: 0.9rem"] {
    font-size: 0.748rem !important;
  }
  
  /* Make "First-time hosts:" and "Already registered?" text the same color as "Register to help" on cell screens */
  .host-info strong,
  .host-info strong.already-registered {
    color: #000000 !important; /* Same color as action-description (black) */
  }
  
  /* Ensure "Already registered? Click here" stays on a single line on cell screens */
  .host-info strong.already-registered,
  .host-info strong.already-registered + .text-small,
  .host-info strong.already-registered + .already-registered-link {
    white-space: nowrap !important;
    display: inline !important;
  }
  
  /* Make text-small match host-info font size on cell screens */
  .text-small {
    font-size: 0.748rem !important;
  }
  
  .button-icon {
    font-size: 1.1rem !important;
  }
  
  .button-text {
    font-size: 1.1385rem !important; /* +15% from 0.99rem — Helpers / Edit Profile / Hosts */
  }
  
  /* Galaxy S23 specific - Helpers / My Profile / Hosts / Register + supporting copy */
  @media screen and (max-width: 480px) {
    html body #landing .button-text,
    html body .landing-optimized .button-text,
    html body .landing-content .button-text,
    html body .action-button .button-text,
    html body .galaxy-s23-button-text {
      font-size: 1.252rem !important; /* +15% from 1.089rem */
    }

    html body #landing .register-button,
    html body .host-registration .register-button,
    #landing .register-button,
    .host-registration .register-button {
      font-size: 1.0285rem !important; /* +10% from prior 0.935rem */
    }

    html body #landing .tagline,
    html body .landing-content .tagline {
      font-size: 0.819rem !important; /* -5% from 0.862125rem */
    }

    html body #landing .mh-faith-aligned,
    html body .landing-content .mh-faith-aligned {
      font-size: 0.72rem !important;
    }

    html body #landing .section-title {
      font-size: 1.045rem !important;
    }

    html body #landing .action-description {
      font-size: 0.858rem !important;
    }

    html body #landing .host-title {
      font-size: 0.88rem !important;
    }

    html body #landing .host-info,
    html body #landing .host-info .already-registered,
    html body #landing .host-info .text-small {
      font-size: 0.831875rem !important;
    }
  }
  
  /* Action description - more space */
  .action-description {
    font-size: 0.77rem !important;
    margin: 4px 0 0 0 !important;
    line-height: 1.3 !important;
    color: #000000 !important;
  }
  
  /* Housekeeping section - more padding */
  .housekeeping {
    margin-top: 10px !important;
    padding: 8px !important;
    border-radius: 6px !important;
  }
  
  .housekeeping h4 {
    font-size: 0.991875rem !important; /* 0.8625rem * 1.15 = 15% larger */
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
  }
  
  .housekeeping p {
    font-size: 0.7475rem !important; /* 0.65rem * 1.15 = 15% larger */
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }
  
  .housekeeping button {
    padding: 5px 10px !important;
    font-size: 0.782rem !important; /* 0.68rem * 1.15 = 15% larger */
    border-radius: 4px !important;
    min-height: 30px !important;
  }
  
  /* Overview/Help On/Off + Inspiration Off — compact width; allow wrap for longer labels */
  .housekeeping button[onclick*="turnOnTour"][data-quick-tooltip],
  .housekeeping button[onclick*="turnOffTour"][data-quick-tooltip],
  .housekeeping button[onclick*="turnOffBanner"][data-quick-tooltip] {
    padding: 5px 3px !important;
    font-size: 0.7rem !important; /* slightly smaller so Overview/Help On|Off fits */
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    transform: none !important;
    box-sizing: border-box !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }
  
  /* Make Inspiration Off button 37.5% of parent column (25% smaller than 50%) */
  .housekeeping button[onclick*="turnOffBanner"] {
    width: 37.5% !important;
    max-width: 37.5% !important;
    flex: 0 0 37.5% !important;
  }
  
  /* Make Tour buttons container full width so buttons inside can be sized relative to parent */
  .housekeeping div[style*="display: flex"][style*="gap: 6px"] {
    gap: 5px !important;
    width: 100% !important; /* Full width so buttons can be 37.5% of parent */
    max-width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  
  /* Make Tour On and Tour Off buttons each 37.5% of parent column (same as Inspiration Off, 25% smaller than 50%) */
  /* Since container is 100% of parent, 37.5% of container = 37.5% of parent */
  .housekeeping div[style*="display: flex"][style*="gap: 6px"] button {
    width: calc(37.5% - 2.5px) !important; /* 37.5% of parent minus half the gap */
    max-width: calc(37.5% - 2.5px) !important;
    flex: 0 0 calc(37.5% - 2.5px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  
  .housekeeping div[style*="flex-direction: column"] {
    gap: 6px !important;
  }
  
  /* Host registration section - more spacing (increased by ~2%) */
  .host-registration {
    margin-top: 8px !important;
    padding-top: 8px !important;
  }
  
  .divider {
    width: 50px !important;
    height: 1px !important;
    margin: 0 auto 9px !important;
  }
  
  .host-title {
    font-size: 0.8rem !important;
    margin-bottom: 9px !important;
    line-height: 1.2 !important;
  }
  
  .register-button {
    padding: 8px 16px !important;
    font-size: 0.88rem !important; /* 10% larger (0.8rem * 1.1 = 0.88rem) */
    border-radius: 5px !important;
    margin-bottom: 9px !important;
    min-height: 36px !important;
  }
  
  .host-info {
    font-size: 0.748rem !important;
    line-height: 1.3 !important;
  }
  
  .host-info br {
    display: none !important;
  }
  
  /* Footer - more spacing (increased by ~2%) */
  .footer-links {
    margin-top: 6px !important;
    padding-top: 6px !important;
  }
  
  .links-row {
    gap: 8px !important;
    margin-bottom: 0px !important;
  }
  
  .footer-link {
    font-size: 0.65rem !important;
    padding: 2px 4px !important;
    color: #000000 !important; /* Same color as action-description (black) */
  }

  #btnInfoHelp.footer-link,
  .footer-link-help,
  html body #landing #btnInfoHelp.footer-link {
    color: #0f766e !important;
    font-weight: 700 !important;
  }
  
  .copyright {
    font-size: 0.8712rem !important; /* 20% larger (0.726rem * 1.2 = 0.8712rem) */
    margin-top: 0px !important;
  }
}

/* Consistent rendering for Galaxy S23 and Pixel 7 */
/* This breakpoint comes AFTER the 600px rules to override them with higher specificity */
/* Expanded range to cover all variants: 360px-450px covers all standard phone sizes */
/* This ensures Galaxy S23 (any width) and Pixel 7 (any width) render identically */
@media (max-width: 480px) {
  /* Force consistent font rendering */
  body, html {
    font-size: 14px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Ensure landing page elements are consistent across both devices */
  /* Using maximum specificity to override style-optimized-v2.css and inline styles */
  html body #landing.landing-optimized,
  html body #landing,
  body #landing.landing-optimized,
  body #landing,
  #landing.landing-optimized,
  #landing,
  html body .landing-optimized,
  body .landing-optimized,
  .landing-optimized {
    padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    min-height: 100dvh !important;
    min-height: 100vh !important;
    height: 100dvh !important;
    height: 100vh !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    display: flex !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  
  html body .landing-content,
  body .landing-content,
  .landing-content,
  html body #landing .landing-content,
  body #landing .landing-content,
  #landing .landing-content {
    padding: 0 0 8px 0 !important;
    border-width: 1.5px !important;
    border-radius: 10px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
  }

  html body #landing.landing-optimized,
  html body #landing,
  body #landing.landing-optimized,
  body #landing,
  #landing.landing-optimized,
  #landing {
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
  }

  html body #landing .logo-container,
  html body .landing-optimized .logo-container,
  html body .landing-content .logo-container,
  body #landing .logo-container,
  body .landing-optimized .logo-container,
  body .landing-content .logo-container,
  #landing .logo-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  html body #landing .main-buttons,
  body #landing .main-buttons,
  #landing .main-buttons {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    min-height: 0 !important;
  }

  html body #landing .helper-section,
  html body #landing .host-section,
  body #landing .helper-section,
  body #landing .host-section,
  #landing .helper-section,
  #landing .host-section {
    padding: 14px 10px !important;
    display: block !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
  }

  html body #landing .action-button,
  body #landing .action-button,
  #landing .action-button {
    min-height: 52px !important;
    height: 52px !important;
    padding: 10px 12px !important;
  }

  html body #landing .copyright,
  body #landing .copyright,
  #landing .copyright {
    margin-top: 4px !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    line-height: 1.2 !important;
  }

  html body #landing .footer-links,
  body #landing .footer-links,
  #landing .footer-links {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 2px !important;
    position: relative !important;
    z-index: 10050 !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  html body #landing .copyright,
  body #landing .copyright,
  #landing .copyright {
    pointer-events: none !important;
  }

  html body #landing .links-row,
  body #landing .links-row,
  #landing .links-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2px 3px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  html body #landing .footer-link,
  body #landing .footer-link,
  #landing .footer-link {
    position: relative !important;
    z-index: 10052 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    font-size: 1.0368rem !important; /* +20% from 0.864rem */
    line-height: 1.15 !important;
    min-height: 26px !important;
    padding: 4px 5px !important;
    height: auto !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  html body #landing #btnInfoHelp.footer-link,
  body #landing #btnInfoHelp.footer-link,
  #landing #btnInfoHelp.footer-link {
    color: #0f766e !important;
    font-weight: 700 !important;
  }
  
  html body #landing .logo-container,
  html body .landing-optimized .logo-container,
  html body .landing-content .logo-container,
  body #landing .logo-container,
  body .landing-optimized .logo-container,
  body .landing-content .logo-container,
  #landing .logo-container,
  .landing-optimized .logo-container,
  .landing-content .logo-container {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  html body .logo-background,
  body .logo-background,
  .logo-background {
    padding: 7px 10px !important;
    border-radius: 6px !important;
  }
  
  html body #landing .logo,
  html body .landing-optimized .logo,
  html body .landing-content .logo,
  html body .logo-container .logo,
  body #landing .logo,
  body .landing-optimized .logo,
  body .landing-content .logo,
  body .logo-container .logo,
  #landing .logo,
  .landing-optimized .logo,
  .landing-content .logo,
  .logo-container .logo,
  .logo {
    height: 39px !important;
    max-height: 39px !important;
    min-height: 39px !important;
  }
  
  html body .tagline,
  body .tagline,
  .tagline {
    font-size: 0.77rem !important;
    margin: 0 0 13px 0 !important;
    line-height: 1.3 !important;
    color: #000000 !important;
  }

  html body .mh-faith-aligned,
  body .mh-faith-aligned,
  .mh-faith-aligned {
    font-size: 0.7rem !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.3 !important;
    color: #334155 !important;
    font-weight: 500 !important;
    text-align: center !important;
  }
  
  html body .main-buttons,
  body .main-buttons,
  .main-buttons {
    flex-direction: column !important;
    gap: 13px !important;
    margin-bottom: 13px !important;
    padding: 0 !important;
    position: relative !important;
  }
  
  /* Ensure consistent button sizing */
  html body .action-button,
  body .action-button,
  .action-button {
    width: 140px !important;
    height: 50px !important;
    font-size: 0.85rem !important;
    min-width: 140px !important;
    min-height: 50px !important;
  }
  
  /* Consistent section spacing */
  html body .helper-section,
  html body .host-section,
  body .helper-section,
  body .host-section,
  .helper-section,
  .host-section {
    padding: 13px 8px !important;
    border-radius: 8px !important;
    margin: 0 !important;
  }
  
  html body .section-title,
  body .section-title,
  .section-title {
    font-size: 0.85rem !important;
    margin-bottom: 9px !important;
  }
  
  html body .action-description,
  body .action-description,
  .action-description {
    font-size: 0.77rem !important;
    margin-bottom: 9px !important;
  }

  html body #landing .host-info,
  body #landing .host-info,
  #landing .host-info {
    font-size: 0.748rem !important;
  }

  html body #landing .host-info .text-small,
  body #landing .host-info .text-small,
  #landing .host-info .text-small {
    font-size: 0.748rem !important;
  }
  
  /* Ensure footer is consistent */
  html body .footer-links,
  body .footer-links,
  .footer-links {
    margin-top: 6px !important;
    padding-top: 6px !important;
  }
  
  html body .footer-link,
  body .footer-link,
  .footer-link {
    font-size: 0.65rem !important;
    padding: 2px 4px !important;
  }
  
  html body .copyright,
  body .copyright,
  .copyright {
    font-size: 0.8712rem !important; /* 20% larger (0.726rem * 1.2 = 0.8712rem) */
    margin: 8px 0 !important; /* Spacing halfway between housekeeping and pricing button */
  }
  
  /*  Step 2: JS places this below the pulsing tabs — do not pull it up */

  /*  Step 7 - Galaxy S23: 50px higher than prior -80px offset */
  html body .step-tooltip[data-host-step="7"],
  body .step-tooltip[data-host-step="7"],
  html body .step-tooltip[data-host-step="7"][style],
  body .step-tooltip[data-host-step="7"][style],
  html body .step-tooltip[data-host-step="7"][style*="top: 50%"],
  body .step-tooltip[data-host-step="7"][style*="top: 50%"],
  .step-tooltip[data-host-step="7"],
  .step-tooltip[data-host-step="7"][style] {
    top: calc(50% - 130px) !important;
  }

  /*  Step 8 - Galaxy S23: higher so modal does not cover name field */
  html body .step-tooltip[data-host-step="8"],
  body .step-tooltip[data-host-step="8"],
  html body .step-tooltip[data-host-step="8"][style],
  body .step-tooltip[data-host-step="8"][style],
  .step-tooltip[data-host-step="8"],
  .step-tooltip[data-host-step="8"][style] {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 40px)) !important;
  }
}

@media (max-width: 360px) {
  /* Ultra compact for very small screens */
  #landing,
  .landing-optimized {
    padding-top: 15px !important;
    padding-right: 1px !important;
    padding-bottom: 2px !important;
    padding-left: 1px !important;
  }
  
  .landing-content {
    padding: 6px 4px !important;
    border-width: 1px !important;
  }
  
  /* Logo - increase space from top of screen */
  #landing .logo-container,
  .landing-optimized .logo-container,
  .landing-content .logo-container {
    margin-top: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .logo {
        height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  
  #infoContent.info-content-how [style*="font-size: 2.2rem"] {
    font-size: 1.105rem !important; /* 1.3rem * 0.85 = 1.105rem (15% reduction) */
  }
  
  #infoContent.info-content-how [style*="font-size: 1.5rem"],
  #infoContent.info-content-how [style*="font-size: 1.6rem"] {
    font-size: 0.935rem !important; /* 1.1rem * 0.85 = 0.935rem (15% reduction) */
  }
  
  #infoContent.info-content-how [style*="font-size: 1.3rem"] {
    font-size: 0.8925rem !important; /* 1.05rem * 0.85 = 0.8925rem (15% reduction) */
  }
  
  #infoContent.info-content-how [style*="font-size: 1.2rem"],
  #infoContent.info-content-how [style*="font-size: 1.1rem"] {
    font-size: 0.782rem !important; /* 0.92rem * 0.85 = 0.782rem (15% reduction) */
  }
  
  #infoContent.info-content-how [style*="font-size: 1.05rem"] {
    font-size: 0.8925rem !important; /* 0.9rem * 0.85 = 0.765rem, but keeping closer to original for readability */
  }
  
  #infoContent.info-content-how [style*="font-size: 1.8rem"] {
    font-size: 1.02rem !important; /* 1.2rem * 0.85 = 1.02rem (15% reduction) */
  }
  
  /* How modal header section */
  #infoContent.info-content-how > div:first-child {
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
  }
  
  #infoContent.info-content-how > div:first-child > div:first-child {
    gap: 10px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  
  /* How modal header - consistent size - override inline styles */
  #infoContent.info-content-how h2,
  #infoContent.info-content-how > div:first-child h2 {
    font-size: 1.3rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    background: #2563eb !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #2563eb !important;
    background-clip: unset !important;
    letter-spacing: normal !important;
  }
  
  /* How modal logo container - consistent sizing - override inline styles */
  #infoContent.info-content-how .logo-background,
  #infoContent.info-content-how > div:first-child .logo-background,
  #infoContent.info-content-how > div:first-child > div:first-child .logo-background {
    padding: 6px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: calc(100% - 168px) !important;
    box-shadow: none !important;
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
  }
  
  #infoContent.info-content-how .logo,
  #infoContent.info-content-how img.logo,
  #infoContent.info-content-how > div:first-child img.logo {
    height: 28px !important;
    width: auto !important;
    display: block !important;
    max-height: 28px !important;
    max-width: 100% !important;
  }
  
  /* What?/Why? — inline-block: Android 8 WebView mishandles flex/max-content for this chip */
  #infoContent.info-content-what .mh-whatwhy-logo-outer,
  #infoContent.info-content-why .mh-whatwhy-logo-outer {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    align-self: center !important;
    box-sizing: border-box !important;
  }

  /* What? modal — ensure blue gradient behind logo (matches How modal; some browsers drop inline bg) */
  #infoContent.info-content-what .logo-background,
  #infoContent.info-content-what > div:first-child .logo-background,
  #infoContent.info-content-what > div:first-child > div:first-child .logo-background,
  #infoContent.info-content-why .logo-background,
  #infoContent.info-content-why > div:first-child .logo-background,
  #infoContent.info-content-why > div:first-child > div:first-child .logo-background {
    padding: 8px 10px !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    flex-grow: 0 !important;
    align-self: center !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    text-align: center !important;
    line-height: 40px !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3) !important;
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
    border-radius: 12px !important;
  }
  
  #infoContent.info-content-what .logo,
  #infoContent.info-content-what img.logo,
  #infoContent.info-content-what > div:first-child img.logo,
  #infoContent.info-content-why .logo,
  #infoContent.info-content-why img.logo,
  #infoContent.info-content-why > div:first-child img.logo {
    height: 32px !important;
    width: auto !important;
    max-width: 100% !important;
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: normal !important;
    max-height: 32px !important;
  }

  /* What? — stack Leaders / Volunteers columns on cell screens */
  #infoContent.info-content-what div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* What? / Why? video poster + 16:9 shell (cell ≤600px; same treatment as Galaxy S23 block) */
  #infoContent #whatVideoPlaceholder,
  #infoContent #whyVideoPlaceholder {
    padding: 12px 10px !important;
    justify-content: center !important;
    align-items: stretch !important;
    overflow: hidden !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #infoContent #whatVideoPlaceholder > div:first-child,
  #infoContent #whyVideoPlaceholder > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    margin-bottom: 0 !important;
    padding: 12px 10px !important;
    box-sizing: border-box !important;
  }

  #infoContent #whatVideoPlaceholder > div:first-child > div:nth-child(1),
  #infoContent #whyVideoPlaceholder > div:first-child > div:nth-child(1) {
    width: auto !important;
    height: auto !important;
    margin-bottom: 10px !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.12em !important;
  }

  #infoContent #whatVideoPlaceholder > div:first-child > div:nth-child(2),
  #infoContent #whyVideoPlaceholder > div:first-child > div:nth-child(2) {
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto 12px !important;
    flex-shrink: 0 !important;
  }

  #infoContent #whatVideoPlaceholder > div:first-child > div:nth-child(3),
  #infoContent #whyVideoPlaceholder > div:first-child > div:nth-child(3) {
    font-size: 1rem !important;
    margin-bottom: 6px !important;
    line-height: 1.25 !important;
  }

  #infoContent #whatVideoPlaceholder > div:first-child > div:nth-child(4),
  #infoContent #whyVideoPlaceholder > div:first-child > div:nth-child(4) {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0 !important;
  }

  /* Why? poster — tighter stack so subtext stays inside short 16:9 frame */
  #infoContent #whyVideoPlaceholder > div:first-child {
    padding: 8px 6px !important;
  }

  #infoContent #whyVideoPlaceholder > div:first-child > div:nth-child(1) {
    margin-bottom: 6px !important;
    font-size: 0.58rem !important;
  }

  #infoContent #whyVideoPlaceholder > div:first-child > div:nth-child(2) {
    width: 50px !important;
    height: 50px !important;
    margin: 0 auto 8px !important;
  }

  #infoContent #whyVideoPlaceholder > div:first-child > div:nth-child(3) {
    font-size: 0.9rem !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
  }

  #infoContent #whyVideoPlaceholder > div:first-child > div:nth-child(4) {
    font-size: 0.7rem !important;
    line-height: 1.28 !important;
    padding: 0 4px !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  #infoContent.info-content-what #infoWhatContentSimple > div:first-child > div:first-child,
  #infoContent.info-content-why #infoWhyContentSimple > div:first-child > div:first-child {
    border-width: 2px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1) !important;
  }

  #infoContent.info-content-what #infoWhatContentSimple > div:first-child,
  #infoContent.info-content-why #infoWhyContentSimple > div:first-child {
    margin-bottom: 12px !important;
  }
  
  /* How modal main content wrapper - override inline styles */
  #infoContent.info-content-how > div:last-child {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-size: 0.9rem !important;
    color: #2d3748 !important;
  }
  
  /* How modal first paragraph - consistent size - override inline */
  #infoContent.info-content-how > div:last-child > p:first-child {
    font-size: 0.95rem !important;
    margin-bottom: 14px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    color: #1a202c !important;
  }
  
  /* How modal content sections - consistent spacing */
  #infoContent.info-content-how div[style*="background: linear-gradient"],
  #infoContent.info-content-how div[style*="background: #f8f9fa"],
  #infoContent.info-content-how div[style*="background: #e3f2fd"],
  #infoContent.info-content-how div[style*="background: #fff3cd"],
  #infoContent.info-content-how div[style*="background: #e8f5e9"] {
    padding: 14px 12px !important;
    margin: 12px 0 !important;
    border-radius: 10px !important;
  }
  
  /* How modal headings - consistent size - override inline styles */
  #infoContent.info-content-how h3,
  #infoContent.info-content-how div[style*="background"] h3 {
    font-size: 1.1rem !important;
    margin: 0 0 10px 0 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
    display: block !important;
  }
  
  /* How modal emoji in headings - override inline */
  #infoContent.info-content-how h3 span,
  #infoContent.info-content-how h3 span[style*="font-size: 1.8rem"],
  #infoContent.info-content-how h3 span[style*="font-size: 1.5rem"] {
    font-size: 1.2rem !important;
    margin-right: 6px !important;
  }
  
  /* How modal paragraphs - consistent size - override inline */
  #infoContent.info-content-how div[style*="background"] p,
  #infoContent.info-content-how p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin: 0 0 8px 0 !important;
  }
  
  /* Override specific paragraph sizes */
  #infoContent.info-content-how div[style*="background"] p[style*="font-size: 1.1rem"],
  #infoContent.info-content-how p[style*="font-size: 1.1rem"] {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  
  /* How modal lists - consistent spacing */
  #infoContent.info-content-how ol,
  #infoContent.info-content-how ul {
    padding-left: 0 !important;
    margin: 10px 0 !important;
    line-height: 1.5 !important;
  }
  
  #infoContent.info-content-how li {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
    padding: 12px 14px !important;
  }
  
  /* How modal strong tags - consistent size */
  #infoContent.info-content-how strong {
    font-size: 0.92rem !important;
    display: block !important;
    margin-bottom: 5px !important;
  }
  
  /* Reduce excessive margins in how content */
  #infoContent.info-content-how div[style*="margin: 25px"],
  #infoContent.info-content-how div[style*="margin: 30px"] {
    margin: 14px 0 !important;
  }
  
  /* Grid layout for volunteer/leader sections - stack on mobile */
  #infoContent.info-content-how div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  /* Make info modal container taller to fit more content */
  #infoModalContainer {
    max-height: 92vh !important;
  }
  
  /* Form inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 12px 14px !important;
  }
  
  /* Buttons */
  button {
    min-height: 44px !important; /* Touch target size */
    padding: 12px 18px !important;
  }
}

/* Login Modal - Mobile Optimization */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  .login-card,
  div[style*="max-width: 450px"],
  div[style*="max-width: 400px"] {
    width: 95% !important;
    max-width: 95% !important;
    padding: 20px 15px !important;
  }
  
  div[style*="padding: 40px"] {
    padding: 20px 15px !important;
  }
  
  div[style*="padding: 32px 40px"] {
    padding: 20px 15px !important;
  }
  
  /* Tour Login Modal - Fit vertically on cell devices */
  #authModal[data-tour-modal="true"] {
    align-items: flex-start !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  #authModal[data-tour-modal="true"] > div {
    max-height: 90vh !important;
    height: auto !important;
    margin: 0 !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: scaleY(0.9) !important; /*  step 1: -10% vertical */
    transform-origin: center center !important;
  }
  
  /* Login Modal - full-viewport overlay so it cannot be clipped off-screen */
  #authModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    align-items: stretch !important;
    display: block !important;
    padding: 5px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: 100% !important;
    min-height: 100dvh !important;
    width: 100% !important;
    z-index: 100080 !important;
    background: #1e293b !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  #authModal > div {
    max-height: none !important;
    min-height: calc(100dvh - 24px) !important;
    height: auto !important;
    margin: 0 auto !important;
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    border-radius: 12px !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  
  /* Compact header - make "Host Login" fit in blue box */
  #authModal > div > div:first-child {
    padding: 20px 16px 16px 16px !important;
    flex-shrink: 0 !important;
  }
  
  /* Hide decorative circles on mobile to save space */
  #authModal > div > div:first-child > div[style*="position: absolute"] {
    display: none !important;
  }
  
  #authModal .mh-host-login-logo,
  #authModal > div > div:first-child > div[style*="position: relative"] > div[style*="display: inline-flex"] {
    width: auto !important;
    height: auto !important;
    padding: 8px 12px !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
  }

  #authModal .mh-host-login-logo img,
  #authModal > div > div:first-child > div[style*="position: relative"] > div[style*="display: inline-flex"] img {
    height: 28px !important;
    width: auto !important;
    max-width: 196px !important;
    object-fit: contain !important;
    display: block !important;
  }
  
  #authModal > div > div:first-child > div[style*="position: relative"] > div[style*="display: inline-flex"] > span {
    font-size: 14px !important;
  }
  
  #authModal > div > div:first-child h2 {
    font-size: 1.28rem !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  
  #authModal > div > div:first-child p {
    font-size: 0.9rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }
  
  /* Compact form content - no scrolling needed */
  #authModal > div > div:last-child {
    padding: 22px 16px !important;
    overflow: visible !important;
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  #authModal form {
    gap: 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Compact labels */
  #authModal form label {
    font-size: 0.92rem !important; /* Increased by 15% */
    margin-bottom: 5px !important;
  }
  
  /* Compact input fields */
  #authModal input[type="email"],
  #authModal input[type="password"] {
    padding: 14px 50px 14px 14px !important;
    min-height: 48px !important;
    font-size: 1.035rem !important;
    border-radius: 8px !important;
  }
  
  /* Compact input icons */
  #authModal input[type="email"] + div,
  #authModal input[type="password"] + div {
    right: 12px !important;
    font-size: 1.15rem !important; /* Increased by 15% */
  }
  
  /* Password toggle button in auth modal */
  #authModal button[aria-label*="password" i],
  #authModal button[title*="password" i] {
    right: 12px !important;
    padding: 4px 6px !important;
    font-size: 1.64rem !important; /* Increased by 15% */
  }
  
  /* Compact forgot password link */
  #authModal #forgotPwdLink {
    font-size: 0.8625rem !important; /* Increased by 15% */
    margin-top: 4px !important;
  }
  
  /* Compact submit button */
  #authModal button[type="submit"] {
    padding: 14px 18px !important;
    min-height: 48px !important;
    font-size: 1.035rem !important;
    margin-top: 8px !important;
    border-radius: 8px !important;
  }
  
  /* Compact error message */
  #authModal #authModalError {
    padding: 8px !important;
    font-size: 0.92rem !important; /* Increased by 15% */
    margin: 4px 0 !important;
  }
  
  /* Compact cancel button */
  #authModal button[onclick*="closeLogin"],
  #authModal button[onclick*="MHAuth.closeLogin"] {
    padding: 12px 16px !important;
    min-height: 44px !important;
    margin-top: 12px !important;
    font-size: 0.9775rem !important;
    border-radius: 8px !important;
  }
  
  #authModal > div > div:last-child > div:last-child {
    margin-top: 16px !important;
    padding: 16px !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    flex-shrink: 0 !important;
  }
  
  #authModal > div > div:last-child > div:last-child p {
    font-size: 0.8625rem !important; /* Increased by 15% */
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }
  
  #authModal > div > div:last-child > div:last-child p:last-child {
    font-size: 0.805rem !important; /* Increased by 15% */
    line-height: 1.2 !important;
  }
  
  #authModal > div > div:last-child > div:last-child a {
    font-size: 0.8625rem !important; /* Increased by 15% */
  }
}

/* Galaxy S23 specific - Ultra compact login modal to fit with browser UI */
@media (max-width: 480px) {
  /* Host Login must be a full-viewport overlay on every phone.
     position:relative was clipped by html,body overflow:hidden and showed a blank white page
     on devices other than Galaxy S23. Keep overflow:visible on the card (Samsung white-sheet). */
  html.mh-host-login-open,
  html.mh-host-login-open body,
  html.mh-host-path-pending,
  html.mh-host-path-pending body,
  body.mh-host-login-open,
  body.auth-open {
    overflow: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100dvh !important;
    background: #1e293b !important;
  }
  #authModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    inset: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    display: block !important;
    padding: 8px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: 100% !important;
    min-height: 100dvh !important;
    width: 100% !important;
    background: #1e293b !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 100080 !important;
    pointer-events: auto !important;
  }
  
  #authModal > div,
  #authModal .mh-host-login-card {
    width: 95% !important;
    max-width: 95% !important;
    min-height: calc(100dvh - 24px) !important;
    height: auto !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    border-radius: 12px !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
  
  #authModal > div > div:first-child {
    padding: 20px 16px 16px 16px !important;
    flex-shrink: 0 !important;
  }
  
  #authModal .mh-host-login-logo,
  #authModal > div > div:first-child > div[style*="position: relative"] > div[style*="display: inline-flex"] {
    width: auto !important;
    height: auto !important;
    padding: 8px 12px !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
  }

  #authModal .mh-host-login-logo img,
  #authModal > div > div:first-child > div[style*="position: relative"] > div[style*="display: inline-flex"] img {
    height: 28px !important;
    width: auto !important;
    max-width: 196px !important;
    object-fit: contain !important;
    display: block !important;
  }
  
  #authModal > div > div:first-child > div[style*="position: relative"] > div[style*="display: inline-flex"] > span {
    font-size: 16px !important; /* Increased by 15% */
  }
  
  #authModal > div > div:first-child h2 {
    font-size: 1.28rem !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
  }
  
  #authModal > div > div:first-child p {
    font-size: 0.9rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }
  
  #authModal > div > div:last-child {
    padding: 22px 16px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
  }
  
  #authModal form {
    gap: 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  #authModal form label {
    font-size: 0.92rem !important;
    margin-bottom: 6px !important;
  }
  
  #authModal input[type="email"],
  #authModal input[type="password"] {
    padding: 14px 70px 14px 12px !important;
    min-height: 48px !important;
    font-size: 1.02rem !important;
    border-radius: 8px !important;
  }
  
  /* Compact input icons - 33% reduction */
  #authModal input[type="email"] + div,
  #authModal input[type="password"] + div {
    right: 8px !important; /* Reduced from 10px */
    font-size: 0.9775rem !important; /* Increased by 15% */
  }
  
  /* Password toggle button - 33% reduction */
  #authModal button[aria-label*="password" i],
  #authModal button[title*="password" i] {
    right: 42px !important; /* Reduced from 45px */
    padding: 2px 4px !important; /* Reduced from 3px 5px */
    font-size: 1.38rem !important; /* Increased by 15% */
  }
  
  #authModal #forgotPwdLink {
    font-size: 0.85rem !important;
    margin-top: 6px !important;
  }
  
  #authModal button[type="submit"] {
    padding: 14px 16px !important;
    min-height: 48px !important;
    font-size: 1.02rem !important;
    margin-top: 8px !important;
    border-radius: 8px !important;
  }
  
  /* Compact error message - 33% reduction */
  #authModal #authModalError {
    padding: 5px !important; /* Reduced from 6px */
    font-size: 0.805rem !important; /* Increased by 15% */
    margin: 2px 0 !important; /* Reduced from 3px 0 */
  }
  
  #authModal button[onclick*="closeLogin"],
  #authModal button[onclick*="MHAuth.closeLogin"] {
    padding: 12px 16px !important;
    min-height: 44px !important;
    margin-top: 12px !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important;
  }
  
  #authModal > div > div:last-child > div:last-child {
    margin-top: 16px !important;
    padding: 16px !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    flex-shrink: 0 !important;
  }
  
  #authModal > div > div:last-child > div:last-child p {
    font-size: 0.805rem !important; /* Increased by 15% */
    margin-bottom: 3px !important; /* Keep same */
    line-height: 1.2 !important;
  }
  
  #authModal > div > div:last-child > div:last-child p:last-child {
    font-size: 0.69rem !important; /* Increased by 15% */
    line-height: 1.1 !important;
  }
  
  #authModal > div > div:last-child > div:last-child a {
    font-size: 0.805rem !important; /* Increased by 15% */
  }
  
  #authModal[data-tour-modal="true"] > div > div:first-child {
    flex-shrink: 0 !important;
  }
  
  #authModal[data-tour-modal="true"] > div > div:last-child {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /*  step 1: shrink Host Login preview 10% vertically (keep centered) */
  #authModal[data-tour-modal="true"] > div {
    transform: translate(-50%, -50%) scaleY(0.9) !important;
    transform-origin: center center !important;
    max-height: 90dvh !important;
  }
}

/* Host Dashboard Tabs - Mobile */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  .app-container {
    padding: 10px 5px !important;
    max-width: 100vw !important;
    width: 100% !important;
    margin: 10px 0 !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
  
  /* Override inline max-width on app-container */
  .app-container[style*="max-width"] {
    max-width: 100vw !important;
  }
  
  /* Tab buttons in host dashboard */
  button[style*="min-width: 120px"] {
    min-width: 90px !important;
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
  }
  
  /* Host Dashboard Header - Same line as title on mobile/Galaxy S23; smaller Home/Logout */
  .app-container > div:first-child {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding-bottom: 6px !important;
    margin-bottom: 4px !important;
    overflow: visible !important;
  }
  
  /* Reduce gap in logo/title section */
  .app-container > div:first-child > div:first-child {
    gap: 6px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  
  /* Logo and title section - allow shrink so buttons stay on same line */
  .app-container > div:first-child > div:first-child {
    width: auto !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
  }
  
  .app-container > div:first-child h2 {
    font-size: 1rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }
  
  .app-container > div:first-child #hostOrgName {
    font-size: 1.208rem !important; /* prior +15% */
    margin-top: 2px !important;
  }
  
  /* Hide logo on mobile to make room for title and buttons - ONLY for host dashboard (.app-container) */
  .app-container > div:first-child .logo,
  .app-container > div:first-child img[alt*="Logo"],
  .app-container > div:first-child img[src*="logo"],
  .app-container .logo,
  .app-container img.logo[style*="height"],
  .app-container > div:first-child > div:first-child img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
  }
  
  .app-container > div:first-child .logo-background,
  .app-container .logo-background,
  .app-container div.logo-background[style*="padding"],
  .app-container > div:first-child > div:first-child > div.logo-background {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
  }
  
  /* Ensure main page logo is visible on mobile - make it smaller */
  #landing .logo-container,
  .landing-optimized .logo-container,
  .landing-content .logo-container {
    display: block !important;
    visibility: visible !important;
    text-align: center !important;
    margin-top: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
  }
  
  /* Override any conflicting margin rules for logo container - increase top spacing */
  #landing .landing-content .logo-container,
  .landing-optimized .landing-content .logo-container {
    margin-top: 20px !important;
  }
  
  #landing .logo-background,
  .logo-container .logo-background {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 4px 8px !important;
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  #landing .logo,
  .logo-container .logo,
  .logo-container img.logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: 48px !important;
    max-width: 100% !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
  }
  
  /* Home and Logout buttons container - same line as title, do not wrap */
  .app-container > div:first-child > div:last-child {
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin-top: 0 !important;
    margin-left: -28px !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    order: 0 !important;
  }
  
  /* Home and Logout buttons - smaller on mobile/Galaxy S23, same line as Host Dashboard title */
  .app-container .back-btn,
  button.back-btn[onclick*="goHome"],
  button.back-btn[onclick*="logout"],
  .app-container button[onclick*="goHome()"],
  .app-container button[onclick*="logout(event)"] {
    padding: 4px 8px !important;
    font-size: 0.65rem !important;
    min-height: 28px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    max-width: none !important;
    min-width: 50px !important;
    width: auto !important;
  }
  
  /* Ensure body and html don't clip content */
  body, html {
    overflow-x: visible !important;
    max-width: 100vw !important;
  }
  
  /* Ensure app-container doesn't clip */
  .app-container,
  .app-container * {
    overflow-x: visible !important;
  }
  
  /* Stat Cards - Make smaller and fit on one line on mobile */
  .app-container > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
  }
  
  .stat-card {
    padding: 6px 4px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  
  .stat-value {
    font-size: 1.2rem !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
  }
  
  .stat-label {
    font-size: 0.715rem !important; /* Increased by 10% from 0.65rem */
    line-height: 1.1 !important;
    margin: 0 !important;
  }
}

/* Volunteer Form - Mobile */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  #volunteerForm {
    padding: 15px 12px !important;
  }
  
  #volunteerForm label {
    font-size: 0.9rem !important;
  }
  
  #volunteerForm input,
  #volunteerForm select,
  #volunteerForm textarea {
    font-size: 1.058rem !important;
    padding: 12px !important;
  }
  
  /* Ensure placeholder text is readable on mobile */
  #volunteerForm input::placeholder,
  #volunteerForm textarea::placeholder {
    font-size: 1.058rem !important;
    color: #999 !important;
  }
  
  /* Make email and address fields full width on cell screens so placeholder text is fully visible */
  #volunteerForm fieldset:first-of-type > div {
    grid-template-columns: 1fr !important;
  }
  
  /* Make email and address fields span full width */
  #volunteerForm #vEmail,
  #volunteerForm #vAddress {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Match email and address placeholder font size to name placeholder on cell screens */
  #volunteerForm #vEmail::placeholder,
  #volunteerForm #vAddress::placeholder {
    font-size: 1.058rem !important;
    color: #999 !important;
  }
}

/* Skills Container Modal - Mobile */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  #skillsContainer {
    width: 95% !important;
    max-width: 95% !important;
    padding: 15px 12px !important;
    max-height: 85vh !important;
  }
}

/* Profile Lookup - Mobile */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  #profileLookup {
    padding: 20px 15px !important;
    width: 95% !important;
    max-width: 95% !important;
  }
}

/* Organization Help Flyout - Mobile */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  #orgHelpFlyout {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 15px 12px !important;
  }
}

/* Tab Button Tooltips/Flyouts - Mobile */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* Host Dashboard hover tooltip — keep all tab descriptors horizontal */
  #hover-tooltip,
  #hover-tooltip[data-host-tab-flyout="true"],
  #hover-tooltip[data-projects-tab="true"],
  #hover-tooltip[data-teams-tab="true"],
  #hover-tooltip[data-helper-tab="true"],
  #hover-tooltip[data-data-tab="true"] {
    max-width: calc(100vw - 24px) !important;
    width: max-content !important;
    font-size: 0.65rem !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    box-sizing: border-box !important;
  }
  
  /* Reduce tooltip arrow size on mobile */
  #hover-tooltip::before {
    border-left-width: 5px !important;
    border-right-width: 5px !important;
    border-bottom-width: 5px !important;
    top: -5px !important;
  }
  
  /* Tab flyouts: left-anchored arrow (matches horizontal layout) */
  #hover-tooltip[data-host-tab-flyout="true"]::before,
  #hover-tooltip[data-helper-tab="true"]::before,
  #hover-tooltip[data-projects-tab="true"]::before,
  #hover-tooltip[data-teams-tab="true"]::before,
  #hover-tooltip[data-data-tab="true"]::before {
    left: 20px !important;
    transform: translateX(0) !important;
    right: auto !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: #667eea !important;
  }
  
  /* Helper tab tooltip - position from lower left corner on Galaxy S23 */
  #hover-tooltip[data-helper-tab="true"] {
    transform: translateX(0) !important;
    margin-left: 0 !important;
    max-width: calc(100vw - 24px) !important;
    right: auto !important;
  }
  
  /* Reduce quick tooltip size on cell screens for tab buttons */
  .tab-button .quick-tooltip {
    max-width: min(180px, 80vw) !important;
    width: auto !important;
    font-size: 0.6rem !important;
    padding: 4px 6px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
    border-radius: 4px !important;
  }
  
  /* Ensure tooltips stay within viewport on cell screens */
  .tab-button {
    position: relative !important;
  }
  
  .tab-button .quick-tooltip {
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: min(180px, 80vw) !important;
    z-index: 10000 !important;
    /* Ensure tooltip doesn't go off screen */
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
  }
  
  /* Adjust tooltip arrow size on mobile */
  .tab-button .quick-tooltip::after {
    border-width: 4px !important;
  }
  
  /* All quick tooltips on cell screens - general reduction */
  .quick-tooltip {
    max-width: min(200px, 85vw) !important;
    font-size: 0.65rem !important;
    padding: 4px 8px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.3 !important;
  }
}

/* Tab Button Tooltips/Flyouts - Larger Mobile/Tablet Screens */
/* For iPhone XR, iPhone 14 Pro Max, Galaxy ZFold, Asus Zenbook Fold */
/* These devices have wider screens but should still show tooltips horizontally */
@media (min-width: 414px) and (max-width: 900px) {
  /* Host Dashboard hover tooltip - ensure short text stays on one line */
  #hover-tooltip {
    white-space: nowrap !important;
    max-width: none !important;
    width: auto !important;
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

/* Text Scaling for Readability */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  body {
    font-size: 14px !important;
  }
  
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.3rem !important; }
  h3 { font-size: 1.1rem !important; }
  h4 { font-size: 1rem !important; }
  #mhWelcomeScreen h1,
  #mhWelcomeTitle {
    font-size: 28px !important;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  }
  #mhWelcomeScreen p.mh-welcome-body {
    font-size: 16px !important;
  }
  #mhWelcomeScreen p.mh-welcome-paradigm {
    font-size: 18px !important;
    font-family: Georgia, 'Times New Roman', serif !important;
  }
  #mhWelcomeCard .mh-welcome-about {
    padding: 14px 14px 12px !important;
    margin-bottom: 22px !important;
  }
  #mhWelcomeCard .mh-welcome-about li {
    font-size: 15px !important;
  }
  #mhWelcomeContinue {
    font-size: 15px !important;
  }
}

/* Tour Tooltips - Mobile Optimization */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* Base styles for all tooltips on mobile */
  .step-tooltip {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 15px 12px !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
    position: fixed !important;
    box-sizing: border-box !important;
    /* Ensure tooltips are always visible */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    z-index: 10002 !important;
    pointer-events: auto !important;
  }
  
  /* Don't override positioning - let JavaScript handle it for both host and steps */
  /* JavaScript will center tooltips appropriately based on tour type and step */
  
  /* Step 0 step tooltip - set specific dimensions on cell screens (324x284) */
  /* Use body prefix for higher specificity to override JavaScript inline styles */
  body .step-tooltip[data-step="0"],
  body .step-tooltip[data-helper-step="0"],
  .step-tooltip[data-step="0"],
  .step-tooltip[data-helper-step="0"] {
    width: 324px !important;
    max-width: 324px !important;
    height: 284px !important;
    min-height: 284px !important;
    max-height: 284px !important;
    overflow-y: auto !important;
  }
  
  /* Step 0  banner — hug content; ~2px below Back to Tour / Next buttons */
  body .step-tooltip[data-host-step="0"],
  body .step-tooltip[data-host-step="0"][style],
  html body .step-tooltip[data-host-step="0"],
  html body .step-tooltip[data-host-step="0"][style],
  .step-tooltip[data-host-step="0"],
  .step-tooltip[data-host-step="0"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: fixed !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  body .step-tooltip[data-host-step="0"] h3,
  body .step-tooltip[data-host-step="0"][style] h3,
  .step-tooltip[data-host-step="0"] h3 {
    flex: 0 0 auto !important;
    margin: 0 0 4px 0 !important;
  }

  body .step-tooltip[data-host-step="0"] p,
  body .step-tooltip[data-host-step="0"][style] p,
  .step-tooltip[data-host-step="0"] p {
    flex: 0 0 auto !important;
    margin: 0 0 2px 0 !important;
    padding-bottom: 0 !important;
  }

  body .step-tooltip[data-host-step="0"] > div,
  body .step-tooltip[data-host-step="0"][style] > div,
  .step-tooltip[data-host-step="0"] > div {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Step 1 step tooltip - set specific dimensions on cell screens (324x190) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="1"],
  body .step-tooltip[data-host-step="1"][style],
  html body .step-tooltip[data-host-step="1"],
  html body .step-tooltip[data-host-step="1"][style],
  .step-tooltip[data-host-step="1"],
  .step-tooltip[data-host-step="1"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Step 1 step tooltip - set specific dimensions on cell screens (324x190) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="1"],
  body .step-tooltip[data-host-step="1"][style],
  html body .step-tooltip[data-host-step="1"],
  html body .step-tooltip[data-host-step="1"][style],
  .step-tooltip[data-host-step="1"],
  .step-tooltip[data-host-step="1"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Step 3 step tooltip - set specific dimensions on cell screens (324x190) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="3"],
  body .step-tooltip[data-host-step="3"][style],
  html body .step-tooltip[data-host-step="3"],
  html body .step-tooltip[data-host-step="3"][style],
  .step-tooltip[data-host-step="3"],
  .step-tooltip[data-host-step="3"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 60px)) !important;
  }
  
  /* Step 3 step tooltip - make specific words (Projects, Build Teams, Helpers, Manage Data) muted red on cell screens */
  .step-tooltip[data-host-step="3"] .tour-muted-red-word,
  .step-tooltip[data-host-step="3"] p span.tour-muted-red-word {
    color: #c85a5a !important;
  }
  
  /* Step 4 Projects Tab — hug content; ~2px below buttons (same idea as Step 23) */
  body .step-tooltip[data-host-step="4"],
  body .step-tooltip[data-host-step="4"][style],
  html body .step-tooltip[data-host-step="4"],
  html body .step-tooltip[data-host-step="4"][style],
  .step-tooltip[data-host-step="4"],
  .step-tooltip[data-host-step="4"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 24px)) !important;
    position: fixed !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  body .step-tooltip[data-host-step="4"] h3,
  body .step-tooltip[data-host-step="4"][style] h3,
  .step-tooltip[data-host-step="4"] h3 {
    flex: 0 0 auto !important;
    margin: 0 0 4px 0 !important;
  }

  body .step-tooltip[data-host-step="4"] p,
  body .step-tooltip[data-host-step="4"][style] p,
  .step-tooltip[data-host-step="4"] p {
    flex: 0 0 auto !important;
    margin: 0 0 2px 0 !important;
    padding-bottom: 0 !important;
  }

  body .step-tooltip[data-host-step="4"] > div,
  body .step-tooltip[data-host-step="4"][style] > div,
  .step-tooltip[data-host-step="4"] > div {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  
  /* Step 5 step — content-hug (~2px below buttons) */
  body .step-tooltip[data-host-step="5"],
  body .step-tooltip[data-host-step="5"][style],
  .step-tooltip[data-host-step="5"],
  .step-tooltip[data-host-step="5"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  body .step-tooltip[data-host-step="5"] h3,
  body .step-tooltip[data-host-step="5"][style] h3,
  .step-tooltip[data-host-step="5"] h3 {
    flex: 0 0 auto !important;
    margin: 0 0 4px 0 !important;
  }
  body .step-tooltip[data-host-step="5"] p,
  body .step-tooltip[data-host-step="5"][style] p,
  .step-tooltip[data-host-step="5"] p {
    flex: 0 0 auto !important;
    margin: 0 0 2px 0 !important;
    padding-bottom: 0 !important;
  }
  body .step-tooltip[data-host-step="5"] > div,
  body .step-tooltip[data-host-step="5"][style] > div,
  .step-tooltip[data-host-step="5"] > div {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }


  /* Step 15 step — content-hug (~2px below buttons) */
  body .step-tooltip[data-host-step="15"],
  body .step-tooltip[data-host-step="15"][style],
  .step-tooltip[data-host-step="15"],
  .step-tooltip[data-host-step="15"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    position: fixed !important;
    top: 58px !important;
    left: 20px !important;
    transform: none !important;
  }

  body .step-tooltip[data-host-step="15"] h3,
  body .step-tooltip[data-host-step="15"][style] h3,
  .step-tooltip[data-host-step="15"] h3 {
    flex: 0 0 auto !important;
    margin: 0 0 4px 0 !important;
  }
  body .step-tooltip[data-host-step="15"] p,
  body .step-tooltip[data-host-step="15"][style] p,
  .step-tooltip[data-host-step="15"] p {
    flex: 0 0 auto !important;
    margin: 0 0 2px 0 !important;
    padding-bottom: 0 !important;
  }
  body .step-tooltip[data-host-step="15"] > div,
  body .step-tooltip[data-host-step="15"][style] > div,
  .step-tooltip[data-host-step="15"] > div {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Galaxy S23: project form must not be a nested 1500px scroll trap — dashboard scrolls */
  #projectForm,
  body #projectForm,
  #hostDashboardContainer #projectForm {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    overflow-y: visible !important;
  }
  #hostDashboardContainer,
  body #hostDashboardContainer,
  .app-container {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  /* Steps 10–15: tip at top so pulsed form fields stay visible in the band below */
  body .step-tooltip[data-host-step="10"],
  body .step-tooltip[data-host-step="10"][style],
  body .step-tooltip[data-host-step="11"],
  body .step-tooltip[data-host-step="11"][style],
  body .step-tooltip[data-host-step="12"],
  body .step-tooltip[data-host-step="12"][style],
  body .step-tooltip[data-host-step="13"],
  body .step-tooltip[data-host-step="13"][style],
  body .step-tooltip[data-host-step="14"],
  body .step-tooltip[data-host-step="14"][style],
  body .step-tooltip[data-host-step="15"],
  body .step-tooltip[data-host-step="15"][style],
  .step-tooltip[data-host-step="10"],
  .step-tooltip[data-host-step="11"],
  .step-tooltip[data-host-step="12"],
  .step-tooltip[data-host-step="13"],
  .step-tooltip[data-host-step="14"],
  .step-tooltip[data-host-step="15"] {
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    position: fixed !important;
  }

  /*  Step 15: keep Start + End side-by-side so pulse wraps both and they fit with the tip */
  #singleDateTimeFields.mh-host-tour-step15-time,
  body #singleDateTimeFields.mh-host-tour-step15-time {
    padding: 8px 6px 10px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
  }
  #singleDateTimeFields.mh-host-tour-step15-time .time-range-container,
  body #singleDateTimeFields.mh-host-tour-step15-time .time-range-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  #singleDateTimeFields.mh-host-tour-step15-time .time-picker-group,
  body #singleDateTimeFields.mh-host-tour-step15-time .time-picker-group {
    margin-bottom: 0 !important;
    flex: 0 0 auto !important;
  }
  #singleDateTimeFields.mh-host-tour-step15-time .circular-time-picker,
  body #singleDateTimeFields.mh-host-tour-step15-time .circular-time-picker {
    width: 84px !important;
    height: 84px !important;
    margin: 2px auto !important;
  }
  #singleDateTimeFields.mh-host-tour-step15-time .time-range-separator,
  body #singleDateTimeFields.mh-host-tour-step15-time .time-range-separator {
    transform: none !important;
    writing-mode: horizontal-tb !important;
    margin: 28px 2px 0 !important;
    align-self: center !important;
  }


  /* Step 19 step — content-hug (~2px below buttons) */
  body .step-tooltip[data-host-step="19"],
  body .step-tooltip[data-host-step="19"][style],
  .step-tooltip[data-host-step="19"],
  .step-tooltip[data-host-step="19"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    position: fixed !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body .step-tooltip[data-host-step="19"] h3,
  body .step-tooltip[data-host-step="19"][style] h3,
  .step-tooltip[data-host-step="19"] h3 {
    flex: 0 0 auto !important;
    margin: 0 0 4px 0 !important;
  }
  body .step-tooltip[data-host-step="19"] p,
  body .step-tooltip[data-host-step="19"][style] p,
  .step-tooltip[data-host-step="19"] p {
    flex: 0 0 auto !important;
    margin: 0 0 2px 0 !important;
    padding-bottom: 0 !important;
  }
  body .step-tooltip[data-host-step="19"] > div,
  body .step-tooltip[data-host-step="19"][style] > div,
  .step-tooltip[data-host-step="19"] > div {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }


  /* Step 21 step — content-hug (~2px below buttons) */
  body .step-tooltip[data-host-step="21"],
  body .step-tooltip[data-host-step="21"][style],
  .step-tooltip[data-host-step="21"],
  .step-tooltip[data-host-step="21"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
  }

  body .step-tooltip[data-host-step="21"] h3,
  body .step-tooltip[data-host-step="21"][style] h3,
  .step-tooltip[data-host-step="21"] h3 {
    flex: 0 0 auto !important;
    margin: 0 0 4px 0 !important;
  }
  body .step-tooltip[data-host-step="21"] p,
  body .step-tooltip[data-host-step="21"][style] p,
  .step-tooltip[data-host-step="21"] p {
    flex: 0 0 auto !important;
    margin: 0 0 2px 0 !important;
    padding-bottom: 0 !important;
  }
  body .step-tooltip[data-host-step="21"] > div,
  body .step-tooltip[data-host-step="21"][style] > div,
  .step-tooltip[data-host-step="21"] > div {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }


  /* Step 25 step — content-hug (~2px below buttons) */
  body .step-tooltip[data-host-step="25"],
  body .step-tooltip[data-host-step="25"][style],
  .step-tooltip[data-host-step="25"],
  .step-tooltip[data-host-step="25"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    position: fixed !important;
    top: 100px !important;
    right: 20px !important;
    left: auto !important;
    transform: none !important;
  }

  body .step-tooltip[data-host-step="25"] h3,
  body .step-tooltip[data-host-step="25"][style] h3,
  .step-tooltip[data-host-step="25"] h3 {
    flex: 0 0 auto !important;
    margin: 0 0 4px 0 !important;
  }
  body .step-tooltip[data-host-step="25"] p,
  body .step-tooltip[data-host-step="25"][style] p,
  .step-tooltip[data-host-step="25"] p {
    flex: 0 0 auto !important;
    margin: 0 0 2px 0 !important;
    padding-bottom: 0 !important;
  }
  body .step-tooltip[data-host-step="25"] > div,
  body .step-tooltip[data-host-step="25"][style] > div,
  .step-tooltip[data-host-step="25"] > div {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

/* Step 6 Helpers Tab — hug content; ~2px below nav buttons (Galaxy S23 / cell) */
  body .step-tooltip[data-host-step="6"],
  body .step-tooltip[data-host-step="6"][style],
  html body .step-tooltip[data-host-step="6"],
  html body .step-tooltip[data-host-step="6"][style],
  .step-tooltip[data-host-step="6"],
  .step-tooltip[data-host-step="6"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: fixed !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  body .step-tooltip[data-host-step="6"] h3,
  body .step-tooltip[data-host-step="6"][style] h3,
  .step-tooltip[data-host-step="6"] h3 {
    flex: 0 0 auto !important;
    margin: 0 0 4px 0 !important;
  }

  body .step-tooltip[data-host-step="6"] p,
  body .step-tooltip[data-host-step="6"][style] p,
  .step-tooltip[data-host-step="6"] p {
    flex: 0 0 auto !important;
    margin: 0 0 2px 0 !important;
    padding-bottom: 0 !important;
  }

  body .step-tooltip[data-host-step="6"] > div,
  body .step-tooltip[data-host-step="6"][style] > div,
  .step-tooltip[data-host-step="6"] > div {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Step 20 step tooltip - centered on Galaxy S23 / cell screens (324x190) */
  body .step-tooltip[data-host-step="20"],
  body .step-tooltip[data-host-step="20"][style],
  html body .step-tooltip[data-host-step="20"],
  html body .step-tooltip[data-host-step="20"][style],
  .step-tooltip[data-host-step="20"],
  .step-tooltip[data-host-step="20"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }
  
  /* Step 7 step tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="7"],
  body .step-tooltip[data-host-step="7"][style],
  html body .step-tooltip[data-host-step="7"],
  html body .step-tooltip[data-host-step="7"][style],
  .step-tooltip[data-host-step="7"],
  .step-tooltip[data-host-step="7"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 284px)) !important;
  }
  
  /* Step 8 step tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="8"],
  body .step-tooltip[data-host-step="8"][style],
  html body .step-tooltip[data-host-step="8"],
  html body .step-tooltip[data-host-step="8"][style],
  .step-tooltip[data-host-step="8"],
  .step-tooltip[data-host-step="8"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
        height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 192px)) !important; /* Lowered by 50px total (142px + 25px + 25px = 192px) */
  }

  /* Galaxy S23: Step 8 modal higher so it does not cover the name field */
  @media (max-width: 480px) {
    body .step-tooltip[data-host-step="8"],
    body .step-tooltip[data-host-step="8"][style],
    html body .step-tooltip[data-host-step="8"],
    html body .step-tooltip[data-host-step="8"][style],
    .step-tooltip[data-host-step="8"],
    .step-tooltip[data-host-step="8"][style] {
      transform: translate(-50%, calc(-50% + 40px)) !important;
    }
  }
  
  /* Ensure buttons are visible and clickable for step 8 */
  body .step-tooltip[data-host-step="8"] button,
  body .step-tooltip[data-host-step="8"][style] button,
  html body .step-tooltip[data-host-step="8"] button,
  html body .step-tooltip[data-host-step="8"][style] button,
  .step-tooltip[data-host-step="8"] button,
  .step-tooltip[data-host-step="8"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    flex-direction: unset !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure buttons are visible and clickable for step 9 */
  body .step-tooltip[data-host-step="9"] button,
  body .step-tooltip[data-host-step="9"][style] button,
  html body .step-tooltip[data-host-step="9"] button,
  html body .step-tooltip[data-host-step="9"][style] button,
  .step-tooltip[data-host-step="9"] button,
  .step-tooltip[data-host-step="9"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    flex-direction: unset !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure buttons are visible and clickable for step 10 */
  body .step-tooltip[data-host-step="10"] button,
  body .step-tooltip[data-host-step="10"][style] button,
  html body .step-tooltip[data-host-step="10"] button,
  html body .step-tooltip[data-host-step="10"][style] button,
  .step-tooltip[data-host-step="10"] button,
  .step-tooltip[data-host-step="10"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    flex-direction: unset !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure buttons are visible and clickable for step 11 */
  body .step-tooltip[data-host-step="11"] button,
  body .step-tooltip[data-host-step="11"][style] button,
  html body .step-tooltip[data-host-step="11"] button,
  html body .step-tooltip[data-host-step="11"][style] button,
  .step-tooltip[data-host-step="11"] button,
  .step-tooltip[data-host-step="11"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    flex-direction: unset !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure buttons are visible and clickable for step 12 */
  body .step-tooltip[data-host-step="12"] button,
  body .step-tooltip[data-host-step="12"][style] button,
  html body .step-tooltip[data-host-step="12"] button,
  html body .step-tooltip[data-host-step="12"][style] button,
  .step-tooltip[data-host-step="12"] button,
  .step-tooltip[data-host-step="12"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    flex-direction: unset !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  /* Step 14 step tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="14"],
  body .step-tooltip[data-host-step="14"][style],
  html body .step-tooltip[data-host-step="14"],
  html body .step-tooltip[data-host-step="14"][style],
  .step-tooltip[data-host-step="14"],
  .step-tooltip[data-host-step="14"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
        height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure buttons are visible and clickable for step 14 */
  body .step-tooltip[data-host-step="14"] button,
  body .step-tooltip[data-host-step="14"][style] button,
  html body .step-tooltip[data-host-step="14"] button,
  html body .step-tooltip[data-host-step="14"][style] button,
  .step-tooltip[data-host-step="14"] button,
  .step-tooltip[data-host-step="14"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    flex-direction: unset !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  /* Step 2 step tooltip - set specific dimensions on cell screens (324x211) */
  body .step-tooltip[data-step="2"],
  body .step-tooltip[data-helper-step="2"],
  .step-tooltip[data-step="2"],
  .step-tooltip[data-helper-step="2"] {
    width: 324px !important;
    max-width: 324px !important;
    height: 211px !important;
    min-height: 211px !important;
    max-height: 211px !important;
    overflow-y: auto !important;
  }
  
  /* Step 5 step tooltip - set specific dimensions on cell screens (324x160) */
  body .step-tooltip[data-step="5"],
  body .step-tooltip[data-helper-step="5"],
  .step-tooltip[data-step="5"],
  .step-tooltip[data-helper-step="5"] {
    width: 324px !important;
    max-width: 324px !important;
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    overflow-y: auto !important;
  }
  
  /* Make tooltip content scrollable while keeping buttons visible */
  .step-tooltip .tour-content {
    max-height: calc(75vh - 100px) !important;
    overflow-y: auto !important;
    padding-bottom: 10px !important;
  }
  
  .step-tooltip h3 {
    font-size: 1rem !important;
    margin: 0 0 8px 0 !important;
  }
  
  .step-tooltip p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
  }
  
  /* Ensure buttons are always visible and accessible at bottom */
  .tour-buttons {
    position: sticky !important;
    bottom: 0 !important;
    background: white !important;
    padding: 12px 0 0 0 !important;
    margin-top: 12px !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
  }

  /*  Previous must stay tappable on Galaxy S23 / cell screens */
  .step-tooltip .tour-prev-step-btn,
  .step-tooltip .tour-prev-btn,
  .step-tooltip .tour-end-btn,
  .step-tooltip .tour-next-btn {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10010 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  
  .tour-btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
    flex: 1 1 auto !important;
    min-width: 100px !important;
  }
  
  /* Step 16 step tooltip - set specific dimensions on cell screens (324x213) and position at top */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="16"],
  body .step-tooltip[data-host-step="16"][style],
  html body .step-tooltip[data-host-step="16"],
  html body .step-tooltip[data-host-step="16"][style],
  .step-tooltip[data-host-step="16"],
  .step-tooltip[data-host-step="16"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
      height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    position: fixed !important;
    padding: 8px 10px 2px 10px !important;
  }
  
  /* Step 16: Compact text styling for cell screens - reduce font sizes, margins, and line heights */
  body .step-tooltip[data-host-step="16"] h3,
  body .step-tooltip[data-host-step="16"][style] h3,
  html body .step-tooltip[data-host-step="16"] h3,
  html body .step-tooltip[data-host-step="16"][style] h3,
  .step-tooltip[data-host-step="16"] h3,
  .step-tooltip[data-host-step="16"][style] h3 {
    font-size: 0.8rem !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.05 !important;
    padding: 0 !important;
  }
  
  body .step-tooltip[data-host-step="16"] p,
  body .step-tooltip[data-host-step="16"][style] p,
  html body .step-tooltip[data-host-step="16"] p,
  html body .step-tooltip[data-host-step="16"][style] p,
  .step-tooltip[data-host-step="16"] p,
  .step-tooltip[data-host-step="16"][style] p {
    font-size: 0.65rem !important;
    line-height: 1.15 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }
  
  body .step-tooltip[data-host-step="16"] p strong,
  body .step-tooltip[data-host-step="16"][style] p strong,
  html body .step-tooltip[data-host-step="16"] p strong,
  html body .step-tooltip[data-host-step="16"][style] p strong,
  .step-tooltip[data-host-step="16"] p strong,
  .step-tooltip[data-host-step="16"][style] p strong {
    font-size: 0.67rem !important;
    font-weight: 600 !important;
  }
  
  /* Step 16: Compact button container */
  body .step-tooltip[data-host-step="16"] > div,
  body .step-tooltip[data-host-step="16"][style] > div,
  html body .step-tooltip[data-host-step="16"] > div,
  html body .step-tooltip[data-host-step="16"][style] > div,
  .step-tooltip[data-host-step="16"] > div,
  .step-tooltip[data-host-step="16"][style] > div {
    margin-top: 3px !important;
    margin-bottom: 0 !important;
    padding-top: 3px !important;
    padding-bottom: 0 !important;
    gap: 3px !important;
  }
  
  /* Step 16: Compact buttons */
  body .step-tooltip[data-host-step="16"] button,
  body .step-tooltip[data-host-step="16"][style] button,
  html body .step-tooltip[data-host-step="16"] button,
  html body .step-tooltip[data-host-step="16"][style] button,
  .step-tooltip[data-host-step="16"] button,
  .step-tooltip[data-host-step="16"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 3px 5px !important;
    font-size: 0.65rem !important;
    min-height: 24px !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    overflow: visible !important;
  }
  
  /* Step 0  banner — hug content; ~2px below Back to Tour / Next buttons */
  body .step-tooltip[data-host-step="0"],
  body .step-tooltip[data-host-step="0"][style],
  html body .step-tooltip[data-host-step="0"],
  html body .step-tooltip[data-host-step="0"][style],
  .step-tooltip[data-host-step="0"],
  .step-tooltip[data-host-step="0"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: fixed !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  body .step-tooltip[data-host-step="0"] h3,
  body .step-tooltip[data-host-step="0"][style] h3,
  .step-tooltip[data-host-step="0"] h3 {
    flex: 0 0 auto !important;
    margin: 0 0 4px 0 !important;
  }

  body .step-tooltip[data-host-step="0"] p,
  body .step-tooltip[data-host-step="0"][style] p,
  .step-tooltip[data-host-step="0"] p {
    flex: 0 0 auto !important;
    margin: 0 0 2px 0 !important;
    padding-bottom: 0 !important;
  }

  body .step-tooltip[data-host-step="0"] > div,
  body .step-tooltip[data-host-step="0"][style] > div,
  .step-tooltip[data-host-step="0"] > div {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Step 3 step tooltip - set specific dimensions on cell screens (324x190) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="3"],
  body .step-tooltip[data-host-step="3"][style],
  html body .step-tooltip[data-host-step="3"],
  html body .step-tooltip[data-host-step="3"][style],
  .step-tooltip[data-host-step="3"],
  .step-tooltip[data-host-step="3"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 60px)) !important;
  }
  
  /* Step 3 step tooltip - make specific words (Projects, Build Teams, Helpers, Manage Data) muted red on cell screens */
  .step-tooltip[data-host-step="3"] .tour-muted-red-word,
  .step-tooltip[data-host-step="3"] p span.tour-muted-red-word {
    color: #c85a5a !important;
  }
  
  /* Step 4 Projects Tab — hug content; ~2px below buttons (same idea as Step 23) */
  body .step-tooltip[data-host-step="4"],
  body .step-tooltip[data-host-step="4"][style],
  html body .step-tooltip[data-host-step="4"],
  html body .step-tooltip[data-host-step="4"][style],
  .step-tooltip[data-host-step="4"],
  .step-tooltip[data-host-step="4"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 24px)) !important;
    position: fixed !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  body .step-tooltip[data-host-step="4"] h3,
  body .step-tooltip[data-host-step="4"][style] h3,
  .step-tooltip[data-host-step="4"] h3 {
    flex: 0 0 auto !important;
    margin: 0 0 4px 0 !important;
  }

  body .step-tooltip[data-host-step="4"] p,
  body .step-tooltip[data-host-step="4"][style] p,
  .step-tooltip[data-host-step="4"] p {
    flex: 0 0 auto !important;
    margin: 0 0 2px 0 !important;
    padding-bottom: 0 !important;
  }

  body .step-tooltip[data-host-step="4"] > div,
  body .step-tooltip[data-host-step="4"][style] > div,
  .step-tooltip[data-host-step="4"] > div {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Step 6 Helpers Tab — hug content; ~2px below nav buttons (Galaxy S23 / cell) */
  body .step-tooltip[data-host-step="6"],
  body .step-tooltip[data-host-step="6"][style],
  html body .step-tooltip[data-host-step="6"],
  html body .step-tooltip[data-host-step="6"][style],
  .step-tooltip[data-host-step="6"],
  .step-tooltip[data-host-step="6"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: fixed !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  body .step-tooltip[data-host-step="6"] h3,
  body .step-tooltip[data-host-step="6"][style] h3,
  .step-tooltip[data-host-step="6"] h3 {
    flex: 0 0 auto !important;
    margin: 0 0 4px 0 !important;
  }

  body .step-tooltip[data-host-step="6"] p,
  body .step-tooltip[data-host-step="6"][style] p,
  .step-tooltip[data-host-step="6"] p {
    flex: 0 0 auto !important;
    margin: 0 0 2px 0 !important;
    padding-bottom: 0 !important;
  }

  body .step-tooltip[data-host-step="6"] > div,
  body .step-tooltip[data-host-step="6"][style] > div,
  .step-tooltip[data-host-step="6"] > div {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Step 20 step tooltip - centered on Galaxy S23 / cell screens (324x190) */
  body .step-tooltip[data-host-step="20"],
  body .step-tooltip[data-host-step="20"][style],
  html body .step-tooltip[data-host-step="20"],
  html body .step-tooltip[data-host-step="20"][style],
  .step-tooltip[data-host-step="20"],
  .step-tooltip[data-host-step="20"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }
  
  /* Step 7 step tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="7"],
  body .step-tooltip[data-host-step="7"][style],
  html body .step-tooltip[data-host-step="7"],
  html body .step-tooltip[data-host-step="7"][style],
  .step-tooltip[data-host-step="7"],
  .step-tooltip[data-host-step="7"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 284px)) !important;
  }
  
  /* Step 8 step tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="8"],
  body .step-tooltip[data-host-step="8"][style],
  html body .step-tooltip[data-host-step="8"],
  html body .step-tooltip[data-host-step="8"][style],
  .step-tooltip[data-host-step="8"],
  .step-tooltip[data-host-step="8"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
        height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 192px)) !important; /* Lowered by 50px total (142px + 25px + 25px = 192px) */
  }

  /* Galaxy S23: Step 8 modal higher so it does not cover the name field */
  @media (max-width: 480px) {
    body .step-tooltip[data-host-step="8"],
    body .step-tooltip[data-host-step="8"][style],
    html body .step-tooltip[data-host-step="8"],
    html body .step-tooltip[data-host-step="8"][style],
    .step-tooltip[data-host-step="8"],
    .step-tooltip[data-host-step="8"][style] {
      transform: translate(-50%, calc(-50% + 40px)) !important;
    }
  }
  
  /* Ensure buttons are visible and clickable for step 8 */
  body .step-tooltip[data-host-step="8"] button,
  body .step-tooltip[data-host-step="8"][style] button,
  html body .step-tooltip[data-host-step="8"] button,
  html body .step-tooltip[data-host-step="8"][style] button,
  .step-tooltip[data-host-step="8"] button,
  .step-tooltip[data-host-step="8"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    flex-direction: unset !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure buttons are visible and clickable for step 9 */
  body .step-tooltip[data-host-step="9"] button,
  body .step-tooltip[data-host-step="9"][style] button,
  html body .step-tooltip[data-host-step="9"] button,
  html body .step-tooltip[data-host-step="9"][style] button,
  .step-tooltip[data-host-step="9"] button,
  .step-tooltip[data-host-step="9"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    flex-direction: unset !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure buttons are visible and clickable for step 10 */
  body .step-tooltip[data-host-step="10"] button,
  body .step-tooltip[data-host-step="10"][style] button,
  html body .step-tooltip[data-host-step="10"] button,
  html body .step-tooltip[data-host-step="10"][style] button,
  .step-tooltip[data-host-step="10"] button,
  .step-tooltip[data-host-step="10"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    flex-direction: unset !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure buttons are visible and clickable for step 11 */
  body .step-tooltip[data-host-step="11"] button,
  body .step-tooltip[data-host-step="11"][style] button,
  html body .step-tooltip[data-host-step="11"] button,
  html body .step-tooltip[data-host-step="11"][style] button,
  .step-tooltip[data-host-step="11"] button,
  .step-tooltip[data-host-step="11"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    flex-direction: unset !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure buttons are visible and clickable for step 12 */
  body .step-tooltip[data-host-step="12"] button,
  body .step-tooltip[data-host-step="12"][style] button,
  html body .step-tooltip[data-host-step="12"] button,
  html body .step-tooltip[data-host-step="12"][style] button,
  .step-tooltip[data-host-step="12"] button,
  .step-tooltip[data-host-step="12"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    flex-direction: unset !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  /* Step 14 step tooltip - set specific dimensions on cell screens (324x142) */
  /* Use maximum specificity to override JavaScript inline styles */
  body .step-tooltip[data-host-step="14"],
  body .step-tooltip[data-host-step="14"][style],
  html body .step-tooltip[data-host-step="14"],
  html body .step-tooltip[data-host-step="14"][style],
  .step-tooltip[data-host-step="14"],
  .step-tooltip[data-host-step="14"][style] {
    width: 324px !important;
    max-width: 324px !important;
    min-width: 324px !important;
        height: fit-content !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 8px 10px 2px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure buttons are visible and clickable for step 14 */
  body .step-tooltip[data-host-step="14"] button,
  body .step-tooltip[data-host-step="14"][style] button,
  html body .step-tooltip[data-host-step="14"] button,
  html body .step-tooltip[data-host-step="14"][style] button,
  .step-tooltip[data-host-step="14"] button,
  .step-tooltip[data-host-step="14"][style] button {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
    flex-direction: unset !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  /* Step 2 step tooltip - set specific dimensions on cell screens (324x211) */
  body .step-tooltip[data-step="2"],
  body .step-tooltip[data-helper-step="2"],
  .step-tooltip[data-step="2"],
  .step-tooltip[data-helper-step="2"] {
    width: 324px !important;
    max-width: 324px !important;
    height: 211px !important;
    min-height: 211px !important;
    max-height: 211px !important;
    overflow-y: auto !important;
  }
  
  /* Step 5 step tooltip - set specific dimensions on cell screens (324x160) */
  body .step-tooltip[data-step="5"],
  body .step-tooltip[data-helper-step="5"],
  .step-tooltip[data-step="5"],
  .step-tooltip[data-helper-step="5"] {
    width: 324px !important;
    max-width: 324px !important;
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    overflow-y: auto !important;
  }
  
  .step-tooltip[data-host-step="3"] > div:last-child,
  .step-tooltip[data-host-step="3"] > div[style*="display: flex"],
  .step-tooltip[data-host-step="3"] > div[style*="justify-content"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 1px !important;
    margin-top: 1px !important;
  }
  
  .step-tooltip[data-host-step="3"] *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .step-tooltip[data-host-step="3"] h3 {
    font-size: 0.75rem !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.1 !important;
  }
  
  .step-tooltip[data-host-step="3"] p {
    font-size: 0.65rem !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.15 !important;
  }
  
  .step-tooltip[data-host-step="3"] > div {
    padding: 1px 0 0 0 !important;
    margin-top: 1px !important;
  }
  
  .step-tooltip[data-host-step="3"] button {
    padding: 4px 6px !important;
    font-size: 0.65rem !important;
    min-height: 26px !important;
    min-width: 55px !important;
  }
  
  /* Step 3: Larger on very small screens with all content visible */
  .step-tooltip[data-step="3"] {
    max-height: 32vh !important;
    width: 85vw !important;
    max-width: 85vw !important;
    padding: 6px 6px !important;
    top: 12px !important;
    overflow-y: auto !important;
  }
  
  .step-tooltip[data-step="3"] h3 {
    font-size: 0.8rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.15 !important;
  }
  
  .step-tooltip[data-step="3"] p {
    font-size: 0.7rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.25 !important;
    overflow: visible !important;
    display: block !important;
  }
  
  .step-tooltip[data-step="3"] button {
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
    min-height: 30px !important;
    min-width: 60px !important;
  }
  
  /* Step 4: Larger on very small screens with all content visible */
  .step-tooltip[data-step="4"] {
    max-height: 32vh !important;
    width: 85vw !important;
    max-width: 85vw !important;
    padding: 6px 6px !important;
    top: 4px !important;
    overflow-y: auto !important;
  }
  
  .step-tooltip[data-step="4"] h3 {
    font-size: 0.8rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.15 !important;
  }
  
  .step-tooltip[data-step="4"] p {
    font-size: 0.7rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.25 !important;
    overflow: visible !important;
    display: block !important;
  }
  
  .step-tooltip[data-step="4"] button {
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
    min-height: 30px !important;
    min-width: 60px !important;
  }
  
  /* Step 5: Larger on very small screens with all content visible */
  .step-tooltip[data-step="5"] {
    height: auto !important;
    max-height: 28vh !important;
    min-height: auto !important;
    width: 80vw !important;
    max-width: 80vw !important;
    padding: 6px 6px !important;
    top: 40% !important;
    transform: translate(-50%, -50%) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }
  
  .step-tooltip[data-step="5"] h3 {
    font-size: 0.8rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.15 !important;
  }
  
  .step-tooltip[data-step="5"] p {
    font-size: 0.7rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.25 !important;
    overflow: visible !important;
    display: block !important;
  }
  
  .step-tooltip[data-step="5"] button {
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
    min-height: 30px !important;
    min-width: 60px !important;
  }
  
  /* Step 6: Larger on very small screens — keep size, distribute content */
  .step-tooltip[data-step="6"],
  .step-tooltip[data-helper-step="6"] {
    height: 28vh !important;
    max-height: 28vh !important;
    min-height: 28vh !important;
    width: 80vw !important;
    max-width: 80vw !important;
    padding: 10px 10px !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  
  .step-tooltip[data-step="6"] h3,
  .step-tooltip[data-helper-step="6"] h3 {
    font-size: 0.8rem !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.2 !important;
    flex-shrink: 0 !important;
  }
  
  .step-tooltip[data-step="6"] p,
  .step-tooltip[data-helper-step="6"] p {
    font-size: 0.7rem !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
  }
  
  .step-tooltip[data-step="6"] > div,
  .step-tooltip[data-helper-step="6"] > div {
    margin-top: auto !important;
    padding-top: 12px !important;
    flex-shrink: 0 !important;
  }
  
  .step-tooltip[data-step="6"] button,
  .step-tooltip[data-helper-step="6"] button {
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
    min-height: 30px !important;
    min-width: 60px !important;
  }
}

/* Prevent horizontal scrolling */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  body,
  html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  *:not(html):not(body) {
    max-width: 100% !important;
  }
  #customTimePickerModal,
  #customTimePickerModal input,
  #customTimePickerModal select,
  input[type="time"] {
    max-width: none !important;
  }
  #mhWelcomeScreen,
  #mhWelcomeScreen * {
    max-width: none !important;
  }
  #mhWelcomeCard {
    max-width: 420px !important;
  }
  #mhWelcomeCard .mh-welcome-body,
  #mhWelcomeCard .mh-welcome-paradigm,
  #mhWelcomeCard .mh-welcome-about {
    max-width: 360px !important;
  }
  #mhWelcomeContinue {
    max-width: 240px !important;
  }
}

/* Availability Checkboxes - Mobile Optimization */
/* Override time-range-container column layout from style-optimized-v2.css */
/* Keep "to" separator horizontal on all mobile screens */
@media (max-width: 768px) {
  .time-range-container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    align-items: center !important;
  }
  
  .time-range-separator {
    transform: none !important;
    rotate: 0deg !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    margin: 0 8px !important;
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: 1rem !important;
  }
}

/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* Availability fieldset */
  #availabilityFieldset {
    padding: 12px 10px !important;
  }
  
  /* Availability checkboxes container */
  #availabilityCheckboxes {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
    font-size: 0.75rem !important;
  }
  
  /* Availability checkbox labels */
  #availabilityCheckboxes label {
    font-size: 0.75rem !important;
    gap: 4px !important;
    font-weight: 600 !important;
    padding: 2px 0 !important;
  }
  
  /* Availability checkboxes - remove scale, make smaller */
  #availabilityCheckboxes input[type="checkbox"] {
    width: 1em !important;
    height: 1em !important;
    transform: none !important;
    min-width: 16px !important;
    min-height: 16px !important;
    cursor: pointer !important;
  }
  
  /* Edit availability checkboxes (profile edit mode) — one horizontal row */
  #editAvailabilityCheckboxes,
  #editAvailabilityCheckboxes.edit-availability-days {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    font-size: 0.68rem !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  #editAvailabilityCheckboxes label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    font-size: 0.68rem !important;
    gap: 3px !important;
    font-weight: 700 !important;
    flex: 1 1 0 !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    text-align: center !important;
    color: #0f172a !important;
  }

  #editAvailabilityCheckboxes label span {
    font-size: 0.68rem !important;
    line-height: 1.1 !important;
  }
  
  #editAvailabilityCheckboxes input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    transform: none !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
  }
}

@media (max-width: 360px) {
  /* Very small screens - make checkboxes even smaller */
  #availabilityCheckboxes {
    gap: 2px !important;
    font-size: 0.7rem !important;
  }
  
  #availabilityCheckboxes label {
    font-size: 0.7rem !important;
    gap: 3px !important;
  }
  
  #availabilityCheckboxes input[type="checkbox"] {
    width: 0.9em !important;
    height: 0.9em !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }
  
  #editAvailabilityCheckboxes {
    gap: 2px !important;
    font-size: 0.62rem !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
  
  #editAvailabilityCheckboxes label {
    font-size: 0.62rem !important;
    gap: 2px !important;
  }

  #editAvailabilityCheckboxes label span {
    font-size: 0.62rem !important;
  }
  
  #editAvailabilityCheckboxes input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }
  
  /* Availability time picker containers (shown when days are selected) - COMPACT */
  .day-availability-container {
    padding: 8px 6px !important;
    margin-bottom: 8px !important;
  }
  
  .day-header {
    margin-bottom: 6px !important;
  }
  
  .day-name {
    font-size: 0.8rem !important;
  }
  
  .day-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.65rem !important;
  }
  
  .remove-day-btn {
    width: 24px !important;
    height: 24px !important;
    font-size: 1rem !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }
  
  /* Time picker containers - vertical layout for compact mobile */
  .time-range-container {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  
  .time-picker-group {
    font-size: 0.7rem !important;
    gap: 3px !important;
    margin-bottom: 6px !important;
  }
  
  .time-label {
    font-size: 0.7rem !important;
    margin-bottom: 2px !important;
  }
  
  .circular-time-picker {
    width: 90px !important;
    height: 90px !important;
  }
  
  .time-display {
    font-size: 0.8rem !important;
  }
  
  /* Force separator to stay horizontal - override rotation from style-optimized-v2.css */
  .time-range-separator {
    font-size: 0.85rem !important;
    transform: none !important;
    rotate: 0deg !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    margin: 0 8px !important;
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 360px) {
  /* Very small screens - keep separator horizontal even with smaller gap */
  .time-range-container {
    gap: 6px !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  
  .time-range-separator {
    font-size: 0.8rem !important;
    margin: 0 4px !important;
    transform: none !important;
    rotate: 0deg !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
    display: inline-block !important;
    line-height: 1.2 !important;
  }
  
  /* Host Dashboard Header - Very small screens: same line as title, smaller buttons */
  .app-container > div:first-child {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    padding-bottom: 5px !important;
    margin-bottom: 3px !important;
    overflow: visible !important;
  }
  
  .app-container > div:first-child > div:first-child {
    gap: 4px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  
  .app-container > div:first-child > div:first-child {
    max-width: 100% !important;
    width: auto !important;
  }
  
  .app-container > div:first-child h2 {
    font-size: 0.9rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .app-container > div:first-child #hostOrgName {
    font-size: 1.035rem !important; /* prior +15% */
    margin-top: 2px !important;
  }
  
  /* Hide logo on very small screens - ONLY for host dashboard (.app-container) */
  .app-container > div:first-child .logo,
  .app-container > div:first-child img[alt*="Logo"],
  .app-container > div:first-child img[src*="logo"],
  .app-container .logo,
  .app-container img.logo[style*="height"],
  .app-container > div:first-child > div:first-child img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
  }
  
  .app-container > div:first-child .logo-background,
  .app-container .logo-background,
  .app-container div.logo-background[style*="padding"],
  .app-container > div:first-child > div:first-child > div.logo-background {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
  }
  
  /* Ensure main page logo is visible on very small screens - make it smaller */
  #landing .logo-container,
  .logo-container {
    display: block !important;
    visibility: visible !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  
  #landing .logo-background,
  .logo-container .logo-background {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 3px 6px !important;
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  #landing .logo,
  .logo-container .logo,
  .logo-container img.logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: 42px !important;
    max-width: 100% !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
  }
  
  .app-container > div:first-child > div:last-child {
    width: auto !important;
    flex-shrink: 0 !important;
    justify-content: flex-end !important;
    margin-top: 0 !important;
    margin-left: -28px !important;
    overflow: visible !important;
    order: 0 !important;
    gap: 4px !important;
  }
  
  .app-container .back-btn,
  button.back-btn[onclick*="goHome"],
  button.back-btn[onclick*="logout"],
  .app-container button[onclick*="goHome()"],
  .app-container button[onclick*="logout(event)"] {
    padding: 3px 6px !important;
    font-size: 0.65rem !important;
    min-height: 28px !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    min-width: 50px !important;
    width: auto !important;
  }
  
  /* Stat Cards - Even more compact on very small screens */
  .app-container > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
    margin-bottom: 8px !important;
  }
  
  .stat-card {
    padding: 5px 3px !important;
  }
  
  .stat-value {
    font-size: 1rem !important;
    margin-bottom: 1px !important;
  }
  
  .stat-label {
    font-size: 0.66rem !important; /* Increased by 10% from 0.6rem */
  }
}

@media (max-width: 360px) {
  /* Very small screens - even more compact availability */
  .day-availability-container {
    padding: 8px 6px !important;
    margin-bottom: 8px !important;
  }
  
  .day-name {
    font-size: 0.8rem !important;
  }
  
  .day-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.65rem !important;
  }
  
  .time-range-container {
    gap: 8px !important;
  }
  
  .circular-time-picker {
    width: 80px !important;
    height: 80px !important;
  }
  
  .time-label {
    font-size: 0.7rem !important;
  }
  
  .time-display {
    font-size: 0.75rem !important;
  }
  
  /* Volunteer Form - Very Small Screens (360px) */
  /* Adjust font sizes to fit placeholder text */
  #volunteerForm input,
  #volunteerForm select,
  #volunteerForm textarea {
    font-size: 1.058rem !important;
    padding: 10px !important;
  }
  
  #volunteerForm input::placeholder,
  #volunteerForm textarea::placeholder {
    font-size: 1.058rem !important;
    color: #999 !important;
  }
  
  /* Make email and address fields full width on very small cell screens so placeholder text is fully visible */
  #volunteerForm fieldset:first-of-type > div {
    grid-template-columns: 1fr !important;
  }
  
  /* Make email and address fields span full width */
  #volunteerForm #vEmail,
  #volunteerForm #vAddress {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Match email and address placeholder font size to name placeholder on very small cell screens */
  #volunteerForm #vEmail::placeholder,
  #volunteerForm #vAddress::placeholder {
    font-size: 1.058rem !important;
    color: #999 !important;
  }
  
  #volunteerForm label {
    font-size: 0.8rem !important;
  }
}

/* Step 20  - Reduce project card button sizes on cell screens */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* When step 20 tooltip is present, reduce button sizes in project cards */
  .step-tooltip[data-host-step="20"] ~ * .project-card button,
  body:has(.step-tooltip[data-host-step="20"]) .project-card button,
  .project-card button {
    padding: 4px 8px !important;
    font-size: 10px !important;
    border-radius: 4px !important;
    min-height: 24px !important;
    line-height: 1.2 !important;
  }
  
  /* Specifically target Edit, Delete, and Team PDF buttons on project cards */
  .project-card button[onclick*="editProject"],
  .project-card button[onclick*="deleteProject"],
  .project-card button[onclick*="downloadProjectTeamPdf"] {
    padding: 4px 8px !important;
    font-size: 10px !important;
    border-radius: 4px !important;
    min-height: 28px !important;
    line-height: 1.2 !important;
  }
}

/* Touch-friendly spacing */
/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  button,
  a,
  input,
  select,
  textarea {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* But allow checkboxes to be smaller for availability */
  input[type="checkbox"][name="availability"],
  input[type="checkbox"][name="editAvailability"] {
    min-height: 16px !important;
    min-width: 16px !important;
  }
  
  /* Reduce margins for more content space */
  .mb-1, .mb-2, .mb-3 {
    margin-bottom: 0.5rem !important;
  }
  
  .mt-1, .mt-2, .mt-3 {
    margin-top: 0.5rem !important;
  }
}

/* ============================================
   HOST DASHBOARD TAB FLYOUTS - COMPACT ON CELL SCREENS
   Make flyouts for Projects, Build Teams, Helpers, and Manage Data tabs more compact
   ============================================ */

/* Cell screens only (≤600px) - Galaxy S8+, Z Fold 5, A51, A71 use cell layout */
/* Devices ≥601px (Nest Hub Max, Nest Hub, Asus Zenbook Fold, iPads, Surface devices) use desktop layout */
@media (max-width: 600px) {
  /* Skills Selection Flyout - Make more compact */
  #hostSkillsContainer {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 12px !important;
    max-height: 85vh !important;
    border-radius: 8px !important;
  }
  
  #hostSkillsContainer label {
    font-size: 0.75rem !important;
    margin-bottom: 4px !important;
  }
  
  #hostSkillsContainer select {
    padding: 8px 10px 2px 10px !important;
    font-size: 0.8rem !important;
    min-height: 32px !important;
  }
  
  #hostSkillsContainer input[type="text"] {
    padding: 6px 8px !important;
    font-size: 0.8rem !important;
  }
  
  #hostSkillsContainer button {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
  }
  
  #hostSkillOptions {
    max-height: 40vh !important;
    padding: 8px !important;
    gap: 6px !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  }
  
  #hostSkillsContainer #hostAddSelectedSkills {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    margin-top: 10px !important;
  }
  
  /* Ministry Selection Modal - Make more compact */
  #ministrySelectionModal {
    padding: 0 !important;
  }
  
  #ministrySelectionModal > div {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 15px !important;
    max-height: 85vh !important;
    border-radius: 8px !important;
  }
  
  #ministrySelectionModal h3 {
    font-size: 1rem !important;
    margin-bottom: 12px !important;
  }
  
  #ministrySelectionModal label {
    font-size: 0.8rem !important;
    margin-bottom: 6px !important;
  }
  
  #ministrySelect {
    padding: 8px !important;
    font-size: 0.85rem !important;
  }
  
  #ministrySelectionModal button {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
  }
  
  /* Tab Content Areas - Make more compact */
  .tab-pane {
    padding: 8px 0 !important;
  }
  
  .tab-pane h3 {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
  }
  
  .tab-pane fieldset {
    padding: 10px !important;
    margin-bottom: 10px !important;
  }
  
  .tab-pane fieldset legend {
    font-size: 0.95rem !important;
    padding: 0 8px !important;
  }
  
  .tab-pane .form-group {
    margin-bottom: 8px !important;
  }
  
  .tab-pane .form-group label {
    font-size: 0.8rem !important;
    margin-bottom: 3px !important;
  }
  
  .tab-pane input[type="text"],
  .tab-pane input[type="email"],
  .tab-pane input[type="tel"],
  .tab-pane input[type="date"],
  .tab-pane select,
  .tab-pane textarea {
    padding: 6px 8px !important;
    font-size: 0.85rem !important;
  }
  
  .tab-pane textarea {
    min-height: 60px !important;
  }
  
  .tab-pane .form-row {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  
  .tab-pane button[type="submit"],
  .tab-pane .btn-primary {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
  }
  
  /* Projects Tab - Compact */
  #projectsTab .time-range-container {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  
  #projectsTab .time-picker-group {
    width: 100% !important;
    margin-bottom: 8px !important;
  }
  
  #projectsTab .circular-time-picker {
    display: none !important;
  }
  
  #projectsTab .time-display {
    font-size: 0.75rem !important;
  }
  
  /* Project time inputs - more compact */
  #projectsTab input[type="time"].native-time-input,
  #projectsTab input[type="time"] {
    max-width: 140px !important;
    padding: 6px 8px !important;
    font-size: 0.85rem !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 4px auto 0 auto !important;
  }
  
  #projectsTab .time-label {
    font-size: 0.75rem !important;
    margin-bottom: 3px !important;
  }
  
  #projectsTab .time-range-separator {
    font-size: 0.8rem !important;
    margin: 2px 0 !important;
  }
  
  /* Build Teams Tab - Compact */
  #teamsTab .form-group {
    margin-bottom: 10px !important;
  }
  
  #teamsTab select {
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
    min-height: 40px !important;
  }
  
  #teamsTab button {
    padding: 12px 20px !important;
    font-size: 0.95rem !important;
  }
  
  /* Helpers Tab - Compact */
  #volunteersTab {
    padding: 8px 0 !important;
  }
  
  #volunteersList {
    font-size: 0.85rem !important;
  }
  
  /* Registered Helpers Cards - Compact for Galaxy S23 */
  .volunteer-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 6px 8px !important;
    margin-bottom: 6px !important;
    border-radius: 6px !important;
  }
  
  /* Top section: Avatar + Name/Email/Address */
  .volunteer-row > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }
  
  /* Avatar - smaller */
  .volunteer-row > div:first-child > div:first-child {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
  }
  
  /* Name/Email/Address container */
  .volunteer-row > div:first-child > div:last-child {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  /* Name - smaller */
  .volunteer-row > div:first-child > div:last-child > div:first-child {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }
  
  /* Email - smaller */
  .volunteer-row > div:first-child > div:last-child > div:nth-child(2) {
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }
  
  /* Address - smaller */
  .volunteer-row > div:first-child > div:last-child > div:nth-child(3) {
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }
  
  /* Skills section - compact */
  .volunteer-row .skills-info {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    margin-top: 4px !important;
    margin-bottom: 2px !important;
  }
  
  .volunteer-row .skills-info > span {
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }
  
  /* Leadership section - compact */
  .volunteer-row .leadership-info {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 4px !important;
    margin-bottom: 2px !important;
  }
  
  .volunteer-row .leadership-info > span {
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }
  
  /* Bottom section: Phone + Skills count */
  .volunteer-row > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding-top: 4px !important;
    border-top: 1px solid #e0e0e0 !important;
    margin-top: 2px !important;
    font-size: 0.65rem !important;
    white-space: normal !important;
  }
  
  .volunteer-row > div:last-child > span {
    font-size: 0.65rem !important;
    white-space: normal !important;
  }
  
  /* Delete button - tighter container only; keep label/icon size */
  .volunteer-row button.helper-delete-btn,
  .volunteer-row button[onclick*="deleteHelper"] {
    font-size: 0.866rem !important;
    padding: 0 8px !important;
    min-width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin-left: 4px !important;
    line-height: 1 !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }
  .volunteer-row button.helper-delete-btn .helper-delete-btn-label {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    font-size: 0.866rem !important;
    transform: none !important;
  }
  
  /* Manage Data Tab - Compact */
  
  /* Dashboard Navigation Section Box - Responsive for mobile screens */
  #dashboardNavigationSection {
    border-width: 2px !important;
    padding: 12px !important;
    margin-bottom: 0 !important;
    border-radius: 10px !important;
  }
  
  /* Dashboard Data Entry Section Box - Responsive for mobile screens */
  #dashboardDataEntrySection {
    border-width: 2px !important;
    padding: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    border-radius: 10px !important;
  }
  
  /* Helper Registration Data Entry Section Box - Responsive for mobile screens */
  #helperDataEntrySection {
    border-width: 2px !important;
    padding: 12px !important;
    margin-bottom: 15px !important;
    border-radius: 10px !important;
  }
  
  /* Ensure stats cards fit well inside the box on mobile */
  #hostStatsCards {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  
  /* Ensure tab navigation fits well inside the box on mobile;
     horizontal padding leaves room for the active-tab scale enlarge */
  .tab-nav {
    padding: 10px 16px !important;
    margin-bottom: 20px !important;
    gap: 10px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .tab-nav-row {
    display: flex !important;
    width: 100% !important;
    justify-content: space-evenly !important;
    gap: 10px !important;
  }
  .tab-nav-row .tab-button {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* Galaxy S23 specific adjustments for dashboard boxes */
@media (max-width: 480px) {
  #dashboardNavigationSection {
    border-width: 2px !important;
    padding: 10px !important;
    margin-bottom: 0 !important;
    border-radius: 8px !important;
  }
  
  #dashboardDataEntrySection {
    border-width: 2px !important;
    padding: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
  }
  
  /* Helper Registration Data Entry Section Box - Galaxy S23 */
  #helperDataEntrySection {
    border-width: 2px !important;
    padding: 10px !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
  }
  
  /* Ensure stats cards fit well inside the box on Galaxy S23 */
  #hostStatsCards {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  
  /* Ensure tab navigation fits well inside the box on Galaxy S23 */
  .tab-nav {
    padding: 10px 14px !important;
    margin-bottom: 20px !important;
    gap: 8px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .tab-nav-row {
    display: flex !important;
    width: 100% !important;
    justify-content: space-evenly !important;
    gap: 8px !important;
  }
  .tab-nav-row .tab-button {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}
  #dataTab > div {
    padding: 15px !important;
    margin-top: 10px !important;
  }
  
  #dataTab h4 {
    font-size: 1.1rem !important;
    margin-bottom: 12px !important;
  }
  
  #dataTab button {
    padding: 10px 18px !important;
    font-size: 0.85rem !important;
  }
  
  #dataTab p {
    font-size: 0.75rem !important;
    margin-top: 10px !important;
  }
  
  /* Existing Projects Section - Compact */
  #projectsList {
    font-size: 0.85rem !important;
  }
  
  #projectsList > div {
    padding: 10px !important;
    margin-bottom: 8px !important;
  }
  
  /* Match Results - Compact */
  #matchResults {
    font-size: 0.85rem !important;
  }
  
  #matchResults > div {
    padding: 10px !important;
    margin-bottom: 8px !important;
  }
  
  /* Required Skills List - Compact */
  #requiredSkillsList {
    font-size: 0.8rem !important;
  }
  
  #requiredSkillsList > div {
    padding: 6px 10px !important;
    margin-bottom: 6px !important;
  }
  
  /* Checkbox Groups - Compact */
  .checkbox-group {
    gap: 6px !important;
    font-size: 0.8rem !important;
  }
  
  .checkbox-group label {
    padding: 4px 6px !important;
  }
  
  /* Time Selection Section - Compact */
  #projectTimeSelectionSection {
    margin-top: 8px !important;
    padding: 8px !important;
  }
  
  #projectSelectedDaysTimes {
    gap: 6px !important;
  }
  
  /* Project day containers - more compact */
  #projectSelectedDaysTimes .day-availability-container {
    padding: 8px !important;
    margin-bottom: 6px !important;
  }
  
  #projectSelectedDaysTimes .day-header {
    margin-bottom: 4px !important;
  }
  
  #projectSelectedDaysTimes .day-name {
    font-size: 0.8rem !important;
  }
  
  #projectSelectedDaysTimes .time-picker-group {
    margin-bottom: 6px !important;
  }
  
  #projectSelectedDaysTimes .time-label {
    font-size: 0.7rem !important;
    margin-bottom: 2px !important;
  }
  
  #projectSelectedDaysTimes input[type="time"].native-time-input,
  #projectSelectedDaysTimes input[type="time"] {
    max-width: 120px !important;
    padding: 5px 6px !important;
    font-size: 0.8rem !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 2px auto 0 auto !important;
  }
  
  #projectSelectedDaysTimes .time-range-separator {
    font-size: 0.75rem !important;
    margin: 1px 0 !important;
  }
  
  /* Import Modal (if exists) - Compact */
  #hostImportModal,
  [id*="importModal"],
  [id*="ImportModal"] {
    padding: 0 !important;
  }
  
  #hostImportModal > div,
  [id*="importModal"] > div,
  [id*="ImportModal"] > div {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 15px !important;
    max-height: 85vh !important;
    border-radius: 8px !important;
  }
  
  #hostImportModal h3,
  [id*="importModal"] h3,
  [id*="ImportModal"] h3 {
    font-size: 1rem !important;
    margin-bottom: 12px !important;
  }
  
  #hostImportModal label,
  [id*="importModal"] label,
  [id*="ImportModal"] label {
    font-size: 0.8rem !important;
  }
  
  #hostImportModal input,
  #hostImportModal button,
  [id*="importModal"] input,
  [id*="importModal"] button,
  [id*="ImportModal"] input,
  [id*="ImportModal"] button {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
  }
  
  /* Replace circular time pickers with native HTML5 time inputs on cell screens */
  .circular-time-picker {
    display: none !important;
  }
  
  /* Show native time inputs instead - COMPACT VERSION */
  .time-picker-group input[type="time"].native-time-input,
  .time-picker-group input[type="time"] {
    display: block !important;
    width: 100% !important;
    max-width: 140px !important;
    margin: 4px auto 0 auto !important;
    padding: 6px 8px !important;
    font-size: 0.85rem !important;
    border: 1.5px solid #007bff !important;
    border-radius: 6px !important;
    background: white !important;
    min-height: 36px !important;
    max-height: 36px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
  }
  
  .time-picker-group {
    width: 100% !important;
    margin-bottom: 8px !important;
    flex: 0 0 auto !important;
  }
  
  .time-label {
    font-size: 0.75rem !important;
    margin-bottom: 3px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }
  
  .time-range-container {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    padding: 0 !important;
  }
  
  .time-range-separator {
    text-align: center !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    margin: 2px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }
  
    /* Make day availability containers ultra compact - minimal spacing */
    .day-availability-container {
      padding: 0 !important;
      margin: 0 !important;
      margin-bottom: 1px !important;
    }
  
  .day-header {
    margin-bottom: 6px !important;
  }
  
  .day-name {
    font-size: 0.85rem !important;
  }
  
  /* Compact time picker groups in day containers */
  .day-availability-container .time-picker-group {
    margin-bottom: 6px !important;
  }
  
  .day-availability-container .time-label {
    font-size: 0.7rem !important;
    margin-bottom: 2px !important;
  }
  
  .day-availability-container input[type="time"].native-time-input,
  .day-availability-container input[type="time"] {
    max-width: 120px !important;
    padding: 5px 6px !important;
    font-size: 0.8rem !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 2px auto 0 auto !important;
    /* Ensure time picker dialog has room - add bottom margin for Galaxy S23 */
    margin-bottom: 60px !important;
  }
  
  /* Galaxy S23 specific: Ensure time picker containers have bottom padding for native dialog */
  @media screen and (max-width: 480px) {
    
    /* Override inline styles on app-container - eliminate excess blank space */
    .app-container {
      margin: 0 auto !important; /* Override inline style="margin: 20px auto" */
      padding: 4px 2px !important;
      max-width: 100% !important; /* Override inline style="max-width: 900px" */
      max-height: 100dvh !important; /* Override inline style="max-height: 90dvh" */
    }

    /* Helper Registration: keep space between top of screen and title */
    #volunteerMode .app-container,
    html body #volunteerMode .app-container {
      padding-top: 18px !important;
      padding-left: 12px !important;
      padding-right: 12px !important;
      padding-bottom: 4px !important;
      box-sizing: border-box !important;
    }
    #volunteerMode .app-container > div:first-child,
    html body #volunteerMode .app-container > div:first-child {
      margin-top: 4px !important;
      padding-top: 4px !important;
    }
    
    /* Reduce header spacing */
    .app-container > div:first-child {
      margin-bottom: 2px !important; /* Override inline style="margin-bottom: 6px" */
      padding-bottom: 2px !important; /* Override inline style="padding-bottom: 6px" */
      gap: 4px !important;
    }
    
    /* Reduce logo/title section spacing */
    .app-container > div:first-child > div:first-child {
      gap: 4px !important;
    }
    
    /* Reduce mode indicator spacing */
    .app-container #registeredToBeMatched {
      padding: 4px 6px !important; /* Override inline style="padding: 6px 8px" */
      margin-bottom: 4px !important; /* Override inline style="margin-bottom: 8px" */
      font-size: 0.85rem !important; /* Override inline style="font-size: 1rem" */
    }
    
    /* Reduce fieldset spacing */
    .app-container fieldset {
      padding: 6px 4px !important; /* Override inline style="padding: 15px" */
      margin-bottom: 4px !important; /* Override inline style="margin-bottom: 15px" */
    }
    
    /* Reduce legend spacing */
    .app-container fieldset legend {
      padding: 0 6px !important; /* Override inline style="padding: 0 10px" */
      font-size: 0.96rem !important; /* 20% larger than base 0.8rem (0.8 * 1.2 = 0.96) */
      margin-bottom: 2px !important;
    }
    
    /* Reduce form grid gap */
    .app-container fieldset > div[style*="grid-template-columns"] {
      gap: 4px !important; /* Override inline style="gap: 6px" */
    }
    
    /* Reduce label spacing */
    .app-container label {
      margin: 0 !important;
      margin-bottom: 1px !important; /* Override inline style="margin: 1px 0 0px" */
    }
    
    /* Reduce input spacing */
    .app-container input,
    .app-container select {
      padding: 2px 4px !important; /* Override inline style="padding: 3px" */
      font-size: 0.75rem !important; /* Override inline style="font-size: 0.8rem" */
    }
    
    /* Reduce submit button spacing */
    .app-container button[type="submit"] {
      padding: 10px 20px !important; /* Override inline style="padding: 16px 32px" */
      font-size: 1rem !important; /* Override inline style="font-size: 1.15rem" */
      margin-top: 4px !important; /* Override inline style="margin-top: 6px" */
    }
    
    /* Reduce back button spacing */
    .app-container .back-btn {
      padding: 4px 8px !important; /* Override inline style="padding: 6px 12px" */
      font-size: 0.8rem !important; /* Override inline style="font-size: 0.9rem" */
    }
    
    /* Reduce h2 spacing */
    .app-container h2 {
      font-size: 1.2rem !important; /* Override inline style="font-size: 1.54296875rem" */
      margin: 0 !important;
    }
    
    /* Reduce paragraph spacing */
    .app-container p {
      margin: 0 !important;
      margin-bottom: 2px !important;
      font-size: 0.75rem !important; /* Override inline style="font-size: 0.84rem" */
    }
    
    /* Reduce logo background padding */
    .app-container .logo-background {
      padding: 2px 4px !important; /* Override inline style="padding: 3px 6px" */
    }
    
    /* Reduce logo size */
    .app-container .logo {
      height: 28px !important; /* Override inline style="height: 36px" */
    }
    
    /* Make availability flyout ultra compact on Galaxy S23 */
    #availabilityFlyout {
      margin-bottom: 2px !important;
      padding: 0 !important;
      min-width: 260px !important;
      max-width: 320px !important;
      border-width: 1px !important;
      border-radius: 4px !important;
    }
    
    #availabilityFlyout > div {
      padding: 4px 6px !important;
      line-height: 1.2 !important;
    }
    
    #availabilityFlyout strong {
      margin-bottom: 2px !important;
      font-size: 0.8rem !important;
    }
    
    #availabilityFlyout ul {
      padding-left: 14px !important;
      font-size: 0.75rem !important;
      margin: 0 !important;
    }
    
    #availabilityFlyout li {
      margin-bottom: 2px !important;
      line-height: 1.2 !important;
    }
    
    #availabilityFlyout li:last-child {
      margin-bottom: 0 !important;
    }
    
    /* Make arrow smaller */
    #availabilityFlyout > div:last-child {
      border-left-width: 6px !important;
      border-right-width: 6px !important;
      border-top-width: 6px !important;
    }
    /* Set availability fieldset to fit inside container left to right */
    #availabilityFieldset {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
      padding: 2px 2px !important;
      margin: 0 0 4px 0 !important;
      box-sizing: border-box !important;
      overflow-x: hidden !important;
      position: relative !important;
    }
    
    /* Ensure time selection section fits inside fieldset */
    #timeSelectionSection {
      display: block !important;
      visibility: visible !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: visible !important;
    }
    
    /* Ensure each day's time block is visible */
    #selectedDaysTimes {
      display: flex !important;
      flex-direction: column !important;
      gap: 2px !important;
      visibility: visible !important;
      overflow: visible !important;
    }
    
    /* Make sure each day availability container fits inside fieldset */
    .day-availability-container {
      display: block !important;
      visibility: visible !important;
      width: 100% !important;
      max-width: 100% !important;
      overflow: visible !important;
    }
    
    /* Make content inside fit the fixed size */
    #availabilityFieldset legend {
      font-size: 0.96rem !important; /* 20% larger than base 0.8rem (0.8 * 1.2 = 0.96) */
      margin: 0 !important;
      margin-bottom: 1px !important;
      padding: 0 4px !important;
      line-height: 1 !important;
    }
    
    #availabilityFieldset > div:first-of-type {
      margin: 0 !important;
      margin-bottom: 1px !important;
    }
    
    #availabilityFieldset > div:first-of-type label {
      font-size: 0.65rem !important;
      line-height: 1.1 !important;
      margin: 0 !important;
    }
    
    #availabilityCheckboxes {
      gap: 1px !important;
      font-size: 0.7rem !important;
      margin: 0 !important;
      margin-bottom: 1px !important;
    }
    
    #availabilityCheckboxes label {
      font-size: 0.7rem !important;
      gap: 3px !important;
      line-height: 1 !important;
    }
    
    /* Override inline styles from index.html - ULTRA COMPACT */
    /* Hide time selection section by default - only show when days are selected */
    #timeSelectionSection {
      display: none !important;
      visibility: hidden !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      margin-top: 0 !important; /* Override inline style="margin-top: 6px" */
      padding: 0 !important;
      overflow: visible !important;
      height: auto !important;
      min-height: auto !important;
    }
    
    /* Show time selection section only when it has content (days selected) */
    #timeSelectionSection:has(#selectedDaysTimes:not(:empty)) {
      display: block !important;
      visibility: visible !important;
    }
    
    /* Alternative: Show when JavaScript sets display: block */
    #timeSelectionSection[style*="display: block"] {
      display: block !important;
      visibility: visible !important;
    }
    
    #timeSelectionSection h4 {
      font-size: 0.65rem !important;
      margin: 0 !important;
      margin-bottom: 1px !important; /* Override inline style="margin-bottom: 4px" */
      line-height: 1 !important;
      display: block !important;
      visibility: visible !important;
      padding: 0 !important;
    }
    
    /* Override inline style="gap: 4px" from index.html */
    #selectedDaysTimes {
      gap: 0 !important; /* Override inline style="gap: 4px" */
    }
    
    /* Ensure selected days times container is visible and shows all days */
    /* Make #selectedDaysTimes as compact as possible while still showing all days */
    #selectedDaysTimes {
      display: flex !important;
      flex-direction: column !important;
      gap: 1px !important;
      visibility: visible !important;
      overflow: visible !important;
      width: 100% !important;
      max-width: 326px !important;
      padding: 0 !important;
      margin: 0 !important;
      align-items: stretch !important;
      justify-content: flex-start !important;
    }
    
    /* Make each day container as compact as possible */
    #selectedDaysTimes .day-availability-container {
      display: block !important;
      visibility: visible !important;
      width: 100% !important;
      max-width: 326px !important;
      overflow: visible !important;
      opacity: 1 !important;
      position: relative !important;
      margin: 0 !important;
      margin-bottom: 1px !important;
      padding: 0 !important;
      flex: 0 0 auto !important;
      order: 0 !important;
    }
    
    /* ZERO spacing between day containers */
    #selectedDaysTimes .day-availability-container + .day-availability-container {
      margin-top: 0 !important;
    }
    
    /* Make day headers ULTRA COMPACT - zero padding */
    #selectedDaysTimes .day-header {
      padding: 0 !important;
      margin: 0 !important;
      margin-bottom: 0 !important;
      min-height: auto !important;
      height: auto !important;
      line-height: 1 !important;
    }
    
    /* Make day name text ULTRA COMPACT */
    #selectedDaysTimes .day-name {
      font-size: 0.65rem !important;
      padding: 0 !important;
      margin: 0 !important;
      line-height: 1 !important;
    }
    
    /* Make day icon ULTRA COMPACT */
    #selectedDaysTimes .day-icon {
      width: 14px !important;
      height: 14px !important;
      font-size: 0.6rem !important;
      padding: 0 !important;
      margin: 0 1px 0 0 !important;
      line-height: 1 !important;
    }
    
    /* Make remove button ULTRA COMPACT */
    #selectedDaysTimes .remove-day-btn {
      width: 16px !important;
      height: 16px !important;
      padding: 0 !important;
      margin: 0 !important;
      font-size: 0.8rem !important;
      line-height: 1 !important;
    }
    /* Make time picker inputs MORE COMPACT on Galaxy S23 to allow dialog to fit */
    .day-availability-container input[type="time"].native-time-input,
    .day-availability-container input[type="time"],
    .time-picker-group input[type="time"].native-time-input,
    .time-picker-group input[type="time"],
    input[type="time"].native-time-input,
    input[type="time"] {
      /* More compact sizing */
      max-width: 100px !important;
      padding: 4px 5px !important;
      font-size: 0.7rem !important;
      min-height: 28px !important;
      max-height: 28px !important;
      line-height: 1.1 !important;
      /* Position input at the very top of viewport to maximize room for dialog below */
      margin-top: 5px !important;
      margin-bottom: 180px !important;
      /* Ensure input is clickable and visible */
      position: relative !important;
      z-index: 10 !important;
    }
    
    /* Make time labels ULTRA COMPACT - hidden on Galaxy S23 */
    .time-label {
      display: none !important;
      visibility: hidden !important;
      margin: 0 !important;
      padding: 0 !important;
      height: 0 !important;
      font-size: 0 !important;
      line-height: 0 !important;
    }
    
    /* Make time picker groups ULTRA COMPACT */
    .time-picker-group {
      margin: 0 !important;
      padding: 0 !important;
      gap: 0 !important;
    }
    
    /* Make day availability containers ULTRA COMPACT - zero padding/margin */
    .day-availability-container {
      display: block !important;
      visibility: visible !important;
      padding: 0 !important;
      margin: 0 !important;
      margin-bottom: 0 !important;
      overflow: visible !important;
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
      opacity: 1 !important;
      position: relative !important;
      width: 100% !important;
      max-width: 326px !important;
      border: none !important;
      box-sizing: border-box !important;
    }
    
    /* Make day headers ultra compact - minimal spacing */
    .day-availability-container .day-header {
      margin: 0 !important;
      margin-bottom: 1px !important;
      padding: 0 !important;
      height: auto !important;
      min-height: auto !important;
      line-height: 1 !important;
    }
    
    /* Make day name more compact */
    .day-availability-container .day-name {
      font-size: 0.7rem !important;
      line-height: 1 !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    
    .time-picker-group,
    .time-range-container {
      padding: 0 !important;
      margin: 0 !important;
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
      height: auto !important;
      min-height: auto !important;
      /* Ensure containers don't clip dialog */
      overflow: visible !important;
    }
    
    /* Make time selection section ULTRA COMPACT - zero margins */
    #timeSelectionSection,
    #editTimeSelectionSection {
      margin: 0 !important;
      padding: 0 !important;
      padding-bottom: 0 !important;
      height: auto !important;
      min-height: auto !important;
    }
    
    #timeSelectionSection h4,
    #editTimeSelectionSection h4 {
      margin: 0 !important;
      margin-bottom: 1px !important;
      font-size: 0.65rem !important;
      line-height: 1 !important;
      padding: 0 !important;
      height: auto !important;
    }
    
    /* Override any conflicting rules - make ultra compact */
    #selectedDaysTimes,
    #editSelectedDaysTimes {
      display: flex !important;
      flex-direction: column !important;
      gap: 1px !important;
      padding: 0 !important;
      padding-bottom: 0 !important;
      height: auto !important;
      min-height: auto !important;
      margin: 0 !important;
      align-items: stretch !important;
    }
    
    /* Ensure each day container is on its own line and ultra compact */
    #selectedDaysTimes .day-availability-container,
    #editSelectedDaysTimes .day-availability-container {
      display: block !important;
      flex: 0 0 auto !important;
      margin: 0 !important;
      margin-bottom: 1px !important;
      padding: 0 !important;
      position: relative !important;
    }
    
    /* Keep sections tight under the last day/time row (native pickers — no reserved dialog gap) */
    #editTimeSelectionSection,
    #timeSelectionSection {
      overflow: visible !important;
      padding-bottom: 4px !important;
      margin-bottom: 0 !important;
      min-height: 0 !important;
      height: auto !important;
    }
    
    /* No extra padding on the days container itself */
    #editSelectedDaysTimes,
    #selectedDaysTimes {
      overflow: visible !important;
      padding: 0 !important;
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
      min-height: auto !important;
      height: auto !important;
    }
    
    /* Individual day containers should not have extra padding-bottom */
    .day-availability-container .time-picker-group {
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
    }
    
    /* Do not reserve huge empty space under availability — scroll if a picker needs room */
    #completionMode fieldset,
    #profileEditForm fieldset,
    #completionMode #editTimeSelectionSection,
    #volunteerMode #availabilityFieldset,
    #volunteerMode #timeSelectionSection {
      padding-bottom: 8px !important;
    }

    .modal,
    .modal-content {
      padding-bottom: 24px !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
    }
    
    form,
    fieldset {
      /* Keep default compact padding; avoid 200px empty gap under day/time rows */
      padding-bottom: 12px !important;
      overflow-y: visible !important;
      overflow-x: hidden !important;
    }
    
    /* Ensure body/html can scroll to accommodate dialog */
    html,
    body {
      overflow-y: auto !important;
      min-height: 100vh !important;
    }
    
    /* Reduce spacing in time range containers - make it ULTRA compact on Galaxy S23 */
    /* No "to" separator, so time pickers are directly adjacent */
    .time-range-container {
      flex-direction: row !important;
      gap: 0px !important;
      padding: 0 !important;
      margin: 0 !important;
      align-items: center !important;
      justify-content: center !important;
    }
    
    /* Make time picker groups ultra compact with zero spacing */
    .time-range-container .time-picker-group {
      margin: 0 !important;
      padding: 0 !important;
      gap: 0 !important;
      flex: 0 0 auto !important;
      width: auto !important;
      min-height: auto !important;
      height: auto !important;
    }
    
    /* Override inline styles on custom time picker button - ULTRA COMPACT */
    #selectedDaysTimes .custom-time-picker-button {
      padding: 2px 4px !important; /* Override inline style="padding: 6px 8px" */
      margin: 0 auto !important; /* Override inline style="margin: 4px auto 0px" */
      font-size: 0.7rem !important; /* Override inline style="font-size: 0.85rem" */
      line-height: 1 !important; /* Override inline style="line-height: 1.2" */
      min-height: 24px !important; /* Override inline style="min-height: 36px" */
      max-height: 24px !important; /* Override inline style="max-height: 36px" */
      width: 100% !important;
      max-width: 120px !important; /* Override inline style="max-width: 140px" */
      border-width: 1px !important; /* Override inline style="border: 1.5px solid" */
    }
    
    /* Hide "to" separator on Galaxy S23 - remove it completely */
    .time-range-separator {
      display: none !important;
      visibility: hidden !important;
      width: 0 !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      font-size: 0 !important;
      line-height: 0 !important;
      flex: 0 0 0 !important;
      overflow: hidden !important;
    }
    
    /* Hide time labels completely to reduce height */
    .time-range-container .time-label {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      line-height: 0 !important;
      font-size: 0 !important;
    }
    
    /* Hide circular dial picker on Galaxy S23 - not needed since time is displayed as text on button */
    #timeSelectionSection .circular-time-picker,
    #selectedDaysTimes .circular-time-picker,
    .day-availability-container .circular-time-picker,
    .time-range-container .circular-time-picker {
      display: none !important;
      visibility: hidden !important;
      width: 0 !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      opacity: 0 !important;
    }
    
    /* Hide the time handle (dial handle) */
    .time-range-container .circular-time-picker .time-handle {
      display: none !important;
      visibility: hidden !important;
    }
    
    /* Hide the time display inside circular picker - button shows time instead */
    .time-range-container .circular-time-picker .time-display {
      display: none !important;
      visibility: hidden !important;
    }
    
    /* Show the custom time picker button - this displays the time (9:00 AM) and opens modal */
    .time-range-container .custom-time-picker-button {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }
    #volunteerMode #selectedDaysTimes .custom-time-picker-button,
    #volunteerMode .time-range-container .custom-time-picker-button {
      min-height: 44px !important;
      max-height: none !important;
      font-size: 0.95rem !important;
      padding: 10px 12px !important;
      max-width: 148px !important;
    }
    
    /* Ensure time picker groups are visible and show the button */
    .time-range-container .time-picker-group {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    /* Hide native time inputs when the tappable time button is present */
    #timeSelectionSection input[type="time"].native-time-input,
    #selectedDaysTimes input[type="time"].native-time-input,
    .day-availability-container input[type="time"].native-time-input {
      display: none !important;
      visibility: hidden !important;
    }
    /* If the button never attached, show the native clock so time can still be entered */
    #volunteerMode .time-picker-group:not(:has(.custom-time-picker-button)) input[type="time"].native-time-input,
    #selectedDaysTimes .time-picker-group:not(:has(.custom-time-picker-button)) input[type="time"].native-time-input {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      position: static !important;
      pointer-events: auto !important;
      width: 100% !important;
      max-width: 148px !important;
      min-height: 44px !important;
      max-height: none !important;
      margin: 4px auto !important;
      font-size: 1rem !important;
      z-index: 20 !important;
    }
    
    /* Custom time picker modal - ensure AM/PM is fully visible on Galaxy S23 */
    #customTimePickerModal {
      width: 95% !important;
      max-width: 320px !important;
      padding: 18px 12px !important;
      pointer-events: auto !important;
    }
    #customTimePickerModal input,
    #customTimePickerModal select,
    #customTimePickerModal button {
      pointer-events: auto !important;
      max-width: none !important;
      -webkit-user-select: text !important;
      user-select: text !important;
    }
    
    #customTimePickerModal #customTimeAMPM {
      width: 85px !important;
      min-width: 85px !important;
      padding: 12px 10px !important;
      font-size: 1.15rem !important;
      text-align: center !important;
      overflow: visible !important;
      text-overflow: clip !important;
      white-space: nowrap !important;
    }
    
    /* Ensure AM/PM options are fully visible */
    #customTimePickerModal #customTimeAMPM option {
      padding: 8px 10px !important;
      text-align: center !important;
      font-size: 1.15rem !important;
    }
    
    /* Adjust modal layout for better spacing on Galaxy S23 */
    #customTimePickerModal > div:first-of-type {
      gap: 6px !important;
    }
    
    #customTimePickerModal > div:first-of-type > div {
      min-width: fit-content !important;
    }
  }
  
  .day-availability-container .time-range-separator {
    font-size: 0.75rem !important;
    margin: 1px 0 !important;
  }
  
  /* Ensure subcategory container and select are visible and clickable on mobile */
  #subcategoryContainer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1 !important;
    position: relative !important;
  }
  
  #subcategoryContainer[style*="display: none"] {
    display: block !important;
  }
  
  #skillSubcategory {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
    touch-action: manipulation !important;
    min-height: 44px !important;
    font-size: 1rem !important;
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: white !important;
    border: 2px solid #007bff !important;
    border-radius: 8px !important;
  }
  
  #skillSubcategory:disabled,
  #skillSubcategory[disabled] {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: white !important;
  }
  
  #skillSubcategory option {
    padding: 10px !important;
    font-size: 1rem !important;
    min-height: 44px !important;
  }
  
  /* Ensure category and subcategory selects display fully on mobile */
  #skillCategory,
  #skillSubcategory {
    position: relative !important;
    z-index: 1000 !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
    background-color: #f8f9ff !important;
    border: 1px solid #cbd5f5 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    font-size: 1rem !important;
    min-height: 44px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Ensure native mobile picker works */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 123, 255, 0.2) !important;
    /* Prevent any interference with native dropdown */
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  
  /* Ensure dropdown options are fully visible and scrollable */
  #skillCategory option,
  #skillSubcategory option {
    padding: 12px 10px !important;
    font-size: 1rem !important;
    min-height: 44px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    display: block !important;
    background: white !important;
    color: #333 !important;
    /* Ensure options are accessible in native picker */
    font-weight: normal !important;
  }
  
  /* Ensure the select element itself doesn't get blocked */
  #skillCategory:active,
  #skillSubcategory:active {
    z-index: 1002 !important;
    position: relative !important;
  }
  
  /* Prevent any overlay from blocking the select */
  #skillCategory:focus,
  #skillSubcategory:focus {
    z-index: 1001 !important;
    position: relative !important;
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
    /* Ensure focus state doesn't interfere with native picker */
    -webkit-tap-highlight-color: transparent !important;
  }
  
  /* Container adjustments for mobile */
  #subcategoryContainer {
    position: relative !important;
    z-index: 999 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  
  /* Parent container adjustments */
  #subcategoryContainer,
  #skillCategoryLabel,
  label[for="skillSubcategory"] {
    position: relative !important;
    z-index: 998 !important;
  }
  
  /* Ensure selects can expand their dropdowns fully */
  select#skillCategory:focus,
  select#skillSubcategory:focus {
    z-index: 1001 !important;
    position: relative !important;
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
  }
  
  /* Prevent parent containers from clipping dropdowns */
  form,
  fieldset,
  .volunteer-form,
  #volunteerForm {
    overflow: visible !important;
  }
  
  /* Ensure dropdowns appear above other content */
  select#skillCategory,
  select#skillSubcategory {
    transform: translateZ(0) !important; /* Force hardware acceleration */
    -webkit-transform: translateZ(0) !important;
  }
  
  /* Profile Edit Skills - Ensure subcategory is visible and selectable */
  #editSubcategoryContainer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
  }
  
  #editSubcategoryContainer[style*="display: none"] {
    display: block !important;
  }
  
  #editSkillSubcategory {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }
  
  #editSkillSubcategory:disabled,
  #editSkillSubcategory[disabled] {
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  
  /* Profile Edit Skills Interface - Same responsive styles as helper registration */
  #editSkillCategory,
  #editSkillSubcategory {
    font-size: 0.9rem !important;
    padding: 8px !important;
  }
  
  #editSubcategoryContainer {
    margin-top: 8px !important;
  }
  
  #editSkillOptions {
    grid-template-columns: 1fr !important;
    max-height: 250px !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  
  #editSkillOptions .skill-option {
    padding: 6px !important;
    font-size: 0.8rem !important;
  }
  
  #editExperienceContainer {
    margin-top: 10px !important;
  }
  
  #editExperienceContainer label {
    font-size: 0.7rem !important;
    padding: 4px 0 !important;
  }
  
  #editAddSkillButtonContainer {
    margin-top: 12px !important;
  }
  
  #editAddSelectedSkill {
    width: 100% !important;
    padding: 10px !important;
    font-size: 0.85rem !important;
  }
  
  #editSelectedSkillsList {
    gap: 8px !important;
    padding: 10px !important;
  }
  
  #editSelectedSkillsList > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 8px !important;
  }

  /* Saved profile skills — 15% larger on phone widths */
  #editSelectedSkillsList .mh-profile-skill-name {
    font-size: 0.9775rem !important;
  }
  #editSelectedSkillsList .mh-profile-skill-path {
    font-size: 0.8625rem !important;
  }
  #editSelectedSkillsList .mh-profile-skill-exp {
    font-size: 0.805rem !important;
  }
  
  #editSelectedSkillsList button {
    margin-top: 8px !important;
    margin-left: 0 !important;
    align-self: flex-end !important;
  }
}

@media (max-width: 360px) {
  /* Very small screens - Profile Edit Skills */
  #editSkillCategory,
  #editSkillSubcategory {
    font-size: 0.85rem !important;
    padding: 6px !important;
  }
  
  #editSkillOptions {
    max-height: 200px !important;
    gap: 4px !important;
    padding: 6px !important;
  }
  
  #editSkillOptions .skill-option {
    padding: 4px !important;
    font-size: 0.75rem !important;
  }

  /* Edit Profile skills — Galaxy S23: force text paint (textContent buttons/labels) */
  html body #completionMode #editSkillOptions.mh-edit-skill-list,
  html body #editSkillOptions.mh-edit-skill-list {
    display: block !important;
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
  }

  html body #completionMode #editSkillOptions .mh-s23-skill,
  html body #editSkillOptions .mh-s23-skill {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
  }

  html body #completionMode #editSkillOptions .mh-s23-skill-btn,
  html body #editSkillOptions .mh-s23-skill-btn {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-word !important;
    background: #ffffff !important;
    border: 2px solid #94a3b8 !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
  }

  html body #completionMode #editSkillOptions .mh-s23-skill.selected .mh-s23-skill-btn,
  html body #editSkillOptions .mh-s23-skill.selected .mh-s23-skill-btn {
    border-color: #2563eb !important;
    background: #eff6ff !important;
  }

  html body #completionMode #editSkillOptions .mh-s23-skill-exp,
  html body #editSkillOptions .mh-s23-skill-exp {
    width: 100% !important;
    margin-top: 6px !important;
  }

  @keyframes mhS23ExpPulsate {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.55);
      border-color: #d97706;
      background-color: #fff7ed;
    }
    50% {
      box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.2);
      border-color: #b45309;
      background-color: #ffedd5;
    }
  }

  html body #completionMode #editSkillOptions .experience-level-select.mh-s23-exp-pulsate,
  html body #editSkillOptions .experience-level-select.mh-s23-exp-pulsate,
  .experience-level-select.mh-s23-exp-pulsate {
    animation: mhS23ExpPulsate 1.2s ease-in-out infinite !important;
    border-width: 2px !important;
    border-color: #d97706 !important;
    background-color: #fff7ed !important;
    color: #7c2d12 !important;
  }

  html body #completionMode #editSkillOptions .experience-level-select.mh-s23-exp-filled,
  html body #editSkillOptions .experience-level-select.mh-s23-exp-filled,
  .experience-level-select.mh-s23-exp-filled {
    background-color: #fff7ed !important;
    border-color: #d97706 !important;
    color: #7c2d12 !important;
  }
  
  #editExperienceContainer label {
    font-size: 0.65rem !important;
  }
  
  #editAddSelectedSkill {
    padding: 8px !important;
    font-size: 0.8rem !important;
  }
  
  /* Profile page header - ensure back button is visible on very small screens */
  #completionMode .app-container > div:first-child {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  
  #completionMode .app-container > div:first-child > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  
  #completionMode .app-container .back-btn[onclick*="backToLanding"] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-width: 65px !important;
    padding: 6px 10px !important;
    font-size: 0.7rem !important;
    min-height: 32px !important;
  }
}

/* Register Organization Page — fit typical phone viewport (e.g. S23 ~740px) without scrolling */
@media (max-width: 600px) {
  html:has(body.register-org-page) {
    height: 100%;
  }

  body.register-org-page {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100dvh !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  body.register-org-page .register-shell,
  .register-shell,
  body > div[style*="max-width: 800px"] {
    margin: 0 !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border-width: 0 0 0 0 !important;
    box-shadow: none !important;
    max-height: none !important;
    height: auto !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.register-org-page .register-form-wrap,
  .register-form-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  #registerHeader {
    flex-direction: row !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
    padding: 6px 10px 6px 10px !important;
  }

  #registerHeader .register-header-sub {
    display: block !important;
  }

  #registerHeader > div[style*="display: flex"][style*="align-items: center"] {
    flex: 1 !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  #registerHeader .logo-background {
    padding: 5px 8px !important;
    flex-shrink: 0 !important;
  }

  #registerHeader .logo {
    height: 26px !important;
  }

  #registerHeader h1 {
    font-size: 1.02rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  #registerHeader p,
  #registerHeader .register-header-sub {
    font-size: 0.78rem !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.35 !important;
  }

  .register-returning,
  body > div.register-shell > div[style*="background: #e3f2fd"],
  body > div[style*="max-width: 800px"] > div[style*="background: #e3f2fd"] {
    flex-shrink: 0 !important;
    padding: 4px 10px !important;
  }

  .register-returning p,
  .register-returning-line {
    font-size: 0.8712rem !important;
    line-height: 1.3 !important;
  }

  #registrationForm {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  .register-form-wrap,
  body > div[style*="max-width: 800px"] > div[style*="padding: 25px"] {
    padding: 6px 10px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  #registerCredentialsNotice {
    flex-shrink: 0 !important;
    padding: 5px 8px !important;
    margin: 4px 0 8px 0 !important;
    font-size: 0.8697rem !important; /* +15% vs prior 0.75625rem */
    line-height: 1.32 !important;
    border-left-width: 3px !important;
  }

  #registerFormSections,
  #registrationForm > div[style*="display: grid"] {
    gap: 0 !important;
    margin-bottom: 6px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  #registrationForm fieldset.register-fieldset-merged,
  #registrationForm fieldset {
    padding: 6px 8px 7px !important;
    margin: 0 !important;
  }

  #registrationForm fieldset legend {
    font-size: 0.75rem !important;
    padding: 0 4px !important;
    line-height: 1.25 !important;
  }

  #registrationForm .form-group {
    margin-bottom: 6px !important;
  }

  #registrationForm .register-row-2col .form-group {
    margin-bottom: 0 !important;
  }

  #registrationForm .form-group label {
    font-size: 0.9375rem !important; /* +25% vs prior 0.75rem */
    margin-bottom: 2px !important;
    line-height: 1.25 !important;
  }

  .register-org-contact-hint {
    display: none !important;
  }

  .register-row-2col {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 6px 8px !important;
    align-items: end !important;
    margin-bottom: 2px !important;
  }

  /* Field text -15% vs prior 16px; compact height keeps form within S23 viewports */
  #registrationForm .form-group input[type="text"],
  #registrationForm .form-group input[type="email"],
  #registrationForm .form-group input[type="tel"],
  #registrationForm .form-group input[type="url"] {
    padding: 6px 8px !important;
    font-size: 13.6px !important;
    min-height: 36px !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
  }

  #registrationForm .form-group input[type="password"] {
    padding: 6px 42px 6px 8px !important;
    font-size: 13.6px !important;
    min-height: 36px !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
  }

  /* Galaxy S23 band: compact spacing, page may scroll so fields stay usable */
  @media (max-width: 480px) {
    body.register-org-page #registerHeader,
    #registerHeader {
      padding: max(22px, calc(env(safe-area-inset-top, 0px) + 10px)) 8px 8px !important;
    }

    body.register-org-page #registerHeader .logo-background,
    #registerHeader .logo-background {
      padding: 7px 11px !important;
    }

    body.register-org-page #registerHeader .logo,
    #registerHeader .logo {
      /* +20% vs prior 25px S23 logo (text in blue chip) */
      height: 30px !important;
      max-height: 30px !important;
    }

    body.register-org-page #registerHeader h1,
    #registerHeader h1 {
      /* +20% vs prior S23 compact title (0.95rem) */
      font-size: 1.14rem !important;
    }

    body.register-org-page .register-form-wrap {
      overflow: visible !important;
      padding: 4px 8px 12px !important;
    }

    body.register-org-page #registrationForm .form-group {
      margin-bottom: 3px !important;
    }

    body.register-org-page #registrationForm .form-group label {
      /* +25% vs prior 0.82rem field titles */
      font-size: 1.025rem !important;
    }

    body.register-org-page #registrationForm .form-group input[type="text"],
    body.register-org-page #registrationForm .form-group input[type="email"],
    body.register-org-page #registrationForm .form-group input[type="tel"],
    body.register-org-page #registrationForm .form-group input[type="url"],
    body.register-org-page #registrationForm .form-group input[type="password"] {
      min-height: 32px !important;
      padding-top: 4px !important;
      padding-bottom: 4px !important;
    }

    body.register-org-page #registrationForm fieldset.register-fieldset-merged {
      padding: 4px 6px !important;
    }

    body.register-org-page #registerCredentialsNotice {
      padding: 4px 6px !important;
      margin: 2px 0 4px !important;
      /* +15% vs prior 0.9rem */
      font-size: 1.035rem !important;
      line-height: 1.3 !important;
    }

    body.register-org-page #registrationForm button[type="submit"].btn-primary,
    body.register-org-page #registrationForm button[type="submit"] {
      /* +15% vs prior 0.8rem */
      font-size: 0.92rem !important;
    }

    body.register-org-page #registerBackBtn {
      top: max(18px, calc(env(safe-area-inset-top, 0px) + 10px)) !important;
    }

    body.register-org-page #emailServerStatus {
      display: none !important;
    }
  }

  .register-submit-block {
    flex-shrink: 0 !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
  }

  #registrationForm button[type="submit"].btn-primary,
  #registrationForm button[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    margin-top: 0 !important;
    min-height: 44px !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
  }

  #errorMessage.register-error-slot,
  #errorMessage {
    font-size: 0.72rem !important;
    margin: 4px 0 0 0 !important;
    min-height: 0 !important;
    line-height: 1.3 !important;
  }

  #emailServerStatus.register-email-status,
  #emailServerStatus {
    font-size: 0.625rem !important;
    margin-top: 2px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.register-org-page #registerBackBtn {
    top: max(6px, env(safe-area-inset-top, 0px)) !important;
    right: max(6px, env(safe-area-inset-right, 0px)) !important;
    padding: 3px 7px !important;
    font-size: 0.5625rem !important;
    font-weight: 500 !important;
    border-radius: 5px !important;
    line-height: 1.25 !important;
  }

  @media (max-width: 380px) {
    body.register-org-page .register-row-2col {
      grid-template-columns: 1fr !important;
      gap: 6px !important;
    }

    body.register-org-page .register-row-2col .form-group {
      margin-bottom: 6px !important;
    }
  }
}

@media (max-width: 600px) {
  /* Make Inspiration Off button match Inspiration On button width on Galaxy S23 */
  /* Only target Inspiration Off button to match the auto width of Inspiration On */
  #landing .housekeeping button[onclick="turnOffBanner()"],
  html body #landing .housekeeping button[onclick="turnOffBanner()"],
  body #landing .housekeeping button[onclick="turnOffBanner()"] {
    width: auto !important; /* Match Inspiration On button's auto width */
    max-width: none !important; /* Remove any max-width constraints */
    min-width: auto !important; /* Allow natural sizing */
    flex: 0 1 auto !important; /* Match flex behavior of Inspiration On */
    box-sizing: border-box !important;
  }
  
  /* Increase housekeeping title size by 15% on Galaxy S23 */
  /* Current size is 0.6875rem (11px), 15% increase = 0.6875 * 1.15 = 0.790625rem */
  #landing .housekeeping h4,
  html body #landing .housekeeping h4,
  body #landing .housekeeping h4,
  .housekeeping h4 {
    font-size: 0.790625rem !important; /* 15% increase from 0.6875rem */
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    z-index: 10 !important;
  }
  
  /* Ensure moved housekeeping element is clickable on Galaxy S23 */
  .housekeeping[data-moved="true"] h4,
  html body .housekeeping[data-moved="true"] h4,
  body .housekeeping[data-moved="true"] h4 {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    z-index: 10 !important;
  }
  
  /* Ensure housekeeping element itself is clickable */
  .housekeeping[data-moved="true"] {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}

/* What / Why compact — phones only (was leaking onto desktop and clipping the footer) */
@media (max-width: 600px) {
  /* What / Why modals only — compact on cell screens (do not shrink Terms, Privacy, How, etc.) */
  #infoModal:has(#infoContent.info-content-what) #infoModalContainer,
  #infoModal:has(#infoContent.info-content-why) #infoModalContainer,
  #infoModalContainer.mh-info-whatwhy-compact {
    width: 98% !important;
    max-width: 98% !important;
    height: auto !important;
    max-height: min(92dvh, 92vh) !important;
    padding: 0 !important;
    margin: 8px auto !important;
    border-radius: 16px !important;
    min-height: 0 !important;
    align-self: center !important;
  }

  /* Shrink-wrap: no flex-grow — sheet height follows content; scroll only when taller than viewport */
  #infoContent.info-content-what,
  #infoContent.info-content-why {
    padding: 10px 12px !important;
    min-height: 0 !important;
    flex: 0 1 auto !important;
    max-height: calc(92vh - 132px) !important;
    max-height: calc(92dvh - 132px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Root wrapper inside What/Why */
  #infoContent.info-content-what > div:first-child,
  #infoContent.info-content-why > div:first-child {
    margin-bottom: 4px !important;
  }

  /* Title row (logo + h2 + close ×) */
  #infoContent.info-content-what > div:first-child > div:first-child,
  #infoContent.info-content-why > div:first-child > div:first-child {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-bottom: 0 !important;
    padding-bottom: 8px !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  /* Subtitle under title row */
  #infoContent.info-content-what #infoWhatModalSubtitle,
  #infoContent.info-content-why #infoWhyModalSubtitle {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    margin: 0 0 6px 0 !important;
  }

  /* Summary copy under video */
  #infoContent.info-content-what #infoWhatContentSimple > p.mh-what-video-blurb,
  #infoContent.info-content-what #infoWhatContentSimple p.mh-what-video-blurb,
  #infoContent.info-content-why #infoWhyContentSimple > p.mh-why-video-blurb,
  #infoContent.info-content-why #infoWhyContentSimple p.mh-why-video-blurb {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }

  /* Full 16:9 shell via aspect-ratio — never height:0 without padding (collapses to purple line) */
  #infoContent.info-content-what #infoWhatContentSimple > div:first-child > div:first-child,
  #infoContent.info-content-why #infoWhyContentSimple > div:first-child > div:first-child {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 180px !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1) !important;
  }

  #infoContent.info-content-what .mh-whatwhy-logo-outer,
  #infoContent.info-content-why .mh-whatwhy-logo-outer {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    align-self: center !important;
    box-sizing: border-box !important;
  }

  #infoContent.info-content-what .logo-background,
  #infoContent.info-content-what > div:first-child .logo-background,
  #infoContent.info-content-what > div:first-child > div:first-child .logo-background,
  #infoContent.info-content-why .logo-background,
  #infoContent.info-content-why > div:first-child .logo-background,
  #infoContent.info-content-why > div:first-child > div:first-child .logo-background {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    flex-grow: 0 !important;
    align-self: center !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    text-align: center !important;
    line-height: normal !important;
    min-height: 0 !important;
    padding: 5px 8px !important;
    font-size: inherit !important;
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28) !important;
    border-radius: 8px !important;
  }

  #infoContent.info-content-what .logo,
  #infoContent.info-content-what img.logo,
  #infoContent.info-content-why .logo,
  #infoContent.info-content-why img.logo {
    height: 32px !important;
    max-height: 32px !important;
  }

  #infoContent.info-content-what h2,
  #infoContent.info-content-why h2 {
    font-size: 1.05rem !important;
    margin: 0 !important;
    line-height: 1.15 !important;
  }

  /* What/Why “More details” body — compact typography (detail pane only) */
  #infoContent.info-content-what #infoWhatContentDetail,
  #infoContent.info-content-why #infoWhyContentDetail {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
  }

  #infoContent.info-content-what #infoWhatContentDetail p,
  #infoContent.info-content-why #infoWhyContentDetail p {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
  }

  #infoContent.info-content-what #infoWhatContentDetail h3,
  #infoContent.info-content-why #infoWhyContentDetail h3 {
    font-size: 0.92rem !important;
    margin-top: 10px !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
  }

  #infoContent.info-content-what #infoWhatContentDetail ul,
  #infoContent.info-content-what #infoWhatContentDetail ol,
  #infoContent.info-content-why #infoWhyContentDetail ul,
  #infoContent.info-content-why #infoWhyContentDetail ol {
    padding-left: 16px !important;
    margin: 4px 0 !important;
    line-height: 1.35 !important;
  }

  #infoContent.info-content-what #infoWhatContentDetail li,
  #infoContent.info-content-why #infoWhyContentDetail li {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
    margin-bottom: 3px !important;
  }

  #infoContent.info-content-what #infoWhatContentDetail div[style*="background: #f8f9fa"],
  #infoContent.info-content-what #infoWhatContentDetail div[style*="background: #e3f2fd"],
  #infoContent.info-content-what #infoWhatContentDetail div[style*="background: #fff3cd"],
  #infoContent.info-content-what #infoWhatContentDetail div[style*="background: #e8f5e9"],
  #infoContent.info-content-why #infoWhyContentDetail div[style*="background: #f8f9fa"],
  #infoContent.info-content-why #infoWhyContentDetail div[style*="background: #e3f2fd"],
  #infoContent.info-content-why #infoWhyContentDetail div[style*="background: #fff3cd"],
  #infoContent.info-content-why #infoWhyContentDetail div[style*="background: #e8f5e9"] {
    padding: 8px 6px !important;
    margin: 6px 0 !important;
    border-radius: 6px !important;
  }

  #infoContent.info-content-what #infoWhatContentDetail div[style*="background"] h4,
  #infoContent.info-content-why #infoWhyContentDetail div[style*="background"] h4 {
    font-size: 0.82rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.2 !important;
  }

  #infoContent.info-content-what #infoWhatContentDetail div[style*="background"] p,
  #infoContent.info-content-why #infoWhyContentDetail div[style*="background"] p {
    font-size: 0.74rem !important;
    line-height: 1.3 !important;
    margin: 0 0 3px 0 !important;
  }

  #infoContent.info-content-what #infoWhatContentDetail a,
  #infoContent.info-content-why #infoWhyContentDetail a {
    font-size: 0.78rem !important;
  }

  /* What/Why modal footer bar */
  #infoModal:has(#infoContent.info-content-what) #infoModalContainer > div:not(#infoContent),
  #infoModal:has(#infoContent.info-content-why) #infoModalContainer > div:not(#infoContent),
  #infoModalContainer.mh-info-whatwhy-compact > div:not(#infoContent) {
    padding: 8px 10px !important;
    flex-shrink: 0 !important;
  }
}
/* How MagnifyHope Works Modal - Ultra Compact for Galaxy S23 */
@media (max-width: 480px) {
  /* Target the how content using the class added by JavaScript */
  #infoContent.info-content-how {
    padding: 12px 8px !important;
    font-size: 0.748rem !important; /* 0.88rem * 0.85 = 0.748rem (15% reduction) */
    line-height: 1.5 !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-scrolling: touch !important;
    will-change: scroll-position !important;
  }
  
  /* Aggressive overrides for inline styles - Galaxy S23 (15% reduction) */
  #infoContent.info-content-how [style*="height: 45px"] {
    height: 32px !important;
    max-height: 32px !important;
  }
  
  #infoContent.info-content-how [style*="font-size: 2.2rem"] {
    font-size: 1.105rem !important; /* 1.3rem * 0.85 = 1.105rem (15% reduction) */
  }
  
  #infoContent.info-content-how [style*="font-size: 1.5rem"],
  #infoContent.info-content-how [style*="font-size: 1.6rem"] {
    font-size: 0.935rem !important; /* 1.1rem * 0.85 = 0.935rem (15% reduction) */
  }
  
  #infoContent.info-content-how [style*="font-size: 1.3rem"] {
    font-size: 0.8925rem !important; /* 1.05rem * 0.85 = 0.8925rem (15% reduction) */
  }
  
  #infoContent.info-content-how [style*="font-size: 1.2rem"],
  #infoContent.info-content-how [style*="font-size: 1.1rem"] {
    font-size: 0.782rem !important; /* 0.92rem * 0.85 = 0.782rem (15% reduction) */
  }
  
  #infoContent.info-content-how [style*="font-size: 1.05rem"] {
    font-size: 0.8925rem !important; /* 0.9rem * 0.85 = 0.765rem, but keeping closer for readability */
  }
  
  #infoContent.info-content-how [style*="font-size: 1.8rem"] {
    font-size: 1.02rem !important; /* 1.2rem * 0.85 = 1.02rem (15% reduction) */
  }
  
  #infoContent.info-content-how [style*="font-size: 1.5rem"][style*="span"] {
    font-size: 1.02rem !important; /* 1.2rem * 0.85 = 1.02rem (15% reduction) */
  }
  
  /* Simplify gradients on mobile - use solid colors for performance */
  /* BUT preserve blue gradient for logo background */
  #infoContent.info-content-how .logo-background[style*="background: linear-gradient"],
  #infoContent.info-content-how > div:first-child .logo-background[style*="background: linear-gradient"] {
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
    box-shadow: none !important;
  }
  
  #infoContent.info-content-how div[style*="background: linear-gradient"]:not(.logo-background) {
    background: #fff8e1 !important;
    box-shadow: none !important;
  }
  
  #infoContent.info-content-how div[style*="background: linear-gradient"][style*="#e3f2fd"]:not(.logo-background) {
    background: #e3f2fd !important;
  }
  
  #infoContent.info-content-how div[style*="background: linear-gradient"][style*="#e8f5e9"]:not(.logo-background) {
    background: #e8f5e9 !important;
  }
  
  #infoContent.info-content-how div[style*="background: linear-gradient"][style*="#f8f9fa"]:not(.logo-background) {
    background: #f8f9fa !important;
  }
  
  /* How modal header section - compact */
  #infoContent.info-content-how > div:first-child {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom-width: 2px !important;
  }
  
  #infoContent.info-content-how > div:first-child > div:first-child {
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  
  /* How modal header - consistent size - override inline */
  #infoContent.info-content-how h2,
  #infoContent.info-content-how > div:first-child h2,
  #infoContent.info-content-how h2[style*="font-size: 2.2rem"] {
    font-size: 1.105rem !important; /* 1.3rem * 0.85 = 1.105rem (15% reduction) */
    margin: 0 !important;
    line-height: 1.2 !important;
    background: #2563eb !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #2563eb !important;
    background-clip: unset !important;
    letter-spacing: normal !important;
  }
  
  /* How modal logo container - consistent with mobile - override inline */
  #infoContent.info-content-how .logo-background,
  #infoContent.info-content-how > div:first-child .logo-background {
    padding: 8px 10px !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
  }
  
  #infoContent.info-content-how .logo,
  #infoContent.info-content-how img.logo,
  #infoContent.info-content-how > div:first-child img.logo,
  #infoContent.info-content-how .logo-background img {
    height: 32px !important;
    width: auto !important;
    display: block !important;
    max-height: 32px !important;
  }
  
  /* Override inline height styles */
  #infoContent.info-content-how img[style*="height: 45px"] {
    height: 32px !important;
  }
  
  /* How modal main content wrapper - consistent */
  #infoContent.info-content-how > div:last-child {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-size: 0.765rem !important; /* 0.9rem * 0.85 = 0.765rem (15% reduction) */
  }
  
  /* How modal first paragraph - consistent size */
  #infoContent.info-content-how > div:last-child > p:first-child {
    font-size: 0.8075rem !important; /* 0.95rem * 0.85 = 0.8075rem (15% reduction) */
    margin-bottom: 14px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
  }
  
  /* How modal content sections - simplified for performance */
  #infoContent.info-content-how div[style*="background"],
  #infoContent.info-content-how div[style*="background: #f8f9fa"],
  #infoContent.info-content-how div[style*="background: #e3f2fd"],
  #infoContent.info-content-how div[style*="background: #fff3cd"],
  #infoContent.info-content-how div[style*="background: #e8f5e9"] {
    padding: 12px 10px !important;
    margin: 10px 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    border-left-width: 4px !important;
  }

  /* How simple summary step cards — match Roadway to Success colored boxes */
  #infoContent.info-content-how #infoHowContentSimple > div[style*="background"] {
    padding: 10px 11px !important;
    margin: 0 0 8px 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    border-left-width: 4px !important;
  }

  #infoContent.info-content-how.mh-how-simple-active #infoHowContentSimple > div[style*="background"] {
    padding: 5px 7px !important;
    margin: 0 0 4px 0 !important;
  }

  #infoContent.info-content-how #infoHowContentSimple > div:last-child {
    margin-bottom: 0 !important;
  }

  #infoContent.info-content-how #infoHowContentSimple > div > strong {
    font-size: 1.217rem !important;
    font-weight: 800 !important;
    display: block !important;
    margin-bottom: 0 !important;
  }

  #infoContent.info-content-how #infoHowContentSimple > div span {
    font-size: 1.126rem !important;
    line-height: 1.35 !important;
  }

  #infoContent.info-content-how #infoHowContentSimple > div span a {
    font-size: inherit !important;
    display: inline !important;
  }
  
  /* How modal headings - consistent size - override inline */
  #infoContent.info-content-how h3,
  #infoContent.info-content-how div[style*="background"] h3,
  #infoContent.info-content-how h3[style*="font-size: 1.5rem"],
  #infoContent.info-content-how h3[style*="font-size: 1.6rem"],
  #infoContent.info-content-how h3[style*="font-size: 1.3rem"] {
    font-size: 0.935rem !important; /* 1.1rem * 0.85 = 0.935rem (15% reduction) */
    margin: 0 0 10px 0 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
    display: block !important;
  }
  
  /* How modal emoji in headings - override inline */
  #infoContent.info-content-how h3 span,
  #infoContent.info-content-how h3 span[style*="font-size: 1.8rem"],
  #infoContent.info-content-how h3 span[style*="font-size: 1.5rem"] {
    font-size: 1.02rem !important; /* 1.2rem * 0.85 = 1.02rem (15% reduction) */
    margin-right: 6px !important;
  }
  
  /* How modal paragraphs - consistent size - override inline */
  #infoContent.info-content-how div[style*="background"] p,
  #infoContent.info-content-how p,
  #infoContent.info-content-how p[style*="font-size: 1.1rem"],
  #infoContent.info-content-how p[style*="font-size: 1.05rem"] {
    font-size: 0.765rem !important; /* 0.9rem * 0.85 = 0.765rem (15% reduction) */
    line-height: 1.5 !important;
    margin: 0 0 8px 0 !important;
  }
  
  /* How modal lists - simplified structure */
  #infoContent.info-content-how ol,
  #infoContent.info-content-how ul {
    padding-left: 0 !important;
    margin: 10px 0 !important;
    line-height: 1.5 !important;
    list-style: none !important;
  }
  
  #infoContent.info-content-how li,
  #infoContent.info-content-how ol li,
  #infoContent.info-content-how ul li,
  #infoContent.info-content-how li[style*="font-size"] {
    font-size: 0.765rem !important; /* 0.9rem * 0.85 = 0.765rem (15% reduction) */
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border-left: 3px solid #2563eb !important;
    border-radius: 6px !important;
    box-shadow: none !important;
  }
  
  /* Override inline font sizes in list items */
  #infoContent.info-content-how li span[style*="font-size: 1.05rem"],
  #infoContent.info-content-how li strong[style*="font-size: 1.2rem"],
  #infoContent.info-content-how li strong[style*="font-size: 1.1rem"] {
    font-size: inherit !important;
  }
  
  /* First list item (KEY) - special styling */
  #infoContent.info-content-how li:first-child {
    background: #fff8e1 !important;
    border-left-color: #fd7e14 !important;
  }

  /* How simple summary — fit on screen without scroll (Galaxy S23 only; class set in JS) */
  #infoModal.mh-how-simple-active #infoModalContainer,
  #infoModalContainer.mh-how-simple-active {
    overflow: hidden !important;
    height: calc(100dvh - 6px) !important;
    max-height: calc(100dvh - 6px) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #infoContent.info-content-how.mh-how-simple-active {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 6px 8px !important;
  }

  /* How → More details: keep modal in viewport and scroll the full guide */
  #infoModal.mh-how-detail-active #infoModalContainer,
  #infoModalContainer.mh-how-detail-active {
    overflow: hidden !important;
    height: calc(100dvh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #infoContent.info-content-how.mh-how-detail-active {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #infoContent.info-content-how.mh-how-detail-active #infoHowContentDetail {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  /* Roadmap to Success → More details: scroll the full roadmap */
  #infoModal.mh-success-detail-active #infoModalContainer,
  #infoModalContainer.mh-success-detail-active {
    overflow: hidden !important;
    height: calc(100dvh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #infoContent.info-content-success.mh-success-detail-active,
  #infoContent.mh-success-detail-active {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #infoContent.mh-success-detail-active #infoSuccessContentDetail {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  #infoContent.info-content-how.mh-how-simple-active > div:first-child {
    margin-bottom: 4px !important;
    padding-bottom: 4px !important;
  }

  #infoContent.info-content-how.mh-how-simple-active h2,
  #infoContent.info-content-how.mh-how-simple-active .how-title-text-mobile {
    font-size: 0.95rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  #infoContent.info-content-how.mh-how-simple-active #infoHowModalSubtitle {
    margin: 0 0 4px 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
  }

  #infoContent.info-content-how.mh-how-simple-active #infoHowModalSubtitle strong {
    font-size: inherit !important;
    display: inline !important;
    margin-bottom: 0 !important;
  }

  #infoContent.info-content-how.mh-how-simple-active #infoHowContentSimple {
    font-size: 0.98rem !important;
    line-height: 1.25 !important;
  }

  #infoContent.info-content-how.mh-how-simple-active #infoHowContentSimple > p {
    margin: 0 0 4px 0 !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #1e293b !important;
  }

  #infoContent.info-content-how.mh-how-simple-active #infoHowContentSimple > div {
    padding: 5px 7px !important;
    border-radius: 8px !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.18 !important;
    font-size: 0.92rem !important;
    box-shadow: none !important;
  }

  #infoContent.info-content-how.mh-how-simple-active #infoHowContentSimple > div:last-child {
    margin-bottom: 0 !important;
  }

  #infoContent.info-content-how.mh-how-simple-active #infoHowContentSimple > div > strong {
    display: block !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    margin-bottom: 0 !important;
  }

  #infoContent.info-content-how.mh-how-simple-active #infoHowContentSimple > div span {
    font-size: 0.98rem !important;
    line-height: 1.22 !important;
  }

  #infoContent.info-content-how.mh-how-simple-active #infoHowContentSimple > div span a {
    font-size: inherit !important;
    display: inline !important;
  }

  #infoModal.mh-how-simple-active #infoModalContainer > div:not(#infoContent),
  #infoModalContainer.mh-how-simple-active > div:not(#infoContent) {
    padding: 6px 8px !important;
    flex-shrink: 0 !important;
  }
  
  /* How modal strong tags - consistent size - override inline */
  #infoContent.info-content-how strong,
  #infoContent.info-content-how li strong,
  #infoContent.info-content-how p strong,
  #infoContent.info-content-how strong[style*="font-size: 1.2rem"],
  #infoContent.info-content-how strong[style*="font-size: 1.1rem"] {
    font-size: 0.782rem !important; /* 0.92rem * 0.85 = 0.782rem (15% reduction) */
    display: block !important;
    margin-bottom: 5px !important;
  }
  
  /* How modal checkmarks - visible and simplified */
  #infoContent.info-content-how li span[style*="position: absolute"] {
    display: none !important;
  }
  
  #infoContent.info-content-how ul li::before {
    content: "✓ " !important;
    color: #2196f3 !important;
    font-weight: bold !important;
    margin-right: 6px !important;
  }
  
  /* Reduce excessive margins in how content */
  #infoContent.info-content-how div[style*="margin: 25px"],
  #infoContent.info-content-how div[style*="margin: 30px"] {
    margin: 12px 0 !important;
  }
  
  /* Grid layout for volunteer/leader sections - stack on Galaxy S23 */
  #infoContent.info-content-how div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 12px 0 !important;
  }
  
  /* Volunteer/Leader section cards - simplified */
  #infoContent.info-content-how div[style*="grid-template-columns: 1fr"] > div {
    padding: 12px 10px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    border-left-width: 4px !important;
  }
  
  /* Volunteer/Leader section headings - consistent size */
  #infoContent.info-content-how div[style*="grid-template-columns: 1fr"] h3 {
    font-size: 0.8925rem !important; /* 1.05rem * 0.85 = 0.8925rem (15% reduction) */
    margin-bottom: 10px !important;
    display: block !important;
  }
  
  /* Volunteer/Leader section emoji - consistent size */
  #infoContent.info-content-how div[style*="grid-template-columns: 1fr"] h3 span {
    font-size: 1.02rem !important; /* 1.2rem * 0.85 = 1.02rem (15% reduction) */
    margin-right: 6px !important;
  }
  
  /* Volunteer/Leader section paragraphs - consistent size */
  #infoContent.info-content-how div[style*="grid-template-columns: 1fr"] p {
    font-size: 0.765rem !important; /* 0.9rem * 0.85 = 0.765rem (15% reduction) */
    line-height: 1.5 !important;
  }
  
  /* Critical success factor box - simplified */
  #infoContent.info-content-how div[style*="grid-template-columns: 1fr"] div[style*="background"] {
    padding: 12px 10px !important;
    margin-bottom: 10px !important;
    box-shadow: none !important;
  }
  
  /* Critical success factor text - consistent size */
  #infoContent.info-content-how div[style*="grid-template-columns: 1fr"] div[style*="background"] p {
    font-size: 0.748rem !important; /* 0.88rem * 0.85 = 0.748rem (15% reduction) */
    line-height: 1.5 !important;
  }
  
  /* Make info modal container optimized for Galaxy S23 */
  #infoModalContainer {
    max-height: 95vh !important;
    border-radius: 16px !important;
  }
  
  /* Optimize modal scrolling performance */
  #infoModal #infoContent {
    -webkit-overflow-scrolling: touch !important;
    overflow-scrolling: touch !important;
    transform: translateZ(0) !important;
    will-change: scroll-position !important;
  }
  
  /* Why MagnifyHope? Modal - Ultra Compact for Galaxy S23 */
  /* Target the why content using the class added by JavaScript */
  #infoContent.info-content-why {
    padding: 10px 8px !important;
  }
  
  /* Why modal header section with green gradient */
  #infoContent.info-content-why > div:first-child {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }
  
  #infoContent.info-content-why > div:first-child > div:first-child {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }
  
  /* Why modal header - make more compact */
  #infoContent.info-content-why h2 {
    font-size: 1.2rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  
  /* Why modal logo container - smaller; hug logo width */
  #infoContent.info-content-why .mh-whatwhy-logo-outer {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    align-self: center !important;
    box-sizing: border-box !important;
  }

  #infoContent.info-content-why .logo-background {
    padding: 6px 10px !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    flex-grow: 0 !important;
    align-self: center !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    text-align: center !important;
    line-height: normal !important;
    min-height: 0 !important;
    font-size: inherit !important;
    overflow: visible !important;
    border-radius: 8px !important;
  }
  
  #infoContent.info-content-why .logo {
    height: 32px !important;
    max-height: 32px !important;
  }
  
  /* Why? video section — root has one wrapper; video is 2nd child (not last-child text column) */
  #infoContent.info-content-why > div:first-child > div:nth-child(2) {
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
  }
  
  /* Why modal main content wrapper - reduce padding and margins */
  #infoContent.info-content-why > div:last-child {
    margin-bottom: 0 !important;
    padding: 0 !important;
  }
  
  /* Why modal first paragraph - reduce size */
  #infoContent.info-content-why > div:last-child > div:last-child > p:first-child {
    font-size: 0.8rem !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
  }
  
  /* Why modal content sections - reduce spacing */
  #infoContent.info-content-why > div:last-child > div:last-child div[style*="background: #f8f9fa"],
  #infoContent.info-content-why > div:last-child > div:last-child div[style*="background: #e3f2fd"],
  #infoContent.info-content-why > div:last-child > div:last-child div[style*="background: #fff3cd"],
  #infoContent.info-content-why > div:last-child > div:last-child div[style*="background: #e8f5e9"],
  #infoContent.info-content-why > div:last-child > div:last-child div[style*="background: #d4edda"] {
    padding: 10px 8px !important;
    margin: 8px 0 !important;
    border-radius: 6px !important;
  }
  
  /* Why modal headings - smaller */
  #infoContent.info-content-why > div:last-child > div:last-child h3 {
    font-size: 0.95rem !important;
    margin-top: 12px !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
  }
  
  /* Why modal paragraphs - compact */
  #infoContent.info-content-why > div:last-child > div:last-child p {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }
  
  /* Why modal lists - compact */
  #infoContent.info-content-why > div:last-child > div:last-child ol,
  #infoContent.info-content-why > div:last-child > div:last-child ul {
    padding-left: 16px !important;
    margin: 6px 0 !important;
    line-height: 1.4 !important;
  }
  
  #infoContent.info-content-why > div:last-child > div:last-child li {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
  }
  
  /* Why modal strong tags - slightly smaller */
  #infoContent.info-content-why > div:last-child > div:last-child strong {
    font-size: 0.8rem !important;
  }
  
  /* Why modal box headings - smaller */
  #infoContent.info-content-why > div:last-child > div:last-child div[style*="background"] h4 {
    font-size: 0.85rem !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
  }
  
  /* Why modal box paragraphs - smaller */
  #infoContent.info-content-why > div:last-child > div:last-child div[style*="background"] p {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    margin: 0 0 4px 0 !important;
  }
  
  /* Why modal links - maintain readability */
  #infoContent.info-content-why > div:last-child > div:last-child a {
    font-size: 0.8rem !important;
  }
  
  /* Reduce all margins in why content */
  #infoContent.info-content-why > div:last-child > div:last-child div[style*="margin: 20px"],
  #infoContent.info-content-why > div:last-child > div:last-child div[style*="margin: 30px"],
  #infoContent.info-content-why > div:last-child > div:last-child div[style*="margin: 35px"] {
    margin: 8px 0 !important;
  }
  
  /* Why modal footer text - smaller */
  #infoContent.info-content-why > div:last-child > div:last-child p[style*="font-size: 0.9rem"] {
    font-size: 0.7rem !important;
    margin-top: 12px !important;
  }
  
  /* Terms of Service Modal - Ultra Compact for Galaxy S23 */
  /* Target the terms content using the class added by JavaScript */
  #infoContent.info-content-terms {
    padding: 10px 8px !important;
    max-height: calc(95vh - 20px) !important;
    overflow-y: auto !important;
  }
  
  /* Terms modal header section */
  #infoContent.info-content-terms > div:first-child {
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
  }
  
  #infoContent.info-content-terms > div:first-child > div:first-child {
    gap: 8px !important;
    margin-bottom: 6px !important;
  }
  
  /* Terms modal header - make more compact */
  #infoContent.info-content-terms h2 {
    font-size: 1.2rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  
  /* Terms modal logo container - smaller */
  #infoContent.info-content-terms .logo-background {
    padding: 6px 10px !important;
  }
  
  #infoContent.info-content-terms .logo {
    height: 28px !important;
  }
  
  /* Terms modal close button — larger X (2×) */
  #infoContent.info-content-terms > div:first-child button {
    width: 26px !important;
    height: 26px !important;
    font-size: 32px !important; /* 2× previous 16px — enlarge X only */
    line-height: 1 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  
  /* Terms modal main content wrapper - reduce padding and margins */
  #infoContent.info-content-terms > div:last-child {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    max-height: calc(95vh - 100px) !important;
    overflow-y: auto !important;
  }
  
  /* Terms modal first paragraph - reduce size */
  #infoContent.info-content-terms > div:last-child > p:first-child {
    font-size: 0.8rem !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
  }
  
  /* Terms modal headings - smaller */
  #infoContent.info-content-terms > div:last-child h4 {
    font-size: 0.9rem !important;
    margin-top: 16px !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
  }
  
  /* Terms modal paragraphs - compact */
  #infoContent.info-content-terms > div:last-child p {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }
  
  /* Terms modal lists - compact */
  #infoContent.info-content-terms > div:last-child ol,
  #infoContent.info-content-terms > div:last-child ul {
    padding-left: 16px !important;
    margin: 6px 0 !important;
    line-height: 1.4 !important;
  }
  
  #infoContent.info-content-terms > div:last-child li {
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
  }
  
  /* Terms modal strong tags - slightly smaller */
  #infoContent.info-content-terms > div:last-child strong {
    font-size: 0.75rem !important;
  }
  
  /* Terms modal links - maintain readability */
  #infoContent.info-content-terms > div:last-child a {
    font-size: 0.75rem !important;
  }
  
  /* Terms modal highlighted boxes - reduce padding */
  #infoContent.info-content-terms > div:last-child div[style*="background: #f8f9fa"] {
    padding: 10px 8px !important;
    margin: 10px 0 !important;
    border-radius: 6px !important;
  }
  
  /* Terms modal box headings - smaller */
  #infoContent.info-content-terms > div:last-child div[style*="background"] h4 {
    font-size: 0.85rem !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
  }
  
  /* Terms modal box paragraphs - smaller */
  #infoContent.info-content-terms > div:last-child div[style*="background"] p {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
    margin: 0 0 4px 0 !important;
  }
  
  /* Terms modal box links - smaller */
  #infoContent.info-content-terms > div:last-child div[style*="background"] a {
    font-size: 0.7rem !important;
  }
  
  /* Reduce all margins in terms content */
  #infoContent.info-content-terms > div:last-child div[style*="margin: 20px"],
  #infoContent.info-content-terms > div:last-child div[style*="margin: 25px"] {
    margin: 8px 0 !important;
  }
  
  /* Terms modal footer text - smaller */
  #infoContent.info-content-terms > div:last-child p[style*="font-size: 0.9rem"],
  #infoContent.info-content-terms > div:last-child p[style*="font-style: italic"] {
    font-size: 0.65rem !important;
    margin-top: 10px !important;
    line-height: 1.3 !important;
  }
  
  /* Privacy Policy Modal - Ultra Compact for Galaxy S23 */
  /* Target the privacy content using the class added by JavaScript */
  #infoContent.info-content-privacy {
    padding: 10px 8px !important;
    max-height: calc(95vh - 20px) !important;
    overflow-y: auto !important;
  }
  
  /* Privacy modal header section */
  #infoContent.info-content-privacy > div:first-child {
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
  }
  
  #infoContent.info-content-privacy > div:first-child > div:first-child {
    gap: 8px !important;
    margin-bottom: 6px !important;
  }
  
  /* Privacy modal header - make more compact */
  #infoContent.info-content-privacy h2 {
    font-size: 1.2rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  
  /* Privacy modal logo container - smaller */
  #infoContent.info-content-privacy .logo-background {
    padding: 6px 10px !important;
  }
  
  #infoContent.info-content-privacy .logo {
    height: 28px !important;
  }
  
  /* Privacy modal close button — larger X (2×) */
  #infoContent.info-content-privacy > div:first-child button {
    width: 26px !important;
    height: 26px !important;
    font-size: 32px !important; /* 2× previous 16px — enlarge X only */
    line-height: 1 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  
  /* Privacy modal main content wrapper - reduce padding and margins */
  #infoContent.info-content-privacy > div:last-child {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    max-height: calc(95vh - 100px) !important;
    overflow-y: auto !important;
  }
  
  /* Privacy modal first paragraph - reduce size */
  #infoContent.info-content-privacy > div:last-child > p:first-child {
    font-size: 0.8rem !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
  }
  
  /* Privacy modal headings - smaller */
  #infoContent.info-content-privacy > div:last-child h4 {
    font-size: 0.9rem !important;
    margin-top: 16px !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
  }
  
  /* Privacy modal paragraphs - compact */
  #infoContent.info-content-privacy > div:last-child p {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }
  
  /* Privacy modal lists - compact */
  #infoContent.info-content-privacy > div:last-child ol,
  #infoContent.info-content-privacy > div:last-child ul {
    padding-left: 16px !important;
    margin: 6px 0 !important;
    line-height: 1.4 !important;
  }
  
  #infoContent.info-content-privacy > div:last-child li {
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
  }
  
  /* Privacy modal strong tags - slightly smaller */
  #infoContent.info-content-privacy > div:last-child strong {
    font-size: 0.75rem !important;
  }
  
  /* Privacy modal links - maintain readability */
  #infoContent.info-content-privacy > div:last-child a {
    font-size: 0.75rem !important;
  }
  
  /* Privacy modal highlighted boxes - reduce padding */
  #infoContent.info-content-privacy > div:last-child div[style*="background: #f8f9fa"] {
    padding: 10px 8px !important;
    margin: 10px 0 !important;
    border-radius: 6px !important;
  }
  
  /* Privacy modal box headings - smaller */
  #infoContent.info-content-privacy > div:last-child div[style*="background"] h4 {
    font-size: 0.85rem !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
  }
  
  /* Privacy modal box paragraphs - smaller */
  #infoContent.info-content-privacy > div:last-child div[style*="background"] p {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
    margin: 0 0 4px 0 !important;
  }
  
  /* Privacy modal box links - smaller */
  #infoContent.info-content-privacy > div:last-child div[style*="background"] a {
    font-size: 0.7rem !important;
  }
  
  /* Reduce all margins in privacy content */
  #infoContent.info-content-privacy > div:last-child div[style*="margin: 20px"],
  #infoContent.info-content-privacy > div:last-child div[style*="margin: 25px"] {
    margin: 8px 0 !important;
  }
  
  /* Privacy modal footer text - smaller */
  #infoContent.info-content-privacy > div:last-child p[style*="font-size: 0.9rem"],
  #infoContent.info-content-privacy > div:last-child p[style*="font-style: italic"] {
    font-size: 0.65rem !important;
    margin-top: 10px !important;
    line-height: 1.3 !important;
  }
  
  /* Disclaimer Modal - Ultra Compact for Galaxy S23 */
  /* Target the disclaimer content using the class added by JavaScript */
  #infoContent.info-content-disclaimer {
    padding: 10px 8px !important;
    max-height: calc(95vh - 20px) !important;
    overflow-y: auto !important;
  }
  
  /* Disclaimer modal header section */
  #infoContent.info-content-disclaimer > div:first-child {
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
  }
  
  #infoContent.info-content-disclaimer > div:first-child > div:first-child {
    gap: 8px !important;
    margin-bottom: 6px !important;
  }
  
  /* Disclaimer modal header - make more compact */
  #infoContent.info-content-disclaimer h2 {
    font-size: 1.2rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  
  /* Disclaimer modal logo container - smaller */
  #infoContent.info-content-disclaimer .logo-background {
    padding: 6px 10px !important;
  }
  
  #infoContent.info-content-disclaimer .logo {
    height: 28px !important;
  }
  
  /* Disclaimer modal close button — larger X (2×) */
  #infoContent.info-content-disclaimer > div:first-child button {
    width: 26px !important;
    height: 26px !important;
    font-size: 32px !important; /* 2× previous 16px — enlarge X only */
    line-height: 1 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  
  /* Disclaimer modal main content wrapper - reduce padding and margins */
  #infoContent.info-content-disclaimer > div:last-child {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    max-height: calc(95vh - 100px) !important;
    overflow-y: auto !important;
  }
  
  /* Disclaimer modal first paragraph - reduce size */
  #infoContent.info-content-disclaimer > div:last-child > p:first-child {
    font-size: 0.8rem !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
  }
  
  /* Disclaimer modal headings - smaller */
  #infoContent.info-content-disclaimer > div:last-child h4 {
    font-size: 0.9rem !important;
    margin-top: 16px !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
  }
  
  /* Disclaimer modal paragraphs - compact */
  #infoContent.info-content-disclaimer > div:last-child p {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }
  
  /* Disclaimer modal lists - compact */
  #infoContent.info-content-disclaimer > div:last-child ol,
  #infoContent.info-content-disclaimer > div:last-child ul {
    padding-left: 16px !important;
    margin: 6px 0 !important;
    line-height: 1.4 !important;
  }
  
  #infoContent.info-content-disclaimer > div:last-child li {
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
  }
  
  /* Disclaimer modal strong tags - slightly smaller */
  #infoContent.info-content-disclaimer > div:last-child strong {
    font-size: 0.75rem !important;
  }
  
  /* Disclaimer modal links - maintain readability */
  #infoContent.info-content-disclaimer > div:last-child a {
    font-size: 0.75rem !important;
  }
  
  /* Disclaimer modal highlighted boxes - reduce padding */
  #infoContent.info-content-disclaimer > div:last-child div[style*="background: #f8f9fa"] {
    padding: 10px 8px !important;
    margin: 10px 0 !important;
    border-radius: 6px !important;
  }
  
  /* Disclaimer modal box headings - smaller */
  #infoContent.info-content-disclaimer > div:last-child div[style*="background"] h4 {
    font-size: 0.85rem !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
  }
  
  /* Disclaimer modal box paragraphs - smaller */
  #infoContent.info-content-disclaimer > div:last-child div[style*="background"] p {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
    margin: 0 0 4px 0 !important;
  }
  
  /* Disclaimer modal box links - smaller */
  #infoContent.info-content-disclaimer > div:last-child div[style*="background"] a {
    font-size: 0.7rem !important;
  }
  
  /* Reduce all margins in disclaimer content */
  #infoContent.info-content-disclaimer > div:last-child div[style*="margin: 20px"],
  #infoContent.info-content-disclaimer > div:last-child div[style*="margin: 25px"] {
    margin: 8px 0 !important;
  }
  
  /* Disclaimer modal footer text - smaller */
  #infoContent.info-content-disclaimer > div:last-child p[style*="font-size: 0.9rem"],
  #infoContent.info-content-disclaimer > div:last-child p[style*="font-style: italic"] {
    font-size: 0.65rem !important;
    margin-top: 10px !important;
    line-height: 1.3 !important;
  }
}

/* Team Matching Example Modal - Mobile Compact Title */
@media (max-width: 600px) {
  #teamExampleTitle {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100vw - 120px) !important;
  }
}

/* Galaxy S23 and similar devices - Extra compact */
@media (max-width: 400px) {
  #teamExampleTitle {
    font-size: 0.95rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    padding-right: 4px !important;
  }
  
  /* Team Matching Example — no separate Close header (Close is on title row in iframe) */
  #teamExampleModal > div:first-child {
    padding: 0 !important;
  }
}

/* Galaxy S23:  Step 6 — keep modal size, distribute title/body/buttons to remove bottom dead space */
@media (max-width: 480px) {
  html body .step-tooltip[data-step="6"],
  html body .step-tooltip[data-helper-step="6"],
  html body .step-tooltip[data-step="6"][style],
  html body .step-tooltip[data-helper-step="6"][style],
  body .step-tooltip[data-step="6"],
  body .step-tooltip[data-helper-step="6"],
  body .step-tooltip[data-step="6"][style],
  body .step-tooltip[data-helper-step="6"][style],
  .step-tooltip[data-step="6"],
  .step-tooltip[data-helper-step="6"] {
    height: 30vh !important;
    min-height: 30vh !important;
    max-height: 30vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 14px 12px !important;
  }

  html body .step-tooltip[data-step="6"] h3,
  html body .step-tooltip[data-helper-step="6"] h3,
  .step-tooltip[data-step="6"] h3,
  .step-tooltip[data-helper-step="6"] h3 {
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  html body .step-tooltip[data-step="6"] p,
  html body .step-tooltip[data-helper-step="6"] p,
  .step-tooltip[data-step="6"] p,
  .step-tooltip[data-helper-step="6"] p {
    margin: 0 !important;
    padding: 8px 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.5 !important;
  }

  html body .step-tooltip[data-step="6"] > div,
  html body .step-tooltip[data-helper-step="6"] > div,
  .step-tooltip[data-step="6"] > div,
  .step-tooltip[data-helper-step="6"] > div {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 0 !important;
    flex-shrink: 0 !important;
    justify-content: center !important;
  }
}

/* Common Questions FAQ (info modal) */
#infoContent.info-content-faq {
  padding: 18px 20px !important;
  text-align: left !important;
}
#infoContent.info-content-faq .mh-faq-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
}
#infoContent.info-content-faq .mh-faq-logo {
  padding: 10px 14px !important;
  background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28) !important;
  flex-shrink: 0;
}
#infoContent.info-content-faq .mh-faq-logo .logo,
#infoModal #infoContent.info-content-faq .mh-faq-logo .logo,
#infoModal #infoContent.info-content-faq .mh-faq-logo img.logo {
  height: 49px !important; /* +75% from 28px */
  max-height: 49px !important;
  width: auto !important;
  display: block;
}
#infoContent.info-content-faq .mh-faq-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.25;
}
#infoContent.info-content-faq .mh-faq-intro {
  margin: 0 0 12px 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.45;
}
#infoContent.info-content-faq .mh-faq-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}
#infoContent.info-content-faq .mh-faq-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f766e;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  line-height: 1.2;
  box-sizing: border-box;
}
#infoContent.info-content-faq .mh-faq-section {
  margin: 0 0 16px 0;
}
#infoContent.info-content-faq .mh-faq-section-title {
  margin: 0 0 8px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f766e;
}
#infoContent.info-content-faq .mh-faq-item {
  margin: 0 0 6px 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
#infoContent.info-content-faq .mh-faq-q {
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 0.92rem;
  color: #1e293b;
  line-height: 1.35;
}
#infoContent.info-content-faq .mh-faq-q::-webkit-details-marker {
  display: none;
}
#infoContent.info-content-faq .mh-faq-q::before {
  content: '+ ';
  color: #0d9488;
  font-weight: 700;
}
#infoContent.info-content-faq details[open] > .mh-faq-q::before {
  content: '- ';
}
#infoContent.info-content-faq .mh-faq-a {
  padding: 0 12px 12px 12px;
}
#infoContent.info-content-faq .mh-faq-a p {
  margin: 0;
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.5;
}
#infoContent.info-content-faq .mh-faq-foot {
  margin: 8px 0 0 0;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 0.85rem;
  line-height: 1.45;
}
@media (max-width: 480px) {
  #infoContent.info-content-faq {
    padding: 10px 12px !important;
  }
  #infoContent.info-content-faq .mh-faq-title {
    font-size: 1.1rem;
  }
  #infoContent.info-content-faq .mh-faq-logo .logo,
  #infoModal #infoContent.info-content-faq .mh-faq-logo .logo,
  #infoModal #infoContent.info-content-faq .mh-faq-logo img.logo {
    height: 38.5px !important; /* +75% from 22px */
    max-height: 38.5px !important;
    width: auto !important;
  }
  #infoContent.info-content-faq .mh-faq-intro {
    font-size: 0.85rem;
  }
  #infoContent.info-content-faq .mh-faq-q {
    font-size: 0.86rem;
    padding: 8px 10px;
  }
  #infoContent.info-content-faq .mh-faq-a p {
    font-size: 0.84rem;
  }
  #infoContent.info-content-faq .mh-faq-jump {
    font-size: 0.75rem;
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/* Hide main-page footer while Overview/Help is open (keep footer on main page otherwise) */
body.mh-overview-help-open #landing .footer-links,
html.mh-overview-help-open #landing .footer-links,
body.mh-overview-help-open #landing .copyright,
html.mh-overview-help-open #landing .copyright,
body:has(#welcomeTourModal) #landing .footer-links,
html:has(#welcomeTourModal) #landing .footer-links,
body:has(#welcomeTourModal) #landing .copyright,
html:has(#welcomeTourModal) #landing .copyright,
/* Host Login — footer links must not sit above / beside the login UI */
body.mh-host-login-open #landing .footer-links,
html.mh-host-login-open #landing .footer-links,
body.mh-host-login-open #landing .copyright,
html.mh-host-login-open #landing .copyright,
body.auth-open #landing .footer-links,
html.auth-open #landing .footer-links,
body.auth-open #landing .copyright,
html.auth-open #landing .copyright,
body:has(#authModal) #landing .footer-links,
html:has(#authModal) #landing .footer-links,
body:has(#authModal) #landing .copyright,
html:has(#authModal) #landing .copyright {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* What / Why video blurbs — two sentences, same size as the What treatment */
html body #infoModal #infoContent.info-content-what #infoWhatContentSimple p.mh-what-video-blurb,
html body #infoModal #infoContent.info-content-why #infoWhyContentSimple p.mh-why-video-blurb {
  font-size: 0.984rem !important;
  line-height: 1.5 !important;
}

/* Approved helpers map overlay (Host Dashboard Helpers tab) */
@media (max-width: 768px) {
  .mh-view-helpers-map-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    font-size: 0.95rem;
    padding: 12px 14px;
  }
  .mh-helpers-map-header {
    padding: 8px 10px;
    gap: 8px;
  }
  .mh-helpers-map-header h2 {
    font-size: 1rem;
  }
  #approvedHelpersMapBackBtn {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
  #approvedHelpersMapStatus {
    font-size: 0.82rem;
    padding: 6px 10px;
  }
  #approvedHelpersMapCanvas {
    min-height: 180px;
    height: auto;
    flex: 1 1 auto;
  }
  #approvedHelpersMapCard {
    max-height: 48vh;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  #approvedHelpersMapOverlay .leaflet-popup-content-wrapper {
    animation: none !important;
  }
}

/* What / Why / How More details + Questions: body text +15% (phones; desktop How/What uses 1) */
#infoWhatContentDetail,
#infoWhyContentDetail,
#infoHowContentDetail {
  zoom: 1.15;
}

/* Desktop How / What → More details: keep the sheet fully on-screen; scroll the guide. */
@media (min-width: 601px) {
  #infoHowContentDetail,
  #infoWhatContentDetail {
    zoom: 1;
  }

  #infoModal.mh-how-detail-active,
  #infoModal.mh-what-detail-active {
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    overflow: hidden !important;
  }

  #infoModal.mh-how-detail-active #infoModalContainer,
  #infoModalContainer.mh-how-detail-active,
  #infoModal.mh-what-detail-active #infoModalContainer,
  #infoModalContainer.mh-what-detail-active {
    animation: none !important;
    transform: none !important;
    margin: 0 auto !important;
    width: min(900px, calc(100% - 32px)) !important;
    max-width: min(900px, calc(100% - 32px)) !important;
    height: calc(100dvh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #infoContent.info-content-how.mh-how-detail-active,
  #infoContent.info-content-what.mh-what-detail-active {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #infoContent.info-content-how.mh-how-detail-active #infoHowContentDetail,
  #infoContent.info-content-what.mh-what-detail-active #infoWhatContentDetail {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  #infoModal.mh-how-detail-active #infoModalFooter,
  #infoModalContainer.mh-how-detail-active #infoModalFooter,
  #infoModal.mh-how-detail-active #infoModalContainer > div:not(#infoContent),
  #infoModal.mh-what-detail-active #infoModalFooter,
  #infoModalContainer.mh-what-detail-active #infoModalFooter,
  #infoModal.mh-what-detail-active #infoModalContainer > div:not(#infoContent) {
    flex-shrink: 0 !important;
  }

  /* Desktop Why video summary: margin around logo, player, and copy. */
  #infoModal.mh-why-simple-desktop {
    padding: 24px !important;
  }

  #infoModal.mh-why-simple-desktop #infoModalContainer,
  #infoModalContainer.mh-why-simple-desktop {
    width: min(760px, calc(100vw - 48px)) !important;
    max-width: min(760px, calc(100vw - 48px)) !important;
    margin: 0 auto !important;
  }

  #infoContent.info-content-why.mh-why-simple-desktop {
    padding: 28px 36px 20px !important;
    box-sizing: border-box !important;
  }

  #infoModal.mh-why-simple-desktop #infoModalFooter,
  #infoModalContainer.mh-why-simple-desktop #infoModalFooter,
  #infoModal.mh-why-simple-desktop #infoModalContainer > div:not(#infoContent) {
    padding: 16px 36px !important;
  }
}
#infoContent.info-content-faq .mh-faq-intro {
  font-size: 1.0925rem !important;
}
#infoContent.info-content-faq .mh-faq-section-title {
  font-size: 1.2075rem !important;
}
#infoContent.info-content-faq .mh-faq-q {
  font-size: 1.058rem !important;
}
#infoContent.info-content-faq .mh-faq-a p {
  font-size: 1.035rem !important;
}
#infoContent.info-content-faq .mh-faq-foot {
  font-size: 0.9775rem !important;
}
#infoContent.info-content-faq .mh-faq-jump {
  font-size: 0.943rem !important;
}
@media (max-width: 480px) {
  #infoContent.info-content-faq .mh-faq-intro {
    font-size: 0.9775rem !important;
  }
  #infoContent.info-content-faq .mh-faq-q {
    font-size: 0.989rem !important;
  }
  #infoContent.info-content-faq .mh-faq-a p {
    font-size: 0.966rem !important;
  }
  #infoContent.info-content-faq .mh-faq-jump {
    font-size: 0.8625rem !important;
  }
}