: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: 0.525rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V1 Border Radius Top Left' } */
	--btn-v1-bdr-rds-tr: 0.525rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V1 Border Radius Top Right' } */
	--btn-v1-bdr-rds-br: 0.525rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V1 Border Radius Bottom Right' } */
	--btn-v1-bdr-rds-bl: 0.525rem; /* { 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: 0.525rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Top Left'  } */
	--btn-v2-bdr-rds-tr: 0.525rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Top Right'  } */
	--btn-v2-bdr-rds-br: 0.525rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Button V2 Border Radius Bottom Right'  } */
	--btn-v2-bdr-rds-bl: 0.525rem; /* { 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: 64; /* { 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.6lh;
				transform: translateY(-50%);
				width: 1.4375rem;
				height: 1.4rem;
				background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 158' fill='none'><path d='M51.3031 72.6737C38.7487 56.8543 36.8596 34.4024 46.7811 17.0145C52.9839 6.13956 60.3172 5.9603 60.1833 1.47888L52.4484 1.6432C20.3635 7.17029 16.8828 35.1642 14.0566 38.4656C13.4913 39.1378 11.8997 39.332 11.4832 38.8689C9.80236 36.9568 11.4088 31.7733 10.0404 31.5492C5.14655 30.7575 -5.86081 55.719 7.70501 75.5568C4.17968 76.9908 2.08234 74.4514 1.0411 74.78C-0.193509 75.1684 -0.297633 78.0963 0.475857 78.9776C3.51032 90.6891 13.9376 99.8162 25.9415 102.52C27.2951 102.834 27.667 104.701 27.2803 105.284C26.358 106.688 24.0375 106.449 20.6461 106.568C15.4845 106.733 23.8442 117.144 40.4147 116.711L61.1204 116.188C63.2624 116.129 63.9615 114.62 64.3036 113.29C66.4456 104.955 75.6531 99.9059 83.5219 97.4859C85.5449 92.631 64.7945 89.6882 51.3031 72.6737Z' fill='%23084774'/><path d='M98.7836 40.1984C98.3522 39.8249 98.5753 38.5851 98.4266 38.0323C98.2183 37.2705 96.6862 36.8821 96.1953 37.3452C95.2285 38.2863 95.3177 39.795 95.3921 41.1395C95.6003 44.6499 94.5145 46.8906 91.4503 48.0259C89.5314 47.1744 87.1366 47.1744 85.069 46.2184C85.1582 43.3354 84.236 40.2133 82.1684 37.2705C78.4943 40.7063 78.5389 45.5611 80.6363 49.5347C82.3618 52.8061 79.1637 56.0925 79.5951 58.4377L83.7451 80.6955C84.2806 83.5487 83.5815 86.9247 85.545 88.4633C87.5828 90.0617 90.8404 90.0019 92.9378 89.3596C96.6267 88.2243 95.3772 83.8175 96.0168 80.9195C98.4414 69.8803 101.788 60.0062 98.4117 51.9247C98.0696 49.0118 103.216 44.0972 98.7687 40.2133L98.7836 40.1984Z' fill='%23084774'/><path d='M114.819 119.251C110.014 119.28 105.581 118.354 99.7653 119.609C104.719 126.854 96.0615 132.366 85.8276 136.728C84.4591 137.789 83.0609 139.865 80.9338 140.776C77.5572 142.21 76.2036 146.991 76.2631 150.113C76.3375 154.624 79.3273 156.611 83.8195 157.193L83.522 148.201C88.6538 145.258 93.4286 142.031 98.3522 140.552C107.009 137.938 117.66 129.08 114.833 119.251H114.819Z' fill='%2318537D'/><path d='M102.517 143.958C101.312 142.838 98.8877 143.585 98.1886 143.943C92.6552 145.706 99.2447 149.426 94.4104 155.983C93.8452 156.745 96.1656 158.388 97.0135 157.91C99.572 156.924 102.101 154.968 103.068 153.056C104.481 150.247 104.644 145.93 102.517 143.973V143.958Z' fill='%2336BDEE'/><path d='M119.876 0C119.088 1.74775 119.995 3.74946 121.691 4.85487C134.067 12.9214 139.065 25.9773 139.184 40.3477C139.318 56.9738 132.847 72.4347 119.058 81.9802C107.56 89.9272 95.6452 96.8435 82.6 99.7415C82.6 99.7415 67.4277 105.612 65.9254 114.978C65.7469 116.084 65.8064 116.935 66.0295 117.563C65.9849 118.28 65.851 118.952 65.5684 119.355C65.5684 125.017 65.8064 127.9 68.2607 130.663C71.2952 133.188 73.69 136.25 77.6169 137.654C80.5175 137.117 83.1206 135.369 83.7156 132.351C81.6926 130.529 80.2349 127.885 79.0449 125.644C78.1227 120.655 82.481 120.207 83.9239 116.711C96.1361 114.47 108.69 114.157 120.977 116.024C128.816 117.219 138.202 116.577 145.863 116.457C146.547 115.128 147.975 114.963 149.18 114.993C152.794 115.068 160.708 110.079 160.827 109.586C161.109 108.346 160.261 107.121 159.413 106.822C156.201 105.672 153.077 107.181 151.961 105.313C149.849 101.758 160.663 102.206 169.32 95.4991C169.543 93.5572 170.956 92.2725 172.801 92.1231C174.63 88.7023 178.721 84.9678 179.167 80.7702C179.375 78.8581 180.372 77.5734 179.866 74.1675C177.07 75.2431 174.705 77.3195 170.793 75.9153C181.696 62.3814 182.246 43.7387 170.733 31.8779C167.937 37.151 170.703 41.6623 164.887 45.4566C165.795 24.7076 151.5 7.91718 131.449 2.68885L119.891 0L119.876 0Z' fill='%2308B0ED'/></svg>") no-repeat center / 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';
	}
}