/* assets/css/auth.css — the sign-in and register screens.
 *
 * Two halves: the form on the left on white, the story on the right on a soft
 * blue wash. On a phone the right half moves BELOW the form, because somebody
 * opening this page on a phone came to sign in, not to read about the firm.
 *
 * These screens are LIGHT whatever theme the site is wearing. The rest of the
 * site follows Theme::css(); this one page is the shop window and he chose
 * how it looks, so it carries its own palette instead of the theme's
 * background and text colours.
 *
 * Everything that moves respects prefers-reduced-motion, and the layout is
 * identical with the movement off.
 */

.auth-v2 {
  --a-blue: #0b3f8f;
  --a-blue-dk: #062a63;
  --a-orange: #f26a1b;
  --a-ink: #16243f;
  --a-txt: #3f4d66;
  --a-muted: #6b7a91;
  --a-line: #e4eaf4;
  --a-card: #ffffff;

  color: var(--a-txt);
  background: var(--a-card);
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* .auth-wrap centres one card with 120px of air above it. A screen that owns
 * the whole window says so here, instead of every rule below fighting it. */
.auth-page {
  padding: 0 !important;
  align-items: stretch !important;
  display: block !important;
  background: #ffffff !important;
}

.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  min-height: 100vh;
}

/* ── Left: the form ─────────────────────────────────────────────────────── */

.auth-form-side {
  position: relative;
  display: flex;
  flex-direction: column;
  /* The column keeps its own scroll rather than taking the page with it.
     At 100% zoom on his window the whole stack is 829px inside 910, so
     nothing scrolls at all — but on a shorter window the form scrolls
     here instead of the app card and the footer being cut off the
     bottom of the page, which is what he was looking at. The half that
     sells stays where it is either way. */
  max-height: 100vh;
  overflow-y: auto;
  padding: 26px 44px 20px;
  background:
    radial-gradient(520px 320px at -10% 0%, rgba(11, 63, 143, .05), transparent 70%),
    var(--a-card);
}

.auth-inner {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* The trust badge used to sit to the right of this, which pinned the
   logo to the left edge. The badge is in the showcase's own corner now,
   so this is one column and it lines up with the card under it. */
.auth-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  margin-bottom: 14px;
}

.auth-brand-tag {
  display: block;
  margin: 8px 0 0;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--a-muted);
}

.auth-mininav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 13px;
}

.auth-mininav a {
  color: var(--a-txt);
  text-decoration: none;
}

.auth-mininav a:hover { color: var(--a-blue); }

.auth-mininav .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--a-orange);
  display: inline-block;
}

.auth-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--a-ink);
  background: #eef4ff;
  border: 1px solid #dbe7ff;
  line-height: 1.25;
  flex-shrink: 0;
  max-width: 190px;
}

.auth-pill i {
  font-size: 17px;
  color: var(--a-blue);
}

/* In the corner of the half that sells, above everything on it. */
.auth-pill-corner {
  position: absolute;
  top: 26px;
  right: 34px;
  z-index: 2;
  background: rgba(255, 255, 255, .92);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 22px -14px rgba(12, 21, 36, .45);
}

/* The card itself */
.auth-v2 .auth-card {
  background: var(--a-card);
  border: 1px solid var(--a-line);
  border-radius: 18px;
  padding: 30px 32px;
  box-shadow: 0 18px 44px -28px rgba(16, 36, 70, .35);
  backdrop-filter: none;
}

.auth-h {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

.auth-h::before {
  content: '';
  width: 5px;
  height: 30px;
  border-radius: 3px;
  background: var(--a-orange);
  flex-shrink: 0;
}

.auth-h h1 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--a-ink);
  margin: 0;
  letter-spacing: -.4px;
}

.auth-sub-line {
  margin: 0 0 22px 19px;
  font-size: 14px;
  color: var(--a-muted);
}

.auth-v2 .form-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--a-ink);
  margin-bottom: 7px;
}

/* An icon inside the box, not a button glued to its side. */
.auth-field { position: relative; }

.auth-field > i.lead-ic {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #9aa8bd;
  pointer-events: none;
}

.auth-v2 .auth-field .form-control {
  height: 50px;
  padding-left: 44px;
  border-radius: 11px;
  border: 1px solid #dde4ef;
  background: #fbfcfe;
  color: var(--a-ink);
  font-size: 14.5px;
}

.auth-v2 .auth-field .form-control::placeholder { color: #9aa8bd; }

.auth-v2 .auth-field .form-control:focus {
  background: #fff;
  border-color: var(--a-blue);
  box-shadow: 0 0 0 4px rgba(11, 63, 143, .10);
}

.auth-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #8c9ab0;
  padding: 8px 10px;
  line-height: 1;
  cursor: pointer;
}

.auth-eye:hover { color: var(--a-blue); }

.auth-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.auth-label-row a {
  font-size: 13px;
  font-weight: 600;
  color: var(--a-blue);
  text-decoration: none;
}

.auth-keep {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 18px;
  font-size: 14px;
  color: var(--a-ink);
  cursor: pointer;
}

.auth-keep input {
  width: 18px;
  height: 18px;
  accent-color: var(--a-blue);
  cursor: pointer;
}

.auth-v2 .btn-signin {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 11px;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(90deg, var(--a-orange) 0%, #f7941e 100%);
  box-shadow: 0 12px 26px -12px rgba(242, 106, 27, .75);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.auth-v2 .btn-signin:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -12px rgba(242, 106, 27, .85);
  color: #fff;
}

.auth-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #9aa8bd;
}

.auth-or::before,
.auth-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--a-line);
}

.auth-v2 .btn-google {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid #dde4ef;
  border-radius: 11px;
  background: #fff;
  color: var(--a-ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.auth-v2 .btn-google:hover { background: #f7faff; border-color: #c9d7ea; }

.auth-switch {
  margin: 18px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--a-muted);
}

.auth-switch a {
  color: var(--a-blue);
  font-weight: 700;
  text-decoration: none;
}

/* The app card under the form. Centred like the logo above it, so the
   left column reads as one stack rather than three things each aligned
   to a different edge. */
.auth-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  margin-top: 12px;
  padding: 12px 18px;
  border: 1px solid var(--a-line);
  border-radius: 16px;
  background: #fbfcff;
}

/* The mark beside the words, the pair of them centred. */
.auth-app-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: left;
}

.auth-app-txt { min-width: 0; }

.auth-app-txt b {
  display: block;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 15px;
  color: var(--a-ink);
}

.auth-app-txt span {
  font-size: 12.5px;
  color: var(--a-muted);
}

.auth-badges {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 9px;
  background: #101826;
  color: #fff;
  text-decoration: none;
  line-height: 1.15;
  border: 1px solid #101826;
}

.auth-badge:hover { background: #1c2740; color: #fff; }

/* The store badge everybody already recognises: a light pill with the
   Play triangle in its four colours. A flat white glyph on a black slab
   was the thing he pointed at — it read as a disabled button. */
.auth-badge.is-play {
  background: #fff;
  border-color: #dfe5ef;
  color: var(--a-ink);
  box-shadow: 0 6px 16px -12px rgba(12, 21, 36, .5);
}
.auth-badge.is-play:hover {
  background: #fff;
  color: var(--a-ink);
  border-color: #c7d2e4;
  box-shadow: 0 10px 22px -12px rgba(12, 21, 36, .55);
}
.auth-badge.is-play span { opacity: .62; }

.auth-badge-play { width: 22px; height: 22px; flex: 0 0 22px; display: block; }

.auth-badge i { font-size: 21px; }

.auth-badge span {
  display: block;
  font-size: 8.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .78;
}

.auth-badge b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.2px;
}

/* A badge with nowhere to go says so rather than pretending. */
.auth-badge.is-soon {
  background: #eef1f6;
  border-color: #e0e5ee;
  color: #8592a6;
  cursor: default;
}

.auth-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 22px 0 0;
  padding-top: 16px;
  font-size: 11.5px;
  color: var(--a-muted);
}

.auth-foot-links {
  display: flex;
  align-items: center;
  gap: 9px;
}

.auth-foot-links a {
  color: var(--a-muted);
  text-decoration: none;
}

.auth-foot-links a:hover { color: var(--a-blue); }

.auth-foot-links .sep { color: #ccd5e2; }

/* ── Right: the story ───────────────────────────────────────────────────── */

.auth-showcase {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 40px 48px;
  background:
    radial-gradient(760px 420px at 88% 6%, rgba(255, 255, 255, .95), transparent 62%),
    linear-gradient(160deg, #eef5ff 0%, #e6eefc 42%, #f3f7ff 100%);
}

/* An uploaded background sits under a white veil, so the words stay readable
   whatever picture he chooses. */
.auth-showcase.has-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--shot-bg);
  background-size: cover;
  background-position: center;
  opacity: .30;
}

.auth-showcase::after {
  content: '';
  position: absolute;
  width: 460px;
  height: 460px;
  right: -150px;
  top: -170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 106, 27, .16), transparent 62%);
}

.auth-showcase-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.auth-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--a-txt);
}

.auth-eyebrow::before {
  content: '';
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: var(--a-orange);
}

.auth-title {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 3.3vw, 46px);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--a-ink);
  margin: 0 0 14px;
  max-width: 15ch;
}

.auth-hi { color: var(--a-orange); }

.auth-sub {
  font-size: 15px;
  line-height: 1.65;
  color: var(--a-txt);
  margin: 0 0 24px;
  max-width: 58ch;
}

/* The handwritten line in the corner */
.auth-script {
  position: absolute;
  top: 6px;
  right: 0;
  width: 220px;
  text-align: center;
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-size: 27px;
  line-height: 1.16;
  color: var(--a-blue);
  transform: rotate(-4deg);
  pointer-events: none;
}

.auth-script svg {
  display: block;
  width: 150px;
  height: 18px;
  margin: 2px auto 0;
  color: var(--a-orange);
}

/* The eight service tiles */
.auth-tiles {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 24px;
}

.auth-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 13px 6px 11px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid #e2eaf7;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 8px 20px -16px rgba(16, 36, 70, .6);
}

.auth-tile i {
  font-size: 21px;
  color: var(--tile-c, var(--a-blue));
}

.auth-tile span {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.32;
  color: var(--a-ink);
}

/* The laptop and the phone */
.auth-devices {
  position: relative;
  margin-bottom: 22px;
  padding-right: 96px;
}

.auth-laptop {
  border-radius: 12px 12px 3px 3px;
  overflow: hidden;
  border: 9px solid #dfe5ef;
  border-bottom-width: 12px;
  background: #fff;
  box-shadow: 0 34px 60px -34px rgba(16, 36, 70, .6);
}

.auth-laptop::after {
  /* the lid's foot */
  content: '';
  display: block;
  height: 9px;
  margin: 0 -9px -12px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #d4dbe7, #b9c3d4);
}

.auth-laptop img,
.auth-phone img {
  display: block;
  width: 100%;
  height: auto;
}

.auth-phone {
  position: absolute;
  right: 0;
  bottom: -14px;
  width: 150px;
  border-radius: 20px;
  overflow: hidden;
  border: 7px solid #cfd8e6;
  background: #fff;
  box-shadow: 0 26px 46px -26px rgba(16, 36, 70, .75);
}

/* The drawn screens inside them */
.mock {
  font-size: 10px;
  color: var(--a-ink);
  background: #fff;
}

.mock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid #eef2f8;
}

.mock-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 9px;
  color: var(--a-blue);
}

.mock-logo i { color: var(--a-orange); }

.mock-nav {
  display: flex;
  gap: 9px;
  font-size: 7.5px;
  color: var(--a-muted);
}

.mock-nav b { color: var(--a-orange); font-weight: 700; }

.mock-cta {
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--a-orange);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
}

.mock-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 18px 14px 12px;
}

.mock-h {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.16;
  letter-spacing: -.3px;
  margin-bottom: 5px;
}

.mock-h em { color: var(--a-orange); font-style: normal; }

.mock-p {
  font-size: 7.5px;
  line-height: 1.6;
  color: var(--a-muted);
  margin-bottom: 10px;
}

.mock-btns { display: flex; gap: 6px; align-items: center; }

.mock-btn {
  padding: 4px 9px;
  border-radius: 20px;
  background: var(--a-orange);
  color: #fff;
  font-size: 6.5px;
  font-weight: 700;
}

.mock-btn.ghost {
  background: transparent;
  color: var(--a-ink);
  border: 1px solid #dde4ef;
}

.mock-art {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  align-content: center;
}

.mock-art span {
  height: 30px;
  border-radius: 5px;
  background: #eaf0fa;
  border: 1px solid #dfe7f5;
}

.mock-art span:nth-child(1) { background: #e3edff; }
.mock-art span:nth-child(4) { background: #ffeadd; }
.mock-art span:nth-child(6) { background: #e2f6ec; }
.mock-art span:nth-child(2) { height: 42px; }
.mock-art span:nth-child(5) { height: 42px; }

.mock-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 16px;
}

.mock-stat {
  padding: 10px 5px;
  border-radius: 7px;
  text-align: center;
  background: #f5f8ff;
  border: 1px solid #e8eefa;
}

.mock-stat b {
  display: block;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 13px;
  color: var(--a-ink);
}

.mock-stat i {
  font-style: normal;
  font-size: 7px;
  color: var(--a-muted);
}

.mock-stat:nth-child(1) b { color: var(--a-blue); }
.mock-stat:nth-child(3) b { color: var(--a-orange); }

/* the phone's screen */
.mock-ph { padding: 7px 7px 8px; }

.mock-ph .mock-top { border: 0; padding: 0 0 7px; }

.mock-ph .mock-h { font-size: 10px; margin-bottom: 4px; }
.mock-ph .mock-p { font-size: 6px; margin-bottom: 6px; }

.mock-ph-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 7px;
}

.mock-ph-grid span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 2px;
  border-radius: 6px;
  background: #f5f8ff;
  border: 1px solid #e8eefa;
  font-size: 5.5px;
  color: var(--a-muted);
}

.mock-ph-grid span i {
  font-size: 9px;
  color: var(--tile-c, var(--a-blue));
  font-style: normal;
}

/* The strip of four along the bottom */
.auth-trust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(16, 36, 70, .09);
}

.auth-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--a-ink);
}

.auth-trust-item i {
  font-size: 16px;
  color: var(--tile-c, var(--a-blue));
}

.auth-trust-item + .auth-trust-item::before {
  content: '';
  width: 1px;
  height: 16px;
  margin-right: 6px;
  background: rgba(16, 36, 70, .13);
}

/* ── Movement, only when it is asked for and allowed ────────────────────── */

.auth-animate .auth-eyebrow,
.auth-animate .auth-title,
.auth-animate .auth-sub,
.auth-animate .auth-tile,
.auth-animate .auth-devices,
.auth-animate .auth-trust,
.auth-animate .auth-script {
  opacity: 0;
  animation: authRise .7s cubic-bezier(.22, 1, .36, 1) forwards;
}

.auth-animate .auth-eyebrow { animation-delay: .05s; }
.auth-animate .auth-title   { animation-delay: .12s; }
.auth-animate .auth-sub     { animation-delay: .2s; }
.auth-animate .auth-tile    { animation-delay: calc(.28s + var(--d, 0s)); }
.auth-animate .auth-devices { animation-delay: .5s; }
.auth-animate .auth-trust   { animation-delay: .72s; }
.auth-animate .auth-script  { animation-delay: .85s; }

@keyframes authRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* The script keeps its tilt while it arrives. */
.auth-animate .auth-script { animation-name: authRiseTilt; }

@keyframes authRiseTilt {
  from { opacity: 0; transform: rotate(-4deg) translateY(14px); }
  to   { opacity: 1; transform: rotate(-4deg); }
}

.auth-animate .auth-script svg path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: authDraw 1.1s ease-out 1.15s forwards;
}

@keyframes authDraw {
  to { stroke-dashoffset: 0; }
}

.auth-animate .auth-showcase::after,
.auth-animate::after {
  animation: authGlow 11s ease-in-out infinite alternate;
}

@keyframes authGlow {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-36px, 26px, 0) scale(1.14); }
}

/* The devices settle, then breathe. */
.auth-animate .auth-devices {
  animation: authRise .7s cubic-bezier(.22, 1, .36, 1) .5s forwards,
             authFloat 7s ease-in-out 1.5s infinite alternate;
}

@keyframes authFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-animate .auth-eyebrow,
  .auth-animate .auth-title,
  .auth-animate .auth-sub,
  .auth-animate .auth-tile,
  .auth-animate .auth-devices,
  .auth-animate .auth-trust,
  .auth-animate .auth-script,
  .auth-animate .auth-script svg path,
  .auth-animate::after {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ── Narrower windows ───────────────────────────────────────────────────── */

@media (max-width: 1399.98px) {
  .auth-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .auth-form-side { padding: 28px 30px 20px; }
  .auth-showcase  { padding: 34px 34px; }
}

/* Phones and tablets: the form first, the story after it. */
@media (max-width: 991.98px) {
  .auth-split {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .auth-form-side { padding: 26px 18px 18px; }
  .auth-showcase  { padding: 30px 18px 34px; }

  .auth-top { flex-direction: column; align-items: center; text-align: center; }
  .auth-pill { max-width: none; }
  .auth-mininav { justify-content: center; }

  .auth-script {
    position: static;
    width: auto;
    text-align: left;
    transform: none;
    margin-bottom: 14px;
    font-size: 24px;
  }
  .auth-animate .auth-script { animation-name: authRise; }
  .auth-script svg { margin-left: 0; }

  .auth-title { font-size: 27px; max-width: none; }
  .auth-sub   { font-size: 14px; }

  .auth-devices { padding-right: 0; }
  .auth-phone {
    position: relative;
    right: auto;
    bottom: auto;
    width: 118px;
    margin: -34px 0 0 auto;
  }

  .auth-foot { justify-content: center; text-align: center; }
}

@media (max-width: 575.98px) {
  .auth-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-v2 .auth-card { padding: 24px 20px; }
  .auth-h h1 { font-size: 24px; }
  .auth-badges { width: 100%; }
}