/* CO Koffie — Vergelijking "Zelf regelen of CO Koffie". Gescoped onder .cwk-vs,
   Montserrat, geen CDN. Vinkjes/kruisjes via inline SVG data-URI (geen externe calls). */
.cwk-vs{
  --espresso:#231509; --cream:#F4EADB; --soft:#8C7660; --gold:#CDA255; --gold-deep:#B07F33;
  --line:rgba(44,27,14,.12); --head:'Montserrat',system-ui,sans-serif;
  font-family:'Montserrat',system-ui,sans-serif; -webkit-font-smoothing:antialiased; background:#FDFAF4;
}
.cwk-vs *{box-sizing:border-box;}
.cwk-vs__wrap{max-width:1200px; margin:0 auto; padding:clamp(56px,8vw,96px) clamp(20px,5vw,48px);}
.cwk-vs__head{text-align:center; max-width:720px; margin:0 auto clamp(32px,5vw,52px);}
.cwk-vs__eyebrow{display:inline-block; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--gold-deep); margin-bottom:12px;}
.cwk-vs__title{font-family:var(--head); font-weight:900; color:var(--espresso); line-height:1.08; letter-spacing:-.02em; font-size:clamp(1.7rem,3.4vw,2.7rem); margin:0;}
.cwk-vs__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,28px); max-width:880px; margin:0 auto;}
.cwk-vs__col{border-radius:20px; padding:30px 28px;}
.cwk-vs__col h3{font-family:var(--head); font-weight:900; font-size:1.3rem; margin:0 0 18px;}
.cwk-vs__col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px;}
.cwk-vs__col li{position:relative; padding-left:30px; font-size:.95rem; line-height:1.45;}
.cwk-vs__col--bad{background:#fff; border:1px solid var(--line); color:var(--soft);}
.cwk-vs__col--bad h3{color:var(--espresso);}
.cwk-vs__col--bad li::before{content:""; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%; background:rgba(44,27,14,.07);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C7660' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); background-position:center; background-size:11px; background-repeat:no-repeat;}
.cwk-vs__col--good{position:relative; background:linear-gradient(160deg,#3A2310,#231509); color:var(--cream); border:1px solid rgba(205,162,85,.3);}
.cwk-vs__col--good h3{color:#fff;}
.cwk-vs__col--good li{color:#EAD9C2;}
.cwk-vs__col--good li::before{content:""; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%;
  background:var(--gold-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat;}
.cwk-vs__tag{position:absolute; top:-12px; right:24px; background:linear-gradient(120deg,#EFD3A0,#CDA255); color:#241608; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:99px;}
.cwk-vs__btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; margin-top:22px; width:100%; justify-content:center;
  font-family:inherit; font-weight:700; font-size:.97rem; padding:15px 26px; border-radius:99px;
  color:#241608; background:linear-gradient(120deg,#EFD3A0,#CDA255); box-shadow:0 16px 34px -16px rgba(205,162,85,.7); transition:transform .2s, box-shadow .3s;}
.cwk-vs__btn i{font-style:normal; transition:transform .3s;}
.cwk-vs__btn:hover{transform:translateY(-1px); box-shadow:0 20px 42px -16px rgba(205,162,85,.8);}
.cwk-vs__btn:hover i{transform:translateX(4px);}
.cwk-vs__btn:focus-visible{outline:3px solid var(--gold-deep); outline-offset:3px;}
@media(max-width:620px){.cwk-vs__grid{grid-template-columns:1fr; max-width:480px;}}
@media(prefers-reduced-motion:reduce){.cwk-vs__btn,.cwk-vs__btn i{transition:none;}}