* {
  box-sizing:border-box;
  margin:0;
  padding:0
}
:root {
  --sq-black:#1a1a1a;
  --sq-text:#1a1a1a;
  --sq-border:#ccc;
  --sq-border-focus:#1a1a1a;
  --sq-secondary-bg:#efefef;
  --sq-secondary-bg-hover:#e5e5e5;
  --sq-muted:#6b6b6b;
  --sq-error:#cc0023;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family:Square Sans Text,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif
}
body {
  color:var(--sq-text);
  background:#fff
}
.page {
  flex-direction:column;
  min-height:100vh;
  display:flex
}
.topbar {
  padding-top: 48px!important;
  padding-left: 25px!important;
  padding:24px 28px
}
.sq-logo-wrapper {
  align-items:center;
  gap:8px;
  display:inline-flex
}
.sq-logo-wrapper svg {
  display:block
}
.sq-logo-alt {
  clip:rect(0 0 0 0);
  white-space:nowrap;
  width:1px;
  height:1px;
  position:absolute;
  overflow:hidden
}
.content {
  flex:1;
  justify-content:center;
  align-items:center;
  padding:24px;
  display:flex
}
.split {
  flex:1;
  grid-template-columns:1fr 868px;
  min-height:100vh;
  display:grid
}
.split-left {
  border-right:1px solid #e6e6e6;
  flex-direction:column;
  display:flex;
  position:relative
}
.split-left .topbar {
  position:absolute;
  top:0;
  left:0
}
.split-body {
  flex:1;
  justify-content:center;
  align-items:center;
  padding: 24px 48px;
  display:flex
}
.split-body .card {
  width: 100%;
  max-width: 640px;
  padding-bottom: 10%;
}
.split-right {
  justify-content:center;
  align-items:center;
  padding-top: 20px!important;
  padding: 48px 64px;
  display:flex
}
@media (width<=1100px) {
  .split {
    grid-template-columns:1fr
  }
  .split-right {
    display:none
  }
}
.card {
  width:100%;
  max-width:640px
}
.title {
  letter-spacing:-.02em;
  margin-bottom:14px;
  font-size:25px;
  line-height: 32px;
  font-weight:700
}
.subtitle {
  color:var(--sq-text);
  margin-bottom:30px;
  font-size:16px;
  font-weight:500
}
.link {
  color:var(--sq-text);
  text-underline-offset:2px;
  font-weight:600;
  text-decoration:underline
}
.form {
  flex-direction:column;
  gap:20px;
  display:flex
}
.field {
  border:1px solid var(--sq-border);
  border-radius:6px;
  height:62px;
  transition:border-color .15s,box-shadow .15s;
  position:relative
}
.field.is-focused {
  border-color:var(--sq-border-focus);
  box-shadow:0 0 0 1px var(--sq-border-focus)
}
.field.is-error {
  border-color:var(--sq-error);
  box-shadow:0 0 0 1px var(--sq-error)
}
.field.is-error .field-label {
  color:var(--sq-error)
}
.field-label {
  color:var(--sq-muted);
  pointer-events:none;
  font-size:16px;
  transition:top .15s,font-size .15s,transform .15s,color .15s;
  position:absolute;
  top:50%;
  left:18px;
  transform:translateY(-50%)
}
.field.is-floated .field-label {
  color:var(--sq-text);
  font-size:13px;
  font-weight:700;
  top:11px;
  transform:translateY(0)
}
.field-input {
  width:100%;
  height:100%;
  color:var(--sq-text);
  background:0 0;
  border:none;
  border-radius:6px;
  outline:none;
  padding:24px 18px 6px;
  font-family:inherit;
  font-size:16px;
  position:absolute;
  inset:0
}
.field:not(.is-floated) .field-input {
  padding:0 18px
}
.field-with-action .field-input {
  padding-right:52px
}
.field-action {
  width:34px;
  height:34px;
  color:var(--sq-muted);
  cursor:pointer;
  background:0 0;
  border:none;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  display:inline-flex;
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%)
}
.field-action:hover {
  color:var(--sq-text)
}
.link-button {
  font:inherit;
  cursor:pointer;
  background:0 0;
  border:none;
  padding:0
}
.forgot-link {
  align-self:flex-start;
  font-weight:700
}
.form-actions {
  justify-content:flex-end;
  margin-top:8px;
  display:flex
}
.btn-inline {
  width:auto;
  min-width:96px;
  padding:0 28px
}
.subtitle-block {
  margin-bottom:10px;
  line-height:1.5
}
.resend-link {
  margin-bottom:26px;
  font-weight:700;
  display:inline-block
}
.form-code {
  gap:24px
}
.code-box {
  border:1px solid var(--sq-border-focus);
  border-radius:6px;
  align-items:center;
  height:62px;
  display:flex;
  overflow:hidden
}
.code-input {
  text-align:center;
  min-width:0;
  height:100%;
  color:var(--sq-text);
  caret-color:var(--sq-text);
  background:0 0;
  border:none;
  outline:none;
  flex:1;
  font-family:inherit;
  font-size:20px;
  font-weight:600
}
.code-input::placeholder {
  color:#b8b8b8;
  font-size:22px
}
.remember-row {
  cursor:pointer;
  justify-content:space-between;
  align-items:center;
  display:flex
}
.remember-text {
  font-size:16px
}
.remember-checkbox {
  opacity:0;
  pointer-events:none;
  position:absolute
}
.remember-box {
  border:1px solid var(--sq-border-focus);
  color:#0000;
  border-radius:6px;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:24px;
  height:24px;
  display:inline-flex
}
.remember-checkbox:checked+.remember-box {
  background:var(--sq-black);
  border-color:var(--sq-black);
  color:#fff
}
.form-actions-split {
  justify-content:space-between
}
.help-link {
  margin-top:28px;
  font-weight:700;
  display:inline-block
}
.btn {
  cursor:pointer;
  border:none;
  border-radius:999px;
  justify-content:center;
  align-items:center;
  gap:8px;
  width:100%;
  height:58px;
  font-family:inherit;
  font-size:17px;
  font-weight:700;
  transition:background-color .15s;
  display:inline-flex
}
.btn.btn-inline {
  flex:none;
  width:auto
}
.field-error {
  color:var(--sq-error);
  align-items:center;
  gap:7px;
  margin-top:-12px;
  font-size:14px;
  font-weight:500;
  display:flex
}
.field-error-icon {
  flex-shrink:0
}
.field-error-spaced {
  margin-bottom:12px
}
.btn-primary {
  background:var(--sq-black);
  color:#fff
}
.btn-primary:hover {
  background:#000
}
.btn-primary:disabled {
  background:var(--sq-secondary-bg);
  color:#9a9a9a;
  cursor:default
}
.btn-primary.is-loading {
  background:var(--sq-black);
  cursor:default
}
.spinner {
  border:2.5px solid #ffffff59;
  border-top-color:#fff;
  border-radius:50%;
  width:20px;
  height:20px;
  animation:.7s linear infinite spin
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
.btn-secondary {
  background:var(--sq-secondary-bg);
  color:var(--sq-text)
}
.btn-secondary:hover {
  background:var(--sq-secondary-bg-hover)
}
.passkey-icon {
  display:block
}
.divider {
  text-align:center;
  align-items:center;
  margin:20px 0;
  display:flex
}
.divider:before,
.divider:after {
  content:"";
  background:#e2e2e2;
  flex:1;
  height:1px
}
.divider-text {
  color:var(--sq-text);
  padding:0 14px;
  font-size:15px;
  font-weight:500
}
.tips-panel {
  width:100%;
  max-width:804px
}
.tips-stage {
  --item-h:52px;
  --slot:260px;
  background:#1a1a1a;
  border-radius:0px;
  height:620px;
  position:relative;
  aspect-ratio: 1/1;
  flex-shrink: 1;
  min-height: 0;
  container-type: inline-size;
  width: 100%;
  overflow:hidden
}
.tips-ticker-mask {
  position:absolute;
  inset:0;
  overflow:hidden
}
.tips-ticker {
  box-sizing:border-box;
  will-change:transform;
  flex-direction:column;
  padding-left:48px;
  padding-right:340px;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  display:flex;
  position:absolute;
  top:0;
  left:0;
  right:0
}
.tips-ticker.no-anim {
  transition:none
}
.tips-ticker-item {
  height:var(--item-h);
  letter-spacing:-.01em;
  color:#3a3a3a;
  white-space:nowrap;
  align-items:center;
  font-size:30px;
  font-weight:700;
  line-height:1.1;
  transition:color .5s;
  display:flex;
  overflow:hidden
}
.tips-ticker-item.is-active {
  color:#fff
}
.tips-screenshots {
  width:260px;
  height:180px;
  position:absolute;
  top:50%;
  right:40px;
  transform:translateY(-50%)
}
.tips-screenshot {
  object-fit:contain;
  opacity:0;
  width:100%;
  height:100%;
  transition:opacity .5s;
  position:absolute;
  inset:0
}
.tips-screenshot.is-active {
  opacity:1
}
.tips-content {
  margin-top:28px
}
.tips-heading {
  letter-spacing:-.01em;
  margin-bottom:12px;
  font-size:32px;
  line-height: 40px;
  font-weight:600
}
.tips-subtext {
  color:#4a4a4a;
  margin-bottom:24px;
  font-size: 19px;
  font-weight: 400;
  line-height: 28px;
}
.tips-cta {
  width:100%
}
@media (height<=720px) {
  .tips-stage {
    --slot:200px;
    height:480px
  }
}