pricing-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4em;
	padding: 6em 2em;
	max-width: 80em;
	margin: 0 auto;
	container-type: inline-size;
}

pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2em;
	width: 100%;
	align-items: start;
}

pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 2.5em 2em;
	gap: 1.8em;

	border-radius: 1.2em;
	background: var(--glass-bg);
	border: var(--glass-border);
	box-shadow:
		var(--card),
		inset 0 0 10px 5px rgb(69, 69, 69);
	backdrop-filter: blur(1.5em);

	translate: 0 0;
	transition:
		translate 0.3s ease-out,
		border-color 0.3s ease-out;

	&:hover {
		translate: 0 -0.4em;
	}

	/* Free Card: Flat / Restrained */
	&[data-tier="free"] {
		opacity: 0.9;
	}

	/* Pro Lifetime: Elevated & Featured */
	&[data-featured] {
		border-color: light-dark(hsla(281, 100%, 50%, 0.4), hsla(281, 100%, 75%, 0.4));
		box-shadow:
			var(--card),
			inset 0 0 10px 5px rgb(69, 69, 69);
	}

	popular-badge {
		position: absolute;
		top: 0;
		left: 50%;
		translate: -50% -50%;

		padding: 0.4em 1.2em;
		border-radius: 2em;
		background: linear-gradient(135deg, var(--brand-violet), var(--brand-gold));
		color: hsl(0, 0%, 100%);
		font-size: 0.8rem;
		font-weight: 800;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		box-shadow: 0 4px 12px hsla(281, 100%, 50%, 0.3);
		white-space: nowrap;
	}

	tier-header {
		display: flex;
		flex-direction: column;
		gap: 0.3em;

		.plan-name {
			font-size: 1.3rem;
			font-weight: 700;
			color: var(--text-main);
		}

		.price {
			font-size: 3rem;
			font-weight: 900;
			letter-spacing: -0.03em;
			line-height: 1.1;
			color: var(--text-main);
		}

		.billing-term {
			font-size: 0.9rem;
			font-weight: 600;
			color: var(--text-muted);
		}
	}

	tier-features {
		display: flex;
		flex-direction: column;
		gap: 1em;

		.features-prefix {
			font-size: 0.9rem;
			font-weight: 700;
			color: var(--text-main);
		}

		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: 0.8em;

			li {
				display: flex;
				align-items: flex-start;
				gap: 0.6em;
				font-size: 0.95rem;
				line-height: 1.4;
				color: var(--text-muted);
			}
		}

		/* Disclosure for full feature lists */
		details.all-features {
			margin-top: 0.5em;

			summary {
				display: inline-flex;
				align-items: center;
				gap: 0.4em;
				font-size: 0.9rem;
				font-weight: 700;
				color: var(--brand-violet-text);
				cursor: pointer;
				list-style: none;
				user-select: none;

				&::-webkit-details-marker {
					display: none;
				}

				svg.chevron-down {
					width: 1.1em;
					height: 1.1em;
					fill: currentColor;
					transition: rotate 0.3s ease;
				}

				&:hover {
					text-decoration: underline;
				}
			}

			&[open] summary svg.chevron-down {
				rotate: 180deg;
			}

			/* Chrome 140+ Smooth Expansion */
			&::details-content {
				height: 0;
				overflow: hidden;
				transition:
					height 0.35s ease-out,
					content-visibility 0.35s allow-discrete;
			}

			&[open]::details-content {
				height: auto;
			}

			ul {
				margin-top: 0.8em;
				padding-top: 0.8em;
				border-top: var(--glass-border);
			}
		}
	}

	tier-actions {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.8em;
		margin-top: auto;
		padding-top: 1.5em;

		button.full-width {
			width: 100%;
			padding: 0.8em 1.4em;
			font-size: 1rem;
		}

		trust-line {
			display: inline-flex;
			align-items: center;
			gap: 0.4em;
			font-size: 0.8rem;
			font-weight: 600;
			color: var(--text-muted);

			svg.shield {
				width: 1em;
				height: 1em;
				fill: none;
				stroke: currentColor;
				stroke-width: 2;
				stroke-linecap: round;
				stroke-linejoin: round;
			}
		}
	}
}

/* --- Native Chrome 140+ Border-Area Spec --- */
@supports (background-clip: border-area) {
	pricing-card[data-tier="lifetime"] {
		border-width: 2px;
		background-image: linear-gradient(135deg, gold, magenta, cyan);
		background-clip: border-area;
	}
}

/* --- Standard Multi-Masking Fallback --- */
@supports not (background-clip: border-area) {
	pricing-card[data-tier="lifetime"]::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		border-width: 2px;
		padding: 2px; /* Emulates border thickness */

		background: linear-gradient(135deg, gold, magenta, cyan);

		/* CSS Mask Subtraction Hack */
		-webkit-mask:
			linear-gradient(hsl(0, 0%, 100%) 0 0) content-box,
			linear-gradient(hsl(0, 0%, 100%) 0 0);
		-webkit-mask-composite: xor;
		mask:
			linear-gradient(hsl(0, 0%, 100%) 0 0) content-box,
			linear-gradient(hsl(0, 0%, 100%) 0 0);
		mask-composite: exclude;

		pointer-events: none;
		z-index: 5;
	}
}

svg {
	&.check path {
		fill: lime;
		d: path(
			"M21.855 10.303c.086.554.145 1.118.145 1.697 0 6.075-4.925 11-11 11s-11-4.925-11-11 4.925-11 11-11c2.348 0 4.518.741 6.304 1.993l-1.421 1.457c-1.408-.913-3.083-1.45-4.883-1.45-4.963 0-9 4.038-9 9s4.037 9 9 9c4.894 0 8.879-3.928 8.99-8.795l1.865-1.902zm-.951-8.136l-9.404 9.639-3.843-3.614-3.095 3.098 6.938 6.71 12.5-12.737-3.096-3.096z"
		);
	}

	&.star path {
		d: path("M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z");
	}
}