/* v2.0.0-beta.3.28.12 — Mobile Metrics Balanced Wide Grid Hotfix
 * Restore the roomy mobile metric-card proportions while keeping Growth
 * on the same second row as Years Experience and Customer Satisfaction.
 * Layout: 2 wide cards on row 1 + 3 balanced cards on row 2.
 */
@media (max-width: 767px) {
  .wcg-v2 .wcg-metrics--proof-strip {
    padding: 12px 0 !important;
    overflow: visible !important;
  }

  .wcg-v2 .wcg-metrics--proof-strip .wcg-container {
    padding-inline: 2px !important;
  }

  .wcg-v2 .wcg-metrics--proof-strip .wcg-metrics__grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  /* First row stays wide, like the approved pre-3.28.11 mobile layout. */
  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric:nth-child(1),
  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric:nth-child(2) {
    grid-column: span 3 !important;
  }

  /* Years + Customers + Growth share the second row. */
  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric:nth-child(3),
  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric:nth-child(4),
  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric:nth-child(5),
  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric:last-child:nth-child(odd) {
    grid-column: span 2 !important;
  }

  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric {
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 10px 10px !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: initial !important;
    gap: 9px !important;
    text-align: left !important;
    border: 1px solid #e4eaf2 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric__icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }

  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric__icon svg {
    width: 19px !important;
    height: 19px !important;
  }

  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric__copy {
    display: block !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric__value {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    white-space: nowrap !important;
  }

  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric__label {
    display: -webkit-box !important;
    margin-top: 5px !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: 8.3px !important;
    line-height: 1.22 !important;
    font-weight: 600 !important;
    text-align: left !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* Slightly compact only the three-card row, without shrinking the whole strip. */
  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric:nth-child(n+3) {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    padding-inline: 7px !important;
    gap: 6px !important;
  }
  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric:nth-child(n+3) .wcg-metric__icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric:nth-child(n+3) .wcg-metric__value {
    font-size: 19px !important;
  }
  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric:nth-child(n+3) .wcg-metric__label {
    font-size: 7.4px !important;
  }
}

@media (max-width: 390px) {
  .wcg-v2 .wcg-metrics--proof-strip .wcg-metrics__grid { gap: 6px !important; }
  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric { padding-inline: 8px !important; }
  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric:nth-child(n+3) {
    grid-template-columns: 27px minmax(0, 1fr) !important;
    padding-inline: 5px !important;
    gap: 5px !important;
  }
  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric:nth-child(n+3) .wcg-metric__icon {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
  }
  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric:nth-child(n+3) .wcg-metric__value { font-size: 17px !important; }
  .wcg-v2 .wcg-metrics--proof-strip .wcg-metric:nth-child(n+3) .wcg-metric__label { font-size: 6.8px !important; }
}