/* ==========================================================================
   Cyara 2026 — Platform Overview sections (patterns cy26-platform-*)
   Loaded on the "Cyara 2026" page template after page.css; everything under .cy26-page.
   Values from the design's Tailwind classes converted to px (the theme's root is 10px).
   Illustrations live in mockups.css ([cy26_mock_capability], [cy26_mock_connector], [cy26_mock_loop]).
   ========================================================================== */

/* ---------- Icons (lucide, used as masks: the colour comes from background) ---------- */
.cy26-page .cy26pf-i--bot { --cy26pf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E"); }
.cy26-page .cy26pf-i--headset { --cy26pf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z'/%3E%3Cpath d='M21 16v2a4 4 0 0 1-4 4h-5'/%3E%3C/svg%3E"); }
.cy26-page .cy26pf-i--phone { --cy26pf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.cy26-page .cy26pf-i--share { --cy26pf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' x2='15.42' y1='13.51' y2='17.49'/%3E%3Cline x1='15.41' x2='8.59' y1='6.51' y2='10.49'/%3E%3C/svg%3E"); }
.cy26-page .cy26pf-i--brain { --cy26pf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z'/%3E%3Cpath d='M9 13a4.5 4.5 0 0 0 3-4'/%3E%3Cpath d='M6.003 5.125A3 3 0 0 0 6.401 6.5'/%3E%3Cpath d='M3.477 10.896a4 4 0 0 1 .585-.396'/%3E%3Cpath d='M6 18a4 4 0 0 1-1.967-.516'/%3E%3Cpath d='M12 13h4'/%3E%3Cpath d='M12 18h6a2 2 0 0 1 2 2v1'/%3E%3Cpath d='M12 8h8'/%3E%3Cpath d='M16 8V5a2 2 0 0 1 2-2'/%3E%3Ccircle cx='16' cy='13' r='.5'/%3E%3Ccircle cx='18' cy='3' r='.5'/%3E%3Ccircle cx='20' cy='21' r='.5'/%3E%3Ccircle cx='20' cy='8' r='.5'/%3E%3C/svg%3E"); }
.cy26-page .cy26pf-i--headphones { --cy26pf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); }
.cy26-page .cy26pf-i--layout { --cy26pf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='7' x='3' y='3' rx='1'/%3E%3Crect width='9' height='7' x='3' y='14' rx='1'/%3E%3Crect width='5' height='7' x='16' y='14' rx='1'/%3E%3C/svg%3E"); }
.cy26-page .cy26pf-i--flask { --cy26pf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M7 16h10'/%3E%3C/svg%3E"); }
.cy26-page .cy26pf-i--activity { --cy26pf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2'/%3E%3C/svg%3E"); }
.cy26-page .cy26pf-i--scan { --cy26pf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M17 3h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m16 16-1.9-1.9'/%3E%3C/svg%3E"); }
.cy26-page {
	--cy26pf-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--cy26pf-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
	--cy26pf-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--cy26pf-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	--cy26pf-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
}

/* Anchored sections clear the fixed header (design: scroll-mt-32) */
.cy26-page .cy26pf-anchor { scroll-margin-top: 128px; }

/* ---------- Shared bits ---------------------------------------------------- */
.cy26-page .cy26pf-title--3xl { max-width: 768px; }
.cy26-page .cy26pf-title--xl { max-width: 576px; }
.cy26-page .wp-block-buttons.cy26pf-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.cy26-page .cy26pf-actions--hero .cy26p-btn--arrow .wp-block-button__link::after { width: 17px; height: 17px; }
/* Hero "Explore the platform": arrow down */
.cy26-page .cy26p-btn--down .wp-block-button__link::after {
	content: "";
	width: 17px;
	height: 17px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--cy26pf-arrow-down) center / contain no-repeat;
	mask: var(--cy26pf-arrow-down) center / contain no-repeat;
}
/* Outline on navy (design: outline variant + border-primary-foreground/40, transparent) */
.cy26-page .cy26pf-btn--line .wp-block-button__link {
	border: 1px solid color-mix(in oklab, var(--cy26-white) 40%, transparent);
	background: transparent;
	box-shadow: none;
	color: var(--cy26-white);
}
.cy26-page .cy26pf-btn--line .wp-block-button__link:hover {
	border-color: var(--cy26-primary);
	background: color-mix(in oklab, var(--cy26-white) 10%, transparent);
	color: var(--cy26-white);
	transform: none;
}
/* Bold text link with arrow (design: mt-8 inline-flex gap-2 text-sm font-bold) */
.cy26-page .cy26pf-link { margin-top: 32px; font-size: 14px; font-weight: 700; line-height: 20px; }
.cy26-page .cy26pf-link a { display: inline-flex; align-items: center; gap: 8px; color: var(--cy26-primary); }
.cy26-page .cy26pf-link a:hover { color: var(--cy26-primary); }
.cy26-page .cy26pf-link a::after {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--cy26pf-arrow) center / contain no-repeat;
	mask: var(--cy26pf-arrow) center / contain no-repeat;
}
.cy26-page .cy26pf-link--all { margin-top: 36px; }
/* Navy sections: the design's .bg-navy token overrides (lighter blue, muted and ring) */
.cy26-page .cy26pf-dark {
	--cy26-aqua: var(--cy26-aqua-on-dark);
	--cy26-muted: oklch(0.8 0.025 260);
	--cy26-ring: oklch(0.82 0.12 235);
}

/* ==========================================================================
   1. Hero
   ========================================================================== */
.cy26-page .cy26pf-hero {
	position: relative;
	overflow: hidden;
	padding: 144px 0 80px;
	background: var(--cy26-navy);
	color: var(--cy26-white);
	text-align: center;
}
/* chrome.css pads the first block for the transparent header; the design's pt-36 already includes it. */
body .cy26-page > .cy26pf-hero:not(#cy26-x) { padding-top: 144px; }
@media (min-width: 768px) {
	body .cy26-page > .cy26pf-hero:not(#cy26-x) { padding-top: 176px; padding-bottom: 112px; }
}
.cy26-page .cy26pf-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(576px 352px at 86% 0%, color-mix(in oklab, var(--cy26-mint) 12%, transparent), transparent 70%),
		radial-gradient(circle 672px at 50% 0%, color-mix(in oklab, var(--cy26-primary) 22%, transparent), transparent 70%),
		linear-gradient(180deg, color-mix(in oklab, var(--cy26-aqua-on-dark) 6%, transparent), transparent 55%);
}
.cy26-page .cy26pf-hero__inner {
	position: relative;
	display: flex;
	max-width: 768px;
	flex-direction: column;
	align-items: center;
	margin-inline: auto;
}
.cy26-page .cy26pf-hero__title {
	margin-top: 24px;
	color: var(--cy26-white);
	font-size: clamp(43.2px, 6.2vw, 92.8px);
	font-weight: 700;
	line-height: 0.99;
}
.cy26-page .cy26pf-hero__title strong {
	display: inline;
	font-weight: inherit;
	background: linear-gradient(100deg, oklch(0.79 0.11 245) 0%, var(--cy26-cta) 45%, var(--cy26-mint) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.cy26-page .cy26pf-hero__lead {
	max-width: 672px;
	margin-top: 32px;
	color: color-mix(in oklab, var(--cy26-white) 70%, transparent);
	font-size: 18px;
	line-height: 32px;
}
.cy26-page .cy26pf-hero__tagline { margin-top: 24px; font-weight: 700; }

/* ==========================================================================
   2. Architecture (#architecture)
   ========================================================================== */
.cy26-page .cy26pf-arch { border-top: 1px solid var(--cy26-border); }
.cy26-page .cy26pf-arch__kicker {
	margin-top: 40px;
	color: var(--cy26-primary);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.3em;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
}
@media (min-width: 640px) { .cy26-page .cy26pf-arch__kicker { margin-top: 8px; } }
.cy26-page .cy26pf-box {
	position: relative;
	border: 1px solid color-mix(in oklab, var(--cy26-primary) 25%, transparent);
	border-radius: var(--cy26-radius-xl);
	background: color-mix(in oklab, var(--cy26-bg) 60%, transparent);
	color: var(--cy26-fg);
	text-align: center;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.cy26-page .cy26pf-box--accent { padding: 28px 24px; }
.cy26-page .cy26pf-box--accent::before {
	content: "";
	position: absolute;
	top: 16px;
	bottom: 16px;
	left: 0;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: var(--cy26-primary);
}
.cy26-page .cy26pf-box__title { font-size: 18px; font-weight: 900; letter-spacing: 0.025em; line-height: 28px; text-transform: uppercase; }
@media (min-width: 640px) { .cy26-page .cy26pf-box__title { font-size: 20px; } }
.cy26-page .cy26pf-box__copy { margin-top: 4px; color: var(--cy26-muted); font-size: 14px; line-height: 20px; }
.cy26-page .cy26pf-agents { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 640px) { .cy26-page .cy26pf-agents { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 0; } }
.cy26-page .cy26pf-agent { padding: 20px; }
.cy26-page .cy26pf-agent::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	margin-inline: auto;
	border-radius: 999px;
	background: color-mix(in oklab, var(--cy26-primary) 10%, transparent);
}
.cy26-page .cy26pf-agent::after {
	content: "";
	position: absolute;
	top: 32px;
	left: 50%;
	width: 20px;
	height: 20px;
	transform: translateX(-50%);
	background: var(--cy26-primary);
	-webkit-mask: var(--cy26pf-icon) center / contain no-repeat;
	mask: var(--cy26pf-icon) center / contain no-repeat;
}
.cy26-page .cy26pf-agent__title { margin-top: 12px; font-size: 14px; font-weight: 900; letter-spacing: 0.025em; line-height: 20px; text-transform: uppercase; }
.cy26-page .cy26pf-agent__copy { margin-top: 6px; color: var(--cy26-muted); font-size: 14px; line-height: 20px; }
.cy26-page .cy26pf-box--ecc { margin-top: 16px; padding: 24px 20px; }
@media (min-width: 640px) { .cy26-page .cy26pf-box--ecc { margin-top: 0; padding-inline: 32px; } }
.cy26-page .cy26pf-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; text-align: left; }
@media (min-width: 640px) { .cy26-page .cy26pf-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cy26-page .cy26pf-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cy26-page .cy26pf-chip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid color-mix(in oklab, var(--cy26-primary) 15%, transparent);
	border-radius: var(--cy26-radius-lg);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
}
.cy26-page .cy26pf-chip::before {
	content: "";
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: 999px;
	background: color-mix(in oklab, var(--cy26-primary) 10%, transparent);
}
.cy26-page .cy26pf-chip::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 21.5px;
	width: 17px;
	height: 17px;
	transform: translateY(-50%);
	background: var(--cy26-primary);
	-webkit-mask: var(--cy26pf-icon) center / contain no-repeat;
	mask: var(--cy26pf-icon) center / contain no-repeat;
}
.cy26-page .cy26pf-arch__foot { margin-top: 32px; color: var(--cy26-muted); font-size: 12px; line-height: 16px; text-align: center; }

/* ==========================================================================
   3. Capabilities (#prove, #validate, #scale, #operate)
   ========================================================================== */
.cy26-page .wp-block-columns.cy26pf-split { display: grid; align-items: center; gap: 48px; margin-bottom: 0; }
.cy26-page .wp-block-columns.cy26pf-split--top { align-items: start; }
.cy26-page .cy26pf-split > .wp-block-column { min-width: 0; flex-basis: auto; }
@media (min-width: 1024px) {
	.cy26-page .wp-block-columns.cy26pf-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; }
	.cy26-page .cy26pf-split--reverse > .wp-block-column:first-child { order: 2; }
}
.cy26-page .cy26pf-cap .cy26p-body { max-width: 576px; }
.cy26-page .cy26pf-dark .cy26p-body { color: color-mix(in oklab, var(--cy26-white) 70%, transparent); }
.cy26-page .cy26pf-cap__lead { margin-top: 32px; font-size: 14px; font-weight: 700; line-height: 20px; }
.cy26-page .wp-block-list.cy26pf-checks { display: grid; gap: 12px; margin-top: 16px; }
.cy26-page .cy26pf-checks > li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 24px; }
.cy26-page .cy26pf-checks > li::before {
	content: "";
	width: 17px;
	height: 17px;
	flex: none;
	margin-top: 4px;
	background: var(--cy26-primary);
	-webkit-mask: var(--cy26pf-check) center / contain no-repeat;
	mask: var(--cy26pf-check) center / contain no-repeat;
}
.cy26-page .cy26pf-dark .cy26pf-checks > li::before { background: var(--cy26-aqua); }
.cy26-page .cy26pf-dark .cy26pf-link a { color: var(--cy26-aqua); }

/* ==========================================================================
   4. From production back to proof
   ========================================================================== */
.cy26-page .cy26pf-feedback {
	padding-block: 80px;
	border-block: 1px solid var(--cy26-border);
	background: var(--cy26-surface);
}
.cy26-page .wp-block-columns.cy26pf-feedback__grid { display: grid; gap: 40px; margin-bottom: 0; }
.cy26-page .cy26pf-feedback__grid > .wp-block-column { min-width: 0; flex-basis: auto; }
@media (min-width: 1024px) {
	.cy26-page .wp-block-columns.cy26pf-feedback__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; }
}
.cy26-page .wp-block-list.cy26pf-steps { display: grid; gap: 12px; margin: 0; counter-reset: cy26pf-step; } /* no theme ol margin: keeps the column truly centred */
@media (min-width: 640px) { .cy26-page .wp-block-list.cy26pf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cy26-page .cy26pf-steps > li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: 16px;
	border-bottom: 1px solid var(--cy26-border);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	counter-increment: cy26pf-step;
}
.cy26-page .cy26pf-steps > li::before {
	content: "0" counter(cy26pf-step);
	display: grid;
	width: 36px;
	height: 36px;
	flex: none;
	place-items: center;
	border-radius: 999px;
	background: var(--cy26-primary);
	color: var(--cy26-white);
	font-size: 12px;
	line-height: 16px;
}
.cy26-page .cy26pf-steps > li:not(:last-child)::after {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	margin-left: auto;
	background: var(--cy26-primary);
	-webkit-mask: var(--cy26pf-arrow) center / contain no-repeat;
	mask: var(--cy26pf-arrow) center / contain no-repeat;
}

/* ==========================================================================
   5. Across the experience
   ========================================================================== */
.cy26-page .cy26pf-coverage__note { margin-top: 28px; font-weight: 700; }
.cy26-page .cy26pf-assure { padding: 20px; border-left: 4px solid var(--cy26-primary); background: var(--cy26-surface); }
@media (min-width: 640px) { .cy26-page .cy26pf-assure { padding: 32px; } }
.cy26-page .cy26pf-assure__title { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; color: var(--cy26-primary); font-size: 14px; font-weight: 800; line-height: 20px; }
.cy26-page .cy26pf-assure__title::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--cy26pf-shield) center / contain no-repeat;
	mask: var(--cy26pf-shield) center / contain no-repeat;
}
.cy26-page .wp-block-list.cy26pf-assure__list { display: grid; gap: 8px; counter-reset: cy26pf-area; }
.cy26-page .cy26pf-assure__list > li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	border: 1px solid var(--cy26-border);
	background: var(--cy26-bg);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	counter-increment: cy26pf-area;
}
.cy26-page .cy26pf-assure__list > li::before { content: "0" counter(cy26pf-area); color: var(--cy26-primary); font-size: 12px; line-height: 16px; }
.cy26-page .cy26pf-assure__foot { margin-top: 20px; color: var(--cy26-muted); font-size: 12px; line-height: 16px; }

/* ==========================================================================
   6. Portfolio (#all-products)
   ========================================================================== */
.cy26-page .cy26pf-products { border-top: 1px solid var(--cy26-border); }
.cy26-page .cy26pf-groups { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 1024px) { .cy26-page .cy26pf-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cy26-page .cy26pf-group--test { --cy26pf-tone: var(--cy26-cta); }
.cy26-page .cy26pf-group--monitor { --cy26pf-tone: var(--cy26-mint); }
.cy26-page .cy26pf-group--observe { --cy26pf-tone: var(--cy26-amber); }
.cy26-page .cy26pf-group { min-width: 0; padding: 24px; border: 1px solid var(--cy26-border); border-radius: var(--cy26-radius-lg); background: var(--cy26-bg); }
@media (min-width: 640px) { .cy26-page .cy26pf-group { padding: 28px; } }
.cy26-page .cy26pf-group__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--cy26pf-tone);
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
}
/* Stage label (no link): tinted icon box + stage icon */
.cy26-page .cy26pf-group__head::before {
	content: "";
	width: 44px;
	height: 44px;
	flex: none;
	border: 1px solid color-mix(in oklab, var(--cy26pf-tone) 20%, transparent);
	border-radius: var(--cy26-radius);
	background: color-mix(in oklab, var(--cy26pf-tone) 10%, transparent);
}
.cy26-page .cy26pf-group__head::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 11.5px;
	width: 21px;
	height: 21px;
	transform: translateY(-50%);
	pointer-events: none;
	background: var(--cy26pf-tone);
	-webkit-mask: var(--cy26pf-icon) center / contain no-repeat;
	mask: var(--cy26pf-icon) center / contain no-repeat;
}
.cy26-page .cy26pf-group__list a::after {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: var(--cy26pf-tone);
	-webkit-mask: var(--cy26pf-arrow) center / contain no-repeat;
	mask: var(--cy26pf-arrow) center / contain no-repeat;
	transition: transform 0.2s;
}
.cy26-page .cy26pf-group__list a::after { width: 15px; height: 15px; }
.cy26-page .cy26pf-group__list a:hover::after { transform: translateX(4px); }
.cy26-page .cy26pf-group__copy { min-height: 48px; margin-top: 16px; color: var(--cy26-muted); font-size: 14px; line-height: 24px; }
.cy26-page .wp-block-list.cy26pf-group__list { display: grid; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--cy26-border); }
.cy26-page .cy26pf-group__list a {
	display: flex;
	min-height: 56px;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 12px;
	border-radius: var(--cy26-radius);
	color: var(--cy26-fg);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	transition: background-color 0.2s, color 0.2s;
}
.cy26-page .cy26pf-group__list a:hover {
	background: color-mix(in oklab, var(--cy26pf-tone) 5%, transparent);
	color: var(--cy26pf-tone);
}

/* ==========================================================================
   7. Closing CTA (reuses .cy26p-cta: background image + overlay)
   ========================================================================== */
.cy26-page .cy26p-cta.cy26pf-cta,
.cy26-page .cy26pf-cta .cy26p-cta__inner { min-height: 0; }
.cy26-page .cy26pf-cta .cy26p-cta__inner { max-width: 896px; padding-block: 80px; }
@media (min-width: 768px) {
	.cy26-page .cy26p-cta.cy26pf-cta,
	.cy26-page .cy26pf-cta .cy26p-cta__inner { min-height: 0; }
	.cy26-page .cy26pf-cta .cy26p-cta__inner { padding-block: 112px; }
}
.cy26-page .cy26pf-cta .cy26p-cta__inner::before {
	content: "";
	width: 31px;
	height: 31px;
	flex: none;
	background: var(--cy26-aqua-on-dark);
	-webkit-mask: var(--cy26pf-clipboard) center / contain no-repeat;
	mask: var(--cy26pf-clipboard) center / contain no-repeat;
}
.cy26-page .cy26pf-cta__title { margin-top: 24px; color: var(--cy26-white); }
.cy26-page .cy26pf-cta__copy {
	max-width: 672px;
	margin: 24px auto 0;
	color: color-mix(in oklab, var(--cy26-white) 70%, transparent);
	font-size: 16px;
	line-height: 28px;
}
.cy26-page .cy26pf-cta .wp-block-buttons.cy26p-actions { gap: 16px; margin-top: 32px; }

@media (prefers-reduced-motion: reduce) {
	.cy26-page .cy26pf-group__list a::after { transition: none; }
}