/* Sign-in page: site header / footer and theme tokens; big logo, card with tabs, features strip, GCC flags. */
.rs-login { position: relative; display: flex; flex-direction: column; align-items: center; padding-block: 18px 32px; overflow: hidden; }

/* Stage: logo, card and the two bikes behind its edges */
.rs-login__stage { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.rs-login__brand { display: block; position: relative; z-index: 1; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .35)); }
.rs-login__brand img { display: block; width: clamp(180px, 22vw, 280px); height: auto; }
.rs-login__tagline {
  position: relative; z-index: 1; margin: 6px 0 16px; font-family: var(--rs-font-latin); font-weight: 600;
  font-size: clamp(14px, 1.5vw, 19px); letter-spacing: .42em; text-indent: .42em; color: var(--rs-text-secondary);
}
.rs-login__tagline span { color: var(--rs-price); }

.rs-login__bike {
  position: absolute; z-index: 0; bottom: 0; height: min(660px, 92%); width: auto; pointer-events: none; user-select: none; opacity: .9;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.rs-login__bike--left {
  right: calc(50% + 236px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 86%, transparent 100%), linear-gradient(90deg, transparent 0, #000 45%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 86%, transparent 100%), linear-gradient(90deg, transparent 0, #000 45%, #000 80%, transparent 100%);
}
.rs-login__bike--right {
  left: calc(50% + 236px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 86%, transparent 100%), linear-gradient(270deg, transparent 0, #000 45%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 86%, transparent 100%), linear-gradient(270deg, transparent 0, #000 45%, #000 80%, transparent 100%);
}

/* Card (same surface, border and radius as the site's other cards) */
.rs-login__card {
  position: relative; z-index: 2; width: min(100%, 540px);
  display: grid; gap: 16px; padding: 28px 32px 22px; text-align: center;
  border: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg); background: var(--rs-card-bg);
  box-shadow: var(--rs-shadow-md);
}
.rs-login__card::before { content: ""; position: absolute; inset: -1px -1px auto; height: 3px; border-radius: var(--rs-radius-lg) var(--rs-radius-lg) 0 0; background: var(--rs-primary-gradient-x); }
.rs-login__title { margin: 0; font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; color: var(--rs-text); }
.rs-login__sub { margin: -8px 0 4px; font-size: 14.5px; color: var(--rs-text-muted); }

.rs-login__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--rs-border); border-radius: var(--rs-radius-md); background: var(--rs-surface-2); }
.rs-login__tabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px;
  border: 0; border-radius: var(--rs-radius-sm); background: transparent; color: var(--rs-text-muted);
  font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer;
}
.rs-login__tabs button:hover { color: var(--rs-text); }
.rs-login__tabs button i { font-size: 17px; }
.rs-login__tabs button[aria-selected="true"] { background: var(--rs-primary-gradient); color: #fff; box-shadow: var(--rs-shadow-red); }
.rs-login__tabs button:focus-visible { outline: none; box-shadow: var(--rs-focus-ring); }

.rs-login__field { text-align: start; }
.rs-login__field .rs-control { height: 50px; font-size: 16px; }
.rs-login__note { display: flex; gap: 6px; align-items: center; margin: 8px 0 0; font-size: 13px; color: var(--rs-text-muted); }

.rs-login__remember { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-weight: 700; font-size: 14.5px; color: var(--rs-text); cursor: pointer; }
.rs-login__remember input { width: 18px; height: 18px; accent-color: var(--rs-racing-red); }

.rs-login__submit { height: 52px; width: 100%; font-size: 17px; font-weight: 800; }
.rs-login__submit i { font-size: 20px; }
.rs-login__terms { margin: 0; font-size: 12.5px; color: var(--rs-text-subtle); }
.rs-login__terms a { color: var(--rs-text-secondary); text-decoration: underline; }

/* Features strip (same look as the ad page highlights) */
.rs-login__features {
  position: relative; z-index: 2; list-style: none; margin: 28px 0 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg); background: var(--rs-card-bg); overflow: hidden;
}
.rs-login__features li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; text-align: center; }
.rs-login__features li + li { border-inline-start: 1px solid var(--rs-border); }
.rs-login__features i { font-size: 28px; line-height: 1; color: var(--rs-price); margin-bottom: 4px; }
.rs-login__features strong { font-size: 16px; font-weight: 800; color: var(--rs-text); }
.rs-login__features span { font-size: 13px; color: var(--rs-text-muted); }

/* GCC flags */
.rs-login__flags {
  list-style: none; margin: 22px 0 0; padding: 0; width: 100%; max-width: 900px;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
}
.rs-login__flags li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--rs-text-secondary); }
.rs-login__flags img { width: 52px; height: 38px; object-fit: cover; border-radius: var(--rs-radius-sm); border: 1px solid var(--rs-border); box-shadow: var(--rs-shadow-sm); }

@media (max-width: 1099.98px) { .rs-login__bike { height: min(480px, 80%); opacity: .45; } }
@media (max-width: 767.98px) {
  .rs-login__bike { display: none; }
  .rs-login__card { padding: 22px 16px 18px; }
  .rs-login__features { grid-template-columns: 1fr 1fr; }
  .rs-login__features li:nth-child(odd) { border-inline-start: 0; }
  .rs-login__features li:nth-child(n + 3) { border-top: 1px solid var(--rs-border); }
  .rs-login__flags { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
}