:root{
  --ink:#111315; --ink2:#4a5157; --ink3:#767e86;
  --rule:#dcdfe2; --bg:#fbfbfa; --panel:#fff;
  --ok:#0f6b45; --mid:#8a5b00; --bad:#a3251c;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-feature-settings:"kern" 1;
}
code{font-family:var(--mono); font-size:.9em; background:#eef0f1; padding:.05em .3em; border-radius:3px}
a{color:inherit}

.bar{
  display:flex; align-items:baseline; gap:.9rem; justify-content:space-between;
  padding:1.1rem clamp(1rem,4vw,2.5rem); border-bottom:1px solid var(--rule);
}
.brand{font-weight:600; letter-spacing:-.01em; text-decoration:none; font-size:1.02rem}
.brand span{color:var(--ink3); font-weight:400}
.tag{font-size:.78rem; color:var(--ink3); text-transform:uppercase; letter-spacing:.08em}

main{max-width:60rem; margin:0 auto; padding:clamp(1.5rem,5vw,3.5rem) clamp(1rem,4vw,2.5rem) 5rem}

.hero h1{
  font-size:clamp(1.55rem,4vw,2.35rem); line-height:1.22; letter-spacing:-.02em;
  font-weight:600; margin:0 0 1rem; max-width:34ch;
}
.lede{color:var(--ink2); max-width:58ch; margin:0 0 1.6rem}
.scan{display:flex; gap:.5rem; max-width:32rem}
.scan input{
  flex:1; min-width:0; padding:.72rem .85rem; font-size:1rem; font-family:var(--mono);
  border:1px solid #c6cbcf; border-radius:5px; background:#fff; color:var(--ink);
}
.scan input:focus{outline:2px solid #111315; outline-offset:1px}
.scan button{
  padding:.72rem 1.25rem; font-size:.95rem; font-weight:600; cursor:pointer;
  background:var(--ink); color:#fff; border:1px solid var(--ink); border-radius:5px;
}
.scan button:hover{background:#000}
.hint{font-size:.82rem; color:var(--ink3); margin:.7rem 0 0}

h2{font-size:1.02rem; letter-spacing:.01em; margin:3rem 0 .9rem; font-weight:600}
.what ul{margin:0; padding-left:1.1rem; color:var(--ink2); max-width:62ch}
.what li{margin:.35rem 0}

.offer{
  margin-top:2.6rem; background:var(--panel); border:1px solid var(--rule);
  border-radius:8px; padding:clamp(1.1rem,3vw,1.8rem);
}
.offer h2{margin-top:0}
.price{font-size:1.5rem; font-weight:600; letter-spacing:-.01em; margin:.2rem 0 1rem}
.price .sub{font-size:.9rem; font-weight:400; color:var(--ink3)}
.offer ol{margin:.6rem 0; padding-left:1.2rem; color:var(--ink2)}
.offer ol li{margin:.4rem 0}
.small{font-size:.85rem; color:var(--ink3); max-width:66ch}

.samples .links{display:flex; flex-wrap:wrap; gap:.5rem}
.samples .links a{
  font-family:var(--mono); font-size:.86rem; text-decoration:none;
  border:1px solid var(--rule); background:#fff; border-radius:999px; padding:.28rem .7rem;
}
.samples .links a:hover{border-color:var(--ink)}

.foot{
  border-top:1px solid var(--rule); padding:1.4rem clamp(1rem,4vw,2.5rem);
  font-size:.8rem; color:var(--ink3);
}

/* ---------------- report ---------------- */
.report main{max-width:52rem}
.kicker{font-size:.78rem; color:var(--ink3); text-transform:uppercase; letter-spacing:.08em; margin:0}
.dom{font-family:var(--mono); font-size:clamp(1.3rem,3.4vw,1.9rem); font-weight:600; margin:.2rem 0 .6rem; letter-spacing:-.02em}
.verdict{
  display:inline-block; font-size:.82rem; font-weight:600; letter-spacing:.09em;
  padding:.32rem .62rem; border-radius:4px; margin:0 0 .6rem;
}
.verdict.ok{background:#e6f2ec; color:var(--ok)}
.verdict.mid{background:#fbf0dc; color:var(--mid)}
.verdict.bad{background:#fbe9e7; color:var(--bad)}
.meta{font-size:.84rem; color:var(--ink3); margin:0 0 1.5rem}
.worst{
  font-size:1.02rem; line-height:1.5; margin:0 0 1.9rem; padding:.95rem 1.1rem;
  border-left:3px solid var(--ink); background:#f4f5f4; max-width:64ch;
}

table.checks{width:100%; border-collapse:collapse; margin:0 0 2rem; font-size:.92rem}
table.checks th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink3); font-weight:600; padding:0 .6rem .45rem; border-bottom:1px solid var(--rule);
}
table.checks td{padding:.6rem; border-bottom:1px solid var(--rule); vertical-align:top}
table.checks td.m{width:1.6rem; text-align:center; font-weight:700; font-family:var(--mono)}
table.checks td.l{width:13rem; font-weight:500}
table.checks td.c{color:var(--ink2)}
tr.pass td.m{color:var(--ok)}
tr.warn td.m{color:var(--mid)}
tr.fail td.m{color:var(--bad)}
tr.fail td.c{color:var(--ink)}

.facts h2,.limits h2,.sell h2{font-size:.9rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink3); margin:2.2rem 0 .8rem}
.facts dl{display:grid; grid-template-columns:7rem 1fr; gap:.45rem .9rem; margin:0; font-size:.88rem}
.facts dt{color:var(--ink3); font-family:var(--mono); font-size:.78rem; padding-top:.15rem}
.facts dd{margin:0; overflow-wrap:anywhere}
.facts dd code{font-size:.8rem}
.t{color:var(--ink3); font-size:.8rem}

.limits p,.sell p{color:var(--ink2); max-width:66ch}
.sell{margin-top:2.4rem; border:1px solid var(--rule); background:var(--panel); border-radius:8px; padding:1.3rem 1.4rem}
.sell h2{margin-top:0}
.btn{
  display:inline-block; margin-top:.4rem; padding:.6rem 1.05rem; font-size:.9rem; font-weight:600;
  background:var(--ink); color:#fff; text-decoration:none; border-radius:5px;
}
.btn:hover{background:#000}

@media (max-width:640px){
  table.checks td.l{width:auto}
  table.checks thead{display:none}
  table.checks tr{display:grid; grid-template-columns:1.6rem 1fr; gap:0 .5rem; padding:.5rem 0; border-bottom:1px solid var(--rule)}
  table.checks td{border:0; padding:.1rem .2rem}
  table.checks td.c{grid-column:2}
  .facts dl{grid-template-columns:1fr; gap:.1rem}
  .facts dt{margin-top:.5rem}
  .scan{flex-direction:column}
}