/* Microplastic Exposure Audit — calm, evidence-honest, mobile-first. */

:root {
  --ground: #f2f6f4;
  --surface: #ffffff;
  --surface-2: #e6eeea;
  --ink: #15211c;
  --ink-2: #4f605a;
  --ink-3: #75847e;
  --line: #d3ddd8;
  --accent: #0d6b5c;
  --accent-ink: #ffffff;
  --accent-soft: #d6ebe4;
  --amber: #7d5f28;
  --amber-soft: #f1e7d0;
  --shadow: 0 1px 2px rgba(21, 33, 28, 0.06), 0 8px 24px rgba(21, 33, 28, 0.06);
  --radius: 12px;
  /* System fonts only. Loading a web font from Google sends every visitor's IP address to Google. */
  --font-display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0f1614;
    --surface: #182220;
    --surface-2: #202d29;
    --ink: #e6ede9;
    --ink-2: #aab8b1;
    --ink-3: #83928b;
    --line: #2c3b36;
    --accent: #4fc0a7;
    --accent-ink: #0b1613;
    --accent-soft: #163a32;
    --amber: #d8b46b;
    --amber-soft: #3a2f16;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0f1614;
  --surface: #182220;
  --surface-2: #202d29;
  --ink: #e6ede9;
  --ink-2: #aab8b1;
  --ink-3: #83928b;
  --line: #2c3b36;
  --accent: #4fc0a7;
  --accent-ink: #0b1613;
  --accent-soft: #163a32;
  --amber: #d8b46b;
  --amber-soft: #3a2f16;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  padding-inline: 20px;
  padding-block: 0 48px;
  min-height: 100dvh;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(1.75rem, 2.4vw + 1.2rem, 2.375rem); }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
p { margin: 0; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 16px; }

.wrap { max-width: 34rem; margin-inline: auto; }
.screen { display: flex; flex-direction: column; gap: 20px; padding-top: 28px; animation: enter 220ms ease-out both; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } * { transition: none !important; } }

.eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.hint, .fine, .small { color: var(--ink-2); font-size: 0.9375rem; }
.small { font-size: 0.875rem; }
.muted { color: var(--ink-3); }
.tnum { font-variant-numeric: tabular-nums; }

/* Progress */
.progress { position: fixed; inset: 0 0 auto 0; height: 4px; background: var(--surface-2); z-index: 5; }
.progress-bar { height: 100%; width: 0; background: var(--accent); transition: width 240ms ease; }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.brand small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.75rem; color: var(--ink-3); letter-spacing: 0.04em; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 12px 22px; border-radius: var(--radius); border: 1.5px solid transparent; font-weight: 600; font-size: 1.0625rem; text-decoration: none; cursor: pointer; width: 100%; transition: background-color 120ms, border-color 120ms, transform 80ms; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--ink-3); }
.btn-inline { width: auto; min-height: 44px; padding: 8px 16px; font-size: 0.9375rem; }
.link { background: none; border: 0; padding: 8px 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 0.9375rem; min-height: 44px; display: inline-flex; align-items: center; width: auto; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Landing */
.hero { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; }
.hero h1 { font-size: clamp(2rem, 3vw + 1.3rem, 2.75rem); }
.hero .sub { font-size: 1.125rem; color: var(--ink-2); max-width: 32rem; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; padding: 0; margin: 0; color: var(--ink-2); font-size: 0.9rem; }
.trust li::before { content: "·"; margin-right: 8px; color: var(--accent); font-weight: 700; }
.trust li:first-child::before { content: ""; margin: 0; }

/* Answer options */
.options { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; gap: 14px; min-height: 60px; width: 100%; text-align: left; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1.5px solid var(--line); cursor: pointer; transition: border-color 120ms, background-color 120ms; font-size: 1.0625rem; line-height: 1.3; }
.opt:hover { border-color: var(--ink-3); }
.opt .dot { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink-3); position: relative; transition: border-color 120ms; }
.opt[aria-pressed="true"], .opt.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.opt[aria-pressed="true"] .dot, .opt.is-selected .dot { border-color: var(--accent); }
.opt[aria-pressed="true"] .dot::after, .opt.is-selected .dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--accent); }

/* Consent panel */
.consent { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1.5px solid var(--line); box-shadow: var(--shadow); }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-weight: 600; min-height: 44px; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex: 0 0 auto; }

/* Score hero + scale */
.score-block { display: flex; flex-direction: column; gap: 6px; }
.score-hero { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-display); }
.score-num { font-size: clamp(5.5rem, 22vw, 7.5rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.score-den { font-size: 1.5rem; font-weight: 500; color: var(--ink-2); }
.score-label { color: var(--ink-2); font-size: 0.9375rem; }
.scale { position: relative; height: 56px; margin-top: 10px; }
.scale .track { position: absolute; left: 0; right: 0; top: 24px; height: 8px; border-radius: 4px; background: var(--surface-2); }
.scale .fill { position: absolute; left: 0; top: 24px; height: 8px; border-radius: 4px; background: var(--accent); }
.scale .marker { position: absolute; top: 20px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--ink); transform: translateX(-50%); }
.scale .typical { position: absolute; top: 12px; width: 2px; height: 32px; background: var(--ink-3); transform: translateX(-50%); }
.scale .typical-label { position: absolute; top: -6px; transform: translateX(-50%); font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; }
.scale .end { position: absolute; top: 38px; font-size: 0.75rem; color: var(--ink-3); }
.scale .end.right { right: 0; }
.pct { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; }
.frame { padding: 12px 14px; border-left: 3px solid var(--line); color: var(--ink-2); font-size: 0.9375rem; }

/* Callout for #1 source */
.top1 { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1.5px solid var(--line); }
.top1 h2 { font-size: 1.5rem; }

/* Email form */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field input[type="email"] { font: inherit; font-size: 1.0625rem; min-height: 56px; padding: 12px 16px; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; }
.field input[type="email"]:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.error { color: #a33a2a; font-size: 0.9rem; }
:root[data-theme="dark"] .error { color: #f0a08e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .error { color: #f0a08e; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bullets { margin: 0; padding-left: 1.2em; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
/* The newsletter pitch on the email screen: the one block that sells the letter, so it sits above
   the buttons rather than in the fine print under them. */
.pitch { margin: 16px 0 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; }
.pitch-lead { margin: 0 0 8px; font-weight: 600; }
.pitch .bullets { font-size: 15px; }

/* Results */
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); font-size: 0.875rem; color: var(--ink-2); width: fit-content; }
.status.is-ok { background: var(--accent-soft); color: var(--accent); }
.lever { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--accent); box-shadow: var(--shadow); }
.lever h2 { font-size: 1.5rem; }
/* Water advice with no link to press: plain text, not a card that outshines the ranked list. */
.lever.is-plain { padding: 0; border: 0; background: none; box-shadow: none; }
.lever.is-plain h2 { font-size: 1.25rem; }
.lever .region { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-2); }
.lever select { font: inherit; font-size: 0.875rem; padding: 6px 10px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); min-height: 36px; }
.ranked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: rank; }
.rank-item { display: grid; grid-template-columns: 44px 1fr; gap: 6px 12px; padding: 18px 18px 18px 14px; border-radius: var(--radius); background: var(--surface); border: 1.5px solid var(--line); }
.rank-num { grid-row: 1 / span 3; font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; padding-top: 2px; }
.rank-item h3 { font-size: 1.25rem; }
.why { color: var(--ink-2); font-size: 0.9375rem; }
.why a { color: var(--ink-2); font-size: 0.85em; margin-left: 4px; white-space: nowrap; }
.fix { margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: var(--ground); display: flex; flex-direction: column; gap: 6px; }
.fix .row { justify-content: space-between; }
.fix strong { font-size: 1rem; }
.fix .detail { font-size: 0.9375rem; color: var(--ink-2); }
.fix .cta { margin-top: 6px; }
.label { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.label-established { background: var(--accent-soft); color: var(--accent); }
.label-likely { background: var(--amber-soft); color: var(--amber); }
.label-emerging { background: var(--surface-2); color: var(--ink-2); }
.cost { font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.note { padding: 14px 16px; border-radius: var(--radius); background: var(--accent-soft); color: var(--ink); font-size: 0.9375rem; }

/* Share */
.share { display: flex; flex-direction: column; gap: 12px; }
.card-preview { border-radius: 12px; overflow: hidden; border: 1.5px solid var(--line); box-shadow: var(--shadow); background: #f2f6f4; }
.card-preview svg { display: block; width: 100%; height: auto; }

footer.foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.875rem; color: var(--ink-2); }
footer.foot a { color: var(--ink-2); }

/* How-we-score page */
.doc { display: flex; flex-direction: column; gap: 28px; padding-top: 24px; max-width: 40rem; }
.doc section { display: flex; flex-direction: column; gap: 10px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
.doc th, .doc td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.doc .tablewrap { overflow-x: auto; }
.doc code { font-size: 0.9em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.cite { font-size: 0.9375rem; color: var(--ink-2); }
.cite strong { color: var(--ink); }
.q { padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.q ul { margin: 0; padding-left: 1.2em; }

@media (min-width: 640px) {
  body { font-size: 17px; }
  .screen { padding-top: 40px; }
}

/* Utilities added with the app */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.form { display: flex; flex-direction: column; gap: 14px; }
.opt:disabled { cursor: default; }

/* Story format: the true story, what it found, then the question, on one screen. The story and its
   answer sit close together as one unit, with more air before the question. The answer is smaller
   type on a muted panel, so it stays quieter than the question and never looks like a white option
   card to tap. */
.story { font-size: 1.0625rem; line-height: 1.5; color: var(--ink); }
.story::before { content: ""; display: block; width: 28px; height: 3px; background: var(--accent); margin-bottom: 10px; border-radius: 2px; }
.payoff { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); color: var(--ink); font-size: 0.9375rem; line-height: 1.45; }
/* The one line a skimmer reads. The paragraph under it keeps the evidence, so nothing is traded
   away for the summary. */
.payoff .verdict { font-weight: 600; }
.payoff .eyebrow { color: var(--accent); }
.story + .payoff { margin-top: -8px; }
.payoff + h1 { margin-top: 8px; }
/* On a phone every question screen needs a scroll before the options otherwise, so the question
   screens sit closer to the top and closer together there. */
@media (max-width: 639px) {
  .screen-q { gap: 14px; padding-top: 16px; }
  .screen-q .story { font-size: 1rem; }
}
/* An affiliate link and its one-line disclosure, kept together so the line sits directly under the
   link. Small, but in --ink-2 rather than the muted grey: it has to stay clearly readable. */
.aff { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.disclosure { font-size: 0.8125rem; line-height: 1.4; color: var(--ink-2); }
.check.check-soft { font-weight: 500; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }
.check.check-soft input { margin-top: 3px; }

/* Segment weight override, published on the method page */
.override { margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--amber-soft); color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.override ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 3px; }

/* Consent choice: two submit buttons, equal size. Declining must never be the harder path. */
.choices { display: flex; flex-direction: column; gap: 10px; }