/*
 * Pricing Calculator widget. Measurements are the design's px values carried over
 * as `rem`, per the theme's rem-as-px scaling.
 *
 * The widget paints no background of its own — the design's pearl surface is the
 * SECTION it sits in, so the owning Elementor container supplies it.
 */

.redteam-pricing-calculator {
	/* The "projected gains" card fill. No Kit global matches it, so it's local —
	 * same convention as widgets/pricing-comparison/. Promote it if it spreads. */
	--redteam-pc-gain-bg: #6e4f4a;

	/* The icon accent on a selected (red) tile. Also has no Kit global. */
	--redteam-pc-accent-selected: #f8898d;

	/* The tiles/progress/arrows group is inset inside the content column, while the
	 * question header and results blocks run full width. This width is also what
	 * makes the tiles their designed 2-up / 3-up sizes. */
	--redteam-pc-controls-width: 1238rem;

	--redteam-pc-tile-height: 181rem;
	--redteam-pc-card-height: 352rem;
	--redteam-pc-value-size: 110rem;

	display: flex;
	flex-direction: column;
	gap: var(--s6);
}

/*
 * Steps, the results panel and conditional rows/links are toggled with the native
 * `hidden` attribute. This rule is REQUIRED, not belt-and-braces: `hidden` is only
 * `display: none` in the UA stylesheet, so ANY author `display` rule beats it —
 * without this, every step renders at once.
 *
 * `!important` because rules in this file are scoped to 0-2-0 to out-specify Kit
 * defaults, and any such rule silently beats an unimportant `[hidden]` — which is
 * how the "Contact sales" link once showed on priced tiers, next to the very
 * subscription amount it exists to replace. `hidden` means "not rendered", which is
 * not a preference a later rule should outrank, so it is settled once here rather
 * than re-fought per element.
 */
.redteam-pricing-calculator [hidden] {
	display: none !important;
}

/*
 * Zero the inherited block margins — every gap in this widget comes from a flex or
 * grid `gap`, so a stray element margin is always a bug. Three rules outrank a
 * plain single-class `margin: 0`, which is why this borrows the theme's own
 * `:root:root` idiom to reach 0-3-1:
 *
 *   .elementor-kit-<id> p { margin-block-end: 0.75em }        (Kit, 0-1-1)
 *   p { margin: var(--ps) 0 }                                 (theme style.css)
 *   :root:root :is(.b-h1 … .b-h6) { margin: 1.25em 0 0 0 }    (theme, 0-3-0)
 *
 * The first put 0.75em of the headline figure's OWN font-size between it and its
 * caption; the third matches the tile label (a <span class="b-h4">) and pushed it
 * below the tile's centre instead of letting flex centre it against the icon.
 */
:root:root .redteam-pricing-calculator :is(p, span, h1, h2, h3, h4, h5, h6, dl, dt, dd, hr) {
	margin: 0;
}

.redteam-pricing-calculator__sr {
	position: absolute;
	width: 1rem;
	height: 1rem;
	margin: -1rem;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* --------------------------------------------------------------------------
 * WIZARD — one question at a time. Hidden steps use the native `hidden`
 * attribute (display: none), so they contribute no flex gap.
 * -------------------------------------------------------------------------- */

.redteam-pricing-calculator__wizard,
.redteam-pricing-calculator__step {
	display: flex;
	flex-direction: column;
	gap: var(--s6);
}

/*
 * Step-to-step transition. calculator.js fades/slides the outgoing step out,
 * swaps `hidden`, then fades the incoming one in — sequential rather than
 * stacked, so the two steps never overlap and no absolute positioning is needed.
 *
 * The swap happens while opacity is 0, which is what hides the height change
 * between steps whose question wraps to a different number of lines (step 4's is
 * three lines, step 1's is two). The wrapper below then animates between the two
 * heights so the progress bar and arrows glide rather than jump — flooring every
 * step to the tallest instead would have padded the three shorter steps with dead
 * space the design doesn't have.
 */
.redteam-pricing-calculator__steps {
	transition: height 0.22s ease;
}

.redteam-pricing-calculator__step {
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.redteam-pricing-calculator__step.is-leaving,
.redteam-pricing-calculator__step.is-entering {
	opacity: 0;
}

.redteam-pricing-calculator__step.is-leaving-back,
.redteam-pricing-calculator__step.is-entering-back {
	opacity: 0;
}

/* Forward moves slide left, backward moves slide right, so the direction of
 * travel reads. */
.redteam-pricing-calculator__step.is-leaving { transform: translateX(-24rem); }
.redteam-pricing-calculator__step.is-entering { transform: translateX(24rem); }
.redteam-pricing-calculator__step.is-leaving-back { transform: translateX(24rem); }
.redteam-pricing-calculator__step.is-entering-back { transform: translateX(-24rem); }

@media (prefers-reduced-motion: reduce) {
	.redteam-pricing-calculator__steps,
	.redteam-pricing-calculator__step {
		transition: none;
	}

	.redteam-pricing-calculator__step.is-leaving,
	.redteam-pricing-calculator__step.is-entering,
	.redteam-pricing-calculator__step.is-leaving-back,
	.redteam-pricing-calculator__step.is-entering-back {
		transform: none;
	}
}

.redteam-pricing-calculator__header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s5);
	align-items: start;
}

.redteam-pricing-calculator__question {
	margin: 0;
	color: var(--color-walnut-400, #3f2e2b);
}

.redteam-pricing-calculator__helper {
	margin: 0;
	color: var(--color-black-300, #555555);
}

.redteam-pricing-calculator__tiles {
	display: grid;
	grid-template-columns: repeat(var(--rt-pc-columns, 3), minmax(0, 1fr));
	gap: var(--s5);
	width: 100%;
	max-width: var(--redteam-pc-controls-width);
	margin-inline: auto;
}

/*
 * SCOPED TO 0-2-0 OUT OF NECESSITY: Site Settings > Theme Style > Buttons emits
 * `.elementor-kit-<id> button { background-color: …; padding: 0rem; font: … }` at
 * 0-1-1, so a single-class rule here loses and every tile renders transparent and
 * unpadded. Specificity rather than !important, since nothing here is a native
 * control's own value. Applies to EVERY <button> in this widget — see also
 * __start-over. Same root cause as the HubSpot submit button in style.css.
 */
.redteam-pricing-calculator .redteam-pricing-calculator__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s5);
	min-height: var(--redteam-pc-tile-height);
	margin: 0;
	padding: var(--s4) var(--s5) var(--s5);
	border: 0;
	border-radius: var(--s1);
	background-color: var(--color-white-200-base, #fffffd);
	color: var(--color-walnut-400, #3f2e2b);
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.redteam-pricing-calculator .redteam-pricing-calculator__tile:hover {
	transform: translateY(-2rem);
}

.redteam-pricing-calculator .redteam-pricing-calculator__tile:focus-visible {
	outline: 2rem solid var(--color-walnut-400, #3f2e2b);
	outline-offset: 3rem;
}

.redteam-pricing-calculator .redteam-pricing-calculator__tile.is-selected {
	background-color: var(--color-red-200-base, #ed1b24);
	color: var(--color-white-200-base, #fffffd);
}

.redteam-pricing-calculator__tile-label {
	margin: 0;
}

/* Step 1's tiles pair an 86rem icon with a left-aligned label; steps 2-4 are
 * text-only and centred. */
.redteam-pricing-calculator .redteam-pricing-calculator__tiles--icons .redteam-pricing-calculator__tile {
	text-align: left;
}

.redteam-pricing-calculator__tile-icon {
	display: block;
	flex: 0 0 auto;
	width: 86rem;
	height: 86rem;
}

.redteam-pricing-calculator__tile-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* The icons are inlined with `stroke="currentColor"` so one asset serves both
 * tile states; their red detail paths carry .rt-pc-accent and are recoloured
 * independently. */
.redteam-pricing-calculator__tile-icon .rt-pc-accent {
	color: var(--color-red-200-base, #ed1b24);
}

.redteam-pricing-calculator__tile.is-selected .redteam-pricing-calculator__tile-icon .rt-pc-accent {
	color: var(--redteam-pc-accent-selected);
}


/* Progress + prev/next --------------------------------------------------- */

.redteam-pricing-calculator__progress {
	display: flex;
	gap: 28rem;
	width: 100%;
	max-width: var(--redteam-pc-controls-width);
	margin-inline: auto;
}

/*
 * Each segment is an unfilled track with a fill that wipes in from the left, so
 * advancing a step animates in step with the panel transition instead of
 * snapping. Going back un-wipes it, right to left.
 */
.redteam-pricing-calculator__progress-bar {
	position: relative;
	flex: 1 1 0;
	height: 10rem;
	border-radius: 999rem;
	overflow: hidden;
	background-color: var(--color-pearl-300, #ccc8c3);
}

.redteam-pricing-calculator__progress-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: var(--color-walnut-500, #2d211f);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s ease;
}

.redteam-pricing-calculator__progress-bar.is-complete::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.redteam-pricing-calculator__progress-bar::after {
		transition: none;
	}
}

.redteam-pricing-calculator__nav {
	display: flex;
	justify-content: flex-end;
	gap: var(--s3);
	width: 100%;
	max-width: var(--redteam-pc-controls-width);
	margin-inline: auto;
}

/* Same arrow treatment as the Quote widget's carousel variant. */
.redteam-pricing-calculator__arrow {
	--arrow-size: 62rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--arrow-size);
	height: var(--arrow-size);
	padding: 0;
	border: 1.5rem solid rgba(63, 46, 43, 0.2);
	border-radius: 50%;
	background: none;
	color: var(--color-walnut-400, #3f2e2b);
	cursor: pointer;
}

/* assets/ui-arrow--right.svg is the design's own arrow, supplied as-is. It is
 * applied as a mask so one asset serves both directions and both colours; the
 * prev arrow is the same file rotated. Sized 34rem to match the design's
 * 33.8 glyph inside the 62 circle. */
.redteam-pricing-calculator__arrow-icon {
	width: 34rem;
	height: 34rem;
	background-color: currentColor;
	mask-image: url("assets/ui-arrow--right.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-image: url("assets/ui-arrow--right.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	transition: opacity 0.2s;
}

.redteam-pricing-calculator__arrow--prev .redteam-pricing-calculator__arrow-icon {
	transform: rotate(180deg);
}

.redteam-pricing-calculator__arrow:disabled {
	cursor: not-allowed;
}

.redteam-pricing-calculator__arrow:disabled .redteam-pricing-calculator__arrow-icon {
	opacity: 0.3;
}


/* --------------------------------------------------------------------------
 * RESULTS
 * -------------------------------------------------------------------------- */

.redteam-pricing-calculator__results {
	display: flex;
	flex-direction: column;
	gap: var(--s6);
}

.redteam-pricing-calculator__results-heading,
.redteam-pricing-calculator__section-heading {
	margin: 0;
	max-width: 719rem;
	color: var(--color-walnut-400, #3f2e2b);
}


/* Headline cards -------------------------------------------------------- */

.redteam-pricing-calculator__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s4);
}

.redteam-pricing-calculator__card,
.redteam-pricing-calculator__gain {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s6);
	border-radius: var(--s1);
}

.redteam-pricing-calculator__card {
	min-height: var(--redteam-pc-card-height);
	padding: var(--s5);
	background-color: var(--color-white-200-base, #fffffd);
	color: var(--color-black-300, #555555);
}

.redteam-pricing-calculator__card--price {
	background-color: var(--color-red-200-base, #ed1b24);
	color: var(--color-white-200-base, #fffffd);
}

.redteam-pricing-calculator__card-label {
	margin: 0;
	color: inherit;
}

/*
 * The oversized figure. Archivo Light at 110rem with line-height 1.
 *
 * Keep this row aligned to the cap-height-based design measurement: the text box
 * is visually shorter than its line box, so the design's 48
 * gap above/below is measured to the caps, not to the line box. With
 * line-height: 1 an 110rem line box carries ~9rem of half-leading at each end.
 * `text-box` removes exactly that where supported, which is the whole fix;
 * without it the figure simply sits ~9rem lower, which is imperceptible here.
 */
.redteam-pricing-calculator__card-value {
	margin: 0;
	font-family: var(--font-stats, 'Archivo'), sans-serif;
	font-size: var(--redteam-pc-value-size);
	font-weight: 300;
	line-height: 1;
	text-transform: capitalize;
	color: inherit;
	/* Figures must not wrap — and calculator.js's fitValue() relies on this to
	 * measure the text's true width (a wrapped element reports scrollWidth ==
	 * clientWidth and would never be detected as overflowing). */
	white-space: nowrap;
	/* Also required by fitValue(): the card is `align-items: flex-start`, which
	 * shrink-wraps this box to its own text, so clientWidth would equal
	 * scrollWidth and an overflow could never be detected. Stretching it to the
	 * card's content width is what makes the comparison meaningful. */
	align-self: stretch;
	min-width: 0;
}

@supports (text-box: trim-both cap alphabetic) {
	.redteam-pricing-calculator__card-value {
		text-box: trim-both cap alphabetic;
	}
}

/* The "/mo" on the price card. */
.redteam-pricing-calculator__card-unit {
	font-size: 40rem;
}

/* The custom-quote tiers replace the figure with a sentence, so it drops to
 * heading size and picks up the design's underline. */
.redteam-pricing-calculator__card-value.is-text {
	font-size: var(--font-h4-size, 36rem);
	font-weight: var(--font-h4-weight, 400);
	line-height: var(--font-h4-line-height, 1.3);
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 4rem;
	white-space: normal;
}

@supports (text-box: trim-both cap alphabetic) {
	.redteam-pricing-calculator__card-value.is-text {
		text-box: normal;
	}
}

/* The sentence is itself the CTA on those tiers, so it is wrapped in an anchor —
 * which must be invisible: the card looks exactly as it did when this was plain
 * text, and only gains a click target. Everything is inherited rather than
 * restated, so the `.is-text` rule above stays the single source of the look.
 * `:root:root` buys specificity past the Kit's own `.elementor-kit-<id> a`
 * (colour, typography, hover), which is a 0-2-0 rule loaded after this file and
 * would otherwise repaint the sentence. */
:root:root .redteam-pricing-calculator__card-link,
:root:root .redteam-pricing-calculator__card-link:is(:hover, :focus, :visited) {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	text-decoration: inherit;
	text-underline-offset: inherit;
}

.redteam-pricing-calculator__card-note {
	margin: 0;
	font-size: var(--font-text-size, 18rem);
	line-height: var(--font-text-line-height, 1.7);
	letter-spacing: 0.18rem;
	color: inherit;
}


/* Breakdown ------------------------------------------------------------- */

.redteam-pricing-calculator__breakdown {
	display: flex;
	flex-direction: column;
	gap: var(--s6);
	padding: var(--s6);
	border-radius: var(--s1);
	background-color: var(--color-white-200-base, #fffffd);
}

/* Section label band. Same treatment as the theme's .b-text-eyebrow-dark
 * (rgba(0,0,0,0.05) + 4rem radius + blur), run full width and right-aligned. */
.redteam-pricing-calculator__band {
	margin: 0;
	padding: var(--s1) var(--s4);
	border-radius: 4rem;
	background: rgba(0, 0, 0, 0.05);
	backdrop-filter: blur(16rem);
	color: var(--color-black-500, #000000);
	text-align: right;
}

.redteam-pricing-calculator__rows {
	display: flex;
	flex-direction: column;
	gap: var(--s6);
	margin: 0;
}

.redteam-pricing-calculator__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--s5);
	align-items: start;
	padding-right: var(--s4);
}

.redteam-pricing-calculator__row-term {
	min-width: 0;
}

.redteam-pricing-calculator__row-label {
	color: var(--color-black-300, #555555);
}

.redteam-pricing-calculator__row-value {
	margin: 0;
	color: var(--color-black-300, #555555);
	text-align: right;
	white-space: nowrap;
}

/* The Button widget's "Link" variant look — underline, walnut text, red arrow —
 * comes from the shared ARROW LINK section of the theme's style.css, which this
 * class is listed in rather than restating it here. Only the box is local. */
/* Scoped to 0-2-0: the Kit emits `.elementor-kit-<id> a { font-size: <Link
 * global> }` at 0-1-1, which would otherwise pick the type size here. */
.redteam-pricing-calculator .redteam-pricing-calculator__row-link {
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
	white-space: nowrap;
	/* The Link variant's own type size. Needed explicitly because the cell it
	 * sits in is .b-h4 (36rem) and the Kit's link typography is 18rem — neither
	 * is the variant's Body Small. */
	font-family: var(--font-body-small, 'Archivo'), sans-serif;
	font-size: var(--font-body-small-size, 16rem);
	font-weight: var(--font-body-small-weight, 400);
	line-height: var(--font-body-small-line-height, 1.3);
	transition: color 0.3s;
}

/*
 * Hover/focus. The shared ARROW LINK section's own hover deliberately skips this
 * link — that treatment turns the text white for the Card widget's dark Numbered
 * background, and this link sits on a white card where it would disappear. So it
 * takes the light-surface equivalent instead: the label goes red to meet the
 * arrow, which is already red.
 *
 * !important is forced, not chosen: the shared rule sets
 * `color: var(--color-walnut-400) !important`, so only !important can beat it.
 */
.redteam-pricing-calculator .redteam-pricing-calculator__row-link:hover,
.redteam-pricing-calculator .redteam-pricing-calculator__row-link:focus-visible {
	color: var(--color-red-200-base, #ed1b24) !important;
}

.redteam-pricing-calculator__divider {
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1rem dashed var(--color-pearl-300, #ccc8c3);
}

/* "Your projected gains" lives inside the same white card as the breakdown,
 * separated by a wider gap than the row sections use. */
.redteam-pricing-calculator__gains-block {
	display: flex;
	flex-direction: column;
	gap: var(--s6);
	/* Adds to the breakdown's own 48 flex gap to make the design's 96 separation
	 * between the totals rows and this block. */
	margin-top: var(--s6);
}

.redteam-pricing-calculator__gains {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s5);
}

.redteam-pricing-calculator__gain {
	min-height: 294rem;
	padding: var(--s6) var(--s5) var(--s5);
	background-color: var(--redteam-pc-gain-bg);
	color: var(--color-white-200-base, #fffffd);
}

.redteam-pricing-calculator__gain .redteam-pricing-calculator__card-label {
	color: var(--color-white, #ffffff);
}


/* CTA ------------------------------------------------------------------- */

/*
 * No padding of its own. The results panel already separates every block with
 * `gap: var(--s6)`, and the form card carries its own inset from the global
 * `.hs-form` rule — a wrapper padding here just stacked on top of both (the CTA
 * sat 80 below the breakdown instead of the design's 48). The `<=960px` block
 * used to zero it again, which was the tell that it was never needed.
 */
.redteam-pricing-calculator__cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s6);
	align-items: start;
}

.redteam-pricing-calculator__cta--with-form {
	grid-template-columns: minmax(0, 634fr) minmax(0, 726fr);
}

/*
 * `gap: 0` on purpose. The theme already spaces an eyebrow above a heading with
 * its own `:is(.b-text-eyebrow-*):has(+ heading) { margin-bottom: var(--ps) }`
 * rule, so a flex gap here would double it. The theme's typography margins are
 * left to do their job — nothing in this column overrides them.
 */
.redteam-pricing-calculator__cta-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	max-width: 634rem;
}

.redteam-pricing-calculator__cta-heading {
	color: var(--color-walnut-400, #3f2e2b);
}

/*
 * The Button widget's Tertiary variant, restated: extensions/button/style.css is
 * scoped to .elementor-widget-button markup and can't reach a plain <button>
 * inside a custom widget — the same reason widgets/featured-post/ restates
 * Primary. Values are copied from that extension so the two stay recognisably
 * the same button; the arrow glyph is NOT restated, it comes from the shared
 * ARROW LINK section of the theme's style.css, which this class is listed in.
 *
 * Scoped to 0-2-0: `.elementor-kit-<id> button { background-color; padding;
 * font }` (0-1-1) would otherwise strip this back to a bare transparent box, the
 * same collision the tiles hit.
 */
.redteam-pricing-calculator .redteam-pricing-calculator__start-over {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	padding: var(--s3) var(--s4);
	border: 0;
	border-radius: var(--s05);
	font-family: var(--font-body-small, 'Archivo'), sans-serif;
	font-size: var(--font-body-small-size, 16rem);
	font-weight: var(--font-body-small-weight, 400);
	line-height: var(--font-body-small-line-height, 1.3);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}

/* The outline is an inset box-shadow, not a border, so the box size matches the
 * solid variants exactly. */
.redteam-pricing-calculator .redteam-pricing-calculator__start-over {
	box-shadow: inset 0 0 0 1rem var(--color-walnut-400, #3f2e2b);
	background-color: var(--color-white, #ffffff);
	color: var(--color-walnut-400, #3f2e2b);
}

.redteam-pricing-calculator .redteam-pricing-calculator__start-over:hover,
.redteam-pricing-calculator .redteam-pricing-calculator__start-over:focus-visible {
	background-color: var(--color-walnut-400, #3f2e2b);
	color: var(--color-pearl-200-base, #f0ebe5);
}

/*
 * A bare layout slot — deliberately no background, padding or radius of its own.
 * The card IS the form: the global `.hs-form` rule paints it, and CTA-DEMO-FORM
 * masks it. A background here would fill the diagonal gap the mask cuts at the
 * bottom-right (which is supposed to show the section's pearl through), and its
 * padding would double up on `.hs-form`'s own.
 */


/* Footnote + start over -------------------------------------------------- */

.redteam-pricing-calculator__footnote {
	margin: 0;
	color: var(--color-pearl-500, #787673);
}

.redteam-pricing-calculator .redteam-pricing-calculator__start-over {
	align-self: flex-start;
}

.redteam-pricing-calculator__noscript {
	margin: 0;
	color: var(--color-black-300, #555555);
}


/* --------------------------------------------------------------------------
 * <= 960px — INVENTED, NOT DESIGNED. No mobile frames were supplied for any of
 * the six views, so this follows the same convention as widgets/comparison-table/
 * and widgets/pricing-comparison/: collapse to a single readable column and step
 * the oversized figures down to the Stats tablet token rather than guessing at a
 * spec. Note the root font-size is pinned flat below this breakpoint, so these
 * values no longer scale fluidly.
 * -------------------------------------------------------------------------- */

@media (width <= 960px) {

	.redteam-pricing-calculator {
		--redteam-pc-controls-width: 100%;
		--redteam-pc-tile-height: 120rem;
		--redteam-pc-card-height: auto;
		--redteam-pc-value-size: var(--font-stats-size-tablet, 60rem);
		gap: var(--s5);
	}

	.redteam-pricing-calculator__wizard,
	.redteam-pricing-calculator__step,
	.redteam-pricing-calculator__results {
		gap: var(--s5);
	}

	.redteam-pricing-calculator__header {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s2);
	}

	/* Text-only tiles keep two per row; the icon tiles carry an 86rem glyph plus
	 * a label and only fit one. */
	.redteam-pricing-calculator__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s2);
	}

	.redteam-pricing-calculator__tiles--icons {
		grid-template-columns: minmax(0, 1fr);
	}

	.redteam-pricing-calculator__tile {
		padding: var(--s3);
		gap: var(--s3);
	}

	.redteam-pricing-calculator__tile-icon {
		width: 52rem;
		height: 52rem;
	}

	.redteam-pricing-calculator__progress {
		gap: var(--s2);
	}

	.redteam-pricing-calculator__progress-bar {
		height: 6rem;
	}

	.redteam-pricing-calculator__arrow {
		--arrow-size: 48rem;
	}

	.redteam-pricing-calculator__arrow-icon {
		width: 26rem;
		height: 26rem;
	}

	.redteam-pricing-calculator__cards,
	.redteam-pricing-calculator__gains {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s2);
	}

	.redteam-pricing-calculator__card,
	.redteam-pricing-calculator__gain {
		gap: var(--s3);
		padding: var(--s4);
		min-height: 0;
	}

	.redteam-pricing-calculator__card-note {
		margin-top: 0;
	}

	.redteam-pricing-calculator__card-unit {
		font-size: 24rem;
	}

	.redteam-pricing-calculator__breakdown {
		gap: var(--s5);
		padding: var(--s4);
	}

	.redteam-pricing-calculator__band {
		padding: var(--s05) var(--s2);
	}

	.redteam-pricing-calculator__rows {
		gap: var(--s4);
	}

	.redteam-pricing-calculator__row {
		gap: var(--s2);
		padding-right: 0;
	}

	/* At this width an H4 label plus a nowrap currency value in two columns is
	 * too tight to read, so labels drop to the H5 tablet token. */
	.redteam-pricing-calculator__row-label,
	.redteam-pricing-calculator__row-value {
		font-size: var(--font-h5-size-tablet, 18rem);
	}

	.redteam-pricing-calculator__gains-block {
		margin-top: 0;
	}

	.redteam-pricing-calculator__cta {
		gap: var(--s4);
	}

	.redteam-pricing-calculator__cta--with-form {
		grid-template-columns: minmax(0, 1fr);
	}

}