@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/roboto-400.woff2") format("woff2");
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/roboto-700.woff2") format("woff2");
}

:root {
  font-family: Roboto, Arial, sans-serif;
  color: #213f68;
  background: #fff;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: linear-gradient(90deg, #fff 0%, #f3f6ff 50%, #fff 100%);
}

button, input, select { font: inherit; }
button { cursor: pointer; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.topbar {
  position: relative;
  height: 64px;
  margin: 0 46px 0 36px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.powered-by { display: flex; align-items: center; height: 68px; }
.powered-mark { display: block; width: 60px; height: 60px; }
.powered-by p { margin: 0 0 0 7px; font-size: 16px; line-height: 21.333px; }
.powered-by strong { font-weight: 700; }

.language-picker { position: relative; width: 369px; margin-top: -5px; }
.language-picker select {
  appearance: none;
  width: 100%;
  height: 64px;
  padding: 5px 46px 0 16px;
  border: 2.667px solid #d9d9d9;
  border-radius: 22px;
  background: #fff;
  color: #363636;
  font-size: 18.667px;
}
.language-picker svg {
  position: absolute;
  pointer-events: none;
  right: 17px;
  top: 25px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #aaa9a9;
  stroke-width: 1.7;
}

.login-layout {
  display: grid;
  grid-template-columns: minmax(0, calc(50% - 21px)) minmax(0, 1fr);
  align-items: center;
  gap: 43px;
  margin: 27px 46px 17px 36px;
  min-height: 540px;
  height: calc(100vh - 108px);
}

.hero {
  align-self: stretch;
  min-width: 0;
  border-radius: 34px;
  overflow: hidden;
  /* The reference artwork occupies x=36,y=91,w=898,h=752.
     CSS crops just that panel, preserving the supplied photograph and lettering.
     The login card and all other UI elements are live HTML/CSS. */
  background-image: url("assets/reference.png");
  background-repeat: no-repeat;
  background-size: 213.8084632517% 114.3617021277%;
  background-position: 3.5225048924% 84.2592592593%;
}

.login-card {
  width: 100%;
  min-width: 0;
  height: 464px;
  padding: 83px 33.333px 60px;
  border: 1.333px solid #f0f0f0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 5.333px 10.667px rgba(0, 0, 0, .08);
}

.rankmi-logo { display: block; width: 166px; height: auto; margin-left: 11.333px; }
.login-actions { display: grid; gap: 12px; margin-top: 30px; margin-left: .75px; }
.login-input {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 1.333px solid #d9d9d9;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 5.333px 10.667px rgba(0, 0, 0, .08);
  color: #213f68;
  font-size: 16px;
  outline: none;
}
.login-input::placeholder { color: #757575; opacity: 1; }
.login-input:focus { border-color: #0085ff; box-shadow: 0 0 0 2px rgba(0, 133, 255, .15); }
.sign-in-button {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: 11px;
  background: #0085ff;
  box-shadow: 0 5.333px 10.667px rgba(0, 0, 0, .08);
  color: #fff;
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  text-align: center;
}
.sign-in-button:hover { background: #0077e6; }
.sign-in-button:disabled { opacity: .75; cursor: default; }

.login-footer { margin-top: 22px; text-align: center; }
.login-footer p { margin: 0; color: #757575; font-size: 16px; font-weight: 400; line-height: 21.333px; }
.login-footer a { color: #0085ff; text-decoration: underline; cursor: pointer; }
.company-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0085ff;
  font-size: 18.667px;
  font-weight: 700;
  line-height: 21.333px;
}
.company-button svg { width: 16px; height: 21.333px; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid #0085ff; outline-offset: 4px; }

@media (max-width: 1200px) {
  .topbar { margin-right: 28px; margin-left: 28px; }
  .login-layout { margin-right: 28px; margin-left: 28px; gap: 28px; }
  .login-card { height: auto; padding: 56px 24px; }
  .login-footer p { line-height: 24px; }
}

@media (max-width: 760px) {
  .topbar { height: 94px; margin: 0 20px; align-items: center; }
  .powered-by { height: 60px; }
  .powered-mark { width: 48px; height: 48px; }
  .powered-by p { max-width: 120px; margin-left: 2px; font-size: 12px; line-height: 17px; }
  .language-picker { width: 135px; margin-top: 0; }
  .language-picker select { height: 46px; border-width: 2px; border-radius: 15px; font-size: 16px; padding-top: 0; }
  .language-picker svg { top: 13px; right: 12px; width: 18px; height: 18px; }
  .login-layout { display: flex; flex-direction: column-reverse; gap: 28px; height: auto; min-height: 0; margin: 12px 20px 24px; }
  .login-card { padding: 42px 24px; border-radius: 20px; }
  .rankmi-logo { width: 150px; margin-left: 0; }
  .login-actions { margin-top: 28px; gap: 12px; }
  .login-input, .sign-in-button { height: 54px; font-size: 15px; }
  .login-footer { margin-top: 28px; }
  .login-footer p { font-size: 13px; line-height: 20px; }
  .company-button { margin-top: 18px; font-size: 16px; }
  .hero { width: 100%; aspect-ratio: 898 / 752; border-radius: 24px; }
}