@font-face { font-family: "Bricolage Grotesque"; src: url("/brand/fonts/bricolage-grotesque-var-latin.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; }
@font-face { font-family: "Hanken Grotesk"; src: url("/brand/fonts/hanken-grotesk-var-latin.woff2") format("woff2"); font-weight: 100 900; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #f3dec1; color: #271913;
  font: 500 17px/1.5 "Hanken Grotesk", system-ui, sans-serif; padding: 24px; }
.card { background: #f9f5eb; border-radius: 28px; padding: 40px 36px; width: 100%; max-width: 420px; box-shadow: 0 2px 0 rgba(39,25,19,.08); }
.card img { height: 44px; display: block; }
h1 { font: 800 44px/1 "Bricolage Grotesque"; font-stretch: 88%; letter-spacing: -.03em; margin: 28px 0 8px; }
h1 em { font-style: normal; color: #c43922; }
p { margin: 0 0 24px; color: #67574f; }
label { display: block; font-weight: 700; font-size: 15px; margin: 16px 0 6px; }
input { width: 100%; font: inherit; padding: 13px 16px; border-radius: 14px; border: 2px solid rgba(39,25,19,.18); background: #fff; }
input:focus { outline: none; border-color: #005f63; }
button { margin-top: 24px; width: 100%; font: 800 19px/1 "Bricolage Grotesque"; padding: 17px; border: 0; border-radius: 999px;
  background: #f05940; color: #271913; cursor: pointer; }
button:hover { background: #c43922; color: #f9f5eb; }
.err { background: #271913; color: #f9f5eb; border-radius: 12px; padding: 10px 14px; font-size: 15px; margin-top: 16px; display: none; }
label span { display: block; font-weight: 500; color: #67574f; font-size: 14px; }