/*
Theme Name: CrossPost
Theme URI: https://uhl.agency
Author: UHL-Services
Author URI: https://uhl.agency
Description: Confident, product-led block theme for CrossPost, the privacy-first social media management app. Violet signature, warm cream counterweight, modern geometric sans headlines, light and dark mode.
Version: 1.0.8
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crosspost
Update URI: https://gitlab.uhlhost.net/uhlhosting/crosspost
Tags: full-site-editing, one-column, custom-colors, custom-logo
*/

/*
CrossPost WordPress Theme, Copyright 2026 UHL-Services, Stephan Uhl
CrossPost is distributed under the terms of the GNU GPL v2 or later.

Bundled fonts:
Plus Jakarta Sans, Copyright 2020 The Plus Jakarta Sans Project Authors (Gumpita Rahayu, Tokotype), SIL Open Font License 1.1
Instrument Sans, Copyright 2022 The Instrument Sans Project Authors, SIL Open Font License 1.1
*/

/* ==========================================================================
   1. Design tokens (light) and dark overrides
   ========================================================================== */

:root {
	/* Radius, motion and light shadows are defined once in theme.json (settings.custom). */
	--cp-radius-sm: var(--wp--custom--radius--sm, 8px);
	--cp-radius-md: var(--wp--custom--radius--md, 14px);
	--cp-radius-lg: var(--wp--custom--radius--lg, 22px);
	--cp-radius-xl: var(--wp--custom--radius--xl, 32px);
	--cp-ease: var(--wp--custom--motion--ease, cubic-bezier(0.2, 0.7, 0.2, 1));
	--cp-fast: var(--wp--custom--motion--fast, 0.2s);
	--cp-base: var(--wp--custom--motion--base, 0.25s);
	--cp-slow: var(--wp--custom--motion--slow, 0.7s);

	--cp-shadow-sm: var(--wp--custom--shadow--sm);
	--cp-shadow-md: var(--wp--custom--shadow--md);
	--cp-shadow-lg: var(--wp--custom--shadow--lg);
	--cp-shadow-glow: var(--wp--custom--shadow--glow);

	/* Modern geometric tracking tokens */
	--cp-tracking-display: -0.035em;
	--cp-tracking-heading: -0.025em;
	--cp-tracking-sub: -0.015em;

	--cp-hero-bg: #E9DCC4;
	--cp-hero-glow: rgba(151, 71, 255, 0.35);
	--cp-hero-glow-2: rgba(252, 226, 131, 0.55);
	--cp-header-bg: rgba(252, 245, 255, 0.78);
	--cp-card-border: rgba(32, 27, 35, 0.07);
	--cp-chip-bg: rgba(255, 255, 255, 0.72);
	--cp-mock-bg: #FFFFFF;
	--cp-mock-side: #F6F0FA;
	--cp-mock-track: #EFE4FF;
	--cp-btn-fg: #FFFFFF;
	--cp-link-dark: #B67EFC;
	--cp-grid-line: rgba(32, 27, 35, 0.05);
	--cp-band-start: #2E0D55;
	--cp-band-end: #6A1DCD;
	--cp-selection: #EFE4FF;
	color-scheme: light;
}

/* Dark palette: applied by system preference unless the user forced light,
   and whenever the user forced dark. Both selectors share the same values. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--wp--preset--color--base: #151217;
		--wp--preset--color--surface: #251F28;
		--wp--preset--color--surface-alt: #1C171F;
		--wp--preset--color--cream: #2A2230;
		--wp--preset--color--contrast: #F1EBF4;
		--wp--preset--color--contrast-soft: #DED4E4;
		--wp--preset--color--muted: #BEB3C7;
		--wp--preset--color--line: #3A3240;
		--wp--preset--color--primary-deep: #B67EFC;
		--wp--preset--color--primary-tint: #7823E7;
		--wp--preset--color--primary-soft: #2D2340;
		--wp--preset--gradient--violet-soft: linear-gradient(180deg, #1D1626 0%, #151217 100%);
		--wp--preset--gradient--sunset: linear-gradient(135deg, #1F1826 0%, #1C171F 60%, #231A33 100%);
		--cp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
		--cp-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3);
		--cp-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.35);
		--cp-shadow-glow: 0 12px 40px rgba(151, 71, 255, 0.4);
		--cp-hero-bg: #1A1420;
		--cp-hero-glow: rgba(151, 71, 255, 0.4);
		--cp-hero-glow-2: rgba(198, 163, 36, 0.22);
		--cp-header-bg: rgba(21, 18, 23, 0.78);
		--cp-card-border: rgba(255, 255, 255, 0.07);
		--cp-chip-bg: rgba(255, 255, 255, 0.06);
		--cp-mock-bg: #251F28;
		--cp-mock-side: #1E1822;
		--cp-mock-track: #322B36;
		--cp-btn-fg: #201B23;
		--cp-grid-line: rgba(255, 255, 255, 0.05);
		--cp-band-start: #1A0F2E;
		--cp-band-end: #4E158F;
		--cp-selection: #3D2A66;
	}
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--base: #151217;
	--wp--preset--color--surface: #251F28;
	--wp--preset--color--surface-alt: #1C171F;
	--wp--preset--color--cream: #2A2230;
	--wp--preset--color--contrast: #F1EBF4;
	--wp--preset--color--contrast-soft: #DED4E4;
	--wp--preset--color--muted: #BEB3C7;
	--wp--preset--color--line: #3A3240;
	--wp--preset--color--primary-deep: #B67EFC;
	--wp--preset--color--primary-tint: #7823E7;
	--wp--preset--color--primary-soft: #2D2340;
	--wp--preset--gradient--violet-soft: linear-gradient(180deg, #1D1626 0%, #151217 100%);
	--wp--preset--gradient--sunset: linear-gradient(135deg, #1F1826 0%, #1C171F 60%, #231A33 100%);
	--cp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
	--cp-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3);
	--cp-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.35);
	--cp-shadow-glow: 0 12px 40px rgba(151, 71, 255, 0.4);
	--cp-hero-bg: #1A1420;
	--cp-hero-glow: rgba(151, 71, 255, 0.4);
	--cp-hero-glow-2: rgba(198, 163, 36, 0.22);
	--cp-header-bg: rgba(21, 18, 23, 0.78);
	--cp-card-border: rgba(255, 255, 255, 0.07);
	--cp-chip-bg: rgba(255, 255, 255, 0.06);
	--cp-mock-bg: #251F28;
	--cp-mock-side: #1E1822;
	--cp-mock-track: #322B36;
	--cp-btn-fg: #201B23;
	--cp-grid-line: rgba(255, 255, 255, 0.05);
	--cp-band-start: #1A0F2E;
	--cp-band-end: #4E158F;
	--cp-selection: #3D2A66;
}

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}
body {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "ss01", "cv11";
	transition: background-color var(--cp-base) ease, color var(--cp-base) ease;
	overflow-x: clip;
}
::selection {
	background: var(--cp-selection);
	color: var(--wp--preset--color--contrast);
}
h1, h2, h3, h4, h5, h6,
.wp-block-post-title {
	text-wrap: balance;
	color: var(--wp--preset--color--contrast);
}
h1, .has-display-font-size, .has-hero-font-size {
	font-weight: 800;
	letter-spacing: var(--cp-tracking-display);
}
h2 {
	font-weight: 700;
	letter-spacing: var(--cp-tracking-heading);
}
h3, h4 {
	font-weight: 600;
	letter-spacing: var(--cp-tracking-sub);
}
p {
	text-wrap: pretty;
}
a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--cp-fast) ease, text-decoration-color var(--cp-fast) ease;
}
a:hover {
	text-decoration-color: var(--wp--preset--color--primary);
}
:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 4px;
}
img {
	height: auto;
	max-width: 100%;
}
.wp-site-blocks > footer,
.wp-site-blocks > main {
	margin-block-start: 0;
}
.wp-site-blocks > * + * {
	margin-block-start: 0;
}
.cp-main > * + * {
	margin-block-start: 0;
}
.cp-main > .wp-block-post-content > * + * {
	margin-block-start: 0;
}
/* Sections sit flush against each other; inner rhythm comes from padding. */
.cp-page-content > .wp-block-group.alignfull,
.cp-main .wp-block-post-content > .wp-block-group.alignfull {
	margin-top: 0;
	margin-bottom: 0;
}

/* Reading pages (legal, posts) */
.cp-prose {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--80);
}
.cp-prose h2 {
	margin-top: 2.5rem;
	font-size: var(--wp--preset--font-size--x-large);
}
.cp-prose h3 {
	margin-top: 2rem;
	font-size: var(--wp--preset--font-size--large);
}
.cp-prose p,
.cp-prose li {
	color: var(--wp--preset--color--contrast-soft);
	font-size: 1.05rem;
	line-height: 1.7;
}
.cp-prose strong {
	color: var(--wp--preset--color--contrast);
}
.cp-prose ul,
.cp-prose ol {
	padding-left: 1.4rem;
}
.cp-article .cp-prose {
	padding-top: 0;
	padding-bottom: 0;
}
.cp-article .wp-block-post-featured-image {
	margin-bottom: 2.5rem;
}
.cp-article .wp-block-post-featured-image:empty {
	display: none;
}

/* ==========================================================================
   3. Typography helpers
   ========================================================================== */

.cp-eyebrow,
.cp-eyebrow a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-deep);
	margin-bottom: 0.9rem;
	text-decoration: none;
}
.cp-eyebrow--light,
.cp-eyebrow--light a {
	color: var(--wp--preset--color--secondary-light);
}
.cp-eyebrow + h1,
.cp-eyebrow + h2,
.cp-eyebrow + .wp-block-post-title,
.cp-eyebrow + .wp-block-query-title {
	margin-top: 0;
}
.cp-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	max-width: 46ch;
	margin-left: auto;
	margin-right: auto;
}
.cp-lead.has-text-align-left,
.has-text-align-left .cp-lead {
	margin-left: 0;
}
.cp-muted {
	color: var(--wp--preset--color--muted);
}
.cp-section__head {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.cp-section__head > * + * {
	margin-top: 1rem;
}
.cp-section__head .cp-lead {
	margin-top: 1.25rem;
}
.cp-gradient-text {
	background: linear-gradient(120deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary-deep) 55%, #D34CC9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-style: italic;
	font-weight: 500;
}
.cp-dot-sep {
	opacity: 0.4;
	margin: 0 0.35rem;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.wp-block-button__link,
.wp-element-button {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	border: 1.5px solid transparent;
	box-shadow: 0 1px 2px rgba(32, 27, 35, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	transition: transform var(--cp-fast) var(--cp-ease), box-shadow var(--cp-fast) var(--cp-ease), background-color var(--cp-fast) ease, color var(--cp-fast) ease, border-color var(--cp-fast) ease;
	color: var(--cp-btn-fg);
	letter-spacing: 0.005em;
	text-decoration: none;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-1px);
	box-shadow: var(--cp-shadow-glow);
	color: var(--cp-btn-fg);
}
.wp-block-button__link:active {
	transform: translateY(0);
}
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1.5px solid var(--wp--preset--color--line);
	box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-deep);
	background: var(--wp--preset--color--primary-soft);
	box-shadow: none;
}
.cp-btn-sm .wp-block-button__link {
	padding: 0.6rem 1.15rem;
	font-size: 0.92rem;
}
.cp-btn-light .wp-block-button__link {
	background: #FFFFFF;
	color: #4E158F;
}
.cp-btn-light .wp-block-button__link:hover {
	background: var(--wp--preset--color--secondary-light);
	color: #2E0D55;
}
.cp-btn-outline-light .wp-block-button__link,
.wp-block-button.is-style-outline.cp-btn-outline-light .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.4);
	color: #FFFFFF;
}
.wp-block-button.is-style-outline.cp-btn-outline-light .wp-block-button__link:hover {
	border-color: #FFFFFF;
	background: rgba(255, 255, 255, 0.1);
	color: #FFFFFF;
}

/* ==========================================================================
   5. Header
   ========================================================================== */

header.cp-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
.admin-bar header.cp-site-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar header.cp-site-header {
		top: 46px;
	}
}
.cp-header {
	position: relative;
	isolation: isolate;
	border-bottom: 1px solid transparent;
	transition: border-color var(--cp-base) ease, box-shadow var(--cp-base) ease;
}
/*
 * The frosted glass lives on a pseudo-element on purpose. A backdrop-filter
 * (or filter/transform) on the header itself makes it the containing block
 * for position:fixed descendants, which traps the navigation overlay menu
 * inside the header bar instead of covering the viewport.
 */
.cp-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--cp-header-bg);
	-webkit-backdrop-filter: saturate(160%) blur(16px);
	backdrop-filter: saturate(160%) blur(16px);
	pointer-events: none;
	transition: background-color var(--cp-base) ease;
}
.cp-header.is-scrolled {
	border-bottom-color: var(--wp--preset--color--line);
	box-shadow: 0 8px 30px rgba(32, 27, 35, 0.06);
}
.cp-header__row {
	gap: 1.5rem;
}
.cp-logo {
	margin: 0;
	line-height: 0;
	flex-shrink: 0;
}
.cp-logo img {
	display: block;
	width: 150px;
	height: auto;
	transition: transform var(--cp-base) var(--cp-ease), filter var(--cp-base) ease;
}
.cp-logo a:hover img {
	transform: translateY(-1px) scale(1.02);
}
:root[data-theme="dark"] .cp-logo img {
	filter: brightness(1.18) saturate(1.05);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cp-logo img {
		filter: brightness(1.18) saturate(1.05);
	}
}
.cp-nav {
	flex: 1 1 auto;
	justify-content: center;
}
.cp-nav .wp-block-navigation-item__content {
	position: relative;
	padding: 0.35rem 0;
	color: var(--wp--preset--color--contrast);
}
.cp-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--cp-base) var(--cp-ease);
}
.cp-nav .wp-block-navigation-item__content:hover::after,
.cp-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}
.cp-nav .wp-block-navigation__responsive-container-open,
.cp-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
}
/* Menu button: same round 42px control as the theme toggle next to it. */
.cp-nav .wp-block-navigation__responsive-container-open {
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	transition: border-color var(--cp-fast) ease, background-color var(--cp-fast) ease;
}
.cp-nav .wp-block-navigation__responsive-container-open:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary-soft);
}
.cp-nav .wp-block-navigation__responsive-container-open:focus-visible,
.cp-nav .wp-block-navigation__responsive-container-close:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-deep);
	outline-offset: 2px;
}
.cp-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0.75rem var(--wp--preset--spacing--30) 2rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	overscroll-behavior: contain;
}
.cp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
}
.cp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem;
}
.cp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.25rem;
}
.cp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.75rem;
	font-weight: 500;
}
.cp-header__actions {
	flex-shrink: 0;
}
.cp-login .wp-block-button__link {
	white-space: nowrap;
}

/* Theme toggle: a circular button, label visually hidden, icon drawn in CSS. */
.cp-theme-toggle .wp-block-button__link {
	position: relative;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-color: var(--wp--preset--color--line);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	box-shadow: none;
}
.cp-theme-toggle .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary-soft);
	transform: none;
}
.cp-theme-toggle__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.cp-theme-toggle .wp-block-button__link::before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: transparent;
	box-shadow: inset -5px -3px 0 0 var(--wp--preset--color--contrast);
	transform: rotate(-20deg);
	transition: box-shadow var(--cp-base) ease, background var(--cp-base) ease, transform var(--cp-base) var(--cp-ease);
}
:root[data-theme="dark"] .cp-theme-toggle .wp-block-button__link::before {
	background: var(--wp--preset--color--secondary-light);
	box-shadow: 0 0 0 3px var(--wp--preset--color--surface), 0 0 0 5px var(--wp--preset--color--secondary-light);
	width: 10px;
	height: 10px;
	transform: rotate(0deg);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cp-theme-toggle .wp-block-button__link::before {
		background: var(--wp--preset--color--secondary-light);
		box-shadow: 0 0 0 3px var(--wp--preset--color--surface), 0 0 0 5px var(--wp--preset--color--secondary-light);
		width: 10px;
		height: 10px;
		transform: rotate(0deg);
	}
}

/* ==========================================================================
   6. Page title band and sections
   ========================================================================== */

.cp-page-title {
	position: relative;
	background:
		radial-gradient(60% 80% at 15% 0%, var(--cp-hero-glow) 0%, transparent 60%),
		radial-gradient(50% 70% at 90% 100%, var(--cp-hero-glow-2) 0%, transparent 60%),
		var(--cp-hero-bg);
	overflow: hidden;
}
.cp-page-title::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(var(--cp-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--cp-grid-line) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(70% 90% at 50% 100%, #000 30%, transparent 100%);
	mask-image: radial-gradient(70% 90% at 50% 100%, #000 30%, transparent 100%);
	pointer-events: none;
}
.cp-page-title__inner {
	position: relative;
	z-index: 1;
}
.cp-page-title .wp-block-post-title,
.cp-page-title .wp-block-query-title,
.cp-page-title h1 {
	margin-bottom: 0;
}
.cp-page-title .cp-lead {
	margin-top: 1.25rem;
}
.cp-page-title--post .wp-block-post-terms {
	margin-bottom: 0.75rem;
}
.cp-page-title--post .wp-block-post-terms a {
	color: var(--wp--preset--color--primary-deep);
}
.cp-post-meta {
	margin-top: 1.25rem;
	gap: 1rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}
.cp-post-meta__author::after {
	content: "/";
	margin-left: 1rem;
	opacity: 0.4;
}
.cp-section {
	position: relative;
}
.cp-section--tight {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

/* ==========================================================================
   7. Cards
   ========================================================================== */

.cp-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--cp-card-border);
	border-radius: var(--cp-radius-lg);
	box-shadow: var(--cp-shadow-sm);
	position: relative;
	overflow: hidden;
	transition: transform var(--cp-base) var(--cp-ease), box-shadow var(--cp-base) var(--cp-ease), border-color var(--cp-base) ease;
}
.cp-card > * + * {
	margin-top: 1rem;
}
.cp-card h3,
.cp-card h4 {
	margin-top: 1.25rem;
}
.cp-card p {
	color: var(--wp--preset--color--muted);
}
.cp-card p:last-child {
	margin-bottom: 0;
}
.cp-hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: var(--cp-shadow-lg);
	border-color: rgba(151, 71, 255, 0.25);
}
.cp-card--feature::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-deep));
	opacity: 0;
	transition: opacity var(--cp-base) ease;
}
.cp-card--feature:hover::before {
	opacity: 1;
}
.cp-card--soft {
	background: var(--wp--preset--color--primary-soft);
	border-color: transparent;
}
.cp-card--soft p {
	color: var(--wp--preset--color--contrast-soft);
}

/* Equal-height columns */
.cp-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
	flex-grow: 0;
}
.cp-cards > .wp-block-column > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.cp-cards .cta-bottom {
	margin-top: auto;
}

/* Numbered trio */
.cp-number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem;
	line-height: 1;
	font-weight: 500;
	font-style: italic;
	color: var(--wp--preset--color--primary);
	opacity: 0.9;
	margin-bottom: 0.25rem;
}

/* ==========================================================================
   8. CSS icons (48px tiles with a drawn glyph)
   ========================================================================== */

.cp-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	position: relative;
	flex-shrink: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary-deep) 100%);
	box-shadow: 0 8px 18px rgba(151, 71, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	margin-bottom: 0.5rem;
}
.cp-icon--gold {
	background: linear-gradient(135deg, #E3C64A 0%, var(--wp--preset--color--secondary) 100%);
	box-shadow: 0 8px 18px rgba(198, 163, 36, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.cp-icon--ink {
	background: linear-gradient(135deg, #3A323E 0%, #201B23 100%);
	box-shadow: 0 8px 18px rgba(32, 27, 35, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.cp-icon::before,
.cp-icon::after {
	content: "";
	position: absolute;
	box-sizing: border-box;
}
/* dashboard: four tiles */
.cp-icon--dashboard::before {
	inset: 14px;
	background:
		linear-gradient(#fff, #fff) 0 0 / 10px 10px no-repeat,
		linear-gradient(#fff, #fff) 100% 0 / 10px 10px no-repeat,
		linear-gradient(#fff, #fff) 0 100% / 10px 10px no-repeat,
		linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)) 100% 100% / 10px 10px no-repeat;
	border-radius: 2px;
}
/* schedule: calendar */
.cp-icon--schedule::before {
	inset: 15px 14px 13px;
	border: 2.5px solid #fff;
	border-top-width: 7px;
	border-radius: 4px;
}
.cp-icon--schedule::after {
	left: 20px;
	bottom: 17px;
	width: 6px;
	height: 6px;
	background: #fff;
	border-radius: 1px;
	box-shadow: 9px 0 0 rgba(255,255,255,0.55);
}
/* analytics: three bars */
.cp-icon--analytics::before {
	left: 14px;
	right: 14px;
	bottom: 14px;
	height: 24px;
	background:
		linear-gradient(#fff, #fff) 0 100% / 6px 12px no-repeat,
		linear-gradient(#fff, #fff) 50% 100% / 6px 24px no-repeat,
		linear-gradient(#fff, #fff) 100% 100% / 6px 17px no-repeat;
}
/* shield */
.cp-icon--shield::before {
	left: 15px;
	top: 13px;
	width: 22px;
	height: 26px;
	background: #fff;
	border-radius: 11px 11px 11px 11px / 6px 6px 16px 16px;
	-webkit-mask: radial-gradient(circle at 50% 110%, transparent 0 7px, #000 7.5px);
	mask: radial-gradient(circle at 50% 110%, transparent 0 7px, #000 7.5px);
}
.cp-icon--shield::after {
	left: 22px;
	top: 21px;
	width: 7px;
	height: 11px;
	border-right: 2.5px solid var(--wp--preset--color--primary-deep);
	border-bottom: 2.5px solid var(--wp--preset--color--primary-deep);
	transform: rotate(45deg);
}
/* plug / integrations: two circles linked */
.cp-icon--plug::before {
	left: 13px;
	top: 18px;
	width: 16px;
	height: 16px;
	border: 3px solid #fff;
	border-radius: 50%;
}
.cp-icon--plug::after {
	left: 24px;
	top: 18px;
	width: 16px;
	height: 16px;
	border: 3px solid rgba(255,255,255,0.7);
	border-radius: 50%;
}
/* bolt */
.cp-icon--bolt::before {
	left: 19px;
	top: 12px;
	width: 14px;
	height: 28px;
	background: #fff;
	clip-path: polygon(55% 0, 0 55%, 45% 55%, 35% 100%, 100% 42%, 55% 42%);
}
/* stack / modern stack */
.cp-icon--stack::before {
	left: 14px;
	right: 14px;
	top: 14px;
	height: 24px;
	background:
		linear-gradient(#fff, #fff) 0 0 / 100% 6px no-repeat,
		linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)) 0 9px / 100% 6px no-repeat,
		linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)) 0 18px / 100% 6px no-repeat;
	border-radius: 2px;
}
/* lock */
.cp-icon--lock::before {
	left: 15px;
	top: 23px;
	width: 22px;
	height: 16px;
	background: #fff;
	border-radius: 4px;
}
.cp-icon--lock::after {
	left: 19px;
	top: 12px;
	width: 14px;
	height: 16px;
	border: 2.5px solid #fff;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
}
/* server */
.cp-icon--server::before {
	left: 13px;
	right: 13px;
	top: 14px;
	height: 24px;
	border: 2.5px solid #fff;
	border-radius: 4px;
	background: linear-gradient(transparent 0 9px, #fff 9px 11.5px, transparent 11.5px);
}
.cp-icon--server::after {
	left: 18px;
	top: 19px;
	width: 4px;
	height: 4px;
	background: var(--wp--preset--color--success);
	border-radius: 50%;
	box-shadow: 0 12px 0 var(--wp--preset--color--success);
}
/* pin / Swiss */
.cp-icon--pin::before {
	left: 17px;
	top: 11px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
}
.cp-icon--pin::after {
	left: 23px;
	top: 17px;
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--primary-deep);
	border-radius: 50%;
}
/* chat */
.cp-icon--chat::before {
	inset: 14px 13px 18px;
	background: #fff;
	border-radius: 10px 10px 10px 2px;
}
.cp-icon--chat::after {
	left: 20px;
	top: 22px;
	width: 4px;
	height: 4px;
	background: var(--wp--preset--color--primary-deep);
	border-radius: 50%;
	box-shadow: 6px 0 0 var(--wp--preset--color--primary-deep), 12px 0 0 var(--wp--preset--color--primary-deep);
}
/* spark */
.cp-icon--spark::before {
	left: 14px;
	top: 14px;
	width: 24px;
	height: 24px;
	background: #fff;
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
/* mail */
.cp-icon--mail::before {
	inset: 16px 13px;
	border: 2.5px solid #fff;
	border-radius: 4px;
}
.cp-icon--mail::after {
	left: 18px;
	top: 20px;
	width: 16px;
	height: 10px;
	border-left: 2.5px solid #fff;
	border-bottom: 2.5px solid #fff;
	transform: rotate(-45deg) scale(0.75);
	transform-origin: center;
}
/* phone */
.cp-icon--phone::before {
	left: 19px;
	top: 13px;
	width: 14px;
	height: 26px;
	border: 2.5px solid #fff;
	border-radius: 4px;
}
.cp-icon--phone::after {
	left: 24px;
	top: 33px;
	width: 4px;
	height: 2.5px;
	background: #fff;
	border-radius: 2px;
}
/* card / billing */
.cp-icon--card::before {
	inset: 16px 12px;
	border: 2.5px solid #fff;
	border-radius: 4px;
	background: linear-gradient(transparent 0 5px, #fff 5px 9px, transparent 9px);
}
/* check */
.cp-icon--check::before {
	left: 18px;
	top: 14px;
	width: 12px;
	height: 20px;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
	transform: rotate(45deg);
}

/* Inline icon row (icon beside heading) */
.cp-icon-row {
	gap: 1rem;
	align-items: center;
}
.cp-icon-row .cp-icon {
	margin-bottom: 0;
}
.cp-icon-row h3,
.cp-icon-row h4 {
	margin: 0;
}

/* ==========================================================================
   9. Hero and dashboard mockup
   ========================================================================== */

.cp-hero {
	position: relative;
	background: var(--cp-hero-bg);
	overflow: hidden;
	padding-top: clamp(3.5rem, 7vw, 6.5rem);
	padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
}
.cp-hero::before {
	content: "";
	position: absolute;
	width: 70vw;
	height: 70vw;
	max-width: 900px;
	max-height: 900px;
	right: -20vw;
	top: -30vw;
	background: radial-gradient(circle at center, var(--cp-hero-glow) 0%, transparent 60%);
	animation: cp-drift 16s ease-in-out infinite alternate;
	pointer-events: none;
}
.cp-hero::after {
	content: "";
	position: absolute;
	width: 50vw;
	height: 50vw;
	max-width: 640px;
	max-height: 640px;
	left: -15vw;
	bottom: -30vw;
	background: radial-gradient(circle at center, var(--cp-hero-glow-2) 0%, transparent 60%);
	animation: cp-drift 20s ease-in-out infinite alternate-reverse;
	pointer-events: none;
}
.cp-hero > * {
	position: relative;
	z-index: 1;
}
.cp-hero__grid {
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}
.cp-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.9rem 0.4rem 0.6rem;
	border-radius: 999px;
	background: var(--cp-chip-bg);
	border: 1px solid var(--cp-card-border);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-soft);
	margin-bottom: 1.5rem;
}
.cp-hero__badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--success);
	box-shadow: 0 0 0 4px rgba(36, 249, 93, 0.2);
	animation: cp-pulse 2.4s ease-in-out infinite;
}
.cp-hero__title {
	font-size: var(--wp--preset--font-size--hero);
	line-height: 1.04;
	letter-spacing: -0.028em;
	margin-bottom: 1.5rem;
}
.cp-hero__sub {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted);
	max-width: 44ch;
	margin-bottom: 2rem;
}
.cp-hero__actions {
	margin-bottom: 1.25rem;
}
.cp-hero__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.cp-hero__note a {
	color: inherit;
}

/* Mockup: a browser-style window built from groups and spacers. */
.cp-mock {
	position: relative;
	perspective: 1600px;
}
.cp-mock__frame {
	background: var(--cp-mock-bg);
	border-radius: var(--cp-radius-lg);
	border: 1px solid var(--cp-card-border);
	box-shadow: var(--cp-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
	overflow: hidden;
	transform: rotateY(-6deg) rotateX(3deg);
	transform-origin: left center;
	transition: transform 0.8s var(--cp-ease), box-shadow 0.8s var(--cp-ease);
}
.cp-mock:hover .cp-mock__frame {
	transform: rotateY(-2deg) rotateX(1deg);
	box-shadow: var(--cp-shadow-lg), var(--cp-shadow-glow);
}
.cp-mock__topbar {
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--cp-card-border);
	gap: 0.75rem;
	align-items: center;
	background: var(--cp-mock-side);
}
.cp-mock__dots {
	margin: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #F2654B;
	box-shadow: 16px 0 0 #F4BD48, 32px 0 0 #4FCB6A;
	font-size: 0;
	flex-shrink: 0;
	margin-right: 26px;
}
.cp-mock__url {
	margin: 0;
	flex: 1 1 auto;
	font-size: 0.72rem;
	color: var(--wp--preset--color--muted);
	background: var(--cp-mock-bg);
	border-radius: 999px;
	padding: 0.3rem 0.9rem;
	text-align: center;
	border: 1px solid var(--cp-card-border);
}
.cp-mock__body {
	gap: 0;
	align-items: stretch;
}
.cp-mock__body > .wp-block-column {
	flex-grow: 0;
}
.cp-mock__side {
	background: var(--cp-mock-side);
	padding: 1rem 0.9rem;
	border-right: 1px solid var(--cp-card-border);
	height: 100%;
	min-height: 100%;
}
.cp-mock__brand {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--wp--preset--color--contrast);
}
.cp-mock__brand::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 4px;
	margin-right: 0.45rem;
	background: linear-gradient(135deg, #D34CC9, var(--wp--preset--color--primary));
	vertical-align: -1px;
}
.cp-mock__nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.3rem;
}
.cp-mock__nav li {
	font-size: 0.74rem;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
	padding: 0.4rem 0.6rem;
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 0.45rem;
}
.cp-mock__nav li::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.45;
}
.cp-mock__nav li.is-active {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-deep);
}
.cp-mock__nav li.is-active::before {
	opacity: 1;
}
.cp-mock__main {
	padding: 1rem 1.1rem 1.1rem;
}
.cp-mock__main > * + * {
	margin-top: 0.9rem;
}
.cp-mock__heading {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cp-mock__heading span {
	font-size: 0.66rem;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}
.cp-mock__stats {
	gap: 0.6rem;
	margin: 0;
}
.cp-mock__stats .wp-block-column {
	flex-basis: 0;
	flex-grow: 1;
}
.cp-mock__stat {
	background: var(--cp-mock-side);
	border: 1px solid var(--cp-card-border);
	border-radius: 10px;
	padding: 0.65rem 0.75rem;
}
.cp-mock__stat > * {
	margin: 0;
}
.cp-mock__stat-label {
	font-size: 0.62rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
}
.cp-mock__stat-value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	line-height: 1.2;
	margin-top: 0.15rem;
}
.cp-mock__delta {
	font-size: 0.62rem;
	font-weight: 600;
	color: var(--wp--preset--color--success);
	filter: saturate(0.8) brightness(0.75);
}
.cp-mock__chart {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 92px;
	padding: 0.6rem 0.75rem 0;
	border-radius: 10px;
	border: 1px solid var(--cp-card-border);
	background:
		linear-gradient(var(--cp-grid-line) 1px, transparent 1px) 0 0 / 100% 23px,
		var(--cp-mock-side);
	overflow: hidden;
}
.cp-mock__chart > .wp-block-spacer {
	flex: 1 1 0;
	margin: 0 !important;
	border-radius: 4px 4px 0 0;
	background: linear-gradient(180deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary-deep) 100%);
	opacity: 0.85;
	transform-origin: bottom;
	animation: cp-grow 1.1s var(--cp-ease) both;
}
.cp-mock__chart > .wp-block-spacer:nth-child(2n) {
	opacity: 0.55;
}
.cp-mock__chart > .wp-block-spacer:nth-child(1) { animation-delay: 0.15s; }
.cp-mock__chart > .wp-block-spacer:nth-child(2) { animation-delay: 0.22s; }
.cp-mock__chart > .wp-block-spacer:nth-child(3) { animation-delay: 0.29s; }
.cp-mock__chart > .wp-block-spacer:nth-child(4) { animation-delay: 0.36s; }
.cp-mock__chart > .wp-block-spacer:nth-child(5) { animation-delay: 0.43s; }
.cp-mock__chart > .wp-block-spacer:nth-child(6) { animation-delay: 0.5s; }
.cp-mock__chart > .wp-block-spacer:nth-child(7) { animation-delay: 0.57s; }
.cp-mock__chart > .wp-block-spacer:nth-child(8) { animation-delay: 0.64s; }
.cp-mock__chart > .wp-block-spacer:nth-child(9) { animation-delay: 0.71s; }
.cp-mock__chart > .wp-block-spacer:nth-child(10) { animation-delay: 0.78s; }
.cp-mock__chart > .wp-block-spacer:nth-child(11) { animation-delay: 0.85s; }
.cp-mock__chart > .wp-block-spacer:nth-child(12) { animation-delay: 0.92s; }
.cp-mock__chart > .wp-block-spacer:last-child {
	opacity: 1;
	background: linear-gradient(180deg, #E3C64A 0%, var(--wp--preset--color--secondary) 100%);
}
.cp-mock__queue {
	display: grid;
	gap: 0.4rem;
}
.cp-mock__row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.6rem;
	border-radius: 10px;
	border: 1px solid var(--cp-card-border);
	background: var(--cp-mock-bg);
	font-size: 0.72rem;
	color: var(--wp--preset--color--contrast-soft);
	margin: 0;
}
.cp-mock__row > * {
	margin: 0;
}
.cp-mock__row .cp-mock__text {
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cp-mock__avatar {
	width: 22px;
	height: 22px;
	border-radius: 7px;
	flex-shrink: 0;
	font-size: 0;
}
.cp-mock__avatar--ig { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }
.cp-mock__avatar--li { background: #0A66C2; }
.cp-mock__avatar--tt { background: #111; box-shadow: inset -3px 0 0 #25F4EE, inset 3px 0 0 #FE2C55; }
.cp-mock__avatar--fb { background: #1877F2; }
.cp-mock__pill {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-deep);
	white-space: nowrap;
}
.cp-mock__pill--live {
	background: rgba(36, 249, 93, 0.16);
	color: #17823B;
}
:root[data-theme="dark"] .cp-mock__pill--live { color: #5BE38A; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cp-mock__pill--live { color: #5BE38A; }
}
.cp-mock__pill--gold {
	background: rgba(252, 226, 131, 0.5);
	color: #6B5505;
}

/* Floating notification card over the mockup */
.cp-mock__float {
	position: absolute;
	right: -2%;
	bottom: 10%;
	width: min(260px, 70%);
	background: var(--cp-mock-bg);
	border: 1px solid var(--cp-card-border);
	border-radius: 16px;
	padding: 0.85rem 1rem;
	box-shadow: var(--cp-shadow-lg);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	animation: cp-float 6s ease-in-out infinite;
	z-index: 2;
}
.cp-mock__float > * {
	margin: 0;
}
.cp-mock__float .cp-icon {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	margin: 0;
}
.cp-mock__float .cp-icon--check::before {
	left: 13px;
	top: 9px;
	width: 9px;
	height: 15px;
}
.cp-mock__float-text {
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
}
.cp-mock__float-text strong {
	display: block;
	font-weight: 600;
}
.cp-mock__float-text span {
	color: var(--wp--preset--color--muted);
}

/* Interactive Multi-Channel Composer Mockup */
.cp-composer-mock {
	position: relative;
	perspective: 1600px;
}
.cp-composer-mock__frame {
	background: var(--cp-mock-bg);
	border-radius: var(--cp-radius-lg);
	border: 1px solid var(--cp-card-border);
	box-shadow: var(--cp-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
	overflow: hidden;
	transform: rotateY(-5deg) rotateX(2deg);
	transform-origin: left center;
	transition: transform 0.8s var(--cp-ease), box-shadow 0.8s var(--cp-ease);
}
.cp-composer-mock:hover .cp-composer-mock__frame {
	transform: rotateY(-1deg) rotateX(1deg);
	box-shadow: var(--cp-shadow-lg), var(--cp-shadow-glow);
}
.cp-composer-mock__topbar {
	padding: 0.75rem 1.1rem;
	border-bottom: 1px solid var(--cp-card-border);
	display: flex;
	gap: 0.85rem;
	align-items: center;
	background: var(--cp-mock-side);
}
.cp-composer-mock__dots {
	margin: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #F2654B;
	box-shadow: 16px 0 0 #F4BD48, 32px 0 0 #4FCB6A;
	font-size: 0;
	flex-shrink: 0;
	margin-right: 28px;
}
.cp-composer-mock__url {
	margin: 0;
	flex: 1 1 auto;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
	background: var(--cp-mock-bg);
	border-radius: 999px;
	padding: 0.35rem 0.95rem;
	text-align: center;
	border: 1px solid var(--cp-card-border);
}
.cp-composer-mock__status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.72rem;
	font-weight: 600;
	color: #17823B;
	background: rgba(36, 249, 93, 0.14);
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
}
:root[data-theme="dark"] .cp-composer-mock__status { color: #5BE38A; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cp-composer-mock__status { color: #5BE38A; }
}
.cp-composer-mock__body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.cp-composer-mock__channels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--cp-card-border);
}
.cp-composer-channel {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--cp-card-border);
	background: var(--cp-mock-side);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-soft);
	transition: all var(--cp-fast) ease;
}
.cp-composer-channel.is-active {
	background: var(--wp--preset--color--primary-soft);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-deep);
}
.cp-composer-channel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}
.cp-composer-channel__dot--ig { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }
.cp-composer-channel__dot--li { background: #0A66C2; }
.cp-composer-channel__dot--x { background: #201B23; }
.cp-composer-channel__dot--threads { background: #201B23; }
:root[data-theme="dark"] .cp-composer-channel__dot--x,
:root[data-theme="dark"] .cp-composer-channel__dot--threads { background: #F1EBF4; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cp-composer-channel__dot--x,
	:root:not([data-theme="light"]) .cp-composer-channel__dot--threads { background: #F1EBF4; }
}
.cp-composer-mock__editor {
	background: var(--cp-mock-side);
	border: 1px solid var(--cp-card-border);
	border-radius: var(--cp-radius-md);
	padding: 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}
.cp-composer-mock__author {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.cp-composer-mock__user {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.cp-composer-mock__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient(135deg, #9747FF, #7823E7);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 0.72rem;
}
.cp-composer-mock__name {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}
.cp-composer-mock__tag {
	font-size: 0.68rem;
	color: var(--wp--preset--color--muted);
	font-weight: 500;
}
.cp-composer-mock__text {
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}
.cp-composer-mock__media-strip {
	display: flex;
	gap: 0.6rem;
}
.cp-composer-mock__media-card {
	flex: 1 1 0;
	background: var(--cp-mock-bg);
	border: 1px solid var(--cp-card-border);
	border-radius: 8px;
	padding: 0.65rem 0.8rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.72rem;
	color: var(--wp--preset--color--muted);
	font-weight: 500;
}
.cp-composer-mock__media-thumb {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	background: linear-gradient(135deg, #9747FF 0%, #FCE283 100%);
	flex-shrink: 0;
}
.cp-composer-mock__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 0.5rem;
	border-top: 1px solid var(--cp-card-border);
}
.cp-composer-mock__meta {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-size: 0.74rem;
	color: var(--wp--preset--color--muted);
	font-weight: 500;
}
.cp-composer-mock__btn {
	background: var(--wp--preset--color--primary-deep);
	color: #FFFFFF;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.45rem 0.95rem;
	border-radius: 999px;
	border: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	box-shadow: 0 4px 12px rgba(151, 71, 255, 0.28);
}

/* Floating Status Badges for Composer */
.cp-composer-float {
	position: absolute;
	background: var(--cp-mock-bg);
	border: 1px solid var(--cp-card-border);
	border-radius: 14px;
	padding: 0.75rem 1rem;
	box-shadow: var(--cp-shadow-lg);
	display: flex;
	align-items: center;
	gap: 0.7rem;
	z-index: 2;
	animation: cp-float 6s ease-in-out infinite;
}
.cp-composer-float--top {
	right: -4%;
	top: 16%;
	animation-delay: -1.5s;
}
.cp-composer-float--bottom {
	left: -4%;
	bottom: 8%;
	animation-delay: -3.5s;
}
.cp-composer-float__icon {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 0.9rem;
}
.cp-composer-float__icon--success {
	background: rgba(36, 249, 93, 0.2);
	color: #17823B;
}
.cp-composer-float__icon--rocket {
	background: rgba(151, 71, 255, 0.18);
	color: var(--wp--preset--color--primary-deep);
}
.cp-composer-float__content {
	display: flex;
	flex-direction: column;
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
}
.cp-composer-float__content strong {
	font-weight: 700;
}
.cp-composer-float__content span {
	color: var(--wp--preset--color--muted);
	font-size: 0.68rem;
}

/* ==========================================================================
   10. Platform chips
   ========================================================================== */

.cp-chips {
	gap: 0.6rem;
	justify-content: center;
}
.cp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.5rem 1rem 0.5rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--cp-card-border);
	background: var(--wp--preset--color--surface);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-soft);
	box-shadow: var(--cp-shadow-sm);
	transition: transform var(--cp-fast) var(--cp-ease), box-shadow var(--cp-fast) var(--cp-ease), border-color var(--cp-fast) ease, background-color var(--cp-fast) ease;
}
.cp-chip:hover {
	transform: translateY(-2px);
	border-color: rgba(151, 71, 255, 0.35);
	box-shadow: var(--cp-shadow-md);
	background: var(--wp--preset--color--primary-soft);
}
.cp-chip::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	flex-shrink: 0;
}
.cp-chip--facebook::before { background: #1877F2; }
.cp-chip--instagram::before { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }
.cp-chip--tiktok::before { background: #111; box-shadow: inset -2px 0 0 #25F4EE, inset 2px 0 0 #FE2C55; }
.cp-chip--linkedin::before { background: #0A66C2; }
.cp-chip--x::before { background: #201B23; }
.cp-chip--youtube::before { background: #FF0033; }
.cp-chip--pinterest::before { background: #E60023; }
.cp-chip--mastodon::before { background: #6364FF; }
.cp-chip--threads::before { background: #201B23; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 10px #201B23; }
.cp-chip--bluesky::before { background: #0085FF; }
.cp-chip--gbp::before { background: #4285F4; }
:root[data-theme="dark"] .cp-chip--x::before,
:root[data-theme="dark"] .cp-chip--threads::before,
:root[data-theme="dark"] .cp-chip--tiktok::before { background: #F1EBF4; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cp-chip--x::before,
	:root:not([data-theme="light"]) .cp-chip--threads::before,
	:root:not([data-theme="light"]) .cp-chip--tiktok::before { background: #F1EBF4; }
}
.cp-chips-label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 1.25rem;
}

/* ==========================================================================
   10b. Bento Grid feature layout
   ========================================================================== */

.cp-bento-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem;
}
.cp-bento-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--cp-card-border);
	border-radius: var(--cp-radius-lg);
	padding: 2.2rem 2rem;
	display: flex;
	flex-direction: column;
	box-shadow: var(--cp-shadow-sm);
	position: relative;
	overflow: hidden;
	transition: transform var(--cp-base) var(--cp-ease), box-shadow var(--cp-base) var(--cp-ease), border-color var(--cp-base) ease;
}
.cp-bento-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--cp-shadow-lg);
	border-color: rgba(151, 71, 255, 0.3);
}
.cp-bento-card--featured {
	grid-column: span 8;
}
.cp-bento-card--tall {
	grid-column: span 4;
}
.cp-bento-card--third {
	grid-column: span 4;
}

.cp-bento-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-deep);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 1.1rem;
	align-self: flex-start;
}
.cp-bento-card__badge--gold {
	background: rgba(252, 226, 131, 0.35);
	color: #6B5505;
}
:root[data-theme="dark"] .cp-bento-card__badge--gold {
	color: #FCE283;
	background: rgba(252, 226, 131, 0.15);
}
.cp-bento-card__badge--success {
	background: rgba(36, 249, 93, 0.18);
	color: #17823B;
}
:root[data-theme="dark"] .cp-bento-card__badge--success {
	color: #5BE38A;
}

.cp-bento-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: var(--cp-tracking-heading);
	line-height: 1.22;
	color: var(--wp--preset--color--contrast);
	margin-top: 0;
	margin-bottom: 0.75rem;
}
.cp-bento-card__desc {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	margin-top: 0;
	margin-bottom: 1.5rem;
}

/* Bento Micro-Mockup Previews */
.cp-bento-preview {
	margin-top: auto;
	background: var(--cp-mock-side);
	border: 1px solid var(--cp-card-border);
	border-radius: var(--cp-radius-md);
	padding: 1.1rem;
	overflow: hidden;
}

/* Micro-Calendar Preview */
.cp-preview-calendar {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.5rem;
}
.cp-preview-calendar__col {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.cp-preview-calendar__day {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
	text-align: center;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--cp-card-border);
}
.cp-preview-calendar__slot {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--cp-card-border);
	border-radius: 6px;
	padding: 0.4rem 0.45rem;
	font-size: 0.65rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.cp-preview-calendar__slot--active {
	border-left: 3px solid var(--wp--preset--color--primary);
}
.cp-preview-calendar__slot--ig {
	border-left: 3px solid #E1306C;
}
.cp-preview-calendar__slot--li {
	border-left: 3px solid #0A66C2;
}
.cp-preview-calendar__slot--x {
	border-left: 3px solid #201B23;
}
:root[data-theme="dark"] .cp-preview-calendar__slot--x {
	border-left-color: #F1EBF4;
}
.cp-preview-calendar__time {
	font-size: 0.6rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}
.cp-preview-calendar__title {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Micro-Inbox Preview */
.cp-preview-inbox {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.cp-preview-inbox__item {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--cp-card-border);
	border-radius: 8px;
	padding: 0.65rem 0.75rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.cp-preview-inbox__avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-deep);
	font-size: 0.65rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.cp-preview-inbox__content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-size: 0.7rem;
}
.cp-preview-inbox__name {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	display: flex;
	align-items: center;
	gap: 0.35rem;
}
.cp-preview-inbox__badge {
	font-size: 0.58rem;
	font-weight: 600;
	padding: 0.1rem 0.35rem;
	border-radius: 4px;
	background: var(--cp-mock-side);
	color: var(--wp--preset--color--muted);
}
.cp-preview-inbox__text {
	color: var(--wp--preset--color--contrast-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}

/* Micro-Analytics Preview */
.cp-preview-analytics {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.cp-preview-analytics__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.cp-preview-analytics__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--wp--preset--color--contrast);
	letter-spacing: -0.03em;
	line-height: 1;
}
.cp-preview-analytics__delta {
	font-size: 0.72rem;
	font-weight: 700;
	color: #17823B;
	background: rgba(36, 249, 93, 0.16);
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
}
:root[data-theme="dark"] .cp-preview-analytics__delta { color: #5BE38A; }
.cp-preview-analytics__bars {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	height: 48px;
	padding-top: 0.4rem;
}
.cp-preview-analytics__bar {
	flex: 1 1 0;
	background: var(--wp--preset--color--primary);
	border-radius: 3px 3px 0 0;
	opacity: 0.8;
}
.cp-preview-analytics__bar:nth-child(even) { opacity: 0.5; }
.cp-preview-analytics__bar:last-child {
	background: linear-gradient(180deg, #E3C64A 0%, var(--wp--preset--color--secondary) 100%);
	opacity: 1;
}

/* Micro-Approvals Preview */
.cp-preview-approvals {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.cp-preview-approvals__card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--cp-card-border);
	border-radius: 8px;
	padding: 0.75rem 0.85rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.cp-preview-approvals__info {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.cp-preview-approvals__status {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6B5505;
	background: rgba(252, 226, 131, 0.5);
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
}
:root[data-theme="dark"] .cp-preview-approvals__status {
	color: #FCE283;
	background: rgba(252, 226, 131, 0.15);
}
.cp-preview-approvals__btn {
	background: var(--wp--preset--color--primary-deep);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 600;
	padding: 0.3rem 0.65rem;
	border-radius: 6px;
	border: none;
}

/* Micro-Privacy Preview */
.cp-preview-privacy {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--cp-card-border);
	border-radius: 8px;
	padding: 0.75rem 0.85rem;
}
.cp-preview-privacy__flag {
	font-size: 1.4rem;
	line-height: 1;
}
.cp-preview-privacy__text {
	display: flex;
	flex-direction: column;
	font-size: 0.72rem;
	color: var(--wp--preset--color--contrast);
}
.cp-preview-privacy__text strong {
	font-weight: 700;
}
.cp-preview-privacy__text span {
	font-size: 0.65rem;
	color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   11. Split sections and CSS visuals
   ========================================================================== */

.cp-split {
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}
.cp-split h2 {
	margin-bottom: 1rem;
}
.cp-split .cp-lead {
	margin-left: 0;
	margin-bottom: 1.5rem;
}
.cp-split p {
	color: var(--wp--preset--color--contrast-soft);
}
.cp-split .cp-lead {
	color: var(--wp--preset--color--muted);
}

/* Check list */
.cp-check-list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
	display: grid;
	gap: 0.75rem;
}
.cp-check-list li {
	position: relative;
	padding-left: 2rem;
	color: var(--wp--preset--color--contrast-soft);
	line-height: 1.5;
}
.cp-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-soft);
}
.cp-check-list li::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 0.36em;
	width: 5px;
	height: 9px;
	border-right: 2px solid var(--wp--preset--color--primary-deep);
	border-bottom: 2px solid var(--wp--preset--color--primary-deep);
	transform: rotate(45deg);
}

/* Visual stage: a gradient panel with layered CSS cards inside */
.cp-visual {
	position: relative;
	border-radius: var(--cp-radius-xl);
	min-height: 400px;
	padding: 2rem;
	overflow: hidden;
	background:
		radial-gradient(70% 60% at 100% 0%, var(--cp-hero-glow) 0%, transparent 60%),
		radial-gradient(60% 60% at 0% 100%, var(--cp-hero-glow-2) 0%, transparent 60%),
		var(--cp-hero-bg);
	border: 1px solid var(--cp-card-border);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.9rem;
}
.cp-visual::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(var(--cp-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--cp-grid-line) 1px, transparent 1px);
	background-size: 40px 40px;
	pointer-events: none;
}
.cp-visual > * {
	position: relative;
	z-index: 1;
	margin: 0;
}
.cp-vcard {
	background: var(--cp-mock-bg);
	border: 1px solid var(--cp-card-border);
	border-radius: 14px;
	padding: 0.9rem 1rem;
	box-shadow: var(--cp-shadow-md);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast);
	transition: transform var(--cp-base) var(--cp-ease), box-shadow var(--cp-base) var(--cp-ease);
}
.cp-vcard > * {
	margin: 0;
}
.cp-vcard strong {
	display: block;
	font-weight: 600;
}
.cp-vcard span {
	color: var(--wp--preset--color--muted);
	font-size: 0.78rem;
}
.cp-vcard .cp-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	margin: 0;
	transform: scale(0.7);
	transform-origin: center;
	margin: -6px;
}
.cp-vcard--1 { margin-right: 18%; }
.cp-vcard--2 { margin-left: 14%; margin-right: 4%; }
.cp-vcard--3 { margin-right: 24%; }
.cp-visual:hover .cp-vcard--1 { transform: translateX(6px); }
.cp-visual:hover .cp-vcard--2 { transform: translateX(-6px); }
.cp-visual:hover .cp-vcard--3 { transform: translateX(6px); }
.cp-vcard__text {
	flex: 1 1 auto;
}
.cp-vcard .cp-mock__pill {
	margin-left: auto;
}

/* Progress bars inside visuals */
.cp-bar {
	height: 10px;
	border-radius: 999px;
	background: var(--cp-mock-track);
	position: relative;
	overflow: hidden;
	margin: 0;
	font-size: 0;
}
.cp-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	width: var(--w, 60%);
	border-radius: inherit;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-deep));
}
.cp-bar--40::after { --w: 40%; }
.cp-bar--55::after { --w: 55%; }
.cp-bar--70::after { --w: 70%; }
.cp-bar--85::after { --w: 85%; }
.cp-bar--gold::after { background: linear-gradient(90deg, #E3C64A, var(--wp--preset--color--secondary)); }

/* Calendar visual */
.cp-cal {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	background: var(--cp-mock-bg);
	border: 1px solid var(--cp-card-border);
	border-radius: 16px;
	padding: 1rem;
	box-shadow: var(--cp-shadow-md);
}
.cp-cal > p {
	margin: 0;
	aspect-ratio: 1;
	border-radius: 8px;
	background: var(--cp-mock-side);
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 0.3rem 0.4rem;
	position: relative;
}
.cp-cal > p.is-day {
	background: transparent;
	aspect-ratio: auto;
	justify-content: center;
	padding: 0 0 0.25rem;
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.cp-cal > p.is-post::after,
.cp-cal > p.is-post-2::after,
.cp-cal > p.is-post-3::after {
	content: "";
	position: absolute;
	left: 0.35rem;
	right: 0.35rem;
	bottom: 0.35rem;
	height: 5px;
	border-radius: 3px;
	background: var(--wp--preset--color--primary);
}
.cp-cal > p.is-post-2::after {
	background: var(--wp--preset--color--secondary);
}
.cp-cal > p.is-post-3::after {
	background: linear-gradient(90deg, #F58529, #DD2A7B);
}
.cp-cal > p.is-today {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-deep);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--primary);
}

/* Analytics visual */
.cp-bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 160px;
	padding: 1rem 1rem 0;
	background: var(--cp-mock-bg);
	border: 1px solid var(--cp-card-border);
	border-radius: 16px;
	box-shadow: var(--cp-shadow-md);
	overflow: hidden;
	background-image: linear-gradient(var(--cp-grid-line) 1px, transparent 1px);
	background-size: 100% 32px;
}
.cp-bars > .wp-block-spacer {
	flex: 1 1 0;
	margin: 0 !important;
	border-radius: 6px 6px 0 0;
	background: linear-gradient(180deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-deep));
	opacity: 0.8;
	transform-origin: bottom;
	animation: cp-grow 1.1s var(--cp-ease) both;
}
.cp-bars > .wp-block-spacer:nth-child(2n) { opacity: 0.5; }
.cp-bars > .wp-block-spacer:last-child {
	opacity: 1;
	background: linear-gradient(180deg, #E3C64A, var(--wp--preset--color--secondary));
}
.cp-visual .cp-mock__stats {
	gap: 0.75rem;
}
.cp-visual .cp-mock__stat {
	background: var(--cp-mock-bg);
	box-shadow: var(--cp-shadow-sm);
}

/* Integrations orbit */
.cp-orbit {
	position: relative;
	height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cp-orbit::before {
	content: "";
	position: absolute;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	border: 1.5px dashed rgba(151, 71, 255, 0.35);
	animation: cp-spin 60s linear infinite;
}
.cp-orbit::after {
	content: "";
	position: absolute;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	border: 1.5px solid rgba(151, 71, 255, 0.2);
}
.cp-orbit__center {
	position: relative;
	z-index: 2;
	width: 96px;
	height: 96px;
	margin: 0;
	border-radius: 28px;
	background: var(--cp-mock-bg);
	box-shadow: var(--cp-shadow-lg), var(--cp-shadow-glow);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
}
.cp-orbit__center img {
	width: 100%;
	height: auto;
}
.cp-orbit .cp-chip {
	position: absolute;
	z-index: 2;
	font-size: 0.8rem;
	padding: 0.4rem 0.85rem 0.4rem 0.65rem;
	animation: cp-float 7s ease-in-out infinite;
}
.cp-orbit .cp-chip:nth-of-type(1) { top: 6%; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.cp-orbit .cp-chip:nth-of-type(2) { top: 24%; right: 6%; animation-delay: -1s; }
.cp-orbit .cp-chip:nth-of-type(3) { bottom: 24%; right: 6%; animation-delay: -2s; }
.cp-orbit .cp-chip:nth-of-type(4) { bottom: 6%; left: 50%; transform: translateX(-50%); animation-delay: -3s; }
.cp-orbit .cp-chip:nth-of-type(5) { bottom: 24%; left: 6%; animation-delay: -4s; }
.cp-orbit .cp-chip:nth-of-type(6) { top: 24%; left: 6%; animation-delay: -5s; }

/* Why section: layered privacy visual */
.cp-layers {
	position: relative;
	min-height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cp-layers__plate {
	position: absolute;
	width: 70%;
	aspect-ratio: 4 / 3;
	border-radius: 24px;
	background: var(--cp-mock-bg);
	border: 1px solid var(--cp-card-border);
	box-shadow: var(--cp-shadow-md);
	margin: 0;
	font-size: 0;
}
.cp-layers__plate--1 { transform: translate(-14%, 12%) rotate(-6deg); opacity: 0.6; }
.cp-layers__plate--2 { transform: translate(10%, -8%) rotate(5deg); opacity: 0.8; }
.cp-layers__card {
	position: relative;
	z-index: 2;
	width: 72%;
	background: var(--cp-mock-bg);
	border: 1px solid var(--cp-card-border);
	border-radius: 24px;
	padding: 1.5rem;
	box-shadow: var(--cp-shadow-lg);
}
.cp-layers__card > * + * {
	margin-top: 0.75rem;
}
.cp-layers__card .cp-icon {
	margin-bottom: 0.25rem;
}
.cp-layers__card h4 {
	margin: 0;
	font-size: 1.1rem;
}
.cp-layers__card p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}
.cp-layers__card .cp-bar {
	margin-top: 0.5rem;
}

/* Strip of small facts */
.cp-strip {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.cp-strip__item {
	gap: 1rem;
	align-items: flex-start;
	flex-wrap: nowrap;
}
.cp-strip__item .cp-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	margin: 0;
	transform: scale(0.85);
	transform-origin: top left;
}
.cp-strip__item h4 {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
}
.cp-strip__item p {
	margin: 0;
	font-size: 0.92rem;
	color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   12. Pricing
   ========================================================================== */

.cp-plan {
	padding: 2.25rem 2rem;
}
.cp-plan__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}
.cp-plan__tag {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-deep);
	margin: 0 0 0.75rem;
}
.cp-plan__tag--gold {
	background: var(--wp--preset--color--secondary-light);
	color: #4A3B05;
}
.cp-plan__desc {
	color: var(--wp--preset--color--muted);
	margin: 0.5rem 0 0;
}
.cp-plan .cp-check-list {
	margin-top: 1.5rem;
	margin-bottom: 1.75rem;
}
.cp-plan--featured {
	border-color: rgba(151, 71, 255, 0.4);
	box-shadow: var(--cp-shadow-lg), 0 0 0 4px var(--wp--preset--color--primary-soft);
}
.cp-plan--featured::after {
	content: "";
	position: absolute;
	inset: -40% 40% auto -20%;
	height: 60%;
	background: radial-gradient(closest-side, rgba(151, 71, 255, 0.18), transparent);
	pointer-events: none;
}
.cp-pricing-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-top: 1.5rem;
}

/* ==========================================================================
   13. FAQ (details blocks)
   ========================================================================== */

.cp-faq {
	display: grid;
	gap: 0.75rem;
}
.cp-faq > * + * {
	margin-top: 0;
}
.cp-faq-item {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--cp-card-border);
	border-radius: var(--cp-radius-md);
	padding: 0 1.5rem;
	box-shadow: var(--cp-shadow-sm);
	transition: border-color var(--cp-fast) ease, box-shadow var(--cp-fast) ease;
}
.cp-faq-item:hover {
	border-color: rgba(151, 71, 255, 0.3);
}
.cp-faq-item[open] {
	box-shadow: var(--cp-shadow-md);
	border-color: rgba(151, 71, 255, 0.3);
}
.cp-faq-item > summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 1.2rem 3rem 1.2rem 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	line-height: 1.3;
}
.cp-faq-item > summary::-webkit-details-marker {
	display: none;
}
.cp-faq-item > summary::before,
.cp-faq-item > summary::after {
	content: "";
	position: absolute;
	right: 0.35rem;
	top: 50%;
	width: 14px;
	height: 2px;
	background: var(--wp--preset--color--primary-deep);
	transform: translateY(-50%);
	transition: transform var(--cp-base) var(--cp-ease), opacity var(--cp-base) ease;
	border-radius: 2px;
}
.cp-faq-item > summary::after {
	transform: translateY(-50%) rotate(90deg);
}
.cp-faq-item[open] > summary::after {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}
.cp-faq-item > summary::marker {
	content: "";
}
.cp-faq-item > *:not(summary) {
	padding-bottom: 1.25rem;
	color: var(--wp--preset--color--muted);
	margin-top: 0;
	line-height: 1.65;
}
.cp-faq-item[open] > summary {
	animation: cp-fade 0.3s ease;
}

/* ==========================================================================
   14. Testimonial and CTA band
   ========================================================================== */

.cp-testimonial {
	text-align: center;
}
.cp-quote-mark {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 6rem;
	line-height: 0.6;
	color: var(--wp--preset--color--primary);
	margin: 0 0 1rem;
	font-weight: 500;
	opacity: 0.8;
}
.cp-testimonial__quote {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.2rem, 2vw, 1.55rem);
	font-weight: 500;
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	letter-spacing: -0.005em;
}
.cp-testimonial__author {
	margin-top: 2rem;
	gap: 1rem;
}
.cp-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, #D34CC9, var(--wp--preset--color--primary-deep));
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--cp-shadow-glow);
	flex-shrink: 0;
}
.cp-avatar__initials {
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.1rem;
}
.cp-testimonial__name {
	text-align: left;
	margin: 0;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}
.cp-testimonial__name strong {
	color: var(--wp--preset--color--contrast);
}

.cp-cta-band {
	position: relative;
	color: #FFFFFF;
	background:
		radial-gradient(60% 90% at 90% 10%, rgba(151, 71, 255, 0.55) 0%, transparent 60%),
		radial-gradient(50% 70% at 5% 95%, rgba(252, 226, 131, 0.25) 0%, transparent 60%),
		linear-gradient(120deg, var(--cp-band-start) 0%, var(--cp-band-end) 100%);
	overflow: hidden;
}
.cp-cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000 20%, transparent 100%);
	mask-image: radial-gradient(70% 90% at 50% 50%, #000 20%, transparent 100%);
	pointer-events: none;
}
.cp-cta-band > * {
	position: relative;
	z-index: 1;
}
.cp-cta-band h2,
.cp-cta-band h3,
.cp-cta-band p {
	color: #FFFFFF;
}
.cp-cta-band .cp-lead {
	color: rgba(255, 255, 255, 0.8);
	margin-top: 1.25rem;
	margin-bottom: 2rem;
}
.cp-cta-band .cp-lead a {
	color: #FFFFFF;
	text-decoration-color: var(--wp--preset--color--secondary-light);
	font-weight: 600;
}

/* ==========================================================================
   15. Prompt library
   ========================================================================== */

.cp-category-head {
	gap: 1rem;
	align-items: center;
	margin-bottom: 1.5rem;
	margin-top: 0;
}
.cp-category-head h3 {
	margin: 0;
}
.cp-category-head .cp-icon {
	margin: 0;
}
.cp-prompt-grid {
	gap: 1.25rem;
}
.cp-prompt-card {
	padding: 1.75rem;
}
.cp-prompt-card__tag {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-deep);
	margin: 0 0 0.5rem;
}
.cp-prompt-card h4 {
	margin: 0 0 0.75rem;
	font-size: 1.2rem;
}
.cp-prompt-card__text {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-soft);
	background: var(--wp--preset--color--surface-alt);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 0 10px 10px 0;
	padding: 1rem 1.1rem;
	margin: 0;
	user-select: all;
}
.cp-prompt-card__hint {
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted);
	margin: 0.9rem 0 0;
}

/* ==========================================================================
   16. Contact
   ========================================================================== */

.cp-contact-card {
	padding: 2.25rem;
}
.cp-contact-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
	flex-wrap: nowrap;
}
.cp-contact-row:first-of-type {
	border-top: 0;
}
.cp-contact-row .cp-icon {
	margin: 0;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	transform: scale(0.85);
}
.cp-contact-row p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.92rem;
}
.cp-contact-row p strong {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
}
.cp-contact-row p a {
	color: var(--wp--preset--color--primary-deep);
	font-weight: 600;
	text-decoration: none;
}
.cp-contact-row p a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   17. Blog cards, pagination, search
   ========================================================================== */

.cp-blog-grid {
	gap: 1.5rem;
}
.cp-post-card .wp-block-post-featured-image {
	margin-bottom: 1.25rem;
}
.cp-post-card .wp-block-post-featured-image:empty {
	display: none;
}
.cp-post-card__date {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-deep);
	margin: 0 0 0.6rem;
}
.cp-post-card__title {
	margin: 0 0 0.75rem;
	line-height: 1.25;
}
.cp-post-card__title a {
	text-decoration: none;
}
.cp-post-card__excerpt {
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	margin: 0;
}
.cp-post-card__excerpt .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--primary-deep);
}
.cp-post-card__excerpt .wp-block-post-excerpt__more-link::after {
	content: " \2192";
}
.cp-post-card__excerpt p {
	margin: 0;
}
.cp-post-card > * + * {
	margin-top: 0;
}
.cp-pagination {
	margin-top: 3rem;
	gap: 0.75rem;
}
.cp-pagination a,
.cp-pagination .page-numbers {
	text-decoration: none;
	font-weight: 600;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}
.cp-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary-deep);
	color: var(--cp-btn-fg);
	border-color: transparent;
}
.cp-pagination a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-deep);
}
.cp-post-nav {
	font-weight: 600;
}
.cp-post-nav a {
	text-decoration: none;
}
.cp-search {
	max-width: 520px;
	margin: 1.75rem auto;
}
.cp-search .wp-block-search__inside-wrapper {
	border-radius: 999px;
	border: 1.5px solid var(--wp--preset--color--line);
	padding: 4px 4px 4px 1rem;
	background: var(--wp--preset--color--surface);
}
.cp-search .wp-block-search__input {
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
}
.cp-search .wp-block-search__input:focus {
	outline: none;
}
.cp-search .wp-block-search__button {
	border-radius: 999px;
	margin-left: 0.5rem;
	padding: 0.6rem 1.1rem;
}
.cp-rule {
	border-color: var(--wp--preset--color--line);
}

/* ==========================================================================
   18. Footer
   ========================================================================== */

.cp-footer {
	background: var(--wp--preset--color--surface-alt);
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast-soft);
}
.cp-footer__brand {
	margin-bottom: 1rem;
}
.cp-footer__icon {
	margin: 0;
	line-height: 0;
	filter: drop-shadow(0 6px 14px rgba(151, 71, 255, 0.3));
}
.cp-footer__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.cp-footer__tagline {
	max-width: 36ch;
	font-size: 0.95rem;
	margin-bottom: 1.5rem;
}
.cp-social {
	margin: 0;
}
.cp-social .wp-social-link {
	transition: transform var(--cp-fast) var(--cp-ease), background-color var(--cp-fast) var(--cp-ease);
	background-color: #201B23 !important;
	color: #FFFFFF !important;
}
.cp-social .wp-social-link svg {
	fill: #FFFFFF;
}
.cp-social .wp-social-link:hover {
	transform: translateY(-2px);
	background-color: #6A1FD0 !important;
}
.cp-social .wp-social-link:focus-visible {
	outline: 3px solid #6A1FD0;
	outline-offset: 3px;
}
:root[data-theme="dark"] .cp-social .wp-social-link {
	background-color: #FFFFFF !important;
	color: #201B23 !important;
}
:root[data-theme="dark"] .cp-social .wp-social-link svg {
	fill: #201B23;
}
:root[data-theme="dark"] .cp-social .wp-social-link:hover {
	background-color: #FCE283 !important;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cp-social .wp-social-link {
		background-color: #FFFFFF !important;
		color: #201B23 !important;
	}
	:root:not([data-theme="light"]) .cp-social .wp-social-link svg {
		fill: #201B23;
	}
	:root:not([data-theme="light"]) .cp-social .wp-social-link:hover {
		background-color: #FCE283 !important;
	}
}
.cp-footer__heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 1rem;
}
.cp-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.6rem;
}
.cp-footer__list a {
	color: var(--wp--preset--color--contrast-soft);
	text-decoration: none;
	font-size: 0.95rem;
}
.cp-footer__list a:hover {
	color: var(--wp--preset--color--primary-deep);
	text-decoration: underline;
}
.cp-footer__rule {
	border-color: var(--wp--preset--color--line);
	opacity: 1;
}
.cp-footer__bottom {
	gap: 1rem;
	color: var(--wp--preset--color--muted);
}
.cp-footer__legal,
.cp-footer__contact {
	margin: 0;
	color: var(--wp--preset--color--muted);
}
.cp-footer__legal a,
.cp-footer__contact a {
	color: var(--wp--preset--color--contrast-soft);
	text-decoration: none;
	font-weight: 600;
}
.cp-footer__legal a:hover,
.cp-footer__contact a:hover {
	color: var(--wp--preset--color--primary-deep);
	text-decoration: underline;
}

/* ==========================================================================
   19. Motion
   ========================================================================== */

@keyframes cp-fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes cp-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes cp-grow {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}
@keyframes cp-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -10px; }
}
@keyframes cp-drift {
	from { transform: translate(0, 0) scale(1); }
	to { transform: translate(-6%, 6%) scale(1.08); }
}
@keyframes cp-spin {
	to { transform: rotate(360deg); }
}
@keyframes cp-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(36, 249, 93, 0.2); }
	50% { box-shadow: 0 0 0 8px rgba(36, 249, 93, 0.05); }
}

.cp-fade-up {
	animation: cp-fade-up var(--cp-slow) var(--cp-ease) both;
}
.cp-fade-up-delay-1 {
	animation: cp-fade-up var(--cp-slow) var(--cp-ease) 0.12s both;
}
.cp-fade-up-delay-2 {
	animation: cp-fade-up 0.9s var(--cp-ease) 0.25s both;
}
.cp-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity var(--cp-slow) var(--cp-ease), transform var(--cp-slow) var(--cp-ease);
}
.cp-reveal.is-visible {
	opacity: 1;
	transform: none;
}
.cp-reveal-stagger > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s var(--cp-ease), transform 0.6s var(--cp-ease);
}
.cp-reveal.is-visible .cp-reveal-stagger > *,
.cp-reveal-stagger.is-visible > * {
	opacity: 1;
	transform: none;
}
.cp-reveal-stagger > *:nth-child(1) { transition-delay: 0.05s; }
.cp-reveal-stagger > *:nth-child(2) { transition-delay: 0.13s; }
.cp-reveal-stagger > *:nth-child(3) { transition-delay: 0.21s; }
.cp-reveal-stagger > *:nth-child(4) { transition-delay: 0.29s; }
.cp-reveal-stagger > *:nth-child(5) { transition-delay: 0.37s; }
.cp-reveal-stagger > *:nth-child(6) { transition-delay: 0.45s; }
.cp-reveal-stagger > *:nth-child(7) { transition-delay: 0.53s; }
.cp-reveal-stagger > *:nth-child(8) { transition-delay: 0.61s; }
.cp-reveal-stagger > *:nth-child(9) { transition-delay: 0.69s; }
.cp-reveal-stagger > *:nth-child(10) { transition-delay: 0.77s; }

/* Editor: keep animated content visible while editing */
.editor-styles-wrapper .cp-reveal,
.editor-styles-wrapper .cp-reveal-stagger > *,
.editor-styles-wrapper .cp-fade-up,
.editor-styles-wrapper .cp-fade-up-delay-1,
.editor-styles-wrapper .cp-fade-up-delay-2,
.editor-styles-wrapper .cp-mock__chart > .wp-block-spacer,
.editor-styles-wrapper .cp-bars > .wp-block-spacer {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
}
.editor-styles-wrapper .cp-mock__chart > .wp-block-spacer:nth-child(2n),
.editor-styles-wrapper .cp-bars > .wp-block-spacer:nth-child(2n) {
	opacity: 0.55 !important;
}
.editor-styles-wrapper .cp-mock__frame {
	transform: none;
}
.editor-styles-wrapper header.cp-site-header {
	position: relative;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.cp-reveal,
	.cp-reveal-stagger > *,
	.cp-fade-up,
	.cp-fade-up-delay-1,
	.cp-fade-up-delay-2 {
		opacity: 1 !important;
		transform: none !important;
	}
	.cp-mock__frame {
		transform: none;
	}
}

/* ==========================================================================
   20. Responsive
   ========================================================================== */

@media (max-width: 1180px) {
	.cp-nav {
		font-size: 0.9rem;
	}
	.cp-nav .wp-block-navigation__container {
		gap: 1.1rem;
	}
}

/* Collapse the navigation into the overlay menu below 1024px, not only below 600px. */
@media (min-width: 600px) and (max-width: 1023px) {
	.cp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.cp-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.cp-nav .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}
}

/* Collapsed header: logo left, actions + menu button grouped on the right. */
@media (max-width: 1023px) {
	.cp-nav {
		flex: 0 0 auto;
		order: 3;
	}
	.cp-header__actions {
		margin-left: auto;
	}
}

@media (max-width: 1023px) {
	.cp-mock__frame,
	.cp-composer-mock__frame {
		transform: none;
	}
	.cp-hero__grid > .wp-block-column {
		flex-basis: 100% !important;
	}
	.cp-visual {
		min-height: 320px;
	}
	.cp-orbit {
		height: 320px;
	}
}

@media (max-width: 781px) {
	.cp-hero {
		text-align: left;
	}
	.cp-hero__title {
		font-size: clamp(2.25rem, 9vw, 3rem);
	}
	.cp-mock,
	.cp-composer-mock {
		margin-top: 1rem;
	}
	.cp-mock__float,
	.cp-composer-float {
		position: static;
		width: 100%;
		margin-top: 1rem;
		animation: none;
	}
	.cp-mock__body > .wp-block-column:first-child {
		display: none;
	}
	.cp-footer__columns {
		gap: 2rem;
	}
	.cp-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
	.cp-cards > .wp-block-column,
	.cp-split > .wp-block-column {
		flex-basis: 100% !important;
	}
	.cp-split.cp-split--flip > .wp-block-column:first-child {
		order: 2;
	}
	.cp-visual {
		min-height: 0;
		padding: 1.5rem;
	}
	.cp-vcard--1,
	.cp-vcard--2,
	.cp-vcard--3 {
		margin-left: 0;
		margin-right: 0;
	}
	.cp-layers {
		min-height: 300px;
	}
	.cp-layers__card {
		width: 90%;
	}
	.cp-prompt-grid {
		grid-template-columns: 1fr !important;
	}
	.cp-contact-card {
		padding: 1.5rem;
	}
	.cp-contact-row {
		flex-wrap: wrap;
	}
	.cp-plan {
		padding: 1.75rem 1.5rem;
	}
	.cp-orbit .cp-chip {
		font-size: 0.72rem;
		padding: 0.3rem 0.65rem 0.3rem 0.5rem;
	}
	.cp-page-title {
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}
	.cp-testimonial__quote {
		font-size: 1.1rem;
	}
	.cp-quote-mark {
		font-size: 4.5rem;
	}
}

@media (max-width: 599px) {
	.cp-header__row {
		gap: 0.75rem;
	}
	.cp-header .cp-header__actions {
		gap: 0.5rem;
	}
	/* max-width, because the image block prints an inline width:150px. */
	.cp-logo img {
		max-width: 128px;
	}
	.cp-btn-sm .wp-block-button__link {
		padding: 0.5rem 0.9rem;
		font-size: 0.85rem;
	}
	.cp-hero__actions .wp-block-button,
	.cp-hero__actions .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
	.cp-mock__stats {
		flex-wrap: wrap !important;
	}
	.cp-mock__stats .wp-block-column {
		flex-basis: calc(50% - 0.3rem) !important;
	}
	.cp-chip {
		font-size: 0.82rem;
		padding: 0.4rem 0.8rem 0.4rem 0.6rem;
	}
	.cp-strip__item {
		flex-wrap: wrap;
	}
	.cp-cal {
		padding: 0.6rem;
		gap: 4px;
	}
}

@media (max-width: 359px) {
	.cp-header .cp-theme-toggle.wp-block-buttons {
		display: none;
	}
	.cp-logo img {
		max-width: 116px;
	}
}

/* ==========================================================================
   21. Small helpers used by page content
   ========================================================================== */

.cp-bar--none::after {
	--w: 3%;
	background: var(--wp--preset--color--line);
}
.cp-hero__content {
	max-width: 600px;
}
.cp-plans {
	margin-top: 1rem;
}
.cp-support-tiers > * + * {
	margin-top: 1.25rem;
}
.cp-support-tiers h3 {
	margin-bottom: 0.25rem;
}
.cp-site-footer {
	margin-top: 0;
}
.cp-404 .cp-search {
	margin-bottom: 1.5rem;
}
.cp-blog {
	margin-top: 0;
}
.cp-cta-band__inner > * + * {
	margin-top: 0;
}
.cp-post-meta__date {
	margin: 0;
}

/* ---------- Pricing plans (native) ---------- */
.cp-pricing {
	position: relative;
}
.cp-billing {
	margin: 0 0 2rem;
	gap: 0 !important;
	padding: 0.3rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--cp-shadow-sm, 0 1px 2px rgba(32, 27, 35, 0.06));
	width: max-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.cp-billing .wp-block-button {
	margin: 0;
}
.cp-billing .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 0;
	box-shadow: none;
	padding: 0.6rem 1.25rem;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: background-color var(--cp-fast) var(--cp-ease), color var(--cp-fast) var(--cp-ease);
}
.cp-billing .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-deep);
	transform: none;
}
.cp-billing .wp-block-button.is-active .wp-block-button__link {
	background: var(--wp--preset--color--contrast);
	color: #FFFFFF;
}
.cp-billing__save {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--secondary-light);
	color: #4A3B05;
}
.cp-billing .wp-block-button.is-active .cp-billing__save {
	background: #FCE283;
	color: #201B23;
}
.cp-billing .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-deep);
	outline-offset: 2px;
}
.cp-plans .wp-block-column,
.cp-plans--3 .wp-block-column,
.cp-plans--4 .wp-block-column {
	display: flex;
}
.cp-plans .cp-plan,
.cp-plans--3 .cp-plan,
.cp-plans--4 .cp-plan {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.cp-plans .cp-plan .cta-bottom,
.cp-plans--3 .cp-plan .cta-bottom,
.cp-plans--4 .cp-plan .cta-bottom {
	margin-top: auto;
}
.cp-price {
	gap: 0.35rem !important;
	margin: 1.5rem 0 0;
	align-items: flex-end;
}
.cp-price p {
	margin: 0;
	line-height: 1;
}
.cp-price__currency {
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	padding-bottom: 0.45rem;
}
.cp-price__amount {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.6rem, 4vw, 3.4rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}
.cp-price__period {
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted);
	padding-bottom: 0.45rem;
}
.cp-price__hint {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	margin: 0.6rem 0 0;
	min-height: 1.3em;
}
.cp-pricing:not([data-billing]) .cp-price--year,
.cp-pricing[data-billing="month"] .cp-price--year,
.cp-pricing[data-billing="year"] .cp-price--month {
	display: none !important;
}
.cp-plan--enterprise {
	background: linear-gradient(160deg, var(--wp--preset--color--surface) 0%, var(--wp--preset--color--surface-alt) 100%);
}
.cp-plan .cp-check-list {
	margin-top: 1.5rem;
}
.cp-enterprise-banner {
	margin-top: 2rem;
	padding: 2.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--spacing--30, 1.25rem);
	background: linear-gradient(160deg, var(--wp--preset--color--surface) 0%, var(--wp--preset--color--surface-alt) 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}
.cp-enterprise-banner__content {
	flex: 1 1 480px;
}
.cp-enterprise-banner__content h3 {
	margin: 0.35rem 0 0.5rem;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}
.cp-enterprise-banner__content p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}
.cp-enterprise-banner__features {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: 1rem;
	list-style: none;
	padding: 0;
}
.cp-enterprise-banner__features li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast);
}
.cp-enterprise-banner__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	flex: 0 0 auto;
}
@media (min-width: 782px) and (max-width: 1120px) {
	.cp-plans--4 {
		flex-wrap: wrap !important;
	}
	.cp-plans--4 > .wp-block-column {
		flex-basis: calc(50% - 0.75rem) !important;
		flex-grow: 0 !important;
	}
}
@media (max-width: 781px) {
	.cp-billing .wp-block-button__link {
		padding: 0.55rem 0.9rem;
		font-size: 0.85rem;
	}
	.cp-plans .cp-plan,
	.cp-plans--3 .cp-plan,
	.cp-plans--4 .cp-plan {
		margin-bottom: 0;
	}
	.cp-enterprise-banner {
		padding: 1.5rem;
	}
	.cp-enterprise-banner__cta {
		align-items: flex-start;
		width: 100%;
	}
}
:root[data-theme="dark"] .cp-billing .wp-block-button.is-active .wp-block-button__link {
	background: #FFFFFF;
	color: #201B23;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cp-billing .wp-block-button.is-active .wp-block-button__link {
		background: #FFFFFF;
		color: #201B23;
	}
}

/* ==========================================================================
   22. Blog Layout, Sidebar and Upsell Widgets
   ========================================================================== */

.cp-article-wrap {
	margin-top: 0;
	margin-bottom: 0;
}

.cp-article-grid {
	align-items: flex-start;
	gap: 2.5rem;
}

.cp-article-main {
	min-width: 0;
}

.cp-article-sidebar {
	min-width: 0;
}

.cp-post-nav-wrap {
	margin-top: 1.5rem;
	gap: 1rem;
}

.cp-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
}

@media (min-width: 992px) {
	.cp-sidebar__sticky {
		position: sticky;
		top: 96px;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}
}

.cp-sidebar-widget {
	border-radius: 20px;
	border: 1px solid var(--cp-card-border);
	background: var(--wp--preset--color--surface);
	padding: 1.75rem 1.5rem;
	box-shadow: var(--cp-shadow-sm);
	transition: transform var(--cp-base) ease, box-shadow var(--cp-base) ease;
}

.cp-sidebar-widget:hover {
	box-shadow: var(--cp-shadow-md);
}

.cp-sidebar-widget--featured {
	border-color: rgba(151, 71, 255, 0.28);
	background: linear-gradient(180deg, var(--wp--preset--color--primary-soft) 0%, var(--wp--preset--color--surface) 100%);
}

.cp-sidebar-widget h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.3rem;
	line-height: 1.3;
	margin-top: 0.35rem;
	margin-bottom: 0.5rem;
}

.cp-sidebar-widget p {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.75rem;
}

.cp-sidebar-widget .cp-eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.25rem;
}

.cp-mini-plans {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0.85rem 0 1.15rem;
}

.cp-mini-plan {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.55rem 0.75rem;
	border-radius: 10px;
	background: rgba(32, 27, 35, 0.03);
	border: 1px solid var(--cp-card-border);
	font-size: 0.85rem;
	gap: 0.5rem;
}

:root[data-theme="dark"] .cp-mini-plan {
	background: rgba(255, 255, 255, 0.04);
}

.cp-mini-plan__name {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.cp-mini-plan__meta {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.cp-mini-plan__price {
	font-weight: 700;
	color: var(--wp--preset--color--primary-deep);
	white-space: nowrap;
}

.cp-sidebar-list {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 0.85rem;
}

.cp-sidebar-list li {
	font-size: 0.88rem;
	color: var(--wp--preset--color--contrast-soft);
	padding: 0.25rem 0;
	line-height: 1.45;
}

.cp-sidebar-more {
	margin-top: 0.5rem;
	margin-bottom: 0;
	font-size: 0.88rem;
	font-weight: 600;
}

.cp-sidebar-widget .wp-block-buttons {
	margin-top: 0.75rem;
	gap: 0.5rem;
}

.cp-sidebar-widget .wp-block-button__link {
	width: 100%;
	justify-content: center;
	text-align: center;
	font-size: 0.9rem;
	padding: 0.65rem 1rem;
}

.cp-trust-badge {
	font-size: 0.72rem;
	color: var(--wp--preset--color--muted);
	text-align: center;
	margin-top: 0.75rem;
	margin-bottom: 0;
	line-height: 1.4;
}

/* Upsell In-Content and Page Callout Banner */
.cp-upsell-callout {
	border-radius: 24px;
	border: 1px solid rgba(151, 71, 255, 0.25);
	background: linear-gradient(135deg, var(--wp--preset--color--primary-soft) 0%, var(--wp--preset--color--surface) 75%);
	padding: 2.75rem 2rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
	box-shadow: var(--cp-shadow-sm);
}

.cp-upsell-callout__head {
	margin-bottom: 2rem;
}

.cp-upsell-callout__head h2 {
	margin-top: 0.35rem;
	margin-bottom: 0.5rem;
}

.cp-upsell-callout__grid {
	margin-bottom: 2rem;
}

.cp-upsell-callout__grid .cp-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}

.cp-upsell-callout__grid .cp-plan__tag {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.25rem;
}

.cp-upsell-callout__grid h3 {
	font-size: 1.25rem;
	margin-top: 0;
	margin-bottom: 0.25rem;
}

.cp-upsell-callout__grid .cp-check-list {
	margin-top: auto;
	font-size: 0.88rem;
}

.cp-upsell-callout__actions {
	gap: 1rem;
}

@media (max-width: 991px) {
	.cp-article-grid {
		flex-direction: column !important;
	}
	.cp-article-main,
	.cp-article-sidebar {
		width: 100% !important;
		flex-basis: 100% !important;
	}
	.cp-upsell-callout {
		padding: 2rem 1.25rem;
	}
	.cp-upsell-callout__grid {
		flex-direction: column !important;
	}
	.cp-upsell-callout__grid > .wp-block-column {
		width: 100% !important;
		flex-basis: 100% !important;
		margin-bottom: 1rem;
	}
}