/* ═══════════════════════════════════════════════════════════════════════════
   CURRICULUM AUDIT TOOL
   ═══════════════════════════════════════════════════════════════════════════ */

/*
   COLOUR TOKENS (Option A — Dark Forest Green + Purple + Gold)
   --ca-bg:        #253d47  develop purple — backgrounds, bars, panels
   --ca-accent:    #253d47  slate purple — progress fill, button, active indicators
   --ca-accent-lt: #c6a54e  gold — text labels on dark backgrounds
*/

.ca-tool {
	font-family: var(--ci-font-primary);

	/* One set of numbers for the question/answer swap, so the two halves of
	   it cannot drift apart. The lead-out is quicker than the lead-in, and the
	   small delay on each incoming element is what stops the two crossing over
	   each other mid-flight. Shared with the Ofsted readiness audit, which
	   uses the same swap. */
	--ca-out: 200ms;
	--ca-in: 260ms;
	--ca-stagger: 110ms;
	--ca-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Override site-wide primary button within the audit tool — use Engage orange */
.ca-tool .ci-btn--primary {
	background-color: #f99d31;
	border: none;
	box-shadow: none;
	outline: none;
}

.ca-tool .ci-btn--primary:hover {
	background-color: #e08920;
	border: none;
	box-shadow: none;
}

.ca-tool .is-hidden {
	display: none !important;
}

/* ── Screens ── */
.ca-screen {
	display: none;
}

.ca-screen.is-active {
	display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTRO SCREEN — centered hero
   ═══════════════════════════════════════════════════════════════════════════ */

.ca-intro {
	background-color: #253d47;
	min-height: calc(100vh - 72px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5rem max(3rem, calc((100vw - 1280px) / 2 + 3rem));
}

.ca-intro__inner {
	max-width: 640px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ca-intro__label {
	/* Exactly 2pt above .ca-intro__body rather than a fixed number, so the two
	   keep their relationship — --ci-text-body drops from 20px to 17px on
	   mobile, and this follows it. */
	font-size: calc(var(--ci-text-body) + 2pt);
	font-weight: 700;
	color: #c6a54e;
	margin: 0 0 1.25rem;
	line-height: 1.3;
}

.ca-intro__heading {
	font-size: clamp(2.5rem, 4vw, 4rem);
	font-weight: 700;
	color: #ffffff;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 1.5rem;
}

.ca-intro__body {
	font-size: var(--ci-text-body);
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.75;
	margin: 0 0 2.5rem;
	max-width: 540px;
}

/* ── Resume card ── */
.ca-resume[hidden] {
	display: none !important;
}

.ca-resume {
	width: 100%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.ca-resume__heading {
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: #ffffff;
	margin: 0;
	line-height: 1.3;
}

.ca-resume__progress {
	font-size: var(--ci-text-utility);
	font-weight: 600;
	color: #c6a54e;
	margin: 0 0 1rem;
	line-height: 1.4;
}

.ca-resume__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.ca-fresh-btn {
	background: none;
	border: none;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	padding: 0;
	text-decoration: none;
	transition: color 0.15s ease;
}

.ca-fresh-btn:hover {
	color: rgba(255, 255, 255, 0.75);
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUESTION SCREEN — top strip + canvas
   ═══════════════════════════════════════════════════════════════════════════ */

.ca-q-wrap {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 72px);
}

/* Progress strip */
.ca-q-bar {
	background-color: #253d47;
	height: 64px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: 0 max(3rem, calc((100vw - 1280px) / 2 + 3rem));
}

.ca-q-bar__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
}

.ca-q-bar__step {
	font-size: var(--ci-text-utility);
	font-weight: 600;
	color: #f99d31;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ── Progress bar ── */
.ca-progress__bar {
	flex: 1;
	height: 4px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 9999px;
	overflow: clip;
}

.ca-progress__fill {
	height: 100%;
	background: #f99d31;
	border-radius: 9999px;
	width: 10%;
	transition: width 0.35s ease;
}

.ca-q-bar__category {
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: #c6a54e;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ── Autosave indicator ── */
.ca-autosave {
	font-size: var(--ci-text-utility);
	font-weight: 600;
	color: #c6a54e;
	white-space: nowrap;
	flex-shrink: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ca-autosave.is-visible {
	opacity: 1;
}

/* Question canvas */
.ca-q-content {
	position: relative;
	background-color: #ffffff;
	flex: 1;
	display: flex;
	align-items: flex-start;
	padding: 5rem max(3rem, calc((100vw - 1280px) / 2 + 3rem));
}

.ca-q-inner {
	width: 100%;
	max-width: 640px;
	display: flex;
	flex-direction: column;
}

.ca-question__text {
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #253d47;
	line-height: 1.35;
	margin: 0 0 2.5rem;
	max-width: 640px;
	letter-spacing: -0.01em;
}

/* ── Answer buttons ── */
.ca-question__answers {
	display: flex;
	gap: 1rem;
	margin-bottom: 2rem;
	max-width: 480px;
}

.ca-answer-btn {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1.1rem 1.5rem;
	border: 1.5px solid #d3d3d3;
	border-radius: 10px;
	background: #fafafa;
	font-family: var(--ci-font-primary);
	font-size: 1rem;
	font-weight: 400;
	color: #444444;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	text-align: left;
}

.ca-answer-btn--yes {
	color: #2ecc71;
}

.ca-answer-btn--no {
	color: #ff5252;
}

.ca-answer-btn--yes:hover {
	border-color: #2ecc71;
	background-color: #ffffff;
}

.ca-answer-btn--no:hover {
	border-color: #ff5252;
	background-color: #ffffff;
}

.ca-answer-btn__indicator {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid #d3d3d3;
	flex-shrink: 0;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ca-answer-btn__label {
	font-weight: 600;
}

/* Selected states */
.ca-answer-btn.is-selected.ca-answer-btn--yes {
	border-color: #2ecc71;
	background-color: rgba(46, 204, 113, 0.05);
}

.ca-answer-btn.is-selected.ca-answer-btn--yes .ca-answer-btn__indicator {
	background-color: #2ecc71;
	border-color: #2ecc71;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 10px;
}

.ca-answer-btn.is-selected.ca-answer-btn--no {
	border-color: #b91c1c;
	background-color: rgba(185, 28, 28, 0.03);
}

.ca-answer-btn.is-selected.ca-answer-btn--no .ca-answer-btn__indicator {
	background-color: #b91c1c;
	border-color: #b91c1c;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 10px;
}

/* ── Question nav ── */
.ca-question__nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.ca-btn-prev {
	background: none;
	border: none;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 400;
	color: #aaa;
	cursor: pointer;
	padding: 0;
	transition: color 0.15s;
	flex-shrink: 0;
}

.ca-btn-prev:hover {
	color: #253d47;
}

.ca-btn-next {
	background-color: #f99d31;
	color: #ffffff;
	border: none;
	border-radius: 9999px;
	padding: 1.1rem 1.5rem;
	font-family: var(--ci-font-primary);
	font-size: 1rem;
	font-weight: 400;
	cursor: pointer;
	transition: background-color 0.18s ease;
	width: calc((480px - 1rem) / 2);
	text-align: center;
}

.ca-btn-next:hover:not(:disabled) {
	background-color: #e08920;
}

.ca-btn-next:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANSWER PANEL — split: context left, workspace right
   ═══════════════════════════════════════════════════════════════════════════ */

.ca-overlay[hidden] {
	display: none;
}

.ca-overlay {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 40fr 60fr;
	font-family: var(--ci-font-primary);
	opacity: 0;
	transform: translateY(20px);
	/* The exit lives here now. It used to be written onto the element as an
	   inline style by hideOverlay() and then wiped again, which meant the real
	   exit duration was invisible from the stylesheet. */
	transition: opacity var(--ca-out) var(--ca-ease),
	            transform var(--ca-out) var(--ca-ease);
	transition-delay: 0ms;
}

/* It covers the question at full size the whole time, so while it is faded
   out it would otherwise sit on top and swallow clicks on the answers. */
.ca-overlay:not(.is-active) {
	pointer-events: none;
}

.ca-overlay.is-active {
	opacity: 1;
	transform: translateY(0);
	transition: opacity var(--ca-in) var(--ca-ease),
	            transform var(--ca-in) var(--ca-ease);
	transition-delay: var(--ca-stagger);
}

/*
	Question content crosses with the answer panel.

	A transition-delay declared here applies when transitioning towards this
	state, and the one on .is-answered applies going the other way. So the
	question waits for the overlay to clear before it returns, and leaves
	immediately when it is asked to — without either timing living in JS.
*/
.ca-q-inner {
	transition: opacity var(--ca-in) var(--ca-ease),
	            transform var(--ca-in) var(--ca-ease);
	transition-delay: var(--ca-stagger);
}

.ca-q-content.is-answered .ca-q-inner {
	opacity: 0;
	transform: translateY(-10px);
	/* An answer button on its way out must not take a second answer. */
	pointer-events: none;
	transition-delay: 0ms;
}

/* ── Left panel: diagnostic context ── */
.ca-overlay__context {
	background-color: #253d47;
	overflow-y: auto;
	padding: 3.5rem 3rem 3.5rem max(3rem, calc((100vw - 1280px) / 2 + 3rem));
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ca-overlay__context-inner {
	max-width: none;
}

.ca-overlay__answer-text {
	font-size: var(--ci-text-h2);
	font-weight: 700;
	line-height: 1.35;
	color: #ffffff;
	margin: 0 0 2.5rem;
}

.ca-overlay__answer-text--yes {
	color: #2ecc71;
}

.ca-overlay__answer-text--no {
	color: #ff5252;
}

/* ── Think bubble ── */
.ca-overlay__message {
	position: relative;
	isolation: isolate;      /* keeps ::after z-index inside this stacking context */
	background: transparent;
	color: #333333;
	font-size: var(--ci-text-body);
	line-height: 1.7;
	padding: 1.4rem 1.75rem 1.6rem;
	margin: 4.5rem 0 1.5rem;
}

/* Cloud shape — extends 18px beyond element edges so bumps protrude outward */
.ca-overlay__message::after {
	content: '';
	position: absolute;
	inset: -18px;
	background-image: var(--ca-cloud-bg, none);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: -1;
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.14));
}

/* Three graduated dots — 13px → 8px → 4px — stacked above the cloud */
.ca-overlay__message::before {
	content: '';
	position: absolute;
	width: 13px;
	height: 13px;
	background: white;
	border-radius: 50%;
	top: -38px;
	left: 26px;
	box-shadow:
		5px -18px 0 -2px white,
		9px -32px 0 -4px white;
}

.ca-overlay__links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ca-overlay__link {
	display: block;
	padding: 0.75rem 1.25rem;
	border-radius: 9999px;
	border: 1.5px solid rgba(255, 255, 255, 0.25);
	font-size: var(--ci-text-utility);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.ca-overlay__link:hover {
	border-color: rgba(255, 255, 255, 0.55);
	background-color: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

/* ── Right panel: audit workspace ── */
.ca-overlay__workspace {
	background-color: #f8f7f5;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 3.5rem max(3rem, calc((100vw - 1280px) / 2 + 3rem)) 3.5rem 3rem;
}

.ca-overlay__workspace-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	max-width: none;
}

.ca-workspace__title {
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: #222222;
	margin: 0 0 1.25rem;
}

/* ── Three-field layout ── */
.ca-workspace__fields {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	flex: 1;
}

.ca-workspace__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.ca-workspace__field-label {
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: #444444;
}

.ca-workspace__textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1.5px solid #e0e0e0;
	border-radius: 8px;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 400;
	color: #333333;
	line-height: 1.6;
	resize: none;
	box-sizing: border-box;
	background-color: #ffffff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ca-workspace__textarea:hover {
	border-color: #a8afb2;
}

.ca-workspace__textarea:focus {
	outline: none;
	border-color: #253d47;
	box-shadow: 0 0 0 3px rgba(37, 61, 71, 0.08);
}

.ca-workspace__textarea::placeholder {
	color: #c0bdb8;
}

.ca-workspace__charcount {
	font-size: var(--ci-text-utility);
	color: #aaa;
	font-variant-numeric: tabular-nums;
	text-align: right;
	transition: color 0.15s ease;
}

.ca-workspace__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 1.25rem;
}

.ca-workspace__nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.ca-overlay__back-btn {
	background: none;
	border: none;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 400;
	color: #aaa;
	cursor: pointer;
	padding: 0;
	transition: color 0.15s ease;
}

.ca-overlay__back-btn:hover {
	color: #253d47;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREVIEW + EMAIL GATE — two-panel
   ═══════════════════════════════════════════════════════════════════════════ */

.ca-preview-wrap {
	display: grid;
	grid-template-columns: 48fr 52fr;
	min-height: calc(100vh - 72px);
}

.ca-preview-left {
	background-color: #253d47;
	padding: 4rem max(2rem, calc((100vw - 1280px) / 2 + 2rem)) 4rem max(3rem, calc((100vw - 1280px) / 2 + 3rem));
	padding-right: 4rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ca-preview-left__heading {
	font-size: clamp(1.75rem, 2.5vw, 2.5rem);
	font-weight: 700;
	color: #c6a54e;
	letter-spacing: -0.02em;
	margin: 0 0 0.5rem;
	line-height: 1.15;
}

.ca-preview-left__eyebrow {
	/* Matches .ca-intro__label: 2pt above the body token, so both screens'
	   labels sit at the same size and keep that relationship on mobile. */
	font-size: calc(var(--ci-text-body) + 2pt);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}

/* Score display — progress wheel */
.ca-score {
	margin-top: 2.5rem;
	text-align: left;
}

.ca-score__wheel-wrap {
	display: block;
	width: 200px;
	height: 200px;
	margin: 2rem 0 1.25rem;
	filter: blur(8px);
	user-select: none;
	pointer-events: none;
}

.ca-score__svg {
	display: block;
	width: 200px;
	height: 200px;
}

.ca-preview-left .ca-score__hint {
	font-size: 1rem;
	color: #ffffff;
	line-height: 1.5;
	max-width: 100%;
	margin: 0;
	text-align: left;
}

/* Back button on preview left panel */
.ca-preview__back-btn {
	background: none;
	border: none;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	padding: 0;
	margin-top: 2rem;
	align-self: flex-start;
	transition: color 0.15s ease;
}

.ca-preview__back-btn:hover {
	color: rgba(255, 255, 255, 0.8);
}

/* Right panel — form */
.ca-preview-right {
	background-color: #ffffff;
	padding: 4rem max(3rem, calc((100vw - 1280px) / 2 + 3rem)) 4rem 4rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ca-gate__heading {
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #253d47;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem;
	line-height: 1.2;
}

.ca-gate__body {
	font-size: var(--ci-text-body);
	color: #555;
	line-height: 1.7;
	margin: 0 0 2rem;
	max-width: 420px;
}

/* Form fields */
.ca-gate-form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	max-width: 440px;
}

.ca-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.ca-field__label {
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: #aaa;
}

.ca-field__input {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1.5px solid #d3d3d3;
	border-radius: 4px;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: #253d47;
	box-sizing: border-box;
	background-color: #fafafa;
	transition: border-color 0.15s ease;
}

.ca-field__input:hover {
	border-color: #a8afb2;
}

.ca-field__input:focus {
	outline: none;
	border-color: #253d47;
	background-color: #fff;
}

.ca-field__input::placeholder {
	color: #bbb;
}

.ca-gate-form__submit {
	align-self: flex-start;
}

.ca-gate-form__error {
	font-size: var(--ci-text-utility);
	color: #b91c1c;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THANK YOU SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */

.ca-thankyou {
	background-color: #253d47;
	min-height: calc(100vh - 72px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5rem max(3rem, calc((100vw - 1280px) / 2 + 3rem));
}

.ca-thankyou__inner {
	max-width: 640px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ca-thankyou__eyebrow {
	font-size: 1.1rem;
	font-weight: 700;
	color: #c6a54e;
	margin: 0 0 1rem;
}

.ca-thankyou__heading {
	font-size: clamp(2.5rem, 4vw, 4rem);
	font-weight: 700;
	color: #ffffff;
	letter-spacing: -0.02em;
	margin: 0 0 1.5rem;
	line-height: 1.1;
}

.ca-thankyou__body {
	font-size: var(--ci-text-body);
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.75;
	margin: 0 0 0.75rem;
	max-width: 520px;
}

.ca-thankyou__sub {
	font-size: var(--ci-text-body);
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.7;
	margin: 0 0 2rem;
	max-width: 520px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

	/* Intro */
	.ca-intro {
		min-height: auto;
		padding: 3rem 1.5rem;
	}

	/* Question */
	.ca-q-bar {
		height: auto;
		padding: 0.85rem 1.5rem;
		flex-wrap: wrap;
		gap: 0.6rem;
	}

	.ca-q-bar__inner {
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
	}

	.ca-q-bar__category {
		order: -1;
	}

	.ca-q-content {
		padding: 2rem 1.5rem 3rem;
		align-items: flex-start;
	}

	.ca-q-inner {
		position: relative;
		padding-top: 2rem;
	}

	.ca-question__answers {
		max-width: 100%;
		flex-direction: column;
	}

	.ca-question__nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}

	.ca-btn-prev {
		position: absolute;
		top: 4px;
		left: 0;
	}

	.ca-btn-next {
		width: 100%;
		text-align: center;
		justify-content: center;
	}

	.ca-overlay,
	.ca-overlay.is-active {
		position: relative;
		inset: auto;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		overflow-y: visible;
		/* No slide once the panel is in flow — a transform here drags the
		   whole document. The opacity transition stays, both because the fade
		   still reads and because the script waits on its transitionend to
		   know when the overlay is safe to hide. */
		transform: none;
	}

	.ca-q-content.is-answered .ca-q-inner {
		display: none;
	}

	.ca-q-content.is-answered {
		padding: 0;
	}

	.ca-overlay__context {
		padding: 2rem 1.5rem 1.5rem;
	}

	.ca-overlay__workspace {
		padding: 1.5rem 1.5rem 2.5rem;
		overflow-y: visible;
	}

	.ca-workspace__footer {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}

	.ca-workspace__nav {
		justify-content: space-between;
	}

	.ca-overlay__next-btn {
		flex: 1;
		text-align: center;
		justify-content: center;
	}

	/* Preview */
	.ca-preview-wrap {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.ca-preview-left {
		padding: 3rem 1.5rem 2rem;
	}

	.ca-preview-right {
		padding: 2rem 1.5rem 3rem;
	}

	.ca-gate-form {
		max-width: 100%;
	}

	.ca-gate-form__submit {
		align-self: stretch;
		text-align: center;
		justify-content: center;
	}

	/* Thank you */
	.ca-thankyou {
		padding: 3rem 1.5rem;
		min-height: auto;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION

   Near-zero rather than none. The script waits on transitionend to know when
   the overlay has finished leaving, and a transition removed outright never
   fires one — so it would fall back to a timeout and feel slower here than it
   does for everyone else. 1ms still fires the event.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

	.ca-tool {
		--ca-out: 1ms;
		--ca-in: 1ms;
		--ca-stagger: 0ms;
	}

	.ca-q-inner,
	.ca-q-content.is-answered .ca-q-inner,
	.ca-overlay,
	.ca-overlay.is-active {
		transform: none;
	}

	.ca-progress__fill {
		transition: none;
	}
}