/* =========================================================
   Mia Wayfinder — Mia Bazo brand styles
   Palette + tokens taken from Mia Accounting's public.css so the
   Mia products share one look.
     #c46412  primary deep (burnt orange)
     #dd7904  primary (mid orange) ← anchor
     #f7931e  primary bright
     #333333  ink (charcoal)
     #f5bb3b  amber (supporting)
     status accents: #118ed4 blue · #63ad71 green · #c13936 red
   ========================================================= */

:root {
  --mb-primary: #dd7904;
  --mb-primary-deep: #c46412;
  --mb-primary-bright: #f7931e;
  --mb-amber: #f5bb3b;
  --mb-ink: #333333;
  --mb-ink-soft: #4a4a4a;
  --mb-page: #faf8f5;
  --mb-surface: #ffffff;
  --mb-muted: #6b6b6b;
  --mb-line: #ececec;
  --mb-line-strong: #d8d8d8;
  --mb-blue: #118ed4;
  --mb-green: #63ad71;
  --mb-red: #c13936;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--mb-page);
  color: var(--mb-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

.mb-container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---- top nav: charcoal bar, orange-bright active/brand ---- */
.mb-nav {
  background: var(--mb-ink);
  color: #fff;
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.mb-nav .mb-container { display: flex; align-items: center; gap: 24px; }
.mb-nav .sp { flex: 1; }
.mb-nav a { color: rgba(255,255,255,.8); text-decoration: none; font-size: 14px;
            font-weight: 500; transition: color .15s; }
.mb-nav a:hover { color: #fff; }
.mb-nav a.active { color: var(--mb-primary-bright); }

/* ---- brand lockup: Mia Bazo mark + wordmark ---- */
.mia-logo { display: inline-flex; align-items: center; gap: 10px;
            font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.mia-logo-mark { height: 30px; width: auto; display: block; }
.mia-logo-mark--orange { display: block; }
.mia-logo-mark--white { display: none; }
.mb-nav .mia-logo-mark--orange, .mb-footer .mia-logo-mark--orange { display: none; }
.mb-nav .mia-logo-mark--white, .mb-footer .mia-logo-mark--white { display: block; }
.mia-logo-word { font-size: 20px; color: var(--mb-ink); letter-spacing: .01em; }
.mb-nav .mia-logo-word, .mb-footer .mia-logo-word { color: #fff; }
.mia-logo-bold { font-weight: 700; }
.mia-logo-light { font-weight: 400; opacity: .75; }

/* ---- buttons ---- */
.btn-cta, .btn-cta:focus {
  background: var(--mb-primary); color: #fff; font-weight: 600;
  border: 1px solid var(--mb-primary); border-radius: 8px; padding: 8px 18px;
  cursor: pointer; font-size: 14px; text-decoration: none; display: inline-block;
  transition: background .15s, transform .05s, box-shadow .15s;
  box-shadow: 0 1px 2px rgba(196,100,18,.2);
}
.btn-cta:hover { background: var(--mb-primary-deep); border-color: var(--mb-primary-deep);
                 color: #fff; box-shadow: 0 4px 12px rgba(196,100,18,.3); }
.btn-cta:active { transform: translateY(1px); }
.btn-cta-lg { padding: 14px 28px; font-size: 16px; border-radius: 10px; }
.btn-ghost {
  background: transparent; border: 1px solid rgba(51,51,51,.18); color: var(--mb-ink);
  font-weight: 500; border-radius: 8px; padding: 8px 16px; cursor: pointer;
  font-size: 14px; text-decoration: none; display: inline-block; transition: border-color .15s, background .15s;
}
.btn-ghost:hover { border-color: var(--mb-ink); background: rgba(51,51,51,.03); }
.btn-danger { background: var(--mb-red); color: #fff; border: 1px solid var(--mb-red);
              border-radius: 8px; padding: 8px 16px; cursor: pointer; font-weight: 600; font-size: 14px; }

/* ---- surfaces ---- */
.mb-card { background: var(--mb-surface); border: 1px solid var(--mb-line);
           border-radius: 12px; padding: 20px; }
.mb-muted { color: var(--mb-muted); }
.mb-pill { font-size: 12px; padding: 3px 10px; border-radius: 99px;
           background: #fff4e6; color: var(--mb-primary-deep); font-weight: 600; }
input.mb-input, .mb-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--mb-line-strong);
  border-radius: 8px; font-size: 15px; background: #fff; color: var(--mb-ink);
}
.mb-input:focus { outline: none; border-color: var(--mb-primary);
                  box-shadow: 0 0 0 3px rgba(221,121,4,.15); }

/* ---- hero + sections (matched to Mia Accounting public.css) ---- */
.hero {
  padding: 80px 0 64px;
  background:
    radial-gradient(ellipse at top right, rgba(247,147,30,.10), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(245,187,59,.08), transparent 55%),
    var(--mb-page);
}
.hero-eyebrow { color: var(--mb-primary-deep); font-weight: 600; font-size: 13px;
                letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.hero-title { font-size: clamp(34px,5vw,52px); line-height: 1.05; font-weight: 700;
              letter-spacing: -.025em; color: var(--mb-ink); margin: 0 0 22px; }
.hero-title .highlight { color: var(--mb-primary-deep);
              background: linear-gradient(180deg, transparent 65%, rgba(247,147,30,.32) 65%);
              padding: 0 4px; }
.hero-sub { font-size: 19px; color: var(--mb-muted); max-width: 60ch; margin: 0 0 32px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.section { padding: 72px 0; }
.section.alt { background: #fff; }
.section-eyebrow { color: var(--mb-primary-deep); font-weight: 600; font-size: 13px;
                   letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.section h2 { font-size: 28px; letter-spacing: -.01em; margin: 0 0 20px; }

/* ---- footer ---- */
.mb-footer { background: var(--mb-ink); color: rgba(255,255,255,.7);
             padding: 28px 0; font-size: 14px; margin-top: 0; }
.mb-footer a { color: var(--mb-primary-bright); text-decoration: none; }