/* ==========================================================================
   Keep Ingredients — Production & Quality Capability page
   Same design system as the procurement guide: primary #69B429,
   secondary #FFB615. Every selector is scoped to .kg-guide and headings
   carry !important, because themes ship rules such as .rte h1 { ... }
   that would otherwise win on specificity. Numbering uses data-n
   attributes on plain divs, never ordered lists.
   ========================================================================== */
/* Page shell: only matches when this page IS the whole document (standalone
   file / preview). Inside a theme the wrapper sits in the page content, so
   this rule never fires and cannot touch the theme's own body styling. */
body:has(> .kg-guide){margin:0;padding:0;background:#fff}

.kg-guide{
  --kg-green:#69B429;
  --kg-green-600:#56961f;
  --kg-green-700:#3f7015;
  --kg-green-900:#254710;
  --kg-amber:#FFB615;
  --kg-amber-600:#e09c00;
  --kg-ink:#132310;
  --kg-body:#4b584a;
  --kg-muted:#7f8c7e;
  --kg-line:#e3ebdb;
  --kg-wash:#f6fbf1;
  --kg-wash-2:#fbfdf8;
  --kg-amber-wash:#fffaeb;
  --kg-radius:14px;
  --kg-shadow:0 1px 2px rgba(19,35,16,.045), 0 8px 24px rgba(19,35,16,.035);
  --kg-font:"Inter","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  position:relative;
  color:var(--kg-ink);
  background:#fff;
  font-family:var(--kg-font);
  font-size:16px;
  line-height:1.72;
  text-align:left;
  -webkit-font-smoothing:antialiased;
}
.kg-guide,.kg-guide *,.kg-guide *::before,.kg-guide *::after{box-sizing:border-box}
.kg-guide img{max-width:100%;display:block}
.kg-guide a{color:var(--kg-green-700)}
.kg-guide .wrap{width:min(1180px,calc(100% - 40px));margin:0 auto}
.kg-guide .sec{padding:clamp(46px,5.4vw,78px) 0;border-top:1px solid var(--kg-line)}
.kg-guide .sec--wash{background:var(--kg-wash-2)}
.kg-guide .sec--tint{background:var(--kg-wash)}

/* ---------- headings (hardened) ---------- */
.kg-guide h1{
  font-family:var(--kg-font) !important;
  font-size:clamp(32px,4.6vw,56px) !important;
  line-height:1.08 !important;
  letter-spacing:-.028em !important;
  font-weight:800 !important;
  color:var(--kg-ink) !important;
  margin:0 0 10px !important;
  padding:0 !important;
  max-width:20em;
}
.kg-guide h2{
  font-family:var(--kg-font) !important;
  font-size:clamp(23px,2.8vw,36px) !important;
  line-height:1.16 !important;
  letter-spacing:-.022em !important;
  font-weight:800 !important;
  color:var(--kg-ink) !important;
  margin:0 0 12px !important;
  padding:0 !important;
}
.kg-guide h3{
  font-family:var(--kg-font) !important;
  font-size:16px !important;
  line-height:1.45 !important;
  font-weight:700 !important;
  color:var(--kg-ink) !important;
  margin:26px 0 8px !important;
  padding:0 !important;
  letter-spacing:-.005em;
}

/* ---------- hero ---------- */
.kg-guide .hero{
  position:relative; overflow:hidden; margin:0;
  padding:clamp(52px,6.4vw,92px) 0 clamp(38px,4.6vw,58px);
  background:
    radial-gradient(1100px 420px at 88% -10%, rgba(105,180,41,.16), transparent 65%),
    radial-gradient(680px 320px at 4% 0%, rgba(255,182,21,.13), transparent 62%),
    linear-gradient(180deg,#f7fbf2 0%, #ffffff 82%);
  border-bottom:1px solid var(--kg-line);
}
.kg-guide .hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--kg-green) 0 58%, var(--kg-amber) 58% 100%);
  opacity:.9;
}
.kg-guide .sub{
  margin:0 0 18px; font-size:clamp(16px,1.75vw,21px); font-weight:600;
  color:var(--kg-green-700); letter-spacing:-.012em; line-height:1.35; max-width:34em;
}
.kg-guide .lead{margin:0; max-width:62em; color:var(--kg-body); font-size:clamp(15px,1.15vw,17px)}
.kg-guide .lead b{color:var(--kg-ink)}

/* ---------- key figures ---------- */
.kg-guide .figs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin:clamp(28px,3.4vw,40px) 0 0;
}
.kg-guide .fig{
  background:#fff; border:1px solid var(--kg-line); border-radius:var(--kg-radius);
  padding:20px 18px 18px; box-shadow:var(--kg-shadow); position:relative; overflow:hidden;
}
.kg-guide .fig::before{
  content:""; position:absolute; left:0; top:0; width:44px; height:3px; background:var(--kg-amber);
}
.kg-guide .fig b{
  display:block; font-size:clamp(20px,2.1vw,26px); font-weight:800; letter-spacing:-.02em;
  color:var(--kg-green-700); line-height:1.15; margin-bottom:6px;
}
.kg-guide .fig span{display:block; font-size:13px; line-height:1.55; color:var(--kg-body)}

/* ---------- section header ---------- */
.kg-guide .hd{margin:0 0 clamp(24px,2.8vw,34px); max-width:64em}
.kg-guide .eyebrow{
  display:flex; align-items:center; gap:12px; margin:0 0 14px;
  font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--kg-green-700);
}
.kg-guide .eyebrow::before{content:""; width:30px; height:2px; background:var(--kg-amber); flex:none}
.kg-guide .eyebrow em{font-style:normal; color:var(--kg-muted); font-weight:600; letter-spacing:.12em}
.kg-guide .hd p{margin:0; color:var(--kg-body); font-size:15.4px}

/* ---------- generic blocks ---------- */
.kg-guide .cards{display:grid; gap:16px}
.kg-guide .cards--2{grid-template-columns:1fr 1fr}
.kg-guide .cards--3{grid-template-columns:repeat(3,1fr)}
.kg-guide .cards--4{grid-template-columns:repeat(4,1fr)}
.kg-guide .card{
  background:#fff; border:1px solid var(--kg-line); border-radius:var(--kg-radius);
  padding:22px 22px 20px; box-shadow:var(--kg-shadow);
  transition:border-color .2s, transform .2s;
}
.kg-guide .card:hover{border-color:rgba(105,180,41,.5); transform:translateY(-2px)}
.kg-guide .card h3{margin:0 0 8px !important; font-size:16.5px !important}
.kg-guide .card p{margin:0; color:var(--kg-body); font-size:14.6px}
.kg-guide .card p + p{margin-top:9px}
.kg-guide .card .k{
  display:block; margin-bottom:10px; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--kg-green-600);
}
.kg-guide .card ul{margin:10px 0 0; padding-left:18px; color:var(--kg-body); font-size:14.4px}
.kg-guide .card ul li{margin-bottom:6px}
.kg-guide .card ul li::marker{color:var(--kg-green)}

/* pills */
.kg-guide .pill{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.04em; white-space:nowrap;
}
.kg-guide .pill--own{background:rgba(105,180,41,.13); color:var(--kg-green-700)}
.kg-guide .pill--partner{background:var(--kg-amber-wash); color:#8a6200; border:1px solid rgba(255,182,21,.5)}
.kg-guide .pill--out{background:#f1f4ef; color:#5d6a5c; border:1px solid #dbe3d6}
.kg-guide .pill--no{background:#fdf0ee; color:#a63a28; border:1px solid rgba(166,58,40,.18)}

/* tables */
.kg-guide .tbl{
  border:1px solid var(--kg-line); border-radius:var(--kg-radius); overflow:hidden;
  background:#fff; box-shadow:var(--kg-shadow);
}
.kg-guide .tbl__scroll{overflow-x:auto}
.kg-guide table{
  width:100%; border-collapse:collapse; font-size:14.2px; min-width:620px;
  background:transparent; margin:0;
}
.kg-guide thead th{
  background:var(--kg-wash); color:var(--kg-green-900); text-align:left;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:13px 16px; border-bottom:1px solid var(--kg-line); white-space:nowrap;
}
.kg-guide tbody td{
  padding:14px 16px; border-bottom:1px solid var(--kg-line);
  vertical-align:top; color:var(--kg-body); font-size:14.2px;
}
.kg-guide tbody tr:last-child td{border-bottom:0}
.kg-guide tbody tr:hover td{background:#fcfdfa}
.kg-guide tbody td:first-child{color:var(--kg-ink); font-weight:600}
.kg-guide td .sub{display:block; font-weight:400; color:var(--kg-muted); font-size:12.8px; margin-top:3px}
.kg-guide .nowrap{white-space:nowrap}

/* notes */
.kg-guide .note{
  margin:20px 0 0; padding:15px 18px; border-radius:0 10px 10px 0;
  background:var(--kg-amber-wash); border-left:3px solid var(--kg-amber);
  color:#4a3f1f; font-size:14.4px;
}
.kg-guide .note b{color:#2f2708}
.kg-guide .callout{
  margin:20px 0 0; padding:16px 20px; border-radius:10px;
  background:var(--kg-wash); border:1px solid var(--kg-line); border-left:3px solid var(--kg-green);
  color:var(--kg-body); font-size:14.5px;
}
.kg-guide .callout b{color:var(--kg-ink)}

/* stat cards */
.kg-guide .stats{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.kg-guide .stat{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--kg-line); border-radius:var(--kg-radius);
  padding:24px 24px 22px 26px; box-shadow:var(--kg-shadow);
}
.kg-guide .stat::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--kg-green);
}
.kg-guide .stat--amber::before{background:var(--kg-amber)}
.kg-guide .stat .k{
  display:block; margin-bottom:8px; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--kg-green-600);
}
.kg-guide .stat > b{
  display:block; font-size:clamp(20px,2.3vw,28px); font-weight:800;
  letter-spacing:-.02em; color:var(--kg-ink); line-height:1.2; margin-bottom:10px;
}
.kg-guide .stat span{display:block; color:var(--kg-body); font-size:14.2px}
.kg-guide .stat span + span{margin-top:6px}
.kg-guide .stat span b{font-size:inherit; font-weight:700; color:var(--kg-ink); letter-spacing:0}

/* steps (div based) */
.kg-guide .steps{display:grid; gap:12px; margin:0; padding:0}
.kg-guide .steps--2{grid-template-columns:1fr 1fr}
.kg-guide .step{
  position:relative; padding:20px 22px 20px 66px;
  background:#fff; border:1px solid var(--kg-line); border-radius:var(--kg-radius);
  box-shadow:var(--kg-shadow);
}
.kg-guide .step::before{
  content:attr(data-n);
  position:absolute; left:20px; top:19px;
  width:30px; height:30px; border-radius:50%;
  background:var(--kg-green); color:#fff; font-size:13.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.kg-guide .step b{display:block; font-size:15.2px; margin-bottom:4px; color:var(--kg-ink)}
.kg-guide .step span{display:block; color:var(--kg-body); font-size:14.2px}

/* flow (div based) */
.kg-guide .flow{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin:0; padding:0;
}
.kg-guide .flow__i{
  position:relative; padding:18px 16px 18px;
  background:#fff; border:1px solid var(--kg-line); border-radius:12px;
  box-shadow:var(--kg-shadow);
}
.kg-guide .flow__i::before{
  content:attr(data-n); display:block; margin-bottom:8px;
  font-size:11.5px; font-weight:800; letter-spacing:.14em; color:var(--kg-amber-600);
}
.kg-guide .flow__i b{display:block; font-size:14.4px; margin-bottom:5px; line-height:1.3; color:var(--kg-ink)}
.kg-guide .flow__i span{display:block; font-size:13px; color:var(--kg-body); line-height:1.55}

/* compare list */
.kg-guide .splits{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.kg-guide .splits .card h3{display:flex; align-items:center; gap:9px}
.kg-guide .dot{width:8px; height:8px; border-radius:50%; flex:none; display:inline-block}
.kg-guide .dot--yes{background:var(--kg-green)}
.kg-guide .dot--no{background:#c2503a}

/* chips */
.kg-guide .chips{
  display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0;
  list-style:none;
}
.kg-guide .chips li{
  font-size:13px; font-weight:600; color:var(--kg-green-700);
  background:rgba(105,180,41,.1); border:1px solid rgba(105,180,41,.22);
  border-radius:999px; padding:5px 12px; margin:0;
}
.kg-guide .chips li::marker{content:""; display:none}

/* legend */
.kg-guide .legend{
  display:flex; flex-wrap:wrap; gap:18px; margin:16px 0 0;
  font-size:12.8px; color:var(--kg-muted);
}
.kg-guide .legend span{display:inline-flex; align-items:center; gap:7px}

/* FAQ */
.kg-guide .faq{display:grid; gap:10px; margin:0}
.kg-guide .faq details{
  background:#fff; border:1px solid var(--kg-line); border-radius:12px;
  box-shadow:var(--kg-shadow); overflow:hidden; transition:border-color .2s;
}
.kg-guide .faq details[open]{border-color:rgba(105,180,41,.5)}
.kg-guide .faq summary{
  cursor:pointer; position:relative;
  padding:18px 56px 18px 22px;
  font-family:var(--kg-font) !important;
  font-weight:700 !important; font-size:16px !important;
  line-height:1.5 !important; color:var(--kg-ink) !important;
  list-style:none !important; list-style-type:none !important;
  display:block;
}
.kg-guide .faq summary::-webkit-details-marker{display:none !important}
.kg-guide .faq summary::marker{content:""; display:none}
.kg-guide .faq summary::after{
  content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-size:22px; font-weight:400; color:var(--kg-amber-600); line-height:1;
}
.kg-guide .faq details[open] summary::after{content:"\2212"}
.kg-guide .faq summary:hover{color:var(--kg-green-700) !important}
.kg-guide .faq .ans{padding:0 22px 20px; color:var(--kg-body); font-size:14.8px; max-width:60em}
.kg-guide .faq .ans p{margin:0}
.kg-guide .faq .ans p + p{margin-top:10px}

/* CTA */
.kg-guide .cta-band{
  padding:clamp(32px,3.6vw,50px) 0;
  background:
    radial-gradient(760px 340px at 12% 8%, rgba(255,255,255,.16), transparent 62%),
    linear-gradient(135deg,#2c5c11 0%, #69B429 58%, #7fc94a 100%);
  color:#fff; position:relative; overflow:hidden;
}
.kg-guide .cta-band::before{
  content:""; position:absolute; right:-90px; top:-90px; width:320px; height:320px;
  border-radius:50%; border:1px solid rgba(255,255,255,.22);
}
.kg-guide .cta-band::after{
  content:""; position:absolute; right:-10px; top:60px; width:170px; height:170px;
  border-radius:50%; background:rgba(255,182,21,.22);
}
.kg-guide .cta-row{
  position:relative; z-index:1; display:flex; align-items:center;
  justify-content:space-between; gap:clamp(24px,4vw,56px);
}
.kg-guide .cta-copy{max-width:56em}
.kg-guide .cta-band .eyebrow{color:rgba(255,255,255,.82); margin-bottom:9px}
.kg-guide .cta-band .eyebrow::before{background:var(--kg-amber)}
.kg-guide .cta-band h2{
  color:#fff !important;
  font-size:clamp(19px,2.25vw,29px) !important;
  line-height:1.24 !important;
  margin:0 0 8px !important;
}
.kg-guide .cta-band p{color:rgba(255,255,255,.88); margin:0; font-size:14.6px}
.kg-guide .btn{
  display:inline-flex; align-items:center; gap:10px; flex:none; white-space:nowrap;
  padding:14px 28px; border-radius:999px; text-decoration:none;
  background:var(--kg-amber); color:#241a00; font-weight:800; font-size:15px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 10px 26px rgba(28,20,0,.22);
  transition:transform .18s, box-shadow .18s, background .18s;
}
.kg-guide .btn:hover{background:#ffc23d; transform:translateY(-2px); box-shadow:0 14px 32px rgba(28,20,0,.28); color:#241a00}
.kg-guide .btn:focus-visible{outline:3px solid #fff; outline-offset:3px}
.kg-guide .btn svg{width:17px; height:17px}

/* responsive */
@media(max-width:1000px){
  .kg-guide .figs{grid-template-columns:1fr 1fr}
  .kg-guide .cards--3{grid-template-columns:1fr 1fr}
  .kg-guide .flow{grid-template-columns:repeat(2,1fr)}
  .kg-guide .steps--2{grid-template-columns:1fr}
}
@media(max-width:720px){
  .kg-guide .cards--2,
  .kg-guide .cards--3,
  .kg-guide .splits,
  .kg-guide .stats{grid-template-columns:1fr}
  .kg-guide .flow{grid-template-columns:1fr 1fr}
  .kg-guide .figs{grid-template-columns:1fr}
  .kg-guide .step{padding:18px 18px 18px 62px}
  .kg-guide .faq summary{font-size:15.2px !important; padding:16px 48px 16px 18px}
}
@media(max-width:560px){
  .kg-guide .flow{grid-template-columns:1fr}
  .kg-guide .hero{padding-top:44px}
  .kg-guide .fig{padding:16px 16px 15px}
  .kg-guide table{min-width:520px}
  .kg-guide .cta-row{flex-direction:column; align-items:flex-start; gap:20px}
  .kg-guide .cta-row .btn{width:100%; justify-content:center}
}