/**
 * Kinetic Slack opt-in — Mercury design layer.
 *
 * Every value below was sampled off the real Mercury log-in screen
 * (nicelydone screen 9a01ceb6-004b-4803-9ba0-5c99f18c42df, 2x retina — all
 * geometry here is the halved, logical value). Nothing eyeballed:
 *
 *   card      540 -> 972 px  = 432 wide, top 169.5 -> bottom 598.5, radius 12, padding 40
 *   inputs    352 wide x 40 tall, radius 8, 1px #E0E1FA border, #FCFCFE fill
 *   button    40 tall, pill, disabled #CED4F6 / enabled #475CE1 (sampled off the
 *             "Send invite" modal, screen 1e9ab5e3-7ebf-42b3-9541-432177360ebc)
 *   checkbox  16 square, radius 4, #D8D8E8 border, #4C68EB when checked
 *   ink       heading #1D1D2A, labels #4C4C67
 *
 * Mercury's own face is Circular (licensed) — Figtree is the closest open match,
 * same swap agency-dash makes.
 */

:root {
  /* ground */
  --ground: #dbddec;
  --ground-lit: #e6e8f3;
  --ground-deep: #d0d2e6;

  /* card */
  --card-top: #f8f9fc;
  --card-bottom: #fbfbfd;

  /* ink */
  --ink: #1d1d2a;
  --ink-label: #4c4c67;
  --ink-soft: #565674;
  --ink-mute: #8a8aa3;

  /* controls */
  --line: #e0e1fa;
  --line-check: #d8d8e8;
  --field: #fcfcfe;
  --accent: #4c68eb;
  --accent-btn: #475ce1;
  --accent-btn-hover: #3b4fd4;
  --btn-off: #ced4f6;
  --btn-off-ink: #fafbfd;
  --danger: #c21877;

  --radius-card: 12px;
  --radius-field: 8px;
}

* { box-sizing: border-box; }

/* .btn sets display:inline-flex, which would otherwise beat the UA [hidden] rule */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: #d6d6fd; color: var(--ink); }

/* ============================ ground ============================ */

.ground {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(90% 65% at 4% 2%, var(--ground-lit) 0%, rgba(230, 232, 243, 0) 46%),
    radial-gradient(85% 65% at 98% 98%, #e3e5f1 0%, rgba(226, 228, 240, 0) 52%),
    linear-gradient(165deg, #e3e5f1 0%, #d4d6e8 36%, var(--ground) 70%, #dfe1ee 100%);
}

/* the soft organic shapes Mercury floats behind the card.
   They drift — slowly enough that you notice the field has changed rather than
   catching anything move. Only transform is animated, so it composites on the
   GPU and the 90px blur is rasterised once. */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.75;
  will-change: transform;
  animation: drift-a 38s ease-in-out infinite alternate;
}
.blob-1 { width: 40vw; height: 36vw; left: -10vw; top: -14vw; background: #eceefa; opacity: 0.45;
          animation: drift-a 36s ease-in-out infinite alternate; }
.blob-2 { width: 62vw; height: 40vw; left: 22vw;  top: -18vw; background: #cbcee5; opacity: 0.7;
          animation: drift-b 47s ease-in-out infinite alternate; }
.blob-3 { width: 60vw; height: 48vw; left: 12vw;  bottom: -22vw; background: #e8eaf5;
          animation: drift-c 42s ease-in-out infinite alternate; animation-delay: -12s; }
.blob-4 { width: 38vw; height: 34vw; right: 4vw;  bottom: -8vw;  background: #ccd0e8; opacity: 0.55;
          animation: drift-d 51s ease-in-out infinite alternate; animation-delay: -30s; }
.blob-5 { width: 32vw; height: 30vw; left: 2vw;   top: 22vh;     background: #eaecf6; opacity: 0.65;
          animation: drift-b 33s ease-in-out infinite alternate; animation-delay: -20s; }

@keyframes drift-a {
  0%   { transform: none; }
  50%  { transform: translate3d(10vw, 7vh, 0) scale(1.18); }
  100% { transform: translate3d(-6vw, 14vh, 0) scale(1.06); }
}
@keyframes drift-b {
  0%   { transform: none; }
  50%  { transform: translate3d(-11vw, 10vh, 0) scale(1.12); }
  100% { transform: translate3d(7vw, -6vh, 0) scale(0.9); }
}
@keyframes drift-c {
  0%   { transform: none; }
  50%  { transform: translate3d(12vw, -9vh, 0) scale(0.88); }
  100% { transform: translate3d(-9vw, -4vh, 0) scale(1.16); }
}
@keyframes drift-d {
  0%   { transform: none; }
  50%  { transform: translate3d(-8vw, -11vh, 0) scale(1.2); }
  100% { transform: translate3d(11vw, 5vh, 0) scale(0.96); }
}

/* ============================= card ============================= */

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.card {
  width: 432px;
  max-width: 100%;
  padding: 40px;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%);
  box-shadow:
    0 1px 2px rgba(31, 32, 48, 0.05),
    0 28px 56px -28px rgba(31, 32, 48, 0.22);
}

/* ============================= type ============================= */

.title {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
  overflow-wrap: break-word;
}

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

.note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ink-mute);
}

.error {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--danger);
}
.error-form { margin-top: 12px; }

/* ============================ fields ============================ */

form { margin-top: 26px; }

.field { margin-bottom: 18px; }

.label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  color: var(--ink-label);
}

.field input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:hover { border-color: #d3d5f7; }

.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(76, 104, 235, 0.16);
}

.field input.invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(194, 24, 119, 0.12);
}

/* honeypot */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================== checkbox =========================== */

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.check .box {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid var(--line-check);
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.check .box svg { opacity: 0; }

.check input:checked + .box {
  background: var(--accent);
  border-color: var(--accent);
}
.check input:checked + .box svg { opacity: 1; }

.check input:focus-visible + .box {
  box-shadow: 0 0 0 3px rgba(76, 104, 235, 0.22);
}

.check-text {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* ============================ button ============================ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: 26px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-btn);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn:hover { background: var(--accent-btn-hover); }
.btn:active { transform: translateY(1px); }

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(76, 104, 235, 0.28);
}

.btn:disabled {
  background: var(--btn-off);
  color: var(--btn-off-ink);
  cursor: default;
  transform: none;
}

.btn.busy .btn-label { visibility: hidden; }
.btn.busy .spinner { display: block; }

.spinner {
  display: none;
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================= done ============================= */

.tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--accent);
}

.done-email {
  font-weight: 500;
  color: var(--ink);
  word-break: break-all;
}

.btn-link {
  text-decoration: none;
  margin-top: 24px;
}

/* ============================ mobile ============================ */

@media (max-width: 520px) {
  .stage { padding: 24px 16px; align-items: flex-start; padding-top: 12vh; }
  .card { padding: 28px 22px; border-radius: 14px; }
  .title { font-size: 27px; }
  .field input { height: 46px; font-size: 16px; } /* 16px keeps iOS from zooming */
  .btn { width: 100%; height: 46px; }
  .blob { filter: blur(60px); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .blob { animation: none !important; transform: none !important; }
}