/* ==========================================================================
   SEO Pricing widget — white-label hero band + plan cards.
   Proportions from the 1536x1024 reference (1440 content, 347px cards).
   Card internals sized in cqi so they hold at any container width.
   ========================================================================== */

.rsp {
	font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--rsp-accent: #02c5d5;
	--rsp-card-tint: rgba(7, 26, 33, .55);
	--rsp-glow: .6;
	--rsp-muted: #93a6b0;

	position: relative;
	overflow: hidden;
	padding: 0 0 clamp(36px, 3.4vw, 56px);
	background-color: #040b10;
	color: #fff;
}

.rsp *,
.rsp *::before,
.rsp *::after {
	box-sizing: border-box;
}

.rsp__aura {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(52% 40% at 6% 44%, color-mix(in srgb, var(--rsp-accent) 20%, transparent), transparent 70%),
		radial-gradient(46% 34% at 96% 52%, color-mix(in srgb, var(--rsp-accent) 16%, transparent), transparent 70%);
}

.rsp__inner {
	position: relative;
	z-index: 1;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 48px);
	container-type: inline-size;
}

/* ==========================================================================
   Hero band
   ========================================================================== */

.rsp__hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.76fr);
	gap: clamp(20px, 3cqi, 56px);
	align-items: start;
	padding: clamp(32px, 3.6cqi, 56px) 0 clamp(26px, 2.8cqi, 44px);
}

.rsp .rsp__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: clamp(10px, .92cqi, 13px);
	font-weight: 600;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: #c9dbe3;
}

/* The short rule that precedes the eyebrow in the reference. */
.rsp .rsp__eyebrow::before {
	content: "";
	width: clamp(22px, 2.4cqi, 38px);
	height: 1px;
	background: color-mix(in srgb, var(--rsp-accent) 70%, transparent);
}

.rsp .rsp__title {
	margin: clamp(10px, 1.1cqi, 18px) 0 0;
	font-size: clamp(38px, 5.1cqi, 78px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.025em;
	color: #fff;
}

.rsp .rsp__title-main,
.rsp .rsp__title-accent {
	display: block;
}

.rsp .rsp__title-accent {
	background: linear-gradient(95deg,
		color-mix(in srgb, var(--rsp-accent) 92%, #ffffff),
		color-mix(in srgb, var(--rsp-accent) 45%, #7fd8ff));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--rsp-accent);
}

.rsp .rsp__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(18px, 2.6cqi, 44px);
	margin-top: clamp(18px, 2.6cqi, 42px);
}

.rsp .rsp__subtitle {
	margin: 0;
	font-size: clamp(20px, 2.4cqi, 36px);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.01em;
	color: #fff;
}

.rsp .rsp__lead {
	margin: clamp(10px, 1.2cqi, 18px) 0 0;
	font-size: clamp(14px, 1.35cqi, 20px);
	line-height: 1.5;
	color: var(--rsp-muted);
}

/* Vertical rule between the lead and the body paragraph. */
.rsp .rsp__col--body {
	position: relative;
	padding-left: clamp(16px, 2.2cqi, 34px);
}

.rsp .rsp__col--body::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .22) 12%, rgba(255, 255, 255, .22) 88%, transparent);
}

.rsp .rsp__body {
	margin: 0;
	font-size: clamp(12.5px, 1.07cqi, 16px);
	line-height: 1.62;
	color: #b3c3cc;
}

/* ---------- Photo ---------- */

.rsp__hero-media {
	position: relative;
	align-self: stretch;
	min-height: clamp(280px, 30cqi, 470px);
}

.rsp__photo {
	position: absolute;
	inset: calc(-1 * clamp(32px, 3.6cqi, 56px)) calc(-1 * clamp(16px, 3vw, 48px)) 0 0;
	overflow: hidden;
}

.rsp__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * The reference blends the photo into the page: a dark gradient on the left and
 * bottom, plus vertical glass slats across it.
 */
.rsp__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, #040b10 0%, rgba(4, 11, 16, .82) 14%, rgba(4, 11, 16, .18) 42%, transparent 70%),
		linear-gradient(0deg, #040b10 0%, rgba(4, 11, 16, .35) 18%, transparent 46%);
}

.rsp__slats {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(90deg,
		rgba(255, 255, 255, .05) 0 1px,
		transparent 1px 74px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 100%);
	mask-image: linear-gradient(90deg, transparent, #000 25%, #000 100%);
}

.rsp .rsp__photo-caption {
	position: absolute;
	top: clamp(12px, 2.4cqi, 40px);
	right: clamp(6px, 1.2cqi, 20px);
	z-index: 2;
	font-size: clamp(11px, 1.12cqi, 17px);
	font-weight: 500;
	line-height: 1.42;
	color: #dbe8ee;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}

.rsp .rsp__slash {
	display: block;
	margin-top: clamp(10px, 1.6cqi, 26px);
	font-style: normal;
	font-weight: 700;
	color: color-mix(in srgb, var(--rsp-accent) 75%, #ffffff);
}

/* ---------- Floating CTA over the photo ---------- */

.rsp .rsp__float {
	position: absolute;
	right: clamp(6px, 1.2cqi, 22px);
	bottom: clamp(14px, 2.4cqi, 44px);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: clamp(11px, 1.55cqi, 22px);
	padding: clamp(14px, 1.85cqi, 27px) clamp(16px, 2.05cqi, 30px);
	border: 1px solid color-mix(in srgb, var(--rsp-accent) 55%, transparent);
	border-radius: 14px;
	text-decoration: none;
	color: #fff;
	background: rgba(6, 22, 28, .55);
	-webkit-backdrop-filter: blur(18px) saturate(130%);
	backdrop-filter: blur(18px) saturate(130%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .16),
		0 0 34px -12px color-mix(in srgb, var(--rsp-accent) 80%, transparent),
		0 20px 44px -30px rgba(0, 0, 0, .95);
	transition: border-color .25s ease, transform .25s ease;
}

.rsp .rsp__float:hover {
	transform: translateY(-2px);
	border-color: var(--rsp-accent);
}

.rsp .rsp__float-icon {
	width: clamp(22px, 2.1cqi, 33px);
	height: clamp(22px, 2.1cqi, 33px);
	flex: none;
	fill: none;
	stroke: var(--rsp-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rsp .rsp__float-text {
	font-size: clamp(12.5px, 1.28cqi, 19px);
	font-weight: 500;
	line-height: 1.38;
}

.rsp .rsp__float-go {
	display: grid;
	place-items: center;
	width: clamp(28px, 2.6cqi, 40px);
	height: clamp(28px, 2.6cqi, 40px);
	flex: none;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
}

.rsp .rsp__float-go svg {
	width: 55%;
	height: 55%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ==========================================================================
   Plan cards
   ========================================================================== */

.rsp .rsp__plans {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(10px, 1.2cqi, 18px);
	align-items: stretch;
}

.rsp .rsp__plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 8.2cqi, 34px);
	border: 1px solid color-mix(in srgb, var(--rsp-accent) calc(var(--rsp-glow) * 115%), transparent);
	border-radius: 14px;
	background-color: var(--rsp-card-tint);
	background-image: linear-gradient(168deg,
		rgba(255, 255, 255, .06) 0%,
		rgba(255, 255, 255, .015) 46%,
		rgba(255, 255, 255, 0) 100%);
	-webkit-backdrop-filter: blur(18px) saturate(135%);
	backdrop-filter: blur(18px) saturate(135%);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--rsp-accent) calc(var(--rsp-glow) * 20%), transparent),
		inset 0 1px 0 rgba(255, 255, 255, .15),
		inset 0 0 80px -26px color-mix(in srgb, var(--rsp-accent) calc(var(--rsp-glow) * 115%), transparent),
		0 0 26px -6px color-mix(in srgb, var(--rsp-accent) calc(var(--rsp-glow) * 55%), transparent),
		0 0 70px -20px color-mix(in srgb, var(--rsp-accent) calc(var(--rsp-glow) * 90%), transparent),
		0 24px 50px -34px rgba(0, 0, 0, .95);
	container-type: inline-size;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.rsp .rsp__plan:hover,
.rsp .rsp__plan--featured {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--rsp-accent) 95%, transparent);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .2),
		inset 0 0 80px -22px color-mix(in srgb, var(--rsp-accent) 120%, transparent),
		0 0 44px -10px color-mix(in srgb, var(--rsp-accent) 95%, transparent),
		0 28px 56px -34px rgba(0, 0, 0, .95);
}

.rsp .rsp__plan-head {
	display: flex;
	align-items: flex-start;
	gap: clamp(8px, 3.2cqi, 14px);
}

.rsp .rsp__gem {
	width: clamp(28px, 11.5cqi, 44px);
	height: clamp(28px, 11.5cqi, 44px);
	flex: none;
	fill: none;
	stroke: var(--rsp-accent);
	stroke-width: 1.6;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rsp-accent) 55%, transparent));
}

.rsp .rsp__plan-name {
	margin: 0;
	font-size: clamp(17px, 7.1cqi, 27px);
	font-weight: 500;
	line-height: 1.12;
	color: #fff;
}

.rsp .rsp__plan-blurb {
	margin: clamp(3px, 1.2cqi, 6px) 0 0;
	font-size: clamp(10.5px, 3.55cqi, 14px);
	line-height: 1.34;
	color: var(--rsp-muted);
}

.rsp .rsp__price {
	display: flex;
	align-items: baseline;
	gap: .28em;
	margin: clamp(14px, 6cqi, 30px) 0 clamp(12px, 4.6cqi, 22px);
}

.rsp .rsp__price-value {
	font-size: clamp(30px, 13cqi, 50px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: #fff;
}

.rsp .rsp__price-period {
	font-size: clamp(11px, 3.8cqi, 15px);
	color: var(--rsp-muted);
}

.rsp .rsp__feats {
	list-style: none;
	margin: 0 0 clamp(18px, 7cqi, 34px);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(7px, 2.95cqi, 13px);
}

.rsp .rsp__feats li {
	display: flex;
	align-items: flex-start;
	gap: clamp(6px, 2.7cqi, 11px);
	font-size: clamp(11px, 3.85cqi, 15px);
	line-height: 1.32;
	color: #c7d5dd;
}

.rsp .rsp__tick {
	width: clamp(13px, 4.7cqi, 18px);
	height: clamp(13px, 4.7cqi, 18px);
	flex: none;
	margin-top: .06em;
	fill: none;
	stroke: var(--rsp-accent);
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rsp-accent) 55%, transparent));
}

/* Full-width pill, as in the reference. */
.rsp .rsp__plan-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(7px, 2.6cqi, 11px);
	margin-top: auto;
	padding: clamp(11px, 4.1cqi, 17px) clamp(12px, 4cqi, 20px);
	border: 1px solid color-mix(in srgb, var(--rsp-accent) 60%, transparent);
	border-radius: 999px;
	font-size: clamp(12px, 4.2cqi, 16px);
	font-weight: 500;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	background: rgba(255, 255, 255, .04);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
	transition: background .25s ease, border-color .25s ease;
}

.rsp .rsp__plan-btn:hover,
.rsp .rsp__plan-btn:focus-visible {
	background: color-mix(in srgb, var(--rsp-accent) 20%, transparent);
	border-color: var(--rsp-accent);
	color: #fff;
}

.rsp .rsp__plan-btn svg {
	width: 1.1em;
	height: 1.1em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .25s ease;
}

.rsp .rsp__plan-btn:hover svg {
	transform: translateX(3px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
	.rsp__hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.rsp__hero-media {
		min-height: 300px;
		order: -1;
	}

	.rsp__photo {
		position: relative;
		inset: auto;
		height: 300px;
		border-radius: 14px;
	}

	.rsp__photo::after {
		background: linear-gradient(0deg, #040b10 2%, rgba(4, 11, 16, .25) 40%, transparent 70%);
	}

	.rsp .rsp__plans {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

@media (max-width: 720px) {
	.rsp .rsp__cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.rsp .rsp__col--body {
		padding-left: 0;
		padding-top: 18px;
	}

	.rsp .rsp__col--body::before {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
		background: linear-gradient(90deg, rgba(255, 255, 255, .22), transparent);
	}

	.rsp .rsp__plans {
		grid-template-columns: minmax(0, 1fr);
	}

	/* cqi tracks a full-bleed card here — hold readable sizes. */
	.rsp .rsp__plan {
		padding: 24px;
	}

	.rsp .rsp__plan-name {
		font-size: 24px;
	}

	.rsp .rsp__plan-blurb {
		font-size: 14px;
	}

	.rsp .rsp__price-value {
		font-size: 44px;
	}

	.rsp .rsp__feats li {
		font-size: 15px;
	}

	.rsp .rsp__tick {
		width: 18px;
		height: 18px;
	}

	.rsp .rsp__gem {
		width: 40px;
		height: 40px;
	}

	.rsp .rsp__plan-btn {
		font-size: 15px;
		padding: 14px 20px;
	}

	.rsp .rsp__photo-caption {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rsp .rsp__plan,
	.rsp .rsp__float,
	.rsp .rsp__plan-btn,
	.rsp .rsp__plan-btn svg {
		transition: none;
	}

	.rsp .rsp__plan:hover,
	.rsp .rsp__float:hover {
		transform: none;
	}
}