/* ==========================================================================
   NeatAccounts shared foundation: fonts, tokens, chrome (nav + footer),
   buttons. Shipped in every package. Chrome markup is scoped under .na-root.
   ========================================================================== */

/* ---- Self-hosted fonts (GDPR-safe, no Google CDN) ---- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2')}

/* ---- Brand tokens ---- */
:root{
  --na-teal:#189CB4; --na-teal-dark:#0F6B7E; --na-teal-soft:#E7F5F8;
  --na-amber:#FCA800; --na-amber-dark:#E09600; --na-amber-soft:#FFF6E5;
  --na-ink:#132A31; --na-slate:#4A5B62; --na-mist:#8A9AA0;
  --na-line:#E3EAEC; --na-paper:#F7FAFB; --na-white:#FFFFFF;
  --na-radius:14px; --na-maxw:1220px;
  --na-shadow:0 18px 44px rgba(15,107,126,.12);
}

/* ---- Chrome scope reset ---- */
.na-root{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--na-ink);line-height:1.65;-webkit-font-smoothing:antialiased}
.na-root *{box-sizing:border-box}
.na-root h1,.na-root h2,.na-root h3,.na-root h4{font-family:'Poppins',sans-serif;line-height:1.16;margin:0}
.na-root a{color:inherit;text-decoration:none}
.na-root img{max-width:100%;display:block}
.na-root .container{max-width:var(--na-maxw);margin:0 auto;padding:0 24px}

/* ---- Buttons ---- */
.na-root .na-btn{display:inline-flex;align-items:center;gap:8px;font-family:'Poppins';font-weight:700;font-size:15px;padding:13px 24px;border-radius:10px;border:0;cursor:pointer;transition:.16s;background:var(--na-amber);color:#3a2600;white-space:nowrap;text-align:center;justify-content:center}
.na-root .na-btn:hover{background:var(--na-amber-dark);transform:translateY(-1px)}
.na-root .na-btn-ghost{background:transparent;color:var(--na-white);border:1.5px solid rgba(255,255,255,.55)}
.na-root .na-btn-ghost:hover{background:rgba(255,255,255,.12);color:var(--na-white)}
.na-root .na-btn-teal{background:var(--na-teal);color:#fff}
.na-root .na-btn-teal:hover{background:var(--na-teal-dark)}
.na-root .na-btn-outline{background:#fff;color:var(--na-teal-dark);border:1.5px solid var(--na-line)}
.na-root .na-btn-outline:hover{border-color:var(--na-teal)}

/* ---- Sticky nav ---- */
.na-root .na-nav{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.92);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--na-line)}
.na-root .na-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.na-root .na-brand img{height:34px;width:auto}
.na-root .na-nav-links{display:flex;gap:26px;margin-left:auto}
.na-root .na-nav-links a{font-weight:500;font-size:15px;color:var(--na-slate)}
.na-root .na-nav-links a:hover{color:var(--na-teal-dark)}
.na-root .na-nav-cta{display:flex;align-items:center;gap:12px}
.na-root .na-hamburger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.na-root .na-hamburger span{width:24px;height:2px;background:var(--na-ink);border-radius:2px;transition:.2s}
.na-root .na-mobile{display:none;flex-direction:column;gap:4px;padding:16px 24px;background:#fff;border-bottom:1px solid var(--na-line)}
.na-root .na-mobile a{padding:10px 0;font-weight:500;color:var(--na-slate);border-bottom:1px solid var(--na-line)}
.na-root .na-mobile.open{display:flex}

/* ---- Footer ---- */
.na-root .na-foot{background:var(--na-ink);color:#fff}
.na-root .na-foot .container{padding-top:52px;padding-bottom:34px}
.na-root .na-foot-in{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.na-root .na-foot img{height:34px;filter:brightness(0) invert(1)}
.na-root .na-foot-links{display:flex;flex-wrap:wrap;gap:22px}
.na-root .na-foot-links a{color:rgba(255,255,255,.8);font-size:14px}
.na-root .na-foot-links a:hover{color:#fff}
.na-root .na-foot-right{font-family:'Poppins';font-weight:600;font-size:14px;color:rgba(255,255,255,.9)}
.na-root .na-foot-right a{color:var(--na-amber)}
.na-root .na-foot-trust{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-family:'Poppins';font-weight:600;color:#fff}
.na-root .na-copyright{margin-top:8px;font-size:13px;color:rgba(255,255,255,.55)}

@media(max-width:860px){
  .na-root .na-nav-links{display:none}
  .na-root .na-hamburger{display:flex}
  .na-root .na-nav-cta .na-btn{padding:10px 16px;font-size:14px}
}