/* ==========================================================================
   White-Label SEO widget — built on the supplied 803px-wide mockup.
   Every size is expressed in mockup pixels (u), scaled to the container width.
   ========================================================================== */

.wls {
	--wls-accent: #00def5;
	--wls-btn: #02ddff;
	--wls-bg: #000b10;
	--wls-muted: #8e98a0;
	--u: min(calc(100cqi / 803), 1.9px);
	position: relative;
	overflow: hidden;
	container-type: inline-size;
	background: var(--wls-bg);
	color: #fff;
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

.wls *, .wls *::before, .wls *::after { box-sizing: border-box; }
.wls h1, .wls h2, .wls h3, .wls p, .wls ul { margin: 0; padding: 0; }
.wls ul { list-style: none; }
.wls img { border: 0; box-shadow: none; }

.wls .wls__eyebrow {
	font-size: calc(11 * var(--u));
	font-weight: 700;
	line-height: 1;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #3accd8;
}
.wls .wls__eyebrow--c { text-align: center; }
.wls .wls__eyebrow--sm { font-size: calc(9.6 * var(--u)); letter-spacing: .1em; }

.wls .wls__h2 { font-weight: 700; letter-spacing: -.025em; color: #fff; }
.wls .wls__h2 span { color: var(--wls-accent); }
.wls .wls__h2--c { text-align: center; }

.wls .wls__in { position: relative; width: calc(803 * var(--u)); margin: 0 auto; padding: 0 calc(42 * var(--u)); }

/* buttons */
.wls .wls__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(8 * var(--u));
	height: calc(38 * var(--u));
	padding: 0 calc(17 * var(--u));
	border-radius: calc(7 * var(--u));
	font-size: calc(11 * var(--u));
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.005em;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.wls .wls__btn--solid {
	background: var(--wls-btn);
	color: #04161c;
	box-shadow: 0 0 calc(18 * var(--u)) rgba(2, 221, 255, .35);
}
.wls .wls__btn--solid:hover { transform: translateY(-1px); box-shadow: 0 0 calc(28 * var(--u)) rgba(2, 221, 255, .55); color: #04161c; }
.wls .wls__btn--ghost {
	background: rgba(1, 9, 13, .92);
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff;
	font-weight: 600;
}
.wls .wls__btn--ghost:hover { border-color: var(--wls-accent); color: #fff; }
.wls .wls__arw { width: calc(15 * var(--u)); height: calc(15 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.wls .wls__tick {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: calc(17 * var(--u));
	height: calc(17 * var(--u));
	border-radius: 50%;
	background: #22c6e6;
	box-shadow: 0 0 calc(8 * var(--u)) rgba(2, 221, 255, .45);
}
.wls .wls__tick svg { width: 64%; height: 64%; fill: none; stroke: #03202a; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

.wls .wls__i { display: block; width: calc(28 * var(--u)); height: calc(28 * var(--u)); fill: none; stroke: var(--wls-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 calc(5 * var(--u)) rgba(0, 222, 245, .45)); }
.wls .wls__i--fill { fill: var(--wls-accent); stroke: none; }

/* ---------------------------------------------------------------- hero */

.wls__hero { position: relative; }

.wls .wls__hc {
	position: relative;
	width: calc(803 * var(--u));
	height: calc(420 * var(--u));
	margin: 0 auto;
}

.wls .wls__hero-art {
	position: absolute;
	z-index: 0;
	left: calc((226 + 307 * (1 - var(--wls-hero-s, 1)) + var(--wls-hero-x, 0)) * var(--u));
	top: calc((7 + 204 * (1 - var(--wls-hero-s, 1)) + var(--wls-hero-y, 0)) * var(--u));
	width: calc(614 * var(--wls-hero-s, 1) * var(--u));
	height: calc(409 * var(--wls-hero-s, 1) * var(--u));
	max-width: none;
	object-fit: contain;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(0deg, transparent 0, #000 16%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(0deg, transparent 0, #000 16%);
	mask-composite: intersect;
}

.wls .wls__hero-copy { position: absolute; z-index: 2; left: calc(42 * var(--u)); top: calc(85 * var(--u)); width: calc(480 * var(--u)); }

.wls .wls__h1 {
	margin-top: calc(13 * var(--u));
	font-size: calc(46.5 * var(--u));
	font-weight: 700;
	line-height: calc(46.5 * var(--u));
	letter-spacing: -.035em;
	color: #fff;
}
.wls .wls__h1 span { display: block; color: var(--wls-accent); }

.wls .wls__lead { margin-top: calc(13 * var(--u)); font-size: calc(14.6 * var(--u)); line-height: calc(20 * var(--u)); letter-spacing: -.01em; color: #f1f6f7; }

.wls .wls__btns { display: flex; gap: calc(13 * var(--u)); margin-top: calc(26 * var(--u)); }

.wls .wls__hchecks { display: flex; flex-wrap: wrap; gap: calc(16 * var(--u)); margin-top: calc(30 * var(--u)); }
.wls .wls__hchecks li { display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(9.7 * var(--u)); letter-spacing: -.01em; color: #eef2f4; white-space: nowrap; }

/* ---------------------------------------------------------------- what we deliver */

.wls__deliver { padding: calc(32 * var(--u)) 0 calc(23 * var(--u)); }
.wls .wls__deliver .wls__h2 { margin-top: calc(11 * var(--u)); font-size: calc(30 * var(--u)); line-height: calc(34 * var(--u)); }

.wls .wls__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(12 * var(--u)) calc(17 * var(--u)); margin-top: calc(14 * var(--u)); }

.wls .wls__card {
	position: relative;
	min-height: calc(143 * var(--u));
	padding: calc(21 * var(--u)) calc(4 * var(--u)) calc(18 * var(--u)) calc(21 * var(--u));
	border: 1px solid rgba(70, 200, 230, .26);
	border-radius: calc(13 * var(--u));
	background:
		radial-gradient(calc(120 * var(--u)) calc(60 * var(--u)) at 50% 0, rgba(0, 190, 225, .12), transparent 70%),
		linear-gradient(180deg, rgba(8, 36, 48, .72), rgba(2, 16, 24, .82));
	box-shadow: 0 0 calc(18 * var(--u)) rgba(0, 190, 230, .1), inset 0 1px 0 rgba(160, 240, 255, .1);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.wls .wls__card::before {
	content: "";
	position: absolute;
	left: 18%;
	right: 18%;
	top: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(120, 235, 255, .95), transparent);
	box-shadow: 0 0 calc(6 * var(--u)) rgba(0, 222, 245, .8);
}
.wls .wls__card-ico { position: relative; display: block; width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin: calc(-2 * var(--u)) 0 0 calc(-2 * var(--u)); }
.wls .wls__card-ico::before { content: ""; position: absolute; inset: calc(-6 * var(--u)); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 160, 200, .22), transparent); }
.wls .wls__card-ico .wls__i { position: relative; width: 100%; height: 100%; }
.wls .wls__card h3 { margin-top: calc(15 * var(--u)); font-size: calc(13.2 * var(--u)); font-weight: 700; line-height: calc(16 * var(--u)); letter-spacing: -.01em; color: #fff; }
.wls .wls__card p { margin-top: calc(6 * var(--u)); font-size: calc(10.5 * var(--u)); line-height: calc(14.6 * var(--u)); letter-spacing: -.005em; color: var(--wls-muted); }

.wls .wls__bar {
	display: grid;
	grid-template-columns: 218fr 167fr 165fr 170fr;
	align-items: center;
	height: calc(81 * var(--u));
	margin-top: calc(27 * var(--u));
	border: 1px solid rgba(70, 200, 230, .22);
	border-radius: calc(13 * var(--u));
	background: linear-gradient(180deg, rgba(6, 30, 42, .7), rgba(1, 14, 21, .85));
	box-shadow: 0 0 calc(20 * var(--u)) rgba(0, 190, 230, .08);
}
.wls .wls__bar-item { position: relative; display: flex; align-items: center; gap: calc(21 * var(--u)); padding: 0 0 0 calc(30 * var(--u)); }
.wls .wls__bar-item + .wls__bar-item::before { content: ""; position: absolute; left: 0; top: 50%; height: calc(38 * var(--u)); margin-top: calc(-19 * var(--u)); width: 1px; background: rgba(120, 200, 225, .28); }
.wls .wls__bar-item .wls__i { width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin: 0 calc(-1 * var(--u)); }
.wls .wls__bar-item span { font-size: calc(13.2 * var(--u)); line-height: calc(17 * var(--u)); color: #dfe6ea; }

/* ---------------------------------------------------------------- client reports */

.wls__reports { position: relative; padding: calc(45 * var(--u)) 0 calc(35 * var(--u)); background: radial-gradient(calc(260 * var(--u)) calc(160 * var(--u)) at 72% 60%, rgba(0, 150, 190, .14), transparent 70%); }
.wls .wls__rp { min-height: calc(272 * var(--u)); }
.wls .wls__rp-copy { position: relative; z-index: 2; width: calc(340 * var(--u)); margin-left: calc(6 * var(--u)); }
.wls .wls__h2--rp { margin-top: calc(12 * var(--u)); font-size: calc(32.4 * var(--u)); line-height: calc(35 * var(--u)); }
.wls .wls__h2--rp span { display: block; }
.wls .wls__body { margin-top: calc(9 * var(--u)); font-size: calc(11.7 * var(--u)); line-height: calc(18 * var(--u)); color: #d9dfe3; }
.wls .wls__checks { display: grid; gap: calc(7.7 * var(--u)); margin-top: calc(16 * var(--u)); }
.wls .wls__checks li { display: flex; align-items: center; gap: calc(11 * var(--u)); font-size: calc(12.3 * var(--u)); color: #d7dce0; }
.wls .wls__checks .wls__tick { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

.wls .wls__rp-art { position: absolute; inset: 0; pointer-events: none; }
.wls .wls__rp-art img {
	position: absolute;
	left: calc((343 + 225 * (1 - var(--wls-rp-s, 1)) + var(--wls-rp-x, 0)) * var(--u));
	top: calc((22 - 45 + 150 * (1 - var(--wls-rp-s, 1)) + var(--wls-rp-y, 0)) * var(--u));
	width: calc(450 * var(--wls-rp-s, 1) * var(--u));
	height: auto;
	max-width: none;
	filter: drop-shadow(0 0 calc(24 * var(--u)) rgba(0, 200, 240, .18));
}
.wls .wls__note { position: absolute; left: calc(671 * var(--u)); top: calc((7 - 45) * var(--u)); display: flex; font-size: calc(12.4 * var(--u)); line-height: calc(16.5 * var(--u)); color: #e8ecef; }
.wls .wls__note svg { width: calc(18 * var(--u)); height: calc(52 * var(--u)); margin: calc(20 * var(--u)) 0 0 calc(12 * var(--u)); fill: none; stroke: #7fdcef; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- why partner */

.wls__why { padding: calc(21 * var(--u)) 0 calc(12 * var(--u)); }
.wls .wls__h2--why { margin-top: calc(8 * var(--u)); font-size: calc(31.8 * var(--u)); line-height: 1.1; }
.wls .wls__reasons { display: grid; grid-template-columns: repeat(5, 1fr); margin: calc(25 * var(--u)) calc(-22 * var(--u)) 0; }
.wls .wls__reason { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 calc(4 * var(--u)); }
.wls .wls__reason .wls__i { width: calc(36 * var(--u)); height: calc(36 * var(--u)); margin-top: calc(-2 * var(--u)); stroke-width: 1.5; }
.wls .wls__reason h3 { margin-top: calc(10 * var(--u)); font-size: calc(12.2 * var(--u)); font-weight: 700; line-height: calc(16.5 * var(--u)); letter-spacing: -.01em; color: #fff; }
.wls .wls__reason p { margin-top: calc(5 * var(--u)); font-size: calc(10.75 * var(--u)); line-height: calc(15.3 * var(--u)); color: var(--wls-muted); }

/* ---------------------------------------------------------------- CTA */

.wls__cta-sec { position: relative; padding: calc(19 * var(--u)) 0 calc(34 * var(--u)); }
.wls .wls__cta-bg {
	position: absolute;
	left: 50%;
	top: calc(-6 * var(--u));
	width: max(100%, calc(827 * var(--u)));
	max-width: none;
	height: auto;
	transform: translateX(-50%);
	pointer-events: none;
}
.wls .wls__cta {
	position: relative;
	height: calc(266 * var(--u));
	margin: 0 calc(6 * var(--u)) 0 calc(3 * var(--u));
	padding: calc(25 * var(--u)) calc(32 * var(--u)) 0;
	border: 1px solid rgba(90, 210, 235, .3);
	border-radius: calc(13 * var(--u));
	background: linear-gradient(90deg, rgba(3, 22, 30, .78) 0, rgba(3, 22, 30, .55) 45%, rgba(3, 22, 30, .05) 70%);
	box-shadow: inset 0 1px 0 rgba(160, 240, 255, .08);
}
.wls .wls__h2--cta { margin-top: calc(7 * var(--u)); font-size: calc(30 * var(--u)); line-height: calc(34 * var(--u)); }
.wls .wls__h2--cta span { display: block; }
.wls .wls__cta-text { margin-top: calc(10 * var(--u)); font-size: calc(12.3 * var(--u)); line-height: calc(20 * var(--u)); color: #e3e8eb; }
.wls .wls__btn--cta { height: calc(39 * var(--u)); margin-top: calc(17.5 * var(--u)); padding: 0 calc(24 * var(--u)); font-size: calc(11.35 * var(--u)); }

/* ==========================================================================
   Phones and narrow columns
   ========================================================================== */
@container (max-width: 767.98px) {
	.wls > * { --u: 1px; }
	.wls .wls__in { width: auto; padding: 0 20px; }

	.wls .wls__hc { width: auto; height: auto; display: flex; flex-direction: column; padding: 44px 20px 10px; }
	.wls .wls__hero-copy { position: relative; left: auto; top: auto; width: auto; }
	.wls .wls__h1 { font-size: clamp(36px, 11cqi, 50px); line-height: 1.02; }
	.wls .wls__lead { font-size: 16px; line-height: 1.55; }
	.wls .wls__lead br { display: none; }
	.wls .wls__btns { flex-wrap: wrap; gap: 12px; margin-top: 24px; }
	.wls .wls__btn { height: 48px; font-size: 14.5px; padding: 0 20px; }
	.wls .wls__btns .wls__btn { flex: 1 1 auto; }
	.wls .wls__hchecks { gap: 10px 16px; margin-top: 24px; }
	.wls .wls__hchecks li { font-size: 13px; }
	.wls .wls__hero-art {
		position: relative; order: 2; left: auto; top: auto;
		width: calc((100% + 40px) * var(--wls-hero-s, 1)); height: auto;
		margin: 14px -20px 0; align-self: center;
		transform: translate(calc(var(--wls-hero-x, 0) * 1px), calc(var(--wls-hero-y, 0) * 1px));
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%);
		mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%);
	}

	.wls__deliver { padding: 36px 0 30px; }
	.wls .wls__deliver .wls__h2, .wls .wls__h2--rp, .wls .wls__h2--why, .wls .wls__h2--cta { font-size: clamp(26px, 7.6cqi, 34px); line-height: 1.15; }
	.wls .wls__deliver .wls__h2 br { display: none; }
	.wls .wls__cards { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
	.wls .wls__card { min-height: 0; padding: 18px 14px 16px; }
	.wls .wls__card h3 { font-size: 14.5px; line-height: 1.25; margin-top: 14px; }
	.wls .wls__card p { font-size: 13px; line-height: 1.45; }
	.wls .wls__card p br { display: none; }
	.wls .wls__bar { grid-template-columns: repeat(2, 1fr); height: auto; row-gap: 20px; padding: 20px 8px; margin-top: 16px; }
	.wls .wls__bar-item { justify-content: flex-start; gap: 12px; padding: 0 10px; }
	.wls .wls__bar-item + .wls__bar-item::before { display: none; }
	.wls .wls__bar-item span { font-size: 13.5px; line-height: 1.35; }

	.wls__reports { padding: 44px 0 20px; }
	.wls .wls__rp { min-height: 0; display: flex; flex-direction: column; }
	.wls .wls__rp-copy { width: auto; margin: 0; }
	.wls .wls__body { font-size: 15px; line-height: 1.6; }
	.wls .wls__body br { display: none; }
	.wls .wls__checks { gap: 12px; margin-top: 20px; }
	.wls .wls__checks li { font-size: 14.5px; }
	.wls .wls__rp-art { position: relative; inset: auto; margin-top: 26px; }
	.wls .wls__rp-art img { position: relative; left: auto; top: auto; display: block; width: calc(100% * var(--wls-rp-s, 1)); margin: 0 auto; transform: translate(calc(var(--wls-rp-x, 0) * 1px), calc(var(--wls-rp-y, 0) * 1px)); }
	.wls .wls__note { display: none; }

	.wls__why { padding: 40px 0 36px; }
	.wls .wls__reasons { grid-template-columns: repeat(2, 1fr); gap: 30px 14px; margin: 28px 0 0; }
	.wls .wls__reason:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.wls .wls__reason h3 { font-size: 14.5px; line-height: 1.3; }
	.wls .wls__reason p { font-size: 13px; line-height: 1.45; }

	.wls__cta-sec { padding: 10px 0 40px; }
	.wls .wls__cta-bg { top: auto; bottom: 0; width: 170%; left: 18%; }
	.wls .wls__cta { height: auto; margin: 0; padding: 28px 22px 170px; background: linear-gradient(180deg, rgba(3, 22, 30, .85) 0, rgba(3, 22, 30, .6) 60%, rgba(3, 22, 30, 0) 100%); }
	.wls .wls__eyebrow--sm { font-size: 11px; }
	.wls .wls__cta-text { font-size: 15px; line-height: 1.55; }
	.wls .wls__cta-text br { display: none; }
	.wls .wls__btn--cta { height: 48px; }
}