/* Reset + base */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#2b2b2b;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

:root{
  --muted:#8e8e8e;
  --border:#e7e7e7;
  --focus:#111;       /* black focus ring */
  --btn-disabled:#cfcfcf;
  --input-bg:#fff;
  --radius:14px;
  --container: min(820px, 92vw);
}

/* Decorative dot like the mock */
.decor-dot{
  position:fixed;
  top:28px; left:28px;
  width:44px; height:44px;
  border-radius:999px;
  background:#d9d9d9;
}

/* Layout */
.wrap{
  width:var(--container);
  margin:72px auto 120px;
}

.page-head{
  text-align:center;
  margin-bottom:34px;
}
.page-head h1{
  margin:0 0 8px;
  font-size:clamp(26px, 4.4vw, 36px);
  font-weight:700;
  letter-spacing:.2px;
}
.muted{ color:var(--muted); }
.page-head a{ color:#111; text-decoration:underline; }

/* Form */
.signup{
  display:block;
}
.field{
  display:block;
  margin-bottom:22px;
}
.label{ display:block; font-size:14px; color:#5a5a5a; margin:10px 0 10px; }
.label-row{
  display:flex; align-items:center; justify-content:space-between;
  margin:10px 0 10px;
}
.pw-toggle{
  display:inline-flex; align-items:center; gap:10px;
  border:none; background:transparent; color:#8e8e8e;
  cursor:pointer; padding:4px 2px; font:inherit;
}

.input{
  width:100%;
  padding:18px 18px;
  border:1.6px solid var(--border);
  border-radius:12px;
  background:var(--input-bg);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s;
  font-size:16px;
}
.input::placeholder{ color:#b7b7b7; }
.input:focus{
  border-color:#bdbdbd;
  box-shadow:0 0 0 3px rgba(17,17,17,.08);
}

.help{ display:block; margin-top:8px; font-size:12px; }

/* TOS line */
.tos{ font-size:14px; margin:20px 0 18px; }
.tos a{ color:#111; }

/* Submit button */
.submit{
  width:100%;
  border:none;
  border-radius:32px;
  padding:18px 24px;
  font-weight:600;
  font-size:18px;
  color:#fff;
  background:var(--btn-disabled);        /* gray by default */
  cursor:not-allowed;
  transition: background .15s ease, transform .02s ease;
}
.submit.is-enabled{
  background:#000;                       /* full black when valid */
  cursor:pointer;
}
.submit.is-enabled:hover{ background:#111; }
.submit.is-enabled:active{ transform:translateY(1px); }

/* Responsive */
@media (max-width:640px){
  .wrap{ margin:56px auto 80px; }
  .decor-dot{ width:36px; height:36px; top:20px; left:20px; }
}