/* ==========================================================================
   Support page — public/css/pages/support.css
   Only rules that exist nowhere else. .product-hero / .section / .card /
   .grid--3 / .btn live in global.css.
   ========================================================================== */

/* --- Contact cards (phone / support email / training email) --------------- */
.contact-card { text-align: center; }
.contact-card h3 {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 700; margin-bottom: 10px;
}
.contact-card a { font-size: var(--step-2); font-weight: 700; color: var(--navy-600); word-break: break-word; }
.contact-card a:hover { color: var(--accent-600); }

/* --- Training image + copy ------------------------------------------------ */
.support-training { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 48px); align-items: center; }
.support-training img { border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* --- SMS opt-in link ------------------------------------------------------ */
.support-optin-link { margin-top: 18px; font-size: var(--step--1); }

@media (max-width: 860px) {
  .support-training { grid-template-columns: 1fr; }
}