/* ==========================================================================
   Lehja 30 — landing page styles
   Every rule is namespaced under .lj so nothing here can affect the rest of
   the site, and nothing in Bootstrap or style.css can leak into this page.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap');

.lj{
  --lj-ink:#ECE0C6;
  --lj-panel:#FBF6EC;
  --lj-line:#D2BE96;
  --lj-text:#1C2A21;
  --lj-dim:#58664F;
  --lj-dim2:#7C8B72;
  --lj-green:#1D3C2A;
  --lj-tan:#D7BF8F;
  --lj-gold:#BB8C3C;
  --lj-paper:#F2E6C9;
  --lj-paper-ink:#231D12;
  --lj-paper-dim:#8A7A5C;
  --lj-hl:rgba(187,140,60,.42);

  background:var(--lj-ink);
  color:var(--lj-text);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.lj *{box-sizing:border-box}
.lj-wrap{max-width:760px;margin:0 auto;padding:0 20px}

.lj h1,.lj h2{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--lj-text);text-transform:none}
.lj p{color:var(--lj-dim);max-width:34em;margin:0 0 14px}
.lj a.lj-link{color:var(--lj-green);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.lj a.lj-link:hover{color:var(--lj-gold)}

/* ---------- hero ---------- */
.lj-hero{padding:48px 0 8px}
.lj-mark{display:block;width:74px;height:74px;color:var(--lj-green);margin-bottom:18px}
.lj-mark svg{width:100%;height:100%;display:block}
.lj-hero h1{font-size:clamp(34px,9vw,54px);letter-spacing:-.035em}
.lj-sub{font-family:"Newsreader",Georgia,serif;font-size:clamp(19px,4.4vw,23px);
  line-height:1.5;color:var(--lj-dim);margin-top:16px;max-width:30em}

/* ---------- the marked-up script ---------- */
.lj-script{background:var(--lj-paper);color:var(--lj-paper-ink);border-radius:16px;
  padding:22px 20px;margin:26px 0 8px;font-family:"Newsreader",Georgia,serif;
  font-size:21px;line-height:1.8;box-shadow:0 1px 3px rgba(29,60,42,.08)}
.lj-lbl{font-family:"Instrument Sans",sans-serif;font-size:12px;font-weight:600;
  color:var(--lj-paper-dim);margin-bottom:14px;line-height:1.4}
.lj-script em{font-style:normal;font-weight:500;box-shadow:inset 0 -.42em 0 var(--lj-hl)}
.lj-script b{color:var(--lj-gold);font-family:"Instrument Sans",sans-serif;font-size:.72em;
  font-weight:700;vertical-align:.1em;padding:0 .1em}
.lj-key{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--lj-dim);margin-top:12px}
.lj-key i{font-style:normal;color:var(--lj-gold);font-weight:700}

/* ---------- buttons ---------- */
.lj-cta{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 8px}
.lj a.lj-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--lj-green);color:#F7F0E0;font-weight:600;border-radius:12px;
  padding:15px 24px;font-size:16px;text-decoration:none;flex:1;min-width:210px;
  border:1px solid var(--lj-green);transition:background .15s}
.lj a.lj-btn:hover{background:#16301F;color:#F7F0E0}
.lj a.lj-ghost{background:var(--lj-panel);color:var(--lj-text);border:1px solid var(--lj-line);font-weight:500}
.lj a.lj-ghost:hover{background:#fff;color:var(--lj-text)}
.lj-note{color:var(--lj-dim2);font-size:13.5px;margin-top:4px}

/* ---------- sections ---------- */
.lj-sec{padding:38px 0;border-top:1px solid var(--lj-line);margin-top:38px}
.lj-sec h2{font-size:26px;margin-bottom:14px}
.lj-last{padding-bottom:52px}
.lj-mt{margin-top:20px}

.lj-grid{display:grid;gap:12px;grid-template-columns:1fr;margin-top:22px}
@media(min-width:640px){.lj-grid{grid-template-columns:1fr 1fr}}
.lj-cell{background:var(--lj-panel);border:1px solid var(--lj-line);border-radius:14px;padding:17px}
.lj-cell b{display:block;font-size:16.5px;margin-bottom:5px;color:var(--lj-text)}
.lj-cell span{color:var(--lj-dim);font-size:14.5px}

.lj-phases{margin-top:22px;border:1px solid var(--lj-line);border-radius:14px;
  overflow:hidden;background:var(--lj-panel)}
.lj-ph{display:flex;gap:14px;padding:14px 16px;border-bottom:1px solid var(--lj-line);align-items:baseline}
.lj-ph:last-child{border-bottom:0}
.lj-ph .d{flex:0 0 84px;color:var(--lj-green);font-weight:600;font-size:14px}
.lj-ph .t{flex:1}
.lj-ph .t b{display:block;font-weight:600;font-size:15.5px;color:var(--lj-text)}
.lj-ph .t span{color:var(--lj-dim);font-size:14px}

.lj ol.lj-steps{counter-reset:ljs;list-style:none;padding:0;margin:20px 0 0}
.lj ol.lj-steps li{counter-increment:ljs;position:relative;padding:0 0 16px 44px;color:var(--lj-dim)}
.lj ol.lj-steps li::before{content:counter(ljs);position:absolute;left:0;top:0;
  width:28px;height:28px;border-radius:9px;background:#E4D8BC;color:var(--lj-green);
  font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center}
.lj ol.lj-steps li b{color:var(--lj-text)}

.lj :focus-visible{outline:2px solid var(--lj-green);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.lj *{transition:none!important}}


/* ==========================================================================
   Added for Lehja 30 — audience panel, before/after, outcomes
   ========================================================================== */

.lj-eyebrow{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lj-gold);font-weight:600;margin-bottom:14px}

.lj-mean{font-size:15px;color:var(--lj-dim);margin-top:18px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.lj-mean span{font-size:26px;color:var(--lj-green);line-height:1}
.lj-mean em{font-style:italic;color:var(--lj-text);font-weight:500}

/* ---------- the dark audience band ---------- */
.lj-band{background:var(--lj-green);color:#EFE7D6;border-radius:20px;padding:40px 26px;margin:44px 0}
.lj-band-head h2{color:#fff;font-size:clamp(25px,5.6vw,34px);line-height:1.22;margin:0}
.lj-band-head h2 em{font-style:normal;color:var(--lj-tan);
  box-shadow:inset 0 -.16em 0 rgba(187,140,60,.55)}
.lj-band .lj-eyebrow{color:var(--lj-tan)}

.lj-chips{display:grid;gap:12px;grid-template-columns:1fr;margin:28px 0 0}
@media(min-width:620px){.lj-chips{grid-template-columns:1fr 1fr}}
.lj-chip{background:rgba(255,255,255,.07);border:1px solid rgba(215,191,143,.25);
  border-radius:13px;padding:15px 16px}
.lj-chip b{display:block;font-size:16px;color:#fff;line-height:1.35;margin-bottom:5px}
.lj-chip span{font-size:14px;color:#BFCBBB;line-height:1.5}

.lj-level{display:grid;gap:14px;grid-template-columns:1fr;margin-top:26px;
  border-top:1px solid rgba(215,191,143,.25);padding-top:24px}
@media(min-width:620px){.lj-level{grid-template-columns:repeat(3,1fr)}}
.lj-level-item span{display:block}
.lj-num{font-size:30px;font-weight:700;color:var(--lj-tan);letter-spacing:-.02em;line-height:1.1;margin-bottom:6px}
.lj-level-item span:last-child{font-size:13.5px;color:#BFCBBB;line-height:1.5}

.lj-langs{margin-top:28px;border-top:1px solid rgba(215,191,143,.25);padding-top:24px}
.lj-lang-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.lj-lang{font-size:14px;padding:7px 14px;border-radius:999px;
  border:1px solid rgba(215,191,143,.4);color:#D9E2D5}
.lj-lang-core{background:var(--lj-tan);color:var(--lj-green);border-color:var(--lj-tan);font-weight:600}
.lj-lang-note{font-size:13.5px;color:#AEBDA9;line-height:1.6;max-width:46em;margin:0}

.lj-not{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;
  border-top:1px solid rgba(215,191,143,.25);padding-top:22px}
.lj-not span{font-size:13.5px;color:#E4B9B2;border:1px dashed rgba(228,185,178,.45);
  border-radius:999px;padding:6px 14px}

/* ---------- before / after ---------- */
.lj-compare{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;margin:26px 0 10px}
.lj-wave{flex:1 1 240px;background:var(--lj-panel);border:1px solid var(--lj-line);
  border-radius:14px;padding:16px}
.lj-wave svg{width:100%;height:58px;display:block;margin:10px 0}
.lj-wave-before{color:#9B7F62}
.lj-wave-after{color:var(--lj-green)}
.lj-wave-lbl{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lj-dim2)}
.lj-wave-after .lj-wave-lbl{color:var(--lj-green)}
.lj-wave-note{font-size:13.5px;color:var(--lj-dim)}
.lj-arrow{align-self:center;color:var(--lj-gold);font-size:26px;line-height:1}
@media(max-width:620px){.lj-arrow{transform:rotate(90deg);align-self:center;margin:0 auto}}
.lj-caption{font-size:12.5px;color:var(--lj-dim2);font-style:italic;margin-top:2px}

/* ---------- outcomes ---------- */
.lj-changes{display:grid;gap:12px;grid-template-columns:1fr;margin-top:6px}
@media(min-width:620px){.lj-changes{grid-template-columns:1fr 1fr}}
.lj-change{background:var(--lj-panel);border:1px solid var(--lj-line);border-radius:13px;
  padding:16px 16px 16px 44px;position:relative}
.lj-change::before{content:"";position:absolute;left:16px;top:20px;width:14px;height:14px;
  border-radius:50%;background:var(--lj-gold);
  box-shadow:0 0 0 4px rgba(187,140,60,.18)}
.lj-change b{display:block;font-size:16px;margin-bottom:4px;color:var(--lj-text);line-height:1.35}
.lj-change span{font-size:14px;color:var(--lj-dim);line-height:1.5}

.lj-sec h2{margin-bottom:14px}