/* Healthcare HIA page (/governance/healthcare-hia/). Builds on governance.css
   (service-page hero, sections, reveal). Colours and fonts come from
   theme.json presets only; tints are color-mix() of presets. */

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

.svc-hero__crumb a {
	color: var(--wp--preset--color--teal);
	text-decoration: none;
}

/* Badge: a bold Teal pill ("CSA") before the text. */
.svc-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px !important;
	padding: 6px 14px 6px 8px;
	border: 1px solid var(--gov-line);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--teal);
	font-size: 0.8rem;
	line-height: 1.6;
}

.svc-hero__badge strong {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
	font: 600 0.68rem/normal var(--wp--preset--font-family--plex-mono);
}

.hia-hero .svc-hero__title {
	font-size: clamp(2.4rem, 4.4vw, 3.9rem);
}

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

.hia-hero .svc-hero__chips {
	gap: 10px;
	margin-top: 34px !important;
}

.hia-hero .svc-hero__chips li:last-child {
	border-color: var(--wp--preset--color--cyan);
}

/* Illustration: the SVG file draws 40 units above its 440×460 frame (the
   shield's pulse), so it is pulled up by that much to sit where the frame is. */
.hia-hero__art {
	width: 100%;
	max-width: 460px;
	margin: 20px auto 0;
}

.hia-hero__art img {
	display: block;
	width: 100%;
	height: auto;
	margin-top: calc(-40 / 440 * 100%);
}

@media (min-width: 961px) {
	.hia-hero__art {
		max-width: 600px;
		margin: 0 0 0 auto;
	}
}

/* ---------- shared: dark sections, card grids, cards, tags ---------- */

:root {
	--hia-line: color-mix(in srgb, var(--wp--preset--color--teal) 10%, var(--wp--preset--color--mist));
	--hia-dark-line: color-mix(in srgb, var(--wp--preset--color--cyan) 25%, transparent);
	--hia-fine-dark: color-mix(in srgb, var(--gov-on-dark-2) 75%, var(--wp--preset--color--slate));
	--hia-muted-dark: color-mix(in srgb, var(--wp--preset--color--slate) 50%, var(--wp--preset--color--sky));
}

.hia-dark,
.so-dark {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	--focus-ring: var(--wp--preset--color--sky);
}

.hia-dark .eyebrow {
	color: var(--wp--preset--color--cyan);
}

.hia-dark .gov-head p:not(.eyebrow) {
	color: var(--gov-on-dark);
}

.hia-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

@media (min-width: 561px) {
	.hia-grid--4,
	.hia-grid--3 {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 901px) {
	.hia-grid--4 { grid-template-columns: repeat(4, 1fr); }
	.hia-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.hia-card {
	position: relative;
	padding: 24px;
	border: 1px solid var(--hia-line);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
}

.hia-card :is(h3, h4) {
	margin: 12px 0 6px !important;
}

.gov-section .hia-card h4 {
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

.hia-card p:not(.hia-ref) {
	color: var(--wp--preset--color--slate);
	font-size: 0.92rem;
}

.hia-dark .hia-card {
	border-color: var(--hia-dark-line);
	background: var(--wp--preset--color--deep-blue);
}

.hia-dark .hia-card p:not(.hia-ref) {
	color: var(--gov-on-dark);
}

/* Hover: a lift plus a pre-rendered shadow faded in. */
.hia-card::after {
	box-shadow: 0 18px 40px -18px rgba(16, 45, 64, 0.35);
}

.hia-card:hover::after {
	opacity: 1;
}

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

	.js .reveal.is-in.hia-card {
		transition: opacity 0.7s ease var(--reveal-d, 0s), transform 0.35s ease;
	}

	.hia-card:hover {
		transform: translateY(-4px) !important;
	}
}

/* Section tag, e.g. "PART 2" or "S.65". */
.hia-ref {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--teal);
	font: 400 0.68rem/1.6 var(--wp--preset--font-family--plex-mono);
	letter-spacing: 0.08em;
}

.hia-dark .hia-ref {
	background: color-mix(in srgb, var(--wp--preset--color--cyan) 12%, transparent);
	color: var(--wp--preset--color--sky);
}

.hia-fine {
	margin-top: 18px !important;
	color: var(--wp--preset--color--slate);
	font-size: 0.78rem;
}

.hia-dark .hia-fine {
	color: var(--hia-fine-dark);
}

/* ---------- 2 what is HIA ---------- */

.gov-section .hia-what__sub {
	margin: 56px 0 0;
}

/* Timeline: a List, each item a bold date then its text. The first node is
   Cyan (done), the rest Orange (to come); the line draws left to right as
   the list comes into view. */
.hia-tl {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: 24px;
	margin-top: 22px !important;
	padding: 0;
	list-style: none;
}

@media (min-width: 761px) {
	.hia-tl {
		grid-template-columns: repeat(4, 1fr);
		row-gap: 0;
	}

	.hia-tl::before {
		content: "";
		position: absolute;
		top: 9px;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(90deg, var(--wp--preset--color--cyan), var(--wp--preset--color--teal));
		transform-origin: left;
	}
}

.hia-tl li {
	position: relative;
	margin: 0;
	padding: 34px 14px 0 0;
	color: var(--gov-on-dark);
	font-size: 0.85rem;
	line-height: calc(1.6 * var(--wp--preset--font-size--body));
}

.hia-tl li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	border: 3px solid var(--wp--preset--color--orange);
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	box-shadow: 0 0 14px rgba(255, 144, 37, 0.6);
}

.hia-tl li:first-child::before {
	border-color: var(--wp--preset--color--cyan);
	box-shadow: 0 0 14px rgba(43, 184, 235, 0.6);
}

.hia-tl strong {
	display: block;
	color: var(--wp--preset--color--white);
	font: 700 1.05rem/1.6 var(--wp--preset--font-family--manrope);
}

@media (prefers-reduced-motion: no-preference) {
	.js .hia-tl::before {
		transform: scaleX(0);
		transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.js .hia-tl.is-in::before {
		transform: none;
	}

	.js .hia-tl.is-instant::before {
		transition: none;
	}
}

/* Two columns, text and art, from 901px. */
.hia-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 56px;
	align-items: center;
}

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

/* ---------- 3 who it applies to ---------- */

.hia-who {
	background: var(--wp--preset--color--white);
}

.gov-section .hia-who__head {
	margin-bottom: 0 !important;
}

.hia-who__label {
	margin-top: 22px !important;
	font-weight: 600;
}

.hia-who__list {
	margin-top: 18px !important;
	padding: 0;
	list-style: none;
	column-gap: 28px;
}

@media (min-width: 561px) {
	.hia-who__list {
		columns: 2;
	}
}

.hia-who__list li {
	position: relative;
	margin: 0;
	padding: 9px 0 9px 26px;
	border-bottom: 1px dashed var(--gov-line);
	font-size: 0.93rem;
	break-inside: avoid;
}

.hia-who__list li::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 4px;
	width: 9px;
	height: 9px;
	border-radius: 3px;
	background: var(--wp--preset--color--cyan);
}

.hia-callout {
	margin-top: 26px !important;
	padding: 20px 22px;
	border-left: 4px solid var(--wp--preset--color--cyan);
	border-radius: 14px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.hia-callout strong {
	color: var(--wp--preset--color--sky);
}

.hia-who__art {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
}

.hia-who__art img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- 4 NEHR ---------- */

.gov-section .hia-nehr__head {
	margin-bottom: 0 !important;
}

/* Record types: chips on dark. */
.hia-chips-dark {
	margin-top: 20px !important;
}

.hia-chips-dark 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) 8%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--sky) 20%, var(--wp--preset--color--mist));
	font-size: 0.8rem;
	line-height: 1.6;
}

.hia-grid--2 {
	gap: 14px;
}

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

.hia-nehr__cards {
	margin-top: 24px !important;
}

/* Hub: inc/hia-hub.php draws the SVG from the List and Paragraph
   (.is-rendered); those only show in the editor. */
.hia-hub {
	position: relative;
	width: 100%;
	max-width: 500px;
	aspect-ratio: 1;
	margin: 0 auto !important;
}

.hia-hub.is-rendered > * {
	display: none;
}

.hia-hub.is-rendered > .hia-hub__svg {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hia-hub__orbit circle {
	fill: none;
	stroke: var(--wp--preset--color--sky);
	stroke-opacity: 0.2;
}

.hia-hub__orbit .is-dashed {
	stroke: var(--wp--preset--color--cyan);
	stroke-opacity: 0.35;
	stroke-dasharray: 3 9;
}

.hia-hub__spoke {
	stroke: var(--wp--preset--color--cyan);
	stroke-opacity: 0.45;
	stroke-width: 1.5;
}

.hia-hub__pill rect {
	fill: var(--wp--preset--color--deep-blue);
	stroke: var(--wp--preset--color--cyan);
}

.hia-hub__pill text {
	fill: var(--wp--preset--color--white);
	font: 400 11px var(--wp--preset--font-family--inter);
}

/* Pill labels render at 11px or more: where the hub is drawn under 500px
   wide, each pill (box and label) is scaled up about its centre by at least
   500 / (narrowest hub width in that range). Full size from 564 to 900px
   and from 1120px; below 481px the hub shows as chips (further down). */
.hia-hub__pill {
	transform-box: fill-box;
	transform-origin: center;
}

@media (min-width: 481px) and (max-width: 563px) {
	.hia-hub__pill { transform: scale(1.12); } /* hub 449px at 481 */
}

@media (min-width: 901px) and (max-width: 999px) {
	.hia-hub__pill { transform: scale(1.29); } /* hub 390px at 901 */
}

@media (min-width: 1000px) and (max-width: 1119px) {
	.hia-hub__pill { transform: scale(1.14); } /* hub 440px at 1000 */
}

.hia-hub__disc {
	fill: var(--wp--preset--color--navy);
	stroke: var(--wp--preset--color--cyan);
	stroke-width: 2.5;
	filter: drop-shadow(0 0 18px rgba(43, 184, 235, 0.7));
}

.hia-hub__title {
	fill: var(--wp--preset--color--white);
	font: 800 22px var(--wp--preset--font-family--manrope);
}

.hia-hub__sub {
	fill: var(--wp--preset--color--sky);
	font: 400 8.5px var(--wp--preset--font-family--plex-mono);
	letter-spacing: 1px;
}

.hia-hub__dot {
	fill: var(--wp--preset--color--sky);
	display: none;
}

.hia-hub__dot.is-out {
	fill: var(--wp--preset--color--orange);
}

/* Motion: the orbit turns and a dot runs along each spoke (every other one
   outwards), only while the hub is on screen (site.js .is-visible). */
@media (prefers-reduced-motion: no-preference) {
	.hia-hub__orbit {
		transform-origin: 250px 250px;
		animation: spin 40s linear infinite paused;
	}

	.hia-hub__dot {
		display: inline;
		opacity: 0;
		animation: hia-dot 3.2s cubic-bezier(0.5, 0, 0.5, 1) infinite paused;
	}

	.hia-hub__dot.is-out {
		animation-direction: reverse;
	}

	.hia-hub.is-visible :is(.hia-hub__orbit, .hia-hub__dot) {
		animation-play-state: running;
	}
}

@keyframes hia-dot {
	0% { opacity: 0; transform: none; }
	15%, 85% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}

/* ---------- 5 requirements ---------- */

.hia-req {
	background: var(--wp--preset--color--cloud);
}

/* Without JavaScript every panel shows, its H3 above its cards. */
.hia-tabs__panel + .hia-tabs__panel {
	margin-top: 40px !important;
}

.hia-tabs__label {
	margin-bottom: 18px !important;
}

/* site.js turns the H3s into a tab list (.is-tabbed): one panel at a time.
   The H3 stays for screen readers (keeps the heading order), off screen. */
.hia-tabs.is-tabbed .hia-tabs__label {
	margin: 0 !important; /* visually hidden in site.css */
}

.hia-tabs.is-tabbed .hia-tabs__panel {
	margin-top: 0 !important;
}

.hia-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.hia-tabs__tab {
	position: relative;
	padding: 9px 18px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--teal) 14%, var(--wp--preset--color--cloud));
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--deep-blue);
	font: 500 0.88rem/normal var(--wp--preset--font-family--inter);
	cursor: pointer;
}

.hia-tabs__tab[aria-selected="true"] {
	border-color: var(--wp--preset--color--cyan);
	background: linear-gradient(180deg, var(--wp--preset--color--teal), var(--wp--preset--color--deep-blue));
	box-shadow: 0 0 14px rgba(43, 184, 235, 0.35);
	color: var(--wp--preset--color--white);
}

.hia-tabs__tab:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	.hia-tabs.is-tabbed .hia-tabs__panel:not([hidden]) {
		animation: hia-panel-in 0.5s ease;
	}
}

@keyframes hia-panel-in {
	from { opacity: 0; transform: translateY(10px); }
}

/* ---------- 6 non-compliance ---------- */

.hia-pen {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}

@media (min-width: 901px) {
	.hia-pen {
		grid-template-columns: 1.1fr 0.9fr;
	}
}

.hia-pen__chart svg {
	display: block;
	width: 100%;
	max-width: 520px;
	margin: auto;
	overflow: visible;
}

/* Bars: face shades are the bar colour mixed toward Navy. */
.hia-pen__bar { --c: var(--wp--preset--color--sky); cursor: pointer; }
.hia-pen__bar.is-orange { --c: var(--wp--preset--color--orange); }
.hia-pen__bar.is-cyan { --c: var(--wp--preset--color--cyan); }

.hia-pen__bar polygon {
	stroke: color-mix(in srgb, var(--wp--preset--color--navy) 60%, transparent);
	stroke-width: 0.8;
	stroke-linejoin: round;
}

.hia-pen__bar .t { fill: var(--c); }
.hia-pen__bar .l { fill: color-mix(in srgb, var(--c) 70%, var(--wp--preset--color--navy)); }
.hia-pen__bar .r { fill: color-mix(in srgb, var(--c) 45%, var(--wp--preset--color--navy)); }

/* Highlight: a glowing, brighter copy of the bar fades in; the rest dim. */
.hia-pen__glow {
	opacity: 0;
	filter: drop-shadow(0 0 14px rgba(43, 184, 235, 0.9)) brightness(1.15);
	pointer-events: none;
}

.hia-pen__faces,
.hia-pen__glow {
	transition: opacity 0.3s ease;
}

.hia-pen__bar.is-lit .hia-pen__glow { opacity: 1; }
.hia-pen__bar.is-dim .hia-pen__faces { opacity: 0.35; }

.hia-pen__val {
	fill: var(--wp--preset--color--white);
	font: 800 13px var(--wp--preset--font-family--manrope);
}

/* Bars grow from their base, 120 ms apart, as the chart comes into view. */
@media (prefers-reduced-motion: no-preference) {
	.js .hia-pen__chart .hia-pen__bar {
		transform: scaleY(0);
		transition: transform 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) var(--bd, 0s);
	}

	.js .hia-pen__chart.is-in .hia-pen__bar {
		transform: none;
	}

	.js .hia-pen__chart.is-instant .hia-pen__bar {
		transition: none;
	}
}

.hia-pen__rows {
	display: grid;
	gap: 10px;
}

.hia-pen__row {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 14px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--cyan) 20%, transparent);
	border-radius: 12px;
	background: var(--wp--preset--color--deep-blue);
	position: relative;
}

.hia-pen__row:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
}

/* Row highlight: Cyan border and glow (pre-rendered, faded in), a slight
   shift and scale; the other rows dim. */
.hia-pen__row::after {
	box-shadow: 0 0 0 1px var(--wp--preset--color--cyan), 0 0 28px rgba(43, 184, 235, 0.4);
}

.hia-pen__row.is-lit::after { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
	.hia-pen__row,
	.js .reveal.is-in.hia-pen__row {
		transition: opacity 0.35s ease, transform 0.35s ease;
	}

	.hia-pen__row.is-lit {
		transform: translateX(-8px) scale(1.02) !important;
	}
}

.js .reveal.is-in.hia-pen__row.is-dim,
.hia-pen__row.is-dim {
	opacity: 0.45;
}

.hia-pen__amt {
	color: var(--wp--preset--color--sky);
	font: 800 1.15rem/normal var(--wp--preset--font-family--manrope);
	letter-spacing: -0.02em;
}

.hia-pen__amt.is-high {
	color: var(--wp--preset--color--orange);
}

.hia-pen__text p {
	color: var(--gov-on-dark);
	font-size: 0.86rem;
}

.hia-pen__text .hia-pen__jail {
	margin-bottom: 2px !important;
	color: var(--wp--preset--color--white);
	font-size: 0.9rem;
	font-weight: 600;
}

.hia-pen__text .hia-pen__ref {
	margin-top: 2px !important;
	color: var(--wp--preset--color--sky);
	font: 400 0.66rem/1.6 var(--wp--preset--font-family--plex-mono);
	opacity: 0.8;
}

.hia-pen__fine {
	margin-top: 22px !important;
}

/* ---------- 7 where patient data lives ---------- */

.hia-data {
	background: var(--wp--preset--color--white);
}

/* Systems in a row joined by pipes (inc/hia-flow.php), stacked below 961px. */
.hia-flow {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	margin-top: 10px !important;
}

@media (min-width: 961px) {
	.hia-flow {
		grid-template-columns: 1fr 60px 1fr 60px 1fr 60px 1fr;
	}
}

.hia-flow__node {
	text-align: center;
}

.hia-flow__art {
	margin: 0;
}

.hia-flow__art img {
	display: inline-block;
	width: 100%;
	max-width: 220px;
	height: 190px;
	object-fit: contain;
	vertical-align: baseline;
}

.hia-flow__name {
	font: 700 1rem/normal var(--wp--preset--font-family--manrope);
}

.hia-flow__note {
	color: var(--wp--preset--color--slate);
	font-size: 0.82rem;
	line-height: calc(1.6 * var(--wp--preset--font-size--body));
}

/* Pipe: a dashed Cyan line that flows towards the next system, with a
   shield badge in the middle. */
.hia-flow__pipe {
	position: relative;
	display: block;
	width: 3px;
	height: 40px;
	margin: 0 auto;
}

.hia-flow__line {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.hia-flow__line i {
	position: absolute;
	top: -32px;
	left: 0;
	width: 100%;
	height: calc(100% + 32px);
	background: repeating-linear-gradient(180deg, var(--wp--preset--color--cyan) 0 8px, transparent 8px 16px);
}

@media (min-width: 961px) {
	.hia-flow__pipe {
		width: auto;
		height: 3px;
		margin: 0;
	}

	.hia-flow__line i {
		top: 0;
		left: -32px;
		width: calc(100% + 32px);
		height: 100%;
		background: repeating-linear-gradient(90deg, var(--wp--preset--color--cyan) 0 8px, transparent 8px 16px);
	}
}

.hia-flow__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	padding: 4px;
	border: 2px solid var(--wp--preset--color--cyan);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	transform: translate(-50%, -50%);
	fill: none;
	stroke: var(--wp--preset--color--teal);
	stroke-width: 2.2;
}

@media (prefers-reduced-motion: no-preference) {
	.hia-flow__line i {
		animation: hia-pipe-down 1s linear infinite;
	}

	@media (min-width: 961px) {
		.hia-flow__line i {
			animation-name: hia-pipe;
		}
	}
}

@keyframes hia-pipe {
	to { transform: translateX(32px); }
}

@keyframes hia-pipe-down {
	to { transform: translateY(32px); }
}

/* ---------- 8a how we help ---------- */

/* Capability cards (Governance's .gov-cap) with the icon on a Mist tile. */
.hia-cap .line-icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: var(--wp--preset--color--mist);
}

.hia-cap .line-icon svg {
	width: 24px;
	height: 24px;
	margin-bottom: 16px; /* as the mockup: the icon sits 8px above the tile's centre */
	stroke-width: 1.7;
}

/* ---------- 8b what you receive ---------- */

.hia-receive {
	background: var(--wp--preset--color--white);
}

.hia-delivs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

@media (min-width: 481px) {
	.hia-delivs {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 961px) {
	.hia-delivs {
		grid-template-columns: repeat(5, 1fr);
	}
}

.hia-deliv {
	padding: 26px 22px;
	border-top: 3px solid var(--wp--preset--color--cyan);
	border-radius: 14px;
	background: var(--wp--preset--color--mist);
}

.hia-deliv .line-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 24px; /* the mockup's 14px plus the heading's 10px, which don't collapse there */
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wp--preset--color--teal), var(--wp--preset--color--deep-blue));
	color: var(--wp--preset--color--white);
}

.hia-deliv .line-icon svg {
	width: 24px;
	height: 24px;
}

.gov-section .hia-deliv h3 {
	margin-bottom: 8px;
}

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

.hia-price {
	--hia-box-line: color-mix(in srgb, var(--wp--preset--color--cyan) 25%, transparent);
}

/* Switch between the tables (built by site.js from their captions). */
.hia-seg {
	display: inline-flex;
	margin-bottom: 22px;
	padding: 4px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--cyan) 30%, transparent);
	border-radius: 999px;
	background: var(--wp--preset--color--deep-blue);
}

.hia-seg button {
	padding: 9px 20px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--hia-muted-dark);
	font: 500 0.88rem/normal var(--wp--preset--font-family--inter);
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.hia-seg button:hover {
	color: var(--wp--preset--color--white);
}

.hia-seg button[aria-pressed="true"] {
	background: var(--wp--preset--color--cyan);
	box-shadow: 0 0 16px rgba(43, 184, 235, 0.6);
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

.hia-seg button:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
}

/* Calculator: hidden until site.js has built it. */
.hia-calc {
	display: none;
}

.hia-price.is-ready .hia-calc {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 901px) {
	.hia-price.is-ready .hia-calc {
		grid-template-columns: 1fr 1fr;
	}
}

.hia-calc__box {
	padding: 26px;
	border: 1px solid var(--hia-box-line);
	border-radius: 18px;
	background: var(--wp--preset--color--deep-blue);
}

:is(.hia-calc__pick, .csa-calc__pick) .hia-calc__range {
	display: block;
	width: 100%;
	height: 16px;
	margin: 16px 0 7.8px; /* the mockup's inline slider: 6px plus the line's descent */
	accent-color: var(--wp--preset--color--cyan);
}

.hia-calc__ticks {
	position: relative;
	height: 16px;
	color: var(--hia-fine-dark);
	font: 400 0.68rem/normal var(--wp--preset--font-family--plex-mono);
}

.hia-calc__ticks span {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	white-space: nowrap;
}

.gov-section .hia-calc__label {
	margin-top: 22px;
	color: var(--hia-fine-dark);
	font: 400 0.72rem/1.6 var(--wp--preset--font-family--plex-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gov-section .hia-calc__pay {
	margin-top: 18px;
	color: var(--wp--preset--color--cyan);
	font: 800 3.2rem/1 var(--wp--preset--font-family--manrope);
}

.gov-section .hia-calc__tier {
	margin-top: 10px;
	color: var(--hia-fine-dark);
	font-size: 0.78rem;
}

.hia-calc__rows {
	padding: 0;
	list-style: none;
}

:is(.hia-calc__rows, .csa-rows) li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px dashed color-mix(in srgb, var(--wp--preset--color--sky) 20%, transparent);
	font-size: 0.93rem;
}

:is(.hia-calc__rows, .csa-rows) li:last-child {
	border: 0;
}

.hia-calc__rows li:nth-child(1) .hia-calc__val {
	color: var(--hia-fine-dark);
	text-decoration: line-through;
}

.hia-calc__rows li:nth-child(2) .hia-calc__val {
	color: var(--wp--preset--color--cyan);
}

.hia-calc__rows li:nth-child(2) .hia-calc__val::before {
	content: "– ";
}

.hia-calc__rows li:nth-child(3) {
	font-weight: 700;
}

:is(.hia-calc__cta, .csa-orange-cta) {
	margin-top: 18px !important;
}

:is(.hia-calc__cta, .csa-calc__pkgs, .csa-orange-cta) :is(.wp-block-button, .wp-block-button__link) {
	width: 100%;
	justify-content: center;
}

/* Tables: both show without JS; with it, one at a time (the switch names it). */
.hia-price .hia-price__table,
.csa-price .csa-pkg,
.hia-price .csa-price__out {
	margin: 22px 0 0;
	overflow-x: auto;
	border: 1px solid var(--hia-box-line);
	border-radius: 16px;
	background: var(--wp--preset--color--deep-blue);
}

:is(.hia-price__table, .csa-pkg) table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 0.88rem;
}

:is(.hia-price__table, .csa-pkg) :is(th, td) {
	padding: 11px 14px;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--sky) 12%, transparent);
	text-align: right;
}

:is(.hia-price__table, .csa-pkg) :is(th, td):first-child {
	text-align: left;
}

.hia-price__table td:not(:first-child) {
	white-space: nowrap;
}

:is(.hia-price__table, .csa-pkg) th {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--sky);
	font: 500 0.66rem/normal var(--wp--preset--font-family--plex-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

:is(.hia-price__table, .csa-pkg) thead {
	border: 0;
}

:is(.hia-price__table, .csa-pkg) td:nth-child(4) {
	color: var(--wp--preset--color--cyan);
	font-weight: 700;
}

/* Add-on rows (no "You pay" amount; site.js marks the others .is-tier). */
.hia-price.is-ready tr:not(.is-tier) td:nth-child(4) {
	color: inherit;
	font-weight: 400;
}

:is(.hia-price__table, .csa-pkg, .csa-price__out) td em {
	font-size: smaller;
	font-style: normal;
}

.hia-price__table tr.is-current td {
	background: color-mix(in srgb, var(--wp--preset--color--cyan) 14%, transparent);
}

.hia-price__table figcaption {
	margin: 0;
	padding: 14px;
	color: var(--wp--preset--color--white);
	font: 700 1rem/1.6 var(--wp--preset--font-family--manrope);
	caption-side: top;
}

.hia-price.is-ready .hia-price__table[hidden] {
	display: none;
}

.gov-section .hia-pricing .hia-fine,
.hia-pricing .hia-price + .hia-fine {
	margin-top: 10px !important;
}

/* Official source panel. */
.hia-source {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-top: 48px !important;
	padding: 28px 32px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--cyan) 30%, transparent);
	border-radius: 20px;
	background: linear-gradient(120deg, var(--wp--preset--color--deep-blue), var(--wp--preset--color--navy));
}

.hia-source__kicker {
	color: var(--wp--preset--color--cyan);
	font: 400 0.72rem/calc(1.6 * var(--wp--preset--font-size--body)) var(--wp--preset--font-family--plex-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gov-section .hia-source h3 {
	margin-top: 6px;
}

/* Phones (below 481px): the drawn hub's labels would render under 11px, so
   the hub shows as its blocks instead: the centre Paragraph, then the
   provider pills as chips. */
@media (max-width: 480px) {
	.hia-hub.is-rendered {
		display: flex;
		flex-direction: column;
		aspect-ratio: auto;
		text-align: center;
	}

	.hia-hub.is-rendered > .hia-hub__centre {
		order: -1;
	}

	.hia-hub.is-rendered > .hia-hub__svg {
		display: none;
	}

	.hia-hub.is-rendered > .hia-hub__centre {
		display: block;
		color: var(--wp--preset--color--sky);
		font: 400 0.72rem/1.6 var(--wp--preset--font-family--plex-mono);
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.hia-hub.is-rendered > .hia-hub__centre::first-line {
		color: var(--wp--preset--color--white);
		font: 800 1.4rem/1.3 var(--wp--preset--font-family--manrope);
		letter-spacing: -0.02em;
	}

	.hia-hub.is-rendered > .hia-hub__pills {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		margin-top: 14px !important;
		padding: 0;
		list-style: none;
	}

	.hia-hub__pills li {
		margin: 0;
		padding: 6px 14px;
		border: 1px solid var(--wp--preset--color--cyan);
		border-radius: 999px;
		background: var(--wp--preset--color--deep-blue);
		color: var(--wp--preset--color--white);
		font-size: 0.8rem;
		line-height: 1.6;
	}
}