:root { --cream: #f1eee7; --ink: #1d1e20; --muted: #555; --green: #2f4a3d; --line: #cfcac0; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--cream); color: var(--ink); font: 17px/1.55 Lora, Georgia, serif; min-height: 100vh; display: flex; flex-direction: column; }
header { padding: 20px 16px; text-align: center; }
header img { height: 46px; width: auto; }
.hero { position: relative; min-height: 220px; background: #333 url(hero.jpeg) center 30% / cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .25); }
main { flex: 1; width: 100%; max-width: 520px; margin: -90px auto 40px; padding: 0 16px; position: relative; z-index: 1; }
.card { background: #fff; border-radius: 16px; padding: 32px 26px; box-shadow: 0 16px 50px rgba(0, 0, 0, .12); }
.eyebrow { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin: 0 0 8px; }
h1 { font-size: 32px; line-height: 1.2; margin: 0 0 12px; font-weight: 600; }
p { margin: 0 0 16px; color: var(--muted); }
label { display: block; font-size: 15px; margin: 14px 0 5px; color: var(--ink); }
input { width: 100%; font: 17px/1.4 Lora, Georgia, serif; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfaf7; color: var(--ink); }
input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
button, .btn { display: block; text-align: center; text-decoration: none; margin-top: 20px; width: 100%; padding: 15px; border: 0; border-radius: 50px; background: #000; color: #fff; font: 16px Lora, Georgia, serif; cursor: pointer; }
button:disabled { opacity: .6; cursor: default; }
.small { font-size: 13px; margin: 14px 0 0; }
.error { color: #a12a2a; font-size: 14px; margin-top: 10px; min-height: 1em; }
.hp { position: absolute; left: -9999px; }
.code { border: 2px dashed var(--green); border-radius: 12px; padding: 18px; text-align: center; margin: 20px 0; }
.code strong { display: block; font-size: 30px; color: var(--green); }
footer { text-align: center; font-size: 14px; padding: 20px 16px 28px; color: var(--muted); }
footer a { color: inherit; }