/*
 * Get More Support — mobile-first, reuses the site's own design tokens
 * (variables.css/colors.css/buttons.css, all already loaded via
 * layouts/head) rather than inventing a separate palette, so this page
 * reads as part of StudyUKToday, not a bolted-on payment page. No
 * gradients, no countdowns, no flashing CTAs — calm and specific,
 * matching the tone Apply Online already uses.
 */

.gms-page {
	max-width: 68rem;
	margin: 0 auto;
	padding: var(--spacing-6) var(--spacing-4) var(--spacing-16);
}

.gms-alert {
	background: var(--color-red-50, #fdf0ef);
	color: var(--color-red-700, #a3271b);
	border-radius: var(--rounded);
	padding: var(--spacing-3) var(--spacing-4);
	margin-bottom: var(--spacing-6);
	font-size: var(--text-sm);
}

/* ---------- Hero ---------- */
.gms-hero {
	text-align: center;
	padding: var(--spacing-10) 0 var(--spacing-8);
}
.gms-hero__lede {
	font-family: var(--font-title);
	font-weight: var(--font-bold);
	font-size: var(--text-3xl);
	line-height: 1.15;
	margin: 0 0 var(--spacing-3);
}
.gms-hero__sub {
	font-size: var(--text-lg);
	color: var(--color-text-dimmed);
	max-width: 40rem;
	margin: 0 auto;
	line-height: 1.6;
}

/* ---------- Tier cards — stacked on mobile, three-up on desktop ---------- */
.gms-tiers {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
	margin-bottom: var(--spacing-12);
}
.gms-card {
	background: var(--color-white);
	border: 1px solid var(--color-gray-250, #e5e5e5);
	border-radius: var(--rounded-xl);
	box-shadow: var(--shadow);
	padding: var(--spacing-6);
	display: flex;
	flex-direction: column;
	position: relative;
}
.gms-card--premium {
	border-color: var(--btn-cta-bg, var(--color-black));
	box-shadow: var(--shadow-md);
}
.gms-card__badge {
	display: inline-block;
	align-self: flex-start;
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--btn-cta-bg, var(--color-black));
	background: var(--color-gray-100);
	border-radius: 999px;
	padding: 2px var(--spacing-3);
	margin: 0 0 var(--spacing-3);
}
.gms-card__title {
	font-size: var(--text-xl);
	margin: 0 0 var(--spacing-1);
}
.gms-card__price {
	font-family: var(--font-title);
	font-size: var(--text-3xl);
	font-weight: var(--font-bold);
	margin: 0 0 var(--spacing-3);
}
.gms-card__price span {
	font-size: var(--text-sm);
	font-weight: var(--font-normal);
	color: var(--color-text-dimmed);
}
.gms-card__desc {
	color: var(--color-text-dimmed);
	font-size: var(--text-sm);
	margin: 0 0 var(--spacing-4);
	line-height: 1.6;
}
.gms-card__list {
	list-style: none;
	margin: 0 0 var(--spacing-4);
	padding: 0;
	font-size: var(--text-sm);
}
.gms-card__list li {
	position: relative;
	padding-left: var(--spacing-6);
	margin-bottom: var(--spacing-2);
	line-height: 1.5;
}
.gms-card__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-green-600, #1e7a34);
	font-weight: var(--font-bold);
}
.gms-card__list--not li {
	color: var(--color-text-dimmed);
}
.gms-card__list--not li::before {
	content: "–";
	color: var(--color-text-dimmed);
}
.gms-card__cta {
	margin-top: auto;
	text-align: center;
}

/* ---------- Purchase form ---------- */
.gms-form {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}
.gms-form label:not(.gms-form__consent) {
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-text-dimmed);
}
.gms-form input[type="email"] {
	width: 100%;
	padding: var(--spacing-3);
	font-size: var(--text-base);
	border: 1px solid var(--color-gray-250, #e5e5e5);
	border-radius: var(--rounded);
	/* 16px minimum keeps iOS Safari from zooming in on focus */
	font-size: 16px;
}
.gms-form__consent {
	display: flex;
	gap: var(--spacing-2);
	align-items: flex-start;
	font-size: var(--text-xs);
	color: var(--color-text-dimmed);
	line-height: 1.5;
}
.gms-form__consent input {
	margin-top: 3px;
	flex: none;
	/* comfortably tappable on a phone */
	width: 20px;
	height: 20px;
}
.gms-form__submit {
	width: 100%;
	text-align: center;
	font-size: var(--text-base) !important;
	padding: var(--spacing-4) !important;
}
.gms-form__fine {
	font-size: var(--text-xs);
	color: var(--color-text-dimmed);
	text-align: center;
	margin: 0;
}

/* ---------- Comparison ---------- */
.gms-compare {
	margin-bottom: var(--spacing-12);
}
.gms-compare h2 {
	text-align: center;
	margin-bottom: var(--spacing-5);
}
.gms-compare__scroll {
	overflow-x: auto;
	border: 1px solid var(--color-gray-250, #e5e5e5);
	border-radius: var(--rounded-xl);
}
.gms-compare__table {
	width: 100%;
	min-width: 40rem;
	border-collapse: collapse;
	font-size: var(--text-sm);
	background: var(--color-white);
}
.gms-compare__table th,
.gms-compare__table td {
	text-align: left;
	padding: var(--spacing-3);
	border-bottom: 1px solid var(--color-gray-250, #e5e5e5);
}
.gms-compare__table thead th {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-text-dimmed);
	background: var(--color-gray-100);
}
.gms-compare__table tbody tr:last-child td {
	border-bottom: none;
}

/* ---------- FAQ (native accordion, no JS) ---------- */
.gms-faq {
	max-width: 42rem;
	margin: 0 auto var(--spacing-12);
}
.gms-faq h2 {
	text-align: center;
	margin-bottom: var(--spacing-5);
}
.gms-faq__item {
	border-bottom: 1px solid var(--color-gray-250, #e5e5e5);
	padding: var(--spacing-4) 0;
}
.gms-faq__item summary {
	cursor: pointer;
	font-weight: var(--font-semibold);
	font-size: var(--text-base);
	list-style: none;
}
.gms-faq__item summary::-webkit-details-marker {
	display: none;
}
.gms-faq__item summary::after {
	content: "+";
	float: right;
	font-weight: var(--font-normal);
	color: var(--color-text-dimmed);
}
.gms-faq__item[open] summary::after {
	content: "–";
}
.gms-faq__item p {
	margin: var(--spacing-3) 0 0;
	color: var(--color-text-dimmed);
	font-size: var(--text-sm);
	line-height: 1.6;
}

/* ---------- Trust / disclosure ---------- */
.gms-trust {
	max-width: 36rem;
	margin: 0 auto;
	text-align: center;
	background: var(--color-gray-100);
	border-radius: var(--rounded-xl);
	padding: var(--spacing-6);
}
.gms-trust ul {
	list-style: none;
	margin: 0 0 var(--spacing-4);
	padding: 0;
	font-size: var(--text-sm);
}
.gms-trust li {
	margin-bottom: var(--spacing-2);
}
.gms-trust__refund {
	font-size: var(--text-xs);
	color: var(--color-text-dimmed);
	margin: 0;
}

/* ---------- Legal pages (Refund Policy) sharing this stylesheet ---------- */
.gms-legal {
	max-width: 42rem;
}
.gms-legal h1 {
	font-size: var(--text-3xl);
	margin: var(--spacing-6) 0 var(--spacing-3);
}
.gms-legal h2 {
	font-size: var(--text-xl);
	margin: var(--spacing-8) 0 var(--spacing-3);
}
.gms-legal p,
.gms-legal li {
	font-size: var(--text-base);
	line-height: 1.7;
	color: var(--color-text-dimmed);
}
.gms-legal__intro {
	font-size: var(--text-lg) !important;
}
.gms-legal__summary {
	background: var(--color-gray-100);
	border-radius: var(--rounded-xl);
	padding: var(--spacing-5);
	margin: var(--spacing-6) 0;
}
.gms-legal__summary p {
	margin: 0;
	color: var(--color-text) !important;
}

/* ---------- Desktop ---------- */
@media (min-width: 60rem) {
	.gms-hero__lede {
		font-size: var(--text-4xl);
	}
	.gms-tiers {
		flex-direction: row;
		align-items: stretch;
	}
	.gms-card {
		flex: 1;
	}
	.gms-card--premium {
		transform: translateY(-4px);
	}
}

/* ---------- Payment status pages (thank-you / cancelled) ---------- */
.gms-status {
	max-width: 34rem;
	text-align: center;
	padding-top: var(--spacing-12);
	padding-bottom: var(--spacing-16);
}
.gms-status h1 {
	font-size: var(--text-3xl);
	margin-bottom: var(--spacing-4);
}
.gms-status p {
	color: var(--color-text-dimmed);
	font-size: var(--text-base);
	line-height: 1.6;
	margin-bottom: var(--spacing-4);
}
.gms-status__fine {
	font-size: var(--text-xs);
	color: var(--color-text-dimmed);
}

/* ---------- Minimal header/footer for standalone status pages (thank-you / cancelled) ---------- */
.gms-minimal-header {
	padding: var(--spacing-5) var(--spacing-4);
	border-bottom: 1px solid var(--color-gray-250, #e5e5e5);
}
.gms-minimal-header__brand {
	font-family: var(--font-title);
	font-weight: var(--font-bold);
	font-size: var(--text-lg);
	color: var(--color-text);
	text-decoration: none;
}
.gms-minimal-footer {
	text-align: center;
	padding: var(--spacing-8) var(--spacing-4);
	color: var(--color-text-dimmed);
	font-size: var(--text-sm);
}

.gms-compare__more {
	text-align: center;
	font-size: var(--text-sm);
	color: var(--color-text-dimmed);
	margin-top: var(--spacing-3);
}

/* ---------- "Free to apply" is not "free tuition" ----------
   A second hero paragraph qualifying the first. .gms-hero__sub sets
   `margin: 0 auto`, so two of them would sit flush against each other —
   this only restores the gap and steps the type down a level, so the
   qualifier reads as a footnote to the promise above it rather than
   competing with it. New class only; nothing above this line changes. */
.gms-hero__sub--qualifier {
	margin-top: var(--spacing-4);
	font-size: var(--text-base);
}

/* ==========================================================
   funding-note (snippets/layouts/funding-note.php)
   Identical to the block in apply-online.css — the snippet is shared
   between the two pages but neither loads the other's stylesheet, so
   the rules are duplicated rather than extracted into the bundled
   framework CSS (which every page on the site loads, for a block only
   two pages use). If you edit one, edit both.
   ========================================================== */
.funding-note {
	background: var(--color-white);
	border: 1px solid var(--brand-navy, #0F172A);
	border-radius: 14px;
	padding: var(--spacing-6);
	margin-bottom: var(--spacing-12);
}
.funding-note__title {
	font-family: var(--font-title);
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	line-height: 1.25;
	margin: 0 0 var(--spacing-3);
	color: var(--brand-navy, #0F172A);
}
.funding-note__body {
	margin: 0 0 var(--spacing-3);
	font-size: var(--text-sm);
	line-height: 1.65;
	color: var(--color-text-dimmed);
}
.funding-note__body:last-child { margin-bottom: 0; }
.funding-note__body strong { color: var(--color-text); font-weight: var(--font-semibold); }
.funding-note__sub {
	margin-top: var(--spacing-5);
	padding-top: var(--spacing-5);
	border-top: 1px solid var(--color-gray-250, #e5e5e5);
}
.funding-note__subtitle {
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--brand-navy, #0F172A);
	margin: 0 0 var(--spacing-3);
}
@media (min-width: 62rem) {
	.funding-note { padding: var(--spacing-8); }
	.funding-note__title { font-size: var(--text-xl); }
}