/* Register page — bigger form, swap brand panel to RIGHT */
.auth-grid.flipped{
    grid-template-columns: 1fr 1.05fr;
}
.auth-grid.flipped .auth-brand{ order: 2; }
.auth-grid.flipped .auth-form-wrap{ order: 1; }
@media (max-width: 980px){
    .auth-grid.flipped{ grid-template-columns: 1fr; }
    /* On mobile, show brand panel FIRST as a hero */
    .auth-grid.flipped .auth-brand{ order: 1; }
    .auth-grid.flipped .auth-form-wrap{ order: 2; }
}

.auth-card.wider{ max-width: 520px; }

/* Floating cards positioned on the right brand panel */
.af-1{ top: 70px; left: 40px; animation-delay: 0s; }
.af-1 .af-ic{ background: linear-gradient(135deg,#f5b73c,#d4901c); }
.af-2{ bottom: 240px; right: 40px; animation-delay: -2s; }  /* lower-right: clear of the testimonial card and the (left-aligned) benefits text */
.af-2 .af-ic{ background: linear-gradient(135deg,#1abc88,#0d8a5f); }
.af-3{ top: 45%; right: 32px; animation-delay: -4s; }
.af-3 .af-ic{ background: linear-gradient(135deg,#4f8cff,#2950bd); }

/* Bonus highlight card on brand panel */
.bonus-callout{
    position: relative; z-index: 1;
    margin: 0 0 26px;
    padding: 18px 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(245,183,60,.16), rgba(245,183,60,.06));
    border: 1px solid rgba(245,183,60,.30);
    display: flex; align-items: center; gap: 14px;
}
.bonus-callout .bc-ic{
    width: 46px; height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f5d77a, #d4af37);
    display:grid; place-items:center;
    font-size: 18px; color: #5a4400;
    box-shadow: 0 6px 16px rgba(245,183,60,.35);
    flex-shrink: 0;
}
.bonus-callout .bc-meta{ flex: 1; }
.bonus-callout .bc-eyebrow{
    font-size: 10.5px; font-weight: 800; letter-spacing: 1px;
    color: #f5d77a; text-transform: uppercase; margin-bottom: 2px;
}
.bonus-callout .bc-title{
    font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3;
}
.bonus-callout .bc-title strong{ color: #f5d77a; }

/* Background animated chart */
.brand-chart-bg{
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 220px; pointer-events: none;
    opacity: .25; z-index: 0;
}
.brand-chart-bg svg{ width: 100%; height: 100%; display:block; }
.brand-chart-bg .line{
    fill: none; stroke: #1abc88; stroke-width: 2;
    stroke-dasharray: 1800; stroke-dashoffset: 1800;
    animation: drawLine 4s ease-out forwards;
}
.brand-chart-bg .area{ fill: url(#brandAreaGrad); opacity: 0; animation: fadeArea 2s 1.5s forwards; }
@keyframes drawLine{ to{ stroke-dashoffset: 0; } }
@keyframes fadeArea{ to{ opacity: 1; } }

/* ===== Password: generate strong password + copy ===== */
.auth-field{ position: relative; }
.pwd-gen{
  position: absolute; top: -2px; inset-inline-end: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border: 1px solid rgba(14,55,137,.18);
  border-radius: 999px;
  background: rgba(14,55,137,.05);
  color: var(--brand-2, #0e3789);
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.pwd-gen:hover{ background: rgba(14,55,137,.10); border-color: rgba(14,55,137,.35); transform: translateY(-1px); }
.pwd-gen i{ font-size: 11px; }
.pwd-copy{ width: 34px; }
.pwd-copy.copied{ color: #1abc88; }
.pwd-gen-note{
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 8px;
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
  color: #0d8a5f;
}
.pwd-gen-note[hidden]{ display: none; }
.pwd-gen-note i{ margin-top: 2px; }
@media (max-width: 420px){
  .pwd-gen span{ display: none; }        /* icon-only on very narrow phones */
  .pwd-gen{ padding: 4px 8px; }
}