/* Mobile-only conversion of the five *Problems* tables into readable cards.
   Scope: only the exact Elementor HTML widget for each model's Problems table.
   No changes to the separate 5-model comparison tables. */
@media screen and (max-width: 767px) {
  :is(
    body.page-id-149 .elementor-element-5de9c870,
    body.page-id-150 .elementor-element-5f1d783c,
    body.page-id-151 .elementor-element-6ec56a3d,
    body.page-id-152 .elementor-element-502b7c7d,
    body.page-id-153 .elementor-element-7c044acb
  ) .gl-tablewrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  :is(
    body.page-id-149 .elementor-element-5de9c870,
    body.page-id-150 .elementor-element-5f1d783c,
    body.page-id-151 .elementor-element-6ec56a3d,
    body.page-id-152 .elementor-element-502b7c7d,
    body.page-id-153 .elementor-element-7c044acb
  ) .gl-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; /* overrides inline min-width:680px */
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    background: transparent !important;
  }

  :is(
    body.page-id-149 .elementor-element-5de9c870,
    body.page-id-150 .elementor-element-5f1d783c,
    body.page-id-151 .elementor-element-6ec56a3d,
    body.page-id-152 .elementor-element-502b7c7d,
    body.page-id-153 .elementor-element-7c044acb
  ) .gl-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  :is(
    body.page-id-149 .elementor-element-5de9c870,
    body.page-id-150 .elementor-element-5f1d783c,
    body.page-id-151 .elementor-element-6ec56a3d,
    body.page-id-152 .elementor-element-502b7c7d,
    body.page-id-153 .elementor-element-7c044acb
  ) .gl-table tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    min-width: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e3e8f2 !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 25px rgba(10, 15, 30, .07) !important;
  }

  /* The source's first row contains the column headings; on mobile labels are repeated per card.
     Keep it in the accessibility tree, but visually hide it. */
  :is(
    body.page-id-149 .elementor-element-5de9c870,
    body.page-id-150 .elementor-element-5f1d783c,
    body.page-id-151 .elementor-element-6ec56a3d,
    body.page-id-152 .elementor-element-502b7c7d,
    body.page-id-153 .elementor-element-7c044acb
  ) .gl-table tr:first-child {
    position: absolute !important;
    clip-path: inset(50%) !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }

  :is(
    body.page-id-149 .elementor-element-5de9c870,
    body.page-id-150 .elementor-element-5f1d783c,
    body.page-id-151 .elementor-element-6ec56a3d,
    body.page-id-152 .elementor-element-502b7c7d,
    body.page-id-153 .elementor-element-7c044acb
  ) .gl-table td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 15px 15px 13px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    font: 500 14px/1.55 Inter, sans-serif !important;
    color: #344259 !important;
  }

  :is(
    body.page-id-149 .elementor-element-5de9c870,
    body.page-id-150 .elementor-element-5f1d783c,
    body.page-id-151 .elementor-element-6ec56a3d,
    body.page-id-152 .elementor-element-502b7c7d,
    body.page-id-153 .elementor-element-7c044acb
  ) .gl-table td:first-child {
    grid-column: 1 / -1 !important;
    padding: 15px 17px !important;
    border-bottom: 0 !important;
    background: #0a0f1e !important;
    color: #ffffff !important;
    font: 750 17px/1.3 Outfit, Inter, sans-serif !important;
  }

  :is(
    body.page-id-149 .elementor-element-5de9c870,
    body.page-id-150 .elementor-element-5f1d783c,
    body.page-id-151 .elementor-element-6ec56a3d,
    body.page-id-152 .elementor-element-502b7c7d,
    body.page-id-153 .elementor-element-7c044acb
  ) .gl-table td:nth-child(2),
  :is(
    body.page-id-149 .elementor-element-5de9c870,
    body.page-id-150 .elementor-element-5f1d783c,
    body.page-id-151 .elementor-element-6ec56a3d,
    body.page-id-152 .elementor-element-502b7c7d,
    body.page-id-153 .elementor-element-7c044acb
  ) .gl-table td:nth-child(3) {
    background: #f5f7fc !important;
    color: #263246 !important;
    font-weight: 600 !important;
  }

  :is(
    body.page-id-149 .elementor-element-5de9c870,
    body.page-id-150 .elementor-element-5f1d783c,
    body.page-id-151 .elementor-element-6ec56a3d,
    body.page-id-152 .elementor-element-502b7c7d,
    body.page-id-153 .elementor-element-7c044acb
  ) .gl-table td:last-child {
    grid-column: 1 / -1 !important;
    padding: 16px 17px 18px !important;
    border-top: 1px solid #f0e4c3 !important;
    background: #fff8e9 !important;
    color: #0f172a !important;
    font-weight: 500 !important;
  }

  :is(
    body.page-id-149 .elementor-element-5de9c870,
    body.page-id-150 .elementor-element-5f1d783c,
    body.page-id-151 .elementor-element-6ec56a3d,
    body.page-id-152 .elementor-element-502b7c7d,
    body.page-id-153 .elementor-element-7c044acb
  ) .gl-table td:not(:first-child)::before {
    display: block !important;
    margin-bottom: 5px !important;
    font: 800 10px/1.3 Inter, sans-serif !important;
    letter-spacing: .55px !important;
    text-transform: uppercase !important;
    color: #6b7893 !important;
  }

  /* Pro, Lights 2, 2 Pro, Prism: 4-column source tables. */
  :is(
    body.page-id-149 .elementor-element-5de9c870,
    body.page-id-150 .elementor-element-5f1d783c,
    body.page-id-152 .elementor-element-502b7c7d,
    body.page-id-153 .elementor-element-7c044acb
  ) .gl-table td:nth-child(2)::before { content: 'Positive' !important; }
  :is(
    body.page-id-149 .elementor-element-5de9c870,
    body.page-id-150 .elementor-element-5f1d783c,
    body.page-id-152 .elementor-element-502b7c7d,
    body.page-id-153 .elementor-element-7c044acb
  ) .gl-table td:nth-child(3)::before { content: 'Negative mentions' !important; }

  /* Elite: 3-column source table, with different headings. */
  body.page-id-151 .elementor-element-6ec56a3d .gl-table td:nth-child(2) {
    grid-column: 1 / -1 !important;
  }
  body.page-id-151 .elementor-element-6ec56a3d .gl-table td:nth-child(2)::before {
    content: 'Why it matters' !important;
  }

  :is(
    body.page-id-149 .elementor-element-5de9c870,
    body.page-id-150 .elementor-element-5f1d783c,
    body.page-id-151 .elementor-element-6ec56a3d,
    body.page-id-152 .elementor-element-502b7c7d,
    body.page-id-153 .elementor-element-7c044acb
  ) .gl-table td:last-child::before {
    content: 'How our technicians handle it' !important;
    color: #94590a !important;
    font-size: 11px !important;
  }
}
