/*
Theme Name: SR PoC
Theme URI: https://sr-poc.test
Author: Karga
Description: Block theme for the SOCRadar delivery. Visual truth comes from the client's v02 bundle (assets/vendor/v02/main.min.css); this stylesheet only carries WordPress- and PoC-specific rules that have no v02 equivalent.
Version: 0.4.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: srpoc
*/

/*
 * Scope rule: nothing here may restyle v02 chrome (.topbar, .navbar, .footer,
 * .announcement-bar, .btn, ...). Those live in the vendored v02 bundle, which is
 * enqueued before this file. Chrome rules that used to sit here were removed —
 * they only fought the client's own CSS.
 *
 * What belongs here:
 *   1. PoC-only components with no v02 counterpart (locale switcher, geo demo,
 *      third-party placeholder).
 *   2. WordPress plumbing (block wrapper resets, WPML leftovers).
 *   3. Placeholder styling for the srpoc/* body blocks, until those blocks are
 *      rebuilt to emit v02 markup (hero-v6 and friends) in Hafta 3.
 */

/* --- Placeholder block library (superseded once blocks emit v02 markup) --- */

.srpoc-hero {
	padding: 5.5rem 2rem;
	text-align: center;
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 58%, rgba(255, 69, 98, 0.28) 140%);
	color: #fff;
	border-radius: 20px;
}

.srpoc-hero h1 {
	margin: 0 0 0.5em;
	color: #fff;
}

.srpoc-hero p {
	margin: 0 auto 1.5em;
	max-width: 40em;
	color: #c7d2e5;
}

.srpoc-hero--split {
	text-align: left;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	align-items: center;
	gap: 2rem;
}

@media (max-width: 767px) {
	.srpoc-hero--split { grid-template-columns: 1fr; text-align: center; }
}

.srpoc-hero--light {
	background: linear-gradient(135deg, #fff5f7 0%, #fff 55%, #f8fafc 100%);
	color: #0f172a;
}

.srpoc-hero--light h1,
.srpoc-hero--light p { color: inherit; }

.srpoc-hero--light p { color: #475569; }

.srpoc-hero .srpoc-button {
	display: inline-block;
	padding: 0.75em 1.75em;
	background: #FF4562;
	color: #fff;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
}

.srpoc-feature-grid {
	padding: 2rem 0;
}

.srpoc-feature-grid > h2 {
	text-align: center;
	margin-bottom: 1.5em;
}

.srpoc-feature-grid .srpoc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem;
}

.srpoc-feature-card {
	padding: 1.5rem;
	background: #f6f8fb;
	border: 1px solid #e3e9f2;
	border-radius: 10px;
}

.srpoc-feature-card h3 {
	margin: 0 0 0.5em;
	font-size: 1.1rem;
}

.srpoc-feature-card p {
	margin: 0;
	color: #47546b;
	font-size: 0.95rem;
}

.srpoc-feature-card h3 a {
	color: inherit;
	text-decoration: none;
}

.srpoc-feature-card h3 a:hover {
	text-decoration: underline;
}

.srpoc-feature-card .srpoc-card-link {
	margin-top: 0.75rem;
}

.srpoc-feature-card .srpoc-card-link a {
	color: #FF4562;
	font-weight: 600;
	text-decoration: none;
}

.srpoc-cta {
	padding: 3rem 2rem;
	text-align: center;
	background: #eef3fb;
	border-radius: 12px;
}

.srpoc-cta h2 {
	margin: 0 0 1em;
}

.srpoc-cta .srpoc-button {
	display: inline-block;
	padding: 0.75em 1.75em;
	background: #0b1220;
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
}

.srpoc-stats {
	padding: 2.5rem 2rem;
	text-align: center;
	background: #0b1220;
	color: #fff;
	border-radius: 12px;
}

.srpoc-stats h2 {
	margin: 0 0 1em;
	color: #fff;
}

.srpoc-stats .srpoc-stats-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.srpoc-stats .srpoc-stats-items strong {
	display: block;
	font-size: 2rem;
	color: #60a5fa;
}

.srpoc-stats .srpoc-stats-items span {
	color: #c7d2e5;
	font-size: 0.95rem;
}

.srpoc-form-embed {
	padding: 2rem;
	background: #f6f8fb;
	border: 1px solid #e3e9f2;
	border-radius: 10px;
}

.srpoc-form-embed .srpoc-form-missing {
	color: #8a94a6;
	text-align: center;
	font-style: italic;
}

/* --- Locale switcher (PoC component; v02 has no equivalent) ---
 * A topbar item like the others, so the topbar keeps the v02 height and
 * right alignment. The list opens under it without moving anything. */

.srpoc-locale-switcher {
	position: relative;
}

.srpoc-locale-switcher__toggle {
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.srpoc-locale-switcher__toggle::-webkit-details-marker {
	display: none;
}

.srpoc-locale-switcher__globe {
	width: 15px;
	height: 15px;
}

.srpoc-locale-switcher__chevron {
	width: 10px;
	height: 10px;
	transition: transform 0.15s ease;
}

.srpoc-locale-switcher[open] .srpoc-locale-switcher__chevron {
	transform: rotate(180deg);
}

.srpoc-locale-switcher__list {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 1100;
	min-width: 140px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(27, 27, 60, 0.12);
}

.srpoc-locale-switcher__item {
	display: block;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	color: #1b1b3c;
	text-decoration: none;
}

.srpoc-locale-switcher__item:hover,
.srpoc-locale-switcher__item:focus-visible {
	background: #f5f5f5;
}

.srpoc-locale-switcher__item.is-current {
	color: #ff4562;
}

/*
 * Shrink-to-fit. v02 tracks are `1fr` + a fixed card. Grid items default to
 * min-width:auto, so long words / inputs refuse to shrink and
 * html { overflow-x: clip } hides the overflow instead of showing a bar.
 * min-width:0 on the items is enough; the v02 track sizes stay untouched.
 */

/* Containers keep their v02 max-width (1280px); only the shrink fix applies. */
.adwm-hero__container,
.ati-hero__container,
.page-hero__container,
.prc-grid,
.adwm-feature__container,
.cti-modules__container,
.cti-modules__grid {
	min-width: 0;
}

.adwm-hero__content,
.adwm-hero__form-col,
.adwm-hero__form-card,
.adwm-hero__form-row,
.adwm-hero__field,
.ati-hero__content,
.ati-hero__form-col,
.ati-hero__form-card,
.ati-hero__form-row,
.ati-hero__field,
.page-hero__form-wrap,
.product-form,
.product-form__row,
.product-form__group,
.prc-card,
.adwm-feature__media {
	min-width: 0;
	max-width: 100%;
}

.adwm-hero__input,
.adwm-hero__select,
.ati-hero__input,
.ati-hero__select,
.product-form__input,
.product-form__select {
	min-width: 0;
	max-width: 100%;
	width: 100%;
}

/* --- Geo-visibility demo blocks (className-based so Gutenberg markup stays canonical) --- */

.srpoc-geo-demo {
	padding: 1.25rem;
	margin: 1.5rem 0;
	border-radius: 10px;
}

.srpoc-geo-demo h3 {
	margin-top: 0;
}

.srpoc-geo-demo-show {
	background: #fef3c7;
	border: 1px solid #f59e0b;
}

.srpoc-geo-demo-hide {
	background: #e0e7ff;
	border: 1px solid #6366f1;
}

/* --- 3P review widget placeholder --- */

.srpoc-review-widget {
	min-height: 120px;
	margin: 2rem auto;
	max-width: 40rem;
	padding: 1.25rem;
	border: 1px dashed #94a3b8;
	border-radius: 10px;
	color: #475569;
	text-align: center;
	display: none;
}

/* --- WordPress plumbing --- */

/* Full-bleed layout blocks: cancel the editor's content-width constraints. */
.srpoc-site-header-wrap,
.srpoc-announcement-bar,
.srpoc-site-footer-wrap,
.wp-block-srpoc-hero,
.hero-v6 {
	margin: 0 !important;
	max-width: none !important;
	width: 100%;
}

/* The hero keeps its v02 vertical padding. */
.srpoc-site-header-wrap,
.srpoc-announcement-bar,
.srpoc-site-footer-wrap {
	padding: 0 !important;
}

body.page .wp-block-post-content {
	max-width: none;
	padding: 0;
	margin: 0;
}

/*
 * v02 sticks announcement + header together via .site-sticky. Here the two are
 * separate blocks inside the header template part, and .site-sticky is boxed in
 * by its block wrapper, so the template part carries the sticky position.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 1001;
}

.wp-site-blocks > header.wp-block-template-part .site-sticky {
	position: relative;
}

/* request-demo.html scrolls the logo away; the template-part sticky above would pin it. */
body.rqd-logo-chrome .wp-site-blocks > header.wp-block-template-part {
	position: static;
}

/* Imported v02 sections sit edge to edge, as in the frontend: no block gap. */
.srpoc-v02-page .wp-block-post-content > * {
	margin-block: 0;
}

body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

body.page .wp-block-post-content > [class*="wp-block-srpoc-"] {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100%;
}

/* Legal / plain Gutenberg copy still needs a readable measure. */
body.page .wp-block-post-content > .wp-block-paragraph,
body.page .wp-block-post-content > p,
body.page .wp-block-post-content > .wp-block-heading,
body.page .wp-block-post-content > h1,
body.page .wp-block-post-content > h2,
body.page .wp-block-post-content > .wp-block-list,
body.page .wp-block-post-content > ul,
body.page .wp-block-post-content > ol,
body.page .wp-block-post-content > .wp-block-quote,
body.page .wp-block-post-content > blockquote,
body.page .wp-block-post-content > .wp-block-table,
body.page .wp-block-post-content > .wp-block-group:not([class*="wp-block-srpoc-"]) {
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/*
 * theme.json paints body text contrast and links primary. Those rules beat
 * inheritance on the pink announcement bar (p / a), so force v02's white.
 */
.announcement-bar,
.announcement-bar .announcement-bar__text,
.announcement-bar a:not(.announcement-bar__cta),
.announcement-bar .announcement-bar__close {
	color: #fff;
}

/* WPML's own language switchers are replaced by the locale switcher block. */
.wpml-ls,
.wpml-ls-statics-footer,
.wpml-ls-legacy-list-horizontal,
.wpml-ls-slot-footer,
.wpml-ls-item {
	display: none !important;
}

/*
 * Inter is applied after first paint (the stylesheet loads as print, then
 * flips to all). Without a matched fallback the hero reflows when the file
 * arrives, and the rotating sweep — a layer larger than the viewport — is
 * recorded as one layout shift. Arial drawn at Inter's metrics holds the
 * line boxes still. Numbers are the Inter-vs-Arial adjustments.
 */
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial");
	size-adjust: 107.12%;
	ascent-override: 90.44%;
	descent-override: 22.52%;
	line-gap-override: 0%;
}

body,
.hero-v6,
.hero-v6__title,
.hero-v6__subtitle,
.hero-v6__rotator,
.hero-v6__cta-btn,
.hero-v6__cta-ghost,
.hero-v6__tabs .platform-explorer__tab {
	font-family: Inter, "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/*
 * Hero product tabs (PageSpeed desktop, 14 Oct 2026): set in the plain fallback face before Inter
 * arrived, the five tabs wrapped to two rows and went back to one on the swap; the stage got
 * shorter and the radar centred in it moved (CLS 0.24-0.37). The metric-matched fallback above
 * keeps the width; on wide screens the row also never wraps.
 */
@media (min-width: 1200px) {
	.hero-v6__tabs.platform-explorer__tabs {
		flex-wrap: nowrap;
	}
}

/*
 * The emphasis is the second line once Inter is applied ("They log in.").
 * The fallback is narrower and keeps that sentence on the first line, then
 * the swap wraps it and pushes the hero down. Forcing the break makes both
 * faces occupy the same two lines.
 */
.hero-v6__title em {
	display: block;
}

/*
 * The sweep rotates a box wider than the viewport. Paint containment keeps
 * that transformed overflow inside the radar, so a font or style recalc
 * cannot score it as a layout shift. The circle was already the visible shape.
 */
.hero-v6__radar {
	overflow: hidden;
	contain: paint;
}

/*
 * The radar is centred on the stage (top: 50%). The HTML streams in: on a slow connection the
 * hero text paints before the tabs and the dashboard are parsed, the stage then grows and the
 * radar centred in it moved down (PageSpeed CLS 0.13-0.37, 14 Oct 2026). Its centre is now a
 * fixed distance from the stage top, the same point the finished stage gives it (125px at
 * 360px wide, 256px at 768px, 330px from 1024px up).
 */
.hero-v6__stage > .hero-v6__radar {
	top: min(330px, calc(9px + 32.1vw));
}

/*
 * Hero rotator: all phrases sit in one grid cell and only the active one is
 * visible, so the pill has the longest phrase's width at first paint and
 * never resizes while it rotates, on phones too. A pill that resized every
 * 2.8s was scored by PageSpeed mobile as a layout shift of the radar behind it.
 */
.hero-v6__rotator em[data-v6-rotator] {
	display: inline-grid;
}

.hero-v6__phrase {
	grid-area: 1 / 1;
	justify-self: center;
}

.hero-v6__phrase:not(.is-active) {
	visibility: hidden;
}

/* Phones: the lead stays on one line; when lead and pill do not fit side by side the pill takes its own line. */
@media (max-width: 639px) {
	.hero-v6__rotator {
		flex-wrap: wrap;
		row-gap: 0.375rem;
		white-space: nowrap;
	}
}

@media (max-width: 47.99rem) {
	html[lang^="es"] .hero-v6__rotator {
		min-height: 3.1rem;
	}
}

/*
 * At Lighthouse's 412px mobile viewport the fallback face wraps the Spanish
 * title to three lines and the subtitle to six; Inter wraps them to four and
 * five. Fixing the final line boxes prevents the stage overlay from moving
 * while leaving the loaded-font layout unchanged.
 */
@media (min-width: 25rem) and (max-width: 47.99rem) {
	html[lang^="es"] .hero-v6__title {
		height: 4.32em;
		overflow: hidden;
	}

	html[lang^="es"] .hero-v6__subtitle {
		height: 6.75em;
		overflow: hidden;
	}
}

.hero-v6__sweep,
.hero-v6__reveal,
.hero-v6__reveal-inner {
	will-change: transform;
}

/*
 * Hero radar. The blip pulse and the threat glow used to come from SMIL and
 * from a permanent rAF loop that read the sweep's computed transform on every
 * frame. Both are keyframes now. Each threat's delay is negative and derived
 * from its angle, so it peaks as the 12s sweep passes over it.
 */
.hero-v6__blip {
	transform-box: fill-box;
	transform-origin: center;
	animation: srpoc-blip-pulse var(--srpoc-blip-duration, 3s) linear infinite;
}

@keyframes srpoc-blip-pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.1;
	}

	50% {
		transform: scale(2.5);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-v6__blip {
		animation: none;
	}
}

/*
 * v02 fixes the plan grid at three columns because its pricing page always has
 * three. The block lets an editor add two or four, so those counts need a
 * modifier. Below lg the v02 rule already collapses everything to one column.
 */
@media (min-width: 1024px) {
	.prc-grid--cols-1 {
		grid-template-columns: minmax(0, 480px);
		justify-content: center;
	}

	.prc-grid--cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.prc-grid--cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Animation slot. v02 gives iso-scene no intrinsic size, so an element that
 * upgrades late would push everything below it down. The box owns the aspect
 * ratio instead, and whatever ends up inside stretches to fill it.
 */
.srpoc-anim-box {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 16px;
	background: #f8fafc;
}

.srpoc-anim-box > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.srpoc-anim-box video {
	object-fit: cover;
	background: #0f172a;
}

.srpoc-anim-box__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 1.5px dashed #cbd5e1;
	border-radius: 16px;
	text-align: center;
	padding: 1.25rem;
}

.srpoc-anim-box__note {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ff4562;
}

.srpoc-anim-box__label {
	font-size: 0.9375rem;
	color: #475569;
	max-width: 42ch;
}

/*
 * --- Fixes for defects in the vendored v02 bundle -------------------------
 *
 * The scope rule above still holds for styling: v02 owns how the chrome looks.
 * This section only corrects v02 rules that break the layout outright, and each
 * one is written so it can be folded back into the client's own bundle.
 */

/*
 * v02 swaps the hamburger for the full desktop navbar at 1024px, but the row
 * needs about 1150px to fit the logo, six nav items and both CTAs. Between
 * those two numbers the primary CTA is pushed past the viewport and clipped by
 * the page's overflow-x, and Spanish labels are wider still, so the gap is
 * about 120px there. Holding the mobile nav until 1180px keeps every link and
 * both CTAs reachable; the mobile panel now carries the CTAs too.
 */
@media (max-width: 1179px) {
	.navbar__nav { display: none; }
	.navbar__actions { display: none; }
	.navbar__toggle { display: flex; }
}

/*
 * v02 guards its hero sweeps for prefers-reduced-motion but not the looping
 * decoration elsewhere: the awards marquee scrolls for 50s, and the radar,
 * MCP diagram and badge dots pulse forever. Everything listed here is
 * decorative, so stopping it costs nothing and honours the OS setting.
 */
@media (prefers-reduced-motion: reduce) {
	.adv-radar__blip,
	.adv-radar__icon,
	.adv-radar__sweep,
	.awards-marquee__track,
	.cta-section__card,
	.dwr-card__radar-blip,
	.dwr-card__radar-spinner,
	.footer__status-dot,
	.hero__badge,
	.hero__badge-dot,
	.mcp-diagram__h-conn--left,
	.mcp-diagram__h-conn--right,
	.mcp-diagram__hub,
	.mcp-diagram__v-dot--down,
	.mcp-diagram__v-dot--up,
	.page-hero__badge,
	.page-hero__badge-dot {
		animation: none;
	}
}

/*
 * The comparison table names each check mark for screen readers with a
 * .screen-reader-text span. Those spans are position:absolute, and the v02
 * scroll wrapper is not a positioned element, so their containing block was the
 * page: a 1px span parked at the table's own x-offset made the document 205px
 * wider than the viewport on phones and the whole page scrolled sideways.
 * Positioning the wrapper puts them back inside the part that is meant to
 * scroll.
 */
.prc-cmp__scroll {
	position: relative;
}

/* --- Engagement (hello bar decisions, popups) --- */

/* Bar keeps its height while the browser picks the variant / country text. */
.announcement-bar__slide.srpoc-eng-pending .announcement-bar__inner {
	visibility: hidden;
}

/* Popups: no v02 equivalent; built from the v02 tokens (ink #1b1b3c, brand #ff4562, Inter). */
.srpoc-popup {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.srpoc-popup[hidden] {
	display: none;
}

.srpoc-popup.is-open {
	opacity: 1;
}

.srpoc-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(27, 27, 60, 0.55);
}

.srpoc-popup__card {
	position: relative;
	display: grid;
	width: 100%;
	max-width: 520px;
	overflow: hidden;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 24px 64px rgba(27, 27, 60, 0.28);
	transform: translateY(12px);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.srpoc-popup.is-open .srpoc-popup__card {
	transform: none;
}

@media (min-width: 768px) {
	.srpoc-popup__card--image {
		grid-template-columns: 220px 1fr;
		max-width: 760px;
	}
}

.srpoc-popup__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 260px;
	object-fit: cover;
}

@media (min-width: 768px) {
	.srpoc-popup__media img {
		max-height: none;
	}
}

.srpoc-popup__body {
	padding: 2.25rem 2rem 2rem;
}

/* Content type: Banner image (one image, optionally linked) and Custom HTML. */
.srpoc-popup__card--banner {
	max-width: 760px;
	background: transparent;
}
.srpoc-popup__banner {
	display: block;
}
.srpoc-popup__banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
}
.srpoc-popup__card--html .srpoc-popup__html > :first-child {
	margin-top: 0;
}
.srpoc-popup__card--html .srpoc-popup__html img {
	max-width: 100%;
	height: auto;
}

/* Not "__eyebrow": v02 main.min.css hides every [class*="__eyebrow"]. */
.srpoc-popup__kicker {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ff4562;
}

.srpoc-popup__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
	color: #1b1b3c;
}

.srpoc-popup__text {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #4e4e70;
	white-space: pre-line;
}

.srpoc-popup__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.srpoc-popup__secondary {
	font-size: 0.875rem;
	font-weight: 600;
	color: #1b1b3c;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.srpoc-popup__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: #1b1b3c;
	background: rgba(255, 255, 255, 0.9);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.srpoc-popup__close:focus-visible {
	outline: 2px solid #ff4562;
	outline-offset: 2px;
}

/* Popups with a form: taller content scrolls inside the card; the image column is the report preview. */
.srpoc-popup__card--form {
	max-height: calc(100vh - 2.5rem);
	max-height: calc(100dvh - 2.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Edge colour of the seeded preview (poc/content/fetch-dwr-popup-image.js), so contain letterboxing has no seam. */
.srpoc-popup__card--form .srpoc-popup__media {
	background: #161538;
}

.srpoc-popup__card--form .srpoc-popup__media img {
	max-height: 220px;
	object-fit: contain;
}

@media (min-width: 768px) {
	.srpoc-popup__card--form.srpoc-popup__card--image {
		grid-template-columns: 300px 1fr;
		max-width: 820px;
	}

	.srpoc-popup__card--form .srpoc-popup__media img {
		max-height: none;
	}
}

.srpoc-popup__form {
	margin: 0 0 1rem;
}

.srpoc-popup__label {
	display: block;
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #1b1b3c;
}

.srpoc-popup__field {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.srpoc-popup__input {
	flex: 1 1 14rem;
	min-width: 0;
	height: 48px;
	padding: 0 1rem;
	font: inherit;
	font-size: 0.9375rem;
	color: #1b1b3c;
	background: #fff;
	border: 1px solid #c9c9d9;
	border-radius: 10px;
}

.srpoc-popup__input::placeholder {
	color: #6b6b88;
	opacity: 1;
}

.srpoc-popup__input:focus-visible {
	outline: 2px solid #ff4562;
	outline-offset: 1px;
	border-color: #ff4562;
}

.srpoc-popup__submit {
	flex: 0 0 auto;
	height: 48px;
}

@media (max-width: 479.98px) {
	.srpoc-popup__submit {
		flex-basis: 100%;
	}
}

.srpoc-popup__hs {
	margin: 0 0 1rem;
}

@media (prefers-reduced-motion: reduce) {
	.srpoc-popup,
	.srpoc-popup__card {
		transition: none;
	}
}

/* 404. No v02 page exists for a missing URL. */
.srpoc-not-found {
	max-width: 40rem;
	margin: 0 auto;
	padding: 6.5rem 1.5rem 7rem;
}

.srpoc-not-found__code {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: hsl(var(--muted-foreground));
}

.srpoc-not-found h1 {
	margin: 0 0 0.75rem;
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.1;
	color: #1b1b3c;
}

.srpoc-not-found p {
	margin: 0 0 1.5rem;
	max-width: 36rem;
	color: hsl(var(--muted-foreground));
}

/*
 * Module sub-pages already space themselves (padding on each section).
 * The flow layout's block gap adds 24px between those blocks and makes
 * short pages miss the frontend height.
 */
.entry-content.is-layout-flow > .wp-block-srpoc-module-section,
.entry-content.is-layout-flow > .wp-block-srpoc-module-parent,
.entry-content.is-layout-flow > .wp-block-srpoc-module-parent + .wp-block-srpoc-cta {
	margin-block-start: 0;
}

/*
 * The open panel sets visibility and pointer-events on itself. Those beat the
 * shell's opacity:0, so after the menu closes its links still sit on top of
 * the page. A closed shell must not be a hit target.
 */
#navbar-mega-menu:not(.is-open),
#navbar-mega-menu:not(.is-open) .navbar__mega-panel,
#navbar-mega-menu:not(.is-open) .navbar__mega-panel * {
	visibility: hidden;
	pointer-events: none;
}

/*
 * Report covers in the mega menu use a real src + loading="lazy". A panel that is
 * not open skips rendering, so the browser fetches its cover only when it opens.
 */
#navbar-mega-menu .navbar__mega-panel:not(.is-active) {
	content-visibility: hidden;
	transition: opacity .18s cubic-bezier(.16, 1, .3, 1), visibility .18s, content-visibility .18s allow-discrete;
}

/* The popup fades out for 200ms before hidden. It must not catch clicks while invisible. */
.srpoc-popup:not(.is-open) {
	pointer-events: none;
}

/*
 * Whitepaper / report singles (inc/cpt-resource.php): the v02 report-detail design only
 * styles plain paragraphs, the CPT fields are rich text. Values follow .rd-section__text
 * and .rd-hero__intro.
 */
.srpoc-rd-prose > * + * {
	margin-top: 1rem;
}
.srpoc-rd-prose p,
.srpoc-rd-prose li {
	font-size: 1rem;
	color: #1b1b3c;
	line-height: 1.75;
}
.srpoc-rd-prose ul,
.srpoc-rd-prose ol {
	padding-left: 1.25rem;
}
.srpoc-rd-prose ul {
	list-style: disc;
}
.srpoc-rd-prose ol {
	list-style: decimal;
}
.srpoc-rd-prose li + li {
	margin-top: .5rem;
}
.srpoc-rd-prose h2,
.srpoc-rd-prose h3,
.srpoc-rd-prose h4 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #1b1b3c;
	letter-spacing: -.015em;
}
.srpoc-rd-prose a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.rd-hero__intro.srpoc-rd-prose {
	margin-bottom: 2.5rem;
}
.srpoc-rd-hero__meta {
	font-size: .875rem;
	font-weight: 600;
	color: #4e4e70;
	margin: -.5rem 0 1.25rem;
}
.srpoc-rd-hero__nocover {
	aspect-ratio: 17 / 22;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(155deg, #1b1b3c 0, #2a2a52 100%);
	color: hsla(0, 0%, 100%, .35);
}
.srpoc-rd-hero__nocover svg {
	width: 48px;
	height: 48px;
}
.srpoc-rd-hero__action {
	white-space: normal;
}
/* Gated report with a PDF: download panel revealed after the HubSpot submit. */
.srpoc-rd-after {
	margin-top: 1rem;
}
.srpoc-rd-after[hidden] {
	display: none;
}
.srpoc-rd-after__note {
	margin: 0 0 .75rem;
	font-weight: 600;
}
/* After the submit the panel replaces the form (its thank-you text kept the reserved height). */
.rd-hero__form-wrap.is-unlocked > .hs-embed,
.rd-hero__form-wrap.is-unlocked > .rd-hero__form-sub {
	display: none;
}
.rd-hero__form-wrap.is-unlocked {
	scroll-margin-top: 96px;
}
.rd-hero__form-wrap.is-unlocked .srpoc-rd-after__note {
	font-size: 1.0625rem;
	color: #1b1b3c;
}
.srpoc-rd-after__btn.btn--xl {
	width: 100%;
	height: auto;
	min-height: 56px;
	padding: .875rem 1.5rem;
	font-size: 1.0625rem;
	gap: .625rem;
}
.srpoc-rd-after__btn svg {
	flex: none;
}
/* Editor preview only (see srpoc_res_editor_status). */
.srpoc-rd-hero__status {
	display: inline-block;
	margin: 0 0 1rem;
	padding: .25rem .625rem;
	border-radius: 6px;
	background: #eef0ff;
	color: #1b1b3c;
	font-size: .8125rem;
	font-weight: 600;
}
/* Post titles are far longer than the demo crumb; on phones they stacked into a tall column. */
@media (max-width: 639px) {
	.single-srpoc_whitepaper .rd-header__breadcrumb > span,
	.single-srpoc_report .rd-header__breadcrumb > span {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Faz 9 C4/C5 — start */
/*
 * Data breach single, landing and term archives (inc/cpt-breach.php). There is no v02
 * design for these yet (pending client approval): v02 components plus these partials,
 * using the report-detail tokens (#1b1b3c ink, #4e4e70 muted, #e5e5e5 line, #fafafa card, #ff4562 accent).
 */
.srpoc-bd-crumbs {
	flex-wrap: wrap;
}
.srpoc-bd-crumbs > span {
	min-width: 0;
	overflow-wrap: anywhere;
}
.srpoc-bd-hero {
	background: #fff;
	padding: 2.5rem 0 3rem;
}
.srpoc-bd-hero__container,
.srpoc-bd-container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.25rem;
}
@media (min-width: 768px) {
	.srpoc-bd-hero__container,
	.srpoc-bd-container {
		padding: 0 2rem;
	}
}
.srpoc-bd-hero__container {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2.5rem;
}
.srpoc-bd-hero__main {
	flex: 1;
	min-width: 0;
}
.srpoc-bd-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1rem;
}
.srpoc-bd-hero__title {
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.15;
	color: #1b1b3c;
	overflow-wrap: anywhere;
}
.srpoc-bd-hero__subtitle {
	margin-top: .75rem;
	font-size: 1.125rem;
	line-height: 1.6;
	color: #4e4e70;
}
.srpoc-bd-hero__info {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin-top: 1rem;
	font-size: .875rem;
	font-weight: 600;
	color: #4e4e70;
}
.srpoc-bd-threat {
	flex: 0 0 15rem;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 1.25rem;
	padding: 1.5rem;
	--srpoc-bd-level: 50%;
	--srpoc-bd-tone: #f59e0b;
}
.srpoc-bd-threat--low {
	--srpoc-bd-level: 25%;
	--srpoc-bd-tone: #16a34a;
}
.srpoc-bd-threat--high {
	--srpoc-bd-level: 75%;
	--srpoc-bd-tone: #ff4562;
}
.srpoc-bd-threat--critical {
	--srpoc-bd-level: 100%;
	--srpoc-bd-tone: #b8123a;
}
.srpoc-bd-threat__label,
.srpoc-bd-summary__label,
.srpoc-bd-side__label {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #4e4e70;
}
.srpoc-bd-threat__level {
	margin: .25rem 0 .75rem;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1;
	color: var(--srpoc-bd-tone);
}
.srpoc-bd-threat__bar {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: #e5e5e5;
	overflow: hidden;
}
.srpoc-bd-threat__fill {
	display: block;
	width: var(--srpoc-bd-level);
	height: 100%;
	border-radius: 3px;
	background: var(--srpoc-bd-tone);
}
.srpoc-bd-threat__conf {
	margin-top: .75rem;
	font-size: .8125rem;
	color: #4e4e70;
}
@media (max-width: 767px) {
	.srpoc-bd-hero {
		padding: 1.5rem 0 2rem;
	}
	.srpoc-bd-hero__container {
		flex-direction: column;
		gap: 1.5rem;
	}
	.srpoc-bd-threat {
		flex-basis: auto;
		width: 100%;
	}
}
.srpoc-bd-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
}
@media (min-width: 1200px) {
	.srpoc-bd-summary {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.srpoc-bd-summary__cell {
	min-width: 0;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 1rem;
	padding: 1rem 1.125rem;
}
.srpoc-bd-summary__value {
	margin: .35rem 0 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: #1b1b3c;
	overflow-wrap: anywhere;
}
.srpoc-bd-disclaimer p {
	font-size: .875rem;
	color: #4e4e70;
}
.srpoc-bd-side {
	margin-bottom: 1.5rem;
}
.srpoc-bd-side .rd-related__item {
	align-items: center;
}
.srpoc-bd-avatar,
.srpoc-bd-card__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: .75rem;
	background: linear-gradient(155deg, #1b1b3c 0, #2a2a52 100%);
	color: #fff;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .02em;
}
.srpoc-bd-side__label {
	margin: 1rem 0 .5rem;
}
.srpoc-bd-side__label:first-of-type {
	margin-top: 0;
}
.srpoc-bd-side__more {
	display: inline-block;
	margin-top: 1rem;
	font-size: .875rem;
	font-weight: 600;
	color: #ff4562;
	text-decoration: none;
}
.srpoc-bd-side__more:hover {
	text-decoration: underline;
}
.srpoc-bd-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.srpoc-bd-tags a {
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	font-size: .75rem;
}
.srpoc-bd-dwr__sub {
	margin: -.5rem 0 1rem;
	font-size: .875rem;
	color: #4e4e70;
}
.srpoc-bd-dwr__form {
	display: flex;
	flex-direction: column;
	gap: .625rem;
}
.srpoc-bd-dwr__input,
.srpoc-bd-search__input {
	width: 100%;
	min-width: 0;
	border: 1px solid #e5e5e5;
	border-radius: 9999px;
	background: #fff;
	padding: .75rem 1.125rem;
	font: inherit;
	font-size: 1rem;
	color: #1b1b3c;
}
.srpoc-bd-dwr__input:focus-visible,
.srpoc-bd-search__input:focus-visible {
	outline: 2px solid #ff4562;
	outline-offset: 1px;
}
.srpoc-bd-dwr__btn,
.srpoc-bd-search__btn {
	justify-content: center;
	padding: .75rem 1.5rem;
	border-radius: 9999px;
	white-space: nowrap;
}
.srpoc-bd-landing__intro {
	max-width: 44rem;
	margin: 1rem auto 0;
	font-size: 1.125rem;
	line-height: 1.6;
	color: #4e4e70;
}
.srpoc-bd-accent {
	color: #ff4562;
}
.srpoc-bd-stats {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}
.srpoc-bd-stats .stat-card__value,
.srpoc-bd-stats .stat-card__label {
	margin: 0;
}
.srpoc-bd-stats .stat-card__value {
	margin-bottom: .5rem;
}
.srpoc-bd-section {
	padding: 3.5rem 0;
	background: #fff;
}
.srpoc-bd-panels {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}
@media (max-width: 1023px) {
	.srpoc-bd-panels {
		grid-template-columns: 1fr;
	}
}
.srpoc-bd-panel__list {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}
.srpoc-bd-hub__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .25rem 1.5rem;
}
@media (max-width: 700px) {
	.srpoc-bd-hub__list {
		grid-template-columns: 1fr;
	}
}
.srpoc-bd-panel__item {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .625rem .75rem;
	border-radius: .75rem;
	font-size: .9375rem;
	font-weight: 500;
	color: #1b1b3c;
	text-decoration: none;
}
.srpoc-bd-panel__item:hover {
	background: #f5f5f5;
}
.srpoc-bd-panel__count {
	flex-shrink: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #4e4e70;
}
.srpoc-bd-search {
	display: flex;
	gap: .75rem;
	max-width: 48rem;
	margin: 3rem auto;
}
@media (max-width: 639px) {
	.srpoc-bd-search {
		flex-direction: column;
	}
}
.srpoc-bd-listing__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	margin-bottom: 1.5rem;
}
.srpoc-bd-listing__head .srpoc-bd-side__more {
	margin-top: 0;
}
.srpoc-bd-heading {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #1b1b3c;
}
.srpoc-bd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 1.25rem;
}
.srpoc-bd-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .625rem;
	min-width: 0;
	padding: 1.5rem;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 1.25rem;
	transition: border-color .15s cubic-bezier(.16, 1, .3, 1);
}
.srpoc-bd-card:hover {
	border-color: rgba(255, 69, 98, .35);
}
.srpoc-bd-card__title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: #1b1b3c;
	overflow-wrap: anywhere;
}
.srpoc-bd-card__title a {
	color: inherit;
	text-decoration: none;
}
.srpoc-bd-card__title a:hover {
	color: #ff4562;
}
.srpoc-bd-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .5rem;
	font-size: .8125rem;
	color: #4e4e70;
}
.srpoc-bd-card__actor {
	text-transform: none;
	letter-spacing: 0;
	font-size: .75rem;
}
.srpoc-bd-card__text {
	font-size: .875rem;
	line-height: 1.6;
	color: #4e4e70;
}
.srpoc-bd-card__more {
	margin-top: auto;
	font-size: .875rem;
	font-weight: 600;
	color: #ff4562;
	text-decoration: none;
}
.srpoc-bd-empty {
	color: #4e4e70;
}
.srpoc-bd-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: .5rem 1.5rem;
	margin-top: 2rem;
}
.srpoc-bd-pager__status {
	font-size: .875rem;
	color: #4e4e70;
}
.srpoc-bd-why {
	border-top: 1px solid #e5e5e5;
}
.srpoc-bd-why__title {
	margin-bottom: 1.5rem;
	text-align: center;
}
.srpoc-bd-why__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 1.25rem;
}
.srpoc-bd-why__item {
	padding: 1.5rem;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 1.25rem;
}
.srpoc-bd-why__name {
	margin-bottom: .5rem;
	font-size: 1rem;
	font-weight: 700;
	color: #1b1b3c;
}
.srpoc-bd-why__text {
	font-size: .875rem;
	line-height: 1.6;
	color: #4e4e70;
}

/*
 * Radar pages in query mode (inc/cpt-radar.php + assets/radar-query.js): rows, month tabs and
 * year buttons of the years that are not selected. The page scripts write inline display on
 * rows, so the year filter needs !important to stay on top.
 */
.srpoc-rdr-off {
	display: none !important;
}
/* Row highlight. Colours are the v02 :root tokens (--primary, --muted, --destructive). */
tr.srpoc-rdr-hl--primary > td {
	background: hsl(var(--primary) / 0.14);
}
tr.srpoc-rdr-hl--muted > td {
	background: hsl(var(--muted));
}
tr.srpoc-rdr-hl--destructive > td {
	background: hsl(var(--destructive) / 0.16);
}
.srpoc-rdr-yearlink {
	display: inline-flex;
	align-items: center;
	margin-top: .75rem;
	font-size: .875rem;
	font-weight: 600;
	color: #ff4562;
	text-decoration: none;
}
.srpoc-rdr-yearlink:hover {
	text-decoration: underline;
}
.srpoc-rdr-month-preview {
	padding: 1rem;
	border: 1px dashed #e5e5e5;
	border-radius: .75rem;
	font-size: .875rem;
}
.srpoc-rdr-month-preview table {
	width: 100%;
	margin-top: .5rem;
	border-collapse: collapse;
}
.srpoc-rdr-month-preview td,
.srpoc-rdr-month-preview th {
	padding: .25rem .5rem;
	border-bottom: 1px solid #e5e5e5;
	text-align: left;
}
/* Faz 9 C4/C5 — end */

/* Faz 9 C2/C3 — glossary terms, Cyber FAQ (design pending client approval) */
.ga-article figure {
	margin: 28px 0;
}
.ga-article img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}
.ga-article figcaption {
	margin-top: 10px;
	font-size: .8125rem;
	color: #4e4e70;
	text-align: center;
}
.ga-article ol {
	margin: 0 0 24px;
	padding-left: 1.4em;
}
.ga-article ol li {
	margin-bottom: 12px;
	padding-left: 4px;
}
.ga-article ol li::marker {
	color: #FF4562;
	font-weight: 700;
}
.ga-article a:not([class]) {
	color: #FF4562;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(255, 69, 98, .3);
}
.ga-article a:not([class]):hover {
	text-decoration-color: #FF4562;
}
.ga-article table {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: .9375rem;
}
.ga-article th,
.ga-article td {
	padding: 8px 10px;
	border-bottom: 1px solid #e5e5e5;
	text-align: left;
	vertical-align: top;
}
.srpoc-gls-feat__cover {
	overflow: hidden;
	background: linear-gradient(135deg, #1b1b3c 0, #2a2a52 100%);
}
.srpoc-gls-feat__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.srpoc-cfaq {
	--cfaq-tone: #FF4562;
}
.srpoc-cfaq .ga-article h2 {
	border-left-color: var(--cfaq-tone);
}
.srpoc-cfaq-pill {
	--cfaq-tint: color-mix(in srgb, var(--cfaq-tone, #FF4562) 12%, transparent);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 12px;
	background: var(--cfaq-tint);
	color: var(--cfaq-tone, #FF4562);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.srpoc-cfaq-pill::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.srpoc-cfaq .ga-meta {
	flex-wrap: wrap;
	align-items: center;
}
.srpoc-cfaq-tldr {
	margin: 0 0 24px;
	padding: 18px 22px;
	border: 1px solid color-mix(in srgb, var(--cfaq-tone) 22%, transparent);
	border-radius: 16px;
	background: color-mix(in srgb, var(--cfaq-tone) 7%, #fff);
}
.srpoc-cfaq-tldr__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	padding: 4px 10px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--cfaq-tone) 16%, transparent);
	color: var(--cfaq-tone);
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .08em;
}
.srpoc-cfaq-tldr__label svg,
.srpoc-cfaq-kp__hd svg,
.srpoc-cfaq-back svg,
.srpoc-cfaq-hublink svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.ga-article .srpoc-cfaq-tldr__text {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.55;
	color: #1b1b3c;
}
.srpoc-cfaq-lead {
	font-size: 1.1875rem;
	line-height: 1.7;
	color: #1b1b3c;
}
.srpoc-cfaq-kp {
	margin: 8px 0 32px;
	padding: 20px 24px;
	border: 1px solid color-mix(in srgb, var(--cfaq-tone) 22%, transparent);
	border-radius: 16px;
	background: color-mix(in srgb, var(--cfaq-tone) 7%, #fff);
}
.srpoc-cfaq-kp__hd {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--cfaq-tone);
	font-weight: 800;
}
.srpoc-cfaq-kp__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}
.srpoc-cfaq-kp__list li {
	position: relative;
	padding-left: 22px;
	line-height: 1.6;
	color: #1b1b3c;
}
.srpoc-cfaq-kp__list li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: .65em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cfaq-tone);
}
.srpoc-cfaq-more {
	margin: 0 0 28px;
}
.srpoc-cfaq-more__title {
	margin: 0 0 14px;
	font-size: 1rem;
	font-weight: 800;
	color: #1b1b3c;
}
.srpoc-cfaq-more__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
.srpoc-cfaq-more__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid #e5e5e5;
	border-left: 3px solid var(--cfaq-tone);
	border-radius: 16px;
	background: #fff;
	color: #1b1b3c;
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}
.srpoc-cfaq-more__card:hover {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}
.srpoc-cfaq-more__card .srpoc-cfaq-pill {
	align-self: flex-start;
}
.srpoc-cfaq-more__name {
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.35;
}
.srpoc-cfaq-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .875rem;
	font-weight: 600;
	color: #4e4e70;
	text-decoration: none;
}
.srpoc-cfaq-back:hover {
	color: #FF4562;
}
.srpoc-cfaq-hublink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: #1b1b3c;
	text-decoration: none;
}
.srpoc-cfaq-hublink:hover {
	border-color: #FF4562;
}
.srpoc-cfaq-hublink__title {
	display: block;
	font-weight: 700;
}
.srpoc-cfaq-hublink__sub {
	display: block;
	font-size: .8125rem;
	color: #4e4e70;
}
.srpoc-cfaq-hub__count {
	margin: 0 0 12px;
	font-size: .875rem;
	font-weight: 600;
	color: #4e4e70;
}
/* Glossary index: default-language term listed in another locale ("In English"). */
.gls-term .gls-pill--lang {
	background: #f1f1f6;
	color: #4e4e70;
}
.srpoc-cfaq-hub .gls-term__right {
	display: flex;
	align-items: center;
	gap: 12px;
}
/* v02 glossary-article keeps the sidebar in grid column 2 below 960px, which collapses the
   article column to 0 (the frontend page does the same); the singles stack instead. */
@media (max-width: 960px) {
	.single-srpoc_glossary .ga-sidebar,
	.single-srpoc_cyber_faq .ga-sidebar {
		grid-column: 1;
		grid-row: 2;
	}
}
@media (max-width: 767px) {
	.srpoc-cfaq-more__grid {
		grid-template-columns: 1fr;
	}
	.srpoc-cfaq-hub .gls-term__right .gls-pill {
		display: none;
	}
}
/* Faz 9 C2/C3 — end */

/*
 * QA11 L7 — v02 chart/map fills are empty <span>s with width/height in style or
 * page CSS. Inline spans ignore those dimensions (FE has the same gap). Force a
 * block box so horizontal bars and map dots paint. Do not touch vendor page CSS.
 */
.lld-indrow__bar,
.cv-chart__bar,
.fdb-chart__bar,
.mca-chart__bar,
.dwi-chart__bar,
.ba-chart__bar,
.dwi-mini__fill,
.dwi-map__dot,
.dwi-map__legend-dot {
	display: block;
}

/*
 * QA11 L2 — guest byline photo. Vendor page CSS paints initials on a gradient
 * disc; when author_image is set we swap in an <img> and drop the disc fill.
 */
.ba-author__avatar--photo,
.blog-spotlight__avatar--photo {
	background: transparent;
	padding: 0;
	overflow: hidden;
}
.ba-author__avatar-img,
.blog-spotlight__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.ba-author__link {
	color: inherit;
	text-decoration: none;
}
.ba-author__link:hover,
.ba-author__link:focus {
	text-decoration: underline;
}

/*
 * Gartner logo in the testimonials strip (Request a Demo, Start Free): the vendor sheet points
 * at /assets/images/… (the frontend's root), a 404 here.
 */
body .gartner-testimonials .gartner-pi-logo {
	background-image: url('/wp-content/themes/srpoc/assets/images/pricing/gartner-pi-logo.webp') !important;
}

/*
 * Blog cards with their own cover: the vendor sheet still painted one of four sample covers
 * behind it (nth-of-type), about 480 KB of images nobody sees on every blog listing.
 */
.page-blog .blog-row .blog-row__cover.has-cover,
.page-blog .blog-pick .blog-pick__cover.has-cover,
.page-blog .blog-spotlight .blog-spotlight__cover.has-cover {
	background-image: none;
}
/* Sidebar "Top articles" thumbnails (about 64 px) use the sample covers on purpose: small copies. */
.page-blog .blog-top-list .blog-top-item:nth-of-type(4n+1) .blog-top-item__img {
	background-image: image-set(url('/wp-content/themes/srpoc/assets/images/blog/blog-example-cover.png-160w.webp') 1x, url('/wp-content/themes/srpoc/assets/images/blog/blog-example-cover.png-400w.webp') 2x);
}
.page-blog .blog-top-list .blog-top-item:nth-of-type(4n+2) .blog-top-item__img {
	background-image: image-set(url('/wp-content/themes/srpoc/assets/images/blog/wormgpt-the-blueprint-for-malicious-ai.jpg-160w.webp') 1x, url('/wp-content/themes/srpoc/assets/images/blog/wormgpt-the-blueprint-for-malicious-ai.jpg-400w.webp') 2x);
}
.page-blog .blog-top-list .blog-top-item:nth-of-type(4n+3) .blog-top-item__img {
	background-image: image-set(url('/wp-content/themes/srpoc/assets/images/blog/cve-2026-38526-in-krayin-crm-enables-rce.jpg-160w.webp') 1x, url('/wp-content/themes/srpoc/assets/images/blog/cve-2026-38526-in-krayin-crm-enables-rce.jpg-400w.webp') 2x);
}
.page-blog .blog-top-list .blog-top-item:nth-of-type(4n) .blog-top-item__img {
	background-image: image-set(url('/wp-content/themes/srpoc/assets/images/blog/5-stages-of-the-threat-intelligence-lifecycle.png-160w.webp') 1x, url('/wp-content/themes/srpoc/assets/images/blog/5-stages-of-the-threat-intelligence-lifecycle.png-400w.webp') 2x);
}

/*
 * Author profile pages (/author/{slug}/, inc/authors.php): the blog header and rows, with a
 * photo card in the header and the feed in one column.
 */
.srpoc-author__card {
	display: flex;
	align-items: center;
	gap: 32px;
	max-width: 880px;
	margin: 0 auto;
	text-align: left;
}
.srpoc-author__photo {
	flex: 0 0 160px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 4px #fff, 0 0 0 5px #e5e5e5;
}
.srpoc-author__text {
	min-width: 0;
}
.srpoc-author .srpoc-author__name {
	margin: 0 0 6px;
	text-align: left;
}
.srpoc-author__job {
	margin: 0 0 14px;
	font-weight: 600;
	color: #FF4562;
}
.srpoc-author__job span {
	color: #4e4e70;
	font-weight: 500;
}
.srpoc-author .srpoc-author__bio {
	margin: 0 0 16px;
	max-width: none;
	text-align: left;
}
.srpoc-author__social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid #e5e5e5;
	border-radius: 999px;
	color: #1b1b3c;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}
.srpoc-author__social svg {
	color: #0a66c2;
}
.srpoc-author__social:hover,
.srpoc-author__social:focus-visible {
	border-color: #0a66c2;
}
.srpoc-author__layout.blog-layout {
	grid-template-columns: minmax(0, 1fr);
	max-width: 1000px;
	padding-top: 56px;
}
@media (max-width: 640px) {
	.srpoc-author__card {
		flex-direction: column;
		gap: 20px;
		text-align: center;
	}
	.srpoc-author__photo {
		flex-basis: auto;
		width: 128px;
		height: 128px;
	}
	.srpoc-author .srpoc-author__name,
	.srpoc-author .srpoc-author__bio {
		text-align: center;
	}
	.srpoc-author__layout.blog-layout {
		padding-top: 32px;
	}
}

/*
 * Defects that ship in the frontend prototype, corrected here until they are fixed upstream
 * (extra specificity because the imported page CSS loads after this file).
 */
/* Footer newsletter: the input kept its intrinsic width and pushed Subscribe out of the column. */
.footer__subscribe-form .footer__subscribe-input {
	min-width: 0;
}
.footer__subscribe-form .footer__subscribe-btn {
	flex-shrink: 0;
}
/* Terms of service: the sidebar stayed pinned to grid column 2 on phones, squeezing the text. */
@media (max-width: 960px) {
	.tos-layout .tos-sidebar {
		grid-column: 1;
		grid-row: 1;
	}
	.tos-layout .tos-body {
		grid-column: 1;
		grid-row: 2;
	}
}
/* Privacy policy: same pinned sidebar column as the terms page. */
@media (max-width: 960px) {
	.pp-layout .pp-sidebar {
		grid-column: 1;
		grid-row: 1;
	}
	.pp-layout .pp-body {
		grid-column: 1;
		grid-row: 2;
	}
}
/* Imported classic-editor captions carry a fixed pixel width; keep them inside the column. */
.wp-caption,
figure.wp-caption {
	max-width: 100%;
}
.wp-caption img {
	max-width: 100%;
	height: auto;
}
/* Modules index: the group heading and its "Explore" link wrapped nowhere on phones. */
@media (max-width: 520px) {
	.modules-index__group-head {
		flex-wrap: wrap;
		gap: 0.25rem 1rem;
	}
	.modules-index__group-link {
		white-space: normal;
	}
}
/* MCP diagram: on tablets the wires keep a 150 px minimum and push the diagram past the viewport. */
@media (min-width: 641px) and (max-width: 960px) {
	.mcp-diagram__wire {
		min-width: 70px;
	}
}
/* Training single: the purchase card built from the imported "$price Buy Now" line. */
.srpoc-ev-buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin: 1.75rem 0;
	padding: 1.125rem 1.5rem;
	border: 1px solid rgba(27, 27, 60, 0.12);
	border-radius: 16px;
	background: #fff;
}
.srpoc-ev-buy__price {
	font-size: 1.75rem;
	font-weight: 700;
	color: #1b1b3c;
}
.srpoc-ev-buy a {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 1.5rem;
	border-radius: 9999px;
	background: #ff4562;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.srpoc-ev-buy a:hover {
	background: #e63b57;
}

/* Use-case "Get a Demo" band: the imported page CSS has the two-column grid but no phone rule. */
@media (max-width: 960px) {
	.uc-demo .uc-demo__container {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* Plain pages made of core blocks only (thank-you pages, G2, assessment report): readable column. The srpoc-plain-page body class comes from inc/plain-pages.php. */
body.srpoc-plain-page main > .entry-content {
	box-sizing: border-box;
	max-width: 760px;
	margin: 0 auto;
	padding: 96px 24px 112px;
}
body.srpoc-plain-page main > .entry-content > * + * {
	margin-top: 1.25rem;
}
body.srpoc-plain-page main > .entry-content h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #1b1b3c;
}
body.srpoc-plain-page main > .entry-content p,
body.srpoc-plain-page main > .entry-content li {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: #4e4e70;
}
body.srpoc-plain-page main > .entry-content ul {
	padding-left: 1.25rem;
}

/*
 * Agentic Threat Intelligence page: the frontend ships the newer MCP diagram markup
 * (node / h-conn / hub / inner-card / server-badge) without any CSS, so every SVG rendered at 146 px.
 * Scoped to .ati-mcp-section so the home and MCP server diagrams are untouched.
 */
.ati-mcp-section .mcp-diagram {
	display: grid;
	grid-template-columns: auto minmax(40px, 1fr) auto minmax(40px, 1fr) auto;
	align-items: center;
	gap: 0;
	width: 100%;
	max-width: 760px;
	padding: 28px 24px;
	box-sizing: border-box;
}
.ati-mcp-section .mcp-diagram svg {
	flex: none;
}
.ati-mcp-section .mcp-section__desc {
	margin-bottom: 1.5rem;
}
.ati-mcp-section .mcp-section__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: 48px;
	align-items: center;
}
@media (max-width: 960px) {
	.ati-mcp-section .mcp-section__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}
/* Undo the older diagram's absolute chips and fixed 148 px hub that share these class names in main.min.css. */
.ati-mcp-section .mcp-diagram__chip {
	position: static;
	top: auto;
	left: auto;
	transform: none;
	box-shadow: none;
}
.ati-mcp-section .mcp-diagram__hub {
	position: static;
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
.ati-mcp-section .mcp-diagram__v-conn {
	flex: none;
	display: block;
}
.ati-mcp-section .mcp-diagram__node {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}
.ati-mcp-section .mcp-diagram__node-icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: #f1efff;
	color: #5b3fd6;
}
.ati-mcp-section .mcp-diagram__node-icon--blue {
	background: #e9f3ff;
	color: #1f6fd1;
}
.ati-mcp-section .mcp-diagram__node-icon svg {
	width: 28px;
	height: 28px;
}
.ati-mcp-section .mcp-diagram__node-label {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	color: #1b1b3c;
}
.ati-mcp-section .mcp-diagram__node-chips,
.ati-mcp-section .mcp-diagram__action-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.ati-mcp-section .mcp-diagram__chip,
.ati-mcp-section .mcp-diagram__action-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid rgba(27, 27, 60, 0.12);
	border-radius: 9999px;
	background: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	color: #1b1b3c;
}
.ati-mcp-section .mcp-diagram__chip svg,
.ati-mcp-section .mcp-diagram__action-item svg {
	width: 12px;
	height: 12px;
}
.ati-mcp-section .mcp-diagram__h-conn {
	position: relative;
	height: 24px;
	min-width: 40px;
}
.ati-mcp-section .mcp-diagram__h-line {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	background: rgba(27, 27, 60, 0.16);
}
.ati-mcp-section .mcp-diagram__h-endcap {
	position: absolute;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff4562;
	transform: translateY(-50%);
}
.ati-mcp-section .mcp-diagram__h-endcap--start {
	left: -4px;
}
.ati-mcp-section .mcp-diagram__h-endcap--end {
	right: -4px;
}
.ati-mcp-section .mcp-diagram__h-dot,
.ati-mcp-section .mcp-diagram__v-dot {
	display: none;
}
.ati-mcp-section .mcp-diagram__hub {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 176px;
}
.ati-mcp-section .mcp-diagram__inner-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid rgba(27, 27, 60, 0.12);
	border-radius: 14px;
	background: #fff;
}
.ati-mcp-section .mcp-diagram__inner-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #fff1f3;
	color: #ff4562;
}
.ati-mcp-section .mcp-diagram__inner-icon--dark {
	background: #1b1b3c;
	color: #fff;
}
.ati-mcp-section .mcp-diagram__inner-icon svg {
	width: 18px;
	height: 18px;
}
.ati-mcp-section .mcp-diagram__inner-label {
	font-size: 0.8125rem;
	line-height: 1.25;
	color: #1b1b3c;
}
.ati-mcp-section .mcp-diagram__v-conn {
	position: relative;
	align-self: center;
	width: 2px;
	height: 28px;
}
.ati-mcp-section .mcp-diagram__v-line {
	position: absolute;
	inset: 0;
	background: rgba(27, 27, 60, 0.16);
}
.ati-mcp-section .mcp-diagram__server-badge {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 14px;
	background: #1b1b3c;
	color: #fff;
}
.ati-mcp-section .mcp-diagram__server-logo {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.12);
	color: #ff4562;
}
.ati-mcp-section .mcp-diagram__server-logo svg {
	width: 20px;
	height: 20px;
}
.ati-mcp-section .mcp-diagram__server-text {
	font-size: 0.75rem;
	line-height: 1.25;
}
.ati-mcp-section .mcp-diagram__server-text strong {
	display: block;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}
@media (max-width: 760px) {
	.ati-mcp-section .mcp-diagram {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		padding: 20px 16px;
	}
	.ati-mcp-section .mcp-diagram__h-conn {
		width: 24px;
		height: 36px;
		min-width: 0;
	}
	.ati-mcp-section .mcp-diagram__h-line {
		left: 50%;
		right: auto;
		top: 0;
		bottom: 0;
		width: 2px;
		height: auto;
		transform: translateX(-50%);
	}
	.ati-mcp-section .mcp-diagram__h-endcap {
		left: 50%;
		transform: translateX(-50%);
	}
	.ati-mcp-section .mcp-diagram__h-endcap--start {
		top: -4px;
	}
	.ati-mcp-section .mcp-diagram__h-endcap--end {
		top: auto;
		bottom: -4px;
		right: auto;
	}
}

/* Use-case pages: the "agentic" and "additional resources" card grids stay three columns on phones (cards ~100 px wide). */
@media (max-width: 760px) {
	.uc-agentic__container .uc-agentic__grid,
	.uc-section__container .uc-res__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Press release body: readable prose (the imported text had no paragraph structure or spacing). */
.srpoc-press-prose {
	max-width: 760px;
	margin: 0 auto;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #2b2b4a;
}
.srpoc-press-prose > * + * {
	margin-top: 1.1em;
}
.srpoc-press-prose img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.5em auto;
	border-radius: 12px;
}
.srpoc-press-prose ul,
.srpoc-press-prose ol {
	padding-left: 1.4em;
}
.srpoc-press-prose li + li {
	margin-top: 0.5em;
}
.srpoc-press-prose a {
	color: #ff4562;
}

/* Request demo: the G2 and Gartner rating badges wrapped nowhere on phones and pushed the second one to the edge. */
@media (max-width: 480px) {
	.rqd-ratings {
		flex-wrap: wrap;
		row-gap: 12px;
	}
}

/* Financial radar filters: a country option with a long list of names stretched the select to the full page width. */
.fdb-filters .fdb-select {
	max-width: 340px;
	text-overflow: ellipsis;
}
@media (max-width: 767px) {
	.fdb-filters .fdb-select {
		max-width: none;
	}
}

/* Major cyber attacks table: the Details column was squeezed to ~120 px by the nowrap vector pills (8-line rows). */
.mca-table thead th:nth-child(3),
.mca-table tbody td:nth-child(3) {
	min-width: 300px;
}
.mca-table tbody td:nth-child(2) > *,
.mca-table tbody td:nth-child(4) > * {
	white-space: normal;
}
.mca-table thead th:nth-child(4),
.mca-table tbody td:nth-child(4) {
	max-width: 340px;
}

/* Reports listing: the category pills are one 960 px row; on phones it ran past the screen with no way to reach the rest. */
@media (max-width: 767px) {
	.rpt-filters__inner {
		max-width: 100%;
	}
	.rpt-filters__group {
		max-width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.rpt-filters__group::-webkit-scrollbar {
		display: none;
	}
	.rpt-filters__pill {
		flex: none;
	}
}

/* Search results: the default query loop printed oversized headings edge to edge with no list structure. */
body.search-results main .wp-block-post-template {
	max-width: 820px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
body.search-results main .wp-block-post {
	padding: 1.5rem 0;
	border-bottom: 1px solid rgba(27, 27, 60, 0.1);
}
body.search-results main .wp-block-post-title {
	margin: 0 0 0.5rem;
	font-size: 1.375rem;
	line-height: 1.3;
}
body.search-results main .wp-block-post-title a {
	color: #1b1b3c;
	text-decoration: none;
}
body.search-results main .wp-block-post-title a:hover {
	color: #ff4562;
}
body.search-results main .wp-block-post-excerpt {
	margin: 0;
	color: #4e4e70;
	line-height: 1.6;
}


/*
 * Mobile header (N35). Below the hamburger breakpoint the topbar was a second
 * band above the logo row; its links and the language choice now sit at the end
 * of the mobile panel (.navbar__mobile-utility in blocks/site-header). Desktop
 * (>= 1180px, see the navbar rule above) keeps the topbar and never shows the copy.
 */
@media (max-width: 1179px) {
	.site-header > .topbar {
		display: none;
	}
}

@media (min-width: 1180px) {
	.navbar__mobile-utility {
		display: none;
	}
}

.navbar__mobile-utility {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #e5e5e5;
}

.navbar__mobile-utility-links,
.navbar__mobile-locales {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.navbar__mobile-utility-link,
.navbar__mobile-locale {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.75rem;
	border-radius: 0.75rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #1b1b3c;
	text-decoration: none;
}

.navbar__mobile-utility-link:hover,
.navbar__mobile-locale:hover {
	background: #fafafa;
}

.navbar__mobile-locale {
	border: 1px solid #e5e5e5;
}

.navbar__mobile-locale.is-current {
	border-color: #1b1b3c;
	font-weight: 600;
}

/*
 * Tap targets and small text (N35 / WCAG 2.2 2.5.8). Footer links were 17px
 * tall inline boxes inside list rows whose line pitch is 24.8px (16px x 1.55).
 * Giving the link that same line height as a block fills the row without
 * moving anything. Footer fine print and the announcement copy were 11px.
 */
.footer__link,
.footer__legal-link {
	display: inline-block;
	vertical-align: top;
	line-height: 1.55rem;
}

@media (max-width: 767px) {
	.footer__subscribe-label,
	.footer__subscribe-note {
		font-size: 0.75rem;
	}

	.breadcrumb a {
		display: inline-flex;
		align-items: center;
		min-height: 24px;
	}

	.announcement-bar .announcement-bar__text,
	.announcement-bar .announcement-bar__cta {
		font-size: 0.75rem;
	}
}

/*
 * Contrast (N36). Footer fine print sat at 30-40% white on the navy footer
 * (2.7-3.7:1); 60% gives 6.7:1. The Gartner score blue was 2.8:1 on white.
 * Pink text on white or on the coral tint uses a darker shade of the brand pink.
 */
.footer__subscribe-note,
.footer__copyright,
.footer__legal-link {
	color: rgba(255, 255, 255, 0.6);
}

.footer__legal-link:hover {
	color: #fff;
}

.gartner-badge__score {
	color: #1a6fa0;
}

.analyst-recognition__card-link {
	color: #d6193f;
}

.pp26[data-theme="light"] .pp26-mssp a {
	color: #c81e3e;
}

.pp26[data-theme="light"] .eyebrow {
	--eyebrow-color: #b42b45;
}

.pp26[data-theme="light"] .cmp-ok {
	--cmp-ok: #15803d;
}

/* v02 reuses the dark-section kicker (55% white) on the light FAQ, where it is invisible; other FAQ labels are hidden in v02. */
.pricing-faq__header > .cti-benefits__kicker {
	display: none;
}

/*
 * Request a demo (N35): on one column the form came after the lede, carousel,
 * bullets and badges, about two screens down. Below v02's 960px breakpoint the
 * copy column is flattened so the form can sit right under the H1. The form
 * card keeps its own width rules.
 */
@media (max-width: 960px) {
	.rqd-hero .rqd-hero__container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.rqd-hero .rqd-hero__container > div:first-child {
		display: contents;
	}

	.rqd-hero .rqd-hero__container > div:first-child > .rqd-hero__eyebrow {
		align-self: flex-start;
	}

	.rqd-hero .rqd-hero__container > .rqd-form-wrap {
		order: 1;
		margin: 0 0 32px;
	}

	.rqd-hero .rqd-hero__container > div:first-child > :not(.rqd-breadcrumb):not(.rqd-hero__eyebrow):not(.rqd-hero__title) {
		order: 2;
	}
}

/* Press listing: the vendor pink date (#FF4562) is 3.2:1 on white; same hue at AA contrast. */
.pr-card .pr-card__date {
	color: #c81e3e;
}

/* N36: mega menu "New / Popular" badges were 10px; 12px is the smallest readable size.
 * One pixel less vertical padding keeps the pill height. */
.navbar__mega-badge {
	font-size: 12px;
	padding-top: 1px;
	padding-bottom: 1px;
}

/* N36: PeerSpot carousel dots (request a demo, CTI) are 18px buttons. The button grows to
 * a 24px tap target; the painted dot stays 18px (content-box clip), the gap stays 44px.
 * The widget injects its CSS after ours, hence the container prefix (and !important on
 * the clip, which the widget's dark-mode "background: … !important" would reset). */
.peerspot-widget-container section.peerspot-widget .tns-outer .tns-nav > button[aria-controls] {
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	padding: 3px;
	margin: 10px;
	background-clip: content-box !important;
}

/* Mobile menu: a plain top-level link (Plans & Pricing) lines up with the group buttons (16px). */
#navbar-mobile .navbar__mobile-link {
	padding-left: 16px;
	padding-right: 16px;
}

/* v6 home + products port (client frontend 906758a..606aad7). Narrow selectors only:
   component classes or page/body classes, never bare element or layout selectors. */
/* -- v6: home -- */
/* -- v6: ASM / BP / SCI -- */
/* -- v6: ADWM / XTI / ATI -- */
/* -- v6: CTI + product sub pages -- */
/* end v6 home + products port */

/* v6 chrome port (client frontend 606aad7) ------------------------------------------
 * The topbar language selector is a native <details> (no script) wearing the v6
 * .topbar__lang classes; v6 opens its list with .is-open, ours with [open]. */
details.topbar__lang[open] .topbar__lang-list {
	display: block;
}

details.topbar__lang[open] .topbar__lang-chevron {
	transform: rotate(180deg);
}

/* Office tag: the Spanish "Sede central" broke onto two lines next to the city. */
.footer__office-city .footer__office-tag {
	white-space: nowrap;
}

/* v6 pages port (frontend 606aad7) -------------------------------------------------
 * Use case pages: the page CSS scopes its colour tokens to the frontend's
 * <main id="main-content">, which WordPress does not print, so buttons, the live
 * feed and accents rendered without colour. Same tokens, on the use case content only. */
.srpoc-v02-page .entry-content:has(> .uc-hero) {
	--uc-ink: #1b1b3c;
	--uc-primary: #ff4562;
	--uc-primary-dark: #e8294a;
	--uc-muted: #4e4e70;
	--uc-line: #e5e5e5;
	--uc-paper: #fafafa;
}
/* About photo hero (v6): the bold Inter title wraps one line more than the fallback font
 * on phones and on wide screens; reserve that line so the bottom-anchored hero does not
 * jump when the font arrives (CLS). */
@media (min-width: 1100px) {
	.srpoc-v02-page .abt-hero--photo .abt-hero__title {
		min-height: 3lh;
	}
}
@media (max-width: 640px) {
	.srpoc-v02-page .abt-hero--photo .abt-hero__title {
		min-height: 4lh;
	}
	.srpoc-v02-page .abt-hero__bg picture {
		display: contents;
	}
}

/* Request a Demo carousel dots and stored testimonial cards (ES copy): 24px tap area around the
   8px dot, AA contrast for the review date. */
.rqd-carousel__dots .rqd-carousel__dot {
	position: relative;
}
.rqd-carousel__dots .rqd-carousel__dot::after {
	content: "";
	position: absolute;
	inset: -8px;
}
.rqd-carousel__dots {
	gap: 16px;
}
.rqd-testi .rqd-testi__date {
	color: #5b6478;
}

/*
 * Use case trust row on phones: the G2 rating and the Gartner badge sat on one
 * non-wrapping line wider than 390px and were clipped at both edges.
 */
@media (max-width: 600px) {
	.uc-trust .uc-trust__ratings {
		flex-wrap: wrap;
		row-gap: 16px;
	}
}

/*
 * Glossary / article sidebar card titles are <p> (audit 16-9: sidebar H3s came before the H1 in
 * the document outline). Keep the heading line box and tracking they had as <h3>.
 */
p.ga-card-s__title {
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/*
 * Event and webinar listings (/events/, customer revisions 14 Oct 2026): the vendor
 * `.wbn-card{display:block}` beat the hidden attribute, so the Upcoming / Past filter, the
 * search and "Load more" changed nothing on screen.
 */
.wleg [data-wleg-card][hidden] {
	display: none;
}

/*
 * /from-chaos-to-clarity/ form (customer revisions 14 Oct 2026): at 420px wide with 32px padding
 * the HubSpot iframe was 354px and stacked every field in one column; other forms are two-column.
 */
@media (min-width: 1024px) {
	#ctc-form.ctc-hero__form-card {
		max-width: 500px;
		padding: 28px;
	}
}

/*
 * On-demand webinar single without a hero (customer revisions 14 Oct 2026): breadcrumb, title and
 * date open the content column; the recording card replaces the form when there is a player.
 */
.wdet-body--webinar {
	padding-top: 40px;
}
.wdet-body--webinar .wdet-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
	font-size: 0.813rem;
	color: #6b6b85;
}
.wdet-body--webinar .wdet-crumbs a {
	color: #6b6b85;
	text-decoration: none;
}
.wdet-body--webinar .wdet-crumbs a:hover {
	color: #1b1b3c;
	text-decoration: underline;
}
.wdet-body--webinar .wdet-crumbs [aria-current] {
	color: #1b1b3c;
}
.wdet-body--webinar .wdet-article__h1 {
	margin: 0 0 12px;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #1b1b3c;
}
.wdet-body--webinar .wdet-article__date {
	margin: 0 0 24px;
	font-size: 0.9375rem;
	color: #ff4562;
	font-weight: 600;
}
.wdet-player__start {
	position: relative;
	display: block;
	width: 100%;
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #1b1b3c;
	cursor: pointer;
}
.wdet-player__start img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wdet-player__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: rgba(27, 27, 60, 0.85);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}
.wdet-player__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -11px 0 0 -7px;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
}
.wdet-player__start:hover .wdet-player__play,
.wdet-player__start:focus-visible .wdet-player__play {
	background: #ff4562;
}
.wdet-player__cta {
	margin: 16px 0 0;
}
.wdet-player__btn {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 1.5rem;
	border-radius: 9999px;
	background: #ff4562;
	color: #fff;
	border: 0;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}
.wdet-player__btn:hover,
.wdet-player__btn:focus-visible {
	background: #e8294a;
}
.wdet-player__frame {
	display: block;
	width: 100%;
	height: 736px;
	margin-top: 12px;
	border: 0;
}

/*
 * Mega menu icons in one colour (customer sheet Issue 8, confirmed 14 Oct 2026): the vendor
 * stylesheet paints the Free Tools icons pink and every other panel navy.
 */
.navbar__mega-panel[data-mega="free-tools"] .navbar__mega-card-icon svg {
	color: #1b1b3c;
}

/*
 * Request a Demo reviews (customer revisions 14 Oct 2026): the Gartner widget inside the
 * section takes the vendor .gartner-testimonials styling without its section padding.
 */
.rqd-testimonials .srpoc-rqd-gartner {
	padding: 0;
	background: none;
}

/* Newsletter boxes (footer, blog sidebar): result line under the form (assets/gated-forms.js). */
.srpoc-newsletter-status {
	margin: 10px 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: inherit;
}
.srpoc-newsletter-status.is-error {
	font-weight: 600;
}

/* Press cards with the item's own image (inc/press-blocks.php); the rest keep the gradient. */
.pr-card__cover.has-image {
	background: #1b1b3c;
}
.pr-card__cover.has-image::after {
	content: none;
}
.pr-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* Partners hero (frontend 5a5c424): portal login button and the live Gartner rating. */
.ptr-hero__actions {
	margin-top: 24px;
}
.ptr-hero__login {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ptr-hero__login svg {
	width: 16px;
	height: 16px;
}
.ptr-hero__rating {
	margin-top: 20px;
}