/* Mobile first: base styles are for phones; larger screens are added at the bottom. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#0E0E10;color:#F2F2F0;font-family:Roboto,system-ui,sans-serif;line-height:1.5;font-size:16px}
main{max-width:640px;margin:0 auto;padding:8px 16px 64px}
.top{max-width:640px;margin:0 auto;padding:16px}
.logo{font-weight:900;font-size:20px;letter-spacing:-.5px}.logo span{color:#C6FF3D}
.hero{padding:32px 0 8px}
.kicker{font-family:'Roboto Mono',monospace;font-size:12px;letter-spacing:2px;color:#C6FF3D;margin-bottom:10px}
h1{font-size:40px;line-height:1.05;font-weight:900;letter-spacing:-1px;margin:0 0 12px}
h2{font-size:26px;line-height:1.15;font-weight:900;letter-spacing:-.5px;margin:0 0 8px}
.muted{color:#B8B8B4}.small{font-size:13px}.mono{font-family:'Roboto Mono',monospace;word-break:break-all}
.card{background:#17171A;border-radius:18px;padding:20px 16px;display:flex;flex-direction:column;gap:10px;margin-top:16px}
.center{text-align:center;align-items:center}
label{font-size:15px;color:#D6D6D2;margin-top:10px}
/* 16px+ inputs stop iPhones zooming in */
input,select,textarea{width:100%;min-height:52px;background:#0E0E10;border:1px solid #3A3A3E;border-radius:12px;padding:14px;color:#F2F2F0;font:inherit;font-size:16px}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid #C6FF3D;outline-offset:1px}
button,.btn{width:100%;min-height:56px;background:#C6FF3D;color:#0E0E10;border:0;border-radius:999px;padding:16px 24px;font-weight:700;font-size:17px;cursor:pointer;text-align:center;text-decoration:none;margin-top:14px;display:block}
fieldset{border:0;padding:0;margin:18px 0 4px}
legend{font-weight:500;font-size:16px;margin-bottom:8px;padding:0}
/* Whole option is a big tap target */
.opt{display:flex;gap:12px;align-items:center;margin:8px 0;padding:14px;border:1px solid #2A2A2E;border-radius:14px;color:#F2F2F0;min-height:56px;cursor:pointer}
.opt:has(input:checked){border-color:#C6FF3D;background:#1D2112}
.opt input{width:22px;height:22px;min-height:0;margin:0;flex:none;accent-color:#C6FF3D}
.error{background:#3A1414;color:#FFB4A8;padding:12px;border-radius:10px;margin:0}
.progress{display:flex;gap:6px;position:sticky;top:0;background:#0E0E10;padding:10px 0;z-index:2}
.progress span{flex:1;height:4px;border-radius:4px;background:#2A2A2E}.progress .on{background:#C6FF3D}
.big{font-size:64px;color:#C6FF3D;line-height:1}
.hp{position:absolute;left:-9999px}
footer{max-width:640px;margin:0 auto;padding:20px 16px;color:#9A9A96;font-size:14px;border-top:1px solid #222226}

/* Tablets and laptops */
@media (min-width:700px){
  main,.top,footer{max-width:720px;padding-left:24px;padding-right:24px}
  h1{font-size:60px}
  h2{font-size:30px}
  .card{padding:28px}
  button,.btn{width:auto;display:inline-block}
}