/* ============================================================
   PAGE · Sponsored Posts  (/publish-with-us/sponsored-posts/)
   How-it-works steps only. The hero (.gp-hero*), pricing cards
   (.sp-pricing/.sp-price-cards/.sp-badge), "what's included" grid
   (.svc-features*) and the dotted backdrop utility (.sp-dotted) are all
   shared components living in service-detail.css (global chain) — see
   them there, not here. Reuses sitewide tokens/typography/buttons — no
   new palette. Scoped with body.page-sponsored-posts.
   ============================================================ */

/* ===================== How It Works ===================== */
.sp-steps{padding:clamp(4rem,8vw,6.5rem) 0;}
.sp-steps .section-head{max-width:640px;}
.sp-steps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;}
.sp-step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.6rem 1.4rem;}
.sp-step__num{display:block;color:var(--sb-blue);font-weight:800;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.6rem;}
.sp-step h3{margin:0 0 .5rem;font-size:1.02rem;}
.sp-step p{margin:0;color:var(--text);font-size:.9rem;line-height:1.6;}
@media (max-width:900px){.sp-steps__grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.sp-steps__grid{grid-template-columns:1fr;}}

/* ===================== Mobile trim ===================== */
@media (max-width:600px){
	.sp-steps{padding:56px 0;}
}