/* ======================================================
   LOGIN PAGE — WIDTH-FIRST SCALING (FIXED)
   ====================================================== */

.login-vh {
  max-width: 1400px;
      margin-inline: auto;
  padding: 3rem calc(3.5rem * 0.85);

  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
column-gap: calc(clamp(2rem, 4vw, 4rem) * 0.85);
  align-items: start;
}

/* ======================================================
   HERO COLUMN — SCALES LIKE AN IMAGE
   ====================================================== */
.hero-section {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2vw, 2rem);
  max-width: 100%;
}

/* Title scales by WIDTH */
.hero-title {
  font-size: clamp(2rem, 3vw, 3rem);
  max-width: 22ch;
}

.hero-subtitle {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  max-width: 52ch;
}

/* ======================================================
   FEATURE GRID — NEVER PUSHES DOWN
   ====================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.2vw, 1.25rem);

  max-width: 100%;
}

/* Feature cards compress inward */
.feature-card {
  padding: clamp(0.85rem, 1.1vw, 1.25rem);
}

/* Icons scale by WIDTH */
.feature-icon {
  width: clamp(34px, 3vw, 44px);
  height: clamp(34px, 3vw, 44px);
}

/* Text scales gently */
.feature-title {
  font-size: clamp(0.85rem, 1vw, 0.95rem);
}

.feature-description {
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  line-height: 1.35;
}

/* ======================================================
   LOGIN COLUMN — STABLE & UNTOUCHED
   ====================================================== */
.login-section {
  display: flex;
  justify-content: flex-start;
}

.login-card {
  width: 100%;
  max-width: 480px;
  padding: 2rem;
}

/* ======================================================
   LAPTOP SAFETY (THIS IS THE MAGIC)
   ====================================================== */
@media (max-width: 1280px) {
  .login-vh {
    grid-template-columns: minmax(0, 1fr) 420px;
  }

  .feature-card {
    padding: 0.75rem;
  }
}

/* ======================================================
   TABLET & BELOW
   ====================================================== */
@media (max-width: 1024px) {
  .login-vh {
    grid-template-columns: 1fr;
    padding: 2rem;
  }

  .hero-section {
    display: none;
  }
}

/* ======================================================
   FINAL POLISH — DIAGONAL SCALE FOR LAPTOPS
   ====================================================== */

/* Typical laptops */
@media (max-height: 900px) {
  .login-vh {
    transform: scale(0.95);
    transform-origin: top left;
  }
}

/* Smaller laptops */
@media (max-height: 820px) {
  .login-vh {
    transform: scale(0.92);
  }
}

/* Very compact screens */
@media (max-height: 760px) {
  .login-vh {
    transform: scale(0.90);
  }
}
.login-vh {
  column-gap: calc(clamp(2rem, 4vw, 4rem) * 0.85);
  transform-origin: top left;
}

.hero-section {
  max-width: 92%;
}