/*
 * Alternate AnyDB page styles
 *
 * Add `adb-brand-page` to a page wrapper, then use the prefixed components
 * below. Page-specific layouts should remain in their own stylesheets.
 */

:root {
	--adb-ink: #10243d;
	--adb-muted: #5e6e7d;
	--adb-green: #087a39;
	--adb-pale: #e5f4ea;
	--adb-lime: #b8dc45;
	--adb-line: #dce5e5;
	--adb-soft: #f5f6f8;
	--adb-navy: #122135;
	--adb-blue: #dff3fa;
	--adb-purple: #e8def8;
	--adb-orange: #fbe9d8;
	--adb-yellow: #fbf3d8;
	--adb-section-white: #fff;
	--adb-section-subtle: #fbfcfc;
	--adb-section-whisper: #fcfdfd;
	--adb-section-soft: #f5f6f8;
	--adb-section-muted: #f6f7f8;
	--adb-section-green: #f7f8f6;
	--adb-section-dark: #122135;
	--adb-page-width: 1320px;
	--adb-content-width: 1180px;
	--adb-radius: 10px;
}

.adb-brand-page {
	/* Compatibility aliases used by the new home and pricing pages. */
	--ink: var(--adb-ink);
	--muted: var(--adb-muted);
	--green: var(--adb-green);
	--pale: var(--adb-pale);
	--lime: var(--adb-lime);
	--line: var(--adb-line);
	--soft: var(--adb-soft);
	--navy: var(--adb-navy);
	--blue: var(--adb-blue);
	--purple: var(--adb-purple);
	--orange: var(--adb-orange);
	--yellow: var(--adb-yellow);
	--page-width: var(--adb-page-width);
	background: #fff;
	color: var(--adb-ink);
	font: 16px/1.55 Inter, Arial, sans-serif;
}

.adb-brand-page *,
.adb-brand-page *::before,
.adb-brand-page *::after {
	box-sizing: border-box;
}

.adb-brand-shell {
	width: min(var(--adb-content-width), calc(100% - 40px));
	margin-inline: auto;
}

.adb-brand-shell--wide {
	width: min(var(--adb-page-width), calc(100% - 40px));
}

.adb-brand-section {
	padding-block: clamp(64px, 8vw, 105px);
}

.adb-brand-section--soft {
	background: var(--adb-section-soft);
}

.adb-brand-section--white {
	background: var(--adb-section-white);
}

.adb-brand-section--subtle {
	background: var(--adb-section-subtle);
}

.adb-brand-section--whisper {
	background: var(--adb-section-whisper);
}

.adb-brand-section--muted {
	background: var(--adb-section-muted);
}

.adb-brand-section--green {
	background: var(--adb-section-green);
}

.adb-brand-section--dark {
	background: var(--adb-section-dark);
	color: #fff;
}

.adb-brand-section--lined {
	border-top: 1px solid var(--adb-line);
}

.adb-brand-section-head {
	max-width: 780px;
	margin-bottom: clamp(32px, 4vw, 50px);
}

.adb-brand-section-head h2 {
	margin: 0 0 14px;
	font-family: Lexend, Inter, Arial, sans-serif;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.08;
	letter-spacing: -.04em;
}

/* Primary section-heading treatment used by alternate-layout pages. */
.adb-brand-page .adb-alt-section-heading {
	margin: 0 0 14px;
	font-family: Lexend, Inter, Arial, sans-serif;
	font-size: clamp(34px, 4vw, 52px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.04em;
}

.adb-brand-page .adb-alt-section-heading span {
	color: #5b687b;
	font-weight: 450;
}

.adb-brand-page .adb-alt-section-heading--dark span {
	color: #b9c7d4;
}

.adb-brand-eyebrow {
	margin: 0 0 14px;
	color: var(--adb-green);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.adb-brand-lead {
	max-width: 760px;
	margin: 0;
	color: var(--adb-muted);
	font-size: 18px;
	line-height: 1.65;
}

.adb-brand-button {
	display: inline-flex;
	min-height: 40px;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	border: 1px solid var(--adb-ink);
	border-radius: 6px;
	background: #fff;
	color: var(--adb-ink);
	font-weight: 750;
	text-decoration: none;
}

.adb-brand-button:hover,
.adb-brand-button:focus-visible {
	background: var(--adb-ink);
	color: #fff;
}

.adb-brand-button--primary {
	border-color: var(--adb-green);
	background: var(--adb-green);
	color: #fff;
}

/* Shared CTA treatment based on the Start Free Plan button in the navigation. */
.adb-brand-page a.adb-alt-cta {
	display: inline-flex;
	min-width: 150px;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border: 1px solid var(--adb-green);
	border-radius: 4px;
	background: var(--adb-green);
	color: #fff !important;
	font-family: Lexend, Inter, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.adb-brand-page a.adb-alt-cta:hover,
.adb-brand-page a.adb-alt-cta:focus-visible {
	border-color: #6cb401;
	background: #6cb401;
	color: #fff !important;
}

.adb-brand-page a.adb-alt-cta--secondary {
	border-color: var(--adb-ink);
	background: #fff;
	color: var(--adb-ink) !important;
}

.adb-brand-page a.adb-alt-cta--secondary:hover,
.adb-brand-page a.adb-alt-cta--secondary:focus-visible {
	border-color: var(--adb-ink);
	background: var(--adb-ink);
	color: #fff !important;
}

.adb-brand-page a.adb-alt-cta--dark {
	border-color: #0b1d32;
	background: #0b1d32;
}

.adb-brand-page a.adb-alt-cta--dark:hover,
.adb-brand-page a.adb-alt-cta--dark:focus-visible {
	border-color: #172f4b;
	background: #172f4b;
}

.adb-brand-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* Reusable pastel cards from the home and pricing page visual language. */
.adb-alt-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.adb-alt-card {
	padding: 30px;
	border: 1px solid rgba(16, 36, 61, .12);
	border-radius: 12px;
	background: #fff;
	color: var(--adb-ink);
}

.adb-alt-card--blue { background: var(--adb-blue); }
.adb-alt-card--purple { background: var(--adb-purple); }
.adb-alt-card--orange { background: var(--adb-orange); }
.adb-alt-card--yellow { background: var(--adb-yellow); }
.adb-alt-card--green { background: #dff3e8; }
.adb-alt-card--pink { background: #f4e1eb; }

/* Exact supporting-feature card used by the homepage AI section. */
.adb-alt-feature-card {
	display: grid;
	min-height: 112px;
	align-content: center;
	padding: 19px 20px;
	border-radius: 12px;
	background: #f4f3f1;
}

.adb-alt-feature-card h3,
.adb-alt-feature-card strong {
	display: block;
	margin: 0 0 8px;
	color: #111;
	font-size: 16px;
	line-height: 1.3;
}

.adb-alt-feature-card p,
.adb-alt-feature-card > span {
	margin: 0;
	color: #4f4f4d;
	font-size: 14px;
	line-height: 1.5;
}

.adb-brand-card {
	padding: 28px;
	border: 1px solid var(--adb-line);
	border-radius: var(--adb-radius);
	background: #fff;
}

.adb-brand-card h3 {
	margin: 0 0 10px;
	font-family: Lexend, Inter, Arial, sans-serif;
	font-size: 18px;
}

.adb-brand-card p {
	margin: 0;
	color: var(--adb-muted);
	font-size: 14px;
	line-height: 1.6;
}

.adb-brand-card--blue { background: var(--adb-blue); }
.adb-brand-card--purple { background: var(--adb-purple); }
.adb-brand-card--orange { background: var(--adb-orange); }
.adb-brand-card--yellow { background: var(--adb-yellow); }

@media (max-width: 800px) {
	.adb-brand-card-grid,
	.adb-alt-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.adb-brand-shell,
	.adb-brand-shell--wide { width: calc(100% - 28px); }
}