/* Affiliate program: public page, agreement and back office.

   .page-title, .page-subtitle, .content-section, .section-title and
   .content-text are NOT global — every content page re-declares them in its own
   stylesheet (see pages/terms.css, pages/privacy.css). Without the block below
   this page rendered as unstyled browser defaults. */

/* --- page furniture, matching the other content pages -------------------- */

.page-title {
	margin: 2rem 0 0.5rem;
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 2.5rem);
	color: var(--retro-navy);
	text-align: center;
}

.page-subtitle {
	max-width: 34rem;
	margin: 0 auto 2rem;
	font-family: var(--font-body);
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--text-secondary);
	text-align: center;
}

.content-section {
	margin-bottom: 2rem;
	padding: 2rem;
	background: var(--bg-card);
	border: 3px solid var(--retro-navy);
	border-radius: 12px;
	box-shadow: 4px 4px 0 var(--retro-navy);
}

.section-title {
	margin-bottom: 1rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--retro-navy);
}

.content-text {
	margin-bottom: 1rem;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.8;
	color: var(--text-secondary);
}

/* The agreement and the pitch are mostly lists, which inherit none of the
   above on their own. */
.content-section ul,
.content-section ol {
	margin: 0 0 1rem;
	padding-left: 1.35rem;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.8;
	color: var(--text-secondary);
}

.content-section li {
	margin-bottom: 0.55rem;
}

.content-section a {
	color: var(--accent-primary);
	font-weight: 600;
}

.content-section code,
.page-subtitle code {
	padding: 0.1em 0.35em;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	background: #f1f2f8;
	border-radius: 4px;
	color: var(--retro-navy);
}

.error-message {
	margin-bottom: 1rem;
	padding: 0.85rem 1rem;
	font-family: var(--font-body);
	color: #7f1420;
	background: #fde3e5;
	border: 2px solid var(--color-red);
	border-radius: 8px;
}

.affiliate-steps {
	padding-left: 1.25rem;
}

.affiliate-steps li {
	margin-bottom: 0.65rem;
}

/* --- signup form --------------------------------------------------------- */

.affiliate-form {
	max-width: 34rem;
}

/* --- form controls --------------------------------------------------------
   .form-group / .form-check are defined inside checkout.css, which is scoped to
   that page, so the signup form would otherwise render as raw browser widgets.
   Same visual language, declared here so this page stands on its own. */

.affiliate-form .form-group {
	margin-bottom: 1rem;
}

.affiliate-form .form-group label {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--retro-navy);
}

.affiliate-form .form-group input,
.affiliate-form .form-group select {
	width: 100%;
	padding: 0.75rem 1rem;
	font-family: var(--font-body);
	font-size: 1rem;
	border: 3px solid var(--retro-navy);
	border-radius: 8px;
	outline: none;
	transition: all 0.2s ease;
}

.affiliate-form .form-group input:focus,
.affiliate-form .form-group select:focus {
	box-shadow: 0 0 0 3px var(--retro-yellow);
}

.affiliate-form .form-hint {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--text-secondary);
}

.affiliate-form .form-check {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-top: 0.75rem;
}

.affiliate-form .form-check input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.15rem;
	accent-color: var(--retro-navy);
	flex-shrink: 0;
}

.affiliate-form .form-check label {
	font-family: var(--font-body);
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--text-secondary);
	cursor: pointer;
}

.affiliate-form .checkout-button {
	width: 100%;
	margin-top: 1.5rem;
	padding: 1rem;
	font-size: 1.125rem;
}

/* --- code and link display ------------------------------------------------ */

.affiliate-code-display {
	margin: 0 0 1rem;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--color-red);
}

.affiliate-copy-row {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	flex-wrap: wrap;
}

.affiliate-link-input {
	flex: 1 1 18rem;
	min-width: 0;
	padding: 0.65rem 0.75rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9rem;
	color: var(--color-blue-dark);
	background: #f7f8fc;
	border: 2px solid var(--color-blue-dark);
	border-radius: 8px;
}

.retro-button-small {
	padding: 0.4rem 0.85rem;
	font-size: 0.8rem;
}

/* --- stats ---------------------------------------------------------------- */

.affiliate-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}

.affiliate-stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem;
	text-align: center;
	background: #f7f8fc;
	border: 2px solid var(--color-blue-dark);
	border-radius: 10px;
}

.affiliate-stat-value {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-blue-dark);
}

.affiliate-stat-label {
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5b6079;
}

/* --- tables --------------------------------------------------------------- */

/* Wide content scrolls inside its own box rather than pushing the page sideways. */
.affiliate-table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.affiliate-table th,
.affiliate-table td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid #e6e8f0;
	white-space: nowrap;
}

.affiliate-table thead th {
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5b6079;
}

.affiliate-badge {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: 999px;
}

.affiliate-badge-pending { background: #fff3d4; color: #8a6100; }
.affiliate-badge-approved { background: #dff3e2; color: #1c6b32; }
.affiliate-badge-paid { background: #e2e8ff; color: var(--color-blue-dark); }
.affiliate-badge-reversed { background: #fde3e5; color: var(--color-red-dark); }

.account-header-actions {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
}

@media (max-width: 640px) {
	.affiliate-code-display { font-size: 1.4rem; }
	.affiliate-link-input { flex-basis: 100%; }
}

/* ===========================================================================
   /affiliates landing page
   ---------------------------------------------------------------------------
   The visual language is taken from the storefront sign in the logo rather than
   invented for this page: the striped awning, the navy outline, the gold
   sparkles, the scalloped edge. Everything below is scoped under .aff-page so
   the agreement and the back office, which share this stylesheet, are untouched.
   ========================================================================= */

.aff-page {
	--aff-navy: #0f2580;
	--aff-navy-deep: #0a1a5c;
	--aff-red: #e52535;
	--aff-cream: #fdf6e8;
	--aff-gold: #fbbf24;
	--aff-ink: #14163a;
}

/* --- awning ---------------------------------------------------------------
   Vertical red/cream stripes with a scalloped lower edge, exactly as on the
   sign. The scallop is a repeating radial mask rather than an image, so it
   stays crisp at any width. */

.aff-awning {
	height: 46px;
	background: repeating-linear-gradient(
		90deg,
		var(--aff-red) 0 34px,
		var(--aff-cream) 34px 68px
	);
	border-bottom: 3px solid rgba(10, 26, 92, 0.35);
	-webkit-mask: radial-gradient(circle at 17px 100%, transparent 16px, #000 17px) repeat-x 0 0 / 34px 100%;
	mask: radial-gradient(circle at 17px 100%, transparent 16px, #000 17px) repeat-x 0 0 / 34px 100%;
}

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

.aff-hero {
	position: relative;
	margin-bottom: 3.5rem;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(40, 80, 212, 0.55), transparent 70%),
		linear-gradient(180deg, var(--aff-navy) 0%, var(--aff-navy-deep) 100%);
	overflow: hidden;
}

/* Faint sparkle field, echoing the gold stars on the sign. Pure gradients —
   no image request, and it survives any viewport. */
.aff-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(2px 2px at 12% 28%, rgba(251, 191, 36, 0.85), transparent),
		radial-gradient(2px 2px at 86% 22%, rgba(251, 191, 36, 0.7), transparent),
		radial-gradient(1.5px 1.5px at 24% 74%, rgba(255, 255, 255, 0.65), transparent),
		radial-gradient(1.5px 1.5px at 71% 82%, rgba(251, 191, 36, 0.6), transparent),
		radial-gradient(2px 2px at 52% 14%, rgba(255, 255, 255, 0.5), transparent);
	pointer-events: none;
}

.aff-hero-inner {
	position: relative;
	padding: 3.25rem 1.5rem 4.5rem;
	text-align: center;
}

.aff-eyebrow {
	margin: 0 0 0.9rem;
	font-family: var(--font-heading);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--aff-gold);
}

.aff-hero-title {
	margin: 0 0 1.25rem;
	font-family: var(--font-display);
	line-height: 0.94;
	letter-spacing: 0.01em;
}

.aff-hero-line1,
.aff-hero-line2 {
	display: block;
	font-size: clamp(2.6rem, 8vw, 5.25rem);
}

.aff-hero-line1 { color: var(--aff-cream); }

/* The payoff line gets the sign's own treatment: red face, hard navy offset. */
.aff-hero-line2 {
	color: var(--aff-red);
	text-shadow:
		3px 3px 0 var(--aff-navy-deep),
		-1px -1px 0 rgba(253, 246, 232, 0.9);
}

.aff-hero-sub {
	max-width: 34rem;
	margin: 0 auto 1.75rem;
	font-family: var(--font-body);
	font-size: clamp(1rem, 2.2vw, 1.15rem);
	line-height: 1.65;
	color: rgba(253, 246, 232, 0.88);
}

.aff-hero-sub strong {
	color: var(--aff-gold);
	font-weight: 700;
}

/* --- the 5% roundel -------------------------------------------------------
   A price sticker slapped on the sign. Absolute on desktop so it breaks the
   grid; it drops back into flow on small screens where there is no room. */

.aff-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 0.1rem;
	position: relative;
	margin: 0 0 1.5rem;
	padding: 1.7rem 2.3rem 2rem;
	background: var(--aff-gold);
	color: var(--aff-navy);
	border: 4px solid var(--aff-navy);
	border-radius: 50%;
	box-shadow: 5px 5px 0 rgba(10, 26, 92, 0.55);
	transform: rotate(-9deg);
}

.aff-badge-num {
	font-family: var(--font-display);
	font-size: 5rem;
	line-height: 0.8;
}

.aff-badge-pct {
	font-family: var(--font-display);
	font-size: 2.7rem;
	line-height: 0.8;
}

.aff-badge-word {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.85rem;
	font-family: var(--font-heading);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
}

@media (min-width: 900px) {
	.aff-badge {
		position: absolute;
		top: 3.5rem;
		right: 5%;
		margin: 0;
	}
}

/* --- hero call to action --------------------------------------------------- */

.aff-cta {
	display: inline-block;
	padding: 1rem 2.4rem;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--aff-cream);
	background: var(--aff-red);
	border: 3px solid var(--aff-cream);
	border-radius: 10px;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35);
	transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.aff-cta:hover,
.aff-cta:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.4);
}

.aff-cta:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

.aff-hero-fine {
	margin: 1.1rem 0 0;
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: rgba(253, 246, 232, 0.6);
}

/* Scalloped hem, the same shape as the awning, closing the hero. */
.aff-hero-scallop {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 18px;
	background: radial-gradient(circle at 15px 100%, var(--bg-primary) 14px, transparent 15px) repeat-x 0 0 / 30px 100%;
}

/* --- already enrolled notice ---------------------------------------------- */

.aff-already {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	margin-bottom: 2.5rem;
	padding: 1.1rem 1.35rem;
	font-family: var(--font-body);
	line-height: 1.6;
	background: #eefaf0;
	border: 3px solid #1c6b32;
	border-radius: 12px;
	box-shadow: 4px 4px 0 #1c6b32;
}

.aff-already-icon { font-size: 1.6rem; }
.aff-already code {
	padding: 0.1em 0.4em;
	background: #fff;
	border-radius: 4px;
	font-weight: 700;
}

/* --- section heading ------------------------------------------------------- */

.aff-h2 {
	margin: 0 0 1.75rem;
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	color: var(--aff-navy);
	text-align: center;
}

.aff-steps { margin-bottom: 4rem; }

/* --- the three tickets -----------------------------------------------------
   Cloakroom tickets: cream stock, dashed tear line, punched notches. Each is
   nudged off true so the row reads as three objects on a counter rather than
   three divs. */

.aff-ticket-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aff-ticket {
	position: relative;
	padding: 2.25rem 1.5rem 2.5rem;
	background: var(--aff-cream);
	border: 3px solid var(--aff-navy);
	border-radius: 12px;
	box-shadow: 6px 6px 0 var(--aff-navy);
}

.aff-ticket:nth-child(1) { transform: rotate(-0.9deg); }
.aff-ticket:nth-child(2) { transform: rotate(0.5deg); }
.aff-ticket:nth-child(3) { transform: rotate(-0.4deg); }

.aff-ticket-num {
	position: absolute;
	top: -1.1rem;
	left: 1.25rem;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	font-family: var(--font-display);
	font-size: 1.55rem;
	color: var(--aff-cream);
	background: var(--aff-red);
	border: 3px solid var(--aff-navy);
	border-radius: 50%;
}

.aff-ticket h3 {
	margin: 0 0 0.6rem;
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--aff-navy);
}

.aff-ticket p {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.95rem;
	line-height: 1.7;
	color: #4a4f6b;
}

.aff-ticket code {
	padding: 0.1em 0.35em;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.85em;
	background: #fff;
	border: 1px solid rgba(15, 37, 128, 0.25);
	border-radius: 4px;
	color: var(--aff-navy);
}

/* Tear line plus punched notches on either side. */
.aff-ticket-stub {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.35rem;
	border-top: 2px dashed rgba(15, 37, 128, 0.3);
}

.aff-ticket-stub::before,
.aff-ticket-stub::after {
	content: '';
	position: absolute;
	top: -9px;
	width: 16px;
	height: 16px;
	background: var(--bg-primary);
	border: 3px solid var(--aff-navy);
	border-radius: 50%;
}

.aff-ticket-stub::before { left: -11px; }
.aff-ticket-stub::after { right: -11px; }

/* --- Affiliate Facts panel -------------------------------------------------
   Deliberately a Nutrition Facts label: heavy black rules, condensed type,
   nothing decorative. On a page selling snacks it needs no explanation, and it
   is the one thing anyone will remember about this program. */

.aff-facts-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 4rem;
}

.aff-facts {
	width: 100%;
	max-width: 30rem;
	padding: 1.35rem 1.5rem 1.6rem;
	font-family: var(--font-body);
	color: #000;
	background: #fff;
	border: 3px solid #000;
	border-radius: 4px;
	box-shadow: 10px 10px 0 var(--aff-gold);
}

.aff-facts-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 2.6rem);
	line-height: 1;
	color: #000;
}

.aff-facts-serving {
	margin: 0.2rem 0 0;
	font-size: 0.85rem;
	color: #333;
}

.aff-rule { background: #000; }
.aff-rule-thick { height: 11px; margin: 0.55rem 0; }
.aff-rule-med { height: 5px; margin: 0.45rem 0; }

.aff-fact {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.4rem 0;
	font-size: 0.95rem;
	border-bottom: 1px solid #000;
}

.aff-fact strong { font-weight: 700; }

.aff-fact-big {
	font-size: 1.15rem;
	border-bottom: none;
	padding-bottom: 0.1rem;
}

.aff-fact-big strong {
	font-family: var(--font-display);
	font-size: 2.5rem;
	line-height: 0.9;
	color: var(--aff-red);
}

.aff-fact-note {
	margin: 0 0 0.35rem;
	font-size: 0.8rem;
	color: #444;
}

.aff-facts-fine {
	margin: 0.75rem 0 0;
	padding-left: 1.1rem;
	font-size: 0.85rem;
	line-height: 1.65;
	color: #222;
}

.aff-facts-fine li { margin-bottom: 0.45rem; }

.aff-facts-legal {
	margin: 0.9rem 0 0;
	font-size: 0.8rem;
	line-height: 1.6;
	color: #444;
}

.aff-facts-legal a { color: var(--aff-red); font-weight: 700; }

/* --- signup card ----------------------------------------------------------- */

.aff-join { margin-bottom: 4rem; }

.aff-join-card {
	max-width: 38rem;
	margin: 0 auto;
	overflow: hidden;
	background: var(--aff-cream);
	border: 3px solid var(--aff-navy);
	border-radius: 14px;
	box-shadow: 8px 8px 0 var(--aff-navy);
}

/* The shop awning again, this time as the card's header. */
.aff-join-awning {
	height: 30px;
	background: repeating-linear-gradient(
		90deg,
		var(--aff-red) 0 26px,
		var(--aff-cream) 26px 52px
	);
	border-bottom: 3px solid var(--aff-navy);
}

.aff-join-body { padding: 2rem 1.75rem 2.25rem; }

.aff-join-h { margin-bottom: 0.4rem; }

.aff-join-sub {
	margin: 0 0 1.75rem;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: #4a4f6b;
	text-align: center;
}

.aff-error {
	margin-bottom: 1.25rem;
	padding: 0.85rem 1rem;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: #7f1420;
	background: #fde3e5;
	border: 2px solid var(--aff-red);
	border-radius: 8px;
}

/* Live preview of the link they are about to own. */
.aff-preview {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.6rem 0 0;
	padding: 0.6rem 0.8rem;
	background: #fff;
	border: 2px dashed rgba(15, 37, 128, 0.35);
	border-radius: 8px;
}

.aff-preview-label {
	font-family: var(--font-heading);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b7280;
}

.aff-preview-url {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.85rem;
	word-break: break-all;
	color: var(--aff-navy);
}

.aff-preview-url [data-code-preview] {
	padding: 0 0.15em;
	font-weight: 700;
	color: var(--aff-red);
	background: var(--aff-gold);
	border-radius: 3px;
}

.aff-submit {
	width: 100%;
	margin-top: 1.75rem;
	padding: 1.05rem;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--aff-cream);
	background: var(--aff-red);
	border: 3px solid var(--aff-navy);
	border-radius: 10px;
	box-shadow: 5px 5px 0 var(--aff-navy);
	cursor: pointer;
	transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.aff-submit:hover,
.aff-submit:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--aff-navy);
}

.aff-submit:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--aff-navy);
}

/* --- entrance ------------------------------------------------------------
   One orchestrated load rather than motion scattered through the page. */

@media (prefers-reduced-motion: no-preference) {
	.aff-eyebrow,
	.aff-hero-title,
	.aff-hero-sub,
	.aff-cta,
	.aff-hero-fine {
		animation: aff-rise 0.62s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
	}

	.aff-hero-title { animation-delay: 0.07s; }
	.aff-hero-sub   { animation-delay: 0.15s; }
	.aff-cta        { animation-delay: 0.22s; }
	.aff-hero-fine  { animation-delay: 0.3s; }

	.aff-badge {
		animation: aff-stamp 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.36s backwards;
	}
}

@keyframes aff-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes aff-stamp {
	from { opacity: 0; transform: rotate(-24deg) scale(1.5); }
	to   { opacity: 1; transform: rotate(-9deg) scale(1); }
}

/* --- small screens --------------------------------------------------------- */

@media (max-width: 640px) {
	.aff-hero-inner { padding: 2.5rem 1.25rem 3.5rem; }
	.aff-ticket { transform: none; box-shadow: 4px 4px 0 var(--aff-navy); }
	.aff-facts { box-shadow: 6px 6px 0 var(--aff-gold); }
	.aff-join-card { box-shadow: 5px 5px 0 var(--aff-navy); }
	.aff-join-body { padding: 1.5rem 1.15rem 1.75rem; }
}

/* --- sign-in for existing affiliates ---------------------------------------
   Quieter than the signup card on purpose: most visitors here are new, and the
   people who need this already know they do. */

.aff-hero-signin {
	margin: 0.85rem 0 0;
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: rgba(253, 246, 232, 0.72);
}

.aff-hero-signin a {
	color: var(--aff-gold);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aff-signin { margin-bottom: 4rem; }

.aff-signin-card {
	max-width: 38rem;
	margin: 0 auto;
	padding: 1.75rem;
	text-align: center;
	background: #fff;
	border: 3px dashed rgba(15, 37, 128, 0.4);
	border-radius: 14px;
}

.aff-signin-h {
	margin: 0 0 0.35rem;
	font-family: var(--font-display);
	font-size: 1.75rem;
	color: var(--aff-navy);
}

.aff-signin-sub {
	margin: 0 0 1.35rem;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: #4a4f6b;
}

.aff-signin-label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--font-heading);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	color: #6b7280;
}

.aff-signin-row {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.aff-signin-row input {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.8rem 1rem;
	font-family: var(--font-body);
	font-size: 1rem;
	border: 3px solid var(--aff-navy);
	border-radius: 8px;
}

.aff-signin-row input:focus {
	outline: none;
	box-shadow: 0 0 0 3px var(--aff-gold);
}

.aff-signin-row button {
	padding: 0.8rem 1.4rem;
	font-family: var(--font-heading);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
	background: var(--aff-navy);
	border: 3px solid var(--aff-navy);
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.aff-signin-row button:hover { background: var(--aff-red); border-color: var(--aff-red); }

/* --- "check your email" ----------------------------------------------------- */

.aff-sent {
	max-width: 34rem;
	margin: 3.5rem auto 4.5rem;
	padding: 2.5rem 2rem;
	text-align: center;
	background: var(--aff-cream);
	border: 3px solid var(--aff-navy);
	border-radius: 14px;
	box-shadow: 8px 8px 0 var(--aff-navy);
}

.aff-sent-icon { font-size: 2.75rem; }

.aff-sent-text {
	margin: 0.5rem 0 1rem;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: #4a4f6b;
}

.aff-sent-fine {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.88rem;
	color: #6b7280;
}

.aff-sent-fine a { color: var(--aff-red); font-weight: 600; }