/* Prime Peptides Child — homepage v4 (inc/home-sections.php), 2026-09-25.
   Owner brief: pastel-blue fills, product-led imagery, colour-tinted icons,
   generous spacing; the proof section is the only navy block. Every class
   in pp-home-el.css never reach these sections. Front page only. */

.pp-home {
  /* Homepage display size (hero and proof titles); sized so "Research
     peptides" always fits on one line of the hero copy panel. */
  --h4-display: clamp(36px, 3.9vw, 64px);
  --h4-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --h4-ease: cubic-bezier(.2, .8, .2, 1);
  --h4-gutter: max(48px, calc((100% - 1344px) / 2));
  /* Pastel fills, one soft family around the label blue. */
  --h4-sky: var(--pp-sky);
  --h4-lilac: #F0EEFB;
  --h4-mint: #E6F5F2;
  background: var(--canvas);
}
body.pp-el-page { background: var(--canvas); }

/* Elementor wrappers around each shortcode: no padding, full width. */
.pp-home .h3-slot-sec,
.pp-home .h3-slot-sec > .elementor-element,
.pp-home .h3-slot-sec .elementor-widget-container,
.pp-home .h3-slot-sec .elementor-shortcode { width: 100%; max-width: none; margin: 0; padding: 0; }

.pp-home .h4-wrap { width: min(1344px, calc(100% - 96px)); margin-inline: auto; }
.pp-home .h4-sec { padding: 112px 0; }
.pp-home .h4-h2 {
  margin: 0;
  font: 500 48px/1.05 var(--sans);
  letter-spacing: -.03em;
  color: var(--pp-navy);
  text-wrap: balance;
}
.pp-home .h4-h2--center { text-align: center; }
.pp-home code { font-family: var(--h4-mono); font-weight: 500; background: none; padding: 0; color: inherit; }

/* Buttons and links */
.pp-home .h4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font: 500 16px/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.pp-home .h4-btn svg { width: 18px; height: 18px; transition: transform .25s var(--h4-ease); }
.pp-home .h4-btn:hover svg { transform: translateX(3px); }
.pp-home .h4-btn:active { transform: translateY(1px); }
.pp-home .h4-btn:focus-visible { outline: 2px solid var(--pp-blue-deep); outline-offset: 3px; }
.pp-home .h4-btn--dark { background: var(--pp-navy); color: var(--canvas); }
.pp-home .h4-btn--dark:hover { background: var(--pp-navy-3); color: var(--canvas); }
.pp-home .h4-btn--ghost { background: var(--canvas); color: var(--pp-navy); box-shadow: inset 0 0 0 1px var(--pp-line); }
.pp-home .h4-btn--ghost:hover { background: var(--h4-sky); color: var(--pp-navy); box-shadow: inset 0 0 0 1px var(--pp-pastel); }
.pp-home .h4-btn--light { background: var(--canvas); color: var(--pp-navy); }
.pp-home .h4-btn--light:hover { background: var(--h4-sky); color: var(--pp-navy); }
.pp-home .h4-link { display: inline-flex; align-items: center; gap: 6px; color: var(--pp-navy); font: 500 16px/1 var(--sans); text-decoration: none; white-space: nowrap; }
.pp-home .h4-link svg { width: 16px; height: 16px; transition: transform .25s var(--h4-ease); }
.pp-home .h4-link:hover { color: var(--pp-navy); }
.pp-home .h4-link:hover svg { transform: translateX(3px); }

/* Colour-tinted icons (Amino-style): tinted square, saturated glyph. */
.pp-home .h4-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 16px;
}
.pp-home .h4-ico svg { width: 24px; height: 24px; }
.pp-home .h4-ico--blue { background: var(--pp-sky); color: var(--pp-blue-deep); }
.pp-home .h4-ico--lilac { background: var(--pp-lilac); color: var(--pp-lilac-ink); }
.pp-home .h4-ico--teal { background: var(--pp-mint); color: var(--pp-teal); }
.pp-home .h4-ico--amber { background: var(--pp-amber); color: var(--pp-amber-ink); }
.pp-home .h4-ico--rose { background: var(--pp-rose); color: var(--pp-rose-ink); }
.pp-home .h4-ico--slate { background: var(--pp-mist); color: var(--pp-navy-3); }

/* ---------- 1. Hero: 2 × 2, fills the first screen ---------- */
.pp-home .h4-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Two equal rows: the headline row matches the height of the Prime
     standard row below it, so more of the page shows on first load
     (owner, vs the Amino reference). */
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "copy group" "single standard";
  overflow: hidden;
}
/* Copy block centred in its panel (after the Amino reference). */
.pp-home .h4-hero__copy {
  grid-area: copy;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: var(--canvas);
}
.pp-home .h4-hero__copy-inner { width: 100%; max-width: 560px; }
.pp-home .h4-hero__title {
  margin: 0;
  font: 700 var(--h4-display)/1.02 var(--sans);
  letter-spacing: -.03em;
  color: var(--pp-navy);
}
.pp-home .h4-hero__title span { display: block; white-space: nowrap; }
/* One step smaller than the section display size (owner, vs Amino ref). */
.pp-home .h4-hero .h4-hero__title { font-size: clamp(36px, 3.5vw, 54px); }
/* "verify" in Prime Blue, with an underline that draws in on load. */
.pp-home .h4-hero__accent { position: relative; font-style: normal; color: var(--pp-blue); }
.pp-home .h4-hero__accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .04em;
  height: .08em;
  border-radius: 999px;
  background: currentColor;
  opacity: .35;
  transform-origin: left;
  animation: h4-underline .8s var(--h4-ease) .7s both;
}
@keyframes h4-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pp-home .h4-hero__lead { max-width: 30em; margin: 24px 0 0; font: 400 18px/1.6 var(--sans); color: var(--pp-navy-3); }
.pp-home .h4-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pp-home .h4-hero__ctas .h4-btn { min-height: 52px; padding: 0 28px; font-size: 16px; font-weight: 600; }
.pp-home .h4-hero__ctas .h4-btn--ghost { box-shadow: inset 0 0 0 1.5px var(--pp-navy); }
.pp-home .h4-hero__ctas .h4-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--pp-navy); }

.pp-home .h4-hero__group {
  grid-area: group;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--h4-lilac) 0%, var(--pp-mist) 48%, var(--h4-sky) 100%);
}
.pp-home .h4-hero__group-img {
  /* Media Library hero vials (transparent render with its own shadow).
     No CSS drop-shadow: the box clipped it into a hard line. */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90%;
  height: 90%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%);
  animation: h4-rise-in .9s var(--h4-ease) .15s both;
}
.pp-home .h4-hero__single {
  grid-area: single;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--pp-mist) 0%, var(--h4-sky) 100%);
}
.pp-home .h4-hero__single-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: 112%;
  max-width: none;
  transform: translate(-50%, -48%);
  animation: h4-float 7s ease-in-out infinite;
}
/* The Prime standard: three stacked bands, each with a tinted strip on
   the left edge of the panel and a large round icon (Amino reference). */
.pp-home .h4-hero__standard {
  grid-area: standard;
  display: flex;
  align-items: flex-start;
  padding: 56px var(--h4-gutter) 72px 0;
  background: var(--canvas);
}
.pp-home .h4-hero__standard-inner { width: 100%; max-width: 720px; }
.pp-home .h4-hero__standard-title,
.pp-home .h4-hero__standard-lead { padding-left: 64px; }
.pp-home .h4-hero__standard-title { margin: 0; font: 600 32px/1.15 var(--sans); letter-spacing: -.03em; color: var(--pp-navy); }
.pp-home .h4-hero__standard-lead { margin: 12px 0 32px; font: 400 16px/1.6 var(--sans); color: var(--pp-slate); }
.pp-home .h4-hero__standard-lead span { display: block; }
.pp-home .h4-std { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pp-home .h4-std__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 16px 24px 16px 64px;
  background: var(--canvas);
  box-shadow: 0 1px 2px rgba(6, 20, 38, .04), 0 8px 24px rgba(6, 20, 38, .05);
}
.pp-home .h4-std__row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 24px; background: var(--h4-band, var(--pp-sky)); }
.pp-home .h4-std__row--teal { --h4-band: #E6F5F2; }
.pp-home .h4-std__row--blue { --h4-band: #DDEAFA; }
.pp-home .h4-std__row--amber { --h4-band: #FBF1DC; }
.pp-home .h4-std .h4-ico { width: 56px; height: 56px; border-radius: 50%; }
.pp-home .h4-std .h4-ico svg { width: 26px; height: 26px; stroke-width: 2; }
.pp-home .h4-std__row b { display: block; font: 600 17px/1.3 var(--sans); letter-spacing: -.01em; color: var(--pp-navy); }
.pp-home .h4-std__row small { display: block; margin-top: 4px; font: 400 14px/1.45 var(--sans); color: var(--pp-slate); }

/* Hero entrance: once, on load. */
@keyframes h4-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes h4-rise-in { from { opacity: 0; transform: translate(-50%, -44%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes h4-float { 0%, 100% { transform: translate(-50%, -48%) rotate(0deg); } 50% { transform: translate(-50%, -52%) rotate(1.5deg); } }
.pp-home .h4-in { animation: h4-in .7s var(--h4-ease) both; }
.pp-home .h4-in--1 { animation-delay: .05s; }
.pp-home .h4-in--2 { animation-delay: .15s; }
.pp-home .h4-in--3 { animation-delay: .25s; }
.pp-home .h4-in--4 { animation-delay: .35s; }
.pp-home .h4-in--5 { animation-delay: .45s; }
.pp-home .h4-in--6 { animation-delay: .55s; }

/* ---------- 2. Meet the lineup ---------- */
.pp-home .h4-lineup { padding-bottom: 96px; }
.pp-home .h4-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.pp-home .h4-head__tools { display: flex; align-items: center; gap: 24px; }
.pp-home .h4-arrows { display: flex; gap: 8px; }
.pp-home .h4-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--pp-line);
  color: var(--pp-navy);
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.pp-home .h4-arrow svg { width: 20px; height: 20px; }
.pp-home .h4-arrow:hover:not(:disabled) { background: var(--h4-sky); box-shadow: inset 0 0 0 1px var(--pp-pastel); color: var(--pp-navy); }
.pp-home .h4-arrow:disabled { opacity: .35; cursor: default; }
.pp-home .h4-arrow:focus-visible { outline: 2px solid var(--pp-blue-deep); outline-offset: 2px; }

.pp-home .h4-row.products {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: 420px;
  gap: 24px;
  margin: 0;
  padding: 6px var(--h4-gutter) 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--h4-gutter);
  scrollbar-width: none;
}
.pp-home .h4-row.products::-webkit-scrollbar { display: none; }
.pp-home .h4-row.products > .ppc { scroll-snap-align: start; }
/* Larger, product-led cards on the homepage. */
.pp-home .h4-row .ppc.ppc { border-radius: 22px; }
.pp-home .h4-row .ppc.ppc .ppc__stock,
.pp-home .h4-row .ppc.ppc .ppc__coa { height: 28px; padding: 0 12px; font-size: 13px; }
.pp-home .h4-row .ppc.ppc .ppc__stock { top: 14px; left: 14px; }
.pp-home .h4-row .ppc.ppc .ppc__coa { left: 14px; bottom: 14px; }
.pp-home .h4-row .ppc.ppc .ppc__body { padding: 20px 22px 22px; }
.pp-home .h4-row .ppc.ppc .ppc__body .ppc__name { font-size: 20px; line-height: 28px; }
.pp-home .h4-row .ppc.ppc .ppc__desc { margin-top: 4px; font-size: 14px; line-height: 22px; }
.pp-home .h4-row .ppc.ppc .ppc__price { margin-top: 10px; font-size: 20px; line-height: 26px; }
.pp-home .h4-row .ppc.ppc .ppc__btns { gap: 10px; padding-top: 18px; }
.pp-home .h4-row .ppc.ppc .ppc__btn { height: 48px; font-size: 16px; }

/* ---------- 3. Proof: four release tests around a vial ----------
   Moved from the Test Results page 2026-09-26. The stage is 1200 × 640 so
   the SVG leader lines meet the vial; below 1180px it becomes a list. */
.pp-home .h4-proof { overflow: hidden; background: radial-gradient(60% 70% at 50% 60%, var(--canvas) 0%, #F1F5FA 55%, #E6EEF8 100%); }
.pp-home .h4-proof__head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.pp-home .h4-proof__lead { max-width: 32em; margin: 0; font: 400 17px/1.6 var(--sans); color: var(--pp-navy-3); }
.pp-home .h4-proof__labs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 20px 0 0; font: 400 14px/1.3 var(--sans); color: var(--pp-slate); }
.pp-home .h4-proof__labs a { display: inline-flex; align-items: center; gap: 8px; color: var(--pp-navy); text-decoration: none; }
.pp-home .h4-proof__labs b { font: 600 15px/1 var(--sans); letter-spacing: -.01em; }
.pp-home .h4-proof__labs i { width: 4px; height: 4px; border-radius: 50%; background: var(--pp-slate); }
.pp-home .h4-proof__v { height: 32px; width: auto; mix-blend-mode: multiply; }
.pp-home .h4-proof__j { height: 24px; width: auto; }
.pp-home .h4-proof__stage { position: relative; max-width: 1200px; height: 640px; margin: 40px auto 0; }
.pp-home .h4-proof__ring { position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; border: 1px dashed rgba(11, 26, 43, .12); border-radius: 50%; transform: translate(-50%, -50%); }
.pp-home .h4-proof__ring::after { content: ""; position: absolute; inset: 60px; border-radius: 50%; background: radial-gradient(circle, rgba(65, 143, 222, .10), transparent 70%); }
.pp-home .h4-proof__vial { position: absolute; left: 50%; top: 50%; width: 430px; height: auto; max-width: none; transform: translate(-50%, -50%); animation: h4-proof-float 7s ease-in-out infinite; }
@keyframes h4-proof-float { 50% { transform: translate(-50%, -52%) rotate(1.5deg); } }
.pp-home .h4-proof__lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--pp-navy-3); stroke-width: 1.2; opacity: .5; }
.pp-home .h4-proof__lines circle { fill: var(--canvas); stroke: var(--pp-blue); stroke-width: 2.5; }
.pp-home .h4-proof__list { margin: 0; padding: 0; list-style: none; }
.pp-home .h4-proof__c { position: absolute; width: 320px; margin: 0; }
.pp-home .h4-proof__c--1 { left: 0; top: 60px; text-align: right; }
.pp-home .h4-proof__c--2 { left: 0; top: 380px; text-align: right; }
.pp-home .h4-proof__c--3 { right: 0; top: 100px; }
.pp-home .h4-proof__c--4 { right: 0; top: 410px; }
.pp-home .h4-proof__n { font: 600 14px/1 var(--sans); letter-spacing: .06em; color: var(--pp-blue-deep); }
.pp-home .h4-proof__c h3 { margin: 10px 0 0; font: 600 28px/1.15 var(--sans); letter-spacing: -.02em; color: var(--pp-navy); }
.pp-home .h4-proof__c b { display: block; margin-top: 6px; font: 500 16px/1.4 var(--sans); color: var(--pp-navy-3); }
.pp-home .h4-proof__c p { margin: 4px 0 0; font: 400 15px/1.5 var(--sans); color: var(--pp-slate); }
.pp-home .h4-proof__more { margin: 32px 0 0; text-align: center; }
.pp-home .h4-proof__more .h4-btn svg { width: 16px; height: 16px; }
@media (max-width: 1180px) {
  .pp-home .h4-proof__stage { height: auto; margin-top: 48px; }
  .pp-home .h4-proof__ring,
  .pp-home .h4-proof__lines { display: none; }
  .pp-home .h4-proof__vial { position: relative; left: auto; top: auto; display: block; width: min(320px, 70%); margin: 0 auto; transform: none; animation: none; }
  .pp-home .h4-proof__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; margin-top: 40px; }
  .pp-home .h4-proof__c { position: static; width: auto; text-align: left; }
  .pp-home .h4-proof__c h3 { font-size: 20px; }
}
@media (max-width: 899px) {
  .pp-home .h4-proof__head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pp-home .h4-proof__lead { font-size: 16px; }
  .pp-home .h4-proof__labs i { display: none; }
  .pp-home .h4-proof__list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pp-home .h4-proof__c h3 { font-size: 20px; }
  .pp-home .h4-proof__more .h4-btn { width: 100%; }
}

/* ---------- 4. Build a stack ---------- */
.pp-home .h4-stack {
  position: relative;
  overflow: hidden;
  padding: 128px 0;
  background: linear-gradient(115deg, var(--h4-lilac) 0%, var(--pp-mist) 45%, var(--h4-mint) 100%);
}
/* Vial rain: tiles fall top to bottom in lanes either side of the text,
   fade in and out at the edges (mask), then start again from the top.
   Each tile has its own lane (--x), size (--w), speed (--d), start point
   (negative --dl, so the rain is already under way on load), tilt (--r)
   and depth (blur + opacity). The travel uses the tile layer's own height
   (container query units), so it works at any section height. The mask
   reads only alpha, so any opaque token works as its solid stop. */
.pp-home .h4-stack__tiles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--pp-navy) 16%, var(--pp-navy) 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, var(--pp-navy) 16%, var(--pp-navy) 84%, transparent 100%);
}
.pp-home .h4-tile {
  position: absolute;
  left: var(--x);
  top: var(--y, 40%);
  width: var(--w, 84px);
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: 16px;
  background: var(--canvas);
  box-shadow: 0 1px 2px rgba(6, 20, 38, .04), 0 4px 12px rgba(6, 20, 38, .04);
  opacity: var(--o, 1);
  filter: var(--f, none);
  transform: rotate(var(--r, 0deg));
  will-change: transform;
}
.pp-home .h4-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes h4-rain {
  from { transform: translateY(-160px) rotate(var(--r, 0deg)); }
  to { transform: translateY(calc(100cqh + 20px)) rotate(calc(var(--r, 0deg) * -1)); }
}
html.h4-motion .pp-home .h4-tile{
  top: 0;
  animation: h4-rain var(--d, 22s) linear var(--dl, 0s) infinite;
}
/* Sharp tiles in front, soft ones behind. --y places each tile when motion is off. */
.pp-home .h4-tile--1 { --x: 52%; --w: 100px; --d: 19s; --dl: -3s; --r: -8deg; --y: 8%; }
.pp-home .h4-tile--2 { --x: 60%; --w: 84px; --d: 23s; --dl: -13s; --r: 6deg; --y: 56%; }
.pp-home .h4-tile--3 { --x: 66%; --w: 64px; --d: 27s; --dl: -7s; --r: -5deg; --o: .6; --f: blur(1.5px); --y: 18%; }
.pp-home .h4-tile--4 { --x: 56%; --w: 56px; --d: 31s; --dl: -20s; --r: 10deg; --o: .45; --f: blur(2px); --y: 78%; }
.pp-home .h4-tile--5 { --x: 72%; --w: 84px; --d: 21s; --dl: -10s; --r: 7deg; --y: 60%; }
.pp-home .h4-tile--6 { --x: 88%; --w: 100px; --d: 18s; --dl: -1s; --r: -6deg; --y: 10%; }
.pp-home .h4-tile--7 { --x: 82%; --w: 60px; --d: 29s; --dl: -17s; --r: -10deg; --o: .45; --f: blur(2px); --y: 34%; }
.pp-home .h4-tile--8 { --x: 94%; --w: 52px; --d: 33s; --dl: -25s; --r: 4deg; --o: .4; --f: blur(2px); --y: 74%; }
.pp-home .h4-tile--9 { --x: 50%; --w: 60px; --d: 30s; --dl: -24s; --r: 4deg; --o: .55; --f: blur(1.5px); --y: 40%; }
.pp-home .h4-tile--10 { --x: 64%; --w: 72px; --d: 25s; --dl: -5s; --r: -3deg; --o: .7; --f: blur(1px); --y: 30%; }
.pp-home .h4-tile--11 { --x: 78%; --w: 72px; --d: 24s; --dl: -21s; --r: 3deg; --o: .7; --f: blur(1px); --y: 82%; }
.pp-home .h4-tile--12 { --x: 91%; --w: 56px; --d: 28s; --dl: -9s; --r: -7deg; --o: .55; --f: blur(1.5px); --y: 20%; }
.pp-home .h4-stack__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.pp-home .h4-stack__lead { max-width: 30em; margin: 18px 0 0; font: 400 17px/1.6 var(--sans); color: var(--pp-slate); }
/* Three discount tiers as white blocks on the pastel section, big number
   first. */
.pp-home .h4-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 560px; margin: 32px 0 0; padding: 0; list-style: none; }
.pp-home .h4-tier { margin: 0; padding: 20px; border-radius: 16px; background: var(--canvas); box-shadow: 0 12px 30px rgba(6, 20, 38, .06); }
.pp-home .h4-tier strong { display: flex; align-items: baseline; font: 700 40px/1 var(--sans); letter-spacing: -.03em; color: var(--pp-navy); }
.pp-home .h4-tier strong small { font: 700 20px/1 var(--sans); letter-spacing: -.02em; }
.pp-home .h4-tier span { display: block; margin-top: 10px; font: 500 14px/1.4 var(--sans); color: var(--pp-navy-3); }
.pp-home .h4-stack__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }
.pp-home .h4-stack__fine { margin: 0; font: 400 13px/1.4 var(--sans); color: var(--pp-muted); }
/* Example stack: three vials fanned out, the receipt overlapping below. */
.pp-home .h4-stack__demo { position: relative; display: flex; flex-direction: column; align-items: center; }
.pp-home .h4-fan { position: relative; width: 460px; max-width: 100%; height: 300px; }
.pp-home .h4-fan__vial { position: absolute; top: 0; left: 50%; width: 190px; aspect-ratio: 5 / 6; overflow: hidden; border-radius: 20px; background: var(--canvas); box-shadow: 0 24px 48px rgba(6, 20, 38, .14); }
.pp-home .h4-fan__vial img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-home .h4-fan__vial--1 { transform: translateX(-120%) translateY(28px) rotate(-8deg); }
.pp-home .h4-fan__vial--2 { z-index: 2; transform: translateX(-50%); }
.pp-home .h4-fan__vial--3 { transform: translateX(20%) translateY(28px) rotate(8deg); }
.pp-home .h4-receipt { position: relative; z-index: 3; width: min(100%, 400px); margin-top: -24px; padding: 22px 24px; border-radius: 20px; background: var(--canvas); box-shadow: 0 30px 60px rgba(6, 20, 38, .14); }
.pp-home .h4-receipt p { margin: 0; }
.pp-home .h4-receipt__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-home .h4-receipt__head b { font: 600 16px/1.3 var(--sans); color: var(--pp-navy); }
.pp-home .h4-receipt__head em { padding: 5px 10px; border-radius: 999px; background: var(--pp-sky); font: 600 12px/1 var(--sans); font-style: normal; color: var(--pp-blue-deep); }
.pp-home .h4-receipt ul { display: grid; gap: 8px; margin: 16px 0 0; padding: 0 0 16px; border-bottom: 1px dashed var(--pp-line); list-style: none; }
.pp-home .h4-receipt li { display: flex; justify-content: space-between; margin: 0; font: 400 14px/1.4 var(--sans); color: var(--pp-navy-3); }
.pp-home .h4-receipt__total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px !important; font: 500 14px/1.3 var(--sans); color: var(--pp-navy-3); }
.pp-home .h4-receipt__total > span:last-child { display: flex; align-items: baseline; gap: 10px; }
.pp-home .h4-receipt__total s { font: 400 14px/1 var(--sans); color: var(--pp-muted); }
.pp-home .h4-receipt__total b { font: 600 32px/1 var(--sans); letter-spacing: -.03em; color: var(--pp-navy); }
.pp-home .h4-receipt__save { margin-top: 8px !important; text-align: right; font: 600 14px/1.3 var(--sans); color: var(--pp-teal); }

/* ---------- 5. Why buy from Prime ---------- */
.pp-home .h4-why { background: var(--pp-paper); }
.pp-home .h4-why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 56px 0 0; padding: 0; list-style: none; }
.pp-home .h4-reason {
  margin: 0;
  padding: 28px;
  border-radius: 20px;
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--pp-line);
  transition: transform .3s var(--h4-ease), box-shadow .3s ease;
}
.pp-home .h4-reason:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--pp-pastel), 0 20px 48px -30px rgba(11, 26, 43, .3); }
.pp-home .h4-reason h3 { margin: 20px 0 0; font: 600 20px/1.35 var(--sans); color: var(--pp-navy); }
.pp-home .h4-reason p { margin: 8px 0 0; font: 400 14px/1.6 var(--sans); color: var(--pp-slate); }

/* ---------- 6. FAQ (Elementor accordion), one centred column ---------- */
.pp-home .faq-section { padding: 112px 0; background: var(--canvas); }
.pp-home .faq-section .faq-grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: min(820px, calc(100% - 40px));
  max-width: none;
  margin-inline: auto;
  padding: 0;
  border: 0;
}
.pp-home .faq-section .faq-left { align-self: center; text-align: center; margin-bottom: 36px; }
.pp-home .faq-section .faq-left .elementor-heading-title { margin: 0; font: 500 48px/1.05 var(--sans); letter-spacing: -.03em; color: var(--pp-navy); text-align: center; }
.pp-home .faq-section .faq-intro,
.pp-home .faq-section .faq-intro p { margin: 14px 0 0; font: 400 16px/1.6 var(--sans); color: var(--pp-slate); text-align: center; }
.pp-home .faq-section .elementor-accordion-item { border: 0; border-bottom: 1px solid var(--pp-line); background: none; }
.pp-home .faq-section .elementor-accordion-item:first-child { border-top: 1px solid var(--pp-line); }
.pp-home .faq-section .elementor-tab-title { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; border: 0; background: none; text-align: left; transition: background-color .2s ease; }
.pp-home .faq-section .elementor-tab-title:hover { background: var(--h4-sky); }
.pp-home .faq-section .elementor-accordion-title { flex: 1 1 auto; min-width: 0; color: var(--pp-navy); font: 500 17px/1.4 var(--sans); text-align: left; text-decoration: none; }
.pp-home .faq-section .elementor-tab-content { padding: 0 4px 22px; border: 0; background: none; max-width: 44em; font: 400 16px/1.6 var(--sans); color: var(--pp-slate); }
.pp-home .faq-section .faq-cta { display: flex; justify-content: center; margin-top: 32px; }
.pp-home .faq-section .faq-cta .elementor-widget-html,
.pp-home .faq-section .faq-cta .elementor-widget-container { display: flex; justify-content: center; }
.pp-home .faq-section .pp-faq-cta { min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--pp-line); color: var(--pp-navy); font: 500 16px/1 var(--sans); }
.pp-home .faq-section .pp-faq-cta:hover { background: var(--h4-sky); color: var(--pp-navy); }

/* ---------- Scroll reveal (only below-the-fold items, set by pp-home-v2.js) ---------- */
html.h4-motion .pp-home .h4-rise.is-pending { opacity: 0; transform: translateY(18px); }
html.h4-motion .pp-home .h4-rise{ transition: opacity .7s var(--h4-ease), transform .7s var(--h4-ease); }

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  /* Narrower screens: one column, the example stack under the copy, and
     only the softer tiles at the edges. */
  .pp-home .h4-stack__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .pp-home .h4-tile--1, .pp-home .h4-tile--2, .pp-home .h4-tile--5, .pp-home .h4-tile--10 { display: none; }
  .pp-home .h4-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-home .h4-hero__copy { padding: 40px; }
  .pp-home .h4-hero__standard-title, .pp-home .h4-hero__standard-lead { padding-left: 56px; }
  .pp-home .h4-std__row { padding-left: 56px; gap: 16px; }
  .pp-home .h4-std__row::before { width: 20px; }
  .pp-home .h4-std .h4-ico { width: 48px; height: 48px; }
  .pp-home .h4-std .h4-ico svg { width: 24px; height: 24px; }
}

/* ---------- Phone ---------- */
@media (max-width: 899px) {
  .pp-home { --h4-gutter: 20px; --h4-display: clamp(30px, 8.4vw, 40px); }
  .pp-home .h4-wrap { width: calc(100% - 40px); }
  .pp-home .h4-sec { padding: 72px 0; }
  .pp-home .h4-h2 { font-size: 32px; line-height: 1.08; }

  .pp-home .h4-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "group" "copy" "standard";
    height: auto;
  }
  .pp-home .h4-hero__copy { padding: 40px 20px 32px; }
  .pp-home .h4-hero__title { font-size: var(--h4-display); }
  .pp-home .h4-hero__lead { font-size: 17px; }
      .pp-home .h4-hero__ctas { flex-direction: column; }
  .pp-home .h4-hero__ctas .h4-btn { width: 100%; }
  /* Phone: the vials first, full width, keeping their 1672:941 shape. */
  .pp-home .h4-hero__group { height: auto; aspect-ratio: 1672 / 941; }
  .pp-home .h4-hero__single { display: none; }
  .pp-home .h4-hero__standard { padding: 48px 20px 8px 0; }
  .pp-home .h4-hero__standard-title { font-size: 32px; }
  .pp-home .h4-hero__standard-title, .pp-home .h4-hero__standard-lead { padding-left: 20px; }
  .pp-home .h4-hero__standard-lead { margin: 10px 0 28px; font-size: 16px; }
  .pp-home .h4-hero__standard-lead span { display: inline; }
  .pp-home .h4-std { gap: 12px; }
  .pp-home .h4-std__row { gap: 16px; padding: 20px 16px 20px 32px; }
  .pp-home .h4-std__row::before { width: 14px; }
  .pp-home .h4-std .h4-ico { width: 52px; height: 52px; }
  .pp-home .h4-std .h4-ico svg { width: 24px; height: 24px; }
  .pp-home .h4-std__row b { font-size: 17px; }
  .pp-home .h4-std__row small { font-size: 14px; }

  .pp-home .h4-head { margin-bottom: 24px; }
  .pp-home .h4-arrows { display: none; }
  .pp-home .h4-row.products { grid-auto-columns: 78vw; gap: 14px; }
  .pp-home .h4-row .ppc.ppc .ppc__body .ppc__name { font-size: 20px; line-height: 26px; }


  /* Phone: fewer, smaller vials at the edges; the text sits above them. */
  .pp-home .h4-stack { padding: 88px 0; }
  .pp-home .h4-stack__tiles { display: none; }
  .pp-home .h4-tiers { gap: 8px; }
  .pp-home .h4-tier { padding: 14px 12px; }
  .pp-home .h4-tier strong { font-size: 32px; }
  .pp-home .h4-tier span { font-size: 12px; }
  .pp-home .h4-stack__cta .h4-btn { width: 100%; }
  .pp-home .h4-fan { width: 320px; height: 210px; }
  .pp-home .h4-fan__vial { width: 132px; border-radius: 16px; }
  .pp-home .h4-fan__vial--1, .pp-home .h4-fan__vial--3 { translate: 0 -8px; }

  .pp-home .h4-why__grid { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .pp-home .h4-reason { padding: 22px; }

  .pp-home .faq-section { padding: 72px 0; }
  .pp-home .faq-section .faq-left .elementor-heading-title { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-home .h4-hero__accent::after { animation: none; }
  .pp-home .h4-in,
  .pp-home .h4-hero__group-img,
  .pp-home .h4-hero__single-img,
  html.h4-motion .pp-home .h4-tile,
  .pp-home .h4-proof__vial { animation: none; transition: none; }
  .pp-home .h4-hero__group-img { transform: translate(-50%, -50%); }
  .pp-home .h4-proof__vial { transform: translate(-50%, -50%); }
  .pp-home .h4-hero__single-img { transform: translate(-50%, -48%); }
  html.h4-motion .pp-home .h4-rise.is-pending { opacity: 1; transform: none; }
  .pp-home .h4-btn, .pp-home .h4-reason { transition: none; }
}

/* ==========================================================================
   Homepage v5.1 (2026-09-28, owner review): back to the Amino-style hero
   and the original section colours; keeps the calmer type and buttons.
   ========================================================================== */

/* Type and buttons */
.pp-home .h4-h2 { font-weight: 600; font-size: clamp(32px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -.025em; }
.pp-home .h4-hero .h4-hero__title { font-size: clamp(40px, 3.9vw, 56px); letter-spacing: -.035em; }
.pp-home .h4-btn,
.pp-home .h4-hero__ctas .h4-btn { min-height: 48px; padding: 0 24px; font-size: 15px; font-weight: 600; }

/* Hero on desktop: a tall first row like the Amino reference (the vial
   group fills its panel), the second row sized by its content, and the
   whole card at least one screen tall so no white gap shows under it.
   The single vial sits whole inside its panel. */
@media (min-width: 900px) {
  .pp-home .h4-hero {
    grid-template-rows: minmax(470px, 1.15fr) auto;
    min-height: calc(100svh - var(--pp-hero-top, 118px) - 8px);
  }
  .pp-home .h4-hero__group-img { width: 96%; height: 96%; }
  .pp-home .h4-hero__single-img { height: 86%; }

  /* Amino layout: four solid blocks in a checkerboard (white copy,
     pastel pictures, white standard), no inner cards and no gaps. The
     copy block is centred in its panel with a narrower paragraph. */
  .pp-home .h4-hero { grid-template-rows: minmax(520px, 1.3fr) auto; }
  .pp-home .h4-hero .h4-hero__copy { position: relative; z-index: 1; justify-content: center; padding: 56px 48px; background: var(--canvas); }
  .pp-home .h4-hero__copy-inner { width: auto; max-width: 560px; }
  .pp-home .h4-hero__lead { max-width: 27em; }
  .pp-home .h4-hero .h4-hero__standard { background: var(--canvas); }
  .pp-home .h4-hero .h4-hero__group { z-index: 2; overflow: visible; clip-path: inset(0 0 0 -40%); background: linear-gradient(160deg, var(--h4-lilac) 0%, var(--pp-sky) 60%, var(--pp-sky-strong) 100%); }
  .pp-home .h4-hero .h4-hero__single { background: linear-gradient(160deg, var(--h4-lilac) 0%, var(--pp-sky) 100%); }

  /* Group shot: large, anchored low and left, spilling into the copy
     panel and running off the bottom edge (the card clips it). */
  .pp-home .h4-hero .h4-hero__group-img {
    left: -13%;
    top: auto;
    bottom: -6%;
    width: 110%;
    height: auto;
    max-height: none;
    transform: none;
    animation: h4-hero-fade .9s var(--h4-ease) .15s both;
  }
  /* Single vial: big and cropped, low on the left, gently floating. */
  .pp-home .h4-hero .h4-hero__single-img {
    left: 50%;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 86%;
    transform: translate(-50%, -50%);
    animation: h4-hero-bob 7s ease-in-out infinite;
  }
}
@keyframes h4-hero-fade { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes h4-hero-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) {
  .pp-home .h4-hero .h4-hero__group-img,
  .pp-home .h4-hero .h4-hero__single-img { animation: none; }
}

/* The Prime standard strips (Amino): wider, stronger colour band; the
   icon sits close to it; icon circle matches the band, glyph saturated. */
.pp-home .h4-std__row { padding-left: 56px; }
.pp-home .h4-std__row::before { width: 32px; }
/* Desktop: the colour band hangs past the panel edge into the picture
   panel, like Amino; each row is a rounded card. */
@media (min-width: 900px) {
  .pp-home .h4-hero__standard { position: relative; z-index: 2; }
  .pp-home .h4-std__row { margin-left: -32px; padding-left: 60px; border-radius: 16px; overflow: hidden; }
  .pp-home .h4-hero__standard-title,
  .pp-home .h4-hero__standard-lead { padding-left: 28px; }
}
.pp-home .h4-std__row--teal { --h4-band: #BFE6DC; }
.pp-home .h4-std__row--blue { --h4-band: #C4D9F5; }
.pp-home .h4-std__row--amber { --h4-band: #F7DE9E; }
.pp-home .h4-std__row .h4-ico { background: var(--h4-band); }
.pp-home .h4-std__row--teal .h4-ico { color: var(--pp-teal-ink); }
.pp-home .h4-std__row--blue .h4-ico { color: var(--pp-blue-deep); }
.pp-home .h4-std__row--amber .h4-ico { color: #8A5A12; }

/* Stack discount tiers: one colour each, number in the matching ink. */
.pp-home .h4-tier--lilac { background: var(--pp-lilac); }
.pp-home .h4-tier--sky { background: var(--pp-sky-strong); }
.pp-home .h4-tier--mint { background: #D5F0EA; }
.pp-home .h4-tier { box-shadow: 0 10px 26px rgba(6, 20, 38, .06); }
.pp-home .h4-tier--lilac strong { color: var(--pp-lilac-ink); }
.pp-home .h4-tier--sky strong { color: var(--pp-blue-deep); }
.pp-home .h4-tier--mint strong { color: var(--pp-teal-ink); }

/* Build a stack: the vial rain uses the full width but always stays
   behind the text; tiles near the copy are fainter. */
.pp-home .h4-stack__grid { position: relative; z-index: 2; }
.pp-home .h4-stack__tiles { z-index: 0; }
.pp-home .h4-tile--1 { --x: 2%; }
.pp-home .h4-tile--2 { --x: 10%; --o: .55; }
.pp-home .h4-tile--3 { --x: 19%; --o: .3; --f: blur(2px); }
.pp-home .h4-tile--4 { --x: 30%; --o: .22; --f: blur(2.5px); }
.pp-home .h4-tile--9 { --x: 40%; --o: .22; --f: blur(2.5px); }
.pp-home .h4-tile--10 { --x: 50%; --o: .45; --f: blur(1.5px); }
.pp-home .h4-tile--5 { --x: 60%; }
.pp-home .h4-tile--11 { --x: 70%; }
.pp-home .h4-tile--7 { --x: 79%; }
.pp-home .h4-tile--6 { --x: 88%; }
.pp-home .h4-tile--12 { --x: 95%; }
.pp-home .h4-tile--8 { --x: 6%; --o: .3; --f: blur(2px); }

/* Lineup cards: smaller on desktop so four and a bit show at once
   (owner 2026-09-28: 420 px felt too big). */
@media (min-width: 900px) {
  .pp-home .h4-row.products { grid-auto-columns: 312px; gap: 20px; }
}

/* ==========================================================================
   v5.2 (2026-09-28, owner): Amino strips copied closely, shorter hero top
   row, soft blurred background behind "Why buy from Prime".
   ========================================================================== */

/* Hero: the top row about 15% shorter, and no forced full-screen height. */
@media (min-width: 900px) {
  .pp-home .h4-hero { grid-template-rows: minmax(420px, 56vh) auto; min-height: 0; }
  .pp-home .h4-hero .h4-hero__title { font-size: clamp(38px, 3.5vw, 52px); }
}

/* The Prime standard, Amino style: square white rows with a big soft
   shadow, a 24 px pale colour band flush on the left (hanging past the
   panel edge), a 60 px icon circle in the band colour with a filled glyph. */
.pp-home .h4-std { gap: 12px; }
.pp-home .h4-std__row {
  gap: 16px;
  min-height: 100px;
  padding: 12px 16px 12px 40px;
  border-radius: 0;
  background: var(--canvas);
  box-shadow: 0 4px 40px rgba(0, 0, 0, .06);
}
.pp-home .h4-std__row::before { width: 24px; }
.pp-home .h4-std__row--teal { --h4-band: #E9FCE6; --h4-glyph: #5A9B53; }
.pp-home .h4-std__row--blue { --h4-band: #CBE5FC; --h4-glyph: #3E6FB2; }
.pp-home .h4-std__row--amber { --h4-band: #FEFECA; --h4-glyph: #8A5A26; }
.pp-home .h4-std__row .h4-ico { width: 60px; height: 60px; flex: 0 0 60px; background: var(--h4-band); color: var(--h4-glyph); }
.pp-home .h4-std__row .h4-ico svg { width: 32px; height: 32px; }
/* Filled glyphs: the outline shape is filled, inner details go white. */
.pp-home .h4-std__row--teal .h4-ico svg path:first-child { fill: currentColor; }
.pp-home .h4-std__row--teal .h4-ico svg path:last-child { stroke: var(--canvas); stroke-width: 2.4; }
.pp-home .h4-std__row--blue .h4-ico svg path,
.pp-home .h4-std__row--blue .h4-ico svg circle { fill: currentColor; }
.pp-home .h4-std__row--blue .h4-ico svg circle { stroke: var(--canvas); stroke-width: 1.6; }
.pp-home .h4-std__row--amber .h4-ico svg path:nth-child(2) { fill: currentColor; }
.pp-home .h4-std__row--amber .h4-ico svg path:nth-child(3) { stroke: var(--canvas); }
.pp-home .h4-std__row b { font: 600 18px/1.3 var(--sans); letter-spacing: -.01em; }
.pp-home .h4-std__row small { margin-top: 4px; font: 400 16px/1.4 var(--sans); color: var(--pp-slate); }
@media (min-width: 900px) {
  .pp-home .h4-hero .h4-hero__standard { padding: 40px 56px 40px 0; align-items: center; }
  .pp-home .h4-hero .h4-hero__standard-title { font-size: 32px; }
  .pp-home .h4-hero__standard-inner { max-width: none; }
  .pp-home .h4-std__row { margin-left: -24px; padding-left: 40px; border-radius: 0; overflow: visible; }
  .pp-home .h4-hero__standard-title,
  .pp-home .h4-hero__standard-lead { padding-left: 56px; }
}

/* Why buy from Prime: soft blurred colour shapes behind frosted cards,
   each card edged in its icon colour (Amino "Why choose"). */
.pp-home .h4-why { position: relative; overflow: hidden; isolation: isolate; background: var(--pp-paper); }
.pp-home .h4-why::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background:
    radial-gradient(28% 34% at 12% 22%, rgba(107, 91, 210, .16), transparent 70%),
    radial-gradient(30% 36% at 86% 18%, rgba(65, 143, 222, .18), transparent 70%),
    radial-gradient(26% 32% at 78% 82%, rgba(15, 138, 132, .14), transparent 70%),
    radial-gradient(24% 30% at 22% 86%, rgba(194, 59, 110, .10), transparent 70%),
    radial-gradient(22% 26% at 50% 50%, rgba(183, 121, 31, .08), transparent 70%);
  filter: blur(40px);
}
.pp-home .h4-reason {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1.5px var(--h4-edge, var(--pp-line)), 0 10px 30px rgba(6, 20, 38, .04);
}
.pp-home .h4-reason:has(.h4-ico--lilac) { --h4-edge: rgba(107, 91, 210, .18); }
.pp-home .h4-reason:has(.h4-ico--blue) { --h4-edge: rgba(65, 143, 222, .2); }
.pp-home .h4-reason:has(.h4-ico--teal) { --h4-edge: rgba(15, 138, 132, .18); }
.pp-home .h4-reason:has(.h4-ico--amber) { --h4-edge: rgba(183, 121, 31, .2); }
.pp-home .h4-reason:has(.h4-ico--rose) { --h4-edge: rgba(194, 59, 110, .16); }
.pp-home .h4-reason:has(.h4-ico--slate) { --h4-edge: rgba(30, 58, 92, .14); }
.pp-home .h4-hero__lead { text-wrap: pretty; }
@media (min-width: 900px) { .pp-home .h4-hero__lead { max-width: 31em; } }

/* v5.3 (owner 2026-09-28): both hero rows share one height (the taller
   of the two contents decides), Amino type scale in the copy block. */
@media (min-width: 900px) {
  .pp-home .h4-hero { grid-template-rows: 1fr 1fr; min-height: 0; }
  .pp-home .h4-hero .h4-hero__title { font-size: clamp(44px, 4.45vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -.03em; }
  .pp-home .h4-hero__lead { margin-top: 24px; font: 400 20px/28px var(--sans); color: rgba(11, 26, 43, .8); }
  .pp-home .h4-hero__ctas .h4-btn { font-size: 16px; font-weight: 500; line-height: 24px; }
}

/* v5.4 (owner 2026-09-28): four tests, compact. Four cards in two
   columns around a smaller floating vial; about 40% shorter than the
   1200 x 640 callout stage it replaces on desktop. */
@media (min-width: 900px) {
  .pp-home .h4-proof { padding: 88px 0; }
  .pp-home .h4-proof__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 20px 48px;
    align-items: center;
    max-width: 1080px;
    height: auto;
    margin: 48px auto 0;
  }
  .pp-home .h4-proof__lines { display: none; }
  .pp-home .h4-proof__ring { width: 380px; height: 380px; }
  .pp-home .h4-proof__vial {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 2;
    grid-row: 1 / 3;
    width: 280px;
    transform: none;
    animation: h4-hero-bob 7s ease-in-out infinite;
  }
  .pp-home .h4-proof__list { display: contents; }
  .pp-home .h4-proof__c {
    position: relative;
    width: auto;
    padding: 22px 24px 24px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .88);
    box-shadow: inset 0 0 0 1px var(--pp-line), 0 4px 30px rgba(6, 20, 38, .05);
    text-align: left;
  }
  .pp-home .h4-proof__c--1 { grid-column: 1; grid-row: 1; top: auto; }
  .pp-home .h4-proof__c--2 { grid-column: 1; grid-row: 2; top: auto; }
  .pp-home .h4-proof__c--3 { grid-column: 3; grid-row: 1; top: auto; right: auto; }
  .pp-home .h4-proof__c--4 { grid-column: 3; grid-row: 2; top: auto; right: auto; }
  .pp-home .h4-proof__n {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pp-sky);
    font-size: 13px;
    letter-spacing: 0;
  }
  .pp-home .h4-proof__c--2 .h4-proof__n { background: #E9FCE6; color: #3F7F39; }
  .pp-home .h4-proof__c--3 .h4-proof__n { background: var(--pp-lilac); color: var(--pp-lilac-ink); }
  .pp-home .h4-proof__c--4 .h4-proof__n { background: #FEFECA; color: #7A5A1E; }
  .pp-home .h4-proof__c h3 { margin-top: 14px; font-size: 22px; }
  .pp-home .h4-proof__c b { font-size: 15px; }
  .pp-home .h4-proof__c p { font-size: 14.5px; }
  .pp-home .h4-proof__more { margin-top: 36px; }
}

/* Hero group shot: smaller so it no longer overpowers the headline. */
@media (min-width: 900px) {
  .pp-home .h4-hero .h4-hero__group-img { left: -6%; bottom: 2%; width: 84%; }
}
@media (min-width: 900px) {
  .pp-home .h4-proof__stage { align-items: stretch; }
  .pp-home .h4-proof__vial { align-self: center; }
  /* Sized by the hero's height so it keeps its size as the window narrows;
     margin centring avoids half-pixel transforms that blur the photo. */
  .pp-home .h4-hero .h4-hero__group-img { left: -18%; top: 0; bottom: 0; margin: auto 0; width: auto; height: 84%; max-width: 118%; object-fit: contain; object-position: left center; transform: none; }
}

/* Homepage rhythm (2026-09-28): one section spacing on desktop. */
@media (min-width: 900px) {
  .pp-home .h4-sec { padding-top: 96px; padding-bottom: 96px; }
}

/* ---------- 1. Hero v6 "Daylight" (2026-10-05, owner pick) ----------
   Copy left edge = the .h4-wrap edge of the sections below (1344 container,
   48px minimum), so the hero lines up with "Meet the lineup".
   Full-width photo (three vials on stone), copy on the calm wall to the
   left, then a Blank-style trust strip that scrolls on its own. New h6-*
   classes so the old h4-hero overrides in pp-mobile.css never apply.
   Keep this block at the end of the sheet. */
.pp-home .h6-hero { position: relative; background: var(--pp-porcelain, #F7F9FC); }
.pp-home .h6-hero__stage { position: relative; height: clamp(560px, 44vw, 1000px); overflow: hidden; background: #c9daf0; }
.pp-home .h6-hero__photo, .pp-home .h6-hero__photo img { display: block; width: 100%; height: 100%; }
.pp-home .h6-hero__photo img { max-width: none; object-fit: cover; object-position: 85% 30%; }
.pp-home .h6-hero__copy { position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; justify-content: center; gap: 26px; box-sizing: border-box; width: min(calc(max(48px, (100% - 1344px) / 2) + clamp(600px, 22vw + 300px, 860px)), 60%); padding: 0 0 0 max(48px, (100% - 1344px) / 2); }
.pp-home .h6-hero__title { margin: 0; font: 700 clamp(44px, 2.4vw + 32px, 88px)/1.03 var(--sans); letter-spacing: -.035em; color: var(--pp-navy); text-wrap: balance; }
.pp-home .h6-hero__lead { margin: 0; max-width: 44ch; font: 400 clamp(18px, 1.05vw, 24px)/1.6 var(--sans); color: #31445a; }
.pp-home .h6-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.pp-home .h6-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; border-radius: 999px; font: 600 16px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.pp-home .h6-btn svg { width: 18px; height: 18px; transition: transform .25s var(--h4-ease); }
.pp-home .h6-btn:hover svg { transform: translateX(3px); }
.pp-home .h6-btn:active { transform: translateY(1px); }
.pp-home .h6-btn:focus-visible { outline: 2px solid var(--pp-blue-deep); outline-offset: 3px; }
.pp-home .h6-btn--solid { background: var(--pp-navy); color: #fff; box-shadow: 0 14px 26px -16px rgba(11, 26, 43, .7); }
.pp-home .h6-btn--solid:hover { background: var(--pp-navy-3); color: #fff; }
.pp-home .h6-btn--outline { color: var(--pp-navy); background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1.5px rgba(11, 26, 43, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pp-home .h6-btn--outline:hover { color: var(--pp-navy); background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1.5px var(--pp-navy); }

.pp-home .h6-strip { overflow: hidden; background: #fff; border-top: 1px solid var(--pp-line); border-bottom: 1px solid var(--pp-line); }
.pp-home .h6-strip__track { display: flex; width: max-content; animation: h6-strip 42s linear infinite; }
.pp-home .h6-strip:hover .h6-strip__track { animation-play-state: paused; }
.pp-home .h6-strip__list { display: flex; align-items: center; gap: 44px; margin: 0; padding: 20px 22px; list-style: none; }
.pp-home .h6-strip__list li { display: flex; align-items: center; gap: 14px; margin: 0; white-space: nowrap; font: 600 17px/1 var(--sans); letter-spacing: -.005em; color: var(--pp-navy); }
.pp-home .h6-strip__list li + li::before { content: ""; width: 5px; height: 5px; margin-right: 30px; border-radius: 50%; background: var(--pp-pastel); }
.pp-home .h6-strip__dot { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--pp-sky); color: var(--pp-blue-deep); }
.pp-home .h6-strip__dot svg { width: 22px; height: 22px; }
@keyframes h6-strip { to { transform: translateX(-50%); } }

@media (max-width: 899px) {
  .pp-home .h6-hero__stage { height: auto; overflow: visible; background: none; }
  .pp-home .h6-hero__photo { height: auto; aspect-ratio: 800 / 840; overflow: hidden; }
  .pp-home .h6-hero__photo img { object-position: 50% 60%; }
  .pp-home .h6-hero__copy { position: static; width: auto; gap: 18px; padding: 28px 20px 28px; }
  .pp-home .h6-hero__title { font-size: clamp(32px, 9vw, 40px); line-height: 1.06; }
  .pp-home .h6-hero__lead { font-size: 16px; }
  .pp-home .h6-hero__ctas { flex-direction: column; gap: 10px; }
  .pp-home .h6-btn { width: 100%; min-height: 54px; }
  .pp-home .h6-btn--outline { background: #fff; }
  .pp-home .h6-strip__list { gap: 28px; padding: 14px 16px; }
  .pp-home .h6-strip__list li { gap: 10px; font-size: 15px; }
  .pp-home .h6-strip__list li + li::before { margin-right: 18px; }
  .pp-home .h6-strip__dot { width: 38px; height: 38px; }
  .pp-home .h6-strip__dot svg { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-home .h6-strip { overflow-x: auto; }
  .pp-home .h6-strip__track { animation: none; }
  .pp-home .h6-btn, .pp-home .h6-btn svg { transition: none; }
}

/* ---------- Homepage polish (2026-10-05, owner review) ---------- */
/* Four tests: title, lead and labs centred above the vial diagram. */
.pp-home .h4-proof__head { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; text-align: center; }
.pp-home .h4-proof__head .h4-h2 { max-width: 18em; }
.pp-home .h4-proof__head > div { display: flex; flex-direction: column; align-items: center; }
.pp-home .h4-proof__lead { max-width: 36em; }
.pp-home .h4-proof__labs { justify-content: center; }
/* Common questions: same title style as every other section; stays centred. */
.pp-home .faq-section .faq-left .elementor-heading-title { font-weight: 600; font-size: clamp(32px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -.025em; }
@media (max-width: 640px) {
  html body .pp-home .faq-left { text-align: center !important; }
}
/* Contrast: savings green that passes AA on white (owner-approved #16834f). */
.pp-home .pp-ls-card__new { background: #16834f; }
.pp-home .h4-receipt__save { color: var(--save, #137a49); }
/* Vial rain: tiles fade out as they pass behind the copy, so the text
   always sits on a clear patch while the rain keeps falling around it. */
@media (min-width: 900px) {
  .pp-home .h4-stack__tiles {
    -webkit-mask-image: radial-gradient(ellipse 30% 48% at 24% 52%, transparent 35%, var(--pp-navy) 100%), linear-gradient(to bottom, transparent 0, var(--pp-navy) 16%, var(--pp-navy) 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(ellipse 30% 48% at 24% 52%, transparent 35%, var(--pp-navy) 100%), linear-gradient(to bottom, transparent 0, var(--pp-navy) 16%, var(--pp-navy) 84%, transparent 100%);
    mask-composite: intersect;
  }
}

/* ---------- Homepage v6.1 (2026-10-05, owner: AG1 / Moon Juice refs) ---------- */
/* One wide edge for the hero copy and the lineup: about 5% of the screen,
   never less than the header's 48px (AG1 sits its copy ~4.7vw in). */
.pp-home { --h6-edge: max(48px, 4.7vw); }
@media (min-width: 900px) {
  .pp-home .h6-hero__stage { height: clamp(560px, 44vw, 720px); }
  .pp-home .h6-hero__copy { width: min(calc(var(--h6-edge) + 640px), 54%); padding-left: var(--h6-edge); }
  .pp-home .h6-hero__title { font-size: clamp(52px, 3vw + 24px, 96px); line-height: 1; }
  .pp-home .h6-hero__lead { max-width: 40ch; }
  /* Lineup: full width, heading on the same edge, wider cards. */
  .pp-home .h4-lineup .h4-wrap { width: auto; margin-inline: var(--h6-edge); }
  html body .pp-home .h4-row.products {
    padding-inline: var(--h6-edge);
    scroll-padding-inline: var(--h6-edge);
    grid-auto-columns: clamp(352px, calc((100vw - 2 * var(--h6-edge) - 60px) / 4.3), 480px);
  }
}

/* Ready-made stacks under Build a stack. */
.pp-home .h6-ready { position: relative; z-index: 2; margin-top: 88px; }
.pp-home .h6-ready__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.pp-home .h6-ready__title { margin: 0; font: 600 26px/1.15 var(--sans); letter-spacing: -.02em; color: var(--pp-navy); }
.pp-home .h6-ready__sub { margin: 0; font: 400 15px/1.5 var(--sans); color: var(--pp-slate); }
.pp-home .h6-ready__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pp-home .h6-rs { display: flex; flex-direction: column; padding: 20px; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(6, 20, 38, .04), 0 18px 40px -28px rgba(6, 20, 38, .35); }
.pp-home .h6-rs__vials { display: flex; justify-content: center; margin: 0 0 16px; padding: 18px 0 14px; border-radius: 16px; background: var(--pp-sky); }
.pp-home .h6-rs__vials span { width: 30%; max-width: 92px; aspect-ratio: 5 / 6; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 6px 14px -8px rgba(6, 20, 38, .35); }
.pp-home .h6-rs__vials span + span { margin-left: -8%; }
.pp-home .h6-rs__vials span:nth-child(2) { transform: translateY(-6px); z-index: 1; }
.pp-home .h6-rs__vials img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-home .h6-rs__name { margin: 0; font: 600 18px/1.3 var(--sans); letter-spacing: -.01em; color: var(--pp-navy); }
.pp-home .h6-rs__desc { margin: 4px 0 0; font: 400 13.5px/1.45 var(--sans); color: var(--pp-slate); }
.pp-home .h6-rs__list { margin: 12px 0 0; padding: 0; list-style: none; font: 500 14px/1.6 var(--sans); color: var(--pp-navy); }
.pp-home .h6-rs__list li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 9px 2px 0; border-radius: 50%; background: var(--pp-pastel); vertical-align: middle; }
.pp-home .h6-rs__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: auto 0 0; padding-top: 16px; font: 400 14px/1.3 var(--sans); }
.pp-home .h6-rs__price s { color: var(--pp-slate); }
.pp-home .h6-rs__price b { font: 700 20px/1.2 var(--sans); color: var(--pp-navy); letter-spacing: -.01em; }
.pp-home .h6-rs__price em { font-style: normal; font-weight: 600; color: var(--save, #137a49); }
.pp-home .h6-rs__add { margin-top: 14px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--pp-navy); color: #fff; font: 600 15px/1 var(--sans); cursor: pointer; transition: background-color .2s ease; }
.pp-home .h6-rs__add:hover { background: var(--pp-navy-3); }
.pp-home .h6-rs__add:focus-visible { outline: 2px solid var(--pp-blue-deep); outline-offset: 3px; }
.pp-home .h6-rs__add[disabled] { opacity: .6; cursor: default; }
.pp-home .h6-rs__add.is-done { background: #16834f; }
.pp-home .h6-rs__msg { margin: 8px 0 0; min-height: 0; font: 400 13px/1.4 var(--sans); color: #b42318; }
.pp-home .h6-rs__msg:empty { display: none; }
@media (max-width: 1180px) and (min-width: 900px) {
  .pp-home .h6-ready__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .pp-home .h6-ready { margin-top: 56px; width: auto; padding: 0; }
  .pp-home .h6-ready__head { padding: 0 20px; }
  .pp-home .h6-ready__title { font-size: 22px; }
  .pp-home .h6-ready__grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78vw; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 16px; scroll-padding-inline: 20px; scrollbar-width: none; }
  .pp-home .h6-ready__grid::-webkit-scrollbar { display: none; }
  .pp-home .h6-rs { scroll-snap-align: start; }
}

/* ---------- Homepage type scale (2026-10-05, owner: "hero too big") ----------
   One scale, Poppins only:
     display 44 to 64 (hero only)  ·  h2 32 to 40  ·  h3 20  ·  h4 18
     lead 17 to 19  ·  body 16  ·  small 14  ·  micro 12 (11 for caps labels)
   Odd half-steps (14.5, 13.5, 12.5, 11.5, 10) are folded into the scale. */
@media (min-width: 900px) {
  .pp-home .h6-hero__title { font-size: clamp(44px, 1.5vw + 30px, 64px); line-height: 1.04; letter-spacing: -.035em; }
  .pp-home .h6-hero__lead { font-size: clamp(17px, .3vw + 13px, 19px); }
}
.pp-home .h6-ready__title { font-size: 22px; }
.pp-home .h6-rs__desc { font-size: 14px; }
.pp-home .h4-proof__c h3 { font-size: 20px; }
.pp-home .h4-proof__c b { font-size: 15px; }
.pp-home .h4-proof__c p { font-size: 14px; }
.pp-home .pp-ls-card__new,
.pp-home .pp-ls-card__chips i { font-size: 12px; }
.pp-home .pp-ls-card__lot { font-size: 12px; }
.pp-home .pp-ls-card__lot small { font-size: 12px; }

/* ---------- Homepage layout system (2026-10-05, owner review vs AG1) ----------
   One page edge for every section: about 5% of the screen (48px minimum),
   and the content never grows past 1840px on very wide screens.
   Alignment rule: shopping rows and content blocks are left-aligned on that
   edge; statement sections (Four tests, Why buy, Common questions) centre
   their heading. Every section uses the same vertical rhythm. */
.pp-home { --h6-edge: max(48px, 4.7vw, calc((100vw - 1840px) / 2)); --h6-sec: clamp(72px, 5vw, 104px); }
@media (min-width: 900px) {
  .pp-home .h4-wrap,
  .pp-home .pp-ls__wrap { width: auto; max-width: none; margin-inline: var(--h6-edge); }
  .pp-home .h4-sec,
  .pp-home .faq-section { padding-top: var(--h6-sec); padding-bottom: var(--h6-sec); }
  .pp-home .pp-ls { padding-top: var(--h6-sec); padding-bottom: var(--h6-sec); }
  .pp-home .h4-lineup { padding-bottom: calc(var(--h6-sec) - 20px); }
  .pp-home .h6-ready { margin-top: var(--h6-sec); }
}
/* Bestsellers row on the homepage: shorter photos (about 20%), no stock pill. */
.pp-home .h4-row .ppc.ppc .ppc__media { aspect-ratio: 25 / 24; }
.pp-home .h4-row .ppc.ppc .ppc__stock { display: none; }
/* Lab reports row: same card width as the bestsellers row. */
@media (min-width: 900px) {
  .pp-home .pp-ls--carousel .pp-ls__row { grid-auto-columns: clamp(312px, calc((100vw - 2 * var(--h6-edge) - 60px) / 4.3), 480px); }
}

/* Full width: no content cap on very wide screens (owner 2026-10-05). */
.pp-home { --h6-edge: max(48px, 4.7vw); }

/* "Talk to our Bangkok team" band, closes the Why buy section. */
.pp-home .h6-team { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 40px; padding: 28px 32px; border-radius: 22px; background: var(--pp-navy); color: #fff; }
.pp-home .h6-team__title { margin: 0; font: 600 22px/1.25 var(--sans); letter-spacing: -.015em; color: #fff; }
.pp-home .h6-team__sub { margin: 6px 0 0; font: 400 15px/1.5 var(--sans); color: #c4d3e4; }
.pp-home .h6-team__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.pp-home .h6-team__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: #fff; color: var(--pp-navy); font: 600 15px/1 var(--sans); text-decoration: none; transition: background-color .2s ease; }
.pp-home .h6-team__btn:hover { background: var(--pp-sky); color: var(--pp-navy); }
.pp-home .h6-team__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pp-home .h6-team__btn svg { width: 20px; height: 20px; }
.pp-home .h6-team__btn--line svg { color: #06c755; }
.pp-home .h6-team__btn:not(.h6-team__btn--line) svg { color: #25d366; }
@media (max-width: 899px) {
  .pp-home .h6-team { margin-top: 28px; padding: 24px 20px; }
  .pp-home .h6-team__title { font-size: 20px; }
  .pp-home .h6-team__ctas, .pp-home .h6-team__btn { width: 100%; }
  .pp-home .h6-team__btn { justify-content: center; }
}

/* ---------- Four tests v6 (2026-10-05): release line ----------
   Five steps on one rail: the four tests, then "Batch released". */
.pp-home .h6-tests { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin: 56px 0 0; padding: 0; list-style: none; counter-reset: none; }
.pp-home .h6-tests::before { content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: linear-gradient(90deg, var(--pp-pastel) 0%, var(--pp-pastel) 78%, #9fd8b8 100%); }
.pp-home .h6-test { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 0 4px 0 0; }
.pp-home .h6-test__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--pp-blue-deep); box-shadow: 0 0 0 6px var(--pp-sky), 0 10px 24px -14px rgba(6, 20, 38, .45); }
.pp-home .h6-test__dot svg { width: 24px; height: 24px; }
.pp-home .h6-test--done .h6-test__dot { background: #16834f; color: #fff; box-shadow: 0 0 0 6px #e3f4ea, 0 10px 24px -14px rgba(22, 131, 79, .6); }
.pp-home .h6-test__n { margin-top: 22px; font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--pp-slate); }
.pp-home .h6-test__name { margin: 8px 0 0; font: 600 20px/1.2 var(--sans); letter-spacing: -.015em; color: var(--pp-navy); }
.pp-home .h6-test__method { display: block; margin-top: 6px; font: 500 15px/1.4 var(--sans); color: var(--pp-navy-3); }
.pp-home .h6-test--done .h6-test__method { color: #16834f; }
.pp-home .h6-test__what { margin: 6px 0 0; max-width: 26ch; font: 400 14px/1.5 var(--sans); color: var(--pp-slate); }
.pp-home .h4-proof .h4-proof__more { margin-top: 48px; text-align: center; }
@media (max-width: 1100px) and (min-width: 900px) {
  .pp-home .h6-test__name { font-size: 18px; }
}
@media (max-width: 899px) {
  .pp-home .h6-tests { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 36px; }
  .pp-home .h6-tests::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; background: linear-gradient(180deg, var(--pp-pastel) 0%, var(--pp-pastel) 78%, #9fd8b8 100%); }
  .pp-home .h6-test { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; padding: 0 0 28px; }
  .pp-home .h6-test:last-child { padding-bottom: 0; }
  .pp-home .h6-test__dot { grid-row: 1 / span 4; }
  .pp-home .h6-test__n { margin-top: 4px; }
  .pp-home .h6-test__what { max-width: none; }
}
/* Release line: rail segments run dot to dot, never past the last step. */
.pp-home .h6-tests::before { content: none; }
.pp-home .h6-test:not(:last-child)::after { content: ""; position: absolute; left: 56px; right: -20px; top: 27px; height: 2px; background: var(--pp-pastel); }
.pp-home .h6-test:nth-last-child(2)::after { background: linear-gradient(90deg, var(--pp-pastel), #9fd8b8); }
@media (max-width: 899px) {
  .pp-home .h6-test:not(:last-child)::after { left: 27px; right: auto; top: 56px; bottom: 0; width: 2px; height: auto; }
  .pp-home .h6-test:nth-last-child(2)::after { background: linear-gradient(180deg, var(--pp-pastel), #9fd8b8); }
}

/* Hero headline v6.2 (owner 2026-10-05): 700 weight, up to 72px / 0.94 line
   height, two-tone: navy first line, Prime blue second line. Vials sit
   higher, so more of the marble shows. */
@media (min-width: 900px) {
  .pp-home .h6-hero__title { font-size: clamp(48px, 1.6vw + 34px, 72px); line-height: .944; font-weight: 700; letter-spacing: -.04em; }
  .pp-home .h6-hero__photo img { object-position: 85% 50%; }
}
.pp-home .h6-hero__accent { color: var(--pp-blue-deep); }

/* Wide-screen balance (owner 2026-10-05): rows bleed full width, but the
   centred statement sections keep a readable 1280px content width, and the
   lab reports fill their row evenly. */
@media (min-width: 900px) {
  .pp-home .h4-proof .h4-wrap,
  .pp-home .h4-why .h4-wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--h6-edge); box-sizing: content-box; }
  .pp-home .h4-proof .h4-wrap,
  .pp-home .h4-why .h4-wrap { width: auto; }
}
@media (min-width: 1100px) {
  .pp-home .pp-ls--carousel .pp-ls__row { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
  .pp-home .h6-rs__vials span { max-width: 128px; }
}
/* Taller hero (owner 2026-10-05). */
@media (min-width: 900px) {
  .pp-home .h6-hero__stage { height: clamp(600px, 50vw, 860px); }
}

/* Bestseller cards about 23% shorter (owner 2026-10-05): slimmer columns,
   a 1.12:1 photo that still shows the whole vial, tighter body, and no tier
   bar or "Add 2 more" hint (the stacks section sells the discount). */
@media (min-width: 900px) {
  html body .pp-home .h4-row.products { grid-auto-columns: clamp(320px, calc((100vw - 2 * var(--h6-edge) - 80px) / 5.3), 420px); }
  .pp-home .h4-row .ppc.ppc .ppc__body { padding: 16px 18px 18px; }
}
.pp-home .h4-row .ppc.ppc .ppc__media { aspect-ratio: 1.12 / 1; }
.pp-home .h4-row .ppc.ppc .ppc__img img { object-position: 50% 40%; }
.pp-home .h4-row .ppc .ppc__ladder,
.pp-home .h4-row .ppc .ppc__hint { display: none; }
/* Bestseller photos: from 900px up the row loads a wider bake of each
   render (assets/images/cards-wide, same wall and stage extended to 1.12:1),
   so the whole vial shows with no crop and no CSS side fill. Phones keep the
   5:6 original. */
.pp-home .h4-row .ppc.ppc .ppc__img picture { display: block; width: 100%; height: 100%; }
@media (min-width: 900px) {
  .pp-home .h4-row .ppc.ppc .ppc__img img { object-fit: cover; object-position: 50% 50%; }
}
@media (max-width: 899px) {
  html body .pp-home .h4-row.products .ppc.ppc .ppc__media { aspect-ratio: 5 / 6 !important; }
}

/* ---------- Four tests v7 (owner 2026-10-05) ----------
   Two-tone headline left, labs right; four cards, each topped with a
   schematic of what that instrument reads out; one "all four must pass"
   bar with the reports button. Replaces the v6 release line. */
.pp-home .h7-proof { background: linear-gradient(180deg, #EEF4FC 0%, #E4EDF9 100%); }
.pp-home .h7-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 56px; align-items: end; }
.pp-home .h7-title { margin: 0; max-width: 13em; font: 700 clamp(34px, 2.2vw + 14px, 54px)/1.02 var(--sans); letter-spacing: -.035em; color: var(--pp-navy); text-wrap: balance; }
.pp-home .h7-title span { color: var(--pp-blue-deep); }
.pp-home .h7-lead { max-width: 34em; margin: 18px 0 0; font: 400 18px/1.55 var(--sans); color: var(--pp-navy-3); }
.pp-home .h7-labs { display: flex; flex-direction: column; gap: 12px; padding-bottom: 6px; }
.pp-home .h7-labs__k { font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pp-slate); }
.pp-home .h7-labs__row { display: flex; align-items: center; gap: 0; }
.pp-home .h7-labs__row a { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px; color: var(--pp-navy); text-decoration: none; }
.pp-home .h7-labs__row a:first-child { padding-left: 0; }
.pp-home .h7-labs__row a + a { border-left: 1px solid rgba(11, 26, 43, .16); }
.pp-home .h7-labs__row b { font: 600 15px/1.15 var(--sans); letter-spacing: -.01em; }
.pp-home .h7-labs__v { height: 36px; width: auto; mix-blend-mode: multiply; }
.pp-home .h7-labs__j { height: 28px; width: auto; }

.pp-home .h7-tests { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 48px 0 0; padding: 0; list-style: none; }
.pp-home .h7-test { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--canvas); box-shadow: 0 0 0 1px rgba(11, 26, 43, .06), 0 24px 48px -36px rgba(11, 26, 43, .35); transition: transform .3s var(--h4-ease), box-shadow .3s var(--h4-ease); }
@media (hover: hover) and (pointer: fine) {
  .pp-home .h7-test:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--pp-pastel), 0 32px 56px -34px rgba(11, 26, 43, .4); }
}
.pp-home .h7-test__viz { margin: 10px 10px 0; padding: 18px 14px 8px; border-radius: 16px; background: linear-gradient(180deg, #F3F8FE 0%, #E8F1FC 100%); }
.pp-home .h7-test__viz svg { display: block; width: 100%; height: 96px; overflow: visible; }
.pp-home .h7-test__viz .ax { stroke: rgba(11, 26, 43, .18); stroke-width: 1.5; fill: none; }
.pp-home .h7-test__viz .st { stroke: #9DBFE6; stroke-width: 4; stroke-linecap: round; }
.pp-home .h7-test__viz .pk { stroke: var(--pp-blue-deep); stroke-width: 5; stroke-linecap: round; }
.pp-home .h7-test__viz .dt { fill: var(--canvas); stroke: var(--pp-blue-deep); stroke-width: 2.5; }
.pp-home .h7-test__viz .dt--ok { stroke: #16834f; }
.pp-home .h7-test__viz .ln { fill: none; stroke: var(--pp-blue-deep); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pp-home .h7-test__viz .ar { fill: rgba(65, 143, 222, .18); }
.pp-home .h7-test__viz .tr { fill: rgba(11, 26, 43, .08); }
.pp-home .h7-test__viz .fl { fill: var(--pp-blue-deep); }
.pp-home .h7-test__viz .mk { stroke: var(--pp-navy); stroke-width: 2; stroke-dasharray: 3 3; }
.pp-home .h7-test__viz .lim { stroke: #c2410c; stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.pp-home .h7-test__viz text { font: 600 12px/1 var(--sans); fill: var(--pp-slate); letter-spacing: .02em; }
.pp-home .h7-test__body { padding: 20px 24px 26px; }
.pp-home .h7-test__name { margin: 0; font: 600 22px/1.2 var(--sans); letter-spacing: -.02em; color: var(--pp-navy); }
.pp-home .h7-test__name span { margin-right: 4px; color: var(--pp-blue-deep); font-variant-numeric: tabular-nums; }
.pp-home .h7-test__method { display: block; margin-top: 6px; font: 600 15px/1.35 var(--sans); color: var(--pp-blue-deep); }
.pp-home .h7-test__what { margin: 10px 0 0; font: 400 15px/1.5 var(--sans); color: var(--pp-slate); }

.pp-home .h7-pass { display: flex; align-items: center; gap: 18px; margin-top: 20px; padding: 16px 16px 16px 20px; border-radius: 24px; background: var(--canvas); box-shadow: 0 0 0 1.5px rgba(31, 102, 193, .35), 0 24px 48px -36px rgba(11, 26, 43, .35); }
.pp-home .h7-pass__ok { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #16834f; color: #fff; box-shadow: 0 0 0 6px #E3F4EA; }
.pp-home .h7-pass__ok svg { width: 24px; height: 24px; }
.pp-home .h7-pass__txt { flex: 1; margin: 0 0 0 4px; font: 400 15px/1.45 var(--sans); color: var(--pp-slate); }
.pp-home .h7-pass__txt b { display: block; font: 600 20px/1.25 var(--sans); letter-spacing: -.015em; color: var(--pp-navy); }
.pp-home .h7-pass__btn { flex: none; }

@media (max-width: 1100px) and (min-width: 900px) {
  .pp-home .h7-tests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .pp-home .h7-head { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pp-home .h7-title { font-size: 34px; }
  .pp-home .h7-lead { margin-top: 14px; font-size: 16px; }
  .pp-home .h7-labs__row a { height: 48px; padding: 0 16px; }
  .pp-home .h7-labs__v { height: 30px; }
  .pp-home .h7-labs__j { height: 24px; }
  .pp-home .h7-tests { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
  .pp-home .h7-test { border-radius: 20px; }
  .pp-home .h7-test__viz { margin: 8px 8px 0; padding: 12px 8px 4px; border-radius: 14px; }
  .pp-home .h7-test__viz svg { height: 64px; }
  .pp-home .h7-test__body { padding: 14px 14px 18px; }
  .pp-home .h7-test__name { font-size: 17px; }
  .pp-home .h7-test__method { font-size: 13px; }
  .pp-home .h7-test__what { margin-top: 6px; font-size: 13.5px; }
  .pp-home .h7-pass { flex-wrap: wrap; gap: 14px; margin-top: 12px; padding: 18px; border-radius: 20px; }
  .pp-home .h7-pass__txt { flex: 1 1 calc(100% - 70px); }
  .pp-home .h7-pass__txt b { font-size: 17px; }
  html body .pp-home .h7-pass__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-home .h7-test { transition: none; }
}

/* ---------- Bestseller card info v7 (owner 2026-10-05) ----------
   Name, research line, batch report link, taller size pills with a filled
   selected state, then the vial price large with the 10+ price in grey
   under it. Homepage row only; the Shop card is unchanged. */
html body .pp-home .h4-row .ppc.ppc .ppc__report { margin: 6px 0 0; font: 500 14px/20px var(--sans); }
html body .pp-home .h4-row .ppc.ppc .ppc__report a { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; color: var(--pp-blue-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html body .pp-home .h4-row .ppc.ppc .ppc__report a:hover { color: var(--pp-navy); }
html body .pp-home .h4-row .ppc.ppc .ppc__report svg { width: 14px; height: 14px; }
html body .pp-home .h4-row .ppc.ppc .ppc__report.is-empty { visibility: hidden; }
html body .pp-home .h4-row .ppc.ppc .ppc__sizes { gap: 8px; margin-top: 16px; }
html body .pp-home .h4-row .ppc.ppc button.ppc__size { min-height: 44px; border: 1.5px solid var(--pp-line); font: 500 15px/1 var(--sans); }
html body .pp-home .h4-row .ppc.ppc button.ppc__size.is-on { background: #E3EEFB; border-color: var(--pp-blue-deep); color: var(--pp-blue-deep); font-weight: 600; box-shadow: none; }
html body .pp-home .h4-row .ppc.ppc button.ppc__size:disabled { opacity: .55; }
html body .pp-home .h4-row .ppc.ppc .ppc__sizes.is-empty .ppc__size { min-height: 44px; }
html body .pp-home .h4-row .ppc.ppc .ppc__body .ppc__price { margin-top: 16px; font: 500 16px/1 var(--sans); }
html body .pp-home .h4-row .ppc.ppc .ppc__body .ppc__price strong { font: 700 28px/1 var(--sans); letter-spacing: -.025em; color: var(--pp-navy); }
html body .pp-home .h4-row .ppc.ppc .ppc__per { font: 400 16px/1 var(--sans); color: var(--pp-slate); }
html body .pp-home .h4-row .ppc.ppc .ppc__each { margin: 8px 0 0; font: 400 14px/20px var(--sans); color: var(--pp-slate); font-variant-numeric: tabular-nums; }
html body .pp-home .h4-row .ppc.ppc .ppc__each.is-empty { visibility: hidden; }
html body .pp-home .h4-row .ppc.ppc .ppc__actions { padding-top: 16px; }
@media (max-width: 899px) {
  html body .pp-home .h4-row .ppc.ppc .ppc__report { margin-top: 4px !important; font-size: 13.5px; }
  html body .pp-home .h4-row .ppc.ppc button.ppc__size { min-height: 44px; font-size: 14px; }
  html body .pp-home .h4-row .ppc.ppc .ppc__body .ppc__price { margin: 14px 0 0 !important; font-size: 15px !important; }
  html body .pp-home .h4-row .ppc.ppc .ppc__body .ppc__price strong { font-size: 24px; }
  html body .pp-home .h4-row .ppc.ppc .ppc__each { margin-top: 6px; font-size: 13.5px; }
}
html body .pp-home .h4-row .ppc.ppc .ppc__sizes:has(> :only-child) button.ppc__size { grid-column: 1 / -1; }

/* ---------- Discount section v7 (owner 2026-10-05) ----------
   Two-tone headline; the example basket is one card with its three vials
   on a shared shelf; curated cards use the same shelf, larger. */
.pp-home .h7-two span { color: var(--pp-blue-deep); }
.pp-home .h7-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; overflow: hidden; height: 168px; margin: 0; padding: 0; border-radius: 14px; background: #D9E7FA; }
.pp-home .h7-shelf span,
html body .pp-home .h6-rs__vials.h7-shelf span { width: auto; max-width: none; height: 100%; aspect-ratio: auto; margin: 0; overflow: hidden; border-radius: 0; background: none; box-shadow: none; transform: none; }
.pp-home .h7-shelf img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transform: scale(1.18); transform-origin: 50% 62%; }
.pp-home .h7-shelf--lg { height: 220px; border-radius: 16px; }
.pp-home .h7-receipt { width: min(100%, 480px); margin-top: 0; padding: 10px 10px 24px; border-radius: 24px; box-shadow: 0 0 0 1px rgba(11, 26, 43, .05), 0 30px 60px -28px rgba(6, 20, 38, .3); }
.pp-home .h7-receipt > :not(.h7-shelf) { margin-inline: 16px !important; }
.pp-home .h7-receipt .h4-receipt__head { margin-top: 20px !important; }
.pp-home .h7-receipt .h4-receipt__head b { font-size: 18px; }
.pp-home .h7-receipt li { font-size: 15px; }
.pp-home .h7-receipt .h4-receipt__total > span:last-child { flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; }
.pp-home .h7-receipt .h4-receipt__save { flex-basis: 100%; margin: 4px 0 0 !important; font-style: normal; color: var(--save, #137a49); }
html body .pp-home .h6-rs__vials.h7-shelf { height: 150px; margin: 0 0 18px; padding: 0; border-radius: 14px; }
@media (max-width: 899px) {
  html body .pp-home .h6-rs__vials.h7-shelf { height: 132px; }
}

/* ---------- Homepage type + layout alignment v8 (owner 2026-10-05) ----------
   One heading scale for every section: Poppins 700, 34 to 44px (30px on
   phones), two-tone where a title has two parts. Section intros 17px navy-3,
   meta lines 15px slate, sub-section titles 28px. */
html body .pp-home section .h4-h2,
html body .pp-home section .h7-title,
html body .pp-home .pp-ls:not(.pp-ls--pdp) .pp-ls__title,
html body .pp-home .faq-section .faq-left .elementor-heading-title { font-weight: 700 !important; font-size: clamp(34px, 1.1vw + 22px, 44px) !important; line-height: 1.06 !important; letter-spacing: -.03em !important; color: var(--pp-navy); }
html body .pp-home section .h7-title { max-width: 14em; }
html body .pp-home section .h4-stack__lead,
html body .pp-home section .h7-lead { max-width: 34em; font: 400 17px/1.6 var(--sans) !important; color: var(--pp-navy-3) !important; }
html body .pp-home .pp-ls:not(.pp-ls--pdp) .pp-ls__sub { font-size: 15px !important; color: var(--pp-slate); }
html body .pp-home .h6-team__title { font-weight: 700; font-size: 24px; letter-spacing: -.02em; }
@media (max-width: 899px) {
  html body .pp-home section .h4-h2,
  html body .pp-home section .h7-title,
  html body .pp-home .pp-ls:not(.pp-ls--pdp) .pp-ls__title,
  html body .pp-home .faq-section .faq-left .elementor-heading-title { font-size: 30px !important; line-height: 1.1 !important; }
  html body .pp-home section .h4-stack__lead,
  html body .pp-home section .h7-lead { font-size: 16px !important; }
  html body .pp-home .h6-team__title { font-size: 20px; }
}

/* Mix section: same 1280 content width as the other centred sections, so
   the example sits next to the copy; the fanned vials are back above it. */
@media (min-width: 900px) {
  .pp-home .h4-stack .h4-wrap.h4-stack__grid,
  .pp-home .h4-stack .h4-wrap.h6-ready { width: auto; max-width: 1280px; margin-inline: auto; padding-inline: var(--h6-edge); box-sizing: content-box; }
  .pp-home .h4-stack__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 72px; }
}
.pp-home .h7-receipt { width: min(100%, 420px); margin-top: -24px; padding: 22px 24px; border-radius: 22px; }
.pp-home .h7-receipt > :not(.h7-shelf) { margin-inline: 0 !important; }
.pp-home .h7-receipt .h4-receipt__head { margin-top: 0 !important; }

/* Curated selection v8 (owner ref): centred title, one photo of the three
   vials together, list, price, "Add selection". */
.pp-home .h6-ready { margin-top: 112px; }
.pp-home .h6-ready__head { display: block; margin-bottom: 32px; text-align: center; }
html body .pp-home .h6-ready__title { font: 700 28px/1.15 var(--sans); letter-spacing: -.025em; color: var(--pp-navy); }
.pp-home .h6-ready__sub { margin-top: 8px; font: 400 16px/1.5 var(--sans); color: var(--pp-slate); }
.pp-home .h6-ready__grid { gap: 16px; }
.pp-home .h6-rs { padding: 12px 12px 18px; border-radius: 20px; box-shadow: 0 0 0 1px rgba(11, 26, 43, .06), 0 18px 40px -30px rgba(6, 20, 38, .35); }
.pp-home .h6-rs__photo { overflow: hidden; margin: 0 0 16px; border-radius: 14px; aspect-ratio: 1.9 / 1; background: #D6E5F8; }
.pp-home .h6-rs__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--h4-ease); }
@media (hover: hover) and (pointer: fine) {
  .pp-home .h6-rs:hover .h6-rs__photo img { transform: scale(1.04); }
}
.pp-home .h6-rs > :not(.h6-rs__photo):not(.h6-rs__vials) { margin-inline: 8px; }
.pp-home .h6-rs__name { font: 700 18px/1.3 var(--sans); }
.pp-home .h6-rs__desc { font-size: 14px; }
.pp-home .h6-rs__list { margin-top: 14px; font-size: 14.5px; line-height: 1.75; }
.pp-home .h6-rs__list li::before { width: 6px; height: 6px; background: var(--pp-blue-deep); }
.pp-home .h6-rs__price { padding-top: 18px; }
.pp-home .h6-rs__price b { font-size: 22px; }
.pp-home .h6-rs__add { min-height: 48px; }
@media (max-width: 899px) {
  .pp-home .h6-ready { margin-top: 64px; }
  .pp-home .h6-ready__head { margin-bottom: 20px; }
  html body .pp-home .h6-ready__title { font-size: 24px; }
  .pp-home .h6-ready__sub { font-size: 15px; }
}
@media (min-width: 900px) {
  html body .pp-home section .h7-title { max-width: none; }
  .pp-home .h7-title span { display: block; }
}

/* Phone hero v8 (owner 2026-10-05, option A): centred copy on the blue wall
   of a taller photo (extra wall baked in), one button, the vials below with
   clear space under the button. */
@media (max-width: 899px) {
  html body .pp-home .h6-hero__stage { position: relative; height: auto; overflow: hidden; background: #7FA2D3; }
  html body .pp-home .h6-hero__photo { height: auto; aspect-ratio: 375 / 660; }
  html body .pp-home .h6-hero__photo img { height: 100%; object-fit: cover; object-position: 50% 100%; }
  html body .pp-home .h6-hero__copy { position: absolute; inset: 0 0 auto; width: auto; align-items: center; gap: 14px; padding: clamp(28px, 9vw, 44px) 22px 0; text-align: center; }
  html body .pp-home .h6-hero__title { font-size: clamp(34px, 10.2vw, 44px); line-height: 1; letter-spacing: -.04em; }
  html body .pp-home .h6-hero__accent { color: #fff; }
  html body .pp-home .h6-hero__lead { max-width: 30ch; font-size: 15px; line-height: 1.5; color: var(--pp-navy); }
  html body .pp-home .h6-hero__ctas { flex-direction: row; justify-content: center; margin-top: 4px; }
  html body .pp-home .h6-btn { width: auto; min-height: 52px; padding: 0 30px; }
  html body .pp-home .h6-btn--outline { display: none; }
}

/* ---- Proof v8 (owner 2026-10-05): the vial joins the four tests.
   Left: heading and the tests in a 2 × 2 grid. Right: the RT10-2609A vial
   with two numbered pins (QR, batch number) and a key. The lab logos
   move into the bar, next to the button they back up. ---- */
.pp-home .h8-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px 56px; align-items: center; }
.pp-home .h8-main { min-width: 0; }
.pp-home .h8-tests.h7-tests { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.pp-home .h8-vial { position: relative; display: grid; justify-items: center; gap: 0; margin: 0; }
.pp-home .h8-vial::before { content: ""; position: absolute; inset: 6% 0 24%; border-radius: 50%; background: radial-gradient(closest-side, rgba(65, 143, 222, .24), rgba(65, 143, 222, 0)); pointer-events: none; }
.pp-home .h8-vw { position: relative; width: min(420px, 100%); }
.pp-home .h8-vw img { display: block; width: 100%; height: auto; }
.pp-home .h8-pin { position: absolute; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--pp-navy); color: #fff; font: 700 13px/1 var(--sans); box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 8px 18px -6px rgba(11, 26, 43, .5); }
.pp-home .h8-pin--k { position: static; flex: none; margin: 0; box-shadow: none; }
.pp-home .h8-key { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: -18px; }
.pp-home .h8-key > div { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--canvas); box-shadow: 0 0 0 1px rgba(11, 26, 43, .05), 0 14px 30px -22px rgba(11, 26, 43, .45); }
.pp-home .h8-key p { margin: 0; }
.pp-home .h8-key small { display: block; margin-bottom: 3px; font: 600 12px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pp-slate); }
.pp-home .h8-key b { display: block; font: 600 14px/1.35 var(--sans); color: var(--pp-navy); }
.pp-home .h8-key code { font: 700 14px/1 var(--sans); color: var(--pp-blue-deep); background: none; padding: 0; }
.pp-home .h8-pass { grid-column: 1 / -1; margin-top: 8px; }
.pp-home .h8-labs { flex: none; display: flex; align-items: center; gap: 16px; padding: 0 20px; border-left: 1px solid rgba(11, 26, 43, .12); border-right: 1px solid rgba(11, 26, 43, .12); }
.pp-home .h8-labs__k { max-width: 4.5em; font: 600 12px/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pp-slate); }
.pp-home .h8-labs a { display: inline-flex; align-items: center; gap: 8px; color: var(--pp-navy); text-decoration: none; }
.pp-home .h8-labs b { font: 600 13px/1.15 var(--sans); }
.pp-home .h8-labs .h7-labs__v { height: 30px; width: auto; mix-blend-mode: multiply; }
.pp-home .h8-labs .h7-labs__j { height: 22px; width: auto; }
@media (max-width: 1199px) {
	.pp-home .h8-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px 40px; }
	.pp-home .h8-labs { border: 0; padding: 0; }
	.pp-home .h8-pass { flex-wrap: wrap; }
	.pp-home .h8-pass .h7-pass__txt { flex: 1 1 calc(100% - 70px); }
}
@media (max-width: 899px) {
	.pp-home .h8-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.pp-home .h8-vial { margin-top: 18px; }
	.pp-home .h8-vw { width: min(280px, 80%); }
	.pp-home .h8-key { grid-template-columns: minmax(0, 1fr); margin-top: -10px; }
	.pp-home .h8-tests.h7-tests { gap: 12px; margin-top: 24px; }
	.pp-home .h8-pass { margin-top: 12px; }
	.pp-home .h8-labs { width: 100%; justify-content: center; padding: 12px 0 0; border-top: 1px solid rgba(11, 26, 43, .1); }
}
/* Phones: the vial sits between the intro and the tests. */
@media (max-width: 899px) {
	.pp-home .h8-main { display: contents; }
	.pp-home .h8-grid > .h8-main > .h7-title { order: 1; }
	.pp-home .h8-grid > .h8-main > .h7-lead { order: 2; }
	.pp-home .h8-vial { order: 3; }
	.pp-home .h8-grid > .h8-main > .h8-tests { order: 4; }
	.pp-home .h8-pass { order: 5; }
}
@media (max-width: 899px) {
	.pp-home .h8-vw .h8-pin { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 12px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 6px 14px -6px rgba(11, 26, 43, .5); }
}
/* Help band buttons carry the real LINE and WhatsApp marks. */
html body .pp-home .h6-team__btn .pp-os-lg { width: 28px; height: 28px; flex: none; }
html body .pp-home .h6-team__btn .pp-os-lg svg { width: 19px; height: 19px; fill: #fff; color: #fff; }
html body .pp-home .h6-team__btn .pp-os-lg--wa svg { width: 16px; height: 16px; }
/* Pins lighter (owner 2026-10-05): white disc, blue number, thin blue ring. */
html body .pp-home .h8-pin { background: #fff; color: var(--pp-blue-deep); box-shadow: 0 0 0 1.5px rgba(31, 102, 193, .55), 0 6px 16px -6px rgba(11, 26, 43, .35); }
html body .pp-home .h8-pin--k { background: var(--pp-sky, #EAF2FC); box-shadow: none; }
@media (max-width: 899px) {
	html body .pp-home .h8-vw .h8-pin { box-shadow: 0 0 0 1.5px rgba(31, 102, 193, .55), 0 5px 12px -6px rgba(11, 26, 43, .35); }
}
/* Phone hero: copy sits a little lower on the wall (owner 2026-10-05). */
@media (max-width: 899px) {
  html body .pp-home .h6-hero__copy { padding-top: clamp(48px, 15vw, 68px); gap: 16px; }
  html body .pp-home .h6-hero__lead { margin-top: 2px; }
  html body .pp-home .h6-hero__ctas { margin-top: 8px; }
}
/* Proof vial v2 photo (2026-10-05): white studio background melts into the section. */
.pp-home .h8-vw img { mix-blend-mode: multiply; }
/* Phone hero: the wall behind the copy is a touch deeper, so the white
   "in the vial." passes 3:1 (was 2.62:1). Fades out before the vials. */
@media (max-width: 899px) {
  html body .pp-home .h6-hero__photo { position: relative; }
  html body .pp-home .h6-hero__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(40, 80, 150, .26) 0%, rgba(40, 80, 150, .22) 36%, rgba(40, 80, 150, 0) 58%); }
}

/* ---------- Bestsellers on phones v2 (owner 2026-10-07): smaller cards ----------
   Two thirds of the screen wide instead of 78vw, a square photo instead of
   5:6, and the Virtus-scale type of the new cart and menu, so a card and a
   half show and the row no longer fills the whole screen. Keep last. */
@media (max-width: 640px) {
  html body .pp-home .h4-row.products { grid-auto-columns: 66vw !important; gap: 12px !important; }
  html body .pp-home .h4-row.products .ppc.ppc { border-radius: 18px; }
  html body .pp-home .h4-row.products .ppc.ppc .ppc__media { aspect-ratio: 1 / 1 !important; }
  html body .pp-home .h4-row.products .ppc.ppc .ppc__body { padding: 12px 13px 14px !important; }
  html body .pp-home .h4-row.products .ppc.ppc .ppc__body .ppc__name { font-size: 16px !important; line-height: 22px !important; }
  html body .pp-home .h4-row.products .ppc.ppc .ppc__report { margin-top: 2px; font-size: 12.5px !important; line-height: 18px !important; }
  html body .pp-home .h4-row.products .ppc.ppc .ppc__report svg { width: 12px; height: 12px; }
  html body .pp-home .h4-row.products .ppc.ppc .ppc__sizes { gap: 6px !important; margin-top: 10px !important; }
  html body .pp-home .h4-row.products .ppc.ppc button.ppc__size { min-height: 32px !important; height: 32px !important; font-size: 13px !important; }
  html body .pp-home .h4-row.products .ppc.ppc .ppc__sizes.is-empty .ppc__size { min-height: 32px !important; }
  html body .pp-home .h4-row.products .ppc.ppc .ppc__price { margin-top: 8px !important; font-size: 16px !important; line-height: 22px !important; }
  html body .pp-home .h4-row.products .ppc.ppc .ppc__price * { font-size: inherit; }
  html body .pp-home .h4-row.products .ppc.ppc .ppc__price small,
  html body .pp-home .h4-row.products .ppc.ppc .ppc__each { font-size: 12.5px !important; line-height: 18px !important; }
  html body .pp-home .h4-row.products .ppc.ppc .ppc__btns { gap: 8px !important; padding-top: 10px !important; }
  html body .pp-home .h4-row.products .ppc.ppc .ppc__btn,
  html body .pp-home .h4-row.products .ppc.ppc .ppc__step { height: 40px !important; min-height: 40px !important; font-size: 14px !important; }
}