/* CSA CISO-as-a-Service page (/governance/csa-ciso-as-a-service/). Builds on
   governance.css and hia.css (service-page hero, sections, cards, reveal,
   pricing). Colours and fonts come from theme.json presets only; tints are
   color-mix() of presets. */

/* ---------- 1 hero ---------- */

.csa-hero .svc-hero__title {
	font-size: clamp(2.4rem, 4.6vw, 4.1rem);
}

.csa-hero .svc-hero__cta {
	gap: 14px;
}

/* Ghost button, as the mockup here: white fill, Teal text, Cyan outline. */
.csa-hero .is-style-ghost .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--teal);
}

/* Co-funding ring: inc/csa-ring.php draws it from the two Lists
   (.is-rendered); the Lists only show in the editor. */
.csa-ring.is-rendered > ul {
	display: none;
}

.csa-ring__track {
	fill: none;
	stroke: color-mix(in srgb, var(--wp--preset--color--teal) 12%, var(--wp--preset--color--mist));
	stroke-width: 44;
}

.csa-ring__arc {
	fill: none;
	stroke-width: 44;
	stroke-linecap: round;
	stroke-dasharray: var(--len) 1000;
}

.csa-ring__face {
	fill: var(--wp--preset--color--white);
	filter: drop-shadow(0 12px 24px rgba(16, 45, 64, 0.12));
}

.csa-ring__small {
	fill: var(--wp--preset--color--slate);
	font-size: 13px;
	letter-spacing: 0.1em;
}

.csa-ring__big {
	fill: var(--wp--preset--color--navy);
	font: 800 68px var(--wp--preset--font-family--manrope);
}

.csa-ring__note {
	fill: var(--wp--preset--color--teal);
	font-size: 13px;
	font-weight: 600;
}

.csa-ring__svg .card__glyph {
	font-weight: 700;
}

.csa-ring__svg .card__value {
	font-weight: 600;
}

/* Stacked hero (960px and below): the drawing is cropped to the ring (its
   360-unit square fills the box, up to 420px, so labels stay at least their
   drawn size) and the cards show as a grid under it. */
.csa-ring__chips {
	display: none;
}

@media (max-width: 960px) {
	.csa-ring.is-rendered {
		width: 100%;
		max-width: 420px;
		margin: 20px auto 0;
	}

	.csa-ring__svg.gov-hero-visual__svg {
		width: calc(560 / 360 * 100%);
		max-width: none;
		margin: calc(-70 / 360 * 100%) 0 calc(-70 / 360 * 100%) calc(-100 / 360 * 100%);
		clip-path: inset(14% calc(100 / 560 * 100%));
	}

	.csa-ring__svg .bob {
		display: none;
	}

	.csa-ring.is-rendered > .csa-ring__chips {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin: 16px 0 0;
		padding: 0;
		list-style: none;
	}

	.csa-ring__chips li {
		display: grid;
		grid-template-columns: 26px 1fr;
		column-gap: 10px;
		align-items: center;
		margin: 0;
		padding: 10px 12px;
		border: 1px solid var(--gov-line);
		border-radius: 12px;
		background: var(--wp--preset--color--white);
		box-shadow: 0 10px 18px rgba(16, 45, 64, 0.12);
	}

	.csa-ring__glyph {
		grid-row: 1 / span 2;
		display: grid;
		place-items: center;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: var(--wp--preset--color--mist);
		color: var(--wp--preset--color--teal);
		font-size: 13px;
		font-weight: 700;
	}

	.csa-ring__kicker {
		color: var(--wp--preset--color--slate);
		font-size: 11px;
		letter-spacing: 0.06em;
		line-height: 1.3;
	}

	.csa-ring__value {
		color: var(--wp--preset--color--navy);
		font-size: 13px;
		font-weight: 600;
		line-height: 1.3;
	}
}

/* Ring motion layers (inc/csa-ring.php). Without motion: the head sits at
   the arc's end, the connectors and orbit dots are still, the rest hidden. */
.csa-ring__head {
	transform-box: view-box;
	transform-origin: 280px 250px;
	transform: rotate(var(--turn));
}

.csa-ring__head-glow {
	fill: var(--wp--preset--color--cyan);
	opacity: 0.25;
}

.csa-ring__head-dot {
	fill: var(--wp--preset--color--white);
	stroke: var(--wp--preset--color--cyan);
	stroke-width: 4;
}

.csa-ring__flow {
	fill: none;
	stroke: var(--wp--preset--color--white);
	stroke-width: 6;
	stroke-linecap: round;
	stroke-opacity: 0.85;
	stroke-dasharray: 60 1000;
	filter: drop-shadow(0 0 4px var(--wp--preset--color--white));
	opacity: 0;
}

.csa-ring__burst {
	fill: none;
	stroke: var(--wp--preset--color--cyan);
	stroke-width: 3;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.csa-ring__orbit {
	fill: var(--wp--preset--color--cyan);
	opacity: 0.7;
	transform-box: view-box;
	transform-origin: 280px 250px;
}

.csa-ring__wire {
	fill: none;
	stroke: color-mix(in srgb, var(--wp--preset--color--cyan) 80%, transparent);
	stroke-width: 2;
	stroke-dasharray: 1.5 2.5;
}

.csa-ring__pulse {
	fill: none;
	stroke: var(--wp--preset--color--cyan);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 10 200;
	filter: drop-shadow(0 0 3px var(--wp--preset--color--cyan));
	opacity: 0;
}

@media (max-width: 960px) {
	.csa-ring__link {
		display: none; /* the cards move under the ring */
	}
}

/* On load the arc fills from empty to its share while the head rides its end
   and the figure counts up (site.js); then a burst, and from then on light
   runs along the arc, pulses travel out to the cards and the dots orbit.
   Idle motion pauses off screen (governance.css). */
@media (prefers-reduced-motion: no-preference) {
	.js .csa-ring__arc {
		stroke-dasharray: 0 1000;
	}

	.js .csa-ring__head {
		transform: rotate(0deg);
	}

	.svc-hero.is-playing .csa-ring__arc {
		animation: csa-arc 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
	}

	.svc-hero.is-playing .csa-ring__head {
		animation: csa-head 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
	}

	.svc-hero.is-playing .csa-ring__head-glow {
		transform-box: fill-box;
		transform-origin: center;
		animation: csa-glow 1.6s ease-in-out 2.6s infinite;
	}

	.svc-hero.is-playing .csa-ring__flow {
		animation: csa-show 0.4s ease-out 2.6s forwards, csa-flow 3.2s cubic-bezier(0.45, 0, 0.55, 1) 2.6s infinite;
	}

	.svc-hero.is-playing .csa-ring__burst {
		animation: csa-burst 1.3s ease-out 2.5s, csa-burst 1.6s ease-out 6s infinite;
	}

	.svc-hero.is-playing .csa-ring__orbit {
		animation: spin 14s linear infinite;
	}

	.js .csa-ring__wire {
		stroke-dashoffset: 0;
	}

	.svc-hero.is-playing .csa-ring__wire {
		animation: csa-wire 1.2s linear infinite;
	}

	.svc-hero.is-playing .csa-ring__pulse {
		animation: csa-pulse 2.4s ease-in calc(2.7s + var(--k, 0) * 0.3s) infinite;
	}
}

@keyframes csa-arc {
	to { stroke-dasharray: var(--len) 1000; }
}

@keyframes csa-head {
	from { transform: rotate(0deg); }
	to { transform: rotate(var(--turn)); }
}

@keyframes csa-glow {
	50% { opacity: 0.05; transform: scale(1.6); }
}

@keyframes csa-show {
	to { opacity: 1; }
}

/* A bright stretch runs from the start of the arc to its end. */
@keyframes csa-flow {
	from { stroke-dashoffset: 0; }
	to { stroke-dashoffset: calc(60 - var(--len)); }
}

@keyframes csa-burst {
	0% { opacity: 0.9; transform: scale(0.92); }
	100% { opacity: 0; transform: scale(1.35); }
}

@keyframes csa-wire {
	to { stroke-dashoffset: -8; }
}

@keyframes csa-pulse {
	0% { opacity: 0; stroke-dashoffset: 8; }
	10% { opacity: 1; }
	45% { opacity: 1; stroke-dashoffset: -100; }
	46%, 100% { opacity: 0; stroke-dashoffset: -100; }
}

/* ---------- shared: split layout, lead, numbered list, chips ---------- */

/* Text beside an illustration, two equal columns from 901px. */
.csa-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}

@media (min-width: 901px) {
	.csa-split {
		grid-template-columns: 1fr 1fr;
		gap: 56px;
	}
}

.csa-split__art {
	width: 100%;
	max-width: 480px;
	margin: 0 auto !important;
}

.csa-split__art img {
	display: block;
	width: 100%;
	height: auto;
}

.gov-section .csa-lead {
	margin-top: 14px;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--lead);
}

.csa-lead a {
	color: var(--wp--preset--color--teal);
}

/* Numbered List: each item a bold title, then its text; the numbers come
   from the item order. */
.gov-section .csa-numbered {
	display: grid;
	gap: 12px;
	margin-top: 22px;
	padding: 0;
	list-style: none;
	counter-reset: csa-n;
}

.csa-numbered li {
	position: relative;
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: 14px;
	align-items: start;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--hia-line);
	border-radius: 14px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--slate);
	font-size: 0.88rem;
	line-height: 1.76;
	counter-increment: csa-n;
}

.csa-numbered li::before {
	content: counter(csa-n, decimal-leading-zero);
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--teal);
	border-radius: 12px;
	background: var(--wp--preset--color--deep-blue);
	color: var(--wp--preset--color--cyan);
	font: 800 1rem/1 var(--wp--preset--font-family--manrope);
}

.csa-numbered strong {
	display: block;
	grid-column: 2;
	color: var(--wp--preset--color--navy);
	font: 700 1.1em/1.6 var(--wp--preset--font-family--manrope);
}

/* Hover: slides right, with a pre-rendered shadow faded in. */
.csa-numbered li::after {
	box-shadow: 0 14px 30px -16px rgba(16, 45, 64, 0.35);
}

.csa-numbered li:hover::after {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.csa-numbered li {
		transition: transform 0.35s ease;
	}

	.csa-numbered li:hover {
		transform: translateX(6px);
	}
}

.hia-dark .csa-numbered li {
	border-color: var(--hia-dark-line);
	background: var(--wp--preset--color--deep-blue);
	color: var(--gov-on-dark);
}

.hia-dark .csa-numbered strong {
	color: var(--wp--preset--color--white);
}

.gov-section .csa-note {
	margin-top: 18px;
	color: var(--wp--preset--color--slate);
	font-size: 0.95rem;
}

.gov-section .csa-chips {
	margin-top: 18px;
}

.csa-chips li {
	margin: 0;
	padding: 6px 12px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--cyan) 40%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--cyan) 10%, transparent);
	color: var(--wp--preset--color--teal);
	font: 500 0.72rem/normal var(--wp--preset--font-family--plex-mono);
	letter-spacing: 0.06em;
}

/* ---------- 3 inside the marks ---------- */

/* Without JS both marks show as lists; the count line, tier switch and
   legend items only feed the explorer. */
.csa-marks__count,
.csa-marks__tiers,
.csa-marks__legend {
	display: none;
}

.gov-section .csa-marks:not(.is-ready) .csa-marks__set + .csa-marks__set {
	margin-top: 40px;
}

.gov-section .csa-marks__name {
	margin-bottom: 14px;
}

.csa-marks__switches .csa-seg {
	flex-wrap: wrap;
	margin-right: 10px;
}

.csa-marks__switches .csa-seg[hidden] {
	display: none;
}

.csa-marks__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
	margin-top: 10px !important;
}

@media (min-width: 901px) {
	.csa-marks.is-ready .csa-marks__body {
		grid-template-columns: 1fr 1fr;
	}

	.csa-marks__vis {
		position: sticky;
		top: 90px;
	}
}

.csa-marks__set {
	display: grid;
	gap: 14px;
}

.csa-marks__set[hidden] {
	display: none;
}

.csa-marks__group {
	padding: 14px 16px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--cyan) 20%, transparent);
	border-radius: 14px;
	background: var(--wp--preset--color--deep-blue);
}

.gov-section .csa-marks__label {
	margin-bottom: 8px;
	color: var(--wp--preset--color--sky);
	font: 400 0.68rem/1.6 var(--wp--preset--font-family--plex-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gov-section .csa-marks__domains {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A domain: its tag, then its name. Dim until in scope (always lit without JS). */
.csa-marks__domains li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 5px 0;
	color: var(--wp--preset--color--white);
	font-size: 0.88rem;
	line-height: 1.6;
	transition: color 0.35s ease;
}

.csa-marks.is-ready .csa-marks__domains li:not(.is-on) {
	color: var(--hia-muted-dark);
}

.csa-marks__domains code {
	min-width: 34px;
	padding: 2px 7px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--wp--preset--color--cyan) 18%, transparent);
	color: var(--wp--preset--color--cyan);
	font: 500 0.62rem/normal var(--wp--preset--font-family--plex-mono);
	text-align: center;
	transition: background-color 0.35s ease, color 0.35s ease;
}

.csa-marks.is-ready .csa-marks__domains li:not(.is-on) code {
	background: color-mix(in srgb, var(--wp--preset--color--sky) 8%, transparent);
	color: var(--hia-muted-dark);
}

.csa-marks__domains code.is-people {
	background: color-mix(in srgb, var(--wp--preset--color--orange) 20%, transparent);
	color: var(--wp--preset--color--orange);
}

.csa-marks__domains code.is-glass {
	background: color-mix(in srgb, var(--wp--preset--color--sky) 18%, transparent);
	color: var(--wp--preset--color--sky);
}

.csa-marks__domains code.is-dark {
	background: color-mix(in srgb, var(--wp--preset--color--cyan) 25%, transparent);
	color: var(--wp--preset--color--white);
}

/* Drawing, count and key. */
.csa-marks__svg {
	display: block;
	width: 100%;
	max-width: 480px;
	margin: auto;
}

.csa-marks__total {
	margin-top: -10px;
	text-align: center;
}

.csa-marks__total b {
	color: var(--wp--preset--color--cyan);
	font: 800 3rem/normal var(--wp--preset--font-family--manrope);
}

.csa-marks__total span {
	display: block;
	color: var(--hia-fine-dark);
	font: 500 0.72rem/normal var(--wp--preset--font-family--plex-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.csa-marks__key {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 12px;
}

.csa-marks__key span {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--gov-on-dark);
	font-size: 0.8rem;
}

.csa-marks__key i {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
}

.csa-marks__key .is-people { background: var(--wp--preset--color--orange); }
.csa-marks__key .is-glass { background: color-mix(in srgb, var(--wp--preset--color--cyan) 58%, transparent); }
.csa-marks__key .is-dark { background: var(--wp--preset--color--deep-blue); }
.csa-marks__key .is-cyan { background: var(--wp--preset--color--cyan); }
.csa-marks__key .is-off { background: color-mix(in srgb, var(--wp--preset--color--sky) 25%, transparent); }

.csa-marks__svg polygon {
	stroke-width: 0.8;
	stroke-linejoin: round;
}

.csa-marks__svg .iso-shadow {
	fill: var(--wp--preset--color--cyan);
	opacity: 0.1;
	filter: blur(10px);
}

.csa-marks__svg .is-light .t { fill: var(--wp--preset--color--white); }
.csa-marks__svg .is-light .l { fill: color-mix(in srgb, var(--wp--preset--color--sky) 22%, var(--wp--preset--color--white)); }
.csa-marks__svg .is-light .r { fill: color-mix(in srgb, var(--wp--preset--color--sky) 45%, var(--wp--preset--color--white)); }
.csa-marks__svg .is-light polygon { stroke: color-mix(in srgb, var(--wp--preset--color--sky) 55%, var(--wp--preset--color--white)); }

.csa-marks__svg .is-glass .t { fill: color-mix(in srgb, var(--wp--preset--color--sky) 78%, transparent); }
.csa-marks__svg .is-glass .l { fill: color-mix(in srgb, var(--wp--preset--color--cyan) 58%, transparent); }
.csa-marks__svg .is-glass .r { fill: color-mix(in srgb, var(--wp--preset--color--teal) 62%, transparent); }
.csa-marks__svg .is-glass polygon,
.csa-marks__svg .is-dark polygon { stroke: var(--wp--preset--color--cyan); }

.csa-marks__svg .is-dark .t { fill: color-mix(in srgb, var(--wp--preset--color--teal) 75%, var(--wp--preset--color--deep-blue)); }
.csa-marks__svg .is-dark .l { fill: var(--wp--preset--color--deep-blue); }
.csa-marks__svg .is-dark .r { fill: color-mix(in srgb, var(--wp--preset--color--deep-blue) 55%, var(--wp--preset--color--navy)); }

.csa-marks__svg .is-people .t { fill: color-mix(in srgb, var(--wp--preset--color--orange) 55%, var(--wp--preset--color--white)); }
.csa-marks__svg .is-people .l { fill: var(--wp--preset--color--orange); }
.csa-marks__svg .is-people .r { fill: color-mix(in srgb, var(--wp--preset--color--orange) 78%, var(--wp--preset--color--navy)); }
.csa-marks__svg .is-people polygon { stroke: var(--wp--preset--color--orange); }

.csa-marks__svg .is-off .t { fill: color-mix(in srgb, var(--wp--preset--color--sky) 18%, transparent); }
.csa-marks__svg .is-off .l { fill: color-mix(in srgb, var(--wp--preset--color--cyan) 12%, transparent); }
.csa-marks__svg .is-off .r { fill: color-mix(in srgb, var(--wp--preset--color--teal) 30%, transparent); }
.csa-marks__svg .is-off polygon { stroke: color-mix(in srgb, var(--wp--preset--color--cyan) 35%, transparent); }

.csa-marks__svg .iso-lbl {
	fill: var(--wp--preset--color--navy);
	font: 700 7px var(--wp--preset--font-family--manrope);
	letter-spacing: 0.14em;
}

@media (prefers-reduced-motion: no-preference) {
	.csa-marks.is-visible .iso-bob {
		animation: csa-bob 3.6s ease-in-out infinite;
	}
}

@keyframes csa-bob {
	50% { transform: translateY(-6px); }
}

/* ---------- shared: dark cards (why Insyghts, how to apply) ---------- */

.gov-section .gov-head p.csa-accent {
	color: var(--wp--preset--color--orange);
}

/* Card: tag and icon side by side (inc/line-icons.php puts the icon first),
   then heading and text on their own rows. */
.csa-card {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: flex-end;
}

.csa-card > :not(.csa-tag, .csa-num, .line-icon) {
	flex-basis: 100%;
}

.csa-card .csa-tag,
.csa-card .csa-num {
	order: -1;
}

.gov-section .csa-tag {
	display: inline-block;
	margin-bottom: 17px;
	padding: 4px 10px;
	border: 1px solid var(--wp--preset--color--cyan);
	border-radius: 999px;
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--teal);
	font: 600 0.7rem/normal var(--wp--preset--font-family--plex-mono);
	letter-spacing: 0.08em;
}

.gov-section .csa-tag.is-muted {
	border-color: color-mix(in srgb, var(--wp--preset--color--sky) 30%, transparent);
	background: rgba(255, 255, 255, 0.08);
	color: var(--gov-on-dark-2);
}

.csa-card .line-icon {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--wp--preset--color--cyan) 12%, transparent);
	color: var(--wp--preset--color--cyan);
}

.csa-card .line-icon svg {
	width: 24px;
	height: 24px;
}

/* ---------- 6 the pathway ---------- */

.csa-path {
	background: var(--gov-soft);
}

/* Staircase: inc/csa-stair.php draws it from the step H3s and the kicker
   List (.is-rendered); the List only shows in the editor. */
.csa-pathway.is-rendered > .csa-stair__kickers {
	display: none;
}

.csa-stair svg {
	display: block;
	width: 100%;
	margin: 0 0 30px;
}

/* Below 1101px the wide staircase's labels would drop under 11px, so the
   compact stacked version shows instead. */
.csa-stair__compact {
	max-width: 520px;
}

@media (min-width: 1101px) {
	.csa-stair .csa-stair__compact {
		display: none;
	}
}

@media (max-width: 1100px) {
	.csa-stair .csa-stair__wide {
		display: none;
	}
}

.csa-stair__step.is-step-1 rect { fill: var(--wp--preset--color--sky); opacity: 0.55; }
.csa-stair__step.is-step-2 rect { fill: color-mix(in srgb, var(--wp--preset--color--cyan) 55%, var(--wp--preset--color--sky)); opacity: 0.6; }
.csa-stair__step.is-step-3 rect { fill: color-mix(in srgb, var(--wp--preset--color--cyan) 45%, var(--wp--preset--color--teal)); opacity: 0.75; }
.csa-stair__step.is-step-4 rect { fill: var(--wp--preset--color--teal); }

.csa-stair__name {
	fill: var(--wp--preset--color--navy);
	font: 800 22px var(--wp--preset--font-family--manrope);
}

.csa-stair__compact .csa-stair__name {
	font-size: 16px;
}

.csa-stair__compact .csa-stair__kicker {
	font-size: 11.5px;
	letter-spacing: 1.2px;
}

.csa-stair__kicker {
	fill: var(--wp--preset--color--teal);
	font: 400 12px var(--wp--preset--font-family--plex-mono);
	letter-spacing: 1.5px;
}

.csa-stair__step:is(.is-step-3, .is-step-4) .csa-stair__name { fill: var(--wp--preset--color--white); }
.csa-stair__step.is-step-3 .csa-stair__kicker { fill: var(--wp--preset--color--mist); }
.csa-stair__step.is-step-4 .csa-stair__kicker { fill: var(--wp--preset--color--sky); }

.csa-stair__line {
	fill: none;
	stroke: var(--wp--preset--color--orange);
	stroke-width: 2;
	stroke-dasharray: 5 7;
}

.csa-stair__end {
	fill: var(--wp--preset--color--orange);
}

@media (prefers-reduced-motion: no-preference) {
	.csa-stair__line {
		animation: gov-dash 1.2s linear infinite;
	}
}

/* Steps: four across, on white. */
@media (min-width: 961px) {
	.csa-steps.gov-steps {
		grid-template-columns: repeat(4, 1fr);
	}
}

.csa-steps .gov-step .line-icon {
	background: var(--wp--preset--color--white);
}

.csa-steps .gov-step p {
	color: var(--wp--preset--color--slate);
}

/* ---------- 7 eligibility ---------- */

.csa-elig {
	background: var(--wp--preset--color--white);
}

.csa-tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-bottom: 26px !important;
}

@media (min-width: 961px) {
	.csa-tiles {
		grid-template-columns: repeat(3, 1fr);
	}
}

.csa-tile {
	position: relative;
	padding: 10px 16px 20px;
	border: 1px solid var(--gov-line);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	text-align: center;
}

.csa-tile__art {
	margin: 0 !important;
}

.csa-tile__art img {
	display: block;
	width: auto;
	height: 190px;
	margin: 0 auto 7px;
}

.gov-section .csa-tile h3 {
	font: 700 1rem/normal var(--wp--preset--font-family--manrope);
}

.gov-section .csa-tile p:not(.csa-tag) {
	color: var(--wp--preset--color--slate);
	font-size: 0.85rem;
	line-height: 1.82;
}

.gov-section .csa-tile .csa-tag {
	margin: 10px 0 14px;
}

/* Light-section grey tag. */
.gov-section:not(.gov-gap, .hia-dark) .csa-tag.is-muted {
	border-color: color-mix(in srgb, var(--wp--preset--color--slate) 18%, var(--wp--preset--color--cloud));
	background: var(--wp--preset--color--cloud);
	color: var(--wp--preset--color--slate);
}

/* Hover: lift, Cyan border and shadow (pre-rendered, faded in); the
   drawing grows a little. */
.csa-tile::after,
.csa-card.is-hover::after {
	border: 1px solid var(--wp--preset--color--cyan);
	box-shadow: 0 22px 44px rgba(7, 26, 43, 0.25), 0 0 0 1px rgba(43, 184, 235, 0.35);
}

.csa-tile:hover::after {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.csa-tile {
		transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.csa-tile:hover {
		transform: translateY(-8px);
	}

	.csa-tile__art img {
		transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.csa-tile:hover .csa-tile__art img {
		transform: scale(1.08) translateY(-6px);
	}
}

.csa-elig__box {
	margin-top: 28px !important;
	padding: 26px 28px;
	border: 1px solid var(--hia-line);
	border-radius: 18px;
	background: var(--wp--preset--color--white);
}

.gov-section .csa-elig__box > p {
	margin: 6px 0 14px;
	color: var(--wp--preset--color--slate);
}

.gov-section .csa-elig__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	padding: 0;
	list-style: none;
}

@media (min-width: 601px) {
	.gov-section .csa-elig__list {
		grid-template-columns: 1fr 1fr;
	}
}

.csa-elig__list li {
	margin: 0;
	padding: 14px;
	border-left: 3px solid var(--wp--preset--color--cyan);
	border-radius: 12px;
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--slate);
	font-size: 0.82rem;
	line-height: 1.89;
}

.csa-elig__list strong {
	display: block;
	color: var(--wp--preset--color--navy);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.63;
}

.gov-section .csa-src {
	margin-top: 22px;
	color: var(--wp--preset--color--slate);
	font-size: 0.78rem;
}

.csa-src a {
	color: var(--wp--preset--color--teal);
}

/* ---------- 8 how to apply ---------- */

.gov-section .csa-num {
	margin-bottom: 22px;
	color: var(--wp--preset--color--teal);
	font: 400 0.72rem/normal var(--wp--preset--font-family--plex-mono);
	letter-spacing: 0.08em;
}

.gov-section .csa-link {
	margin-top: 10px;
	font-size: 0.92rem;
}

.csa-link a {
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--sky);
	font-weight: 500;
	text-decoration: none;
}

/* Hover: lift, Cyan border and glow (the .csa-tile overlay); the icon
   fills Cyan. */
.csa-card.is-hover {
	position: relative;
}

.csa-card.is-hover:hover::after {
	opacity: 1;
}

.csa-card.is-hover .line-icon {
	transition: background-color 0.35s ease, color 0.35s ease;
}

.csa-card.is-hover:hover .line-icon {
	background: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--navy);
}

@media (prefers-reduced-motion: no-preference) {
	.csa-card.is-hover {
		transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.js .reveal.is-in.csa-card.is-hover {
		transition: opacity 0.7s ease var(--reveal-d, 0s), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.csa-card.is-hover:hover {
		transform: translateY(-8px) !important;
	}
}

.csa-apply__cta {
	justify-content: center;
	margin-top: 28px !important;
}

/* ---------- 9 pricing ---------- */

/* Tabs, then the active tab's switch, on one row where they fit. */
.csa-price__bar .csa-seg {
	flex-wrap: wrap;
	margin-right: 10px;
}

.csa-price__bar .csa-seg[hidden],
.csa-price [hidden] {
	display: none !important;
}

/* Source blocks: only feed the calculator. Without JS the first pane's first
   Table shows (with its caption), plus the SMEs Go Digital link. */
.csa-pane__name,
.csa-pane__switch,
.csa-pane__addons,
.csa-pane__later,
.csa-pane__none,
.csa-price .csa-pkg.is-addon,
.csa-price .csa-pkg ~ .csa-pkg,
.csa-price:not(.is-ready) .csa-pane ~ .csa-pane,
.csa-price.is-ready .csa-pkg,
.csa-price.is-ready .csa-price__nojs {
	display: none;
}

.csa-price.is-ready .csa-pane__later,
.csa-price.is-ready .csa-pane__none {
	display: block;
	margin-top: 10px;
	color: var(--hia-fine-dark);
	font-size: 0.78rem;
}

/* Table styles are shared with hia.css (.hia-price__table); here every
   cell stays on one line. */
.csa-pkg :is(th, td) {
	white-space: nowrap;
}

.csa-pkg td a,
.hia-price__table td a {
	color: inherit;
}

.csa-pkg figcaption {
	margin: 0;
	padding: 14px;
	color: var(--wp--preset--color--white);
	font: 700 1rem/1.6 var(--wp--preset--font-family--manrope);
}

.gov-section .csa-price__nojs {
	margin-top: 18px;
}

.csa-price__nojs a {
	color: var(--wp--preset--color--sky);
}

/* Add-on checkboxes. */
.gov-section .wp-block-group > .csa-calc__add {
	margin-top: 22px;
}

.gov-section .csa-calc__add > p {
	font-weight: 700;
}

.csa-calc__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 4px;
}

.csa-calc__checks label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--cyan) 35%, transparent);
	border-radius: 999px;
	color: color-mix(in srgb, var(--wp--preset--color--mist) 80%, var(--wp--preset--color--sky));
	font-size: 0.86rem;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.csa-calc__checks input {
	accent-color: var(--wp--preset--color--cyan);
	/* As the mockup: each tick box sits 16px down in a taller pill. */
	width: 13px;
	height: 16px;
	margin: 16px 0 6px;
}

.csa-calc__checks label:has(input:checked) {
	border-color: var(--wp--preset--color--cyan);
	background: color-mix(in srgb, var(--wp--preset--color--cyan) 18%, transparent);
	box-shadow: 0 0 14px rgba(43, 184, 235, 0.35);
}

.csa-price .csa-calc__pick .hia-calc__label {
	margin-top: 18px;
}

/* Package buttons: full width, Orange. */
.csa-calc__pkgs {
	display: grid !important;
	gap: 10px;
	margin-top: 18px !important;
}

.csa-orange .wp-block-button__link {
	border-color: var(--wp--preset--color--orange);
	background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--orange) 75%, var(--wp--preset--color--white)), var(--wp--preset--color--orange));
	box-shadow: 0 0 18px rgba(255, 144, 37, 0.45);
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

.csa-orange .wp-block-button__link:hover {
	color: var(--wp--preset--color--navy);
}

.csa-orange .wp-block-button__link::after {
	box-shadow: 0 0 26px rgba(255, 144, 37, 0.7);
}

/* Incident response: two boxes, no calculator. */
.csa-ir {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 901px) {
	.csa-ir {
		grid-template-columns: 1fr 1fr;
	}
}

.gov-section .csa-ir h3 {
	margin-top: 12px;
}

.gov-section .csa-ir .csa-tag {
	margin-bottom: 12px;
}

.gov-section .csa-ir__note {
	margin-top: 8px !important;
}

.gov-section .csa-ir .hia-calc__label {
	margin-top: 18px;
}

.csa-ir__from span {
	color: var(--hia-fine-dark);
	font-size: 1.1rem;
}

.gov-section .csa-rows {
	padding: 0;
	list-style: none;
}

.csa-pricing .csa-pane__fine {
	margin-top: 10px !important;
}

.csa-pkg tr:has(em) td:nth-child(4) {
	color: inherit;
	font-weight: 400;
}