/* Login proportions follow the supplied desktop reference. */
:root {
  --login-bg: #fcfcfb;
  --login-ink: #0b0b0b;
  --login-ring: rgba(11, 11, 11, .10);
  /* One reference pixel at a 1440px viewport. */
  --login-unit: clamp(.75px, .069444vw, 1.5px);
}
body.login {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--login-bg);
  color: var(--login-ink);
  display: flex;
  flex-direction: column;
}
.login__head { padding: calc(28 * var(--login-unit)) calc(54 * var(--login-unit)) 0; }
.login__head .brand { font-size: calc(32 * var(--login-unit)); line-height: 1.2; }
.login__main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.036fr) minmax(0, 1fr);
  align-items: start;
  column-gap: 7.4vw;
  padding: calc(34 * var(--login-unit)) 6.45vw calc(38 * var(--login-unit));
  width: 100%;
}
.login__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  padding-top: calc(100 * var(--login-unit));
}
.login__title {
  margin: 0;
  max-width: 100%;
  font-family: 'Halant', Georgia, serif;
  font-weight: 400;
  font-size: calc(72 * var(--login-unit));
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.login__sub {
  margin: calc(3 * var(--login-unit)) 0 0;
  font-family: 'Halant', Georgia, serif;
  font-weight: 400;
  font-size: calc(24 * var(--login-unit));
  line-height: 1.3;
  text-wrap: balance;
}

/* H. The home page's badge above the title: the card's own chrome (edge,
   half-white ground, faint shadow) as a small round pill, Halant like the
   lines under it, a black dot leading the words. Quiet, not a control. */
.login__badge {
  display: inline-flex;
  align-items: center;
  gap: calc(9 * var(--login-unit));
  margin: 0 0 calc(20 * var(--login-unit));
  height: calc(34 * var(--login-unit));
  padding: 0 calc(16 * var(--login-unit)) 0 calc(13 * var(--login-unit));
  border: 1px solid #e7e7e4;
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 6px 24px rgba(11, 11, 11, .035);
  /* The sans, not Halant: Halant's tall ascent sits the words low against
     the dot at line-height 1; the sans centres. */
  font-family: var(--sans);
  font-size: calc(13 * var(--login-unit));
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--login-ink);
}
/* The badge lives in the column's top padding, so the title and everything
   under it sit exactly where they do on the login. */
.home .login__left,
.login__left:has(.login__badge) { padding-top: calc((100 - 34 - 20) * var(--login-unit)); }
/* H1. "Now works with": the badge types an assistant's name, holds it, erases
   it and types the next. Between names three small ink dots flicker where the
   name goes, the loading stage's dots at badge size. */
.works__line { display: inline-flex; align-items: center; white-space: nowrap; }
/* The pill never changes width and nothing in it ever moves: the script sets
   its width to the widest sentence ("Now works with Instinct"), which it
   frames exactly, and the dot and the prefix hold their place from the left
   while the name types after them. */
.works { justify-content: flex-start; box-sizing: border-box; }
/* A thin ink caret after the name while it types and holds. */
.works__caret {
  width: 1px;
  height: calc(14 * var(--login-unit));
  margin-left: calc(2 * var(--login-unit));
  background: var(--login-ink);
  animation: works-caret 1s steps(1) infinite;
}
.works__caret[hidden] { display: none; }
@keyframes works-caret { 50% { opacity: 0; } }
.works__dots { display: inline-flex; gap: calc(3 * var(--login-unit)); align-items: center; }
.works__dots[hidden] { display: none; }
.works__dots span {
  width: calc(4 * var(--login-unit));
  height: calc(4 * var(--login-unit));
  border-radius: 999px;
  background: var(--login-ink);
  animation: works-flicker 1s ease-in-out infinite;
}
.works__dots span:nth-child(2) { animation-delay: .16s; }
.works__dots span:nth-child(3) { animation-delay: .32s; }
@keyframes works-flicker { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.works__name { font-weight: 600; }

.login__badge::before {
  content: "";
  width: calc(7 * var(--login-unit));
  height: calc(7 * var(--login-unit));
  border-radius: 999px;
  background: var(--login-ink);
  flex-shrink: 0;
  /* Alive: the dot breathes, the app's live-dot pulse (2s, half opacity at
     the middle). Still under reduced motion, below. */
  animation: badge-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes badge-pulse { 50% { opacity: .35; } }
.login__card {
  margin-top: calc(28 * var(--login-unit));
  width: 100%;
  max-width: calc(468 * var(--login-unit));
  padding: calc(30 * var(--login-unit));
  border: 1px solid #e7e7e4;
  border-radius: calc(34 * var(--login-unit));
  background: var(--login-bg);
  box-shadow: 0 8px 32px rgba(11, 11, 11, .035);
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--login-unit));
  font-family: var(--sans);
}
.login__field { display: block; }
.login__field input {
  width: 100%;
  height: calc(42 * var(--login-unit));
  padding: 0 calc(16 * var(--login-unit));
  border: 1px solid #dededb;
  border-radius: calc(10 * var(--login-unit));
  background: rgba(255, 255, 255, .5);
  font-family: inherit;
  font-size: calc(16 * var(--login-unit));
  line-height: 1.5;
  color: var(--login-ink);
}
.login__field input::placeholder { color: #92918c; }
.login__field input:focus-visible { outline: 2px solid #3276e8; outline-offset: 2px; }
.login__btn {
  min-height: calc(42 * var(--login-unit));
  padding: 0 calc(16 * var(--login-unit));
  border: 0;
  border-radius: calc(10 * var(--login-unit));
  background: var(--login-ink);
  color: #fff;
  font-family: inherit;
  font-size: calc(16 * var(--login-unit));
  line-height: 1.5;
  font-weight: 500;
  cursor: pointer;
}
.login__btn:hover { background: #252525; }
/* Thinking: the loader's dots, white, centred in the button's box. */
.login__btn.is-thinking { display: inline-flex; align-items: center; justify-content: center; cursor: default; }
.login__btn.is-thinking .dots { gap: 6px; }
.login__btn.is-thinking .dots span { width: 6px; height: 6px; background: #fff; animation-duration: 1.8s; }
.login__btn.is-thinking .dots span:nth-child(2) { animation-delay: 0.24s; }
.login__btn.is-thinking .dots span:nth-child(3) { animation-delay: 0.48s; }
.login__btn.is-thinking:hover { background: var(--login-ink); }
/* The sent state: the button's box holding the status line and a check,
   centred, no pointer, no hover. Not a button; nothing is left to press. */
.login__btn--done { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; cursor: default; }
.login__btn--done:hover { background: var(--login-ink); }

.login__legal {
  font-family: 'Halant', Georgia, serif;
  font-weight: 400;
  margin: calc(-4 * var(--login-unit)) 0 0;
  font-size: calc(15 * var(--login-unit));
  line-height: 1.5;
  color: var(--ink-muted);
  text-align: center;
}
/* Links share the line's grey; weight and the underline mark them, hover darkens. */
.login__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color 150ms; }
.login__legal a:hover { color: var(--ink); }
.login__legal strong { font-weight: 400; color: inherit; }
.login__photo { min-width: 0; }
.login__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  border-radius: calc(16 * var(--login-unit));
}
.login__media img,
.login__media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.login__media video { opacity: 0; }
.login__media video.is-playing { opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 1024px) {
  body.login { --login-unit: 1px; }
  .login__head { padding: 24px 24px 0; }
  .login__head .brand { font-size: 28px; }
  .login__main { grid-template-columns: 1fr; align-items: center; padding: 48px 24px 64px; }
  .login__left { width: 100%; max-width: 600px; margin: auto; padding-top: 0; }
  .home .login__left,
  .login__left:has(.login__badge) { padding-top: 0; }
  .login__photo { display: none; }
  .login__title { font-size: clamp(42px, 7vw, 64px); }
  .login__sub { margin-top: 14px; font-size: 22px; }
  .login__card { margin-top: 30px; }
  .login__field input, .login__btn { min-height: 44px; }
}
@media (max-width: 480px) {
  .login__sub { font-size: 20px; }
  .login__card { padding: 24px; border-radius: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .login__badge::before { animation: none; }
  .works__dots span { animation: none; opacity: 1; }
  .works__caret { display: none; }
  .login__media video { display: none; }
}

/* Field feedback stays inside the form and expands only when needed. */
.login__error {
  margin: 0;
  font-size: max(12px, calc(13 * var(--login-unit)));
  line-height: 1.45;
  color: #b42318;
  text-align: left;
}
.login__error:not(:empty) { margin-top: calc(6 * var(--login-unit)); }
.login__field input[aria-invalid="true"] { border-color: #b42318; }
.login__field input[aria-invalid="true"]:focus-visible { outline-color: #b42318; }

/* Show/hide password. The eye sits inside the field, on the right. */
.login__pw { position: relative; }
.login__pw input { padding-right: calc(44 * var(--login-unit)); }
.login__eye {
  position: absolute;
  top: 50%;
  right: calc(6 * var(--login-unit));
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(32 * var(--login-unit));
  height: calc(32 * var(--login-unit));
  border: 0;
  border-radius: calc(8 * var(--login-unit));
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 150ms;
}
.login__eye:hover { color: var(--login-ink); }
.login__eye svg { width: calc(16 * var(--login-unit)); height: calc(16 * var(--login-unit)); }

/* Request access: a ghost pill under the card, where Claude puts the desktop app. */
.login__request {
  display: inline-flex;
  align-items: center;
  margin-top: calc(28 * var(--login-unit));
  height: calc(40 * var(--login-unit));
  padding: 0 calc(18 * var(--login-unit));
  border: 1px solid #dededb;
  border-radius: calc(10 * var(--login-unit));
  background: rgba(255, 255, 255, .5);
  font-family: var(--sans);
  font-size: calc(15 * var(--login-unit));
  font-weight: 500;
  color: var(--login-ink);
  transition: background 150ms, border-color 150ms;
}
.login__request:hover { background: #fff; border-color: #cfcdc6; }
.login__request { cursor: pointer; }


/* Request mode: no policy line, and no room kept for it; the card ends at
   its button. Asked for on the home page, where the card is a request first;
   the same rule reaches the login's request mode, since it is one card. */
.login__card[data-mode="request"] .login__legal { display: none; }