/*
 * Stacksole SEO Services page: premium design layer.
 *
 * Loaded only on /seo-services/ (see inc/stacksole-seo-page.php). Every rule is
 * scoped to the page's own section classes (.sk, .sk-*), so nothing else on the
 * site is affected. Same design language as the WooCommerce page: light and navy
 * with StackSole blue, Inter type, 20px radii, hairline borders, soft shadows,
 * Lucide-style icons drawn with CSS masks, and subtle motion.
 */

/* =====================================================================
   TOKENS + ICONS
   ===================================================================== */
.sk {
	--sk-navy: #0b1b3a;
	--sk-ink: #0f172a;
	--sk-text: #475467;
	--sk-muted: #667085;
	--sk-blue: #1269e8;
	--sk-blue-d: #0b4db8;
	--sk-blue-t: #eef4ff;
	--sk-line: #e4e9f2;
	--sk-soft: #f7f9fc;
	--sk-r: 20px;
	--sk-shadow: 0 1px 2px rgba(11, 27, 58, .04), 0 14px 30px -18px rgba(11, 27, 58, .16);
	--sk-shadow-h: 0 1px 2px rgba(11, 27, 58, .05), 0 24px 44px -22px rgba(18, 105, 232, .3);
	--sk-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
	--i-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 18 6-6-6-6'/%3E%3Cpath d='m8 6-6 6 6 6'/%3E%3C/svg%3E");
	--i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E");
	--i-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
	--i-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/%3E%3Cpath d='M2 2l7.586 7.586'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E");
	--i-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
	--i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--i-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7'/%3E%3Cpath d='M4 10V3'/%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 8V3'/%3E%3Cpath d='M20 21v-5'/%3E%3Cpath d='M20 12V3'/%3E%3Cpath d='M1 14h6'/%3E%3Cpath d='M9 8h6'/%3E%3Cpath d='M17 16h6'/%3E%3C/svg%3E");
	--i-message: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E");
	--i-lifebuoy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='m4.93 4.93 4.24 4.24'/%3E%3Cpath d='m14.83 9.17 4.24-4.24'/%3E%3Cpath d='m14.83 14.83 4.24 4.24'/%3E%3Cpath d='m9.17 14.83-4.24 4.24'/%3E%3C/svg%3E");
	--i-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
	--i-trend: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E");
	--i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");

	font-family: var(--sk-font);
	color: var(--sk-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

.sk-i-search { --ic: var(--i-search); }
.sk-i-code { --ic: var(--i-code); }
.sk-i-file { --ic: var(--i-file); }
.sk-i-target { --ic: var(--i-target); }
.sk-i-pen { --ic: var(--i-pen); }
.sk-i-link { --ic: var(--i-link); }
.sk-i-pin { --ic: var(--i-pin); }
.sk-i-sliders { --ic: var(--i-sliders); }
.sk-i-message { --ic: var(--i-message); }
.sk-i-lifebuoy { --ic: var(--i-lifebuoy); }
.sk-i-clipboard { --ic: var(--i-clipboard); }
.sk-i-trend { --ic: var(--i-trend); }
.sk-i-check { --ic: var(--i-check); }
.sk-i-arrow { --ic: var(--i-arrow); }
.sk-i-shield { --ic: var(--i-shield); }

/* inline icon */
.sk .sk-i {
	display: inline-block;
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: var(--ic) center / contain no-repeat;
	mask: var(--ic) center / contain no-repeat;
	vertical-align: -.16em;
}

/* icon tile */
.sk .sk-ico {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--sk-blue-t);
	color: var(--sk-blue);
}

.sk .sk-ico::before {
	content: "";
	width: 22px;
	height: 22px;
	background: currentColor;
	-webkit-mask: var(--ic) center / contain no-repeat;
	mask: var(--ic) center / contain no-repeat;
}

/* =====================================================================
   SHARED
   ===================================================================== */
.sk .sk-wrap {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 1.5rem);
}

.sk.sk-sec {
	padding-block: clamp(4.5rem, 9vw, 7.5rem) 0;
}

.sk .sk-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid var(--sk-line);
	border-radius: 999px;
	background: #ffffff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--sk-navy);
}

.sk .sk-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sk-blue);
}

.sk h1,
.sk h2,
.sk h3 {
	font-family: var(--sk-font);
	text-transform: none;
}

.sk .sk-h2 {
	margin: 18px 0 0;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.035em;
	color: var(--sk-navy);
	text-wrap: balance;
}

.sk .sk-h3 {
	margin: 0;
	font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
	font-weight: 600;
	letter-spacing: -.025em;
	color: var(--sk-navy);
}

.sk .sk-p {
	margin: 16px 0 0;
	font-size: clamp(1rem, .96rem + .2vw, 1.1rem);
	line-height: 1.7;
	color: var(--sk-text);
}

.sk .sk-head {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.sk .sk-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sk-blue);
	text-decoration: none;
	transition: gap .2s ease, color .2s ease;
}

.sk .sk-link:hover {
	gap: 12px;
	color: var(--sk-blue-d);
}

.sk .sk-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.sk .sk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 22px;
	border: 1px solid transparent;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.sk .sk-btn-primary {
	background: var(--sk-blue);
	color: #ffffff;
	box-shadow: 0 1px 2px rgba(11, 27, 58, .12), 0 10px 22px -10px rgba(18, 105, 232, .65);
}

.sk .sk-btn-primary:hover {
	background: var(--sk-blue-d);
	color: #ffffff;
	transform: translateY(-1px);
}

.sk .sk-btn-ghost {
	background: #ffffff;
	border-color: var(--sk-line);
	color: var(--sk-navy);
}

.sk .sk-btn-ghost:hover {
	border-color: #c9d3e6;
	color: var(--sk-navy);
	transform: translateY(-1px);
}

.sk .sk-btn-light {
	background: #ffffff;
	color: var(--sk-navy);
}

.sk .sk-btn-light:hover {
	background: var(--sk-blue-t);
	color: var(--sk-navy);
	transform: translateY(-1px);
}

.sk .sk-btn-outline {
	border-color: rgba(255, 255, 255, .28);
	color: #ffffff;
}

.sk .sk-btn-outline:hover {
	border-color: rgba(255, 255, 255, .6);
	color: #ffffff;
	transform: translateY(-1px);
}

.sk .sk-grid {
	display: grid;
	gap: 16px;
}

.sk .sk-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.sk .sk-card {
	padding: 28px;
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-r);
	background: #ffffff;
	box-shadow: var(--sk-shadow);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.sk .sk-card:hover {
	transform: translateY(-3px);
	border-color: #cfe0fb;
	box-shadow: var(--sk-shadow-h);
}

.sk .sk-card h3 {
	margin: 22px 0 8px;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -.015em;
	color: var(--sk-navy);
}

.sk .sk-card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--sk-text);
}

/* =====================================================================
   HERO + SEARCH RESULTS MOCK-UP
   ===================================================================== */
.sk.sk-hero {
	position: relative;
	padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.sk.sk-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--sk-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--sk-line) 1px, transparent 1px);
	background-size: 64px 64px;
	opacity: .5;
	-webkit-mask-image: radial-gradient(ellipse 65% 75% at 72% 35%, #000 0%, transparent 72%);
	mask-image: radial-gradient(ellipse 65% 75% at 72% 35%, #000 0%, transparent 72%);
	pointer-events: none;
}

.sk .sk-hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

.sk.sk-hero h1 {
	margin: 22px 0 20px;
	font-size: clamp(2.5rem, 1.2rem + 4.8vw, 4.6rem);
	font-weight: 600;
	line-height: 1.03;
	letter-spacing: -.045em;
	color: var(--sk-navy);
	text-wrap: balance;
}

.sk .sk-lead {
	max-width: 34em;
	margin: 0 0 32px;
	font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
	line-height: 1.65;
	color: var(--sk-text);
}

.sk .sk-ticks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 500;
	color: var(--sk-muted);
}

.sk .sk-ticks li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.sk .sk-ticks .sk-i {
	color: var(--sk-blue);
}

.sk .sk-hero-visual {
	position: relative;
	padding-bottom: 36px;
}

.sk .sk-serp {
	padding: 20px;
	border: 1px solid var(--sk-line);
	border-radius: 22px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(11, 27, 58, .05), 0 40px 80px -40px rgba(11, 27, 58, .28);
}

.sk .sk-search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid var(--sk-line);
	border-radius: 999px;
	background: #ffffff;
	font-size: 14px;
	color: var(--sk-muted);
	box-shadow: 0 1px 2px rgba(11, 27, 58, .04);
}

.sk .sk-search .sk-i {
	color: var(--sk-blue);
}

.sk .sk-tabs {
	display: flex;
	gap: 20px;
	margin: 16px 0 4px;
	padding: 0 4px;
	border-bottom: 1px solid var(--sk-line);
	font-size: 13px;
	color: var(--sk-muted);
}

.sk .sk-tabs span {
	padding-bottom: 10px;
}

.sk .sk-tabs .on {
	margin-bottom: -1px;
	border-bottom: 2px solid var(--sk-blue);
	font-weight: 600;
	color: var(--sk-blue);
}

.sk .sk-result {
	padding: 16px 4px;
	border-bottom: 1px solid var(--sk-line);
}

.sk .sk-result:last-child {
	border-bottom: 0;
	padding-bottom: 4px;
}

.sk .sk-result-hi {
	margin-top: 12px;
	padding: 16px;
	border: 1px solid #dbe6fb;
	border-radius: 14px;
	background: #f7faff;
}

.sk .sk-r-url {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--sk-muted);
}

.sk .sk-r-url em {
	font-style: normal;
}

.sk .sk-fav {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #dfe5ef;
}

.sk .sk-result-hi .sk-fav {
	background: var(--sk-blue);
}

.sk .sk-r-title {
	margin: 6px 0 4px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--sk-blue-d);
}

.sk .sk-r-desc {
	font-size: 13px;
	line-height: 1.55;
	color: var(--sk-text);
}

.sk .sk-r-sub {
	display: flex;
	gap: 16px;
	margin-top: 10px;
	font-size: 12px;
	font-weight: 500;
	color: var(--sk-blue);
}

.sk .sk-bar {
	height: 8px;
	margin-top: 10px;
	border-radius: 4px;
	background: #eaeef5;
}

.sk .sk-bar.w60 { width: 60%; }
.sk .sk-bar.w70 { width: 70%; }
.sk .sk-bar.w80 { width: 80%; }
.sk .sk-bar.w90 { width: 90%; }
.sk .sk-bar.w95 { width: 95%; }

.sk .sk-check {
	position: absolute;
	right: -10px;
	bottom: 0;
	width: min(240px, 72%);
	padding: 16px;
	border: 1px solid var(--sk-line);
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(11, 27, 58, .05), 0 30px 60px -28px rgba(11, 27, 58, .35);
}

.sk .sk-check-h {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sk-navy);
}

.sk .sk-check-h .sk-i {
	color: var(--sk-blue);
}

.sk .sk-check ul {
	display: grid;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.sk .sk-check li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	color: var(--sk-text);
}

.sk .sk-check li .sk-i {
	color: var(--sk-blue);
}

/* =====================================================================
   WHY, PROCESS, PLATFORMS, FAQ, CTA
   ===================================================================== */
.sk .sk-split {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.sk .sk-points {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sk .sk-points li {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin: 0;
	padding: 22px 24px;
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-r);
	background: #ffffff;
	box-shadow: var(--sk-shadow);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.sk .sk-points li:hover {
	transform: translateY(-2px);
	border-color: #cfe0fb;
	box-shadow: var(--sk-shadow-h);
}

.sk .sk-points h3 {
	margin: 2px 0 6px;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -.015em;
	color: var(--sk-navy);
}

.sk .sk-points p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--sk-text);
}

/* process */
.sk .sk-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.sk .sk-steps li {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"ico num"
		"title title"
		"text text";
	align-items: center;
	column-gap: 12px;
	margin: 0;
	padding: 28px 28px 0 0;
	align-content: start;
	border-top: 1px solid var(--sk-line);
}

.sk .sk-steps li::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--sk-blue);
	box-shadow: 0 0 0 4px #ffffff;
}

.sk .sk-steps .sk-ico {
	grid-area: ico;
}

.sk .sk-steps .sk-step-n {
	grid-area: num;
	justify-self: end;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	color: #98a2b3;
}

.sk .sk-steps h3 {
	grid-area: title;
	margin: 20px 0 8px;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -.015em;
	color: var(--sk-navy);
}

.sk .sk-steps p {
	grid-area: text;
	max-width: 32ch;
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--sk-text);
}

/* platforms */
.sk .sk-panel {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	border: 1px solid var(--sk-line);
	border-radius: 24px;
	background: var(--sk-soft);
}

.sk .sk-panel .sk-p {
	margin-top: 10px;
	font-size: 1rem;
}

.sk .sk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sk .sk-chips li {
	margin: 0;
}

.sk .sk-chips a {
	display: inline-flex;
	align-items: center;
	padding: 10px 16px;
	border: 1px solid var(--sk-line);
	border-radius: 999px;
	background: #ffffff;
	font-size: 14px;
	font-weight: 500;
	color: var(--sk-navy);
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.sk .sk-chips a:hover {
	border-color: #b7cff7;
	color: var(--sk-blue);
	transform: translateY(-1px);
}

/* FAQ (native details, no script needed) */
.sk .sk-faq-list {
	max-width: 820px;
	margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
}

.sk .sk-q {
	border-bottom: 1px solid var(--sk-line);
}

.sk .sk-q:first-child {
	border-top: 1px solid var(--sk-line);
}

.sk .sk-q summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 4px;
	list-style: none;
	cursor: pointer;
	font-size: clamp(1rem, .96rem + .2vw, 1.1rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.015em;
	color: var(--sk-navy);
	transition: color .2s ease;
}

.sk .sk-q summary::-webkit-details-marker {
	display: none;
}

.sk .sk-q summary::after {
	content: "+";
	display: grid;
	flex: 0 0 30px;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--sk-line);
	border-radius: 50%;
	background: #ffffff;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	color: var(--sk-navy);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.sk .sk-q summary:hover {
	color: var(--sk-blue);
}

.sk .sk-q[open] summary {
	color: var(--sk-blue);
}

.sk .sk-q[open] summary::after {
	content: "\2212";
	border-color: var(--sk-blue);
	background: var(--sk-blue);
	color: #ffffff;
}

.sk .sk-q p {
	max-width: 68ch;
	margin: 0;
	padding: 0 4px 24px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--sk-text);
}

/* final CTA */
.sk.sk-cta {
	padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
}

.sk .sk-cta-panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: clamp(2rem, 5vw, 3.5rem);
	border-radius: 24px;
	background: var(--sk-navy);
	color: #ffffff;
}

.sk .sk-cta-copy {
	max-width: 620px;
}

.sk.sk-cta .sk-actions {
	flex: 0 0 auto;
}

@media (min-width: 768px) {
	.sk .sk-cta-copy {
		flex: 1 1 0;
		min-width: 0;
	}
}

@media (max-width: 767px) {
	.sk.sk-cta .sk-actions {
		width: 100%;
	}

	.sk.sk-cta .sk-btn {
		flex: 1 1 100%;
	}
}

.sk.sk-cta .sk-h2 {
	margin: 0;
	color: #ffffff;
}

.sk .sk-cta-copy p {
	margin: 14px 0 0;
	font-size: 1.05rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, .72);
}

/* =====================================================================
   MOTION + FOCUS
   ===================================================================== */
html.sk-js .sk-r {
	opacity: 0;
	transform: translateY(14px);
}

html.sk-js .sk-r.sk-in {
	opacity: 1;
	transform: none;
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}

.sk a:focus-visible,
.sk summary:focus-visible {
	outline: 2px solid var(--sk-blue);
	outline-offset: 3px;
	border-radius: 6px;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
	.sk .sk-hero-grid,
	.sk .sk-split,
	.sk .sk-panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.sk .sk-hero-visual {
		width: 100%;
		max-width: 640px;
		margin-inline: auto;
	}

	.sk .sk-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* steps become a clean vertical timeline */
	.sk .sk-steps {
		grid-template-columns: minmax(0, 1fr);
		max-width: 640px;
		margin-inline: auto;
	}

	.sk .sk-steps li {
		grid-template-columns: 44px minmax(0, 1fr);
		grid-template-areas:
			"ico num"
			"ico title"
			"ico text";
		align-items: start;
		column-gap: 18px;
		padding: 0 0 40px 32px;
		border-top: 0;
		border-left: 1px solid var(--sk-line);
	}

	.sk .sk-steps li:last-child {
		padding-bottom: 0;
		border-left-color: transparent;
	}

	.sk .sk-steps li::before {
		top: 6px;
		left: -5px;
	}

	.sk .sk-steps .sk-step-n {
		justify-self: start;
		margin: 2px 0 4px;
	}

	.sk .sk-steps h3 {
		margin: 0 0 6px;
	}

	.sk .sk-steps p {
		max-width: none;
	}
}

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

	.sk .sk-cta-panel {
		flex-direction: column;
		align-items: flex-start;
	}

	.sk .sk-cta .sk-actions,
	.sk.sk-hero .sk-actions {
		width: 100%;
	}

	.sk .sk-cta .sk-btn,
	.sk.sk-hero .sk-actions .sk-btn {
		flex: 1 1 100%;
	}

	.sk .sk-check {
		right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sk *,
	.sk *::before,
	.sk *::after {
		transition: none !important;
		animation: none !important;
	}
}