/* Block styles for /products/compare/ pages. Shared template for every
	   "m-Power vs X" comparison. Link this INSTEAD of a page-hero-h1-*.css file. */

	.page-hero h1 { font-weight: 700; letter-spacing: -0.02em; }
	/* Hero arrow that blends into a following .bg-soft section (the hub page).
	   Use on the hero INSTEAD of .arrow-light when the next section is gray. */
	.arrow-into-soft { --arrow-fill: var(--bg-soft) !important; }
	.adv-copy h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: .7rem; }
	.adv-copy p { color: var(--body); line-height: 1.65; }

	/* At-a-glance table: first column is row labels, not values. Gray band
	   (matching the thead) + weight separates labels from the competitor column. */
	.m-table th, .m-table td { vertical-align: top; }
	.m-table tbody th { background: #fbfcfd; font-weight: 600; color: var(--ink); width: 24%; min-width: 150px; }
	.m-table tbody tr:last-child th { border-bottom: none; }
	.m-table td { width: 38%; }
	/* On phones, scroll the table inside .table-responsive instead of
	   crushing every cell to one word per line */
	.table-responsive .m-table { min-width: 640px; }

	/* Prose sections (the "why" narrative): a centered column under the centered
	   section heading, readable line length. h3s match the category section. */
	.cmp-prose { max-width: 760px; margin: 0 auto; }
	.cmp-prose h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 2.1rem 0 .6rem; }

	/* Category sections: same centered column, a rule between blocks,
	   and a tinted callout for the "When this matters" line. */
	.cmp-cats { max-width: 760px; margin: 0 auto; }
	.cmp-cats .adv-copy + .adv-copy { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }
	.cmp-when { margin: 1.15rem 0 0; padding: .85rem 1.15rem; background: var(--accent-tint); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; font-size: .95rem; }

	/* Scenario cards: two half-width cards, full-width text. The m-Power card
	   carries the accent tint, echoing the m-Power column in the table. */
	.cmp-scenario { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.7rem 1.9rem; height: 100%; }
	.cmp-scenario h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin-bottom: .7rem; }
	.cmp-scenario p { color: var(--body); line-height: 1.65; }
	.cmp-scenario p:last-child { margin-bottom: 0; }
	.cmp-scenario.mp { background: var(--accent-tint); border-color: transparent; }

	/* Hub page (/products/compare/): left-aligned cards linking to each vs page */
	.cmp-hub .panel-soft { display: flex; flex-direction: column; text-align: left; }
	.cmp-hub h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin-bottom: .5rem; }
	.cmp-hub p { color: var(--body); line-height: 1.6; margin-bottom: 1rem; }
	.cmp-hub .cmp-hub-link { margin-top: auto; font-weight: 600; color: var(--accent); }

	/* Support + services escalation: numbered steps (pairs with .step in mrc-2026.css,
	   which only styles h4; comparison pages keep the h2 > h3 heading order) */
	.cmp-help .step h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
	.cmp-help .step p { color: var(--body); line-height: 1.6; margin: 0; }