:root{
  --bg:#101b25;
  --dark:#0b141c;
  --surface:#16232e;
  --lime:#cff46a;
  --ink:#edf2f3;
  --sub:#91a2ad;
  --line:#34434e;
  font-family:Inter,Arial,Helvetica,sans-serif;
  color-scheme:dark
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink)
}

.shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.1fr .9fr
}

.visual{
  padding:55px 7vw;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid var(--line);
  background:
    linear-gradient(rgba(207,244,106,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(207,244,106,.035) 1px,transparent 1px);
  background-size:45px 45px
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:inherit;
  text-decoration:none;
  font-size:23px;
  font-weight:700
}

.brand-mark{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  background:var(--lime);
  color:var(--bg);
  font-weight:900;
  font-size:25px;
  clip-path:polygon(0 0,100% 0,100% 78%,78% 100%,0 100%)
}

.lime{color:var(--lime)}

.visual-copy{
  max-width:680px
}

.eyebrow{
  color:var(--lime);
  font-size:10px;
  letter-spacing:2px;
  font-weight:700;
  margin:0 0 20px
}

h1{
  font-size:clamp(48px,5vw,76px);
  line-height:1.03;
  letter-spacing:-3px;
  font-weight:500;
  margin:0 0 28px
}

h1 span{color:var(--lime)}

.lead{
  max-width:550px;
  color:var(--sub);
  font-size:17px;
  line-height:1.8
}

.development{
  color:var(--sub);
  font-size:10px;
  letter-spacing:1.5px
}

.development span{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--lime);
  margin-right:8px
}

.access{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:50px
}

.card{
  width:100%;
  max-width:430px
}

h2{
  font-size:36px;
  font-weight:500;
  letter-spacing:-1px;
  margin:0 0 8px
}

.subtitle{
  color:var(--sub);
  font-size:14px;
  margin:0 0 35px
}

label{
  display:block;
  font-size:12px;
  color:var(--sub);
  margin-bottom:22px
}

input{
  width:100%;
  display:block;
  margin-top:9px;
  background:#0c161f;
  border:1px solid var(--line);
  color:var(--ink);
  padding:15px;
  border-radius:4px;
  font-size:16px;
  outline:none
}

input:focus{
  border-color:var(--lime);
  box-shadow:0 0 0 2px rgba(207,244,106,.12)
}

button{
  width:100%;
  min-height:51px;
  border:0;
  border-radius:4px;
  background:var(--lime);
  color:var(--bg);
  font-weight:800;
  letter-spacing:.6px;
  cursor:pointer
}

button:disabled{
  opacity:.6;
  cursor:wait
}

.error{
  min-height:22px;
  font-size:13px;
  color:#ff9696
}

.secure{
  text-align:center;
  color:#71838e;
  font-size:10px;
  letter-spacing:1.4px;
  margin-top:25px
}

.secure::first-letter{
  color:var(--lime)
}

.back{
  color:var(--sub);
  text-decoration:none;
  font-size:13px;
  margin-top:35px
}

.back:hover{color:var(--lime)}

@media(max-width:850px){
  .shell{grid-template-columns:1fr}

  .visual{
    min-height:330px;
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:35px 30px
  }

  .visual-copy{margin:55px 0}

  h1{
    font-size:44px;
    letter-spacing:-2px
  }

  .access{padding:55px 28px}
}