/*
 * Login: one continuous stage, from a black-gold night on the left to warm
 * ivory dawn on the right (palette from beesigma.com). The neural landscape
 * (login-cortex.js) lives in the night and fades into the dawn; the sign-in
 * card floats on the light side. Everything is scoped to .login-screen.
 *
 * The ramp is anchored to the card, not to the window, so the copy always sits
 * on the dark side. login-cortex.js mirrors these numbers in rampFor().
 */

.login-screen {
  --lc-night: #0a0908;
  --lc-ivory: #f8f4ec;
  --lc-text: #f2ecdd;
  --lc-text-2: #b3aa95;
  --lc-text-3: #8a8171;
  --lc-ink: #1d1a14;
  --lc-ink-2: #5d5546;
  --lc-ink-3: #8a7f6b;
  --lc-line-dark: rgba(238, 228, 200, 0.16);
  --lc-line-light: rgba(80, 60, 30, 0.14);
  --lc-honey: #ffb028;
  --lc-honey-2: #ffd070;
  --lc-gold-ink: #9a6a12;
  --lc-gold: linear-gradient(100deg, #ffb028 0%, #ffd070 55%, #ffe9bb 100%);
  --lc-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --lc-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "IBM Plex Mono", monospace;
  --ramp-start: calc(100% - 780px);
  --ramp-end: calc(100% - 340px);
  --ramp-mid: calc((var(--ramp-start) + var(--ramp-end)) / 2);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(40px, 7vw, 120px);
  row-gap: 18px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(28px, 3.4vw, 50px) clamp(28px, 6vw, 104px) 26px;
  color: var(--lc-text);
  background:
    radial-gradient(ellipse 26% 38% at var(--ramp-mid) 44%, rgba(255, 168, 60, 0.3), transparent 70%),
    linear-gradient(90deg,
      var(--lc-night) 0,
      #0c0a08 var(--ramp-start),
      #20170e calc(var(--ramp-start) + (var(--ramp-end) - var(--ramp-start)) * 0.2),
      #4a3920 calc(var(--ramp-start) + (var(--ramp-end) - var(--ramp-start)) * 0.4),
      #9a8158 calc(var(--ramp-start) + (var(--ramp-end) - var(--ramp-start)) * 0.6),
      #dccdb0 calc(var(--ramp-start) + (var(--ramp-end) - var(--ramp-start)) * 0.8),
      #f6f0e5 var(--ramp-end),
      var(--lc-ivory) 100%);
}

html:has(> body > .login-screen:not(.hidden)),
body:has(> .login-screen:not(.hidden)) {
  background: var(--lc-night, #0a0908);
}

/* A low scrim keeps the four points legible over the near ground. */
.login-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(9, 8, 7, 0.66) 0%, rgba(9, 8, 7, 0) 30%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 var(--ramp-start), transparent var(--ramp-mid));
  mask-image: linear-gradient(90deg, #000 0, #000 var(--ramp-start), transparent var(--ramp-mid));
}

.login-screen ::selection {
  background: rgba(255, 176, 40, 0.32);
}

.login-screen :focus-visible {
  outline: 2px solid rgba(214, 150, 40, 0.8);
  outline-offset: 3px;
}

.login-screen .cortex-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 var(--ramp-start), rgba(0, 0, 0, 0.5) var(--ramp-mid), transparent var(--ramp-end));
  mask-image: linear-gradient(90deg, #000 0, #000 var(--ramp-start), rgba(0, 0, 0, 0.5) var(--ramp-mid), transparent var(--ramp-end));
}

.login-screen.cortex-on .cortex-field {
  opacity: 1;
}

/* ---- Night side: brand, promise, four points --------------------------- */

.login-screen .login-story {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--lc-text);
}

.login-screen .login-story::before,
.login-screen .login-story::after {
  content: none;
}

.login-screen .login-story .brand-mark {
  box-shadow: 0 0 0 1px rgba(255, 208, 112, 0.2), 0 0 28px rgba(255, 160, 30, 0.2);
}

.login-screen .login-story .brand-lockup strong {
  color: var(--lc-text);
}

.login-screen .login-story .brand-lockup strong span {
  background: var(--lc-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.login-screen .login-story .brand-lockup small {
  color: var(--lc-text-3);
  font-family: var(--lc-mono);
  font-size: 7.5px;
  letter-spacing: 0.28em;
}

.login-screen .story-copy {
  max-width: 680px;
  margin: auto 0;
  padding: 40px 0;
}

.login-screen .story-copy .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--lc-honey-2);
  font: 600 11px/1.3 var(--lc-mono);
  letter-spacing: 0.26em;
}

.login-screen .story-copy .kicker::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lc-honey);
  box-shadow: 0 0 0 4px rgba(255, 176, 40, 0.1), 0 0 14px rgba(255, 176, 40, 0.85);
  animation: cortex-beacon 2.4s ease-in-out infinite;
}

.login-screen .story-copy h1 {
  margin: 26px 0 0;
  background: linear-gradient(180deg, #fffaf0 0%, #e4dac3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font: 760 clamp(48px, 5.2vw, 88px)/1.06 var(--lc-display);
  letter-spacing: -0.045em;
}

.login-screen .story-copy h1 em {
  background: linear-gradient(100deg, #ff9a12 0%, #ffb028 22%, #ffd070 46%, #fff1cf 56%, #ffd070 66%, #ffb028 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  font-weight: inherit;
  filter: drop-shadow(0 0 26px rgba(255, 166, 40, 0.22));
  animation: cortex-sheen 10s ease-in-out infinite;
}

html[data-language="en"] .login-screen .story-copy h1 {
  font-size: clamp(44px, 4.8vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

/* CORTEX (2026-10-29, Pin): six words on one relay line a signal runs across, each first letter
   enlarged so the column of capitals spells the word; no separate heading. X follows the brand book:
   brand gold at 115% of the other capitals. */
.login-screen .story-points {
  position: relative;
  max-width: 880px;
  margin: 0;
}

.login-screen .cortex-letter-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lc-line-dark);
}

.login-screen .cortex-letter-list::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -14%;
  width: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffd070 80%, #fff1cf);
  box-shadow: 0 0 10px rgba(255, 190, 80, 0.7);
  animation: cortex-relay 7s linear infinite;
}

.login-screen .story-points li {
  position: relative;
  min-width: 0;
  padding: 18px 14px 0 0;
}

.login-screen .story-points li::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6d5a35;
  animation: cortex-node 7s linear infinite;
}

.login-screen .story-points li:nth-child(2)::before { animation-delay: 1.17s; }
.login-screen .story-points li:nth-child(3)::before { animation-delay: 2.33s; }
.login-screen .story-points li:nth-child(4)::before { animation-delay: 3.5s; }
.login-screen .story-points li:nth-child(5)::before { animation-delay: 4.67s; }
.login-screen .story-points li:nth-child(6)::before { animation-delay: 5.83s; }

.login-screen .cortex-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.login-screen .cortex-name b {
  color: var(--lc-honey-2);
  font: 800 32px/1 var(--lc-display);
  letter-spacing: 0;
}

.login-screen .story-points li.is-open .cortex-name b {
  color: #c9942b;
  font-size: 36.8px;
}

.login-screen .cortex-name em {
  margin-left: 8px;
  color: var(--lc-text-2);
  font: 500 13px/1 var(--lc-display);
  font-style: normal;
}

.login-screen .story-points li.is-open .cortex-name em {
  margin-left: 10px;
  color: var(--lc-text);
  font: 650 17px/1 var(--lc-display);
}

html[data-language="en"] .login-screen .cortex-zh { display: none; }

.login-screen .story-points li strong,
.login-screen .story-points li span {
  text-wrap: pretty;
}

.login-screen .story-points li strong {
  display: flex;
  color: var(--lc-text);
  font: 650 18px/1.2 var(--lc-display);
  letter-spacing: -0.01em;
}

.login-screen .story-points li span {
  display: block;
  margin-top: 5px;
  color: var(--lc-text-2);
  font-size: 13px;
  line-height: 1.5;
}

.login-screen .login-story > .cortex-hud {
  position: absolute;
  top: 6px;
  right: 0;
  display: grid;
  justify-items: end;
  gap: 7px;
  color: var(--lc-text-3);
  font: 500 9px/1.4 var(--lc-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.9s ease 0.8s;
}

.login-screen.cortex-live .login-story > .cortex-hud {
  opacity: 1;
}

.cortex-hud b {
  color: var(--lc-honey-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cortex-hud-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--lc-text-2);
}

.cortex-hud-title i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lc-honey);
  box-shadow: 0 0 10px rgba(255, 176, 40, 0.9);
  animation: cortex-beacon 2.4s ease-in-out infinite;
}

/* ---- Dawn side: the sign-in card ---------------------------------------- */

.login-screen .login-panel {
  position: relative;
  z-index: 3;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: block;
  min-width: 0;
  padding: 56px 0 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--lc-ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.login-screen .login-form-wrap {
  position: relative;
  width: 100%;
  padding: 40px 36px 30px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.9), rgba(251, 247, 239, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(120, 90, 40, 0.07),
    0 34px 80px rgba(40, 26, 8, 0.22),
    0 8px 24px rgba(40, 26, 8, 0.08);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

/* A thread of gold along the top edge, and viewfinder marks at the corners. */
.login-screen .login-form-wrap::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 32px;
  right: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e0a43a 50%, transparent);
  pointer-events: none;
}

.login-screen .login-form-wrap::after {
  --mark: rgba(154, 106, 18, 0.55);
  content: "";
  position: absolute;
  inset: -12px;
  pointer-events: none;
  background:
    linear-gradient(var(--mark), var(--mark)) left top / 14px 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left top / 1px 14px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right top / 14px 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right top / 1px 14px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left bottom / 14px 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left bottom / 1px 14px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right bottom / 1px 14px no-repeat;
}

.login-screen .login-form-wrap > .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--lc-gold-ink);
  font: 650 11px/1.3 var(--lc-mono);
  letter-spacing: 0.3em;
}

.login-screen .login-form-wrap > .kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d8962a);
}

.login-screen .login-form-wrap h2 {
  margin: 14px 0 28px;
  color: var(--lc-ink);
  font: 720 clamp(28px, 2.4vw, 34px)/1.15 var(--lc-display);
  letter-spacing: -0.03em;
}

.login-screen #loginForm {
  gap: 18px;
}

.login-screen .login-panel label {
  gap: 9px;
  color: var(--lc-ink-3);
  font: 600 10.5px/1.2 var(--lc-mono);
  letter-spacing: 0.22em;
}

.login-screen .login-panel input {
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid var(--lc-line-light);
  border-radius: 12px;
  background: #fffdf9;
  color: var(--lc-ink);
  caret-color: #c9861a;
  font: 400 15px/1.2 var(--lc-display);
  letter-spacing: 0.01em;
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

.login-screen .login-panel input:hover {
  border-color: rgba(80, 60, 30, 0.24);
}

.login-screen .login-panel input:focus {
  border-color: #d79a2a;
  background: #fffdf9;
  box-shadow: 0 0 0 4px rgba(255, 176, 40, 0.16);
}

.login-screen .login-panel input:focus-visible {
  outline: none;
}

.login-screen .login-panel input:-webkit-autofill,
.login-screen .login-panel input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--lc-ink);
  box-shadow: 0 0 0 100px #fdf6e6 inset;
  transition: background-color 9999s ease-out 0s;
}

.login-screen .login-panel input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--lc-ink);
  box-shadow: 0 0 0 100px #fdf6e6 inset, 0 0 0 4px rgba(255, 176, 40, 0.16);
}

.login-screen .login-panel .button.primary {
  position: relative;
  overflow: hidden;
  min-height: 52px;
  margin-top: 6px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #2b251c, #16130e);
  color: #fbf3e2;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.22), 0 12px 26px rgba(40, 26, 8, 0.24);
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.login-screen .login-panel .button.primary span {
  color: var(--lc-honey-2);
  transition: transform 0.25s ease;
}

.login-screen .login-panel .button.primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255, 214, 140, 0.22), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: cortex-glint 4.2s ease-in-out infinite;
}

.login-screen .login-panel .button.primary:hover {
  transform: translateY(-1px);
  border: 0;
  background: linear-gradient(180deg, #2b251c, #16130e);
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.3), 0 0 0 1px rgba(224, 164, 58, 0.55), 0 16px 34px rgba(40, 26, 8, 0.3);
}

.login-screen .login-panel .button.primary:hover span {
  transform: translateX(4px);
}

.login-screen .login-panel .button.primary:disabled {
  transform: none;
  opacity: 0.6;
  cursor: progress;
}

.login-screen .login-panel .button.secondary {
  min-height: 48px;
  border: 1px solid rgba(80, 60, 30, 0.2);
  border-radius: 12px;
  background: transparent;
  color: var(--lc-ink);
  letter-spacing: 0.08em;
}

.login-screen .login-panel .button.secondary:hover {
  border-color: #d79a2a;
  background: rgba(255, 176, 40, 0.08);
  box-shadow: none;
}

.login-screen .login-panel .form-error {
  margin: 10px 0 0;
  min-height: 0;
  color: #b4232d;
  font-size: 13px;
}

.login-screen .password-reset-panel {
  margin-top: 14px;
  padding-top: 4px;
  border-top: 1px solid var(--lc-line-light);
}

.login-screen .password-reset-panel summary {
  width: fit-content;
  min-height: 44px;
  color: var(--lc-gold-ink);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.login-screen .password-reset-panel summary:hover {
  text-decoration: underline;
  text-decoration-color: rgba(154, 106, 18, 0.4);
  text-underline-offset: 5px;
}

.login-screen .password-reset-content > strong {
  color: var(--lc-ink);
  font-size: 15px;
}

.login-screen .password-reset-content .form-status {
  color: var(--lc-ink-2);
}

.login-screen .customer-system-note {
  margin: 6px 0 0;
  color: var(--lc-ink-3);
  font-size: 12.5px;
  line-height: 1.6;
}

.login-screen .customer-system-note a {
  color: var(--lc-gold-ink);
  font-weight: 650;
  text-decoration-color: rgba(154, 106, 18, 0.35);
}

/* First sign-in after onboarding (2026-10-23): the temporary password is swapped before the workspace opens. */
.login-screen .login-form-wrap.is-first-password > :not(.first-password-panel),
.login-screen .login-form-wrap.is-first-password > #loginForm { display: none; }
.login-screen .first-password-panel[hidden], .login-screen .first-password-current[hidden] { display: none; }
.login-screen .first-password-panel > .kicker { display: inline-flex; align-items: center; gap: 12px; color: var(--lc-gold-ink); font: 650 11px/1.3 var(--lc-mono); letter-spacing: 0.3em; }
.login-screen .first-password-panel > .kicker::before { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, #d8962a); }
.login-screen .first-password-panel h2 { margin-bottom: 10px; }
.login-screen .first-password-lead { margin: 0 0 22px; color: var(--lc-ink-2); font-size: 14px; line-height: 1.6; }
.login-screen .first-password-lead b { display: block; margin-top: 4px; color: var(--lc-ink); font-weight: 650; overflow-wrap: anywhere; }
.login-screen #firstPasswordForm { display: grid; gap: 16px; }
.login-screen .password-rules { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 0; padding: 0; list-style: none; }
.login-screen .password-rules li { padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(120, 90, 40, 0.07); color: var(--lc-ink-3); font-size: 12px; }
.login-screen .password-rules li::before { content: "○"; margin-right: 5px; }
.login-screen .password-rules li.is-met { background: #e7f4ec; color: #1f6f46; }
.login-screen .password-rules li.is-met::before { content: "✓"; }
.login-screen .first-password-switch { min-height: 44px; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--lc-gold-ink); font-size: 13px; font-weight: 650; cursor: pointer; }

.login-screen .login-brand-footer {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  width: auto;
  padding: 0;
  color: var(--lc-ink-3);
  font-family: var(--lc-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.login-screen .login-brand-footer i {
  background: linear-gradient(90deg, transparent, rgba(154, 106, 18, 0.5), transparent);
}

.login-screen .login-brand-footer strong {
  color: var(--lc-gold-ink);
}

.login-screen .login-language {
  position: absolute;
  z-index: 5;
  top: clamp(24px, 3vw, 40px);
  right: clamp(24px, 3vw, 40px);
  border: 1px solid var(--lc-line-light);
  background: rgba(255, 252, 246, 0.72);
  box-shadow: 0 6px 18px rgba(40, 26, 8, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.login-screen .login-language a {
  color: var(--lc-ink-3);
  font-family: var(--lc-mono);
}

.login-screen .login-language a:hover {
  background: rgba(80, 60, 30, 0.06);
  color: var(--lc-ink);
  box-shadow: none;
}

.login-screen .login-language a.active {
  background: var(--lc-ink);
  color: var(--lc-honey-2);
  box-shadow: 0 4px 12px rgba(40, 26, 8, 0.2);
}

/* ---- Product demo: a link under the card, the video in a lightbox (2026-10-23, Pin) ---- */

.login-screen .login-demo-link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 14px 0 0;
  padding: 11px 18px 11px 11px;
  border: 1px solid rgba(154, 106, 18, 0.2);
  border-radius: 18px;
  background: rgba(255, 252, 244, 0.74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(60, 40, 10, 0.08);
  color: var(--lc-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.login-screen .login-demo-link:hover {
  transform: translateY(-1px);
  border-color: rgba(154, 106, 18, 0.36);
  box-shadow: 0 16px 36px rgba(60, 40, 10, 0.13);
}
.login-screen .login-demo-link:focus-visible { outline: 3px solid rgba(255, 176, 40, 0.55); outline-offset: 3px; }
.login-screen .login-demo-play {
  position: relative;
  flex: 0 0 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd884, #f0a92a 58%, #c08414);
  box-shadow: 0 6px 16px rgba(233, 160, 32, 0.32);
}
.login-screen .login-demo-play::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 13px;
  border-left: 14px solid #1d160b;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.login-screen .login-demo-copy { display: grid; gap: 3px; min-width: 0; }
.login-screen .login-demo-copy strong { font-size: 15px; font-weight: 700; letter-spacing: 0.01em; }
.login-screen .login-demo-copy small { overflow: hidden; color: var(--lc-ink-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.login-screen .login-demo-time { margin-left: auto; color: var(--lc-gold-ink); font: 600 12px/1 var(--lc-mono); letter-spacing: 0.08em; }

.demo-video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 64px 24px 24px;
  background: rgba(12, 10, 6, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.demo-video-modal.hidden { display: none; }
.demo-video-card { position: relative; width: min(1120px, 100%, calc((100vh - 140px) * 16 / 9)); }
.demo-video-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.demo-video-frame video { display: block; width: 100%; height: 100%; }
.demo-video-close {
  position: absolute;
  top: -50px;
  right: 0;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 248, 235, 0.28);
  border-radius: 50%;
  background: rgba(255, 248, 235, 0.1);
  color: #fff8eb;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.demo-video-close:hover { background: rgba(255, 248, 235, 0.2); }
.demo-video-close:focus-visible { outline: 3px solid rgba(255, 176, 40, 0.6); outline-offset: 3px; }
.demo-video-note { margin: 12px 0 0; color: rgba(255, 248, 235, 0.6); font-size: 12px; text-align: center; }
html.demo-video-open { overflow: hidden; }
@media (max-width: 640px) {
  .demo-video-modal { padding: 60px 12px 12px; }
  .demo-video-frame { border-radius: 12px; }
}

/* ---- Entrance ---------------------------------------------------------- */

.login-screen .story-copy > *,
.login-screen .story-points,
.login-screen .login-form-wrap,
.login-screen .login-demo-link {
  animation: cortex-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.login-screen .story-copy > :nth-child(2) { animation-delay: 0.12s; }
.login-screen .story-points { animation-delay: 0.3s; }
.login-screen .login-form-wrap { animation-delay: 0.18s; }
.login-screen .login-demo-link { animation-delay: 0.32s; }

@keyframes cortex-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes cortex-beacon {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes cortex-sheen {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0 0; }
}

@keyframes cortex-relay {
  from { left: -14%; }
  to { left: 100%; }
}

@keyframes cortex-node {
  0% { background: #ffe2a6; box-shadow: 0 0 0 3px rgba(255, 176, 40, 0.16), 0 0 14px rgba(255, 190, 80, 0.95); }
  14%, 100% { background: #6d5a35; box-shadow: none; }
}

@keyframes cortex-glint {
  from { left: -45%; }
  to { left: 120%; }
}

/* ---- Narrower desktops: pull the dawn in toward the card ---------------- */

/* Six in one row only on wide screens (each line then fits in two rows of text); otherwise three by two. */
@media (max-width: 1759px) {
  .login-screen .cortex-letter-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 18px;
  }

  .login-screen .story-points li:nth-child(n + 4) {
    border-top: 1px solid var(--lc-line-dark);
  }
}

@media (max-width: 1439px) {
  .login-screen .cortex-letter-list::after {
    display: none;
  }
}

@media (max-width: 1279px) {
  .login-screen {
    --ramp-start: calc(100% - 560px);
    --ramp-end: calc(100% - 240px);
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
  }
}

@media (max-width: 1179px) {
  .login-screen .login-story > .cortex-hud {
    display: none;
  }
}

/* ---- Phones and portrait tablets: the card on the first screen ---------- */

@media (max-width: 820px) {
  .login-screen {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 18px 14px 22px;
    background:
      radial-gradient(ellipse 80% 22% at 60% 170px, rgba(255, 168, 60, 0.26), transparent 70%),
      linear-gradient(180deg, var(--lc-night) 0, #0c0a08 170px, #2a1f13 270px, #8f7853 360px, #e2d5bc 450px, #f6f0e5 540px, var(--lc-ivory) 100%);
  }

  .login-screen::after {
    background: none;
  }

  .login-screen .cortex-field {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 260px, transparent 470px);
    mask-image: linear-gradient(180deg, #000 0, #000 260px, transparent 470px);
  }

  .login-screen .login-story {
    display: contents;
  }

  /* One generous column: full width on phones, centred and capped on tablets. */
  .login-screen .login-story .brand-lockup,
  .login-screen .story-copy,
  .login-screen .login-panel,
  .login-screen .story-points {
    align-self: center;
    width: min(100%, 560px);
  }

  .login-screen .login-story .brand-lockup {
    order: 1;
    position: relative;
    z-index: 2;
    min-height: 52px;
  }

  .login-screen .story-copy {
    order: 2;
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 18px 0 26px;
  }

  .login-screen .story-copy .kicker {
    font-size: 9.5px;
    letter-spacing: 0.2em;
  }

  .login-screen .story-copy h1,
  html[data-language="en"] .login-screen .story-copy h1 {
    margin-top: 14px;
    font-size: clamp(34px, 9.6vw, 44px);
    line-height: 1.08;
  }

  .login-screen .login-panel {
    order: 3;
    padding: 0;
  }

  .login-screen .login-form-wrap {
    padding: 30px 24px 22px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(251, 247, 239, 0.96));
  }

  .login-screen .login-form-wrap::after {
    inset: -7px;
  }

  .login-screen .login-form-wrap h2 {
    margin: 10px 0 20px;
    font-size: 26px;
  }

  .login-screen #loginForm {
    gap: 14px;
  }

  .login-screen .login-panel input {
    min-height: 50px;
    font-size: 16px;
  }

  .login-screen .story-points {
    order: 4;
    position: relative;
    z-index: 2;
    margin-top: 34px;
  }

  .login-screen .cortex-letter-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
    border-top-color: var(--lc-line-light);
  }

  .login-screen .story-points li:nth-child(n + 3) {
    border-top: 1px solid var(--lc-line-light);
  }

  .login-screen .story-points b {
    color: var(--lc-gold-ink);
  }

  .login-screen .story-points li.is-open .cortex-name b {
    color: #c9942b;
  }

  .login-screen .cortex-name em {
    color: var(--lc-ink-2);
  }

  .login-screen .story-points li.is-open .cortex-name em {
    color: var(--lc-ink);
  }

  .login-screen .story-points li strong {
    color: var(--lc-ink);
    font-size: 17px;
  }

  .login-screen .story-points li span {
    color: var(--lc-ink-2);
    font-size: 13px;
  }

  .login-screen .login-story > .cortex-hud {
    display: none;
  }

  .login-screen .login-brand-footer {
    order: 5;
    margin-top: 30px;
    align-self: center;
  }

  .login-screen .login-language {
    top: 18px;
    right: 16px;
    border-color: var(--lc-line-dark);
    background: rgba(14, 13, 11, 0.72);
    box-shadow: none;
  }

  .login-screen .login-language a {
    color: var(--lc-text-2);
  }

  .login-screen .login-language a:hover {
    background: rgba(255, 248, 235, 0.07);
    color: var(--lc-text);
  }

  .login-screen .login-language a.active {
    background: var(--lc-gold);
    color: #1d1403;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-screen .story-copy > *,
  .login-screen .story-points,
  .login-screen .login-form-wrap,
  .login-screen .login-demo-link,
  .login-screen .cortex-letter-list::after,
  .login-screen .story-points li::before,
  .login-screen .story-copy h1 em,
  .login-screen .story-copy .kicker::before,
  .login-screen .login-panel .button.primary::after,
  .cortex-hud-title i {
    animation: none;
  }

  .login-screen .cortex-letter-list::after {
    display: none;
  }
}