/* ============================================================
   LAVENA RE-IGNITE — Advertorial
   Premium health-journalism aesthetic. Trust over pressure.
   ============================================================ */

:root {
  /* Backgrounds */
  --bg:            #F8F6F2;   /* primary warm off-white */
  --bg-alt:        #FAF8F4;   /* cards / raised surfaces */
  --bg-sunken:     #F5F2EC;   /* subtle section banding */

  /* Text */
  --ink:           #2B2B2B;   /* body soft charcoal */
  --ink-soft:      #4A4A47;   /* secondary text */
  --ink-muted:     #7A7A75;   /* metadata / captions */

  /* Navy (primary accent) */
  --navy:          #233746;   /* headers, CTA bg, dividers */
  --navy-soft:     #28465A;   /* lighter navy */
  --navy-line:     #314E63;   /* thin rules */

  /* Gold/bronze (secondary accent — sparing) */
  --gold:          #B08D57;
  --gold-soft:     #C19A5B;

  /* On-dark text */
  --on-navy:       #FAF8F4;   /* warm white */

  /* Type */
  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Inter", -apple-system, system-ui, sans-serif;

  /* Reading measure */
  --measure: 700px;
  --rail:    330px;
  --shell:   1120px;   /* outer content container */

  /* Spacing scale */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1.8;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }

/* ============================================================
   TOP BANNER (teaser kicker, like the exemplar's top strip)
   ============================================================ */
.topbanner {
  background: var(--navy);
  color: var(--on-navy);
  text-align: center;
  padding: 11px 20px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.topbanner__kicker {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 10px;
  white-space: nowrap;
}
.topbanner__kicker::after { content: ":"; }
.topbanner__text { font-weight: 500; }

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead {
  border-bottom: 1px solid rgba(49, 78, 99, 0.14);
  background: var(--bg);
}
.masthead__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--s-3) var(--s-3);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-2);
}
.masthead__pill {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--bg-alt);
  border: 1px solid rgba(49, 78, 99, 0.18);
  border-radius: 999px;
  padding: 6px 15px;
  white-space: nowrap;
}
.masthead__pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.masthead__name {
  justify-self: center;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.masthead__the {
  font-style: italic;
  font-weight: 400;
  font-size: 0.62em;
  margin-right: 3px;
  vertical-align: 1px;
}
.masthead__share {
  justify-self: end;
  display: flex;
  gap: var(--s-1);
  color: var(--ink-muted);
}
.share-ico {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(49, 78, 99, 0.18);
  border-radius: 999px;
}

/* ============================================================
   LAYOUT GRID  (article + desktop rail)
   ============================================================ */
.wrap {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--s-3);
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) var(--rail);
  column-gap: var(--s-6);
  justify-content: center;
  align-items: stretch;
}
.lede {
  grid-column: 1 / -1;
  padding-top: var(--s-6);
  text-align: center;
}
.article {
  grid-column: 1;
  min-width: 0;
  padding-top: var(--s-5);
  padding-bottom: var(--s-4);
}
.rail { grid-column: 2; position: relative; padding-top: var(--s-5); }

/* ============================================================
   TYPOGRAPHY — title block
   ============================================================ */
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s-2);
}
.headline {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.2;
  color: var(--ink);
  max-width: 960px;
  margin: 0 auto var(--s-4);
  letter-spacing: -0.005em;
}
.dek {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.45;
  color: var(--navy-soft);
  margin: 0 0 var(--s-4);
}
.byline {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(49, 78, 99, 0.12);
}
.byline strong { color: var(--ink-soft); font-weight: 600; }

/* ============================================================
   BODY TEXT
   ============================================================ */
.article p {
  margin: 0 0 var(--s-3);
}
.article p.solo { margin-bottom: var(--s-3); }
.article p.dialogue {
  font-style: italic;
  color: var(--ink-soft);
  padding-left: var(--s-3);
  border-left: 2px solid rgba(49, 78, 99, 0.18);
}
.article strong { font-weight: 600; }

.plain-list {
  list-style: none;
  margin: 0 0 var(--s-3);
  padding: 0;
}
.plain-list li {
  position: relative;
  padding-left: var(--s-3);
  margin-bottom: var(--s-1);
  color: var(--ink-soft);
}
.plain-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.72em;
  width: 6px; height: 6px;
  background: var(--navy-soft);
  border-radius: 50%;
}

.dualflow { color: var(--gold); font-weight: 600; }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section { margin-top: var(--s-7); }
.section__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 var(--s-4);
  letter-spacing: -0.005em;
}

/* ============================================================
   HERO + SYMPTOM BOX
   ============================================================ */
.hero-figure {
  margin: 0 0 var(--s-4);
  position: relative;
}
.hero-figure__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 28%;
  border-radius: 10px;
}
.ph--hero { border-radius: 10px; }

/* Diagram graphics (hub / decline / two-pathway / tracker) */
.diagram { margin: var(--s-4) 0; }
.diagram img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(49, 78, 99, 0.10);
}

.symptom-box {
  background: var(--bg-alt);
  border-radius: 10px;
  border-top: 2px solid var(--gold);
  box-shadow: 0 14px 40px -28px rgba(35, 55, 70, 0.5);
  padding: var(--s-4);
  max-width: 900px;
  margin: var(--s-3) auto 0;
}
.symptom-box__title {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
  margin: 0 0 var(--s-2);
  line-height: 1.4;
}
.symptom-box__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  text-align: left;
}
.symptom-box__list li:last-child {
  grid-column: 1 / -1;
  justify-self: center;
}
.symptom-box__list li {
  position: relative;
  font-size: 17px;
  color: var(--ink-soft);
  padding-left: 18px;
}
.symptom-box__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--navy-soft);
}

@media (min-width: 768px) {
  .hero-figure { margin-bottom: var(--s-6); }
}

/* ============================================================
   PULL QUOTES
   ============================================================ */
.pullquote {
  margin: var(--s-5) 0;
  padding: var(--s-4) var(--s-2);
  text-align: center;
  border-top: 1px solid rgba(49, 78, 99, 0.2);
  border-bottom: 1px solid rgba(49, 78, 99, 0.2);
}
.pullquote__text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.4;
  color: var(--navy);
  margin: 0;
}
.pullquote__text::before { content: "\201C"; }
.pullquote__text::after  { content: "\201D"; }
.pullquote__cite {
  margin: var(--s-2) 0 0;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ============================================================
   GOLD CALLOUT (Nobel)
   ============================================================ */
.callout {
  background: var(--bg-alt);
  border-radius: 10px;
  padding: var(--s-4);
  margin: var(--s-4) 0;
}
.callout--gold { border: 1px solid var(--gold); }
.callout__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s-1);
}
.callout__body {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ============================================================
   HUB DIAGRAM (7.5)
   ============================================================ */
.hub {
  margin: var(--s-4) 0;
  padding: var(--s-5) var(--s-3);
  background: var(--bg-sunken);
  border-radius: 12px;
  text-align: center;
}
.hub__title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 var(--s-4);
}
.hub__center {
  display: inline-block;
  background: var(--navy);
  color: var(--on-navy);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  border-radius: 999px;
  box-shadow: 0 0 0 5px rgba(40, 70, 90, 0.12);
}
.hub__connector {
  width: 2px;
  height: 28px;
  background: var(--navy-line);
  opacity: 0.4;
  margin: 0 auto;
}
.hub__items {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
}
.hub__item {
  background: var(--bg-alt);
  border: 1px solid rgba(49, 78, 99, 0.25);
  color: var(--navy);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  position: relative;
}

/* ============================================================
   DECLINE GRAPH (7.6)
   ============================================================ */
.decline {
  margin: var(--s-4) 0;
  padding: var(--s-4) var(--s-3) var(--s-3);
  background: var(--bg-alt);
  border-radius: 12px;
  border: 1px solid rgba(49, 78, 99, 0.1);
}
.decline__title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 var(--s-2);
  text-align: center;
}
.decline__svg { width: 100%; height: auto; display: block; }
.decline__tick {
  font-family: var(--sans);
  font-size: 15px;
  fill: var(--ink-muted);
}
.decline__ylabel {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  fill: var(--ink-muted);
}

/* ============================================================
   TWO-PATHWAY DIAGRAM (7.7)
   ============================================================ */
.pathways { margin: var(--s-5) 0; }
.pathways__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.pathway {
  background: var(--bg-alt);
  border: 1px solid rgba(49, 78, 99, 0.16);
  border-radius: 12px 12px 0 0;
  padding: var(--s-4);
}
.pathway__num {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-1);
}
.pathway__name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 var(--s-1);
  line-height: 1.25;
}
.pathway__sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.pathways__band {
  margin: 0;
  background: var(--navy);
  color: var(--on-navy);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  text-align: center;
  padding: var(--s-3) var(--s-4);
  border-radius: 0 0 12px 12px;
}

/* ============================================================
   FIGURES + CAPTIONS (mouthwash, product reveal, stack)
   ============================================================ */
.figure { margin: var(--s-4) 0; }
.figure__cap {
  margin-top: var(--s-2);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-muted);
  text-align: center;
}
.figure img, .figure .ph { border-radius: 10px; }
/* Lifestyle / scene photos: editorial landscape crop */
.figure--photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.product-reveal__cap {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy);
  text-transform: uppercase;
  font-size: 13px;
}

/* ============================================================
   TESTIMONIAL CARDS (7.11)
   ============================================================ */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin: var(--s-4) 0;
}
.tcard {
  margin: 0;
  background: var(--bg-alt);
  border: 1px solid rgba(49, 78, 99, 0.12);
  border-radius: 10px;
  padding: var(--s-4) var(--s-3);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  position: relative;
}
.tcard::before {
  content: "\201C";
  display: block;
  font-family: var(--serif);
  font-size: 44px;
  line-height: 0.6;
  color: var(--navy-line);
  opacity: 0.45;
  margin-bottom: var(--s-1);
}

/* ============================================================
   MINI COMPARISON (7.10)
   ============================================================ */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin: var(--s-4) 0;
}
.compare__col {
  border-radius: 10px;
  padding: var(--s-3);
  background: var(--bg-sunken);
  border: 1px solid rgba(49, 78, 99, 0.1);
}
.compare--win {
  background: var(--bg-alt);
  border: 1px solid var(--navy-soft);
}
.compare__head {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid rgba(49, 78, 99, 0.14);
  color: var(--ink-muted);
}
.compare--win .compare__head { color: var(--navy); }
.compare__list { list-style: none; }
.compare__list li {
  font-size: 16px;
  padding: 6px 0 6px 22px;
  position: relative;
  color: var(--ink-soft);
}
.compare__col .compare__list li::before {
  content: "\2013";
  position: absolute; left: 2px;
  color: var(--ink-muted);
}
.compare--win .compare__list li::before {
  content: "\2713";
  color: var(--navy-soft);
  font-size: 14px;
  top: 7px;
}

/* ============================================================
   TRACKER (7.13)
   ============================================================ */
.tracker {
  margin: var(--s-4) 0;
  padding: var(--s-5) var(--s-4);
  background: var(--bg-alt);
  border: 1px solid rgba(49, 78, 99, 0.12);
  border-radius: 12px;
}
.tracker__title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
  margin: 0 0 var(--s-4);
}
.tracker__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  gap: var(--s-2);
}
.tracker__steps::before {
  content: "";
  position: absolute;
  top: 9px; left: 12%; right: 12%;
  height: 2px;
  background: var(--navy-line);
  opacity: 0.3;
}
.tstep {
  text-align: center;
  position: relative;
  padding-top: 28px;
}
.tstep::before {
  content: "";
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 4px var(--bg-alt);
}
.tstep__week {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin-bottom: 2px;
}
.tstep__label {
  display: block;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.3;
}

/* ============================================================
   GUARANTEE (7.14)
   ============================================================ */
.guarantee {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: var(--s-4) 0;
  padding: var(--s-4);
  background: var(--bg-alt);
  border: 1px solid var(--gold);
  border-radius: 12px;
}
.guarantee__seal {
  flex: 0 0 auto;
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  line-height: 1;
}
.guarantee__seal-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 32px;
}
.guarantee__seal-unit {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 2px;
}
.guarantee__title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 var(--s-1);
}
.guarantee__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--s-3);
}
.guarantee__list li {
  position: relative;
  font-size: 16px;
  color: var(--ink-soft);
  padding-left: 20px;
}
.guarantee__list li::before {
  content: "\2713";
  position: absolute; left: 0;
  color: var(--gold);
}

/* ============================================================
   INCLUDED BOX + FINAL STACK + CTA (7.15 / 7.16)
   ============================================================ */
.section--final { }
.included {
  background: var(--bg-sunken);
  border-radius: 12px;
  padding: var(--s-4);
  margin: var(--s-4) 0;
  border: 1px solid rgba(49, 78, 99, 0.1);
}
.included__title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--s-2);
}
.included__list { list-style: none; }
.included__list li {
  position: relative;
  padding: 6px 0 6px 26px;
  font-size: 17px;
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(49, 78, 99, 0.08);
}
.included__list li:last-child { border-bottom: none; }
.included__list li::before {
  content: "\2713";
  position: absolute; left: 2px; top: 6px;
  color: var(--navy-soft);
  font-weight: 700;
}
.final-stack { margin-top: var(--s-4); }

.cta { text-align: center; margin-top: var(--s-5); }
.cta__btn,
.sticky-panel__btn,
.mobile-bar__btn {
  display: inline-block;
  background: var(--navy);
  color: var(--on-navy);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
.cta__btn {
  font-size: 18px;
  padding: 18px 40px;
  box-shadow: 0 16px 36px -22px rgba(35, 55, 70, 0.7);
}
.cta__btn:hover,
.sticky-panel__btn:hover,
.mobile-bar__btn:hover { background: #1b2c39; }
.cta .cta__sub {
  margin: var(--s-3) auto 0;
  max-width: 460px;
  font-size: 15px;
  color: var(--ink-muted);
}

/* Final trust bar (below CTA) */
.trustbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(49, 78, 99, 0.12);
}
.trustbar__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.trustbar__item svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--navy-soft);
}

/* ============================================================
   DESKTOP STICKY PANEL (7 / §6)
   ============================================================ */
.sticky-panel {
  position: sticky;
  top: 24px;
  background: var(--bg-alt);
  border: 1px solid rgba(49, 78, 99, 0.15);
  border-radius: 10px;
  box-shadow: 0 18px 50px -34px rgba(35, 55, 70, 0.55);
  padding: var(--s-3);
}
.sticky-panel__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: var(--s-2);
}
.sticky-panel__title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 2px;
}
.sticky-panel__sub {
  margin: 0 0 var(--s-2);
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.4;
}
.sticky-panel__bullets {
  list-style: none;
  margin: 0 0 var(--s-3);
}
.sticky-panel__bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.sticky-panel__bullets li::before {
  content: "";
  position: absolute; left: 2px; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--navy-soft);
}
.sticky-panel__btn {
  display: block;
  text-align: center;
  font-size: 15px;
  padding: 12px 16px;
}

/* ============================================================
   MOBILE STICKY BAR (§6)
   ============================================================ */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  height: 60px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  background: var(--bg-alt);
  border-top: 1px solid rgba(49, 78, 99, 0.18);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.mobile-bar.is-visible { transform: translateY(0); }
.mobile-bar__name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
}
.mobile-bar__btn {
  font-size: 14px;
  padding: 10px 18px;
  white-space: nowrap;
}

/* ============================================================
   PLACEHOLDERS (remove once images are dropped in)
   ============================================================ */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg,
      var(--bg-sunken), var(--bg-sunken) 12px,
      var(--bg-alt) 12px, var(--bg-alt) 24px);
  border: 1px dashed rgba(49, 78, 99, 0.3);
  color: var(--ink-muted);
  border-radius: 10px;
}
.ph__label {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ph--hero      { aspect-ratio: 16 / 9; }
.ph--wide      { aspect-ratio: 3 / 2; }
.ph--crossroads{ aspect-ratio: 16 / 9; }

/* ============================================================
   CROSSROADS IMAGE + OVERLAY (7.12)
   ============================================================ */
.crossroads {
  margin: var(--s-4) 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.crossroads .ph { border-radius: 12px; }
.crossroads img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.crossroads__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: var(--s-5) var(--s-4) var(--s-4);
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--on-navy);
  background: linear-gradient(to top, rgba(35, 55, 70, 0.88), rgba(35, 55, 70, 0));
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--bg-sunken);
  border-top: 1px solid rgba(49, 78, 99, 0.12);
  margin-top: 0;
  padding: var(--s-4) var(--s-3) calc(var(--s-6) + 60px);
}
.site-footer__inner {
  max-width: var(--measure);
  margin: 0 auto;
}
.site-footer__bio,
.site-footer__disclaimer {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0 0 var(--s-3);
}
.site-footer__copy {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet / mobile: single column, mobile bar takes over */
@media (max-width: 1099px) {
  .wrap {
    grid-template-columns: minmax(0, var(--measure));
    justify-content: center;
  }
  .rail { display: none; }
  .mobile-bar { display: flex; }
}

@media (max-width: 767px) {
  body { font-size: 18px; }
  .masthead__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name name"
      "pill share";
    align-items: center;
    row-gap: 12px;
  }
  .masthead__name { grid-area: name; justify-self: center; font-size: 21px; letter-spacing: 0.01em; }
  .masthead__pill { grid-area: pill; justify-self: start; }
  .masthead__share { grid-area: share; justify-self: end; }
  .symptom-box__list { display: flex; flex-direction: column; align-items: flex-start; width: fit-content; margin: 0 auto; gap: var(--s-1); }
  .lede { padding-top: var(--s-3); }
  .headline { font-size: 25px; line-height: 1.18; }
  .dek { font-size: 19px; }
  .topbanner { font-size: 13px; padding: 10px 16px; }
  .section__title { font-size: 27px; }
  .section { margin-top: var(--s-6); }

  .pathways__cards { grid-template-columns: 1fr; }
  .pathway { border-radius: 12px; }
  .pathway:first-child { margin-bottom: 0; }
  .pathways__band { border-radius: 12px; margin-top: var(--s-2); font-size: 19px; }

  .testimonials { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }

  .hub__items { flex-direction: column; align-items: stretch; }
  .hub__item { text-align: center; }

  .tracker__steps { grid-template-columns: 1fr; gap: 0; }
  .tracker__steps::before {
    top: 0; bottom: 0; left: 9px; right: auto;
    width: 2px; height: auto;
  }
  .tstep {
    text-align: left;
    padding: 0 0 var(--s-3) 36px;
  }
  .tstep:last-child { padding-bottom: 0; }
  .tstep::before { top: 2px; left: 9px; transform: none; }

  .guarantee { flex-direction: column; text-align: center; }
  .guarantee__list { justify-content: center; }

  .crossroads__overlay { font-size: 18px; padding: var(--s-4) var(--s-3) var(--s-3); }

  .pullquote__text { font-size: 24px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}