/**
 * Therapeel Widgets — front-end styles.
 *
 * Every colour reads from a CSS custom property that the widget's Elementor
 * colour controls write onto the widget wrapper, so anything visible here can
 * be restyled from the editor. The fallbacks match Global Kit 16, except body
 * text: the site's #7A7A7A is only 4.0:1 on white and fails WCAG AA.
 *
 * @package Therapeel_Widgets
 */

.tp-specband-wrap,
.tp-shield,
.tp-lab {
	--tp-primary: #8B2228;
	--tp-accent: #BF8B39;
	--tp-accent-ink: #8A6524;
	--tp-accent-soft: #F3E4C8;
	--tp-cream: #FDF7F0;
	--tp-ink: #2B2B2B;
	--tp-text: #595959;
	--tp-line: #E8DFD4;
	--tp-radius: 4px;

	box-sizing: border-box;
}

.tp-specband-wrap *,
.tp-shield *,
.tp-lab * {
	box-sizing: border-box;
}

/* Visually hidden, still read by screen readers. */
.tp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Spec Band
   ========================================================================== */

.tp-specband-wrap {
	background: var(--tp-band-bg, var(--tp-primary));
}

.tp-specband {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	max-width: 1200px;
	margin: 0 auto;
}

.tp-spec {
	padding: 8px 28px;
}

.tp-specband--dividers .tp-spec {
	border-left: 1px solid var(--tp-divider, rgba(255, 255, 255, 0.2));
}

.tp-specband--dividers .tp-spec:first-child {
	border-left: 0;
	padding-left: 0;
}

.tp-spec__figure {
	display: block;
	font-family: "Roboto Slab", Georgia, serif;
	font-weight: 300;
	font-size: clamp(38px, 4.6vw, 58px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--tp-figure, #fff);
}

.tp-spec__label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 14px 0 6px;
	color: var(--tp-label, var(--tp-accent-soft));
}

.tp-spec__note {
	display: block;
	font-size: 14px;
	line-height: 1.55;
	color: var(--tp-note, rgba(255, 255, 255, 0.78));
}

/* ==========================================================================
   UV Shield
   ========================================================================== */

.tp-shield {
	margin: 0;
	background: var(--tp-card-bg, #fff);
	border: 1px solid var(--tp-card-border, var(--tp-line));
	border-radius: var(--tp-radius);
	box-shadow: 0 1px 2px rgba(43, 43, 43, 0.04), 0 8px 24px rgba(43, 43, 43, 0.06);
}

.tp-shield__rays {
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	height: 74px;
	margin-bottom: 6px;
}

.tp-ray {
	position: relative;
	width: 2px;
	height: 100%;
	border-radius: 2px;
	background: linear-gradient(180deg, transparent, var(--tp-ray, var(--tp-accent)));
}

.tp-ray::after {
	content: "";
	position: absolute;
	left: -4px;
	bottom: -1px;
	border: 5px solid transparent;
	border-top-color: var(--tp-ray, var(--tp-accent));
}

.tp-ray__label {
	position: absolute;
	top: -4px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	white-space: nowrap;
	color: var(--tp-ray-label, var(--tp-accent-ink));
}

@media (prefers-reduced-motion: no-preference) {
	.tp-shield--animated .tp-ray {
		animation: tp-ray-drop 2.4s ease-in-out infinite;
	}

	.tp-shield--animated .tp-ray:nth-child(2) { animation-delay: 0.3s; }
	.tp-shield--animated .tp-ray:nth-child(3) { animation-delay: 0.6s; }
	.tp-shield--animated .tp-ray:nth-child(4) { animation-delay: 0.9s; }
	.tp-shield--animated .tp-ray:nth-child(5) { animation-delay: 1.2s; }

	@keyframes tp-ray-drop {
		0%, 100% { opacity: 0.35; transform: translateY(-6px); }
		50%      { opacity: 1;    transform: translateY(0); }
	}
}

.tp-shield__layers {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tp-layer {
	padding: 16px 20px;
	border-radius: var(--tp-radius);
}

.tp-layer--center {
	text-align: center;
}

.tp-layer__tag {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
}

.tp-layer__name {
	display: block;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	margin-top: 3px;
}

.tp-layer__note {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	margin-top: 4px;
	opacity: 0.85;
}

.tp-layer--chem {
	background: var(--tp-chem-bg, var(--tp-primary));
	color: var(--tp-chem-text, #fff);
}

.tp-layer--phys {
	background: var(--tp-phys-bg, var(--tp-accent));
	color: var(--tp-phys-text, #3B2A0C);
}

.tp-layer--tex {
	background: transparent;
	border: 1px dashed var(--tp-tex-border, #D6C7B4);
	color: var(--tp-tex-text, var(--tp-text));
}

.tp-layer--tex .tp-layer__tag {
	color: var(--tp-accent-ink);
}

.tp-layer--tex .tp-layer__name {
	color: var(--tp-tex-name, var(--tp-ink));
}

.tp-layer--skin {
	background: linear-gradient(90deg, var(--tp-skin-from, #F6E7DA), var(--tp-skin-to, #F1D8C6));
	color: var(--tp-skin-text, #5A3B27);
}

/* ==========================================================================
   Lab Report — mirrors a certificate of analysis
   ========================================================================== */

.tp-lab {
	border: 1px solid var(--tp-card-border, #D6C7B4);
	border-radius: var(--tp-radius);
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 2px rgba(43, 43, 43, 0.04), 0 8px 24px rgba(43, 43, 43, 0.06);
}

.tp-lab__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding: 22px 26px;
	background: var(--tp-head-bg, var(--tp-ink));
}

.tp-lab__headmain {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.tp-lab__title {
	font-family: "Roboto Slab", Georgia, serif;
	font-weight: 400;
	font-size: 19px;
	letter-spacing: 0.02em;
	color: var(--tp-head-text, #fff);
}

.tp-lab__meta {
	font-size: 12.5px;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	color: var(--tp-head-meta, rgba(255, 255, 255, 0.66));
}

.tp-lab__std {
	max-width: 260px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.04em;
	padding: 7px 13px;
	border: 1px solid currentColor;
	border-radius: 14px;
	color: var(--tp-std-text, var(--tp-accent-soft));
}

.tp-lab__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	color: var(--tp-text);
}

.tp-lab__table th,
.tp-lab__table td {
	text-align: left;
	padding: 14px 26px;
	border-bottom: 1px solid var(--tp-row-line, var(--tp-line));
	vertical-align: top;
}

.tp-lab__table thead th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding-block: 12px;
	background: var(--tp-colhead-bg, var(--tp-cream));
	color: var(--tp-colhead-text, var(--tp-accent-ink));
}

.tp-lab__table tbody th {
	font-weight: 500;
	color: var(--tp-criterion, var(--tp-ink));
}

.tp-lab__row--emph {
	background: var(--tp-emph-bg, rgba(191, 139, 57, 0.10));
}

.tp-lab__value {
	display: block;
	font-weight: 700;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	color: var(--tp-result, var(--tp-primary));
}

.tp-lab__row--emph .tp-lab__value {
	font-family: "Roboto Slab", Georgia, serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
}

.tp-lab__detail,
.tp-lab__method {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--tp-detail, #8A8A8A);
}

.tp-lab__detail {
	display: block;
	margin-top: 3px;
	font-variant-numeric: tabular-nums;
}

/* Accreditation mark. `abbr` gives it a native tooltip from the title. */
.tp-lab__vs {
	display: inline-block;
	margin-left: 7px;
	padding: 1px 5px;
	border: 1px solid currentColor;
	border-radius: 3px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	vertical-align: 1px;
	text-decoration: none;
	cursor: help;
	color: var(--tp-vs, var(--tp-accent-ink));
}

.tp-lab__foot {
	padding: 18px 26px 22px;
	border-top: 1px solid var(--tp-row-line, var(--tp-line));
	background: var(--tp-cream);
}

.tp-lab__note {
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--tp-note, var(--tp-text));
}

.tp-lab__note--strong {
	font-weight: 700;
}

.tp-lab__pdf {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding: 13px 22px;
	border-radius: var(--tp-radius);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
	background: var(--tp-pdf-bg, var(--tp-primary));
	color: var(--tp-pdf-text, #fff);
}

.tp-lab__pdf i {
	font-size: 17px;
}

.tp-lab__pdf:hover,
.tp-lab__pdf:focus-visible {
	background: var(--tp-pdf-bg-hover, var(--tp-accent));
	color: var(--tp-pdf-text-hover, #fff);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.tp-specband {
		grid-template-columns: repeat(2, 1fr);
		gap: 36px 0;
	}

	.tp-specband--dividers .tp-spec:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}
}

/* Three columns of Vietnamese copy below ~700px leaves roughly 100px each, so
   the results table becomes a stack of labelled rows instead. */
@media (max-width: 700px) {
	.tp-lab__table thead {
		display: none;
	}

	.tp-lab__table,
	.tp-lab__table tbody,
	.tp-lab__table tr,
	.tp-lab__table th,
	.tp-lab__table td {
		display: block;
		width: auto;
	}

	.tp-lab__table tbody tr {
		padding: 14px 18px;
		border-bottom: 1px solid var(--tp-row-line, var(--tp-line));
	}

	.tp-lab__table tbody tr:last-child {
		border-bottom: 0;
	}

	.tp-lab__table tbody th,
	.tp-lab__table tbody td {
		padding: 0;
		border: 0;
	}

	.tp-lab__table tbody th {
		font-weight: 700;
		color: var(--tp-criterion, var(--tp-ink));
	}

	.tp-lab__table tbody td {
		margin-top: 6px;
	}

	.tp-lab__method::before {
		content: attr(data-label) ": ";
		font-weight: 700;
		letter-spacing: 0.04em;
	}

	.tp-lab__head {
		padding: 18px;
	}

	.tp-lab__std {
		max-width: none;
	}
}

@media (max-width: 640px) {
	.tp-specband {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tp-specband--dividers .tp-spec {
		border-left: 0;
		padding: 0;
	}
}

/* ==========================================================================
   Shared tokens for the newer widgets
   ========================================================================== */

.tp-hero,
.tp-tabs,
.tp-channels {
	--tp-primary: #8B2228;
	--tp-accent: #BF8B39;
	--tp-accent-ink: #8A6524;
	--tp-accent-soft: #F3E4C8;
	--tp-cream: #FDF7F0;
	--tp-ink: #2B2B2B;
	--tp-text: #595959;
	--tp-line: #E8DFD4;
	--tp-radius: 4px;

	box-sizing: border-box;
}

.tp-hero *,
.tp-tabs *,
.tp-channels * { box-sizing: border-box; }

/* Shared eyebrow: small caps label with a short rule before it. */
.tp-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tp-eyebrow, var(--tp-accent-ink));
}

.tp-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 28px;
	height: 2px;
	background: var(--tp-rule, var(--tp-accent));
}

/* ==========================================================================
   Hero
   ========================================================================== */

.tp-hero {
	display: flex;
	align-items: center;
	padding-block: 72px;
	color: var(--tp-text);
}

.tp-hero--tinted {
	background: radial-gradient(
		120% 90% at 88% 8%,
		var(--tp-hero-tint, var(--tp-cream)) 0%,
		var(--tp-hero-tint, var(--tp-cream)) 45%,
		var(--tp-hero-base, #fff) 72%
	);
}

/* Full-page hero. --tp-header-h is measured by therapeel-widgets.js; the 0px
   fallback means a full viewport tall if the script never runs. Desktop only:
   on phones a forced full-height hero just adds dead space above the fold. */
@media (min-width: 1025px) {
	.tp-hero--full {
		min-height: calc(100vh - var(--tp-header-h, 0px));
		min-height: calc(100svh - var(--tp-header-h, 0px));
	}
}

.tp-hero__inner {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
}

.tp-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 64px;
	align-items: center;
}

.tp-hero__headline {
	margin: 0 0 20px;
	font-family: "Roboto Slab", Georgia, serif;
	font-weight: 400;
	font-size: clamp(34px, 4.4vw, 58px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--tp-headline, var(--tp-primary));
}

.tp-hero__subhead {
	margin: 0 0 20px;
	font-family: "Roboto Slab", Georgia, serif;
	font-weight: 300;
	font-size: clamp(20px, 2vw, 30px);
	line-height: 1.3;
	color: var(--tp-subhead, var(--tp-ink));
}

.tp-hero__lede {
	font-size: 19px;
	line-height: 1.75;
	max-width: 62ch;
	color: var(--tp-text);
}

.tp-hero__lede p { margin: 0 0 1em; }
.tp-hero__lede p:last-child { margin-bottom: 0; }

/* Spec chips */
.tp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 28px 0 32px;
	padding: 0;
	list-style: none;
}

.tp-chips li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	background: var(--tp-chip-bg, #fff);
	border: 1px solid var(--tp-chip-border, #D6C7B4);
	color: var(--tp-chip-text, var(--tp-primary));
}

.tp-chips svg,
.tp-chips i {
	font-size: 14px;
	width: 14px;
	height: 14px;
	fill: var(--tp-chip-icon, var(--tp-accent));
	color: var(--tp-chip-icon, var(--tp-accent));
}

/* Buttons */
.tp-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.tp-hero .tp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 28px;
	border: 2px solid transparent;
	border-radius: var(--tp-radius);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.tp-hero .tp-btn svg,
.tp-hero .tp-btn i {
	font-size: 18px;
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.tp-hero .tp-btn--primary {
	background: var(--tp-btn1-bg, var(--tp-primary));
	color: var(--tp-btn1-text, #fff);
}

.tp-hero .tp-btn--primary:hover,
.tp-hero .tp-btn--primary:focus-visible {
	background: var(--tp-btn1-bg-hover, var(--tp-accent));
	color: var(--tp-btn1-text-hover, #fff);
	transform: translateY(-2px);
}

.tp-hero .tp-btn--ghost {
	background: transparent;
	border-color: var(--tp-btn2-border, #D6C7B4);
	color: var(--tp-btn2-text, var(--tp-primary));
}

.tp-hero .tp-btn--ghost:hover,
.tp-hero .tp-btn--ghost:focus-visible {
	background: var(--tp-btn2-bg-hover, var(--tp-cream));
	border-color: var(--tp-btn2-text, var(--tp-primary));
}

/* Trust note */
.tp-hero__trust {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 32px 0 0;
	padding: 18px 20px;
	border: 1px solid var(--tp-line);
	border-left: 3px solid var(--tp-trust-edge, var(--tp-accent));
	border-radius: var(--tp-radius);
	background: var(--tp-trust-bg, #fff);
	font-size: 15px;
	line-height: 1.6;
	color: var(--tp-trust-text, var(--tp-text));
}

.tp-hero__trust svg,
.tp-hero__trust i {
	flex: 0 0 auto;
	margin-top: 2px;
	font-size: 20px;
	width: 20px;
	height: 20px;
	fill: var(--tp-trust-edge, var(--tp-accent));
	color: var(--tp-trust-edge, var(--tp-accent));
}

.tp-hero__trust p { margin: 0; }
.tp-hero__trust strong { color: var(--tp-primary); }

/* Product shot on a gold arc */
.tp-hero__shot { position: relative; }

.tp-hero__shot--arc::before {
	content: "";
	position: absolute;
	inset: 6% -4% 6% 8%;
	z-index: 0;
	border-radius: 999px;
	background: linear-gradient(160deg, var(--tp-arc-from, var(--tp-accent-soft)), var(--tp-arc-to, var(--tp-cream)));
}

.tp-hero__shot img {
	position: relative;
	z-index: 1;
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--tp-radius);
	box-shadow: 0 24px 60px rgba(139, 34, 40, 0.16);
}

.tp-hero__badge {
	position: absolute;
	z-index: 2;
	right: -8px;
	top: 4%;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	display: grid;
	place-content: center;
	text-align: center;
	font-family: "Roboto Slab", Georgia, serif;
	line-height: 1.05;
	background: var(--tp-badge-bg, var(--tp-primary));
	color: var(--tp-badge-text, #fff);
	box-shadow: 0 10px 30px rgba(139, 34, 40, 0.32);
}

.tp-hero__badge b { display: block; font-size: 26px; font-weight: 600; }

.tp-hero__badge span {
	display: block;
	margin-top: 4px;
	font-family: "Roboto", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	opacity: 0.9;
}

/* ==========================================================================
   Use-case tabs
   ========================================================================== */

.tp-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 36px;
	padding: 0;
	border-bottom: 1px solid var(--tp-tab-rule, var(--tp-line));
}

.tp-tabs__btn {
	appearance: none;
	margin: 0 0 -1px;
	padding: 14px 20px;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	font: inherit;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	color: var(--tp-tab, var(--tp-text));
	transition: color 0.2s, border-color 0.2s;
}

.tp-tabs__btn:hover { color: var(--tp-tab-active, var(--tp-primary)); }

.tp-tabs__btn[aria-selected="true"] {
	color: var(--tp-tab-active, var(--tp-primary));
	border-bottom-color: var(--tp-tab-underline, var(--tp-primary));
}

.tp-tabpanel {
	display: grid;
	grid-template-columns: 45% 1fr;
	gap: 48px;
	align-items: center;
	color: var(--tp-text);
}

.tp-tabpanel[hidden] { display: none; }

.tp-tabpanel img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--tp-radius);
	box-shadow: 0 1px 2px rgba(43, 43, 43, 0.04), 0 8px 24px rgba(43, 43, 43, 0.06);
}

.tp-tabpanel__heading {
	margin: 0 0 10px;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.3;
	color: var(--tp-panel-heading, var(--tp-ink));
}

.tp-tabpanel p { margin: 0; font-size: 16px; line-height: 1.7; }

.tp-ticks { margin: 18px 0 0; padding: 0; list-style: none; }

.tp-ticks li {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 16px;
	line-height: 1.6;
}

.tp-ticks svg,
.tp-ticks i {
	flex: 0 0 auto;
	margin-top: 5px;
	width: 15px;
	height: 15px;
	font-size: 15px;
	fill: var(--tp-bullet, var(--tp-accent));
	color: var(--tp-bullet, var(--tp-accent));
}

/* Until the script marks the group ready, hide the strip and show every panel
   so the content is complete without JavaScript. */
.tp-tabs:not([data-tp-ready]) .tp-tabs__list { display: none; }
.tp-tabs:not([data-tp-ready]) .tp-tabpanel { margin-bottom: 48px; }

/* ==========================================================================
   Contact channels
   ========================================================================== */

.tp-channels {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tp-channels a,
.tp-channels span.tp-channels__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border: 1px solid var(--tp-ch-border, rgba(255, 255, 255, 0.18));
	border-radius: var(--tp-radius);
	text-decoration: none;
	font-weight: 700;
	font-size: 16px;
	color: var(--tp-ch-text, #fff);
	transition: background 0.2s, border-color 0.2s;
}

.tp-channels a:hover,
.tp-channels a:focus-visible {
	background: var(--tp-ch-hover-bg, rgba(191, 139, 57, 0.16));
	border-color: var(--tp-ch-hover-border, var(--tp-accent));
}

.tp-channels svg,
.tp-channels i {
	flex: 0 0 auto;
	width: 24px;
	height: 20px;
	font-size: 20px;
	text-align: center;
	fill: var(--tp-ch-icon, var(--tp-accent));
	color: var(--tp-ch-icon, var(--tp-accent));
}

.tp-channels__label { color: var(--tp-ch-text, #fff); }

.tp-channels__detail {
	margin-left: auto;
	font-weight: 400;
	font-size: 14px;
	color: var(--tp-ch-detail, rgba(255, 255, 255, 0.6));
}

/* ==========================================================================
   Responsive — newer widgets
   ========================================================================== */

@media (max-width: 1024px) {
	.tp-hero__grid,
	.tp-tabpanel {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.tp-hero__shot {
		order: -1;
		max-width: 460px;
	}
}

@media (max-width: 640px) {
	.tp-hero { padding-block: 48px; }
	.tp-hero__inner { padding-inline: 18px; }
	.tp-hero__lede { font-size: 17px; }
	.tp-hero .tp-btn { width: 100%; }
	.tp-hero__badge { width: 84px; height: 84px; right: 0; }
	.tp-hero__badge b { font-size: 21px; }
	.tp-channels__detail { margin-left: 0; flex: 1 1 100%; }
	.tp-channels a { flex-wrap: wrap; }
}

/* ==========================================================================
   Lab Report — reveal on scroll
   --------------------------------------------------------------------------
   Rows start slightly low and transparent, then stagger in once the card
   enters the viewport (therapeel-widgets.js adds .is-revealed).

   Two safeguards:
     - Everything is wrapped in prefers-reduced-motion: no-preference, so a
       visitor who asks for less motion sees the finished table immediately.
     - If the script never runs, .is-revealed is never added — so the rules
       below are written to leave rows visible in that case too, by only
       hiding them while the card is explicitly marked as pending.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.tp-lab--animate[data-tp-pending] tbody tr {
		opacity: 0;
		transform: translateY(10px);
	}

	.tp-lab--animate.is-revealed tbody tr {
		opacity: 1;
		transform: none;
		transition:
			opacity 0.45s ease-out calc(var(--tp-row-i, 0) * var(--tp-row-stagger, 55ms)),
			transform 0.45s ease-out calc(var(--tp-row-i, 0) * var(--tp-row-stagger, 55ms));
	}

	/* Card header and footer arrive first, before the rows start. */
	.tp-lab--animate[data-tp-pending] .tp-lab__head,
	.tp-lab--animate[data-tp-pending] .tp-lab__foot {
		opacity: 0;
		transform: translateY(10px);
	}

	.tp-lab--animate.is-revealed .tp-lab__head,
	.tp-lab--animate.is-revealed .tp-lab__foot {
		opacity: 1;
		transform: none;
		transition: opacity 0.5s ease-out, transform 0.5s ease-out;
	}

	.tp-lab--animate.is-revealed .tp-lab__foot {
		transition-delay: 0.25s;
	}

	/* One soft pulse on the headline figures once they are in place. */
	.tp-lab--pulse.is-revealed .tp-lab__row--emph .tp-lab__value {
		animation: tp-pulse 1.1s ease-out 0.7s 1;
	}

	@keyframes tp-pulse {
		0% { transform: scale(1); }
		35% { transform: scale(1.09); }
		100% { transform: scale(1); }
	}

	.tp-lab__row--emph .tp-lab__value {
		display: inline-block;
		transform-origin: left center;
	}
}