/* ==========================================================================
   Prestige Detailing — packages comparison table (pd-packages)
   Figma: 13:3088 (1408 × 1043: 4 × 352 columns, badge 42 above the table).
   Rendered inside #wrap_all, so every rule is paired: ".pd-pk .x" + "#top #wrap_all .pd-pk .x".
   Self-contained: carries its own copy of pd-main-nav's shared tokens and the
   .pd-nav-t cap trim, so it never depends on the nav stylesheet being current.
   No !important, no margin/padding shorthands.
   ========================================================================== */

@property --pd-fb       { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --pd-nav-tt   { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pd-nav-tb   { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- Tokens ---------- */
.pd-pk {
	/* Shared site tokens — same values as pd-main-nav */
	--pd-nav-font: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--pd-cap: 0.71875;
	--pd-asc: 0.966;
	--pd-desc: 0.286;

	--pd-pk-bg: #242222;
	--pd-pk-hot: #161414;                 /* the badged column */
	--pd-pk-red: #d60c0c;
	--pd-pk-ink: 255, 255, 255;
	--pd-pk-line: rgba(255, 255, 255, 0.2);
	--pd-pk-arm: 8px;                     /* corner bracket arm — same as pd-button / pd-stat */
	--pd-pk-bar: 2px;                     /* corner bracket stroke */

	--pd-pk-badge-h: 42px;
	--pd-pk-badge-pt: 16px;               /* badge top → cap top (Figma pt 16) */
	--pd-pk-badge-fs: 16px;
	--pd-pk-badge-lh: 24px;
	--pd-pk-badge-ls: 0.03em;             /* 0.48px @ 16 */

	--pd-pk-body-fs: 18px;
	--pd-pk-body-lh: 28px;
	--pd-pk-key-a: 0.72;
	--pd-pk-price-fs: 24px;
	--pd-pk-price-ls: -0.02em;            /* -0.48px @ 24 */
	--pd-pk-price-dim: 0.4;
	--pd-pk-fade: 25%;                    /* 40% → 100% white over the first quarter of the price */
	--pd-pk-note-fs: 16px;
	--pd-pk-note-lh: 24px;
	--pd-pk-note-a: 0.64;
	--pd-pk-price-gap: 4px;

	/* Margins: inline --pd-pk-mt / --pd-pk-mb from the panel; the ramp only writes -now */
	--pd-pk-mt-now: var(--pd-pk-mt, 0px);
}

@media (max-width: 1199px) {
	.pd-pk.pd-pk--scale { --pd-pk-mt-now: calc(var(--pd-pk-mt, 0px) * 0.75); }
}
@media (max-width: 899px) {
	.pd-pk.pd-pk--scale { --pd-pk-mt-now: calc(var(--pd-pk-mt, 0px) * 0.6); }
}

/* ---------- Cap trim (text-box) with a metric fallback — same as pd-main-nav ---------- */
.pd-pk .pd-nav-t,
#top #wrap_all .pd-pk .pd-nav-t {
	display: block;
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	font-size: var(--fs);
	line-height: var(--lh);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-box: trim-both cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

@supports not ((text-box: trim-both cap alphabetic) or (text-box-trim: trim-both)) {
	.pd-pk { --pd-fb: 1; }
}

/* ---------- Section ---------- */
.pd-pk,
#top #wrap_all .pd-pk {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: 100%;
	container-type: inline-size;
	container-name: pd-pk;
	margin-top: var(--pd-pk-mt-f, var(--pd-pk-mt-now));
	margin-bottom: var(--pd-pk-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	font-family: var(--pd-nav-font);
	font-style: normal;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

/* ---------- Table grid: the feature-name column + one column per package.
   Every column spans all rows and shares them through subgrid, so a row is as tall as its
   tallest cell in ANY column and the row lines meet across the whole table. ---------- */
.pd-pk .pd-pk__grid,
#top #wrap_all .pd-pk .pd-pk__grid {
	/* Layout tokens live here (a descendant of the container), so the container query can change them.
	   Padding and heading size ramp with the section: 40 / 32 at the design's 1408. */
	--pd-pk-pad-x: clamp(20px, 2.8409cqi, 40px);
	--pd-pk-pad-y: 32px;                  /* line → cap top, and last baseline → line */
	--pd-pk-head-pad: 40px;               /* column top → heading cap, heading baseline → line */
	--pd-pk-name-fs: clamp(24px, 2.2727cqi, 32px);
	--pd-pk-name-lh: calc(var(--pd-pk-name-fs) * 1.25);
	--pd-pk-k-gap: 12px;                  /* stacked only: feature name → value */
	display: grid;
	grid-template-columns: repeat(var(--pd-pk-cols, 4), minmax(0, 1fr));
	grid-template-rows: repeat(var(--pd-pk-rows, 2), auto);
	column-gap: 0;
	row-gap: 0;
	box-sizing: border-box;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

.pd-pk.pd-pk--badge .pd-pk__grid,
#top #wrap_all .pd-pk.pd-pk--badge .pd-pk__grid {
	padding-top: var(--pd-pk-badge-h);
}

/* ---------- Columns: background, 1px frame (inset shadow — takes no space), corner brackets ---------- */
.pd-pk .pd-pk__col,
#top #wrap_all .pd-pk .pd-pk__col {
	position: relative;
	grid-row: 1 / -1;
	display: grid;
	grid-template-rows: subgrid;
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
	box-sizing: border-box;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	background-color: var(--pd-pk-bg);
	/* top, right, bottom — the left line belongs to the column before */
	box-shadow: inset -1px 0 0 0 var(--pd-pk-line), inset 0 1px 0 0 var(--pd-pk-line), inset 0 -1px 0 0 var(--pd-pk-line);
}

.pd-pk .pd-pk__col:first-child,
#top #wrap_all .pd-pk .pd-pk__col:first-child {
	box-shadow: inset 0 0 0 1px var(--pd-pk-line);
}

.pd-pk .pd-pk__col--hot,
#top #wrap_all .pd-pk .pd-pk__col--hot {
	background-color: var(--pd-pk-hot);
}

/* Brackets: 8 bars, arm × stroke, one per corner edge. A shared line gets both neighbours'
   arms, which meet on it as a T (the overlay reaches 1px over each shared line). */
.pd-pk .pd-pk__col::after,
#top #wrap_all .pd-pk .pd-pk__col::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: -1px;
	right: -1px;
	pointer-events: none;
	background-image:
		linear-gradient(rgb(var(--pd-pk-ink)), rgb(var(--pd-pk-ink))),
		linear-gradient(rgb(var(--pd-pk-ink)), rgb(var(--pd-pk-ink))),
		linear-gradient(rgb(var(--pd-pk-ink)), rgb(var(--pd-pk-ink))),
		linear-gradient(rgb(var(--pd-pk-ink)), rgb(var(--pd-pk-ink))),
		linear-gradient(rgb(var(--pd-pk-ink)), rgb(var(--pd-pk-ink))),
		linear-gradient(rgb(var(--pd-pk-ink)), rgb(var(--pd-pk-ink))),
		linear-gradient(rgb(var(--pd-pk-ink)), rgb(var(--pd-pk-ink))),
		linear-gradient(rgb(var(--pd-pk-ink)), rgb(var(--pd-pk-ink)));
	background-size:
		var(--pd-pk-arm) var(--pd-pk-bar), var(--pd-pk-bar) var(--pd-pk-arm),
		var(--pd-pk-arm) var(--pd-pk-bar), var(--pd-pk-bar) var(--pd-pk-arm),
		var(--pd-pk-arm) var(--pd-pk-bar), var(--pd-pk-bar) var(--pd-pk-arm),
		var(--pd-pk-arm) var(--pd-pk-bar), var(--pd-pk-bar) var(--pd-pk-arm);
	background-position:
		left top, left top,
		right top, right top,
		left bottom, left bottom,
		right bottom, right bottom;
	background-repeat: no-repeat;
}

.pd-pk .pd-pk__col:first-child::after,
#top #wrap_all .pd-pk .pd-pk__col:first-child::after {
	left: 0;
}

.pd-pk .pd-pk__col:last-child::after,
#top #wrap_all .pd-pk .pd-pk__col:last-child::after {
	right: 0;
}

/* Badge: sits on top of its column, reaching over the shared line on the left (Figma 353 wide) */
.pd-pk .pd-pk__badge,
#top #wrap_all .pd-pk .pd-pk__badge {
	position: absolute;
	bottom: 100%;
	left: -1px;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	box-sizing: border-box;
	height: var(--pd-pk-badge-h);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: var(--pd-pk-badge-pt);
	padding-bottom: 0;
	padding-left: 20px;
	padding-right: 20px;
	background-color: var(--pd-pk-red);
	overflow: hidden;
}

.pd-pk .pd-pk__badge-t,
#top #wrap_all .pd-pk .pd-pk__badge-t {
	--fs: var(--pd-pk-badge-fs);
	--lh: var(--pd-pk-badge-lh);
	color: rgb(var(--pd-pk-ink));
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: var(--pd-pk-badge-ls);
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
}

/* ---------- Cells: vertically centred in their row; a 1px line (inset shadow) under every row but the last ---------- */
.pd-pk .pd-pk__cell,
#top #wrap_all .pd-pk .pd-pk__cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: var(--pd-pk-pad-y);
	padding-bottom: calc(var(--pd-pk-pad-y) + 1px);
	padding-left: var(--pd-pk-pad-x);
	padding-right: var(--pd-pk-pad-x);
	box-shadow: inset 0 -1px 0 0 var(--pd-pk-line);
	overflow-wrap: break-word;
}

.pd-pk .pd-pk__cell--head,
#top #wrap_all .pd-pk .pd-pk__cell--head {
	padding-top: var(--pd-pk-head-pad);
	padding-bottom: calc(var(--pd-pk-head-pad) + 1px);
}

/* Price row: the price is the tallest thing in it; the "Price:" label sits on its baseline */
.pd-pk .pd-pk__cell--price,
#top #wrap_all .pd-pk .pd-pk__cell--price {
	justify-content: flex-end;
}

.pd-pk .pd-pk__cell:last-child,
#top #wrap_all .pd-pk .pd-pk__cell:last-child {
	padding-bottom: var(--pd-pk-pad-y);
	box-shadow: none;
}

.pd-pk .pd-pk__list,
#top #wrap_all .pd-pk .pd-pk__list {
	grid-row: 3 / -1;
	display: grid;
	grid-template-rows: subgrid;
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	border-width: 0;
}

/* ---------- Type ---------- */
.pd-pk .pd-pk__title,
.pd-pk .pd-pk__name,
#top #wrap_all .pd-pk .pd-pk__title,
#top #wrap_all .pd-pk .pd-pk__name {
	--fs: var(--pd-pk-name-fs);
	--lh: var(--pd-pk-name-lh);
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	color: rgb(var(--pd-pk-ink));
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	border-width: 0;
}

.pd-pk .pd-pk__key,
.pd-pk .pd-pk__k,
#top #wrap_all .pd-pk .pd-pk__key,
#top #wrap_all .pd-pk .pd-pk__k {
	--fs: var(--pd-pk-body-fs);
	--lh: var(--pd-pk-body-lh);
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	color: rgba(var(--pd-pk-ink), var(--pd-pk-key-a));
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.pd-pk .pd-pk__v,
#top #wrap_all .pd-pk .pd-pk__v {
	--fs: var(--pd-pk-body-fs);
	--lh: var(--pd-pk-body-lh);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	color: rgb(var(--pd-pk-ink));
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* Feature name inside a package column: for screen readers on the table, visible once stacked */
.pd-pk .pd-pk__k,
.pd-pk .pd-pk__vh,
#top #wrap_all .pd-pk .pd-pk__k,
#top #wrap_all .pd-pk .pd-pk__vh {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Price: amount + note, bottoms (= baselines, both are trimmed) aligned */
.pd-pk .pd-pk__price,
#top #wrap_all .pd-pk .pd-pk__price {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	column-gap: var(--pd-pk-price-gap);
	row-gap: 8px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	font-family: var(--pd-nav-font);
}

.pd-pk .pd-pk__amt,
#top #wrap_all .pd-pk .pd-pk__amt {
	--fs: var(--pd-pk-price-fs);
	--lh: var(--pd-pk-price-fs);
	color: rgb(var(--pd-pk-ink));
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: var(--pd-pk-price-ls);
	text-transform: uppercase;
}

/* The gradient sits on the INLINE span, whose background area covers the whole glyph box —
   on the trimmed block it would clip (same as pd-stat's label). */
.pd-pk .pd-pk__amt-in,
#top #wrap_all .pd-pk .pd-pk__amt-in {
	color: transparent;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(90deg, rgba(var(--pd-pk-ink), var(--pd-pk-price-dim)) 0, rgb(var(--pd-pk-ink)) var(--pd-pk-fade));
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-box-decoration-break: slice;
	box-decoration-break: slice;
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.pd-pk .pd-pk__note,
#top #wrap_all .pd-pk .pd-pk__note {
	--fs: var(--pd-pk-note-fs);
	--lh: var(--pd-pk-note-lh);
	color: rgba(var(--pd-pk-ink), var(--pd-pk-note-a));
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------- Stacked: below 900px of SECTION width each package becomes its own card,
   each value under its feature name. The feature-name column is not needed. ---------- */
@container pd-pk (max-width: 899px) {
	.pd-pk .pd-pk__grid,
	#top #wrap_all .pd-pk .pd-pk__grid {
		--pd-pk-pad-y: 24px;
		--pd-pk-head-pad: 32px;
		display: flex;
		flex-direction: column;
		row-gap: 12px;
	}

	.pd-pk.pd-pk--badge .pd-pk__grid,
	#top #wrap_all .pd-pk.pd-pk--badge .pd-pk__grid {
		padding-top: 0;
	}

	.pd-pk .pd-pk__col,
	#top #wrap_all .pd-pk .pd-pk__col,
	.pd-pk .pd-pk__list,
	#top #wrap_all .pd-pk .pd-pk__list {
		display: flex;
		flex-direction: column;
	}

	.pd-pk .pd-pk__col,
	#top #wrap_all .pd-pk .pd-pk__col {
		box-shadow: inset 0 0 0 1px var(--pd-pk-line);
	}

	/* After the display: flex rule above, which it must override at equal specificity */
	.pd-pk .pd-pk__col--keys,
	#top #wrap_all .pd-pk .pd-pk__col--keys {
		display: none;
	}

	.pd-pk .pd-pk__col--hot,
	#top #wrap_all .pd-pk .pd-pk__col--hot {
		margin-top: var(--pd-pk-badge-h);
	}

	.pd-pk .pd-pk__col::after,
	#top #wrap_all .pd-pk .pd-pk__col::after {
		left: 0;
		right: 0;
	}

	.pd-pk .pd-pk__badge,
	#top #wrap_all .pd-pk .pd-pk__badge {
		left: 0;
	}

	.pd-pk .pd-pk__list > .pd-pk__cell,
	#top #wrap_all .pd-pk .pd-pk__list > .pd-pk__cell {
		justify-content: flex-start;
		row-gap: var(--pd-pk-k-gap);
	}

	.pd-pk .pd-pk__k,
	#top #wrap_all .pd-pk .pd-pk__k {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}
}