:root{
  --brand:#0A5C4D;
  --brand-deep:#063D34;
  --brand-soft:#0D7A66;
  --accent:#9CAA2E;
  --navy:var(--brand);
  --navy-deep:var(--brand-deep);
  --cyan:var(--brand-soft);
  --cyan-dark:var(--brand);
  --lime:var(--accent);
  --red:#B42318;
  --cream:#F5F6F5;
  --slate:#5E6E69;
  --ink:#1B2422;
  --line:#E3E9E6;
  --focus:rgba(10,92,77,.16);
  --shadow:0 1px 2px rgba(27,36,34,.04), 0 16px 40px rgba(27,36,34,.08);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--cream);
  color:var(--ink);
  min-height:100vh;
  display:flex;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  display:flex;
  width:100%;
  min-height:100vh;
}

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

.stripes{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.06;
}
.stripes span{
  position:absolute;
  width:100px;
  height:340%;
  top:-120%;
  background:#fff;
  transform:rotate(-28deg);
  border-radius:60px;
}
.stripes span:nth-child(1){ left:-6%; }
.stripes span:nth-child(2){ left:16%; }
.stripes span:nth-child(3){ left:38%; }

.brand-top{
  position:relative;
  z-index:2;
}
.logo-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:6px;
}
.logo-row img.como-logo{
  height:30px;
  width:auto;
  display:block;
  opacity:.92;
}
.logo-divider{
  width:1px;
  height:28px;
  background:rgba(255,255,255,0.22);
}
.logo-row img.jabal-logo{
  height:48px;
  width:auto;
  display:block;
  border-radius:8px;
  background:#fff;
  padding:5px 10px;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}
.eyebrow{
  font-size:11.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.58);
  margin-top:28px;
  font-weight:600;
}

.brand-mid{
  position:relative;
  z-index:2;
  margin-top:36px;
}
.brand-mid h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(28px, 3.2vw, 36px);
  line-height:1.18;
  font-weight:600;
  letter-spacing:-0.02em;
  max-width:10em;
}
.brand-mid p{
  margin-top:16px;
  font-size:15px;
  line-height:1.65;
  color:rgba(255,255,255,0.72);
  max-width:34em;
}

.feature-list{
  position:relative;
  z-index:2;
  margin-top:34px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.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(156,170,46,0.18);
  border:1px solid rgba(156,170,46,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
}
.feature-list .dot svg{ width:14px; height:14px; }
.feature-list .text{
  font-size:13.5px;
  color:rgba(255,255,255,0.82);
  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;
  gap:16px;
  flex-wrap:wrap;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,0.12);
}
.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:12px;
  color:rgba(255,255,255,0.82);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  padding:7px 12px;
  border-radius:999px;
}
.support-pill .ring{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(156,170,46,0.22);
}

/* ============ RIGHT FORM PANEL ============ */
.panel-form{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 32px;
  background:
    linear-gradient(180deg, #FAFBFA 0%, var(--cream) 100%);
}
.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:5px 10px;
  border-radius:7px;
}
.lang-toggle button.active{
  color:var(--brand);
  background:#E8EFEC;
}

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

form{ margin-top:28px; display:flex; flex-direction:column; gap:16px; }
.field label{
  display:block;
  font-size:12.5px;
  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:1px 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:#9AA8A3; }
.field input:focus{
  border-color:var(--brand-soft);
  box-shadow:0 0 0 4px var(--focus);
}
.field .icon{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  width:16px; height:16px;
  color:#8A9893;
}

.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(--brand); width:15px; height:15px; }
.forgot{
  color:var(--brand);
  font-weight:600;
  text-decoration:none;
}
.forgot:hover{ color:var(--brand-deep); }

.btn-primary{
  margin-top:6px;
  width:100%;
  padding:13px 16px;
  border:none;
  border-radius:10px;
  background:var(--brand);
  color:#fff;
  font:inherit;
  font-weight:600;
  font-size:14.5px;
  letter-spacing:0.01em;
  cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease, transform .1s ease;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 1px 2px rgba(6,61,52,.18);
}
.btn-primary:hover{
  background:var(--brand-deep);
  color:#fff;
  box-shadow:0 6px 18px rgba(6,61,52,.22);
}
.btn-primary:active{ transform:translateY(1px); }

.divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:26px 0 20px;
  color:#A3AFA9;
  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:#F1F5F3;
  border:1px solid #D7E2DE;
  border-radius:10px;
  padding:13px 14px;
}
.child-note .flag{
  flex:0 0 22px;
  width:22px; height:22px;
  border-radius:6px;
  background:var(--brand);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:12px;
  font-weight:700;
}
.child-note p{
  font-size:13px;
  line-height:1.5;
  color:var(--slate);
}
.child-note p b{ color:var(--ink); font-weight:600; }

.validation-summary,
.field-error{
  color:var(--red);
  font-size:12.5px;
}
.validation-summary{
  background:#FDF2F2;
  border:1px solid #F0D4D2;
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:4px;
}
.alert-success{
  color:#0A5C44;
  background:#E8F4EF;
  border:1px solid #C5E0D4;
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  margin-bottom:4px;
}

.signup-line{
  margin-top:22px;
  text-align:center;
  font-size:13px;
  color:var(--slate);
}
.signup-line a{
  color:var(--brand);
  font-weight:600;
  text-decoration:none;
}
.signup-line a:hover{ color:var(--brand-deep); }

@media (max-width: 920px){
  .wrap{ flex-direction:column; }
  .panel-brand{
    flex:none;
    padding:36px 28px 32px;
  }
  .brand-mid h1{ font-size:28px; }
  .feature-list{ display:none; }
  .panel-form{ padding:32px 22px 48px; }
}