:root { color-scheme: light; font-family: system-ui, sans-serif; color: #2d1d1a; background: #f7efe8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #f7efe8; }
main { width: min(100%, 960px); text-align: center; padding: 1.5rem; }
.landing img { display: block; width: 100%; max-height: 78vh; object-fit: contain; border-radius: 1rem; box-shadow: 0 1rem 3rem #50352b33; }
.landing a, button { display: inline-block; margin-top: 1rem; border: 0; border-radius: 999px; padding: .75rem 1.25rem; background: #ef6c38; color: white; font: inherit; text-decoration: none; cursor: pointer; }
.card { width: min(96vw, 38rem); padding: 2rem; background: #fffaf5; border: 1px solid #ead8cc; border-radius: 1rem; box-shadow: 0 1rem 3rem #50352b1a; text-align: left; }
.card .mark { display: block; width: min(100%, 18rem); margin: 0 auto 1.5rem; }
.card h1, .card p { text-align: center; }
.card h1 { font-size: clamp(1rem, 3.2vw, 1.55rem); line-height: 1.2; white-space: nowrap; letter-spacing: -.02em; }
.card .tagline { margin-top: -.5rem; color: #735e55; font-size: .7rem; }
label { display: block; margin-top: 1rem; font-weight: 650; }
input { display: block; width: 100%; margin-top: .4rem; padding: .7rem; border: 1px solid #cdbbb0; border-radius: .5rem; font: inherit; }
button { width: 100%; }
.error { color: #a42c1d; }