/* -------------------------------------------------------------------------
 * Recommend A Friend — /offers/promotions/recommend-a-friend/
 * seventy9-child/blocks/css/recommend-a-friend.css
 *
 * Design tokens are scoped to .raf-page, not :root, so nothing leaks into
 * the rest of the site. Every class is prefixed raf-.
 *
 * Fonts: uses Lato, which the site already loads. No @font-face here.
 * ---------------------------------------------------------------------- */

.raf-page {
	/* brand */
	--raf-blue-900: #082b53;
	--raf-blue-800: #0b3a70;
	--raf-blue-700: #0e478a;
	--raf-blue-100: #e6f2f9;
	--raf-blue-050: #f3f9fc;

	--raf-gold-600: #8f7c45;
	--raf-gold-500: #c69840;
	--raf-gold-400: #c99c43;
	--raf-gold-300: #dcbc74;

	--raf-grey-800: #39434e;
	--raf-grey-600: #6f7c8a;
	--raf-grey-200: #e6eaee;

	--raf-text-heading: var(--raf-blue-700);
	--raf-text-body: var(--raf-grey-800);
	--raf-text-muted: var(--raf-grey-600);
	--raf-surface-subtle: var(--raf-blue-050);
	--raf-surface-card: #fff;
	--raf-surface-inverse: var(--raf-blue-800);

	--raf-gradient-gold: linear-gradient(90deg, var(--raf-gold-600) 0%, var(--raf-gold-400) 100%);

	/* spacing */
	--raf-space-3: 12px;
	--raf-space-4: 16px;
	--raf-space-5: 20px;
	--raf-space-6: 24px;
	--raf-space-8: 32px;
	--raf-gutter: 24px;
	--raf-container: 1240px;

	--raf-radius-md: 10px;
	--raf-radius-pill: 999px;

	--raf-shadow-xs: 0 1px 2px rgba(18, 40, 63, .06);
	--raf-shadow-sm: 0 2px 6px rgba(18, 40, 63, .08);

	--raf-font: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--raf-focus: 0 0 0 3px rgba(37, 149, 198, .45);

	font-family: var(--raf-font);
	font-size: 17px;
	line-height: 1.6;
	color: var(--raf-text-body);
	width: 100%;
	overflow-x: hidden;
}

.raf-page *,
.raf-page *::before,
.raf-page *::after { box-sizing: border-box; }

.raf-page img { max-width: 100%; display: block; }

.raf-container {
	max-width: var(--raf-container);
	margin: 0 auto;
	padding-inline: var(--raf-gutter);
}

/* Shared bits ----------------------------------------------------------- */

.raf-eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--raf-gold-500);
}

.raf-eyebrow--light { color: var(--raf-gold-300); }

.raf-rule {
	height: 3px;
	width: 64px;
	background: var(--raf-gradient-gold);
	border-radius: var(--raf-radius-pill);
}

.raf-page .raf-section-title {
	font-family: var(--raf-font);
	font-weight: 700;
	font-size: clamp(24px, 4vw, 34px);
	line-height: 1.2;
	color: var(--raf-text-heading);
	margin: var(--raf-space-3) 0 var(--raf-space-4);
}

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

.raf-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(360px, 48vw, 540px);
	background: var(--raf-blue-800);
	overflow: hidden;
}

.raf-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.raf-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 43, 83, .9) 0%, rgba(8, 43, 83, .62) 45%, rgba(8, 43, 83, .18) 100%);
}

.raf-hero__inner {
	position: relative;
	width: 100%;
	padding-top: clamp(64px, 14vw, 120px);
	padding-bottom: clamp(28px, 5vw, 56px);
}

.raf-hero__copy { max-width: min(100%, 620px); }

/*
 * The theme's heading colour outranks anything unqualified here, which is why
 * this keeps coming out blue. Forced white, scoped to this hero only.
 */
.raf-page .raf-hero .raf-hero__title,
.raf-page .raf-hero h1.raf-hero__title {
	font-family: var(--raf-font);
	font-weight: 900;
	font-size: clamp(30px, 7vw, 54px);
	line-height: 1.1;
	color: #fff !important;
	margin: var(--raf-space-3) 0 var(--raf-space-4);
}

.raf-hero__lead {
	font-weight: 300;
	font-size: clamp(17px, 2.4vw, 21px);
	line-height: 1.6;
	color: rgba(255, 255, 255, .92);
	margin: 0;
}

/* The offer ------------------------------------------------------------- */

.raf-offer { padding-block: clamp(44px, 7vw, 80px); }

.raf-offer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

.raf-offer__media,
.raf-offer__copy { min-width: 0; }

.raf-offer__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--raf-radius-md);
}

.raf-page .raf-offer__title {
	font-family: var(--raf-font);
	font-weight: 700;
	font-size: clamp(26px, 4.4vw, 38px);
	line-height: 1.2;
	color: var(--raf-text-heading);
	margin: var(--raf-space-3) 0 var(--raf-space-4);
}

.raf-offer__asterisk { color: var(--raf-gold-500); }

.raf-offer__intro { margin: var(--raf-space-6) 0 var(--raf-space-4); }

.raf-offer__emphasis {
	font-weight: 700;
	color: var(--raf-text-heading);
	margin: 0 0 var(--raf-space-4);
}

.raf-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--raf-space-4);
	margin: var(--raf-space-6) 0 var(--raf-space-8);
}

.raf-stat {
	background: var(--raf-surface-subtle);
	border-radius: var(--raf-radius-md);
	padding: var(--raf-space-5);
}

.raf-stat__value {
	font-weight: 900;
	font-size: clamp(28px, 4vw, 34px);
	line-height: 1.1;
	color: var(--raf-text-heading);
}

.raf-stat__unit {
	font-size: 15px;
	font-weight: 700;
	margin-left: 2px;
}

.raf-stat__label {
	font-size: 15px;
	color: var(--raf-text-muted);
	margin-top: 4px;
}

.raf-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--raf-space-4);
}

.raf-actions__note {
	font-size: 13px;
	color: var(--raf-text-muted);
}

/* Buttons --------------------------------------------------------------- */

.raf-page .raf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 28px;
	border-radius: var(--raf-radius-pill);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color .16s cubic-bezier(.4, 0, .2, 1), color .16s cubic-bezier(.4, 0, .2, 1), border-color .16s cubic-bezier(.4, 0, .2, 1);
}

.raf-page .raf-btn--gold {
	background: var(--raf-gold-500);
	color: #fff;
}

.raf-page .raf-btn--gold:hover,
.raf-page .raf-btn--gold:focus {
	background: #a87e33;
	color: #fff;
	text-decoration: none;
}

.raf-page .raf-btn--inverse {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
}

.raf-page .raf-btn--inverse:hover,
.raf-page .raf-btn--inverse:focus {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border-color: #fff;
	text-decoration: none;
}

.raf-page .raf-btn:focus-visible { outline: none; box-shadow: var(--raf-focus); }

/* How it works ---------------------------------------------------------- */

.raf-steps {
	background: var(--raf-surface-subtle);
	padding-block: clamp(44px, 7vw, 80px);
}

.raf-steps__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--raf-space-6);
	margin-top: clamp(28px, 4vw, 48px);
}

.raf-step {
	background: var(--raf-surface-card);
	border-radius: var(--raf-radius-md);
	padding: clamp(20px, 3vw, 32px);
	box-shadow: var(--raf-shadow-sm);
}

.raf-step__number {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--raf-blue-700);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 19px;
}

.raf-page .raf-step__title {
	font-family: var(--raf-font);
	font-weight: 700;
	font-size: 23px;
	line-height: 1.35;
	color: var(--raf-text-heading);
	margin: var(--raf-space-5) 0 var(--raf-space-3);
}

.raf-step__text {
	font-size: 15px;
	margin: 0;
}

/* Contact band ---------------------------------------------------------- */

.raf-contact {
	background: var(--raf-surface-inverse);
	padding-block: clamp(40px, 6vw, 64px);
}

.raf-contact__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--raf-space-8);
}

.raf-contact__copy {
	flex: 1 1 320px;
	min-width: min(100%, 280px);
}

.raf-page .raf-contact__title {
	font-family: var(--raf-font);
	font-weight: 700;
	font-size: clamp(21px, 3vw, 28px);
	line-height: 1.2;
	color: #fff !important;
	margin: 0 0 var(--raf-space-3);
}

.raf-contact__text {
	color: rgba(255, 255, 255, .85);
	max-width: 56ch;
	margin: 0;
}

.raf-contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--raf-space-4);
}

/* At a glance ----------------------------------------------------------- */

.raf-glance { padding-block: clamp(44px, 7vw, 72px); }

.raf-glance__list {
	list-style: none;
	padding: 0;
	margin: clamp(24px, 4vw, 40px) 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--raf-space-5) var(--raf-space-8);
}

.raf-glance__item {
	display: flex;
	gap: var(--raf-space-3);
	align-items: flex-start;
}

.raf-glance__icon {
	width: 16px;
	height: 16px;
	margin-top: 7px;
	flex-shrink: 0;
	color: var(--raf-gold-500);
}

/* Terms ----------------------------------------------------------------- */

.raf-terms {
	background: var(--raf-surface-subtle);
	padding-block: clamp(44px, 7vw, 80px);
}

.raf-tabs {
	max-width: 900px;
	margin-top: clamp(24px, 4vw, 40px);
}

/* CSS-only tabs — no JavaScript, keyboard accessible via the radios. */
.raf-tabs__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.raf-tabs__list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	background: var(--raf-surface-card);
	border: 1px solid var(--raf-grey-200);
	border-radius: var(--raf-radius-pill);
	padding: 4px;
}

.raf-tabs__tab {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 20px;
	border-radius: var(--raf-radius-pill);
	font-size: 15px;
	font-weight: 700;
	color: var(--raf-text-muted);
	cursor: pointer;
	user-select: none;
	transition: background-color .16s cubic-bezier(.4, 0, .2, 1), color .16s cubic-bezier(.4, 0, .2, 1);
}

.raf-tabs__tab:hover { color: var(--raf-text-heading); }

#raf-terms-existing:checked ~ .raf-tabs__list .raf-tabs__tab[for="raf-terms-existing"],
#raf-terms-new:checked ~ .raf-tabs__list .raf-tabs__tab[for="raf-terms-new"] {
	background: var(--raf-blue-700);
	color: #fff;
}

#raf-terms-existing:focus-visible ~ .raf-tabs__list .raf-tabs__tab[for="raf-terms-existing"],
#raf-terms-new:focus-visible ~ .raf-tabs__list .raf-tabs__tab[for="raf-terms-new"] {
	box-shadow: var(--raf-focus);
}

.raf-tabs__panels { margin-top: clamp(20px, 3vw, 32px); }

.raf-panel {
	display: none;
	background: var(--raf-surface-card);
	border-radius: var(--raf-radius-md);
	padding: clamp(20px, 3.5vw, 36px);
	box-shadow: var(--raf-shadow-xs);
}

#raf-terms-existing:checked ~ .raf-tabs__panels .raf-panel--existing,
#raf-terms-new:checked ~ .raf-tabs__panels .raf-panel--new {
	display: block;
}

/* The panel headings repeat the tab labels — hidden unless tabs are gone. */
.raf-panel__title { display: none; }

.raf-panel__list {
	margin: 0;
	padding-left: var(--raf-space-5);
	display: grid;
	gap: var(--raf-space-3);
	font-size: 15px;
	color: var(--raf-text-body);
}

/* No-JS / narrow fallback: if tabs wrap awkwardly they still work, but on
   very small screens stack the pills full width. */
@media (max-width: 420px) {
	.raf-tabs__list { display: flex; width: 100%; }
	.raf-tabs__tab { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.raf-page *,
	.raf-page *::before,
	.raf-page *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}