/* Landing page — sidebar + sign-in card */

.landing-page {
  display: grid;
  grid-template-columns: 30rem 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header  content"
    "paynow  content";
  min-height: 100vh;
  align-content: start;
}

/* ── Navy header (logo + tagline) ── */

.landing-header-section {
  grid-area: header;
  background: var(--color-brand-navy);
  color: var(--color-white);
  padding: var(--space-12) var(--space-14);
  box-sizing: border-box;
}

.landing-logo {
  margin-bottom: var(--space-10);
}

.landing-logo-img {
  display: block;
  width: 10.9375rem;
  max-width: 100%;
  height: auto;
}

.landing-header-section h1 {
  margin: 0;
}

.landing-header-desktop-extra {
  margin-top: var(--space-5);
}

.landing-header-desktop-extra p {
  color: var(--color-text-on-dark-muted);
  margin: 0 0 var(--space-6);
}

/* ── Navy Pay Now section ── */

.landing-paynow-section {
  grid-area: paynow;
  background: var(--color-brand-navy);
  color: var(--color-white);
  padding: 0 var(--space-14) var(--space-12);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.landing-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 0 0 var(--space-7);
}

/* ── Pay Now mini-form ── */

.landing-pay-now-heading {
  color: var(--color-brand-green);
  margin: 0 0 var(--space-5);
  text-align: center;
}

.landing-pay-button {
  width: 100%;
  margin-top: var(--space-2);
}

/* ── Main content / sign-in card ── */

.landing-content {
  grid-area: content;
  background: var(--color-page-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  box-sizing: border-box;
}

.signin-card {
  width: 100%;
  max-width: 31.25rem;
  box-sizing: border-box;
}

.signin-card h2 {
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.signin-card > p {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
}

.signin-forgot-password-link {
  display: block;
  text-align: right;
  color: var(--color-accent-blue);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  margin: calc(-1 * var(--space-2)) 0 var(--space-6);
}

.signin-forgot-password-link:hover {
  text-decoration: underline;
}

.signin-submit-button {
  width: 100%;
}

.signin-divider {
  text-align: center;
  margin-top: var(--space-10);
}

.signin-divider--mobile {
  display: none;
}

.signin-divider h4 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-text-primary);
}

.signin-divider h4::before,
.signin-divider h4::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-divider);
}

.signin-divider-subtext {
  color: var(--color-text-secondary);
  margin: var(--space-1) 0 var(--space-4);
  font-weight: 400 !important;
}

.signin-cta-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ── Responsive ── */

@media (max-width: 900px) {
  .landing-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header"
      "content"
      "paynow";
  }

  .landing-header-section,
  .landing-paynow-section {
    padding: var(--space-10);
  }

  .landing-paynow-section {
    justify-content: flex-start;
  }

  .landing-header-desktop-extra {
    display: none;
  }

  .signin-divider--desktop,
  .landing-divider {
    display: none;
  }

  .signin-divider--mobile {
    display: block;
  }

  .signin-cta-link {
    margin-top: var(--space-3);
  }

  .landing-content {
    align-items: start;
    padding: 0;
  }

  .signin-card {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
}

@media (max-width: 480px) {
  .landing-header-section {
    padding: var(--space-8) var(--space-5);
  }

  .landing-paynow-section {
    padding: var(--space-8) var(--space-5);
  }

  .landing-logo-img {
    width: 9.375rem;
  }

  .landing-header-section h1 {
    font-size: 1.375rem;
    line-height: 130%;
  }

  .signin-card {
    padding: var(--space-7) var(--space-5);
  }

  .signin-submit-button,
  .signin-cta-link,
  .landing-pay-button {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    font-size: 1rem;
  }
}