:root{
  --off-white:#F2F1E9; --charcoal:#282828; --taupe:#9B8C7C; --stone:#D7D2C8;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--off-white); color:var(--charcoal);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; font-size:16px;
}
.wrap{max-width:760px; margin:0 auto; padding:56px 22px 96px}
header{border-bottom:1px solid var(--stone); padding-bottom:24px; margin-bottom:40px}
.brand{font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--taupe); margin:0 0 14px}
h1{font-size:30px; line-height:1.2; margin:0 0 10px; font-weight:600}
.sub{color:var(--taupe); font-size:14px; margin:0}
h2{font-size:19px; margin:44px 0 12px; font-weight:600; scroll-margin-top:20px}
h3{font-size:16px; margin:24px 0 8px; font-weight:600; color:#3d3d3d}
p{margin:0 0 14px}
ul,ol{margin:0 0 16px; padding-left:22px}
li{margin:0 0 8px}
a{color:var(--charcoal); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--taupe)}
strong{font-weight:600}
.intro{font-size:16.5px}
.back{display:inline-block; font-size:14px; color:var(--taupe); text-decoration:none; margin-bottom:26px}
.back:hover{color:var(--charcoal)}
footer{margin-top:56px; padding-top:22px; border-top:1px solid var(--stone); font-size:13px; color:var(--taupe)}
/* form (reset password) */
.card{max-width:440px; margin:0 auto}
label{display:block; font-size:14px; font-weight:600; margin:18px 0 6px}
input[type=password]{
  width:100%; padding:13px 14px; font-size:16px; border:1px solid var(--stone);
  border-radius:10px; background:#fff; color:var(--charcoal);
}
input:focus{outline:none; border-color:var(--taupe)}
button{
  width:100%; margin-top:24px; padding:14px; font-size:15px; font-weight:600;
  color:var(--off-white); background:var(--charcoal); border:none; border-radius:10px;
  cursor:pointer; letter-spacing:.02em;
}
button:disabled{opacity:.55; cursor:default}
.msg{margin-top:18px; font-size:14px; padding:12px 14px; border-radius:10px; display:none}
.msg.err{display:block; background:#f6e5e2; color:#8a2b1f}
.msg.ok{display:block; background:#e6ede4; color:#2f5133}
.center{text-align:center}
@media (max-width:480px){ .wrap{padding:36px 18px 72px} h1{font-size:25px} }