/**
 * Trial Pack landing page (landing-pages/page-trial-pack.php).
 *
 * Standalone landing styles built on the theme palette (--hrp-* / --hpf-*) with
 * Quicksand headings / Nunito body. Scoped under .tp-body so nothing leaks.
 *
 * @package HPF_Trickle_Up
 */

.tp-body {
	/* Alias the theme tokens + a few landing-specific shades from the design. */
	--tp-teal: var(--hrp-teal, #61bac1);
	--tp-teal-deep: var(--hrp-teal-deep, #3f979f);
	--tp-teal-soft: var(--hrp-teal-soft, #e7f4f5);
	--tp-teal-lightest: #eafafb;
	--tp-pink: var(--hrp-pink, #d46681);
	--tp-pink-soft: var(--hrp-pink-soft, #fbeef1);
	--tp-pink-light: #ffd7e0;
	--tp-pink-lighter: #ffe4ea;
	--tp-gold: var(--hrp-gold, #e4b451);
	--tp-gold-hover: #f0c266;
	--tp-gold-soft: #ffeabd;
	--tp-cream: #faf9f6;
	--tp-ink: var(--hpf-ink, #1d2327);
	--tp-muted: #4a5a5c;
	--tp-muted-soft: #85a9aa;
	--tp-head: "Quicksand", sans-serif;
	--tp-body-font: "Nunito", sans-serif;

	margin: 0;
	font-family: var(--tp-body-font);
	color: var(--tp-ink);
	background: #fff;
	line-height: 1.5;
}
.tp-body * { box-sizing: border-box; }
.tp-body img { max-width: 100%;border-radius: 10px; }
.tp-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* =====================  SCROLL REVEAL  =====================
   Elements start slightly offset + transparent and ease into place as they
   enter the viewport (JS adds .is-visible via IntersectionObserver, see
   trial-pack.js). Transform + opacity only, so no layout shift. Fully off for
   users who prefer reduced motion, and never applied to the above-the-fold
   hero (protects LCP). */
@media (prefers-reduced-motion: no-preference) {
	.tp-reveal {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
		transition-delay: var(--tp-reveal-delay, 0ms);
	}
	.tp-reveal.is-visible { opacity: 1; transform: none; }
}

/* Shared button */
.tp-btn {
	display: inline-block;
	background: var(--tp-pink);
	color: #fff;
	font-family: var(--tp-body-font);
	font-weight: 800;
	font-size: 14px;
	line-height: 1.2;
	border: 0;
	border-radius: 50px;
	padding: 10px 22px;
	text-decoration: none;
	box-shadow: rgba(0, 0, 0, .1) 0 4px 10px;
	cursor: pointer;
	transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.tp-btn:hover { background: var(--tp-pink-deep, #b94e69); color: #fff; transform: translateY(-2px); }
.tp-btn--pink { background: var(--tp-pink); color: #fff; box-shadow: rgba(212, 102, 129, .38) 0 10px 24px; }
.tp-btn--pink:hover { background: var(--tp-pink-deep, #b94e69); color: #fff; }
.tp-btn--lg { font-size: 18px; padding: 16px 40px; box-shadow: rgba(228, 180, 81, .4) 0 10px 24px; }
.tp-btn--xl { font-size: 19px; padding: 18px 46px; box-shadow: rgba(0, 0, 0, .15) 0 8px 20px; }
a.tp-btn.tp-btn--gold {    background: var(--tp-gold);}
/* Eyebrow pill */
.tp-eyebrow {
	display: inline-block;
	font-family: var(--tp-body-font);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	border-radius: 50px;
	padding: 7px 16px;
}
.tp-eyebrow--pink { background: var(--tp-pink-soft); color: var(--tp-pink); }
.tp-eyebrow--teal { background: var(--tp-teal-soft); color: var(--tp-teal-deep); }
.tp-eyebrow--white { background: #fff; color: var(--tp-teal-deep); }
.tp-eyebrow--glass { background: rgba(255, 255, 255, .2); color: #fff; }

/* Shared headings / text */
.tp-h2 {
	font-family: var(--tp-head);
	font-weight: 700;
	font-size: clamp(30px, 3.5vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.46px;
	margin: 18px 0 12px;
}
.tp-h2--white { color: #fff; }
.tp-body-text { font-size: 17px; line-height: 1.65; color: var(--tp-muted); margin: 0 0 14px; text-wrap: pretty; }
.tp-body-text--strong { font-family: var(--tp-head); font-weight: 700; color: var(--tp-ink); margin-bottom: 26px; }
.tp-muted { font-size: 17px; color: var(--tp-muted-soft); margin: 0; }
.tp-hl { color: var(--tp-teal); }
.tp-pink-strong { font-family: var(--tp-head); font-weight: 700; font-size: 19px; color: var(--tp-pink); margin: 0 0 30px; }

/* =====================  ANNOUNCEMENT + HEADER  ===================== */
.tp-announce { background: var(--tp-pink); color: #fff; text-align: center; padding: 10px 20px; font-size: 14px; font-weight: 700; }
.tp-header { background: var(--tp-teal); padding: 14px 0; position: sticky; top: 0; z-index: 999; transition: box-shadow .25s ease; }
.tp-header.is-stuck { box-shadow: 0 6px 20px rgba(13, 95, 89, .18); }
.tp-header__inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.tp-brand { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.tp-brand__name { font-family: var(--tp-head); font-weight: 700; font-size: 24px; letter-spacing: 4px; color: #fff; }
.tp-brand__tag { font-size: 11px; letter-spacing: 3px; color: var(--tp-teal-soft); margin-top: 3px; }
/* Site logo variant (non-clickable) */
.tp-brand--logo { display: inline-flex; }
.tp-brand__logo { display: block; height: 46px; width: auto; }
.tp-nav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tp-nav__pill {
	color: #fff; font-size: 13px; font-weight: 700; text-decoration: none;
	border: 1px solid rgba(255, 255, 255, .45); border-radius: 50px; padding: 8px 16px;
	text-transform: uppercase; letter-spacing: .3px; transition: background .2s ease;
}
.tp-nav__pill:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.tp-header__cta { background: var(--tp-pink); color: #fff; font-weight: 800; font-size: 14px; border-radius: 50px; padding: 10px 22px; text-decoration: none; box-shadow: rgba(0, 0, 0, .1) 0 4px 10px; transition: background .2s ease; }
.tp-header__cta:hover { background: var(--tp-pink-deep, #b94e69); color: #fff; }

/* =====================  HERO  ===================== */
/* ---- Hero (centred stack: headline → packs + badges → offer card) ---- */
.tp-hero { background: #fff; }
.tp-hero__inner { padding: clamp(34px, 5vw, 64px) 24px clamp(30px, 4vw, 48px); text-align: center; }
.tp-hero__title { font-family: var(--tp-head); font-weight: 700; line-height: 1.12; letter-spacing: -0.6px; margin: 0 0 clamp(22px, 3vw, 34px); display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.2vw, 14px); }
.tp-hero__title-a { font-size: clamp(30px, 4.4vw, 52px); color: var(--tp-pink); }
.tp-hero__title-b { font-size: clamp(26px, 3.9vw, 46px); color: #fff; background: var(--tp-pink); border-radius: 999px; padding: clamp(8px, 1.1vw, 14px) clamp(22px, 2.6vw, 40px); }

/* Packs with floating offer badges.
   The artwork inside tuna_chicken.webp is inset ~10% left/right and 4% bottom,
   so badge offsets are tuned against the packs themselves, not the file edges. */
.tp-hero__stage { position: relative; width: min(640px, 54%); margin: 0 auto -10.5%; z-index: 2; }
.tp-hero__packs { display: block; width: 100%; height: auto; position: relative; z-index: 2; }
.tp-hero__badge { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 50%; color: #fff; font-family: var(--tp-head); line-height: 1.02; box-shadow: rgba(29, 35, 39, .16) 0 10px 26px; }
.tp-hero__badge strong { font-weight: 700; }
.tp-hero__badge span { font-weight: 700; }
/* 30% off — teal, hugging the gold pack's top-left. */
.tp-hero__badge--teal { background: var(--tp-teal); width: 30%; aspect-ratio: 1; left: -7%; top: 6%; }
.tp-hero__badge--teal strong { font-size: clamp(20px, 3.6vw, 40px); }
.tp-hero__badge--teal span { font-size: clamp(18px, 3.2vw, 36px); }
/* FREE DELIVERY — pink, lower-left, straddling the card edge. */
.tp-hero__badge--pink { background: var(--tp-pink); width: 36%; aspect-ratio: 1; left: -11%; top: 41.5%; }
.tp-hero__badge--pink strong { font-size: clamp(17px, 3vw, 34px); }
.tp-hero__badge--pink span { font-size: clamp(11px, 1.8vw, 20px); letter-spacing: .01em; }
/* CANCEL ANYTIME — pink, right side, sitting on the card. */
.tp-hero__badge--cancel { left: auto; right: -6%; top: 61.5%; width: 30%; z-index: 3; }
.tp-hero__badge--cancel strong,
.tp-hero__badge--cancel span { font-size: clamp(11px, 1.8vw, 20px); font-weight: 700; letter-spacing: .01em; }

/* Teal offer card — the packs overlap its top edge. */
.tp-hero__card { background: var(--tp-teal); border-radius: clamp(14px, 1.6vw, 22px); padding: clamp(84px, 15vw, 200px) clamp(22px, 3vw, 46px) clamp(30px, 4vw, 56px); position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.4vw, 32px); }
.tp-hero__lead { font-size: clamp(15px, 2vw, 24px); line-height: 1.55; color: #fff; margin: 0; max-width: min(780px, 94%); text-wrap: pretty; }
.tp-hero__lead strong { font-weight: 800; }
.tp-hero__card .tp-btn { font-size: clamp(19px, 3vw, 34px); padding: clamp(11px, 1.5vw, 20px) clamp(32px, 5.5vw, 70px); border-radius: 999px; }

/* Trust strip + lifestyle shot.
   Two columns: claims + photo left, the gold score panel right, running the
   full height so its top sits level with the pills. Sizes are derived from the
   design render (736px viewport / 688px content) and capped for large screens. */
.tp-hero__proof-in { display: grid; grid-template-columns: minmax(0, 1fr) clamp(104px, 23.7%, 240px); grid-template-rows: auto auto; gap: clamp(8px, 1.9vw, 22px); align-items: stretch; padding: 0 24px clamp(30px, 4vw, 56px); }
.tp-hero__proof-main { display: contents; }
.tp-hero__claims { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(7px, 1.5vw, 18px); }
.tp-hero__claims li { flex: 1 1 auto; text-align: center; background: var(--tp-gold); color: var(--tp-ink); font-family: var(--tp-head); font-weight: 600; font-size: clamp(11px, 2.04vw, 22px); border-radius: clamp(7px, 1.36vw, 16px); padding: clamp(9px, 2.3vw, 26px) clamp(10px, 2.5vw, 30px); }
.tp-hero__shot { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 2; border-radius: clamp(7px, 1.36vw, 16px); overflow: hidden; aspect-ratio: 1920 / 1128; }
.tp-hero__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.tp-hero__score { grid-column: 2; grid-row: 1 / -1; position: relative; z-index: 1; justify-content: flex-start; background: var(--tp-gold); color: var(--tp-ink); border-radius: clamp(7px, 1.36vw, 16px); font-family: var(--tp-head); display: flex; flex-direction: column; align-items: center; justify-content: start; text-align: center; padding: clamp(8px, 1.2vw, 18px); line-height: 1.02; }
.tp-hero__score strong { font-weight: 700; font-size: clamp(34px, 9.8vw, 110px); letter-spacing: -.02em; }
.tp-hero__score span { font-weight: 600; font-size: clamp(13px, 3.5vw, 40px); }

/* =====================  WHAT'S INSIDE  ===================== */
.tp-inside { background: #fff; --tp-maroon: #5c2b2b; }
.tp-inside__grid { padding: clamp(48px, 8vw, 90px) 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.tp-inside__copy { min-width: 0; }
.tp-inside__title { font-family: var(--tp-head); font-weight: 700; line-height: 1.15; letter-spacing: -.4px; margin: 0 0 clamp(16px, 2.4vw, 26px); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(7px, 1.1vw, 13px); }
.tp-inside__title-a { font-size: clamp(23px, 5vw, 44px); color: var(--tp-pink); }
.tp-inside__title-b { font-size: clamp(25px, 5.6vw, 50px); color: #fff; background: var(--tp-pink); border-radius: clamp(7px, 1.5vw, 14px); padding: clamp(6px, 1.8vw, 16px) clamp(14px, 3.6vw, 32px); }
.tp-inside__copy .tp-body-text { font-size: clamp(13px, 2.1vw, 19px); line-height: 1.6; margin: 0 0 clamp(12px, 1.8vw, 18px); }
.tp-inside__note { font-family: var(--tp-head); font-weight: 700; font-size: clamp(11px, 1.75vw, 16px); line-height: 1.5; color: var(--tp-pink); margin: 0 0 clamp(18px, 3vw, 30px); }
.tp-inside__kibbles { display: block; width: min(100%, 48vw); max-width: 420px; height: auto; }

/* Benefit bubbles — absolutely placed from the design's coordinates. */
.tp-inside__cluster { container-type: inline-size; position: relative; list-style: none; margin: 0; padding: 0; aspect-ratio: 333 / 448; }
.tp-bubble { position: absolute; left: var(--x); top: var(--y); width: var(--d); aspect-ratio: 1; overflow: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8%; box-sizing: border-box; color: #fff; font-family: var(--tp-head); font-weight: 700; line-height: 1.18; }
.tp-bubble--maroon { background: var(--tp-maroon); }
.tp-bubble--pink { background: var(--tp-pink); }
.tp-bubble--teal { background: var(--tp-teal); }
.tp-bubble--gold { background: var(--tp-gold); }
.tp-bubble--sm { font-size: 15px; font-size: 4.5cqw; }
.tp-bubble--md { font-size: 19px; font-size: 5.7cqw; }
.tp-bubble--lg { font-size: 26px; font-size: 7.8cqw; }

/* =====================  CHOOSE RECIPE  ===================== */
.tp-choose { background: var(--tp-cream); }
.tp-choose__inner { padding: 90px 24px; }
.tp-choose__head { text-align: center; margin-bottom: 50px; }
.tp-choose__head .tp-h2 { margin-bottom: 10px; }
.tp-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 24px; }
.tp-pack {
	position: relative; background: #fff; border: 0; border-radius: 24px; padding: 20px; text-align: left;
	box-shadow: rgba(0, 0, 0, .05) 0 6px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 14px;
	/* Explicit colour: the card is a <button>, and the theme's global button
	   rule paints button text white — which would hide the card headings. */
	color: var(--tp-ink);
	font-family: var(--tp-body-font); transition: transform .2s ease, box-shadow .2s ease;
}
.tp-pack:hover { transform: translateY(-3px); box-shadow: rgba(65, 65, 65, .1) 0 14px 40px;background: transparent; }
.tp-pack::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--tp-pink); border-radius: 24px; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.tp-pack.is-selected::after { opacity: 1; }
.tp-pack__badge-sel { position: absolute; top: -12px; right: 16px; z-index: 2; background: var(--tp-pink); color: #fff; font-size: 12px; font-weight: 800; border-radius: 50px; padding: 6px 14px; box-shadow: rgba(212, 102, 129, .35) 0 4px 10px; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.tp-pack.is-selected .tp-pack__badge-sel { opacity: 1; transform: none; }
.tp-pack__media { position: relative; border-radius: 16px; height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tp-pack__media--gold { background: var(--tp-gold-soft); }
.tp-pack__media--pink { background: var(--tp-pink-light); }
.tp-pack__media--teal { background: var(--tp-teal-soft); }
.tp-pack__media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.tp-pack__ph { font-size: 46px; opacity: .5; }
.tp-pack__tag { position: absolute; top: 12px; left: 12px; background: var(--tp-gold); color: var(--tp-ink); font-size: 11px; font-weight: 800; border-radius: 50px; padding: 5px 12px; letter-spacing: 1px; box-shadow: rgba(0, 0, 0, .1) 0 3px 8px; }
.tp-pack__body { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; }
.tp-pack__name { font-family: var(--tp-head); font-weight: 700; font-size: 20px; color: var(--tp-ink); }
.tp-pack__desc { font-size: 14px; line-height: 1.55; color: var(--tp-muted); }
.tp-pack__price { font-weight: 800; font-size: 15px; color: var(--tp-ink); margin-top: 4px; }
.tp-pack__then { font-weight: 600; font-size: 13px; color: var(--tp-muted-soft); }
.tp-choose__cta { text-align: center; margin-top: 40px; }
.tp-choose__cta .tp-btn { font-size: 17px; padding: 15px 38px; box-shadow: rgba(228, 180, 81, .4) 0 10px 24px; }
/* Walking-cat strip: cat-video canvas chroma-keys the black bg to transparent
   and recolours the cat, so it sits over the cream section seamlessly.
   Native video is 1920×256 (7.5:1). */
.tp-catwalk { display: block; width: 100%; aspect-ratio: 1920 / 256; margin-top: 30px; pointer-events: none; }

/* =====================  REVIEWS  ===================== */
/* ---- Reviews: Trustpilot-style green panel ----
   Sizes derived from the design render (577px viewport / 525px panel). */
.tp-reviews { background: #fff; --tp-tp-green: #22a06b; --tp-tp-star: #00b67a; }
.tp-reviews__inner { padding: clamp(40px, 7vw, 80px) 24px clamp(48px, 8vw, 90px); text-align: left; }
.tp-reviews__title { font-family: var(--tp-head); font-weight: 700; font-size: clamp(24px, 5.4vw, 46px); line-height: 1.16; letter-spacing: -.4px; color: var(--tp-teal); margin: 0 0 clamp(9px, 1.5vw, 16px); max-width: 28ch; }
.tp-reviews__sub { font-family: var(--tp-head); font-weight: 600; font-size: clamp(11px, 2.1vw, 19px); color: var(--tp-pink); margin: 0 0 clamp(16px, 2.9vw, 30px); }

.tp-tp { position: relative; background: var(--tp-tp-green); border-radius: clamp(12px, 3.5vw, 30px); padding: clamp(22px, 9vw, 80px) clamp(18px, 7.8vw, 70px) clamp(22px, 4.5vw, 42px); display: grid; grid-template-columns: minmax(0, 47%) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: clamp(14px, 4vw, 36px); align-items: start; overflow: hidden; }

/* TrustScore summary card */
.tp-tp__score { grid-column: 1; grid-row: 1; background: #fff; border-radius: clamp(6px, 1.2vw, 11px); padding: clamp(10px, 2.1vw, 19px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(6px, 1.4vw, 13px) clamp(8px, 1.9vw, 17px); }
.tp-tp__score-main { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(2px, .45vw, 4px); }
.tp-tp__score-num { font-family: var(--tp-head); font-weight: 700; font-size: clamp(20px, 5.9vw, 52px); line-height: 1; color: var(--tp-ink); }
.tp-tp__score-label { font-family: var(--tp-head); font-weight: 700; font-size: clamp(8px, 1.9vw, 17px); color: var(--tp-ink); }
.tp-tp__score-count { font-size: clamp(6px, 1.5vw, 13px); color: #6b7280; }
.tp-tp__bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(3px, .62vw, 6px); }
.tp-tp__bars li { display: flex; align-items: center; gap: clamp(4px, 1vw, 9px); }
.tp-tp__bar-label { flex: 0 0 auto; font-size: clamp(6px, 1.45vw, 13px); color: #6b7280; min-width: 4.2em; }
.tp-tp__bar { flex: 1 1 auto; height: clamp(4px, .95vw, 9px); border-radius: 2px; background: #ececec; overflow: hidden; }
.tp-tp__bar > span { display: block; height: 100%; background: var(--tp-tp-star); }
.tp-tp__how { grid-column: 1 / -1; justify-self: center; font-size: clamp(6px, 1.45vw, 13px); color: #6b7280; text-decoration: underline; }

/* Star row (five squares, Trustpilot style) */
.tp-tp__stars { display: inline-flex; gap: clamp(1px, .3vw, 3px); }
.tp-tp__stars i { width: clamp(7px, 1.75vw, 16px); height: clamp(7px, 1.75vw, 16px); background: var(--tp-tp-star); border-radius: 1px; position: relative; }
.tp-tp__stars i.is-off { background: #dcdce6; }
.tp-tp__stars i::after { content: "★"; position: absolute; inset: 0; color: #fff; font-size: clamp(5px, 1.3vw, 12px); line-height: clamp(7px, 1.75vw, 16px); text-align: center; }

/* Fanned review cards */
.tp-tp__deck { grid-column: 2; grid-row: 1 / -1; position: relative; }
.tp-tp__cards { list-style: none; margin: 0; padding: 0; position: relative; aspect-ratio: 1 / .88; }
.tp-tp__card { position: absolute; top: calc(var(--i) * clamp(-11px, -1.2vw, -4px)); left: calc(var(--i) * 28%); transform: rotate(calc((2 - var(--i)) * -1.6deg)); transform-origin: 50% 90%; width: max(84px, 56%); aspect-ratio: 1 / 1.35; overflow: hidden; background: #fff; border-radius: clamp(3px, .7vw, 6px); padding: clamp(6px, 1.5vw, 14px); box-shadow: rgba(0, 0, 0, .12) 0 3px 10px; z-index: var(--i); display: flex; flex-direction: column; gap: clamp(3px, .7vw, 6px); transition: left .55s var(--hpf-ease, cubic-bezier(.22,1,.36,1)), top .55s var(--hpf-ease, cubic-bezier(.22,1,.36,1)), transform .55s var(--hpf-ease, cubic-bezier(.22,1,.36,1)), opacity .4s ease; }
.tp-tp__card.is-out { opacity: 0; pointer-events: none; z-index: 0; }
.tp-tp__card-head { display: flex; align-items: center; gap: clamp(3px, .75vw, 7px); }
.tp-tp__avatar { flex: 0 0 auto; width: clamp(12px, 3vw, 27px); height: clamp(12px, 3vw, 27px); border-radius: 50%; background: #f6e2c9; color: #6b5847; font-family: var(--tp-head); font-weight: 700; font-size: clamp(5px, 1.3vw, 12px); display: flex; align-items: center; justify-content: center; }
.tp-tp__who { display: flex; flex-direction: column; min-width: 0; }
.tp-tp__who strong { font-family: var(--tp-head); font-weight: 700; font-size: clamp(6px, 1.5vw, 13px); color: var(--tp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-tp__date { font-size: clamp(5px, 1.25vw, 11px); color: #6b7a90; white-space: nowrap; }
.tp-tp__card-text { flex: 1 1 auto; min-height: 0; font-size: clamp(5.5px, 1.35vw, 15px); line-height: 1.45; color: #374151; margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 14; }
.tp-tp__more-link { color: #2f6fd0; text-decoration: none; }
.tp-tp__more-link:hover { text-decoration: underline; }
.tp-tp__replied { margin-top: auto; display: inline-flex; align-items: center; gap: clamp(2px, .5vw, 5px); font-size: clamp(5px, 1.25vw, 11px); color: #6b7280; }
.tp-tp__actions { display: flex; align-items: center; gap: clamp(5px, 1.3vw, 12px); font-size: clamp(5px, 1.25vw, 11px); color: #6b7280; }
.tp-tp__actions a { display: inline-flex; align-items: center; gap: clamp(2px, .5vw, 5px); color: inherit; text-decoration: none; }
.tp-tp__actions a:hover, .tp-tp__replied:hover { text-decoration: underline; }
.tp-tp__replied { color: #6b7280; text-decoration: none; }
.tp-tp__actions svg, .tp-tp__replied svg { width: 1em; height: 1em; flex: 0 0 auto; }
.tp-tp__flag { margin-left: auto; }

.tp-tp__more { grid-column: 1; grid-row: 2; justify-self: start; align-self: start; background: #fff; color: var(--tp-ink); font-family: var(--tp-head); font-weight: 700; font-size: clamp(7px, 1.65vw, 15px); border-radius: clamp(4px, .9vw, 8px); padding: clamp(4px, .95vw, 9px) clamp(12px, 3.1vw, 28px); text-decoration: none; box-shadow: rgba(0, 0, 0, .1) 0 2px 6px; }
.tp-tp__more:hover { background: var(--tp-cream); }


/* =====================  HOW IT WORKS  ===================== */
/* ---- How the first box works: gold cards ----
   Sizes derived from the design render (661px viewport / 620px content). */
.tp-how { background: #fff; --how-gold: var(--tp-gold, #e4b451); --how-ink: #6b5720; --how-pill: #7a6428; --how-pill-txt: #f3e0ab; }
.tp-how .tp-wrap { padding: clamp(34px, 6vw, 80px) 24px clamp(40px, 7vw, 90px); }
.tp-how__title { font-family: var(--tp-head); font-weight: 700; font-size: clamp(21px, 4.1vw, 44px); line-height: 1.2; letter-spacing: -.3px; color: var(--how-ink); text-align: center; margin: 0 0 clamp(18px, 5vw, 54px); }
.tp-how__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2.3vw, 25px); }
.tp-how-card { background: var(--how-gold); border-radius: clamp(9px, 2.1vw, 22px); padding: clamp(11px, 2.8vw, 30px) clamp(14px, 3.3vw, 36px) clamp(8px, 2.1vw, 23px); display: flex; flex-direction: column; gap: clamp(2px, .6vw, 7px); aspect-ratio: 302 / 179; overflow: hidden; }
.tp-how-card__title { font-family: var(--tp-head); font-weight: 700; font-size: clamp(14px, 2.9vw, 31px); line-height: 1.12; color: var(--how-ink); margin: 0; }
.tp-how-card__text { min-height: 0; overflow: hidden; font-size: clamp(9px, 1.6vw, 17px); line-height: 1.38; color: var(--how-ink); margin: 0; text-wrap: pretty; }
.tp-how-card__note { font-weight: 700; font-size: clamp(8px, 1.4vw, 15px); line-height: 1.35; color: var(--how-ink); margin: 0; }
.tp-how-card__pill { margin-top: auto; align-self: flex-start; background: var(--how-pill); color: var(--how-pill-txt); font-family: var(--tp-head); font-weight: 700; font-size: clamp(12px, 2.4vw, 26px); line-height: 1.1; border-radius: clamp(4px, 1.2vw, 13px); padding: clamp(5px, 1.2vw, 13px) clamp(9px, 2.4vw, 26px); }

/* Third card spans the row: oversized headline left, copy + pill right. */
.tp-how-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 1fr); align-items: center; gap: clamp(10px, 2.4vw, 26px); aspect-ratio: 620 / 183; }
.tp-how-card__big { font-family: var(--tp-head); font-weight: 700; font-size: clamp(26px, 7vw, 76px); line-height: 1.05; letter-spacing: -.5px; color: var(--how-ink); margin: 0; }
.tp-how-card__side { display: flex; flex-direction: column; gap: clamp(6px, 1.4vw, 15px); align-items: flex-start; }
.tp-how-card__side .tp-how-card__pill { margin-top: clamp(2px, .6vw, 7px); }

/* =====================  SUBSCRIBER PERKS  ===================== */
/* ---- Subscriber perks: pink panel with maroon benefit cards ---- */
.tp-perks { background: #fff; --perk-panel: #cf4372; --perk-card: #a8385e; --perk-body: #f4c8d7; --perk-hl: #3b82c4; }
.tp-perks .tp-wrap { padding: clamp(34px, 6vw, 80px) 24px clamp(40px, 6vw, 80px); }
.tp-perks__title { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.1vw, 13px); margin: 0 0 clamp(10px, 1.8vw, 20px); font-family: var(--tp-head); font-weight: 700; line-height: 1.1; }
.tp-perks__title-a { font-size: clamp(19px, 4vw, 44px); color: var(--tp-pink); }
.tp-perks__title-b { font-size: clamp(34px, 9.1vw, 100px); color: #fff; background: var(--tp-pink); border-radius: clamp(8px, 1.9vw, 21px); padding: clamp(4px, .9vw, 10px) clamp(18px, 4.4vw, 48px); line-height: 1.12; }
.tp-perks__sub { text-align: center; font-size: clamp(11px, 1.82vw, 20px); line-height: 1.5; color: var(--tp-muted); margin: 0 0 clamp(16px, 3vw, 34px); }
.tp-perks__sub strong { font-weight: 800; color: var(--tp-ink); }

.tp-perks__panel { position: relative; background: var(--perk-panel); border-radius: clamp(10px, 2.6vw, 28px); padding: clamp(16px, 3.4vw, 37px); overflow: hidden; }
.tp-perks__panel-head { text-align: center; margin-bottom: clamp(12px, 2.6vw, 28px); }
.tp-perks__panel-head h3 { font-family: var(--tp-head); font-weight: 700; font-size: clamp(17px, 3.75vw, 41px); color: #fff; margin: 0 0 clamp(5px, 1vw, 11px); }
.tp-perks__panel-head p { font-size: clamp(9px, 1.71vw, 19px); line-height: 1.5; color: var(--perk-body); margin: 0 auto; max-width: 62ch; text-wrap: pretty; }

.tp-perk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(5px, 1.4vw, 15px); position: relative; z-index: 1; }
.tp-perk { background: var(--perk-card); border-radius: clamp(7px, 1.7vw, 18px); padding: clamp(9px, 2vw, 22px); display: flex; flex-direction: column; gap: clamp(4px, .9vw, 10px); aspect-ratio: 145 / 116; overflow: hidden; }
.tp-perk__title { font-family: var(--tp-head); font-weight: 700; font-size: clamp(12px, 2.41vw, 26px); line-height: 1.15; color: #fff; margin: 0; }
.tp-perk__text { font-size: clamp(8px, 1.61vw, 18px); line-height: 1.45; color: var(--perk-body); margin: 0; text-wrap: pretty; }
.tp-perk__icon-wrap { margin: auto 0 0 auto; width: clamp(28px, 5.6vw, 61px); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; }
.tp-perk__icon { width: 58%; aspect-ratio: 1; height: auto; object-fit: contain; display: block; }

/* Pack shot sits in the empty half of the second row. */
.tp-perks__pack { position: absolute; right: 0; bottom: 0; width: clamp(110px, 27vw, 300px); height: auto; z-index: 0; pointer-events: none; }

/* =====================  NUTRITION  ===================== */
/* ---- Nutrition: full-bleed photo with overlaid heading + copy card ---- */
.tp-nutrition { background: #fff; }
.tp-nutrition .tp-wrap { padding: clamp(20px, 3vw, 40px) 24px clamp(34px, 5vw, 70px); }
.tp-nutrition__panel { position: relative; background: #d8e5ec; border-radius: clamp(10px, 2.6vw, 28px); overflow: hidden; aspect-ratio: 5 / 4; }
.tp-nutrition__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.tp-nutrition__inner { position: relative; z-index: 1; width: 100%; max-width: none; margin: 0; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-block: 4.6% 2.9%; padding-inline: clamp(16px, 7.3%, 112px); }
.tp-nutrition__title { font-family: var(--tp-head); font-weight: 700; font-size: clamp(22px, 4.6vw, 62px); line-height: 1.15; letter-spacing: -.4px; color: #fff; margin: 0; max-width: 13ch; text-shadow: rgba(0, 0, 0, .18) 0 2px 12px; }
.tp-nutrition__card { width: min(95%, 1300px); margin-inline: auto; background: var(--tp-pink); border-radius: clamp(7px, 1.3vw, 16px); padding: clamp(12px, 1.9vw, 26px) clamp(14px, 2.4vw, 32px); text-align: center; }
.tp-nutrition__card p { font-size: clamp(9px, 1.15vw, 16px); line-height: 1.5; color: #fff; margin: 0 0 clamp(6px, .9vw, 12px); text-wrap: pretty; }
.tp-nutrition__card p:last-child { margin-bottom: 0; }
.tp-nutrition__strong { font-family: var(--tp-head); font-weight: 700; }

/* =====================  FAQ  ===================== */
.tp-faq { background: #fff; }
.tp-faq__inner { max-width: 820px; padding: 90px 24px 40px; }
.tp-faq__head { text-align: center; margin-bottom: 40px; }
.tp-faq__head .tp-h2 { margin-bottom: 0; }
.tp-faq__list { display: flex; flex-direction: column; gap: 14px; }
.tp-faq__item { background: var(--tp-cream); border: 1px solid var(--tp-teal-soft); border-radius: 18px; padding: 0 24px; overflow: hidden; }
.tp-faq__q { font-family: var(--tp-head); font-weight: 700; font-size: 17px; padding: 20px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; list-style: none; }
.tp-faq__q::-webkit-details-marker { display: none; }
.tp-faq__plus { color: var(--tp-teal); font-size: 22px; font-weight: 600; flex-shrink: 0; transition: transform .25s ease; }
.tp-faq__item[open] .tp-faq__plus { transform: rotate(45deg); }
.tp-faq__a { font-size: 15.5px; line-height: 1.65; color: var(--tp-muted); margin: 0 0 20px; text-wrap: pretty; }

/* =====================  ORDER CTA  ===================== */
.tp-order { background: #fff; }
.tp-order .tp-wrap { padding: 40px 24px 90px; }
.tp-order__card { background: linear-gradient(135deg, var(--tp-pink), #c25874); border-radius: 30px; padding: clamp(40px, 6vw, 70px); text-align: center; box-shadow: rgba(212, 102, 129, .35) 0 16px 34px; }
.tp-order__title { font-family: var(--tp-head); font-weight: 700; font-size: clamp(30px, 3.8vw, 46px); letter-spacing: -0.46px; color: #fff; margin: 0 0 16px; }
.tp-order__text { font-size: 17px; line-height: 1.65; color: var(--tp-pink-lighter); max-width: 640px; margin: 0 auto 30px; text-wrap: pretty; }
.tp-order__pick { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .15); border-radius: 50px; padding: 8px 20px; margin-bottom: 24px; flex-wrap: wrap; justify-content: center; }
.tp-order__pick-label { color: var(--tp-pink-lighter); font-size: 14px; font-weight: 600; }
.tp-order__pick-name { color: #fff; font-size: 14px; font-weight: 800; }
.tp-order__change { color: var(--tp-pink-light); font-size: 13px; font-weight: 700; text-decoration: underline; }
.tp-order__change:hover { color: #fff; }
.tp-order__fine { font-size: 13px; color: var(--tp-pink-light); margin: 20px auto 0; max-width: 560px; line-height: 1.6; }

/* =====================  FOOTER  ===================== */
.tp-footer { background: var(--tp-teal); color: #fff; }
.tp-footer .tp-wrap { padding: 70px 24px 30px; }
.tp-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }
.tp-brand--footer { margin-bottom: 16px; }
.tp-footer__brand p { font-size: 14px; line-height: 1.65; color: var(--tp-teal-lightest); margin: 0; max-width: 300px; text-wrap: pretty; }
.tp-footer__col { display: flex; flex-direction: column; gap: 10px; }
.tp-footer__col h4 { font-family: var(--tp-head); font-weight: 700; font-size: 15px; letter-spacing: 1px; margin: 0 0 6px; }
.tp-footer__col a { color: var(--tp-teal-lightest); font-size: 14px; text-decoration: none; }
.tp-footer__col a:hover { color: #fff; }
.tp-footer__addr { color: var(--tp-teal-lightest); font-size: 14px; line-height: 1.6; }
.tp-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .25); margin-top: 50px; padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--tp-teal-lightest); }
.tp-footer__badge { display: inline-flex; align-items: center; gap: 8px; }

/* =====================  RESPONSIVE  ===================== */
@media (max-width: 900px) {
	.tp-hero__badge--pink span { letter-spacing: 0; }
}
@media (max-width: 640px) {
	/* Header: just the logo + trial CTA, kept on one line (nav pills hidden). */
	.tp-header__inner { flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
	.tp-nav { display: none; }
	.tp-brand__logo { height: 40px; }
	.tp-header__cta { flex: 0 0 auto; white-space: nowrap; }

	/* Hero: tighter padding, claims centred, score panel narrower. */
	.tp-hero__inner { padding-inline: 18px; }
	.tp-hero__claims { justify-content: center; }
	.tp-hero__claims li { flex: 1 1 auto; text-align: center; }
	.tp-hero__card { margin-top: -14px; }
	.tp-hero__shot { aspect-ratio: 4 / 3; }
	/* Phones: the score column would starve the photo — run it as a bar under it. */
	.tp-hero__proof-in { grid-template-columns: minmax(0, 1fr); }
	.tp-hero__claims, .tp-hero__shot, .tp-hero__score { grid-column: 1; grid-row: auto; }
	.tp-hero__score { justify-content: center; }
	.tp-hero__score { flex-direction: row; gap: 10px; padding: 12px 16px; }
	.tp-hero__score strong { font-size: clamp(30px, 9vw, 46px); }
	.tp-hero__score span { font-size: clamp(14px, 4.4vw, 22px); }
	/* Phones: the side-by-side cluster shrinks the circles past legibility —
	   stack it under the copy so it gets the full width. */
	.tp-inside__grid { grid-template-columns: minmax(0, 1fr); }
	.tp-inside__cluster { width: min(100%, 340px); margin: 4px auto 0; }
	.tp-inside__kibbles { width: min(100%, 300px); margin-inline: auto; }
	/* Phones: one card per row at readable type; the design aspect ratios only
	   hold at desktop widths, so let the cards size to their content. */
	.tp-how__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.tp-how-card { aspect-ratio: auto; padding: 18px 18px 16px; gap: 8px; }
	.tp-how-card--wide { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; align-items: start; gap: 10px; }
	.tp-how__title { font-size: 24px; }
	.tp-how-card__title { font-size: 19px; }
	.tp-how-card__text { font-size: 14px; line-height: 1.5; }
	.tp-how-card__note { font-size: 13px; }
	.tp-how-card__pill { font-size: 16px; padding: 9px 18px; border-radius: 9px; }
	.tp-how-card__big { font-size: 34px; }
	/* Phones: one card per row, pack shot below the grid rather than overlapping. */
	.tp-perk-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.tp-perk { aspect-ratio: auto; }
	.tp-perks__panel { padding: 18px 16px 0; }
	.tp-perks__title-b { font-size: 40px; }
	.tp-perks__title-a { font-size: 22px; }
	.tp-perks__sub { font-size: 14px; }
	.tp-perks__panel-head h3 { font-size: 22px; }
	.tp-perks__panel-head p { font-size: 14px; }
	.tp-perk__title { font-size: 18px; }
	.tp-perk__text { font-size: 14px; }
	.tp-perk__icon-wrap { width: 52px; }
	.tp-perks__pack { position: static; width: min(78%, 300px); margin: 14px auto -1px; display: block; }
	/* Phones: the portrait photo framing from the design. */
	.tp-nutrition__panel { aspect-ratio: 383 / 553; }
	.tp-nutrition__inner { padding-block: 8.4% 5.2%; padding-inline: 7.3%; }
	.tp-nutrition__title { font-size: 26px; max-width: 11ch; }
	.tp-nutrition__card { width: 100%; padding: 14px 16px; }
	.tp-nutrition__card p { font-size: 11px; }
	.tp-inside__grid,
	.tp-perks .tp-wrap,
	.tp-how .tp-wrap { padding-top: 60px; padding-bottom: 60px; }
	.tp-choose__inner,
	/* Phones: the two-column panel drives the widget type below legibility —
	   stack the score card and show only the front review card, full width. */
	.tp-tp { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
	.tp-tp__score, .tp-tp__deck, .tp-tp__more { grid-column: 1; grid-row: auto; }
	.tp-tp { padding: clamp(18px, 5vw, 28px) clamp(16px, 4.5vw, 24px) clamp(20px, 5vw, 28px); }
	.tp-tp__score { grid-template-columns: auto minmax(0, 1fr); padding: 14px; border-radius: 10px; }
	.tp-tp__score-num { font-size: 34px; }
	.tp-tp__score-label { font-size: 13px; }
	.tp-tp__score-count, .tp-tp__bar-label, .tp-tp__how { font-size: 11px; }
	.tp-tp__bar { height: 7px; }
	.tp-tp__stars i { width: 13px; height: 13px; }
	.tp-tp__stars i::after { font-size: 10px; line-height: 13px; }
	.tp-tp__cards { min-height: 0; }
	.tp-tp__cards { aspect-ratio: auto; }
	.tp-tp__card { position: static; width: 100%; height: auto; aspect-ratio: auto; transform: none; padding: 14px; border-radius: 8px; gap: 6px; }
	.tp-tp__card-text { -webkit-line-clamp: 8; }
	/* Only the front card shows on phones; it rotates, so target the class
	   the deck script sets rather than a DOM position. */
	.tp-tp__card { display: none; }
	.tp-tp__card.is-front, .tp-tp__cards > .tp-tp__card:last-child { display: flex; }
	.tp-tp__cards:has(.is-front) > .tp-tp__card:last-child:not(.is-front) { display: none; }
	.tp-tp__card.is-out { opacity: 1; }
	.tp-tp__card-text { font-size: 13px; }
	.tp-tp__who strong { font-size: 13px; }
	.tp-tp__date, .tp-tp__replied, .tp-tp__actions { font-size: 11px; }
	.tp-tp__avatar { width: 28px; height: 28px; font-size: 12px; }
	.tp-tp__more { font-size: 14px; padding: 9px 22px; border-radius: 8px; margin-top: 14px; }
	.tp-reviews__inner,
	.tp-faq__inner { padding-top: 60px; }

	/* Order CTA — tidy the oversized button + cramped "your pick" pill. */
	.tp-order__card { padding: 36px 20px; }
	.tp-order__title { font-size: 26px; }
	.tp-order__text { font-size: 15.5px; margin-bottom: 24px; }
	.tp-order__pick { width: 100%; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 18px; margin-bottom: 22px; }
	.tp-order__pick-name { font-size: 15px; }
	.tp-order__pick-label { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
	.tp-order .tp-btn--xl { display: block; width: 100%; font-size: 16px; line-height: 1.35; padding: 16px 20px; }
	.tp-order__fine { font-size: 12px; margin-top: 16px; }
}

/* ---- One-per-customer trial modal ---- */
.tp-modal { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tp-modal[hidden] { display: none; }
.tp-modal__backdrop { position: absolute; inset: 0; background: rgba(29, 35, 39, .55); }
.tp-modal__dialog { position: relative; width: min(520px, 100%); max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 20px; padding: clamp(26px, 4vw, 40px); box-shadow: rgba(0, 0, 0, .25) 0 24px 60px; text-align: center; }
.tp-modal__x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--tp-cream); color: var(--tp-ink); display: grid; place-items: center; cursor: pointer; }
.tp-modal__x:hover { background: var(--tp-pink-soft); color: var(--tp-pink); }
.tp-modal__title { font-family: var(--tp-head); font-weight: 700; font-size: clamp(21px, 3vw, 28px); line-height: 1.2; color: var(--tp-ink); margin: 0 0 12px; }
.tp-modal__text { font-size: 15px; line-height: 1.6; color: var(--tp-muted); margin: 0 0 12px; text-wrap: pretty; }
.tp-modal__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; }
.tp-modal__dismiss { border: 0; background: none; font-family: var(--tp-head); font-weight: 700; font-size: 14px; color: var(--tp-muted-soft); cursor: pointer; padding: 6px 10px; }
.tp-modal__dismiss:hover { color: var(--tp-ink); }
@media (prefers-reduced-motion: no-preference) {
	.tp-modal:not([hidden]) .tp-modal__dialog { animation: tp-modal-in .28s cubic-bezier(.22, 1, .36, 1) both; }
	@keyframes tp-modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
}

/* Benefit bubbles are draggable — stop the drag turning into a text selection. */
.tp-bubble { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; will-change: transform; }
.tp-bubble span { pointer-events: none; }