/* Hero — "Blue Ribbon" (US).
   Compact: pale blue band, deep indigo headline left, a WHITE floating
   checklist card right (the reference's feature list). Non-compact: white
   card, text left / image right. Soft shadows and rounded corners only —
   no rules, no hard offsets. */

.x6d20259c {
	position: relative;
	overflow: hidden;
	background: var(--sn-surface);
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius);
	padding: var(--sn-sp-8) var(--sn-sp-6);
	margin: var(--sn-sp-8) 0;
	box-shadow: var(--sn-shadow);
}

.x337b7934 {
	position: relative;
}

.x061f0c4d {
	margin: 0 0 var(--sn-sp-2);
	color: var(--sn-primary);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.x8c3abeee {
	margin: 0 0 var(--sn-sp-4);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.x7624bddd > :first-child { margin-top: 0; }
.x7624bddd > :last-child { margin-bottom: 0; }

/* Non-compact intro: clamped to 3 lines with the Read more toggle (compact
   clamps to 2 below) — full walls of intro text looked bad either way. */
.x6d20259c:not(.x602be6f2) .x7624bddd {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.x6d20259c.is-expanded .x7624bddd {
	display: block;
	overflow: visible;
}

/* Author byline (replaces the retired review-meta block). */
.x93169b23 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sn-sp-2) var(--sn-sp-4);
	margin-top: var(--sn-sp-6);
	font-size: var(--sn-fs-xs);
	color: var(--sn-text-muted);
}

.x012e6966 {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-2);
	white-space: nowrap;
	flex: 0 0 auto; /* Never shrink — the row scrolls instead of overlapping. */
}

.x3280d16e {
	flex: 0 0 auto;
	border-radius: 50%;
}

.x012e6966 svg {
	width: 14px;
	height: 14px;
	color: var(--sn-primary);
}

.x93169b23 a {
	color: var(--sn-heading);
	font-weight: 700;
}

/* CTA + trust chips variant. */
.xeab6d647 {
	margin: var(--sn-sp-6) 0 0;
}

.xc101d1fb {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sn-sp-2);
	margin: var(--sn-sp-6) 0 0;
	padding: 0;
}

.xcb687894 {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-2);
	padding: var(--sn-sp-1) var(--sn-sp-3);
	background: var(--sn-surface);
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-pill);
	font-size: var(--sn-fs-xs);
	font-weight: 600;
	color: var(--sn-heading);
}

.xcb687894 svg {
	width: 14px;
	height: 14px;
	color: var(--sn-primary);
}

.x135c8464 {
	margin: var(--sn-sp-6) 0 0;
}

.x135c8464 .xfef98559 {
	width: 100%;
}

@media (min-width: 768px) {
	.x6d20259c {
		padding: var(--sn-sp-12) var(--sn-sp-8);
	}

	.x337b7934 {
		display: flex;
		align-items: center;
		gap: var(--sn-sp-8);
	}

	.x480dd74f {
		flex: 1 1 58%;
		min-width: 0;
	}

	.x135c8464 {
		flex: 1 1 42%;
		margin: 0;
	}
}

/* ---------- Compact mode: pale blue stage ---------- */

.x602be6f2 {
	padding: 0;
	background: var(--sn-surface-2);
	border: 0;
	box-shadow: none;
	/* Signature soft arc on the bottom edge (the reference's section
	   transition). Shallower on phones so the clip never eats the facts
	   card sitting above it. */
	border-bottom-left-radius: 50% 26px;
	border-bottom-right-radius: 50% 26px;
}

/* Soft geometric wash behind the stage — flat, very low contrast, purely
   decorative (the reference's background shapes). */
.x602be6f2::before {
	content: '';
	position: absolute;
	top: -30%;
	right: -8%;
	width: 46%;
	height: 160%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
}

.x602be6f2 .x480dd74f {
	padding: var(--sn-sp-8) var(--sn-sp-6);
}

.x602be6f2 .x8c3abeee {
	font-size: clamp(1.75rem, 3.8vw, 2.875rem);
	color: var(--sn-heading);
}

.x602be6f2 .x7624bddd {
	color: var(--sn-text);
}

/* Byline items as small white pills (product UI, not print chips). */
.x602be6f2 .x012e6966 {
	padding: var(--sn-sp-1) var(--sn-sp-3);
	background: var(--sn-surface);
	border-radius: var(--sn-radius-pill);
	box-shadow: 0 2px 8px rgba(38, 38, 120, .06);
	font-weight: 600;
	color: var(--sn-text-muted);
}

.x602be6f2 .x3ee7ea8f {
	color: var(--sn-primary);
}

.x602be6f2 .x3ee7ea8f:hover,
.x602be6f2 .x3ee7ea8f:focus {
	color: var(--sn-primary-hover);
}

.x602be6f2.is-expanded .x3ee7ea8f svg {
	transform: rotate(180deg);
}

/* Compact intro: small type, clamped to 2 lines with a Read more toggle.
   The full text stays in the DOM (expandable content — indexed normally). */
.x602be6f2 .x7624bddd {
	font-size: var(--sn-fs-sm);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 479px) {
	.x602be6f2 .x7624bddd {
		font-size: var(--sn-fs-xs);
	}
}

.x602be6f2.is-expanded .x7624bddd {
	display: block;
	overflow: visible;
}

.x3ee7ea8f {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-1);
	margin-top: var(--sn-sp-2);
	padding: 0;
	background: none;
	border: 0;
	color: var(--sn-primary);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	cursor: pointer;
}

.x3ee7ea8f svg {
	transition: transform .15s ease;
}

/* Compact mobile: the byline scrolls sideways instead of stacking. */
.x602be6f2 .x93169b23 {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.x602be6f2 .x93169b23::-webkit-scrollbar {
	display: none;
}

/* ---------- Facts card (rail) ---------- */
/* White card floating on the blue stage; rows read as ticked checkboxes. */

.x602be6f2 .x9914a5c9 {
	position: relative;
	margin: 0 var(--sn-sp-6) var(--sn-sp-12); /* clears the bottom arc */
	padding: var(--sn-sp-6);
	background: var(--sn-surface);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
}

.x602be6f2 .xc101d1fb {
	margin: 0;
	flex-direction: column;
	align-items: stretch;
	gap: var(--sn-sp-4);
}

.x602be6f2 .xcb687894 {
	align-items: flex-start;
	gap: var(--sn-sp-3);
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-size: var(--sn-fs-sm);
	font-weight: 600;
	color: var(--sn-heading);
	white-space: normal;
}

/* The icon sits in an outlined blue checkbox, straight off the reference. */
.x602be6f2 .xcb687894 svg {
	box-sizing: content-box;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	padding: 3px;
	border: 1.5px solid var(--sn-primary);
	border-radius: var(--sn-radius-sm);
	color: var(--sn-primary);
}

/* ---------- Compact layout ---------- */

@media (min-width: 768px) {
	.x602be6f2 {
		border-bottom-left-radius: 50% 44px;
		border-bottom-right-radius: 50% 44px;
	}

	.x602be6f2 .x480dd74f {
		padding: var(--sn-sp-12) var(--sn-sp-8) var(--sn-sp-8);
	}

	.x602be6f2 .x9914a5c9 {
		margin: 0 var(--sn-sp-8) var(--sn-sp-12);
	}

	.x602be6f2 .xf760c000 {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--sn-sp-4) var(--sn-sp-6);
	}
}

/* Desktop: headline left, floating checklist card right. */
@media (min-width: 900px) {
	.x602be6f2 .x337b7934 {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: var(--sn-sp-8);
		align-items: center;
		padding: var(--sn-sp-12) var(--sn-sp-8);
	}

	.x602be6f2 .x480dd74f,
	.x602be6f2 .x9914a5c9 {
		padding: 0;
		margin: 0;
	}

	.x602be6f2 .x9914a5c9 {
		padding: var(--sn-sp-6);
	}
}