.root, :root{
  --bg:#fbf8f3;
  --text:#0f3b2e;
  --muted:#5a786d;
  --accent:#b79a5b;
  --radius:8px;
}
*{box-sizing:border-box}
html,body{height:100%}
.wrap{  /* ensure background sits behind content */ }
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background-image: linear-gradient(rgba(251,248,243,0.82), rgba(251,248,243,0.82)), url('assets/cotton-bg.svg');
  background-size:1200px 800px;
  background-position:center center;
  background-repeat:repeat;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  text-align:center;
}
.logo-img{
  height:56px;
  width:auto;
  display:block;
  margin:0 auto 8px;
  filter: drop-shadow(0 10px 30px rgba(11,9,7,0.08));
}

.brand .logo{
  font-weight:700;
  letter-spacing:6px;
  font-size:28px;
  line-height:1;
  color:var(--accent);
}
.brand .sub{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:2px;
}
.headline{
  margin:28px 0 8px;
  font-size:46px;
  font-weight:300;
  color:var(--text);
}
.lead{
  margin:0 0 20px;
  color:var(--muted);
  max-width:520px;
}
.lead{
  margin:0 0 20px;
  color:var(--muted);
  max-width:600px;
}
.foot{
  margin-top:36px;
  color:var(--muted);
  font-size:12px;
}
.foot{
  margin-top:36px;
  color:var(--muted);
  font-size:12px;
}

@media (max-width:520px){
  .headline{font-size:34px}
}