.signin-main { padding-block-start: 0; background: var(--color-canvas); }

.signin-hero {
  display: flex;
  min-height: 309px;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 130px 72px 64px;
  text-align: center;
}

.signin-hero__title {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: 300;
  line-height: 64px;
  letter-spacing: -.015em;
}

.signin-hero__title em { color: var(--color-accent); font-weight: 300; }
.signin-hero__intro { margin: 0; color: var(--color-warm-grey); font-size: var(--font-size-body-lg); line-height: 31px; }

.signin-steps { padding: 0 24px 150px; }
.signin-steps__inner {
  display: grid;
  width: min(100%, 1028px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-inline: auto;
}

.signin-step {
  display: flex;
  min-width: 0;
  min-height: 481px;
  flex-direction: column;
  align-items: flex-start;
  padding: 42px 43px 31px;
  border: 1px solid #dcd8d0;
  border-radius: 20px;
  background: var(--color-surface);
}

.signin-step__eyebrow {
  margin: 0 0 24px;
  color: var(--color-accent);
  font-size: var(--font-size-section-meta);
  font-weight: 500;
  line-height: 15px;
  letter-spacing: .18em;
  white-space: nowrap;
}

.signin-field { display: flex; width: 100%; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.signin-field label { color: var(--color-warm-grey); font-size: var(--font-size-caption); font-weight: 500; line-height: 15px; }
.signin-field input {
  display: block;
  width: 100%;
  height: 58px;
  padding: 16px 18px;
  border: 1px solid #8f8b84;
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: 1.7;
  transition: border-color 140ms ease-out, box-shadow 140ms ease-out;
}
.signin-field input::placeholder { color: var(--color-warm-grey); opacity: 1; }
.signin-field input:hover { border-color: #8f8b84; }
.signin-field input:focus { border-color: var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: 2px; }

.signin-action { width: 100%; min-height: 46px; cursor: default; }
.signin-action:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.signin-action:active { transform: none; }

.signin-text-action {
  display: inline-flex;
  height: 22px;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  padding: 0;
  border-bottom: 1px solid rgb(26 26 21 / 35%);
  color: var(--color-ink);
  font-size: var(--font-size-supporting-text);
  font-weight: 500;
  line-height: 21px;
  cursor: default;
}
.signin-text-action__arrow { color: var(--color-accent); }
.signin-text-action:focus-visible { outline-color: var(--color-accent); }
.signin-step--password a.signin-text-action { cursor: pointer; }

.signin-step__note { width: 100%; margin: 23px 0 0; color: var(--color-warm-grey); font-size: var(--font-size-supporting-text); line-height: 17px; }
.signin-step__instruction { margin: 0 0 24px; color: var(--color-warm-grey); font-size: var(--font-size-body-compact); line-height: 26px; }

.signin-code { display: grid; width: 398px; max-width: 100%; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.signin-code input {
  width: 100%;
  height: 64px;
  padding: 0;
  border: 1px solid #8f8b84;
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 24px;
  text-align: center;
  caret-color: var(--color-accent);
  transition: border-color 140ms ease-out, transform 120ms ease-out;
}
.signin-code input:first-child { border: 2px solid var(--color-accent); }
.signin-code input:first-child:placeholder-shown:not(:focus) {
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2px 22px;
}
.signin-code input:focus { border: 2px solid var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: 2px; }
.signin-code input.is-filled { animation: signin-code-fill 120ms ease-out; }
@keyframes signin-code-fill { 50% { transform: scale(1.06); } }

.signin-step--code .signin-text-action { margin-top: 24px; }
.signin-step--code .signin-step__note { margin-top: 24px; }
.signin-steps__divider { display: none; }
.signin-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

html.signin-motion-boot .signin-hero__title,
html.signin-motion-boot .signin-hero__intro { opacity: 0; transform: translateY(16px); }

@media (max-width: 1100px) {
  .signin-step { padding-inline: 28px; }
  .signin-code { width: 100%; }
}

@media (max-width: 900px) {
  .signin-hero { min-height: 0; align-items: flex-start; gap: 0; padding: 64px 24px 24px; text-align: left; }
  .signin-hero__title { font-size: var(--font-size-heading-compact); line-height: 42px; }
  .signin-hero__intro { display: none; }
  .signin-steps { padding: 0 24px 80px; }
  .signin-steps__inner { display: flex; max-width: 600px; flex-direction: column; gap: 0; }
  .signin-step { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .signin-step__eyebrow { margin-bottom: 24px; font-size: var(--font-size-label-xs); line-height: 12px; }
  .signin-step__eyebrow--password, .signin-step__note, .signin-text-action--resend { display: none; }
  .signin-steps__divider { display: block; height: 1px; margin: 24px 0; background: #dcd8d0; }
  .signin-code { width: 326px; margin-bottom: 24px; }
  .signin-code input { height: 56px; }
  .signin-text-action { margin-top: 24px; }
}

@media (max-width: 340px) {
  .signin-code { width: 100%; gap: 1px; }
  .signin-hero__title { font-size: var(--font-size-heading-ultra-narrow); }
}

@media (prefers-reduced-motion: reduce) {
  .signin-code input, .signin-field input, .signin-action { animation: none; transition: none; }
}