/* login.php's landing-style redesign — matches the marketing/logged-in
   nav and page style instead of the plain auth-card look. Loads after
   auth-login.css so its same-specificity rules win, overriding just the
   couple of declarations that don't fit a marketing-style page (body
   background/text color) without touching that shared file, which
   forgot-password/register/accept-invite/reset-password/etc. still need
   for the dark auth-shell look. Everything else from auth-login.css
   (.login-card layout, etc.) still applies untouched.

   The nav itself needs no new CSS — it's the real top-nav markup from
   landing.css/public-nav.php, just with a curated flat link set (About/
   Security/Privacy/Support) instead of the marketing mega-menu, since a
   returning participant lands here, not an org buyer. */

body {
    background: var(--paper);
    color: var(--text);
}

/* 1280px here to match .container everywhere else on the site, instead of
   auth-login.css's 1200px (a leftover from the old centered-card layout). */
.container { max-width: 1280px; }

/* Two columns: .login-landing supplies the grid, .container supplies the
   centering/padding. Left column is a fixed 400px, matching
   auth-login.css's .login-card max-width exactly so the card keeps its
   original size with no override needed. */
.login-landing { display: grid; grid-template-columns: 400px 1fr; gap: 56px; align-items: start; padding-top: 56px; }
/* auth-login.css's .login-card is width:100%+max-width:400px with no
   box-sizing set, so its padding rendered on top of that 400px instead of
   inside it — invisible in the old single-card layout, but here it made
   the card overflow its track and overlap the intro column next to it.
   border-box fixes it, same as .login-field input already does. */
.login-landing .login-card { box-sizing: border-box; }
.login-intro h1 { font-family: 'Inter', system-ui, sans-serif; font-size: 36px; line-height: 1.18; margin: 0 0 14px; }
.login-intro .lede { font-size: 16.5px; color: var(--slate); margin: 0 0 26px; }

/* Shared/public-computer callout — a returning participant on a library or
   workforce-center computer needs this told to them. Same light-card,
   brand-tinted recipe as .error-box, green instead of red since it's a
   tip, not a warning. */
.shared-computer-tip { display: flex; gap: 12px; background: var(--green-light); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 26px; }
.shared-computer-tip svg { width: 20px; height: 20px; color: var(--green-text); flex-shrink: 0; margin-top: 1px; }
.shared-computer-tip strong { display: block; color: var(--navy); font-size: 14.5px; margin-bottom: 4px; }
.shared-computer-tip p { margin: 0; font-size: 13.5px; color: var(--slate); line-height: 1.6; }

.login-value-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.login-value-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--text); }
.login-value-list svg { width: 18px; height: 18px; color: var(--green-text); flex-shrink: 0; margin-top: 2px; }

@media (max-width: 860px) {
    .login-landing { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
    .login-intro { text-align: center; }
    .login-intro h1 { font-size: 28px; }
    .login-value-list { align-items: center; }
    .login-value-list li { text-align: left; }
}

.new-here-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; box-shadow: var(--shadow); margin-top: 28px; }
.new-here-card h2 { font-family: 'Inter', system-ui, sans-serif; color: var(--navy); font-size: 21px; margin: 0 0 8px; }
.new-here-card p { color: var(--slate); font-size: 14.5px; margin: 0 0 18px; }
.new-here-card .coordinator-note { font-size: 12.5px; color: var(--ash); margin: 14px 0 0; }

/* Second path back to the marketing site, near the bottom of the page —
   the logo up top is the first, less-obvious one. */
.marketing-link { margin: 18px 0 0; font-size: 13.5px; color: var(--slate); }
.marketing-link a { color: var(--blue); font-weight: 600; text-decoration: none; }
.marketing-link a:hover { text-decoration: underline; }