/**
 * Refer and Earn.
 *
 * WHM-86. This REPLACES the eprm-referrals stylesheet on /refer/ rather than
 * overriding it: class-refer.php dequeues theirs and strips the second <style>
 * block the shortcode prints inline, so everything the page wears comes from
 * here. Nothing below fights a rule; there is nothing left to fight.
 *
 * TWO STATES, ONE SHEET. The shortcode renders a hero with sign in and join
 * tabs when there is no referrer session, and a dashboard when there is. Both
 * are styled here, because a customer moves between them without the page
 * changing and a second stylesheet would be a second thing to keep in step.
 *
 * The plugin's JavaScript is untouched and its class names are its own, so
 * every selector here is a name that file already toggles: .eprm-tab-btn.active,
 * .eprm-message-success, .eprm-btn-loading. Renaming any of them would be a
 * silent break, which is why none of them are renamed.
 */

body.express-refer .eprm-referral-account,
body.express-refer .eprm-dashboard {
	--ep-refer-w: 900px;
	max-width: var(--ep-refer-w);
	margin: 0 auto;
	padding: 0 var(--ep-gutter-now, var(--ep-s-5));
	color: var(--ep-lt-ink);
	font-family: var(--ep-font);
}

/* ===========================================================================
   THE HERO, signed out
   =========================================================================== */
body.express-refer .eprm-ref-banner-section {
	width: auto;
	margin: 0 0 var(--ep-s-10);
	padding: var(--ep-s-12) var(--ep-gutter-now, var(--ep-s-5)) var(--ep-s-10);
	background: var(--ep-lt-tint);
	border-bottom: 1px solid var(--ep-lt-tint-e);
	color: var(--ep-lt-ink);
	font-family: var(--ep-font);
}
body.express-refer .eprm-banner-inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}
body.express-refer .eprm-badge-pill {
	display: inline-block;
	margin: 0 0 var(--ep-s-5);
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--ep-vio-deep);
	color: #FFFFFF;
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
/* The stars either side of the badge were part of the sticker look. */
body.express-refer .eprm-badge-pill .eprm-star { display: none; }

body.express-refer .eprm-banner-title {
	margin: 0 0 var(--ep-s-4);
	font-size: var(--ep-t-4xl);
	font-weight: var(--ep-w-black);
	font-style: normal;
	letter-spacing: var(--ep-track-head);
	line-height: var(--ep-lh-tight);
	text-transform: none;
	text-shadow: none;
	text-wrap: balance;
	color: var(--ep-lt-ink);
}
/* The second line was a black stamp behind italic capitals. It keeps the
   emphasis and loses the sticker. */
body.express-refer .eprm-title-stamp { display: inline; background: none; }
body.express-refer .eprm-title-stamp span {
	display: inline;
	padding: 0;
	background: none;
	color: var(--ep-vio-deep);
	transform: none;
}
body.express-refer .eprm-banner-sub {
	max-width: 54ch;
	margin: 0 auto;
	font-size: var(--ep-t-lg);
	line-height: 1.55;
	color: var(--ep-lt-mut);
}

/* The headline number. */
body.express-refer .eprm-reward-bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	max-width: 520px;
	margin: var(--ep-s-8) auto 0;
	padding: var(--ep-s-5) var(--ep-s-6);
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-tint-e);
	border-radius: var(--ep-r-lg);
	box-shadow: 0 10px 30px rgba(17, 12, 34, 0.06);
}
body.express-refer .eprm-reward-big {
	font-size: var(--ep-t-lg);
	font-weight: var(--ep-w-bold);
	letter-spacing: var(--ep-track-sub);
	color: var(--ep-lt-ink);
}
body.express-refer .eprm-reward-big em {
	font-style: normal;
	font-weight: var(--ep-w-black);
	color: var(--ep-vio-deep);
}
body.express-refer .eprm-reward-small {
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-semi);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ep-lt-mut);
}

/* The three steps. */
body.express-refer .eprm-steprm-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ep-s-3);
	margin-top: var(--ep-s-8);
	text-align: left;
}
body.express-refer .eprm-steprm-card {
	position: relative;
	padding: var(--ep-s-5) var(--ep-s-5) var(--ep-s-5) 60px;
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-tint-e);
	border-radius: var(--ep-r-md);
	box-shadow: none;
	transform: none;
}
body.express-refer .eprm-steprm-tag {
	position: absolute;
	left: var(--ep-s-5);
	top: var(--ep-s-5);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ep-lt-tint);
	color: var(--ep-vio-deep);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0;
	line-height: 1;
}
body.express-refer .eprm-steprm-card strong {
	display: block;
	margin-bottom: 4px;
	font-size: var(--ep-t-md);
	font-weight: var(--ep-w-bold);
	letter-spacing: var(--ep-track-sub);
	text-transform: none;
	color: var(--ep-lt-ink);
}
body.express-refer .eprm-steprm-card p {
	margin: 0;
	font-size: var(--ep-t-sm);
	line-height: 1.55;
	color: var(--ep-lt-ink-2);
}
body.express-refer .eprm-hero-cta {
	display: block;
	margin-top: var(--ep-s-8);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-semi);
	color: var(--ep-lt-mut);
}

/* ===========================================================================
   SIGN IN AND JOIN
   =========================================================================== */
body.express-refer .eprm-referral-account { padding-bottom: var(--ep-s-16); }

body.express-refer .eprm-account-tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ep-s-2);
	max-width: 480px;
	margin: 0 auto var(--ep-s-6);
	padding: 5px;
	background: var(--ep-lt-sunk);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
}
body.express-refer .eprm-tab-btn {
	min-height: var(--ep-control-sm);
	padding: 0 var(--ep-s-4);
	border: 0;
	border-radius: var(--ep-r-sm);
	background: none;
	font-family: var(--ep-font);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-semi);
	color: var(--ep-lt-mut);
	cursor: pointer;
	transition: background var(--ep-dur-1) var(--ep-ease), color var(--ep-dur-1) var(--ep-ease);
}
body.express-refer .eprm-tab-btn:hover { color: var(--ep-lt-ink); }
body.express-refer .eprm-tab-btn.active {
	background: var(--ep-lt-card);
	color: var(--ep-lt-ink);
	font-weight: var(--ep-w-bold);
	box-shadow: 0 1px 3px rgba(17, 12, 34, 0.08);
}

body.express-refer .eprm-referral-form {
	max-width: 480px;
	margin: 0 auto;
	padding: var(--ep-s-6);
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-lg);
}
body.express-refer .eprm-form-intro {
	margin: 0 0 var(--ep-s-5);
	font-size: var(--ep-t-sm);
	line-height: 1.55;
	color: var(--ep-lt-mut);
}
body.express-refer .eprm-form-row { margin-bottom: var(--ep-s-4); }
body.express-refer .eprm-form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-semi);
	color: var(--ep-lt-ink-2);
}
body.express-refer .eprm-form-row input[type="text"],
body.express-refer .eprm-form-row input[type="email"],
body.express-refer .eprm-form-row input[type="password"] {
	width: 100%;
	min-height: var(--ep-control-md);
	padding: var(--ep-s-2) var(--ep-s-4);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	background: var(--ep-lt-card);
	font-family: var(--ep-font);
	font-size: var(--ep-t-base);
	color: var(--ep-lt-ink);
}
body.express-refer .eprm-form-row input:focus {
	border-color: var(--ep-vio-deep);
	outline: var(--ep-focus);
	outline-offset: var(--ep-focus-offset);
}
body.express-refer .eprm-help-text {
	display: block;
	margin-top: 6px;
	font-size: var(--ep-t-xs);
	line-height: 1.5;
	color: var(--ep-lt-mut);
}
body.express-refer .eprm-form-links {
	margin-top: var(--ep-s-4);
	text-align: center;
	font-size: var(--ep-t-sm);
}
body.express-refer .eprm-form-links a { color: var(--ep-vio-deep); font-weight: var(--ep-w-semi); }

/* ===========================================================================
   BUTTONS
   =========================================================================== */
body.express-refer .eprm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ep-s-2);
	min-height: var(--ep-control);
	padding: 0 var(--ep-s-6);
	border: 1px solid transparent;
	border-radius: var(--ep-r-md);
	font-family: var(--ep-font);
	font-size: var(--ep-t-base);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ep-dur-1) var(--ep-ease);
}
body.express-refer .eprm-btn-full { width: 100%; }
body.express-refer .eprm-btn-primary {
	background: var(--ep-vio-deep);
	color: #FFFFFF;
	box-shadow: 0 8px 22px rgba(109, 40, 217, 0.24);
}
body.express-refer .eprm-btn-primary:hover { background: #5B21B6; }
body.express-refer .eprm-btn-secondary {
	background: var(--ep-lt-tint);
	color: var(--ep-vio-deep);
	border-color: var(--ep-lt-tint-e);
	box-shadow: none;
}
body.express-refer .eprm-btn-secondary:hover { background: var(--ep-lt-tint-e); }
body.express-refer .eprm-btn-outline {
	background: var(--ep-lt-card);
	color: var(--ep-lt-ink);
	border-color: var(--ep-lt-line);
	box-shadow: none;
}
body.express-refer .eprm-btn-outline:hover { border-color: var(--ep-lt-ink); }

/* The plugin swaps these two spans while a request is in flight. */
body.express-refer .eprm-btn-loading { opacity: 0.85; }

/* ===========================================================================
   FORM MESSAGES
   =========================================================================== */
body.express-refer .eprm-form-message {
	margin-top: var(--ep-s-4);
	padding: var(--ep-s-3) var(--ep-s-4);
	border: 1px solid transparent;
	border-radius: var(--ep-r-sm);
	font-size: var(--ep-t-sm);
	line-height: 1.5;
}
body.express-refer .eprm-message-success {
	background: var(--ep-lt-ok-bg);
	border-color: rgba(15, 123, 79, 0.2);
	color: var(--ep-lt-ok);
}
body.express-refer .eprm-message-error {
	background: var(--ep-lt-err-bg);
	border-color: rgba(179, 38, 30, 0.2);
	color: var(--ep-lt-err);
}

/* ===========================================================================
   THE DASHBOARD, signed in
   =========================================================================== */
body.express-refer .eprm-dashboard { padding-top: var(--ep-s-10); padding-bottom: var(--ep-s-16); }

body.express-refer .eprm-dash-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ep-s-4);
	margin-bottom: var(--ep-s-8);
	padding-bottom: var(--ep-s-6);
	border-bottom: 1px solid var(--ep-lt-line);
}
body.express-refer .eprm-dash-welcome h2 {
	margin: 0;
	font-size: var(--ep-t-2xl);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-head);
	color: var(--ep-lt-ink);
}
body.express-refer .eprm-subtitle {
	margin: 4px 0 0;
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ep-vio-deep);
}
body.express-refer .eprm-dash-logout .eprm-btn { min-height: var(--ep-control-sm); font-size: var(--ep-t-sm); }

/* The numbers. The credit balance is the one a person opens this page for, so
   it is the only one given the accent. */
body.express-refer .eprm-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ep-s-3);
	margin-bottom: var(--ep-s-8);
}
body.express-refer .eprm-stat-card {
	padding: var(--ep-s-5);
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
}
body.express-refer .eprm-stat-highlight {
	background: var(--ep-lt-tint);
	border-color: var(--ep-lt-tint-e);
	border-left: 3px solid var(--ep-vio-deep);
}
body.express-refer .eprm-stat-content { display: flex; flex-direction: column; gap: 4px; }
body.express-refer .eprm-stat-value {
	font-size: var(--ep-t-2xl);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-tight);
	font-variant-numeric: tabular-nums;
	line-height: 1.05;
	color: var(--ep-lt-ink);
}
body.express-refer .eprm-stat-highlight .eprm-stat-value { color: var(--ep-vio-deep); }
body.express-refer .eprm-stat-pending .eprm-stat-value { color: var(--ep-lt-warn); }
body.express-refer .eprm-stat-label {
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-semi);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ep-lt-mut);
}

body.express-refer .eprm-section {
	margin-bottom: var(--ep-s-6);
	padding: var(--ep-s-6);
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
}
body.express-refer .eprm-section h3 {
	margin: 0 0 var(--ep-s-2);
	font-size: var(--ep-t-md);
	font-weight: var(--ep-w-bold);
	letter-spacing: var(--ep-track-sub);
	color: var(--ep-lt-ink);
}
body.express-refer .eprm-section p { margin: 0 0 var(--ep-s-3); font-size: var(--ep-t-sm); line-height: 1.6; color: var(--ep-lt-ink-2); }
body.express-refer .eprm-section p:last-child { margin-bottom: 0; }
body.express-refer .eprm-section strong { color: var(--ep-lt-ink); font-weight: var(--ep-w-bold); }
body.express-refer .eprm-pending-info {
	background: var(--ep-lt-warn-bg);
	border-color: #EDDFB6;
	border-left: 3px solid var(--ep-lt-warn);
}

/* The link, and the button that copies it. */
body.express-refer .eprm-link-box {
	display: flex;
	gap: var(--ep-s-2);
	margin-top: var(--ep-s-4);
}
body.express-refer .eprm-link-box input {
	flex: 1 1 0;
	min-width: 0;
	min-height: var(--ep-control);
	padding: 0 var(--ep-s-4);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	background: var(--ep-lt-sunk);
	font-family: var(--ep-font);
	font-size: var(--ep-t-sm);
	color: var(--ep-lt-ink-2);
}
body.express-refer .eprm-link-box .eprm-btn { flex: 0 0 auto; font-size: var(--ep-t-sm); padding: 0 var(--ep-s-5); }

/* How it works. */
body.express-refer .eprm-steps { display: grid; gap: var(--ep-s-3); margin-top: var(--ep-s-4); }
body.express-refer .eprm-step { display: flex; align-items: center; gap: var(--ep-s-3); }
body.express-refer .eprm-steprm-num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ep-lt-tint);
	color: var(--ep-vio-deep);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	line-height: 1;
}
body.express-refer .eprm-steprm-text { font-size: var(--ep-t-sm); color: var(--ep-lt-ink-2); }

/* The leaderboard. */
body.express-refer .eprm-leaderboard-list { display: grid; gap: var(--ep-s-2); margin-top: var(--ep-s-4); }
body.express-refer .eprm-leaderboard-item {
	display: flex;
	align-items: center;
	gap: var(--ep-s-3);
	padding: var(--ep-s-3) var(--ep-s-4);
	background: var(--ep-lt-sunk);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	font-size: var(--ep-t-sm);
}
body.express-refer .eprm-rank {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	font-size: var(--ep-t-xs);
	font-weight: var(--ep-w-bold);
	font-variant-numeric: tabular-nums;
	color: var(--ep-lt-ink-2);
}
body.express-refer .eprm-top-1 .eprm-rank { background: var(--ep-vio-deep); border-color: var(--ep-vio-deep); color: #FFFFFF; }
body.express-refer .eprm-top-2 .eprm-rank,
body.express-refer .eprm-top-3 .eprm-rank { background: var(--ep-lt-tint); border-color: var(--ep-lt-tint-e); color: var(--ep-vio-deep); }
body.express-refer .eprm-name { flex: 1 1 auto; min-width: 0; font-weight: var(--ep-w-semi); color: var(--ep-lt-ink); }
body.express-refer .eprm-count { font-variant-numeric: tabular-nums; font-weight: var(--ep-w-bold); color: var(--ep-lt-ink-2); }
body.express-refer .eprm-is-me {
	background: var(--ep-lt-tint);
	border-color: var(--ep-lt-tint-e);
}

/* Recent orders from the link. */
body.express-refer .eprm-referrals-list { display: grid; gap: var(--ep-s-2); margin-top: var(--ep-s-4); }
body.express-refer .eprm-referral-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ep-s-3);
	padding: var(--ep-s-3) var(--ep-s-4);
	background: var(--ep-lt-sunk);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	font-size: var(--ep-t-sm);
}
body.express-refer .eprm-date { color: var(--ep-lt-mut); }
body.express-refer .eprm-earned { font-weight: var(--ep-w-bold); color: var(--ep-lt-ok); font-variant-numeric: tabular-nums; }
body.express-refer .eprm-gave-discount { color: var(--ep-vio-deep); }

body.express-refer .eprm-support-cta {
	background: var(--ep-lt-sunk);
	text-align: center;
}
body.express-refer .eprm-support-cta p { color: var(--ep-lt-mut) !important; font-size: var(--ep-t-sm); }
/* The plugin sets this link's colour inline, in its old orange. */
body.express-refer .eprm-support-cta a { color: var(--ep-vio-deep) !important; font-weight: var(--ep-w-semi); }

/* ===========================================================================
   WIDER SCREENS
   =========================================================================== */
/* On a phone the link and its button share 265px, which leaves about 149px for
   a URL that is longer than that. The customer copies it rather than reads it,
   but a field showing a third of a link still looks broken, so they stack. */
@media (max-width: 560px) {
	body.express-refer .eprm-link-box { flex-direction: column; }
	body.express-refer .eprm-link-box input { width: 100%; }
	body.express-refer .eprm-link-box .eprm-btn { width: 100%; }
	body.express-refer .eprm-dash-header { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 700px) {
	body.express-refer .eprm-steprm-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body.express-refer .eprm-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	body.express-refer .eprm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   THE BASKET AND CHECKOUT BANNER

   Printed by the referral plugin when someone arrives on a referral link, on
   pages this sheet does not load. class-refer.php strips its inline gradient;
   these rules live in content.css territory rather than here, so they are
   written against the plugin's class without the express-refer body class.
   --------------------------------------------------------------------------- */


/* ===========================================================================
   UI RULE (2026-09-26): the dashboard on phones. Controls never wrap, numbers
   never break, labels sit on one line, cards in a row share a height.
   =========================================================================== */
body.express-refer .eprm-dash-logout {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
body.express-refer .eprm-dash-logout::-webkit-scrollbar { display: none; }
body.express-refer .eprm-dash-logout .eprm-btn { flex: 0 0 auto; white-space: nowrap; }
body.express-refer .eprm-stats-grid { align-items: stretch; }
body.express-refer .eprm-stat-card { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
body.express-refer .eprm-stat-content { min-width: 0; }
body.express-refer .eprm-stat-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.express-refer .eprm-stat-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: none;
	letter-spacing: -0.01em;
	font-size: 13px;
}
@media (max-width: 560px) {
	body.express-refer .eprm-dash-logout { width: 100%; }
	body.express-refer .eprm-dash-logout .eprm-btn { min-height: 40px; padding: 0 12px; font-size: 14px; }
	body.express-refer .eprm-stats-grid { gap: 10px; }
	body.express-refer .eprm-stat-card { padding: 14px 14px; }
	body.express-refer .eprm-stat-card.eprm-stat-highlight { grid-column: 1 / -1; }
	body.express-refer .eprm-stat-value { font-size: 24px; }
	body.express-refer .eprm-stat-label { font-size: 12px; }
}
@media (min-width: 561px) {
	/* Four across: the value scales with the column so £3,321.64 never clips. */
	body.express-refer .eprm-stat-card { padding: 16px; }
	body.express-refer .eprm-stat-value { font-size: clamp(20px, 2.9vw, 28px); }
}


/* ===========================================================================
   THE CARD (2026-09-26). The code and link on a dark metallic purple card at
   the top, the numbers beneath, the small print collapsed at the bottom.
   Sizes: h2 34/28, stat value 32/26, section title 19, body 15, labels 13.
   =========================================================================== */
body.express-refer .eprm-dash-welcome h2 { font-size: clamp(28px, 4vw, 34px); line-height: 1.05; }
body.express-refer .eprm-subtitle { font-size: 13px; }
body.express-refer .eprm-section h3 { font-size: 19px; margin-bottom: var(--ep-s-3); }
body.express-refer .eprm-section p { font-size: 15px; }
body.express-refer .eprm-steprm-text { font-size: 15px; }
body.express-refer .eprm-leaderboard-item,
body.express-refer .eprm-referral-item { font-size: 15px; }

body.express-refer .eprm-card-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ep-s-5);
	align-items: center;
	margin-bottom: var(--ep-s-6);
}
@media (min-width: 700px) {
	body.express-refer .eprm-card-wrap { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: var(--ep-s-8); }
}

body.express-refer .eprm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 1.586 / 1;
	width: 100%;
	padding: clamp(16px, 4.5vw, 24px);
	border-radius: var(--ep-r-xl);
	color: #FFFFFF;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(168, 85, 247, 0.45) 0%, rgba(168, 85, 247, 0) 55%),
		radial-gradient(90% 80% at 0% 100%, rgba(109, 40, 217, 0.55) 0%, rgba(109, 40, 217, 0) 60%),
		linear-gradient(135deg, #1A1030 0%, #2A1454 48%, #3B1A78 100%);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 24px 48px rgba(26, 16, 48, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	overflow: hidden;
	isolation: isolate;
}
/* Brushed metal: fine diagonal lines and a soft sheen across the face. */
body.express-refer .eprm-card::before {
	content: "";
	position: absolute; inset: 0;
	background:
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
		linear-gradient(110deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 32%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.06) 78%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
	z-index: -1;
}
body.express-refer .eprm-card__top,
body.express-refer .eprm-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ep-s-3);
	min-width: 0;
}
body.express-refer .eprm-card__logo { display: block; width: auto; height: clamp(14px, 3.6vw, 18px); flex: 0 0 auto; }
body.express-refer .eprm-card__logo-text { font-weight: var(--ep-w-black); letter-spacing: -0.02em; }
body.express-refer .eprm-card__kicker {
	font-size: 12px;
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	white-space: nowrap;
}
body.express-refer .eprm-card__mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.express-refer .eprm-card__label { font-size: 12px; font-weight: var(--ep-w-semi); color: rgba(255, 255, 255, 0.66); }
body.express-refer .eprm-card__code {
	font-size: clamp(26px, 7.2vw, 34px);
	font-weight: var(--ep-w-black);
	letter-spacing: 0.12em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
body.express-refer .eprm-card__name {
	font-size: 14px;
	font-weight: var(--ep-w-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
body.express-refer .eprm-card__terms {
	font-size: 12px;
	font-weight: var(--ep-w-semi);
	color: rgba(255, 255, 255, 0.78);
	white-space: nowrap;
	flex: 0 0 auto;
}

body.express-refer .eprm-card__actions { display: flex; flex-direction: column; gap: var(--ep-s-2); min-width: 0; }
body.express-refer .eprm-card__link-label { font-size: 13px; font-weight: var(--ep-w-semi); color: var(--ep-lt-mut); }
body.express-refer .eprm-card__link {
	width: 100%;
	min-height: var(--ep-control-md);
	padding: 0 var(--ep-s-4);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-sm);
	background: var(--ep-lt-sunk);
	font-family: var(--ep-font);
	font-size: 15px;
	color: var(--ep-lt-ink-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
body.express-refer .eprm-card__buttons { display: flex; gap: var(--ep-s-2); flex-wrap: wrap; }
body.express-refer .eprm-card__buttons .eprm-btn { flex: 1 1 140px; white-space: nowrap; min-height: var(--ep-control-md); font-size: 15px; }
body.express-refer .eprm-card__hint { margin: 0; font-size: 13px; color: var(--ep-lt-mut); }

/* Numbers beneath the card. */
body.express-refer .eprm-stat-value { font-size: clamp(26px, 3vw, 32px); }
body.express-refer .eprm-stat-label { font-size: 13px; }
@media (max-width: 560px) {
	body.express-refer .eprm-stat-value { font-size: 26px; }
}

/* The small print, collapsed. */
body.express-refer .eprm-payout-note { padding: 0; }
body.express-refer .eprm-payout-note summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ep-s-3);
	padding: var(--ep-s-4) var(--ep-s-5);
	font-size: 14px;
	font-weight: var(--ep-w-semi);
	color: var(--ep-lt-ink-2);
}
body.express-refer .eprm-payout-note summary::-webkit-details-marker { display: none; }
body.express-refer .eprm-payout-note summary::after {
	content: "";
	width: 8px; height: 8px;
	border-right: 2px solid var(--ep-lt-mut);
	border-bottom: 2px solid var(--ep-lt-mut);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	flex: 0 0 auto;
	margin-right: 2px;
}
body.express-refer .eprm-payout-note[open] summary::after { transform: rotate(-135deg); }
body.express-refer .eprm-payout-note__body { padding: 0 var(--ep-s-5) var(--ep-s-4); }
body.express-refer .eprm-payout-note__body p { font-size: 14px; margin: 0 0 var(--ep-s-2); }
/* Stat values fit their column at every width; the lead card spans the row
   only when the count is odd, so the grid never leaves one card alone. */
body.express-refer .eprm-stat-value { font-size: clamp(24px, 2.6vw, 30px); }
@media (max-width: 560px) {
	body.express-refer .eprm-stat-value { font-size: 24px; }
	body.express-refer .eprm-stats-grid .eprm-stat-card.eprm-stat-highlight { grid-column: auto; }
	body.express-refer .eprm-stats-grid .eprm-stat-card.eprm-stat-highlight:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}


/* ===========================================================================
   FIGURES AS A LEDGER (2026-09-26, Option C): label left, figure right, one
   card. Owed violet, paid out green, inbound amber, counts ink. The rates box
   beneath uses the same rows. Explainers are folded boxes at the bottom.
   =========================================================================== */
body.express-refer .eprm-stats-grid { display: none; }
body.express-refer .eprm-ledger {
	margin-bottom: var(--ep-s-4);
	background: var(--ep-lt-card);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-lg);
	overflow: hidden;
}
body.express-refer .eprm-ledger__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ep-s-3);
	padding: 12px 16px;
	border-bottom: 1px solid var(--ep-lt-line);
	font-size: 14px;
	font-weight: var(--ep-w-semi);
	color: var(--ep-lt-ink-2);
	min-width: 0;
}
body.express-refer .eprm-ledger__row:last-child { border-bottom: 0; }
body.express-refer .eprm-ledger__row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.express-refer .eprm-ledger__row > b {
	flex: 0 0 auto;
	font-size: 17px;
	font-weight: var(--ep-w-black);
	letter-spacing: -0.02em;
	color: var(--ep-lt-ink);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
body.express-refer .eprm-ledger__row--lead { background: var(--ep-lt-tint); }
body.express-refer .eprm-rates .eprm-ledger__row > b { font-size: 14px; font-weight: var(--ep-w-bold); }
body.express-refer .eprm-c-vio { color: var(--ep-vio-deep) !important; }
body.express-refer .eprm-c-ok { color: var(--ep-lt-ok) !important; }
body.express-refer .eprm-c-warn { color: var(--ep-lt-warn) !important; }
@media (min-width: 700px) {
	body.express-refer .eprm-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.express-refer .eprm-figures .eprm-ledger__row:nth-child(odd) { border-right: 1px solid var(--ep-lt-line); }
	body.express-refer .eprm-figures .eprm-ledger__row:nth-last-child(-n+2) { border-bottom: 0; }
	body.express-refer .eprm-figures .eprm-ledger__row:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--ep-lt-line); }
}

/* Folded boxes. */
body.express-refer .eprm-fold { padding: 0; }
body.express-refer .eprm-fold summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ep-s-3);
	padding: 14px 16px;
	font-size: 14px;
	font-weight: var(--ep-w-semi);
	color: var(--ep-lt-ink-2);
}
body.express-refer .eprm-fold summary::-webkit-details-marker { display: none; }
body.express-refer .eprm-fold summary::after {
	content: "";
	width: 8px; height: 8px;
	border-right: 2px solid var(--ep-lt-mut);
	border-bottom: 2px solid var(--ep-lt-mut);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	flex: 0 0 auto;
	margin: -4px 2px 0 0;
}
body.express-refer .eprm-fold[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
body.express-refer .eprm-fold__body { padding: 0 16px 14px; }
body.express-refer .eprm-fold__body p { font-size: 14px; margin: 0 0 var(--ep-s-2); }
body.express-refer .eprm-fold .eprm-steps { margin-top: 0; }
body.express-refer .eprm-fold .eprm-steprm-text { font-size: 14px; }

/* Coin icons on the dashboard (2026-09-26). */
body.express-refer .eprm-coin { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin: 0 4px 0 6px; border-radius: 50%; }
body.express-refer .eprm-coin:first-child { margin-left: 0; }