:root {
  --bg: #fafaf9;
  --bg-elev: #ffffff;
  --ink: #0a0a0a;
  --ink-soft: #44403c;
  --ink-muted: #78716c;
  --line: #e7e5e4;
  --line-strong: #d6d3d1;
  --accent: #0a0a0a;
  --imessage: #1f8aff;
  --imessage-press: #1773d6;
  --bubble: #e9e9eb;
  --danger: #b91c1c;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04), 0 1px 1px rgba(10, 10, 10, 0.03);
  --shadow-md: 0 1px 2px rgba(10, 10, 10, 0.04), 0 8px 28px -12px rgba(10, 10, 10, 0.18);
  --shadow-lg: 0 10px 40px -12px rgba(10, 10, 10, 0.22);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0c0d;
    --bg-elev: #141416;
    --ink: #f5f5f4;
    --ink-soft: #d6d3d1;
    --ink-muted: #a8a29e;
    --line: #27272a;
    --line-strong: #3f3f46;
    --accent: #f5f5f4;
    --bubble: #2a2a2d;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px -12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 10px 40px -12px rgba(0, 0, 0, 0.7);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 40px);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(31, 138, 255, 0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(10, 10, 10, 0.04), transparent 60%),
    var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.15s ease, color 0.15s ease;
}

a:hover {
  border-color: var(--ink);
}

.shell {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--bg);
}

.brand__name {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: default;
}

/* Cards — stacked in the same grid cell so the wrapper takes the height
   of whichever step is tallest. Both steps therefore render at the same
   size, with the inactive one fading out behind the active one. */
.cards {
  display: grid;
  animation: card-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.cards > .card {
  grid-area: 1 / 1;
}

.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.card--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step {
  padding: clamp(24px, 5vw, 36px);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Push the last element of each step to the bottom (fineprint on step 1,
   back button on step 2) so primary actions sit at the same vertical
   position across steps. */
.step > :last-child {
  margin-top: auto;
}

.title {
  margin: 0;
  font-size: clamp(22px, 4.4vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  font-weight: 600;
  color: var(--ink);
}

.lede {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.fineprint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
}

.fineprint a {
  border-bottom-color: var(--line);
}

/* Form */
.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

.field input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 13px 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.field input::placeholder {
  color: var(--ink-muted);
  opacity: 0.7;
}

.field input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.06);
}

@media (prefers-color-scheme: dark) {
  .field input:focus {
    box-shadow: 0 0 0 4px rgba(245, 245, 244, 0.08);
  }
}

.field--invalid input {
  border-color: var(--danger);
}

.field__error {
  font-size: 12px;
  color: var(--danger);
  min-height: 1em;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius);
  padding: 14px 18px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

.btn:active {
  transform: scale(0.985);
}

.btn--primary {
  background: var(--accent);
  color: var(--bg);
}

.btn--primary:hover {
  background: var(--ink-soft);
}

.btn--imessage {
  background: var(--imessage);
  color: #fff;
  box-shadow: 0 8px 24px -10px rgba(31, 138, 255, 0.55);
  border-color: transparent;
}

.btn--imessage:hover {
  background: var(--imessage-press);
}

.btn--imessage .btn__bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.btn--ghost {
  background: transparent;
  color: var(--ink-muted);
  border-color: var(--line);
  align-self: flex-start;
  padding: 10px 14px;
  font-size: 13px;
}

.btn--ghost:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.kbd {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--bubble);
  color: var(--ink);
  padding: 1px 6px;
  border-radius: 5px;
}

/* Footer */
.foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-muted);
}

.foot a {
  border-bottom: none;
}

.foot a:hover {
  color: var(--ink);
}

.foot__dot {
  opacity: 0.6;
}

/* Modal */
.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: scrim-in 0.2s ease both;
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: panel-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.modal__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.modal__lede {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.modal__actions .btn--ghost {
  align-self: auto;
}

@keyframes scrim-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
  pointer-events: none;
}

.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}