.help-page {
	padding: clamp(2rem, 6vw, 5rem) 0 clamp(3rem, 8vw, 6rem);
}

.help-page__layout {
	width: min(100% - 2rem, 680px);
	margin-inline: auto;
}

.help-page__header {
	margin-bottom: var(--space-6);
}

.help-page__eyebrow {
	margin-bottom: var(--space-2);
	color: var(--color-accent);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.help-page__header h1 {
	font-size: clamp(2rem, 6vw, 3.25rem);
}

.help-page__header > p:last-child {
	max-width: 58ch;
	color: var(--color-text-tertiary);
}

.help-page__form,
.help-page__notice {
	padding: clamp(1rem, 4vw, 1.75rem);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-lg);
	background: var(--color-bg-elevated);
}

.help-page__form {
	display: grid;
	gap: var(--space-5);
}

.help-page__field {
	display: grid;
	gap: var(--space-2);
}

.help-page__field label {
	color: var(--color-text-primary);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
}

.help-page__field label span,
.help-page__field small {
	color: var(--color-text-tertiary);
	font-weight: var(--font-weight-regular);
}

.help-page__field input,
.help-page__field select,
.help-page__field textarea {
	width: 100%;
	border: 1px solid var(--color-border-strong);
	background: var(--color-bg-deepest);
	color: var(--color-text-primary);
	font: inherit;
}

.help-page__field input,
.help-page__field select {
	min-height: 48px;
	padding: 0 var(--space-4);
	border-radius: var(--radius-full);
}

.help-page__field input:focus,
.help-page__field select:focus,
.help-page__field textarea:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-accent-muted);
}

.help-page__select-wrap {
	position: relative;
}

.help-page__select-wrap select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 52px;
}

.help-page__select-icon {
	position: absolute;
	top: 50%;
	right: var(--space-4);
	display: grid;
	width: 18px;
	height: 18px;
	place-items: center;
	color: var(--color-text-secondary);
	pointer-events: none;
	transform: translateY(-50%);
}

.help-page__select-icon svg {
	display: block;
}

.help-page__field [aria-invalid='true'] {
	border-color: var(--color-danger);
}

.help-page__field .help-page__field-error {
	color: var(--color-danger);
	font-weight: var(--font-weight-medium);
}

.help-page__field textarea {
	min-height: 10rem;
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	line-height: var(--line-height-body);
	resize: vertical;
}

.help-page__form .btn {
	width: 100%;
}

.help-page__notice {
	margin-bottom: var(--space-5);
}

.help-page__notice h2 {
	font-size: var(--text-xl);
}

.help-page__notice--success {
	border-color: color-mix(in srgb, var(--color-success) 55%, transparent);
}

.help-page__notice--error {
	border-color: color-mix(in srgb, var(--color-danger) 55%, transparent);
}

.help-page__notice ul {
	padding-left: 1.25rem;
	list-style: disc;
}

.help-page__honeypot {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (min-width: 768px) {
	.help-page__layout {
		width: min(100% - 4rem, 680px);
	}

	.help-page__form .btn {
		width: auto;
		justify-self: start;
	}
}