/* SOMA Research login: black and purple, Uber Move, same identity as the research app.
   Digital-rain backdrop is fixed and click-through; frosted panels reveal only a soft trace of it.
   Neon border motion and canvas rain obey the footer pause control and reduced motion. */

@property --research-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes neonOrbit {
  to { --research-border-angle: 360deg; }
}

.shell {
  --bg: #09070c;
  --surface: #141019;
  --raised: #1a1522;
  --field: #120e18;
  --line: #2c2336;
  --line-strong: #44365a;
  --accent: #9b5ce8;
  --accent-hi: #b47af7;
  --teal: #b98aff;
  --text: #f3edf8;
  --muted: #a99bb8;
  --faint: #7f7290;
  --err: #ffb9c6;
  --err-bg: #331a26;
  --neon-play-state: running;

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 0;
  color: var(--text);
  background:
    radial-gradient(ellipse 60% 50% at 82% -8%, rgba(155, 92, 232, .22), transparent 70%),
    radial-gradient(ellipse 45% 40% at 8% 105%, rgba(98, 52, 160, .18), transparent 70%),
    var(--bg);
  font-weight: 500;
}

.shell *, .shell *::before, .shell *::after { box-sizing: border-box; }
.shell[data-motion='paused'] { --neon-play-state: paused; }

/* Brighter login graffiti stays behind frosted reading surfaces. */
.rain {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  opacity: .64;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 65%, rgba(0, 0, 0, .8) 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 65%, rgba(0, 0, 0, .8) 100%);
}

.header, .main, .footer { position: relative; z-index: 1; }

/* Skip link */
.skip {
  position: absolute;
  z-index: 10;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus, .skip:focus-visible {
  transform: none;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Focus ring for everything interactive inside the login. */
.shell button:focus-visible,
.shell a:focus-visible,
.shell input:focus-visible {
  outline: 2px solid #c9a4ff;
  outline-offset: 2px;
}

/* Header */
.header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 72px;
  padding: 12px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(11, 8, 16, .86), rgba(19, 11, 29, .8));
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.logo { display: block; height: 30px; width: auto; max-width: 100%; flex: none; }
.product {
  display: inline-flex;
  align-items: center;
  padding-left: 14px;
  border-left: 1px solid var(--line-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #d9c7f2;
  white-space: nowrap;
}
.preview {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #4d3570;
  border-radius: 999px;
  background: #1d1429;
  color: #d4adff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Main composition */
.main {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 440px);
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 6vw, 96px);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(32px, 7vh, 80px) clamp(16px, 4vw, 48px);
  min-width: 0;
}

.intro { min-width: 0; max-width: 680px; }
.eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}
.title {
  margin: 0 0 18px;
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.05;
  overflow-wrap: break-word;
}
.title span {
  color: #d4adff;
  background: linear-gradient(95deg, #e3cdff 0%, #b98aff 55%, #9b5ce8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lead {
  margin: 0 0 32px;
  max-width: 540px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
}

/* Abstract three-step visual: shapes only, never real research content. */
.visual {
  position: relative;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: linear-gradient(160deg, #1a1325 0%, var(--surface) 55%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(155, 92, 232, .14), inset 0 1px 0 rgba(201, 164, 255, .14);
}
.visualTop {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #3a2e4a;
  border-radius: 12px;
  background: var(--field);
  color: var(--muted);
  font-size: 15px;
}
.visualTop > svg { flex: none; color: var(--teal); }
.visualTop > span:not(.visualDot) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visualDot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px #b98aff;
}
.visualTags { display: flex; flex-wrap: wrap; gap: 8px; }
.visualTags span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid #5b3f80;
  border-radius: 999px;
  background: #231a31;
  color: #f1e4ff;
  font-size: 13px;
}
.visualCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  counter-reset: step;
}
.visualCard {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 16px 14px;
  border: 1px solid #2f2539;
  border-radius: 14px;
  background: var(--surface);
  color: #e8dcf5;
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
  counter-increment: step;
  transition: border-color .2s ease, transform .2s ease;
}
.visualCard::before {
  content: counter(step);
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #2a1d3d;
  color: #e3cdff;
  font-size: 12px;
}
.visualCard > svg { color: var(--teal); }
.visualCard i {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #2a2136;
}
.visualCard i:last-child { width: 62%; }
.visualCard:nth-child(2) { border-color: #4d3570; }
.visualCard:nth-child(3) { background: linear-gradient(160deg, #20152e, var(--surface)); border-color: #5b3f80; }

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.features li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 14px;
  color: var(--muted);
}
.features svg { flex: none; color: var(--teal); }

/* Sign-in card */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6), 0 0 80px rgba(155, 92, 232, .18), inset 0 1px 0 rgba(201, 164, 255, .18);
  scroll-margin-top: 16px;
}
.cardIcon {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border: 1px solid #5b3f80;
  border-radius: 14px;
  background: #1f1530;
  color: #e3cdff;
  box-shadow: 0 0 28px rgba(155, 92, 232, .28);
}
.cardEyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}
.cardTitle {
  margin: 0 0 8px;
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.cardLead {
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.form { display: grid; gap: 16px; min-width: 0; }
.field { display: grid; gap: 8px; min-width: 0; max-width: 100%; }
.field label { font-size: 14px; font-weight: 700; color: #e8dcf5; }
.field input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #3a2e4a;
  border-radius: 12px;
  background: var(--field);
  color: var(--text);
  font-size: 16px;
  color-scheme: dark;
  text-overflow: ellipsis;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder { color: #84769a; }
.field input:hover:not(:disabled) { border-color: #5b3f80; }
.field input:focus, .field input:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(155, 92, 232, .26);
  outline: none;
}
.field input:disabled { opacity: .55; cursor: not-allowed; }

/* Password input and Show button sit side by side so typing is never covered. */
.passwordWrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}
.reveal {
  min-width: 68px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: transparent;
  color: #e5d4ff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.reveal:hover:not(:disabled) { border-color: var(--teal); background: #1d1429; }
.reveal[aria-pressed='true'] { background: #2a1d3d; border-color: var(--accent); color: #fff; }
.reveal:disabled { opacity: .5; cursor: not-allowed; }

.forgot, .back {
  align-self: start;
  justify-self: start;
  min-height: 44px;
  padding: 0 4px;
  margin: -6px 0 -4px -4px;
  border: 0;
  background: none;
  color: #c7a4ff;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: left;
  cursor: pointer;
}
.forgot:hover:not(:disabled), .back:hover:not(:disabled) { color: #ecdcff; }
.forgot:disabled, .back:disabled { opacity: .5; cursor: not-allowed; text-decoration: none; }
.back { margin: 12px 0 0 -4px; }

.feedback {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #6a3a4c;
  border-radius: 12px;
  background: var(--err-bg);
  color: var(--err);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.feedback:focus, .feedback:focus-visible { outline: 2px solid #c9a4ff; outline-offset: 2px; }

.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(201, 164, 255, .25);
  transition: background-color .15s ease, box-shadow .2s ease;
}
.primary svg { flex: none; transition: transform .2s ease; }
.primary:hover:not(:disabled) { background: var(--accent-hi); box-shadow: 0 0 28px rgba(163, 99, 238, .45), inset 0 0 0 1px rgba(255, 255, 255, .2); }
.primary:hover:not(:disabled) svg { transform: translateX(3px); }
.primary:disabled { opacity: .55; cursor: not-allowed; }

.invite {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.setupNote {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--faint);
  overflow-wrap: anywhere;
}

/* Footer */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 12px clamp(16px, 4vw, 48px) 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  background: rgba(9, 7, 12, .72);
}
.footer > span { min-width: 0; overflow-wrap: anywhere; }
.motion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: color .15s ease, border-color .15s ease;
}
.motion svg { flex: none; width: 18px; height: 18px; }
.motion:hover { color: #fff; border-color: var(--teal); }
.motion[aria-pressed='true'] { border-color: var(--accent); color: #e5d4ff; }

/* Clear purple glass: a fine reflective rim, lightly curved sheen and a soft
   shadow lift the panel while the rain remains visible through the lens. */
.card, .visual {
  border-color: rgba(206, 175, 247, .25);
  border-top-color: rgba(246, 232, 255, .55);
  border-left-color: rgba(230, 206, 255, .35);
  border-bottom-color: rgba(209, 176, 247, .22);
  background:
    radial-gradient(ellipse 95% 50% at 5% 0%, rgba(225, 195, 255, .10), transparent 70%),
    linear-gradient(145deg,
      rgba(66, 44, 88, .22) 0%,
      rgba(28, 17, 40, .30) 48%,
      rgba(14, 9, 23, .42) 100%);
  -webkit-backdrop-filter: blur(4.5px) saturate(125%);
  backdrop-filter: blur(4.5px) saturate(125%);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, .38),
    0 3px 8px rgba(0, 0, 0, .28),
    0 0 32px rgba(155, 92, 232, .08),
    inset 0 2px 2px rgba(255, 239, 255, .14),
    inset 1px 0 1px rgba(232, 208, 255, .10),
    inset 0 -1px 1px rgba(221, 188, 255, .10),
    inset 0 -10px 24px rgba(5, 2, 10, .12);
}
.visualCard, .visualCard:nth-child(3), .visualTop, .cardIcon {
  border-color: rgba(203, 172, 240, .20);
  border-top-color: rgba(235, 211, 255, .32);
  background: linear-gradient(145deg, rgba(105, 76, 138, .12), rgba(18, 13, 27, .24));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(245, 226, 255, .09);
}
.visualTags span {
  background: rgba(64, 43, 88, .20);
  border-color: rgba(203, 172, 240, .22);
  box-shadow: inset 0 1px 0 rgba(245, 226, 255, .07);
}
.field input {
  background: rgba(13, 9, 20, .42);
  border-color: rgba(191, 158, 226, .19);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .20), 0 1px 0 rgba(240, 220, 255, .04);
}
.field input:focus, .field input:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(155, 92, 232, .26);
}

@supports not ((backdrop-filter: blur(4.5px)) or (-webkit-backdrop-filter: blur(4.5px))) {
  .card, .visual { background: linear-gradient(145deg, #241b30, #141019); }
}

/* A moving conic highlight follows the actual rounded perimeter; the mask keeps
   the center empty so neither the form nor the visual content gets covered. */
.card::before, .card::after,
.visual::before, .visual::after,
.visualCard::after, .cardIcon::after {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--research-border-angle),
    #64359d 0deg, #64359d 220deg, #b56bff 265deg,
    #f3dfff 292deg, #c185ff 312deg, #64359d 350deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: neonOrbit 6s linear infinite;
  animation-play-state: var(--neon-play-state);
}
.card::before, .visual::before { opacity: .38; }
.card::after, .visual::after { filter: blur(5px); opacity: .20; }
.visual::before, .visual::after { animation-duration: 8s; animation-delay: -3s; }
.visualCard::after, .cardIcon::after {
  inset: -1px;
  padding: 1px;
  filter: drop-shadow(0 0 4px #b56bff);
  opacity: .30;
  animation-duration: 7s;
}
.visualCard:nth-child(2)::after { animation-delay: -2s; }
.visualCard:nth-child(3)::after { animation-delay: -4s; }

/* Tablet and below: single column, sign-in first so the usable surface is above the fold. */
@media (max-width: 960px) {
  .main {
    grid-template-columns: minmax(0, 560px);
    align-items: start;
    gap: 32px;
    padding-top: 28px;
    padding-bottom: 36px;
  }
  .card { order: -1; }
  .intro { max-width: none; }
}

/* Phone */
@media (max-width: 640px) {
  .header { min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
  .logo { height: 24px; }
  .brand { gap: 10px; }
  .product { padding-left: 10px; font-size: 11px; }
  .preview { min-height: 28px; font-size: 11px; }
  .main { gap: 24px; padding: 20px 16px 28px; }
  .card { padding: 20px 16px; border-radius: 16px; }
  .cardIcon { width: 44px; height: 44px; margin-bottom: 14px; }
  .cardLead { margin-bottom: 18px; }
  .title { font-size: 30px; margin-bottom: 12px; }
  .lead { font-size: 15px; margin-bottom: 20px; }
  .visual { padding: 12px; gap: 10px; border-radius: 14px; }
  .visualCards { gap: 8px; }
  .visualCard { padding: 12px 8px; gap: 8px; font-size: 12px; }
  .visualCard::before { top: 8px; right: 6px; width: 18px; height: 18px; font-size: 11px; }
  .visualTop { font-size: 14px; padding: 0 12px; }
  .features { display: none; }
  .forgot { margin-top: -4px; }
  .footer { padding-top: 8px; padding-bottom: 16px; }
}

@media (max-width: 360px) {
  .visualCard span { font-size: 11px; }
  .visualTags span { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .shell *, .shell *::before, .shell *::after {
    transition: none !important;
    animation: none !important;
  }
  .primary:hover:not(:disabled) svg { transform: none; }
}

.footer > :last-child { margin-left: auto; }