/* Citadel Quiz — matched to Figma frames (desktop 1360px) */
.cq{
	--cq-bg:transparent;              /* dark card comes from the Elementor container */
	--cq-tile:#400000;                /* option / input background */
	--cq-tile-hover:#4d0808;
	--cq-text:#fff;
	--cq-muted:rgba(255,255,255,.7);
	--cq-btn-bg:#fff;
	--cq-btn-text:#000;
	--cq-radius:0;
	--cq-font:var(--e-global-typography-primary-font-family,"Google Sans"),-apple-system,system-ui,"Segoe UI",Arial,sans-serif;

	position:relative;width:100%;margin:0;padding:0;box-sizing:border-box;container-type:inline-size;
	background:var(--cq-bg);color:var(--cq-text);
	font-family:var(--cq-font);text-align:center;
}
.cq *{box-sizing:border-box}

/* steps */
.cq__step{display:none;margin:0;padding:0;border:0;min-width:0}
.cq__step.is-active{display:block;animation:cq-fade .25s ease}
@keyframes cq-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* intro (Banner.svg: 1360×439, #400000, r20, padding 60) */
.cq__intro{background:#400000;border-radius:0;padding:60px clamp(20px,4cqi,60px)}
.cq__intro-title{
	max-width:min(600px,44cqi);margin:0 auto 20px;
	font-weight:700;font-size:clamp(22px,2.8cqi,38px);line-height:1.26;text-transform:uppercase;
}
.cq__intro-text{
	max-width:min(540px,40cqi);margin:0 auto 32px;
	font-size:clamp(16px,1.76cqi,24px);line-height:1.42;font-weight:400;color:var(--cq-text);
}

/* 1/3 */
.cq__counter{
	font-size:clamp(16px,1.76cqi,24px);line-height:1;font-weight:400;
	color:var(--cq-text);margin:0 0 28px;
}

/* title: 38/48 bold uppercase */
.cq__title{
	display:block;width:100%;margin:0 auto 40px;padding:0;
	font-weight:700;font-size:clamp(22px,2.8cqi,38px);line-height:1.26;
	text-transform:uppercase;letter-spacing:0;max-width:1000px;
}

/* options: 3 × 443, gap 16, tile 64 */
.cq__options{
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
	gap:16px;margin:0 0 48px;text-align:left;
}
.cq__option{
	position:relative;display:flex;align-items:center;gap:18px;
	min-height:64px;padding:0 22px;border:0;border-radius:var(--cq-radius);
	background:var(--cq-tile);cursor:pointer;
	font-size:clamp(16px,1.76cqi,24px);line-height:1.2;font-weight:400;color:var(--cq-text);
	transition:background .2s;
}
.cq__option:hover{background:var(--cq-tile-hover)}
.cq__option input{position:absolute;opacity:0;width:0;height:0}
.cq__radio{
	flex:0 0 auto;width:20px;height:20px;border-radius:50%;
	border:2px solid #fff;position:relative;
}
.cq__option input:checked ~ .cq__radio::after{
	content:"";position:absolute;inset:4px;border-radius:50%;background:#fff;
}
.cq__option:has(input:checked){background:var(--cq-tile-hover)}
.cq__option input:focus-visible ~ .cq__radio{outline:2px solid #fff;outline-offset:3px}
.cq__label{flex:1 1 auto;min-width:0}

/* step 3: two 443×64 fields, block 902 wide centered */
.cq__fields{
	display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
	gap:16px;max-width:902px;margin:0 auto 48px;
}
.cq__input{
	width:100%;height:64px;padding:0 22px;border:0;border-radius:var(--cq-radius);
	background:var(--cq-tile);color:#fff;font:inherit;font-weight:400;
	font-size:clamp(16px,1.76cqi,24px);line-height:1;outline:0;
	transition:box-shadow .2s;-webkit-appearance:none;appearance:none;
}
.cq__input::placeholder{color:var(--cq-muted);opacity:1}
.cq__input:focus{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.cq__input.is-invalid{box-shadow:inset 0 0 0 2px #ff6b52}
.cq__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* button: 56 high, white, 18px bold uppercase */
.cq__btn{
	display:inline-flex;align-items:center;justify-content:center;
	min-height:56px;padding:0 33px;border:0;border-radius:var(--cq-radius);
	background:var(--cq-btn-bg);color:var(--cq-btn-text);
	font:inherit;font-weight:700;font-size:18px;line-height:1;letter-spacing:0;
	text-transform:uppercase;cursor:pointer;transition:opacity .2s,transform .2s;
}
.cq__btn:hover{opacity:.9}
.cq__btn:active{transform:translateY(1px)}
.cq__btn[disabled]{opacity:.6;cursor:wait}

/* errors */
.cq__error{margin:-28px 0 20px;font-size:15px;line-height:1.3;color:#ff9c86}
.cq__error:empty{display:none}

/* success */
.cq__done .cq__title{margin:24px auto;text-transform:none;font-size:clamp(20px,2.2cqi,30px)}

/* responsive */
@media (max-width:1024px){
	.cq__options{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* mobile (≤787px) — matched to Figma 390px frames (CTA.svg, Quiz 1-3.svg) */
@media (max-width:787px){
	/* container queries are not needed here (all sizes fixed) and inline-size containment
	   makes Chrome over-size the parent Elementor widget on narrow screens */
	.cq{container-type:normal}

	/* intro card: 358×427, r8, padding 64/16 */
	.cq__intro{padding:64px 12px;border-radius:0}
	.cq__intro-text,.cq__intro .cq__btn{margin-inline:4px}
	.cq__intro .cq__btn{width:calc(100% - 8px)}
	.cq__intro-title{max-width:none;margin-bottom:8px;font-size:28px;line-height:36px}
	.cq__intro-text{max-width:none;margin-bottom:24px;font-size:18px;line-height:25px}

	/* steps */
	.cq__counter{font-size:18px;margin-bottom:20px}
	.cq__title{max-width:none;margin-bottom:32px;font-size:28px;line-height:36px}

	/* option tiles: 48 high, 1 column, gap 12 */
	.cq__options{grid-template-columns:1fr;gap:12px;margin-bottom:24px}
	.cq__option{min-height:48px;padding:0 16px 0 18px;gap:15px;font-size:18px}
	.cq__radio{width:18px;height:18px}
	.cq__option input:checked ~ .cq__radio::after{inset:3px}

	/* contact fields */
	.cq__fields{grid-template-columns:1fr;gap:12px;margin-bottom:24px}
	.cq__input{height:48px;padding:0 17px;font-size:18px}

	/* button: full width, 48 high, 16px bold */
	.cq__btn{width:100%;min-height:48px;padding:0 16px;font-size:16px}

	.cq__error{margin:-12px 0 12px;font-size:14px}
	.cq__done .cq__title{font-size:22px;line-height:1.3}
}