/* MNGO website: shared tokens and chrome for the landing, login and legal pages.
   Palette matches the app: wine (brand, the one bold surface), gold (savings, highlights), blush paper, mint for money in. */
:root{
  --wine:#5A1424; --wine-deep:#3E0C18; --wine-mid:#7A2338; --rose:#E9A9B4;
  --gold:#E3B54A; --gold-ink:#3A2600; --gold-soft:#F6E7C2; --mint:#8FD3BD;
  --paper:#FBF3F1; --card:#FFFFFF; --ink:#2A0E15; --muted:#76585D; --line:#EDDCDC;
  --display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body:"Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
html{scroll-behavior:smooth}
body{margin:0; padding-top:env(safe-area-inset-top,0px); background:var(--paper); color:var(--ink); font:16px/1.6 var(--body); -webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--wine); outline-offset:3px; border-radius:6px}
h1,h2,h3{font-family:var(--display); line-height:1.08; letter-spacing:-.02em; margin:0; text-wrap:balance}
p{margin:0}
.wrap{max-width:1160px; margin:0 auto; padding-inline:20px}

/* Nav */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid transparent}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex; align-items:center; gap:28px; padding-block:14px}
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--display); font-weight:800; font-size:1.35rem; letter-spacing:.02em}
.logo .mark{width:34px; height:34px; border-radius:10px; background:var(--wine); display:grid; place-items:center}
.nav-links{display:flex; gap:22px; margin-right:auto}
.nav-links a{text-decoration:none; color:var(--muted); font-weight:600}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex; gap:10px; align-items:center}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 .98rem/1 var(--body); padding:13px 20px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); text-decoration:none; cursor:pointer}
.btn:hover{border-color:var(--rose)}
.btn.primary{background:var(--wine); border-color:var(--wine); color:#fff}
.btn.primary:hover{background:var(--wine-mid)}
.btn.gold{background:var(--gold); border-color:var(--gold); color:var(--gold-ink)}
.btn.gold:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--muted)}
.btn.ghost:hover{color:var(--ink)}

/* Footer */
.foot{padding-block:48px 40px; border-top:1px solid var(--line); margin-top:40px}
.foot .wrap{display:flex; flex-wrap:wrap; gap:28px 48px; align-items:flex-start; justify-content:space-between}
.foot nav{display:flex; flex-wrap:wrap; gap:10px 26px}
.foot nav a{color:var(--muted); text-decoration:none; font-weight:600}
.foot nav a:hover{color:var(--ink)}
.foot small{color:var(--muted)}

@media (max-width:820px){
  .nav-links{display:none}
  .nav .wrap{gap:12px}
  .nav-cta .btn{padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} html{scroll-behavior:auto} }