@import url('/fonts/satoshi.css');

/* ============================================================
   v2 design system
   Palette carried over from v1. Type is Satoshi only. Shape is rounded.
   ============================================================ */

:root {
  --bg: #f8f5f0;
  --bg2: #ede8e1;
  --bg3: #e0d8ce;
  --dark: #1a1410;
  --dark2: #2e2620;
  --gold: #c5a870;
  --gold2: #a8895a;
  --gold-lt: #e8d9bc;
  --gold-xlt: #f5efe3;
  --accent-deep: #8b6a3e;
  --text: #1a1410;
  --text2: #6b5e4e;
  --text3: #9a8a78;
  --success: #2d6a4f;
  --danger: #9b2335;

  --r-card: 16px;
  --r-hero: 24px;
  --r-pill: 999px;

  --shadow-card: 0 4px 28px rgba(26, 20, 16, .06), 0 1px 4px hsla(40, 42%, 61%, .1);
  --shadow-lift: 0 8px 40px hsla(40, 42%, 61%, .15);
  --shadow-gold: 0 4px 18px hsla(40, 42%, 61%, .28);
  --focus-ring: 0 0 0 3px hsla(40, 42%, 61%, .25);

  --content: 1160px;
  --prose: 680px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Satoshi', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
h1 { font-size: clamp(38px, 5.2vw, 56px); letter-spacing: -1.12px; }
h2 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.52px; }
h3 { font-size: 21px; letter-spacing: -.3px; }
p { margin: 0 0 1em; color: var(--text2); }
a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
img { max-width: 100%; }

.wrap { max-width: var(--content); margin: 0 auto; padding: 0 24px; }
.prose { max-width: var(--prose); }
.eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text3); margin-bottom: 14px;
}
.num { font-variant-numeric: tabular-nums; }
.lede { font-size: 20px; color: var(--text2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--r-pill);
  font-size: 16px; font-weight: 500; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.btn-primary { background: var(--dark); color: var(--bg); }
.btn-primary:hover { background: var(--dark2); transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: var(--dark); box-shadow: var(--shadow-gold); }
.btn-gold:hover { background: var(--gold2); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--bg3); }
.btn-ghost:hover { border-color: var(--gold); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- announcement + nav ---------- */
.announce {
  background: var(--gold-lt); color: var(--dark);
  font-size: 14px; text-align: center; padding: 9px 16px;
}
.announce a { color: var(--dark); font-weight: 500; }
.announce-in { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 0; max-width: 1200px; margin: 0 auto; }
.ann-item { display: inline-flex; align-items: center; letter-spacing: .01em; }
.ann-item + .ann-item::before { content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold2); margin: 0 14px; }
a.ann-item { text-decoration: underline; text-decoration-color: var(--gold2);
  text-underline-offset: 3px; }
a.ann-item:hover { text-decoration-color: var(--dark); }
.ann-pill { display: inline-flex; align-items: center; gap: 7px; margin-left: 14px;
  padding: 3px 12px 3px 10px; border-radius: var(--r-pill); background: var(--dark);
  color: var(--bg) !important; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap; }
.ann-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.ann-pill:hover { background: var(--dark2); }
@media (max-width: 860px) {
  .ann-wide { display: none; }
  .announce { font-size: 13px; padding: 8px 12px; }
  .announce-in { gap: 6px 10px; }
  a.ann-item::before { display: none; }
  .ann-pill { margin-left: 0; font-size: 12px; }
}
.nav {
  position: sticky; top: 0; z-index: 900;
  background: rgba(248, 245, 240, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bg3);
}
/* Everything in this bar is nowrap. Without it, "Weight Loss", "Sexual Health",
   "Muscle & Strength", "Nerea Health" and both buttons all broke onto a second line at
   1360px, which is what made the spacing look random: a two-line item beside a one-line
   item destroys the rhythm even when the gaps are equal. */
.nav-in { display: flex; align-items: center; gap: 20px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700;
        letter-spacing: .01em; text-decoration: none; color: var(--text); line-height: 1;
        white-space: nowrap; flex: 0 0 auto; }
.logo img { height: 28px; width: auto; display: block; }
.logo-rev { color: var(--bg); }
@media (max-width: 560px) { .logo span { display: none; } .logo img { height: 28px; } }
.logo b { color: var(--gold2); font-weight: 700; }
/* Centred between the logo and the buttons rather than shoved up against the buttons. */
.nav-links { display: flex; gap: 26px; margin: 0 auto; flex: 0 1 auto; }
.nav-links a { color: var(--text2); text-decoration: none; font-size: 14.5px; font-weight: 500;
               white-space: nowrap; }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; gap: 8px; flex: 0 0 auto; }
/* LegitScript certified pill, at the right-hand end of the top announcement bar (Jim, 2026-10-22).
   Wide screens: the messages stay centred and the pill sits at the right edge. Mid widths: messages
   left, pill right. Phones: the pill wraps to its own line. */
.ann-center { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 0; }
/* The whole bar line is shifted so its right end (the pill) lines up with the right edge of the
   Get started button: the header's .wrap is max 1160px with 24px side padding, the bar has 16px
   side padding, so the right margin here is the difference (Jim, 2026-10-22). */
.announce-in { position: relative; margin-left: auto;
               margin-right: max(8px, calc((100% - 1128px) / 2 + 8px)); }
.announce .nav-seal { display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
            background: #051d40; border-radius: 999px; padding: 3px 4px 3px 12px; flex: 0 0 auto; }
@media (min-width: 1180px) { .announce .nav-seal { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } }
@media (min-width: 861px) and (max-width: 1179px) { .announce-in { justify-content: space-between; flex-wrap: nowrap; gap: 12px; } }
.nav-seal-txt { font-size: 13px; font-weight: 500; line-height: 1; color: #fff; white-space: nowrap; }
.nav-seal-txt b { font-weight: 700; }
.nav-seal-txt .ls-blue { color: #57cbf5; }
.nav-seal-chk { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
                border-radius: 5px; background: #79c944; flex: 0 0 auto; }
.nav-seal-chk svg { width: 13px; height: 13px; }
@media (max-width: 860px) { .nav-seal-txt { font-size: 12px; } .ann-center { gap: 6px 10px; } }
.nav-cta .btn { padding: 8px 15px; font-size: 14px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 1180px) { .nav-links { gap: 20px; } .nav-links a { font-size: 14px; } }
@media (max-width: 1040px) { .nav-links { display: none; } .nav-cta { margin-left: auto; } }

/* ---------- hero ---------- */
.hero { padding: 72px 0 40px; }
/* Image beside text: the two columns must end level. stretch + object-fit is the
   pattern; a fixed aspect-ratio on the image fights it, so it is cleared here and
   restored at the stacked breakpoint where there is no neighbour to match. */
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: stretch; }
.hero-grid .ph-hero { height: 100%; aspect-ratio: auto; }
.hero h1 { margin-bottom: 18px; }
.hero .lede { max-width: 30em; }
.trust-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.trust-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--text2); }
.trust-list .dot {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; margin-top: 1px;
  background: var(--gold-xlt); border: 1px solid var(--gold-lt);
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; }
  .hero-grid .ph-hero { height: auto; aspect-ratio: 72 / 56; } }

/* ---------- bento ---------- */
.bento { padding: 8px 0 20px; display: grid; gap: 14px; }
.bento-row1 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bento-row2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gcard {
  position: relative; border-radius: var(--r-hero); padding: 26px;
  min-height: 268px; display: flex; flex-direction: column; justify-content: space-between;
  text-decoration: none; overflow: hidden; transition: transform .25s, box-shadow .25s;
  box-shadow: var(--shadow-card);
}
.gcard > .bg {
  position: absolute; right: 0; top: 0; height: 100%; width: 47%;
  object-fit: cover; opacity: .9; z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
  mask-image: linear-gradient(to right, transparent, #000 22%);
}
.gcard > div, .gcard > .more { max-width: 60%; }
.gcard > * { position: relative; z-index: 1; }
.gcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.gcard h3 { font-size: 25px; margin: 0; }
.gcard .sub { font-size: 15px; opacity: .82; }
.gcard .more { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.gcard-a { background: var(--dark); color: var(--bg); }
.gcard-a .sub, .gcard-a .more { color: var(--gold-lt); }
.gcard-b { background: var(--gold-xlt); color: var(--text); border: 1px solid var(--gold-lt); }
.gcard-b .more { color: var(--accent-deep); }
.gcard-c { background: var(--bg2); color: var(--text); border: 1px solid var(--bg3); }
.gcard-c .more { color: var(--accent-deep); }
.gcard .art {
  position: absolute; right: -18px; bottom: -18px; width: 148px; height: 148px;
  border-radius: 50%; background: currentColor; opacity: .07;
}
.scard {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid var(--bg3); border-radius: var(--r-card);
  padding: 20px 22px; min-height: 104px; text-decoration: none; color: var(--text);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.scard:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.scard .label { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.scard .label em { font-style: normal; color: var(--accent-deep); }
.scard .chev { color: var(--text3); font-size: 20px; }
@media (max-width: 980px) { .bento-row1, .bento-row2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bento-row1, .bento-row2 { grid-template-columns: 1fr; } }

/* ---------- trust bar ---------- */
.trustbar { background: var(--bg2); border-top: 1px solid var(--bg3); border-bottom: 1px solid var(--bg3); margin-top: 34px; }
.trustbar-in { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; padding: 22px 24px; }
/* min-width:0 or a grid item refuses to shrink below its content and pushes the whole
   page sideways. That is what put 199px of horizontal scroll on the phone home page:
   .wrap and .trustbar-in each add 24px of padding, leaving ~130px per column, and the
   [PRICING_MODEL] token is nowrap at 122px plus its tick. */
.trustbar div { font-size: 13px; color: var(--text2); display: flex; gap: 9px;
                align-items: center; min-width: 0; }
.trustbar .tick { color: var(--gold2); font-weight: 700; flex: 0 0 auto; }
@media (max-width: 980px) { .trustbar-in { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  /* one per row, and stop paying for the padding twice */
  .trustbar-in { grid-template-columns: 1fr; gap: 12px; padding: 18px 0; }
}

/* ---------- generic section ---------- */
section.band { padding: 72px 0; }
section.band.alt { background: var(--bg2); }
section.band.dark { background: var(--dark); color: var(--bg); }
section.band.dark h2 { color: var(--bg); }
section.band.dark p { color: var(--gold-lt); }
.section-head { max-width: 42em; margin-bottom: 36px; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step { background: #fff; border: 1px solid var(--bg3); border-radius: var(--r-card); padding: 24px; }
section.band.dark .step { background: var(--dark2); border-color: #3d342c; }
.step .n {
  font-size: 12px; font-weight: 700; color: var(--gold2);
  letter-spacing: .1em; margin-bottom: 12px;
}
.step h3 { font-size: 18px; }
.step p { font-size: 15px; margin: 0; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- cards / grids ---------- */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid3, .grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid3, .grid4 { grid-template-columns: 1fr; } }
.card {
  background: #fff; border: 1px solid var(--bg3); border-radius: var(--r-card);
  padding: 22px; text-decoration: none; color: var(--text); display: block;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
a.card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.card h3 { font-size: 18px; margin-bottom: 6px; }
.card p { font-size: 14.5px; margin: 0; }
.card .price { margin-top: 12px; font-size: 15px; font-weight: 700; }
.thumb {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px; margin-bottom: 16px; background: var(--gold-xlt);
}

/* ---------- placeholder imagery ---------- */
.ph { display: block; background: var(--gold-xlt); }
.ph-hero { width: 100%; aspect-ratio: 72 / 56; object-fit: cover; border-radius: var(--r-hero); }
.ph-step { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; margin-bottom: 16px; }
.ph-portrait { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.ph-team { width: 100%; max-width: 190px; aspect-ratio: 1; border-radius: var(--r-card); object-fit: cover; }
.ph-verb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }

/* ---------- testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote {
  background: #fff; border: 1px solid var(--bg3); border-radius: var(--r-card); padding: 24px;
}
.quote blockquote { margin: 0 0 18px; font-size: 17px; line-height: 1.55; letter-spacing: -.2px; }
.quote .who { display: flex; align-items: center; gap: 13px; }
.quote .who b { display: block; font-size: 15px; }
.quote .who span { font-size: 13px; color: var(--text3); }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { text-align: center; padding: 22px 12px; border-right: 1px solid var(--bg3); }
.stat:last-child { border-right: none; }
.stat .v { font-size: 40px; font-weight: 700; letter-spacing: -1px; }
.stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text3); font-weight: 700; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat { border-right: none; } }

/* ---------- faq ---------- */
.faq { max-width: 780px; }
.faq details {
  border-bottom: 1px solid var(--bg3); padding: 18px 0;
}
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 17.5px; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; letter-spacing: -.2px;
  /* the only tap target on the FAQ page, and it was 28px tall */
  min-height: 44px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--gold2); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: '\2013'; }
.faq p { margin: 12px 0 0; font-size: 16px; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--bg3); }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text3); font-weight: 700; }
td.num, th.num { font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; border: 1px solid var(--bg3); border-radius: var(--r-card); background: #fff; }

/* ---------- product page ---------- */
.pdp-head { background: var(--bg2); border-bottom: 1px solid var(--bg3); padding: 40px 0 44px; }
.pdp-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 44px; align-items: stretch; }
/* A product shot uses contain, not cover: cropping a vial to fit a text column
   cuts the product in half. The box still fills the row, so the edges line up. */
.pdp-media { position: relative; min-height: 240px; border-radius: var(--r-hero);
  overflow: hidden; background: var(--gold-xlt); }
.pdp-media img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; aspect-ratio: auto; }
.pdp-art {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-hero); background: var(--gold-xlt);
}
.spec { display: grid; gap: 0; border: 1px solid var(--bg3); border-radius: var(--r-card); background: #fff; overflow: hidden; }
.spec div { display: flex; justify-content: space-between; gap: 18px; padding: 13px 18px; border-bottom: 1px solid var(--bg2); font-size: 15px; }
.spec div:last-child { border-bottom: none; }
.spec dt { color: var(--text3); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.crumb { font-size: 14px; color: var(--text2); text-decoration: none; }
@media (max-width: 900px) { .pdp-grid { grid-template-columns: 1fr; }
  .pdp-media { min-height: 0; aspect-ratio: 1; } }

/* ---------- footer ---------- */
footer { background: var(--dark); color: var(--bg); padding: 60px 0 34px; margin-top: 20px; }
footer a { color: var(--gold-lt); text-decoration: none; font-size: 14.5px; }
footer a:hover { text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; }
.foot-grid h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); margin-bottom: 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-note { margin-top: 40px; padding-top: 22px; border-top: 1px solid #3d342c; font-size: 12.5px; color: #9a8a78; }
.foot-note p { color: #9a8a78; font-size: 12.5px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   TOKENS: unfilled decisions. This is the review layer.
   ============================================================ */
.pill-rx { background: var(--bg2); color: var(--text2); }
.tok {
  background: var(--gold-lt);
  outline: 1px dashed var(--gold2);
  outline-offset: 1px;
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 700;
  color: var(--accent-deep);
  white-space: nowrap;
}
/* A nowrap token wider than a phone column cannot be broken, so it drives horizontal
   scroll wherever it lands. Let it break on small screens. */
@media (max-width: 560px) { .tok { white-space: normal; overflow-wrap: anywhere; } }
section.band.dark .tok, footer .tok, .gcard-a .tok { background: #4a3d2c; color: var(--gold-lt); outline-color: var(--gold2); }
html[data-tok-off="true"] .tok { background: transparent; outline: none; color: inherit; font-weight: inherit; }

.tok-block {
  border: 1px dashed var(--gold2); background: var(--gold-xlt);
  border-radius: var(--r-card); padding: 28px; text-align: center;
}
.tok-block .eyebrow { color: var(--accent-deep); }
.tok-block p { color: var(--text2); margin: 0 auto; max-width: 46em; }

#tok-panel {
  position: fixed; right: 14px; bottom: 14px; z-index: 9999; width: 250px;
  background: #fffdfa; border: 1px solid var(--bg3); border-radius: var(--r-card);
  box-shadow: var(--shadow-lift); padding: 13px 14px; font-size: 12.5px; line-height: 1.5;
}
#tok-panel label { display: flex; gap: 8px; align-items: center; font-weight: 700; cursor: pointer; }
#tok-count { margin: 8px 0; padding-bottom: 9px; border-bottom: 1px solid var(--bg2); color: var(--text2); }
#tok-legend { display: grid; gap: 4px; }
#tok-legend div { display: flex; justify-content: space-between; color: var(--text2); }
#tok-legend b { color: var(--accent-deep); font-variant-numeric: tabular-nums; }
#tok-panel .hint { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--bg2); color: var(--text3); font-size: 11.5px; }

.review-banner {
  background: var(--dark); color: var(--gold-lt); text-align: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 14px;
}
@media print { #tok-panel, .review-banner { display: none; } }
/* On a phone the review panel is a fixed card covering most of the screen, which makes
   the thing it exists to help you review impossible to look at. Collapse it to the
   checkbox line; tapping it opens the tally. */
@media (max-width: 720px) {
  #tok-panel { width: auto; max-width: 62vw; right: 10px; bottom: 10px; padding: 9px 11px; }
  #tok-panel #tok-count, #tok-panel #tok-legend, #tok-panel .hint { display: none; }
  #tok-panel:focus-within #tok-count, #tok-panel:focus-within #tok-legend,
  #tok-panel:hover #tok-count, #tok-panel:hover #tok-legend { display: block; }
  #tok-panel:focus-within #tok-legend, #tok-panel:hover #tok-legend { display: grid; }
}

/* ---------------------------------------------- availability states */
.notice{
  background:var(--gold-xlt); border:1px solid var(--gold-lt);
  border-radius:var(--r-card); padding:18px 20px; max-width:44em;
}
.notice b{ display:block; color:var(--dark); margin-bottom:6px; font-size:16px; }
.notice p{ margin:8px 0 0; color:var(--text2); font-size:15px; line-height:1.6; }
.notice-hold{ background:#f7f1e4; border-color:var(--gold2); }
.notice .fineprint{ font-size:12.5px; color:var(--text3); margin-top:8px; }

.waitlist{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.waitlist input{
  flex:1 1 15em; min-width:0; padding:11px 14px; font:inherit; font-size:15px;
  color:var(--dark); background:var(--bg); border:1px solid var(--gold-lt);
  border-radius:var(--r-pill);
}
.waitlist input:focus{ outline:2px solid var(--gold2); outline-offset:1px; }

.pill{
  display:inline-block; padding:5px 12px; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:600; letter-spacing:.01em;
}
.pill-off{ background:var(--bg3); color:var(--text2); }
.pill-hold{ background:var(--gold-lt); color:var(--accent-deep); }

.cat-foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cat-foot .of{ font-size:13px; color:var(--text3); }

/* ---------------------------------------------- prototype PDP (/preview/nad/) */
.pv-hero{ background:var(--bg2); padding:34px 0 44px; }
/* stretch, not center: the art column matches the height of the buy column beside it,
   so the two sides of the hero line up top and bottom. The image crops to fill rather
   than letterboxing, which is why it needs object-fit. */
.pv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:stretch; }
.pv-art{ position:relative; border-radius:var(--r-hero); overflow:hidden; background:var(--bg3); }
.pv-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 30%; display:block; }
.pv-stock{ position:absolute; top:14px; left:14px; z-index:2; background:var(--bg);
  color:var(--success); font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:var(--r-pill); }
.pv-buy{ background:var(--bg); border:1px solid var(--gold-lt); border-radius:var(--r-card);
  padding:20px; margin-bottom:22px; }
.pv-price{ display:flex; align-items:baseline; gap:8px; margin-bottom:14px; }
.pv-price b{ font-size:34px; letter-spacing:-.02em; }
.pv-price span{ color:var(--text2); font-size:14.5px; }
.pv-buy .btn{ width:100%; text-align:center; }
.pv-fine{ font-size:12.5px; color:var(--text3); margin:12px 0 0; }
.pv-bul{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:12px; }
.pv-bul li{ font-size:15px; color:var(--text2); line-height:1.55; padding-left:20px; position:relative; }
.pv-bul li:before{ content:"—"; position:absolute; left:0; color:var(--gold2); }
.pv-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.pv-badges span{ font-size:12.5px; color:var(--text2); background:var(--bg);
  border:1px solid var(--gold-lt); border-radius:var(--r-pill); padding:6px 13px; }
/* Benefit cards. The icon sits on the same line as its subhead, so the eye takes the
   two as one unit instead of reading a floating badge and then a title. The index
   numerals are gone: with the icon inline the row already reads as a set, and the
   numerals were competing with the subhead for the top of the card. */
.pcard{ position:relative; background:#fcf9f4; border:0; border-radius:var(--r-hero);
  padding:30px 26px;
  box-shadow:0 1px 2px rgba(26,20,16,.04), 0 16px 40px -16px rgba(26,20,16,.12); }
.pcard-head{ display:flex; align-items:center; gap:12px; margin:0 0 14px; }
/* A rounded square, not a circle: circles are the default everyone reaches for. */
.pcard-i{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; background:#f4ecdd;
  display:flex; align-items:center; justify-content:center; color:var(--dark); }
.pcard-i svg{ width:23px; height:23px; display:block; }
.pcard-i .gold{ stroke:var(--gold); }
.pcard-i circle, .pcard-i [stroke-width="1.15"]{ opacity:.55; }
.pcard-i .gold-fill{ fill:var(--gold); stroke:none; }
.pcard h3{ font-size:20px; line-height:1.2; letter-spacing:-.015em; margin:0;
  white-space:nowrap; }
.pcard p{ font-size:17px; line-height:1.65; color:#6b5f55; margin:0; }
.pcard-turn{ background:#f7f0e3; }
.pcard-more{ display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  font-size:16px; font-weight:500; color:var(--accent-deep); text-decoration:none; }
.pcard-more:hover{ text-decoration:underline; }
/* The one-line rule is the constraint, so the row drops to a single column while the
   cards are still wide enough to honour it. Two narrow columns forced the subhead onto
   a second line, which is the thing this layout exists to avoid. */
@media (max-width:1060px){ .cards-3{ grid-template-columns:1fr; }
  .cards-3 .pcard{ padding:26px; } }
@media (max-width:560px){ .pcard{ padding:24px; } }
/* On a narrow phone the longest subhead sat at exactly zero spare pixels, which is one
   font-rendering difference away from clipping (nowrap overflows, it does not wrap).
   Buy the room back from the badge and the type rather than breaking the one-line rule. */
@media (max-width:480px){
  .pcard{ padding:22px 20px; }
  .pcard-head{ gap:10px; }
  .pcard-i{ width:34px; height:34px; border-radius:10px; }
  .pcard-i svg{ width:20px; height:20px; }
  .pcard h3{ font-size:18px; }
  .pcard p{ font-size:16px; }
}
.pv-ev{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:26px; }
.pv-ev h3{ font-size:16px; margin:0 0 8px; color:var(--accent-deep); }
.pv-ev p{ font-size:14.5px; color:var(--text2); line-height:1.65; margin:0; }
.pv-inc{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; }
.pv-inc li{ font-size:15px; color:var(--text2); padding-left:24px; position:relative; }
.pv-inc li:before{ content:"\2713"; position:absolute; left:0; color:var(--gold2); font-weight:700; }
.pv-cite{ margin:14px 0 0; padding-left:20px; color:var(--text2); font-size:14px; line-height:1.8; }
.pv-disc{ margin-top:26px; padding-top:18px; border-top:1px solid var(--bg3); }
.pv-disc p{ font-size:12.5px; color:var(--text3); line-height:1.65; }
@media (max-width:900px){ .pv-grid{ grid-template-columns:1fr; gap:26px; }
  .pv-art{ aspect-ratio:4/3; }
  .pv-ev{ grid-template-columns:1fr; gap:20px; } }

/* In a picture-beside-text row the text column's box must end where its words end.
   A trailing <p> margin leaves the box 13px taller than the last line, so the picture
   (which fills the box) hangs below the copy. Collapse it. */
.pdp-grid > div > :last-child,
.pv-grid > div > :last-child,
.pv-split > div > :last-child,
.hero-grid > div > :last-child { margin-bottom: 0; }

/* ---- lifestyle imagery (prototype) -------------------------------------- */
/* Photo cards with the caption over the image, the pattern the competitor uses
   for its benefit row. Text sits on a gradient scrim so it stays legible on any
   frame without needing a per-image treatment. */
.photo-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:26px; }
.photo-card{ position:relative; margin:0; border-radius:var(--r-card); overflow:hidden;
  aspect-ratio:3/4; }   /* margin:0 matters: <figure> ships with 40px side margins */
.photo-card img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease; }
.photo-card:hover img{ transform:scale(1.04); }
.photo-card figcaption{ position:absolute; inset:auto 0 0 0; padding:34px 16px 16px;
  background:linear-gradient(to top, rgba(26,20,16,.82), rgba(26,20,16,0));
  color:#fff; font-size:14px; line-height:1.45; font-weight:500; }

/* Photo beside prose, alternating sides. */
/* The TEXT sets the height of this row, not the picture.
   align-items:stretch alone was not enough: the row still sized itself to the image's
   natural height, so the boxes matched while 181px of blank space sat under the last
   line of copy. Taking the image out of flow (absolute inside a relative cell) means it
   contributes nothing to row height, so the row collapses to the text and the image
   fills whatever that turns out to be. */
.pv-split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:stretch; }
.pv-split-art{ position:relative; min-height:320px; border-radius:var(--r-hero); overflow:hidden; }
.pv-split-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pv-split.flip{ grid-template-columns:1.1fr 0.9fr; }


/* Closing call to action over a wide lifestyle frame. */
.pv-cta{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--r-hero);
  overflow:hidden; background:var(--bg2); }
.pv-cta img{ width:100%; height:100%; object-fit:cover; display:block; min-height:340px; }
.pv-cta-in{ padding:44px 40px; align-self:center; }
.pv-cta-in ul{ list-style:none; padding:0; margin:18px 0 24px; }
.pv-cta-in li{ font-size:15px; color:var(--text2); padding:7px 0 7px 26px; position:relative; }
.pv-cta-in li:before{ content:"\2713"; position:absolute; left:0; color:var(--gold); font-weight:700; }

@media (max-width:900px){
  .photo-row{ grid-template-columns:repeat(2,1fr); }
  .pv-split, .pv-split.flip{ grid-template-columns:1fr; gap:24px; }
  .pv-split-art{ min-height:0; aspect-ratio:4/5; }
  .pv-cta{ grid-template-columns:1fr; }
  .pv-cta img{ min-height:240px; }
}
@media (max-width:560px){ .photo-row{ grid-template-columns:1fr; } }

/* The header is sticky at 69px, so an in-page link scrolls its target up under it.
   The evidence section cleared it by 14px, which is luck rather than design. */
section[id], [id].band{ scroll-margin-top:88px; }

/* ---- how-it-works step cards ------------------------------------------------
   Follows the competitor's structure (headline, rule, STEP label beside a large
   numeral, then a photograph anchoring the card) in our own warm palette rather
   than their white-and-green. Kept off the shared .step class, which the homepage
   uses for a four-up row and must not change.
   The card is a flex column and the photo has margin-top:auto, so the photos line
   up along a common baseline however unevenly the copy wraps. */
.stepcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.stepcard{ display:flex; flex-direction:column; background:#fff; border:0;
  border-radius:var(--r-hero); padding:28px;
  box-shadow:0 1px 2px rgba(26,20,16,.04), 0 16px 40px -16px rgba(26,20,16,.12); }
.stepcard h3{ font-size:20px; line-height:1.3; letter-spacing:-.015em; margin:0 0 18px;
  max-width:15em; }
.stepcard .rule{ height:1px; background:var(--gold-lt); margin:0 0 18px; }
.stepcard .row{ display:grid; grid-template-columns:54px 1fr; gap:18px; align-items:start; }
.stepcard .lab{ font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text3); margin-bottom:4px; }
.stepcard .num{ font-size:38px; line-height:.9; font-weight:500; color:var(--dark);
  font-variant-numeric:tabular-nums; }
.stepcard p{ font-size:16px; line-height:1.6; color:var(--text2); margin:0; }
.stepcard .shot{ margin-top:auto; padding-top:26px; }
.stepcard .shot img{ width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-card); display:block; }
@media (max-width:860px){ .stepcards{ grid-template-columns:1fr; gap:16px; }
  .stepcard .shot img{ aspect-ratio:16/9; } }
@media (max-width:480px){ .stepcard{ padding:22px 20px; }
  .stepcard h3{ font-size:19px; } .stepcard .num{ font-size:34px; }
  .stepcard .row{ grid-template-columns:46px 1fr; gap:14px; } }

/* ---- product hero: tabbed benefits box -------------------------------------
   Replaces the price panel. The price came out because it was the loudest thing
   in the hero and the pricing model is still an open decision; leading with a
   number we have not settled was selling something we cannot quote.
   Tabs are CSS only, driven by two hidden radios, so they work with no JS. */
.pv-tabs{ background:#fff; border:1px solid var(--bg3); border-radius:var(--r-hero);
  padding:8px 8px 4px; margin-bottom:18px; }
.pv-tabs input{ position:absolute; opacity:0; pointer-events:none; }
.pv-tabnav{ display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--bg2);
  border-radius:var(--r-pill); padding:4px; }
.pv-tabnav label{ text-align:center; font-size:14.5px; font-weight:600; padding:9px 10px;
  border-radius:var(--r-pill); cursor:pointer; color:var(--text2);
  transition:background .18s, color .18s; }
.pv-tabnav label:hover{ color:var(--text); }
.pv-tabs input:focus-visible + label{ box-shadow:var(--focus-ring); }
#pv-t1:checked ~ .pv-tabnav label[for="pv-t1"],
#pv-t2:checked ~ .pv-tabnav label[for="pv-t2"]{ background:#fff; color:var(--text);
  box-shadow:0 1px 3px rgba(26,20,16,.10); }
/* Both panels occupy the same grid cell, so the box is always as tall as the taller of
   the two and switching tabs moves nothing. Toggling display:none instead made the box
   shrink ~145px on the Description tab, and because the text column drives the row
   height, the photograph beside it resized and the whole page below reflowed on a
   click. visibility:hidden also keeps the inactive panel out of the tab order and away
   from screen readers, which display:none did for free and opacity would not. */
.pv-panels{ display:grid; }
.pv-panel{ grid-area:1 / 1; visibility:hidden; padding:20px 14px 6px; }
#pv-t1:checked ~ .pv-panels .pv-panel-1,
#pv-t2:checked ~ .pv-panels .pv-panel-2{ visibility:visible; }
.pv-rows{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.pv-rows li{ display:grid; grid-template-columns:24px 1fr; gap:13px; align-items:start;
  font-size:15px; line-height:1.55; color:var(--text2); }
.pv-rows svg{ width:22px; height:22px; margin-top:1px; color:var(--dark); }
.pv-rows .gold{ stroke:var(--gold); }
.pv-rows .gold-fill{ fill:var(--gold); stroke:none; }
.pv-rows b{ color:var(--text); font-weight:600; }
.pv-desc{ font-size:15px; line-height:1.65; color:var(--text2); margin:0; }
.pv-foot{ display:flex; gap:18px; flex-wrap:wrap; align-items:center;
  border-top:1px solid var(--bg2); margin:18px 6px 0; padding:13px 8px 10px;
  font-size:13px; color:var(--text2); }
.pv-foot span{ display:inline-flex; align-items:center; gap:7px; }
.pv-foot svg{ width:15px; height:15px; color:var(--gold2); }
.pv-cta-row{ margin-bottom:16px; }
.pv-cta-row .btn{ width:100%; text-align:center; }
.pv-cta-row .pv-fine{ margin-top:10px; }
@media (max-width:480px){ .pv-panel{ padding:18px 8px 4px; } }

/* Notice at Collection: a three-column table of categories, purposes and retention.
   Wrapped so it scrolls inside itself on a phone rather than pushing the page sideways. */
.prose .spec-table{ display:block; overflow-x:auto; width:100%; border-collapse:collapse;
  margin:18px 0; font-size:14.5px; -webkit-overflow-scrolling:touch; }
.prose .spec-table th, .prose .spec-table td{ border:1px solid var(--bg3);
  padding:10px 12px; text-align:left; vertical-align:top; min-width:150px; }
.prose .spec-table th{ background:var(--bg2); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--text3); }

/* ---- intake form (2026-09-16) */
.intake-note{ background:var(--gold-xlt); border:1px solid var(--gold-lt); border-radius:var(--r-card);
  padding:14px 18px; font-size:14.5px; color:var(--text2); margin:6px 0 26px; }
.intake fieldset{ min-width:0; border:1px solid var(--bg3); border-radius:var(--r-card); padding:20px 22px 8px; margin:0 0 22px; }
.intake legend{ font-weight:700; font-size:17px; color:var(--dark); padding:0 8px; }
.intake .f{ margin-bottom:18px; min-width:0; }
.intake .checks label{ min-width:0; overflow-wrap:anywhere; }
.intake .f > label{ display:block; font-weight:600; font-size:15px; color:var(--dark); margin-bottom:7px; }
.intake .req{ font-weight:400; font-size:12px; color:var(--text3); margin-left:6px; }
.intake input[type=text], .intake input[type=email], .intake input[type=tel], .intake input[type=date],
.intake select, .intake textarea{
  width:100%; box-sizing:border-box; padding:11px 14px; font:inherit; font-size:15px;
  color:var(--dark); background:var(--bg); border:1px solid var(--gold-lt); border-radius:12px; }
.intake textarea{ resize:vertical; }
.intake input:focus, .intake select:focus, .intake textarea:focus{ outline:2px solid var(--gold2); outline-offset:1px; }
.intake .opts{ display:flex; gap:18px; flex-wrap:wrap; }
.intake .opts label, .intake .checks label{ display:flex; gap:9px; align-items:flex-start; font-size:15px; color:var(--text); }
.intake .checks{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:8px 20px; }
.intake .checks.consent{ grid-template-columns:1fr; gap:12px; }
.intake .checks input, .intake .opts input{ margin-top:4px; flex:none; }
.intake .hint{ font-size:13.5px; color:var(--text3); margin-top:6px; line-height:1.5; }
.intake button[disabled]{ opacity:.55; cursor:not-allowed; }

/* ---- price on the product hero (2026-09-24) */
.pv-price{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:6px 0 4px; }
.pv-price .amt{ font-size:26px; font-weight:700; color:var(--dark); }
.from{ display:inline-block; font-size:12px; font-weight:500; color:var(--text2); letter-spacing:.02em; margin-right:4px; vertical-align:baseline; }
.pv-price .inc{ font-size:13.5px; color:var(--text2); max-width:34em; line-height:1.5; }
.card .price{ font-weight:700; color:var(--dark); margin-top:6px; }

/* ---- health form pages (2026-09-24) */
.intake-wrap{ max-width:820px; }
.intake-head{ margin-bottom:22px; }
.intake-head .lede{ margin-top:10px; }
.intake .q.standalone{ background:var(--gold-xlt); border:1px solid var(--gold-lt); border-radius:12px; padding:14px 16px; }
.intake-err{ background:#fbe9ec; border:1px solid var(--danger); color:var(--danger); border-radius:12px; padding:12px 16px; margin:0 0 16px; font-size:14.5px; }
.intake button[type=submit]{ margin-top:6px; }
ul.picks{ list-style:none; padding:0; margin:14px 0 0; }
ul.picks li{ padding:10px 0; border-bottom:1px solid var(--bg2); font-size:16px; }

/* ---------- where we're available (/states/, About) ---------- */
.states-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 48px; align-items: center; margin: 36px 0; }
.prose .states-block { grid-template-columns: 1fr; gap: 24px; }
.states-copy h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin: 0 0 16px; }
.states-copy p { color: var(--text2); font-size: 18px; line-height: 1.6; max-width: 28em; }
.states-key { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 18px; color: var(--text2); font-size: 15px; }
.states-key span { display: inline-flex; align-items: center; gap: 10px; }
.states-key .st { width: 24px; height: 24px; border-radius: 6px; }
.states-map { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; max-width: 640px; width: 100%; }
.st { display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
  background: var(--dark); color: var(--bg); border-radius: 8px;
  font-size: clamp(9px, 1.6vw, 14px); font-weight: 700; letter-spacing: .02em; }
.st-off { background: transparent; color: var(--text3); border: 1.5px dashed var(--text3); }
@media (max-width: 860px) {
  .states-block { grid-template-columns: 1fr; gap: 24px; }
  .states-map { gap: 3px; }
  .st { border-radius: 4px; }
}

/* Advertising notice and off switch (ads.py, 2026-10-28) */
.nh-notice { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(255,255,255,.96);
  color: var(--text2); border-top: 1px solid var(--bg3); padding: 8px 16px; display: flex; gap: 12px;
  align-items: center; justify-content: center; flex-wrap: wrap; font-size: 13px; line-height: 1.4; }
.nh-notice p { margin: 0; font-size: 13px; line-height: 1.4; }
.nh-notice a { color: inherit; text-decoration: underline; }
.nh-notice-btns { display: flex; gap: 8px; }
.nh-notice button { font: 500 13px/1 inherit; border-radius: 4px; padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--bg3); background: transparent; color: inherit; }
.nh-notice button.nh-ok { background: var(--text); border-color: var(--text); color: var(--bg); }
.nh-ads-control { margin: 14px 0 18px; padding: 16px 18px; border: 1px solid var(--bg3); border-radius: 12px; }
.nh-ads-status { margin: 0 0 12px; }