/* =====================================================================
   spiro-lean.v1.css  ·  UI/UX layer for index-lean.html
   Loaded after spiro-bundle.sg.v29.css. Everything here is scoped so it
   only changes what the redesign intends to change.
   ---------------------------------------------------------------------
   System
   · One buy colour (fresh green) for every purchase button on the page
   · One headline style: 800 weight, one size scale, left aligned
   · One accent for the italic half of a headline: green on light, sage on dark
   · Eyebrow labels: one colour per background, never gold
   ===================================================================== */

:root{
  --lx-cta:#46b16e; --lx-cta-hover:#3da463; --lx-cta-ink:#0b2a1c;
  --lx-em-light:#2b7a4e; --lx-em-dark:#a9d8bb;
  --lx-eye-light:#1a5c38; --lx-eye-dark:#8fd6a8;
  --lx-h2:clamp(30px, 7.4vw, 48px);
  --lx-gutter:20px;
}

/* ---------------------------------------------------------------------
   1. HERO  ·  DOM order now equals visual order (no reflow on load)
   --------------------------------------------------------------------- */
.hero.lx{padding-top:0}
.hero.lx .hero-inner.lx-hero{
  display:flex; flex-direction:column; align-items:stretch; text-align:left;
  gap:22px; max-width:560px; padding-top:22px; padding-bottom:48px; margin:0 auto;
}
.lx-hero .lx-head{display:flex; flex-direction:column; align-items:flex-start; gap:16px}
.lx-hero .lx-rest{display:flex; flex-direction:column; gap:22px; min-width:0}
.lx-hero .hero-media{position:static; order:0; width:100%; min-width:0}
.lx-hero .hero-official.lx-official{margin:0; align-self:flex-start; order:0}

.hero.lx .lx-hero h1#heroH1{
  font-family:var(--hk); font-weight:800; text-align:left; margin:0;
  font-size:clamp(40px, 11.4vw, 72px); line-height:1.0; letter-spacing:-.034em;
  color:var(--forest); text-wrap:balance; max-width:13ch;
}
.hero.lx .lx-hero h1#heroH1 em{color:var(--lx-em-light); font-style:italic}

.lx-proof{display:flex; align-items:center; gap:12px}
.lx-proof .avs{display:flex; flex:none}
.lx-proof .avs i{width:36px; height:36px; border-radius:50%; border:2px solid var(--bone); margin-left:-10px; background-size:cover; background-position:center}
.lx-proof .avs i:first-child{margin-left:0}
.lx-proof-txt{font-size:14px; line-height:1.35; color:var(--ink-soft)}
.lx-proof-txt b{color:var(--forest); font-weight:800}
.lx-stars{color:#e1a23a; letter-spacing:1px}
.lx-proof-sub{display:block; font-size:12.5px; color:var(--ink-faint)}

.hero.lx .hero-sub{margin:0; max-width:52ch; text-align:left; font-size:16.5px; line-height:1.55; color:var(--ink-soft)}

.lx-hero .hero-checks{width:100%; margin:0; display:grid; gap:10px}
.lx-hero .buybox{width:100%; margin:0}
.lx-hero .hero-founder{margin:0; width:100%}

@media (min-width:981px){
  .hero.lx .hero-inner.lx-hero{
    display:grid; max-width:1240px; padding-top:48px; padding-bottom:88px;
    grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    grid-template-rows:auto 1fr; column-gap:64px; row-gap:28px; align-items:start;
  }
  .lx-hero .hero-media{grid-column:1; grid-row:1 / span 2; position:sticky; top:96px}
  .lx-hero .lx-head{grid-column:2; grid-row:1}
  .lx-hero .lx-rest{grid-column:2; grid-row:2}
  .hero.lx .lx-hero h1#heroH1{font-size:clamp(52px, 5vw, 72px)}
}

/* ---------------------------------------------------------------------
   2. HEADLINE SYSTEM  ·  every section title reads as one family
   --------------------------------------------------------------------- */
body.lx-page section:not(.hero) h2{
  font-family:var(--hk) !important; font-weight:800 !important;
  font-size:var(--lx-h2) !important; line-height:1.04 !important;
  letter-spacing:-.03em !important; text-wrap:balance; text-align:left !important;
  margin-left:0 !important; margin-right:0 !important; max-width:18ch;
}
body.lx-page section:not(.hero) h2 em{font-style:italic; color:var(--lx-em-light) !important}
/* dark sections */
body.lx-page section.problem h2 em, body.lx-page section.mech h2 em, body.lx-page section.vidwall h2 em,
body.lx-page section.v2-final h2 em{color:var(--lx-em-dark) !important}
/* the offer title sits on cream */
body.lx-page section.supply h2 em{color:var(--lx-em-light) !important}

/* section heads: left aligned, readable measure */
body.lx-page .section-head, body.lx-page .mech-metaphor, body.lx-page .problem-head,
body.lx-page .sup-head, body.lx-page .v2-in > .v2-eye{
  text-align:left !important; margin-left:0 !important; margin-right:0 !important;
  align-items:flex-start !important; justify-content:flex-start !important;
}
body.lx-page .section-head, body.lx-page .mech-metaphor, body.lx-page .sup-head{max-width:720px}
body.lx-page .section-head > p, body.lx-page .mech-metaphor > p, body.lx-page .problem-head > p,
body.lx-page .sup-head > p{text-align:left !important; margin-left:0 !important; margin-right:0 !important; max-width:58ch}
body.lx-page .section-head .eyebrow, body.lx-page .mech-metaphor .eyebrow{margin-left:0 !important; margin-right:0 !important}

/* eyebrows: one colour on light, one on dark, never gold */
body.lx-page .eyebrow, body.lx-page .v2-eye{color:var(--lx-eye-light) !important}
body.lx-page .eyebrow.on-dark, body.lx-page .v2-eye.on-dark,
body.lx-page .vidwall .eyebrow{color:var(--lx-eye-dark) !important}

/* ---------------------------------------------------------------------
   3. ONE BUY BUTTON  ·  same colour, shape and weight everywhere
   --------------------------------------------------------------------- */
body.lx-page .bb-cta, body.lx-page .pz-cta, body.lx-page .v2-final-cta,
body.lx-page .hr-cta, body.lx-page .sticky-cta .btn, body.lx-page .mm-cta{
  background:var(--lx-cta) !important; color:var(--lx-cta-ink) !important;
  border:0 !important; border-radius:999px !important; font-weight:800 !important;
  box-shadow:0 10px 24px -10px rgba(47,148,87,.55) !important;
  transition:background-color .15s ease, transform .15s ease !important;
}
body.lx-page .bb-cta:hover, body.lx-page .pz-cta:hover, body.lx-page .v2-final-cta:hover,
body.lx-page .hr-cta:hover, body.lx-page .sticky-cta .btn:hover{background:var(--lx-cta-hover) !important}
body.lx-page .bb-cta:active, body.lx-page .pz-cta:active, body.lx-page .v2-final-cta:active{transform:scale(.985)}
body.lx-page .bb-cta{margin:16px 14px 0 !important; padding:18px 20px !important; font-size:17px !important}
body.lx-page .bb-cta:focus-visible, body.lx-page .pz-cta:focus-visible, body.lx-page .v2-final-cta:focus-visible,
body.lx-page .bb-wa:focus-visible{outline:3px solid var(--forest); outline-offset:3px}

/* secondary action stays quiet so the buy button leads */
body.lx-page .bb-wa{border:1.5px solid rgba(21,54,42,.22) !important; background:transparent !important; font-weight:700 !important}

/* ---------------------------------------------------------------------
   4. READABILITY FIXES
   --------------------------------------------------------------------- */
/* video card roles were green-on-green */
body.lx-page .vw-body i{color:rgba(255,255,255,.72) !important}
/* internal dev note that customers could see */
body.lx-page .vw-hint{display:none !important}
/* founder title was a light 500 weight, out of step with the page */
body.lx-page .founder h2{font-weight:800 !important}

/* ---------------------------------------------------------------------
   5. FLOATING CONTROLS  ·  WhatsApp button sits clear of the sticky bar
   --------------------------------------------------------------------- */
@media (max-width:980px){
  body.lx-page .fab-wa{right:12px !important; bottom:calc(86px + env(safe-area-inset-bottom)) !important; width:52px !important; height:52px !important; padding:0 !important}
}

@media (prefers-reduced-motion:reduce){
  body.lx-page *{scroll-behavior:auto !important}
}

/* ---------------------------------------------------------------------
   6. NO GOLD  ·  pricing, authenticity and final CTA use the brand greens
   --------------------------------------------------------------------- */
body.lx-page{--gold:#8fd6a8; --gold-ink:#1a5c38}
body.lx-page .sup-feature::before{background:none !important}
body.lx-page .pz-flag, body.lx-page .sup-f-tag{color:#0b2a1c !important}

/* ---------------------------------------------------------------------
   7. SMALL LAYOUT FIXES
   --------------------------------------------------------------------- */
/* FAQ category tabs follow the left-aligned heading and scroll as one row on phones */
body.lx-page .faq-tabs{justify-content:flex-start !important}
@media (max-width:760px){
  body.lx-page .faq-tabs{flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none;
    margin-left:calc(var(--lx-gutter) * -1); margin-right:calc(var(--lx-gutter) * -1);
    padding:2px var(--lx-gutter) 6px; scroll-snap-type:x proximity}
  body.lx-page .faq-tabs::-webkit-scrollbar{display:none}
  body.lx-page .faq-tab{flex:none; scroll-snap-align:start}
}
/* bonus total: label on one line, value underneath, nothing squeezed */
body.lx-page .bonus-total{flex-direction:column !important; align-items:flex-start !important; gap:4px; padding:18px 20px !important}
body.lx-page .bonus-total .tt{max-width:none !important; font-size:13px !important; opacity:.82}
body.lx-page .bonus-total .tv{font-family:var(--hk) !important; font-weight:800 !important; font-size:26px !important; letter-spacing:-.02em}

/* hero right column: buy box and founder card share one width */
.lx-hero .buybox, .lx-hero .hero-founder{max-width:520px}
.lx-hero .hero-checks, .hero.lx .hero-sub{max-width:520px}