/* ==========================================================================================
   Titanik Horse Gold — palette skin. Loaded AFTER light.css.

   light.css is shared with /ashwagold-10g (the live paid-traffic page), so NOTHING in it is
   edited here. It is written entirely against custom properties — 37 uses of var(--green)
   alone — so re-pointing those variables restyles this page and leaves AshwaGold untouched.

   Direction: primary colour is WHITE, accents taken off the packaging — the bottle's black
   body and its gold lettering. Two golds on purpose: a bright one for fills and badges, and
   a deeper one for text, because #D4AF37 on white is about 2.6:1 and fails on body copy.
   ========================================================================================== */
:root {
  --bg:         #ffffff;
  --bg-soft:    #faf9f6;   /* warm near-white; replaces the olive wash */
  --bg-soft-2:  #ffffff;
  --ink:        #0c0c0c;   /* the bottle's black */
  --ink-2:      #3d3d3d;
  --muted:      #7c7c7c;
  --line:       #eeedea;
  --line-2:     #dcdbd6;

  /* Primary CTA reads as the bottle itself: black fill, white type. */
  --green:      #111111;
  --green-d:    #000000;
  --green-soft: #fdf7e6;   /* pale gold wash behind badges + chips */

  --gold:       #c9a227;   /* bright gold — fills, borders, big display type */
  --gold-deep:  #856410;   /* gold that actually passes contrast on white */
  --gold-soft:  #fdf7e6;
  --save:       #856410;
}

/* light.css hardcodes an olive shadow under the primary button. */
.btn--gold { box-shadow: 0 6px 18px rgba(0, 0, 0, .16); }
.btn--gold:hover { box-shadow: 0 9px 24px rgba(0, 0, 0, .22); }

/* Accents that should read gold rather than black. */
.green-text      { color: var(--gold-deep); }
.hero__eyebrow   { color: var(--gold-deep); }
.announce .dot   { background: var(--gold); }
.price-off,
.pack__save      { color: var(--gold-deep); background: var(--green-soft); }
.bchip__ic       { background: var(--green-soft); color: var(--gold-deep); }
.bchip:hover .bchip__ic { background: var(--gold); color: #111; }
.stars           { color: var(--gold); }

/* The recommended pack gets the gold treatment instead of a black outline. */
.pack--best      { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 39, .16); }
.pack__flag      { background: var(--gold); color: #111; }
.pack__flag--alt { background: #111; color: var(--gold); }

/* A gold hairline under the announce bar ties the black band to the packaging. */
.announce { border-bottom: 2px solid var(--gold); }

/* ---- form-fill: make the lead card the loudest thing on the page ---- */
.order__card {
  border: 1px solid var(--line-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 22px 60px rgba(0, 0, 0, .10);
}
/* Full-width submit — a half-width primary next to a ghost "Back" loses taps on mobile. */
#placeLead { flex: 2 1 auto; font-size: 1.02rem; }
.field__hint { display: block; margin-top: 5px; font-size: .76rem; color: var(--muted); }

/* Reassurance directly under the button, where the hesitation actually happens. */
.lead-reassure {
  margin: 12px 0 0; text-align: center; font-size: .8rem; font-weight: 600;
  color: var(--gold-deep); line-height: 1.5;
}

/* Success state: gold-framed so it clearly reads as "done". */
#leadDone {
  background: var(--green-soft); border: 1px solid var(--gold);
  border-radius: var(--r); padding: 18px 18px 20px;
}

/* The doctor portrait replaces the lab video in the science block. Portrait crop, because
   the source is a tall studio shot and object-fit: cover on a wide box beheads it. */
.split__photo {
  display: block; width: 100%; height: auto; border-radius: var(--r-lg);
  background: var(--bg-soft); object-fit: cover;
}

/* ==========================================================================================
   SEED-INSPIRED LAYOUT PASS
   The reference (seed.com) reads as a stack of rounded panels floating on a tinted canvas,
   with pill CTAs that carry a circular arrow, and one full-bleed dark band that breaks the
   rhythm. Everything below is layout/skin only — no markup or copy was changed for it, so
   the content and the lead form are exactly as they were.
   ========================================================================================== */

/* 1. Tinted canvas, panels float on top of it. --bg stays white because the panels use it. */
body { background: #efeeea; }

/* Each top-level block becomes its own rounded panel. The announce bar and sticky nav are
   deliberately excluded — they must stay edge-to-edge. */
main > section,
main > .benefit-chips {
  background: var(--bg);
  border-radius: 30px;
  margin: 14px 14px 0;
  overflow: hidden;
}
main > section:last-of-type { margin-bottom: 14px; }
/* light.css alternates section tints; on a tinted canvas that reads as dirt, so flatten it
   and let the gap between panels do the separating instead. */
main > .section--soft { background: var(--bg); }
@media (min-width: 900px) {
  main > section, main > .benefit-chips { margin: 18px 22px 0; border-radius: 38px; }
  main > section:last-of-type { margin-bottom: 18px; }
}

/* 2. Pill CTAs with the circular arrow affordance from the reference. */
.btn { border-radius: 999px; }
.btn--gold, .btn--ghost { display: inline-flex; align-items: center; gap: 10px; }
.btn--gold::after {
  content: "\203A";                 /* single right angle quote — reads as a chevron */
  display: grid; place-items: center;
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  font-size: .95em; line-height: 1; padding-bottom: 2px;
}
/* The block CTA inside the form centres its label; keep the arrow tucked beside it. */
.btn--block { justify-content: center; }
/* No arrow on the sticky bar or nav pill — they are compact and it crowds them. */
.nav__cta::after, .sticky-buy__btn::after { display: none; }

/* 3. One dark immersive band, like the reference's underwater panel. The science block is
      the natural place for it: it is the "why trust this" beat. */
main > .split {
  background: #0c0c0c;
  color: #f2f1ee;
}
main > .split .section__title { color: #ffffff; }
main > .split p { color: #c9c7c1; }
main > .split .checklist li { color: #e8e6e0; }
main > .split .ic--green { color: var(--gold); }
main > .split .btn--gold { background: var(--gold); color: #0c0c0c; }
main > .split .btn--gold::after { background: rgba(0, 0, 0, .16); }

/* 4. Display type: the reference runs large, tight and calm. */
.hero__title { letter-spacing: -.02em; line-height: 1.06; }
.section__title { letter-spacing: -.015em; }
.section__lead { max-width: 58ch; }

/* 5. Panels sit on a tinted canvas, so the card shadows inside them can soften. */
.order__card { box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 18px 44px rgba(0,0,0,.07); }

/* ==========================================================================
   6. MOBILE: put the lead form's own buttons back.

   light.css hides `.step__actions [data-next]` and `button[type="submit"]` below 900px, and hides
   the whole `.step__actions` row when it has no Back button, because on the AshwaGold order page
   the sticky bottom bar IS the step CTA: initStickyBuy() wires that bar to #orderForm and relabels
   it per step (Continue → Add contact details → Add Address → Complete Order).

   This page is lead-capture, and its form is #leadForm on purpose so that app.js's initOrderForm
   and initFbPixel skip it. initStickyBuy() looks up #orderForm too, so after making the bar
   visible it early-returns — the bar scrolls to the form (it is an <a href="#order">) and does
   nothing else. So on mobile the in-form CTA was hidden while nothing replaced it: step 1 had NO
   way forward, and the form was dead on every phone.

   Scoped to #leadForm so the live AshwaGold page keeps bar-as-CTA exactly as it is, and light.css
   stays untouched. Order matters: .btn--block must come after the [data-next] rule (equal
   specificity, so the later declaration wins) or the full-width buttons would go inline.
   ========================================================================== */
@media (max-width: 899px) {
  #leadForm .step__actions { display: block; }
  #leadForm .step__actions--split { display: flex; }
  #leadForm .step__actions [data-next],
  #leadForm .step__actions button[type="submit"] { display: inline-flex; }
  #leadForm .step__actions .btn--block { display: flex; }
}