:root {
  --bg-0: #faf7ef;
  --bg-1: #f5f1e8;
  --bg-2: #fffefa;
  --border: #e7dfd0;
  --text: #24211c;
  --muted: #70685d;
  --dim: #8a8174;
  --gold: #e18b1e;
  --gold-2: #f4ad2c;
  --gold-3: #ad571c;
  --green: #e18b1e;
  --red: #b54735;
}

body {
  background: var(--bg-0);
  color: var(--text);
}
.split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--bg-0);
}
.brand {
  min-height: 100vh;
  padding: clamp(32px, 5vw, 72px);
  color: var(--text);
  border-right: 1px solid #e9dfcf;
  background:
    radial-gradient(ellipse 70% 48% at 14% 18%, rgba(245,177,101,.35), transparent 70%),
    radial-gradient(ellipse 65% 45% at 86% 74%, rgba(242,203,157,.42), transparent 72%),
    linear-gradient(145deg, #fffaf0, #f2eadb 75%, #f8f1e5);
}
.brand::before {
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(109,82,43,.12) .65px, transparent .65px);
  background-size: 7px 7px;
}
.brand-logo { width: fit-content; }
.brand-logo img { display: block; filter: none !important; }
.brand-content {
  max-width: 540px;
  margin-top: auto;
  padding-top: 350px;
}
.brand-eyebrow {
  color: #8c4d15;
  border-color: rgba(176,102,29,.2);
  background: rgba(255,253,247,.76);
  backdrop-filter: blur(8px);
}
.brand-title {
  color: #27221c;
  font-size: clamp(42px, 4.1vw, 62px);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.brand-title .italic {
  background: linear-gradient(180deg, #ec9a38, #b45c1f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-sub {
  color: #665d51;
  max-width: 440px;
  font-size: 15px;
  line-height: 1.75;
}
.brand-stats { border-color: rgba(96,72,39,.16); }
.brand-stat b { color: #bd6d1e; }
.brand-stat span { color: #766e62; }
.brand-cards {
  top: 17%;
  left: 50%;
  right: auto;
  width: min(410px, 88%);
  height: 300px;
  transform: translateX(-50%);
}
.bcard {
  border: 1px solid rgba(87,66,42,.13);
  box-shadow: 0 24px 55px rgba(93,68,36,.18);
}
.bcard.b1 {
  background: linear-gradient(145deg, #f4c5b4, #f4e2d0 75%);
}
.bcard.b1::before {
  background: radial-gradient(circle at 24% 24%, rgba(255,255,255,.9), transparent 48%);
}
.bcard.b1::after {
  content: '';
  position: absolute;
  left: 39%; top: 25%;
  width: 48px; height: 104px;
  border: 3px solid #453b3a;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff2e8, #d38e8d 60%, #874f59);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 12px 20px rgba(73,48,43,.18);
}
.bcard.b2 {
  background: linear-gradient(145deg, #ded9ea, #f4e8dd 82%);
}
.bcard.b2::before {
  background: radial-gradient(circle at 66% 27%, rgba(255,255,255,.9), transparent 50%);
}
.bcard.b2::after {
  content: '';
  position: absolute;
  left: 42%; top: 29%;
  width: 40px; height: 54px;
  border: 7px solid #4c4652;
  border-bottom-color: transparent;
  border-radius: 50% 50% 12px 12px;
  filter: drop-shadow(0 8px 8px rgba(65,54,67,.18));
}
.bcard.b3 {
  background: linear-gradient(145deg, #efc3ca, #f8e5db 83%);
}
.bcard.b3::before {
  background: radial-gradient(circle at 35% 24%, rgba(255,255,255,.88), transparent 52%);
}
.bcard.b3::after {
  content: '';
  position: absolute;
  left: 31%; top: 20%;
  width: 70px; height: 78px;
  background: linear-gradient(135deg,#fff8ed,#d28b9b);
  clip-path: polygon(28% 0,42% 10%,58% 10%,72% 0,100% 18%,84% 39%,72% 31%,72% 100%,28% 100%,28% 31%,16% 39%,0 18%);
  filter: drop-shadow(0 9px 7px rgba(90,52,61,.2));
}
.bcard-tag {
  color: #43372d;
  background: rgba(255,253,247,.82);
  backdrop-filter: blur(8px);
}
.bcard-check {
  background-color: var(--gold-2);
  box-shadow: 0 4px 12px rgba(188,111,23,.25);
}

.form-side {
  min-height: 100vh;
  padding: clamp(28px, 4vw, 58px);
  background:
    radial-gradient(ellipse 60% 42% at 100% 0%, rgba(245,221,177,.25), transparent 70%),
    #faf8f2;
}
.form-top { margin-bottom: 20px; }
.back-link { color: #766e62; }
.back-link:hover { color: #a85d18; }
.lang-btn {
  color: #665d51;
  border-color: #ded5c5;
  background: rgba(255,255,255,.62);
}
.lang-btn:hover {
  color: #9b5317;
  border-color: #c77b2c;
  background: #fffdfa;
}
.form-wrap {
  max-width: 470px;
  padding: clamp(24px, 2.8vw, 38px);
  border: 1px solid #e8e0d2;
  border-radius: 25px;
  background: rgba(255,254,250,.94);
  box-shadow: 0 22px 70px rgba(72,55,31,.09), 0 2px 8px rgba(72,55,31,.035);
}
.form-header { margin-bottom: 22px; }
.form-eyebrow {
  color: #9d5a1e;
  border-color: rgba(181,109,33,.2);
  background: #fbf1dd;
}
.form-title { color: #26221d; }
.form-sub { color: #72695d; line-height: 1.6; }
.auth-alert.error {
  color: #8f322a;
  border-color: #e6b8b0;
  background: #fff0ed;
}
.auth-alert.success {
  color: #276348;
  border-color: #b8d9c7;
  background: #edf8f1;
}
.google-btn {
  border: 1px solid #e4ddcf;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(75,57,34,.05);
  margin-bottom: 15px;
}
.google-btn:hover:not(:disabled) {
  box-shadow: 0 8px 20px rgba(75,57,34,.1);
}
.divider { margin: 18px 0; color: #8d8375; }
.divider::before, .divider::after { background: #e6dfd2; }
.field { margin-bottom: 12px; }
.field label { color: #514a40; font-weight: 650; }
.field input,
.ob-input,
.ob-select {
  color: #26221d;
  border-color: #ded6c8;
  background: #fff;
}
.field input::placeholder { color: #aaa196; }
.field input:focus,
.ob-input:focus,
.ob-select:focus {
  border-color: #d88a2b;
  background: #fffefa;
  box-shadow: 0 0 0 3px rgba(225,139,30,.13);
}
.btn-submit,
.btn-check-verify,
.ob-submit-btn {
  color: #231d15;
  background: linear-gradient(180deg, #ffc34e, #f0a52c);
  box-shadow: 0 3px 0 #bd7420, 0 8px 18px rgba(185,110,28,.14);
}
.btn-submit:hover:not(:disabled),
.btn-check-verify:hover,
.ob-submit-btn:hover {
  box-shadow: 0 3px 0 #bd7420, 0 11px 22px rgba(185,110,28,.2);
}
.form-footer { margin-top: 18px; color: #72695d; }
.form-footer a { color: #a95c18; }
.terms { margin-top: 18px; color: #837a6e; }
.terms a { color: #655b4f; }
.verify-icon-wrap {
  background: radial-gradient(circle, rgba(244,173,44,.2), rgba(244,173,44,.035) 70%, transparent);
  border-color: rgba(193,119,33,.32);
  box-shadow: 0 0 30px rgba(209,145,54,.13);
}
.verify-icon-wrap::after { border-color: rgba(193,119,33,.38); }
.verify-icon-wrap svg { color: #bb6e20; }
.verify-title { color: #26221d; }
.verify-email-badge {
  color: #925417;
  border-color: #e3dacb;
  background: #f9f4e9;
}
.verify-desc,
.verify-tip-box { color: #71685c; }
.btn-resend-verify {
  color: #51483d;
  border-color: #ded6c8;
  background: #fffefa;
}
.btn-resend-verify:hover:not(:disabled) {
  color: #985515;
  border-color: #d39a58;
  background: #fff8ec;
}
.btn-cancel-verify { color: #756b5e; }
.onboarding-overlay {
  background: rgba(57,43,26,.4);
  backdrop-filter: blur(12px);
}
.onboarding-card {
  color: #26221d;
  border-color: #e7dac5;
  background: #fffdf8;
  box-shadow: 0 25px 70px rgba(58,43,27,.22), 0 0 40px rgba(205,139,52,.1);
}
.onboarding-title { color: #26221d; }
.onboarding-sub { color: #72695d; }
.onboarding-badge {
  color: #9a5719;
  border-color: #ead5b5;
  background: #fcf2df;
}

body[dir="rtl"] .brand-title { letter-spacing: 0; }
body[dir="rtl"] .brand-sub { text-align: start; }
body[dir="rtl"] .brand-eyebrow { letter-spacing: 0; }

/* Current PixMatic account experience: warm editorial shell and focused sign-in card. */
body {
  --auth-paper: #faf6ed;
  --auth-ink: #202620;
  --auth-muted: #666057;
  --auth-orange: #fcb017;
  min-height: 100svh;
  background:
    radial-gradient(ellipse 42rem 30rem at 8% 3%, rgba(251, 197, 112, .23), transparent 72%),
    radial-gradient(ellipse 34rem 25rem at 96% 100%, rgba(232, 194, 131, .17), transparent 72%),
    var(--auth-paper);
  color: var(--auth-ink);
  font-family: 'Alexandria', 'Cairo', Inter, sans-serif;
}
.split {
  width: min(100%, 1440px);
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 34px);
  grid-template-columns: minmax(0, 1.04fr) minmax(390px, .88fr);
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
  background: transparent;
}
.brand {
  min-height: min(820px, calc(100svh - 68px));
  height: 100%;
  padding: clamp(27px, 4vw, 54px);
  overflow: hidden;
  border: 1px solid #e9dfcd;
  border-radius: 30px;
  background:
    radial-gradient(ellipse 76% 52% at 20% 12%, rgba(255, 225, 177, .75), transparent 74%),
    radial-gradient(ellipse 50% 45% at 94% 91%, rgba(238, 218, 184, .7), transparent 75%),
    linear-gradient(150deg, #fffaf1, #f5eddf 72%, #fbf6ed);
  box-shadow: 0 18px 58px rgba(72, 55, 31, .055);
}
.brand::before { display: none; }
.brand-logo { z-index: 3; }
.brand-logo img { height: 35px !important; }
.brand-cards {
  top: 10%;
  left: 50%;
  right: auto;
  width: min(410px, 86%);
  height: 300px;
  transform: translateX(-50%);
}
.bcard { animation-duration: 7s; box-shadow: 0 22px 48px rgba(87, 64, 35, .15); }
.bcard-tag { font-size: 9px; font-weight: 800; letter-spacing: .07em; }
.brand-content {
  width: min(100%, 560px);
  margin-top: auto;
  padding-top: 330px;
}
.brand-eyebrow {
  margin-bottom: 17px;
  padding: 6px 11px;
  border: 1px solid #ead6b4;
  border-radius: 999px;
  color: #945516;
  background: rgba(255, 253, 248, .76);
  font-size: 10px;
  letter-spacing: .08em;
}
.brand-title {
  max-width: 570px;
  margin-bottom: 15px;
  color: #202620;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(43px, 5vw, 66px);
  font-weight: 500;
  line-height: .99;
  letter-spacing: -.045em;
}
.brand-title .italic {
  color: #985514;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}
.brand-sub {
  max-width: 440px;
  margin-bottom: 22px;
  color: #655e53;
  font-size: 13px;
  line-height: 1.8;
}
.auth-workflow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  color: #39352e;
}
.auth-workflow span {
  padding: 7px 10px;
  border: 1px solid #e4d9c5;
  border-radius: 9px;
  background: rgba(255, 254, 250, .83);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .035em;
}
.auth-workflow span:last-child {
  border-color: #e3b45d;
  background: #fff0ce;
  color: #82500f;
}
.auth-workflow i {
  position: relative;
  width: 17px;
  height: 1px;
  background: #c58a34;
}
.auth-workflow i::after {
  content: '';
  position: absolute;
  top: -3px;
  inset-inline-end: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid #c58a34;
  border-inline-end: 1px solid #c58a34;
  transform: rotate(45deg);
}
.form-side {
  min-height: auto;
  padding: 12px clamp(0px, 1.6vw, 20px);
  align-items: center;
  justify-content: center;
  background: transparent;
}
.form-top {
  width: min(100%, 460px);
  margin: 0 auto 15px;
}
.back-link { color: #70695e; font-size: 12px; }
.back-link:hover { color: #9a5718; }
.lang-btn {
  min-width: 74px;
  border: 1px solid #e5dac7;
  background: rgba(255, 254, 250, .72);
  color: #534d44;
}
.lang-btn:hover { border-color: #d79a3c; background: #fffefa; color: #8f5315; }
.form-wrap {
  width: min(100%, 460px);
  max-width: 460px;
  padding: clamp(27px, 3.5vw, 42px);
  border: 1px solid #e9dfcf;
  border-radius: 25px;
  background: rgba(255, 254, 250, .96);
  box-shadow: 0 24px 70px rgba(63, 48, 28, .095), 0 2px 9px rgba(63, 48, 28, .035);
}
.form-header { margin-bottom: 20px; }
.form-eyebrow {
  padding: 5px 10px;
  border: 1px solid #ecddc5;
  border-radius: 999px;
  background: #fbf2e3;
  color: #8b531b;
  font-size: 9px;
  letter-spacing: .08em;
}
.form-title {
  color: #202620;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(32px, 3.5vw, 42px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.02;
}
.form-sub { color: #71695e; font-size: 12px; line-height: 1.65; }
.google-btn {
  border: 1px solid #e7dece;
  border-radius: 12px;
  background: #fff;
  color: #2b2924;
}
.google-btn:hover:not(:disabled) { border-color: #c9b99e; background: #fffefa; }
.divider { color: #827a6e; font-size: 9px; letter-spacing: .09em; }
.divider::before, .divider::after { background: #e7dfd2; }
.field label { color: #39362f; font-size: 11px; font-weight: 700; }
.field input {
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid #ddd4c5;
  border-radius: 11px;
  background: #fff;
  color: #202620;
  font-size: 13px;
}
.field input:focus {
  border-color: #d99836;
  background: #fffefa;
  box-shadow: 0 0 0 3px rgba(230, 157, 52, .14);
}
.forgot-password-btn { color: #985916; }
.forgot-password-btn:hover { color: #6e3c0c; }
.btn-submit, .btn-check-verify {
  min-height: 47px;
  border: 1.5px solid #202620;
  border-radius: 11px;
  background: var(--auth-orange);
  color: #202620;
  box-shadow: 3px 3px 0 #202620;
  font-size: 13px;
}
.btn-submit:hover:not(:disabled), .btn-check-verify:hover {
  transform: translate(1px, 1px);
  background: #ffc64f;
  box-shadow: 2px 2px 0 #202620;
}
.form-footer { color: #6e665a; font-size: 12px; }
.form-footer a { color: #925114; }
.terms { color: #82796d; font-size: 10px; }
.terms a { color: #62594d; }
.auth-alert { border-radius: 10px; font-size: 12px; }
.verify-icon-wrap { color: #b66a19; }
.verify-title { color: #202620; }
.verify-email-badge { color: #8d5315; }
.verify-desc, .verify-tip-box { color: #6d665b; }
.btn-resend-verify { border-radius: 11px; }

body[dir="rtl"] .brand-title {
  font-family: 'Cairo', sans-serif !important;
  font-size: clamp(34px, 4.1vw, 52px);
  font-weight: 800;
  letter-spacing: 0 !important;
  line-height: 1.34;
}
body[dir="rtl"] .brand-title .italic { font-family: 'Cairo', sans-serif; font-style: normal; color: #96510f; }
body[dir="rtl"] .brand-sub { font-size: 13px; }
body[dir="rtl"] .form-title { font-family: 'Cairo', sans-serif; font-weight: 800; letter-spacing: 0; line-height: 1.35; }
body[dir="rtl"] .form-eyebrow { letter-spacing: 0; }
body[dir="rtl"] .auth-workflow { direction: rtl; }

@media (max-width: 900px) {
  .split {
    width: min(100%, 620px);
    min-height: 100svh;
    padding: 18px;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 14px;
  }
  .brand {
    min-height: auto;
    height: auto;
    padding: 25px 27px 23px;
    border-radius: 24px;
  }
  .brand-cards { display: none; }
  .brand-content { padding-top: 25px; }
  .brand-title { max-width: 570px; font-size: clamp(38px, 7vw, 54px); }
  .brand-sub { margin-bottom: 15px; }
  .form-side { width: 100%; padding: 0; }
  .form-wrap { max-width: none; }
  .form-top { max-width: none; }
}
@media (max-width: 560px) {
  .split { padding: 11px; gap: 12px; }
  .brand { padding: 19px 19px 20px; border-radius: 20px; }
  .brand-logo img { height: 29px !important; }
  .brand-content { padding-top: 19px; }
  .brand-eyebrow { margin-bottom: 12px; }
  .brand-title { margin-bottom: 10px; font-size: 35px; }
  .brand-sub { font-size: 12px; line-height: 1.65; }
  .auth-workflow { gap: 6px; }
  .auth-workflow span { padding: 6px 8px; font-size: 8px; }
  .auth-workflow i { width: 10px; }
  .form-side { padding: 0 4px; }
  .form-top { margin-bottom: 10px; }
  .form-wrap { padding: 24px 20px; border-radius: 20px; }
  .form-header { margin-bottom: 17px; }
  .form-title { font-size: 32px; }
  .form-sub { font-size: 12px; }
  body[dir="rtl"] .brand-title { font-size: 29px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .bcard, .verify-icon-wrap::after { animation: none !important; }
}
body[dir="rtl"] .form-header { text-align: start; }
body[dir="rtl"] .terms,
body[dir="rtl"] .form-footer { text-align: center; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .brand {
    min-height: 248px;
    padding: 24px clamp(22px, 5vw, 42px);
    border-right: 0;
    border-bottom: 1px solid #e9dfcf;
  }
  .brand-content { max-width: 620px; margin-top: 42px; padding-top: 0; }
  .brand-title { max-width: 560px; font-size: clamp(30px, 6vw, 42px); }
  .brand-sub { max-width: 560px; margin-bottom: 0; font-size: 14px; }
  .brand-stats { display: none; }
  .brand-cards { display: none; }
  .form-side { min-height: auto; padding: 24px clamp(18px, 5vw, 42px) 52px; }
  .form-wrap { max-width: 500px; margin: 10px auto 0; }
}
@media (max-width: 480px) {
  .brand { min-height: 216px; padding: 20px 20px 22px; }
  .brand-logo img { height: 29px; }
  .brand-content { margin-top: 34px; }
  .brand-title { font-size: 29px; }
  .brand-sub { font-size: 13px; }
  .form-side { padding: 18px 14px 36px; }
  .form-wrap { padding: 24px 20px; border-radius: 21px; }
  .form-header { text-align: start; margin-bottom: 24px; }
  .form-title { font-size: 29px; }
  .form-sub { font-size: 13px; }
  .divider { margin: 20px 0; }
  .terms { margin-top: 18px; }
}
@media (min-width: 901px) and (max-height: 800px) {
  .brand-content { padding-top: 290px; }
  .brand-stats { display: none; }
  .form-side { padding-top: 22px; padding-bottom: 22px; }
  .form-wrap { padding: 24px 32px; }
  .form-header { margin-bottom: 16px; }
  .form-eyebrow { margin-bottom: 10px; }
  .google-btn { padding-top: 11px; padding-bottom: 11px; margin-bottom: 10px; }
  .divider { margin: 12px 0; }
  .field { margin-bottom: 9px; }
  .field input { padding-top: 10px; padding-bottom: 10px; }
  .btn-submit { padding-top: 12px; padding-bottom: 12px; }
  .form-footer { margin-top: 12px; }
  .terms { margin-top: 12px; }
}