@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Zilla+Slab:wght@600;700&display=swap');

:root{
  --blue:#08182a;
  --panel:#102942;
  --white:#eff7fb;
  --muted:#aec0cf;
  --green:#62d99d;
  --amber:#efb04f;
  --line:rgba(255,255,255,.14);
}

*{box-sizing:border-box}

body{
  margin:0;
  color:var(--white);
  background:var(--blue);
  font-family:Manrope,sans-serif;
}

nav{
  padding:1.3rem max(1.3rem,5vw);
  border-bottom:1px solid var(--line);
}

nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem 1.3rem;
  margin:0;
  padding:0;
  list-style:none;
}

nav a{
  color:var(--green);
  font-weight:600;
  text-decoration:none;
}

header{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  min-height:65vh;
}

header img{
  width:100%;
  height:65vh;
  object-fit:cover;
  opacity:.8;
}

header > div{
  align-self:center;
  padding:4rem max(1.5rem,6vw);
  background:var(--panel);
}

.eyebrow{
  color:var(--amber);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.75rem;
  font-weight:700;
}

h1,h2{font-family:"Zilla Slab",serif}

h1{
  margin:.5rem 0 1rem;
  font-size:clamp(3.5rem,8vw,7rem);
  line-height:.9;
}

.intro{
  color:var(--muted);
  font-size:1.06rem;
  line-height:1.7;
}

main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 22rem;
  gap:4rem;
  max-width:82rem;
  margin:auto;
  padding:5rem 2rem 7rem;
}

article{
  color:#c7d4de;
  font-size:1.03rem;
  line-height:1.85;
}

article h2{
  color:var(--green);
  font-size:2.3rem;
}

.simulator{
  align-self:start;
  position:sticky;
  top:2rem;
  padding:1.4rem;
  border:1px solid var(--line);
  background:var(--panel);
}

.simulator h2{
  margin-top:0;
  color:var(--amber);
}

label{
  display:block;
  margin:1rem 0;
  color:var(--muted);
}

input{
  width:100%;
  margin-top:.4rem;
  padding:.7rem;
  color:var(--white);
  border:1px solid var(--line);
  background:var(--blue);
  font:inherit;
}

button{
  width:100%;
  padding:.75rem;
  color:var(--blue);
  border:0;
  background:var(--green);
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

#result{
  margin-top:1rem;
  padding:1rem;
  background:rgba(0,0,0,.2);
  line-height:1.5;
}

@media(max-width:820px){
  header,main{grid-template-columns:1fr}
  header img{height:40vh}
  .simulator{position:static}
}