:root {
  --bg: #f7f8fa;
  --ink: #0e1014;
  --soft: #646975;
  --faint: #9a9ea8;
  --line: #d9dce2;
  --cobalt: #2d5bff;
  --pale: #eef2ff;
  --error: #d0442c;
  --radius: 10px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: Geist, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
input, button { font: inherit; }

.logo { width: 184px; height: 184px; cursor: pointer; margin: 0 auto 56px; }
.logo.small { width: 120px; height: 120px; margin-bottom: 40px; }

h1 {
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.04;
  letter-spacing: -.04em;
}
.sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--soft);
  text-wrap: pretty;
}
.fine { font-size: 13px; color: var(--faint); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 28px;
  font-size: 15px; font-weight: 500; text-decoration: none;
  background: var(--ink); color: #fff; border: 0; border-radius: var(--radius); cursor: pointer;
  transition: background .2s;
}
.btn:hover { background: var(--cobalt); }

.field {
  height: 52px; padding: 0 18px;
  font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); outline: none;
  transition: border-color .2s;
}
.field:focus { border-color: var(--ink); }
.field::placeholder { color: var(--faint); }

@media (max-width: 560px) {
  .logo { width: 136px; height: 136px; margin-bottom: 40px; }
  .logo.small { width: 104px; height: 104px; margin-bottom: 32px; }
  .sub { font-size: 16px; }
}