/* QAIL 2026 — Section-level layouts.
 * One block per section in the order they appear on the homepage.
 * All token-driven; no hardcoded colors. Responsive: desktop first, with
 * @media (max-width: 1023px) for tablet and 767px for mobile.
 */

/* ================================================================
 * NAV — sticky top bar
 * ================================================================ */
.qail-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bg);
	transition:
		background-color var(--dur-state) var(--ease-state),
		border-color     var(--dur-state) var(--ease-state),
		box-shadow       var(--dur-state) var(--ease-state);
}
.qail-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-4);
	gap: var(--space-5);
}
.qail-nav[data-scrolled="true"] {
	background: var(--bg-elevated);
	border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
}
.qail-nav__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--text);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-body-lg);
	letter-spacing: -0.01em;
	text-decoration: none;
}
.qail-nav__brand:hover { text-decoration: none; }
.qail-nav__logo { width: 28px; height: 28px; color: var(--accent); flex-shrink: 0; }

.qail-nav__links {
	display: inline-flex;
	gap: var(--space-6);
	align-items: center;
}
.qail-nav__link {
	color: var(--text-muted);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: color var(--dur-state) var(--ease-state);
}
.qail-nav__link:hover { color: var(--text); text-decoration: none; }
.qail-nav__cta {
	display: inline-flex;
	gap: var(--space-3);
	align-items: center;
}
@media (max-width: 767px) {
	.qail-nav__links { display: none; }
	.qail-nav__cta .qail-btn--secondary { display: none; }
}

/* ================================================================
 * HERO — two-tone display headline + Human/Agent toggle + two-webs demo
 * ================================================================ */
.qail-hero {
	position: relative;
	padding-block: var(--space-9) var(--space-10);
	overflow: hidden;
}
.qail-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-6);
}
/* Code-card and demo cards never inherit the centered text from the hero. */
.qail-hero__demo .qail-code-card,
.qail-hero__demo .qail-product-card { text-align: left; }
.qail-hero__demo .qail-hero__demo-caption { text-align: left; }
.qail-hero__title {
	font-size: var(--fs-display);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.03em;
	line-height: var(--lh-tight);
	max-width: 18ch;
	margin: 0 auto;
}
.qail-hero__title-strong { color: var(--text); }
.qail-hero__title-muted  { color: var(--text-muted); display: inline-block; }
.qail-hero__subhead {
	font-size: var(--fs-body-lg);
	color: var(--text-muted);
	max-width: 60ch;
	line-height: var(--lh-relaxed);
}
.qail-hero__ctas {
	display: inline-flex;
	gap: var(--space-3);
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: var(--space-2);
}
.qail-hero__toggle-row {
	display: inline-flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: center;
	margin-top: var(--space-5);
}

/* Two-webs demo: side-by-side cards, active 100% / inactive 50% */
.qail-hero__demo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
	width: 100%;
	max-width: 980px;
	margin-top: var(--space-7);
}
.qail-hero__demo-side {
	transition:
		opacity   var(--dur-element) var(--ease-state),
		transform var(--dur-element) var(--ease-state);
	opacity: 0.5;
	transform: scale(0.97);
}
.qail-hero__demo-side[data-active="true"] {
	opacity: 1;
	transform: scale(1);
}
.qail-hero__demo-caption {
	margin-top: var(--space-3);
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	color: var(--text-subtle);
	font-style: italic;
	text-align: left;
}

/* Human side product card (real-looking) */
.qail-product-card {
	background: var(--bg-elevated);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	box-shadow: var(--shadow-md);
	text-align: left;
	height: 100%;
}
.qail-product-card__media {
	background: #F4ECE5;
	border-radius: var(--radius-md);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.qail-product-card__media picture,
.qail-product-card__media img {
	width: 100%;
	height: 100%;
	display: block;
}
.qail-product-card__media img {
	object-fit: cover;
	object-position: center;
}
.qail-product-card__title {
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	color: #0A0A0C;
	margin: 0;
}
.qail-product-card__price {
	font-size: var(--fs-body-lg);
	font-weight: var(--fw-medium);
	color: #0A0A0C;
}
.qail-product-card__desc {
	color: #6B6B70;
	line-height: var(--lh-relaxed);
	font-size: var(--fs-small);
}
.qail-product-card__buy {
	align-self: flex-start;
	margin-top: var(--space-2);
	background: #0A0A0C;
	color: #FFFFFF;
	padding: 0.5rem var(--space-5);
	border-radius: var(--radius-pill);
	border: 0;
	font-weight: var(--fw-medium);
	cursor: pointer;
}

/* Agent side code card height matches product card */
.qail-hero__demo .qail-code-card { height: 100%; min-height: 320px; }

@media (max-width: 767px) {
	.qail-hero { padding-block: var(--space-7) var(--space-8); }
	.qail-hero__demo { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ================================================================
 * STATS BANNER — 3 big numbers
 * ================================================================ */
.qail-stats {
	background: var(--bg-sunken);
	transition: background-color var(--dur-theme) var(--ease-state);
}
.qail-stats__heading {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	color: var(--text);
	letter-spacing: -0.01em;
	margin-bottom: var(--space-7);
	max-width: 24ch;
}
.qail-stats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}
@media (max-width: 1023px) { .qail-stats__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px)  { .qail-stats__grid { grid-template-columns: 1fr; } }

/* ================================================================
 * VISITOR TYPES — 4-card grid
 * ================================================================ */
.qail-visitors {}
.qail-visitors__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-7);
	max-width: 60ch;
}
.qail-visitors__heading {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	color: var(--text);
	letter-spacing: -0.01em;
}
.qail-visitors__sub {
	font-size: var(--fs-body-lg);
	color: var(--text-muted);
}
.qail-visitors__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}
@media (max-width: 1023px) { .qail-visitors__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px)  { .qail-visitors__grid { grid-template-columns: 1fr; } }
.qail-visitor-card { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.qail-visitor-card__icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background: var(--accent-soft);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
}
.qail-visitor-card__icon svg { width: 24px; height: 24px; }
.qail-visitor-card__name {
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	color: var(--text);
}
.qail-visitor-card__risk {
	color: var(--text);
	font-weight: var(--fw-medium);
	line-height: var(--lh-relaxed);
}
.qail-visitor-card__def {
	color: var(--text-muted);
	font-size: var(--fs-small);
	line-height: var(--lh-relaxed);
	margin-top: auto;
	padding-top: var(--space-3);
	border-top: 1px solid var(--border);
}

/* ================================================================
 * SCORE — homepage version of the widget
 * ================================================================ */
.qail-score {}
.qail-score__head {
	text-align: center;
	max-width: 60ch;
	margin: 0 auto var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.qail-score__heading {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	color: var(--text);
	letter-spacing: -0.01em;
}
.qail-score__sub {
	font-size: var(--fs-body-lg);
	color: var(--text-muted);
}
.qail-score__widget {
	max-width: 760px;
	margin: 0 auto;
	background: var(--surface-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	transition:
		background-color var(--dur-theme) var(--ease-state),
		border-color     var(--dur-theme) var(--ease-state);
}
.qail-score__form { display: flex; flex-direction: column; gap: var(--space-2); }
.qail-score__error {
	color: var(--danger);
	font-size: var(--fs-small);
	min-height: 1.25em;
	margin: 0;
}
.qail-score__error[data-shown="false"] { visibility: hidden; min-height: 0; }
.qail-score__result {
	display: none;
	grid-template-columns: auto 1fr;
	gap: var(--space-7);
	align-items: center;
	border-top: 1px solid var(--border);
	margin-top: var(--space-4);
	padding-top: var(--space-6);
}
.qail-score__result[data-state="shown"] {
	display: grid;
	animation: qail-score-fade var(--dur-element) var(--ease-entrance);
}
.qail-score__bars {
	display: grid;
	gap: 0;
	width: 100%;
}
@keyframes qail-score-fade {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* Email-capture row that slides in after a score is shown */
.qail-score__capture {
	display: none;
	border-top: 1px solid var(--border);
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	flex-direction: column;
	gap: var(--space-3);
}
.qail-score__capture[data-state="shown"] {
	display: flex;
	animation: qail-score-fade var(--dur-element) var(--ease-entrance);
}
.qail-score__capture-prompt {
	color: var(--text);
	font-size: var(--fs-body-lg);
	font-weight: var(--fw-medium);
	margin: 0;
}
.qail-score__capture-error {
	color: var(--danger);
	font-size: var(--fs-small);
	min-height: 1.25em;
	margin: 0;
}
.qail-score__capture-error[data-shown="false"] { visibility: hidden; min-height: 0; }
.qail-score__capture-success {
	color: var(--success);
	font-size: var(--fs-body);
	margin: 0;
}
.qail-score__capture-success[data-shown="false"] { display: none; }
@media (max-width: 767px) {
	.qail-score__widget { padding: var(--space-5); }
	.qail-score__result { grid-template-columns: 1fr; gap: var(--space-5); justify-items: center; }
}

/* ================================================================
 * CAPABILITY TILES — 3 tiles
 * ================================================================ */
.qail-capabilities {}
.qail-capabilities__head {
	max-width: 60ch;
	margin-bottom: var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.qail-capabilities__heading {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	color: var(--text);
	letter-spacing: -0.01em;
}
.qail-capabilities__sub {
	font-size: var(--fs-body-lg);
	color: var(--text-muted);
}
.qail-capabilities__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
@media (max-width: 1023px) { .qail-capabilities__grid { grid-template-columns: 1fr; } }
.qail-capability {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	background: var(--surface-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	height: 100%;
	transition:
		background-color var(--dur-theme) var(--ease-state),
		border-color     var(--dur-theme) var(--ease-state),
		box-shadow       var(--dur-state) var(--ease-state),
		transform        var(--dur-state) var(--ease-state);
}
.qail-capability:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); }
.qail-capability__icon {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	background: var(--accent-soft);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
}
.qail-capability__icon svg { width: 28px; height: 28px; }
.qail-capability__name {
	font-size: 1.5rem;
	font-weight: var(--fw-semibold);
	color: var(--text);
	letter-spacing: -0.01em;
}
.qail-capability__body {
	color: var(--text-muted);
	line-height: var(--lh-relaxed);
}
.qail-capabilities__closing {
	margin-top: var(--space-7);
	font-size: var(--fs-body-lg);
	color: var(--text);
	font-style: italic;
	text-align: center;
	max-width: 60ch;
	margin-inline: auto;
}

/* ================================================================
 * PRODUCT TABS — "What you ship"
 * ================================================================ */
.qail-product-tabs__head {
	margin-bottom: var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 60ch;
}
.qail-product-tabs__heading {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	color: var(--text);
	letter-spacing: -0.01em;
}
.qail-product-tabs__sub {
	font-size: var(--fs-body-lg);
	color: var(--text-muted);
}
.qail-product-tabs__panel-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-7);
	background: var(--surface-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-7);
}
@media (max-width: 1023px) { .qail-product-tabs__panel-card { grid-template-columns: 1fr; } }
.qail-product-tabs__panel-eyebrow {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--space-3);
}
.qail-product-tabs__panel-headline {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.01em;
	color: var(--text);
	line-height: var(--lh-snug);
	margin-bottom: var(--space-4);
}
.qail-product-tabs__panel-body {
	color: var(--text-muted);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-relaxed);
}
.qail-product-tabs__panel-aside {
	background: var(--bg-sunken);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	color: var(--text-muted);
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
}

/* ================================================================
 * REASONS + VERTICALS
 * ================================================================ */
.qail-reasons__head {
	margin-bottom: var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 60ch;
}
.qail-reasons__heading {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	color: var(--text);
	letter-spacing: -0.01em;
}
.qail-reasons__sub {
	font-size: var(--fs-body-lg);
	color: var(--text-muted);
}
.qail-reasons__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
	margin-bottom: var(--space-7);
}
@media (max-width: 1023px) { .qail-reasons__grid { grid-template-columns: 1fr; } }
.qail-reason {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border-strong);
}
.qail-reason__name {
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	color: var(--text);
}
.qail-reason__body {
	color: var(--text-muted);
	line-height: var(--lh-relaxed);
}
.qail-verticals {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border);
}

/* ================================================================
 * OUTCOMES — 2-col bullet list
 * ================================================================ */
.qail-outcomes {}
.qail-outcomes__heading {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	color: var(--text);
	letter-spacing: -0.01em;
	margin-bottom: var(--space-7);
}
.qail-outcomes__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4) var(--space-7);
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (max-width: 767px) { .qail-outcomes__list { grid-template-columns: 1fr; } }
.qail-outcome {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding-block: var(--space-3);
	border-bottom: 1px solid var(--border);
	color: var(--text);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-relaxed);
}
.qail-outcome__check {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.15rem;
}
.qail-outcome__check svg { width: 14px; height: 14px; }

/* ================================================================
 * TAGLINE TRANSITION
 * ================================================================ */
.qail-tagline {
	text-align: center;
	padding-block: var(--space-10);
	background: var(--bg-sunken);
	transition: background-color var(--dur-theme) var(--ease-state);
}
.qail-tagline__text {
	font-size: var(--fs-display);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.03em;
	line-height: var(--lh-tight);
	color: var(--text);
	max-width: 22ch;
	margin: 0 auto var(--space-4);
}
.qail-tagline__sub {
	font-size: var(--fs-body-lg);
	color: var(--text-muted);
	font-style: italic;
}

/* ================================================================
 * FAQ — uses qail-accordion in narrow container
 * ================================================================ */
.qail-faq__heading {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	color: var(--text);
	letter-spacing: -0.01em;
	text-align: center;
	margin-bottom: var(--space-7);
}

/* ================================================================
 * FINAL CTA
 * ================================================================ */
.qail-final-cta {
	text-align: center;
	padding-block: var(--space-10);
}
.qail-final-cta__heading {
	font-size: var(--fs-h1);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.02em;
	line-height: var(--lh-tight);
	color: var(--text);
	max-width: 22ch;
	margin: 0 auto var(--space-5);
}
.qail-final-cta__buttons {
	display: inline-flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: var(--space-4);
}
.qail-final-cta__sub {
	font-size: var(--fs-body-lg);
	color: var(--text-muted);
	font-style: italic;
}

/* ================================================================
 * FOOTER — 4-column marketing footer
 * ================================================================ */
.qail-footer {
	background: var(--bg-sunken);
	color: var(--text-muted);
	padding-block: var(--space-9) var(--space-6);
	border-top: 1px solid var(--border);
	transition:
		background-color var(--dur-theme) var(--ease-state),
		color            var(--dur-theme) var(--ease-state);
}
.qail-footer__cols {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	gap: var(--space-7);
	align-items: start;
}
@media (max-width: 1023px) { .qail-footer__cols { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-6); } }
@media (max-width: 767px)  { .qail-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }

.qail-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.qail-footer__brand .qail-nav__brand { color: var(--text); }
.qail-footer__tagline {
	font-size: var(--fs-small);
	color: var(--text-subtle);
	line-height: var(--lh-relaxed);
}
.qail-footer__counter {
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	color: var(--text-muted);
	margin-top: var(--space-3);
}
.qail-footer__counter-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--success);
	animation: qail-pulse 2s ease-in-out infinite;
}
@keyframes qail-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}

.qail-footer__col-title {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	color: var(--text-subtle);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--space-4);
	font-weight: var(--fw-regular);
}
.qail-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.qail-footer__link {
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--dur-state) var(--ease-state);
}
.qail-footer__link:hover { color: var(--text); text-decoration: none; }

.qail-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-7);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border);
	font-size: var(--fs-small);
	color: var(--text-subtle);
}
@media (max-width: 767px) {
	.qail-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
 * /product — page-specific layouts
 * ================================================================ */
.qail-product-hero { padding-block: var(--space-8) var(--space-7); }
.qail-product-hero__eyebrow {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--space-3);
}
.qail-product-hero__title {
	font-size: var(--fs-display);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.03em;
	line-height: var(--lh-tight);
	color: var(--text);
	margin-bottom: var(--space-4);
}
.qail-product-hero__subtitle {
	font-size: var(--fs-body-lg);
	color: var(--text-muted);
	line-height: var(--lh-relaxed);
	max-width: 60ch;
}

.qail-product-layer { border-top: 1px solid var(--border); }
.qail-product-layer__head {
	margin-bottom: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.qail-product-layer__eyebrow {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.qail-product-layer__title {
	font-size: var(--fs-h1);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.02em;
	color: var(--text);
	line-height: var(--lh-snug);
	max-width: 22ch;
}
.qail-product-layer__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-7);
	align-items: start;
}
@media (max-width: 1023px) { .qail-product-layer__body { grid-template-columns: 1fr; } }
.qail-product-layer__copy { display: flex; flex-direction: column; gap: var(--space-4); color: var(--text-muted); line-height: var(--lh-relaxed); }
.qail-product-layer__sub {
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	color: var(--text);
	margin-top: var(--space-3);
	margin-bottom: var(--space-2);
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.qail-product-layer__copy p { margin: 0; }
.qail-product-layer__aside {}

.qail-install { background: var(--bg-sunken); transition: background-color var(--dur-theme) var(--ease-state); }
.qail-install__head { text-align: center; margin-bottom: var(--space-6); }
.qail-install__title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	color: var(--text);
	letter-spacing: -0.01em;
	margin-bottom: var(--space-3);
}
.qail-install__sub { color: var(--text-muted); font-size: var(--fs-body-lg); }
.qail-install__snippet { white-space: pre-wrap; word-break: break-all; text-align: left; font-size: var(--fs-body); }
.qail-install__hint { text-align: center; margin-top: var(--space-5); color: var(--text-muted); }

/* ================================================================
 * /about — mission, vision, team, careers
 * ================================================================ */
.qail-about-mission { padding-block: var(--space-9) var(--space-7); }
.qail-about-mission__eyebrow {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--space-3);
}
.qail-about-mission__title {
	font-size: var(--fs-display);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.03em;
	line-height: var(--lh-tight);
	color: var(--text);
	margin-bottom: var(--space-5);
	max-width: 22ch;
}
.qail-about-mission__body {
	font-size: var(--fs-body-lg);
	color: var(--text-muted);
	line-height: var(--lh-relaxed);
	max-width: 60ch;
}

.qail-about-vision { background: var(--bg-sunken); transition: background-color var(--dur-theme) var(--ease-state); }
.qail-about-vision__heading {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	color: var(--text);
	letter-spacing: -0.01em;
	margin-bottom: var(--space-7);
}
.qail-about-vision__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
@media (max-width: 1023px) { .qail-about-vision__grid { grid-template-columns: 1fr; } }
.qail-tenet {
	background: var(--surface-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	height: 100%;
}
.qail-tenet__num {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	color: var(--accent);
	font-weight: var(--fw-medium);
}
.qail-tenet__name {
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	color: var(--text);
	letter-spacing: -0.01em;
}
.qail-tenet__body { color: var(--text-muted); line-height: var(--lh-relaxed); }

.qail-team__heading {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	color: var(--text);
	letter-spacing: -0.01em;
	margin-bottom: var(--space-7);
}
.qail-team__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}
@media (max-width: 1023px) { .qail-team__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .qail-team__grid { grid-template-columns: 1fr; } }
.qail-team-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	background: var(--surface-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	text-align: left;
}
.qail-team-card__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--bg-sunken);
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ff-mono);
	font-weight: var(--fw-medium);
	font-size: var(--fs-body-lg);
	margin-bottom: var(--space-2);
}
.qail-team-card__name { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--text); }
.qail-team-card__role { color: var(--text-muted); font-size: var(--fs-small); }

.qail-careers { text-align: center; padding-block: var(--space-9) var(--space-10); }
.qail-careers__heading {
	font-size: var(--fs-h1);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.02em;
	color: var(--text);
	margin-bottom: var(--space-4);
}
.qail-careers__sub {
	color: var(--text-muted);
	font-size: var(--fs-body-lg);
	max-width: 60ch;
	margin: 0 auto var(--space-5);
	line-height: var(--lh-relaxed);
}
.qail-careers__buttons { display: inline-flex; gap: var(--space-3); }

/* ================================================================
 * /contact — form
 * ================================================================ */
.qail-contact { padding-block: var(--space-9); }
.qail-contact__head { margin-bottom: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); }
.qail-contact__eyebrow {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.qail-contact__title {
	font-size: var(--fs-h1);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.02em;
	color: var(--text);
}
.qail-contact__sub {
	color: var(--text-muted);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-relaxed);
	max-width: 60ch;
}
.qail-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.qail-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}
@media (max-width: 600px) { .qail-form-row { grid-template-columns: 1fr; } }
.qail-form-field { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; }
.qail-form-label {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.qail-textarea {
	min-height: 8rem;
	resize: vertical;
	line-height: var(--lh-relaxed);
}
.qail-form-consent {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	color: var(--text-muted);
	font-size: var(--fs-small);
	line-height: var(--lh-relaxed);
}
.qail-form-consent input { margin-top: 0.25em; }
.qail-contact-form__submit {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}
.qail-contact-form__error {
	color: var(--danger);
	font-size: var(--fs-small);
	margin: 0;
}
.qail-contact-form__error[data-shown="false"] { display: none; }
.qail-contact-form__success {
	color: var(--success);
	font-size: var(--fs-body-lg);
	padding: var(--space-5);
	background: var(--accent-soft);
	border: 1px solid var(--accent);
	border-radius: var(--radius-md);
}
.qail-contact-form__success[data-shown="false"] { display: none; }

/* ================================================================
 * /score — page hero + sub-metric explainer
 * ================================================================ */
/* On the dedicated /score page the page hero already provides the heading,
 * so the score widget's own header is redundant. */
.page-template-page-score-2026 .qail-score__head { display: none; }
.page-template-page-score-2026 .qail-score { padding-top: var(--space-5); }

.qail-score-page-hero { padding-block: var(--space-8) var(--space-6); text-align: center; }
.qail-score-page-hero__eyebrow {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--space-3);
}
.qail-score-page-hero__title {
	font-size: var(--fs-display);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.03em;
	line-height: var(--lh-tight);
	color: var(--text);
	margin-bottom: var(--space-4);
	max-width: 22ch;
	margin-inline: auto;
}
.qail-score-page-hero__sub {
	color: var(--text-muted);
	font-size: var(--fs-body-lg);
	max-width: 60ch;
	margin: 0 auto;
	line-height: var(--lh-relaxed);
}

.qail-score-explain { background: var(--bg-sunken); transition: background-color var(--dur-theme) var(--ease-state); }
.qail-score-explain__head {
	margin-bottom: var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 60ch;
}
.qail-score-explain__heading {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	color: var(--text);
	letter-spacing: -0.01em;
}
.qail-score-explain__sub { color: var(--text-muted); font-size: var(--fs-body-lg); }
.qail-score-explain__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-5);
}
@media (max-width: 768px) { .qail-score-explain__grid { grid-template-columns: 1fr; } }
.qail-score-explain__card {
	background: var(--surface-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	height: 100%;
}
.qail-score-explain__num {
	font-family: var(--ff-mono);
	font-size: var(--fs-mono-sm);
	color: var(--accent);
}
.qail-score-explain__name {
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	color: var(--text);
}
.qail-score-explain__what,
.qail-score-explain__why {
	color: var(--text-muted);
	line-height: var(--lh-relaxed);
}
.qail-score-explain__what code,
.qail-score-explain__why code {
	font-family: var(--ff-mono);
	font-size: 0.9em;
	background: var(--bg-sunken);
	color: var(--text);
	padding: 1px 6px;
	border-radius: var(--radius-sm);
}

/* ================================================================
 * Reveal animations
 * ================================================================ */
[data-qail-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity   var(--dur-section) var(--ease-entrance),
		transform var(--dur-section) var(--ease-entrance);
}
[data-qail-reveal][data-qail-revealed="true"] {
	opacity: 1;
	transform: none;
}