:root{
  --ink:#13261c; --ink-soft:#3a4b40; --muted:#5d6c61;
  --paper:#f6f4ea; --paper-2:#fffdf6; --line:#e1ddca;
  --emerald:#0f7a4f; --emerald-d:#0a5638; --emerald-dd:#073d28;
  --leaf:#26a96b; --mint:#e7f5ec;
  --amber:#f4a92b; --amber-d:#d98b12; --coupon:#fff3d8;
  --shadow:0 10px 30px rgba(7,61,40,.10);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{width:100%;overflow-x:hidden;margin:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:var(--paper); line-height:1.68;
  font-size:17px; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1090px; margin:0 auto; padding:0 24px; width:100%}
h1,h2,h3,h4{font-family:'Sora',sans-serif; line-height:1.18; color:var(--ink); letter-spacing:-.01em}
h1{font-size:2.35rem; font-weight:800; margin:.1em 0 .35em}
h2{font-size:1.62rem; font-weight:700; margin:1.9em 0 .55em; position:relative; padding-left:16px}
h2::before{content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:6px;
  border-radius:6px; background:linear-gradient(var(--leaf),var(--emerald-d))}
h3{font-size:1.22rem; font-weight:700; margin:1.5em 0 .4em; color:var(--emerald-dd)}
p{margin:0 0 1.05em}
a{color:var(--emerald-d); text-decoration:none}
main a:not(.btn):not(.cta){border-bottom:1.5px solid rgba(15,122,79,.32)}
main a:not(.btn):not(.cta):hover{border-bottom-color:var(--emerald)}
strong{color:var(--emerald-dd)}

/* progress + header */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--leaf),var(--amber))}
.site-head{position:sticky; top:0; z-index:50; background:rgba(246,244,234,.94);
  backdrop-filter:saturate(150%) blur(8px); border-bottom:1px solid var(--line)}
.head-row{display:flex; align-items:center; gap:18px; min-height:64px}
.brand-logo{display:inline-flex; align-items:center; gap:9px; font-family:'Sora';
  font-weight:800; font-size:1.32rem; color:var(--emerald-dd); letter-spacing:-.02em;
  border:0!important}
.brand-logo .seed{width:22px;height:22px;border-radius:50% 50% 50% 2px;
  background:linear-gradient(150deg,var(--leaf),var(--emerald-d));
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.55); transform:rotate(-12deg)}
.nav-main{margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.nav-main a{font-weight:600; font-size:.96rem; color:var(--ink-soft); padding:8px 11px;
  border-radius:9px; border:0!important}
.nav-main a:hover{background:var(--mint); color:var(--emerald-dd)}
.nav-main a.cta{margin-left:6px}
.cta,.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(180deg,var(--amber),var(--amber-d)); color:#3a2602!important;
  font-weight:700; font-family:'Sora'; padding:11px 20px; border-radius:11px; border:0!important;
  box-shadow:0 8px 18px rgba(217,139,18,.28); cursor:pointer}
.cta:hover,.btn:hover{filter:brightness(1.04); transform:translateY(-1px)}
.burger{display:none; margin-left:auto; width:46px; height:42px; border-radius:11px;
  border:1px solid var(--line); background:var(--paper-2); position:relative; cursor:pointer}
.burger span,.burger span::before,.burger span::after{content:""; position:absolute;
  left:11px; width:24px; height:2.5px; border-radius:3px; background:var(--emerald-dd); transition:.25s}
.burger span{top:20px}
.burger span::before{top:-7px} .burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

/* hero */
.hero{background:
  radial-gradient(1200px 380px at 84% -90px,rgba(38,169,107,.20),transparent 60%),
  linear-gradient(180deg,var(--emerald-dd),var(--emerald-d) 60%,var(--emerald));
  color:#eafff3; padding:46px 0 52px}
.hero .wrap{position:relative}
.kicker{display:inline-block; font-family:'Sora'; font-weight:700; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:#bdf0d3;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  padding:6px 13px; border-radius:999px; margin-bottom:16px}
.hero h1{color:#fff; max-width:18ch}
.hero .lead{font-size:1.12rem; color:#d6f4e2; max-width:62ch; margin-bottom:4px}
.hero .btn{margin-top:18px}

/* breadcrumbs */
.crumbs{background:var(--paper-2); border-bottom:1px solid var(--line); font-size:.9rem}
.crumbs .wrap{padding-top:11px; padding-bottom:11px; color:var(--muted)}
.crumbs a{color:var(--emerald-d); border:0!important}
.crumbs span{color:var(--ink-soft)}

/* main */
main{padding:14px 0 48px}
main .wrap>section{margin-top:8px}
.lead-snippet{font-size:1.06rem; color:var(--ink-soft);
  background:var(--paper-2); border:1px solid var(--line); border-left:5px solid var(--leaf);
  border-radius:12px; padding:16px 20px; margin:18px 0 8px}

/* coupon / ticket callout */
.coupon{position:relative; background:var(--coupon); border:1.5px dashed var(--amber-d);
  border-radius:14px; padding:20px 22px; margin:22px 0; box-shadow:var(--shadow)}
.coupon::before,.coupon::after{content:""; position:absolute; top:50%; width:22px; height:22px;
  background:var(--paper); border-radius:50%; transform:translateY(-50%)}
.coupon::before{left:-12px; box-shadow:inset -2px 0 0 var(--amber-d)}
.coupon::after{right:-12px; box-shadow:inset 2px 0 0 var(--amber-d)}
.coupon h3{margin-top:0; color:var(--amber-d)}
.coupon .tag{display:inline-block; font-family:'Sora'; font-weight:800; letter-spacing:.05em;
  background:var(--emerald-d); color:#eafff3; padding:5px 14px; border-radius:8px; font-size:.92rem}

/* cards / panels */
.panel{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; margin:18px 0; box-shadow:var(--shadow)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.mini{background:var(--paper-2); border:1px solid var(--line); border-radius:13px; padding:16px 18px}
.mini b{font-family:'Sora'; display:block; color:var(--emerald-dd); margin-bottom:3px}

/* verdict box */
.verdict{display:grid; grid-template-columns:1.1fr 1fr; gap:0; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--line); margin:22px 0; box-shadow:var(--shadow)}
.verdict .v-main{background:linear-gradient(160deg,var(--emerald-d),var(--emerald-dd)); color:#eafff3; padding:22px 24px}
.verdict .v-main h3{color:#fff; margin-top:0}
.verdict .v-side{background:var(--paper-2); padding:22px 24px}
.score{font-family:'Sora'; font-weight:800; font-size:2.6rem; color:var(--amber)}

/* pros-cons */
.pc{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0}
.pc ul{list-style:none; padding:0; margin:0}
.pc li{padding:7px 0 7px 28px; position:relative; border-bottom:1px dashed var(--line)}
.pros li::before{content:"✓"; position:absolute; left:4px; color:var(--emerald); font-weight:800}
.cons li::before{content:"–"; position:absolute; left:6px; color:var(--amber-d); font-weight:800}
.pc h3{margin-top:0}

/* generic lists */
main ul,main ol{margin:0 0 1.1em; padding-left:1.3em}
main li{margin:.32em 0}
ul.checks{list-style:none; padding-left:0}
ul.checks li{position:relative; padding-left:30px; margin:.5em 0}
ul.checks li::before{content:"🌿"; position:absolute; left:0; font-size:.95em}

/* tables */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:18px 0;
  border:1px solid var(--line); border-radius:12px}
table{border-collapse:collapse; width:100%; min-width:460px; background:var(--paper-2)}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:.96rem}
th{background:var(--mint); font-family:'Sora'; font-weight:700; color:var(--emerald-dd)}
tr:last-child td{border-bottom:0}

/* figures */
figure{margin:22px 0; text-align:center}
figure img{width:90%; height:auto; border-radius:12px; box-shadow:var(--shadow); cursor:zoom-in}
figcaption{font-size:.86rem; color:var(--muted); margin-top:9px}

/* tabs */
.tabs{margin:20px 0}
.tab-btns{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.tab-btns button{font-family:'Sora'; font-weight:600; font-size:.93rem; padding:9px 16px;
  border-radius:10px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink-soft); cursor:pointer}
.tab-btns button.active{background:var(--emerald-d); color:#eafff3; border-color:var(--emerald-d)}
.tabp{display:none} .tabp.active{display:block}

/* calculator */
.calc{background:var(--mint); border:1px solid var(--leaf); border-radius:var(--radius);
  padding:20px 22px; margin:22px 0}
.calc h3{margin-top:0; color:var(--emerald-dd)}
.calc label{display:block; font-weight:600; margin:12px 0 5px; font-size:.95rem}
.calc input[type=range]{width:100%; accent-color:var(--emerald)}
.calc .row{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.calc .out{font-family:'Sora'; font-weight:800; font-size:1.5rem; color:var(--emerald-d)}
.calc .note{font-size:.85rem; color:var(--muted)}

/* faq */
.faq{margin-top:30px}
.faq details{background:var(--paper-2); border:1px solid var(--line); border-radius:12px;
  margin:11px 0; overflow:hidden}
.faq summary{font-family:'Sora'; font-weight:600; padding:15px 18px; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; gap:14px; min-height:44px; align-items:center}
.faq summary::after{content:"+"; font-size:1.35rem; color:var(--amber-d); transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 18px 16px; color:var(--ink-soft)}

/* CTA block */
.cta-block{background:linear-gradient(160deg,var(--emerald-d),var(--emerald-dd)); color:#eafff3;
  border-radius:var(--radius); padding:26px 26px; margin:30px 0; text-align:center; box-shadow:var(--shadow)}
.cta-block h3{color:#fff; margin-top:0; font-size:1.35rem}
.cta-block .cta-copy{color:#d6f4e2; max-width:60ch; margin:0 auto 16px}

/* footer */
.site-foot{background:var(--emerald-dd); color:#c9e6d4; padding:40px 0 24px; margin-top:30px}
.foot-grid{display:grid; grid-template-columns:1.2fr 1fr 1.4fr; gap:26px}
.site-foot h4{font-family:'Sora'; color:#fff; font-size:1rem; margin:0 0 12px}
.site-foot a{display:block; color:#bfe2cd; padding:3px 0; font-size:.93rem; border:0!important}
.site-foot a:hover{color:#fff}
.rg{margin-bottom:10px; font-size:.92rem}
.age{display:inline-block; background:var(--amber); color:#3a2602; font-weight:800; font-family:'Sora';
  border-radius:7px; padding:2px 9px; margin-right:7px}
.legal{border-top:1px solid rgba(255,255,255,.14); margin-top:22px; padding-top:16px;
  font-size:.82rem; color:#9fc4ad; line-height:1.6}

/* back to top + lightbox */
#totop{position:fixed; right:18px; bottom:18px; width:46px; height:46px; border-radius:50%;
  border:0; background:var(--emerald-d); color:#fff; font-size:1.3rem; cursor:pointer;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.25s; z-index:40}
#totop.show{opacity:1; pointer-events:auto}
.lightbox{position:fixed; inset:0; background:rgba(7,61,40,.86); display:flex; align-items:center;
  justify-content:center; padding:24px; z-index:80}
.lightbox[hidden]{display:none}
.lightbox img{max-width:94vw; max-height:90vh; width:auto; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5)}

@media(max-width:880px){
  body{font-size:16px}
  h1{font-size:1.85rem} h2{font-size:1.42rem} h3{font-size:1.14rem}
  .wrap{padding:0 22px}
  .burger{display:block}
  .nav-main{display:none; position:absolute; left:0; right:0; top:64px;
    flex-direction:column; align-items:stretch; gap:2px; background:var(--paper-2);
    border-bottom:1px solid var(--line); padding:12px 22px 18px; box-shadow:var(--shadow)}
  .nav-main.open{display:flex}
  .nav-main a{padding:12px 10px; border-radius:9px}
  .nav-main a.cta{margin:8px 0 0; justify-content:center}
  .grid2,.grid3,.verdict,.pc{grid-template-columns:1fr}
  .hero{padding:34px 0 38px}
  figure img{width:100%}
}