/* merge overrides: keep original intact */
.hero, .hero * { scroll-margin-top: 80px; }
.ai-panel .lead{color:#dbeafe}
.ai-panel ul{padding-left:20px}
.ai-panel ul li{margin:4px 0}
.ai-form .btn-success{background:#25D366;border:none}
#ai-modal .progress-bar{background:#25D366}


/* Mobile-first optimizations */
.stock-images-top{margin:10px 0 16px;}
.hero-tagline{font-size:28px; line-height:1.25; margin:0 0 8px; font-weight:800;}
.hero-sub{font-size:16px; line-height:1.6; color:#4b5563; margin:0;}

@media (min-width:576px){
  .hero-tagline{font-size:32px}
  .hero-sub{font-size:17px}
}
@media (min-width:768px){
  .hero-tagline{font-size:36px}
}
@media (min-width:992px){
  .hero-tagline{font-size:40px}
}

/* Ensure images and embeds shrink properly */
img, video, canvas{max-width:100%; height:auto}

/* Grid stacking on small screens (if not already responsive) */
@media (max-width: 768px){
  .row.g-4.align-items-center{display:block}
  .row.g-4.align-items-center > [class*="col-"]{width:100%; max-width:100%}
  .preview-user-description__component{padding-top:6px}
}

/* Improve tap targets */
button, .btn{min-height:44px}
input, select{min-height:44px}

/* Prevent layout shift on small screens */
body{word-wrap:break-word; overflow-x:hidden}


/* Modal layout polish */
#ai-modal .btn{min-height:44px}
#ai-modal .btn-success{background:#25D366;border:none}
#ai-modal .progress-bar{background:#25D366}


/* Mobile-first enhancements */
button, .btn { min-height: 44px; display:inline-flex; align-items:center; gap:8px; }
.wa-icon { width:20px; height:20px; display:inline-block; }
img, video, canvas { max-width: 100%; height: auto; }
body { overflow-x: hidden; word-wrap: break-word; }
input, select, textarea { min-height: 44px; }

/* Scalable headings */
.hero-tagline { font-size: 28px; line-height: 1.25; font-weight: 800; margin: 0 0 8px; }
.hero-sub { font-size: 16px; line-height: 1.6; color: #4b5563; margin: 0; }

@media (min-width: 576px) {
  .hero-tagline { font-size: 32px; }
  .hero-sub { font-size: 17px; }
}
@media (min-width: 768px) {
  .hero-tagline { font-size: 36px; }
}
@media (min-width: 992px) {
  .hero-tagline { font-size: 40px; }
}

/* Careful stacking for common grid wrappers */
@media (max-width: 768px) {
  .row, .grid, .hero-grid, .section-grid { display:block; }
  [class*="col-"], .grid > * { width:100% !important; max-width:100% !important; }
}