/* Supporting page template (page-supporting.php). Shared skeleton (.mg-svc*, .mg-faq*, .mg-reviews, .mg-hero-nap/map) comes from tokens.css. */
.mg-sp .mg-svc-h1 { font-family: var(--font-heading); font-weight: 700; font-size: 32px; line-height: 1.05; text-transform: uppercase; margin: 0 0 var(--space-md); color: var(--ink); }
@media (min-width: 1024px) { .mg-sp .mg-svc-h1 { font-size: 44px; } }
.mg-sp-answer { max-width: 880px; border-left: 4px solid var(--accent); background: var(--surface); padding: var(--space-md); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: 0 0 var(--space-md); }
.mg-sp-answer-label { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.mg-sp-answer p { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.5; color: var(--ink); }
.mg-sp-top-cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.mg-sp-top-cta .mg-cta-btn { margin-top: 0; padding: 12px 20px; font-size: 13px; }
.mg-sp-top-cta .mg-cta-btn.is-ghost { background: transparent; border: 1px solid var(--ink-soft); }
.mg-sp .mg-svc-body.mg-sp-body { max-width: 880px; margin-top: var(--space-lg); }
.mg-sp-body p, .mg-sp-body li { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink); }
.mg-sp-body p { margin: 0 0 var(--space-md); }
.mg-sp-body ul { padding-left: 20px; margin: 0 0 var(--space-md); }
.mg-sp-body h3 { font-family: var(--font-heading); font-size: 22px; text-transform: uppercase; margin: var(--space-md) 0 var(--space-sm); }
.mg-sp-body a { color: var(--ink); text-decoration: underline; }
.mg-sp-interrupt { max-width: 880px; background: var(--interrupt-bg); color: var(--interrupt-text); border-radius: var(--radius-md); padding: var(--space-lg) var(--space-md); margin: var(--space-xl) 0; }
.mg-sp-interrupt-eyebrow { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #555; }
.mg-sp-interrupt h2 { font-family: var(--font-heading); font-weight: 700; font-size: 30px; line-height: 1.1; text-transform: uppercase; margin: 6px 0 var(--space-sm); color: var(--interrupt-text); }
.mg-sp-interrupt p { font-family: var(--font-body); font-size: 16px; margin: 0 0 var(--space-md); color: var(--interrupt-text); }
.mg-sp-interrupt .mg-cta-btn { margin-top: 0; }
.mg-sp-related ul { list-style: none; padding: 0; }
.mg-sp-related li { margin-bottom: var(--space-sm); }
.mg-sp-local { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin: var(--space-xl) 0 var(--space-lg); }
.mg-sp-local .mg-hero-map iframe { display: block; width: 100%; height: 320px; border: 0; border-radius: var(--radius-md); }
@media (min-width: 1024px) { .mg-sp-local { grid-template-columns: 1fr 2fr; } }
.mg-sp-disclaimer { max-width: 880px; font-family: var(--font-body); font-size: 13px; color: var(--ink-soft); border-top: 1px solid var(--line-soft); padding-top: var(--space-md); margin-top: var(--space-lg); }

/* Topic CTA column (2026-09-21), same pattern as the blog sidebar (blog.css): mobile = tile below the content,
   desktop 1024px+ = sticky right column. The [mg_cta_*] tiles are landing-page weight, so wrapper-scoped
   overrides make them fluid and compact without touching the shared Hook Elements. */
.mg-sp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.mg-sp-main { min-width: 0; }
.mg-sp-side { margin: var(--space-lg) 0; }
.mg-sp-cta .mg-cta { width: 100%; flex: none; height: auto; aspect-ratio: 10 / 7; }
.mg-sp-cta .mg-cta .mg-cta-content { width: auto; max-width: 75%; }
.mg-sp-cta .mg-cta .mg-cta-content h2 { font-size: 27px; }
.mg-sp-cta .mg-cta .mg-cta-content p { font-size: 14px; max-width: 100%; }
@media (min-width: 1024px) {
	.mg-sp-grid { grid-template-columns: minmax(0, 1fr) 320px; column-gap: var(--space-lg); }
	.mg-sp-side { margin: 0; align-self: start; position: sticky; top: var(--space-md); }
}
.mg-sp-side { display: flex; flex-direction: column; gap: var(--space-md); }