/* employee-starter-set.html adaptive layout. This page reuses the same
   pvc- prefixed template as the card-detail family (pvc-detail-
   responsive.css, linked alongside this file, covers that part) plus its
   own employee-, starter- and id-card-pricing-detail sections, re-enabled
   here across 641-1279px (narrowed from 1400px on 2026-09-19 to match
   pvc-detail-responsive.css, linked alongside this file, which now switches
   at the same 1279px point). Below 641px the shared desktop-scale-fit.js
   zoom fallback takes over. */
@media (min-width: 641px) and (max-width: 1279px) {
  .id-card-pricing-detail .tab-btn {
    flex: 1 1 calc(50% - 6px) !important;
  }

  .employee-choice-grid,
  .employee-price-summary-grid,
  .employee-starter-set,
  .employee-data-card {
    grid-template-columns: 1fr !important;
  }

  .employee-example-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .starter-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 38px !important;
  }

  .starter-hero-copy {
    text-align: center !important;
  }

  .starter-lead,
  .starter-plan-picker {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .starter-price,
  .starter-hero-actions {
    justify-content: center !important;
  }

  .starter-purchase-card {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .employee-data-items,
  .employee-example-grid {
    grid-template-columns: 1fr !important;
  }

  .employee-choice-actions,
  .employee-starter-actions,
  .employee-price-modal-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .starter-plan-picker {
    grid-template-columns: 1fr !important;
  }

  .starter-hero-actions {
    flex-direction: column !important;
  }

  .starter-hero-actions button,
  .starter-hero-actions a {
    width: 100% !important;
    text-align: center !important;
  }

  .starter-gallery {
    grid-template-columns: 1fr !important;
  }
}