/* /blog/mac-security-small-business · page scoped CSS (prefix pg-msb-). Spacing between shared blocks (as the exemplar
   /blog/mac-security-questionnaire), the provider guidance line, the foot line of the checked Mac plate (fig. 01) and the hues of the
   three jobs cells (fig. 02). */

.pg-msb-title{text-wrap:balance}

/* reading rhythm: sections, figures, drawers */
.pg-msb-sec+.pg-msb-sec{margin-top:104px}
@media (max-width:767px){.pg-msb-sec+.pg-msb-sec{margin-top:72px}}
.pg-msb-chips{margin-top:28px}
.pg-msb-fig{margin-top:44px}
.pg-msb-fig .cy-fig__cap{max-width:68ch}
.pg-msb-callout{margin-top:32px;max-width:684px}
.pg-msb-links{margin-top:24px}
.pg-msb-after{margin-top:32px}
.pg-msb-pull{max-width:min(68ch,38em);margin:48px 0 0}

/* the provider guidance line under a section (the old page's "Provider guidance: …") */
.pg-msb-ref{margin-top:28px;max-width:60ch;font-size:15px;line-height:1.55;color:var(--s-ink-2)}

/* why the settings still matter: two numbers under the drawer */
.pg-msb-numbers{margin-top:52px}
.pg-msb-numbers__label{margin-bottom:16px}

/* fig. 01: the foot of the checked Mac: an ember rule where a person decides */
.pg-msb-foot{display:flex;align-items:baseline;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--s-line);font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--s-ink-2)}
.pg-msb-foot__rule{flex:none;width:14px;height:3px;background:#FF6B2B;transform:translateY(-3px)}

/* fig. 02: three jobs, one pillar hue each (blue protects, mint fixes, iris proves) */
.pg-msb-jobs--fix{--cy-hue:#00D4A0}
.pg-msb-jobs--show{--cy-hue:#794DFF}

/* fig. 03: the assistant window keeps the width it has on /product */
.pg-msb-winfig{max-width:640px}