/* ==========================================================================
   Prestige Detailing — text block (pd-text-block)
   Figma 27:2091 (paragraphs), 12:2082 (column right), 12:2188 (column left).
   Rendered inside #wrap_all, so every rule is paired: ".pd-tb .x" + "#top #wrap_all .pd-tb .x".
   Self-contained: carries its own copy of pd-main-nav's shared tokens and the
   .pd-nav-t cap trim. The button is pd-button's .pd-btn (styled by pd-button.css).
   ========================================================================== */

@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 (ramps: 375 → 1728) ---------- */
.pd-tb {
	/* Shared site tokens — same values as pd-main-nav */
	--pd-nav-white: #fff;
	--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-tb-ink: 255, 255, 255;                                           /* On dark: white ink */
	--pd-tb-w: 580px;                                                     /* text column */
	--pd-tb-l1-fs: clamp(24px, calc(21.78px + 0.5913vw), 32px);           /* light line 32/32 */
	--pd-tb-l2-fs: clamp(32px, calc(27.57px + 1.1826vw), 48px);           /* title 48/44 */
	--pd-tb-l2-lh: clamp(32px, calc(28.67px + 0.8869vw), 44px);
	--pd-tb-title-gap: clamp(8px, calc(6.89px + 0.2956vw), 12px);
	--pd-tb-rule-gap: clamp(32px, calc(29.78px + 0.5913vw), 40px);
	--pd-tb-text-fs: clamp(16px, calc(15.45px + 0.1478vw), 18px);         /* body 18/28 */
	--pd-tb-text-lh: clamp(24px, calc(22.89px + 0.2956vw), 28px);
	--pd-tb-lg-fs: clamp(18px, calc(16.89px + 0.2956vw), 22px);           /* "Ideal for:" 22/32 */
	--pd-tb-lg-lh: clamp(28px, calc(26.89px + 0.2956vw), 32px);
	--pd-tb-block-gap: clamp(40px, calc(33.35px + 1.7738vw), 64px);       /* text → ticks → button */
	--pd-tb-checks-gap: clamp(24px, calc(21.78px + 0.5913vw), 32px);      /* list heading → ticks */
	--pd-tb-item-gap: clamp(28px, calc(25.78px + 0.5913vw), 36px);        /* tick → tick */
	--pd-tb-li-gap: 4px;
	--pd-tb-indent: 27px;
	--pd-tb-tick: 40px;
	--pd-tb-tick-icon: 24px;
	--pd-tb-tick-gap: 16px;
	/* Blank line between paragraphs, cap box to cap box: one empty line + (line − cap) */
	--pd-tb-para-gap: calc(2 * var(--pd-tb-text-lh) - var(--pd-cap) * var(--pd-tb-text-fs));
	--pd-tb-gw: calc(min(var(--pd-tb-w), 100vw - 32px) * 0.25);           /* gradient: 25% of the column */

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

.pd-tb.pd-tb--light {
	--pd-tb-ink: 22, 20, 20;
}

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

/* ---------- Cap trim (text-box) with a metric fallback — same as pd-main-nav ---------- */
.pd-tb .pd-nav-t,
.pd-tb .pd-tb__text > p,
.pd-tb .pd-tb__text > :is(h2, h3, h4, h5, h6),
#top #wrap_all .pd-tb .pd-nav-t,
#top #wrap_all .pd-tb .pd-tb__text > p,
#top #wrap_all .pd-tb .pd-tb__text > :is(h2, h3, h4, h5, h6) {
	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));
}

/* A list is a box of blocks, so it is never trimmed itself: its first item trims its start,
   its last item its end, and the items in between keep their full lines (4px apart). */
.pd-tb .pd-tb__text > :is(ul, ol) > li:first-child,
#top #wrap_all .pd-tb .pd-tb__text > :is(ul, ol) > li:first-child {
	--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)));
	text-box-trim: trim-start;
	text-box-edge: cap alphabetic;
	text-box: trim-start cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
}

.pd-tb .pd-tb__text > :is(ul, ol) > li:last-child,
#top #wrap_all .pd-tb .pd-tb__text > :is(ul, ol) > li:last-child {
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	text-box-trim: trim-end;
	text-box-edge: cap alphabetic;
	text-box: trim-end cap alphabetic;
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

.pd-tb .pd-tb__text > :is(ul, ol) > li:only-child,
#top #wrap_all .pd-tb .pd-tb__text > :is(ul, ol) > li:only-child {
	text-box-trim: trim-both;
	text-box: trim-both cap alphabetic;
}

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

/* ---------- Root: a flex column of cap-aligned boxes, so the gaps are the design's numbers ---------- */
.pd-tb,
#top #wrap_all .pd-tb {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tb-rule-gap);
	box-sizing: border-box;
	width: 100%;
	margin-top: var(--pd-tb-mt-f, var(--pd-tb-mt-now));
	margin-bottom: var(--pd-tb-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	color: rgb(var(--pd-tb-ink));
	font-family: var(--pd-nav-font);
	font-size: var(--pd-tb-text-fs);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

.pd-tb *,
#top #wrap_all .pd-tb * {
	box-sizing: border-box;
}

/* The 580 column, on the right (default) or the left of the container */
.pd-tb .pd-tb__col,
#top #wrap_all .pd-tb .pd-tb__col {
	width: min(var(--pd-tb-w), 100%);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: 0;
}

.pd-tb.pd-tb--left .pd-tb__col,
#top #wrap_all .pd-tb.pd-tb--left .pd-tb__col {
	margin-left: 0;
	margin-right: auto;
}

/* ---------- Head ---------- */
.pd-tb .pd-tb__head,
.pd-tb .pd-tb__title,
#top #wrap_all .pd-tb .pd-tb__head,
#top #wrap_all .pd-tb .pd-tb__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--pd-tb-title-gap);
}

.pd-tb .pd-tb__title,
#top #wrap_all .pd-tb .pd-tb__title {
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	font-family: var(--pd-nav-font);
	font-size: var(--pd-tb-l2-fs);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: rgb(var(--pd-tb-ink));
	overflow-wrap: break-word;
}

.pd-tb .pd-tb__main,
#top #wrap_all .pd-tb .pd-tb__main {
	--fs: var(--pd-tb-l2-fs);
	--lh: var(--pd-tb-l2-lh);
	max-width: 100%;
	font-weight: 700;
	letter-spacing: -0.04em;                     /* −1.92 @ 48 */
	text-transform: uppercase;
	color: rgb(var(--pd-tb-ink));
}

/* Light line (+ note): bottoms of two cap boxes = shared baseline */
.pd-tb .pd-tb__sub,
#top #wrap_all .pd-tb .pd-tb__sub {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	column-gap: 4px;
	row-gap: var(--pd-tb-title-gap);
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	font-family: var(--pd-nav-font);
	font-size: var(--pd-tb-l1-fs);
	font-weight: 400;
	line-height: 1;
	white-space: normal;
	color: rgb(var(--pd-tb-ink));
}

.pd-tb .pd-tb__accent,
#top #wrap_all .pd-tb .pd-tb__accent {
	--fs: var(--pd-tb-l1-fs);
	--lh: var(--pd-tb-l1-fs);
	max-width: 100%;
	font-weight: 400;
	letter-spacing: -0.03em;                     /* −0.96 @ 32 */
	text-transform: uppercase;
}

/* Gradient fill on an INLINE box: its paint area is the font's, not the trimmed block's */
.pd-tb .pd-tb__grad,
#top #wrap_all .pd-tb .pd-tb__grad {
	background-image: linear-gradient(90deg, rgba(var(--pd-tb-ink), 0.4) 0, rgb(var(--pd-tb-ink)) var(--pd-tb-gw));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.pd-tb .pd-tb__note,
#top #wrap_all .pd-tb .pd-tb__note {
	--fs: var(--pd-tb-text-fs);
	--lh: var(--pd-tb-text-lh);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(var(--pd-tb-ink), 0.64);
}

/* ---------- Rule: the full width of the container ---------- */
.pd-tb .pd-tb__rule,
#top #wrap_all .pd-tb .pd-tb__rule {
	display: block;
	flex: none;
	width: 100%;
	height: 1px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	background-color: rgba(var(--pd-tb-ink), 0.4);
}

/* ---------- Body: text → ticks → button ---------- */
.pd-tb .pd-tb__body,
#top #wrap_all .pd-tb .pd-tb__body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tb-block-gap);
}

/* Rich text: paragraphs, headings and lists, one blank line apart */
.pd-tb .pd-tb__text,
#top #wrap_all .pd-tb .pd-tb__text {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tb-para-gap);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	--fs: var(--pd-tb-text-fs);
	--lh: var(--pd-tb-text-lh);
	font-family: var(--pd-nav-font);
	font-size: var(--pd-tb-text-fs);
	line-height: var(--pd-tb-text-lh);
	font-weight: 400;
	letter-spacing: 0;
	color: rgba(var(--pd-tb-ink), 0.72);
	overflow-wrap: break-word;
}

.pd-tb .pd-tb__text > p,
#top #wrap_all .pd-tb .pd-tb__text > p {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	color: rgba(var(--pd-tb-ink), 0.72);
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.pd-tb .pd-tb__text > :is(h2, h3, h4, h5, h6),
#top #wrap_all .pd-tb .pd-tb__text > :is(h2, h3, h4, h5, h6) {
	--fs: var(--pd-tb-lg-fs);
	--lh: var(--pd-tb-lg-lh);
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	color: rgb(var(--pd-tb-ink));
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.pd-tb .pd-tb__text > :is(ul, ol),
#top #wrap_all .pd-tb .pd-tb__text > :is(ul, ol) {
	display: block;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: var(--pd-tb-indent);
	padding-right: 0;
	list-style-type: disc;
	list-style-position: outside;
	color: rgba(var(--pd-tb-ink), 0.72);
}

.pd-tb .pd-tb__text > ol,
#top #wrap_all .pd-tb .pd-tb__text > ol {
	list-style-type: decimal;
}

.pd-tb .pd-tb__text > :is(ul, ol) > li,
#top #wrap_all .pd-tb .pd-tb__text > :is(ul, ol) > li {
	--fs: var(--pd-tb-text-fs);
	--lh: var(--pd-tb-text-lh);
	display: list-item;
	margin-top: 0;
	margin-bottom: var(--pd-tb-li-gap);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	font-size: var(--fs);
	line-height: var(--lh);
	color: inherit;
	list-style-type: inherit;
}

.pd-tb .pd-tb__text :is(strong, b),
#top #wrap_all .pd-tb .pd-tb__text :is(strong, b) {
	font-weight: 700;
	color: rgb(var(--pd-tb-ink));
}

.pd-tb .pd-tb__text a,
#top #wrap_all .pd-tb .pd-tb__text a {
	color: rgb(var(--pd-tb-ink));
	text-decoration-line: underline;
	text-underline-offset: 0.15em;
	border-bottom-width: 0;
}

.pd-tb .pd-tb__text a:hover,
.pd-tb .pd-tb__text a:focus-visible,
#top #wrap_all .pd-tb .pd-tb__text a:hover,
#top #wrap_all .pd-tb .pd-tb__text a:focus-visible {
	color: rgb(var(--pd-tb-ink));
	text-decoration-line: none;
}

/* ---------- Tick list ("Ideal for:") ---------- */
.pd-tb .pd-tb__checks,
#top #wrap_all .pd-tb .pd-tb__checks {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tb-checks-gap);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}

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

.pd-tb .pd-tb__list,
#top #wrap_all .pd-tb .pd-tb__list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tb-item-gap);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	list-style-type: none;
}

.pd-tb .pd-tb__item,
#top #wrap_all .pd-tb .pd-tb__item {
	display: flex;
	align-items: center;
	column-gap: var(--pd-tb-tick-gap);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	list-style-type: none;
}

/* White disc with the Figma check (#161414). On light the disc is #161414 and the check is
   turned white with a filter, so one asset serves both. */
.pd-tb .pd-tb__tick,
#top #wrap_all .pd-tb .pd-tb__tick {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--pd-tb-tick);
	height: var(--pd-tb-tick);
	border-radius: 999px;
	background-color: rgb(var(--pd-tb-ink));
}

.pd-tb .pd-tb__tick-icon,
#top #wrap_all .pd-tb .pd-tb__tick-icon {
	display: block;
	flex: none;
	width: var(--pd-tb-tick-icon);
	height: var(--pd-tb-tick-icon);
	max-width: none;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	border-width: 0;
	border-radius: 0;
	box-shadow: none;
}

.pd-tb.pd-tb--light .pd-tb__tick-icon,
#top #wrap_all .pd-tb.pd-tb--light .pd-tb__tick-icon {
	filter: brightness(0) invert(1);
}

.pd-tb .pd-tb__item-text,
#top #wrap_all .pd-tb .pd-tb__item-text {
	--fs: var(--pd-tb-text-fs);
	--lh: var(--pd-tb-text-lh);
	flex: 1 1 0;
	min-width: 0;
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(var(--pd-tb-ink), 0.72);
	overflow-wrap: break-word;
}

/* Only when pd-button is missing: keep the link usable */
.pd-tb .pd-tb__fallback-link,
#top #wrap_all .pd-tb .pd-tb__fallback-link {
	align-self: flex-start;
	color: rgb(var(--pd-tb-ink));
	text-transform: uppercase;
}