/* Contact page: company-details card + contact form, side by side on
   desktop (details left, form right), stacked on mobile (details still
   first). Shares .page-hero (components.css) with pricing/FAQ. */

.contact { background: #ffffff; }
.contact__layout {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 48px;
	align-items: start;
}

.contact__notice {
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 24px;
}
.contact__notice--success { background: #dcfce7; color: #16a34a; }
.contact__notice--error { background: #fee2e2; color: #dc2626; }

.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.contact-form__field { display: flex; flex-direction: column; gap: 8px; }
.contact-form__field label {
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-ink);
}
.contact-form__optional { font-weight: 400; color: var(--color-body); }

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-ink);
	background: #ffffff;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 12px 14px;
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
	outline: 2px solid var(--color-purple);
	outline-offset: 1px;
}
.contact-form__field textarea { resize: vertical; }

/* Native select arrow sat almost flush against the box edge (browser's
   own reserved arrow gutter is narrower than this form's input padding
   implies). appearance:none removes it in favor of a custom chevron with
   deliberate right-hand breathing room. */
.contact-form__field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4d51' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
}

/* Honeypot: visually hidden but still in the DOM (not display:none) —
   some bots specifically skip display:none fields to dodge honeypots. */
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Details card: dark navy (same treatment as .audience-card /
   .value-props elsewhere) with a purple icon chip per row, instead of the
   flat grey box + uppercase label list this replaced. */
.contact__details {
	background: #1f1346;
	border-radius: var(--radius-card);
	padding: 40px 32px;
}
.contact__details-title {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 28px;
}
.contact__details-list { display: flex; flex-direction: column; gap: 24px; }
.contact__details-list li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.contact__details-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background: #673de6;
	border-radius: 10px;
	color: #ffffff;
}
.contact__details-icon svg { width: 19px; height: 19px; }
.contact__details-text { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.contact__details-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.55);
}
.contact__details-text a,
.contact__details-text > span:not(.contact__details-label) {
	color: #ffffff;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
}
.contact__details-text a:hover { color: #c9b8ff; }

/* Internal links to FAQ/pricing/how-it-works, below the details list on
   the same dark card — lighter/faded body copy with light-purple links,
   matching the card's own icon-row link treatment (#c9b8ff) rather than
   the site-wide purple, which wouldn't have enough contrast here. */
.contact__details-more {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.65);
}
.contact__details-more a { color: #c9b8ff; font-weight: 600; text-decoration: underline; }
.contact__details-more a:hover { color: #ffffff; }

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

@media (max-width: 600px) {
	.contact-form__row { grid-template-columns: 1fr; }
}

/* reCAPTCHA v3 badge is hidden per Google's terms, which requires the
   disclosure text below in its place (see contact.php). */
.grecaptcha-badge { visibility: hidden; }
.contact-form__recaptcha-notice {
	margin-top: 14px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--color-text-muted, #6b7280);
	text-align: center;
}
.contact-form__recaptcha-notice a { color: inherit; text-decoration: underline; }
.contact-form__recaptcha-notice a:hover { color: var(--color-purple); }