:root {
  color: #10233f;
  background: #f4f7fb;
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; min-height: 100vh; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); }

.login-story { background: #0b2242; color: white; padding: clamp(2rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: space-between; }

.brand { color: white; display: inline-flex; align-items: center; gap: .75rem; width: fit-content; text-decoration: none; font-family: "Manrope", sans-serif; font-weight: 800; font-size: 1.1rem; }
.brand span { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .4rem; color: #0b2242; background: white; }

.story-copy { max-width: 42rem; margin: clamp(4rem, 12vh, 9rem) 0; }
.eyebrow { color: #4b81bd; letter-spacing: .16em; font-size: .74rem; font-weight: 700; margin: 0 0 1rem; }
.login-story .eyebrow { color: #8ab4e1; }
h1, h2 { font-family: "Manrope", sans-serif; letter-spacing: -.035em; margin: 0; }
h1 { font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: 1.05; max-width: 12ch; }
.story-copy > p:last-child { color: #c7d5e7; font-size: 1.08rem; line-height: 1.7; max-width: 38rem; }

.benefits { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; color: #dce7f5; font-size: .9rem; }
.benefits li { border-top: 1px solid #36506f; padding-top: 1rem; }
.benefits span { display: block; color: #7faee0; font-size: .72rem; font-weight: 700; margin-bottom: .45rem; }

.login-panel { display: grid; place-items: center; padding: 2rem; }
.login-card { width: min(100%, 29rem); background: white; border: 1px solid #dce3ec; border-radius: 1rem; box-shadow: 0 24px 70px rgba(11, 34, 66, .09); padding: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(2rem, 4vw, 2.8rem); color: #0b2242; }
.login-card > p:not(.eyebrow) { color: #5d6b7c; line-height: 1.6; }

button { width: 100%; margin-top: 1.3rem; min-height: 3.4rem; border: 1px solid #bfc9d6; border-radius: .55rem; background: white; color: #12263f; font: 600 1rem "DM Sans", sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .8rem; }
button:hover { border-color: #246eb9; background: #f7faff; }
button:focus-visible { outline: 3px solid #8db9e5; outline-offset: 2px; }
button:disabled { cursor: wait; opacity: .72; }
.google-mark { color: #246eb9; font-weight: 800; }
.status { min-height: 1.5rem; margin-bottom: 0; font-size: .9rem; }
.privacy-note { padding-top: 1.1rem; border-top: 1px solid #e5eaf0; font-size: .78rem; }

@media (max-width: 820px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-story { min-height: 46vh; padding: 1.5rem; }
  .story-copy { margin: 3.5rem 0 2.5rem; }
  h1 { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .benefits { grid-template-columns: 1fr; }
  .benefits li:nth-child(n+2) { display: none; }
  .login-panel { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }