/* Layout rules for .cd-* marketing pages (kept separate from site.css colors/typography). */

/* Equal-height cards: every card in a row stretches to the tallest one. */
.cd-page .wp-block-columns.cd-cards { align-items: stretch !important; }
.cd-page .wp-block-columns.cd-cards > .wp-block-column { display: flex; flex-direction: column; gap: 24px; }
.cd-page .wp-block-columns.cd-cards > .wp-block-column > .cd-card { flex: 1 1 auto; display: flex; flex-direction: column; margin: 0; }
.cd-page .cd-card > .cd-more { margin-top: auto; padding-top: 8px; }
.cd-page .cd-card > p:has(.cd-tag) { margin-bottom: 4px; }

/* Consistent spacing between stacked card rows. */
.cd-page .wp-block-columns.cd-cards { margin-bottom: 24px; }
.cd-page .wp-block-columns.cd-cards:last-child { margin-bottom: 0; }

/* Screenshots stacked in one column keep even spacing and fill the column width. */
.cd-page .wp-block-column > .cd-shot + .cd-shot { margin-top: 24px; }
.cd-page .cd-shot img { width: 100%; height: auto; }

/* Step blocks (1-2-3-4) align their headings even when copy wraps differently. */
.cd-page .wp-block-columns.cd-cards > .wp-block-column > .cd-step-num + h3 { min-height: 0; }

/* Center section content consistently, regardless of theme container width. */
.cd-page .cd-section > .wp-block-columns,
.cd-page .cd-section > .wp-block-group,
.cd-page .cd-section > .wp-block-heading,
.cd-page .cd-section > p { width: 100%; max-width: var(--cd-max, 1180px); }

/* ===== Layout QA pass 2 ===== */

/* Padding-only empty columns (used to fill the last card row) take no space when stacked. */
.cd-page .wp-block-columns.cd-cards > .wp-block-column:empty { display: none; }
@media (min-width: 782px) { .cd-page .wp-block-columns.cd-cards > .wp-block-column:empty { display: flex; } }

/* Rows that mix tagged and untagged cards: reserve the tag line so headings share a baseline. */
.cd-page .wp-block-columns.cd-cards:has(.cd-tag) .cd-card:not(:has(.cd-tag))::before { content: ""; display: block; height: 58px; flex: none; }

/* Gutters: use the same 24px between side-by-side columns everywhere. */
.cd-page .cd-section .wp-block-columns { gap: 24px 36px; }
.cd-page .cd-section .wp-block-columns.cd-cards { gap: 24px; }

/* Side-by-side text/screenshot sections: align to the top and cap very tall screenshots so one column does not tower over the other. */
@media (min-width: 782px) {
	.cd-page .wp-block-columns:not(.cd-cards) > .wp-block-column > .cd-shot img { max-height: 520px; width: 100%; object-fit: cover; object-position: top center; }
	.cd-page .wp-block-columns:not(.cd-cards) > .wp-block-column:has(.cd-shot + .cd-shot) > .cd-shot img { max-height: 270px; }
	.cd-page .wp-block-columns:not(.cd-cards) > .wp-block-column > .cd-shot-placeholder { min-height: 280px; }
}
.cd-page .cd-shot { margin-bottom: 0; }
.cd-page .cd-shot figcaption { margin-top: 10px; margin-bottom: 0; }
/* Full-width figure right after a table or paragraph gets breathing room. */
.cd-page .cd-table-wrap + .cd-shot,
.cd-page p + .cd-shot,
.cd-page .cd-footnote + .cd-shot { margin-top: 32px; }
.cd-page .cd-section > .cd-shot,
.cd-page .cd-section > .cd-shot-placeholder { max-width: var(--cd-max, 1180px); width: 100%; }
.cd-page .cd-section > * + .cd-shot-placeholder { margin-top: 32px; }

/* Step rows (1-2-3-4): no card chrome, so give them space before whatever follows. */
.cd-page .wp-block-columns:not(.cd-cards):has(> .wp-block-column > .cd-step-num) { margin-bottom: 40px; }
.cd-page .cd-step-num + h3 { margin-top: 0; }
.cd-page .wp-block-columns:has(> .wp-block-column > .cd-step-num) + .wp-block-columns { margin-top: 8px; }

/* Stat tiles: equal columns, vertically centered, no word-orphans. */
.cd-page .cd-band .wp-block-columns { align-items: flex-start; }
.cd-page .cd-stat { padding: 0 8px; }
.cd-page .cd-stat span { display: block; text-wrap: balance; }
@media (min-width: 782px) and (max-width: 1100px) { .cd-page .cd-band .wp-block-columns { flex-wrap: nowrap !important; } }

/* Headings and short copy: avoid orphaned last words. */
.cd-page h1, .cd-page h2, .cd-page h3 { text-wrap: balance; }
.cd-page .cd-section > p, .cd-page .cd-card p { text-wrap: pretty; }
.cd-page .cd-section > h2, .cd-page .cd-section > h1 { max-width: min(var(--cd-max, 1180px), 100%); }
.cd-page .cd-hero-light h1 { max-width: 20ch; }
.cd-page .cd-hero-light p { max-width: 62ch; }
.cd-page .cd-center h2, .cd-page .cd-center p { margin-left: auto; margin-right: auto; }
.cd-page .cd-center p { max-width: 62ch; }

/* Light heroes: smaller gap before the next section (the hero's own bottom padding plus the section's top padding was doubling up). */
.cd-page .cd-hero-light { padding-bottom: 48px; }
.cd-page .cd-hero-light + .cd-section { padding-top: 56px; }

/* Buttons: keep the pair on one line, equal height; stack to equal widths on small screens. */
.cd-page .wp-block-buttons { gap: 12px; align-items: stretch; }
.cd-page .wp-block-button__link { white-space: nowrap; text-align: center; }
@media (max-width: 600px) {
	.cd-page .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.cd-page .wp-block-buttons > .wp-block-button { width: 100%; }
	.cd-page .wp-block-buttons .wp-block-button__link { width: 100%; white-space: normal; }
}

/* Tables: scroll inside the wrapper rather than crushing columns on phones. */
.cd-page .cd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: var(--cd-max, 1180px); margin-left: auto; margin-right: auto; }
.cd-page .cd-table th:first-child { white-space: nowrap; }
@media (max-width: 781px) {
	.cd-page .cd-table { min-width: 560px; }
	.cd-page .cd-table th:first-child { white-space: normal; min-width: 130px; }
}

/* Flow diagram: stack vertically on phones with downward arrows instead of orphaned arrows. */
.cd-page .cd-flow { max-width: var(--cd-max, 1180px); margin-left: auto; margin-right: auto; }
.cd-page .cd-flow .cd-node { text-align: center; }
@media (max-width: 600px) {
	.cd-page .cd-flow { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; }
	.cd-page .cd-flow .cd-arrow { transform: rotate(90deg); align-self: center; line-height: 1; }
}

/* Cards: every card body is at least a readable height; links sit on one baseline. */
.cd-page .cd-card { box-sizing: border-box; }
.cd-page .cd-card > p:not(.cd-more):last-of-type { margin-bottom: 12px; }

/* Never allow sideways page scroll; images never exceed their column. */
.cd-page { overflow-x: clip; }
.cd-page img { max-width: 100%; height: auto; }

/* Zapier Elements embed */
.cd-page .cd-zapier { background: #fff; border: 1px solid var(--cd-line); border-radius: var(--radius-12, 12px); padding: 24px; }
.cd-page .cd-zapier zapier-workflow { display: block; width: 100%; }

/* Portrait product shot (chat widget) in a dark hero */
.cd-page .cd-hero .cd-shot img[src*="chat-widget"] { max-width: 392px !important; max-height: none !important; object-fit: contain !important; margin-left: auto; display: block; border: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 50px rgba(135, 96, 219, .35); border-radius: 16px; }
@media (max-width: 781px) { .cd-page .cd-hero .cd-shot img[src*="chat-widget"] { margin: 24px auto 0; max-width: 320px; } }