:root {
      --bg: #ffffff;
      --text: #1a1a1a;
      --muted: #5f6b6b;
      --brand: #6C7D21;
      --brand-2: #2aa77f;
      --card: #f6f8f7;
      --border: #e3e7e5;
      }
      <!--* { box-sizing: border-box; }-->
      body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color: var(--text);
      background: var(--bg);
      line-height: 1.5;
      }
      a { color: var(--brand); text-decoration: none; }
      a:hover { text-decoration: underline; }
      .container { max-width: 1100px; margin: 0 auto; padding: 24px; }
      
      .gg-badge { display:inline-flex; align-items:center; gap:8px; background: var(--card); border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size: 12px; color: var(--muted);}
      .leaf { width:16px; height:16px; }
          header.hero {
      background: linear-gradient(180deg, #efefef, #ffffff);
      padding: 28px 0 24px;
      }
      p.hero-sub { font-size: 18px; color: var(--muted); max-width: 60ch; }
      
      .cta { display:flex; gap:12px; margin-top: 16px; flex-wrap: wrap;}
      .btn.secondary { background: transparent; color: var(--brand) !important; }
      .btn {
      display:inline-block; padding:12px 16px; border-radius:10px; border:1px solid var(--brand); background: var(--brand); color:white !important; font-weight:600;
      }
      #what{border-top:1px solid var(--border);}

      .grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:28px; }
      @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } h1{font-size:32px} }
      section { padding: 28px 0; }
      h2 { font-size: 28px; margin: 0 0 10px; }
      .card {
      background: var(--card); border:1px solid var(--border); padding:20px; border-radius:14px;
      }
      .levels { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
      @media (max-width: 780px) { .levels { grid-template-columns: 1fr; } }
      .level h3 { margin:6px 0 8px; }
      .note { font-size: 14px; color: var(--muted); }
      .pill { display:inline-block; padding:4px 10px; border-radius:999px; background:#e1eebf; color:#0b684f; font-size: 12px; border:1px solid #cfe9e2; }
      .products { margin-top: 8px; }
      .product-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
      @media (max-width: 980px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 620px) { .product-grid { grid-template-columns: 1fr; } }
      .product-card { background:white; border:1px solid var(--border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
      .product-img { background: #eaf5f1; aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center; font-weight:700; color:#0b7a5e; }
      .product-body { padding:14px; display:flex; flex-direction:column; gap:8px; }
      .product-body h4 { margin: 0; font-size: 16px; }
      .product-meta { font-size: 12px; color: var(--muted); }
      .faq-item { border-top:1px solid var(--border); padding:16px 0; }
      footer {
      border-top:1px solid var(--border); padding: 16px 0 40px; color: var(--muted); font-size: 14px;
      }
      .inline-icon { display:inline-flex; gap:8px; align-items:center;}
      .disclaimer { font-size:12px; color: var(--muted); margin-top:8px; }
      .filter { display:flex; gap:10px; flex-wrap:wrap; margin: 12px 0 18px; }
      .filter button { padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:white; cursor:pointer; }
      .filter button.active { background:#e1eebf; border-color:#bfe3d8; }