/*
Theme Name: CloudMonitor
Description: Child theme for CloudMonitor based on Ollie WordPress theme.
Template: ollie
Version: 1.0.3
*/

/* CloudMonitor child theme styles */

/* =============================================================
   Page-wide layout: full-bleed sections, no gaps between parts.
   - Zero Ollie's root padding so `.has-global-padding` (auto-added
     to the <main> and to our footer wrapper) doesn't push content
     away from the viewport edges. The header keeps its padding via
     its own inline `style="padding-*:..."` declaration.
   - Zero the margin WP injects between direct children of
     `.wp-site-blocks` so header / main / footer butt up cleanly.
   ============================================================= */
body {
	--wp--style--root--padding-left: 0;
	--wp--style--root--padding-right: 0;
}
.wp-site-blocks > * { margin-block-start: 0; }

/* =============================================================
   Site header — ported from design handoff (cm-topnav block).
   Sticky light bar: logo (left), flat nav (center), CTA (right).
   ============================================================= */
.cm-topnav-wrap {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--cm-border);
}
.cm-topnav {
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 32px;
	font-family: var(--cm-font-sans);
}
/* Logo is now wp:image — renders as <figure class="wp-block-image cm-topnav-logo">
   wrapping <a><img>. Zero the figure's default margin and inherit the
   inline-flex layout the original anchor had. */
.cm-topnav-logo { display: inline-flex; margin: 0; }
.cm-topnav-logo > a { display: inline-flex; line-height: 0; }
.cm-topnav-logo img { height: 28px; width: auto; display: block; }
/* Right-side cluster (nav + CTA) pushed to the far right of the bar.
   margin-left:auto on the wrapper is what right-aligns the whole menu;
   WP injects `:where(.is-layout-flex) > * { margin: 0 }` which has zero
   specificity, so the 3-class selector here wins. */
.cm-topnav-wrap .cm-topnav > .cm-topnav-right {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
	margin-left: auto;
}
.cm-topnav-nav { display: flex; gap: 26px; flex-wrap: wrap; }
/* wp:paragraph wrappers around each nav anchor — zero their default
   margins so the inner <a class="cm-topnav-link"> controls the layout. */
.cm-topnav-link-wrap { margin: 0; line-height: 1; }
.cm-topnav-link {
	background: transparent;
	border: 0;
	padding: 8px 0;
	font: 500 14px/1 var(--cm-font-sans);
	color: var(--cm-fg2);
	text-decoration: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: color 120ms ease-out;
}
.cm-topnav-link:hover { color: var(--cm-brand); }

/* Dropdown menus (Platform, Support) — pure-CSS using <div> + <button>.
   We deliberately don't use <details>/<summary>: modern browsers implement
   <details> with internal shadow-DOM slots that hide non-summary children
   when not [open], regardless of author CSS — which makes hover-to-reveal
   impossible without JS. Plain elements sidestep that entirely. */
.cm-topnav-dd { position: relative; }
.cm-topnav-caret {
	width: 12px;
	height: 12px;
	margin-left: 2px;
	transition: transform 120ms ease-out;
}
.cm-topnav-dd:hover .cm-topnav-caret,
.cm-topnav-dd:focus-within .cm-topnav-caret { transform: rotate(180deg); }
.cm-topnav-dd-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 240px;
	background: var(--cm-bg);
	border: 1px solid var(--cm-border);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(14, 26, 43, 0.08);
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	transition: opacity 120ms ease-out;
}
/* Reveal triggers. Hover anywhere on the dropdown wrapper (which contains the
   trigger button) opens the panel; the panel itself is :hover-targeted so the
   cursor can travel from button onto the panel through the ::before bridge
   without breaking the chain. :focus-within handles keyboard + touch (tap
   focuses the button → panel opens; tap elsewhere blurs → panel closes). */
.cm-topnav-dd:hover .cm-topnav-dd-panel,
.cm-topnav-dd:focus-within .cm-topnav-dd-panel,
.cm-topnav-dd-panel:hover {
	opacity: 1;
	pointer-events: auto;
}
/* Invisible bridge so the cursor doesn't lose :hover crossing the gap between
   the trigger and the panel. Sized to fit *just* under the trigger — any
   taller and it would overlap the trigger's hit area and, once the panel is
   pointer-events:auto, swallow clicks meant for the trigger itself. */
.cm-topnav-dd-panel::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -8px;
	height: 8px;
}
.cm-topnav-dd-link {
	display: block;
	padding: 10px 12px;
	border-radius: 6px;
	font: 500 14px/1.3 var(--cm-font-sans);
	color: var(--cm-fg2);
	text-decoration: none;
	white-space: nowrap;
	transition: color 120ms ease-out, background 120ms ease-out;
}
.cm-topnav-dd-link:hover,
.cm-topnav-dd-link:focus-visible {
	color: var(--cm-brand);
	background: var(--cm-bg-muted);
	outline: none;
}

/* Mega-menu variant. The trigger wrapper goes position:static so the panel
   anchors to .cm-topnav-wrap (which is position:sticky and so provides a
   containing block) and spans a wide centered band rather than the narrow
   column under the trigger button. */
.cm-topnav-dd--mega { position: static; }
.cm-topnav-mega-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 24px;
	right: 24px;
	min-width: 0;
	max-width: 1100px;
	margin: 0 auto;
	padding: 28px 32px;
	background: var(--cm-bg);
	border: 1px solid var(--cm-border);
	border-radius: 12px;
	box-shadow: var(--cm-shadow-md);
	display: block;
}
/* The mega panel anchors to .cm-topnav-wrap, so the vertical gap from the
   summary's bottom edge down to the panel's top edge is the topnav's bottom
   padding (~14px) plus the 6px addend. Bridge needs to span that. */
.cm-topnav-mega-panel::before {
	top: -20px;
	height: 20px;
}
.cm-topnav-mega-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 0.9fr;
	gap: 36px;
}
.cm-topnav-mega-eyebrow {
	margin: 0 0 14px;
	font: var(--cm-overline);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cm-fg3);
}
.cm-topnav-mega-col { display: flex; flex-direction: column; gap: 6px; }
.cm-topnav-mega-item {
	display: block;
	padding: 8px 10px;
	margin: 0 -10px;
	border-radius: 8px;
	text-decoration: none;
	transition: background 120ms ease-out;
}
.cm-topnav-mega-item:hover,
.cm-topnav-mega-item:focus-visible {
	background: var(--cm-bg-muted);
	outline: none;
}
.cm-topnav-mega-item-title {
	display: block;
	font: 600 15px/1.3 var(--cm-font-sans);
	color: var(--cm-fg1);
	margin-bottom: 2px;
}
.cm-topnav-mega-item:hover .cm-topnav-mega-item-title,
.cm-topnav-mega-item:focus-visible .cm-topnav-mega-item-title { color: var(--cm-brand); }
.cm-topnav-mega-item-sub {
	display: block;
	font: 400 13px/1.45 var(--cm-font-sans);
	color: var(--cm-fg3);
}
.cm-topnav-mega-card {
	background: var(--cm-bg-muted);
	border: 1px solid var(--cm-divider);
	border-radius: 10px;
	padding: 20px 22px;
}
.cm-topnav-mega-card-title {
	margin: 0 0 8px;
	font: 600 16px/1.3 var(--cm-font-sans);
	color: var(--cm-fg1);
}
.cm-topnav-mega-card-body {
	margin: 0 0 14px;
	font: 400 13px/1.5 var(--cm-font-sans);
	color: var(--cm-fg2);
}
.cm-topnav-mega-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font: 600 14px/1 var(--cm-font-sans);
	color: var(--cm-brand);
	text-decoration: none;
}
.cm-topnav-mega-card-cta:hover { color: var(--cm-brand-hover); }

/* CTA: wp:buttons renders <div class="wp-block-buttons cm-topnav-cta">
   containing wp:button → <div class="wp-block-button cm-btn cm-btn-primary"><a class="wp-block-button__link">…</a></div>.
   Style the inner anchor; the wrapping divs stay chrome. */
.cm-topnav-cta { margin-left: 0; }
.cm-topnav-cta .wp-block-button.cm-btn-primary { background: transparent; padding: 0; }
.cm-topnav-cta .wp-block-button.cm-btn-primary > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 6px;
	border: 1px solid transparent;
	font: var(--cm-button);
	text-decoration: none;
	white-space: nowrap;
	background: var(--cm-brand);
	color: #fff;
	transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}
.cm-topnav-cta .wp-block-button.cm-btn-primary > .wp-block-button__link:hover {
	background: var(--cm-brand-hover);
	color: #fff;
}

@media (max-width: 960px) {
	.cm-topnav-mega-grid { grid-template-columns: 1fr 1fr; }
	.cm-topnav-mega-card { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
	.cm-topnav { gap: 16px; padding: 12px 20px; flex-wrap: wrap; }
	.cm-topnav-wrap .cm-topnav > .cm-topnav-right { gap: 16px; flex-wrap: wrap; }
	.cm-topnav-nav { flex-basis: 100%; order: 2; gap: 16px; }
	.cm-topnav-cta { order: 1; margin-left: auto; }
	/* Mobile: collapse the panel by default; the trigger's :focus-within
	   (set by tapping the button) opens it. The bridges aren't needed on
	   touch — kill them so they don't reserve hit area. */
	.cm-topnav-dd-panel {
		position: static;
		box-shadow: none;
		min-width: 0;
		margin-top: 8px;
		display: none;
	}
	.cm-topnav-dd:focus-within .cm-topnav-dd-panel { display: flex; opacity: 1; pointer-events: auto; }
	.cm-topnav-dd:focus-within .cm-topnav-mega-panel { display: block; }
	.cm-topnav-dd-panel::before,
	.cm-topnav-mega-panel::before { content: none; }
	.cm-topnav-mega-panel {
		left: 0;
		right: 0;
		padding: 16px;
		border-radius: 8px;
		max-width: none;
		box-shadow: none;
	}
	.cm-topnav-mega-grid { grid-template-columns: 1fr; gap: 20px; }
}


/* =============================================================
   CloudMonitor design system tokens — ported from Phase 1 design.
   Source: prompts/new-design/design-handoff/cloudmonitor-website-design/
   Only the subset used by the pricing page is included here.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root {
	--cm-brand: #004F8A;
	--cm-brand-hover: #003C6C;
	--cm-brand-tint: #E6EEF5;
	--cm-ocean-50: #F4F8FC;
	--cm-ocean-100: #E6EEF5;
	--cm-ocean-200: #C7DCEF;
	--cm-ocean-300: #9BC1E5;
	--cm-pulse: #00B5E2;
	--cm-ink-900: #0E1A2B;
	--cm-ink-100: #F1F4F8;
	--cm-fg1: #0E1A2B;
	--cm-fg2: #4A5A73;
	--cm-fg3: #6B7A91;
	--cm-fg4: #93A0B3;
	--cm-bg: #FFFFFF;
	--cm-bg-muted: #F7F9FC;
	--cm-border: #DDE3EB;
	--cm-divider: #F1F4F8;
	--cm-savings: #1F9D55;
	--cm-savings-soft: #E6F4EC;
	--cm-anomaly: #E5A100;
	--cm-anomaly-soft: #FBF1D9;
	--cm-danger: #C8362B;
	--cm-danger-soft: #FBE7E5;
	--cm-info: #1B6AAB;
	--cm-info-soft: #E6EEF5;
	--cm-pulse-soft: #D6F2FB;
	--cm-ink-50: #F7F9FC;
	--cm-ink-100: #F1F4F8;
	--cm-ink-200: #DDE3EB;
	--cm-ink-300: #BCC5D2;
	--cm-ink-400: #93A0B3;
	--cm-border-strong: #BCC5D2;
	--cm-h3: 600 22px/1.3 var(--cm-font-sans);
	--cm-overline: 600 11px/1.4 var(--cm-font-sans);
	--cm-shadow-sm: 0 1px 2px rgba(14, 26, 43, 0.06), 0 1px 1px rgba(14, 26, 43, 0.04);
	--cm-shadow-md: 0 4px 12px rgba(14, 26, 43, 0.08), 0 1px 2px rgba(14, 26, 43, 0.04);
	--cm-font-sans: "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--cm-h2: 700 28px/1.2 var(--cm-font-sans);
	--cm-body: 400 15px/1.55 var(--cm-font-sans);
	--cm-body-sm: 400 13px/1.5 var(--cm-font-sans);
	--cm-body-lg: 400 17px/1.55 var(--cm-font-sans);
	--cm-button: 600 14px/1 var(--cm-font-sans);
}

/* =============================================================
   Shared page design system — scoped to .cm-page. Every page
   template's <main> wrapper gets `cm-page` plus a page-specific
   class (e.g. cm-pricing-page, cm-role-cfo-page). This block
   covers buttons, hero, sections, feature grids, splits,
   outcomes, quote cards, certs, CTA bands, pricing/compare
   tables — the cross-page design system. Page-specific
   overrides live in their own scoped blocks below.
   ============================================================= */

.cm-page,
.cm-page * {
	box-sizing: border-box;
}

.cm-page {
	font-family: var(--cm-font-sans);
	color: var(--cm-fg1);
	background: var(--cm-bg);
	/* Kill WP's theme.json block-gap inside the pricing subtree so the
	   design's bespoke vertical rhythm wins. We add explicit margins below. */
	--wp--style--block-gap: 0;
}

/* Zero margin-block-* on direct children of any flow / constrained layout in
   the pricing subtree. WP injects `margin-block-start: var(--wp--preset--spacing--medium)`
   via :where(.is-layout-flow) > * (specificity 0,1,0) — a `margin: 0` shorthand on
   physical margin properties does NOT override the logical margin-block-* declaration.
   We use :is() (0,1,0 contribution) instead of :where() so our (0,2,0) beats WP's (0,1,0). */
.cm-page :is(.is-layout-flow, .is-layout-constrained) > *,
.cm-page :is(.is-layout-flow, .is-layout-constrained) > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.cm-page .cm-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---- Buttons ----
   wp:button renders as: <div class="wp-block-button cm-btn cm-btn-X"><a class="wp-block-button__link wp-element-button">label</a></div>
   So .cm-btn-X classes land on the WRAPPER div and we target the inner link.
   Bare <a class="cm-btn cm-btn-X"> (used by raw-HTML callers) is also supported. */
.cm-page a.cm-btn,
.cm-page .wp-block-button.cm-btn-primary > .wp-block-button__link,
.cm-page .wp-block-button.cm-btn-secondary > .wp-block-button__link,
.cm-page .wp-block-button.cm-btn-on-dark > .wp-block-button__link,
.cm-page .wp-block-button.cm-btn-ghost-on-dark > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 6px;
	border: 1px solid transparent;
	font: var(--cm-button);
	cursor: pointer;
	text-decoration: none;
	transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}
.cm-page a.cm-btn-primary,
.cm-page .wp-block-button.cm-btn-primary > .wp-block-button__link { background: var(--cm-brand); color: #fff; }
.cm-page a.cm-btn-primary:hover,
.cm-page .wp-block-button.cm-btn-primary > .wp-block-button__link:hover { background: var(--cm-brand-hover); color: #fff; }

.cm-page a.cm-btn-secondary,
.cm-page .wp-block-button.cm-btn-secondary > .wp-block-button__link { background: #fff; color: var(--cm-brand); border-color: var(--cm-brand); }
.cm-page a.cm-btn-secondary:hover,
.cm-page .wp-block-button.cm-btn-secondary > .wp-block-button__link:hover { background: var(--cm-brand-tint); color: var(--cm-brand); }

.cm-page a.cm-btn-on-dark,
.cm-page .wp-block-button.cm-btn-on-dark > .wp-block-button__link { background: #fff; color: var(--cm-brand); }
.cm-page a.cm-btn-on-dark:hover,
.cm-page .wp-block-button.cm-btn-on-dark > .wp-block-button__link:hover { background: var(--cm-ocean-50); color: var(--cm-brand); }

.cm-page a.cm-btn-ghost-on-dark,
.cm-page .wp-block-button.cm-btn-ghost-on-dark > .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.cm-page a.cm-btn-ghost-on-dark:hover,
.cm-page .wp-block-button.cm-btn-ghost-on-dark > .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* The wp-block-button wrapper div shouldn't add its own visual chrome */
.cm-page .wp-block-button.cm-btn-primary,
.cm-page .wp-block-button.cm-btn-secondary,
.cm-page .wp-block-button.cm-btn-on-dark,
.cm-page .wp-block-button.cm-btn-ghost-on-dark { background: transparent; padding: 0; }

/* Buttons containers — keep design flex layout regardless of WP block layout classes */
.cm-page .wp-block-buttons.cm-pagehero-ctas,
.cm-page .wp-block-buttons.cm-cta-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Page hero ---- */
.cm-page .cm-pagehero {
	padding: 56px 0 64px;
	background: linear-gradient(180deg, var(--cm-ocean-50) 0%, #fff 80%);
	border-bottom: 1px solid var(--cm-divider);
}
.cm-page .cm-pagehero-inner { display: block; }
.cm-page .cm-pagehero-inner.solo { max-width: 820px; }
.cm-page .cm-pagehero-overline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	background: var(--cm-brand-tint);
	color: var(--cm-brand);
	font: 600 12px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 999px;
	margin: 0 0 16px;
}
.cm-page .cm-pagehero-h1 {
	font: 700 48px/1.05 var(--cm-font-sans);
	letter-spacing: -0.02em;
	color: var(--cm-fg1);
	margin: 0 0 18px;
}
.cm-page .cm-pagehero-sub {
	font: var(--cm-body-lg);
	color: var(--cm-fg2);
	margin: 0 0 28px;
	max-width: 540px;
}
.cm-page .cm-pagehero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Bold hero variant ----
   Dark ink-900 panel so the hero separates strongly from body content.
   Ported from design handoff where it lives under `body.cm-hero-bold`. */
.cm-page.cm-hero-bold .cm-pagehero {
	background: var(--cm-ink-900);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cm-page .cm-pagehero-h1 em { font-style: normal; color: var(--cm-brand); }
.cm-page.cm-hero-bold .cm-pagehero-h1 { color: #fff; }
.cm-page.cm-hero-bold .cm-pagehero-h1 em { color: var(--cm-pulse); }
.cm-page.cm-hero-bold .cm-pagehero-sub { color: rgba(255, 255, 255, 0.78); }
.cm-page.cm-hero-bold .cm-pagehero-overline {
	background: rgba(0, 181, 226, 0.15);
	color: var(--cm-pulse);
}
.cm-page.cm-hero-bold .cm-pagehero .wp-block-button.cm-btn-secondary > .wp-block-button__link,
.cm-page.cm-hero-bold .cm-pagehero a.cm-btn-secondary {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.45);
}
.cm-page.cm-hero-bold .cm-pagehero .wp-block-button.cm-btn-secondary > .wp-block-button__link:hover,
.cm-page.cm-hero-bold .cm-pagehero a.cm-btn-secondary:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.7);
}

/* ---- Chip ---- */
.cm-page .cm-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	font: 600 12px/1 var(--cm-font-sans);
	border-radius: 999px;
}
.cm-page .cm-chip-brand { background: var(--cm-brand-tint); color: var(--cm-brand); }

/* ---- Sections ---- */
.cm-page .cm-section { padding: 80px 0; }
.cm-page .cm-section-muted {
	background: var(--cm-bg-muted);
	border-top: 1px solid var(--cm-divider);
	border-bottom: 1px solid var(--cm-divider);
}
.cm-page .cm-section-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.cm-page .cm-section-h-left { max-width: 720px; margin: 0 0 48px; }
.cm-page .cm-h2 {
	font: var(--cm-h2);
	letter-spacing: -0.015em;
	color: var(--cm-fg1);
	margin: 0;
}
.cm-page .cm-section-sub {
	font: var(--cm-body-lg);
	color: var(--cm-fg2);
	margin: 0;
}
.cm-page .cm-eyebrow-2 {
	font: 600 12px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cm-brand);
	margin-bottom: 14px;
	display: inline-block;
}

/* ---- Pricing tier cards ---- */
.cm-page .cm-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: stretch;
}
.cm-page .cm-price {
	background: #fff;
	border: 1px solid var(--cm-border);
	border-radius: 12px;
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cm-page .cm-price.is-featured {
	border: 2px solid var(--cm-brand);
	position: relative;
	box-shadow: var(--cm-shadow-md);
}
.cm-page .cm-price-badge {
	position: absolute;
	top: -12px;
	left: 28px;
	background: var(--cm-brand);
	color: #fff;
	font: 600 11px/1 var(--cm-font-sans);
	padding: 6px 10px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.cm-page .cm-price-h {
	font: 700 22px/1.2 var(--cm-font-sans);
	color: var(--cm-fg1);
	margin: 0;
}
.cm-page .cm-price-s {
	font: var(--cm-body-sm);
	color: var(--cm-fg3);
	margin: 0;
	min-height: 36px;
}
.cm-page .cm-price-amount { display: flex; align-items: baseline; gap: 4px; }
.cm-page .cm-price-curr { font: 600 18px/1 var(--cm-font-sans); color: var(--cm-fg2); }
.cm-page .cm-price-num {
	font: 700 44px/1 var(--cm-font-sans);
	color: var(--cm-fg1);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.cm-page .cm-price-unit {
	font: 500 14px/1.4 var(--cm-font-sans);
	color: var(--cm-fg3);
}
.cm-page .cm-price-list {
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.cm-page .cm-price-list li {
	font: var(--cm-body-sm);
	color: var(--cm-fg1);
	display: flex;
	gap: 10px;
	align-items: start;
}
.cm-page .cm-price-list li::before {
	content: "";
	width: 14px;
	height: 14px;
	margin-top: 4px;
	background: var(--cm-savings);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3.5 3.5L13 5' stroke='black' stroke-width='2.25' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3.5 3.5L13 5' stroke='black' stroke-width='2.25' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
	flex-shrink: 0;
}

/* ---- Comparison table ---- */
.cm-page .cm-compare {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border: 1px solid var(--cm-border);
	border-radius: 12px;
	overflow: hidden;
}
.cm-page .cm-compare th,
.cm-page .cm-compare td {
	padding: 14px 18px;
	text-align: left;
	font: var(--cm-body-sm);
	color: var(--cm-fg1);
	border-bottom: 1px solid var(--cm-divider);
}
.cm-page .cm-compare th {
	background: var(--cm-bg-muted);
	font: 600 13px/1.3 var(--cm-font-sans);
	color: var(--cm-fg3);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.cm-page .cm-compare td:first-child,
.cm-page .cm-compare th:first-child {
	font-weight: 500;
	color: var(--cm-fg1);
	text-transform: none;
	letter-spacing: 0;
}
.cm-page .cm-compare .is-feature-col { background: var(--cm-ocean-50); }
.cm-page .cm-compare th.is-feature-col { color: var(--cm-brand); font-size: 14px; }
.cm-page .cm-compare tr:last-child td { border-bottom: 0; }
.cm-page .cm-compare .yes { color: var(--cm-savings); font-weight: 600; }
.cm-page .cm-compare .no { color: var(--cm-fg4); }
.cm-page .cm-compare .partial { color: var(--cm-anomaly); }
.cm-page .cm-compare-cat {
	background: var(--cm-bg-muted);
	font: 600 12px/1.3 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cm-fg3);
}

/* ---- NFP callout band ---- */
.cm-page .cm-nfp {
	background: var(--cm-ocean-50);
	border: 1px solid var(--cm-ocean-200);
	border-radius: 12px;
	padding: 40px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: center;
}
.cm-page .cm-nfp-h {
	font: 700 28px/1.2 var(--cm-font-sans);
	letter-spacing: -0.015em;
	color: var(--cm-fg1);
	margin: 16px 0 12px;
}
.cm-page .cm-nfp-p {
	font: var(--cm-body-lg);
	color: var(--cm-fg2);
	margin: 0;
	max-width: 580px;
}

/* ---- FAQ (uses wp:details for semantics + free accordion) ---- */
.cm-page .cm-faq {
	max-width: 820px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}
.cm-page .cm-faq .wp-block-details {
	border-bottom: 1px solid var(--cm-border);
	padding: 0;
	margin: 0;
}
.cm-page .cm-faq .wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	padding: 22px 32px 22px 0;
	font: 600 17px/1.4 var(--cm-font-sans);
	color: var(--cm-fg1);
	user-select: none;
	position: relative;
}
.cm-page .cm-faq .wp-block-details > summary::-webkit-details-marker { display: none; }
.cm-page .cm-faq .wp-block-details > summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 22px;
	font: 400 22px/1 var(--cm-font-sans);
	color: var(--cm-fg3);
	width: 24px;
	text-align: center;
}
.cm-page .cm-faq .wp-block-details[open] > summary::after { content: "−"; color: var(--cm-brand); }
.cm-page .cm-faq .wp-block-details > p,
.cm-page .cm-faq .wp-block-details > *:not(summary) {
	font: var(--cm-body);
	color: var(--cm-fg2);
	max-width: 640px;
	margin: 0 0 22px;
}

/* ---- CTA band ---- */
.cm-page .cm-cta {
	background: var(--cm-brand);
	padding: 56px 0;
}
.cm-page .cm-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}
.cm-page .cm-cta h2 {
	font: var(--cm-h2);
	color: #fff;
	margin: 0;
	letter-spacing: -0.015em;
}
.cm-page .cm-cta-sub {
	color: rgba(255, 255, 255, 0.85);
	font: var(--cm-body-lg);
	margin: 6px 0 0;
	max-width: 540px;
}
.cm-page .cm-cta-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Native-block margin resets ----
   wp:paragraph / wp:heading emit <p>/<h*> with WP's default block-gap margins.
   When those blocks sit inside chrome containers (price-amount, etc.),
   the margins break the visual rhythm of the design. Zero them out per-container. */

/* Hero rhythm — physical margin-bottom AND logical margin-block-end so WP's
   :where() logical-property rules can't leak back in via cascade. */
.cm-page .cm-pagehero-inner > * { margin: 0; margin-block-start: 0; margin-block-end: 0; }
.cm-page .cm-pagehero-inner .cm-pagehero-overline { margin: 0 0 16px; margin-block-end: 16px; }
.cm-page .cm-pagehero-inner .cm-pagehero-h1 { margin: 0 0 18px; margin-block-end: 18px; }
.cm-page .cm-pagehero-inner .cm-pagehero-sub { margin: 0 0 28px; margin-block-end: 28px; }

.cm-page .cm-price > * { margin-top: 0; margin-bottom: 0; }
.cm-page .cm-price-amount p { margin: 0; }
.cm-page .cm-price-list { margin-top: 12px; padding: 0; }

.cm-page .cm-section-head > p,
.cm-page .cm-section-head > h2,
.cm-page .cm-section-h-left > p,
.cm-page .cm-section-h-left > h2 { margin: 0; }
.cm-page .cm-section-h-left .cm-eyebrow-2 { margin-bottom: 14px; }
.cm-page .cm-section-head .cm-eyebrow-2 { margin-bottom: 0; }

.cm-page .cm-nfp > div > * { margin: 0; }
.cm-page .cm-nfp .cm-nfp-h { margin: 16px 0 12px; }

.cm-page .cm-cta-copy > * { margin: 0; }
.cm-page .cm-cta-copy .cm-cta-h { font: var(--cm-h2); color: #fff; letter-spacing: -0.015em; margin: 0; }
.cm-page .cm-cta-copy .cm-cta-sub { margin-top: 6px; }

/* ---- Comparison table ----
   wp:table renders inside a <figure class="wp-block-table">. Per-cell classes aren't
   supported by core/table, so column highlight and category-row styling use nth-child
   and :has() selectors instead. */
.cm-page .wp-block-table.cm-compare { margin: 0; }
.cm-page .wp-block-table.cm-compare > table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border: 1px solid var(--cm-border);
	border-radius: 12px;
	overflow: hidden;
}
.cm-page .cm-compare th:nth-child(3),
.cm-page .cm-compare td:nth-child(3) { background: var(--cm-ocean-50); }
.cm-page .cm-compare thead th:nth-child(3) { color: var(--cm-brand); font-size: 14px; }
.cm-page .cm-compare tbody tr:has(td:first-child > strong) td {
	background: var(--cm-bg-muted);
	font: 600 12px/1.3 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cm-fg3);
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
	.cm-page .cm-pagehero { padding: 40px 0 48px; }
	.cm-page .cm-pagehero-h1 { font-size: 36px; }
	.cm-page .cm-section { padding: 56px 0; }
	.cm-page .cm-pricing-grid { grid-template-columns: 1fr; gap: 16px; }
	.cm-page .cm-nfp { grid-template-columns: 1fr; padding: 28px; }
	.cm-page .cm-cta-inner { flex-direction: column; align-items: flex-start; }
	.cm-page .cm-compare { font-size: 13px; }
	.cm-page .cm-compare th,
	.cm-page .cm-compare td { padding: 12px 10px; }
}

@media (max-width: 600px) {
	.cm-page .cm-pagehero-h1 { font-size: 30px; }
	.cm-page .cm-pagehero-sub { font-size: 16px; }
	.cm-page .cm-pagehero-ctas .cm-btn { width: 100%; justify-content: center; }
	.cm-page .cm-compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* =============================================================
   Waitlist page — scoped to .cm-waitlist-page. Mirrors the
   pricing page design system (cm-pagehero / cm-section / cm-cta
   / cm-faq), with waitlist-only additions for the signup form,
   migration timeline, and "what's new" grid (terminal vignette).
   ============================================================= */

.cm-waitlist-page,
.cm-waitlist-page * { box-sizing: border-box; }

.cm-waitlist-page {
	font-family: var(--cm-font-sans);
	color: var(--cm-fg1);
	background: var(--cm-bg);
	--wp--style--block-gap: 0;
}

.cm-waitlist-page :is(.is-layout-flow, .is-layout-constrained) > *,
.cm-waitlist-page :is(.is-layout-flow, .is-layout-constrained) > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.cm-waitlist-page .cm-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---- Buttons ---- */
.cm-waitlist-page a.cm-btn,
.cm-waitlist-page .wp-block-button.cm-btn-primary > .wp-block-button__link,
.cm-waitlist-page .wp-block-button.cm-btn-secondary > .wp-block-button__link,
.cm-waitlist-page .wp-block-button.cm-btn-on-dark > .wp-block-button__link,
.cm-waitlist-page .wp-block-button.cm-btn-ghost-on-dark > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 6px;
	border: 1px solid transparent;
	font: var(--cm-button);
	cursor: pointer;
	text-decoration: none;
	transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}
.cm-waitlist-page a.cm-btn-primary,
.cm-waitlist-page .wp-block-button.cm-btn-primary > .wp-block-button__link { background: var(--cm-brand); color: #fff; }
.cm-waitlist-page a.cm-btn-primary:hover,
.cm-waitlist-page .wp-block-button.cm-btn-primary > .wp-block-button__link:hover { background: var(--cm-brand-hover); color: #fff; }
.cm-waitlist-page a.cm-btn-secondary,
.cm-waitlist-page .wp-block-button.cm-btn-secondary > .wp-block-button__link { background: #fff; color: var(--cm-brand); border-color: var(--cm-brand); }
.cm-waitlist-page a.cm-btn-secondary:hover,
.cm-waitlist-page .wp-block-button.cm-btn-secondary > .wp-block-button__link:hover { background: var(--cm-brand-tint); color: var(--cm-brand); }
.cm-waitlist-page a.cm-btn-on-dark,
.cm-waitlist-page .wp-block-button.cm-btn-on-dark > .wp-block-button__link { background: #fff; color: var(--cm-brand); }
.cm-waitlist-page a.cm-btn-on-dark:hover,
.cm-waitlist-page .wp-block-button.cm-btn-on-dark > .wp-block-button__link:hover { background: var(--cm-ocean-50); color: var(--cm-brand); }
.cm-waitlist-page a.cm-btn-ghost-on-dark,
.cm-waitlist-page .wp-block-button.cm-btn-ghost-on-dark > .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.cm-waitlist-page a.cm-btn-ghost-on-dark:hover,
.cm-waitlist-page .wp-block-button.cm-btn-ghost-on-dark > .wp-block-button__link:hover { background: rgba(255,255,255,0.1); color: #fff; }
.cm-waitlist-page .wp-block-button.cm-btn-primary,
.cm-waitlist-page .wp-block-button.cm-btn-secondary,
.cm-waitlist-page .wp-block-button.cm-btn-on-dark,
.cm-waitlist-page .wp-block-button.cm-btn-ghost-on-dark { background: transparent; padding: 0; }
.cm-waitlist-page .wp-block-buttons.cm-cta-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Page hero (single-column copy with mounted right-column form) ---- */
.cm-waitlist-page .cm-pagehero {
	padding: 56px 0 64px;
	background: linear-gradient(180deg, var(--cm-ocean-50) 0%, #fff 80%);
	border-bottom: 1px solid var(--cm-divider);
}
.cm-waitlist-page .cm-pagehero-overline {
	font: 600 12px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cm-brand);
	margin: 0 0 16px;
	display: inline-block;
}
.cm-waitlist-page .cm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	background: var(--cm-brand-tint);
	color: var(--cm-brand);
	font: 600 12px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 999px;
	margin: 0 0 16px;
}
.cm-waitlist-page .cm-pagehero-h1 {
	font: 700 48px/1.05 var(--cm-font-sans);
	letter-spacing: -0.02em;
	color: var(--cm-fg1);
	margin: 0 0 18px;
}
.cm-waitlist-page .cm-pagehero-h1 em {
	font-style: normal;
	color: var(--cm-brand);
}
.cm-waitlist-page .cm-pagehero-sub {
	font: var(--cm-body-lg);
	color: var(--cm-fg2);
	margin: 0 0 28px;
	max-width: 540px;
}

/* Bold (dark) hero variant — site-wide convention */
.cm-waitlist-page.cm-hero-bold .cm-pagehero {
	background: var(--cm-ink-900);
	border-bottom: 0;
}
.cm-waitlist-page.cm-hero-bold .cm-pagehero-h1 { color: #fff; }
.cm-waitlist-page.cm-hero-bold .cm-pagehero-h1 em { color: var(--cm-pulse); }
.cm-waitlist-page.cm-hero-bold .cm-pagehero-sub { color: rgba(255,255,255,0.78); }
.cm-waitlist-page.cm-hero-bold .cm-pagehero-overline { color: var(--cm-pulse); }
.cm-waitlist-page.cm-hero-bold .cm-eyebrow {
	background: rgba(0, 181, 226, 0.15);
	color: var(--cm-pulse);
}

/* Two-column hero layout: copy left, form card right */
.cm-waitlist-page .cm-wl-hero-inner {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 64px;
	align-items: start;
}
.cm-waitlist-page .cm-wl-hero-copy > * { margin: 0; }
.cm-waitlist-page .cm-wl-hero-copy .cm-pagehero-overline { margin: 0 0 16px; }
.cm-waitlist-page .cm-wl-hero-copy .cm-pagehero-h1 { margin: 0 0 18px; }
.cm-waitlist-page .cm-wl-hero-copy .cm-pagehero-sub { margin: 0 0 28px; }

/* Hero meta strip (3-up label/value/footnote) */
.cm-waitlist-page .cm-wl-meta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 560px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 24px;
	margin-top: 8px;
}
.cm-waitlist-page:not(.cm-hero-bold) .cm-wl-meta {
	border-top-color: var(--cm-border);
}
.cm-waitlist-page .cm-wl-meta-item {
	padding: 0 18px;
	border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.cm-waitlist-page:not(.cm-hero-bold) .cm-wl-meta-item {
	border-left-color: var(--cm-border);
}
.cm-waitlist-page .cm-wl-meta-item:first-child {
	padding-left: 0;
	border-left: 0;
}
.cm-waitlist-page .cm-wl-meta-item > * { margin: 0; }
.cm-waitlist-page .cm-wl-meta-label {
	font: 600 11px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 8px;
}
.cm-waitlist-page:not(.cm-hero-bold) .cm-wl-meta-label {
	color: var(--cm-fg3);
}
.cm-waitlist-page .cm-wl-meta-value {
	font: 700 18px/1.2 var(--cm-font-sans);
	color: #fff;
}
.cm-waitlist-page:not(.cm-hero-bold) .cm-wl-meta-value {
	color: var(--cm-fg1);
}
.cm-waitlist-page .cm-wl-meta-foot {
	font: 500 12px/1.4 var(--cm-font-sans);
	color: rgba(255, 255, 255, 0.55);
	margin: 4px 0 0;
}
.cm-waitlist-page:not(.cm-hero-bold) .cm-wl-meta-foot {
	color: var(--cm-fg3);
}

/* ---- Sections (mirror pricing) ---- */
.cm-waitlist-page .cm-section { padding: 80px 0; }
.cm-waitlist-page .cm-section-muted {
	background: var(--cm-bg-muted);
	border-top: 1px solid var(--cm-divider);
	border-bottom: 1px solid var(--cm-divider);
}
.cm-waitlist-page .cm-section-head {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}
.cm-waitlist-page .cm-section-head > * { margin: 0; }
.cm-waitlist-page .cm-h2 {
	font: var(--cm-h2);
	font-size: clamp(28px, 3vw, 40px);
	color: var(--cm-fg1);
	letter-spacing: -0.02em;
	margin: 0 0 12px;
}
.cm-waitlist-page .cm-section-sub {
	font: var(--cm-body-lg);
	color: var(--cm-fg2);
	margin: 0;
}
.cm-waitlist-page .cm-eyebrow-2 {
	font: 600 12px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cm-brand);
	margin: 0 0 12px;
}

/* ---- Chips (used in timeline) ---- */
.cm-waitlist-page .cm-chip {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 999px;
	font: 600 11px/1 var(--cm-font-sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
}
.cm-waitlist-page .cm-chip-brand { background: var(--cm-brand-tint); color: var(--cm-brand); }
.cm-waitlist-page .cm-chip-savings { background: var(--cm-savings-soft); color: var(--cm-savings); }
.cm-waitlist-page .cm-chip-anomaly { background: var(--cm-anomaly-soft); color: var(--cm-anomaly); }

/* ---- Migration timeline (4 step cards) ---- */
.cm-waitlist-page .cm-wl-timeline {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	position: relative;
}
.cm-waitlist-page .cm-wl-timeline::before {
	content: "";
	position: absolute;
	top: 48px;
	left: 24px;
	right: 24px;
	height: 2px;
	background: var(--cm-border);
	z-index: 0;
}
.cm-waitlist-page .cm-wl-step {
	position: relative;
	z-index: 1;
	background: #fff;
	border: 1px solid var(--cm-border);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: box-shadow 120ms ease-out, border-color 120ms ease-out;
}
.cm-waitlist-page .cm-wl-step:hover {
	box-shadow: var(--cm-shadow-md);
	border-color: var(--cm-ocean-200);
}
.cm-waitlist-page .cm-wl-step > * { margin: 0; }
.cm-waitlist-page .cm-wl-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--cm-border);
	font: 700 16px/1 var(--cm-font-sans);
	color: var(--cm-fg2);
	margin: 0 0 4px;
}
.cm-waitlist-page .cm-wl-step.is-active .cm-wl-step-num {
	background: var(--cm-brand);
	border-color: var(--cm-brand);
	color: #fff;
	box-shadow: 0 0 0 4px var(--cm-brand-tint);
}
.cm-waitlist-page .cm-wl-step-date {
	font: 600 11px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cm-fg3);
}
.cm-waitlist-page .cm-wl-step-h {
	font: 600 17px/1.3 var(--cm-font-sans);
	color: var(--cm-fg1);
	margin: 4px 0 0;
}
.cm-waitlist-page .cm-wl-step-b {
	font: var(--cm-body-sm);
	color: var(--cm-fg2);
	flex: 1;
}

/* ---- What's new grid (asymmetric feature grid with hero card) ---- */
.cm-waitlist-page .cm-wl-new-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 18px;
}
.cm-waitlist-page .cm-feature {
	background: #fff;
	border: 1px solid var(--cm-border);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: box-shadow 120ms ease-out, border-color 120ms ease-out;
}
.cm-waitlist-page .cm-feature:hover {
	box-shadow: var(--cm-shadow-md);
	border-color: var(--cm-ocean-200);
}
.cm-waitlist-page .cm-feature > * { margin: 0; }
.cm-waitlist-page .cm-feature-h {
	font: 600 17px/1.3 var(--cm-font-sans);
	color: var(--cm-fg1);
}
.cm-waitlist-page .cm-feature-b {
	font: var(--cm-body-sm);
	color: var(--cm-fg2);
	flex: 1;
}
.cm-waitlist-page .cm-wl-feature--hero {
	grid-row: span 2;
	background: linear-gradient(180deg, #fff 0%, var(--cm-ocean-50) 100%);
	border-color: var(--cm-ocean-200);
}
.cm-waitlist-page .cm-wl-feature--hero .cm-feature-h {
	font: 700 22px/1.25 var(--cm-font-sans);
	letter-spacing: -0.01em;
}
.cm-waitlist-page .cm-wl-feature-tag {
	font: 600 11px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cm-brand);
	margin: 0 0 4px;
}

/* Inline "terminal" vignette inside the hero feature card */
.cm-waitlist-page .cm-wl-terminal {
	margin-top: 8px;
	background: #fff;
	border: 1px solid var(--cm-border);
	border-radius: 8px;
	padding: 14px;
	font-family: "JetBrains Mono", Consolas, monospace;
	font-size: 12px;
	line-height: 1.45;
	color: var(--cm-fg2);
}
.cm-waitlist-page .cm-wl-terminal p {
	margin: 0;
	padding: 8px 0;
	border-top: 1px dashed var(--cm-border);
	font-family: inherit;
}
.cm-waitlist-page .cm-wl-terminal p:first-child {
	border-top: 0;
	padding-top: 0;
}
.cm-waitlist-page .cm-wl-terminal span {
	color: var(--cm-brand);
	margin-right: 6px;
	font-weight: 600;
}

/* ---- FAQ (mirror pricing) ---- */
.cm-waitlist-page .cm-faq {
	max-width: 820px;
	margin: 0 auto;
}
.cm-waitlist-page .cm-faq .wp-block-details {
	border-bottom: 1px solid var(--cm-border);
	padding: 0;
}
.cm-waitlist-page .cm-faq .wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 32px 20px 0;
	font: 600 17px/1.3 var(--cm-font-sans);
	color: var(--cm-fg1);
	position: relative;
}
.cm-waitlist-page .cm-faq .wp-block-details > summary::-webkit-details-marker { display: none; }
.cm-waitlist-page .cm-faq .wp-block-details > summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 18px;
	font: 700 22px/1 var(--cm-font-sans);
	color: var(--cm-brand);
}
.cm-waitlist-page .cm-faq .wp-block-details[open] > summary::after { content: "−"; color: var(--cm-brand); }
.cm-waitlist-page .cm-faq .wp-block-details > p,
.cm-waitlist-page .cm-faq .wp-block-details > *:not(summary) {
	font: var(--cm-body);
	color: var(--cm-fg2);
	padding: 0 0 20px;
	margin: 0;
	max-width: 760px;
}

/* ---- CTA band (mirror pricing) ---- */
.cm-waitlist-page .cm-cta {
	background: var(--cm-brand);
	color: #fff;
	padding: 56px 0;
}
.cm-waitlist-page .cm-cta-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}
.cm-waitlist-page .cm-cta-copy > * { margin: 0; }
.cm-waitlist-page .cm-cta h2,
.cm-waitlist-page .cm-cta-copy .cm-cta-h {
	font: var(--cm-h2);
	color: #fff;
	letter-spacing: -0.015em;
	margin: 0;
}
.cm-waitlist-page .cm-cta-copy .cm-cta-sub {
	font: var(--cm-body-lg);
	color: rgba(255, 255, 255, 0.85);
	margin: 6px 0 0;
	max-width: 540px;
}
.cm-waitlist-page .cm-cta-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Signup form card (right column in the dark hero) ---- */
.cm-waitlist-page .cm-wl-form-card {
	background: #fff;
	border: 1px solid var(--cm-border);
	border-radius: 14px;
	padding: 28px;
	box-shadow: 0 24px 48px rgba(14, 26, 43, 0.35), 0 4px 12px rgba(14, 26, 43, 0.2);
}
.cm-waitlist-page:not(.cm-hero-bold) .cm-wl-form-card {
	box-shadow: var(--cm-shadow-md);
}
.cm-waitlist-page .cm-wl-form-card__head {
	margin-bottom: 20px;
}
.cm-waitlist-page .cm-wl-form-card h2 {
	margin: 0 0 6px;
	font: 700 20px/1.25 var(--cm-font-sans);
	letter-spacing: -0.01em;
	color: var(--cm-fg1);
}
.cm-waitlist-page .cm-wl-form-card__head p {
	margin: 0;
	font: var(--cm-body-sm);
	color: var(--cm-fg2);
}

.cm-waitlist-page .cm-wl-form label,
.cm-waitlist-page .cm-wl-form legend {
	display: block;
	font: 600 13px/1.3 var(--cm-font-sans);
	color: var(--cm-fg1);
	margin: 0 0 8px;
}
.cm-waitlist-page .cm-wl-form > label { margin-bottom: 14px; }
.cm-waitlist-page .cm-wl-form label > span {
	float: right;
	font: 600 11px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cm-fg3);
}
.cm-waitlist-page .cm-wl-form input[type="email"],
.cm-waitlist-page .cm-wl-form input[type="text"],
.cm-waitlist-page .cm-wl-form textarea {
	width: 100%;
	margin-top: 8px;
	padding: 11px 14px;
	border: 1px solid var(--cm-border-strong);
	border-radius: 6px;
	font: 500 15px/1.4 var(--cm-font-sans);
	color: var(--cm-fg1);
	background: #fff;
	box-shadow: inset 0 1px 2px rgba(14, 26, 43, 0.04);
}
.cm-waitlist-page .cm-wl-form input:focus,
.cm-waitlist-page .cm-wl-form textarea:focus {
	outline: none;
	border-color: var(--cm-brand);
	box-shadow: 0 0 0 3px var(--cm-brand-tint);
}
.cm-waitlist-page .cm-wl-form input.invalid {
	border-color: var(--cm-danger);
}
.cm-waitlist-page .cm-wl-error {
	margin: 0;
	min-height: 0;
	font: 500 12px/1.4 var(--cm-font-sans);
	color: var(--cm-danger);
}
.cm-waitlist-page .cm-wl-error:empty { display: none; }

.cm-waitlist-page .cm-wl-form textarea {
	min-height: 80px;
	resize: vertical;
}
.cm-waitlist-page .cm-wl-hint {
	margin: 0;
	font: 500 12px/1.45 var(--cm-font-sans);
	color: var(--cm-fg3);
}
.cm-waitlist-page .cm-wl-form button[type="submit"] {
	width: 100%;
	margin-top: 0;
	padding: 13px 18px;
	border: 0;
	border-radius: 6px;
	background: var(--cm-brand);
	color: #fff;
	font: 600 15px/1 var(--cm-font-sans);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background 120ms ease-out, opacity 120ms ease-out;
}
.cm-waitlist-page .cm-wl-form button[type="submit"]:hover:not(:disabled) { background: var(--cm-brand-hover); }
.cm-waitlist-page .cm-wl-form button[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }
.cm-waitlist-page .cm-wl-legal {
	margin: 12px 0 0;
	font: 500 12px/1.5 var(--cm-font-sans);
	color: var(--cm-fg3);
	text-align: center;
}
.cm-waitlist-page .cm-wl-legal a { color: inherit; text-decoration: underline; }

/* ============================================================
   WPForms overrides — make the WPForms-rendered waitlist form
   match the original .cm-wl-form design system. Self-contained
   (does not rely on the WPForms Modern stylesheet being loaded).
   Scoped to the waitlist page form card.
   ============================================================ */

.cm-waitlist-page .cm-wl-form-card .wpforms-container {
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
}
.cm-waitlist-page .cm-wl-form-card .wpforms-form {
	display: block;
}
.cm-waitlist-page .cm-wl-form-card .wpforms-field {
	margin: 0 0 14px;
	padding: 0;
}
.cm-waitlist-page .cm-wl-form-card .wpforms-field-label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font: 600 13px/1.3 var(--cm-font-sans);
	color: var(--cm-fg1);
}
.cm-waitlist-page .cm-wl-form-card .wpforms-required-label {
	color: var(--cm-danger);
	margin-left: 2px;
}
.cm-waitlist-page .cm-wl-form-card .wpforms-form input[type="email"],
.cm-waitlist-page .cm-wl-form-card .wpforms-form input[type="text"],
.cm-waitlist-page .cm-wl-form-card .wpforms-form input[type="url"],
.cm-waitlist-page .cm-wl-form-card .wpforms-form input[type="tel"],
.cm-waitlist-page .cm-wl-form-card .wpforms-form textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--cm-border-strong);
	border-radius: 6px;
	font: 500 15px/1.4 var(--cm-font-sans);
	color: var(--cm-fg1);
	background: #fff;
	box-shadow: inset 0 1px 2px rgba(14, 26, 43, 0.04);
	box-sizing: border-box;
}
.cm-waitlist-page .cm-wl-form-card .wpforms-form input:focus,
.cm-waitlist-page .cm-wl-form-card .wpforms-form textarea:focus {
	border-color: var(--cm-brand);
	box-shadow: 0 0 0 3px var(--cm-brand-tint);
	outline: none;
}
.cm-waitlist-page .cm-wl-form-card .wpforms-form textarea {
	min-height: 80px;
	resize: vertical;
	font-family: var(--cm-font-sans);
}
.cm-waitlist-page .cm-wl-form-card .wpforms-field-limit-text {
	margin: 6px 0 0;
	font: 500 12px/1.4 var(--cm-font-sans);
	color: var(--cm-fg3);
}
.cm-waitlist-page .cm-wl-form-card .wpforms-submit-container {
	margin: 0;
	padding: 0;
}
.cm-waitlist-page .cm-wl-form-card .wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 13px 18px;
	border: 0;
	border-radius: 6px;
	background: var(--cm-brand);
	color: #fff;
	font: 600 15px/1 var(--cm-font-sans);
	cursor: pointer;
	transition: background 120ms ease-out, opacity 120ms ease-out;
}
.cm-waitlist-page .cm-wl-form-card .wpforms-submit:hover:not(:disabled),
.cm-waitlist-page .cm-wl-form-card .wpforms-submit:focus-visible {
	background: var(--cm-brand-hover);
	color: #fff;
	outline: none;
}
.cm-waitlist-page .cm-wl-form-card .wpforms-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.cm-waitlist-page .cm-wl-form-card .wpforms-error {
	margin: 6px 0 0;
	font: 500 12px/1.4 var(--cm-font-sans);
	color: var(--cm-danger);
}
.cm-waitlist-page .cm-wl-form-card .wpforms-form input.wpforms-error,
.cm-waitlist-page .cm-wl-form-card .wpforms-form textarea.wpforms-error {
	border-color: var(--cm-danger);
}

.cm-waitlist-page .cm-wl-success {
	text-align: center;
	padding: 12px 4px 4px;
}
.cm-waitlist-page .cm-wl-success__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	margin: 0 auto 14px;
	background: var(--cm-savings-soft);
	color: var(--cm-savings);
	font: 700 28px/56px var(--cm-font-sans);
}
.cm-waitlist-page .cm-wl-success h3 {
	margin: 0 0 10px;
	font: 700 20px/1.25 var(--cm-font-sans);
	color: var(--cm-fg1);
}
.cm-waitlist-page .cm-wl-success p {
	margin: 0 0 10px;
	font: var(--cm-body-sm);
	color: var(--cm-fg2);
}
.cm-waitlist-page .cm-wl-success__summary {
	background: var(--cm-bg-muted);
	border: 1px solid var(--cm-border);
	border-radius: 6px;
	padding: 12px 14px;
	margin: 0 0 10px;
	text-align: left;
}
.cm-waitlist-page .cm-wl-success__summary p {
	margin: 0 0 4px;
	font: var(--cm-body-sm);
	color: var(--cm-fg1);
}
.cm-waitlist-page .cm-wl-success__summary p:last-child { margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
	.cm-waitlist-page .cm-wl-hero-inner { grid-template-columns: 1fr; gap: 40px; }
	.cm-waitlist-page .cm-wl-new-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cm-waitlist-page .cm-wl-feature--hero { grid-column: 1 / -1; grid-row: auto; }
	.cm-waitlist-page .cm-wl-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cm-waitlist-page .cm-wl-timeline::before { display: none; }
}

@media (max-width: 860px) {
	.cm-waitlist-page .cm-pagehero { padding: 40px 0 48px; }
	.cm-waitlist-page .cm-pagehero-h1 { font-size: 36px; }
	.cm-waitlist-page .cm-section { padding: 56px 0; }
	.cm-waitlist-page .cm-wl-meta { grid-template-columns: 1fr; gap: 14px; max-width: 100%; }
	.cm-waitlist-page .cm-wl-meta-item { padding: 0; border-left: 0; }
	.cm-waitlist-page .cm-wl-new-grid { grid-template-columns: 1fr; }
	.cm-waitlist-page .cm-wl-timeline { grid-template-columns: 1fr; }
	.cm-waitlist-page .cm-cta-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
	.cm-waitlist-page .cm-pagehero-h1 { font-size: 30px; }
	.cm-waitlist-page .cm-pagehero-sub { font-size: 16px; }
	.cm-waitlist-page .cm-wl-form-card { padding: 20px; }
}


/* =============================================================
   Site footer — ported from design handoff (cm-footer block).
   Unscoped so it applies wherever the template-part renders.
   ============================================================= */

.cm-footer {
	background: var(--cm-ink-900);
	color: var(--cm-ink-300);
	padding: 56px 0 0;
	font-family: var(--cm-font-sans);
}
.cm-footer .cm-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}
.cm-footer .cm-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 36px;
	padding-bottom: 40px;
}
.cm-footer .cm-footer-grid--secondary {
	grid-template-columns: 1fr 1fr;
	padding-top: 32px;
	padding-bottom: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* Logo is now wp:image (<figure><img>) — apply layout to the figure,
   visual filter to the inner img so the SVG flips white on the dark footer. */
.cm-footer .cm-footer-logo { margin: 0 0 16px; line-height: 0; }
.cm-footer .cm-footer-logo img {
	height: 24px;
	width: auto;
	display: block;
	filter: brightness(0) invert(1);
}
.cm-footer .cm-footer-blurb {
	font: var(--cm-body-sm);
	color: var(--cm-ink-300);
	margin: 0 0 16px;
	max-width: 320px;
}
.cm-footer .cm-footer-mp-row { gap: 10px; margin-top: 0; margin-bottom: 16px; }
/* wp:social-links renders <ul class="wp-block-social-links cm-footer-social">.
   Style the list + icons to match the footer's dark surface (32px squares,
   white icons on transparent tile). */
.cm-footer .cm-footer-social {
	display: flex;
	gap: 8px;
	padding: 0;
	margin: 0;
	list-style: none;
}
.cm-footer .cm-footer-social .wp-social-link,
.cm-footer .cm-footer-social .wp-block-social-link {
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.05);
	transition: background 140ms ease;
}
.cm-footer .cm-footer-social .wp-social-link:hover,
.cm-footer .cm-footer-social .wp-block-social-link:hover {
	background: rgba(255, 255, 255, 0.12);
	transform: none;
}
.cm-footer .cm-footer-social a {
	color: #fff;
	width: 100%;
	height: 100%;
	display: flex;
	padding: 8px;
	box-sizing: border-box;
	line-height: 0;
	align-items: center;
	justify-content: center;
}
.cm-footer .cm-footer-social svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: currentColor;
}
.cm-footer .cm-footer-h {
	font: 600 11px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #fff;
	margin: 0 0 14px;
}
.cm-footer .cm-footer-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cm-footer .cm-footer-list li { font: var(--cm-body-sm); color: var(--cm-ink-300); }
.cm-footer .cm-footer-list a { color: var(--cm-ink-300); text-decoration: none; }
.cm-footer .cm-footer-list a:hover { color: #fff; }
.cm-footer .cm-footer-list-plain li { line-height: 1.6; }
.cm-footer .cm-footer-list-plain strong { color: #fff; font-weight: 600; }
.cm-footer .cm-footer-rule {
	display: flex;
	gap: 24px;
	align-items: center;
	padding: 18px 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font: var(--cm-body-sm);
	color: var(--cm-ink-400);
}
.cm-footer .cm-footer-rule p { margin: 0; }
.cm-footer .cm-footer-rule a { color: var(--cm-ink-400); text-decoration: none; }
.cm-footer .cm-footer-rule a:hover { color: #fff; }

/* Marketplace badge — white pill so it pops against the dark footer. */
.cm-footer .cm-mp {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: #fff;
	border-radius: 10px;
	text-decoration: none;
}
.cm-footer .cm-mp-logo {
	width: 28px;
	height: 28px;
	border-radius: 4px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #00A4EF;
	margin: 0;
	font: 700 12px/1 var(--cm-font-sans);
}
.cm-footer .cm-mp-t {
	display: block;
	margin: 0;
	font: 500 11px/1.2 var(--cm-font-sans);
	color: var(--cm-fg3);
}
.cm-footer .cm-mp-b {
	display: block;
	font: 600 14px/1.2 var(--cm-font-sans);
	color: var(--cm-fg1);
	margin: 2px 0 0;
}
.cm-footer .cm-flex-row { display: flex; align-items: center; }

@media (max-width: 960px) {
	.cm-footer .cm-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	.cm-footer { padding-top: 40px; }
	.cm-footer .cm-footer-grid,
	.cm-footer .cm-footer-grid--secondary { grid-template-columns: 1fr; gap: 24px; }
	.cm-footer .cm-footer-rule { flex-wrap: wrap; gap: 12px; padding: 18px 0; }
}

/* =============================================================
   Cross-page building blocks (originally home-page) — scoped to
   .cm-page so every page picks up the feature grid, FinOps domain
   splits, outcomes row, testimonial, cert row, CTA band, and the
   homepage-only `cm-hero` (left copy + right dashboard art) and
   `cm-shot-*` (dashboard screenshot) markup. The hero / shot
   selectors only match elements that exist on the home page, so
   they're safe to ship globally.
   ============================================================= */
.cm-page,
.cm-page * { box-sizing: border-box; }

.cm-page {
	font-family: var(--cm-font-sans);
	color: var(--cm-fg1);
	background: var(--cm-bg);
	--wp--style--block-gap: 0;
}

/* Zero margin-block-* on direct children of any flow / constrained layout
   so WP's default block-gap doesn't fight the design's bespoke rhythm. */
.cm-page :is(.is-layout-flow, .is-layout-constrained) > *,
.cm-page :is(.is-layout-flow, .is-layout-constrained) > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.cm-page .cm-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---- Buttons ----
   wp:button renders as: <div class="wp-block-button cm-btn cm-btn-X"><a class="wp-block-button__link wp-element-button">label</a></div>
   So .cm-btn-X classes land on the WRAPPER div and we target the inner link. */
.cm-page a.cm-btn,
.cm-page .wp-block-button.cm-btn-primary > .wp-block-button__link,
.cm-page .wp-block-button.cm-btn-secondary > .wp-block-button__link,
.cm-page .wp-block-button.cm-btn-on-dark > .wp-block-button__link,
.cm-page .wp-block-button.cm-btn-ghost-on-dark > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 6px;
	border: 1px solid transparent;
	font: var(--cm-button);
	cursor: pointer;
	text-decoration: none;
	transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}
.cm-page a.cm-btn-primary,
.cm-page .wp-block-button.cm-btn-primary > .wp-block-button__link { background: var(--cm-brand); color: #fff; }
.cm-page a.cm-btn-primary:hover,
.cm-page .wp-block-button.cm-btn-primary > .wp-block-button__link:hover { background: var(--cm-brand-hover); color: #fff; }
.cm-page a.cm-btn-secondary,
.cm-page .wp-block-button.cm-btn-secondary > .wp-block-button__link { background: #fff; color: var(--cm-brand); border-color: var(--cm-brand); }
.cm-page a.cm-btn-secondary:hover,
.cm-page .wp-block-button.cm-btn-secondary > .wp-block-button__link:hover { background: var(--cm-brand-tint); color: var(--cm-brand); }
.cm-page a.cm-btn-on-dark,
.cm-page .wp-block-button.cm-btn-on-dark > .wp-block-button__link { background: #fff; color: var(--cm-brand); }
.cm-page a.cm-btn-on-dark:hover,
.cm-page .wp-block-button.cm-btn-on-dark > .wp-block-button__link:hover { background: var(--cm-ocean-50); color: var(--cm-brand); }
.cm-page a.cm-btn-ghost-on-dark,
.cm-page .wp-block-button.cm-btn-ghost-on-dark > .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.cm-page a.cm-btn-ghost-on-dark:hover,
.cm-page .wp-block-button.cm-btn-ghost-on-dark > .wp-block-button__link:hover { background: rgba(255,255,255,0.1); color: #fff; }
.cm-page .wp-block-button.cm-btn-primary,
.cm-page .wp-block-button.cm-btn-secondary,
.cm-page .wp-block-button.cm-btn-on-dark,
.cm-page .wp-block-button.cm-btn-ghost-on-dark { background: transparent; padding: 0; }
.cm-page .wp-block-buttons.cm-hero-ctas,
.cm-page .wp-block-buttons.cm-cta-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Sections ---- */
.cm-page .cm-section { padding: 80px 0; }
.cm-page .cm-section-muted {
	background: var(--cm-bg-muted);
	border-top: 1px solid var(--cm-divider);
	border-bottom: 1px solid var(--cm-divider);
}
.cm-page .cm-section-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.cm-page .cm-h2 {
	font: var(--cm-h2);
	letter-spacing: -0.015em;
	color: var(--cm-fg1);
	margin: 0;
}
.cm-page .cm-h3 {
	font: var(--cm-h3);
	letter-spacing: -0.01em;
	color: var(--cm-fg1);
	margin: 0;
}
.cm-page .cm-section-sub {
	font: var(--cm-body-lg);
	color: var(--cm-fg2);
	margin: 0;
}
.cm-page .cm-eyebrow-2 {
	font: 600 12px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cm-brand);
	margin-bottom: 0;
	display: inline-block;
}

/* ---- Hero (classic variant from HomeHero) ---- */
.cm-page .cm-hero {
	padding: 64px 0 80px;
	background: linear-gradient(180deg, var(--cm-ocean-50) 0%, #fff 70%);
}
.cm-page .cm-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 48px;
	align-items: center;
}
.cm-page .cm-hero-copy > * { margin: 0; }
.cm-page .cm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	background: var(--cm-brand-tint);
	color: var(--cm-brand);
	font: 600 12px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 999px;
}
.cm-page .cm-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cm-brand);
}
.cm-page .cm-hero-h1 {
	font: 700 56px/1.05 var(--cm-font-sans);
	letter-spacing: -0.02em;
	color: var(--cm-fg1);
	margin: 18px 0 18px;
}
.cm-page .cm-hero-sub {
	font: var(--cm-body-lg);
	color: var(--cm-fg2);
	margin: 0 0 26px;
	max-width: 540px;
}
.cm-page .cm-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.cm-page .cm-hero-badges {
	display: flex;
	gap: 10px;
	margin-top: 32px;
	flex-wrap: wrap;
}
.cm-page .cm-brand-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid var(--cm-border);
	border-radius: 8px;
}
.cm-page .cm-brand-pill-mark {
	width: 24px;
	height: 24px;
	background: var(--cm-brand);
	border-radius: 4px;
	flex-shrink: 0;
}
.cm-page .cm-brand-pill-label {
	font: 600 12px/1.2 var(--cm-font-sans);
	color: var(--cm-fg1);
}
.cm-page .cm-brand-pill-sub {
	font: 500 10px/1.2 var(--cm-font-sans);
	color: var(--cm-fg3);
}

/* ---- Bold hero variant — dark ink-900 panel, matches the rest of the
   site's hero treatment (pricing/etc. use `cm-hero-bold` on the body /
   main wrapper). Mirrors `.cm-hero.variant-bold` from the design handoff. */
.cm-page.cm-hero-bold .cm-hero {
	background: var(--cm-ink-900);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding: 80px 0 96px;
}
.cm-page.cm-hero-bold .cm-hero-h1 { color: #fff; }
.cm-page.cm-hero-bold .cm-hero-h1 em { font-style: normal; color: var(--cm-pulse); }
.cm-page.cm-hero-bold .cm-hero-sub { color: rgba(255, 255, 255, 0.78); }
.cm-page.cm-hero-bold .cm-eyebrow {
	background: rgba(0, 181, 226, 0.15);
	color: var(--cm-pulse);
}
.cm-page.cm-hero-bold .cm-eyebrow .cm-dot { background: var(--cm-pulse); }
.cm-page.cm-hero-bold .cm-hero a.cm-btn-secondary,
.cm-page.cm-hero-bold .cm-hero .wp-block-button.cm-btn-secondary > .wp-block-button__link {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.45);
}
.cm-page.cm-hero-bold .cm-hero a.cm-btn-secondary:hover,
.cm-page.cm-hero-bold .cm-hero .wp-block-button.cm-btn-secondary > .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.7);
}
.cm-page.cm-hero-bold .cm-brand-pill {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
}
.cm-page.cm-hero-bold .cm-brand-pill-label { color: #fff; }
.cm-page.cm-hero-bold .cm-brand-pill-sub { color: rgba(255, 255, 255, 0.6); }
.cm-page.cm-hero-bold .cm-brand-pill-mark { background: var(--cm-pulse); }

/* ---- Hero "art" — static dashboard mock placeholder ---- */
.cm-page .cm-shot {
	background: #fff;
	border: 1px solid var(--cm-border);
	border-radius: 12px;
	box-shadow: var(--cm-shadow-md);
	overflow: hidden;
}
.cm-page .cm-shot-bar {
	background: var(--cm-ink-50);
	border-bottom: 1px solid var(--cm-divider);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	font: 500 12px/1.2 var(--cm-font-sans);
	color: var(--cm-fg3);
}
.cm-page .cm-shot-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cm-ink-200);
}
.cm-page .cm-shot-dot.r { background: #FF5F57; }
.cm-page .cm-shot-dot.y { background: #FEBC2E; }
.cm-page .cm-shot-dot.g { background: #28C840; }
.cm-page .cm-shot-bar-title { margin-left: 8px; }
.cm-page .cm-shot-body { padding: 16px; }
.cm-page .cm-shot-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 14px;
}
.cm-page .cm-shot-kpi {
	padding: 10px 12px;
	border: 1px solid var(--cm-border);
	border-radius: 6px;
}
.cm-page .cm-shot-kpi-l {
	font: 600 10px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cm-fg3);
	margin: 0;
}
.cm-page .cm-shot-kpi-v {
	font: 700 22px/1.1 var(--cm-font-sans);
	font-variant-numeric: tabular-nums;
	color: var(--cm-fg1);
	margin: 4px 0 2px;
	letter-spacing: -0.01em;
}
.cm-page .cm-shot-kpi-d {
	font: 600 11px/1.4 var(--cm-font-sans);
	margin: 0;
}
.cm-page .cm-shot-kpi-d.good { color: var(--cm-savings); }
.cm-page .cm-shot-kpi-d.bad { color: var(--cm-danger); }
.cm-page .cm-shot-kpi-d.neutral { color: var(--cm-fg3); }
.cm-page .cm-shot-chart {
	background: var(--cm-ink-50);
	border-radius: 6px;
	padding: 14px;
	min-height: 180px;
	display: flex;
	align-items: flex-end;
	gap: 6px;
}
.cm-page .cm-shot-bar-col {
	flex: 1;
	background: linear-gradient(180deg, var(--cm-ocean-300), var(--cm-brand));
	border-radius: 3px 3px 0 0;
	min-height: 0;
}
.cm-page .cm-shot-chart .cm-shot-bar-col:nth-child(1)  { height: 48%; }
.cm-page .cm-shot-chart .cm-shot-bar-col:nth-child(2)  { height: 64%; }
.cm-page .cm-shot-chart .cm-shot-bar-col:nth-child(3)  { height: 54%; }
.cm-page .cm-shot-chart .cm-shot-bar-col:nth-child(4)  { height: 72%; }
.cm-page .cm-shot-chart .cm-shot-bar-col:nth-child(5)  { height: 58%; }
.cm-page .cm-shot-chart .cm-shot-bar-col:nth-child(6)  { height: 80%; }
.cm-page .cm-shot-chart .cm-shot-bar-col:nth-child(7)  { height: 66%; }
.cm-page .cm-shot-chart .cm-shot-bar-col:nth-child(8)  { height: 88%; }
.cm-page .cm-shot-chart .cm-shot-bar-col:nth-child(9)  { height: 72%; }
.cm-page .cm-shot-chart .cm-shot-bar-col:nth-child(10) { height: 60%; }
.cm-page .cm-shot-chart .cm-shot-bar-col:nth-child(11) { height: 50%; }
.cm-page .cm-shot-chart .cm-shot-bar-col:nth-child(12) { height: 44%; }

/* The label/sub pair inside each brand pill is wrapped in an extra wp:group
   so the editor can manage them as a unit; make sure that wrapper renders
   the two paragraphs as a vertical stack. */
.cm-page .cm-brand-pill > .wp-block-group { display: flex; flex-direction: column; }
.cm-page .cm-shot-kpi > * { margin: 0; }
.cm-page .cm-shot-kpi .cm-shot-kpi-v { margin: 4px 0 2px; }

/* Reset default <p> margins on visual / icon paragraphs (these used to be
   <span> / <div>; wp:paragraph emits a real <p> with default block margins). */
.cm-page .cm-feature-ic,
.cm-page .cm-cert-ic,
.cm-page .cm-placeholder-icon,
.cm-page .cm-avatar,
.cm-page .cm-shot-bar-title,
.cm-page .cm-quote-mark,
.cm-page .cm-story-card-logo,
.cm-page .cm-story-card-cta,
.cm-page .cm-logo-wall-cell,
.cm-page .cm-outcomes p,
.cm-page .cm-cert h3,
.cm-page .cm-cert p { margin: 0; }

/* wp:quote renders <blockquote class="wp-block-quote cm-quote-body"> with an
   inner wp:paragraph; collapse the inner <p> margins and inherit typography
   so the quote-body styles read off the inner text, not the wrapper. */
.cm-page .cm-quote-body > p,
.cm-page .cm-quote-body p:first-child {
	margin: 0;
	font: inherit;
	color: inherit;
}

/* Story-card headings emit <h3 class="cm-story-card-h"><a ...>text</a></h3>
   — keep the heading color the same as the original (no underline). */
.cm-page .cm-story-card-h a,
.cm-page .cm-story-card-cta a {
	color: inherit;
	text-decoration: none;
}
.cm-page .cm-story-card-cta a { color: var(--cm-brand); }

/* ---- Trust band ---- */
.cm-page .cm-trust-band {
	background: var(--cm-bg-muted);
	padding: 40px 0;
	border-top: 1px solid var(--cm-divider);
	border-bottom: 1px solid var(--cm-divider);
}
.cm-page .cm-trust-label {
	font: var(--cm-overline);
	text-align: center;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cm-fg3);
	margin: 0 0 20px;
}
.cm-page .cm-logo-wall {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1px;
	background: var(--cm-border);
	border: 1px solid var(--cm-border);
	border-radius: 12px;
	overflow: hidden;
}
.cm-page .cm-logo-wall-cell {
	background: #fff;
	min-height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font: 600 14px/1 var(--cm-font-sans);
	color: var(--cm-fg3);
	letter-spacing: -0.01em;
	text-align: center;
}

/* ---- Feature grid (auto-fit, ~4-up on wide screens) ----
   `auto-fit` + minmax(260px, 1fr) packs as many ~260px cols as fit,
   so a grid with 3, 4, 5, 6+ items lays out cleanly without each
   pattern needing to know how many it has. */
.cm-page .cm-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
}
.cm-page .cm-feature {
	background: #fff;
	border: 1px solid var(--cm-border);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: box-shadow 120ms ease-out, border-color 120ms ease-out;
}
.cm-page .cm-feature:hover {
	box-shadow: var(--cm-shadow-md);
	border-color: var(--cm-ocean-200);
}
.cm-page .cm-feature > * { margin: 0; }
.cm-page .cm-feature-ic {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: var(--cm-brand-tint);
	color: var(--cm-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 15px/1 var(--cm-font-sans);
}
.cm-page .cm-feature-ic .cm-icon {
	width: 22px;
	height: 22px;
}
.cm-page .cm-feature-h {
	font: 600 17px/1.3 var(--cm-font-sans);
	color: var(--cm-fg1);
	margin: 4px 0 0;
}
.cm-page .cm-feature-b {
	font: var(--cm-body-sm);
	color: var(--cm-fg2);
	margin: 0;
	flex: 1;
}
.cm-page .cm-feature-link {
	font: 600 13px/1 var(--cm-font-sans);
	color: var(--cm-brand);
	text-decoration: none;
}
.cm-page .cm-feature-link:hover { color: var(--cm-brand-hover); }

/* ---- FeatureSplit (alternating copy + art) ---- */
.cm-page .cm-split {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 48px;
	align-items: center;
	padding: 56px 0;
	border-bottom: 1px solid var(--cm-divider);
}
.cm-page .cm-split:last-child { border-bottom: 0; }
.cm-page .cm-split.flip { grid-template-columns: 1.1fr 1fr; }
.cm-page .cm-split.flip .cm-split-copy { order: 2; }
.cm-page .cm-split.flip .cm-split-art { order: 1; }
.cm-page .cm-split-copy > * { margin: 0; }
.cm-page .cm-split-overline {
	font: 600 12px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cm-brand);
	margin-bottom: 12px;
	display: inline-block;
}
.cm-page .cm-split-h {
	font: 700 28px/1.2 var(--cm-font-sans);
	letter-spacing: -0.015em;
	color: var(--cm-fg1);
	margin: 0 0 12px;
}
.cm-page .cm-split-b {
	font: var(--cm-body-lg);
	color: var(--cm-fg2);
	margin: 0 0 18px;
}
.cm-page .cm-bullets {
	list-style: none;
	padding: 0;
	margin: 18px 0 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cm-page .cm-bullets li {
	font: var(--cm-body);
	color: var(--cm-fg1);
	display: flex;
	gap: 10px;
	align-items: start;
}
.cm-page .cm-bullets li::before {
	content: "";
	width: 18px;
	height: 18px;
	margin-top: 3px;
	background: var(--cm-savings);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3.5 3.5L13 5' stroke='black' stroke-width='2.25' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3.5 3.5L13 5' stroke='black' stroke-width='2.25' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
	flex-shrink: 0;
}

/* Placeholder shot used for FeatureSplit art */
.cm-page .cm-placeholder-shot {
	background: linear-gradient(135deg, var(--cm-ocean-50), #fff);
	border: 1px dashed var(--cm-border-strong);
	border-radius: 12px;
	padding: 32px;
	min-height: 260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--cm-fg3);
	text-align: center;
}
.cm-page .cm-placeholder-shot > * { margin: 0; }
.cm-page .cm-placeholder-shot .cm-placeholder-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--cm-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cm-brand);
	font: 700 22px/1 var(--cm-font-sans);
	margin-bottom: 8px;
}
.cm-page .cm-placeholder-shot .cm-placeholder-icon .cm-icon {
	width: 26px;
	height: 26px;
}
.cm-page .cm-placeholder-shot-l {
	font: 600 13px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.cm-page .cm-placeholder-shot-d {
	font: var(--cm-body-sm);
	color: var(--cm-fg2);
	max-width: 320px;
}

/* ---- Outcomes row + case-study cards ----
   `auto-fit` + minmax(220px, 1fr) lets 3 / 4 / 5 stat tiles flow
   cleanly without the grid knowing the item count up-front. */
.cm-page .cm-outcomes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	padding: 8px 0 24px;
}
.cm-page .cm-outcome > * { margin: 0; }
.cm-page .cm-outcome {
	background: #fff;
	border: 1px solid var(--cm-line, #e5e7eb);
	border-radius: 12px;
	padding: 28px 28px 32px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.cm-page .cm-outcome-v {
	font: 700 56px/1 var(--cm-font-sans);
	color: var(--cm-brand);
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	margin: 0 0 8px;
}
.cm-page .cm-outcome-l {
	font: 500 14px/1.4 var(--cm-font-sans);
	color: var(--cm-fg2);
}

.cm-page .cm-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}
.cm-page .cm-story-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--cm-border);
	border-radius: 12px;
	padding: 28px;
	transition: box-shadow 120ms ease-out, border-color 120ms ease-out;
}
.cm-page .cm-story-card:hover {
	box-shadow: var(--cm-shadow-md);
	border-color: var(--cm-ocean-200);
}
.cm-page .cm-story-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}
.cm-page .cm-story-card-logo {
	font: 600 18px/1 var(--cm-font-sans);
	color: var(--cm-fg2);
	letter-spacing: -0.01em;
}
.cm-page .cm-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	font: 600 12px/1 var(--cm-font-sans);
	border-radius: 999px;
}
.cm-page .cm-chip-outline {
	background: #fff;
	border: 1px solid var(--cm-border);
	color: var(--cm-fg2);
}
.cm-page .cm-story-card-h {
	font: 600 19px/1.35 var(--cm-font-sans);
	color: var(--cm-fg1);
	margin: 0 0 16px;
}
.cm-page .cm-story-card-cta {
	font: 600 13px/1 var(--cm-font-sans);
	color: var(--cm-brand);
}

/* ---- Testimonial quote ---- */
.cm-page .cm-quote-section { padding: 40px 0 80px; }
.cm-page .cm-quote-card {
	background: #fff;
	border: 1px solid var(--cm-border);
	border-radius: 16px;
	padding: 36px 40px;
	box-shadow: var(--cm-shadow-sm);
	position: relative;
}
.cm-page .cm-quote-mark {
	font: 800 96px/0.7 'Georgia', serif;
	color: var(--cm-ocean-200);
	position: absolute;
	top: 24px;
	left: 30px;
	user-select: none;
}
.cm-page .cm-quote-body {
	font: 500 22px/1.45 var(--cm-font-sans);
	color: var(--cm-fg1);
	margin: 0 0 28px;
	padding-left: 24px;
	letter-spacing: -0.005em;
}
.cm-page .cm-quote-attr {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 14px;
	align-items: center;
	padding-left: 24px;
}
.cm-page .cm-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--cm-brand);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 600 16px/1 var(--cm-font-sans);
}
.cm-page .cm-quote-name {
	font: 600 15px/1.3 var(--cm-font-sans);
	color: var(--cm-fg1);
	margin: 0;
}
.cm-page .cm-quote-role {
	font: var(--cm-body-sm);
	color: var(--cm-fg3);
	margin: 0;
}
.cm-page .cm-quote-metrics { display: flex; gap: 24px; }
.cm-page .cm-quote-metric { text-align: right; }
.cm-page .cm-quote-metric > * { margin: 0; }
.cm-page .cm-quote-metric-v {
	font: 700 22px/1 var(--cm-font-sans);
	color: var(--cm-brand);
	font-variant-numeric: tabular-nums;
}
.cm-page .cm-quote-metric-l {
	font: 500 11px/1.3 var(--cm-font-sans);
	color: var(--cm-fg3);
	margin-top: 2px;
	max-width: 120px;
}

/* ---- Cert / trust row ---- */
.cm-page .cm-cert-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.cm-page .cm-cert {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--cm-border);
	border-radius: 12px;
	display: flex;
	gap: 14px;
	align-items: center;
}
.cm-page .cm-cert > div { margin: 0; }
.cm-page .cm-cert-ic {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: var(--cm-brand-tint);
	color: var(--cm-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font: 700 22px/1 var(--cm-font-sans);
}
.cm-page .cm-cert-ic .cm-icon {
	width: 28px;
	height: 28px;
}
.cm-page .cm-cert-h {
	font: 600 14px/1.3 var(--cm-font-sans);
	color: var(--cm-fg1);
	margin: 0;
}
.cm-page .cm-cert-s {
	font: 400 12px/1.3 var(--cm-font-sans);
	color: var(--cm-fg3);
	margin: 2px 0 0;
}

/* ---- Final CTA band ---- */
.cm-page .cm-cta {
	background: var(--cm-brand);
	padding: 56px 0;
}
.cm-page .cm-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}
.cm-page .cm-cta-copy > * { margin: 0; }
.cm-page .cm-cta h2,
.cm-page .cm-cta-h {
	font: var(--cm-h2);
	color: #fff;
	margin: 0;
	letter-spacing: -0.015em;
}
.cm-page .cm-cta-sub {
	color: rgba(255,255,255,0.85);
	font: var(--cm-body-lg);
	margin: 6px 0 0;
	max-width: 540px;
}
.cm-page .cm-cta-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
	.cm-page .cm-hero-inner { grid-template-columns: 1fr; }
	.cm-page .cm-split,
	.cm-page .cm-split.flip { grid-template-columns: 1fr; }
	.cm-page .cm-split.flip .cm-split-copy { order: 1; }
	.cm-page .cm-split.flip .cm-split-art { order: 2; }
	.cm-page .cm-logo-wall { grid-template-columns: repeat(3, 1fr); }
	.cm-page .cm-cert-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
	.cm-page .cm-hero { padding: 40px 0 56px; }
	.cm-page .cm-hero-h1 { font-size: 38px; }
	.cm-page .cm-section { padding: 56px 0; }
	.cm-page .cm-grid-3 { grid-template-columns: 1fr; }
	.cm-page .cm-cta-inner { flex-direction: column; align-items: flex-start; }
	.cm-page .cm-quote-card { padding: 28px 24px; }
	.cm-page .cm-quote-body { font-size: 18px; padding-left: 12px; }
	.cm-page .cm-logo-wall { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================
   Legal pages — scoped to .cm-legal-page. Shared by /privacy-policy/
   and /terms-and-conditions/ (each page also carries
   .cm-privacy-policy-page or .cm-terms-and-conditions-page for any
   per-page overrides). Mirrors the pricing-page hero + cm-section
   system with a constrained prose column for body copy.
   ============================================================= */

.cm-legal-page,
.cm-legal-page * { box-sizing: border-box; }

.cm-legal-page {
	font-family: var(--cm-font-sans);
	color: var(--cm-fg1);
	background: var(--cm-bg);
	--wp--style--block-gap: 0;
}

.cm-legal-page :is(.is-layout-flow, .is-layout-constrained) > *,
.cm-legal-page :is(.is-layout-flow, .is-layout-constrained) > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.cm-legal-page .cm-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---- Page hero ---- */
.cm-legal-page .cm-pagehero {
	padding: 56px 0 64px;
	background: linear-gradient(180deg, var(--cm-ocean-50) 0%, #fff 80%);
	border-bottom: 1px solid var(--cm-divider);
}
.cm-legal-page .cm-pagehero-inner { display: block; }
.cm-legal-page .cm-pagehero-inner.solo { max-width: 820px; }
.cm-legal-page .cm-pagehero-overline {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	background: var(--cm-brand-tint);
	color: var(--cm-brand);
	font: 600 12px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 999px;
	margin: 0 0 16px;
}
.cm-legal-page .cm-pagehero-h1 {
	font: 700 48px/1.05 var(--cm-font-sans);
	letter-spacing: -0.02em;
	color: var(--cm-fg1);
	margin: 0 0 18px;
}
.cm-legal-page .cm-pagehero-h1 em { font-style: normal; color: var(--cm-brand); }
.cm-legal-page .cm-pagehero-sub {
	font: var(--cm-body-lg);
	color: var(--cm-fg2);
	margin: 0;
	max-width: 640px;
}

/* ---- Bold hero variant (dark ink-900 panel — site default) ---- */
.cm-legal-page.cm-hero-bold .cm-pagehero {
	background: var(--cm-ink-900);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cm-legal-page.cm-hero-bold .cm-pagehero-h1 { color: #fff; }
.cm-legal-page.cm-hero-bold .cm-pagehero-h1 em { color: var(--cm-pulse); }
.cm-legal-page.cm-hero-bold .cm-pagehero-sub { color: rgba(255, 255, 255, 0.78); }
.cm-legal-page.cm-hero-bold .cm-pagehero-overline {
	background: rgba(0, 181, 226, 0.15);
	color: var(--cm-pulse);
}

/* ---- Body section ---- */
.cm-legal-page .cm-section { padding: 72px 0; }
.cm-legal-page .cm-legal-body { background: var(--cm-bg); }

/* ---- Prose column ----
   Constrained reading width with explicit vertical rhythm. Direct-child
   selectors so nested lists/paragraphs don't double-up margins. */
.cm-legal-page .cm-legal-prose {
	max-width: 760px;
	margin: 0 auto;
	color: var(--cm-fg1);
}
.cm-legal-page .cm-legal-prose > h2 {
	font: 700 24px/1.25 var(--cm-font-sans);
	letter-spacing: -0.01em;
	color: var(--cm-fg1);
	margin: 40px 0 12px;
	scroll-margin-top: 80px;
}
.cm-legal-page .cm-legal-prose > h2:first-child { margin-top: 0; }
.cm-legal-page .cm-legal-prose > p {
	font: var(--cm-body);
	color: var(--cm-fg2);
	margin: 0 0 16px;
}
.cm-legal-page .cm-legal-prose > p:last-child { margin-bottom: 0; }
.cm-legal-page .cm-legal-prose > ul,
.cm-legal-page .cm-legal-prose > ol {
	margin: 0 0 16px;
	padding-left: 24px;
	color: var(--cm-fg2);
	font: var(--cm-body);
}
.cm-legal-page .cm-legal-prose li { margin: 0 0 8px; }
.cm-legal-page .cm-legal-prose li:last-child { margin-bottom: 0; }
.cm-legal-page .cm-legal-prose strong { color: var(--cm-fg1); }
.cm-legal-page .cm-legal-prose a {
	color: var(--cm-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cm-legal-page .cm-legal-prose a:hover {
	color: var(--cm-brand-hover);
	text-decoration: none;
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
	.cm-legal-page .cm-pagehero { padding: 40px 0 48px; }
	.cm-legal-page .cm-pagehero-h1 { font-size: 32px; }
	.cm-legal-page .cm-pagehero-sub { font-size: 16px; }
	.cm-legal-page .cm-section { padding: 56px 0; }
	.cm-legal-page .cm-legal-prose > h2 { font-size: 20px; margin-top: 32px; }
}

/* ---- Demo page additions ----
   Walkthrough video frame + "what's in the walkthrough" 3-card grid.
   Scoped under .cm-page per the cross-page convention so the classes
   can be reused on any other page that wants the same shape. */
.cm-page .cm-demo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.cm-page .cm-demo-card {
	background: #fff;
	border: 1px solid var(--cm-divider);
	border-radius: 12px;
	padding: 28px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.cm-page .cm-demo-card-step {
	font: 700 13px/1 var(--cm-font-sans);
	color: var(--cm-brand);
	letter-spacing: 0.06em;
	margin: 0 0 16px;
}
.cm-page .cm-demo-card-h {
	font: 700 20px/1.25 var(--cm-font-sans);
	color: var(--cm-fg1);
	margin: 0 0 10px;
}
.cm-page .cm-demo-card p {
	font: var(--cm-body);
	color: var(--cm-fg2);
	margin: 0;
	line-height: 1.55;
}

.cm-page .cm-demo-video { margin-top: 12px; }
.cm-page .cm-demo-video-frame {
	aspect-ratio: 16 / 9;
	background: var(--cm-ink-900);
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}
.cm-page .cm-demo-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@media (max-width: 1024px) {
	.cm-page .cm-demo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.cm-page .cm-demo-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   Helper classes introduced by the bulk page conversion.
   Applies to every cm-page wrapper.
   ============================================================= */

/* ---- Long-form prose (case study narrative) ---- */
.cm-page .cm-prose {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cm-page .cm-prose > * { margin: 0; }
.cm-page .cm-prose > p { font: var(--cm-body-lg); color: var(--cm-fg2); }
.cm-page .cm-prose > h2 {
	font: var(--cm-h2);
	letter-spacing: -0.015em;
	color: var(--cm-fg1);
	margin-top: 24px;
}
.cm-page .cm-prose > h3 {
	font: 600 22px/1.3 var(--cm-font-sans);
	color: var(--cm-fg1);
	margin-top: 16px;
}
.cm-page .cm-prose > ul,
.cm-page .cm-prose > ol {
	font: var(--cm-body-lg);
	color: var(--cm-fg2);
	padding-left: 1.25em;
}
.cm-page .cm-prose > ul li,
.cm-page .cm-prose > ol li { margin: 6px 0; }

/* ---- Story-page meta strip (Industry / Region / Plan / etc.) ---- */
.cm-page .cm-story-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	max-width: 760px;
	margin: 0 auto 48px;
	padding: 20px 24px;
	background: #fff;
	border: 1px solid var(--cm-border);
	border-radius: 12px;
}
.cm-page .cm-story-meta-item { display: flex; flex-direction: column; gap: 4px; }
.cm-page .cm-story-meta-item > * { margin: 0; }
.cm-page .cm-story-meta-l {
	font: 600 11px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cm-fg3, var(--cm-fg2));
}
.cm-page .cm-story-meta-v { font: 600 14px/1.3 var(--cm-font-sans); color: var(--cm-fg1); }

/* ---- Dark section band (cm-section-dark) ----
   Inverts a regular section onto the ink-900 panel — used by
   solution-* outcome bands. */
.cm-page .cm-section.cm-section-dark {
	background: var(--cm-ink-900);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cm-page .cm-section.cm-section-dark .cm-eyebrow-2 { color: var(--cm-pulse); }
.cm-page .cm-section.cm-section-dark .cm-h2 { color: #fff; }
.cm-page .cm-section.cm-section-dark .cm-section-sub { color: rgba(255, 255, 255, 0.78); }
.cm-page .cm-section.cm-section-dark .cm-outcome {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: none;
}
.cm-page .cm-section.cm-section-dark .cm-outcome-v { color: #fff; }
.cm-page .cm-section.cm-section-dark .cm-outcome-l { color: rgba(255, 255, 255, 0.72); }

/* ---- Body copy paragraph helper (cm-section-body) ---- */
.cm-page .cm-section-body {
	font: var(--cm-body-lg);
	color: var(--cm-fg2);
	max-width: 720px;
	margin: 0 auto 24px;
}

/* ---- Fine-print under comparison tables ---- */
.cm-page .cm-fineprint {
	font: var(--cm-body-sm);
	color: var(--cm-fg2);
	max-width: 720px;
	margin: 16px auto 0;
}

/* ---- Roadmap timeline ---- */
.cm-page .cm-roadmap-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 32px;
	justify-content: center;
}
.cm-page .cm-roadmap-quarter {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 32px;
	align-items: start;
	padding: 24px 0;
	border-top: 1px solid var(--cm-divider);
}
.cm-page .cm-roadmap-quarter:first-of-type { border-top: 0; }
.cm-page .cm-roadmap-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cm-page .cm-roadmap-head > * { margin: 0; }
.cm-page .cm-roadmap-head h2 {
	font: 700 22px/1.2 var(--cm-font-sans);
	color: var(--cm-fg1);
}
.cm-page .cm-roadmap-quarter .cm-bullets {
	margin: 0;
	padding-left: 1.25em;
	font: var(--cm-body);
	color: var(--cm-fg2);
}
.cm-page .cm-roadmap-quarter .cm-bullets li { margin: 6px 0; }

/* ---- Form split (contact + form 2-up layout) ---- */
.cm-page .cm-form-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}
.cm-page .cm-form-split-copy,
.cm-page .cm-form-split-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cm-page .cm-form-label {
	font: 600 13px/1 var(--cm-font-sans);
	color: var(--cm-fg1);
	margin: 0 0 6px;
}

/* ---- Numbered step list ---- */
.cm-page .cm-numbered {
	display: flex;
	flex-direction: column;
	gap: 16px;
	counter-reset: cm-num;
	list-style: none;
	padding: 0;
	margin: 0;
}
.cm-page .cm-numbered li {
	counter-increment: cm-num;
	position: relative;
	padding-left: 44px;
	font: var(--cm-body-lg);
	color: var(--cm-fg2);
}
.cm-page .cm-numbered li::before {
	content: counter(cm-num);
	position: absolute;
	left: 0;
	top: -2px;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--cm-brand-tint);
	color: var(--cm-brand);
	font: 700 14px/30px var(--cm-font-sans);
	text-align: center;
}

/* ---- Callout box ---- */
.cm-page .cm-callout {
	background: var(--cm-ocean-50, var(--cm-bg-muted));
	border: 1px solid var(--cm-ocean-200, var(--cm-border));
	border-radius: 12px;
	padding: 24px 28px;
	font: var(--cm-body);
	color: var(--cm-fg2);
}
.cm-page .cm-callout > * { margin: 0 0 8px; }
.cm-page .cm-callout > *:last-child { margin-bottom: 0; }

/* ---- Contact rows / list ---- */
.cm-page .cm-contact-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cm-page .cm-contact-row {
	display: flex;
	gap: 12px;
	align-items: start;
}
.cm-page .cm-contact-row > * { margin: 0; }
.cm-page .cm-contact-h {
	font: 600 14px/1.3 var(--cm-font-sans);
	color: var(--cm-fg1);
}

/* ---- wp:table comparison: category rows use colspan ----
   The block editor strips <tr class>, so existing
   .cm-compare-cat styles can't latch. Style colspan'd cells
   directly. */
.cm-page .cm-compare td[colspan] {
	background: var(--cm-bg-muted);
	color: var(--cm-fg1);
	font: 600 12px/1.6 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 12px 16px;
}

/* ---- Responsive collapse for new layouts ---- */
@media (max-width: 1024px) {
	.cm-page .cm-form-split { grid-template-columns: 1fr; gap: 32px; }
	.cm-page .cm-roadmap-quarter { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 720px) {
	.cm-page .cm-story-meta { grid-template-columns: 1fr 1fr; }
}

/* =============================================================
   Additional cross-page building blocks discovered during the
   bulk-page conversion audit. All scoped under .cm-page so they
   apply on every page that uses the markup.
   ============================================================= */

/* ---- Splits wrapper (vertical stack of cm-split sections) ---- */
.cm-page .cm-splits {
	display: flex;
	flex-direction: column;
}

/* ---- 2-column page hero variant (cm-pagehero with copy + art) ----
   Used by pages that pair a left-aligned copy column with a
   placeholder shot on the right. The `solo`
   variant on `cm-pagehero-inner` already handles single-column. */
.cm-page .cm-pagehero-inner:not(.solo) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.cm-page .cm-pagehero-copy > * { margin: 0 0 16px; }
.cm-page .cm-pagehero-copy > *:last-child { margin-bottom: 0; }
.cm-page .cm-pagehero-art {
	display: flex;
	justify-content: center;
}

/* ---- Chip variants (info / savings / anomaly) ----
   `cm-chip-brand` and `cm-chip-outline` already live under .cm-page.
   These three were waitlist-only — promote them. */
.cm-page .cm-chip-info {
	background: var(--cm-ocean-50, var(--cm-brand-tint));
	color: var(--cm-fg2);
}
.cm-page .cm-chip-savings {
	background: var(--cm-savings-soft, var(--cm-brand-tint));
	color: var(--cm-savings, var(--cm-brand));
}
.cm-page .cm-chip-anomaly {
	background: var(--cm-anomaly-soft, #fef3c7);
	color: var(--cm-anomaly, #92400e);
}

/* ---- Generic forms (cm-form / cm-field) ----
   Used by support-helpdesk and feature-requests. The
   waitlist page has its own scoped `cm-wl-form` rules. */
.cm-page .cm-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--cm-border);
	border-radius: 12px;
	padding: 28px;
}
.cm-page .cm-form .cm-form-label {
	font: 600 14px/1.3 var(--cm-font-sans);
	color: var(--cm-fg1);
	margin: 0 0 8px;
}
.cm-page .cm-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cm-page .cm-field label {
	font: 600 12px/1 var(--cm-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cm-fg2);
}
.cm-page .cm-field input[type="text"],
.cm-page .cm-field input[type="email"],
.cm-page .cm-field input[type="tel"],
.cm-page .cm-field input[type="url"],
.cm-page .cm-field input[type="number"],
.cm-page .cm-field select,
.cm-page .cm-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--cm-border);
	border-radius: 6px;
	background: #fff;
	font: var(--cm-body);
	color: var(--cm-fg1);
	transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.cm-page .cm-field textarea {
	min-height: 120px;
	resize: vertical;
}
.cm-page .cm-field input:focus,
.cm-page .cm-field select:focus,
.cm-page .cm-field textarea:focus {
	outline: none;
	border-color: var(--cm-brand);
	box-shadow: 0 0 0 3px var(--cm-brand-tint);
}
.cm-page .cm-form button,
.cm-page .cm-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 6px;
	border: 1px solid transparent;
	background: var(--cm-brand);
	color: #fff;
	font: var(--cm-button);
	cursor: pointer;
	align-self: flex-start;
	transition: background 120ms ease-out;
}
.cm-page .cm-form button:hover,
.cm-page .cm-form input[type="submit"]:hover { background: var(--cm-brand-hover); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.cm-page .cm-pagehero-inner:not(.solo) { grid-template-columns: 1fr; gap: 32px; }
}