:root{
  --cream:#FFF8F0;
  --pink:#FF8FAB;
  --pink-deep:#E85D75;
  --blue:#8ECAE6;
  --blue-deep:#5FA8CC;
  --gold:#F5B942;
  --plum:#3A2E39;
  --muted:#8B7E89;
  --white:#FFFFFF;
  --line:#F0E3E7;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Quicksand', sans-serif;
  color:var(--plum);
  background:var(--cream);
  min-height:100vh;
  display:flex;
}
a{color:inherit;}

/* ---------- Left panel ---------- */
.panel{
  position:relative;
  width:44%;
  min-height:100vh;
  background:linear-gradient(155deg, var(--pink) 0%, #FFB3C6 38%, var(--blue) 100%);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:48px 56px;
}
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(60deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 2px, transparent 2px, transparent 46px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 2px, transparent 2px, transparent 46px);
  pointer-events:none;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  z-index:2;
}
.cube-logo{ width:42px; height:42px; flex-shrink:0; }
.brand-name{
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size:22px;
  color:var(--white);
  letter-spacing:0.2px;
}
.brand-name span{ color:var(--gold); }

.panel-copy{
  position:relative;
  z-index:2;
  max-width:380px;
}
.panel-copy h1{
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  font-size:38px;
  line-height:1.18;
  color:var(--white);
  margin-bottom:14px;
  text-shadow:0 2px 14px rgba(58,46,57,0.12);
}
.panel-copy p{
  font-size:16px;
  line-height:1.6;
  color:rgba(255,255,255,0.92);
}

.tiles{
  position:relative;
  z-index:2;
  height:96px;
}
.tile{
  position:absolute;
  width:46px; height:46px;
  background:var(--white);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  font-size:20px;
  color:var(--pink-deep);
  box-shadow:0 10px 22px rgba(58,46,57,0.16);
  animation:bob 5s ease-in-out infinite;
}
.tile.blue{ color:var(--blue-deep); }
.tile.gold{ color:#B5790E; }
.tile:nth-child(1){ left:0;   top:18px; animation-delay:0s; }
.tile:nth-child(2){ left:56px; top:0px;  animation-delay:0.6s; }
.tile:nth-child(3){ left:112px;top:26px; animation-delay:1.1s; }
.tile:nth-child(4){ left:190px;top:4px;  animation-delay:0.3s; }
.tile:nth-child(5){ left:246px;top:30px; animation-delay:1.6s; }
.tile:nth-child(6){ left:302px;top:8px;  animation-delay:0.9s; }
@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

@media (prefers-reduced-motion: reduce){
  .tile{ animation:none; }
}

/* ---------- Right panel (form) ---------- */
.form-side{
  width:56%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  background:var(--white);
}
.form-card{
  width:100%;
  max-width:400px;
}
.eyebrow{
  font-size:13px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--pink-deep);
  margin-bottom:8px;
}
.form-card h2{
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  font-size:30px;
  margin-bottom:8px;
}
.form-card > p.sub{
  color:var(--muted);
  font-size:15px;
  margin-bottom:32px;
}

.field{ margin-bottom:20px; }
.field label{
  display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:7px;
  color:var(--plum);
}
.field input{
  width:100%;
  padding:13px 16px;
  border-radius:14px;
  border:2px solid var(--line);
  background:#FFFCF9;
  font-family:'Quicksand', sans-serif;
  font-size:15px;
  font-weight:500;
  color:var(--plum);
  outline:none;
  transition:border-color .15s ease, background .15s ease;
}
.field input::placeholder{ color:#C9BCC2; }
.field input:focus{
  border-color:var(--pink);
  background:var(--white);
}
.field input:focus-visible{
  outline:2px solid var(--blue-deep);
  outline-offset:2px;
}
.form-card h2{
    font-family:'Fredoka', sans-serif;
    font-weight:600;
    font-size:30px;
    margin-bottom:8px;
  }
  .form-card > p.sub{
    color:var(--muted);
    font-size:15px;
    margin-bottom:28px;
  }

  .name-row{
    display:flex;
    gap:14px;
  }
  .name-row .field{ flex:1; }

  .field{ margin-bottom:18px; }
  .field label{
    display:block;
    font-size:14px;
    font-weight:600;
    margin-bottom:7px;
    color:var(--plum);
  }
  .field input{
    width:100%;
    padding:13px 16px;
    border-radius:14px;
    border:2px solid var(--line);
    background:#FFFCF9;
    font-family:'Quicksand', sans-serif;
    font-size:15px;
    font-weight:500;
    color:var(--plum);
    outline:none;
    transition:border-color .15s ease, background .15s ease;
  }
  .field input::placeholder{ color:#C9BCC2; }
  .field input:focus{
    border-color:var(--blue);
    background:var(--white);
  }
  .field input:focus-visible{
    outline:2px solid var(--pink-deep);
    outline-offset:2px;
  }
  .hint{
    font-size:12.5px;
    color:var(--muted);
    margin-top:6px;
  }

  .field.invalid input{
    border-color:#E85D75;
    background:#FFF6F7;
  }
  .error-msg{
    display:none;
    align-items:center;
    gap:6px;
    font-size:12.5px;
    font-weight:600;
    color:#E85D75;
    margin-top:7px;
  }
  .error-msg svg{ width:14px; height:14px; flex-shrink:0; }
  .field.invalid .error-msg{ display:flex; }

  .field-wrap{ position:relative; }
  .field-wrap input{ padding-right:44px; }
  .toggle-visibility{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    cursor:pointer;
    padding:4px;
    color:var(--muted);
    display:flex;
  }
  .toggle-visibility svg{ width:18px; height:18px; }
  .toggle-visibility:hover{ color:var(--blue-deep); }

  .strength{ margin-top:10px; }
  .strength-bars{
    display:flex;
    gap:5px;
    margin-bottom:6px;
  }
  .strength-bars span{
    height:5px;
    flex:1;
    border-radius:3px;
    background:var(--line);
    transition:background .2s ease;
  }
  .strength-label{
    font-size:12.5px;
    color:var(--muted);
    font-weight:600;
  }

  .checklist{
    list-style:none;
    margin:12px 0 0;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .checklist li{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    color:var(--muted);
  }
  .checklist li svg{
    width:15px; height:15px;
    flex-shrink:0;
    color:var(--line);
    transition:color .15s ease;
  }
  .checklist li.met{ color:#4FA37B; }
  .checklist li.met svg{ color:#4FA37B; }

  .match-msg{
    font-size:12.5px;
    font-weight:600;
    margin-top:7px;
    min-height:16px;
  }
  .match-msg.good{ color:#4FA37B; }
  .match-msg.bad{ color:#E85D75; }

  .form-error-banner{
    display:none;
    align-items:center;
    gap:10px;
    background:#FFF6F7;
    border:1.5px solid #F6C6CD;
    color:#E85D75;
    font-size:13px;
    font-weight:600;
    padding:11px 14px;
    border-radius:12px;
    margin-bottom:18px;
  }
  .form-error-banner.show{ display:flex; }
  .form-error-banner svg{ width:17px; height:17px; flex-shrink:0; }

  .terms{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:24px;
    font-size:13.5px;
    color:var(--muted);
    line-height:1.5;
  }
  .terms input{
    width:16px; height:16px;
    margin-top:2px;
    accent-color:var(--blue-deep);
    flex-shrink:0;
  }
  .terms a{
    color:var(--pink-deep);
    font-weight:600;
    text-decoration:none;
  }
  .terms a:hover{ text-decoration:underline; }
  #termsError{ margin-top:-16px; margin-bottom:20px; display:none; }
  #termsError.show{ display:flex; }

.row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:26px;
  font-size:14px;
}
.remember{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
}
.remember input{
  width:16px; height:16px;
  accent-color:var(--pink-deep);
}
.forgot{
  color:var(--blue-deep);
  font-weight:600;
  text-decoration:none;
}
.forgot:hover{ text-decoration:underline; }

.btn-primary{
  width:100%;
  padding:14px 16px;
  border:none;
  border-radius:14px;
  background:linear-gradient(120deg, var(--pink-deep), var(--pink));
  color:var(--white);
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  font-size:16px;
  letter-spacing:0.2px;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(232,93,117,0.28);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(232,93,117,0.34);
}
.btn-primary:focus-visible{
  outline:2px solid var(--blue-deep);
  outline-offset:3px;
}

.divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:26px 0;
  color:var(--muted);
  font-size:13px;
}
.divider::before, .divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}

.switch-line{
  text-align:center;
  font-size:14.5px;
  color:var(--muted);
}
.switch-line a{
  color:var(--pink-deep);
  font-weight:700;
  text-decoration:none;
}
.switch-line a:hover{ text-decoration:underline; }
.back-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:26px;
  font-size:14.5px;
  font-weight:600;
  color:var(--muted);
  text-decoration:none;
}
.back-link:hover{ color:var(--pink-deep); }
.back-link svg{ width:15px; height:15px; }

/* ---------- Confirmation state (shown after "submit") ---------- */
.confirm-state{ display:none; }
.confirm-state.active{ display:block; }
.form-card.sent .default-state{ display:none; }
.form-card.sent .confirm-state{ display:block; }

.confirm-icon{
  width:56px; height:56px;
  border-radius:16px;
  background:#FFF3D9;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}
.confirm-icon svg{ width:28px; height:28px; }

.resend{
  font-size:14.5px;
  color:var(--muted);
  margin-top:22px;
  text-align:center;
}
.resend button{
  background:none;
  border:none;
  color:var(--pink-deep);
  font-weight:700;
  font-family:'Quicksand', sans-serif;
  font-size:14.5px;
  cursor:pointer;
  padding:0;
}
.resend button:hover{ text-decoration:underline; }
.key-icon{
  position:relative;
  z-index:2;
}
.key-icon svg{ width:64px; height:64px; }
/* ---------- Success state ---------- */
.form-card.done .default-state{ display:none; }
.success-state{ display:none; text-align:left; }
.form-card.done .success-state{ display:block; }

.success-icon{
  width:56px; height:56px;
  border-radius:16px;
  background:#E6F4EC;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}
.success-icon svg{ width:28px; height:28px; }

@media (max-width: 900px){
  body{ flex-direction:column; }
  .panel{ width:100%; min-height:auto; padding:36px 28px 44px; }
  .form-side{ width:100%; padding:40px 24px 64px; }
  .panel-copy h1{ font-size:28px; }
  .tiles{ display:none; }
}
@media (max-width: 767px){

}