*{
  box-sizing:border-box
}
body{
  margin:0;
  font-family:Arial,sans-serif;
  background:#f7f5ef;
  color:#173c38
}
main{
  max-width:1040px;
  margin:40px auto;
  padding:24px
}
header{
  text-align:center;
  margin-bottom:28px
}
header img{
  width:84px;
  height:84px;
  object-fit:contain
}
h1{
  font-size:30px
}
header p{
  color:#64726e
}
.panels{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:white;
  border:1px solid #ded7c6;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 18px 55px #173c3810
}
.panel{
  padding:40px
}
.panel+.panel{
  border-left:1px solid #e7e2d7;
  background:#fcfbf7
}
h2{
  font-size:26px;
  margin-top:0
}
p{
  line-height:1.6
}
label{
  display:block;
  font-size:14px;
  font-weight:bold;
  margin:20px 0 8px
}
input{
  width:100%;
  padding:14px;
  border:1px solid #cbd5d0;
  border-radius:10px;
  font:inherit;
  background:white
}
button{
  width:100%;
  padding:14px;
  border-radius:10px;
  font:inherit;
  font-weight:bold;
  cursor:pointer
}
.primary{
  border:1px solid #173c38;
  background:#173c38;
  color:white;
  margin-top:24px
}
.google{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:white;
  border:1px solid #cbd5d0;
  color:#253b34
}
.google svg{
  width:22px;
  height:22px
}
.divider{
  text-align:center;
  color:#7e847e;
  font-size:13px;
  margin:20px
}
.notice{
  padding:14px;
  border:1px solid #dfc899;
  border-radius:10px;
  background:#fff9eb;
  font-size:14px
}
a{
  color:#315d50
}
button:focus-visible,a:focus-visible,input:focus-visible{
  outline:3px solid #b88d44;
  outline-offset:3px
}
#feedback{
  min-height:28px;
  text-align:center
}
@media(max-width:700px){
  main{
    margin:12px auto;
    padding:16px
  }
  .panels{
    grid-template-columns:1fr
  }
  .panel{
    padding:26px
  }
  .panel+.panel{
    border-left:0;
    border-top:1px solid #e7e2d7
  }
}
.preview-nav{
  display:flex;
  align-items:center;
  gap:30px;
  padding:16px 5%;
  background:white;
  border-bottom:1px solid #e6dfd1;
  flex-wrap:wrap
}
.preview-nav img{
  width:58px;
  height:64px;
  object-fit:contain
}
.nav-links{
  display:flex;
  align-items:center;
  gap:24px;
  flex:1
}
.preview-nav a{
  text-decoration:none;
  white-space:nowrap
}
.preview-nav button{
  width:auto;
  background:white;
  color:#173c38;
  border:1px solid #ddd4c3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px
}
.cart-preview{
  margin-left:10px
}
.profile-preview{
  font-size:13px
}
@media(max-width:700px){
  .preview-nav{
    gap:14px;
    padding:14px
  }
  .nav-links{
    order:3;
    flex-basis:100%;
    gap:16px;
    justify-content:center;
    font-size:13px;
    flex-wrap:wrap
  }
  .profile-preview{
    margin-left:auto
  }
  .cart-preview{
    margin-left:0
  }
}
@media(min-width:701px){
  .nav-links{
    flex:0 1 auto;
    margin-left:auto;
    gap:22px
  }
  .preview-nav{
    gap:22px;
    flex-wrap:nowrap
  }
  .cart-preview{
    margin-left:0
  }
  .profile-preview{
    flex-shrink:0
  }
}