/* Page-specific rules for login.php — one unified card (navy brand column + white form
   column) centered inside the SAME max-width container the home page uses (index.php's
   .wrap: max-width 1140px, margin 0 auto), instead of the old edge-to-edge 50/50 split. */

body{background:linear-gradient(180deg,var(--sky-2),#fff)}

/* HEADER — same as index.php's, since login.php doesn't share its inline <style> block */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.wrap{max-width:1140px;margin:0 auto;padding:0 26px}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.nav .logo img{height:38px}
.menu{display:flex;align-items:center;gap:30px}
.menu a.l{font-size:.9rem;font-weight:600;color:var(--ink)}
.menu a.l:hover{color:var(--cyan-deep)}
@media(max-width:860px){
  .menu a.l{display:none}
  /* Only the toggle shows in the bar on mobile — "Get started" already lives in the
     dropdown below, so it doesn't crowd the hamburger button on the right edge. */
  .menu > a.btn.fill{display:none}
}
/* auth.css's shared .btn is width:100% for the form's submit button — the desktop nav's
   "Get started" button must stay its natural inline size (the mobile-menu copy is meant to
   stretch full-width there too, same as the home page, via the flex column's default stretch). */
.menu .btn{width:auto}

.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  background:none;border:none;cursor:pointer;flex:none}
.nav-toggle svg{width:22px;height:22px;color:var(--navy)}
.nav-toggle:active svg{opacity:.6}
@media(max-width:860px){.nav-toggle{display:inline-flex}}

.mobile-menu{display:none;flex-direction:column;gap:2px;background:#fff;border-bottom:1px solid var(--line);padding:10px 26px 18px}
.mobile-menu.open{display:flex}
.mobile-menu a.l{padding:12px 4px;font-size:.95rem;font-weight:600;color:var(--ink);border-top:1px solid var(--line)}
.mobile-menu a.l:first-child{border-top:0}
.mobile-menu .btn{margin-top:10px;justify-content:center}
@media(min-width:861px){.mobile-menu{display:none !important}}

.screen{
  display:flex;
  max-width:1140px;
  margin:0 auto;
  padding:56px 26px;
  min-height:calc(100vh - 76px);
  align-items:center;
}
.screen-card{
  width:100%;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
@media(max-width:900px){
  /* Once .brand (below) hides, .screen-card is just the short login form — centering it in
     the full viewport height left a large blank gap above, making the page look empty until
     scrolled. Top-align instead. */
  .screen{padding:32px 20px;max-width:520px;align-items:flex-start}
  /* .screen-card still defined a second grid column sized for the now-hidden .brand, leaving
     a permanent empty gap on the right of the form. Collapse to one column. */
  .screen-card{grid-template-columns:1fr}
}

.brand{
  justify-content:flex-start;
  padding:48px 44px;
}
.brand::before{width:520px;height:520px;top:-220px;right:-180px}
.brand::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.05),transparent 65%);bottom:-140px;left:-110px;pointer-events:none}
@media(max-width:900px){.brand{display:none}}

.lg-mid{position:relative;margin-top:40px}

.lg-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:20px}
.lg-eyebrow::before{content:"";width:18px;height:2px;background:var(--cyan);display:inline-block}

.lg-mid h1{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:20px}
.lg-mid h1 .u{color:var(--cyan)}
.lg-mid p{color:#c4d3e6;font-size:1.02rem;line-height:1.65;max-width:380px}

.lg-badge{position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:32px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:9px 18px 9px 9px;width:fit-content}
.lg-badge .ic{width:26px;height:26px;border-radius:50%;background:var(--cyan);display:grid;place-items:center;flex:none}
.lg-badge .ic svg{width:13px;height:13px;color:#fff}
.lg-badge span{font-size:.82rem;font-weight:600;color:#e4ecf5}
.lg-badge b{color:#fff}

.brand-foot{margin-top:auto;padding-top:36px}

.formside{padding:56px 48px;display:flex;align-items:center;justify-content:center}
.card{width:100%;max-width:400px}
@media(max-width:520px){.brand,.formside{padding:32px 26px}}