:root {
  --paper: #F4FAF2;
  --card: #FFFFFF;
  --ink: #1A1A1A;
  --ink-soft: #4A4F57;
  --line: #DCE7D8;
  --brand: #52D93C;
  --brand-deep: #1E6E1A;

  --true-bg: #E4F7DF;  --true-line: #52D93C;  --true-text: #1E6E1A;
  --dep-bg: #FBF5CC;   --dep-line: #D9BE1E;   --dep-text: #665300;
  --false-bg: #F8E5DF; --false-line: #B8503A; --false-text: #85321F;
  --unk-bg: #EEECE5;   --unk-line: #9A9484;   --unk-text: #5F5A4E;

  --shadow: 3px 3px 0 rgba(26, 26, 26, 0.12);

  /* Verdict scale: five on a true-to-false line, two off the line */
  --v-true-bg:#DFF5DA;   --v-true-line:#3DB83A;   --v-true-text:#1D6B1A;
  --v-mtrue-bg:#EDF6D4;  --v-mtrue-line:#93BF34;  --v-mtrue-text:#4A6410;
  --v-hype-bg:#FBF4C6;   --v-hype-line:#D9BE1E;   --v-hype-text:#665300;
  --v-mfalse-bg:#FCE5D5; --v-mfalse-line:#E8804A; --v-mfalse-text:#8A3B0F;
  --v-false-bg:#F9DEDB;  --v-false-line:#D2453A;  --v-false-text:#8E1F17;
  --v-depends-bg:#EEE6FA;--v-depends-line:#8B5CF6;--v-depends-text:#5B2A9E;
  --v-nee-bg:#E8ECF1;    --v-nee-line:#64748B;    --v-nee-text:#3D4756;

  /* Four pillars, from healthmovement.com/site/health-made-simple */
  --mv: #FFA800; --nu: #54D83C; --mh: #FF3084; --sl: #00B4FF; --su: #F0473C;
  --mv-text: #945800; --nu-text: #1E7A12; --mh-text: #C2185B; --sl-text: #006FA6; --su-text: #B8281F;

  /* Extra research categories, outside the official site pillars */
  --ht: #E0383A; --ho: #6C5CE7; --lo: #00B2A9; --sb: #E8A33D; --ot: #8A8F98;
  --wh: #D946EF; --mn: #3B6FD8; --wl: #A3C600; --as: #8D6E63; --ph: #5C6BC0; --dn: #26C6DA;
  --ht-text: #A3201F; --ho-text: #4433B0; --lo-text: #007267; --sb-text: #8A5A12; --ot-text: #5A5F68;
  --wh-text: #A21CAF; --mn-text: #1F4AAE; --wl-text: #5E7300; --as-text: #5D4037; --ph-text: #3949AB; --dn-text: #00778A;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171F19;
    --card: #202B22;
    --ink: #F3F1E7;
    --ink-soft: #AEB3A6;
    --line: #3A4438;
    --brand: #6BE94F;
    --brand-deep: #7EDD68;

    --true-bg: #223A20;  --true-line: #6BE94F;  --true-text: #9CE888;
    --dep-bg: #37331A;   --dep-line: #D9BE1E;   --dep-text: #F0DF78;
    --v-true-bg:#1F3A1E;   --v-true-line:#5CCB4E;   --v-true-text:#A2E892;
    --v-mtrue-bg:#2B3618;  --v-mtrue-line:#A8CF4A;   --v-mtrue-text:#CFE58E;
    --v-hype-bg:#37331A;   --v-hype-line:#D9BE1E;   --v-hype-text:#F0DF78;
    --v-mfalse-bg:#3C2618; --v-mfalse-line:#EE9160; --v-mfalse-text:#F6B893;
    --v-false-bg:#3E1E1B;  --v-false-line:#E06A5F;  --v-false-text:#F5A69D;
    --v-depends-bg:#2C2440;--v-depends-line:#A283F7;--v-depends-text:#CDB9FB;
    --v-nee-bg:#262C34;    --v-nee-line:#8A96A8;    --v-nee-text:#C4CCD8;

    --false-bg: #3A2118; --false-line: #D9724F; --false-text: #F0A688;
    --unk-bg: #2A2A24;   --unk-line: #8C8677;   --unk-text: #C9C4B4;

    --shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
    --mv-text: #FFC04D; --nu-text: #7EDD68; --mh-text: #FF78AA; --sl-text: #5CCBFF; --su-text: #FF8A80;
    --ht-text: #FF8A82; --ho-text: #B9ACFF; --lo-text: #5EE0D3; --sb-text: #F4C873; --ot-text: #C7CBD1; --wh-text: #F0ABFC; --mn-text: #9DB9FF; --wl-text: #D4EB6A; --as-text: #D7B8AE; --ph-text: #A9B4F5; --dn-text: #7FE3F0;
  }
}
:root[data-theme="dark"] {
  --paper: #171F19;
  --card: #202B22;
  --ink: #F3F1E7;
  --ink-soft: #AEB3A6;
  --line: #3A4438;
  --brand: #6BE94F;
  --brand-deep: #7EDD68;

  --true-bg: #223A20;  --true-line: #6BE94F;  --true-text: #9CE888;
  --dep-bg: #37331A;   --dep-line: #D9BE1E;   --dep-text: #F0DF78;
  --v-true-bg:#1F3A1E;   --v-true-line:#5CCB4E;   --v-true-text:#A2E892;
  --v-mtrue-bg:#2B3618;  --v-mtrue-line:#A8CF4A;   --v-mtrue-text:#CFE58E;
  --v-hype-bg:#37331A;   --v-hype-line:#D9BE1E;   --v-hype-text:#F0DF78;
  --v-mfalse-bg:#3C2618; --v-mfalse-line:#EE9160; --v-mfalse-text:#F6B893;
  --v-false-bg:#3E1E1B;  --v-false-line:#E06A5F;  --v-false-text:#F5A69D;
  --v-depends-bg:#2C2440;--v-depends-line:#A283F7;--v-depends-text:#CDB9FB;
  --v-nee-bg:#262C34;    --v-nee-line:#8A96A8;    --v-nee-text:#C4CCD8;
  --false-bg: #3A2118; --false-line: #D9724F; --false-text: #F0A688;
  --unk-bg: #2A2A24;   --unk-line: #8C8677;   --unk-text: #C9C4B4;

  --shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  --mv-text: #FFC04D; --nu-text: #7EDD68; --mh-text: #FF78AA; --sl-text: #5CCBFF; --su-text: #FF8A80;
    --ht-text: #FF8A82; --ho-text: #B9ACFF; --lo-text: #5EE0D3; --sb-text: #F4C873; --ot-text: #C7CBD1; --wh-text: #F0ABFC; --mn-text: #9DB9FF; --wl-text: #D4EB6A; --as-text: #D7B8AE; --ph-text: #A9B4F5; --dn-text: #7FE3F0;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Poppins', system-ui, -apple-system, sans-serif; }

.display { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }

.card { background: var(--card); border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px; border: 2px solid; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; line-height: 1.2; }
.badge svg { width: 14px; height: 14px; flex-shrink: 0; }
.badge.true  { background: var(--true-bg);  border-color: var(--true-line);  color: var(--true-text); }
.badge.dep   { background: var(--dep-bg);   border-color: var(--dep-line);   color: var(--dep-text); }
.badge.false { background: var(--false-bg); border-color: var(--false-line); color: var(--false-text); }
.badge.unk   { background: var(--unk-bg);   border-color: var(--unk-line);   color: var(--unk-text); }

.ev { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.dots { display: inline-flex; gap: 3px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dot.on { background: var(--ink); }

.chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; text-decoration: none; }
.chip svg { width: 16px; height: 16px; }
.chip.on { background: var(--ink); color: var(--paper); }

.link { color: var(--brand-deep); font-weight: 700; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }

/* Health Movement logo lockup: color logo in light mode, reversed logo in dark mode */
.lockup { --lh: 24px; display: flex; align-items: flex-end; gap: 12px; }
.lockup img { display: block; width: auto; }
.lockup-sub { font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); padding-left: 12px; border-left: 2px solid var(--line); line-height: 1; height: calc(var(--lh) * 0.65); display: flex; align-items: center; margin-bottom: calc(var(--lh) * 0.005); }
.logo-rev { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-std { display: none !important; }
  :root:not([data-theme="light"]) .logo-rev { display: block !important; }
}
:root[data-theme="dark"] .logo-std { display: none !important; }
:root[data-theme="dark"] .logo-rev { display: block !important; }

/* Buttons, fields, next step, footer */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--ink); background: var(--brand); color: #10261A; font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: 14px; box-shadow: var(--shadow); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn.ghost { background: var(--card); color: var(--ink); }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; padding: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 800; color: var(--ink); }
.field .hint { font-size: 12px; color: var(--ink-soft); }
.field input, .field textarea { width: 100%; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); color: var(--ink); font-family: 'Poppins', system-ui, sans-serif; font-size: 15px; padding: 12px 14px; }
.field textarea { resize: none; min-height: 88px; }
.nextstep { background: var(--card); border: 2px dashed var(--brand-deep); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.vote { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: 13px; cursor: pointer; white-space: nowrap; }
.foot { background: #10261A; color: #F3F1E7; }
.foot a { color: #F3F1E7; opacity: 0.82; text-decoration: none; font-size: 13.5px; line-height: 1.9; }
.foot .foot-h { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #52D93C; margin-bottom: 4px; }
.navlink { font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; }

/* Pillar icons: colored glyph in a white circle, as on healthmovement.com */
.pic { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; border: 1.5px solid #E3E6E1; flex-shrink: 0; }
.pic svg { width: 15px !important; height: 15px !important; }
.pic.sm { width: 20px; height: 20px; }
.pic.sm svg { width: 12px !important; height: 12px !important; }
.pic.mv svg { fill: var(--mv); } .pic.nu svg { fill: var(--nu); } .pic.mh svg { fill: var(--mh); } .pic.sl svg { fill: var(--sl); } .pic.su svg { fill: var(--su); }
.pic.ht svg { fill: var(--ht); } .pic.ho svg { fill: var(--ho); } .pic.lo svg { fill: var(--lo); } .pic.sb svg { fill: var(--sb); } .pic.ot svg { fill: var(--ot); }
.pic.wh svg { fill: var(--wh); } .pic.mn svg { fill: var(--mn); } .pic.wl svg { fill: var(--wl); } .pic.as svg { fill: var(--as); } .pic.ph svg { fill: var(--ph); } .pic.dn svg { fill: var(--dn); }
.chip .pic { margin: -3px 0 -3px -4px; }
.eyebrow.pl { display: inline-flex; align-items: center; gap: 7px; }
.eyebrow.pl.mv { color: var(--mv-text); } .eyebrow.pl.nu { color: var(--nu-text); } .eyebrow.pl.mh { color: var(--mh-text); } .eyebrow.pl.sl { color: var(--sl-text); } .eyebrow.pl.su { color: var(--su-text); }
.eyebrow.pl.ht { color: var(--ht-text); } .eyebrow.pl.ho { color: var(--ho-text); } .eyebrow.pl.lo { color: var(--lo-text); } .eyebrow.pl.sb { color: var(--sb-text); } .eyebrow.pl.ot { color: var(--ot-text); }
.eyebrow.pl.wh { color: var(--wh-text); } .eyebrow.pl.mn { color: var(--mn-text); } .eyebrow.pl.wl { color: var(--wl-text); } .eyebrow.pl.as { color: var(--as-text); } .eyebrow.pl.ph { color: var(--ph-text); } .eyebrow.pl.dn { color: var(--dn-text); }
.card .badge { align-self: flex-start; }

/* Verdict badges */
.badge.v-true    { background: var(--v-true-bg);    border-color: var(--v-true-line);    color: var(--v-true-text); }
.badge.v-mtrue   { background: var(--v-mtrue-bg);   border-color: var(--v-mtrue-line);   color: var(--v-mtrue-text); }
.badge.v-hype    { background: var(--v-hype-bg);    border-color: var(--v-hype-line);    color: var(--v-hype-text); }
.badge.v-mfalse  { background: var(--v-mfalse-bg);  border-color: var(--v-mfalse-line);  color: var(--v-mfalse-text); }
.badge.v-false   { background: var(--v-false-bg);   border-color: var(--v-false-line);   color: var(--v-false-text); }
.badge.v-depends { background: var(--v-depends-bg); border-color: var(--v-depends-line); color: var(--v-depends-text); }
.badge.v-nee     { background: var(--v-nee-bg);     border-color: var(--v-nee-line);     color: var(--v-nee-text); }
.vscale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.vscale span { height: 8px; border-radius: 999px; }
.vscale .v-true { background: var(--v-true-line); } .vscale .v-mtrue { background: var(--v-mtrue-line); } .vscale .v-hype { background: var(--v-hype-line); } .vscale .v-mfalse { background: var(--v-mfalse-line); } .vscale .v-false { background: var(--v-false-line); }