/* ==========================================================================
   PlasticTox — Conversion layer
   Loaded LAST, so it wins over the bundle. Everything here exists to shorten
   the distance between "landed" and "added to cart":
     1. Hero authority pill + hero trust row
     2. Research-authority row (hard facts, top of page)
     3. Quick-add on the plan cards
     4. Exposure-source tabs
     5. Reviews rail additions (base carousel styles live in the bundle)
     6. Sticky mobile buy bar
   Uses the warm tokens from plastictox-organic.css only — no new palette.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero authority pill + trust row
   -------------------------------------------------------------------------- */

.pt-authority-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 7px 15px 7px 11px;
  background: color-mix(in srgb, var(--pt-white) 72%, transparent);
  border: 1px solid var(--pt-line);
  border-radius: 999px;
}

/* ==========================================================================
   27. Launch-ready policy pages
   Compact, navigable, and readable for long-form legal content.
   ========================================================================== */

.pt-policy-page {
  color: #402b22;
  background: #f6f1e9;
}

.pt-policy-page .pt-policy-hero {
  padding-block: clamp(64px, 7vw, 94px);
  color: #fffaf3;
  background:
    radial-gradient(circle at 82% 12%, rgba(196, 155, 94, 0.2), transparent 30%),
    #402b22;
}

.pt-policy-page .pt-policy-hero .pt-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr);
  gap: 20px 60px;
  align-items: end;
}

.pt-policy-page .pt-policy-hero .pt-home-kicker {
  grid-column: 1 / -1;
  color: #d8b680;
}

.pt-policy-page .pt-policy-hero h1 {
  max-width: 12ch;
  margin: 0;
  color: #fffaf3;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: clamp(3.1rem, 5.2vw, 5.6rem);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.94;
}

.pt-policy-page .pt-policy-hero > .pt-shell > p:not(.pt-home-kicker) {
  max-width: 38ch;
  margin: 0;
  color: rgba(255, 250, 243, 0.7);
  font-size: 0.95rem;
  line-height: 1.65;
}

.pt-policy-hero__meta {
  display: flex;
  grid-column: 1 / -1;
  margin-top: 18px;
  padding-top: 18px;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255, 250, 243, 0.55);
  border-top: 1px solid rgba(255, 250, 243, 0.17);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pt-policy-page .pt-policy-body {
  padding-block: clamp(48px, 7vw, 96px);
  background:
    linear-gradient(rgba(64, 43, 34, 0.035) 1px, transparent 1px),
    #f6f1e9;
  background-size: 100% 76px;
}

.pt-policy-page .pt-policy-body__grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 920px);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
  justify-content: center;
}

.pt-policy-page .pt-policy-nav {
  position: sticky;
  top: calc(var(--pt-nav-total, 100px) + 28px);
  display: flex;
  padding-top: 3px;
  flex-direction: column;
  gap: 2px;
}

.pt-policy-page .pt-policy-nav > p {
  margin: 0 0 14px;
  color: #9a7147;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.pt-policy-page .pt-policy-nav a {
  display: flex;
  min-height: 42px;
  padding: 0 12px;
  align-items: center;
  color: #6b564a;
  border-radius: 8px;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.pt-policy-page .pt-policy-nav a:hover,
.pt-policy-page .pt-policy-nav a:focus-visible {
  color: #402b22;
  background: rgba(163, 120, 68, 0.1);
  transform: translateX(2px);
}

.pt-policy-page .pt-policy-nav a.is-active {
  color: #fffaf3;
  background: #402b22;
}

.pt-policy-nav__rule {
  height: 1px;
  margin: 13px 0;
  background: rgba(64, 43, 34, 0.16);
}

.pt-policy-page .pt-policy-content {
  overflow: hidden;
  width: 100%;
  max-width: 920px;
  padding: 0;
  background: #fffdf8;
  border: 1px solid rgba(64, 43, 34, 0.13);
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(64, 43, 34, 0.07);
  backdrop-filter: none;
}

.pt-policy-page .pt-policy-summary {
  padding: clamp(30px, 5vw, 58px);
  color: #fffaf3;
  background:
    radial-gradient(circle at 92% 10%, rgba(196, 155, 94, 0.2), transparent 32%),
    #402b22;
}

.pt-policy-page .pt-policy-label {
  margin: 0 0 18px;
  color: #cda875;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pt-policy-page .pt-policy-summary h2 {
  max-width: 16ch;
  margin: 0;
  color: #fffaf3;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
}

.pt-policy-page .pt-policy-summary ul {
  display: grid;
  margin: clamp(26px, 4vw, 42px) 0 0;
  padding: 0;
  gap: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 250, 243, 0.17);
}

.pt-policy-page .pt-policy-summary li {
  position: relative;
  margin: 0;
  padding: 14px 0 14px 24px;
  color: rgba(255, 250, 243, 0.74);
  border-bottom: 1px solid rgba(255, 250, 243, 0.17);
  font-size: 0.76rem;
  line-height: 1.55;
}

.pt-policy-page .pt-policy-summary li::before {
  position: absolute;
  top: 18px;
  left: 0;
  width: 6px;
  height: 6px;
  background: #cda875;
  border-radius: 50%;
  content: "";
}

.pt-policy-page .pt-policy-content > section {
  position: relative;
  padding: clamp(34px, 5vw, 58px);
  border-top: 1px solid rgba(64, 43, 34, 0.13);
  scroll-margin-top: calc(var(--pt-nav-total, 100px) + 24px);
}

.pt-policy-page .pt-policy-number {
  position: absolute;
  top: clamp(39px, 5vw, 63px);
  right: clamp(30px, 5vw, 58px);
  color: #a37844;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.pt-policy-page .pt-policy-content h2 {
  max-width: 22ch;
  margin: 0 48px 22px 0;
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.pt-policy-page .pt-policy-content h3 {
  margin: 28px 0 7px;
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.pt-policy-page .pt-policy-content :is(p, li) {
  color: #6b574c;
  font-size: 0.79rem;
  line-height: 1.78;
}

.pt-policy-page .pt-policy-content p {
  margin: 0 0 15px;
}

.pt-policy-page .pt-policy-content :is(ul, ol) {
  margin: 18px 0 0;
  padding-left: 20px;
}

.pt-policy-page .pt-policy-content li {
  margin-bottom: 9px;
  padding-left: 5px;
}

.pt-policy-page .pt-policy-content a {
  color: #805d3e;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(128, 93, 62, 0.35);
  text-underline-offset: 3px;
}

.pt-policy-page .pt-policy-content a:hover {
  color: #402b22;
  text-decoration-color: currentColor;
}

.pt-policy-callout {
  margin: 26px 0 4px;
  padding: 20px 22px;
  background: #f4ede2;
  border-left: 3px solid #a37844;
  border-radius: 0 10px 10px 0;
}

.pt-policy-callout strong {
  display: block;
  margin-bottom: 5px;
  color: #402b22;
  font-size: 0.71rem;
}

.pt-policy-callout p {
  margin: 0 !important;
}

.pt-policy-callout--strong {
  color: #fffaf3;
  background: #402b22;
  border-left-color: #cda875;
}

.pt-policy-callout--strong strong,
.pt-policy-callout--strong p {
  color: #fffaf3 !important;
}

.pt-policy-callout--strong p {
  opacity: 0.76;
}

.pt-policy-table {
  margin: 26px 0;
  border-top: 1px solid rgba(64, 43, 34, 0.16);
}

.pt-policy-table > div {
  display: grid;
  padding: 17px 0;
  grid-template-columns: minmax(130px, 0.35fr) minmax(0, 1fr);
  gap: 24px;
  border-bottom: 1px solid rgba(64, 43, 34, 0.16);
}

.pt-policy-table strong {
  color: #402b22;
  font-size: 0.71rem;
}

.pt-policy-table span {
  color: #6b574c;
  font-size: 0.74rem;
  line-height: 1.65;
}

.pt-policy-contact {
  padding: clamp(36px, 5vw, 58px);
  color: #fffaf3;
  background: #8a6040;
}

.pt-policy-page .pt-policy-contact h2 {
  max-width: 18ch;
  margin: 0 0 16px;
  color: #fffaf3;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.pt-policy-page .pt-policy-contact > p:last-child {
  max-width: 62ch;
  margin: 0;
  color: rgba(255, 250, 243, 0.76);
}

.pt-policy-page .pt-policy-contact a {
  color: #fffaf3;
  text-decoration-color: rgba(255, 250, 243, 0.45);
}

@media (max-width: 860px) {
  .pt-policy-page .pt-policy-hero .pt-shell {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .pt-policy-page .pt-policy-hero > .pt-shell > p:not(.pt-home-kicker) {
    margin-top: 2px;
  }

  .pt-policy-page .pt-policy-body__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pt-policy-page .pt-policy-nav {
    position: relative;
    top: auto;
    overflow-x: auto;
    display: flex;
    margin-inline: calc(var(--pt-page-pad, 20px) * -1);
    padding: 0 var(--pt-page-pad, 20px) 7px;
    flex-direction: row;
    gap: 7px;
    scrollbar-width: none;
  }

  .pt-policy-page .pt-policy-nav::-webkit-scrollbar,
  .pt-policy-page .pt-policy-nav > p,
  .pt-policy-nav__rule {
    display: none;
  }

  .pt-policy-page .pt-policy-nav a {
    min-height: 39px;
    padding-inline: 15px;
    flex: 0 0 auto;
    background: #fffdf8;
    border: 1px solid rgba(64, 43, 34, 0.13);
    border-radius: 999px;
    white-space: nowrap;
  }

  .pt-policy-page .pt-policy-nav a:hover {
    transform: none;
  }
}

@media (max-width: 620px) {
  .pt-policy-page .pt-policy-hero {
    padding-block: 44px 48px;
  }

  .pt-policy-page .pt-policy-hero h1 {
    font-size: clamp(2.85rem, 13vw, 3.75rem);
  }

  .pt-policy-hero__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .pt-policy-page .pt-policy-body {
    padding-block: 30px 54px;
  }

  .pt-policy-page .pt-policy-content {
    border-radius: 12px;
  }

  .pt-policy-page .pt-policy-summary,
  .pt-policy-page .pt-policy-content > section,
  .pt-policy-contact {
    padding: 28px 21px;
  }

  .pt-policy-page .pt-policy-number {
    top: 31px;
    right: 21px;
  }

  .pt-policy-page .pt-policy-content h2 {
    margin-right: 38px;
  }

  .pt-policy-page .pt-policy-content :is(p, li) {
    font-size: 0.77rem;
    line-height: 1.72;
  }

  .pt-policy-table > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

.pt-authority-pill__mark {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background: var(--pt-green);
  border-radius: 50%;
}

.pt-authority-pill__lines {
  position: relative;
  display: grid;
  min-width: 0;
}

.pt-authority-pill__lines b {
  grid-area: 1 / 1;
  color: var(--pt-ink);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.pt-authority-pill__lines b.is-active {
  opacity: 1;
}

/* No-JS / single-line safety: never leave the pill empty. */
.pt-authority-pill__lines b:only-child,
html:not(.pt-js) .pt-authority-pill__lines b:first-child {
  opacity: 1;
}

html:not(.pt-js) .pt-authority-pill__lines b:not(:first-child) {
  display: none;
}

/* NOTE: the base bundle renders the hero dark (--pt-navy), but plastictox-organic.css
   loads after it and lists .pt-home-hero under "Ink on the formerly-dark bands" —
   so the hero is actually CREAM with ink text. Everything below must be ink-on-light.
   Verified in the rendered pane, not inferred from the token values. */

/* The hook headline is shorter and blunter than the old category claim, so it
   does not need the old display size — this keeps hook, price and CTA together
   above the fold instead of pushing the CTA off-screen. */
.pt-home-hero h1 {
  max-width: 15ch;
  margin-bottom: 20px;
  font-size: clamp(2.7rem, 4.6vw, 4.3rem);
  line-height: 0.98;
}

/* Hero fine print: the observational/non-diagnostic qualifier, moved out of the
   lead paragraph so the hook reads clean — still directly under the CTA. */
.pt-home-hero__fineprint {
  max-width: 560px;
  margin: 12px 0 0;
  color: var(--pt-ink-soft);
  font-size: 0.68rem;
  line-height: 1.5;
}

.pt-home-hero__reassurance {
  margin: 14px 0 0;
  color: var(--pt-ink-soft);
  font-size: 0.7rem;
  letter-spacing: 0.01em;
}

.pt-hero-trust {
  display: grid;
  margin: 26px 0 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  border-top: 1px solid var(--pt-line);
}

.pt-hero-trust li {
  padding: 14px 16px 0 0;
}

.pt-hero-trust li + li {
  padding-left: 16px;
  border-left: 1px solid var(--pt-line);
}

.pt-hero-trust strong {
  display: block;
  color: var(--pt-ink);
  font-family: "Instrument Serif", serif;
  font-size: 1.32rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.pt-hero-trust span {
  display: block;
  margin-top: 4px;
  color: var(--pt-ink-soft);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   2. Research-authority row — the Redo "logo wall with a metric" pattern,
   carrying real published figures instead of invented ratings.
   -------------------------------------------------------------------------- */

.pt-authority {
  padding-block: clamp(30px, 4vw, 48px);
  background: var(--pt-white);
  border-bottom: 1px solid var(--pt-line);
}

.pt-authority__eyebrow {
  margin: 0 0 22px;
  color: var(--pt-ink-soft);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

/* auto-fit, NOT a fixed count. This row started with three citations; the
   bottled-water stat was removed as a duplicate of the exposure-sources Water
   tab, and the hardcoded `repeat(3, ...)` left the two survivors in columns 1-2
   with a dead third column — the border-top still ran the full width, so the
   right third read as a broken empty cell. auto-fit distributes whatever items
   are present and self-heals if a citation is ever added or removed again. */
.pt-authority__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  border-top: 1px solid var(--pt-line);
}

.pt-authority__item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 24px 26px 22px;
  border-left: 1px solid var(--pt-line);
  text-decoration: none;
  transition: background 0.22s ease;
}

.pt-authority__item:first-child {
  border-left: 0;
}

.pt-authority__item:hover,
.pt-authority__item:focus-visible {
  background: var(--pt-paper);
}

.pt-authority__item strong {
  color: var(--pt-ink);
  font-family: "Instrument Serif", serif;
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
}

.pt-authority__item em {
  color: var(--pt-green);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.pt-authority__item span {
  flex: 1;
  color: var(--pt-ink-soft);
  font-size: 0.79rem;
  line-height: 1.55;
}

.pt-authority__item b {
  color: var(--pt-ink);
  font-size: 0.68rem;
  font-weight: 700;
}

.pt-authority__note {
  max-width: 660px;
  margin: 22px auto 0;
  color: var(--pt-ink-soft);
  font-size: 0.68rem;
  line-height: 1.6;
  text-align: center;
}

/* --------------------------------------------------------------------------
   3. Quick-add on the plan cards
   The card is a div now (a button can't live inside an anchor), so restate
   the layout the bundle gave the old <a class="pt-buy-option">.
   -------------------------------------------------------------------------- */

.pt-buy-option {
  position: relative;
  display: flex;
  flex-direction: column;
}

.pt-buy-option__title h3 {
  margin: 0;
}

.pt-buy-option__title h3 a {
  color: inherit;
  text-decoration: none;
}

.pt-buy-option__title h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The card itself has padding:0 and insets its children with margin-inline:24px
   on a fixed list of direct children. This actions row is a newer child, so it
   must opt into that same inset or it renders edge-to-edge and gets clipped by
   the card's overflow:hidden. Stacked (not side-by-side) because the 3-up grid
   leaves ~235px of content width — not enough for a pill plus a link on one row. */
.pt-buy-option__actions {
  display: flex;
  margin-block: 20px 0;
  margin-inline: 24px;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.pt-quick-add {
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  color: var(--pt-white);
  background: var(--pt-green);
  border: 1px solid var(--pt-green);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.pt-quick-add:hover:not(:disabled) {
  background: var(--pt-green-dark);
  border-color: var(--pt-green-dark);
}

.pt-quick-add:disabled {
  cursor: default;
  opacity: 0.75;
}

.pt-buy-option__actions .pt-buy-option__link {
  display: inline-flex;
  align-self: center;
  gap: 6px;
  align-items: center;
  color: var(--pt-ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
}

.pt-buy-option__actions .pt-buy-option__link:hover {
  color: var(--pt-ink);
}

.pt-buy-option__actions .pt-buy-option__link b {
  transition: transform 0.18s ease;
}

.pt-buy-option__actions .pt-buy-option__link:hover b {
  transform: translateX(3px);
}

/* Featured card is brown-on-brown: the default green pill disappears against it,
   so invert to a cream pill with dark text. */
.pt-buy-option.is-featured .pt-quick-add {
  color: var(--pt-ink);
  background: var(--pt-paper);
  border-color: var(--pt-paper);
}

.pt-buy-option.is-featured .pt-quick-add:hover:not(:disabled) {
  color: var(--pt-ink);
  background: var(--pt-white);
  border-color: var(--pt-white);
}

/* --------------------------------------------------------------------------
   3b. "Open · Collect · Return" caption on the large buy image

   The bundle renders this as a full-width bar (left:16/right:16) with a solid
   brown backdrop + blur, which reads as a massive box across the photo. Strip
   the box: shrink to the text, sit it bottom-left, and rely on a text-shadow
   for legibility instead of a filled panel. Loaded after organic.css, which
   re-tints the same selector.
   -------------------------------------------------------------------------- */

.pt-buy__media span {
  right: auto;
  bottom: 18px;
  left: 20px;
  width: auto;
  padding: 0;
  color: #fff;
  background: none;
  border: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(32, 19, 13, 0.75), 0 1px 3px rgba(32, 19, 13, 0.9);
  backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   4. Exposure-source tabs
   -------------------------------------------------------------------------- */

.pt-sources {
  padding-block: clamp(48px, 6vw, 84px);
  background: var(--pt-paper);
}

.pt-sources__head {
  display: grid;
  margin-bottom: 30px;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.8fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: end;
}

.pt-sources__head > p {
  margin: 0;
  color: var(--pt-ink-soft);
  font-size: 0.86rem;
  line-height: 1.65;
}

.pt-sources__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.pt-sources__tab {
  padding: 11px 22px;
  color: var(--pt-ink);
  background: var(--pt-white);
  border: 1px solid var(--pt-line);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.pt-sources__tab:hover {
  border-color: var(--pt-green);
}

.pt-sources__tab.is-active {
  color: var(--pt-white);
  background: var(--pt-green);
  border-color: var(--pt-green);
}

.pt-sources__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 3vw, 38px);
  background: var(--pt-white);
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius-md);
}

.pt-sources__panel[hidden] {
  display: none;
}

.pt-sources__copy strong {
  display: block;
  color: var(--pt-ink);
  font-family: "Instrument Serif", serif;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
}

.pt-sources__stat {
  margin: 12px 0 0;
  color: var(--pt-ink-soft);
  font-size: 0.85rem;
  line-height: 1.6;
}

.pt-sources__try {
  margin: 18px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--pt-green);
  color: var(--pt-ink);
  font-size: 0.85rem;
  line-height: 1.6;
}

.pt-sources__try span {
  display: block;
  margin-bottom: 4px;
  color: var(--pt-green);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.pt-sources__panel img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: var(--pt-radius-md);
}

.pt-sources__note {
  max-width: 700px;
  margin: 22px auto 0;
  color: var(--pt-ink-soft);
  font-size: 0.68rem;
  line-height: 1.6;
  text-align: center;
}

/* --------------------------------------------------------------------------
   5. Reviews rail additions
   -------------------------------------------------------------------------- */

.pt-reviews__viewport:focus-visible {
  outline: 2px solid var(--pt-green);
  outline-offset: 4px;
}

.pt-reviews__card cite b {
  display: block;
}

/* --------------------------------------------------------------------------
   6. Sticky buy bar — mobile only, where the plan cards scroll far away.
   -------------------------------------------------------------------------- */

.pt-sticky-buy {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--pt-white) 94%, transparent);
  border-top: 1px solid var(--pt-line);
  box-shadow: 0 -10px 30px rgba(80, 54, 41, 0.12);
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.pt-sticky-buy.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pt-sticky-buy__inner {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 4px, 680px);
  margin: 0 auto;
}

.pt-sticky-buy__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.pt-sticky-buy__copy b {
  color: var(--pt-ink);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pt-sticky-buy__copy small {
  color: var(--pt-ink-soft);
  font-size: 0.64rem;
}

.pt-sticky-buy__add {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 12px 24px;
  color: var(--pt-white);
  background: var(--pt-green);
  border: 1px solid var(--pt-green);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.18s ease, opacity 0.18s ease;
}

.pt-sticky-buy__add:hover:not(:disabled) {
  background: var(--pt-green-dark);
}

.pt-sticky-buy__add:disabled {
  cursor: default;
  opacity: 0.75;
}

/* The SDK's floating cart button sits bottom-right, exactly where every sticky
   bottom bar puts its CTA — it was overlapping and clipping "Add to cart".
   Confirmed from the rendered DOM: <fluid-cart-widget id="pt-floating-cart"
   size="60" x-margin="20">, so it occupies the rightmost ~80px.
   Reserve that space in OUR bars rather than transforming the SDK's element:
   a custom element defaults to display:inline, where transform is ignored, so
   moving it is not reliable. This is deterministic and touches nothing of the
   SDK's. */
.pt-sticky-buy__inner,
.pt-pdp-sticky__inner,
.pt-kit-cta__inner {
  padding-right: 76px;
}

/* ...but ONLY above 780px. At ≤780px theme.liquid re-sets the widget to
   y-margin="88", which lifts it ABOVE every sticky bar, so there is nothing
   to dodge horizontally. Keeping the 76px reserve there parked "Get your kit"
   ~90px in from the right edge, which reads as centred. Pin the CTA hard to
   the right instead. */
@media (max-width: 780px) {
  /* Full-bleed the bar's inner track. Every sticky bar's inner also carries
     .pt-shell, which is `width: min(1180px, calc(100% - 40px)); margin-inline:
     auto` (28px gutters under 560px) — a CENTRED box. Combined with the 76px
     reserve above, "Get your kit" stopped ~90px short of the right edge, which
     reads as centred. Take the inner to the full bar width with its own small
     gutter so the CTA reaches the real right edge, and pin it there with
     margin-left:auto so it does not depend on space-between winning.
     Scoped to the bar (0,2,0) so it beats the bundle's own .pt-kit-cta__inner
     and .pt-shell rules rather than tying on specificity. */
  .pt-kit-cta .pt-kit-cta__inner,
  .pt-pdp-sticky .pt-pdp-sticky__inner,
  .pt-sticky-buy .pt-sticky-buy__inner {
    display: flex;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-right: 14px;
    padding-left: 14px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .pt-kit-cta .pt-kit-cta__button,
  .pt-pdp-sticky .pt-pdp-sticky__inner button,
  .pt-sticky-buy .pt-sticky-buy__add {
    margin-left: auto;
    margin-right: 0;
    flex: 0 0 auto;
  }

  /* The text block must be allowed to shrink, or a long subtitle pushes the
     CTA back inward instead of the CTA holding the right edge. */
  .pt-kit-cta .pt-kit-cta__inner > div,
  .pt-sticky-buy .pt-sticky-buy__copy {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
  }
}

@media (min-width: 781px) {
  .pt-sticky-buy {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1020px) {
  .pt-authority__grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .pt-authority__item {
    padding: 20px 18px;
  }
}

@media (max-width: 780px) {
  .pt-authority__grid {
    grid-template-columns: 1fr;
  }

  .pt-authority__item {
    padding: 20px 0;
    border-left: 0;
  }

  .pt-authority__item + .pt-authority__item {
    border-top: 1px solid var(--pt-line);
  }

  .pt-hero-trust li,
  .pt-hero-trust li + li {
    padding: 12px 10px 0 0;
  }

  .pt-hero-trust strong {
    font-size: 1.1rem;
  }

  .pt-sources__head,
  .pt-sources__panel {
    grid-template-columns: 1fr;
  }

  .pt-sources__panel img {
    height: 220px;
    grid-row: 1;
  }

  .pt-sources__tabs {
    gap: 6px;
  }

  .pt-sources__tab {
    padding: 10px 16px;
  }
}

@media (max-width: 520px) {
  .pt-hero-trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pt-hero-trust span {
    font-size: 0.6rem;
  }
}

/* ==========================================================================
   7. Homepage layout rhythm

   The signature layer sizes section headings up to 7–8rem behind 11–13ch
   max-widths, so a deliberate two-line <br> heading stacks into four very
   tall lines and every section opens with a wall of type. This retunes the
   heading scale, tightens the vertical rhythm, and binds the buy image into
   its own heading block.
   ========================================================================== */

/* -- Heading scale --------------------------------------------------------- */

.pt-home h2 {
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.pt-buy__intro h2,
.pt-home .pt-home-heading h2,
.pt-home .pt-launch-heading h2,
.pt-home .pt-proof-stories__head h2,
.pt-home .pt-sources__head h2,
.pt-home .pt-results h2,
.pt-home .pt-science h2,
.pt-home .pt-faq h2,
.pt-home .pt-final h2 {
  max-width: 24ch;
  font-size: clamp(2.3rem, 3.4vw, 3.6rem);
}

.pt-home .pt-impact-banner h2,
.pt-home .pt-community__copy h2 {
  max-width: 20ch;
  font-size: clamp(2.4rem, 3.8vw, 4rem);
  line-height: 0.98;
}

/* -- Vertical rhythm ------------------------------------------------------- */

.pt-home > section {
  padding-block: clamp(52px, 5.5vw, 88px);
}

.pt-home .pt-marquee {
  padding-block: 17px;
}

/* The banner is a background-image band; it needs presence, not 88svh. */
.pt-home .pt-impact-banner {
  min-height: 0;
  padding-block: clamp(76px, 8vw, 124px);
}

.pt-buy__intro,
.pt-home .pt-home-heading,
.pt-home .pt-launch-heading,
.pt-home .pt-proof-stories__head {
  padding-bottom: clamp(18px, 2.4vw, 30px);
  margin-bottom: clamp(22px, 3vw, 38px);
}

/* -- Buy section: heading copy + image as one row -------------------------- */

.pt-buy__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  border-bottom: 0;
}

.pt-buy__intro-copy {
  max-width: 46ch;
}

.pt-buy__intro-lead {
  margin: 18px 0 0;
  padding-left: 20px;
  color: var(--pt-ink-soft);
  border-left: 2px solid var(--pt-ink);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* Overrides the signature layer's min-height:560px / height:68svh slab. */
.pt-buy__intro .pt-buy__media {
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 0;
  max-height: 440px;
  aspect-ratio: 4 / 3;
}

.pt-buy__intro .pt-buy__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -- Tablet ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .pt-buy__intro {
    grid-template-columns: 1fr;
  }

  .pt-buy__intro-copy {
    max-width: none;
  }

  .pt-buy__intro .pt-buy__media {
    max-height: 320px;
    aspect-ratio: 16 / 10;
  }

  .pt-home .pt-buy__options {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pt-home .pt-buy-option {
    min-height: 0;
  }

  .pt-home .pt-buy-option > .pt-buy-option__visual {
    height: 220px;
    margin-bottom: 18px;
  }

  .pt-home .pt-process__grid {
    grid-template-columns: 1fr;
  }

  .pt-home .pt-launch-trust__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* -- Phone ----------------------------------------------------------------- */

@media (max-width: 560px) {
  .pt-home .pt-launch-trust__grid,
  .pt-home .pt-includes {
    grid-template-columns: 1fr;
  }

  .pt-buy__intro-lead {
    padding-left: 14px;
    font-size: 0.86rem;
  }

  .pt-home .pt-buy-option > .pt-buy-option__visual {
    height: 190px;
  }
}

/* ==========================================================================
   8. Cross-page consistency — Science / About / Shop

   These three pages carry the same defects the homepage had: the signature
   layer sizes their h1 up to 5.1–6.2rem behind 9–13ch max-widths (so short
   headlines stack into 3 lines of ~130px type), their section rhythm is set
   per-page, and every hero caption is a filled brown chip. This section
   applies the SAME scale, rhythm, and caption treatment the homepage now
   uses, so all four pages read as one design system.
   ========================================================================== */

/* -- Shared page roots ----------------------------------------------------- */

.pt-science-page,
.pt-about-page,
.pt-shop-page {
  --pt-page-rhythm: clamp(52px, 5.5vw, 88px);
}

/* -- Display type: these pages shipped with a SANS heading stack while the
   homepage uses Instrument Serif. Unify on the homepage's serif so all four
   pages share one voice. organic.css already italicises heading <em>. ------ */

.pt-science-page h1,
.pt-science-page h2,
.pt-about-page h1,
.pt-about-page h2,
.pt-shop-page h1,
.pt-shop-page h2 {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
}

/* -- Hero headlines: match the homepage h1 scale --------------------------- */

.pt-science-hero h1,
.pt-about-hero h1,
.pt-shop-hero h1 {
  max-width: 18ch;
  margin-bottom: 20px;
  font-size: clamp(2.7rem, 4.6vw, 4.3rem);
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: balance;
}

/* -- Section headings: match the homepage h2 scale ------------------------- */

.pt-science-heading h2,
.pt-science-evidence h2,
.pt-science-shop h2,
.pt-about-story h2,
.pt-about-heading h2,
.pt-about-promise h2,
.pt-shop-catalog__heading h2,
.pt-shop-page .pt-launch-heading h2,
.pt-shop-results h2,
.pt-shop-faq h2 {
  max-width: 24ch;
  font-size: clamp(2.3rem, 3.4vw, 3.6rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
}

/* -- Vertical rhythm: one value everywhere --------------------------------- */

.pt-science-page > section,
.pt-about-page > section,
.pt-shop-page > section {
  padding-block: var(--pt-page-rhythm);
}

.pt-science-page .pt-marquee,
.pt-about-page .pt-marquee,
.pt-shop-page .pt-marquee {
  padding-block: 17px;
}

/* Compact data strips stay compact. */
.pt-science-snapshot,
.pt-about-principles {
  padding-block: clamp(28px, 3vw, 40px);
}

.pt-science-heading,
.pt-about-heading,
.pt-shop-catalog__heading {
  margin-bottom: clamp(22px, 3vw, 38px);
}

/* -- Heroes: cap the reserved height like the homepage --------------------- */

/* Do NOT override grid-template-columns here. Verified in the rendered DOM:
   the homepage hero is itself stacked at this width, so forcing these three
   heroes to two columns would make them inconsistent with the page we are
   matching. They inherit the same responsive behaviour as home. */
.pt-science-hero__grid,
.pt-about-hero__grid,
.pt-shop-hero__grid {
  min-height: 0;
  align-items: center;
}

.pt-science-hero__grid > *,
.pt-about-hero__grid > *,
.pt-shop-hero__grid > * {
  min-width: 0;
}

.pt-science-hero__visual,
.pt-about-hero__visual,
.pt-shop-hero__visual {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: clamp(340px, 34vw, 460px);
  max-height: none;
  aspect-ratio: auto;
}

.pt-science-hero__visual > img,
.pt-science-hero__visual > video,
.pt-about-hero__visual > img,
.pt-shop-hero__visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -- Captions: strip the filled brown chip, matching the homepage ---------- */

/* Legibility scrim: these captions sit on light stone/kit photography, where a
   text-shadow alone is marginal. A bottom gradient keeps them readable without
   reintroducing the filled chip. */
.pt-buy__media::after,
.pt-science-hero__visual::after,
.pt-about-hero__visual::after,
.pt-shop-hero__visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(32, 19, 13, 0.62), rgba(32, 19, 13, 0));
  pointer-events: none;
}

.pt-buy__media > span,
.pt-science-hero__visual > span,
.pt-about-hero__visual > span,
.pt-shop-hero__visual > span {
  z-index: 1;
}

.pt-science-hero__visual > span,
.pt-about-hero__visual > span,
.pt-shop-hero__visual > span {
  right: auto;
  bottom: 18px;
  left: 20px;
  width: auto;
  padding: 0;
  color: #fff;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(32, 19, 13, 0.75), 0 1px 3px rgba(32, 19, 13, 0.9);
  backdrop-filter: none;
}

/* -- Shop hero trust row: identical to the homepage's ---------------------- */

.pt-shop-hero__trust {
  display: grid;
  margin: 26px 0 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  border-top: 1px solid var(--pt-line);
}

.pt-shop-hero__trust li {
  padding: 14px 16px 0 0;
}

.pt-shop-hero__trust li + li {
  padding-left: 16px;
  border-left: 1px solid var(--pt-line);
}

.pt-shop-hero__trust strong {
  display: block;
  color: var(--pt-ink);
  font-family: "Instrument Serif", serif;
  font-size: 1.32rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.pt-shop-hero__trust span {
  display: block;
  margin-top: 4px;
  color: var(--pt-ink-soft);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
}

/* -- Editorial rule under the intro paragraph, as on the homepage ---------- */

.pt-science-heading > p,
.pt-shop-catalog__heading > p {
  padding-left: 20px;
  border-left: 2px solid var(--pt-ink);
}

/* -- Effects: same reveal + depth motion the homepage uses ----------------- */

.pt-science-hero__visual > img,
.pt-science-hero__visual > video,
.pt-about-hero__visual > img,
.pt-shop-hero__visual > img,
.pt-science-evidence__visual img,
.pt-about-story__visual img,
.pt-about-promise img,
.pt-science-shop img {
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pt-science-hero__visual:hover > img,
.pt-science-hero__visual:hover > video,
.pt-about-hero__visual:hover > img,
.pt-shop-hero__visual:hover > img,
.pt-science-evidence__visual:hover img,
.pt-about-story__visual:hover img,
.pt-about-promise:hover img,
.pt-science-shop:hover img {
  transform: scale(1.035);
}

/* Card-style panels lift on hover, matching the shop cards. */
.pt-science-limits article,
.pt-about-values article,
.pt-science-method__steps li {
  transition: background 0.28s ease;
}

.pt-science-limits article:hover,
.pt-about-values article:hover,
.pt-science-method__steps li:hover {
  background: color-mix(in srgb, var(--pt-paper) 70%, transparent);
}

/* -- Tablet ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .pt-science-hero__grid,
  .pt-about-hero__grid,
  .pt-shop-hero__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .pt-science-hero__visual,
  .pt-about-hero__visual,
  .pt-shop-hero__visual {
    height: min(56vw, 330px);
  }

  .pt-science-heading,
  .pt-shop-catalog__heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pt-science-method__steps,
  .pt-science-limits__grid,
  .pt-about-values__grid {
    grid-template-columns: 1fr;
  }

  .pt-science-snapshot dl,
  .pt-about-principles dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -- Phone ----------------------------------------------------------------- */

@media (max-width: 560px) {
  .pt-science-hero__visual,
  .pt-about-hero__visual,
  .pt-shop-hero__visual {
    height: min(62vw, 270px);
  }

  .pt-shop-hero__trust li,
  .pt-shop-hero__trust li + li {
    padding: 12px 10px 0 0;
  }

  .pt-shop-hero__trust strong {
    font-size: 1.1rem;
  }

  .pt-shop-hero__trust span {
    font-size: 0.6rem;
  }

  .pt-science-snapshot dl,
  .pt-about-principles dl {
    grid-template-columns: 1fr;
  }

  .pt-science-heading > p,
  .pt-shop-catalog__heading > p {
    padding-left: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-science-hero__visual > img,
  .pt-science-hero__visual > video,
  .pt-about-hero__visual > img,
  .pt-shop-hero__visual > img,
  .pt-science-evidence__visual img,
  .pt-about-story__visual img,
  .pt-about-promise img,
  .pt-science-shop img {
    transition: none;
  }

  .pt-science-hero__visual:hover > img,
  .pt-science-hero__visual:hover > video,
  .pt-about-hero__visual:hover > img,
  .pt-shop-hero__visual:hover > img,
  .pt-science-evidence__visual:hover img,
  .pt-about-story__visual:hover img,
  .pt-about-promise:hover img,
  .pt-science-shop:hover img {
    transform: none;
  }
}

/* ==========================================================================
   9. Product detail page

   Same defects as the other pages, plus its own: the signature layer sets
   .pt-pdp-buy h1 to clamp(4.2rem, 6vw, 7rem), so a long product title becomes
   three lines of ~100px type before the price is even visible. This applies the
   same scale, rhythm, and motion the rest of the site now uses.
   ========================================================================== */

.pt-pdp {
  --pt-page-rhythm: clamp(52px, 5.5vw, 88px);
}

/* -- Display type ---------------------------------------------------------- */

.pt-pdp h1,
.pt-pdp h2 {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
}

.pt-pdp-buy h1 {
  max-width: 20ch;
  margin-bottom: 18px;
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

.pt-pdp-heading h2,
.pt-pdp-process h2,
.pt-pdp-dashboard h2,
.pt-pdp-faq h2,
.pt-pdp-close h2,
.pt-pdp .pt-proof-stories__head h2 {
  max-width: 24ch;
  font-size: clamp(2.3rem, 3.4vw, 3.6rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
}

/* -- Vertical rhythm ------------------------------------------------------- */

.pt-pdp > section {
  padding-block: var(--pt-page-rhythm);
}

.pt-pdp > .pt-marquee {
  padding-block: 17px;
}

.pt-pdp-heading,
.pt-pdp .pt-proof-stories__head {
  padding-bottom: clamp(18px, 2.4vw, 30px);
  margin-bottom: clamp(22px, 3vw, 38px);
}

/* -- Gallery: definite height, so switching thumbs cannot shift the page --- */

.pt-pdp-visual {
  position: relative;
  overflow: hidden;
  height: clamp(360px, 42vw, 560px);
}

.pt-pdp-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pt-pdp-visual:hover img {
  transform: scale(1.035);
}

/* -- Buy column ------------------------------------------------------------ */

.pt-pdp-price strong {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.pt-pdp-intro {
  max-width: 52ch;
  font-size: 0.95rem;
  line-height: 1.65;
}

/* Required FDA/observational disclosure. Every word stays visible and it keeps
   its position ABOVE the buy form — only the heavy filled slab is lightened to a
   ruled block, so it reads as authoritative fine print instead of a beige wall.
   Do not shrink the text further (the bundle already sets .68rem) and do not
   move it below the CTA without sign-off. */
.pt-pdp-disclosure {
  padding: 2px 0 2px 16px;
  background: none;
  border-left: 2px solid var(--pt-ink);
  line-height: 1.55;
}

.pt-pdp-add {
  width: 100%;
}

/* -- Effects to match the rest of the site --------------------------------- */

.pt-pdp-dashboard__media img,
.pt-pdp-included__grid article,
.pt-pdp-assurance__steps li {
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), background 0.28s ease;
}

.pt-pdp-dashboard__media:hover img {
  transform: scale(1.035);
}

.pt-pdp-included__grid article:hover,
.pt-pdp-assurance__steps li:hover {
  background: color-mix(in srgb, var(--pt-paper) 70%, transparent);
}

/* -- Tablet ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .pt-pdp-hero__grid,
  .pt-pdp-process__grid,
  .pt-pdp-dashboard__grid,
  .pt-pdp-faq__grid,
  .pt-pdp-close__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .pt-pdp-gallery {
    position: static;
  }

  .pt-pdp-visual {
    height: min(70vw, 460px);
  }

  .pt-pdp-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pt-pdp-included__grid,
  .pt-pdp-assurance__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -- Phone ----------------------------------------------------------------- */

@media (max-width: 560px) {
  .pt-pdp-visual {
    height: min(84vw, 380px);
  }

  .pt-pdp-included__grid,
  .pt-pdp-assurance__steps {
    grid-template-columns: 1fr;
  }

  .pt-pdp-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-pdp-visual img,
  .pt-pdp-dashboard__media img {
    transition: none;
  }

  .pt-pdp-visual:hover img,
  .pt-pdp-dashboard__media:hover img {
    transform: none;
  }
}

/* ==========================================================================
   10. Mobile overflow guards

   Reported: the product-image card runs off the right edge on mobile.
   Two causes found in the shipped CSS:

   1. .pt-pdp-gallery__thumbs is a horizontal scroller (overflow-x:auto) with
      five FIXED 76px thumbs (68px under 720px) plus 10px gaps. That is
      ~380px of track inside ~362px of shell at a 390px viewport, so the strip
      bleeds to the edge and the last thumb is sliced — and because .pt-pdp
      sets overflow:hidden, it reads as "cut off the right of the screen"
      rather than scrolling. Wrapped into a fluid grid so every thumb fits.

   2. Grid children had no min-width:0, so an intrinsically-wide child (image,
      long unbroken string) could push a track past the shell. .pt-pdp's
      overflow:hidden then clips it instead of revealing it.
   ========================================================================== */

/* Nothing in the gallery may exceed its column. */
.pt-pdp-gallery,
.pt-pdp-visual,
.pt-pdp-gallery__thumbs,
.pt-pdp-buy {
  max-width: 100%;
  min-width: 0;
}

.pt-pdp-hero__grid > *,
.pt-pdp-process__grid > *,
.pt-pdp-dashboard__grid > *,
.pt-pdp-close__grid > *,
.pt-shop-grid > *,
.pt-shop-card > * {
  min-width: 0;
}

.pt-pdp-visual > img,
.pt-shop-card__image img,
.pt-buy-option__visual img {
  max-width: 100%;
}

@media (max-width: 720px) {
  /* Wrap the thumbs instead of scrolling them off-screen. auto-fill keeps
     every thumbnail visible and square at any narrow width. */
  .pt-pdp-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    gap: 8px;
    padding: 2px 0 0;
    overflow-x: visible;
  }

  .pt-pdp-gallery__thumb {
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
  }

  /* Long product titles must break rather than widen the track. */
  .pt-pdp-buy h1 {
    overflow-wrap: break-word;
  }
}

/* Match the bundle's own ≤430px single-column trust list instead of fighting
   it with a 2-up grid from this layer. */
@media (max-width: 430px) {
  .pt-pdp-trust {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   19. Site-wide heading system
   One clean Manrope voice across every customer-facing route. This deliberate
   final override replaces the legacy serif aliases scattered through earlier
   theme layers without disturbing body copy or compact UI labels.
   ========================================================================== */

:root {
  --pt-heading: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pt-display: var(--pt-heading);
}

body main h1,
body main h2,
body main h3,
body .pt-mobile-menu__nav a {
  font-family: var(--pt-heading) !important;
  font-style: normal;
}

body main h1,
body main h2 {
  font-weight: 500 !important;
}

body main h3,
body .pt-mobile-menu__nav a {
  font-weight: 600 !important;
}

body main h1 em,
body main h2 em,
body main h3 em {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
}

/* ==========================================================================
   17. Editorial process section
   ========================================================================== */

.pt-home .pt-process {
  padding-block: clamp(80px, 9vw, 128px);
  color: #fffaf3;
  background:
    radial-gradient(circle at 82% 12%, rgba(163, 120, 68, 0.2), transparent 34%),
    #2b1d17;
}

.pt-home .pt-process__head {
  display: grid;
  max-width: none;
  margin-bottom: clamp(42px, 6vw, 72px);
  padding-bottom: clamp(28px, 4vw, 44px);
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.65fr);
  gap: clamp(36px, 7vw, 100px);
  align-items: end;
  border-bottom: 1px solid rgba(255, 250, 243, 0.16);
}

.pt-home .pt-process__head .pt-home-kicker {
  color: #d9bd96;
}

.pt-home .pt-process__head h2 {
  max-width: 12ch;
  margin: 0;
  color: #fffaf3;
  font-family: var(--pt-display);
  font-size: clamp(4rem, 6.2vw, 7rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.88;
}

.pt-home .pt-process__head h2 em {
  color: #d9bd96;
  font-family: var(--pt-display);
  font-style: italic;
  font-weight: 400;
}

.pt-home .pt-process__head > p {
  max-width: 480px;
  margin: 0 0 4px;
  color: rgba(255, 250, 243, 0.7);
  font-size: 0.98rem;
  line-height: 1.7;
}

.pt-home .pt-process__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  counter-reset: none;
}

.pt-home .pt-process__grid article,
.pt-home .pt-process__grid article:nth-child(2),
.pt-home .pt-process__grid article:hover,
.pt-home .pt-process__grid article:nth-child(2):hover {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 0;
  flex-direction: column;
  color: #402b22;
  background: #f6f1e9;
  border: 1px solid rgba(255, 250, 243, 0.12);
  border-radius: 16px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.16);
  transform: none;
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.pt-home .pt-process__grid article:hover,
.pt-home .pt-process__grid article:nth-child(2):hover {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  transform: translateY(-5px);
}

.pt-home .pt-process__grid article::after {
  display: none;
}

.pt-home .pt-process__grid article > :is(img, video) {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  transform: none;
  transition: transform 600ms ease;
}

.pt-home .pt-process__grid article:hover > :is(img, video) {
  transform: scale(1.018);
}

.pt-home .pt-process__grid article > div {
  display: flex;
  min-height: 260px;
  padding: 28px;
  flex: 1;
  flex-direction: column;
  color: #402b22;
  background: #f6f1e9;
}

.pt-home .pt-process__grid article > div > span {
  margin-bottom: 26px;
  color: #8b6542;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.pt-home .pt-process__grid article h3 {
  margin: 0 0 14px;
  color: #402b22;
  font-family: var(--pt-display);
  font-size: clamp(2rem, 2.6vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.96;
}

.pt-home .pt-process__grid article > div > p {
  margin: 0;
  color: #77675c;
  font-size: 0.8rem;
  line-height: 1.6;
}

.pt-home .pt-process-card__link {
  display: flex;
  margin-top: auto;
  padding-top: 20px;
  align-items: center;
  justify-content: space-between;
  color: #402b22;
  border-top: 1px solid rgba(64, 43, 34, 0.16);
  font-size: 0.7rem;
  font-weight: 700;
}

.pt-home .pt-process-card__link b {
  color: #8b6542;
  font-size: 1rem;
}

.pt-home .pt-process-card__link:hover {
  color: #8b6542;
}

@media (max-width: 900px) {
  .pt-home .pt-process__head {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pt-home .pt-process__head > p {
    max-width: 620px;
  }

  .pt-home .pt-process__grid {
    grid-template-columns: 1fr;
  }

  .pt-home .pt-process__grid article > :is(img, video) {
    aspect-ratio: 16 / 10;
  }

  .pt-home .pt-process__grid article > div {
    min-height: 230px;
  }
}

@media (max-width: 600px) {
  .pt-home .pt-process {
    padding-block: 64px;
  }

  .pt-home .pt-process__head h2 {
    font-size: clamp(3.4rem, 14.5vw, 4.8rem);
  }

  .pt-home .pt-process__grid article > :is(img, video) {
    aspect-ratio: 4 / 3;
  }

  .pt-home .pt-process__grid article > div {
    min-height: 220px;
    padding: 24px;
  }
}

/* ==========================================================================
   23. Premium footer close
   ========================================================================== */

.pt-footer {
  position: relative;
  padding: clamp(66px, 7vw, 96px) 0 30px;
  color: #fffaf3;
  background:
    radial-gradient(circle at 8% 0%, rgba(194, 145, 90, 0.13), transparent 30%),
    #201510;
  border-top: 1px solid rgba(255, 250, 243, 0.12);
}

.pt-footer::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(202, 165, 116, 0.42);
  content: "";
}

.pt-footer .pt-footer__top {
  display: grid;
  padding: 0 0 clamp(48px, 6vw, 72px);
  grid-template-columns: minmax(320px, 1.5fr) repeat(3, minmax(120px, 0.52fr));
  gap: clamp(36px, 6vw, 86px);
  align-items: start;
}

.pt-footer__brand-block {
  max-width: 470px;
}

.pt-footer .pt-footer__monogram {
  margin: 0 0 20px;
  color: #caa574;
  font-family: var(--pt-sans);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.pt-footer .pt-brand--footer {
  display: inline-flex;
  padding: 0;
  color: #fffaf3;
  font-family: var(--pt-heading);
  font-size: clamp(2.2rem, 3vw, 3.3rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
}

.pt-footer .pt-footer__promise {
  max-width: 46ch;
  margin: 22px 0 0;
  color: rgba(255, 250, 243, 0.64);
  font-size: 0.79rem;
  line-height: 1.7;
}

.pt-footer__shop-link {
  display: inline-flex;
  margin-top: 25px;
  padding-bottom: 5px;
  align-items: center;
  gap: 12px;
  color: #fffaf3;
  border-bottom: 1px solid rgba(255, 250, 243, 0.38);
  font-size: 0.67rem;
  font-weight: 700;
}

.pt-footer__shop-link span {
  color: #caa574;
  transition: transform 180ms ease;
}

.pt-footer__shop-link:hover span {
  transform: translateX(4px);
}

.pt-footer .pt-footer__label {
  margin: 4px 0 21px;
  color: #caa574;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.pt-footer .pt-footer__links {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
}

.pt-footer .pt-footer__links a {
  max-width: 100%;
  padding-bottom: 2px;
  color: rgba(255, 250, 243, 0.72);
  font-size: 0.74rem;
  line-height: 1.4;
  transition: color 180ms ease, transform 180ms ease;
}

.pt-footer .pt-footer__links a:hover {
  color: #fffaf3;
  transform: translateX(3px);
}

.pt-footer .pt-footer__links .pt-footer__email {
  color: #fffaf3;
  overflow-wrap: anywhere;
}

.pt-footer .pt-footer__bottom {
  display: grid;
  margin: 0;
  padding: 24px 0 0;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  color: rgba(255, 250, 243, 0.43);
  border-top: 1px solid rgba(255, 250, 243, 0.12);
  font-size: 0.57rem;
  line-height: 1.45;
}

.pt-footer .pt-footer__bottom p {
  margin: 0;
}

.pt-footer .pt-footer__bottom p:nth-child(2) {
  text-align: center;
}

.pt-footer .pt-footer__bottom a {
  color: rgba(255, 250, 243, 0.66);
}

.pt-footer .pt-footer__bottom a:hover {
  color: #fffaf3;
}

.pt-kit-cta {
  color: #fffaf3;
  background: rgba(32, 21, 16, 0.97);
  border-top: 1px solid rgba(255, 250, 243, 0.15);
  box-shadow: 0 -12px 35px rgba(18, 10, 7, 0.12);
  backdrop-filter: blur(16px);
}

.pt-kit-cta__inner small {
  color: rgba(255, 250, 243, 0.58);
}

.pt-kit-cta .pt-kit-cta__button {
  color: #201510;
  background: #fffaf3;
  border-color: #fffaf3;
}

.pt-kit-cta .pt-kit-cta__button:hover {
  color: #201510;
  background: #e5c89f;
  border-color: #e5c89f;
}

@media (max-width: 900px) {
  .pt-footer .pt-footer__top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 42px 28px;
  }

  .pt-footer__brand-block {
    max-width: 620px;
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .pt-footer {
    padding: 58px 0 calc(98px + env(safe-area-inset-bottom));
  }

  .pt-footer .pt-footer__top {
    padding-bottom: 38px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 24px;
  }

  .pt-footer__brand-block {
    grid-column: 1 / -1;
  }

  .pt-footer .pt-footer__links:last-child {
    grid-column: 1 / -1;
  }

  .pt-footer .pt-footer__bottom {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .pt-footer .pt-footer__bottom p:nth-child(2) {
    text-align: left;
  }
}

/* ==========================================================================
   18. Focused lower-funnel homepage
   Results -> concise science -> FAQ -> final purchase moment.
   ========================================================================== */

.pt-home .pt-results {
  padding-block: clamp(76px, 8vw, 122px);
  color: #402b22;
  background:
    radial-gradient(circle at 92% 8%, rgba(163, 120, 68, 0.13), transparent 30%),
    #f3ede4;
}

.pt-home .pt-results__grid {
  grid-template-columns: minmax(0, 0.78fr) minmax(480px, 1.22fr);
  gap: clamp(52px, 7vw, 108px);
}

.pt-home .pt-results h2 {
  max-width: 10ch;
  margin: 10px 0 22px;
  color: #402b22;
  font-family: var(--pt-display);
  font-size: clamp(3.45rem, 5.7vw, 6.15rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.pt-home .pt-results h2 em {
  display: inline-block;
  margin-top: 0.04em;
  color: #9a7147;
  font-weight: 400;
}

.pt-home .pt-results__copy > .pt-results__lead {
  max-width: 43ch;
  margin: 0;
  color: #6c5c52;
  font-size: 0.92rem;
  line-height: 1.7;
}

.pt-home .pt-results__copy dl {
  margin: 36px 0 0;
  border-top: 1px solid rgba(64, 43, 34, 0.18);
}

.pt-home .pt-results__copy dl div {
  display: grid;
  padding: 17px 0;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  justify-content: initial;
  border-top: 0;
  border-bottom: 1px solid rgba(64, 43, 34, 0.18);
}

.pt-home .pt-results__copy dt {
  padding-top: 3px;
  color: #a37844;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.pt-home .pt-results__copy dd {
  display: grid;
  gap: 4px;
  color: #402b22;
}

.pt-home .pt-results__copy dd strong {
  font-family: var(--pt-display);
  font-size: 1.28rem;
  font-weight: 400;
}

.pt-home .pt-results__copy dd span {
  color: #74655b;
  font-size: 0.72rem;
  line-height: 1.5;
}

.pt-home .pt-results__copy > .pt-results__note {
  margin: 19px 0 0;
  color: #8a776a;
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.pt-home .pt-results__visual {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-height: none;
  aspect-ratio: 4 / 3;
  padding: clamp(18px, 2.4vw, 34px);
  background: #dfd2c1;
  border: 1px solid rgba(64, 43, 34, 0.12);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(62, 42, 33, 0.13);
}

.pt-home .pt-results__visual img,
.pt-home .pt-results__visual:hover img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  transform: none;
}

.pt-home .pt-results__marker,
.pt-home .pt-results__marker--score {
  top: auto;
  right: clamp(28px, 4vw, 54px);
  bottom: clamp(28px, 4vw, 52px);
  min-width: 210px;
  padding: 14px 16px;
  gap: 3px;
  background: rgba(255, 252, 247, 0.94);
  border: 1px solid rgba(64, 43, 34, 0.12);
  border-left: 3px solid #a37844;
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(64, 43, 34, 0.14);
  animation: none;
  backdrop-filter: blur(10px);
}

.pt-home .pt-results__marker small {
  color: #927858;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.pt-home .pt-results__marker b {
  color: #402b22;
  font-family: var(--pt-display);
  font-size: 1.04rem;
  font-weight: 400;
}

.pt-home .pt-science {
  padding-block: clamp(72px, 7vw, 108px);
  color: #fffaf3;
  background:
    radial-gradient(circle at 5% 100%, rgba(180, 130, 79, 0.18), transparent 34%),
    #2b1d17;
}

.pt-home .pt-science__grid {
  grid-template-columns: minmax(380px, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(52px, 7vw, 104px);
}

.pt-home .pt-science__visual {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
}

.pt-home .pt-science__visual::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 250, 243, 0.17);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.pt-home .pt-science__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms ease;
}

.pt-home .pt-science__visual:hover img {
  transform: scale(1.02);
}

.pt-home .pt-science h2 {
  max-width: 12ch;
  margin: 10px 0 22px;
  color: #fffaf3;
  font-family: var(--pt-display);
  font-size: clamp(3.2rem, 5vw, 5.45rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.pt-home .pt-science h2 em {
  color: #d2ab77;
  font-weight: 400;
}

.pt-home .pt-science__copy > p:not(.pt-home-kicker):not(.pt-science__qualifier) {
  max-width: 50ch;
  color: rgba(255, 250, 243, 0.72);
  font-size: 0.9rem;
  line-height: 1.7;
}

.pt-home .pt-science__proof {
  display: grid;
  margin-top: 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid rgba(255, 250, 243, 0.17);
}

.pt-home .pt-science__proof span {
  display: grid;
  padding: 19px 22px 19px 0;
  gap: 5px;
  color: rgba(255, 250, 243, 0.55);
  font-size: 0.64rem;
  line-height: 1.4;
}

.pt-home .pt-science__proof span + span {
  padding-left: 22px;
  border-left: 1px solid rgba(255, 250, 243, 0.17);
}

.pt-home .pt-science__proof b {
  color: #fffaf3;
  font-family: var(--pt-display);
  font-size: 1.25rem;
  font-weight: 400;
}

.pt-home .pt-science__copy > .pt-science__qualifier {
  max-width: 64ch;
  margin: 18px 0 0;
  color: rgba(255, 250, 243, 0.48);
  font-size: 0.63rem;
  line-height: 1.55;
}

.pt-home .pt-science .pt-source-link {
  display: inline-flex;
  margin-top: 24px;
  padding-bottom: 5px;
  gap: 12px;
  color: #fffaf3;
  border-bottom: 1px solid rgba(255, 250, 243, 0.4);
  font-size: 0.69rem;
  font-weight: 700;
}

.pt-home .pt-faq {
  padding-block: clamp(78px, 8vw, 126px);
  color: #402b22;
  background: #faf7f1;
}

.pt-home .pt-faq__grid {
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(54px, 9vw, 144px);
}

.pt-home .pt-faq h2 {
  max-width: 9ch;
  margin: 10px 0 20px;
  color: #402b22;
  font-family: var(--pt-display);
  font-size: clamp(3.4rem, 5.4vw, 5.8rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.86;
}

.pt-home .pt-faq h2 em {
  color: #a37844;
  font-weight: 400;
}

.pt-home .pt-faq__intro > p:not(.pt-home-kicker) {
  max-width: 28ch;
  color: #75665c;
  font-size: 0.82rem;
}

.pt-home .pt-faq__intro > a {
  display: inline-flex;
  margin-top: 24px;
  padding-bottom: 5px;
  gap: 10px;
  color: #402b22;
  border-bottom: 1px solid rgba(64, 43, 34, 0.35);
  font-size: 0.68rem;
  font-weight: 700;
}

.pt-home .pt-faq__list {
  border-top: 1px solid rgba(64, 43, 34, 0.2);
}

.pt-home .pt-faq details {
  border-bottom: 1px solid rgba(64, 43, 34, 0.2);
}

.pt-home .pt-faq summary {
  display: grid;
  padding: 25px 48px 25px 0;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  color: #402b22;
  font-family: var(--pt-display);
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  font-weight: 400;
  line-height: 1.15;
}

.pt-home .pt-faq summary span {
  color: #a37844;
  font-family: var(--pt-sans);
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.pt-home .pt-faq summary::after {
  top: 20px;
  right: 2px;
  color: #a37844;
  font-family: var(--pt-sans);
  font-size: 1.35rem;
  font-weight: 300;
}

.pt-home .pt-faq details p {
  max-width: 650px;
  margin: 0;
  padding: 0 48px 25px 50px;
  color: #75665c;
  font-size: 0.79rem;
  line-height: 1.7;
}

.pt-home .pt-final {
  overflow: hidden;
  padding-block: clamp(64px, 7vw, 102px);
  color: #fffaf3;
  background:
    radial-gradient(circle at 18% 12%, rgba(185, 133, 78, 0.2), transparent 33%),
    #402b22;
}

.pt-home .pt-final__grid {
  grid-template-columns: minmax(0, 0.85fr) minmax(480px, 1.15fr);
  gap: clamp(50px, 7vw, 104px);
}

.pt-home .pt-final h2 {
  max-width: 9ch;
  margin: 10px 0 22px;
  color: #fffaf3;
  font-family: var(--pt-display);
  font-size: clamp(3.6rem, 6vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.86;
}

.pt-home .pt-final h2 em {
  color: #d5ae7a;
  font-weight: 400;
}

.pt-home .pt-final__offer {
  max-width: 42ch;
  color: rgba(255, 250, 243, 0.7);
  font-size: 0.88rem;
  line-height: 1.65;
}

.pt-home .pt-final__actions {
  display: flex;
  margin-top: 27px;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}

.pt-home .pt-final .pt-final__actions .pt-button {
  margin: 0;
}

.pt-home .pt-final__actions > a:not(.pt-button) {
  display: inline-flex;
  padding-bottom: 4px;
  gap: 8px;
  color: #fffaf3;
  border-bottom: 1px solid rgba(255, 250, 243, 0.35);
  font-size: 0.68rem;
  font-weight: 700;
}

.pt-home .pt-final__reassurance {
  margin: 17px 0 0;
  color: rgba(255, 250, 243, 0.5);
  font-size: 0.6rem;
}

.pt-home .pt-final__grid > img {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(255, 250, 243, 0.16);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(20, 12, 9, 0.25);
}

@media (max-width: 900px) {
  .pt-home .pt-results__grid,
  .pt-home .pt-science__grid,
  .pt-home .pt-faq__grid,
  .pt-home .pt-final__grid {
    grid-template-columns: 1fr;
  }

  .pt-home .pt-results__copy,
  .pt-home .pt-science__copy,
  .pt-home .pt-faq__intro,
  .pt-home .pt-final__copy {
    max-width: 610px;
  }

  .pt-home .pt-results__visual,
  .pt-home .pt-science__visual,
  .pt-home .pt-final__grid > img {
    max-height: none;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 600px) {
  .pt-home .pt-results,
  .pt-home .pt-science,
  .pt-home .pt-faq,
  .pt-home .pt-final {
    padding-block: 64px;
  }

  .pt-home .pt-results h2,
  .pt-home .pt-science h2,
  .pt-home .pt-faq h2,
  .pt-home .pt-final h2 {
    font-size: clamp(3.35rem, 14.5vw, 4.65rem);
  }

  .pt-home .pt-results__visual {
    padding: 10px;
    border-radius: 12px;
  }

  .pt-home .pt-results__marker,
  .pt-home .pt-results__marker--score {
    right: 20px;
    bottom: 20px;
    min-width: 0;
  }

  .pt-home .pt-science__proof {
    grid-template-columns: 1fr;
  }

  .pt-home .pt-science__proof span + span {
    padding-left: 0;
    border-top: 1px solid rgba(255, 250, 243, 0.17);
    border-left: 0;
  }

  .pt-home .pt-faq summary {
    padding-block: 21px;
    grid-template-columns: 30px minmax(0, 1fr);
    font-size: 1.2rem;
  }

  .pt-home .pt-faq details p {
    padding: 0 32px 22px 42px;
  }

  .pt-home .pt-final__actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ==========================================================================
   11. Control shapes — one pill everywhere

   Two problems this fixes:

   1. The PDP sticky bar's Add-to-cart had NO visible button. The bar is brown,
      and the button was painted background:var(--pt-ink) / --pt-gold — which
      the organic layer remaps to that SAME brown — so only the label showed.
      Inverted to a cream pill with a brown label, like the featured plan card.

   2. Quantity/variant fields were 10px rounded rectangles (and border-radius:0
      under 620px) sitting beside 999px pill buttons, so the buy row mixed two
      shapes. Everything interactive is now the same pill.
   ========================================================================== */

/* -- Sticky bars: a real cream button on the brown bar --------------------- */

/* Both bars are brown, and organic.css §7 paints their button
   background:var(--pt-ink) — the SAME brown — with a white label, so the
   button shape disappeared and only the text read. Invert to a cream pill,
   exactly like the featured plan card's button on its brown background.
   .pt-kit-cta__button is the ≤780px bar present on every page; the
   .pt-pdp-sticky one is the PDP's "Add to cart". */
.pt-pdp-sticky button,
.pt-kit-cta__button {
  min-height: 46px;
  padding-inline: 26px;
  color: var(--pt-ink);
  background: var(--pt-paper);
  border: 1px solid var(--pt-paper);
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.pt-pdp-sticky button:hover,
.pt-kit-cta__button:hover {
  color: var(--pt-ink);
  background: var(--pt-white);
  border-color: var(--pt-white);
  transform: translateY(-1px);
}

/* -- Fields match the buttons --------------------------------------------- */

.pt-field select,
.pt-pdp-form .pt-field select,
.pt-cart-item select,
.pt-cart-item__quantity select,
select[data-cart-quantity] {
  padding-inline: 18px 34px;
  border-radius: 999px;
}

.pt-field input,
.pt-pdp-form .pt-field input,
.pt-field--quantity input {
  padding-inline: 16px;
  border-radius: 999px;
  text-align: center;
}

/* Beats the bundle's border-radius:0 for these under 620px. */
.pt-pdp-add,
.pt-pdp-form .pt-pdp-add {
  border-radius: 999px;
}

.pt-field select:focus-visible,
.pt-field input:focus-visible,
.pt-cart-item select:focus-visible {
  outline: 2px solid var(--pt-ink);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .pt-pdp-form .pt-field input,
  .pt-pdp-form .pt-field select,
  .pt-pdp-add {
    border-radius: 999px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-pdp-sticky button {
    transition: none;
  }

  .pt-pdp-sticky button:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-authority-pill__lines b {
    transition: none;
  }

  .pt-sticky-buy {
    transition: none;
  }
}

/* ==========================================================================
   12. Cookie-consent banner vs. the sticky bottom bars

   The SDK's consent banner is a full-width bottom sheet pinned to the same edge
   as every sticky bar. On mobile it covers them completely, so a first-time
   visitor could neither see nor tap "Get your kit" / "Add to cart" until they
   answered it — the CTA was effectively dead on first visit.

   Stand the bars down while the banner is up, then let them return. Hiding beats
   lifting: the banner is ~40% of a phone screen tall, so pushing a second fixed
   bar above it would stack two competing calls to action over the content.
   plastictox.js sets body.pt-consent-open from the banner's MEASURED visibility.

   The banner is the SDK's, not ours — this touches only our own bars.
   ========================================================================== */

body.pt-consent-open .pt-kit-cta,
body.pt-consent-open .pt-pdp-sticky,
body.pt-consent-open .pt-sticky-buy {
  display: none;
}

/* ==========================================================================
   13. PDP buy row — quantity stepper + price in the button

   The buy row was a bare number box labelled "Quantity" sitting beside the add
   button: it read as a form field to fill in rather than a control to press.
   This is the −/+ pill pattern, with the price moved into the button so the
   amount is visible at the moment of the click.
   ========================================================================== */

/* The bundle sizes column one at minmax(96px,112px) for the old narrow field.
   The stepper is wider, so let it size to content. */
.pt-pdp-form__row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.pt-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--pt-white);
  border: 1px solid var(--pt-line);
  border-radius: 999px;
  transition: border-color 0.18s ease;
}

.pt-qty:focus-within {
  border-color: var(--pt-ink);
}

.pt-qty__btn {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  color: var(--pt-ink);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.18s ease, opacity 0.18s ease;
}

.pt-qty__btn:hover:not(:disabled) {
  background: var(--pt-cream);
}

.pt-qty__btn:disabled {
  cursor: default;
  opacity: 0.3;
}

.pt-qty__btn:focus-visible {
  outline: 2px solid var(--pt-ink);
  outline-offset: 2px;
}

.pt-qty__btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Stated at .pt-qty .pt-qty__input so neither the bundle's
   `.pt-pdp-form__row .pt-field input` rules nor §11's pill treatment can
   reach back in and re-add a border, min-height, or padding. */
.pt-qty .pt-qty__input {
  width: 42px;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: var(--pt-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.pt-qty .pt-qty__input:focus,
.pt-qty .pt-qty__input:focus-visible {
  outline: none;
}

/* Native spinners would sit right next to our own − / + buttons. */
.pt-qty__input::-webkit-outer-spin-button,
.pt-qty__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* .pt-button is display:inline-flex, so the whitespace between the label text
   and the price span is dropped as an anonymous flex item ("ADD TO CART—
   $189.00"). Space the two flex items explicitly. */
.pt-pdp-add {
  gap: 0.45em;
}

/* Separator lives in CSS so a screen reader reads "Add to cart $189.00"
   rather than an em dash. */
.pt-pdp-add__price::before {
  content: "— ";
}

@media (max-width: 620px) {
  /* The bundle stacks this row to a single column here — restate that, since
     the rule above loads later and would otherwise keep two columns. */
  .pt-pdp-form__row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .pt-qty {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   13. Numbered card rows — bottom-align the links

   Affects "What this test is and isn't" (home) and "The whole journey" (PDP).
   Both are 4-up numbered cards from the bundle:

     .pt-launch-trust__grid article { min-height: 285px; }
     .pt-launch-trust__grid h3      { margin: 52px 0 10px; }
     .pt-launch-trust__grid a       { margin-top: 12px; }

   The cards are a fixed height but the copy inside them is not, so each card's
   link sat 12px under its own last line of text. Measured on the live page at
   1440px the four links landed on four different baselines — 757 / 738 / 720 /
   738px — which reads as misalignment rather than as a row.

   Fix: make the card a flex column and let the paragraph absorb the slack, so
   every link is pinned to the same bottom edge. The 52px gap under the number
   is deliberate house style (the same pattern runs in .pt-plan-path__grid) and
   is kept — with the links aligned it now reads as intended instead of ragged.
   ========================================================================== */

.pt-launch-trust__grid article,
.pt-pdp-assurance__steps li {
  display: flex;
  flex-direction: column;
}

/* Absorbs the leftover height so the link below is pushed to the card floor. */
.pt-launch-trust__grid article > p,
.pt-pdp-assurance__steps li > p {
  flex: 1;
  margin-bottom: 0;
}

/* align-self keeps the underline hugging the label instead of stretching the
   full card width, which is what a bare flex child would do. */
.pt-launch-trust__grid article > a {
  margin-top: 18px;
  align-self: flex-start;
}

@media (max-width: 680px) {
  /* Cards go full-width and auto-height here, so there is no slack to absorb
     and a stretched paragraph would just add dead space above the link. */
  .pt-launch-trust__grid article > p,
  .pt-pdp-assurance__steps li > p {
    flex: 0 1 auto;
  }
}

/* ==========================================================================
   14. Immersive home hero

   One framed photograph, one category-defining promise, one primary action.
   The moving pill, duplicate stats, image badge, and repeated return language
   were removed so the first viewport reads like a premium health brand rather
   than a stack of conversion widgets.
   ========================================================================== */

/* navigation.css reserves only the header height even though the fixed nav
   also includes the announcement bar. Restore the full combined height here
   so page content can never slide underneath either fixed element. */
section[data-fluid-template-type="navbar"] {
  height: var(--pt-nav-total);
}

.pt-home .pt-home-hero {
  padding: 24px 0 28px;
  overflow: visible;
  background: var(--pt-paper);
}

.pt-home .pt-home-hero::before {
  display: none;
}

.pt-home .pt-home-hero__grid {
  position: relative;
  display: flex;
  width: min(1420px, calc(100% - 32px));
  min-height: clamp(560px, calc(100svh - var(--pt-nav-total) - 96px), 680px);
  padding: 0;
  align-items: center;
  overflow: hidden;
  background: #15100d;
  border-radius: 22px;
}

.pt-home .pt-home-hero__grid::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(18, 12, 9, 0.93) 0%, rgba(18, 12, 9, 0.78) 34%, rgba(18, 12, 9, 0.18) 66%, rgba(18, 12, 9, 0.04) 100%);
  content: "";
}

.pt-home .pt-home-hero__copy {
  position: relative;
  z-index: 2;
  width: min(58%, 700px);
  max-width: none;
  padding: clamp(48px, 7vw, 104px);
}

.pt-home .pt-home-hero__eyebrow {
  display: flex;
  margin: 0 0 22px;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--pt-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.pt-home .pt-home-hero__eyebrow::before {
  width: 20px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--pt-gold);
  content: "";
}

/* line-height was 0.88. At display sizes that is tighter than the font's own
   descender depth, so the "p" in "plastic." collided with the "N" of "Now" on
   the line below. 0.94 keeps the tight editorial look but clears descenders. */
.pt-home .pt-home-hero h1 {
  max-width: 11ch;
  margin: 0 0 26px;
  color: var(--pt-ivory);
  font-size: clamp(4.2rem, 6.2vw, 7rem);
  letter-spacing: -0.055em;
  line-height: 0.94;
}

/* The H1 is two SENTENCES (hook + resolution), not one wrapped phrase, so the
   accent line gets its own block and a real gap above it. The markup no longer
   carries a <br> before this <em> — the block does that job, and a <br> would
   add an uncontrolled empty line box on top of this margin. */
.pt-home .pt-home-hero h1 em {
  display: block;
  margin-top: 0.2em;
  color: #e5c89f;
  font-style: italic;
}

.pt-home .pt-home-hero__lead {
  max-width: 530px;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.58;
}

.pt-home .pt-home-hero .pt-actions {
  gap: 22px;
}

.pt-home .pt-home-hero .pt-button--ivory {
  min-height: 56px;
  padding-inline: 28px;
  color: #24150f;
  background: var(--pt-ivory);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
}

.pt-home .pt-home-hero .pt-home-link--light {
  color: rgba(255, 255, 255, 0.9);
}

.pt-home .pt-home-hero__reassurance {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.74);
}

.pt-home .pt-home-hero__fineprint {
  max-width: 520px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.52);
}

.pt-home .pt-home-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  background: #15100d;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
}

.pt-home .pt-home-hero__media .pt-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
  scale: 1;
  translate: 0;
}

@media (max-width: 780px) {
  .pt-home .pt-home-hero {
    padding: 16px 0 20px;
  }

  .pt-home .pt-home-hero__grid {
    width: calc(100% - 20px);
    min-height: 700px;
    align-items: flex-end;
    border-radius: 16px;
  }

  /* Leading stops (0.58 -> 0.30 -> 0.10 across the top 20%) are a top vignette,
     added so the eyebrow stays legible after it moved up into the bright
     window area — see the copy padding note below. Everything from 34% down is
     the original bottom ramp that makes the headline block readable. */
  .pt-home .pt-home-hero__grid::after {
    background: linear-gradient(180deg, rgba(18, 12, 9, 0.58) 0%, rgba(18, 12, 9, 0.3) 9%, rgba(18, 12, 9, 0.1) 20%, rgba(18, 12, 9, 0.28) 34%, rgba(18, 12, 9, 0.94) 63%, rgba(18, 12, 9, 0.99) 100%);
  }

  /* padding-top was 34px. The hero copy is taller than the grid's min-height, so
     with align-items:flex-end the block is effectively top-anchored and this
     padding — NOT any margin on the eyebrow — is what sets the eyebrow's
     position. It was landing the eyebrow across the model's hairline; 18px
     lifts it clear into the vignette above her. */
  .pt-home .pt-home-hero__copy {
    width: 100%;
    padding: 18px 24px 30px;
  }

  .pt-home .pt-home-hero__eyebrow {
    margin-bottom: 17px;
    font-size: 0.57rem;
  }

  .pt-home .pt-home-hero h1 {
    max-width: 10ch;
    margin-bottom: 20px;
    font-size: clamp(3.45rem, 15.5vw, 4.75rem);
    line-height: 0.95;
  }

  /* Slightly tighter sentence gap on phones — the hero has to clear the fold. */
  .pt-home .pt-home-hero h1 em {
    margin-top: 0.16em;
  }

  .pt-home .pt-home-hero__lead {
    margin-bottom: 22px;
    font-size: 0.94rem;
    line-height: 1.5;
  }

  .pt-home .pt-home-hero__media .pt-hero-video {
    object-position: 58% center;
  }
}

@media (max-width: 520px) {
  .pt-home .pt-home-hero .pt-actions {
    gap: 14px;
  }

  .pt-home .pt-home-hero .pt-button--ivory {
    width: 100%;
  }
}

/* ==========================================================================
   15. Editorial proof ribbon

   A quieter, more premium successor to the generic all-caps badge ticker.
   It moves continuously—even on hover—and uses only the six strongest facts.
   ========================================================================== */

/* The Science page runs the SAME banner under its hero (it replaced a four-cell
   "method at a glance" <dl>), so these rules are shared rather than duplicated.
   :is() keeps the specificity at (0,2,0) — identical to the old `.pt-home x` —
   so nothing downstream that used to beat or tie these rules changes weight.
   Note §8 sets `.pt-science-page .pt-marquee { padding-block: 17px }` at the same
   specificity; this block is later in the file, so 20px still wins. */
:is(.pt-home, .pt-sci2) .pt-marquee {
  position: relative;
  padding-block: 20px;
  overflow: hidden;
  color: #402b22;
  background: #e9decc;
  border-block: 1px solid rgba(64, 43, 34, 0.16);
}

:is(.pt-home, .pt-sci2) .pt-marquee::before,
:is(.pt-home, .pt-sci2) .pt-marquee::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: clamp(28px, 6vw, 92px);
  pointer-events: none;
  content: "";
}

:is(.pt-home, .pt-sci2) .pt-marquee::before {
  left: 0;
  background: linear-gradient(90deg, #e9decc 8%, rgba(233, 222, 204, 0));
}

:is(.pt-home, .pt-sci2) .pt-marquee::after {
  right: 0;
  background: linear-gradient(270deg, #e9decc 8%, rgba(233, 222, 204, 0));
}

:is(.pt-home, .pt-sci2) .pt-marquee__track {
  animation-duration: 48s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

:is(.pt-home, .pt-sci2) .pt-marquee:hover .pt-marquee__track {
  animation-play-state: running;
}

:is(.pt-home, .pt-sci2) .pt-marquee__item {
  gap: 28px;
  padding-inline: 28px;
  color: #402b22;
  font-family: var(--pt-display);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;
}

:is(.pt-home, .pt-sci2) .pt-marquee__item::after {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: #a37844;
  border-radius: 1px;
  transform: rotate(45deg);
}

@media (max-width: 600px) {
  :is(.pt-home, .pt-sci2) .pt-marquee {
    padding-block: 17px;
  }

  :is(.pt-home, .pt-sci2) .pt-marquee__item {
    gap: 22px;
    padding-inline: 22px;
    font-size: 1rem;
  }
}

/* ==========================================================================
   16. Premium plan selector

   One product photograph introduces the offer; compact comparison cards do
   the selling. Repeated card imagery and the dark featured-card color trap
   are intentionally removed.
   ========================================================================== */

.pt-home .pt-buy {
  padding-block: clamp(72px, 8vw, 112px);
  background: #f6f1e9;
}

.pt-home .pt-buy__intro {
  display: grid;
  margin-bottom: clamp(42px, 5vw, 64px);
  padding-bottom: 0;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(42px, 7vw, 96px);
  align-items: center;
  border-bottom: 0;
}

.pt-home .pt-buy__intro-copy {
  max-width: 700px;
}

.pt-home .pt-buy__intro h2 {
  max-width: 11ch;
  margin-bottom: 24px;
  color: var(--pt-ink-deep);
  font-family: var(--pt-display);
  font-size: clamp(4.2rem, 6.2vw, 7rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.88;
}

.pt-home .pt-buy__intro h2 em {
  color: #8b6542;
  font-family: var(--pt-display);
  font-style: italic;
  font-weight: 400;
}

.pt-home .pt-buy__intro-lead {
  max-width: 560px;
  margin: 0;
  padding: 0;
  color: var(--pt-ink-soft);
  border-left: 0;
  font-size: 1rem;
  line-height: 1.65;
}

.pt-home .pt-buy__intro .pt-buy__media {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 4 / 3;
  background: #e8dfd2;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 26px 70px rgba(64, 43, 34, 0.12);
}

.pt-home .pt-buy__intro .pt-buy__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  scale: 1;
  translate: 0;
}

.pt-home .pt-buy__options {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.pt-home .pt-buy-option,
.pt-home .pt-buy-option:hover {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 0;
  padding: 0 24px 24px;
  flex-direction: column;
  align-items: stretch;
  color: #402b22;
  background: #eee7dd;
  border: 1px solid rgba(64, 43, 34, 0.16);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(64, 43, 34, 0.05);
  transform: none;
}

.pt-home .pt-buy-option > .pt-buy-option__visual {
  display: flex;
  overflow: visible;
  width: calc(100% + 48px);
  height: auto;
  min-height: 0;
  margin: 0 -24px 24px;
  padding: 18px 16px;
  align-items: flex-start;
  justify-content: center;
  background: #eee7dd;
  border: 0;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
}

.pt-home .pt-buy-option.is-featured > .pt-buy-option__visual {
  background: #eee7dd;
}

.pt-home .pt-buy-option > .pt-buy-option__visual img {
  display: block;
  width: min(82%, 250px);
  height: auto !important;
  max-width: 250px;
  max-height: none;
  margin: 0 auto;
  object-fit: initial !important;
  object-position: initial;
  transform: none !important;
  transition: none;
}

.pt-home .pt-buy-option:hover > .pt-buy-option__visual img {
  transform: none !important;
}

.pt-home .pt-buy-option:hover {
  z-index: 1;
  border-color: rgba(122, 85, 55, 0.55);
  box-shadow: 0 24px 60px rgba(64, 43, 34, 0.12);
  transform: translateY(-5px);
}

.pt-home .pt-buy-option.is-featured,
.pt-home .pt-buy-option.is-featured:hover {
  color: #402b22;
  background: #eee7dd;
  border: 2px solid #a37844;
}

.pt-home .pt-buy-option.is-featured::before {
  display: none;
}

.pt-home .pt-buy-option > .pt-buy-option__label,
.pt-home .pt-buy-option > p,
.pt-home .pt-buy-option > small,
.pt-home .pt-buy-option > .pt-buy-option__title,
.pt-home .pt-buy-option > .pt-buy-option__actions {
  margin-inline: 0;
}

.pt-home .pt-buy-option > .pt-buy-option__label,
.pt-home .pt-buy-option.is-featured > .pt-buy-option__label {
  color: #8b6542;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pt-home .pt-buy-option__title {
  display: flex;
  margin-top: 18px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.pt-home .pt-buy-option__title h3,
.pt-home .pt-buy-option.is-featured .pt-buy-option__title h3,
.pt-home .pt-buy-option__title h3 a {
  margin: 0;
  color: #402b22;
  font-family: var(--pt-display);
  font-size: clamp(1.8rem, 2.5vw, 2.35rem);
  font-weight: 400;
  line-height: 0.95;
}

.pt-home .pt-buy-option__title h3 a:hover {
  color: #6f4d35;
  text-decoration: none;
}

.pt-home .pt-buy-option__title strong,
.pt-home .pt-buy-option.is-featured .pt-buy-option__title strong {
  color: #402b22;
  font-family: var(--pt-display);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.pt-home .pt-buy-option > p,
.pt-home .pt-buy-option.is-featured > p {
  min-height: 34px;
  margin-top: 9px;
  color: #77675c;
  font-size: 0.82rem;
  line-height: 1.5;
}

.pt-home .pt-buy-option > small,
.pt-home .pt-buy-option.is-featured > small {
  display: flex;
  margin-top: 18px;
  padding-top: 14px;
  justify-content: space-between;
  gap: 12px;
  color: #655044;
  border-top: 1px solid rgba(64, 43, 34, 0.16);
  font-size: 0.7rem;
  opacity: 1;
}

.pt-home .pt-buy-option > small b,
.pt-home .pt-buy-option.is-featured > small b {
  color: #402b22;
}

.pt-home .pt-buy-option__actions {
  display: flex;
  margin-block: 18px 0;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.pt-home .pt-buy-option .pt-quick-add,
.pt-home .pt-buy-option.is-featured .pt-quick-add {
  width: 100%;
  min-height: 48px;
  color: #fffdf9;
  background: #402b22;
  border-color: #402b22;
}

.pt-home .pt-buy-option .pt-quick-add:hover:not(:disabled),
.pt-home .pt-buy-option.is-featured .pt-quick-add:hover:not(:disabled) {
  color: #fffdf9;
  background: #6f4d35;
  border-color: #6f4d35;
}

.pt-home .pt-buy-option__actions .pt-buy-option__link,
.pt-home .pt-buy-option.is-featured .pt-buy-option__actions .pt-buy-option__link {
  display: inline-flex;
  align-self: center;
  gap: 7px;
  align-items: center;
  color: #655044;
  font-size: 0.72rem;
  font-weight: 700;
}

.pt-home .pt-buy-option__actions .pt-buy-option__link:hover,
.pt-home .pt-buy-option.is-featured .pt-buy-option__actions .pt-buy-option__link:hover {
  color: #402b22;
}

.pt-home .pt-includes-wrap {
  display: grid;
  margin-top: 20px;
  padding: 26px 28px;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  color: #fffaf3;
  background: #402b22;
  border: 0;
  border-radius: 14px;
}

.pt-home .pt-includes-wrap > p {
  margin: 0;
  padding: 0;
  color: #d9bd96;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pt-home .pt-includes {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
}

.pt-home .pt-includes li,
.pt-home .pt-includes li:first-child {
  min-width: 0;
  padding: 2px 16px;
  border-left: 1px solid rgba(255, 250, 243, 0.16);
}

.pt-home .pt-includes span {
  display: block;
  margin-bottom: 7px;
  color: #d9bd96;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.pt-home .pt-includes strong {
  display: block;
  color: #fffaf3;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .pt-home .pt-buy__intro {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .pt-home .pt-buy__intro h2 {
    max-width: 12ch;
  }

  /* Stacked layout: lead with the product photo, then the copy. The DOM order
     is copy-then-media (correct for the two-column desktop row, where the copy
     is the left column), so the image is moved with `order` rather than by
     rearranging the markup — that keeps desktop and the reading order intact. */
  .pt-home .pt-buy__intro .pt-buy__media {
    order: -1;
    aspect-ratio: 16 / 10;
  }

  .pt-home .pt-buy__options {
    grid-template-columns: 1fr;
  }

  .pt-home .pt-buy-option,
  .pt-home .pt-buy-option:hover {
    min-height: 0;
    padding: 0 28px 28px;
  }

  .pt-home .pt-buy-option > .pt-buy-option__visual {
    width: calc(100% + 56px);
    height: auto;
    margin-inline: -28px;
  }

  .pt-home .pt-includes-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .pt-home .pt-buy {
    padding-block: 64px;
  }

  .pt-home .pt-buy__intro h2 {
    font-size: clamp(3.45rem, 15vw, 4.8rem);
  }

  .pt-home .pt-buy-option,
  .pt-home .pt-buy-option:hover {
    padding: 0 24px 24px;
  }

  .pt-home .pt-buy-option > .pt-buy-option__visual {
    width: calc(100% + 48px);
    height: auto;
    margin: 0 -24px 22px;
    padding: 14px;
  }

  .pt-home .pt-buy-option > .pt-buy-option__visual img {
    width: min(78%, 235px);
    max-width: 235px;
  }

  .pt-home .pt-buy-option__title {
    margin-top: 20px;
  }

  .pt-home .pt-includes {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .pt-home .pt-includes li,
  .pt-home .pt-includes li:first-child {
    padding: 14px 12px;
    border-top: 1px solid rgba(255, 250, 243, 0.13);
    border-left: 0;
  }
}

@media (max-width: 430px) {
  .pt-home .pt-buy-option__title {
    flex-direction: column;
    gap: 10px;
  }

  .pt-home .pt-includes {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   20. Restored exposure story + guaranteed CTA contrast
   ========================================================================== */

.pt-home .pt-sources {
  padding-block: clamp(72px, 7vw, 108px);
  color: #402b22;
  background: #faf7f1;
}

.pt-home .pt-sources__head {
  margin-bottom: 34px;
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.7fr);
  gap: clamp(42px, 8vw, 124px);
}

.pt-home .pt-sources__head h2 {
  max-width: 12ch;
  margin: 10px 0 0;
  color: #402b22;
  font-size: clamp(3.2rem, 5vw, 5.35rem);
  letter-spacing: -0.05em;
  line-height: 0.94;
}

.pt-home .pt-sources__head h2 em {
  display: inline-block;
  margin-top: 0.05em;
  color: #9a7147;
}

.pt-home .pt-sources__head > p {
  max-width: 47ch;
  color: #74655b;
  font-size: 0.86rem;
  line-height: 1.72;
}

.pt-home .pt-sources__tabs {
  margin-bottom: 16px;
  gap: 7px;
}

.pt-home .pt-sources__tab {
  min-height: 42px;
  padding: 10px 20px;
  color: #5e493d;
  background: transparent;
  border: 1px solid rgba(64, 43, 34, 0.22);
  border-radius: 999px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

.pt-home .pt-sources__tab:hover {
  color: #402b22;
  background: #eee7dd;
  border-color: #8d6744;
}

.pt-home .pt-sources__tab.is-active,
.pt-home .pt-sources__tab.is-active:hover {
  color: #fffaf3;
  background: #402b22;
  border-color: #402b22;
}

.pt-home .pt-sources__panel {
  overflow: hidden;
  padding: 14px;
  grid-template-columns: minmax(0, 0.82fr) minmax(440px, 1.18fr);
  gap: clamp(26px, 4vw, 58px);
  background: #eee7dd;
  border: 1px solid rgba(64, 43, 34, 0.12);
  border-radius: 16px;
}

.pt-home .pt-sources__copy {
  padding: clamp(24px, 3vw, 42px);
}

.pt-home .pt-sources__copy > strong {
  color: #402b22;
  font-family: var(--pt-heading) !important;
  font-size: clamp(2.2rem, 3.6vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.pt-home .pt-sources__stat,
.pt-home .pt-sources__try {
  color: #6e5e54;
  font-size: 0.79rem;
}

.pt-home .pt-sources__try {
  padding-left: 17px;
  border-left-color: #a37844;
}

.pt-home .pt-sources__try span {
  color: #8a623e;
}

.pt-home .pt-sources .pt-source-link {
  display: inline-flex;
  margin-top: 23px;
  padding-bottom: 4px;
  color: #402b22;
  border-bottom: 1px solid rgba(64, 43, 34, 0.38);
  font-size: 0.67rem;
  font-weight: 700;
}

.pt-home .pt-sources__panel img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  border-radius: 10px;
}

.pt-home .pt-sources__note {
  max-width: 104ch;
  margin: 15px 0 0;
  color: #8a7a70;
  font-size: 0.58rem;
  line-height: 1.55;
}

/* Earlier organic rules made every primary button brown, even when its parent
   was already brown. Dark surfaces always receive an ivory CTA with dark text. */
:is(
  .pt-home-hero,
  .pt-final,
  .pt-science,
  .pt-shop-hero,
  .pt-shop-results,
  .pt-about-promise,
  .pt-pdp-close,
  .pt-science-shop
) :is(.pt-button, .pt-button--primary, .pt-button--ivory, .pt-button--navy) {
  color: #2b1d17 !important;
  background: #fffaf3 !important;
  border-color: #fffaf3 !important;
}

:is(
  .pt-home-hero,
  .pt-final,
  .pt-science,
  .pt-shop-hero,
  .pt-shop-results,
  .pt-about-promise,
  .pt-pdp-close,
  .pt-science-shop
) :is(.pt-button, .pt-button--primary, .pt-button--ivory, .pt-button--navy):hover {
  color: #2b1d17 !important;
  background: #e5c89f !important;
  border-color: #e5c89f !important;
}

.pt-home .pt-buy-option .pt-quick-add,
.pt-home .pt-buy-option.is-featured .pt-quick-add {
  color: #fffaf3 !important;
  background: #402b22 !important;
  border-color: #402b22 !important;
}

@media (max-width: 900px) {
  .pt-home .pt-sources__head,
  .pt-home .pt-sources__panel {
    grid-template-columns: 1fr;
  }

  .pt-home .pt-sources__head {
    gap: 22px;
  }

  .pt-home .pt-sources__panel img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 600px) {
  .pt-home .pt-sources {
    padding-block: 64px;
  }

  .pt-home .pt-sources__head h2 {
    font-size: clamp(3.2rem, 14vw, 4.5rem);
  }

  .pt-home .pt-sources__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pt-home .pt-sources__panel {
    padding: 8px;
  }

  .pt-home .pt-sources__copy {
    padding: 22px 16px;
  }
}

/* ==========================================================================
   21. Compact homepage rhythm
   Keep the editorial hierarchy while stopping every section from reading as
   another full-screen hero.
   ========================================================================== */

.pt-home .pt-home-hero__grid {
  min-height: clamp(520px, calc(100svh - var(--pt-nav-total) - 132px), 620px);
}

.pt-home .pt-home-hero__copy {
  padding: clamp(42px, 6vw, 84px);
}

.pt-home .pt-home-hero h1 {
  font-size: clamp(3.8rem, 5.55vw, 6.25rem);
  line-height: 0.92;
}

.pt-home .pt-buy,
.pt-home .pt-process,
.pt-home .pt-sources,
.pt-home .pt-results,
.pt-home .pt-faq,
.pt-home .pt-final {
  padding-block: clamp(62px, 6.5vw, 94px);
}

.pt-home .pt-buy__intro {
  margin-bottom: clamp(32px, 4vw, 48px);
  gap: clamp(34px, 5vw, 68px);
}

.pt-home .pt-buy__intro h2 {
  font-size: clamp(3.7rem, 5.55vw, 6.2rem);
  line-height: 0.93;
}

.pt-home .pt-process__head {
  margin-bottom: clamp(32px, 4.5vw, 50px);
  padding-bottom: clamp(22px, 3vw, 32px);
}

.pt-home .pt-process__head h2 {
  font-size: clamp(3.55rem, 5.45vw, 6rem);
  line-height: 0.93;
}

.pt-home .pt-sources__head h2 {
  font-size: clamp(3rem, 4.55vw, 4.85rem);
  line-height: 0.97;
}

.pt-home .pt-results h2 {
  font-size: clamp(3.15rem, 5.05vw, 5.45rem);
  line-height: 0.98;
}

.pt-home .pt-results__grid {
  gap: clamp(42px, 6vw, 82px);
}

.pt-home .pt-faq h2 {
  font-size: clamp(3.1rem, 4.85vw, 5.15rem);
  line-height: 0.96;
}

.pt-home .pt-faq__grid {
  gap: clamp(44px, 7vw, 104px);
}

.pt-home .pt-final h2 {
  font-size: clamp(3.25rem, 5.25vw, 5.65rem);
  line-height: 0.94;
}

.pt-home .pt-final__grid {
  gap: clamp(42px, 6vw, 78px);
}

@media (max-width: 600px) {
  .pt-home .pt-home-hero__grid {
    min-height: 500px;
  }

  /* Overrides the <=780px rule above (later in the file, same specificity), so
     the eyebrow lift has to be repeated here or 38px would put it back on her
     head at phone widths. Bottom padding stays generous. */
  .pt-home .pt-home-hero__copy {
    padding: 18px 26px 34px;
  }

  .pt-home .pt-home-hero h1,
  .pt-home .pt-buy__intro h2,
  .pt-home .pt-process__head h2,
  .pt-home .pt-sources__head h2,
  .pt-home .pt-results h2,
  .pt-home .pt-faq h2,
  .pt-home .pt-final h2 {
    font-size: clamp(3rem, 13vw, 4.15rem);
  }

  .pt-home .pt-buy,
  .pt-home .pt-process,
  .pt-home .pt-sources,
  .pt-home .pt-results,
  .pt-home .pt-faq,
  .pt-home .pt-final {
    padding-block: 56px;
  }
}

/* ==========================================================================
   22. Homepage plan media matches Shop cards
   ========================================================================== */

/* This box is now an exact copy of the Shop page's card media treatment
   (.pt-shop-page .pt-shop-card__image, §23) because those cards frame this same
   photography correctly and are the agreed reference.

   History, so neither failure mode gets reintroduced:
   - `cover` in a FIXED SHORT box (431x375) against the portrait ~1122x1402
     source upscaled it to 431x539 and cut ~164px off — sliced box tops.
   - `contain` in a taller box showed the whole photo but letterboxed it, so two
     cream bars sat down the sides of every card and read as broken.

   A 1/1 box with `cover` avoids both: the box tracks the card's own width, so
   the crop is a gentle centre square of a portrait frame whose product is
   already centred in drape — full product, no letterboxing, no slicing. Do not
   put an explicit height back on this; the aspect-ratio must stay in charge. */
.pt-home .pt-buy-option > .pt-buy-option__visual,
.pt-home .pt-buy-option.is-featured > .pt-buy-option__visual {
  display: block;
  overflow: hidden;
  width: calc(100% + 48px);
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  margin: 0 -24px 18px;
  padding: 0;
  background: #ebe7de;
  border-radius: 15px 15px 0 0;
}

/* Give the portrait product photography more room without lengthening the
   cards: the added media height is reclaimed from the lower vertical rhythm. */
.pt-home .pt-buy-option,
.pt-home .pt-buy-option:hover {
  padding-bottom: 18px;
}

.pt-home .pt-buy-option__title {
  margin-top: 14px;
}

.pt-home .pt-buy-option > small,
.pt-home .pt-buy-option.is-featured > small {
  margin-top: 14px;
  padding-top: 12px;
}

.pt-home .pt-buy-option__actions {
  margin-top: 15px;
}

.pt-home .pt-buy-option > .pt-buy-option__visual img,
.pt-home .pt-buy-option.is-featured > .pt-buy-option__visual img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100% !important;
  max-height: none;
  margin: 0;
  object-fit: cover !important;
  object-position: center;
  transform: scale(1) !important;
}

/* No hover zoom. The Shop cards this now mirrors do not scale their image
   either, and scaling inside a square crop re-cuts the product edges. The card
   itself still lifts on hover (§16), so the affordance stays. */
.pt-home .pt-buy-option:hover > .pt-buy-option__visual img,
.pt-home .pt-buy-option.is-featured:hover > .pt-buy-option__visual img {
  transform: scale(1) !important;
}

@media (max-width: 900px) {
  /* One card per row, but the 1/1 box already tracks the card's width, so no
     explicit height is needed — and any height here would override the
     aspect-ratio and bring the cropping back. */
  .pt-home .pt-buy-option > .pt-buy-option__visual,
  .pt-home .pt-buy-option.is-featured > .pt-buy-option__visual {
    height: auto;
  }
}

@media (max-width: 600px) {
  .pt-home .pt-buy-option > .pt-buy-option__visual,
  .pt-home .pt-buy-option.is-featured > .pt-buy-option__visual {
    width: calc(100% + 48px);
    height: auto;
    margin: 0 -24px 16px;
    padding: 0;
  }

  .pt-home .pt-buy-option > .pt-buy-option__visual img,
  .pt-home .pt-buy-option.is-featured > .pt-buy-option__visual img {
    width: 100%;
    max-width: none;
  }
}

/* Final CTA copy must stay legible on its espresso surface. */
.pt-home .pt-final .pt-home-kicker {
  color: #e0bd8c !important;
}

.pt-home .pt-final__offer,
.pt-home .pt-final__reassurance {
  color: rgba(255, 250, 243, 0.72);
}

@media (max-width: 600px) {
  .pt-home .pt-sources__tabs .pt-sources__tab:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .pt-home .pt-sources__tabs {
    display: flex;
    width: calc(100% + 40px);
    margin-right: -20px;
    margin-left: -20px;
    padding: 2px 20px 8px;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 20px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .pt-home .pt-sources__tabs::-webkit-scrollbar {
    display: none;
  }

  .pt-home .pt-sources__tab,
  .pt-home .pt-sources__tabs .pt-sources__tab:last-child {
    min-width: max-content;
    flex: 0 0 auto;
    grid-column: auto;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   23. Focused ecommerce shop
   A short buying page using the same warm editorial system as Home.
   ========================================================================== */

.pt-shop-page {
  color: #402b22;
  background: #f6f1e9;
}

.pt-shop-page > section {
  padding-block: 0;
}

.pt-shop-page .pt-shop-hero {
  padding-block: clamp(48px, 5vw, 68px);
  color: #fffaf3;
  background: #402b22;
}

.pt-shop-page .pt-shop-hero__grid {
  min-height: 0;
  grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr);
  gap: clamp(42px, 7vw, 90px);
  align-items: center;
}

.pt-shop-page .pt-shop-hero__copy {
  max-width: 610px;
}

.pt-shop-page .pt-shop-hero .pt-home-kicker {
  margin-bottom: 18px;
  color: #d9bd96;
}

.pt-shop-page .pt-shop-hero h1 {
  max-width: 12ch;
  margin: 0 0 22px;
  color: #fffaf3;
  font-family: var(--pt-heading, "Manrope", sans-serif) !important;
  font-size: clamp(3.35rem, 5.1vw, 5.4rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.92;
}

.pt-shop-page .pt-shop-hero h1 em {
  color: #d9bd96;
  font-family: inherit;
  font-style: normal;
}

.pt-shop-page .pt-shop-hero__lead {
  max-width: 540px;
  margin-bottom: 24px;
  color: rgba(255, 250, 243, 0.72);
  font-size: 0.94rem;
  line-height: 1.65;
}

.pt-shop-page .pt-shop-hero__actions {
  display: flex;
  margin-top: 0;
  align-items: center;
  gap: 18px;
}

.pt-shop-page .pt-shop-hero__actions .pt-button {
  min-height: 50px;
  padding-inline: 22px;
  color: #402b22;
  background: #fffaf3;
}

.pt-shop-page .pt-shop-hero__actions > span {
  color: #d9bd96;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
}

.pt-shop-page .pt-shop-hero__trust {
  margin-top: 24px;
  border-top-color: rgba(255, 250, 243, 0.16);
}

.pt-shop-page .pt-shop-hero__trust li + li {
  border-left-color: rgba(255, 250, 243, 0.16);
}

.pt-shop-page .pt-shop-hero__trust strong {
  color: #fffaf3;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 1rem;
  font-weight: 600;
}

.pt-shop-page .pt-shop-hero__trust span {
  color: rgba(255, 250, 243, 0.58);
}

.pt-shop-page .pt-shop-hero__visual {
  height: clamp(340px, 32vw, 430px);
  background: #eee7dd;
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(27, 16, 11, 0.2);
}

.pt-shop-page .pt-shop-hero__visual > span {
  bottom: 18px;
  left: 20px;
}

.pt-shop-page .pt-marquee {
  position: relative;
  overflow: hidden;
  padding-block: 20px;
  color: #402b22;
  background: #e9decc;
  border-block: 1px solid rgba(64, 43, 34, 0.16);
}

.pt-shop-page .pt-marquee::before,
.pt-shop-page .pt-marquee::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: clamp(28px, 6vw, 92px);
  pointer-events: none;
  content: "";
}

.pt-shop-page .pt-marquee::before {
  left: 0;
  background: linear-gradient(90deg, #e9decc 8%, rgba(233, 222, 204, 0));
}

.pt-shop-page .pt-marquee::after {
  right: 0;
  background: linear-gradient(270deg, #e9decc 8%, rgba(233, 222, 204, 0));
}

.pt-shop-page .pt-marquee__track {
  animation-duration: 48s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.pt-shop-page .pt-marquee:hover .pt-marquee__track {
  animation-play-state: running;
}

.pt-shop-page .pt-marquee__item {
  gap: 28px;
  padding-inline: 28px;
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;
}

.pt-shop-page .pt-marquee__item::after {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: #a37844;
  border-radius: 1px;
  transform: rotate(45deg);
}

.pt-shop-page .pt-shop-catalog {
  padding-block: clamp(68px, 7vw, 96px);
  background: #f6f1e9;
}

.pt-shop-page .pt-shop-catalog__heading {
  display: grid;
  max-width: none;
  margin-bottom: clamp(30px, 4vw, 46px);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.58fr);
  gap: clamp(36px, 7vw, 92px);
  align-items: end;
}

.pt-shop-page .pt-shop-catalog__heading h2 {
  max-width: 12ch;
  margin: 0;
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif) !important;
  font-size: clamp(3rem, 4.6vw, 4.8rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.92;
}

.pt-shop-page .pt-shop-catalog__heading h2 em {
  color: #9a7147;
  font-family: inherit;
  font-style: normal;
}

.pt-shop-page .pt-shop-catalog__heading > p:last-child {
  max-width: 44ch;
  margin: 0;
  padding-left: 18px;
  color: #74655b;
  border-left: 2px solid #a37844;
  font-size: 0.84rem;
  line-height: 1.65;
}

.pt-shop-page .pt-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.pt-shop-page .pt-shop-card,
.pt-shop-page .pt-shop-card.is-featured {
  display: flex;
  overflow: hidden;
  min-height: 0;
  flex-direction: column;
  color: #402b22;
  background: #eee7dd;
  border: 1px solid rgba(64, 43, 34, 0.16);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(64, 43, 34, 0.05);
  transform: none;
}

.pt-shop-page .pt-shop-card.is-featured {
  border: 2px solid #a37844;
}

.pt-shop-page .pt-shop-card:hover,
.pt-shop-page .pt-shop-card:focus-within,
.pt-shop-page .pt-shop-card.is-featured:hover {
  border-color: rgba(122, 85, 55, 0.62);
  box-shadow: 0 22px 54px rgba(64, 43, 34, 0.11);
  transform: translateY(-4px);
}

.pt-shop-page .pt-shop-card__image {
  display: block;
  overflow: hidden;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  background: #ebe7de;
}

.pt-shop-page .pt-shop-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pt-shop-page .pt-shop-card__content {
  display: flex;
  min-height: 0;
  padding: 20px 22px 18px;
  flex-direction: column;
}

.pt-shop-page .pt-shop-card__meta span {
  color: #8b6542;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
}

.pt-shop-page .pt-shop-card__meta strong {
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 1.4rem;
  font-weight: 500;
}

.pt-shop-page .pt-shop-card h3 {
  margin: 12px 0 6px;
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
}

.pt-shop-page .pt-shop-card__content > p {
  min-height: 38px;
  margin: 0;
  color: #77675c;
  font-size: 0.76rem;
  line-height: 1.5;
}

.pt-shop-page .pt-shop-card__value {
  margin-top: 14px;
  padding-block: 11px;
  border-color: rgba(64, 43, 34, 0.16);
}

.pt-shop-page .pt-shop-card__value span {
  color: #655044;
}

.pt-shop-page .pt-shop-card__value strong {
  color: #8b6542;
}

.pt-shop-page .pt-shop-card__actions {
  display: flex;
  margin-top: 14px;
  flex-direction: column;
  gap: 7px;
}

.pt-shop-page .pt-shop-card__add,
.pt-shop-page .pt-shop-card.is-featured .pt-shop-card__add {
  width: 100%;
  min-height: 46px;
  color: #fffaf3;
  background: #402b22;
  border-color: #402b22;
  border-radius: 999px;
}

.pt-shop-page .pt-shop-card__add:hover,
.pt-shop-page .pt-shop-card.is-featured .pt-shop-card__add:hover {
  color: #fffaf3;
  background: #6f4d35;
  border-color: #6f4d35;
}

.pt-shop-page .pt-shop-card__view {
  min-height: 28px;
  padding: 0;
  color: #655044;
  background: transparent;
  border: 0;
  font-size: 0.68rem;
  text-decoration: none;
}

.pt-shop-page .pt-shop-card__view:hover {
  color: #402b22;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pt-shop-page .pt-shop-includes {
  display: grid;
  margin-top: 18px;
  padding: 24px 26px;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  color: #fffaf3;
  background: #402b22;
  border-radius: 14px;
}

.pt-shop-page .pt-shop-includes > p {
  margin: 0;
  color: #d9bd96;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pt-shop-page .pt-shop-includes ul {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

.pt-shop-page .pt-shop-includes li {
  padding: 2px 16px;
  border-left: 1px solid rgba(255, 250, 243, 0.16);
}

.pt-shop-page .pt-shop-includes span,
.pt-shop-page .pt-shop-includes strong {
  display: block;
}

.pt-shop-page .pt-shop-includes span {
  margin-bottom: 6px;
  color: #d9bd96;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.pt-shop-page .pt-shop-includes strong {
  color: #fffaf3;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
}

.pt-shop-page .pt-shop-catalog__note {
  max-width: 910px;
  margin: 16px auto 0;
  color: #81736a;
  font-size: 0.66rem;
  line-height: 1.55;
  text-align: center;
}

.pt-shop-page .pt-shop-assurance {
  padding-block: clamp(52px, 5vw, 72px);
  color: #fffaf3;
  background: #503629;
}

.pt-shop-page .pt-shop-assurance__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(360px, 0.7fr);
  gap: clamp(48px, 9vw, 130px);
  align-items: center;
}

.pt-shop-page .pt-shop-assurance .pt-home-kicker {
  color: #d9bd96;
}

.pt-shop-page .pt-shop-assurance h2 {
  max-width: 12ch;
  margin: 0;
  color: #fffaf3;
  font-family: var(--pt-heading, "Manrope", sans-serif) !important;
  font-size: clamp(2.7rem, 4vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.94;
}

.pt-shop-page .pt-shop-assurance h2 em {
  color: #d9bd96;
  font-family: inherit;
  font-style: normal;
}

.pt-shop-page .pt-shop-assurance__copy {
  padding-left: 22px;
  border-left: 1px solid rgba(255, 250, 243, 0.24);
}

.pt-shop-page .pt-shop-assurance__copy p {
  margin: 0;
  color: rgba(255, 250, 243, 0.7);
  font-size: 0.82rem;
  line-height: 1.7;
}

.pt-shop-page .pt-shop-assurance__links {
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.pt-shop-page .pt-shop-assurance__links a {
  color: #fffaf3;
  font-size: 0.7rem;
  font-weight: 700;
}

.pt-shop-page .pt-shop-assurance__links a span {
  margin-left: 6px;
  color: #d9bd96;
}

@media (max-width: 900px) {
  .pt-shop-page .pt-shop-hero__grid,
  .pt-shop-page .pt-shop-catalog__heading,
  .pt-shop-page .pt-shop-assurance__grid {
    grid-template-columns: 1fr;
  }

  .pt-shop-page .pt-shop-hero__visual {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .pt-shop-page .pt-shop-grid {
    grid-template-columns: 1fr;
  }

  .pt-shop-page .pt-shop-card,
  .pt-shop-page .pt-shop-card.is-featured {
    display: grid;
    grid-template-columns: minmax(270px, 340px) minmax(0, 1fr);
  }

  .pt-shop-page .pt-shop-card__image {
    height: auto;
    min-height: 0;
    align-self: start;
    aspect-ratio: 1 / 1;
  }

  .pt-shop-page .pt-shop-includes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .pt-shop-page .pt-shop-hero {
    padding-block: 42px 50px;
  }

  .pt-shop-page .pt-shop-hero h1 {
    font-size: clamp(3.15rem, 14vw, 4.15rem);
  }

  .pt-shop-page .pt-shop-hero__actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .pt-shop-page .pt-marquee {
    padding-block: 17px;
  }

  .pt-shop-page .pt-marquee__item {
    gap: 22px;
    padding-inline: 22px;
    font-size: 1rem;
  }

  .pt-shop-page .pt-shop-hero__visual {
    aspect-ratio: 4 / 3;
  }

  .pt-shop-page .pt-shop-catalog {
    padding-block: 56px;
  }

  .pt-shop-page .pt-shop-catalog__heading {
    gap: 18px;
  }

  .pt-shop-page .pt-shop-catalog__heading h2 {
    font-size: clamp(2.9rem, 13vw, 3.8rem);
  }

  .pt-shop-page .pt-shop-card,
  .pt-shop-page .pt-shop-card.is-featured {
    display: flex;
  }

  .pt-shop-page .pt-shop-card__image {
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  .pt-shop-page .pt-shop-card__content {
    padding: 18px 20px 16px;
  }

  .pt-shop-page .pt-shop-includes {
    padding: 22px;
  }

  .pt-shop-page .pt-shop-includes ul {
    grid-template-columns: 1fr 1fr;
  }

  .pt-shop-page .pt-shop-includes li {
    padding: 12px;
    border-top: 1px solid rgba(255, 250, 243, 0.14);
    border-left: 0;
  }

  .pt-shop-page .pt-shop-assurance {
    padding-block: 50px;
  }

  .pt-shop-page .pt-shop-assurance__grid {
    gap: 28px;
  }
}

/* ==========================================================================
   24. Focused ecommerce product page
   Product, price, purchase, essentials, and disclosures—nothing duplicated.
   ========================================================================== */

.pt-pdp {
  color: #402b22;
  background: #f6f1e9;
}

.pt-pdp .pt-pdp-hero {
  padding-block: clamp(46px, 5vw, 68px);
  background: #f6f1e9;
}

.pt-pdp .pt-pdp-back {
  display: inline-flex;
  margin-bottom: 24px;
  align-items: center;
  gap: 8px;
  color: #74655b;
  font-size: 0.7rem;
  font-weight: 700;
}

.pt-pdp .pt-pdp-back:hover {
  color: #402b22;
}

.pt-pdp .pt-pdp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(390px, 0.96fr);
  gap: clamp(34px, 6vw, 76px);
  align-items: start;
}

.pt-pdp .pt-pdp-gallery {
  position: sticky;
  top: calc(var(--pt-nav-total, 100px) + 22px);
}

.pt-pdp .pt-pdp-visual {
  overflow: hidden;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: #ebe7de;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(64, 43, 34, 0.09);
}

.pt-pdp .pt-pdp-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pt-pdp .pt-pdp-gallery__thumbs {
  display: flex;
  margin-top: 10px;
  padding: 2px 0;
  gap: 8px;
  overflow-x: auto;
}

.pt-pdp .pt-pdp-gallery__thumb {
  width: 64px;
  flex: 0 0 64px;
  overflow: hidden;
  padding: 0;
  aspect-ratio: 1;
  background: #ebe7de;
  border: 1px solid rgba(64, 43, 34, 0.16);
  border-radius: 8px;
}

.pt-pdp .pt-pdp-gallery__thumb.is-active {
  border-color: #8b6542;
  box-shadow: 0 0 0 1px #8b6542;
}

.pt-pdp .pt-pdp-buy {
  min-width: 0;
  padding: clamp(28px, 3.5vw, 42px);
  background: #eee7dd;
  border: 1px solid rgba(64, 43, 34, 0.14);
  border-radius: 16px;
}

.pt-pdp .pt-pdp-buy .pt-home-kicker {
  margin-bottom: 14px;
  color: #8b6542;
}

.pt-pdp .pt-pdp-buy h1 {
  max-width: 18ch;
  margin: 0 0 18px;
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif) !important;
  font-size: clamp(2.45rem, 3.6vw, 3.55rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.96;
}

.pt-pdp .pt-pdp-price {
  display: flex;
  padding-block: 14px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-block: 1px solid rgba(64, 43, 34, 0.16);
}

.pt-pdp .pt-pdp-price strong {
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 1.7rem;
  font-weight: 500;
}

.pt-pdp .pt-pdp-price span {
  color: #74655b;
  font-size: 0.68rem;
}

.pt-pdp .pt-pdp-value {
  padding-block: 10px;
  border-bottom-color: rgba(64, 43, 34, 0.14);
}

.pt-pdp .pt-pdp-value span {
  color: #655044;
}

.pt-pdp .pt-pdp-value strong {
  color: #8b6542;
}

.pt-pdp .pt-pdp-intro {
  max-width: 50ch;
  margin: 18px 0 0;
  color: #6f6157;
  font-size: 0.86rem;
  line-height: 1.65;
}

.pt-pdp .pt-pdp-buy-details {
  margin-top: 16px;
  border-block: 1px solid rgba(64, 43, 34, 0.16);
}

.pt-pdp .pt-pdp-buy-details summary {
  position: relative;
  padding: 14px 32px 14px 0;
  color: #402b22;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.pt-pdp .pt-pdp-buy-details summary::-webkit-details-marker {
  display: none;
}

.pt-pdp .pt-pdp-buy-details summary::after {
  position: absolute;
  top: 50%;
  right: 2px;
  color: #8b6542;
  content: "+";
  font-size: 1.05rem;
  font-weight: 400;
  transform: translateY(-50%);
}

.pt-pdp .pt-pdp-buy-details[open] summary::after {
  content: "−";
}

.pt-pdp .pt-pdp-buy-details__content {
  padding: 0 4px 16px 0;
  color: #6f6157;
  font-size: 0.7rem;
  line-height: 1.65;
}

.pt-pdp .pt-pdp-buy-details__content > :first-child,
.pt-pdp .pt-pdp-buy-details__content .trix-content > :first-child {
  margin-top: 0;
}

.pt-pdp .pt-pdp-buy-details__content > :last-child,
.pt-pdp .pt-pdp-buy-details__content .trix-content > :last-child {
  margin-bottom: 0;
}

.pt-pdp .pt-pdp-buy-details__content h2,
.pt-pdp .pt-pdp-buy-details__content h3,
.pt-pdp .pt-pdp-buy-details__content h4 {
  margin: 18px 0 7px;
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif) !important;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.pt-pdp .pt-pdp-buy-details__content p {
  margin-bottom: 10px;
}

.pt-pdp .pt-pdp-buy-details__content ul,
.pt-pdp .pt-pdp-buy-details__content ol {
  margin: 8px 0 12px;
  padding-left: 18px;
}

.pt-pdp .pt-pdp-buy-details__content li + li {
  margin-top: 4px;
}

.pt-pdp .pt-pdp-disclosure {
  display: flex;
  margin: 16px 0 0;
  padding: 0 0 0 14px;
  flex-direction: column;
  gap: 3px;
  color: #74655b;
  background: transparent;
  border-left: 2px solid #a37844;
  font-size: 0.65rem;
  line-height: 1.5;
}

.pt-pdp .pt-pdp-disclosure strong {
  color: #402b22;
}

.pt-pdp .pt-pdp-disclosure a {
  color: #8b6542;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pt-pdp .pt-pdp-form {
  margin: 20px 0 0;
  padding-top: 20px;
  border-top-color: rgba(64, 43, 34, 0.16);
}

.pt-pdp .pt-pdp-form__row {
  gap: 10px;
}

.pt-pdp .pt-qty {
  background: #fffaf3;
  border-color: rgba(64, 43, 34, 0.2);
}

.pt-pdp .pt-pdp-add,
.pt-pdp .pt-pdp-form .pt-pdp-add {
  min-height: 50px;
  color: #fffaf3;
  background: #402b22;
  border-color: #402b22;
}

.pt-pdp .pt-pdp-add:hover,
.pt-pdp .pt-pdp-form .pt-pdp-add:hover {
  color: #fffaf3;
  background: #6f4d35;
  border-color: #6f4d35;
}

.pt-pdp .pt-pdp-form__note {
  margin-top: 10px;
  color: #74655b;
  font-size: 0.62rem;
}

.pt-pdp .pt-pdp-policy-links {
  margin-top: 10px;
  padding-top: 10px;
  border-top-color: rgba(64, 43, 34, 0.14);
}

.pt-pdp .pt-pdp-policy-links a {
  color: #655044;
  font-size: 0.64rem;
}

.pt-pdp .pt-pdp-essentials {
  padding-block: 0;
  color: #fffaf3;
  background: #402b22;
}

.pt-pdp .pt-pdp-essentials__inner {
  display: grid;
  padding-block: 24px;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.pt-pdp .pt-pdp-essentials__inner > p {
  margin: 0;
  color: #d9bd96;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pt-pdp .pt-pdp-essentials ul {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

.pt-pdp .pt-pdp-essentials li {
  padding: 2px 16px;
  border-left: 1px solid rgba(255, 250, 243, 0.16);
}

.pt-pdp .pt-pdp-essentials span,
.pt-pdp .pt-pdp-essentials strong {
  display: block;
}

.pt-pdp .pt-pdp-essentials span {
  margin-bottom: 6px;
  color: #d9bd96;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.pt-pdp .pt-pdp-essentials strong {
  color: #fffaf3;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
}

.pt-pdp .pt-pdp-details {
  padding-block: clamp(58px, 7vw, 88px);
  background: #faf7f1;
}

.pt-pdp .pt-pdp-details__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(48px, 9vw, 130px);
  align-items: start;
}

.pt-pdp .pt-pdp-details__intro {
  position: sticky;
  top: calc(var(--pt-nav-total, 100px) + 24px);
}

.pt-pdp .pt-pdp-details h2 {
  max-width: 12ch;
  margin: 0 0 18px;
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif) !important;
  font-size: clamp(2.8rem, 4.2vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.94;
}

.pt-pdp .pt-pdp-details h2 em {
  color: #9a7147;
  font-family: inherit;
  font-style: normal;
}

.pt-pdp .pt-pdp-details__intro > p:not(.pt-home-kicker) {
  max-width: 34ch;
  margin-bottom: 18px;
  color: #74655b;
  font-size: 0.82rem;
}

.pt-pdp .pt-pdp-details__intro > a {
  color: #402b22;
  font-size: 0.7rem;
  font-weight: 700;
}

.pt-pdp .pt-pdp-details__intro > a span {
  margin-left: 5px;
  color: #9a7147;
}

.pt-pdp .pt-pdp-details__body {
  min-width: 0;
}

.pt-pdp .pt-pdp-details__api {
  margin-bottom: 26px;
  padding: clamp(22px, 3vw, 30px);
  color: #6f6157;
  background: #eee7dd;
  border: 1px solid rgba(64, 43, 34, 0.14);
  border-radius: 14px;
  font-size: 0.79rem;
  line-height: 1.7;
}

.pt-pdp .pt-pdp-details__api > :first-child,
.pt-pdp .pt-pdp-details__api .trix-content > :first-child {
  margin-top: 0;
}

.pt-pdp .pt-pdp-details__api > :last-child,
.pt-pdp .pt-pdp-details__api .trix-content > :last-child {
  margin-bottom: 0;
}

.pt-pdp .pt-pdp-details__api h2,
.pt-pdp .pt-pdp-details__api h3,
.pt-pdp .pt-pdp-details__api h4 {
  margin: 22px 0 8px;
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif) !important;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.pt-pdp .pt-pdp-details__api p {
  margin-bottom: 12px;
}

.pt-pdp .pt-pdp-details__api ul,
.pt-pdp .pt-pdp-details__api ol {
  margin: 10px 0 16px;
  padding-left: 20px;
}

.pt-pdp .pt-pdp-details__api li + li {
  margin-top: 5px;
}

.pt-pdp .pt-pdp-details__list {
  border-top: 1px solid rgba(64, 43, 34, 0.2);
}

.pt-pdp .pt-pdp-details__list details {
  border-bottom: 1px solid rgba(64, 43, 34, 0.2);
}

.pt-pdp .pt-pdp-details__list summary {
  position: relative;
  display: grid;
  padding: 20px 44px 20px 0;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  cursor: pointer;
  list-style: none;
}

.pt-pdp .pt-pdp-details__list summary::-webkit-details-marker {
  display: none;
}

.pt-pdp .pt-pdp-details__list summary > span {
  color: #9a7147;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.pt-pdp .pt-pdp-details__list summary::after {
  position: absolute;
  top: 50%;
  right: 4px;
  color: #8b6542;
  content: "+";
  font-size: 1.25rem;
  font-weight: 400;
  transform: translateY(-50%);
}

.pt-pdp .pt-pdp-details__list details[open] summary::after {
  content: "−";
}

.pt-pdp .pt-pdp-details__list details > p {
  max-width: 68ch;
  margin: 0;
  padding: 0 44px 20px 42px;
  color: #74655b;
  font-size: 0.76rem;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .pt-pdp .pt-pdp-hero__grid,
  .pt-pdp .pt-pdp-details__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .pt-pdp .pt-pdp-gallery,
  .pt-pdp .pt-pdp-details__intro {
    position: static;
  }

  .pt-pdp .pt-pdp-visual {
    max-height: none;
    aspect-ratio: 1 / 1;
  }

  .pt-pdp .pt-pdp-essentials__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .pt-pdp .pt-pdp-hero {
    padding-block: 36px 48px;
  }

  .pt-pdp .pt-pdp-back {
    margin-bottom: 18px;
  }

  .pt-pdp .pt-pdp-buy {
    padding: 24px 20px;
  }

  .pt-pdp .pt-pdp-buy h1 {
    font-size: clamp(2.35rem, 11vw, 3.2rem);
  }

  .pt-pdp .pt-pdp-form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .pt-pdp .pt-pdp-essentials__inner {
    padding-block: 22px;
  }

  .pt-pdp .pt-pdp-essentials ul {
    grid-template-columns: 1fr 1fr;
  }

  .pt-pdp .pt-pdp-essentials li {
    padding: 12px;
    border-top: 1px solid rgba(255, 250, 243, 0.14);
    border-left: 0;
  }

  .pt-pdp .pt-pdp-details {
    padding-block: 52px;
  }

  .pt-pdp .pt-pdp-details h2 {
    font-size: clamp(2.8rem, 13vw, 3.8rem);
  }

  .pt-pdp .pt-pdp-details__list summary {
    padding-block: 18px;
    grid-template-columns: 34px minmax(0, 1fr);
    font-size: 1rem;
  }

  .pt-pdp .pt-pdp-details__list details > p {
    padding: 0 30px 18px 34px;
  }
}

/* Keep the footer's final row fully scrollable above the fixed PDP buy bar. */
body.pt-product-route .pt-footer {
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

@media (max-width: 620px) {
  body.pt-product-route .pt-footer {
    padding-bottom: calc(124px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   25. Focused ecommerce cart
   A quiet review step with one clear checkout destination.
   ========================================================================== */

.pt-cart-page {
  min-height: 70vh;
  color: #402b22;
  background: #f6f1e9;
}

.pt-cart-page .pt-cart-hero {
  padding-block: clamp(34px, 4vw, 50px);
  color: #fffaf3;
  background: #402b22;
}

.pt-cart-page .pt-cart-hero__inner {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
}

.pt-cart-page .pt-cart-hero .pt-home-kicker {
  margin-bottom: 12px;
  color: #d9bd96;
}

.pt-cart-page .pt-cart-hero h1 {
  max-width: 16ch;
  margin: 0;
  color: #fffaf3;
  font-family: var(--pt-heading, "Manrope", sans-serif) !important;
  font-size: clamp(2.7rem, 4.5vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.pt-cart-page .pt-cart-hero__inner > a {
  display: inline-flex;
  padding-bottom: 4px;
  align-items: center;
  gap: 8px;
  color: rgba(255, 250, 243, 0.7);
  border-bottom: 1px solid rgba(255, 250, 243, 0.28);
  font-size: 0.68rem;
  font-weight: 700;
}

.pt-cart-page .pt-cart-hero__inner > a span {
  color: #d9bd96;
}

.pt-cart-page .pt-cart-body {
  padding-block: clamp(48px, 6vw, 76px);
  background: #f6f1e9;
}

.pt-cart-page .pt-cart-layout {
  display: grid;
  margin: 0;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}

.pt-cart-page .pt-cart-selection__head {
  display: flex;
  padding: 0 0 16px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(64, 43, 34, 0.18);
}

.pt-cart-page .pt-cart-selection__head h2 {
  margin: 0;
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.pt-cart-page .pt-cart-items {
  display: grid;
  padding-top: 14px;
  gap: 12px;
}

.pt-cart-page .pt-cart-item {
  display: grid;
  margin: 0;
  padding: 14px;
  grid-template-columns: 118px minmax(0, 1fr) 88px;
  gap: 18px;
  align-items: center;
  background: #eee7dd;
  border: 1px solid rgba(64, 43, 34, 0.14);
  border-radius: 14px;
}

.pt-cart-page .pt-cart-item__image {
  width: 118px;
  height: 118px;
  overflow: hidden;
  background: #ebe7de;
  border-radius: 10px;
}

.pt-cart-page .pt-cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pt-cart-page .pt-cart-item__content h2 {
  max-width: 28ch;
  margin: 0 0 7px;
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.pt-cart-page .pt-cart-item__content p {
  margin: 0 0 7px;
  color: #74655b;
  font-size: 0.66rem;
}

.pt-cart-page .pt-cart-item__content strong {
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 1rem;
  font-weight: 600;
}

.pt-cart-page .pt-cart-item__actions {
  display: grid;
  justify-items: stretch;
  gap: 9px;
}

.pt-cart-page .pt-cart-item__quantity {
  color: #74655b;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pt-cart-page .pt-cart-item__quantity select {
  width: 100%;
  min-height: 40px;
  margin-top: 5px;
  padding: 7px 30px 7px 13px;
  color: #402b22;
  background-color: #fffaf3;
  border: 1px solid rgba(64, 43, 34, 0.2);
  border-radius: 999px;
}

.pt-cart-page .pt-remove-button {
  justify-self: center;
  padding: 0;
  color: #74655b;
  background: transparent;
  border: 0;
  font-size: 0.62rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pt-cart-page .pt-remove-button:hover {
  color: #402b22;
}

.pt-cart-page .pt-cart-assurances {
  display: flex;
  margin-top: 16px;
  padding: 0;
  flex-wrap: wrap;
  gap: 8px 22px;
  color: #74655b;
  border: 0;
  font-size: 0.64rem;
}

.pt-cart-page .pt-cart-assurances span {
  position: relative;
  display: inline-flex;
  padding-left: 13px;
  align-items: center;
}

.pt-cart-page .pt-cart-assurances span::before {
  position: absolute;
  left: 0;
  width: 5px;
  height: 5px;
  background: #a37844;
  border-radius: 1px;
  content: "";
  transform: rotate(45deg);
}

.pt-cart-page .pt-order-summary {
  position: sticky;
  top: calc(var(--pt-nav-total, 100px) + 22px);
  padding: 28px;
  color: #fffaf3;
  background: #402b22;
  border: 1px solid rgba(255, 250, 243, 0.12);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(64, 43, 34, 0.13);
}

.pt-cart-page .pt-order-summary .pt-home-kicker {
  margin-bottom: 12px;
  color: #d9bd96;
}

.pt-cart-page .pt-order-summary h2 {
  margin: 0 0 22px;
  color: #fffaf3;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.05em;
}

.pt-cart-page .pt-order-summary dl {
  margin: 0 0 22px;
}

.pt-cart-page .pt-order-summary dl > div {
  display: flex;
  padding-block: 9px;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255, 250, 243, 0.65);
  border-bottom: 1px solid rgba(255, 250, 243, 0.12);
  font-size: 0.72rem;
}

.pt-cart-page .pt-order-summary dd {
  margin: 0;
  color: #fffaf3;
}

.pt-cart-page .pt-order-summary__total {
  margin: 8px 0 0;
  padding-top: 16px !important;
  color: #fffaf3 !important;
  border-bottom: 0 !important;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 1.1rem !important;
  font-weight: 600;
}

.pt-cart-page .pt-order-summary .pt-button {
  min-height: 50px;
  color: #402b22;
  background: #fffaf3;
  border-color: #fffaf3;
  border-radius: 999px;
}

.pt-cart-page .pt-order-summary .pt-button:hover {
  color: #402b22;
  background: #e5c89f;
  border-color: #e5c89f;
}

.pt-cart-page .pt-order-summary__note {
  margin: 11px 0 0 !important;
  color: rgba(255, 250, 243, 0.56);
  font-size: 0.6rem !important;
}

.pt-cart-page .pt-cart-policy-links {
  display: flex;
  margin-top: 14px;
  padding-top: 14px;
  justify-content: center;
  gap: 18px;
  border-top: 1px solid rgba(255, 250, 243, 0.12);
}

.pt-cart-page .pt-cart-policy-links a {
  color: rgba(255, 250, 243, 0.68);
  font-size: 0.62rem;
}

.pt-cart-page .pt-cart-policy-links a:hover {
  color: #fffaf3;
}

.pt-cart-page .pt-empty-cart {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(42px, 7vw, 72px);
  background: #eee7dd;
  border: 1px solid rgba(64, 43, 34, 0.14);
  border-radius: 16px;
  text-align: center;
}

.pt-cart-page .pt-empty-cart h2 {
  margin-bottom: 18px;
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif) !important;
  font-size: clamp(2.7rem, 5vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.94;
}

.pt-cart-page .pt-empty-cart h2 em {
  color: #9a7147;
  font-family: inherit;
  font-style: normal;
}

.pt-cart-page .pt-empty-cart > p:not(.pt-home-kicker) {
  max-width: 440px;
  margin: 0 auto 24px;
  color: #74655b;
  font-size: 0.82rem;
}

.pt-cart-page .pt-empty-cart .pt-button {
  color: #fffaf3;
  background: #402b22;
  border-radius: 999px;
}

@media (max-width: 820px) {
  .pt-cart-page .pt-cart-layout {
    grid-template-columns: 1fr;
  }

  .pt-cart-page .pt-order-summary {
    position: static;
  }
}

@media (max-width: 560px) {
  .pt-cart-page .pt-cart-hero {
    padding-block: 32px 38px;
  }

  .pt-cart-page .pt-cart-hero__inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .pt-cart-page .pt-cart-hero h1 {
    font-size: clamp(2.7rem, 13vw, 3.7rem);
  }

  .pt-cart-page .pt-cart-body {
    padding-block: 42px;
  }

  .pt-cart-page .pt-cart-item {
    padding: 12px;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
  }

  .pt-cart-page .pt-cart-item__image {
    width: 88px;
    height: 88px;
  }

  .pt-cart-page .pt-cart-item__content h2 {
    font-size: 0.95rem;
  }

  .pt-cart-page .pt-cart-item__actions {
    grid-column: 2;
    grid-template-columns: 84px auto;
    align-items: end;
  }

  .pt-cart-page .pt-order-summary {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   26. Refined navigation
   Readable desktop links and a calmer, premium mobile menu.
   ========================================================================== */

.pt-header,
.pt-header.is-scrolled {
  color: #402b22;
  background: rgba(246, 241, 233, 0.96);
  border-bottom: 1px solid rgba(64, 43, 34, 0.13);
  box-shadow: 0 10px 32px rgba(64, 43, 34, 0.035);
  backdrop-filter: blur(18px) saturate(115%);
}

.pt-header .pt-brand {
  padding-bottom: 5px;
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -0.055em;
}

.pt-header.is-scrolled .pt-brand {
  color: #402b22;
  font-size: 1.34rem;
}

.pt-header .pt-brand::after {
  bottom: 0;
  height: 1px;
  background: #a37844;
}

.pt-header .pt-nav {
  gap: clamp(32px, 3.4vw, 50px);
}

.pt-header .pt-nav a {
  padding: 10px 2px;
  color: #5e493d;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  text-transform: none;
}

.pt-header .pt-nav a:hover,
.pt-header .pt-nav a:focus-visible {
  color: #402b22;
}

.pt-header .pt-nav a::after {
  right: 2px;
  bottom: 3px;
  left: 2px;
  height: 1px;
  background: #a37844;
}

.pt-header .pt-header-actions,
.pt-header .pt-account-link,
.pt-header .pt-cart-link,
.pt-header .pt-menu-toggle {
  color: #402b22;
}

.pt-header .pt-account-link,
.pt-header .pt-cart-link {
  border-radius: 999px;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.pt-header .pt-account-link:hover,
.pt-header .pt-cart-link:hover {
  color: #6f4d35;
  background: rgba(163, 120, 68, 0.1);
}

@media (max-width: 620px) {
  .pt-header,
  .pt-header.is-scrolled,
  body.pt-menu-open .pt-header {
    background: rgba(246, 241, 233, 0.98);
    border-bottom-color: rgba(64, 43, 34, 0.13);
    backdrop-filter: blur(18px);
  }

  .pt-header .pt-brand,
  .pt-header.is-scrolled .pt-brand {
    color: #402b22;
    font-size: 1.2rem;
  }

  .pt-header .pt-menu-toggle {
    color: #402b22;
  }

  .pt-header .pt-menu-toggle span {
    width: 22px;
    height: 1px;
    background: currentColor;
  }

  .pt-mobile-menu {
    padding-top: var(--pt-nav-total);
    color: #402b22;
    background:
      radial-gradient(circle at 100% 0%, rgba(163, 120, 68, 0.12), transparent 34%),
      #f6f1e9;
    transform: translateX(24px);
    transition:
      opacity 280ms ease,
      transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 380ms;
  }

  .pt-mobile-menu.is-open {
    transform: translateX(0);
    transition:
      opacity 280ms ease,
      transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s;
  }

  .pt-mobile-menu__inner {
    min-height: calc(100svh - var(--pt-nav-total));
    padding-block: 34px 26px;
  }

  .pt-mobile-menu__eyebrow {
    margin: 0 0 18px;
    color: #8b6542;
    font-family: var(--pt-heading, "Manrope", sans-serif);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
  }

  .pt-mobile-menu__nav {
    counter-reset: pt-mobile-link;
    border-top: 1px solid rgba(64, 43, 34, 0.18);
  }

  body .pt-mobile-menu__nav a {
    display: grid;
    padding: 17px 0 18px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    color: #402b22;
    border-bottom: 1px solid rgba(64, 43, 34, 0.18);
    font-family: var(--pt-heading, "Manrope", sans-serif) !important;
    font-size: clamp(2.15rem, 10vw, 2.85rem);
    font-weight: 500 !important;
    letter-spacing: -0.055em;
    line-height: 0.98;
    text-transform: none;
  }

  .pt-mobile-menu__nav a::before {
    color: #9a7147;
    content: "0" counter(pt-mobile-link);
    counter-increment: pt-mobile-link;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.12em;
  }

  .pt-mobile-menu__nav a::after {
    height: 1px;
    background: #a37844;
  }

  .pt-mobile-menu__account {
    display: grid;
    margin-top: 18px;
    padding: 18px 20px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    color: #fffaf3;
    background: #402b22;
    border: 0;
    border-radius: 13px;
    font-family: var(--pt-heading, "Manrope", sans-serif);
    font-size: 1.08rem;
  }

  .pt-mobile-menu__account span {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    color: #d9bd96;
    font-family: var(--pt-heading, "Manrope", sans-serif);
    font-size: 0.54rem;
    letter-spacing: 0.14em;
  }

  .pt-mobile-menu__account strong {
    color: #fffaf3;
    font-weight: 500;
    letter-spacing: -0.025em;
  }

  .pt-mobile-menu__account b {
    color: #d9bd96;
    font-family: var(--pt-heading, "Manrope", sans-serif);
    font-size: 1rem;
  }

  .pt-mobile-menu__footer {
    margin-top: auto;
    padding-top: 24px;
    color: #74655b;
    border-top: 1px solid rgba(64, 43, 34, 0.14);
  }

  .pt-mobile-menu__footer p {
    margin: 0;
    color: #74655b;
    font-family: var(--pt-heading, "Manrope", sans-serif);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.45;
  }
}

/* Policy readability guard.
   This intentionally lives at EOF so generic rich-text/theme rules cannot
   turn the dark policy panels into brown-on-brown text. */
.pt-policy-page,
.pt-policy-page .pt-policy-body,
.pt-policy-page .pt-policy-body__grid,
.pt-policy-page .pt-policy-content,
.pt-policy-page .pt-policy-content > section,
.pt-policy-page .pt-policy-summary,
.pt-policy-page .pt-policy-contact {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.pt-policy-page .pt-policy-content,
.pt-policy-page .pt-policy-content > section {
  color: #402b22 !important;
  background-color: #fffdf8 !important;
}

.pt-policy-page .pt-policy-content > section h2,
.pt-policy-page .pt-policy-content > section h3,
.pt-policy-page .pt-policy-content > section strong {
  color: #402b22 !important;
}

.pt-policy-page .pt-policy-content > section p,
.pt-policy-page .pt-policy-content > section li,
.pt-policy-page .pt-policy-content > section span:not(.pt-policy-number) {
  color: #6b574c !important;
}

.pt-policy-page .pt-policy-content > section a {
  color: #805d3e !important;
}

.pt-policy-page .pt-policy-summary {
  color: #fffaf3 !important;
  background-color: #402b22 !important;
}

.pt-policy-page .pt-policy-summary h2,
.pt-policy-page .pt-policy-summary p,
.pt-policy-page .pt-policy-summary li,
.pt-policy-page .pt-policy-summary strong {
  color: #fffaf3 !important;
}

.pt-policy-page .pt-policy-summary .pt-policy-label {
  color: #d8b680 !important;
}

.pt-policy-page .pt-policy-summary li {
  color: rgba(255, 250, 243, 0.78) !important;
}

.pt-policy-page .pt-policy-callout--strong,
.pt-policy-page .pt-policy-contact {
  color: #fffaf3 !important;
}

.pt-policy-page .pt-policy-callout--strong strong,
.pt-policy-page .pt-policy-callout--strong p,
.pt-policy-page .pt-policy-contact h2,
.pt-policy-page .pt-policy-contact a {
  color: #fffaf3 !important;
}

.pt-policy-page .pt-policy-contact p:not(.pt-policy-label) {
  color: rgba(255, 250, 243, 0.8) !important;
}

.pt-policy-page .pt-policy-contact .pt-policy-label {
  color: #f0d6ae !important;
}

.pt-policy-page .pt-policy-nav {
  border-top: 0 !important;
}

@media (max-width: 860px) {
  .pt-policy-page .pt-policy-nav {
    border: 0 !important;
    box-shadow: none !important;
  }
}

.pt-policy-page .pt-policy-summary ul {
  padding-left: 0 !important;
  list-style: none !important;
}

.pt-policy-page .pt-policy-summary li {
  position: relative !important;
  display: block !important;
  padding: 14px 0 14px 28px !important;
  list-style: none !important;
}

.pt-policy-page .pt-policy-summary li::marker {
  color: transparent !important;
  content: "" !important;
}

.pt-policy-page .pt-policy-summary li::before {
  position: absolute !important;
  top: 1.34rem !important;
  left: 4px !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  margin: 0 !important;
  background: #d8b680 !important;
  border-radius: 50% !important;
  content: "" !important;
  transform: translateY(-50%) !important;
}

/* ==========================================================================
   28. Science page — evidence-led redesign
   ========================================================================== */

.pt-sci2 {
  overflow: hidden;
  color: #402b22;
  background: #f6f1e9;
}

.pt-sci2 h1,
.pt-sci2 h2,
.pt-sci2 h3 {
  font-family: var(--pt-heading, "Manrope", sans-serif);
}

.pt-sci2 h1 em,
.pt-sci2 h2 em {
  color: #cda875;
  font-style: normal;
}

.pt-sci2-hero {
  padding-block: clamp(54px, 6vw, 84px);
  color: #fffaf3;
  background:
    radial-gradient(circle at 8% 92%, rgba(205, 168, 117, 0.14), transparent 25%),
    #07101c;
}

.pt-sci2-hero__grid {
  display: grid;
  min-height: min(680px, 72svh);
  grid-template-columns: minmax(0, 0.94fr) minmax(440px, 1.06fr);
  gap: clamp(42px, 6vw, 86px);
  align-items: center;
}

.pt-sci2-hero__copy {
  max-width: 660px;
}

.pt-sci2-hero__copy .pt-home-kicker {
  color: #cda875;
}

.pt-sci2-hero h1 {
  max-width: 10.5ch;
  margin: 0 0 26px;
  color: #fffaf3;
  font-size: clamp(3.6rem, 5.45vw, 6.15rem);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.91;
}

.pt-sci2-hero__copy > p:not(.pt-home-kicker, .pt-sci2-hero__note) {
  max-width: 61ch;
  margin-bottom: 0;
  color: rgba(255, 250, 243, 0.69);
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.75;
}

.pt-sci2-hero__actions {
  display: flex;
  margin-top: 30px;
  align-items: center;
  gap: 24px;
}

.pt-sci2-link {
  display: inline-flex;
  padding-bottom: 4px;
  align-items: center;
  gap: 12px;
  color: inherit;
  border-bottom: 1px solid currentColor;
  font-size: 0.72rem;
  font-weight: 700;
}

.pt-sci2-link span {
  color: #cda875;
  font-size: 0.95rem;
  transition: transform 180ms ease;
}

.pt-sci2-link:hover span {
  transform: translateY(2px);
}

.pt-sci2-hero__note {
  display: flex;
  margin: 29px 0 0;
  align-items: center;
  gap: 10px;
  color: rgba(255, 250, 243, 0.48);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.pt-sci2-hero__note span {
  width: 6px;
  height: 6px;
  background: #cda875;
  border-radius: 50%;
}

.pt-sci2-hero__visual {
  position: relative;
  overflow: hidden;
  height: min(610px, 66svh);
  min-height: 480px;
  background: #172331;
  border: 1px solid rgba(255, 250, 243, 0.15);
  border-radius: 14px;
}

.pt-sci2-hero__visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pt-sci2-hero__visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(7, 16, 28, 0.74));
  content: "";
  pointer-events: none;
}

.pt-sci2-hero__caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 1;
  display: flex;
  padding: 16px 18px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #fffaf3;
  background: rgba(7, 16, 28, 0.76);
  border: 1px solid rgba(255, 250, 243, 0.16);
  border-radius: 9px;
  backdrop-filter: blur(14px);
}

.pt-sci2-hero__caption span {
  color: #cda875;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pt-sci2-hero__caption strong {
  color: rgba(255, 250, 243, 0.82);
  font-size: 0.68rem;
  font-weight: 600;
  text-align: right;
}

/* .pt-sci2-strip is retired. The four-cell "method at a glance" <dl> under the
   hero was replaced by the homepage's .pt-marquee banner (see §15). Its rules —
   and the ≤760px horizontal-scroll variant — were deleted rather than left as
   dead weight. Do not re-add: the markup no longer exists. */

.pt-sci2-method,
.pt-sci2-limits,
.pt-sci2-references {
  padding-block: clamp(72px, 8vw, 118px);
}

.pt-sci2-heading {
  display: grid;
  margin-bottom: clamp(38px, 5vw, 64px);
  padding-bottom: clamp(28px, 4vw, 44px);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.48fr);
  gap: 50px;
  align-items: end;
  border-bottom: 1px solid rgba(64, 43, 34, 0.16);
}

.pt-sci2-heading h2 {
  max-width: 11ch;
  margin: 0;
  color: #402b22;
  font-size: clamp(3.25rem, 5.4vw, 5.8rem);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.91;
}

.pt-sci2-heading > p {
  max-width: 45ch;
  margin: 0 0 5px;
  color: #766257;
  font-size: 0.88rem;
  line-height: 1.72;
}

.pt-sci2-method {
  background: #f6f1e9;
}

.pt-sci2-method__layout {
  display: grid;
  grid-template-columns: minmax(400px, 1fr) minmax(0, 0.92fr);
  gap: clamp(38px, 6vw, 82px);
  align-items: stretch;
}

.pt-sci2-method__visual {
  position: relative;
  overflow: hidden;
  min-height: 610px;
  background: #e8e0d5;
  border-radius: 14px;
}

.pt-sci2-method__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pt-sci2-method__visual > span {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 10px 13px;
  color: #fffaf3;
  background: rgba(64, 43, 34, 0.84);
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pt-sci2-steps {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
  list-style: none;
  border-top: 1px solid rgba(64, 43, 34, 0.17);
}

.pt-sci2-steps li {
  display: grid;
  padding: clamp(22px, 3vw, 32px) 0;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  border-bottom: 1px solid rgba(64, 43, 34, 0.17);
}

.pt-sci2-steps li > span {
  padding-top: 5px;
  color: #a37844;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.pt-sci2-steps h3 {
  margin: 0 0 7px;
  color: #402b22;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.04em;
}

.pt-sci2-steps p {
  max-width: 49ch;
  margin: 0;
  color: #766257;
  font-size: 0.78rem;
  line-height: 1.67;
}

.pt-sci2-definition {
  display: grid;
  margin-top: clamp(32px, 5vw, 58px);
  padding: clamp(28px, 4vw, 42px);
  grid-template-columns: 0.65fr 1fr 1fr;
  gap: clamp(24px, 4vw, 54px);
  color: #fffaf3;
  background: #402b22;
  border-radius: 14px;
}

.pt-sci2-definition .pt-home-kicker {
  margin: 0;
  color: #cda875;
}

.pt-sci2-definition > div {
  padding-left: 28px;
  border-left: 1px solid rgba(255, 250, 243, 0.17);
}

.pt-sci2-definition h3 {
  margin: 0 0 8px;
  color: #fffaf3;
  font-size: 1rem;
  font-weight: 600;
}

.pt-sci2-definition > div p {
  margin: 0;
  color: rgba(255, 250, 243, 0.66);
  font-size: 0.73rem;
  line-height: 1.65;
}

.pt-sci2-evidence {
  padding-block: clamp(76px, 9vw, 130px);
  color: #fffaf3;
  background:
    radial-gradient(circle at 85% 18%, rgba(205, 168, 117, 0.12), transparent 30%),
    #07101c;
}

.pt-sci2-evidence__lead {
  display: grid;
  padding-bottom: clamp(40px, 5vw, 66px);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.48fr);
  gap: 54px;
  align-items: end;
  border-bottom: 1px solid rgba(255, 250, 243, 0.15);
}

.pt-sci2-evidence__lead .pt-home-kicker {
  grid-column: 1 / -1;
  margin-bottom: -30px;
  color: #cda875;
}

.pt-sci2-evidence__lead h2 {
  max-width: 10ch;
  margin: 0;
  color: #fffaf3;
  font-size: clamp(3.4rem, 5.7vw, 6.2rem);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.9;
}

.pt-sci2-evidence__lead > p:last-child {
  margin: 0 0 5px;
  color: rgba(255, 250, 243, 0.65);
  font-size: 0.86rem;
  line-height: 1.72;
}

.pt-sci2-evidence__result {
  display: grid;
  padding-block: clamp(42px, 6vw, 74px);
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: clamp(46px, 8vw, 110px);
  align-items: end;
  border-bottom: 1px solid rgba(255, 250, 243, 0.15);
}

.pt-sci2-evidence__number > span {
  display: block;
  max-width: 42ch;
  margin-bottom: 18px;
  color: #cda875;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.pt-sci2-evidence__number strong {
  display: flex;
  align-items: baseline;
  gap: 22px;
  color: #fffaf3;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: clamp(5.3rem, 10vw, 10rem);
  font-weight: 500;
  letter-spacing: -0.09em;
  line-height: 0.78;
}

.pt-sci2-evidence__number strong small {
  color: rgba(255, 250, 243, 0.42);
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: -0.055em;
}

.pt-sci2-evidence__number p {
  max-width: 55ch;
  margin: 24px 0 0;
  color: rgba(255, 250, 243, 0.57);
  font-size: 0.72rem;
  line-height: 1.65;
}

.pt-sci2-evidence__result dl {
  display: grid;
  margin: 0;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255, 250, 243, 0.15);
  border-left: 1px solid rgba(255, 250, 243, 0.15);
}

.pt-sci2-evidence__result dl > div {
  padding: 24px;
  border-right: 1px solid rgba(255, 250, 243, 0.15);
  border-bottom: 1px solid rgba(255, 250, 243, 0.15);
}

.pt-sci2-evidence__result dt {
  color: #cda875;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 1.6rem;
  font-weight: 500;
}

.pt-sci2-evidence__result dd {
  margin: 5px 0 0;
  color: rgba(255, 250, 243, 0.55);
  font-size: 0.62rem;
}

.pt-sci2-evidence__truth {
  display: grid;
  padding-block: clamp(42px, 6vw, 70px);
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 250, 243, 0.15);
  border: 1px solid rgba(255, 250, 243, 0.15);
}

.pt-sci2-evidence__truth > div {
  padding: clamp(28px, 4vw, 48px);
  background: #0b1725;
}

.pt-sci2-evidence__truth .pt-home-kicker {
  color: #cda875;
}

.pt-sci2-evidence__truth h3 {
  max-width: 16ch;
  margin: 0 0 16px;
  color: #fffaf3;
  font-size: clamp(1.55rem, 2.7vw, 2.45rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.03;
}

.pt-sci2-evidence__truth p:last-child {
  max-width: 54ch;
  margin: 0;
  color: rgba(255, 250, 243, 0.62);
  font-size: 0.78rem;
  line-height: 1.72;
}

.pt-sci2-study-limits {
  padding-top: clamp(44px, 6vw, 70px);
}

.pt-sci2-study-limits .pt-home-kicker {
  color: #cda875;
}

.pt-sci2-study-limits ul {
  display: grid;
  margin: 28px 0 0;
  padding: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  border-top: 1px solid rgba(255, 250, 243, 0.15);
}

.pt-sci2-study-limits li {
  min-width: 0;
  padding: 20px 18px 20px 0;
  color: rgba(255, 250, 243, 0.68);
  border-bottom: 1px solid rgba(255, 250, 243, 0.15);
  font-size: 0.67rem;
  line-height: 1.5;
}

.pt-sci2-study-limits li + li {
  padding-left: 18px;
  border-left: 1px solid rgba(255, 250, 243, 0.15);
}

.pt-sci2-study-limits li span {
  display: block;
  margin-bottom: 9px;
  color: #cda875;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.pt-sci2-study-limits > div {
  display: flex;
  margin-top: 25px;
  gap: 28px;
}

.pt-sci2-study-limits a {
  padding-bottom: 3px;
  color: #cda875;
  border-bottom: 1px solid currentColor;
  font-size: 0.7rem;
  font-weight: 700;
}

.pt-sci2-limits {
  background: #efe7dc;
}

.pt-sci2-limits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.pt-sci2-limits__grid article {
  display: flex;
  min-height: 300px;
  padding: 26px;
  flex-direction: column;
  background: #fffdf8;
  border: 1px solid rgba(64, 43, 34, 0.14);
  border-radius: 12px;
}

.pt-sci2-limits__grid article > span {
  color: #a37844;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.pt-sci2-limits__grid h3 {
  max-width: 14ch;
  margin: auto 0 13px;
  color: #402b22;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.03;
}

.pt-sci2-limits__grid p {
  margin: 0;
  color: #766257;
  font-size: 0.73rem;
  line-height: 1.64;
}

.pt-sci2-medical-note {
  display: grid;
  margin-top: 14px;
  padding: 24px 27px;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  color: #fffaf3;
  background: #402b22;
  border-radius: 12px;
}

.pt-sci2-medical-note strong {
  color: #cda875;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pt-sci2-medical-note p {
  margin: 0;
  color: rgba(255, 250, 243, 0.72);
  font-size: 0.74rem;
  line-height: 1.65;
}

.pt-sci2-references {
  background: #f6f1e9;
}

.pt-sci2-references__head {
  display: grid;
  margin-bottom: clamp(32px, 5vw, 52px);
  grid-template-columns: 1fr;
}

.pt-sci2-references__head h2 {
  max-width: 10ch;
  margin: 0;
  color: #402b22;
  font-size: clamp(3.2rem, 5vw, 5.4rem);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.92;
}

.pt-sci2-references__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pt-sci2-references__list a {
  display: flex;
  min-height: 350px;
  padding: 27px;
  flex-direction: column;
  color: #402b22;
  background: #fffdf8;
  border: 1px solid rgba(64, 43, 34, 0.14);
  border-radius: 12px;
  transition: transform 240ms ease, border-color 180ms ease, box-shadow 240ms ease;
}

.pt-sci2-references__list a:hover {
  border-color: #a37844;
  box-shadow: 0 24px 60px rgba(64, 43, 34, 0.09);
  transform: translateY(-5px);
}

.pt-sci2-references__list span {
  color: #a37844;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pt-sci2-references__list strong {
  max-width: 15ch;
  margin: 54px 0 14px;
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.pt-sci2-references__list p {
  margin: 0;
  color: #766257;
  font-size: 0.73rem;
  line-height: 1.65;
}

.pt-sci2-references__list b {
  margin-top: auto;
  padding-top: 24px;
  color: #805d3e;
  font-size: 0.68rem;
}

.pt-sci2-references__note {
  max-width: 94ch;
  margin: 28px 0 0;
  color: #817066;
  font-size: 0.66rem;
  line-height: 1.65;
}

.pt-sci2-close {
  padding-block: clamp(62px, 7vw, 96px);
  color: #fffaf3;
  background: #402b22;
}

.pt-sci2-close__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
  gap: clamp(42px, 7vw, 96px);
  align-items: center;
}

.pt-sci2-close .pt-home-kicker {
  color: #cda875;
}

.pt-sci2-close h2 {
  max-width: 10ch;
  margin: 0 0 24px;
  color: #fffaf3;
  font-size: clamp(3.2rem, 5.2vw, 5.6rem);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.91;
}

.pt-sci2-close__grid > div > p:not(.pt-home-kicker) {
  max-width: 48ch;
  color: rgba(255, 250, 243, 0.68);
  font-size: 0.83rem;
  line-height: 1.7;
}

.pt-sci2-close__grid > div > div {
  display: flex;
  margin-top: 28px;
  align-items: center;
  gap: 24px;
}

.pt-sci2-close img {
  width: 100%;
  height: 510px;
  object-fit: cover;
  border: 1px solid rgba(255, 250, 243, 0.15);
  border-radius: 14px;
}

@media (max-width: 1020px) {
  .pt-sci2-hero__grid,
  .pt-sci2-method__layout,
  .pt-sci2-evidence__result,
  .pt-sci2-close__grid {
    grid-template-columns: 1fr;
  }

  .pt-sci2-hero__grid {
    min-height: 0;
  }

  .pt-sci2-hero__copy {
    max-width: 760px;
  }

  .pt-sci2-hero__visual,
  .pt-sci2-method__visual,
  .pt-sci2-close img {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .pt-sci2-definition {
    grid-template-columns: 1fr 1fr;
  }

  .pt-sci2-definition .pt-home-kicker {
    grid-column: 1 / -1;
  }

  .pt-sci2-definition > div:first-of-type {
    padding-left: 0;
    border-left: 0;
  }

  .pt-sci2-study-limits ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pt-sci2-limits__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .pt-sci2-hero {
    padding-block: 42px 50px;
  }

  .pt-sci2-hero__grid {
    gap: 38px;
  }

  .pt-sci2-hero h1 {
    max-width: 100%;
    font-size: clamp(3.15rem, 14vw, 4.45rem);
  }

  .pt-sci2-hero__actions,
  .pt-sci2-close__grid > div > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .pt-sci2-hero__visual {
    aspect-ratio: 4 / 5;
  }

  .pt-sci2-hero__caption {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .pt-sci2-hero__caption strong {
    text-align: left;
  }

  .pt-sci2-heading,
  .pt-sci2-evidence__lead {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .pt-sci2-heading h2,
  .pt-sci2-evidence__lead h2,
  .pt-sci2-references__head h2,
  .pt-sci2-close h2 {
    max-width: 100%;
    font-size: clamp(3rem, 13vw, 4.3rem);
  }

  .pt-sci2-evidence__lead .pt-home-kicker {
    margin-bottom: 0;
  }

  .pt-sci2-method__visual,
  .pt-sci2-close img {
    aspect-ratio: 4 / 3;
  }

  .pt-sci2-definition,
  .pt-sci2-evidence__truth,
  .pt-sci2-limits__grid,
  .pt-sci2-references__list {
    grid-template-columns: 1fr;
  }

  .pt-sci2-definition > div,
  .pt-sci2-definition > div:first-of-type {
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 250, 243, 0.17);
    border-left: 0;
  }

  .pt-sci2-evidence__result {
    gap: 42px;
  }

  .pt-sci2-evidence__number strong {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    font-size: clamp(5rem, 25vw, 7.2rem);
  }

  .pt-sci2-evidence__number strong small {
    font-size: 0.33em;
  }

  .pt-sci2-study-limits ul {
    grid-template-columns: 1fr;
  }

  .pt-sci2-study-limits li,
  .pt-sci2-study-limits li + li {
    padding: 16px 0;
    border-left: 0;
  }

  .pt-sci2-study-limits li span {
    display: inline-block;
    width: 32px;
    margin: 0;
  }

  .pt-sci2-study-limits > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }

  .pt-sci2-limits__grid article {
    min-height: 245px;
  }

  .pt-sci2-medical-note {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pt-sci2-references__list a {
    min-height: 290px;
  }
}

@media (hover: none) {
  .pt-sci2-references__list a:hover {
    box-shadow: none;
    transform: none;
  }
}

/* Science page refinements: warm brand palette, compact boundary cards,
   unboxed media caption, and guaranteed CTA contrast. */
.pt-sci2-hero,
.pt-sci2-evidence {
  background-color: #402b22 !important;
}

.pt-sci2-hero {
  background-image: radial-gradient(circle at 8% 92%, rgba(205, 168, 117, 0.16), transparent 26%) !important;
}

.pt-sci2-evidence {
  background-image: radial-gradient(circle at 85% 18%, rgba(205, 168, 117, 0.14), transparent 31%) !important;
}

.pt-sci2-hero__visual {
  background: #6d5141 !important;
}

.pt-sci2-hero__caption {
  right: 22px !important;
  bottom: 20px !important;
  left: 22px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}

.pt-sci2-hero__caption strong {
  color: #fffaf3 !important;
  text-shadow: 0 2px 18px rgba(29, 17, 11, 0.65);
}

.pt-sci2-evidence__truth > div {
  background: #493126 !important;
}

.pt-sci2-limits__grid article {
  min-height: 0 !important;
  padding: 24px !important;
}

.pt-sci2-limits__grid h3 {
  margin: 34px 0 11px !important;
}

.pt-sci2-limits__grid p {
  margin: 0 !important;
}

.pt-sci2-close .pt-button--ivory {
  color: #402b22 !important;
  background: #fffaf3 !important;
  border-color: #fffaf3 !important;
}

.pt-sci2-close .pt-button--ivory:hover {
  color: #402b22 !important;
  background: #ead8bc !important;
  border-color: #ead8bc !important;
}

.pt-sci2-close .pt-sci2-link {
  color: #fffaf3 !important;
}

.pt-sci2-close img {
  object-fit: contain !important;
  background: #efe9df !important;
}

@media (max-width: 760px) {
  .pt-sci2-hero__caption {
    right: 16px !important;
    bottom: 16px !important;
    left: 16px !important;
  }

  .pt-sci2-limits__grid article {
    min-height: 0 !important;
  }

  .pt-sci2 :is(
    .pt-sci2-hero h1,
    .pt-sci2-heading h2,
    .pt-sci2-evidence__lead h2,
    .pt-sci2-references__head h2,
    .pt-sci2-close h2
  ) {
    letter-spacing: -0.055em !important;
    line-height: 0.99 !important;
  }
}

/* ==========================================================================
   29. About page — warm editorial brand story
   ========================================================================== */

.pt-about2 {
  overflow: hidden;
  color: #402b22;
  background: #f6f1e9;
}

.pt-about2 h1,
.pt-about2 h2,
.pt-about2 h3 {
  font-family: var(--pt-heading, "Manrope", sans-serif);
}

.pt-about2 :is(h1, h2) em {
  color: #cda875;
  font-style: normal;
}

.pt-about2-hero {
  padding-block: clamp(52px, 6vw, 82px);
  color: #fffaf3;
  background:
    radial-gradient(circle at 8% 90%, rgba(205, 168, 117, 0.16), transparent 27%),
    #402b22;
}

.pt-about2-hero__grid {
  display: grid;
  min-height: min(690px, 73svh);
  grid-template-columns: minmax(0, 0.88fr) minmax(450px, 1.12fr);
  gap: clamp(42px, 6vw, 88px);
  align-items: center;
}

.pt-about2-hero__copy {
  max-width: 650px;
}

.pt-about2-hero .pt-home-kicker {
  color: #d8b680;
}

.pt-about2-hero h1 {
  max-width: 10.5ch;
  margin: 0 0 25px;
  color: #fffaf3;
  font-size: clamp(3.65rem, 5.5vw, 6.2rem);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.91;
}

.pt-about2-hero__copy > p:not(.pt-home-kicker, .pt-about2-hero__note) {
  max-width: 58ch;
  margin: 0;
  color: rgba(255, 250, 243, 0.7);
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.74;
}

.pt-about2-actions {
  display: flex;
  margin-top: 30px;
  align-items: center;
  gap: 24px;
}

/* The hero sits on #402b22; the global button layer paints --pt-ink on --pt-ink,
   so the primary CTA vanished. Match the light treatment used by the closing bands. */
.pt-about2-hero .pt-button--ivory {
  color: #402b22 !important;
  background: #fffaf3 !important;
  border-color: #fffaf3 !important;
}

.pt-about2-hero .pt-button--ivory:hover,
.pt-about2-hero .pt-button--ivory:focus-visible {
  color: #402b22 !important;
  background: #ead8bc !important;
  border-color: #ead8bc !important;
}

.pt-about2-link {
  display: inline-flex;
  padding-bottom: 4px;
  align-items: center;
  gap: 12px;
  color: inherit;
  border-bottom: 1px solid currentColor;
  font-size: 0.72rem;
  font-weight: 700;
}

.pt-about2-link span {
  color: #cda875;
  font-size: 0.95rem;
  transition: transform 180ms ease;
}

.pt-about2-link:hover span {
  transform: translateX(3px);
}

.pt-about2-hero__note {
  margin: 27px 0 0 !important;
  color: rgba(255, 250, 243, 0.46) !important;
  font-size: 0.61rem !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.pt-about2-hero__visual {
  position: relative;
  overflow: hidden;
  height: min(610px, 66svh);
  min-height: 480px;
  background: #8e6d58;
  border: 1px solid rgba(255, 250, 243, 0.15);
  border-radius: 14px;
}

.pt-about2-hero__visual::after {
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, transparent, rgba(64, 43, 34, 0.75));
  content: "";
  pointer-events: none;
}

.pt-about2-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pt-about2-hero__visual > p {
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  z-index: 1;
  display: flex;
  margin: 0;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  color: #fffaf3;
}

.pt-about2-hero__visual > p span {
  color: #d8b680;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.pt-about2-hero__visual > p strong {
  max-width: 28ch;
  color: #fffaf3;
  font-size: 0.68rem;
  font-weight: 600;
  text-align: right;
}

.pt-about2-strip {
  color: #fffaf3;
  background: #8a6040;
}

.pt-about2-strip dl {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pt-about2-strip dl > div {
  padding: 24px;
  border-left: 1px solid rgba(255, 250, 243, 0.16);
}

.pt-about2-strip dl > div:last-child {
  border-right: 1px solid rgba(255, 250, 243, 0.16);
}

.pt-about2-strip dt {
  margin-bottom: 5px;
  color: #f0d6ae;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pt-about2-strip dd {
  margin: 0;
  color: rgba(255, 250, 243, 0.78);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
}

.pt-about2-story,
.pt-about2-standard,
.pt-about2-privacy,
.pt-about2-close {
  padding-block: clamp(70px, 8vw, 116px);
}

.pt-about2-story {
  background: #f6f1e9;
}

.pt-about2-story__grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(46px, 8vw, 110px);
  align-items: center;
}

.pt-about2-story__visual {
  position: relative;
  overflow: hidden;
  height: 620px;
  background: #e8e0d5;
  border-radius: 14px;
}

.pt-about2-story__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pt-about2-story__visual span {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  padding: 12px 14px;
  color: #fffaf3;
  background: rgba(64, 43, 34, 0.82);
  border-radius: 8px;
  font-size: 0.59rem;
  font-weight: 600;
  text-align: center;
  backdrop-filter: blur(10px);
}

.pt-about2-story__copy h2 {
  max-width: 10ch;
  margin: 0 0 25px;
  color: #402b22;
  font-size: clamp(3.2rem, 5vw, 5.3rem);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.92;
}

.pt-about2-story__copy blockquote {
  margin: 0 0 26px;
  padding: 20px 0 20px 24px;
  color: #805d3e;
  border-left: 2px solid #cda875;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.25;
}

.pt-about2-story__copy > p:not(.pt-home-kicker) {
  max-width: 55ch;
  margin-bottom: 15px;
  color: #766257;
  font-size: 0.82rem;
  line-height: 1.72;
}

.pt-about2-story__copy .pt-about2-link {
  margin-top: 12px;
  color: #805d3e;
}

.pt-about2-standard {
  background: #efe7dc;
}

.pt-about2-heading {
  display: grid;
  margin-bottom: clamp(36px, 5vw, 58px);
  padding-bottom: clamp(28px, 4vw, 44px);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.46fr);
  gap: 50px;
  align-items: end;
  border-bottom: 1px solid rgba(64, 43, 34, 0.16);
}

.pt-about2-heading h2 {
  max-width: 11ch;
  margin: 0;
  color: #402b22;
  font-size: clamp(3.3rem, 5.4vw, 5.8rem);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.91;
}

.pt-about2-heading > p {
  max-width: 40ch;
  margin: 0 0 5px;
  color: #766257;
  font-size: 0.86rem;
  line-height: 1.7;
}

.pt-about2-standard__grid {
  display: grid;
  gap: 12px;
}

.pt-about2-standard__grid article {
  display: grid;
  min-height: 190px;
  padding: clamp(25px, 4vw, 38px);
  grid-template-columns: 80px minmax(0, 1fr);
  gap: clamp(20px, 5vw, 76px);
  align-items: center;
  background: #fffdf8;
  border: 1px solid rgba(64, 43, 34, 0.14);
  border-radius: 12px;
}

.pt-about2-standard__grid article > span {
  color: #a37844;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.pt-about2-standard__grid article > div {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: center;
}

.pt-about2-standard__grid h3 {
  max-width: 13ch;
  margin: 0;
  color: #402b22;
  font-size: clamp(1.5rem, 2.7vw, 2.45rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1;
}

.pt-about2-standard__grid p {
  max-width: 58ch;
  margin: 0;
  color: #766257;
  font-size: 0.78rem;
  line-height: 1.7;
}

.pt-about2-privacy {
  color: #fffaf3;
  background:
    radial-gradient(circle at 82% 15%, rgba(205, 168, 117, 0.14), transparent 29%),
    #402b22;
}

.pt-about2-privacy__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
  gap: clamp(48px, 8vw, 112px);
  align-items: center;
}

.pt-about2-privacy .pt-home-kicker {
  color: #d8b680;
}

.pt-about2-privacy h2 {
  max-width: 9ch;
  margin: 0 0 24px;
  color: #fffaf3;
  font-size: clamp(3.3rem, 5.2vw, 5.6rem);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.91;
}

.pt-about2-privacy__grid > div:first-child > p:not(.pt-home-kicker) {
  max-width: 50ch;
  color: rgba(255, 250, 243, 0.68);
  font-size: 0.82rem;
  line-height: 1.72;
}

.pt-about2-privacy .pt-about2-link {
  margin-top: 12px;
  color: #fffaf3;
}

.pt-about2-privacy__details {
  border-top: 1px solid rgba(255, 250, 243, 0.16);
}

.pt-about2-privacy__details > div {
  display: grid;
  padding: 26px 0;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid rgba(255, 250, 243, 0.16);
}

.pt-about2-privacy__details span {
  padding-top: 4px;
  color: #d8b680;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.pt-about2-privacy__details p {
  margin: 0;
  color: rgba(255, 250, 243, 0.62);
  font-size: 0.75rem;
  line-height: 1.62;
}

.pt-about2-privacy__details strong {
  display: block;
  margin-bottom: 6px;
  color: #fffaf3;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.pt-about2-close {
  background: #f6f1e9;
}

.pt-about2-close__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.87fr) minmax(430px, 1.13fr);
  gap: clamp(44px, 7vw, 98px);
  align-items: center;
}

.pt-about2-close h2 {
  max-width: 10.5ch;
  margin: 0 0 24px;
  color: #402b22;
  font-size: clamp(3.3rem, 5.3vw, 5.7rem);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.91;
}

.pt-about2-close__grid > div > p:not(.pt-home-kicker) {
  max-width: 48ch;
  color: #766257;
  font-size: 0.83rem;
  line-height: 1.7;
}

.pt-about2-close .pt-about2-link {
  color: #805d3e;
}

.pt-about2-close .pt-button--ivory {
  color: #fffaf3;
  background: #402b22;
  border-color: #402b22;
}

.pt-about2-close .pt-button--ivory:hover {
  color: #fffaf3;
  background: #6f4d35;
  border-color: #6f4d35;
}

.pt-about2-close small {
  display: block;
  margin-top: 28px;
  color: #9a887d;
  font-size: 0.6rem;
}

.pt-about2-close img {
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
}

@media (max-width: 1020px) {
  .pt-about2-hero__grid,
  .pt-about2-story__grid,
  .pt-about2-privacy__grid,
  .pt-about2-close__grid {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .pt-about2-hero__copy {
    max-width: 760px;
  }

  .pt-about2-hero__visual,
  .pt-about2-story__visual,
  .pt-about2-close img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .pt-about2-standard__grid article > div {
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .pt-about2-hero {
    padding-block: 42px 50px;
  }

  .pt-about2-hero__grid {
    gap: 38px;
  }

  .pt-about2 :is(
    .pt-about2-hero h1,
    .pt-about2-story__copy h2,
    .pt-about2-heading h2,
    .pt-about2-privacy h2,
    .pt-about2-close h2
  ) {
    max-width: 100%;
    font-size: clamp(3rem, 13.5vw, 4.35rem);
    letter-spacing: -0.055em;
    line-height: 0.99;
  }

  .pt-about2-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .pt-about2-hero__visual {
    aspect-ratio: 4 / 5;
  }

  .pt-about2-hero__visual > p {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .pt-about2-hero__visual > p strong {
    text-align: left;
  }

  .pt-about2-strip {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pt-about2-strip::-webkit-scrollbar {
    display: none;
  }

  .pt-about2-strip .pt-shell {
    width: max-content;
    min-width: 100%;
    margin: 0;
  }

  .pt-about2-strip dl {
    grid-template-columns: repeat(4, 180px);
  }

  .pt-about2-strip dl > div {
    padding: 20px;
  }

  .pt-about2-story__visual,
  .pt-about2-close img {
    aspect-ratio: 4 / 3;
  }

  .pt-about2-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .pt-about2-standard__grid article {
    min-height: 0;
    padding: 24px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }

  .pt-about2-standard__grid article > span {
    padding-top: 5px;
  }

  .pt-about2-standard__grid article > div {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pt-about2-standard__grid h3 {
    max-width: 100%;
  }

  .pt-about2-privacy__grid {
    gap: 44px;
  }

  .pt-about2 :is(
    .pt-about2-hero__visual,
    .pt-about2-story__visual
  ) {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  .pt-about2 :is(
    .pt-about2-hero__visual img,
    .pt-about2-story__visual img,
    .pt-about2-close img
  ) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* About simplification and Demi story. */
.pt-about2-story__signature {
  display: flex;
  margin: 24px 0 20px !important;
  padding-top: 18px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(64, 43, 34, 0.16);
}

.pt-about2-story__signature strong {
  color: #402b22;
  font-family: var(--pt-heading, "Manrope", sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
}

.pt-about2-story__signature span {
  color: #a37844;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.pt-about2-standard__grid article {
  min-height: 146px !important;
  padding-block: 26px !important;
}

.pt-about2-care {
  display: grid;
  margin-top: 12px;
  padding: clamp(26px, 4vw, 38px);
  grid-template-columns: minmax(210px, 0.7fr) minmax(280px, 1.1fr) auto;
  gap: clamp(24px, 5vw, 68px);
  align-items: center;
  color: #fffaf3;
  background: #402b22;
  border-radius: 12px;
}

.pt-about2-care .pt-home-kicker {
  margin: 0 0 8px;
  color: #d8b680;
}

.pt-about2-care h3 {
  margin: 0;
  color: #fffaf3;
  font-size: clamp(1.45rem, 2.5vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.03;
}

.pt-about2-care > p {
  margin: 0;
  color: rgba(255, 250, 243, 0.68);
  font-size: 0.74rem;
  line-height: 1.68;
}

.pt-about2-care .pt-about2-link {
  color: #fffaf3;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .pt-about2-care {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .pt-about2-care .pt-about2-link {
    width: max-content;
    white-space: normal;
  }
}

@media (max-width: 760px) {
  .pt-about2-standard__grid article {
    min-height: 0 !important;
    padding-block: 23px !important;
  }

  .pt-about2-care {
    padding: 24px;
  }
}

/* ==========================================================================
   25a. Process card 03 reversed — MOBILE ONLY

   The three how-it-works cards are cream (#f6f1e9) on the section's dark brown.
   Card 03 flips to espresso with cream type so the last step — the one holding
   the "View the test" link — reads as the destination instead of a third
   identical block.

   Scoped to <=900px on purpose: that is the exact width where .pt-process__grid
   drops to a single column. Above it the cards sit in a 3-across row, where one
   inverted card reads as a rendering bug rather than a design choice. Desktop
   is deliberately untouched.

   Keyed off .pt-process__tail, NOT :nth-child(3). The wrapper is the same one
   §32 uses to start the cream band, so the inverted card and the band it sits on
   can never drift apart, and moving the wrapper moves both. The selectors carry
   .pt-process__grid purely for specificity: the base card rules include
   `.pt-process__grid article:hover` at (0,3,1), which would otherwise repaint
   this card cream on touch-hover.

   As of §32 the backdrop behind this card is cream, so espresso now reads as a
   deliberate inversion against it rather than a card lifted off dark brown.
   ========================================================================== */

@media (max-width: 900px) {
  /* Espresso (#503629) rather than the section's own #2b1d17: this card began
     as a lift off the dark section, and it still reads correctly now that §32
     puts cream behind it. The border was rgba(255,250,243,.2) — a light hairline
     that turned into a white halo once the backdrop went cream, so it matches
     the card instead and the existing box-shadow defines the edge. */
  .pt-home .pt-process__grid .pt-process__tail article,
  .pt-home .pt-process__grid .pt-process__tail article:hover {
    color: #fffaf3;
    background: #503629;
    border-color: #503629;
  }

  .pt-home .pt-process__grid .pt-process__tail article > div {
    color: #fffaf3;
    background: #503629;
  }

  /* "03 · Review" — gold on espresso, matching the section head's kicker. */
  .pt-home .pt-process__grid .pt-process__tail article > div > span {
    color: #e0bd8c;
  }

  .pt-home .pt-process__grid .pt-process__tail article h3 {
    color: #fffaf3;
  }

  .pt-home .pt-process__grid .pt-process__tail article > div > p {
    color: rgba(255, 250, 243, 0.74);
  }

  /* The divider above the link was rgba(64,43,34,.16) — brown on brown, i.e.
     invisible once the card inverts. */
  .pt-home .pt-process__grid .pt-process__tail article .pt-process-card__link {
    color: #fffaf3;
    border-top-color: rgba(255, 250, 243, 0.22);
  }

  .pt-home .pt-process__grid .pt-process__tail article .pt-process-card__link b,
  .pt-home .pt-process__grid .pt-process__tail article .pt-process-card__link:hover {
    color: #e0bd8c;
  }
}

/* ==========================================================================
   25b. Attribution banner inside the announcement bar

   The bar holds two messages — generic and rep-credited — and FairShare shows
   exactly one after it resolves the visitor. Both are pinned to the same grid
   cell so the bar's 32px height never changes and nothing shifts on hydration.
   ========================================================================== */

.pt-announcement > strong {
  grid-area: 1 / 1;
}

/* <fluid-affiliate-name> renders in the light DOM, so it inherits the bar's
   type. Only the weight needs lifting so the rep's name reads as the subject. */
.pt-announcement__credited fluid-affiliate-name {
  font-weight: 800;
}

/* ==========================================================================
   26. MySite — the rep's personal microsite at /my/<credit>

   Replaces Fluid's stock microsite (Eina03/Avenir, generic cards, a button
   painted from --company-color) with the PlasticTox system. Scoped entirely
   under .pt-mysite so it cannot leak into storefront pages.
   Palette: espresso #503629 · cream #f7f3ec · paper #f3f0ec · gold #a37844.
   ========================================================================== */

.pt-mysite {
  color: #503629;
  background: #f3f0ec;
}

.pt-mysite__shell {
  width: min(880px, calc(100% - 40px));
  margin: 0 auto;
}

.pt-mysite__eyebrow {
  margin: 0 0 12px;
  color: #a37844;
  font-family: var(--pt-sans, "Karla", sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- profile ------------------------------------------------------------ */

.pt-mysite__profile {
  padding-block: clamp(40px, 6vw, 72px);
  background: #f7f3ec;
  border-bottom: 1px solid rgba(80, 54, 41, 0.14);
}

.pt-mysite__identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 4vw, 38px);
  align-items: center;
}

.pt-mysite__avatar {
  display: grid;
  width: clamp(84px, 14vw, 120px);
  height: clamp(84px, 14vw, 120px);
  flex: 0 0 auto;
  place-items: center;
  object-fit: cover;
  border-radius: 50%;
}

/* Initials stand in for a missing photo. The stock page shipped a grey smiley
   SVG here, which read as broken rather than as a considered empty state. */
.pt-mysite__avatar--initials {
  color: #f7f3ec;
  background: #503629;
  font-family: var(--pt-display, "Alegreya", Georgia, serif);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1;
}

.pt-mysite__identity-copy h1 {
  margin: 0 0 12px;
  color: #20130d;
  font-family: var(--pt-display, "Alegreya", Georgia, serif);
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.pt-mysite__bio {
  max-width: 52ch;
  margin: 0;
  color: #816e64;
  font-size: 0.92rem;
  line-height: 1.62;
}

.pt-mysite__socials {
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 8px;
}

.pt-mysite__socials a {
  padding: 7px 15px;
  color: #503629;
  border: 1px solid rgba(80, 54, 41, 0.24);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.pt-mysite__socials a:hover {
  color: #f7f3ec;
  background: #503629;
  border-color: #503629;
}

/* --- primary CTA -------------------------------------------------------- */

.pt-mysite__cta {
  padding-block: clamp(36px, 5vw, 60px);
  color: #f7f3ec;
  background: #503629;
}

.pt-mysite__cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}

.pt-mysite__cta .pt-mysite__eyebrow {
  color: #e5c89f;
}

.pt-mysite__cta h2 {
  margin: 0 0 12px;
  color: #f7f3ec;
  font-family: var(--pt-display, "Alegreya", Georgia, serif);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.06;
}

.pt-mysite__cta p {
  max-width: 48ch;
  margin: 0;
  color: rgba(247, 243, 236, 0.78);
  font-size: 0.88rem;
  line-height: 1.6;
}

.pt-mysite__cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.pt-mysite__button {
  display: inline-flex;
  min-height: 52px;
  padding-inline: 30px;
  align-items: center;
  color: #20130d;
  background: #f7f3ec;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease;
}

.pt-mysite__button:hover {
  background: #e9decc;
}

.pt-mysite__link {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: rgba(247, 243, 236, 0.86);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
}

.pt-mysite__link:hover {
  color: #f7f3ec;
}

/* --- rep's custom links ------------------------------------------------- */

.pt-mysite__links {
  padding-block: clamp(34px, 4.5vw, 54px);
}

.pt-mysite__link-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 9px;
  list-style: none;
}

.pt-mysite__link-list a {
  display: flex;
  padding: 17px 22px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #503629;
  background: #f7f3ec;
  border: 1px solid rgba(80, 54, 41, 0.14);
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.pt-mysite__link-list a:hover {
  border-color: #a37844;
  transform: translateX(3px);
}

.pt-mysite__link-list span {
  color: #a37844;
}

/* --- rep's picks -------------------------------------------------------- */

.pt-mysite__cards {
  padding-block: clamp(34px, 4.5vw, 54px);
  border-top: 1px solid rgba(80, 54, 41, 0.12);
}

/* auto-fit, never a fixed column count — a rep may save 1 item or 12, and a
   hardcoded repeat() would leave dead columns (see §13 note on .pt-authority). */
.pt-mysite__card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.pt-mysite__card {
  overflow: hidden;
  background: #f7f3ec;
  border: 1px solid rgba(80, 54, 41, 0.14);
  border-radius: 14px;
}

.pt-mysite__card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.pt-mysite__card img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.pt-mysite__card-body {
  padding: 16px 18px 18px;
}

.pt-mysite__card-body h3 {
  margin: 0;
  color: #20130d;
  font-family: var(--pt-display, "Alegreya", Georgia, serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.pt-mysite__card-body strong {
  display: block;
  margin-top: 7px;
  color: #a37844;
  font-size: 0.85rem;
  font-weight: 700;
}

/* --- fine print --------------------------------------------------------- */

.pt-mysite__fineprint {
  padding-block: clamp(30px, 4vw, 46px);
  border-top: 1px solid rgba(80, 54, 41, 0.12);
}

.pt-mysite__fineprint p {
  max-width: 74ch;
  margin: 0;
  color: #816e64;
  font-size: 0.7rem;
  line-height: 1.66;
}

.pt-mysite__policies {
  display: flex;
  margin-top: 14px !important;
  flex-wrap: wrap;
  gap: 18px;
}

.pt-mysite__policies a {
  color: #503629;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .pt-mysite__identity {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .pt-mysite__cta-inner {
    grid-template-columns: 1fr;
  }

  .pt-mysite__cta-actions {
    align-self: stretch;
  }

  .pt-mysite__button {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   31. Science page — hero CTA contrast, banner, cream evidence band

   Three reported problems on /home/pages/the-science:

   1. The hero's primary CTA was invisible. `.pt-button--ivory` is painted
      --pt-ink on --pt-ink by the global button layer (organic.css §7), and the
      science hero background is that same brown (#402b22, forced by the §28
      refinement block) — so "See the method" rendered brown-on-brown. Every
      other dark band already carries an explicit light override
      (.pt-about2-hero, .pt-sci2-close, .pt-home .pt-home-hero); the science
      hero was simply the one that got missed. Same values as those.

   2. The four-cell "method at a glance" <dl> under the hero is gone — the page
      now runs the homepage marquee, so §15's selectors were widened to .pt-sci2
      rather than duplicated here.

   3. .pt-sci2-evidence was a single ~1900px unbroken brown block, and the
      "what it found / what it did not prove" pair sat in a bordered card whose
      padding-block was INSIDE the border, so the card's own background showed
      as two empty dead bands above and below the columns. The Liquid now closes
      the dark band after the 26.0 result and reopens a cream
      .pt-sci2-evidence-read band for the interpretation + study limits, and the
      card collapses to a plain two-column split with one divider.
   ========================================================================== */

.pt-sci2-hero .pt-button--ivory {
  color: #402b22 !important;
  background: #fffaf3 !important;
  border-color: #fffaf3 !important;
}

.pt-sci2-hero .pt-button--ivory:hover,
.pt-sci2-hero .pt-button--ivory:focus-visible {
  color: #402b22 !important;
  background: #ead8bc !important;
  border-color: #ead8bc !important;
}

/* The dark band now ends at the result, so its trailing rule has nothing left
   to separate — the band change itself is the separator. */
.pt-sci2-evidence__result {
  padding-bottom: 0;
  border-bottom: 0;
}

/* No padding-block here on purpose: §8's `.pt-science-page > section` (0,2,0)
   owns the vertical rhythm for every band on this page and would out-specify a
   (0,1,0) declaration anyway. Declaring one would look intentional and do
   nothing. */
.pt-sci2-evidence-read {
  color: #402b22;
  background: #f6f1e9;
}

.pt-sci2-evidence-read .pt-sci2-evidence__truth {
  display: grid;
  padding-block: 0;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  background: none;
  border: 0;
}

/* !important is required, not stylistic: §28's refinement block sets
   `.pt-sci2-evidence__truth > div { background: #493126 !important }`. */
.pt-sci2-evidence-read .pt-sci2-evidence__truth > div {
  padding: 0 !important;
  background: none !important;
}

.pt-sci2-evidence-read .pt-sci2-evidence__truth > div + div {
  padding-left: clamp(32px, 5vw, 72px) !important;
  border-left: 1px solid rgba(64, 43, 34, 0.16);
}

.pt-sci2-evidence-read .pt-home-kicker {
  color: #a37844;
}

.pt-sci2-evidence-read .pt-sci2-evidence__truth h3 {
  color: #402b22;
}

.pt-sci2-evidence-read .pt-sci2-evidence__truth p:last-child {
  color: #766257;
}

.pt-sci2-evidence-read .pt-sci2-study-limits ul {
  border-top-color: rgba(64, 43, 34, 0.16);
}

.pt-sci2-evidence-read .pt-sci2-study-limits li,
.pt-sci2-evidence-read .pt-sci2-study-limits li + li {
  color: #766257;
  border-bottom-color: rgba(64, 43, 34, 0.16);
  border-left-color: rgba(64, 43, 34, 0.16);
}

.pt-sci2-evidence-read .pt-sci2-study-limits li span {
  color: #a37844;
}

.pt-sci2-evidence-read .pt-sci2-study-limits a {
  color: #805d3e;
}

/* ==========================================================================
   32. Mobile — the cream field starts behind step 03

   Stacked on mobile, the how-it-works section ran as one tall espresso block
   that dead-ended into the cream exposure section below it. The cream now
   begins at the top of the "Open your snapshot" card instead: step 03 is an
   espresso card (§25a) sitting ON cream, and because this band uses the SAME
   #faf7f1 as .pt-sources — which follows immediately in the markup — the two
   merge into one continuous cream field with no seam between the sections.

   Desktop is untouched: .pt-process__tail is display:contents above 900px, so
   all three cards remain direct grid items in the 3-up row.
   ========================================================================== */

.pt-process__tail {
  display: contents;
}

@media (max-width: 900px) {
  /* The band carries the section's closing space now, so the section itself
     must not paint a second brown one underneath it. */
  .pt-home .pt-process {
    padding-bottom: 0;
    /* Guards the 100vw bleed below against a desktop window narrowed past this
       breakpoint, where 100vw includes the scrollbar. `clip` rather than
       `hidden` so no scroll container is created; older engines that don't
       support it simply behave as they do today. */
    overflow-x: clip;
  }

  .pt-home .pt-process__tail {
    display: block;
    width: 100vw;
    /* Full-bleed out of .pt-shell, then put the shell's own gutter back as
       padding. Both percentages resolve against the grid area (= shell width),
       so the pair is exactly symmetric and neither hardcodes the gutter — the
       card stays aligned with steps 01 and 02 whatever .pt-shell computes to. */
    margin-inline: calc(50% - 50vw);
    /* Cancels the grid's own 16px row gap, so the space above step 03 is set
       here in ONE place instead of being 16px + padding. */
    margin-top: -16px;
    padding: 16px calc(50vw - 50%) 62px;
    /* The 16px gutter above step 03 stays FULLY BROWN, and the fade to cream
       starts at the card's top edge — so the cream genuinely arrives *behind*
       the card, which is what was asked for.

       This is the key correction after several wrong attempts. Measured on the
       live page, the gap here and the gap between steps 01 and 02 were already
       identical to the pixel (16.0px each), yet this one still read as larger.
       The cause was contrast, not spacing: step 02's photo is dark, so the
       brown gutter above it is camouflaged and reads as almost no gap, while
       step 03's dashboard photo is light, which turned the identical brown
       gutter into a visible dark BAR between two light areas. Keeping the
       gutter brown and moving the ramp below it makes both gutters render the
       same way, so they finally read the same.

       Wrong versions, none of which should come back:
       - a hard cream edge flush against step 02 — cut the page in half;
       - a 168px ramp with 150px of padding — blurry, and shoved step 03 down;
       - 32px, then 16px of ramp inside the gutter — correct spacing, but still
         a pale stripe in the gutter, so it kept reading as a bigger gap.

       The first stop pair holds full opacity through the gutter (16 / 150 =
       ~11%), then the brown eases out over the remaining ~134px, which is the
       top quarter of the card. Only the 14px margins either side of the card
       and its rounded top corners actually show that fade — the card body is
       opaque espresso — so it reads as the card emerging out of the dark band
       into the cream. Stops fall fast (near-zero by 86%) because a linear
       brown-to-cream ramp lingers on a muddy tan midpoint.

       If the gutter is ever retuned, change padding-top AND the 11% stop
       together (stop % = padding ÷ background-size height), or partially-opaque
       brown creeps back into the gutter and the bar returns. Cream is #faf7f1,
       the same value .pt-sources uses immediately below, so the band and that
       section still merge into one continuous field. */
    background-color: #faf7f1;
    background-image: linear-gradient(
      180deg,
      rgba(43, 29, 23, 1) 0%,
      rgba(43, 29, 23, 1) 11%,
      rgba(43, 29, 23, 0.93) 24%,
      rgba(43, 29, 23, 0.74) 40%,
      rgba(43, 29, 23, 0.46) 57%,
      rgba(43, 29, 23, 0.2) 73%,
      rgba(43, 29, 23, 0.05) 86%,
      rgba(43, 29, 23, 0) 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 150px;
  }
}

@media (max-width: 600px) {
  /* The 16px gap is already the grid's row-gap, so it does NOT get tightened
     further here — only the closing space changes, to match what the section
     itself drops to at this width (§21). */
  .pt-home .pt-process__tail {
    padding-bottom: 56px;
  }
}

@media (max-width: 760px) {
  .pt-sci2-evidence-read .pt-sci2-evidence__truth {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .pt-sci2-evidence-read .pt-sci2-evidence__truth > div + div {
    padding-top: 30px !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(64, 43, 34, 0.16);
    border-left: 0;
  }
}