/* ---------------------------------------------------------------------------
   Domestic (UK adult learner) acquisition pages.

   Loaded only by templates/domestic.php.

   DESIGN NOTE
   These pages are read by an adult deciding whether to spend three years and
   a large loan on a degree, usually after being told once that university
   was not for them. So the page is set like a serious explainer, not like a
   promotion: one narrow measure, real hierarchy, and every claim about money
   or eligibility given visible weight rather than buried in a paragraph.

   Everything comes from the existing framework tokens. The one deliberate
   departure from site convention is the form: the site-wide .contact-form
   puts white labels on navy, which is not readable enough for two consent
   statements that have to be understood before they are ticked. Here the
   navy frames the card instead of filling it.
--------------------------------------------------------------------------- */

:root {
	/* Three widths, each with a job.
	   shell   — page furniture: header, hero, trust strip, footer, form.
	   measure — the prose column inside the two-column body.
	   aside   — the sticky panel that fills what used to be empty margin. */
	--dom-shell: 74rem;
	--dom-measure: 44rem;
	--dom-aside: 20rem;
	--dom-frame: var(--dom-shell);   /* kept: older rules reference it */
	--dom-ink: #1F2937;
	--dom-muted: #5B6472;
	--dom-hairline: #E5E7EB;
	--dom-field-border: #C8CDD5;
	--dom-tint: #F7F9FC;
}

/* --- Header -------------------------------------------------------------- */

.domestic-header {
	background: var(--brand-navy);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.domestic-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-3) var(--spacing-6);
	padding-top: var(--spacing-5);
	padding-bottom: var(--spacing-5);
	max-width: var(--dom-frame);
}

.domestic-header__brand {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

/* The site logo is navy-and-gold artwork built for a light header. On this
   dark band the navy half of it disappears, so it is knocked out to solid
   white — the standard reversed-logo treatment, not a recolour. */
.domestic-header__brand img {
	height: auto;
	max-height: 2.25rem;
	width: auto;
	filter: brightness(0) invert(1);
}

.domestic-header__tag {
	font-family: var(--font-title);
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
}

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

.domestic-hero {
	position: relative;
	background: var(--brand-navy);
	background-image: radial-gradient(
		75rem 32rem at 18% -10%,
		rgba(0, 87, 184, 0.28) 0%,
		rgba(15, 23, 42, 0) 70%
	);
	color: var(--color-white);
	padding: var(--spacing-16) 0 var(--spacing-16);
}

.domestic-hero .container {
	max-width: var(--dom-frame);
}

.domestic-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	font-family: var(--font-title);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-gold);
	margin: 0 0 var(--spacing-5);
}

.domestic-hero__eyebrow::before {
	content: '';
	width: 2rem;
	height: 2px;
	background: var(--brand-gold);
	flex: none;
}

.domestic-hero h1 {
	color: var(--color-white);
	max-width: 20ch;
	letter-spacing: -0.015em;
	margin: 0 0 var(--spacing-6);
	text-wrap: balance;
}

.domestic-hero__intro p {
	font-size: var(--text-xl);
	line-height: var(--leading-relaxed);
	color: rgba(255, 255, 255, 0.85);
	max-width: var(--dom-measure);
	margin: 0 0 var(--spacing-10);
}

.domestic-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-4) var(--spacing-6);
	margin: 0;
}

.domestic-hero__note {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.65);
	margin: 0;
}

/* --- Body ---------------------------------------------------------------- */

.domestic-body {
	padding: var(--spacing-16) 0 var(--spacing-12);
}

.domestic-body .container {
	max-width: var(--dom-shell);
}

.domestic-body .prose {
	margin: 0;
	color: var(--dom-ink);
}

.domestic-body .prose p,
.domestic-body .prose li {
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
}

/* The opening paragraph carries the page; it is set a step larger. */
.domestic-body .prose > p:first-child {
	font-size: var(--text-xl);
	line-height: var(--leading-relaxed);
	color: var(--brand-navy);
}

/* Section headings get a short gold rule rather than a full-width grey one:
   it marks the start of a section without drawing a line across the reading
   column every time. */
.domestic-body .prose h2 {
	position: relative;
	font-size: var(--text-3xl);
	line-height: var(--leading-tight);
	letter-spacing: -0.01em;
	color: var(--brand-navy);
	margin: var(--spacing-16) 0 var(--spacing-5);
	padding-top: var(--spacing-6);
	text-wrap: balance;
}

.domestic-body .prose h2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 2.5rem;
	height: 3px;
	background: var(--brand-gold);
}

.domestic-body .prose > h2:first-child {
	margin-top: 0;
}

.domestic-body .prose h3 {
	font-size: var(--text-xl);
	line-height: var(--leading-snug);
	color: var(--brand-navy);
	margin: var(--spacing-10) 0 var(--spacing-3);
}

.domestic-body .prose ul,
.domestic-body .prose ol {
	padding-left: var(--spacing-6);
	margin: var(--spacing-5) 0;
}

.domestic-body .prose li {
	margin-bottom: var(--spacing-3);
	padding-left: var(--spacing-2);
}

.domestic-body .prose ul li::marker {
	color: var(--brand-blue);
}

.domestic-body .prose a {
	color: var(--brand-blue);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

.domestic-body .prose a:hover {
	text-decoration-thickness: 2px;
}

/* Statements we are making on the record — always about funding, or about
   who actually decides. A reader must not skim past these, so they get a
   frame rather than just heavier type.
   
   Marked explicitly in the content with class="note". An earlier version of
   this tried to detect them with `p > strong:only-child`, which was wrong:
   CSS :only-child counts elements and ignores text nodes, so an ordinary
   sentence containing one bold phrase ("An **Access to HE Diploma** is a
   standalone qualification...") matched too, and the page filled up with
   boxes wrapped around half-sentences. There is no CSS test for "this
   paragraph is entirely bold" — so the content says so instead. */
.domestic-body .prose p.note {
	font-family: var(--font-title);
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
	line-height: var(--leading-snug);
	color: var(--brand-navy);
	background: var(--dom-tint);
	border-left: 3px solid var(--brand-navy);
	border-radius: 0 var(--rounded) var(--rounded) 0;
	padding: var(--spacing-5) var(--spacing-6);
	margin: var(--spacing-8) 0;
}

.domestic-body .prose p.note strong {
	font-weight: var(--font-bold);
}

/* Comparison tables read as data, not as prose. */
.domestic-body .prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-base);
	margin: var(--spacing-8) 0;
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.domestic-body .prose table th,
.domestic-body .prose table td {
	text-align: left;
	vertical-align: top;
	padding: var(--spacing-4);
	border-bottom: 1px solid var(--dom-hairline);
	line-height: var(--leading-snug);
}

.domestic-body .prose table thead th {
	font-family: var(--font-title);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand-navy);
	border-bottom: 2px solid var(--brand-navy);
	white-space: nowrap;
}

.domestic-body .prose table tbody tr:nth-child(odd) td {
	background: #FBFCFD;
}

/* A markdown table becomes the scroll container itself (there is no wrapper
   element to add), so the row groups carry the minimum width. Without this
   the columns just crush together on a phone instead of scrolling. */
.domestic-body .prose table thead,
.domestic-body .prose table tbody {
	display: table;
	width: 100%;
	min-width: 34rem;
}

.domestic-body .prose table td:first-child {
	font-weight: var(--font-semibold);
	color: var(--brand-navy);
}

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

.domestic-faq {
	background: var(--dom-tint);
	border-top: 1px solid var(--dom-hairline);
	padding: var(--spacing-16) 0;
}

.domestic-faq .container {
	max-width: 56rem;
}

.domestic-faq h2 {
	font-size: var(--text-3xl);
	color: var(--brand-navy);
	text-align: center;
	margin: 0 0 var(--spacing-10);
	text-wrap: balance;
}

.domestic-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

.domestic-faq details {
	background: var(--color-white);
	border: 1px solid var(--dom-hairline);
	border-radius: var(--rounded-xl);
	overflow: hidden;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.domestic-faq details[open] {
	border-color: #CBD5E1;
	box-shadow: var(--shadow);
}

.domestic-faq summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--spacing-4);
	list-style: none;
	cursor: pointer;
	padding: var(--spacing-5) var(--spacing-6);
}

.domestic-faq summary::-webkit-details-marker {
	display: none;
}

.domestic-faq summary h3 {
	font-family: var(--font-title);
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
	line-height: var(--leading-snug);
	color: var(--brand-navy);
	margin: 0;
}

.domestic-faq summary::after {
	content: '';
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	margin-top: 0.35rem;
	border-right: 2px solid var(--brand-blue);
	border-bottom: 2px solid var(--brand-blue);
	transform: rotate(45deg);
	transition: transform var(--transition-fast);
}

.domestic-faq details[open] summary::after {
	transform: rotate(-135deg);
}

.domestic-faq summary:focus-visible {
	outline: 2px solid var(--brand-blue);
	outline-offset: -2px;
}

.domestic-faq .domestic-faq__answer {
	padding: 0 var(--spacing-6) var(--spacing-6);
}

.domestic-faq .domestic-faq__answer p {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--dom-ink);
	margin: 0;
}

/* --- Eligibility form ---------------------------------------------------- */

.domestic-cta {
	background: var(--color-white);
	border-top: 1px solid var(--dom-hairline);
	padding: var(--spacing-16) 0 var(--spacing-20);
}

.domestic-cta .container {
	max-width: var(--dom-frame);
}

.domestic-cta__heading {
	text-align: center;
	font-size: var(--text-3xl);
	color: var(--brand-navy);
	margin: 0 0 var(--spacing-3);
	text-wrap: balance;
}

.domestic-cta__standfirst {
	text-align: center;
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--dom-muted);
	max-width: 34rem;
	margin: 0 auto var(--spacing-10);
}

.domestic-form {
	background: var(--color-white);
	border: 1px solid var(--dom-hairline);
	border-top: 4px solid var(--brand-navy);
	border-radius: var(--rounded-xl);
	box-shadow: var(--shadow-lg);
	padding: var(--spacing-8) var(--spacing-6);
}

@media screen and (min-width: 40rem) {
	.domestic-form {
		padding: var(--spacing-12) var(--spacing-10);
	}
}

/* Three named steps, so ten questions read as a short sequence rather than
   as one undifferentiated wall of fields. */
.domestic-form fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 var(--spacing-10);
	min-width: 0;
}

.domestic-form fieldset:last-of-type {
	margin-bottom: 0;
}

.domestic-form legend {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	width: 100%;
	font-family: var(--font-title);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brand-navy);
	padding: 0 0 var(--spacing-4);
	margin-bottom: var(--spacing-6);
	border-bottom: 1px solid var(--dom-hairline);
}

.domestic-form legend .step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	background: var(--brand-navy);
	color: var(--color-white);
	font-size: var(--text-xs);
	letter-spacing: 0;
	flex: none;
}

.domestic-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-6);
}

@media screen and (min-width: 40rem) {
	.domestic-form__grid {
		grid-template-columns: 1fr 1fr;
	}
	.domestic-form__grid .form-full {
		grid-column: 1 / -1;
	}
}

.domestic-field label {
	display: block;
	font-family: var(--font-title);
	font-size: var(--text-base);
	font-weight: var(--font-bold);
	color: var(--brand-navy);
	margin: 0 0 var(--spacing-2);
}

.domestic-field input[type="text"],
.domestic-field input[type="email"],
.domestic-field input[type="tel"],
.domestic-field select {
	width: 100%;
	margin: 0;
	padding: 0.7rem var(--spacing-3);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	color: var(--dom-ink);
	background-color: var(--color-white);
	border: 1px solid var(--dom-field-border);
	border-radius: var(--rounded);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.domestic-field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--brand-navy) 50%),
	                  linear-gradient(135deg, var(--brand-navy) 50%, transparent 50%);
	background-position: calc(100% - 19px) 55%, calc(100% - 13px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: var(--spacing-10);
}

.domestic-field input::placeholder {
	color: #98A1AE;
}

.domestic-field input:focus,
.domestic-field select:focus {
	outline: none;
	border-color: var(--brand-blue);
	box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.15);
}

.domestic-field input.error,
.domestic-field select.error {
	border-color: var(--brand-error);
	background-color: #FEF8F7;
}

.domestic-field small,
.domestic-hint {
	display: block;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--dom-muted);
	margin-top: var(--spacing-2);
}

/* Consent rows read as statements, not as fields. */
.domestic-check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--spacing-3) var(--spacing-4);
	align-items: start;
	padding: var(--spacing-5);
	background: var(--dom-tint);
	border: 1px solid var(--dom-hairline);
	border-radius: var(--rounded-xl);
}

.domestic-check + .domestic-check {
	margin-top: calc(var(--spacing-6) * -1 + var(--spacing-3));
}

.domestic-check input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.2rem 0 0;
	accent-color: var(--brand-navy);
}

.domestic-check label {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: var(--font-normal);
	line-height: var(--leading-snug);
	color: var(--dom-ink);
	margin: 0;
	cursor: pointer;
}

.domestic-check label.required:after {
	content: ' *';
	color: var(--brand-error);
}

.domestic-check small {
	grid-column: 2;
	margin-top: 0;
}

.domestic-form__submit {
	margin-top: var(--spacing-10);
	padding-top: var(--spacing-8);
	border-top: 1px solid var(--dom-hairline);
	text-align: center;
}

.domestic-form__submit .btn {
	width: 100%;
	margin: 0;
}

@media screen and (min-width: 40rem) {
	.domestic-form__submit .btn {
		width: auto;
		min-width: 20rem;
	}
}

.domestic-form__footnote {
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--dom-muted);
	text-align: center;
	margin: var(--spacing-6) auto 0;
	max-width: 36rem;
}

/* --- Confirmation -------------------------------------------------------- */

.domestic-confirm {
	background: var(--color-white);
	border: 1px solid var(--dom-hairline);
	border-top: 4px solid var(--brand-success);
	border-radius: var(--rounded-xl);
	box-shadow: var(--shadow-lg);
	padding: var(--spacing-12) var(--spacing-6);
	text-align: center;
}

@media screen and (min-width: 40rem) {
	.domestic-confirm {
		padding: var(--spacing-16) var(--spacing-12);
	}
}

.domestic-confirm h3 {
	font-size: var(--text-3xl);
	margin: 0 0 var(--spacing-5);
	color: var(--brand-navy);
	text-wrap: balance;
}

.domestic-confirm p {
	max-width: 34rem;
	margin: 0 auto var(--spacing-5);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--dom-ink);
}

.domestic-confirm p:last-child {
	margin-bottom: 0;
}

.domestic-confirm__caveat {
	font-size: var(--text-sm) !important;
	color: var(--dom-muted);
	padding-top: var(--spacing-5);
	border-top: 1px solid var(--dom-hairline);
}

/* --- Error summary ------------------------------------------------------- */

.domestic-errors {
	background: #FDF3F2;
	border: 1px solid var(--brand-error);
	border-radius: var(--rounded-xl);
	padding: var(--spacing-5) var(--spacing-6);
	margin-bottom: var(--spacing-8);
	color: var(--brand-error);
}

.domestic-errors p {
	font-family: var(--font-title);
	margin: 0 0 var(--spacing-2);
	font-weight: var(--font-bold);
}

.domestic-errors ul {
	margin: 0;
	padding-left: var(--spacing-5);
}

.domestic-errors li {
	font-size: var(--text-base);
	line-height: var(--leading-snug);
}

/* --- Footer -------------------------------------------------------------- */

.domestic-footer {
	background: var(--brand-navy);
	color: rgba(255, 255, 255, 0.72);
	padding: var(--spacing-12) 0;
}

.domestic-footer .container {
	max-width: var(--dom-frame);
}

.domestic-footer__disclaimer {
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	max-width: var(--dom-measure);
	margin: 0 0 var(--spacing-8);
}

.domestic-footer__disclaimer a {
	color: var(--color-white);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.domestic-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-2) var(--spacing-6);
	padding-top: var(--spacing-6);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.domestic-footer__links a {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.domestic-footer__links a:hover,
.domestic-footer__links a:focus-visible {
	color: var(--color-white);
	text-decoration: underline;
}

.domestic-footer__copyright {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.5);
	margin: var(--spacing-6) 0 0;
}

/* ===========================================================================
   STRUCTURED CONTENT COMPONENTS

   The prose above is for argument. These are for the parts of the page a
   visitor needs to take in without reading: the routes open to them, and the
   difference between the two they will actually have to choose between.
   Both are authored as HTML inside the page body, because the structure IS
   the content — flattening them back into paragraphs loses information.
   =========================================================================== */

/* --- Trust strip --------------------------------------------------------- */

.domestic-trust {
	background: var(--color-white);
	border-bottom: 1px solid var(--dom-hairline);
}

.domestic-trust .container {
	max-width: var(--dom-frame);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-4);
	padding-top: var(--spacing-6);
	padding-bottom: var(--spacing-6);
}

@media screen and (min-width: 46rem) {
	.domestic-trust .container {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--spacing-8);
	}
}

.domestic-trust__item {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-3);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--dom-ink);
	margin: 0;
}

.domestic-trust__item::before {
	content: '';
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.1rem;
	border-radius: 999px;
	background: var(--brand-navy);
	/* A tick, drawn rather than loaded — no icon font, no extra request. */
	background-image: linear-gradient(45deg, transparent 42%, var(--color-white) 42%, var(--color-white) 55%, transparent 55%),
	                  linear-gradient(-45deg, transparent 55%, var(--color-white) 55%, var(--color-white) 68%, transparent 68%);
	background-size: 0.55rem 0.55rem, 0.55rem 0.55rem;
	background-position: 0.34rem 0.42rem, 0.18rem 0.3rem;
	background-repeat: no-repeat;
}

.domestic-trust__item strong {
	font-family: var(--font-title);
	color: var(--brand-navy);
}

/* --- Route cards --------------------------------------------------------- */
/* Four alternatives, not four steps — so they are not numbered. What
   separates them is where you study and how many times you apply, so those
   are the facts made visible on every card. */

.domestic-body .prose .routes {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-5);
	margin: var(--spacing-8) 0 var(--spacing-10);
}

@media screen and (min-width: 46rem) {
	.domestic-body .prose .routes {
		grid-template-columns: 1fr 1fr;
	}
}

.domestic-body .prose .route {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border: 1px solid var(--dom-hairline);
	border-left: 3px solid var(--brand-blue);
	border-radius: var(--rounded-xl);
	padding: var(--spacing-6);
	transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.domestic-body .prose .route:hover {
	box-shadow: var(--shadow-md);
	border-color: #CBD5E1;
	border-left-color: var(--brand-blue);
}

.domestic-body .prose .route h3 {
	font-size: var(--text-xl);
	line-height: var(--leading-tight);
	color: var(--brand-navy);
	margin: 0 0 var(--spacing-3);
}

.domestic-body .prose .route > p {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--dom-ink);
	margin: 0 0 var(--spacing-5);
}

.domestic-body .prose .route__facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--spacing-2) var(--spacing-4);
	margin: 0 0 var(--spacing-5);
	padding: var(--spacing-4) 0;
	border-top: 1px solid var(--dom-hairline);
	border-bottom: 1px solid var(--dom-hairline);
}

.domestic-body .prose .route__facts dt {
	font-family: var(--font-title);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dom-muted);
	margin: 0;
	white-space: nowrap;
}

.domestic-body .prose .route__facts dd {
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--brand-navy);
	font-weight: var(--font-semibold);
	margin: 0;
}

.domestic-body .prose .route__fit {
	font-size: var(--text-sm) !important;
	line-height: var(--leading-snug);
	color: var(--dom-muted);
	margin: auto 0 0 !important;
}

.domestic-body .prose .route__fit strong {
	display: block;
	font-family: var(--font-title);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-navy);
	margin-bottom: var(--spacing-1);
}

/* --- Side-by-side comparison --------------------------------------------- */

.domestic-body .prose .versus {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-5);
	margin: var(--spacing-8) 0 var(--spacing-10);
}

@media screen and (min-width: 46rem) {
	.domestic-body .prose .versus {
		grid-template-columns: 1fr 1fr;
		gap: var(--spacing-6);
	}
}

.domestic-body .prose .versus__side {
	background: var(--color-white);
	border: 1px solid var(--dom-hairline);
	border-top: 4px solid var(--brand-blue);
	border-radius: var(--rounded-xl);
	padding: var(--spacing-6);
}

.domestic-body .prose .versus__side--b {
	border-top-color: var(--brand-gold);
}

.domestic-body .prose .versus__side h3 {
	font-size: var(--text-xl);
	color: var(--brand-navy);
	margin: 0 0 var(--spacing-2);
}

.domestic-body .prose .versus__side .versus__gist {
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed);
	color: var(--dom-ink);
	margin: 0 0 var(--spacing-4) !important;
}

.domestic-body .prose .versus__side ul {
	margin: 0;
	padding-left: var(--spacing-5);
}

.domestic-body .prose .versus__side li {
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	margin-bottom: var(--spacing-2);
	padding-left: 0;
}

/* --- Mid-page call to action --------------------------------------------- */

.domestic-midcta {
	background: var(--brand-navy);
	background-image: radial-gradient(
		50rem 20rem at 80% 120%,
		rgba(0, 87, 184, 0.3) 0%,
		rgba(15, 23, 42, 0) 70%
	);
	color: var(--color-white);
	padding: var(--spacing-12) 0;
}

.domestic-midcta .container {
	max-width: var(--dom-frame);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-5);
}

@media screen and (min-width: 48rem) {
	.domestic-midcta .container {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--spacing-10);
	}
}

.domestic-midcta__text {
	margin: 0;
}

.domestic-midcta__text strong {
	display: block;
	font-family: var(--font-title);
	font-size: var(--text-2xl);
	line-height: var(--leading-tight);
	color: var(--color-white);
	margin-bottom: var(--spacing-2);
	text-wrap: balance;
}

.domestic-midcta__text span {
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	color: rgba(255, 255, 255, 0.78);
}

.domestic-midcta .btn {
	flex: none;
	margin: 0;
}

/* --- Breakout ------------------------------------------------------------ */
/* Prose is set to a 44rem measure because that is comfortable to read. The
   card blocks are not prose — they are scanned, in two columns — and at that
   measure the columns come out around 320px, which is too tight for a
   paragraph plus a fact list. So they alone step out to the wider frame.
   Only above 58rem, where the wider block still clears the gutters. */

/* The breakout hack that widened the cards beyond a narrow measure is gone:
   the body column is wide enough now that the cards simply fill it. */

/* ===========================================================================
   FULL-WIDTH LAYOUT
   The page fills the screen through structure, not by stretching paragraphs.
   Long measures are hard to read: past roughly 90 characters the eye loses
   the start of the next line. So the prose keeps a readable column and the
   width that used to sit empty beside it now carries the call to action.
   =========================================================================== */

.domestic-body__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-12);
}

@media screen and (min-width: 64rem) {
	.domestic-body__grid {
		grid-template-columns: minmax(0, 1fr) var(--dom-aside);
		gap: var(--spacing-16);
		align-items: start;
	}
}

/* The prose column can breathe a little wider now it is not the whole page,
   and the type steps up with it so the line length stays sane. */
@media screen and (min-width: 64rem) {
	.domestic-body .prose p,
	.domestic-body .prose li {
		font-size: 1.1875rem;
		line-height: 1.7;
	}
	.domestic-body .prose > p:first-child {
		font-size: var(--text-2xl);
		line-height: var(--leading-snug);
	}
}

/* --- Sticky aside -------------------------------------------------------- */

.domestic-aside {
	min-width: 0;
}

@media screen and (min-width: 64rem) {
	.domestic-aside__inner {
		position: sticky;
		top: var(--spacing-8);
		display: flex;
		flex-direction: column;
		gap: var(--spacing-6);
	}
}

.domestic-aside__label {
	font-family: var(--font-title);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dom-muted);
	margin: 0 0 var(--spacing-3);
}

.domestic-aside__toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--dom-hairline);
}

.domestic-aside__toc li {
	margin: 0;
	padding: 0;
}

.domestic-aside__toc a {
	display: block;
	padding: var(--spacing-2) var(--spacing-4);
	margin-left: -2px;
	border-left: 2px solid transparent;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--dom-muted);
	text-decoration: none;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.domestic-aside__toc a:hover,
.domestic-aside__toc a:focus-visible {
	color: var(--brand-navy);
	border-left-color: var(--brand-gold);
}

.domestic-aside__card {
	background: var(--brand-navy);
	background-image: radial-gradient(
		30rem 16rem at 110% -20%,
		rgba(0, 87, 184, 0.45) 0%,
		rgba(15, 23, 42, 0) 70%
	);
	color: var(--color-white);
	border-radius: var(--rounded-xl);
	padding: var(--spacing-6);
	box-shadow: var(--shadow-md);
}

.domestic-aside__kicker {
	font-family: var(--font-title);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brand-gold);
	margin: 0 0 var(--spacing-3);
}

.domestic-aside__lead {
	font-family: var(--font-title);
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
	color: var(--color-white);
	margin: 0 0 var(--spacing-3);
	text-wrap: balance;
}

.domestic-aside__body {
	font-size: var(--text-sm) !important;
	line-height: var(--leading-relaxed);
	color: rgba(255, 255, 255, 0.82);
	margin: 0 0 var(--spacing-5) !important;
}

.domestic-aside__card .btn {
	display: block;
	width: 100%;
	text-align: center;
	margin: 0;
}

.domestic-aside__note {
	font-size: var(--text-xs) !important;
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
	margin: var(--spacing-3) 0 0 !important;
}

/* --- Wider furniture ----------------------------------------------------- */

.domestic-hero h1 {
	max-width: 22ch;
}

@media screen and (min-width: 64rem) {
	.domestic-hero {
		padding: var(--spacing-20) 0;
	}
	.domestic-hero h1 {
		font-size: var(--text-6xl);
	}
	.domestic-hero__intro p {
		max-width: 46rem;
	}
	/* Four across on a wide screen instead of two, so the trust strip reads as
	   one line of reassurance rather than a stack. */
	.domestic-trust .container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* The form is a two-column grid inside a card; at shell width it would become
   uncomfortably wide, so it keeps its own narrower frame and centres. */
.domestic-cta .container {
	max-width: 58rem;
}

.domestic-midcta .container {
	max-width: var(--dom-shell);
}

/* Cards fill the wider column: three across once there is room for them. */
@media screen and (min-width: 68rem) {
	.domestic-body .prose .routes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Below the two-column breakpoint the aside would land AFTER the prose, where
   a contents list is pointless and the CTA card simply repeats the mid-page
   CTA that follows two elements later. So it is desktop-only furniture: on a
   phone the page reads prose -> mid CTA -> FAQ -> form, with one ask, not two.
   Nothing unique to the aside is lost — every link in it appears elsewhere. */
@media screen and (max-width: 63.99rem) {
	.domestic-aside {
		display: none;
	}
}