/* Landing and sign-in pages. The same rules as the uniCare Camps landing page, and the picture
   (landing-hero.webp, 1536 x 1024) has the laptop framed exactly as in the Camps picture, so the
   laptop appears the same size and in the same place at every screen width. Hidden at 900 px
   and narrower. */

:root {
  --uc-teal: #0098a0;
  --uc-teal-dark: #007a82;
  --uc-ink: #182030;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  color: var(--uc-ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}
.landing {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background-color: #ffffff;
  background-image: url('/images/landing-hero.webp');
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Soft white gradient on the left half — fades the image out so the
   text/logo/button sit on a clean white surface with no visible seam. */
.landing-scene {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    #ffffff 0%,
    #ffffff 32%,
    rgba(255,255,255,0.85) 42%,
    rgba(255,255,255,0) 58%);
  z-index: 0;
  pointer-events: none;
}
.landing-content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  max-width: 640px;
}
.landing-logo {
  display: block;
  width: 190px;
  height: auto;
  /* The PNG has ~12% transparent padding on its left, so nudge it left by
     that amount (190 * 49/400 ≈ 23px) to line the "u" up with the text. */
  margin-left: -23px;
}
.landing-hero-block {
  margin: auto 0;
}
.landing-title {
  font-size: 54px;
  font-weight: 700;
  color: var(--uc-ink);
  letter-spacing: -1px;
  margin: 0 0 14px;
  line-height: 1.05;
}
.landing-sub {
  font-size: 26px;
  color: rgba(24,32,48,.82);
  margin: 0 0 40px;
  font-weight: 500;
  line-height: 1.4;
}
.landing-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--uc-teal);
  color: #ffffff;
  padding: 16px 42px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.4px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  box-shadow: 0 8px 22px rgba(0, 152, 160, 0.28), 0 2px 5px rgba(0, 152, 160, 0.18);
}
.landing-btn:hover {
  background: var(--uc-teal-dark);
  box-shadow: 0 12px 30px rgba(0, 152, 160, 0.34), 0 3px 8px rgba(0, 152, 160, 0.22);
  transform: translateY(-1px);
}
.landing-btn:active { transform: translateY(0); }
.landing-version {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(24,32,48,.5);
  margin-top: auto;
  letter-spacing: 0.2px;
}
.landing-mark {
  width: 30px;
  height: 30px;
  opacity: 0.75;
}
/* On narrower screens (tablets, phones), hide the right-side scene and
   centre the content column so the page still reads well. */
@media (max-width: 900px) {
  .landing { background-image: none; }
  .landing-scene { display: none; }
  .landing-content {
    max-width: 100%;
    padding: 32px 24px;
    align-items: flex-start;
  }
  .landing-hero-block {
    margin: auto 0;
  }
  .landing-title { font-size: 38px; }
  .landing-sub { font-size: 21px; margin-bottom: 32px; }
  .landing-btn { padding: 14px 32px; font-size: 16px; }
}
@media (max-width: 480px) {
  .landing-title { font-size: 30px; }
  .landing-sub { font-size: 19px; }
  .landing-logo { width: 160px; margin-left: -20px; }
}

/* No italics anywhere. */
*, *::before, *::after { font-style: normal !important; }

/* Sign-in page: the card sits where the title and Sign in button sit on the landing page. */
.login-card { max-width: 400px; box-shadow: 0 12px 36px rgba(24, 32, 48, 0.10); }
.login-card .auth-title { font-size: 24px; font-weight: 700; }
.login-page .landing-content a { display: inline-block; }