/* ==========================================================================
   PrescribedRx — components
   Each block below is one thing drawn on the design canvas, made responsive.
   ========================================================================== */

/* --------------------------------------------------------------- Buttons */

.prx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--prx-space-2);
  min-height: var(--prx-btn-h);
  padding: 0 26px;
  border: 0;
  border-radius: var(--prx-r-pill);
  font-family: inherit;
  font-size: var(--prx-text-lg);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.prx-btn svg { flex-shrink: 0; }

.prx-btn--lg { min-height: var(--prx-btn-h-lg); padding: 0 30px; font-size: var(--prx-text-xl); }
.prx-btn--sm { min-height: 44px; padding: 0 20px; font-size: var(--prx-text-md); }
.prx-btn--block { width: 100%; }

.prx-btn--primary { background: var(--prx-red); color: var(--prx-on-navy); }
.prx-btn--primary:hover,
.prx-btn--primary:focus { background: var(--prx-red-deep); color: var(--prx-on-navy); }

.prx-btn--dark { background: var(--prx-navy); color: var(--prx-on-navy); }
.prx-btn--dark:hover,
.prx-btn--dark:focus { background: var(--prx-navy-lift); color: var(--prx-on-navy); }

.prx-btn--ghost {
  background: transparent;
  color: var(--prx-ink);
  box-shadow: inset 0 0 0 1.5px var(--prx-navy);
}
.prx-btn--ghost:hover,
.prx-btn--ghost:focus { background: var(--prx-navy); color: var(--prx-on-navy); }

.prx-btn--light { background: var(--prx-surface); color: var(--prx-ink); }
.prx-btn--light:hover,
.prx-btn--light:focus { background: var(--prx-page); color: var(--prx-ink); }

/* On a phone the button pair stacks and goes full width, so the primary
   action is never a small target beside a second one. */
.prx-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

@media (max-width: 600px) {
  .prx-actions { flex-direction: column; align-items: stretch; }
  .prx-actions .prx-btn { width: 100%; }
}

/* ------------------------------------------------------- Cards and chips */

.prx-card {
  background: var(--prx-surface);
  border: 1px solid var(--prx-line);
  border-radius: var(--prx-r-xl);
  padding: var(--prx-space-7);
}

.prx-card--flush { padding: 0; overflow: hidden; }
.prx-card--raised { box-shadow: var(--prx-shadow-card); border-color: transparent; }

.prx-cardlink {
  display: flex;
  text-decoration: none;
  color: inherit;
  border-radius: var(--prx-r-xl);
}

.prx-cardlink > .prx-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--prx-space-5);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.prx-cardlink:hover > .prx-card {
  border-color: var(--prx-navy);
  box-shadow: var(--prx-shadow-rail);
}

.prx-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--prx-space-4);
  border: 1px solid var(--prx-line-soft);
  border-radius: var(--prx-r-pill);
  background: var(--prx-surface);
  font-size: 0.875rem;
  font-weight: 500;
}

.prx-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--prx-space-3);
  border-radius: var(--prx-r-pill);
  background: var(--prx-surface-alt);
  color: var(--prx-ink);
  font-size: var(--prx-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.prx-tag--solid { background: var(--prx-navy); color: var(--prx-on-navy); }
.prx-tag--alert { background: var(--prx-red-pale); color: var(--prx-red-deep); }

/* ------------------------------------------------------- Ticked list */

.prx-ticks { display: flex; flex-direction: column; gap: var(--prx-space-3); list-style: none; }

.prx-tick {
  display: flex;
  align-items: flex-start;
  gap: var(--prx-space-3);
  font-size: var(--prx-text-md);
  line-height: var(--prx-lh-base);
}

.prx-tick::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  background: var(--prx-red);
  -webkit-mask: var(--prx-tick-mask) center / contain no-repeat;
  mask: var(--prx-tick-mask) center / contain no-repeat;
}

:root {
  --prx-tick-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.prx-ticks--onnavy .prx-tick { color: var(--prx-on-navy-soft); }

/* --------------------------------------------------- Announcement + header */

.prx-announce {
  background: var(--prx-navy-deep);
  color: var(--prx-on-navy-soft);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
  padding: 10px var(--prx-space-4);
}

.prx-announce strong { color: var(--prx-on-navy); font-weight: 600; }
.prx-announce .prx-sep { color: var(--prx-on-navy-faint); margin: 0 var(--prx-space-2); }

@media (max-width: 767px) {
  .prx-announce .prx-announce-extra { display: none; }
}

.prx-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--prx-surface);
  border-bottom: 1px solid var(--prx-line);
}

.prx-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--prx-space-6);
  min-height: 76px;
  padding-block: var(--prx-space-3);
}

.prx-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.prx-logo img { max-height: 34px; width: auto; }

.prx-nav { display: flex; align-items: center; gap: var(--prx-space-6); }

/* The menu items are list items whatever wrapper WordPress gives them, so the
   marker is removed here rather than assumed away. */
.prx-nav ul,
.prx-nav li,
.prx-mobilenav li,
.prx-footer li { list-style: none; }

.prx-nav ul { display: flex; align-items: center; gap: var(--prx-space-6); }
.prx-nav li { display: inline-flex; }

.prx-nav a {
  font-size: var(--prx-text-md);
  font-weight: 500;
  text-decoration: none;
  color: var(--prx-ink);
  white-space: nowrap;
}

.prx-nav a:hover,
.prx-nav .current-menu-item > a { color: var(--prx-red); }

.prx-header-actions { display: flex; align-items: center; gap: var(--prx-space-3); }

.prx-burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--prx-navy);
  border-radius: var(--prx-r-md);
  cursor: pointer;
}

@media (max-width: 1024px) {
  .prx-nav,
  .prx-header-actions .prx-btn--ghost { display: none; }
  .prx-burger { display: inline-flex; }
}

/* The mobile panel is a details element, so it works with JavaScript off. */
.prx-mobilenav { border-bottom: 1px solid var(--prx-line); background: var(--prx-surface); }
.prx-mobilenav[hidden] { display: none; }
.prx-mobilenav ul { list-style: none; display: flex; flex-direction: column; }

.prx-mobilenav a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--prx-line);
  font-size: var(--prx-text-lg);
  font-weight: 600;
  text-decoration: none;
}

/* ------------------------------------------------------------------ Hero */

.prx-hero { padding-block: clamp(1.5rem, 0.4rem + 4.5vw, 4.5rem) var(--prx-section); }

.prx-hero-media {
  position: relative;
  border-radius: var(--prx-r-3xl);
  overflow: visible;
}

.prx-hero-media > img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--prx-r-3xl);
}

@media (min-width: 1025px) {
  .prx-hero-media > img { aspect-ratio: 4 / 5; max-height: 560px; }
}

/* The floating price card sits inside the image on a wide screen and below it
   on a phone, where overlapping would cover a face. */
.prx-hero-badge {
  background: var(--prx-surface);
  border-radius: var(--prx-r-lg);
  box-shadow: var(--prx-shadow-card);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: var(--prx-space-1);
  margin-top: -28px;
  margin-inline: var(--prx-space-4);
  position: relative;
}

@media (min-width: 1025px) {
  .prx-hero-badge {
    position: absolute;
    left: 24px;
    bottom: 24px;
    right: auto;
    margin: 0;
    max-width: 320px;
  }
}

.prx-hero-badge .prx-price { font-family: var(--prx-display); font-size: 1.875rem; font-weight: 700; }
.prx-hero-badge .prx-was { font-size: var(--prx-text-lg); font-weight: 500; color: var(--prx-muted); }

.prx-trustrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--prx-space-3) var(--prx-space-5);
  font-size: 0.875rem;
  color: var(--prx-muted);
  list-style: none;
}

.prx-trustrow .prx-tick { font-size: 0.875rem; }
.prx-trustrow .prx-tick::before { width: 16px; height: 16px; margin-top: 2px; }

/* A category or plan hero is not the homepage. Its job is to get the name, the
   promise and the buttons onto the first screen, so the type is smaller, the
   photograph is capped, and the copy is pinned to the top of the row instead of
   floating in the middle of a tall image. */

.prx-hero--compact { padding-block: clamp(0.75rem, 0.3rem + 1.6vw, 1.75rem) var(--prx-section); }

.prx-hero--compact h1.prx-display { font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3.25rem); }

.prx-hero--compact .prx-lede { font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); }

.prx-hero--compact .prx-stack-6 { gap: var(--prx-space-4); }

/* Category imagery is mostly product renders on a near-white ground. Cropping
   one to fill a fixed box cuts the bases off the bottles, so the image keeps
   its own proportions and is capped by height instead. */
.prx-hero--compact .prx-hero-media > img {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 1025px) {
  .prx-hero--compact .prx-split {
    align-items: center;
    gap: var(--prx-space-12);
  }

  /* A purchase rail is taller than the imagery beside it. Centring the pair
     drops the product shot half a screen down the page, so the rail layout
     keeps its top alignment. */
  .prx-hero--compact .prx-split--rail,
  .prx-hero--compact .prx-split--wide {
    align-items: start;
  }
}

/* Short laptop screens give up the photograph's height first. */
@media (min-width: 1025px) and (max-height: 900px) {
  .prx-hero--compact .prx-hero-media > img { max-height: 320px; }
  .prx-hero--compact h1.prx-display { font-size: clamp(1.875rem, 1.2rem + 1.8vw, 2.75rem); }
}

.prx-crumbs + .prx-hero--compact { padding-top: var(--prx-space-3); }

/* A category led by a person. The copy and the photograph share one tinted
   panel, so the face carries the mood of the category and the headline and
   buttons stay on the first screen. The photograph is cropped to fill, which
   is why each category stores where its face is. */

.prx-person-panel {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--prx-surface-alt);
  border-radius: var(--prx-r-3xl);
  overflow: hidden;
}

.prx-person-photo { order: -1; position: relative; min-height: 0; }

.prx-person-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.prx-person-copy {
  padding: var(--prx-space-7) var(--prx-space-6) var(--prx-space-8);
  align-self: center;
}

.prx-person-price { font-size: var(--prx-text-md); color: var(--prx-body); max-width: 46ch; }
.prx-person-price strong { color: var(--prx-ink); font-weight: 700; }

/* The safety notice sits on the tint, so it gets its own white ground. */
.prx-person-copy .prx-notice { background: var(--prx-surface); }

@media (min-width: 1025px) {
  .prx-person-panel {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: min(540px, calc(100vh - 220px));
  }

  .prx-person-photo { order: 0; }
  .prx-person-photo > img { position: absolute; inset: 0; aspect-ratio: auto; }

  .prx-person-copy { padding: var(--prx-space-10) var(--prx-space-12); }
}

@media (min-width: 1025px) and (max-height: 900px) {
  .prx-person-panel { min-height: 460px; }
  .prx-person-copy { padding-block: var(--prx-space-8); }
}

/* Goal cards on the homepage. A person gets a taller frame than a product
   render, because a face cropped to a letterbox reads as a mistake. */
.prx-goal-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--prx-r-md);
}

.prx-goal-photo--person { aspect-ratio: 4 / 3; }

/* Product hero with a photograph: the image leads, and the product shot sits
   on it as a white card so the page still shows what ships. */
.prx-pm-photo {
  position: relative;
  border-radius: var(--prx-r-3xl);
  overflow: hidden;
  background: var(--prx-surface-alt);
}

.prx-pm-photo > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.prx-pm-product {
  position: absolute;
  left: var(--prx-space-5);
  bottom: var(--prx-space-5);
  width: clamp(112px, 24%, 180px);
  aspect-ratio: 1;
  padding: var(--prx-space-3);
  background: var(--prx-surface);
  border-radius: var(--prx-r-xl);
  box-shadow: var(--prx-shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.prx-pm-product img { width: 100%; height: 100%; object-fit: contain; }

@media (min-width: 1025px) {
  .prx-pm-photo > img { max-height: 560px; }
}

/* The usage band puts the photograph first on a wide screen, the reverse of
   a category hero, so two tinted panels on one page do not look repeated. */
@media (min-width: 1025px) {
  .prx-person-panel--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .prx-person-panel--flip .prx-person-photo { order: -1; }
}

/* Photographs of a routine are framed on the hands, so the crop keeps the
   upper part of the frame rather than the centre. */
.prx-person-panel--flip .prx-person-photo > img { object-position: 55% 20%; }

/* A row of three photographs, in the calm layout of a good product page:
   centred two-tone headline, landscape frames, short centred captions and
   one button, with room to breathe around all of it. */
.prx-lifestyle-wrap { text-align: center; }

.prx-lifestyle-title {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  max-width: 24ch;
  margin: 0 auto var(--prx-space-12);
}

.prx-lifestyle-title span { display: block; color: var(--prx-red); }

.prx-lifestyle {
  display: grid;
  gap: var(--prx-space-8);
  grid-template-columns: 1fr;
  text-align: center;
}

@media (min-width: 700px) {
  .prx-lifestyle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.prx-lifestyle-card { margin: 0; display: flex; flex-direction: column; gap: var(--prx-space-5); }

.prx-lifestyle-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--prx-r-2xl);
}

.prx-lifestyle-card figcaption { display: flex; flex-direction: column; gap: var(--prx-space-2); padding: 0 var(--prx-space-4); }

.prx-lifestyle-card strong {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--prx-ink);
  line-height: 1.25;
}

.prx-lifestyle-card span { font-size: var(--prx-text-md); line-height: 1.55; color: var(--prx-muted); max-width: 34ch; margin: 0 auto; }

.prx-lifestyle-cta { margin-top: var(--prx-space-12); }

/* Goal tiles: a photograph fills each tile and a white card sits on it with
   the name, the price and an arrow. The first two goals get the wide row. */
.prx-goal-grid {
  display: grid;
  gap: var(--prx-space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .prx-goal-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .prx-goal-tile { grid-column: span 2; }
  .prx-goal-tile--lg { grid-column: span 3; }
  .prx-goal-quiz { grid-column: 1 / -1; }
}

.prx-goal-tile {
  position: relative;
  display: block;
  min-height: 400px;
  border-radius: var(--prx-r-2xl);
  overflow: hidden;
  background: var(--prx-surface-alt);
  text-decoration: none;
  color: inherit;
}

.prx-goal-tile--lg { min-height: 480px; }

/* The photograph is anchored to the bottom of the tile and may be enlarged past
   it, so a face that would sit behind the caption card can be lifted clear.
   --prx-tile-zoom is 100% by default, which is exactly the old behaviour; a
   tile sets its own only when its photograph needs it. */
.prx-goal-tile-img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  height: var(--prx-tile-zoom, 100%);
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* The couple in this shot are close together and low in the frame: her face
   lands exactly where the card sits. Enlarging by a sixth lifts it clear
   without cropping his. */
.prx-goal-tile--sexual-health { --prx-tile-zoom: 118%; }

.prx-goal-tile:hover .prx-goal-tile-img { transform: scale(1.03); }

.prx-goal-tile-card {
  position: absolute;
  left: var(--prx-space-4);
  right: var(--prx-space-4);
  bottom: var(--prx-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--prx-space-4);
  padding: var(--prx-space-3) var(--prx-space-3) var(--prx-space-3) var(--prx-space-5);
  background: var(--prx-surface);
  border-radius: var(--prx-r-lg);
  box-shadow: var(--prx-shadow-card);
}

.prx-goal-tile-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prx-goal-tile-name { font-family: var(--prx-display); font-size: 1.5rem; font-weight: 700; color: var(--prx-ink); line-height: 1.1; }
/* The photograph carries the tile; the description would cover half of it,
   and the category page says it anyway. */
.prx-goal-tile-desc { display: none; }
.prx-goal-tile-price { font-size: 0.875rem; font-weight: 600; color: var(--prx-ink); margin-top: 2px; }

.prx-goal-tile-go {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--prx-r-pill);
  background: var(--prx-red);
  color: var(--prx-on-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.prx-goal-tile:hover .prx-goal-tile-go { background: var(--prx-red-deep); }

.prx-goal-quiz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--prx-space-5);
  padding: var(--prx-space-6) var(--prx-space-8);
  background: var(--prx-navy);
  color: var(--prx-on-navy);
  border-radius: var(--prx-r-2xl);
  text-decoration: none;
}

.prx-goal-quiz-text { display: flex; flex-wrap: wrap; align-items: center; gap: var(--prx-space-3) var(--prx-space-6); }
.prx-goal-quiz-title { font-family: var(--prx-display); font-size: 1.625rem; font-weight: 700; line-height: 1.15; color: var(--prx-on-navy); }

/* Spotlight bands on the homepage. */
.prx-spot-title { font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); line-height: 1.04; }

@media (min-width: 1025px) {
  .prx-spot { min-height: 520px; }
  .prx-spot--flip .prx-person-photo > img { object-position: center 35%; }
}

.prx-spot-cards {
  display: grid;
  gap: var(--prx-space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .prx-spot-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.prx-spot-card {
  display: flex;
  align-items: center;
  gap: var(--prx-space-5);
  padding: var(--prx-space-5);
  background: var(--prx-surface);
  border: 1px solid var(--prx-line);
  border-radius: var(--prx-r-xl);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.prx-spot-card:hover { border-color: var(--prx-navy); box-shadow: var(--prx-shadow-rail); }

.prx-spot-thumb {
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  border-radius: var(--prx-r-md);
  background: var(--prx-page);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prx-spot-thumb img { width: 100%; height: 100%; object-fit: contain; }
.prx-spot-name { font-size: 1.1875rem; font-weight: 600; color: var(--prx-ink); line-height: 1.25; }
.prx-spot-price { font-size: var(--prx-text-md); color: var(--prx-body); }
.prx-spot-price strong { font-family: var(--prx-display); font-size: 1.375rem; color: var(--prx-ink); }

/* The homepage photograph is a portrait cropped to a landscape box on a wide
   screen, so the crop sits high enough to keep both heads in frame. */
.prx-hero--home .prx-hero-media > img { object-position: center 12%; }

/* The homepage hero stays the largest type on the site, but capped so the
   headline, the promise, the buttons and the photograph share one screen. */

.prx-hero--home { padding-block: clamp(1rem, 0.4rem + 2vw, 2.5rem) var(--prx-section); }

.prx-hero--home h1.prx-display { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4rem); }

.prx-hero--home .prx-hero-media > img { max-height: 460px; }

@media (min-width: 1025px) and (max-height: 900px) {
  .prx-hero--home h1.prx-display { font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.25rem); }
  .prx-hero--home .prx-hero-media > img { max-height: 380px; }
  .prx-hero--home .prx-stack-7 { gap: var(--prx-space-5); }
}

/* ------------------------------------------------------------ Proof strip */

.prx-proof {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--prx-space-6);
  flex-wrap: wrap;
  border-block: 1px solid var(--prx-line);
  padding-block: 22px;
  font-size: 0.875rem;
  color: var(--prx-muted);
}

.prx-proof-logos { display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); flex-wrap: wrap; }

.prx-proof-logos span {
  font-family: var(--prx-display);
  font-size: 1.375rem;
  color: #8593A6;
}

/* ------------------------------------------------------------ Price band */

.prx-band {
  background: var(--prx-navy);
  color: var(--prx-on-navy);
  border-radius: var(--prx-r-2xl);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  display: grid;
  gap: var(--prx-space-5);
}

@media (min-width: 1025px) {
  .prx-band { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--prx-space-14); align-items: center; }
}

.prx-band .prx-display,
.prx-band h2,
.prx-band h3 { color: var(--prx-on-navy); }

.prx-band-figure {
  font-family: var(--prx-display);
  font-size: var(--prx-price);
  font-weight: 800;
  color: var(--prx-on-navy);
  line-height: 1;
}

.prx-band-unit { font-size: var(--prx-text-lg); color: var(--prx-on-navy-muted); }
.prx-band-charge { font-size: var(--prx-text-xl); font-weight: 600; color: var(--prx-on-navy); }
.prx-band-note { font-size: var(--prx-text-sm); line-height: var(--prx-lh-base); color: var(--prx-on-navy-muted); }
.prx-band-rule { height: 1px; background: var(--prx-on-navy-rule); }

/* ------------------------------------------------- Plan page layout */

/* Media and the page's own explanation share the left column; the rail holds
   the right one and sticks as you read. On a phone the three stack in DOM
   order — image, price, then the detail — so the offer is never below the
   explanation. */
.prx-product-grid {
  display: grid;
  gap: var(--prx-space-7);
}

@media (min-width: 1025px) {
  .prx-product-grid {
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-areas:
      "media rail"
      "detail rail";
    /* The rail spans both rows, and a spanning item inflates every row it
       touches. Pinning the first row to its content stops the image card
       growing a few hundred pixels of empty space beneath it. */
    grid-template-rows: auto 1fr;
    column-gap: var(--prx-space-12);
    row-gap: var(--prx-space-12);
    align-items: start;
  }

  .prx-product-media  { grid-area: media; }
  .prx-rail           { grid-area: rail; }
  .prx-product-detail { grid-area: detail; }

  /* Four steps in a column this width wrap three-and-one. Two by two fills
     the row evenly and leaves no orphan. */
  .prx-product-detail .prx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------- Purchase rail (PDP) */

.prx-rail {
  background: var(--prx-surface);
  border: 1px solid var(--prx-line);
  border-radius: var(--prx-r-2xl);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--prx-space-5);
}

@media (min-width: 1025px) {
  .prx-rail { position: sticky; top: 100px; }
}

/* The two-step sequence: the panel you pay for today, then the plan that only
   happens if a provider prescribes. The dashed border carries that meaning. */
.prx-step {
  display: flex;
  align-items: flex-start;
  gap: var(--prx-space-3);
  padding: var(--prx-space-4);
  border-radius: var(--prx-r-lg);
  background: var(--prx-surface);
  border: 2px solid var(--prx-navy);
}

.prx-step--later {
  border: 1px dashed var(--prx-line-dash);
  background: var(--prx-page);
  color: var(--prx-muted);
}

.prx-step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--prx-r-pill);
  background: var(--prx-red);
  color: var(--prx-on-navy);
  font-size: var(--prx-text-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prx-step--later .prx-step-num { background: var(--prx-on-navy-muted); }

.prx-step-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prx-step-name { font-size: var(--prx-text-lg); font-weight: 600; }
.prx-step-note { font-size: var(--prx-text-sm); line-height: 1.45; color: var(--prx-muted); }

.prx-step-price {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}

.prx-step-price b { font-size: 1.125rem; font-weight: 700; }
.prx-step-price s { font-size: var(--prx-text-xs); color: var(--prx-faint); }
.prx-step-price small { font-size: var(--prx-text-xs); color: var(--prx-faint); }

.prx-today {
  background: var(--prx-page);
  border-radius: var(--prx-r-lg);
  padding: var(--prx-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--prx-space-3);
}

.prx-today-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--prx-space-4); }
.prx-today-row b { font-size: 0.875rem; font-weight: 600; }
.prx-today-row .prx-price { font-family: var(--prx-display); font-size: 2rem; font-weight: 700; }

/* ------------------------------------------------------------ Step cards */

.prx-steps { display: grid; gap: var(--prx-space-3); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

.prx-stepcard {
  background: var(--prx-surface);
  border: 1px solid var(--prx-line);
  border-radius: var(--prx-r-lg);
  padding: var(--prx-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--prx-space-2);
}

.prx-stepcard-num {
  font-family: var(--prx-display);
  font-size: 1.75rem;
  color: var(--prx-red);
  line-height: 1;
}

.prx-stepcard-name { font-size: var(--prx-text-lg); font-weight: 600; }
.prx-stepcard-note { font-size: var(--prx-text-sm); line-height: 1.45; color: var(--prx-muted); }

/* ------------------------------------------------------- Not-for list */

/* The same list shape as a tick, with the mark inverted, so the two columns
   read as a pair rather than as two unrelated boxes. */
.prx-tick--no::before {
  background: var(--prx-muted);
  -webkit-mask-image: var(--prx-cross-mask);
  mask-image: var(--prx-cross-mask);
}

:root {
  --prx-cross-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- People band */

.prx-people { margin: 0; display: flex; flex-direction: column; gap: var(--prx-space-3); }

.prx-people img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 35%;
  border-radius: var(--prx-r-2xl);
}

@media (max-width: 767px) {
  .prx-people img { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------ Objections at the button */

/* Answering the three doubts that block a purchase, where the purchase is
   actually being decided. Visually quieter than the rail's own content so it
   reads as reassurance rather than a second pitch. */
.prx-objections {
  display: flex;
  flex-direction: column;
  gap: var(--prx-space-2);
  padding-top: var(--prx-space-4);
  border-top: 1px solid var(--prx-line);
}

.prx-objection { border-bottom: 1px solid var(--prx-line); }
.prx-objection:last-of-type { border-bottom: 0; }

.prx-objection summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--prx-space-3);
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--prx-text-md);
  font-weight: 600;
  color: var(--prx-ink);
}

.prx-objection summary::-webkit-details-marker { display: none; }

.prx-objection summary::after {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: var(--prx-muted);
  -webkit-mask: var(--prx-plus-mask) center / contain no-repeat;
  mask: var(--prx-plus-mask) center / contain no-repeat;
  transition: transform 0.15s ease;
}

.prx-objection[open] summary::after { transform: rotate(45deg); }

.prx-objection p {
  padding-bottom: var(--prx-space-3);
  font-size: var(--prx-text-sm);
  line-height: 1.55;
  color: var(--prx-muted);
}

/* ------------------------------------------------------------- Timeline */

/* A vertical spine with a node per step. The point is the left column: real
   timings, so the reader knows when they get the thing they came for. */
.prx-timeline {
  list-style: none;
  display: flex;
  flex-direction: column;
  position: relative;
}

.prx-timeline-item {
  display: grid;
  grid-template-columns: minmax(84px, 128px) 1fr;
  gap: var(--prx-space-5);
  padding: 0 0 var(--prx-space-6) var(--prx-space-6);
  position: relative;
  border-left: 2px solid var(--prx-line);
}

.prx-timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }

.prx-timeline-item::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: var(--prx-r-pill);
  background: var(--prx-red);
  box-shadow: 0 0 0 4px var(--prx-page);
}

.prx-timeline-when {
  font-size: var(--prx-text-md);
  font-weight: 700;
  color: var(--prx-ink);
  letter-spacing: 0.02em;
}

.prx-timeline-what {
  font-size: var(--prx-text-md);
  line-height: var(--prx-lh-base);
  color: var(--prx-muted);
}

@media (max-width: 600px) {
  .prx-timeline-item { grid-template-columns: 1fr; gap: var(--prx-space-1); }
}

/* --------------------------------------------------------- Testimonials */

.prx-quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--prx-space-5);
  justify-content: space-between;
}

.prx-quote blockquote {
  margin: 0;
  font-size: var(--prx-text-lg);
  line-height: 1.6;
  color: var(--prx-body);
}

.prx-quote blockquote::before { content: '\201C'; }
.prx-quote blockquote::after  { content: '\201D'; }

.prx-quote figcaption { display: flex; flex-direction: column; gap: 2px; }
.prx-quote-name { font-size: var(--prx-text-md); font-weight: 600; color: var(--prx-ink); }
.prx-quote-plan { font-size: var(--prx-text-sm); color: var(--prx-faint); }

/* --------------------------------------------------- Compounding notice */

.prx-notice {
  background: var(--prx-surface);
  border: 1px solid var(--prx-line);
  border-radius: var(--prx-r-md);
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: var(--prx-space-3);
  font-size: var(--prx-text-xs);
  line-height: var(--prx-lh-base);
  color: var(--prx-muted);
}

.prx-notice svg { flex-shrink: 0; margin-top: 2px; }
.prx-notice a { font-weight: 600; color: var(--prx-ink); text-decoration: underline; }

/* ------------------------------------------------------------- Care team */

.prx-team { display: grid; gap: var(--prx-space-5); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }

.prx-member { display: flex; flex-direction: column; gap: var(--prx-space-3); }

.prx-member img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--prx-r-lg);
}

.prx-member-name { font-size: var(--prx-text-lg); font-weight: 600; }
.prx-member-role { font-size: var(--prx-text-sm); color: var(--prx-muted); line-height: 1.45; }

@media (max-width: 767px) {
  .prx-team--compact { display: flex; gap: var(--prx-space-4); overflow-x: auto; padding-bottom: var(--prx-space-2); scroll-snap-type: x mandatory; }
  .prx-team--compact .prx-member { flex: 0 0 148px; scroll-snap-align: start; }
}

/* ---------------------------------------------------------- Cost table */

.prx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.prx-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--prx-surface);
  font-size: var(--prx-text-md);
  line-height: 1.4;
  color: var(--prx-body);
}

.prx-table th,
.prx-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--prx-line);
}

.prx-table thead th {
  border-top: 0;
  color: var(--prx-ink);
  font-weight: 700;
}

.prx-table tbody th { font-weight: 600; color: var(--prx-ink); }
.prx-table tbody tr td:first-of-type { font-weight: 600; color: var(--prx-ink); }

/* On a phone the comparison becomes one card per competitor. */
.prx-compare-cards { display: grid; gap: var(--prx-space-3); }

.prx-compare-card { background: var(--prx-surface); border: 1px solid var(--prx-line); border-radius: var(--prx-r-lg); padding: var(--prx-space-4); }
.prx-compare-card h3 { font-size: var(--prx-text-lg); font-weight: 700; padding-bottom: var(--prx-space-2); }
.prx-compare-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--prx-space-4); padding: 9px 0; border-top: 1px solid var(--prx-line); }
.prx-compare-row dt { font-size: var(--prx-text-sm); font-weight: 600; color: var(--prx-muted); flex-shrink: 0; }
.prx-compare-row dd { margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--prx-body); text-align: right; }

/* ------------------------------------------------------------------ FAQ */

.prx-faq { display: flex; flex-direction: column; }

.prx-faq details { border-top: 1px solid var(--prx-line); }
.prx-faq details:last-of-type { border-bottom: 1px solid var(--prx-line); }

.prx-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--prx-space-4);
  padding: var(--prx-space-5) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--prx-text-xl);
  font-weight: 600;
  color: var(--prx-ink);
}

.prx-faq summary::-webkit-details-marker { display: none; }

.prx-faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--prx-navy);
  -webkit-mask: var(--prx-plus-mask) center / contain no-repeat;
  mask: var(--prx-plus-mask) center / contain no-repeat;
  transition: transform 0.15s ease;
}

.prx-faq details[open] summary::after { transform: rotate(45deg); }

:root {
  --prx-plus-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

.prx-faq-answer { padding-bottom: var(--prx-space-5); font-size: var(--prx-text-lg); line-height: 1.6; color: var(--prx-muted); max-width: 70ch; }

/* ----------------------------------------------------------------- Prose */

.prx-prose { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.prx-prose p,
.prx-prose li { font-size: var(--prx-prose); line-height: var(--prx-lh-prose); color: var(--prx-body); }
.prx-prose h2 { font-family: var(--prx-display); font-size: var(--prx-h3); line-height: 1.12; letter-spacing: -0.02em; color: var(--prx-ink); }
.prx-prose h3 { font-size: 1.375rem; line-height: 1.3; color: var(--prx-ink); }
.prx-prose ul,
.prx-prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: var(--prx-space-2); }
.prx-prose a { color: var(--prx-ink); text-decoration: underline; text-decoration-color: var(--prx-red); text-underline-offset: 3px; }
.prx-prose strong { color: var(--prx-ink); }
.prx-prose img { border-radius: var(--prx-r-md); }

/* -------------------------------------------------------- Sticky phone CTA */

.prx-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--prx-space-4);
  padding: 12px var(--prx-space-4) calc(12px + env(safe-area-inset-bottom));
  background: var(--prx-surface);
  border-top: 1px solid var(--prx-line);
  box-shadow: var(--prx-shadow-sticky);
}

.prx-sticky-price { display: flex; flex-direction: column; line-height: 1.25; }
.prx-sticky-price b { font-size: var(--prx-text-lg); font-weight: 700; }
.prx-sticky-price small { font-size: var(--prx-text-xs); color: var(--prx-muted); }

@media (max-width: 1024px) {
  .prx-has-sticky .prx-sticky { display: flex; }
  .prx-has-sticky .prx-footer { padding-bottom: 96px; }
}

/* ---------------------------------------------------------------- Footer */

.prx-footer {
  background: var(--prx-navy-deep);
  color: var(--prx-on-navy-soft);
  padding-block: var(--prx-section) var(--prx-space-10);
  font-size: 0.875rem;
  line-height: var(--prx-lh-base);
}

.prx-footer a { color: var(--prx-on-navy-soft); text-decoration: none; }
.prx-footer a:hover { color: var(--prx-on-navy); text-decoration: underline; }

.prx-footer-cols,
.prx-footer-top { display: grid; gap: var(--prx-space-10); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }

@media (min-width: 1025px) {
  .prx-footer-top { grid-template-columns: 1.4fr repeat(4, 1fr); }
}

.prx-footer-logo {
  display: inline-flex;
  font-family: var(--prx-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--prx-on-navy);
  text-decoration: none;
}

.prx-footer-logo img { max-height: 34px; width: auto; filter: brightness(0) invert(1); }

.prx-footer .prx-social { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--prx-space-4); list-style: none; }
.prx-footer .prx-social a { font-size: var(--prx-text-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

.prx-newsletter { display: flex; gap: var(--prx-space-2); margin-top: var(--prx-space-3); flex-wrap: wrap; }

.prx-newsletter input {
  flex: 1 1 140px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--prx-on-navy-rule);
  border-radius: var(--prx-r-md);
  background: rgba(255, 255, 255, 0.08);
  color: var(--prx-on-navy);
  font-size: var(--prx-text-md);
}

.prx-newsletter input::placeholder { color: var(--prx-on-navy-muted); }

.prx-footer .prx-footer-policies {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--prx-space-2) var(--prx-space-5);
  list-style: none;
  font-size: var(--prx-text-sm);
}

.prx-footer .prx-footer-badges {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--prx-space-6);
  list-style: none;
  margin-top: var(--prx-space-2);
}

.prx-footer .prx-footer-badges > li { display: flex; align-items: center; flex: 0 0 auto; }
.prx-footer .prx-footer-badges .prx-badge { display: inline-flex; align-items: center; }

/* A definite height, not a maximum: a badge whose image has not loaded yet has
   no intrinsic size to fall back on, and inside a flex row that resolves to
   zero. Stating the height keeps the space reserved either way. */
.prx-footer .prx-footer-badges img { height: 56px; width: auto; max-width: 100%; flex: 0 0 auto; }

/* A type mark rather than a badge image, matching the live footer. */
.prx-mark {
  font-size: var(--prx-text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--prx-on-navy-muted);
  line-height: 1.3;
  display: inline-block;
  max-width: 9em;
}

.prx-footer h2,
.prx-footer h3 { font-size: var(--prx-text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--prx-on-navy-muted); margin-bottom: var(--prx-space-4); }

.prx-footer ul { list-style: none; display: flex; flex-direction: column; gap: var(--prx-space-3); }

.prx-footer-legal {
  margin-top: var(--prx-section);
  padding-top: var(--prx-space-6);
  border-top: 1px solid var(--prx-on-navy-rule);
  display: flex;
  flex-direction: column;
  gap: var(--prx-space-4);
  font-size: var(--prx-text-sm);
  color: var(--prx-on-navy-muted);
}

.prx-footer-legal a { text-decoration: underline; }

/* ------------------------------------------------------------ Breadcrumb */

.prx-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--prx-space-2);
  padding-block: var(--prx-space-4) 0;
  font-size: 0.875rem;
  color: var(--prx-muted);
}

.prx-crumbs a { color: var(--prx-muted); text-decoration: none; }
.prx-crumbs a:hover { color: var(--prx-red); }
.prx-crumbs [aria-current] { color: var(--prx-ink); }

/* ==========================================================================
   Premium layer
   A calmer, people-led feel: a light serif for headlines with one italic
   accent, a white page with soft tinted panels instead of bordered cards,
   more air between sections, and red kept for the buttons that act.
   Everything that changes the look sits here, so it can be tuned in one place.
   ========================================================================== */

:root {
  --prx-page: #FFFFFF;
  --prx-section: clamp(4rem, 2rem + 8vw, 8.5rem);   /* 64 -> 136 */
  --prx-track-display: -0.012em;
  --prx-lh-tight: 1.04;
  --prx-h1: clamp(2.5rem, 1.35rem + 4.6vw, 6rem);
  --prx-h2: clamp(2.125rem, 1.45rem + 2.8vw, 4.125rem);
  --prx-h3: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  --prx-h4: clamp(1.5rem, 1.3rem + 0.8vw, 2.125rem);
  --prx-price: clamp(2rem, 1.6rem + 1.6vw, 3.25rem);
}

body { background: var(--prx-page); }

/* One weight for the serif everywhere; a synthesised bold looks cheap. */
body .prx-display,
body h1.prx-display,
body .prx-hero-badge .prx-price,
body .prx-goal-tile-name,
body .prx-goal-quiz-title,
body .prx-spot-price strong,
body .prx-band-figure,
body .prx-today-row .prx-price,
body .prx-stepcard-num,
body .prx-prose h2,
body .prx-price-week,
body .prx-price-week strong,
body .related.products > h2,
body .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-weight: 400;
  letter-spacing: var(--prx-track-display);
}

body .prx-hero--home h1.prx-display { font-size: clamp(2.75rem, 1.6rem + 4.2vw, 5.5rem); }
body .prx-hero--compact h1.prx-display { font-size: clamp(2.25rem, 1.4rem + 3vw, 4.25rem); }
@media (min-width: 1025px) and (max-height: 900px) {
  body .prx-hero--home h1.prx-display { font-size: clamp(2.5rem, 1.5rem + 3vw, 4.25rem); }
  body .prx-hero--compact h1.prx-display { font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem); }
}

body .prx-goal-tile-name { font-size: 1.75rem; }
body .prx-goal-quiz-title { font-size: 2rem; }

/* The wordmark stays in the brand face. */
body .prx-footer-logo { font-family: var(--prx-wordmark); font-weight: 700; }

/* The accent word in a headline: italic and blue, the way a magazine would,
   instead of a second red line competing with the button. */
body .prx-display span[style*="--prx-red"],
body .prx-lifestyle-title span {
  color: var(--prx-accent-ink) !important;
  font-style: italic;
}

/* Section labels whisper rather than shout. */
body .prx-eyebrow {
  color: var(--prx-faint);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
}
body .prx-eyebrow[style*="#FFB4AE"],
body .prx-eyebrow--onnavy { color: var(--prx-on-navy-muted) !important; }

/* Ticks in navy: red belongs to the buttons. */
body .prx-tick::before { background: var(--prx-navy); }
body .prx-ticks--onnavy .prx-tick::before { background: var(--prx-on-navy-soft); }

/* Soft panels, no hairlines. */
body .prx-card {
  background: var(--prx-tint);
  border-color: transparent;
}
body .prx-cardlink:hover > .prx-card { border-color: transparent; box-shadow: none; background: #EAF0F6; }
body .prx-person-panel { background: var(--prx-tint); border-radius: 32px; }
body .prx-spot-card { background: var(--prx-tint); border-color: transparent; }
body a.prx-spot-card:hover { border-color: transparent; background: #EAF0F6; box-shadow: none; }
body .prx-spot-thumb { background: #FFFFFF; }
body .prx-goal-tile { border-radius: 28px; }
body .prx-lifestyle-card img { border-radius: 28px; }

/* The buy box keeps a white face and a single soft shadow on the white page. */
body .prx-rail {
  background: #FFFFFF;
  border: 1px solid #E7ECF2;
  box-shadow: 0 24px 60px rgba(0, 50, 102, 0.08);
  border-radius: 28px;
}

/* The product shots are already studio images on their own coloured ground, so
   a tinted panel behind them reads as a box inside a box. The card keeps its
   shape and spacing and loses the fill. */
body .prx-product-media > .prx-card { background: transparent; border: 0; box-shadow: none; }

/* Longer, quieter body copy. */
body .prx-lede { color: var(--prx-muted); line-height: 1.6; }

/* The text wordmark in the header keeps the brand face, not the headline serif. */
body .prx-logo a { font-family: var(--prx-wordmark) !important; font-weight: 700 !important; }

/* ── Proof sections: navy panel, lab cards, side effects, comparison ── */
body .prx-levels h2 span,
body .prx-sfx h2 span,
body .prx-labs-head h2 span,
body .prx-cmp-title span { font-style: italic; color: var(--prx-accent-ink); }

.prx-levels {
  display: grid; gap: var(--prx-space-10); align-items: center;
  background: var(--prx-navy); color: #fff; border-radius: 32px;
  padding: clamp(2rem, 1rem + 4vw, 4.5rem);
}
@media (min-width: 900px) { .prx-levels { grid-template-columns: 1fr 1.1fr; gap: var(--prx-space-16); } }
body .prx-levels h2 { color: #fff; font-size: var(--prx-h2); line-height: 1.05; margin: 0; }
body .prx-levels h2 span { color: #9CC2F0; }
.prx-levels-lede { color: rgba(255,255,255,.78); font-size: 1.0625rem; line-height: 1.6; margin: var(--prx-space-5) 0 0; max-width: 46ch; }
.prx-levels-points { list-style: none; padding: 0; margin: var(--prx-space-8) 0 0; display: grid; gap: var(--prx-space-4); }
.prx-levels-points li { position: relative; padding-left: 34px; font-size: 1rem; line-height: 1.5; color: #fff; }
.prx-levels-points li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(156,194,240,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CC2F0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat;
}
.prx-levels-chart { margin: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 24px; padding: var(--prx-space-6); }
.prx-levels-chart figcaption { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: var(--prx-space-4); }
.prx-levels-chart svg { display: block; width: 100%; height: auto; }
.prx-levels-chart .band { fill: rgba(156,194,240,.14); }
.prx-levels-chart .band-label { fill: rgba(255,255,255,.55); font-size: 12px; }
.prx-levels-chart .line { fill: none; stroke: #fff; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.prx-levels-chart .tick { stroke: rgba(255,255,255,.35); stroke-width: 1.5; }
.prx-levels-chart .axis { fill: rgba(255,255,255,.55); font-size: 12px; }
.prx-levels-fine { font-size: .75rem; line-height: 1.5; color: rgba(255,255,255,.55); margin: var(--prx-space-4) 0 0; }

/* Lab cards */
.prx-labs-head { text-align: center; max-width: 760px; margin: 0 auto var(--prx-space-12); }
body .prx-labs-head h2 { font-size: var(--prx-h2); margin: 0; }
.prx-labs-head p { color: var(--prx-muted); font-size: 1.0625rem; line-height: 1.6; margin: var(--prx-space-4) auto 0; max-width: 56ch; }
.prx-labs { display: grid; gap: var(--prx-space-6); max-width: 960px; margin: 0 auto; }
@media (min-width: 760px) { .prx-labs { grid-template-columns: 1fr 1fr; } }
.prx-lab { background: var(--prx-tint); border-radius: 28px; padding: var(--prx-space-8); }
.prx-lab--alt { background: #fff; box-shadow: 0 24px 60px rgba(0,50,102,.10); border: 1px solid #E7ECF2; }
.prx-lab-top { display: flex; justify-content: space-between; align-items: center; gap: var(--prx-space-3); }
.prx-lab-title { font-weight: 600; color: var(--prx-ink); font-size: 1.0625rem; }
.prx-lab-tag { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--prx-muted); background: rgba(0,50,102,.06); border-radius: 999px; padding: 4px 10px; }
.prx-lab-marker { margin: var(--prx-space-6) 0 0; color: var(--prx-muted); font-size: var(--prx-text-md); }
.prx-lab-value { margin: var(--prx-space-1) 0 0; color: var(--prx-ink); }
.prx-lab-value strong { font-family: var(--prx-display); font-weight: 400; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: 1; letter-spacing: -.01em; }
.prx-lab-value span { font-size: 1rem; color: var(--prx-muted); }
.prx-lab-bar { position: relative; height: 10px; border-radius: 999px; background: #DCE4EE; margin-top: var(--prx-space-8); }
.prx-lab-bar .range { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: #9CC2F0; }
.prx-lab-bar b { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--prx-navy); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0,50,102,.3); }
.prx-lab-bar b.out { background: #C9772B; }
.prx-lab-scale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--prx-muted); margin: var(--prx-space-3) 0 0; }
.prx-lab-note { margin: var(--prx-space-6) 0 0; padding-top: var(--prx-space-5); border-top: 1px solid var(--prx-line); color: var(--prx-muted); font-size: var(--prx-text-md); line-height: 1.55; }
.prx-labs-fine { text-align: center; margin: var(--prx-space-8) auto 0; max-width: 70ch; }

/* Side effects panel */
.prx-sfx { background: var(--prx-tint); border-radius: 32px; padding: clamp(2rem, 1rem + 4vw, 4.5rem); }
.prx-sfx-head { max-width: 680px; }
body .prx-sfx h2 { font-size: var(--prx-h2); margin: 0; line-height: 1.05; }
.prx-sfx-head p { color: var(--prx-muted); font-size: 1.0625rem; line-height: 1.6; margin: var(--prx-space-4) 0 0; }
.prx-sfx-grid { display: grid; gap: 0 var(--prx-space-10); margin-top: var(--prx-space-10); }
@media (min-width: 700px) { .prx-sfx-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1025px) { .prx-sfx-grid:has(> :nth-child(5)) { grid-template-columns: repeat(3, 1fr); } }
.prx-sfx-item { padding: var(--prx-space-5) 0; border-top: 1px solid var(--prx-line-soft); font-size: 1rem; line-height: 1.55; color: var(--prx-ink); }
.prx-sfx-note { display: flex; flex-direction: column; gap: var(--prx-space-2); margin-top: var(--prx-space-10); background: #fff; border-radius: 20px; padding: var(--prx-space-6) var(--prx-space-8); border-left: 4px solid var(--prx-navy); }
.prx-sfx-note strong { color: var(--prx-ink); font-size: 1rem; }
.prx-sfx-note span { color: var(--prx-muted); font-size: var(--prx-text-md); line-height: 1.6; }
.prx-sfx-note a { color: var(--prx-accent-ink); font-weight: 600; margin-left: 4px; }

/* Comparison table */
body .prx-cmp-title { text-align: center; font-size: var(--prx-h2); margin: 0 0 var(--prx-space-12); }
.prx-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prx-cmp { width: 100%; min-width: 620px; max-width: 1040px; margin: 0 auto; border-collapse: separate; border-spacing: 0; }
.prx-cmp th, .prx-cmp td { padding: 20px 18px; text-align: center; font-size: var(--prx-text-md); color: var(--prx-muted); border-bottom: 1px solid var(--prx-line); }
.prx-cmp thead th { font-weight: 600; color: var(--prx-ink); font-size: 1rem; border-bottom: 0; padding-top: 28px; }
.prx-cmp tbody th { text-align: left; font-weight: 500; color: var(--prx-ink); }
.prx-cmp .is-us { background: var(--prx-navy); color: #fff; border-bottom-color: rgba(255,255,255,.14); font-weight: 600; }
.prx-cmp thead .is-us { border-radius: 24px 24px 0 0; font-family: var(--prx-wordmark); font-size: 1.0625rem; }
.prx-cmp tbody tr:last-child .is-us { border-radius: 0 0 24px 24px; border-bottom: 0; }
.prx-cmp tbody tr:last-child td, .prx-cmp tbody tr:last-child th { border-bottom: 0; }
.prx-cmp-yes, .prx-cmp-no { display: inline-block; width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; background-position: center; background-repeat: no-repeat; background-size: 13px; }
.prx-cmp-yes { background-color: rgba(0,50,102,.08); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003266' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.is-us .prx-cmp-yes { background-color: rgba(255,255,255,.16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.prx-cmp-no { background-color: rgba(79,93,110,.08); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238593A3' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }

/* The product shot in the photo row sits on a tint, uncropped. */
body .prx-lifestyle-card.is-product img { object-fit: cover; object-position: center 45%; }

/* Related plans: inside the page gutter, centred heading, a calmer card.

   The trailing margin matters as much as the leading one. WooCommerce prints
   this block with its own markup, so it never picks up .prx-section and the
   rhythm every other section carries — and the band that follows it opens with
   zero top padding, because sections here are expected to provide their own
   trailing space. With neither side spacing, two tinted blocks met edge to edge
   and read as one shape with a seam through it. */
.prx-related .related.products { margin-top: var(--prx-section); margin-bottom: var(--prx-section); }
body .prx-related .related.products > h2 { text-align: center; font-size: var(--prx-h2); margin: 0 0 var(--prx-space-12); }
.prx-related .related.products ul.products { max-width: 1040px; margin: 0 auto; gap: var(--prx-space-6); }
.prx-related .prx-card { border-radius: 28px; padding: var(--prx-space-8); }
.prx-related .prx-card img { border-radius: 20px; }

/* ── Own type: headlines in the brand face (Bricolage Grotesque, the
   wordmark font) instead of a borrowed editorial serif. The accent word
   keeps the blue, upright, since the face has no true italic. ── */
:root { --prx-display: 'Bricolage Grotesque', 'Instrument Sans', Helvetica, Arial, sans-serif; }
body .prx-display,
body h1.prx-display,
body .prx-hero-badge .prx-price,
body .prx-goal-tile-name,
body .prx-goal-quiz-title,
body .prx-spot-price strong,
body .prx-band-figure,
body .prx-today-row .prx-price,
body .prx-stepcard-num,
body .prx-prose h2,
body .prx-price-week,
body .prx-price-week strong,
body .related.products > h2,
body .woocommerce ul.products li.product .woocommerce-loop-product__title,
.prx-lab-value strong {
  font-weight: 600;
  letter-spacing: -0.025em;
}
body .prx-display span,
body .prx-lifestyle-title span,
body .prx-levels h2 span,
body .prx-sfx h2 span,
body .prx-labs-head h2 span,
body .prx-cmp-title span { font-style: normal !important; }
body .prx-hero--home h1.prx-display { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.75rem); line-height: 1.02; }

/* Spacing: one gap between sections, not two stacked. */
body { --prx-section: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
/* The leading gap is dropped here because the section above already provides
   one; the trailing gap is not, because the band below still provides none. */
.prx-related .related.products { margin-top: 0; margin-bottom: var(--prx-section); }
body .prx-related .related.products > h2 { font-size: var(--prx-h3); margin-bottom: var(--prx-space-8); }

/* ── Phones ── */
@media (max-width: 600px) {
  .prx-header .prx-btn--primary.prx-btn--sm,
  header .prx-btn--primary.prx-btn--sm { white-space: nowrap; padding-inline: 14px; font-size: 0.8125rem; }
  .prx-sticky { gap: 12px; }
  .prx-sticky .prx-btn { white-space: nowrap; padding-inline: 16px; font-size: 0.875rem; flex-shrink: 0; }
  .prx-sticky-price { min-width: 0; }
  .prx-sticky-price small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .prx-levels-chart { padding: var(--prx-space-4); }
  .prx-levels-chart .axis, .prx-levels-chart .band-label { font-size: 22px; }

  .prx-cmp { min-width: 0; table-layout: fixed; }
  .prx-cmp th, .prx-cmp td { padding: 14px 6px; font-size: 0.75rem; }
  .prx-cmp thead th { font-size: 0.75rem; padding-top: 18px; line-height: 1.25; }
  .prx-cmp thead .is-us { font-size: 0.8125rem; border-radius: 16px 16px 0 0; }
  .prx-cmp tbody tr:last-child .is-us { border-radius: 0 0 16px 16px; }
  .prx-cmp tr > :first-child { width: 36%; }
  .prx-cmp tbody th { font-size: 0.8125rem; padding-left: 0; }
  .prx-cmp-yes, .prx-cmp-no { width: 20px; height: 20px; background-size: 11px; }

  .prx-lab { padding: var(--prx-space-6); }
  .prx-sfx-grid { margin-top: var(--prx-space-6); }
}
@media (max-width: 600px) {
  .prx-header-actions { gap: 8px; }
  .prx-header-actions .prx-btn--primary.prx-btn--sm { padding-inline: 12px; font-size: 0.75rem; }
  .prx-cmp thead .is-us { font-size: 0.6875rem; letter-spacing: -0.01em; }
}
@media (max-width: 380px) { .prx-header-actions .prx-btn--primary.prx-btn--sm { display: none; } }

/* ── Chat launcher: the designed navy pill ── */
.prx-chat-pill {
  position: fixed; right: 32px; bottom: 32px; z-index: 60;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--prx-navy); color: #fff; border: 0; cursor: pointer;
  border-radius: 999px; padding: 10px 18px 10px 12px;
  box-shadow: 0 12px 32px rgba(0,50,102,.25);
  font: inherit; text-align: left;
  transition: transform .15s ease, box-shadow .15s ease;
}
.prx-chat-pill[hidden] { display: none; }
.prx-chat-pill:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,50,102,.3); }
.prx-chat-pill:focus-visible { outline: 3px solid var(--prx-red); outline-offset: 3px; }
.prx-chat-pill-icon { width: 36px; height: 36px; border-radius: 999px; background: var(--prx-red); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.prx-chat-pill-text { display: flex; flex-direction: column; line-height: 1.2; }
.prx-chat-pill-text strong { font-size: 14px; font-weight: 600; }
.prx-chat-pill-text small { font-size: 12px; color: #C9D6E6; }
body.prx-chat-open .prx-chat-pill { opacity: 0; pointer-events: none; }
@media (max-width: 1024px) {
  .prx-chat-pill { right: 16px; bottom: 16px; }
  .prx-has-sticky .prx-chat-pill { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
  .prx-chat-pill { padding: 8px 14px 8px 8px; gap: 10px; }
  .prx-chat-pill-icon { width: 32px; height: 32px; }
  .prx-chat-pill-text strong { font-size: 13px; }
  .prx-chat-pill-text small { font-size: 11px; }
}

/* Alex's face in the chat pill, with a green "online" dot. */
.prx-chat-pill-face { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.prx-chat-pill-face img { display: block; width: 40px; height: 40px; border-radius: 999px; object-fit: cover; border: 2px solid #fff; box-sizing: border-box; }
.prx-chat-pill-face::after { content: ""; position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #2DBE6C; border: 2px solid var(--prx-navy); }
.prx-chat-pill:has(.prx-chat-pill-face) { padding-left: 8px; }
@media (max-width: 600px) { .prx-chat-pill-face, .prx-chat-pill-face img { width: 36px; height: 36px; } }

/* Announcement bar: an offer, with a tag and a link. */
.prx-announce { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; }
.prx-announce .prx-sep { margin: 0; }
.prx-announce-tag { background: var(--prx-red); color: #fff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; }
.prx-announce-link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.prx-announce-link:hover { color: #FFD9D6; }
@media (max-width: 767px) {
  .prx-announce { font-size: 0.8125rem; gap: 4px 8px; padding-block: 8px; }
  .prx-announce-tag { display: none; }
}

/* Start button that leads to the eligibility quiz. */
.prx-start { display: flex; flex-direction: column; gap: var(--prx-space-2); }
.prx-start-btn { width: 100%; min-height: var(--prx-btn-h-lg); font-size: var(--prx-text-xl); justify-content: center; }
.prx-start-note { text-align: center; margin: 0; }

/* Dark panel without the chart: heading left, points in two columns right. */
@media (min-width: 900px) {
  .prx-levels--solo { grid-template-columns: 1fr; }
  .prx-levels--solo .prx-levels-copy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--prx-space-6) var(--prx-space-16); align-items: start; }
  .prx-levels--solo .prx-levels-copy > h2 { grid-column: 1; }
  .prx-levels--solo .prx-levels-lede { grid-column: 1; margin-top: 0; }
  .prx-levels--solo .prx-levels-points { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: center; }
}

/* Closing band: space after the last section, one next step, then the footer. */
.prx-closing-wrap { padding-block: 0 var(--prx-section); }
.prx-closing { display: grid; gap: var(--prx-space-8); align-items: center; background: var(--prx-tint); border-radius: 32px; padding: clamp(2rem, 1rem + 4vw, 4rem); }
@media (min-width: 900px) { .prx-closing { grid-template-columns: 1.4fr 1fr; } }
body .prx-closing h2 { font-size: var(--prx-h2); margin: 0; line-height: 1.05; }
.prx-closing-copy p { color: var(--prx-muted); font-size: 1.0625rem; line-height: 1.6; margin: var(--prx-space-4) 0 0; max-width: 52ch; }
.prx-closing-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--prx-space-4); }
@media (min-width: 900px) { .prx-closing-actions { align-items: flex-end; } }
.prx-closing-chat { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--prx-accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Related plans: cards keep a sensible width when there are only one or two. */
.prx-related .related.products ul.products { grid-template-columns: repeat(auto-fit, minmax(280px, 480px)); justify-content: center; }

/* About page */
.prx-about-head { text-align: center; max-width: 760px; margin: 0 auto var(--prx-space-10); }
body .prx-about-head h2 { font-size: var(--prx-h2); margin: 0; }
body .prx-about-head h2 span { color: var(--prx-accent-ink); }
.prx-about-head p { color: var(--prx-muted); font-size: 1.0625rem; margin: var(--prx-space-4) 0 0; }
.prx-about-cards { display: grid; gap: var(--prx-space-6); }
@media (min-width: 900px) { .prx-about-cards { grid-template-columns: 1fr 1.2fr; } }
.prx-about-card { background: var(--prx-tint); border-radius: 28px; padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.prx-about-card--contact { background: #fff; border: 1px solid #E7ECF2; box-shadow: 0 24px 60px rgba(0,50,102,.08); }
body .prx-about-card h2 { font-size: var(--prx-h3); margin: var(--prx-space-2) 0 var(--prx-space-4); }
.prx-about-card p { color: var(--prx-muted); line-height: 1.6; margin: 0 0 var(--prx-space-4); }
.prx-about-link { color: var(--prx-accent-ink); font-weight: 600; }
.prx-about-dl { display: grid; gap: var(--prx-space-5); margin: 0; }
@media (min-width: 600px) { .prx-about-dl { grid-template-columns: 1fr 1fr; } }
.prx-about-dl dt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--prx-faint); margin-bottom: 4px; }
.prx-about-dl dd { margin: 0; color: var(--prx-ink); line-height: 1.55; }
.prx-about-dl a { color: var(--prx-ink); }
.prx-about-emergency { margin-top: var(--prx-space-6); }
body .prx-hero--person h1 .prx-accent { color: var(--prx-accent-ink); }

/* Contact page */
.prx-contact-head { text-align: center; max-width: 760px; margin: 0 auto; padding-bottom: var(--prx-space-12); }
body .prx-contact-head h1 { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); margin: var(--prx-space-3) 0 var(--prx-space-5); line-height: 1.02; }
body .prx-contact-head h1 span { color: var(--prx-accent-ink); }
.prx-contact-head .prx-lede { margin: 0 auto; max-width: 56ch; }
.prx-contact-ways { display: grid; gap: var(--prx-space-6); }
@media (min-width: 900px) { .prx-contact-ways { grid-template-columns: repeat(3, 1fr); } }
.prx-contact-way { display: flex; flex-direction: column; align-items: flex-start; gap: var(--prx-space-3); text-align: left; background: var(--prx-tint); border: 0; border-radius: 28px; padding: clamp(1.75rem, 1rem + 2vw, 2.5rem); color: var(--prx-ink); text-decoration: none; font: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.prx-contact-way:hover { transform: translateY(-2px); box-shadow: 0 20px 48px rgba(0,50,102,.10); }
.prx-contact-way--chat { background: var(--prx-navy); color: #fff; }
.prx-contact-way strong { font-family: var(--prx-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.prx-contact-way span { color: var(--prx-muted); line-height: 1.55; }
.prx-contact-way--chat span { color: rgba(255,255,255,.78); }
.prx-contact-way em { font-style: normal; font-weight: 600; color: var(--prx-accent-ink); margin-top: auto; }
.prx-contact-way--chat em { color: #9CC2F0; }
.prx-contact-icon { width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--prx-navy); display: inline-flex !important; align-items: center; justify-content: center; }
.prx-contact-face { width: 56px; height: 56px; }
.prx-contact-face img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; display: block; }
.prx-contact-links { display: flex; flex-direction: column; gap: var(--prx-space-3); }

/* Help Center */
.prx-help-hero { background: var(--prx-navy); color: #fff; padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
.prx-help-hero-inner { text-align: center; max-width: 820px; }
body .prx-help-hero h1 { color: #fff; font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.25rem); margin: var(--prx-space-3) 0 var(--prx-space-8); line-height: 1.02; }
body .prx-help-hero h1 span { color: #9CC2F0; }
.prx-help-search { display: flex; align-items: center; gap: 12px; background: #fff; color: var(--prx-muted); border-radius: 999px; padding: 6px 8px 6px 22px; max-width: 640px; margin: 0 auto; box-shadow: 0 20px 48px rgba(0,0,0,.18); }
.prx-help-search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 1.0625rem; padding: 14px 8px; background: transparent; color: var(--prx-ink); min-width: 0; }
.prx-help-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: var(--prx-space-6); }
.prx-help-chips a { color: #fff; text-decoration: none; font-size: .875rem; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 6px 14px; }
.prx-help-chips a:hover { background: rgba(255,255,255,.12); }
.prx-help-topics { display: grid; gap: var(--prx-space-6); padding-top: var(--prx-section); }
@media (min-width: 900px) { .prx-help-topics { grid-template-columns: 1fr 1fr; } }
.prx-help-topic { background: var(--prx-tint); border-radius: 28px; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); scroll-margin-top: 120px; }
.prx-help-topic[hidden], .prx-help-list li[hidden] { display: none; }
body .prx-help-topic h2 { font-size: var(--prx-h4); margin: 0; }
.prx-help-topic-head p { color: var(--prx-muted); margin: 6px 0 0; }
.prx-help-list { list-style: none; margin: var(--prx-space-4) 0 0; padding: 0; }
.prx-help-list li + li { border-top: 1px solid var(--prx-line); }
.prx-help-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; color: var(--prx-ink); text-decoration: none; font-weight: 500; }
.prx-help-list a:hover span { color: var(--prx-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.prx-help-list a svg { flex-shrink: 0; color: var(--prx-faint); }
.prx-help-empty { grid-column: 1 / -1; text-align: center; color: var(--prx-muted); }
.prx-help-reach { display: grid; gap: var(--prx-space-6); align-items: center; background: var(--prx-tint); border-radius: 28px; padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
@media (min-width: 900px) { .prx-help-reach { grid-template-columns: 1.2fr 1fr; } }
body .prx-help-reach h2 { font-size: var(--prx-h3); margin: 0 0 8px; }
.prx-help-reach p { color: var(--prx-muted); margin: 0; line-height: 1.6; }
.prx-help-reach-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) { .prx-help-reach-actions { justify-content: flex-end; } }
.prx-help-article-wrap { display: grid; gap: var(--prx-space-12); padding-top: var(--prx-space-8); padding-bottom: var(--prx-section); }
@media (min-width: 1025px) { .prx-help-article-wrap { grid-template-columns: minmax(0, 1fr) 320px; } }
.prx-help-article { max-width: 760px; }
body .prx-help-article h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); margin: var(--prx-space-3) 0 var(--prx-space-8); line-height: 1.08; }
.prx-help-side { align-self: start; position: sticky; top: 110px; background: var(--prx-tint); border-radius: 24px; padding: var(--prx-space-6); }
.prx-help-list--side a { padding: 10px 0; font-size: .9375rem; }
.prx-help-side .prx-about-link { display: inline-block; margin-top: var(--prx-space-4); }
.prx-prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.prx-prose th, .prx-prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--prx-line); vertical-align: top; }
.prx-prose thead th, .prx-prose tr:first-child th { background: var(--prx-tint); color: var(--prx-ink); font-weight: 600; }
.prx-prose .wp-block-table { overflow-x: auto; margin: 0; }

/* Blog */
.prx-blog-hero { background: var(--prx-tint); padding: clamp(3rem, 2rem + 4vw, 5rem) 0; }
.prx-blog-hero-inner { text-align: center; max-width: 860px; }
body .prx-blog-hero h1 { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4rem); line-height: 1.04; margin: var(--prx-space-3) 0 var(--prx-space-8); }
body .prx-blog-hero h1 span { color: var(--prx-accent-ink); }
.prx-blog-search { box-shadow: 0 16px 40px rgba(0,50,102,.10); border: 1px solid #E3E9F1; }
.prx-blog-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: var(--prx-space-6); }
.prx-blog-cats a { font-size: .875rem; color: var(--prx-ink); text-decoration: none; background: #fff; border: 1px solid #E3E9F1; border-radius: 999px; padding: 6px 14px; }
.prx-blog-cats a[aria-current] { background: var(--prx-navy); color: #fff; border-color: var(--prx-navy); }
.prx-blog-list { padding-top: var(--prx-section); display: grid; gap: var(--prx-space-12); }
.prx-post-grid { display: grid; gap: var(--prx-space-8) var(--prx-space-6); }
@media (min-width: 700px) { .prx-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .prx-post-grid { grid-template-columns: repeat(3, 1fr); } }
.prx-post-card { display: flex; flex-direction: column; gap: var(--prx-space-4); color: var(--prx-ink); text-decoration: none; }
.prx-post-media { display: block; border-radius: 24px; overflow: hidden; background: var(--prx-tint); aspect-ratio: 16 / 10; }
.prx-post-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.prx-post-img--blank { background: linear-gradient(135deg, #E6EDF5, #F2F5F9); }
.prx-post-card:hover .prx-post-img { transform: scale(1.03); }
.prx-post-body { display: flex; flex-direction: column; gap: 8px; }
.prx-post-meta { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--prx-faint); }
.prx-post-title { font-family: var(--prx-display); font-weight: 600; font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.015em; }
.prx-post-card:hover .prx-post-title { color: var(--prx-accent-ink); }
.prx-post-excerpt { color: var(--prx-muted); line-height: 1.6; }
@media (min-width: 900px) {
  .prx-post-card--featured { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--prx-space-10); align-items: center; }
  .prx-post-card--featured .prx-post-title { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.1; }
}
.prx-blog-pages .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.prx-blog-pages .page-numbers { min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid #E3E9F1; color: var(--prx-ink); text-decoration: none; }
.prx-blog-pages .page-numbers.current { background: var(--prx-navy); color: #fff; border-color: var(--prx-navy); }
.prx-post-head { text-align: center; max-width: 900px; padding-top: var(--prx-space-8); }
body .prx-post-head h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); line-height: 1.06; margin: var(--prx-space-3) 0 var(--prx-space-4); }
.prx-post-byline { color: var(--prx-muted); margin: 0; }
.prx-post-hero { margin-top: var(--prx-space-10); }
.prx-post-hero-img { display: block; width: 100%; max-height: 560px; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 32px; }
.prx-post-hero .prx-post-img--blank { display: none; }
.prx-post-layout { display: grid; gap: var(--prx-space-12); padding-block: var(--prx-space-12) var(--prx-section); }
@media (min-width: 1025px) { .prx-post-layout { grid-template-columns: minmax(0, 720px) 320px; justify-content: space-between; } }
.prx-post-prose img { max-width: 100%; height: auto; border-radius: 16px; }
.prx-post-side { align-self: start; position: sticky; top: 110px; }
.prx-post-cta { display: flex; flex-direction: column; gap: 12px; background: var(--prx-navy); color: #fff; border-radius: 24px; padding: var(--prx-space-8); }
.prx-post-cta strong { font-family: var(--prx-display); font-size: 1.5rem; line-height: 1.15; }
.prx-post-cta span { color: rgba(255,255,255,.78); line-height: 1.55; }
.prx-post-cta .prx-btn { margin-top: 8px; justify-content: center; }
.prx-post-cta-link { color: #9CC2F0; font-weight: 600; font-size: .9375rem; }
body .prx-related-title { font-size: var(--prx-h3); margin: 0 0 var(--prx-space-8); }

/* Blog post, take two: article column + sidebar, sensible image, author */
.prx-post-layout { display: grid; gap: var(--prx-space-12); padding-block: var(--prx-space-6) var(--prx-section); }
@media (min-width: 1025px) { .prx-post-layout { grid-template-columns: minmax(0, 740px) 300px; justify-content: space-between; } }
.prx-post-main { min-width: 0; }
.prx-post-head { text-align: left; max-width: none; padding-top: 0; }
.prx-post-chip { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--prx-accent-ink); background: #EAF1FA; border-radius: 999px; padding: 5px 12px; text-decoration: none; }
body .prx-post-head h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.1; margin: var(--prx-space-4) 0 var(--prx-space-4); text-align: left; }
.prx-post-dek { font-size: 1.1875rem; line-height: 1.55; color: var(--prx-muted); margin: 0 0 var(--prx-space-6); }
.prx-post-byline { display: flex; align-items: center; gap: 12px; padding: var(--prx-space-4) 0; border-top: 1px solid var(--prx-line); border-bottom: 1px solid var(--prx-line); }
.prx-post-byline > span { display: flex; flex-direction: column; line-height: 1.35; }
.prx-post-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.prx-post-by { font-weight: 600; color: var(--prx-ink); }
.prx-post-by a { color: var(--prx-ink); text-decoration: none; }
.prx-post-by a:hover { color: var(--prx-accent-ink); text-decoration: underline; }
.prx-post-when { font-size: .875rem; color: var(--prx-muted); }
.prx-post-hero { margin: var(--prx-space-8) 0; }
.prx-post-hero-img { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 420px; object-fit: cover; border-radius: 24px; }
.prx-post-prose { max-width: 700px; }
.prx-post-prose h2 { scroll-margin-top: 110px; }
.prx-post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: var(--prx-space-10) 0 var(--prx-space-8); padding-top: var(--prx-space-6); border-top: 1px solid var(--prx-line); }
.prx-post-share > span { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--prx-faint); margin-right: 6px; }
.prx-post-share a, .prx-post-share button { font: inherit; font-size: .875rem; color: var(--prx-ink); background: #fff; border: 1px solid #E3E9F1; border-radius: 999px; padding: 6px 14px; text-decoration: none; cursor: pointer; }
.prx-post-share a:hover, .prx-post-share button:hover { border-color: var(--prx-navy); }
.prx-post-author { display: flex; gap: var(--prx-space-5); align-items: flex-start; background: var(--prx-tint); border-radius: 24px; padding: var(--prx-space-7); margin-bottom: var(--prx-space-6); scroll-margin-top: 110px; }
.prx-post-author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.prx-post-author strong { display: block; font-family: var(--prx-display); font-size: 1.25rem; color: var(--prx-ink); margin: 4px 0 6px; }
.prx-post-author p { color: var(--prx-muted); line-height: 1.6; margin: 0 0 8px; }
.prx-post-side { align-self: start; position: sticky; top: 110px; display: grid; gap: var(--prx-space-6); }
.prx-post-toc { border-left: 2px solid var(--prx-line); padding-left: var(--prx-space-5); }
.prx-post-toc ol { list-style: none; margin: var(--prx-space-3) 0 0; padding: 0; display: grid; gap: 10px; }
.prx-post-toc a { color: var(--prx-muted); text-decoration: none; font-size: .9375rem; line-height: 1.4; display: block; }
.prx-post-toc a:hover, .prx-post-toc a.is-on { color: var(--prx-ink); font-weight: 600; }
@media (max-width: 1024px) { .prx-post-side { position: static; } .prx-post-toc { display: none; } }

.prx-post-toc { max-height: calc(100vh - 480px); min-height: 160px; overflow-y: auto; }

/* Post header image: a figure, not a banner. Keeps stat-card images and
   photos to a sensible size and never crops their text. */
.prx-post-hero { margin: var(--prx-space-7) 0 var(--prx-space-8); }
.prx-post-hero-img { width: auto; max-width: 100%; height: auto; max-height: 340px; aspect-ratio: auto; object-fit: contain; border-radius: 20px; }
@media (max-width: 600px) { .prx-post-hero-img { max-height: 240px; } }

/* Contents list first; it scrolls inside itself so the box below stays in view. */
.prx-post-toc { max-height: calc(100vh - 520px); min-height: 180px; }

/* Answer-first summary card at the top of a post */
.prx-prose .prx-answer { background: var(--prx-tint); border-left: 4px solid var(--prx-navy); border-radius: 0 20px 20px 0; padding: var(--prx-space-6) var(--prx-space-7); display: flex; flex-direction: column; gap: 12px; }
.prx-prose .prx-answer h2 { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--prx-accent-ink); font-family: var(--prx-body-font, inherit); font-weight: 700; margin: 0; }
.prx-prose .prx-answer p:first-of-type { font-size: 1.1875rem; line-height: 1.55; color: var(--prx-ink); font-weight: 500; }
.prx-prose .prx-answer p { margin: 0; }

/* Goal cards: treatments, then a quiet monthly price. */
/* One line, always. The treatment names run to different lengths, so letting
   this wrap gave each tile a card of a different height and covered a different
   amount of each photograph. One line keeps the five cards the same size and
   keeps the crop predictable; the category page lists them in full. */
.prx-goal-tile-meds{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:.95rem;font-weight:500;color:var(--prx-ink,#13294b);margin-top:.2rem;line-height:1.35}
.prx-goal-tile-price{display:block;font-size:.85rem;font-weight:500;color:#5b6b82;margin-top:.15rem}

.prx-today-row--plan{justify-content:flex-start;align-items:baseline;gap:.6rem}

/* Buttons and CTA boxes inside imported posts. The old site wrote these with
   inline styles (Poppins, bright blue); they take the house style here
   without touching the post text. */
.prx-prose .wp-block-buttons { margin: 1.25rem 0 2rem; gap: .75rem; }
.prx-prose .wp-block-button__link,
.prx-prose .prx-cta a,
.prx-prose .prx-cta-mini a,
.prx-prose .prx-ed-popup-cta {
	display: inline-flex !important; align-items: center; justify-content: center;
	background: var(--prx-red) !important; color: #fff !important;
	font-family: inherit !important; font-weight: 600 !important; font-size: 1rem !important; line-height: 1.2 !important;
	padding: .95rem 1.75rem !important; border: 0 !important; border-radius: 999px !important;
	text-decoration: none !important; box-shadow: none !important; cursor: pointer;
	transition: background .15s ease;
}
.prx-prose .wp-block-button__link:hover, .prx-prose .wp-block-button__link:focus,
.prx-prose .prx-cta a:hover, .prx-prose .prx-cta-mini a:hover,
.prx-prose .prx-ed-popup-cta:hover { background: var(--prx-red-deep) !important; color: #fff !important; }
.prx-prose .wp-block-button__link::after,
.prx-prose .prx-cta a::after, .prx-prose .prx-cta-mini a::after { content: "→"; margin-left: .55rem; }

.prx-prose .prx-cta,
.prx-prose .prx-cta-mini {
	font-family: inherit !important; background: #F3F6FB !important; border: 1px solid #DCE4F0 !important;
	border-radius: 20px !important; margin: 2rem 0 !important;
}
.prx-prose .prx-cta { padding: clamp(1.5rem, 1rem + 2vw, 2.25rem) !important; }
.prx-prose .prx-cta-mini { padding: 1.1rem 1.4rem !important; }
.prx-prose .prx-cta p,
.prx-prose .prx-cta-mini p { font-family: inherit !important; color: var(--prx-ink) !important; }
.prx-prose .prx-cta p:first-child,
.prx-prose .prx-cta-mini p:first-child { font-weight: 600 !important; font-size: 1.15rem !important; }
.prx-prose .prx-cta p:first-child { font-family: var(--prx-display) !important; font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem) !important; line-height: 1.25 !important; }
.prx-prose .prx-cta p:not(:first-child):not(:has(a)) { color: #51627A !important; }
.prx-prose .prx-cta-mini p { margin: 0 !important; }
@media (max-width: 560px) {
	.prx-prose .prx-cta-mini { flex-direction: column; align-items: flex-start !important; }
	.prx-prose .wp-block-button, .prx-prose .wp-block-button__link { width: 100%; }
}

/* In-post CTA: the "Explore plans" links are secondary chips. */
.prx-prose .prx-cta p:has(a + a) a {
	background: #fff !important; color: var(--prx-ink) !important; border: 1px solid #CBD6E6 !important;
	padding: .55rem 1rem !important; font-size: .9rem !important; margin: .25rem .15rem !important;
}
.prx-prose .prx-cta p:has(a + a) a:hover { background: #fff !important; border-color: var(--prx-ink) !important; }
.prx-prose .prx-cta p:has(a + a) a::after { content: none; }

/* Author page */
.prx-author-hero { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; padding-block: clamp(1.5rem, 1rem + 2vw, 3rem); }
.prx-author-photo { width: clamp(140px, 10vw + 90px, 240px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 28px; background: #EEF2F8; }
.prx-author-intro h1 { margin: .25rem 0 .35rem; }
.prx-author-role { font-weight: 600; color: var(--prx-red-deep); margin: 0 0 1rem; }
.prx-author-intro .prx-lede { max-width: 62ch; margin: 0; }
.prx-author-stats { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.prx-author-stats li { background: #F3F6FB; border: 1px solid #DCE4F0; border-radius: 14px; padding: .7rem 1rem; font-size: .9rem; color: #51627A; display: flex; flex-direction: column-reverse; }
.prx-author-stats strong { font-family: var(--prx-display); font-size: 1.25rem; color: var(--prx-ink); line-height: 1.2; }
.prx-author-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; padding-bottom: 1rem; }
.prx-author-about h2:first-child { margin-top: 0; }
.prx-author-note { background: #FFF6F5; border: 1px solid var(--prx-red-pale); border-radius: 16px; padding: 1.1rem 1.25rem; margin: 1.5rem 0; }
.prx-author-note p { margin: .35rem 0 0; font-size: .95rem; }
.prx-author-side { display: grid; gap: 1rem; position: sticky; top: 110px; }
.prx-author-card { background: #fff; border: 1px solid #DCE4F0; border-radius: 20px; padding: 1.35rem 1.4rem; }
.prx-author-card .prx-eyebrow { margin: 0 0 .75rem; }
.prx-author-timeline, .prx-author-creds { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.prx-author-timeline li { position: relative; padding-left: 1.1rem; }
.prx-author-timeline li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--prx-red); }
.prx-author-timeline strong, .prx-author-creds strong { display: block; color: var(--prx-ink); font-size: .95rem; }
.prx-author-timeline span, .prx-author-creds span { display: block; color: #51627A; font-size: .88rem; }
.prx-author-topics { display: flex; flex-wrap: wrap; gap: .4rem; }
.prx-author-topics span { background: #F3F6FB; border-radius: 999px; padding: .35rem .75rem; font-size: .85rem; color: var(--prx-ink); }
.prx-author-list-h { font-size: var(--prx-h3, 2rem); margin-bottom: 1.5rem; }
@media (max-width: 860px) {
	.prx-author-hero { grid-template-columns: 1fr; text-align: left; }
	.prx-author-body { grid-template-columns: 1fr; }
	.prx-author-side { position: static; }
}

/* Post sidebar: the table of contents shows in full (no scroll box inside
   the page); the sidebar runs the height of the article so the navy card
   below it can stay pinned while reading. */
.prx-post-side { position: static !important; align-self: stretch !important; align-content: start; }
.prx-post-toc { max-height: none !important; min-height: 0 !important; overflow: visible !important; }
.prx-post-toc ol { gap: 8px; }
.prx-post-toc a { font-size: .875rem; }
.prx-post-cta { position: sticky; top: 110px; }

/* Sources list at the end of a post. */
.prx-prose .prx-sources { font-size: .9rem; line-height: 1.5; color: #51627A; padding-left: 1.25rem; }
.prx-prose .prx-sources li { margin-bottom: .45rem; }
.prx-prose .prx-sources a { color: var(--prx-ink); }

/* Chat pill on phones: compact, face + "Chat with Alex". */
@media (max-width: 600px) {
	.prx-chat-pill { right: 12px; bottom: 12px; padding: 6px 14px 6px 6px; gap: 8px; }
	.prx-chat-pill-lead, .prx-chat-pill-text small { display: none; }
	.prx-chat-pill-text strong { font-size: 13px; }
	.prx-chat-pill-face, .prx-chat-pill-face img { width: 34px; height: 34px; }
}
/* The chat tool's own container stays out of the way until the chat opens. */
chat-widget:not([data-active="true"]) { pointer-events: none; opacity: 0; }

/* ── Affiliate program ── */
.prx-aff-box { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; background: var(--prx-navy); color: #fff; border-radius: 20px; padding: 1.4rem 1.6rem; margin: 2rem 0; }
.prx-prose .prx-aff-box p { margin: 0; color: #fff; }
.prx-prose .prx-aff-box .prx-aff-box-eyebrow { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #FFB4AE; font-weight: 600; margin-bottom: .3rem; }
.prx-prose .prx-aff-box .prx-aff-box-title { font-family: var(--prx-display); font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.prx-prose .prx-aff-box .prx-aff-box-text { font-size: .92rem; color: #C9D6E6; margin-top: .35rem; max-width: 52ch; }
.prx-aff-box-copy { flex: 1 1 320px; }
.prx-aff-box-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.prx-prose .prx-aff-box .prx-aff-box-btn { background: var(--prx-red); color: #fff; text-decoration: none; font-weight: 600; padding: .85rem 1.5rem; border-radius: 999px; }
.prx-prose .prx-aff-box .prx-aff-box-btn:hover { background: var(--prx-red-deep); color: #fff; }
.prx-prose .prx-aff-box .prx-aff-box-link { color: #fff; text-decoration-color: #FFB4AE; font-size: .92rem; }

.prx-aff-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; padding-block: clamp(2rem, 1rem + 4vw, 5rem); }
.prx-aff-hero-copy h1 { margin: .4rem 0 1rem; }
.prx-aff-hero-copy .prx-lede { max-width: 60ch; }
.prx-aff-hero .prx-actions { margin-top: 1.6rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.prx-aff-stats { display: grid; gap: .75rem; }
.prx-aff-stat { background: #F3F6FB; border: 1px solid #DCE4F0; border-radius: 20px; padding: 1.2rem 1.4rem; display: flex; flex-direction: column; }
.prx-aff-stat strong { font-family: var(--prx-display); font-size: 1.6rem; color: var(--prx-ink); line-height: 1.1; }
.prx-aff-stat span { color: #51627A; font-size: .95rem; margin-top: .2rem; }
.prx-aff-stat--lead { background: var(--prx-navy); border-color: var(--prx-navy); }
.prx-aff-stat--lead strong { color: #fff; font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem); }
.prx-aff-stat--lead span { color: #C9D6E6; }
.prx-aff-how h2, .prx-aff-why h2 { margin: .35rem 0 1.5rem; }
.prx-aff-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.prx-aff-steps li { background: #fff; border: 1px solid #DCE4F0; border-radius: 20px; padding: 1.4rem; }
.prx-aff-steps span { display: block; font-family: var(--prx-display); color: var(--prx-red); font-size: 1.5rem; font-weight: 600; }
.prx-aff-steps strong { display: block; color: var(--prx-ink); font-size: 1.1rem; margin: .35rem 0 .3rem; }
.prx-aff-steps p { margin: 0; color: #51627A; }
.prx-aff-why { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.prx-aff-why-copy p { color: #51627A; max-width: 62ch; }
.prx-aff-why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.prx-aff-why-list li { background: #F3F6FB; border-radius: 14px; padding: .9rem 1.1rem .9rem 2.6rem; position: relative; color: var(--prx-ink); font-weight: 500; }
.prx-aff-why-list li::before { content: ""; position: absolute; left: 1.05rem; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--prx-red); }
.prx-builder > .elementor { width: 100%; }
@media (max-width: 860px) {
	.prx-aff-hero, .prx-aff-why { grid-template-columns: 1fr; }
	.prx-aff-steps { grid-template-columns: 1fr; }
}

.prx-aff-hero-copy h1 { font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.9rem); line-height: 1.05; }

/* The pill says "Chat or text Alex" on phones, where the number line is hidden. */
.prx-chat-pill-small { display: none; }
@media (max-width: 600px) {
	.prx-chat-pill-wide { display: none; }
	.prx-chat-pill-small { display: inline; }
}

/* Plan cards: one headline price, the billing line quiet beneath it, and
   tighter spacing between the blurb and the price. */
body .prx-price-block { gap: .15rem; }
body .prx-price-real { font-size: .85rem; font-weight: 500; color: #51627A; }
.prx-related .prx-card { gap: .9rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.prx-related .prx-card .prx-stack-2 { gap: .5rem; }
.prx-related .prx-card .prx-price-block { margin-top: .15rem; }

/* Price block: plan length, the charge, then the monthly figure. */
.prx-price-label, .prx-plan-price-label { display: block; font-size: .95rem; font-weight: 600; color: var(--prx-ink); margin-bottom: .1rem; }
.prx-plan-price { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.prx-plan-price .prx-price { line-height: 1; }
.prx-plan-price-mo { font-size: 1rem; color: #51627A; }
body .prx-price-week strong { line-height: 1.05; }
body .prx-price-real { font-size: .95rem; color: #51627A; }

/* ------------------------------------------------------------------
   The other length of the same plan.
   A quiet row under the price, not a second buy button: the page has
   already made its recommendation, and this is the way out of it.
   ------------------------------------------------------------------ */
.prx-plan-swap {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

/* The row is a statement of price, not a control: the length is chosen after
   the quiz. So it carries no link affordance and no hover state. */
.prx-plan-swap li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border: 1px solid var(--prx-line, #E3E6EC);
	border-radius: 12px;
	color: inherit;
	background: #fff;
}

.prx-plan-swap-name {
	font-size: var(--prx-text-sm, .875rem);
	font-weight: 600;
}

.prx-plan-swap-price {
	font-size: var(--prx-text-sm, .875rem);
	color: var(--prx-muted, #5A6474);
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   The home hero photograph.
   The brand's hero shot is a cut-out of two people, not a scene, so it
   is shown whole on a tinted panel rather than cropped: a cover crop
   slices heads off at some widths and there is no background worth
   keeping. The price card sits under it instead of over it, because
   there is no corner of a cut-out that is not somebody's face.
   ------------------------------------------------------------------ */
.prx-hero--home .prx-hero-media {
	background: linear-gradient(180deg, #EDF3FC 0%, #DCE8F9 100%);
	border-radius: var(--prx-r-3xl);
	overflow: hidden;
}

.prx-hero--home .prx-hero-media > img {
	aspect-ratio: auto;
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: contain;
	object-position: center bottom;
	border-radius: var(--prx-r-3xl);
	display: block;
}

@media (min-width: 1025px) {
	.prx-hero--home .prx-hero-media > img { aspect-ratio: auto; max-height: 520px; }

	/* Inset from the panel on three sides rather than pinned into its corner.
	   Flush left against the panel edge with a ragged right edge read as a
	   mistake; matching the inset on both sides and the bottom makes the card
	   sit inside the panel instead of hanging off it. */
	.prx-hero--home .prx-hero-badge {
		position: static;
		margin: calc(-1 * var(--prx-space-2)) var(--prx-space-6) var(--prx-space-6);
		max-width: none;
	}
}


/* ── A plain page's title ──────────────────────────────────────────────────
   The display size is drawn for a marketing headline of three or four words.
   The pages that use this template are the other kind — safety information,
   privacy policy, purchase terms — and their titles run to seven or eight
   words. At display size one of those fills the screen before a reader reaches
   a sentence. Same face, same weight, sized to be read rather than announced. */
body h1.prx-page-title {
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);
  line-height: 1.12;
  max-width: 18ch;
}

@media (min-width: 60rem) {
  body h1.prx-page-title { max-width: 24ch; }
}

/* ── Search results ───────────────────────────────────────────────────────
   A result is a link with a thumbnail, a kind, a name and a price when it has
   one. Plans and articles sit in the same list because that is how people
   search: by treatment, not by content type. */
.prx-results { list-style: none; margin: 0; padding: 0; }

.prx-result-link {
  display: flex;
  gap: var(--prx-space-4);
  align-items: flex-start;
  padding: var(--prx-space-4);
  border: 1px solid #E7ECF2;
  border-radius: var(--prx-r-2xl);
  text-decoration: none;
  color: inherit;
  background: #FFFFFF;
}

.prx-result-link:hover { border-color: var(--prx-navy); }

.prx-result-thumb { flex: 0 0 auto; }
.prx-result-thumb img { width: 64px; height: 64px; object-fit: contain; border-radius: var(--prx-r-lg, 12px); }

.prx-result-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prx-result-title { font-weight: 600; }
.prx-result-price { margin-top: 4px; }

.prx-searchform { display: flex; gap: var(--prx-space-3); flex-wrap: wrap; }
.prx-searchform input[type="search"] {
  flex: 1 1 18rem;
  padding: 0.75rem 1rem;
  border: 1px solid #E7ECF2;
  border-radius: var(--prx-r-lg, 12px);
  font: inherit;
}

/* ── Mobile menu actions ──────────────────────────────────────────────────
   The header's Log in and eligibility buttons are hidden on a phone, so the
   menu carries them instead. */
.prx-mobilenav-actions {
  display: flex;
  flex-direction: column;
  gap: var(--prx-space-3);
  margin-top: var(--prx-space-5);
  padding-top: var(--prx-space-5);
  border-top: 1px solid #E7ECF2;
}

.prx-mobilenav-actions .prx-btn { justify-content: center; }

/* ── WooCommerce notices ──────────────────────────────────────────────────
   An empty cart's notice was rendering under the fixed header, so the one
   sentence on the page was the one you could not read. */
.woocommerce-notices-wrapper,
.prx-main .woocommerce-info,
.prx-main .woocommerce-message,
.prx-main .woocommerce-error {
  margin: var(--prx-space-5) 0;
  padding: var(--prx-space-4) var(--prx-space-5);
  border-radius: var(--prx-r-2xl);
  background: var(--prx-tint);
  border: 1px solid #E7ECF2;
  list-style: none;
}

.prx-main .woocommerce-error { background: #FDF2F2; border-color: #F5C2C0; }

.prx-main .cart-empty { font-size: var(--prx-text-lg, 1.125rem); }

.prx-main .return-to-shop { margin-top: var(--prx-space-4); }

/* ── Converted builder pages ──────────────────────────────────────────────
   The landing pages that came off the page builder keep their shape: rows of
   columns, cards, accordions and scrollers. These rules are what makes a
   converted page look like the page it replaced rather than a column of
   prose. They are scoped to .prx-conv-* so they touch nothing else.
   ──────────────────────────────────────────────────────────────────────── */

.prx-conv-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--prx-space-6, 2rem);
  align-items: flex-start;
  margin-block: var(--prx-space-7, 2.5rem);
}

.prx-conv-col {
  flex: 1 1 calc(var(--prx-col, 100) * 1% - var(--prx-space-6, 2rem));
  min-width: min(100%, 17rem);
}

.prx-conv-stack {
  display: flex;
  flex-direction: column;
  gap: var(--prx-space-4, 1rem);
}

.prx-conv-stack--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--prx-space-6, 2rem);
}

.prx-conv-stack--row > * { flex: 1 1 17rem; }

.prx-conv-row > .prx-conv-col > :first-child,
.prx-conv-stack > :first-child { margin-top: 0; }

/* Cards, from image boxes. */
.prx-conv-card {
  display: block;
  padding: var(--prx-space-5, 1.5rem);
  border: 1px solid #E7ECF2;
  border-radius: var(--prx-r-2xl, 20px);
  background: #FFFFFF;
  height: 100%;
}

.prx-conv-card--link { text-decoration: none; color: inherit; }
.prx-conv-card--link:hover { border-color: var(--prx-navy, #0B2545); }

.prx-conv-card-media { margin-bottom: var(--prx-space-4, 1rem); }
.prx-conv-card-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--prx-r-lg, 12px);
}

.prx-conv-card-title { margin: 0 0 0.5rem; font-size: 1.125rem; }
.prx-conv-card-text > :last-child { margin-bottom: 0; }

/* Accordions. */
.prx-conv-accgroup {
  display: flex;
  flex-direction: column;
  gap: var(--prx-space-3, 0.75rem);
  margin-block: var(--prx-space-6, 2rem);
}

.prx-conv-acc {
  border: 1px solid #E7ECF2;
  border-radius: var(--prx-r-xl, 16px);
  background: #FFFFFF;
}

.prx-conv-acc > summary {
  cursor: pointer;
  padding: var(--prx-space-4, 1rem) var(--prx-space-5, 1.5rem);
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.prx-conv-acc > summary::-webkit-details-marker { display: none; }

.prx-conv-acc > summary::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  color: var(--prx-red, #C8102E);
}

.prx-conv-acc[open] > summary::after { content: "\2013"; }

.prx-conv-acc-body {
  padding: 0 var(--prx-space-5, 1.5rem) var(--prx-space-5, 1.5rem);
}

.prx-conv-acc-body > :first-child { margin-top: 0; }
.prx-conv-acc-body > :last-child { margin-bottom: 0; }

/* Carousels become a swipeable row rather than a script. */
.prx-conv-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(18rem, 78%), 1fr);
  gap: var(--prx-space-5, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--prx-space-3, 0.75rem);
  margin-block: var(--prx-space-6, 2rem);
  scrollbar-width: thin;
}

.prx-conv-slide { scroll-snap-align: start; }
.prx-conv-slide img { display: block; width: 100%; height: auto; border-radius: var(--prx-r-lg, 12px); }

.prx-conv-panel { margin-block: var(--prx-space-6, 2rem); }

.prx-conv-rating { letter-spacing: 0.1em; color: #F0A500; margin: 0; }

.prx-conv-embed {
  position: relative;
  padding-top: 56.25%;
  border-radius: var(--prx-r-xl, 16px);
  overflow: hidden;
}

.prx-conv-embed iframe,
.prx-conv-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.prx-conv-video { position: static; border-radius: var(--prx-r-xl, 16px); }

@media (max-width: 640px) {
  .prx-conv-row { gap: var(--prx-space-5, 1.5rem); margin-block: var(--prx-space-6, 2rem); }
}

/* ── Landing pages ────────────────────────────────────────────────────────
   The marketing landers are built from these plus the sections the rest of
   the site already uses, so a change here changes every lander and every
   language variant at once.
   ──────────────────────────────────────────────────────────────────────── */

.prx-lander .prx-section--tight { padding-block: var(--prx-space-8, 3rem); }

/* The struck-through former price beside the live one. */
.prx-band-was {
  font-family: var(--prx-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--prx-on-navy-muted, rgba(255,255,255,0.6));
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* The evidence band. */
.prx-statband {
  background: var(--prx-navy, #0B2545);
  color: var(--prx-on-navy, #FFFFFF);
  border-radius: var(--prx-r-3xl, 28px);
  padding: clamp(1.75rem, 4vw, 3.25rem);
}

.prx-statband-head {
  color: inherit;
  margin: 0 0 var(--prx-space-7, 2.5rem);
  max-width: 24ch;
}

.prx-statrow {
  display: grid;
  gap: var(--prx-space-7, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.prx-statcell {
  display: flex;
  flex-direction: column;
  gap: var(--prx-space-3, 0.75rem);
  padding-left: var(--prx-space-5, 1.5rem);
  border-left: 2px solid var(--prx-on-navy-rule, rgba(255,255,255,0.22));
}

.prx-statcell-figure {
  font-family: var(--prx-display);
  font-size: clamp(2.75rem, 6vw, 4rem);
  line-height: 0.95;
  letter-spacing: var(--prx-track-display, -0.02em);
}

.prx-statcell-text {
  color: var(--prx-on-navy-soft, rgba(255,255,255,0.78));
  font-size: var(--prx-text-sm, 0.9375rem);
  line-height: var(--prx-lh-prose, 1.65);
}

.prx-statband-note {
  margin: var(--prx-space-7, 2.5rem) 0 0;
  color: var(--prx-on-navy-faint, rgba(255,255,255,0.55));
  font-size: var(--prx-text-xs, 0.8125rem);
}

@media (max-width: 640px) {
  .prx-statcell { padding-left: var(--prx-space-4, 1rem); }
}

/* ── Product photography ──────────────────────────────────────────────────
   The product renders arrive with a saturated blue background baked in. On a
   page made of soft rounded cards on near-white, a hard-edged square of that
   blue reads as a foreign object. Giving every one of them the same rounded
   tile, the same inset and the same proportions turns the blue into a
   deliberate device rather than an accident of the asset.
   ──────────────────────────────────────────────────────────────────────── */

.prx-product-tile,
.prx-card > div:first-child:has(> img),
.woocommerce-product-gallery__image {
  border-radius: var(--prx-r-2xl, 20px);
  overflow: hidden;
}

/* The plan page's own shot. The render arrives as a square with its own solid
   ground baked in, so left to float it reads as a stray asset. Filling a panel
   of the site's own radius and shadow makes that ground the panel — the same
   device as the navy bands further down the page. */
.prx-product-shot {
  position: relative;
  display: block;
  width: 100%;
  /* The media column is wider than the shot wants to be; left to fill it the
     panel becomes an 800px block of colour that outweighs the buying rail. */
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  overflow: hidden;
  background: var(--prx-tint, #F3F6FA);
  box-shadow: 0 24px 60px rgba(0, 50, 102, 0.12);
}

.prx-product-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--prx-r-2xl, 20px);
}

/* Gallery thumbnails read as one row of small versions of the same panel. */
.prx-product-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--prx-space-3, 0.75rem);
  max-width: 560px;
  margin-inline: auto;
}

.prx-product-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--prx-tint, #F3F6FA);
}

.prx-product-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The caption belongs to the panel, so it lines up with it rather than with
   the wider column the panel is centred in. */
.prx-product-media > .prx-fine {
  max-width: 560px;
  margin-inline: auto;
}

/* Listing thumbnails: a consistent square tile, centred, with room around it. */
.prx-card > div:first-child:has(> img) {
  padding: var(--prx-space-2, 0.5rem);
  margin-bottom: var(--prx-space-4, 1rem);
}

.prx-card > div:first-child > img {
  border-radius: var(--prx-r-xl, 16px);
}

/* ── Category hero photograph ─────────────────────────────────────────────
   The portrait was floating inside its panel, so the bottom of the frame cut
   across the subject with a visible edge. Filling the panel to its own bottom
   edge means the crop lands on the panel's rounded corner, where it belongs.
   ──────────────────────────────────────────────────────────────────────── */

.prx-person-photo {
  align-self: stretch;
  display: flex;
  overflow: hidden;
  border-radius: var(--prx-r-3xl, 28px);
}

.prx-person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: inherit;
}

/* ── Press and social logos ───────────────────────────────────────────────
   Both rows take images where they are supplied and fall back to the name set
   in type. A wordmark set in the site's own typeface is not the publication's
   logo, and reads as a claim the design cannot back up.
   ──────────────────────────────────────────────────────────────────────── */

.prx-proof-logos img {
  display: block;
  height: clamp(18px, 2.2vw, 26px);
  width: auto;
  object-fit: contain;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity .15s ease, filter .15s ease;
}

.prx-proof-logos a:hover img { opacity: 1; filter: grayscale(0); }

.prx-social {
  display: flex;
  align-items: center;
  gap: var(--prx-space-4, 1rem);
  flex-wrap: wrap;
}

.prx-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--prx-on-navy-rule, rgba(255,255,255,0.22));
  color: var(--prx-on-navy, #fff);
  transition: background .15s ease, border-color .15s ease;
}

.prx-social a:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.45); }

.prx-social img,
.prx-social svg {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

/* Until the official icon files are uploaded the name stands in, and a word
   does not fit a 36px circle — the same link becomes a pill instead. */
.prx-social a:has(.prx-social-name) {
  width: auto;
  height: auto;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
}

.prx-social .prx-social-name {
  font-size: var(--prx-text-xs, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* ── Spotlight band without a photograph ──────────────────────────────────
   The band is a two-column grid built around a picture. A lander that has no
   picture to give it left the second column empty, which looks like an image
   that failed to load. One column, and the copy is given a comfortable
   measure rather than being stretched the full width of the panel.
   ──────────────────────────────────────────────────────────────────────── */

.prx-person-panel--solo {
  grid-template-columns: 1fr;
}

.prx-person-panel--solo .prx-person-copy {
  max-width: 62ch;
}

/* ── Lander hero with no photograph ───────────────────────────────────────
   The hero is a two-column split built around a picture. A lander that has
   none was showing an empty right-hand column on its first screen, which
   reads as an image that failed to load rather than as a choice.
   ──────────────────────────────────────────────────────────────────────── */

.prx-hero--solo .prx-split {
  grid-template-columns: 1fr;
}

.prx-hero--solo .prx-split > * {
  max-width: 68ch;
}