/* MoneyMate — light, 2-tone red. Serious enterprise payments platform.
   Rebuilt from the design handoff as plain static HTML. Tone: credible, corporate. */
:root {
  --white:#ffffff; --off:#fbf8f9; --off2:#faf7f8; --ink:#1a1418; --body:#3a343c;
  --gray:#5b545e; --gray2:#8a828d; --gray3:#a89ba0; --eyebrow:#b0868f;
  --border:#efeaec; --border2:#eee7ea; --border3:#e8e2e5;
  --crayon:#db1e3c; --link:#c81437; --burgundy:#6e1223; --burgundy-mid:#a01530;
  --green:#25a35f; --green-d:#1a8a4a; --amber:#e0a020; --amber-d:#b07800; --stars:#e0c34a;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--white); font-family:'IBM Plex Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; color:var(--body); min-height:100vh; }
a { color:var(--link); text-decoration:none; }
a:hover { color:var(--burgundy); }
::selection { background:var(--crayon); color:#fff; }
.serif { font-family:'IBM Plex Serif',Georgia,serif; }
.mono { font-family:'JetBrains Mono',monospace; }
h1,h2,h3 { color:var(--ink); }

.wrap { max-width:1160px; margin:0 auto; padding-left:30px; padding-right:30px; }
.wrap-narrow { max-width:1040px; }
.eyebrow { font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--eyebrow); letter-spacing:.14em; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ribbon */
.ribbon { background:var(--burgundy); color:#f6dfe4; text-align:center; padding:8px 20px; font-size:12.5px; letter-spacing:.01em; }
.ribbon a { color:#f3b6c1; text-decoration:underline; }

/* nav */
.nav { display:flex; align-items:center; gap:30px; padding-top:20px; padding-bottom:20px; }
.nav--bordered { border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); }
.brand__mark { width:30px; height:30px; border-radius:7px; flex:none; background:var(--crayon); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; }
.brand__name { font-weight:700; font-size:20px; color:var(--ink); letter-spacing:-.01em; }
.brand__reg { font-size:8.5px; font-weight:700; color:var(--burgundy); border:1px solid #e3b9c1; padding:2px 4px; border-radius:3px; letter-spacing:.04em; vertical-align:super; }
.nav__links { display:flex; gap:24px; margin-left:16px; font-size:14px; }
.nav__links a { color:var(--gray); }
.nav__right { margin-left:auto; display:flex; align-items:center; gap:18px; }
.back { margin-left:auto; font-size:13px; color:var(--gray2); }

/* buttons */
.btn { font-weight:600; font-size:15px; padding:15px 26px; border-radius:9px; display:inline-block; }
.btn--sm { font-size:13.5px; padding:11px 20px; border-radius:8px; }
.btn--primary { background:var(--crayon); color:#fff; box-shadow:0 4px 16px rgba(219,30,60,.3); }
.btn--ghost { background:#fff; color:var(--burgundy); border:1px solid #e3ccd1; }
.btn--onburg { background:#fff; color:var(--burgundy); font-weight:700; }

/* cards + figures */
.card { border:1px solid var(--border2); border-radius:13px; background:#fff; }
.figure { display:block; width:100%; border:1px solid var(--border3); border-radius:14px; background:
  linear-gradient(135deg,#fdf6f7,#f7eef0); overflow:hidden; position:relative; }
.figure__caption { font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--gray3); margin-top:10px; text-align:center; }
.badge-9 { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--green-d); font-weight:700; border:1px solid #bfe3cd; background:#eafaf0; padding:3px 8px; border-radius:5px; }

.section { margin-top:64px; }
.h2 { font-family:'IBM Plex Serif',Georgia,serif; font-weight:700; color:var(--ink); }

/* footer */
.footer { margin-top:64px; padding-top:40px; padding-bottom:64px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; }
.footer h4 { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--eyebrow); letter-spacing:.08em; margin-bottom:12px; font-weight:700; }
.footer__col { display:flex; flex-direction:column; gap:9px; font-size:13.5px; }
.footer__col a { color:var(--gray); }

@media (max-width:720px) {
  .nav { flex-wrap:wrap; gap:14px; }
  .footer { grid-template-columns:1fr 1fr; }
}