:root {

	/* ── Border Radius ──────────────────────────────────────────────────────── */

	--bdr-rds: 1.111rem; /* { min: 0,  max: 5, step: 0.1, friendly: 'Border Radius', group: 'Calculations' } */
	--bdr-tl-rds: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Border Radius - Top Left Corner', group: 'Calculations' } */
	--bdr-tr-rds: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Border Radius - Top Right Corner', group: 'Calculations' } */
	--bdr-br-rds: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Border Radius - Bottom Right Corner', group: 'Calculations' } */
	--bdr-bl-rds: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Border Radius - Bottom Left Corner', group: 'Calculations' } */

	/* ── Card Border Radius ─────────────────────────────────────────────────── */

	--bdr-rds-crd: .89rem; /* { min: 0,  max: 5, step: 0.1, friendly: 'Card Border Radius', group: 'Calculations' } */
	--bdr-tl-rds-crd: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Card Border Radius - Top Left Corner', group: 'Calculations' } */
	--bdr-tr-rds-crd: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Card Border Radius - Top Right Corner', group: 'Calculations' } */
	--bdr-br-rds-crd: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Card Border Radius - Bottom Right Corner', group: 'Calculations' } */
	--bdr-bl-rds-crd: 1; /* { min: 0,  max: 1, step: 0.25, friendly: 'Card Border Radius - Bottom Left Corner', group: 'Calculations' } */

	/* ── Box Shadow ─────────────────────────────────────────────────────────── */

	--bx-sdw-x: 0em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Box Shadow \'X\' Position', group: 'Box Shadow' } */
	--bx-sdw-y: 0.875em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Box Shadow \'Y\' Position', group: 'Box Shadow' } */
	--bx-sdw-blr: 1.5em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Box Shadow Blur', group: 'Box Shadow' } */
	--bx-sdw-o: 0.2; /* { min: 0,  max: 1, step: 0.05, friendly: 'Box Shadow Opacity', group: 'Box Shadow' } */

	--bx-sdw-dsk-x: 0em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Desktop Only Box Shadow \'X\' Position', group: 'Box Shadow' } */
	--bx-sdw-dsk-y: 0.4em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Desktop Only Box Shadow \'Y\' Position', group: 'Box Shadow' } */
	--bx-sdw-dsk-blr: 1.333em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Desktop Only Box Shadow Blur', group: 'Box Shadow' } */
	--bx-sdw-dsk-o: 0.2; /* { min: 0,  max: 1, step: 0.05, friendly: 'Desktop Only Box Shadow Opacity', group: 'Box Shadow' } */

	/* ── Card Box Shadow ────────────────────────────────────────────────────── */

	--bx-sdw-crd-x: 0.2em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Card Box Shadow \'X\' Position', group: 'Box Shadow' } */
	--bx-sdw-crd-y: 0.2em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Card Box Shadow \'Y\' Position', group: 'Box Shadow' } */
	--bx-sdw-crd-blr: 0.5em; /* { min: 0,  max: 4, step: 0.1, friendly: 'Card Box Shadow Blur', group: 'Box Shadow' } */
	--bx-sdw-crd-o: 0; /* { min: 0,  max: 1, step: 0.05, friendly: 'Card Box Shadow Opacity', group: 'Box Shadow' } */

	/* ── Button V1 Padding ──────────────────────────────────────────────────── */

	--btn-v1-pd-t: 0.889rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Top' } */
	--btn-v1-pd-b: 0.889rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Bottom' } */
	--btn-v1-pd-l: 1.667rem; /* { min: 0.5, max: 4, step: 0.1, friendly: 'Button V1 Padding Left' } */
	--btn-v1-pd-r: 1.667rem; /* { min: 0.5, max: 4, step: 0.1, friendly: 'Button V1 Padding Right' } */
	--btn-v1-pd: var(--btn-v1-pd-t) var(--btn-v1-pd-r) var(--btn-v1-pd-b) var(--btn-v1-pd-l); /* { readonly: true } */

	/* ── Button V1 Border Radius ────────────────────────────────────────────── */

	--btn-v1-bdr-rds-tl: 3.125rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V1 Border Radius Top Left' } */
	--btn-v1-bdr-rds-tr: 3.125rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V1 Border Radius Top Right' } */
	--btn-v1-bdr-rds-br: 3.125rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V1 Border Radius Bottom Right' } */
	--btn-v1-bdr-rds-bl: 3.125rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V1 Border Radius Bottom Left' } */
	--btn-v1-bdr-rds: var(--btn-v1-bdr-rds-tl) var(--btn-v1-bdr-rds-tr) var(--btn-v1-bdr-rds-br) var(--btn-v1-bdr-rds-bl); /* { readonly: true } */

	/* ── Button V1 Box Shadow ───────────────────────────────────────────────── */

	--btn-v1-bx-sdw-x: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Box Shadow \'X\' Position' } */
	--btn-v1-bx-sdw-y: 0.25rem; /* { min: 0, max: 2, step: 0.05, friendly: 'Button V1 Box Shadow \'Y\' Position' } */
	--btn-v1-bx-sdw-blr: 0.875rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Button V1 Box Shadow Blur' } */
	--btn-v1-bx-sdw-o: 0; /* { min: 0, max: 1, step: 0.05, friendly: 'Button V1 Box Shadow Opacity' } */

	/* ── Button V1 Border (Alt Variant) ─────────────────────────────────────── */

	--btn-v1-bdr-w: 2px; /* { min: 1, max: 3, step: 0.1, friendly: 'Button V1 Border Width' } */
	--btn-v1-bdr-stl: solid; /* { friendly: 'Button V1 Border Style' } */

	/* ── Button V2 Padding ──────────────────────────────────────────────────── */

	--btn-v2-pd-t: 0.889rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Top'  } */
	--btn-v2-pd-b: 0.889rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Bottom'  } */
	--btn-v2-pd-l: 1.667rem; /* { min: 0.5, max: 4, step: 0.1, friendly: 'Button V2 Padding Left'  } */
	--btn-v2-pd-r: 1.667rem; /* { min: 0.5, max: 4, step: 0.1, friendly: 'Button V2 Padding Right'  } */
	--btn-v2-pd: var(--btn-v2-pd-t) var(--btn-v2-pd-r) var(--btn-v2-pd-b) var(--btn-v2-pd-l); /* { readonly: true  } */

	/* ── Button V2 Border Radius ────────────────────────────────────────────── */

	--btn-v2-bdr-rds-tl: 3.125rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Top Left'  } */
	--btn-v2-bdr-rds-tr: 3.125rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Top Right'  } */
	--btn-v2-bdr-rds-br: 3.125rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Bottom Right'  } */
	--btn-v2-bdr-rds-bl: 3.125rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Bottom Left'  } */
	--btn-v2-bdr-rds: var(--btn-v2-bdr-rds-tl) var(--btn-v2-bdr-rds-tr) var(--btn-v2-bdr-rds-br) var(--btn-v2-bdr-rds-bl); /* { readonly: true  } */

	/* ── Button V2 Box Shadow ───────────────────────────────────────────────── */

	--btn-v2-bx-sdw-x: 0rem; /* { min: 0,  max: 2, step: 0.1, friendly: 'Button V2 Box Shadow \'X\' Position' } */
	--btn-v2-bx-sdw-y: 0.25rem; /* { min: 0,  max: 2, step: 0.05, friendly: 'Button V2 Box Shadow \'Y\' Position' } */
	--btn-v2-bx-sdw-blr: 0.875rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Button V2 Box Shadow Blur' } */
	--btn-v2-bx-sdw-o: 0; /* { min: 0, max: 1, step: 0.05, friendly: 'Button V2 Box Shadow Opacity' } */

	--btn-v2-bdr-w: 2px; /* { min: 1, max: 3, step: 0.1, friendly: 'Button V2 Border Width'  } */
	--btn-v2-bdr-stl: solid; /* { friendly: 'Button V2 Border Style'  } */

	/* ── Button Transitions ─────────────────────────────────────────────────── */

	--btn-trn-sp: 0.3s; /* { min: 0, max: 1, step: 0.05, friendly: 'Button Transition Speed' } */
	--btn-trn-tf: ease; /* { friendly: 'Button Transition Timing Function' } */

	/* ── Flair (Shapes & Decorative) ────────────────────────────────────────── */

	--flr-bx-w: 48; /* { min: 100, max: 800, step: 1, friendly: 'Flair Width Desktop', group: 'Shapes & Decorative' } */
	--flr-bx-w-mbl: 54; /* { min: 100, max: 600, step: 1, friendly: 'Flair Width Mobile', group: 'Shapes & Decorative' } */
	--flr-bx-w-clc: calc((var(--flr-bx-w-mbl) * 1px) + (var(--flr-bx-w) - var(--flr-bx-w-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */
	--flr-mrg-tp: 0rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Flair Margin Top', group: 'Shapes & Decorative' } */
	--flr-mrg-bt: 1rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Flair Margin Bottom', group: 'Shapes & Decorative' } */
	--flr-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 11' fill='none'><path fill='black' d='M23.013 4.31724L19.5685 14.3761H3.4445L0 4.31724L6.93544 8.12925L11.5065 0L16.0775 8.13005L23.013 4.31804V4.31724Z'/></svg>"); /* { friendly: 'Flair Mask Image (Data URI)', group: 'Shapes & Decorative' } */

	/* ── Containers & Cards Border ──────────────────────────────────────────── */

	--bg-bx-bdr-thc: 4px; /* { min: 1, max: 20, step: 1, friendly: 'BG Box Border Width' } */
	--bg-bx-bdr-clr-o: 1; /* { min: 0.1, max: 1, step: 0.1, friendly: 'BG Box Border Opacity' } */
	--crd-bdr-w: 1px; /* { min: 1, max: 4, step: 1, friendly: 'Card Border Width', group: 'Containers & Cards Border' } */

	/* ── Dividers & Separators ──────────────────────────────────────────────── */

	--bdr-stl: solid; /* { friendly: 'Border Style', group: 'Borders' } */
	--bdr-w: 1px; /* { min: 1, max: 4, step: 1, friendly: 'Border Width', group: 'Borders' } */
	--bdr-clr-o: 0.3; /* { min: 0.05, max: 1, step: 0.05, friendly: 'Border Opacity', group: 'Borders' } */

}

[class*="fnt_"] {
	em {
		font-style: normal;
		color: var(--fnt-t-k);
	}
}

[data-colors*="-dark"] {
	.fnt_t-k {
		--title-color: var(--fnt-t-1);

	}

}

body {
	font-feature-settings: 'liga' off, 'clig' off;
}

/* ── Bottom Decoration (wave divider) ──────────────────────────────────── */

.btm-deco {
	position: absolute;
	bottom: -1px;
	z-index: 0;
	width: 100%;

	svg {
		width: 100%;
		height: 18.722rem;
		display: block;
	}

	@media screen and (max-width: 1279px) {
		margin-top: 2rem;
	}
}

/* Match the bottom-decoration shape to the next panel's background so the wave
   merges into it instead of reading as an accent stripe. */
section:has(> .btm-deco) {
	&:has(+ section[data-colors="primary-light"])   { --shape-clr-1-dyn: var(--lt-bg); }
	&:has(+ section[data-colors="alternate-light"]) { --shape-clr-1-dyn: var(--lt-alt-bg); }
	&:has(+ section[data-colors="primary-dark"])    { --shape-clr-1-dyn: var(--dk-bg); }
	&:has(+ section[data-colors="alternate-dark"])  { --shape-clr-1-dyn: var(--dk-alt-bg); }
}

/* When the btm-deco panel is the last thing in <main>, its visual neighbor is
   the first section of <footer>. Must set the var directly on the section
   (the @scope rule in color-structure.css sets --shape-clr-1-dyn on the
   section element itself, so a value set on a parent like <form> would be
   shadowed). Two paired selectors handle "section is direct last-child of
   main" and "section is wrapped (e.g. in <form>) as main's last-child". */
main:has(+ footer section[data-colors="primary-light"]:first-of-type)   > section:last-child:has(> .btm-deco),
main:has(+ footer section[data-colors="primary-light"]:first-of-type)   > :last-child section:has(> .btm-deco)   { --shape-clr-1-dyn: var(--lt-bg); }
main:has(+ footer section[data-colors="alternate-light"]:first-of-type) > section:last-child:has(> .btm-deco),
main:has(+ footer section[data-colors="alternate-light"]:first-of-type) > :last-child section:has(> .btm-deco)   { --shape-clr-1-dyn: var(--lt-alt-bg); }
main:has(+ footer section[data-colors="primary-dark"]:first-of-type)    > section:last-child:has(> .btm-deco),
main:has(+ footer section[data-colors="primary-dark"]:first-of-type)    > :last-child section:has(> .btm-deco)   { --shape-clr-1-dyn: var(--dk-bg); }
main:has(+ footer section[data-colors="alternate-dark"]:first-of-type)  > section:last-child:has(> .btm-deco),
main:has(+ footer section[data-colors="alternate-dark"]:first-of-type)  > :last-child section:has(> .btm-deco)   { --shape-clr-1-dyn: var(--dk-alt-bg); }

/* ── Wave Banner Decoration (banner wave divider) ──────────────────────── */

.wv-bnr {
	--wv-bnr-grad-start: var(--background);
	--wv-bnr-grad-end: var(--inner-theme);

	pointer-events: none;

	svg {
		width: 100%;
		height: 100%;
		display: block;
	}

	.wv-bnr-stop-start {
		stop-color: var(--wv-bnr-grad-start);
	}

	.wv-bnr-stop-end {
		stop-color: var(--wv-bnr-grad-end);
	}
}

/* Content Info Callout */
.cnt-info {
	border-radius: 1.25rem;
	padding: 2.5rem 3.125rem;
	text-align: center;

	p {
		margin: 0;
		font-weight: 600;
		line-height: 1.75;
	}

	@media screen and (max-width: 699px) {
		padding: 1.5rem;
	}
}

/* Bullet Styles */
.cnt-stl {
	ul.spl-lst li {
		padding-left: 2.75rem;
		line-height: 1.7;
	}

	ul {
		li {
			&::before {
				left: 0;
				top: 0.35em;
				width: 1.4375rem;
				height: 1.4rem;
				background-color: currentColor;
				color: var(--blt-clr);
				mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'><g clip-path='url(%23clip0_9002_5668)'><path d='M25.4317 47C25.2122 47 24.9876 46.9561 24.7732 46.8659C23.9211 46.5022 23.5261 45.5197 23.8876 44.6686C23.934 44.5577 26.4078 38.5386 25.4085 30.6136C24.0657 19.9833 17.4115 11.0706 5.63419 4.12302C4.8363 3.65108 4.57033 2.62467 5.04287 1.82779C5.51283 1.02833 6.54053 0.762701 7.33842 1.23206C23.2653 10.6244 27.7789 22.2579 28.7601 30.3634C29.8266 39.1807 27.092 45.7054 26.9758 45.9787C26.7047 46.6157 26.0824 46.9974 25.4317 46.9974V47Z' fill='black'/><path d='M19.3998 23.6531C18.7775 23.6531 18.181 23.3075 17.8892 22.7118C17.8298 22.5932 13.045 13.1131 1.02761 8.08424C0.172914 7.72578 -0.229905 6.74321 0.129017 5.88959C0.487939 5.03597 1.47175 4.63366 2.32645 4.99213C15.5782 10.5394 20.696 20.8086 20.9078 21.2444C21.3132 22.0774 20.9646 23.0806 20.1331 23.4855C19.8955 23.599 19.6477 23.6557 19.3998 23.6557V23.6531Z' fill='black'/><path d='M22.5682 47C21.9174 47 21.2951 46.6184 21.024 45.9814C20.9078 45.708 18.1733 39.1834 19.2397 30.3661C20.221 22.2606 24.732 10.6271 40.6614 1.23471C41.4593 0.762773 42.4896 1.0284 42.9596 1.82528C43.4321 2.62217 43.1661 3.65115 42.3683 4.12051C30.529 11.1042 23.867 20.0685 22.5733 30.7684C21.6127 38.7037 24.0865 44.6068 24.1123 44.6661C24.4764 45.5172 24.0813 46.5023 23.2266 46.8659C23.0123 46.9588 22.7876 47 22.5682 47Z' fill='black'/><path d='M28.5977 23.6505C28.3498 23.6505 28.0993 23.5964 27.8643 23.4803C27.0329 23.0754 26.6869 22.0748 27.0897 21.2444C27.3014 20.8086 32.4193 10.5394 45.671 4.99213C46.5283 4.63366 47.5095 5.03597 47.8684 5.88959C48.2273 6.74321 47.8245 7.72578 46.9698 8.08424C34.9369 13.1209 30.1547 22.6164 30.1082 22.7118C29.8164 23.305 29.22 23.6505 28.5977 23.6505Z' fill='black'/></g><defs><clipPath id='clip0_9002_5668'><rect width='48' height='46' fill='white' transform='translate(0 1)'/></clipPath></defs></svg>");
				-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'><g clip-path='url(%23clip0_9002_5668)'><path d='M25.4317 47C25.2122 47 24.9876 46.9561 24.7732 46.8659C23.9211 46.5022 23.5261 45.5197 23.8876 44.6686C23.934 44.5577 26.4078 38.5386 25.4085 30.6136C24.0657 19.9833 17.4115 11.0706 5.63419 4.12302C4.8363 3.65108 4.57033 2.62467 5.04287 1.82779C5.51283 1.02833 6.54053 0.762701 7.33842 1.23206C23.2653 10.6244 27.7789 22.2579 28.7601 30.3634C29.8266 39.1807 27.092 45.7054 26.9758 45.9787C26.7047 46.6157 26.0824 46.9974 25.4317 46.9974V47Z' fill='black'/><path d='M19.3998 23.6531C18.7775 23.6531 18.181 23.3075 17.8892 22.7118C17.8298 22.5932 13.045 13.1131 1.02761 8.08424C0.172914 7.72578 -0.229905 6.74321 0.129017 5.88959C0.487939 5.03597 1.47175 4.63366 2.32645 4.99213C15.5782 10.5394 20.696 20.8086 20.9078 21.2444C21.3132 22.0774 20.9646 23.0806 20.1331 23.4855C19.8955 23.599 19.6477 23.6557 19.3998 23.6557V23.6531Z' fill='black'/><path d='M22.5682 47C21.9174 47 21.2951 46.6184 21.024 45.9814C20.9078 45.708 18.1733 39.1834 19.2397 30.3661C20.221 22.2606 24.732 10.6271 40.6614 1.23471C41.4593 0.762773 42.4896 1.0284 42.9596 1.82528C43.4321 2.62217 43.1661 3.65115 42.3683 4.12051C30.529 11.1042 23.867 20.0685 22.5733 30.7684C21.6127 38.7037 24.0865 44.6068 24.1123 44.6661C24.4764 45.5172 24.0813 46.5023 23.2266 46.8659C23.0123 46.9588 22.7876 47 22.5682 47Z' fill='black'/><path d='M28.5977 23.6505C28.3498 23.6505 28.0993 23.5964 27.8643 23.4803C27.0329 23.0754 26.6869 22.0748 27.0897 21.2444C27.3014 20.8086 32.4193 10.5394 45.671 4.99213C46.5283 4.63366 47.5095 5.03597 47.8684 5.88959C48.2273 6.74321 47.8245 7.72578 46.9698 8.08424C34.9369 13.1209 30.1547 22.6164 30.1082 22.7118C29.8164 23.305 29.22 23.6505 28.5977 23.6505Z' fill='black'/></g><defs><clipPath id='clip0_9002_5668'><rect width='48' height='46' fill='white' transform='translate(0 1)'/></clipPath></defs></svg>");
				mask-repeat: no-repeat;
				-webkit-mask-repeat: no-repeat;
				mask-size: contain;
				-webkit-mask-size: contain;
			}
		}
	}
}

/* Coupon Styles */

*:has( > .cpn-itm ) {
	container-type: inline-size;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		inset: calc(-1 * var(--cpn-udr-o)) var(--cpn-udr-s);
		background: var(--cpn-udr-clr, #ffce34);
		border-radius: var(--bdr-rds, 1rem);
		z-index: 0;
	}
}
.bg-bx:has(.bg-bx) { --cpn-ntch-bg: var(--inner-theme); }
.cpn-ntch {
	position: absolute;
	top: var(--cpn-ntch-y);
	left: calc(-1 * var(--pd-h) );
	pointer-events: none;
	z-index: 2;
	width: calc(100% + (var(--pd-h) * 2));
	--bdr-stl: dashed;
	--bdr-w: 2px;

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 0;
		translate: 0 -50%;
		width: calc(var(--cpn-ntch-r) * 2);
		height: calc(var(--cpn-ntch-r) * 2);
		border-radius: 50%;
		background-color: var(--cpn-ntch-bg, var(--main-bg));
	}

	&::before {
		left: calc(-1.1 * var(--cpn-ntch-r));
	}

	&::after {
		right: calc(-1.1 * var(--cpn-ntch-r));
	}
}

ul:has(.cpn-itm) {
	padding-top: var(--cpn-v1-lgo-ovlp, 5.5rem);
    padding-bottom: 1.8rem;
}

li:has(.cpn-itm) {
	flex-shrink: 0;
	position: relative;
	overflow: visible;


	/* Yellow rotated blob behind each card */
	&::before {
		content: '';
		position: absolute;
		inset: -1% 8% -2% 3%;
		background-color: var(--buttons);
		border-radius: var(--bdr-rds);
		transform: rotate(-5.5deg);
		z-index: 0;
	}

	
}

.cpn-itm {
	position: relative;
	z-index: 1;
	padding: var(--cpn-bdr-pd);

	&::after {
		content: '';
		position: absolute;
		inset: var(--cpn-bdr-pd);
		z-index: 1;
		border-width: var(--cpn-bdr-w);
		border-style: var(--cpn-bdr-s);
		border-radius: inherit;
		pointer-events: none;
	}

	 .lgo {
        margin-top: calc(var(--cpn-v1-lgo-ovlp, 5.5rem) * -1);
        position: relative;
        z-index: 2;
    }
		
	&.no-bg:after {
		inset: 0;
	}
	
	.act .icn {
		font-size: var(--cpn-act-icn-s);
	}
	
	.lgo {
		display: var(--cpn-lg-dsp);
		max-width: var(--cpn-lg-mx-wd-clc);
		margin-inline: auto;
	}
	
	.icn.ft {
		position: absolute;
		top: 0;
		left: 50%;
		translate: -50%;
		font-size: 2rem;
	}
	
	&.no-bg {
		padding: var(--cpn-bdr-pd);
		
		&::after {
			inset: 0;
		}
	}
	
}

@media print {
	header,
	footer {
		display: none;
		visibility: hidden;
	}
}

@container (width > 900px) {
	.cpn-itm .pd_v {
		--pd-v: clamp(calc(var(--sp-vp-min) * 0.5), var(--sp-vp), calc(var(--sp-vp-max) * 0.5) );
	}
	
	.cpn-itm div.cpn-lyt {
		text-align: left;
		display: grid;
		column-gap: var(--flx-gap);
		grid-template-columns: calc(50% - var(--cpn-ttl-w)) 1fr;
		grid-template-areas:
			'prc ttl'
			'prc dsc'
			'prc dsc'
			'act dsc'
			'act dt'
			'act dis';
			
		&:after {
			content: "";
			position: absolute;
			top: 50%;
			height: 100%;
			width: var(--bdr-w);
			left: calc( 50% - var(--cpn-ttl-w) + ( var(--flx-gap) * 0.5 ) );
			background-color: hsl(from var(--text-color) h s l / 0.5);
			transform: translateY(-50%);
		}
			
		.prc {
			grid-area: prc;
			text-align: center;
			align-self: center;
			
			&:nth-last-child(6) {
				align-self:flex-end;
			}
		}
		
		.ttl {
			grid-area: ttl;
			margin-top: 0;
		}
	
		.dsc {
			grid-area: dsc;
		}
		
		.dt {
			grid-area: dt;
		}
		
		.dis {
			grid-area: dis;
		}
			
		.act {
			grid-area: act;
			justify-content: center;
			
			
			
		}
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(3) {
		grid-template-areas:
			'prc ttl'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(4):has( .dsc ) {
		grid-template-areas:
			'prc ttl'
			'prc dsc'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(4):has( .dt ) {
		grid-template-areas:
			'prc ttl'
			'prc dt'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(4):has( .dis ) {
		grid-template-areas:
			'prc ttl'
			'prc dis'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(5):has( .dis ) {
		grid-template-areas:
			'prc ttl'
			'prc dt'
			'prc dis'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(5):has( .dsc ) {
		grid-template-areas:
			'prc ttl'
			'prc dsc'
			'prc dt'
			'prc act';
	}
	
	.cpn-itm > .cpn-lyt .act:nth-child(5):not( :has( .dt ) ) {
		grid-template-areas:
			'prc ttl'
			'prc dsc'
			'prc dis'
			'prc act';
	}
}