/*
 * Sabreen Product Security section — SNOWLEOPARD® anti-counterfeiting pages.
 *
 * Covers four page templates: product-security-page.php, snowleopard-page.php,
 * industries-hub-page.php, industry-landing-page.php. Enqueued from functions.php
 * (sabreen_enqueue_security_assets) only on those templates.
 *
 * WHY THIS IS A REAL FILE AND NOT INLINE
 * The site runs the Airlift optimizer, which strips inline <style> and <script> blocks. The
 * design handoff authors every rule as an inline style attribute — that is a constraint of its
 * prototyping runtime, which its own README disowns. Everything lives here instead. After any
 * edit you must re-upload this file AND purge the Airlift cache, or Airlift keeps serving its
 * previous optimized copy. If hover states or the marquee vanish, safelist "sabreen-security"
 * in Airlift's Remove Unused CSS.
 *
 * WHY EVERY SELECTOR CARRIES #sbn-ps
 * Hello Elementor and Elementor's global kit styles bleed into custom markup — orange link
 * colours, button boxes, list bullets, heading margins. Kit rules land at class specificity
 * (0-1-1), so class-scoped rules here would be a source-order coin flip. The page wrapper
 * carries id="sbn-ps", which puts every rule below at 1-x-x and ends the argument. This is the
 * same posture sabreen-nav.css already takes, for the same reason.
 *
 * CONTRAST DEVIATIONS FROM THE HANDOFF (deliberate, do not "restore")
 * --sbn-ink-soft is #5f7391, not the handoff's #7488a1. #7488a1 on white measures 3.63:1 and
 * fails WCAG AA for normal text at the 13px and 15px sizes it is used at; #5f7391 measures
 * 4.76:1. The handoff's #8494ab logo-strip label (3.09:1) is mapped to the same token.
 * #8ba0bd on navy was checked and kept — it measures 7.0:1.
 *
 * @package Sabreen
 */

/* ---------------------------------------------------------------------------
 * 1. Tokens
 * ------------------------------------------------------------------------ */

#sbn-ps {
	/* Navy family */
	--sbn-navy: #091423;
	--sbn-navy-card: #0d1a2c;
	--sbn-navy-brand: #0e2a52;

	/* Accent */
	--sbn-accent: #2b63cc;
	--sbn-accent-hover: #1c47a0;
	--sbn-accent-light: #9db8e6;

	/* Ink (on light) */
	--sbn-ink: #0e1c30;
	--sbn-ink-med: #33475f;
	--sbn-ink-muted: #51637c;
	--sbn-ink-soft: #5f7391; /* AA-corrected; see header note */

	/* Text on dark */
	--sbn-on-dark: #b9c8de;
	--sbn-on-dark-strong: #dbe6f6;
	--sbn-on-dark-dim: #8ba0bd;

	/* Surfaces */
	--sbn-white: #ffffff;
	--sbn-tint: #f5f8fc;
	--sbn-subtle: #fbfcfe;
	--sbn-icon-tile: #f1f5fb;
	--sbn-badge-tile: #eaf2ff;
	--sbn-accent-tint: #eef3fb;
	--sbn-accent-tint-alt: #e3ebf7;

	/* Lines */
	--sbn-border: #e5ecf5;
	--sbn-border-light: #eef2f8;

	/* Risk */
	--sbn-risk: #c0392b;
	--sbn-risk-bg: #fdecea;

	/* Type */
	--sbn-head: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
	--sbn-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;

	/* Signature gradients */
	--sbn-hero-glow:
		radial-gradient(1150px 580px at 84% -14%, rgba(43, 99, 204, .24), transparent 64%),
		radial-gradient(720px 440px at 6% 114%, rgba(43, 99, 204, .09), transparent 60%);
	--sbn-card-glow: radial-gradient(400px 240px at 90% 0, rgba(43, 99, 204, .35), transparent 65%);
	--sbn-panel-glow: radial-gradient(500px 300px at 100% 0, rgba(43, 99, 204, .3), transparent 65%);

	/* Shadows */
	--sbn-shadow-hero: 0 30px 80px rgba(0, 0, 0, .45);
	--sbn-shadow-media: 0 20px 50px rgba(14, 42, 82, .08);
	--sbn-shadow-table: 0 20px 50px rgba(14, 42, 82, .06);
	--sbn-shadow-card: 0 14px 36px rgba(14, 42, 82, .05);
	--sbn-shadow-hover: 0 18px 40px rgba(14, 42, 82, .09);
}

/* ---------------------------------------------------------------------------
 * 2. Defensive base — undo theme/Elementor bleed inside the section only
 * ------------------------------------------------------------------------ */

#sbn-ps {
	font-family: var(--sbn-body);
	color: var(--sbn-ink);
	background: var(--sbn-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

#sbn-ps *,
#sbn-ps *::before,
#sbn-ps *::after {
	box-sizing: border-box;
}

#sbn-ps h1,
#sbn-ps h2,
#sbn-ps h3,
#sbn-ps h4,
#sbn-ps p,
#sbn-ps ul,
#sbn-ps li,
#sbn-ps figure {
	margin: 0;
	padding: 0;
}

#sbn-ps ul {
	list-style: none;
}

#sbn-ps h1,
#sbn-ps h2,
#sbn-ps h3,
#sbn-ps h4 {
	font-family: var(--sbn-head);
	font-weight: 700;
	color: inherit;
	text-transform: none;
}

#sbn-ps a {
	color: var(--sbn-accent);
	text-decoration: none;
	transition: color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#sbn-ps a:hover {
	color: var(--sbn-accent-hover);
}

#sbn-ps img {
	display: block;
	max-width: 100%;
}

#sbn-ps button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
}

/* Visually-hidden text. Defined here rather than borrowing the theme's .screen-reader-text so
   the section does not depend on Hello Elementor's stylesheet being present — if that changes,
   hidden labels would otherwise render as visible body copy. */
#sbn-ps .sbn-ps__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Focus rings — undefined everywhere in the handoff. Light and dark variants so the ring is
   visible on both the navy hero and the white body. */
#sbn-ps a:focus-visible,
#sbn-ps button:focus-visible {
	outline: 3px solid var(--sbn-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

#sbn-ps .sbn-ps__dark a:focus-visible,
#sbn-ps .sbn-ps__dark button:focus-visible {
	outline-color: var(--sbn-on-dark-strong);
}

/* ---------------------------------------------------------------------------
 * 3. Layout primitives
 * ------------------------------------------------------------------------ */

#sbn-ps .sbn-ps__wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 32px;
}

#sbn-ps .sbn-ps__wrap--920 { max-width: 920px; }
#sbn-ps .sbn-ps__wrap--900 { max-width: 900px; }
#sbn-ps .sbn-ps__wrap--840 { max-width: 840px; }

#sbn-ps .sbn-ps__section {
	padding: 96px 0;
}

#sbn-ps .sbn-ps__section--88 { padding: 88px 0; }
#sbn-ps .sbn-ps__section--strip { padding: 30px 0; border-bottom: 1px solid var(--sbn-border-light); }
#sbn-ps .sbn-ps__section--stats { padding: 26px 0; border-bottom: 1px solid var(--sbn-border-light); }
#sbn-ps .sbn-ps__section--others { padding: 80px 0 40px; }
#sbn-ps .sbn-ps__section--tint { background: var(--sbn-tint); }
#sbn-ps .sbn-ps__section--white { background: var(--sbn-white); }

#sbn-ps .sbn-ps__dark {
	position: relative;
	background: var(--sbn-navy);
	color: var(--sbn-white);
	overflow: hidden;
}

#sbn-ps .sbn-ps__glow {
	position: absolute;
	inset: 0;
	background: var(--sbn-hero-glow);
	pointer-events: none;
}

#sbn-ps .sbn-ps__glow--corner {
	background: radial-gradient(800px 460px at 100% 0, rgba(43, 99, 204, .22), transparent 60%);
}

#sbn-ps .sbn-ps__layer {
	position: relative;
}

/* ---------------------------------------------------------------------------
 * 4. Type
 * ------------------------------------------------------------------------ */

#sbn-ps .sbn-ps__eyebrow {
	display: block;
	font-family: var(--sbn-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sbn-accent);
}

#sbn-ps .sbn-ps__eyebrow--light {
	color: var(--sbn-accent-light);
}

#sbn-ps .sbn-ps__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sbn-accent-light);
	border: 1px solid rgba(157, 184, 230, .35);
	padding: 8px 16px;
	border-radius: 999px;
}

#sbn-ps .sbn-ps__h1 {
	font-size: clamp(34px, 4.4vw, 52px);
	line-height: 1.06;
	letter-spacing: -.02em;
	margin: 24px 0 20px;
}

#sbn-ps .sbn-ps__h1--48 {
	font-size: clamp(32px, 4.1vw, 48px);
	line-height: 1.08;
	margin: 22px 0 20px;
}

#sbn-ps .sbn-ps__h1--50 {
	font-size: clamp(33px, 4.3vw, 50px);
	line-height: 1.07;
}

#sbn-ps .sbn-ps__h2 {
	font-size: clamp(27px, 3vw, 36px);
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 16px 0;
}

#sbn-ps .sbn-ps__h2--34 {
	font-size: clamp(26px, 2.8vw, 34px);
	line-height: 1.14;
	margin: 16px 0 18px;
}

#sbn-ps .sbn-ps__h2--38 {
	font-size: clamp(28px, 3.2vw, 38px);
}

#sbn-ps .sbn-ps__h2--26 {
	font-size: clamp(22px, 2.2vw, 26px);
	letter-spacing: -.01em;
	margin: 0 0 24px;
}

#sbn-ps .sbn-ps__h3 {
	font-size: 19px;
	line-height: 1.3;
}

#sbn-ps .sbn-ps__h3--21 { font-size: 21px; }
#sbn-ps .sbn-ps__h3--24 { font-size: 24px; line-height: 1.2; }

#sbn-ps .sbn-ps__lede {
	font-size: 19px;
	line-height: 1.65;
	color: var(--sbn-ink-muted);
	text-wrap: pretty;
}

#sbn-ps .sbn-ps__lede--dark {
	color: var(--sbn-on-dark);
	line-height: 1.6;
	max-width: 560px;
}

#sbn-ps .sbn-ps__intro {
	font-size: 18px;
	line-height: 1.6;
	color: var(--sbn-ink-muted);
	text-wrap: pretty;
}

#sbn-ps .sbn-ps__intro--dark { color: var(--sbn-on-dark); }
#sbn-ps .sbn-ps__body { font-size: 15px; line-height: 1.6; color: var(--sbn-ink-muted); }
#sbn-ps .sbn-ps__body--16 { font-size: 16px; }

/* Section intro blocks */
#sbn-ps .sbn-ps__head {
	max-width: 760px;
	margin-bottom: 44px;
}

#sbn-ps .sbn-ps__head--720 { max-width: 720px; margin-bottom: 48px; }
#sbn-ps .sbn-ps__head--center { max-width: none; text-align: center; margin-bottom: 44px; }

/* ---------------------------------------------------------------------------
 * 5. Buttons
 * ------------------------------------------------------------------------ */

#sbn-ps .sbn-ps__btn {
	display: inline-block;
	font-family: var(--sbn-body);
	font-weight: 700;
	font-size: 16px;
	padding: 15px 28px;
	border-radius: 999px;
	background: var(--sbn-accent);
	color: var(--sbn-white);
	border: 1px solid var(--sbn-accent);
	text-align: center;
}

#sbn-ps .sbn-ps__btn:hover {
	background: var(--sbn-accent-hover);
	border-color: var(--sbn-accent-hover);
	color: var(--sbn-white);
}

#sbn-ps .sbn-ps__btn--ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .25);
	color: var(--sbn-white);
	font-weight: 600;
}

#sbn-ps .sbn-ps__btn--ghost:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .45);
	color: var(--sbn-white);
}

#sbn-ps .sbn-ps__btn--cta {
	padding: 16px 30px;
	white-space: nowrap;
}

#sbn-ps .sbn-ps__btns {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 34px;
}

/* ---------------------------------------------------------------------------
 * 6. Hero
 * ------------------------------------------------------------------------ */

#sbn-ps .sbn-ps__hero {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 56px;
	align-items: center;
	padding: 104px 32px 96px;
	max-width: 1180px;
	margin: 0 auto;
}

#sbn-ps .sbn-ps__hero--industry {
	padding: 0;
	gap: 56px;
}

#sbn-ps .sbn-ps__hero-outer {
	max-width: 1180px;
	margin: 0 auto;
	padding: 44px 32px 88px;
}

#sbn-ps .sbn-ps__hero-center {
	max-width: 900px;
	margin: 0 auto;
	padding: 96px 32px 84px;
	text-align: center;
}

#sbn-ps .sbn-ps__hero-center .sbn-ps__lede--dark {
	max-width: 680px;
	margin: 0 auto;
}

/* Stats inline under the hero copy */
#sbn-ps .sbn-ps__stats {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	margin-top: 44px;
}

#sbn-ps .sbn-ps__stat-figure {
	font-family: var(--sbn-head);
	font-weight: 700;
	font-size: 26px;
	color: var(--sbn-white);
}

#sbn-ps .sbn-ps__stat-label {
	font-size: 13px;
	color: var(--sbn-on-dark-dim);
}

/* Framed hero image with halo */
#sbn-ps .sbn-ps__media {
	position: relative;
}

#sbn-ps .sbn-ps__halo {
	position: absolute;
	inset: -8% -6%;
	background: radial-gradient(closest-side, rgba(43, 99, 204, .35), transparent);
	filter: blur(8px);
	pointer-events: none;
}

#sbn-ps .sbn-ps__frame {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: var(--sbn-shadow-hero);
	background: var(--sbn-navy-card);
	aspect-ratio: 16 / 11;
}

#sbn-ps .sbn-ps__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * 7. Logo / term strip and stat strip
 * ------------------------------------------------------------------------ */

#sbn-ps .sbn-ps__strip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 44px;
	flex-wrap: wrap;
}

#sbn-ps .sbn-ps__strip-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sbn-ink-soft);
}

#sbn-ps .sbn-ps__strip-term {
	font-family: var(--sbn-head);
	font-weight: 600;
	font-size: 17px;
	color: var(--sbn-ink-med);
}

#sbn-ps .sbn-ps__statbar {
	display: flex;
	align-items: center;
	gap: 36px;
	flex-wrap: wrap;
}

#sbn-ps .sbn-ps__statbar-figure {
	font-family: var(--sbn-head);
	font-weight: 700;
	font-size: 24px;
	color: var(--sbn-navy-brand);
}

#sbn-ps .sbn-ps__statbar-label {
	font-size: 13px;
	color: var(--sbn-ink-soft);
}

/* ---------------------------------------------------------------------------
 * 8. Grids and cards
 * ------------------------------------------------------------------------ */

#sbn-ps .sbn-ps__grid {
	display: grid;
	gap: 24px;
}

#sbn-ps .sbn-ps__grid--3 { grid-template-columns: repeat(3, 1fr); }
#sbn-ps .sbn-ps__grid--3-22 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
#sbn-ps .sbn-ps__grid--3-20 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
#sbn-ps .sbn-ps__grid--4 { grid-template-columns: repeat(4, 1fr); gap: 14px; }
#sbn-ps .sbn-ps__grid--2 { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
#sbn-ps .sbn-ps__grid--2-start { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

#sbn-ps .sbn-ps__card {
	background: var(--sbn-white);
	border: 1px solid var(--sbn-border);
	border-radius: 16px;
	padding: 30px 28px;
}

#sbn-ps .sbn-ps__card--lg {
	border-radius: 18px;
	padding: 34px 30px;
}

/* Inverted L2 card — the visual anchor of the three-levels section */
#sbn-ps .sbn-ps__card--dark {
	position: relative;
	overflow: hidden;
	background: var(--sbn-navy);
	border-color: var(--sbn-navy);
	color: var(--sbn-white);
}

#sbn-ps .sbn-ps__card--dark::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--sbn-card-glow);
	pointer-events: none;
}

#sbn-ps .sbn-ps__card--dark > * {
	position: relative;
}

#sbn-ps .sbn-ps__card--dark .sbn-ps__body,
#sbn-ps .sbn-ps__card--dark .sbn-ps__body--16 {
	color: var(--sbn-on-dark);
}

#sbn-ps .sbn-ps__badge {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--sbn-badge-tile);
	color: var(--sbn-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sbn-head);
	font-weight: 700;
	font-size: 18px;
}

#sbn-ps .sbn-ps__badge--dark {
	background: rgba(43, 99, 204, .2);
	color: var(--sbn-accent-light);
}

#sbn-ps .sbn-ps__card-title {
	margin: 22px 0 10px;
}

#sbn-ps .sbn-ps__tier {
	display: inline-block;
	margin-top: 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sbn-accent-light);
}

/* Feature cards (tag / title / body) */
#sbn-ps .sbn-ps__tag {
	font-family: var(--sbn-head);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .06em;
	color: var(--sbn-accent);
	margin-bottom: 14px;
}

/* Risk / threat tag pill */
#sbn-ps .sbn-ps__risk-tag {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sbn-risk);
	background: var(--sbn-risk-bg);
	padding: 6px 12px;
	border-radius: 999px;
}

/* Application tiles */
#sbn-ps .sbn-ps__tile {
	border: 1px solid var(--sbn-border);
	background: var(--sbn-subtle);
	border-radius: 12px;
	padding: 18px;
	font-size: 15px;
	font-weight: 500;
	color: var(--sbn-ink-med);
}

#sbn-ps .sbn-ps__tile--dark {
	border-color: rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .03);
	color: var(--sbn-on-dark-strong);
}

/* ---------------------------------------------------------------------------
 * 9. Check list
 * ------------------------------------------------------------------------ */

#sbn-ps .sbn-ps__checks {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

#sbn-ps .sbn-ps__checks li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 16px;
	line-height: 1.55;
	color: var(--sbn-ink-med);
}

#sbn-ps .sbn-ps__check {
	flex-shrink: 0;
	margin-top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--sbn-accent-tint);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#sbn-ps .sbn-ps__checks--tinted .sbn-ps__check {
	background: var(--sbn-accent-tint-alt);
}

/* ---------------------------------------------------------------------------
 * 10. Comparison table
 * ------------------------------------------------------------------------ */

#sbn-ps .sbn-ps__table-wrap {
	border: 1px solid var(--sbn-border);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--sbn-shadow-table);
}

#sbn-ps .sbn-ps__table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

#sbn-ps table.sbn-ps__table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: 15px;
	margin: 0;
	border: none;
}

#sbn-ps .sbn-ps__table caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

#sbn-ps .sbn-ps__table thead tr {
	background: var(--sbn-navy-brand);
	color: var(--sbn-white);
}

#sbn-ps .sbn-ps__table th {
	font-family: var(--sbn-head);
	font-weight: 600;
	font-size: 14px;
	padding: 18px 16px;
	text-align: center;
	color: #c3d2ea;
	border: none;
}

#sbn-ps .sbn-ps__table th.sbn-ps__th-attr {
	text-align: left;
	padding: 18px 22px;
	color: var(--sbn-white);
}

#sbn-ps .sbn-ps__table th.sbn-ps__th-snow {
	background: var(--sbn-accent);
	color: var(--sbn-white);
	font-weight: 700;
}

#sbn-ps .sbn-ps__table td {
	padding: 16px;
	text-align: center;
	color: var(--sbn-ink-soft);
	border: none;
}

#sbn-ps .sbn-ps__table th[scope='row'] {
	padding: 16px 22px;
	text-align: left;
	font-family: var(--sbn-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--sbn-ink-med);
}

#sbn-ps .sbn-ps__table td.sbn-ps__td-snow {
	font-weight: 700;
	color: var(--sbn-accent-hover);
	background: var(--sbn-accent-tint);
}

#sbn-ps .sbn-ps__table tbody tr {
	border-top: 1px solid var(--sbn-border-light);
	background: var(--sbn-white);
}

#sbn-ps .sbn-ps__table tbody tr:nth-child(even) {
	background: var(--sbn-subtle);
}

#sbn-ps .sbn-ps__table tbody tr:nth-child(even) td.sbn-ps__td-snow {
	background: var(--sbn-accent-tint);
}

/* ---------------------------------------------------------------------------
 * 11. Risk marquee
 * ------------------------------------------------------------------------ */

@keyframes sbn-ps-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-50% - 12px)); }
}

#sbn-ps .sbn-ps__marquee {
	position: relative;
	overflow: hidden;
	-webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

#sbn-ps .sbn-ps__marquee-track {
	display: flex;
	gap: 24px;
	width: max-content;
	padding: 4px 0;
	will-change: transform;
	animation: sbn-ps-marquee 46s linear infinite;
}

#sbn-ps .sbn-ps__marquee:hover .sbn-ps__marquee-track,
#sbn-ps .sbn-ps__marquee:focus-within .sbn-ps__marquee-track {
	animation-play-state: paused;
}

#sbn-ps .sbn-ps__risk-card {
	flex: 0 0 auto;
	width: 380px;
	background: var(--sbn-white);
	border: 1px solid var(--sbn-border);
	border-radius: 18px;
	padding: 34px 32px;
	box-shadow: var(--sbn-shadow-card);
}

#sbn-ps .sbn-ps__risk-card .sbn-ps__h3--21 {
	margin: 18px 0 12px;
}

#sbn-ps .sbn-ps__risk-card .sbn-ps__body {
	line-height: 1.65;
}

/* MOTION POLICY — deliberate, do not "fix" back.
 *
 * The marquee animates for everyone, including visitors with prefers-reduced-motion: reduce.
 * This is an explicit client decision (2026-07-28) that overrides the handoff's accessibility
 * recommendation: the earlier build paused the loop and exposed a native horizontal scrollbar
 * under reduced motion, which read as a broken carousel rather than a considered fallback.
 *
 * The concessions kept, so the section is still usable and not hostile:
 *   - hovering or focusing anything inside the track pauses it (see .sbn-ps__marquee:hover
 *     and :focus-within above), so a reader can stop the movement and read a card;
 *   - the duplicated card set stays aria-hidden, so assistive tech sees each risk once and
 *     never encounters the animation at all.
 *
 * To restore the reduced-motion pause, re-add a @media (prefers-reduced-motion: reduce) block
 * setting `animation: none` on .sbn-ps__marquee-track — but do NOT also set overflow-x: auto,
 * which is what produced the scrollbar.
 */

/* ---------------------------------------------------------------------------
 * 12. FAQ accordion
 * ------------------------------------------------------------------------ */

#sbn-ps .sbn-ps__faqs {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

#sbn-ps .sbn-ps__faq {
	border: 1px solid var(--sbn-border);
	border-radius: 14px;
	overflow: hidden;
	background: var(--sbn-subtle);
}

#sbn-ps .sbn-ps__faq--onTint {
	background: var(--sbn-white);
}

#sbn-ps .sbn-ps__faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px;
	cursor: pointer;
	text-align: left;
	font-family: var(--sbn-head);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.35;
	color: var(--sbn-ink);
}

#sbn-ps .sbn-ps__faq-sign {
	color: var(--sbn-accent);
	font-size: 24px;
	line-height: 1;
	flex-shrink: 0;
}

#sbn-ps .sbn-ps__faq-a {
	padding: 0 24px 24px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--sbn-ink-muted);
}

#sbn-ps .sbn-ps__faq-a[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 13. CTA panel
 * ------------------------------------------------------------------------ */

#sbn-ps .sbn-ps__cta-section {
	background: var(--sbn-navy);
	color: var(--sbn-white);
	padding: 20px 0;
}

#sbn-ps .sbn-ps__cta {
	position: relative;
	overflow: hidden;
	max-width: 1180px;
	margin: 48px auto;
	padding: 56px 48px;
	border-radius: 24px;
	background: linear-gradient(120deg, #0c1c31, #0a2647);
}

#sbn-ps .sbn-ps__cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(700px 360px at 85% 120%, rgba(43, 99, 204, .4), transparent 60%);
	pointer-events: none;
}

#sbn-ps .sbn-ps__cta-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

#sbn-ps .sbn-ps__cta-copy {
	max-width: 640px;
}

#sbn-ps .sbn-ps__cta-title {
	font-size: clamp(25px, 2.7vw, 32px);
	line-height: 1.15;
	letter-spacing: -.02em;
	margin-bottom: 12px;
}

/* ---------------------------------------------------------------------------
 * 14. Industry hub cards, breadcrumb, chips
 * ------------------------------------------------------------------------ */

#sbn-ps .sbn-ps__ind-card {
	display: block;
	background: var(--sbn-white);
	border: 1px solid var(--sbn-border);
	border-radius: 16px;
	padding: 28px 26px;
	color: inherit;
}

#sbn-ps .sbn-ps__ind-card:hover {
	border-color: var(--sbn-accent);
	box-shadow: var(--sbn-shadow-hover);
	transform: translateY(-2px);
	color: inherit;
}

#sbn-ps .sbn-ps__ind-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--sbn-icon-tile);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

#sbn-ps .sbn-ps__ind-card h3 {
	margin-bottom: 8px;
	color: var(--sbn-ink);
}

#sbn-ps .sbn-ps__ind-card p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--sbn-ink-muted);
}

#sbn-ps .sbn-ps__crumb {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--sbn-on-dark-dim);
	margin-bottom: 38px;
	flex-wrap: wrap;
}

#sbn-ps .sbn-ps__crumb a { color: var(--sbn-accent-light); }
#sbn-ps .sbn-ps__crumb a:hover { color: var(--sbn-white); }
#sbn-ps .sbn-ps__crumb-current { color: var(--sbn-on-dark-strong); }

#sbn-ps .sbn-ps__chips {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

#sbn-ps .sbn-ps__chip {
	border: 1px solid var(--sbn-border);
	background: var(--sbn-subtle);
	border-radius: 999px;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sbn-ink-med);
}

#sbn-ps .sbn-ps__chip:hover {
	border-color: var(--sbn-accent);
	color: var(--sbn-accent);
}

/* ---------------------------------------------------------------------------
 * 15. Numbered steps, dark inset panel, media column
 * ------------------------------------------------------------------------ */

#sbn-ps .sbn-ps__steps {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-top: 8px;
}

#sbn-ps .sbn-ps__step {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

#sbn-ps .sbn-ps__step-num {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--sbn-badge-tile);
	color: var(--sbn-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sbn-head);
	font-weight: 700;
	font-size: 18px;
}

#sbn-ps .sbn-ps__step h3 { margin-bottom: 6px; }

#sbn-ps .sbn-ps__panel {
	position: relative;
	overflow: hidden;
	background: var(--sbn-navy);
	color: var(--sbn-white);
	border-radius: 20px;
	padding: 40px 36px;
}

#sbn-ps .sbn-ps__panel::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--sbn-panel-glow);
	pointer-events: none;
}

#sbn-ps .sbn-ps__panel > * { position: relative; }

#sbn-ps .sbn-ps__panel-label {
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sbn-accent-light);
}

#sbn-ps .sbn-ps__panel h3 { margin: 14px 0 16px; }

#sbn-ps .sbn-ps__panel-body {
	font-size: 16px;
	line-height: 1.65;
	color: var(--sbn-on-dark);
	margin-bottom: 26px;
}

#sbn-ps .sbn-ps__rows {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#sbn-ps .sbn-ps__row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

#sbn-ps .sbn-ps__row-who {
	flex-shrink: 0;
	width: 74px;
	font-family: var(--sbn-head);
	font-weight: 700;
	font-size: 13px;
	color: var(--sbn-accent-light);
}

#sbn-ps .sbn-ps__row-what {
	font-size: 15px;
	line-height: 1.55;
	color: var(--sbn-on-dark-strong);
}

#sbn-ps .sbn-ps__figure {
	border: 1px solid var(--sbn-border);
	border-radius: 16px;
	overflow: hidden;
	background: var(--sbn-tint);
}

#sbn-ps .sbn-ps__figure--shadow {
	border-radius: 18px;
	box-shadow: var(--sbn-shadow-media);
}

#sbn-ps .sbn-ps__figure img { width: 100%; height: auto; }

#sbn-ps .sbn-ps__stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ---------------------------------------------------------------------------
 * 16. Video cards
 * ------------------------------------------------------------------------ */

#sbn-ps .sbn-ps__videos-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 44px;
}

#sbn-ps .sbn-ps__videos-count {
	font-size: 15px;
	color: var(--sbn-ink-muted);
}

#sbn-ps .sbn-ps__video {
	display: block;
	background: var(--sbn-white);
	border: 1px solid var(--sbn-border);
	border-radius: 16px;
	overflow: hidden;
	color: inherit;
}

#sbn-ps .sbn-ps__video:hover {
	border-color: var(--sbn-accent);
	box-shadow: var(--sbn-shadow-hover);
	transform: translateY(-2px);
	color: inherit;
}

#sbn-ps .sbn-ps__video-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #0c1c31, #123a63);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#sbn-ps .sbn-ps__video-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#sbn-ps .sbn-ps__play {
	position: relative;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .96);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px rgba(6, 16, 31, .3);
}

#sbn-ps .sbn-ps__video:hover .sbn-ps__play {
	background: #fff;
	transform: scale(1.06);
}

#sbn-ps .sbn-ps__video-time {
	position: absolute;
	bottom: 10px;
	right: 10px;
	background: rgba(6, 16, 31, .8);
	color: var(--sbn-white);
	font-size: 12px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 6px;
}

#sbn-ps .sbn-ps__video-title {
	padding: 18px 20px;
	font-family: var(--sbn-head);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
	color: #1a2c44;
}

/* ---------------------------------------------------------------------------
 * 17. Utilities
 * ------------------------------------------------------------------------ */

#sbn-ps .sbn-ps__mt-72 { margin-top: 72px; }
#sbn-ps .sbn-ps__mb-6 { margin-bottom: 6px; }
#sbn-ps .sbn-ps__mb-26 { margin-bottom: 26px; }
#sbn-ps .sbn-ps__mb-20 { margin-bottom: 20px; }
#sbn-ps .sbn-ps__mb-24 { margin-bottom: 24px; }
#sbn-ps .sbn-ps__mb-16 { margin-bottom: 16px; }
#sbn-ps .sbn-ps__mb-52 { margin-bottom: 52px; }

/* ---------------------------------------------------------------------------
 * 18. Responsive
 *
 * The handoff is desktop-only — every grid is a fixed repeat(n, 1fr) that will not reflow.
 * Breakpoints below are defined here, not in the handoff.
 * ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	#sbn-ps .sbn-ps__cta { padding: 44px 36px; }
	#sbn-ps .sbn-ps__hero { padding: 80px 32px 72px; }
}

@media (max-width: 900px) {
	#sbn-ps .sbn-ps__section { padding: 64px 0; }
	#sbn-ps .sbn-ps__section--88 { padding: 60px 0; }

	/* Two-column blocks stack, image after text */
	#sbn-ps .sbn-ps__hero,
	#sbn-ps .sbn-ps__grid--2,
	#sbn-ps .sbn-ps__grid--2-start {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	#sbn-ps .sbn-ps__hero .sbn-ps__media,
	#sbn-ps .sbn-ps__grid--2 > .sbn-ps__media {
		order: 2;
	}

	/* "How it works" puts its image first on desktop; push it below the copy on mobile. */
	#sbn-ps .sbn-ps__grid--2 > .sbn-ps__figure:first-child { order: 2; }

	#sbn-ps .sbn-ps__grid--3,
	#sbn-ps .sbn-ps__grid--3-22,
	#sbn-ps .sbn-ps__grid--3-20 {
		grid-template-columns: repeat(2, 1fr);
	}

	#sbn-ps .sbn-ps__grid--4 { grid-template-columns: repeat(2, 1fr); }

	#sbn-ps .sbn-ps__hero-outer { padding: 32px 24px 64px; }
	#sbn-ps .sbn-ps__hero-center { padding: 72px 24px 64px; }
	#sbn-ps .sbn-ps__cta { padding: 40px 28px; margin: 32px auto; }
	#sbn-ps .sbn-ps__risk-card { width: 300px; padding: 28px 26px; }
	#sbn-ps .sbn-ps__stats { gap: 24px; }
}

@media (max-width: 782px) {
	/* WordPress admin bar switches to fixed positioning here; nothing to do but keep the
	   section padding from colliding with it on preview screens. */
	#sbn-ps { scroll-padding-top: 46px; }
}

@media (max-width: 640px) {
	#sbn-ps .sbn-ps__wrap { padding: 0 20px; }
	#sbn-ps .sbn-ps__hero { padding: 56px 20px 56px; }
	#sbn-ps .sbn-ps__hero-outer { padding: 24px 20px 56px; }
	#sbn-ps .sbn-ps__hero-center { padding: 56px 20px 48px; }

	#sbn-ps .sbn-ps__grid--3,
	#sbn-ps .sbn-ps__grid--3-22,
	#sbn-ps .sbn-ps__grid--3-20 {
		grid-template-columns: 1fr;
	}

	#sbn-ps .sbn-ps__section { padding: 52px 0; }
	#sbn-ps .sbn-ps__section--88 { padding: 48px 0; }
	#sbn-ps .sbn-ps__card--lg { padding: 26px 22px; }
	#sbn-ps .sbn-ps__card { padding: 24px 22px; }
	#sbn-ps .sbn-ps__panel { padding: 30px 24px; }
	#sbn-ps .sbn-ps__cta { padding: 32px 22px; }
	#sbn-ps .sbn-ps__cta-inner { gap: 24px; }
	#sbn-ps .sbn-ps__btn { width: 100%; }
	#sbn-ps .sbn-ps__btn--cta { width: auto; }
	#sbn-ps .sbn-ps__strip { gap: 20px 28px; }
	#sbn-ps .sbn-ps__faq-q { padding: 18px 18px; font-size: 17px; }
	#sbn-ps .sbn-ps__faq-a { padding: 0 18px 20px; }
	#sbn-ps .sbn-ps__risk-card { width: 260px; }
	#sbn-ps .sbn-ps__head { margin-bottom: 32px; }
	#sbn-ps .sbn-ps__row-who { width: 64px; }
}

@media (max-width: 480px) {
	#sbn-ps .sbn-ps__grid--4 { grid-template-columns: 1fr; }
	#sbn-ps .sbn-ps__statbar { gap: 20px; }
}