/* ══════════════════════════════════════════════════════════════════════════
   API Page Main — design-system CSS ported from api-page-preview.html.

   SCOPING: every selector is prefixed with `.api-page ` (the block root class,
   set in render.php) so nothing bleeds into the rest of the site. The preview's
   `:root` design tokens live on `.api-page` here, so the many inline
   `var(--coffee-05)` etc. references in the section markup resolve.

   The section markup keeps the preview's inline `style="…"` verbatim (in
   render.php, added per stage); this file only carries the reusable component
   classes those sections hook into. Tailwind utility classes used inline
   (flex, gap-2, text-sm, no-underline…) are compiled by the theme's global
   Tailwind build, not here.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Block root + scoped design tokens (from preview :root) ── */
.api-page {
	font-family: 'Host Grotesk', sans-serif;
	-webkit-font-smoothing: antialiased;
	background: var(--chalk-01);
	color: var(--coffee-05);

	/* Neutral — Coffee */
	--coffee-05: #261C0A;
	--coffee-03: #99876B;
	--coffee-01: #C7BBA6;

	/* Neutral — White */
	--neutral-white: #FFFFFF;

	/* Neutral — Chalk */
	--chalk-01: #FBFBF6;
	--chalk-03: #F8FBED;
	--chalk-05: #F2F2E9;
	--chalk-07: #D9D9CC;
	--chalk-09: #B8B8A9;

	/* Primary — Yellow */
	--yellow-01: #FFFFE4;
	--yellow-03: #FFFCBB;
	--yellow-05: #FFF878;
	--yellow-07: #FFD944;
	--yellow-09: #FFC107;

	/* Primary — Blue */
	--blue-01: #DFEEFF;
	--blue-03: #BFDEFF;
	--blue-05: #99CBFF;
	--blue-07: #4DA4FF;
	--blue-09: #18317A;

	/* Support — Green */
	--green-01: #D7EDB8;
	--green-03: #B4DFB5;
	--green-05: #90D092;
	--green-07: #659266;
	--green-09: #3A533A;

	/* Support — Orange */
	--orange-01: #FFD9CC;
	--orange-03: #FFB89E;
	--orange-05: #FF9670;
	--orange-07: #B3694E;
	--orange-09: #663C2D;

	/* Support — Purple */
	--purple-01: #E9E0FA;
	--purple-03: #D6C5F5;
	--purple-05: #C2A9F1;
	--purple-07: #8876A9;
	--purple-09: #4E4460;

	/* Error — Red */
	--error-50:  #FEF2F2;
	--error-100: #FEE2E2;
	--error-200: #FECACA;
	--error-300: #FCA5A5;
	--error-400: #F87171;
	--error-500: #EF4444;
	--error-600: #DC2626;
	--error-700: #B91C1C;
	--error-800: #991B1B;
	--error-900: #7F1D1D;
	--error-950: #450A0A;

	/* Typography — font weights */
	--weight-light:    300;
	--weight-regular:  400;
	--weight-medium:   500;
	--weight-semibold: 600;
	--weight-stix-regular: 400;

	/* Typography — type scale */
	--text-display: 96px;
	--text-h1:      64px;
	--text-h2:      48px;
	--text-h3:      40px;
	--text-h4:      32px;
	--text-body-lg: 24px;
	--text-body-md: 20px;
	--text-body:    16px;
	--text-sm:      14px;
	--text-caption: 12px;

	/* Typography — line-height per role */
	--leading-display: 1;
	--leading-h1:      1.05;
	--leading-h2:      1.1;
	--leading-h3:      1.1;
	--leading-h4:      1.15;
	--leading-body-lg: 1.35;
	--leading-body-md: 1.4;
	--leading-body:    1.5;
	--leading-sm:      1.4;
	--leading-caption: 1.4;

	/* Typography — letter-spacing per role */
	--tracking-display: -2px;
	--tracking-h1:      -1px;
	--tracking-h2:      -0.5px;
	--tracking-h3:      -0.5px;
	--tracking-h4:      -0.3px;
}

.api-page *,
.api-page *::before,
.api-page *::after { box-sizing: border-box; }

/* ── Global utilities: 12-column grid ── */
.api-page .cb-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
}
.api-page .col-1  { grid-column: span 1; }
.api-page .col-2  { grid-column: span 2; }
.api-page .col-3  { grid-column: span 3; }
.api-page .col-4  { grid-column: span 4; }
.api-page .col-5  { grid-column: span 5; }
.api-page .col-6  { grid-column: span 6; }
.api-page .col-7  { grid-column: span 7; }
.api-page .col-8  { grid-column: span 8; }
.api-page .col-9  { grid-column: span 9; }
.api-page .col-10 { grid-column: span 10; }
.api-page .col-11 { grid-column: span 11; }
.api-page .col-12 { grid-column: span 12; }

/* Avatar placeholder */
.api-page .avatar-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--blue-05);
	color: var(--blue-09);
	font-weight: 500;
}

/* Arrow shared transition */
.api-page .btn-arrow { transition: transform 180ms; }
.api-page a:hover .btn-arrow,
.api-page button:hover .btn-arrow { transform: translateX(2px) translateY(-2px); }

/* ── Buttons (atom) ── */
.api-page .coffee-regular-btn,
.api-page .yellow-regular-btn,
.api-page .yellow-regular-btn-dark,
.api-page .coffee-regular-btn-lemon,
.api-page .coffee-ghost-btn,
.api-page .white-ghost-btn,
.api-page .green-regular-btn,
.api-page .blue-green-btn,
.api-page .yellow-ghost-btn,
.api-page .green-ghost-btn,
.api-page .blue-ghost-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 16px; border-radius: 4px;
	font-family: 'Host Grotesk', sans-serif; font-size: var(--text-sm); font-weight: 400;
	text-decoration: none; cursor: pointer; border: 1px solid transparent;
	transition: background 200ms, color 200ms, border-color 200ms;
}
.api-page .coffee-regular-btn { background: var(--coffee-05); color: var(--chalk-05); }
.api-page .coffee-regular-btn:hover { background: var(--yellow-05); color: var(--coffee-05); }
.api-page .yellow-regular-btn { background: var(--yellow-05); color: var(--coffee-05); }
.api-page .yellow-regular-btn:hover { background: var(--coffee-05); color: var(--chalk-01); }
.api-page .yellow-regular-btn-dark { background: var(--yellow-05); color: var(--coffee-05); border-color: var(--yellow-05); }
.api-page .yellow-regular-btn-dark:hover { background: transparent; color: var(--yellow-05); border-color: var(--yellow-05); }
.api-page .coffee-regular-btn-lemon { background: var(--coffee-05); color: var(--chalk-05); border-color: var(--coffee-05); }
.api-page .coffee-regular-btn-lemon:hover { background: transparent; color: var(--coffee-05); border-color: var(--coffee-05); }
.api-page .green-regular-btn { background: var(--green-05); color: var(--green-09); }
.api-page .green-regular-btn:hover { background: var(--coffee-05); color: var(--chalk-01); }
.api-page .blue-green-btn { background: var(--blue-05); color: var(--green-09); }
.api-page .blue-green-btn:hover { background: var(--coffee-05); color: var(--chalk-01); }
.api-page .coffee-ghost-btn { background: transparent; color: var(--coffee-05); border-color: var(--coffee-05); }
.api-page .coffee-ghost-btn:hover { background: var(--coffee-05); color: var(--chalk-05); }
.api-page .white-ghost-btn { background: transparent; color: var(--chalk-01); border-color: color-mix(in srgb, var(--chalk-01) 40%, transparent); }
.api-page .white-ghost-btn:hover { background: var(--chalk-01); color: var(--coffee-05); border-color: var(--chalk-01); }
.api-page .yellow-ghost-btn { background: transparent; color: var(--coffee-05); border-color: var(--yellow-05); }
.api-page .yellow-ghost-btn:hover { background: var(--yellow-05); color: var(--coffee-05); }
.api-page .green-ghost-btn { background: transparent; color: var(--green-09); border-color: var(--green-05); }
.api-page .green-ghost-btn:hover { background: var(--green-05); color: var(--green-09); }
.api-page .blue-ghost-btn { background: transparent; color: var(--blue-09); border-color: var(--blue-05); }
.api-page .blue-ghost-btn:hover { background: var(--blue-05); color: var(--blue-09); }
.api-page .hs-btn-lg { padding: 12px 24px !important; border-radius: 4px !important; }

/* Link buttons */
.api-page .link-btn {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: 'Host Grotesk', sans-serif; font-size: var(--text-sm); font-weight: 400;
	text-decoration: underline; text-underline-offset: 4px;
	background: none; border: none; padding: 0; cursor: pointer; transition: color 200ms;
}
.api-page .link-btn-dark   { color: var(--coffee-05); } .api-page .link-btn-dark:hover   { color: var(--blue-07); }
.api-page .link-btn-light  { color: var(--chalk-01); }  .api-page .link-btn-light:hover  { color: var(--yellow-05); }
.api-page .link-btn-blue   { color: var(--blue-05); }   .api-page .link-btn-blue:hover   { color: var(--yellow-05); }
.api-page .link-btn-yellow { color: var(--coffee-05); } .api-page .link-btn-yellow:hover { color: var(--coffee-03); }

/* ── Inline stats (molecule) ── */
.api-page .inline-stats { display: flex; gap: 0; width: auto; }
.api-page .inline-stat { padding: 8px 36px 8px 0; display: flex; flex-direction: column; gap: 6px; }
.api-page .inline-stat__num { font-size: var(--text-h3); font-weight: 300; letter-spacing: -0.04em; line-height: 1; margin: 0; }
.api-page .inline-stat__label { font-size: var(--text-caption); font-weight: 400; opacity: 0.6; line-height: var(--leading-caption); margin: 0; }
.api-page .inline-stats .inline-stat__num,
.api-page .inline-stats .inline-stat__label { color: var(--coffee-05); }
.api-page .inline-stats--on-dark .inline-stat__num,
.api-page .inline-stats--on-dark .inline-stat__label { color: var(--chalk-05); }
@media (max-width: 768px) {
	.api-page .inline-stats { flex-direction: column; gap: 0; }
	.api-page .inline-stat { padding: 8px 0; }
	.api-page .inline-stat__num { font-size: var(--text-body-lg); }
}

/* ── Section header (molecule) ── */
.api-page .section-headline { padding: 64px 0; }
.api-page .headline-col { display: flex; flex-direction: column; gap: 24px; }
.api-page .right-col { display: flex; align-items: center; }
.api-page .eyebrow-col { padding-top: 6px; }
.cludbeds-slash {
	position: relative;
}
.cludbeds-slash::before {
    content: '/';
    position: absolute;
    left: -10px;
    top: 0;
}

/* ── Stat tiles (molecule) ── */
.api-page .stat-tile { flex: 1; background: var(--yellow-05); padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.api-page .stat-tile-num { font-size: var(--text-h2); font-weight: 300; letter-spacing: var(--tracking-h2); line-height: var(--leading-h2); color: var(--coffee-05); margin: 0; }
.api-page .stat-tile-label { font-size: var(--text-caption); font-weight: 400; color: var(--coffee-05); opacity: 0.6; letter-spacing: 0; line-height: var(--leading-caption); margin: 0; }
.api-page .stat-tile-num, .api-page .stat-tile-label { transition: opacity 0.15s ease-in; }
@media (max-width: 767px) {
	.api-page .stat-tile-row { flex-direction: column; }
	.api-page .stat-tile { padding: 16px; }
	.api-page .stat-tile-num { font-size: var(--text-body-lg); }
}

/* ── Testimonial (molecule) ── */
.api-page .testimonial-quote { font-family: 'STIX Two Text', serif; font-style: italic; font-size: var(--text-body); line-height: 1.6; margin: 0 0 14px; max-width: 420px; }
.api-page .testimonial-attr { font-size: var(--text-caption); font-weight: 400; opacity: 0.6; margin: 0; }

/* ── Generic accordion hooks ── */
.api-page .accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.api-page .accordion-panel > div { overflow: hidden; }
.api-page .accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
.api-page .accordion-arrow { transition: transform 0.3s ease; flex-shrink: 0; }
.api-page .accordion-item.is-open .accordion-arrow { transform: rotate(90deg); }
.api-page .accordion-trigger:hover .accordion-title { color: var(--coffee-03); }
.api-page .accordion-link:hover { color: var(--blue-07); }

/* ══ Alternating Content (§5 Vacatia) ══ */
.api-page .ac-live {
	--ac-surface:    var(--chalk-05);
	--ac-eyebrow:    var(--coffee-03);
	--ac-headline:   var(--coffee-05);
	--ac-body-color: var(--coffee-03);
	--ac-border:     var(--chalk-07);
	--ac-arrow:      var(--blue-07);
	--ac-feature:    var(--coffee-05);
	--ac-testimonial:var(--coffee-05);
	--ac-ph-bg:      var(--chalk-07);
	--ac-ph-color:   var(--coffee-03);
}
.api-page .ac-live[data-theme="coffee"] {
	--ac-surface:    var(--coffee-05);
	--ac-eyebrow:    var(--yellow-05);
	--ac-headline:   var(--chalk-01);
	--ac-body-color: var(--coffee-03);
	--ac-border:     color-mix(in srgb, var(--neutral-white) 12%, transparent);
	--ac-arrow:      var(--yellow-05);
	--ac-feature:    var(--chalk-01);
	--ac-testimonial:var(--chalk-01);
	--ac-ph-bg:      color-mix(in srgb, var(--neutral-white) 8%, transparent);
	--ac-ph-color:   var(--coffee-01);
}
.api-page .ac-live[data-theme="blue"] {
	--ac-surface:    var(--blue-09);
	--ac-eyebrow:    var(--blue-05);
	--ac-headline:   var(--neutral-white);
	--ac-body-color: color-mix(in srgb, var(--blue-05) 75%, transparent);
	--ac-border:     color-mix(in srgb, var(--blue-05) 20%, transparent);
	--ac-arrow:      var(--blue-05);
	--ac-feature:    var(--neutral-white);
	--ac-testimonial:var(--neutral-white);
	--ac-ph-bg:      color-mix(in srgb, var(--blue-05) 12%, transparent);
	--ac-ph-color:   var(--blue-05);
}
.api-page .ac-live { background: var(--ac-surface); }
.api-page .ac-inner { padding: 64px 32px; }
.api-page .ac-live [hidden] { display: none !important; }
.api-page .ac-live .cb-grid { align-items: center; }
.api-page .ac-content {
	grid-row: 1;
	grid-column: 1 / 6;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.api-page .ac-media {
	grid-row: 1;
	grid-column: 7 / 13;
	display: flex;
	justify-content: center;
}
.api-page .ac-live[data-layout="content-right"] .ac-content { grid-column: 8 / 13; }
.api-page .ac-live[data-layout="content-right"] .ac-media   { grid-column: 1 / 7; }
.api-page .ac-eyebrow {
	font-family: 'Host Grotesk', sans-serif;
	font-size: var(--text-caption);
	font-weight: var(--weight-medium);
	line-height: var(--leading-caption);
	text-transform: uppercase;
	color: var(--ac-eyebrow);
}
.api-page .ac-headline {
	font-family: 'Host Grotesk', sans-serif;
	font-size: var(--text-h3);
	font-weight: var(--weight-light);
	line-height: var(--leading-h3);
	letter-spacing: var(--tracking-h3);
	color: var(--ac-headline);
	margin: 0;
}
.api-page .ac-body {
	font-family: 'Host Grotesk', sans-serif;
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: 1.6;
	color: var(--ac-body-color);
	margin: 0;
}
.api-page .ac-features {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ac-border);
}
.api-page .ac-feature {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 0;
	border-bottom: 1px solid var(--ac-border);
	font-family: 'Host Grotesk', sans-serif;
	font-size: var(--text-sm);
	font-weight: var(--weight-regular);
	line-height: var(--leading-sm);
	color: var(--ac-feature);
}
.api-page .ac-feature-icon {
	font-size: var(--text-body);
	line-height: 1;
	color: var(--ac-arrow);
	flex-shrink: 0;
}
.api-page .ac-testimonial { color: var(--ac-testimonial); margin: 0; }
.api-page .ac-live .testimonial-quote { max-width: 100%; }
.api-page .ac-cta { align-self: flex-start; }
.api-page .ac-cta.link-btn { margin-top: 8px; }
.api-page .ac-image {
	width: 100%;
	max-width: 540px;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	border-radius: 4px;
}
.api-page .ac-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ac-ph-bg);
	color: var(--ac-ph-color);
}
.api-page .ac-image-icon { font-size: var(--text-h3); }
.api-page .ac-live[data-ratio="landscape"] .ac-image { max-width: none; aspect-ratio: 16 / 9; }
.api-page .ac-live[data-ratio="landscape"] .ac-media { justify-content: flex-end; }
.api-page .ac-live[data-layout="content-right"][data-ratio="landscape"] .ac-media { justify-content: flex-start; }
@media (max-width: 1023px) {
	.api-page .ac-inner { padding: 48px 24px; }
	.api-page .ac-live .cb-grid { row-gap: 40px; }
	.api-page .ac-content,
	.api-page .ac-media,
	.api-page .ac-live[data-layout="content-right"] .ac-content,
	.api-page .ac-live[data-layout="content-right"] .ac-media { grid-row: auto; grid-column: 1 / -1; }
	.api-page .ac-media { justify-content: flex-start; }
	.api-page .ac-live[data-ratio="landscape"] .ac-media,
	.api-page .ac-live[data-layout="content-right"][data-ratio="landscape"] .ac-media { justify-content: flex-start; }
	.api-page .ac-headline { font-size: var(--text-h4); letter-spacing: var(--tracking-h4); line-height: var(--leading-h4); }
}

/* ══ Content Section — Accordion (§3 Six clear surfaces) ══ */
.api-page .aca-live {
	--aca-surface:    var(--chalk-05);
	--aca-eyebrow:    var(--coffee-03);
	--aca-headline:   var(--coffee-05);
	--aca-body-color: var(--coffee-03);
	--aca-border:     var(--chalk-07);
	--aca-trigger:    var(--coffee-05);
	--aca-plus:       var(--blue-07);
	--aca-panel-body: var(--coffee-03);
	--aca-ph-bg:      var(--chalk-07);
	--aca-ph-color:   var(--coffee-03);
}
.api-page .aca-live[data-theme="coffee"] {
	--aca-surface:    var(--coffee-05);
	--aca-eyebrow:    var(--yellow-05);
	--aca-headline:   var(--chalk-01);
	--aca-body-color: var(--coffee-03);
	--aca-border:     color-mix(in srgb, var(--neutral-white) 12%, transparent);
	--aca-trigger:    var(--chalk-01);
	--aca-plus:       var(--yellow-05);
	--aca-panel-body: var(--coffee-03);
	--aca-ph-bg:      color-mix(in srgb, var(--neutral-white) 8%, transparent);
	--aca-ph-color:   var(--coffee-01);
}
.api-page .aca-live[data-theme="blue"] {
	--aca-surface:    var(--blue-09);
	--aca-eyebrow:    var(--blue-05);
	--aca-headline:   var(--neutral-white);
	--aca-body-color: color-mix(in srgb, var(--blue-05) 75%, transparent);
	--aca-border:     color-mix(in srgb, var(--blue-05) 20%, transparent);
	--aca-trigger:    var(--neutral-white);
	--aca-plus:       var(--blue-05);
	--aca-panel-body: color-mix(in srgb, var(--blue-05) 75%, transparent);
	--aca-ph-bg:      color-mix(in srgb, var(--blue-05) 12%, transparent);
	--aca-ph-color:   var(--blue-05);
}
.api-page .aca-live { background: var(--aca-surface); }
.api-page .aca-inner { padding: 64px 32px; }
.api-page .aca-live [hidden] { display: none !important; }
.api-page .aca-live .cb-grid { align-items: center; }
.api-page .aca-content {
	grid-row: 1;
	grid-column: 1 / 6;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.api-page .aca-media {
	grid-row: 1;
	grid-column: 7 / 13;
	display: flex;
	justify-content: center;
}
.api-page .aca-live[data-layout="content-right"] .aca-content { grid-column: 8 / 13; }
.api-page .aca-live[data-layout="content-right"] .aca-media   { grid-column: 1 / 7; }
.api-page .aca-eyebrow {
	font-family: 'Host Grotesk', sans-serif;
	font-size: var(--text-caption);
	font-weight: var(--weight-medium);
	line-height: var(--leading-caption);
	text-transform: uppercase;
	color: var(--aca-eyebrow);
}
.api-page .aca-headline {
	font-family: 'Host Grotesk', sans-serif;
	font-size: var(--text-h3);
	font-weight: var(--weight-light);
	line-height: var(--leading-h3);
	letter-spacing: var(--tracking-h3);
	color: var(--aca-headline);
	margin: 0;
}
.api-page .aca-body {
	font-family: 'Host Grotesk', sans-serif;
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: 1.6;
	color: var(--aca-body-color);
	margin: 0;
}
.api-page .aca-items {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--aca-border);
}
.api-page .aca-item {
	border-bottom: 1px solid var(--aca-border);
}
.api-page .aca-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: 'Host Grotesk', sans-serif;
	font-size: var(--text-body);
	font-weight: var(--weight-medium);
	line-height: var(--leading-body);
	color: var(--aca-trigger);
}
.api-page .aca-plus-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 4px;
	border: 1px solid var(--aca-plus);
}
.api-page .aca-plus {
	font-size: var(--text-sm);
	line-height: 1;
	color: var(--aca-plus);
	transition: transform 0.3s ease;
}
.api-page .accordion-item.is-open .aca-plus {
	transform: rotate(45deg);
}
.api-page .aca-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}
.api-page .accordion-item.is-open .aca-panel {
	grid-template-rows: 1fr;
}
.api-page .aca-panel-inner {
	overflow: hidden;
}
.api-page .aca-panel-body {
	font-family: 'Host Grotesk', sans-serif;
	font-size: var(--text-sm);
	font-weight: var(--weight-regular);
	line-height: 1.6;
	color: var(--aca-panel-body);
	margin: 0;
	padding-bottom: 16px;
}
.api-page .aca-cta { align-self: flex-start; }
.api-page .aca-cta.link-btn { margin-top: 8px; }
.api-page .aca-image {
	width: 100%;
	max-width: 540px;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	border-radius: 4px;
}
.api-page .aca-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--aca-ph-bg);
	color: var(--aca-ph-color);
}
.api-page .aca-image-icon { font-size: var(--text-h3); }
.api-page .aca-live[data-ratio="landscape"] .aca-image { max-width: none; aspect-ratio: 16 / 9; }
.api-page .aca-live[data-ratio="landscape"] .aca-media { justify-content: flex-end; }
.api-page .aca-live[data-layout="content-right"][data-ratio="landscape"] .aca-media { justify-content: flex-start; }
@media (max-width: 1023px) {
	.api-page .aca-inner { padding: 48px 24px; }
	.api-page .aca-live .cb-grid { row-gap: 40px; }
	.api-page .aca-content,
	.api-page .aca-media,
	.api-page .aca-live[data-layout="content-right"] .aca-content,
	.api-page .aca-live[data-layout="content-right"] .aca-media { grid-row: auto; grid-column: 1 / -1; }
	.api-page .aca-media { justify-content: flex-start; }
	.api-page .aca-live[data-ratio="landscape"] .aca-media,
	.api-page .aca-live[data-layout="content-right"][data-ratio="landscape"] .aca-media { justify-content: flex-start; }
	.api-page .aca-headline { font-size: var(--text-h4); letter-spacing: var(--tracking-h4); line-height: var(--leading-h4); }
}

/* ── CTA Banner (§4 lemon banner) ── */
.api-page .cta-banner { position: relative; overflow: hidden; border-radius: 4px; background-size: 48px 48px; }
.api-page .cta-banner__fade { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.api-page .cta-banner__inner { position: relative; z-index: 1; padding: 40px 48px; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.api-page .cta-banner__text { max-width: 960px; }
.api-page .cta-banner__text h2 { font-size: clamp(20px, 3.5vw, 32px); font-weight: 600; line-height: 1.1; letter-spacing: -0.5px; margin: 0 0 16px; }
.api-page .cta-banner__text p { font-size: clamp(16px, 2.5vw, 24px); font-weight: 300; line-height: 1.55; margin: 0; }
.api-page .cta-banner__inner > a { flex-shrink: 0; white-space: nowrap; }
.api-page .cta-banner--lemon { background-color: var(--yellow-05); background-image: linear-gradient(rgba(38,28,10,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(38,28,10,0.06) 1px, transparent 1px); }
.api-page .cta-banner--lemon .cta-banner__fade { background: linear-gradient(to right, var(--yellow-05) 20%, transparent 60%); }
.api-page .cta-banner--lemon h2, .api-page .cta-banner--lemon p { color: var(--coffee-05); }
.api-page .cta-banner--coffee { background-color: var(--coffee-05); background-image: linear-gradient(rgba(255,248,120,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,248,120,0.05) 1px, transparent 1px); }
.api-page .cta-banner--coffee .cta-banner__fade { background: linear-gradient(to right, var(--coffee-05) 20%, transparent 60%); }
.api-page .cta-banner--coffee h2 { color: var(--chalk-05); } .api-page .cta-banner--coffee p { color: var(--chalk-01); }
.api-page .cta-banner--blue { background-color: var(--blue-01); background-image: linear-gradient(rgba(38,28,10,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(38,28,10,0.045) 1px, transparent 1px); }
.api-page .cta-banner--blue .cta-banner__fade { background: linear-gradient(to right, var(--blue-01) 20%, transparent 60%); }
.api-page .cta-banner--blue h2, .api-page .cta-banner--blue p { color: var(--coffee-05); }
@media (max-width: 768px) { .api-page .cta-banner__inner { flex-direction: column; align-items: flex-start; padding: 32px 24px; gap: 24px; } }

/* ── CTA Section (§10 centered lemon CTA) ── */
.api-page .cta-section {
	width: 100%;
	padding: 80px 48px;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
}
.api-page .cta-inner--left {
	max-width: 664px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	text-align: left;
}
.api-page .cta-inner--center {
	max-width: 664px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
}
.api-page .cta-heading {
	font-size: var(--text-h2);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-h2);
	letter-spacing: var(--tracking-h2);
	margin: 0;
}
.api-page .cta-subhead {
	font-size: var(--text-body-lg);
	font-weight: 300;
	line-height: 1.55;
	margin: 0;
}
.api-page .cta-stats {
	display: flex;
	gap: 0;
	width: auto;
}
.api-page .cta-stats .stat-inline {
	padding: 8px 36px 8px 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.api-page .cta-inner--center .stat-inline { text-align: center; }
.api-page .cta-inner--center .stat-inline:last-child { padding-right: 0; }
.api-page .cta-stats .stat-num {
	font-size: var(--text-h3);
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 1;
	margin: 0;
}
.api-page .cta-stats .stat-label {
	font-size: var(--text-caption);
	font-weight: 400;
	opacity: 0.6;
	text-transform: none;
	letter-spacing: 0;
	line-height: var(--leading-caption);
	margin: 0;
}
.api-page .cta-actions {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.api-page .cta-btn-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.api-page .cta-inner--center .cta-btn-row { justify-content: center; }
.api-page .cta-inner--center .cta-actions { align-items: center; }
.api-page .cta-qualifier {
	font-size: var(--text-caption);
	font-weight: 400;
	line-height: var(--leading-caption);
	margin: 0;
}
.api-page .cta-btn-row .arrow-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	transition: transform 0.2s;
}
.api-page .cta-btn-row a:hover .arrow-icon { transform: translate(1px, -1px); }
@media (max-width: 768px) {
	.api-page .cta-section { padding: 56px 24px; }
	.api-page .cta-inner--left,
	.api-page .cta-inner--center { gap: 24px; }
	.api-page .cta-heading { font-size: var(--text-h4); letter-spacing: var(--tracking-h4); }
	.api-page .cta-subhead { font-size: var(--text-body); }
	.api-page .cta-stats { flex-direction: column; gap: 0; }
	.api-page .cta-stats .stat-inline { padding: 8px 0; }
	.api-page .cta-stats .stat-num { font-size: var(--text-body-lg); }
}
.api-page .cta-section[data-theme="lemon"] { background: var(--yellow-05); }
.api-page .cta-section[data-theme="lemon"] .cta-heading,
.api-page .cta-section[data-theme="lemon"] .cta-subhead,
.api-page .cta-section[data-theme="lemon"] .stat-num,
.api-page .cta-section[data-theme="lemon"] .stat-label { color: var(--coffee-05); }
.api-page .cta-section[data-theme="lemon"] .cta-qualifier { color: var(--coffee-05); opacity: 0.5; }
.api-page .cta-section[data-theme="chalk"] { background: var(--chalk-05); }
.api-page .cta-section[data-theme="chalk"] .cta-heading,
.api-page .cta-section[data-theme="chalk"] .cta-subhead,
.api-page .cta-section[data-theme="chalk"] .stat-num,
.api-page .cta-section[data-theme="chalk"] .stat-label { color: var(--coffee-05); }
.api-page .cta-section[data-theme="chalk"] .cta-qualifier { color: var(--coffee-05); opacity: 0.5; }
.api-page .cta-section[data-theme="coffee"] { background: var(--coffee-05); }
.api-page .cta-section[data-theme="coffee"] .cta-heading { color: var(--chalk-05); }
.api-page .cta-section[data-theme="coffee"] .cta-subhead { color: var(--chalk-01); }
.api-page .cta-section[data-theme="coffee"] .stat-num,
.api-page .cta-section[data-theme="coffee"] .stat-label { color: var(--chalk-05); }
.api-page .cta-section[data-theme="coffee"] .cta-qualifier { color: var(--chalk-01); opacity: 0.45; }

/* ── FAQ (§11) ── */
.api-page .faq-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
}
@media (min-width: 768px) {
	.api-page .faq-layout {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 32px;
	}
	.api-page .faq-layout > .faq-headline { grid-column: span 3; }
	.api-page .faq-layout > .faq-accordion { grid-column: span 9; }
}
.api-page .faq-headline { padding-top: 4px; }
.api-page .faq-title {
	font-family: 'Host Grotesk', sans-serif;
	font-weight: 300;
	font-size: clamp(28px, 2.4vw, 36px);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--coffee-05);
}
.api-page .faq-answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}
.api-page .faq-answer.open {
	grid-template-rows: 1fr;
}
.api-page .faq-answer-inner {
	overflow: hidden;
}
.api-page .faq-answer-inner p {
	font-family: 'Host Grotesk', sans-serif;
	font-weight: 400;
	font-size: var(--text-body);
	line-height: 1.625;
	color: var(--coffee-03);
	padding-bottom: 20px;
}
.api-page .faq-arrow {
	transition: transform 0.35s ease;
	flex-shrink: 0;
}
.api-page .faq-item.open .faq-arrow {
	transform: rotate(90deg);
}

/* ── Feature card grid + card link (§2 / §8) ── */
.api-page .cards-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; padding: 48px 0 80px; }
.api-page .card-link { color: var(--coffee-05); transition: color 0.2s; }
.api-page .card-link:hover { color: var(--blue-07); }

/* ── Eyebrow ── */
.api-page .eyebrow {
	font-size: var(--text-caption);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var(--coffee-03);
}

/* ── Page header — blue hero grid background (§1) ── */
.api-page .hero-section--blue {
	background-image:
		linear-gradient(rgba(153, 203, 255, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(153, 203, 255, 0.08) 1px, transparent 1px);
	background-size: 48px 48px;
}
.api-page .hero-section--lemon {
	background-image:
		linear-gradient(rgba(38, 28, 10, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(38, 28, 10, 0.06) 1px, transparent 1px);
	background-size: 48px 48px;
}

/* ── Quote Carousel (§7) ── */
.api-page .gr-grid { display: grid; grid-template-columns: 38.2fr 61.8fr; }
.api-page [data-slide-quote], .api-page [data-slide-attr] { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; pointer-events: none; }
.api-page [data-slide-quote].active, .api-page [data-slide-attr].active { opacity: 1; pointer-events: auto; }
.api-page .qc-section .arrow-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--coffee-05); cursor: pointer; border-radius: 4px; transition: color 0.2s; }
.api-page .qc-section .arrow-btn:focus { outline: none; }
.api-page .qc-section .arrow-btn:hover { color: var(--blue-07); }
.api-page .qc-section .arrow-btn-dark { color: var(--chalk-01); }
.api-page .qc-section .arrow-btn-dark:hover { color: var(--yellow-05); }
.api-page .progress-track { height: 1px; background: var(--chalk-07); position: relative; }
.api-page .progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--coffee-05); transition: width 0.35s ease; }
.api-page .qc-section--dark .progress-track { background: rgba(255, 255, 255, 0.12); }
.api-page .qc-section--dark .progress-fill { background: var(--chalk-01); }
@media (max-width: 767px) {
	.api-page .gr-grid { grid-template-columns: 1fr; gap: 28px; }
	.api-page .gr-grid.header-row { gap: 12px; }
	.api-page .left-col-inner { padding-right: 0 !important; justify-content: flex-start !important; gap: 24px; }
	.api-page .quote-min { min-height: 200px !important; }
}

/* ── Results block (§6) ── */
.api-page .results-block {
	padding: 0;
	--rb-panel:   var(--blue-01);
	--rb-text:    var(--coffee-05);
	--rb-divider: var(--blue-05);
}
.api-page .results-block[data-theme="chalk"] {
	--rb-panel:   var(--chalk-05);
	--rb-divider: var(--chalk-07);
}
.api-page .results-block[data-theme="yellow"] {
	--rb-panel: var(--yellow-01);
}
.api-page .results-block[data-theme="coffee"] {
	--rb-panel:   var(--coffee-05);
	--rb-text:    var(--chalk-01);
	--rb-divider: color-mix(in srgb, var(--neutral-white) 15%, transparent);
}
.api-page .results-block [hidden] { display: none !important; }
.api-page .results-block__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding-inline: 32px;
}
.api-page .results-block__panel {
	background: var(--rb-panel);
	border-radius: 4px;
	padding: 56px;
}
.api-page .results-block__grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 64px;
	align-items: stretch;
}
@media (max-width: 991px) {
    .api-page .results-block__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}
.api-page .results-block__left {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
}
.api-page .results-block__headline {
	font-size: var(--text-h4);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-h4);
	letter-spacing: var(--tracking-h4);
	color: var(--rb-text);
	margin: 0;
	max-width: 560px;
}
.api-page .results-block__stats {
	display: flex;
	gap: 48px;
	align-items: flex-start;
}
.api-page .results-block__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.api-page .results-block__stat-number {
	font-size: var(--text-h2);
	font-weight: var(--weight-light);
	line-height: var(--leading-h2);
	letter-spacing: var(--tracking-h2);
	color: var(--rb-text);
}
.api-page .results-block__stat-label {
	font-size: var(--text-sm);
	font-weight: var(--weight-light);
	line-height: var(--leading-sm);
	color: var(--rb-text);
	max-width: 120px;
}
.api-page .results-block__right {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.api-page .results-block__outcome {
	padding: 20px 0;
	border-top: 1px solid var(--rb-divider);
}
.api-page .results-block__outcome:last-child {
	border-bottom: 1px solid var(--rb-divider);
}
.api-page .results-block__outcome-text {
	font-size: var(--text-body);
	font-weight: var(--weight-light);
	line-height: var(--leading-body);
	color: var(--rb-text);
	margin: 0;
}

/* ══ API-page-level overrides (from the preview's second <style> block) ══ */

/* Constrain organism inner containers to page grid width */
.api-page .aca-live .aca-inner,
.api-page .ac-live .ac-inner { max-width: 1376px; margin: 0 auto; }

/* Mobile responsive — max-width: 768px */
@media (max-width: 768px) {
	.api-page .hero-section--blue { padding: 48px 0 !important; }
	.api-page .hero-inner { padding: 0 20px !important; }
	.api-page .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

	.api-page .value-props-inner { padding: 48px 20px 0 !important; }
	.api-page .value-row { grid-template-columns: 1fr !important; gap: 12px !important; padding: 24px 0 !important; }

	.api-page .pg-section { padding-left: 20px !important; padding-right: 20px !important; }
	.api-page .pg-section-wrap { padding: 0 20px !important; }

	.api-page .section-headline { padding-top: 48px !important; padding-bottom: 24px !important; }

	.api-page .cb-grid { grid-template-columns: 1fr !important; }
	.api-page .cb-grid > * { grid-column: 1 / -1 !important; }

	.api-page .cards-grid { grid-template-columns: 1fr !important; }
	.api-page .cards-grid > * { grid-column: 1 / -1 !important; padding-left: 0 !important; }

	.api-page .cb-grid.items-start { display: flex !important; flex-direction: column !important; gap: 32px !important; padding-bottom: 48px !important; }
	.api-page .ac-img-col { width: 100% !important; display: block !important; }
	.api-page .ac-img-col img { width: 100% !important; height: auto !important; }

	.api-page .feature-cards-grid { grid-template-columns: 1fr !important; }

	.api-page .pg-section .cb-grid.items-start { padding-bottom: 48px !important; }

	/* §6 Results block — desktop values overflowed on phones. The stats row is a
	   flex row whose items can't shrink below their content (min-width: auto), so
	   2 stats (~120px each) + 48px gap + 56px panel padding + 32px inner padding
	   forced a ~464px minimum against a ~390px viewport. Stack the stats, drop the
	   label cap, and shrink the paddings. No !important needed: same specificity as
	   the base rules above, and this comes later in the file. */
	.api-page .results-block__inner      { padding-inline: 20px; }
	.api-page .results-block__panel      { padding: 32px 20px; }
	.api-page .results-block__headline   { max-width: none; font-size: 24px; }
	/* align-items: stretch overrides the base flex-start — otherwise each stat would
	   size to its content instead of spanning the full width. */
	.api-page .results-block__stats      { flex-direction: column; gap: 24px; align-items: stretch; }
	.api-page .results-block__stat-label { max-width: none; }
}

/* Hero fade-in (timed, opacity only — no movement) */
.api-page [data-hero-delay] {
	opacity: 0;
	transition: opacity 0.9s ease;
}

/* Scroll reveal (fade up) */
.api-page .reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.api-page .reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Clip grid-highlight canvas to hero zone only, keep behind content */
.api-page .hero-section--blue > canvas {
	z-index: 0 !important;
	-webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
}

/* ── Editor-only overrides ── */
.api-page-main.is-editor .apm-ed-section {
	padding: 28px 24px;
	border-bottom: 2px solid var(--chalk-07, #D9D9CC);
}

.api-page-main.is-editor .apm-ed-section__label {
	margin: 0 0 16px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--coffee-03, #99876B);
	font-family: monospace;
}