/* Sign in (Figma frame 49:2088): no top bar or sidebar. A white form card on
   the cream page, and the sunset card beside it. The sunset's pieces sit where
   the frame puts them (its "sunset" group starts 28 px left of and 13 px above
   the card, which clips it). */
.signin { display: flex; align-items: stretch; gap: 16px; min-height: 100vh; padding: 16px; }

.si-form {
  display: flex; flex: 1 0 0; flex-direction: column; align-items: flex-start; justify-content: space-between; min-width: 0;
  padding: 28px 40px; border: 1px solid var(--line); border-radius: 24px; background: #fff;
}
.si-inner { display: flex; flex-direction: column; gap: 16px; align-self: center; width: 400px; max-width: 100%; }
.si-inner h1 { font-size: 36px; font-weight: 700; line-height: 44px; letter-spacing: -1.26px; }
.si-lede { color: var(--body); font-size: 16px; line-height: 1.55; }
.si-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 13px 20px; border: 1px solid #d9cfc3; border-radius: 999px; background: #fff;
  font-size: 15px; font-weight: 600; line-height: var(--lh);
  transition: background-color .15s ease;
}
.si-google:hover { background: #fbf6f1; }
.si-google img { flex: none; width: 20px; height: 20px; }
.si-or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; font-weight: 500; line-height: 15px; }
.si-or span { flex: 1 0 0; height: 1px; background: var(--line); }
.si-try {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--cream);
  transition: background-color .15s ease;
}
.si-try:hover { background: #fbeee2; }
.si-try b { font-size: 15px; font-weight: 600; line-height: var(--lh); }
.si-try span { color: var(--body); font-size: 13px; line-height: 20px; }
.si-terms { color: var(--faint); font-size: 12px; line-height: 1.55; }
.si-terms a { color: var(--body); text-decoration: underline; text-decoration-skip-ink: none; text-underline-position: from-font; }
.si-terms a:hover { color: var(--ink); }
.si-foot { color: var(--faint); font-size: 12px; line-height: var(--lh); white-space: nowrap; }
.si-foot a:hover { color: var(--ink); }

.si-photo {
  position: relative; flex: none; width: 640px; border-radius: 24px; overflow: hidden; color: #fff;
  background: linear-gradient(#f09248 50%, #221b23 50%); /* the sunset's own top and bottom colours: rounded corners and a very tall card blend in */
}
/* At the frame's height (868) every piece is where Figma puts it; on a shorter card the
   sunset and the words keep to the bottom, so the words stay on the dark hills. */
.si-sky { position: absolute; left: -28px; top: min(-13px, calc(100% - 881px)); width: 717px; height: 1073px; }
.si-sky img { position: absolute; left: -33.33%; top: -9.76%; width: 166.67%; height: 121.95%; max-width: none; }
.si-logo { position: absolute; left: 28px; top: 35px; width: 170px; height: 37px; padding: 3px 0 0 54px; font-size: 26px; font-weight: 700; line-height: var(--lh); white-space: nowrap; }
.si-logo img { position: absolute; left: 4px; top: 0; width: 54px; height: 42px; object-fit: contain; }
.si-icon { position: absolute; left: 6px; top: calc(100% - 373px); width: 171px; height: 153px; }
.si-icon img { position: absolute; left: .09%; top: 21.89%; width: 70.09%; height: 78.1%; max-width: none; filter: drop-shadow(10px 8px 35px rgba(158, 83, 50, .81)); }
.si-copy { position: absolute; left: 28px; top: calc(100% - 240px); width: 520px; }
.si-copy h2 { font-size: 44px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.si-copy p { width: 470px; max-width: 100%; margin-top: 7.8px; color: rgba(255, 255, 255, .9); font-size: 17px; font-weight: 700; line-height: 1.55; }

@media (max-width: 1180px) {
  .si-photo { width: 44%; }
  .si-copy { width: calc(100% - 56px); }
  .si-copy h2 { font-size: 38px; white-space: normal; }
}
/* Narrower: the sunset card goes under the form, its words in the flow. */
@media (max-width: 960px) {
  .signin { flex-direction: column; }
  .si-form { flex: none; gap: 40px; }
  .si-photo { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; width: auto; min-height: 560px; padding: 120px 28px 36px; }
  .si-icon, .si-copy { position: relative; left: auto; top: auto; }
  .si-icon { width: 140px; height: 120px; margin-left: -22px; }
  .si-icon img { top: 0; left: 0; width: 120px; height: 120px; }
  .si-copy { width: auto; }
  .si-copy p { width: auto; max-width: 470px; }
}
@media (max-width: 640px) {
  .signin { padding: 8px; gap: 8px; }
  .si-form { padding: 24px 20px; }
  .si-inner h1 { font-size: 30px; line-height: 38px; letter-spacing: -0.9px; }
  .si-foot { white-space: normal; }
  .si-photo { min-height: 520px; padding: 110px 20px 28px; }
  .si-logo { left: 20px; top: 24px; }
  .si-copy h2 { font-size: 30px; }
  .si-copy p { font-size: 15px; }
}

/* signing in for real (sign-in.js) */
.signin [hidden] { display: none !important; }
.si-done { display: flex; flex-wrap: wrap; gap: 10px; }
.si-lede b { color: var(--ink); font-weight: 600; }
.si-error { color: var(--red); font-size: 13px; line-height: 1.5; }
.si-google:disabled { opacity: .6; cursor: default; }