/* ============================================================
   Milva Garlic & Quinine — Kenya pre-sell funnel
   One stylesheet for all pages. No frameworks, no webfonts.
   ============================================================ */
:root{
  --ink:#1E0F2E; --plum:#4A1D6E; --purple:#6B2FA0; --purple-l:#8E5CC2;
  --lilac:#EFE6F7; --lilac-2:#F8F4FC; --paper:#FFFDFB;
  --red:#D81E1E; --red-d:#A81414;
  --green:#0E7C48; --amber:#B8730A;
  --muted:#5C5468; --line:#E6DEF0;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",Cambria,serif;
  --wrap:1080px; --read:660px;
  --r:14px; --sh:0 2px 10px rgba(30,15,46,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--purple)}
h1,h2,h3{line-height:1.18;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(30px,6.4vw,46px);font-weight:800}
h2{font-size:clamp(24px,4.8vw,34px);font-weight:800}
h3{font-size:clamp(19px,3.4vw,22px);font-weight:700}
p{margin:0 0 1.05em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
.read{max-width:var(--read);margin:0 auto;padding:0 18px}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:14px}
.tiny{font-size:12.5px;line-height:1.5}

/* ---------- top bars ---------- */
.disclosure{background:#2B1A3C;color:#CDBEDD;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;padding:7px 14px}
.masthead{border-bottom:1px solid var(--line);background:#fff}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding-top:12px;padding-bottom:12px}
.masthead .small{white-space:nowrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand img{width:70px}
.brand span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stars{color:#E8A300;letter-spacing:1px}

/* ---------- ticker ---------- */
.ticker{background:var(--plum);color:#fff;font-size:13px;text-align:center;padding:9px 14px}
.ticker b{font-weight:700}

/* ---------- article ---------- */
.article{padding:0 0 10px}

/* lead block: picture first, headline next to it on wide screens */
.lead{padding:0 0 6px}
.lead-grid{display:grid;gap:20px;padding-top:0}
.lead-img{margin:0}
.lead-img img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 50%}
.lead-txt{padding:0 18px}
.lead-txt .byline{margin:18px 0 0}
.lead-txt .byline img{object-fit:contain;border-radius:6px;background:#fff}
.kicker{font:700 12px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--red);margin-bottom:14px}
.byline{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13.5px;
  color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:11px 0;margin:20px 0 26px}
.byline img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.prose{font-family:var(--serif);font-size:18.5px;line-height:1.72}
.prose p{margin:0 0 1.15em}
.prose h2{font-family:var(--sans);margin-top:1.5em}
.prose h3{font-family:var(--sans);margin-top:1.4em}
.lede{font-size:20.5px;line-height:1.6;color:#352247}
.prose em{color:var(--plum)}
figure{margin:28px 0}
figure img{border-radius:var(--r)}
figcaption{font-size:13px;color:var(--muted);margin-top:8px;font-family:var(--sans)}

.pull{border-left:4px solid var(--purple);background:var(--lilac-2);
  padding:16px 18px;margin:26px 0;border-radius:0 var(--r) var(--r) 0;
  font-family:var(--sans);font-size:17px;line-height:1.55;font-weight:600;color:var(--plum)}

/* ---------- mechanism ---------- */
.mech{background:var(--lilac-2);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 18px;margin:28px 0}
.mech h3{font-family:var(--sans);margin-top:0}
.mech-figs{display:grid;gap:12px;margin:14px 0 18px}
.mech-fig{margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}
.mech-fig svg{width:100%;height:auto;display:block}
.mech-grid{display:grid;gap:18px;margin-top:6px}
.mech-step{display:flex;gap:14px;align-items:flex-start;font-family:var(--sans);font-size:16px;line-height:1.55}
.mech-step .n{flex:0 0 32px;height:32px;border-radius:50%;background:var(--purple);color:#fff;
  font-weight:800;display:grid;place-items:center;font-size:15px}
.mech-step b{display:block;color:var(--plum);font-size:16.5px;margin-bottom:2px}

/* ---------- product shot ---------- */
.prod-shot{margin:26px 0 14px}
.prod-shot img{border-radius:16px;width:100%}
.prod-shot figcaption{font-size:13.5px;color:var(--muted);margin-top:9px;text-align:center}

/* ---------- fact strip ---------- */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px 0}
.fact{background:var(--lilac-2);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 14px;font-family:var(--sans)}
.fact b{display:block;font-size:26px;line-height:1;color:var(--plum);letter-spacing:-.02em;margin-bottom:6px}
.fact span{font-size:14px;line-height:1.45;color:var(--muted)}

/* ---------- table ---------- */
.cmp{width:100%;border-collapse:collapse;margin:24px 0;font-family:var(--sans);font-size:15px}
.cmp th,.cmp td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp thead th{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid var(--line)}
.cmp thead th:last-child{color:var(--purple)}
.cmp td:first-child{font-weight:600;width:34%}
.cmp .no{color:#9A3030}
.cmp .yes{color:var(--green);font-weight:600}
.cmp tbody tr:last-child td{border-bottom:none}

/* ---------- quotes ---------- */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:18px;margin:22px 0;box-shadow:var(--sh);font-family:var(--sans)}
.quote .top{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.quote img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 46px}
.quote .who{font-weight:700;font-size:15px;line-height:1.25}
.quote .who small{display:block;font-weight:400;color:var(--muted);font-size:12.5px}
.quote p{font-size:16px;line-height:1.6;margin:0 0 .8em}
.quote p:last-child{margin-bottom:0}

/* ---------- timeline ---------- */
.tl{display:grid;gap:0;margin:24px 0;font-family:var(--sans)}
.tl-row{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)}
.tl-row:last-child{border-bottom:none}
.tl-wk{flex:0 0 70px;font-weight:800;color:var(--purple);font-size:14px;letter-spacing:.02em;
  text-transform:uppercase;padding-top:2px}
.tl-row b{display:block;font-size:16.5px;margin-bottom:2px}
.tl-row span{font-size:15px;color:var(--muted)}

/* ---------- CTA ---------- */
.cta-wrap{margin:34px 0;text-align:center}
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  font-family:var(--sans);font-weight:800;font-size:18px;letter-spacing:.01em;
  padding:17px 30px;border-radius:999px;border:none;cursor:pointer;
  box-shadow:0 6px 0 var(--red-d);transition:transform .08s,box-shadow .08s;
  max-width:100%;line-height:1.25}
.btn:hover{background:#C41B1B}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 var(--red-d)}
.btn-wide{display:block;width:100%;text-align:center}
.btn-ghost{background:#fff;color:var(--plum);border:2px solid var(--purple);box-shadow:none;font-size:16px;padding:13px 22px}
.btn-ghost:hover{background:var(--lilac-2)}
.btn-wa{background:#1EA952;box-shadow:0 6px 0 #147A3A}
.btn-wa:hover{background:#17923F}
.cta-sub{font-size:13.5px;color:var(--muted);margin-top:11px;font-family:var(--sans)}

/* ---------- trust row ---------- */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;
  font-size:13.5px;color:var(--muted);font-family:var(--sans);margin:14px 0}
.trust span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* ---------- offer page ---------- */
.sec{padding:44px 0}
.sec-tint{background:var(--lilac-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-plum{background:var(--plum);color:#fff}
.sec-plum h2{color:#fff}
.sec-plum .muted{color:#CDBEDD}
.eyebrow{font:700 12px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--purple);margin-bottom:12px}
.hero{display:grid;gap:20px;padding:26px 0;grid-template-areas:"head" "img" "buy"}
.hero-head{grid-area:head}.hero-img{grid-area:img}.hero-buy{grid-area:buy}
.hero-head h1{margin-bottom:.45em}
.hero-img{background:linear-gradient(170deg,#F3EAFB,#FFFFFF);border-radius:18px;padding:12px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.badge{font:700 12px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;
  background:var(--lilac);color:var(--plum);padding:7px 11px;border-radius:999px}
.badge-g{background:#E3F4EA;color:var(--green)}

.benefits{display:grid;gap:14px;margin-top:8px}
.ben{display:flex;gap:13px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:15px;box-shadow:var(--sh)}
.ben .ic{flex:0 0 40px;height:40px;border-radius:11px;background:var(--lilac);
  display:grid;place-items:center}
.ben b{display:block;margin-bottom:2px;font-size:16.5px}
.ben span{font-size:15px;color:var(--muted);line-height:1.55}

/* ---------- bundles ---------- */
.bundles{display:grid;gap:12px;margin:22px 0}
.bundle{position:relative;display:block;cursor:pointer}
.bundle input{position:absolute;opacity:0;pointer-events:none}
.bundle .box{display:flex;align-items:center;gap:14px;background:#fff;
  border:2px solid var(--line);border-radius:var(--r);padding:16px 16px;transition:.12s}
.bundle:hover .box{border-color:var(--purple-l)}
.bundle input:checked + .box{border-color:var(--purple);background:#FBF7FE;
  box-shadow:0 0 0 3px rgba(107,47,160,.13)}
.bundle .dot{flex:0 0 22px;height:22px;border-radius:50%;border:2px solid #C9BCD9;background:#fff;position:relative}
.bundle input:checked + .box .dot{border-color:var(--purple)}
.bundle input:checked + .box .dot::after{content:"";position:absolute;inset:4px;
  border-radius:50%;background:var(--purple)}
.bundle .info{flex:1;min-width:0}
.bundle .info b{display:block;font-size:17.5px;line-height:1.2}
.bundle .info small{color:var(--muted);font-size:13.5px}
.bundle .price{text-align:right;white-space:nowrap}
.bundle .price b{display:block;font-size:19px;color:var(--plum)}
.bundle .price s{color:#9A93A6;font-size:13.5px}
.bundle .tag{position:absolute;top:-10px;left:14px;background:var(--red);color:#fff;
  font:800 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;z-index:2}
.bundle .save{display:inline-block;background:#E3F4EA;color:var(--green);
  font:700 11.5px/1 var(--sans);padding:4px 7px;border-radius:5px;margin-top:5px}

/* ---------- hero call to action pair ---------- */
.hero-cta{display:grid;gap:10px;margin:0 0 4px}

/* ---------- single price box ---------- */
.pricebox{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;
  background:#fff;border:2px solid var(--purple);border-radius:var(--r);padding:16px 18px;margin:18px 0;
  box-shadow:0 0 0 3px rgba(107,47,160,.1)}
.pb-amt{display:block;font-size:34px;font-weight:800;color:var(--plum);letter-spacing:-.025em;line-height:1}
.pb-note{display:block;font-size:13.5px;color:var(--muted);margin-top:6px}
.pb-fee{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
.pb-fee b{color:var(--plum)}
.pb-pay{font-size:13.5px;color:var(--green);background:#E3F4EA;padding:8px 12px;border-radius:999px;
  font-weight:600;white-space:nowrap}

/* ---------- promise ---------- */
.promise{display:flex;gap:16px;align-items:flex-start;background:#fff;
  border:2px dashed var(--purple-l);border-radius:var(--r);padding:20px}
.promise .seal{flex:0 0 72px;height:72px;border-radius:50%;background:var(--plum);color:#fff;
  display:grid;place-items:center;text-align:center;font:800 13px/1.15 var(--sans)}

/* ---------- FAQ ---------- */
details.faq{border-bottom:1px solid var(--line);padding:4px 0}
details.faq summary{cursor:pointer;list-style:none;padding:15px 34px 15px 0;position:relative;
  font-weight:700;font-size:16.5px;line-height:1.4}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:4px;top:12px;
  font-size:24px;font-weight:400;color:var(--purple);line-height:1}
details.faq[open] summary::after{content:"\2013"}
details.faq .ans{padding:0 4px 16px 0;color:var(--muted);font-size:16px;line-height:1.62}

/* ---------- order form ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:22px 18px;box-shadow:0 6px 24px rgba(30,15,46,.08)}
.field{margin-bottom:15px}
.field label{display:block;font-weight:700;font-size:14.5px;margin-bottom:6px}
.field label .req{color:var(--red)}
.field .hint{font-weight:400;color:var(--muted);font-size:13px}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;
  padding:13px 13px;border:1.5px solid #D7CEE4;border-radius:11px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--purple);box-shadow:0 0 0 3px rgba(107,47,160,.13)}
.field textarea{min-height:76px;resize:vertical}
.phone{display:flex;gap:8px}
.phone .pfx{flex:0 0 78px;display:grid;place-items:center;background:var(--lilac);
  border:1.5px solid #D7CEE4;border-radius:11px;font-weight:700;color:var(--plum)}
.row2{display:grid;gap:15px}
.err{color:#A81414;font-size:13.5px;margin-top:5px;display:none}
.field.bad input,.field.bad select{border-color:#D81E1E}
.field.bad .err{display:block}
.summary{background:var(--lilac-2);border:1px solid var(--line);border-radius:var(--r);
  padding:15px;margin:18px 0}
.summary .line{display:flex;justify-content:space-between;gap:12px;font-size:15px;padding:4px 0}
.summary .line span:last-child{white-space:nowrap;text-align:right}
.summary .total{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;
  font-weight:800;font-size:19px;color:var(--plum)}
.callout{background:#FFF7E8;border:1px solid #F0DCB0;border-radius:var(--r);
  padding:14px 15px;font-size:14.5px;line-height:1.6;margin:16px 0}
.callout b{color:var(--amber)}

/* ---------- recommendation photo above the order buttons ---------- */
.recommend{margin:20px 0 22px}
.recommend img{border-radius:16px;width:100%}
.recommend figcaption{font-size:14px;color:var(--muted);margin-top:10px;text-align:center}

/* ---------- order by WhatsApp / phone ---------- */
.ways{margin:20px 0 4px}
.ways .or{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--muted);font-size:13.5px}
.ways .or::before,.ways .or::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-call{background:var(--plum);box-shadow:0 6px 0 #2E0F4C}
.btn-call:hover{background:#3C1760}
.btn .btn-sub{display:block;font-size:14px;font-weight:600;opacity:.88;margin-top:3px;letter-spacing:.04em}

/* ---------- sticky ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;background:rgba(255,253,251,.97);
  border-top:1px solid var(--line);padding:10px 14px;z-index:40;
  box-shadow:0 -4px 18px rgba(30,15,46,.09);transform:translateY(110%);transition:transform .25s}
.sticky.on{transform:translateY(0)}
.sticky .inner{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:12px}
.sticky .lbl{flex:1;min-width:0;font-size:13px;line-height:1.3;color:var(--muted)}
.sticky .lbl b{display:block;color:var(--ink);font-size:15px}
.sticky .btn{padding:14px 22px;font-size:16px;box-shadow:0 4px 0 var(--red-d)}
body.has-sticky{padding-bottom:84px}

/* ---------- thank you ---------- */
.ty-check{width:76px;height:76px;border-radius:50%;background:#E3F4EA;color:var(--green);
  display:grid;place-items:center;margin:0 auto 18px}
.steps{counter-reset:s;display:grid;gap:14px;margin:26px 0;text-align:left}
.step{display:flex;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.step .n{counter-increment:s;flex:0 0 30px;height:30px;border-radius:50%;
  background:var(--purple);color:#fff;font-weight:800;display:grid;place-items:center;font-size:14px}
.step .n::before{content:counter(s)}
.step b{display:block;margin-bottom:2px}
.step span{font-size:15px;color:var(--muted);line-height:1.55}

/* ---------- footer ---------- */
footer{background:#2B1A3C;color:#BEAED0;padding:30px 0;font-size:13.5px;margin-top:40px}
footer a{color:#D9C8EA}
footer .wrap{display:grid;gap:14px}
footer img{width:76px;opacity:.95}

/* ---------- responsive ---------- */
@media(min-width:760px){
  .lead-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:34px;align-items:center;
    padding-top:30px;padding-bottom:12px}
  .lead-img img{aspect-ratio:1/1;border-radius:16px}
  .lead-txt{padding:0}
  .tl{grid-template-columns:1fr 1fr;column-gap:30px}
  .tl-row{border-bottom:1px dashed var(--line)}
  .hero{grid-template-columns:1fr 1fr;gap:6px 44px;padding:50px 0;
    grid-template-areas:"img head" "img buy";align-items:center}
  .hero-head{align-self:end}.hero-buy{align-self:start}
  .mech-figs{grid-template-columns:1fr 1fr}
  .benefits{grid-template-columns:1fr 1fr}
  .mech-grid{grid-template-columns:1fr 1fr}
  .row2{grid-template-columns:1fr 1fr}
  .quotes-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .quotes-3 .quote{margin:0}
  .steps{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:900px){
  body{background:#F1ECF8}
  .masthead{background:#fff}
  .article{background:var(--paper);max-width:980px;margin:26px auto 0;
    border-radius:20px;box-shadow:0 2px 34px rgba(30,15,46,.10);padding:0 0 34px;overflow:hidden}
  .lead-grid{padding-left:34px;padding-right:34px}
  .read > figure{width:720px;margin-left:calc((720px - 100%) / -2)}
  .read > figure.prod-shot{width:100%;margin-left:0}
  .read > figure img{max-height:540px;width:auto;margin:0 auto}
  .read .cmp,.read .mech{width:780px;margin-left:calc((780px - 100%) / -2)}
  .read .tl{width:760px;margin-left:calc((760px - 100%) / -2)}
  footer{margin-top:34px}
}
@media(max-width:470px){
  .brand span{display:none}
  .hero-img img{max-height:58vh;width:auto;margin:0 auto}
}
@media(max-width:400px){
  .bundle .box{padding:14px 12px;gap:10px}
  .bundle .info b{font-size:16px}
  .btn{font-size:16.5px;padding:16px 20px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}