/**
 * ChatFlint theme — the design system.
 *
 * Reference and rationale: playbook/DESIGN-REFERENCE.md. In short: DM Sans
 * (light body, regular headings, nothing bold) with IBM Plex Mono for every
 * label; a near-black / soft-grey section rhythm with one ember accent; cards
 * with ticket notches on dotted guide lines; a fixed black rail on the left;
 * .4s ease-in-out on every hover; GSAP letter reveals (assets/motion.js).
 *
 * Colours, type scale and spacing come from theme.json as --wp--preset--*
 * custom properties. Sections that go dark set the --acp-* surface tokens, so
 * every component below adapts without a second copy of its rules.
 */


/* ---------- Font loading ----------
 *
 * DM Sans is self-hosted with font-display: swap, so the first paint uses
 * Arial and the swap used to reflow the vertically-centred hero — a 0.2 CLS
 * on a phone. This fallback carries DM Sans metrics, so the two render at the
 * same height and nothing moves when the real face arrives. The preload in
 * functions.php makes the swap happen sooner as well.
 */
@font-face {
	font-family: "DM Sans Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
	size-adjust: 100.06%;
	ascent-override: 99.14%;
	descent-override: 29.98%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Plex Mono Fallback";
	src: local("Consolas"), local("DejaVu Sans Mono"), local("Menlo");
	size-adjust: 104%;
	ascent-override: 102%;
	descent-override: 28%;
	line-gap-override: 0%;
}

:root {
	--wp--preset--font-family--system: "DM Sans", "DM Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--wp--preset--font-family--display: "DM Sans", "DM Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--wp--preset--font-family--mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


/* =========================================================================
   1. Tokens
   ========================================================================= */

:root {
	--acp-rail: 90px;
	--acp-header-h: 90px;
	--acp-ease: .4s ease-in-out;

	/* Links on light surfaces are ink (underlined in prose) and turn yellow on
	   hover, as on the reference; yellow itself is never text on a light ground. */
	--acp-accent-text: var(--wp--preset--color--ink);

	/* Surface tokens — light by default, swapped by .acp-dark below. */
	--acp-bg: var(--wp--preset--color--soft);
	--acp-fg: var(--wp--preset--color--ink);
	--acp-muted: var(--wp--preset--color--muted);
	--acp-line: var(--wp--preset--color--border);
	--acp-line-strong: #c9c9d2;
	--acp-card: var(--wp--preset--color--white);
	--acp-card-line: #ffffff;
	--acp-raised: var(--wp--preset--color--base);
	--acp-stat: #efeff3;
	--acp-guide: rgba(14, 14, 20, .9);
	--acp-btn-square: var(--wp--preset--color--ink);
	--acp-btn-square-fg: var(--wp--preset--color--base);
	--acp-link: var(--wp--preset--color--ink);
	--acp-chev-cur: var(--acp-chev-dark);
	--acp-ring: rgba(14, 14, 20, .075);
	--acp-dot: rgba(14, 14, 20, .28);

	/* The ↳ "enter" arrow the buttons carry, light and dark. */
	--acp-arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8f9fa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5v9h12'/%3E%3Cpath d='M14 10l4 4-4 4'/%3E%3C/svg%3E");
	--acp-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0e14' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5v9h12'/%3E%3Cpath d='M14 10l4 4-4 4'/%3E%3C/svg%3E");
	--acp-plus-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v16M0 8h16' stroke='%23efbd30' stroke-width='1'/%3E%3C/svg%3E");
	--acp-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8f9fa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
	--acp-chev-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0e14' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");

	/* Kept for older component rules. */
	--acp-border-hover: var(--acp-line-strong);
	--acp-border-tint: var(--acp-line);
	--acp-card-bg: var(--acp-card);
	--acp-field-bg: transparent;
	--acp-panel-shadow: none;
	--acp-code-bg: var(--wp--preset--color--soft);
}

/* Dark surfaces: the hero, the dark bands, anything marked .acp-dark, and
   the two legacy colour classes the builders still emit. */
.acp-dark,
.acp-hero,
.has-dark-background-color,
.has-dark-gradient-background,
.has-dark-soft-background-color {
	--acp-bg: var(--wp--preset--color--dark);
	--acp-fg: var(--wp--preset--color--base);
	--acp-muted: var(--wp--preset--color--dark-muted);
	--acp-line: var(--wp--preset--color--dark-border);
	--acp-line-strong: #666677;
	--acp-card: var(--wp--preset--color--dark-card);
	--acp-card-line: rgba(255, 255, 255, .13);
	--acp-raised: var(--wp--preset--color--dark-soft);
	--acp-stat: var(--wp--preset--color--dark-soft);
	--acp-guide: rgba(255, 255, 255, .9);
	--acp-btn-square: var(--wp--preset--color--base);
	--acp-btn-square-fg: var(--wp--preset--color--ink);
	--acp-link: var(--wp--preset--color--base);
	--acp-chev-cur: var(--acp-chev);
	--acp-accent-text: var(--wp--preset--color--accent);
	--acp-ring: rgba(255, 255, 255, .07);
	--acp-dot: rgba(255, 255, 255, .55);
	background-color: var(--acp-bg);
	color: var(--acp-fg);
}

.has-soft-background-color, .has-base-background-color {
	--acp-bg: var(--wp--preset--color--soft);
	--acp-card: var(--wp--preset--color--white);
	--acp-raised: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--soft);
}

.acp-dark :where(h1, h2, h3, h4, h5, h6),
.acp-hero :where(h1, h2, h3, h4, h5, h6),
.has-dark-background-color :where(h1, h2, h3, h4, h5, h6),
.has-dark-gradient-background :where(h1, h2, h3, h4, h5, h6) {
	color: var(--acp-fg);
}

/* WordPress paints the preset with !important; the dark surfaces answer it. */
.acp-dark .has-muted-color,
.acp-hero .has-muted-color,
.has-dark-background-color .has-muted-color,
.has-dark-gradient-background .has-muted-color { color: var(--acp-muted) !important; }

.acp-dark .has-ink-color,
.acp-hero .has-ink-color,
.has-dark-background-color .has-ink-color { color: var(--acp-fg) !important; }

.acp-dark a:where(:not(.wp-element-button):not([class*="acp-btn"]):not(.acp-txtbtn)),
.acp-hero a:where(:not(.wp-element-button):not([class*="acp-btn"]):not(.acp-txtbtn)),
.has-dark-background-color a:where(:not(.wp-element-button):not([class*="acp-btn"])),
.has-dark-gradient-background a:where(:not(.wp-element-button):not([class*="acp-btn"])) {
	color: var(--acp-fg);
}

.acp-dark a:where(:not(.wp-element-button):not([class*="acp-btn"]):not(.acp-txtbtn)):hover,
.acp-hero a:where(:not(.wp-element-button):not([class*="acp-btn"]):not(.acp-txtbtn)):hover { color: var(--wp--preset--color--accent); }


/* =========================================================================
   2. Base
   ========================================================================= */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	background: var(--wp--preset--color--soft);
	overflow-x: hidden;
}

/* The rail: everything except the fixed header sits to the right of it. */
@media (min-width: 992px) {
	body { padding-left: var(--acp-rail); }
}

/* Header, main and footer meet edge to edge, and so do the full-width
   sections inside main: the layout block gap would otherwise paint a strip
   of page background between two dark bands. */
.wp-site-blocks > * { margin-block-start: 0; }
main.wp-block-group > .alignfull { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* The header is fixed, so the page starts below it. A page whose first
   section is a dark hero pulls itself back up under the bar, and the hero's
   own padding makes the room — the bar and the hero are one surface. */
main.wp-block-group { margin-top: var(--acp-header-h); min-height: 40vh; }
main.wp-block-group > .acp-hero:first-child { margin-top: calc(-1 * var(--acp-header-h)); }

img { max-width: 100%; height: auto; }

::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); }

/* Focus rings: the accent, visible on both surfaces. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ---------- Skip link ---------- */

.acp-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: .7rem 1.1rem;
	border-radius: 0 0 6px 0;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	text-transform: uppercase;
	text-decoration: none;
}

.acp-skip:focus { left: var(--acp-rail); outline: 2px solid var(--wp--preset--color--ink); }

#content:focus { outline: none; }

/* ---------- Typography helpers ---------- */

h1.wp-block-heading, h2.wp-block-heading { text-wrap: balance; }

/* The section label: mono, uppercase, quiet. */
.acp-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	font-weight: 400;
	line-height: 18px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--acp-muted);
	margin: 0 0 14px;
}

/* A phrase inside a heading: same colour, one weight lighter — the contrast
   this system uses instead of a second colour. */
.acp-tint {
	color: inherit;
	font-weight: 200;
}

/* Screen-reader-only text, for links whose visible label is short. */
.acp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Letter-split spans (motion.js): words never break, letters are boxes. */
.acp-w { display: inline-block; white-space: nowrap; }
.acp-l { display: inline-block; }

/* Prose links: an underline, because colour alone is not a signal. */
main p:not([class*="acp-"]) > a:not(.wp-element-button):not([class*="acp-"]),
.acp-doc-body a:not(.wp-element-button) {
	color: var(--acp-link);
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
	transition: color var(--acp-ease);
}

main p:not([class*="acp-"]) > a:not(.wp-element-button):not([class*="acp-"]):hover { color: var(--wp--preset--color--accent); }

/* Prose headings emitted by the builders (about, legal, feature sections). */
h2.acp-h {
	font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem);
	font-weight: 400;
	line-height: 1.25;
	margin: 2.2em 0 .55em;
	scroll-margin-top: calc(var(--acp-header-h) + 20px);
}

h3.acp-h {
	font-size: clamp(1.15rem, 1.05rem + .4vw, 1.3rem);
	font-weight: 400;
	margin: 1.8em 0 .45em;
	scroll-margin-top: calc(var(--acp-header-h) + 20px);
}

:where(.wp-block-group, .wp-block-column) > h2.acp-h:first-child,
:where(.wp-block-group, .wp-block-column) > h3.acp-h:first-child { margin-top: 0; }

/* Section heading blocks in patterns and builders. */
.acp-sec-head { max-width: 1000px; margin-bottom: 44px; }
.acp-sec-head h2, .acp-sec-head h3 { margin: 0; }
.acp-sec-head p { margin: 20px 0 0; max-width: 704px; color: var(--acp-muted); }
.acp-sec-head.is-center { margin-inline: auto; text-align: center; }
.acp-sec-head.is-center p { margin-inline: auto; }


/* =========================================================================
   3. Layout wrappers
   ========================================================================= */

.acp-wrap { max-width: 1332px; margin-inline: auto; padding-inline: 24px; }
.acp-wrap-fluid { padding-left: 24px; }

@media (min-width: 992px) {
	.acp-wrap-fluid { padding-left: 75px; }
}

.acp-sec { padding: 120px 0 130px; position: relative; }

@media (max-width: 991px) {
	.acp-sec { padding: 80px 0; }
}


/* =========================================================================
   4. Header, rail, navigation
   ========================================================================= */

.acp-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--acp-header-h);
	z-index: 100;
	background: var(--wp--preset--color--dark);
	border-bottom: 1px solid rgba(255, 255, 255, .27);
	color: var(--wp--preset--color--base);
	transition: background-color var(--acp-ease);
}

.admin-bar .acp-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .acp-header { top: 46px; } }
.admin-bar .acp-rail { top: 32px; }
@media (max-width: 782px) { .admin-bar .acp-rail { top: 46px; } }
/* Below 600px WordPress lets its admin bar scroll away; the fixed bar must not
   leave a gap where it was. Logged-in editors only. */
@media (max-width: 600px) { .admin-bar #wpadminbar { position: fixed; } }

.acp-header [hidden] { display: none !important; }

/* The header and footer groups use the flow layout, whose block gap would
   push every child after the first down by 20px — the bar, the panel. */
.acp-header > *, .acp-footer > * { margin-block-start: 0 !important; }

.acp-rail {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--acp-rail);
	background: var(--wp--preset--color--dark);
	border-right: 1px solid rgba(255, 255, 255, .27);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-top: 22px;
	z-index: 101;
}

.acp-logo { display: inline-flex; line-height: 0; }
.acp-mark { width: 46px; height: 46px; border-radius: 12px; }
.acp-logo-m { display: none; }

/* The mark is concept G: a bubble holding a prompt. The cursor blinks the way
   a terminal does — the one thing on the page that is always alive — and the
   chevron strikes forward when the logo is hovered. */
.acp-mark-chev { transform-origin: 20px 23.5px; }

@media (prefers-reduced-motion: no-preference) {
	.acp-mark-cursor { animation: acp-mark-blink 1.4s step-end infinite; }
	.acp-logo:hover .acp-mark-chev,
	.acp-ft-logo:hover .acp-mark-chev { animation: acp-mark-strike .65s cubic-bezier(.22, 1, .36, 1); }
	.acp-logo:hover .acp-mark-cursor,
	.acp-ft-logo:hover .acp-mark-cursor { animation: acp-mark-blink .28s step-end 3; }

	@keyframes acp-mark-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
	@keyframes acp-mark-strike {
		0%, 100% { transform: translateX(0); }
		40% { transform: translateX(3px); }
		70% { transform: translateX(-1px); }
	}
}

.acp-bar {
	position: absolute;
	left: var(--acp-rail);
	right: 0;
	top: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40px 0 12px;
}

.acp-nav { display: flex; height: 100%; align-items: stretch; }
.acp-nav-item { position: static; display: flex; }

.acp-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 0 20px;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	font-weight: 400;
	line-height: 18px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--base);
	transition: background-color var(--acp-ease), color var(--acp-ease);
}

.acp-nav-link:hover,
.acp-nav-item.is-open .acp-nav-link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

.acp-caret { width: 11px; height: 13px; transition: transform var(--acp-ease); }
.acp-nav-item.is-open .acp-caret { transform: rotate(180deg); }

/* Panels. The Features one spans the whole bar (white, four columns); the
   Resources one is a plain list under its trigger. */
.acp-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--preset--color--border);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--acp-ease), transform var(--acp-ease), visibility var(--acp-ease);
	z-index: 60;
}

.acp-nav-item.is-open > .acp-panel { opacity: 1; visibility: visible; transform: none; }

.acp-mega {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px 60px;
	padding: 55px 80px 60px;
}

.acp-mega-col { display: flex; flex-direction: column; }

.acp-mega-head {
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 28px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	margin-bottom: 14px;
}

.acp-mega-head:hover { color: var(--wp--preset--color--accent-2); }

.acp-mi {
	display: block;
	padding: 6px 0;
	font-size: .9375rem;
	font-weight: 300;
	line-height: 24px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color var(--acp-ease);
}

.acp-mi:hover { color: var(--wp--preset--color--accent-2); }

.acp-nav-item:has(> .acp-drop) { position: relative; }

.acp-drop {
	left: 0;
	right: auto;
	width: 280px;
	padding: 28px 32px 30px;
	border: 1px solid var(--wp--preset--color--border);
	border-top: 0;
}

/* Right-hand cluster. */
.acp-actions { display: flex; align-items: center; gap: 30px; }

.acp-btn-quiet {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	line-height: 18px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--base);
	transition: color var(--acp-ease);
}

.acp-btn-quiet:hover { color: var(--wp--preset--color--accent); }

/* Burger: a pale pill with three hairlines. */
.acp-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 74px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--base);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	cursor: pointer;
	transition: background-color var(--acp-ease), border-color var(--acp-ease);
}

.acp-burger span {
	display: block;
	width: 30px;
	height: 1.5px;
	background: var(--wp--preset--color--ink);
	transition: transform .3s ease, opacity .2s ease;
}

.acp-burger.is-open { background: transparent; border-color: var(--wp--preset--color--ink); }
.acp-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.acp-burger.is-open span:nth-child(2) { opacity: 0; }
.acp-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile panel: a full-screen sheet in the light palette, dotted rules. */
.acp-mobile {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--acp-header-h);
	bottom: 0;
	overflow: auto;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	padding: 12px 24px 40px;
}

.admin-bar .acp-mobile { top: calc(var(--acp-header-h) + 46px); }

.acp-header.is-menu-open { background: var(--wp--preset--color--base); border-bottom-color: var(--wp--preset--color--border); color: var(--wp--preset--color--ink); }
.acp-header.is-menu-open .acp-btn-quiet { color: var(--wp--preset--color--ink); }

.acp-m-link,
.acp-m-group > summary {
	display: block;
	padding: 20px 0;
	font-size: 1.75rem;
	font-weight: 300;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-bottom: 1px dotted var(--wp--preset--color--ink);
	cursor: pointer;
	list-style: none;
}

.acp-m-group > summary::-webkit-details-marker { display: none; }
.acp-m-group > summary { position: relative; padding-right: 40px; }
.acp-m-group > summary::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background: var(--acp-plus-light) center / contain no-repeat;
	transition: transform var(--acp-ease);
}
.acp-m-group[open] > summary::after { transform: translateY(-50%) rotate(45deg); }

.acp-m-group a {
	display: block;
	padding: 10px 0 10px 8px;
	font-size: 1.0625rem;
	font-weight: 300;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.acp-m-group a:hover, .acp-m-link:hover { color: var(--wp--preset--color--accent-2); }
.acp-m-group a:last-child { padding-bottom: 20px; border-bottom: 1px dotted var(--wp--preset--color--ink); }
.acp-m-cta { margin-top: 28px; }
.acp-m-cta > * { display: flex; width: 100%; justify-content: center; }
body.acp-noscroll { overflow: hidden; }

@media (max-width: 991px) {
	:root { --acp-header-h: 72px; }
	.acp-rail { display: none; }
	.acp-bar { left: 0; padding: 0 16px 0 20px; }
	.acp-logo-m { display: inline-flex; }
	.acp-mark { width: 40px; height: 40px; border-radius: 10px; }
	.acp-nav { display: none; }
	.acp-actions { gap: 14px; }
	.acp-actions .acp-btn-quiet { display: none; }
	.acp-actions .acp-btn-cta { display: none; }
}

@media (min-width: 992px) {
	.acp-burger { display: none !important; }
	.acp-mobile { display: none !important; }
}


/* =========================================================================
   5. Buttons
   ========================================================================= */

/* Primary: ember fill, mono uppercase, and the black square holding the ↳
   arrow at the left. Hover: the fill turns pale; the square stays. */
.wp-block-button .wp-block-button__link,
.acp-btn,
.acp-btn-cta,
.acp-form button,
.wp-block-search__button {
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 22px 13px 56px !important;
	border: 1px solid transparent;
	border-radius: 6px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	font-weight: 400;
	line-height: 18px;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--acp-ease), border-color var(--acp-ease), color var(--acp-ease);
}

.wp-block-button .wp-block-button__link::before,
.acp-btn::before,
.acp-btn-cta::before,
.acp-form button::before,
.wp-block-search__button::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	width: 36px;
	height: 36px;
	transform: translateY(-50%);
	border-radius: 3px;
	background: var(--wp--preset--color--ink) var(--acp-arrow-light) center / 16px no-repeat;
}

.wp-block-button .wp-block-button__link:hover,
.acp-btn:hover,
.acp-btn-cta:hover,
.acp-form button:hover,
.wp-block-search__button:hover {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink) !important;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button .wp-block-button__link,
	.acp-btn,
	.acp-btn-cta { overflow: hidden; }

	.wp-block-button .wp-block-button__link::after,
	.acp-btn::after,
	.acp-btn-cta::after {
		content: "";
		position: absolute;
		top: -30%;
		bottom: -30%;
		left: -60%;
		width: 34%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
		transform: skewX(-20deg);
		animation: acp-shine 5.5s ease-in-out infinite;
		pointer-events: none;
	}

	@keyframes acp-shine {
		0% { left: -60%; }
		34% { left: 150%; }
		100% { left: 150%; }
	}
}

/* The inline arrow icons older markup carries are replaced by the square. */
.wp-block-button__link > svg, .acp-btn-cta > svg, .acp-arrow-btn svg { display: none; }

.wp-block-button__link.has-base-background-color { background: var(--wp--preset--color--accent); }

/* Text button: mono uppercase text with the square trailing it. On dark
   surfaces the square is pale with a dark arrow; hover turns it ember. */
.wp-block-button.is-style-outline-quiet .wp-block-button__link,
.acp-txtbtn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	color: var(--acp-fg) !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	font-weight: 400;
	line-height: 18px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--acp-ease);
}

.wp-block-button.is-style-outline-quiet .wp-block-button__link::before,
.acp-txtbtn::before { display: none; }

.wp-block-button.is-style-outline-quiet .wp-block-button__link::after,
.acp-txtbtn::after {
	content: "";
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 3px;
	background-color: var(--acp-btn-square);
	background-image: var(--acp-arrow-light);
	background-position: center;
	background-size: 16px;
	background-repeat: no-repeat;
	transition: background-color var(--acp-ease);
}

.acp-dark .acp-txtbtn::after,
.acp-hero .acp-txtbtn::after,
.acp-dark .wp-block-button.is-style-outline-quiet .wp-block-button__link::after,
.acp-hero .wp-block-button.is-style-outline-quiet .wp-block-button__link::after,
.has-dark-background-color .wp-block-button.is-style-outline-quiet .wp-block-button__link::after,
.acp-txtbtn.is-white::after { background-image: var(--acp-arrow-dark); }

.wp-block-button.is-style-outline-quiet .wp-block-button__link:hover::after,
.acp-txtbtn:hover::after {
	background-color: var(--wp--preset--color--accent);
	background-image: var(--acp-arrow-dark);
}

.wp-block-button.is-style-outline-quiet .wp-block-button__link:hover,
.acp-txtbtn:hover { color: var(--acp-fg) !important; }

/* A text button that leads with its square. */
.acp-txtbtn.is-reverse { flex-direction: row-reverse; }

/* Button rows. */
.wp-block-buttons { gap: 14px 36px; }
.acp-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; }

/* Circular arrow buttons for carousels. */
.acp-carousel-nav { display: flex; gap: 8px; }

.acp-circ,
.acp-carousel-nav button {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--acp-line);
	background: var(--acp-raised) var(--acp-chev-cur) center / 14px no-repeat;
	cursor: pointer;
	font-size: 0;
	transition: background-color var(--acp-ease), border-color var(--acp-ease), opacity var(--acp-ease);
}

.acp-carousel-nav button:first-child { transform: scaleX(-1); }
.acp-carousel-nav button:hover:not(:disabled) { background-color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); background-image: var(--acp-chev-dark); }
.acp-carousel-nav button:disabled { opacity: .35; cursor: default; }

/* Tags / chips: mono, tiny, dark on light images and pale on dark. */
.acp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.acp-tags li, .acp-chip {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 5px;
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	font-weight: 400;
	line-height: 18px;
	text-transform: uppercase;
	white-space: nowrap;
}

.acp-dark .acp-chip, .acp-chip.is-light { background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink); }

/* Pill: the rounded review-style capsule with a circle arrow. */
.acp-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 4px 0 18px;
	border: 1px solid var(--acp-line);
	border-radius: 40px;
	background: transparent;
	color: var(--acp-fg);
	font-size: .9375rem;
	font-weight: 300;
	text-decoration: none;
	transition: border-color var(--acp-ease);
}

.acp-pill:hover { border-color: var(--acp-line-strong); }

.acp-pill-arrow {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--acp-raised) var(--acp-arrow-light) center / 14px no-repeat;
	border: 1px solid var(--acp-line);
	transition: background-color var(--acp-ease);
}

.acp-pill:hover .acp-pill-arrow { background-color: var(--wp--preset--color--accent); background-image: var(--acp-arrow-dark); border-color: var(--wp--preset--color--accent); }
.acp-pill strong { font-weight: 500; }
.acp-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--accent); flex: none; }


/* =========================================================================
   6. Cards, lists
   ========================================================================= */

/* The card: 10px radius, a hairline, and the half-circle "ticket" notches
   at the top and bottom edge, filled with the surface behind the card. */
.wp-block-group.is-style-card,
.wp-block-group.is-style-card-accent,
.acp-card {
	position: relative;
	background: var(--acp-card);
	border: 1px solid var(--acp-card-line);
	border-radius: 10px;
	padding: 30px;
	color: var(--acp-fg);
	transition: border-color var(--acp-ease);
}

.wp-block-group.is-style-card::before,
.wp-block-group.is-style-card::after,
.wp-block-group.is-style-card-accent::before,
.wp-block-group.is-style-card-accent::after,
.acp-card::before,
.acp-card::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 30px;
	height: 15px;
	transform: translateX(-50%);
	background: var(--acp-bg);
	border: 1px solid var(--acp-card-line);
	pointer-events: none;
}

.wp-block-group.is-style-card::before,
.wp-block-group.is-style-card-accent::before,
.acp-card::before {
	top: -1px;
	border-top: 0;
	border-radius: 0 0 15px 15px;
}

.wp-block-group.is-style-card::after,
.wp-block-group.is-style-card-accent::after,
.acp-card::after {
	bottom: -1px;
	border-bottom: 0;
	border-radius: 15px 15px 0 0;
}

/* Side notches instead (the stats cards). */
.acp-card.is-side::before, .acp-card.is-side::after {
	left: auto;
	top: 50%;
	width: 15px;
	height: 30px;
	transform: translateY(-50%);
}
.acp-card.is-side::before { left: -1px; border: 1px solid var(--acp-card-line); border-left: 0; border-radius: 0 15px 15px 0; }
.acp-card.is-side::after { right: -1px; bottom: auto; border: 1px solid var(--acp-card-line); border-right: 0; border-radius: 15px 0 0 15px; }

/* The featured plan: the hairline turns ember. */
.wp-block-group.is-style-card-accent { border-color: var(--wp--preset--color--accent); }
.wp-block-group.is-style-card-accent::before,
.wp-block-group.is-style-card-accent::after { border-color: var(--wp--preset--color--accent); }

.wp-block-group.is-style-card > :first-child,
.wp-block-group.is-style-card-accent > :first-child { margin-top: 0; }
.wp-block-group.is-style-card > :last-child,
.wp-block-group.is-style-card-accent > :last-child { margin-bottom: 0; }

/* Dotted guide lines: a wrapper whose two pseudo-elements draw the dotted
   rules that run past the card's edges and fade out — the blueprint look. */
.acp-lined { position: relative; }

.acp-lined::before,
.acp-lined::after {
	content: "";
	position: absolute;
	pointer-events: none;
	opacity: .1;
	z-index: 0;
}

.acp-lined::before {
	left: -1px;
	right: -1px;
	top: -32px;
	bottom: -32px;
	border-left: 1px dotted var(--acp-guide);
	border-right: 1px dotted var(--acp-guide);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}

.acp-lined::after {
	top: -1px;
	bottom: -1px;
	left: -24px;
	right: -24px;
	border-top: 1px dotted var(--acp-guide);
	border-bottom: 1px dotted var(--acp-guide);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

.acp-lined > * { position: relative; z-index: 1; }

/* Equal-height cards inside a columns row, when the card is the column's
   only child. */
.wp-block-columns > .wp-block-column > .is-style-card:only-child,
.wp-block-columns > .wp-block-column > .is-style-card-accent:only-child { height: 100%; }
.wp-block-columns > .wp-block-column:has(> .is-style-card:only-child),
.wp-block-columns > .wp-block-column:has(> .is-style-card-accent:only-child) { display: flex; flex-direction: column; }

/* Check-mark lists. */
ul.is-style-checks { list-style: none; padding: 0; margin: 0; }
ul.is-style-checks li {
	position: relative;
	padding-left: 1.6rem;
	margin: 0 0 .55rem;
	line-height: 1.5;
}
ul.is-style-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 14px;
	height: 14px;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23efbd30' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 8px no-repeat;
}

/* Feature icon tile (older feature-card markup): a hairline square. */
.acp-ico, .acp-dark-ico, .acp-fcard-ico, .acp-watch-ico, .acp-mi-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 18px;
	border: 1px solid var(--acp-card-line);
	border-radius: 6px;
	background: var(--acp-raised);
	color: var(--acp-fg);
}

.acp-ico svg, .acp-dark-ico svg, .acp-fcard-ico svg, .acp-watch-ico svg { width: 18px; height: 18px; }

/* Numbered steps. */
.acp-step-n, .acp-steps3-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-bottom: 18px;
	border-radius: 3px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
}

.acp-dark .acp-step-n { background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink); }


/* =========================================================================
   7. Hero
   ========================================================================= */

.acp-hero {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding-top: calc(var(--acp-header-h) + 120px) !important;
	padding-bottom: 120px !important;
	background-color: var(--wp--preset--color--dark);
	background-image:
		radial-gradient(620px 540px at 78% 46%, rgba(239, 189, 48, .3), rgba(239, 189, 48, 0) 64%),
		radial-gradient(340px 290px at 20% 42%, rgba(239, 189, 48, .1), rgba(239, 189, 48, 0) 66%);
}

/* Rings, centred behind the headline. */
.acp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-radial-gradient(circle at 50% 46%, transparent 0 158px, rgba(255, 255, 255, .07) 158px 159px);
	-webkit-mask-image: radial-gradient(circle at 50% 46%, #000 0, #000 520px, transparent 700px);
	mask-image: radial-gradient(circle at 50% 46%, #000 0, #000 520px, transparent 700px);
	pointer-events: none;
}

/* The dot grid, sitting where the glow is. */
.acp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle, rgba(255, 255, 255, .5) 1px, transparent 1.6px) 0 0 / 18px 18px;
	-webkit-mask-image: radial-gradient(520px 480px at 76% 48%, #000 10%, transparent 70%);
	mask-image: radial-gradient(520px 480px at 76% 48%, #000 10%, transparent 70%);
	opacity: .5;
	pointer-events: none;
	mix-blend-mode: lighten;
}

.acp-hero > * { position: relative; z-index: 1; }
.acp-hero .acp-shapes { z-index: 0; }
.acp-hero .acp-shape-1 { right: -60px; top: 12%; }
.acp-hero .acp-shape-2 { left: -80px; bottom: 6%; }

.acp-hero-home { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }

.acp-hero-body { box-sizing: border-box; width: 100%; max-width: 980px; margin: 0 auto; padding: 0 24px; }
.acp-hero-body h1 { max-width: 900px; margin: 0 auto 26px; }
.acp-hero-lead { max-width: 820px; margin: 0 auto; font-size: 1.0625rem; line-height: 1.5; color: var(--acp-fg); }
.acp-hero-body .acp-btns { justify-content: center; margin-top: 48px; }

.acp-hero h1 { color: var(--acp-fg); margin-inline: auto !important; text-align: center; max-width: 900px; }
.acp-hero:not(.acp-hero-home) h1 { font-size: clamp(2.4rem, 1.9rem + 2.6vw, 4.25rem); }
.acp-hero:not(.acp-hero-home) .wp-block-buttons { justify-content: center; }
.acp-hero-center > p, .acp-hero-center .wp-block-group > p, .acp-hero p.has-large-font-size { max-width: 760px; margin-left: auto; margin-right: auto; }
.acp-hero .acp-eyebrow { text-align: center; color: var(--acp-muted); }
.acp-hero p { color: var(--acp-fg); }

/* The bottom row: scroll cue at the left, the pill in the middle. */
.acp-hero-foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 75px;
	z-index: 2;
}

.acp-scroll-cue {
	position: absolute;
	left: 75px;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	font-weight: 300;
	line-height: 18px;
	text-transform: uppercase;
	color: var(--acp-fg);
	text-decoration: none;
}

.acp-scroll-cue::after {
	content: "";
	width: 12px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox=' 0 0 24 24' fill='none' stroke='%23f8f9fa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 991px) {
	.acp-hero { padding-top: calc(var(--acp-header-h) + 72px) !important; padding-bottom: 96px !important; }
	.acp-hero-home { padding-bottom: 150px !important; }
	.acp-hero-foot { bottom: 48px; padding: 0 24px; }
	.acp-scroll-cue { display: none; }
	.acp-hero-body .acp-btns { margin-top: 36px; }
}


/* =========================================================================
   8. Home sections
   ========================================================================= */

/* ---------- Showcase carousel (dark) ---------- */

.acp-carousel { position: relative; }
.acp-carousel > .acp-carousel-nav { position: absolute; right: 75px; top: -84px; }

.acp-track {
	display: flex;
	gap: 80px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-right: 75px;
	-webkit-overflow-scrolling: touch;
}

.acp-track::-webkit-scrollbar { display: none; }
.acp-track > * { flex: none; scroll-snap-align: start; }

.acp-shotcard { width: min(710px, 82vw); }

.acp-shotcard-img {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid var(--acp-card-line);
	background: var(--acp-card);
	aspect-ratio: 5 / 4;
}

.acp-shotcard-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	transition: transform var(--acp-ease);
}

.acp-shotcard:hover .acp-shotcard-img img { transform: scale(1.06); }
.acp-shotcard-img .acp-tags { position: absolute; left: 10px; bottom: 9px; }

.acp-shotcard-cat { margin: 40px 0 15px; color: var(--acp-muted); font-size: 1rem; }
.acp-shotcard h3 { margin: 0; font-size: 1.25rem; line-height: 26px; font-weight: 400; }
.acp-shotcard h3 a { color: var(--acp-fg); text-decoration: none; transition: color var(--acp-ease); }
.acp-shotcard h3 a:hover { color: var(--wp--preset--color--accent); }

/* The live chat preview as a carousel card. */
.acp-shotcard-mock .acp-mock { max-width: 430px; font-size: .8rem; }
.acp-shotcard-mock .acp-mock-body { padding: .9rem; gap: .5rem; }
.acp-shotcard-mock {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 22px 22px 0;
	background:
		radial-gradient(circle, rgba(255, 255, 255, .28) 1px, transparent 1.6px) 0 0 / 18px 18px,
		var(--wp--preset--color--dark-soft);
}

@media (max-width: 991px) {
	.acp-carousel > .acp-carousel-nav { position: static; margin: 0 0 24px; }
	.acp-track { gap: 20px; padding-right: 24px; }
}

/* ---------- About (light) ---------- */

.acp-about h2 { font-weight: 200; max-width: 1000px; margin: 0; }
.acp-about-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	max-width: 643px;
	margin: 13px 0 0 auto;
}
.acp-about-cols p { margin: 0; }
.acp-about-cols .acp-txtbtn { grid-column: 2; margin-top: 20px; justify-self: start; }

@media (max-width: 991px) {
	.acp-about-cols { grid-template-columns: 1fr; gap: 20px; margin: 30px 0 0; max-width: none; }
	.acp-about-cols .acp-txtbtn { grid-column: 1; }
}

/* ---------- Stats ---------- */

.acp-stats-head { margin: 120px 0 50px; font-size: 1.75rem; font-weight: 400; line-height: 36px; }

.acp-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 51px;
}

.acp-stat { min-height: 160px; padding: 26px 25px 24px 30px; background: var(--acp-stat); }
.acp-stat strong { display: block; font-size: 2.625rem; font-weight: 400; line-height: 50px; margin-bottom: 10px; }
.acp-stat span {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .875rem;
	font-weight: 300;
	line-height: 18px;
	color: var(--acp-fg);
}

@media (max-width: 1279px) { .acp-stats { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
@media (max-width: 767px) { .acp-stats { grid-template-columns: 1fr; gap: 32px; } .acp-stats-head { margin-top: 72px; } }

/* ---------- Services: three columns with a floating call to action ---------- */

.acp-services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px;
	align-items: start;
}

.acp-services .acp-lined { margin-bottom: 36px; }
.acp-services .acp-lined:last-child { margin-bottom: 0; }

.acp-svc { padding: 50px 50px 46px; }
.acp-svc img { display: block; width: 100%; border-radius: 10px; margin-bottom: 40px; aspect-ratio: 420 / 236; object-fit: cover; object-position: top; }

.acp-svc h3 { margin: 0 0 20px; font-size: 1.5rem; line-height: 32px; font-weight: 400; }
.acp-svc p { margin: 0 0 24px; color: var(--acp-muted); font-size: .9375rem; }
.acp-svc-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 30px; font-family: var(--wp--preset--font-family--mono); font-size: .8125rem; line-height: 18px; text-transform: uppercase; }
.acp-svc-cats a { display: inline-block; padding: 5px 0; color: var(--acp-fg); text-decoration: none; }
.acp-svc-cats a:hover { color: var(--wp--preset--color--accent-2); text-decoration: underline; }
/* No slash separators: in a narrow column each link wraps to its own line and
   a leading slash looked like a typo. The gap does the separating. */
.acp-svc-cats a { border-bottom: 1px dotted transparent; }
.acp-svc-cats a:hover { border-bottom-color: currentColor; }

.acp-float-cta {
	min-height: 225px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	padding: 28px;
	text-align: center;
	background: var(--acp-bg);
}

.acp-float-cta h3 { margin: 0; max-width: 316px; font-size: 1.25rem; line-height: 28px; font-weight: 400; }

@media (max-width: 1279px) { .acp-services { gap: 24px; } .acp-svc { padding: 32px; } }
@media (max-width: 991px) { .acp-services { grid-template-columns: 1fr; } .acp-services .acp-lined { margin-bottom: 24px; } }

/* ---------- Partner marquee (dark) ---------- */

.acp-partners .acp-sec-head h2 { font-size: 1.25rem; line-height: 26px; }
.acp-partners { padding-bottom: 86px; }
.acp-partners .acp-sec-head { margin-bottom: 0; }

.acp-marquee {
	--acp-marquee-dur: 60s;
	display: flex;
	gap: 10px;
	overflow: hidden;
	margin-top: 40px;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.acp-marquee + .acp-marquee { margin-top: 9px; }

.acp-marquee-track {
	display: flex;
	flex: none;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.acp-marquee-track li {
	flex: none;
	width: 214px;
	height: 98px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	border: 1px solid var(--acp-card-line);
	border-radius: 10px;
	background: var(--acp-raised);
	color: var(--acp-fg);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: -.01em;
	text-align: center;
	transition: opacity var(--acp-ease), border-color var(--acp-ease);
}

.acp-marquee-track li:hover { border-color: var(--acp-line-strong); }
.acp-marquee-track li small { display: block; font-family: var(--wp--preset--font-family--mono); font-size: .6875rem; font-weight: 400; letter-spacing: 0; text-transform: uppercase; color: #a9a9b4; margin-top: 4px; }

@media (prefers-reduced-motion: no-preference) {
	.acp-marquee.is-ready .acp-marquee-track { animation: acp-marquee var(--acp-marquee-dur) linear infinite; }
	.acp-marquee.is-reverse.is-ready .acp-marquee-track { animation-direction: reverse; }
	.acp-marquee:hover .acp-marquee-track { animation-play-state: paused; }
	@keyframes acp-marquee {
		from { transform: translateX(0); }
		to   { transform: translateX(calc(-100% - 10px)); }
	}
}

/* ---------- Comparison cards (dark) ---------- */

.acp-split-sec {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 80px;
	align-items: start;
}

.acp-split-sec .acp-sec-head { margin-bottom: 0; }
.acp-split-sec .acp-sec-head p { font-size: .9375rem; }
.acp-split-sec .acp-join { margin-top: 56px; }
.acp-split-sec .acp-join h3 { font-size: 1.25rem; line-height: 28px; font-weight: 400; margin: 0 0 24px; max-width: 320px; }

.acp-cmp3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.acp-cmp3 .acp-card { padding: 40px 30px 38px; height: 100%; }
.acp-cmp3 h3 { font-size: 1.0625rem; line-height: 24px; font-weight: 400; margin: 0 0 26px; }
.acp-cmp3 dl { margin: 0; }
.acp-cmp3 dt { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; line-height: 18px; text-transform: uppercase; color: var(--acp-muted); margin: 0 0 4px; }
.acp-cmp3 dt.is-us { color: var(--wp--preset--color--accent); }
.acp-cmp3 dd { margin: 0 0 22px; font-size: .9375rem; line-height: 24px; }
.acp-cmp3 dd:last-child { margin-bottom: 0; color: var(--acp-muted); }

@media (max-width: 1279px) { .acp-cmp3 { grid-template-columns: 1fr; gap: 24px; } .acp-split-sec { gap: 48px; } }
@media (max-width: 991px) { .acp-split-sec { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- FAQ accordion ---------- */

.acp-faq { display: grid; grid-template-columns: 380px 1fr; gap: 80px; align-items: start; }
.acp-faq .acp-sec-head { margin-bottom: 0; }
.acp-faq .acp-sec-head p { font-size: .9375rem; }
.acp-faq .acp-sec-head .acp-ask { margin-top: 28px; font-size: .9375rem; color: var(--acp-fg); }
.acp-acc-list { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 991px) { .acp-faq { grid-template-columns: 1fr; gap: 40px; } }

details.wp-block-details,
details.acp-acc {
	position: relative;
	margin: 0 0 10px;
	padding: 30px 40px 26px 30px;
	border: 1px solid var(--acp-card-line);
	border-radius: 10px;
	background: var(--acp-card);
	color: var(--acp-fg);
	transition: border-color var(--acp-ease);
}

.acp-dark details.wp-block-details, .acp-dark details.acp-acc, .acp-hero details.wp-block-details { border-color: transparent; }
.acp-acc-list details { margin: 0; }

details.wp-block-details summary,
details.acp-acc summary {
	position: relative;
	list-style: none;
	padding-right: 36px;
	cursor: pointer;
	font-size: 1.0625rem;
	font-weight: 300;
	line-height: 24px;
	color: var(--acp-fg);
}

details.wp-block-details summary::-webkit-details-marker,
details.acp-acc summary::-webkit-details-marker { display: none; }

details.wp-block-details summary::after,
details.acp-acc summary::after {
	content: "";
	position: absolute;
	right: -2px;
	top: 4px;
	width: 16px;
	height: 16px;
	background: var(--acp-plus-light) center / contain no-repeat;
	transition: transform var(--acp-ease);
}

details.wp-block-details[open] summary::after,
details.acp-acc[open] summary::after { transform: rotate(45deg); }

/* motion.js wraps the answer so its height can animate. */
.acp-acc-body { overflow: hidden; transition: height .3s ease-out; }
details .acp-acc-body > *:first-child, details[open] > summary + * { margin-top: 12px; }
details .acp-acc-body p, details.wp-block-details > p { margin: 12px 0 0; color: var(--acp-muted); font-size: 1rem; line-height: 24px; }
details .acp-acc-body a, details.wp-block-details a { color: var(--acp-muted); text-decoration: underline; }
details .acp-acc-body a:hover { color: var(--wp--preset--color--accent); }

/* ---------- Insights (blog cards) ---------- */

.acp-postgrid, .acp-insights-grid { gap: 30px !important; }

.acp-postcard { padding: 38px 30px 34px; height: 100%; }
.acp-postcard .acp-cardmeta { margin: 0 0 20px; }
.acp-postcard .wp-block-post-title, .acp-postcard h3 { font-size: 1.25rem; line-height: 28px; font-weight: 400; margin: 0 0 12px; }
.acp-postcard .wp-block-post-title a, .acp-postcard h3 a { color: var(--acp-fg); text-decoration: none; transition: color var(--acp-ease); }
.acp-postcard .wp-block-post-title a:hover, .acp-postcard h3 a:hover { color: var(--wp--preset--color--accent-2); }
.acp-postcard .wp-block-post-excerpt, .acp-postcard p { color: var(--acp-muted); font-size: .9375rem; }
.acp-postcard .wp-block-post-excerpt__more-text { display: none; }
.acp-postcard .wp-block-post-date { margin-top: 18px; font-family: var(--wp--preset--font-family--mono); font-size: .75rem; text-transform: uppercase; color: var(--acp-muted); }

.acp-cardmeta { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; }
.acp-cardmeta .acp-chip { background: var(--acp-raised); color: var(--acp-fg); border: 1px solid var(--acp-card-line); }
.acp-card-time { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; text-transform: uppercase; color: var(--acp-muted); }

.wp-block-post-title a { color: var(--acp-fg); text-decoration: none; }
.wp-block-post-title a:hover { color: var(--wp--preset--color--accent-2); }

.wp-block-post-template .wp-block-post-date { font-size: .75rem; font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; color: var(--acp-muted); }

/* Pagination. */
.wp-block-query-pagination { font-family: var(--wp--preset--font-family--mono); font-size: .8125rem; text-transform: uppercase; }
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	padding: .55rem .8rem;
	border-radius: 6px;
	border: 1px solid var(--acp-line);
	color: var(--acp-fg);
	text-decoration: none;
	transition: background-color var(--acp-ease), border-color var(--acp-ease);
}
.wp-block-query-pagination a:hover { background: var(--acp-raised); border-color: var(--acp-line-strong); }
.wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); }
.wp-block-query-pagination-numbers { display: flex; gap: 6px; }

/* ---------- Closing band: two cards ---------- */

.acp-close { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; align-items: stretch; }
.acp-close .acp-card { padding: 60px 60px 56px; }
.acp-close .acp-card.acp-dark { --acp-bg: var(--wp--preset--color--dark); background: var(--wp--preset--color--dark); border-color: var(--wp--preset--color--dark); }
.acp-close .acp-card.acp-dark::before, .acp-close .acp-card.acp-dark::after { background: var(--acp-close-bg, var(--wp--preset--color--soft)); border-color: var(--wp--preset--color--dark); }
.acp-close h2 { font-size: 1.75rem; line-height: 36px; font-weight: 400; margin: 0 0 20px; max-width: 500px; }
.acp-close p { margin: 0 0 24px; color: var(--acp-muted); }
.acp-close ol { margin: 0 0 36px; padding: 0; list-style: none; counter-reset: acp-step; display: grid; gap: 16px; }
.acp-close ol li { position: relative; padding-left: 52px; counter-increment: acp-step; font-size: .9375rem; line-height: 24px; }
.acp-close ol li::before {
	content: counter(acp-step);
	position: absolute;
	left: 0;
	top: -4px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	background: var(--acp-btn-square);
	color: var(--acp-btn-square-fg);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
}
.acp-close ol li strong { font-weight: 500; }
.acp-close .acp-facts { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 14px; }
.acp-close .acp-facts li { position: relative; padding-left: 22px; font-size: .9375rem; line-height: 24px; color: var(--acp-muted); }
.acp-close .acp-facts li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--accent); }
.acp-close .acp-facts strong { color: var(--acp-fg); font-weight: 500; }
.acp-closing { padding-bottom: 64px; }
.acp-cta-ver { margin: 28px 0 0; font-family: var(--wp--preset--font-family--mono); font-size: .75rem; text-transform: uppercase; color: var(--acp-muted); }
.acp-cta-ver a { color: var(--acp-fg); text-decoration: underline; }

@media (max-width: 991px) { .acp-close { grid-template-columns: 1fr; } .acp-close .acp-card { padding: 40px 28px; } }


/* =========================================================================
   9. Pricing
   ========================================================================= */

.acp-billing {
	display: flex;
	width: fit-content;
	gap: 0;
	margin: 1.75rem auto 0;
	border: 1px solid var(--acp-line);
	border-radius: 6px;
	background: var(--acp-raised);
	overflow: hidden;
}

.acp-billing button {
	border: 0;
	background: transparent;
	padding: 12px 22px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	line-height: 18px;
	text-transform: uppercase;
	color: var(--acp-muted);
	cursor: pointer;
	transition: background-color var(--acp-ease), color var(--acp-ease);
}

.acp-billing button + button { border-left: 1px solid var(--acp-line); }
.acp-billing button.is-active { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); }

.acp-price { margin: 22px 0 6px; font-size: 2.625rem; font-weight: 400; line-height: 50px; letter-spacing: 0; }
.acp-price small, .acp-price-term { display: block; margin-top: 4px; font-family: var(--wp--preset--font-family--mono); font-size: .75rem; font-weight: 400; text-transform: uppercase; color: var(--acp-muted); }
.acp-plan-featured { position: relative; }

.acp-badge {
	position: absolute;
	top: 22px;
	right: 30px;
	display: inline-block;
	padding: 6px 10px;
	border-radius: 5px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	line-height: 18px;
	text-transform: uppercase;
}

.acp-trial-cta { margin-top: 40px; }
.acp-hero .is-style-card, .acp-hero .is-style-card-accent { text-align: left; }
.acp-hero .is-style-card .wp-block-buttons, .acp-hero .is-style-card-accent .wp-block-buttons { justify-content: flex-start; }

/* The estimator: a dark card with the figure as its headline. */
.acp-calc {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	padding: 50px;
	border-radius: 10px;
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
	--acp-muted: var(--wp--preset--color--dark-muted);
	--acp-line: var(--wp--preset--color--dark-border);
}

@media (max-width: 781px) { .acp-calc { grid-template-columns: 1fr; padding: 32px 24px; } }

.acp-calc-controls label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	line-height: 18px;
	text-transform: uppercase;
	color: var(--acp-muted);
	margin-bottom: .6rem;
}

.acp-calc-controls label strong { color: var(--wp--preset--color--base); font-weight: 400; }
.acp-calc-controls input[type="range"] { width: 100%; margin-bottom: 1.6rem; accent-color: var(--wp--preset--color--accent); }

.acp-calc-controls select {
	width: 100%;
	padding: .7rem 0;
	border: 0;
	border-bottom: 1px solid var(--acp-muted);
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--base);
}

.acp-calc-controls select option { color: var(--wp--preset--color--ink); }
.acp-calc-out { padding: 30px; border: 1px solid var(--acp-card-line); border-radius: 10px; background: var(--wp--preset--color--dark-card); text-align: center; }
.acp-calc-figure { font-size: 3.25rem; font-weight: 400; line-height: 1.05; letter-spacing: 0; }
.acp-calc-sub { margin-top: .5rem; font-family: var(--wp--preset--font-family--mono); font-size: .75rem; text-transform: uppercase; color: var(--acp-muted); }
.acp-calc-math { margin: .8rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--acp-muted); font-variant-numeric: tabular-nums; }
.acp-calc-note { margin: 1rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--acp-muted); }


/* =========================================================================
   10. Tables, notes, forms
   ========================================================================= */

.acp-vs, .acp-doctable {
	overflow-x: auto;
	border: 1px solid var(--acp-card-line);
	border-radius: 10px;
	background: var(--acp-card);
	margin: var(--wp--preset--spacing--40) 0;
}

.acp-vs table, .acp-doctable table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.acp-vs table { min-width: 640px; }

.acp-vs th, .acp-vs td, .acp-doctable th, .acp-doctable td {
	padding: .9rem 1.2rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--acp-line);
	line-height: 1.5;
}

.acp-vs thead th, .acp-doctable th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--acp-muted);
	background: var(--acp-raised);
	white-space: nowrap;
}

.acp-vs thead th.us { color: var(--wp--preset--color--accent-2); }
.acp-vs tbody tr:last-child td, .acp-vs tbody tr:last-child th, .acp-doctable tr:last-child td { border-bottom: 0; }
.acp-vs tbody tr, .acp-doctable tbody tr { transition: background-color var(--acp-ease); }
.acp-vs tbody tr:hover, .acp-doctable tbody tr:hover { background: var(--acp-raised); }
.acp-vs td.us { background: var(--wp--preset--color--accent-soft); font-weight: 400; }
.acp-vs th:first-child, .acp-vs td:first-child, .acp-doctable td:first-child {
	position: sticky;
	left: 0;
	background: var(--acp-card);
	font-weight: 400;
	color: var(--acp-fg);
	min-width: 170px;
}
.acp-vs thead th:first-child { background: var(--acp-raised); }
.acp-doctable td:first-child { white-space: nowrap; }
@media (max-width: 600px) { .acp-doctable td:first-child { white-space: normal; } }

.acp-vs:focus-visible, .acp-doctable:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

.acp-note, .acp-verdict, .acp-doc-help, .acp-form-context {
	padding: 1.2rem 1.4rem;
	border: 1px solid var(--acp-card-line);
	border-left: 2px solid var(--wp--preset--color--accent);
	border-radius: 0 10px 10px 0;
	background: var(--acp-raised);
	font-size: .9375rem;
	color: var(--acp-muted);
	margin: var(--wp--preset--spacing--40) 0;
}

.acp-note strong, .acp-verdict strong { color: var(--acp-fg); font-weight: 500; }
.acp-verdict p:last-child, .acp-doc-help p { margin: 0; }
.acp-form-context { margin: 0 0 1.2rem; }

.acp-checked {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: 6px 10px;
	border: 1px solid var(--acp-card-line);
	border-radius: 5px;
	background: var(--acp-raised);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	text-transform: uppercase;
	color: var(--acp-muted);
}

/* Forms: labels in mono, fields as a single hairline. */
.acp-form { display: grid; gap: 1.6rem; max-width: 640px; padding: 50px 50px 46px; border-radius: 10px; background: var(--wp--preset--color--dark); color: var(--wp--preset--color--base); --acp-muted: var(--wp--preset--color--dark-muted); }

.acp-form label {
	display: block;
	margin-bottom: .2rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	line-height: 18px;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
}

.acp-form input,
.acp-form select,
.acp-form textarea {
	width: 100%;
	padding: 9px 0 8px;
	border: 0;
	border-bottom: 1px solid var(--acp-muted);
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: 1rem;
	font-weight: 300;
	color: var(--wp--preset--color--base);
	transition: border-color var(--acp-ease);
}

.acp-form input::placeholder, .acp-form textarea::placeholder { color: var(--acp-muted); }
.acp-form select option { color: var(--wp--preset--color--ink); }
.acp-form input:focus, .acp-form select:focus, .acp-form textarea:focus { outline: none; border-bottom-color: var(--wp--preset--color--accent); }
.acp-form textarea { min-height: 130px; resize: vertical; }
.acp-form .acp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.acp-form button { justify-self: start; }
.acp-form-privacy { margin: 0; font-size: .8125rem; line-height: 1.6; color: var(--acp-muted); }
.acp-form-privacy a { color: var(--wp--preset--color--base); text-decoration: underline; }
.acp-form-context { background: var(--wp--preset--color--dark-card); border-color: var(--wp--preset--color--dark-border); color: var(--acp-muted); }

@media (max-width: 781px) { .acp-form { padding: 32px 24px; } }

/* Core search block (404, search results). */
.wp-block-search__inside-wrapper { border: 0 !important; padding: 0 !important; gap: 12px; }
.wp-block-search__input {
	padding: 10px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--acp-fg) !important;
	border-radius: 0 !important;
	background: transparent !important;
	font: inherit;
	font-size: 1rem;
	color: var(--acp-fg);
}
.wp-block-search__input:focus { outline: none; border-bottom-color: var(--wp--preset--color--accent) !important; }
.wp-block-search__button svg { display: none; }
.wp-block-search__button::after { content: "Search"; }


/* =========================================================================
   11. Interior page components
   ========================================================================= */

/* ---------- Trust / integration rows (feature hub) ---------- */

.acp-logos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.acp-logos li {
	padding: 22px 26px;
	border: 1px solid var(--acp-card-line);
	border-radius: 10px;
	background: var(--acp-raised);
	color: var(--acp-fg);
	font-size: 1rem;
	font-weight: 500;
	white-space: nowrap;
	transition: border-color var(--acp-ease);
}
.acp-logos li:hover { border-color: var(--acp-line-strong); }

/* ---------- Chat mock ---------- */

.acp-mock {
	position: relative;
	max-width: 460px;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--dark-border);
	border-radius: 10px;
	background: var(--wp--preset--color--dark-card);
	color: var(--wp--preset--color--base);
	font-size: .9rem;
	text-align: left;
}

.acp-mock-wrap { position: relative; }

.acp-mock-head {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .85rem 1.1rem;
	border-bottom: 1px solid var(--wp--preset--color--dark-border);
	background: var(--wp--preset--color--dark);
}

.acp-mock-ava {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

.acp-mock-ava svg { width: 18px; height: 18px; }
.acp-mock-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.acp-mock-id b { font-weight: 500; font-size: .95rem; }
.acp-mock-id i { display: inline-flex; align-items: center; gap: .35rem; font-style: normal; font-family: var(--wp--preset--font-family--mono); font-size: .68rem; text-transform: uppercase; color: var(--wp--preset--color--dark-muted); }
.acp-mock-dot { width: .45rem; height: .45rem; border-radius: 999px; background: #4ade80; }
.acp-showcase .acp-shotcard-mock { background-color: var(--wp--preset--color--dark-soft); border-color: var(--acp-card-line); }

.acp-mock-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem; }

.acp-bbl { max-width: 84%; padding: .65rem .9rem; border-radius: 10px; line-height: 1.5; font-weight: 300; }
.acp-bbl.bot { align-self: flex-start; background: var(--wp--preset--color--dark-soft); border: 1px solid var(--wp--preset--color--dark-border); border-bottom-left-radius: 3px; }
.acp-bbl.user { align-self: flex-end; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); border-bottom-right-radius: 3px; font-weight: 400; }

.acp-mock-cards { display: flex; gap: .5rem; overflow: hidden; }
.acp-mock-card { flex: 1; padding: .55rem; border: 1px solid var(--wp--preset--color--dark-border); border-radius: 6px; background: var(--wp--preset--color--dark-soft); font-size: .75rem; line-height: 1.35; }
.acp-mock-card .thumb { display: flex; align-items: center; justify-content: center; height: 56px; margin-bottom: .4rem; border-radius: 4px; background: var(--wp--preset--color--dark-card); color: var(--wp--preset--color--accent); }
.acp-mock-card .thumb svg { width: 34px; height: 34px; opacity: .9; }
.acp-mock-card b { display: block; font-weight: 500; }
.acp-mock-card span { color: var(--wp--preset--color--dark-muted); }

.acp-typing { display: inline-flex; gap: 5px; align-items: center; padding: .8rem 1rem; }
.acp-typing span { width: 6px; height: 6px; border-radius: 999px; background: var(--wp--preset--color--dark-muted); opacity: .5; }

@media (prefers-reduced-motion: no-preference) {
	.acp-typing span { animation: acp-blink 1.2s infinite ease-in-out; }
	.acp-typing span:nth-child(2) { animation-delay: .18s; }
	.acp-typing span:nth-child(3) { animation-delay: .36s; }
	@keyframes acp-blink {
		0%, 60%, 100% { opacity: .35; transform: translateY(0); }
		30% { opacity: 1; transform: translateY(-3px); }
	}
}

[data-acp-live] .acp-mock-body { transition: opacity .35s ease; }
[data-acp-live] .acp-mock-body.is-clearing { opacity: 0; }
[data-acp-live] .acp-mock-body > .is-hidden { display: none; }
[data-acp-live] .is-in { animation: acp-msg-in .32s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes acp-msg-in { from { opacity: 0; transform: translateY(9px) scale(.985); } }
[data-acp-live] .acp-mock-cards.is-in .acp-mock-card { animation: acp-msg-in .34s ease-out both; }
[data-acp-live] .acp-mock-cards.is-in .acp-mock-card:nth-child(2) { animation-delay: .14s; }
[data-acp-live] .acp-bbl.user.is-typing::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 2px;
	vertical-align: -0.15em;
	background: currentColor;
	animation: acp-caret .85s step-end infinite;
}
@keyframes acp-caret { 50% { opacity: 0; } }

/* ---------- Trust pills (older hero markup) ---------- */

.acp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.acp-trust-pill {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: 6px 12px;
	border: 1px solid var(--acp-line);
	border-radius: 5px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	text-transform: uppercase;
	color: var(--acp-fg);
}
.acp-trust-pill svg { width: 14px; height: 14px; color: var(--wp--preset--color--accent); flex: none; }

/* ---------- Product screenshots ---------- */

.acp-shot {
	margin: 0 auto;
	max-width: 980px;
	overflow: hidden;
	border: 1px solid var(--acp-card-line);
	border-radius: 10px;
	background: var(--acp-card);
}

.acp-shot-bar { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--acp-line); background: var(--acp-raised); }
.acp-shot-bar i { width: 8px; height: 8px; border-radius: 999px; background: var(--acp-line-strong); }
.acp-shot img { display: block; width: 100%; height: auto; }
.acp-shot figcaption {
	padding: .8rem 1.1rem;
	border-top: 1px solid var(--acp-line);
	background: var(--acp-raised);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	text-transform: uppercase;
	color: var(--acp-muted);
	text-align: center;
}

/* ---------- Feature page: anchors, sidebar ---------- */

.acp-anchors { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.acp-anchors a, .acp-anchors button {
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid var(--acp-card-line);
	border-radius: 5px;
	background: var(--acp-raised);
	color: var(--acp-fg);
	font: inherit;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	line-height: 18px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--acp-ease), background-color var(--acp-ease);
}
.acp-anchors a:hover, .acp-anchors button:hover { border-color: var(--wp--preset--color--accent); background: var(--wp--preset--color--accent-soft); text-decoration: none; }
.acp-anchors-wrap .acp-eyebrow { margin-bottom: 0; }

.acp-side {
	position: sticky;
	top: calc(var(--acp-header-h) + 20px);
	align-self: flex-start;
	display: grid;
	gap: 14px;
}

@media (max-width: 781px) { .acp-side { position: static; max-height: none; } }

.acp-side-box, .acp-pagetoc, .acp-toc {
	padding: 1.2rem 1.3rem;
	border: 1px solid var(--acp-card-line);
	border-radius: 10px;
	background: var(--acp-card);
}

.acp-side-title, .acp-toc-title {
	margin: 0 0 .7rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--acp-muted);
}

.acp-side-box ul, .acp-toc ul, .acp-pagetoc ul { list-style: none; margin: 0; padding: 0; }
.acp-side-box li, .acp-toc li { margin: 0; }
.acp-toc li.lvl-3 { padding-left: 1rem; }

.acp-side-box a, .acp-docs-side .acp-toc a {
	display: block;
	padding: .35rem .5rem .35rem .7rem;
	border-left: 1px solid transparent;
	font-size: .875rem;
	color: var(--acp-muted);
	text-decoration: none;
	transition: color var(--acp-ease), border-color var(--acp-ease);
}

.acp-side-box a:hover, .acp-docs-side .acp-toc a:hover { color: var(--acp-fg); }
.acp-side-box a.is-current, .acp-docs-side .acp-toc a.is-current { color: var(--acp-fg); border-left-color: var(--wp--preset--color--accent); }
.acp-side-all a { color: var(--wp--preset--color--accent-2); }
.acp-side-cta p { margin: 0 0 .8rem; font-size: .875rem; line-height: 1.55; color: var(--acp-muted); }
.acp-side-cta .acp-btn-cta, .acp-side-cta .acp-btn-quiet { display: flex; justify-content: center; margin-bottom: 10px; }
.acp-side-cta .acp-btn-quiet { margin-bottom: 0; color: var(--acp-fg); text-align: center; }
.acp-side-links { display: flex; flex-direction: column; gap: .4rem; }
.acp-side-links a { font-size: .875rem; color: var(--acp-fg); text-decoration: underline; }
.acp-feature-main > *:first-child { margin-top: 0; }
.acp-feature-main .acp-shot { margin: 2rem 0; max-width: none; }
.acp-feature-main details.wp-block-details { max-width: none; }

.acp-pagetoc .acp-eyebrow { margin-bottom: .6rem; }
.acp-pagetoc ul { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.acp-pagetoc a { font-size: .9375rem; color: var(--acp-muted); text-decoration: none; border-bottom: 1px dotted var(--acp-muted); }
.acp-pagetoc a:hover { color: var(--acp-fg); border-bottom-style: solid; }

.acp-toc { margin-bottom: var(--wp--preset--spacing--40); font-size: .9375rem; background: var(--acp-raised); }
.acp-toc a { color: var(--acp-fg); text-decoration: none; }
.acp-toc a:hover { color: var(--wp--preset--color--accent-2); }

/* ---------- Documentation ---------- */

.acp-docs .wp-block-columns { align-items: flex-start; }

.acp-docs-side {
	position: sticky;
	top: calc(var(--acp-header-h) + 20px);
	align-self: flex-start;
	max-height: calc(100vh - var(--acp-header-h) - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-bottom: 1rem;
	scrollbar-width: thin;
}

@media (max-width: 781px) { .acp-docs-side { position: static; max-height: none; } }

.acp-docnav { font-size: .9375rem; }
.acp-docnav-group { border: 0; padding: 0; margin: 0 0 .35rem; background: none; }
.acp-docnav-group > summary {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .45rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	text-transform: uppercase;
	color: var(--acp-fg);
}
.acp-docnav-group > summary::-webkit-details-marker { display: none; }
.acp-docnav-group > summary::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	background: var(--acp-plus-light) center / contain no-repeat;
	transition: transform var(--acp-ease);
}
.acp-docnav-group[open] > summary::before { transform: rotate(45deg); }
.acp-docnav ul { list-style: none; margin: 0 0 .6rem; padding: 0 0 0 1rem; border-left: 1px dotted var(--acp-muted); }
.acp-docnav li { margin: 0; }
.acp-docnav li a { display: block; padding: .3rem .5rem; color: var(--acp-muted); text-decoration: none; line-height: 1.4; transition: color var(--acp-ease); }
.acp-docnav li a:hover { color: var(--acp-fg); text-decoration: none; }
.acp-docnav li.is-current a { color: var(--wp--preset--color--accent-2); }
.acp-docnav-wrap { border: 0; padding: 0; margin: 0; background: none; }
.acp-docnav-wrap > summary { display: none; }
.acp-docnav-all {
	display: block;
	margin: 0 0 .6rem auto;
	padding: 6px 10px;
	border: 1px solid var(--acp-card-line);
	border-radius: 5px;
	background: var(--acp-raised);
	font: inherit;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6875rem;
	text-transform: uppercase;
	color: var(--acp-muted);
	cursor: pointer;
}
.acp-docnav-all:hover { color: var(--acp-fg); border-color: var(--acp-line-strong); }

@media (max-width: 781px) {
	.acp-docnav-wrap > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: .8rem;
		padding: .8rem 1rem;
		border: 1px solid var(--acp-card-line);
		border-radius: 6px;
		background: var(--acp-raised);
		cursor: pointer;
		list-style: none;
		font-family: var(--wp--preset--font-family--mono);
		font-size: .8125rem;
		text-transform: uppercase;
		color: var(--acp-fg);
	}
	.acp-docnav-wrap > summary::-webkit-details-marker { display: none; }
	.acp-docnav-wrap > summary::after { content: ""; width: 12px; height: 12px; background: var(--acp-plus-light) center / contain no-repeat; }
	.acp-docnav-wrap[open] > summary::after { transform: rotate(45deg); }
}

.acp-crumbs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-family: var(--wp--preset--font-family--mono); font-size: .75rem; text-transform: uppercase; color: var(--acp-muted); }
.acp-crumbs a { color: var(--acp-muted); text-decoration: none; }
.acp-crumbs a:hover { color: var(--wp--preset--color--accent-2); }
.acp-crumbs .sep { opacity: .5; }

.acp-doc-body :where(h2) { font-size: clamp(1.4rem, 1.25rem + .6vw, 1.7rem); font-weight: 400; margin-top: 2.4em; margin-bottom: .55em; scroll-margin-top: calc(var(--acp-header-h) + 20px); }
.acp-doc-body :where(h3) { font-size: clamp(1.1rem, 1.04rem + .3vw, 1.25rem); font-weight: 400; margin-top: 1.9em; margin-bottom: .45em; scroll-margin-top: calc(var(--acp-header-h) + 20px); }
.acp-doc-body :where(h4) { font-size: 1.05rem; margin-top: 1.6em; }
.acp-doc-body :where(p, li) { font-size: 1rem; line-height: 1.75; }
.acp-doc-body :where(ul, ol) { padding-left: 1.35rem; }
.acp-doc-body :where(li + li) { margin-top: .45em; }
.acp-doc-body :where(ul, ol, p) { margin-bottom: 1.15em; }
.acp-doc-body :where(p) { text-wrap: pretty; }
.acp-doc-body :where(code) { font-family: var(--wp--preset--font-family--mono); font-size: .875em; padding: .1em .35em; border-radius: 4px; background: var(--acp-raised); border: 1px solid var(--acp-card-line); }

.acp-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: var(--wp--preset--spacing--50); }
.acp-prevnext a {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--acp-card-line);
	border-radius: 10px;
	background: var(--acp-card);
	text-decoration: none;
	transition: border-color var(--acp-ease);
}
.acp-prevnext a:hover { border-color: var(--wp--preset--color--accent); text-decoration: none; }
.acp-prevnext a.next { text-align: right; }
.acp-prevnext span { font-family: var(--wp--preset--font-family--mono); font-size: .6875rem; text-transform: uppercase; color: var(--acp-muted); }
.acp-prevnext a.prev span::before { content: "\2190\00a0"; }
.acp-prevnext a.next span::after { content: "\00a0\2192"; }
.acp-prevnext strong { font-size: .9375rem; font-weight: 400; color: var(--acp-fg); line-height: 1.35; }

.acp-doc-help { margin-top: var(--wp--preset--spacing--40); }
.acp-doc-updated { margin-top: .5rem !important; font-family: var(--wp--preset--font-family--mono); font-size: .75rem; text-transform: uppercase; color: var(--acp-muted); }

.acp-docgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; align-items: start; }
.acp-docgroup { position: relative; padding: 1.6rem 1.7rem 1.2rem; border: 1px solid var(--acp-card-line); border-radius: 10px; background: var(--acp-card); transition: border-color var(--acp-ease); }
.acp-docgroup:hover { border-color: var(--acp-line-strong); }
.acp-docgroup h2 { font-size: 1.25rem !important; font-weight: 400; margin: 0 0 .3rem !important; }
.acp-docgroup h2 a { color: var(--acp-fg); text-decoration: none; }
.acp-docgroup h2 a:hover { color: var(--wp--preset--color--accent-2); }
.acp-docgroup-desc { margin: 0 0 .6rem; padding-bottom: .8rem; border-bottom: 1px dotted var(--acp-muted); font-size: .8125rem; line-height: 1.55; color: var(--acp-muted); }
.acp-docgroup ul { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.acp-docgroup li { margin: 0; }
.acp-docgroup li + li { border-top: 1px solid var(--acp-line); }
.acp-docgroup li a { display: block; padding: .65rem 0; color: var(--acp-fg); text-decoration: none; transition: color var(--acp-ease); }
.acp-docgroup li a:hover { color: var(--wp--preset--color--accent-2); text-decoration: none; }
.acp-docgroup-ex { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.5; color: var(--acp-muted); }

/* Docs search. */
.acp-docsearch { position: relative; margin: 0 0 1.1rem; }
.acp-docsearch form { position: relative; display: block; margin: 0; }
.acp-docsearch input[type="search"] {
	width: 100%;
	box-sizing: border-box;
	padding: .65rem 2.4rem .65rem 0;
	border: 0;
	border-bottom: 1px solid var(--acp-fg);
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: 1rem;
	color: var(--acp-fg);
	appearance: none;
}
.acp-docsearch input[type="search"]::placeholder { color: var(--acp-muted); }
.acp-docsearch input[type="search"]:focus { outline: none; border-bottom-color: var(--wp--preset--color--accent); }
.acp-docsearch kbd {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	padding: .2rem .4rem;
	border: 1px solid var(--acp-card-line);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6875rem;
	line-height: 1;
	color: var(--acp-muted);
	pointer-events: none;
}
.acp-docsearch input[type="search"]:focus ~ kbd, .acp-docsearch.is-open kbd { opacity: 0; }
.acp-docsearch-results {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: min(60vh, 420px);
	overflow-y: auto;
	padding: .4rem;
	border: 1px solid var(--acp-card-line);
	border-radius: 10px;
	background: var(--acp-card);
}
.acp-docsearch-group { margin: .6rem .5rem .3rem; font-family: var(--wp--preset--font-family--mono); font-size: .6875rem; text-transform: uppercase; color: var(--acp-muted); }
.acp-docsearch-hit { display: block; padding: .55rem .6rem; border-radius: 6px; text-decoration: none; color: var(--acp-fg); }
.acp-docsearch-hit strong { display: block; font-size: .9375rem; font-weight: 400; line-height: 1.35; }
.acp-docsearch-anchor { display: block; margin-top: 1px; font-size: .8125rem; color: var(--wp--preset--color--accent-2); }
.acp-docsearch-anchor::before { content: "# "; opacity: .6; }
.acp-docsearch-ex { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.45; color: var(--acp-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.acp-docsearch-hit:hover, .acp-docsearch-hit.is-active { background: var(--acp-raised); text-decoration: none; }
.acp-docsearch-hit mark { background: var(--wp--preset--color--accent-soft); color: inherit; padding: 0 1px; }
.acp-docsearch-empty { margin: 0; padding: .7rem .6rem; font-size: .875rem; color: var(--acp-muted); }
.acp-hero .acp-docsearch { max-width: 520px; margin: var(--wp--preset--spacing--40) auto 0; }
.acp-hero .acp-docsearch input[type="search"] { font-size: 1.0625rem; }

/* ---------- Feature hub, comparison hub, 404, watch cards, steps ---------- */

.acp-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px 24px; }
.acp-cmpgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 30px; align-items: start; }
.acp-watch { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px 24px; margin-top: var(--wp--preset--spacing--40); }
.acp-steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px 24px; margin-top: var(--wp--preset--spacing--40); }
.acp-404-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; max-width: 760px; margin: var(--wp--preset--spacing--50) auto 0; text-align: left; }
.acp-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; margin-top: .8rem; }

.acp-fcard, .acp-cmpcard, .acp-watch-card, .acp-steps3 > div, .acp-404-links a, .acp-related-grid a, .acp-cmpmethod {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: 1.6rem 1.7rem 1.5rem;
	border: 1px solid var(--acp-card-line);
	border-radius: 10px;
	background: var(--acp-card);
	color: var(--acp-fg);
	text-decoration: none;
	transition: border-color var(--acp-ease);
}

.acp-fcard::before, .acp-fcard::after,
.acp-cmpcard::before, .acp-cmpcard::after,
.acp-watch-card::before, .acp-watch-card::after,
.acp-steps3 > div::before, .acp-steps3 > div::after,
.acp-404-links a::before, .acp-404-links a::after,
.acp-related-grid a::before, .acp-related-grid a::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 30px;
	height: 15px;
	transform: translateX(-50%);
	background: var(--acp-bg);
	border: 1px solid var(--acp-card-line);
	pointer-events: none;
	transition: border-color var(--acp-ease);
}
.acp-fcard::before, .acp-cmpcard::before, .acp-watch-card::before, .acp-steps3 > div::before, .acp-404-links a::before, .acp-related-grid a::before { top: -1px; border-top: 0; border-radius: 0 0 15px 15px; }
.acp-fcard::after, .acp-cmpcard::after, .acp-watch-card::after, .acp-steps3 > div::after, .acp-404-links a::after, .acp-related-grid a::after { bottom: -1px; border-bottom: 0; border-radius: 15px 15px 0 0; }

.acp-fcard:hover, .acp-cmpcard:hover, .acp-404-links a:hover, .acp-related-grid a:hover { border-color: var(--wp--preset--color--accent); text-decoration: none; }
.acp-fcard:hover::before, .acp-fcard:hover::after, .acp-cmpcard:hover::before, .acp-cmpcard:hover::after,
.acp-404-links a:hover::before, .acp-404-links a:hover::after, .acp-related-grid a:hover::before, .acp-related-grid a:hover::after { border-color: var(--wp--preset--color--accent); }

.acp-fcard-eyebrow, .acp-cmpcard-kind, .acp-result-kind {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6875rem;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--acp-muted);
}

.acp-cmpcard-kind { display: inline-block; align-self: flex-start; padding: 5px 9px; border: 1px solid var(--acp-card-line); border-radius: 5px; background: var(--acp-raised); margin-bottom: .6rem; }
.acp-fcard strong, .acp-cmpcard-title, .acp-watch-card strong, .acp-steps3 strong, .acp-404-links strong, .acp-related-grid strong {
	display: block;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--acp-fg);
}
.acp-cmpcard-title em { font-style: normal; font-weight: 200; color: var(--acp-muted); padding: 0 .15rem; }
.acp-fcard-ex, .acp-cmpcard-ex, .acp-watch-card p, .acp-steps3 span:not(.acp-steps3-n), .acp-404-links span, .acp-related-grid span {
	flex: 1 1 auto;
	display: block;
	margin: .3rem 0 1rem;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--acp-muted);
}
.acp-watch-card p, .acp-404-links span, .acp-related-grid span { margin-bottom: 0; }
.acp-fcard-go, .acp-cmpcard-go {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	text-transform: uppercase;
	color: var(--acp-fg);
}
.acp-fcard-go svg, .acp-cmpcard-go svg { display: none; }
.acp-fcard-go::after, .acp-cmpcard-go::after {
	content: "";
	width: 36px;
	height: 36px;
	border-radius: 3px;
	background: var(--acp-btn-square) var(--acp-arrow-light) center / 16px no-repeat;
	transition: background-color var(--acp-ease);
}
.acp-fcard:hover .acp-fcard-go::after, .acp-cmpcard:hover .acp-cmpcard-go::after { background-color: var(--wp--preset--color--accent); background-image: var(--acp-arrow-dark); }
.acp-fcard-cta { background: var(--wp--preset--color--dark); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--dark); --acp-muted: var(--wp--preset--color--dark-muted); --acp-btn-square: var(--wp--preset--color--base); }
.acp-fcard-cta strong, .acp-fcard-cta .acp-fcard-go { color: var(--wp--preset--color--base); }
.acp-fcard-cta .acp-fcard-go::after { background-image: var(--acp-arrow-dark); }
.acp-fcard-cta .acp-fcard-ico { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); }
.acp-fcard-cta::before, .acp-fcard-cta::after { border-color: var(--wp--preset--color--dark); }

.acp-cmpmethod { max-width: 780px; margin-inline: auto; }
.acp-cmpmethod ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.acp-cmpmethod li { position: relative; padding-left: 1.5rem; font-size: .9375rem; line-height: 1.6; color: var(--acp-muted); }
.acp-cmpmethod li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--accent); }
.acp-cmpmethod li strong { color: var(--acp-fg); font-weight: 500; }

.acp-404 .wp-block-search { max-width: 520px; margin-inline: auto; }

.acp-result { text-align: left; }
.acp-result .wp-block-post-title { margin-top: 0; font-weight: 400; }
.acp-result .wp-block-post-excerpt__excerpt { color: var(--acp-muted); }
.acp-result-kind { margin: 0 0 6px; }

/* ---------- Blog post meta, related ---------- */

.acp-postmeta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: .75rem; text-transform: uppercase; color: var(--acp-muted); }
.acp-postmeta a { color: var(--acp-fg); text-decoration: none; }
.acp-postmeta a:hover { text-decoration: underline; }
.acp-postmeta .sep { opacity: .45; }
.acp-postmeta .acp-updated { color: var(--acp-fg); }
.acp-related { margin-top: var(--wp--preset--spacing--60); }

/* ---------- Contact page ---------- */

.acp-contact-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.acp-contact-facts li { position: relative; padding-left: 1.3rem; font-size: .9375rem; line-height: 1.55; color: var(--acp-muted); }
.acp-contact-facts li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--accent); }
.acp-contact-facts strong { color: var(--acp-fg); font-weight: 500; }
@media (max-width: 781px) { .acp-contact-cols { flex-wrap: wrap; } .acp-contact-cols > .wp-block-column { flex-basis: 100% !important; } }

/* ---------- Dark trio (older privacy band markup) ---------- */

.acp-dark-trio { margin-top: var(--wp--preset--spacing--30); }
.acp-dark-trio .wp-block-column { padding: 30px; border: 1px solid var(--acp-card-line); border-radius: 10px; background: var(--acp-card); }

/* ---------- Demo ---------- */

.acp-demo-shell { max-width: 820px; margin-inline: auto; }
.acp-demo-qs { margin: 0 0 1.25rem; }
.acp-demo-qs .acp-anchors { margin-top: .5rem; }

/* ---------- Changelog ---------- */

.acp-changelog-older { margin-top: var(--wp--preset--spacing--40); }
.acp-changelog-older h3 { font-size: 1.0625rem; margin: 1.4rem 0 .4rem; }
.acp-changelog-older h3:first-of-type { margin-top: .8rem; }
.acp-changelog-older ul { margin: 0; padding-left: 1.2rem; color: var(--acp-muted); }
.acp-changelog-older li { margin: 0 0 .25rem; }

/* ---------- Page template titles ---------- */

main.wp-block-group > .wp-block-post-title:first-child { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); margin-top: 40px !important; }


/* =========================================================================
   12. Footer
   ========================================================================= */

.acp-footer {
	position: relative;
	overflow: hidden;
	padding: 110px 0 36px;
	background: var(--wp--preset--color--soft);
	color: var(--wp--preset--color--ink);
	--acp-bg: var(--wp--preset--color--soft);
}

.acp-ft-inner { position: relative; max-width: 1332px; margin: 0 auto; padding: 0 24px; }
.acp-ft-inner > * { position: relative; z-index: 1; }

.acp-ft-grid {
	display: grid;
	grid-template-columns: repeat(6, auto);
	justify-content: space-between;
	gap: 40px 48px;
}

.acp-ft-head {
	margin: 0 0 26px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	font-weight: 400;
	line-height: 18px;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.acp-ft-col ul { list-style: none; margin: 0; padding: 0; }
.acp-ft-col li { margin: 0; }
.acp-ft-col li a {
	display: inline-block;
	padding: 5px 0;
	font-size: .8125rem;
	font-weight: 300;
	line-height: 22px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: opacity var(--acp-ease);
}
.acp-ft-col li a:hover { opacity: .5; text-decoration: underline; }

.acp-ft-brand { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 110px; }
.acp-ft-logo { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: var(--wp--preset--color--ink); }
.acp-ft-logo .acp-mark { width: 70px; height: 70px; border-radius: 16px; }
.acp-ft-word { font-size: 1.75rem; font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.acp-ft-tag { max-width: 440px; margin: 0; font-size: .8125rem; line-height: 22px; color: var(--wp--preset--color--muted); }

/* The watermark: the name, enormous and one shade off the background. Drawn
   from a data attribute so it is decoration, not text. */
.acp-ft-water::before { content: attr(data-text); }
.acp-ft-water {
	position: absolute !important;
	z-index: 0 !important;
	left: 0;
	right: 0;
	bottom: 1.4rem;
	font-size: clamp(6rem, 16vw, 15.5rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.03em;
	color: #dedee5;
	text-align: center;
	white-space: nowrap;
	user-select: none;
	pointer-events: none;
	z-index: 0;
}

.acp-ft-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 70px;
	padding-top: 22px;
	font-size: .8125rem;
}

.acp-ft-copy, .acp-ft-note { margin: 0; }
.acp-ft-copy { font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; }
.acp-ft-note { display: inline-flex; align-items: center; gap: 8px; color: var(--wp--preset--color--muted); }
.acp-ft-note svg { width: 16px; height: 16px; color: var(--wp--preset--color--accent); }
.acp-ft-legal { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.acp-ft-legal a { color: var(--wp--preset--color--ink); text-decoration: none; font-weight: 300; }
.acp-ft-legal a:hover { opacity: .5; text-decoration: underline; }

@media (max-width: 1279px) { .acp-ft-grid { grid-template-columns: repeat(3, auto); } }
@media (max-width: 767px) {
	.acp-footer { padding-top: 72px; }
	.acp-ft-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
	.acp-ft-brand { flex-direction: column; align-items: flex-start; margin-top: 64px; }
	.acp-ft-bottom { flex-direction: column; align-items: flex-start; }
}


/* =========================================================================
   13. Motion and reduced motion
   ========================================================================= */

/* Anything hover-animated returns to rest instantly for people who asked
   for less motion; the site is fully usable without any of it. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
	.acp-shotcard:hover .acp-shotcard-img img { transform: none; }
}


/* =========================================================================
   14. Background decoration (rings, dot grids, glows) — the reference's
   circles-dark / dotsbg / glow layers, drawn with gradients
   ========================================================================= */

/* Big outlined shapes that drift very slowly behind a section. They are the
   quietest layer in the system: a 1px hairline at 4-8% and nothing else. */
.acp-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.acp-shapes i {
	position: absolute;
	display: block;
	border: 1px solid var(--acp-guide);
	opacity: .07;
}

.acp-shape-1 { width: 420px; height: 420px; border-radius: 40px; right: -90px; top: -140px; transform: rotate(18deg); }
.acp-shape-2 { width: 300px; height: 300px; border-radius: 50%; left: -120px; bottom: -110px; }
.acp-shape-3 { width: 200px; height: 200px; border-radius: 30px; right: 22%; bottom: -70px; transform: rotate(-12deg); }

@media (prefers-reduced-motion: no-preference) {
	.acp-shape-1 { animation: acp-float-a 17s ease-in-out infinite; }
	.acp-shape-2 { animation: acp-float-b 21s ease-in-out 1.5s infinite; }
	.acp-shape-3 { animation: acp-float-a 14s ease-in-out 2.5s infinite; }
	@keyframes acp-float-a {
		0%, 100% { transform: translateY(0) rotate(18deg); }
		33% { transform: translateY(-16px) rotate(19.5deg); }
		66% { transform: translateY(-7px) rotate(16.5deg); }
	}
	@keyframes acp-float-b {
		0%, 100% { transform: translate(0, 0); }
		50% { transform: translate(10px, -14px); }
	}
}

.acp-deco { position: relative; overflow: hidden; }
.acp-deco > * { position: relative; z-index: 1; }

.acp-deco::before,
.acp-deco::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* Thin concentric rings, centred at --rx/--ry, fading out past --rr. */
.acp-deco-rings::before {
	background: repeating-radial-gradient(circle at var(--rx, 88%) var(--ry, 10%), transparent 0 var(--rg, 140px), var(--acp-ring) var(--rg, 140px) calc(var(--rg, 140px) + 1px));
	-webkit-mask-image: radial-gradient(circle at var(--rx, 88%) var(--ry, 10%), #000 0, #000 var(--rr, 520px), transparent calc(var(--rr, 520px) + 320px));
	mask-image: radial-gradient(circle at var(--rx, 88%) var(--ry, 10%), #000 0, #000 var(--rr, 520px), transparent calc(var(--rr, 520px) + 320px));
}

/* A dot grid, present only inside an ellipse at --dx/--dy. */
.acp-deco-dots::after {
	background: radial-gradient(circle, var(--acp-dot) 1px, transparent 1.6px) 0 0 / 18px 18px;
	-webkit-mask-image: radial-gradient(var(--dw, 560px) var(--dh, 520px) at var(--dx, 82%) var(--dy, 40%), #000 8%, transparent 68%);
	mask-image: radial-gradient(var(--dw, 560px) var(--dh, 520px) at var(--dx, 82%) var(--dy, 40%), #000 8%, transparent 68%);
	opacity: var(--dop, .5);
}

/* A yellow radial glow behind everything (the section's own background). */
.acp-deco-glow {
	background-image: radial-gradient(var(--gw, 620px) var(--gh, 560px) at var(--gx, 82%) var(--gy, 40%), rgba(239, 189, 48, var(--ga, .16)), rgba(239, 189, 48, 0) 66%);
	background-repeat: no-repeat;
}

/* Yellow dots on a light ground (the "yelow-glowbg" patch). */
.acp-deco-dots.is-yellow::after { background-image: radial-gradient(circle, rgba(239, 189, 48, .95) 1.2px, transparent 1.8px); opacity: .55; }

/* Per-section placement. */
.acp-showcase { --rx: 92%; --ry: 8%; --rr: 480px; --dx: 90%; --dy: 10%; --dw: 520px; --dh: 440px; --dop: .26; }
.acp-about { --dx: 9%; --dy: 92%; --dw: 640px; --dh: 520px; }
.acp-what { --rx: 96%; --ry: 4%; --rr: 560px; --rg: 150px; }
.acp-partners { --rx: 14%; --ry: 30%; --rr: 640px; --rg: 170px; --dx: 84%; --dy: 18%; --dw: 620px; --dh: 480px; --gx: 86%; --gy: 16%; --ga: .13; --dop: .4; }
.acp-versus { --dx: 20%; --dy: 102%; --dw: 560px; --dh: 440px; --gx: 18%; --gy: 104%; --ga: .14; --dop: .4; }
.acp-questions { --rx: 6%; --ry: 12%; --rr: 520px; --dx: 96%; --dy: 80%; --dw: 520px; --dh: 640px; --dop: .35; }
.acp-insights { --rx: 90%; --ry: 110%; --rr: 600px; --rg: 160px; }
.acp-closing { --gx: 24%; --gy: -4%; --gw: 820px; --gh: 620px; --ga: .1; --rx: 86%; --ry: 12%; --rr: 520px; }


/* =========================================================================
   15. Photo mosaic, testimonial box, image strip
   ========================================================================= */

/* A drifting composition of product graphics, in place of the photo mosaic
   the reference uses — we have product surfaces, not an office. */
.acp-collage {
	position: relative;
	height: 430px;
	margin: 96px 0 0;
}

.acp-collage > div { position: absolute; }
.acp-collage-a { left: 0; top: 0; width: 296px; }
.acp-collage-b { left: 282px; top: 108px; width: 248px; z-index: 2; }
.acp-collage-c { left: 570px; top: 14px; width: 272px; }

@media (max-width: 1279px) {
	.acp-collage { height: 372px; }
	.acp-collage-a { width: 248px; }
	.acp-collage-b { left: 234px; top: 96px; width: 212px; }
	.acp-collage-c { left: 470px; width: 230px; }
}

@media (max-width: 991px) {
	.acp-collage { position: static; height: auto; margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
	.acp-collage > div { position: static; width: auto; }
	.acp-collage-c { display: none; }
}

@media (max-width: 600px) {
	.acp-collage { grid-template-columns: 1fr; }
	.acp-collage-b { display: none; }
}

/* Testimonial box: rating + platform, the quote, name, role in mono. */
.acp-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.acp-quote { padding: 41px 30px 42px; height: 100%; }
.acp-quote-rating { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; line-height: 24px; }
.acp-stars { display: inline-flex; gap: 2px; }
.acp-stars i {
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23efbd30' d='M12 .6l3.7 7.6 8.3 1.1-6 5.8 1.5 8.3L12 19.4l-7.4 4 1.5-8.3-6-5.8 8.3-1.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.acp-quote-platform { font-weight: 500; letter-spacing: -.01em; }
.acp-quote-text { margin: 30px 0 45px; min-height: 72px; color: var(--acp-muted); line-height: 24px; }
.acp-quote-name { margin: 0; font-size: 1rem; line-height: 24px; color: var(--acp-muted); }
.acp-quote-role { margin: 8px 0 0; font-family: var(--wp--preset--font-family--mono); font-size: .875rem; line-height: 18px; text-transform: uppercase; color: var(--acp-fg); }

@media (max-width: 1279px) { .acp-quotes { grid-template-columns: 1fr; } }

/* The image strip behind the closing band (home only), moved by the scroll. */
.acp-strip {
	display: flex;
	gap: 17px;
	width: max-content;
	margin: 0 0 -150px -40px;
	opacity: .5;
	position: relative;
	z-index: 0;
}

.acp-strip-tile { width: 240px; flex: none; }
.acp-strip > :nth-child(even) { margin-top: 50px; }
.acp-strip .acp-g { pointer-events: none; }
.acp-closing .acp-wrap { position: relative; z-index: 1; }

@media (max-width: 991px) { .acp-strip { display: none; } }


/* =========================================================================
   16. Inertia scrolling (GSAP ScrollSmoother, desktop only — motion.js)
   ========================================================================= */

html.acp-smooth-on { scroll-behavior: auto; }
#smooth-wrapper { position: fixed; inset: 0; overflow: hidden; }
#smooth-content { overflow: visible; width: 100%; }

@media (min-width: 992px) {
	body.acp-smooth { padding-left: 0; }
	body.acp-smooth #smooth-wrapper { left: var(--acp-rail) !important; width: calc(100% - var(--acp-rail)) !important; }
}


/* =========================================================================
   17. Brand page (logo concepts and tokens — /brand/, private)
   ========================================================================= */

.acp-brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.acp-brand-card { padding: 30px; }
.acp-brand-card h3 { margin: 0 0 4px; font-size: 1.25rem; line-height: 28px; }
.acp-brand-card > p { margin: 0 0 22px; font-size: .9375rem; color: var(--acp-muted); }
.acp-brand-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px; border-radius: 10px; background: var(--wp--preset--color--soft); }
.acp-brand-row + .acp-brand-row { margin-top: 10px; }
.acp-brand-row.is-dark { background: var(--wp--preset--color--dark); color: var(--wp--preset--color--base); }
.acp-brand-row svg { display: block; flex: none; }
.acp-brand-word { font-size: 1.5rem; font-weight: 500; letter-spacing: -.01em; line-height: 1; }
.acp-brand-word small { display: block; margin-top: 4px; font-family: var(--wp--preset--font-family--mono); font-size: .6875rem; font-weight: 400; letter-spacing: 0; text-transform: uppercase; color: var(--acp-muted); }
.acp-brand-row.is-dark .acp-brand-word small { color: var(--wp--preset--color--dark-muted); }
.acp-brand-dark { margin-top: 70px; padding: 50px 40px; border-radius: 10px; background: var(--wp--preset--color--dark); }
.acp-brand-dark .acp-quotes { --acp-bg: var(--wp--preset--color--dark); }
/* Direction two cards: a large animated mark beside its rationale. */
.acp-brand-grid.is-two { grid-template-columns: 1fr 1fr; }
.acp-brand-hero { display: flex; align-items: center; gap: 28px; margin-bottom: 22px; }
.acp-brand-hero > svg { flex: none; border-radius: 30px; }
.acp-brand-hero h3 { margin: 0 0 6px; font-size: 1.375rem; line-height: 1.3; }
.acp-brand-hero p { margin: 0; font-size: .9375rem; color: var(--acp-muted); }
.acp-brand-note h3 { margin: 0 0 12px; font-size: 1.375rem; }
.acp-brand-note p { margin: 0 0 14px; color: var(--acp-muted); }
.acp-brand-note p:last-child { margin-bottom: 0; }
.acp-brand-note strong { color: var(--acp-fg); font-weight: 500; }
.acp-brand-note code { font-family: var(--wp--preset--font-family--mono); font-size: .9em; padding: 1px 5px; border-radius: 4px; background: var(--acp-raised); }
.acp-brand-rec { padding: 18px 20px; border-radius: 10px; background: var(--acp-raised); color: var(--acp-fg) !important; }
.acp-brand-rec .acp-g-pill { margin-right: 6px; vertical-align: 2px; }

/* The concept animations. G: the cursor blinks, the chevron strikes on hover.
   H: a glint runs the top facet. I: the sparks breathe. J: the tail strikes. */
.acp-lg-cursor { transform-origin: left center; }
.acp-lg-glint { opacity: 0; }
.acp-lg-sparks { transform-origin: 38px 12px; }
.acp-lg-tail { transform-origin: 28px 36px; }

@media (prefers-reduced-motion: no-preference) {
	.acp-lg-cursor { animation: acp-lg-blink 1.15s step-end infinite; }
	.acp-lg-prompt:hover .acp-lg-chev { animation: acp-lg-strike .7s ease-out; }
	.acp-lg-glint { animation: acp-lg-glint 6s ease-in-out infinite; }
	.acp-lg-facet:hover .acp-lg-glint { animation: acp-lg-glint 1.1s ease-in-out; }
	.acp-lg-sparks { animation: acp-lg-breathe 3.2s ease-in-out infinite; }
	.acp-lg-strike:hover .acp-lg-sparks { animation: acp-lg-pop .8s ease-out; }
	.acp-lg-monogram:hover .acp-lg-tail { animation: acp-lg-strike .7s ease-out; }
	@keyframes acp-lg-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
	@keyframes acp-lg-strike { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(2.5px); } 60% { transform: translateX(-1px); } }
	@keyframes acp-lg-glint { 0%, 78%, 100% { opacity: 0; } 84% { opacity: .9; } 92% { opacity: 0; } }
	@keyframes acp-lg-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.72); opacity: .35; } }
	@keyframes acp-lg-pop { 0% { transform: scale(.4); opacity: 0; } 50% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
}

@media (max-width: 991px) { .acp-brand-grid.is-two { grid-template-columns: 1fr; } .acp-brand-hero { flex-direction: column; align-items: flex-start; } }

.acp-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.acp-swatch { padding: 14px; border-radius: 10px; font-family: var(--wp--preset--font-family--mono); font-size: .6875rem; text-transform: uppercase; min-height: 92px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.acp-swatch b { font-weight: 400; }

@media (max-width: 1279px) { .acp-brand-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .acp-brand-grid { grid-template-columns: 1fr; } }


/* =========================================================================
   18. Content-plan components — the hero's three lines and the chat beside
       them, "Sound familiar?", "Built for", and the seven-day trial plan.
       Added with the approved content strategy (playbook/CONTENT-STRATEGY.md).
   ========================================================================= */

/* ---------- Hero: what it does, in three lines ---------- */

.acp-hero-does {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: -moz-max-content;
	width: max-content;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 13px;
	text-align: left;
}

.acp-hero-does li {
	position: relative;
	padding-left: 33px;
	font-size: 1.0625rem;
	font-weight: 300;
	line-height: 1.5;
	color: var(--acp-fg);
}

.acp-hero-does li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .18em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(239, 189, 48, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EFBD30' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}

.acp-hero .acp-hero-trust {
	margin: 30px auto 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	font-weight: 300;
	line-height: 18px;
	text-transform: uppercase;
	color: var(--acp-muted);
}

/* The chat answers beside the headline, but only where there is room for it
   at a size worth reading — below that the hero stays a centred stack. */
.acp-hero-chat { display: none; }

@media (min-width: 1280px) {
	.acp-hero-home {
		display: grid;
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
		align-items: center;
		column-gap: 56px;
		padding-inline: clamp(32px, 5vw, 104px);
		text-align: left;
	}

	.acp-hero-home > .acp-hero-body { max-width: 680px; margin: 0; padding: 0; justify-self: end; }
	.acp-hero-home h1 {
		text-align: left;
		max-width: none;
		margin-inline: 0 !important;
		font-size: clamp(2.9rem, 1.1rem + 3.2vw, 4.375rem);
	}
	.acp-hero-home .acp-hero-does,
	.acp-hero-home .acp-hero-trust { margin-inline: 0; }
	.acp-hero-home .acp-hero-body .acp-btns { justify-content: flex-start; margin-top: 44px; }

	.acp-hero-chat {
		display: block;
		width: 100%;
		max-width: 452px;
		justify-self: start;
	}
}

/* ---------- Sound familiar? ---------- */

.acp-pain-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 51px;
}

.acp-pain { height: 100%; padding: 34px 32px 32px; background: var(--acp-card); }

.acp-pain-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 24px;
	border-radius: 50%;
	background: rgba(239, 189, 48, .15);
	color: var(--wp--preset--color--accent-2);
}

.acp-pain-ico svg { width: 22px; height: 22px; }

.acp-pain h3 {
	margin: 0 0 14px;
	font-size: 1.1875rem;
	font-weight: 400;
	line-height: 27px;
}

.acp-pain-what {
	margin: 0 0 20px;
	font-size: .9375rem;
	font-weight: 300;
	line-height: 1.55;
	color: var(--acp-muted);
}

.acp-pain-fix {
	position: relative;
	margin: 0;
	padding-top: 20px;
	padding-left: 22px;
	font-size: .9375rem;
	font-weight: 300;
	line-height: 1.55;
	color: var(--acp-fg);
	border-top: 1px dotted var(--acp-line);
}

.acp-pain-fix em { font-style: normal; color: var(--wp--preset--color--accent-2); }

/* The arrow that marks the answer, drawn once and reused. */
.acp-pain-fix > span:first-child {
	position: absolute;
	left: 0;
	top: 25px;
	width: 13px;
	height: 13px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9971C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v9a4 4 0 0 0 4 4h12M15 12l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 1279px) { .acp-pain-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
@media (max-width: 767px) { .acp-pain-grid { grid-template-columns: 1fr; gap: 28px; } .acp-pain { padding: 28px 26px; } }

/* ---------- Built for: four kinds of site, one row each ---------- */

.acp-builtfor .acp-for-list { display: flex; flex-direction: column; }

.acp-for-row {
	display: grid;
	grid-template-columns: 46px minmax(0, 1.05fr) minmax(0, .8fr) auto;
	align-items: start;
	column-gap: 44px;
	padding: 42px 0;
	border-top: 1px solid var(--acp-card-line);
}

.acp-for-row:last-child { border-bottom: 1px solid var(--acp-card-line); }

.acp-for-ico { display: block; width: 46px; height: 46px; color: var(--wp--preset--color--accent); }
.acp-for-ico svg { display: block; width: 100%; height: 100%; }

.acp-for-main h3 {
	margin: 0 0 14px;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 32px;
}

.acp-for-main p {
	margin: 0;
	max-width: 52ch;
	font-size: .9375rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--acp-muted);
}

.acp-for-points {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.acp-for-points li {
	position: relative;
	padding-left: 20px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	font-weight: 300;
	line-height: 18px;
	text-transform: uppercase;
	color: var(--acp-fg);
}

.acp-for-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 7px;
	height: 7px;
	background: var(--wp--preset--color--accent);
}

.acp-for-row .acp-txtbtn { margin-top: 6px; white-space: nowrap; }

@media (max-width: 1279px) {
	.acp-for-row { grid-template-columns: 40px minmax(0, 1fr); column-gap: 28px; row-gap: 24px; padding: 34px 0; }
	.acp-for-row .acp-for-points,
	.acp-for-row .acp-txtbtn { grid-column: 2; }
}

@media (max-width: 767px) {
	.acp-for-row { grid-template-columns: 1fr; row-gap: 18px; }
	.acp-for-ico { width: 38px; height: 38px; }
	.acp-for-row .acp-for-points,
	.acp-for-row .acp-txtbtn { grid-column: 1; }
	.acp-for-main h3 { font-size: 1.25rem; line-height: 28px; }
}

/* ---------- The seven-day trial, as a plan ---------- */

.acp-plan7 { max-width: 840px; margin: 36px auto 0; }

.acp-plan7-row {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	column-gap: 30px;
	padding: 22px 0;
	border-top: 1px dotted var(--acp-line);
}

.acp-plan7-row:last-child { border-bottom: 1px dotted var(--acp-line); }

.acp-plan7-row > span {
	padding-top: .3em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .8125rem;
	font-weight: 300;
	line-height: 18px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
}

.acp-plan7-row p {
	margin: 0;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--acp-muted);
}

.acp-plan7-row b { font-weight: 400; color: var(--acp-fg); }

@media (max-width: 767px) {
	.acp-plan7-row { grid-template-columns: 1fr; row-gap: 6px; padding: 18px 0; }
	.acp-plan7-row > span { padding-top: 0; }
}

/* ---------- Feature pages: who this is for ---------- */

.acp-forline {
	position: relative;
	margin: 0 0 34px;
	padding: 20px 24px 20px 26px;
	border-left: 2px solid var(--wp--preset--color--accent);
	background: var(--acp-raised);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--acp-fg);
}

.acp-forline span {
	display: block;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	font-weight: 300;
	line-height: 16px;
	text-transform: uppercase;
	color: var(--acp-muted);
}

@media (max-width: 767px) { .acp-forline { padding: 16px 18px; } }


/* =========================================================================
   19. Saying what the product is, and the interaction pass
       (a) the category line, in the header lockup and above the headline;
       (b) the rail's scroll progress; (c) the hero chat's pointer tilt;
       (d) a pointer light on the dark bands; (e) the "built for" row rule.
   ========================================================================= */

/* ---------- The category line ----------
   A visitor who lands cold should not have to infer what this is. The mark
   stays in the rail; the bar carries the name and the plain-words category,
   and the hero repeats it once above the headline. */

.acp-logo-lock {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	line-height: 1;
	text-align: left;
}

/* The header is always the dark band, and it sets no surface tokens — so the
   lockup names its colours outright rather than inheriting a light-mode ink. */
.acp-logo-lock b {
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--base);
}

.acp-logo-lock i {
	font-style: normal;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6875rem;
	font-weight: 300;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dark-muted);
	white-space: nowrap;
}

/* Desktop: the rail already shows the mark, so the bar's copy is text only. */
@media (min-width: 992px) {
	.acp-logo-m { display: inline-flex; align-items: center; gap: 12px; margin-right: 34px; }
	.acp-logo-m .acp-mark { display: none; }
}

/* Mobile: the mark comes back and the category line steps aside for the nav. */
@media (max-width: 991px) {
	.acp-logo-lock i { display: none; }
	.acp-logo-lock b { font-size: 1rem; }
	.acp-logo-m { gap: 10px; }
}

@media (max-width: 420px) {
	.acp-logo-lock { display: none; }
}

.acp-hero .acp-hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 auto 20px;
	color: var(--acp-muted);
}

.acp-hero .acp-hero-kicker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 4px rgba(239, 189, 48, .16);
}

/* ---------- The rail's scroll progress ----------
   The black rail runs the full height of every page and said nothing. It now
   carries a single hairline that fills as the page is read: the one piece of
   chrome that is always on screen, doing one useful thing. */

.acp-rail-progress {
	position: absolute;
	left: 50%;
	top: calc(var(--acp-header-h) + 34px);
	bottom: 34px;
	width: 1px;
	margin-left: -.5px;
	background: rgba(255, 255, 255, .13);
	overflow: hidden;
	pointer-events: none;
}

.acp-rail-progress::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 100%;
	background: linear-gradient(to bottom, var(--wp--preset--color--accent), var(--wp--preset--color--accent-2));
	transform: scaleY(var(--acp-progress, 0));
	transform-origin: top;
	transition: transform .12s linear;
}

@media (max-width: 991px) { .acp-rail-progress { display: none; } }

/* ---------- The hero chat, under the pointer ----------
   The one graphic a visitor wants to touch is the chat. It leans a couple of
   degrees toward the cursor — enough to read as a real object, far short of a
   novelty. Driven by two custom properties set in motion.js. */

@media (min-width: 1280px) and (prefers-reduced-motion: no-preference) {
	.acp-hero-chat {
		perspective: 1200px;
		transform-style: preserve-3d;
	}
	.acp-hero-chat .acp-g {
		transform: rotateX(var(--acp-tilt-x, 0deg)) rotateY(var(--acp-tilt-y, 0deg));
		transition: transform .5s cubic-bezier(.22, 1, .36, 1);
		will-change: transform;
	}
	.acp-hero-chat.is-tilting .acp-g { transition: transform .12s linear; }
}

/* ---------- A pointer light on the dark bands ----------
   The dark sections already carry a fixed glow. This adds a second, softer
   one that follows the pointer, so the surface reacts instead of sitting
   still. It is a mask over the existing background, never a new colour. */

.acp-dark.acp-lit::after,
.acp-hero.acp-lit::after {
	--acp-lit-o: 0;
}

.acp-lit-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: var(--acp-lit-o, 0);
	transition: opacity .45s ease;
	background: radial-gradient(360px 360px at var(--acp-lit-x, 50%) var(--acp-lit-y, 50%), rgba(239, 189, 48, .1), rgba(239, 189, 48, 0) 70%);
}

@media (max-width: 991px), (prefers-reduced-motion: reduce) {
	.acp-lit-layer { display: none; }
}

/* ---------- "Built for": the row answers the pointer ---------- */

.acp-for-row { position: relative; transition: background-color .25s ease; }

.acp-for-row::after {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	height: 1px;
	width: 0;
	background: var(--wp--preset--color--accent);
	transition: width .45s cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
	.acp-for-row:hover { background-color: rgba(255, 255, 255, .02); }
	.acp-for-row:hover::after { width: 100%; }
	.acp-for-row:hover .acp-for-ico { transform: translateY(-2px); }
	.acp-for-ico { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
}