@media (max-width: 900px) {
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  .cs-nav-inner { padding: 0 12px !important; height: 70px !important; }
  .cs-nav-logo { margin-right: 8px !important; flex-shrink: 1 !important; min-width: 0 !important; }
  .cs-nav-logo img { height: 44px !important; width: auto !important; max-width: none !important; }
  .cs-nav-right { margin-left: auto !important; gap: 6px !important; flex-shrink: 0 !important; }
  .cs-nav-avatar-wrap { display: none !important; }
  .cs-nav-cta { font-size: 12px !important; padding: 7px 12px !important; white-space: nowrap !important; }
  .cs-hamburger { flex-shrink: 0 !important; margin-left: 6px !important; }
}

/* Homepage hero text overflow fix */
@media (max-width: 900px) {
  .elementor-widget-text-editor p,
  .elementor-widget-text-editor,
  .elementor-text-editor,
  .elementor-widget-heading .elementor-heading-title,
  .elementor-widget-heading,
  .elementor-column,
  .elementor-col-50,
  .elementor-col-100,
  .elementor-section,
  .elementor-container,
  .elementor-row {
    max-width: 100% !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    white-space: normal !important;
  }

  /* TV demo mockup fix */
  .elementor-widget-html,
  .elementor-widget-html * {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Fix any absolute/fixed width containers */
  [style*="width:"] {
    max-width: 100% !important;
  }
}

@media (max-width: 900px) {
  .hp-hero-rotating { min-width: 0 !important; }
  .hp-hero { padding: 32px 20px 40px !important; }
  .hp-trust, .hp-usecases, .hp-how, .hp-features,
  .hp-live, .hp-pricing, .hp-reseller { padding-left: 20px !important; padding-right: 20px !important; }
  .hp-cta { padding: 80px 20px !important; }
}

@media (max-width: 600px) {
  .hp-hero { padding: 24px 16px 32px !important; }
  .hp-trust, .hp-usecases, .hp-how, .hp-features,
  .hp-live, .hp-pricing, .hp-reseller { padding-left: 16px !important; padding-right: 16px !important; }
  .hp-cta { padding: 60px 16px !important; }
  .hp-hero h1 { letter-spacing: -1px !important; }
}

@media (max-width: 900px) {
  .hp-tv-badge {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .hp-hero h1 { font-size: 30px !important; letter-spacing: -0.5px !important; line-height: 1.15 !important; }
  .hp-hero-rotating { display: block !important; margin-top: 4px !important; min-width: 0 !important; }
  .hp-hero-rotating-inner { height: 1.15em !important; }
}

@media (max-width: 400px) {
  .hp-hero h1 { font-size: 26px !important; }
}

@media (max-width: 700px) {
  .fp-compare { padding: 48px 16px !important; }
  .fp-table-head, .fp-section-row, .fp-table-row, .fp-table-cta {
    grid-template-columns: 1.6fr 1fr 1fr 1fr !important;
  }
  .fp-th, .fp-td { padding: 10px 6px !important; font-size: 11px !important; }
  .fp-th .price { font-size: 16px !important; }
  .fp-th .price-sub { display: none !important; }
  .fp-td:first-child { gap: 6px !important; }
  .fp-td-icon { display: none !important; }
  .fp-td-sub { display: none !important; }
  .fp-td-name { font-size: 11px !important; line-height: 1.25 !important; }
}

@media (max-width: 400px) {
  .fp-th, .fp-td { padding: 8px 4px !important; font-size: 10px !important; }
  .fp-th .price { font-size: 14px !important; }
  .fp-td-name { font-size: 10px !important; }
}

@media (max-width: 700px) {
  .plans-section, .included-section, .compare-section { padding-left: 16px !important; padding-right: 16px !important; }
  .plan-card { padding: 28px 20px !important; }
  .plan-price .amount { font-size: 48px !important; }
  .plan-desc { min-height: 0 !important; }
  .compare-section { padding-top: 48px !important; padding-bottom: 48px !important; }
  .compare-table thead th,
  .compare-table tbody td { padding: 10px 6px !important; font-size: 11px !important; }
  .compare-table thead th span { font-size: 13px !important; }
  .compare-table .cat-row td { padding: 8px 6px !important; font-size: 9px !important; letter-spacing: 1px !important; }
  .compare-table tbody td:first-child { max-width: 40%; }
}

@media (max-width: 400px) {
  .compare-table thead th,
  .compare-table tbody td { padding: 8px 4px !important; font-size: 10px !important; }
  .compare-table thead th span { font-size: 11px !important; }
}

@media (max-width: 700px) {
  .compare-table tr:last-child a {
    padding: 6px 4px !important;
    font-size: 9px !important;
    letter-spacing: -0.2px !important;
    white-space: normal !important;
    display: block !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
}