/**
 * Frontend styles for the additional price layouts (plans, items, bundles, compact, editions).
 *
 * Everything that sits on the card surface follows the theme design tokens, so
 * it adapts to the active color scheme in light and dark mode. The four accents
 * are mapped onto the shared content text palette (--elmur-ds-text-*).
 *
 * The card title band has a palette of its own (--band-tint / --band): by
 * default the light tint and accent of the approved layout draft in every
 * scheme, so the package colors read the same everywhere. A theme that wants
 * the band in its own colors sets the --elmur-ds-band-* tokens (per accent
 * --elmur-ds-band-<color> and --elmur-ds-band-<color>-tint, plus --elmur-ds-band-line,
 * --elmur-ds-band-on for the badge text and --elmur-ds-band-base for the tint of a
 * custom accent). Anything placed on the band uses --band, never --item.
 */

/* ==========================================================================
   Section
   ========================================================================== */

.elmur-ds-layout {
	--accent: var(--elmur-ds-text-blue, #1565c0);
	--surface: var(--color-bg-alt, #f8fafc);
	--line: var(--color-border, #e2e8f0);

	/* Title band palette: the layout draft unless the theme sets its tokens. */
	--band: var(--elmur-ds-band-blue, #3b82f6);
	--band-tint: var(--elmur-ds-band-blue-tint, #eff6ff);
	--band-line: var(--elmur-ds-band-line, #e2e8f0);
	--band-on: var(--elmur-ds-band-on, #ffffff);
	--band-base: var(--elmur-ds-band-base, #ffffff);

	/* Card shape from the layout draft. */
	--card-radius: 12px;
	--card-radius-sm: 8px;
	--card-shadow-flat: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.02);

	color: var(--color-text, #1a1a1a);
	font-family: inherit;
	margin: 3rem auto;
	max-width: var(--container-max, 80rem);
}

.elmur-ds-layout--green { --accent: var(--elmur-ds-text-green, #2e7d32); --band: var(--elmur-ds-band-green, #10b981); --band-tint: var(--elmur-ds-band-green-tint, #ecfdf5); }
.elmur-ds-layout--orange { --accent: var(--elmur-ds-text-orange, #e65100); --band: var(--elmur-ds-band-orange, #f59e0b); --band-tint: var(--elmur-ds-band-orange-tint, #fffbeb); }
.elmur-ds-layout--purple { --accent: var(--elmur-ds-text-purple, #6a1b9a); --band: var(--elmur-ds-band-purple, #8b5cf6); --band-tint: var(--elmur-ds-band-purple-tint, #f5f3ff); }
.elmur-ds-layout--neutral { --accent: var(--color-text-muted, #475569); --band: var(--elmur-ds-band-neutral, #64748b); --band-tint: var(--elmur-ds-band-neutral-tint, #f1f5f9); }

.elmur-ds-layout * { box-sizing: border-box; }

.elmur-ds-layout .elmur-ds-layout__heading {
	color: var(--color-text, #1a1a1a);
	margin: 0 0 var(--space-sm, 0.5rem);
	text-align: center;
}

.elmur-ds-layout .elmur-ds-layout__subheading {
	color: var(--color-text-muted, #6b6b6b);
	margin: 0 auto var(--space-lg, 2rem);
	max-width: 62ch;
	text-align: center;
}

/* Notice above the cards: the green check mark for what is included, the
   blue information icon for a condition or a hint. */
.elmur-ds-layout .elmur-ds-layout__intro {
	margin: 0 0 var(--space-lg, 2rem);
	text-align: center;
}

.elmur-ds-layout .elmur-ds-layout__intro-inner {
	align-items: center;
	border-radius: 50px;
	color: var(--color-text, #1a1a1a);
	display: inline-flex;
	font-size: 0.95rem;
	font-weight: 500;
	gap: 0.625rem;
	max-width: 70ch;
	text-align: left;
}

/* Frame and fill are switched separately, so the notice can be a pill, an
   outline, a tinted strip or a plain line. Padding follows the shape. */
.elmur-ds-layout--intro-border .elmur-ds-layout__intro-inner { border: 1px solid var(--line); }
.elmur-ds-layout--intro-fill .elmur-ds-layout__intro-inner { background: var(--surface); }

.elmur-ds-layout--intro-border .elmur-ds-layout__intro-inner,
.elmur-ds-layout--intro-fill .elmur-ds-layout__intro-inner { padding: 0.625rem 1.25rem; }

.elmur-ds-layout .elmur-ds-layout__intro-inner .elmur-ds-layout-icon {
	color: var(--elmur-ds-text-green, #10b981);
	flex: none;
	font-size: 1.15rem;
}

.elmur-ds-layout .elmur-ds-layout__intro--info .elmur-ds-layout__intro-inner .elmur-ds-layout-icon {
	color: var(--elmur-ds-text-blue, #1565c0);
}

.elmur-ds-layout .elmur-ds-layout__grid {
	align-items: stretch;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.elmur-ds-layout .elmur-ds-layout__info {
	align-items: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-md, 0.5rem);
	color: var(--color-text, #1a1a1a);
	display: flex;
	font-size: 0.9rem;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
}

.elmur-ds-layout .elmur-ds-layout__info .elmur-ds-layout-icon {
	color: var(--accent);
	flex: none;
	font-size: 1.25rem;
}

.elmur-ds-layout .elmur-ds-layout__footer {
	color: var(--color-text-muted, #6b6b6b);
	font-size: 0.85rem;
	margin-top: 1rem;
	text-align: center;
}

/* ==========================================================================
   Card - shared base
   ========================================================================== */

.elmur-ds-layout .elmur-ds-layout-card {
	--item: var(--accent);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow-flat);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	transition: border-color var(--transition-base, 250ms ease), box-shadow var(--transition-base, 250ms ease), transform var(--transition-base, 250ms ease);
}

/* A custom accent arrives as --item and --band on the card; the tint of the
   title band is mixed from it, so only one value has to be chosen. */
.elmur-ds-layout .elmur-ds-layout-card--custom { --band-tint: color-mix(in srgb, var(--band) 12%, var(--band-base)); }

/* Every palette accent has its own rule, so a card keeps its color whatever the color of its list. */
.elmur-ds-layout .elmur-ds-layout-card--blue { --item: var(--elmur-ds-text-blue, #1565c0); --band: var(--elmur-ds-band-blue, #3b82f6); --band-tint: var(--elmur-ds-band-blue-tint, #eff6ff); }
.elmur-ds-layout .elmur-ds-layout-card--green { --item: var(--elmur-ds-text-green, #2e7d32); --band: var(--elmur-ds-band-green, #10b981); --band-tint: var(--elmur-ds-band-green-tint, #ecfdf5); }
.elmur-ds-layout .elmur-ds-layout-card--orange { --item: var(--elmur-ds-text-orange, #e65100); --band: var(--elmur-ds-band-orange, #f59e0b); --band-tint: var(--elmur-ds-band-orange-tint, #fffbeb); }
.elmur-ds-layout .elmur-ds-layout-card--purple { --item: var(--elmur-ds-text-purple, #6a1b9a); --band: var(--elmur-ds-band-purple, #8b5cf6); --band-tint: var(--elmur-ds-band-purple-tint, #f5f3ff); }
.elmur-ds-layout .elmur-ds-layout-card--neutral { --item: var(--color-text-muted, #475569); --band: var(--elmur-ds-band-neutral, #64748b); --band-tint: var(--elmur-ds-band-neutral-tint, #f1f5f9); }

/* A card with a button opens as a whole: the button is its one link and its
   click area covers the card (stretched link), so keyboard and screen
   readers meet one link. Only such a card reacts to hover. */
.elmur-ds-layout .elmur-ds-layout-card > a::after {
	content: '';
	inset: 0;
	position: absolute;
}

.elmur-ds-layout .elmur-ds-layout-card > a:focus-visible { outline: none; }

.elmur-ds-layout .elmur-ds-layout-card--linked:focus-within {
	outline: 2px solid var(--item);
	outline-offset: 2px;
}

@media (hover: hover) {
	.elmur-ds-layout .elmur-ds-layout-card--linked:hover {
		border-color: var(--item);
		box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
	}

	.elmur-ds-layout .elmur-ds-layout-card--linked:hover > a {
		background: var(--item);
		color: var(--color-bg, #ffffff);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.elmur-ds-layout .elmur-ds-layout-card--linked:hover { transform: translateY(-0.25rem); }
}

.elmur-ds-layout .elmur-ds-layout-card--featured {
	border-color: var(--item);
	box-shadow: 0 0.625rem 1.875rem -0.3125rem color-mix(in srgb, var(--item) 15%, transparent);
}

/* Card title band: tint and accent of the band palette (see top). The band
   is its own element so the badge can sit on it and so no inherited heading
   margin can push it away from the card edge. */
.elmur-ds-layout .elmur-ds-layout-card__head {
	--head-top: 1.5rem;
	--head-bottom: 1.5rem;
	background: var(--band-tint);
	border-bottom: 1px solid var(--band-line);
	margin: 0;
	padding: var(--head-top) 1.125rem var(--head-bottom);
	position: relative;
	text-align: center;
}

.elmur-ds-layout .elmur-ds-layout-card__title {
	color: var(--tone, var(--band));
	font-size: calc(1.4rem * var(--scale, 1));
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	padding: 0;
}

/* A badge anywhere in the list raises every band by the same amount, so the
   cards stay level. Only the badged card shifts that room to the top to clear
   the tab; the others keep their title centred in the band. */
.elmur-ds-layout--has-badge .elmur-ds-layout-card__head {
	--head-top: 2rem;
	--head-bottom: 2rem;
}

.elmur-ds-layout--has-badge .elmur-ds-layout-card--badged .elmur-ds-layout-card__head {
	--head-top: 3rem;
	--head-bottom: 1rem;
}

.elmur-ds-layout .elmur-ds-layout-card__badge {
	background: var(--band);
	border-radius: 0 0 var(--card-radius-sm) var(--card-radius-sm);
	color: var(--band-on);
	font-size: 0.68rem;
	font-weight: 700;
	left: 50%;
	letter-spacing: 0.5px;
	line-height: 1.35;
	padding: 0.125rem 0.7rem;
	position: absolute;
	text-transform: uppercase;
	top: 0;
	transform: translateX(-50%);
}

/* Plain block instead of a flex column: the children are centred by the text
   alignment alone, which no inherited flex property can undo. */
.elmur-ds-layout .elmur-ds-layout-card__price {
	display: block;
	padding: 1.4rem 1rem 0.5rem;
	text-align: center;
}

.elmur-ds-layout .elmur-ds-layout-card__price strong {
	color: var(--tone, var(--color-text, #1a1a1a));
	display: block;
	font-size: calc(2rem * var(--scale, 1));
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 0.2rem;
	text-wrap: balance;
}

/* A text price such as "Individual quote" is set smaller, so that it wraps
   inside the reserved price area instead of pushing the divider down. */
.elmur-ds-layout .elmur-ds-layout-card__price--text strong { font-size: calc(1.4rem * var(--scale, 1)); }

/* Fixed height for the price area of the package cards, so the divider above
   the feature rows sits on one line across all cards of a list. */
.elmur-ds-layout--plans .elmur-ds-layout-card__price { min-height: 6.75rem; }

.elmur-ds-layout .elmur-ds-layout-card__price span {
	color: var(--tone, var(--color-text-muted, #6b6b6b));
	display: block;
	font-size: calc(0.85rem * var(--scale, 1));
}

/* Feature rows: icon left, label above value. */
.elmur-ds-layout .elmur-ds-layout-card ul {
	border-top: 1px solid var(--line);
	display: grid;
	gap: 0.9rem;
	list-style: none;
	margin: 0 1.25rem;
	padding: 1.1rem 0 1.4rem;
}

.elmur-ds-layout .elmur-ds-layout-card li {
	align-items: center;
	display: grid;
	gap: 0.7rem;
	grid-template-columns: auto 1fr;
}

.elmur-ds-layout .elmur-ds-layout-card li > .elmur-ds-layout-icon {
	color: var(--item);
	font-size: 1.3rem;
}

.elmur-ds-layout .elmur-ds-layout-card__row {
	display: grid;
	gap: 0.1rem;
}

.elmur-ds-layout .elmur-ds-layout-card__row-label {
	color: var(--tone, var(--color-text, #1a1a1a));
	font-size: calc(0.95rem * var(--scale, 1));
	font-weight: 600;
}

.elmur-ds-layout .elmur-ds-layout-card__row-value {
	color: var(--tone, var(--color-text-muted, #6b6b6b));
	font-size: calc(0.9rem * var(--scale, 1));
	font-weight: 500;
}

.elmur-ds-layout .elmur-ds-layout-card__note {
	color: var(--tone, var(--color-text-muted, #6b6b6b));
	font-size: calc(0.85rem * var(--scale, 1));
	line-height: 1.55;
	margin: 0;
}

.elmur-ds-layout .elmur-ds-layout-card > a {
	background: var(--surface);
	border: 1px solid var(--item);
	border-radius: var(--radius-md, 0.5rem);
	color: var(--item);
	font-weight: 600;
	margin: auto 1.25rem 1.4rem;
	padding: 0.7rem;
	text-align: center;
	text-decoration: none;
	transition: background var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease);
}

.elmur-ds-layout .elmur-ds-layout-card > a:hover,
.elmur-ds-layout .elmur-ds-layout-card > a:focus-visible {
	background: var(--item);
	color: var(--color-bg, #ffffff);
}

/* ==========================================================================
   Bundle cards - comparison metrics
   ========================================================================== */

.elmur-ds-layout .elmur-ds-layout-card__metrics {
	border-bottom: 1px solid var(--line);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
}

.elmur-ds-layout .elmur-ds-layout-card__metric {
	padding: 0.85rem 0.4rem;
	text-align: center;
}

.elmur-ds-layout .elmur-ds-layout-card__metric + .elmur-ds-layout-card__metric { border-left: 1px solid var(--line); }

.elmur-ds-layout .elmur-ds-layout-card__metric dt {
	color: var(--color-text-muted, #6b6b6b);
	font-size: 0.72rem;
}

.elmur-ds-layout .elmur-ds-layout-card__metric dd {
	color: var(--color-text, #1a1a1a);
	font-weight: 700;
	margin: 0.3rem 0 0;
}

.elmur-ds-layout .elmur-ds-layout-card__metric--package dd { font-size: 1.1rem; }
.elmur-ds-layout .elmur-ds-layout-card__metric--savings dd { color: var(--elmur-ds-text-green, #2e7d32); }

.elmur-ds-layout--bundles .elmur-ds-layout-card ul { border-top: 0; }

/* The note below the figures keeps the side margins of the rows below it. */
.elmur-ds-layout--bundles .elmur-ds-layout-card__note { padding: 0.9rem 1.25rem 0; }

/* The bundle title band is a touch smaller than the package one. */
.elmur-ds-layout--bundles .elmur-ds-layout-card__head { --head-top: 1.125rem; --head-bottom: 1.125rem; }
.elmur-ds-layout--bundles .elmur-ds-layout-card__title { font-size: 1.2rem; }

/* ==========================================================================
   Item and compact cards - icon on top, centered content
   ========================================================================== */

/* The width of an item card is the theme's (--elmur-ds-items-card-min, --elmur-ds-items-card-max): with a
   maximum, a list of few cards keeps the width of a full row's cards and
   stands centred. */
.elmur-ds-layout--items .elmur-ds-layout__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(var(--elmur-ds-items-card-min, 10.5rem), 100%), var(--elmur-ds-items-card-max, 1fr)));
	justify-content: center;
}

.elmur-ds-layout--compact .elmur-ds-layout__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr));
}

.elmur-ds-layout--items .elmur-ds-layout-card,
.elmur-ds-layout--compact .elmur-ds-layout-card {
	padding: 1.5rem 1.1rem;
	text-align: center;
}

.elmur-ds-layout--items .elmur-ds-layout-card > .elmur-ds-layout-icon,
.elmur-ds-layout--compact .elmur-ds-layout-card > .elmur-ds-layout-icon,
.elmur-ds-layout--items .elmur-ds-layout-card > .elmur-ds-layout-icon-badged,
.elmur-ds-layout--compact .elmur-ds-layout-card > .elmur-ds-layout-icon-badged {
	color: var(--item);
	display: block;
	font-size: 2.1rem;
	margin: 0 auto;
}

.elmur-ds-layout--items .elmur-ds-layout-card__title,
.elmur-ds-layout--compact .elmur-ds-layout-card__title { padding: 0.9rem 0 0; }

.elmur-ds-layout--items .elmur-ds-layout-card__title {
	color: var(--tone, var(--color-text, #1a1a1a));
	font-size: calc(1.05rem * var(--scale, 1));
}

.elmur-ds-layout--items .elmur-ds-layout-card__price,
.elmur-ds-layout--compact .elmur-ds-layout-card__price { padding: 0.8rem 0 0; }

.elmur-ds-layout--items .elmur-ds-layout-card__price strong,
.elmur-ds-layout--compact .elmur-ds-layout-card__price strong {
	font-size: calc(1.5rem * var(--scale, 1));
	margin-bottom: 0.15rem;
}

/* Details stay left-aligned so multi-line lists stay readable. */
.elmur-ds-layout--items .elmur-ds-layout-card__note {
	border-top: 1px solid var(--line);
	margin-top: 1rem;
	padding-top: 0.9rem;
	text-align: left;
}

.elmur-ds-layout--compact .elmur-ds-layout-card__title {
	color: var(--tone, var(--item));
	font-size: calc(1.5rem * var(--scale, 1));
	font-weight: 800;
}

.elmur-ds-layout--compact .elmur-ds-layout-card__note { margin-top: 0.6rem; }

/* The button of an item or compact card sits at its bottom edge. */
.elmur-ds-layout--items .elmur-ds-layout-card > a,
.elmur-ds-layout--compact .elmur-ds-layout-card > a { margin: auto 0 0; }

.elmur-ds-layout--items .elmur-ds-layout-card__note + a,
.elmur-ds-layout--compact .elmur-ds-layout-card__note + a { margin-top: 1.1rem; }

/* Icon, title, second line, price, note and button each stand on one line across a
   row of cards: the cards share the rows of the grid, so a title that wraps
   moves the prices of the whole row instead of its own card only. */
@supports (grid-template-rows: subgrid) {
	.elmur-ds-layout--items .elmur-ds-layout-card,
	.elmur-ds-layout--compact .elmur-ds-layout-card {
		display: grid;
		grid-row: span 6;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.elmur-ds-layout--items .elmur-ds-layout-card > .elmur-ds-layout-icon,
	.elmur-ds-layout--compact .elmur-ds-layout-card > .elmur-ds-layout-icon,
	.elmur-ds-layout--items .elmur-ds-layout-card > .elmur-ds-layout-icon-badged,
	.elmur-ds-layout--compact .elmur-ds-layout-card > .elmur-ds-layout-icon-badged { grid-row: 1; }

	.elmur-ds-layout--items .elmur-ds-layout-card__title,
	.elmur-ds-layout--compact .elmur-ds-layout-card__title { align-self: center; grid-row: 2; }

	.elmur-ds-layout--items .elmur-ds-layout-card__label,
	.elmur-ds-layout--compact .elmur-ds-layout-card__label { grid-row: 3; }

	.elmur-ds-layout--items .elmur-ds-layout-card__price,
	.elmur-ds-layout--compact .elmur-ds-layout-card__price { grid-row: 4; }

	.elmur-ds-layout--items .elmur-ds-layout-card__note,
	.elmur-ds-layout--compact .elmur-ds-layout-card__note { align-self: start; grid-row: 5; }

	.elmur-ds-layout--items .elmur-ds-layout-card > a,
	.elmur-ds-layout--compact .elmur-ds-layout-card > a { align-self: end; grid-row: 6; margin-top: 1.1rem; }
}

/* ==========================================================================
   Edition cards - one product in several editions, left aligned
   ========================================================================== */

/* A card keeps its width and the cards stand centred, so two editions do
   not stretch across the whole row. */
.elmur-ds-layout--editions .elmur-ds-layout__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 24rem));
	justify-content: center;
}

.elmur-ds-layout--editions .elmur-ds-layout-card { padding: 1.6rem 1.5rem 0; }

.elmur-ds-layout--editions .elmur-ds-layout-card > .elmur-ds-layout-icon,
.elmur-ds-layout--editions .elmur-ds-layout-card > .elmur-ds-layout-icon-badged {
	color: var(--item);
	font-size: 2.1rem;
	margin-bottom: 1.1rem;
}

/* The edition label as written, never transformed (client, 2026-11-01);
   on item and compact cards the second line below the title. */
.elmur-ds-layout .elmur-ds-layout-card__label {
	color: var(--color-text-muted, #6b6b6b);
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
}

.elmur-ds-layout--items .elmur-ds-layout-card__label,
.elmur-ds-layout--compact .elmur-ds-layout-card__label { margin-top: 0.15rem; }

.elmur-ds-layout--editions .elmur-ds-layout-card__title {
	color: var(--tone, var(--color-text, #1a1a1a));
	font-size: calc(1.35rem * var(--scale, 1));
	font-weight: 700;
	line-height: 1.25;
	margin: 0.3rem 0 0;
}

.elmur-ds-layout--editions .elmur-ds-layout-card__price {
	padding: 0.9rem 0 0;
	text-align: left;
}

.elmur-ds-layout--editions .elmur-ds-layout-card__price strong { font-size: calc(1.75rem * var(--scale, 1)); }

.elmur-ds-layout--editions .elmur-ds-layout-card__note {
	border-top: 1px solid var(--line);
	margin-top: 1.1rem;
	padding-top: 1rem;
}

.elmur-ds-layout--editions .elmur-ds-layout-card ul {
	border-top: 0;
	gap: 0.6rem;
	margin: 0;
	padding: 1rem 0 1.4rem;
}

.elmur-ds-layout--editions .elmur-ds-layout-card li > .elmur-ds-layout-icon { font-size: 1rem; }

.elmur-ds-layout--editions .elmur-ds-layout-card__row-label {
	font-size: calc(0.9rem * var(--scale, 1));
	font-weight: 500;
}

.elmur-ds-layout--editions .elmur-ds-layout-card > a { margin: auto 0 1.5rem; }

/* ==========================================================================
   Icons
   ========================================================================== */

.elmur-ds-layout-icon {
	fill: none;
	height: 1em;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 1em;
}

/* An icon with a small second one in its top right corner (the edition of a
   product); the disc behind the corner icon keeps both apart. */
.elmur-ds-layout-icon-badged {
	display: inline-block;
	height: 1em;
	position: relative;
	width: 1em;
}

.elmur-ds-layout-icon-badged > .elmur-ds-layout-icon { display: block; }

.elmur-ds-layout-icon-badged__corner {
	background: var(--surface, #ffffff);
	border-radius: 50%;
	display: flex;
	font-size: 0.55em;
	padding: 0.08em;
	position: absolute;
	right: -0.35em;
	top: -0.3em;
}

.elmur-ds-layout-icon-badged__corner .elmur-ds-layout-icon { stroke-width: 2.2; }

@media (max-width: 35rem) {
	.elmur-ds-layout { margin: 2rem auto; }
	.elmur-ds-layout__grid { gap: 1rem; }
}

/* ==========================================================================
   Per card formatting (alignment, color, size for title, price and text)
   ========================================================================== */

/* Palette of the card surface; the title band takes the band palette. */
.elmur-ds-layout .elmur-ds-layout-card {
	--c-accent: var(--item);
	--c-blue: var(--elmur-ds-text-blue, #1565c0);
	--c-green: var(--elmur-ds-text-green, #2e7d32);
	--c-orange: var(--elmur-ds-text-orange, #e65100);
	--c-purple: var(--elmur-ds-text-purple, #6a1b9a);
	--c-neutral: var(--color-text-muted, #6b6b6b);
}

.elmur-ds-layout .elmur-ds-layout-card__head {
	--c-accent: var(--band);
	--c-blue: var(--elmur-ds-band-blue, #3b82f6);
	--c-green: var(--elmur-ds-band-green, #10b981);
	--c-orange: var(--elmur-ds-band-orange, #f59e0b);
	--c-purple: var(--elmur-ds-band-purple, #8b5cf6);
	--c-neutral: var(--elmur-ds-band-neutral, #64748b);
}

.elmur-ds-layout .is-align-left { text-align: left; }
.elmur-ds-layout .is-align-center { text-align: center; }
.elmur-ds-layout .is-align-right { text-align: right; }

/* The modifier sets a tone that the element and its children pick up, so a
   more specific color rule further down cannot override the choice. */
.elmur-ds-layout .is-color-accent { --tone: var(--c-accent); }
.elmur-ds-layout .is-color-blue { --tone: var(--c-blue); }
.elmur-ds-layout .is-color-green { --tone: var(--c-green); }
.elmur-ds-layout .is-color-orange { --tone: var(--c-orange); }
.elmur-ds-layout .is-color-purple { --tone: var(--c-purple); }
.elmur-ds-layout .is-color-neutral { --tone: var(--c-neutral); }

/* Sizes scale the element, so the proportions inside it stay intact. */
.elmur-ds-layout .is-size-xs { --scale: 0.75; }
.elmur-ds-layout .is-size-s { --scale: 0.875; }
.elmur-ds-layout .is-size-l { --scale: 1.15; }
.elmur-ds-layout .is-size-xl { --scale: 1.35; }

/* Bundle card: the line below the package price ("per month plus base package"). */
.elmur-ds-layout .elmur-ds-layout-card__metric-period {
	display: block;
	font-size: 0.75em;
	font-weight: 400;
	color: var(--color-text-muted, #64748b);
}