/* ==========================================================================
   Cyara 2026 — capability / product pages (patterns cy26-content-*, inc/cy26/content.php)
   Design: routes/platform/$capability + prove-, operate- and monitor-content.
   Loaded on the "Cyara 2026" page template after page.css and platform.css (icon masks
   --cy26pf-check / --cy26pf-shield / --cy26pf-arrow come from platform.css). Everything under .cy26-page, in px.
   ========================================================================== */

/* Copy missing in the source: visible on purpose */
.cy26-page .cy26c-needed,
.cy26-page .cy26c-needed .wp-block-button__link {
	outline: 2px dashed var(--cy26-amber);
	outline-offset: 2px;
	background-color: color-mix(in oklab, var(--cy26-amber) 18%, transparent);
}

/* ==========================================================================
   1. Hero (navy + hero-gradient + capability shade)
   ========================================================================== */
.cy26-page .cy26c-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 176px 0 80px;
	background: var(--cy26-navy);
	color: var(--cy26-white);
}
/* chrome.css pads the first block for the transparent header; the design's pt-44 already includes it. */
body .cy26-page > .cy26c-hero:not(#cy26-x) { padding-top: 176px; }
@media (min-width: 768px) {
	body .cy26-page > .cy26c-hero:not(#cy26-x) { padding-top: 208px; padding-bottom: 96px; }
}
.cy26-page .cy26c-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(704px 480px at 86% 4%, color-mix(in oklab, var(--cy26-mint) 13%, transparent), transparent 68%),
		radial-gradient(880px 576px at 26% 40%, color-mix(in oklab, var(--cy26-primary) 22%, transparent), transparent 68%),
		linear-gradient(90deg,
			color-mix(in oklab, var(--cy26-navy) 82%, transparent) 0%,
			color-mix(in oklab, var(--cy26-navy) 55%, transparent) 48%,
			color-mix(in oklab, var(--cy26-navy) 30%, transparent) 100%),
		linear-gradient(180deg,
			color-mix(in oklab, var(--cy26-navy) 42%, transparent) 0%,
			color-mix(in oklab, var(--cy26-navy) 10%, transparent) 45%,
			color-mix(in oklab, var(--cy26-navy) 55%, transparent) 100%);
}
.cy26-page .cy26c-hero__inner { position: relative; z-index: 2; }
.cy26-page .cy26c-hero__title {
	max-width: 896px;
	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 .cy26c-hero__title strong {
	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 .cy26c-hero__lead {
	max-width: 672px;
	margin-top: 28px;
	color: color-mix(in oklab, var(--cy26-white) 80%, transparent);
	font-size: 18px;
	line-height: 32px;
}
.cy26-page .cy26c-hero__lead + .cy26c-hero__lead { margin-top: 12px; }
/* Hero with the film card on the right (cy26c_hero_split): half-width text column, so a smaller title. */
@media (min-width: 1024px) {
	.cy26-page .cy26c-hero__split .cy26c-hero__title { font-size: clamp(43.2px, 5vw, 72px); }
}
/* "Watch video" (opens [cy26_video_modal]) */
.cy26-page .wp-block-buttons.cy26c-hero__actions { align-items: flex-start; justify-content: flex-start; margin-top: 32px; }
.cy26-page .cy26c-tiles {
	display: grid;
	gap: 1px;
	margin-top: 56px;
	overflow: hidden;
	border: 1px solid color-mix(in oklab, var(--cy26-white) 15%, transparent);
	border-radius: var(--cy26-radius);
	background: color-mix(in oklab, var(--cy26-white) 15%, transparent);
}
@media (min-width: 640px) { .cy26-page .cy26c-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cy26-page .cy26c-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 640px) { .cy26-page .cy26c-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cy26-page .cy26c-tile { padding: 20px; background: var(--cy26-navy-soft); }
.cy26-page .cy26c-tile__label { color: var(--cy26-aqua-on-dark); font-size: 11px; font-weight: 700; line-height: 1.5; text-transform: uppercase; }
.cy26-page .cy26c-tile__detail { margin-top: 8px; font-size: 14px; font-weight: 600; line-height: 20px; }

/* ==========================================================================
   2. Benefits (three cards; Operate / Monitor add a heading and intro)
   ========================================================================== */
.cy26-page .cy26c-title--3xl { max-width: 768px; }
.cy26-page .cy26c-body--3xl { max-width: 768px; }
.cy26-page .cy26c-cards { display: grid; gap: 16px; margin-top: 40px; }
.cy26-page .cy26c-cards--flush { margin-top: 0; }
@media (min-width: 768px) { .cy26-page .cy26c-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cy26-page .cy26c-card {
	position: relative;
	padding: 28px;
	border: 1px solid var(--cy26-border);
	border-radius: var(--cy26-radius);
	background: var(--cy26-card);
}
.cy26-page .cy26c-card::before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--cy26-aqua-soft);
}
.cy26-page .cy26c-card::after {
	content: "";
	position: absolute;
	top: 35.5px;
	left: 35.5px;
	width: 17px;
	height: 17px;
	background: var(--cy26-primary);
	-webkit-mask: var(--cy26pf-shield) center / contain no-repeat;
	mask: var(--cy26pf-shield) center / contain no-repeat;
}
.cy26-page .cy26c-card__label { margin-top: 24px; color: var(--cy26-primary); font-size: 12px; font-weight: 700; line-height: 16px; }
.cy26-page .cy26c-card__title { margin-top: 8px; font-size: 20px; font-weight: 700; line-height: 1.375; }
.cy26-page .cy26c-card__copy { margin-top: 16px; color: var(--cy26-muted); font-size: 14px; line-height: 28px; }

/* ==========================================================================
   3. Features (columns reuse .cy26pf-split from platform.css)
   ========================================================================== */
.cy26-page .cy26c-feature .cy26p-body { max-width: 576px; }
.cy26-page .wp-block-list.cy26c-points {
	display: grid;
	gap: 12px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--cy26-border);
}
.cy26-page .cy26c-points > li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; line-height: 20px; }
.cy26-page .cy26c-points > li::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: var(--cy26-primary);
	-webkit-mask: var(--cy26pf-check) center / contain no-repeat;
	mask: var(--cy26pf-check) center / contain no-repeat;
}
.cy26-page .wp-block-buttons.cy26c-actions { align-items: flex-start; justify-content: flex-start; margin-top: 32px; }
/* The source's button labels are full sentences: let them wrap instead of overflowing on phones. */
.cy26-page .cy26c-actions .wp-block-button__link { white-space: normal; text-align: left; }

/* One high-contrast band per page (design: .feature-accent); the screenshot keeps the light palette. */
.cy26-page .cy26c-accent { color: var(--cy26-white); }
.cy26-page .cy26c-accent--blue { background: linear-gradient(135deg, oklch(0.3 0.12 262) 0%, oklch(0.45 0.17 252) 60%, oklch(0.5 0.13 225) 100%); }
.cy26-page .cy26c-accent--green { background: linear-gradient(135deg, oklch(0.26 0.07 220) 0%, oklch(0.42 0.09 195) 60%, oklch(0.5 0.1 182) 100%); }
.cy26-page .cy26c-accent .cy26c-feature__text {
	--cy26-fg: oklch(0.99 0 0);
	--cy26-muted: oklch(0.9 0.02 240);
	--cy26-primary: oklch(0.93 0.05 220);
	--cy26-border: oklch(1 0 0 / 0.22);
	color: var(--cy26-fg);
}

/* Screenshots without the product-window frame on every page (Pastel #15/#16, PM 2026-10-26); the insight card is [cy26_mock_insight]. */
.cy26-page .cy26c-shot { position: relative; }
.cy26-page .cy26c-shot__img { transition: transform 0.3s; }
.cy26-page .cy26c-shot__img:hover { transform: translateY(-4px); }
.cy26-page .cy26c-shot__img img { display: block; width: 100%; height: auto; object-fit: contain; }
/* Flat screenshots (opaque, square) get the rounded corners and drop shadow that the composite product art already has
   baked in, so every screenshot looks the same (Pastel #52-#56, #67-#69, #78, #91, 2026-10-27; Caller ID -06 added after a full audit of the 8 product pages). Matched by file name so it
   works on every environment without touching the page content. */
.cy26-page .cy26c-shot__img img:is([src*="Pulse360UI_Dark2026-01"], [src*="Pulse360UI_Dark2026-02"], [src*="Pulse360UI_Dark2026-05"], [src*="VoiceAssureUI_Dark2026-01"], [src*="VoiceAssureUI_Dark2026-03"], [src*="NumberTrustUI_Dark2026-06"], [src*="HumanAgentObservabilityScreens-01"]) {
	border-radius: var(--cy26-radius-xl);
}
/* One shadow for every screenshot, flat or composite (Sidney, 2026-10-27: E2E looked much lighter than Monitor). On the wrapper,
   so drop-shadow follows each image's real shape (rounded corners, transparent composite art, masks below) and is never clipped. */
.cy26-page .cy26c-shot__img {
	filter: drop-shadow(0 18px 22px color-mix(in oklab, var(--cy26-navy) 32%, transparent)) drop-shadow(0 4px 6px color-mix(in oklab, var(--cy26-navy) 18%, transparent));
}
/* Caller ID composites (Pastel #132-#134): the product window in the art has ~3 px corners, the other screenshots 14 px. A mask
   (window measured on the 600 px rendition, same ratio at every size) rounds its three exposed corners; the fourth sits under the
   dropdown overlay, which is left whole. */
.cy26-page .cy26c-shot__img img[src*="NumberTrustUI_Dark2026-03"] { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 426' preserveAspectRatio='none'%3E%3Cpath d='M0 14A14 14 0 0 1 14 0H535A14 14 0 0 1 549 14V390H14A14 14 0 0 1 0 376Z'/%3E%3Crect x='549' width='51' height='426'/%3E%3Crect y='390' width='600' height='36'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 426' preserveAspectRatio='none'%3E%3Cpath d='M0 14A14 14 0 0 1 14 0H535A14 14 0 0 1 549 14V390H14A14 14 0 0 1 0 376Z'/%3E%3Crect x='549' width='51' height='426'/%3E%3Crect y='390' width='600' height='36'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.cy26-page .cy26c-shot__img img[src*="NumberTrustUI_Dark2026-01"] { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 483' preserveAspectRatio='none'%3E%3Cpath d='M0 14A14 14 0 0 1 14 0H491A14 14 0 0 1 505 14V359H14A14 14 0 0 1 0 345Z'/%3E%3Crect x='505' width='95' height='483'/%3E%3Crect y='359' width='600' height='124'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 483' preserveAspectRatio='none'%3E%3Cpath d='M0 14A14 14 0 0 1 14 0H491A14 14 0 0 1 505 14V359H14A14 14 0 0 1 0 345Z'/%3E%3Crect x='505' width='95' height='483'/%3E%3Crect y='359' width='600' height='124'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.cy26-page .cy26c-shot__img img[src*="NumberTrustUI_Dark2026-02"] { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 453' preserveAspectRatio='none'%3E%3Cpath d='M0 14A14 14 0 0 1 14 0H517A14 14 0 0 1 531 14V377H14A14 14 0 0 1 0 363Z'/%3E%3Crect x='531' width='69' height='453'/%3E%3Crect y='377' width='600' height='76'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 453' preserveAspectRatio='none'%3E%3Cpath d='M0 14A14 14 0 0 1 14 0H517A14 14 0 0 1 531 14V377H14A14 14 0 0 1 0 363Z'/%3E%3Crect x='531' width='69' height='453'/%3E%3Crect y='377' width='600' height='76'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
/* Monitor product pages: feature titles capped at 51 px, full column width (long titles wrapped awkwardly at 64 px). */
.cy26-page .cy26c-feature--monitor .cy26p-title { max-width: none; font-size: clamp(34.4px, 4vw, 51px); }

/* Two screenshots of one feature: stacked on phones, side by side from 768 px. */
.cy26-page .cy26c-shot__pair { display: grid; gap: 16px; align-items: center; }
.cy26-page .cy26c-shot__pair > .wp-block-image { margin: 0; }
@media (min-width: 768px) { .cy26-page .cy26c-shot__pair { grid-template-columns: 1fr 1fr; } }
/* A pair left with one screenshot (second one removed in the editor) takes the full column. */
.cy26-page .cy26c-shot__pair > :only-child { grid-column: 1 / -1; }

/* ==========================================================================
   FAQ (product pages whose source has one): core Details blocks
   ========================================================================== */
.cy26-page .cy26c-faq__list { margin-top: 40px; border-top: 1px solid var(--cy26-border); } /* Full shell width (PM, 2026-10-21) */
.cy26-page .cy26c-faq__item { border-bottom: 1px solid var(--cy26-border); }
.cy26-page .cy26c-faq__item > summary {
	position: relative;
	display: block;
	padding: 24px 48px 24px 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	list-style: none;
	cursor: pointer;
	transition: color 0.2s;
}
.cy26-page .cy26c-faq__item > summary::-webkit-details-marker { display: none; }
.cy26-page .cy26c-faq__item > summary:hover { color: var(--cy26-primary); }
.cy26-page .cy26c-faq__item > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 8px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: currentColor;
	-webkit-mask: 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='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: 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='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s;
}
.cy26-page .cy26c-faq__item[open] > summary::after { transform: rotate(180deg); color: var(--cy26-primary); }
.cy26-page .cy26c-faq__answer { padding: 0 48px 24px 0; color: var(--cy26-muted); font-size: 16px; line-height: 28px; }

/* ==========================================================================
   4. Comparison table (Prove)
   ========================================================================== */
.cy26-page .wp-block-table.cy26c-table {
	margin-top: 40px;
	overflow-x: auto;
	border: 1px solid var(--cy26-border);
	border-radius: var(--cy26-radius);
}
.cy26-page .cy26c-table table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; line-height: 20px; text-align: left; word-break: normal; /* theme: table { word-break: break-all } */ }
.cy26-page .cy26c-table :is(th, td) { padding: 16px 20px; border: 0; }
.cy26-page .cy26c-table thead { border: 0; background: var(--cy26-navy); color: var(--cy26-white); }
.cy26-page .cy26c-table thead th { font-weight: 700; }
.cy26-page .cy26c-table thead th:last-child { color: var(--cy26-aqua-on-dark); }
.cy26-page .cy26c-table tbody tr + tr { border-top: 1px solid var(--cy26-border); }
.cy26-page .cy26c-table tbody td:first-child { font-weight: 600; }
.cy26-page .cy26c-table tbody td:nth-child(2) { color: var(--cy26-muted); }
.cy26-page .cy26c-table tbody td:nth-child(3) { color: var(--cy26-primary); font-weight: 700; }

/* ==========================================================================
   5. Close (navy, centred) + "Next" capability
   ========================================================================== */
.cy26-page .cy26c-close { padding-block: 80px; background: var(--cy26-navy); color: var(--cy26-white); text-align: center; }
@media (min-width: 768px) { .cy26-page .cy26c-close { padding-block: 112px; } }
.cy26-page .cy26c-close__title { max-width: 672px; margin-inline: auto; color: var(--cy26-white); }
.cy26-page .cy26c-close__title--wide { max-width: 768px; }
.cy26-page .cy26c-close__title strong { color: var(--cy26-aqua-on-dark); font-weight: inherit; }
.cy26-page .cy26c-close__copy { max-width: 576px; margin: 24px auto 0; color: color-mix(in oklab, var(--cy26-white) 75%, transparent); }
.cy26-page .cy26c-stats { display: grid; max-width: 672px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 40px auto 0; }
.cy26-page .cy26c-stat + .cy26c-stat { border-left: 1px solid color-mix(in oklab, var(--cy26-white) 20%, transparent); }
.cy26-page .cy26c-stat__value { font-size: clamp(22px, 7vw, 30px); font-weight: 700; line-height: 36px; } /* Phones: "40,000+" fits its third of the row (30 px from 430 px). */
@media (min-width: 640px) { .cy26-page .cy26c-stat__value { font-size: 36px; line-height: 40px; } }
.cy26-page .cy26c-stat .cy26c-needed { margin: 4px 8px; font-size: 12px; font-weight: 600; line-height: 16px; } /* Stat without copy yet: placeholder fits its column. */
/* A word instead of a number, after an up arrow (Lucide arrow-up as a mask): smaller so it fits a third of the row. */
.cy26-page .cy26c-stat--up .cy26c-stat__value { display: flex; justify-content: center; align-items: center; gap: 4px; font-size: clamp(13px, 3.6vw, 20px); }
@media (min-width: 640px) { .cy26-page .cy26c-stat--up .cy26c-stat__value { font-size: 22px; gap: 6px; } }
.cy26-page .cy26c-stat--up .cy26c-stat__value::before { content: ""; flex: none; width: 0.9em; height: 0.9em; background: currentColor; -webkit-mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E") center / contain no-repeat; mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E") center / contain no-repeat; }
.cy26-page .cy26c-stat__label { margin-top: 8px; color: var(--cy26-aqua-on-dark); font-size: 12px; line-height: 16px; text-transform: uppercase; }
.cy26-page .cy26c-close .wp-block-buttons.cy26c-close__actions { margin-top: 40px; }
.cy26-page .cy26c-next {
	max-width: 896px;
	margin: 80px auto 0;
	padding-top: 32px;
	border-top: 1px solid color-mix(in oklab, var(--cy26-white) 20%, transparent);
	text-align: left;
}
.cy26-page .cy26c-next__title { margin-top: 8px; font-size: 20px; font-weight: 700; line-height: 28px; }
.cy26-page .cy26c-next__copy { max-width: 672px; margin-top: 12px; color: color-mix(in oklab, var(--cy26-white) 70%, transparent); font-size: 14px; line-height: 24px; }
.cy26-page .cy26c-next__link { margin-top: 16px; font-size: 14px; font-weight: 700; line-height: 20px; }
.cy26-page .cy26c-next__link a { display: inline-flex; align-items: center; gap: 8px; color: var(--cy26-aqua-on-dark); }
.cy26-page .cy26c-next__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;
}

@media (prefers-reduced-motion: reduce) {
	.cy26-page .cy26c-shot__img { transition: none; }
	.cy26-page .cy26c-shot__img:hover { transform: none; }
	.cy26-page .cy26c-faq__item > summary::after { transition: none; }
}