:root{
  --ink:#14171C; --ink-soft:#4B5158; --paper:#F7F6F3; --panel:#FFFFFF;
  --line:#E1DFD7; --line-strong:#C9C6BC; --blue:#2A5C8A; --blue-soft:#E8EFF5;
  --brass:#C8A15A; --red:#A93636; --red-soft:#F8E9E9;
  --sans:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --disp:"Archivo Narrow","Inter",-apple-system,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  font-family:var(--sans);background:var(--ink);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  padding:24px calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  -webkit-font-smoothing:antialiased;
}
.card{
  background:var(--paper);border-radius:14px;width:100%;max-width:360px;
  padding:32px 28px 24px;box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
}
.mark{display:flex;flex-direction:column;gap:5px;width:38px;margin-bottom:18px;}
.mark span{height:6px;border-radius:2px;background:var(--brass);}
.mark span:nth-child(2){width:62%;}
h1{font-family:var(--disp);font-size:26px;font-weight:700;margin:0;letter-spacing:.01em;}
.sub{font-size:12.5px;color:var(--ink-soft);margin:4px 0 26px;}

label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px;
}
.who{display:flex;gap:8px;margin-bottom:20px;}
.who-opt{flex:1;margin:0;text-transform:none;letter-spacing:0;}
.who-opt input{position:absolute;opacity:0;pointer-events:none;}
.who-opt span{
  display:block;text-align:center;padding:11px 8px;border-radius:8px;
  border:1px solid var(--line-strong);background:var(--panel);
  font-size:15px;font-weight:600;color:var(--ink-soft);cursor:pointer;
}
.who-opt input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.who-opt input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px;}

input[type=password]{
  width:100%;font-family:var(--sans);font-size:16px; /* 16px stops iOS zooming */
  padding:12px 13px;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--panel);color:var(--ink);margin-bottom:20px;
}
input[type=password]:focus{outline:2px solid var(--blue-soft);border-color:var(--blue);}

.btn{
  width:100%;font-family:var(--sans);font-size:15px;font-weight:600;
  padding:13px;border-radius:8px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer;
}
.btn:disabled{opacity:.6;cursor:default;}

.err{
  margin:14px 0 0;padding:10px 12px;border-radius:7px;
  background:var(--red-soft);border:1px solid var(--red);color:var(--red);
  font-size:13px;
}
.foot{margin:22px 0 0;font-size:11.5px;color:var(--ink-soft);text-align:center;}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}