:root{
  --bg:#0e1116; --card:#161b22; --line:#252c36; --ink:#e6edf3; --dim:#9aa7b4;
  --good:#3fb950; --bad:#f0883e; --acc:#4c8dff; --accd:#2f6fe0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow-wrap:break-word;
}
.wrap{width:100%; max-width:860px; margin:0 auto; padding:0 18px}

/* hero */
.hero{padding:34px 0 26px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#131922,var(--bg))}
.brandrow{display:flex; align-items:center; gap:10px; margin-bottom:18px}
.brand{font-weight:700; letter-spacing:-.01em; font-size:17px}
.badge{background:var(--good); color:#06210c; font-size:11px; font-weight:800; padding:2px 7px; border-radius:5px; letter-spacing:.06em}
h1{font-size:29px; line-height:1.2; letter-spacing:-.02em; margin:0 0 14px}
.sub{color:var(--dim); margin:0 0 16px; font-size:16px}
.privacy{font-size:14px; color:var(--dim); background:#112a17; border:1px solid #1e4527; border-left:3px solid var(--good); padding:11px 13px; border-radius:8px; margin:0}
.privacy strong{color:var(--good)}

main{padding:26px 0 10px}

/* dropzone */
.drop{
  border:2px dashed #33404f; border-radius:14px; padding:34px 18px; text-align:center;
  cursor:pointer; background:#12171e; transition:border-color .15s,background .15s;
}
.drop:hover,.drop:focus,.drop.over{border-color:var(--acc); background:#141d2b; outline:none}
.drop-ico{font-size:34px; line-height:1}
.drop-main{font-weight:600; margin-top:10px; font-size:16px}
.drop-sub{color:var(--dim); font-size:13.5px; margin-top:5px}

.or{text-align:center; color:var(--dim); font-size:14.5px; margin:16px 0}
.or a{color:var(--acc)}
a{color:var(--acc)}

.paste-wrap{margin:6px 0 4px; border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--card)}
.paste-wrap summary{cursor:pointer; color:var(--dim); font-size:14.5px}
textarea{
  width:100%; margin-top:11px; background:#0d1117; color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:10px; font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; resize:vertical;
}

.err{background:#3d1519; border:1px solid #6e2730; color:#ffbdc4; padding:12px 14px; border-radius:9px; margin:16px 0; font-size:14.5px}

/* cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:18px; margin:18px 0}
.card h2{font-size:19px; margin:0 0 6px; letter-spacing:-.01em}
.note{color:var(--dim); font-size:14px; margin:6px 0 12px}
.empty{color:var(--dim); font-size:14.5px; font-style:italic}

/* tiles */
.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:11px; margin:18px 0}
.tile{background:var(--card); border:1px solid var(--line); border-radius:11px; padding:13px}
.tile-label{color:var(--dim); font-size:12px; text-transform:uppercase; letter-spacing:.05em}
.tile-value{font-size:22px; font-weight:700; margin-top:4px; letter-spacing:-.02em}
.tile-sub{color:var(--dim); font-size:12.5px; margin-top:2px}
.tile.good .tile-value{color:var(--good)}
.tile.bad .tile-value{color:var(--bad)}
.card .tile{margin:4px 0 14px}

/* tables — scroll horizontally on phones rather than squashing */
.tbl{width:100%; border-collapse:collapse; font-size:14.5px; margin-top:10px}
.tbl th{text-align:left; color:var(--dim); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; padding:6px 8px; border-bottom:1px solid var(--line); font-weight:600}
.tbl td{padding:8px; border-bottom:1px solid #1d232c}
.tbl tr:last-child td{border-bottom:none}
.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.mono-l{word-break:break-word}
td.good{color:var(--good)} td.bad{color:var(--bad)}

/* category bars */
.bar-row{margin:12px 0}
.bar-top{display:flex; justify-content:space-between; gap:10px; font-size:14px; margin-bottom:5px}
.bar-name{font-weight:600}
.bar-val{color:var(--dim); white-space:nowrap; font-variant-numeric:tabular-nums; font-size:13px}
.bar-track{height:8px; background:#0d1117; border-radius:5px; overflow:hidden}
.bar-fill{height:100%; background:linear-gradient(90deg,var(--accd),var(--acc)); border-radius:5px}

/* buttons */
.btn{
  display:inline-block; background:var(--accd); color:#fff; border:none; border-radius:9px;
  padding:11px 18px; font-size:15px; font-weight:600; cursor:pointer; text-decoration:none; margin-top:10px;
}
.btn:hover{background:var(--acc)}
.btn-sm{padding:9px 14px; font-size:14px}
.btn-pro{background:var(--good); color:#06210c}
.btn-pro:hover{background:#56d06a}
.btn-big{display:block; text-align:center; padding:14px; font-size:16.5px; margin-top:16px}
.linkbtn{background:none; border:none; color:var(--acc); text-decoration:underline; cursor:pointer; padding:0; font-size:14px; font-family:inherit}

/* pro lock */
.lock{background:#0d1117; border:1px dashed #33404f; border-radius:10px; padding:15px; margin-top:14px; text-align:center}
.lock-t{margin:0 0 4px; font-size:14.5px; color:var(--dim)}
.lock .btn{margin:8px 0 6px}
.lock .linkbtn{display:block}

.ticks{margin:10px 0 4px; padding-left:0; list-style:none}
.ticks li{padding-left:26px; position:relative; margin:8px 0; font-size:15px}
.ticks li::before{content:"✓"; position:absolute; left:4px; color:var(--good); font-weight:700}
.ticks.plain li::before{content:"·"; font-size:20px; line-height:1; top:-1px}
.list{margin:10px 0; padding-left:20px; font-size:14.5px}
.list li{margin:5px 0}

.unlock{margin-top:14px; background:#0d1117; border:1px solid var(--line); border-radius:10px; padding:14px}
.unlock label{display:block; font-size:13px; color:var(--dim); margin-bottom:7px}
.unlock-in{display:flex; flex-direction:column; gap:8px}
.unlock input,.rules input{
  width:100%; background:#0e1116; color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:11px; font-size:16px; font-family:inherit;
}
.unlock .btn{margin-top:0}
.rules{margin-top:14px; display:flex; flex-direction:column; gap:8px}
.rules .btn{align-self:flex-start; margin-top:2px}

.pitch{border-color:#2c4a33; background:linear-gradient(180deg,#15201a,var(--card))}

.sub-h{font-size:15px; margin:26px 0 0; color:var(--dim); font-weight:600; border-top:1px solid var(--line); padding-top:16px}

.how{margin:10px 0 0}
.how dt{font-weight:600; margin-top:14px; font-size:15px}
.how dd{margin:5px 0 0; color:var(--dim); font-size:14.5px}

.foot{padding:26px 18px 40px; color:var(--dim); font-size:13.5px; border-top:1px solid var(--line); margin-top:26px}
.foot p{margin:4px 0}
.tiny{font-size:12.5px; opacity:.75}

@media (min-width:620px){
  h1{font-size:37px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .hero{padding:52px 0 38px}
  .card{padding:22px}
  .drop{padding:46px 24px}
  .unlock-in{flex-direction:row}
  .unlock-in input{flex:1}
  .rules{flex-direction:row; flex-wrap:wrap}
  .rules input{flex:1; min-width:190px}
  .rules .note{width:100%; margin:0}
  .btn-big{display:inline-block; padding:14px 30px}
}