/* Comparison cluster, inherits the grownlikeapro.com design system.
   Tokens mirror :root in website/index.html. Keep them in sync. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g:#409b65;
  --l:#9ae0f3;
  --a:#f5dd4c;
  --p:#23a5ec;
  --g-dark:#2d7a4a;
  --g-light:#e8f5ee;
  --text-dark:#1a1a2e;
  --text-medium:#4a5568;
  --text-light:#718096;
  --bg-white:#ffffff;
  --bg-off:#f7faf8;
  --bg-dark:#0f2318;
  --border:#e3ece7;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg:0 12px 40px rgba(0,0,0,0.12);
  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:32px;
}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text-dark);background:var(--bg-white);line-height:1.6;
  overflow-x:hidden;padding-top:72px;
}

/* ========== STICKY NAV (matches site) ========== */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,0.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(64,155,101,0.1);transition:all .3s ease}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;
  justify-content:space-between;height:72px}
.nav-brand{display:flex;align-items:center;text-decoration:none}
.nav-logo{height:60px;width:auto}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{color:var(--text-dark);text-decoration:none;font-size:.95rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--g)}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--g);color:#fff !important;
  padding:10px 24px;border-radius:50px;font-weight:600;font-size:.95rem;text-decoration:none;
  transition:all .3s ease;border:none}
.nav-cta:hover{background:var(--g-dark);transform:translateY(-1px);box-shadow:0 4px 16px rgba(64,155,101,.4)}

/* ========== HERO ========== */
.hero{background:linear-gradient(135deg,var(--bg-dark) 0%,var(--g-dark) 100%);color:#fff;padding:56px 24px 44px}
.hero-inner{max-width:900px;margin:0 auto}
.hero-badge{background:rgba(255,255,255,.15);border-radius:50px;padding:6px 16px;font-size:.85rem;
  font-weight:600;display:inline-block;margin-bottom:18px}
.hero h1{font-size:clamp(28px,4.2vw,44px);font-weight:800;letter-spacing:-.5px;margin-bottom:14px;line-height:1.15}
.hero-sub{opacity:.9;font-size:1.05rem}
.hero-stamp{margin-top:20px;font-size:.8rem;opacity:.65}
.hero-stamp a{color:rgba(255,255,255,.85)}

/* ========== LAYOUT ========== */
.breadcrumb{max-width:900px;margin:0 auto;padding:18px 24px;font-size:.82rem;color:var(--text-light)}
.breadcrumb a{color:var(--g);text-decoration:none}
.content{max-width:900px;margin:0 auto;padding:0 24px 88px}
h2{font-size:1.55rem;font-weight:800;margin:44px 0 16px;color:var(--text-dark);line-height:1.3;letter-spacing:-.3px}
h3{font-size:1.08rem;font-weight:700;margin:26px 0 10px}
p{margin-bottom:16px}
ul,ol{margin:0 0 16px 22px}
li{margin-bottom:9px}
a{color:var(--g)}

/* ========== CALLOUTS ========== */
.callout{background:var(--g-light);border-left:4px solid var(--g);border-radius:var(--radius-sm);
  padding:18px 20px;margin:26px 0;font-size:.97rem}
.callout-amber{background:#fdf6d8;border-left:4px solid var(--a);border-radius:var(--radius-sm);
  padding:18px 20px;margin:26px 0;font-size:.97rem}
.callout-quiet{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:18px 20px;margin:26px 0;font-size:.97rem;color:var(--text-medium)}
.callout-quiet strong{color:var(--text-dark)}

/* NEPQ-style question block */
.question-block{margin:30px 0;padding:24px 26px;background:var(--bg-off);
  border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.question-block p.q{font-size:1.05rem;font-weight:700;color:var(--g-dark);margin-bottom:10px;line-height:1.45}
.question-block p:last-child{margin-bottom:0}

/* ========== TABLES ========== */
.table-scroll{overflow-x:auto;margin:26px 0;-webkit-overflow-scrolling:touch}
.compare-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
.compare-table th{padding:13px 15px;text-align:left;font-weight:700;border-bottom:2px solid var(--border);vertical-align:bottom}
.compare-table th:first-child{width:32%}
.compare-table th:nth-child(2){background:var(--g);color:#fff;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.compare-table th:nth-child(3){color:var(--text-light)}
.compare-table td{padding:13px 15px;border-bottom:1px solid var(--border);vertical-align:top}
.compare-table td:nth-child(2){background:var(--g-light)}
.compare-table tr.section-row td{background:var(--bg-off);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text-light)}
.check{color:var(--g-dark);font-weight:700}
.cross{color:var(--text-light);font-weight:700}
.even{color:var(--text-medium);font-weight:600}
.note{font-size:.78rem;color:var(--text-light);margin-top:-10px;line-height:1.55}

/* ========== CARDS ========== */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:26px 0}
.card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:22px;box-shadow:var(--shadow-sm)}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}

/* ========== VERDICT + CTA ========== */
.verdict-box{background:linear-gradient(135deg,var(--bg-dark) 0%,var(--g-dark) 100%);color:#fff;
  border-radius:var(--radius-lg);padding:34px;margin:44px 0}
.verdict-box h3{font-size:1.25rem;font-weight:800;margin:0 0 12px;color:#fff}
.verdict-box p{opacity:.92;margin-bottom:10px}
.verdict-box p:last-child{margin-bottom:0}
.verdict-box a{color:var(--l)}
.cta-box{background:linear-gradient(135deg,var(--g) 0%,var(--g-dark) 100%);color:#fff;
  border-radius:var(--radius-lg);padding:44px;text-align:center;margin:52px 0 0}
.cta-box h2{font-size:1.5rem;font-weight:800;margin:0 0 10px;color:#fff}
.cta-box p{opacity:.9;margin-bottom:26px}
.cta-btn{background:#fff;color:var(--g-dark);padding:15px 34px;border-radius:50px;font-weight:800;
  font-size:.98rem;text-decoration:none;display:inline-block;transition:all .3s ease}
.cta-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* ========== FAQ ========== */
.faq{margin:16px 0 0}
.faq-item{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:20px 22px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.faq-item h3{margin:0 0 8px;font-size:1rem;color:var(--g-dark)}
.faq-item p:last-child{margin-bottom:0}

/* ========== MEDIA ========== */
.media{margin:26px 0}
.media figure{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:12px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.media img,.media video{width:100%;height:auto;border-radius:var(--radius-sm);display:block}
.media figcaption{font-size:.8rem;color:var(--text-light);padding:10px 4px 2px;line-height:1.55}

/* ========== TIER LADDERS (rendered side-by-side pricing) ==========
   Deliberately HTML and CSS rather than an image: the prices have to be
   crawlable text so they serve ranking and answer engines, and so a reprice is
   a text edit rather than a re-shoot. Used by vs-microgreen-tracker.html. */
.ladders{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:26px 0}
.ladder{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:20px 20px 8px;box-shadow:var(--shadow-sm)}
.ladder-glap{border-color:var(--g);box-shadow:var(--shadow-md)}
.ladder h3{margin:0 0 6px;font-size:1.08rem;color:var(--g-dark)}
.ladder-mt h3{color:var(--text-medium)}
.ladder-src{font-size:.74rem;color:var(--text-light);line-height:1.55;margin:0 0 12px}
.tier-list{list-style:none;margin:0;padding:0}
.tier{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--border)}
.tier:first-child{border-top:0;padding-top:2px}
.tier-name{font-weight:800;font-size:.95rem}
.tier-price{font-weight:800;font-size:.95rem;text-align:right}
.ladder-glap .tier-price{color:var(--g-dark)}
.tier-price small{display:block;font-weight:600;font-size:.72rem;opacity:.75;letter-spacing:0}
.tier-cap{grid-column:1/-1;font-size:.85rem;font-weight:600;color:var(--text-medium);margin-top:3px}
.tier-note{grid-column:1/-1;font-size:.79rem;color:var(--text-light);line-height:1.55;margin-top:3px}

/* ========== RECEIPTS (competitor screenshots as corroboration) ==========
   Subordinate to the rendered ladders above on purpose. Evidence, not hero. */
.receipts{margin:24px 0 8px;max-width:660px}
.receipts[hidden]{display:none}
.receipts-label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-light);margin-bottom:10px}
.receipts figure{background:var(--bg-off);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:8px;margin:0 0 14px}
.receipts img{display:block;width:100%;max-width:100%;height:auto;border-radius:4px;
  border:1px solid var(--border);background:var(--bg-white)}
.receipts figcaption{font-size:.75rem;color:var(--text-light);line-height:1.55;padding:9px 3px 1px}
.receipts figcaption a{color:var(--text-medium)}

/* ========== RELATED ========== */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:20px 0 0}
.related a{display:block;background:var(--bg-white);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:18px 20px;text-decoration:none;color:var(--text-dark);
  transition:all .3s ease}
.related a:hover{border-color:var(--g);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.related a strong{display:block;color:var(--g-dark);margin-bottom:4px;font-size:.98rem}
.related a span{font-size:.85rem;color:var(--text-medium)}

/* ========== LEGAL ========== */
.legal{background:var(--bg-off);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:20px 22px;margin:44px 0 0;font-size:.76rem;color:var(--text-light);line-height:1.6}
.legal strong{color:var(--text-dark)}
.legal a{color:var(--g)}

/* ========== FOOTER (matches site) ========== */
.footer{background:var(--bg-dark);color:rgba(255,255,255,.75);padding:56px 24px 28px;margin-top:0}
.footer .container{max-width:1200px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-logo{height:54px;width:auto;margin-bottom:14px}
.footer-desc{font-size:.88rem;color:rgba(255,255,255,.6);line-height:1.7;max-width:340px}
.footer-col h4{color:#fff;font-size:.95rem;font-weight:700;margin-bottom:14px}
.footer-col a{display:block;color:rgba(255,255,255,.6);text-decoration:none;font-size:.88rem;
  margin-bottom:9px;transition:color .2s}
.footer-col a:hover{color:var(--g)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;
  align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.footer-copyright{font-size:.82rem;color:rgba(255,255,255,.5)}
.footer-social{display:flex;gap:12px}
.footer-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;
  font-size:.85rem;transition:all .3s ease}
.footer-social a:hover{background:var(--g)}

@media(max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:640px){
  .nav-links{display:none}
  .nav-logo{height:48px}
  body{padding-top:64px}
  .nav-inner{height:64px}
  .hero{padding:40px 20px 32px}
  .verdict-box,.cta-box{padding:26px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ========== Legacy blocks used by vs-spreadsheets.html ========== */
.pain-list{margin:26px 0;display:grid;gap:14px}
.pain-item{display:flex;gap:14px;align-items:flex-start;background:var(--bg-white);
  border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 20px;box-shadow:var(--shadow-sm)}
.pain-icon{flex:0 0 auto;font-size:1.4rem;line-height:1.3}
.pain-content{flex:1}
.pain-content strong{display:block;margin-bottom:4px;color:var(--g-dark)}
.pain-content p{margin-bottom:0;font-size:.95rem;color:var(--text-medium)}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:26px 0}
.feature-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:22px;box-shadow:var(--shadow-sm);transition:all .3s ease}
.feature-card:hover{border-color:var(--g);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.feature-icon{font-size:1.7rem;margin-bottom:10px;display:block}
.feature-title{font-size:1rem;font-weight:700;color:var(--g-dark);margin-bottom:6px}
.feature-desc{font-size:.9rem;color:var(--text-medium);margin-bottom:0;line-height:1.6}

/* ---- Localization furniture -------------------------------------------------
   Used only by the translated compare pages under /<lang>/compare/. The English
   originals never render either block. Defined here rather than inline so the
   120 localized files share one definition and cannot drift apart.
   Tokens above, so these follow the same palette as the rest of the cluster. */
.lang-source-note{margin:0 0 28px;padding:12px 16px;background:var(--g-light);
  border-left:3px solid var(--g);border-radius:var(--radius-sm);font-size:.875rem;
  line-height:1.6;color:var(--text-medium)}
.lang-source-note a{color:var(--g-dark);font-weight:600}
[dir="rtl"] .lang-source-note{border-left:0;border-right:3px solid var(--g)}

.lang-switch{margin:36px auto;max-width:1200px;padding:18px 20px;background:var(--bg-white);
  border:1px solid var(--border);border-radius:var(--radius-md);font-size:.875rem;
  color:var(--text-medium)}
.lang-switch a{display:inline-block;margin:4px 6px 4px 0;padding:4px 10px;
  border-radius:999px;background:var(--g-light);font-size:.8125rem;font-weight:600;
  color:var(--g-dark);text-decoration:none;transition:all .2s ease}
.lang-switch a:hover{background:var(--g);color:var(--bg-white)}
[dir="rtl"] .lang-switch a{margin:4px 0 4px 6px}