/**
 * Cellular at Sea — T3 hub page template.
 *
 * Everything is scoped under .cas-hub so it cannot collide with Elementor's
 * global styles or with the Theme Builder header and footer.
 *
 * Design tokens mirror the Figma library (CAS / OneRoam Content).
 */

.cas-hub {
	--cas-navy: #011443;
	--cas-lavender: #f9f5ff;
	--cas-orange: #f64d3e;
	--cas-blue: #2174d4;
	--cas-cyan: #2cc6ef;
	--cas-white: #fff;
	--cas-border: rgba(1, 20, 66, 0.1);
	--cas-muted: rgba(1, 20, 66, 0.7);

	--cas-wrap: 1140px;
	--cas-gutter: 24px;
	--cas-radius: 14px;
	--cas-gap: 50px;
	--cas-gap-inner: 24px;

	--cas-font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	font-family: var(--cas-font);
	color: var(--cas-navy);
	background: var(--cas-white);
	overflow-x: clip;
}

/*
 * Hello Elementor caps main.site-main at the kit's container width. The hub
 * layout does its own centring in .cas-wrap so the tinted bands can run
 * edge to edge, so that cap has to come off here.
 */
main.site-main.cas-hub {
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

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

.cas-hub__article {
	display: flex;
	flex-direction: column;
	gap: var(--cas-gap);
	padding-block: var(--cas-gap);
}

.cas-wrap {
	width: 100%;
	max-width: calc(var(--cas-wrap) + (var(--cas-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--cas-gutter);
}

.cas-hub .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- Typography */

.cas-hub h1,
.cas-hub h2,
.cas-hub h3,
.cas-hub h4,
.cas-hub p,
.cas-hub ul,
.cas-hub ol,
.cas-hub dl,
.cas-hub dd,
.cas-hub figure {
	margin: 0;
	padding: 0;
}

.cas-hub ul,
.cas-hub ol {
	list-style: none;
}

.cas-h1 {
	font-size: 38px;
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: 0.008em;
	color: var(--cas-navy);
}

.cas-h2 {
	font-size: 34px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.008em;
	color: var(--cas-navy);
}

.cas-lede {
	font-size: 22px;
	font-weight: 500;
	line-height: 34px;
}

.cas-lede-sm,
.cas-body,
.cas-hub .cas-note {
	font-size: 18px;
	font-weight: 400;
	line-height: 26px;
}

.cas-lede p + p,
.cas-lede-sm p + p,
.cas-body p + p,
.cas-note p + p {
	margin-top: 12px;
}

.cas-hub a {
	color: var(--cas-orange);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.cas-hub a:hover,
.cas-hub a:focus-visible {
	color: var(--cas-navy);
}

/* Anything that reads as a control, not a link. */
.cas-hub .cas-btn,
.cas-hub .cas-chip,
.cas-hub .cas-video__play {
	text-decoration: none;
}

.cas-hub .cas-btn,
.cas-hub .cas-btn:hover,
.cas-hub .cas-btn:focus-visible {
	color: var(--cas-white);
}

.cas-hub .cas-chip,
.cas-hub .cas-chip:hover,
.cas-hub .cas-chip:focus-visible {
	color: var(--cas-navy);
}

.cas-hub :focus-visible {
	outline: 3px solid var(--cas-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

.cas-icon {
	width: 1em;
	height: 1em;
	display: block;
	flex: none;
}

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

.cas-hero .cas-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.cas-dateline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--cas-lavender);
	border: 1px solid var(--cas-border);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--cas-navy);
}

.cas-dateline .cas-icon {
	font-size: 18px;
}

.cas-dateline__dot {
	margin-inline: 4px;
}

/* ------------------------------------------------------------- Feature band */

.cas-band {
	background: var(--cas-lavender);
	padding-block: 44px;
}

.cas-band .cas-wrap {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.cas-band__title {
	font-size: 32px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.008em;
	text-align: center;
}

.cas-band__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cas-gap-inner);
}

.cas-feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.cas-feature__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cas-white);
}

.cas-feature__icon .cas-icon {
	font-size: 26px;
}

.cas-feature__icon--call {
	background: var(--cas-orange);
}

.cas-feature__icon--text {
	background: var(--cas-cyan);
}

.cas-feature__icon--data {
	background: var(--cas-blue);
}

.cas-feature__label {
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.02em;
}

.cas-feature__text {
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	max-width: 34ch;
}

/* ----------------------------------------------------------------- Sections */

.cas-section .cas-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--cas-gap-inner);
}

/* ------------------------------------------------------- Getting started */

.cas-steps {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cas-step {
	display: grid;
	grid-template-columns: 34px minmax(0, 415px) minmax(0, 1fr);
	column-gap: 32px;
	row-gap: 6px;
	align-items: start;
	position: relative;
	padding-block: 14px;
}

.cas-step__num {
	grid-row: 1 / span 2;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--cas-orange);
	color: var(--cas-white);
	font-size: 17px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

/* Connector line running behind the step numbers. */
.cas-step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 40px;
	bottom: -8px;
	width: 1px;
	background: var(--cas-border);
}

.cas-step__title {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	align-self: center;
}

.cas-step__text {
	grid-column: 3;
	grid-row: 1 / span 2;
	font-size: 18px;
	line-height: 26px;
	align-self: center;
}

.cas-cta {
	display: flex;
	justify-content: center;
	margin-top: 8px;
}

.cas-btn {
	display: inline-block;
	background: var(--cas-navy);
	color: var(--cas-white);
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 20px 44px;
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.cas-btn:hover,
.cas-btn:focus-visible {
	background: #0b2570;
	color: var(--cas-white);
}

/* -------------------------------------------------------- Three-up cards */

.cas-cards3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cas-gap-inner);
}

.cas-card3 {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 18px;
	border-top: 2px solid var(--cas-orange);
}

.cas-card3__num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--cas-orange);
	color: var(--cas-white);
	font-size: 13px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cas-card3__title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.cas-card3__text {
	font-size: 17px;
	line-height: 25px;
}

/* ---------------------------------------------------------------- Video */

.cas-video {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cas-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: linear-gradient(180deg, #f6d9c9 0%, #e98d6b 45%, #011443 62%, #011443 100%);
	overflow: hidden;
}

.cas-video__poster,
.cas-video__el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cas-video__el {
	background: #000;
}

/*
 * Specificity is deliberate: the Elementor kit styles bare <button> globally
 * (navy fill, large radius) and would otherwise paint straight over the poster.
 */
.cas-hub .cas-video__play,
.cas-hub .cas-video__play:hover,
.cas-hub .cas-video__play:focus {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0;
	background: transparent;
	background-color: transparent;
	/* Soft scrim so the white control stays legible over a light poster frame. */
	background-image: radial-gradient(circle 108px at 50% 50%, rgba(1, 20, 67, 0.52) 0%, rgba(1, 20, 67, 0.3) 48%, rgba(1, 20, 67, 0) 100%);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	color: var(--cas-white);
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.cas-video__icon .cas-icon {
	font-size: 62px;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

.cas-video__label {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.cas-video__caption,
.cas-crossref {
	font-size: 18px;
	line-height: 26px;
}

.cas-transcript {
	border: 1px solid var(--cas-border);
	border-radius: var(--cas-radius);
	padding: 14px 20px;
	background: var(--cas-white);
}

.cas-transcript > summary {
	cursor: pointer;
	font-size: 17px;
	font-weight: 500;
	list-style: none;
}

.cas-transcript > summary::-webkit-details-marker {
	display: none;
}

.cas-transcript > summary::before {
	content: "\002B";
	display: inline-block;
	width: 1.2em;
	font-weight: 600;
	color: var(--cas-orange);
}

.cas-transcript[open] > summary::before {
	content: "\2212";
}

.cas-transcript__body {
	padding-top: 12px;
	font-size: 17px;
	line-height: 26px;
}

/* ------------------------------------------------------------- Checklist */

.cas-checklist {
	background: var(--cas-navy);
	color: var(--cas-white);
	border-radius: var(--cas-radius);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cas-checklist__title {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--cas-white);
}

.cas-checklist__lead {
	font-size: 18px;
	line-height: 28px;
	color: rgba(255, 255, 255, 0.88);
}

.cas-checklist__list {
	display: flex;
	flex-direction: column;
}

.cas-checklist__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding-block: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 18px;
	line-height: 26px;
}

.cas-checklist__row:first-child {
	border-top: 0;
	padding-top: 4px;
}

.cas-checklist__tick {
	font-size: 22px;
	color: var(--cas-orange);
}

.cas-checklist__label {
	font-weight: 600;
}

.cas-checklist__note {
	color: rgba(255, 255, 255, 0.88);
}

.cas-badge {
	display: inline-block;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	padding: 6px 12px;
	vertical-align: middle;
}

.cas-badge--on {
	background: var(--cas-orange);
	color: var(--cas-white);
}

.cas-badge--off {
	background: var(--cas-white);
	color: var(--cas-navy);
	box-shadow: inset 0 0 0 1px var(--cas-border);
}

/* ------------------------------------------------------- Split + phone mock */

.cas-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 40px;
	align-items: start;
}

.cas-split__main {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Setup row: the navy checklist sits in the 1fr column with the phone mock
   beside it, and the note and closing copy run full width underneath. */
.cas-split--setup {
	margin-block-end: 24px;
}

.cas-split--setup .cas-checklist {
	margin: 0;
}

/* The mock and the note it explains share the aside column, stacked. */
.cas-split--setup .cas-split__aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* The mock is 280px pushed to the right of the 300px column, so the note
   takes the same width and alignment to share its left edge. */
.cas-split--setup .cas-split__note {
	width: 280px;
	max-width: 100%;
	margin-left: auto;
	font-size: 16px;
	line-height: 23px;
}

.cas-split--setup .cas-split__note p {
	margin: 0 0 8px;
}

.cas-split--setup .cas-split__note p:last-child {
	margin-block-end: 0;
}

.cas-mock {
	width: 280px;
	max-width: 100%;
	background: var(--cas-white);
	border: 1.5px solid var(--cas-navy);
	border-radius: var(--cas-radius);
	padding: 12px 16px 16px;
	margin-left: auto;
}

.cas-mock__handle {
	display: block;
	width: 44px;
	height: 4px;
	border-radius: 999px;
	background: var(--cas-border);
	margin: 0 auto 10px;
}

.cas-mock__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: 10px;
	font-size: 15px;
	font-weight: 500;
	border-top: 1px solid var(--cas-border);
}

.cas-mock__row:first-child {
	border-top: 0;
}

.cas-mock__row.is-muted {
	color: var(--cas-muted);
}

.cas-mock__bars {
	font-size: 16px;
}

/* ------------------------------------------------------------------- Cost */

.cas-cost {
	display: grid;
	grid-template-columns: 358px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.cas-cost__card {
	background: var(--cas-lavender);
	border-radius: var(--cas-radius);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cas-cost__card-title {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--cas-orange);
}

.cas-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 4px;
}

.cas-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--cas-white);
	border: 1px solid var(--cas-border);
	color: var(--cas-navy);
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
}

.cas-chip .cas-icon {
	font-size: 17px;
}

.cas-chip:hover,
.cas-chip:focus-visible {
	border-color: var(--cas-navy);
	color: var(--cas-navy);
}

.cas-cost__rows {
	display: flex;
	flex-direction: column;
}

.cas-cost__row {
	display: grid;
	grid-template-columns: minmax(0, 235px) minmax(0, 1fr);
	gap: 24px;
	padding-block: 20px;
	border-bottom: 1px solid var(--cas-border);
}

.cas-cost__row:last-child {
	border-bottom: 0;
}

.cas-cost__label {
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
}

.cas-cost__text {
	margin: 0;
	font-size: 18px;
	line-height: 26px;
}

/* ------------------------------------------------------------------ Stats */

.cas-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cas-gap-inner);
}

.cas-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	background: var(--cas-white);
	border: 1px solid var(--cas-border);
	border-radius: var(--cas-radius);
	padding: 22px 16px;
}

.cas-stat__value {
	font-size: 38px;
	font-weight: 800;
	line-height: 1;
}

.cas-stat__label {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cas-muted);
}

/* -------------------------------------------------------------------- FAQ */

.cas-faq {
	background: var(--cas-lavender);
	padding-block: 50px;
}

.cas-faq .cas-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--cas-gap-inner);
}

.cas-faq__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cas-faq__item {
	background: var(--cas-white);
	border-radius: var(--cas-radius);
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cas-faq__q {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
}

.cas-faq__a {
	font-size: 18px;
	line-height: 26px;
}

/* ------------------------------------------------------------- Breakpoints */

@media (max-width: 1024px) {

	.cas-hub {
		--cas-gap: 32px;
		--cas-gutter: 24px;
	}

	.cas-h1 {
		font-size: 30px;
	}

	.cas-h2 {
		font-size: 28px;
	}

	.cas-band__title {
		font-size: 26px;
	}

	.cas-lede {
		font-size: 20px;
		line-height: 30px;
	}

	.cas-step {
		grid-template-columns: 34px minmax(0, 300px) minmax(0, 1fr);
		column-gap: 20px;
	}

	.cas-step__title {
		font-size: 21px;
	}

	.cas-cost {
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
		gap: 24px;
	}

	.cas-cost__row {
		grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
		gap: 20px;
	}

	.cas-cost__label {
		font-size: 19px;
	}

	.cas-split {
		grid-template-columns: minmax(0, 1fr) 260px;
		gap: 24px;
	}

	.cas-feature__text,
	.cas-card3__text {
		font-size: 16px;
		line-height: 23px;
	}

	.cas-video__icon .cas-icon {
		font-size: 52px;
	}
}

@media (max-width: 780px) {

	.cas-cards3 {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.cas-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.cas-mock,
	.cas-split--setup .cas-split__note {
		margin-left: 0;
	}

	.cas-split--setup .cas-split__note {
		width: auto;
	}

	.cas-cost {
		grid-template-columns: minmax(0, 1fr);
	}

	.cas-cost__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}

	.cas-step {
		grid-template-columns: 34px minmax(0, 1fr);
		row-gap: 10px;
	}

	.cas-step__num {
		grid-row: 1;
	}

	.cas-step__text {
		grid-column: 2;
		grid-row: 2;
	}

	.cas-step:not(:last-child)::before {
		display: none;
	}
}

@media (max-width: 640px) {

	.cas-hub {
		--cas-gap: 24px;
		--cas-gap-inner: 16px;
		--cas-gutter: 16px;
	}

	.cas-hub__article {
		padding-block: 24px;
	}

	.cas-h1 {
		font-size: 24px;
	}

	.cas-h2 {
		font-size: 22px;
	}

	.cas-band {
		padding-block: 28px;
	}

	.cas-band__title {
		font-size: 22px;
	}

	.cas-band__grid,
	.cas-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.cas-lede {
		font-size: 18px;
		line-height: 27px;
	}

	.cas-lede-sm,
	.cas-body,
	.cas-hub .cas-note,
	.cas-video__caption,
	.cas-crossref,
	.cas-faq__a,
	.cas-cost__text {
		font-size: 16px;
		line-height: 22px;
	}

	.cas-step__title {
		font-size: 19px;
	}

	.cas-checklist {
		padding: 18px;
	}

	.cas-checklist__title {
		font-size: 20px;
	}

	.cas-checklist__lead,
	.cas-checklist__row {
		font-size: 16px;
		line-height: 24px;
	}

	.cas-faq {
		padding-block: 28px;
	}

	.cas-faq__item {
		padding: 18px;
	}

	.cas-faq__q {
		font-size: 19px;
	}

	.cas-btn {
		width: 100%;
		text-align: center;
		padding: 18px 20px;
		font-size: 16px;
	}

	.cas-stat__value {
		font-size: 32px;
	}

	.cas-video__icon .cas-icon {
		font-size: 44px;
	}
}

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

	.cas-hub * {
		transition: none !important;
	}
}

/* =========================================================================
 * Block library
 *
 * Scoped to .cas-hub--flex so the legacy page-one template above is
 * untouched while both templates coexist. When page one migrates, everything
 * above this banner can be deleted and the scope dropped.
 * ====================================================================== */

.cas-hub--flex .cas-section {
	margin-block: 0;
	padding-block: var(--cas-gap);
}

.cas-hub--flex .cas-section--tint {
	background: var(--cas-lavender);
}

.cas-hub--flex .cas-section + .cas-section--tint,
.cas-hub--flex .cas-section--tint + .cas-section {
	margin-block-start: 0;
}

.cas-hub--flex .cas-lead {
	max-width: 62ch;
	margin-block: 0 28px;
	font-size: 18px;
	line-height: 26px;
}

.cas-hub--flex .cas-lead > p:last-child,
.cas-hub--flex .cas-crossref > p:last-child {
	margin-block-end: 0;
}

/* --- Columns ---------------------------------------------------------- */

.cas-hub--flex .cas-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cas-col;
}

.cas-hub--flex .cas-col {
	border-block-start: 2px solid var(--cas-orange);
	padding-block-start: 16px;
}

.cas-hub--flex .cas-col__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 24px;
	block-size: 24px;
	border-radius: 50%;
	background: var(--cas-orange);
	color: var(--cas-white);
	font-size: 13px;
	font-weight: 600;
	margin-block-end: 10px;
}

.cas-hub--flex .cas-col__title {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
}

.cas-hub--flex .cas-col__body {
	font-size: 16px;
	line-height: 24px;
}

/* --- Icon rows -------------------------------------------------------- */

.cas-hub--flex .cas-icons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.cas-hub--flex .cas-icons__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.cas-hub--flex .cas-icons__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	color: var(--cas-white);
	background: var(--cas-navy);
}

.cas-hub--flex .cas-icons__mark .cas-icon {
	inline-size: 26px;
	block-size: 26px;
}

.cas-hub--flex .cas-icons--circles .cas-icons__item:nth-child(3n + 1) .cas-icons__mark { background: var(--cas-orange); }
.cas-hub--flex .cas-icons--circles .cas-icons__item:nth-child(3n + 2) .cas-icons__mark { background: var(--cas-cyan); }
.cas-hub--flex .cas-icons--circles .cas-icons__item:nth-child(3n + 3) .cas-icons__mark { background: var(--cas-blue); }

.cas-hub--flex .cas-icons--tiles .cas-icons__mark {
	inline-size: 100%;
	block-size: 72px;
	border: 1px solid var(--cas-border);
	border-radius: var(--cas-radius);
	background: var(--cas-white);
	color: var(--cas-navy);
}

.cas-hub--flex .cas-icons--plain .cas-icons__mark {
	inline-size: auto;
	block-size: auto;
	background: none;
	color: var(--cas-navy);
}

.cas-hub--flex .cas-icons--plain .cas-icons__mark .cas-icon {
	inline-size: 32px;
	block-size: 32px;
}

.cas-hub--flex .cas-icons__label {
	margin: 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.cas-hub--flex .cas-icons__body {
	font-size: 16px;
	line-height: 24px;
}

/* --- Steps ------------------------------------------------------------ */

.cas-hub--flex .cas-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cas-step;
}

.cas-hub--flex .cas-step {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.2fr);
	align-items: start;
	gap: 12px 16px;
	padding-block: 14px;
}

.cas-hub--flex .cas-step::before {
	counter-increment: cas-step;
	content: counter(cas-step);
	/* The legacy rules absolutely position this pseudo-element, which drops it
	   out of the grid and pushes the title into the 34px counter column. */
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 50%;
	background: var(--cas-orange);
	color: var(--cas-white);
	font-size: 14px;
	font-weight: 600;
}

.cas-hub--flex .cas-step__title {
	margin: 2px 0 0;
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
}

.cas-hub--flex .cas-step__body {
	font-size: 16px;
	line-height: 24px;
}

.cas-hub--flex .cas-btn-wrap {
	margin: 24px 0 0;
	text-align: center;
}

/* --- Stats ------------------------------------------------------------ */

.cas-hub--flex .cas-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cas-hub--flex .cas-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 22px 16px;
	border: 1px solid var(--cas-border);
	border-radius: var(--cas-radius);
	text-align: center;
}

.cas-hub--flex .cas-stat__value {
	font-size: 38px;
	line-height: 1;
	font-weight: 600;
	color: var(--cas-orange);
}

.cas-hub--flex .cas-stat__label {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cas-muted);
}

/* --- Checklist card --------------------------------------------------- */

.cas-hub--flex .cas-check {
	padding: 24px;
	border-radius: var(--cas-radius);
	background: var(--cas-navy);
	color: var(--cas-white);
}

.cas-hub--flex .cas-check__title {
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 30px;
	font-weight: 600;
}

.cas-hub--flex .cas-check__lead {
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 26px;
}

.cas-hub--flex .cas-check__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cas-hub--flex .cas-check__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-block: 14px;
	border-block-start: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 17px;
}

.cas-hub--flex .cas-check__tick {
	inline-size: 22px;
	block-size: 22px;
	color: var(--cas-orange);
	flex: none;
}

.cas-hub--flex .cas-check__label {
	font-weight: 600;
}

.cas-hub--flex .cas-check__note {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.85);
}

/* --- Note + phone mock ------------------------------------------------ */

.cas-hub--flex .cas-notemock {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	align-items: start;
	gap: 32px;
}

.cas-hub--flex .cas-notemock__text {
	font-size: 17px;
	line-height: 26px;
}

.cas-hub--flex .cas-mock {
	border: 1.5px solid var(--cas-navy);
	border-radius: var(--cas-radius);
	padding: 14px 16px 8px;
	background: var(--cas-white);
}

.cas-hub--flex .cas-mock__grip {
	display: block;
	inline-size: 42px;
	block-size: 3px;
	border-radius: 3px;
	margin: 0 auto 12px;
	background: var(--cas-border);
}

.cas-hub--flex .cas-mock__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cas-hub--flex .cas-mock__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-block: 10px;
	font-size: 15px;
}

.cas-hub--flex .cas-mock__row + .cas-mock__row {
	border-block-start: 1px solid var(--cas-border);
}

.cas-hub--flex .cas-mock__row.is-muted {
	color: var(--cas-muted);
}

.cas-hub--flex .cas-mock__bars {
	inline-size: 18px;
	block-size: 18px;
	flex: none;
}

/* --- Highlight card + rows -------------------------------------------- */

.cas-hub--flex .cas-split {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.cas-hub--flex .cas-card {
	padding: 24px;
	border-radius: var(--cas-radius);
	background: var(--cas-lavender);
}

.cas-hub--flex .cas-section--tint .cas-card {
	background: var(--cas-white);
}

.cas-hub--flex .cas-card__title {
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 30px;
	font-weight: 600;
	color: var(--cas-orange);
}

.cas-hub--flex .cas-card__body {
	font-size: 16px;
	line-height: 24px;
}

.cas-hub--flex .cas-rows {
	margin: 0;
}

.cas-hub--flex .cas-rows__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	gap: 16px;
	padding-block: 18px;
	border-block-end: 1px solid var(--cas-border);
}

.cas-hub--flex .cas-rows__row:last-child {
	border-block-end: 0;
}

.cas-hub--flex .cas-rows dt {
	margin: 0;
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
}

.cas-hub--flex .cas-rows dd {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

/* --- Glossary --------------------------------------------------------- */

.cas-hub--flex .cas-glossary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 28px;
	margin: 0;
}

.cas-hub--flex .cas-glossary__item {
	padding: 18px 20px;
	border-radius: var(--cas-radius);
	background: var(--cas-white);
}

.cas-hub--flex .cas-glossary__term {
	margin: 0 0 8px;
	padding-block-end: 8px;
	border-block-end: 1px solid var(--cas-orange);
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	color: var(--cas-orange);
}

.cas-hub--flex .cas-glossary__def {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

/* --- Table ------------------------------------------------------------ */

.cas-hub--flex .cas-tablewrap {
	overflow-x: auto;
	border: 1px solid var(--cas-border);
	border-radius: var(--cas-radius);
}

.cas-hub--flex .cas-table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 22px;
}

.cas-hub--flex .cas-table th,
.cas-hub--flex .cas-table td {
	padding: 14px 16px;
	text-align: start;
	vertical-align: top;
	border-block-end: 1px solid var(--cas-border);
}

.cas-hub--flex .cas-table thead th {
	background: var(--cas-lavender);
	font-size: 16px;
	font-weight: 600;
}

.cas-hub--flex .cas-table tbody th {
	font-weight: 600;
	inline-size: 22%;
}

.cas-hub--flex .cas-table tr:last-child th,
.cas-hub--flex .cas-table tr:last-child td {
	border-block-end: 0;
}

.cas-hub--flex .cas-tablesummary {
	margin-block-start: 20px;
	font-size: 16px;
	line-height: 24px;
}

/* --- Option cards ----------------------------------------------------- */

.cas-hub--flex .cas-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cas-hub--flex .cas-option {
	padding: 22px;
	border-radius: var(--cas-radius);
	color: var(--cas-white);
}

.cas-hub--flex .cas-option--orange { background: var(--cas-orange); }
.cas-hub--flex .cas-option--blue   { background: var(--cas-blue); }
.cas-hub--flex .cas-option--cyan   { background: var(--cas-cyan); }
.cas-hub--flex .cas-option--navy   { background: var(--cas-navy); }

.cas-hub--flex .cas-option__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 30px;
	block-size: 30px;
	margin-block-end: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	font-size: 15px;
	font-weight: 700;
}

.cas-hub--flex .cas-option__title {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
}

.cas-hub--flex .cas-option__body {
	font-size: 16px;
	line-height: 24px;
}

.cas-hub--flex .cas-option a {
	color: inherit;
}

/* --- Illustration ----------------------------------------------------- */

.cas-hub--flex .cas-artwrap {
	display: flex;
	justify-content: center;
}

.cas-hub--flex .cas-art {
	inline-size: 100%;
	max-inline-size: 692px;
	block-size: auto;
}

/* --- Path diagram ----------------------------------------------------- */

.cas-hub--flex .cas-path {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.cas-hub--flex .cas-path__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.cas-hub--flex .cas-path__step + .cas-path__step::before {
	content: "";
	position: absolute;
	inset-block-start: 16px;
	inset-inline-start: -20px;
	inline-size: 16px;
	block-size: 2px;
	background: var(--cas-orange);
}

.cas-hub--flex .cas-path__step + .cas-path__step::after {
	content: "";
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: -10px;
	inline-size: 6px;
	block-size: 6px;
	border-block-start: 2px solid var(--cas-orange);
	border-inline-end: 2px solid var(--cas-orange);
	transform: rotate(45deg);
}

.cas-hub--flex .cas-path__mark {
	color: var(--cas-navy);
}

.cas-hub--flex .cas-path__mark .cas-icon {
	inline-size: 30px;
	block-size: 30px;
}

.cas-hub--flex .cas-path__label {
	font-size: 14px;
	line-height: 20px;
}

/* --- FAQ -------------------------------------------------------------- */

.cas-hub--flex .cas-faqs {
	display: grid;
	gap: 16px;
}

.cas-hub--flex .cas-faq {
	padding: 20px 24px;
	border-radius: var(--cas-radius);
	background: var(--cas-white);
}

.cas-hub--flex .cas-section:not(.cas-section--tint) .cas-faq {
	border: 1px solid var(--cas-border);
}

.cas-hub--flex .cas-faq__q {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
}

.cas-hub--flex .cas-faq__a {
	font-size: 16px;
	line-height: 24px;
}

/* --- Breakpoints ------------------------------------------------------ */

@media (max-width: 1024px) {

	.cas-hub--flex .cas-path {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px 24px;
	}

	.cas-hub--flex .cas-path__step:nth-child(3n + 1)::before,
	.cas-hub--flex .cas-path__step:nth-child(3n + 1)::after {
		content: none;
	}

	.cas-hub--flex .cas-split {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 20px;
	}
}

@media (max-width: 780px) {

	.cas-hub--flex .cas-cols,
	.cas-hub--flex .cas-stats,
	.cas-hub--flex .cas-options,
	.cas-hub--flex .cas-glossary {
		grid-template-columns: 1fr;
	}

	.cas-hub--flex .cas-split,
	.cas-hub--flex .cas-notemock {
		grid-template-columns: 1fr;
	}

	.cas-hub--flex .cas-notemock .cas-mock {
		inline-size: 280px;
		max-inline-size: 100%;
	}

	.cas-hub--flex .cas-step {
		grid-template-columns: 34px minmax(0, 1fr);
		row-gap: 10px;
		align-items: start;
	}

	.cas-hub--flex .cas-step__body {
		grid-column: 2;
	}

	.cas-hub--flex .cas-rows__row {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

@media (max-width: 640px) {

	.cas-hub--flex .cas-path {
		grid-template-columns: repeat(2, 1fr);
	}

	.cas-hub--flex .cas-path__step:nth-child(3n + 1)::before,
	.cas-hub--flex .cas-path__step:nth-child(3n + 1)::after {
		content: "";
	}

	.cas-hub--flex .cas-path__step:nth-child(odd)::before,
	.cas-hub--flex .cas-path__step:nth-child(odd)::after {
		content: none;
	}

	.cas-hub--flex .cas-btn-wrap .cas-btn {
		display: block;
	}

	.cas-hub--flex .cas-check {
		padding: 20px 16px;
	}

	.cas-hub--flex .cas-check__row {
		align-items: flex-start;
	}
}


/* =========================================================================
 * Fidelity pass — values read directly off the Figma frames
 *
 * Page 2 was built by mapping sections to the nearest existing block rather
 * than measuring. These are the measured corrections.
 * ====================================================================== */

/* H2: Outfit SemiBold 34 / 100% / 0.8% tracking. The legacy rule renders it
   at weight 800 and a 124% line height. */
.cas-hub--flex .cas-h2 {
	margin: 0 0 24px;
	font-size: 34px;
	line-height: 34px;
	font-weight: 600;
	letter-spacing: 0.008em;
}

/* Section intros run the full 1140 column, not a 62ch measure, at 18/24. */
.cas-hub--flex .cas-lead {
	max-width: none;
	margin-block: 0 24px;
	font-size: 18px;
	line-height: 24px;
}

.cas-hub--flex .cas-crossref {
	font-size: 18px;
	line-height: 24px;
}

/* Two tinted sections in a row are one continuous band in the design, with a
   24px gap rather than two 50px paddings. */
.cas-hub--flex .cas-section--tint:has(+ .cas-section--tint) {
	padding-block-end: 0;
}

.cas-hub--flex .cas-section--tint + .cas-section--tint {
	margin-block-start: calc(var(--cas-gap) * -1);
	padding-block-start: 24px;
}

/* Path diagram: 62px white badge, 1px border at 10% navy, 13px padding. */
.cas-hub--flex .cas-path {
	align-items: start;
}

.cas-hub--flex .cas-path__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 62px;
	block-size: 62px;
	border: 1px solid var(--cas-border);
	border-radius: 50%;
	background: var(--cas-white);
	color: var(--cas-navy);
}

.cas-hub--flex .cas-path__mark .cas-icon {
	inline-size: 34px;
	block-size: 34px;
}

/* Arrows sit on the badge centre line, in the gap between steps. */
.cas-hub--flex .cas-path__step + .cas-path__step::before {
	inset-block-start: 30px;
	inset-inline-start: -22px;
	inline-size: 18px;
}

.cas-hub--flex .cas-path__step + .cas-path__step::after {
	inset-block-start: 27px;
	inset-inline-start: -9px;
	inline-size: 7px;
	block-size: 7px;
}

/* The numbered steps are joined by a hairline in the design. */
.cas-hub--flex .cas-steps {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cas-hub--flex .cas-step {
	position: relative;
	grid-template-columns: 34px minmax(0, 415px) minmax(0, 1fr);
	column-gap: 32px;
	row-gap: 6px;
	align-items: center;
}

.cas-hub--flex .cas-step::before {
	inline-size: 34px;
	block-size: 34px;
	font-size: 17px;
	align-self: center;
}

.cas-hub--flex .cas-step__title {
	margin: 0;
	font-size: 24px;
	line-height: 1.2;
	align-self: center;
}

.cas-hub--flex .cas-step__body {
	font-size: 18px;
	line-height: 26px;
	align-self: center;
}

.cas-hub--flex .cas-step:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-block-start: 40px;
	inset-block-end: -8px;
	inset-inline-start: 17px;
	inline-size: 1px;
	background: var(--cas-border);
}

@media (max-width: 780px) {

	.cas-hub--flex .cas-step:not(:last-child)::after {
		content: none;
	}
}

/* Path labels: Outfit Medium 18/24, centred in a 114px box so they wrap as
   they do in the design. */
.cas-hub--flex .cas-path__label {
	max-inline-size: 114px;
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
}


/* The flex-scoped fidelity rules above out-specify the base breakpoint
   rules, so the flex scope needs its own steps down the Figma type ladder:
   H1 38 / 30 / 24, H2 34 / 28 / 22, body 18/24 -> 16/22. */
/* =========================================================================
 * Page 3 card rows — measured off the Figma frame.
 *
 * Row is the 1140 column with a 24px gap: two 558px cards or three 364px.
 * Card: 162px tall (hug), 14px radius, 1px #011442 at 10%, 24px block
 * padding, 16px between the 72px badge and a 14px uppercase label.
 * ====================================================================== */

.cas-hub--flex .cas-icons--cards {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.cas-hub--flex .cas-icons--cards .cas-icons__item {
	flex: 1 1 240px;
	gap: 16px;
	padding-block: 24px;
	border: 1px solid var(--cas-border);
	border-radius: var(--cas-radius);
	background: var(--cas-white);
}

.cas-hub--flex .cas-icons--cards .cas-icons__mark {
	display: flex;
	inline-size: auto;
	block-size: auto;
	background: none;
}

.cas-hub--flex .cas-icons--cards .cas-icons__label,
.cas-hub--flex .cas-option--icon:not(:has(.cas-option__body)) .cas-option__title {
	margin: 0;
	font-size: 14px;
	line-height: 26px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cas-hub--flex .cas-icons--cards .cas-icons__label {
	color: var(--cas-navy);
}

/* Solid option cards carry the same badge-and-label shape, on colour. */
.cas-hub--flex .cas-option--icon:not(:has(.cas-option__body)) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 24px;
	text-align: center;
}

.cas-hub--flex .cas-option__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* =========================================================================
 * Page 4 — the navy panel and the framed illustration.
 *
 * The panel is one card: casf_open() prints the intro before the stat list,
 * so the two siblings share a navy fill and each round one end of it.
 * ====================================================================== */

.cas-hub--flex .cas-stats--panel .cas-lead {
	max-width: none;
	margin: 0;
	padding: 32px 32px 24px;
	border-start-start-radius: var(--cas-radius);
	border-start-end-radius: var(--cas-radius);
	background: var(--cas-navy);
	color: var(--cas-white);
}

.cas-hub--flex .cas-stats--panel .cas-stats {
	position: relative;
	margin-block-start: calc(var(--cas-gap-inner) * -1);
	display: flex;
	justify-content: flex-end;
	gap: 40px;
	padding: 24px 32px 32px;
	border-end-start-radius: var(--cas-radius);
	border-end-end-radius: var(--cas-radius);
	background: var(--cas-navy);
}

.cas-hub--flex .cas-stats--panel .cas-stats::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 32px;
	block-size: 1px;
	background: rgba(255, 255, 255, 0.25);
}

.cas-hub--flex .cas-stats--panel .cas-stat {
	gap: 4px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	align-items: flex-start;
}

.cas-hub--flex .cas-stats--panel .cas-stat__value {
	font-size: 24px;
	color: var(--cas-white);
}

.cas-hub--flex .cas-stats--panel .cas-stat__label {
	font-size: 12px;
	line-height: 18px;
	color: rgba(255, 255, 255, 0.7);
}

/* Framed illustration: the same card the rest of page 4 uses. */
.cas-hub--flex .cas-artwrap--card {
	padding: 24px;
	border: 1px solid var(--cas-border);
	border-radius: var(--cas-radius);
	background: var(--cas-white);
}

/* =========================================================================
 * Page 5 — plain badge rows with a caption-sized label, and a navy text card.
 *
 * Page 2's near-ports row uses the same badges under an 18px label; page 5
 * captions them at 14px, so the two treatments are separate styles.
 * ====================================================================== */

.cas-hub--flex .cas-icons--badges {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.cas-hub--flex .cas-icons--badges .cas-icons__item {
	flex: 1 1 160px;
}

.cas-hub--flex .cas-icons--badges .cas-icons__mark {
	display: flex;
	inline-size: auto;
	block-size: auto;
	background: none;
}

.cas-hub--flex .cas-icons--badges .cas-icons__label {
	margin: 0;
	font-size: 14px;
	line-height: 26px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cas-navy);
}

/* Navy text card: casf_open() prints the intro and casf_close() the footnote,
   so the two siblings share one fill and each round one end of it. */
.cas-hub--flex .cas-rich--navy .cas-lead {
	max-width: none;
	margin: 0;
	padding: 32px 32px 16px;
	border-start-start-radius: var(--cas-radius);
	border-start-end-radius: var(--cas-radius);
	background: var(--cas-navy);
	color: var(--cas-white);
}

.cas-hub--flex .cas-rich--navy .cas-crossref {
	margin-block-start: calc(var(--cas-gap-inner) * -1);
	padding: 0 32px 32px;
	border-end-start-radius: var(--cas-radius);
	border-end-end-radius: var(--cas-radius);
	background: var(--cas-navy);
	color: rgba(255, 255, 255, 0.75);
	font-size: 16px;
	line-height: 24px;
}

/* A navy card with no footnote still has to close its own bottom corners. */
.cas-hub--flex .cas-rich--navy .cas-lead:last-child {
	padding-block-end: 32px;
	border-end-start-radius: var(--cas-radius);
	border-end-end-radius: var(--cas-radius);
}

.cas-hub--flex .cas-rich--navy a {
	color: var(--cas-white);
}

/* =========================================================================
 * Page 7 — option cards that carry body copy, a centred section heading,
 * and the navy "Before you sail" card.
 * ====================================================================== */

/* With body copy the card keeps its left-aligned title and text; only the
   badge centres above them. */
.cas-hub--flex .cas-option--icon:has(.cas-option__body) {
	padding: 24px;
}

.cas-hub--flex .cas-option--icon:has(.cas-option__body) .cas-option__mark {
	display: flex;
	justify-content: center;
	margin-block-end: 16px;
}

.cas-hub--flex .cas-options--center .cas-h2 {
	text-align: center;
}

/* Lists written into rich-text fields keep their markers; the global reset
   is there for the component lists, not for body copy. */
.cas-hub--flex .cas-lead ul,
.cas-hub--flex .cas-crossref ul,
.cas-hub--flex .cas-rich ul {
	margin: 0 0 12px;
	padding-inline-start: 22px;
	list-style: disc;
}

.cas-hub--flex .cas-lead ul li,
.cas-hub--flex .cas-crossref ul li,
.cas-hub--flex .cas-rich ul li {
	margin-block-end: 6px;
}

.cas-hub--flex .cas-lead ul li::marker,
.cas-hub--flex .cas-crossref ul li::marker,
.cas-hub--flex .cas-rich ul li::marker {
	color: var(--cas-navy);
}

/* A note-and-mock block with no heading is a continuation of the section
   above it, so it loses the gap that would otherwise separate them. */
.cas-hub--flex .cas-section + .cas-section--note_mock:not(:has(.cas-h2)) {
	margin-block-start: calc(var(--cas-gap) * -1);
	padding-block-start: 0;
}

/* Before you sail: heading outside, everything else inside one navy card. */
.cas-hub--flex .cas-steps--navy .cas-lead {
	max-width: none;
	margin: 0;
	padding: 28px 32px 20px;
	border-start-start-radius: var(--cas-radius);
	border-start-end-radius: var(--cas-radius);
	background: var(--cas-navy);
	color: var(--cas-white);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
}

.cas-hub--flex .cas-steps--navy .cas-steps {
	position: relative;
	margin-block-start: calc(var(--cas-gap-inner) * -1);
	gap: 0;
	padding: 20px 32px;
	background: var(--cas-navy);
}

.cas-hub--flex .cas-steps--navy .cas-steps::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 32px;
	block-size: 1px;
	background: rgba(255, 255, 255, 0.25);
}

.cas-hub--flex .cas-steps--navy .cas-step {
	display: block;
	padding-block: 6px;
	font-size: 16px;
	line-height: 24px;
}

.cas-hub--flex .cas-steps--navy .cas-step::before {
	display: inline;
	inline-size: auto;
	block-size: auto;
	margin-inline-end: 6px;
	content: counter(cas-step) ".";
	border-radius: 0;
	background: none;
	color: var(--cas-orange);
	font-size: 16px;
	font-weight: 600;
}

.cas-hub--flex .cas-steps--navy .cas-step::after {
	content: none;
}

.cas-hub--flex .cas-steps--navy .cas-step__title {
	display: inline;
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--cas-white);
}

.cas-hub--flex .cas-steps--navy .cas-step__body,
.cas-hub--flex .cas-steps--navy .cas-step__body p {
	display: inline;
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: rgba(255, 255, 255, 0.75);
}

.cas-hub--flex .cas-steps--navy .cas-step__body::before {
	content: " ";
}

.cas-hub--flex .cas-steps--navy .cas-crossref {
	margin-block-start: calc(var(--cas-gap-inner) * -1);
	padding: 0 32px 28px;
	border-end-start-radius: var(--cas-radius);
	border-end-end-radius: var(--cas-radius);
	background: var(--cas-navy);
	color: rgba(255, 255, 255, 0.75);
	font-size: 16px;
	line-height: 24px;
}

.cas-hub--flex .cas-steps--navy a {
	color: var(--cas-white);
}

/* =========================================================================
 * Help landing page: a grid of linked topic cards, and question rows that
 * point at the page owning each answer.
 * ====================================================================== */

.cas-hub--flex .cas-linkcards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cas-hub--flex .cas-linkcard {
	display: flex;
}

/* The whole card is one link, so the card is a single tab stop and the
   call to action below is a span rather than a second anchor. */
.cas-hub--flex .cas-linkcard__hit {
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	gap: 8px;
	padding: 20px;
	border: 1px solid var(--cas-border);
	border-radius: var(--cas-radius);
	background: var(--cas-white);
	color: inherit;
	text-decoration: none;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.cas-hub--flex .cas-linkcard__hit:hover,
.cas-hub--flex .cas-linkcard__hit:focus-visible {
	border-color: var(--cas-navy);
	box-shadow: 0 2px 10px rgba(1, 20, 66, 0.08);
}

.cas-hub--flex .cas-linkcard__eyebrow {
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cas-orange);
}

.cas-hub--flex .cas-linkcard__title {
	margin: 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	color: var(--cas-navy);
}

.cas-hub--flex .cas-linkcard__body {
	font-size: 14px;
	line-height: 20px;
	color: var(--cas-muted);
}

.cas-hub--flex .cas-linkcard__body p {
	margin: 0;
}

/* Pinned to the foot of the card so the calls to action line up across a row. */
.cas-hub--flex .cas-linkcard__cta {
	margin-block-start: auto;
	padding-block-start: 8px;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: var(--cas-blue);
}

.cas-hub--flex .cas-qrows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cas-hub--flex .cas-qrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px 20px;
	border-radius: 10px;
	background: var(--cas-white);
}

.cas-hub--flex .cas-qrow__q {
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--cas-navy);
}

.cas-hub--flex .cas-qrow__link {
	flex: none;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: var(--cas-blue);
	text-decoration: none;
	text-align: end;
}

.cas-hub--flex a.cas-qrow__link:hover,
.cas-hub--flex a.cas-qrow__link:focus-visible {
	text-decoration: underline;
}

/* A slot whose question has not been chosen yet. */
.cas-hub--flex .cas-qrow--pending {
	border: 1px dashed var(--cas-border);
	background: none;
}

.cas-hub--flex .cas-qrow--pending .cas-qrow__q,
.cas-hub--flex .cas-qrow--pending .cas-qrow__link {
	color: var(--cas-muted);
	font-weight: 400;
}

@media (max-width: 1024px) {

	.cas-hub--flex .cas-linkcards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {

	.cas-hub--flex .cas-linkcards {
		grid-template-columns: minmax(0, 1fr);
	}

	.cas-hub--flex .cas-qrow {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.cas-hub--flex .cas-qrow__link {
		text-align: start;
	}
}

/* Compact spacing: every gap on a hub page keys off --cas-gap, so halving
   the token halves the space between sections and the article's own padding.
   Scoped to .cas-hub rather than .cas-hub--flex so the page 1 template that
   predates the block library gets the same control. */
.cas-hub.cas-hub--compact {
	--cas-gap: 25px;
}

@media (max-width: 1024px) {

	.cas-hub.cas-hub--compact {
		--cas-gap: 16px;
	}
}

@media (max-width: 640px) {

	.cas-hub.cas-hub--compact {
		--cas-gap: 12px;
	}
}

/* PNG artwork is drawn at its exported size and never upscaled — these are
   1x exports, so stretching them to the SVG box only makes them soft. */
.cas-hub--flex img.cas-icon,
.cas-hub--flex .cas-path__mark img.cas-icon,
.cas-hub--flex .cas-icons__mark img.cas-icon,
.cas-hub--flex .cas-icons--plain .cas-icons__mark img.cas-icon,
.cas-hub--flex .cas-icons--tiles .cas-icons__mark img.cas-icon {
	inline-size: auto;
	block-size: auto;
	max-inline-size: 88px;
	max-block-size: 88px;
	object-fit: contain;
	object-position: center;
}

@media (max-width: 1024px) {

	.cas-hub--flex .cas-h2 {
		font-size: 28px;
		line-height: 28px;
	}

	.cas-hub--flex .cas-step {
		grid-template-columns: 34px minmax(0, 300px) minmax(0, 1fr);
		column-gap: 20px;
	}

	.cas-hub--flex .cas-step__title {
		font-size: 21px;
	}
}

@media (max-width: 640px) {

	.cas-hub--flex .cas-h2 {
		margin-block-end: 16px;
		font-size: 22px;
		line-height: 22px;
	}

	.cas-hub--flex .cas-lead,
	.cas-hub--flex .cas-crossref {
		font-size: 16px;
		line-height: 22px;
	}

	.cas-hub--flex .cas-icons--circles {
		gap: 12px;
	}

	.cas-hub--flex .cas-icons--circles .cas-icons__label {
		font-size: 13px;
	}

	.cas-hub--flex .cas-step__title {
		font-size: 19px;
	}

	.cas-hub--flex .cas-step__body {
		font-size: 16px;
		line-height: 24px;
	}
}