/* ==========================================================================
   COMPONENT SYSTEM — reusable, composable UI primitives.
   Every visual atom the homepage/sections use lives here.
   Naming: .ps-<component>[__element][--modifier]
   ========================================================================== */

/* ---- BUTTONS ------------------------------------------------------------
   Stripe/Apple feel: crisp, low radius (NOT pill), confident weight,
   precise motion. No gradients. */
.ps-btn {
  --_bg: var(--c-ink);
  --_fg: #fff;
  --_bd: var(--c-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--btn-h);
  padding: 0 var(--space-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.ps-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ps-btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }

/* Primary — deep botanical brand */
.ps-btn--primary { --_bg: var(--c-brand); --_fg: #fff; --_bd: var(--c-brand); }
.ps-btn--primary:hover { --_bg: var(--c-brand-700); --_bd: var(--c-brand-700); }

/* Ink — near-black (Apple) */
.ps-btn--ink { --_bg: var(--c-ink); --_fg: #fff; --_bd: var(--c-ink); }
.ps-btn--ink:hover { --_bg: #000; --_bd: #000; }

/* Secondary — quiet outline on light */
.ps-btn--ghost {
  --_bg: transparent; --_fg: var(--c-ink); --_bd: var(--c-line-strong);
}
.ps-btn--ghost:hover {
  --_bg: rgba(10,37,64,0.04); --_bd: var(--c-ink);
  box-shadow: none; transform: translateY(-1px);
}

/* On dark surfaces */
.section--ink .ps-btn--ghost,
.section--sacred .ps-btn--ghost { --_fg: #fff; --_bd: rgba(255,255,255,0.28); }
.section--ink .ps-btn--ghost:hover,
.section--sacred .ps-btn--ghost:hover { --_bg: rgba(255,255,255,0.08); --_bd: #fff; }

/* Gold — sacred/luxury accent button, reserved for the closing CTA */
.ps-btn--gold { --_bg: var(--c-gold); --_fg: var(--c-gold-on); --_bd: var(--c-gold); }
.ps-btn--gold:hover { --_bg: var(--c-gold-soft); --_bd: var(--c-gold-soft); }

/* Text link button — Stripe style with travelling arrow */
.ps-btn--link {
  --_bg: transparent; --_fg: var(--c-brand); --_bd: transparent;
  min-height: auto; padding: 0; box-shadow: none !important;
}
.ps-btn--link:hover { transform: none; color: var(--c-brand-700); }
.ps-btn--link .ps-btn__arrow { transition: transform var(--dur-base) var(--ease-out); }
.ps-btn--link:hover .ps-btn__arrow { transform: translateX(4px); }
.section--ink .ps-btn--link { --_fg: var(--c-gold-soft); }

.ps-btn--sm { min-height: var(--btn-h-sm); font-size: var(--fs-meta); padding: 0 var(--space-md); }
.ps-btn--block { width: 100%; }
.ps-btn[disabled], .ps-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.ps-btn__arrow { width: 1em; height: 1em; }

/* ---- BADGE / PILL (the only legit pill use) ----------------------------- */
.ps-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  font-size: var(--fs-meta); font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  color: var(--c-brand);
  background: var(--c-brand-tint);
  border: 1px solid rgba(15,76,129,0.14);
  border-radius: var(--radius-pill);
}
.ps-badge--gold { color: var(--c-gold-ink); background: rgba(29,111,216,0.12); border-color: rgba(29,111,216,0.28); }
.ps-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---- CARD — editorial, not "template". Hairline + restrained lift ------- */
.ps-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.ps-card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--c-line-strong);
}
.ps-card__media {
  position: relative; aspect-ratio: 4 / 5; background: var(--c-paper-2);
  overflow: hidden;
}
.ps-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.ps-card--hover:hover .ps-card__media img { transform: scale(1.04); }
.ps-card__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.ps-card__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--weight-semibold); }
.ps-card__meta { font-size: var(--fs-meta); color: var(--text-muted); }

/* ---- FEATURE / PILLAR — number-led, no boxy card look ------------------- */
.ps-pillar { display: flex; flex-direction: column; gap: var(--space-sm); }
.ps-pillar__index {
  font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: var(--weight-light); color: var(--c-gold);
  font-feature-settings: "lnum" 1; line-height: 1;
}
.ps-pillar__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--weight-semibold); }
.ps-pillar__text { color: var(--text-soft); }
.ps-pillar + .ps-pillar { /* divider on stacked mobile */ }
.ps-pillar__icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--c-brand); background: var(--surface);
}
.ps-pillar__icon svg { width: 22px; height: 22px; }

/* ---- STAT — medical authority numbers ----------------------------------- */
.ps-stat { display: flex; flex-direction: column; gap: 4px; }
.ps-stat__num {
  font-family: var(--font-display); font-size: var(--fs-h2);
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display);
  line-height: 1; font-feature-settings: "lnum" 1;
}
.ps-stat__label { font-size: var(--fs-meta); color: var(--text-muted); letter-spacing: 0.01em; }

/* ---- QUOTE / TESTIMONIAL ------------------------------------------------ */
.ps-quote { display: flex; flex-direction: column; gap: var(--space-lg); }
.ps-quote__text {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--fs-xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight);
}
.ps-quote__person { display: flex; align-items: center; gap: var(--space-sm); }
.ps-quote__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ps-quote__name { font-weight: var(--weight-semibold); font-size: var(--fs-sm); }
.ps-quote__role { font-size: var(--fs-meta); color: var(--text-muted); }

/* ---- SECTION HEADER (shared) -------------------------------------------- */
.ps-sechead { display: flex; flex-direction: column; gap: var(--space-md); max-width: 40rem; }
.ps-sechead--center { text-align: center; align-items: center; margin-inline: auto; }
.ps-sechead__title { font-size: var(--fs-h2); }

/* ---- TRUST BAR (logos / press) ------------------------------------------ */
.ps-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.ps-trust__item { color: var(--c-faint); font-weight: var(--weight-medium); font-size: var(--fs-sm); letter-spacing: 0.02em; opacity: .9; }
.ps-trust__item img { height: 26px; width: auto; filter: grayscale(1); opacity: .6; transition: opacity var(--dur-base) var(--ease-out); }
.ps-trust__item:hover img { opacity: 1; }

/* ---- ACCORDION / FAQ ---------------------------------------------------- */
.ps-faq { border-top: 1px solid var(--border); }
.ps-faq__item { border-bottom: 1px solid var(--border); }
.ps-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-lg) 0; text-align: left;
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--weight-semibold);
}
.ps-faq__icon { flex: none; width: 22px; height: 22px; position: relative; transition: transform var(--dur-base) var(--ease-out); color: var(--c-brand-300); }
.ps-faq__icon::before, .ps-faq__icon::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: currentColor; }
.ps-faq__icon::after { transform: rotate(90deg); transition: transform var(--dur-base) var(--ease-out); }
.ps-faq__item[open] .ps-faq__icon::after { transform: rotate(0); }
.ps-faq__a { overflow: hidden; }
.ps-faq__a-inner { padding-bottom: var(--space-lg); color: var(--text-soft); max-width: 60ch; }
.ps-faq summary { list-style: none; cursor: pointer; }
.ps-faq summary::-webkit-details-marker { display: none; }

/* ---- MEDIA FRAME (premium image presentation) --------------------------- */
.ps-media {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  background: var(--c-paper-2); box-shadow: var(--shadow-lg);
}
.ps-media img { width: 100%; height: 100%; object-fit: cover; }
.ps-media--tall { aspect-ratio: 3 / 4; }
.ps-media--wide { aspect-ratio: 16 / 11; }
.ps-media--square { aspect-ratio: 1; }
.ps-media__tag {
  position: absolute; left: var(--space-md); bottom: var(--space-md);
  background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
  border-radius: var(--radius-pill); padding: 7px 14px;
  font-size: var(--fs-meta); font-weight: var(--weight-medium); color: var(--c-ink);
  box-shadow: var(--shadow-sm);
}

/* ---- FRAME — editorial image plate with a gold hairline inlay ---------- */
.ps-frame {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--c-paper-2);
  box-shadow: var(--shadow-lg);
}
.ps-frame::after {
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid rgba(29,111,216,0.55); border-radius: calc(var(--radius-md) - 6px);
}
.ps-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-frame--portrait { aspect-ratio: 4 / 5; }
.ps-frame--wide { aspect-ratio: 16 / 11; }
.ps-frame--square { aspect-ratio: 1; }
.ps-frame__ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--c-brand-300);
  background: radial-gradient(120% 90% at 70% 18%, rgba(29,111,216,0.16), transparent 55%),
              radial-gradient(90% 70% at 18% 88%, rgba(29,111,216,0.14), transparent 60%),
              var(--c-paper-2);
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--weight-light);
}
.ps-frame__ph svg { width: 64px; height: 64px; opacity: .5; }
/* On sacred ground the plate goes dark */
.section--sacred .ps-frame { background: var(--c-sacred-soft); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8); }
.section--sacred .ps-frame__ph { background: var(--c-sacred-soft); color: var(--c-gold-soft); }

/* ---- PRICE ------------------------------------------------------------- */
.ps-price { display: inline-flex; align-items: baseline; gap: var(--space-xs); }
.ps-price__now { font-weight: var(--weight-semibold); font-size: var(--fs-lg); }
.ps-price__was { color: var(--text-muted); text-decoration: line-through; font-size: var(--fs-sm); }

/* ---- FIELDS (forms / newsletter) --------------------------------------- */
.ps-field {
  width: 100%; min-height: var(--btn-h); padding: 0 var(--space-md);
  background: var(--surface); border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm); font-size: var(--fs-sm);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ps-field:focus { border-color: var(--c-brand-300); box-shadow: var(--ring); outline: none; }
.ps-inputgroup { display: flex; gap: var(--space-xs); }
.ps-inputgroup .ps-field { flex: 1; }

/* ---- DECOR: thin gold rule used as luxury signal ------------------------ */
.ps-rule-gold { width: 56px; height: 2px; background: var(--c-gold); border: 0; }

/* ---- PROSE / ENTRY (standard pages & posts) ---------------------------- */
.ps-entry__head { margin-bottom: var(--space-2xl); }
.ps-entry__title { font-size: var(--fs-h1); letter-spacing: var(--tracking-display); }
.ps-entry__content { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--text-soft); }
.ps-entry__content h2 { font-size: var(--fs-h3); margin-top: var(--space-2xl); }
.ps-entry__content h3 { font-size: var(--fs-xl); margin-top: var(--space-xl); }
.ps-entry__content a { color: var(--c-brand); text-decoration: underline; }
.ps-entry__content a:hover { color: var(--c-brand-700); }
.ps-entry__content img { border-radius: var(--radius-lg); margin-block: var(--space-lg); }
.ps-entry__content blockquote {
  border-left: 2px solid var(--c-gold); padding-left: var(--space-lg);
  font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl); color: var(--text);
}
.ps-entry__content ul, .ps-entry__content ol { padding-left: 1.25em; }
.ps-entry__content li + li { margin-top: var(--space-xs); }

/* ---- Floating WhatsApp FAB (site-wide) -------------------------------- */
.ps-wafab { position: fixed; right: 18px; bottom: 18px; z-index: var(--z-overlay); display: inline-flex; align-items: center; gap: 0; background: #25D366; color: #fff; border-radius: var(--radius-pill); box-shadow: 0 10px 26px -8px rgba(37,211,102,.6), var(--shadow-md); padding: 14px; transition: transform var(--dur-base) var(--ease-out), gap var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out); }
.ps-wafab svg { width: 26px; height: 26px; flex: none; }
.ps-wafab__label { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: var(--weight-semibold); font-size: var(--fs-sm); }
.ps-wafab:hover { transform: translateY(-2px); }
@media (min-width: 900px) { .ps-wafab:hover { gap: 10px; padding-inline: 18px; } .ps-wafab:hover .ps-wafab__label { max-width: 160px; } }
/* keep clear of the mobile sticky buy bar */
@media (max-width: 899px) { .ps-wafab { bottom: 82px; right: 14px; padding: 13px; } .ps-wafab svg { width: 24px; height: 24px; } }