:root{
  --navy:#0A3D67;
  --navy-deep:#062A49;
  --cyan:#00C2DF;
  --cyan-dark:#009DB8;
  --red:#E8291F;
  --cream:#FAFAF8;
  --slate:#5B6B7A;
  --ink:#14212E;
  --line:#E4E9ED;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter',sans-serif;
  background:var(--cream);
  color:var(--ink);
  min-height:100vh;
  display:flex;
}
.wrap{
  display:flex;
  width:100%;
  min-height:100vh;
}

/* ============ LEFT BRAND PANEL ============ */
.panel-brand{
  position:relative;
  flex:0 0 44%;
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:56px 56px 44px;
}

/* diagonal stripe motif echoing the COMO wordmark's slash strokes */
.stripes{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.14;
}
.stripes span{
  position:absolute;
  width:120px;
  height:340%;
  top:-120%;
  background:#fff;
  transform:rotate(-30deg);
  border-radius:60px;
}
.stripes span:nth-child(1){ left:-8%; }
.stripes span:nth-child(2){ left:14%; }
.stripes span:nth-child(3){ left:36%; }

.brand-top{
  position:relative;
  z-index:2;
}
.logo-row{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:6px;
}
.logo-row img.como-logo{
  height:34px;
  width:auto;
  display:block;
}
.logo-divider{
  width:1px;
  height:30px;
  background:rgba(255,255,255,0.28);
}
.logo-row img.lfim-logo{
  height:48px;
  width:auto;
  display:block;
  border-radius:6px;
  background:#fff;
  padding:4px 6px;
}
.eyebrow{
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.62);
  margin-top:30px;
  font-weight:600;
}

.brand-mid{
  position:relative;
  z-index:2;
  margin-top:38px;
}
.brand-mid h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:38px;
  line-height:1.14;
  font-weight:600;
  letter-spacing:-0.01em;
  max-width:9.5em;
}
.brand-mid p{
  margin-top:18px;
  font-size:15.5px;
  line-height:1.6;
  color:rgba(255,255,255,0.72);
  max-width:32em;
}

.feature-list{
  position:relative;
  z-index:2;
  margin-top:36px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.feature-list .item{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.feature-list .dot{
  flex:0 0 26px;
  width:26px;
  height:26px;
  border-radius:8px;
  background:rgba(0,194,223,0.18);
  border:1px solid rgba(0,194,223,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
}
.feature-list .dot svg{ width:14px; height:14px; }
.feature-list .text{
  font-size:14px;
  color:rgba(255,255,255,0.85);
  line-height:1.5;
  padding-top:3px;
}
.feature-list .text b{ color:#fff; font-weight:600; }

.brand-bottom{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:34px;
  border-top:1px solid rgba(255,255,255,0.14);
}
.brand-bottom .term{
  font-size:12.5px;
  color:rgba(255,255,255,0.55);
}
.brand-bottom .term b{ color:#fff; }
.support-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  color:rgba(255,255,255,0.8);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  padding:7px 12px;
  border-radius:999px;
}
.support-pill .ring{
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,194,223,0.25);
}

/* ============ RIGHT FORM PANEL ============ */
.panel-form{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 32px;
}
.form-card{
  width:100%;
  max-width:400px;
}
.lang-toggle{
  display:flex;
  justify-content:flex-end;
  gap:4px;
  margin-bottom:34px;
  font-size:12.5px;
  font-weight:600;
  color:var(--slate);
}
.lang-toggle button{
  border:none;
  background:none;
  font:inherit;
  color:var(--slate);
  cursor:pointer;
  padding:4px 8px;
  border-radius:6px;
}
.lang-toggle button.active{
  color:var(--navy);
  background:#EEF3F7;
}

.form-head h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:27px;
  font-weight:600;
  letter-spacing:-0.01em;
}
.form-head p{
  margin-top:8px;
  font-size:14px;
  color:var(--slate);
  line-height:1.55;
}

form{ margin-top:30px; display:flex; flex-direction:column; gap:18px; }
.field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:7px;
}
.field .input-wrap{
  position:relative;
}
.field input{
  width:100%;
  font:inherit;
  font-size:14.5px;
  padding:12px 14px 12px 40px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder{ color:#A7B2BC; }
.field input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(0,194,223,0.14);
}
.field .icon{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  width:16px; height:16px;
  color:#9FAAB4;
}

.row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
}
.remember{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--slate);
}
.remember input{ accent-color:var(--cyan); width:15px; height:15px; }
.forgot{
  color:var(--navy);
  font-weight:600;
  text-decoration:none;
}
.forgot:hover{ color:var(--cyan-dark); }

.btn-primary{
  margin-top:6px;
  width:100%;
  padding:13px 16px;
  border:none;
  border-radius:10px;
  background:var(--cyan);
  color:var(--navy-deep);
  font:inherit;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  transition:background .15s ease, transform .1s ease;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary:hover{ background:var(--cyan-dark); color:#fff; }
.btn-primary:active{ transform:translateY(1px); }

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

.child-note{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#F4FAFB;
  border:1px solid #DDF0F3;
  border-radius:10px;
  padding:13px 14px;
}
.child-note .flag{
  flex:0 0 22px;
  width:22px; height:22px;
  border-radius:6px;
  background:var(--red);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:12px;
  font-weight:700;
}
.child-note p{
  font-size:12.5px;
  line-height:1.55;
  color:var(--slate);
}
.child-note p b{ color:var(--ink); }

.signup-line{
  margin-top:26px;
  text-align:center;
  font-size:13.5px;
  color:var(--slate);
}
.signup-line a{
  color:var(--navy);
  font-weight:700;
  text-decoration:none;
}
.signup-line a:hover{ color:var(--cyan-dark); }

.validation-summary,
.field-error{
  display:block;
  font-size:13px;
  color:var(--red);
  margin-top:6px;
}
.validation-summary{
  margin-bottom:4px;
  padding:10px 12px;
  background:#FEF2F2;
  border:1px solid #FCD5D3;
  border-radius:10px;
}
.alert-success{
  margin-bottom:18px;
  padding:10px 12px;
  font-size:13px;
  color:#0A5C44;
  background:#E8F8F2;
  border:1px solid #BFE8D7;
  border-radius:10px;
}

@media (max-width:880px){
  .wrap{ flex-direction:column; }
  .panel-brand{
    flex:none;
    padding:36px 28px 30px;
  }
  .brand-mid h1{ font-size:28px; }
  .feature-list{ display:none; }
  .panel-form{ padding:36px 24px 60px; }
}