/* ============================================================
   macroBody — comparison / "vs" pages (compare.css)
   Shared by macrobody-vs-*.html + best-ai-calorie-tracker.html
   Uses the tokens defined in styles.css (:root ramps).
   ============================================================ */

/* Answer-first verdict box — the paragraph AI assistants quote */
.answer{
  background:var(--s1);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:var(--r-card);padding:22px 26px;margin-top:22px;max-width:900px;
  box-shadow:var(--card-shadow)
}
.answer__label{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--brand)}
.answer p{font-size:clamp(16px,1.7vw,18.5px);line-height:1.6;color:var(--t1);margin-top:8px}
.answer p b{color:var(--t1)}

/* Comparison table — always horizontally scrollable on narrow screens */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--s1);box-shadow:var(--card-shadow)}
table.cmp{border-collapse:collapse;width:100%;min-width:560px}
.cmp th,.cmp td{padding:14px 18px;text-align:left;border-top:1px solid var(--line);vertical-align:top;font-size:14.5px}
.cmp thead th{border-top:0;font-family:var(--display);font-size:15px;font-weight:800;letter-spacing:-.2px;
  position:sticky;top:0;background:var(--s1);white-space:nowrap}
.cmp tbody th{font-weight:700;color:var(--t1);width:38%}
.cmp .col-mb{color:var(--brand)}
.cmp td.mb{background:color-mix(in srgb,var(--brand) 7%,transparent);color:var(--t1);font-weight:600}
.cmp td.other{color:var(--t2)}
.cmp .yes{color:var(--brand);font-weight:800}
.cmp .no{color:var(--pro);font-weight:800}
.cmp .meh{color:var(--fat);font-weight:800}
.cmp small{display:block;color:var(--t3);font-weight:500;font-size:12.5px;margin-top:2px}

/* Two-column "where each is strong" */
.split{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.pros{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);padding:24px 26px}
.pros h3{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.3px;margin-bottom:14px}
.pros ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.pros li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;color:var(--t2)}
.pros li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;
  background:color-mix(in srgb,var(--ac,var(--brand)) 22%,transparent);
  border:2px solid var(--ac,var(--brand))}
.pros--mb{--ac:var(--brand)}
.pros--other{--ac:var(--t3)}

/* "Who should pick which" */
.pick{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.pick__card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 24px}
.pick__card h4{font-size:16px;font-weight:800;margin-bottom:8px}
.pick__card p{font-size:14.5px;color:var(--t2);line-height:1.55}
.pick__card--mb{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}

/* FAQ (visible copy mirroring the JSON-LD) */
.faq{max-width:820px}
.faq__item{border-top:1px solid var(--line);padding:20px 0}
.faq__item:first-child{border-top:0}
.faq__q{font-family:var(--display);font-size:17px;font-weight:800;letter-spacing:-.2px;margin-bottom:7px}
.faq__a{font-size:15px;color:var(--t2);line-height:1.62}

/* Trademark / accuracy disclaimer */
.disc{font-size:12.5px;color:var(--t3);line-height:1.55;max-width:900px;margin-top:32px;
  border-top:1px solid var(--line);padding-top:16px}

@media(max-width:760px){
  .split,.pick{grid-template-columns:1fr}
}