@import "https://assets.elements.dev/assets/app/shared/styles/page.b9b382b613ec836c.css";

/* Auth page shell. No card. No background fill. No border. The form
   sits directly on the page background. Same treatment as /purchase and
   /pricing: the shell fills the wide marketing column so its left edge
   and top line up with feed / install / learn (no lurch when navigating
   between them), but the form content is capped at the form width and
   LEFT-aligned within the column rather than centered — so the inputs
   stay a sensible width, they just share the site's left edge. */
.auth-shell {
  /* Top padding is 0 — PageChrome's page-chrome-main already provides
     the canonical --space-16 top band, so any extra here just makes
     /signin and /signup sit lower than every other page. */
  max-width: var(--container-marketing);
  margin: 0 auto;
  padding: 0 var(--space-8) 5rem;
  width: 100%;
}
.auth-shell > * {
  max-width: var(--container-form);
}

/* H1 + subtitle. Canonical top-level page title — the same scale as
   .page-hero-title / .account-h1 (48px desktop, 40px on phones) so
   /signin and /signup match /install, /pricing, /home, etc. */
.auth-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--page-title);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin: 2rem 0 var(--space-4);
}

.auth-shell-head {
  margin-bottom: 2rem;
}

.auth-subtitle {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}
.auth-subtitle a {
  color: var(--accent);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.auth-subtitle a:hover { color: var(--accent-deep); }

@media (max-width: 700px) {
  .auth-shell { padding: 0.5rem 1.5rem 3rem; }
  .auth-title {
    font-size: 2.5rem;
    line-height: 1.1;
  }
}

@media (max-width: 640px) {
  .auth-title { margin-top: 1.5rem; }
}