/* Digiboost — responsive layer.
 * The site is built with inline-styled grids; these rules use !important inside
 * media queries to collapse those layouts on tablet/phone. Class hooks are added
 * to the relevant grid containers in the JSX. Type/gutter/section tokens are
 * already fluid (clamp) in the design system, so this only handles structure. */

/* ---------- Tablet (≤ 960px) ---------- */
@media (max-width: 960px) {
  .wb-step-chevron { display: none !important; }
  .wb-r-split   { grid-template-columns: 1fr !important; gap: 40px !important; }
  .wb-r-cta     { grid-template-columns: 1fr !important; gap: 24px !important; }
  .wb-r-cta > div:last-child { justify-content: flex-start !important; }
  .wb-r-3       { grid-template-columns: repeat(2, 1fr) !important; }
  .wb-r-4       { grid-template-columns: repeat(2, 1fr) !important; }
  .wb-sectionhead { flex-direction: column !important; align-items: flex-start !important; }
  .wb-sectionhead > div + div { margin-top: 4px; }
}

/* ---------- Phone (≤ 620px) ---------- */
@media (max-width: 620px) {
  .wb-r-3       { grid-template-columns: 1fr !important; }
  .wb-r-4       { grid-template-columns: 1fr !important; }

  .wb-r-metrics { grid-template-columns: 1fr !important; gap: 0 !important; }
  .wb-r-metrics > div { border-left: none !important; padding-left: 0 !important; padding-top: 18px !important; }
  .wb-r-metrics > div + div { border-top: 1.5px solid var(--border-on-dark) !important; }

  .wb-r-footer  { grid-template-columns: 1fr 1fr !important; gap: 30px 24px !important; }
  .wb-r-footer > div:first-child { grid-column: 1 / -1 !important; }

  .wb-testimonial { padding: 28px 22px 24px !important; }
  .wb-collage   { grid-template-columns: 1fr 1fr !important; grid-template-rows: 140px 140px !important; }
  .wb-hero-stats { flex-wrap: wrap !important; gap: 22px 32px !important; }

  /* Rate card → stacked rows; hide the column header */
  .wb-r-rate      { grid-template-columns: 1fr !important; gap: 2px !important; }
  .wb-r-rate > *  { text-align: left !important; }
  .wb-r-rate-head { display: none !important; }
}

/* ---------- Small phone (≤ 400px) ---------- */
@media (max-width: 400px) {
  .wb-r-footer  { grid-template-columns: 1fr !important; }
}

/* ---------- Client login split ---------- */
.cl-shell { gap: 0 !important; }
@media (max-width: 960px) {
  .cl-shell > div:first-child { min-height: auto !important; }
}