/* ============================================================
   ScreenStudioDeals — Global Mobile Responsive Fixes
   Covers: all pages, guide pages, legal pages, guides archive
   Breakpoints: 1024px | 768px | 480px | 360px
   ============================================================ */

/* ============================================================
   GLOBAL BASE FIXES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Prevent any element from overflowing horizontally */
img, video, iframe, table, pre, code {
  max-width: 100%;
}

/* All tables scrollable on mobile */
table {
  width: 100%;
  border-collapse: collapse;
}

.table-wrap,
.comparison-table-wrap,
.feature-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  display: block;
}

/* Video embeds always responsive */
.video-embed-container,
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-embed-container iframe,
.video-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* Buttons: allow wrapping on small screens */
.btn {
  white-space: normal;
  word-break: break-word;
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announcement-bar {
  padding: 8px 40px 8px 16px;
  flex-wrap: wrap;
}
.announcement-bar p {
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
  width: 100%;
}

/* ============================================================
   HEADER — STICKY HEADER FIX
   ============================================================ */
.site-header,
#siteHeader,
#header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ============================================================
   ARTICLE / GUIDE PAGE LAYOUT  (two-column → single on mobile)
   The inline <style> in each guide defines this;
   we only override on smaller screens below.
   ============================================================ */
.article-layout {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* ============================================================
   MINI STATS BAR (hero stats row in guide pages)
   ============================================================ */
.mini-stats-bar,
.hero-stats-bar,
[class*="stats-bar"] {
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================================
   COMPARISON TABLES — force scroll wrapper
   ============================================================ */
.comparison-table,
.feature-table {
  min-width: 540px; /* forces scroll on small screens */
}

/* ============================================================
   GUIDE PAGE — INLINE CTA BUTTONS
   ============================================================ */
.inline-cta .cta-buttons,
.cta-buttons {
  flex-wrap: wrap;
  gap: 10px;
}

/* ============================================================
   SIDEBAR — hide on mobile, show below content
   ============================================================ */
.article-sidebar,
.sidebar-sticky {
  position: static !important;
  top: auto !important;
}

/* ============================================================
   STICKY DEAL WIDGET — smaller + repositioned on mobile
   ============================================================ */
.sticky-deal {
  max-width: 280px;
  right: 8px;
  bottom: 8px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-nav ul,
.footer-links {
  flex-direction: column;
}

/* ============================================================
   LEGAL PAGE LAYOUT
   ============================================================ */
.legal-page {
  padding: 40px 16px 60px;
}
.legal-hero-inner {
  padding: 0 16px;
}

/* ============================================================
   ============================================================
   TABLET — max-width: 1024px
   ============================================================
   ============================================================ */
@media (max-width: 1024px) {

  /* Article guide pages — stack sidebar below main content */
  .article-layout,
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns:1fr 320px"] {
    display: block !important;
  }

  .article-sidebar,
  .article-layout > aside,
  .article-layout > div:last-child {
    margin-top: 32px;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Blog grid — 2 columns */
  .blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .blog-featured {
    grid-column: span 2 !important;
  }

  /* Guides grid */
  .guides-grid,
  [class*="guide-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Footer grid */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px;
  }

  /* Nav hidden on tablet too if too crowded */
  .nav-menu {
    gap: 4px;
  }
  .nav-link {
    padding: 7px 10px;
    font-size: 0.82rem;
  }

  /* Table of contents sidebar */
  .toc-sidebar,
  .sticky-sidebar {
    position: static !important;
    width: 100% !important;
  }

  /* Stats grid */
  .stats-grid,
  .hero-stats-inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Step lists */
  .steps-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Use-case cards */
  .use-case-grid,
  .feature-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Inline CTA padding */
  .inline-cta,
  .cta-section-inline {
    padding: 28px 20px !important;
  }
}

/* ============================================================
   ============================================================
   MOBILE — max-width: 768px
   ============================================================
   ============================================================ */
@media (max-width: 768px) {

  /* ---- GLOBAL ---- */
  .container {
    padding: 0 16px !important;
  }
  .section {
    padding: 44px 0 !important;
  }
  .section-sm {
    padding: 28px 0 !important;
  }

  /* ---- TYPOGRAPHY ---- */
  h1 { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
  h2 { font-size: clamp(1.3rem, 4vw, 1.75rem) !important; }
  h3 { font-size: clamp(1.1rem, 3.5vw, 1.4rem) !important; }

  /* ---- ANNOUNCEMENT BAR ---- */
  .announcement-bar p { font-size: 0.72rem; }
  .announcement-bar .hide-mobile { display: none !important; }

  /* ---- NAVIGATION ---- */
  .nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.99);
    backdrop-filter: blur(20px);
    padding: 16px;
    gap: 4px;
    border-bottom: 1px solid #e8e8e8;
    z-index: 999;
    max-height: 80vh;
    overflow-y: auto;
  }
  .nav-menu.open { display: flex !important; }
  .nav-link {
    color: #111 !important;
    padding: 10px 14px !important;
    width: 100%;
    border-radius: 8px;
    font-size: 0.9rem !important;
  }
  .nav-cta .btn-primary { display: none; }
  .hamburger { display: flex !important; }

  /* ---- HERO (guide pages) ---- */
  .hero-badge { font-size: 0.72rem; padding: 4px 10px; }

  /* Hero stats mini bars */
  .mini-stats-bar,
  [style*="display:flex"][style*="gap:24px"],
  .hero-stats-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .stat-item,
  .mini-stat {
    min-width: calc(50% - 8px);
    flex: 1 1 calc(50% - 8px);
  }

  /* ---- ARTICLE LAYOUT ---- */
  .article-layout {
    display: block !important;
    grid-template-columns: unset !important;
  }
  .article-layout > aside,
  .article-sidebar {
    display: block !important;
    width: 100% !important;
    margin-top: 40px !important;
    position: static !important;
  }

  /* Sticky sidebar becomes static */
  [style*="position: sticky"],
  [style*="position:sticky"] {
    position: static !important;
  }

  /* ---- TABLES — ALL TABLES scrollable ---- */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 100%;
    white-space: nowrap;
    font-size: 0.82rem;
  }
  table th,
  table td {
    padding: 10px 12px !important;
    font-size: 0.82rem !important;
    white-space: normal;
    min-width: 100px;
  }
  table th:first-child,
  table td:first-child {
    min-width: 120px;
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 1;
  }

  /* Wrap any bare table in scroll container */
  .comparison-table-wrapper,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    display: block;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin: 16px 0;
  }

  /* ---- VIDEO EMBEDS ---- */
  .video-embed-wrap,
  [style*="max-width:640px"],
  [style*="max-width: 640px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* YouTube iframes */
  iframe[src*="youtube"],
  iframe[src*="youtu.be"] {
    width: 100% !important;
    min-height: 220px;
    height: auto !important;
    aspect-ratio: 16/9;
  }

  /* ---- IMAGES ---- */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---- HERO SECTIONS ---- */
  #hero,
  .page-hero,
  [style*="min-height: calc(100vh"] {
    min-height: auto !important;
    padding: 48px 0 36px !important;
  }

  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .hero-visual { display: none !important; }

  .hero-title {
    font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
    line-height: 1.2 !important;
  }

  /* Guide page hero badges row */
  [style*="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px"],
  [style*="display: flex; flex-wrap: wrap; gap: 8px"] {
    gap: 6px !important;
  }

  /* ---- GRIDS — collapse all to single column ---- */
  .blog-grid {
    grid-template-columns: 1fr !important;
  }
  .blog-featured {
    grid-column: span 1 !important;
  }
  .guides-grid,
  .feature-cards-grid,
  .use-case-grid,
  .checklist-grid,
  .privacy-cards,
  .steps-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---- GUIDE page two-column content grid ---- */
  [style*="display:grid"][style*="1fr 300px"],
  [style*="display: grid"][style*="1fr 300px"],
  [style*="display:grid"][style*="1fr 320px"],
  [style*="display: grid"][style*="1fr 320px"],
  [style*="display:grid"][style*="repeat(2"],
  [style*="display: grid"][style*="repeat(2"],
  [style*="display:grid"][style*="repeat(3"] {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  /* ---- STEP LISTS ---- */
  .step-list {
    padding-left: 0;
  }
  .step-item {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ---- INLINE CTA ---- */
  .inline-cta {
    padding: 24px 16px !important;
    text-align: center;
  }
  .inline-cta .cta-buttons,
  .cta-buttons,
  .hero-cta-group {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .inline-cta .btn,
  .cta-buttons .btn,
  .hero-cta-group .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* ---- CTA BANNER ---- */
  .cta-banner {
    padding: 36px 20px !important;
    border-radius: 16px !important;
  }
  .cta-banner h2 { font-size: 1.4rem !important; }
  .cta-banner-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .cta-banner-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  /* ---- FOOTER ---- */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-bottom: 32px !important;
  }
  footer {
    padding: 48px 0 0 !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }
  .footer-bottom > div {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px !important;
  }

  /* ---- SIDEBAR ---- */
  .sidebar,
  .article-sidebar .sidebar,
  .deal-sidebar {
    position: static !important;
    width: 100% !important;
    margin-top: 32px !important;
  }

  /* ---- STICKY DEAL WIDGET ---- */
  .sticky-deal {
    max-width: calc(100vw - 16px) !important;
    right: 8px !important;
    bottom: 8px !important;
    left: auto;
  }

  /* ---- TOC (table of contents) ---- */
  .toc-box,
  .table-of-contents {
    margin: 20px 0 !important;
  }

  /* ---- PULL QUOTES ---- */
  .pull-quote {
    margin: 16px 0 !important;
    padding: 16px !important;
  }

  /* ---- STAT ROWS ---- */
  .stat-row,
  .stats-row {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .stat-box {
    width: 100% !important;
    text-align: center;
  }

  /* ---- COMPARISON TABLE (guide pages) ---- */
  .comp-table-container,
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
    width: calc(100% + 32px);
  }

  /* ---- CHECKLIST ---- */
  .checklist {
    padding-left: 0 !important;
  }
  .checklist-item {
    font-size: 0.875rem !important;
  }

  /* ---- RELATED POSTS ---- */
  .related-grid,
  .related-posts {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ---- BREADCRUMB ---- */
  .breadcrumb,
  nav[aria-label="Breadcrumb"] ol {
    flex-wrap: wrap !important;
    font-size: 0.75rem !important;
  }

  /* ---- BADGES ROW ---- */
  [style*="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px"] {
    gap: 6px !important;
  }
  .hero-badge,
  .meta-badge,
  .badge {
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
  }

  /* ---- ARTICLE META ROW ---- */
  .article-meta-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ---- DEAL CARDS / PRICING CARDS ---- */
  .deal-card,
  .pricing-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---- MINI STATS BAR (guide page hero) ---- */
  .mini-stats-strip,
  [style*="background:rgba(255,255,255,0.05)"][style*="border-radius:16px"][style*="padding:20px"],
  .stats-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* ---- GUIDE PAGE HERO SECTION ---- */
  [style*="padding: 60px 0 50px"],
  [style*="padding:60px 0 50px"],
  [style*="padding: 52px 0 44px"],
  [style*="padding:52px 0 44px"] {
    padding: 40px 0 30px !important;
  }

  /* ---- LARGE INLINE GRIDS ---- */
  [style*="display:grid;grid-template-columns:repeat(3"],
  [style*="display: grid; grid-template-columns: repeat(3"],
  [style*="display:grid;grid-template-columns:repeat(2"],
  [style*="display: grid; grid-template-columns: repeat(2"] {
    display: block !important;
  }

  /* Feature use-case cards in guide pages */
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- COMPARISON TABLE full-width on mobile ---- */
  [style*="overflow-x: auto"],
  [style*="overflow-x:auto"] {
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: calc(100% + 32px) !important;
  }
}

/* ============================================================
   ============================================================
   SMALL MOBILE — max-width: 480px
   ============================================================
   ============================================================ */
@media (max-width: 480px) {

  /* ---- TYPOGRAPHY ---- */
  h1 { font-size: 1.5rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }
  p  { font-size: 0.9rem !important; }

  /* ---- CONTAINER ---- */
  .container { padding: 0 12px !important; }

  /* ---- BUTTONS ---- */
  .btn { padding: 12px 18px !important; font-size: 0.85rem !important; }
  .btn-lg { padding: 14px 22px !important; font-size: 0.9rem !important; }
  .btn-sm { padding: 8px 14px !important; font-size: 0.78rem !important; }

  /* ---- ANNOUNCEMENT BAR ---- */
  .announcement-bar { padding: 7px 36px 7px 12px; }
  .announcement-bar p { font-size: 0.7rem; }

  /* ---- NAV LOGO ---- */
  .nav-logo { font-size: 1.1rem; gap: 7px; }
  .nav-logo .logo-icon { width: 32px; height: 32px; font-size: 0.9rem; }

  /* ---- HERO ---- */
  .hero-title,
  [class*="hero"] h1 {
    font-size: 1.45rem !important;
    line-height: 1.25 !important;
  }
  .hero-description,
  [class*="hero"] > p {
    font-size: 0.875rem !important;
  }

  /* ---- BADGES ---- */
  .hero-badge,
  .meta-badge,
  .nav-badge {
    font-size: 0.65rem !important;
    padding: 3px 7px !important;
  }

  /* ---- TABLES ---- */
  table th, table td {
    font-size: 0.75rem !important;
    padding: 8px 10px !important;
  }

  /* ---- STAT NUMBERS ---- */
  .stat-number,
  .big-save,
  .sticky-new-price {
    font-size: 1.4rem !important;
  }

  /* ---- STICKY DEAL ---- */
  .sticky-deal {
    max-width: calc(100vw - 12px) !important;
    right: 6px !important;
    bottom: 6px !important;
  }
  .sticky-deal-body { padding: 12px; }
  .timer-val { font-size: 0.85rem !important; min-width: 26px; }

  /* ---- FOOTER ---- */
  footer { padding: 36px 0 0 !important; }
  .footer-grid { gap: 20px !important; }

  /* ---- GUIDE ARTICLE TEXT ---- */
  .article-title,
  .article-subtitle {
    font-size: 1.45rem !important;
  }

  /* ---- CALLOUT BOXES ---- */
  .callout,
  .callout-tip,
  .callout-warning,
  .tip-box,
  .warning-box {
    padding: 14px 16px !important;
    font-size: 0.85rem !important;
  }

  /* ---- CTA SECTION ---- */
  .cta-banner {
    padding: 28px 14px !important;
    border-radius: 12px !important;
  }
  .cta-banner h2 { font-size: 1.2rem !important; }

  /* ---- LEGAL PAGES ---- */
  .legal-page h2 { font-size: 1.05rem !important; }
  .legal-page p,
  .legal-page ul li { font-size: 0.875rem !important; }

  /* ---- SECTION HEADERS ---- */
  .section-header { margin-bottom: 24px !important; }
  .section-tag { font-size: 0.72rem !important; }

  /* ---- CARDS ---- */
  .blog-card-body { padding: 16px !important; }
  .blog-title { font-size: 0.95rem !important; }
  .blog-excerpt { font-size: 0.82rem !important; }

  /* ---- GUIDE CARDS ---- */
  .guide-card-body { padding: 16px !important; }

  /* ---- HIDE LARGE DECORATIVE ELEMENTS ---- */
  .hero-orb,
  .hero-bg-shapes {
    display: none !important;
  }
}

/* ============================================================
   ============================================================
   EXTRA SMALL — max-width: 360px (iPhone SE etc)
   ============================================================
   ============================================================ */
@media (max-width: 360px) {
  .container { padding: 0 10px !important; }

  h1 { font-size: 1.3rem !important; }
  h2 { font-size: 1.15rem !important; }

  .btn { padding: 10px 14px !important; font-size: 0.8rem !important; }

  .nav-logo { font-size: 1rem; }

  .announcement-bar p { font-size: 0.65rem; }

  table th, table td { font-size: 0.7rem !important; padding: 7px 8px !important; }
}

/* ============================================================
   GUIDE-PAGE SPECIFIC FIXES
   Article layout, stat bars, related posts, comparison tables
   ============================================================ */

/* Article layout two-column → single */
@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr !important;
  }
  .article-layout aside {
    order: 99; /* push sidebar to bottom */
    position: static !important;
    width: 100% !important;
  }
}

/* Guide hero stat strip */
@media (max-width: 768px) {
  /* Stats strip in guide hero */
  [style*="border-radius:16px;padding:20px 24px"] {
    padding: 16px !important;
  }
  [style*="display:flex;align-items:center;gap:8px;"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Table of Contents */
  .toc-nav {
    columns: 1 !important;
  }

  /* Step list */
  .step-list-item {
    flex-direction: column !important;
  }
  .step-number {
    margin-bottom: 8px;
  }

  /* Comparison table wrapper */
  .comp-table {
    overflow-x: auto;
    display: block;
  }

  /* Privacy cards */
  .privacy-card-grid,
  .feature-grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* Use case cards */
  .use-case-card-grid {
    grid-template-columns: 1fr !important;
  }

  /* Related posts grid */
  .related-posts-grid,
  .related-articles {
    grid-template-columns: 1fr !important;
  }

  /* Bottom CTA buttons */
  .bottom-cta-buttons {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .bottom-cta-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Inline stat bars */
  .stat-pills-row,
  .stats-pills {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .stat-pill {
    flex: 1 1 calc(50% - 4px);
    min-width: 120px;
  }

  /* Author strip */
  .author-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

/* ============================================================
   INDEX PAGE — Homepage specific fixes
   ============================================================ */
@media (max-width: 768px) {
  /* Deals grid */
  .deals-grid {
    grid-template-columns: 1fr !important;
  }

  /* Feature showcase */
  .feature-showcase,
  .showcase-grid {
    grid-template-columns: 1fr !important;
  }

  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: 1fr !important;
  }

  /* Comparison table on index */
  .savings-table {
    font-size: 0.78rem !important;
  }

  /* Pricing grid */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 380px;
    margin: 0 auto;
  }

  /* Steps */
  .steps-grid {
    grid-template-columns: 1fr !important;
  }

  /* Audience */
  .audience-grid {
    grid-template-columns: 1fr !important;
  }

  /* Trust strip */
  .trust-strip-inner {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  /* Hero CTA buttons */
  .hero-cta-group {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .hero-cta-group .btn {
    width: 100%;
    justify-content: center;
  }

  /* Hero savings badges */
  .hero-savings-badges {
    flex-wrap: wrap !important;
  }
}

/* ============================================================
   GUIDES ARCHIVE PAGE SPECIFIC
   ============================================================ */
@media (max-width: 1024px) {
  /* Guide grid: 3-col → 2-col on tablet */
  .guides-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  /* Guide cards grid */
  .guides-grid {
    grid-template-columns: 1fr !important;
  }

  /* Featured card: remove span */
  .guide-card-featured {
    grid-column: span 1 !important;
  }

  /* Guide card image height on mobile */
  .guide-card-img {
    height: 180px !important;
  }
  .guide-card-img.featured {
    height: 200px !important;
  }

  /* Topic selector */
  .topic-selector,
  .ts-links {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .ts-link {
    flex: 1 1 calc(50% - 3px);
    font-size: 0.8rem !important;
  }

  /* Filter tabs */
  .filter-tabs {
    flex-wrap: wrap !important;
  }
}

/* ============================================================
   REVIEW / PRICING / COUPON PAGE SPECIFIC
   ============================================================ */
@media (max-width: 768px) {
  /* Review score */
  .review-score-grid,
  .score-grid {
    grid-template-columns: 1fr !important;
  }

  /* Pros/cons */
  .pros-cons-grid {
    grid-template-columns: 1fr !important;
  }

  /* Coupon cards */
  .coupon-grid {
    grid-template-columns: 1fr !important;
  }

  /* Pricing cards */
  .pricing-grid {
    grid-template-columns: 1fr !important;
  }
  .pricing-card.popular {
    transform: none !important;
  }

  /* FAQ grid */
  .faq-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   OVERFLOW PREVENTION — catch-all
   ============================================================ */
@media (max-width: 768px) {
  /* Prevent any section from overflowing viewport */
  section, article, main, aside, div {
    max-width: 100vw;
  }

  /* Force all flex containers that could overflow to wrap */
  [style*="display:flex"],
  [style*="display: flex"] {
    flex-wrap: wrap;
  }

  /* But keep specific elements from wrapping incorrectly */
  .nav-inner,
  .nav-cta,
  .timer-unit,
  .sticky-timer {
    flex-wrap: nowrap !important;
  }
}

/* ============================================================
   GUIDE PAGE HERO MINI-STATS GRID — inline style overrides
   The hero stat bars use inline grid with repeat(4,1fr)
   → switch to 2-column on mobile
   ============================================================ */
@media (max-width: 768px) {
  /* Hero mini-stats: 4-col → 2-col */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Ensure mini-stats grid itself is full width */
  [style*="max-width:700px"],
  [style*="max-width: 700px"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Stat row: 4 col → 2×2 grid */
  .stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Platform grid: 3-col → 1-col */
  .platform-grid {
    grid-template-columns: 1fr !important;
  }

  /* zoom-grid: 2-col → 1-col */
  .zoom-grid {
    grid-template-columns: 1fr !important;
  }

  /* CTA buttons in guide heroes: stack vertically */
  .hero-cta-primary,
  .hero-cta-secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  /* On very small screens, stat-row stays 2-col but items shrink */
  .stat-row,
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Stat box numbers */
  .stat-box .sb-num {
    font-size: 1.3rem !important;
  }

  /* Platform cards */
  .platform-card {
    padding: 14px 12px !important;
  }
}

/* ============================================================
   INDEX PAGE — HERO STATS BAR
   ============================================================ */
@media (max-width: 768px) {
  /* Hero stats (bottom of hero section) */
  .hero-stats { padding: 20px 0 !important; }
  .hero-stats-inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* savings badges in hero */
  .hero-savings-badges {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Deals grid on index */
  .deals-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   REVIEW / COMPARISON TABLE — ensure full scrollability
   ============================================================ */
@media (max-width: 768px) {
  /* All table-containing wrappers */
  .compare-table-wrap,
  .comparison-table-wrap,
  .feature-table-wrap,
  .savings-table-wrap,
  .deals-table-wrap,
  [class*="table-wrap"],
  [class*="table-container"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
  }

  /* Tables themselves */
  .compare-table,
  .comparison-table,
  .feature-table,
  .savings-table,
  .deals-table {
    min-width: 500px;
  }
}

/* ============================================================
   COUPON PAGE — coupon code display
   ============================================================ */
@media (max-width: 480px) {
  .coupon-code-display,
  .coupon-code {
    font-size: 1rem !important;
    letter-spacing: 2px !important;
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .coupon-copy-btn {
    font-size: 0.8rem !important;
    padding: 6px 12px !important;
  }
  .big-discount {
    font-size: 3.5rem !important;
  }
  .coupon-card {
    padding: 20px 16px !important;
  }
}

/* ============================================================
   PRICING PAGE — pricing cards
   ============================================================ */
@media (max-width: 768px) {
  .pricing-grid {
    max-width: 420px !important;
    margin: 0 auto !important;
  }
  .pricing-card {
    width: 100% !important;
  }
  .pricing-card.popular {
    transform: none !important;
  }
}

/* ============================================================
   COMPARISON PAGE — vs table
   ============================================================ */
@media (max-width: 768px) {
  .vs-table-wrap,
  .comp-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .vs-hero-grid,
  .comparison-hero-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   GUIDES ARCHIVE PAGE
   ============================================================ */
@media (max-width: 768px) {
  .guides-grid {
    grid-template-columns: 1fr !important;
  }
  .guide-card {
    width: 100% !important;
  }
  /* Guide card image */
  .guide-card-img,
  .guide-card-image {
    height: 180px !important;
  }
}

/* ============================================================
   LEGAL PAGES (Privacy / Terms / Affiliate Disclosure)
   ============================================================ */
@media (max-width: 768px) {
  .legal-content {
    padding: 0 !important;
  }
  .legal-section {
    padding: 24px 16px !important;
    margin-bottom: 16px !important;
  }
  .legal-hero {
    padding: 40px 0 30px !important;
  }
}

/* ============================================================
   GLOBAL VIDEO FIX — ensure videos/iframes never overflow
   ============================================================ */
video {
  max-width: 100% !important;
  height: auto !important;
}

iframe {
  max-width: 100% !important;
}

/* YouTube embed click-through containers */
.video-embed,
.video-wrap,
.youtube-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================================================
   INLINE GRID OVERRIDES — handles all inline-style grids
   in guide pages that can't be targeted by class names
   ============================================================ */
@media (max-width: 768px) {
  /* Any inline grid with 3 columns → single column */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Any inline grid with 2 columns → single column */
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Override max-width constraints that clip content */
  [style*="max-width:860px"],
  [style*="max-width: 860px"],
  [style*="max-width:800px"],
  [style*="max-width: 800px"],
  [style*="max-width:660px"],
  [style*="max-width: 660px"],
  [style*="max-width:640px"],
  [style*="max-width: 640px"] {
    max-width: 100% !important;
  }
}

/* ============================================================
   NAV — ensure no overflow on any screen size
   ============================================================ */
.nav-inner {
  overflow: visible;
}

@media (max-width: 768px) {
  .nav-inner {
    position: relative;
    flex-wrap: nowrap !important;
  }
  /* Hide text CTA on very small screens if needed */
  .nav-cta .btn-primary {
    display: none !important;
  }
  .hamburger {
    display: flex !important;
  }
}

/* ============================================================
   STICKY DEAL BAR — don't cover content on mobile
   ============================================================ */
@media (max-width: 480px) {
  .sticky-deal-bar,
  #stickyDeal,
  .sticky-deal {
    font-size: 0.78rem !important;
    padding: 10px 12px !important;
  }
  .sticky-deal-bar .countdown,
  .sticky-deal .timer-val {
    font-size: 0.8rem !important;
  }
}

/* ============================================================
   REVIEW PAGE — inline 2fr 1fr grid → stacked on mobile
   ============================================================ */
@media (max-width: 768px) {
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns:3fr 2fr"],
  [style*="grid-template-columns: 3fr 2fr"] {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
}

/* ============================================================
   COUPON / COMPARISON PAGE — 4-col steps & verdict grid
   Inline style: grid-template-columns:repeat(4,1fr)
   ============================================================ */
@media (max-width: 768px) {
  .steps-grid[style*="grid-template-columns:repeat(4,1fr)"],
  .steps-grid[style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  /* Collapse 4-col to single on very small screens */
  .steps-grid[style*="repeat(4"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   FEATURES PAGE — table wrapper
   ============================================================ */
@media (max-width: 768px) {
  [style*="overflow-x:auto"],
  [style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
}

/* ============================================================
   GUIDE PAGES — sidebar article layout fix
   Ensures sidebar text never overlaps main content
   ============================================================ */
.article-layout {
  width: 100%;
  box-sizing: border-box;
}

.article-layout article,
.article-layout .article-content {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================================
   STEP ITEMS — step list items in guide pages
   ============================================================ */
@media (max-width: 480px) {
  .step-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .step-num {
    flex-shrink: 0;
  }
}

/* ============================================================
   WORKFLOW ITEMS — workflow timeline in guide pages
   ============================================================ */
@media (max-width: 480px) {
  .workflow-item {
    flex-direction: column;
    gap: 10px;
  }
  .workflow-num {
    flex-shrink: 0;
  }
}

/* ============================================================
   INLINE CTA — guide page inline CTAs
   ============================================================ */
@media (max-width: 480px) {
  .inline-cta {
    padding: 20px 14px !important;
    border-radius: 14px !important;
  }
  .inline-cta h3 {
    font-size: 1.05rem !important;
  }
  .inline-cta p {
    font-size: 0.82rem !important;
  }
  .inline-cta .cta-btns {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .inline-cta .cta-btns .btn,
  .inline-cta .cta-btns a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ============================================================
   COMPARISON TABLE — min-width prevents overflow
   Correct approach: wrap + scroll
   ============================================================ */
.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.compare-table {
  border-collapse: collapse;
  width: 100%;
}

@media (max-width: 768px) {
  .compare-table {
    min-width: 480px;
    font-size: 0.8rem !important;
  }
  .compare-table th,
  .compare-table td {
    padding: 9px 10px !important;
    font-size: 0.78rem !important;
  }
}

/* ============================================================
   CALLOUT BOXES — guide page callouts
   ============================================================ */
@media (max-width: 480px) {
  .callout {
    padding: 14px 16px !important;
    gap: 10px !important;
  }
  .callout-body p,
  .callout-body strong {
    font-size: 0.82rem !important;
  }
}

/* ============================================================
   PULL QUOTES — article quotes
   ============================================================ */
@media (max-width: 480px) {
  .article-quote {
    padding: 14px 16px !important;
  }
  .article-quote p {
    font-size: 0.9rem !important;
  }
}

/* ============================================================
   INDEX PAGE — Feature showcase section
   ============================================================ */
@media (max-width: 768px) {
  .feature-showcase {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .feature-showcase.reverse {
    direction: ltr !important;
  }
  .feature-showcase-img {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Savings table on index */
  .savings-table-wrap,
  div[style*="overflow-x:auto"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   DEAL CARDS — on index and coupon pages
   ============================================================ */
@media (max-width: 768px) {
  .deal-card {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .deal-card-price-badge {
    margin-top: 10px;
  }
}

/* ============================================================
   ANNOUNCEMENT BAR — never overflow
   ============================================================ */
.announcement-bar {
  max-width: 100vw;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .announcement-bar p {
    font-size: 0.68rem !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================
   HERO CTA BUTTONS — ensure full width on mobile
   ============================================================ */
@media (max-width: 480px) {
  .hero-cta-primary,
  a.hero-cta-primary,
  .hero-cta-secondary,
  a.hero-cta-secondary {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
  }
}

/* ============================================================
   GUIDES ARCHIVE — topic selector links
   ============================================================ */
@media (max-width: 480px) {
  .ts-links {
    flex-direction: column !important;
  }
  .ts-link {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================================
   FOOTER — responsive fixes
   ============================================================ */
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .footer-brand {
    text-align: center !important;
  }
  .footer-social {
    justify-content: center !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 16px 0 !important;
  }
  .footer-bottom-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
}

/* ============================================================
   FINAL SAFETY NET — prevent horizontal scroll
   ============================================================ */
html {
  overflow-x: hidden !important;
}
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}