/* ==========================================================================
   SEO Dimensions widget — "Four Dimensions of Modern SEO"

   Proportions are taken from the 1536x1024 reference (352px cards, 1440px
   content). Card internals are sized in cqi against each card's own width, so
   the layout holds at any container width.
   ========================================================================== */

.rsd {
	font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--rsd-accent: #02c5d5;
	--rsd-card-tint: rgba(6, 22, 28, .42);
	--rsd-glow: .55;
	--rsd-grid-opacity: .5;
	--rsd-bg-opacity: .5;
	--rsd-muted: #93a3ad;

	position: relative;
	overflow: hidden;
	padding: 72px 40px 56px;
	background-color: #030a0e;
	color: #fff;
}

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

.rsd__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: var(--rsd-bg-opacity, .5);
	pointer-events: none;
}

/* Faint technical grid. */
.rsd__gridlines {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: var(--rsd-grid-opacity, .5);
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 88px 88px;
	-webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%);
	mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%);
}

/* Cool light pooling behind the cards. */
.rsd__aura {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--rsd-accent) 16%, transparent), transparent 70%),
		radial-gradient(40% 30% at 8% 70%, color-mix(in srgb, var(--rsd-accent) 10%, transparent), transparent 70%),
		radial-gradient(40% 30% at 92% 70%, color-mix(in srgb, var(--rsd-accent) 10%, transparent), transparent 70%);
}

.rsd__inner {
	position: relative;
	z-index: 1;
	max-width: 1440px;
	margin: 0 auto;
	container-type: inline-size;
}

/* ---------- Header ---------- */

.rsd .rsd__head {
	position: relative;
	text-align: center;
	margin-bottom: clamp(24px, 2.5cqi, 40px);
	padding: 0 clamp(0px, 11cqi, 170px);
}

.rsd .rsd__badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: clamp(7px, .62cqi, 10px) clamp(16px, 1.5cqi, 24px);
	border: 1px solid color-mix(in srgb, var(--rsd-accent) 45%, transparent);
	border-radius: 999px;
	font-size: 13px;
	font-size: clamp(10px, .9cqi, 13px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #d8fbff;
	background: rgba(255, 255, 255, .04);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .1),
		0 0 26px -10px color-mix(in srgb, var(--rsd-accent) 80%, transparent);
}

.rsd .rsd__badge-dot {
	width: .62em;
	height: .62em;
	flex: none;
	border-radius: 50%;
	background: var(--rsd-accent);
	box-shadow: 0 0 10px color-mix(in srgb, var(--rsd-accent) 85%, transparent);
}

.rsd .rsd__title {
	margin: clamp(12px, 1.3cqi, 22px) 0 0;
	font-size: 54px;
	font-size: clamp(26px, 4.15cqi, 62px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: #fff;
}

.rsd .rsd__title-main,
.rsd .rsd__title-accent {
	display: inline;
}

.rsd .rsd__title-accent {
	margin-left: .28em;
	color: var(--rsd-accent);
	text-shadow: 0 0 34px color-mix(in srgb, var(--rsd-accent) 45%, transparent);
}

.rsd .rsd__sub {
	max-width: clamp(320px, 56cqi, 810px);
	margin: clamp(10px, 1.1cqi, 18px) auto 0;
	font-size: 19px;
	font-size: clamp(14px, 1.33cqi, 19px);
	line-height: 1.55;
	color: #b6c4cd;
}

.rsd .rsd__edge {
	position: absolute;
	top: 6px;
	font-size: 12px;
	font-size: clamp(9px, .83cqi, 12px);
	font-weight: 500;
	line-height: 1.85;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #71818c;
}

.rsd .rsd__edge--left {
	left: 0;
	text-align: left;
}

.rsd .rsd__edge--right {
	right: 0;
	text-align: right;
}

.rsd .rsd__edge::after {
	content: "";
	display: block;
	width: 26px;
	height: 1px;
	margin-top: 10px;
	background: rgba(255, 255, 255, .22);
}

.rsd .rsd__edge--right::after {
	margin-left: auto;
}

/* ---------- Grid ---------- */

.rsd .rsd__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	gap: clamp(10px, .95cqi, 16px);
	align-items: stretch;
}

.rsd .rsd__card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(18px, 7.4cqi, 30px);
	border: 1px solid color-mix(in srgb, var(--rsd-accent) calc(var(--rsd-glow) * 115%), transparent);
	border-radius: 14px;
	background-color: var(--rsd-card-tint, rgba(6, 22, 28, .5));
	background-image: linear-gradient(170deg,
		rgba(255, 255, 255, .055) 0%,
		rgba(255, 255, 255, .012) 45%,
		rgba(255, 255, 255, 0) 100%);
	-webkit-backdrop-filter: blur(16px) saturate(130%);
	backdrop-filter: blur(16px) saturate(130%);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--rsd-accent) calc(var(--rsd-glow) * 22%), transparent),
		inset 0 1px 0 rgba(255, 255, 255, .14),
		inset 0 0 80px -26px color-mix(in srgb, var(--rsd-accent) calc(var(--rsd-glow) * 120%), transparent),
		0 0 26px -6px color-mix(in srgb, var(--rsd-accent) calc(var(--rsd-glow) * 55%), transparent),
		0 0 70px -22px color-mix(in srgb, var(--rsd-accent) calc(var(--rsd-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;
}

.rsd .rsd__card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--rsd-accent) 85%, transparent);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .16),
		inset 0 0 60px -26px color-mix(in srgb, var(--rsd-accent) 100%, transparent),
		0 0 44px -12px color-mix(in srgb, var(--rsd-accent) 95%, transparent),
		0 28px 56px -34px rgba(0, 0, 0, .95);
}

.rsd .rsd__num {
	font-size: clamp(13px, 5.4cqi, 20px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .06em;
	color: color-mix(in srgb, var(--rsd-accent) 42%, #6b7b85);
}

/* ---------- Artwork ---------- */

.rsd .rsd__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 110%;
	margin: clamp(6px, 2.6cqi, 12px) -5% clamp(10px, 4.4cqi, 20px);
	aspect-ratio: 352 / 268;
}

.rsd .rsd__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---------- Copy ---------- */

.rsd .rsd__card-title {
	margin: 0 0 clamp(4px, 1.6cqi, 8px);
	font-size: clamp(19px, 7.7cqi, 30px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: #fff;
}

.rsd .rsd__card-sub {
	margin: 0 0 clamp(6px, 2.2cqi, 10px);
	font-size: clamp(13px, 4.85cqi, 18px);
	font-weight: 400;
	line-height: 1.38;
	color: #d5e2e9;
}

.rsd .rsd__card-desc {
	margin: 0 0 clamp(6px, 2.2cqi, 10px);
	font-size: clamp(12px, 4.3cqi, 16px);
	line-height: 1.45;
	color: var(--rsd-muted);
}

/* ---------- Checklist ---------- */

.rsd .rsd__features {
	list-style: none;
	margin: clamp(10px, 4cqi, 18px) 0 clamp(14px, 5.5cqi, 26px);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(6px, 2.55cqi, 11px);
}

.rsd .rsd__feature {
	display: flex;
	align-items: flex-start;
	gap: clamp(7px, 2.9cqi, 12px);
	font-size: clamp(12px, 4cqi, 15px);
	line-height: 1.35;
	color: #c3d1da;
}

.rsd .rsd__check {
	width: clamp(14px, 4.85cqi, 19px);
	height: clamp(14px, 4.85cqi, 19px);
	flex: none;
	margin-top: .08em;
	fill: none;
	stroke: var(--rsd-accent);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rsd-accent) 55%, transparent));
}

/* ---------- Button ---------- */

.rsd .rsd__btn {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: clamp(7px, 2.6cqi, 11px);
	margin-top: auto;
	padding: clamp(9px, 3.4cqi, 14px) clamp(16px, 6.2cqi, 26px);
	border: 1px solid color-mix(in srgb, var(--rsd-accent) 55%, transparent);
	border-radius: 999px;
	font-size: clamp(12px, 4.3cqi, 16px);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	text-decoration: none;
	background: rgba(255, 255, 255, .045);
	-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;
}

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

.rsd .rsd__btn svg {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .25s ease;
}

.rsd .rsd__btn:hover svg {
	transform: translateX(3px);
}

/* ---------- Footer rule ---------- */

.rsd .rsd__foot {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.2cqi, 32px);
	margin-top: clamp(24px, 3.4cqi, 48px);
}

.rsd .rsd__foot::before,
.rsd .rsd__foot::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
}

.rsd .rsd__foot span {
	font-size: clamp(10px, .95cqi, 13px);
	font-weight: 600;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--rsd-accent) 65%, #ffffff);
	text-shadow: 0 0 22px color-mix(in srgb, var(--rsd-accent) 50%, transparent);
}

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

@media (max-width: 1100px) {
	.rsd {
		padding: 56px 24px 44px;
	}

	.rsd .rsd__head {
		padding: 0;
	}

	.rsd .rsd__edge {
		display: none;
	}

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

@media (max-width: 640px) {
	.rsd {
		padding: 44px 16px 36px;
	}

	.rsd .rsd__grid {
		grid-template-columns: 1fr;
	}

	/* cqi now tracks a full-bleed card — hold readable sizes. */
	.rsd .rsd__card {
		padding: 24px;
	}

	.rsd .rsd__num {
		font-size: 14px;
	}

	.rsd .rsd__card-title {
		font-size: 26px;
	}

	.rsd .rsd__card-sub {
		font-size: 16px;
	}

	.rsd .rsd__card-desc,
	.rsd .rsd__feature {
		font-size: 14.5px;
	}

	.rsd .rsd__check {
		width: 18px;
		height: 18px;
	}

	.rsd .rsd__features {
		gap: 10px;
		margin: 16px 0 22px;
	}

	.rsd .rsd__btn {
		font-size: 15px;
		padding: 12px 24px;
	}

	.rsd .rsd__media {
		aspect-ratio: 352 / 220;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rsd .rsd__card,
	.rsd .rsd__btn,
	.rsd .rsd__btn svg {
		transition: none;
	}

	.rsd .rsd__card:hover {
		transform: none;
	}
}