:root{
  --bg:#f4f1ea; --card:#ffffff; --ink:#19150f; --muted:#8b847a; --line:#e9e3d8;
  --brand:#1f5e54; --brand-ink:#143f38; --accent:#d98a6a;
  --good:#2e7d57; --good-bg:#e6f3ec; --warn:#9a6a1c; --warn-bg:#f8f0df;
  --bad:#b04434; --bad-bg:#f8e9e5; --info:#3a5ba0; --info-bg:#ecf0f8;
  --shadow:0 1px 2px rgba(25,21,15,.03),0 8px 30px rgba(25,21,15,.04);
  --r:18px; --serif:ui-serif,"Iowan Old Style",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:880px;margin:0 auto;padding:0 20px}

/* top bar */
.topbar{background:var(--brand);color:#fff}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.logo{font-weight:800;letter-spacing:.2px;color:#fff;font-size:18px}
.logo small{font-weight:500;opacity:.8;font-size:12px;margin-left:6px}
.topbar nav a{color:#dceee9;font-size:14px;margin-left:18px}

.disclosure{background:#fff7ec;border-bottom:1px solid #f0d9b4;color:#7a5a2e}
.disclosure .wrap{padding:8px 20px;font-size:12.5px}
.disclosure a{color:#7a5a2e;text-decoration:underline}

.breadcrumb{font-size:13px;color:var(--muted);padding:16px 0 0}
.breadcrumb a{color:var(--muted)}

/* header */
header.product{padding:14px 0 8px}
.eyebrow{font-size:13px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
h1{font-size:30px;line-height:1.2;margin:6px 0 4px}
.sub{color:var(--muted);font-size:15px}
.claim{margin:14px 0 0;padding:12px 16px;background:#fff;border-left:3px solid var(--accent);
  border-radius:8px;font-style:italic;color:#444;box-shadow:var(--shadow)}
.claim b{font-style:normal;color:var(--accent)}

.verdict{margin:18px 0;padding:16px 18px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:flex-start}
.score{flex:0 0 auto;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:20px;color:#fff}
.verdict .vtext{font-size:15px}
.verdict .vtext b{display:block;margin-bottom:2px;font-size:16px}

/* badges */
section{margin:26px 0}
h2{font-size:14px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);
  border-bottom:1px solid var(--line);padding-bottom:8px;margin:0 0 14px}
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badge{display:flex;gap:9px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:9px 12px;box-shadow:var(--shadow);min-width:180px;flex:1 1 200px}
.badge .ico{font-size:20px;line-height:1}
.badge .bt{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.badge .bv{font-size:14px;font-weight:700}
.badge.good .bv{color:var(--good)} .badge.good{background:var(--good-bg)}
.badge.warn .bv{color:var(--warn)} .badge.warn{background:var(--warn-bg)}
.badge.bad .bv{color:var(--bad)} .badge.bad{background:var(--bad-bg)}
.badge.info .bv{color:var(--info)} .badge.info{background:var(--info-bg)}

/* for-you panel */
.foryou{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.foryou{grid-template-columns:1fr}}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.fcard h3{margin:0 0 10px;font-size:15px}
.fcard.use h3{color:var(--good)} .fcard.skip h3{color:var(--bad)}
.fcard ul{margin:0;padding-left:20px} .fcard li{margin:5px 0;font-size:14px}

/* cureskin plug */
.plug{margin:16px 0;background:linear-gradient(135deg,#0f7a6b,#0a5a4f);color:#fff;
  border-radius:14px;padding:20px 22px;box-shadow:var(--shadow)}
.plug h3{margin:0 0 6px;font-size:18px;color:#fff}
.plug p{margin:0 0 14px;font-size:14px;color:#d4ece7}
.plug a{display:inline-block;background:#fff;color:var(--brand-ink);font-weight:700;
  padding:10px 18px;border-radius:8px;font-size:14px}
.plug a:hover{text-decoration:none;background:#f0fbf8}

/* ingredient cards */
.ing{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  margin-bottom:10px;box-shadow:var(--shadow)}
.ing .ihead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ing .iname{font-weight:700;font-size:16px}
.ing .ipct{font-size:13px;font-weight:700;color:var(--brand-ink);background:#e8f6ee;border-radius:20px;padding:2px 10px;white-space:nowrap}
.ing .irole{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:2px 0 6px}
.ing p{margin:0;font-size:14px}

/* marketing vs molecule */
.mvm{background:var(--warn-bg);border:1px solid #f0d9b4;border-radius:12px;padding:16px 18px}
.mvm h3{margin:0 0 8px;color:var(--warn);font-size:16px;display:flex;gap:8px;align-items:center}
.mvm p{margin:0;font-size:14px}

/* evidence */
.ev{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow)}
.ev .eclaim{font-weight:700;font-size:15px;margin-bottom:4px}
.ev .efind{font-size:14px;margin-bottom:8px}
.ev .emeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px}
.strength{font-weight:700;padding:2px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.4px;font-size:11px}
.s-strong{background:var(--good-bg);color:var(--good)}
.s-moderate{background:var(--info-bg);color:var(--info)}
.s-limited{background:var(--warn-bg);color:var(--warn)}
.s-theoretical{background:#efeef0;color:#555}
.cite{color:var(--muted)} .verified{color:var(--good);font-weight:700}

/* inci */
.inci{font-size:13.5px;color:#444;line-height:1.9}
.inci .hi{background:#e8f6ee;border-radius:4px;padding:1px 5px;font-weight:600;color:var(--brand-ink)}
.inci .flag{background:var(--warn-bg);border-radius:4px;padding:1px 5px;color:var(--warn);font-weight:600}

.note{font-size:13px;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:10px;padding:12px 14px}
footer{border-top:1px solid var(--line);margin-top:40px;padding:24px 0 50px;color:var(--muted);font-size:13px}
footer b{color:var(--ink)}

/* index */
.hero{padding:34px 0 8px}
.hero h1{font-size:34px;max-width:680px}
.hero p{color:var(--muted);font-size:17px;max-width:620px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow);display:block}
.pcard:hover{text-decoration:none;border-color:#cfe7e0;transform:translateY(-1px);transition:.12s}
.pcard .pc-brand{font-size:12px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.pcard .pc-name{font-size:17px;font-weight:700;color:var(--ink);margin:3px 0 8px}
.pcard .pc-tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;background:#f0efeb;color:#555}
.tag.flag{background:var(--warn-bg);color:var(--warn)}
.tag.good{background:var(--good-bg);color:var(--good)}

/* ---------- depth sections (v2) ---------- */
.tldr{background:#eef7f4;border:1px solid #cfe7e0;border-left:4px solid var(--brand);border-radius:12px;padding:16px 18px;margin:18px 0}
.tldr .lbl{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--brand-ink)}
.tldr p{margin:6px 0 0;font-size:16px;line-height:1.55}

.keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kf{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.kf .k{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
.kf .v{font-size:14px;font-weight:600;margin-top:2px}

table.inci-table{width:100%;border-collapse:collapse;font-size:14px}
table.inci-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);border-bottom:1px solid var(--line);padding:8px}
table.inci-table td{border-bottom:1px solid var(--line);padding:9px 8px;vertical-align:top}
table.inci-table .nm{font-weight:600}
table.inci-table .fn{color:var(--muted);font-size:12px}
.pill{font-size:10.5px;font-weight:700;border-radius:20px;padding:1px 8px;white-space:nowrap}
.pill.key{background:var(--good-bg);color:var(--good)}
.pill.watch{background:var(--warn-bg);color:var(--warn)}

.howto{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.step{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.step .s{font-size:12px;font-weight:800;color:var(--brand-ink);text-transform:uppercase;letter-spacing:.4px}
.step p{margin:4px 0 0;font-size:14px}

.tl{border-left:2px solid #cfe7e0;margin-left:6px;padding-left:18px}
.tl .row{position:relative;padding:7px 0}
.tl .row::before{content:"";position:absolute;left:-25px;top:13px;width:9px;height:9px;border-radius:50%;background:var(--brand)}
.tl .wk{font-weight:700;font-size:14px}
.tl .d{font-size:14px;color:#444}

table.dupes{width:100%;border-collapse:collapse;font-size:14px}
table.dupes th{text-align:left;font-size:11px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding:8px}
table.dupes td{border-bottom:1px solid var(--line);padding:9px 8px}
table.dupes .why{color:#444;font-size:13px}

.ctx{background:#eef6fe;border:1px solid #cfe0f5;border-radius:12px;padding:14px 16px}
.ctx h3{margin:0 0 8px;font-size:15px;color:var(--info)}
.ctx ul{margin:0;padding-left:18px} .ctx li{font-size:14px;margin:5px 0}

.faq .qa{border-bottom:1px solid var(--line);padding:13px 0}
.faq .qa:last-child{border-bottom:0}
.faq .q{font-weight:700;font-size:15px;margin-bottom:5px}
.faq .a{font-size:14px} .faq .a .short{font-weight:600}

.value{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:14px}
.value b{color:var(--brand-ink)}

/* ---------- v3: more dimensions + overwhelm→personalisation ---------- */
.dims{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dims .count{font-weight:800;color:var(--brand-ink);font-size:13px;margin-right:4px}
.dims .dn{font-size:11px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:3px 9px;color:#555}

table.matrix{width:100%;border-collapse:collapse;font-size:14px}
table.matrix td{border-bottom:1px solid var(--line);padding:8px}
table.matrix .lbl{font-weight:600;width:32%}
.rate{font-weight:700;font-size:13px;white-space:nowrap}
.rate-g{color:var(--good)} .rate-o{color:var(--warn)} .rate-a{color:var(--bad)}
.rnote{color:var(--muted);font-size:13px}

.chips2{display:flex;flex-wrap:wrap;gap:8px}
.chip2{font-size:13px;border:1px solid var(--line);border-radius:8px;padding:6px 11px;background:#fff}
.chip2 .g{color:var(--good);font-weight:700}.chip2 .o{color:var(--warn);font-weight:700}.chip2 .a{color:var(--bad);font-weight:700}

.layer3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:640px){.layer3{grid-template-columns:1fr}}
.lcard{border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff}
.lcard h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.3px}
.lcard.ok h4{color:var(--good)}.lcard.car h4{color:var(--warn)}.lcard.no h4{color:var(--bad)}
.lcard ul{margin:0;padding-left:16px}.lcard li{font-size:13px;margin:3px 0}

table.scorecard{width:100%;border-collapse:collapse;font-size:14px}
table.scorecard td{border-bottom:1px solid var(--line);padding:8px}
table.scorecard .sl{font-weight:600;width:40%}

.nudge{background:#fff7ec;border:1px solid #f0d9b4;border-left:4px solid var(--accent);border-radius:10px;padding:14px 16px;margin:14px 0}
.nudge b{color:var(--accent)}.nudge a{font-weight:700}

.complexity{background:linear-gradient(135deg,#0a5a4f,#063f37);color:#fff;border-radius:16px;padding:24px}
.complexity h2{color:#fff;border:0;margin:0 0 8px;font-size:21px;letter-spacing:0;text-transform:none}
.complexity .big{font-size:15px;color:#eafff9;font-weight:600;margin-bottom:12px}
.complexity ul{margin:0 0 18px;padding-left:18px;columns:2;column-gap:24px}
@media(max-width:640px){.complexity ul{columns:1}}
.complexity li{font-size:14px;color:#d4ece7;margin:5px 0;break-inside:avoid}
.complexity a{display:inline-block;background:#fff;color:var(--brand-ink);font-weight:700;padding:11px 20px;border-radius:8px;font-size:14px}
.complexity a:hover{text-decoration:none;background:#f0fbf8}

/* ---------- v4: CureSkin CTAs as demarcated banner ads ---------- */
.adslot{margin:24px 0}
.adslot .adlabel{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#a0a4ab;text-align:center;margin-bottom:5px}
.adbanner{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border:1px solid #d8d2c7;border-left:5px solid var(--brand);border-radius:10px;background:#fcfbf8;padding:16px 18px}
.adbanner .left{flex:1 1 320px}
.adbanner .brand{font-size:12px;font-weight:800;color:var(--brand-ink);letter-spacing:.4px;margin-bottom:3px}
.adbanner h4{margin:0 0 3px;font-size:17px;color:var(--ink)}
.adbanner p{margin:0;font-size:13px;color:var(--muted);max-width:540px}
.adbanner .cta{display:inline-block;background:var(--brand);color:#fff;font-weight:700;padding:11px 18px;border-radius:8px;font-size:14px;white-space:nowrap}
.adbanner .cta:hover{text-decoration:none;background:var(--brand-ink)}

/* complexity recap -> neutral editorial (was a branded promo block) */
.complexity{background:#f4f6f5 !important;border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.complexity h2{color:var(--ink) !important}
.complexity .big{color:var(--ink) !important}
.complexity li{color:#444 !important}
.complexity p{color:#555 !important;font-size:14px}

/* ---------- v5: retention IA ---------- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:60;transition:width .08s linear}
#stickybar{position:fixed;top:0;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.07);transform:translateY(-100%);transition:transform .2s;z-index:55}
#stickybar.show{transform:translateY(0)}
#stickybar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 20px}
#stickybar .nm{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stickybar .cta{background:var(--brand);color:#fff;font-weight:700;padding:7px 14px;border-radius:7px;font-size:13px;white-space:nowrap}
#stickybar .cta:hover{text-decoration:none;background:var(--brand-ink)}

ul.three{list-style:none;margin:0;padding:0;display:grid;gap:8px}
ul.three li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:10px;padding:12px 14px;font-size:15px;font-weight:600}
ul.three li .em{margin-right:9px}

.picker{background:#f4f6f5;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:18px 0}
.picker .pl{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:9px}
.picker .pk{display:inline-block;border:1px solid #cfd6d3;background:#fff;border-radius:20px;padding:7px 14px;margin:0 6px 6px 0;font-size:14px;cursor:pointer;font-weight:600;user-select:none}
.picker .pk:hover{border-color:var(--brand)}
.picker .pk.on{background:var(--brand);color:#fff;border-color:var(--brand)}
#yourfit{display:none;margin-top:10px;font-size:15px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.social{font-size:12.5px;color:var(--muted);margin-top:10px}
.social b{color:var(--ink)}
tr.hl td{background:#fff7ec !important}

.catch{background:var(--warn-bg);border:1px solid #f0d9b4;border-left:4px solid var(--accent);border-radius:12px;padding:16px 18px;margin:26px 0}
.catch h2{border:0;margin:0 0 8px;color:var(--warn);text-transform:none;letter-spacing:0;font-size:18px;padding:0}
.catch p{margin:0;font-size:14px}

details.acc{border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:8px;overflow:hidden}
details.acc>summary{list-style:none;cursor:pointer;padding:13px 16px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary>span:first-child{flex:0 0 auto}
details.acc>summary .accsum{font-weight:500;font-size:12.5px;color:var(--muted);flex:1;text-align:right}
details.acc>summary::after{content:"▾";color:var(--muted);transition:transform .2s;flex:0 0 auto}
details.acc[open]>summary::after{transform:rotate(180deg)}
.accbody{padding:2px 16px 16px}

.related{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:640px){.related{grid-template-columns:1fr}}
.rcard{border:1px solid var(--line);border-radius:10px;padding:13px;background:#fff;display:block}
.rcard:hover{border-color:#cfe7e0;text-decoration:none;transform:translateY(-1px);transition:.12s}
.rcard .rb{font-size:11px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.rcard .rn{font-size:14px;font-weight:700;color:var(--ink);margin-top:3px}

/* ---------- ingredient pages: side effects + benefits ---------- */
table.scorecard th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);border-bottom:1px solid var(--line);padding:8px}
.freq{font-weight:700;font-size:11px;border-radius:20px;padding:2px 9px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.freq.common{background:var(--warn-bg);color:var(--warn)}
.freq.uncommon{background:var(--info-bg);color:var(--info)}
.freq.rare{background:#eef3ee;color:#4b6b52}
.freq.na{background:#efeef0;color:#555}
.sidefx-lead{font-size:15px;margin:0 0 12px}
ul.benefits{margin:0;padding-left:20px}
ul.benefits li{margin:6px 0;font-size:14px}
.eyebrow.ing-eyebrow{color:var(--brand-ink)}

.updated{font-size:12.5px;color:var(--muted);margin-top:6px}
.updated time{font-weight:600;color:#444}

/* ---- conflict checker ---- */
.cverdict{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:12px;font-weight:700;font-size:18px;margin:18px 0;border:2px solid}
.cverdict .vicon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;font-size:18px;color:#fff;flex:0 0 auto}
.v-ok{background:#edf9f0;border-color:#34a853;color:#176c33}
.v-ok .vicon{background:#34a853}
.v-warn{background:#fff7e6;border-color:#e8a33d;color:#8a5a12}
.v-warn .vicon{background:#e8a33d}
.v-time{background:#eef3fe;border-color:#4674e0;color:#274a9e}
.v-time .vicon{background:#4674e0}
.v-avoid{background:#fdeded;border-color:#d93636;color:#9c1f1f}
.v-avoid .vicon{background:#d93636}
.indiabox{background:#fff8f0;border-left:4px solid var(--brand);padding:14px 16px;border-radius:8px}
.indiabox h2{margin-top:0}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.legend .lg,.comb-list ~ * .lg{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:20px;border:1px solid}
.lg{display:inline-block;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:20px}
.lg.v-ok{background:#edf9f0;color:#176c33}
.lg.v-warn{background:#fff7e6;color:#8a5a12}
.lg.v-time{background:#eef3fe;color:#274a9e}
.lg.v-avoid{background:#fdeded;color:#9c1f1f}
.matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 26px}
.combo-matrix{border-collapse:collapse;font-size:13px}
.combo-matrix th,.combo-matrix td{border:1px solid #e7e7e7;width:38px;height:38px;text-align:center}
.combo-matrix td{border:1px solid #eee}
.combo-matrix th.rh,.combo-matrix th.rot{font-weight:600;color:#333;background:#fafafa}
.combo-matrix th.rh{text-align:right;padding-right:8px;white-space:nowrap;width:auto}
.combo-matrix th.rot span{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:11.5px;max-height:90px}
.combo-matrix td a{display:block;width:100%;height:100%;line-height:38px;font-weight:700;text-decoration:none;color:inherit}
.combo-matrix td.v-ok{background:#cdeed6}.combo-matrix td.v-ok a{color:#176c33}
.combo-matrix td.v-warn{background:#fbe7c2}.combo-matrix td.v-warn a{color:#8a5a12}
.combo-matrix td.v-time{background:#d3e0fb}.combo-matrix td.v-time a{color:#274a9e}
.combo-matrix td.v-avoid{background:#f7cccc}.combo-matrix td.v-avoid a{color:#9c1f1f}
.combo-matrix td.diag{background:#f3f3f3}
.comb-list{columns:2;list-style:none;padding:0;margin:6px 0 18px}
.comb-list li{margin:4px 0;font-size:14px}
.cnt{color:var(--muted);font-weight:400;font-size:13px}
/* ---- pubmed references ---- */
ul.refs{list-style:none;padding:0;margin:8px 0}
ul.refs li{padding:8px 0;border-bottom:1px solid #eee;font-size:14px;line-height:1.45}
ul.refs .cj{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
@media(max-width:560px){.comb-list{columns:1}}

/* ---- ingredient A–Z index ---- */
.aznav{position:sticky;top:0;background:#fff;z-index:5;display:flex;flex-wrap:wrap;gap:4px;padding:10px 0;border-bottom:1px solid #eee;margin-bottom:10px}
.aznav a{display:inline-block;min-width:24px;text-align:center;padding:4px 7px;border-radius:6px;font-weight:700;font-size:13px;color:var(--brand);text-decoration:none}
.aznav a:hover{background:var(--brand);color:#fff}
.ing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 14px;margin:8px 0 22px}
.ing-link{font-size:14px;color:#1a1a1a;text-decoration:none;padding:5px 0;border-bottom:1px solid #f2f2f2;display:block}
.ing-link:hover{color:var(--brand)}
.pill.support{background:#eef;color:#446}

/* ---- suitability flags ---- */
.flaggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.flagchip{border-radius:10px;padding:11px 13px;border:1px solid}
.flagchip .ft{font-weight:700;font-size:14px}
.flagchip .fv{font-size:12.5px;margin-top:3px;opacity:.85}
.flagchip.ok{background:var(--good-bg);border-color:#bfe6cc;color:#176c33}
.flagchip.warn{background:var(--warn-bg);border-color:#f0d9b4;color:#8a5a12}
.flagchip.bad{background:var(--bad-bg);border-color:#f3c5c5;color:#9c1f1f}
.flagchip.info{background:var(--info-bg);border-color:#cdd9f7;color:#274a9e}
.flagrow{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.fchip{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;border:1px solid}
.fchip.ok{background:var(--good-bg);color:#176c33;border-color:#bfe6cc}
.fchip.warn{background:var(--warn-bg);color:#8a5a12;border-color:#f0d9b4}
.fchip.bad{background:var(--bad-bg);color:#9c1f1f;border-color:#f3c5c5}
.fchip.info{background:var(--info-bg);color:#274a9e;border-color:#cdd9f7}
/* ---- analyzer ---- */
.analyzer{margin:8px 0 18px}
.analyzer textarea{width:100%;min-height:120px;padding:14px;border:1px solid var(--line);border-radius:10px;font:15px/1.5 inherit;resize:vertical;box-shadow:var(--shadow)}
.analyzer #go{margin-top:10px;background:var(--brand);color:#fff;font-weight:700;border:0;padding:12px 24px;border-radius:8px;font-size:15px;cursor:pointer}
.analyzer #go:hover{background:var(--brand-ink)}
tr.unk td{color:var(--muted)}
#faqs details{border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:8px 0;background:#fff}
#faqs summary{font-weight:700;cursor:pointer}
#faqs p{margin:8px 0 0;font-size:14px}

/* =========================================================================
   Gen-Z minimal / aspirational reskin (overrides) — editorial, airy, calm
   ========================================================================= */
body{font-size:17px;line-height:1.65;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased}
.wrap{max-width:920px;padding:0 24px}
::selection{background:var(--accent);color:#fff}

/* minimal light header (was solid teal) */
.topbar{background:transparent;border-bottom:1px solid var(--line)}
.topbar .wrap{padding:18px 24px}
.topbar .logo{color:var(--ink);font-weight:700;letter-spacing:-0.02em;font-size:17px}
.topbar .logo small{color:var(--muted);opacity:1}
.topbar nav a{color:var(--muted);font-weight:500}
.topbar nav a:hover{color:var(--ink);text-decoration:none}

/* editorial serif headlines */
h1{font-family:var(--serif);font-weight:600;letter-spacing:-0.02em;line-height:1.1;font-size:clamp(30px,5vw,46px)}
.hero{padding:56px 0 24px}
.hero h1{font-size:clamp(34px,6vw,56px);max-width:14ch}
.hero p{font-size:19px;line-height:1.6;max-width:60ch;color:var(--muted);margin-top:18px}
header.product{padding:24px 0 10px}
.eyebrow{font-size:12px;letter-spacing:.14em;color:var(--accent)}

/* quieter section labels + air */
section{margin:44px 0}
h2{font-size:12px;letter-spacing:.16em;color:var(--muted);border-bottom:0;padding-bottom:0;margin:0 0 18px;text-transform:uppercase}
.tldr{background:#fff;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r);padding:22px 24px}
.tldr p{font-size:18px}

/* flat hairline cards */
.grid{gap:16px}
.pcard,.badge,.kf,.ing,.ev,.fcard,.flagchip{box-shadow:none}
.pcard{border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:.18s ease;background:var(--card)}
.pcard:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:var(--shadow)}
.pcard .pc-brand{color:var(--accent);letter-spacing:.1em;font-size:11px}
.pcard .pc-name{font-size:18px;letter-spacing:-0.01em;margin:6px 0 10px}
.tag{background:#f1ede4;color:var(--muted);font-weight:600;border-radius:999px;padding:3px 11px}
.tag.good{background:var(--good-bg);color:var(--good)}

/* pills + rounded surfaces */
.rcard,.kf,.ing,.fcard,.ev,.note,.indiabox{border-radius:var(--r)}
.rcard{border:1px solid var(--line);padding:16px}
.rcard:hover{border-color:var(--brand);text-decoration:none}
.flagchip{border-radius:14px;padding:14px 16px}
.fchip,.pill,.freq,.strength{border-radius:999px}
.cverdict{border-radius:var(--r)}
.adbanner{border-radius:var(--r)}

/* inputs / analyzer */
.analyzer textarea{border-radius:var(--r);border:1px solid var(--line);font-size:16px;padding:18px}
.analyzer #go{border-radius:999px;padding:14px 28px;letter-spacing:.01em}

/* tables a touch lighter */
.inci-table th,.scorecard th{font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.inci-table,.scorecard{font-size:15px}

/* az index + ingredient grid breathe */
.ing-grid{gap:8px 18px}
.aznav a{font-weight:600}
footer{margin-top:64px;border-color:var(--line);font-size:13px;color:var(--muted)}

/* ---- routine checker ---- */
.rchips{display:flex;flex-wrap:wrap;gap:10px}
.rchip{font:600 14px/1 inherit;padding:11px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:.14s}
.rchip:hover{border-color:var(--brand)}
.rchip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.sched{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:560px){.sched{grid-template-columns:1fr}}
.slot{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;background:#fff}
.slot h3{margin:0 0 6px;font-size:15px}
.slot p{margin:0;font-weight:600}
.slot small{color:var(--muted)}

/* ---- ingredient search ---- */
.searchwrap{margin:8px 0 4px}
#isearch{width:100%;padding:16px 20px;border:1px solid var(--line);border-radius:999px;font:16px inherit;background:#fff;color:var(--ink)}
#isearch:focus{outline:none;border-color:var(--brand)}

/* ---- ask assistant ---- */
.askbox{display:flex;gap:10px;margin:8px 0 12px}
.askbox #q{flex:1;padding:16px 20px;border:1px solid var(--line);border-radius:999px;font:16px inherit;background:#fff;color:var(--ink)}
.askbox #q:focus{outline:none;border-color:var(--brand)}
.askbox #ask{background:var(--brand);color:#fff;border:0;border-radius:999px;padding:0 26px;font-weight:700;cursor:pointer}
.suggest{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.sg{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font:500 13px inherit;color:var(--muted);cursor:pointer}
.sg:hover{border-color:var(--brand);color:var(--ink)}
.acard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:10px 0}
.acard h3{margin:0 0 8px;font-size:18px;letter-spacing:-0.01em}
.acard .more a{font-weight:700}
.aibtn{background:transparent;border:1px solid var(--brand);color:var(--brand);border-radius:999px;padding:10px 18px;font-weight:700;cursor:pointer;margin:6px 0}
.aibtn:hover{background:var(--brand);color:#fff}

/* ---- language toggle ---- */
.langtog{margin:14px 0 0}
.langtog a{display:inline-block;font-weight:700;font-size:13px;color:var(--brand);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.langtog a:hover{background:var(--brand);color:#fff;text-decoration:none}

/* logo is a home link on every page */
a.logo{text-decoration:none}
a.logo:hover{text-decoration:none;opacity:.85}

/* global language switcher in topbar */
.langnav{display:inline-flex;align-items:center;gap:8px;margin-left:16px;font-size:13px;flex-wrap:wrap}
.langnav>span{opacity:.55;margin-right:2px}
.langnav a,.langnav .cur{padding:3px 10px;border-radius:999px;line-height:1.4;white-space:nowrap}
.langnav a{color:var(--muted);text-decoration:none;border:1px solid var(--line)}
.langnav a:hover{color:#fff;background:var(--brand);border-color:var(--brand);text-decoration:none}
.langnav .cur{color:#fff;background:var(--brand);font-weight:700}
.topbar .wrap{flex-wrap:wrap;row-gap:8px;column-gap:10px}
/* auto conversational answer block */
.aiout{margin:10px 0;padding:14px 16px;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted);font-size:14px}

/* consistent main menu in topbar */
.mainnav{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:14px}
.mainnav a{color:var(--muted);font-size:14px;text-decoration:none;padding:4px 9px;border-radius:7px}
.mainnav a:hover{color:var(--ink);background:#fff;text-decoration:none}
@media(max-width:760px){.mainnav{order:3;margin-left:0;width:100%}.mainnav a{padding:4px 8px 4px 0}}

/* Ask — single clean answer */
.answer .acard{margin-top:6px}
.ansfoot{font-size:12px;color:var(--muted);margin:12px 0 0}
.more2{font-size:14px;color:var(--muted);margin:8px 0 0}
#ansbody.thinking{opacity:.55;transition:opacity .2s}
#ansbody p{margin:0 0 10px}
.answer .more a{font-weight:700}