/* AI Readiness Assessment — front-end styles (Ortelius-aligned).
   All brand values are variables on .air — paste exact Ortelius hex/fonts here. */

.air {
	/* ---- Brand tokens (edit these) ---- */
	--air-navy: #0c2138;
	--air-blue: #1e6fe0;
	--air-blue-dark: #1559bf;
	--air-ink: #13202e;
	--air-muted: #5d6b7a;
	--air-bg: #ffffff;
	--air-soft: #f4f7fb;
	--air-line: #e3e9f1;
	--air-radius: 16px;
	--air-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	max-width: 660px;
	margin: 0 auto;
	color: var(--air-ink);
	font-family: var(--air-font);
	font-size: 16px;
	line-height: 1.6;
}

.air *,
.air *::before,
.air *::after { box-sizing: border-box; }

.air-card {
	background: var(--air-bg);
	border: 1px solid var(--air-line);
	border-radius: var(--air-radius);
	box-shadow: 0 18px 50px -30px rgba(12, 33, 56, 0.5);
	overflow: hidden;
}

/* Brand bar + progress */
.air-top {
	background: var(--air-navy);
	color: #fff;
	padding: 0.9rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.air-brand {
	font-weight: 700;
	letter-spacing: 0.14em;
	font-size: 0.72rem;
	text-transform: uppercase;
	opacity: 0.95;
}

.air-step-count {
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	opacity: 0.8;
}

.air-progress {
	height: 4px;
	background: rgba(255, 255, 255, 0.0);
	background: var(--air-line);
}

.air-progress-bar {
	height: 100%;
	width: 0;
	background: var(--air-blue);
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.air-body { padding: 2.25rem 2rem; }

/* Intro */
.air-eyebrow {
	margin: 0 0 0.6rem;
	color: var(--air-blue);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.air-title {
	margin: 0 0 1.1rem;
	font-size: 1.9rem;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--air-navy);
}

.air-intro p {
	margin: 0 0 1rem;
	color: var(--air-muted);
}

/* Question */
.air-q-dim {
	margin: 0 0 0.4rem;
	color: var(--air-blue);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.air-q-text {
	margin: 0 0 1.6rem;
	font-size: 1.3rem;
	line-height: 1.4;
	font-weight: 600;
	color: var(--air-navy);
}

.air-options { display: flex; flex-direction: column; gap: 0.65rem; }

.air-option {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	width: 100%;
	text-align: left;
	padding: 1rem 1.1rem;
	border: 1.5px solid var(--air-line);
	border-radius: 12px;
	background: var(--air-bg);
	color: var(--air-ink);
	font-family: inherit;
	font-size: 1.02rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease, transform 0.06s ease;
}

.air-option:hover { border-color: var(--air-blue); background: var(--air-soft); }
.air-option:active { transform: translateY(1px); }

.air-option.is-selected {
	border-color: var(--air-blue);
	background: var(--air-soft);
	box-shadow: inset 0 0 0 1px var(--air-blue);
}

.air-option-num {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--air-navy);
	color: #fff;
	font-weight: 700;
	font-size: 0.92rem;
}

.air-option.is-selected .air-option-num { background: var(--air-blue); }

/* Nav row */
.air-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 1.6rem;
}

.air-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: none;
	border-radius: 11px;
	padding: 0.85rem 1.6rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.14s ease, transform 0.06s ease;
}

.air-btn-primary { background: var(--air-blue); color: #fff; }
.air-btn-primary:hover { background: var(--air-blue-dark); }
.air-btn-primary:disabled { opacity: 0.65; cursor: default; }

.air-btn-ghost {
	background: transparent;
	color: var(--air-muted);
	padding-left: 0.4rem;
	padding-right: 0.4rem;
}
.air-btn-ghost:hover { color: var(--air-navy); }
.air-btn-ghost[hidden] { display: none; }

/* Email gate */
.air-field { margin: 1.4rem 0 0.4rem; }
.air-field label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
	color: var(--air-navy);
}
.air-field input {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1.5px solid var(--air-line);
	border-radius: 11px;
	font-size: 1.05rem;
	font-family: inherit;
	color: var(--air-ink);
}
.air-field input:focus {
	outline: none;
	border-color: var(--air-blue);
	box-shadow: 0 0 0 3px rgba(30, 111, 224, 0.15);
}

.air-error {
	color: #c0392b;
	font-weight: 600;
	font-size: 0.92rem;
	margin: 0.7rem 0 0;
}
.air-error[hidden] { display: none; }

.air-spinner {
	width: 16px; height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-top-color: #fff;
	border-radius: 50%;
	animation: air-spin 0.7s linear infinite;
}
.air-spinner[hidden] { display: none; }
@keyframes air-spin { to { transform: rotate(360deg); } }

/* Result */
.air-result-head { text-align: center; padding: 0.5rem 0 0.5rem; }
.air-gauge {
	font-size: 3.6rem;
	font-weight: 800;
	line-height: 1;
	color: var(--air-navy);
}
.air-gauge small { font-size: 1.2rem; color: var(--air-muted); font-weight: 600; }
.air-band {
	display: inline-block;
	margin-top: 0.8rem;
	padding: 0.35rem 1rem;
	border-radius: 999px;
	color: #fff;
	font-weight: 700;
}
.air-band-text {
	max-width: 520px;
	margin: 1rem auto 0;
	color: var(--air-muted);
	text-align: center;
}
.air-emailed {
	margin-top: 0.6rem;
	text-align: center;
	font-size: 0.85rem;
	color: var(--air-muted);
}

.air-bars { margin-top: 2rem; }
.air-bars h3 {
	margin: 0 0 1rem;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--air-muted);
}
.air-bar-row { margin-bottom: 0.95rem; }
.air-bar-head {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: var(--air-navy);
}
.air-bar-head span:last-child { color: var(--air-muted); font-weight: 600; white-space: nowrap; }
.air-bar-track { height: 8px; background: var(--air-line); border-radius: 999px; overflow: hidden; }
.air-bar-fill { height: 100%; width: 0; border-radius: 999px; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); }

@media (max-width: 560px) {
	.air-body { padding: 1.6rem 1.25rem; }
	.air-title { font-size: 1.55rem; }
	.air-q-text { font-size: 1.15rem; }
	.air-gauge { font-size: 3rem; }
}