/* ==========================================================================
   ARXON - responsive corrections
   Linked last on every page so it settles ties with the trailing inline
   <style> blocks. Only the breakpoints that measured wrong are touched; the
   desktop layout was already correct and is left alone.

   !important is used deliberately on the type sizes: the page's own layer
   already sets those with !important, so a normal declaration here could
   never win no matter where it loads.
   ========================================================================== */

/* ---------- 1. Hero trust strip ----------
   .axh__stats was repeat(4, 1fr) at every width, so on a 390px phone the four
   stats were squeezed until their labels fell to 8.6px and wrapped
   ("CERTIFIED / UNITS"). Two columns give each stat ~150px, which is enough
   room to put the label back to a readable size on one line. */
@media (max-width: 599px) {
  .axh__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
  }
  .axh__stat b    { font-size: 1.2rem !important; }
  .axh__stat span { font-size: 12px !important; letter-spacing: .06em !important; }
}

/* Tablets keep the 4-up strip (it is ~618px wide there, so ~147px a column)
   but the label can still come up from 8.6px. Above 1024px the strip sits in
   a narrow side panel where the columns really are tight, so it is left as
   the designer set it. */
@media (min-width: 600px) and (max-width: 1023px) {
  .axh__stat span { font-size: 11px !important; letter-spacing: .05em !important; }
}

/* ---------- 2. The tablet band ----------
   These grids stepped from 1 column straight to 2 at 834px, so iPad portrait
   (768) and most Android tablets got a phone layout stretched wide, with the
   cards marooned in whitespace. Two columns from 600px closes the gap. */
@media (min-width: 600px) and (max-width: 833px) {
  .features-grid,
  .process-steps,
  .sdr-trust-points,
  .sdr-stats-grid,
  .arxf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 3. Touch targets ----------
   WCAG 2.5.8 asks for 24px minimum; 44px is the comfortable thumb target.
   The phone links measured 20-24px tall, the footer nav links 22px, and the
   drawer's close button 25px wide. Every tel: anchor on the site is a
   standalone link, never mid-sentence, so giving them a box disturbs no
   paragraph. */
@media (max-width: 1023px) {
  a[href^="tel:"],
  .arxf-list a,
  .arxf-legal a,
  .axh__panel-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .close-slider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* The carousel dots are 10x10 with 12px between them. An invisible overlay
   lifts the hit area to 20x24 without moving or resizing the dot itself, and
   stays 2px clear of its neighbour so the targets never overlap. */
.nav-dot { position: relative; }
.nav-dot::after {
  content: "";
  position: absolute;
  inset: -7px -5px;
}

/* ---------- 4. A floor under the micro-labels ----------
   The uppercase eyebrow/badge labels sat between 10.5px and 11.5px. 12px
   keeps the same styling but stays legible, on a phone especially. */
.eyebrow,
.process-step,
.product-category-badge,
.arxf-tag,
.arx-dtag,
.arx-drank,
.leader-badge,
.leader-skills span,
.value-face .tap,
.status-text {
  font-size: 12px !important;
}