/**
 * AscendAI "AI Budget 2027" landing page.
 *
 * Layered on page-homepage.css, which the plugin loads first for this
 * template. The page uses the homepage shell template and body class
 * (`body.ascend-home-template-active`, `main.ascend-home`), so hero, split, lead, buttons, testimonials, results,
 * logo row and contact band render exactly as on the homepage. This file adds
 * only the components the homepage does not have.
 *
 * HOUSE RULES (as page-homepage.css):
 *   1. Every selector is anchored at `body.ascend-budget-template-active .ascend-home`.
 *   2. Layout containers are written for both Group shapes:
 *      `X > .wp-block-group__inner-container` and
 *      `X:not(:has(> .wp-block-group__inner-container))`.
 *   3. Margin / padding longhands; explicit grid tracks; no `!important`; no motion.
 *   4. Small blue text uses --ascend-home-blue-text (AA on white and --sky) or, on the
 *      hero's deeper sky, --ascend-budget-blue-deep; the brand blue is for rules and dots.
 */

/* The page's radius is 12px throughout, including the reused homepage panels. */
body.ascend-budget-template-active .ascend-home {
	--ascend-home-radius: 12px;
	--ascend-home-radius-lg: 12px;
	/* 5.17:1 on the hero's --ascend-home-sky-top (#c4dbed), where #1f6c9e is only 3.98:1. */
	--ascend-budget-blue-deep: #195a85;
}

/* In-page anchor targets stop short of a sticky theme header (the homepage already covers #contact). */
body.ascend-budget-template-active .ascend-home .ascend-budget-deliverables,
body.ascend-budget-template-active .ascend-home .ascend-budget-process,
body.ascend-budget-template-active .ascend-home .ascend-budget-proof {
	scroll-margin-block-start: 96px;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-band--sky {
	background: var(--ascend-home-sky);
}

/* Inline links inside running copy (not the arrowed link paragraphs). */
body.ascend-budget-template-active .ascend-home .ascend-budget-offer-body p a,
body.ascend-budget-template-active .ascend-home .ascend-budget-team p.ascend-home-deck a {
	color: var(--ascend-home-blue-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-offer-body p a:hover,
body.ascend-budget-template-active .ascend-home .ascend-budget-team p.ascend-home-deck a:hover {
	color: var(--ascend-home-ink);
}

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

/* The homepage label type, in blue, above the headline. */
body.ascend-budget-template-active .ascend-home .ascend-home-hero p.ascend-budget-eyebrow {
	grid-column: 1 / -1;
	color: var(--ascend-budget-blue-deep);
	margin-block-end: 24px;
}

/* The homepage's hover blue is below AA on the hero ground; keep the text button's states readable here. */
body.ascend-budget-template-active .ascend-home .ascend-home-hero .ascend-home-button--text .wp-block-button__link:hover,
body.ascend-budget-template-active .ascend-home .ascend-home-hero .ascend-home-button--text .wp-block-button__link:focus-visible {
	color: var(--ascend-budget-blue-deep);
	border-bottom-color: var(--ascend-budget-blue-deep);
}

body.ascend-budget-template-active .ascend-home .ascend-home-hero .ascend-home-button--text .wp-block-button__link::after {
	color: var(--ascend-budget-blue-deep);
}

/* Long labels wrap in balanced lines on phones instead of stranding the arrow. */
body.ascend-budget-template-active .ascend-home .ascend-home-button--text {
	text-wrap: balance;
}

/* The arrow is decoration: empty alternative text keeps it out of the link's accessible name. */
body.ascend-budget-template-active .ascend-home .ascend-home-button--text .wp-block-button__link::after {
	content: "\2192";
	content: "\2192" / "";
}

/* One sentence, so the whole headline takes the homepage's first-sentence weight. */
body.ascend-budget-template-active .ascend-home .ascend-home-hero h1 {
	font-weight: 700;
}

/* -------------------------------------------------------- availability */

/* The engagements-left panel (hero and closing band): the count, what it counts, and an
   eight-segment meter. page.py sets the ascend-budget-booked-N class from SLOTS_LEFT; it
   sets how many segments read as booked. The meter's legend is real text; the bar is decoration.
   Stacked by default; the hero spreads it across three columns on wide screens. */
body.ascend-budget-template-active .ascend-home .ascend-budget-booked-0 {
	--ascend-budget-booked: 0;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-booked-1 {
	--ascend-budget-booked: 1;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-booked-2 {
	--ascend-budget-booked: 2;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-booked-3 {
	--ascend-budget-booked: 3;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-booked-4 {
	--ascend-budget-booked: 4;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-booked-5 {
	--ascend-budget-booked: 5;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-booked-6 {
	--ascend-budget-booked: 6;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity {
	--ascend-budget-scarcity-gap: 32px;
	grid-column: 1 / -1;
	margin-block-start: 40px;
	padding-block: 28px;
	padding-inline: var(--ascend-budget-scarcity-gap);
	border: 1px solid var(--ascend-home-line-sky);
	border-inline-start: 6px solid var(--ascend-home-blue);
	border-radius: var(--ascend-home-radius);
	background: rgb(255 255 255 / 92%);
	box-shadow: 0 18px 44px rgb(15 26 36 / 9%);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	grid-template-areas:
		"count kicker"
		"count title"
		"meter meter"
		"note note";
	column-gap: var(--ascend-budget-scarcity-gap);
	row-gap: 6px;
	align-items: center;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	grid-template-areas:
		"count kicker"
		"count title"
		"meter meter"
		"note note";
	column-gap: var(--ascend-budget-scarcity-gap);
	row-gap: 6px;
	align-items: center;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity p {
	margin-block-start: 0;
	margin-block-end: 0;
	font-family: var(--ascend-home-display);
	color: var(--ascend-home-ink);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity p.ascend-budget-scarcity-kicker {
	grid-area: kicker;
	align-self: end;
	font-size: var(--ascend-home-t-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ascend-budget-blue-deep);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity p.ascend-budget-scarcity-count {
	grid-area: count;
	padding-inline-end: var(--ascend-budget-scarcity-gap);
	border-inline-end: 1px solid var(--ascend-home-line-sky);
	font-size: var(--ascend-home-t-xl);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--ascend-budget-blue-deep);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity p.ascend-budget-scarcity-count strong {
	font-size: clamp(4rem, 7vw, 6.5rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--ascend-home-ink);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity p.ascend-budget-scarcity-title {
	grid-area: title;
	font-size: var(--ascend-home-t-xl);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity p.ascend-budget-scarcity-note {
	grid-area: note;
	align-self: start;
	font-size: var(--ascend-home-t-body);
	font-weight: 600;
	color: var(--ascend-budget-blue-deep);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity p.ascend-budget-scarcity-meter {
	grid-area: meter;
	margin-block-start: 18px;
	font-size: var(--ascend-home-t-body);
	font-weight: 600;
}

/* Eight segments: booked ones ink, the open ones that remain in brand blue. */
body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity p.ascend-budget-scarcity-meter::before {
	content: "";
	display: block;
	block-size: 22px;
	margin-block-end: 12px;
	background: linear-gradient(90deg, var(--ascend-home-ink) 0 calc(var(--ascend-budget-booked) * 12.5%), var(--ascend-home-blue) 0);
	-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(12.5% - 6px), transparent 0 12.5%);
	mask-image: repeating-linear-gradient(90deg, #000 0 calc(12.5% - 6px), transparent 0 12.5%);
}

/* Beside the booking form: the count, what it counts and the date only, so the button stays close. */
body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity--compact {
	margin-block-start: 28px;
	margin-block-end: 8px;
	padding-block: 22px;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity--compact > .wp-block-group__inner-container {
	grid-template-areas:
		"count title"
		"count note";
}

body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity--compact:not(:has(> .wp-block-group__inner-container)) {
	grid-template-areas:
		"count title"
		"count note";
}

@media (min-width: 1001px) {
	body.ascend-budget-template-active .ascend-home .ascend-home-hero .ascend-budget-scarcity > .wp-block-group__inner-container {
		grid-template-columns: max-content minmax(0, 1fr) minmax(0, 20rem);
		grid-template-areas:
			"count kicker meter"
			"count title meter"
			"count note meter";
		row-gap: 4px;
	}

	body.ascend-budget-template-active .ascend-home .ascend-home-hero .ascend-budget-scarcity:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: max-content minmax(0, 1fr) minmax(0, 20rem);
		grid-template-areas:
			"count kicker meter"
			"count title meter"
			"count note meter";
		row-gap: 4px;
	}

	body.ascend-budget-template-active .ascend-home .ascend-home-hero .ascend-budget-scarcity p.ascend-budget-scarcity-meter {
		margin-block-start: 0;
	}
}

/* The hero's photograph ends in a white fade; the first white section need not add a full band of air on top. */
body.ascend-budget-template-active .ascend-home .ascend-budget-why {
	padding-block-start: calc(var(--ascend-home-sec) * 0.5);
}

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

body.ascend-budget-template-active .ascend-home .ascend-budget-cards {
	margin-block-start: 72px;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-cards > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ascend-home-gap);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-cards:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ascend-home-gap);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-card {
	padding-block: 32px;
	padding-inline: 32px;
	border: 1px solid var(--ascend-home-line);
	border-radius: var(--ascend-home-radius);
	background: #fff;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-band--sky .ascend-budget-card {
	border-color: var(--ascend-home-line-sky);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-card h3,
body.ascend-budget-template-active .ascend-home .ascend-budget-step h3 {
	margin-block-end: 12px;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-card p,
body.ascend-budget-template-active .ascend-home .ascend-budget-step h3 + p {
	color: var(--ascend-home-ink-2);
}

body.ascend-budget-template-active .ascend-home p.ascend-budget-closing-line {
	max-width: 44em;
	margin-block-start: 64px;
	padding-inline-start: 24px;
	border-inline-start: 2px solid var(--ascend-home-blue);
	font-family: var(--ascend-home-display);
	font-size: var(--ascend-home-t-lead);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -0.012em;
}

body.ascend-budget-template-active .ascend-home p.ascend-budget-included {
	max-width: 60em;
	margin-block-start: 48px;
	color: var(--ascend-home-ink-2);
}

body.ascend-budget-template-active .ascend-home p.ascend-budget-included strong,
body.ascend-budget-template-active .ascend-home .ascend-budget-offer-body p strong {
	font-family: var(--ascend-home-display);
	font-weight: 600;
	color: var(--ascend-home-ink);
}

/* ------------------------------------------------------------ week steps */

body.ascend-budget-template-active .ascend-home .ascend-budget-steps {
	margin-block-start: 72px;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-steps > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--ascend-home-gap);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-steps:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--ascend-home-gap);
}

/* The top rule is the timeline; the dot marks each week's start on it. */
body.ascend-budget-template-active .ascend-home .ascend-budget-step {
	position: relative;
	padding-block-start: 32px;
	padding-inline-end: 24px;
	border-block-start: 2px solid var(--ascend-home-line);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-step::before {
	content: "";
	position: absolute;
	inset-block-start: -6px;
	inset-inline-start: 0;
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	background: var(--ascend-home-blue);
	box-shadow: 0 0 0 4px #fff;
}

body.ascend-budget-template-active .ascend-home p.ascend-budget-note {
	margin-block-start: 64px;
	padding-block: 24px;
	padding-inline: 28px;
	border-radius: var(--ascend-home-radius);
	background: var(--ascend-home-sky);
	font-family: var(--ascend-home-display);
	font-weight: 500;
	line-height: 1.5;
}

/* ------------------------------------------------------------------ offer */

body.ascend-budget-template-active .ascend-home .ascend-budget-offer-panel {
	padding-block: 56px;
	padding-inline: 56px;
	border-radius: var(--ascend-home-radius-lg);
	background: var(--ascend-home-sky);
}

/* The homepage's 12-column grid, for the offer panel and the FAQ. */
body.ascend-budget-template-active .ascend-home .ascend-budget-offer-panel > .wp-block-group__inner-container,
body.ascend-budget-template-active .ascend-home .ascend-budget-faq > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--ascend-home-gap);
	align-items: start;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-offer-panel:not(:has(> .wp-block-group__inner-container)),
body.ascend-budget-template-active .ascend-home .ascend-budget-faq:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--ascend-home-gap);
	align-items: start;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-offer-panel h2 {
	grid-column: 1 / 7;
	padding-block-start: 28px;
	border-block-start: 2px solid var(--ascend-home-blue);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-offer-panel h2 strong {
	font-weight: inherit;
	color: var(--ascend-home-blue-text);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-offer-body {
	grid-column: 8 / -1;
	padding-block-start: 30px;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-offer-body p {
	font-size: var(--ascend-home-t-lead);
	line-height: 1.5;
	color: var(--ascend-home-ink-2);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-offer-body p.ascend-budget-fine {
	font-size: var(--ascend-home-t-small);
	margin-block-start: 16px;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-offer-body .ascend-home-actions {
	margin-block-start: 32px;
}

/* ------------------------------------------------------------------ proof */

/* The homepage sets its results panel after the quotes; here it leads the section. */
body.ascend-budget-template-active .ascend-home .ascend-budget-proof .ascend-home-results {
	margin-block-start: 0;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-proof .ascend-home-results + .ascend-home-quote {
	margin-block-start: 72px;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-proof .ascend-home-row {
	margin-block-start: 72px;
}

/* -------------------------------------------------------------------- faq */

body.ascend-budget-template-active .ascend-home .ascend-budget-faq h2 {
	grid-column: 1 / 5;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-faq-list {
	grid-column: 6 / -1;
	border-block-end: 1px solid var(--ascend-home-line);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-faq-item {
	margin-block: 0;
	border-block-start: 1px solid var(--ascend-home-line);
}

/* Row padding sits on the summary so the whole row is the click target. */
body.ascend-budget-template-active .ascend-home .ascend-budget-faq-item summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding-block: 24px;
	cursor: pointer;
	list-style: none;
	font-family: var(--ascend-home-display);
	font-size: var(--ascend-home-t-body);
	font-weight: 600;
	line-height: 1.4;
	color: var(--ascend-home-ink);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-faq-item summary::-webkit-details-marker {
	display: none;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-faq-item summary::after {
	content: "+";
	/* Empty alternative text keeps the glyph out of the accessible name; older engines keep the line above. */
	content: "+" / "";
	flex: 0 0 auto;
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1;
	color: var(--ascend-home-blue-text);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-faq-item[open] summary::after {
	content: "\2212";
	content: "\2212" / "";
}

body.ascend-budget-template-active .ascend-home .ascend-budget-faq-item summary:hover {
	color: var(--ascend-home-blue-text);
}

body.ascend-budget-template-active .ascend-home .ascend-budget-faq-item summary:focus-visible {
	outline: 3px solid var(--ascend-home-blue-text);
	outline-offset: 3px;
	border-radius: 6px;
}

body.ascend-budget-template-active .ascend-home .ascend-budget-faq-item p {
	max-width: 44em;
	padding-block-end: 24px;
	color: var(--ascend-home-ink-2);
}

/* ---------------------------------------------------------------- contact */

body.ascend-budget-template-active .ascend-home .ascend-home-contact-copy .ascend-home-actions {
	margin-block-start: 40px;
}

/* ------------------------------------------------------ 1000 and narrower */

@media (max-width: 1000px) {
	body.ascend-budget-template-active .ascend-home .ascend-budget-cards > .wp-block-group__inner-container,
	body.ascend-budget-template-active .ascend-home .ascend-budget-steps > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr);
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-cards:not(:has(> .wp-block-group__inner-container)),
	body.ascend-budget-template-active .ascend-home .ascend-budget-steps:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: minmax(0, 1fr);
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-cards--six > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-cards--six:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The timeline turns vertical: a left rule with the dot at each week. */
	body.ascend-budget-template-active .ascend-home .ascend-budget-step {
		padding-block: 0 40px;
		padding-inline: 32px 0;
		border-block-start: 0;
		border-inline-start: 2px solid var(--ascend-home-line);
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-step::before {
		inset-block-start: 4px;
		inset-inline-start: -6px;
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-offer-panel h2,
	body.ascend-budget-template-active .ascend-home .ascend-budget-offer-body,
	body.ascend-budget-template-active .ascend-home .ascend-budget-faq h2,
	body.ascend-budget-template-active .ascend-home .ascend-budget-faq-list {
		grid-column: 1 / -1;
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-offer-body {
		padding-block-start: 28px;
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-faq h2 {
		margin-block-end: 32px;
	}
}

/* ------------------------------------------------------- 700 and narrower */

@media (max-width: 700px) {
	body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity {
		--ascend-budget-scarcity-gap: 20px;
		padding-block: 22px;
	}

	/* A wrapped text button keeps its underline on the words, not as a rule across the whole box. */
	body.ascend-budget-template-active .ascend-home .ascend-home-button--text .wp-block-button__link {
		display: inline;
		/* Inline padding grows the tap area and focus ring without moving the lines. */
		padding-block: 3px;
		border-bottom: 0;
		text-decoration: underline;
		text-decoration-thickness: 1.5px;
		text-underline-offset: 5px;
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-cards--six > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr);
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-cards--six:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: minmax(0, 1fr);
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-cards,
	body.ascend-budget-template-active .ascend-home .ascend-budget-steps {
		margin-block-start: 48px;
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-card {
		padding-block: 24px;
		padding-inline: 24px;
	}

	body.ascend-budget-template-active .ascend-home p.ascend-budget-closing-line,
	body.ascend-budget-template-active .ascend-home p.ascend-budget-note {
		margin-block-start: 48px;
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-offer-panel {
		padding-block: 32px;
		padding-inline: 20px;
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-proof .ascend-home-results + .ascend-home-quote,
	body.ascend-budget-template-active .ascend-home .ascend-budget-proof .ascend-home-row {
		margin-block-start: 48px;
	}
}

/* ------------------------------------------------------- 420 and narrower */

/* "Engagements" does not fit beside the count on the narrowest phones: one column. */
@media (max-width: 420px) {
	body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"kicker"
			"count"
			"title"
			"meter"
			"note";
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"kicker"
			"count"
			"title"
			"meter"
			"note";
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity--compact > .wp-block-group__inner-container {
		grid-template-areas:
			"count"
			"title"
			"note";
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity--compact:not(:has(> .wp-block-group__inner-container)) {
		grid-template-areas:
			"count"
			"title"
			"note";
	}

	body.ascend-budget-template-active .ascend-home .ascend-budget-scarcity p.ascend-budget-scarcity-count {
		padding-inline-end: 0;
		border-inline-end: 0;
	}
}