/* =========================================================================
   Child Age Calculator
   Everything is scoped under .cac so nothing leaks into the theme, and the
   theme cannot easily leak in either. Colours come from CSS variables set
   inline on the wrapper by the shortcode.
   ========================================================================= */

.cac {
	/* Light palette. The dark block further down overrides these. */
	--cac-surface: #ffffff;
	--cac-surface-2: #f6f8fb;
	--cac-surface-3: #eef1f6;
	--cac-text: #131722;
	--cac-muted: #5b6474;
	--cac-line: rgba(15, 22, 36, 0.10);
	--cac-line-2: rgba(15, 22, 36, 0.055);
	--cac-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -12px rgba(16, 24, 40, 0.16);
	--cac-shadow-lg: 0 2px 4px rgba(16, 24, 40, 0.04), 0 30px 64px -22px rgba(16, 24, 40, 0.24);
	--cac-ok: #16a34a;
	--cac-warn: #d97706;

	--cac-a: #4a6cf7;
	--cac-a2: #12c2a0;
	--cac-a-rgb: 74, 108, 247;
	--cac-a2-rgb: 18, 194, 160;
	--cac-r: 20px;
	--cac-scale: 1;

	/* Backdrop for the whole widget. Transparent in light so it blends with
	   the page, a solid dark surface in dark mode so the hero text is never
	   light on light when the surrounding page is light. */
	--cac-page: transparent;

	--cac-grad: linear-gradient(118deg, var(--cac-a), var(--cac-a2));

	box-sizing: border-box;
	position: relative;
	max-width: 1080px;
	margin-inline: auto;
	color: var(--cac-text);
	font-size: calc(16px * var(--cac-scale));
	line-height: 1.6;
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
	text-align: left;

	background: var(--cac-page);
	border-radius: calc(var(--cac-r) + 14px);
	padding: clamp(12px, 2vw, 24px);

	/* Keeps decorative layers from ever pushing the page sideways. Uses clip
	   rather than hidden so no scroll container is created. */
	overflow-x: clip;
}

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

/* The reset is wrapped in :where() so it carries no specificity of its own.
   Without that it would sit at 0-1-1 and quietly beat every single class
   component rule below, taking the spacing and button styling with it. */

.cac :where(p, h2, h3, h4, ul, ol, li, figure, dl, dd, fieldset, legend) {
	margin: 0;
	padding: 0;
	border: 0;
}

.cac :where(ul, ol) {
	list-style: none;
}

.cac :where(button) {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	margin: 0;
	cursor: pointer;
	text-align: left;
}

.cac :where(input) {
	font: inherit;
	color: inherit;
}

.cac :where(img, canvas, svg) {
	max-width: 100%;
	display: block;
}

/* Every inline icon gets a size up front.
   An SVG that carries a viewBox but no width or height has no intrinsic size,
   so if a component rule ever misses one it stretches to fill its container and
   swallows the card. This default means a missing rule costs a slightly wrong
   icon size rather than a broken layout. Both selectors sit at 0-1-0 so every
   component rule further down still wins, and the artwork override comes second
   so it beats the icon default. */
.cac :where(svg) {
	width: 18px;
	height: 18px;
	flex: none;
}

.cac :where(.cac-art) {
	width: 100%;
	height: auto;
	flex: initial;
}

/* -------------------------------------------------------------------------
   Background aura
   ------------------------------------------------------------------------- */

.cac-aura {
	position: absolute;
	inset: 0 0 auto;
	height: 440px;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(42% 46% at 16% 10%, rgba(var(--cac-a-rgb), 0.20), transparent 70%),
		radial-gradient(38% 44% at 84% 2%, rgba(var(--cac-a2-rgb), 0.18), transparent 72%),
		radial-gradient(30% 38% at 52% 38%, rgba(var(--cac-a-rgb), 0.09), transparent 75%);
	filter: blur(8px);
	opacity: 0.9;
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.cac-hero {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 8px 12px 26px;
}

.cac-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--cac-muted);
	background: var(--cac-surface);
	border: 1px solid var(--cac-line);
	border-radius: 999px;
	padding: 6px 14px 6px 11px;
	box-shadow: var(--cac-shadow);
}

.cac-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cac-grad);
	box-shadow: 0 0 0 3px rgba(var(--cac-a-rgb), 0.18);
}

.cac-hero__title {
	margin-top: 16px;
	font-size: clamp(1.85em, 5vw, 2.9em);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -0.025em;
}

.cac-hero__sub {
	margin-top: 12px;
	margin-inline: auto;
	max-width: 46ch;
	color: var(--cac-muted);
	font-size: 1.02em;
}

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */

.cac-app {
	position: relative;
	z-index: 1;
}

.cac-card {
	background: var(--cac-surface);
	border: 1px solid var(--cac-line);
	border-radius: var(--cac-r);
	box-shadow: var(--cac-shadow-lg);
	padding: clamp(18px, 3.4vw, 30px);
}

.cac-out:not(:empty) {
	margin-top: 18px;
	display: grid;
	gap: 18px;
}

.cac-noscript {
	margin-top: 18px;
	color: var(--cac-muted);
}

/* -------------------------------------------------------------------------
   The form
   ------------------------------------------------------------------------- */

.cac-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 22px;
	align-items: start;
}

.cac-field__wrap {
	display: grid;
	gap: 8px;
	justify-items: start;
}

.cac-field__legend {
	display: block;
	font-size: 0.86em;
	font-weight: 700;
	letter-spacing: 0.005em;
	color: var(--cac-text);
	margin-bottom: 9px;
}

/* The three segments read as one control. Each cell keeps its own label for
   screen readers and for anyone who is not sure which box is which. */
.cac-date {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	background: var(--cac-surface-2);
	border: 1.5px solid var(--cac-line);
	border-radius: calc(var(--cac-r) * 0.7);
	padding: 8px 10px 9px;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.cac-date:focus-within {
	border-color: rgba(var(--cac-a-rgb), 0.55);
	background: var(--cac-surface);
	box-shadow: 0 0 0 4px rgba(var(--cac-a-rgb), 0.14);
}

.cac-field.is-bad .cac-date {
	border-color: #e5484d;
	box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.13);
}

.cac-date__cell {
	display: block;
	min-width: 0;
	flex: 1 1 0;
}

.cac-date__cell--y {
	flex: 1.4 1 0;
}

.cac-date__label {
	display: block;
	font-size: 0.66em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--cac-muted);
	margin-bottom: 1px;
	padding-inline: 2px;
}

.cac-date__input {
	display: block;
	width: 100%;
	min-width: 0;
	border: 0;
	background: none;
	padding: 2px;
	font-size: 1.22em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	border-radius: 6px;
	outline: none;
}

.cac-date__input::placeholder {
	color: var(--cac-muted);
	opacity: 0.42;
	font-weight: 600;
}

.cac-date__input:focus-visible {
	box-shadow: 0 0 0 2px rgba(var(--cac-a-rgb), 0.35);
}

.cac-date__sep {
	align-self: flex-end;
	padding-bottom: 4px;
	color: var(--cac-muted);
	opacity: 0.35;
	font-weight: 700;
	user-select: none;
}

.cac-field__err {
	min-height: 0;
	margin-top: 6px;
	font-size: 0.82em;
	font-weight: 600;
	color: #d43a3f;
}

.cac-field__err:empty {
	display: none;
}

/* Today shortcut */
.cac-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8em;
	font-weight: 650;
	color: var(--cac-muted);
	background: var(--cac-surface-2);
	border: 1px solid var(--cac-line);
	border-radius: 999px;
	padding: 5px 12px 5px 9px;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.cac-chip svg {
	width: 14px;
	height: 14px;
}

.cac-chip:hover {
	color: var(--cac-a);
	border-color: rgba(var(--cac-a-rgb), 0.4);
	background: rgba(var(--cac-a-rgb), 0.07);
}

/* -------------------------------------------------------------------------
   Preterm switch
   ------------------------------------------------------------------------- */

.cac-preterm {
	margin-top: 20px;
	border-top: 1px solid var(--cac-line-2);
	padding-top: 18px;
}

.cac-switch {
	display: flex;
	align-items: center;
	gap: 13px;
	cursor: pointer;
}

.cac-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.cac-switch__track {
	flex: none;
	width: 46px;
	height: 27px;
	border-radius: 999px;
	background: var(--cac-surface-3);
	border: 1px solid var(--cac-line);
	position: relative;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.cac-switch__thumb {
	position: absolute;
	top: 50%;
	left: 3px;
	transform: translateY(-50%);
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--cac-surface);
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.28);
	transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.cac-switch input:checked + .cac-switch__track {
	background: var(--cac-grad);
	border-color: transparent;
}

.cac-switch input:checked + .cac-switch__track .cac-switch__thumb {
	transform: translate(19px, -50%);
}

.cac-switch input:focus-visible + .cac-switch__track {
	box-shadow: 0 0 0 4px rgba(var(--cac-a-rgb), 0.2);
}

.cac-switch__text {
	display: grid;
	gap: 1px;
}

.cac-switch__title {
	font-weight: 700;
	font-size: 0.95em;
}

.cac-switch__sub {
	font-size: 0.82em;
	color: var(--cac-muted);
}

.cac-gest {
	margin-top: 14px;
	padding: 14px 16px 15px;
	background: var(--cac-surface-2);
	border: 1px solid var(--cac-line-2);
	border-radius: calc(var(--cac-r) * 0.7);
	animation: cac-slide 0.22s ease both;
}

.cac-gest[hidden] {
	display: none;
}

.cac-gest__row {
	display: flex;
	gap: 12px;
}

.cac-gest__cell {
	display: block;
	width: 96px;
	background: var(--cac-surface);
	border: 1.5px solid var(--cac-line);
	border-radius: 12px;
	padding: 6px 10px 7px;
}

.cac-gest__cell:focus-within {
	border-color: rgba(var(--cac-a-rgb), 0.55);
	box-shadow: 0 0 0 4px rgba(var(--cac-a-rgb), 0.13);
}

.cac-gest__help {
	margin-top: 9px;
	font-size: 0.8em;
	color: var(--cac-muted);
}

@keyframes cac-slide {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

/* Doubled up as .cac .cac-btn so the colour and background survive a theme
   that styles bare `button` or `.entry-content button`. The icons take their
   colour from the button through currentColor, so a leaked theme colour shows
   up on them too. */
.cac .cac-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-weight: 700;
	font-size: 0.95em;
	line-height: 1.2;
	padding: 12px 20px;
	border-radius: 999px;
	border: 1px solid var(--cac-line);
	background: var(--cac-surface);
	color: var(--cac-text);
	transition: transform 0.14s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	width: auto;
	min-height: 0;
}

.cac-btn:hover {
	transform: translateY(-1px);
}

.cac-btn:active {
	transform: translateY(0);
}

.cac-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(var(--cac-a-rgb), 0.28);
}

.cac .cac-btn--primary {
	background: var(--cac-grad);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 8px 22px -8px rgba(var(--cac-a-rgb), 0.75);
}

.cac .cac-btn--primary:hover {
	box-shadow: 0 14px 30px -10px rgba(var(--cac-a-rgb), 0.85);
}

.cac .cac-btn--lg {
	margin-top: 22px;
	width: 100%;
	padding: 16px 26px;
	font-size: 1.04em;
}

.cac .cac-btn--ghost {
	background: var(--cac-surface-2);
}

.cac .cac-btn--ghost:hover {
	background: var(--cac-surface-3);
}

.cac-btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.cac-btn__arrow {
	width: 18px;
	height: 18px;
	transition: transform 0.18s ease;
}

.cac-btn:hover .cac-btn__arrow {
	transform: translateX(3px);
}

.cac-btn[disabled] {
	opacity: 0.55;
	pointer-events: none;
}

.cac-form__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 14px;
	font-size: 0.8em;
	color: var(--cac-muted);
	text-align: center;
}

.cac-form__note svg {
	flex: none;
	width: 15px;
	height: 15px;
	color: var(--cac-a2);
}

/* -------------------------------------------------------------------------
   Result
   ------------------------------------------------------------------------- */

.cac-res {
	animation: cac-rise 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
	padding-top: clamp(22px, 3.6vw, 34px);
}

@keyframes cac-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.cac-res__label {
	text-align: center;
	font-size: 0.74em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: var(--cac-muted);
}

.cac-res__big {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 10px;
}

.cac-unit {
	flex: 1 1 96px;
	max-width: 190px;
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 2px;
	padding: 16px 10px 14px;
	background: linear-gradient(180deg, rgba(var(--cac-a-rgb), 0.07), rgba(var(--cac-a2-rgb), 0.05));
	border: 1px solid var(--cac-line-2);
	border-radius: calc(var(--cac-r) * 0.8);
}

.cac-unit b {
	font-size: clamp(2.2em, 8vw, 3.4em);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	background: var(--cac-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.cac-unit i {
	font-style: normal;
	font-size: 0.76em;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: lowercase;
	color: var(--cac-muted);
}

.cac-res__stage {
	margin-top: 16px;
	text-align: center;
}

.cac-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.82em;
	font-weight: 700;
	color: var(--cac-a);
	background: rgba(var(--cac-a-rgb), 0.10);
	border: 1px solid rgba(var(--cac-a-rgb), 0.22);
	border-radius: 999px;
	padding: 6px 14px;
}

.cac-badge--soft {
	color: var(--cac-muted);
	background: var(--cac-surface-2);
	border-color: var(--cac-line);
}

/* Chronological next to corrected */
.cac-corrected {
	margin-top: 22px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.cac-ctile {
	padding: 15px 17px;
	border-radius: calc(var(--cac-r) * 0.7);
	background: var(--cac-surface-2);
	border: 1px solid var(--cac-line-2);
}

.cac-ctile--main {
	background: rgba(var(--cac-a2-rgb), 0.08);
	border-color: rgba(var(--cac-a2-rgb), 0.26);
}

.cac-ctile__label {
	font-size: 0.74em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cac-muted);
}

.cac-ctile__val {
	margin-top: 4px;
	font-size: 1.22em;
	font-weight: 800;
	letter-spacing: -0.015em;
}

.cac-ctile__note {
	margin-top: 5px;
	font-size: 0.8em;
	color: var(--cac-muted);
}

/* Quick totals */
.cac-chips {
	margin-top: 22px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 10px;
}

.cac-chip2 {
	display: grid;
	gap: 1px;
	padding: 12px 14px;
	background: var(--cac-surface-2);
	border: 1px solid var(--cac-line-2);
	border-radius: calc(var(--cac-r) * 0.6);
}

.cac-chip2 b {
	font-size: 1.16em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.015em;
}

.cac-chip2 span {
	font-size: 0.76em;
	color: var(--cac-muted);
	font-weight: 600;
}

/* Small info cards under the totals */
.cac-cards {
	margin-top: 12px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 12px;
}

.cac-mini {
	display: flex;
	gap: 13px;
	padding: 15px 17px;
	background: var(--cac-surface-2);
	border: 1px solid var(--cac-line-2);
	border-radius: calc(var(--cac-r) * 0.7);
}

.cac-mini__icon {
	flex: none;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: rgba(var(--cac-a-rgb), 0.11);
	color: var(--cac-a);
}

.cac-mini__icon svg {
	width: 19px;
	height: 19px;
}

.cac-mini--alt .cac-mini__icon {
	background: rgba(var(--cac-a2-rgb), 0.13);
	color: var(--cac-a2);
}

.cac-mini__body {
	min-width: 0;
}

.cac-mini__label {
	font-size: 0.74em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cac-muted);
}

.cac-mini__val {
	margin-top: 2px;
	font-weight: 750;
	letter-spacing: -0.01em;
}

.cac-mini__note {
	margin-top: 3px;
	font-size: 0.82em;
	color: var(--cac-muted);
	line-height: 1.45;
}

/* Action row */
.cac-acts {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--cac-line-2);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cac-acts .cac-btn {
	font-size: 0.86em;
	padding: 10px 17px;
}

.cac-acts__spacer {
	flex: 1 1 auto;
}

/* -------------------------------------------------------------------------
   Milestone invitation
   ------------------------------------------------------------------------- */

.cac-invite {
	display: flex;
	align-items: center;
	gap: clamp(14px, 3vw, 26px);
	background:
		linear-gradient(120deg, rgba(var(--cac-a-rgb), 0.09), rgba(var(--cac-a2-rgb), 0.08)),
		var(--cac-surface);
	border-color: rgba(var(--cac-a-rgb), 0.2);
}

.cac-invite__art {
	flex: none;
	width: clamp(72px, 14vw, 104px);
}

.cac-invite__body {
	flex: 1 1 auto;
	min-width: 0;
}

.cac-invite__title {
	font-size: 1.14em;
	font-weight: 800;
	letter-spacing: -0.015em;
}

.cac-invite__sub {
	margin-top: 4px;
	font-size: 0.88em;
	color: var(--cac-muted);
}

.cac-invite .cac-btn {
	flex: none;
	margin-top: 0;
	width: auto;
}

/* -------------------------------------------------------------------------
   Milestone quiz
   ------------------------------------------------------------------------- */

.cac-quiz {
	animation: cac-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cac-quiz__top {
	display: grid;
	gap: 10px;
}

.cac-quiz__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	font-size: 0.78em;
	font-weight: 650;
	color: var(--cac-muted);
	letter-spacing: 0.02em;
}

.cac-bar {
	height: 7px;
	border-radius: 999px;
	background: var(--cac-surface-3);
	overflow: hidden;
}

.cac-bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--cac-grad);
	transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.cac-q {
	margin-top: 24px;
	display: grid;
	justify-items: center;
	text-align: center;
	animation: cac-pop 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cac-pop {
	from { opacity: 0; transform: translateY(10px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

.cac-q__art {
	width: clamp(120px, 30vw, 168px);
}

.cac-q__domain {
	margin-top: 16px;
	font-size: 0.74em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--cac-a);
}

.cac-q__text {
	margin-top: 8px;
	max-width: 22ch;
	font-size: clamp(1.16em, 3.4vw, 1.42em);
	font-weight: 750;
	line-height: 1.32;
	letter-spacing: -0.015em;
}

.cac-q__btns {
	margin-top: 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	width: min(100%, 400px);
}

.cac-pick {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 15px 18px;
	font-weight: 750;
	border-radius: calc(var(--cac-r) * 0.72);
	border: 1.5px solid var(--cac-line);
	background: var(--cac-surface-2);
	transition: transform 0.14s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.cac-pick svg {
	width: 19px;
	height: 19px;
}

.cac-pick:hover {
	transform: translateY(-2px);
}

.cac-pick:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(var(--cac-a-rgb), 0.26);
}

.cac-pick--yes:hover {
	color: var(--cac-ok);
	border-color: rgba(22, 163, 74, 0.45);
	background: rgba(22, 163, 74, 0.09);
}

.cac-pick--no:hover {
	color: var(--cac-warn);
	border-color: rgba(217, 119, 6, 0.45);
	background: rgba(217, 119, 6, 0.09);
}

.cac-quiz__foot {
	margin-top: 22px;
	display: flex;
	justify-content: center;
}

.cac-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.84em;
	font-weight: 650;
	color: var(--cac-muted);
	padding: 8px 14px;
	border-radius: 999px;
	transition: color 0.15s ease, background 0.15s ease;
}

.cac-back svg {
	width: 15px;
	height: 15px;
}

.cac-back:hover {
	color: var(--cac-text);
	background: var(--cac-surface-2);
}

/* -------------------------------------------------------------------------
   Milestone summary
   ------------------------------------------------------------------------- */

.cac-sum {
	animation: cac-rise 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cac-sum__head {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3.5vw, 28px);
}

.cac-ring {
	flex: none;
	position: relative;
	width: clamp(84px, 17vw, 110px);
	height: clamp(84px, 17vw, 110px);
}

.cac-ring svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.cac-ring__track {
	fill: none;
	stroke: var(--cac-surface-3);
	stroke-width: 9;
}

.cac-ring__fill {
	fill: none;
	stroke: var(--cac-a);
	stroke-width: 9;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.cac-ring__text {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	text-align: center;
	line-height: 1.05;
}

.cac-ring__text b {
	font-size: 1.5em;
	font-weight: 800;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.cac-ring__text span {
	font-size: 0.68em;
	color: var(--cac-muted);
	font-weight: 650;
}

.cac-sum__title {
	font-size: clamp(1.1em, 3vw, 1.3em);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.cac-sum__text {
	margin-top: 6px;
	color: var(--cac-muted);
	font-size: 0.92em;
	line-height: 1.55;
}

.cac-doms {
	margin-top: 22px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
}

.cac-dom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 15px;
	background: var(--cac-surface-2);
	border: 1px solid var(--cac-line-2);
	border-radius: calc(var(--cac-r) * 0.6);
}

.cac-dom__name {
	font-size: 0.86em;
	font-weight: 650;
}

.cac-dom__pips {
	display: flex;
	gap: 4px;
	flex: none;
}

.cac-pip {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cac-surface-3);
	border: 1px solid var(--cac-line);
}

.cac-pip.is-yes {
	background: var(--cac-ok);
	border-color: transparent;
}

.cac-pip.is-no {
	background: var(--cac-warn);
	border-color: transparent;
	opacity: 0.75;
}

.cac-notyet {
	margin-top: 18px;
	padding: 16px 18px;
	border-radius: calc(var(--cac-r) * 0.7);
	background: rgba(217, 119, 6, 0.07);
	border: 1px solid rgba(217, 119, 6, 0.22);
}

.cac-notyet__title {
	font-size: 0.78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--cac-warn);
}

.cac-notyet ul {
	margin-top: 9px;
	display: grid;
	gap: 7px;
}

.cac-notyet li {
	position: relative;
	padding-left: 20px;
	font-size: 0.9em;
	line-height: 1.45;
}

.cac-notyet li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cac-warn);
}

.cac-note {
	margin-top: 18px;
	display: flex;
	gap: 10px;
	padding: 14px 16px;
	border-radius: calc(var(--cac-r) * 0.6);
	background: var(--cac-surface-2);
	border: 1px solid var(--cac-line-2);
	font-size: 0.84em;
	line-height: 1.55;
	color: var(--cac-muted);
}

.cac-note svg {
	flex: none;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	color: var(--cac-a);
}

/* -------------------------------------------------------------------------
   Lead capture
   ------------------------------------------------------------------------- */

.cac-lead {
	animation: cac-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
	text-align: center;
}

.cac-lead__title {
	font-size: 1.16em;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.cac-lead__sub {
	margin-top: 6px;
	margin-inline: auto;
	max-width: 42ch;
	color: var(--cac-muted);
	font-size: 0.92em;
}

.cac-lead__form {
	margin-top: 18px;
	margin-inline: auto;
	max-width: 440px;
	display: grid;
	gap: 12px;
}

.cac-input {
	width: 100%;
	padding: 14px 17px;
	border-radius: calc(var(--cac-r) * 0.7);
	border: 1.5px solid var(--cac-line);
	background: var(--cac-surface-2);
	font-size: 0.98em;
	outline: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.cac-input:focus {
	border-color: rgba(var(--cac-a-rgb), 0.55);
	background: var(--cac-surface);
	box-shadow: 0 0 0 4px rgba(var(--cac-a-rgb), 0.14);
}

.cac-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	text-align: left;
	font-size: 0.85em;
	color: var(--cac-muted);
	cursor: pointer;
}

.cac-consent input {
	flex: none;
	margin-top: 3px;
	width: 17px;
	height: 17px;
	accent-color: var(--cac-a);
}

.cac-lead__err {
	font-size: 0.84em;
	font-weight: 650;
	color: #d43a3f;
}

.cac-lead__err:empty {
	display: none;
}

.cac-lead__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.cac-lead__row .cac-btn {
	margin-top: 0;
	width: auto;
	flex: 1 1 auto;
}

.cac-lead__done {
	margin-top: 4px;
	font-weight: 700;
	color: var(--cac-ok);
}

/* -------------------------------------------------------------------------
   Illustrations
   ------------------------------------------------------------------------- */

.cac-art {
	width: 100%;
	height: auto;
	color: var(--cac-text);
}

.cac-art__bg {
	fill: rgba(var(--cac-a-rgb), 0.09);
}

.cac-art__soft {
	fill: rgba(var(--cac-a-rgb), 0.30);
}

.cac-art__accent {
	fill: var(--cac-a2);
}

.cac-art__glow {
	fill: rgba(var(--cac-a2-rgb), 0.38);
}

.cac-art__ink {
	fill: var(--cac-text);
	opacity: 0.82;
}

.cac-art__line {
	fill: none;
	stroke: var(--cac-text);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.72;
}

/* -------------------------------------------------------------------------
   Content sections
   ------------------------------------------------------------------------- */

.cac-section {
	position: relative;
	z-index: 1;
	margin-top: clamp(40px, 7vw, 68px);
}

.cac-section__title {
	font-size: clamp(1.4em, 3.6vw, 1.85em);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.cac-section__lede {
	margin-top: 12px;
	max-width: 68ch;
	color: var(--cac-muted);
}

/* Steps */
.cac-steps__list {
	margin-top: 26px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	counter-reset: cac-step;
}

.cac-step {
	position: relative;
	padding: 24px 22px 22px;
	background: var(--cac-surface);
	border: 1px solid var(--cac-line);
	border-radius: var(--cac-r);
	box-shadow: var(--cac-shadow);
}

.cac-step__num {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: var(--cac-grad);
	color: #fff;
	font-weight: 800;
	font-size: 0.9em;
	box-shadow: 0 6px 16px -6px rgba(var(--cac-a-rgb), 0.7);
}

.cac-step__title {
	margin-top: 14px;
	font-size: 1.04em;
	font-weight: 750;
	letter-spacing: -0.01em;
}

.cac-step__text {
	margin-top: 7px;
	font-size: 0.92em;
	color: var(--cac-muted);
	line-height: 1.6;
}

/* Stage cards */
.cac-guide__grid {
	margin-top: 26px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: 14px;
}

.cac-scard {
	padding: 22px;
	background: var(--cac-surface);
	border: 1px solid var(--cac-line);
	border-radius: var(--cac-r);
	box-shadow: var(--cac-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cac-scard:hover {
	transform: translateY(-3px);
	box-shadow: var(--cac-shadow-lg);
}

.cac-scard__range {
	display: inline-block;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cac-a);
	background: rgba(var(--cac-a-rgb), 0.1);
	border-radius: 999px;
	padding: 4px 11px;
}

.cac-scard__title {
	margin-top: 12px;
	font-size: 1.1em;
	font-weight: 780;
	letter-spacing: -0.015em;
}

.cac-scard__text {
	margin-top: 7px;
	font-size: 0.9em;
	color: var(--cac-muted);
	line-height: 1.6;
}

/* Corrected age explainer */
.cac-explain {
	margin-top: 16px;
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: clamp(18px, 3vw, 34px);
	align-items: center;
	padding: clamp(22px, 3.4vw, 32px);
	background:
		linear-gradient(120deg, rgba(var(--cac-a-rgb), 0.08), rgba(var(--cac-a2-rgb), 0.07)),
		var(--cac-surface);
	border: 1px solid rgba(var(--cac-a-rgb), 0.18);
	border-radius: var(--cac-r);
}

.cac-explain__title {
	font-size: 1.14em;
	font-weight: 780;
	letter-spacing: -0.018em;
}

.cac-explain__body p {
	margin-top: 10px;
	font-size: 0.93em;
	color: var(--cac-muted);
	line-height: 1.62;
}

.cac-explain__math {
	display: grid;
	gap: 8px;
	padding: 18px;
	background: var(--cac-surface);
	border: 1px solid var(--cac-line);
	border-radius: calc(var(--cac-r) * 0.8);
	box-shadow: var(--cac-shadow);
}

.cac-explain__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	font-size: 0.88em;
	color: var(--cac-muted);
}

.cac-explain__row strong {
	font-size: 1.06em;
	font-weight: 750;
	color: var(--cac-text);
	font-variant-numeric: tabular-nums;
}

.cac-explain__row--out {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px dashed var(--cac-line);
}

.cac-explain__row--out strong {
	color: var(--cac-a);
	font-size: 1.2em;
	font-weight: 800;
}

/* FAQ */
.cac-faq__list {
	margin-top: 22px;
	display: grid;
	gap: 10px;
}

.cac-qa {
	background: var(--cac-surface);
	border: 1px solid var(--cac-line);
	border-radius: calc(var(--cac-r) * 0.8);
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cac-qa[open] {
	border-color: rgba(var(--cac-a-rgb), 0.3);
	box-shadow: var(--cac-shadow);
}

.cac-qa__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 17px 20px;
	cursor: pointer;
	list-style: none;
}

.cac-qa__q::-webkit-details-marker {
	display: none;
}

.cac-qa__q h3 {
	font-size: 1em;
	font-weight: 700;
	letter-spacing: -0.008em;
	line-height: 1.4;
}

.cac-qa__icon {
	flex: none;
	position: relative;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background: var(--cac-surface-2);
	border: 1px solid var(--cac-line);
}

.cac-qa__icon::before,
.cac-qa__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 2px;
	border-radius: 2px;
	background: var(--cac-muted);
	transform: translate(-50%, -50%);
	transition: transform 0.22s ease, opacity 0.22s ease;
}

.cac-qa__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.cac-qa[open] .cac-qa__icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0);
}

.cac-qa__a {
	padding: 0 20px 19px;
	color: var(--cac-muted);
	font-size: 0.93em;
	line-height: 1.65;
	max-width: 74ch;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 760px) {
	.cac-form__grid {
		grid-template-columns: 1fr;
	}

	.cac-corrected {
		grid-template-columns: 1fr;
	}

	.cac-explain {
		grid-template-columns: 1fr;
	}

	.cac-invite {
		flex-direction: column;
		text-align: center;
	}

	.cac-invite .cac-btn {
		width: 100%;
	}

	.cac-sum__head {
		flex-direction: column;
		text-align: center;
	}
}

@media (max-width: 520px) {
	.cac {
		padding-inline: 4px;
	}

	.cac-card {
		padding: 18px 16px 20px;
	}

	.cac-unit {
		flex-basis: calc(33.333% - 8px);
		padding: 13px 6px 12px;
	}

	.cac-unit b {
		font-size: 2.1em;
	}

	.cac-unit i {
		font-size: 0.7em;
	}

	.cac-date {
		padding: 7px 8px 8px;
	}

	.cac-date__input {
		font-size: 1.12em;
	}

	.cac-acts .cac-btn,
	.cac-lead__row .cac-btn {
		flex: 1 1 100%;
	}

	.cac-acts__spacer {
		display: none;
	}
}

@media (max-width: 380px) {
	.cac-q__btns {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cac *,
	.cac *::before,
	.cac *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
   Dark mode
   ------------------------------------------------------------------------- */

.cac--dark {
	--cac-surface: #151a23;
	--cac-surface-2: #1b212c;
	--cac-surface-3: #232a37;
	--cac-text: #eef1f6;
	--cac-muted: #98a2b3;
	--cac-line: rgba(255, 255, 255, 0.11);
	--cac-line-2: rgba(255, 255, 255, 0.07);
	--cac-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -14px rgba(0, 0, 0, 0.6);
	--cac-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 34px 68px -24px rgba(0, 0, 0, 0.7);
	--cac-page: #0b0f16;
	--cac-ok: #4ade80;
	--cac-warn: #fbbf24;
}

.cac--dark .cac-art__bg {
	fill: rgba(var(--cac-a-rgb), 0.16);
}

.cac--dark .cac-art__soft {
	fill: rgba(var(--cac-a-rgb), 0.45);
}

.cac--dark .cac-switch__thumb {
	background: #e7ebf2;
}

@media (prefers-color-scheme: dark) {
	.cac--auto {
		--cac-surface: #151a23;
		--cac-surface-2: #1b212c;
		--cac-surface-3: #232a37;
		--cac-text: #eef1f6;
		--cac-muted: #98a2b3;
		--cac-line: rgba(255, 255, 255, 0.11);
		--cac-line-2: rgba(255, 255, 255, 0.07);
		--cac-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -14px rgba(0, 0, 0, 0.6);
		--cac-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 34px 68px -24px rgba(0, 0, 0, 0.7);
		--cac-page: #0b0f16;
		--cac-ok: #4ade80;
		--cac-warn: #fbbf24;
	}

	.cac--auto .cac-art__bg {
		fill: rgba(var(--cac-a-rgb), 0.16);
	}

	.cac--auto .cac-art__soft {
		fill: rgba(var(--cac-a-rgb), 0.45);
	}

	.cac--auto .cac-switch__thumb {
		background: #e7ebf2;
	}
}

/* -------------------------------------------------------------------------
   Print, so "save as PDF" produces something worth handing over
   ------------------------------------------------------------------------- */

/* The print sheet builds this, so it must never show up on screen. */
.cac-print-root {
	display: none;
}

@media print {

	/* ---------------------------------------------------------------------
	   Isolating the tool from the rest of the page.

	   Two routes end up in the same place:

	   1. Someone hits Ctrl+P on the page. The rule below starts at <html> and,
	      at every level, hides any child that neither is the tool nor contains
	      it. The cascade repeats that all the way down, so it works at any
	      nesting depth without knowing a single thing about the theme markup.
	      Browsers too old for :has() simply print the page as they did before,
	      which is a soft landing rather than a broken one.

	   2. Someone uses the Print button. The script clones the result into a
	      .cac-print-root at body level and puts .cac-printing on <html>, and
	      the rule after this one hides everything else outright. Using
	      display:none rather than the old visibility trick is what keeps blank
	      leading pages out of the PDF, and lifting the clone to body level
	      escapes any theme wrapper that clips with overflow.
	   --------------------------------------------------------------------- */

	*:has(.cac) > *:not(:has(.cac)):not(.cac) {
		display: none !important;
	}

	.cac-printing body > *:not(.cac-print-root) {
		display: none !important;
	}

	.cac-printing .cac-print-root {
		display: block;
	}

	@page {
		margin: 14mm;
	}

	/* ---------------------------------------------------------------------
	   Paper palette
	   --------------------------------------------------------------------- */

	.cac {
		--cac-page: transparent;
		--cac-surface: #fff;
		--cac-surface-2: #fff;
		--cac-surface-3: #e9e9e9;
		--cac-text: #000;
		--cac-muted: #444;
		--cac-line: rgba(0, 0, 0, 0.22);
		--cac-line-2: rgba(0, 0, 0, 0.14);
		--cac-shadow: none;
		--cac-shadow-lg: none;
		max-width: none;
		margin: 0;
		padding: 0;
		font-size: 11.5pt;

		/* The milestone pips and the score ring carry meaning through colour,
		   so ask the browser to print them rather than drop the backgrounds. */
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Anything interactive is noise on paper. */
	.cac-aura,
	.cac-form,
	.cac-invite,
	.cac-quiz,
	.cac-lead,
	.cac-acts,
	.cac-section,
	.cac-noscript,
	.cac-hero__sub,
	.cac-eyebrow {
		display: none !important;
	}

	.cac-card {
		border: 1px solid #bbb;
		box-shadow: none;
		break-inside: avoid;
		page-break-inside: avoid;
		padding: 16px 18px;
	}

	.cac-out:not(:empty) {
		display: block;
		margin-top: 0;
	}

	.cac-out > * + * {
		margin-top: 12px;
	}

	.cac-hero {
		padding: 0 0 14px;
		text-align: left;
	}

	.cac-hero__title {
		margin-top: 0;
		font-size: 17pt;
	}

	/* The gradient number is invisible on paper once the background is gone. */
	.cac-unit b {
		-webkit-text-fill-color: #000;
		color: #000;
		background: none;
		font-size: 26pt;
	}

	.cac-unit {
		border: 1px solid #ddd;
		background: none;
	}

	.cac-res,
	.cac-sum {
		animation: none;
	}

	.cac-note,
	.cac-notyet {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* ---------------------------------------------------------------------
	   The header the Print button adds
	   --------------------------------------------------------------------- */

	.cac-print-root {
		max-width: none;
		padding: 0;
	}

	.cac-print-head {
		margin-bottom: 14px;
		padding-bottom: 10px;
		border-bottom: 2px solid #000;
	}

	.cac-print-head__site {
		font-size: 8.5pt;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: #444;
	}

	.cac-print-head__title {
		margin-top: 2px;
		font-size: 18pt;
		font-weight: 800;
		letter-spacing: -0.02em;
	}

	.cac-print-head__date {
		margin-top: 2px;
		font-size: 9.5pt;
		color: #444;
	}

	.cac-print-foot {
		margin-top: 14px;
		padding-top: 8px;
		border-top: 1px solid #bbb;
		font-size: 8.5pt;
		color: #555;
	}
}