/**
 * ATC Pricing Cards — front-end styles.
 *
 * Everything lives under .atcpc / .atcpc-card and is driven by custom properties, so the Elementor
 * controls (which set those properties) and other plugins' styles do not fight with it.
 */

.atcpc {
	--atcpc-font-heading: "Red Hat Display";
	--atcpc-font-body: "Open Sans";
	--atcpc-navy: #0e2350;
	--atcpc-accent: #c9a14a;
	--atcpc-heading-color: #d9b45f;
	--atcpc-heading-line: #c9a14a;
	--atcpc-card-bg: #faf8f4;
	--atcpc-card-radius: 14px;
	--atcpc-eyebrow-color: #5b6475;
	--atcpc-title-color: #0f1b33;
	--atcpc-text-color: #5b6475;
	--atcpc-period-color: #4a5468;
	--atcpc-price-color: #0e2350;
	--atcpc-secondary-color: #5b6475;
	--atcpc-divider-color: #e9dcc6;
	--atcpc-feature-color: #3d4759;
	--atcpc-icon-off-color: #a7aebb;
	--atcpc-icon-size: 24px;
	--atcpc-feature-gap: 8px;
	--atcpc-link-color: #1e3a8a;
	--atcpc-btn-bg: #0e2350;
	--atcpc-btn-color: #ffffff;
	--atcpc-btn-bg-hover: #1a3a7c;
	--atcpc-btn-radius: 8px;
	--atcpc-ribbon-color: #1b2440;
	--atcpc-featured-lift: 8px;
	--atcpc-pad-top: 30px;
	--atcpc-pad-right: 20px;
	--atcpc-pad-bottom: 20px;
	--atcpc-pad-left: 20px;
	--atcpc-duration: 600ms;
	--atcpc-stagger: 120ms;

	box-sizing: border-box;
	font-family: var(--atcpc-font-body), "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.4;
	text-align: center;
	-webkit-font-smoothing: antialiased;
}

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

.atcpc-bg-yes .atcpc {
	padding: clamp(32px, 5vw, 64px) clamp(16px, 4vw, 56px);
	background: radial-gradient(120% 90% at 50% 0%, #17336b 0%, #0e2350 42%, #081226 100%);
}

/* The container that the cqi units below measure: the texts scale with the width of one card. */
.atcpc__inner {
	max-width: 1480px;
	margin-inline: auto;
	container-type: inline-size;
}

/* Block heading ---------------------------------------------------------- */

.atcpc__header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(14px, 2.6vw, 40px);
	margin-bottom: clamp(28px, 5vw, 72px);
}

.atcpc__line {
	flex: 0 1 auto;
	width: 88px;
	height: 2px;
	background: var(--atcpc-heading-line);
	opacity: 0.85;
}

.atcpc .atcpc__heading {
	margin: 0;
	padding: 0;
	min-width: 0;
	font-family: var(--atcpc-font-heading), "Red Hat Display", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: clamp(22px, 3.1vw, 42px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.3em;
	/* The tracking adds a gap after the last letter; this keeps the text optically centred. */
	margin-inline-end: -0.3em;
	text-transform: uppercase;
	color: var(--atcpc-heading-color);
	overflow-wrap: anywhere;
}

/* With a subheading, the space below the heading goes under the subheading instead. */
.atcpc__header--sub {
	margin-bottom: clamp(6px, 0.9vw, 12px);
}

.atcpc .atcpc__subheading {
	margin: 0 0 clamp(28px, 5vw, 72px);
	padding: 0;
	font-family: var(--atcpc-font-heading), "Red Hat Display", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: clamp(13px, 1.5vw, 22px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.3em;
	/* Same optical centring as the heading. */
	margin-inline-end: -0.3em;
	text-align: center;
	text-transform: uppercase;
	color: var(--atcpc-subheading-color, inherit);
	overflow-wrap: anywhere;
}

/* White only over the navy background, like the note below the cards. */
.atcpc-bg-yes .atcpc__subheading {
	color: var(--atcpc-subheading-color, #ffffff);
}

/* Countdown -------------------------------------------------------------- */

/* With a countdown, the large space before the cards goes under the countdown instead. */
.atcpc--countdown .atcpc__header:not(.atcpc__header--sub),
.atcpc--countdown .atcpc__subheading {
	margin-bottom: clamp(14px, 2vw, 28px);
}

.atcpc__countdown {
	display: flex;
	flex-direction: column;
	align-items: var(--atcpc-cd-align, center);
	gap: clamp(8px, 1vw, 12px);
	margin: 0 0 clamp(28px, 5vw, 72px);
	text-align: center;
}

.atcpc__countdown [hidden],
.atcpc__countdown[hidden] {
	display: none !important;
}

.atcpc .atcpc__countdown-text,
.atcpc .atcpc__countdown-expired {
	margin: 0;
	padding: 0;
	font-family: var(--atcpc-font-heading), "Red Hat Display", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.atcpc .atcpc__countdown-text {
	font-size: clamp(12px, 1.2vw, 16px);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--atcpc-cd-text-color, var(--atcpc-text-color));
}

.atcpc .atcpc__countdown-expired {
	font-size: clamp(16px, 2vw, 24px);
	font-weight: 700;
	color: var(--atcpc-cd-expired-color, var(--atcpc-heading-color));
}

/* Equal fr columns: every box takes the width of the widest one. */
.atcpc__countdown-units {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	gap: var(--atcpc-cd-gap, clamp(8px, 1.4vw, 16px));
}

.atcpc__countdown-units--sep {
	grid-template-columns: 1fr auto 1fr auto 1fr;
}

.atcpc__countdown-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	min-width: clamp(64px, 8vw, 104px);
	padding: clamp(10px, 1.2vw, 16px) clamp(8px, 1vw, 14px);
	background: var(--atcpc-cd-box-bg, rgba(255, 255, 255, 0.06));
	border: 1px solid rgba(201, 161, 74, 0.55);
	border-radius: 10px;
}

.atcpc .atcpc__countdown-number {
	font-family: var(--atcpc-font-heading), "Red Hat Display", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: clamp(26px, 3.4vw, 48px);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--atcpc-cd-number-color, var(--atcpc-heading-color));
}

.atcpc .atcpc__countdown-label {
	margin-top: 6px;
	font-family: var(--atcpc-font-body), "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: clamp(10px, 0.9vw, 13px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--atcpc-cd-label-color, var(--atcpc-text-color));
}

.atcpc__countdown-sep {
	font-family: var(--atcpc-font-heading), "Red Hat Display", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: clamp(22px, 3vw, 40px);
	font-weight: 700;
	line-height: 1;
	color: var(--atcpc-cd-separator-color, var(--atcpc-heading-line));
}

/* Over the navy background the texts are white, like the subheading. */
.atcpc-bg-yes .atcpc .atcpc__countdown-text {
	color: var(--atcpc-cd-text-color, #ffffff);
}

.atcpc-bg-yes .atcpc .atcpc__countdown-label {
	color: var(--atcpc-cd-label-color, #ffffff);
}

.atcpc__countdown-empty {
	margin-bottom: clamp(20px, 3vw, 40px);
}

/* Grid ------------------------------------------------------------------- */

.atcpc__grid {
	--atcpc-columns: 4;
	--atcpc-gap: 18px;

	/* Without a card width this is invalid on purpose, so the tracks below fall back to 1fr. A width in vw never makes a card narrower than 180px. */
	--atcpc-card-track: max(var(--atcpc-card-width), min(100%, 180px));

	display: grid;
	/* With a card width set, the cards keep it and sit in the middle; they still shrink to fit. */
	grid-template-columns: repeat(var(--atcpc-columns), minmax(0, var(--atcpc-card-track, 1fr)));
	justify-content: center;
	gap: var(--atcpc-gap);
	align-items: stretch;
}

.atcpc__footnote {
	max-width: 62em;
	margin: 18px auto 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	white-space: pre-line;
	color: var(--atcpc-footnote-color, inherit);
	overflow-wrap: anywhere;
}

/* White only over the navy background; on a transparent block the note follows the text of the page. */
.atcpc-bg-yes .atcpc__footnote {
	color: var(--atcpc-footnote-color, rgba(255, 255, 255, 0.82));
}

@media (max-width: 1024px) {
	.atcpc__grid {
		--atcpc-columns: 2;
	}
}

@media (max-width: 767px) {
	.atcpc__grid {
		--atcpc-columns: 1;
	}
}

/* Card ------------------------------------------------------------------- */

.atcpc-card {
	/* 1% of the width of one card. */
	--atcpc-u: calc(min(max(var(--atcpc-card-width, 100cqi), min(100cqi, 180px)), (100cqi - (var(--atcpc-columns) - 1) * var(--atcpc-gap)) / var(--atcpc-columns)) / 100);

	display: flex;
	min-width: 0;
	margin: 0;
}

/* The version of a scheduled card that is not on now. */
.atcpc-card[hidden] {
	display: none !important;
}

.atcpc-card__box {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	background-color: var(--atcpc-card-bg);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--atcpc-card-radius);
	box-shadow: 0 10px 30px rgba(8, 18, 38, 0.25);
	transition:
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.35s ease,
		box-shadow 0.35s ease,
		background-color 0.3s ease,
		border-color 0.3s ease;
}

.atcpc-card__box:hover {
	background-color: var(--atcpc-card-bg-hover, var(--atcpc-card-bg));
}

/* In two columns, a last card left alone on its line is centred instead of leaving half the line empty. */
.atcpc__grid > .atcpc-card:last-child:nth-child(odd) {
	position: relative;
	inset-inline-start: calc((1 - min(1, max(var(--atcpc-columns) - 2, 2 - var(--atcpc-columns)))) * (50% + var(--atcpc-gap) / 2));
}

/* With a hidden version of a scheduled card in the grid, only the cards on screen are counted. */
.atcpc__grid:has(> .atcpc-card[hidden]) > .atcpc-card {
	inset-inline-start: 0;
}

.atcpc__grid > .atcpc-card:nth-last-child(1 of :not([hidden])):nth-child(odd of :not([hidden])) {
	position: relative;
	inset-inline-start: calc((1 - min(1, max(var(--atcpc-columns) - 2, 2 - var(--atcpc-columns)))) * (50% + var(--atcpc-gap) / 2));
}

/* The lift only applies side by side: in a single column it would make the gaps between cards uneven. */
.atcpc-card.is-featured .atcpc-card__box {
	margin-top: calc(var(--atcpc-featured-lift) * -1 * min(1, var(--atcpc-columns) - 1));
	margin-bottom: calc(var(--atcpc-featured-lift) * -0.25 * min(1, var(--atcpc-columns) - 1));
	border: 3px solid var(--atcpc-featured-border, var(--atcpc-accent));
	box-shadow: 0 0 0 1px var(--atcpc-featured-ring, rgba(255, 236, 184, 0.35)), 0 14px 44px var(--atcpc-featured-glow, rgba(201, 161, 74, 0.35));
}

.atcpc-card__ribbon {
	margin: calc(var(--atcpc-pad-top) * -1) calc(var(--atcpc-pad-right) * -1) 22px calc(var(--atcpc-pad-left) * -1);
	padding: 9px 12px;
	font-family: var(--atcpc-font-heading), "Red Hat Display", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-size: clamp(11px, calc(var(--atcpc-u) * 3.7), 14px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--atcpc-ribbon-color);
	background: var(--atcpc-ribbon-bg, linear-gradient(90deg, #b8893a 0%, #ebd28f 50%, #b8893a 100%));
	overflow-wrap: anywhere;
}

.atcpc-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

/* The card padding lives on the parts, so they can sit straight on the rows of the grid. */
.atcpc-card__body > :first-child {
	padding-top: var(--atcpc-pad-top);
}

/* Head: grows downwards, so the dividers of neighbouring cards line up. */
.atcpc-card__head {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 1 0 auto;
	padding: var(--atcpc-pad-top) var(--atcpc-pad-right) 16px var(--atcpc-pad-left);
}

.atcpc-card__eyebrow {
	margin-bottom: 6px;
	font-family: var(--atcpc-font-heading), "Red Hat Display", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-size: clamp(11px, calc(var(--atcpc-u) * 3.85), 14px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--atcpc-eyebrow-color);
	overflow-wrap: anywhere;
}

.atcpc .atcpc-card__title {
	margin: 0;
	padding: 0;
	font-family: var(--atcpc-font-heading), "Red Hat Display", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 30px;
	font-size: clamp(22px, calc(var(--atcpc-u) * 9.6), 40px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--atcpc-title-color);
	overflow-wrap: anywhere;
}

.atcpc-card__subtitle {
	margin-top: 6px;
	font-size: 17px;
	font-size: clamp(14px, calc(var(--atcpc-u) * 4.9), 18px);
	line-height: 1.35;
	color: var(--atcpc-text-color);
	overflow-wrap: anywhere;
}

.atcpc-card__pricing {
	margin: 0 calc(var(--atcpc-pad-right) + 14px) 0 calc(var(--atcpc-pad-left) + 14px);
	padding: 16px 0 18px;
	border-top: 1px solid var(--atcpc-divider-color);
	border-bottom: 1px solid var(--atcpc-divider-color);
}

.atcpc-card__pricing:first-child {
	border-top: 0;
}

.atcpc-card__pricing:last-child {
	padding-bottom: 0;
	margin-bottom: var(--atcpc-pad-bottom);
	border-bottom: 0;
}

.atcpc-card__period {
	font-size: 18px;
	font-size: clamp(15px, calc(var(--atcpc-u) * 5.2), 19px);
	line-height: 1.35;
	color: var(--atcpc-period-color);
	overflow-wrap: anywhere;
}

/* Old price of a promotional item: only the amount is crossed out, never its label. */
.atcpc-card__old {
	margin-top: 4px;
	font-size: 17px;
	font-size: clamp(14px, calc(var(--atcpc-u) * 5), 18px);
	line-height: 1.35;
	color: var(--atcpc-old-color, var(--atcpc-period-color));
	overflow-wrap: anywhere;
}

.atcpc .atcpc-card__old-price {
	text-decoration: line-through;
	text-decoration-thickness: 0.08em;
	text-decoration-color: var(--atcpc-old-line-color, currentColor);
}

.atcpc-old-line-dashed .atcpc .atcpc-card__old-price {
	text-decoration-style: dashed;
}

.atcpc-old-line-none .atcpc .atcpc-card__old-price {
	text-decoration: none;
}

.atcpc-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0 0.22em;
	margin-top: 4px;
	font-family: var(--atcpc-font-heading), "Red Hat Display", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 40px;
	/* 24px at the least: a four-digit amount still fits on one line of a 180px card. */
	font-size: clamp(24px, calc(var(--atcpc-u) * 13.2), 54px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--atcpc-price-color);
}

/* Currency and amount stay together: a label or a prefix that does not fit goes to the line above. */
.atcpc-card__value {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0 0.22em;
	min-width: 0;
}

.atcpc-currency-after .atcpc-card__value {
	flex-direction: row-reverse;
}

.atcpc-card__currency {
	font-size: 0.66em;
}

.atcpc-card__prefix {
	font-size: 0.5em;
	font-weight: 700;
	letter-spacing: 0;
}

/* The optional word before the price, as in "For R$ 1.192,13". */
.atcpc-card__price-label {
	font-size: 0.4em;
	font-weight: 600;
	letter-spacing: 0;
}

.atcpc-card__amount {
	font-variant-numeric: lining-nums;
	overflow-wrap: anywhere;
}

.atcpc-card__note {
	margin-top: 2px;
	font-family: var(--atcpc-font-heading), "Red Hat Display", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 19px;
	font-size: clamp(16px, calc(var(--atcpc-u) * 5.5), 20px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--atcpc-note-color, var(--atcpc-price-color));
}

.atcpc-card__secondary {
	margin-top: 6px;
	font-size: 15px;
	font-size: clamp(12.5px, calc(var(--atcpc-u) * 4.4), 16px);
	line-height: 1.4;
	color: var(--atcpc-secondary-color);
	overflow-wrap: anywhere;
}

/* Features --------------------------------------------------------------- */

.atcpc ul.atcpc-card__features {
	display: flex;
	flex-direction: column;
	gap: var(--atcpc-feature-gap);
	align-self: var(--atcpc-features-align, flex-start);
	max-width: 100%;
	margin: 0;
	padding: 18px calc(var(--atcpc-pad-right) + 14px) 0 calc(var(--atcpc-pad-left) + 14px);
	/* Below a 240px card the extra 14px of each side goes away, so a word of an item is not cut in two. */
	padding: 18px calc(var(--atcpc-pad-right) + clamp(0px, calc(var(--atcpc-u) * 23.4 - 42px), 14px)) 0 calc(var(--atcpc-pad-left) + clamp(0px, calc(var(--atcpc-u) * 23.4 - 42px), 14px));
	list-style: none;
	text-align: start;
}

.atcpc ul.atcpc-card__features:first-child {
	padding-top: var(--atcpc-pad-top);
}

.atcpc ul.atcpc-card__features:last-child,
.atcpc-card__head:last-child {
	padding-bottom: var(--atcpc-pad-bottom);
}

.atcpc li.atcpc-card__feature {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	gap: clamp(8px, calc(var(--atcpc-u) * 10 - 10px), 14px);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	font-size: clamp(14px, calc(var(--atcpc-u) * 4.6), 17px);
	line-height: 1.45;
	color: var(--atcpc-feature-color);
}

.atcpc li.atcpc-card__feature::before,
.atcpc li.atcpc-card__feature::marker {
	content: none;
}

.atcpc-card__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--atcpc-icon-size);
	height: var(--atcpc-icon-size);
	font-size: var(--atcpc-icon-size);
	line-height: 1;
	color: var(--atcpc-icon-color, var(--atcpc-accent));
}

.atcpc-card__icon svg {
	width: 1em;
	height: 1em;
}

/* Icons picked in Elementor are filled shapes; the built-in ones are strokes. */
.atcpc-card__icon svg:not(.atcpc-svg) {
	fill: currentColor;
}

.atcpc-card__feature-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.atcpc-card__feature.is-off {
	opacity: 0.75;
}

.atcpc-card__feature.is-off .atcpc-card__icon {
	color: var(--atcpc-icon-off-color);
}

.atcpc-card__feature.is-off .atcpc-card__feature-text {
	text-decoration: line-through;
}

.atcpc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Link and button -------------------------------------------------------- */

.atcpc-card__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding: 16px var(--atcpc-pad-right) var(--atcpc-pad-bottom) var(--atcpc-pad-left);
}

.atcpc .atcpc-card__link,
.atcpc .atcpc-card__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	font-family: var(--atcpc-font-heading), "Red Hat Display", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
	text-decoration: none;
	box-shadow: none;
}

.atcpc .atcpc-card__link {
	gap: 12px;
	padding: 2px 4px;
	font-size: 16px;
	font-size: clamp(14px, calc(var(--atcpc-u) * 4.6), 17px);
	font-weight: 600;
	line-height: 1.35;
	color: var(--atcpc-link-color);
	border-radius: 4px;
	transition: color 0.25s ease;
}

/* A taller touch target for the text link, without moving anything. */
.atcpc a.atcpc-card__link {
	position: relative;
}

.atcpc a.atcpc-card__link::after {
	content: "";
	position: absolute;
	inset: -9px -8px;
}

.atcpc .atcpc-card__button {
	gap: 18px;
	/* Below a 240px card the gap and the side padding shrink, so a word of the text is not cut in two. */
	gap: clamp(8px, calc(var(--atcpc-u) * 20 - 28px), 18px);
	min-height: 56px;
	padding: 14px 20px;
	padding: 14px clamp(8px, calc(var(--atcpc-u) * 20 - 28px), 20px);
	font-size: 16px;
	font-size: clamp(14px, calc(var(--atcpc-u) * 4.6), 17px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--atcpc-btn-color);
	background-color: var(--atcpc-btn-bg);
	border: 0 solid transparent;
	border-radius: var(--atcpc-btn-radius);
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.atcpc-btn-full-yes .atcpc-card__button {
	display: flex;
	width: 100%;
}

.atcpc-card__label {
	min-width: 0;
	overflow-wrap: anywhere;
}

.atcpc-svg--arrow {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	transition: transform 0.25s ease;
}

.atcpc a.atcpc-card__link:hover,
.atcpc a.atcpc-card__link:focus-visible {
	color: var(--atcpc-link-color-hover, var(--atcpc-link-color));
	text-decoration: underline;
	text-underline-offset: 4px;
}

.atcpc a.atcpc-card__button:hover,
.atcpc a.atcpc-card__button:focus-visible {
	color: var(--atcpc-btn-color-hover, var(--atcpc-btn-color));
	background-color: var(--atcpc-btn-bg-hover);
	box-shadow: 0 8px 20px rgba(14, 35, 80, 0.28);
}

.atcpc a.atcpc-card__link:hover .atcpc-svg--arrow,
.atcpc a.atcpc-card__link:focus-visible .atcpc-svg--arrow,
.atcpc a.atcpc-card__button:hover .atcpc-svg--arrow,
.atcpc a.atcpc-card__button:focus-visible .atcpc-svg--arrow {
	transform: translateX(5px);
}

.atcpc a.atcpc-card__link:focus-visible,
.atcpc a.atcpc-card__button:focus-visible {
	outline: 3px solid var(--atcpc-accent);
	outline-offset: 3px;
}

/* Details accordion ------------------------------------------------------ */
/* A native <details>: it opens without JavaScript; the script only animates and syncs the cards. */

.atcpc-card__details {
	width: 100%;
	min-width: 0;
}

/* Themes often draw a box around <details> and <summary>; the toggle is a plain text link. */
.atcpc details.atcpc-card__details,
.atcpc summary.atcpc-card__toggle {
	margin: 0;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.atcpc .atcpc-card__toggle {
	display: block;
	min-height: 0;
	list-style: none;
	text-align: var(--atcpc-details-align, center);
	font-family: var(--atcpc-font-heading), "Red Hat Display", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-size: clamp(14px, calc(var(--atcpc-u) * 4.6), 17px);
	font-weight: 600;
	line-height: 1.35;
	color: var(--atcpc-details-color, var(--atcpc-link-color));
	cursor: pointer;
	border-radius: 4px;
	transition: color 0.25s ease;
	-webkit-user-select: none;
	user-select: none;
}

.atcpc .atcpc-card__toggle::-webkit-details-marker {
	display: none;
}

.atcpc .atcpc-card__toggle::marker {
	content: "";
}

.atcpc-card__toggle-inner {
	display: inline-flex;
	align-items: center;
	position: relative;
	gap: 10px;
	max-width: 100%;
	padding: 2px 4px;
	text-align: start;
}

/* A taller touch target, like the one of the text link. */
.atcpc-card__toggle-inner::after {
	content: "";
	position: absolute;
	inset: -9px -8px;
}

.atcpc-details-icon-end .atcpc-card__toggle-inner {
	flex-direction: row-reverse;
}

.atcpc .atcpc-card__toggle:hover,
.atcpc .atcpc-card__toggle:focus-visible {
	color: var(--atcpc-details-color-hover, var(--atcpc-details-color, var(--atcpc-link-color-hover, var(--atcpc-link-color))));
}

/* The focus ring hugs the label, like the ring of the text link. */
.atcpc .atcpc-card__toggle:focus-visible {
	outline: none;
}

.atcpc .atcpc-card__toggle:focus-visible .atcpc-card__toggle-inner {
	outline: 3px solid var(--atcpc-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.atcpc-card__toggle-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: var(--atcpc-details-icon-size, 1.05em);
	height: var(--atcpc-details-icon-size, 1.05em);
}

.atcpc-card__toggle-icon svg {
	width: 100%;
	height: 100%;
}

.atcpc-card__toggle-icon .atcpc-svg--minus,
.atcpc-card__details[open]:not(.is-closing) .atcpc-svg--plus,
.atcpc-card__toggle-label--open,
.atcpc-card__details.has-open-label[open]:not(.is-closing) .atcpc-card__toggle-label:not(.atcpc-card__toggle-label--open) {
	display: none;
}

.atcpc-card__details[open]:not(.is-closing) .atcpc-svg--minus,
.atcpc-card__details[open]:not(.is-closing) .atcpc-card__toggle-label--open {
	display: inline-block;
}

.atcpc-svg--chevron {
	transition: transform 0.3s ease;
}

.atcpc-card__details[open]:not(.is-closing) .atcpc-svg--chevron {
	transform: rotate(180deg);
}

.atcpc-card__toggle-label {
	min-width: 0;
	overflow-wrap: anywhere;
}

.atcpc-card__panel {
	overflow: hidden;
	text-align: start;
}

.atcpc ul.atcpc-card__detail-list {
	display: flex;
	flex-direction: column;
	gap: var(--atcpc-details-gap, 8px);
	margin: 0;
	padding: 8px 14px 6px;
	/* Below a 240px card the side padding goes away, so a word of an item is not cut in two. */
	padding: 8px clamp(0px, calc(var(--atcpc-u) * 23.4 - 42px), 14px) 6px;
	list-style: none;
}

.atcpc li.atcpc-card__detail {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	gap: clamp(6px, calc(var(--atcpc-u) * 10 - 14px), 10px);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-size: clamp(13px, calc(var(--atcpc-u) * 4.3), 16px);
	line-height: 1.45;
	color: var(--atcpc-details-item-color, var(--atcpc-feature-color));
}

.atcpc li.atcpc-card__detail::before,
.atcpc li.atcpc-card__detail::marker {
	content: none;
}

.atcpc-card__detail-mark {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	width: 1.1em;
	height: 1.45em;
	color: var(--atcpc-details-mark-color, currentColor);
}

.atcpc-card__detail-mark svg {
	width: 1.1em;
	height: 1.1em;
}

.atcpc-card__detail-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.atcpc-card__detail.is-off {
	opacity: 0.75;
}

.atcpc-card__detail.is-off .atcpc-card__detail-text {
	text-decoration: line-through;
}

/* Rules modal ------------------------------------------------------------ */
/* A native <dialog>: it opens in the top layer, so the card's transforms and overflow cannot clip it. */

html.atcpc-modal-open {
	overflow: hidden;
}

.atcpc dialog.atcpc-modal {
	position: fixed;
	inset: 0;
	width: min(calc(100vw - 32px), var(--atcpc-modal-width, 640px));
	max-width: none;
	height: fit-content;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: clamp(24px, 5vw, 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	font-family: var(--atcpc-font-body), "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	text-align: start;
	color: var(--atcpc-modal-text-color, #2b3445);
	background: var(--atcpc-modal-bg, #ffffff);
	border: 0;
	border-radius: var(--atcpc-modal-radius, 14px);
	box-shadow: 0 24px 60px rgba(8, 18, 38, 0.35);
}

.atcpc dialog.atcpc-modal:not([open]) {
	display: none;
}

.atcpc-modal::backdrop {
	background: var(--atcpc-modal-overlay, rgba(8, 18, 38, 0.72));
}

@media (prefers-reduced-motion: no-preference) {
	.atcpc dialog.atcpc-modal[open] {
		animation: atcpc-modal-in 0.28s ease;
	}
}

@keyframes atcpc-modal-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

.atcpc .atcpc-modal__title {
	margin: 0 0 18px;
	padding: 0;
	padding-inline-end: 36px;
	font-family: var(--atcpc-font-heading), "Red Hat Display", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: clamp(21px, calc(14px + 2vw), 28px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	color: var(--atcpc-modal-title-color, #0f1b33);
	overflow-wrap: anywhere;
}

.atcpc-modal__content {
	overflow-wrap: anywhere;
}

.atcpc .atcpc-modal__content > :first-child {
	margin-top: 0;
}

.atcpc .atcpc-modal__content > :last-child {
	margin-bottom: 0;
}

.atcpc .atcpc-modal__content p {
	margin: 0 0 0.85em;
}

.atcpc .atcpc-modal__content ul,
.atcpc .atcpc-modal__content ol {
	margin: 0 0 0.85em;
	padding: 0;
	padding-inline-start: 1.3em;
}

.atcpc .atcpc-modal__content ul {
	list-style: disc;
}

.atcpc .atcpc-modal__content ol {
	list-style: decimal;
}

.atcpc .atcpc-modal__content li {
	margin: 0 0 0.8em;
	padding: 0;
	list-style: inherit;
}

.atcpc .atcpc-modal__content li:last-child {
	margin-bottom: 0;
}

.atcpc .atcpc-modal__content strong,
.atcpc .atcpc-modal__content b {
	font-weight: 700;
	color: var(--atcpc-modal-title-color, #0f1b33);
}

.atcpc .atcpc-modal__content a {
	color: var(--atcpc-modal-btn-bg, #1f3384);
	text-decoration: underline;
}

.atcpc a.atcpc-modal__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	min-height: 56px;
	margin-top: 26px;
	padding: 14px 20px;
	font-family: var(--atcpc-font-heading), "Red Hat Display", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	color: var(--atcpc-modal-btn-color, #ffffff);
	background-color: var(--atcpc-modal-btn-bg, #1f3384);
	border: 0;
	border-radius: var(--atcpc-modal-btn-radius, var(--atcpc-btn-radius));
	box-shadow: none;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.atcpc a.atcpc-modal__button:hover,
.atcpc a.atcpc-modal__button:focus-visible {
	color: var(--atcpc-modal-btn-color, #ffffff);
	background-color: var(--atcpc-modal-btn-bg-hover, var(--atcpc-modal-btn-bg, #1f3384));
	box-shadow: 0 8px 20px rgba(14, 35, 80, 0.28);
	/* Without a hover colour of its own, the button darkens a little. */
	filter: var(--atcpc-modal-btn-filter, brightness(0.88));
}

.atcpc a.atcpc-modal__button:hover .atcpc-svg--arrow,
.atcpc a.atcpc-modal__button:focus-visible .atcpc-svg--arrow {
	transform: translateX(5px);
}

.atcpc button.atcpc-modal__close,
.atcpc button.atcpc-modal__close:hover,
.atcpc button.atcpc-modal__close:focus {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0;
	color: var(--atcpc-modal-text-color, #2b3445);
	background: transparent;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.atcpc button.atcpc-modal__close:hover,
.atcpc button.atcpc-modal__close:focus-visible {
	background: rgba(15, 27, 51, 0.08);
}

.atcpc-modal__close svg {
	width: 22px;
	height: 22px;
}

.atcpc a.atcpc-modal__button:focus-visible,
.atcpc button.atcpc-modal__close:focus-visible {
	outline: 3px solid var(--atcpc-accent);
	outline-offset: 3px;
}

/* Right-to-left ---------------------------------------------------------- */

[dir="rtl"] .atcpc-svg--arrow,
.rtl .atcpc-svg--arrow {
	transform: scaleX(-1);
}

[dir="rtl"] .atcpc a.atcpc-modal__button:hover .atcpc-svg--arrow,
[dir="rtl"] .atcpc a.atcpc-modal__button:focus-visible .atcpc-svg--arrow,
.rtl .atcpc a.atcpc-modal__button:hover .atcpc-svg--arrow,
.rtl .atcpc a.atcpc-modal__button:focus-visible .atcpc-svg--arrow,
[dir="rtl"] .atcpc a.atcpc-card__link:hover .atcpc-svg--arrow,
[dir="rtl"] .atcpc a.atcpc-card__link:focus-visible .atcpc-svg--arrow,
[dir="rtl"] .atcpc a.atcpc-card__button:hover .atcpc-svg--arrow,
[dir="rtl"] .atcpc a.atcpc-card__button:focus-visible .atcpc-svg--arrow,
.rtl .atcpc a.atcpc-card__link:hover .atcpc-svg--arrow,
.rtl .atcpc a.atcpc-card__link:focus-visible .atcpc-svg--arrow,
.rtl .atcpc a.atcpc-card__button:hover .atcpc-svg--arrow,
.rtl .atcpc a.atcpc-card__button:focus-visible .atcpc-svg--arrow {
	transform: scaleX(-1) translateX(5px);
}

/* Aligned rows ----------------------------------------------------------- */
/* With subgrid, head, price, features and actions share their rows across the cards of a line. */

@supports (grid-template-rows: subgrid) {
	.atcpc-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: subgrid;
		grid-row: span 4;
		row-gap: 0;
	}

	.atcpc-card__box {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: subgrid;
		grid-row: 1 / -1;
		row-gap: 0;
	}

	.atcpc-card__body {
		display: contents;
	}

	.atcpc-card__head {
		grid-row: 1;
	}

	.atcpc-card__pricing {
		grid-row: 2;
	}

	.atcpc ul.atcpc-card__features {
		grid-row: 3;
		justify-self: var(--atcpc-features-align, flex-start);
		align-self: start;
	}

	.atcpc-card__actions {
		grid-row: 4;
		align-self: end;
		margin-top: 0;
	}

	/* Open panels differ in height: the toggles stay on one line and the buttons on another. */
	.atcpc-card__actions:has(> .atcpc-card__details) {
		align-self: stretch;
	}

	.atcpc-card__details + .atcpc-card__button {
		margin-top: auto;
	}
}

/* Hover effects ---------------------------------------------------------- */

@media (hover: hover) {
	.atcpc--hover-lift .atcpc-card__box:hover {
		transform: translateY(-8px);
		box-shadow: 0 22px 46px rgba(8, 18, 38, 0.38);
	}

	.atcpc--hover-grow .atcpc-card__box:hover {
		transform: scale(1.03);
		box-shadow: 0 22px 46px rgba(8, 18, 38, 0.38);
	}

	.atcpc--hover-glow .atcpc-card__box:hover {
		box-shadow: 0 0 0 2px var(--atcpc-accent), 0 16px 48px rgba(201, 161, 74, 0.45);
	}

	.atcpc--hover-lift .atcpc-card.is-featured .atcpc-card__box:hover,
	.atcpc--hover-grow .atcpc-card.is-featured .atcpc-card__box:hover {
		box-shadow: 0 0 0 1px var(--atcpc-featured-ring, rgba(255, 236, 184, 0.45)), 0 24px 56px var(--atcpc-featured-glow, rgba(201, 161, 74, 0.48));
	}
}

/* Entrance and exit ------------------------------------------------------ */
/* .atcpc--js is added by the script, so without JavaScript the cards are simply visible. */

.atcpc--js .atcpc-card__box {
	transition-duration: var(--atcpc-duration), var(--atcpc-duration), 0.35s, 0.3s, 0.3s;
}

.atcpc--js .atcpc-card.is-settled .atcpc-card__box {
	transition-duration: 0.35s, 0.35s, 0.35s, 0.3s, 0.3s;
}

.atcpc--js .atcpc-card.is-visible:not(.is-settled) .atcpc-card__box {
	transition-delay: calc(var(--atcpc-i, 0) * var(--atcpc-stagger));
}

.atcpc--js .atcpc-card:not(.is-visible) .atcpc-card__box {
	opacity: 0;
	pointer-events: none;
}

.atcpc--js.atcpc--in-fade-up .atcpc-card:not(.is-visible) .atcpc-card__box {
	transform: translateY(36px);
}

.atcpc--js.atcpc--in-fade-down .atcpc-card:not(.is-visible) .atcpc-card__box {
	transform: translateY(-36px);
}

.atcpc--js.atcpc--in-zoom .atcpc-card:not(.is-visible) .atcpc-card__box {
	transform: scale(0.9);
}

.atcpc--js.atcpc--in-slide .atcpc-card:not(.is-visible) .atcpc-card__box {
	transform: translateX(-44px);
}

[dir="rtl"] .atcpc--js.atcpc--in-slide .atcpc-card:not(.is-visible) .atcpc-card__box,
.rtl .atcpc--js.atcpc--in-slide .atcpc-card:not(.is-visible) .atcpc-card__box {
	transform: translateX(44px);
}

@media (prefers-reduced-motion: reduce) {
	.atcpc .atcpc-card__box,
	.atcpc .atcpc-card__box:hover,
	.atcpc .atcpc-svg--arrow {
		transition: none;
		transform: none;
	}

	.atcpc .atcpc-svg--chevron {
		transition: none;
	}

	.atcpc--js .atcpc-card:not(.is-visible) .atcpc-card__box {
		opacity: 1;
		pointer-events: auto;
	}
}

/* A printed page (or a saved PDF) shows every card, including the ones not revealed yet. */
@media print {
	.atcpc.atcpc--js .atcpc__grid .atcpc-card:not(.is-visible) .atcpc-card__box {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Narrow screens --------------------------------------------------------- */

@media (max-width: 767px) {
	.atcpc__line {
		width: 36px;
	}

	.atcpc .atcpc__heading,
	.atcpc .atcpc__subheading {
		letter-spacing: 0.18em;
		margin-inline-end: -0.18em;
	}
}

/* Editor placeholder ----------------------------------------------------- */

.atcpc-empty {
	padding: 24px;
	font-size: 14px;
	text-align: center;
	color: #5b6475;
	background: #f4f5f7;
	border: 1px dashed #b9c0cc;
	border-radius: 8px;
}