/* Sketch Landing — Confirmation hero. Same inset panel as the landing hero. */

.sklpx {
	--sklpx-margin: 10px;
	--sklpx-fg: #ffffff;
	--sklpx-muted: rgba(255, 255, 255, 0.78);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: calc(100vw - var(--sklpx-margin) * 2);
	max-width: none;
	margin: var(--sklpx-margin) calc(50% - 50vw + var(--sklpx-margin)) 0;
	border-radius: 24px;
	background: var(--lp-ink-2);
	color: var(--sklpx-fg);
	padding: clamp(120px, 13vw, 170px) clamp(20px, 4vw, 56px) clamp(48px, 6vw, 80px);
	text-align: center;
}
.sklpx--gradient { background: linear-gradient(135deg, #2b2563 0%, #5b47ff 42%, #b23cd9 78%, #ff33b9 100%); }
.sklpx--wash {
	--sklpx-fg: var(--lp-ink);
	--sklpx-muted: var(--lp-muted);
	background: linear-gradient(160deg, #ffffff 0%, #dce9f7 100%);
	color: var(--lp-ink);
}
.sklpx__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sklpx__glow { position: absolute; border-radius: 50%; filter: blur(80px); mix-blend-mode: screen; opacity: 0.55; }
.sklpx__glow--a { width: 50vw; height: 50vw; left: -14vw; top: -20vw; background: #6d46ff; }
.sklpx__glow--b { width: 44vw; height: 44vw; right: -14vw; bottom: -26vw; background: #ff33b9; }

@media (max-width: 768px) {
	.sklpx { --sklpx-margin: 8px; padding-top: clamp(48px, 9vw, 72px); }
}

.sklpx__inner { position: relative; max-width: 720px; margin: 0 auto; }

/* Drawn tick */
.sklpx__tick {
	display: inline-grid;
	place-items: center;
	margin: 0 auto clamp(20px, 2.6vw, 32px);
	color: var(--lp-lime);
}
.sklpx--wash .sklpx__tick { color: var(--lp-indigo); }
.sklpx__tick svg { display: block; width: clamp(72px, 7vw, 88px); height: auto; }
.sklpx__tick-ring {
	stroke-dasharray: 258;
	stroke-dashoffset: 258;
	opacity: 0.55;
	animation: sklpx-ring 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.sklpx__tick-mark {
	stroke-dasharray: 60;
	stroke-dashoffset: 60;
	animation: sklpx-mark 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}
@keyframes sklpx-ring { to { stroke-dashoffset: 0; } }
@keyframes sklpx-mark { to { stroke-dashoffset: 0; } }

.sklpx__heading {
	margin: 0 0 clamp(14px, 1.6vw, 20px);
	font-size: clamp(34px, 5vw, 64px);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--sklpx-fg);
	text-wrap: balance;
}
.sklpx__sub {
	max-width: 52ch;
	margin: 0 auto;
	font-size: clamp(16px, 1.3vw, 20px);
	line-height: 1.55;
	color: var(--sklpx-muted);
}
.sklpx__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: clamp(24px, 3vw, 36px);
}
.sklpx .sklpx__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: clamp(32px, 4vw, 56px);
	text-align: left;
}
.sklpx__step {
	padding: clamp(18px, 1.8vw, 24px);
	border-radius: var(--lp-radius);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.sklpx--wash .sklpx__step { background: rgba(255, 255, 255, 0.7); border-color: rgba(11, 6, 43, 0.08); }
.sklpx__step-label {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(212, 249, 80, 0.14);
	color: var(--lp-lime);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sklpx--wash .sklpx__step-label { background: var(--lp-lilac); color: var(--lp-indigo); }
.sklpx__step-text { font-size: 14px; line-height: 1.6; color: var(--sklpx-muted); }

@media (max-width: 768px) {
	.sklpx .sklpx__steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.sklpx__tick-ring, .sklpx__tick-mark { animation: none; stroke-dashoffset: 0; }
}