:root {
  color-scheme: dark;
  --black: #050505;
  --panel: #0c0c0d;
  --white: #f5f5f3;
  --muted: #9a9a9a;
  --red: #ef2b1d;
  --line: #262629;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--black); }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 72% 18%, #25100d 0, var(--black) 31rem); color: var(--white); }
button, input { font: inherit; }
main { min-height: 100vh; padding: clamp(1.25rem, 3vw, 2.5rem); }
.shell { min-height: calc(100vh - clamp(2.5rem, 6vw, 5rem)); display: flex; flex-direction: column; max-width: 1280px; margin: 0 auto; border: 1px solid var(--line); background: linear-gradient(145deg, rgb(255 255 255 / 2%), transparent 45%); }
.brand { display: flex; align-items: center; min-height: 7.2rem; padding: .35rem clamp(1.25rem, 3vw, 2.2rem); border-bottom: 1px solid var(--line); overflow: hidden; }
.brand img { display: block; width: clamp(16rem, 34vw, 28rem); height: auto; margin: -2.8% 0; }
.content { width: min(100%, 850px); margin: auto 0; padding: clamp(3.5rem, 9vw, 8rem) clamp(1.25rem, 8vw, 7rem); }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.6rem; color: var(--red); font-size: .75rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 2.7rem; height: 2px; background: currentColor; }
h1 { max-width: 760px; margin: 0; font: 600 clamp(3rem, 8vw, 7.5rem)/.88 "Helvetica Neue", Arial, sans-serif; letter-spacing: -.065em; }
.lede { max-width: 640px; margin: 2rem 0 0; color: #b9b9b9; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.65; }
form { max-width: 660px; margin-top: 2.7rem; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: .35rem; border: 1px solid #353538; background: var(--panel); }
input { min-width: 0; border: 0; outline: 0; padding: 1rem 1.1rem; background: transparent; color: var(--white); }
input::placeholder { color: #737377; }
input:focus-visible { box-shadow: inset 0 0 0 2px var(--white); }
button { min-height: 3.4rem; border: 0; padding: .8rem 1.3rem; background: var(--red); color: white; font-weight: 800; cursor: pointer; transition: background .15s ease, transform .15s ease; }
button:hover { background: #ff3829; transform: translateY(-1px); }
button:disabled { cursor: wait; opacity: .65; transform: none; }
.fine-print, .status { min-height: 1.2rem; margin: .8rem 0 0; color: #737377; font-size: .75rem; }
.status { color: var(--white); }
.status.success { color: #78d49b; }
.status.error { color: #ff746a; }
footer { display: flex; justify-content: space-between; padding: 1.1rem clamp(1.25rem, 3vw, 2.2rem); border-top: 1px solid var(--line); color: #66666b; font-size: .65rem; font-weight: 700; letter-spacing: .18em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 620px) {
  main { padding: 0; }
  .shell { min-height: 100vh; border-width: 0; }
  .brand { min-height: 6rem; padding-block: 0; }
  .brand img { width: min(21rem, 94vw); margin-block: -2%; }
  .content { padding-top: 4rem; padding-bottom: 4rem; }
  h1 { font-size: clamp(3rem, 15vw, 5.2rem); }
  .field-row { grid-template-columns: 1fr; gap: .35rem; }
  button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}