/* Nexus Mortgage — Shared Styles */
/* Monoline v1 Design System */

:root{
  /* surface */
  --bg:#f6f3ea;
  --surface:#fffefa;
  --line:#e6e1d4;

  /* ink */
  --ink:#2c3528;
  --soft:#5f6453;
  --muted:#9b9c8c;

  /* green (brand) */
  --sage:#6f8e66;
  --sage-deep:#4f6b49;
  --sage-soft:#e9efe1;

  /* warm accents */
  --sand:#cf9b5e;
  --sand-soft:#f3e6d2;
  --stroke:#46583f;

  /* semantic */
  --warn:#b06a3a;
  --warn-soft:#f6ead9;

  /* radius */
  --r-field:14px;
  --r-card:16px;
  --r-btn:14px;
  --r-hero:20px;
  --r-pill:999px;
  --r-chip:13px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  background:var(--bg);
  font-family:'Hanken Grotesk',sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--ink);
}

/* Typography */
h1,h2,h3,h4,h5,h6{
  font-family:'Fraunces',serif;
  font-weight:400;
  color:var(--ink);
  letter-spacing:-.005em;
}

h1 em,h2 em,h3 em{
  font-style:italic;
  color:var(--sage-deep);
}

/* Monoline illustration stroke */
.ls{
  fill:none;
  stroke:var(--stroke);
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Layout */
.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 48px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:48px;
  padding:0 24px;
  border-radius:12px;
  font:600 15px 'Hanken Grotesk';
  cursor:pointer;
  border:none;
  text-decoration:none;
  transition:all 150ms ease;
}

.btn.primary{
  background:var(--sage-deep);
  color:#f3f7ef;
}

.btn.primary:hover{
  background:#3f5939;
}

.btn.ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}

.btn.ghost:hover{
  border-color:var(--sage);
  background:#fbfaf3;
}

.btn:focus-visible{
  outline:2px solid var(--sage-deep);
  outline-offset:3px;
}

/* Eyebrow */
.eyebrow{
  font:700 11px 'Hanken Grotesk';
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sand);
}

/* Navigation */
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:80px;
}

.brand{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:23px;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
}

.brand .dot{
  width:24px;
  height:24px;
  border-radius:7px;
  background:var(--sage-deep);
  display:flex;
  align-items:center;
  justify-content:center;
}

.navlinks{
  display:flex;
  gap:28px;
  font:500 15px 'Hanken Grotesk';
  color:var(--soft);
}

.navlinks a{
  color:var(--soft);
  text-decoration:none;
  transition:color 150ms ease;
}

.navlinks a:hover{
  color:var(--sage-deep);
}

.navright{
  display:flex;
  align-items:center;
  gap:18px;
}

.navright .signin{
  font:500 15px 'Hanken Grotesk';
  color:var(--soft);
  text-decoration:none;
  transition:color 150ms ease;
}

.navright .signin:hover{
  color:var(--sage-deep);
}

/* Mobile nav toggle */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  background:transparent;
  border:none;
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}

.nav-toggle span{
  width:22px;
  height:2px;
  background:var(--ink);
  transition:all 200ms ease;
}

/* Section */
section.band{
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.sec{
  padding:78px 0;
}

.sechead{
  text-align:center;
  max-width:60ch;
  margin:0 auto 46px;
}

.sechead h2{
  font-size:38px;
  line-height:1.08;
  margin:12px 0 14px;
}

.sechead p{
  font-size:17px;
  line-height:1.55;
  color:var(--soft);
}

/* Features */
.features{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}

.feat{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px;
}

.feat .ic{
  width:54px;
  height:54px;
  border-radius:15px;
  background:var(--sage-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--stroke);
  margin-bottom:18px;
}

.feat h3{
  font-size:21px;
  margin-bottom:8px;
}

.feat p{
  font-size:15px;
  line-height:1.55;
  color:var(--soft);
}

/* Chips */
.chip{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:12px 22px;
  font:600 15px 'Hanken Grotesk';
  color:var(--ink);
}

/* CTA Band */
.ctaband{
  background:var(--sage-deep);
  border-radius:24px;
  padding:56px;
  text-align:center;
  color:#f3f7ef;
}

.ctaband h2{
  color:#fbfdfa;
  font-size:36px;
  margin-bottom:14px;
}

.ctaband h2 em{
  color:#cfe0c2;
}

.ctaband p{
  font-size:17px;
  color:#d7e3d0;
  margin-bottom:26px;
}

.ctaband .btn.primary{
  background:#fbfdfa;
  color:var(--sage-deep);
}

.ctaband .btn.primary:hover{
  background:#f0f4ed;
}

/* Footer */
footer{
  padding:54px 0 40px;
  color:var(--soft);
}

.fcols{
  display:flex;
  justify-content:space-between;
  gap:40px;
  margin-bottom:36px;
}

.fcol h5{
  font:700 11px 'Hanken Grotesk';
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}

.fcol a{
  display:block;
  font:500 14px 'Hanken Grotesk';
  color:var(--soft);
  margin-bottom:9px;
  text-decoration:none;
  transition:color 150ms ease;
}

.fcol a:hover{
  color:var(--sage-deep);
}

.fcol p{
  font-size:13.5px;
  line-height:1.5;
  color:var(--muted);
}

.fbar{
  border-top:1px solid var(--line);
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:var(--muted);
}

.hint{
  color:var(--muted);
  font-style:italic;
}

/* Responsive */
@media (max-width:900px){
  .wrap{
    padding:0 28px;
  }

  nav{
    height:70px;
  }

  .navlinks{
    display:none;
  }

  .nav-toggle{
    display:flex;
  }

  .navlinks.mobile-open{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:70px;
    left:0;
    right:0;
    background:var(--surface);
    border-bottom:1px solid var(--line);
    padding:20px 28px;
    gap:16px;
    z-index:100;
  }
}

@media (max-width:720px){
  .features{
    grid-template-columns:1fr;
  }

  .fcols{
    flex-direction:column;
    gap:28px;
  }

  .fbar{
    flex-direction:column;
    gap:12px;
  }
}