:root {
  --plastic:#F2F4F1; --card:#FFFFFF; --water:#0E4F66; --ink:#10222B;
  --oto:#F5C33B; --phenol:#E8654F; --clearw:#B8E4EE; --rule:#10222B;
  --muted:#5C6B70;
}
@media (prefers-color-scheme: dark) {
  :root { --plastic:#0A1418; --card:#122029; --ink:#E8EFF1; --rule:#E8EFF1;
          --muted:#8CA0A6; --water:#9FD3E4; --clearw:#164556; }
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body {
  background:var(--plastic); color:var(--ink);
  font:16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.mono { font-family:"IBM Plex Mono", ui-monospace, monospace; }
.wrap { max-width:720px; margin:0 auto; padding:0 20px; }

/* label header */
.labelbar { display:flex; justify-content:space-between; align-items:center; padding:18px 0 12px; }
.brand { font-family:"Archivo",sans-serif; font-stretch:125%; font-weight:900; font-size:20px; letter-spacing:.02em; text-transform:uppercase; }
.brand small { display:block; font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:10px; letter-spacing:.28em; color:var(--muted); text-transform:uppercase; }
.sticker {
  font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:13px;
  background:var(--oto); color:#10222B; border:2px solid var(--rule);
  padding:6px 10px; border-radius:4px; transform:rotate(2deg);
}
.rule-heavy { border-top:3px solid var(--rule); }

/* hero */
.hero { padding:34px 0 10px; }
h1 {
  font-family:"Archivo",sans-serif; font-stretch:125%; font-weight:850;
  font-size:clamp(34px,8vw,56px); line-height:1.0; letter-spacing:-.01em;
  text-transform:uppercase;
}
h1 .dim { color:var(--water); }
.lede { margin:16px 0 26px; font-size:18px; color:var(--muted); max-width:32em; }

/* comparator card — the signature */
.kit { background:var(--card); border:2px solid var(--rule); border-radius:6px; overflow:hidden; }
.kit-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; border-bottom:2px solid var(--rule);
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
}
.kit-head span:last-child { color:var(--muted); letter-spacing:.1em; }
.kit-body { padding:16px 14px 18px; }
.wells { display:flex; gap:6px; margin:4px 0 14px; }
.well {
  flex:1; height:44px; border:2px solid var(--rule); border-radius:4px;
  background:var(--clearw); position:relative; overflow:hidden;
}
.well i { position:absolute; inset:0; transform-origin:bottom; transform:scaleY(0); }
.well.on i { transform:scaleY(1); transition:transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .well.on i { transition:none; } }
.well b {
  position:absolute; bottom:2px; left:0; right:0; text-align:center;
  font:600 10px "IBM Plex Mono",monospace; color:#10222B; opacity:.75;
}
.kit label { display:block; font:600 11px "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:12px 0 4px; }
.kit input[type=range] { width:100%; accent-color:var(--phenol); }
.kit .fields { display:flex; gap:10px; flex-wrap:wrap; }
.kit .fields > div { flex:1; min-width:130px; }
.kit input[type=number], .kit select {
  width:100%; font:600 15px "IBM Plex Mono",monospace; color:var(--ink);
  background:var(--plastic); border:2px solid var(--rule); border-radius:4px; padding:9px 10px;
}
.dose {
  margin-top:16px; border-top:2px dashed var(--rule); padding-top:14px;
  font-family:"IBM Plex Mono",monospace;
}
.dose .lead { font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.dose .amt { font-size:clamp(26px,6vw,38px); font-weight:600; }
.dose .amt em { font-style:normal; color:var(--phenol); }
.dose .of { font-size:13px; color:var(--muted); }
.under { display:flex; gap:18px; flex-wrap:wrap; margin:14px 2px 0; font:500 12px "IBM Plex Mono",monospace; color:var(--muted); letter-spacing:.06em; }

/* claims as spec rows */
.spec { margin:44px 0 0; border-top:3px solid var(--rule); }
.spec h2 { font-family:"Archivo",sans-serif; font-stretch:125%; font-weight:850; text-transform:uppercase; font-size:20px; margin:18px 0 6px; }
.spec dl { display:grid; grid-template-columns:minmax(110px,32%) 1fr; border:2px solid var(--rule); border-radius:6px; overflow:hidden; background:var(--card); }
.spec dt, .spec dd { padding:11px 14px; border-top:1px solid color-mix(in srgb, var(--rule) 25%, transparent); }
.spec dt:first-of-type, .spec dd:first-of-type { border-top:none; }
.spec dt { font:600 12px "IBM Plex Mono",monospace; letter-spacing:.1em; text-transform:uppercase; background:color-mix(in srgb, var(--water) 8%, var(--card)); }
.spec dd { font-size:15px; }

/* dosing chart */
table { width:100%; border-collapse:collapse; background:var(--card); border:2px solid var(--rule); border-radius:6px; overflow:hidden; }
.tlabel { font:600 11px "IBM Plex Mono",monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
th, td { padding:10px 12px; text-align:left; border-top:1px solid color-mix(in srgb, var(--rule) 25%, transparent); font-size:14px; }
thead th { border-top:none; font:600 11px "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase; background:color-mix(in srgb, var(--water) 8%, var(--card)); }
td.mono { font-weight:600; }

/* calculator links */
.calcs a {
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:14px; margin:10px 0; background:var(--card); border:2px solid var(--rule);
  border-radius:6px; color:var(--ink); text-decoration:none;
}
.calcs a:hover { background:color-mix(in srgb, var(--oto) 18%, var(--card)); }
.calcs a:focus-visible { outline:3px solid var(--phenol); outline-offset:2px; }
.calcs .t { font-weight:700; }
.calcs .d { font-size:13px; color:var(--muted); }
.calcs .go { font-family:"IBM Plex Mono",monospace; font-weight:600; }

/* notify + footer */
.notify { margin-top:44px; border:2px solid var(--rule); border-radius:6px; background:var(--water); color:#F2F4F1; padding:22px 18px; }
@media (prefers-color-scheme: dark) { .notify { background:#0E4F66; } }
.notify h2 { font-family:"Archivo",sans-serif; font-stretch:125%; font-weight:850; text-transform:uppercase; font-size:20px; }
.notify p { margin:6px 0 14px; opacity:.85; font-size:15px; }
.notify a {
  display:inline-block; font:600 14px "IBM Plex Mono",monospace; color:#10222B;
  background:var(--oto); border:2px solid #10222B; border-radius:4px; padding:10px 16px; text-decoration:none;
}
.notify a:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.caution {
  margin:44px 0 0; padding:12px 14px; border:2px solid var(--rule); border-left:10px solid var(--oto);
  border-radius:4px; font-size:13px; color:var(--muted); background:var(--card);
}
footer { padding:26px 0 44px; font:500 12px "IBM Plex Mono",monospace; color:var(--muted); }
footer a { color:inherit; }
section { margin-top:44px; }

/* redemption arc + report showcase */
.arc h2, .soak h2 { font-family:"Archivo",sans-serif; font-stretch:125%; font-weight:850; text-transform:uppercase; font-size:22px; margin:4px 0 12px; }
.ramp { display:flex; gap:4px; margin:6px 0 12px; }
.ramp i { flex:1; height:26px; border:2px solid var(--rule); border-radius:5px; position:relative; }
.ramp i b { position:absolute; inset:auto 0 -20px 0; text-align:center; font:500 9px "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.arcline { margin:28px 0 18px; color:var(--muted); max-width:38em; }
.report { background:#0F1A24; border:2px solid var(--rule); border-radius:16px; padding:18px; max-width:360px; margin:0 auto; }
.rephead { display:flex; justify-content:space-between; font:600 12px "IBM Plex Mono",monospace; color:#7FCBE0; margin-bottom:12px; }
.rephead span:last-child { color:#8CA0A6; }
.repbody { display:flex; align-items:center; gap:10px; justify-content:center; }
.pane { text-align:center; }
.pane .water { width:104px; height:104px; border-radius:12px; }
.pane small { display:block; margin-top:6px; font:600 9px "IBM Plex Mono",monospace; letter-spacing:.14em; color:#8CA0A6; }
.reparrow { color:#8CA0A6; font-size:20px; font-weight:700; }
.repline { text-align:center; font-family:"Archivo",sans-serif; font-stretch:125%; font-weight:850; font-size:19px; color:#F2F4F1; margin:14px 0 10px; }
.repstats { display:flex; justify-content:center; gap:22px; font-family:"IBM Plex Mono",monospace; color:#F2F4F1; font-weight:600; }
.repstats small { display:block; font-weight:500; font-size:9px; color:#8CA0A6; text-align:center; letter-spacing:.1em; }
.repfoot { text-align:center; font:500 10px "IBM Plex Mono",monospace; color:#5C6B70; margin-top:12px; }
/* soak night band */
.soak { background:#0A1418; border:2px solid var(--rule); border-radius:8px; padding:24px 20px; color:#E8EFF1; }
.soak h2 { color:#9FD3E4; }
.soak p { color:#8CA0A6; max-width:36em; }