/* =========================================================
   BrandStory.AI — Mobile-First Responsive Stylesheet
   Applies on top of Tailwind CDN without breaking desktop.
   ========================================================= */

/* ── CSS Custom Properties ──────────────────────────────── */
:root {
  --bs-section-py:   clamp(2.5rem, 7vw, 6rem);
  --bs-px:           clamp(1rem, 4vw, 3rem);
  --bs-hero-title:   clamp(2rem, 9vw, 4.5rem);
  --bs-h2:           clamp(1.5rem, 5.5vw, 2.5rem);
  --bs-h3:           clamp(1.1rem, 3vw, 1.375rem);
  --bs-body:         clamp(0.9rem, 2.5vw, 1rem);
  --bs-tap:          44px;
  --bs-radius-card:  1.25rem;
  --bs-nav-h:        5rem;
}

/* ── Base ───────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
}

img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* Prevent decorative blobs from causing horizontal scroll */
.blur-3xl {
  overflow: hidden;
}

/* ── Prevent iOS input zoom (font-size must be ≥ 16px) ─── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
  font-size: 16px !important;
}

/* ── Smooth transitions on interactive elements ─────────── */
a, button {
  transition: all 0.2s ease;
}

/* ── Touch-friendly tap targets ─────────────────────────── */
button,
a.btn,
[role="button"] {
  min-height: var(--bs-tap);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── Modals — prevent overflow on small screens ─────────── */
#loginModal > div:last-child,
#signupModal > div:last-child {
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Navigation ─────────────────────────────────────────── */
#header {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ── Mobile Menu Slide Panel ────────────────────────────── */
#mobileMenu > div:last-child {
  max-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Lazy-load images ───────────────────────────────────── */
img:not([loading]) {
  loading: lazy;
}

/* ─────────────────────────────────────────────────────────
   MOBILE BREAKPOINT  (< 640px / sm)
   ───────────────────────────────────────────────────────── */
@media (max-width: 639px) {

  /* Section vertical padding */
  section {
    padding-top:    var(--bs-section-py) !important;
    padding-bottom: var(--bs-section-py) !important;
  }

  /* Fluid hero headings */
  h1 {
    font-size: clamp(1.875rem, 9vw, 3rem) !important;
    line-height: 1.1  !important;
    letter-spacing: -0.02em;
  }

  h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
  }

  h3:not(.bs-product-title) {
    font-size: clamp(1.05rem, 4vw, 1.25rem) !important;
  }

  /* Body text */
  p {
    font-size: clamp(0.9rem, 3vw, 1rem);
  }

  /* Modal dialog sizing */
  #loginModal > div:last-child,
  #signupModal > div:last-child {
    width: calc(100vw - 2rem) !important;
    padding: 1.5rem !important;
    border-radius: 1.25rem !important;
  }

  /* Hero right-side UI mockup: hide on very small screens */
  #hero .relative:not(.space-y-8) .rotate-2 {
    display: none;
  }

  /* Hero CTA buttons — full width stack */
  #hero .flex-col.sm\:flex-row {
    flex-direction: column !important;
    align-items: stretch  !important;
    width: 100%;
  }

  #hero .flex-col.sm\:flex-row > a,
  #hero .flex-col.sm\:flex-row > button {
    width: 100% !important;
    justify-content: center;
    text-align: center;
  }

  /* Feature / pricing trust badges wrap nicely */
  .flex.items-center.gap-8 {
    flex-wrap: wrap;
    gap: 0.75rem !important;
  }

  /* Footer newsletter input stacks */
  #newsletterForm {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  #newsletterForm input,
  #newsletterForm button {
    width: 100% !important;
  }

  /* Pricing-only 3-col → full width on mobile */
  .grid.grid-cols-3:not([class*="md:"]):not([class*="sm:"]) {
    grid-template-columns: 1fr !important;
  }

  /* Stats row: wrap into 2-col on mobile */
  .grid.grid-cols-4:not([class*="md:"]):not([class*="lg:"]) {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* lg/md 3-col grids → single column on mobile */
  .grid.lg\:grid-cols-3,
  .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* CTA sections: scale text */
  section.bg-slate-900 h2,
  section.hero-gradient h2 {
    font-size: clamp(1.5rem, 7vw, 2.25rem) !important;
  }

  section.bg-slate-900 p,
  section.hero-gradient p {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem);
  }

  /* CTA button: full width */
  section.bg-slate-900 a.inline-block,
  section.bg-slate-900 a[class*="px-"],
  section.hero-gradient a[class*="px-"] {
    display: block !important;
    width: 100% !important;
    text-align: center;
    box-sizing: border-box;
  }

  /* Reduce large padding on hero sections */
  .py-24 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .py-20 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Blog/content 2-col grids → single col on mobile */
  .grid.md\:grid-cols-2:not([class*="grid-cols-2 "]) {
    grid-template-columns: 1fr !important;
  }

  /* Prevent wide tables from overflowing */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Toast: full width on mobile */
  #toastContainer {
    left: 1rem !important;
    right: 1rem !important;
    top: 5.5rem !important;
  }

  /* Mobile menu panel width */
  #mobileMenu > div:last-child {
    width: 100vw !important;
  }
}

/* ─────────────────────────────────────────────────────────
   TABLET BREAKPOINT  (640px – 1023px)
   ───────────────────────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {

  /* Section vertical padding */
  section {
    padding-top:    clamp(3rem, 7vw, 5rem) !important;
    padding-bottom: clamp(3rem, 7vw, 5rem) !important;
  }

  /* Headings */
  h1 {
    font-size: clamp(2.25rem, 6vw, 3.5rem) !important;
    line-height: 1.1 !important;
  }

  h2 {
    font-size: clamp(1.75rem, 4.5vw, 2.25rem) !important;
  }

  /* Modal */
  #loginModal > div:last-child,
  #signupModal > div:last-child {
    width: min(28rem, calc(100vw - 2rem)) !important;
  }

  /* 3-column grids → 2 columns on tablet */
  .grid.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 4-column grids → 2 columns on tablet */
  .grid.grid-cols-4,
  .grid.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Pricing 3-col → single stack */
  .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
    max-width: 32rem;
    margin-inline: auto;
  }
}

/* ─────────────────────────────────────────────────────────
   MOBILE STICKY BOTTOM NAVIGATION
   Shows on mobile to give native app feel
   ───────────────────────────────────────────────────────── */
@media (max-width: 1023px) {

  /* Bottom nav bar */
  #mobileBottomNav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,0.06);
    padding: 0.5rem 0 env(safe-area-inset-bottom, 0.5rem);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.06);
  }

  /* Give body room above the bottom nav */
  body {
    padding-bottom: 4.5rem;
  }
}

@media (min-width: 1024px) {
  /* Desktop: hide mobile bottom nav */
  #mobileBottomNav {
    display: none !important;
  }

  /* Desktop: remove bottom padding */
  body {
    padding-bottom: 0;
  }
}

/* ─────────────────────────────────────────────────────────
   BOTTOM NAV ITEM STYLES
   ───────────────────────────────────────────────────────── */
.bs-bottom-nav-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.4rem 0.25rem;
  text-decoration: none;
  color: #64748b;
  font-size: 0.65rem;
  font-weight: 500;
  min-height: var(--bs-tap);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}

.bs-bottom-nav-item i {
  font-size: 1.1rem;
  line-height: 1;
}

.bs-bottom-nav-item:hover,
.bs-bottom-nav-item.active {
  color: #FF5B22;
}

.bs-bottom-nav-item.active i {
  color: #FF5B22;
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE UTILITY HELPERS
   ───────────────────────────────────────────────────────── */

/* Fluid container padding override */
@media (max-width: 639px) {
  .max-w-\[1440px\] {
    padding-left:  1rem !important;
    padding-right: 1rem !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .max-w-\[1440px\] {
    padding-left:  1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* ── Smooth card touch feedback ─────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .glow-hover:active,
  .group:active .group-hover\:scale-110 {
    transform: scale(0.97);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  }

  /* Remove hover-only animations on touch devices */
  .hover\:-translate-y-0\.5:hover,
  .hover\:scale-105:hover,
  .hover\:-translate-y-1:hover {
    transform: none;
  }
}

/* ── Image optimization: lazy loading default ───────────── */
img {
  loading: lazy;
}

/* ── Scroll snap for horizontal carousels (if any) ──────── */
.scroll-snap-x {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.scroll-snap-x::-webkit-scrollbar {
  display: none;
}

.scroll-snap-x > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ── Focus styles for keyboard accessibility ────────────── */
:focus-visible {
  outline: 2px solid #FF5B22;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Selection color ────────────────────────────────────── */
::selection {
  background: rgba(255, 91, 34, 0.2);
  color: inherit;
}

/* ─────────────────────────────────────────────────────────
   PRODUCT GRID — unified 10-card tile system
   ───────────────────────────────────────────────────────── */

/* Grid container */
.bs-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* mobile: 2 columns → 5 full rows */
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .bs-product-grid {
    grid-template-columns: repeat(3, 1fr); /* tablet: 3 cols */
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .bs-product-grid {
    grid-template-columns: repeat(5, 1fr); /* desktop: 5 cols */
    gap: 1.25rem;
  }
}

/* Card base */
.bs-product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 1.1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  height: 100%; /* equal height tiles */
  position: relative;
  overflow: hidden;
}

.bs-product-card:hover {
  border-color: var(--card-accent, #FF5B22);
  box-shadow: 0 6px 24px -4px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.bs-product-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-accent, #FF5B22);
  opacity: 0;
  transition: opacity 0.2s;
}

.bs-product-card:hover::before {
  opacity: 1;
}

/* Icon pill */
.bs-product-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.bs-product-card:hover .bs-product-icon {
  transform: scale(1.1);
}

/* Body */
.bs-product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bs-product-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.375rem;
  line-height: 1.3;
}

.bs-product-desc {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.5;
  flex: 1;
  margin-bottom: 0.625rem;
}

.bs-product-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--card-accent, #3939FF);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
}

.bs-product-link i {
  font-size: 0.65rem;
  transition: transform 0.2s;
}

.bs-product-card:hover .bs-product-link i {
  transform: translateX(3px);
}

/* Mobile: compact horizontal layout (icon left, text right) */
@media (max-width: 639px) {
  .bs-product-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem;
    border-radius: 1rem;
  }

  .bs-product-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    font-size: 1rem;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .bs-product-desc {
    display: none; /* hide description on very small screens — cleaner tiling */
  }

  .bs-product-link {
    font-size: 0.7rem;
    margin-top: 0.25rem;
  }
}

/* ─────────────────────────────────────────────────────────
   ACCOUNT / BILLING PAGE — mobile tab nav & components
   ───────────────────────────────────────────────────────── */

/* Section tab pills */
.bs-tab-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
  text-decoration: none;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  min-height: 2rem;
  transition: all 0.15s ease;
}

.bs-tab-pill:hover,
.bs-tab-pill.active {
  background: #FF5B22;
  color: #fff;
  border-color: #FF5B22;
}

/* Scrollbar hide utility */
.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Notification rows */
.bs-notif-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 0;
}

.bs-notif-text {
  flex: 1;
  min-width: 0;
}

.bs-notif-badges {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 479px) {
  .bs-notif-row {
    flex-direction: column;
    gap: 0.5rem;
  }

  .bs-notif-badges {
    justify-content: flex-start;
  }
}

/* Plan cards: ensure equal height on desktop, proper mobile stacking */
@media (max-width: 767px) {
  .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Plan card featured badge positioning fix */
  .plan-card.featured .absolute.-top-3 {
    position: static !important;
    transform: none !important;
    display: inline-block;
    margin-bottom: 0.75rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    padding: 0.2rem 0.75rem;
  }
}

/* ─────────────────────────────────────────────────────────
   SPECIFIC COMPONENT FIXES
   ───────────────────────────────────────────────────────── */

/* CTA buttons inside text-center containers need inline-flex */
.text-center > a.flex,
.text-center > div > a.flex {
  display: inline-flex !important;
  width: auto !important;
}

/* Problem/Solution section 2-col grid: single col on mobile */
@media (max-width: 1023px) {
  /* 2-column grids that should stack on mobile/tablet */
  .grid.grid-cols-2:not(.sm\:grid-cols-3):not(.lg\:grid-cols-5):not(.lg\:grid-cols-4) {
    grid-template-columns: 1fr !important;
  }
}

/* Stats number: scale down on mobile */
@media (max-width: 639px) {
  .text-5xl.font-black {
    font-size: clamp(2.25rem, 10vw, 3rem) !important;
  }
}

/* Hero heading in features.html and other interior pages */
@media (max-width: 639px) {
  .py-24 .text-5xl,
  .py-24 .text-6xl,
  .py-24 .text-7xl {
    font-size: clamp(1.875rem, 9vw, 3rem) !important;
    line-height: 1.1 !important;
  }

  .text-4xl {
    font-size: clamp(1.5rem, 7vw, 2.25rem) !important;
  }

  .text-xl {
    font-size: clamp(1rem, 4vw, 1.25rem) !important;
  }
}

/* Blog article cards – ensure image doesn't overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Navigation: ensure hamburger area is touch-friendly */
button[onclick*="toggleMobileMenu"] {
  min-width: var(--bs-tap);
  min-height: var(--bs-tap);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT PAGES — Comprehensive Mobile / Tablet Layout Fixes
   Covers: blog-writingtool, social-media-scheduling,
           ai-text-humanization, ai-crm-home,
           ai-powered-seo-audit, website-builder
   ══════════════════════════════════════════════════════════ */

/* ── ALL breakpoints < 1024px: Unlock fixed hero heights ── */
@media (max-width: 1023px) {

  /* Fixed-pixel heights prevent hero adapting to small screens */
  .h-\[800px\], .h-\[850px\], .h-\[900px\] {
    height: auto !important;
    min-height: auto !important;
  }

  section#hero {
    height: auto !important;
    min-height: auto !important;
    padding-top: 3.5rem !important;
    padding-bottom: 3rem !important;
  }

  /* Hero inner container px-12 → comfortable tablet padding */
  section#hero .px-12,
  section#hero .px-10 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Hero two-column grids → single column */
  section#hero .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Blog Writer hero: flex row → column (uses w-1/2 children, not grid) */
  section#hero.hero-gradient {
    flex-direction: column !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    gap: 2rem !important;
  }

  section#hero.hero-gradient .w-1\/2,
  section#hero .w-1\/2 {
    width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* Automation panel: grid → single col on tablet */
  section#automation .rounded-\[3rem\].grid.grid-cols-2,
  section#automation .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  section#automation .p-16 { padding: 2.5rem !important; }

  /* Website Builder: editing panel h-[700px] flex → auto-height column */
  section#editing .h-\[700px\] { height: auto !important; }

  section#editing .rounded-\[3rem\].flex.overflow-hidden {
    flex-direction: column !important;
  }

  section#editing .w-1\/3 {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #f1f5f9;
    min-height: 280px;
  }

  section#editing .w-2\/3 {
    width: 100% !important;
    min-height: 260px;
  }

  /* Template grid: 4-col → 2-col on tablet */
  #templateGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }

  /* Template section header flex → stack vertically */
  section#templates .flex.justify-between.items-end {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  #filterBtns {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
}

/* ── Mobile only (< 640px): Full single-column treatment ── */
@media (max-width: 639px) {

  /* ── All section px-12 / px-10 padding → mobile-safe ─── */
  .px-12 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .px-10 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ── Hero CTA button groups → stack full-width ─────────── */
  section#hero .flex.items-center.gap-6,
  section#hero .flex.items-center.gap-4:not(.mt-12):not(.flex-wrap) {
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100%;
  }

  section#hero .flex.items-center.gap-6 > a,
  section#hero .flex.items-center.gap-6 > button,
  section#hero .flex.items-center.gap-4:not(.mt-12):not(.flex-wrap) > a,
  section#hero .flex.items-center.gap-4:not(.mt-12):not(.flex-wrap) > button {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
  }

  /* ── All product-page 2-col grids → single col ──────────── */
  section#comparison .grid.grid-cols-2,
  section#demo .grid.grid-cols-2,
  section#features .grid.grid-cols-2,
  section#use-cases .grid.grid-cols-2,
  section#faq .grid.grid-cols-2,
  section#integrations .grid.grid-cols-2,
  section#analysis .grid.grid-cols-2,
  section#workflow .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  section#faq .gap-24,
  section#workflow .gap-24 {
    gap: 2rem !important;
  }

  /* ── Automation panel inner padding ─────────────────────── */
  section#automation .p-16 { padding: 1.25rem !important; }
  section#automation .p-12 { padding: 1.25rem !important; }

  /* ── Blog Writer: how-it-works flex row → column ────────── */
  #workflow .flex.justify-between {
    flex-direction: column !important;
    gap: 2rem !important;
    align-items: center !important;
  }

  #workflow .flex.justify-between .w-1\/4 {
    width: 80% !important;
  }

  /* ── Blog Writer: before/after flex → stack ─────────────── */
  section#comparison .flex.items-center.gap-16,
  section#comparison .flex.items-center.gap-12 {
    flex-direction: column !important;
    gap: 2rem !important;
  }

  section#comparison .flex.items-center.gap-16 > .w-1\/2,
  section#comparison .flex.items-center.gap-12 > .w-1\/2 {
    width: 100% !important;
  }

  /* ── Use-case tabs: horizontal scroll ───────────────────── */
  #usecaseTabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0 !important;
    gap: 0 !important;
  }

  #usecaseTabs::-webkit-scrollbar { display: none; }

  #usecaseTabs button {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.8125rem !important;
    padding: 0.75rem 0.875rem !important;
  }

  /* ── CTA section: remove huge padding ───────────────────── */
  section .p-20,
  section#cta .p-20 {
    padding: 2rem 1.25rem !important;
  }

  section#cta .rounded-\[3rem\],
  section .rounded-\[3rem\] {
    border-radius: 1.5rem !important;
  }

  /* ── Template grid → 2-col on mobile (smaller cards) ────── */
  #templateGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.875rem !important;
  }

  .template-card .h-80 {
    height: 9rem !important;
  }

  .template-card .h-80 img {
    height: 100%;
    object-fit: cover;
  }

  /* ── Scheduling: platform logos flex wrap ───────────────── */
  .flex.flex-wrap.justify-center.gap-12,
  .flex.justify-center.gap-12 {
    gap: 1rem !important;
    flex-wrap: wrap !important;
  }

  /* ── SEO Audit: comparison before/after grid labels ────── */
  section#comparison .flex.justify-center.gap-4 {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  section#comparison .flex.justify-center.gap-4 button {
    flex: 0 0 auto;
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
  }

  /* ── Scheduling: workflow steps section ─────────────────── */
  section#workflow .space-y-12 {
    gap: 2rem;
  }

  /* ── Analysis section dark bg ───────────────────────────── */
  section#analysis {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  section#analysis .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  section#analysis .grid.grid-cols-2 {
    gap: 2rem !important;
  }

  /* ── AI Humanizer: use case image → reasonable height ───── */
  #uc-image {
    height: 13rem !important;
  }

  /* ── AI Humanizer: mode cards 3-col → already 1-col from main rules ── */

  /* ── CTA section: stack buttons ─────────────────────────── */
  section#cta .flex.flex-col.items-center.gap-6,
  section .flex.flex-col.gap-4 {
    width: 100%;
  }

  /* Website builder FAQ grid → stack */
  section#faq .grid.grid-cols-2.gap-20,
  section#faq.py-24 .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Website builder: editing panel padding */
  section#editing .p-10 { padding: 1.25rem !important; }
  section#editing .p-8  { padding: 1rem !important; }

  /* Ensure filter buttons wrap properly */
  #filterBtns .filter-btn {
    padding: 0.5rem 0.875rem !important;
    font-size: 0.8125rem !important;
  }
}

/* ══════════════════════════════════════════════════════════
   BRAND STRATEGY ANALYZER — Mobile / Tablet Layout Fixes
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  /* Dashboard: 12-col grid → single column */
  section#dashboard .grid.grid-cols-12 {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  section#dashboard .col-span-5,
  section#dashboard .col-span-7 {
    grid-column: span 1 !important;
  }

  /* Features: 3-col card grid → 2-col on tablet */
  section#features .grid.grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
}

@media (max-width: 639px) {
  /* Features: 3-col card grid → 1-col on mobile */
  section#features .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Dashboard: form grid → single col */
  section#dashboard .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Dashboard: large inner padding */
  section#dashboard .p-10 {
    padding: 1.25rem !important;
  }

  /* Comparison section: 2-col → 1-col */
  section#comparison .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
}