/*
 * Base card, shared by every variant. `height: 100%` is what makes cards in a row
 * match: Elementor already stretches the widget wrapper and gives
 * `.e-con > .elementor-widget > .elementor-widget-container` a height, so the chain
 * above this is a definite height. Variants set their own `gap`; the base sets none.
 *
 * `--redteam-card-fg` is the surface's foreground colour, declared by the dark
 * background tokens at the END of this file. Every colour here reads through it so a
 * dark background repaints the card in one place — see that block.
 */
.redteam-card {
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--s5);
	background-color: var(--color-pearl-100);
	overflow: hidden;
	border-radius: var(--s1);
	box-sizing: border-box;
	color: var(--redteam-card-fg, inherit);
}

.redteam-card__media {
	overflow: hidden;
}

.redteam-card__image {
	display: block;
	width: 100%;
	height: auto;
}

.redteam-card__title,
.redteam-card__text {
	margin: 0;
}

/* !important beats the theme's own `:root:root :is(h1…h6, .b-h1…) { margin }`. */
.redteam-card__title { margin-top: 0 !important; }

/*
 * The link is in-flow and visible. Only the Login variant makes the WHOLE card
 * clickable, and it does that with the anchor itself as an inset overlay (see that
 * variant below) — a stretched `::after` on the anchor cannot work there, because
 * once the anchor is positioned, `inset: 0` resolves against the anchor rather than
 * the card.
 */
.redteam-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	/* Elementor's .elementor-button gets `transition: all .3s` free from core CSS,
	 * so matching it here keeps the label in sync with the shared arrow icon's own
	 * background-color transition (see style.css > ARROW LINK). */
	transition: color 0.3s;
}

/* --- Variants ------------------------------------------------------------- */



/* VARIANT: Stat */

/*
 * Fixed `gap`, NEVER `justify-content: space-between`. The base card is
 * `height: 100%`, so space-between hands all of a row's leftover height to these
 * two gaps — which means the spacing changes with how many lines the description
 * happens to wrap to. --s6 is the design's spacing and holds regardless. The
 * <=960px block re-overrides both properties, so the desktop value can't leak in.
 */
.redteam-card--stat .redteam-card {
	justify-content: flex-start;
	gap: var(--s6);
	background-color: var(--color-white-200-base, #fffffd);
}

.redteam-card--stat .redteam-card .redteam-card__title {
	order: 1;
	color: var(--redteam-card-fg, var(--color-rock-brown-300, #3f2e2b));
}

.redteam-card--stat .redteam-card::before {
	content: "";
	order: 2;
	border-top: 1rem dashed var(--redteam-card-fg, var(--color-black-300, #555555));
}

.redteam-card--stat .redteam-card .redteam-card__text {
	order: 3;
	color: var(--redteam-card-fg, var(--color-red-200-base, #ed1b24));
}

.redteam-card--stat .redteam-card .redteam-card__link {
	order: 4;
}

@media (width <= 960px) {
	/*
	 * Mobile: the stacked description/divider/number layout becomes one centred row —
	 * number first, description second, no divider. Sizes come from global tokens
	 * rather than literals, referenced directly because the shared `.b-text-*` rules
	 * in style.css only remap font-size at this breakpoint, not line-height (and the
	 * description wants Body Small's tablet size, not the Body Large class
	 * template.php assigns it).
	 */
	.redteam-card--stat .redteam-card {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--s2);
	}

	.redteam-card--stat .redteam-card::before {
		content: none;
	}

	.redteam-card--stat .redteam-card .redteam-card__title {
		order: 2;
		flex: 1 1 0;
		min-width: 0;
		font-family: var(--font-body-small, 'Archivo'), sans-serif;
		font-weight: var(--font-body-small-weight, 400);
		font-size: var(--font-body-small-size-tablet, 14rem);
		line-height: var(--font-body-small-line-height-tablet, 1.6);
	}

	.redteam-card--stat .redteam-card .redteam-card__text {
		order: 1;
		flex-shrink: 0;
		line-height: var(--font-stats-line-height-tablet, 1.2);
	}

	.redteam-card--stat .redteam-card .redteam-card__link {
		order: 3;
		flex-basis: 100%;
	}
}





/* VARIANT: Stat Stacked */

/*
 * The Stat variant restacked: stat first (the Content field), title under it (the
 * Heading field). Background, padding and radius all come from the base card, so
 * only the stacking, the type treatment and the notch are set here.
 *
 * The stat uses the Stats global per the "typography comes from globals" rule, which
 * renders it ~6% larger than the source mockup's own (non-token) size.
 */
.redteam-card--stat-stacked .redteam-card {
	gap: var(--s5);
}

/*
 * `line-height: 1` matches the design's `leading-none`, and it's also what makes the
 * spacing above and below land: Figma trims the stat's box to its cap height, so its
 * 80-above and 48-below become 64 (--s7, in the notch rule) and 32 (--s5, the gap
 * above) once the line box's ~17 of half-leading is accounted for. Same trick as the
 * Numbered variant's number, which squashes line-height for the same reason.
 */
.redteam-card--stat-stacked .redteam-card .redteam-card__text {
	order: 1;
	line-height: 1;
	color: var(--redteam-card-fg, var(--color-red-200-base, #ed1b24));
}

.redteam-card--stat-stacked .redteam-card .redteam-card__title {
	order: 2;
	color: var(--redteam-card-fg, var(--color-rock-brown-300, #3f2e2b));
}

/*
 * Hidden in the mockup but present in the Figma component, one var(--s5) below the
 * title — which the card's uniform gap already provides.
 */
.redteam-card--stat-stacked .redteam-card .redteam-card__link {
	order: 3;
}

/*
 * Notch — see the Icon variant's notch rule for why :where() is used here. The band is
 * 33 tall exactly like Icon/Numbered, and the tab measures ~180 wide against
 * Numbered's 177, so this reuses that mask rather than adding a near-identical asset.
 */
:where(.redteam-card-notch--yes).redteam-card--stat-stacked .redteam-card {
	--notch-height: 33rem;
	mask-image:
		url("../../assets/masks/notch-card--numbered.svg"),
		linear-gradient(to bottom, transparent 0 var(--notch-height), black var(--notch-height) 100%);
	mask-repeat: no-repeat, no-repeat;
	mask-position: top left, top left;
	mask-size: 177rem var(--notch-height), 100% 100%;
	border-radius: 0 0 var(--s1) var(--s1);
	padding-top: calc(var(--s7) + var(--notch-height));
}

@media (width <= 960px) {
	/*
	 * No mobile frame was provided. Nothing needs restating for type — `.b-text-stats`
	 * and `.b-h4` both remap themselves to their tablet tokens in style.css (the Stats
	 * global drops 128 → 60) — but that much smaller stat doesn't need the --s7 lead-in
	 * under the notch, so the top padding steps back to the card's own --s5.
	 */
	:where(.redteam-card-notch--yes).redteam-card--stat-stacked .redteam-card {
		padding: var(--s4);
		padding-top: calc(var(--s4) + var(--notch-height));
		gap: var(--s1);
	}
}




/* VARIANT: Icon */

/*
 * Icon List (below) reuses every rule in this block as-is — same grid, same notch,
 * same 86rem icon, same centred alignment — so each selector here is shared via
 * :is(...) rather than duplicated. Only its body differs (a checklist instead of one
 * paragraph), which is why .redteam-card__text stays icon-only further down.
 */

:is(.redteam-card--icon, .redteam-card--icon-list) .redteam-card {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"media  title"
		"divider divider"
		"text   text";
	column-gap: var(--s5);
	row-gap: var(--s5);
	padding: var(--s4) var(--s5) var(--s5);
	background-color: var(--color-white);
}

/*
 * Notch, gated on the Notch toggle's class (see Card.class.php). The square top
 * corners belong to the notch too, so they live here rather than in the plain
 * card rule above — switching the notch off leaves the base card's full radius.
 *
 * `:where()` on the notch class is deliberate: it contributes 0 specificity, so
 * this rule stays 0-2-0 — the same weight it had before the toggle existed. That
 * keeps the mobile override below (also 0-2-0, and later in the file) winning on
 * order, instead of this rule quietly resurrecting the notch on mobile.
 */
:where(.redteam-card-notch--yes):is(.redteam-card--icon, .redteam-card--icon-list) .redteam-card {
	--notch-height: 33rem;
	mask-image:
		url("../../assets/masks/notch-card--icon.svg"),
		linear-gradient(to bottom, transparent 0 var(--notch-height), black var(--notch-height) 100%);
	mask-repeat: no-repeat, no-repeat;
	mask-position: top left, top left;
	mask-size: 164rem var(--notch-height), 100% 100%;
	padding-top: calc(var(--s4) + var(--notch-height));
	border-radius: 0 0 var(--s1) var(--s1);
}

:is(.redteam-card--icon, .redteam-card--icon-list) .redteam-card::before {
	content: "";
	grid-area: divider;
	border-top: 1rem dashed var(--redteam-card-fg, var(--color-black-300, #555555));
}

:is(.redteam-card--icon, .redteam-card--icon-list) .redteam-card .redteam-card__media {
	grid-area: media;
	align-self: center;
	width: 86rem;
	height: 86rem;
}

:is(.redteam-card--icon, .redteam-card--icon-list) .redteam-card .redteam-card__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

:is(.redteam-card--icon, .redteam-card--icon-list) .redteam-card .redteam-card__title {
	grid-area: title;
	align-self: center;
	color: var(--redteam-card-fg, var(--color-rock-brown-300, #3f2e2b));
	margin-top: 0;
}

.redteam-card--icon .redteam-card .redteam-card__text {
	grid-area: text;
	line-height: 1.7;
}

:is(.redteam-card--icon, .redteam-card--icon-list) .redteam-card .redteam-card__link {
	grid-column: 1 / -1;
}

/*
 * Icon List's body: a checklist in the same "text" grid area the paragraph would
 * otherwise occupy. The check icon reuses the theme's existing checkmark asset
 * (assets/images/icon-checkmark.svg — pixel-identical to the source design's own
 * icon, same fill colour) via the mask-driven-icon technique already used for it in
 * comparison-table/, sized to that widget's --s4 rather than the design's literal
 * 20rem, and the row/icon-text gaps both use --s1 (8rem) rather than the design's
 * unrelated 8/5rem split, to stay on the existing spacing scale.
 */
.redteam-card--icon-list .redteam-card .redteam-card__list {
	grid-area: text;
	display: flex;
	flex-direction: column;
	gap: var(--s1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.redteam-card--icon-list .redteam-card .redteam-card__list-item {
	display: flex;
	align-items: center;
	gap: var(--s1);
	/*
	 * The theme's base `li { margin: calc(var(--ps) / 2) 0; }` (style.css) would
	 * otherwise stack on top of this flex gap, over-spacing every row except the
	 * first/last (which that same base rule already zeroes via :first-child/
	 * :last-child) — margin is reset here so `gap` is the only spacing mechanism.
	 */
	margin: 0;
}

.redteam-card--icon-list .redteam-card .redteam-card__list-icon {
	flex-shrink: 0;
	width: var(--s4);
	height: var(--s4);
	mask-image: url("../../assets/images/icon-checkmark.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: var(--redteam-card-fg, var(--color-walnut-200-base, #5a413d));
}

.redteam-card--icon-list .redteam-card .redteam-card__list-text {
	line-height: 1.7;
	color: var(--redteam-card-fg, var(--color-rock-brown-300, #3f2e2b));
}

@media (width <= 960px) {
	/*
	 * Mobile: the notched card becomes a plain, fully-rounded one — no mask, no
	 * square top corners — but keeps the variant's own white background, so the card
	 * reads the same at both breakpoints. Title/body take the shared H3 / Body Large
	 * tokens' tablet values, referenced directly because those shared rules in
	 * style.css only remap font-size here, not line-height. Icon List rides along on
	 * every rule in this block.
	 */
	:is(.redteam-card--icon, .redteam-card--icon-list) .redteam-card {
		column-gap: var(--s2);
		row-gap: var(--s4);
		padding: var(--s4);
		border-radius: var(--s1);
		mask-image: none;
		padding-top: var(--s4);
	}

	:is(.redteam-card--icon, .redteam-card--icon-list) .redteam-card .redteam-card__media {
		width: 52rem;
		height: 52rem;
	}

	:is(.redteam-card--icon, .redteam-card--icon-list) .redteam-card .redteam-card__title {
		line-height: var(--font-h3-line-height-tablet, 1.4);
	}

	.redteam-card--icon .redteam-card .redteam-card__text,
	.redteam-card--icon-list .redteam-card .redteam-card__list-text {
		font-family: var(--font-body-large, 'Archivo'), sans-serif;
		font-weight: var(--font-body-large-weight, 400);
		font-size: var(--font-body-large-size-tablet, 18rem);
		line-height: var(--font-body-large-line-height-tablet, 1.6);
	}
}





/* VARIANT: Icon Stacked */

/*
 * Figma node 6609:30104. The same ingredients as the Icon variant, but stacked in a
 * single column — icon, dashed divider, heading, body — instead of the heading
 * sitting beside the icon. One uniform var(--s5) for both padding and gap matches
 * the design's rhythm exactly (icon 32 from the top, then 32 between every
 * element), so the base card's padding needs no override.
 */
.redteam-card--icon-stacked .redteam-card {
	gap: var(--s5);
	background-color: var(--color-white-200-base, #fffffd);
	/*
	 * Square across the top, rounded along the bottom. Unlike Icon/Numbered this is
	 * NOT a notch — the design has no notch strip here — so no mask is applied and the
	 * Notch toggle is conditioned away for this variant. If it should have Icon's
	 * notch, add `icon-stacked` to that condition and reuse the Icon notch rule.
	 */
	border-radius: 0 0 var(--s1) var(--s1);
}

.redteam-card--icon-stacked .redteam-card .redteam-card__media {
	order: 1;
	width: 86rem;
	height: 86rem;
}

.redteam-card--icon-stacked .redteam-card .redteam-card__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.redteam-card--icon-stacked .redteam-card::before {
	content: "";
	order: 2;
	border-top: 1rem dashed var(--redteam-card-fg, var(--color-black-300, #555555));
}

.redteam-card--icon-stacked .redteam-card .redteam-card__title {
	order: 3;
	color: var(--redteam-card-fg, var(--color-rock-brown-300, #3f2e2b));
}

/*
 * Body copy is the H5 global at line-height 1.5 (Figma's "Desktop/H5" style), which
 * no .b-text-* preset matches — hence the direct token reference rather than a class
 * on the element. The heading rides `.b-h4`, whose size/line-height (and tablet
 * remap) already come from the H4 token in style.css.
 */
.redteam-card--icon-stacked .redteam-card .redteam-card__text {
	order: 4;
	font-size: var(--font-h5-size, 24rem);
	line-height: 1.5;
	color: var(--redteam-card-fg, var(--color-rock-brown-300, #3f2e2b));
}

.redteam-card--icon-stacked .redteam-card .redteam-card__link {
	order: 5;
}

@media (width <= 960px) {
	/*
	 * No mobile frame was provided for this variant, so rather than invent a spec this
	 * steps the desktop one down with the Icon variant's proven mobile numbers (52rem
	 * icon, --s4 rhythm) plus the H5 tablet token for the body copy. The heading needs
	 * nothing here — `.b-h4` remaps itself to --font-h4-size-tablet in style.css.
	 */
	.redteam-card--icon-stacked .redteam-card {
		gap: var(--s4);
		padding: var(--s4);
	}

	.redteam-card--icon-stacked .redteam-card .redteam-card__media {
		width: 52rem;
		height: 52rem;
	}

	.redteam-card--icon-stacked .redteam-card .redteam-card__text {
		font-size: var(--font-h5-size-tablet, 18rem);
	}
}




/* VARIANT: Numbered */

.redteam-card--numbered .redteam-card {
	display: flex;
	flex-direction: column;
	padding: var(--s2) var(--s5) var(--s5);
}

/* Notch — see the Icon variant's notch rule for why :where() is used here. */
:where(.redteam-card-notch--yes).redteam-card--numbered .redteam-card {
	--notch-height: 33rem;
	mask-image:
		url("../../assets/masks/notch-card--numbered.svg"),
		linear-gradient(to bottom, transparent 0 var(--notch-height), black var(--notch-height) 100%);
	mask-repeat: no-repeat, no-repeat;
	mask-position: top left, top left;
	mask-size: 177rem var(--notch-height), 100% 100%;
	padding-top: calc(var(--s2) + var(--notch-height));
	border-radius: 0 0 var(--s1) var(--s1);
}

.redteam-card--numbered .redteam-card .redteam-card__number {
	order: 1;
	color: var(--redteam-card-fg, var(--color-red-200-base, #ed1b24));
	line-height: 0.75;
}

.redteam-card--numbered .redteam-card::before {
	content: "";
	order: 2;
	margin: var(--s6) 0;
	border-top: 1rem dashed var(--redteam-card-fg, var(--color-black-300, #555555));
}

.redteam-card--numbered .redteam-card .redteam-card__title {
	order: 3;
}

.redteam-card--numbered .redteam-card .redteam-card__text {
	order: 4;
	margin-top: var(--s3);
	/* Minimum text→link gap; the link's own `margin-top: auto` eats any leftover
	 * space above it, so this is what keeps the two apart on a full card. */
	margin-bottom: var(--s5);
}

.redteam-card--numbered .redteam-card .redteam-card__link {
	order: 5;
	/* Push the link to the bottom of the card (the base .redteam-card is already
	 * height: 100%, so it fills the stretched widget) — that way the links line
	 * up across every card in a row regardless of copy length. */
	margin-top: auto;
	gap: var(--s2);
	font-weight: var(--font-body-small-weight, 400);
}

.redteam-card--numbered .redteam-card .redteam-card__link::before {
	order: 1; /* the link's text is order 0 by default — keep the arrow after it */
}





/* VARIANT: Image Second */

.redteam-card--image-second .redteam-card {
	gap: var(--s5);
	background-color: var(--color-white);
}

.redteam-card--image-second .redteam-card .redteam-card__title {
	order: 1;
	color: var(--redteam-card-fg, var(--color-rock-brown-300, #3f2e2b));
}

.redteam-card--image-second .redteam-card .redteam-card__media {
	order: 2;
	/* Figma's media box is 666x400 content — lock to that ratio (not a fixed
	 * height) so the crop stays proportional as the card's own width varies
	 * across columns/breakpoints, instead of drifting from the design. */
	aspect-ratio: 666 / 400;
	border-radius: var(--s1);
}

.redteam-card--image-second .redteam-card .redteam-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.redteam-card--image-second .redteam-card .redteam-card__text {
	order: 3;
	line-height: 1.7;
	color: var(--redteam-card-fg, var(--color-rock-brown-300, #3f2e2b));
}

.redteam-card--image-second .redteam-card .redteam-card__link {
	order: 4;
}





/* VARIANT: Image First */

.redteam-card--image-first .redteam-card {
	gap: var(--s5);
	background-color: var(--color-walnut-600, #1b1412);
}

.redteam-card--image-first .redteam-card .redteam-card__media {
	order: 1;
	/* Same 666x400 content ratio as the Image Second variant. */
	aspect-ratio: 666 / 400;
	border-radius: var(--s1);
}

.redteam-card--image-first .redteam-card .redteam-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.redteam-card--image-first .redteam-card .redteam-card__title {
	order: 2;
	color: var(--redteam-card-fg, var(--color-titanium-base, #faf9f9));
}

.redteam-card--image-first .redteam-card .redteam-card__text {
	order: 3;
	line-height: 1.7;
	color: var(--redteam-card-fg, var(--color-titanium-base, #faf9f9));
}

.redteam-card--image-first .redteam-card .redteam-card__link {
	order: 4;
}

/* Notch — see the Icon variant's notch rule for why :where() is used here. */
:where(.redteam-card-notch--yes).redteam-card--image-first .redteam-card {
	--notch-height: 63rem;
	mask-image:
		url("../../assets/masks/notch-card--img_first.svg"),
		linear-gradient(to bottom, black 0 calc(100% - var(--notch-height)), transparent calc(100% - var(--notch-height)) 100%);
	mask-repeat: no-repeat, no-repeat;
	mask-position: bottom left, bottom left;
	mask-size: 465rem var(--notch-height), 100% 100%;
	padding-bottom: calc(var(--s5) + var(--notch-height));
}





/* VARIANT: Login */

/*
 * Figma node 6710:28150. Image + link only (Heading and Content are conditioned away
 * in Card.class.php). Everything about the card box itself already comes from the base
 * card — pearl-100 background, var(--s5) padding, var(--s1) radius — so there's no
 * `.redteam-card` rule here at all; only the masked image and the link's placement.
 */

/*
 * The notch is cut out of the IMAGE, not the card, so this variant is NOT part of the
 * Notch toggle. The matching aspect-ratio is required: `mask-size: 100% 100%` against
 * a free-height box would skew the diagonal.
 */
.redteam-card--login .redteam-card .redteam-card__media {
	width: 100%;
	aspect-ratio: 638 / 421;
	mask-image: url("../../assets/masks/mask-card--login.svg");
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
}

.redteam-card--login .redteam-card .redteam-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The whole card is the click target, so the anchor ITSELF is the overlay: stretched
 * over the card with `inset: 0` (the base card is already `position: relative`),
 * with its own padding placing the visible label — centred within the mask's cut-out
 * horizontally, aligned to the image's bottom edge vertically. Sizing the hit area
 * and positioning the label are deliberately the same mechanism; a stretched
 * pseudo-element cannot do it, because once the anchor is positioned an `inset: 0`
 * pseudo resolves against the anchor rather than the card.
 *
 * THE PADDING-RIGHT FORMULA, not a fixed token: the cut-out is a TRAPEZOID (its left
 * edge is the mask's diagonal, narrower higher up), and this card's real width varies
 * hugely — a ~270 phone column and a 900+ stacked column both occur on this site. A
 * fixed inset can only look centred at ONE width: it overflows the diagonal at narrow
 * widths and sits jammed against the corner tip at wide ones. So the padding computes
 * the midpoint of the safe window — the diagonal's position at the LABEL's own height
 * (the narrow, i.e. safe, edge of the trapezoid) out to the image's right edge — which
 * reduces to an exactly linear function of card width, fit against the mask's real
 * path data and the label's measured footprint. `max(0rem, …)` floors it, since a
 * negative padding would push the label the wrong way.
 *
 * Everything else — Body Small type, walnut-400, underline, the red arrow and its
 * order after the text — comes from the shared ARROW LINK section of style.css,
 * which this variant's class is listed in.
 */
.redteam-card--login .redteam-card .redteam-card__link {
	position: absolute;
	inset: 0;
	display: flex;
	/*
	 * `align-content` (NOT `align-items`) drops the label to the bottom, and needs
	 * `flex-wrap: wrap` to take effect: that moves the whole LINE down while the base
	 * card's `align-items: center` still centres the arrow against the text.
	 * Bottom-aligning the items would sit the arrow on the text's descender line.
	 */
	flex-wrap: wrap;
	align-content: flex-end;
	justify-content: flex-end;
	/* Desktop (Body Small, 16rem): text 39.2 + gap var(--s2) + arrow 9 ≈ Lw 60.2. */
	padding: 0 max(0rem, calc(0.15595 * 100% - 14.01rem)) var(--s5) 0;
	gap: var(--s2);
	font-weight: var(--font-body-small-weight, 400);
	/* Matches the design, and keeps the arrow on the label's line. */
	white-space: nowrap;
}

.redteam-card--login .redteam-card .redteam-card__link::before {
	order: 1; /* the link's text is order 0 by default — keep the arrow after it */
}

@media (width <= 960px) {
	/* Same mobile padding step-down the other variants use (--s5 → --s4). */
	.redteam-card--login .redteam-card {
		padding: var(--s4);
	}

	/*
	 * Same formula as desktop. The slope is pure mask geometry, so only the intercept
	 * moves — Body Small shrinks to 14rem here: text 34.3 + gap --s1 + arrow 9 ~= 51.3
	 * against the --s4 card padding.
	 */
	.redteam-card--login .redteam-card .redteam-card__link {
		padding: 0 max(0rem, calc(0.15595 * 100% - 14.37rem)) var(--s4) 0;
		gap: var(--s1);
	}
}




/* --- Background color → typography ---------------------------------------- */

/*
 * The Background Color control (Card.class.php) emits its own per-instance
 * background-color rule AND stamps `redteam-card-bg--<token>` on the wrapper.
 * A dark background needs light typography, which can't ride along on that
 * control's `selectors` (one declaration, one value), so the pairing lives here.
 *
 * TO ADD A BACKGROUND OPTION: add the option + selectors_dictionary entry in
 * Card.class.php, then — only if that color needs different typography — declare
 * --redteam-card-fg for its class below AND add that class to the :is() list in
 * the override rule. A token in neither place keeps each variant's own colors,
 * exactly as when no background is selected.
 */
.redteam-card-bg--red-200-base {
	--redteam-card-fg: var(--color-white);
	/* Deliberately does NOT set --redteam-arrow-link-hover: the hover is red on
	 * every surface, per the shared ARROW LINK rule's default. Only the REST
	 * colour is surface-dependent.
	 *
	 * Caveat for whoever adds the first link to a red card: red-on-red means no
	 * visible hover. None of the three red Numbered cards on the site currently
	 * has a link, so this is latent rather than broken — solve it then, and take
	 * the answer from design rather than inventing one here. */
}

/*
 * Two mechanisms, because a card's text color has two possible sources.
 *
 * 1. Colors THIS file sets (most variants' titles/body, the Stat and Numbered
 *    accent numbers, the dashed dividers) are all written
 *    `var(--redteam-card-fg, <the variant's own color>)`, so the var above
 *    repaints them with no specificity fight. Dividers rely on this and this
 *    only — they're ::before pseudo-elements, which the rule below can't match.
 * 2. Colors this file DOESN'T set fall through to Elementor's Kit, which paints
 *    bare `h3` and `a` at `.elementor-kit-{id} h3` / ` a` (0-1-1). Inheritance
 *    from .redteam-card loses to that, so the Numbered variant's title and every
 *    variant's link stayed dark on red. Hence this rule: 0-3-0, so it beats the
 *    Kit (and the Kit's `a:hover`, 0-2-1), and it sits last in the file so it
 *    also wins the tie against the 0-3-0 variant rules above.
 *
 * The leading :is() is the one place dark tokens are listed for this rule, so
 * adding a token doesn't mean duplicating the selector list per element.
 */
:is(.redteam-card-bg--red-200-base) .redteam-card :is(
	.redteam-card__number,
	.redteam-card__title,
	.redteam-card__text,
	.redteam-card__link
) {
	color: var(--redteam-card-fg);
}