/* =========================================================
   ReadyM8: ServiceM8 guide / partner landing page
   Soft-brutalist components on top of styles.css tokens.
   Loaded AFTER styles.css, so it reuses :root vars, .btn,
   .section, .eyebrow, .cards, .steps, .nav and .site-footer.
   ========================================================= */

/* ---------- HEADER TAG (minimal header, no nav on this page) ---------- */
.sm8-tag{
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  font-size:12px;letter-spacing:1px;text-transform:uppercase;
  background:var(--ink);color:var(--yellow);
  border:2.5px solid var(--ink);border-radius:7px;
  padding:6px 11px;box-shadow:2.5px 2.5px 0 var(--ink);
}

/* ---------- HERO ---------- */
.sm8-hero{padding-top:40px;padding-bottom:16px}
.sm8-h1{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;
  font-size:clamp(34px,10vw,58px);line-height:.96;letter-spacing:-1.4px;
  text-transform:uppercase;margin-bottom:16px;
}
.sm8-lead{font-size:17px;line-height:1.5;font-weight:500;max-width:560px;margin-bottom:26px}
/* Reuse .hero-cta (column -> row at 680px); just stop the row spanning full width */
.sm8-hero-cta{max-width:520px;margin-bottom:18px}
.sm8-note{font-size:13px;font-weight:600;opacity:.7;max-width:60ch}

/* ---------- PRODUCT IMAGE SLOTS ----------
   Decorative dashed placeholder frames until official ServiceM8 partner-material
   images are dropped in (Deploy 2). Mirrors book.css .state-art. The visible
   caption carries the meaning; the empty frame is aria-hidden. */
.sm8-shots{display:grid;grid-template-columns:1fr;gap:20px}
.sm8-shot{margin:0}
.sm8-shot-frame{
  width:100%;aspect-ratio:4/3;
  background:var(--paper-2);
  border:3px dashed var(--ink);border-radius:var(--radius);
}
.sm8-shot-frame img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--radius) - 3px)}
.sm8-shot-cap{font-size:14px;font-weight:600;opacity:.85;margin-top:10px}

/* ---------- REBATE NOTE ---------- */
.sm8-rebate-note{
  background:var(--yellow);color:var(--ink);
  border:3px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:22px 20px;margin-top:26px;max-width:760px;
}
.sm8-rebate-head{
  font-family:'Archivo',system-ui,sans-serif;font-weight:900;
  font-size:20px;line-height:1.1;letter-spacing:-.3px;margin-bottom:10px;
}
.sm8-rebate-note p{font-size:15px;font-weight:500}

/* ---------- CTA ROW ---------- */
.sm8-cta-row{margin-top:26px}

/* ---------- RESPONSIVE ---------- */
@media (min-width:680px){
  .sm8-shots{grid-template-columns:repeat(3,1fr)}
}