.wlsd {
	--wlsd-accent: #635bff;
	--wlsd-border: color-mix(in srgb, currentColor 16%, transparent);
	--wlsd-muted: color-mix(in srgb, currentColor 68%, transparent);
	display: grid;
	gap: 1rem;
	width: min(100%, 760px);
	margin: clamp(1.5rem, 4vw, 3rem) auto clamp(2.5rem, 6vw, 5rem);
	padding-inline: 1rem;
	color: inherit;
	font: inherit;
}

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

.wlsd__intro,
.wlsd__form,
.wlsd__thread {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--wlsd-border);
	border-radius: 18px;
	background: color-mix(in srgb, Canvas 97%, var(--wlsd-accent) 3%);
	color: CanvasText;
	box-shadow: 0 18px 50px rgba(15, 23, 42, 0.06);
}

.wlsd__intro h2 {
	margin: 0.2rem 0 0.5rem;
	font-size: clamp(1.65rem, 4vw, 2.35rem);
	line-height: 1.1;
}

.wlsd__intro p:last-child,
.wlsd__form p,
.wlsd__message p {
	margin: 0;
}

.wlsd__eyebrow {
	margin: 0;
	color: var(--wlsd-accent);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wlsd__form {
	display: grid;
	gap: 1rem;
}

.wlsd__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.wlsd__grid--single {
	grid-template-columns: 1fr;
}

.wlsd__form label {
	display: block;
	margin-bottom: 0.42rem;
	font-size: 0.92rem;
	font-weight: 700;
}

.wlsd__form input,
.wlsd__form select,
.wlsd__form textarea {
	display: block;
	width: 100%;
	padding: 0.82rem 0.9rem;
	border: 1px solid var(--wlsd-border);
	border-radius: 11px;
	background: Canvas;
	color: CanvasText;
	font: inherit;
}

.wlsd__form input:focus,
.wlsd__form select:focus,
.wlsd__form textarea:focus {
	outline: 3px solid color-mix(in srgb, var(--wlsd-accent) 20%, transparent);
	border-color: var(--wlsd-accent);
}

.wlsd__form select {
	appearance: auto;
}

.wlsd__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0.72rem 1.15rem;
	border: 1px solid var(--wlsd-accent);
	border-radius: 11px;
	background: var(--wlsd-accent);
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 800;
	line-height: 1;
}

.wlsd__button:hover,
.wlsd__button:focus-visible {
	filter: brightness(0.92);
}

.wlsd__privacy {
	color: var(--wlsd-muted);
	font-size: 0.86rem;
}

.wlsd__notice {
	padding: 0.95rem 1rem;
	border: 1px solid;
	border-radius: 12px;
}

.wlsd__notice--success {
	border-color: #2f855a;
	background: color-mix(in srgb, #2f855a 10%, Canvas);
}

.wlsd__notice--error {
	border-color: #c53030;
	background: color-mix(in srgb, #c53030 9%, Canvas);
}

.wlsd__thread {
	display: grid;
	gap: 0.8rem;
}

.wlsd__message {
	padding: 1rem;
	border: 1px solid var(--wlsd-border);
	border-radius: 12px;
	background: Canvas;
}

.wlsd__message--support {
	border-left: 4px solid var(--wlsd-accent);
}

.wlsd__message--customer {
	border-left: 4px solid #2f855a;
}

.wlsd__message header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.6rem;
}

.wlsd__message time {
	color: var(--wlsd-muted);
	font-size: 0.78rem;
}

.wlsd__honeypot {
	position: absolute !important;
	inset-inline-start: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.wlsd__recaptcha {
	max-width: 100%;
	overflow: auto;
}

@media (max-width: 640px) {
	.wlsd__grid {
		grid-template-columns: 1fr;
	}

	.wlsd__message header {
		display: grid;
		gap: 0.15rem;
	}
}
