/*
  Block Grid additions to site.css (which stays a copy of the static site's stylesheet).
  The static pages set spacing with inline style="" attributes; blocks can't, so it lives here,
  plus the few classes the CMS needs that the static site never had. Loaded after site.css,
  and into the backoffice block previews (BlockPreview:BlockGrid:Stylesheets).
*/

/* ── Spacing between blocks inside a section ─────────────────────── */
.section-title + .blocks-cards,
.section-title + .blocks-row,
.section-title + .grid-2,
.section-title + .grid-3 { margin-top: 48px; }
.blocks-cards { gap: 16px; margin-top: 48px; }
.blocks-row { gap: 20px; }
.blocks-cards + .blocks-cards,
.callout + .blocks-cards,
.rwd-scroll + .callout,
.rwd-hint + .callout { margin-top: 20px; }
.funnel + .quote,
.section-title + .quote { margin-top: 48px; }
.wrap > .link-row,
.wrap > .btn-row { margin-top: 28px; }
.headline-md ~ .lede + .checklist,
.stack-sm + .checklist,
.lede + .checklist { margin-top: 16px; }
.lede + .btn-row,
.lede + .link-row,
.lede + .deflist,
.lede + .risk-stat,
.stack-sm + .video-card,
.lede + .video-card { margin-top: 24px; }
.split .numlist + .aside-note { margin-top: 24px; }
.wrap > .aside-note { margin-top: 18px; }
.section-title + .riskgrid,
.split + .riskgrid { margin-top: 44px; }
.riskgrid + .note { margin-top: 14px; }
.claimcols + .note { margin-top: 28px; }
.grid-3 + .proof-big,
.stack-sm + .blocks-cards { margin-top: 24px; }
.split + .mcols { margin-top: 52px; }
.blocks-cards + .board-wrap,
.board-wrap { margin-top: 56px; }
.board__label { margin-bottom: 8px; }
.news__label { margin-bottom: 28px; }
.card__eyebrow { margin-bottom: 24px; }
.card__note { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(27, 58, 107, 0.1); }
.investor__label { margin-bottom: 10px; }
.legal-rail__label { margin-bottom: 16px; }
.legal-rail a { display: contents; color: inherit; }
.pform__heading { margin-bottom: 22px; }
.link-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }

/* ── Headings: RTE italics take the static site's em colours ─────── */
.section-title h2 em,
.headline-md em { font-style: italic; color: var(--periwinkle); }
.hero h1 em,
.cta-band h2 em,
.guarantee h2 em,
.ms-hero h1 em,
.pilot h1 em,
.panel--ink h2 em { font-style: italic; color: var(--periwinkle-light); }

/* ── Dark sections: light eyebrows and headline (static used eyebrow--dark / inline colour) ── */
.panel--ink .eyebrow:not(.eyebrow--muted) { color: rgba(255, 255, 255, 0.6); }
.panel--ink .headline-md { color: #fff; }
.panel--ink .section-title { max-width: 760px; margin-bottom: 56px; }

/* ── Media block (image with optional caption) ───────────────────── */
.media { width: 100%; max-width: var(--media-max, none); }
.media img { display: block; width: 100%; height: auto; }
.media--shadow img { border-radius: 12px; box-shadow: var(--shadow-lift); }
.media--centred { margin-left: auto; margin-right: auto; }
.ms-shot { width: 100%; border-radius: 10px; box-shadow: var(--shadow-lift); }

/* ── Microsoft panel (static used inline styles) ─────────────────── */
.msft-panel__eyebrow { margin-bottom: 0; }
.msft-panel__title { font-size: 21px; letter-spacing: -0.01em; color: var(--navy); margin: 10px 0 0; }
.msft-panel .msft-panel__logos { margin-top: 14px; }
.msft-panel .ms-ref { color: var(--periwinkle); }

/* ── Co-brand lockup: first logo is the partner's (taller), last is ours ── */
.cobrand img { width: auto; height: 26px; }
.cobrand img:first-child { height: 54px; }

/* ── Builtby logo ─────────────────────────────────────────────────── */
.builtby__logo { width: 130px; height: auto; }