/* ==========================================================================
   hero.css — Hero section (Figma-matched). Colors via tokens.css.
   ========================================================================== */

.ada-hero {
	background: var(--ada-bg);
	padding: 56px clamp( 16px, 6vw, 96px ) 24px;
}

.ada-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 56px;
	width: 100%;
	max-width: 1360px;
	margin-inline: auto;
}

/* ---- Content (badge + title + subtitle + email + ratings) --------------- */
.ada-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 1064px;
}

.ada-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 8px;
	background: var(--ada-badge-bg);
	border-radius: 9px;
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.006em;
	color: var(--ada-footer-ink);
}

.ada-hero__title {
	margin: 0;
	font-family: var(--ada-font-display);
	font-weight: 550;
	font-size: clamp( 34px, 5vw, 56px );
	line-height: 1.14;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--ada-hero-title);
	text-wrap: balance;
}

/* "Simplified for sellers." — blue → green gradient (Figma per-char fill). */
.ada-hero__title .accent {
	background: linear-gradient( 90deg, #16a9ff 0%, #4fdf82 50% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ada-hero__subtitle {
	margin: 0;
	max-width: 60ch;
	font-family: var(--ada-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.011em;
	text-align: center;
	color: var(--ada-footer-ink);
}

.ada-hero__subtitle strong { font-weight: 700; color: var(--ada-hero-title); }

/* ---- Email capture ------------------------------------------------------ */
.ada-hero__email {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 4px;
}

.ada-hero__form {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ada-hero__input {
	width: 360px;
	max-width: 100%;
	height: 40px;
	padding: 12px 14px 12px 16px;
	background: #ffffff;
	border: 1px solid #d0d5dd;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.05 );
	border-radius: 8px;
	font-family: var(--ada-font);
	font-size: 16px;
	line-height: 24px;
	color: #171717;
}

.ada-hero__input::placeholder { color: #667085; }
.ada-hero__input:focus { outline: 2px solid var(--ada-cta); outline-offset: 1px; }

.ada-hero__form .ada-cta { height: 40px; }

/* ---- CF7 waitlist form — all keyed to the .waitlist-inline-form class,
   so it's independent of the contact form (.custom-cf7-form) and portable. --- */
.wpcf7:has( .waitlist-inline-form ) { margin: 0; width: 100%; }
form.wpcf7-form:has( .waitlist-inline-form ) { margin: 0; }
form.wpcf7-form:has( .waitlist-inline-form ) .hidden-fields-container { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
form.wpcf7-form:has( .waitlist-inline-form ) .screen-reader-response {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect( 0 0 0 0 ); white-space: nowrap;
}

.waitlist-inline-form {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
}
.waitlist-input-field { flex: 0 1 360px; }
.waitlist-input-field .wpcf7-form-control-wrap { display: block; }

.waitlist-inline-form input[type="email"] {
	width: 100%;
	height: 40px;
	padding: 12px 14px 12px 16px;
	background: #ffffff;
	border: 1px solid #d0d5dd;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.05 );
	border-radius: 8px;
	font-family: var(--ada-font);
	font-size: 16px;
	line-height: 24px;
	color: #171717;
}
.waitlist-inline-form input[type="email"]::placeholder { color: #667085; }
.waitlist-inline-form input[type="email"]:focus { outline: 2px solid var(--ada-cta); outline-offset: 1px; }

.waitlist-submit-btn input[type="submit"] {
	height: 40px;
	padding: 6px 12px;
	background: var(--ada-cta);
	color: var(--ada-cta-ink);
	border: 1px solid var(--ada-cta-border);
	border-radius: 8px;
	box-shadow: 0 1px 5px rgba( 27, 77, 255, 0.16 ),
		inset 0 1px 3px rgba( 255, 255, 255, 0.32 ),
		inset 0 4px 6px rgba( 255, 255, 255, 0.06 );
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.2px;
	white-space: nowrap;
	cursor: pointer;
}
.waitlist-submit-btn input[type="submit"]:hover { background: var(--ada-cta-hover); }

.waitlist-inline-form .wpcf7-not-valid-tip { color: #dc2626; font-size: 12px; margin-top: 6px; }
form.wpcf7-form:has( .waitlist-inline-form ) .wpcf7-response-output {
	margin: 12px 0 0 !important;
	padding: 8px 14px !important;
	border: 1px solid transparent;
	border-radius: 10px;
	font-family: var(--ada-font);
	font-size: 13px;
}
form.wpcf7-form:has( .waitlist-inline-form ) .wpcf7-response-output.wpcf7-validation-errors { border-color: #f4b4b4; background: #fdecec; color: #b91c1c; }
form.wpcf7-form:has( .waitlist-inline-form ) .wpcf7-response-output.wpcf7-mail-sent-ok { border-color: #a7e8c4; background: #eafaf1; color: #15803d; }

/* ---- Ratings (avatars + trusted by) ------------------------------------- */
.ada-hero__ratings {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Avatar cluster (single exported row image) */
.ada-avatars {
	display: block;
	height: 24px;
	width: auto;
	mix-blend-mode: luminosity;
	opacity: 0.8;
}

.ada-hero__trust {
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.006em;
	color: #a4a4a4;
}

/* ---- Bottom (feature row + dashboard showcase) -------------------------- */
.ada-hero__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: 100%;
}

.ada-hero__features {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
}

.ada-feature {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ada-feature__check {
	display: block;
	width: 16px;
	height: 16px;
	flex: none;
}

.ada-feature span:last-child {
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.011em;
	color: var(--ada-footer-ink);
}

.ada-hero__showcase {
	width: 100%;
	max-width: 1224px;
	margin-inline: auto;
}

.ada-hero__showcase img,
.ada-hero__showcase video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 560px) {
	.ada-hero__form { flex-direction: column; width: 100%; }
	.ada-hero__input { width: 100%; }
	.ada-hero__form .ada-cta { width: 100%; justify-content: center; }
	.ada-hero__features { flex-direction: column; align-items: flex-start; gap: 12px; }
}