:root {
  --account-bg: #07060d;
  --account-panel: #0d0a14ed;
  --account-panel-strong: #110c1a;
  --account-line: #a66bd638;
  --account-line-bright: #bf72f47a;
  --account-violet: #bf72f4;
  --account-violet-soft: #d5a3f8;
  --account-text: #f7f3fa;
  --account-muted: #9b91a4;
}

.account-page {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  background-color: var(--account-bg);
  background-image:
    linear-gradient(90deg, #07060df5 0%, #07060dbd 46%, #07060de8 100%),
    url('/assets/orbit-hero.webp');
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  color: var(--account-text);
}

.account-page::before,
.account-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.account-page::before {
  background:
    radial-gradient(circle at 13% 31%, #9f44e52b 0, transparent 28rem),
    radial-gradient(circle at 88% 62%, #4d147b2b 0, transparent 34rem),
    linear-gradient(180deg, transparent 0 68%, #07060d 94%);
}

.account-page::after {
  opacity: .16;
  background-image:
    linear-gradient(#d4a5f70e 1px, transparent 1px),
    linear-gradient(90deg, #d4a5f70e 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(90deg, #000 0, transparent 36%, transparent 72%, #000 100%);
}

.account-page a:focus-visible,
.account-page button:focus-visible,
.account-page input:focus-visible,
.account-page select:focus-visible,
.account-page textarea:focus-visible {
  outline: 2px solid #e1b4ff;
  outline-offset: 3px;
}

.account-header {
  width: min(1360px, calc(100% - 64px));
  min-height: 74px;
  margin-inline: auto;
  padding-inline: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid #bc7ced2e;
}

.account-header .brand img {
  width: 36px;
}

.account-header .brand-type {
  font-size: 17px;
}

.account-header .brand-type > span {
  font-size: 7px;
  margin-top: 5px;
}

.account-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  color: #b1a7ba;
  font-size: 11px;
}

.account-nav a,
.account-footer a,
.login-help a {
  transition: color .18s, border-color .18s, background .18s;
}

.account-nav a:hover,
.account-footer a:hover,
.login-help a:hover {
  color: #e0afff;
}

.account-nav-primary {
  min-height: 38px;
  padding: 9px 16px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--account-line-bright);
  border-radius: 8px;
  background: #1a1024b8;
  color: #f5eafb;
  box-shadow: inset 0 0 24px #8d37c40c;
}

.account-main {
  width: min(1320px, calc(100% - 64px));
  margin: 0 auto;
  padding: 34px 0 56px;
  display: grid;
  grid-template-columns: minmax(350px, .86fr) minmax(590px, 1.14fr);
  gap: 24px;
  align-items: start;
}

.account-intro,
.login-stage {
  position: sticky;
  top: 24px;
  min-height: 720px;
  padding: 38px 38px 28px;
  border: 1px solid var(--account-line);
  border-radius: 12px;
  background:
    linear-gradient(180deg, #0c0912b8 0%, #0a0710e8 100%),
    url('/assets/orbit-hero.webp') center / cover;
  box-shadow: 0 28px 100px #0008, inset 0 1px #ffffff0c;
  overflow: hidden;
}

.account-intro::before,
.login-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 48%, #c77afa14 48% 48.2%, transparent 48.2%),
    linear-gradient(transparent 0 54%, #c77afa14 54% 54.2%, transparent 54.2%);
  mask-image: linear-gradient(#000, transparent 77%);
}

.account-intro > *,
.login-stage > * {
  position: relative;
  z-index: 2;
}

.account-kicker,
.card-index {
  color: #bca4ca;
  font: 600 8px/1.4 'Golos Text', sans-serif;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.account-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-kicker > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--account-violet);
  box-shadow: 0 0 14px 3px #b95ff38f;
}

.account-intro h1,
.login-copy h1 {
  margin: 20px 0 16px;
  font-size: clamp(46px, 4.45vw, 67px);
  line-height: .98;
  letter-spacing: -.068em;
  white-space: normal;
}

.account-intro h1 em,
.login-copy h1 em {
  color: var(--account-violet);
}

.account-lead,
.login-copy > p:last-child {
  max-width: 400px;
  color: #afa6b7;
  font-size: 12px;
  line-height: 1.7;
}

.account-visual {
  height: 285px;
  margin: 20px -20px 8px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.visual-coordinate {
  position: absolute;
  z-index: 6;
  top: 14px;
  right: 18px;
  color: #8f769e;
  font: 500 7px/1 'Golos Text', sans-serif;
  letter-spacing: .2em;
}

.visual-orbit,
.login-orbit {
  position: absolute;
  border: 1px solid #c874f375;
  border-radius: 50%;
  box-shadow: inset 0 -4px 8px #a749df14, 0 0 24px #b45aec0f;
}

.visual-orbit-a {
  width: 112%;
  height: 42%;
  left: -6%;
  top: 36%;
  transform: rotate(-13deg);
}

.visual-orbit-b {
  width: 86%;
  height: 31%;
  left: 7%;
  top: 39%;
  transform: rotate(32deg);
  border-color: #ffffff20;
}

.account-visual-skin {
  position: absolute;
  z-index: 4;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 18px #000c) saturate(1.13) contrast(1.06);
}

.visual-skin-main {
  width: 95%;
  top: 1%;
  left: -4%;
  transform: rotate(-8deg);
}

.visual-skin-secondary {
  width: 45%;
  right: -4%;
  bottom: -4%;
  transform: rotate(22deg);
  opacity: .92;
}

.visual-brand,
.login-mark {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  border: 1px solid #d696ff5e;
  border-radius: 50%;
  background: #0b0712d9;
  box-shadow: inset 0 0 30px #8e39c538, 0 0 34px #b356ea30;
  backdrop-filter: blur(8px);
}

.visual-brand {
  width: 72px;
  height: 72px;
  left: 47%;
  bottom: 8%;
}

.visual-brand img,
.login-mark img {
  width: 48%;
  height: auto;
  opacity: .87;
}

.visual-beacon,
.login-beacon {
  position: absolute;
  z-index: 7;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #efd4ff;
  box-shadow: 0 0 20px 6px #bc66f58c;
}

.visual-beacon {
  right: 6%;
  top: 41%;
}

.account-proof {
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--account-line);
  border-left: 1px solid var(--account-line);
}

.account-proof > div {
  min-height: 64px;
  padding: 12px 14px;
  border-right: 1px solid var(--account-line);
  border-bottom: 1px solid var(--account-line);
  background: #110b19a8;
}

.account-proof dt {
  color: #aa9db5;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.account-proof dd {
  margin: 4px 0 0;
  color: #efe4f5;
  font-size: 11px;
  font-weight: 650;
  text-align: left;
}

.account-note {
  margin-top: 16px;
  color: #aa9db5;
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.account-workspace {
  min-width: 0;
}

.account-progress {
  min-height: 48px;
  margin-bottom: 10px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  border: 1px solid var(--account-line);
  border-radius: 9px;
  background: #0c0911dc;
  color: #746b7c;
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
}

.progress-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.progress-item b {
  color: #755f86;
  font: 500 9px/1 'Golos Text', sans-serif;
}

.progress-item.is-active {
  color: #eee4f4;
}

.progress-item.is-active b {
  color: var(--account-violet);
}

.progress-line {
  width: 82px;
  height: 1px;
  margin-inline: 14px;
  background: linear-gradient(90deg, #b860ef77, #ffffff10);
}

.account-card {
  position: relative;
  padding: clamp(26px, 3.2vw, 40px);
  border: 1px solid var(--account-line);
  border-radius: 12px;
  background: var(--account-panel);
  box-shadow: 0 28px 90px #0009, inset 0 1px #ffffff0c;
  backdrop-filter: blur(22px);
  overflow: hidden;
}

.account-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d99dffad 32%, #6d259957 70%, transparent);
}

.account-card::after {
  content: "+";
  position: absolute;
  right: 12px;
  bottom: 7px;
  color: #6e487f;
  font: 200 16px/1 'Golos Text', sans-serif;
}

.card-heading {
  margin-bottom: 26px;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  border-bottom: 1px solid #ffffff0f;
}

.card-heading h2,
.state-card h2,
.application-status h2 {
  margin-top: 8px;
  color: #f8f4fa;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 640;
  letter-spacing: -.045em;
}

.secure-mark {
  padding: 7px 9px 7px 21px;
  position: relative;
  border: 1px solid #6e9d7440;
  border-radius: 6px;
  background: #11201666;
  color: #87ae8e;
  font-size: 8px;
  white-space: nowrap;
}

.secure-mark::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7fd390;
  box-shadow: 0 0 9px #67d58a;
  transform: translateY(-50%);
}

.system-message,
.form-message {
  margin-bottom: 18px;
  padding: 11px 13px;
  border: 1px solid #a979c94d;
  border-radius: 8px;
  background: #211429d6;
  color: #ddcce7;
  font-size: 11px;
}

.form-message:empty {
  display: none;
}

.form-message-error {
  border-color: #ef758a5c;
  background: #2b121bd9;
  color: #ffc4cc;
}

.account-card fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.account-card legend {
  padding: 0;
  color: #f4edf8;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.fieldset-copy,
.state-card > p:not(.card-index),
.application-status > p {
  margin: 6px 0 20px;
  color: var(--account-muted);
  font-size: 11px;
  line-height: 1.65;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
}

#step-1 .field-wide {
  grid-column: auto;
}

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

.field-wide {
  grid-column: 1 / -1;
}

.field label,
.sign-in-mount label {
  color: #cfc4d5;
  font-size: 11px;
  font-weight: 650;
}

.field label span {
  margin-left: 4px;
  color: #aa9db5;
  font-size: 10px;
  font-weight: 450;
}

.field input,
.field select,
.field textarea,
.sign-in-mount input {
  width: 100%;
  min-height: 45px;
  padding: 11px 12px;
  border: 1px solid #9c6aba35;
  border-radius: 8px;
  background: #08060dcf;
  color: #faf6fc;
  caret-color: var(--account-violet);
  font: 500 12px/1.5 'Golos Text', sans-serif;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.field textarea {
  min-height: 118px;
  resize: vertical;
}

.field select {
  appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, #b989d3 50%),
    linear-gradient(135deg, #b989d3 50%, transparent 50%);
  background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field input:hover,
.field select:hover,
.field textarea:hover,
.sign-in-mount input:hover {
  border-color: #bb78e675;
  background-color: #0c0812;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.sign-in-mount input:focus {
  border-color: var(--account-violet);
  background-color: #0d0914;
  box-shadow: 0 0 0 3px #bf72f414, 0 0 28px #9c3bd10f;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #a69aaa;
}

.field small {
  color: #aa9db5;
  font-size: 10px;
}

.password-control {
  position: relative;
}

.password-control input {
  padding-right: 70px;
}

.password-toggle {
  position: absolute;
  right: 7px;
  top: 50%;
  padding: 6px;
  border: 0;
  background: transparent;
  color: #d0a5e4;
  font-size: 10px;
  cursor: pointer;
  transform: translateY(-50%);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #aaa0b0;
  font-size: 11px;
  line-height: 1.55;
  cursor: pointer;
}

.consent {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #ffffff0e;
}

.choice input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--account-violet);
}

.choice a {
  color: #d5a2f2;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.captcha-mount {
  min-height: 1px;
  margin-top: 16px;
}

.form-actions {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.form-actions-end {
  justify-content: flex-end;
}

.account-button,
.sign-in-mount button {
  min-height: 45px;
  padding: 11px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  border: 1px solid #d18efc;
  border-radius: 8px;
  background: var(--account-violet);
  color: #16091f;
  box-shadow: 0 10px 30px #9d39d226, inset 0 1px #ffffff4d;
  font: 760 11px/1.3 'Golos Text', sans-serif;
  cursor: pointer;
  transition: transform .18s, background .18s, box-shadow .18s, border-color .18s;
}

.account-button:hover,
.sign-in-mount button:hover {
  background: #d38bff;
  box-shadow: 0 13px 34px #a442dc42, inset 0 1px #ffffff66;
  transform: translateY(-1px);
}

.account-button:disabled,
.sign-in-mount button:disabled {
  cursor: wait;
  opacity: .58;
  transform: none;
}

.account-button-quiet {
  border-color: #a66bd642;
  background: #130d1a;
  color: #d9cedf;
  box-shadow: none;
}

.account-button-quiet:hover {
  border-color: #ba75e97a;
  background: #1b1125;
  box-shadow: none;
}

.state-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.state-card[hidden],
.application-status[hidden] {
  display: none;
}

.state-card > p:not(.card-index) {
  max-width: 520px;
  margin-top: 14px;
}

.state-card .form-actions {
  justify-content: flex-start;
}

.state-symbol {
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  display: grid;
  place-items: center;
  border: 1px solid #c17bed7a;
  border-radius: 50%;
  color: #dda8ff;
  box-shadow: 0 0 35px #b960ef24;
  font-size: 18px;
}

#verification-form {
  margin-top: 6px;
}

#verification-form .field {
  max-width: 330px;
}

.account-footer {
  width: min(1360px, calc(100% - 64px));
  min-height: 72px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-top: 1px solid #bc7ced24;
  color: #6f6676;
  font-size: 8px;
  letter-spacing: .09em;
}

.account-footer > div {
  display: flex;
  gap: 22px;
}

.account-footer .age {
  justify-self: end;
}

.login-main {
  width: min(1180px, calc(100% - 64px));
  min-height: calc(100svh - 146px);
  margin-inline: auto;
  padding: 34px 0 50px;
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(430px, 500px);
  align-items: stretch;
  gap: 18px;
}

.login-stage {
  position: relative;
  top: auto;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.login-visual.globe-scene {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 320px;
  aspect-ratio: 1.1;
  width: calc(100% + 40px);
  margin: -20px -20px 12px;
}

.login-visual .globe-toggle {
  right: 12px;
  bottom: 12px;
}

.login-card-tools,
.account-card-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.login-card-tools .secure-mark,
.account-card-tools .secure-mark {
  margin-top: 0;
}

.account-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid #765487;
  border-radius: 8px;
  background: #21152e;
  color: #f5eaff;
}

.account-close:hover {
  border-color: #d8a1f9;
  background: #352047;
}

.login-visual .visual-coordinate {
  top: 6px;
  right: 0;
}

.login-orbit-a {
  width: 96%;
  height: 34%;
  left: 2%;
  top: 32%;
  transform: rotate(-17deg);
}

.login-orbit-b {
  width: 82%;
  height: 29%;
  left: 8%;
  top: 34%;
  transform: rotate(34deg);
  border-color: #ffffff20;
}

.login-hero-skin,
.login-secondary-skin {
  position: absolute;
  z-index: 4;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 21px #000d) saturate(1.15) contrast(1.08);
}

.login-hero-skin {
  width: 104%;
  top: 12%;
  left: -8%;
  transform: rotate(-7deg);
}

.login-secondary-skin {
  width: 42%;
  right: -5%;
  top: 42%;
  transform: rotate(14deg);
}

.login-mark {
  width: 94px;
  height: 94px;
  left: 42%;
  top: 46%;
}

.login-beacon {
  right: 4%;
  top: 35%;
}

.login-copy {
  max-width: 410px;
  padding-bottom: 6px;
}

.login-copy h1 {
  font-size: clamp(49px, 5vw, 70px);
}

.login-card {
  min-height: 620px;
  align-self: stretch;
}

.sign-in-mount {
  min-height: 260px;
}

/* Clerk's rem-sized card must fit this panel, including enlarged browser text. */
.login-card .cl-rootBox,
.login-card .cl-cardBox {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.login-card .cl-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: 0;
  padding-inline: clamp(16px, 3vw, 28px);
}

.login-card .cl-headerTitle,
.login-card .cl-headerSubtitle,
.login-card .cl-footerAction {
  overflow-wrap: anywhere;
}

.sign-in-mount form {
  display: grid;
  gap: 15px;
}

.sign-in-mount label {
  display: grid;
  gap: 6px;
}

.sign-in-mount button {
  width: 100%;
  margin-top: 5px;
}

.application-status {
  padding-top: 4px;
}

.status-details {
  margin-top: 20px;
  border-top: 1px solid #ffffff10;
}

.status-details > * {
  padding: 12px 0;
  border-bottom: 1px solid #ffffff10;
}

.status-details a {
  color: #d7a4f5;
}

.login-help {
  margin-top: 22px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid #ffffff10;
  color: #7e7485;
  font-size: 9px;
}

.login-help a {
  color: #d0a1eb;
}

@media (max-width: 1120px) {
  .account-main {
    grid-template-columns: minmax(320px, .72fr) minmax(560px, 1.28fr);
    gap: 16px;
  }

  .account-intro {
    padding-inline: 28px;
  }

  .account-intro h1 {
    font-size: 48px;
  }

  .account-visual {
    margin-inline: -16px;
  }

  .visual-skin-main {
    width: 106%;
  }
}

@media (max-width: 920px) {
  .account-header,
  .account-footer,
  .account-main,
  .login-main {
    width: calc(100% - 40px);
  }

  .account-main,
  .login-main {
    grid-template-columns: 1fr;
  }

  .account-intro,
  .login-stage {
    position: relative;
    top: auto;
    min-height: 0;
  }

  .account-intro {
    display: grid;
    grid-template-columns: 1fr .82fr;
    gap: 0 24px;
    padding: 30px;
  }

  .account-intro .account-kicker,
  .account-intro h1,
  .account-intro .account-lead,
  .account-intro .account-proof,
  .account-intro .account-note {
    grid-column: 1;
  }

  .account-visual {
    grid-column: 2;
    grid-row: 1 / 6;
    height: 100%;
    min-height: 310px;
    margin: 0 -14px 0 0;
  }

  .account-proof {
    margin-top: 22px;
  }

  .login-main {
    gap: 14px;
  }

  .login-stage {
    min-height: 460px;
  }

  .login-card {
    min-height: 0;
    grid-row: 1;
  }

  .login-visual.globe-scene {
    flex: none;
    min-height: 0;
    height: clamp(240px, 58vw, 410px);
    aspect-ratio: auto;
  }

  .sign-in-mount:empty {
    min-height: 0;
  }
}

@media (max-width: 680px) {
  .account-header,
  .account-footer,
  .account-main,
  .login-main {
    width: calc(100% - 28px);
  }

  .account-header {
    min-height: 68px;
  }

  .account-header .brand img {
    width: 32px;
  }

  .account-header .brand-type {
    font-size: 15px;
  }

  .account-nav > a:first-child {
    display: none;
  }

  .account-nav-primary {
    min-height: 36px;
    padding-inline: 12px;
  }

  .account-main,
  .login-main {
    padding: 14px 0 34px;
  }

  .account-intro {
    display: block;
    padding: 20px 18px 17px;
  }

  .account-intro h1 {
    margin-block: 13px 10px;
    font-size: clamp(34px, 10vw, 40px);
  }

  .login-copy h1 {
    margin-block: 17px 13px;
    font-size: clamp(40px, 12vw, 52px);
  }

  .account-visual {
    display: none;
  }

  .account-proof {
    margin-top: 15px;
  }

  .account-proof > div {
    min-height: 52px;
    padding: 8px 10px;
  }

  .account-note {
    margin-top: 10px;
    margin-bottom: 0;
  }

  .account-lead {
    font-size: 11px;
    line-height: 1.55;
  }

  .account-progress {
    justify-content: space-between;
    padding-inline: 14px;
  }

  .progress-line {
    flex: 1;
    min-width: 24px;
    margin-inline: 10px;
  }

  .account-card {
    padding: 25px 20px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  #step-1 .field-wide,
  .field-wide {
    grid-column: auto;
  }

  .field input,
  .field select,
  .field textarea,
  .sign-in-mount input {
    font-size: 16px;
  }

  .login-stage {
    min-height: 390px;
    padding: 25px 22px;
  }

  .login-hero-skin {
    top: 8%;
  }

  .login-copy {
    padding-bottom: 0;
  }

  .account-footer {
    min-height: 98px;
    grid-template-columns: 1fr auto;
  }

  .account-footer > div {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .account-footer .age {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 420px) {
  .account-header,
  .account-footer,
  .account-main,
  .login-main {
    width: calc(100% - 20px);
  }

  .account-header .brand-type {
    font-size: 14px;
  }

  .account-progress {
    min-height: 44px;
  }

  .progress-item {
    font-size: 7px;
  }

  .account-intro {
    padding-inline: 18px;
  }

  .account-visual {
    height: 196px;
  }

  .visual-brand {
    width: 58px;
    height: 58px;
  }

  .account-proof > div {
    min-height: 58px;
    padding: 10px;
  }

  .account-proof dd {
    font-size: 9px;
  }

  .card-heading {
    display: block;
  }

  .secure-mark {
    display: inline-block;
    margin-top: 12px;
  }

  .form-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .form-actions-end {
    flex-direction: column;
  }

  .account-button {
    width: 100%;
  }

  .login-stage {
    min-height: 350px;
  }

  .login-help {
    flex-direction: column;
  }
}

@media (min-width: 361px) and (max-width: 420px) {
  .account-card {
    padding-top: 19px;
  }

  .card-heading {
    display: flex;
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  .secure-mark {
    margin-top: 0;
  }

  .form-message {
    margin-bottom: 10px;
  }

  .fieldset-copy {
    margin-bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-nav a,
  .account-footer a,
  .account-button,
  .sign-in-mount button,
  .field input,
  .field select,
  .field textarea {
    transition: none;
  }
}

.local-auth-qr {
  display: block;
  width: 224px;
  max-width: 100%;
  height: auto;
  margin: 20px auto;
  border-radius: 8px;
}

.local-auth-manual { margin: 16px 0; }
.local-auth-manual summary { cursor: pointer; padding: 10px 0; }
.local-auth-manual code { display: block; overflow-wrap: anywhere; padding: 12px; user-select: all; }