/* ============================================================
   TONICGREENS™ — web-tonicgreens.com — style.css
   Theme  : Charcoal #14150F + Garden Lime #A6D928 + Moss #355E23
            + Citrus Orange #F08C2E + Sage Parchment #F1F4E6
   Type   : Unbounded (display) + Caveat (handwritten accent) + Work Sans (body)
   Prefix : tg-
   Anim   : .sprout-in / .sprouted
   Architecture: floating pill nav, asymmetric hero, no repeated dark-bar
   dividers, alternating ingredient rows, staggered pull-quote reviews,
   offset book-mockup bonuses, solid-lime final CTA block.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:    #14150F; /* charcoal */
  --ink2:   #1D1F15;
  --ink3:   #272A1B;
  --lime:   #A6D928; /* garden lime */
  --lime2:  #8FC21E;
  --limed:  #6E9C18; /* darker lime for text-on-light */
  --moss:   #355E23; /* deep moss */
  --moss2:  #294A1A;
  --citrus: #F08C2E; /* citrus orange */
  --sage:   #F1F4E6; /* light parchment-sage */
  --sage2:  #E6EBD4;
  --cream:  #FAFAF5;
  --wh:     #FFFFFF;
  --mu:     #565C45; /* muted moss-grey body text */
  --mu2:    #7A8068;
  --bd:     #DCE3C8;
  --bd2:    #CBD4AE;
  --r: 10px; --pill: 60px
}

.tg-w{max-width:1180px;margin:0 auto;padding:0 24px}
html{scroll-behavior:smooth}
body{font-family:'Work Sans',system-ui,-apple-system,sans-serif;font-size:17px;color:var(--ink);background:var(--cream);overflow-x:hidden;line-height:1.7;font-weight:400}
b,strong{font-weight:600}
h1,h2,h3{font-family:'Unbounded',system-ui,sans-serif;font-weight:700;letter-spacing:-.01em}

.tg-eyebrow{font-family:'Caveat',cursive;font-size:1.4rem;font-weight:600;color:var(--limed);margin-bottom:6px;line-height:1}
.tg-eyebrow-light{color:var(--lime)}

/* ── NAV — floating pill, not a heavy dark bar ── */
nav{position:sticky;top:14px;z-index:100;padding:0 16px}
.tg-nav-row{max-width:1180px;margin:0 auto;background:rgba(20,21,15,.92);backdrop-filter:blur(10px);border-radius:var(--pill);padding:10px 10px 10px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 6px 24px rgba(20,21,15,.18);transition:box-shadow .3s}
.tg-logo{font-family:'Unbounded',sans-serif;font-size:1.05rem;font-weight:700;color:var(--wh);text-decoration:none;flex-shrink:0}
.tg-logo span{color:var(--lime)}
.tg-nav{display:flex;align-items:center;gap:18px;list-style:none}
.tg-nav a{color:rgba(255,255,255,.62);text-decoration:none;font-size:.84rem;font-weight:500;transition:color .2s;white-space:nowrap}
.tg-nav a:hover{color:var(--lime)}
.tg-nav-cta{background:var(--lime);color:var(--ink)!important;padding:10px 22px;border-radius:var(--pill);font-weight:700;font-size:.83rem;text-decoration:none;transition:background .2s,transform .15s;white-space:nowrap}
.tg-nav-cta:hover{background:var(--lime2);transform:translateY(-1px)}
.tg-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.tg-burger span{width:22px;height:2px;background:var(--lime);display:block;border-radius:2px}
.tg-drawer{display:none;flex-direction:column;background:var(--ink2);border-radius:var(--r);padding:18px;gap:10px;position:absolute;top:78px;left:16px;right:16px;z-index:99;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.tg-drawer.open{display:flex}
.tg-drawer a{color:rgba(255,255,255,.65);text-decoration:none;font-size:1rem;font-weight:500;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.tg-drawer a:hover{color:var(--lime)}
.tg-drawer-cta{background:var(--lime);color:var(--ink)!important;text-align:center;padding:13px;border-radius:var(--pill);font-weight:700;margin-top:4px;border-bottom:none!important}

/* ── BUTTONS ── */
.tg-btn{display:inline-block;background:var(--moss);color:var(--wh);font-weight:700;font-size:.95rem;padding:14px 30px;border-radius:var(--pill);text-decoration:none;transition:background .2s,transform .15s}
.tg-btn:hover{background:var(--moss2);transform:translateY(-2px)}
.tg-btn-lg{font-size:1rem;padding:16px 34px;background:var(--ink);}
.tg-btn-lg:hover{background:#000}
.tg-btn-xl{font-size:1.05rem;padding:16px 40px}
.tg-btn-on-dark{background:var(--lime);color:var(--ink)}
.tg-btn-on-dark:hover{background:var(--lime2)}
.tg-btn-dark{background:var(--ink);color:var(--wh)}
.tg-btn-dark:hover{background:#000}

/* ── HERO — asymmetric, organic glow, sage bg ── */
.tg-hero{background:var(--sage);padding:64px 0 56px;position:relative;overflow:hidden}
.tg-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:36px;position:relative}
.tg-hero-copy h1{font-size:2.3rem;line-height:1.12;color:var(--ink);margin-bottom:18px;max-width:600px}
.tg-hero-sub{font-size:1rem;line-height:1.8;color:var(--mu);max-width:560px;margin-bottom:26px}
.tg-hero-cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.tg-hero-micro{display:flex;flex-wrap:wrap;gap:6px 14px}
.tg-hero-micro span{font-size:.82rem;font-weight:600;color:var(--moss)}
.tg-hero-note{font-size:.85rem;color:var(--mu2);font-style:italic}

.tg-hero-art{position:relative;display:flex;justify-content:center;align-items:center}
.tg-hero-glow{position:absolute;width:420px;height:420px;background:radial-gradient(circle,var(--lime) 0%,rgba(166,217,40,.35) 45%,rgba(166,217,40,0) 75%);border-radius:50%;filter:blur(2px);z-index:0}
.tg-hero-img-link{position:relative;z-index:1;display:block}
.tg-hero-img-link img{max-width:100%;width:380px;filter:drop-shadow(0 24px 40px rgba(20,21,15,.25));transition:transform .4s}
.tg-hero-img-link:hover img{transform:scale(1.03) rotate(-1deg)}

/* ── STATS STRIP — no card boxes ── */
.tg-stats{background:var(--ink);padding:26px 0}
.tg-stats-row{display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap}
.tg-stat{display:flex;flex-direction:column;align-items:center;text-align:center}
.tg-stat-num{font-family:'Unbounded',sans-serif;font-size:1.9rem;font-weight:800;color:var(--lime);line-height:1}
.tg-stat-lbl{font-size:.78rem;color:rgba(255,255,255,.55);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}
.tg-stat-div{width:1px;height:38px;background:rgba(255,255,255,.15)}

/* ── GREENS GAP — signature section ── */
.tg-gap-section{background:var(--cream);padding:72px 0}
.tg-gap-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:start}
.tg-gap-text h2{font-size:1.85rem;color:var(--ink);line-height:1.2;margin-bottom:18px;max-width:520px}
.tg-gap-text p{font-size:1rem;line-height:1.85;color:var(--mu);margin-bottom:16px;max-width:540px}
.tg-leaf-list{list-style:none;margin-top:18px}
.tg-leaf-list li{position:relative;padding-left:26px;margin-bottom:12px;font-size:.95rem;line-height:1.7;color:var(--mu);max-width:540px}
.tg-leaf-list li::before{content:"🌿";position:absolute;left:0;top:1px;font-size:.9rem}

.tg-gap-notes{display:flex;flex-direction:column;gap:18px;padding-top:8px}
.tg-note{background:var(--wh);border:1px solid var(--bd);border-radius:var(--r);padding:18px 20px;box-shadow:0 6px 18px rgba(20,21,15,.06)}
.tg-note-1{transform:rotate(-1.2deg)}
.tg-note-2{transform:rotate(.8deg);margin-left:18px}
.tg-note-3{transform:rotate(-.6deg)}
.tg-note-hand{font-family:'Caveat',cursive;font-size:1.3rem;font-weight:600;color:var(--limed);margin-bottom:6px;line-height:1}
.tg-note-fact{font-size:.88rem;line-height:1.6;color:var(--mu)}

/* ── WHAT IS — centered narrow column, charcoal ── */
.tg-whatis{background:var(--ink);padding:72px 0;text-align:center}
.tg-whatis-inner{max-width:680px;margin:0 auto}
.tg-whatis h2{font-size:2rem;color:var(--wh);margin-bottom:18px}
.tg-whatis p{font-size:1rem;line-height:1.85;color:rgba(255,255,255,.68);margin-bottom:16px;text-align:left}
.tg-whatis-img{margin:28px 0;display:flex;justify-content:center}
.tg-whatis-img img{max-width:100%;border-radius:var(--r);filter:drop-shadow(0 12px 30px rgba(0,0,0,.3))}

/* ── PRICE ZONE — shelf-label frame ── */
.tg-price-zone{background:var(--sage);padding:48px 0}
.tg-price-frame{max-width:960px;margin:0 auto;border:2px solid var(--bd2);border-radius:14px;padding:14px;background:var(--wh)}
.tg-price-frame a{display:block}
.tg-price-frame a img{width:100%;height:auto;border-radius:8px;display:block}

/* ── INGREDIENTS — alternating editorial rows ── */
.tg-ing-section{background:var(--cream);padding:72px 0}
.tg-ing-h2{font-size:2rem;color:var(--ink);text-align:center;margin-bottom:14px}
.tg-ing-lead{font-size:1rem;color:var(--mu);text-align:center;max-width:640px;margin:0 auto 44px;line-height:1.8}
.tg-ing-row{display:grid;grid-template-columns:140px 1fr;gap:28px;align-items:center;padding:26px 0;border-bottom:1px solid var(--bd)}
.tg-ing-row:last-child{border-bottom:none}
.tg-ing-row-rev{direction:rtl}
.tg-ing-row-rev .tg-ing-body{direction:ltr}
.tg-ing-row-rev .tg-ing-num{direction:ltr}
.tg-ing-num{font-family:'Unbounded',sans-serif;font-size:2.6rem;font-weight:800;color:var(--lime2);line-height:1;-webkit-text-stroke:1px var(--moss);text-align:center}
.tg-ing-body h3{font-size:1.2rem;color:var(--ink);margin-bottom:8px}
.tg-ing-body p{font-size:.95rem;line-height:1.78;color:var(--mu)}

/* ── BONUS BOOKS — offset mockups ── */
.tg-bonus-section{background:var(--ink);padding:72px 0;overflow:hidden}
.tg-bonus-h2{font-size:2rem;color:var(--wh);text-align:center;margin-bottom:10px}
.tg-bonus-lead{font-size:.95rem;color:rgba(255,255,255,.5);text-align:center;margin-bottom:48px}
.tg-bonus-shelf{display:flex;justify-content:center;gap:60px;flex-wrap:wrap;padding:0 10px}
.tg-book{max-width:280px;display:flex;flex-direction:column;align-items:center;text-align:center}
.tg-book-1{transform:rotate(-3deg)}
.tg-book-2{transform:rotate(3deg)}
.tg-book-cover{width:200px;height:260px;background:linear-gradient(160deg,var(--moss) 0%,var(--ink3) 100%);border:1px solid rgba(166,217,40,.25);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 18px;margin-bottom:18px;box-shadow:0 18px 36px rgba(0,0,0,.45);position:relative}
.tg-book-tag{position:absolute;top:14px;right:14px;background:var(--lime);color:var(--ink);font-size:.7rem;font-weight:700;padding:3px 11px;border-radius:var(--pill);text-transform:uppercase;letter-spacing:.4px}
.tg-book-cover h3{font-family:'Unbounded',sans-serif;font-size:1.15rem;color:var(--wh);line-height:1.3}
.tg-book-desc{font-size:.86rem;line-height:1.7;color:rgba(255,255,255,.55)}

/* ── REVIEWS — staggered pull-quotes ── */
.tg-reviews{background:var(--sage);padding:72px 0}
.tg-rv-h2{font-size:1.5rem;color:var(--ink);text-align:center;margin-bottom:44px}
.tg-quote{position:relative;max-width:700px;background:var(--wh);border:1px solid var(--bd);border-radius:var(--r);padding:32px 32px 26px 56px;margin-bottom:26px;box-shadow:0 8px 22px rgba(20,21,15,.06)}
.tg-quote-1{margin-left:0;margin-right:auto}
.tg-quote-2{margin-left:auto;margin-right:0}
.tg-quote-3{margin-left:6%;margin-right:auto}
.tg-quote-mark{position:absolute;top:6px;left:18px;font-family:'Unbounded',sans-serif;font-size:4rem;color:var(--lime2);line-height:1;opacity:.7}
.tg-quote-text{font-size:.96rem;line-height:1.8;color:var(--mu);margin-bottom:14px}
.tg-quote-foot{display:flex;align-items:center;gap:10px}
.tg-quote-photo{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--lime2);flex-shrink:0}
.tg-quote-name{font-size:.86rem;font-weight:700;color:var(--ink)}
.tg-quote-name span{font-weight:500;color:var(--mu2);font-style:italic}

/* ── GUARANTEE — lime-tinted block ── */
.tg-guar{background:linear-gradient(135deg,#EEF6D8 0%,var(--sage2) 100%);padding:64px 0}
.tg-guar-grid{display:grid;grid-template-columns:220px 1fr;align-items:center;gap:44px}
.tg-guar-img img{max-width:100%;filter:drop-shadow(0 8px 20px rgba(53,94,35,.18))}
.tg-guar-hand{font-family:'Caveat',cursive;font-size:1.5rem;color:var(--limed);font-weight:600;margin-bottom:4px}
.tg-guar-text h2{font-size:1.7rem;color:var(--ink);margin-bottom:14px;line-height:1.25}
.tg-guar-text p{font-size:1rem;line-height:1.8;color:var(--mu);margin-bottom:20px;max-width:560px}

/* ── FAQ — clean list, no heavy boxes ── */
.tg-faq{background:var(--ink);padding:72px 0}
.tg-faq-inner{max-width:760px;margin:0 auto;text-align:center}
.tg-faq-inner h2{font-size:1.85rem;color:var(--wh);margin-bottom:36px}
.tg-fq-list{text-align:left}
.tg-fq-item{border-bottom:1px solid rgba(255,255,255,.12)}
.tg-fq-item:first-child{border-top:1px solid rgba(255,255,255,.12)}
.tg-fq-btn{width:100%;background:none;border:none;text-align:left;padding:20px 4px;font-family:'Work Sans',sans-serif;font-size:1rem;font-weight:600;color:var(--wh);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.tg-fq-ico{font-size:1.3rem;color:var(--lime);flex-shrink:0;transition:transform .3s;font-weight:300}
.tg-fq-item.open .tg-fq-ico{transform:rotate(45deg)}
.tg-fq-item.open .tg-fq-btn span:first-child{color:var(--lime)}
.tg-fq-body{display:none;padding:0 4px 20px;font-size:.92rem;line-height:1.78;color:rgba(255,255,255,.6)}
.tg-fq-item.open .tg-fq-body{display:block}

/* ── FINAL CTA — solid lime, the one bold moment ── */
.tg-cta{background:var(--lime);padding:72px 0;text-align:center}
.tg-cta-inner{max-width:680px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.tg-cta h2{font-size:2.1rem;color:var(--ink);margin-bottom:14px;line-height:1.18}
.tg-cta-lead{font-size:1rem;color:rgba(20,21,15,.72);margin-bottom:28px;line-height:1.7}

/* ── FOOTER ── */
footer{background:#0B0C08;padding:48px 20px 24px}
.tg-ft-top{text-align:center;margin-bottom:18px}
.tg-ft-brand{font-family:'Unbounded',sans-serif;font-size:1.4rem;font-weight:700;color:var(--wh)}
.tg-ft-brand span{color:var(--lime)}
.tg-ft-tag{font-size:.8rem;color:rgba(255,255,255,.3);margin-top:4px}
.tg-ft-nav-lbl{text-align:center;font-size:.7rem;font-weight:700;color:var(--lime);text-transform:uppercase;letter-spacing:1.5px;margin:18px 0 10px}
.tg-ft-nav{display:flex;flex-wrap:wrap;justify-content:center;background:rgba(255,255,255,.04);border-radius:var(--r);padding:14px 16px;margin-bottom:26px;gap:4px;border:1px solid rgba(255,255,255,.07)}
.tg-ft-nav a{color:rgba(255,255,255,.5);text-decoration:none;font-size:.85rem;font-weight:500;padding:5px 14px;border-right:1px solid rgba(255,255,255,.08);white-space:nowrap;transition:color .2s,background .2s,border-radius .2s}
.tg-ft-nav a:last-child{border-right:none}
.tg-ft-nav a:hover{color:#0B0C08;background:var(--lime);border-radius:20px;border-right:1px solid transparent}
.tg-ft-legal{max-width:1000px;margin:0 auto;border-top:1px solid rgba(255,255,255,.06);padding-top:22px}
.tg-ft-disc{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:16px 20px;margin-bottom:16px}
.tg-ft-disc strong{font-size:.8rem;color:var(--lime);display:block;margin-bottom:8px}
.tg-ft-disc p{font-size:.76rem;line-height:1.7;color:rgba(255,255,255,.28);margin-bottom:8px}
.tg-ft-disc p:last-child{margin-bottom:0}
.tg-ft-links{text-align:center;margin-bottom:14px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px}
.tg-ft-links a{color:rgba(255,255,255,.45);text-decoration:none;font-size:.81rem;font-weight:500}
.tg-ft-links a:hover{color:var(--lime);text-decoration:underline}
.tg-ft-links span{color:rgba(255,255,255,.12)}
.tg-ft-copy{text-align:center;font-size:.77rem;color:rgba(255,255,255,.18)}
.tg-ft-copy a{color:rgba(255,255,255,.32);text-decoration:none}
.tg-ft-copy a:hover{color:var(--lime)}

/* ── SPROUT-IN — new animation ── */
.sprout-in{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.sprout-in.sprouted{opacity:1;transform:translateY(0)}

/* ── RESPONSIVE ── */
@media(max-width:1040px){
  .tg-hero-grid{grid-template-columns:1fr;text-align:center}
  .tg-hero-copy{order:2}
  .tg-hero-art{order:1;margin-bottom:8px}
  .tg-hero-copy h1{max-width:100%}
  .tg-hero-sub{max-width:100%;margin-left:auto;margin-right:auto}
  .tg-hero-cta-row{justify-content:center}
  .tg-leaf-list li{text-align:left}
  .tg-gap-grid{grid-template-columns:1fr}
  .tg-gap-notes{padding-top:0}
  .tg-note-2{margin-left:0}
  .tg-guar-grid{grid-template-columns:1fr;text-align:center}
  .tg-guar-text p{margin-left:auto;margin-right:auto}
}
@media(max-width:700px){
  nav{top:10px;padding:0 10px}
  .tg-nav-row{padding:8px 8px 8px 16px}
  .tg-nav{display:none}
  .tg-nav-cta{display:none}
  .tg-burger{display:flex}
  .tg-hero{padding:38px 0 44px}
  .tg-hero-copy h1{font-size:1.7rem}
  .tg-stats-row{gap:18px}
  .tg-stat-num{font-size:1.5rem}
  .tg-gap-section,.tg-whatis,.tg-ing-section,.tg-bonus-section,.tg-reviews,.tg-faq,.tg-cta{padding:48px 0}
  .tg-gap-text h2,.tg-whatis h2,.tg-ing-h2,.tg-bonus-h2,.tg-faq-inner h2{font-size:1.5rem}
  .tg-ing-row{grid-template-columns:64px 1fr;gap:16px}
  .tg-ing-num{font-size:1.7rem}
  .tg-bonus-shelf{gap:34px}
  .tg-quote{padding:26px 22px 22px 44px;margin-left:0!important;margin-right:0!important}
  .tg-quote-mark{font-size:3rem;left:12px}
  .tg-cta h2{font-size:1.6rem}
  footer{padding:38px 16px 20px}
  .tg-ft-nav a{border-right:none;padding:5px 10px}
}