/* Account screens — login, registration, verify-email, reset-password.
 * A split screen on the desktop frames: photography on the left, the form on the
 * right; stacked on the mobile frames. These pages carry no site footer. */

.account { display: flex; min-height: 100vh; background: var(--color-ink); }

/* ── left: the photograph ─────────────────────────────────────────────── */
/* isolate: the photo sits at z-index -2 and the scrim at -1. Without a stacking
   context of its own here they would both fall behind .account's background and
   the panel would render as a flat dark block. */
.account__visual {
  position: relative; isolation: isolate; z-index: 0;
  width: 60%; flex: none; overflow: hidden;
  padding: 48px 64px 64px; color: var(--color-white);
}
.account__photo, .account__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.account__photo { z-index: -2; }
.account__photo img { object-fit: cover; }
.account__visual::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(10 14 26 / .45), rgb(10 14 26 / .8));
}
.account__logo { position: relative; font-family: var(--font-display); font-size: 28px; line-height: 38px; letter-spacing: 0; }
.account__logo { --logo-mark: inline-flex; --logo-c: transparent; }
.account__logo .logo__mark { display: inline-flex; align-items: flex-end; width: 15px; height: 22px; margin-left: -15px; color: var(--color-accent); }
.account__logo .logo__mark .icon { width: 15px; height: 20px; }

.account__visual-bottom { position: absolute; left: 64px; right: 64px; bottom: 64px; display: grid; gap: var(--space-32); }
.account__visual-h {
  font-family: var(--font-display); font-size: 96px; font-weight: 700; line-height: 88px;
  text-transform: uppercase;
}
.account__visual-meta { display: flex; gap: var(--space-40); }
.account__visual-meta span { display: grid; gap: var(--space-4); font-size: var(--fs-ui); line-height: 17px; }
.account__visual-meta b { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-accent); }
/* footnote-stack на фото: метка Archivo Narrow 12 и текст Geist 11/16, ширина 260. */
.account__note-light { display: grid; gap: var(--space-8); max-width: 260px; }
.account__note-light b {
  font-family: var(--font-display); font-size: var(--fs-meta); font-weight: 700; line-height: 16px;
}
.account__note-light span { font-size: var(--fs-label); line-height: 16px; }

.account__inset {
  position: absolute; right: 16px; top: 407px; z-index: 1;
  width: 160px; height: 210px; border-radius: var(--radius-sm); overflow: hidden;
}
.account__inset img { width: 100%; height: 100%; object-fit: cover; }

/* ── right: the form ──────────────────────────────────────────────────── */
.account__panel {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-40);
  padding: 48px 88px; background: var(--color-cream);
}
.account__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted);
}
.account__top .link-brand { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; }
.account__core { display: grid; gap: var(--space-32); max-width: 440px; width: 100%; }
.account__head { display: grid; gap: var(--space-12); }
.account__h {
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: 68px;
  text-transform: uppercase; color: var(--color-ink);
}
.account__lede { font-size: 17px; line-height: 26px; color: var(--color-muted); }

.account__form { display: grid; gap: var(--space-24); }
.account__form .field input { height: 60px; border-radius: var(--radius-lg); border-color: transparent; background: var(--color-white); }
.account__form .field input:focus { border-color: var(--color-brand); }
.field__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.field__aside {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-size: var(--fs-meta); font-weight: 700; line-height: 16px; color: var(--color-brand);
}
.field__aside:hover { text-decoration: underline; }
.field__with-action { position: relative; display: block; }
.field__toggle {
  position: absolute; right: var(--space-16); top: 50%; translate: 0 -50%;
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-size: var(--fs-ui); font-weight: 700; line-height: 17px; color: var(--color-brand);
}
.account__rule { margin-block: var(--space-8); }
.account__alt { display: grid; gap: var(--space-16); }
.account__alt-text { display: grid; gap: var(--space-4); }
.account__alt-text b { font-size: var(--fs-body-sm); font-weight: 700; line-height: 18px; color: var(--color-ink); }
.account__alt-text span { font-size: var(--fs-body-sm); line-height: 18px; color: var(--color-muted); }
.account__alt .btn { height: 52px; border-radius: var(--radius-xl); }
.account__form .btn--lg { border-radius: var(--radius-xl); height: 62px; }

.account__footnote { max-width: 440px; display: grid; gap: var(--space-8); font-size: var(--fs-meta); line-height: 18px; color: var(--color-muted); }
.account__footnote b { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-ink); }

/* The verify frame splits the screen 605 / 835 rather than 792 / 648. */
.account--verify .account__visual { width: 42.014%; }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .account { flex-direction: column; min-height: 0; }
  .account__visual { width: auto; height: 340px; padding: var(--space-24) var(--container-pad-mobile); }
  /* The mobile verify frame drops the photograph for a compact brand bar. */
  .account--verify .account__visual {
    width: auto; height: 90px; display: flex; align-items: center;
    padding: var(--space-24) var(--container-pad-mobile); background: var(--color-brand);
  }
  .account--verify .account__photo,
  .account--verify .account__visual-bottom { display: none; }
  .account--verify .account__visual::before { display: none; }
  .account__visual-bottom { left: var(--container-pad-mobile); right: var(--container-pad-mobile); bottom: var(--space-24); gap: var(--space-16); }
  .account__visual-h { font-size: 44px; line-height: 44px; }
  .account__visual-meta { gap: var(--space-24); }
  .account__inset { display: none; }

  .account__panel { gap: var(--space-24); padding: var(--space-24) var(--container-pad-mobile) var(--space-32); }
  .account__core { max-width: none; gap: var(--space-24); }
  .account__h { font-size: 40px; line-height: 44px; }
  .account__lede { font-size: var(--fs-body-sm); line-height: 22px; }
  .account__form .field input { height: 52px; }
  .account__form .btn--lg { height: 54px; }
  .account__footnote { max-width: none; }
}