/* ── Plain screens: entrar, código, o teu espaço (design 8a–8c) ──────────── */
.plain {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 16px) var(--gutter) calc(env(safe-area-inset-bottom) + 28px);
}
.plain--verniz { background: var(--verniz); color: var(--card); }

.brand { font: 800 22px var(--font-display); padding-top: 8px; }
.brand__dot { color: var(--verniz); }
.plain--verniz .brand__dot { color: var(--ink); }
.brand-row { display: flex; justify-content: space-between; align-items: center; }

.swatches { display: flex; gap: 10px; margin-top: 56px; }
.swatch { width: 56px; height: 56px; border-radius: 50%; }
.swatch--1 { background: var(--wine); }
.swatch--2 { background: var(--hue-1); }
.swatch--3 { background: var(--hue-3); }
.swatch--4 { background: var(--pending); }
.swatch--5 { background: var(--porcelain); }

.hero-title { margin: 26px 0 0; font: 800 40px/1.02 var(--font-display); letter-spacing: -.02em; }
.hero-lede { margin: 14px 0 0; font: 400 16px/1.5 var(--font-body); opacity: .9; }

.plain__bottom { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 32px; }
.plain__note { margin: 4px 0 0; font: 400 12px/1.5 var(--font-body); opacity: .8; text-align: center; }
.plain__note--muted { color: var(--muted); opacity: 1; font-size: 14px; }
.kicker--on-color { color: var(--card); opacity: .85; }

/* Email + arrow in one white pill (design 8a). */
.input-go {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 7px 0 18px;
  border-radius: var(--radius-pill);
  background: var(--card);
}
.input-go__field {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 600 17px var(--font-body);
}
.input-go__button {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--card);
  font-size: 18px;
  cursor: pointer;
}

/* The code: one field drawn large, letters spaced like the six boxes. */
.code-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.code-input {
  width: 100%;
  height: 72px;
  border: 2px solid var(--verniz);
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  text-align: center;
  font: 700 32px var(--font-display);
  letter-spacing: .4em;
}
.code-input:focus { outline: 0; box-shadow: 0 0 0 4px var(--verniz-wash); }