/**
 * 10-tokens.css — design tokens. Single source of truth for color, type,
 * spacing, radii, shadow. Concatenated first into main.css; every other
 * partial (including the promoted review-component library in 32-36 and the
 * legacy compat layer in 28) reads its colors/type/radii from here ONLY —
 * no hardcoded hex/px duplicating a token value below. Change a value once,
 * here, and it reskins the whole site.
 *
 * ================= HOW TO CHANGE THE DESIGN =================
 * - Recolor the whole site:      edit the `--c-*` block. `--c-accent` (CTAs,
 *   links-as-buttons, headings via `--c-ink-2`) and `--c-primary` are the
 *   same value by design (buttons + headlines share one brand color, per
 *   DESIGN.md) — change `--c-primary` and both follow.
 * - Swap typefaces:              edit `--font-serif` / `--font-sans` here,
 *   and the @font-face rules in 11-fonts.css.
 * - Loosen/tighten spacing:      `--space-*` (a mobile-first t-shirt scale;
 *   `--space-6` is DESIGN.md's `stack-lg`, the gap between major sections).
 * - Rounder or squarer corners:  `--radius-*` (DESIGN.md's `rounded` scale —
 *   sm/DEFAULT/md/lg/xl — plus `--radius-2xl` for the few large decorative
 *   shapes, e.g. the review hero image, that intentionally break the
 *   otherwise-conservative scale).
 * - Elevation:                   `--shadow-*`, tonal and primary-tinted
 *   rather than pure black, per DESIGN.md's "avoid heavy shadows" guidance.
 * ==============================================================
 *
 * 2026-07 "Ethereal Sleep Heritage" promotion (Wave 1): the winning Style H
 * design system (formerly scoped to `body.tdr-style-h` in 51-style-h.css)
 * is now the whole site's token set — parchment canvas, deep slate-blue
 * primary, sage secondary, warm-sand tertiary, muted-terracotta warning,
 * Libre Caslon Text serif display + Source Sans 3 sans body. Values below
 * are carried over verbatim from the approved reference implementation, so
 * anything still reading these token names renders pixel-identically to
 * before the promotion.
 */

:root {
	/* -- Color: neutrals / surfaces -- */
	--c-bg: #fbf9f7; /* parchment canvas — page background */
	--c-bg-2: #f5f3f1; /* muted section background (surface-container-low) */
	--c-bg-3: #efedec; /* deeper muted background (surface-container) */
	--c-surface: #ffffff; /* card / panel background — pure white */
	--c-line: #e4e2e0; /* hairline borders, rules */
	--c-line-strong: #c3c7cd; /* stronger rule/border (outline-variant) — stat dividers, input underlines */
	--c-line-strong-rgb: 195, 199, 205;
	--c-ink: #1b1c1b; /* body text */
	--c-ink-rgb: 27, 28, 27;
	--c-mut: #43474c; /* secondary/muted text (on-surface-variant) — AA on parchment + white */
	--c-mut-rgb: 67, 71, 76;
	--c-ink-variant: var(--c-mut); /* alias — DESIGN.md's own name for this same token, kept for anything (e.g. a design-variant partial) that reaches for it by that name */
	--c-outline: #73777d; /* label-caps / eyebrow / meta gray */

	/* -- Color: brand -- */
	--c-primary: #152d3f; /* deep slate blue — nav, headlines, verdict, CTAs */
	--c-primary-rgb: 21, 45, 63;
	--c-on-primary: #ffffff;
	--c-primary-container: #2c4356; /* slate hover/pressed state */
	--c-secondary: #4a654e; /* sage — pros, organic/eco callouts, growth */
	--c-secondary-rgb: 74, 101, 78;
	--c-on-secondary: #ffffff;
	--c-secondary-fixed: #cceace; /* pale sage chip background */
	--c-secondary-fixed-rgb: 204, 234, 206;
	--c-secondary-fixed-2: #4e6952; /* sage chip text */
	--c-tertiary: #f4dfcb; /* warm sand — subtle backgrounds, price table stripes */
	--c-tertiary-rgb: 244, 223, 203;
	--c-tertiary-dim: #d7c3b0; /* deeper sand */
	--c-terracotta: #b66d52; /* muted terracotta — cons, warnings (never harsh red) */
	--c-terracotta-rgb: 182, 109, 82;
	--c-error: #ba1a1a; /* reserved for genuine failure states (forms), not brand warnings */

	/* -- Color: semantic aliases --
	   Everything below is a *reference* to a color above, not a new value —
	   this is how "change --c-primary alone reskins the whole site" works:
	   buttons, links, and headings all draw from the same two brand colors. */
	--c-accent: var(--c-primary); /* buttons, CTAs, link-as-button */
	--c-accent-2: var(--c-primary-container); /* button/link hover */
	--c-on-accent: var(--c-on-primary);
	--c-ink-2: var(--c-primary); /* headings — "headlines in slate blue" per DESIGN.md */

	/* -- Type -- */
	--font-serif: "Libre Caslon Text", Georgia, serif; /* display / headings */
	--font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; /* body, UI, label-caps */
	--step--1: 0.875rem;
	--step-0: 1rem;
	--step-1: 1.25rem;
	--step-2: 1.563rem;
	--step-3: 1.953rem;
	--step-4: 2.441rem;
	--step-5: 3.052rem;

	/* -- Space -- (mobile-first scale; --space-6 = DESIGN.md `stack-lg`) */
	--space-1: .25rem;
	--space-2: .5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.5rem;
	--space-6: 4rem;
	--space-7: 6rem;

	/* -- Layout -- */
	--container: 1280px; /* DESIGN.md container-max; shared by nav + every review-component section width */
	--container-narrow: 840px; /* component-level narrow widths only (e.g. the contact form) */
	--measure: 72ch; /* article prose text-column width */

	/* -- Radii -- DESIGN.md's named `rounded` scale, plus one large decorative
	   step reserved for feature/hero imagery (never used for plain UI). */
	--radius-xs: .125rem; /* 2px */
	--radius-sm: .25rem; /* 4px — buttons, badges, chips, pagination */
	--radius: .5rem; /* 8px — DEFAULT: cards, panels, inputs, dropdowns */
	--radius-lg: .75rem; /* 12px — larger panels (review hero figure, coupon, promo) */
	--radius-xl: 1rem; /* 16px — reserved for larger feature panels */
	--radius-2xl: 2rem; /* 32px — large decorative shapes only (review hero image/blob) */
	--radius-full: 9999px; /* true circles/pills (score ring, chip icons) */
	--radius-pill: 9999px; /* legacy-compat name, same value as --radius-full — kept only because the
	   self-contained demo-variant partials (45/46-style-*.css, out of Wave 1's
	   scope) still reference it; the promoted system itself uses --radius-sm
	   for what used to be pill-shaped chrome (buttons, badges, chips). */

	/* -- Shadows — soft, tonal, primary-tinted (10% of --c-primary at rest,
	   per DESIGN.md's "avoid heavy shadows" elevation model). -- */
	--shadow-sm: 0 1px 2px rgba(var(--c-primary-rgb), .08);
	--shadow-md: 0 16px 32px -18px rgba(var(--c-primary-rgb), .22);
	--shadow-lg: 0 24px 48px -20px rgba(var(--c-primary-rgb), .28);

	/* Trailing circle-arrow chip icon, shared via var() to avoid repeating
	   this ~300-byte inline-SVG data URI per selector. */
	--icon-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1c1b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='9 7 17 7 17 15'/%3E%3C/svg%3E");
	--icon-arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='9 7 17 7 17 15'/%3E%3C/svg%3E");
}
/**
 * 11-fonts.css — @font-face only. Self-hosted, no external requests.
 * Concatenated second (right after 10-tokens.css) so `--font-serif`/
 * `--font-sans` resolve to a registered family before any other partial's
 * type rules run. url() is relative to the final main.css location
 * (assets/css/), same as every other partial.
 *
 * Promoted from 51-style-h.css (Wave 1: Ethereal Sleep Heritage rollout) —
 * these two families are now the site-wide type system, not a page-specific
 * override, so the @font-face rules moved to the base layer. Manrope's
 * woff2 file is left on disk (unused) but no longer declared or preloaded.
 */

@font-face {
	font-family: "Libre Caslon Text";
	src: url("../fonts/libre-caslon-text-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Libre Caslon Text";
	src: url("../fonts/libre-caslon-text-400italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Libre Caslon Text";
	src: url("../fonts/libre-caslon-text-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-var.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-400italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
/**
 * 15-base.css — modern reset, typography scale, links, buttons, forms,
 * skip-link, focus states. Mobile-first; breakpoints only at 640/900/1200.
 *
 * 2026-07 "Ethereal Sleep Heritage" promotion: headings move to the serif
 * display face, buttons become the rectangular slate-blue CTA treatment,
 * inputs become underlined ("forms-on-linen") per DESIGN.md. Every color/
 * radius/spacing value here is a token from 10-tokens.css — no literals.
 */

/* -- Reset -- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: none;
	cursor: pointer;
}

/* Only strip list markers where a class is present — plain <ul>/<ol> inside
   post content keep their bullets/numbers. */
ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

/* The block editor stamps every list with .wp-block-list, which the reset
   above would otherwise catch — restore real markers for content lists. */
ul.wp-block-list {
	list-style: disc;
	padding-left: 1.25em;
}

ol.wp-block-list {
	list-style: decimal;
	padding-left: 1.25em;
}

a {
	color: inherit;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* -- Base type -- */

html {
	font-size: 100%;
}

body {
	font-family: var(--font-sans);
	font-size: var(--step-0);
	font-weight: 400;
	color: var(--c-ink);
	background: var(--c-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-serif);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-ink-2);
	text-wrap: balance;
}

h1 {
	font-size: var(--step-5);
}

h2 {
	font-size: var(--step-4);
}

h3 {
	font-size: var(--step-2);
}

h4,
h5,
h6 {
	font-size: var(--step-1);
}

p {
	max-width: 70ch;
}

p + p {
	margin-top: var(--space-3);
}

small {
	font-size: var(--step--1);
}

/* Shared label-caps treatment: eyebrows, badges, meta labels. Every
   "small uppercase tracked" text across the site (chrome + review
   components + legacy prose) should read as one family, so it lives here
   as a single reusable class rather than being redeclared per component. */
.tdr-label-caps {
	font-family: var(--font-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* -- Links -- */

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:not([class]) {
	color: var(--c-ink);
	text-decoration-color: var(--c-line);
}

a:not([class]):hover {
	color: var(--c-primary);
	text-decoration-color: currentColor;
}

/* -- Buttons --
   Rectangular slate-blue CTA: label-caps tracking, small conservative
   radius, trailing circular arrow chip (an ::after pseudo-element — solid
   circle + inline-SVG icon) so it appears automatically on every existing
   `.tdr-btn`/`.tdr-btn--ghost` with no markup changes, and on the legacy
   `.btn`/`.promo-button` equivalents (28-legacy.css). Chip/arrow colors
   invert against the button's own fill for contrast. */

.tdr-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: .8em .8em .8em 1.4em;
	border-radius: var(--radius-sm);
	background: var(--c-accent);
	color: var(--c-on-accent);
	font-family: var(--font-sans);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--c-accent);
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.tdr-btn:hover {
	background: var(--c-accent-2);
	border-color: var(--c-accent-2);
	transform: translateY(-2px);
}

.tdr-btn::after {
	content: "";
	flex: 0 0 auto;
	width: 1.9em;
	height: 1.9em;
	border-radius: var(--radius-full);
	background-color: #fff;
	background-image: var(--icon-arrow-dark);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 52%;
	transition: transform .2s ease;
}

.tdr-btn:hover::after {
	transform: translate(1px, -1px);
}

.tdr-btn--ghost,
.tdr-btn--white {
	background: transparent;
	color: var(--c-primary);
	border-color: var(--c-outline);
}

.tdr-btn--white {
	background: #fff;
	border-color: var(--c-line);
}

.tdr-btn--ghost:hover,
.tdr-btn--white:hover {
	background: var(--c-bg-2);
	border-color: var(--c-primary);
}

.tdr-btn--ghost::after,
.tdr-btn--white::after {
	background-color: var(--c-accent);
	background-image: var(--icon-arrow-light);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 52%;
}

/* -- Forms --
   Underlined "forms-on-linen" style rather than filled boxes, per
   DESIGN.md — a single rule bottom-border that darkens on focus. Textarea
   keeps a full (but still hairline, still square-ish) box, since an
   underline alone doesn't read as a multi-line field. */

input,
select {
	width: 100%;
	padding: var(--space-2) var(--space-1);
	border: 0;
	border-bottom: 1px solid var(--c-line-strong);
	border-radius: 0;
	background: transparent;
	color: var(--c-ink);
	transition: border-color .15s ease;
}

textarea {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius);
	background: var(--c-bg-2);
	color: var(--c-ink);
	transition: border-color .15s ease;
}

input:hover,
select:hover,
textarea:hover {
	border-color: var(--c-outline);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: none;
	border-color: var(--c-primary);
}

/* -- Accessibility -- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tdr-skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-3);
	z-index: 1000;
	padding: var(--space-2) var(--space-4);
	background: var(--c-accent);
	color: #fff;
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-weight: 700;
	transition: top .15s ease;
}

.tdr-skip-link:focus {
	top: var(--space-3);
}

:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}
/**
 * 20-layout.css — containers, header/nav (incl. mobile toggle), footer.
 * Mobile-first; breakpoints only at 640/900/1200.
 *
 * 2026-07 "Ethereal Sleep Heritage" promotion: warm-parchment translucent
 * header (nav.js already toggles `.is-scrolled` on #masthead — both states
 * styled below), serif logotype, label-caps nav with an underline-active
 * treatment, and a flat slate-blue tonal footer (DESIGN.md's "tonal
 * layering instead of heavy shadows" — no floating rounded card).
 */

/* -- Containers -- */

.tdr-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-3);
}

/* No longer applied by any template (article/page layout now shares
   `--container` with the nav) — kept as a harmless available utility. */
.tdr-container--narrow {
	max-width: var(--container-narrow);
}

@media (min-width: 640px) {
	.tdr-container {
		padding-inline: var(--space-4);
	}
}

/* -- Site shell -- */

.tdr-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--c-bg);
}

.tdr-main {
	flex: 1 0 auto;
}

/* -- Header --
   Sticky, two-state: transparent at rest (the page's own parchment shows
   through — there's nothing to blur yet), a translucent blurred parchment
   card once `.is-scrolled` is toggled. */

.tdr-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.tdr-header.is-scrolled {
	background: rgba(251, 249, 247, .92);
	border-bottom-color: var(--c-line);
	box-shadow: var(--shadow-sm);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.tdr-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 5rem;
}

.tdr-logo {
	display: inline-flex;
	align-items: baseline;
	text-decoration: none;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--step-1);
	letter-spacing: -0.01em;
	color: var(--c-primary);
	white-space: nowrap;
}

.tdr-logo__rest {
	font-weight: 400;
	font-style: italic;
	color: var(--c-mut);
}

/* -- Primary nav -- */

.tdr-nav {
	position: relative;
}

.tdr-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-sm);
}

.tdr-nav__toggle:hover {
	background: var(--c-bg-2);
}

.tdr-nav__toggle-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 22px;
}

.tdr-nav__toggle-line {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--c-primary);
	border-radius: 2px;
	transition: transform .15s ease, opacity .15s ease;
}

.tdr-nav__toggle[aria-expanded="true"] .tdr-nav__toggle-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.tdr-nav__toggle[aria-expanded="true"] .tdr-nav__toggle-line:nth-child(2) {
	opacity: 0;
}

.tdr-nav__toggle[aria-expanded="true"] .tdr-nav__toggle-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* `.tdr-nav` has no explicit width, so a stretched `left:0;right:0` child
   used to collapse to the 44px toggle button's width and overflow the
   viewport (the mobile horizontal-scroll bug) — anchoring only the right
   edge with an explicit, viewport-capped width fixes it. */
.tdr-nav__list {
	display: none;
	flex-direction: column;
	gap: var(--space-1);
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: min(20rem, calc(100vw - 2rem));
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: var(--space-2);
	box-shadow: var(--shadow-md);
}

.tdr-nav.is-open .tdr-nav__list {
	display: flex;
}

.tdr-nav__list li > a {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	position: relative;
	padding: var(--space-2) var(--space-3);
	text-decoration: none;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: .74rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-ink);
}

.tdr-nav__list li > a:hover {
	color: var(--c-primary);
	background: var(--c-bg-2);
}

.tdr-nav__caret {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--c-mut);
	transition: transform .15s ease;
}

.tdr-nav__list .sub-menu {
	padding-left: var(--space-3);
}

@media (min-width: 900px) {
	.tdr-nav__toggle {
		display: none;
	}

	.tdr-nav__list {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: static;
		width: auto;
		border: 0;
		box-shadow: none;
		padding: 0;
		gap: var(--space-1);
	}

	/* Underline-active treatment: a hairline rule grows in from the left on
	   hover/focus instead of a background fill, matching the label-caps
	   editorial feel used across the rest of the system. */
	.tdr-nav__list > li > a::after {
		content: "";
		position: absolute;
		left: var(--space-3);
		right: var(--space-3);
		bottom: .3em;
		height: 1px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .2s ease;
	}

	.tdr-nav__list > li > a:hover,
	.tdr-nav__list > li > a:focus-visible {
		background: transparent;
	}

	.tdr-nav__list > li > a:hover::after,
	.tdr-nav__list > li > a:focus-visible::after {
		transform: scaleX(1);
	}

	/* The visual gap below the trigger comes from the `top` offset, not a
	   margin: margins aren't hoverable, so a margin gap breaks li:hover on
	   the way down and the dropdown closes before it can be reached. The
	   ::before bridge keeps that gap inside the hoverable box. */
	.tdr-nav__list .sub-menu {
		display: none;
		position: absolute;
		top: calc(100% + var(--space-2));
		left: 0;
		flex-direction: column;
		background: var(--c-surface);
		border: 1px solid var(--c-line);
		border-radius: var(--radius);
		padding: var(--space-2);
		min-width: 12rem;
		box-shadow: var(--shadow-md);
	}

	.tdr-nav__list .sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: var(--space-2);
	}

	.tdr-nav__list li {
		position: relative;
	}

	.tdr-nav__list li:hover > .sub-menu,
	.tdr-nav__list li:focus-within > .sub-menu {
		display: flex;
	}

	.tdr-nav__list li:hover > a .tdr-nav__caret,
	.tdr-nav__list li:focus-within > a .tdr-nav__caret {
		transform: rotate(180deg);
	}

	.tdr-nav__list .sub-menu li > a {
		white-space: nowrap;
	}

	.tdr-nav__list .sub-menu li > a::after {
		content: none;
	}

	/* Escape-key override (assets/js/nav.js): forces a dropdown shut even
	   though focus returns to its trigger link (still :focus-within). */
	.tdr-nav__list li.tdr-nav-force-closed > .sub-menu {
		display: none !important;
	}

	.tdr-nav__list li.tdr-nav-force-closed > a .tdr-nav__caret {
		transform: none;
	}

	/* Last top-level item (currently "Coupons") reads as the header's CTA
	   slot — a filled slate-blue label-caps button, mirroring the review
	   component library's `.tdrh-cta` treatment. */
	.tdr-nav__list > li:last-child {
		margin-left: var(--space-2);
	}

	.tdr-nav__list > li:last-child > a {
		padding: .6em 1.1em;
		border-radius: var(--radius-sm);
		background: var(--c-accent);
		color: var(--c-on-accent);
	}

	.tdr-nav__list > li:last-child > a::after {
		content: none;
	}

	.tdr-nav__list > li:last-child > a:hover {
		background: var(--c-accent-2);
	}
}

/* -- Footer --
   Flat slate-blue tonal band (DESIGN.md tonal-layering, not a floating
   shadowed card) — full-bleed, square corners. The tagline reads as the
   site's affiliate-disclosure line, styled like the review component
   library's `.tdrh-disclosure` (label-caps, wide tracking, muted). */

.tdr-footer {
	margin-top: var(--space-7);
	background: var(--c-primary);
	color: rgba(255, 255, 255, .82);
}

.tdr-footer__inner {
	padding: var(--space-5) var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.tdr-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-4);
}

.tdr-footer__list a {
	text-decoration: none;
	font-family: var(--font-sans);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

.tdr-footer__list a:hover {
	color: #fff;
}

.tdr-footer__meta {
	padding-top: var(--space-4);
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.tdr-footer__copy,
.tdr-footer__tagline {
	font-size: var(--step--1);
	color: rgba(255, 255, 255, .68);
	max-width: none;
}

.tdr-footer__copy {
	color: rgba(255, 255, 255, .9);
}

.tdr-footer__tagline {
	margin-top: var(--space-1);
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

@media (min-width: 640px) {
	.tdr-footer__inner {
		padding: var(--space-6) var(--space-5);
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

	.tdr-footer__meta {
		padding-top: 0;
		border-top: 0;
		text-align: right;
	}
}
/**
 * 25-archive.css — cards, grids, page headers, pagination, search form,
 * 404, category blocks.
 * Mobile-first; breakpoints only at 640/900/1200.
 *
 * 2026-07 "Ethereal Sleep Heritage" promotion: serif display headings with
 * label-caps eyebrows, minimalist white cards with a 1px hairline border
 * (DESIGN.md's #EAE6E1-ish neutral) and a soft ambient hover lift instead
 * of a resting shadow, generous `stack-lg` section spacing.
 *
 * The old text-only front-page hero (`.tdr-hero`/`.tdr-hero__*`, a solid
 * slate-blue "stamp" panel with no real photo) was retired when the front
 * page moved to the photo-led editorial layout in 26-home-editorial.css —
 * removed here rather than left as dead weight (grepped against every
 * template PHP file first; zero references remained).
 */

/* -- Sections -- */

.tdr-section {
	padding-block: var(--space-6);
}

.tdr-section--muted {
	background: var(--c-bg-2);
	border-radius: var(--radius-lg);
}

.tdr-section__header {
	margin-bottom: var(--space-5);
}

.tdr-section__header--tight {
	margin-top: var(--space-6);
	margin-bottom: var(--space-4);
}

.tdr-section__title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--step-3);
	color: var(--c-ink-2);
}

/* -- Grids -- */

.tdr-grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.tdr-grid--cards,
	.tdr-grid--categories {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.tdr-grid--cards,
	.tdr-grid--categories {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1200px) {
	.tdr-grid--categories {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* -- Card --
   Minimalist white container: a 1px hairline border at rest (no shadow),
   soft ambient shadow + lift on hover/interaction, per DESIGN.md's
   elevation model. Image sits flush with the card's own top radius; the
   category eyebrow becomes a small bordered label-caps chip. */

.tdr-card {
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tdr-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--c-line-strong);
}

.tdr-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--c-bg-2);
}

.tdr-card__img,
.tdr-card__img--placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tdr-card__img--placeholder {
	display: block;
}

.tdr-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
	flex: 1;
}

.tdr-card__eyebrow {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	padding: .3em .75em;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .68rem;
	font-weight: 700;
	color: var(--c-primary);
	text-decoration: none;
}

.tdr-card__eyebrow:hover {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
}

.tdr-card__title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--step-1);
	line-height: 1.3;
	color: var(--c-ink-2);
}

.tdr-card__title a {
	text-decoration: none;
}

.tdr-card__title a:hover {
	text-decoration: underline;
}

.tdr-card__excerpt {
	color: var(--c-mut);
	font-size: var(--step--1);
	max-width: none;
}

.tdr-card__excerpt .read-more {
	color: var(--c-ink);
	font-weight: 700;
	white-space: nowrap;
}

.tdr-card__meta {
	margin-top: auto;
	padding-top: var(--space-2);
	border-top: 1px solid var(--c-line);
}

.tdr-card__date {
	font-family: var(--font-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-outline);
}

/* -- Category card (front page "Browse by category") -- */

.tdr-cat-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-4);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tdr-cat-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--c-line-strong);
}

.tdr-cat-card__title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--step-1);
	color: var(--c-ink-2);
}

.tdr-cat-card__desc {
	color: var(--c-mut);
	font-size: var(--step--1);
	max-width: none;
}

.tdr-cat-card__count {
	margin-top: var(--space-2);
	font-family: var(--font-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-secondary);
}

/* -- Archive / page headers -- */

.tdr-archive-header,
.tdr-page__header {
	padding-block: var(--space-5);
	margin-bottom: var(--space-5);
}

.tdr-archive-header__eyebrow {
	display: inline-flex;
	align-items: center;
	padding: .35em .9em;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .7rem;
	font-weight: 700;
	color: var(--c-secondary);
	margin-bottom: var(--space-3);
}

.tdr-archive-header__title,
.tdr-page__title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--step-4);
	color: var(--c-ink-2);
}

.tdr-archive-header__desc {
	margin-top: var(--space-3);
	color: var(--c-mut);
	max-width: 60ch;
}

.tdr-page__content {
	padding-bottom: var(--space-6);
}

.tdr-page__content > * + * {
	margin-top: var(--space-3);
}

/* -- Main Categories template -- */

.tdr-category-block {
	padding-block: var(--space-5);
}

.tdr-category-block + .tdr-category-block {
	border-top: 1px solid var(--c-line);
}

.tdr-category-block__title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--step-2);
	margin-bottom: var(--space-4);
	color: var(--c-ink-2);
}

.tdr-category-block__title a {
	text-decoration: none;
}

.tdr-category-block__title a:hover {
	text-decoration: underline;
}

.tdr-category-block__more {
	margin-top: var(--space-4);
}

/* -- Empty state -- */

.tdr-empty-state {
	color: var(--c-mut);
	padding-block: var(--space-5);
}

/* -- Search form -- */

.tdr-search-form {
	display: flex;
	gap: var(--space-2);
	max-width: 32rem;
	margin-bottom: var(--space-5);
}

.tdr-search-form__input {
	flex: 1;
	font-size: var(--step-1);
}

/* -- Inline link list (404 categories) -- */

.tdr-inline-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	margin-bottom: var(--space-6);
}

.tdr-inline-links a {
	display: inline-block;
	padding: .5em 1em;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.tdr-inline-links a:hover {
	border-color: var(--c-primary);
	color: var(--c-primary);
}

/* -- Pagination -- */

.tdr-pagination {
	margin-block: var(--space-6);
	display: flex;
	justify-content: center;
}

.tdr-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.tdr-pagination__item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--space-2);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-size: .85rem;
	font-weight: 700;
}

.tdr-pagination__item a.page-numbers:hover {
	border-color: var(--c-primary);
	color: var(--c-primary);
}

.tdr-pagination__item .page-numbers.current {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: #fff;
}

.tdr-pagination__item .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--c-mut);
	box-shadow: none;
}
/** Editorial homepage — scoped to .tdr-home. */
.tdr-home{overflow:hidden;background:var(--c-bg);color:var(--c-ink)}
.tdr-home *{box-sizing:border-box}
.tdr-home-eyebrow{display:block;margin-bottom:1rem;font:700 .68rem/1 var(--font-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--c-secondary)}
.tdr-home-hero,.tdr-home-worlds,.tdr-home-picks,.tdr-home-manifesto,.tdr-home-latest{max-width:var(--container);margin-inline:auto;padding-inline:1.25rem}
.tdr-home-hero{display:grid;gap:4rem;padding-top:clamp(4.75rem,6vw,5.5rem);padding-bottom:clamp(5rem,8vw,7rem)}
.tdr-home-hero__copy h1{max-width:11ch;margin:0 0 1.5rem;font:700 clamp(3rem,5.5vw,4.85rem)/1 var(--font-serif);letter-spacing:-.035em;color:var(--c-primary)}
.tdr-home-hero__copy h1 em{font-weight:400}
.tdr-home-hero__copy>p{max-width:42rem;margin:0 0 2rem;font-size:1.2rem;line-height:1.7;color:var(--c-ink-variant)}
.tdr-home-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.tdr-home-hero__actions>a:last-child{font-weight:700;color:var(--c-primary);text-decoration:none;border-bottom:1px solid currentColor}
.tdr-home-proof{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--c-line)}
.tdr-home-proof strong,.tdr-home-proof span{display:block}.tdr-home-proof strong{font:700 1.15rem/1.2 var(--font-serif);color:var(--c-primary)}.tdr-home-proof span{margin-top:.3rem;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-outline)}
.tdr-home-hero__stories{position:relative;display:grid;gap:1rem}.tdr-home-story{position:relative;display:grid;min-height:15rem;overflow:hidden;border-radius:.75rem;text-decoration:none;background:var(--c-primary);color:#fff}.tdr-home-story figure{position:absolute;inset:0;margin:0}.tdr-home-story figure:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(10,27,40,.82) 100%)}.tdr-home-story img{width:100%;height:100%;object-fit:cover}.tdr-home-story>div{position:relative;z-index:1;align-self:end;padding:1.5rem}.tdr-home-story span{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.78}.tdr-home-story h2,.tdr-home-story h3{margin:.55rem 0 0;font-family:var(--font-serif);line-height:1.12;color:#fff}.tdr-home-story h2{font-size:clamp(1.8rem,4vw,3.1rem)}.tdr-home-story h3{font-size:1.25rem}.tdr-home-story b{display:block;margin-top:1rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}.tdr-home-story--lead{min-height:34rem}.tdr-home-hero__side{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.tdr-home-worlds{max-width:none;padding-inline:max(1.25rem,calc((100vw - var(--container))/2 + 1.25rem));padding-block:clamp(5rem,9vw,8rem);background:var(--c-bg-2)}
.tdr-home-section-head{max-width:48rem;margin-bottom:3rem}.tdr-home-section-head h2{margin:0 0 1rem;font:700 clamp(2.2rem,5vw,3.8rem)/1.08 var(--font-serif);color:var(--c-primary)}.tdr-home-section-head p{margin:0;font-size:1.08rem;line-height:1.7;color:var(--c-ink-variant)}
.tdr-home-worlds__grid{display:grid;gap:1rem}.tdr-home-world{position:relative;display:flex;min-height:25rem;flex-direction:column;justify-content:space-between;padding:2rem;overflow:hidden;border:1px solid var(--c-line);border-radius:.75rem;background:var(--c-surface);text-decoration:none;color:var(--c-primary);transition:transform .2s ease,box-shadow .2s ease}.tdr-home-world:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}.tdr-home-world:before{content:"";position:absolute;width:16rem;height:16rem;right:-6rem;bottom:-6rem;border-radius:50%;background:var(--c-secondary-fixed);filter:blur(1px);opacity:.45}.tdr-home-world__num{font:700 .7rem/1 var(--font-sans);letter-spacing:.15em}.tdr-home-world>div,.tdr-home-world>b{position:relative}.tdr-home-world>div>span{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-outline)}.tdr-home-world h3{margin:.25rem 0 1rem;font:700 clamp(3.5rem,7vw,5.5rem)/.9 var(--font-serif);color:var(--c-primary)}.tdr-home-world p{max-width:25rem;margin:0;line-height:1.65;color:var(--c-ink-variant)}.tdr-home-world b{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}.tdr-home-world--go{background:var(--c-primary);color:#fff}.tdr-home-world--go h3,.tdr-home-world--go p,.tdr-home-world--go>div>span{color:#fff}.tdr-home-world--go p{opacity:.78}.tdr-home-world--go:before{background:var(--c-tertiary-fixed);opacity:.1}
.tdr-home-picks{padding-block:clamp(5rem,10vw,9rem)}.tdr-home-picks__grid{display:grid;gap:2rem}.tdr-home-pick a{display:block;text-decoration:none;color:inherit}.tdr-home-pick figure{position:relative;margin:0 0 1.5rem;aspect-ratio:4/3;overflow:hidden;border-radius:.75rem}.tdr-home-pick img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.tdr-home-pick:hover img{transform:scale(1.025)}.tdr-home-pick figure span{position:absolute;top:1rem;left:1rem;display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;background:#fff;font-family:var(--font-serif);color:var(--c-primary)}.tdr-home-pick> a>div>span{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-secondary)}.tdr-home-pick h3{margin:.6rem 0 .8rem;font:700 1.65rem/1.2 var(--font-serif);color:var(--c-primary)}.tdr-home-pick p{margin:0 0 1rem;line-height:1.6;color:var(--c-ink-variant)}.tdr-home-pick b{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--c-primary)}
.tdr-home-manifesto{display:grid;gap:3rem;max-width:none;padding-inline:max(1.25rem,calc((100vw - var(--container))/2 + 1.25rem));padding-block:clamp(5rem,9vw,8rem);background:var(--c-primary);color:#fff}.tdr-home-manifesto h2{margin:0;font:700 clamp(2.8rem,6vw,5rem)/1 var(--font-serif);color:#fff}.tdr-home-manifesto h2 em{font-weight:400}.tdr-home-manifesto .tdr-home-eyebrow{color:var(--c-secondary-fixed)}.tdr-home-manifesto>div:last-child{max-width:40rem}.tdr-home-manifesto p{margin:0 0 1.25rem;font-size:1.12rem;line-height:1.75;color:rgba(255,255,255,.78)}
.tdr-home-latest{padding-block:clamp(5rem,9vw,8rem)}.tdr-home-section-head--row{display:flex;max-width:none;align-items:end;justify-content:space-between;gap:2rem}.tdr-home-section-head--row h2{margin-bottom:0}.tdr-home-section-head--row>a{flex:0 0 auto;font-weight:700;color:var(--c-primary)}.tdr-home-latest__grid{display:grid;grid-template-columns:1fr;gap:1.5rem}.tdr-home-latest .tdr-card{border-radius:.75rem}.tdr-home .tdr-footer{margin-top:0}
@media(min-width:700px){.tdr-home-worlds__grid,.tdr-home-picks__grid{grid-template-columns:repeat(3,1fr)}.tdr-home-latest__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tdr-home-hero{grid-template-columns:.9fr 1.1fr;align-items:start;gap:4rem}.tdr-home-hero__copy{padding-top:.75rem}.tdr-home-hero__stories{grid-template-columns:1.55fr .8fr;height:35rem}.tdr-home-story--lead{min-height:0;height:100%}.tdr-home-hero__side{grid-template-columns:1fr;grid-template-rows:1fr 1fr;min-height:0}.tdr-home-hero__side .tdr-home-story{min-height:0}.tdr-home-manifesto{grid-template-columns:1fr 1fr;gap:7rem}.tdr-home-latest__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:699px){.tdr-home-hero__side{grid-template-columns:1fr}.tdr-home-story--lead{min-height:27rem}.tdr-home-section-head--row{align-items:flex-start;flex-direction:column}.tdr-home-world{min-height:21rem}}
/** Coordinated Buy / Go / Live category landing pages. */
.tdr-world{--world-accent:var(--c-secondary);overflow:hidden;background:var(--c-bg)}
.tdr-world--go{--world-accent:#a15138}.tdr-world--live{--world-accent:#68547b}
.tdr-world-eyebrow{display:block;margin-bottom:1rem;font:700 .68rem/1 var(--font-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--world-accent)}
.tdr-world-hero,.tdr-world-topics,.tdr-world-statement,.tdr-world-latest{max-width:var(--container);margin-inline:auto;padding-inline:1.25rem}
.tdr-world-hero{display:grid;gap:4rem;padding-top:clamp(5rem,8vw,7rem);padding-bottom:clamp(5rem,9vw,8rem)}
.tdr-world-hero__copy{align-self:center}.tdr-world-hero__pre{margin:0;font:400 clamp(2rem,4vw,3.5rem)/1 var(--font-serif);font-style:italic;color:var(--c-primary)}
.tdr-world-hero h1{margin:.08em 0 1.5rem;font:700 clamp(5.5rem,12vw,10rem)/.85 var(--font-serif);letter-spacing:-.05em;color:var(--c-primary)}
.tdr-world-hero__dek{max-width:38rem;margin:0 0 2rem;font-size:1.18rem;line-height:1.7;color:var(--c-ink-variant)}
.tdr-world-hero__media{display:grid;gap:1rem}.tdr-world-feature{position:relative;display:grid;min-height:14rem;overflow:hidden;border-radius:.75rem;text-decoration:none;background:var(--c-primary);color:#fff}.tdr-world-feature figure{position:absolute;inset:0;margin:0}.tdr-world-feature figure:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 15%,rgba(10,27,40,.84) 100%)}.tdr-world-feature img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.tdr-world-feature:hover img{transform:scale(1.025)}.tdr-world-feature>div{position:relative;z-index:1;align-self:end;padding:1.5rem}.tdr-world-feature span{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.75}.tdr-world-feature h2,.tdr-world-feature h3{margin:.55rem 0 0;font-family:var(--font-serif);line-height:1.12;color:#fff}.tdr-world-feature h2{font-size:clamp(2rem,4vw,3.2rem)}.tdr-world-feature h3{font-size:1.3rem}.tdr-world-feature b{display:block;margin-top:1rem;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}.tdr-world-feature--lead{min-height:33rem}.tdr-world-hero__side{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.tdr-world-topics{max-width:none;padding-inline:max(1.25rem,calc((100vw - var(--container))/2 + 1.25rem));padding-block:clamp(5rem,9vw,8rem);background:var(--c-bg-2)}
.tdr-world-section-head{max-width:44rem;margin-bottom:3rem}.tdr-world-section-head h2{margin:0;font:700 clamp(2.3rem,5vw,4rem)/1.08 var(--font-serif);color:var(--c-primary)}
.tdr-world-topics__grid{display:grid;gap:1px;overflow:hidden;border:1px solid var(--c-line);border-radius:.75rem;background:var(--c-line)}.tdr-world-topics__grid>a{display:grid;grid-template-columns:2.5rem 1fr auto;align-items:center;gap:1rem;min-height:8.5rem;padding:1.5rem;background:var(--c-surface);text-decoration:none;color:var(--c-primary);transition:background .2s ease}.tdr-world-topics__grid>a:hover{background:var(--c-bg-3)}.tdr-world-topics__grid>a>span{font-size:.65rem;font-weight:700;letter-spacing:.1em;color:var(--world-accent)}.tdr-world-topics h3{margin:0 0 .3rem;font:700 1.35rem/1.2 var(--font-serif);color:var(--c-primary)}.tdr-world-topics p{margin:0;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-outline)}
.tdr-world-statement{display:grid;gap:3rem;max-width:none;padding-inline:max(1.25rem,calc((100vw - var(--container))/2 + 1.25rem));padding-block:clamp(5rem,9vw,8rem);background:var(--c-primary);color:#fff}.tdr-world-statement .tdr-world-eyebrow{color:var(--c-secondary-fixed)}.tdr-world-statement>div{display:grid;gap:2rem}.tdr-world-statement h2{margin:0;font:700 clamp(2.8rem,6vw,5.4rem)/.98 var(--font-serif);color:#fff}.tdr-world-statement p{max-width:38rem;margin:0;font-size:1.15rem;line-height:1.75;color:rgba(255,255,255,.76)}
.tdr-world-latest{padding-block:clamp(5rem,9vw,8rem)}.tdr-world-section-head--row{display:flex;max-width:none;align-items:end;justify-content:space-between;gap:2rem}.tdr-world-section-head--row>span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-outline)}.tdr-world-latest__grid{display:grid;gap:1.5rem}.tdr-world-latest .tdr-card{border-radius:.75rem}
@media(min-width:700px){.tdr-world-topics__grid{grid-template-columns:repeat(2,1fr)}.tdr-world-latest__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tdr-world-hero{grid-template-columns:.72fr 1.28fr;align-items:center;gap:5rem}.tdr-world-hero__media{grid-template-columns:1.5fr .75fr;height:35rem}.tdr-world-feature--lead{min-height:0;height:100%}.tdr-world-hero__side{grid-template-columns:1fr;grid-template-rows:1fr 1fr;min-height:0}.tdr-world-hero__side .tdr-world-feature{min-height:0}.tdr-world-topics__grid{grid-template-columns:repeat(3,1fr)}.tdr-world-statement>div{grid-template-columns:1fr 1fr;align-items:end}.tdr-world-latest__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:699px){.tdr-world-hero__side{grid-template-columns:1fr}.tdr-world-feature--lead{min-height:27rem}.tdr-world-section-head--row{align-items:flex-start;flex-direction:column}}

/* Descendant archives: a quieter editorial companion to the three world hubs. */
.tdr-section-archive{--world-accent:var(--c-secondary);overflow:hidden;background:linear-gradient(135deg,var(--c-bg) 0%,var(--c-bg-2) 100%)}
.tdr-section-archive.tdr-world--go{--world-accent:#a15138}.tdr-section-archive.tdr-world--live{--world-accent:#68547b}
.tdr-section-hero{padding:clamp(5rem,8vw,7rem) 0 2.25rem;background:transparent}
.tdr-section-hero__inner,.tdr-section-children,.tdr-section-stories{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--space-3)}
.tdr-section-crumbs{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.4rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-outline)}
.tdr-section-crumbs a{color:var(--c-primary);text-decoration:none}.tdr-section-crumbs a:hover{text-decoration:underline}.tdr-section-crumbs span{opacity:.5}
.tdr-section-hero h1{max-width:14ch;margin:0 0 1.5rem;font:700 clamp(3.8rem,9vw,7.8rem)/.9 var(--font-serif);letter-spacing:-.045em;color:var(--c-primary)}
.tdr-section-hero__copy{max-width:44rem;font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.7;color:var(--c-ink-variant)}.tdr-section-hero__copy p{margin:0}
.tdr-section-hero__count{margin:2rem 0 0;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--world-accent)}
.tdr-section-children{padding-block:clamp(5rem,8vw,7rem);background:transparent;border-top:1px solid var(--c-line)}.tdr-section-children__grid{display:grid;gap:1px;overflow:hidden;border:1px solid var(--c-line);border-radius:.75rem;background:var(--c-line)}
.tdr-section-children__grid>a{display:grid;grid-template-columns:2.25rem 1fr auto;align-items:center;gap:1rem;min-height:7.5rem;padding:1.35rem;background:var(--c-surface);color:var(--c-primary);text-decoration:none;transition:background .2s ease}.tdr-section-children__grid>a:hover{background:var(--c-bg-3)}
.tdr-section-children__grid>a>span{font-size:.64rem;font-weight:700;color:var(--world-accent)}.tdr-section-children h3{margin:0 0 .25rem;font:700 1.25rem/1.2 var(--font-serif);color:var(--c-primary)}.tdr-section-children p{margin:0;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-outline)}
.tdr-section-stories{padding-top:0;padding-bottom:clamp(5rem,9vw,8rem);background:transparent}.tdr-section-stories__grid{display:grid;gap:1.5rem}.tdr-section-stories .tdr-card{border-radius:.75rem}
@media(min-width:640px){.tdr-section-hero__inner,.tdr-section-children,.tdr-section-stories{padding-inline:var(--space-4)}}
@media(min-width:700px){.tdr-section-children__grid,.tdr-section-stories__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tdr-section-children__grid,.tdr-section-stories__grid{grid-template-columns:repeat(3,1fr)}.tdr-section-stories__grid .tdr-card:first-child{grid-column:span 2;grid-row:span 2}.tdr-section-stories__grid .tdr-card:first-child .tdr-card__media{aspect-ratio:16/9}.tdr-section-stories__grid .tdr-card:first-child .tdr-card__title{font-size:clamp(1.8rem,3vw,2.7rem)}}
/* 28-legacy.css — legacy-content compatibility layer. 573 older posts
   contain intact markup from a dead page-builder (X-Theme/Cornerstone);
   this re-skins every surviving legacy class in the tdr2026 design
   language (10-tokens.css) so old posts look native, without touching
   template PHP or post content. Every selector is prefixed `.tdr-prose`
   so legacy class names can never leak into theme chrome.
   2026-07 "Ethereal Sleep Heritage" promotion: fa-check/fa-times glyphs
   move to sage/terracotta (DESIGN.md's pros/cons colors, matching
   `.tdrh-li-icon`/`.tdrh-card--cons` in the review component library),
   headings/buttons follow the same slate-blue + label-caps system as
   everywhere else — almost everything below already reads its color from
   a 10-tokens.css token, so most of the re-skin happened by changing the
   token values, not this file. */

.tdr-prose {
	--tdr-legacy-green: var(--c-secondary); /* sage — matches .tdr-notice--success in 30-single.css */
	--tdr-legacy-red: var(--c-terracotta); /* muted terracotta — matches .tdr-notice--danger in 30-single.css */
}

/* Grid: .row / .col-* / .finalwidth / .high. As of the 2026-07 scaffold-
   normalization pass (inc/review-data.php's tdr_review_normalize_scaffold()),
   the page builder's own inline margin/padding/width on finalwidth/row/col-*
   is stripped at RUNTIME (never in the DB) before this CSS ever sees it —
   border-* and a non-white background-color are the only inline properties
   that survive that pass, so they're the only ones this file needs to
   design around below. box-sizing:border-box still guards any inline
   border-width against causing horizontal overflow. */

.tdr-prose .finalwidth,
.tdr-prose .high,
.tdr-prose .row,
.tdr-prose [class*="col-"] {
	box-sizing: border-box;
}

.tdr-prose .finalwidth + .finalwidth {
	margin-top: var( --space-6 );
}

/* A kept inline border on an otherwise-neutralized wrapper (a dashed/solid
   callout panel, e.g. a coupon "x-container" box) loses its own inline
   padding in that same pass — restored via the token scale so the border
   isn't touching its own content. */
.tdr-prose .row[style*="border-style"],
.tdr-prose [class*="col-"][style*="border-style"],
.tdr-prose .finalwidth[style*="border-style"] {
	padding: var( --space-4 ) var( --space-3 );
}

.tdr-prose .row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var( --space-4 );
}

.tdr-prose .row + .row {
	margin-top: var( --space-3 );
}

.tdr-prose [class*="col-"] {
	flex: 1 1 100%;
	min-width: 0;
}

@media ( min-width: 640px ) {
	.tdr-prose .col-12 {
		flex-basis: 100%;
	}

	.tdr-prose .col-8 {
		flex-basis: calc( 66.6667% - var( --space-4 ) );
	}

	.tdr-prose .col-6 {
		flex-basis: calc( 50% - var( --space-4 ) );
	}

	.tdr-prose .col-4 {
		flex-basis: calc( 33.3333% - var( --space-4 ) );
	}

	.tdr-prose .col-3 {
		flex-basis: calc( 25% - var( --space-4 ) );
	}

	.tdr-prose .col-2 {
		flex-basis: calc( 16.6667% - var( --space-4 ) );
	}

	.tdr-prose .col-2-0 {
		flex-basis: calc( 50% - var( --space-4 ) );
	}

	.tdr-prose .col-7-6 {
		flex: 1 1 260px;
	}
}

@media ( min-width: 900px ) {
	.tdr-prose .col-2-0 {
		flex-basis: calc( 20% - var( --space-4 ) );
	}
}

/* Spacer divs — height comes from inline style; these just ensure an empty
   block box still renders at that height. */
.tdr-prose .gap,
.tdr-prose .element-gap {
	display: block;
	width: 100%;
}

/* Now-empty mattress-section placeholders (verified via wp db query);
   collapsing the outer .finalwidth/.high wrapper too avoids a dead gap. */

.tdr-prose .mattress-bottom-section:empty,
.tdr-prose .mattress-middle-section:empty {
	display: none;
}

.tdr-prose .finalwidth:has( .mattress-bottom-section:empty ),
.tdr-prose .finalwidth:has( .mattress-middle-section:empty ),
.tdr-prose .high:has( .mattress-bottom-section:empty ),
.tdr-prose .high:has( .mattress-middle-section:empty ) {
	display: none;
}

/* Same dead-section problem, different wrapper: `.classaddbottom` is a
   closing footer band on 5 topic Pages, confirmed empty via wp db query. */
.tdr-prose .classaddbottom:has( .cs-ta-center:empty ),
.tdr-prose .classaddbottom:has( .mattress-bottom-section:empty ),
.tdr-prose .classaddbottom:has( .mattress-middle-section:empty ) {
	display: none;
}

/* Consolidated jump-links nav — inc/review-data.php's
   tdr_prose_consolidate_jumplinks() replaces the raw desktop-row +
   mobile-accordion duplicate below with ONE `<nav class="tdrb-jumplinks">`
   per page, deduplicated by anchor id. A label-caps pill row, the same
   treatment as `.tdrh-badge` (32-review-hero.css) and the legacy desktop
   nav's own `.hover` links just below. */

.tdr-prose .tdrb-jumplinks {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-2 );
	margin: var( --space-4 ) 0;
	padding-block: var( --space-3 );
	border-top: 1px solid var( --c-line );
	border-bottom: 1px solid var( --c-line );
}

.tdr-prose .tdrb-jumplinks a {
	padding: .5em 1.1em;
	border: 1px solid var( --c-line-strong );
	border-radius: var( --radius-sm );
	background: var( --c-surface );
	color: var( --c-ink-2 );
	font-family: var( --font-sans );
	font-size: var( --step--1 );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.tdr-prose .tdrb-jumplinks a:hover,
.tdr-prose .tdrb-jumplinks a:focus-visible {
	background: var( --c-accent );
	border-color: var( --c-accent );
	color: var( --c-on-accent );
}

/* Responsive jump-nav pair: 5-link row (desktop) vs. accordion (mobile),
   restoring the swap the legacy per-breakpoint JS used to do, at 900px.
   This is the RAW fallback shape — still needed for the rare cluster
   tdr_prose_consolidate_jumplinks() leaves untouched as too ambiguous to
   safely merge (see that function's docblock). */

.tdr-prose .row.cs-hide-xs.cs-hide-sm {
	display: none;
	padding-block: var( --space-2 );
	border-top: 1px solid var( --c-line );
	border-bottom: 1px solid var( --c-line );
}

@media ( min-width: 900px ) {
	.tdr-prose .row.cs-hide-xs.cs-hide-sm {
		display: flex;
	}
}

.tdr-prose .row.cs-hide-xs.cs-hide-sm .hover {
	font-size: var( --step--1 );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.tdr-prose .row.cs-hide-md.cs-hide-lg.cs-hide-xl {
	display: flex;
}

@media ( min-width: 900px ) {
	.tdr-prose .row.cs-hide-md.cs-hide-lg.cs-hide-xl {
		display: none;
	}
}

.tdr-prose .mobile-only-accordion {
	display: block;
}

@media ( min-width: 900px ) {
	.tdr-prose .mobile-only-accordion {
		display: none;
	}
}

/* `.x-hide-*` — same family as `.cs-hide-*`, different builder generation.
   Hiding is scoped inside the media query so a shown element falls
   through to its own normal display instead of a guess. */

@media ( max-width: 899.98px ) {
	.tdr-prose .x-hide-xs.x-hide-sm {
		display: none;
	}
}

@media ( max-width: 1199.98px ) {
	.tdr-prose .x-hide-xs.x-hide-sm.x-hide-md {
		display: none;
	}
}

@media ( min-width: 900px ) {
	.tdr-prose .x-hide-md.x-hide-lg.x-hide-xl {
		display: none;
	}
}

.tdr-prose .mobile-only-accordion,
.tdr-prose .accordion > .accordion-item {
	margin: var( --space-3 ) 0;
	padding: var( --space-3 ) var( --space-4 );
	border: 1px solid var( --c-line );
	border-radius: var( --radius );
}

.tdr-prose .accordion-title,
.tdr-prose .accordion-header {
	display: flex;
	align-items: center;
	gap: var( --space-2 );
	font-weight: 700;
	color: var( --c-ink-2 );
}

.tdr-prose .accordion-title::before,
.tdr-prose .accordion-header::before {
	content: '';
	flex: 0 0 auto;
	width: .5em;
	height: .5em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg );
}

.tdr-prose .accordion-content {
	display: flex;
	flex-direction: column;
	gap: var( --space-2 );
	margin-top: var( --space-3 );
}

.tdr-prose .accordion-content p {
	margin: 0;
}

/* feature-box family — layer breakdowns: feature-list > feature-box >
   feature-box-graphic (inline color, kept) + -content > -title/-text */

.tdr-prose .feature-list {
	display: flex;
	flex-direction: column;
	gap: var( --space-4 );
	margin: var( --space-4 ) 0;
	padding: 0;
}

.tdr-prose .feature-box {
	display: flex;
	align-items: flex-start;
	gap: var( --space-3 );
	padding-bottom: var( --space-4 );
	border-bottom: 1px solid var( --c-line );
}

.tdr-prose .feature-box:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.tdr-prose .feature-box-graphic {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-top: .3em;
	border-radius: 4px;
	/* background-color is inline per layer — intentionally kept */
}

.tdr-prose .feature-box-content {
	flex: 1 1 auto;
	min-width: 0;
}

.tdr-prose .feature-box-title {
	margin: 0 0 var( --space-1 );
	font-size: var( --step-0 );
	font-weight: 700;
	color: var( --c-ink-2 );
}

.tdr-prose .feature-box-text {
	color: var( --c-mut );
	line-height: 1.6;
}

/* pricing-table family. Often doubly-nested; `display:contents` on the
   inner duplicate makes .pricing-column direct items of the outer row. */

.tdr-prose [class*="pricing-table"] {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-3 );
	margin: 0;
	padding: 0;
}

.tdr-prose [class*="pricing-table"]:empty {
	display: none;
}

.tdr-prose [class*="pricing-table"] [class*="pricing-table"] {
	display: contents;
}

.tdr-prose .pricing-column {
	flex: 1 1 100%;
	box-sizing: border-box;
	padding: var( --space-4 ) var( --space-3 );
	border: 1px solid var( --c-line );
	border-radius: var( --radius );
	background: var( --c-surface );
	text-align: center;
}

/* Sand "zebra" tint on alternating columns — DESIGN.md's price-table
   stripe treatment, adapted from rows to side-by-side columns since this
   legacy markup lays pricing options out horizontally, not as a table. */
.tdr-prose .pricing-column:nth-child( even ) {
	background: rgba( var( --c-tertiary-rgb ), .25 );
}

@media ( min-width: 640px ) {
	.tdr-prose .pricing-column {
		flex-basis: calc( 50% - var( --space-3 ) );
	}
}

@media ( min-width: 900px ) {
	.tdr-prose .pricing-column {
		flex-basis: calc( 20% - var( --space-3 ) );
	}
}

.tdr-prose .pricing-column-header {
	margin-bottom: var( --space-2 );
}

.tdr-prose .pricing-column-title {
	margin: 0;
	font-size: var( --step--1 );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var( --c-mut );
}

.tdr-prose .pricing-column-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 2px;
	font-weight: 800;
	color: var( --c-ink-2 );
}

.tdr-prose .pricing-column-currency {
	font-size: var( --step-1 );
}

.tdr-prose .pricing-column-amount {
	font-size: var( --step-3 );
}

.tdr-prose .pricing-column-content:empty {
	display: none;
}

.tdr-prose .pricing-column-content:not( :empty ) {
	margin-top: var( --space-3 );
	font-size: var( --step--1 );
	color: var( --c-mut );
}

/* promo-box family: promo-content > promo-title (h3) + promo-message (p) +
   promo-button (a, shares the .btn look below). */

.tdr-prose .promo-box {
	margin: var( --space-4 ) 0;
	padding: var( --space-5 ) var( --space-4 );
	border: 0;
	border-radius: var( --radius-lg );
	background: var( --c-accent );
	color: rgba( 255, 255, 255, .9 );
	text-align: center;
}

.tdr-prose .promo-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --space-2 );
}

.tdr-prose .promo-title {
	margin: 0;
	font-size: var( --step-2 );
	font-weight: 700; /* Libre Caslon Text ships 400/700 only — avoid synthetic-bold 800 */
	color: #fff;
}

.tdr-prose .promo-message {
	margin: 0;
	color: rgba( 255, 255, 255, .78 );
}

/* counter-box: big stat number + label, alone or gridded via .row/.col-*. */

.tdr-prose .counter-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var( --space-4 ) var( --space-3 );
	background: var( --c-surface );
	border-radius: var( --radius );
	box-shadow: var( --shadow-sm );
	text-align: center;
}

.tdr-prose .counter-number {
	font-size: var( --step-4 );
	font-weight: 800;
	line-height: 1;
	color: var( --c-accent );
}

.tdr-prose .counter-text {
	font-size: var( --step--1 );
	color: var( --c-mut );
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Rating bars: inline width%/color on .skill-bar are the real value, kept
   as-is; label moved outside the fill so it stays legible at any width. */

.tdr-prose .skill-bar-container {
	position: relative;
	height: 10px;
	margin-block: var( --space-3 );
	background: var( --c-line );
	border-radius: 999px;
	overflow: visible;
}

.tdr-prose .skill-bar {
	position: relative;
	height: 100%;
	min-width: 10px;
	/* Caps a high inline width% so fill + label together can't overflow the
	   container's right edge on narrow viewports. */
	max-width: calc( 100% - 3.75em );
	border-radius: 999px;
}

.tdr-prose .skill-bar-text {
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY( -50% );
	margin-left: var( --space-2 );
	white-space: nowrap;
	font-size: var( --step--1 );
	font-weight: 700;
	color: var( --c-ink-2 );
}

/* icon-list: markup varies (<li> vs. a newer <div class="…standalone">),
   styled identically regardless of tag. */

.tdr-prose .icon-list {
	display: flex;
	flex-direction: column;
	gap: var( --space-2 );
	margin: var( --space-3 ) 0;
	padding: 0;
	list-style: none;
}

.tdr-prose .icon-list-item {
	display: flex;
	align-items: flex-start;
	gap: var( --space-2 );
	line-height: 1.5;
}

/* Font Awesome glyph shims — FA is gone; CSS-only replacements inherit
   currentColor (a more-specific inline color still wins). */

.tdr-prose .fa-check,
.tdr-prose .fa-times,
.tdr-prose .fa-check-circle-o,
.tdr-prose .fa-times-circle-o {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	margin-top: .15em;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
}

.tdr-prose .fa-check::before,
.tdr-prose .fa-times::before,
.tdr-prose .fa-check-circle-o::before,
.tdr-prose .fa-times-circle-o::before {
	line-height: 1;
}

.tdr-prose .fa-check::before {
	content: "\2713";
	color: var( --tdr-legacy-green );
}

.tdr-prose .fa-times::before {
	content: "\2715";
	color: var( --tdr-legacy-red );
}

.tdr-prose .fa-check-circle-o,
.tdr-prose .fa-times-circle-o {
	width: 1.2em;
	height: 1.2em;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}

.tdr-prose .fa-check-circle-o::before {
	content: "\2713";
	font-size: .7em;
	color: var( --tdr-legacy-green );
}

.tdr-prose .fa-times-circle-o::before {
	content: "\2715";
	font-size: .7em;
	color: var( --tdr-legacy-red );
}

/* .btn/.btn-primary/.promo-button mirror .tdr-btn (15-base.css) exactly:
   rectangular slate-blue CTA + trailing arrow chip. Inert `href="#"`
   anchors styled the same. */

.tdr-prose .btn,
.tdr-prose .promo-button {
	display: inline-flex;
	align-items: center;
	gap: var( --space-3 );
	padding: .8em .8em .8em 1.4em;
	border: 1px solid var( --c-accent );
	border-radius: var( --radius-sm );
	background: var( --c-accent );
	color: #fff;
	font-weight: 700;
	font-size: .76rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s ease, transform .15s ease;
}

.tdr-prose .btn::after,
.tdr-prose .promo-button::after {
	content: "";
	flex: 0 0 auto;
	width: 1.9em;
	height: 1.9em;
	border-radius: 50%;
	background-color: #fff;
	background-image: var( --icon-arrow-dark );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 52%;
}

.tdr-prose .btn:hover,
.tdr-prose .promo-button:hover {
	background: var( --c-accent-2 );
	border-color: var( --c-accent-2 );
	transform: translateY( -1px );
}

/* A .promo-button inside the dark-olive .promo-box (above) flips to a
   white pill so it doesn't disappear against its own background. */
.tdr-prose .promo-box .btn,
.tdr-prose .promo-box .promo-button {
	background: #fff;
	border-color: #fff;
	color: var( --c-ink );
}

.tdr-prose .promo-box .btn::after,
.tdr-prose .promo-box .promo-button::after {
	background-color: var( --c-accent );
	background-image: var( --icon-arrow-light );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 52%;
}

.tdr-prose .img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var( --radius );
}

/* .col-2-0 doubles as a 5-item desktop jump-nav row and, in posts 19044 /
   10422, a bare <h1> score + /10. Both read as the reference's rounded
   white "filter chip" stat pills. */

.tdr-prose .col-2-0 {
	background: var( --c-surface );
	border-radius: var( --radius-sm );
	box-shadow: var( --shadow-sm );
	padding: var( --space-2 ) var( --space-4 );
}

.tdr-prose .col-2-0 h1 {
	margin: 0;
	font-size: var( --step-5 );
	font-weight: 700; /* Libre Caslon Text ships 400/700 only — avoid synthetic-bold 800 */
	line-height: 1;
	color: var( --c-accent );
}

.tdr-prose .col-2-0 h1 + p {
	margin-top: var( --space-1 );
	font-weight: 700;
}

/* A legacy in-page <h1> demoted to <h2> for single-H1 hygiene (page.php,
   Wave 3 — e.g. the "404-missing" page's own "OOPS" heading) keeps the
   same font-size a real <h1> would have had (15-base.css: h1 is
   --step-5, h2 is --step-4) so the tag change is invisible on the page. */
.tdr-prose .tdr-demoted-h1 {
	font-size: var( --step-5 );
}

/* Small text/spacing utilities. Kept last so their higher specificity
   (two classes) wins over heading/paragraph rules without `!important`. */

.tdr-prose .mtn {
	margin-top: 0;
}

.tdr-prose .mts {
	margin-top: var( --space-2 );
}

.tdr-prose .mtm {
	margin-top: var( --space-4 );
}

.tdr-prose .mbn {
	margin-bottom: 0;
}

.tdr-prose .mbm {
	margin-bottom: var( --space-4 );
}

.tdr-prose .cs-ta-center,
.tdr-prose .center-text {
	text-align: center;
}

.tdr-prose .cs-ta-left {
	text-align: left;
}

.tdr-prose .small {
	font-size: var( --step--1 );
}

.tdr-prose .boldfont {
	font-weight: 700;
}

.tdr-prose .w40 {
	font-weight: 400;
}

.tdr-prose .cardo {
	font-family: var( --font-sans );
}

.tdr-prose .p1 {
	margin: 0;
}

.tdr-prose .white,
.tdr-prose .colwhite {
	color: #fff;
}

.tdr-prose .hover {
	color: var( --c-ink );
	text-decoration: none;
}

.tdr-prose .hover:hover,
.tdr-prose .hover:focus-visible {
	text-decoration: underline;
}
/* 30-single.css — article typography, breadcrumbs, accordions, notices,
   [coupon]/[wptrigger] shortcode components, the coupon reveal dialog, and
   the related-posts strip. The review/coupon article hero itself lives in
   32-review-hero.css (the tdrh-hero__* component library), not here.
   Article/page layout shares the nav's full `--container` width now;
   readable measure comes from `.tdr-prose`'s content|breakout grid below. */

/* Breadcrumbs — a small, muted chip row. */

.tdr-breadcrumbs {
	padding-top: var( --space-4 );
	padding-bottom: var( --space-2 );
}

.tdr-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --space-1 );
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var( --step--1 );
	color: var( --c-mut );
}

.tdr-breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: var( --space-1 );
}

.tdr-breadcrumbs__link,
.tdr-breadcrumbs__item [aria-current="page"] {
	display: inline-flex;
	align-items: center;
	padding: .3em .85em;
	border-radius: var( --radius-sm );
	background: var( --c-surface );
	border: 1px solid var( --c-line );
	color: var( --c-mut );
	text-decoration: none;
	font-weight: 600;
}

.tdr-breadcrumbs__item [aria-current="page"] {
	color: var( --c-ink );
	background: var( --c-bg-2 );
	border-color: transparent;
}

.tdr-breadcrumbs__link:hover,
.tdr-breadcrumbs__link:focus-visible {
	color: var( --c-accent );
	border-color: var( --c-accent );
}

.tdr-breadcrumbs__sep {
	color: var( --c-line );
}

.tdr-article {
	padding-bottom: var( --space-6 );
}

/* Prose: long-form article body. content|breakout grid — text capped at
   `--measure` (72ch) and centered; images/tables/legacy grids/coupon
   cards/etc. span both breakout columns to the full container width. */

.tdr-prose {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, var( --measure ) ) minmax( 0, 1fr );
	column-gap: var( --space-4 );
	font-size: var( --step-1 );
	line-height: 1.75;
	color: var( --c-ink );
}

.tdr-prose > * {
	grid-column: 2;
}

.tdr-prose > img,
.tdr-prose > figure,
.tdr-prose > table,
.tdr-prose > iframe,
.tdr-prose > .wp-block-table,
.tdr-prose > .wp-block-image,
.tdr-prose > .wp-block-gallery,
.tdr-prose > .wp-block-embed,
.tdr-prose > .wp-block-columns,
.tdr-prose > .row,
.tdr-prose > .finalwidth,
.tdr-prose > .high,
.tdr-prose > [class*="pricing-table"],
.tdr-prose > .promo-box,
.tdr-prose > .feature-list,
.tdr-prose > .tdr-coupon,
.tdr-prose > .tdr-trigger {
	grid-column: 1 / -1;
	width: 100%;
}

.tdr-prose > * + * {
	margin-top: var( --space-4 );
}

.tdr-prose p {
	margin: 0;
	max-width: none;
}

.tdr-prose h2,
.tdr-prose h3,
.tdr-prose h4 {
	color: var( --c-ink-2 );
	font-weight: 700; /* Libre Caslon Text ships 400/700 only — avoid synthetic-bold 800 */
	line-height: 1.3;
}

.tdr-prose h2 {
	margin-top: var( --space-6 );
	font-size: var( --step-3 );
}

.tdr-prose h3 {
	margin-top: var( --space-5 );
	font-size: var( --step-2 );
}

.tdr-prose h4 {
	margin-top: var( --space-4 );
	font-size: var( --step-1 );
}

.tdr-prose > h2:first-child,
.tdr-prose > h3:first-child {
	margin-top: 0;
}

/* Legacy `.high` color bands set a dark inline bg but don't reclass a bare
   heading dropped into them, which then reads dark-on-dark; forcing white
   is safe since every surviving `.high` bg in the DB is dark. */
.tdr-prose .high h1,
.tdr-prose .high h2,
.tdr-prose .high h3,
.tdr-prose .high h4,
.tdr-prose .high h5,
.tdr-prose .high h6 {
	color: #fff;
}

.tdr-prose a {
	color: var( --c-accent );
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* `.tdr-prose a` (0-1-1) otherwise beats `.tdr-btn`'s `color:#fff` (0-1-0)
   on a solid button rendered as an <a> — re-assert white for it here. */
.tdr-prose a.tdr-btn:not( .tdr-btn--ghost ):not( .tdr-btn--white ) {
	color: var( --c-on-accent );
}

.tdr-prose strong {
	font-weight: 700;
}

.tdr-prose ul,
.tdr-prose ol {
	padding-left: 1.25em;
}

.tdr-prose li + li {
	margin-top: var( --space-2 );
}

.tdr-prose li > ul,
.tdr-prose li > ol {
	margin-top: var( --space-2 );
}

.tdr-prose blockquote {
	margin: 0;
	padding: var( --space-4 );
	border: 0;
	border-radius: var( --radius );
	background: var( --c-bg-2 );
	font-style: italic;
	color: var( --c-ink-2 );
}

.tdr-prose blockquote p {
	margin: 0;
}

.tdr-prose blockquote p + p {
	margin-top: var( --space-2 );
}

.tdr-prose hr {
	border: 0;
	border-top: 1px solid var( --c-line );
	margin: var( --space-5 ) 0;
}

.tdr-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var( --radius-lg );
	display: block;
}

.tdr-prose figure {
	margin: 0;
}

.tdr-prose figure img {
	margin: 0 auto;
}

.tdr-prose figcaption,
.tdr-prose .wp-element-caption {
	margin-top: var( --space-2 );
	font-size: var( --step--1 );
	color: var( --c-mut );
	text-align: center;
}

.tdr-prose .alignleft {
	float: left;
	margin: 0 var( --space-4 ) var( --space-3 ) 0;
	max-width: 45%;
}

.tdr-prose .alignright {
	float: right;
	margin: 0 0 var( --space-3 ) var( --space-4 );
	max-width: 45%;
}

.tdr-prose .aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.tdr-prose table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var( --step-0 );
	border: 1px solid var( --c-line );
	border-radius: var( --radius );
	overflow: hidden;
}

.tdr-prose th,
.tdr-prose td {
	padding: var( --space-2 ) var( --space-3 );
	border-bottom: 1px solid var( --c-line );
	text-align: left;
	vertical-align: top;
}

.tdr-prose thead th {
	background: var( --c-bg-2 );
	font-weight: 700;
	color: var( --c-ink-2 );
}

.tdr-prose tr:last-child td {
	border-bottom: 0;
}

.tdr-prose table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tdr-prose code {
	font-size: .9em;
	padding: .15em .4em;
	background: var( --c-bg-2 );
	border-radius: 4px;
}

.tdr-prose pre {
	padding: var( --space-3 );
	background: var( --c-bg-2 );
	border-radius: var( --radius );
	overflow-x: auto;
}

.tdr-prose pre code {
	padding: 0;
	background: none;
}

/* Responsive embeds (e.g. wp:embed YouTube blocks) */
.tdr-prose .wp-block-embed__wrapper {
	position: relative;
}

.tdr-prose .wp-has-aspect-ratio .wp-block-embed__wrapper {
	padding-top: 56.25%; /* 16:9 fallback for browsers without aspect-ratio support */
}

.tdr-prose .wp-has-aspect-ratio .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: var( --radius );
}

.tdr-page-links {
	margin-top: var( --space-5 );
	font-size: var( --step--1 );
	color: var( --c-mut );
}

/* Accordions ([x_accordion_item] → <details class="tdr-accordion">) */

.tdr-accordion {
	background: var( --c-surface );
	border: 0;
	border-radius: var( --radius );
	box-shadow: var( --shadow-sm );
	padding: var( --space-3 ) var( --space-4 );
}

.tdr-accordion + .tdr-accordion {
	margin-top: var( --space-3 ) !important;
}

.tdr-accordion__summary {
	cursor: pointer;
	font-weight: 700;
	color: var( --c-ink-2 );
	list-style: none;
}

.tdr-accordion__summary::-webkit-details-marker {
	display: none;
}

.tdr-accordion__summary::before {
	content: '';
	display: inline-block;
	width: .5em;
	height: .5em;
	margin-right: var( --space-2 );
	border-right: 1.5px solid var( --c-accent );
	border-bottom: 1.5px solid var( --c-accent );
	transform: rotate( -45deg );
	transition: transform .15s ease;
}

.tdr-accordion[open] > .tdr-accordion__summary::before {
	transform: rotate( 45deg );
}

.tdr-accordion__content {
	margin-top: var( --space-3 );
	line-height: 1.7;
}

/* Notices ([alert type="info|success|warning|danger"]) */

.tdr-notice {
	padding: var( --space-3 ) var( --space-4 );
	border: 1px solid var( --c-line );
	border-left-width: 4px;
	border-left-style: solid;
	border-radius: var( --radius );
	background: var( --c-surface );
}

.tdr-notice--info {
	border-left-color: var( --c-accent );
}

/* Sage/terracotta rather than standard red/green, matching the review
   component library's pros/cons palette and DESIGN.md's "avoid standard
   red/green for a more sophisticated palette" guidance. `--danger` keeps a
   true error red — it flags a real failure state (e.g. a form error), not
   a brand warning, so diluting it toward terracotta would blur that
   signal. */
.tdr-notice--success {
	border-left-color: var( --c-secondary );
}

.tdr-notice--warning {
	border-left-color: var( --c-terracotta );
}

.tdr-notice--danger {
	border-left-color: var( --c-error );
}

/* Coupon shortcode ([coupon]) — big split offer-card: text left, olive
   CTA right. */

.tdr-coupon {
	display: flex;
	flex-direction: column;
	gap: var( --space-4 );
	border: 0;
	border-radius: var( --radius-lg );
	padding: var( --space-5 ) var( --space-4 );
	background: var( --c-surface );
	box-shadow: var( --shadow-md );
}

@media ( min-width: 640px ) {
	.tdr-coupon {
		flex-direction: row;
		align-items: center;
		padding: var( --space-5 );
	}
}

.tdr-coupon__media {
	flex: 0 0 auto;
	width: 100%;
}

@media ( min-width: 640px ) {
	.tdr-coupon__media {
		width: 160px;
	}
}

.tdr-coupon__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --radius );
}

.tdr-coupon__body {
	flex: 1 1 auto;
	min-width: 0;
}

.tdr-coupon__title {
	margin: 0 0 var( --space-2 );
	font-size: var( --step-2 );
	font-weight: 700; /* Libre Caslon Text ships 400/700 only — avoid synthetic-bold 800 */
	color: var( --c-ink-2 );
}

.tdr-coupon__desc {
	margin: 0 0 var( --space-3 );
	color: var( --c-mut );
}

.tdr-coupon__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var( --space-3 );
}

.tdr-coupon__actions .tdr-btn {
	width: 100%;
	justify-content: center;
}

/* Desktop: title+desc left, CTA actions right — grid-template-areas over
   .tdr-coupon__body's existing children, no extra wrapper markup needed. */
@media ( min-width: 900px ) {
	.tdr-coupon__body {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas: "title actions" "desc actions";
		align-items: center;
		column-gap: var( --space-5 );
		row-gap: var( --space-2 );
	}

	.tdr-coupon__title {
		grid-area: title;
		margin-bottom: 0;
	}

	.tdr-coupon__desc {
		grid-area: desc;
		margin-bottom: 0;
	}

	.tdr-coupon__actions {
		grid-area: actions;
		flex-direction: row;
		align-items: center;
	}

	.tdr-coupon__actions .tdr-btn {
		width: auto;
	}
}

/* wpautop() wraps a bare inline element after </details> in a stray <p>;
   `display:contents` makes that wrapper's box disappear so .tdr-coupon__cta
   stays a direct flex item. */
.tdr-coupon__actions > p {
	display: contents;
}

.tdr-coupon__reveal {
	flex: 0 0 auto;
}

.tdr-coupon__reveal summary {
	cursor: pointer;
	list-style: none;
}

.tdr-coupon__reveal summary::-webkit-details-marker {
	display: none;
}

.tdr-coupon__code-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --space-2 );
	margin-top: var( --space-2 );
	padding: var( --space-2 ) var( --space-3 );
	border: 1px dashed var( --c-line );
	border-radius: var( --radius-sm );
	background: var( --c-bg-2 );
}

.tdr-coupon__code {
	font-weight: 700;
	letter-spacing: .04em;
}

.tdr-coupon__copy {
	font-size: var( --step--1 );
	padding: var( --space-1 ) var( --space-3 );
	border: 1px solid var( --c-line );
	border-radius: var( --radius-sm );
	background: var( --c-surface );
	cursor: pointer;
	transition: opacity .15s ease;
}

.tdr-coupon__copy:hover {
	opacity: .7;
}

.tdr-coupon__copy.is-copied {
	border-color: var( --c-accent );
	color: var( --c-accent );
	font-weight: 700;
}

.tdr-coupon__go {
	font-size: var( --step--1 );
	color: var( --c-mut );
	text-decoration: underline;
}

/* Coupon reveal dialog (progressive enhancement over <details>) */

.tdr-coupon-dialog {
	max-width: min( 90vw, 380px );
	width: 100%;
	padding: var( --space-5 );
	border: 0;
	border-radius: var( --radius-lg );
	box-shadow: var( --shadow-lg );
}

.tdr-coupon-dialog::backdrop {
	background: rgba( var( --c-primary-rgb ), .55 );
}

.tdr-coupon-dialog__form {
	display: flex;
	flex-direction: column;
	gap: var( --space-3 );
	position: relative;
}

.tdr-coupon-dialog__close {
	position: absolute;
	top: calc( -1 * var( --space-3 ) );
	right: calc( -1 * var( --space-3 ) );
	width: 32px;
	height: 32px;
	border: 1px solid var( --c-line );
	border-radius: 50%;
	background: var( --c-surface );
	font-size: var( --step-1 );
	line-height: 1;
	cursor: pointer;
}

.tdr-coupon-dialog__label {
	margin: 0;
	font-size: var( --step--1 );
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var( --c-mut );
}

.tdr-coupon-dialog__code-row {
	display: flex;
	align-items: center;
	gap: var( --space-2 );
	padding: var( --space-3 );
	border: 1px dashed var( --c-line );
	border-radius: var( --radius );
	background: var( --c-bg-2 );
}

.tdr-coupon-dialog__code {
	flex: 1 1 auto;
	font-size: var( --step-1 );
	font-weight: 700;
	letter-spacing: .04em;
	word-break: break-word;
}

/* Coupon posts: style embedded /out/ links via attribute selector only,
   no content parsing (mirrors .tdr-btn — 15-base.css). Image-wrapping
   links excluded (no button chrome behind a photo). */

.tdr-article--coupon .tdr-prose a[href*="/out/"]:not(:has(img)) {
	display: inline-flex;
	align-items: center;
	gap: var( --space-3 );
	padding: .8em .8em .8em 1.4em;
	border-radius: var( --radius-sm );
	background: var( --c-accent );
	color: #fff;
	font-weight: 700;
	font-size: .76rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s ease, transform .15s ease;
}

.tdr-article--coupon .tdr-prose a[href*="/out/"]:not(:has(img))::after {
	content: "";
	flex: 0 0 auto;
	width: 1.9em;
	height: 1.9em;
	border-radius: 50%;
	background-color: #fff;
	background-image: var( --icon-arrow-dark );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 52%;
}

.tdr-article--coupon .tdr-prose a[href*="/out/"]:not(:has(img)):hover,
.tdr-article--coupon .tdr-prose a[href*="/out/"]:not(:has(img)):focus-visible {
	background: var( --c-accent-2 );
	transform: translateY( -1px );
}

/* [wptrigger] zip-gate CTA box */

.tdr-trigger {
	margin: var( --space-5 ) 0;
	padding: var( --space-5 ) var( --space-4 );
	border: 0;
	border-radius: var( --radius-lg );
	background: var( --c-bg-2 );
	text-align: center;
}

.tdr-trigger__form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var( --space-2 );
}

.tdr-trigger__input {
	flex: 1 1 200px;
	max-width: 240px;
	padding: var( --space-2 ) var( --space-3 );
	border: 1px solid var( --c-line );
	border-radius: var( --radius-sm );
	background: var( --c-surface );
	font: inherit;
	font-size: var( --step-0 );
}

.tdr-trigger__input:focus-visible {
	outline: 2px solid var( --c-accent );
	outline-offset: 2px;
}

.tdr-trigger__submit:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.tdr-trigger__result {
	margin-top: var( --space-4 );
}

.tdr-trigger__result img {
	max-width: 100%;
	height: auto;
	border-radius: var( --radius );
}

.tdr-trigger__result > * + * {
	margin-top: var( --space-3 );
}

/* Related strip — photo cards, bottom-left white overlay title + a
   circle-arrow chip bottom-right. Descendant-selector override of the
   shared card.php markup, scoped via the `.tdr-related` wrapper
   tdr_related_strip() (inc/template-tags.php) renders around it. */

.tdr-related {
	padding-top: var( --space-6 );
	padding-bottom: var( --space-6 );
}

.tdr-related__title {
	margin: 0 0 var( --space-4 );
	font-size: var( --step-2 );
	font-weight: 700; /* Libre Caslon Text ships 400/700 only — avoid synthetic-bold 800 */
	color: var( --c-ink-2 );
}

@media ( min-width: 900px ) {
	.tdr-related .tdr-grid--cards {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.tdr-related .tdr-card {
	position: relative;
	aspect-ratio: 4 / 5;
	box-shadow: none;
}

.tdr-related .tdr-card:hover {
	box-shadow: none;
}

.tdr-related .tdr-card__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	height: 100%;
}

.tdr-related .tdr-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 0deg, rgba( var( --c-primary-rgb ), .85 ) 0%, rgba( var( --c-primary-rgb ), .1 ) 55%, rgba( var( --c-primary-rgb ), 0 ) 75% );
}

.tdr-related .tdr-card__body {
	position: relative;
	z-index: 1;
	margin-top: auto;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: var( --space-3 );
	padding: var( --space-4 );
}

.tdr-related .tdr-card__eyebrow,
.tdr-related .tdr-card__excerpt {
	display: none;
}

.tdr-related .tdr-card__title {
	color: #fff;
	margin: 0;
}

.tdr-related .tdr-card__title a {
	color: #fff;
}

.tdr-related .tdr-card__meta {
	margin-top: var( --space-1 );
	padding-top: 0;
}

.tdr-related .tdr-card__date {
	color: rgba( 255, 255, 255, .78 );
}

/* Circle-arrow chip, bottom-right, matching the .tdr-btn::after chip. */
.tdr-related .tdr-card__body::after {
	content: "";
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: #fff;
	background-image: var( --icon-arrow-dark );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 46%;
}
/**
 * 32-review-hero.css — review-article component library, part 1: the
 * shared eyebrow/label atom, the reveal-on-scroll utility, the hero
 * section (badges, stats, CTA, media/quote-card), and the disclosure /
 * quick-jump-nav strip that typically sits just under it.
 *
 * Promoted from 51-style-h.css (Wave 1: "Ethereal Sleep Heritage" rollout).
 * Formerly scoped under `body.tdr-style-h` — that prefix is stripped here,
 * so every `tdrh-*` class below is now a global, reusable component API
 * (unchanged class names, unchanged values) rather than a page-specific
 * skin. Page-specific fine-tuning for the six pinned reference posts
 * (Nest Bedding, Carnivore Club, chiliPAD, Alexander Signature Hybrid,
 * Clutter, Vienna) lives in 37-style-h-l-overrides.css, which loads after
 * this file and wins on those pages via a more specific
 * `body.tdr-style-{h,l,m,n,o,p}` selector — everywhere else just gets the
 * rules below.
 *
 * All color/radius/font values are 10-tokens.css tokens (no literals);
 * `.tdrh-review` and friends carried their own `--h-*` custom properties
 * before this promotion — those are gone now, replaced one-for-one by the
 * equivalent global `--c-*`/`--font-*`/`--radius-*` token, so nothing here
 * renders differently than it did under the old scoped stylesheet.
 */

.tdrh-review {
	overflow: hidden;
	font-family: var(--font-sans);
	padding-bottom: clamp(4rem, 8vw, 7rem);
}

.tdrh-review * {
	box-sizing: border-box;
}

.tdrh-eyebrow {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--font-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .35em;
	text-transform: uppercase;
	color: var(--c-secondary);
}

/* Shared section width (this file's share of it — hero only; the other
   sections in the shared list live with their own component group). */
.tdrh-hero {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* Reveal-on-scroll: visible by default (no JS / reduced motion); the JS
   toggle in content-review-h.php only switches on the animated state once
   observed (adds `.tdrh-js` to <body> and `.is-visible` per section). */
.tdrh-reveal {
	opacity: 1;
	transform: none;
}

body.tdrh-js .tdrh-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .9s ease, transform .9s ease;
}

body.tdrh-js .tdrh-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	body.tdrh-js .tdrh-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ============ HERO ============ */

.tdrh-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3.5rem;
	padding-top: 3.5rem;
	padding-bottom: clamp(3rem, 8vw, 6rem);
}

.tdrh-badges {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: 1.75rem;
}

.tdrh-badge {
	padding: .45rem 1rem;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-sm);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-primary);
	background: var(--c-surface);
}

.tdrh-badge:first-child {
	background: var(--c-secondary-fixed);
	border-color: transparent;
	color: var(--c-secondary-fixed-2);
}

.tdrh-hero__title {
	max-width: 14ch;
	margin: 0 0 1.5rem;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(2.5rem, 8vw, 4.5rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--c-primary);
}

/* Optional word-wrap/emphasis spans inside the hero title (not every
   review needs them — plain text titles work with no markup change). */
.tdrh-hero__title span,
.tdrh-hero__title em {
	display: block;
}

.tdrh-hero__title em {
	font-weight: 400;
	font-style: italic;
}

.tdrh-hero__dek {
	max-width: 36rem;
	margin: 0 0 2.5rem;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(1.15rem, 2.4vw, 1.4rem);
	line-height: 1.55;
	color: var(--c-mut);
}

.tdrh-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem 2rem;
	margin: 0 0 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--c-line);
}

.tdrh-stat {
	display: flex;
	flex-direction: column;
	gap: .55rem;
}

.tdrh-stat__label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-outline);
}

.tdrh-stat__value {
	font-family: var(--font-serif);
	font-size: 1.35rem;
	color: var(--c-ink);
}

.tdrh-stat__value--rating {
	font-size: 2.2rem;
	color: var(--c-primary);
}

.tdrh-stat__value small {
	margin-left: .2rem;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--c-outline);
}

.tdrh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
}

.tdrh-cta {
	display: inline-flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.1rem 1.75rem;
	border: 1px solid var(--c-primary);
	border-radius: var(--radius-sm);
	background: var(--c-primary);
	color: var(--c-on-primary);
	font-family: var(--font-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}

.tdrh-cta:hover {
	background: var(--c-primary-container);
	transform: translateY(-2px);
}

.tdrh-cta__icon {
	display: inline-flex;
	width: 1.1rem;
	height: 1.1rem;
	transition: transform .2s ease;
}

.tdrh-cta:hover .tdrh-cta__icon {
	transform: translate(2px, -2px);
}

.tdrh-cta__icon svg {
	width: 100%;
	height: 100%;
}

.tdrh-cta--ghost {
	background: transparent;
	border-color: var(--c-outline);
	color: var(--c-primary);
}

.tdrh-cta--ghost:hover {
	background: var(--c-bg-3);
	transform: translateY(-2px);
}

.tdrh-hero__meta {
	font-size: .8rem;
	color: var(--c-mut);
}

.tdrh-hero__media {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Grid-blowout guard: without this, the figure's intrinsic width
	   (aspect-ratio × the min-height floor — huge for ultra-wide images
	   like 1920/680) inflates the grid track itself past the container,
	   and no max-width on the figure can save the layout. min-width: 0
	   lets the track hold its 0.95fr share so the figure's own caps bite. */
	min-width: 0;
}

.tdrh-hero__figure {
	min-width: 0;
}

/* Centered on the figure's own axis (owner request) — the shape used to be
   anchored top-right, which drifted off-center whenever the photo rendered
   narrower than the column. Slight top overshoot + rotation keep the
   layered, hand-placed feel. */
.tdrh-hero__shape {
	position: absolute;
	top: -2.5rem;
	left: 50%;
	/* Capped in step with the figure (38rem + overshoot / 35rem + overshoot):
	   sizing off the raw media column let the shape sprawl to ~1000px behind
	   a capped ~600px photo on wide screens. */
	width: min(44rem, 110%);
	height: min(34rem, 96%);
	background: rgba(var(--c-tertiary-rgb), .45);
	border-radius: 3rem;
	transform: translateX(-50%) rotate(-3deg);
	z-index: 0;
}

.tdrh-quote-card {
	align-self: flex-start;
}

.tdrh-hero__figure {
	position: relative;
	z-index: 1;
	margin: 0;
	/* Width cap (owner rule): in the centered flex column an ultra-wide
	   image would otherwise derive its width from the height floor × its
	   own ratio and blow far past the column. Full column width up to an
	   editorial max; cover-crop absorbs whatever the ratio wanted. */
	width: 100%;
	max-width: min(38rem, 100%);
	aspect-ratio: 4 / 3;
	/* Height band (owner rule): the figure may prefer the image's own
	   aspect-ratio (inline style, CLS reservation) but is clamped into a
	   consistent range — portrait photos no longer tower, skinny legacy
	   banners no longer collapse. Cover-crop absorbs the difference. */
	min-height: clamp(20rem, 32.5vw, 27.5rem);
	max-height: clamp(25rem, 42.5vw, 35rem);
	overflow: hidden;
	border-radius: var(--radius-2xl);
	box-shadow: 0 40px 80px -30px rgba(var(--c-primary-rgb), .22);
}

.tdrh-hero__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 45%;
}

.tdrh-quote-card {
	position: relative;
	z-index: 2;
	max-width: 15.5rem;
	margin: -3rem 0 0 1.5rem;
	padding: 1.5rem 1.6rem;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: var(--c-surface);
	box-shadow: 0 20px 45px -20px rgba(var(--c-primary-rgb), .25);
}

.tdrh-quote-card__mark {
	display: inline-flex;
	width: 1.4rem;
	height: 1.4rem;
	margin-bottom: .6rem;
	color: var(--c-secondary);
}

.tdrh-quote-card__mark svg {
	width: 100%;
	height: 100%;
}

.tdrh-quote-card p {
	margin: 0 0 .6rem;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.05rem;
	line-height: 1.35;
	color: var(--c-ink);
}

.tdrh-quote-card__by {
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-outline);
}

/* ============ QUICK NAV / DISCLOSURE ============ */

.tdrh-jumpnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.25rem;
	max-width: var(--container);
	margin: 0 auto;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
}

.tdrh-disclosure {
	padding: .85rem 1.25rem;
	border-bottom: 1px solid rgba(var(--c-line-strong-rgb), .35);
	background: var(--c-bg-2);
	font: 700 .62rem/1 var(--font-sans);
	letter-spacing: .2em;
	text-align: center;
	text-transform: uppercase;
	color: rgba(var(--c-mut-rgb), .7);
}

.tdrh-jumpnav__caption {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-outline);
}

.tdrh-jumpnav a {
	font-size: .82rem;
	font-weight: 600;
	color: var(--c-primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.tdrh-jumpnav a:hover {
	border-bottom-color: currentColor;
}

/* ============ Responsive: ≥900px picks up the desktop / "lg" layout ============ */

@media (min-width: 900px) {
	/* Top-aligned, fixed inset (owner rule): centering made the image's
	   distance from the nav depend on each page's text-column height —
	   short heroes rode high, tall ones sat low. Now the media tops out at
	   the same 2.5rem inset on every page (the inset also clears the
	   shape's -2.5rem overshoot so it never kisses the header). */
	.tdrh-hero {
		grid-template-columns: 1.05fr .95fr;
		align-items: start;
		gap: 4.5rem;
	}

	.tdrh-hero__media {
		margin-top: 2.5rem;
	}

	.tdrh-hero__title {
		max-width: 11ch;
	}

	/* Flex, not grid: shared grid tracks let a wide entry on row 2 ("Best
	   For: Sleepers Who Know…") inflate column 1, stranding a short "9.4/10"
	   in a huge track with a weird gap after it. Natural widths per entry. */
	.tdrh-stats {
		display: flex;
		flex-wrap: wrap;
		gap: 1.75rem 3rem;
	}
}

@media (min-width: 1200px) {
	.tdrh-hero__title {
		font-size: 4.75rem;
	}
}

/* ============ Length-aware title scale (hero.php sets the modifier) ============
   Compound selectors out-rank every single-class .tdrh-hero__title rule above
   (including the wide-viewport 4.75rem bump), so a long title's scale holds
   at every breakpoint. Targets ~2 balanced rows for typical long SEO titles. */

.tdrh-hero__title {
	text-wrap: balance;
}

.tdrh-hero__title.tdrh-hero__title--long {
	max-width: 24ch;
	font-size: clamp(2.1rem, 5.5vw, 3.4rem);
	line-height: 1.08;
}

.tdrh-hero__title.tdrh-hero__title--xlong {
	max-width: 32ch;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1.14;
}
/**
 * 33-review-verdict-proscons.css — review-article component library,
 * part 2: "The Verdict" (drop cap + watermark), and the Pros/Cons card
 * pair. See 32-review-hero.css for the promotion/scoping notes shared by
 * every file in this component library (32/33/34/36) — same rules, unless
 * noted, just under a new file name and with `body.tdr-style-h` stripped.
 */

/* ============ VERDICT ============ */

.tdrh-verdict {
	position: relative;
	padding: clamp(3rem, 8vw, 6rem) 0;
	background: var(--c-surface);
}

.tdrh-verdict__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 1.25rem;
	position: relative;
}

.tdrh-verdict__heading {
	max-width: 40rem;
	margin: 0 0 2rem;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(1.9rem, 5vw, 3.2rem);
	line-height: 1.15;
	color: var(--c-primary);
}

.tdrh-verdict__cols {
	position: relative;
	z-index: 1;
	max-width: 62rem;
}

.tdrh-verdict__cols p {
	margin: 0 0 1.1rem;
	font-family: var(--font-sans);
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--c-mut);
}

.tdrh-dropcap::first-letter {
	float: left;
	margin: .05em .18em 0 0;
	font-family: var(--font-serif);
	font-size: 4rem;
	line-height: .82;
	color: var(--c-primary);
}

.tdrh-watermark {
	position: absolute;
	top: -1rem;
	right: 0;
	z-index: 0;
	font-family: var(--font-serif);
	font-size: clamp(6rem, 18vw, 15rem);
	line-height: 1;
	color: var(--c-primary);
	opacity: .05;
	user-select: none;
	pointer-events: none;
}

/* ============ PROS & CONS ============ */

.tdrh-proscons {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	padding-block: clamp(3rem, 7vw, 5rem);
}

.tdrh-section-title {
	grid-column: 1 / -1;
	margin: 0 0 .5rem;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.6rem, 4vw, 2.1rem);
	color: var(--c-primary);
}

.tdrh-card {
	padding: 2rem;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-2xl);
	background: var(--c-surface);
}

.tdrh-card--cons {
	background: var(--c-bg-2);
}

.tdrh-card__kicker {
	display: block;
	margin-bottom: .75rem;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-outline);
}

.tdrh-card h3 {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.75rem;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--c-secondary);
}

.tdrh-card--cons h3 {
	color: var(--c-terracotta);
}

.tdrh-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	flex: 0 0 auto;
	border: 1px solid currentColor;
	border-radius: var(--radius-full);
	color: inherit;
	opacity: .8;
}

.tdrh-card__icon svg {
	width: 1.1rem;
	height: 1.1rem;
}

.tdrh-card ul {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tdrh-card li {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--c-ink);
}

.tdrh-li-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 1.35rem;
	height: 1.35rem;
	margin-top: .15rem;
	padding: .28rem;
	border-radius: var(--radius-full);
	background: var(--c-secondary-fixed);
	color: var(--c-secondary-fixed-2);
}

.tdrh-card--cons .tdrh-li-icon {
	background: rgba(var(--c-terracotta-rgb), .16);
	color: var(--c-terracotta);
}

.tdrh-li-icon svg {
	width: 100%;
	height: 100%;
}

/* ============ Responsive: ≥900px picks up the desktop / "lg" layout ============ */

@media (min-width: 900px) {
	.tdrh-verdict__inner {
		display: block;
		padding-left: 1.25rem;
	}

	.tdrh-verdict__rule {
		position: absolute;
		left: max(.25rem, calc((100vw - var(--container)) / 2 + .25rem));
		width: 1px;
		height: 16rem;
		margin: 0;
		background: var(--c-line);
	}

	.tdrh-verdict__cols {
		columns: 2;
		column-gap: 3rem;
	}

	/* Paragraphs flow across the column break so the pair balances to
	   within a line — the left column always runs at least as deep as the
	   right (whole-paragraph atomicity let the balancer stack the right
	   side taller). Only the drop-cap opener stays atomic; widows/orphans
	   keep the break from stranding single lines. */
	.tdrh-verdict__cols p {
		orphans: 2;
		widows: 2;
	}

	.tdrh-verdict__cols p.tdrh-dropcap {
		break-inside: avoid;
	}

	.tdrh-proscons {
		grid-template-columns: repeat(2, 1fr);
		gap: 3rem;
	}

	.tdrh-card {
		padding: 3.5rem;
	}
}
/**
 * 34-review-handson-anatomy.css — review-article component library,
 * part 3: the "Hands-On Review" section (long-form copy + callout + the
 * sticky recommend card) and the product "Anatomy" breakdown (layer
 * diagram + numbered detail list). See 32-review-hero.css for the
 * promotion/scoping notes shared across this component library.
 */

/* ============ HANDS-ON REVIEW ============ */

.tdrh-handson {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	padding-block: clamp(3rem, 8vw, 6rem);
	background: var(--c-surface);
}

.tdrh-handson__main h2 {
	margin: 0 0 1.75rem;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(1.8rem, 4.5vw, 2.6rem);
	color: var(--c-primary);
}

.tdrh-handson__main p {
	margin: 0 0 1.25rem;
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--c-mut);
}

.tdrh-callout {
	position: relative;
	margin-top: 2.5rem;
	padding: 2.25rem;
	overflow: hidden;
	border-radius: var(--radius-2xl);
	background: var(--c-bg);
}

.tdrh-callout__icon {
	position: absolute;
	top: -1.5rem;
	right: -1.25rem;
	width: 7rem;
	height: 7rem;
	color: var(--c-primary);
	opacity: .06;
}

.tdrh-callout__icon svg {
	width: 100%;
	height: 100%;
}

.tdrh-callout h3 {
	position: relative;
	margin: 0 0 .85rem;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 1.35rem;
	color: var(--c-primary);
}

.tdrh-callout p {
	position: relative;
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--c-mut);
}

.tdrh-recommend__card {
	padding: 2.25rem;
	border-radius: var(--radius-2xl);
	background: var(--c-primary);
	color: var(--c-on-primary);
	box-shadow: 0 30px 60px -25px rgba(var(--c-primary-rgb), .45);
}

.tdrh-recommend__card h3 {
	margin: 0 0 1.75rem;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.3;
	color: var(--c-on-primary);
}

.tdrh-recommend__card ul {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tdrh-recommend__card li {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
}

.tdrh-recommend__icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	margin-top: .1rem;
	color: var(--c-secondary-fixed);
}

.tdrh-recommend__icon svg {
	width: 100%;
	height: 100%;
}

.tdrh-recommend__title {
	display: block;
	margin-bottom: .4rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .75;
}

.tdrh-recommend__card p {
	margin: 0;
	font-size: .98rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .88);
}

/* ============ ANATOMY ============ */

.tdrh-anatomy {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 1.25rem;
	padding-block: clamp(3rem, 8vw, 6rem);
	background: var(--c-bg-2);
}

.tdrh-anatomy__head {
	max-width: 40rem;
	margin: 0 auto clamp(2.5rem, 6vw, 4rem);
	text-align: center;
}

.tdrh-anatomy__head h2 {
	margin: 0 0 1rem;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.9rem, 4.5vw, 2.6rem);
	color: var(--c-primary);
}

.tdrh-anatomy__head p {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--c-mut);
}

.tdrh-anatomy__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}

.tdrh-diagram {
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow: hidden;
	border-radius: var(--radius);
	box-shadow: 0 1px 2px rgba(var(--c-ink-rgb), .08);
}

.tdrh-diagram__layer {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding-inline: 1.1rem;
	background: var(--c-surface);
}

.tdrh-diagram__layer:nth-child(3) {
	background: var(--c-tertiary);
}

.tdrh-diagram__layer:nth-child(5) {
	background: var(--c-primary);
	color: var(--c-on-primary);
}

.tdrh-diagram__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.4rem;
	height: 1.4rem;
	border: 1px solid currentColor;
	border-radius: var(--radius-full);
	font-size: .68rem;
	font-weight: 700;
	opacity: .7;
}

.tdrh-diagram__label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.4;
}

.tdrh-anatomy__details {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.tdrh-anatomy__detail {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
}

.tdrh-anatomy__detail-num {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(var(--c-primary-rgb), .2);
	border-radius: var(--radius-full);
	font-family: var(--font-serif);
	font-size: 1.1rem;
	color: var(--c-primary);
}

.tdrh-anatomy__detail h4 {
	margin: 0 0 .4rem;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--c-ink);
}

.tdrh-anatomy__detail p {
	margin: 0;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--c-mut);
}

/* ============ Responsive: ≥900px picks up the desktop / "lg" layout ============ */

@media (min-width: 900px) {
	.tdrh-handson {
		grid-template-columns: 7fr 5fr;
		gap: 5rem;
	}

	.tdrh-recommend {
		position: relative;
	}

	.tdrh-recommend__card {
		position: sticky;
		top: 7rem;
	}

	.tdrh-anatomy__body {
		grid-template-columns: 1fr 1fr;
		gap: 5rem;
	}

	.tdrh-anatomy__head {
		text-align: left;
		margin-inline: 0;
	}
}
/**
 * 35-contact.css — native contact form (page-templates/contact.php).
 * Base input/textarea/button/notice styles already live in 15-base.css and
 * 30-single.css; this just adds row spacing, labels, and hides the
 * honeypot field.
 */

.tdr-contact-form {
	margin-top: var(--space-5);
	max-width: var(--container-narrow);
}

.tdr-form__row {
	margin-bottom: var(--space-4);
}

.tdr-form__label {
	display: block;
	margin-bottom: var(--space-1);
	font-weight: 700;
	font-size: var(--step--1);
}

.tdr-form__actions {
	margin-top: var(--space-5);
}

/* Honeypot: hidden from everyone, including assistive tech (this is the
   opposite intent of .screen-reader-text, which exposes content TO
   assistive tech while hiding it visually). */
.tdr-hp-field {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	left: -9999px;
}

/* Tighter vertical rhythm (owner request): the generic .tdr-page__header
   spacing (space-5 padding + space-5 margin) reads fine on archive-style
   pages but left the contact page's title, intro line, and form floating
   far apart. Scoped to this template only. */
.page-template-contact .tdr-page__header {
	padding-block: var(--space-4) var(--space-1);
	margin-bottom: 0;
}

.page-template-contact .tdr-contact-form {
	margin-top: var(--space-3);
}

/* The page's stored content wraps the intro in a legacy builder div with
   45px inline padding, and the generic content block adds a space-6 bottom
   pad before the form — the real sources of the giant gaps. !important is
   required to beat the inline style. */
.page-template-contact .tdr-page__content {
	padding-bottom: 0;
}

.page-template-contact .tdr-page__content > div {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/**
 * 36-review-pricing-bottomline.css — review-article component library,
 * part 4: the pricing table + quick-facts grid, the catch-all "remaining
 * content" band, and the closing "Bottom Line" card (circular score ring +
 * CTAs). See 32-review-hero.css for the promotion/scoping notes shared
 * across this component library.
 */

/* ============ PRICING ============ */

.tdrh-pricing {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 1.25rem;
	padding-block: clamp(3rem, 8vw, 6rem);
	background: var(--c-surface);
}

.tdrh-pricing__head {
	max-width: 40rem;
	margin-bottom: 2.5rem;
}

.tdrh-pricing__head h2 {
	margin: 0 0 .75rem;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.9rem, 4.5vw, 2.6rem);
	color: var(--c-primary);
}

.tdrh-pricing__head p {
	margin: 0 0 .75rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--c-mut);
}

.tdrh-pricing__promo {
	margin: 0;
	font-size: .85rem;
	color: var(--c-outline);
}

.tdrh-pricing__promo strong {
	color: var(--c-secondary);
}

.tdrh-facts__heading {
	margin: 2.5rem 0 1.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--c-line);
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--c-primary);
}

.tdrh-pricing__table-wrap {
	overflow: hidden;
	overflow-x: auto;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-2xl);
}

.tdrh-pricing__table {
	width: 100%;
	min-width: 360px;
	border-collapse: collapse;
	text-align: left;
}

.tdrh-pricing__table th {
	padding: 1.35rem 1.75rem;
	background: var(--c-primary);
	color: var(--c-on-primary);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tdrh-pricing__table td {
	padding: 1.35rem 1.75rem;
	border-bottom: 1px solid var(--c-line);
	font-family: var(--font-serif);
	font-size: 1.05rem;
	color: var(--c-primary);
}

.tdrh-pricing__table tbody tr:nth-child(even) {
	background: rgba(var(--c-tertiary-rgb), .2);
}

.tdrh-pricing__table tr.is-popular {
	background: rgba(var(--c-primary-rgb), .05);
}

.tdrh-pricing__table tr:last-child td {
	border-bottom: 0;
}

.tdrh-ta-right {
	text-align: right;
	font-weight: 700;
}

.tdrh-pill {
	display: inline-block;
	margin-left: .75rem;
	padding: .25rem .65rem;
	border-radius: var(--radius-full);
	background: rgba(var(--c-primary-rgb), .1);
	font-family: var(--font-sans);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: middle;
}

.tdrh-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
}

.tdrh-fact {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.tdrh-fact svg {
	flex: 0 0 auto;
	width: 1.65rem;
	height: 1.65rem;
	color: var(--c-primary);
}

.tdrh-fact span {
	display: block;
	margin-bottom: .2rem;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-outline);
}

.tdrh-fact strong {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--c-primary);
}

/* ============ REMAINING CONTENT ============ */

.tdrh-extra {
	padding-block: clamp(2rem, 5vw, 3.5rem);
	background: var(--c-bg-2);
}

.tdrh-extra__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.tdrh-extra__inner img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 1.5rem;
	border-radius: var(--radius);
}

.tdrh-extra .tdr-prose {
	font-family: var(--font-sans);
	color: var(--c-mut);
}

.tdrh-video-link {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	color: var(--c-primary);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: .2rem;
}

.tdrh-video-link__icon {
	display: inline-flex;
	width: 1.3rem;
	height: 1.3rem;
}

.tdrh-video-link__icon svg {
	width: 100%;
	height: 100%;
}

.tdrh-video-link__url {
	display: block;
	margin-top: .6rem;
	font-size: .78rem;
	color: var(--c-outline);
	word-break: break-all;
}

/* ============ BOTTOM LINE ============ */

.tdrh-bottomline {
	padding-block: clamp(3rem, 8vw, 6rem);
	background: var(--c-bg-3);
}

.tdrh-bottomline__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.tdrh-bottomline__card {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
	overflow: hidden;
	border-radius: 2.5rem;
	background: var(--c-surface);
	box-shadow: 0 40px 80px -35px rgba(var(--c-primary-rgb), .35);
	text-align: center;
}

.tdrh-orb {
	position: absolute;
	z-index: 0;
	width: 16rem;
	height: 16rem;
	border-radius: var(--radius-full);
	filter: blur(60px);
}

.tdrh-orb--a {
	top: -4rem;
	left: -4rem;
	background: rgba(var(--c-secondary-fixed-rgb), .5);
}

.tdrh-orb--b {
	bottom: -4rem;
	right: -4rem;
	background: rgba(var(--c-primary-rgb), .08);
}

.tdrh-bottomline__card > :not(.tdrh-orb) {
	position: relative;
	z-index: 1;
}

.tdrh-bottomline .tdrh-eyebrow {
	letter-spacing: .45em;
}

.tdrh-bottomline__kicker {
	display: block;
	margin: -1rem 0 1.5rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-outline);
}

.tdrh-bottomline__card h2 {
	max-width: 42rem;
	margin: 0 auto 1.5rem;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(1.9rem, 5.5vw, 3.2rem);
	line-height: 1.15;
	color: var(--c-primary);
}

.tdrh-bottomline__copy {
	max-width: 40rem;
	margin: 0 auto 2.5rem;
	font-size: 1.1rem;
	line-height: 1.65;
	color: var(--c-mut);
}

.tdrh-glance {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem 3rem;
	margin: 0 auto 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--c-line);
}

.tdrh-glance span {
	display: block;
	margin-bottom: .35rem;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-outline);
}

.tdrh-glance strong {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--c-primary);
}

.tdrh-score {
	position: relative;
	display: inline-flex;
	margin-bottom: 2.5rem;
}

.tdrh-score__ring {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 10rem;
	height: 10rem;
	border: 1.5px solid var(--c-line-strong);
	border-radius: var(--radius-full);
}

.tdrh-score__ring::before {
	content: "";
	position: absolute;
	inset: .5rem;
	border: 1px solid rgba(var(--c-primary-rgb), .15);
	border-radius: var(--radius-full);
}

.tdrh-score__num {
	position: relative;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 3rem;
	line-height: 1;
	color: var(--c-primary);
}

.tdrh-score__of {
	position: relative;
	margin-top: .4rem;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-outline);
}

.tdrh-score__ribbon {
	position: absolute;
	top: -.75rem;
	right: -3.25rem;
	padding: .5rem 1rem;
	border-radius: var(--radius-full);
	background: var(--c-secondary);
	color: var(--c-on-secondary);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 10px 25px -8px rgba(var(--c-secondary-rgb), .5);
	transform: rotate(9deg);
}

.tdrh-bottomline__ctas {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 26rem;
	margin: 0 auto;
}

.tdrh-bottomline__ctas .tdrh-cta {
	justify-content: center;
	width: 100%;
}

/* ============ Responsive: ≥900px picks up the desktop / "lg" layout ============ */

@media (min-width: 900px) {
	.tdrh-pricing__table th,
	.tdrh-pricing__table td {
		padding: 1.5rem 2.25rem;
	}

	.tdrh-facts {
		grid-template-columns: repeat(3, 1fr);
	}

	.tdrh-bottomline__ctas {
		flex-direction: row;
		max-width: none;
	}

	.tdrh-bottomline__ctas .tdrh-cta {
		width: auto;
		flex: 1 1 0;
	}
}
/**
 * 37-style-h-l-overrides.css — page-specific fine-tuning for the six
 * pinned reference posts: Nest Bedding Natural Hybrid Latex
 * (`tdr-style-h`), Carnivore Club (`tdr-style-h tdr-style-l`, single.php
 * adds both), chiliPAD (`tdr-style-m`), Alexander Signature Hybrid
 * (`tdr-style-n`), Clutter (`tdr-style-o`), and Vienna (`tdr-style-p`) —
 * the filename keeps its original "h-l" name from Wave 1/2 for git-history
 * continuity; the four later additions (m/n/o/p) each got their own
 * section below rather than a rename.
 *
 * Everything in 32/33/34/36/38/39/40-review-*.css is the general, global
 * tdrh-*/tdrb-* component API — usable by any future review page. This
 * file holds only the handful of rules that deliberately diverge from that
 * general default to match each approved reference comp exactly (a
 * tighter radius here, a hidden section there, a repositioned ribbon).
 * Every selector below repeats a class already defined in the general
 * component library with one extra `body.tdr-style-{h,l,m,n,o,p}`
 * ancestor, so it wins on that one pinned page by specificity alone
 * regardless of file/cascade order — every other page just gets the
 * component library's own default.
 *
 * Site chrome (header/nav/footer/logo) is NOT overridden here on purpose:
 * Wave 1 unified chrome across the whole site (20-layout.css), including
 * these pages — only the tdrh-*/tdrl-*/tdrm-*/tdro-*/tdrp-* review-content
 * area is pinned pixel-for-pixel to each page's approved reference comp.
 */

/* ============ Carnivore Club adaptation (body.tdr-style-l) ============ */

.tdr-style-l .tdrl-story-image {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 50px -32px rgba(var(--c-primary-rgb), .45);
}

.tdr-style-l .tdrl-story-image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 22rem;
	object-fit: cover;
}

.tdr-style-l .tdrh-hero__figure img {
	object-position: center;
}

.tdr-style-l .tdrh-bottomline__ctas {
	max-width: 18rem;
}

@media (min-width: 900px) {
	.tdr-style-l .tdrl-tasting {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
}

/* ============ chiliPAD video-review adaptation (body.tdr-style-m) ============ */

.tdr-style-m .tdrm-video-section,
.tdr-style-n .tdrm-video-section {
	max-width: var(--container);
	margin-inline: auto;
	padding: clamp(5rem, 9vw, 8rem) 1.25rem;
}

.tdr-style-m .tdrm-video-head,
.tdr-style-n .tdrm-video-head {
	max-width: 44rem;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.tdr-style-m .tdrm-video-head h2,
.tdr-style-n .tdrm-video-head h2 {
	margin: 0 0 1rem;
	font: 700 clamp(2rem, 4.5vw, 3.25rem)/1.15 var(--font-serif);
	color: var(--c-primary);
}

.tdr-style-m .tdrm-video-head p,
.tdr-style-n .tdrm-video-head p {
	margin: 0;
	font-size: 1.08rem;
	color: var(--c-ink-variant);
}

.tdr-style-m .tdrm-video-shell,
.tdr-style-n .tdrm-video-shell {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: .75rem solid var(--c-surface);
	border-radius: 1rem;
	background: var(--c-primary);
	box-shadow: 0 32px 70px -34px rgba(var(--c-primary-rgb), .55);
}

.tdr-style-m .tdrm-video-shell iframe,
.tdr-style-n .tdrm-video-shell iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.tdr-style-m .tdrm-system-visual {
	display: grid;
	grid-template-columns: 8rem 1fr;
	grid-template-rows: 1fr 1fr;
	align-items: center;
	min-height: 24rem;
	padding: 2.5rem;
	border-radius: .75rem;
	background: var(--c-surface);
}

.tdr-style-m .tdrm-system-visual__cube {
	grid-row: 1 / 3;
	display: grid;
	place-items: center;
	width: 8rem;
	height: 8rem;
	border-radius: .5rem;
	background: var(--c-primary);
	color: var(--c-on-primary);
	font: 700 .75rem/1.4 var(--font-sans);
	letter-spacing: .12em;
	text-align: center;
	text-transform: uppercase;
	box-shadow: 12px 14px 0 var(--c-bg-3);
}

.tdr-style-m .tdrm-system-visual__flow {
	height: 2px;
	margin-inline: 1.5rem 0;
	background: repeating-linear-gradient(90deg, var(--c-secondary) 0 10px, transparent 10px 18px);
}

.tdr-style-m .tdrm-system-visual__pad {
	align-self: start;
	padding: 2.5rem 1rem;
	border: 1px solid var(--c-line);
	border-radius: 50% 50% .5rem .5rem;
	background: linear-gradient(180deg, var(--c-bg) 0, var(--c-surface) 100%);
	font: 700 .68rem/1 var(--font-sans);
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
	color: var(--c-primary);
}

@media (max-width: 640px) {
	.tdr-style-m .tdrm-video-shell,
	.tdr-style-n .tdrm-video-shell { border-width: .35rem; }
	.tdr-style-m .tdrm-system-visual { min-height: 18rem; padding: 1.25rem; grid-template-columns: 6rem 1fr; }
	.tdr-style-m .tdrm-system-visual__cube { width: 6rem; height: 6rem; }
}

/* ============ Clutter image-led gallery (body.tdr-style-o) ============ */

.tdr-style-o .tdro-gallery-section,
.tdr-style-o .tdro-experience {
	max-width: var(--container);
	margin-inline: auto;
	padding: clamp(5rem, 9vw, 8rem) 1.25rem;
}

.tdr-style-o .tdro-gallery-section {
	max-width: none;
	padding-inline: max(1.25rem, calc((100vw - var(--container)) / 2 + 1.25rem));
	background: var(--c-bg-2);
}

.tdr-style-o .tdro-gallery-head {
	max-width: 46rem;
	margin-bottom: 3rem;
}

.tdr-style-o .tdro-gallery-head h2,
.tdr-style-o .tdro-experience__copy h2 {
	margin: 0 0 1rem;
	font: 700 clamp(2rem, 4.5vw, 3.25rem)/1.15 var(--font-serif);
	color: var(--c-primary);
}

.tdr-style-o .tdro-gallery-head p,
.tdr-style-o .tdro-experience__copy > p {
	font-size: 1.08rem;
	line-height: 1.7;
	color: var(--c-ink-variant);
}

.tdr-style-o .tdro-gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.tdr-style-o .tdro-gallery-card {
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;
	border: 1px solid var(--c-line);
	border-radius: .75rem;
	background: var(--c-surface);
	transition: transform .2s ease, box-shadow .2s ease;
}

.tdr-style-o .tdro-gallery-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.tdr-style-o .tdro-gallery-card figure {
	margin: 0;
	aspect-ratio: 2.58 / 1;
	overflow: hidden;
	background: var(--c-bg-3);
}

.tdr-style-o .tdro-gallery-card figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tdr-style-o .tdro-gallery-card__body {
	display: grid;
	gap: 1rem;
	padding: 1.5rem;
}

.tdr-style-o .tdro-gallery-card__body > div:first-child {
	display: flex;
	align-items: baseline;
	gap: .8rem;
}

.tdr-style-o .tdro-gallery-card__num {
	font: 700 .65rem/1 var(--font-sans);
	letter-spacing: .14em;
	color: var(--c-secondary);
}

.tdr-style-o .tdro-gallery-card h3 {
	margin: 0;
	font: 700 1.35rem/1.2 var(--font-serif);
	color: var(--c-primary);
}

.tdr-style-o .tdro-gallery-card__facts {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .75rem;
	border-block: 1px solid var(--c-line);
	font-size: .82rem;
	color: var(--c-outline);
}

.tdr-style-o .tdro-gallery-card__facts strong { color: var(--c-primary); }
.tdr-style-o .tdro-gallery-card p { margin: 0; color: var(--c-ink-variant); }

.tdr-style-o .tdro-experience {
	display: grid;
	gap: 3rem;
	align-items: center;
}

.tdr-style-o .tdro-experience__image {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: .75rem;
}

.tdr-style-o .tdro-experience__image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 30rem;
	object-fit: cover;
}

.tdr-style-o .tdro-experience__image span {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	padding: .55rem .85rem;
	border-radius: .25rem;
	background: var(--c-primary);
	color: var(--c-on-primary);
	font: 700 .65rem/1 var(--font-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
}

@media (min-width: 700px) {
	.tdr-style-o .tdro-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.tdr-style-o .tdro-gallery { grid-template-columns: repeat(3, 1fr); }
	.tdr-style-o .tdro-gallery-card.is-featured { transform: translateY(-1.25rem); box-shadow: var(--shadow-md); }
	.tdr-style-o .tdro-experience { grid-template-columns: 1.05fr .95fr; gap: 5rem; }
}

/* ============ Vienna five-method travel guide (body.tdr-style-p) ============ */

.tdr-style-p .tdrp-intro,
.tdr-style-p .tdrp-methods,
.tdr-style-p .tdrp-tip {
	max-width: var(--container);
	margin-inline: auto;
	padding: clamp(5rem, 9vw, 8rem) 1.25rem;
}

.tdr-style-p .tdrp-intro {
	max-width: 64rem;
	text-align: center;
}

.tdr-style-p .tdrp-intro h2,
.tdr-style-p .tdrp-methods__head h2,
.tdr-style-p .tdrp-tip h2 {
	margin: 0 0 1rem;
	font: 700 clamp(2rem, 4.5vw, 3.3rem)/1.14 var(--font-serif);
	color: var(--c-primary);
}

.tdr-style-p .tdrp-intro p,
.tdr-style-p .tdrp-methods__head p,
.tdr-style-p .tdrp-tip p {
	margin: 0;
	font-size: 1.12rem;
	line-height: 1.75;
	color: var(--c-ink-variant);
}

.tdr-style-p .tdrp-methods {
	max-width: none;
	padding-inline: max(1.25rem, calc((100vw - var(--container)) / 2 + 1.25rem));
	background: var(--c-bg-2);
}

.tdr-style-p .tdrp-methods__head {
	max-width: 46rem;
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.tdr-style-p .tdrp-method {
	display: grid;
	gap: 0;
	max-width: 72rem;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
	overflow: hidden;
	border: 1px solid var(--c-line);
	border-radius: .75rem;
	background: var(--c-surface);
	box-shadow: 0 20px 45px -38px rgba(var(--c-primary-rgb), .5);
}

.tdr-style-p .tdrp-method:last-child { margin-bottom: 0; }

.tdr-style-p .tdrp-method__media {
	position: relative;
	min-height: 22rem;
	margin: 0;
	overflow: hidden;
}

.tdr-style-p .tdrp-method__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tdr-style-p .tdrp-method__number {
	position: absolute;
	top: 1rem;
	left: 1rem;
	display: grid;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	background: var(--c-surface);
	font: 700 1rem/1 var(--font-serif);
	color: var(--c-primary);
	box-shadow: var(--shadow-sm);
}

.tdr-style-p .tdrp-method__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2rem, 5vw, 4rem);
}

.tdr-style-p .tdrp-method__topline {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
	font: 700 .65rem/1 var(--font-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-outline);
}

.tdr-style-p .tdrp-method__topline strong { color: var(--c-secondary); }

.tdr-style-p .tdrp-method h3 {
	margin: 0 0 1.25rem;
	font: 700 clamp(2rem, 4vw, 3rem)/1.1 var(--font-serif);
	color: var(--c-primary);
}

.tdr-style-p .tdrp-method__content > p {
	margin: 0 0 2rem;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--c-ink-variant);
}

.tdr-style-p .tdrp-method__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--c-line);
}

.tdr-style-p .tdrp-method__facts span {
	display: block;
	margin-bottom: .35rem;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--c-outline);
}

.tdr-style-p .tdrp-method__facts strong {
	font-family: var(--font-serif);
	font-size: .98rem;
	line-height: 1.35;
	color: var(--c-primary);
}

.tdr-style-p .tdrp-tip {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: flex-start;
}

.tdr-style-p .tdrp-tip > div { max-width: 48rem; }

.tdr-style-p .tdrp-tip > a {
	display: inline-flex;
	gap: 1rem;
	padding: 1rem 1.4rem;
	border: 1px solid var(--c-primary);
	border-radius: .25rem;
	text-decoration: none;
	font-weight: 700;
	color: var(--c-primary);
}

.tdr-style-p .tdrp-summary-modes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .65rem;
}

.tdr-style-p .tdrp-summary-modes span {
	padding: .55rem .9rem;
	border: 1px solid var(--c-line-strong);
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-primary);
}

@media (min-width: 850px) {
	.tdr-style-p .tdrp-method { grid-template-columns: 1fr 1fr; }
	.tdr-style-p .tdrp-method.is-reversed .tdrp-method__media { order: 2; }
	.tdr-style-p .tdrp-tip { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ============ Reference-alignment pass (body.tdr-style-h) ============
   The Stitch comp is restrained and rectilinear: broad paper bands, small
   corner radii, fine rules and compact cards — tighter than the component
   library's own (more decorative) defaults. */

.tdr-style-h .tdrh-review {
	padding-bottom: 0;
}

.tdr-style-h .tdrh-jumpnav {
	justify-content: center;
	max-width: none;
	padding-block: .85rem;
	background: var(--c-surface);
}

.tdr-style-h .tdrh-jumpnav__caption {
	letter-spacing: .16em;
}

.tdr-style-h .tdrh-hero__figure {
	border-radius: 1rem;
}

.tdr-style-h .tdrh-hero__shape {
	border-radius: 2rem;
}

.tdr-style-h .tdrh-quote-card {
	border-radius: .4rem;
}

.tdr-style-h .tdrh-verdict {
	padding-block: clamp(5rem, 10vw, 9rem);
}

.tdr-style-h .tdrh-verdict__heading {
	max-width: 46rem;
}

.tdr-style-h .tdrh-proscons {
	padding-block: clamp(4rem, 8vw, 7rem);
}

.tdr-style-h .tdrh-card {
	border-radius: .75rem;
	box-shadow: 0 8px 30px -24px rgba(var(--c-primary-rgb), .25);
}

.tdr-style-h .tdrh-card__kicker,
.tdr-style-h .tdrh-card li .tdrh-li-icon {
	display: none;
}

.tdr-style-h .tdrh-card li {
	font-size: .96rem;
}

.tdr-style-h .tdrh-handson {
	max-width: none;
	padding-inline: max(1.25rem, calc((100vw - var(--container)) / 2 + 1.25rem));
	padding-block: clamp(5rem, 9vw, 8rem);
}

.tdr-style-h .tdrh-callout,
.tdr-style-h .tdrh-recommend__card {
	border-radius: .75rem;
}

.tdr-style-h .tdrh-anatomy {
	max-width: none;
	padding-inline: max(1.25rem, calc((100vw - var(--container)) / 2 + 1.25rem));
	padding-block: clamp(5rem, 9vw, 8rem);
}

.tdr-style-h .tdrh-anatomy__head {
	text-align: center;
	margin-inline: auto;
}

.tdr-style-h .tdrh-pricing {
	max-width: none;
	padding-inline: max(1.25rem, calc((100vw - var(--container)) / 2 + 1.25rem));
	padding-block: clamp(5rem, 8vw, 7rem);
}

.tdr-style-h .tdrh-pricing__table-wrap {
	border-radius: .6rem;
}

.tdr-style-h .tdrh-pricing__table th {
	background: var(--c-bg-3);
	color: var(--c-outline);
}

.tdr-style-h .tdrh-extra {
	display: none;
}

.tdr-style-h .tdrh-bottomline {
	padding: clamp(2rem, 4vw, 3.5rem) 1.25rem;
}

.tdr-style-h .tdrh-bottomline__card {
	padding-block: clamp(2.5rem, 4vw, 3.75rem);
	border: 1px solid rgba(var(--c-line-strong-rgb), .35);
	border-radius: 1rem;
	box-shadow: 0 24px 45px -28px rgba(var(--c-primary-rgb), .55);
}

.tdr-style-h .tdrh-glance {
	display: none;
}

.tdr-style-h .tdrh-score__ring {
	width: 8.5rem;
	height: 8.5rem;
	border-radius: 0;
}

.tdr-style-h .tdrh-score__ring::before {
	border-radius: 0;
}

.tdr-style-h .tdrh-score__ribbon {
	top: -.6rem;
	right: 50%;
	transform: translateX(50%) rotate(3deg);
}

@media (min-width: 900px) {
	.tdr-style-m .tdrh-hero {
		align-items: start;
	}

	.tdr-style-m .tdrh-hero__text {
		padding-top: 3rem;
	}

	.tdr-style-h .tdrh-hero__dek {
		margin-bottom: 1.5rem;
	}

	.tdr-style-h .tdrh-stats {
		margin-bottom: 1.5rem;
		padding-top: 1.25rem;
	}

	.tdr-style-h .tdrh-quote-card {
		position: absolute;
		left: -2.5rem;
		bottom: -2.5rem;
		margin: 0;
	}

	.tdr-style-h .tdrh-proscons {
		gap: 2rem;
	}

	.tdr-style-h .tdrh-card {
		padding: 3rem;
	}

	.tdr-style-h .tdrh-handson {
		grid-template-columns: 1.35fr .8fr;
	}
}

/* Vienna method-card affiliate CTA (restored from the original article's
   /out/ links during the final pre-launch check). */
.tdr-style-p .tdrp-method__cta {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: 1.1rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--c-line-strong);
	padding-bottom: .2rem;
}
/**
 * 38-review-base.css — Wave 2 additions supporting the generalized review/
 * coupon templates (template-parts/content-review.php, content-coupon.php,
 * template-parts/review/*.php, inc/review-data.php). Every value below is a
 * 10-tokens.css token; nothing here is scoped to a specific post — that
 * stays 37-style-h-l-overrides.css's job for the six pinned pages, which
 * this file never touches or assumes anything about.
 *
 * Four things live here:
 *  1. `.tdrh-hero--no-media` — the hero's 2-column desktop grid collapses
 *     back to one column on the (rare) post with no usable image at all.
 *  2. `.tdrm-video-section`/`__head`/`-shell` base rules — this class family
 *     previously existed only inside `body.tdr-style-m` (37-*.css, the
 *     pinned chiliPAD page). template-parts/review/video.php now reuses the
 *     same classes site-wide, so they need an unscoped base here, exactly
 *     the same promotion 32-36-review-*.css already did for `tdrh-*` in
 *     Wave 1. 37's `.tdr-style-m` rules are more specific and still win on
 *     that one pinned page, unchanged.
 *  3. `.tdrb-figure` — the in-content-image treatment
 *     tdr_review_style_images() (inc/review-data.php) wraps every prose
 *     image in, generalizing the approved Carnivore Club reference's
 *     `.tdrl-story-image` (soft-rounded frame + shadow) instead of a raw
 *     inline `<img>`.
 *  4. Prose rhythm, scoped to `.tdrh-review .tdr-prose` only (review/coupon
 *     articles specifically, never a plain Page): section headings read
 *     like the designed tdrh-* sections around them (serif, a top rule,
 *     generous stack spacing) so the guaranteed-prose fallback is part of
 *     the same system at a glance, not a visibly different "plain" mode.
 */

/* ============ 1. Hero with no image ============ */

@media (min-width: 900px) {
	.tdrh-hero--no-media {
		grid-template-columns: 1fr;
		max-width: 54rem;
	}
}

/* ============ 2. Featured video — base (site-wide) ============ */

.tdrm-video-section {
	max-width: var(--container);
	margin-inline: auto;
	padding: clamp(3rem, 8vw, 6rem) 1.25rem;
}

.tdrm-video-head {
	max-width: 44rem;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.tdrm-video-head h2 {
	margin: 0 0 1rem;
	font: 700 clamp(1.8rem, 4vw, 2.6rem)/1.15 var(--font-serif);
	color: var(--c-primary);
}

.tdrm-video-head p {
	margin: 0;
	font-size: 1.05rem;
	color: var(--c-mut);
}

.tdrm-video-shell {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: .5rem solid var(--c-surface);
	border-radius: var(--radius-lg);
	background: var(--c-primary);
	box-shadow: 0 32px 70px -34px rgba(var(--c-primary-rgb), .5);
}

.tdrm-video-shell iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 640px) {
	.tdrm-video-shell {
		border-width: .3rem;
	}
}

/* ============ 3. In-content figures ============ */

.tdrb-figure {
	margin: var(--space-5) 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 50px -32px rgba(var(--c-primary-rgb), .35);
}

.tdrb-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.tdrb-figure figcaption {
	padding: var(--space-2) var(--space-3) 0;
}

/* ============ Rating chip: same look whether the source markup used an
   <h1> (now demoted to <h2> by tdr_review_prose_html() so the page keeps a
   single H1) or, rarely, still surfaces as one. ============ */

.tdr-prose .col-2-0 h2 {
	margin: 0;
	font-size: var(--step-5);
	font-weight: 700; /* Libre Caslon Text ships 400/700 only — avoid synthetic-bold 800 */
	line-height: 1;
	color: var(--c-accent);
}

.tdr-prose .col-2-0 h2 + p {
	margin-top: var(--space-1);
	font-weight: 700;
}

/* ============ 4. Prose rhythm inside review/coupon articles ============ */

.tdrh-review .tdr-prose h2 {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--c-line);
	font-family: var(--font-serif);
	font-size: clamp(1.7rem, 4vw, 2.3rem);
	font-weight: 700;
	color: var(--c-primary);
}

.tdrh-review .tdr-prose > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.tdrh-review .tdr-prose h3 {
	margin-top: var(--space-5);
	font-family: var(--font-serif);
	font-size: clamp(1.25rem, 3vw, 1.5rem);
	font-weight: 600;
	color: var(--c-primary);
}

.tdrh-review .tdr-prose > * + * {
	margin-top: var(--space-4);
}

.tdrh-review .tdr-prose p {
	font-size: 1.08rem;
	line-height: 1.8;
}
/**
 * 39-review-items.css — the "items" component: a section head (eyebrow/h2/
 * intro) followed by alternating image/text cards with a numbered badge, a
 * topline (kicker + bold label), heading, paragraph and a 0-2-cell facts
 * strip. This is the approved Vienna five-method travel-guide card look
 * (template-parts/content-review-p.php, scoped to `body.tdr-style-p` in
 * 37-style-h-l-overrides.css, pinned/untouched) generalized into an
 * unscoped, site-wide component: every rule below is copied from that
 * file's `.tdrp-method*` family with the `.tdr-style-p` ancestor dropped and
 * the classes renamed `tdrb-item*` — same tokens, same breakpoints, same
 * computed styles, just usable by any post via
 * template-parts/review/items.php instead of only the one pinned page.
 *
 * The one genuinely new addition (Vienna's five method cards always had a
 * real photo) is the no-image variant: `.tdrb-item.no-image` collapses to a
 * single content column with the numbered badge shown inline
 * (`.tdrb-item__number--inline`) instead of pinned over a missing image, so
 * a roundup entry with no real per-item photo still reads as an intentional
 * card, not a broken one. `.tdrb-item__link` is likewise new — an optional
 * small arrow link (Vienna's cards never linked out on their own; its
 * "explore more" arrow-link pattern is reused here from `.tdrp-tip > a`).
 */

.tdrb-items {
	max-width: none;
	margin-inline: auto;
	padding-block: clamp(5rem, 9vw, 8rem);
	padding-inline: max(1.25rem, calc((100vw - var(--container)) / 2 + 1.25rem));
	background: var(--c-bg-2);
}

.tdrb-items__head {
	max-width: 46rem;
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.tdrb-items__head h2 {
	margin: 0 0 1rem;
	font: 700 clamp(2rem, 4.5vw, 3.3rem)/1.14 var(--font-serif);
	color: var(--c-primary);
}

.tdrb-items__head p {
	margin: 0;
	font-size: 1.12rem;
	line-height: 1.75;
	color: var(--c-ink-variant);
}

.tdrb-item {
	display: grid;
	gap: 0;
	max-width: 72rem;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
	overflow: hidden;
	border: 1px solid var(--c-line);
	border-radius: .75rem;
	background: var(--c-surface);
	box-shadow: 0 20px 45px -38px rgba(var(--c-primary-rgb), .5);
}

.tdrb-item:last-child { margin-bottom: 0; }

.tdrb-item__media {
	position: relative;
	min-height: 22rem;
	margin: 0;
	overflow: hidden;
}

.tdrb-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tdrb-item__number,
.tdrb-item__number--inline {
	display: grid;
	place-items: center;
	border-radius: 50%;
	font: 700 1rem/1 var(--font-serif);
	color: var(--c-primary);
}

.tdrb-item__number {
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: 3.2rem;
	height: 3.2rem;
	background: var(--c-surface);
	box-shadow: var(--shadow-sm);
}

/* No-image variant: the number badge moves into the content flow instead of
   pinning over a missing image — a plain, static circular chip rather than
   the media-overlay treatment above. */
.tdrb-item__number--inline {
	position: static;
	display: inline-grid; /* overrides the shared `display: grid` above — this is a <span> inline in the content flow, not a block spanning the card. */
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 1.5rem;
	border: 1px solid var(--c-line);
	background: var(--c-bg-2);
	font-size: .9rem;
	box-shadow: none;
}

.tdrb-item__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2rem, 5vw, 4rem);
}

.tdrb-item__topline {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
	font: 700 .65rem/1 var(--font-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-outline);
}

.tdrb-item__topline strong { color: var(--c-secondary); }

.tdrb-item__content h3 {
	margin: 0 0 1.25rem;
	font: 700 clamp(2rem, 4vw, 3rem)/1.1 var(--font-serif);
	color: var(--c-primary);
}

.tdrb-item__content > p {
	margin: 0 0 2rem;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--c-ink-variant);
}

.tdrb-item__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--c-line);
}

.tdrb-item__facts span {
	display: block;
	margin-bottom: .35rem;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--c-outline);
}

.tdrb-item__facts strong {
	font-family: var(--font-serif);
	font-size: .98rem;
	line-height: 1.35;
	color: var(--c-primary);
}

/* Optional per-entry link (new — Vienna's own cards never had one). Small
   arrow-link treatment borrowed from `.tdrp-tip > a`'s inline icon pattern. */
.tdrb-item__link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.5rem;
	font: 700 .85rem/1 var(--font-sans);
	letter-spacing: .02em;
	text-decoration: none;
	color: var(--c-primary);
	transition: color .15s ease;
}

.tdrb-item__link:hover,
.tdrb-item__link:focus-visible {
	color: var(--c-primary-container);
}

.tdrb-item__link svg {
	width: .85rem;
	height: .85rem;
}

@media (min-width: 850px) {
	.tdrb-item { grid-template-columns: 1fr 1fr; }
	.tdrb-item.is-reversed .tdrb-item__media { order: 2; }
	.tdrb-item.no-image { grid-template-columns: 1fr; }
}
/**
 * 40-review-gallery.css — the "gallery" component: the approved Clutter
 * reference's image treatment (template-parts/content-review-o.php, pinned/
 * untouched; scoped to `body.tdr-style-o` in
 * 37-style-h-l-overrides.css's `.tdro-gallery*`/`.tdro-experience*` rules)
 * generalized into an unscoped, site-wide pair of classes, same idea
 * 39-review-items.css already used for the Vienna `.tdrp-method*` family:
 * every rule below is copied from Clutter's own `.tdro-*` selectors with
 * the `.tdr-style-o` ancestor dropped and the classes renamed `tdrb-gallery*`
 * — same tokens, same breakpoints, same computed styles, just usable by any
 * curated post via template-parts/review/gallery.php instead of only the
 * one pinned page.
 *
 * Two treatments, chosen by template-parts/review/gallery.php based on how
 * many qualifying photos tdr_rd_gallery() (inc/review-data.php) found —
 * never a fixed layout that looks sparse with one photo or cramped with ten:
 *
 *  1. `.tdrb-gallery__grid` / `__item` / `__frame` — Clutter's "Storage
 *     Plans" gallery band (`.tdro-gallery` / `.tdro-gallery-card` /
 *     `figure`): a responsive card grid (1 / 2 / 3 columns), each card a
 *     bordered, rounded, shadowed frame with a hover lift. Clutter's own
 *     cards additionally carried a title/facts/price body (`.tdro-gallery-
 *     card__body`) — real post_content photos have no such structured data,
 *     so that body is dropped entirely here; `__item`'s only content
 *     besides the photo is an optional real `<figcaption>` below it,
 *     unstyled-frame when there is none. The card frame is held to one
 *     fixed `aspect-ratio` (unlike Clutter's own 2.58/1 banner crop, tuned
 *     for wide product-plan graphics) so a grid of otherwise wildly
 *     different source photos — screenshots, portrait product shots,
 *     landscape lifestyle photos — still reads as one uniform, deliberate
 *     grid rather than a jumble of mismatched box sizes.
 *  2. `.tdrb-gallery__solo` — Clutter's "My Clutter Experience" story
 *     figure (`.tdro-experience__image`): one large image, rounded corners,
 *     object-fit cover, for the post whose gallery computation found
 *     exactly one qualifying photo — the single-column large-image
 *     treatment reads far better here than a lone card stranded in an
 *     empty grid. Unlike Clutter's own fixed `min-height`, `__solo` prefers
 *     a real `aspect-ratio` (inline style, set by gallery.php only when
 *     this post's one photo has a known width/height — same pattern
 *     template-parts/review/hero.php's own `$tdrb_ratio` already uses) so
 *     the reserved space matches the actual photo instead of an arbitrary
 *     fixed height, falling back to that same `min-height` only when no
 *     real size was resolvable.
 *
 * `.tdrb-gallery__head` (eyebrow + heading) is new — Clutter's own gallery
 * band additionally had a hand-written intro paragraph
 * (`.tdro-gallery-head p`) naming its product's real plan tiers; an
 * auto-generated gallery has no equivalent editorial copy to put there, so
 * that paragraph is simply omitted rather than filled with something
 * fabricated.
 */

.tdrb-gallery {
	max-width: var(--container);
	margin-inline: auto;
	padding: clamp(5rem, 9vw, 8rem) 1.25rem;
}

.tdrb-gallery__head {
	max-width: 46rem;
	margin-bottom: 3rem;
}

.tdrb-gallery__head h2 {
	margin: 0 0 1rem;
	font: 700 clamp(2rem, 4.5vw, 3.25rem)/1.15 var(--font-serif);
	color: var(--c-primary);
}

/* ============ Gallery band (2+ photos) ============ */

.tdrb-gallery__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.tdrb-gallery__item {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--c-line);
	border-radius: .75rem;
	background: var(--c-surface);
	transition: transform .2s ease, box-shadow .2s ease;
}

.tdrb-gallery__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.tdrb-gallery__frame {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--c-bg-3);
}

.tdrb-gallery__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tdrb-gallery__item figcaption {
	margin: 0;
	padding: 1rem 1.25rem 1.25rem;
	font-size: .85rem;
	line-height: 1.6;
	color: var(--c-ink-variant);
}

@media (min-width: 700px) {
	.tdrb-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.tdrb-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============ Story figure (exactly 1 photo) ============ */

/* Capped at an editorial measure and centered: full-container width blew a
   typical 800px legacy photo up ~40% past natural size into a wall of
   image (user-flagged on /pairchute-review/). 52rem ≈ 832px keeps legacy
   photos at or near natural resolution. */
.tdrb-gallery__solo {
	margin: 0 auto;
	max-width: min(52rem, 100%);
	overflow: hidden;
	border-radius: .75rem;
	aspect-ratio: 16 / 10; /* overridden inline by gallery.php when the photo's real size is known */
}

.tdrb-gallery__solo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 20rem;
	object-fit: cover;
}

.tdrb-gallery__solo figcaption {
	margin: 0;
	padding: 1rem .25rem 0;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--c-ink-variant);
}

@media (min-width: 700px) {
	.tdrb-gallery__solo img { min-height: 26rem; }
}
/**
 * 41-pitch-fab.css — floating "pitch us a product" button, bottom-right
 * (owner request). Pure anchor, no JS: chat-widget affordance without the
 * chat-widget payload. Hidden on the contact page itself (footer.php).
 */

.tdr-pitch-fab {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 900;
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	padding: .85rem 1.2rem;
	background: var(--c-primary);
	color: var(--c-on-primary);
	border-radius: var(--radius-pill, 999px);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 12px 32px -8px rgba(var(--c-primary-rgb), .45);
	transition: transform .2s ease, box-shadow .2s ease;
}

.tdr-pitch-fab:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px -8px rgba(var(--c-primary-rgb), .55);
}

.tdr-pitch-fab__icon {
	display: inline-flex;
	width: 1.15rem;
	height: 1.15rem;
	flex: 0 0 auto;
}

.tdr-pitch-fab__icon svg {
	width: 100%;
	height: 100%;
}

/* Mobile: icon-first compact pill so it never crowds small screens. */
@media (max-width: 640px) {
	.tdr-pitch-fab {
		right: 1rem;
		bottom: 1rem;
		padding: .8rem .95rem;
	}

	.tdr-pitch-fab__label {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdr-pitch-fab {
		transition: none;
	}
}