/* ============================================================================
   DRISHTI sign-in page.

   MEGA's static/mega/css/signin.css, copied unchanged: the animated field,
   the split card, the warm graphite study panel, the form column and the
   signing-in progress bar are all MEGA's, and depend only on tokens.css,
   base.css and components.css - which are byte-identical between the two
   dashboards. Nothing here is MEGA-specific; only the words on the page
   differ, and those live in the template.
   ========================================================================= */

/* ---- from brand.css --------------------------------------------------------- */

:root {
  --shell-bg:          #2A2C2F;
  --shell-active:      var(--thsti-maroon);
  --shell-rule-active: var(--thsti-orange);

  /* type one step larger throughout */
  --fs-body:    16px;
  --fs-sm:      15px;
  --fs-xs:      14px;
  --fs-label:   13px;
  --fs-section: 21px;
}

.btn-primary:hover,
.btn-primary:active { background: var(--thsti-maroon-dark); border-color: var(--thsti-maroon-dark); }

.input:focus, .select:focus, .textarea:focus {
  border-color: var(--thsti-maroon);
  box-shadow: 0 0 0 3px var(--thsti-maroon-100);
}

a:hover { color: var(--thsti-maroon-dark); }

/* ---- VTS signin.css (verbatim) --------------------------------------------- */

/* Sign-in page: one card on a light field with the brand's red and orange
   moving through it.

   Loaded only by login.html, so none of this is parsed on a working screen.
   Nothing here animates anything but transform, so the whole field
   composites on the GPU. */

.signin {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-5);
  background: #F2F3F5;
}

/* ---- the field ----------------------------------------------------------
   Fixed rather than absolute, so a short window scrolls the card without
   the field scrolling out from behind it. */

.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.sky > * { position: absolute; }

/* The palette lives here and nowhere else, so the whole field can be
   re-coloured by changing these six lines. The card carries the brand red;
   the field is its quiet counterpart. */
:root {
  --sky-ground: linear-gradient(168deg, #FAFAFB 0%, #ECEEF3 52%, #F1F0F6 100%);
  --sky-a: radial-gradient(circle, rgba(64, 64, 126, .58) 0%, rgba(64, 64, 126, .22) 42%, transparent 70%);
  --sky-b: radial-gradient(circle, rgba(90, 107, 140, .62) 0%, rgba(64, 64, 126, .24) 44%, transparent 70%);
  --sky-c: radial-gradient(circle, rgba(122, 138, 168, .44) 0%, transparent 64%);
  --sky-d: radial-gradient(circle, rgba(44, 44, 92, .34) 0%, transparent 62%);
  --sky-e: radial-gradient(circle, rgba(245, 137, 32, .30) 0%, transparent 62%);
}

.sky-base {
  inset: 0;
  background:
    radial-gradient(120% 85% at 50% -12%, #FFFFFF 0%, transparent 58%),
    var(--sky-ground);
}

/* Large fields of brand colour, drifting and swelling past each other.

   Everything here is big on purpose. Earlier versions added a dot
   grid, travelling lines and rings spreading from the middle; each of those
   is a shape, and shapes on top of one another read as clutter. This is one
   field with no edge to it, drifting and turning. */
.sky-glow {
  inset: -30%;
  will-change: transform;
  animation: sky-turn 40s linear infinite;
}
@keyframes sky-turn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.sky-glow i { position: absolute; border-radius: 50%; will-change: transform; }

.sky-glow i:nth-child(1) {
  width: 86vmax; height: 86vmax; left: -22%; top: -26%;
  background: var(--sky-a);
  animation: sky-drift-a 13s ease-in-out infinite;
}
.sky-glow i:nth-child(2) {
  width: 78vmax; height: 78vmax; right: -24%; bottom: -28%;
  background: var(--sky-b);
  animation: sky-drift-b 16s ease-in-out infinite;
}
.sky-glow i:nth-child(3) {
  width: 66vmax; height: 66vmax; left: 38%; top: 34%;
  background: var(--sky-c);
  animation: sky-drift-c 11s ease-in-out infinite;
}
.sky-glow i:nth-child(4) {
  width: 72vmax; height: 72vmax; right: -10%; top: -22%;
  background: var(--sky-d);
  animation: sky-drift-d 18s ease-in-out infinite;
}
.sky-glow i:nth-child(5) {
  width: 58vmax; height: 58vmax; left: -12%; bottom: -24%;
  background: var(--sky-e);
  animation: sky-drift-e 10s ease-in-out infinite;
}

@keyframes sky-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(22vw, 15vh, 0) scale(1.34); }
}
@keyframes sky-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.24); }
  50%      { transform: translate3d(-23vw, -17vh, 0) scale(.96); }
}
@keyframes sky-drift-c {
  0%, 100% { transform: translate3d(-14vw, 10vh, 0) scale(.82); }
  50%      { transform: translate3d(15vw, -12vh, 0) scale(1.30); }
}
@keyframes sky-drift-d {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.10); }
  50%      { transform: translate3d(-18vw, 20vh, 0) scale(.84); }
}
@keyframes sky-drift-e {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.90); }
  50%      { transform: translate3d(17vw, -14vh, 0) scale(1.28); }
}

/* Lifts the middle so the card sits on a calm ground, and settles the edges. */
.sky-veil {
  inset: 0;
  background:
    radial-gradient(30% 26% at 50% 46%, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .08) 58%, transparent 84%),
    radial-gradient(80% 70% at 50% 46%, transparent 58%, rgba(62, 24, 27, .08) 100%);
}

/* ---- the card ----------------------------------------------------------- */

.signin-card {
  position: relative;
  z-index: 1;
  place-self: center;
  width: 100%;
  max-width: 372px;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  background-color: var(--thsti-surface);
  background-image: var(--thsti-gradient);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: top left;
  border-radius: var(--r-1);
  box-shadow: 0 18px 44px rgba(62, 24, 27, .14), 0 2px 8px rgba(62, 24, 27, .08);
}

.signin-lockup {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-bottom: var(--sp-6);
}
.signin-lockup .row { display: flex; align-items: center; gap: 10px; }
.signin-lockup img { height: 40px; width: auto; display: block; }
.signin-lockup .abbr {
  font-family: var(--thsti-font-heading);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--thsti-text);
}
.signin-lockup .full {
  font-family: var(--thsti-font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--thsti-text-2nd);
}

.signin-fields { display: grid; gap: var(--sp-3); }
.signin-fields .input { height: 46px; }
.signin-card .btn-primary { width: 100%; height: 46px; margin-top: var(--sp-2); }

/* The label is in the placeholder; kept here for anyone using a screen reader. */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.signin-reveal {
  position: absolute;
  right: 5px; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  background: none;
  border: 0;
  border-radius: var(--r-1);
  color: var(--thsti-muted);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.signin-reveal:hover { color: var(--thsti-maroon); background: var(--thsti-panel); }
.signin-reveal .icon { width: 17px; height: 17px; }
.signin-reveal .when-shown { display: none; }
.signin-reveal.is-shown .when-hidden { display: none; }
.signin-reveal.is-shown .when-shown { display: block; }
.input-icon .input.has-reveal { padding-right: 44px; }

.signin-msg {
  margin-bottom: var(--sp-4);
  padding: 10px 12px;
  border-left: 3px solid var(--thsti-error);
  border-radius: var(--r-1);
  background: var(--thsti-error-bg);
  color: #96201F;
  font-size: var(--fs-xs);
}
.signin-msg.is-ok {
  border-left-color: var(--thsti-success);
  background: var(--thsti-success-bg);
  color: #1F5C32;
}

.signin-foot {
  position: relative;
  z-index: 1;
  font-size: var(--fs-xs);
  color: var(--thsti-text-2nd);
  text-align: center;
}

/* ---- signing in ---------------------------------------------------------
   Over the card rather than instead of it, so the field carries on behind
   and the page does not appear to jump somewhere else. */

.signing {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: none;
  justify-items: center;
  align-content: center;
  gap: var(--sp-4);
  background: rgba(244, 245, 248, .94);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.signing.is-on { display: grid; animation: signing-in var(--dur-3) var(--ease) both; }
@keyframes signing-in { from { opacity: 0; } to { opacity: 1; } }

.signing img { height: 48px; width: auto; display: block; }
.signing p { margin: 0; font-size: var(--fs-sm); color: var(--thsti-text-2nd); }

.signing .dots { display: flex; gap: 7px; }
.signing .dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--thsti-maroon);
  animation: signing-beat 1.3s var(--ease) infinite both;
}
.signing .dots i:nth-child(2) { background: var(--thsti-orange-mid); animation-delay: .16s; }
.signing .dots i:nth-child(3) { background: var(--thsti-orange);     animation-delay: .32s; }
@keyframes signing-beat {
  0%, 80%, 100% { transform: scale(.35); opacity: .45; }
  40%           { transform: scale(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .signing.is-on { animation: none; }
  .signing .dots i { animation: none; opacity: .8; transform: none; }
}

@media (max-width: 560px) {
  .signin { padding: var(--sp-6) var(--sp-4); }
  .signin-card { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
}

/* Motion is decoration here: none of it carries meaning, so it can all go. */
@media (prefers-reduced-motion: reduce) {
  .sky-glow, .sky-glow i { animation: none; }
}

/* ---- MEGA: signing-in progress ------------------------------------------------
   VTS shows its logo and three beating dots here. MEGA has no logo, and the
   wait includes building the first dashboard page, so the cover shows the
   name, a bar in the brand gradient and the percentage. */

.signing-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--thsti-font-heading);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--thsti-text);
}
.signing .signing-name img { width: 36px; height: 36px; }
.signing-bar {
  width: min(320px, 72vw);
  height: 6px;
  background: var(--thsti-divider);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.signing-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--thsti-gradient);
  background-size: 320px 100%;    /* the gradient is laid over the full bar, not stretched over the fill */
  border-radius: var(--r-pill);
  transition: width .12s linear;
}
.signing-pct {
  font-family: var(--thsti-font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--thsti-text-2nd);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .signing-bar i { transition: none; }
}

/* ============================================================================
   MEGA sign-in: two panels in one card. The study on the left, in the warm
   graphite of the dashboard's sidebar; the form on the right. Carries the
   details the original page had, in the THSTI look.
   ========================================================================= */

.signin-card.signin-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  max-width: 880px;
  padding: 0;
  overflow: hidden;
  background-color: var(--thsti-surface);
}

/* ---- the study ------------------------------------------------------------ */
.signin-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-8);
  padding: 44px 40px 32px;
  overflow: hidden;
  color: #fff;
  /* the dashboard sidebar's graphite with its faint warm wash, plus a soft
     glow of the brand orange from the lower corner */
  background:
    radial-gradient(90% 60% at 100% 110%, rgba(245, 137, 32, 0.16), transparent 70%),
    radial-gradient(70% 55% at -10% -10%, rgba(168, 37, 43, 0.20), transparent 70%),
    linear-gradient(180deg, rgba(245, 137, 32, 0.022), rgba(168, 37, 43, 0.038)),
    #2A2C2F;
}
/* the logo again, large and very faint, cropped by the corner */
.signin-brand-mark {
  position: absolute;
  right: -70px; bottom: -70px;
  width: 260px; height: 260px;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}
.signin-brand-top { position: relative; }
.signin-brand-logo { display: block; width: 52px; height: 52px; margin-bottom: 26px; }
.signin-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F6A55E;                       /* the brand orange, lifted for the dark panel */
}
.signin-title {
  margin: 8px 0 14px;
  font-family: var(--thsti-font-heading);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: #fff;
}
.signin-tag {
  margin: 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
}
.signin-brand-foot {
  position: relative;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.60);
}

/* ---- the form ---------------------------------------------------------------- */
.signin-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 44px 32px;
}
.signin-heading {
  margin: 0 0 6px;
  font-family: var(--thsti-font-heading);
  font-weight: 700;
  font-size: 26px;
  color: var(--thsti-text);
}
.signin-note { margin: 0 0 26px; font-size: 15px; color: var(--thsti-text-2nd); }

.signin-split .signin-msg {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 18px;
}
.signin-split .signin-msg .icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }

.signin-split .signin-fields { gap: 14px; }
.signin-split .btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; }
.signin-split .btn-primary .icon { width: 17px; height: 17px; transition: transform var(--dur-2) var(--ease); }
.signin-split .btn-primary:hover .icon { transform: translateX(3px); }

.signin-form-foot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--thsti-rule);
  font-size: 13px;
  color: var(--thsti-text-2nd);
}
.signin-form-foot .icon { width: 15px; height: 15px; color: var(--thsti-maroon); }

/* ---- centring: widely tracked words carry their spacing after the last
   letter too, which pushes the visible letters off centre. Indent the start
   by the same amount so the letters themselves sit in the middle. ---------- */
.signin-lockup .abbr { padding-left: 0.06em; }
.signin-lockup .full { padding-left: 0.16em; }
.signing .signing-word { padding-left: 0.06em; }

/* ---- narrow screens: the study stacks above the form ---------------------------- */
@media (max-width: 760px) {
  .signin-card.signin-split { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
  .signin-brand { gap: var(--sp-5); padding: 28px 26px 22px; }
  .signin-brand-logo { width: 42px; height: 42px; margin-bottom: 16px; }
  .signin-title { font-size: 26px; margin-bottom: 10px; }
  .signin-tag { font-size: 14px; }
  .signin-brand-mark { width: 180px; height: 180px; right: -50px; bottom: -50px; }
  .signin-form { padding: 30px 26px 24px; }
  .signin-form-foot { margin-top: 24px; }
}

/* ---- the field, a little livelier ----------------------------------------------
   About a third faster and about a quarter stronger than the VTS original
   (kept verbatim above), with the veil behind the card thinned a touch so the
   colour reads, while the card still sits on a calm middle. */
:root {
  --sky-a: radial-gradient(circle, rgba(64, 64, 126, .70) 0%, rgba(64, 64, 126, .28) 42%, transparent 70%);
  --sky-b: radial-gradient(circle, rgba(90, 107, 140, .74) 0%, rgba(64, 64, 126, .30) 44%, transparent 70%);
  --sky-c: radial-gradient(circle, rgba(122, 138, 168, .54) 0%, transparent 64%);
  --sky-d: radial-gradient(circle, rgba(44, 44, 92, .42) 0%, transparent 62%);
  --sky-e: radial-gradient(circle, rgba(245, 137, 32, .38) 0%, transparent 62%);
}
.sky-glow { animation-duration: 26s; }
.sky-glow i:nth-child(1) { animation-duration: 9s; }
.sky-glow i:nth-child(2) { animation-duration: 11s; }
.sky-glow i:nth-child(3) { animation-duration: 7.5s; }
.sky-glow i:nth-child(4) { animation-duration: 12s; }
.sky-glow i:nth-child(5) { animation-duration: 7s; }
.sky-veil {
  background:
    radial-gradient(30% 26% at 50% 46%, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .06) 58%, transparent 84%),
    radial-gradient(80% 70% at 50% 46%, transparent 58%, rgba(62, 24, 27, .08) 100%);
}
/* anyone who asked their system for less motion still gets none */
@media (prefers-reduced-motion: reduce) {
  .sky-glow, .sky-glow i { animation: none; }
}

/* ============================================================================
   DRISHTI additions.

   Everything above is MEGA's file unchanged. This page carries three things
   MEGA's sign-in does not: the platform's three numbered points, a
   forgot-password link and a route to registration. The study panel is dark,
   so the points are set light rather than in auth.css's dark-on-white inks.
   ========================================================================= */

.signin-points { list-style: none; margin: 0; padding: 0; }
.signin-points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.80);
}
.signin-points li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.signin-points .pt-no {
  font-family: var(--thsti-font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--thsti-orange);
}
.signin-points b { font-weight: 700; color: #fff; }

/* forgot password, right-aligned under the two fields */
.signin-row { display: flex; justify-content: flex-end; }
.signin-link {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--thsti-maroon);
  text-decoration: none;
}
.signin-link:hover { color: var(--thsti-navy); }

/* the route to registration, under a labelled rule */
.signin-alt { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }
.signin-alt .btn { justify-self: center; }
.signin-sep {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--thsti-text-2nd);
}
.signin-sep::before,
.signin-sep::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--thsti-rule); }

/* components.css styles .input-icon .icon as the field's LEADING glyph:
   position:absolute, left:10px, pointer-events:none. That descendant selector
   also reaches the eye inside the reveal button, so the eye was lifted out of
   flow (collapsing its wrapper span to 0) and pinned 10px from the button's
   left edge instead of sitting in the middle of it. Putting it back in flow
   is enough - the span then sizes to it and place-items centres both. */
.signin-reveal .icon {
  position: static;
  transform: none;
  pointer-events: auto;
  width: 19px;
  height: 19px;
}

/* MEGA's mark is square (165x165); this one is 587x425 - a landscape eye with
   the wordmark inside it. Both places MEGA sets a square box therefore squash
   it horizontally: the small logo's lettering turned to mush, and the large
   faint mark in the corner came out narrow and crammed. Height is fixed in
   both and the width follows the artwork. */
.signin-brand-logo { width: auto; height: 56px; max-width: 110px; }
.signin-brand-mark { width: auto; height: 260px; max-width: none; }
@media (max-width: 760px) {
  .signin-brand-logo { width: auto; height: 44px; }
  .signin-brand-mark { width: auto; height: 180px; }
}

/* stacked on a phone the study panel sits above the form, so the points go:
   the name, the line under it and the route in are what matter there */
@media (max-width: 760px) {
  .signin-points { display: none; }
}

/* ---- registration ----------------------------------------------------------
   The create-account page uses the same card. These are the pieces only it
   needs, carried over from auth.css unchanged so the controls look exactly as
   they did: the email/OTP rows, the two status lines, the verified pill and
   the password pair. .auth-reveal keeps its name because the page's script
   selects on it, and that script is the previous page's, untouched. */

.signin-inline { display: flex; align-items: stretch; gap: var(--sp-2); }
.signin-inline .input-icon { flex: 1 1 auto; min-width: 0; }
/* one min-width covers Send OTP / Resend OTP / Verify, so relabelling the
   button cannot move the field's edge */
.signin-inline .btn {
  flex: 0 0 auto;
  min-width: 104px;
  height: 46px;
  padding: 0 16px;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.signin-hint { margin: 0; font-size: var(--fs-xs); font-weight: 700; line-height: 1.45; }
.signin-hint:empty { display: none; }
.signin-hint.is-ok { color: var(--thsti-success); }
.signin-hint.is-bad { color: var(--thsti-error); }

/* the attribute selector outranks the display below, so [hidden] still wins */
.signin-otp { display: grid; gap: var(--sp-2); }
.signin-otp[hidden] { display: none; }
.signin-verified { align-self: flex-start; }
.signin-verified[hidden] { display: none; }

.signin-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }

.input.is-bad, .input.is-bad:hover { border-color: var(--thsti-error); }
.input.is-ok, .input.is-ok:hover { border-color: var(--thsti-success); }

/* the create-account page has two of these, and its script selects .auth-reveal */
.auth-reveal {
  position: absolute;
  right: 5px; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  background: none;
  border: 0;
  border-radius: var(--r-1);
  color: var(--thsti-muted);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.auth-reveal:hover { color: var(--thsti-maroon); background: var(--thsti-panel); }
.auth-reveal .icon { position: static; transform: none; pointer-events: auto; width: 19px; height: 19px; }
.auth-reveal .when-shown { display: none; }
.auth-reveal.is-shown .when-hidden { display: none; }
.auth-reveal.is-shown .when-shown { display: block; }

/* the card is wider than the sign-in one here, so the study panel keeps its
   share rather than squeezing a taller form */
.signin-card.signin-split.is-left { max-width: 940px; }
@media (max-width: 760px) {
  .signin-card.signin-split.is-left { max-width: 440px; }
}