:root {
  --sgpm-login-css-ready:1;
  --red:#f3545d;
  --red-dark:#c73140;
  --ink:#262733;
  --muted:#666671;
  --line:#e5e2e2;
  --paper:#fff;
  --radius:26px;
  color-scheme:light;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:auto;
}
body {
  margin:0;
  background:#24131b;
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
button,input,a {
  -webkit-tap-highlight-color:transparent;
}
button,input {
  font:inherit;
}
button,a {
  touch-action:manipulation;
}
button {
  cursor:pointer;
}
a {
  color:inherit;
}
button:focus-visible,a:focus-visible,[tabindex="-1"]:focus-visible {
  outline:3px solid var(--red);
  outline-offset:5px;
}
body:before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:linear-gradient(105deg,rgba(30,13,22,.87),rgba(48,12,24,.45)),var(--login-background) center/cover no-repeat;
}
.brand-top {
  position:fixed;
  z-index:2;
  left:clamp(22px,5vw,80px);
  right:clamp(22px,5vw,80px);
  top:28px;
  display:flex;
  align-items:center;
  gap:14px;
  color:white;
}
.brand-top__logo {
  width:68px;
  height:68px;
  object-fit:contain;
}
.brand-top__text {
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.5;
}
.brand-top__text span {
  display:block;
  font-size:11px;
  font-weight:400;
  letter-spacing:.04em;
  color:#e2d5d9;
}
.top-access {
  margin-left:auto;
  text-decoration:none;
  font-size:13px;
  padding:12px 19px;
  border:1px solid #ffffff50;
  border-radius:30px;
}
.top-access:hover {
  background:#ffffff15;
}
.top-access span {
  margin-left:14px;
}
.container {
  height:150vh;
  height:150svh;
  pointer-events:none;
}
.scroll-down {
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:130px 24px 36px;
  color:white;
}
.eyebrow {
  font-size:11px;
  letter-spacing:.25em;
  font-weight:600;
  color:#ffd1d5;
}
.scroll-down__title {
  font-size:clamp(44px,6.5vw,88px);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.065em;
  margin:25px 0 22px;
}
.scroll-down__title em {
  font-style:normal;
  color:#ffadb3;
}
.scroll-down__subtitle {
  font-size:clamp(14px,1.5vw,17px);
  line-height:1.7;
  color:#e7dce0;
  max-width:490px;
}
.welcome-access {
  display:flex;
  align-items:center;
  gap:36px;
  padding:17px 25px;
  background:white;
  color:#542531;
  border-radius:40px;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  margin:28px 0 32px;
  box-shadow:0 10px 40px #0002;
  transition:transform .2s;
}
.welcome-access:hover {
  transform:translateY(-3px);
}
.scroll-caption {
  font-size:11px;
  letter-spacing:.04em;
  color:#e0cdd2;
}
.scroll-down__icon {
  width:30px;
  height:30px;
  fill:#efc9cf;
  margin-top:12px;
  animation:float 2.5s ease-in-out infinite;
}
@keyframes float {
  50% {
    transform:translateY(7px);
  }
}
.modal {
  position:fixed;
  inset:0;
  z-index:5;
  display:none;
  align-items:center;
  justify-content:center;
  padding:30px;
  background:rgba(24,12,18,.68);
  overflow:auto;
  overscroll-behavior:contain;
}
.modal.is-open {
  display:flex;
}
.modal-container {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%;
  max-width:1050px;
  margin:auto;
  background:white;
  border-radius:var(--radius);
  box-shadow:0 28px 100px #10071166;
  outline:none;
  animation:arrive .45s cubic-bezier(.2,.8,.2,1) both;
  overflow:hidden;
}
.modal-left {
  padding:38px clamp(26px,4vw,52px) 32px;
  min-width:0;
}
.modal-brand {
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:32px;
}
.modal-brand__logo {
  width:44px;
  height:44px;
  object-fit:contain;
}
.modal-brand__name {
  font-size:19px;
  font-weight:700;
  letter-spacing:-.04em;
}
.modal-brand__sub {
  font-size:11px;
  color:var(--muted);
  margin-top:3px;
}
.form-eyebrow {
  font-size:9px;
  color:var(--red-dark);
  letter-spacing:.14em;
  font-weight:700;
}
.modal-title {
  font-size:clamp(28px,3vw,37px);
  font-weight:600;
  letter-spacing:-.05em;
  line-height:1.15;
  margin:10px 0;
}
.modal-desc {
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  margin:0 0 23px;
}
.input-block {
  margin-bottom:17px;
}
.input-label {
  display:block;
  font-size:12px;
  font-weight:600;
  margin-bottom:8px;
}
.input-block input {
  width:100%;
  min-width:0;
  height:49px;
  border:1px solid var(--line);
  border-radius:11px;
  padding:0 14px;
  font-size:16px;
  color:var(--ink);
  background:#fcfbfb;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.input-block input:focus {
  border-color:var(--red);
  box-shadow:0 0 0 3px #f3545d18;
  background:white;
}
.input-block input::placeholder {
  color:#8b8790;
  font-size:14px;
}
.password-wrap {
  position:relative;
}
.password-wrap input {
  padding-right:52px;
}
.toggle-pass {
  position:absolute;
  right:3px;
  top:3px;
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  border-radius:9px;
}
.toggle-pass:hover {
  background:#f3545d10;
}
.eye {
  width:20px;
  height:20px;
  fill:#666671;
}
.toggle-pass[aria-pressed="true"] .eye-open,.toggle-pass[aria-pressed="false"] .eye-off {
  display:none;
}
.modal-actions {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:20px;
}
.link-muted {
  font-size:12px;
  text-align:right;
  text-decoration:none;
  padding:3px 0;
  color:#65545b;
}
.link-muted:hover {
  text-decoration:underline;
  color:var(--red-dark);
}
.btn-primary {
  border:0;
  border-radius:11px;
  min-height:49px;
  padding:13px 18px;
  background:var(--red-dark);
  color:white;
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 7px 17px #c731401a;
  transition:background .2s,transform .2s;
}
.btn-primary:hover {
  background:#ae2937;
  transform:translateY(-1px);
}
.btn-primary:disabled {
  opacity:.65;
  cursor:wait;
  transform:none;
}
.divider {
  display:flex;
  align-items:center;
  gap:12px;
  color:#8a8185;
  font-size:11px;
  margin:19px 0;
}
.divider:before,.divider:after {
  content:"";
  height:1px;
  background:var(--line);
  flex:1;
}
.btn-google {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:47px;
  border:1px solid var(--line);
  border-radius:11px;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  background:white;
}
.btn-google:hover {
  background:#faf6f6;
  border-color:#cbbdc1;
}
.btn-google__icon,.btn-google__icon svg {
  display:block;
  width:19px;
  height:19px;
}
.hint {
  font-size:11px;
  color:var(--muted);
  line-height:1.55;
  text-align:center;
  margin:12px 0 0;
}
.login-alert {
  padding:13px 15px;
  margin:0 0 20px;
  border:1px solid #eec6cb;
  border-left:3px solid var(--red-dark);
  border-radius:10px;
  color:#8b2735;
  background:#fff3f4;
  font-size:13px;
  line-height:1.6;
}
.caps-hint {
  color:#8b5a12;
  font-size:12px;
  margin:0 0 12px;
}
.caps-hint[hidden] {
  display:none;
}
.modal-right {
  position:relative;
  min-width:0;
  background:#ede7dd;
  overflow:hidden;
}
.modal-right:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#191a2625 0%,transparent 30%,#191a2610 55%,#191a26d9 100%);
  pointer-events:none;
}
.modal-right img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.picture-label {
  position:absolute;
  z-index:1;
  left:28px;
  top:29px;
  display:flex;
  align-items:center;
  gap:7px;
  background:#ffffffeb;
  border:1px solid #fff9;
  border-radius:30px;
  padding:10px 12px;
  font-size:8px;
  letter-spacing:.12em;
  font-weight:700;
}
.picture-dot {
  height:6px;
  width:6px;
  border-radius:50%;
  background:var(--red);
}
.picture-caption {
  position:absolute;
  z-index:1;
  bottom:40px;
  left:34px;
  right:24px;
  color:white;
}
.picture-caption>span {
  font-size:9px;
  letter-spacing:.16em;
  color:#f8dfe3;
}
.picture-caption h2 {
  font-size:34px;
  line-height:1.14;
  letter-spacing:-.045em;
  font-weight:600;
  margin:15px 0;
}
.picture-caption p {
  font-size:12px;
  color:#eee0e3;
  line-height:1.5;
}
.close-button {
  position:absolute;
  z-index:3;
  right:14px;
  top:14px;
  width:40px;
  height:40px;
  background:#fffefbf0;
  border:1px solid #fff9;
  border-radius:50%;
  padding:9px;
  display:grid;
  place-items:center;
}
.close-button:hover {
  background:white;
}
.close-button svg {
  width:22px;
  height:22px;
  fill:#4c3840;
}
.login-open {
  overflow:hidden;
}
.login-open .brand-top,.login-open .scroll-down {
  visibility:hidden;
}
@keyframes arrive {
  from {
    opacity:0;
    transform:translateY(45px) scale(.98);
  }
  to {
    opacity:1;
    transform:none;
  }
}
@media(min-width:761px) and (max-height:720px) {
  .modal {
    padding:18px;
  }
  .modal-left {
    padding-top:25px;
    padding-bottom:24px;
  }
  .modal-brand {
    margin-bottom:20px;
  }
  .modal-desc {
    margin-bottom:17px;
  }
  .input-block {
    margin-bottom:13px;
  }
  .modal-actions {
    gap:14px;
  }
}
@media(max-width:760px) {
  .brand-top {
    top:20px;
    gap:9px;
  }
  .brand-top__logo {
    width:47px;
    height:47px;
  }
  .brand-top__text {
    font-size:9px;
    letter-spacing:.09em;
  }
  .brand-top__text span {
    font-size:9px;
  }
  .top-access {
    font-size:11px;
    padding:10px 13px;
  }
  .top-access span {
    display:none;
  }
  .scroll-down {
    padding-top:100px;
  }
  .scroll-down__title {
    font-size:clamp(42px,10vw,64px);
  }
  .eyebrow {
    font-size:9px;
  }
  .modal {
    padding:14px 12px;
    align-items:flex-start;
  }
  .modal-container {
    max-width:470px;
    grid-template-columns:1fr;
    border-radius:21px;
  }
  .modal-right {
    grid-row:1;
    width:100%;
    height:auto;
    aspect-ratio:1983 / 793;
    background:#e8e0d5;
  }
  .modal-right img {
    object-fit:contain;
    object-position:center;
  }
  .modal-right:after {
    display:none;
  }
  .picture-label {
    left:14px;
    top:auto;
    bottom:10px;
    padding:7px 9px;
    font-size:7px;
  }
  .picture-caption {
    display:none;
  }
  .modal-left {
    padding:24px;
  }
  .modal-brand {
    margin-bottom:20px;
  }
  .modal-brand__logo {
    height:36px;
    width:36px;
  }
  .modal-brand__name {
    font-size:17px;
  }
  .modal-title {
    font-size:30px;
  }
  .form-eyebrow {
    font-size:8px;
  }
  .close-button {
    top:10px;
    right:10px;
  }
  .modal-actions {
    gap:16px;
  }
  .hint {
    font-size:11px;
  }
  .modal-desc {
    margin-bottom:20px;
  }
}
@media(max-width:360px) {
  .brand-top {
    left:15px;
    right:15px;
  }
  .brand-top__text {
    max-width:130px;
  }
  .modal-left {
    padding:23px 19px;
  }
  .modal {
    padding:8px;
  }
  .scroll-down__title {
    font-size:41px;
  }
}
@media(max-height:600px) {
  .scroll-down {
    padding-top:95px;
    padding-bottom:20px;
  }
  .scroll-down__title {
    font-size:40px;
    margin:12px 0;
  }
  .welcome-access {
    margin:16px 0;
    padding:12px 23px;
  }
  .scroll-down__icon {
    width:24px;
    height:24px;
    margin-top:6px;
  }
  .brand-top {
    top:15px;
  }
  .brand-top__logo {
    width:45px;
    height:45px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}