/*
  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; }

/* ── AI information page: header facts, canonical box, footnote, tables inside legal sections ── */
.ai-meta { margin: 8px 0 0; max-width: 760px; display: grid; gap: 10px; }
.ai-meta > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; font-size: 14.5px; line-height: 1.55; }
.ai-meta dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); padding-top: 3px; }
.ai-meta dd { margin: 0; color: rgba(255,255,255,0.88); }
.ai-canonical { background: var(--wash); padding: 44px var(--gutter); }
.ai-canonical > div { max-width: var(--measure); margin: 0 auto; border-left: 3px solid var(--periwinkle); padding-left: 24px; }
.ai-canonical h2 { font-size: 20px; color: var(--navy); margin: 0 0 12px; }
.ai-canonical__text { font-size: 16.5px; line-height: 1.7; color: var(--ink); margin: 0; }
.ai-canonical__note { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; }
.ai-footnote { padding: 0 var(--gutter) 64px; }
.ai-footnote > div { max-width: var(--measure); margin: 0 auto; border-top: 1px solid var(--rule); padding-top: 20px; }
.ai-footnote p { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.legal-sec table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
.legal-sec th, .legal-sec td { text-align: left; vertical-align: top; padding: 10px 12px; border: 1px solid var(--rule-strong); line-height: 1.55; }
.legal-sec th { background: var(--wash); color: var(--navy); font-weight: 600; width: 32%; }
.legal-sec td a { color: var(--periwinkle); }
@media (max-width: 640px) { .ai-meta > div { grid-template-columns: 1fr; gap: 2px; } }